/* ==================================================================
 *  생명샘 청년부 통합 시스템 — 공통 디자인 시스템 (theme.css)
 *  차분한 기업용 톤 · 큰 글자와 넉넉한 여백 · 밝은/어두운 화면 모두 지원
 *  (admin / attendance / sermon 세 앱에 동일하게 들어갑니다)
 * ================================================================== */

:root{
  color-scheme: light dark;

  --bg:#F2F5F7;
  --surface:#FFFFFF;
  --surface-2:#F6F8FA;
  --surface-3:#EEF2F5;
  --ink:#1E2A33;
  --ink-soft:#556571;
  --ink-mute:#8A98A2;
  --line:#E2E8ED;
  --line-soft:#EDF1F4;

  --brand:#3E5C76;
  --brand-strong:#2C4560;
  --brand-tint:#E9F0F5;
  --brand-ink:#FFFFFF;

  /* ── 타이틀 띠 — 네 앱이 같은 색을 씁니다 ──
     켜진 상단 탭 · 표 머리(이름·날짜 줄)가 모두 이 색입니다.
     한 곳에서 바꾸면 앱 전체의 띠가 함께 바뀝니다. */
  --hdr:#657D77;
  --hdr-ink:#FFFFFF;
  --hdr-tint:#E7EDEA;        /* 띠 색의 아주 옅은 짝 — 이름표 바탕 */
  --hdr-soft:#EDEDE7;       /* 안 켜진 탭 — 회색 계열 */
  --hdr-soft-ink:#8E938E;
  --chk-on:#4F8B6B;         /* 출석 동그라미 */

  --accent:#3E9B8C;
  --accent-strong:#2F7D71;
  --accent-tint:#E6F3F1;

  --ok:#2E7D5B;
  --ok-tint:#E5F1EB;
  --warn:#A9741E;
  --warn-tint:#F6EDDD;
  --danger:#AF473A;
  --danger-tint:#F6E5E2;

  /* 조 고유 색상 — 베델조 금색 · 길갈조 붉은색 · 실로조 초록색
     -bg 는 띠·배경용 파스텔 톤,  기본값은 글자·테두리용 진한 톤 */
  --cell-bethel:#A9791C;  --cell-bethel-bg:#F7EBC4;  --cell-bethel-ink:#6D4C08;
  --cell-gilgal:#B5533C;  --cell-gilgal-bg:#F9DCD4;  --cell-gilgal-ink:#8A3623;
  --cell-shiloh:#3E8E5A;  --cell-shiloh-bg:#D8EEDF;  --cell-shiloh-ink:#256B3F;
  --cell-none:#8A9199;    --cell-none-bg:#E9EDF0;    --cell-none-ink:#4E5A64;

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(30,42,51,.05), 0 8px 24px -14px rgba(30,42,51,.18);
  --shadow-lg:0 12px 40px -12px rgba(30,42,51,.28);

  --tap:46px;
  --font:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#151C22;
    --surface:#1D262E;
    --surface-2:#232E37;
    --surface-3:#2A3742;
    --ink:#E7ECEF;
    --ink-soft:#AAB6BE;
    --ink-mute:#7E8B94;
    --line:#313E48;
    --line-soft:#2A353E;

    --brand:#8FB2CE;
    --brand-strong:#B4CEE3;
    --brand-tint:#26333F;
    --brand-ink:#12202B;

    --hdr:#4E635C; --hdr-ink:#EDF3F0; --hdr-tint:#26302D;
    --hdr-soft:#2A343B; --hdr-soft-ink:#8795A0;
    --chk-on:#4E8E6C;

    --accent:#5FBEAE;
    --accent-strong:#8AD3C6;
    --accent-tint:#213630;

    --ok:#7EC7A3;
    --ok-tint:#1F3329;
    --warn:#D6A960;
    --warn-tint:#332A1B;
    --danger:#E0897B;
    --danger-tint:#33231F;

    --cell-bethel:#D9B45A;  --cell-bethel-bg:#3B331C;  --cell-bethel-ink:#EBD08A;
    --cell-gilgal:#E08C74;  --cell-gilgal-bg:#3A2622;  --cell-gilgal-ink:#F0B3A2;
    --cell-shiloh:#74C295;  --cell-shiloh-bg:#1F3329;  --cell-shiloh-ink:#9BD8B4;
    --cell-none:#7E8B94;    --cell-none-bg:#28333B;    --cell-none-ink:#A9B6BE;

    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.6);
    --shadow-lg:0 16px 44px -14px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --bg:#151C22; --surface:#1D262E; --surface-2:#232E37; --surface-3:#2A3742;
  --ink:#E7ECEF; --ink-soft:#AAB6BE; --ink-mute:#7E8B94; --line:#313E48; --line-soft:#2A353E;
  --brand:#8FB2CE; --brand-strong:#B4CEE3; --brand-tint:#26333F; --brand-ink:#12202B;
  --hdr:#4E635C; --hdr-ink:#EDF3F0; --hdr-tint:#26302D; --hdr-soft:#2A343B; --hdr-soft-ink:#8795A0; --chk-on:#4E8E6C;
  --accent:#5FBEAE; --accent-strong:#8AD3C6; --accent-tint:#213630;
  --ok:#7EC7A3; --ok-tint:#1F3329; --warn:#D6A960; --warn-tint:#332A1B;
  --danger:#E0897B; --danger-tint:#33231F;
  --cell-bethel:#D9B45A;  --cell-bethel-bg:#3B331C;  --cell-bethel-ink:#EBD08A;
  --cell-gilgal:#E08C74;  --cell-gilgal-bg:#3A2622;  --cell-gilgal-ink:#F0B3A2;
  --cell-shiloh:#74C295;  --cell-shiloh-bg:#1F3329;  --cell-shiloh-ink:#9BD8B4;
  --cell-none:#7E8B94;    --cell-none-bg:#28333B;    --cell-none-ink:#A9B6BE;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.6);
  --shadow-lg:0 16px 44px -14px rgba(0,0,0,.65);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:var(--brand)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- 앱 셸 ---- */
.app{max-width:720px;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column}

.topbar{
  background:linear-gradient(165deg,var(--brand-strong),var(--brand));
  color:#fff;
  padding:calc(var(--safe-t) + 14px) 18px 14px;
  position:sticky;top:0;z-index:40;
  box-shadow:0 2px 12px -4px rgba(30,42,51,.35);
}
.topbar .row{display:flex;align-items:center;gap:12px}
.topbar h1{font-size:19px;font-weight:700;letter-spacing:-.01em}
.topbar h1 small{display:block;font-size:11.5px;font-weight:400;opacity:.8;letter-spacing:.08em;margin-top:2px}
.topbar .spacer{flex:1}
.icon-btn{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.14);color:#fff;font-size:18px;
  display:flex;align-items:center;justify-content:center;
}
.icon-btn:active{background:rgba(255,255,255,.28)}

/* 동기화 상태 pill */
.sync-pill{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.14);border-radius:999px;padding:6px 12px;
}
.sync-dot{width:9px;height:9px;border-radius:50%;background:#9AA7B0;flex:none}
.sync-dot.ok{background:#6FD39E}
.sync-dot.busy{background:#F1CE6B;animation:sync-pulse 1s infinite}
.sync-dot.error{background:#E88C7D}
.sync-dot.offline{background:#9AA7B0}
@keyframes sync-pulse{50%{opacity:.35}}

main{flex:1;padding:16px 16px calc(28px + var(--safe-b))}

/* ---- 탭바 ---- */
.tabbar{
  display:flex;background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:calc(var(--safe-t) + 66px);z-index:30;overflow-x:auto;scrollbar-width:none;
}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button{
  flex:1 0 auto;min-width:76px;padding:13px 14px;font-size:14px;font-weight:600;
  color:var(--ink-mute);position:relative;white-space:nowrap;
}
.tabbar button.on{color:var(--brand-strong)}
.tabbar button.on::after{content:"";position:absolute;left:16%;right:16%;bottom:0;height:2.5px;background:var(--accent);border-radius:2px}

/* ---- 카드 ---- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 16px 15px;margin-bottom:14px;
}
.card > h2{
  font-size:14px;font-weight:700;color:var(--ink-soft);letter-spacing:.02em;
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;
}
.card > h2 .aux{font-size:12.5px;font-weight:500;color:var(--ink-mute)}

.section-title{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink-mute);margin:22px 2px 10px}

/* ---- 버튼 ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--tap);padding:11px 18px;border-radius:var(--radius-sm);
  font-size:15px;font-weight:700;background:var(--surface-3);color:var(--ink);
  border:1px solid var(--line);transition:transform .06s;
}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent}
.btn.danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn.block{display:flex;width:100%}
.btn.sm{min-height:38px;padding:8px 13px;font-size:13.5px;font-weight:600}
.btn:disabled{opacity:.45}

/* ---- 폼 ---- */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;min-height:var(--tap);padding:11px 13px;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink);font-size:15px;
}
.field textarea{min-height:120px;line-height:1.7;resize:vertical}

/* ---- 이름표가 칸 **앞**에 오는 줄 ----
   이름표를 칸 위에 두면 줄마다 두 줄씩 먹습니다. 짧은 이름표는 앞에 세워
   한 줄로 만들면 아래쪽 적는 칸에 그만큼 자리가 생깁니다. */
.field.inline{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-width:0}
.field.inline > label{
  flex:0 0 auto;min-width:2.6em;margin-bottom:0;text-align:left;
  font-size:13.5px;line-height:1.3;white-space:nowrap;
}
.field.inline > :not(label){flex:1 1 auto;min-width:0}
.field.inline + .hint{margin:-4px 2px 10px}

/* ---- 조장 표시 ----
   네 앱 어디서든 같은 모양이어야 합니다 (`SSCore.leaderName`).
   굵게 · 강조색 · 별표 셋을 함께 씁니다 — 색만으로는 못 알아보는 분이 있습니다. */
.lead-name{font-weight:800;color:var(--accent-strong)}
.lead-star{color:var(--accent-strong);font-size:.86em;margin-left:3px;vertical-align:2%}
/* ── 개인 게시판 띠 ──
   부장교사가 남긴 글은 **붉은 띠**, 청년이 스스로 적은 글은 **녹색 띠**입니다.
   어느 쪽이 적었는지는 서버가 정합니다(guardMyPost_) — 앱이 흉내 낼 수 없습니다. */
.post.mp-admin{border-left-color:#D8382B}
.post.mp-youth{border-left-color:#3E8E5A}
.mp-who{font-size:11.5px;font-weight:800;color:var(--ink-mute);white-space:nowrap}
.mp-from{font-size:11px;font-weight:800;border-radius:99px;padding:2px 8px;white-space:nowrap}
.mp-from.a{color:#A5291F;background:#FBE7E4}
.mp-from.y{color:#2E7D5B;background:#E2F1E9}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mp-from.a{color:#FF9C90;background:#3A2320}
  :root:not([data-theme="light"]) .mp-from.y{color:#86D6AE;background:#1E3329}
}
:root[data-theme="dark"] .mp-from.a{color:#FF9C90;background:#3A2320}
:root[data-theme="dark"] .mp-from.y{color:#86D6AE;background:#1E3329}

/* ── 새 글 표시 — 네 앱이 같은 모양입니다 (`SSCore.News` 가 이 조각을 만듭니다) ──
   붉은 NEW 는 목록 한 줄에, 숫자 배지는 아이콘 오른쪽 위에 붙습니다. */
.new-tag{
  display:inline-block;margin-left:6px;vertical-align:1px;
  font-size:10.5px;font-weight:900;letter-spacing:.04em;line-height:1;
  color:#D8382B;white-space:nowrap;
}
.nbadge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:#D8382B;color:#fff;
  font-size:11px;font-weight:800;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  box-shadow:0 0 0 2px var(--surface);
}
/* 아이콘 오른쪽 위에 붙이려면 감싸는 칸에 `.nb-wrap` 을 줍니다 */
.nb-wrap{position:relative;display:inline-flex}
.nb-wrap > .nbadge{position:absolute;top:-7px;right:-9px}
/* 어두운 화면에서도 같은 붉은색으로 — 배경만 덜 튀게 합니다 */
:root[data-theme="dark"] .new-tag{color:#FF7B6E}
:root[data-theme="dark"] .nbadge{background:#D8483B}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .new-tag{color:#FF7B6E}
  :root:not([data-theme="light"]) .nbadge{background:#D8483B}
}

/* 적는 칸 — 주소처럼 띄어쓰기 없는 긴 글자도 칸 안에서 줄이 바뀝니다 */
.field input,.field textarea{overflow-wrap:anywhere;word-break:break-word}

/* ══════════ 사람이 적은 글은 어디서도 잘리지 않습니다 ══════════
   `overflow-wrap:anywhere` 는 띄어쓰기가 하나도 없는 긴 글자(웹 주소 같은 것)도
   칸 너비에서 줄을 바꿉니다. `pre-wrap` 만으로는 띄어쓰기가 있어야 줄이 바뀌므로,
   긴 주소가 칸 밖으로 흘러 잘려 나갔습니다.
   `word-break:break-word` 는 옛 사파리를 위한 같은 뜻의 예비입니다. */
.usertext{
  white-space:pre-wrap;              /* 적은 대로 줄바꿈을 지킵니다 */
  overflow-wrap:anywhere;
  word-break:break-word;
  min-width:0;                       /* flex/grid 칸 안에서 줄어들 수 있게 */
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 3.5px var(--accent-tint);
}
.hint{font-size:12.5px;color:var(--ink-mute);line-height:1.65;margin-top:6px}

/* ---- 상태 pill ---- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.pill.brand{background:var(--brand-tint);color:var(--brand-strong)}
.pill.accent{background:var(--accent-tint);color:var(--accent-strong)}
.pill.ok{background:var(--ok-tint);color:var(--ok)}
.pill.warn{background:var(--warn-tint);color:var(--warn)}
.pill.danger{background:var(--danger-tint);color:var(--danger)}
.pill.mute{background:var(--surface-3);color:var(--ink-mute)}
.dot-cell{width:9px;height:9px;border-radius:3px;flex:none}

/* 조 색상 — c베델 / c길갈 / c실로 클래스 하나로 글자·테두리·띠 색을 모두 정함 */
.c베델{--c:var(--cell-bethel); --c-bg:var(--cell-bethel-bg); --c-ink:var(--cell-bethel-ink)}
.c길갈{--c:var(--cell-gilgal); --c-bg:var(--cell-gilgal-bg); --c-ink:var(--cell-gilgal-ink)}
.c실로{--c:var(--cell-shiloh); --c-bg:var(--cell-shiloh-bg); --c-ink:var(--cell-shiloh-ink)}
.c기타,.c{--c:var(--cell-none); --c-bg:var(--cell-none-bg); --c-ink:var(--cell-none-ink)}
.pill.cell{background:var(--c-bg);color:var(--c-ink)}

/* ---- 표 ---- */
.tablewrap{overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);max-height:64vh}
.tablewrap.tall{max-height:none}
table.grid{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:13.5px}
table.grid th,table.grid td{border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);padding:0;background:var(--surface)}
/* 표 머리는 상단 탭과 **같은 색**입니다(--hdr). 칸 사이는 흰 실선으로 가릅니다. */
table.grid thead th{position:sticky;top:0;z-index:5;background:var(--hdr);color:var(--hdr-ink);
  font-weight:700;padding:7px 6px;border-right:1px solid rgba(255,255,255,.22);border-bottom:none}
/* ★ 이름칸을 좁게 잡아 날짜 칸이 더 많이 보이게 합니다.
   긴 이름은 칸이 저절로 늘어나므로 잘리지 않습니다(min-width 만 내린 것입니다). */
table.grid .cno{position:sticky;left:0;z-index:6;min-width:24px;width:24px;text-align:center;color:var(--ink-mute);font-size:11px;background:var(--surface)}
table.grid .cname{position:sticky;left:24px;z-index:6;min-width:66px;width:66px;padding:9px 5px;font-weight:600;white-space:nowrap;background:var(--surface)}
/* 번호 칸이 없는 표(회비 현황 등)는 이름을 왼쪽 끝에 붙인다 */
table.grid.nocno .cname{left:0}
table.grid thead .cno,table.grid thead .cname{z-index:8;background:var(--hdr);color:var(--hdr-ink)}
table.grid tbody tr:nth-child(even) td{background:var(--surface-2)}
table.grid tbody tr:nth-child(even) td.cname,table.grid tbody tr:nth-child(even) td.cno{background:var(--surface-2)}
/* 고정된 이름 칸 오른쪽에 그림자를 두어 가로로 밀 때 경계가 보이게 한다 */
table.grid .cname{box-shadow:6px 0 8px -8px rgba(30,42,51,.45)}

/* 조 구분 띠 — 가로로 밀어도 글자는 왼쪽에 머문다 */
table.grid tr.cellhdr td{
  background:var(--c-bg)!important;padding:0;border-bottom:1px solid var(--line);
}
table.grid tr.cellhdr .cbar{display:flex;align-items:center;justify-content:space-between;min-width:100%}
table.grid tr.cellhdr .band{
  position:sticky;left:0;display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;font-size:12.5px;font-weight:800;color:var(--c-ink);
}
table.grid tr.cellhdr .band::before{content:"";width:4px;height:13px;border-radius:2px;background:var(--c)}
/* 인원수는 **화면 오른쪽 끝**에 붙어 있습니다 — 가로로 밀어도 따라옵니다 */
table.grid tr.cellhdr .cnt{position:sticky;right:0;padding:6px 12px;
  font-size:11.5px;font-weight:700;color:var(--c-ink);opacity:.82;white-space:nowrap}
/* ── 출석 체크 — 동그라미 ──
   켜지면 **녹색 동그라미에 흰 ✓**, 꺼져 있으면 옅은 줄표입니다.
   글자가 아니라 CSS 가 그리므로, 앱은 `on` 을 붙이고 떼기만 합니다. */
td.chk{min-width:42px;height:42px;text-align:center;cursor:pointer;user-select:none;padding:0;font-size:0}
td.chk::before{content:"–";display:inline-flex;align-items:center;justify-content:center;
  width:25px;height:25px;border-radius:50%;font-size:13px;font-weight:700;line-height:1;
  color:var(--ink-mute);background:transparent;transition:background .12s}
td.chk.on::before{content:"✓";background:var(--chk-on);color:#fff;font-size:14px}
/* ── 체크 표(출석부) — 줄무늬 없이 **칸 금**으로 가릅니다 ── */
table.grid.checks tbody tr:nth-child(even) td{background:var(--surface)}
table.grid.checks tbody td{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
table.grid.checks tbody tr.cellhdr td{border-right:none}
td.sum,th.sum{min-width:46px;text-align:center;font-weight:800;color:var(--hdr);background:var(--surface-3)!important}
tfoot td{position:sticky;bottom:0;background:var(--surface-3);font-weight:700;color:var(--hdr);text-align:center;font-size:12px;padding:8px 2px;z-index:4}

/* ---- 리스트 아이템 ---- */
.list-item{
  display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line-soft);
}
.list-item:last-child{border-bottom:none}
.list-item .li-main{flex:1;min-width:0}
.li-title{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-sub{font-size:12.5px;color:var(--ink-mute);margin-top:2px}

/* ---- 빈 상태 ---- */
.empty{text-align:center;color:var(--ink-mute);padding:48px 20px;font-size:14px;line-height:1.8}
.empty .mark{font-size:34px;opacity:.4;margin-bottom:8px}

/* ---- 모달 / 시트 ---- */
.scrim{position:fixed;inset:0;background:rgba(20,28,34,.5);z-index:80;display:none;align-items:flex-end;justify-content:center}
.scrim.on{display:flex}
.sheet{
  width:min(100%,720px);max-height:92vh;overflow-y:auto;background:var(--bg);
  border-radius:20px 20px 0 0;padding:20px 16px calc(20px + var(--safe-b));
  box-shadow:var(--shadow-lg);animation:sheet-up .22s ease-out;
}
@keyframes sheet-up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.sheet h2{font-size:18px;font-weight:700;margin-bottom:4px}
.sheet .sub{font-size:12.5px;color:var(--ink-mute);margin-bottom:16px}

/* ---- 토스트 ---- */
.toast{
  position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translate(-50%,12px);
  background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:12px;
  font-size:14px;font-weight:600;z-index:120;opacity:0;pointer-events:none;transition:.22s;
  max-width:90vw;text-align:center;box-shadow:var(--shadow-lg);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---- 배너 ----
   주의: display:flex 를 쓰면 안쪽의 <b> 가 각각 flex 항목이 되어 글자가 세로로 조각납니다.
   반드시 블록으로 두어 한 문단으로 흐르게 합니다. */
.banner{
  display:block;padding:12px 14px;border-radius:var(--radius-sm);
  font-size:13px;line-height:1.65;margin-bottom:14px;word-break:keep-all;
}
.banner b{font-weight:700}
.banner.warn{background:var(--warn-tint);color:var(--warn)}
.banner.danger{background:var(--danger-tint);color:var(--danger)}
.banner.info{background:var(--brand-tint);color:var(--brand-strong)}

/* ---- 날짜별로 묶은 목록 (설교노트) ---- */
.date-head{
  font-size:12.5px;font-weight:800;color:var(--brand-strong);background:var(--surface-3);
  border-radius:6px;padding:6px 11px;margin:16px 0 8px;letter-spacing:.01em;
}
.date-head:first-child{margin-top:0}
.note-row{
  display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid var(--c,var(--cell-none));
  border-radius:7px;padding:9px 11px;margin-bottom:5px;cursor:pointer;
}
.note-row:active{background:var(--surface-2)}
.note-row .nr-name{
  flex:none;width:4.2em;font-weight:800;font-size:13.5px;color:var(--brand-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.note-row .nr-title{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-row .nr-preacher{
  flex:none;max-width:6.5em;font-size:11.5px;color:var(--ink-mute);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---- 좁은 화면 대응 (갤럭시 등 400px 안팎) ---- */
@media (max-width:430px){
  body{font-size:15.5px}
  main{padding:14px 12px calc(28px + var(--safe-b))}
  .card{padding:14px 13px}
  .sheet{padding:18px 13px calc(18px + var(--safe-b))}
  .topbar{padding-left:14px;padding-right:14px}
  .topbar h1{font-size:17.5px}
  .sync-pill{font-size:11px;padding:5px 9px}
  .tabbar button{min-width:66px;padding:12px 10px;font-size:13.5px}
  .note-row{gap:8px;padding:8px 9px}
  .note-row .nr-name{width:3.8em;font-size:13px}
  .note-row .nr-preacher{max-width:5.2em}
}

/* ---- 접히는 칸 (설정 → 개인 이름·토큰) ----
   평소에는 제목 한 줄만 보이고, 누르면 펼쳐집니다. */
.card.fold{padding:0}
.card.fold > summary{
  list-style:none;cursor:pointer;padding:15px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:14px;color:var(--ink-soft);
}
.card.fold > summary::-webkit-details-marker{display:none}
.card.fold > summary::after{content:'▾';color:var(--ink-mute);font-size:13px;transition:transform .15s}
.card.fold[open] > summary::after{transform:rotate(180deg)}
.card.fold > summary .aux{font-size:12.5px;font-weight:500;color:var(--ink-mute);margin-left:auto;margin-right:8px}
/* 접혔을 때 내용을 **우리가 직접** 감춥니다 — 브라우저가 접어 주는 것에 기대지 않습니다.
   실제로 `<details>` 를 안 접는 브라우저가 있었고, 그러면 접힌 칸이 아래 줄과 겹칩니다. */
.card.fold:not([open]) > .fold-body{display:none}
.card.fold .fold-body{padding:0 16px 15px;border-top:1px solid var(--line-soft)}
.card.fold .fold-body > .hint:first-child{margin-top:12px}

.tok-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tok-acts .btn{flex:1 1 auto}
/* 조 이름 띠 — 베델 · 길갈 · 실로 · 교사 · 미배정 차례로 묶어 보여 줍니다 */
.tok-band{
  font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--brand-strong);
  background:var(--brand-tint);border-radius:7px;padding:5px 9px;margin:12px 0 4px;
}
.tok-band:first-child{margin-top:6px}
.tok-row{
  display:flex;align-items:center;gap:7px;padding:9px 0;
  border-bottom:1px solid var(--line-soft);min-width:0;
}
.tok-row:last-child{border-bottom:0}
/* 이름 — 고정 폭(5.2em)으로 두었더니 「김민성」 같은 세 글자 뒤에 빈 자리가 크게 남았습니다.
   글자만큼만 차지하되 최소 폭을 두어 줄끼리 대충 맞춰 섭니다.
   자리가 모자라면 **이름이 먼저 줄어듭니다** — 토큰 숫자는 옮겨 적어야 하는 값이라
   한 글자도 잘리면 안 되기 때문입니다. */
.tok-row .tk-name{
  flex:0 1 auto;min-width:3.4em;max-width:7em;
  font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tok-row .tk-cell{flex:0 0 auto;font-size:11.5px;color:var(--ink-mute)}
.tok-row .tk-role{
  flex:0 0 auto;width:4.6em;min-height:32px;padding:4px 6px;font-size:12.5px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-3);color:var(--ink);
}
.tok-row .tk-role:disabled{opacity:.45}
/* 토큰 숫자 — flex:1 1 auto · min-width:0 이라 자리가 모자라면 줄어들다 잘렸습니다.
   (여섯 자리 숫자가 「새로」 단추에 먹혀 938307 이 9383… 으로 보였습니다)
   이제 줄어들지 않습니다(1 0 auto). 단추와 붙지 않게 왼쪽에 여백을 둡니다. */
.tok-row .tk-val{
  flex:1 0 auto;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
  padding-left:4px;padding-right:2px;
  font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--brand-strong);
}
.tok-row .tk-val.none{font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--ink-mute)}
.tok-row .btn{flex:0 0 auto;min-height:32px;padding:6px 9px;font-size:12.5px}
/* 글자 크게(120%) 한 갤럭시는 화면이 344px 까지 좁아집니다. 그 폭에서도
   「이름 · 직분 · 여섯자리 숫자 · 새로 · 복사」가 한 줄에 다 들어가도록 조입니다.
   ※ 이 묶음은 반드시 위의 기본값 **뒤에** 두어야 합니다 —
      앞에 두면 같은 굵기(specificity)라 뒤에 오는 기본값이 이겨 아무 일도 안 일어납니다. */
@media (max-width:370px){
  .tok-row{gap:5px}
  .tok-row .tk-name{min-width:2.8em;font-size:13.5px}
  .tok-row .tk-role{width:4.2em;padding:4px 4px;font-size:12px}
  .tok-row .tk-val{font-size:14.5px;letter-spacing:.04em}
  .tok-row .btn{padding:6px 7px;font-size:12px}
}
.tok-lock{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--ink-soft)}
.tok-lock input{width:18px;height:18px}

/* ---- 회비 현황 표 ----
   회계 앱과 부장교사 앱이 같은 모양을 씁니다 (SSCore.duesTable 이 그립니다). */
.dues-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px}
table.dues{border-collapse:separate;border-spacing:0;font-size:12px;width:100%}
table.dues th,table.dues td{border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:6px 2px;text-align:center}
table.dues th{background:var(--surface-3);font-weight:700;color:var(--ink-soft);font-size:11px;
  position:sticky;top:0;z-index:2}
table.dues th.nm{left:0;z-index:3}
table.dues td.nm{
  text-align:left;padding-left:8px;padding-right:8px;white-space:nowrap;font-weight:700;
  position:sticky;left:0;background:var(--surface);min-width:66px;z-index:1;
  box-shadow:1px 0 0 var(--line);
}
table.dues td.nm i{font-style:normal;font-size:9.5px;font-weight:800;color:var(--brand);
  background:var(--brand-tint);border-radius:20px;padding:1px 5px;margin-left:4px;vertical-align:1px}
/* ★ 조 이름 띠 — 글자를 sticky 로 붙여 둡니다.
   예전에는 띠가 통째로 옆으로 밀려, 이름 칸만 남고 어느 조인지 알 수 없었습니다. */
table.dues tr.band td{background:var(--brand-tint);padding:0;border-right:0}
table.dues tr.band td > span{
  position:sticky;left:0;display:inline-block;padding:6px 8px;
  color:var(--brand-strong);font-weight:800;font-size:11.5px;letter-spacing:.03em;
}
table.dues td.mo{cursor:pointer;min-width:27px;font-weight:800;color:var(--ink-mute)}
table.dues td.mo.on{color:#2C6B41;background:#E9F5ED}
table.dues td.sm{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:11px;color:var(--ink-soft);
  padding-left:6px;padding-right:6px}
table.dues td.none{padding:16px;color:var(--ink-mute);text-align:center}
.card.fold > summary .fee{font-size:12.5px;font-weight:700;color:var(--brand-strong);margin-left:auto;margin-right:8px}

/* 어떤 화면에서도 본문이 가로로 밀려나지 않게 하는 안전장치 */
html,body{overflow-x:hidden}
.app,main,.card,.sheet{max-width:100%;min-width:0}
.sheet{overflow-x:hidden}

.hidden{display:none!important}
.num{font-variant-numeric:tabular-nums}

/* ── 아이폰에서 날짜 칸이 옆 칸을 덮던 것 ──────────────────────────────
   격자·flex 칸은 기본이 min-width:auto 라 **안에 든 것보다 좁아지지 못합니다.**
   사파리의 날짜·시각 입력칸은 「yyyy. mm. dd.」를 다 담으려고 폭을 크게 잡아서,
   1fr 몫을 넘겨 옆 칸(설교자) 위로 올라탔습니다.
   안드로이드 크롬은 그 폭을 좁게 잡아 겉으로 티가 안 났을 뿐, 같은 자리입니다.
   → 칸도 입력칸도 0 까지 좁아질 수 있게 풀어 줍니다. */
/* 두 칸을 나란히 — 네 앱이 함께 씁니다 */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row2 > *, .row3 > * { min-width: 0 }
.field input, .field select, .field textarea { min-width: 0; max-width: 100% }
/* 사파리는 이 두 가지를 붙여야 날짜 칸이 제 칸 너비를 따릅니다 */
.field input[type="date"], .field input[type="time"], .field input[type="month"] {
  -webkit-appearance: none; appearance: none; display: block;
}

/* ── 청년부 게시판 — 공지 종류 ─────────────────────────────────────
   부장교사 앱과 청년 앱이 **같은 색**으로 보여야 합니다. 그래서 여기 한 곳에 둡니다.
   글마다 data-cat 이 붙고, 그 값으로 왼쪽 띠 색과 이름표 색이 함께 정해집니다.
   종류를 더할 때는 여기와 admin/app.js 의 POST_CATS 를 함께 고칩니다. */
.post{--pcat:#7FB79A}
.post[data-cat="church"]{--pcat:#3E6EA8}   /* 교회 */
.post[data-cat="praise"]{--pcat:#7B5EA7}   /* 찬양팀 */
.post[data-cat="event"] {--pcat:#C9772F}   /* 행사 */
.post[data-cat="normal"]{--pcat:#7FB79A}   /* 일반 */
.post[data-cat="news"]  {--pcat:#C05A6E}   /* 소식 */
/* 제목 오른쪽의 작은 이름표 — 날짜 대신 종류를 보여 줍니다 */
.post-h .pcat{flex:none;font-size:11px;font-weight:800;color:var(--pcat);
  border:1px solid var(--pcat);border-radius:99px;padding:2px 8px;white-space:nowrap;line-height:1.5}

/* ── 게시판 첨부 파일 ──────────────────────────────────────────────
   부장교사 앱과 청년 앱이 **같은 모양**이어야 하므로 여기 한 곳에 둡니다.
   내용의 가장 아래에, 아주 연한 개나리색 줄로 파일 이름을 보여 줍니다. */
.post-files{display:flex;flex-direction:column;gap:7px;margin:12px 0 2px}
.pfile{display:flex;align-items:center;gap:9px;width:100%;min-height:var(--tap);
  padding:10px 12px;text-align:left;cursor:pointer;
  background:#FEFAE0;border:1.5px solid #EFDF9A;border-radius:10px;color:var(--ink)}
.pfile:active{background:#FBF3C6}
.pfile .fi{flex:none;font-size:15px;line-height:1}
.pfile .fn{flex:1;min-width:0;font-size:14px;font-weight:700;color:#7A6413;
  overflow-wrap:anywhere;word-break:break-word}
.pfile .fz{flex:none;font-size:11.5px;font-weight:700;color:#9A8230;white-space:nowrap}
/* 글을 쓰면서 붙여 둔 파일 (아직 저장 전) */
.files{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.fdraft{display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:#FEFAE0;border:1px solid #EFDF9A;border-radius:9px}
.fdraft .fi{flex:none;font-size:14px;line-height:1}
.fdraft .fn{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:#7A6413;
  overflow-wrap:anywhere;word-break:break-word}
.fdraft .fz{flex:none;font-size:11px;color:#9A8230;white-space:nowrap}
.fdraft button{flex:none;width:26px;height:26px;border-radius:7px;border:1px solid #E2CE7E;
  background:#FFF;color:#8A7220;font-size:12px;font-weight:800;cursor:pointer}

/* ── 조별 나눔 ─────────────────────────────────────────────────────
   부장교사 앱과 조장 앱이 **같은 모양**이어야 하므로 여기 한 곳에 둡니다.
   번호(01 · 02)는 질문 차례를 그대로 따릅니다. */
.sh-sum{font-size:12px;color:var(--ink-soft);padding:0 13px 11px}
.sh-sum.none{color:var(--ink-mute)}
/* 주제 — 부장교사가 적는 줄 */
.shq{display:flex;align-items:flex-start;gap:8px;margin-bottom:9px}
.shq-n{flex:none;width:2em;padding-top:11px;font-size:12.5px;font-weight:800;
  color:var(--brand-strong);font-variant-numeric:tabular-nums}
.shq-t{flex:1;min-width:0;min-height:44px;padding:10px 11px;font-size:14.5px;line-height:1.65;
  border:1.5px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--ink);
  resize:none;overflow:hidden;overflow-wrap:anywhere}
.shq-t:focus{border-color:var(--accent);background:var(--surface);outline:none}
/* 주제 — 조장이 읽기만 하는 줄 */
.sh-qs{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.sh-q{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;
  background:var(--surface-3);border-radius:9px}
.sh-qn{flex:none;font-size:12px;font-weight:800;color:var(--brand-strong);
  font-variant-numeric:tabular-nums;padding-top:1px}
.sh-qt{flex:1;min-width:0;font-size:14.5px;line-height:1.7;white-space:pre-wrap;
  overflow-wrap:anywhere;word-break:break-word}
/* 나눔 내용 — 조장이 적는 칸 */
.sh-mem > h2{margin-bottom:10px}
.sh-in{display:flex;align-items:flex-start;gap:8px;margin-bottom:9px}
.sh-inn{flex:none;width:1.9em;padding-top:11px;font-size:12px;font-weight:800;
  color:var(--ink-mute);font-variant-numeric:tabular-nums}
.sh-in textarea{flex:1;min-width:0}
/* 나눔 내용 — 부장교사가 읽는 자리 */
.sh-cell{margin-top:14px}
.sh-cell h3{font-size:13px;font-weight:800;color:var(--brand-strong);margin:0 0 8px;
  padding-bottom:5px;border-bottom:1px solid var(--line-soft)}
.sh-cell h3 span{font-weight:500;color:var(--ink-mute);font-size:11.5px}
.sh-p{margin-bottom:11px}
.sh-p.empty{opacity:.55}
.sh-nm{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px}
.sh-a{display:flex;align-items:flex-start;gap:8px;margin:0 0 5px 2px}
.sh-an{flex:none;font-size:11px;font-weight:800;color:var(--ink-mute);
  font-variant-numeric:tabular-nums;padding-top:3px}
.sh-at{flex:1;min-width:0;font-size:14px;line-height:1.75;white-space:pre-wrap;
  overflow-wrap:anywhere;word-break:break-word}
.sh-none{font-size:12.5px;color:var(--ink-mute);margin-left:2px}

/* 탭이 여섯 개일 때 (조장 — 출석부·나눔이 함께 있습니다)
   좁은 폰이나 글자를 크게 쓰는 폰에서는 여백이 모자라 「설교 노트」가 1~2px 잘렸습니다.
   그 경우에만 여백과 글씨를 조금 줄여 한 줄에 담습니다. */

/* ==================================================================
 *  첫 화면(홈) — 부장교사 앱 · 청년 앱 공통
 *
 *  ★ 두 앱이 **같은 첫 화면 모양**을 씁니다. 여기 한 곳만 고칩니다.
 *     (앱마다 다른 것 — 어떤 단추가 몇 칸으로 놓이는가 — 만 각 index.html 에 둡니다)
 * ================================================================== */
/* ═══════════ 첫 화면 ═══════════
   따뜻한 흰 바탕 · 가는 실선 · 얕은 그림자.
   색은 아이콘과 게시판 세 칸에만 쓰고, 글자는 먹색으로 통일합니다.
   위(윗줄)부터 아래(주소·전화번호)까지 **한 화면에 들어오도록** 높이 단계를 둡니다. */
:root{
  --hm-bg:#F7F4EF;        /* 따뜻한 흰색 바탕 */
  --hm-card:#FFFFFF;
  --hm-line:#E7E2D9;
  --hm-line-2:#EFEBE3;
  --hm-ink:#242220;       /* 제목 먹색 */
  --hm-dim:#8D8A83;       /* 설명 글씨 */
  --hm-gold:#B0873C;      /* 아이콘 선 */
  --hm-par:#8C2F39;       /* 교인 교적부만 다른 색 */
  --hm-par-bg:#FBF1EF; --hm-par-line:#EEDCD8;   /* 자료 게시판 칸 바탕 (교인 교적부가 쓰던 자리) */
  /* 바깥으로 나가는 단추 세 개 — 첫 화면 맨 아래 줄 */
  --lnk1:#8CA27C; --lnk2:#BD9E9E; --lnk3:#9BB28E;
  --leaf-op:.92;          /* 바닥 나뭇잎 진하기 */
  --bd1-bg:#E9EDE3; --bd1-line:#DCE2D2; --bd1-go:#7F8E6C;   /* 청년부 게시판 */
  --bd2-bg:#F5EBDF; --bd2-line:#EBDDCB; --bd2-go:#B2916E;   /* 조별 나눔 */
  --bd3-bg:#DFE6EF; --bd3-line:#CFDAE7; --bd3-go:#74889F;   /* 자료 게시판 */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --hm-bg:#171A1D; --hm-card:#1F2429; --hm-line:#31373D; --hm-line-2:#2A3036;
    --hm-ink:#ECE7DF; --hm-dim:#95918A; --hm-gold:#D6AC63; --hm-par:#E09098;
    --hm-par-bg:#2C2224; --hm-par-line:#3E2E31; --leaf-op:.34;
    --lnk1:#5E7350; --lnk2:#7E6063; --lnk3:#657A58;
    --bd1-bg:#242A24; --bd1-line:#333B32; --bd1-go:#8CA077;
    --bd2-bg:#2B2620; --bd2-line:#3B342B; --bd2-go:#C4A079;
    --bd3-bg:#212830; --bd3-line:#2F3A44; --bd3-go:#8098B2;
  }
}
:root[data-theme="dark"]{
  --hm-bg:#171A1D; --hm-card:#1F2429; --hm-line:#31373D; --hm-line-2:#2A3036;
  --hm-ink:#ECE7DF; --hm-dim:#95918A; --hm-gold:#D6AC63; --hm-par:#E09098;
  --hm-par-bg:#2C2224; --hm-par-line:#3E2E31; --leaf-op:.34;
  --lnk1:#5E7350; --lnk2:#7E6063; --lnk3:#657A58;
  --bd1-bg:#242A24; --bd1-line:#333B32; --bd1-go:#8CA077;
  --bd2-bg:#2B2620; --bd2-line:#3B342B; --bd2-go:#C4A079;
  --bd3-bg:#212830; --bd3-line:#2F3A44; --bd3-go:#8098B2;
}


/* ── 첫 화면 전체 ──
   ★ 크기는 배율 `--hs` 하나로 묶어 두었습니다.
   화면이 낮아지면 배율만 내려갑니다 — 칸마다 따로 줄이면 반드시 어긋납니다.
   그래야 윗줄부터 주소·전화번호까지 **어느 폰에서도 한 화면**에 들어옵니다. */
.home{
  /* ★ 배율은 둘을 곱해서 씁니다.
       --hbase : 화면 높이가 정합니다 (맨 아래 단계 표)
       --hmul  : 앱이 정합니다 — 단추 줄이 한 줄 더 있으면 조금 더 줄입니다
                 (청년 앱의 조장 화면이 그렇습니다. 곱셈이라 높이 단계와 서로 어긋나지 않습니다) */
  --hbase:1;
  --hmul:1;
  --hs:calc(var(--hbase) * var(--hmul));
  --heroh:9.7;            /* 사진 칸 세로 비율 — 16 : 이 값 */
  position:relative;max-width:560px;margin:0 auto;
  display:flex;flex-direction:column;flex:1;min-height:0;
  font-family:"Gothic A1","Noto Sans KR","Apple SD Gothic Neo",sans-serif;
}
/* 화면을 세로로 꽉 채워, 주소·연락처가 늘 맨 아래에 놓이게 합니다.
   (`.home-foot` 의 margin-top:auto 가 밀어 내립니다) */
main{display:flex;flex-direction:column;padding:14px 16px calc(18px + var(--safe-b))}
#viewHome{flex:1;display:flex;flex-direction:column;min-height:0}
/* ★ 남는 자리는 빈틈으로 두지 않고 칸들이 나눠 갖습니다 ─────────────────
   주소·전화번호는 `.home-foot{margin-top:auto}` 로 늘 바닥에 붙습니다. 그래서 세로가 긴 폰
   (갤럭시 S25 울트라를 앱으로 설치하고 제스처 내비를 쓰면 965px 쯤 됩니다)에서는
   **맨 아래 단추와 주소줄 사이가 한 뼘씩 비어** 있었습니다.
   이제 게시판 세 칸 · 여섯 칸 · 바깥 단추 셋이 **비율대로 함께 늘어나** 그 자리를 메웁니다.
     · 늘어나는 비율(0.6 : 1 : 0.25)은 각 칸이 더 가질 수 있는 여유에 맞춘 것입니다 —
       한쪽만 멀대같이 커지지 않고 함께 늘어납니다.
     · `max-height` 로 한계를 둡니다. 태블릿처럼 아주 긴 화면에서 단추만 거대해지지 않게.
       한계도 배율(--hs)을 함께 타므로 작은 폰에서는 한계도 같이 내려갑니다.
     · `min-height:max-content` 가 안전줄입니다. 글씨가 예상보다 길어 제목이 한 줄 더
       접히면 내용이 한계보다 커질 수 있는데, 그때는 **한계를 무시하고 내용을 다 보여 줍니다.**
       (이것이 없으면 칸이 아래 칸 위로 흘러 겹쳐 보입니다)
     · 사진 칸은 늘리지 않습니다 — 가로세로 비율이 정해져 있어 혼자 늘면 어색합니다. */
.home > .home-hero,.home > .home-rule{flex:none}
.home > .home-boards{flex:.6 0 auto; max-height:calc(205px * var(--hs)); min-height:max-content}
.home > .home-grid  {flex:1   0 auto; max-height:calc(355px * var(--hs)); min-height:max-content}
.home > .home-links {flex:.25 0 auto; max-height:calc(64px  * var(--hs)); min-height:max-content}

/* ── 바닥 나뭇잎 ──
   흰 바탕을 지워 둔 그림이라 배경색이 그대로 비칩니다.
   위로 갈수록 사라지도록 mask 로 그라데이션을 줍니다 — 붙여 놓은 티가 나지 않게. */
.home-leafbg{
  position:absolute;left:-16px;right:-16px;bottom:calc(-18px - var(--safe-b));
  aspect-ratio:1000/320;                 /* 그림 비율 그대로 — 좌우 끝 잎이 잘리지 않게 */
  max-height:34vh;z-index:0;pointer-events:none;
  background:url(img/leaf-bottom.png) center bottom / 100% 100% no-repeat;
  opacity:var(--leaf-op,.9);
  -webkit-mask-image:linear-gradient(to top, #000 34%, rgba(0,0,0,.62) 66%, transparent 100%);
          mask-image:linear-gradient(to top, #000 34%, rgba(0,0,0,.62) 66%, transparent 100%);
}

/* ── 교회 사진 ── */
.home-hero{position:relative;border-radius:16px;overflow:hidden;
  aspect-ratio:16 / calc(var(--heroh) * var(--hmul));
  background:linear-gradient(155deg,#EDE8DF,#DDD6CA)}
.home-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;display:block;
  opacity:0;transition:opacity .4s ease;filter:saturate(.74) brightness(1.07) contrast(.94)}
.home-hero img.ready{opacity:1}
/* 글자가 놓이는 왼쪽 위를 넉넉히 밝혀 둡니다.
   사진에도 글씨(교회 간판)가 있어, 옅게만 덮으면 두 글씨가 겹쳐 읽힙니다. */
.hero-veil{position:absolute;inset:0;
  background:
    linear-gradient(100deg, rgba(255,253,248,.94) 0%, rgba(255,253,248,.86) 32%,
                            rgba(255,253,248,.38) 62%, rgba(255,253,248,.06) 88%),
    linear-gradient(180deg, rgba(255,253,248,.34) 0%, rgba(255,253,248,0) 46%,
                            rgba(40,33,24,.18) 100%)}
.hero-cap{position:absolute;left:calc(21px * var(--hs));right:16px;top:calc(19px * var(--hs));
  z-index:2;color:#2A2723;text-align:left}
.hero-cap .hc-eye{display:block;font-size:calc(10px * var(--hs));font-weight:700;
  letter-spacing:.34em;color:#6E675C;text-transform:uppercase}
.hero-cap b{display:block;margin-top:calc(10px * var(--hs));font-size:calc(25px * var(--hs));
  font-weight:800;letter-spacing:.015em;line-height:1.38;color:#25221E}
.hero-cap .hc-rule{display:block;width:calc(36px * var(--hs));height:1.5px;
  margin:calc(12px * var(--hs)) 0 calc(9px * var(--hs));background:#A79C8B}
.hero-cap .hc-sub{display:block;font-size:calc(11.5px * var(--hs));font-weight:600;
  color:#655E54;letter-spacing:.01em}

/* ── 게시판 세 칸 ── */
.home-boards{display:grid;grid-template-columns:repeat(3,1fr);
  gap:calc(11px * var(--hs));margin-top:calc(15px * var(--hs))}
.home-board{display:flex;flex-direction:column;align-items:stretch;min-width:0;
  gap:calc(8px * var(--hs));
  padding:calc(14px * var(--hs)) calc(12px * var(--hs)) calc(12px * var(--hs));
  border-radius:14px;text-align:left;
  background:var(--bd-bg);border:1px solid var(--bd-line)}
.home-board:active{transform:scale(.985)}
.home-board .hb-top{display:flex;align-items:center;gap:5px}
.home-board .hb-top > .nb-wrap{flex:none}
.home-board .hb-ic{flex:none;width:calc(27px * var(--hs));height:calc(27px * var(--hs));color:var(--bd-go)}
.home-board .hb-n{margin-left:auto;font-size:calc(10.5px * var(--hs));font-weight:800;
  color:var(--bd-go);white-space:nowrap;letter-spacing:-.02em}
.home-board .hb-t{font-size:calc(21px * var(--hs));font-weight:900;color:var(--hm-ink);
  letter-spacing:-.045em;line-height:1.3;word-break:keep-all}
.home-board .hb-f{display:flex;align-items:flex-end;gap:5px;width:100%;margin-top:auto}
.home-board .hb-s{flex:1;min-width:0;font-size:calc(11.5px * var(--hs));font-weight:600;
  color:var(--hm-dim);line-height:1.45;letter-spacing:-.03em;word-break:keep-all}
.home-board .hb-go{flex:none;width:calc(27px * var(--hs));height:calc(27px * var(--hs));
  border-radius:50%;background:var(--bd-go);color:#fff;
  display:flex;align-items:center;justify-content:center}
.home-board .hb-go svg{width:calc(14px * var(--hs));height:calc(14px * var(--hs))}
.bd-youth{--bd-bg:var(--bd1-bg); --bd-line:var(--bd1-line); --bd-go:var(--bd1-go)}
.bd-share{--bd-bg:var(--bd2-bg); --bd-line:var(--bd2-line); --bd-go:var(--bd2-go)}
.bd-mine{--bd-bg:var(--bd3-bg); --bd-line:var(--bd3-line); --bd-go:var(--bd3-go)}

/* ── 가는 실선 ── */
.home-rule{height:1px;background:var(--hm-line);margin:calc(17px * var(--hs)) 2px 0}

/* ── 여섯 칸 ── */
.home-grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:calc(11px * var(--hs));margin-top:calc(14px * var(--hs));position:relative;z-index:1}
.home-btn{display:flex;flex-direction:column;align-items:stretch;min-width:0;
  gap:calc(7px * var(--hs));
  padding:calc(14px * var(--hs)) calc(12px * var(--hs)) calc(12px * var(--hs));
  border-radius:14px;text-align:left;
  background:var(--hm-card);border:1px solid var(--hm-line);
  box-shadow:0 1px 2px rgba(48,40,28,.04), 0 8px 20px -16px rgba(48,40,28,.30)}
.home-btn:active{transform:scale(.985);background:var(--hm-bg)}
.home-btn > .nb-wrap{flex:none;align-self:flex-start}
.home-btn .hg-ic{flex:none;width:calc(26px * var(--hs));height:calc(26px * var(--hs));color:var(--hm-gold)}
/* ★ 단추 이름은 크고 굵게 — 첫 화면에서 제일 먼저 읽히는 글씨입니다.
   설명 줄(.hg-s)은 작게 그대로 두어, 이름이 한눈에 먼저 들어오게 합니다. */
.home-btn .hg-t{font-size:calc(21px * var(--hs));font-weight:900;color:var(--hm-ink);
  letter-spacing:-.045em;line-height:1.3;word-break:keep-all}
.home-btn .hg-f{display:flex;align-items:flex-end;gap:5px;width:100%;margin-top:auto}
.home-btn .hg-s{flex:1;min-width:0;font-size:calc(11.5px * var(--hs));font-weight:500;
  color:var(--hm-dim);line-height:1.45;letter-spacing:-.03em;word-break:keep-all}
.home-btn .hg-go{flex:none;width:calc(26px * var(--hs));height:calc(26px * var(--hs));
  border-radius:50%;border:1px solid var(--hm-line);color:var(--hm-dim);
  display:flex;align-items:center;justify-content:center}
.home-btn .hg-go svg{width:calc(13px * var(--hs));height:calc(13px * var(--hs))}
/* 교인 교적부는 청년부 것이 아니라 교회 전체 자료입니다 — 바탕을 연하게 달리해 구분합니다 */
.h-par{background:var(--hm-par-bg);border-color:var(--hm-par-line)}
.h-par:active{background:var(--hm-par-line)}
.h-par .hg-t{color:var(--hm-par)}
.h-par .hg-ic{color:var(--hm-par)}
.h-par .hg-go{border-color:var(--hm-par-line)}

/* ── 바깥으로 나가는 단추 세 개 ──
   교회 홈페이지 · 교인 교적부 · 청년부 네이버 카페.
   교인 교적부는 청년부에서 늘 쓰는 것이 아니라 여기로 내렸습니다. */
.home-links{display:grid;grid-template-columns:repeat(3,1fr);
  gap:calc(9px * var(--hs));margin-top:calc(11px * var(--hs));position:relative;z-index:1}
/* 손가락으로 누르는 자리라 세로를 넉넉히 둡니다(위아래 13px × 배율).
   남는 자리가 있으면 위의 `flex` 규칙으로 여기서 더 늘어납니다. */
/* ★ 글씨 크기는 **한 줄에 몇 칸인가**에 따라 다릅니다(--lkf).
   부장교사 앱은 세 칸이라 13px 이 한계입니다 — 더 키우면 「생명샘전원교회」가 잘립니다.
   청년 앱은 두 칸이라 넉넉해서 15px 로 키웠습니다(sermon/index.html 에서 정합니다). */
.home-links{--lkf:13px}
.home-link{display:flex;align-items:center;justify-content:center;gap:calc(6px * var(--hs));
  min-width:0;padding:calc(13px * var(--hs)) calc(7px * var(--hs));border-radius:12px;
  background:var(--lk);color:#fff;text-decoration:none;
  font-size:calc(var(--lkf) * var(--hs));font-weight:800;letter-spacing:-.05em;
  line-height:1.2;white-space:nowrap;
  box-shadow:0 1px 2px rgba(48,40,28,.06), 0 8px 18px -14px rgba(48,40,28,.45)}
.home-link:active{filter:brightness(.94)}
.home-link .lk-ic{flex:none;display:flex;align-items:center;justify-content:center;
  width:calc(var(--lkf) * 1.6 * var(--hs));height:calc(var(--lkf) * 1.6 * var(--hs));border-radius:6px;background:#fff}
.home-link .lk-ic img{width:82%;height:82%;object-fit:contain;display:block}
.home-link .lk-ic.naver{background:#03C75A;color:#fff;font-weight:900;
  font-size:calc(var(--lkf) * .95 * var(--hs));font-family:Arial,sans-serif}
.lk-church{--lk:var(--lnk1)}
.lk-parish{--lk:var(--lnk2)}
.lk-cafe  {--lk:var(--lnk3)}

/* ── 주소·전화번호 — 양옆에 가는 선 ── */
.home-foot{display:flex;align-items:center;gap:calc(12px * var(--hs));position:relative;z-index:1;
  margin:calc(16px * var(--hs)) 0 0;margin-top:auto;padding:calc(14px * var(--hs)) 0 calc(2px + var(--safe-b));
  text-align:center;font-size:calc(12.5px * var(--hs));line-height:1.85;
  color:var(--hm-dim);letter-spacing:-.015em}
.home-foot .hf-line{flex:1 1 10px;min-width:8px;height:1px;background:var(--hm-line)}
.home-foot .hf-t{flex:none;white-space:nowrap}

/* ── ★ 화면이 낮아지면 배율 하나만 내립니다 ──
   앱으로 설치하면 세로가 넉넉하고, 브라우저로 열면 주소창·하단바만큼 줄어듭니다.
   어느 쪽이든 주소·전화번호까지 한 화면에 들어오게 맞춰 두었습니다.
   사진 칸만 가로세로 비율이라 따로 적습니다. */
@media (max-height:880px){ .home{--hbase:.90; --heroh:9.1} }
@media (max-height:800px){ .home{--hbase:.84; --heroh:8.3} }
@media (max-height:760px){ .home{--hbase:.78; --heroh:7.2} }
@media (max-height:700px){ .home{--hbase:.73; --heroh:6.3} }
@media (max-height:640px){ .home{--hbase:.68; --heroh:5.5} }
/* ── 좁은 폰 ──
   폭이 좁으면 제목이 두 줄로 접혀 세로가 더 듭니다(글자 크게 120% 를 쓰는 분).
   그래서 폭까지 함께 본 단계를 따로 둡니다 — 이 단계가 없으면 주소줄이 밀려 내려갑니다. */
@media (max-width:370px){
  .home{--hbase:.80; --heroh:8.2}
  .home-board .hb-t,.home-btn .hg-t{letter-spacing:-.06em}
  .home-foot{letter-spacing:-.03em}
  .topbar h1{font-size:17px}
}
@media (max-width:370px) and (max-height:800px){ .home{--hbase:.75; --heroh:7.4} }
@media (max-width:370px) and (max-height:700px){ .home{--hbase:.69; --heroh:6.2} }

/* ── 모든 페이지 하단 「홈으로」 — 부장교사 앱 · 청년 앱 공통 ──
   청년 앱은 상단 탭줄을 감췄으므로(자리를 너무 차지했습니다) 이 단추가
   첫 화면으로 돌아가는 **주된 길**입니다. 윗줄 로고를 눌러도 같습니다. */
.gohome{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin:22px 0 6px;padding:15px;border-radius:14px;
  border:1.5px solid var(--line);background:var(--surface);
  color:var(--hdr);font-size:15.5px;font-weight:800;box-shadow:var(--shadow);
}
.gohome:active{transform:scale(.99);background:var(--surface-2)}
.gohome .gh-ic{font-size:17px}
.gohome.hidden{display:none}

/* ── 개인 게시판의 답글과 흔적(확인·좋아요) — 부장교사 앱 · 청년 앱 공통 ──
 *  부장교사가 남긴 글 아래에 청년이 흔적을 남기고 답글을 답니다.
 *  누가 남긴 흔적인지는 **서버가** 못 박습니다(guardMyPostParts_).
 */
.mp-reacts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:12px;padding-top:11px;border-top:1px dashed var(--line)}
.mp-ask{flex:1 1 100%;font-size:12.5px;color:var(--ink-mute);line-height:1.6}
.rbtn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:99px;
  border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink-soft);
  font-size:13px;font-weight:800;white-space:nowrap}
.rbtn .ri{font-size:14px;line-height:1}
.rbtn.on{border-color:var(--chk-on);background:var(--chk-on);color:#fff}
.rbtn.like.on{border-color:#D8382B;background:#D8382B;color:#fff}
/* 부장교사 화면에서는 누르는 자리가 아니라 **표시**입니다 */
.rbtn.read{pointer-events:none}
.rbtn.read:not(.on){opacity:.55}

.mp-rep{margin-top:11px;display:grid;gap:8px}
.rep{border-radius:10px;padding:9px 11px;background:var(--surface-2);border:1px solid var(--line-soft)}
.rep.a{background:var(--accent-tint);border-color:transparent}
.rep .rh{display:flex;gap:8px;align-items:center;font-size:11.5px;color:var(--ink-mute);margin-bottom:3px}
.rep .rn{font-weight:800;color:var(--ink-soft)}
.rep .rb{font-size:14px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
/* ── 답글 칸 ──
   ★ 적은 만큼 **늘어납니다**. 한 줄만 보이면 긴 답글은 칸 안에 숨어 버립니다
     (autoGrowDoc 이 맡습니다 — data-nogrow 를 달지 않습니다).
   ★ 단추는 **세로로 둘**입니다 — 「등록」과 「수정」.
     수정은 **내가 남긴 답글**을 이 칸으로 불러와 그 자리에서 고치는 자리입니다. */
.rep-new{display:flex;gap:8px;margin-top:10px;align-items:flex-start}
.rep-new textarea{flex:1;min-width:0;min-height:44px}
.rep-new .rep-btns{flex:none;display:flex;flex-direction:column;gap:5px;width:60px}
.rep-new .btn{flex:none;width:100%;min-height:36px;padding:0 6px;font-size:13px}
.rep-new .btn[disabled]{opacity:.42;pointer-events:none}
/* 고치는 중임을 한 줄로 알려 줍니다 — 새로 적는 것과 헷갈리지 않게 */
.rep-edit{display:flex;align-items:center;gap:8px;margin:9px 0 -2px;
  font-size:12px;font-weight:700;color:var(--accent);
  background:var(--accent-tint);border-radius:9px;padding:6px 10px}
.rep-edit .grow{flex:1}
.rep-edit button{border:0;background:transparent;color:var(--ink-mute);
  font-size:12px;font-weight:700;cursor:pointer;padding:2px 4px}
.rep .rh .re{margin-left:auto;border:0;background:transparent;color:var(--accent);
  font-size:11.5px;font-weight:800;cursor:pointer;padding:1px 3px}

/* ── 재정 안의 하위 화면 (회비 · 예산 · 행사 · 메모 · 전체 내역) ──
   재정 앱과 같은 차림입니다. 세 앱이 같은 모양이라야 헷갈리지 않습니다. */
.fin-head{display:flex;align-items:center;gap:8px;margin:2px 0 12px;font-size:17px;font-weight:800}
.fin-back{border:0;background:var(--surface-2);width:32px;height:32px;border-radius:50%;
  font-size:19px;color:var(--ink-soft);line-height:1;flex:none}
.fin-big{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--hdr);
  font-variant-numeric:tabular-nums;margin:2px 0 6px}
.fin-sub{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--ink-mute)}
.fin-sub b{font-weight:800;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.fin-period{font-size:15px;font-weight:700;color:var(--ink-soft)}
.fin-sum{display:flex;align-items:center;justify-content:space-between;margin-top:10px;
  padding-top:10px;border-top:1px dashed var(--line);font-size:13.5px;font-weight:700}
.fin-sum b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.fin-sum b.ok,.fin-net b.ok{color:#2E7D5B}
.fin-sum b.danger,.fin-net b.danger{color:#B9504C}
.fin-net{display:flex;align-items:center;justify-content:space-between;font-size:14.5px;font-weight:800}
.fin-net b{font-size:21px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fin-home{margin-top:18px}
/* 메모 목록(.memo-*)과 「전체 내역」 단추(.fc-ledger)는 **fincards.css** 로 옮겼습니다
   (2026-09-23) — 재정 앱은 theme.css 를 쓰지 않아 저 혼자 민얼굴이 되기 때문입니다. */

/* ── 조회수 ──
   청년이 게시판 글을 펼치면 자국이 남고, **부장교사 앱에서만** 그 수를 보여 줍니다.
   글 제목 옆에 작게 붙습니다. 아무도 안 읽었으면 흐리게 둡니다. */
.pv{display:inline-flex;align-items:center;gap:3px;margin-left:6px;
  font-size:11px;font-weight:800;white-space:nowrap;vertical-align:1px;
  padding:1px 7px;border-radius:99px;background:var(--surface-3);color:var(--ink-mute)}
.pv.on{background:var(--hdr-tint);color:var(--hdr)}
.pv .pv-i{font-size:10px}

/* ── 기호 팝업 (문자표) ──
   ★ **떠 있는 창**입니다(position:fixed). 글을 아래까지 적어 내려가도 늘 보입니다.
   ★ 머리말(.sym-hd)을 잡고 **끌어서 옮깁니다.** 손가락으로도 됩니다
     (touch-action:none 이 없으면 끄는 동작을 화면 넘김이 가져가 버립니다).
   ★ 색상 줄은 **꾸밀 수 있는 칸**에만 보입니다 — 설교노트의 말씀 노트는
     글자만 담는 칸이라 색을 저장할 자리가 없습니다. */
/* 본문 칸 바로 위 한 줄 — 기호 단추가 서는 자리입니다.
   꾸미기 줄에 끼우지 않습니다: 좁은 폰에서 그 줄이 이미 빠듯합니다. */
.sym-row{display:flex;justify-content:flex-end;margin:0 0 5px}
.rich-h .sym-open{margin-left:auto}
.sym-open{display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);
  border-radius:9px;padding:5px 11px;font-size:12.5px;font-weight:800;cursor:pointer;
  font-family:inherit}
.sym-open:active{background:var(--surface-3)}
.sym-open .sym-ic{font-size:13px;color:var(--hdr)}
.sym-pop{position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:90;
  width:min(214px,calc(100vw - 24px));max-height:min(34vh,252px);overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 38px rgba(0,0,0,.24)}
.sym-pop.hidden{display:none}
.sym-pop.drag{opacity:.94}
.sym-hd{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;
  padding:6px 7px 6px 9px;background:var(--hdr);color:var(--hdr-ink);
  border-radius:13px 13px 0 0;cursor:move;touch-action:none;user-select:none;-webkit-user-select:none}
.sym-grip{font-size:15px;opacity:.75;letter-spacing:-2px}
.sym-ttl{flex:1;font-size:12px;font-weight:800}
.sym-x{border:0;background:rgba(255,255,255,.2);color:var(--hdr-ink);
  width:22px;height:22px;border-radius:50%;font-size:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-family:inherit}
.sym-body{padding:6px 7px 8px}
.sym-set{margin-bottom:5px}
.sym-set.hidden{display:none}
.sym-nm{display:block;font-size:10.5px;font-weight:800;color:var(--ink-mute);margin:0 2px 3px}
.sym-grid{display:flex;flex-wrap:wrap;gap:3px}
.sym-b{width:31px;height:31px;border:1px solid var(--line-soft);border-radius:7px;
  background:var(--surface-2);color:var(--ink);font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-family:inherit}
.sym-b:active{background:var(--hdr-tint);border-color:var(--hdr)}

/* ── 설정 창은 촘촘하게 ──
   설정 창은 훑어보고 고치는 자리라, 한 화면에 많이 들어오는 편이 낫습니다.
   ★ `.sheet` 안에서만 좁힙니다 — 글을 적는 화면의 칸은 그대로 넉넉해야 합니다. */
/* ★ 좌우 여백은 **13px 보다 크게 잡지 않습니다.** 좁은 폰(344px)을 위한 규칙이
   위에 따로 있는데(440줄 근처), 여기서 더 크게 적으면 뒤에 오는 이 줄이 이겨
   개인 토큰 줄이 2px 모자라 넘쳤습니다. */
.sheet{padding:16px 13px calc(16px + var(--safe-b))}
.sheet h2{font-size:17px;margin-bottom:2px}
.sheet .sub{margin-bottom:9px}
.sheet .field{margin-bottom:9px}
.sheet .field label{font-size:12.5px;margin-bottom:3px}
.sheet .field input,.sheet .field select,.sheet .field textarea{
  min-height:42px;padding:9px 12px;font-size:14.5px}
.sheet .row2{gap:9px}
.sheet .btn.block{min-height:44px}
.sheet .hint{font-size:12px;line-height:1.55}
.sheet .card{padding:11px 12px;margin-bottom:9px}
.sheet .card h2{font-size:15px}

/* ── 글자 꾸미기 줄 (크기 · 진하게 · 밑줄 · 글자색 · 배경색) ──
   ★ 따로 칸을 만들지 않고 **「내용」 이름표 옆**에 세웁니다.
     줄 하나를 더 쓰면 좁은 폰에서 적는 자리가 그만큼 줄기 때문입니다.
   차례는 크기 → 진하게 → 밑줄 → 글자색 → 배경색 입니다. */
.rich-h{display:flex;align-items:center;gap:8px;margin-bottom:5px;min-width:0}
.rich-h > label{flex:0 0 auto;margin-bottom:0}
.rtb{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:4px}
.rtb .rt-size{
  flex:0 1 auto;min-width:58px;width:auto;min-height:32px;padding:0 2px 0 6px;
  border:1.5px solid var(--line);border-radius:8px;background:var(--surface-2);
  color:var(--ink-soft);font-size:12.5px;font-weight:700;
}
.rt-btn{
  flex:none;width:32px;height:32px;padding:0;border:1.5px solid var(--line);border-radius:8px;
  background:var(--surface-2);color:var(--ink-soft);font-size:14px;font-weight:800;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1;
}
.rt-btn.on{border-color:var(--hdr);background:var(--hdr);color:#fff}
.rt-btn .rt-a{font-size:13px;line-height:1}
.rt-btn .rt-a.rt-hl{background:#fff3b0;color:#222;border-radius:2px;padding:0 2px}
.rt-btn .rt-bar{display:block;width:16px;height:4px;border-radius:2px}
/* 색 고르기 — 누르면 아래로 펼쳐집니다(떠 있는 창을 만들지 않습니다) */
.rt-colors{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;padding:8px;
  border:1.5px solid var(--line);border-radius:10px;background:var(--surface-2)}
.rt-colors.hidden{display:none}
.rt-sw{width:30px;height:30px;border-radius:8px;border:1.5px solid rgba(0,0,0,.18);padding:0}
.rt-sw.rt-none{background:var(--surface);color:var(--ink-mute);font-size:13px;font-weight:800}
.rt-colors.back .rt-sw{border-radius:6px}
/* 적는 칸 — textarea 가 아니라 직접 꾸미는 칸입니다 */
/* 기본 글자 크기는 10pt 입니다 — 적는 칸과 보여 주는 칸이 같아야 눈에 익습니다 */
.rich{
  width:100%;min-height:120px;padding:11px 13px;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink);
  font-size:10pt;line-height:1.75;overflow-wrap:anywhere;word-break:break-word;
}
.rich:focus{outline:2px solid var(--accent);outline-offset:-1px}
.rich:empty:before{content:attr(data-ph);color:var(--ink-mute)}
/* 꾸민 글을 보여 줄 때 — 줄바꿈은 <div>·<br> 가 하므로 pre-wrap 을 끕니다
   (켜 두면 꼬리표 사이의 줄바꿈까지 그려져 빈 줄이 겹칩니다) */
.rich-view{white-space:normal;font-size:10pt;line-height:1.75}
.rich-view u{text-underline-offset:2px}

/* 나눔 주제 칸 — 꾸밀 수 있는 칸이라 textarea 대신 .rich 를 씁니다.
   한 줄짜리 주제가 많아 기본 높이는 낮춥니다. */
.shq .rich{flex:1;min-width:0;min-height:46px;padding:10px 11px;font-size:10pt;line-height:1.65}
.rich-h-solo{justify-content:flex-end;margin-bottom:7px}