/* EchoPlanner 웹 디자인 시스템 — 따뜻한 페이퍼 + 모던 미니멀 (라이트/다크) */
/* ── 테마 토큰 ── 기본 = Paper(라이트). data-theme 로 전환 */
:root{
  --bg:#f4f0e9; --surface:#ffffff; --surface-2:#ece5d7;
  --ink:#25211c; --muted:#847a6c; --faint:#a59b8c;
  --line:#e2dbcd; --line-strong:#cfc5b3;
  --accent:#bd5f43; --accent-soft:#f3e2da;
  --A:#d84b36; --B:#c5841a; --C:#5f8459; --fab-bg:var(--accent);
  --shadow:0 1px 2px rgba(43,39,34,.05), 0 4px 16px rgba(43,39,34,.08);
  --shadow-lg:0 -2px 8px rgba(43,39,34,.06), 0 -16px 48px rgba(43,39,34,.14);
  --radius:16px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme]){
  --bg:#141210; --surface:#2a2521; --surface-2:#352f29; --ink:#f4f0ea; --muted:#b7ac9c; --faint:#877e70;
  --line:#3a342e; --line-strong:#4c453c; --accent:#ee9778; --accent-soft:#3c2d24;
  --A:#f37862; --B:#eeb74f; --C:#97b98c;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 26px rgba(0,0,0,.4); --shadow-lg:0 -2px 8px rgba(0,0,0,.4),0 -16px 48px rgba(0,0,0,.55);
}}
[data-theme="mint"]{
  --bg:#f0fbfa; --surface:#ffffff; --surface-2:#dcf3f0; --ink:#0d2b29; --muted:#4d7e79; --faint:#83bab4;
  --line:#cbe8e4; --line-strong:#a8dbd5; --accent:#0b8278; --accent-soft:#cdeeea;
  --A:#e23c39; --B:#d98a14; --C:#1f9389; --fab-bg:linear-gradient(135deg,#0fb3a3,#0891b2);
}
[data-theme="penguin"]{
  --bg:#f5f9fb; --surface:#ffffff; --surface-2:#e8f1f0; --ink:#283747; --muted:#71819a; --faint:#9fb0c2;
  --line:#e1eaf0; --line-strong:#ccd8e2; --accent:#0ea672; --accent-soft:#d6f7e8;
  --A:#ef4368; --B:#e89313; --C:#13a368; --fab-bg:var(--accent);
}
[data-theme="seriph"]{
  --bg:#fbf8f3; --surface:#ffffff; --surface-2:#f1ece1; --ink:#272320; --muted:#877d6c; --faint:#b0a591;
  --line:#e2d9c8; --line-strong:#d1c6b1; --accent:#356b57; --accent-soft:#dceae3;
  --A:#b3362a; --B:#9c7209; --C:#356b57; --fab-bg:var(--accent);
}
[data-theme="dark"]{
  --bg:#141210; --surface:#2a2521; --surface-2:#352f29; --ink:#f4f0ea; --muted:#b7ac9c; --faint:#877e70;
  --line:#3a342e; --line-strong:#4c453c; --accent:#ee9778; --accent-soft:#3c2d24;
  --A:#f37862; --B:#eeb74f; --C:#97b98c;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 26px rgba(0,0,0,.4); --shadow-lg:0 -2px 8px rgba(0,0,0,.4),0 -16px 48px rgba(0,0,0,.55);
}
/* 테마별 스타일 차이 */
[data-theme="seriph"] .date{font-family:'Playfair Display',serif}
[data-theme="seriph"] .text{font-family:'Lora',serif}
[data-theme="seriph"] .item{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:14px 4px}
[data-theme="seriph"] .item.done{background:transparent}
[data-theme="seriph"] .pbadge{background:transparent;border-radius:0;width:auto;font-family:'Playfair Display',serif;font-weight:700}
[data-theme="seriph"] .pbadge.A{color:var(--A)} [data-theme="seriph"] .pbadge.B{color:var(--B)} [data-theme="seriph"] .pbadge.C{color:var(--C)}
[data-theme="penguin"] .pbadge{border-radius:999px;width:auto;min-width:21px;padding:0 8px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  transition:background-color .3s ease, color .3s ease;
  font-family:'Inter',-apple-system,"Segoe UI","Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.app{max-width:600px;margin:0 auto;min-height:100%;padding:0 18px calc(110px + env(safe-area-inset-bottom,0px))}

/* Header */
.head{padding:34px 4px 18px}
.head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.eyebrow{font-size:13px;font-weight:600;color:var(--accent);letter-spacing:.02em;text-transform:uppercase}
.date{margin:6px 0 0;font-size:40px;line-height:1;font-weight:700;letter-spacing:-.02em}
.date .dsuffix{font-size:17px;font-weight:600;color:var(--muted);margin-left:8px}
.subdate{margin-top:6px;font-size:14px;color:var(--muted)}
.ring{position:relative;width:52px;height:52px;flex:0 0 auto}
.ring svg{width:52px;height:52px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.ring-bg{stroke:var(--line-strong)}
.ring-fg{stroke:var(--accent);stroke-dasharray:119.4;stroke-dashoffset:119.4;transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1)}
.ring-num{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted)}
.head-right{display:flex;align-items:center;gap:10px}
.theme-btn{width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line-strong);background:var(--surface);
  border-radius:11px;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:transform .15s}
.theme-btn:active{transform:scale(.92)}
.theme-btn svg{width:19px;height:19px}
.theme-wrap{position:relative}
.theme-menu{position:absolute;top:46px;right:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.18);padding:6px;z-index:25;min-width:150px;display:flex;flex-direction:column;gap:2px}
.theme-menu[hidden]{display:none}
.theme-menu button{display:flex;align-items:center;gap:11px;background:transparent;border:0;padding:9px 10px;border-radius:9px;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;font-family:inherit;text-align:left}
.theme-menu button:hover,.theme-menu button.on{background:var(--surface-2)}
.theme-menu button.on::after{content:'✓';margin-left:auto;color:var(--accent);font-weight:700}
.theme-menu i{width:17px;height:17px;border-radius:5px;flex:0 0 auto;border:1px solid rgba(0,0,0,.1)}

/* Google Drive 동기화 버튼·메뉴 */
.sync-wrap{position:relative}
.sync-btn{position:relative;width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line-strong);background:var(--surface);
  border-radius:11px;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:transform .15s}
.sync-btn:active{transform:scale(.92)}
.sync-btn svg{width:19px;height:19px}
.sync-dot{position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;background:#b8b0a4;border:2px solid var(--surface)}
.sync-dot.connecting,.sync-dot.syncing{background:#f0a020;animation:syncPulse 1s infinite}
.sync-dot.synced,.sync-dot.connected{background:#22b07a}
.sync-dot.offline{background:#8a8a93}
.sync-dot.error{background:#e0533f}
@keyframes syncPulse{0%,100%{opacity:1}50%{opacity:.3}}
.sync-menu{position:absolute;top:46px;right:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.18);padding:8px;z-index:25;min-width:200px;display:flex;flex-direction:column;gap:6px}
.sync-menu[hidden]{display:none}
.sync-status{font-size:12.5px;color:var(--muted);padding:4px 6px 2px;font-weight:600}
.sync-act{background:var(--surface-2);border:0;padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit;text-align:left;transition:transform .1s}
.sync-act:active{transform:scale(.97)}
.sync-act.primary{background:var(--accent);color:#fff}
.sync-act.danger{color:#c0392b;background:transparent}
.sync-act[hidden]{display:none}

/* List */
.list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:13px 14px;box-shadow:var(--shadow);
  transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s}
/* 손맛 애니메이션 */
.item.fx-add{animation:fxAdd .48s cubic-bezier(.34,1.5,.5,1)}
@keyframes fxAdd{from{opacity:0;transform:translateY(26px) scale(.85)}to{opacity:1;transform:none}}
/* 진입 — 할일들이 의욕적으로 올라오며 등장(배지 팝) */
.item.fx-enter{animation:fxEnter .58s cubic-bezier(.16,1.28,.3,1) both}
.item.fx-enter .pbadge{animation:badgePop .58s cubic-bezier(.2,1.9,.4,1) both;animation-delay:inherit}
@keyframes fxEnter{0%{opacity:0;transform:translateY(34px) scale(.88)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes badgePop{0%{transform:scale(0) rotate(-14deg)}65%{transform:scale(1.3) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
.state.fx-pop{animation:fxPop .5s ease}
@keyframes fxPop{0%{transform:scale(1)}26%{transform:scale(1.55)}55%{transform:scale(.88)}100%{transform:scale(1)}}
.state.fx-pop::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2.5px solid var(--accent);
  animation:fxRing .62s ease-out forwards;pointer-events:none}
@keyframes fxRing{from{transform:scale(1);opacity:.7}to{transform:scale(3.4);opacity:0}}
@keyframes ringPulse{0%,100%{transform:scale(1)}40%{transform:scale(1.16)}}
.ring.celebrate{animation:ringPulse .7s ease}
/* 완료 축하 컨페티 */
.confetti{position:fixed;border-radius:2px;pointer-events:none;z-index:60;
  transform:translate(-50%,-50%);animation:confettiFly 1.05s cubic-bezier(.2,.5,.3,1) forwards}
@keyframes confettiFly{
  0%{transform:translate(-50%,-50%) scale(.7) rotate(0);opacity:1}
  18%{transform:translate(calc(-50% + var(--tx) * .55),calc(-50% + var(--ty))) scale(1);opacity:1}
  100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty) + var(--fall))) scale(.7) rotate(var(--rot));opacity:0}
}
/* 전체완료 토스트 */
.toast{position:fixed;left:50%;top:36%;z-index:70;pointer-events:none;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:0 14px 44px rgba(0,0,0,.22);
  padding:14px 24px;border-radius:18px;font-size:16px;font-weight:700;white-space:nowrap;
  animation:toastPop 2s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes toastPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  82%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-58%) scale(.96)}
}
.item.done{background:var(--surface-2);box-shadow:none;border-color:transparent}
.state{width:24px;height:24px;flex:0 0 auto;border-radius:50%;border:2px solid var(--line-strong);
  cursor:pointer;position:relative;transition:.2s;display:grid;place-items:center}
.state .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .2s}
.state .chk{position:absolute;color:#fff;font-size:13px;opacity:0;transform:scale(.5);transition:.2s}
.item.doing .state{border-color:var(--accent)}
.item.doing .state .dot{transform:scale(1)}
.item.done .state{background:var(--accent);border-color:var(--accent)}
.item.done .state .chk{opacity:1;transform:scale(1)}
.pbadge{width:21px;height:21px;flex:0 0 auto;border-radius:7px;font-size:11px;font-weight:800;color:#fff;display:grid;place-items:center}
.pbadge.A{background:var(--A)} .pbadge.B{background:var(--B)} .pbadge.C{background:var(--C)}
.text{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.t-title{font-size:16px;font-weight:450;line-height:1.35;word-break:break-word}
.t-notes{font-size:13px;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item.done .t-title{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--faint)}
.item.done .t-notes{color:var(--faint)}
.del{width:28px;height:28px;flex:0 0 auto;border:0;background:transparent;color:var(--faint);font-size:18px;
  cursor:pointer;border-radius:8px;opacity:0;transition:.15s;display:grid;place-items:center}
.item:hover .del{opacity:1}
.del:hover{color:var(--A);background:var(--surface-2)}
@media (hover:none){.del{opacity:.55}}

/* Empty */
.empty{display:none;text-align:center;padding:48px 20px;color:var(--muted)}
.empty-mark{width:54px;height:54px;margin:0 auto 14px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent);display:grid;place-items:center;font-size:24px}
.empty p{margin:0;font-size:15px} .empty b{color:var(--accent)}
.foot{color:var(--faint);font-size:12px;text-align:center;padding:24px 0}

/* FAB */
.fab{position:fixed;z-index:20;right:max(20px,calc(50% - 300px + 20px));bottom:calc(22px + env(safe-area-inset-bottom,0px));
  width:58px;height:58px;border-radius:19px;border:0;background:var(--fab-bg);color:#fff;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.2);transition:transform .15s, box-shadow .15s}
.fab:hover{transform:translateY(-1px)}
.fab:active{transform:scale(.92)}

/* Bottom sheet */
.sheet-wrap{position:fixed;inset:0;z-index:30;visibility:hidden;opacity:0;transition:opacity .22s, visibility .22s}
.sheet-wrap.is-open{visibility:visible;opacity:1}
.sheet-backdrop{position:absolute;inset:0;background:rgba(20,16,12,.34);backdrop-filter:blur(2px)}
.sheet{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:520px;background:var(--surface);
  border-radius:24px 24px 0 0;box-shadow:var(--shadow-lg);padding:8px 18px calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateY(110%);transition:transform .28s cubic-bezier(.32,.72,0,1)}
.sheet-wrap.is-open .sheet{transform:translateY(0)}
.sheet-handle{width:38px;height:4px;border-radius:99px;background:var(--line-strong);margin:6px auto 14px}
.sheet-input{width:100%;border:0;background:transparent;color:var(--ink);font-size:18px;font-weight:500;
  line-height:1.5;padding:10px 2px 14px;outline:none;font-family:inherit;resize:none;display:block;
  min-height:104px;max-height:220px;overflow-y:auto}
.sheet-input::placeholder{color:var(--faint);font-weight:400}
.sheet-prio{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:14px 0}
.prio-label{font-size:13px;font-weight:600;color:var(--muted)}
.prio-pick{display:flex;align-items:center;gap:8px}
.pdot{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;
  font-size:13px;font-weight:800;color:var(--faint);cursor:pointer;transition:.18s;display:grid;place-items:center}
.pdot.A.is-on{background:var(--A);border-color:var(--A);color:#fff}
.pdot.B.is-on{background:var(--B);border-color:var(--B);color:#fff}
.pdot.C.is-on{background:var(--C);border-color:var(--C);color:#fff}
.prio-hint{font-size:13px;color:var(--accent);font-weight:500;margin-left:2px}
.sheet-add{border:0;background:var(--accent);color:#fff;font-size:16px;font-weight:600;
  padding:13px 22px;border-radius:13px;cursor:pointer;transition:.15s;font-family:inherit}
.sheet-add.full{width:100%}
.sheet-add:active{transform:scale(.97)}

/* 데스크탑: 바텀시트를 중앙 카드로 */
@media (min-width:640px) and (min-height:560px){
  .sheet{bottom:auto;top:50%;border-radius:22px;transform:translateY(-46%) scale(.96);opacity:0;
    transition:transform .22s, opacity .22s}
  .sheet-wrap.is-open .sheet{transform:translateY(-50%) scale(1);opacity:1}
  .sheet-handle{display:none}
  .sheet{padding-top:22px}
}