/* ─── 모임 사이트 공통 디자인 (앱 셸 레이아웃) ───
   상단 앱바 + 하단 탭바, 쿨그레이 배경 + 화이트 시트 + 딥그린 포인트.
   (--gold 등 옛 변수명은 호환용 별칭 — 값은 그린/뉴트럴) */
*, *::before, *::after{box-sizing:border-box}
:root{
  --bg:#eef0ee; --surface:#ffffff; --surface2:#f6f7f6;
  --line:#e4e7e3; --ink:#1b1f1b; --muted:#6f766e; --faint:#a4aaa2;
  --accent:#1a7f4e; --accent-deep:#136040; --accent-soft:#e2f1e8;
  --red:#c74a33;
  /* 호환 별칭 (각 페이지 내부 CSS가 참조) */
  --gold:var(--accent); --gold-deep:var(--accent-deep); --gold-soft:var(--accent-soft);
  --panel:var(--surface); --panel2:var(--surface2); --good:var(--accent);
  --shadow:0 1px 2px rgba(20,30,20,.05), 0 4px 14px rgba(20,30,20,.04);
}
html{font-size:16px}
.hidden{display:none !important}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",sans-serif;
  line-height:1.55;
  padding:0 16px calc(96px + env(safe-area-inset-bottom));
  max-width:560px; margin:0 auto;
  -webkit-tap-highlight-color:transparent;
}

/* ── 상단 앱바 ── */
.appbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; height:52px;
  margin:0 -16px 8px; padding:0 18px;
  background:rgba(238,240,238,.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.ab-brand{
  color:var(--ink); text-decoration:none; font-weight:800; font-size:1rem;
  letter-spacing:.06em; display:flex; flex-direction:column; line-height:1.2;
}
.ab-brand small{
  font-size:.6rem; color:var(--faint); font-weight:600; letter-spacing:.03em;
}
.ab-right{margin-left:auto; color:var(--muted); font-size:.8rem}

/* ── 페이지 타이틀 ── */
h1{
  font-family:inherit; color:var(--ink);
  font-size:1.55rem; font-weight:800; letter-spacing:-.02em;
  text-align:left; line-height:1.3; margin:18px 4px 4px;
}
h1::before{content:none}
.sub{text-align:left; color:var(--muted); font-size:.86rem; margin:0 4px 18px; line-height:1.6}

/* ── 시트(구 카드) ── */
.card{
  background:var(--surface); border:none; border-radius:18px;
  padding:22px 20px; margin-bottom:14px; box-shadow:var(--shadow);
}
.card h2{font-size:.95rem; margin-bottom:12px; letter-spacing:-.01em}
.card > b{font-size:.95rem; letter-spacing:-.01em}

/* ── 입력 (채움형) ── */
label{font-size:.76rem; color:var(--muted); font-weight:600; display:block; margin:12px 0 6px}
input,textarea{
  width:100%; padding:14px 15px; border:1.5px solid transparent; border-radius:13px;
  font-size:1rem; background:var(--surface2); font-family:inherit; color:var(--ink);
  transition:border-color .15s, background .15s;
}
input:focus,textarea:focus{outline:none; border-color:var(--accent); background:#fff}
input::placeholder,textarea::placeholder{color:var(--faint)}

/* ── 버튼 ── */
.btn,.btn-gold{
  display:block; width:100%; padding:15px; border:none; border-radius:14px;
  font-size:1.02rem; font-weight:800; cursor:pointer; font-family:inherit;
  background:var(--accent); color:#fff; letter-spacing:-.01em;
  transition:transform .1s, background .15s;
}
.btn:hover,.btn-gold:hover{background:var(--accent-deep)}
.btn:active,.btn-gold:active{transform:scale(.98)}
.btn:disabled,.btn-gold:disabled{opacity:.4}
.btn:focus-visible,.btn-gold:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.btn-line{
  display:inline-block; width:auto; background:var(--surface2); border:none;
  color:var(--muted); padding:10px 16px; font-size:.84rem; border-radius:11px; font-weight:600;
}

/* ── 공통 ── */
.msg{font-size:.85rem; margin-top:9px; min-height:1.2em}
.msg.err{color:var(--red)} .msg.ok{color:var(--accent)}
.note{font-size:.78rem; color:var(--muted); line-height:1.65; margin-top:10px}
#share{
  background:var(--accent-soft); border:none; border-radius:13px;
  padding:13px 14px; font-size:.85rem; word-break:break-all; margin:10px 0 6px;
  color:var(--accent-deep); font-weight:600;
}

/* ── 하단 탭바 ── */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:560px; z-index:50;
  display:flex; justify-content:space-around; align-items:stretch;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  border-radius:18px 18px 0 0;
  box-shadow:0 -4px 18px rgba(20,30,20,.06);
}
.tabbar .tb{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; color:var(--faint); font-size:1.25rem; line-height:1;
  padding:5px 0; border-radius:12px; transition:color .15s;
  filter:grayscale(1) opacity(.55);
}
.tabbar .tb span{font-size:.66rem; font-weight:700; letter-spacing:.01em; color:var(--muted)}
.tabbar .tb.on{filter:none}
.tabbar .tb.on span{color:var(--accent-deep)}
.tabbar .tb:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

/* ── 출석 페이지 ── */
.rk{padding:10px 6px; border-radius:0; font-size:.93rem; border-bottom:1px solid var(--surface2)}
.rk:nth-child(odd){background:none}
.rk:last-child{border-bottom:none}
.rk .no{width:34px; font-weight:700; color:var(--faint)}
.rk .no.top{color:var(--accent); font-size:1rem}
.rk.hero{background:var(--accent-soft); border-radius:10px; color:var(--accent-deep); border-bottom:none}
.chip{background:var(--surface2); border:none; border-radius:16px; padding:6px 13px; font-size:.84rem}
.chip small{color:var(--accent); font-weight:700}
.tabs{border-bottom:1.5px solid var(--surface2)}
.tabs button{font-weight:700; color:var(--faint)}
.tabs button.on{color:var(--accent-deep); border-bottom-color:var(--accent)}
.stat-row b{font-size:1.5rem; color:var(--accent)}
#bigAttend{border-radius:16px}
/* 달력 */
.cal-head button{background:var(--surface2); border:none; border-radius:10px; color:var(--ink)}
.cal-cell.attended{
  background:var(--accent); color:#fff; box-shadow:none; font-weight:800;
}
.cal-cell.today{outline:2px solid var(--accent); outline-offset:1px}
.cal-cell.off{color:#c8ccc6}
.cal-foot b{color:var(--accent)}
.cal-dow.sun{color:var(--red)}

/* ── 게임 페이지 ── */
#status{border:none; border-radius:14px; background:var(--surface); box-shadow:var(--shadow)}
.pl.turn{color:var(--accent-deep)}
.pchip{border-color:var(--accent); color:var(--accent); box-shadow:none}
.pchip.sel{background:var(--accent); color:#fff}
#turnBanner{font-weight:800}
#boardBox{border:none; box-shadow:var(--shadow); border-radius:18px}
#newPieceBtn{background:#fff; border:2px dashed var(--accent); color:var(--accent)}
#discardBtn{background:var(--surface2); border:none; color:var(--muted)}

/* ── 정산 페이지 ── */
.big{color:var(--accent)}
.bank{background:var(--surface2); border:none; border-radius:12px}
.prog{height:12px; border-radius:6px; background:var(--surface2)}
.prog i{background:var(--accent)}
.mem{padding:13px 6px; border-bottom:1px solid var(--surface2)}
.mem button{border-radius:20px; padding:9px 18px; transition:transform .1s}
.mem button.unpaid{background:var(--surface2); border:none; color:var(--muted)}
.mem button.paid{background:var(--accent); color:#fff}
.mem button:active{transform:scale(.95)}

/* ── 쿠팡 파트너스 배너 ── */
.ad-card{background:var(--surface); border-radius:18px; padding:16px 16px 12px; margin-bottom:14px; box-shadow:var(--shadow)}
.ad-label{font-size:.72rem; font-weight:700; color:var(--faint); letter-spacing:.06em; margin-bottom:10px; display:flex; align-items:center; gap:6px}
.ad-label::after{content:"AD"; font-size:.58rem; background:var(--surface2); color:var(--muted); border-radius:5px; padding:2px 6px; letter-spacing:.05em}
.ad-strip{display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px; scrollbar-width:thin}
.ad-strip iframe{border:0; border-radius:12px; flex-shrink:0; background:#fff; box-shadow:0 1px 4px rgba(20,30,20,.08)}
.ad-note{font-size:.64rem; color:var(--faint); margin-top:9px; line-height:1.5}

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

/* ─── 다크모드 (html[data-theme=dark] — head 스니펫 + nav.js 토글이 제어) ─── */
:root[data-theme="dark"]{
  --bg:#141614; --surface:#1e231e; --surface2:#282e28;
  --line:#343a34; --ink:#e7eae5; --muted:#a2a99e; --faint:#6e756b;
  --accent:#2aa568; --accent-deep:#8fd7b0; --accent-soft:#1e3527;
  --red:#e06a52;
  --nav-bg:rgba(26,30,26,.96);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.3);
}
:root[data-theme="dark"] .appbar{background:rgba(20,22,20,.92)}
:root[data-theme="dark"] .tabbar{background:var(--nav-bg)}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus{background:var(--surface)}
:root[data-theme="dark"] .cal-cell.off{color:#4c524c}
:root[data-theme="dark"] #newPieceBtn{background:var(--surface2)}
:root[data-theme="dark"] .btn-line{background:var(--surface2); color:var(--muted)}
:root[data-theme="dark"] .role-3{color:#10241a}
:root[data-theme="dark"] .mtabs button,
:root[data-theme="dark"] .bd-nav button,
:root[data-theme="dark"] .nadmin textarea,
:root[data-theme="dark"] .gb-form input,
:root[data-theme="dark"] .mv-form select,
:root[data-theme="dark"] .bd-sel,
:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .tchip,
:root[data-theme="dark"] .shop-row button{background:var(--surface2); color:var(--ink); border-color:var(--line)}
:root[data-theme="dark"] .tchip{border-color:var(--accent); color:var(--accent-deep)}
:root[data-theme="dark"] .tchip.on{background:var(--accent); color:#fff}
:root[data-theme="dark"] .mtabs button.on{background:var(--accent); color:#fff}
:root[data-theme="dark"] #npBox,
:root[data-theme="dark"] #mnav-sheet{background:var(--surface)}
:root[data-theme="dark"] .cal-head button{background:var(--surface2)}
:root[data-theme="dark"] .fortune,:root[data-theme="dark"] .pin-box{background:var(--surface2)}
:root[data-theme="dark"] .act-line select,:root[data-theme="dark"] .act-line input,
:root[data-theme="dark"] .act-line button.line,:root[data-theme="dark"] .kick-btn{background:var(--surface2); color:var(--ink)}
:root[data-theme="dark"] .kick-btn{color:var(--red)}