/* ═══════════════════════════════════════════════════ 설정값 — 색·크기는 여기서만 바꾼다 ═══════════════════════════════════════════════════ */ :root{ --ink:#0f1115; --ink-2:#6b7280; --ink-3:#a1a6b0; --line:#efeff1; --line-2:#dcdde1; --bg:#ffffff; --fill:#f6f7f8; --brand:#2f4b8f; --accent:#e0533d; --answer:#2e9e6b; --ring:linear-gradient(135deg,#f5a04a,#e0533d 45%,#8c4bd8); --clamp:2; --maxw:560px; /* 태블릿·PC 에서 본문 최대 폭 */ /* ── 규격 ── 버튼 높이·모서리·글자 크기를 여기서만 정한다. 제각각이던 값들을 세 단계로 묶었다 — 큰 것 / 보통 / 작은 것. */ --h-lg:50px; --h-md:40px; --h-sm:32px; --r:14px; --r-md:11px; --r-sm:9px; --r-pill:999px; --r-lg:18px; /* 크게 떠 있는 판 — 머리 카드 · 아래에서 올라오는 창 */ --fs-lg:15.5px; --fs-md:14px; --fs-sm:13px; /* ── 간격 ── 4의 배수로 리듬을 맞춘다 */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:28px; --pad:16px; /* 화면 좌우 여백 */ --feed-bg:#f3f4f6; --card:#ffffff; /* 기도카드 목록 바탕 · 카드 */ } /* ── 다크 모드 ── 화면 모드는 시스템(기본) · 라이트 · 다크 세 가지. 가 붙으면 시스템 설정을 무시한다. 깜빡임을 막으려고 인라인 스크립트가 렌더링 전에 먼저 붙인다. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ink:#f2f3f5; --ink-2:#9ba1ac; --ink-3:#6e747f; --line:#22252b; --line-2:#333740; --bg:#000000; --fill:#16181d; --brand:#7d9ae0; --accent:#ff6b52; --answer:#43c189; --feed-bg:#000000; --card:#16181d; } } :root[data-theme="dark"]{ --ink:#f2f3f5; --ink-2:#9ba1ac; --ink-3:#6e747f; --line:#22252b; --line-2:#333740; --bg:#000000; --fill:#16181d; --brand:#7d9ae0; --accent:#ff6b52; --answer:#43c189; --feed-bg:#000000; --card:#16181d; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--ink); font-family:Pretendard,'Noto Sans KR',-apple-system,system-ui,sans-serif; -webkit-font-smoothing:antialiased;letter-spacing:-.015em; overscroll-behavior-y:none} button,input,textarea,select{font-family:inherit;color:inherit;letter-spacing:inherit} button{border:0;background:none;padding:0;cursor:pointer} /* 누를 수 있는 것은 어디서나 같은 규격을 따른다. 크기가 제각각이면 어르신이 「눌러도 되는 것」을 알아보기 어렵다. */ .btn,.btn-sm,.tg,.today,.pedit,.sp-btns button{ display:inline-flex;align-items:center;justify-content:center;gap:6px; font-weight:600;letter-spacing:-.02em;white-space:nowrap; transition:opacity .12s ease,background .12s ease,border-color .12s ease} .btn:active,.btn-sm:active,.tg:active,.today:active,.pedit:active{opacity:.7} a{color:inherit;text-decoration:none} [hidden]{display:none !important} /* 모든 아이콘은 구글 머티리얼 심볼 (교회 로고 제외) */ .ms{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal; font-size:25px;line-height:1;display:inline-block;white-space:nowrap;direction:ltr; -webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased; font-variation-settings:'opsz' 24,'wght' 300;user-select:none} .ms.fill{font-variation-settings:'opsz' 24,'wght' 400,'FILL' 1} #app{max-width:var(--maxw);margin:0 auto;min-height:100%; display:flex;flex-direction:column;background:var(--bg)} @media (min-width:600px){ body{background:var(--fill)} #app{box-shadow:0 0 0 1px var(--line)} } /* ── 상단바 ── */ .topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px; transition:transform .25s ease; padding:12px 14px;background:var(--bg);border-bottom:1px solid var(--line); padding-top:calc(12px + env(safe-area-inset-top))} .topbar .ms{font-size:26px} /* 제목바 — 앱명(한글 + 영문) 왼쪽, 교회 이름 오른쪽 */ .wordmark{margin-right:auto;display:flex;flex-direction:column;align-items:flex-start;gap:3px;line-height:1} .wordmark b{font-size:19px;font-weight:800;letter-spacing:-.05em} /* 교회 이름은 영문과 같은 모양으로, 같은 바닥선에 — 제목줄 아래에 한 줄이 가로로 흐른다 */ .wordmark small,.brandmark{font-size:11.5px;font-weight:500;letter-spacing:.02em; color:color-mix(in srgb, var(--ink) 82%, transparent);line-height:1} .brandmark{flex:0 0 auto;align-self:flex-end} .brandmark:empty{display:none} .topbar-title{font-size:16px;font-weight:700;letter-spacing:-.03em} .spacer{margin-left:auto} /* 서브 화면 → 기도방으로 돌아가는 버튼 */ .home-pill{margin-left:auto;display:flex;align-items:center;gap:5px;flex:0 0 auto; background:var(--fill);color:var(--ink-2);border-radius:var(--r-pill); padding:8px 14px 8px 11px;font-size:13.5px;font-weight:700;letter-spacing:-.03em} .home-pill .ms{font-size:18px;color:var(--accent)} .home-pill:active{background:var(--line)} .tb-act{font-size:15px;font-weight:700;color:var(--accent);letter-spacing:-.03em;padding:6px 2px} .tb-act[disabled]{color:var(--ink-3)} /* ── 말씀 ── (다른 글자보다 한 단계 더 크게) */ .verse{padding:12px 16px 13px} .verse p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-2);word-break:keep-all} .verse cite{font-style:normal;color:var(--ink-3);font-size:14.5px} /* ── 스토리 트레이 ── */ .tray{display:flex;gap:14px;padding:4px 16px 14px;overflow-x:auto; border-bottom:1px solid var(--line);scrollbar-width:none} .tray::-webkit-scrollbar{display:none} .tray-item{width:58px;text-align:center;flex:0 0 auto} .ring{width:56px;height:56px;border-radius:50%;padding:2.5px;background:var(--line-2); display:flex;align-items:center;justify-content:center} .ring.new{background:var(--ring)} .ring > div{width:100%;height:100%;border-radius:50%;background:var(--fill); border:2.5px solid var(--bg);color:var(--ink-2);font-size:13.5px;font-weight:700; letter-spacing:-.04em;white-space:nowrap; display:flex;align-items:center;justify-content:center;position:relative} .ring .plus{position:absolute;right:-2px;bottom:-2px;width:19px;height:19px;border-radius:50%; background:var(--accent);border:2.5px solid var(--bg);color:#fff; display:flex;align-items:center;justify-content:center} .ring .plus .ms{font-size:13px;font-variation-settings:'wght' 500} .tray-item span{display:block;margin-top:6px;font-size:11.5px;color:var(--ink-2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 읽으며 내려갈 때 제목바와 탭 줄이 함께 위로 비킨다 (state.js watchScroll) */ body.bar-hidden .topbar{transform:translateY(-100%)} /* 탭 줄은 맨 위에 붙어 있을 때만 밀려 나간다 — 제자리에 있을 때 위 칸을 덮지 않게 */ body.bar-hidden .tabs{top:-60px} /* ── 탭 ── */ /* 둥근 단추 — 밑줄 탭보다 누를 자리가 또렷하다. 목록 바탕과 이어 붙여 한 판으로 보이게 */ .tabs{position:sticky;top:var(--bar-h,0px);z-index:10;display:flex;align-items:center;gap:6px; transition:top .25s ease; padding:12px var(--s3) 8px;background:var(--feed-bg)} .tabs button.tab,.tabs .zone,.tabs .vm{height:36px;border-radius:var(--r-pill); background:var(--card);border:1px solid var(--line);color:var(--ink-2); font-size:14px;font-weight:600;letter-spacing:-.02em; box-shadow:0 1px 2px rgba(15,17,21,.04);transition:background .15s,color .15s,border-color .15s} .tabs button.tab{flex:0 0 auto;white-space:nowrap;padding:0 13px} .tabs button.tab.on{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:700} .tabs .right{margin-left:auto;display:flex;align-items:center;gap:6px;min-width:0} .tabs .zone{display:flex;align-items:center;gap:1px;padding:0 7px 0 11px;font-size:13.5px;min-width:0;max-width:104px} .tabs .zone > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tabs .zone .ms{font-size:18px;color:var(--ink-3)} /* 걸러 보는 중이면 알아보게 — 모르고 지나치면 기도카드가 없어진 줄 안다 */ .tabs .zone.on,.tabs .vm.on{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:700} .tabs .zone.on .ms,.tabs .vm.on .ms{color:var(--bg)} .tabs .vm{flex:0 0 36px;width:36px;display:flex;align-items:center;justify-content:center} .tabs .vm .ms{font-size:20px;color:var(--ink-2)} /* ── 기도 글 ── */ .feed{flex:1 1 auto} /* 기도카드는 이름 그대로 한 장의 카드다 — 테두리와 둥근 모서리로 한 장씩 떼어 읽힌다 */ /* 목록 바탕을 옅은 회색으로 깔아 흰 카드가 떠오르게 한다 — 테두리는 옅게. 상세의 구역(.dsec)과 지난 응답 한 줄(.hist)도 같은 판을 쓴다 — 어디서 보든 같은 카드다 */ .post,.dsec,.hist{margin:var(--s3) var(--s3) 0;padding:18px var(--s4) var(--s4); border:1px solid var(--line);border-radius:var(--r);background:var(--card); box-shadow:0 1px 2px rgba(15,17,21,.04),0 4px 14px -6px rgba(15,17,21,.06)} .feed{padding-bottom:var(--s5);background:var(--feed-bg)} .feed > :first-child{margin-top:4px} .post-top{display:flex;align-items:center;gap:10px;margin-bottom:10px} /* 이름이 네 글자여도 동그라미를 넘지 않게 — 넘치면 글자를 줄인다 */ .av{width:38px;height:38px;border-radius:50%;background:var(--fill);color:var(--ink-2); font-size:12px;font-weight:700;letter-spacing:-.05em;white-space:nowrap;overflow:hidden; display:flex;align-items:center;justify-content:center;flex:0 0 auto} .av.ringed{padding:2px;background:var(--ring)} .av.ringed > i{width:100%;height:100%;border-radius:50%;background:var(--fill); border:2px solid var(--bg);font-style:normal;font-size:11.5px;font-weight:700; letter-spacing:-.04em;white-space:nowrap; display:flex;align-items:center;justify-content:center} .pt-name{min-width:0;line-height:1.35} .pt-name b{font-size:15px;font-weight:700;letter-spacing:-.03em} .pt-name .nm{display:inline} .pt-name > span:not(.nm){font-size:13px;color:var(--ink-3);display:block} /* 배우자 — 이름 옆 괄호, 회색 */ /* 이름과 배우자는 어디서나 「홍길동 (김영희)」 — 한 칸보다 좁게(0.2em) 띄운다. 한 칸이면 남남처럼 떨어진다 */ .sp{margin-left:.2em;font-style:normal;font-weight:500;font-size:14px;color:var(--ink-3)} .dp-head .nm b{font-size:17px;font-weight:700;letter-spacing:-.03em} .dp-head .nm .sp{font-size:15px} .pcount{margin-left:auto;text-align:right;font-size:12px;font-weight:400;color:var(--ink-3); white-space:nowrap;line-height:1.5} .pcount b{display:block;font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:-.02em} .prayer{font-size:17px;line-height:1.65;word-break:keep-all;white-space:pre-line;text-align:left;width:100%} .prayer.clamp{display:-webkit-box;-webkit-line-clamp:var(--clamp); -webkit-box-orient:vertical;overflow:hidden} /* 줄인 글 끝줄 오른쪽의 둥근 「더보기」 */ .pbody{display:flex;align-items:flex-end;gap:var(--s2)} .pbody .prayer{flex:1 1 auto;min-width:0} .more{flex:0 0 auto;margin-bottom:3px;height:26px;padding:0 10px;border-radius:var(--r-pill); border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);font-size:12.5px;font-weight:600} .more:active{opacity:.7} /* 고친 때 — 글 바로 아래 오른쪽. 읽는 데 방해되지 않게 작고 흐리게 */ .edited{margin-top:5px;text-align:right;font-size:12.5px;color:var(--ink-3)} .ago{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em} .post-foot{display:flex;align-items:center;margin-top:var(--s4)} .pedit{margin-left:auto;min-height:var(--h-sm);padding:0 var(--s3); border-radius:var(--r-pill);border:1px solid var(--line-2); background:transparent;color:var(--ink-2);font-size:var(--fs-sm)} .pedit .ms{font-size:17px} .pedit + .today,.pedit + .pedit{margin-left:6px} .pedit.icon{width:var(--h-sm);padding:0} /* 응답받았어요 — 오늘 기도 드림과 같은 색. 둘 다 이 카드로 하는 가장 중요한 일이다 */ .pedit[data-act="answer"]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700} .today{margin-left:auto;background:var(--accent);color:#fff;border-radius:var(--r-pill); min-height:var(--h-sm);padding:0 var(--s4);font-size:var(--fs-sm);font-weight:700; padding:9px 15px;font-size:13.5px;font-weight:700;letter-spacing:-.03em} .today.done{background:var(--fill);color:var(--ink-3)} .today[disabled]{opacity:.55} /* ── 상세 ── */ .detail .prayer{font-size:17.5px;line-height:1.75} .cmts{padding:6px 16px 0;border-top:1px solid var(--line);margin-top:14px} .cmt{display:flex;gap:11px;padding:11px 0} .cmt .av{width:32px;height:32px;font-size:12px} .cmt-b{font-size:14.5px;line-height:1.55;flex:1;min-width:0} /* 이름 뒤에 본문이 붙으므로 띄운다. 배우자가 있으면 그 뒤에서 띄운다 — 이름과 괄호 사이가 벌어지면 안 된다 */ .cmt-b b{font-weight:700;margin-right:5px} .cmt-b b + .sp{margin-left:calc(.2em - 5px);margin-right:5px} .cmt-b time{display:block;margin-top:4px;font-size:12px;color:var(--ink-3)} .cmt .del-c{color:var(--ink-3);font-size:12px;align-self:flex-start;padding:2px 4px} .composer{position:sticky;bottom:0;display:flex;align-items:center;gap:10px; padding:11px 14px;border-top:1px solid var(--line);background:var(--bg); padding-bottom:calc(11px + env(safe-area-inset-bottom))} .composer .av{width:32px;height:32px;font-size:12px} .composer input{flex:1;font-size:15px;border:0;background:none;outline:none;min-width:0} .composer input::placeholder{color:var(--ink-3)} .composer .go{font-size:14.5px;font-weight:700;color:var(--accent)} .composer .go[disabled]{color:var(--ink-3)} /* ── 드로어 ── */ .drawer{position:fixed;inset:0;z-index:50;display:flex} .drawer .mask{position:absolute;inset:0;background:rgba(8,10,14,.4)} .dp{position:relative;width:276px;max-width:82vw;background:var(--bg); display:flex;flex-direction:column;animation:slidein .18s ease-out} @keyframes slidein{from{transform:translateX(-100%)}to{transform:none}} .dp-head{padding:22px 20px 18px;display:flex;align-items:center;gap:12px; padding-top:calc(22px + env(safe-area-inset-top))} .dp-head .av{width:48px;height:48px;font-size:18px} .dp-head b{font-size:17px;font-weight:700;display:block;letter-spacing:-.03em} .dp-head span{font-size:13.5px;color:var(--ink-3)} .dp nav{padding:4px 8px;flex:1 1 auto;overflow-y:auto} .dp nav button{display:flex;align-items:center;gap:15px;padding:13px 12px;border-radius:var(--r-md); font-size:16px;font-weight:500;letter-spacing:-.03em;width:100%;text-align:left} .dp nav button .ms{font-size:25px} .dp nav button.on{font-weight:700} .dp nav .badge{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--accent)} /* 관리자 — 새 창으로 열린다는 표시 */ .dp nav .ext{margin-left:auto;font-size:18px;color:var(--ink-3)} /* 화면 모드 — 오른쪽에 현재 값 */ .dp nav .val{margin-left:auto;font-size:13.5px;color:var(--ink-3);font-weight:500} .dp nav hr{border:0;border-top:1px solid var(--line);margin:9px 12px} .dp-foot{padding:15px 20px;font-size:12px;color:var(--ink-3); padding-bottom:calc(15px + env(safe-area-inset-bottom))} /* ── 내 기도카드 ── */ .sec,.dsec h2,.dhead{margin:0;font-size:18px;font-weight:900;letter-spacing:-.03em;color:var(--ink)} .sec{padding:var(--s5) var(--pad) var(--s2)} .btn{flex:1;min-height:var(--h-lg);padding:0 var(--s4);border-radius:var(--r-pill);font-size:var(--fs-lg);font-weight:700; display:flex;align-items:center;justify-content:center;gap:6px;letter-spacing:-.03em} .btn .ms{font-size:20px} /* 보통 버튼 — 입력칸 옆, 표 안 */ .btn-sm{min-height:var(--h-md);padding:0 var(--s4);border-radius:var(--r-pill); border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font-size:var(--fs-md)} .btn.ghost{background:var(--fill);color:var(--ink)} .btn.danger{background:var(--fill);color:var(--accent)} .btn.save{background:var(--accent);color:#fff} .btn[disabled]{opacity:.5} .startbox{margin:var(--s3) var(--pad) 0;border:1.5px dashed var(--line-2);border-radius:var(--r); padding:34px 20px;text-align:center;width:calc(100% - 32px)} .startbox .ms{font-size:37px;color:var(--line-2)} .startbox b{display:block;margin-top:12px;font-size:17px;font-weight:700;letter-spacing:-.03em} /* ── 쓰기 / 수정 ── */ .write{padding:var(--s5) var(--pad) var(--s6)} .ta{width:100%;font-size:17px;line-height:1.65;min-height:132px;border:0;outline:none;overflow:hidden; scroll-margin:72px 0 24px; background:none;resize:none;padding:4px 0;display:block} .ta::placeholder{color:var(--ink-3)} .cnt{text-align:right;font-size:12.5px;color:var(--ink-3)} .cnt.over{color:var(--accent);font-weight:700} .scope-row{display:flex;align-items:center;gap:10px;padding:15px 0;width:100%; border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:6px} .scope-row .ms{font-size:22px;color:var(--ink-2)} .scope-row.note > span{font-size:14px;font-weight:500;color:var(--ink-2)} .scope-row.pick{padding:11px 0} .anon{font-size:12.5px;font-weight:600;color:var(--ink-3)} .tagpick{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)} .tagpick > label{display:block;font-size:var(--fs-md);font-weight:700;margin-bottom:var(--s1)} .tagpick > label span{display:block;font-size:12.5px;font-weight:500;color:var(--ink-3);margin-top:2px} .tagmine{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);min-height:var(--h-sm);align-items:center} .tg.auto{border-color:var(--line-2);color:var(--ink-2);cursor:default} .tg.auto i{font-style:normal;margin-left:5px;font-size:11px;color:var(--ink-3)} .tg.on .x{font-style:normal;margin-left:5px;opacity:.7} .tagrow{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4)} .tagrow.col{display:block} .tglab{flex:0 0 66px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)} .tagrow.col .tglab{display:block;margin-bottom:var(--s2)} #tag-group{flex:1 1 auto;min-width:0;padding:10px 11px;border-radius:var(--r-md); border:1px solid var(--line);background:transparent;color:var(--ink);font-size:15px} #tag-list{display:flex;flex-wrap:wrap;gap:var(--s2)} .tg{min-height:var(--h-sm);padding:0 var(--s3);border-radius:var(--r-pill); border:1px solid var(--line-2);background:transparent;color:var(--ink-2); font-size:var(--fs-sm)} .tg.on{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:700} .tagadd{display:flex;gap:var(--s2)} .tagadd input{flex:1 1 auto;min-height:var(--h-md);padding:0 var(--s3);border-radius:var(--r-md); border:1px solid var(--line-2);background:transparent;color:var(--ink);font-size:var(--fs-md)} .tagadd .btn-sm{flex:0 0 auto} .ptags{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s3) 0 0} .ptags button{padding:5px 10px;border-radius:var(--r-pill);border:0; background:var(--fill);color:var(--ink-2);font-size:12.5px;font-weight:600} /* ── 가입 화면 — 넣은 값을 크게 되보여 준다 (어르신 오타 잡기) ── */ .joinform .jf{margin-bottom:14px} .jecho{display:none;align-items:center;gap:7px;margin:7px 0 0; font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.35} .jecho.on{display:flex} .jecho .mk{flex:0 0 auto;width:21px;height:21px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff} .jecho.ok .mk{background:var(--answer)} .jecho.bad .mk{background:var(--accent)} .jecho .why{font-size:13.5px;font-weight:500;color:var(--ink-2)} .jecho.bad .why{color:var(--accent)} .jsep{border:0;border-top:1px solid var(--line);margin:20px 0 18px} #btn-join-reset{margin-top:9px} #btn-join-reset .ms{font-size:19px} .diary-note{display:flex;align-items:center;gap:7px;margin:0;padding:12px 16px; font-size:13.5px;color:var(--ink-2);border-bottom:1px solid var(--line)} .diary-note .ms{font-size:18px} .diary-item{width:100%;text-align:left;padding:var(--s4) var(--pad);border-bottom:1px solid var(--line); background:transparent} .diary-item .when{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3);margin-bottom:5px} .diary-item .txt{font-size:15px;line-height:1.55;color:var(--ink);white-space:pre-wrap} /* 내 기도카드 — 안은 다른 카드와 같고, 테두리만 사람 동그라미의 그라데이션으로 두른다. 색을 채우면 글이 흐려진다. 테두리로 「이것이 내 것」만 말한다. **기도방 목록에서만** — 상세와 「나」 화면은 어차피 내 카드뿐이라 가려낼 까닭이 없다 */ .post.mine{position:relative} #feed .post.mine{border:2px solid transparent; background:linear-gradient(var(--card),var(--card)) padding-box, var(--ring) border-box} /* 공개 범위 — 카드 오른쪽 위 모서리 안쪽에 꼭 맞춘다. 바깥 모서리는 카드의 안쪽 곡률(12px - 테두리)을 따르고, 안쪽 모서리만 둥글린다 */ .scope-badge{position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:3px; height:22px;padding:0 9px 0 7px;border-radius:0 calc(var(--r) - 1px) 0 8px; background:var(--ink);color:var(--bg); font-size:11px;font-weight:600;letter-spacing:.01em} .scope-badge .ms{font-size:13px;font-variation-settings:'opsz' 20,'wght' 500} #feed .post.mine .scope-badge{border-radius:0 calc(var(--r) - 2px) 0 8px} .startbox.mine-start{margin:var(--s3) var(--pad) var(--s4);border-style:solid;border-color:var(--accent); background:color-mix(in srgb, var(--accent) 5%, transparent)} .startbox.mine-start .ms{color:var(--accent)} .mine-tag{display:inline-block;margin-bottom:9px;padding:3px 9px;border-radius:var(--r-pill); font-size:12px;font-weight:700;letter-spacing:-.02em; color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent)} /* 공개 범위 — 왼쪽은 지금 상태, 오른쪽에 익명 · 비공개 단추. 둘 다 끄면 실명 공개 */ .scopepick{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) 0 var(--s1)} .sp-now{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--ink)} .sp-now .ms{font-size:21px;color:var(--ink-2)} .sp-btns{margin-left:auto;display:flex;gap:6px} .sp-btns button{min-height:var(--h-sm);padding:0 var(--s3);border-radius:var(--r-pill); border:1px solid var(--line-2);background:transparent;color:var(--ink-2); font-size:var(--fs-sm);font-weight:600;letter-spacing:-.02em} .sp-btns button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)} .sp-btns button:disabled{opacity:.45} .scope-row > span{font-size:15.5px;font-weight:500} .scope-row .val{margin-left:auto;font-size:14.5px;color:var(--ink-2);font-weight:600; display:flex;align-items:center} .scope-row .val .ms{font-size:19px;color:var(--ink-3)} .edit-acts{display:flex;gap:var(--s2);margin-top:var(--s6)} .warn{margin-top:14px;font-size:12.5px;color:var(--ink-3);line-height:1.6;text-align:center} /* ── 로그인 ── */ /* 로그인 · 가입 — 맨 위는 기도방과 같은 제목바, 그 아래 검은 제목 한 줄과 설명 한 줄 */ .login{flex:1;display:flex;flex-direction:column;padding:36px 24px 32px} .auth-title{margin:0 0 8px;font-size:28px;font-weight:800;letter-spacing:-.05em;line-height:1.2;color:var(--ink)} .login .sub{margin:0 0 32px;font-size:15px;color:var(--ink-3);line-height:1.5} .field{margin-bottom:var(--s4)} .field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px} .field input{width:100%;padding:14px;border:1px solid var(--line-2);border-radius:var(--r-md); font-size:17px;background:var(--bg);outline:none} .field input:focus{border-color:var(--ink)} /* flex:1 을 끄지 않으면 세로 플렉스 안에서 버튼이 세로로 늘어난다 */ .login .btn{flex:0 0 auto;width:100%;background:var(--accent);color:#fff; padding:15px;font-size:16px;margin-top:8px} .login .hint{margin-top:18px;font-size:12.5px;color:var(--ink-3);text-align:center;line-height:1.7} /* ── 공통 ── */ .empty{padding:48px 24px;text-align:center;color:var(--ink-3);font-size:14.5px;line-height:1.7} .empty .ms{font-size:37px;color:var(--line-2);display:block;margin-bottom:10px} .empty.sm{padding:24px 16px} .loading{padding:40px;text-align:center;color:var(--ink-3);font-size:14px} #toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(10px); background:var(--ink);color:var(--bg);font-size:14px;font-weight:600; padding:11px 18px;border-radius:var(--r-pill);z-index:100;opacity:0;pointer-events:none; transition:opacity .18s,transform .18s;max-width:86vw;text-align:center} #toast.on{opacity:1;transform:translateX(-50%)} /* 시트(공개 범위 선택) */ .sheetmask{position:fixed;inset:0;z-index:60;background:rgba(8,10,14,.4); display:flex;align-items:flex-end;justify-content:center} .sheetbox{width:100%;max-width:var(--maxw);background:var(--bg); border-radius:var(--r-lg) var(--r-lg) 0 0;padding:8px 0 calc(10px + env(safe-area-inset-bottom)); animation:up .2s ease-out;display:flex;flex-direction:column;max-height:78vh} /* 소속이 48개라 넘친다 — 제목은 두고 목록만 구른다 */ .sheetlist{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .shead{position:sticky;top:0;z-index:1;background:var(--bg); padding:10px 20px 5px;font-size:12.5px;font-weight:800; color:var(--ink-3);letter-spacing:.02em} @keyframes up{from{transform:translateY(100%)}to{transform:none}} .sheetbox h3{margin:14px 20px 8px;font-size:14px;color:var(--ink-2);font-weight:700} .sheetbox button{display:flex;align-items:center;gap:12px;width:100%; padding:15px 20px;font-size:16px;font-weight:500;text-align:left} .sheetbox button.on{font-weight:700;color:var(--accent)} /* 시트 안에서 목록을 좁히는 찾기 칸 */ .sfind{display:flex;align-items:center;gap:8px;margin:0 16px 10px;padding:0 14px;height:var(--h-md); background:var(--fill);border-radius:var(--r-pill)} .sfind .ms{font-size:20px;color:var(--ink-3)} .sfind input{flex:1 1 auto;border:0;background:transparent;color:var(--ink); font-size:15px;padding:0;outline:none;min-width:0} .sfind input::placeholder{color:var(--ink-3)} .sheetbox button .ms{margin-left:auto;font-size:21px;color:var(--accent)} /* 단추 나열 — 짧은 선택지(보기 설정)는 세로 목록 대신 둥근 단추로 늘어놓는다 */ .sheetlist.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 8px} .sheetlist.chips .shead{flex:0 0 100%;position:static;padding:10px 4px 0} .sheetbox .chips button{width:auto;height:40px;padding:0 15px;border-radius:var(--r-pill); border:1px solid var(--line-2);background:var(--card);color:var(--ink-2); font-size:14.5px;font-weight:600;letter-spacing:-.02em} .sheetbox .chips button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)} .sheetbox .chips button .ms{display:none} /* ═══════════════════════════════════════════════════ 가입 — 이름·생년월일로 명부를 대조한 뒤 PIN 을 정한다 (GAS 시절에는 관리자가 PIN 을 만들어 알려주었다) ═══════════════════════════════════════════════════ */ /* 생년월일 — 숫자 키패드가 뜨도록 inputmode=numeric 과 함께 쓴다 */ .field input[inputmode="numeric"]{letter-spacing:.08em} .field .help{margin-top:6px;font-size:12.5px;color:var(--ink-3);line-height:1.5} .field .err{margin-top:6px;font-size:13px;color:var(--accent);font-weight:600;line-height:1.5} /* 로그인 ↔ 가입 전환 */ .login .alt{margin-top:20px;text-align:center;font-size:14px;color:var(--ink-2)} .login .alt button{font-weight:700;color:var(--accent);padding:4px;font-size:14px} /* 가입 확인 — 명부에서 찾은 내 정보를 보여주고 맞는지 묻는다 */ .confirm{background:var(--fill);border-radius:var(--r);padding:18px 18px 16px;margin-bottom:18px} .confirm b{display:block;font-size:18px;font-weight:700;letter-spacing:-.03em} .confirm .meta{margin-top:6px;font-size:14px;color:var(--ink-2);line-height:1.6} .confirm .meta i{font-style:normal;color:var(--ink-3)} /* 대신 올린 기도 — 누가 올렸는지 숨기지 않는다 */ .byproxy{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3); letter-spacing:.01em} .byproxy .ms{font-size:14px} .post-foot .byproxy{margin-left:8px} /* 대신 등록 화면 — 대상 교인 고르기 */ /* 안내 띠 — 대신 등록처럼 주의가 필요한 화면 */ .notice{display:flex;gap:9px;align-items:flex-start;margin:14px 16px 0;padding:13px 14px; background:var(--fill);border-radius:var(--r);font-size:13.5px;line-height:1.6;color:var(--ink-2)} .notice .ms{font-size:19px;color:var(--accent);flex:0 0 auto;margin-top:1px} /* 저장 중 — 버튼을 두 번 누르지 못하게 */ .btn.busy{opacity:.6;pointer-events:none} /* 화면 전환 */ .screen{flex:1 1 auto;display:flex;flex-direction:column;min-height:0} /* ────────── 시작 화면 — 흰 바탕에 아이콘과 같은 그림을 그라데이션으로 ────────── */ #splash{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center; background:#fff;transition:opacity .4s} #splash.out{opacity:0} #splash svg{width:min(62vw,280px);height:auto;margin-top:-8vh} #splash .splash-foot{position:absolute;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom)); display:flex;flex-direction:column;align-items:center;gap:4px;font-family:Pretendard,sans-serif} #splash .splash-foot b i{font-style:normal;font-weight:700} #splash .splash-foot b{font-size:23px;font-weight:800;color:#D62976; background:linear-gradient(90deg,#FA7E1E,#D62976 50%,#962FBF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} #splash .splash-foot span{font-size:11.5px;font-weight:600;color:#9a9a9a;letter-spacing:.02em} /* 6개월이 지난 내 기도카드 — 세 갈래 중 하나 */ .term-end{margin-top:var(--s3);padding:14px;border-radius:var(--r);background:var(--fill)} .term-end p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2);word-break:keep-all} .term-end p b{display:block;margin-bottom:2px;font-size:14px;color:var(--ink)} .te-acts{display:flex;gap:6px;margin-top:var(--s3)} .te-acts button{flex:1;min-height:var(--h-md);border-radius:var(--r-pill);border:1px solid var(--line-2); background:var(--card);color:var(--ink);font-size:var(--fs-sm);font-weight:600} .te-acts button:active{opacity:.7} /* 기도중에 남의 카드가 없을 때 — 기도방으로 이끈다 */ .go-room{display:block;width:100%;text-align:center;line-height:1.6;color:var(--ink-2)} .go-room b{color:var(--accent);font-weight:700} /* ── 상세 — 목록 카드와 다른 모양: 어두운 머리 카드 + 탭 + 구역 ── */ /* 머리 카드는 밝은 화면에서도 어두운 판이다. 들어오면 모양이 확 바뀌어 목록과 헷갈리지 않는다 */ .hero{--hero:#1b1c20;--hero-2:#9ba1ac;--hero-3:#2c2e34; margin:var(--s2) var(--s3) 0;padding:22px 20px 20px;border-radius:var(--r-lg); background:var(--hero);color:#fff;border:1px solid transparent} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero{border-color:var(--line-2)} } :root[data-theme="dark"] .hero{border-color:var(--line-2)} .hero-kind{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--hero-2)} .hero-kind .ms{font-size:17px} .hero-top{display:flex;align-items:flex-start;gap:12px;margin-top:10px} .hero-id{flex:1;min-width:0} .hero-name{margin:0;font-size:30px;font-weight:900;letter-spacing:-.045em;line-height:1.18;word-break:keep-all} .hero-name .sp{font-size:17px;font-weight:500;color:var(--hero-2)} .hero-group{margin-top:6px;font-size:15px;color:#d6d9df} .hero-av{width:64px;height:64px;border-radius:50%;flex:0 0 auto;background:var(--hero-3); display:flex;align-items:center;justify-content:center} .hero-av > i{width:100%;height:100%;border-radius:50%;background:var(--hero-3);font-style:normal; font-size:16px;font-weight:700;letter-spacing:-.04em;white-space:nowrap; display:flex;align-items:center;justify-content:center} .hero-av.ringed{padding:3px;background:var(--ring)} .hero-av.ringed > i{border:3px solid var(--hero)} .hero-av.ans{background:var(--answer)} .hero-av.ans .ms{font-size:30px;color:#fff} .hero-count{margin-top:20px;text-align:center;font-size:15.5px} .hero-count b{font-size:19px} .hero-count span{display:block;margin-top:3px;font-size:12.5px;color:var(--hero-2)} .hero-cta{display:flex;align-items:center;justify-content:center;gap:6px;width:100%; height:var(--h-lg);margin-top:16px;border-radius:var(--r-pill); background:var(--accent);color:#fff;font-size:16px;font-weight:700;letter-spacing:-.03em} .hero-cta.done{background:var(--hero-3);color:var(--hero-2)} .hero-cta .ms{font-size:20px} .hero-sub{display:flex;gap:8px;margin-top:10px} .hero-sub button{flex:1;height:var(--h-md);border-radius:var(--r-pill);border:1px solid #3a3d44; color:#e8eaee;font-size:14px;display:flex;align-items:center;justify-content:center;gap:5px} .hero-sub .ms{font-size:18px} .hero-thanks{margin-top:16px;height:48px;border-radius:var(--r-pill); background:rgba(67,193,137,.14);color:#6fd6a6;font-size:15px;font-weight:700; display:flex;align-items:center;justify-content:center} .dtabs{display:flex;gap:6px;margin:18px var(--pad) 0} .dtabs button{height:36px;padding:0 13px;border-radius:var(--r-pill); background:var(--card);border:1px solid var(--line);color:var(--ink-2); font-size:14px;font-weight:600;letter-spacing:-.02em} .dtabs button.on{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:700} .dtabs button[disabled]{opacity:.45} .dtabs u{text-decoration:none;font-size:12.5px;margin-left:1px} /* 상세는 머리 카드 아래가 기도방 목록과 같은 바탕이다 */ #view-detail{background:var(--feed-bg)} .detail{padding-bottom:var(--s5)} .dhead{margin:var(--s5) var(--pad) 0} .dsec h2{margin-bottom:8px} .dsec h2 span{margin-left:3px;font-size:15px;font-weight:500;color:var(--ink-3)} .dbody{margin:0;font-size:18px;line-height:1.8;word-break:keep-all;white-space:pre-line} .detail .cmts{border-top:0} /* 기간 막대 — 올림 · 수정 · 만료를 한 줄로 */ .span{margin-top:18px;padding:14px 14px 12px;border-radius:var(--r);background:var(--fill)} .span-bar{position:relative;height:6px;border-radius:var(--r-pill);background:var(--line-2)} .span-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-pill);background:var(--ink)} .span-bar b{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%; background:var(--bg);border:3px solid var(--ink)} .span-bar em{position:absolute;top:-4px;width:2px;height:14px;margin-left:-1px;border-radius:2px;background:var(--accent)} .span.done .span-bar i{background:var(--answer)} .span.done .span-bar b{border-color:var(--answer)} .span-row{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-size:12.5px;color:var(--ink-2)} .span-row .mid{font-weight:700;color:var(--ink)} .span-row .ansd{font-weight:700;color:var(--answer)} .span-note{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:12.5px;color:var(--ink-3)} .span-note .ms{font-size:15px;color:var(--accent)} .byproxy-line{display:flex;align-items:center;gap:5px;margin-top:12px;font-size:13.5px;color:var(--ink-2)} .byproxy-line .ms{font-size:17px} /* 기도응답 — 응답이 주인공, 드렸던 기도는 그 아래 흐리게 */ .ansbig{position:relative;padding:18px 18px 18px 46px;border-radius:var(--r); background:color-mix(in srgb, var(--answer) 10%, var(--bg))} .ansbig .ms{position:absolute;left:14px;top:16px;font-size:24px;color:var(--answer)} .ansbig p{margin:0;font-size:18px;line-height:1.75;font-weight:500;word-break:keep-all;white-space:pre-line} .orig{margin-top:14px;font-size:15px;line-height:1.7;color:var(--ink-2);word-break:keep-all;white-space:pre-line} .orig em{display:block;margin-bottom:2px;font-style:normal;font-size:12.5px;color:var(--ink-3)} .hists{padding-bottom:var(--s1)} /* 응답 카드 — 감사의 글이 주인공. 기도방의 기도응답 탭은 머리에 누구의 응답인지를 단다 */ .hist{display:block;width:calc(100% - var(--s3) * 2);padding:14px var(--s4);text-align:left} .hist:active{opacity:.8} .hist-who{display:flex;align-items:center;gap:10px;margin-bottom:12px} .hist-who .av .ms{font-size:19px} .hist-n{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink-3);white-space:nowrap} .hist-body{display:flex;align-items:center;gap:10px} .hist-body > div{flex:1;min-width:0} .hist-body p{margin:0;font-size:15.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3; -webkit-box-orient:vertical;overflow:hidden;word-break:keep-all} .hist-body > div > span{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-3)} .hist-body > .ms:first-child{color:var(--answer);align-self:flex-start;margin-top:1px} .hist-body > .ms:last-child{color:var(--ink-3)} /* 여러 교인이 섞인 목록에서는 감사의 글을 옅은 초록 상자에 — 상세의 응답 상자와 같은 빛 */ .with-who .hist-body{padding:12px;border-radius:var(--r-md); background:color-mix(in srgb, var(--answer) 9%, var(--card))} /* ── 사람 한 줄 — 내가 드린 기도 · 대신 올리기 ── */ .searchbox{display:flex;align-items:center;gap:8px;margin:var(--s3) var(--pad) var(--s2); padding:0 14px;height:var(--h-md);border-radius:var(--r-pill);background:var(--fill)} .searchbox .ms{font-size:20px;color:var(--ink-3)} .searchbox input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:15px;color:var(--ink)} .prow{display:flex;align-items:center;gap:12px;width:100%;padding:12px var(--pad);text-align:left; border-bottom:1px solid var(--line)} .prow:active{background:var(--fill)} .prow .av{width:40px;height:40px;font-size:13px} .prow .av .ms{font-size:20px} .prow-b{flex:1;min-width:0;line-height:1.35} .prow-b .nm b{font-size:16px;font-weight:700;letter-spacing:-.03em} .prow-b > span{display:block;font-size:13px;color:var(--ink-3)} .prow-n{text-align:right;line-height:1.35} .prow-n b{display:block;font-size:16px;font-weight:700} .prow-n span{font-size:12px;color:var(--ink-3)} .prow.closed .prow-b .nm b,.prow.closed .prow-n b{color:var(--ink-2)} .prow-n .st{font-size:12.5px;font-weight:700;color:var(--answer)} .prow-n .go{font-size:14px;color:var(--accent)}