:root{
  --bg:#fff; --grouped:#F2F2F7; --sheet:#EBEBED; --card:#fff; --chip:#F2F2F4;
  --ink:#111; --ink2:#3C3C43; --muted:#8E8E93; --faint:#C7C7CC; --line:#EDEDEF;
  --primary:#3B82F6; --primary-soft:#E8F0FE; --sun:#E53935; --sat:#2F7CF6;
  --today:#E3EEFB; --hi:#FFF8DC; --scrim:rgba(0,0,0,.4);
  --pay-bg:#EEF8D9; --pay-band:#CFEF9E; --pay-ink:#3A5516;
  --safe-t:env(safe-area-inset-top); --safe-b:env(safe-area-inset-bottom);
  --ease:cubic-bezier(.2,.8,.2,1);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#121214; --grouped:#000; --sheet:#2A2A2D; --card:#1C1C1E; --chip:#2C2C2E;
  --ink:#F2F2F2; --ink2:#D1D1D6; --muted:#98989F; --faint:#48484A; --line:#2C2C2E;
  --primary:#4A8EF8; --primary-soft:#1E2A3D; --sun:#FF6B6B; --sat:#5C9BFF;
  --today:#1E2A3D; --hi:#2E2A1C; --scrim:rgba(0,0,0,.6);
  --pay-bg:#222B1A; --pay-band:#34462A; --pay-ink:#C3E493;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:var(--ink);overscroll-behavior:none}
body{overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-font-smoothing:antialiased}
input,textarea,select{font:inherit;color:inherit;-webkit-user-select:text;user-select:text}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none!important}
.vh{position:fixed;left:-100px;top:0;width:1px;height:1px;opacity:0}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
i .ic{width:18px;height:18px}

/* ---------- shell ---------- */
#app{height:100dvh;display:flex;flex-direction:column;max-width:600px;margin:0 auto;padding-top:var(--safe-t);background:var(--bg)}
.top{display:flex;align-items:center;gap:4px;padding:18px 6px 4px 6px;height:70px;flex-shrink:0}
.ttl{font-size:22px;font-weight:800;letter-spacing:-.5px;padding:0 6px}
.today-btn{border:1.5px solid var(--ink);border-radius:20px;padding:2px 11px;font-size:11px;font-weight:600;margin-left:2px}
.sp{flex:1}
.acts{display:flex}
.ib{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;transition:background .15s}
.ib:active{background:var(--chip)}
.ib.sm{width:34px;height:34px}
.ib.sm .ic{width:18px;height:18px}
.ib.circ{border:1px solid var(--line);border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.grp-pill{display:flex;align-items:center;gap:6px;background:var(--chip);border-radius:22px;padding:9px 14px;font-size:12px;font-weight:600;margin-right:6px}
.view{flex:1;display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;justify-content:space-around;border-top:1px solid var(--line);padding:6px 0 calc(var(--safe-b) + 6px);flex-shrink:0;background:var(--bg)}
.tabs button{width:72px;height:44px;display:grid;place-items:center;color:var(--faint)}
.tabs button .ic{width:28px;height:28px}
.tabs button.on{color:var(--primary)}

/* ---------- calendar ---------- */
.wk{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:10px;padding:2px 0 6px;flex-shrink:0}
.wk .sun{color:var(--sun)} .wk .sat{color:var(--sat)}
.swipe{flex:1;min-height:0;overflow:hidden;touch-action:pan-y}
.grid{height:100%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);will-change:transform}
.cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:3px 2px 2px;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;position:relative;cursor:pointer}
.cell:nth-child(7n){border-right:0}
.cell:active{background:var(--chip)}
.ch{display:flex;justify-content:space-between;align-items:flex-start;gap:2px;height:14px;flex-shrink:0}
.dn{font-size:10px;font-weight:500;padding:0 3px;border-radius:3px;line-height:13px}
.hol{font-size:9px;color:var(--sun);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;line-height:13px}
.sun .dn{color:var(--sun)} .sat .dn{color:var(--sat)}
.adj>*{opacity:.35}
.cell.pay{background:linear-gradient(var(--pay-band),var(--pay-band)) top/100% 19px no-repeat,var(--pay-bg)}
.hol.pl{color:var(--pay-ink);font-weight:600;font-size:8px}
.today{background:var(--today)}
.cell.today.pay{background:linear-gradient(var(--pay-band),var(--pay-band)) top/100% 19px no-repeat,var(--today)}
/* 오늘: 같은 평면의 실제 테두리 2px. 늘어난 두께만큼 안쪽 여백을 줄여 내용 위치는 그대로 */
.cell.today{border:2px solid var(--primary);padding:1px 1px 1px 0}
/* 오늘 날짜 박스: 칸의 왼쪽 위 모서리(테두리)까지 꽉 채움 */
.today .dn{background:var(--primary);color:#fff!important;margin-top:-1px;line-height:15px;padding:0 5px 2px 3px;min-width:17px;box-sizing:border-box;text-align:left;border-radius:0}   /* 글자 위치는 다른 날짜와 동일(왼쪽 5px·위 기준), 박스는 글자 둘레로 좌5·우5·상하 대칭 */
.cb{display:flex;justify-content:center;padding:6px 0 5px;flex-shrink:0;min-height:36px}
.cm{display:flex;flex-direction:column;gap:2px;min-height:0;overflow:hidden}
.tag{font-size:8px;line-height:10px;padding:0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink2)}
.cmemo{font-size:8px;line-height:10px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;padding:0 3px}
.at{font-size:8px;line-height:11px;color:var(--sun);text-align:left;padding:0 3px;font-weight:600}
.chg .cb .bdg{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--primary)}
.mmemo{flex-shrink:0;text-align:left;padding:12px 16px;font-size:12px;color:var(--ink2);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmemo.empty{color:var(--faint)}

/* ---------- badges ---------- */
.bdg{--s:24px;min-width:var(--s);height:var(--s);border-radius:calc(var(--s)/2);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;letter-spacing:-.3px;white-space:nowrap;flex-shrink:0;line-height:1}
.bdg.pill{min-width:0;padding:0 7px}
.bdg.pill.lng{padding:0 6px;font-size:10px}
.bdg.sq{border-radius:9px}
.bdg.out{color:var(--c)}
.bdg.bordered.out{box-shadow:inset 0 0 0 1.5px var(--line)}
:root[data-theme=dark] .bdg:not(.out){box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.bdg.sm{--s:24px;font-size:12px} .bdg.sm.pill{padding:0 7px} .bdg.sm.pill.lng{padding:0 6px;font-size:10px}
.bdg.xs{--s:20px;font-size:10px} .bdg.xs.pill{padding:0 5px} .bdg.xs.pill.lng{font-size:9px}
.bdg.lg{--s:28px;font-size:14px} .bdg.lg.pill{padding:0 10px} .bdg.lg.pill.lng{font-size:12px}
.bdg.sq.lg{border-radius:8px}

/* ---------- group view ---------- */
#grpSwipe{overflow-y:auto;-webkit-overflow-scrolling:touch}
#grpBody{will-change:transform}
.gw{border-bottom:6px solid var(--line)}
.gr{display:grid;grid-template-columns:54px repeat(7,minmax(0,1fr));align-items:stretch;min-height:50px;border-bottom:1px solid var(--line)}
.gr:last-child{border-bottom:0}
.gh{min-height:0;padding:8px 0 6px;font-size:10px;text-align:center;border-bottom:1px solid var(--line)}
.gh .w{display:block;margin-bottom:4px}
.gh .sun{color:var(--sun)} .gh .sat{color:var(--sat)} .gh .adj{opacity:.35}
.gn{font-size:10px;color:var(--ink2);display:grid;place-items:center;border-right:1px solid var(--line);text-align:center;padding:0 2px}
.gc{display:grid;place-items:center}
.gc.adj{opacity:.3}
.gc.mine{cursor:pointer}
.gr.me{background:var(--hi)}

/* ---------- layers (sheet / drawer / page) ---------- */
.ly{position:fixed;inset:0;z-index:50}
.scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .3s}
.ly.open .scrim{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;max-width:600px;margin:0 auto;background:var(--card);border-radius:28px 28px 0 0;max-height:92dvh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .34s var(--ease);padding-bottom:var(--safe-b);box-shadow:0 -4px 30px rgba(0,0,0,.08)}
.ly.open .sheet{transform:none}
.sheet.tall{height:92dvh}
.grab{height:22px;flex-shrink:0;display:grid;place-items:center}
.grab::before{content:"";width:40px;height:5px;border-radius:3px;background:var(--faint)}
[data-drag]{touch-action:none}
.drawer{position:absolute;top:0;bottom:0;left:0;width:min(84vw,380px);background:var(--card);transform:translateX(-102%);transition:transform .32s var(--ease);display:flex;flex-direction:column;padding:calc(var(--safe-t) + 10px) 20px calc(var(--safe-b) + 18px);touch-action:pan-y;overflow:auto}
.ly.open .drawer{transform:none}
.page{position:absolute;top:0;bottom:0;left:0;right:0;max-width:600px;margin:0 auto;background:var(--grouped);transform:translateX(100%);transition:transform .34s var(--ease);display:flex;flex-direction:column;padding-top:var(--safe-t);touch-action:pan-y}
.ly.open .page{transform:none}
.page-ly .scrim{background:rgba(0,0,0,.15)}

.shead{display:flex;align-items:center;justify-content:center;position:relative;padding:2px 20px 14px;flex-shrink:0;min-height:54px}
.shead h3{font-size:16px;font-weight:700}
.shead .x{position:absolute;right:18px;top:-4px}
.shead.left{justify-content:space-between;padding:6px 28px 6px}
.stitle{font-size:16px;font-weight:700;margin:6px 4px 18px}
.stabs{display:flex;gap:26px;padding:0 24px;flex-shrink:0;border-bottom:1px solid var(--line)}
.stabs button,.dtabs [data-t]{font-size:14px;font-weight:700;color:var(--faint);padding:8px 0 10px;position:relative}
.stabs .on,.dtabs .on{color:var(--ink)}
.stabs .on::after,.dtabs .on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:2px;background:var(--ink)}
.sbody{flex:1;overflow:auto;padding:16px 24px 28px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

/* ---------- day sheet ---------- */
.sheet.day{height:92dvh;background:var(--sheet);padding-bottom:0}
.dh{padding:2px 28px 22px;flex-shrink:0}
.dhi{will-change:transform}
.dt{font-size:18px;font-weight:700;letter-spacing:-.3px}
.dsw{display:flex;align-items:center;margin:12px -24px 10px}
.dsw .ib{color:var(--muted)}
.dsh{flex:1;display:flex;align-items:center;gap:12px;padding:0 6px;min-height:50px}
.dsh .bdg.out{background:var(--card)}
.arr{font-size:18px;color:var(--ink2)}
.dinfo{display:grid;gap:6px;font-size:12px;color:var(--ink2)}
.dinfo div{display:flex;align-items:center;gap:8px}
.dinfo .ic{width:19px;height:19px}
.dpanel{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--card);border-radius:28px 28px 0 0;padding-bottom:var(--safe-b)}
.dtabs{display:flex;gap:30px;align-items:center;padding:18px 20px 0 28px;flex-shrink:0}
.dact{margin-left:auto;display:flex;align-items:center;gap:6px;background:var(--primary-soft);color:var(--primary);border-radius:22px;padding:9px 15px;font-size:12px;font-weight:600}
.dact .ic{width:18px;height:18px}
.dbody{flex:1;overflow:auto;padding:16px 20px 30px;overscroll-behavior:contain}

.mrow{display:flex;align-items:center;gap:8px;padding:10px 6px 10px 16px;border-radius:10px;font-size:12px;margin-bottom:6px;cursor:pointer}
.mrow span{flex:1;min-width:0;word-break:break-all}
.mrow .ib{color:var(--muted)}
.addrow{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:12px;padding:12px 14px;width:100%}
.addrow .ic{width:22px;height:22px;color:var(--muted)}
.form{background:var(--chip);border-radius:16px;padding:12px;margin:6px 0 12px;display:grid;gap:10px}
.inp{width:100%;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:16px;outline:none}
.inp:focus{border-color:var(--primary)}
.sheet .sbody .inp{background:var(--chip);border-color:transparent}
.sheet .sbody .inp:focus{border-color:var(--primary)}
textarea.inp{resize:none;line-height:1.5}
.cdots{display:flex;gap:12px;padding:2px 4px}
.cdot{width:28px;height:28px;border-radius:50%;background:var(--c)}
.cdot.on{box-shadow:0 0 0 2px var(--chip),0 0 0 4px var(--c)}
.frow{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn{border-radius:12px;padding:11px 18px;font-size:12px;font-weight:600}
.btn.primary{background:var(--primary);color:#fff}
.btn.ghost{background:transparent;color:var(--ink2)}
.btn.big{width:100%;padding:15px;font-size:12px;border-radius:14px}
.danger{color:var(--sun)!important}
.sec{display:flex;align-items:center;gap:10px;margin:6px 0 14px}
.sec b{font-size:14px}
.sec .sub{color:var(--ink2);font-size:12px;padding-left:10px;border-left:1px solid var(--line)}
.sec.gap{margin-top:28px}
.lnk{margin-left:auto;display:flex;align-items:center;gap:2px;color:var(--ink2);font-size:12px}
.lnk .ic{width:16px;height:16px}
.lnk.revert{margin:0 0 6px;color:var(--primary);font-weight:600}
.hscroll{display:flex;gap:10px;overflow-x:auto;padding:4px 4px 14px;scrollbar-width:none;touch-action:pan-x}
.hscroll::-webkit-scrollbar{display:none}
.pick{flex-shrink:0;border-radius:999px;padding:3px;transition:box-shadow .15s}
.pick.on{box-shadow:0 0 0 2.5px var(--primary)}
hr{border:0;border-top:1px solid var(--line);margin:14px 0 18px}
hr.thick{border-top-width:2px;margin:22px 0}
.wrap{display:flex;flex-wrap:wrap;gap:10px}
.ach{border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px;color:var(--muted)}
.ach.on{border-color:var(--sun);color:var(--sun);font-weight:600}
.prow{display:flex;align-items:center;gap:10px;padding:10px 0 10px 14px;border-bottom:1px solid var(--line);font-size:12px}
.prow span:first-child{flex:1}

/* ---------- editor ---------- */
.trow{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer}
.tdot{width:22px;height:22px;border-radius:50%;background:var(--c);flex-shrink:0;display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--c)}
.tdot.a{background:none;box-shadow:inset 0 0 0 1px var(--line)}
.tinfo{margin-left:auto;text-align:right;color:var(--muted);font-size:11px;line-height:1.55;padding-right:14px;border-right:1px solid var(--line)}
.trow .ib{color:var(--muted)}
.grow{padding:14px 0;border-bottom:1px solid var(--line);cursor:pointer}
.gtop{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.gtop b{font-size:13px}
.me-tag{background:var(--primary);color:#fff;font-size:11.5px;font-weight:700;border-radius:10px;padding:2px 8px}
.gtop .sub{color:var(--muted);font-size:13.5px;margin-left:auto}
.gpat{display:flex;flex-wrap:wrap;gap:4px}
.fg{display:grid;gap:16px;padding-bottom:40px}
.f{display:grid;gap:8px}
.f>span{font-size:14px;color:var(--ink2);font-weight:600}
.f small{font-weight:400;color:var(--muted);margin-left:6px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tprev{display:flex;justify-content:center;padding:6px 0 2px;min-height:56px;align-items:center}
.seg{display:flex;gap:8px;flex-shrink:0}
.seg button{background:var(--chip);color:var(--muted);border-radius:24px;padding:10px 0;width:74px;font-size:12px;font-weight:500;transition:background .15s,color .15s}
.seg button.on{background:var(--primary);color:#fff;font-weight:600}
.fg .seg button{width:auto;flex:1}
.fg .seg{width:100%}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swc{width:34px;height:34px;border-radius:50%;background:var(--c);position:relative;overflow:hidden}
.swc.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--c)}
.swc.custom{background:conic-gradient(#f44,#fd4,#4d4,#4df,#44f,#f4f,#f44)}
.swc input{position:absolute;inset:-10px;opacity:0;width:60px;height:60px;cursor:pointer}
.palette{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.palette button{border-radius:999px}
.palette .bk{background:var(--chip);border-radius:14px;padding:4px 12px;font-size:12px;height:28px}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.presets button{background:var(--chip);border-radius:16px;padding:7px 12px;font-size:13.5px;color:var(--ink2)}
.pv{display:flex;gap:4px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.pv div{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--muted);min-width:34px}
.pv .bad{color:var(--sun);font-size:14px}
.qgrid{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.qgrid button{border-radius:999px;padding:3px}
.qgrid .on{box-shadow:0 0 0 2.5px var(--primary)}
.arow{display:block;width:100%;text-align:left;font-size:12px;padding:16px 4px;border-bottom:1px solid var(--line)}
.arow:last-child{border:0}

/* ---------- share ---------- */
.srow{display:flex;gap:18px;align-items:center;width:100%;text-align:left;padding:20px 4px;border-bottom:1px solid var(--line)}
.srow:last-child{border:0}
.srow .ic{width:30px;height:30px;color:var(--ink2)}
.srow b{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.srow small{display:block;color:var(--muted);font-size:14.5px;margin-top:4px;line-height:1.4}
.pill-blue{background:var(--primary);color:#fff;font-style:normal;font-size:12px;border-radius:10px;padding:2px 8px;font-weight:700}

/* ---------- stats ---------- */
.htitle{font-size:22px;font-weight:800;letter-spacing:-.5px}
.slabel{font-size:12px;color:var(--ink2);margin:18px 0 14px}
.counts{display:flex;flex-wrap:wrap;gap:12px 18px}
.cnt{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500}
.kv{display:flex;justify-content:space-between;font-size:12px;padding:13px 0;color:var(--ink2)}
.kv.total{font-weight:800;color:var(--ink);font-size:14px;border-bottom:2px solid var(--line);padding-bottom:20px}
.dtl{margin-top:10px;font-size:12px;color:var(--ink2)}
.dtl div{display:grid;grid-template-columns:1fr 50px 70px 100px;gap:6px;padding:8px 0;border-bottom:1px solid var(--line);align-items:center}
.dtl div span:not(:first-child){text-align:right}
.mlist .mi{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:flex-start;cursor:pointer}
.mi .md{width:56px;flex-shrink:0;font-size:11px;color:var(--ink2);padding-top:4px}
.mi .mx{flex:1;font-size:12px;display:grid;gap:3px;padding-top:3px}
.empty-note{color:var(--muted);text-align:center;padding:40px 0;font-size:12px}

/* ---------- settings ---------- */
.phead{display:flex;align-items:center;justify-content:center;position:relative;height:64px;flex-shrink:0}
.phead h2{font-size:16px;font-weight:700}
.phead .circ{position:absolute;left:16px;width:48px;height:48px}
.pbody{flex:1;overflow:auto;padding:10px 18px calc(var(--safe-b) + 30px);overscroll-behavior:contain}
.card{background:var(--card);border-radius:18px;padding:0 20px;margin-bottom:18px}
.row{display:flex;align-items:center;justify-content:space-between;min-height:66px;border-bottom:1px solid var(--line);position:relative;font-size:12px;gap:12px;cursor:pointer}
.row:last-child{border:0}
.row select{position:absolute;inset:0;opacity:0;font-size:16px;width:100%;cursor:pointer}
.row .val{color:var(--ink2)}
.row .ic{color:var(--faint)}
.row .lbl{display:flex;align-items:center;gap:8px}
.moon{color:#F9D648;display:flex}
.moon .ic{fill:#F9D648;stroke:#F9D648;width:26px;height:26px}
.rin{text-align:right;border:0;background:none;font-size:16px;color:var(--ink2);flex:1;min-width:0;outline:none}
.cap{display:flex;gap:6px;align-items:center;font-size:14.5px;color:var(--ink2);margin:22px 4px 10px;font-weight:600}
.cap .ic{width:18px;height:18px}
.foot{font-size:13px;color:var(--muted);line-height:1.5;padding:4px 6px 20px}

/* ---------- drawer ---------- */
.dtop{display:flex;justify-content:flex-end;margin-bottom:8px}
.dtop .ic{width:28px;height:28px}
.prof{display:flex;gap:16px;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--line)}
.av{width:72px;height:72px;border-radius:50%;background:#24283A;display:grid;place-items:center;flex-shrink:0}
.av svg{width:40px;height:40px}
.prof b{font-size:18px;display:block}
.prof small{font-size:12px;color:var(--muted)}
.dsec{padding:20px 0;border-bottom:1px solid var(--line)}
.dl{display:flex;gap:8px;align-items:center;color:var(--ink2);font-size:16px;font-weight:700;margin-bottom:10px}
.dl .ic{width:20px;height:20px}
.dbig{font-size:14px;font-weight:700;line-height:1.5;padding-left:28px}
.dlinks{display:grid;padding-left:20px}
.dlinks button{text-align:left;padding:11px 8px;font-size:14px;border-radius:10px}
.dlinks button:active{background:var(--chip)}
.dfill{flex:1}
.dfoot{font-size:14px;padding:16px 4px;border-top:1px solid var(--line)}
.dfoot a{color:var(--primary);cursor:pointer}

.toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 90px);transform:translateX(-50%);background:rgba(30,30,30,.92);color:#fff;padding:11px 18px;border-radius:22px;font-size:15px;z-index:99;animation:tin .25s var(--ease);white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
@keyframes tin{from{opacity:0;transform:translate(-50%,10px)}}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---------- 근무 타입: 팝업 / 메뉴 / 색상 / 근무 정보 ---------- */
.bdg.xl{--s:44px;font-size:16px} .bdg.xl.pill{padding:0 14px} .bdg.xl.pill.lng{font-size:14px}
.trow.hid{opacity:.4}
.dlg-ly{display:grid;place-items:center}
.dlg{position:relative;width:min(86vw,340px);background:var(--card);border-radius:22px;overflow:hidden;opacity:0;transform:scale(.94);transition:transform .22s var(--ease),opacity .22s}
.ly.open .dlg{opacity:1;transform:none}
.dg-body{padding:24px 22px 18px;display:grid;gap:14px}
.dg-t{font-size:12px;color:var(--ink2)}
.dg-body .inp{background:var(--chip);border-color:transparent}
.dg-foot{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.dg-foot button{padding:16px 0;font-size:14px;font-weight:600;color:var(--primary)}
.dg-foot button+button{border-left:1px solid var(--line)}
.dg-foot .dis{opacity:.4;pointer-events:none}
.pop-ly{z-index:60}
.pop{position:absolute;width:210px;background:var(--card);border-radius:22px;padding:10px 6px;box-shadow:0 8px 40px rgba(0,0,0,.2);animation:pin .18s var(--ease);transform-origin:top right}
.pop button{display:block;width:100%;text-align:left;padding:13px 16px;font-size:13px;border-radius:12px}
.pop button:active{background:var(--chip)}
.psep{height:1px;background:var(--line);margin:6px 12px}
@keyframes pin{from{opacity:0;transform:scale(.9)}}
.ctl{text-align:center;color:var(--muted);font-size:12px;margin:8px 0 18px}
.cgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px 0;justify-items:center;margin-bottom:18px}
.cp{border-radius:50%;padding:3px}
.cp.on{box-shadow:0 0 0 2.5px var(--primary)}
.cp .bdg{--s:44px;font-size:15px}
.cclose{display:block;width:100%;padding:18px 0 20px;font-size:14px;font-weight:600;color:var(--primary);border-top:1px solid var(--line)}
.crow{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--ink2);padding:6px 4px;cursor:pointer}
.crow .swc{width:30px;height:30px}
.pbody.info{padding:0 0 calc(var(--safe-b) + 30px)}
.phead .ok{left:auto;right:16px;background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tpv{display:grid;place-items:center;background:var(--chip);padding:26px 0;margin-bottom:0;cursor:pointer}
.isec{background:var(--card);padding:0 18px 6px;margin-bottom:12px}
.ish{color:var(--primary);font-size:12px;padding:18px 0 4px}
.irow{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink2);cursor:pointer}
.irow:last-child{border-bottom:0}
.iv{color:var(--ink);text-align:right}
.iv.m{color:var(--muted)}
.irow.sub{padding-left:12px;cursor:default}
.irow.sub .ib{margin-right:-8px}
.irow.add{justify-content:flex-start;color:var(--muted);gap:10px}
.irow.add .ic{width:22px;height:22px;color:var(--muted)}
.irow.total{border-top:3px solid var(--ink);border-bottom:0;margin-top:8px;cursor:default}

/* 근무 타입 선택 페이지: 글씨 +1px */
.wkt .sec b{font-size:15px}
.wkt .sec .sub,.wkt .lnk,.wkt .ach{font-size:13px}
.wkt .bdg.lg{font-size:15px} .wkt .bdg.lg.pill.lng{font-size:13px}
.lv{margin-top:18px;display:grid;gap:10px;font-size:13px;color:var(--ink2)}
.lvi{display:flex;align-items:center;gap:8px}
.lvi em{font-style:normal;font-size:20px;color:var(--sun)}
.lvi .inp{width:110px;font-size:16px;border-radius:999px;padding:9px 16px}
.lvc{display:flex;gap:8px}
.lvc button{background:var(--chip);border-radius:999px;padding:6px 12px;font-size:13px}
.bk-date{font-size:20px;font-weight:700}

/* 설정 팝업 */
.set-dlg{width:min(92vw,440px);max-height:86dvh;display:flex;flex-direction:column;background:var(--grouped)}
.set-dlg .phead{height:60px}
.set-dlg .phead .xr{left:auto;right:12px;width:40px;height:40px}
.set-dlg .pbody{padding:4px 14px 18px}

/* 당겨서 새로고침 */
#app{will-change:transform}
.ptr{position:fixed;left:50%;top:var(--safe-t);width:36px;height:36px;margin-left:-18px;border-radius:50%;background:var(--card);box-shadow:0 2px 10px rgba(0,0,0,.18);display:grid;place-items:center;opacity:0;pointer-events:none;color:var(--primary);z-index:1}
.ptr .ic{width:20px;height:20px}
.ptr.spin .ic{animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}

/* 그룹 선택 시트 (회사명 눌렀을 때) */
.gs{padding:0 0 calc(var(--safe-b) + 16px)}
.gs-h{color:var(--primary);font-size:12px;padding:14px 22px 6px}
.gs-h small{color:var(--muted);font-size:11px}
.gs-row{display:flex;align-items:center;gap:12px;padding:6px 14px 6px 22px;min-height:54px;cursor:pointer}
.gs-row b{font-size:14px;font-weight:500;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-row em{font-style:normal;font-size:13px;color:var(--faint)}
.gs-row .ib{margin-left:auto;color:var(--muted)}
.gs-gap{height:8px;background:var(--grouped);margin:6px 0}
.rad{width:22px;height:22px;border-radius:50%;border:2px solid var(--faint);flex-shrink:0;position:relative}
.rad.on{border-color:var(--primary)}
.rad.on::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--primary)}
.sq{width:14px;height:14px;border-radius:3px;flex-shrink:0}
.crow input[type=checkbox]{width:20px;height:20px;accent-color:var(--primary)}
.gs .addrow{padding-left:22px}
.gs .foot{padding:4px 22px 0}

/* ---------- 내 계정 / 로그인 / 백업 관리 (전체 화면 팝업) ---------- */
.dlg.full-dlg{width:100%;max-width:600px;height:100dvh;border-radius:0;background:var(--bg);display:flex;flex-direction:column;padding-top:var(--safe-t);overflow:hidden}
.full-dlg.login{background:var(--grouped)}
.ac-hd{display:flex;align-items:center;justify-content:center;position:relative;height:64px;flex-shrink:0}
.ac-hd h2{font-size:16px;font-weight:700}
.ac-hd .circ{position:absolute;left:14px;width:44px;height:44px}
.full-dlg.login .ac-hd{display:none}
.ac-body{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:0 24px calc(var(--safe-b) + 24px)}
.ac-c{margin:auto 0;display:flex;flex-direction:column;align-items:center;width:100%;padding:12px 0 36px}
.ac-name{display:flex;align-items:center;gap:6px}
.ac-name b{font-size:22px;font-weight:800;letter-spacing:-.3px}
.ac-name .ib{color:var(--muted)}
.ac-sub{font-size:12px;color:var(--primary);margin-top:8px}
.ac-mail{font-size:14px;margin-top:6px}
.ac-line{width:min(300px,76vw);height:1px;background:var(--line);margin:18px 0 26px}
.ac-lab{font-size:12px;color:var(--ink2);margin-top:18px}
.ac-co{font-size:20px;font-weight:800;margin-top:4px}
.ac-date{font-size:26px;font-weight:800;margin-top:4px;letter-spacing:-.5px}
.ac-bk{font-size:12px;color:var(--primary);margin:10px 0 36px}
.ac-cloud{width:64px;height:48px;margin-bottom:26px}
.ac-tabs{align-self:stretch;border-bottom:0;padding:6px 0 0}
.ac-foot{align-self:flex-end;font-size:11px;color:var(--faint);padding-top:8px}
.pbtn{width:min(300px,76vw);height:48px;border-radius:999px;background:var(--primary);color:#fff;font-size:15px;font-weight:500;margin-top:18px}
.pbtn.out{background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1.5px var(--faint)}
.pbtn.soft{background:var(--primary-soft);color:var(--primary)}
.pbtn.red{background:#E0606F}
.plink{font-size:13px;color:var(--ink2);padding:12px;margin-top:6px}
.dg-c{text-align:center;font-size:14px;line-height:1.6;padding:6px 0 4px}
.dg-foot .danger{color:var(--sun)}
.gs-line{height:1px;background:var(--line);margin:6px 22px 8px}
.loginb{color:var(--primary)}
.prog{position:fixed;inset:0;z-index:90;background:var(--grouped);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px}
.prog h2{font-size:24px;font-weight:800}
.prog p{font-size:14px;font-weight:700;color:var(--sun);line-height:1.5}
.pg-l{font-size:12px;color:var(--ink2);margin-top:22px}
.pg-b{width:min(260px,70vw);height:12px;border-radius:6px;background:var(--primary-soft);overflow:hidden}
.pg-b i{display:block;height:100%;width:0;background:var(--primary);border-radius:6px;transition:width .4s var(--ease)}
.prog b{font-size:18px;margin-top:22px}
/* 로그인 */
.ac-lback{align-self:flex-start;margin:calc(var(--safe-t) + 4px) 0 0 -10px;flex-shrink:0}
.lg-sl{display:flex;width:calc(100% + 48px);margin:30px -24px 0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;flex-shrink:0}
.lg-sl::-webkit-scrollbar{display:none}
.lg-s{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;padding:20px 24px 4px;text-align:center}
.lg-i .ic,.lg-i svg{width:64px;height:64px}
.lg-s h3{font-size:24px;font-weight:800;margin-top:20px}
.lg-s p{font-size:14px;color:var(--muted);line-height:1.5;margin-top:8px}
.lg-dots{display:flex;gap:12px;margin:22px 0 40px}
.lg-dots i{width:12px;height:12px;border-radius:50%;background:var(--faint);opacity:.5}
.lg-dots i.on{background:var(--ink);opacity:1}
.lg-t{font-size:14px;font-weight:700;margin-bottom:16px}
.sbtn{width:min(276px,70vw);height:46px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;margin-bottom:12px}
.sbtn.apple{background:#000;color:#fff}
.sbtn.kakao{background:#F6E34B;color:#191919;height:48px}
.sbtn.google{background:#fff;color:#3C3C43;height:48px;box-shadow:0 0 0 1px var(--line)}
.sb-w{position:relative}
.recent{position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);background:var(--primary);color:#fff;font-size:10px;padding:5px 7px;border-radius:6px;white-space:nowrap}
.recent::after{content:"";position:absolute;left:100%;top:50%;margin-top:-5px;border:5px solid transparent;border-left-color:var(--primary)}
.agree{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;margin-top:22px;align-self:center;width:min(250px,64vw)}
.agree input{width:22px;height:22px;accent-color:var(--primary);flex-shrink:0}
.agree u{text-underline-offset:2px}
/* 근무표 보내기 시트 */
.snd{padding:8px 24px calc(var(--safe-b) + 28px)}
.snd h3{font-size:17px;font-weight:700;padding:6px 0 18px}
.snd-r{display:flex;align-items:center;justify-content:space-between;font-size:14px;padding:0 4px 14px;border-bottom:1px solid var(--line)}
.mini{background:var(--primary);color:#fff;border-radius:999px;padding:8px 18px;font-size:13px;font-weight:500}
.snd-m{text-align:center;color:var(--muted);font-size:13px;font-weight:600;padding:20px 0 14px}
.snd-a{display:flex;align-items:stretch;justify-content:space-around;padding-bottom:12px;border-bottom:1px solid var(--line)}
.snd-a button{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;color:var(--muted);flex:1;padding:6px 0}
.snd-a button .ic{width:30px;height:30px;color:var(--muted)}
.snd-a.off button:not(.act){opacity:.45;pointer-events:none}
.snd-a .act,.snd-a .act .ic{color:var(--primary)}
.snd-a i{width:1px;background:var(--line);margin:4px 0}
.snd-t{display:flex;align-items:center;justify-content:space-between;padding:18px 4px 0}
.snd-t b{font-size:16px;font-weight:500;display:block}
.snd-t small{font-size:12px;color:var(--ink2)}
.sw{width:56px;height:32px;border-radius:16px;background:var(--chip);box-shadow:inset 0 0 0 1.5px var(--faint);position:relative;transition:background .2s;flex-shrink:0}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.sw.on{background:var(--primary);box-shadow:none}
.sw.on::after{transform:translateX(24px)}
/* 자동 백업 알림 */
.bkbn{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-b) + 84px);z-index:70;background:rgba(30,30,30,.94);color:#fff;border-radius:24px;padding:8px 8px 8px 18px;display:flex;align-items:center;gap:10px;font-size:13px;animation:tin .25s var(--ease)}
.bkbn button{font-size:13px;color:#fff;padding:7px 12px;border-radius:16px}
.bkbn button[data-y]{background:var(--primary)}