모통 — 모임의 모든 게 모통에

신청자 정보를 입력하세요. (실제로는 외부 신청 폼에서 들어옵니다)

가입 인사말

</div>
    <div class="ctas">
      <button class="cta" onclick="closeModal('modal-apply')">취소</button>
      <button class="cta on" onclick="saveApplicant()">신청 추가</button>
    </div>
  </div>
</div>

<div class="modal-bg" id="modal-transfer">
  <div class="modal" id="modal-transfer-inner"></div>
</div>

<div class="modal-bg" id="modal-groups">
  <div class="modal">
    <h3>내가 가입한 모임</h3>
    <p style="color:var(--sub);font-size:.9em;margin:-6px 0 12px">모임 카드를 탭하면 그 모임으로 전환됩니다</p>
    <div id="groups-list" style="display:flex;flex-direction:column;gap:10px;max-height:55vh;overflow:auto"></div>
    <div style="display:flex;flex-direction:column;gap:8px;margin-top:14px">
      <button class="cta on" onclick="joinAnotherGroup()">+ 다른 모임 참여 (초대 코드)</button>
      <button class="cta line" onclick="closeModal('modal-groups');showAuth('group-screen');document.querySelector('#group-screen').scrollIntoView();switchGroupTab('create')">+ 새 모임 만들기</button>
      <button class="cta line" onclick="closeModal('modal-groups')">닫기</button>
    </div>
  </div>
</div>

<div class="modal-bg" id="modal-claim-tx">
  <div class="modal" style="max-width:420px">
    <h3>내 회비 내역 찾기</h3>
    <p style="color:var(--sub);font-size:.92em;text-align:center;margin:-6px 0 12px">
      이미 등록된 회비 내역 중 본인 것을 골라주세요.<br>
      체크한 항목은 <b style="color:var(--coral)">총무 검수</b> 후 본인 거래로 확정됩니다.
    </p>
    <div id="claim-list" style="display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto;padding:4px"></div>
    <div style="display:flex;gap:10px;margin-top:14px">
      <button class="cta line" style="flex:1" onclick="closeModal('modal-claim-tx')">나중에</button>
      <button class="cta on" style="flex:1.5" id="claim-confirm-btn" onclick="confirmClaim()">선택 항목 신청</button>
    </div>
  </div>
</div>

<div class="modal-bg" id="modal-edit-group">
  <div class="modal" style="max-width:380px">
    <h3>모임 정보 수정</h3>
    <p style="color:var(--sub);font-size:.9em;text-align:center;margin:-6px 0 14px">상위 단체와 모임 이름을 자유롭게 바꿀 수 있어요</p>
    <div class="form-row">
      <label>상위 단체 (선택)</label>
      <input type="text" id="eg-parent" placeholder="상위 단체 (없으면 비워두세요)">
    </div>
    <div class="form-row">
      <label>모임 이름 *</label>
      <input type="text" id="eg-name" placeholder="우리 모임 이름">
    </div>
    <div style="display:flex;gap:10px;margin-top:14px">
      <button class="cta line" style="flex:1" onclick="closeModal('modal-edit-group')">취소</button>
      <button class="cta on" style="flex:1" id="eg-save-btn" onclick="saveGroupInfo()">저장</button>
    </div>
  </div>
</div>

<div class="modal-bg" id="modal-leave-confirm">
  <div class="modal" style="max-width:380px">
    <h3 id="leave-title">정말 나가시겠습니까?</h3>
    <div id="leave-body" style="text-align:center;color:var(--sub);font-size:.96em;line-height:1.55;margin-bottom:18px"></div>
    <div style="text-align:center;margin:18px 0">
      <div id="leave-count" style="font-size:3.5em;font-weight:900;color:var(--coral);font-family:monospace;line-height:1">5</div>
      <div style="font-size:.86em;color:var(--sub);margin-top:6px">초 후 자동 진행</div>
    </div>
    <div style="display:flex;gap:10px">
      <button class="cta line" style="flex:1" onclick="cancelLeave()">취소</button>
      <button class="cta danger" id="leave-now-btn" disabled style="flex:1;opacity:.5" onclick="executeLeave()">나가기</button>
    </div>
  </div>
</div>

<div class="toast" id="toast"></div>

// ── 데이터 모델 (깨끗한 빈 상태) ──
const DEFAULT_DATA = {
  group:{ name:'', since:'' },
  me:{ id:'u1', name:'', role:'captain' },
  members:[],
  transactions:[],
  meetings:[],
  rules:{
    current:{ title:'', date:'', articles:0, pdfData:null, pdfName:null },
    history:[]
  },
  applicants:[],
  assets:[],
  rentals:[],
  transfers:[],
  agenda:[],
  notifications:[],
  settings:{
    fontSize:'normal',
    showWidgets:{ nextMeet:true, money:true, agenda:true, graph:false, balance:false, alerts:true },
    showUnpaidTo:'all', // all | managers
    autoNotify:true,
    categories:{
      in: ['회비','기부금','이자','후원','이월금','기타'],
      out:['식대','장비','교통','대관료','운영비','기념품','회비 환불','기타']
    },
    monthlyDues: 0   // 월 회비 기준액 (0=미설정 → 자동 추정)
  }
};

// 기존에 저장된 데이터에 categories가 없으면 채워주기
function ensureCategories(){
  D.settings = D.settings || {};
  D.settings.categories = D.settings.categories || { in:[], out:[] };
  if(!Array.isArray(D.settings.categories.in) || !D.settings.categories.in.length){
    D.settings.categories.in = ['회비','기부금','이자','후원','이월금','기타'];
  }
  if(!Array.isArray(D.settings.categories.out) || !D.settings.categories.out.length){
    D.settings.categories.out = ['식대','장비','교통','대관료','운영비','기념품','회비 환불','기타'];
  }
  if(typeof D.settings.monthlyDues !== 'number') D.settings.monthlyDues = 0;
}

// ── 저장/로드 ──
function loadData(){
  try{
    const raw = localStorage.getItem('motong-data');
    if(!raw) return JSON.parse(JSON.stringify(DEFAULT_DATA));
    return Object.assign({}, JSON.parse(JSON.stringify(DEFAULT_DATA)), JSON.parse(raw));
  }catch(e){ return JSON.parse(JSON.stringify(DEFAULT_DATA)); }
}
function saveData(){ localStorage.setItem('motong-data', JSON.stringify(D)); }

let D = loadData();

// ── 유틸 ──
function $(id){ return document.getElementById(id); }
function el(tag, cls, html){ const e = document.createElement(tag); if(cls) e.className=cls; if(html!=null) e.innerHTML=html; return e; }

// 만원 단위 직관 표시 (사용자 강조: k 표기 X)
function formatMoney(n){
  if(n==null||isNaN(n)) return '0원';
  const sign = n<0 ? '-' : '';
  n = Math.abs(Math.round(n));
  if(n===0) return '0원';
  if(n>=100000000){
    const eok = Math.floor(n/100000000);
    const man = Math.floor((n%100000000)/10000);
    return sign + eok + '억' + (man ? ' '+man.toLocaleString()+'만원' : '원');
  }
  if(n>=10000){
    const man = Math.floor(n/10000);
    const rest = n%10000;
    if(rest===0) return sign + man.toLocaleString() + '만원';
    return sign + man.toLocaleString() + '만 ' + rest.toLocaleString() + '원';
  }
  return sign + n.toLocaleString() + '원';
}
// 짧은 만원 표시 (그래프 라벨용)
function formatMan(n){
  n = Math.abs(Math.round(n||0));
  if(n>=10000) return Math.round(n/10000) + '만';
  return n.toLocaleString();
}

function toast(msg){
  $('toast').textContent = msg;
  $('toast').classList.add('on');
  setTimeout(()=>$('toast').classList.remove('on'), 1800);
}

// ── 모달 + 페이지에 history 통합 (안드로이드 뒤로가기 / iOS 스와이프 지원) ──
const navStack = [];   // 'page:home', 'page:money', 'modal:modal-edit-group' 등
let navInternal = false; // popstate에서 우리가 직접 부른 동작은 다시 push 안 하게

// 뒤로가기 통합 핸들러
window.addEventListener('popstate', (e) => {
  // 1) 열린 모달이 있으면 가장 위 모달부터 닫기
  const openMs = [...document.querySelectorAll('.modal-bg.on')];
  if(openMs.length > 0){
    navInternal = true;
    const top = openMs[openMs.length-1];
    top.classList.remove('on');
    const idx = navStack.lastIndexOf('modal:'+top.id);
    if(idx >= 0) navStack.splice(idx, 1);
    navInternal = false;
    return;
  }
  // 2) 서브 페이지면 부모 페이지로
  const cur = document.querySelector('.page.on');
  if(cur){
    const curId = cur.id.replace('page-','');
    const parent = SUB_PARENT[curId];
    if(parent){
      navInternal = true;
      goto(parent);
      navInternal = false;
      return;
    }
    // 3) 홈이 아닌 메인 탭에서 뒤로가기 → 홈으로
    if(curId !== 'home'){
      navInternal = true;
      goto('home');
      navInternal = false;
      return;
    }
  }
  // 4) 홈에서 뒤로가기: 그대로 한 번 더 push해서 종료 안 되게
  history.pushState({ nav:'home' }, '', '');
});

// iOS PWA(standalone)에서는 좌측 가장자리 스와이프가 자동으로 안 되니까 직접 감지
let edgeStartX = null, edgeStartY = null, edgeStartT = 0;
document.addEventListener('touchstart', (e) => {
  if(e.touches.length !== 1) return;
  const t = e.touches[0];
  if(t.clientX <= 24){  // 좌측 가장자리 24px 안에서 시작
    edgeStartX = t.clientX; edgeStartY = t.clientY; edgeStartT = Date.now();
  } else { edgeStartX = null; }
}, { passive:true });
document.addEventListener('touchend', (e) => {
  if(edgeStartX === null) return;
  const t = e.changedTouches[0];
  const dx = t.clientX - edgeStartX;
  const dy = Math.abs(t.clientY - edgeStartY);
  const dt = Date.now() - edgeStartT;
  // 우측으로 60px 이상, 수직 이동은 작게, 0.6초 이내면 뒤로가기
  if(dx > 60 && dy < 60 && dt < 600){
    history.back();
  }
  edgeStartX = null;
}, { passive:true });

// ════════════════════════════════════════
// 무작위 예시 풀 — 개인정보 노출 방지를 위해 placeholder를 매번 다르게 표시
// ════════════════════════════════════════
const SAMPLE_NAMES = [
  '김지연','박서윤','이도현','최민준','정유진','강현우','윤하늘','임채원',
  '한지호','송다영','조은비','오태식','신혜린','권상우','배수진','노윤서',
  '류재훈','문지아','백승호','서나래','전유나','홍태경','구은서','남현수'
];
const SAMPLE_NICKS = ['의사','선생님','막내','수도권','부산','회계','총무','서울','광주'];
const SAMPLE_PARENTS = [
  '시민모임 연합','동네 친목회','지역 자원봉사단','청년 네트워크',
  '주민 협의회','이웃사촌 모임','도시문화 협회','우리동네 협의체'
];
const SAMPLE_GROUPS = [
  '주말 산책 모임','북클럽 책별책별','수요 등산 동호회','한컷 사진 동호회',
  '즉흥 여행 모임','맛집 탐험단','요가 새싹반','보드게임 동호회',
  '자전거 한바퀴','달밤 러닝 클럽','커피 좋아하는 사람들','풋살 동호회'
];
const SAMPLE_PLACES = [
  '시청 앞 광장','동네 공원 정자','카페 모임방','중앙도서관 회의실',
  '문화센터 1층','체육공원 야외무대','동네 작은책방'
];
const SAMPLE_MEET_TOPICS = [
  '월간 정모','초청 강연','야외 모임','정기 워크숍','번개 모임','독서 토론'
];
const SAMPLE_TX_TOPICS_IN  = ['이번달 회비','후원금','활동 지원','이월금'];
const SAMPLE_TX_TOPICS_OUT = ['모임 식대','준비물 구매','대관료','교통비','기념품'];
const SAMPLE_AGENDA = ['회비 5천원 인상안','정모 시간 변경','신규 회원 모집 방안','회칙 일부 개정'];

function pickSample(arr){ return arr[Math.floor(Math.random()*arr.length)]; }

function applyRandomExamples(){
  const setPH = (id, text) => { const e = $(id); if(e) e.placeholder = text; };
  const n1 = pickSample(SAMPLE_NAMES);
  const n2 = pickSample(SAMPLE_NAMES.filter(n => n !== n1));
  const grp = pickSample(SAMPLE_GROUPS);
  const grpAlt = pickSample(SAMPLE_GROUPS.filter(g => g !== grp));
  const parent = pickSample(SAMPLE_PARENTS);
  const place = pickSample(SAMPLE_PLACES);
  const nick = pickSample(SAMPLE_NICKS);
  const idHint = (n1.slice(-2)) + Math.floor(1000 + Math.random()*9000);

// 인증 화면
  setPH('login-id', '예: ' + idHint);
  setPH('signup-name', '회원 명부에 표시될 본명 (예: ' + n1 + ')');
  setPH('signup-nickname', '동명이인 구분용 (예: ' + nick + ')');

// 그룹 만들기/참여
  setPH('cg-parent', '예: ' + parent);
  setPH('cg-name', '예: ' + grp);
  setPH('eg-parent', '예: ' + parent);
  setPH('eg-name', '예: ' + grp);
  setPH('su-group', '예: ' + grp);

// 거래 등록
  const txIn = pickSample(SAMPLE_TX_TOPICS_IN);
  const txOut = pickSample(SAMPLE_TX_TOPICS_OUT);
  setPH('tx-title', '예: ' + n1 + ' ' + txIn + ' / ' + txOut);

// 정모 등록
  const mNow = new Date();
  setPH('m-title', '예: ' + (mNow.getMonth()+1) + '월 ' + pickSample(SAMPLE_MEET_TOPICS) + ' — ' + grp);
  setPH('m-place', '예: ' + place);

// 안건/제명
  setPH('ag-title', '예: ' + pickSample(SAMPLE_AGENDA));

// 회원 정보 수정
  setPH('em-nickname', '동명이인 구분용 (예: ' + nick + ')');

// 상단바는 무작위 회명을 절대 미리 보여주지 않음 (실제 회명만 표시)
}

// 직책 한글
function roleLabel(r){ return {captain:'회장',treasurer:'총무',member:'회원'}[r] || '회원'; }
function roleIcon(r){ return {captain:'⭐',treasurer:'⭐',member:''}[r] || ''; }
function roleBadgeClass(r){ return {captain:'captain',treasurer:'treasurer',member:'member'}[r] || 'member'; }

// 권한
function isManager(){ return D.me.role === 'captain' || D.me.role === 'treasurer'; }

// 매칭 검수자: 총무 우선, 총무 없으면 회장
function canReview(){
  if(D.me.role === 'treasurer') return true;
  if(D.me.role === 'captain'){
    const hasTreasurer = D.members.some(m => m.role === 'treasurer');
    return !hasTreasurer;  // 총무 없을 때만 회장이 검수
  }
  return false;
}
function reviewerLabel(){
  // UI 표시용
  const hasTreasurer = D.members.some(m => m.role === 'treasurer');
  return hasTreasurer ? '총무' : '회장';
}

// ── 페이지 전환 ──
const TAB_PAGES = ['home','money','meet','rules','more'];
const SUB_PARENT = { applicants:'more', assets:'more', transfer:'more', report:'more', bulk:'more', 'match-review':'more' };

function goto(page){
  // 같은 페이지면 스킵 (history 중복 방지)
  const curOn = document.querySelector('.page.on');
  const sameAsCurrent = curOn && curOn.id === ('page-'+page);
  document.querySelectorAll('.page').forEach(p => p.classList.remove('on'));
  $('page-'+page).classList.add('on');
  // popstate에서 부른 게 아니면 history에 push
  if(!navInternal && !sameAsCurrent){
    history.pushState({ nav:'page', page }, '', '#'+page);
    navStack.push('page:'+page);
  }
  document.querySelectorAll('.tab').forEach(t => t.classList.remove('on'));
  const parentTab = SUB_PARENT[page] || page;
  const tabBtn = document.querySelector('.tab[data-page="'+parentTab+'"]');
  if(tabBtn) tabBtn.classList.add('on');

// 상단바 갱신 — 큰 자리는 항상 모임 이름, 작은 자리는 인사말/페이지 안내
  const isSub = !!SUB_PARENT[page];
  // 'more'(더보기)는 일부러 비워둠 — 하단 탭으로 어느 페이지인지 알 수 있음
  const subtitles = {
    money:'회비', meet:'정모', rules:'회칙',
    applicants:'가입 신청 관리', assets:'자산 대여', transfer:'직책 인계', report:'결산 리포트', bulk:'엑셀 대량 등록', 'match-review':'매칭 검수'
  };
  // 큰 자리: 항상 모임 이름. 위에 대분류(있으면)
  const pName = D.group.parentName || '';
  $('topParent').textContent = pName;
  $('topParent').style.display = pName ? 'block' : 'none';
  $('topGreet').textContent = D.group.name || '모통';
  // 작은 자리: 홈에선 인사말, 다른 페이지에선 페이지 안내 (없으면 비움)
  if(page==='home'){
    $('topGrp').textContent = '안녕하세요, '+D.me.name+' 님';
    $('topRole').style.display='inline-block';
    $('topRole').textContent = roleIcon(D.me.role)+' '+roleLabel(D.me.role);
    $('topbar').classList.remove('center');
    if($('topback')) $('topback').remove();
  } else {
    $('topGrp').textContent = subtitles[page] || '';
    $('topRole').style.display='none';
    $('topbar').classList.toggle('center', isSub);
    if(isSub){
      if(!$('topback')){
        const b = document.createElement('button');
        b.id='topback';b.className='back';b.innerHTML='‹';b.onclick=()=>goto(SUB_PARENT[page]||'more');
        $('topbar').appendChild(b);
      }
    } else {
      if($('topback')) $('topback').remove();
    }
  }

const renderers = {
    home:renderHome, money:renderMoney, meet:renderMeet, rules:renderRules, more:renderMore,
    applicants:renderApplicants, assets:renderAssets, transfer:renderTransfer, report:renderReport, bulk:renderBulk, 'match-review':renderMatchReview
  };
  if(renderers[page]) renderers[page]();
}

// ════════════════════════════════════════
// 홈 화면 — 위젯 추가/삭제 가능
// ════════════════════════════════════════
function renderHome(){
  const p = $('page-home');
  const w = D.settings.showWidgets;
  let h = '';

// 완전 빈 상태 (첫 사용자) 안내
  const noData = D.transactions.length===0 && D.meetings.length===0 && D.members.length<=1;
  if(noData){
    h += `<div class="c" style="background:linear-gradient(135deg,#FFF4ED,#FFFBED);border-color:var(--coral)">
      <div class="c-tag">🎉 모통에 오신 걸 환영합니다</div>
      <div class="c-title">첫 모임 운영을 시작해보세요</div>
      <div class="c-sub" style="margin-top:6px;line-height:1.6">
        아래 빠른 시작으로 기본 정보를 채워보세요.<br>
        막히면 더보기 → 도움말에서 가이드를 다시 볼 수 있어요.
      </div>
    </div>
    <div class="c">
      <div class="c-tag">🚀 빠른 시작</div>
      <div class="ctas" style="margin-top:8px">
        <button class="cta line" onclick="goto('more');setTimeout(()=>openMemberModal(),200)">+ 회원 추가</button>
        <button class="cta line" onclick="goto('meet');setTimeout(()=>openMeetModal(),200)">+ 정모 등록</button>
      </div>
      <div class="ctas" style="margin-top:6px">
        <button class="cta line" onclick="goto('money');setTimeout(()=>openTxModal('in'),200)">+ 회비 입금</button>
        <button class="cta line" onclick="goto('rules');setTimeout(()=>document.getElementById('rules-pdf')&&document.getElementById('rules-pdf').click(),300)">+ 회칙 PDF</button>
      </div>
    </div>`;
  }

// 다음 정모
  if(w.nextMeet){
    const next = nextMeeting();
    if(next){
      const d = daysUntil(next.date);
      const myA = (next.attendance||{})[D.me.id];
      h += `<div class="c">
        <div class="c-tag">📅 다음 정모</div>
        <div class="c-title">${escape(next.title)}</div>
        <div class="c-sub">${fmtDate(next.date)} · ${next.time||''} · ${escape(next.place||'')}${d>=0 ? ' · D-'+d : ''}</div>
        <div class="ctas">
          <div class="cta ${myA==='go'?'go':''}" onclick="setAttend('${next.id}','go')">${myA==='go'?'참석 ✓':'참석'}</div>
          <div class="cta ${myA==='miji'?'miji':''}" onclick="setAttend('${next.id}','miji')">${myA==='miji'?'미정 ✓':'미정'}</div>
          <div class="cta ${myA==='bul'?'bul':''}" onclick="setAttend('${next.id}','bul')">${myA==='bul'?'불참 ✓':'불참'}</div>
        </div>
      </div>`;
    }
  }

// 이번달 회비
  if(w.money){
    const balance = totalBalance();
    const month = currentMonthStr();
    const inThis = D.transactions.filter(t=>t.type==='in' && t.date && t.date.startsWith(month)).reduce((s,t)=>s+t.amount,0);
    const unpaidCnt = countUnpaidThisMonth();
    h += `<div class="c">
      <button class="dots" onclick="toggleWidgetMenu('money')">⋮</button>
      <div class="widget-menu" id="wm-money">
        <div class="wm-item"><b>홈에서 보이기</b><div class="sw on" onclick="toggleWidget('money',event)"></div></div>
        <div class="wm-item"><b>미납자 공개 범위</b></div>
        <div class="wm-item" onclick="setUnpaidTo('all')" style="font-size:.78em;padding-left:18px">
          <span>모든 회원에게</span><span>${D.settings.showUnpaidTo==='all'?'●':'○'}</span>
        </div>
        <div class="wm-item" onclick="setUnpaidTo('managers')" style="font-size:.78em;padding-left:18px">
          <span>회장·총무만</span><span>${D.settings.showUnpaidTo==='managers'?'●':'○'}</span>
        </div>
        <div class="wm-item"><b>자동 알림</b><div class="sw ${D.settings.autoNotify?'on':''}" onclick="toggleAutoNotify(event)"></div></div>
      </div>
      <div class="c-tag">💰 이번 달 회비</div>
      <div class="c-big">${formatMoney(balance)}</div>
      <div class="c-sub">${unpaidCnt>0 ? '미납 '+unpaidCnt+'명 · 통이가 알림 발송함' : '모두 납부 완료'}</div>
      <div class="bar"><div class="bar-fill" style="width:${Math.min(100, percentPaid())}%"></div></div>
    </div>`;
  }

// 그래프 위젯 (옵션)
  if(w.graph){
    h += `<div class="c">
      <div class="c-tag">📈 수입·지출 (최근 6개월)</div>
      <div id="home-graph"></div>
    </div>`;
  }

// 잔액 추이 (옵션)
  if(w.balance){
    h += `<div class="c">
      <div class="c-tag">📉 잔액 추이</div>
      <div id="home-balance"></div>
    </div>`;
  }

// 진행 중 안건
  if(w.agenda){
    const ag = D.agenda[0];
    if(ag){
      const total = ag.total || D.members.length;
      const done = (ag.votes.yes||0)+(ag.votes.no||0);
      h += `<div class="c">
        <div class="c-tag">🗳️ 진행 중 안건</div>
        <div class="c-title">${escape(ag.title)}</div>
        <div class="c-sub">${done} / ${total}명 투표 · 종료 ${fmtDate(ag.endDate)}</div>
        <div class="ctas">
          <div class="cta on">투표하기</div>
        </div>
      </div>`;
    }
  }

// 알림 카드 (안건·제명 투표·기타)
  if(w.alerts){
    const myNotifs = D.notifications.filter(n => !n.read && (!n.forUser || n.forUser===D.me.id));
    if(myNotifs.length){
      h += `<div class="alert-card">
        <div class="alert-head">
          <b>🔔 처리할 알림</b>
          <span class="alert-cnt">${myNotifs.length}</span>
        </div>`;
      myNotifs.slice(0,4).forEach(n => {
        if(n.type==='agenda' || n.type==='kick'){
          const ag = D.agenda.find(x=>x.id===n.agendaId);
          if(!ag || ag.status!=='open') return;
          const voted = ag.voters && ag.voters[D.me.id];
          h += `<div class="alert-item">
            <div class="ai-info" onclick="openVoteModal('${ag.id}')">
              <b>${escape(n.title)}</b>
              <small>${escape(n.body||'')} · 자세히 보기</small>
            </div>
            ${voted ? `<small style="color:var(--good);font-weight:700">투표함 ✓</small>` : `
            <div class="mini-ctas">
              <button class="mini-cta yes" onclick="quickVote('${ag.id}','yes')">찬성</button>
              <button class="mini-cta no" onclick="quickVote('${ag.id}','no')">반대</button>
            </div>`}
          </div>`;
        } else {
          h += `<div class="alert-item">
            <div class="ai-info">
              <b>${escape(n.title)}</b>
              <small>${escape(n.body||'')}</small>
            </div>
            <div class="mini-ctas">
              <button class="mini-cta ok" onclick="dismissNotif('${n.id}')">확인</button>
            </div>
          </div>`;
        }
      });
      h += `</div>`;
    }
    h += `<div class="tongi-row" onclick="toast('통이가 알림을 정리해뒀어요')">
      <div class="tongi-icon">통</div>
      <div class="msg">${myNotifs.length ? '위 알림을 처리해주세요' : '처리할 알림이 없어요 — 한가하네요'}</div>
      <div class="arrow">›</div>
    </div>`;
  }

// 위젯 추가 버튼
  h += `<button class="cta line" style="margin-top:6px;width:100%" onclick="openWidgetSetting()">⚙ 홈 위젯 설정</button>`;

p.innerHTML = h;

if(w.graph) renderBarGraph('home-graph', monthlyData(6), 'small');
  if(w.balance) renderLineGraph('home-balance', balanceTimeline(6));
}

// 홈 위젯 설정 모달
function openWidgetSetting(){
  const w = D.settings.showWidgets;
  const items = [
    ['nextMeet','📅 다음 정모'],
    ['money','💰 이번 달 회비'],
    ['graph','📈 수입·지출 그래프'],
    ['balance','📉 잔액 추이 그래프'],
    ['agenda','🗳️ 진행 중 안건'],
    ['alerts','🔔 알림·안건 투표 카드']
  ];
  let html = '<h3>홈 화면 위젯</h3>';
  html += '<p style="font-size:.82em;color:var(--sub);text-align:center;margin-bottom:10px">보이게 할 항목만 켜두세요</p>';
  items.forEach(([k,label])=>{
    html += `<div class="c-row" style="padding:10px 4px;border-bottom:1px solid var(--border)">
      <span style="font-size:.92em;font-weight:700">${label}</span>
      <div class="sw ${w[k]?'on':''}" onclick="this.classList.toggle('on');D.settings.showWidgets['${k}']=!D.settings.showWidgets['${k}'];saveData()"></div>
    </div>`;
  });
  html += '<div class="ctas" style="margin-top:14px"><button class="cta on" onclick="closeModal(\'modal-widget\');renderHome()">완료</button></div>';

let m = $('modal-widget');
  if(!m){
    m = document.createElement('div');
    m.className='modal-bg';m.id='modal-widget';
    m.innerHTML='<div class="modal" id="modal-widget-inner"></div>';
    m.addEventListener('click',e=>{if(e.target===m) m.classList.remove('on');});
    document.body.appendChild(m);
  }
  $('modal-widget-inner').innerHTML = html;
  openModal('modal-widget');
}

// ════════════════════════════════════════
// 회비 화면
// ════════════════════════════════════════
function renderMoney(){
  const p = $('page-money');
  const balance = totalBalance();
  const month = currentMonthStr();
  const txMonth = D.transactions.filter(t => t.date && t.date.startsWith(month));
  const inMonth = txMonth.filter(t=>t.type==='in').reduce((s,t)=>s+t.amount,0);
  const outMonth = txMonth.filter(t=>t.type==='out').reduce((s,t)=>s+t.amount,0);

let h = `<div class="c">
    <div class="c-tag">현재 잔액</div>
    <div class="c-big">${formatMoney(balance)}</div>
    <div class="c-sub">최종 동기화: 수동 입력</div>
  </div>

<div class="c">
    <div class="c-row">
      <div>
        <div class="c-tag">이번 달</div>
        <div style="font-size:.84em;margin-top:3px">
          수입 <b style="color:var(--good)">+${formatMoney(inMonth)}</b><br>
          지출 <b style="color:var(--bad)">−${formatMoney(outMonth)}</b>
        </div>
      </div>
    </div>
  </div>`;

// ─── 월별 납부 현황 (회원·월 매트릭스) ───
  h += renderMonthlyDuesCard();

// 미납자 (권한 체크)
  if(D.settings.showUnpaidTo === 'all' || isManager()){
    const unpaid = unpaidMembers();
    if(unpaid.length){
      h += `<div class="c">
        <div class="c-tag" style="color:var(--bad)">⚠️ 이번 달 미납 ${unpaid.length}명</div>`;
      unpaid.forEach(m=>{
        const init = m.name.charAt(0);
        h += `<div class="member">
          <div class="avatar">${init}</div>
          <div style="flex:1"><b>${escape(m.name)}</b><div class="c-sub">${m.phone||''}</div></div>
          ${isManager() ? `<div class="cta on" style="padding:6px 10px;flex:0 0 auto;font-size:.74em" onclick="notifyUnpaid('${m.id}')">알림</div>` : ''}
        </div>`;
      });
      h += `</div>`;
    }
  }

// 최근 내역
  h += `<div class="list-head">최근 내역</div><div class="c">`;
  const recent = [...D.transactions].sort((a,b)=>(b.date||'').localeCompare(a.date||'')).slice(0,8);
  if(recent.length===0){
    h += '<div class="empty"><div class="ei">📭</div><p>거래 내역이 없습니다</p></div>';
  } else {
    recent.forEach(t=>{
      const sign = t.type==='in' ? '+' : '−';
      h += `<div class="tx-row" onclick="viewTx('${t.id}')">
        <div class="tx-info">
          <div class="t-title">${escape(t.title||'(제목 없음)')}${t.attaches&&t.attaches.length ? '<span class="tx-attach">📎'+t.attaches.length+'</span>':''}</div>
          <div class="t-sub">${t.date||''} · ${escape(t.category||'')}</div>
        </div>
        <div class="tx-amt ${t.type}">${sign}${formatMoney(t.amount)}</div>
      </div>`;
    });
  }
  h += `</div>`;

h += `<div class="ctas" style="margin:14px 0">
    <button class="cta line" onclick="document.getElementById('xl-file').click()">📁 엑셀 업로드</button>
    <button class="cta on" onclick="openTxModal('in')">+ 입금</button>
    <button class="cta bul" onclick="openTxModal('out')">− 지출</button>
  </div>
  <input type="file" id="xl-file" accept=".xlsx,.xls,.csv" style="display:none" onchange="importExcel(event)">
  <div style="font-size:.74em;color:var(--sub);text-align:center;margin-top:-6px">
    ※ 엑셀 형식: 날짜 / 적요 / 입금 / 출금 컬럼 (카뱅 모임통장 다운로드 양식 호환)
  </div>`;

p.innerHTML = h;
  renderBarGraph('m-graph', monthlyData(6));
  renderLineGraph('m-line', balanceTimeline(6));
}

// ════════════════════════════════════════
// 월별 납부 현황 — 카드 + 매트릭스 + 편중 알림
// ════════════════════════════════════════
function _last6Months(){
  const arr = [];
  const now = new Date();
  for(let i=5;i>=0;i--){
    const d = new Date(now.getFullYear(), now.getMonth()-i, 1);
    arr.push({
      key: d.getFullYear()+'-'+String(d.getMonth()+1).padStart(2,'0'),
      label: (d.getMonth()+1)+'월',
      year: d.getFullYear(), month: d.getMonth()+1
    });
  }
  return arr;
}
// 회비 분류로 인식할 키워드 (사용자 정의 + 기본)
function _isDuesCategory(cat){
  if(!cat) return false;
  return /회비/.test(cat);
}
// 회비 기준액 추정 — 사용자가 명시 안 했으면 가장 흔한 회비 입금액을 사용
function _estimateMonthlyDues(){
  const set = D.settings || {};
  if(set.monthlyDues && set.monthlyDues > 0) return set.monthlyDues;
  const counts = {};
  D.transactions.forEach(t => {
    if(t.type !== 'in' || !_isDuesCategory(t.category) || !t.amount) return;
    counts[t.amount] = (counts[t.amount]||0) + 1;
  });
  let best = 0, bestCnt = 0;
  Object.entries(counts).forEach(([amt,cnt]) => {
    if(cnt > bestCnt){ best = parseInt(amt); bestCnt = cnt; }
  });
  return best || 0;
}
function renderMonthlyDuesCard(){
  const months = _last6Months();
  const dues = _estimateMonthlyDues();
  const members = (D.members||[]).slice();
  const todayKey = todayStr().slice(0,7);

// 회원·월 → 납부액 합계
  const paidMap = {};   // memberId → { 'YYYY-MM': amount }
  D.transactions.forEach(t => {
    if(t.type !== 'in' || !_isDuesCategory(t.category) || !t.memberId || !t.date) return;
    const k = t.date.slice(0,7);
    paidMap[t.memberId] = paidMap[t.memberId] || {};
    paidMap[t.memberId][k] = (paidMap[t.memberId][k]||0) + (t.amount||0);
  });

// 월별 합계
  const monthTotals = {}; let grandTotal = 0;
  months.forEach(m => {
    let sum = 0;
    members.forEach(mb => { sum += (paidMap[mb.id]?.[m.key]||0); });
    monthTotals[m.key] = sum;
    grandTotal += sum;
  });

// 편중 분석: 한 달이 전체의 50% 이상을 차지하면 편중
  let skew = null;
  if(grandTotal > 0){
    months.forEach(m => {
      const pct = monthTotals[m.key] / grandTotal;
      if(pct > 0.5){ skew = { label: m.label, pct: Math.round(pct*100) }; }
    });
  }

// 이번달 미납 인원 / 금액 (이번달만)
  let unpaidNow = 0, paidNow = 0, totalDueNow = 0;
  if(dues > 0){
    members.forEach(mb => {
      const got = paidMap[mb.id]?.[todayKey] || 0;
      totalDueNow += dues;
      if(got >= dues) paidNow += dues; else unpaidNow += (dues - got);
    });
  }
  const collectionRate = totalDueNow > 0 ? Math.round(paidNow/totalDueNow*100) : 0;

// 상위 헤더
  let h = `<div class="c">
    <div class="c-row">
      <div class="c-tag">📊 월별 회비 납부 현황</div>
      <button class="dots" onclick="openMonthlyDuesSettings(event)" title="기준액 설정">⋮</button>
    </div>
    <div class="dues-summary">
      <div>이번달 납부율 <b style="color:${collectionRate>=80?'var(--good)':collectionRate>=50?'#B07000':'var(--bad)'}">${collectionRate}%</b></div>
      <div>예상 미납 <b style="color:var(--bad)">${formatMoney(unpaidNow)}</b></div>
    </div>`;

if(dues === 0){
    h += `<div class="empty" style="padding:14px">
      <p style="font-size:.86em">월 회비 기준액을 설정하면 더 정확하게 보여줘요</p>
      <button class="cta line" onclick="openMonthlyDuesSettings()" style="margin-top:8px;width:100%">기준액 설정하기</button>
    </div></div>`;
    return h;
  }

if(skew){
    h += `<div style="background:#FFF5DD;border:1px solid #FFD166;border-radius:var(--r-sm);padding:10px 12px;font-size:.82em;color:#7a5400;margin-bottom:8px">
      ⚠️ 회비가 <b>${skew.label}(${skew.pct}%)</b>에 몰려 있어요. 다른 달 납부 누락 여부를 확인해보세요.
    </div>`;
  }

// 매트릭스 표 — 6개월
  const colTpl = `minmax(64px,1.2fr) repeat(${months.length},minmax(36px,1fr))`;
  h += `<div class="dues-grid" style="overflow-x:auto">
    <div class="dues-row head" style="grid-template-columns:${colTpl}">
      <div class="name">회원</div>
      ${months.map(m => `<div style="text-align:center">${m.label}</div>`).join('')}
    </div>`;
  members.forEach(mb => {
    h += `<div class="dues-row" style="grid-template-columns:${colTpl}">
      <div class="name">${escape(mb.name)}${mb.nickname?`<small style="color:var(--sub);font-weight:500"> (${escape(mb.nickname)})</small>`:''}</div>`;
    months.forEach(m => {
      const got = paidMap[mb.id]?.[m.key] || 0;
      const isFuture = m.key > todayKey;
      let cls, label;
      if(isFuture){ cls = 'future'; label = '·'; }
      else if(got >= dues){ cls = 'paid'; label = '✓'; }
      else if(got > 0){ cls = 'partial'; label = Math.round(got/dues*100)+'%'; }
      else { cls = 'unpaid'; label = '✕'; }
      h += `<div class="dues-cell ${cls}" title="${mb.name} ${m.label}: ${formatMoney(got)} / ${formatMoney(dues)}">${label}</div>`;
    });
    h += `</div>`;
  });
  h += `</div>`;
  // 범례
  h += `<div style="display:flex;gap:14px;justify-content:center;margin-top:10px;font-size:.76em;color:var(--sub);flex-wrap:wrap">
    <span><span class="dues-cell paid" style="display:inline-flex;width:22px;height:18px;font-size:.7em">✓</span> 완납</span>
    <span><span class="dues-cell partial" style="display:inline-flex;width:32px;height:18px;font-size:.7em">50%</span> 일부</span>
    <span><span class="dues-cell unpaid" style="display:inline-flex;width:22px;height:18px;font-size:.7em">✕</span> 미납</span>
  </div>`;
  h += `<div style="font-size:.74em;color:var(--sub);text-align:center;margin-top:6px">
    기준액 ${formatMoney(dues)}/월 · 회비 분류로 인식된 입금만 집계
  </div>`;
  h += `</div>`;
  return h;
}
function openMonthlyDuesSettings(e){
  if(e) e.stopPropagation();
  ensureCategories();
  const cur = D.settings.monthlyDues || _estimateMonthlyDues() || 0;
  const v = prompt('월 회비 기준액을 원 단위로 입력하세요\n(예: 50000 = 5만원)', String(cur));
  if(v === null) return;
  const n = parseInt((v||'').replace(/[^0-9]/g,''))||0;
  D.settings.monthlyDues = n;
  toast(n>0 ? `기준액 ${formatMoney(n)} 저장됨` : '자동 추정 모드');
  saveSettingsToCloud();
  renderMoney();
}

// 카테고리 관리 모달 (추가·삭제)
function openCategoryManager(){
  ensureCategories();
  let m = $('modal-categories');
  if(!m){
    m = document.createElement('div');
    m.className = 'modal-bg';
    m.id = 'modal-categories';
    m.innerHTML = '<div class="modal" id="modal-categories-inner"></div>';
    m.addEventListener('click', e => { if(e.target===m) closeModal('modal-categories'); });
    document.body.appendChild(m);
  }
  renderCategoryManager();
  openModal('modal-categories');
}
function renderCategoryManager(){
  ensureCategories();
  const cats = D.settings.categories;
  const chip = (label, type, idx) => `
    <span class="cat-chip">
      <b>${escape(label)}</b>
      <button class="cat-x" onclick="removeCategory('${type}',${idx})" title="삭제">×</button>
    </span>`;
  const html = `
    <h3>분류 관리</h3>
    <p style="font-size:.82em;color:var(--sub);text-align:center;margin-bottom:12px">
      자주 쓰는 항목을 추가하거나 안 쓰는 항목은 지울 수 있어요
    </p>
    <div style="margin-bottom:14px">
      <div class="c-tag" style="color:var(--good)">+ 수입 분류</div>
      <div class="cat-wrap" id="cat-in">${cats.in.map((c,i)=>chip(c,'in',i)).join('')}</div>
      <div style="display:flex;gap:6px;margin-top:8px">
        <input type="text" id="cat-in-new" placeholder="새 수입 분류 (예: 동아리비)" maxlength="14" style="flex:1;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--bg);font-size:.96em">
        <button class="cta on" style="flex:0 0 auto;padding:10px 14px" onclick="addCategory('in')">추가</button>
      </div>
    </div>
    <div>
      <div class="c-tag" style="color:var(--bad)">− 지출 분류</div>
      <div class="cat-wrap" id="cat-out">${cats.out.map((c,i)=>chip(c,'out',i)).join('')}</div>
      <div style="display:flex;gap:6px;margin-top:8px">
        <input type="text" id="cat-out-new" placeholder="새 지출 분류 (예: 활동비)" maxlength="14" style="flex:1;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--bg);font-size:.96em">
        <button class="cta on" style="flex:0 0 auto;padding:10px 14px" onclick="addCategory('out')">추가</button>
      </div>
    </div>
    <div class="ctas" style="margin-top:18px">
      <button class="cta on" onclick="closeModal('modal-categories')">완료</button>
    </div>
  `;
  $('modal-categories-inner').innerHTML = html;
}
function addCategory(type){
  ensureCategories();
  const inp = $('cat-'+type+'-new'); if(!inp) return;
  const v = (inp.value||'').trim();
  if(!v){ toast('이름을 입력하세요'); return; }
  if(D.settings.categories[type].includes(v)){ toast('이미 있는 분류'); return; }
  D.settings.categories[type].push(v);
  inp.value = '';
  renderCategoryManager();
  refreshTxCategoryOptions();
  saveSettingsToCloud();
}
function removeCategory(type, idx){
  ensureCategories();
  const list = D.settings.categories[type];
  if(!list || !list[idx]) return;
  if(list.length <= 1){ toast('최소 1개는 남겨두세요'); return; }
  const removed = list.splice(idx,1);
  toast(`"${removed[0]}" 삭제됨`);
  renderCategoryManager();
  refreshTxCategoryOptions();
  saveSettingsToCloud();
}
// 설정 동기화 (그룹의 settings 컬럼이 있으면 저장 — 없어도 LocalStorage에 백업)
async function saveSettingsToCloud(){
  // LocalStorage 백업 (설정만 따로 — 클라우드 컬럼이 없어도 다음 세션에 유지)
  try{
    const key = 'motong-settings-' + (typeof activeGroupId !== 'undefined' ? (activeGroupId||'_') : '_');
    localStorage.setItem(key, JSON.stringify(D.settings));
  }catch(_){}
  try{
    if(typeof activeGroupId !== 'undefined' && activeGroupId && typeof sb !== 'undefined' && sb){
      await sb.from('groups').update({ settings: D.settings }).eq('id', activeGroupId);
    }
  }catch(_){ /* 컬럼 없을 수 있음 — 조용히 무시 */ }
}
function loadLocalSettings(){
  try{
    const key = 'motong-settings-' + (typeof activeGroupId !== 'undefined' ? (activeGroupId||'_') : '_');
    const raw = localStorage.getItem(key);
    if(raw){
      const parsed = JSON.parse(raw);
      D.settings = Object.assign({}, D.settings || {}, parsed);
    }
  }catch(_){}
  ensureCategories();
}
$('tx-amount').addEventListener('input', e=>{
  const v = parseInt(e.target.value)||0;
  $('tx-amount-display').textContent = v>0 ? '→ ' + formatMoney(v) : '';
});

// ════════════════════════════════════════
// 정모 화면 — 캘린더 통합
// ════════════════════════════════════════
let calMonth = new Date();
calMonth.setDate(1);
let calSelected = null;

function renderMeet(){
  const p = $('page-meet');
  const next = nextMeeting();

let h = '';
  // 캘린더
  h += `<div class="c">
    <div class="cal-head">
      <div class="month">${calMonth.getFullYear()}년 ${calMonth.getMonth()+1}월</div>
      <div class="nav">
        <button onclick="calNav(-1)">‹</button>
        <button onclick="calNav(1)">›</button>
      </div>
    </div>
    <div class="cal-grid" id="cal-grid"></div>
    <div class="cal-legend">
      <span><div class="cal-dot event"></div>정모</span>
      <span><div class="cal-dot in"></div>수입</span>
      <span><div class="cal-dot out"></div>지출</span>
      <span><div class="cal-dot rev"></div>회칙 개정</span>
    </div>
  </div>`;

h += `<div id="day-detail-area"></div>`;

if(next){
    const d = daysUntil(next.date);
    const att = next.attendance||{};
    const myA = att[D.me.id];
    const counts = {go:0,miji:0,bul:0};
    Object.values(att).forEach(v=>counts[v] && counts[v]++);

h += `<div class="c" style="border:2px solid var(--coral);margin-top:14px">
      <div class="c-tag">다음 정모</div>
      <div class="c-title">${escape(next.title)}</div>
      <div class="c-sub">${fmtDate(next.date)} ${dayOfWeek(next.date)} ${next.time||''}${next.place ? ' · '+escape(next.place):''}</div>
      <div class="c-row" style="margin-top:8px;font-size:.82em">
        <span>참석 <b style="color:var(--good)">${counts.go}</b></span>
        <span>미정 <b style="color:var(--mustard)">${counts.miji}</b></span>
        <span>불참 <b style="color:var(--coral)">${counts.bul}</b></span>
      </div>
      <div class="ctas">
        <div class="cta ${myA==='go'?'go':''}" onclick="setAttend('${next.id}','go')">${myA==='go'?'참석 ✓':'참석'}</div>
        <div class="cta ${myA==='miji'?'miji':''}" onclick="setAttend('${next.id}','miji')">미정${myA==='miji'?' ✓':''}</div>
        <div class="cta ${myA==='bul'?'bul':''}" onclick="setAttend('${next.id}','bul')">불참${myA==='bul'?' ✓':''}</div>
      </div>
    </div>`;
  }

h += `<div class="list-head">지난 정모</div>`;
  const past = [...D.meetings].filter(m=>(m.date||'')<todayStr()).sort((a,b)=>(b.date||'').localeCompare(a.date||''));
  if(past.length===0){
    h += '<div class="c"><div class="empty"><div class="ei">🗓️</div><p>지난 정모 없음</p></div></div>';
  } else {
    h += '<div class="c">';
    past.slice(0,5).forEach(m=>{
      const att = Object.values(m.attendance||{}).filter(v=>v==='go').length;
      h += `<div class="tx-row">
        <div class="tx-info">
          <div class="t-title">${escape(m.title)}</div>
          <div class="t-sub">${fmtDate(m.date)} · 출석 ${att}명</div>
        </div>
      </div>`;
    });
    h += '</div>';
  }

p.innerHTML = h;
  renderCalendar();

// FAB
  if(!p.querySelector('.fab') && isManager()){
    const fab = el('button','fab','+');
    fab.onclick = openMeetModal;
    fab.title = '정모 등록';
    p.appendChild(fab);
  }
}

for(let i=firstDay-1;i>=0;i--){
    h += `<div class="cal-cell muted">${prevLast-i}</div>`;
  }
  for(let d=1;d<=lastDate;d++){
    const dateStr = `${y}-${String(m+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
    const dow = new Date(y,m,d).getDay();
    const isToday = (new Date(y,m,d)).getTime() === today.getTime();
    const isSel = calSelected === dateStr;
    const cls = ['cal-cell'];
    if(dow===0) cls.push('sun'); else if(dow===6) cls.push('sat');
    if(isToday) cls.push('today');
    if(isSel) cls.push('selected');

// 점
    const hasMeet = D.meetings.some(x=>x.date===dateStr);
    const hasIn = D.transactions.some(x=>x.type==='in' && x.date===dateStr);
    const hasOut = D.transactions.some(x=>x.type==='out' && x.date===dateStr);
    const hasRev = (D.rules && D.rules.history || []).some(h => h && h.date === dateStr);
    let dots = '';
    if(hasMeet) dots += '<div class="cal-dot event"></div>';
    if(hasIn) dots += '<div class="cal-dot in"></div>';
    if(hasOut) dots += '<div class="cal-dot out"></div>';
    if(hasRev) dots += '<div class="cal-dot rev" title="회칙 개정"></div>';

h += `<div class="${cls.join(' ')}" onclick="selectDay('${dateStr}')">${d}${dots?'<div class="cal-dots">'+dots+'</div>':''}</div>`;
  }
  // 다음달 채우기
  const totalCells = firstDay + lastDate;
  const fill = (7 - totalCells % 7) % 7;
  for(let i=1;i<=fill;i++){
    h += `<div class="cal-cell muted">${i}</div>`;
  }
  grid.innerHTML = h;
}
function selectDay(dateStr){
  calSelected = dateStr;
  renderCalendar();
  // 상세 카드
  const meets = D.meetings.filter(m=>m.date===dateStr);
  const ins = D.transactions.filter(t=>t.type==='in' && t.date===dateStr);
  const outs = D.transactions.filter(t=>t.type==='out' && t.date===dateStr);
  const totalIn = ins.reduce((s,t)=>s+t.amount,0);
  const totalOut = outs.reduce((s,t)=>s+t.amount,0);

async function setAttend(meetId, status){
  const m = D.meetings.find(x=>x.id===meetId);
  if(!m) return;
  m.attendance = m.attendance || {};
  if(m.attendance[D.me.id] === status){
    delete m.attendance[D.me.id];
    toast('선택 취소됨');
  } else {
    m.attendance[D.me.id] = status;
    toast({go:'참석으로 표시',miji:'미정으로 표시',bul:'불참으로 표시'}[status]);
  }
  refreshActivePage();
  pushMeeting(m);
}
function refreshActivePage(){
  const active = document.querySelector('.page.on');
  if(!active) return;
  const fns = {
    'page-home':renderHome,'page-money':renderMoney,'page-meet':renderMeet,
    'page-rules':renderRules,'page-more':renderMore,
    'page-applicants':renderApplicants,'page-assets':renderAssets,
    'page-transfer':renderTransfer,'page-report':renderReport,
    'page-bulk':renderBulk,'page-match-review':renderMatchReview
  };
  const fn = fns[active.id];
  if(fn) fn();
}
function openMeetModal(){
  $('m-title').value=''; $('m-date').value=todayStr(); $('m-time').value='';
  $('m-place').value=''; $('m-memo').value='';
  openModal('modal-meet');
}
async function saveMeeting(){
  const title = $('m-title').value.trim();
  if(!title){ toast('제목을 입력하세요'); return; }
  const m = {
    id:crypto.randomUUID(), title,
    date:$('m-date').value, time:$('m-time').value,
    place:$('m-place').value, memo:$('m-memo').value,
    attendance:{}, album:[]
  };
  D.meetings.push(m);
  closeModal('modal-meet');
  toast('정모 등록 완료');
  renderMeet();
  pushMeeting(m);
}

// ════════════════════════════════════════
// 회칙
// ════════════════════════════════════════
function renderRules(){
  const p = $('page-rules');
  const r = D.rules.current;
  const hasPDF = !!r.pdfData;
  // 미리보기 썸네일 (이미지일 때만 인라인 미리보기, PDF는 아이콘으로 안내)
  const isImg = hasPDF && (/^data:image\/(jpeg|png)/.test(r.pdfData) || /\.(jpe?g|png)$/i.test((r.pdfName||'').toLowerCase()));
  const isPdf = hasPDF && (/^data:application\/pdf/.test(r.pdfData) || /\.pdf$/i.test((r.pdfName||'').toLowerCase()));
  let previewHTML = '';
  if(isImg){
    previewHTML = `<div onclick="openPDFViewer()" style="margin:10px 0 6px;border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:#f5f4f0;cursor:pointer">
      <img src="${r.pdfData}" alt="회칙 미리보기" style="width:100%;height:auto;display:block;max-height:220px;object-fit:contain;background:#fff">
      <div style="padding:6px 10px;font-size:.74em;color:var(--sub);text-align:center;background:#fff">탭하면 크게 봐요</div>
    </div>`;
  } else if(isPdf){
    previewHTML = `<div onclick="openPDFViewer()" style="margin:10px 0 6px;border:1px solid var(--border);border-radius:var(--r-sm);background:linear-gradient(135deg,#FFF4ED,#FFFBED);padding:18px;text-align:center;cursor:pointer">
      <div style="font-size:2.4em">📄</div>
      <div style="font-size:.92em;font-weight:800;margin-top:4px">${escape(r.pdfName||'회칙.pdf')}</div>
      <div style="font-size:.74em;color:var(--sub);margin-top:4px">탭하면 미리보기가 열려요</div>
    </div>`;
  }

// 진행 안건 (개정안은 아래 별도 섹션에서 처리하므로 제외)
  D.agenda.filter(ag => (ag.status === 'open' || !ag.status) && ag.kind !== 'amendment').forEach(ag=>{
    const total = ag.total || D.members.length;
    const done = (ag.votes.yes||0)+(ag.votes.no||0);
    const pct = total ? Math.round(done/total*100) : 0;
    const isKick = ag.kind === 'kick';
    const targetMember = isKick ? D.members.find(m=>m.id===ag.target) : null;
    const myVote = ag.voters && ag.voters[D.me.id];
    h += `<div class="c">
      <div class="c-tag" style="color:var(--bad)">${isKick ? '🚪 회원 내보내기 안건' : '🗳️ 진행 중 안건'}</div>
      <div class="c-title">${escape(ag.title)}${isKick && targetMember ? ' — '+escape(targetMember.name) : ''}</div>
      ${ag.detail ? `<div class="agenda-detail">${escape(ag.detail)}</div>` : ''}
      <div class="c-sub" style="margin-top:6px">발의: ${memberName(ag.by)} · 종료 ${fmtDate(ag.endDate)}</div>
      <div class="bar" style="margin-top:8px"><div class="bar-fill" style="width:${pct}%"></div></div>
      <div style="font-size:.75em;color:var(--sub);margin-top:4px">${done} / ${total}명 (찬성 ${ag.votes.yes||0}, 반대 ${ag.votes.no||0})</div>
      ${myVote ? `<div style="text-align:center;font-size:.82em;color:var(--good);font-weight:800;margin-top:8px">투표 완료 (${myVote==='yes'?'찬성':'반대'}) ✓</div>` : `
      <div class="ctas">
        <div class="cta go" onclick="vote('${ag.id}','yes')">찬성</div>
        <div class="cta bul" onclick="vote('${ag.id}','no')">반대</div>
      </div>`}
    </div>`;
  });

// 종결된 안건 (개정안은 아래 별도 섹션에서 처리하므로 제외)
  const closed = D.agenda.filter(ag => ag.status && ag.status !== 'open' && ag.kind !== 'amendment');
  if(closed.length){
    h += `<div class="list-head">지난 안건</div><div class="c">`;
    closed.slice(0,5).forEach(ag => {
      const result = ag.status === 'passed' ? '✅ 통과' : '❌ 부결';
      h += `<div class="tx-row">
        <div class="tx-info">
          <div class="t-title">${escape(ag.title)}</div>
          <div class="t-sub">${result} · ${ag.endDate}</div>
        </div>
      </div>`;
    });
    h += `</div>`;
  }

// ─── 회칙 개정안 (검색·상태별 분류·팝업 상세) ───
  const amendments = (D.agenda || []).filter(a => a.kind === 'amendment');
  const inProg  = amendments.filter(a => !a.status || a.status === 'open');
  const passed  = amendments.filter(a => a.status === 'passed');
  const reject  = amendments.filter(a => a.status === 'rejected');

h += `<div class="c">
    <div class="c-row">
      <div class="c-tag">📋 회칙 개정안</div>
      <small style="font-size:.74em;color:var(--sub)">총 ${amendments.length}건</small>
    </div>
    <div style="display:flex;gap:6px;margin-top:8px">
      <span class="badge" style="background:var(--mustard);color:var(--navy);font-size:.74em">개정 중 ${inProg.length}</span>
      <span class="badge" style="background:#E1F5EE;color:var(--good);font-size:.74em">개정 확정 ${passed.length}</span>
      <span class="badge" style="background:#FFE4DC;color:var(--bad);font-size:.74em">개정 반려 ${reject.length}</span>
    </div>
    <input type="text" id="amend-search" placeholder="🔍 개정안 검색 (제목·내용)" oninput="filterAmendments(this.value)" style="width:100%;margin-top:10px;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--bg);outline:none;font-size:.96em">

<div class="list-head" style="margin-top:14px">개정 중</div>
    <div id="amend-list-open">${renderAmendList(inProg, 'open')}</div>

<div class="list-head">개정 확정 <small style="font-weight:500;color:var(--sub)">— 탭하면 상세</small></div>
    <div id="amend-list-passed">${renderAmendList(passed, 'passed')}</div>

<div class="list-head">개정 반려 <small style="font-weight:500;color:var(--sub)">— 탭하면 상세</small></div>
    <div id="amend-list-rejected">${renderAmendList(reject, 'rejected')}</div>
  </div>`;

// ─── 시행 회칙 이력 (현재 시행 중 PDF 등 메타) ───
  if((D.rules.history||[]).length){
    h += `<div class="c">
      <div class="c-tag">시행 회칙 이력</div>
      <div style="padding-left:14px;border-left:2px solid var(--mustard);margin-top:8px">`;
    D.rules.history.forEach(hi=>{
      h += `<div style="position:relative;padding:0 0 12px 8px">
        <div style="position:absolute;left:-21px;top:3px;width:10px;height:10px;border-radius:50%;background:var(--coral);border:2px solid white"></div>
        <b style="font-size:.86em">${escape(String(hi.v||''))}차 ${hi.current?'(시행 중)':'개정'}</b>
        <div style="font-size:.74em;color:var(--sub)">${escape(hi.date||'')} · ${escape(hi.note||'')}</div>
      </div>`;
    });
    h += `</div></div>`;
  }

if(isManager()){
    h += `<div class="ctas" style="margin:14px 0">
      <button class="cta line" onclick="proposeAgenda('amendment')">+ 회칙 개정안 발의</button>
      <button class="cta line" onclick="proposeAgenda('normal')">+ 일반 안건</button>
    </div>`;
  }

p.innerHTML = h;
}

// ─── 개정안 리스트 렌더링 (검색 결과 갱신 시 재사용) ───
function renderAmendList(list, kind){
  if(!list || !list.length){
    return `<div class="empty" style="padding:14px"><p style="font-size:.86em">${kind==='open'?'진행 중인 개정안 없음':kind==='passed'?'확정된 개정안 없음':'반려된 개정안 없음'}</p></div>`;
  }
  return list.map(a => {
    const total = a.total || D.members.length;
    const done = (a.votes?.yes||0)+(a.votes?.no||0);
    const pct = total ? Math.round(done/total*100) : 0;
    const isOpen = kind === 'open';
    const isPass = kind === 'passed';
    const onClick = isOpen ? `openVoteModal('${a.id}')` : `openAmendmentDetail('${a.id}')`;
    const stateChip = isOpen
      ? `<span class="badge" style="background:var(--mustard);color:var(--navy);font-size:.7em">개정 중</span>`
      : isPass
        ? `<span class="badge" style="background:#E1F5EE;color:var(--good);font-size:.7em">✓ 확정</span>`
        : `<span class="badge" style="background:#FFE4DC;color:var(--bad);font-size:.7em">✕ 반려</span>`;
    return `<div class="tx-row" onclick="${onClick}" style="cursor:pointer">
      <div class="tx-info">
        <div class="t-title">${escape(a.title)} ${stateChip}</div>
        <div class="t-sub">${isOpen ? `종료 ${fmtDate(a.endDate)} · ${done}/${total}명 투표 (${pct}%)` : `종료 ${escape(a.endDate||'')} · 찬성 ${a.votes?.yes||0} / 반대 ${a.votes?.no||0}`}</div>
      </div>
      <div style="font-size:1.2em;color:var(--sub)">›</div>
    </div>`;
  }).join('');
}

// ─── 개정안 검색: 카드 안에서 즉시 필터 ───
function filterAmendments(q){
  q = (q||'').trim().toLowerCase();
  const all = (D.agenda || []).filter(a => a.kind === 'amendment');
  const match = a => !q || (a.title||'').toLowerCase().includes(q) || (a.detail||'').toLowerCase().includes(q);
  const open  = all.filter(a => (!a.status || a.status==='open') && match(a));
  const pass  = all.filter(a => a.status==='passed' && match(a));
  const rej   = all.filter(a => a.status==='rejected' && match(a));
  const o = $('amend-list-open'); if(o) o.innerHTML = renderAmendList(open, 'open');
  const p1 = $('amend-list-passed'); if(p1) p1.innerHTML = renderAmendList(pass, 'passed');
  const r1 = $('amend-list-rejected'); if(r1) r1.innerHTML = renderAmendList(rej, 'rejected');
}

// ─── 확정·반려된 개정안 상세 팝업 (내부 검색 포함) ───
let _amendModalState = { kind:null, query:'' };
function openAmendmentDetail(agId){
  const a = D.agenda.find(x => x.id === agId);
  if(!a) return;
  ensureAmendModal();
  renderAmendmentDetail(a);
  openModal('modal-amendment');
}
function ensureAmendModal(){
  let m = $('modal-amendment');
  if(m) return;
  m = document.createElement('div');
  m.className = 'modal-bg';
  m.id = 'modal-amendment';
  m.innerHTML = '<div class="modal" id="modal-amendment-inner" style="max-height:90vh;max-height:90dvh;display:flex;flex-direction:column"></div>';
  m.addEventListener('click', e => { if(e.target===m) closeModal('modal-amendment'); });
  document.body.appendChild(m);
}
function renderAmendmentDetail(a){
  const total = a.total || D.members.length;
  const done = (a.votes?.yes||0) + (a.votes?.no||0);
  const pct = total ? Math.round(done/total*100) : 0;
  const isPass = a.status === 'passed';
  const stateLabel = isPass ? '✓ 개정 확정' : '✕ 개정 반려';
  const stateColor = isPass ? 'var(--good)' : 'var(--bad)';
  // 같은 상태 내 다른 개정안 (검색용)
  _amendModalState.kind = a.status;
  const peers = (D.agenda||[]).filter(x => x.kind==='amendment' && x.status === a.status && x.id !== a.id);

<div style="margin-top:6px">
        <input type="text" id="amend-detail-search" placeholder="🔍 ${isPass?'확정된':'반려된'} 다른 개정안 검색"
               oninput="searchAmendmentPeers(this.value, '${a.status}')"
               style="width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--bg);outline:none;font-size:.92em">
        <div id="amend-peers" style="margin-top:8px">${renderPeersList(peers, '')}</div>
      </div>
    </div>
    <div class="ctas" style="margin-top:14px;flex-shrink:0">
      <button class="cta on" onclick="closeModal('modal-amendment')">닫기</button>
    </div>
  `;
  $('modal-amendment-inner').innerHTML = html;
}
function renderPeersList(peers, q){
  q = (q||'').trim().toLowerCase();
  const filtered = !q ? peers : peers.filter(x =>
    (x.title||'').toLowerCase().includes(q) || (x.detail||'').toLowerCase().includes(q)
  );
  if(!filtered.length){
    return `<div class="empty" style="padding:14px"><p style="font-size:.86em">${q?'검색 결과 없음':'다른 개정안 없음'}</p></div>`;
  }
  return filtered.map(x => {
    const isP = x.status === 'passed';
    const chip = isP
      ? `<span class="badge" style="background:#E1F5EE;color:var(--good);font-size:.7em">✓ 확정</span>`
      : `<span class="badge" style="background:#FFE4DC;color:var(--bad);font-size:.7em">✕ 반려</span>`;
    return `<div class="tx-row" onclick="openAmendmentDetail('${x.id}')" style="cursor:pointer">
      <div class="tx-info">
        <div class="t-title">${escape(x.title)} ${chip}</div>
        <div class="t-sub">${escape(x.endDate||'')} · 찬성 ${x.votes?.yes||0} / 반대 ${x.votes?.no||0}</div>
      </div>
      <div style="font-size:1.2em;color:var(--sub)">›</div>
    </div>`;
  }).join('');
}
function searchAmendmentPeers(q, status){
  const peers = (D.agenda||[]).filter(x => x.kind==='amendment' && x.status === status);
  const target = $('amend-peers');
  if(target) target.innerHTML = renderPeersList(peers, q);
}
async function vote(agId, side){
  const a = D.agenda.find(x=>x.id===agId);
  if(!a) return;
  a.votes = a.votes || {yes:0,no:0};
  a.voters = a.voters || {};
  if(a.voters[D.me.id]){ toast('이미 투표하셨습니다'); return; }
  a.voters[D.me.id] = side;
  a.votes[side] = (a.votes[side]||0)+1;
  // 본인 알림 처리됨 표시
  const myNotifs = D.notifications.filter(n => n.agendaId===a.id && (!n.forUser || n.forUser===D.me.id));
  myNotifs.forEach(n => n.read = true);
  checkAgendaResult(a);
  toast(side==='yes'?'찬성 투표 완료':'반대 투표 완료');
  refreshActivePage();
  pushAgenda(a);
  for(const n of myNotifs) await sb.from('notifications').update({read:true}).eq('id', n.id);
}
function quickVote(agId, side){
  const a = D.agenda.find(x=>x.id===agId);
  if(!a){ return; }
  if(a.voters && a.voters[D.me.id]){ toast('이미 투표하셨습니다'); return; }
  vote(agId, side);
}
function checkAgendaResult(a){
  const total = a.total || D.members.length;
  const yes = a.votes.yes || 0;
  const no = a.votes.no || 0;
  const half = Math.floor(total/2)+1;
  // 과반 찬성: 통과
  if(yes >= half){
    a.status = 'passed';
    onAgendaPassed(a);
  }
  // 과반 반대: 부결
  else if(no >= half){
    a.status = 'rejected';
    addSystemNotification(`안건 부결: ${a.title}`, '반대 과반으로 부결되었습니다');
  }
  // 마감일 지남: 그 시점의 다수 결정
  else if((a.endDate||'') < todayStr()){
    a.status = (yes > no) ? 'passed' : 'rejected';
    if(a.status === 'passed') onAgendaPassed(a);
  }
}
async function onAgendaPassed(a){
  if(a.kind === 'kick' && a.target){
    const m = D.members.find(x=>x.id===a.target);
    if(m){
      D.members = D.members.filter(x=>x.id!==a.target);
      addSystemNotification(`회원 제명 완료: ${m.name}`, `안건 "${a.title}" 통과로 제명되었습니다`);
      // 제명: 해당 회의 멤버십만 삭제 (다른 회는 유지)
      await sb.from('memberships').delete().eq('user_id', a.target).eq('group_id', activeGroupId);
    }
  } else if(a.kind === 'amendment'){
    // 회칙 개정안 통과 → 시행 회칙 이력에 기록
    D.rules = D.rules || { current:{}, history:[] };
    D.rules.history = D.rules.history || [];
    // 직전 시행 중 표시 해제
    D.rules.history.forEach(h => { if(h) h.current = false; });
    const nextV = (D.rules.history.reduce((m,h) => Math.max(m, parseInt(h.v)||0), 0) || 0) + 1;
    D.rules.history.push({
      v: nextV,
      date: todayStr(),
      note: a.title,
      current: true,
      agendaId: a.id
    });
    if(D.rules.current){
      D.rules.current.title = a.title || D.rules.current.title;
      D.rules.current.date = todayStr();
    }
    try{ await pushRules(); }catch(_){}
    addSystemNotification(`회칙 개정 확정: ${a.title}`, '찬성 과반으로 회칙이 개정되었습니다');
  } else {
    addSystemNotification(`안건 통과: ${a.title}`, '찬성 과반으로 통과되었습니다');
  }
}
function addSystemNotification(title, body){
  const n = {
    id:crypto.randomUUID(),
    type:'info', title, body,
    createdAt:todayStr(), read:false
  };
  D.notifications.push(n);
  pushNotification(n);
}
async function dismissNotif(id){
  const n = D.notifications.find(x=>x.id===id);
  if(n){ n.read = true; await sb.from('notifications').update({read:true}).eq('id',id); }
  refreshActivePage();
}

// ════════════════════════════════════════
// 더보기
// ════════════════════════════════════════
function renderMore(){
  const p = $('page-more');
  const pendingApp = D.applicants.filter(a=>a.status==='pending').length;

// 초대하기 큰 CTA (누구나, 최상단)
  const code = D.group.inviteCode || '';
  let h = `<div class="c" style="background:linear-gradient(135deg,var(--coral),var(--mustard));border:none;color:white">
    <div class="c-tag" style="color:white;opacity:.9">📨 회원 초대</div>
    <div class="c-title" style="color:white;font-size:1.1em">친구·지인을 모통에 초대하세요</div>
    ${code ? `<div style="background:white;color:#2B2D42;border-radius:14px;padding:18px;margin:12px 0;text-align:center;font-family:monospace;font-weight:900;font-size:2.4em;letter-spacing:10px;box-shadow:0 2px 8px rgba(0,0,0,.08)">${code}</div>` : ''}
    <button class="cta on" style="width:100%;background:white;color:var(--coral);font-size:1.1em;padding:16px;font-weight:800" onclick="shareInvite()">📲 문자로 초대 보내기</button>
    <div style="display:flex;gap:8px;margin-top:8px">
      <button class="cta line" style="flex:1;background:rgba(255,255,255,.2);border-color:white;color:white" onclick="copyInviteCode()">📋 코드만 복사</button>
      <button class="cta line" style="flex:1;background:rgba(255,255,255,.2);border-color:white;color:white" onclick="pickContactsForInvite()">📱 연락처에서 고르기</button>
    </div>
  </div>`;

// 모임 바꾸기 (다중 모임 관리)
  const gcount = (myMemberships||[]).length;
  h += `<div class="c" onclick="openGroupSwitcher()" style="cursor:pointer">
    <div class="c-row">
      <div>
        <div class="c-tag">🔄 모임 바꾸기 / 다중 모임 관리</div>
        <div class="c-title">현재: ${escape(D.group.name||'(없음)')}${gcount>1?` · 총 ${gcount}개 가입`:''}</div>
        <div class="c-sub">다른 모임 참여 · 새 모임 만들기 · 나가기</div>
      </div>
      <div style="font-size:1.4em">›</div>
    </div>
  </div>`;

// 모임 정보 수정 (회장만)
  if(isManager()){
    const pn = D.group.parentName || '';
    h += `<div class="c" onclick="openEditGroupInfo()" style="cursor:pointer">
      <div class="c-row">
        <div>
          <div class="c-tag">✏️ 모임 정보 수정</div>
          <div class="c-title">${pn?escape(pn)+' / ':''}${escape(D.group.name||'')}</div>
          <div class="c-sub">상위 단체·모임 이름 변경</div>
        </div>
        <div style="font-size:1.4em">›</div>
      </div>
    </div>`;
  }

h += `<div class="c" style="background:linear-gradient(135deg,#FFF4ED,#FFFBED);border-color:var(--coral)">
    <div class="c-row" onclick="goto('applicants')">
      <div>
        <div class="c-tag">📥 가입 신청</div>
        <div class="c-title">대기 중인 신청 ${pendingApp}건</div>
      </div>
      <div style="font-size:1.4em;color:var(--coral)">›</div>
    </div>
  </div>`;

// 회원 명부 — 이름이 메인(큰 글씨), 별명/직업은 그 아래 작은 글씨 (아이디는 절대 노출 X)
  h += `<div class="c"><div class="c-tag">회원 명부 (${D.members.length}명)</div>`;
  D.members.forEach(m=>{
    const nm = m.name || '회원';
    const nick = (m.nickname || '').trim();
    h += `<div class="member">
      <div class="avatar">${escape(nm.charAt(0))}</div>
      <div style="flex:1;min-width:0">
        <b style="font-size:1.05em">${escape(nm)}${m.id===D.me.id?' <span style="color:var(--coral);font-weight:700;font-size:.88em">(나)</span>':''}</b>
        ${nick?`<div style="font-size:.84em;color:var(--sub);font-weight:500;margin-top:2px">${escape(nick)}</div>`:''}
        ${m.phone?`<div class="c-sub" style="margin-top:1px">${escape(m.phone)}</div>`:''}
      </div>
      <span class="badge ${roleBadgeClass(m.role)}">${roleLabel(m.role)}</span>
      <button class="member-action" onclick="openMemberMenu('${m.id}')">⋮</button>
    </div>`;
  });
  if(isManager()){
    h += `<button class="cta line" style="margin-top:10px;width:100%" onclick="openMemberModal()">+ 회원 추가</button>`;
  }
  h += `</div>`;

// 직책 인계
  h += `<div class="c" style="background:linear-gradient(135deg,#FFE9DD,#FFF5DD);border-color:var(--mustard)">
    <div class="c-tag">⭐ 직책 인계 (킬러 기능)</div>
    <div class="c-title">회장·총무 자리 넘기기</div>
    <div class="c-sub">권한·문서·내역 자동 이전 + 스냅샷 보관</div>
    <div class="ctas">
      <div class="cta on" onclick="goto('transfer')">시작</div>
    </div>
  </div>`;

// 자산 대여
  const avAssets = D.assets.filter(a=>a.status==='available').length;
  const rentAssets = D.assets.filter(a=>a.status==='rented').length;
  h += `<div class="c" onclick="goto('assets')">
    <div class="c-row">
      <div>
        <div class="c-tag">📦 자산 대여</div>
        <div class="c-title">전체 ${D.assets.length}개 · 가용 ${avAssets} · 대여중 ${rentAssets}</div>
      </div>
      <div style="font-size:1.4em">›</div>
    </div>
  </div>`;

// 결산 리포트
  h += `<div class="c" onclick="goto('report')">
    <div class="c-row">
      <div>
        <div class="c-tag">📊 결산 리포트</div>
        <div class="c-title">기간별 PDF 생성·인쇄</div>
      </div>
      <div style="font-size:1.4em">›</div>
    </div>
  </div>`;

// 엑셀 대량 등록
  h += `<div class="c" onclick="goto('bulk')">
    <div class="c-row">
      <div>
        <div class="c-tag">📥 엑셀 대량 등록</div>
        <div class="c-title">기존 엑셀·다른 앱 데이터 한 번에 가져오기</div>
        <div class="c-sub">양식 다운로드 → 작성 → 업로드 → 미리보기 → 확정</div>
      </div>
      <div style="font-size:1.4em">›</div>
    </div>
  </div>`;

// 매칭 검수 (검수자만 — 총무 우선, 없으면 회장)
  if(canReview()){
    const pendingCnt = D.transactions.filter(t => t.matchStatus === 'proposed').length;
    h += `<div class="c" onclick="goto('match-review')" style="${pendingCnt>0?'border-color:var(--mustard);background:linear-gradient(135deg,#FFF8E5,#FFFFFF)':''}">
      <div class="c-row">
        <div>
          <div class="c-tag">🔍 회원 매칭 검수 (${reviewerLabel()})</div>
          <div class="c-title">${pendingCnt>0?`${pendingCnt}건 검수 대기`:'대기 항목 없음'}</div>
          <div class="c-sub">회원이 본인 거래라고 신청한 항목 확인</div>
        </div>
        <div style="font-size:1.4em">›</div>
      </div>
    </div>`;
  }

// 어르신 모드
  h += `<div class="c" style="background:#E8F5E9">
    <div class="c-row" onclick="openModal('modal-fontsize')">
      <div>
        <div class="c-tag" style="color:var(--good)">👴 어르신 모드</div>
        <div class="c-title">글자 크기 — ${fontSizeLabel(D.settings.fontSize)}</div>
      </div>
      <div style="font-size:1.4em">›</div>
    </div>
  </div>`;

// 도움말
  h += `<div class="c" onclick="showGuide(0)">
    <div class="c-row">
      <div>
        <div class="c-tag">📖 도움말</div>
        <div class="c-title">기능 가이드 다시 보기</div>
      </div>
      <div style="font-size:1.4em">›</div>
    </div>
  </div>`;

// 데이터 관리
  h += `<div class="c">
    <div class="c-tag">데이터</div>
    <div class="ctas">
      <button class="cta line" onclick="exportData()">📤 백업 받기</button>
      <button class="cta line" onclick="doSignOut()">🚪 로그아웃</button>
    </div>
  </div>`;

h += `<div style="text-align:center;font-size:.84em;color:var(--sub);margin:20px 0;line-height:1.6">
    모통 — 모임의 모든 게 모통에
  </div>`;

p.innerHTML = h;
}
function fontSizeLabel(s){ return {small:'작게',normal:'보통',large:'크게',xlarge:'매우 크게'}[s] || '보통'; }

function openMemberModal(){
  $('mb-name').value=''; $('mb-phone').value=''; $('mb-role').value='member';
  openModal('modal-member');
}
async function saveMember(){
  // v2: 직접 회원 추가 = 가입 신청 형태로만 가능
  toast('v2부터는 다른 회원이 직접 가입(초대코드)해야 합니다');
  closeModal('modal-member');
}

// ── 회원 메뉴 (회원 줄 옆 ⋮ 버튼) ──
function openMemberMenu(memberId){
  const m = D.members.find(x=>x.id===memberId);
  if(!m) return;
  const isMe = m.id === D.me.id;
  const nick = (m.nickname || '').trim();
  let h = `<h3>${escape(m.name||'회원')}${isMe?' <span style="color:var(--coral)">(나)</span>':''}</h3>
    ${nick?`<div style="text-align:center;color:var(--sub);font-size:.96em;font-weight:500;margin-top:-10px;margin-bottom:10px">${escape(nick)}</div>`:''}
    <div style="text-align:center;margin-bottom:14px">
      <span class="badge ${roleBadgeClass(m.role)}" style="font-size:.84em;padding:4px 12px">${roleLabel(m.role)}</span>
    </div>`;

// 본인이면 — 정보 수정 + 자발 탈퇴
  if(isMe){
    h += `<button class="menu-action" onclick="closeModal('modal-member-menu');openEditMember()">
      <span class="ic">✏️</span><span>내 정보 수정</span>
    </button>`;
    if(m.role === 'member'){
      h += `<button class="menu-action danger" onclick="closeModal('modal-member-menu');confirmLeave()">
        <span class="ic">🚪</span><span>모임 탈퇴</span>
      </button>`;
    } else {
      h += `<div style="font-size:.78em;color:var(--sub);text-align:center;padding:12px;background:var(--bg);border-radius:10px;margin-top:6px">
        회장·총무는 직책 인계 후 탈퇴할 수 있습니다
      </div>`;
    }
  }
  // 다른 회원이고 — 본인이 관리자면 제명 발의 가능
  else if(isManager()){
    h += `<div style="font-size:.78em;color:var(--sub);text-align:center;padding:8px;background:var(--bg);border-radius:10px;margin-bottom:8px">
      본인이 아닌 회원의 정보는 수정할 수 없습니다
    </div>`;
    h += `<button class="menu-action danger" onclick="closeModal('modal-member-menu');openKickModal('${m.id}')">
      <span class="ic">🚪</span>
      <span>회원 내보내기 발의<br><small style="font-weight:500;color:var(--sub)">모든 회원 과반 동의 시 제명</small></span>
    </button>`;
  }
  // 다른 회원이고 일반 회원 — 정보 보기만
  else {
    h += `<div style="font-size:.84em;color:var(--sub);text-align:center;padding:18px">
      ${m.phone ? '연락처: '+escape(m.phone) : '연락처 정보 없음'}
    </div>`;
  }

h += `<div class="ctas" style="margin-top:10px"><button class="cta" onclick="closeModal('modal-member-menu')">닫기</button></div>`;
  $('modal-member-menu-inner').innerHTML = h;
  openModal('modal-member-menu');
}

// ── 본인 정보 수정 ──
function openEditMember(){
  const me = D.members.find(x=>x.id===D.me.id);
  $('em-name').value = (me && me.name) ? me.name : '';
  $('em-nickname').value = (me && me.nickname) ? me.nickname : '';
  $('em-phone').value = (me && me.phone) ? me.phone : '';
  openModal('modal-edit-member');
}
async function saveEditMember(){
  const name = $('em-name').value.trim();
  const nickname = $('em-nickname').value.trim();
  const phone = $('em-phone').value.trim();
  if(!name){ toast('이름을 입력해주세요'); return; }
  const me = D.members.find(x=>x.id===D.me.id);
  if(me){ me.name = name; me.nickname = nickname; me.phone = phone; }
  D.me.name = name; D.me.nickname = nickname;
  closeModal('modal-edit-member');
  toast('정보 수정 완료');
  refreshActivePage();
  const { error } = await sb.from('profiles')
    .update({ name, nickname: nickname || null, phone: phone || null })
    .eq('id', currentSession.user.id);
  if(error){ toast('저장 실패: '+humanizeError(error)); }
}

// ── 자발 탈퇴 (현재 활성 회만 나감, 다른 회는 유지) ──
async function confirmLeave(){
  if(!confirm('이 모임만 탈퇴합니다.\n다른 가입한 회는 그대로 유지돼요.\n계속할까요?')) return;
  const myName = D.me.name;
  addSystemNotification(`${myName} 회원 자발 탈퇴`, '본인 의사로 모임을 떠나셨습니다');
  await sb.from('memberships').delete().eq('user_id', currentSession.user.id).eq('group_id', activeGroupId);
  toast('모임 탈퇴 완료');
  localStorage.removeItem('motong-active-gid');
  await refreshMemberships();
  if(myMemberships.length === 0){
    activeGroupId = null;
    showAuth('group-screen');
  } else {
    await switchActiveGroup(myMemberships[0].group_id);
  }
}

// ── 회원 내보내기 발의 (제명) ──
let kickTargetId = null;
function openKickModal(memberId){
  const m = D.members.find(x=>x.id===memberId);
  if(!m) return;
  kickTargetId = memberId;
  $('kick-target-name').textContent = m.name;
  $('kick-reason').value = '';
  $('kick-end').value = addDays(todayStr(), 7);
  openModal('modal-kick');
}
async function saveKickAgenda(){
  const reason = $('kick-reason').value.trim();
  if(!reason){ toast('사유를 입력하세요'); return; }
  const target = D.members.find(x=>x.id===kickTargetId);
  if(!target){ toast('대상 회원을 찾을 수 없습니다'); return; }
  const end = $('kick-end').value || addDays(todayStr(), 7);
  const a = {
    id:crypto.randomUUID(),
    title:`${target.name} 회원 내보내기`,
    detail: reason,
    kind:'kick', target:kickTargetId,
    by:D.me.id, endDate:end,
    votes:{yes:0,no:0}, voters:{}, total:D.members.length, status:'open'
  };
  D.agenda.push(a);
  closeModal('modal-kick');
  toast('제명 안건 발의 — 알림 발송 중...');
  refreshActivePage();
  await pushAgenda(a);
  for(const m of D.members){
    if(m.id === D.me.id) continue;
    const n = {
      id:crypto.randomUUID(),
      type:'kick',
      title: m.id === kickTargetId ? `본인 제명 안건이 발의됨` : `${target.name} 회원 내보내기 안건 — 투표 필요`,
      body:`${fmtDate(end)}까지 · 사유: ${reason.slice(0,30)}${reason.length>30?'...':''}`,
      agendaId:a.id, forUser:m.id, read:false, createdAt:todayStr()
    };
    D.notifications.push(n);
    pushNotification(n);
  }
  refreshActivePage();
}

// ─── 초대 메시지 + 공유 ───
function buildInviteText(){
  const code = D.group.inviteCode || '';
  const gname = D.group.name || '우리 모임';
  const link = location.origin + location.pathname; // 현재 앱 주소
  return `[모통] ${gname}에 초대합니다\n\n` +
         `초대 코드: ${code}\n` +
         `앱 열기: ${link}\n\n` +
         `앱에서 회원가입할 때 초대 코드를 입력하면 자동으로 가입돼요.`;
}

// 큰 초대 버튼: navigator.share 우선 → 안되면 sms: 링크
async function shareInvite(){
  const code = D.group.inviteCode || '';
  if(!code){ toast('초대 코드 없음'); return; }
  const text = buildInviteText();
  const link = location.origin + location.pathname;
  if(navigator.share){
    try{
      await navigator.share({ title:'모통 초대', text, url:link });
      return;
    }catch(e){ /* 사용자 취소 시 fall-through */
      if(e && e.name === 'AbortError') return;
    }
  }
  // 폴백: 문자앱 직접 열기
  const sms = 'sms:?body=' + encodeURIComponent(text);
  window.location.href = sms;
}

// 안드로이드 Contact Picker (있을 때만 동작), 그 외엔 navigator.share 폴백
async function pickContactsForInvite(){
  const code = D.group.inviteCode || '';
  if(!code){ toast('초대 코드 없음'); return; }
  const text = buildInviteText();
  if(!('contacts' in navigator) || !navigator.contacts.select){
    // iOS Safari 등 미지원 — 일반 공유로 대체
    toast('이 기기는 연락처 직접 검색을 지원하지 않아 공유창을 엽니다');
    return shareInvite();
  }
  try{
    const props = ['name','tel'];
    const opts = { multiple:true };
    const picked = await navigator.contacts.select(props, opts);
    if(!picked || picked.length===0){ toast('선택된 연락처 없음'); return; }
    // 첫 번째 번호로 sms 일괄 발송 (대부분 OS는 다중 수신자 지원)
    const tels = picked.flatMap(p => (p.tel||[])).map(t => String(t).replace(/[^0-9+]/g,'')).filter(Boolean);
    if(tels.length===0){ toast('전화번호 없는 연락처'); return; }
    const sms = 'sms:' + tels.join(',') + '?body=' + encodeURIComponent(text);
    window.location.href = sms;
  }catch(e){
    console.warn(e);
    toast('연락처 가져오기 취소되었거나 실패했어요');
  }
}

// 모임 정보 수정 모달 열기
function openEditGroupInfo(){
  if(!isManager()){ toast('회장만 수정할 수 있어요'); return; }
  $('eg-parent').value = D.group.parentName || '';
  $('eg-name').value = D.group.name || '';
  openModal('modal-edit-group');
}

async function saveGroupInfo(){
  const name = $('eg-name').value.trim();
  const parent = $('eg-parent').value.trim();
  if(!name){ toast('모임 이름은 비울 수 없어요'); return; }
  $('eg-save-btn').disabled = true; $('eg-save-btn').textContent = '저장 중...';
  const { error } = await sb.from('groups')
    .update({ name, parent_name: parent || null })
    .eq('id', activeGroupId);
  $('eg-save-btn').disabled = false; $('eg-save-btn').textContent = '저장';
  if(error){ toast('저장 실패: '+humanizeError(error)); return; }
  D.group.name = name;
  D.group.parentName = parent;
  await refreshMemberships();  // 모임 바꾸기 목록도 최신으로
  closeModal('modal-edit-group');
  toast('모임 정보 저장 완료');
  refreshActivePage();
}

// 모임 바꾸기 모달 열기 + 목록 렌더
async function openGroupSwitcher(){
  await refreshMemberships();
  const list = $('groups-list');
  list.innerHTML = '';
  if(myMemberships.length === 0){
    list.innerHTML = '<div class="c-sub" style="text-align:center;padding:14px">가입한 모임이 없습니다</div>';
  } else {
    myMemberships.forEach(m => {
      const isActive = m.group_id === activeGroupId;
      const isCaptain = m.role === 'captain';
      const div = document.createElement('div');
      div.className = 'c';
      div.style.cssText = 'padding:14px;border:2px solid '+(isActive?'var(--coral)':'#eee');

// 정보 영역 (탭하면 전환)
      const info = document.createElement('div');
      info.style.cssText = 'cursor:pointer';
      const pn = m.group?.parent_name || '';
      info.innerHTML = `
        <div class="c-row">
          <div>
            <div class="c-tag">${isActive?'✅ 현재 모임':'다른 모임'} · ${roleLabel(m.role)}</div>
            ${pn?`<div style="font-size:.84em;color:var(--sub);font-weight:600;margin-bottom:2px">${escape(pn)}</div>`:''}
            <div class="c-title">${escape(m.group?.name||'(이름 없음)')}</div>
            <div class="c-sub">초대 코드: ${m.group?.invite_code||'-'}</div>
          </div>
          <div style="font-size:1.4em">${isActive?'':'›'}</div>
        </div>`;
      if(!isActive) info.onclick = () => switchActiveGroup(m.group_id);
      div.appendChild(info);

// 나가기/삭제 버튼 영역
      const btns = document.createElement('div');
      btns.style.cssText = 'display:flex;gap:8px;margin-top:10px';
      if(isCaptain){
        btns.innerHTML = `
          <button class="cta danger" style="flex:1;font-size:.92em;padding:10px" data-gid="${m.group_id}" data-name="${escape(m.group?.name||'')}">🗑️ 모임 삭제</button>`;
        btns.firstElementChild.onclick = (e) => {
          e.stopPropagation();
          openLeaveConfirm(m.group_id, m.group?.name || '', 'delete');
        };
      } else {
        btns.innerHTML = `
          <button class="cta line" style="flex:1;font-size:.92em;padding:10px;border-color:var(--bad);color:var(--bad)" data-gid="${m.group_id}" data-name="${escape(m.group?.name||'')}">🚪 모임 나가기</button>`;
        btns.firstElementChild.onclick = (e) => {
          e.stopPropagation();
          openLeaveConfirm(m.group_id, m.group?.name || '', 'leave');
        };
      }
      div.appendChild(btns);

list.appendChild(div);
    });
  }
  openModal('modal-groups');
}

// ─── 나가기/삭제 5초 카운트다운 모달 ───
let leaveCtx = null;       // {gid, name, mode: 'leave'|'delete'}
let leaveTimer = null;
let leaveCount = 5;

function cancelLeave(){
  if(leaveTimer){ clearInterval(leaveTimer); leaveTimer = null; }
  leaveCtx = null;
  closeModal('modal-leave-confirm');
}

async function executeLeave(){
  if(!leaveCtx) return;
  if(leaveTimer){ clearInterval(leaveTimer); leaveTimer = null; }
  const { gid, name, mode } = leaveCtx;
  leaveCtx = null;
  closeModal('modal-leave-confirm');

if(mode === 'delete'){
    // 모임 통째 삭제 — cascade로 모든 데이터 함께 삭제됨
    const { error } = await sb.from('groups').delete().eq('id', gid);
    if(error){ toast('삭제 실패: '+humanizeError(error)); return; }
    toast(`「${name}」 삭제 완료`);
  } else {
    // 본인 멤버십만 삭제
    const { error } = await sb.from('memberships').delete()
      .eq('user_id', currentSession.user.id).eq('group_id', gid);
    if(error){ toast('나가기 실패: '+humanizeError(error)); return; }
    toast(`「${name}」 나가기 완료`);
  }

// 활성 모임 재선정
  await refreshMemberships();
  if(myMemberships.length === 0){
    activeGroupId = null;
    localStorage.removeItem('motong-active-gid');
    showAuth('group-screen');
  } else {
    if(gid === activeGroupId){
      await switchActiveGroup(myMemberships[0].group_id);
    } else {
      // 활성 모임이 그대로면 목록만 새로 그림
      openGroupSwitcher();
    }
  }
}
function importData(){
  const inp = document.createElement('input');
  inp.type='file'; inp.accept='application/json';
  inp.onchange = e=>{
    const f = e.target.files[0]; if(!f) return;
    const r = new FileReader();
    r.onload = ev=>{
      try{ D = JSON.parse(ev.target.result); saveData(); applyFontSize(); renderHome(); toast('불러오기 성공'); goto('home'); }
      catch{ toast('파일을 읽지 못했어요'); }
    };
    r.readAsText(f);
  };
  inp.click();
}
function resetData(){
  if(!confirm('모든 데이터를 삭제하고 처음부터 시작합니다. 계속할까요?')) return;
  localStorage.removeItem('motong-data');
  localStorage.removeItem('motong-guide-done');
  D = loadData();
  applyFontSize();
  $('welcome').classList.remove('hide');
  toast('초기화 완료 — 다시 시작');
}

// ════════════════════════════════════════
// 회칙 PDF
// ════════════════════════════════════════
function uploadRulesPDF(e){
  const f = e.target.files[0]; if(!f) return;
  // 허용 형식: PDF · JPG · PNG 만
  const okType = /^application\/pdf$|^image\/(jpeg|png)$/.test(f.type)
              || /\.(pdf|jpe?g|png)$/i.test(f.name);
  if(!okType){
    toast('PDF · JPG · PNG 파일만 가능해요');
    e.target.value = '';
    return;
  }
  if(f.size > 5*1024*1024){ toast('5MB 이하 파일만 가능'); e.target.value=''; return; }
  const r = new FileReader();
  r.onload = async ev => {
    D.rules.current.pdfData = ev.target.result;
    D.rules.current.pdfName = f.name;
    toast('회칙 파일 저장됨');
    refreshActivePage();
    await pushRules();
  };
  r.readAsDataURL(f);
  e.target.value = '';
}
// 이전에 만들어둔 Blob URL을 모달이 닫힐 때 해제하기 위해 보관
let _pdfBlobUrl = null;
function _revokePdfBlob(){
  if(_pdfBlobUrl){ try{ URL.revokeObjectURL(_pdfBlobUrl); }catch(_){} _pdfBlobUrl = null; }
}
function _dataUrlToBlob(dataUrl){
  const [meta, b64] = dataUrl.split(',');
  const mime = (meta.match(/^data:([^;]+)/) || [,'application/octet-stream'])[1];
  const bin = atob(b64);
  const u8 = new Uint8Array(bin.length);
  for(let i=0;i<bin.length;i++) u8[i] = bin.charCodeAt(i);
  return new Blob([u8], { type: mime });
}

function openPDFViewer(){
  const r = D.rules.current;
  if(!r.pdfData){ toast('첨부 파일이 없습니다'); return; }
  $('pdf-title').textContent = r.title || (r.pdfName || '회칙');
  // 파일 형식별 분기 (data URL의 mime 또는 확장자)
  const data = r.pdfData;
  const name = (r.pdfName || '').toLowerCase();
  const isImg = /^data:image\/(jpeg|png)/.test(data) || /\.(jpe?g|png)$/i.test(name);
  const isPdf = /^data:application\/pdf/.test(data) || /\.pdf$/i.test(name);

_revokePdfBlob();
  let html;
  if(isImg){
    // 이미지 미리보기 — 가로 스크롤·핀치 줌 가능하도록
    html = `<div style="width:100%;height:100%;overflow:auto;background:#222;text-align:center">
      <img src="${data}" alt="회칙" style="max-width:100%;height:auto;display:inline-block">
    </div>`;
  } else if(isPdf){
    // 데이터 URL은 iOS Safari에서 embed/iframe 동작이 불안정 → Blob URL로 변환
    try{
      const blob = _dataUrlToBlob(data);
      _pdfBlobUrl = URL.createObjectURL(blob);
      html = `<iframe src="${_pdfBlobUrl}" style="width:100%;height:100%;border:0" title="회칙 PDF"></iframe>
        <div style="position:absolute;bottom:8px;left:0;right:0;text-align:center;pointer-events:none">
          <span style="background:rgba(43,45,66,.85);color:white;padding:6px 12px;border-radius:100px;font-size:.74em;font-weight:700">PDF가 안 보이면 ⬇ 저장으로 받아 열어보세요</span>
        </div>`;
    }catch(e){
      html = `<div style="text-align:center;padding:40px 20px">
        <div style="font-size:3em;margin-bottom:12px">📄</div>
        <p style="font-weight:700;margin-bottom:8px">이 기기에서 미리보기를 표시하지 못했어요</p>
        <button class="cta on" style="margin-top:14px" onclick="downloadCurrentPDF()">⬇ PDF 저장하기</button>
      </div>`;
    }
  } else {
    html = `<div style="text-align:center;padding:40px 20px">
      <div style="font-size:3em;margin-bottom:12px">⚠️</div>
      <p style="font-size:1em;font-weight:700;margin-bottom:8px">지원하지 않는 파일 형식</p>
      <p style="color:var(--sub);font-size:.92em">PDF · JPG · PNG만 업로드 가능합니다</p>
    </div>`;
  }
  $('pdf-body').innerHTML = html;
  openModal('modal-pdf');
}
// PDF 모달 닫힐 때 Blob URL 해제
(function(){
  const m = document.getElementById('modal-pdf');
  if(m){
    new MutationObserver(() => { if(!m.classList.contains('on')) _revokePdfBlob(); })
      .observe(m, { attributes:true, attributeFilter:['class'] });
  }
})();
function downloadCurrentPDF(){
  const r = D.rules.current;
  if(!r.pdfData){ return; }
  const a = document.createElement('a');
  a.href = r.pdfData;
  a.download = r.pdfName || ((r.title||'회칙')+'.pdf');
  a.click();
}

// ════════════════════════════════════════
// 엑셀 업로드 (회비)
// ════════════════════════════════════════
function importExcel(e){
  const f = e.target.files[0]; if(!f) return;
  if(typeof XLSX === 'undefined'){ toast('엑셀 라이브러리 로드 중. 잠시 후 다시 시도'); return; }
  const r = new FileReader();
  r.onload = async ev => {
    try{
      const wb = XLSX.read(ev.target.result, { type:'array' });
      const sheet = wb.Sheets[wb.SheetNames[0]];
      const rows = XLSX.utils.sheet_to_json(sheet, { defval:'' });
      const newTxs = [];
      rows.forEach(row => {
        const keys = Object.keys(row);
        const dateKey = keys.find(k=>/날짜|일자|date/i.test(k));
        const memoKey = keys.find(k=>/적요|내용|memo|description|title/i.test(k));
        const inKey = keys.find(k=>/입금|수입|in|deposit/i.test(k));
        const outKey = keys.find(k=>/출금|지출|out|withdraw/i.test(k));

// ════════════════════════════════════════
// 가입 신청 관리
// ════════════════════════════════════════
function renderApplicants(){
  const p = $('page-applicants');
  let h = '';
  const pending = D.applicants.filter(a=>a.status==='pending');
  const handled = D.applicants.filter(a=>a.status!=='pending');

if(isManager()){
    h += `<div class="ctas" style="margin-bottom:10px">
      <button class="cta line" onclick="openApplyModal()">+ 신청 받기</button>
    </div>`;
  }

if(pending.length===0 && handled.length===0){
    h += '<div class="empty"><div class="ei">📭</div><p>가입 신청이 없습니다</p></div>';
  }

if(pending.length){
    h += `<div class="list-head">대기 중 (${pending.length})</div>`;
    pending.forEach(a => {
      h += `<div class="applicant">
        <div class="member" style="border:0;padding:0">
          <div class="avatar lg">${a.name.charAt(0)}</div>
          <div style="flex:1"><b style="font-size:.95em">${escape(a.name)}</b>
            <div class="c-sub">${a.appliedAt} 신청</div>
          </div>
          <span class="badge" style="background:#FFE4D5;color:var(--coral)">대기</span>
        </div>
        <div class="a-msg">${escape(a.message||'(메시지 없음)')}</div>
        <div class="a-foot">
          <span>📞 ${escape(a.phone||'')}</span>
        </div>
        ${isManager() ? `<div class="ctas" style="margin-top:8px">
          <button class="cta go" onclick="approveApplicant('${a.id}')">✓ 승인</button>
          <button class="cta danger" onclick="rejectApplicant('${a.id}')">거부</button>
        </div>` : ''}
      </div>`;
    });
  }

if(handled.length){
    h += `<div class="list-head">처리 완료</div>`;
    handled.slice(0,10).forEach(a => {
      const isApp = a.status === 'approved';
      h += `<div class="applicant handled">
        <div class="member" style="border:0;padding:0">
          <div class="avatar lg gray">${a.name.charAt(0)}</div>
          <div style="flex:1"><b style="font-size:.95em">${escape(a.name)}</b>
            <div class="c-sub">${a.appliedAt} 신청</div>
          </div>
          <span class="badge" style="background:${isApp?'#E1F5EE':'#FCE4EC'};color:${isApp?'var(--good)':'var(--bad)'}">${isApp?'승인됨':'거부됨'}</span>
        </div>
        ${a.rejectReason ? `<div class="a-msg" style="font-size:.78em">사유: ${escape(a.rejectReason)}</div>`:''}
      </div>`;
    });
  }

p.innerHTML = h;
}
function openApplyModal(){
  $('ap-name').value=''; $('ap-phone').value=''; $('ap-msg').value='';
  openModal('modal-apply');
}
async function saveApplicant(){
  const name = $('ap-name').value.trim();
  if(!name){ toast('이름을 입력하세요'); return; }
  const a = {
    id:crypto.randomUUID(),
    name,
    phone:$('ap-phone').value,
    message:$('ap-msg').value,
    appliedAt:todayStr(),
    status:'pending'
  };
  D.applicants.push(a);
  closeModal('modal-apply');
  toast('가입 신청 추가됨');
  refreshActivePage();
  pushApplicant(a);
}
async function approveApplicant(id){
  const a = D.applicants.find(x=>x.id===id);
  if(!a) return;
  if(!isManager()){ toast('권한 없음'); return; }
  a.status = 'approved';
  addSystemNotification(`신규 회원 환영: ${a.name}`, `초대 코드 ${D.group.inviteCode} 알려주고 가입하시도록 안내하세요`);
  toast(`${a.name} 승인. 초대 코드 알려주세요`);
  refreshActivePage();
  await sb.from('applicants').update({ status:'approved', handled_at:new Date().toISOString(), handled_by:currentSession.user.id }).eq('id', id);
}
async function rejectApplicant(id){
  const a = D.applicants.find(x=>x.id===id);
  if(!a) return;
  if(!isManager()){ toast('권한 없음'); return; }
  const reason = prompt('거부 사유를 입력하세요 (선택)') || '';
  a.status = 'rejected';
  a.rejectReason = reason;
  toast('신청 거부 처리');
  refreshActivePage();
  await sb.from('applicants').update({ status:'rejected', reject_reason:reason, handled_at:new Date().toISOString() }).eq('id', id);
}

// ════════════════════════════════════════
// 자산 대여
// ════════════════════════════════════════
let rentTargetAssetId = null;
function renderAssets(){
  const p = $('page-assets');
  let h = '';
  if(isManager()){
    h += `<div class="ctas" style="margin-bottom:10px">
      <button class="cta line" onclick="openAssetModal()">+ 자산 추가</button>
    </div>`;
  }
  h += `<div class="c">`;
  if(D.assets.length===0){
    h += '<div class="empty"><div class="ei">📦</div><p>등록된 자산이 없습니다</p></div>';
  } else {
    D.assets.forEach(a => {
      const isAv = a.status === 'available';
      const renter = a.rentedBy ? memberName(a.rentedBy) : '';
      h += `<div class="asset-row">
        <div class="asset-icon">${a.icon||'📦'}</div>
        <div class="asset-info">
          <b>${escape(a.name)}</b>
          <div class="as-status ${isAv?'av':'rent'}">${isAv ? '✓ 가용' : `대여중 — ${escape(renter)} (~${a.rentedUntil||''})`}</div>
        </div>
        ${isAv
          ? `<button class="mini-btn" style="background:var(--coral);color:white" onclick="openRentModal('${a.id}')">대여</button>`
          : (a.rentedBy === D.me.id || isManager())
            ? `<button class="mini-btn" style="background:var(--good);color:white" onclick="returnAsset('${a.id}')">반납</button>`
            : ''
        }
        ${isManager() ? `<button class="member-action" onclick="deleteAsset('${a.id}')">×</button>` : ''}
      </div>`;
    });
  }
  h += `</div>`;

// 대여 이력
  if(D.rentals.length){
    h += `<div class="list-head">최근 대여 이력</div><div class="c">`;
    D.rentals.slice(-8).reverse().forEach(r => {
      const asset = D.assets.find(a=>a.id===r.assetId);
      h += `<div class="tx-row">
        <div class="tx-info">
          <div class="t-title">${asset?escape(asset.name):'(삭제됨)'} · ${memberName(r.userId)}</div>
          <div class="t-sub">${r.from} ~ ${r.until} ${r.returnedAt?'· 반납 '+r.returnedAt:'· 대여중'}</div>
        </div>
      </div>`;
    });
    h += `</div>`;
  }
  p.innerHTML = h;
}
function openAssetModal(){
  $('as-icon').value='📦'; $('as-name').value=''; $('as-cat').value='';
  openModal('modal-asset');
}
async function saveAsset(){
  const name = $('as-name').value.trim();
  if(!name){ toast('이름을 입력하세요'); return; }
  const a = {
    id:crypto.randomUUID(), icon:$('as-icon').value || '📦', name,
    category:$('as-cat').value || '기타', status:'available'
  };
  D.assets.push(a);
  closeModal('modal-asset'); toast('자산 추가됨'); refreshActivePage();
  pushAsset(a);
}
async function deleteAsset(id){
  if(!isManager()){ toast('권한 없음'); return; }
  if(!confirm('이 자산을 삭제하시겠습니까?')) return;
  D.assets = D.assets.filter(a=>a.id!==id);
  refreshActivePage(); toast('삭제됨');
  await sb.from('assets').delete().eq('id', id);
}
function openRentModal(assetId){
  const a = D.assets.find(x=>x.id===assetId);
  if(!a) return;
  rentTargetAssetId = assetId;
  $('rent-title').textContent = a.name + ' 대여';
  $('rent-from').value = todayStr();
  $('rent-until').value = addDays(todayStr(), 7);
  $('rent-memo').value = '';
  openModal('modal-rent');
}
async function submitRent(){
  const a = D.assets.find(x=>x.id===rentTargetAssetId);
  if(!a) return;
  if(a.status !== 'available'){ toast('이미 대여 중'); return; }
  const from = $('rent-from').value;
  const until = $('rent-until').value;
  if(!from || !until){ toast('날짜를 입력하세요'); return; }
  a.status = 'rented';
  a.rentedBy = D.me.id; a.rentedFrom = from; a.rentedUntil = until;
  const rental = {
    id:crypto.randomUUID(), assetId:a.id, userId:D.me.id,
    from, until, memo:$('rent-memo').value,
  };
  D.rentals.push(rental);
  closeModal('modal-rent');
  toast(`${a.name} 대여 완료`);
  refreshActivePage();
  pushAsset(a); pushRental(rental);
}
async function returnAsset(assetId){
  const a = D.assets.find(x=>x.id===assetId);
  if(!a) return;
  if(!confirm(`${a.name} 반납 처리하시겠습니까?`)) return;
  a.status = 'available';
  let updatedRental = null;
  for(let i=D.rentals.length-1;i>=0;i--){
    if(D.rentals[i].assetId===assetId && !D.rentals[i].returnedAt){
      D.rentals[i].returnedAt = todayStr();
      updatedRental = D.rentals[i];
      break;
    }
  }
  delete a.rentedBy; delete a.rentedFrom; delete a.rentedUntil;
  refreshActivePage(); toast('반납 완료');
  await sb.from('assets').update({
    status:'available', rented_by:null, rented_from:null, rented_until:null
  }).eq('id', a.id);
  if(updatedRental){ pushRental(updatedRental); }
}

// ════════════════════════════════════════
// 직책 인계
// ════════════════════════════════════════
function renderTransfer(){
  const p = $('page-transfer');
  // 진행 중 인계 찾기
  const ongoing = D.transfers.find(t => t.status==='pending' && (t.fromUser===D.me.id || t.toUser===D.me.id));

let h = `<div class="c" style="background:linear-gradient(135deg,#FFE9DD,#FFF5DD);border-color:var(--mustard)">
    <div class="c-tag">⭐ 직책 인계 (킬러 기능)</div>
    <div class="c-title">회장·총무 자리 넘기기</div>
    <div class="c-sub">5분이면 권한·문서·내역까지 자동 이전</div>
  </div>`;

if(ongoing){
    const from = D.members.find(m=>m.id===ongoing.fromUser);
    const to = D.members.find(m=>m.id===ongoing.toUser);
    const isReceiver = ongoing.toUser === D.me.id;
    h += `<div class="c">
      <div class="c-tag">진행 중인 인계</div>
      <div class="c-title">${escape(roleLabel(ongoing.role))} 인계</div>
      <div class="c-sub">${escape(from.name)} → ${escape(to.name)}</div>`;
    if(ongoing.reason) h += `<div class="agenda-detail">${escape(ongoing.reason)}</div>`;
    h += `<div style="margin-top:14px">
      <div class="transfer-step done">
        <div class="ts-num">1</div>
        <div class="ts-info"><b>위임 발의</b><small>${escape(from.name)} (${ongoing.startedAt})</small></div>
      </div>
      <div class="transfer-step ${isReceiver?'now':''}">
        <div class="ts-num">2</div>
        <div class="ts-info"><b>수신자 수락</b><small>${isReceiver?'본인이 수락하실 차례':escape(to.name)+' 대기 중'}</small></div>
      </div>
      <div class="transfer-step">
        <div class="ts-num">3</div>
        <div class="ts-info"><b>권한 이전 + 스냅샷 보관</b><small>자동 처리</small></div>
      </div>
    </div>`;
    if(isReceiver){
      h += `<div class="ctas" style="margin-top:12px">
        <button class="cta go" onclick="acceptTransfer('${ongoing.id}')">✓ 수락</button>
        <button class="cta danger" onclick="declineTransfer('${ongoing.id}')">거절</button>
      </div>`;
    } else {
      h += `<div class="ctas" style="margin-top:12px">
        <button class="cta line" onclick="cancelTransfer('${ongoing.id}')">위임 취소</button>
      </div>`;
    }
    h += `</div>`;
  }
  else if(D.me.role === 'captain' || D.me.role === 'treasurer'){
    h += `<div class="c">
      <div class="c-tag">새 인계 시작</div>
      <div class="c-title">현재 직책: ${roleLabel(D.me.role)}</div>
      <div class="c-sub">아래 회원 중 한 분께 직책을 위임합니다</div>
      <div style="margin-top:10px">`;
    D.members.filter(m=>m.id!==D.me.id).forEach(m => {
      h += `<div class="member">
        <div class="avatar">${m.name.charAt(0)}</div>
        <div style="flex:1"><b>${escape(m.name)}</b>
          <div class="c-sub">${roleLabel(m.role)}</div>
        </div>
        <button class="mini-btn" style="background:var(--coral);color:white" onclick="startTransfer('${m.id}')">위임</button>
      </div>`;
    });
    h += `</div></div>`;
  } else {
    h += `<div class="c"><div class="empty"><div class="ei">⛔</div><p>회장·총무만 직책 인계를 시작할 수 있습니다</p></div></div>`;
  }

// 지난 인계 이력
  const closed = D.transfers.filter(t => t.status !== 'pending');
  if(closed.length){
    h += `<div class="list-head">인계 이력</div><div class="c">`;
    closed.slice(-5).reverse().forEach(t => {
      const fromN = memberName(t.fromUser), toN = memberName(t.toUser);
      const result = t.status === 'completed' ? '✅ 완료' : t.status === 'declined' ? '✖ 거절됨' : '⊘ 취소됨';
      h += `<div class="tx-row">
        <div class="tx-info">
          <div class="t-title">${roleLabel(t.role)} · ${fromN} → ${toN}</div>
          <div class="t-sub">${result} · ${t.startedAt}${t.completedAt?' ~ '+t.completedAt:''}</div>
        </div>
        ${t.snapshotId ? `<button class="mini-btn" style="background:var(--mustard);color:var(--navy)" onclick="viewTransferSnapshot('${t.id}')">스냅샷</button>` : ''}
      </div>`;
    });
    h += `</div>`;
  }

p.innerHTML = h;
}
async function startTransfer(toUserId){
  const reason = prompt('인계 사유 (간단히)\n예: 임기 만료 / 이사 / 사임 등', '임기 만료');
  if(reason === null) return;
  const t = {
    id:crypto.randomUUID(), role:D.me.role,
    fromUser:D.me.id, toUser:toUserId, reason,
    startedAt:todayStr(), status:'pending'
  };
  D.transfers.push(t);
  toast('인계 발의 — 수신자에게 알림 발송');
  refreshActivePage();
  await pushTransfer(t);
  const n = {
    id:crypto.randomUUID(), type:'info',
    title:`${roleLabel(D.me.role)} 인계 제안`,
    body:`${D.me.name}님이 ${memberName(toUserId)}님께 인계 → 더보기 → 직책 인계 → 수락`,
    forUser:toUserId, read:false, createdAt:todayStr()
  };
  D.notifications.push(n);
  pushNotification(n);
  refreshActivePage();
}
async function acceptTransfer(transferId){
  const t = D.transfers.find(x=>x.id===transferId);
  if(!t) return;
  if(t.toUser !== D.me.id){ toast('수신자가 아닙니다'); return; }
  const snapshot = {
    at:todayStr(),
    balance:totalBalance(),
    members:D.members.length,
    transactions:D.transactions.length,
    rules:D.rules.current.title
  };
  t.snapshot = snapshot;
  t.status = 'completed';
  t.completedAt = todayStr();
  const from = D.members.find(m=>m.id===t.fromUser);
  const to = D.members.find(m=>m.id===t.toUser);
  if(from && to){
    const oldFromRole = from.role;
    from.role = to.role;
    to.role = t.role;
    if(D.me.id === t.toUser) D.me.role = t.role;
    if(D.me.id === t.fromUser) D.me.role = oldFromRole;
  }
  addSystemNotification(`직책 변경: ${roleLabel(t.role)} → ${to?to.name:'?'}`,
    `${from?from.name:'?'}님이 ${roleLabel(t.role)}직을 ${to?to.name:'?'}님께 인계했습니다 (스냅샷 보관됨)`);
  toast('인계 완료 — 직책 변경 + 스냅샷 보관');
  refreshActivePage();
  pushTransfer(t);
  // 두 사람 직책 DB 반영 (v3: role은 memberships 테이블)
  if(from) await sb.from('memberships').update({ role: from.role })
    .eq('user_id', from.id).eq('group_id', activeGroupId);
  if(to) await sb.from('memberships').update({ role: to.role })
    .eq('user_id', to.id).eq('group_id', activeGroupId);
}
async function declineTransfer(transferId){
  const t = D.transfers.find(x=>x.id===transferId);
  if(!t) return;
  t.status = 'declined';
  t.completedAt = todayStr();
  toast('인계 거절');
  refreshActivePage();
  pushTransfer(t);
}
async function cancelTransfer(transferId){
  const t = D.transfers.find(x=>x.id===transferId);
  if(!t) return;
  if(!confirm('진행 중인 인계를 취소하시겠습니까?')) return;
  t.status = 'cancelled';
  t.completedAt = todayStr();
  refreshActivePage(); toast('취소됨');
  pushTransfer(t);
}
function viewTransferSnapshot(transferId){
  const t = D.transfers.find(x=>x.id===transferId);
  if(!t || !t.snapshot) return;
  const s = t.snapshot;
  alert(`📸 인계 스냅샷 (${t.completedAt})\n\n` +
    `당시 잔액: ${formatMoney(s.balance)}\n` +
    `회원 수: ${s.members}명\n` +
    `누적 거래: ${s.transactions}건\n` +
    `시행 회칙: ${s.rules}`);
}

// ════════════════════════════════════════
// ════════════════════════════════════════
// 엑셀 대량 등록 (양식 다운로드 + 업로드 + 미리보기 + 확정)
// ════════════════════════════════════════
let bulkPreview = { kind:null, rows:[] };  // kind: 'tx' | 'member'

function renderBulk(){
  const p = $('page-bulk');
  let h = `<div class="c" style="background:linear-gradient(135deg,#FFF4ED,#FFFBED);border-color:#FFE4C7">
    <div class="c-tag">📥 사용 방법</div>
    <div style="font-size:.96em;line-height:1.7;margin-top:6px">
      ① 아래 <b>"양식 다운로드"</b> 버튼으로 엑셀 파일 받기<br>
      ② 엑셀에서 행마다 데이터 입력 (예시 행 참고)<br>
      ③ <b>"엑셀 업로드"</b>로 파일 선택 → 미리보기 확인<br>
      ④ <b>"확정 등록"</b> 누르면 모통에 한 번에 저장
    </div>
  </div>`;

// ─── 회비 내역 ───
  h += `<div class="c bulk-drop" data-kind="tx">
    <div class="c-tag">💰 회비 내역</div>
    <div class="c-title">수입·지출을 한 번에 등록</div>
    <div class="c-sub">컬럼: 날짜 · 종류(수입/지출) · 금액 · 항목 · 분류 · 메모</div>
    <div class="ctas" style="margin-top:10px">
      <button class="cta line" onclick="downloadBulkTemplate('tx')">📄 양식 다운로드</button>
      <button class="cta on" onclick="document.getElementById('bulk-tx-file').click()">📁 엑셀 업로드</button>
    </div>
    <div class="dropzone-hint" style="margin-top:10px;padding:18px;border:2px dashed var(--coral);border-radius:var(--r-sm);text-align:center;color:var(--sub);font-size:.92em;background:rgba(255,122,89,.04)">
      📥 또는 엑셀 파일을 여기로 끌어다 놓으세요
    </div>
    <input type="file" id="bulk-tx-file" accept=".xlsx,.xls,.csv" style="display:none" onchange="bulkParseFile(event,'tx')">
  </div>`;

// ─── 회원 명부 ───
  h += `<div class="c bulk-drop" data-kind="member">
    <div class="c-tag">👥 회원 명부 (가입 신청으로 등록)</div>
    <div class="c-title">기존 회원 명단을 한 번에 가입 신청 처리</div>
    <div class="c-sub">컬럼: 이름 · 별명/직업 · 전화번호 · 메모<br>등록된 신청은 더보기 → 가입 신청 관리에서 승인하세요</div>
    <div class="ctas" style="margin-top:10px">
      <button class="cta line" onclick="downloadBulkTemplate('member')">📄 양식 다운로드</button>
      <button class="cta on" onclick="document.getElementById('bulk-member-file').click()">📁 엑셀 업로드</button>
    </div>
    <div class="dropzone-hint" style="margin-top:10px;padding:18px;border:2px dashed var(--coral);border-radius:var(--r-sm);text-align:center;color:var(--sub);font-size:.92em;background:rgba(255,122,89,.04)">
      📥 또는 엑셀 파일을 여기로 끌어다 놓으세요
    </div>
    <input type="file" id="bulk-member-file" accept=".xlsx,.xls,.csv" style="display:none" onchange="bulkParseFile(event,'member')">
  </div>`;

// ─── 미리보기 ───
  if(bulkPreview.kind && bulkPreview.rows.length){
    const k = bulkPreview.kind;
    h += `<div class="c" style="border:2px solid var(--coral)">
      <div class="c-tag">👀 미리보기 (${bulkPreview.rows.length}건)</div>`;
    // 헤더
    if(k === 'tx'){
      h += `<div style="overflow-x:auto;margin-top:8px"><table style="width:100%;border-collapse:collapse;font-size:.86em">
        <thead><tr style="background:var(--bg)">
          <th style="padding:6px;border-bottom:1px solid var(--border);text-align:left">날짜</th>
          <th style="padding:6px;border-bottom:1px solid var(--border);text-align:left">종류</th>
          <th style="padding:6px;border-bottom:1px solid var(--border);text-align:right">금액</th>
          <th style="padding:6px;border-bottom:1px solid var(--border);text-align:left">항목</th>
        </tr></thead><tbody>`;
      bulkPreview.rows.slice(0,30).forEach(r => {
        const isIn = r.type === 'in';
        h += `<tr>
          <td style="padding:5px 6px;border-bottom:1px solid var(--border)">${escape(r.date)}</td>
          <td style="padding:5px 6px;border-bottom:1px solid var(--border);color:${isIn?'var(--good)':'var(--bad)'};font-weight:700">${isIn?'수입':'지출'}</td>
          <td style="padding:5px 6px;border-bottom:1px solid var(--border);text-align:right;font-weight:700">${formatMoney(r.amount)}</td>
          <td style="padding:5px 6px;border-bottom:1px solid var(--border)">${escape(r.title)}</td>
        </tr>`;
      });
      h += `</tbody></table></div>`;
      if(bulkPreview.rows.length > 30){
        h += `<div class="c-sub" style="text-align:center;margin-top:8px">… 외 ${bulkPreview.rows.length - 30}건 더</div>`;
      }
    } else {
      h += `<div style="overflow-x:auto;margin-top:8px"><table style="width:100%;border-collapse:collapse;font-size:.86em">
        <thead><tr style="background:var(--bg)">
          <th style="padding:6px;border-bottom:1px solid var(--border);text-align:left">이름</th>
          <th style="padding:6px;border-bottom:1px solid var(--border);text-align:left">별명/직업</th>
          <th style="padding:6px;border-bottom:1px solid var(--border);text-align:left">전화번호</th>
        </tr></thead><tbody>`;
      bulkPreview.rows.slice(0,30).forEach(r => {
        h += `<tr>
          <td style="padding:5px 6px;border-bottom:1px solid var(--border);font-weight:700">${escape(r.name)}</td>
          <td style="padding:5px 6px;border-bottom:1px solid var(--border);color:var(--sub)">${escape(r.nickname||'-')}</td>
          <td style="padding:5px 6px;border-bottom:1px solid var(--border)">${escape(r.phone||'-')}</td>
        </tr>`;
      });
      h += `</tbody></table></div>`;
      if(bulkPreview.rows.length > 30){
        h += `<div class="c-sub" style="text-align:center;margin-top:8px">… 외 ${bulkPreview.rows.length - 30}건 더</div>`;
      }
    }
    h += `<div class="ctas" style="margin-top:14px">
      <button class="cta line" onclick="bulkClearPreview()">취소</button>
      <button class="cta on" id="bulk-confirm-btn" onclick="bulkConfirm()">확정 등록 (${bulkPreview.rows.length}건)</button>
    </div></div>`;
  }

p.innerHTML = h;

// 드래그&드롭 핸들러 등록
  p.querySelectorAll('.bulk-drop').forEach(zone => {
    const kind = zone.dataset.kind;
    ['dragenter','dragover'].forEach(ev => zone.addEventListener(ev, e => {
      e.preventDefault(); e.stopPropagation();
      zone.style.borderColor = 'var(--coral)';
      zone.style.background = 'linear-gradient(135deg,#FFE4DC,#FFF5DD)';
    }));
    ['dragleave','dragend'].forEach(ev => zone.addEventListener(ev, e => {
      e.preventDefault(); e.stopPropagation();
      zone.style.borderColor = '';
      zone.style.background = '';
    }));
    zone.addEventListener('drop', e => {
      e.preventDefault(); e.stopPropagation();
      zone.style.borderColor = '';
      zone.style.background = '';
      const f = e.dataTransfer.files[0];
      if(!f){ toast('파일이 감지되지 않았어요'); return; }
      if(!/\.(xlsx|xls|csv)$/i.test(f.name)){
        toast('엑셀(.xlsx, .xls) 또는 CSV 파일만 가능해요'); return;
      }
      // FileList → input.files처럼 처리하기 위해 직접 호출
      bulkParseFileFromFile(f, kind);
    });
  });
}

// 페이지 외 영역에 파일 드롭 시 브라우저가 파일 열기 막음 (한 번만 등록)
if(!window.__motongDropBlocked){
  window.__motongDropBlocked = true;
  ['dragover','drop'].forEach(ev => window.addEventListener(ev, e => {
    if(!e.target.closest('.bulk-drop')){ e.preventDefault(); }
  }));
}

// 드래그앤드롭으로 들어온 파일 직접 처리
function bulkParseFileFromFile(f, kind){
  if(typeof XLSX === 'undefined'){ toast('엑셀 라이브러리 로드 중'); return; }
  const r = new FileReader();
  r.onload = (ev) => {
    try{
      const wb = XLSX.read(ev.target.result, { type:'array' });
      const sheet = wb.Sheets[wb.SheetNames[0]];
      const rows = XLSX.utils.sheet_to_json(sheet, { defval:'' });
      if(rows.length === 0){ toast('엑셀에 데이터가 없어요'); return; }
      if(kind === 'tx') bulkPreview = { kind:'tx', rows: bulkNormalizeTx(rows) };
      else bulkPreview = { kind:'member', rows: bulkNormalizeMember(rows) };
      if(bulkPreview.rows.length === 0){
        toast('읽을 수 있는 행이 없어요. 양식을 확인해주세요'); return;
      }
      toast(`${bulkPreview.rows.length}건 인식됨. 미리보기 확인 후 확정`);
      renderBulk();
    }catch(err){
      console.error(err);
      toast('엑셀 읽기 실패: '+humanizeError(err));
    }
  };
  r.readAsArrayBuffer(f);
}

// 양식 엑셀 파일 다운로드 (셀 스타일·필수표시·데이터검증 포함)
function downloadBulkTemplate(kind){
  if(typeof XLSX === 'undefined'){ toast('엑셀 라이브러리 로드 중. 잠시 후 다시 시도'); return; }

// 공통 스타일
  const headerStyle = {
    fill: { fgColor: { rgb: 'FF7A59' } },                    // 코랄 배경
    font: { bold: true, color: { rgb: 'FFFFFF' }, sz: 12, name: '맑은 고딕' },
    alignment: { horizontal: 'center', vertical: 'center', wrapText: true },
    border: { top:{style:'thin',color:{rgb:'D7CEC4'}}, bottom:{style:'thin',color:{rgb:'D7CEC4'}}, left:{style:'thin',color:{rgb:'D7CEC4'}}, right:{style:'thin',color:{rgb:'D7CEC4'}} }
  };
  const exampleStyle = {                                      // 예시 행 — 회색 음영 (참고용, 지우고 입력)
    fill: { fgColor: { rgb: 'F1E9E2' } },
    font: { color: { rgb: '6C757D' }, italic: true, sz: 11, name: '맑은 고딕' },
    alignment: { vertical: 'center', wrapText: true },
    border: { top:{style:'hair',color:{rgb:'EAEAEA'}}, bottom:{style:'hair',color:{rgb:'EAEAEA'}}, left:{style:'hair',color:{rgb:'EAEAEA'}}, right:{style:'hair',color:{rgb:'EAEAEA'}} }
  };
  const inputStyle = {                                        // 입력 영역 — 흰색 (여기에 데이터 작성)
    fill: { fgColor: { rgb: 'FFFFFF' } },
    font: { color: { rgb: '2B2D42' }, sz: 11, name: '맑은 고딕' },
    alignment: { vertical: 'center', wrapText: true },
    border: { top:{style:'hair',color:{rgb:'EAEAEA'}}, bottom:{style:'hair',color:{rgb:'EAEAEA'}}, left:{style:'hair',color:{rgb:'EAEAEA'}}, right:{style:'hair',color:{rgb:'EAEAEA'}} }
  };
  const noticeStyle = {                                       // 안내 행 — 노란 배경 + 빨간 글씨 (입력 금지)
    fill: { fgColor: { rgb: 'FFF5DD' } },
    font: { bold: true, color: { rgb: 'E63946' }, sz: 11, name: '맑은 고딕' },
    alignment: { horizontal: 'left', vertical: 'center', wrapText: true }
  };
  const helpStyle = {                                         // 도움말 행 — 코랄 글씨 (입력 금지)
    fill: { fgColor: { rgb: 'FFF8F5' } },
    font: { bold: true, color: { rgb: 'FF7A59' }, sz: 11, name: '맑은 고딕' },
    alignment: { horizontal: 'left', vertical: 'center', wrapText: true }
  };

let aoa, fileName, sheetName, mergeRanges = [], dataValidations = [], colWidths;
  // 매번 다른 무작위 예시 (개인정보 보호)
  const exNames = [];
  while(exNames.length < 4){
    const n = pickSample(SAMPLE_NAMES);
    if(!exNames.includes(n)) exNames.push(n);
  }
  const yyyy = new Date().getFullYear();
  const mm = String(new Date().getMonth()+1).padStart(2,'0');
  if(kind === 'tx'){
    aoa = [
      ['날짜 [필수]','종류 [필수]','금액 [필수]','항목 [필수]','분류 [선택]','메모 [선택]'],
      [`${yyyy}-${mm}-01`,'수입',50000,`${mm}월 회비 - ${exNames[0]}`,'회비','정기 회비'],
      [`${yyyy}-${mm}-03`,'수입',50000,`${mm}월 회비 - ${exNames[1]}`,'회비',''],
      [`${yyyy}-${mm}-05`,'지출',32000,'정모 식대','식대',''],
      [`${yyyy}-${mm}-10`,'지출',15000,'준비물 구매','장비',''],
      ['','','','','',''],   // 빈 입력 행
      ['','','','','',''],
      ['','','','','',''],
      ['','','','','',''],
      ['','','','','',''],
      ['※ 종류는 "수입" 또는 "지출"만 가능. 날짜 형식: YYYY-MM-DD (예: 2026-05-01)','','','','',''],
      ['※ 분류는 직접 입력 가능. 미입력 시 항목명에서 자동 추측. 자주 쓰는 분류: 회비·기부금·식대·장비·교통·대관료','','','','',''],
      ['※ 음영(회색) 행은 예시이니 지우고 입력하시면 돼요. 빈 흰색 행에 작성하세요','','','','','']
    ];
    mergeRanges = [
      { s:{r:10,c:0}, e:{r:10,c:5} },
      { s:{r:11,c:0}, e:{r:11,c:5} },
      { s:{r:12,c:0}, e:{r:12,c:5} }
    ];
    // 분류 컬럼 (E열) 데이터 검증 — 드롭다운 + 자유 입력 허용
    dataValidations = [{
      sqref: 'E2:E1000',
      type: 'list',
      formula1: '"회비,기부금,식대,장비,교통,대관료,운영비,이자,기타"',
      allowBlank: true,
      showInputMessage: true,
      promptTitle: '분류',
      prompt: '드롭다운에서 선택하거나 직접 입력하세요',
      showErrorMessage: false   // 자유 입력 허용
    }];
    // 종류 컬럼 (B열) 데이터 검증
    dataValidations.push({
      sqref: 'B2:B1000',
      type: 'list',
      formula1: '"수입,지출"',
      allowBlank: false,
      showErrorMessage: true,
      errorTitle: '종류',
      error: '"수입" 또는 "지출"만 입력 가능'
    });
    colWidths = [
      { wch: 14 }, { wch: 10 }, { wch: 12 }, { wch: 28 }, { wch: 12 }, { wch: 22 }
    ];
    fileName = '모통_회비양식.xlsx';
    sheetName = '회비내역';
  } else {
    aoa = [
      ['이름 [필수]','별명/직업 [선택]','전화번호 [선택]','메모 [선택]'],
      [exNames[0], pickSample(SAMPLE_NICKS),'010-0000-0000',''],
      [exNames[1], pickSample(SAMPLE_NICKS),'010-0000-0000',''],
      [exNames[2], pickSample(SAMPLE_NICKS),'010-0000-0000','신입'],
      ['','','',''],
      ['','','',''],
      ['','','',''],
      ['','','',''],
      ['','','',''],
      ['※ 별명/직업은 동명이인을 구분하기 위한 수단일 뿐, 다른 목적은 없습니다','','',''],
      ['※ 음영(회색) 행은 예시이니 지우고 입력하시면 돼요. 빈 흰색 행에 작성하세요','','',''],
      ['※ 등록된 명단은 더보기 → 가입 신청 관리에서 승인하셔야 회원이 됩니다','','','']
    ];
    mergeRanges = [
      { s:{r:9,c:0}, e:{r:9,c:3} },
      { s:{r:10,c:0}, e:{r:10,c:3} },
      { s:{r:11,c:0}, e:{r:11,c:3} }
    ];
    colWidths = [
      { wch: 14 }, { wch: 18 }, { wch: 18 }, { wch: 26 }
    ];
    fileName = '모통_회원양식.xlsx';
    sheetName = '회원명부';
  }

const ws = XLSX.utils.aoa_to_sheet(aoa);
  ws['!cols'] = colWidths;

// 행 높이 조정
  ws['!rows'] = aoa.map((_,i) => ({ hpt: i === 0 ? 28 : (i >= aoa.length - 3 ? 22 : 22) }));

// 셀별 스타일 적용
  const cols = aoa[0].length;
  for(let r = 0; r < aoa.length; r++){
    for(let c = 0; c < cols; c++){
      const cellRef = XLSX.utils.encode_cell({ r, c });
      if(!ws[cellRef]) ws[cellRef] = { t:'s', v:'' };
      let style;
      if(r === 0) style = headerStyle;
      else if(aoa[r][0] && aoa[r][0].toString().startsWith('※')){
        // 별명/직업 안내(첫 번째)는 코랄, 나머지 노란
        if(kind === 'member' && r === 9) style = helpStyle;
        else style = noticeStyle;
      }
      else if(r >= 1 && r <= 4){
        // 예시 행 (회색 음영, 참고용)
        style = exampleStyle;
      }
      else {
        // 빈 입력 행 (흰색)
        style = inputStyle;
      }
      ws[cellRef].s = style;
    }
  }

// 셀 병합 (안내 행 가로 병합)
  ws['!merges'] = mergeRanges;

// 데이터 검증 (회비 분류·종류)
  if(dataValidations.length){
    ws['!dataValidations'] = dataValidations;
  }

const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, sheetName);
  XLSX.writeFile(wb, fileName);
  toast(fileName + ' 다운로드 시작');
}

// 업로드 파일 파싱 (미리보기 채우기)
function bulkParseFile(e, kind){
  const f = e.target.files[0]; if(!f) return;
  if(typeof XLSX === 'undefined'){ toast('엑셀 라이브러리 로드 중'); return; }
  const r = new FileReader();
  r.onload = (ev) => {
    try{
      const wb = XLSX.read(ev.target.result, { type:'array' });
      const sheet = wb.Sheets[wb.SheetNames[0]];
      const rows = XLSX.utils.sheet_to_json(sheet, { defval:'' });
      if(rows.length === 0){ toast('엑셀에 데이터가 없어요'); return; }
      if(kind === 'tx') bulkPreview = { kind:'tx', rows: bulkNormalizeTx(rows) };
      else bulkPreview = { kind:'member', rows: bulkNormalizeMember(rows) };
      if(bulkPreview.rows.length === 0){
        toast('읽을 수 있는 행이 없어요. 양식을 확인해주세요');
        return;
      }
      toast(`${bulkPreview.rows.length}건 인식됨. 미리보기 확인 후 확정`);
      renderBulk();
    }catch(err){
      console.error(err);
      toast('엑셀 읽기 실패: '+humanizeError(err));
    }
  };
  r.readAsArrayBuffer(f);
  e.target.value = '';
}

// 셀 값 정제: 문자열 변환 + 한글 NFC 정규화 + 양끝 공백 제거 + 연속 공백 1칸으로
function cleanCell(v){
  if(v === null || v === undefined) return '';
  return v.toString().normalize('NFC').replace(/\s+/g,' ').trim();
}
// 헤더 키도 정규화한 새 객체 반환 (대괄호·공백·괄호 제거)
function normalizeKeys(row){
  const out = {};
  Object.keys(row).forEach(k => {
    const cleanKey = k.normalize('NFC').replace(/\[.*?\]|$.*?$/g,'').replace(/\s+/g,'').trim();
    out[cleanKey] = row[k];
  });
  return out;
}

function bulkNormalizeTx(rows){
  const out = [];
  rows.forEach(rawRow => {
    const row = normalizeKeys(rawRow);
    const keys = Object.keys(row);
    const dateK = keys.find(k => /날짜|일자|date/i.test(k));
    const typeK = keys.find(k => /^종류$|type|구분/i.test(k));
    const amtK = keys.find(k => /금액|amount|액수/i.test(k));
    const titleK = keys.find(k => /항목|적요|내용|title|description/i.test(k));
    const catK = keys.find(k => /분류|category|카테고리/i.test(k));
    const memoK = keys.find(k => /메모|note|비고/i.test(k));
    // 카뱅식 입금/출금 분리 컬럼도 호환
    const inK = keys.find(k => /^입금$|deposit|^in$/i.test(k));
    const outK = keys.find(k => /^출금$|withdraw|^out$/i.test(k));

const date = parseDate(row[dateK]);
    const title = cleanCell(row[titleK]);
    // 안내 행 스킵 (※ 또는 헤더 텍스트)
    if(title.startsWith('※') || /필수|선택/.test(title) && title.length < 12) return;
    if(!title && !row[inK] && !row[outK] && !row[amtK]) return;  // 빈 행 스킵

if(typeK && row[typeK]){
      const typeStr = cleanCell(row[typeK]);
      const type = /수입|입금|in/i.test(typeStr) ? 'in'
                : /지출|출금|out/i.test(typeStr) ? 'out' : null;
      const amt = parseInt(cleanCell(row[amtK]).replace(/[^0-9]/g,''))||0;
      if(type && amt > 0){
        out.push({
          id: crypto.randomUUID(), type, amount:amt, date,
          title: title || (type==='in'?'수입':'지출'),
          category: cleanCell(row[catK]) || guessCategory(title, type),
          memo: cleanCell(row[memoK])
        });
      }
    } else {
      const inAmt = parseInt(cleanCell(row[inK]).replace(/[^0-9]/g,''))||0;
      const outAmt = parseInt(cleanCell(row[outK]).replace(/[^0-9]/g,''))||0;
      if(inAmt > 0) out.push({
        id: crypto.randomUUID(), type:'in', amount:inAmt, date,
        title: title || '수입', category: cleanCell(row[catK]) || guessCategory(title, 'in'),
        memo: cleanCell(row[memoK])
      });
      if(outAmt > 0) out.push({
        id: crypto.randomUUID(), type:'out', amount:outAmt, date,
        title: title || '지출', category: cleanCell(row[catK]) || guessCategory(title, 'out'),
        memo: cleanCell(row[memoK])
      });
    }
  });
  return out;
}

function bulkNormalizeMember(rows){
  const out = [];
  rows.forEach(rawRow => {
    const row = normalizeKeys(rawRow);
    const keys = Object.keys(row);
    const nameK = keys.find(k => /이름|성명|name/i.test(k));
    const nickK = keys.find(k => /별명|직업|구분|nickname|alias/i.test(k));
    const phoneK = keys.find(k => /전화|연락처|phone/i.test(k));
    const memoK = keys.find(k => /메모|note|비고/i.test(k));

const name = cleanCell(row[nameK]);
    if(!name) return;  // 이름 없는 행 스킵
    if(name.startsWith('※')) return;  // 안내 행 스킵
    // 헤더가 데이터로 잡힌 경우 스킵
    if(/필수|선택/.test(name) && name.length < 14) return;

// 전화번호 정제: 숫자만 + 010-XXXX-XXXX 형식으로
    let phone = cleanCell(row[phoneK]).replace(/[^0-9]/g,'');
    if(phone.length === 11) phone = phone.slice(0,3)+'-'+phone.slice(3,7)+'-'+phone.slice(7);
    else if(phone.length === 10) phone = phone.slice(0,3)+'-'+phone.slice(3,6)+'-'+phone.slice(6);

out.push({
      name,
      nickname: cleanCell(row[nickK]),
      phone,
      memo: cleanCell(row[memoK])
    });
  });
  return out;
}

// 미리보기 취소
function bulkClearPreview(){
  bulkPreview = { kind:null, rows:[] };
  renderBulk();
}

// 확정 등록
async function bulkConfirm(){
  if(!bulkPreview.kind || bulkPreview.rows.length === 0) return;
  const btn = $('bulk-confirm-btn');
  if(btn){ btn.disabled = true; btn.textContent = '등록 중...'; }

if(bulkPreview.kind === 'tx'){
    const insertRows = bulkPreview.rows.map(r => ({
      id:r.id, group_id:activeGroupId, type:r.type, amount:r.amount,
      date:r.date, title:r.title, category:r.category||null, memo:r.memo||null,
      by_user:currentSession.user.id, attaches:[]
    }));
    const { error } = await sb.from('transactions').insert(insertRows);
    if(error){ toast('저장 실패: '+humanizeError(error));
      if(btn){ btn.disabled = false; btn.textContent = '확정 등록'; }
      return;
    }
    // 로컬 D에도 반영
    D.transactions = D.transactions.concat(bulkPreview.rows.map(r => ({
      id:r.id, type:r.type, amount:r.amount, date:r.date, title:r.title,
      category:r.category, memo:r.memo, by:D.me.id, attaches:[]
    })));
    toast(`회비 ${bulkPreview.rows.length}건 등록 완료`);
  } else {
    const insertRows = bulkPreview.rows.map(r => ({
      group_id: activeGroupId,
      name: r.name,
      phone: r.phone || null,
      message: [r.nickname && '별명/직업: '+r.nickname, r.memo].filter(Boolean).join(' / ') || null,
      status: 'pending'
    }));
    const { error } = await sb.from('applicants').insert(insertRows);
    if(error){ toast('저장 실패: '+humanizeError(error));
      if(btn){ btn.disabled = false; btn.textContent = '확정 등록'; }
      return;
    }
    toast(`가입 신청 ${bulkPreview.rows.length}건 등록. 가입 신청 관리에서 승인하세요`);
  }

bulkPreview = { kind:null, rows:[] };
  renderBulk();
}

// ════════════════════════════════════════
// 거래-회원 매칭 (자가 확인 + 검수)
// ════════════════════════════════════════

// 가입 직후 자동 호출: 미매칭 거래 중 같은 이름 후보 있으면 마법사 띄움
let claimCandidates = [];
function maybeOpenClaimWizard(){
  if(!D.me || !D.me.name) return;
  const myName = (D.me.name||'').trim();
  if(!myName) return;
  // 본인 이름이 포함된 unmatched 수입(회비) 거래 후보
  claimCandidates = D.transactions.filter(t =>
    t.type === 'in' &&
    (!t.matchStatus || t.matchStatus === 'unmatched') &&
    !t.memberId &&
    (t.title||'').includes(myName)
  ).sort((a,b)=> (b.date||'').localeCompare(a.date||''));
  if(claimCandidates.length === 0) return;
  // 한 번 본 모임에선 다시 안 띄움
  const seenKey = 'motong-claim-seen-'+activeGroupId;
  if(localStorage.getItem(seenKey)) return;
  localStorage.setItem(seenKey, '1');
  renderClaimList();
  openModal('modal-claim-tx');
}

async function confirmClaim(){
  const checks = [...document.querySelectorAll('#claim-list input[type=checkbox]:checked')];
  if(checks.length === 0){ toast('체크한 항목이 없어요'); return; }
  const btn = $('claim-confirm-btn');
  btn.disabled = true; btn.textContent = '신청 중...';
  const ids = checks.map(c => claimCandidates[parseInt(c.dataset.idx)].id);
  const newStatus = canReview() ? 'confirmed' : 'proposed';
  const { error } = await sb.from('transactions')
    .update({ member_id: currentSession.user.id, match_status: newStatus })
    .in('id', ids);
  btn.disabled = false; btn.textContent = '선택 항목 신청';
  if(error){ toast('신청 실패: '+humanizeError(error)); return; }
  // 로컬 D 갱신
  D.transactions.forEach(t => {
    if(ids.includes(t.id)){ t.memberId = currentSession.user.id; t.matchStatus = newStatus; }
  });
  closeModal('modal-claim-tx');
  toast(canReview()
    ? `${ids.length}건 본인 거래로 확정`
    : `${ids.length}건 신청 완료. ${reviewerLabel()} 검수 대기`);
  refreshActivePage();
}

// ─── 매칭 검수 페이지 (총무 > 회장) ───
function renderMatchReview(){
  const p = $('page-match-review');
  if(!canReview()){
    p.innerHTML = `<div class="c"><div class="c-tag">권한 없음</div>
      <div class="c-title">${reviewerLabel()}만 검수할 수 있어요</div></div>`;
    return;
  }
  const proposed = D.transactions.filter(t => t.matchStatus === 'proposed' && t.memberId);
  let h = `<div class="c" style="background:linear-gradient(135deg,#FFF4ED,#FFFBED);border-color:#FFE4C7">
    <div class="c-tag">🔍 매칭 검수자: ${reviewerLabel()}</div>
    <div style="font-size:.96em;line-height:1.6;margin-top:6px">
      회원이 본인 거래라고 신청한 항목을 확인해주세요.<br>
      문제 없으면 <b>"확정"</b>, 아니면 <b>"되돌리기"</b>.
    </div>
  </div>`;

if(proposed.length === 0){
    h += `<div class="empty"><div class="ei">✅</div><p>검수 대기 중인 항목이 없어요</p></div>`;
  } else {
    h += `<div class="c-tag" style="margin:14px 4px 8px">검수 대기 ${proposed.length}건</div>`;
    proposed.forEach(t => {
      const m = D.members.find(x => x.id === t.memberId);
      const mName = m ? (m.name + (m.nickname?` (${m.nickname})`:'')) : '(알 수 없음)';
      h += `<div class="c" style="border:2px solid var(--mustard)">
        <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:10px">
          <div style="flex:1;min-width:0">
            <div class="c-title">${escape(t.title)}</div>
            <div class="c-sub" style="margin-top:3px">${t.date} · ${formatMoney(t.amount)}</div>
            <div style="font-size:.92em;color:var(--coral);font-weight:700;margin-top:6px">→ ${escape(mName)}</div>
          </div>
        </div>
        <div class="ctas" style="margin-top:10px">
          <button class="cta line" onclick="rejectMatch('${t.id}')">되돌리기</button>
          <button class="cta on" onclick="confirmMatch('${t.id}')">✓ 확정</button>
        </div>
      </div>`;
    });
  }
  p.innerHTML = h;
}

async function confirmMatch(txId){
  const { error } = await sb.from('transactions')
    .update({ match_status: 'confirmed' }).eq('id', txId);
  if(error){ toast('확정 실패: '+humanizeError(error)); return; }
  const t = D.transactions.find(x=>x.id===txId);
  if(t) t.matchStatus = 'confirmed';
  toast('매칭 확정');
  renderMatchReview();
}
async function rejectMatch(txId){
  if(!confirm('이 매칭을 되돌리시겠습니까?\n거래는 다시 회원 미지정 상태가 됩니다.')) return;
  const { error } = await sb.from('transactions')
    .update({ member_id: null, match_status: 'unmatched' }).eq('id', txId);
  if(error){ toast('되돌리기 실패: '+humanizeError(error)); return; }
  const t = D.transactions.find(x=>x.id===txId);
  if(t){ t.memberId = null; t.matchStatus = 'unmatched'; }
  toast('매칭 되돌림');
  renderMatchReview();
}

// ════════════════════════════════════════
// 결산 리포트
// ════════════════════════════════════════
let reportPeriod = { type:'half', year:new Date().getFullYear(), half:1 };
function renderReport(){
  const p = $('page-report');
  const now = new Date();
  const y = now.getFullYear();
  let h = `<div class="c">
    <div class="c-tag">기간 선택</div>
    <div class="ctas" style="margin-top:8px">
      <button class="cta ${reportPeriod.type==='half'?'on':''}" onclick="setReportPeriod('half')">반기</button>
      <button class="cta ${reportPeriod.type==='year'?'on':''}" onclick="setReportPeriod('year')">연간</button>
      <button class="cta ${reportPeriod.type==='month'?'on':''}" onclick="setReportPeriod('month')">월간</button>
    </div>
    <div style="margin-top:10px">${renderPeriodPicker()}</div>
  </div>`;

// 결산 데이터
  const range = getReportRange();
  const tx = D.transactions.filter(t=>(t.date||'')>=range.from && (t.date||'')<=range.to);
  const inSum = tx.filter(t=>t.type==='in').reduce((s,t)=>s+t.amount,0);
  const outSum = tx.filter(t=>t.type==='out').reduce((s,t)=>s+t.amount,0);
  const meets = D.meetings.filter(m=>(m.date||'')>=range.from && (m.date||'')<=range.to);

// 카테고리별
  const byCat = {};
  tx.filter(t=>t.type==='out').forEach(t => {
    byCat[t.category||'기타'] = (byCat[t.category||'기타']||0) + t.amount;
  });

h += `<div class="c">
    <div class="c-tag">📊 ${range.label} 요약</div>
    <div style="margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px">
      <div style="padding:10px;background:#E1F5EE;border-radius:8px;text-align:center">
        <small style="font-size:.74em;color:var(--sub);font-weight:700">총 수입</small>
        <b style="display:block;color:var(--good);font-size:1em;margin-top:2px">+${formatMoney(inSum)}</b>
      </div>
      <div style="padding:10px;background:#FFE4E1;border-radius:8px;text-align:center">
        <small style="font-size:.74em;color:var(--sub);font-weight:700">총 지출</small>
        <b style="display:block;color:var(--bad);font-size:1em;margin-top:2px">-${formatMoney(outSum)}</b>
      </div>
    </div>
    <div style="text-align:center;margin-top:10px;font-size:.92em;font-weight:800">
      잔여 ${formatMoney(inSum-outSum)}
    </div>
  </div>`;

if(Object.keys(byCat).length){
    h += `<div class="c"><div class="c-tag">카테고리별 지출</div>`;
    const total = Object.values(byCat).reduce((s,v)=>s+v,0);
    Object.entries(byCat).sort((a,b)=>b[1]-a[1]).forEach(([cat,amt])=>{
      const pct = total ? Math.round(amt/total*100) : 0;
      h += `<div style="margin-top:8px">
        <div class="c-row" style="font-size:.84em"><b>${escape(cat)}</b><span class="num out">-${formatMoney(amt)} (${pct}%)</span></div>
        <div class="bar"><div class="bar-fill" style="width:${pct}%"></div></div>
      </div>`;
    });
    h += `</div>`;
  }

h += `<div class="c">
    <div class="c-tag">정모 기록</div>
    <div style="font-size:.86em;margin-top:4px">총 ${meets.length}회 진행</div>
  </div>`;

h += `<div class="ctas" style="margin:14px 0">
    <button class="cta line" onclick="exportReportJSON()">📤 JSON 내보내기</button>
    <button class="cta on" onclick="printReport()">🖨️ 인쇄·PDF</button>
  </div>`;

p.innerHTML = h;
}
function setReportPeriod(type){ reportPeriod.type = type; refreshActivePage(); }
function renderPeriodPicker(){
  const now = new Date();
  if(reportPeriod.type==='half'){
    return `<div class="ctas">
      <button class="cta ${reportPeriod.half===1?'on':''}" onclick="reportPeriod.year=${reportPeriod.year};reportPeriod.half=1;refreshActivePage()">${reportPeriod.year} 상반기</button>
      <button class="cta ${reportPeriod.half===2?'on':''}" onclick="reportPeriod.year=${reportPeriod.year};reportPeriod.half=2;refreshActivePage()">${reportPeriod.year} 하반기</button>
    </div>`;
  } else if(reportPeriod.type==='year'){
    return `<div class="ctas">
      <button class="cta" onclick="reportPeriod.year=${now.getFullYear()-1};refreshActivePage()">${now.getFullYear()-1}</button>
      <button class="cta on" onclick="reportPeriod.year=${now.getFullYear()};refreshActivePage()">${now.getFullYear()}</button>
    </div>`;
  } else {
    return `<input type="month" value="${(reportPeriod.month||now.toISOString().slice(0,7))}" onchange="reportPeriod.month=this.value;refreshActivePage()" style="width:100%;padding:10px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg)">`;
  }
}
function getReportRange(){
  const y = reportPeriod.year || new Date().getFullYear();
  if(reportPeriod.type==='half'){
    if(reportPeriod.half===1) return { from:`${y}-01-01`, to:`${y}-06-30`, label:`${y}년 상반기` };
    return { from:`${y}-07-01`, to:`${y}-12-31`, label:`${y}년 하반기` };
  } else if(reportPeriod.type==='year'){
    return { from:`${y}-01-01`, to:`${y}-12-31`, label:`${y}년 연간` };
  } else {
    const m = reportPeriod.month || new Date().toISOString().slice(0,7);
    const [yy,mm] = m.split('-');
    const last = new Date(yy, mm, 0).getDate();
    return { from:`${m}-01`, to:`${m}-${last}`, label:`${yy}년 ${parseInt(mm)}월` };
  }
}
function exportReportJSON(){
  const r = getReportRange();
  const tx = D.transactions.filter(t=>(t.date||'')>=r.from && (t.date||'')<=r.to);
  const obj = { group:D.group.name, period:r.label, transactions:tx };
  const blob = new Blob([JSON.stringify(obj,null,2)],{type:'application/json'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = `motong-report-${r.from}~${r.to}.json`;
  a.click();
  toast('JSON 다운로드');
}
function printReport(){
  const r = getReportRange();
  const tx = D.transactions.filter(t=>(t.date||'')>=r.from && (t.date||'')<=r.to);
  const inSum = tx.filter(t=>t.type==='in').reduce((s,t)=>s+t.amount,0);
  const outSum = tx.filter(t=>t.type==='out').reduce((s,t)=>s+t.amount,0);
  const meets = D.meetings.filter(m=>(m.date||'')>=r.from && (m.date||'')<=r.to);

// 기존 print-area 제거 후 재삽입
  const old = document.getElementById('print-area');
  if(old) old.remove();
  document.body.insertAdjacentHTML('beforeend', html);
  setTimeout(()=>{ window.print(); toast('인쇄창 → "PDF로 저장" 선택 가능'); }, 100);
}

// ════════════════════════════════════════
// 어르신 모드
// ════════════════════════════════════════
function pickFontSize(s){
  document.querySelectorAll('.size-opt').forEach(x => x.classList.toggle('on', x.dataset.fs===s));
  D.settings.fontSize = s;
  saveData();
  applyFontSize();
}
function applyFontSize(){
  document.body.classList.remove('fs-small','fs-normal','fs-large','fs-xlarge');
  document.body.classList.add('fs-'+(D.settings.fontSize||'normal'));
}

// ════════════════════════════════════════
// 그래프
// ════════════════════════════════════════
function renderBarGraph(containerId, data, size){
  const c = $(containerId); if(!c) return;
  const max = Math.max(1, ...data.map(d => Math.max(d.in||0, d.out||0)));
  const colW = size==='small' ? 8 : 10;
  let h = '<div class="bar-graph">';
  data.forEach(d=>{
    const ih = Math.round((d.in||0)/max*100);
    const oh = Math.round((d.out||0)/max*100);
    h += `<div class="bg-col">
      <div class="bg-bars">
        <div class="bg-bar in" style="height:${ih}%;width:${colW}px" title="${formatMoney(d.in)}"></div>
        <div class="bg-bar out" style="height:${oh}%;width:${colW}px" title="${formatMoney(d.out)}"></div>
      </div>
      <div class="bg-month">${d.label}</div>
    </div>`;
  });
  h += `</div><div class="legend"><span><div class="lg-dot in"></div>수입</span><span><div class="lg-dot out"></div>지출</span></div>`;
  c.innerHTML = h;
}

c.innerHTML = `<div class="line-graph">
    <svg class="line-svg" viewBox="0 0 ${W} ${H}" preserveAspectRatio="none">
      <defs>
        <linearGradient id="lg-${containerId}" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#FF7A59" stop-opacity=".3"/>
          <stop offset="100%" stop-color="#FFD166" stop-opacity=".05"/>
        </linearGradient>
      </defs>
      <path d="${area}" fill="url(#lg-${containerId})"/>
      <path d="${path}" stroke="#FF7A59" stroke-width="2" fill="none"/>
      ${circles}
    </svg>
  </div>
  <div class="line-labels">
    <span>${points[0].label}: ${startLabel}</span>
    <span style="color:${diff>=0?'var(--good)':'var(--bad)'}">${diff>=0?'+':''}${diffPct}%</span>
    <span>${points[points.length-1].label}: ${endLabel}</span>
  </div>`;
}

// ════════════════════════════════════════
// 데이터 헬퍼
// ════════════════════════════════════════
function totalBalance(){
  return D.transactions.reduce((s,t)=> t.type==='in' ? s+t.amount : s-t.amount, 0);
}
function nextMeeting(){
  const today = todayStr();
  return D.meetings.filter(m=>(m.date||'')>=today).sort((a,b)=>(a.date||'').localeCompare(b.date||''))[0];
}
function daysUntil(dateStr){
  const d = new Date(dateStr); const t = new Date(todayStr());
  return Math.round((d-t)/86400000);
}
function addDays(dateStr, n){
  const d = new Date(dateStr); d.setDate(d.getDate()+n);
  return d.toISOString().slice(0,10);
}
function currentMonthStr(){
  const d = new Date();
  return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0');
}
function monthlyData(months){
  const arr = [];
  const now = new Date();
  for(let i=months-1;i>=0;i--){
    const dt = new Date(now.getFullYear(), now.getMonth()-i, 1);
    const key = dt.getFullYear()+'-'+String(dt.getMonth()+1).padStart(2,'0');
    const tx = D.transactions.filter(t => t.date && t.date.startsWith(key));
    arr.push({
      label: (dt.getMonth()+1)+'월',
      in: tx.filter(t=>t.type==='in').reduce((s,t)=>s+t.amount,0),
      out: tx.filter(t=>t.type==='out').reduce((s,t)=>s+t.amount,0),
    });
  }
  return arr;
}
function balanceTimeline(months){
  const arr = []; const now = new Date();
  let running = 0;
  // 해당 시점 이전 모든 거래를 누적
  for(let i=months-1;i>=0;i--){
    const dt = new Date(now.getFullYear(), now.getMonth()-i+1, 0);
    const cutoff = dt.toISOString().slice(0,10);
    const bal = D.transactions.filter(t=>(t.date||'')<=cutoff).reduce((s,t)=> t.type==='in' ? s+t.amount : s-t.amount, 0);
    arr.push({ label: (dt.getMonth()+1)+'월', value: bal });
  }
  return arr;
}
function unpaidMembers(){
  const month = currentMonthStr();
  // 1순위: member_id로 매칭된 confirmed/proposed 거래 (UUID라 동명이인 안전)
  const paidById = new Set(
    D.transactions.filter(t =>
      t.type==='in' && t.category==='회비' && t.date && t.date.startsWith(month) &&
      t.memberId && (t.matchStatus==='confirmed' || t.matchStatus==='proposed')
    ).map(t => t.memberId)
  );
  // 2순위: ID 매칭 안 된 거래는 이름으로 폴백 (단, 같은 이름이 1명일 때만 안전)
  const unmatched = D.transactions.filter(t =>
    t.type==='in' && t.category==='회비' && t.date && t.date.startsWith(month) &&
    (!t.memberId || (t.matchStatus !== 'confirmed' && t.matchStatus !== 'proposed'))
  );
  const paidByName = {};
  unmatched.forEach(t => {
    // title에서 이름 추출 시도
    const txt = (t.title || '').trim();
    D.members.forEach(m => {
      if(m.name && txt.includes(m.name)){
        paidByName[m.name] = (paidByName[m.name] || 0) + 1;
      }
    });
  });
  return D.members.filter(m => {
    if(m.id === D.me.id) return false;
    if(paidById.has(m.id)) return false;
    // 동명이인이 1명뿐일 때만 텍스트 폴백 신뢰
    const sameName = D.members.filter(x => x.name === m.name).length;
    if(sameName === 1 && paidByName[m.name]) return false;
    return true;
  });
}
function countUnpaidThisMonth(){ return unpaidMembers().length; }
function percentPaid(){
  const total = D.members.length;
  return total ? Math.round((total-unpaidMembers().length)/total*100) : 0;
}
function memberName(id){
  const m = D.members.find(x=>x.id===id);
  return m ? m.name : '(알수없음)';
}
function escape(s){ return String(s||'').replace(/[<>&"']/g, c=>({'<':'<','>':'>','&':'&','"':'"',"'":'''}[c])); }

// ════════════════════════════════════════
// 첫 시작 흐름
// ════════════════════════════════════════
function startApp(){
  // v3 흐름: welcome은 단순 splash. 클릭 시 인증/모임 상태에 따라 분기
  $('welcome').classList.add('hide');
  $('welcome').style.display = 'none';
  applyFontSize();
  history.replaceState({ nav:'home' }, '', '');
  if(currentSession && D.group && D.group.name){
    renderHome();
  } else if(currentSession){
    // 로그인은 됐는데 회 미선택 → 모임 만들기/참여 화면
    showAuth('group-screen');
  } else {
    // 미인증 → 로그인/회원가입 화면
    showAuth('auth-screen');
  }
}

// ════════════════════════════════════════
// 가이드 투어 (5탭 + 마지막 안내)
// ════════════════════════════════════════
const GUIDE_PAGES = [
  {
    icon:'🏠', tag:'1 / 6', title:'홈 — 한눈에 모든 것',
    desc:'다음 정모, 회비 잔액, 진행 중 안건, 처리할 알림이 한 화면에 모입니다.',
    features:[
      '정모 D-day 표시 + 1탭 참석 체크',
      '회비 카드 ⋮ 메뉴로 빠른 설정',
      '⚙ 위젯 설정으로 보고싶은 것만 표시'
    ]
  },
  {
    icon:'💰', tag:'2 / 6', title:'회비 — 수입·지출 한 곳에',
    desc:'회비 받고, 지출 기록하고, 영수증 사진까지 한 번에. 만원 단위로 직관 표시됩니다.',
    features:[
      '+ 입금 / − 지출 직접 등록',
      '📷 영수증 사진 첨부 (앨범·카메라)',
      '📁 카뱅 모임통장 엑셀 자동 가져오기',
      '월별 그래프·잔액 추이 자동 그림'
    ]
  },
  {
    icon:'📅', tag:'3 / 6', title:'정모 — 캘린더로 한눈에',
    desc:'달력에서 정모(코랄)·수입(초록)·지출(빨강) 색 점이 보이고, 날짜 누르면 그날의 행사·금액이 펼쳐집니다.',
    features:[
      '1탭 참석 / 미정 / 불참 (다시 누르면 취소)',
      '+ 버튼으로 새 정모 등록',
      '지난 정모 출석 기록 자동 저장'
    ]
  },
  {
    icon:'📋', tag:'4 / 6', title:'회칙 — 영구 보관',
    desc:'회칙 PDF를 보관하고, 안건은 본문까지 자세히 적어 모든 회원에게 투표를 보냅니다.',
    features:[
      '📎 회칙 PDF 업로드 / 열기 / 공유',
      '+ 안건 발의 (제목 + 세부내용 + 마감일)',
      '과반 찬성 자동 통과 + 결과 알림',
      '개정 이력 자동 보관'
    ]
  },
  {
    icon:'⋯', tag:'5 / 6', title:'더보기 — 운영 도구 모음',
    desc:'회원 관리·자산 대여·직책 인계·결산까지 모임 운영의 모든 것.',
    features:[
      '📥 가입 신청 → 1탭 승인',
      '⭐ 직책 인계 → 위임/수락으로 5분',
      '📦 자산 대여 (텐트·악기·장비)',
      '📊 결산 리포트 → PDF로 인쇄',
      '👴 어르신 모드 — 글자 4단계'
    ]
  },
  {
    icon:'🎉', tag:'6 / 6', title:'준비 끝!',
    desc:'이제 진짜 모임 운영을 시작합니다. 막히면 더보기 → 도움말 다시 보기로 이 가이드를 또 볼 수 있어요.',
    features:[
      '데이터는 자동 저장됩니다',
      '백업: 더보기 → 데이터 → 내보내기',
      '폰에서 쓰려면: 브라우저 → 홈 화면에 추가'
    ]
  }
];
let guideIdx = 0;
function showGuide(idx){
  guideIdx = idx;
  const page = GUIDE_PAGES[idx];
  if(!page){ closeGuide(); return; }
  let dots = '';
  for(let i=0;i<GUIDE_PAGES.length;i++){
    dots += `<div class="guide-dot ${i===idx?'on':''}"></div>`;
  }
  let features = '';
  if(page.features){
    features = '<div class="feature-list">' + page.features.map(f=>`<div>${escape(f)}</div>`).join('') + '</div>';
  }
  $('guide-card').innerHTML = `
    <div class="guide-icon-big">${page.icon}</div>
    <span class="gtag">${page.tag}</span>
    <h2>${escape(page.title)}</h2>
    <p>${escape(page.desc)}</p>
    ${features}
    <div class="guide-dots">${dots}</div>
    <div class="guide-ctas">
      ${idx === GUIDE_PAGES.length-1
        ? `<button class="next" onclick="closeGuide()">시작하기</button>`
        : `<button class="skip" onclick="closeGuide()">건너뛰기</button>
           <button class="next" onclick="showGuide(${idx+1})">다음 ›</button>`}
    </div>
  `;
  $('guide-tour').classList.add('on');
}
function closeGuide(){
  $('guide-tour').classList.remove('on');
  localStorage.setItem('motong-guide-done', '1');
  renderHome();
}

// ════════════════════════════════════════
// Supabase 클라이언트 + 인증
// ════════════════════════════════════════
let sb = null;
let currentSession = null;
let currentProfile = null;
let activeGroupId = null;        // 현재 보고 있는 회의 id
let myMemberships = [];          // [{group_id, role, group:{name, invite_code}}, ...]
const FAKE_EMAIL_DOMAIN = '@motong.local';
// Supabase auth는 email 형식만 받으므로 아이디를 ascii-safe로 변환해 저장
// (한글 등 비ASCII는 base64로 인코딩, ASCII는 그대로)
function idToEmail(id){
  if(/^[A-Za-z0-9_]+$/.test(id)) return id.toLowerCase() + FAKE_EMAIL_DOMAIN;
  // 한글 등: utf-8 → base64 → url-safe
  const enc = btoa(unescape(encodeURIComponent(id)))
    .replace(/\+/g,'.').replace(/\//g,'_').replace(/=+$/,'');
  return 'u_' + enc + FAKE_EMAIL_DOMAIN;
}
const ID_RE = /^[가-힣A-Za-z0-9_]{2,20}$/;
const CODE_RE = /^[0-9]{6}$/;

// 인증 화면 토글
function showAuth(which){
  document.querySelectorAll('.auth-screen').forEach(s=>s.classList.remove('on'));
  if(which) $(which).classList.add('on');
}
function hideAuth(){ document.querySelectorAll('.auth-screen').forEach(s=>s.classList.remove('on')); }

// 로그인 (아이디/비번 → 내부적으로 가짜 이메일로 변환)
async function doLogin(){
  const id = $('login-id').value.trim();
  const pw = $('login-pw').value;
  if(!id || !pw){ authError('login-err','아이디·비밀번호를 입력하세요'); return; }
  if(!ID_RE.test(id)){ authError('login-err','아이디 형식이 올바르지 않습니다 (한글·영문·숫자 2~20자)'); return; }
  $('login-btn').disabled = true; $('login-btn').textContent = '로그인 중...';
  const { data, error } = await sb.auth.signInWithPassword({ email: idToEmail(id), password:pw });
  $('login-btn').disabled = false; $('login-btn').textContent = '로그인';
  if(error){ authError('login-err', translateAuthError(error.message)); return; }
  currentSession = data.session;
  await afterAuth();
}

// 회원가입 (아이디/비번 + 이름 + 선택 초대코드)
async function doSignup(){
  const id = $('signup-id').value.trim();
  const pw = $('signup-pw').value;
  const name = $('signup-name').value.trim();
  const nickname = ($('signup-nickname') ? $('signup-nickname').value.trim() : '');
  const code = $('signup-code').value.trim();
  if(!ID_RE.test(id)){ authError('signup-err','아이디는 한글·영문·숫자 2~20자입니다'); return; }
  if(pw.length<6){ authError('signup-err','비밀번호는 6자 이상이어야 합니다'); return; }
  if(!name || name.length<1){ authError('signup-err','이름을 입력해주세요'); return; }
  if(name.length>30){ authError('signup-err','이름은 30자 이내로 입력해주세요'); return; }
  if(code && !CODE_RE.test(code)){ authError('signup-err','초대 코드는 6자리 숫자입니다'); return; }
  $('signup-btn').disabled = true; $('signup-btn').textContent = '가입 중...';
  const { data, error } = await sb.auth.signUp({
    email: idToEmail(id),
    password: pw,
    options: { data: { username: id, name } }
  });
  $('signup-btn').disabled = false; $('signup-btn').textContent = '가입하고 시작';
  if(error){ authError('signup-err', translateAuthError(error.message)); return; }
  if(!data.session){
    authError('signup-err','가입 완료. Supabase 대시보드 → Authentication → Email → "Confirm email" OFF로 설정 후 로그인하세요.');
    return;
  }
  currentSession = data.session;
  // ① 핵심 필드(name, username)는 무조건 저장 — nickname 컬럼이 없어도 name은 살아남음
  const baseUp = await sb.from('profiles').upsert({
    id: currentSession.user.id,
    username: id,
    name
  }, { onConflict: 'id' });
  if(baseUp.error){
    console.error('profile base upsert failed', baseUp.error);
    authError('signup-err', '프로필 저장 실패: '+humanizeError(baseUp.error));
    return;
  }
  // ② nickname은 별도 update — 컬럼이 없으면 조용히 실패 (name 저장은 이미 끝)
  if(nickname){
    const nickUp = await sb.from('profiles').update({ nickname }).eq('id', currentSession.user.id);
    if(nickUp.error) console.warn('nickname update failed (DB column may be missing — run fix-nickname.sql):', nickUp.error.message);
  }
  // 초대 코드가 있으면 가입과 동시에 그 회 참여
  if(code){
    const { data: jr } = await sb.rpc('join_group_by_code', { code });
    if(jr && jr.group_id){
      activeGroupId = jr.group_id;
      localStorage.setItem('motong-active-gid', activeGroupId);
    }
  }
  await afterAuth();
}

async function doSignOut(){
  await sb.auth.signOut();
  currentSession = null; currentProfile = null;
  activeGroupId = null; myMemberships = [];
  localStorage.removeItem('motong-active-gid');
  showAuth('auth-screen');
}

// ─── 영어 에러 메시지 → 한글 변환 (전역) ───
function humanizeError(input){
  if(!input) return '알 수 없는 오류가 발생했어요';
  const msg = (typeof input === 'string') ? input : (input.message || JSON.stringify(input));
  // 인증 관련
  if(/Invalid login credentials/i.test(msg)) return '아이디 또는 비밀번호가 틀렸어요';
  if(/User already registered|already registered/i.test(msg)) return '이미 가입된 아이디입니다';
  if(/Password should be at least|at least 6/i.test(msg)) return '비밀번호는 6자 이상이어야 해요';
  if(/Email not confirmed/i.test(msg)) return '계정이 아직 활성화되지 않았어요 (관리자에게 문의)';
  if(/Email rate limit exceeded/i.test(msg)) return '잠시 후 다시 시도해주세요 (가입 시도가 너무 많음)';
  if(/User not found/i.test(msg)) return '해당 계정을 찾을 수 없어요';
  if(/signups not allowed|signup is disabled/i.test(msg)) return '현재 가입이 일시 중단됐어요';
  if(/Database error saving new user/i.test(msg)) return '계정 저장 중 오류가 났어요. 관리자에게 문의해주세요 (DB 트리거 확인 필요)';
  if(/over_email_send_rate_limit/i.test(msg)) return '잠시 후 다시 시도해주세요';
  if(/weak_password/i.test(msg)) return '비밀번호가 너무 단순해요. 더 복잡하게 만들어주세요';
  if(/network|Failed to fetch|NetworkError|TypeError: fetch/i.test(msg)) return '네트워크 연결을 확인해주세요';
  if(/JWT|expired|session/i.test(msg)) return '로그인이 만료됐어요. 다시 로그인해주세요';

// RLS / 권한
  if(/row-level security|RLS|new row violates|policy/i.test(msg)) return '권한이 없어요 (관리자에게 문의)';
  if(/permission denied/i.test(msg)) return '권한이 없어요';
  if(/JWT.*invalid|invalid.*JWT/i.test(msg)) return '로그인 정보가 만료됐어요. 다시 로그인해주세요';

// Postgres 제약/스키마
  if(/duplicate key|unique constraint|already exists/i.test(msg)) return '이미 존재하는 항목이에요';
  if(/foreign key|violates foreign/i.test(msg)) return '연결된 데이터가 있어 처리할 수 없어요';
  if(/not null|null value/i.test(msg)) return '필수 항목이 비어있어요';
  if(/check constraint|violates check/i.test(msg)) return '입력한 형식이 맞지 않아요';
  if(/value too long/i.test(msg)) return '내용이 너무 길어요';
  if(/invalid input syntax|invalid uuid|invalid date/i.test(msg)) return '입력 형식이 올바르지 않아요';
  if(/infinite recursion/i.test(msg)) return '서버 정책 오류 (관리자에게 문의)';
  if(/does not exist|relation .* does not exist|function .* does not exist/i.test(msg)) return '서버 설정이 완료되지 않았어요 (관리자에게 문의)';
  if(/timeout|timed out/i.test(msg)) return '서버 응답이 늦어요. 잠시 후 다시 시도해주세요';

// PostgREST 코드
  if(/PGRST116/i.test(msg)) return '해당 데이터를 찾을 수 없어요';
  if(/PGRST301/i.test(msg)) return '로그인이 필요해요';

// 그 외: 영어 그대로 보여주지 말고 일반화
  return '오류가 발생했어요. 잠시 후 다시 시도해주세요';
}
// 호환용 별칭 (기존 호출 그대로 동작)
function translateAuthError(msg){ return humanizeError(msg); }

// 내 가입 회 목록 새로고침
async function refreshMemberships(){
  const { data, error } = await sb
    .from('memberships')
    .select('group_id, role, joined_at, group:groups(id, name, parent_name, invite_code, created_at)')
    .eq('user_id', currentSession.user.id);
  if(error){ console.error('memberships load failed', error); myMemberships = []; return; }
  myMemberships = (data||[]).filter(m=>m.group);
}

// 인증 후: 프로필 → 멤버십 목록 → 활성 그룹 결정
async function afterAuth(){
  hideAuth();
  let { data: profile } = await sb.from('profiles').select('*').eq('id', currentSession.user.id).maybeSingle();
  if(!profile){
    await sb.from('profiles').insert({ id: currentSession.user.id, name: '' });
    const r2 = await sb.from('profiles').select('*').eq('id', currentSession.user.id).single();
    profile = r2.data;
  }
  currentProfile = profile;
  await refreshMemberships();
  if(myMemberships.length === 0){
    showAuth('group-screen');
    return;
  }
  // 저장된 활성 그룹이 멤버십에 있으면 그걸 우선
  const saved = localStorage.getItem('motong-active-gid');
  const found = myMemberships.find(m => m.group_id === saved);
  activeGroupId = found ? saved : myMemberships[0].group_id;
  localStorage.setItem('motong-active-gid', activeGroupId);
  await loadGroupData();
  $('welcome').classList.add('hide');
  history.replaceState({ nav:'home' }, '', '');
  renderHome();
  subscribeRealtime();
  // 가입 후 미매칭 거래 자가 확인 마법사 (한 번만)
  setTimeout(maybeOpenClaimWizard, 800);
}

// 새 모임 만들기
async function doCreateGroup(){
  const name = $('cg-name').value.trim();
  const myName = $('cg-myname').value.trim();
  const parent = ($('cg-parent') ? $('cg-parent').value.trim() : '');
  if(!name){ authError('cg-err','모임 이름을 입력하세요'); return; }
  if(!myName){ authError('cg-err','본인 이름을 입력하세요'); return; }
  $('cg-btn').disabled = true; $('cg-btn').textContent = '만드는 중...';
  const { data, error } = await sb.rpc('create_group_with_membership', {
    g_name: name, my_name: myName, g_parent: parent || null
  });
  $('cg-btn').disabled = false; $('cg-btn').textContent = '모임 만들기';
  if(error){ authError('cg-err','모임 생성 실패: '+humanizeError(error)); return; }
  if(!data || !data.group_id){ authError('cg-err','오류: '+JSON.stringify(data)); return; }
  toast('모임 생성! 초대 코드: '+data.invite_code);
  activeGroupId = data.group_id;
  localStorage.setItem('motong-active-gid', activeGroupId);
  const r = await sb.from('profiles').select('*').eq('id', currentSession.user.id).single();
  currentProfile = r.data;
  await refreshMemberships();
  await loadGroupData();
  hideAuth();
  $('welcome').classList.add('hide');
  setTimeout(()=>{
    if(!localStorage.getItem('motong-onboarded')){
      openModal('modal-fontsize');
      localStorage.setItem('motong-onboarded','1');
    }
    renderHome();
  }, 200);
  subscribeRealtime();
}

// 기존 모임 참여 (그룹 화면 또는 회 추가에서 사용)
async function doJoinGroup(){
  const myName = $('jg-myname').value.trim();
  const code = $('jg-code').value.trim();
  if(!myName){ authError('jg-err','본인 이름을 입력하세요'); return; }
  if(!CODE_RE.test(code)){ authError('jg-err','초대 코드는 6자리 숫자입니다'); return; }
  $('jg-btn').disabled = true; $('jg-btn').textContent = '참여 중...';
  await sb.from('profiles').update({ name: myName }).eq('id', currentSession.user.id);
  const { data, error } = await sb.rpc('join_group_by_code', { code });
  $('jg-btn').disabled = false; $('jg-btn').textContent = '참여하기';
  if(error){ authError('jg-err','참여 실패: '+humanizeError(error)); return; }
  if(!data || !data.group_id){
    authError('jg-err', data && data.error==='invalid_code' ? '초대 코드가 잘못되었어요' : (data && data.error==='bad_format' ? '초대 코드는 6자리 숫자여야 해요' : '참여 실패'));
    return;
  }
  toast('모임 참여 완료!');
  activeGroupId = data.group_id;
  localStorage.setItem('motong-active-gid', activeGroupId);
  const r = await sb.from('profiles').select('*').eq('id', currentSession.user.id).single();
  currentProfile = r.data;
  await refreshMemberships();
  await loadGroupData();
  hideAuth();
  $('welcome').classList.add('hide');
  renderHome();
  subscribeRealtime();
}

// 활성 그룹 전환
async function switchActiveGroup(gid){
  if(!myMemberships.find(m=>m.group_id===gid)){ toast('가입 안 된 모임입니다'); return; }
  activeGroupId = gid;
  localStorage.setItem('motong-active-gid', gid);
  await loadGroupData();
  renderHome();
  subscribeRealtime();
  closeModal('modal-groups');
  toast('모임을 바꿨습니다');
}

// 로그인 상태에서 새 회 추가 가입 (초대코드만)
async function joinAnotherGroup(){
  const code = (prompt('참여할 모임의 초대 코드 6자리 숫자를 입력하세요') || '').trim();
  if(!code) return;
  if(!CODE_RE.test(code)){ toast('6자리 숫자가 아닙니다'); return; }
  const { data, error } = await sb.rpc('join_group_by_code', { code });
  if(error){ toast('참여 실패: '+humanizeError(error)); return; }
  if(!data || !data.group_id){
    toast(data && data.error==='invalid_code' ? '초대 코드가 잘못되었어요' : (data && data.error==='bad_format' ? '초대 코드는 6자리 숫자여야 해요' : '참여 실패')); return;
  }
  toast('「'+(data.group_name||'')+'」 참여 완료');
  await refreshMemberships();
  await switchActiveGroup(data.group_id);
}

// ════════════════════════════════════════
// Supabase 데이터 로더
// ════════════════════════════════════════
async function loadGroupData(){
  const gid = activeGroupId;
  const [group, mships, transactions, meetings, rules, agenda, notifs, applicants, assets, rentals, transfers] = await Promise.all([
    sb.from('groups').select('*').eq('id', gid).single(),
    sb.from('memberships').select('user_id, role, joined_at, profile:profiles(id, name, phone, username, nickname)').eq('group_id', gid).order('joined_at',{ascending:true}),
    sb.from('transactions').select('*').eq('group_id', gid).order('date',{ascending:false}),
    sb.from('meetings').select('*').eq('group_id', gid).order('date',{ascending:false}),
    sb.from('rules').select('*').eq('group_id', gid).maybeSingle(),
    sb.from('agenda').select('*').eq('group_id', gid),
    sb.from('notifications').select('*').eq('group_id', gid),
    sb.from('applicants').select('*').eq('group_id', gid),
    sb.from('assets').select('*').eq('group_id', gid),
    sb.from('rentals').select('*').eq('group_id', gid),
    sb.from('transfers').select('*').eq('group_id', gid),
  ]);

D.group = {
    id:gid,
    name:(group.data?.name)||'',
    parentName:(group.data?.parent_name)||'',
    since:(group.data?.created_at||'').slice(0,10),
    inviteCode:(group.data?.invite_code)||''
  };
  const myRow = (mships.data||[]).find(m => m.user_id === currentSession.user.id);
  const myRole = myRow ? myRow.role : 'member';
  // 🔑 본인 식별자 일치 — D.me.id를 Supabase 사용자 UUID로 동기화
  D.me.id = currentSession.user.id;
  D.me.role = myRole;
  // 가입 순서대로 정렬됨 (joined_at asc). 별명/직업은 사용자가 직접 입력하는 항목.
  D.members = (mships.data || []).map(m => ({
    id: m.user_id,
    name: (m.profile?.name && m.profile.name.trim()) ? m.profile.name : '회원',
    nickname: (m.profile?.nickname || '').trim(),
    phone: m.profile?.phone || '',
    role: m.role || 'member',
    joinedAt: m.joined_at
  }));
  // D.me.name 갱신 — 본인의 표시 이름 일관성
  const myDisplayed = D.members.find(x => x.id === D.me.id);
  if(myDisplayed){
    D.me.name = myDisplayed.name;
    D.me.nickname = myDisplayed.nickname;
  } else if(currentProfile){
    // 멤버십에서 못 찾으면 profiles에서라도 채우기 (안전망)
    D.me.name = currentProfile.name || '';
    D.me.nickname = currentProfile.nickname || '';
  }
  D.transactions = (transactions.data||[]).map(t => ({
    id:t.id, type:t.type, amount:t.amount, date:t.date, title:t.title,
    category:t.category||'', memo:t.memo||'', by:t.by_user, attaches:t.attaches||[],
    memberId: t.member_id || null,
    matchStatus: t.match_status || 'unmatched'
  }));
  D.meetings = (meetings.data||[]).map(m => ({
    id:m.id, title:m.title, date:m.date, time:m.time||'', place:m.place||'', memo:m.memo||'',
    attendance:m.attendance||{}, album:m.album||[]
  }));
  D.rules = {
    current:{
      title:rules.data?.current_title||'',
      date:rules.data?.effective_date||'',
      articles:rules.data?.current_articles||0,
      pdfData:rules.data?.pdf_data||null,
      pdfName:rules.data?.pdf_name||null,
    },
    history: rules.data?.history || []
  };
  D.agenda = (agenda.data||[]).map(a => ({
    id:a.id, title:a.title, detail:a.detail||'', kind:a.kind||'normal',
    by:a.by_user, target:a.target_user, endDate:a.end_date,
    votes:a.votes||{yes:0,no:0}, voters:a.voters||{}, total:a.total||D.members.length, status:a.status||'open'
  }));
  D.notifications = (notifs.data||[]).map(n => ({
    id:n.id, type:n.type, title:n.title, body:n.body, agendaId:n.agenda_id,
    forUser:n.for_user, read:n.read, createdAt:(n.created_at||'').slice(0,10)
  }));
  D.applicants = (applicants.data||[]).map(a => ({
    id:a.id, name:a.name, phone:a.phone||'', message:a.message||'',
    appliedAt:(a.applied_at||'').slice(0,10), status:a.status,
    rejectReason:a.reject_reason
  }));
  D.assets = (assets.data||[]).map(a => ({
    id:a.id, icon:a.icon||'📦', name:a.name, category:a.category||'',
    status:a.status||'available', rentedBy:a.rented_by, rentedFrom:a.rented_from, rentedUntil:a.rented_until
  }));
  D.rentals = (rentals.data||[]).map(r => ({
    id:r.id, assetId:r.asset_id, userId:r.user_id, from:r.from_date, until:r.until_date,
    memo:r.memo||'', returnedAt:r.returned_at
  }));
  D.transfers = (transfers.data||[]).map(t => ({
    id:t.id, role:t.role, fromUser:t.from_user, toUser:t.to_user, reason:t.reason||'',
    startedAt:t.started_at, status:t.status, completedAt:t.completed_at, snapshot:t.snapshot
  }));
  // groups.settings 컬럼이 있으면 적용, 아니면 LocalStorage에서 복원
  if(group.data && group.data.settings && typeof group.data.settings === 'object'){
    D.settings = Object.assign({}, D.settings || {}, group.data.settings);
  }
  loadLocalSettings();
}

// 실시간 구독
let realtimeChannel = null;
function subscribeRealtime(){
  if(realtimeChannel) sb.removeChannel(realtimeChannel);
  const gid = activeGroupId;
  realtimeChannel = sb.channel('motong-'+gid)
    .on('postgres_changes', { event:'*', schema:'public', table:'transactions', filter:`group_id=eq.${gid}` }, () => reloadAndRefresh('transactions'))
    .on('postgres_changes', { event:'*', schema:'public', table:'meetings', filter:`group_id=eq.${gid}` }, () => reloadAndRefresh('meetings'))
    .on('postgres_changes', { event:'*', schema:'public', table:'agenda', filter:`group_id=eq.${gid}` }, () => reloadAndRefresh('agenda'))
    .on('postgres_changes', { event:'*', schema:'public', table:'notifications', filter:`group_id=eq.${gid}` }, () => reloadAndRefresh('notifications'))
    .on('postgres_changes', { event:'*', schema:'public', table:'memberships', filter:`group_id=eq.${gid}` }, () => reloadAndRefresh('memberships'))
    .on('postgres_changes', { event:'*', schema:'public', table:'assets', filter:`group_id=eq.${gid}` }, () => reloadAndRefresh('assets'))
    .on('postgres_changes', { event:'*', schema:'public', table:'applicants', filter:`group_id=eq.${gid}` }, () => reloadAndRefresh('applicants'))
    .subscribe();
}
async function reloadAndRefresh(_which){
  // 단순화: 전체 다시 로드 (MVP)
  await loadGroupData();
  refreshActivePage();
}

// ════════════════════════════════════════
// 당겨서 새로고침 (위→아래 스크롤로 갱신)
// ════════════════════════════════════════
const _ptrState = new WeakMap();   // page → { startY, pulling, busy, indicator }

function attachPullToRefresh(){
  document.querySelectorAll('.page').forEach(page => {
    if(page.dataset.ptrBound) return;
    page.dataset.ptrBound = '1';
    _ensureIndicator(page);

const THRESHOLD = 70, MAX = 110;

page.addEventListener('touchstart', (e) => {
      const st = _ensureIndicator(page);
      if(st.busy) return;
      if(page.scrollTop <= 0 && e.touches.length === 1){
        st.startY = e.touches[0].clientY;
        st.pulling = true;
      } else { st.startY = null; st.pulling = false; }
    }, { passive:true });

page.addEventListener('touchmove', (e) => {
      const st = _ensureIndicator(page);
      if(!st.pulling || st.startY === null || st.busy) return;
      const dy = e.touches[0].clientY - st.startY;
      const i = st.indicator;
      if(dy <= 0){
        i.style.height = '0px'; i.style.opacity = '0'; i.classList.remove('ready');
        return;
      }
      const pull = Math.min(dy * 0.55, MAX);
      i.style.height = pull + 'px';
      i.style.opacity = String(Math.min(pull / THRESHOLD, 1));
      if(pull >= THRESHOLD){
        i.textContent = '↑ 놓아서 새로고침'; i.classList.add('ready');
      } else {
        i.textContent = '↓ 당겨서 새로고침'; i.classList.remove('ready');
      }
    }, { passive:true });

// saveData()는 더 이상 동기 저장 안 함. Supabase가 진짜 저장소.
// 기존 호출은 무시 (호환).
function saveData(){
  // v2: Supabase가 진실원본. 호출은 호환용.
}

// loadData()는 기본 빈 데이터 (Supabase 로드 전 임시)
function loadData(){
  return JSON.parse(JSON.stringify(DEFAULT_DATA));
}

// ════════════════════════════════════════
// Supabase 헬퍼: 각 엔티티 push
// ════════════════════════════════════════
async function pushTx(tx){
  const row = {
    id:tx.id, group_id:activeGroupId, type:tx.type, amount:tx.amount,
    date:tx.date, title:tx.title, category:tx.category||null, memo:tx.memo||null,
    by_user:tx.by||currentSession.user.id, attaches:tx.attaches||[],
    member_id: tx.memberId || null,
    match_status: tx.matchStatus || 'unmatched'
  };
  return await sb.from('transactions').upsert(row);
}
async function deleteTx(id){ return await sb.from('transactions').delete().eq('id',id); }
async function pushMeeting(m){
  const row = {
    id:m.id, group_id:activeGroupId, title:m.title,
    date:m.date||null, time:m.time||null, place:m.place||null, memo:m.memo||null,
    attendance:m.attendance||{}, album:m.album||[]
  };
  return await sb.from('meetings').upsert(row);
}
async function pushAgenda(a){
  const row = {
    id:a.id, group_id:activeGroupId, title:a.title, detail:a.detail||null,
    kind:a.kind||'normal', target_user:a.target||null, by_user:a.by,
    end_date:a.endDate, votes:a.votes||{yes:0,no:0}, voters:a.voters||{},
    total:a.total, status:a.status||'open'
  };
  return await sb.from('agenda').upsert(row);
}
async function pushNotification(n){
  const row = {
    id:n.id, group_id:activeGroupId, type:n.type, title:n.title, body:n.body||null,
    agenda_id:n.agendaId||null, for_user:n.forUser||null, read:n.read||false,
    created_at: n.createdAt ? new Date(n.createdAt).toISOString() : new Date().toISOString()
  };
  return await sb.from('notifications').upsert(row);
}
async function pushApplicant(a){
  const row = {
    id:a.id, group_id:activeGroupId, name:a.name, phone:a.phone||null,
    message:a.message||null, status:a.status||'pending', reject_reason:a.rejectReason||null
  };
  return await sb.from('applicants').upsert(row);
}
async function pushAsset(a){
  const row = {
    id:a.id, group_id:activeGroupId, icon:a.icon, name:a.name, category:a.category||null,
    status:a.status||'available', rented_by:a.rentedBy||null, rented_from:a.rentedFrom||null, rented_until:a.rentedUntil||null
  };
  return await sb.from('assets').upsert(row);
}
async function pushRental(r){
  return await sb.from('rentals').upsert({
    id:r.id, group_id:activeGroupId, asset_id:r.assetId, user_id:r.userId,
    from_date:r.from, until_date:r.until, memo:r.memo||null, returned_at:r.returnedAt||null
  });
}
async function pushTransfer(t){
  return await sb.from('transfers').upsert({
    id:t.id, group_id:activeGroupId, role:t.role,
    from_user:t.fromUser, to_user:t.toUser, reason:t.reason||null,
    started_at:t.startedAt, status:t.status, completed_at:t.completedAt||null, snapshot:t.snapshot||null
  });
}
async function pushProfileSelf(){
  // v3: role은 memberships 테이블로 이동 — profiles에는 name/phone만 업데이트
  await sb.from('profiles').update({
    name: D.me.name,
    phone: (D.members.find(m=>m.id===D.me.id)||{}).phone || null
  }).eq('id', currentSession.user.id);
  // 직책(role)은 활성 그룹의 memberships에 반영
  if(activeGroupId && D.me.role){
    await sb.from('memberships').update({ role: D.me.role })
      .eq('user_id', currentSession.user.id)
      .eq('group_id', activeGroupId);
  }
}
async function pushRules(){
  const r = D.rules.current;
  await sb.from('rules').upsert({
    group_id:activeGroupId, current_title:r.title,
    effective_date:r.date||null, current_articles:r.articles||0,
    pdf_data:r.pdfData, pdf_name:r.pdfName, history:D.rules.history
  }, { onConflict:'group_id' });
}

// ════════════════════════════════════════
// 시작 진입점
// ════════════════════════════════════════
applyFontSize();
$('welcome').classList.add('hide');

window.addEventListener('DOMContentLoaded', async ()=>{
  if(!initSupabase()){
    setTimeout(()=>location.reload(), 500);
    return;
  }
  // 모든 페이지에 당겨서 새로고침 부착
  attachPullToRefresh();
  // 무작위 예시 placeholder 적용 (개인정보 노출 방지)
  applyRandomExamples();

const { data: sess } = await sb.auth.getSession();
  if(sess.session){
    currentSession = sess.session;
    await afterAuth();
  } else {
    showAuth('auth-screen');
  }
  // 인증 변경 감지 (다른 탭에서 로그아웃 등)
  sb.auth.onAuthStateChange((event, session)=>{
    if(event==='SIGNED_OUT'){
      currentSession = null; currentProfile = null;
      if(realtimeChannel) sb.removeChannel(realtimeChannel);
      showAuth('auth-screen');
    }
  });
});

// PWA Service Worker (옵션 — 설치 가능하게)
if('serviceWorker' in navigator){
  // 단일 파일 PWA를 위해 minimal SW 등록은 v2에서
}
</script>
</body>
</html>

다시 오신 걸 환영합니다

모통 계정 만들기

새 모임 만들기

기존 모임 참여

모통

수입·지출 등록

정모 등록

회원 추가

글자 어떤 크기가 편하세요?

안건 발의

내 정보 수정

회원 내보내기 발의

모통 시작하기

자산 추가

대여 신청

가입 신청 받기