/* 뉴욕 아틀라스와 같은 계보 — 따뜻한 종이색 바탕, 테라코타 강조, 둥근 카드 띠. */
:root{--accent:#9c4221;--accent-soft:#f4e6de;--bg:#f7f4ef;--card:#fffdfa;
--ink:#1c1a17;--line:#e2dbd0;--teal:#1f5f5b;--teal-soft:#dfeceb;
--warn:#8a5a00;--warn-soft:#fbf0d8;--mute:#8b8175;--kid:#5b3a91;--kid-soft:#ece5f7;
--ok:#2f6b3f;--ok-soft:#e2efe4}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.7;
font-family:-apple-system,"Apple SD Gothic Neo",system-ui,sans-serif}
.wrap{max-width:1280px;margin:0 auto;padding:20px 16px 70px}
h1{font-size:22px;margin:0 0 2px;letter-spacing:-.4px}
.sub{color:var(--mute);font-size:13px;margin:0 0 16px}
a{color:var(--accent)}

/* ── 띠와 카드 ───────────────────────────────────────────── */
.band{background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:12px 14px;margin-bottom:11px}
.band h3{font-size:12px;color:var(--mute);margin:0 0 9px;font-weight:600;letter-spacing:.4px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;
overflow:hidden;margin-bottom:11px}
.phead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
padding:11px 14px;border-bottom:1px solid var(--line)}
.phead b{font-size:13.5px}
.phead span{font-size:12px;color:var(--mute);text-align:right}
.pbody{padding:12px 14px}
.pnote{margin:0;padding:10px 14px;font-size:11.5px;color:var(--mute);border-top:1px solid var(--line)}

/* ── 위쪽 탭 ─────────────────────────────────────────────── */
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.tab{background:var(--card);border:1px solid var(--line);border-radius:11px;
padding:7px 13px;font-size:13px;font-family:inherit;color:var(--ink);cursor:pointer;
display:flex;align-items:center;gap:6px}
.tab:hover{border-color:var(--accent)}
.tab.on{background:var(--accent-soft);border-color:var(--accent);font-weight:650}
.tab i{font-style:normal;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.tab.on i{color:var(--accent)}

/* ── 챙길 것 ─────────────────────────────────────────────── */
.todos{display:flex;flex-wrap:wrap;gap:7px}
.todo{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
border-radius:9px;padding:6px 10px;font-size:12.5px;text-align:left}
.todo .dot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:none}
.todo.urgent .dot{background:var(--accent)}
.todo u{text-decoration:none;color:var(--warn);font-weight:650;font-size:11.5px}
.todo.urgent u{color:var(--accent)}
.todo s{text-decoration:none;color:var(--mute);font-size:11px}
.todo.clear{color:var(--mute)}
.todo.clear .dot{background:var(--ok)}

/* ── 주일 스트립 ─────────────────────────────────────────── */
.days{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.day{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 3px 7px;
cursor:pointer;font-family:inherit;color:var(--ink);display:flex;flex-direction:column;
align-items:center;gap:1px;border-bottom-width:3px;min-width:0}
.day b{font-size:15px;letter-spacing:-.4px}
.day i{font-style:normal;font-size:10.5px;color:var(--mute)}
.day em{font-style:normal;font-size:10px;color:var(--mute);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis;max-width:100%}
.day.on{background:var(--accent-soft);border-color:var(--accent)}
.day:hover{border-color:var(--accent)}
.day.camp{border-bottom-color:var(--kid)}
.day.low{border-bottom-color:var(--accent)}

/* ── 두 칸 본문 ──────────────────────────────────────────── */
.two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:start}
@media(max-width:900px){.two{grid-template-columns:1fr}.days{grid-template-columns:repeat(6,1fr)}}

/* ── 출석 ────────────────────────────────────────────────── */
.classhead{display:flex;align-items:center;gap:7px;padding:10px 4px 4px;font-size:12px;
font-weight:700;color:var(--mute);letter-spacing:.4px}
.classhead span{font-size:12px;color:var(--accent);font-weight:650}
.classhead::after{content:"";flex:1;height:1px;background:var(--line)}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.chip{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 9px;
font-family:inherit;font-size:12.5px;color:var(--ink);cursor:pointer;text-align:left;
display:flex;justify-content:space-between;align-items:center;gap:5px;border-left-width:3px}
.chip u{text-decoration:none;font-size:10.5px;color:var(--mute)}
.chip.출석{border-left-color:var(--ok);background:var(--ok-soft)}
.chip.출석 u{color:var(--ok)}
.chip.지각{border-left-color:var(--warn);background:var(--warn-soft)}
.chip.지각 u{color:var(--warn)}
.chip.온라인{border-left-color:var(--teal);background:var(--teal-soft)}
.chip.온라인 u{color:var(--teal)}
.chip.결석{border-left-color:var(--accent);background:#fdf1ec}
.chip.결석 u{color:var(--accent)}
.chip.미정{border-left-color:var(--line)}

/* ── 표 ──────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{font-size:11.5px;color:var(--mute);font-weight:600;text-align:left;padding:8px 14px;
border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
.num-c{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.warn-t{color:var(--accent);font-weight:650}
.mute-t{color:var(--mute)}

/* ── 출석 도트 ───────────────────────────────────────────── */
.dots{display:flex;gap:3px}
.dt{width:11px;height:11px;border-radius:3px;background:#efe9e0;flex:none}
.dt.출석{background:var(--ok)}.dt.지각{background:var(--warn)}
.dt.온라인{background:var(--teal)}.dt.결석{background:#e9c4b6}

/* ── 뱃지·막대 ───────────────────────────────────────────── */
.badge{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:20px;font-weight:600}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.teal{background:var(--teal-soft);color:var(--teal)}
.badge.acc{background:var(--accent-soft);color:var(--accent)}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.mute{background:#f0ece5;color:var(--mute)}
.bar{height:7px;border-radius:20px;background:#efe9e0;overflow:hidden;margin-top:5px}
.bar>i{display:block;height:100%;background:var(--teal);border-radius:20px}
.bar.hot>i{background:var(--warn)}.bar.over>i{background:var(--accent)}

/* ── 통계 상자 ───────────────────────────────────────────── */
.tots{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:11px}
.tot{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 15px;
display:flex;flex-direction:column;gap:1px}
.tot span{font-size:12px;color:var(--mute)}
.tot b{font-size:25px;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.tot i{font-style:normal;font-size:11.5px;color:var(--mute)}
.tot.pick{border-color:var(--teal);background:var(--teal-soft)}.tot.pick b{color:var(--teal)}
.tot.ex{border-color:var(--accent);background:var(--accent-soft)}.tot.ex b{color:var(--accent)}

/* ── 설교·회의 카드 ──────────────────────────────────────── */
.rec{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:9px}
.rec h4{margin:0 0 2px;font-size:14.5px;letter-spacing:-.2px}
.rec .meta{font-size:11.5px;color:var(--mute);margin:0 0 6px}
.rec p{margin:0;font-size:12.5px;color:var(--mute)}
.rec ul{margin:6px 0 0;padding-left:17px;font-size:12.5px;color:var(--mute)}
.tagrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;align-items:start}

/* ── 할 일 ───────────────────────────────────────────────── */
.task{display:grid;grid-template-columns:16px 1fr auto;gap:9px;align-items:start;
padding:7px 4px;border-bottom:1px solid var(--line);font-size:12.5px}
.task:last-child{border-bottom:none}
.task .box{width:15px;height:15px;border:1.6px solid var(--mute);border-radius:4px;margin-top:4px}
.task.done .box{background:var(--ok);border-color:var(--ok)}
.task.done>div{color:var(--mute);text-decoration:line-through}
.task.late .box{border-color:var(--accent)}
.task .due{font-size:11.5px;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.task.late .due{color:var(--accent);font-weight:650}

/* ── 달력 띠 ─────────────────────────────────────────────── */
.cal{display:grid;grid-template-columns:74px 1fr;gap:0}
.cal .m{font-size:12px;color:var(--mute);padding:9px 6px;border-bottom:1px solid var(--line);font-weight:650}
.cal .e{padding:9px 6px;border-bottom:1px solid var(--line);font-size:12.5px}
.cal .e small{display:block;color:var(--mute);font-size:11.5px}
.foot{color:var(--mute);font-size:11.5px;margin-top:18px;white-space:pre-line}
.demo{background:var(--warn-soft);border:1px solid #e8d5a8;color:var(--warn);
border-radius:11px;padding:9px 13px;font-size:12.5px;margin-bottom:12px}

/* ── 클라우드 판에서만 쓰는 것들 ─────────────────────────────── */
#authbar{display:flex;align-items:center;gap:8px;justify-content:flex-end;
margin:-30px 0 12px;font-size:12.5px;flex-wrap:wrap}
#authbar .who{color:var(--mute)}
.mini{border:1px solid var(--line);background:#fff;color:var(--ink);font-family:inherit;
font-size:11.5px;padding:3px 9px;border-radius:8px;cursor:pointer;margin-left:6px}
.mini:hover{border-color:var(--accent);color:var(--accent)}
.subhead{font-size:11.5px;color:var(--mute);font-weight:600;margin-bottom:4px}

/* 로그인 */
.lp{display:flex;flex-direction:column;gap:8px}
.lp input{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:14px;
font-family:inherit;background:#fff;color:var(--ink)}
.lp input:focus{outline:none;border-color:var(--accent)}
.lp .go{background:var(--accent);color:#fffdfa;border:0;border-radius:9px;padding:10px;
font-size:14px;font-weight:650;font-family:inherit;cursor:pointer}
.lp .ghost{background:none;border:0;color:var(--mute);font-size:12.5px;font-family:inherit;
cursor:pointer;padding:2px}
.msg{margin:9px 0 0;font-size:12.5px;color:var(--mute);min-height:18px}
.msg.bad{color:var(--accent)}

/* 고치는 창 */
#modal{position:fixed;inset:0;background:rgba(28,26,23,.42);display:flex;
align-items:center;justify-content:center;padding:16px;z-index:50}
#modal .sheet{background:var(--card);border-radius:16px;border:1px solid var(--line);
padding:18px 20px;width:min(520px,100%);max-height:88vh;overflow-y:auto}
#modal h3{margin:0 0 12px;font-size:16px;letter-spacing:-.3px}
.fld{display:block;margin-bottom:10px}
.fld>span{display:block;font-size:11.5px;color:var(--mute);font-weight:600;margin-bottom:3px}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line);border-radius:9px;
padding:8px 10px;font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink)}
.fld textarea{resize:vertical;line-height:1.6}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent)}
.checks{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:12.5px;padding:3px 0}
.checks label{display:flex;align-items:center;gap:4px}
.setwrap{display:grid;gap:6px;margin-bottom:8px}
.setrow{display:grid;grid-template-columns:1fr 110px 56px auto;gap:5px;align-items:center}
.setrow select,.setrow input{border:1px solid var(--line);border-radius:8px;padding:6px 8px;
font-size:12.5px;font-family:inherit;background:#fff;color:var(--ink);min-width:0}
.btns{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.btns .go{background:var(--accent);color:#fffdfa;border:0;border-radius:9px;padding:9px 18px;
font-size:13.5px;font-weight:650;font-family:inherit;cursor:pointer}
.btns .go:disabled{opacity:.5}
.btns .ghost{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 15px;
font-size:13.5px;font-family:inherit;cursor:pointer;color:var(--mute)}

/* 저장됐다는 한 줄 */
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);
color:#fffdfa;font-size:13px;padding:9px 16px;border-radius:20px;opacity:0;
transition:.18s;pointer-events:none;z-index:60;max-width:90vw}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast.bad{background:var(--accent)}

/* 구글로 들어가기 */
.gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px;
font-size:14px;font-weight:600;font-family:inherit;color:var(--ink);cursor:pointer}
.gbtn:hover{border-color:var(--accent)}
.alt{margin-top:12px}
.alt summary{font-size:12px;color:var(--mute);cursor:pointer;list-style:none}
.alt summary::-webkit-details-marker{display:none}
.alt summary::before{content:"▸ ";font-size:10px}
.alt[open] summary::before{content:"▾ "}
.alt .lp{margin-top:9px}

/* ── 지우기 ──────────────────────────────────────────────────── */
.mini.danger{border-color:#e8cfc4;color:var(--accent)}
.mini.danger:hover{background:#fdf1ec}
.btns .sp{flex:1}
.btns .danger{background:#fff;border:1px solid #e8cfc4;color:var(--accent);border-radius:9px;
padding:9px 15px;font-size:13.5px;font-family:inherit;cursor:pointer;font-weight:600}
.btns .danger:hover{background:#fdf1ec;border-color:var(--accent)}
.btns .danger.yes{background:var(--accent);border-color:var(--accent);color:#fffdfa}
.btns .danger:disabled{opacity:.5}
.delbox{margin-top:12px;border:1px solid #e8cfc4;background:#fdf1ec;border-radius:11px;padding:11px 13px}
.delbox b{font-size:13px;color:var(--accent)}
.delbox p{margin:4px 0 0;font-size:12.5px;color:var(--ink);white-space:pre-line}
.delbox .btns{margin-top:10px}
/* 할 일 줄이 넉 칸이 되었다 — 체크 · 글 · 기한 · 고치기 */
.task{grid-template-columns:16px 1fr auto auto}