/* 테마: 종이 다이어리 (Phase 0 시안 A 승격판) */
:root{
  --paper:#efe6d5; --sheet:#fffdf6; --line:#f0e4cf; --ink:#4a3f35; --pencil:#857661;
  --crit:#c94a41; --urgent:#d97e29; --warn:#b99a1b; --ok:#6f9451; --routine:#4f7fae; --idea:#a4762d;
  --hl:#ffe9a8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  font-family:'Gaegu',cursive; color:var(--ink); font-size:17px; line-height:1.4;
  background:var(--paper);
  background-image:radial-gradient(#ddcfb4 1px, transparent 1.3px);
  background-size:20px 20px;
}
button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:none}
input,select,textarea{font-family:inherit;color:var(--ink)}
.wrap{max-width:430px;margin:0 auto;padding:14px 14px 150px}

/* ── 상단 ── */
.topbar{text-align:center;padding:6px 0 2px;position:relative}
.brand{font-family:'Nanum Pen Script',cursive;font-size:34px;line-height:1.1}
.today{font-size:15px;color:var(--pencil);margin-top:-2px}
.mode-toggle{display:flex;justify-content:center;gap:8px;margin-top:10px}
.mt-btn{
  border:2px solid var(--pencil);background:var(--sheet);border-radius:10px 14px 10px 14px/14px 10px 14px 10px;
  padding:5px 14px;font-size:16px;color:var(--pencil);box-shadow:2px 2px 0 rgba(90,70,40,.18);
}
.mt-btn.active{background:var(--hl);color:var(--ink);font-weight:700;transform:rotate(-1deg)}
.gear{
  position:absolute;right:0;top:2px;width:38px;height:38px;font-size:20px;
  border:2px solid var(--pencil);border-radius:50% 45% 50% 48%;background:var(--sheet);
  box-shadow:2px 2px 0 rgba(90,70,40,.18);color:var(--pencil);
}
.fake-now{
  display:inline-block;margin-top:8px;font-size:14px;color:var(--crit);
  border:2px dashed var(--crit);border-radius:999px;padding:1px 10px;cursor:pointer;
}
.greet{font-family:'Nanum Pen Script',cursive;font-size:24px;text-align:center;margin:14px 0 4px}

/* ── 종이 시트 ── */
.block{
  position:relative;background:var(--sheet);border-radius:6px;
  background-image:repeating-linear-gradient(transparent 0 26px, var(--line) 26px 27px);
  box-shadow:0 3px 10px rgba(90,70,40,.16);
  padding:20px 14px 12px;margin:24px 0;
}
.view .block:nth-of-type(odd){transform:rotate(-.5deg)}
.view .block:nth-of-type(even){transform:rotate(.45deg)}
.block::before{ /* 마스킹테이프 */
  content:"";position:absolute;top:-11px;left:50%;width:96px;height:24px;
  transform:translateX(-50%) rotate(-3deg);border-radius:2px;opacity:.95;
  background:repeating-linear-gradient(45deg, rgba(240,150,170,.55) 0 8px, rgba(255,255,255,.45) 8px 16px);
  box-shadow:0 1px 2px rgba(90,70,40,.2);
}
.b-recommend::before{background:repeating-linear-gradient(45deg, rgba(140,205,170,.55) 0 8px, rgba(255,255,255,.45) 8px 16px);transform:translateX(-50%) rotate(2.5deg)}
.b-overview::before{background:repeating-linear-gradient(45deg, rgba(150,180,230,.5) 0 8px, rgba(255,255,255,.45) 8px 16px)}
.b-tray::before{background:repeating-linear-gradient(45deg, rgba(230,200,120,.55) 0 8px, rgba(255,255,255,.45) 8px 16px);transform:translateX(-50%) rotate(2deg)}
.b-timeset::before{background:repeating-linear-gradient(45deg, rgba(200,170,230,.5) 0 8px, rgba(255,255,255,.45) 8px 16px);transform:translateX(-50%) rotate(-2deg)}
.block-title{
  display:inline-block;margin:0 0 6px;font-size:21px;font-weight:700;
  background:linear-gradient(transparent 62%, var(--hl) 62%);padding:0 4px;
}
.hint{margin:0 0 6px;font-size:14px;color:var(--pencil)}
.hint-inline{font-size:14px;color:var(--pencil);font-weight:400}
.empty{font-size:15px;color:var(--pencil);margin:4px 0}

/* ── 리스트/아이템 ── */
.list{list-style:none;margin:0;padding:0}
.item{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 2px;border-bottom:2px dashed #e6d9bf}
.item:last-child{border-bottom:none}
.item .ttl{flex:1 1 auto;min-width:130px;font-size:17px;cursor:pointer}
.item.card{padding:8px 4px}
.item.card.picked{background:linear-gradient(transparent 8%, rgba(255,233,168,.5) 8% 92%, transparent 92%)}
.chk{
  width:22px;height:22px;flex:0 0 auto;border:2px solid var(--pencil);
  border-radius:4px 8px 4px 7px/7px 4px 8px 4px;position:relative;background:#fff;cursor:pointer;padding:0;
}
.chk.on::after{content:"✔";position:absolute;left:2px;top:-7px;font-size:20px;color:var(--crit);font-weight:700}
.emo{flex:0 0 auto;font-size:19px}
.badges{display:flex;gap:5px;flex:0 0 auto;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.badge{font-size:13px;color:var(--pencil);white-space:nowrap}
.b-grade{border:2px solid;border-radius:999px;padding:0 8px;font-weight:700;transform:rotate(-2deg)}
.grade-crit .b-grade{color:var(--crit);border-color:var(--crit)}
.grade-urgent .b-grade{color:var(--urgent);border-color:var(--urgent)}
.grade-warn .b-grade{color:var(--warn);border-color:var(--warn)}
.grade-ok .b-grade{color:var(--ok);border-color:var(--ok)}
.b-routine{color:var(--routine);border:2px dashed var(--routine);border-radius:999px;padding:0 7px;transform:rotate(1.5deg)}
.b-defer{color:var(--crit);border:2px dashed var(--crit);border-radius:999px;padding:0 7px}
.dot{width:11px;height:11px;flex:0 0 auto;border-radius:50% 42% 55% 45%;background:var(--ok)}
.grade-crit .dot{background:var(--crit)}
.grade-urgent .dot{background:var(--urgent)}
.grade-warn .dot{background:var(--warn)}
.idea .dot,.grade-idea .dot{background:var(--idea)}
.item.slim{padding:5px 2px}
.item.slim .ttl{font-size:16px}
.acts{display:flex;gap:5px;flex:0 0 auto;margin-left:auto}

/* ── 접힘 그룹 ── */
.grp summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:7px 2px 3px;font-size:17px;font-weight:700;color:var(--pencil);
}
.grp summary::-webkit-details-marker{display:none}
.grp summary::before{content:"▸";font-size:14px}
.grp[open] summary::before{content:"▾"}
.cnt{
  font-size:13px;border:2px solid var(--pencil);border-radius:50%;min-width:22px;height:22px;
  display:grid;place-items:center;transform:rotate(6deg);padding:0 2px;
}
.grp .list{margin-left:16px}

/* ── 버튼 ── */
.mini{
  border:2px solid var(--pencil);background:#fff;border-radius:8px 12px 8px 12px/12px 8px 12px 8px;
  padding:2px 9px;font-size:14px;box-shadow:2px 2px 0 rgba(90,70,40,.15);
}
.mini:active{transform:translate(1px,1px);box-shadow:none}
.mini.ghost{border-style:dashed;background:transparent;box-shadow:none;color:var(--pencil)}
.mini.danger{border-color:var(--crit);color:var(--crit)}
.mini.on{background:var(--hl);color:var(--ink);font-weight:700}
.confirm{
  display:block;width:100%;margin:6px 0 4px;padding:14px;border:none;
  background:var(--hl);font-size:22px;font-weight:700;border-radius:4px;
  transform:rotate(-.6deg);box-shadow:3px 4px 0 rgba(90,70,40,.25);position:relative;
}
.confirm::after{
  content:"";position:absolute;right:0;bottom:0;border-style:solid;border-width:0 0 16px 16px;
  border-color:transparent transparent rgba(90,70,40,.18) transparent;
}
.confirm:active{transform:rotate(-.6deg) translate(2px,2px);box-shadow:none}
.confirm:disabled{opacity:.55}

/* ── 시간 정하기 ── */
.ts-row{display:flex;align-items:center;gap:6px;padding:6px 2px;border-bottom:2px dashed #e6d9bf;flex-wrap:wrap}
.ts-row:last-child{border-bottom:none}
.ts-row .ttl{flex:1 1 auto;min-width:110px;font-size:16px}
.ts-row input[type=time]{
  border:2px solid var(--pencil);border-radius:8px;background:#fff;padding:2px 4px;font-size:15px;width:96px;
}
.ts-row .tilde{color:var(--pencil)}

/* ── 낮: 진행률 ── */
.progress{margin:18px 2px 6px}
.p-label{font-family:'Nanum Pen Script',cursive;font-size:22px;margin-bottom:4px}
.p-track{height:14px;border:2px solid var(--pencil);border-radius:999px;background:#fff;overflow:hidden}
.p-fill{height:100%;background:repeating-linear-gradient(45deg,#e2907f 0 7px,#c94a41 7px 14px);transition:width .4s}

/* ── 낮: NOW 스티키 ── */
.now-card{
  position:relative;background:#ffd9d4;border-radius:4px;padding:22px 14px 14px;margin:26px 0;
  transform:rotate(.7deg);box-shadow:0 4px 10px rgba(90,70,40,.2);
  display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;gap:4px 12px;align-items:center;
}
.now-card::before{
  content:"";position:absolute;top:-11px;left:50%;width:90px;height:24px;
  transform:translateX(-50%) rotate(3deg);border-radius:2px;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 8px, rgba(240,150,170,.5) 8px 16px);
}
.now-card.mode-next{background:#fff3d6}
.now-card.mode-free{background:#e4efdd}
.now-card.mode-done{background:#e8e2d5}
.now-tag{
  grid-row:1/3;align-self:center;font-weight:700;color:var(--crit);font-size:15px;
  border:2px dashed var(--crit);border-radius:50%;width:54px;height:54px;
  display:grid;place-items:center;transform:rotate(-12deg);background:rgba(255,255,255,.5);text-align:center;line-height:1;
}
.now-emo{grid-row:1/3;font-size:38px}
.now-ttl{font-size:21px;font-weight:700;align-self:end}
.now-time{font-family:'Nanum Pen Script',cursive;font-size:20px;color:#8a4a44;align-self:start}
.now-acts{grid-column:1/4;display:flex;gap:8px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap}
.big{
  border:2px solid var(--crit);background:#fff;color:var(--crit);font-weight:700;font-size:17px;
  border-radius:10px 14px 10px 14px/14px 10px 14px 10px;padding:5px 18px;
  box-shadow:2px 2px 0 rgba(90,70,40,.2);
}

/* ── 낮: 시간표 ── */
.tl{list-style:none;margin:0;padding:0}
.tl-item{display:flex;align-items:center;gap:8px;padding:7px 2px;border-bottom:2px dashed #e6d9bf;flex-wrap:wrap}
.tl-item:last-child{border-bottom:none}
.tl-item .tm{font-family:'Nanum Pen Script',cursive;font-size:20px;width:52px;flex:0 0 auto}
.tl-item .ttl{flex:1 1 auto;min-width:110px;cursor:pointer}
.tl-item .state{font-size:13px;color:var(--pencil)}
.tl-item.done .ttl{text-decoration:line-through;color:var(--pencil)}
.tl-item.done .state{
  color:var(--crit);border:2px solid var(--crit);border-radius:50%;padding:4px 3px;
  font-weight:700;transform:rotate(-10deg);font-size:12px;
}
.tl-item.now{background:linear-gradient(transparent 6%, rgba(255,233,168,.55) 6% 94%, transparent 94%)}
.tl-item.now .state{color:var(--crit);font-weight:700}
.tl-item.deferred .ttl{color:var(--pencil);text-decoration:line-through dashed}

/* ── 재촉 쪽지 ── */
.checkin{
  position:relative;background:#d9f2e4;border-radius:4px;padding:20px 14px 12px;margin:26px 0 0;
  transform:rotate(-.8deg);box-shadow:0 4px 10px rgba(90,70,40,.2);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.checkin::before{
  content:"";position:absolute;top:-11px;left:24px;width:80px;height:22px;transform:rotate(-4deg);
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 8px, rgba(140,205,170,.55) 8px 16px);border-radius:2px;
}
.ci-face{font-size:32px}
.ci-msg{flex:1;min-width:150px;font-size:16px}
.ci-sub{display:block;font-size:13px;color:var(--pencil)}
.ci-acts{display:flex;gap:5px;flex-wrap:wrap}

/* ── 배너 ── */
.banner{
  position:relative;background:#ffe3c2;border-radius:4px;padding:14px;margin:22px 0;
  transform:rotate(-.5deg);box-shadow:0 4px 10px rgba(90,70,40,.2);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:16px;
}

/* ── 하단 캡처 ── */
.capture{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  background:var(--sheet);border-top:2px dashed var(--pencil);
  box-shadow:0 -4px 14px rgba(90,70,40,.15);
  padding:8px 0 calc(10px + env(safe-area-inset-bottom));
}
.cap-inner{max-width:430px;margin:0 auto;padding:0 14px}
.cap-chips{display:flex;gap:6px;margin-bottom:6px;align-items:center;flex-wrap:wrap;min-height:22px}
.chip{
  font-size:13px;background:#fff;border:2px solid var(--pencil);border-radius:999px;padding:1px 9px;
  box-shadow:1px 1px 0 rgba(90,70,40,.15);cursor:pointer;
}
.chip::after{content:" ✕";color:var(--pencil);font-size:11px}
.hint-chip{border:none;box-shadow:none;background:transparent;color:var(--pencil);cursor:default}
.hint-chip::after{content:""}
.cap-row{display:flex;gap:8px}
.cap-in{
  flex:1;font-family:'Gaegu',cursive;font-size:18px;color:var(--ink);
  border:2px solid var(--pencil);border-radius:10px 14px 10px 14px/14px 10px 14px 10px;
  padding:8px 12px;background:#fff;outline:none;min-width:0;
}
.cap-add{
  width:46px;border:2px solid var(--crit);background:var(--crit);color:#fff;font-size:24px;
  border-radius:12px 16px 12px 16px/16px 12px 16px 12px;box-shadow:2px 2px 0 rgba(90,70,40,.25);
}

/* ── 시트(종이) & 토스트(스티키) ── */
.sheet{
  background:var(--sheet);
  background-image:repeating-linear-gradient(transparent 0 26px, var(--line) 26px 27px);
  box-shadow:0 -6px 20px rgba(90,70,40,.3);
}
.sheet h3{
  display:inline-block;font-size:21px;font-weight:700;
  background:linear-gradient(transparent 62%, var(--hl) 62%);padding:0 4px;
}
.sheet .sec-title{font-weight:700;color:var(--pencil);margin:16px 0 4px;font-size:16px}
.f-row input,.f-row select{
  border:2px solid var(--pencil);border-radius:8px;background:#fff;
}
.toast{
  background:var(--hl);color:var(--ink);border-radius:3px;
  box-shadow:2px 3px 0 rgba(90,70,40,.25);transform-origin:center;
}
.toast.show{transform:rotate(-.8deg)}