/* 모이짠 — 절제된 하양 + 깊은 남색 + 차분한 코발트. 장식은 덜고, 글자와 여백으로 보여준다.
   로고·금액·날짜 숫자는 단정한 명조(작은 부분집합 글꼴), 본문은 시스템 고딕. 샴페인 골드는 로고 반짝임 한 점에만. */
@font-face{font-family:"MoiSerif";font-weight:600;src:url(/fonts/serif-logo.woff2) format("woff2");font-display:swap}

:root{
  --ink:#0b1b3a; --body:#2a3750; --sub:#626f86; --faint:#8f9ab0;
  --gold:#f0c155; --gold-d:#dfa83c; --gold-t:#fbf3df; --gold-line:#ecd7a4; --gold-ink:#7a5710;
  --bg:#faf7f1; --card:#ffffff; --line:#ece6d8; --line2:#dcd3bf;
  --in:#1f7a54; --out:#b4432f; --gold:#b8923f;
  /* 장부 입금/지출 색은 주식 앱과 같게: 들어온 돈(입금)=빨강, 나간 돈(지출)=파랑. 삭제·경고의 빨강(--out)과는 따로 쓴다 */
  --dep:#d6453b; --exp:#2d63c8;
  --serif:"MoiSerif","Noto Serif KR","Nanum Myeongjo",serif;
  --shadow:0 1px 2px rgba(11,27,58,.04), 0 8px 24px rgba(11,27,58,.05);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);line-height:1.6;font-size:16px;letter-spacing:-.01em;
  font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select{letter-spacing:inherit}
.wrap{max-width:480px;margin:0 auto;padding:12px 18px 104px}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}

/* ───── 로고 ───── */
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand img{height:32px;width:auto;display:block}
.wordmark{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1;color:var(--ink);letter-spacing:-.5px;margin:0}

/* ───── 입장 / 비밀번호 정하기 ───── */
.stage{position:fixed;inset:0;overflow-x:hidden;overflow-y:auto;z-index:20;background:var(--bg)}
.stage .inner{max-width:400px;margin:0 auto;padding:10vh 24px 60px;text-align:center}
.stage .logo{display:block;width:150px;height:auto;margin:0 auto 18px}
.stage .wordmark{font-size:46px;letter-spacing:-1.5px}
.stage .rule{width:28px;height:2px;background:var(--gold);margin:16px auto 12px;border-radius:2px}
.stage .tag{margin:0 0 30px;color:var(--sub);font-size:13.5px;letter-spacing:.02em}
.stage h2.big{font-size:19px;margin:14px 0 4px;color:var(--ink);font-weight:700;letter-spacing:-.2px}
.stage form{text-align:left;background:#fff;border-radius:18px;padding:22px 20px 18px;border:1px solid var(--line);box-shadow:var(--shadow)}

/* ───── 머리글 ───── */
header{display:flex;align-items:center;justify-content:space-between;margin:4px 0 20px;gap:8px}
header .hello{font-size:13.5px;color:var(--sub);margin-top:5px;letter-spacing:.01em}
.hbtns{display:flex;gap:8px;align-items:center}
.ibtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;font-family:inherit}
.ibtn.on{color:var(--gold-ink);border-color:var(--gold-line);background:var(--gold-t)}
.chip{border:1px solid var(--line2);background:#fff;color:var(--ink);border-radius:99px;padding:8px 14px;font-size:13.5px;cursor:pointer;font-family:inherit;font-weight:600;letter-spacing:-.1px}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

/* ───── 남은 회비 ───── */
.balance{position:relative;overflow:hidden;color:#fff;border-radius:18px;padding:22px 22px 24px;margin-bottom:12px;
  background:linear-gradient(140deg,#14316f 0%,#0b1b3a 70%)}
.balance .label{font-size:13.5px;color:#b8c5e6;letter-spacing:.06em;position:relative;padding-top:12px}
.balance .label::before{content:"";position:absolute;left:0;top:0;width:26px;height:2px;background:#d8b866;border-radius:2px}
.balance .num{font-family:var(--serif);font-weight:600;font-size:46px;letter-spacing:-1px;line-height:1.15;margin-top:6px}
.balance .won{font-size:20px;margin-left:3px;opacity:.9}
.link-card{display:block;width:100%;text-align:left;border:0;cursor:pointer;font-family:inherit}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.stat{background:var(--card);border-radius:14px;padding:13px 15px;border:1px solid var(--line)}
.stat .l{font-size:13px;color:var(--sub)}
.stat .v{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-.3px;margin-top:2px}
.stat.in .v{color:var(--dep)} .stat.out .v{color:var(--exp)}

h2{font-size:13.5px;margin:28px 2px 10px;color:var(--sub);font-weight:700;letter-spacing:.06em}
h2 .sub{font-weight:500;letter-spacing:0;color:var(--faint);margin-left:4px}
.empty{text-align:center;color:var(--sub);padding:26px 0;font-size:15px}
.foot{text-align:center;color:var(--faint);font-size:13px;margin-top:22px}

/* ───── 장부 내역 ───── */
.item{background:var(--card);border-radius:14px;padding:13px 15px;margin-bottom:8px;display:flex;gap:13px;align-items:center;border:1px solid var(--line)}
.item.void{background:#f1f3f8;opacity:.78}
.item.void .title,.item.void .amt{text-decoration:line-through}
.dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;border:1px solid var(--line2)}
.dot.in{color:var(--dep);border-color:#f0c6c1;background:#fdf3f1} .dot.out{color:var(--exp);border-color:#c3d3ef;background:#f1f5fd}
.item .body,.idea .body{flex:1;min-width:0}
.title{font-weight:650;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.meta{font-size:13px;color:var(--sub)}
.voidmsg{font-size:13px;color:var(--out);margin-top:2px}
.amt{font-family:var(--serif);font-weight:600;font-size:17px;white-space:nowrap;letter-spacing:-.3px}
.amt.in{color:var(--dep)} .amt.out{color:var(--exp)}
.amt.hide{font-family:inherit;color:var(--sub);font-weight:500;font-size:12.5px;letter-spacing:0}
.link{border:0;background:none;color:var(--gold-ink);cursor:pointer;font-size:14px;padding:6px 0;font-family:inherit;font-weight:600}
.link:hover{text-decoration:underline}

/* ───── 폼 ───── */
label{display:block;font-size:13.5px;color:var(--sub);margin:14px 0 5px;font-weight:600}
input,select{width:100%;padding:12px 13px;border:1px solid var(--line2);border-radius:11px;font-size:16px;background:#fff;font-family:inherit;color:var(--ink);transition:border-color .15s, box-shadow .15s}
input::placeholder{color:var(--faint)}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(220,159,51,.25)}
.btn:focus-visible,.chip:focus-visible,.tabs button:focus-visible,.vote:focus-visible,.rsvp button:focus-visible,.ibtn:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px}
.btn{width:100%;margin-top:18px;padding:14px;border:0;border-radius:11px;background:linear-gradient(180deg,#f9db8b 0%,#f0c155 100%);color:var(--ink);font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:-.1px;box-shadow:0 6px 14px rgba(223,168,60,.32),inset 0 1px 0 rgba(255,255,255,.6)}
.btn:active{background:linear-gradient(180deg,#f0c155 0%,#e4ad40 100%)}
.btn:disabled{opacity:.6}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line2)}
.btn.small{width:auto;margin:0;padding:12px 18px;white-space:nowrap}
.admin{background:#fff;border-radius:16px;padding:16px;margin-bottom:16px;border:1px solid var(--line2);border-top:3px solid var(--gold)}
.admin>b{color:var(--ink);font-size:14px}
.row{display:flex;gap:8px}
.row>div{flex:1;min-width:0}
.row.gap{gap:8px;margin-top:6px}
.row.gap .btn{margin-top:10px}
.inline{display:flex;gap:8px;margin:12px 0 4px;flex-wrap:wrap}
.inline input{flex:1;min-width:120px}
.err{color:var(--out);font-size:14px;min-height:1.2em;margin:8px 0 0}
.hint{color:var(--sub);font-size:13px;margin:10px 0 0;line-height:1.6}
.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--body);margin:14px 0 0;font-weight:500}
.check input{width:auto;accent-color:var(--gold)}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.banner{background:var(--gold-t);color:var(--gold-ink);border-radius:12px;padding:11px 14px;font-size:13px;margin-bottom:14px}

/* ───── 하단 탭 ───── */
.tabs{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);display:flex;justify-content:center;padding:0 max(8px,env(safe-area-inset-left)) env(safe-area-inset-bottom);z-index:5}
.tabs button{flex:1;max-width:120px;border:0;background:none;color:var(--faint);font-family:inherit;cursor:pointer;padding:9px 0 8px;position:relative;display:flex;flex-direction:column;align-items:center;gap:3px}
.tabs button svg.i{width:22px;height:22px}
.tabs button span{font-size:11.5px;font-weight:600;letter-spacing:.01em}
.tabs button.on{color:var(--gold-ink)}
.tabs button.on svg.i{stroke-width:2}
.tabs button.on::before{content:"";position:absolute;top:-1px;left:50%;width:22px;height:2px;margin-left:-11px;background:var(--gold);border-radius:0 0 2px 2px}

/* ───── 모임 카드 ───── */
.ev{background:var(--card);border-radius:18px;padding:18px;margin-bottom:12px;border:1px solid var(--line);box-shadow:var(--shadow)}
.ev.canceled{opacity:.6}
.ev .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ev .lbl{font-size:13px;color:var(--sub);letter-spacing:.08em;font-weight:700}
.badge{border:1px solid var(--gold-line);color:var(--gold-ink);background:var(--gold-t);border-radius:99px;padding:3px 10px;font-size:13px;font-weight:700;white-space:nowrap;letter-spacing:.02em}
.badge.gray{border-color:var(--line2);color:var(--sub);background:#f1f3f8}
.dateblk{display:flex;align-items:baseline;gap:10px;margin:10px 0 6px;flex-wrap:wrap}
.dateblk .md{font-family:var(--serif);font-weight:600;font-size:44px;line-height:1;color:var(--ink);letter-spacing:-1.5px}
.dateblk .dw{font-size:15px;color:var(--body);font-weight:500}
.ev .line{font-size:15px;color:var(--body);margin:5px 0;overflow-wrap:anywhere;display:flex;gap:8px;align-items:flex-start}
.ev .line svg.i{width:17px;height:17px;margin-top:3px;color:var(--sub)}
.ev .line.sub{color:var(--sub);font-size:14px;padding-left:25px}
.tdiv{border-top:1px dashed var(--line2);margin:14px 0 2px}
.rsvp{display:grid;grid-template-columns:repeat(3,1fr);margin:14px 0 12px;border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:#fff}
.rsvp button{border:0;background:#fff;padding:13px 4px;font-size:15px;cursor:pointer;font-family:inherit;color:var(--body);font-weight:600;display:flex;gap:6px;align-items:center;justify-content:center}
.rsvp button+button{border-left:1px solid var(--line2)}
.rsvp button.on{background:linear-gradient(180deg,#f9db8b 0%,#f0c155 100%);color:var(--ink);font-weight:700}
.rsvp button svg.i{width:16px;height:16px;stroke-width:2.2}
/* 모이는 사람들: 겹친 이름표 */
.gather{display:flex;align-items:center;gap:11px;margin:4px 0 6px}
.avs{display:flex}
.av{width:32px;height:32px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--ink);margin-left:-7px;letter-spacing:-.3px}
.avs .av:first-child{margin-left:0}
.av.c0{background:#f4e6c3}.av.c1{background:#ecd9a8}.av.c2{background:#f9efd6}.av.c3{background:#e5cf94}
.av.more{background:var(--ink);color:#fff}
.gather .gtxt{font-size:14px;color:var(--sub)}
.gather .gtxt b{color:var(--ink);font-weight:700}
.count{font-size:13.5px;color:var(--sub)}
details{margin-top:8px;font-size:14px}
details summary{cursor:pointer;color:var(--gold-ink);font-weight:600}
details p{margin:5px 0;overflow-wrap:anywhere;color:var(--body)}
.cancelmsg{color:var(--out)!important;font-weight:700}

/* ───── 메뉴 ───── */
.idea{background:var(--card);border-radius:14px;padding:13px 15px;margin-bottom:8px;display:flex;gap:10px;align-items:center;border:1px solid var(--line)}
.vote{border:1px solid var(--line2);background:#fff;border-radius:99px;padding:9px 15px;font-size:15px;cursor:pointer;white-space:nowrap;font-family:inherit;color:var(--body);font-weight:700;display:flex;gap:6px;align-items:center}
.vote svg.i{width:16px;height:16px}
.vote.on{background:linear-gradient(180deg,#f9db8b 0%,#f0c155 100%);border-color:#e6b548;color:var(--ink)}
.picked{background:var(--gold-t);border:1px solid var(--gold-line);border-radius:14px;padding:13px 15px;margin-bottom:12px;font-weight:700;color:var(--gold-ink);display:flex;gap:8px;align-items:center}
.miniact{display:flex;gap:12px}

/* ───── 공지 ───── */
.nt{background:var(--card);border-radius:14px;padding:14px 16px;margin-bottom:8px;border:1px solid var(--line)}
.nt .t{font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.nt .b{font-size:15px;margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}
.nt .meta{margin-top:6px}

/* ───── 대화상자 ───── */
dialog{border:0;border-radius:18px;padding:20px;width:min(92vw,440px);max-height:88vh;overflow:auto;color:var(--body);background:#fff;box-shadow:0 24px 60px rgba(11,27,58,.28)}
dialog::backdrop{background:rgba(11,27,58,.5)}
.moreList .btn{margin-top:9px}
.moreList .link{display:block;margin:14px auto 0}
.pl{display:flex;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pl .nm{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--ink);font-weight:600}
.pl .nm small{display:block;color:var(--sub);font-size:13px;font-weight:500}
.pl .star{border:0;background:none;font-size:18px;cursor:pointer;padding:4px;color:var(--gold)}
.pl.off{opacity:.55}
.miniact.wrap2{flex-wrap:wrap;gap:4px 12px;width:100%;justify-content:flex-end}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 홈의 남은 회비 카드 아래 안내, 알림 아이콘 상태 */
.balance .more{position:relative;margin-top:14px;font-size:12.5px;color:#b8c5e6;letter-spacing:.02em}
.balance .more::after{content:" →"}
.ibtn .slash{opacity:1}
.ibtn.on .slash{display:none}
.ic{display:inline-flex;align-items:center}

.link.danger{color:var(--out)}
dialog .link{display:block;margin:10px auto 0}


/* ───── 공용: 처리 중, 위험 버튼, 뼈대 화면 ───── */
.btn.loading,.rsvp button.loading,.vote.loading{opacity:.6;pointer-events:none}
.btn.danger{background:var(--out);color:#fff;box-shadow:none}
.btn.danger:active{background:#963725}
.sk{border-radius:16px;background:linear-gradient(90deg,#efe9dc 25%,#f8f4ea 40%,#efe9dc 60%);background-size:300% 100%;animation:sk 1.3s ease-in-out infinite;margin-bottom:10px}
.sk.h1{height:68px}.sk.h2{height:110px}.sk.h3{height:300px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* ───── 알림 메시지(토스트) ───── */
#toasts{position:fixed;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;z-index:60;pointer-events:none;padding:0 16px}
.toast{background:var(--ink);color:#fff;font-size:14.5px;font-weight:500;padding:12px 18px;border-radius:12px;max-width:min(440px,100%);box-shadow:0 10px 30px rgba(11,27,58,.3);animation:tin .22s ease;text-align:center}
.toast.error{background:#8e3322}
.toast.out{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ───── 팝업: 머리글 + ✕ 닫기 ───── */
dialog{padding:0}
dialog>*{padding:0 20px 20px}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;background:#fff;z-index:3;padding:18px 16px 12px 20px;margin:0 -20px 8px;border-bottom:1px solid var(--line)}
.dhead b{color:var(--ink);font-size:17px;font-weight:700;min-width:0;overflow-wrap:anywhere}
.dclose{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.dclose svg.i{width:18px;height:18px}
.uimsg{white-space:pre-line;margin:8px 0 4px;color:var(--body);font-size:15px}
dialog.sheet{margin:auto auto 0;width:min(100vw,480px);border-radius:22px 22px 0 0;max-height:80vh}
.sheetbtn{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:16px 4px;font-family:inherit;font-size:16px;color:var(--ink);font-weight:550;cursor:pointer}
.sheetbtn:last-child{border-bottom:0}
.sheetbtn.danger{color:var(--out)}
.sheetbtn:active{background:var(--bg)}

/* ───── 관리자 화면 ───── */
.adbar{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:4px 0 18px}
.adtitle{margin:0;font-size:22px;font-weight:750;color:var(--ink);letter-spacing:-.4px;line-height:1.2}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 15px}
.kpi .k{font-size:13px;color:var(--sub);font-weight:600}
.kpi .v{font-family:var(--serif);font-weight:600;font-size:28px;color:var(--ink);line-height:1.2;margin-top:2px;letter-spacing:-.5px}
.kpi .s{font-size:13px;color:var(--faint);margin-top:2px}
.kpi.warn{border-color:#efc9bf;background:#fdf3f0}
.kpi.warn .v{color:var(--out)}
.mrow{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px}
.mrow.off{opacity:.55}
.mrow .av{margin-left:0;width:40px;height:40px;font-size:12px;border-color:var(--bg)}
.mrow .mid{flex:1;min-width:0}
.mrow .nm{font-weight:650;color:var(--ink)}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.tag{font-size:12px;font-weight:650;border-radius:6px;padding:2px 7px;background:#f1ede3;color:var(--sub)}
.tag.blue{background:var(--ink);color:#fff}
.tag.gold{background:var(--gold-t);color:var(--gold-ink);border:1px solid var(--gold-line)}
.tag.warn{background:#fdeee9;color:#9a3a26}
.logrow{display:flex;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:14.5px}
.logrow .when{flex:none;width:84px;color:var(--faint);font-size:13px;padding-top:1px}
.logrow .what{color:var(--body);overflow-wrap:anywhere}
#viewAdmin .btn.ghost{margin-top:24px}


/* ───── 설정 화면 ───── */
.profile{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);margin-bottom:6px}
.av.big{width:60px;height:60px;font-size:15px;margin:0;border:0;flex:none}
.pmid{min-width:0}
.pnm{font-family:var(--serif);font-weight:600;font-size:24px;color:var(--ink);letter-spacing:-.5px;line-height:1.25}
.sgroup{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:6px}
.srow{display:flex;align-items:center;gap:13px;width:100%;padding:14px 16px;background:none;border:0;border-bottom:1px solid var(--line);font-family:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.srow:last-child{border-bottom:0}
button.srow:active{background:var(--bg)}
.sico{width:38px;height:38px;border-radius:11px;background:var(--gold-t);color:var(--gold-ink);display:grid;place-items:center;flex:none}
.smid{flex:1;min-width:0}
.st{font-weight:650;font-size:16px}
.ss{font-size:13.5px;color:var(--sub);margin-top:1px;line-height:1.45}
svg.chev{color:var(--faint);width:18px;height:18px}
.sgroup.out{margin-top:22px}
.sgroup.out .sico{background:#fdeeea;color:var(--out)}
.sgroup.out .st{color:var(--out)}
.switch{width:52px;height:32px;border-radius:99px;border:0;background:#d9d3c4;position:relative;cursor:pointer;flex:none;transition:background .2s;padding:0}
.switch .knob{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .2s}
.switch.on{background:var(--gold)}
.switch.on .knob{transform:translateX(20px)}
.switch:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px}

/* ───── 알림 켜기 안내 ───── */
.promo{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--gold-t);border:1px solid var(--gold-line);border-radius:14px;padding:12px 14px;margin-bottom:14px}
.promo .ptxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.promo b{color:var(--ink);font-size:15px}
.promo span{font-size:13.5px;color:var(--gold-ink)}
.promo .pbtn{display:flex;align-items:center;gap:6px;flex:none}
.promo .btn.small{padding:10px 16px}

.switch.busy{opacity:.55;pointer-events:none}
.switch.busy .knob{animation:kpulse .9s ease-in-out infinite}
@keyframes kpulse{50%{transform:translateX(5px)}}
.switch.on.busy .knob{animation:none}

/* 로그인 화면 문구(.tag)가 관리자 화면의 역할 태그(.tag)와 이름이 겹쳐 회색 박스가 생기던 것을 바로잡는다 */
.stage p.tag{background:none;border:0;border-radius:0;padding:0;font-weight:400;font-size:14px;color:var(--sub);letter-spacing:.02em}

/* ───── 홈의 남은 회비: 작은 한 줄 카드 (큰 남색 카드는 회비 탭에서만) ───── */
.balance.mini{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:16px;padding:14px 18px;margin-bottom:12px;box-shadow:var(--shadow);overflow:visible}
.balance.mini .label{color:var(--sub);padding-top:0;font-size:13.5px;letter-spacing:0}
.balance.mini .label::before{display:none}
.balance.mini .num{font-size:30px;margin-top:1px;color:var(--ink);letter-spacing:-.8px}
.balance.mini .won{font-size:16px;opacity:1;color:var(--sub)}
.balance.mini .more{margin:0;color:var(--gold-ink);font-weight:650;font-size:14px;white-space:nowrap}
.balance.mini:active{background:var(--bg)}

/* 남은 회비: 홈 맨 위의 얇은 한 줄 (모임 카드와 경쟁하지 않고, 항상 보이게) */
.balance.mini{padding:12px 16px;margin-bottom:14px;border-radius:14px}
.balance.mini .bl{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.balance.mini .label{font-size:14px}
.balance.mini .num{font-size:24px;margin-top:0;line-height:1.2}
.balance.mini .won{font-size:14px}

/* ───── 총무 입력 폼은 평소에 접어 둔다 ───── */
details.foldadmin{margin-bottom:14px}
details.foldadmin>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;
  background:var(--gold-t);border:1px solid var(--gold-line);border-radius:12px;color:var(--gold-ink);font-weight:700;font-size:15px}
details.foldadmin>summary::-webkit-details-marker{display:none}
details.foldadmin>summary::before{content:"+";font-size:20px;line-height:1;font-weight:500}
details.foldadmin[open]>summary{margin-bottom:10px}
details.foldadmin[open]>summary::before{content:"\2212"}
details.foldadmin>.admin{margin-bottom:0}
#evAdmin>details.foldadmin{margin-bottom:10px}
/* 총무: 장부 행을 누르면 메뉴가 열린다 */
.ledhint{margin:-2px 2px 10px}
.item.tap{cursor:pointer}
.item.tap:active{background:var(--bg)}
.item.tap:focus-visible{outline:2px solid var(--gold-d);outline-offset:2px}

/* ───── 메뉴 투표: 모임 D-Day + 마감 ───── */
.roundhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 2px 6px}
.roundhead .rl{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--ink);letter-spacing:-.4px}
.roundhead .badge{font-size:15px;padding:5px 13px}
.rdnote{margin:0 2px 12px}
h2 .dd{margin-left:8px;font-size:12.5px;font-weight:700;letter-spacing:.02em;background:var(--gold-t);color:var(--gold-ink);border:1px solid var(--gold-line);border-radius:99px;padding:2px 9px}
.idea.pickedrow{border-color:var(--gold-line);background:var(--gold-t)}
.title .pk{margin-left:8px;vertical-align:2px}
.vote:disabled{opacity:.6;cursor:default}

/* ───── 공지: 홈 맨 위의 큰 카드 / 확인 후 얇은 띠 ───── */
.nbig{position:relative;overflow:hidden;color:#fff;border-radius:20px;padding:18px 18px 14px;margin-bottom:14px;
  background:linear-gradient(140deg,#16367a 0%,#0b1b3a 70%);border:1px solid rgba(240,193,85,.45);box-shadow:0 14px 30px rgba(11,27,58,.28)}
.nbig::after{content:"";position:absolute;right:-34px;top:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(240,193,85,.28),rgba(240,193,85,0) 70%);pointer-events:none}
.nhead{display:flex;align-items:center;gap:10px;position:relative}
.nico{width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;flex:none;box-shadow:0 4px 10px rgba(240,193,85,.4)}
.nico.sm{width:30px;height:30px;box-shadow:none}
.nico svg.i{width:18px;height:18px}
.nnew{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--gold)}
.nwhen{margin-left:auto;font-size:13px;color:#aebbd9;flex:none}
.nbig .ntitle{font-size:21px;font-weight:800;line-height:1.35;letter-spacing:-.4px;margin:12px 0 6px;position:relative;overflow-wrap:anywhere}
.nbig .nbody{font-size:15.5px;line-height:1.65;color:#dfe6f6;white-space:pre-wrap;overflow-wrap:anywhere;position:relative}
.nact{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:14px;position:relative}
.nlink{border:0;background:none;color:#aebbd9;font-family:inherit;font-size:14px;cursor:pointer;padding:8px 2px}
.nbtn{border:0;border-radius:11px;padding:11px 20px;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;color:var(--ink);
  background:linear-gradient(180deg,#f9db8b 0%,#f0c155 100%);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.nstrip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;font-family:inherit;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:14px;padding:10px 14px;margin-bottom:12px}
.nstrip .nst{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:650}
.nstrip .nwhen{color:var(--faint)}
.nstrip svg.i{width:16px;height:16px;color:var(--faint)}
.nstrip:active{background:var(--bg)}

/* 메뉴 투표 제목은 고딕 (명조는 로고와 숫자에만) */
.roundhead .rl{font-family:inherit;font-weight:800;font-size:19px;letter-spacing:-.4px}

/* ───── 색 규칙: 골드 = 눈에 띄어야 하는 것(공지·남은 회비), 남색 = 글자 ───── */
.nbig{color:var(--ink);background:linear-gradient(145deg,#fbe19a 0%,#f0c155 58%,#e4ad40 100%);border:1px solid rgba(190,138,34,.35);box-shadow:0 14px 30px rgba(223,168,60,.38)}
.nbig::after{background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
.nbig .nico{background:var(--ink);color:#f6cc62;box-shadow:0 4px 10px rgba(11,27,58,.25)}
.nbig .nnew{color:var(--ink);background:rgba(11,27,58,.1);border-radius:99px;padding:3px 10px;letter-spacing:.06em}
.nbig .nwhen{color:rgba(11,27,58,.6)}
.nbig .nbody{color:rgba(11,27,58,.86)}
.nbig .nlink{color:rgba(11,27,58,.7)}
.nbig .nbtn{background:var(--ink);color:#fff;box-shadow:0 6px 14px rgba(11,27,58,.3)}

.balance{color:var(--ink);background:linear-gradient(145deg,#fbe19a 0%,#f0c155 58%,#e4ad40 100%);box-shadow:0 14px 30px rgba(223,168,60,.38)}
.balance .label{color:rgba(11,27,58,.7)}
.balance .label::before{background:var(--ink)}
.balance .more{color:rgba(11,27,58,.7)}

.nbig .nwhen{color:rgba(11,27,58,.72);font-weight:600}

/* ───── 홈 위쪽 덩어리를 가볍게: 공지 카드는 낮게, 알림 안내는 한 줄로 ───── */
.nbig{padding:14px 16px 12px;margin-bottom:12px;border-radius:18px}
.nbig .ntitle{font-size:19px;margin:9px 0 4px}
.nbig .nbody{font-size:15px;line-height:1.55}
.nact{margin-top:10px;gap:10px}
.nbtn{padding:9px 16px;font-size:14px;border-radius:10px}
.nlink{padding:6px 2px;font-size:13.5px}
.nico{width:32px;height:32px}
.promo{padding:8px 12px;margin-bottom:12px;border-radius:12px}
.promo b{font-size:14.5px;font-weight:650}
.promo .btn.small{padding:8px 14px;font-size:14px;border-radius:10px}
.promo .link{font-size:13.5px}

/* ───── 메뉴 투표 마감일 표시 ───── */
.ddl{display:inline-block;margin:2px 2px 6px;padding:6px 13px;border-radius:99px;background:var(--gold-t);border:1px solid var(--gold-line);color:var(--gold-ink);font-weight:700;font-size:14px}
.ddl.off{background:#f1ede3;border-color:var(--line2);color:var(--sub)}
h2 .dd.off{background:#f1ede3;border-color:var(--line2);color:var(--sub)}

/* ───── 모임 카드: 참석 현황 (묶음별 이름 알약) ───── */
details.who{margin-top:6px}
.grp{margin:12px 0 2px}
.grp .gl{font-size:13px;color:var(--sub);font-weight:700;margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.pchip{font-size:14px;padding:5px 12px;border-radius:99px;color:var(--ink);background:var(--gold-t);border:1px solid var(--gold-line)}
.pchip.maybe{background:#fff}
.pchip.no{background:#f1ede3;border-color:var(--line2);color:var(--sub)}
.pchip.wait{background:transparent;border:1px dashed var(--line2);color:var(--sub)}

.btn.ghost.decide{margin:4px 0 14px;padding:11px;font-size:15px}

.rcpt{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 8px 2px 6px;border-radius:999px;border:1px solid var(--gold-line);background:var(--gold-t);color:var(--gold-ink);font:inherit;font-size:12px;font-weight:650;cursor:pointer;vertical-align:middle}
.rcpt svg.i{width:13px;height:13px}
.thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;border:1px solid var(--line);background:var(--bg);cursor:pointer;flex:none;display:block;padding:0}
#boxReceipt .btn{margin-top:4px}
dialog.photo{width:min(96vw,640px)}
dialog.photo img{display:block;width:100%;max-height:72vh;object-fit:contain;border-radius:10px;background:var(--bg)}
.btn.small.picked{border-color:var(--gold-line);background:var(--gold-t);color:var(--gold-ink)}
/* 공지 가독성: 줄바꿈 유지 · 글줄 간격 · 입력칸 */
textarea{width:100%;padding:12px 13px;border:1px solid var(--line2);border-radius:11px;font-size:16px;line-height:1.55;background:#fff;font-family:inherit;color:var(--ink);resize:vertical;min-height:96px;transition:border-color .15s, box-shadow .15s}
textarea::placeholder{color:var(--faint)}
textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(220,159,51,.25)}
.nt{padding:16px 18px}
.nt .t{font-size:17px;line-height:1.4;letter-spacing:-.2px}
.nt .b{font-size:15.5px;line-height:1.7;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);color:var(--body);white-space:pre-line}
.nt .meta{margin-top:10px}
.nbig .nbody{white-space:pre-line;line-height:1.7}

/* 사진 붙이기: 입력칸 안의 카메라 아이콘 + 아래 미리보기 줄 */
.inline .field{position:relative;flex:1;min-width:0}
.inline .field input{padding-right:54px;min-width:0}
.camb{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:10px;border:0;background:var(--gold-t);color:var(--gold-ink);display:grid;place-items:center;cursor:pointer;padding:0}
.camb svg.i{width:21px;height:21px}
.camb:active,.camb.on{background:var(--gold-line)}
.attach{flex-basis:100%;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 14px 8px 8px}
.attach[hidden]{display:none}
.attach .thumb{width:48px;height:48px;cursor:default}
.attach .atxt{flex:1;font-size:14.5px;font-weight:600;color:var(--ink)}
.attach .link{margin:0;font-size:14px}
.btn.ghost.camadd{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px}
.btn.ghost.camadd svg.i{width:19px;height:19px}
#boxReceipt .attach{margin-top:4px}

/* 제목 줄 + 작은 도구 버튼 (큰 버튼 블록 대신) */
.sechead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:26px 2px 12px}
.sechead h2{margin:0}
.sechead .tools{display:flex;gap:8px;flex:none}
.pill{border:1px solid var(--line2);background:#fff;border-radius:99px;padding:8px 14px;font:inherit;font-size:13.5px;font-weight:650;color:var(--ink);cursor:pointer;line-height:1.2;white-space:nowrap}
.pill:active{transform:translateY(1px)}
.pill.gold{background:var(--gold-t);border-color:var(--gold-line);color:var(--gold-ink)}
.pill.sm{padding:6px 12px;font-size:13px}
.pill.decide{display:block;margin:2px 0 14px}
details.foldadmin.hidesum>summary{display:none}
details.foldadmin.hidesum{margin-bottom:6px}
details.foldadmin.hidesum[open]{margin-bottom:12px}
#evAdmin>details.foldadmin.hidesum{margin-bottom:0}
.miniact{align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
/* 빈 목록 안내 카드 */
.emptyc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:30px 20px;background:var(--card);border:1px dashed var(--line2);border-radius:16px;margin-bottom:8px}
.emptyc .eico{width:46px;height:46px;border-radius:50%;background:var(--gold-t);color:var(--gold-ink);display:grid;place-items:center;margin-bottom:4px}
.emptyc .eico svg.i{width:22px;height:22px}
.emptyc .et{font-size:16px;font-weight:700;color:var(--ink)}
.emptyc .es{font-size:14px;line-height:1.55;color:var(--sub);max-width:260px;overflow-wrap:anywhere}
/* 공지 카드: 제목 · 날짜 한 줄 */
.nthead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.nthead .ntdate{flex:none;font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.ntfoot{display:flex;justify-content:flex-end;margin-top:6px}
.link.sub{color:var(--faint);font-size:13px;font-weight:500}

.ev .top .rt{display:flex;align-items:center;gap:10px}

.backrow{display:flex;align-items:center;gap:10px}
.backbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.backbtn svg.i{width:18px;height:18px}
.backbtn:active{background:var(--bg)}
/* 한글 줄바꿈: 단어 중간에서 끊지 않고(keep-all), 마지막 줄에 글자 하나만 남지 않게 줄 길이를 고르게(balance) */
.emptyc .es,.emptyc .et,.nt .b,.nt .t,.nbig .nbody,.nbig .ntitle,.hint,.uimsg,.ev .line,.foot,.rdnote,.ddl{word-break:keep-all;overflow-wrap:break-word}
.emptyc .es,.emptyc .et,.hint,.uimsg,.rdnote{text-wrap:balance}
.nt .b,.nbig .nbody,.ev .line{text-wrap:pretty}
.emptyc .es{max-width:300px}

/* 총무 할 일 카드 (홈) */
.todo{background:linear-gradient(180deg,#fffdf6 0%,#fff 60%);border:1px solid var(--gold-line);border-radius:18px;padding:14px 16px 4px;margin-bottom:14px;box-shadow:0 8px 22px rgba(223,168,60,.16)}
.todo .th{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.todo .th b{font-size:15.5px;color:var(--ink);letter-spacing:-.2px}
.todo .cnt{font-size:12.5px;font-weight:700;color:var(--gold-ink);background:var(--gold-t);border:1px solid var(--gold-line);border-radius:99px;padding:2px 10px}
.todo .ti{display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;border:0;border-top:1px solid var(--line);background:none;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.todo .ti:first-of-type{border-top:0}
.todo .ti:active{background:rgba(240,193,85,.1)}
.todo .tdot{width:38px;height:38px;border-radius:12px;background:var(--gold-t);color:var(--gold-ink);display:grid;place-items:center;flex:none}
.todo .tdot svg.i{width:20px;height:20px}
.todo .ti.urgent .tdot{background:linear-gradient(135deg,#f9db8b,#f0c155);color:var(--ink)}
.todo .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;word-break:keep-all;overflow-wrap:break-word}
.todo .tx b{font-size:15.5px;font-weight:700;line-height:1.35}
.todo .tx span{font-size:13.5px;color:var(--sub);line-height:1.4}
.todo .ti>.ic{color:var(--faint);flex:none}
.todo .ti>.ic svg.i{width:16px;height:16px}
.todo .tdone{display:flex;align-items:center;gap:12px;padding:12px 0 14px;font-size:15px;font-weight:600;color:var(--sub)}
.todo.done{box-shadow:none;background:#fff}

/* 총무 환영 · 역할 안내 카드 */
.welcome{background:linear-gradient(150deg,#fff8e4 0%,#fff 55%);border:1px solid var(--gold-line);border-radius:20px;padding:20px 18px 18px;margin-bottom:14px;box-shadow:0 10px 26px rgba(223,168,60,.18);position:relative;overflow:hidden}
.welcome::after{content:"";position:absolute;right:-40px;top:-46px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(240,193,85,.28),rgba(240,193,85,0) 70%);pointer-events:none}
.welcome .wscript{font-family:"Great Vibes","Pretendard Variable",cursive;font-size:46px;line-height:1.1;color:var(--gold-ink);letter-spacing:.5px;position:relative}
.welcome .wlead{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.3px;margin-top:6px;position:relative;word-break:keep-all}
.welcome .wsub{font-size:14.5px;color:var(--sub);margin:4px 0 12px;position:relative}
.welcome .wlist{list-style:none;margin:0;padding:0;position:relative}
.welcome .wi{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--gold-line)}
.welcome .wn{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#f9db8b,#f0c155);color:var(--ink);font-weight:800;font-size:13.5px;display:grid;place-items:center;margin-top:1px;font-family:Georgia,"Pretendard Variable",serif}
.welcome .wtx{display:flex;flex-direction:column;gap:2px;word-break:keep-all;overflow-wrap:break-word}
.welcome .wtx b{font-size:15.5px;color:var(--ink);line-height:1.35}
.welcome .wtx span{font-size:14px;color:var(--body);line-height:1.55;text-wrap:pretty}
.welcome .wfoot{font-size:13.5px;color:var(--sub);border-top:1px solid var(--gold-line);padding-top:12px;margin-top:2px;position:relative;word-break:keep-all}
.welcome .wok{width:100%;margin-top:12px;padding:13px;font-size:16px;position:relative}
.todo .trt{display:flex;align-items:center;gap:10px}
.todo .trt .link{padding:2px 0}

/* 선택 시트: 아이콘 · 제목 · 설명 · 위험 구역 */
dialog.sheet .dhead b{display:flex;align-items:center;gap:10px}
.shav{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#f9db8b,#f0c155);color:var(--ink);display:grid;place-items:center;font-size:15px;font-weight:800;flex:none}
.shchips{display:flex;gap:6px;flex-wrap:wrap;padding:0 20px 6px}
.shchips[hidden]{display:none}
.shchip{font-size:12.5px;font-weight:650;border-radius:99px;padding:3px 10px;background:#f1ede3;color:var(--sub)}
.shchip.gold{background:var(--gold-t);color:var(--gold-ink);border:1px solid var(--gold-line)}
.sheetbtn{display:flex;align-items:center;gap:14px;padding:12px 4px}
.sheetbtn .sico{width:40px;height:40px;border-radius:12px;background:var(--gold-t);color:var(--gold-ink);display:grid;place-items:center;flex:none}
.sheetbtn .sico svg.i{width:20px;height:20px}
.sheetbtn.danger .sico{background:#fbeceb;color:var(--out)}
.sheetbtn .stx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;word-break:keep-all;overflow-wrap:break-word}
.sheetbtn .stx b{font-size:16px;font-weight:650;color:var(--ink)}
.sheetbtn.danger .stx b{color:var(--out)}
.sheetbtn .stx span{font-size:13.5px;font-weight:400;color:var(--sub);line-height:1.4}
.sheetbtn .schev{color:var(--faint);flex:none;display:grid}
.sheetbtn .schev svg.i{width:16px;height:16px}
.shsep{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--faint);padding:14px 4px 4px;border-top:1px solid var(--line);margin-top:6px}

/* 관리자 화면: 요약 띠 · 그룹 · 한 줄 멤버 */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 4px;margin-bottom:6px}
.kpis .kcell{text-align:center;padding:2px 4px;border-left:1px solid var(--line)}
.kpis .kcell:first-child{border-left:0}
.kcell .kn{font-family:var(--serif);font-size:25px;font-weight:600;color:var(--ink);line-height:1.2}
.kcell .kl{font-size:12px;color:var(--sub);margin-top:2px;word-break:keep-all}
.kcell.hl .kn{color:var(--gold-ink)}
.mgroup{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.05em;margin:22px 2px 8px}
.mgroup .mcount{font-weight:500;color:var(--faint);letter-spacing:0}
.mrow{padding:10px 12px 10px 12px;margin-bottom:6px}
.mrow .av{width:38px;height:38px;font-size:12px}
.mrow .nmline{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mrow .nm{font-size:16px}
.mrow .tag{margin:0}
.mrow .wait{font-size:12.5px;color:var(--faint);margin-top:1px}
.tag.blue{background:#e6ebf5;color:var(--ink)}

.morelog{display:block;margin:8px auto 0}

/* 아래 탭바: 5칸 + 새 공지 점 */
.tabs button .ndot{position:absolute;top:7px;left:calc(50% + 6px);width:8px;height:8px;border-radius:50%;background:var(--gold-d,#dc9f33);border:1.5px solid #fff}
.tabs button .ndot[hidden]{display:none}
.tquick{display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding:12px 0 12px;margin-top:2px}
.tquick .pill{flex:1;text-align:center;min-width:0}

/* 공지 띠: 아이콘은 또렷하게(예전엔 칸 안의 흐린 회색 규칙이 같이 걸렸음) + "공지" 글자 */
.nstrip .nico{background:var(--gold-t);color:var(--gold-ink);border:1px solid var(--gold-line)}
.nstrip .nico svg.i{width:17px;height:17px;color:var(--gold-ink)}
.nstrip .nlbl{flex:none;font-size:12px;font-weight:700;color:var(--gold-ink);background:var(--gold-t);border:1px solid var(--gold-line);border-radius:6px;padding:1px 7px}
.welcome .wtx span{white-space:pre-line}

/* 입금 금액 공개 스위치 (총무, 회비 화면) */
.visrow{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:12px 0 4px}
.visrow .vtx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;word-break:keep-all;overflow-wrap:break-word}
.visrow .vtx b{font-size:15px;color:var(--ink)}
.visrow .vtx span{font-size:13px;color:var(--sub);line-height:1.45}
.visrow[hidden]{display:none}
.pubtag{margin-left:8px;vertical-align:middle}

/* 환영 · 이용 안내 (옆으로 넘기는 한 페이지) */
.wpage{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff8e4 0%,var(--bg) 40%)}
.wpage[hidden]{display:none}
.wtop{display:flex;justify-content:flex-end;padding:calc(10px + env(safe-area-inset-top)) 18px 0;min-height:44px}
.wtop .link{font-size:14.5px}
.wpager{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline:none}
.wpager::-webkit-scrollbar{display:none}
.wslide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;display:flex;justify-content:center}
.wsin{width:100%;max-width:480px;padding:12px 26px 24px;display:flex;flex-direction:column;align-self:flex-start}
.wscript{font-family:"Great Vibes","Pretendard Variable",cursive;font-size:72px;line-height:1.1;color:var(--gold-ink);letter-spacing:.5px;margin-top:8vh}
.wlead{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.4px;margin-top:14px;word-break:keep-all}
.wintro{font-size:16px;line-height:1.7;color:var(--body);margin:14px 0 0;white-space:pre-line;word-break:keep-all}
.whint{margin-top:34px;font-size:14px;color:var(--gold-ink);font-weight:650}
.wkick{font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--gold-ink);margin-top:8px}
.wtitle{font-size:23px;font-weight:800;color:var(--ink);letter-spacing:-.4px;margin:6px 0 18px;word-break:keep-all;line-height:1.35}
.wslide .wlist{list-style:none;margin:0;padding:0}
.wslide .wi{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--gold-line)}
.wslide .wn{flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#f9db8b,#f0c155);color:var(--ink);font-weight:800;font-size:15px;display:grid;place-items:center;margin-top:1px;font-family:Georgia,"Pretendard Variable",serif}
.wslide .wn.sm{width:24px;height:24px;font-size:13px}
.wslide .wtx{display:flex;flex-direction:column;gap:3px;word-break:keep-all;overflow-wrap:break-word}
.wslide .wtx b{font-size:16.5px;color:var(--ink);line-height:1.35}
.wslide .wtx span{font-size:14.5px;color:var(--body);line-height:1.6;white-space:pre-line}
.wic{width:56px;height:56px;border-radius:18px;background:linear-gradient(135deg,#f9db8b,#f0c155);color:var(--ink);display:grid;place-items:center;margin:10px 0 14px;box-shadow:0 8px 20px rgba(223,168,60,.3)}
.wic svg.i{width:28px;height:28px}
.wsteps{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.wsteps li{display:flex;gap:12px;align-items:flex-start}
.wsteps .wst{font-size:15.5px;line-height:1.65;color:var(--ink);white-space:pre-line;word-break:keep-all;overflow-wrap:break-word}
.wbar{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 24px calc(18px + env(safe-area-inset-bottom));max-width:480px;width:100%;align-self:center}
.wbar .btn{width:100%;padding:15px;font-size:17px}
.wdots{display:flex;gap:7px}
.wdots i{width:7px;height:7px;border-radius:99px;background:var(--line2);transition:width .2s,background .2s}
.wdots i.on{width:22px;background:var(--gold)}
/* 사용법 쪽의 작은 그림 예시 */
.mock{pointer-events:none;user-select:none;background:#fff;border:1px solid var(--gold-line);border-radius:16px;padding:14px;box-shadow:0 8px 22px rgba(223,168,60,.14)}
.mock .mseg{display:flex;border:1px solid var(--line2);border-radius:12px;overflow:hidden}
.mock .mseg span{flex:1;text-align:center;padding:12px 0;font-weight:650;font-size:15px;color:var(--ink)}
.mock .mseg span.on{background:linear-gradient(180deg,#f9db8b,#f0c155)}
.mock .mvrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.mock .mvrow+.mvrow{border-top:1px solid var(--line)}
.mock .mvrow b{font-size:16px;color:var(--ink)}
.mock .mtx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mock .mtx span{font-size:13px;color:var(--sub)}
.mock .mvote{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:99px;padding:7px 14px;font-weight:700;color:var(--ink)}
.mock .mvote.on{background:linear-gradient(180deg,#f9db8b,#f0c155);border-color:var(--gold-line)}
.mock .mvote svg.i{width:17px;height:17px}
.mock .mswitch{width:52px;height:32px;border-radius:99px;background:#d9d3c4;position:relative;flex:none}
.mock .mswitch.on{background:var(--gold)}
.mock .mswitch i{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.mock .mswitch.on i{transform:translateX(20px)}
.mock .mamt{color:var(--exp);font-family:var(--serif)}
.mock .mdot{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#f9db8b,#f0c155);display:grid;place-items:center;flex:none;color:var(--ink)}
.mock .mdot svg.i{width:20px;height:20px}
.mock .mq{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.mock .mvrow+.mq{border-top:1px solid var(--line);padding-top:10px}
.mock .mq span{flex:1;text-align:center;border:1px solid var(--line2);border-radius:99px;padding:7px 8px;font-size:13px;font-weight:650;color:var(--ink);white-space:nowrap}
.mock .mq span.gold{background:var(--gold-t);border-color:var(--gold-line);color:var(--gold-ink)}

/* 장부 입력 폼: 입금/지출 선택 버튼 · 금액 칸 · 빠른 금액 */
.kseg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 6px}
.kseg button{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border:1px solid var(--line2);border-radius:12px;background:#fff;font:inherit;font-size:15px;font-weight:650;color:var(--sub);cursor:pointer}
.kseg button svg.i{width:16px;height:16px}
.kseg button[data-k="in"].on{background:#fdf1ef;border-color:#f0c6c1;color:var(--dep)}
.kseg button[data-k="out"].on{background:#eef3fc;border-color:#bfd0ee;color:var(--exp)}
.amtbox{position:relative}
.amtbox input{padding-right:44px;font-size:20px;font-weight:650;font-family:var(--serif)}
.amtbox .won{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--sub);font-size:16px;font-weight:600}
.qamt{display:flex;gap:8px;margin:8px 0 2px}
.qamt button{flex:1;padding:9px 0;border:1px solid var(--gold-line);border-radius:99px;background:var(--gold-t);color:var(--gold-ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.qamt button:active{background:var(--gold-line)}

.mock .mamt2{color:var(--ink);font-family:var(--serif);font-size:20px}
.mock .mseg+.mvrow{margin-top:8px}

.wlead .bn{font-family:var(--serif);font-weight:600;color:var(--gold-ink);letter-spacing:-.2px}

.wsteps .bt{color:var(--gold-ink);font-weight:800}

/* 머리글: 이름 + 역할 이름표 · 관리자 전용 버튼 */
header .hello{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hchip{font-size:11.5px;font-weight:700;border-radius:6px;padding:1px 7px;background:#e6ebf5;color:var(--ink)}
.hchip.gold{background:var(--gold-t);color:var(--gold-ink);border:1px solid var(--gold-line)}
.chip.adm{display:inline-flex;align-items:center;gap:6px;background:var(--gold-t);border-color:var(--gold-line);color:var(--gold-ink)}
.chip.adm svg.i{width:16px;height:16px}

/* 공지 탭: 머리(배너) · 카드 목록 · 상세 */
.pagehead{display:flex;align-items:center;gap:12px;margin:6px 0 16px}
.pagehead .phic{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#f9db8b,#f0c155);color:var(--ink);display:grid;place-items:center;flex:none;box-shadow:0 6px 16px rgba(223,168,60,.3)}
.pagehead .phic svg.i{width:22px;height:22px}
.pagehead .pht{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pagehead .pht b{font-size:19px;color:var(--ink);letter-spacing:-.3px}
.pagehead .pht span{font-size:13.5px;color:var(--sub)}
.ntc{position:relative;display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px 16px;margin-bottom:10px;cursor:pointer;font:inherit;color:var(--ink);box-shadow:0 1px 2px rgba(11,27,58,.04),0 6px 16px rgba(11,27,58,.05)}
.ntc:active{background:var(--bg)}
.ntc.pinned{background:linear-gradient(180deg,#fffbef,#fff);border-color:var(--gold-line)}
.ntc .ntcm{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;word-break:keep-all;overflow-wrap:break-word}
.ntc .ntct{font-size:16.5px;font-weight:700;line-height:1.4;display:flex;align-items:center;gap:6px}
.ntc .ntpin{color:var(--gold-ink);display:inline-grid}
.ntc .ntpin svg.i{width:16px;height:16px}
.ntc .ntcp{font-size:14px;color:var(--sub);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ntc .ntcd{font-size:12.5px;color:var(--faint)}
.ntctag{align-self:flex-start;font-size:12px;font-weight:700;color:var(--gold-ink);background:var(--gold-t);border:1px solid var(--gold-line);border-radius:6px;padding:1px 8px;display:inline-block}
.ntc .ntcdot{position:absolute;top:13px;right:14px;width:9px;height:9px;border-radius:50%;background:var(--gold-d,#dc9f33)}
.ntc>.ic{color:var(--faint);flex:none}
.ntc>.ic svg.i{width:16px;height:16px}
.ntdbar{display:flex;align-items:center;gap:12px;margin:4px 0 14px;font-weight:700;color:var(--sub);font-size:15px}
.ntdd{font-size:13px;color:var(--faint);margin-bottom:6px}
.ntdt{font-size:24px;line-height:1.35;letter-spacing:-.4px;margin:6px 0 14px;color:var(--ink);word-break:keep-all;overflow-wrap:break-word}
.ntdl{border-top:1px solid var(--line);margin-bottom:16px}
.ntdtext{font-size:15.5px;line-height:1.85;color:#374151;overflow-wrap:break-word}
.ntdtext .ntl{min-height:1px}
.ntdtext .ntl.gap{height:1em}
.ntdtext .ntl.head{font-weight:800;color:var(--ink);font-size:17px;margin-top:6px}
.ntdtext .ntl.bullet,.ntdtext .ntl.num{padding-left:1.7em;text-indent:-1.15em;word-break:keep-all}
.ntdtext .bt{color:var(--gold-ink);font-weight:800}
.ntdact{display:flex;gap:8px;margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.ntdbtn{margin-top:26px}
.pill.danger{color:var(--out);border-color:#efc9bf;background:#fdf3f0}

/* 낸 사람: 멤버 이름 버튼 */
.whochips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.wchip{border:1px solid var(--line2);background:#fff;color:var(--ink);border-radius:99px;padding:7px 13px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.wchip:active{background:var(--gold-t)}
.wchip.on{background:linear-gradient(180deg,#f9db8b,#f0c155);border-color:var(--gold-line)}

.srow .st,.srow .ss{word-break:keep-all;overflow-wrap:break-word}

/* 설정 맨 아래: 로고 · 이름 · 문의 안내 */
.sfoot{display:flex;flex-direction:column;align-items:center;gap:4px;margin:34px 0 18px;text-align:center}
.sfoot img{opacity:.75}
.sfoot .sfname{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--ink);letter-spacing:-.3px}
.sfoot p{margin:2px 0 0;font-size:13px;color:var(--faint);word-break:keep-all}

/* 장부 내역: 월별 묶음 · 날짜 소제목 · 필터 */
.lfilter{display:flex;gap:6px;background:#f1ede3;border-radius:12px;padding:4px;margin:0 0 12px}
.lfilter[hidden]{display:none}
.lfilter button{flex:1;border:0;background:none;border-radius:9px;padding:9px 0;font:inherit;font-size:14.5px;font-weight:650;color:var(--sub);cursor:pointer}
.lfilter button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(11,27,58,.12)}
.lmonth{margin-bottom:10px}
.lmh{width:100%;display:flex;align-items:center;gap:10px;padding:14px 14px 14px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.lmonth.open .lmh{border-color:var(--gold-line);background:linear-gradient(180deg,#fffbef,#fff)}
.lmh .lmt{font-family:var(--serif);font-weight:700;font-size:19px;letter-spacing:-.3px;flex:none}
.lmh .lms{flex:1;min-width:0;text-align:right;font-size:13px;color:var(--sub);word-break:keep-all}
.lmh>.ic{color:var(--faint);flex:none;display:grid}
.lmh>.ic svg.i{width:16px;height:16px;transition:transform .2s}
.lmonth.open .lmh>.ic svg.i{transform:rotate(90deg)}
.lmbody{padding-top:4px}
.lmbody[hidden]{display:none}
.ldate{font-size:12.5px;font-weight:700;color:var(--faint);margin:12px 6px 6px;letter-spacing:.02em}
.lmbody .item{padding:11px 14px}

/* 같은 날 내역 묶음 (접고 펼치기) */
.ldg{margin:0 0 8px}
.ldh{width:100%;display:flex;align-items:center;gap:10px;padding:10px 6px 8px;background:none;border:0;border-bottom:1px solid var(--line);font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.ldh .ldt{font-size:14.5px;font-weight:800;flex:none}
.ldh .lds{flex:1;min-width:0;text-align:right;font-size:12.5px;color:var(--sub);word-break:keep-all}
.ldh>.ic{color:var(--faint);flex:none;display:grid}
.ldh>.ic svg.i{width:14px;height:14px;transition:transform .2s}
.ldg.open .ldh>.ic svg.i{transform:rotate(90deg)}
.ldb{padding-top:8px}
.ldb[hidden]{display:none}

/* 지난 모임: 한 줄 요약 → 누르면 카드 펼침 */
.evwrap{margin-bottom:8px}
.evrow{width:100%;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.evrow .evrd{font-weight:800;font-size:15.5px;flex:none}
.evrow .evri{flex:1;min-width:0;text-align:right;font-size:13.5px;color:var(--sub);word-break:keep-all}
.evrow .evri.off{color:var(--out)}
.evrow>.ic{color:var(--faint);flex:none;display:grid}
.evrow>.ic svg.i{width:15px;height:15px;transition:transform .2s}
.evwrap.open .evrow{border-color:var(--gold-line);background:linear-gradient(180deg,#fffbef,#fff);margin-bottom:8px}
.evwrap.open .evrow>.ic svg.i{transform:rotate(90deg)}
.evwrap .ev[hidden]{display:none}

#viewLogin .rule{margin-bottom:30px}   /* 로그인: 문구를 없앤 뒤에도 폼과의 간격 유지 */