:root {
  --canvas: #F6F7F2;   /* 바탕 */
  --surface: #FFFFFF;   /* 카드 */
  --surface-2: #FBFCFA;   /* 카드 안쪽 */
  --ink: #193E2E;   /* 본문 글자 — 거의 검정에 가까운 초록 */
  --muted: #65736C;   /* 흐린 글자 */
  --faint: #7C8884;   /* 더 흐린 글자 */
  --ghost: #9AA6A2;   /* 안내 글자 */
  --disabled: #C3CCC6;   /* 비활성 */
  --line: #E1E6DF;   /* 테두리 */
  --line-soft: #E7ECE6;   /* 옅은 선 */
  --soft: #EAF0E8;   /* 옅은 바탕 */
  --accent: #193E2E;   /* 주색 */
  --accent-ink: #0F2A1F;   /* 주색 진하게 */
  --accent-soft: #DCE8DB;   /* 주색 바탕 */
  --good: #3F8F4A;   /* 완료 */
  --good-soft: #E8F3E6;   /* 완료 바탕 */
  --good-ink: #2E7A38;   /* 완료 글자 */
  --warn: #A5691A;   /* 주의 */
  --warn-soft: #F7EEDC;   /* 주의 바탕 */
  --warn-ink: #8A5A14;   /* 주의 글자 */
  --danger: #C2453D;   /* 경고 */
  --danger-ink: #A8433B;   /* 경고 글자 */
  --danger-soft: #FBE7E5;   /* 경고 바탕 */
  --danger-line: #E5C2BE;   /* 경고 테두리 */
  --bro: #2F6FB5;   /* 형제 */
  --sis: var(--danger);   /* 자매 */
  --bro-soft: #E3ECF8;   /* 형제 바탕 */
  --sis-soft: var(--danger-soft);   /* 자매 바탕 */

  /* 크기와 간격 — 화면을 더 큼직하게 하려면 이 값들만 올리면 된다 */
  --pad: 20px;          /* 카드 안쪽 여백 */
  --gap: 14px;          /* 요소 사이 */
  --gap-tight: 10px;
  --radius: 18px;       /* 카드 모서리 */
  --radius-sm: 12px;
  --text: 15.5px;       /* 본문 */
  --text-sm: 13.5px;
  --text-xs: 12.5px;
  --title: 26px;        /* 화면 제목 */
  --tap: 52px;          /* 누르는 것의 최소 높이 */
  --chip: 32px;
  --rail: 268px;        /* 넓은 화면의 왼쪽 메뉴 폭 */
  --shell: 1180px;      /* 화면 전체 폭 — 모든 메뉴가 이 값을 같이 쓴다 */

  /* 글꼴 — 한글과 키릴(러시아어)이 함께 나오므로 둘 다 되는 것을 앞에 둔다 */
  --font-ui: "IBM Plex Sans KR", "IBM Plex Sans", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body { margin: 0; font-family: var(--font-ui); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-ink); }
* { box-sizing: border-box; }
.phone { width: 100%; max-width: 520px; margin: 0 auto; min-height: 100dvh; background: var(--canvas); position: relative; color: var(--ink); }
.scroll { padding: 24px var(--pad) 96px; display: flex; flex-direction: column; gap: var(--gap); }
.scroll.nonav { padding-bottom: 28px; }
.scroll > * { flex-shrink: 0; }
.nav { position: fixed; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; height: 78px; background: var(--surface); border-top: 1px solid var(--line); display: flex; }
.nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--faint); }
.nav a.on { color: var(--accent); font-weight: 700; }
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.eyebrow { font-size: var(--text-xs); color: var(--muted); letter-spacing: .04em; margin: 0 0 2px; }
h1 { font-size: var(--title); line-height: 1.25; margin: 0; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--text-sm); margin: 6px 0 0; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); display: flex; flex-direction: column; gap: var(--gap-tight); }
.card.soft { background: var(--accent-soft); border-color: var(--accent-soft); }
.row { display: flex; align-items: center; gap: 10px; }
.wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); font-size: var(--text-xs); }
.small { font-size: var(--text-xs); }
.strong { font-weight: 600; }
.btn { height: var(--tap); border-radius: var(--radius-sm); background: var(--accent); color: var(--surface); font-weight: 600; font-size: var(--text); display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; width: 100%; cursor: pointer; font-family: inherit; transition: transform .12s ease, background .25s ease, color .25s ease; text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--accent-soft); color: var(--accent); }
.btn.done { background: var(--good); }
.btn.off { background: var(--surface); color: var(--danger-ink); border: 1px solid var(--danger-line); }
.btn.sm { height: 42px; font-size: var(--text-sm); padding: 0 16px; width: auto; border-radius: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: var(--chip); padding: 0 12px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: var(--text-xs); white-space: nowrap; }
.chip.navy { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chip.green { background: var(--good-soft); color: var(--good-ink); font-weight: 600; }
.chip.warn { background: var(--warn-soft); color: var(--warn-ink); font-weight: 600; }
.chip.bro { background: var(--bro-soft); color: var(--bro); font-weight: 600; }
.chip.sis { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.chip .n { font-family: var(--font-mono); font-size: 10.5px; opacity: .75; }
/* 구역 목록의 큰 카테고리 줄 — 유형 줄 바로 아래라 한 단 들여 구분한다. */
.terr-groups { padding-left: 10px; border-left: 3px solid var(--line); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar.bro { background: var(--bro); color: var(--surface); }
.avatar.sis { background: var(--danger); color: var(--surface); }
.avatar.g { background: var(--good-soft); color: var(--good-ink); }
.badge { font-family: var(--font-mono); font-size: 11px; background: var(--accent); color: var(--surface); padding: 2px 7px; border-radius: 4px; }
.chk { flex: 1; height: var(--tap); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--faint); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.chk.on { background: var(--good); border-color: var(--good); color: var(--surface); animation: pop .3s cubic-bezier(.2, .8, .3, 1.4); }
.chk.on.warn { background: var(--warn); border-color: var(--warn); }
.chk.on.navy { background: var(--accent); border-color: var(--accent); }
.mini { width: 34px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--faint); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.mini.on { background: var(--good); border-color: var(--good); color: var(--surface); animation: pop .3s cubic-bezier(.2, .8, .3, 1.4); }
.mini.on.warn { background: var(--warn); border-color: var(--warn); } .mini.on.navy { background: var(--accent); border-color: var(--accent); } .mini.on.red { background: var(--danger); border-color: var(--danger); }
.bar { height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--good); border-radius: 999px; transition: width .6s cubic-bezier(.2, .7, .2, 1); animation: grow .9s cubic-bezier(.2, .7, .2, 1) both; }
.reveal { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .12s; } .d3 { animation-delay: .19s; } .d4 { animation-delay: .26s; } .d5 { animation-delay: .33s; } .d6 { animation-delay: .40s; } .d7 { animation-delay: .47s; }
.sheet { animation: up .45s cubic-bezier(.2, .8, .2, 1) both; }
.pulse { animation: pulse 1.8s ease-in-out infinite; }
.tap { cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .12s ease; }
.tap:active { transform: scale(.985); }
.sel { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.line { height: 1px; background: var(--line-soft); }
.seg { display: flex; background: var(--soft); border-radius: 10px; padding: 3px; gap: 3px; }
.seg span { flex: 1; text-align: center; font-size: 12.5px; padding: 9px 0; border-radius: 8px; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.seg span.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(28, 38, 40, .08); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex-shrink: 0; }
.field { height: var(--tap); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); display: flex; align-items: center; padding: 0 14px; gap: 8px; font-size: var(--text); }
.field .lab { font-size: 11px; color: var(--muted); width: 64px; flex-shrink: 0; }
.field .ph { color: var(--ghost); }
.field input { border: 0; outline: 0; font: inherit; width: 100%; background: transparent; color: var(--ink); }
.field select { border: 0; outline: 0; font: inherit; width: 100%; height: 100%; background: transparent; color: var(--ink); padding: 0; }
.sw { width: 44px; height: 26px; border-radius: 13px; background: var(--line); position: relative; flex-shrink: 0; transition: background .2s; }
.sw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); transition: left .2s; }
.sw.on { background: var(--accent); } .sw.on i { left: 21px; }
.map { height: 170px; border-radius: 14px; background: var(--soft); position: relative; overflow: hidden; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; }
.map.tall { height: 230px; }
.map .road { position: absolute; background: var(--surface); }
.map .pin { position: absolute; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg); box-shadow: 0 4px 10px rgba(28, 38, 40, .25); }
.map .pin.g { background: var(--good); } .map .pin.r { background: var(--danger); }
.map .lbl { position: absolute; background: var(--surface); border-radius: 8px; padding: 4px 8px; font-size: 11px; box-shadow: 0 2px 6px rgba(28, 38, 40, .12); white-space: nowrap; }
.map .credit { position: absolute; left: 6px; bottom: 4px; font-size: 9px; color: var(--muted); background: rgba(255,255,255,.75); padding: 1px 4px; border-radius: 3px; }
.npin { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--surface); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); box-shadow: 0 3px 8px rgba(28, 38, 40, .25); cursor: pointer; transition: transform .15s ease, background .2s ease; }
.npin.done { background: var(--good); } .npin.cur { transform: scale(1.25); background: var(--danger); z-index: 2; } .npin.fail { background: var(--warn); }
.me { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--bro); border: 3px solid var(--surface); box-shadow: 0 0 0 6px rgba(47, 111, 181, .18); animation: pulse 2s ease-in-out infinite; }
.col { display: flex; flex-direction: column; gap: 4px; }
.vbar { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 0 2px; border-bottom: 1px solid var(--line); position: relative; }
.vbar .b { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; }
.vbar .b i { display: block; width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; animation: growv .8s cubic-bezier(.2, .7, .2, 1) both; }
.vbar .b i.c { background: var(--accent-soft); border-radius: 4px 4px 0 0; }
.vbar .b i.low { background: var(--danger); }
.vbar .req { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--warn); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.85); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes grow { from { width: 0; } }
@keyframes growv { from { height: 0 !important; } }
@keyframes up { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 143, 74, .35); } 50% { box-shadow: 0 0 0 8px rgba(63, 143, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .reveal, .sheet, .bar i, .chk.on, .pulse { animation: none !important; } }

.lang { display: flex; gap: 6px; justify-content: flex-end; }
.lang button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.lang button[aria-current] { background: var(--accent); color: var(--surface); border-color: var(--accent); }

/* Shared visual system: calm surfaces, clear hierarchy, responsive navigation. */
/* 기본 색은 맨 위 :root 한 곳에만 둔다 — 여기서 또 정의하면 테마가 먹히지 않는다 */
body { background:var(--canvas); color:var(--ink); line-height:1.6; }
a { color:var(--accent); }
a:hover { color:var(--accent); }
button, input, select, textarea { font:inherit; }
button, a, input { -webkit-tap-highlight-color:transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:100; padding:12px 20px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:12px; }
.skip-link:focus { top:12px; }
.phone { max-width:600px; background:var(--canvas); color:var(--ink); }
.app-header { padding:24px 24px 12px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; font-size:23px; font-weight:600; letter-spacing:-1px; line-height:1.15; }
.brand-mark { color:var(--accent); flex-shrink:0; }
.brand-caption { display:block; margin-top:5px; font-size:10px; font-weight:500; letter-spacing:.03em; color:var(--muted); }
.header-profile { display:flex; align-items:center; gap:8px; font-size:12px; }
/* 머리 오른쪽, 이름 바로 왼쪽의 「수정 요청」 — 어느 화면에서든 같은 자리. */
.header-request { display:inline-flex; align-items:center; gap:4px; height:30px; padding:0 10px; margin-left:auto; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--muted); font:inherit; font-size:11.5px; font-weight:600; white-space:nowrap; cursor:pointer; flex-shrink:0; }
.header-request:hover { color:var(--accent); border-color:var(--accent); }
.header-request + .header-profile { margin-left:8px; }
.header-profile .avatar { background:var(--soft); color:var(--accent); }
.scroll { padding:12px 24px calc(110px + env(safe-area-inset-bottom)); gap:18px; }
.lang { gap:2px; margin-bottom:6px; }
.lang button { min-height:36px; border:0; background:transparent; color:var(--muted); padding:6px 10px; font-size:11px; }
.lang button[aria-current] { background:var(--soft); color:var(--accent); font-weight:600; }
h1 { font-size:27px; line-height:1.35; letter-spacing:-.045em; }
h2 { color:var(--muted); letter-spacing:0; }
.eyebrow { color:var(--muted); font-size:11px; margin-bottom:6px; }
.muted { color:var(--muted); line-height:1.7; }
.card { border-color:var(--line); border-radius:20px; padding:20px; gap:12px; box-shadow:0 3px 12px var(--good-ink)03; }
.card.soft { background:var(--soft); border-color:var(--soft); }
.btn { background:var(--accent); border-radius:13px; min-height:48px; height:auto; padding:12px 16px; font-size:14px; }
.btn:hover { background:var(--accent-ink); color:white; }
.btn.ghost { background:var(--soft); color:var(--accent); }
.btn.ghost:hover { background:var(--accent-soft); }
.btn.off:hover { background:var(--danger-soft); color:var(--danger-ink); }
.btn.sm { min-height:40px; }
.field { border-color:var(--line); height:50px; border-radius:12px; transition:border-color .2s, box-shadow .2s; }
.field:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--good-ink)10; }
.field input { font-size:16px; color:var(--ink); min-width:0; }
.field input::placeholder { color:var(--ghost); }
.field input:focus-visible { outline:none; }
input[type=checkbox] { accent-color:var(--accent); width:18px; height:18px; }
.chip { background:var(--soft); }
.chip.navy, .avatar { background:var(--soft); color:var(--accent); }
.sel { border-color:var(--good) !important; background:var(--soft) !important; }
.seg { background:var(--soft); padding:5px; border-radius:14px; }
.line { background:var(--line); }
.nav { z-index:30; max-width:568px; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); height:74px; padding:7px; border:1px solid var(--line); border-radius:23px; background:rgba(255,255,255,.97); box-shadow:0 8px 32px var(--good-ink)10; }
.nav a { border-radius:16px; font-size:11px; font-weight:600; gap:5px; color:var(--faint); min-width:0; line-height:1.25; text-align:center; transition:background .2s,color .2s; }
.nav a.on { background:var(--soft); color:var(--accent); font-weight:700; }
.nav a:hover { background:var(--soft); color:var(--accent); }
.nav svg { width:21px; height:21px; flex-shrink:0; stroke-width:2.1; }
.menu-group { gap:0; padding:8px 20px; }
.menu-group h2 { font-size:11px; padding:12px 0 8px; margin:0; }
.menu-group > a { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:54px; padding:14px 0; font-size:14px; color:var(--ink); border-bottom:1px solid var(--soft); }
.menu-group > a:last-child { border-bottom:0; }
.menu-group > a::after { content:'›'; color:var(--faint); font-size:22px; line-height:1; }
/* 보안 — 패스키 목록 · 이 기기 등록 */
.menu-security > p { margin:0 0 10px; }
.passkey-row { align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--soft); }
.passkey-row .grow { display:flex; flex-direction:column; gap:2px; min-width:0; }
.passkey-register { display:flex; flex-wrap:wrap; gap:8px; padding:12px 0; }
.passkey-register .field { flex:1 1 180px; min-width:0; }
/* 오류 칩은 비어 있을 때(hidden) 그리지 않는다 — .chip 의 inline-flex 가 [hidden] 을 이겨 빈 베이지 칩이 보이던 것(2026-10-08). */
.passkey-register [data-passkey-error][hidden], .passkey-register [data-passkey-error]:empty { display:none !important; }
.passkey-register [data-passkey-error] { flex-basis:100%; height:auto; min-height:0; padding:6px 10px; white-space:normal; }
.menu-group > a:hover { color:var(--accent); background:var(--surface-2); }
.auth-page .phone { max-width:1120px; }
.auth-page .app-header { padding:32px 32px 0; }
.auth-page .header-profile { display:none; }
.auth-page .scroll { padding:12px 32px 24px; gap:0; }
.auth-page .lang { margin:0 0 32px; }
.auth-intro .intro-label { display:inline-block; font-size:11px; color:var(--accent); padding:5px 11px; background:var(--soft); border-radius:7px; margin-bottom:18px; }
.auth-intro h1 { font-size:42px; font-weight:500; line-height:1.4; letter-spacing:-.055em; }
.auth-intro h1 span { color:var(--good); }
.auth-intro > p { font-size:14px; line-height:1.9; color:var(--muted); margin:18px 0 22px; }
.territory-art { max-width:400px; position:relative; margin:20px 0 0 -24px; }
.territory-art svg { display:block; width:100%; }
.art-caption { position:absolute; bottom:3px; left:55px; padding:9px 15px; background:var(--surface); border:1px solid var(--line); border-radius:10px; font-size:11px; box-shadow:0 4px 12px var(--good-ink)08; display:flex; gap:8px; align-items:center; }
.art-caption i { width:6px; height:6px; border-radius:50%; background:var(--good); }
.login-panel { background:white; border:1px solid var(--line); border-radius:26px; padding:36px; box-shadow:0 12px 40px var(--good-ink)05; }
.login-heading { margin-bottom:30px; }
.login-heading h2 { font-size:26px; color:var(--ink); font-weight:600; letter-spacing:-.04em; margin:0; }
.login-heading .eyebrow { color:var(--good); }
.login-heading p:last-child { margin:10px 0 0; }
.auth-form { display:flex; flex-direction:column; gap:14px; }
.input-label { font-size:12px; font-weight:600; margin-bottom:-7px; }
.auth-form .field { height:54px; background:var(--surface-2); }
.remember-option { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted); min-height:36px; margin:0 0 10px; cursor:pointer; }
.remember-option input { margin:0; }
.auth-form .btn { min-height:52px; justify-content:space-between; padding:14px 20px; }
.auth-form .btn span { font-size:22px; font-weight:400; }
.login-note { border-top:1px solid var(--line); margin:28px 0 0; padding-top:20px; color:var(--muted); font-size:11px; line-height:1.9; }
.auth-error { background:var(--warn-soft); border:1px solid var(--danger-line); padding:12px; border-radius:10px; color:var(--danger-ink); font-size:13px; }
.auth-footer { text-align:center; font-size:10px; color:var(--muted); padding:40px 0 0; letter-spacing:.02em; }
.auth-footer span { padding:0 10px; }
.auth-step .login-panel { max-width:440px; width:100%; align-self:center; margin:30px auto; }
.auth-step h1 { font-size:24px; margin-bottom:16px; }
@media(min-width:900px) {
  body:not(.auth-page) .phone { max-width:var(--shell); padding-left:var(--rail); }
  body:not(.auth-page) .app-header { padding:34px 44px 12px; }
  body:not(.auth-page) .brand { position:fixed; top:40px; margin-left:calc(-1 * var(--rail)); }
  body:not(.auth-page) .header-request { margin-left:auto; }
  body:not(.auth-page) .header-request + .header-profile { margin-left:10px; }
  body:not(.auth-page) .scroll { padding:0 44px 56px; }
  .nav { top:136px; bottom:auto; left:max(24px, calc((100vw - var(--shell)) / 2 + 24px)); right:auto; width:calc(var(--rail) - 40px); height:auto; margin:0; flex-direction:column; gap:6px; padding:0; background:transparent; border:0; box-shadow:none; }
  .nav a { flex:none; flex-direction:row; justify-content:flex-start; gap:16px; padding:16px 20px; font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--ink); border-radius:14px; text-align:left; min-height:56px; }
  .nav a.on { background:var(--accent-soft); color:var(--accent); font-weight:700; }
  .nav a:hover { background:var(--soft); color:var(--accent-ink); }
  .nav svg { width:25px; height:25px; stroke-width:2.1; }
  .brand-name { font-size:17px; }
  .brand-caption { font-size:12px; }
  .auth-page .scroll { display:grid; grid-template-columns:1fr 410px; column-gap:70px; padding:0 60px 28px; }
  .auth-page .app-header { padding:44px 60px 0; }
  .auth-page .lang { grid-column:1 / -1; margin-bottom:65px; }
  .auth-intro { align-self:center; }
  .auth-intro h1 { font-size:46px; }
  .login-panel { align-self:center; }
  .auth-footer { grid-column:1 / -1; padding-top:72px; }
  .auth-step .scroll { display:flex; }
}
/* 집회 메뉴 「전체 화면」(PC, _program_tabs.html) — 집회 메뉴 화면(#meetings-page)에서만 앱 틀을 화면 폭 전체로.
   왼쪽 메뉴·뒤로 단추는 틀 가운데 맞춤 대신 화면 왼쪽에. 관리 셸(body.workspace)은 이미 전체 폭이라 단추를 숨긴다. */
.btn.wide-toggle { display:none; }
html.wide .wide-toggle .wide-on, html:not(.wide) .wide-toggle .wide-off { display:none; }
@media(min-width:900px) {
  body:not(.workspace):has(#meetings-page) .btn.wide-toggle { display:inline-flex; margin-left:auto; }
  html.wide body:not(.auth-page):has(#meetings-page) .phone { max-width:none; }
  html.wide body:has(#meetings-page) .nav, html.wide body:has(#meetings-page) .back-fab { left:24px; }
  /* 전체 폭에서는 왼쪽 메뉴를 회중 이름 폭 정도로만(사용자 요청) — 표에 자리를 더 준다. */
  html.wide body:has(#meetings-page) { --rail:220px; }
  /* 집회 메뉴 PC: 표가 안에서 스크롤되니 아래 여백은 조금만. */
  body:not(.auth-page):has(#meetings-page) .scroll { padding-bottom:24px; }
}
@media(max-width:899px) {
  .auth-page .phone { max-width:520px; }
  .auth-intro h1 { font-size:34px; }
  .auth-intro .intro-label { display:none; }
  .auth-intro > p { font-size:12px; margin:12px 0 24px; }
  .territory-art { display:none; }
  .auth-page .lang { margin-bottom:30px; }
  .login-panel { padding:26px; border-radius:22px; }
  .login-heading { margin-bottom:22px; }
  .login-heading h2 { font-size:23px; }
}
@media(max-width:374px) {
  .scroll { padding-left:16px; padding-right:16px; }
  .app-header { padding-left:16px; padding-right:16px; }
  .auth-page .app-header { padding:24px 20px 0; }
  .auth-page .scroll { padding-left:20px; padding-right:20px; }
  .login-panel { padding:22px; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* Mobile first pass: more room for content and comfortable touch targets. */
@media (max-width: 899px) {
  .phone { min-width: 0; }
  /* 컴팩트 헤더: 마크 28px · 회중 이름 한 줄(설명은 옆에 작게) · 오른쪽 내 아바타. 높이 ≈ 48px 로 아래 내용이 더 보이게. */
  .app-header { min-height: 0; padding: 10px 20px 4px; gap: 10px; }
  .brand { gap: 8px; font-size: 16px; letter-spacing: -.3px; line-height: 1.2; min-width: 0; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-name { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
  .brand-caption { display: inline; margin: 0; font-size: 10px; white-space: nowrap; }
  .header-profile { display: flex; gap: 6px; font-size: 11px; color: var(--muted); flex-shrink: 0; max-width: 34%; }
  .header-request { height: 28px; padding: 0 8px; font-size: 11px; }
  .brand-caption { display: none; }
  .brand-name { white-space: nowrap; }
  .brand { font-size: 15px; }
  .header-request + .header-profile { margin-left: 6px; }
  .header-profile .avatar { width: 26px; height: 26px; font-size: 11px; flex-shrink: 0; }
  .header-profile > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scroll { padding: 6px 20px calc(110px + env(safe-area-inset-bottom)); gap: 14px; }
  .scroll > .lang { position: absolute; z-index: 5; right: 16px; top: 22px; margin: 0; gap: 0; }
  .lang button { min-height: 42px; padding: 7px 8px; font-size: 12px; }
  .lang button[aria-current] { background: var(--soft); }
  .eyebrow { font-size: 12px; margin-bottom: 3px; }
  h1 { font-size: 26px; }
  h2 { font-size: 14px; }
  .muted { font-size: 13.5px; }
  .small { font-size: 12.5px; }
  .card { padding: 18px; border-radius: 18px; gap: 11px; }
  .btn { min-height: 50px; font-size: 15px; }
  .btn.sm { min-height: 44px; font-size: 13px; }
  .chip { font-size: 12.5px; }
  .nav { height: calc(72px + env(safe-area-inset-bottom)); bottom: 0; left: 0; right: 0; max-width: 600px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); border-radius: 20px 20px 0 0; box-shadow: 0 -6px 25px var(--good-ink)0a; }
  /* 다섯 칸을 모두 남긴다 — 넷째·다섯째를 숨기면 '메뉴' 가 사라져 나머지 화면으로 갈 길이 없다.
     좁아지면 글자가 화면 폭을 따라 줄고, 그래도 넘치면 끝을 자른다. */
  .nav a { font-size: clamp(9px, 2.6vw, 12px); font-weight: 600; gap: 3px; border-radius: 13px;
           min-height: 58px; min-width: 0; padding: 0 2px; }
  .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav svg { width: 24px; height: 24px; }
  .nav a:last-child.on { background: var(--soft); }
  .nav a.related { background: var(--soft); color: var(--accent); font-weight: 600; }
  .profile-card { padding-bottom: 0; }
  .profile-summary { min-height: 58px; gap: 12px; }
  .profile-summary .avatar { width: 42px; height: 42px; font-size: 15px; }
  .profile-name { font-size: 17px; }
  .profile-edit { flex-shrink: 0; padding: 10px 11px; border-radius: 10px; background: var(--soft); font-size: 12px; font-weight: 600; }
  .profile-details { border-top: 1px solid var(--line); }
  .profile-details summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; list-style: none; }
  .profile-details summary::-webkit-details-marker { display: none; }
  .profile-details summary::after { content: '⌄'; font-size: 19px; transition: transform .2s; }
  .profile-details[open] summary::after { transform: rotate(180deg); }
  .profile-details dl { margin: 0 0 16px; }
  .profile-details dl > div { display: flex; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
  .profile-details dt { color: var(--muted); width: 72px; flex-shrink: 0; }
  .profile-details dd { margin: 0; min-width: 0; }
  .menu-group { padding: 8px 18px; }
  .menu-group h2 { padding: 8px 0; font-size: 12px; color: var(--muted); }
  .menu-group > a { min-height: 54px; font-size: 15px; }
  .event-card > .row:first-child { flex-wrap: wrap; row-gap: 6px; }
  .event-card > div[style*="font-size: 17px"] { font-size: 18px !important; }
  .cart-card .chk { min-width: 64px; min-height: 44px; }
  .territory-card .strong { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
  .territory-card .muted { font-size: 12.5px; }
  .territory-card .badge { background: var(--accent); border-radius: 7px; padding: 3px 7px; }
  .auth-page .app-header { padding: 22px 20px 10px; }
  .auth-page .scroll { padding: 34px 20px 22px; }
  .auth-page .lang { margin: 0; }
  .auth-intro h1 { font-size: 32px; }
  .auth-intro > p { font-size: 13px; margin: 10px 0 22px; }
  .login-panel { padding: 24px; }
  .login-heading h2 { font-size: 24px; }
}
@media (max-width: 374px) {
  .app-header { padding-left: 16px; padding-right: 16px; }
  .brand { font-size: 19px; }
  .brand-mark { width: 32px; height: 32px; }
  .scroll { padding-left: 16px; padding-right: 16px; }
  .scroll > .lang { right: 10px; }
  .lang button { padding: 7px 5px; font-size: 11px; }
  .week-days { overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .week-days > a { flex: 0 0 44px !important; }
  .week-days::-webkit-scrollbar { display: none; }
  .nav { padding-left: 6px; padding-right: 6px; }
  .auth-page .app-header { padding-left: 16px; padding-right: 16px; }
  .auth-page .scroll { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 899px) {
  .week-days > a { min-height: 70px; }
  .week-days > a.sel { background: var(--accent) !important; color: var(--surface) !important; border-color: var(--accent) !important; box-shadow: 0 5px 12px var(--good-ink)20; }
  .week-days > a.sel .muted { color: var(--good-soft); }
  .week-days > a.sel .dot { background: var(--surface) !important; }
  .team-filter { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; background: transparent; padding: 0; }
  .team-filter::-webkit-scrollbar { display: none; }
  .team-filter a { flex: 0 0 auto; min-height: 42px; padding: 10px 14px; border-radius: 11px; }
  .team-filter a.sel { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--surface) !important; }
  .service-guidance { padding: 0 2px; }
  .service-guidance summary { width: max-content; min-height: 38px; display: flex; align-items: center; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; }
  .service-guidance .muted { margin: 6px 0 8px; }
  .territory-card { gap: 10px !important; }
  .territory-progress { line-height: 1.2; }
  .territory-card .bar { height: 5px; }
}

.menu-language { gap: 10px; }
.menu-language h2 { margin: 0; font-size: 12px; color: var(--muted); }
.menu-language .lang { justify-content: stretch; gap: 6px; margin: 0; }
.menu-language .lang button { flex: 1; min-height: 46px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; }
.menu-language .lang button[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
@media (max-width: 899px) {
  .menu-language { padding: 15px 18px; }
}

/* Keep the full congregation name readable inside the compact brand area. */
.brand-name { font-size:17px; letter-spacing:-.05em; line-height:1.35; white-space:nowrap; }

/* Keep recorded checks visible while preventing incompatible changes. */
.mini { padding: 0; font-family: inherit; white-space: nowrap; }
.mini:disabled { opacity: .4; cursor: not-allowed; animation: none; }
.mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.car-toggle { cursor: pointer; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.car-toggle input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }
.nav a { padding: 0 2px; }
.nav a svg { flex-shrink: 0; }
.nav a span, .nav a { line-height: 1.2; }
@media (max-width: 380px) { .nav a { font-size: 10px; } }

/* 월말 보고 — 고려시간 줄 */
.credit-rows { display: flex; flex-direction: column; gap: 8px; }
/* 항목 | 시간 | 지우기 — 칸 너비를 격자로 못박는다 */
.credit-row { display: grid; grid-template-columns: 1fr 104px 40px; align-items: center; gap: 8px; }
.credit-row input { width: 100%; min-width: 0; }
.credit-row .credit-hours { text-align: right; }
.credit-drop { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 10px; background: var(--surface); color: var(--danger-ink); cursor: pointer; font-size: 15px; }
.credit-drop:hover { background: var(--danger-soft); }
#report-form input[type=number], #report-form input[type=text] { width: 100%; }

/* 구역 고르개 — 시·구 먼저, 그 안에서 구역. 구역이 육백 곳이 넘어 한 줄로는 못 찾는다. */
.area-pick { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.area-pick > .area-pick-search { flex: 1 0 100%; min-width: 0; }
/* 구역·봉사 화면 맨 위의 「내 구역」 알림 — 누르면 그 구역 카드로. */
.my-terr-notice { flex-direction: row; align-items: center; gap: 10px; padding: 12px 14px; border-color: var(--warn); background: var(--warn-soft); text-decoration: none; color: inherit; }
.my-terr-notice .my-terr-when { display: block; }
/* 오늘 가 볼 만한 구역 — 구역 목록 맨 위 한 칸. 왜 추천인지 한 줄로 밝힌다.
   (구역 목록 화면은 territory.css 를 싣지 않아 여기에 둔다.) */
.terr-picks { gap: 4px; }
.terr-picks h2 { margin: 0; font-size: 15px; }
.terr-pick { gap: 8px; min-height: 48px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.terr-picks > .terr-pick:first-of-type { border-top: 0; }
.terr-pick > span.grow { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.terr-pick .strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terr-pick-why { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 「오늘 추천 구역」 더보기 · 공지사항 더보기 */
.terr-picks-more > summary { list-style: none; cursor: pointer; padding: 10px 0 2px; text-align: center; font-weight: 600; }
.terr-picks-more > summary::-webkit-details-marker { display: none; }
.terr-picks-more[open] > summary { display: none; }
.terr-picks-more[open] { display: flex; flex-direction: column; gap: 4px; }
.notice-more > summary { list-style: none; cursor: pointer; }
.notice-more > summary::-webkit-details-marker { display: none; }
.notice-more .notice-toggle::after { content: attr(data-more); color: var(--accent); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.notice-more[open] .notice-short { display: none; }
.notice-more[open] .notice-toggle::after { content: attr(data-less); }
.notice-more .notice-full { margin-top: 6px; overflow-wrap: anywhere; }
.area-pick > select { min-width: 0; }
.area-pick > .area-pick-city { flex: 0 0 38%; }
.area-pick > select:not(.area-pick-city) { flex: 1 1 auto; }
/* 시·구 · 구역 고르개는 휴대폰에서도 한 줄에 둘(사용자 요청). 찾은 구역은 찾는 칸 아래 단추로. */
.area-pick > .area-pick-hits { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.area-pick > .area-pick-hits[hidden] { display: none; }
.area-pick-hit { border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12.5px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.area-pick-hit.on { border-color: var(--good); background: var(--good-soft); color: var(--good-ink); font-weight: 700; }

/* 지도 앱 아이콘 — 주소 행(구역)과 봉사 모임 장소가 함께 쓴다. territory.css 에서 옮겨 왔다. */
.map-app-link { width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; flex-shrink:0; }
.map-app-link img { display:block; width:30px; height:30px; border-radius:7px; object-fit:contain; }
.map-app-link.unavailable { opacity:.45; }
.address-heading .map-app-link { width:32px; height:36px; }
.address-heading .map-app-link img { width:28px; height:28px; }
@media (max-width:360px) {
  .address-heading .map-app-link { width:26px; height:36px; }
  .address-heading .map-app-link img { width:24px; height:24px; border-radius:6px; }
}
.place-map-links { display:inline-flex; align-items:center; gap:4px; flex-wrap:nowrap; flex-shrink:0; }
.place-map-links .map-app-link { width:44px; height:44px; }
.event-card-head { flex-wrap:wrap; row-gap:6px; }
/* 오늘 시간이 지난 봉사 모임은 접어 둔다(그날만) — 태그·시간 줄을 눌러 펼치고 접는다. */
.event-card > summary.event-card-head, .service-session > summary.session-head-row { list-style:none; cursor:pointer; }
.event-card > summary.event-card-head::-webkit-details-marker,
.service-session > summary.session-head-row::-webkit-details-marker { display:none; }

/* 봉사 모임 카드 — 인도자 오른쪽에 줌 단추, 그 아래 ID·비밀번호 줄.
   단추 줄은 지원 · 인도자에게 요청 · (그날 인도자·관리자면) 조직 세 개를 한 줄에 놓고,
   요청을 펼치면 그 폼만 아래로 내려온다(order·flex-basis). 러시아어처럼 글이 길면 자연히 줄이 바뀐다. */
.chip.accent-tag { background:var(--accent); color:var(--surface); font-weight:700; letter-spacing:.02em; }
/* 봉사 카드는 줄이 많다(머리·인도자·지원자·이름 칩·단추) — 줄 사이를 조금 더 띄운다(사용자 요청). */
/* 봉사 카드 두 벌(「오늘」·「봉사」)은 <details> 라 사파리 등에서 gap 이 안 먹는다 — 칸 사이 여백을 margin 으로 똑같이 준다. */
.event-card, .service-session { display:block; }
.event-card > * + *, .service-session > * + * { margin-top:16px; }
/* 「지원자 N명」 줄과 이름 칩, 칩끼리 줄바꿈된 사이가 붙어 보여 조금 더 띄운다. */
.event-card > .wrap, .service-session .service-attendees { row-gap:10px; }
.event-card > .wrap { column-gap:8px; }
.event-card > .line, .service-session > .line { margin-top:18px; }
.event-card > .line + *, .service-session > .line + * { margin-top:14px; }
.event-card > .event-conductor + .zoom-join, .service-session > .event-conductor + .zoom-join { margin-top:6px; }
.event-group-toggle + .wrap, .event-card > .muted.small.strong + .wrap { margin-top:8px; }
.event-conductor { align-items:center; gap:10px; }
.event-conductor .zoom-join-inline { flex:0 0 auto; width:auto; }
.event-conductor .zoom-join-inline .zoom-join-btn { width:auto; min-height:40px; padding:8px 14px; font-size:13.5px; }
.event-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.event-actions > form { display:contents; }
.event-actions .event-request { display:contents; }
.event-actions .btn, .event-actions summary.btn { flex:1 1 auto; width:auto; min-height:44px; white-space:nowrap; padding:0 10px; font-size:13px; letter-spacing:-.2px; }
.event-actions > form > .btn { order:1; }                       /* 지원 */
.event-actions .event-request > details { flex:1 1 auto; min-width:0; order:2; }   /* 인도자에게 요청 */
.event-actions > a.btn { order:3; }                             /* 조직 */
.event-actions .event-request > details > summary { list-style:none; }
.event-actions .event-request > details > summary::-webkit-details-marker { display:none; }
.event-actions .event-request > details[open], .event-actions .event-request > ul,
.event-actions .event-request > .service-note, .event-actions .event-request > .chip { flex-basis:100%; order:4; }
.event-actions .event-request > details[open] > form { display:flex; flex-direction:column; gap:8px; margin-top:8px; }

/* 참고 지도 — 그림이 커서 옆으로 밀어 보게 두고, 원본은 대화상자(다이얼로그)로 크게 연다.
   새 탭(target=_blank)을 썼더니 홈 화면에 추가한 앱(standalone)에서는 뒤로 갈 방법이 없었다 —
   그래서 같은 화면 위에 여는 대화상자로 바꿨다: 닫기 단추나 바깥을 누르면 그대로 돌아온다. */
.map-card { display: flex; flex-direction: column; gap: 12px; }
.map-card-head { align-items: flex-start; gap: 10px; }
.map-card-head h2 { margin: 0 0 3px; font-size: 17px; }
.map-card-head p { margin: 0; line-height: 1.55; }
.map-figure { overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--line); border-radius: 12px; background: #0B121B; }
/* 작은 화면에서는 지도 전체가 한눈에 들어오게 맞춘다 — 자세히 볼 때는 「크게 보기」. */
.map-figure img { display: block; width: 100%; height: auto; }
.map-card .btn { align-self: flex-start; }

/* 참고 지도 크게 보기 — 화면 대부분을 채우고, 그림은 가로·세로로 밀어 보거나 두 손가락으로 확대한다. */
.map-lightbox { width: min(96vw, 1100px); max-width: 96vw; height: 92dvh; max-height: 92dvh; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: #0B121B; color: var(--ink); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.map-lightbox::backdrop { background: rgba(8, 12, 18, .7); }
.map-lightbox[open] { display: flex; flex-direction: column; }
.map-lightbox-head { background: #0B121B; border-bottom: 1px solid rgba(255, 255, 255, .08); flex-shrink: 0; }
.map-lightbox-head h2 { flex: 1; margin: 0; font-size: 15px; font-weight: 700; color: #F2F6FA; }
.map-lightbox-head .cr-close { background: rgba(255, 255, 255, .08); color: #C6D2DF; }
.map-lightbox-head .cr-close:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.map-lightbox-body { flex: 1; min-height: 0; overflow: auto; touch-action: pan-x pan-y pinch-zoom; padding: 12px; }
.map-lightbox-body img { display: block; width: auto; max-width: none; height: auto; min-width: 100%; }

/* 줌 참여 — 봉사 모임·집회 카드. 버튼 글자는 한 줄, 누르는 곳은 44px 이상. */
.zoom-join { display:flex; flex-direction:column; gap:6px; }
.zoom-join-row { display:flex; align-items:center; gap:8px; min-width:0; }
.zoom-join-btn { flex:1 1 auto; min-width:0; min-height:44px; white-space:nowrap; }
.zoom-join-btn span { white-space:nowrap; }
.zoom-join-live { flex-shrink:0; }
/* 줌 ID·비밀번호 줄 — 오른쪽으로 몰아서, 줌 참여 단추 아래에 붙어 보이게 한다. 아이콘을 앞에 달아
   줄만 봐도 줌 정보임을 알 수 있게 한다. */
.zoom-join-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px 10px; }
.zoom-join-meta b { font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.zoom-join-meta-icon { flex-shrink:0; opacity:.6; }

/* 웹앱 설치(PWA) — 홈 화면에서 연 독립 창.
   위: .app-header 여백은 화면 폭·페이지마다 달라(22~44px) 덮어쓰지 않고, 머리가 숨은 화면(워크스페이스·로그인)까지 함께 내리도록 .phone 에 더합니다.
   아래: .nav 는 위 규칙들이 이미 env(safe-area-inset-bottom) 만큼 띄우므로 겹쳐 더하지 않습니다. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .phone { padding-top: env(safe-area-inset-top); }
  /* 맨 위 시스템 막대(시계·배터리) 자리를 같은 바탕색으로 덮는다.
     덮지 않으면 위로 스크롤한 회중 이름 줄이 그 밑으로 지나가는데, iOS 가 막대 뒤를 흐리게 그려
     머리 줄이 블러 처리된 것처럼 보였다. 막대 높이(safe-area-inset-top)만 덮고 아무것도 가리지 않는다. */
  .phone::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    background: var(--canvas);
    z-index: 40;
    pointer-events: none;
  }
}
.pwa-offline { margin-top: 24px; text-align: center; align-items: center; }
.pwa-offline h1 { font-size: 20px; margin: 0; }
.pwa-offline p { margin: 0; color: var(--muted, inherit); }
@media (max-width: 479px) { .header-request span { display: none; } .header-request { width: 30px; padding: 0; justify-content: center; } }
/* 뒤로 가기 — 왼쪽 아래, 아래 메뉴 바로 위에 떠서 따라다닌다(홈 화면 앱엔 브라우저 뒤로가 없다). */
.back-fab { position:fixed; left:14px; bottom:calc(92px + env(safe-area-inset-bottom)); z-index:29; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.96); color:var(--ink); box-shadow:0 6px 18px rgba(28,38,40,.16); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.back-fab:hover { color:var(--accent); border-color:var(--accent); }
.back-fab.is-hidden { display:none; }
@media (min-width:900px) { .back-fab { left:max(24px, calc((100vw - var(--shell)) / 2 + 24px)); bottom:24px; } }
/* 로그인 화면(auth-v2)에서는 머리 단추·뒤로 단추를 내지 않는다. */
body.auth-v2 .back-fab, body.auth-v2 .header-request, body.auth-v2 .header-profile, body.auth-page .back-fab, body.auth-page .header-request { display:none !important; }

/* 네모난 탭 — 한 화면에 다 늘어놓지 않고 고른 칸만 보인다(오늘·구역). 가로로 넘치면 밀어서 본다. */
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border: 1px solid var(--line);
       border-radius: 10px; background: var(--surface); color: var(--muted); font: inherit; font-size: var(--text-sm); font-weight: 600;
       text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.tab:hover { color: var(--ink); border-color: var(--accent-soft); }
.tab[aria-selected="true"], .tab.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tab .n { font-size: 11.5px; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-tab-panel][hidden] { display: none !important; }
.tab-panel { display: flex; flex-direction: column; gap: var(--gap); }
.tab .tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.notice-card .notice-full { color: var(--ink); line-height: 1.65; overflow-wrap: anywhere; }
.notice-past { gap: 2px; }
.notice-past .notice-more { border-top: 1px solid var(--line-soft); padding: 2px 0; }
.notice-past .notice-more > summary { min-height: 40px; gap: 10px; }
.notice-past .notice-full { padding: 0 0 10px; }
/* 공지 탭 투표 카드 — 카카오톡 투표처럼 선택지 줄, 투표 뒤에는 줄 안에 막대(내 선택은 주색). */
.poll-card { gap: 8px; }
.poll-head { gap: 6px; }
.poll-head .poll-closed { color: var(--muted); }
.poll-title { font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.poll-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.poll-choices { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.poll-choice { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; overflow-wrap: anywhere; }
.poll-choice input { width: 20px; height: 20px; flex-shrink: 0; margin: 0; accent-color: var(--accent); }
.poll-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.poll-actions { gap: 8px; }
.poll-actions .btn { min-height: 40px; }
.poll-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.poll-row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.poll-row .poll-bar { position: absolute; inset: 0 auto 0 0; background: var(--soft); transition: width .3s ease; }
.poll-row.mine { border-color: var(--accent); }
.poll-row.mine .poll-bar { background: var(--accent-soft); }
.poll-row .poll-text, .poll-row .poll-count { position: relative; }
.poll-row .poll-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.poll-row.mine .poll-text { font-weight: 700; color: var(--accent); }
.poll-row .poll-count { flex-shrink: 0; font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--muted); }
.poll-who > summary { min-height: 40px; font-size: var(--text-sm); color: var(--accent); font-weight: 600; }
.poll-who-row { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 8px; }
.poll-names { gap: 4px; }
.poll-names .chip { height: 26px; padding: 0 10px; }
.place-nav { gap: 6px; padding-left: 4px; }
.place-nav-icon { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; object-fit: cover; }
.pending-log .pending-times { gap: 6px; align-items: center; }
.pending-log input[type=number], .pending-log select {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0;
}
.pending-log input[type=number] { width: 4.2em; text-align: right; font-variant-numeric: tabular-nums; }
.pending-log select { width: auto; }

/* 봉사 카드 첫 줄 — 휴대폰에서도 시간 · 장소 · 인원을 한 줄에(장소 6글자까지 넉넉히, 넘치면 장소만 말줄임). */
.event-card > summary.event-card-head, .service-session > summary.session-head-row { display:flex; align-items:center; flex-wrap:nowrap !important; gap:6px; min-width:0; }
.event-card-head > .chip, .session-head-row > .chip { flex-shrink:0; }
.event-card-head > .place-nav, .session-head-row > .place-nav { flex-shrink:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.service-time-chip.is-past { opacity:.55; }
.service-count-chip svg { margin-right:-2px; }
@media (max-width:440px) {
  .event-card-head > .chip, .session-head-row > .chip { padding:0 9px; gap:4px; font-size:12.5px; letter-spacing:-.2px; }
  .service-time-chip svg { display:none; }
  .place-nav { padding-left:3px; }
  .place-nav-icon { width:18px; height:18px; }
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* 화면 고정 — 손가락 둘로 확대하거나 옆으로 밀어 화면이 움직이지 않게(사용자 요청).
   세로 스크롤과 가로로 미는 칸(일자 띠 등)은 그대로. 지도(Leaflet)는 제 칸에서 스스로 확대한다. */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; overscroll-behavior-x: none; }

/* 봉사 시간 재기(「봉사」 메뉴 카드, 봉사 조직 아래) */
.service-timer { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.service-timer-row { align-items:center; gap:8px; }
.service-timer-form > p { margin:0 0 8px; }
.service-timer-actions { gap:8px; margin-top:10px; }
.service-timer .timer-num { font:inherit; font-size:16px; padding:6px 8px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); min-width:0; }
.service-timer input.timer-num { width:3.6em; text-align:right; }
.service-timer strong.mono { font-family:var(--font-mono); font-size:20px; font-variant-numeric:tabular-nums; }

/* 인도자 옆 조직자 — 「(조직자 홍길동)」 작고 옅게. */
.conductor-organizer { color:var(--muted); white-space:nowrap; }
/* 이름이 아닌 명칭(인도자·조직자) — 이름보다 2px 작고 가늘게. */
.role-label { font-size:calc(1em - 2px); font-weight:500; color:var(--muted); }

/* 메뉴 — 언어·알림 한 카드, 맨 아래 단추: 관리자모드(파랑) 한 줄 + 화면 테마·접속 종료 반반. */
.menu-settings .menu-lang { justify-content:flex-start; flex-wrap:wrap; gap:6px; margin:0 0 6px; }
.menu-settings .menu-lang button { min-height:38px; padding:6px 14px; font-size:13px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); }
.menu-settings .menu-lang button[aria-current] { background:var(--accent); border-color:var(--accent); color:var(--surface); }
.menu-actions { display:flex; flex-direction:column; gap:10px; }
.menu-actions .btn.admin-mode { background:var(--bro); border-color:var(--bro); color:#fff; }
.menu-actions-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.menu-actions-row > form { display:contents; }
.menu-actions-row .btn { width:100%; }
.back-to-menu { align-self:flex-start; }

/* 같은 날 앞 모임(토요일 오전)은 신청하지 않고 이 모임에만 온 사람 — 이름 오른쪽 위 작은 N. */
.new-mark { font-size:9px; font-weight:800; line-height:1; vertical-align:super; margin-left:1px; color:var(--warn-ink, #b45309); letter-spacing:0; }
.new-mark.am-only { color:var(--bro); }

.group-where-line { font-size:14px; font-weight:600; margin:2px 0 8px; }
.group-extra { display:flex; align-items:center; gap:6px; margin:6px 0 2px; font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none; }
/* 지도 제목 오른쪽 「봉사 | 정보」 */
.map-tabs { display:flex; gap:2px; padding:3px; background:var(--soft); border-radius:12px; align-self:center; flex-shrink:0; }
.map-tabs a { display:flex; align-items:center; height:34px; padding:0 16px; border-radius:9px; font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; }
.map-tabs a.on { background:var(--accent); color:var(--surface); }
/* 봉사 시간 달력 — 날마다 그날 합계, 날짜를 누르면 아래에 그날 입력 */
.hours-cal { gap:10px; }
.hours-cal-sum { display:flex; align-items:center; justify-content:space-around; padding:10px 0; border:1px solid var(--line); border-radius:14px; font-size:14px; color:var(--muted); }
.hours-cal-sum b { font-size:22px; color:var(--ink); font-variant-numeric:tabular-nums; margin-right:3px; }
.hours-cal-sum i { width:1px; height:22px; background:var(--line); }
.hours-cal-nav { display:flex; align-items:center; gap:6px; }
.hours-cal-arrow { width:40px; height:40px; border-radius:10px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.hours-cal-this { font-size:13.5px; font-weight:600; color:var(--accent); padding:0 6px; }
.hours-cal-title { margin:0; font-size:15px; font-weight:500; color:var(--muted); white-space:nowrap; }
.hours-cal-title b { font-size:22px; color:var(--ink); }
.hours-cal-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.hours-cal-head { padding:6px 0; text-align:center; font-size:12.5px; font-weight:700; color:var(--muted); border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--soft); }
.hours-cal-head.sun, .hours-cal-day.sun .n { color:var(--danger-ink); }
.hours-cal-day { min-height:58px; padding:4px 4px 5px; display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:2px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  color:var(--ink); text-decoration:none; min-width:0; }
.hours-cal-day .n { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.2; }
.hours-cal-day .h { align-self:stretch; text-align:center; font-size:11px; font-weight:700; color:var(--surface); background:var(--accent); border-radius:6px; padding:2px 0; white-space:nowrap; overflow:hidden; }
.hours-cal-day.out .n { color:var(--ghost); font-weight:400; }
.hours-cal-day.out .h { opacity:.55; }
.hours-cal-day.today { background:var(--warn-soft); }
.hours-cal-day.picked { box-shadow:inset 0 0 0 2px var(--accent); }
.hours-day h2 { margin:0; }
.hours-log { gap:8px; }
.hours-log .btn.sm { min-height:32px !important; height:32px; padding:0 10px; }
.hours-add { display:flex; flex-direction:column; gap:8px; margin:0; }
.hours-add-row { gap:6px; }
.hours-add input[type=number] { width:4.2em; height:40px; text-align:right; border:1px solid var(--line); border-radius:10px; padding:0 8px; font:inherit; font-size:16px; background:var(--surface); color:var(--ink); }
.hours-add select { height:40px; border:1px solid var(--line); border-radius:10px; padding:0 8px; font:inherit; font-size:16px; background:var(--surface); color:var(--ink); }
.hours-add input.field { height:44px; width:100%; box-sizing:border-box; font-size:15px; }
/* 달력 칸의 봉사 신청 점·재방 방문, 날짜를 누르면 뜨는 입력 창 */
.hours-cal-day .n { display:flex; align-items:center; gap:3px; }
.hours-cal-day .s, .hours-cal-legend .s, .cal-signup .s { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--good); flex:none; }
.hours-cal-day .v, .hours-cal-legend .v, .cal-visit .v { align-self:stretch; text-align:center; font-size:10.5px; font-weight:700; color:var(--bro); background:var(--bro-soft); border-radius:6px; padding:1px 0; white-space:nowrap; overflow:hidden; }
.hours-cal-legend { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hours-cal-legend span { display:inline-flex; align-items:center; gap:4px; }
.hours-cal-legend .v, .hours-cal-legend .h { padding:1px 5px; font-size:10.5px; font-weight:700; border-radius:5px; }
.hours-cal-legend .h { color:var(--surface); background:var(--accent); }
.cal-sheet { width:min(420px, calc(100vw - 24px)); max-height:calc(100dvh - 40px); box-sizing:border-box; border:0; border-radius:18px; padding:16px; background:var(--surface); color:var(--ink); }
.cal-sheet[open] { display:flex; flex-direction:column; gap:12px; }
.cal-sheet::backdrop { background:rgba(15,25,20,.45); }
.cal-sheet-head { display:flex; align-items:center; justify-content:space-between; }
.cal-sheet-head h2 { margin:0; font-size:18px; }
.cal-sheet-close { width:40px; height:40px; border:0; border-radius:10px; background:var(--soft); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.cal-sheet-signups { display:flex; flex-wrap:wrap; gap:6px; }
.cal-sheet-signups:empty { display:none; }
.cal-signup { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; padding:4px 10px; border-radius:999px; background:var(--good-soft); color:var(--good-ink); font-weight:600; }
.cal-sheet-list { display:flex; flex-direction:column; gap:6px; }
.cal-sheet-list:empty { display:none; }
.cal-log { gap:8px; }
.cal-log form { margin:0; }
.cal-log .btn.sm { min-height:32px !important; height:32px; padding:0 10px; width:auto; }
.cal-visit { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:var(--bro-soft); color:var(--ink); text-decoration:none; min-width:0; }
.cal-visit .v { flex:none; padding:1px 6px; background:var(--surface); }
.cal-visit .muted { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 바로가기(햄버거) — 로고 왼쪽, 왼쪽에서 나오는 메뉴 */
.nav-burger { flex:none; width:40px; height:40px; margin-right:2px; border:0; border-radius:12px; background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.nav-burger:hover { background:var(--soft); }
.nav-drawer { position:fixed; inset:0 auto 0 0; margin:0; width:min(252px, 74vw); height:100dvh; max-height:none; box-sizing:border-box; padding:calc(16px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom)); border:0; border-radius:0 24px 24px 0; background:var(--surface); color:var(--ink); box-shadow:8px 0 32px rgba(15,25,20,.18); }
.nav-drawer[open] { display:flex; flex-direction:column; gap:14px; animation:drawer-in .22s ease-out; }
.nav-drawer::backdrop { background:rgba(15,25,20,.42); }
@keyframes drawer-in { from { transform:translateX(-100%); } to { transform:none; } }
.nav-drawer-head:focus, .nav-drawer-head:focus-visible { outline:0 !important; box-shadow:none !important; }
.nav-drawer-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 4px 12px 6px; border-bottom:1px solid var(--line-soft); outline:none; }
.nav-drawer-close { width:34px; height:34px; border:0; border-radius:50%; background:var(--soft); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.nav-drawer-list { display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.nav-drawer-list hr { border:0; border-top:1px solid var(--line-soft); margin:8px 10px; }
.nav-drawer-list a { display:flex; align-items:center; gap:12px; min-height:46px; padding:0 10px; border-radius:14px; color:var(--ink); text-decoration:none; font-size:15px; font-weight:600; -webkit-tap-highlight-color:transparent; }
.nav-drawer-ico { width:34px; height:34px; border-radius:10px; background:var(--soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; transition:background .2s, color .2s; }
.nav-drawer-list a.on { background:var(--accent-soft); color:var(--accent); font-weight:700; }
.nav-drawer-list a.on .nav-drawer-ico { background:var(--accent); color:var(--surface); }
.nav-drawer-list a:not(.on):active { background:var(--soft); }
.nav-drawer-list a:focus { outline:none; }
.nav-drawer-list a:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
@media (prefers-reduced-motion: reduce) { .nav-drawer[open] { animation:none; } }
.nav-burger + .brand { margin-right:auto; }
.app-header .nav-burger { margin-left:-8px; margin-right:-10px; }
/* 그날 봉사 시간(오늘·봉사 맨 아래) */
.day-record { gap:8px; }
.day-record h2 { margin:0; font-size:16px; }
.day-record-form { gap:6px; margin:0; }
.day-record-form input[type=number] { width:3.4em; min-width:0; height:42px; text-align:right; border:1px solid var(--line); border-radius:10px; padding:0 8px; font:inherit; font-size:16px; background:var(--surface); color:var(--ink); }
.day-record-form select { height:42px; border:1px solid var(--line); border-radius:10px; padding:0 8px; font:inherit; font-size:16px; background:var(--surface); color:var(--ink); }
.day-record-form .btn.sm { width:auto; flex:none; min-height:42px !important; height:42px; padding:0 13px; }
.day-record-form .muted { flex:none; }
.day-record-link { align-self:flex-end; text-decoration:none; }
.cal-sheet-label { font-size:13px; font-weight:700; margin-bottom:-2px; }
.cal-revisit summary { font-size:14px; font-weight:700; color:var(--accent); cursor:pointer; list-style:none; padding:6px 0; }
.cal-revisit summary::-webkit-details-marker { display:none; }
.cal-revisit[open] summary { margin-bottom:6px; }
.cal-revisit select.field { height:44px; width:100%; box-sizing:border-box; padding:0 10px; }
.cal-revisit textarea { min-height:70px; }
.cal-revisit .visit-results { gap:6px; }
.chip-radio { flex:1; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; }
.chip-radio input { position:absolute; opacity:0; width:0; height:0; }
.chip-radio:has(input:checked) { background:var(--accent); border-color:var(--accent); color:var(--surface); }
.chip-radio:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.report-head { margin-top:6px; }
.report-head h2 { margin:0; }
/* 햄버거 옆에는 로고 없이 이름만, 로고는 바로가기 메뉴 위에 */
.nav-drawer-brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:17px; font-weight:700; letter-spacing:-.4px; min-width:0; }
.nav-drawer-brand .brand-mark { width:32px; height:32px; color:var(--accent); flex:none; }
/* 보고함 — 합계 칸(집단 봉사 시간을 넓게, 한 줄), 이름 옆 직책 태그(색으로 가름) */
.inbox-stats { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.45fr) minmax(0, 1fr); gap:8px; }
.inbox-stats .card { padding:14px 12px; gap:6px; min-width:0; }
.inbox-stats .muted { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12.5px; line-height:1.3; }
.inbox-stats strong { font-size:20px; white-space:nowrap; }
.inbox-who p { margin:4px 0 0; }
.inbox-name { display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; }
.inbox-name strong { margin-right:2px; }
.role-tag { display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; letter-spacing:-.2px; }
.role-tag.r-elder { background:var(--bro-soft); color:var(--bro); }
.role-tag.r-ms { background:var(--good-soft); color:var(--good-ink); }
.role-tag.r-regular { background:var(--warn-soft); color:var(--warn-ink); }
.role-tag.r-aux { background:#EFE7F6; color:#6B4590; }
.role-tag.r-special { background:var(--danger-soft); color:var(--danger-ink); }
.role-tag.r-pub { background:var(--soft); color:var(--muted); }
/* 요청 — 내 요청과 「확인 · 누가 · 언제」 태그 */
.my-requests { list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:6px; }
.my-requests li { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:8px 10px; border-radius:10px; background:var(--soft); font-size:13.5px; }
.my-req-body { flex:1 1 100%; overflow-wrap:anywhere; }
.req-ack { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px; background:var(--good-soft); color:var(--good-ink); font-size:11.5px; font-weight:700; white-space:nowrap; }
.req-wait { display:inline-flex; padding:2px 8px; border-radius:999px; background:var(--warn-soft); color:var(--warn-ink); font-size:11.5px; font-weight:700; }
.req-me { display:inline-flex; padding:1px 6px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:10.5px; font-weight:700; }
.req-row.mine { background:var(--accent-soft); border-radius:12px; padding:8px; }
.req-row .req-ack { margin-top:4px; }
/* 사람 고르기(person-picker.js) — 이름 검색 → 눌러서 고르기 */
select.pp-hidden { position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }
.pp-btn { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-width:0; min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; font-size:15px; text-align:left; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-sizing:border-box; }
.pp-btn::after { content:""; flex:none; width:16px; height:16px; background:currentColor; opacity:.45; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.pp-btn.empty { color:var(--ghost); }
.field > .pp-btn { border:0; padding:0; min-height:0; height:100%; background:transparent; }
.pp-sheet { width:min(420px, calc(100vw - 24px)); height:min(560px, calc(100dvh - 60px)); box-sizing:border-box; padding:12px; border:0; border-radius:18px; background:var(--surface); color:var(--ink); }
.pp-sheet[open] { display:flex; flex-direction:column; gap:8px; }
.pp-sheet::backdrop { background:rgba(15,25,20,.45); }
.pp-head { display:flex; gap:8px; align-items:center; }
.pp-search { flex:1; min-width:0; height:46px; padding:0 14px; border:1.5px solid var(--accent); border-radius:12px; font:inherit; font-size:16px; background:var(--surface); color:var(--ink); }
.pp-close { flex:none; width:40px; height:40px; border:0; border-radius:50%; background:var(--soft); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.pp-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.pp-item { display:flex; align-items:baseline; gap:8px; min-height:44px; padding:0 12px; border:0; border-radius:10px; background:transparent; color:var(--ink); font:inherit; font-size:15px; text-align:left; cursor:pointer; flex:none; }
.pp-item:hover, .pp-item:focus-visible { background:var(--soft); outline:none; }
.pp-item.on { background:var(--accent-soft); color:var(--accent); font-weight:700; }
.pp-sub { color:var(--muted); font-size:12.5px; }
.pp-typed { color:var(--accent); font-weight:600; border-top:1px solid var(--line-soft); border-radius:0 0 10px 10px; }
.pp-empty { color:var(--muted); font-size:13.5px; padding:12px; margin:0; }

/* 사진 크게 보기 — static/js/photo-viewer.js (어느 화면이든 [data-photo]) */
.photo-viewer { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:rgba(0,0,0,.92); color:#fff; }
.photo-viewer::backdrop { background:rgba(0,0,0,.92); }
.photo-viewer[open] { display:flex; align-items:center; justify-content:center; }
.pv-img { max-width:100%; max-height:calc(100dvh - 120px); object-fit:contain; user-select:none; }
.pv-btn { position:absolute; width:48px; height:48px; border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.pv-close { top:calc(14px + env(safe-area-inset-top)); right:14px; }
.pv-prev { left:10px; top:50%; transform:translateY(-50%); }
.pv-next { right:10px; top:50%; transform:translateY(-50%); }
.photo-viewer.single .pv-prev, .photo-viewer.single .pv-next, .photo-viewer.single .pv-count { display:none; }
.pv-count { position:absolute; top:calc(26px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:13px; }
.pv-delete { position:absolute; bottom:calc(20px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); margin:0; }
.pv-delete[hidden] { display:none; }
.pv-del-btn { height:40px; padding:0 18px; border-radius:20px; border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.pv-del-btn[data-armed] { background:var(--danger); border-color:var(--danger); }
[data-photo] { cursor:zoom-in; }


/* 메뉴 제목 통일(사용자 요청) — 어느 메뉴든 제목 글자 크기·위아래 간격·머리의 회중 이름 색과 자리가 같게.
   제목 줄은 높이 40px 에 가운데 맞춤 — 오른쪽 단추가 있든 없든 제목이 같은 자리에 선다.
   회중 이름은 「오늘」 화면처럼 먹색. */
.brand { color:var(--ink); }
.top, .service-head { min-height:40px; align-items:center; }
.top h1, .service-head h1 { margin:0; }
/* 제목 위아래 간격은 절반으로(사용자 요청) — 위: 머리 아래 여백을 줄이고, 아래: 화면 간격(gap)의 절반만 남긴다. */
.scroll > .top:first-child, .scroll > .service-head:first-child, .meetings-page > .top:first-child { margin-bottom:-7px; }
@media (max-width: 899px) {
  body:not(.auth-page) .scroll { padding-top:0; }
}
@media(min-width:900px) {
  body:not(.auth-page) .app-header { padding:30px 44px 5px; }
  body:not(.auth-page) .brand { top:38px; }
  .scroll > .top:first-child, .scroll > .service-head:first-child, .meetings-page > .top:first-child { margin-bottom:-9px; }
}

/* 오늘 탭 첫 집회 카드 머리 줄 오른쪽 끝 「전체」(집회 임명표로) — 초록 사각 단추, 높이는 옆 칩과 같게. */
.meeting-card .btn.meeting-all-btn { width:auto; height:var(--chip); min-height:0; padding:0 14px; border-radius:8px; background:var(--good); border-color:var(--good); color:#fff; font-size:var(--text-xs); font-weight:700; flex:0 0 auto; }
.meeting-card .btn.meeting-all-btn:hover { background:var(--good-ink); border-color:var(--good-ink); color:#fff; }

/* 스크롤바 자리를 늘 비워 둔다 — 지도처럼 화면에 다 들어와 스크롤바가 없는 메뉴로 가면
   머리(회중 이름)·내용이 스크롤바 폭만큼 옆으로 움직이던 것(PC). */
html { scrollbar-gutter: stable; }
/* 로그인한 휴대폰 화면은 회중 이름만(전처럼), PC 에서는 이름 왼쪽에 로고(사용자 요청). */
@media (max-width: 899px) { .brand.no-mark .brand-mark { display:none; } }
@media (min-width: 900px) { body:not(.auth-page) .brand .brand-mark { width:40px; height:40px; flex-shrink:0; } }

/* 「봉사 조직」 단추는 초록(사용자 요청) — 관리 셸의 .btn 색보다 앞서게 범위를 좁혀 둔다. */
.scroll .btn.btn-org { background:var(--good); border-color:var(--good); color:#fff; }
.scroll .btn.btn-org:hover { background:var(--good-ink); border-color:var(--good-ink); color:#fff; }
/* 구역 고르개 — 찾는 칸·찾은 단추는 한 줄 전체, 그 아래 시·구(2) · 구역(3)을 늘 한 줄에(사용자 요청).
   .field 의 width:100% 때문에 구역 칸이 다음 줄로 밀리던 것을 격자로 고정한다. */
.area-pick { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 6px; }
.area-pick > .area-pick-search, .area-pick > .area-pick-hits { grid-column: 1 / -1; }
.area-pick > select { width: 100%; min-width: 0; }
/* 구역 번호는 어디서나 파란 표(.badge) — 제목 위 작은 줄·이름 앞에서도 같은 모양(사용자 요청). */
.eyebrow .badge, .map-name .badge, .rv-addr .badge, .my-terr-notice .badge, .group-extra .badge { display: inline-block; vertical-align: 1px; line-height: 1.35; }
.map-sub .badge { display: inline-block; vertical-align: 1px; line-height: 1.35; font-size: 10.5px; padding: 1px 6px; }

/* 메뉴 — 내 정보 카드(사용자 요청): 「정보 수정」 은 옅은 단추, 「내 정보 보기」 는 단추 모양 머리(펼치면 옅은 파랑),
   안은 이름표·값 칸 — 휴대폰 둘, PC 넷. 휴대폰 전용으로만 꾸며져 PC 에서 맨 글자로 보이던 것. */
.profile-card { padding-bottom: 18px; }
.profile-edit { flex-shrink: 0; padding: 9px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; text-decoration: none; }
.profile-edit:hover { background: var(--accent); color: #fff; }
.profile-details { border-top: 0; margin-top: 14px; }
.profile-details > summary.profile-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; list-style: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; }
.profile-details > summary.profile-toggle::after { content: none; }
.profile-details > summary::-webkit-details-marker { display: none; }
.profile-details > summary.profile-toggle > svg:first-child { color: var(--accent); }
.profile-caret { color: var(--muted); transition: transform .15s ease; }
.profile-details[open] > summary.profile-toggle { background: var(--accent-soft); border-color: var(--accent-soft); }
.profile-details[open] .profile-caret { transform: rotate(180deg); }
.profile-details dl.profile-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.profile-details dl.profile-facts > .profile-fact { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft);
  border-radius: 12px; background: var(--surface-2, var(--soft)); font-size: 14px; }
.profile-details .profile-fact dt { width: auto; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.profile-details .profile-fact dd { margin: 0; min-width: 0; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.profile-details .profile-fact dd a { color: var(--accent); text-decoration: none; }
.profile-roles { display: flex; flex-wrap: wrap; gap: 4px; }
.profile-roles .chip { height: 24px; padding: 0 9px; font-size: 12px; font-weight: 600; }
@media (min-width: 900px) { .profile-details dl.profile-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 대회 장소 — 천안 대회회관·송도컨벤시아, 주소를 누르면 길안내. */
.assembly-venue { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0; font-size: 13px; }
.assembly-venue > svg { color: var(--accent); flex-shrink: 0; }
.assembly-venue a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* 구역 번호 — 동그란 표(오늘 「내 배정」·「이 날 맡은 구역」·봉사 조직). 누르면 구역 카드(사용자 요청 2026-10-06) */
.tnum { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:22px; padding:0 8px;
  border-radius:999px; background:var(--accent); color:var(--surface); font-family:var(--font-mono); font-size:11.5px;
  font-weight:700; line-height:1; letter-spacing:.01em; flex-shrink:0; vertical-align:1px; }
.terr-link { display:inline-flex; align-items:center; gap:6px; min-width:0; color:var(--ink); text-decoration:none; font-weight:600; }
.terr-link:hover .terr-link-name, .terr-link:focus-visible .terr-link-name { text-decoration:underline; }
.terr-link-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.terr-link-range { font-size:11.5px; font-weight:700; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:2px 7px; white-space:nowrap; }

/* 집회 줌 단추 — locked(시작 30분 전까지)·ended(1시간 45분 뒤)는 회색·못 누름, live 는 원래 색.
   봉사 모임 줌 단추 — 이르면 회색(누를 수 있음), 시작 20분 전~20분 뒤 지금 색, 인도자가 알리면 파랑, 20분 뒤면 회색·못 누름 */
.zoom-join-btn.zoom-early, .zoom-join-btn.zoom-locked, .zoom-join-btn.zoom-ended { background:#E3E7EB !important; color:#7A848E !important; border-color:#E3E7EB !important; box-shadow:none !important; }
.zoom-join-btn.zoom-notified { background:#2F6FB5 !important; color:#fff !important; border-color:#2F6FB5 !important; }
.zoom-join-btn.zoom-locked, .zoom-join-btn.zoom-ended { pointer-events:none; cursor:default; opacity:.85; }

/* 임시·특별·이름을 바꾼 봉사 모임 — 카드 맨 위 제목 줄 */
.event-title-line { flex-basis:100%; order:-1; font-size:15px; font-weight:700; color:var(--accent); line-height:1.3; margin-bottom:2px; }
.event-card-head:has(.event-title-line), .session-head-row:has(.event-title-line) { flex-wrap:wrap; }
/* 한 번만 신청(오전만) — 「오」 대신 작은 해 그림 */
.new-mark.am-only .sun-mark { width:11px; height:11px; vertical-align:-1px; color:#8A5A1E; }

/* 신청자 이름 칩 — 한 줄에 넷, 모두 같은 크기. N·해 표는 칩 오른쪽 아래에 작게(이름이 길어지지 않게, 사용자 요청 2026-10-07) */
.attendee-grid { display:grid !important; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px !important; }
.attendee-grid > .chip { position:relative; min-width:0; width:100%; height:30px; min-height:30px; padding:0 8px; gap:4px; justify-content:center; overflow:visible; white-space:nowrap; box-sizing:border-box; }
.attendee-grid > .chip .n { flex:none; }
.attendee-grid > .chip .chip-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attendee-grid > .chip .new-mark { position:absolute; right:5px; top:50%; bottom:auto; transform:translateY(-50%); margin:0; font-size:8px; line-height:1; vertical-align:baseline; pointer-events:none; }
.attendee-grid > .chip .new-mark.am-only .sun-mark { width:9px; height:9px; vertical-align:0; }
@media (min-width: 900px) { .attendee-grid { grid-template-columns:repeat(6, minmax(0, 1fr)); } }
.attendee-grid > :not(.chip) { grid-column:1 / -1; }
/* 해 그림은 갈색 — 노랑은 칩 위에서 잘 안 보였다(사용자 요청) */
.new-mark.am-only, .new-mark.am-only .sun-mark { color:#8A5A1E; }

/* 카드 위 색 띠(오늘·봉사) — 봉사 오전 파랑 · 오후 초록 · 저녁 분홍 · 정기가 아닌 봉사 노랑, 집회 초록, 공지 분홍(사용자 요청 2026-10-07) */
.card.tone-am, .card.tone-pm, .card.tone-eve, .card.tone-special, .card.tone-meeting, .card.tone-notice { border-top-width:4px !important; border-top-style:solid !important; }
.card.tone-am { border-top-color:#2F6FB5 !important; }
.card.tone-pm, .card.tone-meeting { border-top-color:#3F8F4A !important; }
.card.tone-eve, .card.tone-notice { border-top-color:#D9488F !important; }
.card.tone-special { border-top-color:#E3B21C !important; }
/* 봉사 화면 카드 안쪽 여백을 오늘과 같게 */
.service-session { padding:18px !important; }

/* 제목 줄이 있는 봉사 카드 머리 — 제목은 첫 줄, 시각·장소·인원은 다음 줄(한 줄로 몰아 장소가 안 보이던 것) */
.event-card > summary.event-card-head:has(.event-title-line), .service-session > summary.session-head-row:has(.event-title-line) { flex-wrap:wrap !important; row-gap:8px; }
/* 장소 칩 — 좁아도 글자 네 자까지는 보이게 */
.event-card-head > .place-nav, .session-head-row > .place-nav { min-width:calc(24px + 4.4em); }
/* 카드 밖 모임 안내 */
.session-notice { margin-top:8px; }

/* 집단별로 표시 — 그 자리에서 바꾸는 단추 */
.grp-toggle { border:0; background:none; padding:0; gap:6px; cursor:pointer; font:inherit; color:inherit; }
.grp-view { display:flex; flex-direction:column; gap:10px; }
.grp-view[hidden] { display:none; }
.attendee-grid[hidden] { display:none !important; }
/* 해 표 — 몇 px 오른쪽으로, 칩 색 위에서도 잘 보이게 흰 동그라미 위 진한 주황(사용자 요청) */
.attendee-grid > .chip .new-mark.am-only { right:2px; width:13px; height:13px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.attendee-grid > .chip .new-mark.am-only, .attendee-grid > .chip .new-mark.am-only .sun-mark { color:#C25400; }
.attendee-grid > .chip .new-mark.am-only .sun-mark { width:10px; height:10px; }

/* 오전만·오후만 — 칩 둥근 테두리 위쪽에만 색 호(시안 D, 사용자 선택 2026-10-08). 오전 주황 · 오후(새로 온 사람) 남색.
   <i class="time-dot"> 는 화면낭독용 글자만 남기고 그리지 않는다 — 호는 칩의 ::before 로. */
.time-dot { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.chip:has(> .time-dot) { position:relative; }
.chip:has(> .time-dot)::before { content:""; position:absolute; inset:0; border-radius:999px; border:2px solid transparent; pointer-events:none; }
.chip:has(> .time-dot.am)::before { border-top-color:#D97706; }
.chip:has(> .time-dot.pm)::before { border-top-color:#2E3F8F; }
/* 러시아어·영어 화면 — 이름이 길어 4칸에 안 들어가면 잘리지 않게 이름 길이만큼(한 줄에 넷보다 적어도 된다, 사용자 요청) */
html:not([lang|="ko"]) .attendee-grid { display:flex !important; flex-wrap:wrap; }
html:not([lang|="ko"]) .attendee-grid > .chip { width:auto; padding:0 16px 0 10px; }
html:not([lang|="ko"]) .attendee-grid > .chip .chip-name { overflow:visible; text-overflow:clip; }
html:not([lang|="ko"]) .attendee-grid > :not(.chip) { flex-basis:100%; }
/* 두 자리 번호·네 글자 이름 칩 — 칸에 다 들어가게 조금 촘촘히(「10 이하늘A」, 사용자 요청) */
html[lang|="ko"] .attendee-grid > .chip.tight { padding:0 4px; gap:2px; }
html[lang|="ko"] .attendee-grid > .chip.tight .n { font-size:9.5px; }
html[lang|="ko"] .attendee-grid > .chip.tight .chip-name { font-size:12px; letter-spacing:-.04em; }

/* 알림 내역 */
.notify-history-head { align-items:center; }
.notify-history-head form { margin:0; }
.notify-day { gap:0; padding-top:12px; padding-bottom:6px; }
.notify-day h2 { margin:0 0 6px; }
.notify-item { display:flex; flex-direction:column; gap:2px; padding:9px 0; border-top:1px solid var(--line); color:var(--ink); text-decoration:none; }
.notify-item:first-of-type { border-top:0; }
.notify-item-top { display:flex; align-items:center; gap:6px; }
.notify-cat { font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--soft); color:var(--muted); }
.notify-cat.c-organize { background:#E5F2E8; color:#2E7D4F; }
.notify-cat.c-zoom { background:#E3EEFF; color:#1F5FBF; }
.notify-cat.c-meetings { background:#F1E8F8; color:#6B3FA0; }
.notify-cat.c-conductor { background:#FDEBD3; color:#9A4A06; }
.notify-cat.c-requests { background:#FBE5E5; color:#B5413A; }
.notify-time { margin-left:auto; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
.notify-title { font-size:14px; font-weight:500; }
.notify-body { font-size:12.5px; color:var(--muted); line-height:1.45; }
.notify-item.unread .notify-title { font-weight:700; }
.notify-item.unread .notify-title::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:6px; vertical-align:2px; }
.menu-group > a .menu-count { height:20px; font-size:11px; padding:0 7px; margin-left:6px; vertical-align:1px; }
.menu-group > a > span:first-child { display:inline-flex; align-items:center; }
.notify-tabs { margin:0 0 4px; }
/* 숨김(테스트) 계정 — 보기만 된다는 띠와 HTMX 로 막혔을 때 잠깐 뜨는 안내(HiddenReadOnlyMiddleware). */
.readonly-strip { margin:0 0 10px; padding:8px 12px; border-radius:10px; background:var(--line-soft); color:var(--muted); font-size:13px; }
.readonly-strip.is-blocked { background:var(--warn-soft); color:var(--warn-ink); font-weight:600; }
/* 운영자 둘러보기 띠(base.html) — 숨김 계정 띠와 같은 자리, 오른쪽에 「나가기」. */
.platform-strip { display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--warn-soft); color:var(--warn-ink); font-weight:600; }
.platform-strip button { flex:none; padding:4px 12px; border:0; border-radius:8px; background:var(--warn-ink); color:var(--surface); font:inherit; font-size:12.5px; cursor:pointer; }
.readonly-toast { position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:1000; max-width:calc(100% - 32px); padding:10px 16px; border-radius:10px; background:var(--warn-soft); color:var(--warn-ink); font-size:13.5px; font-weight:600; box-shadow:0 4px 16px rgba(0,0,0,.15); }

/* 구역 주소 줄 — 주소 복사 단추와 길안내(차량/걷기) 고르기(2026-10-10) */
.addr-copy { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; flex-shrink:0; }
.addr-copy:hover, .addr-copy:focus-visible { background:var(--soft); color:var(--ink); }
.nav-pick { position:relative; flex-shrink:0; }
.nav-pick > summary { list-style:none; cursor:pointer; }
.nav-pick > summary::-webkit-details-marker { display:none; }
.nav-pick-menu { position:absolute; right:0; top:calc(100% + 4px); z-index:40; display:flex; flex-direction:column; min-width:132px; padding:4px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 6px 20px rgba(0,0,0,.14); }
.nav-pick-menu a { display:flex; align-items:center; gap:8px; min-height:42px; padding:0 12px; border-radius:9px; color:var(--ink); font-weight:600; font-size:14px; text-decoration:none; }
.nav-pick-menu a:hover, .nav-pick-menu a:focus-visible { background:var(--soft); }
.nav-pick-note { padding:6px 12px 8px; font-size:11.5px; color:var(--muted); line-height:1.35; }
.copy-toast { position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:1000; padding:9px 16px; border-radius:10px; background:var(--ink); color:var(--surface); font-size:13.5px; font-weight:600; box-shadow:0 4px 16px rgba(0,0,0,.18); }

/* 운영자(/platform/) — 회중 목록 · 회중 만들기/수정. 폰에서는 표만 가로로 밀린다. */
.platform-page h1 { margin:0 0 6px; }
.platform-page .row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.platform-page .row .grow { flex:1; }
.platform-table-wrap { overflow-x:auto; margin-top:12px; }
.platform-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.platform-table th, .platform-table td { padding:8px 6px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:top; white-space:nowrap; }
.platform-table th { color:var(--muted); font-weight:600; font-size:12.5px; }
.platform-actions { display:flex; gap:6px; }
.platform-form { display:grid; gap:12px; margin-top:12px; }
.platform-field { display:grid; gap:4px; font-weight:600; font-size:14px; }
.platform-field input, .platform-field select { font:inherit; font-weight:400; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); }
.platform-error { color:var(--danger-ink); font-weight:600; }