/* 목업(docs/디자인확정본_목업.html)의 <style> 을 스크립트로 추출한 것이다.
   손으로 옮기지 않는다 — 색 하나만 잘못 베껴도 '디자인 확정본'이 조용히 어긋난다.
   뺀 것은 데모용 액자(.stage/.masthead/.deck/.phone/.screen/.statusbar)와
   콘솔 미리보기(.console*)뿐이다. 콘솔은 7단계에서 진짜 화면으로 만든다.

   아래 '앱 셸' 절만 이 프로젝트가 새로 쓴 것이다. 목업의 375x718 액자를
   실제 뷰포트로 바꾸고, 목업에 없던 로그인·가입 화면을 토큰만으로 짠다. */

/* ================= 앱 셸 ================= */
*{margin:0;padding:0;box-sizing:border-box;}
html{height:100%;}
body{height:100dvh;background:var(--page);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Pretendard','Noto Sans KR','Malgun Gothic',sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;}
.screen{height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;
  position:relative;background:var(--page);
  /* 홈 인디케이터 자리를 화면이 통째로 비워 둔다. 이 자리는 본문이 아니라 페이지 배경만
     남고, 하단바는 그 위에 앉는다 — 웹(값 0)과 아이폰이 같은 모양이 된다.
     덮개를 덧대지 않는 이유: 스크롤 영역이 애초에 거기까지 가지 않는 게 맞다. */
  padding-bottom:env(safe-area-inset-bottom);}
.topzone{background:var(--card);padding-top:env(safe-area-inset-top);}
.appbar{padding-top:16px;}

/* 게시글 본문 — 목업의 *{margin:0} 이 <p> 여백까지 없애므로 문단 간격을 되살린다.
   목업에는 본문(상세) 화면이 없어서 이 규칙도 없었다. */
.card .body p + p{margin-top:11px;}

/* 편집기의 「• 목록」·「1. 번호」가 만든 것. **콘솔 편집기(admin.css)에는 들여쓰기 규칙이
   있었는데 여기에는 없었다** — 전역 리셋이 padding 을 지워서 집행부가 쓰면서 본 모양과
   조합원이 읽는 모양이 달랐다(2026-08-31). 글머리표가 상자 밖으로 나가 보이지도 않는다.
   **쓰는 화면과 읽는 화면이 어긋나면 편집기를 믿을 수 없다.** */
.card .body ul,.card .body ol{padding-left:20px;}
.card .body li{margin-top:5px;}
.card .body li::marker{color:var(--meta);}
.card .body p + ul,.card .body p + ol{margin-top:8px;}
.card .body ul + p,.card .body ol + p{margin-top:11px;}
/* 링크도 마찬가지다 — 편집기에 「링크」 버튼이 있는데 본문에서는 본문색 그대로였다 */
.card .body a{color:var(--green-deep);font-weight:700;}

/* QR 은 SVG 에 픽셀 폭이 박힌 채로 나온다 — `qrsvg.py` 가 인쇄에 쓰라고 실제 크기를 준다.
   담는 상자만 좁히면 SVG 는 제 폭으로 펴져 카드 밖으로 나가고, 화면이 가로로 밀린다
   (아이폰에서 실제로 그랬다). **상자가 아니라 SVG 를 눌러야 한다.** */
.qrbox{width:min(240px,100%);margin:18px auto 0;}
.qrbox svg{display:block;width:100%;height:auto;}

/* 글자로 찍은 기호를 그림으로 바꾼 자리에 붙인다.
   **본문 폰트에 없는 기호는 다른 폰트로 떨어진다** — 크로미움에게 물어 확인했다
   (⋮ ▦ ⚠ ☑ ☐ ✕ ↗ 가 그랬다. 「」··—→① 은 멀쩡했다). 떨어지면 굵기·기준선이
   옆 한글과 따로 놀아 「폰트가 깨졌다」로 보인다. 아이폰은 떨어지는 폰트가 다를 뿐
   같은 글자에서 같은 일이 난다. **그림은 폰트를 타지 않으므로 기기가 달라도 같다.**
   크기는 글자 크기(em)를 따르고 색은 글자색(currentColor)을 따른다. */
.gi{width:1.05em;height:1.05em;vertical-align:-.14em;}

/* ================= 로그인·가입 (목업에 없는 화면 — 토큰만 쓴다) ================= */
body.auth-page{display:flex;align-items:center;justify-content:center;padding:24px;height:auto;min-height:100dvh;}
.auth{width:100%;max-width:360px;}
/* 로그인 화면만 워드마크를 세운다. 초대코드 가입·접수완료는 한글 로고 그대로다. */
.auth .logo{font-size:26px;font-weight:900;letter-spacing:-.03em;text-align:center;}
.auth .logo .accent{color:var(--green-deep);}
/* 워드마크는 잉크에 맞춰 잘린 SVG 라 여기 준 폭이 곧 눈에 보이는 폭이다(make_icons.py).
   아래 여백 22px + .lead 의 8px = 30px 이 보호 영역이다
   — 「사방으로 n 글자 높이만큼」이 170px 폭에서 29.6px 이다. */
.auth .wordmark{display:block;width:170px;height:auto;margin:0 auto 22px;}
.auth .lead{font-size:13.5px;color:var(--sub);text-align:center;margin:8px 0 26px;line-height:1.6;}
.auth form{background:var(--card);border-radius:20px;padding:22px 20px;box-shadow:0 1px 3px rgba(25,31,40,.03);}
.auth label{display:block;font-size:12.5px;font-weight:700;color:var(--sub);margin:0 2px 6px;}
.auth .gap{margin-top:14px;}
.auth .alt{display:block;text-align:center;font-size:13px;font-weight:700;color:var(--sub);text-decoration:none;padding:16px 0 0;}
.err{background:var(--b-nego-bg);color:var(--b-nego-tx);font-size:12.5px;font-weight:700;border-radius:10px;padding:10px 12px;margin-bottom:12px;}

/* ================= 이하 목업 원문 ================= */
:root{
  --green:#00C471;
  --green-deep:#00A85C;
  --green-dark:#0B3D2E;
  --green-tint:#E8F9F0;
  --page:#F7F8FA;
  --card:#FFFFFF;
  --ink:#191F28;
  /* 회색 두 칸을 **두 단계씩 진하게** 옮겼다(2026-08-31 운영자 지시, 두 번에 걸쳐).
     옛 --meta(#8B95A1)는 흰 바탕에서 3.04:1 로 WCAG AA(4.5:1)에 못 미쳤다 —
     조합원 연령대를 생각하면 「잘 안 보인다」가 나올 값이다. 색을 새로 만들지 않고
     **목업의 회색 램프에서 각각 두 칸씩 내렸다**: 7.11:1 · 11.00:1 로 넉넉히 넘는다.
     둘을 함께 내리므로 「본문 / 부가 정보」의 층은 그대로다.
     목업(docs/디자인확정본_목업.html)·CI명세서의 토큰도 같이 고쳤다 — 어긋나면 안 된다. */
  --sub:#333D4B;
  --meta:#4E5968;
  --divider:#F2F4F6;
  --b-notice-bg:#F2F4F6; --b-notice-tx:#4E5968;
  --b-nego-bg:#FFEEEE;  --b-nego-tx:#F04452;
  --b-event-bg:#FFF3E0; --b-event-tx:#F08000;
  --b-fin-bg:#E8F9F0;   --b-fin-tx:#00A85C;
}
/* ---------- PHONE ---------- */
.topzone{background:var(--card);}
.appbar{display:flex;align-items:center;gap:8px;padding:8px 18px 12px;}
.logo{font-size:20px;font-weight:900;letter-spacing:-.03em;}
.logo .accent{color:var(--green-deep);}
.appbar .sub-name{font-size:11px;color:var(--meta);font-weight:600;margin-top:3px;}
.topicons{margin-left:auto;display:flex;gap:6px;}
.topico{position:relative;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:17px;cursor:pointer;}
/* 「‹ 라벨」은 **통째로** 눌린다. 화살표만 눌리면 글자를 누른 사람에게는 아무 일도
   일어나지 않는데, 폰에서 34px 원을 정확히 짚기가 쉽지 않다(2026-08-31 운영자 지적).
   여는 길은 `<a>` 다 — 길게 눌러 새 탭으로 열거나 JS 가 죽어도 갈 곳이 있어야 한다. */
.abback{display:flex;align-items:center;gap:8px;min-width:0;
  text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;}
.abback:active{opacity:.55;}
.topico.bell::after{content:"";position:absolute;top:5px;right:6px;width:7px;height:7px;
  border-radius:50%;background:#F04452;border:1.5px solid var(--card);}
/* `--vz` 는 글씨 크기 설정이 정한다(MY 「화면 설정」·게시글 알약, base.html).
   없으면 1 — 아무 일도 안 일어난다. */
.view{flex:1;overflow-y:auto;padding:0 14px 14px;scrollbar-width:none;zoom:var(--vz,1);}

/* **글씨 크기를 안 받는 자리.** `zoom` 은 겹쳐 곱해지므로 역수를 주면 그 안만 1로 돌아온다.
   근무표 달력이 첫 사례다 — 한 달 7칸이 폭을 나눠 갖는데 배지에 최소 폭이 있어서,
   글씨를 키우면 격자가 담는 칸보다 넓어져 **토요일 열이 잘려 나간다**(실측: 최대 크기에서
   격자 270px / 담는 칸 240px). 좁아진 달력은 키운 보람도 없다.

   **새 화면을 만들 때의 규칙**: 폭이 고정된 격자·표·좌우로 꽉 찬 배치는 글씨가 커지면
   틀이 깨진다. 그런 자리에는 `no-zoom` 을 붙이고 **왜 뺐는지 주석으로 남긴다.**
   기본은 「적용」이다 — 빼는 쪽이 예외이고, 예외에는 이유가 있어야 한다. */
.no-zoom{zoom:calc(1 / var(--vz, 1));}
.view::-webkit-scrollbar{display:none;}
.pane{display:none;animation:fadein .22s ease;}
.pane.on{display:block;}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .pane{animation:none;}
  .scanline{animation:none !important;}
}
/* ---------- HOME : BANNER CAROUSEL ---------- */
.bn-wrap{position:relative;margin:0 -14px;}
.bn-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}
.bn-track::-webkit-scrollbar{display:none;}
.bslide{flex:0 0 100%;scroll-snap-align:start;padding:22px 20px 24px;min-height:150px;
  display:flex;align-items:center;gap:10px;cursor:pointer;}
.bslide .bl{flex:1;}
.bslide .pill{display:inline-block;font-size:11.5px;font-weight:800;color:#fff;
  padding:4px 11px;border-radius:999px;margin-bottom:10px;}
.bslide h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.38;}
.bslide h3 .kw{color:inherit;}
.bslide .bdate{font-size:12.5px;color:var(--sub);margin-top:9px;font-weight:600;}
.bslide .bart{font-size:52px;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.12));}
.bs-nego{background:#FFE9E6;}
.bs-nego .pill{background:#F04452;}
.bs-nego h3 .kw{color:#E03131;}
.bs-notice{background:#E8F0FE;}
.bs-notice .pill{background:#3182F6;}
.bs-notice h3 .kw{color:#1B64DA;}
.bs-event{background:#FFF1D6;}
.bs-event .pill{background:#F08000;}
.bs-event h3 .kw{color:#E67700;}
.bs-empty{background:var(--divider);justify-content:center;text-align:center;
  font-size:13px;color:var(--meta);line-height:1.6;font-weight:600;}
/* 집행부 직접 작성 배너 */
.bs-custom{background:var(--green-tint);}
.bs-custom .pill{background:var(--green-deep);}
.photo-thumb{width:86px;height:86px;border-radius:20px;flex-shrink:0;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 75% 20%, rgba(255,235,120,.85) 0 14%, transparent 15%),
    linear-gradient(160deg,#8FD3B0 0%,#2E9E6B 48%,#14563C 100%);
  box-shadow:0 4px 10px rgba(20,86,60,.25);}
.photo-thumb::after{content:"";position:absolute;left:12%;right:12%;bottom:-6%;height:46%;
  background:radial-gradient(ellipse at 30% 100%, #0E3D2A 0 38%, transparent 40%),
             radial-gradient(ellipse at 62% 100%, #145238 0 34%, transparent 36%),
             radial-gradient(ellipse at 90% 100%, #0E3D2A 0 30%, transparent 32%);}
.bslide.photo-full{position:relative;background:
    radial-gradient(circle at 82% 16%, rgba(255,235,120,.75) 0 9%, transparent 10%),
    linear-gradient(155deg,#5FBF93 0%,#1F8659 46%,#0E3D2A 100%);}
.bslide.photo-full::before{content:"";position:absolute;inset:0;background:rgba(10,32,23,.38);}
.bslide.photo-full .bl{position:relative;z-index:1;}
.bslide.photo-full .pill{background:rgba(255,255,255,.24);}
.bslide.photo-full h3{color:#fff;}
.bslide.photo-full .bdate{color:rgba(255,255,255,.85);}
/* composer inputs */
.inp{width:100%;border:1.5px solid var(--divider);border-radius:10px;padding:9px 11px;
  font-size:13px;font-weight:600;font-family:inherit;color:var(--ink);margin-bottom:7px;background:#fff;}
.inp:focus{outline:none;border-color:var(--green);}
.bn-count{position:absolute;right:14px;bottom:12px;background:rgba(25,31,40,.45);color:#fff;
  font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;pointer-events:none;}
/* icon shortcuts card */
.shortcuts{display:flex;background:var(--card);border-radius:20px;padding:18px 8px 15px;
  margin-top:14px;box-shadow:0 1px 3px rgba(25,31,40,.03);}
.sc{flex:1;text-align:center;cursor:pointer;}
.sc .si{font-size:29px;line-height:1;}
.sc .sl{font-size:12px;font-weight:700;margin-top:7px;letter-spacing:-.01em;}
/* dark vote promo */
.promo{display:flex;align-items:center;margin-top:12px;border-radius:20px;padding:18px 20px;
  background:linear-gradient(105deg,var(--green-dark) 30%,var(--green-deep));color:#fff;cursor:pointer;
  box-shadow:0 4px 14px rgba(11,61,46,.28);}
.promo .pt h3{font-size:16.5px;font-weight:800;letter-spacing:-.01em;}
.promo .pt h3 .em{color:#A5F3CB;}
.promo .pt p{font-size:12.5px;opacity:.85;margin-top:4px;font-weight:600;}
.promo .dcirc{margin-left:auto;flex-shrink:0;width:62px;height:62px;border-radius:50%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.promo .dcirc .dd{font-size:17px;font-weight:900;color:var(--green-deep);line-height:1;}
.promo .dcirc .dl{font-size:9.5px;font-weight:700;color:var(--sub);margin-top:2px;}
.promo.p-event{background:linear-gradient(105deg,#8A4B00 30%,#F08000);
  box-shadow:0 4px 14px rgba(240,128,0,.28);}
.promo.p-event .pt h3 .em{color:#FFE2BD;}
.promo.p-event .dcirc .dd{color:#F08000;}
.promo.p-nego{background:linear-gradient(105deg,#16264D 30%,#3182F6);
  box-shadow:0 4px 14px rgba(49,130,246,.28);}
.promo.p-nego .pt h3 .em{color:#BDD7FF;}
.promo.p-nego .dcirc .dd{color:#3182F6;}
/* news section */
.news{background:var(--card);border-radius:20px;padding:18px 18px 8px;margin-top:12px;
  box-shadow:0 1px 3px rgba(25,31,40,.03);}
.news-head{font-size:16.5px;font-weight:800;letter-spacing:-.02em;}
.news-head .accent{color:var(--green-deep);}
.nchips{display:flex;gap:6px;overflow-x:auto;margin:12px 0 4px;scrollbar-width:none;}
.nchips::-webkit-scrollbar{display:none;}
.nchip{flex-shrink:0;padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:700;
  background:var(--page);border:none;color:var(--sub);cursor:pointer;white-space:nowrap;font-family:inherit;}
.nchip.on{background:var(--ink);color:#fff;}
.nrow{display:flex;gap:10px;padding:13px 2px;border-bottom:1px solid var(--divider);cursor:pointer;align-items:flex-start;}
.nrow:last-of-type{border-bottom:none;}
.nrow .rank{font-size:14px;font-weight:800;color:#F04452;width:14px;flex-shrink:0;padding-top:2px;}
.nrow .nc{flex:1;min-width:0;}
.nrow .nc .rbadge{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:5px;margin-right:5px;vertical-align:1px;}
.nrow .nc .nt{font-size:14px;font-weight:700;letter-spacing:-.01em;display:inline;line-height:1.4;}
.nrow .nc .nm{font-size:11.5px;color:var(--meta);margin-top:5px;}
.nrow .thumb{width:46px;height:46px;border-radius:10px;background:var(--b-event-bg);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:21px;}
.nmore{text-align:center;font-size:13px;font-weight:700;color:var(--sub);padding:13px;cursor:pointer;}
.hide{display:none !important;}
/* board / shared */
.sect-head{display:flex;align-items:baseline;margin:18px 6px 9px;}
.sect-head .t{font-size:15px;font-weight:800;letter-spacing:-.01em;}
.card{background:var(--card);border-radius:18px;padding:17px 18px;margin-bottom:10px;
  box-shadow:0 1px 3px rgba(25,31,40,.03);}
.card h3{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.42;}
.card .body{font-size:13.5px;color:var(--sub);line-height:1.58;margin-top:6px;}
.card .meta{font-size:12px;color:var(--meta);margin-top:11px;}
.badge{display:inline-block;font-size:11.5px;font-weight:700;
  padding:4px 9px;border-radius:6px;margin-bottom:9px;margin-right:4px;}
.listgroup{background:var(--card);border-radius:18px;margin-bottom:10px;
  box-shadow:0 1px 3px rgba(25,31,40,.03);overflow:hidden;}
.listrow{padding:14px 18px;border-bottom:1px solid var(--divider);cursor:pointer;}
.listrow:last-child{border-bottom:none;}
.listrow .badge{margin-bottom:7px;}
.listrow h3{font-size:14.5px;font-weight:600;letter-spacing:-.01em;line-height:1.4;}
.listrow .meta{font-size:12px;color:var(--meta);margin-top:5px;}
.chips-wrap{background:var(--card);margin:0 -14px 12px;padding:2px 14px 12px;
  border-bottom:1px solid var(--divider);}
.chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex-shrink:0;padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;
  background:var(--page);border:none;color:var(--sub);cursor:pointer;white-space:nowrap;font-family:inherit;}
.chip.on{background:var(--ink);color:#fff;}
/* 게시판형에서는 칩이 링크다(서버가 거른다) — 버튼과 같아 보여야 한다 */
a.chip{display:inline-block;text-decoration:none;-webkit-tap-highlight-color:transparent;}

/* ---------- 전통 게시판형 목록 (partials/board_list.html) ----------
   PC 게시판처럼 한 줄에 다 넣지 않는다 — 폰 390px 에서는 제목이 열다섯 자쯤에서 잘린다.
   **제목을 한 줄로 크게 두고 정보는 아랫줄에** 작게 붙인다. */
.blist{background:var(--card);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 3px rgba(25,31,40,.03);}
.brow{display:flex;gap:11px;padding:13px 15px;text-decoration:none;color:inherit;
  border-top:1px solid var(--divider);-webkit-tap-highlight-color:transparent;}
.brow:first-child{border-top:0;}
.brow:active{background:var(--page);}
/* 번호 칸의 폭을 고정한다 — 한 자리와 세 자리가 섞여도 제목의 왼쪽 선이 흔들리지 않는다 */
.brow .no{flex:none;width:34px;padding-top:1px;text-align:center;font-size:12px;
  font-weight:700;color:var(--meta);font-variant-numeric:tabular-nums;}
.brow.pinned .no{font-size:11px;font-weight:800;color:var(--green-deep);}
.brow.pinned .bt{font-weight:800;}
.brow .bmain{flex:1;min-width:0;}
/* 제목은 **두 줄까지**. 아주 긴 제목 하나가 줄 높이를 셋넷으로 늘리면 목록의 리듬이 깨진다 */
.brow .bt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:14.5px;font-weight:600;letter-spacing:-.02em;line-height:1.42;color:var(--ink);}
.brow .bm{display:block;margin-top:5px;font-size:11.5px;color:var(--meta);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.brow .bm i{font-style:normal;font-weight:800;}
/* 사진이 있는 줄의 오른쪽 작은 네모. **줄 높이를 늘리지 않는 크기다** — 제목 한 줄과
   아랫줄을 합친 높이가 44px 안팎이라 거기에 맞춘다. 세로로 긴 지면이라 위쪽을 보인다. */
.brow .bthumb{position:relative;flex:none;width:44px;height:44px;align-self:center;
  border-radius:9px;overflow:hidden;background:var(--divider);}
.brow .bthumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
.brow .bthumb i{position:absolute;right:2px;bottom:2px;font-style:normal;font-size:9.5px;
  font-weight:800;color:#fff;background:rgba(25,31,40,.72);border-radius:999px;
  padding:1px 5px;line-height:1.5;}
.bempty{padding:36px 16px;text-align:center;font-size:13.5px;color:var(--meta);font-weight:600;}

/* 페이지 번호. 「3페이지에 있는 그 글」로 소통이 되는 것이 이 문법의 값이다. */
.bpage{display:flex;justify-content:center;align-items:center;gap:4px;margin:16px 0 4px;}
.bpage a,.bpage span{min-width:32px;height:32px;display:flex;align-items:center;
  justify-content:center;border-radius:9px;font-size:13px;font-weight:700;
  text-decoration:none;color:var(--sub);font-variant-numeric:tabular-nums;}
.bpage a:active{background:var(--divider);}
.bpage .on{background:var(--ink);color:#fff;}
.bpage .off{color:var(--divider);}
.card.compact-nego{padding:14px 18px;}
.card.compact-nego .body{display:none;}
.card.compact-nego h3{font-size:14.5px;font-weight:600;}
.card.compact-nego .meta{margin-top:6px;}
.fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
.fin-cell{background:var(--page);border-radius:12px;padding:12px 13px;}
.fin-cell.hl{background:var(--green-tint);}
.fin-cell .k{font-size:11.5px;color:var(--sub);}
.fin-cell .v{font-size:17px;font-weight:800;margin-top:3px;letter-spacing:-.01em;}
.fin-cell.hl .v{color:var(--green-deep);}
.fin-cell .v small{font-size:11px;font-weight:600;color:var(--sub);}
.fin-link{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:11px;
  padding:11px;border-radius:12px;background:var(--page);
  font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;}
.gal{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:11px;}
.gal div{aspect-ratio:1;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;}
.g1{background:#FFF3E0;}
.g2{background:#E8F9F0;}
.g3{background:#E8F3FF;}
.btn{display:block;width:100%;text-align:center;padding:14px;border:none;border-radius:14px;
  background:var(--green);color:#fff;font-size:14.5px;font-weight:700;cursor:pointer;margin-top:12px;font-family:inherit;}
.btn:active{background:var(--green-deep);}
.btn.gray{background:var(--page);color:var(--ink);}
.btn:disabled{background:#DFE3E8;color:#fff;cursor:default;}
.seats{display:inline-block;font-size:12px;color:var(--b-event-tx);font-weight:700;
  background:var(--b-event-bg);padding:4px 9px;border-radius:6px;margin-top:9px;}
.vote-opt{display:flex;align-items:center;gap:10px;background:var(--page);
  border:1.5px solid transparent;border-radius:14px;padding:14px 15px;margin-top:8px;
  font-size:14px;font-weight:600;cursor:pointer;}
.vote-opt .dot{width:18px;height:18px;border-radius:50%;border:2px solid #C5CBD3;flex-shrink:0;background:#fff;}
.vote-opt.sel{border-color:var(--green);background:var(--green-tint);}
.vote-opt.sel .dot{border-color:var(--green);background:var(--green);
  box-shadow:inset 0 0 0 3.5px var(--green-tint);}
.contact-row{display:flex;align-items:center;gap:12px;padding:15px 18px;
  border-bottom:1px solid var(--divider);font-size:14.5px;font-weight:600;cursor:pointer;}
.contact-row:last-child{border-bottom:none;}
.contact-row .ico{width:36px;height:36px;border-radius:12px;background:var(--page);
  display:flex;align-items:center;justify-content:center;font-size:16px;}
.contact-row .arr{margin-left:auto;color:#C5CBD3;font-weight:400;}
.qr-wrap{padding:30px 8px 8px;text-align:center;}
.finder{width:210px;height:210px;margin:18px auto;position:relative;border-radius:24px;
  background:#191F28;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.finder .qrglyph{font-size:64px;opacity:.22;color:#fff;line-height:1;}
.finder .corner{position:absolute;width:30px;height:30px;border:3.5px solid var(--green);}
.corner.tl{top:14px;left:14px;border-right:none;border-bottom:none;border-radius:10px 0 0 0;}
.corner.tr{top:14px;right:14px;border-left:none;border-bottom:none;border-radius:0 10px 0 0;}
.corner.bl{bottom:14px;left:14px;border-right:none;border-top:none;border-radius:0 0 0 10px;}
.corner.br{bottom:14px;right:14px;border-left:none;border-top:none;border-radius:0 0 10px 0;}
.scanline{position:absolute;left:16px;right:16px;height:2px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);
  animation:scan 2.2s ease-in-out infinite;}
@keyframes scan{0%,100%{top:18%;}50%{top:80%;}}
.qr-wrap h2{font-size:19px;font-weight:800;letter-spacing:-.02em;}
.qr-wrap p{font-size:13.5px;color:var(--sub);line-height:1.6;margin-top:8px;}
.qr-wrap b{color:var(--green-deep);}
.profile{display:flex;align-items:center;gap:13px;padding:10px 6px 16px;}
.avatar{width:54px;height:54px;border-radius:50%;background:var(--green-tint);color:var(--green-deep);
  display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;}
.profile .nm{font-size:18px;font-weight:800;letter-spacing:-.02em;}
.profile .dept{font-size:12.5px;color:var(--sub);margin-top:2px;}
.my-row{display:flex;align-items:center;padding:15px 18px;border-bottom:1px solid var(--divider);
  font-size:14.5px;font-weight:600;cursor:pointer;}
.my-row:last-child{border-bottom:none;}
.my-row .sub2{margin-left:auto;font-size:12.5px;color:var(--meta);font-weight:500;}
.notif-cat{display:flex;align-items:center;padding:12px 18px;font-size:14px;font-weight:600;
  border-bottom:1px solid var(--divider);}
.notif-cat:last-child{border-bottom:none;}
/* MY 의 글씨 크기 설정. 네 칸을 고르는 줄이다 — 토글과 달리 값이 넷이라 스위치로는 안 된다.
   **화면이 커지면 이 줄도 함께 커진다**(같은 `.view` 안이다) — 고른 결과가 그 자리에서
   보이는 셈이라 미리보기를 따로 두지 않았다. */
.fs-set{padding:14px 18px 16px;border-bottom:1px solid var(--divider);}
.fs-lab{font-size:14.5px;font-weight:600;margin-bottom:11px;}
.fs-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.fs-seg button{padding:10px 4px;border:1.5px solid var(--divider);border-radius:11px;
  background:var(--card);font-family:inherit;font-size:13px;font-weight:700;
  color:var(--sub);cursor:pointer;-webkit-tap-highlight-color:transparent;
  letter-spacing:-.03em;white-space:nowrap;}
.fs-seg button.on{background:var(--green-tint);border-color:var(--green);color:var(--green-deep);}
/* 고른 칸의 글자를 그 크기만큼 키운다 — 「크게」가 실제로 커 보여야 무엇을 고르는지 안다 */
.fs-seg button[data-fs="1"]{font-size:14px;}
.fs-seg button[data-fs="2"]{font-size:15px;}
.fs-seg button[data-fs="3"]{font-size:16.5px;}

.notif-cat .cbadge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;margin-right:10px;}
/* 설정 카드에 딸린 안내. **`.meta` 는 `.card` 안에서만 작아지는 규칙이라**(`.card .meta`)
   카드 밖에 그대로 쓰면 아무 스타일도 안 걸려 본문 크기 검은 글씨가 된다 — MY 화면이
   글자 벽으로 보이던 이유가 그것이었다(2026-08-27 운영자 지적).
   카드 밖에 띄우지 않고 **그 카드의 마지막 줄**로 넣는다 — 무엇에 딸린 설명인지가 자리로
   드러난다. 구분선은 윗줄이 이미 긋고 있으므로 여기서 또 긋지 않는다. */
.listgroup .hint{padding:11px 18px 13px;font-size:12px;line-height:1.6;color:var(--meta);}
.listgroup .hint b{color:var(--sub);font-weight:700;}
.toggle{margin-left:auto;width:46px;height:27px;border-radius:999px;background:#DFE3E8;
  position:relative;cursor:pointer;transition:background .15s;flex-shrink:0;}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:left .15s;}
.toggle.on{background:var(--green);}
.toggle.on::after{left:22px;}
.toggle.sm{width:40px;height:24px;}
.toggle.sm::after{width:18px;height:18px;}
.toggle.sm.on::after{left:19px;}
/* bottom-right FAB + tabbar */
.fab{position:absolute;right:16px;bottom:92px;z-index:4;
  width:54px;height:54px;border-radius:50%;background:var(--green);
  color:#fff;font-size:21px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 6px 16px rgba(0,196,113,.42);}
/* 글씨 크기 조절. 오른쪽 아래 알약 하나에 「가−」「가+」 둘을 넣는다 —
   한 손가락이 닿는 자리이고, 늘리고 줄이는 길이 함께 보여야 눌러 볼 마음이 든다. */
/* `display:flex` 가 브라우저 기본 `[hidden]{display:none}` 을 이긴다 — 숨기라고 해도
   안 숨는다. **클래스에 display 를 주면 hidden 규칙을 스스로 되살려야 한다.** */
.fsctl[hidden]{display:none;}
.fsctl{position:absolute;right:16px;bottom:92px;z-index:4;display:flex;
  background:var(--card);border-radius:999px;overflow:hidden;
  box-shadow:0 4px 14px rgba(25,31,40,.16);border:1px solid var(--divider);}
.fsctl.above-fab{bottom:156px;}   /* QR 버튼(54px)과 겹치지 않게 그 위로 */
/* 탭바가 없는 화면(게시글 상세)에서는 더 내려앉는다 — 92px 은 탭바를 피하려던 높이다 */
.fsctl.no-tabbar{bottom:calc(16px + env(safe-area-inset-bottom));}
.fsctl button{width:52px;height:44px;border:0;background:none;font-family:inherit;
  font-size:15px;font-weight:800;color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:1px;
  -webkit-tap-highlight-color:transparent;}
.fsctl button + button,.fsctl .fsback + button{border-left:1px solid var(--divider);}
/* 게시글에서만 붙는 「‹ 뒤로」. 글씨 조절과 성질이 다른 일이라 색으로 갈라 둔다 —
   같은 알약에 있어도 「나가는 것」과 「크기를 바꾸는 것」이 헷갈리면 안 된다. */
.fsctl .fsback{width:46px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;line-height:1;color:var(--green-deep);text-decoration:none;
  background:var(--green-tint);-webkit-tap-highlight-color:transparent;}
.fsctl .fsback:active{background:#D6F2E4;}
.fsctl button i{font-style:normal;font-size:13px;font-weight:700;color:var(--meta);}
.fsctl button:disabled{opacity:.32;cursor:default;}
.fsctl button:not(:disabled):active{background:var(--divider);}

.tabbar{display:flex;border-top:1px solid var(--divider);background:var(--card);padding:7px 2px 15px;}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10px;font-weight:600;color:#B0B8C1;cursor:pointer;padding-top:7px;background:none;border:none;font-family:inherit;}
.tab .ic{font-size:20px;line-height:1;filter:grayscale(1) opacity(.45);}
.tab.on{color:var(--green-deep);}
.tab.on .ic{filter:none;}
.toast{position:absolute;left:50%;bottom:100px;transform:translateX(-50%) translateY(8px);
  background:rgba(25,31,40,.94);color:#fff;font-size:13px;font-weight:600;padding:12px 18px;
  border-radius:14px;opacity:0;pointer-events:none;transition:all .25s;white-space:nowrap;z-index:5;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
/* ---------- ADMIN CONSOLE ---------- */

/* ================= 홈 화면 추가 안내 (8단계) ================= */
.install-tip{display:flex;align-items:center;gap:10px;background:var(--green-tint);
  border-radius:16px;padding:13px 15px;margin-top:12px;cursor:pointer;}
.install-tip .ic{font-size:22px;line-height:1;}
.install-tip .tx{flex:1;}
.install-tip .tx b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--green-dark);}
.install-tip .tx span{font-size:12px;color:var(--green-deep);font-weight:600;}
.install-tip .x{font-size:18px;color:var(--green-deep);opacity:.5;padding:0 2px;}

.sheet{position:fixed;inset:0;background:rgba(25,31,40,.45);display:none;z-index:50;
  align-items:flex-end;justify-content:center;}
.sheet.on{display:flex;}
.sheet .panel{background:var(--card);width:100%;max-width:520px;border-radius:22px 22px 0 0;
  padding:22px 20px calc(24px + env(safe-area-inset-bottom));max-height:86vh;overflow-y:auto;
  animation:rise .22s ease;}
@keyframes rise{from{transform:translateY(14px);opacity:.6;}to{transform:none;opacity:1;}}
@media (prefers-reduced-motion:reduce){.sheet .panel{animation:none;}}
.sheet h3{font-size:17px;font-weight:800;letter-spacing:-.02em;}
.sheet .lead{font-size:13px;color:var(--sub);line-height:1.6;margin-top:7px;}
.sheet ol{margin:16px 0 0;padding-left:0;list-style:none;counter-reset:s;}
.sheet ol li{counter-increment:s;position:relative;padding:0 0 14px 34px;font-size:13.5px;
  font-weight:600;line-height:1.55;}
.sheet ol li::before{content:counter(s);position:absolute;left:0;top:0;width:23px;height:23px;
  border-radius:50%;background:var(--green);color:#fff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;}
.sheet ol li b{color:var(--green-deep);}
.sheet .note{background:var(--page);border-radius:12px;padding:12px 14px;font-size:12.5px;
  color:var(--sub);line-height:1.6;margin-top:6px;}
.sheet .note b{color:var(--ink);}

/* 자주 묻는 질문 — 아코디언. **JS 를 쓰지 않는다**: `<details>` 가 이미 하는 일이다.
   목업에 없는 화면이라 토큰만 쓰고 새 색을 만들지 않는다(1:1 상담과 같은 규칙). */
.faq{background:var(--card);border-radius:18px;margin-top:12px;overflow:hidden;}
.faq details{border-bottom:1px solid var(--divider);}
.faq details:last-child{border-bottom:none;}
.faq summary{list-style:none;cursor:pointer;padding:15px 17px;font-size:14px;font-weight:700;
  line-height:1.5;display:flex;align-items:flex-start;gap:9px;}
.faq summary::-webkit-details-marker{display:none;}   /* 사파리의 기본 삼각형 */
.faq summary .q{color:var(--green-deep);font-weight:800;flex:none;}
.faq summary .arr{margin-left:auto;flex:none;color:var(--meta);margin-top:3px;
  transition:transform .16s ease;}
.faq details[open] summary .arr{transform:rotate(180deg);}
.faq .a{padding:0 17px 16px 38px;font-size:13.5px;color:var(--sub);line-height:1.68;
  white-space:pre-line;}          /* 답의 줄바꿈을 그대로 살린다 — 서식은 넣지 않는다 */
.hint-lead{font-size:12.5px;color:var(--meta);line-height:1.6;padding:14px 6px 0;}
.hint-lead b{color:var(--sub);}

/* 1:1 상담 말풍선. 목업에 없는 화면이라 토큰만 쓰고 새 색을 만들지 않는다. */
.talk{display:flex;flex-direction:column;gap:8px;padding:4px 0;}
.bub{max-width:78%;padding:10px 13px;border-radius:15px;font-size:14px;line-height:1.5;
     white-space:pre-wrap;word-break:break-word;}
.bub.me{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:5px;}
.bub.them{align-self:flex-start;background:var(--card);color:var(--ink);border-bottom-left-radius:5px;
          border:1px solid var(--divider);}
.bub .when{display:block;font-size:11px;opacity:.7;margin-top:5px;}
.talk-empty{text-align:center;color:var(--meta);font-size:13.5px;padding:28px 0;}

/* ================= 근무표 캘린더 (Phase 4 — 목업에 없는 화면, 토큰만 쓴다) ================= */
.cal-wrap{padding:14px 16px 26px;}
.cal-nav{display:flex;align-items:center;justify-content:space-between;padding:2px 0 12px;}
.cal-title{font-size:17px;font-weight:800;letter-spacing:-.02em;}
.cal-arrow{width:34px;height:34px;border:none;background:var(--card);border-radius:11px;
  font-size:17px;color:var(--sub);cursor:pointer;font-family:inherit;}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding-bottom:6px;}
.cal-dow span{text-align:center;font-size:11px;font-weight:700;color:var(--meta);}
.cal-dow .sun{color:#F04452;} .cal-dow .sat{color:#4C6EF5;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;background:var(--card);
  border-radius:16px;padding:6px;}
.cal-cell{position:relative;aspect-ratio:1/1.12;border:none;background:none;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0 0;
  font-family:inherit;cursor:pointer;}
.cal-cell.out{opacity:.32;}
.cal-cell.today{box-shadow:inset 0 0 0 1.5px var(--green);}
.cal-cell .dnum{font-size:11.5px;font-weight:700;color:var(--sub);line-height:1;}
.cal-cell .dbadge{min-width:26px;height:20px;border-radius:7px;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 4px;}
.cal-cell .dbadge.empty{background:var(--divider);opacity:.5;}
.cal-cell .ddot{position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;
  background:var(--green);}
.cal-sum{text-align:center;font-size:12.5px;color:var(--sub);padding:12px 0 4px;}
.cal-sum b{color:var(--ink);font-weight:800;}
.cal-legend{display:flex;flex-wrap:wrap;gap:7px;padding:8px 0 2px;}
.cal-legend .lg{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--sub);
  background:var(--card);border-radius:9px;padding:5px 9px 5px 5px;}
.cal-legend .lg i{min-width:24px;height:19px;border-radius:6px;font-size:10.5px;font-weight:800;
  font-style:normal;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.cal-legend .lg b{color:var(--meta);font-weight:600;}
.cal-wrap > .btn{margin-top:14px;}
.cal-actions{display:flex;gap:8px;margin-top:8px;}
.cal-actions .btn{margin:0;white-space:nowrap;}
/* 근무표 밑의 고지. 12px 로 이미 작았는데도 「글자 벽」으로 보였다(2026-08-27 운영자 지적)
   — 크기가 아니라 **구조가 없어서**였다. 자물쇠와 첫 줄 제목을 세워 훑어볼 수 있게 한다. */
.cal-note{background:var(--card);border-radius:14px;padding:13px 15px;margin-top:14px;
  font-size:12px;color:var(--sub);line-height:1.65;display:flex;gap:9px;}
.cal-note .gi{flex:none;width:14px;height:14px;margin-top:2px;color:var(--meta);}
.cal-note .h{display:block;margin-bottom:2px;font-size:12.5px;}
.cal-note b{color:var(--ink);}

/* 하루 시트 · 패턴 시트 */
.day-types{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px;}
.dt{border:none;border-radius:12px;padding:9px 12px;font-family:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:74px;}
.dt b{font-size:14px;font-weight:800;} .dt span{font-size:11px;opacity:.8;}
.dt.sel{box-shadow:inset 0 0 0 2px var(--green-deep);}
.day-evs{margin-top:14px;display:flex;flex-direction:column;gap:7px;}
.day-ev{display:flex;align-items:center;gap:9px;background:var(--page);border-radius:12px;
  padding:11px 13px;text-decoration:none;color:var(--ink);font-size:13px;}
.day-ev .t{font-weight:800;color:var(--green-deep);font-size:12.5px;}
.day-ev .n{font-weight:700;flex:1;}
.day-ev .p{font-size:11.5px;color:var(--meta);}
.fill-row{display:flex;gap:9px;margin-top:12px;}
.fill-row label{flex:1;font-size:11.5px;font-weight:700;color:var(--sub);}
.fin{width:100%;border:1.5px solid var(--divider);border-radius:10px;padding:8px 10px;
  font-size:14px;font-family:inherit;margin-top:5px;background:var(--card);color:var(--ink);}
.fin:focus{outline:none;border-color:var(--green);}
.fill-lab{font-size:11.5px;font-weight:700;color:var(--sub);margin-top:16px;}
.fill-seq{display:flex;flex-wrap:wrap;gap:5px;background:var(--page);border-radius:12px;
  padding:10px;min-height:44px;align-items:center;}
.fill-seq i{min-width:24px;height:20px;border-radius:6px;font-size:11px;font-weight:800;
  font-style:normal;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.fill-seq .ph{font-size:12px;color:var(--meta);}
.fp-sum{font-size:13px;color:var(--sub);margin-top:14px;line-height:1.6;}
.fp-sum b{color:var(--ink);} .fp-sum .warn{color:#F04452;}
.fp-days{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.fp-days span{font-size:11px;background:var(--page);border-radius:8px;padding:5px 8px;color:var(--sub);}
.fp-days em{font-style:normal;color:var(--meta);margin-right:5px;}
.fp-days span.more{background:var(--divider);color:var(--meta);font-weight:700;}

/* ---- 근무표 붙여넣기 ----
   미리보기 틀(.fp-*)은 패턴 채우기와 함께 쓴다 — 두 기능이 같은 말을 해야 한다.
   여기 있는 것은 붙여넣기에만 있는 것: 넣는 칸과 「못 알아들은 표기」 줄이다. */
.paste-box{width:100%;margin-top:10px;font-size:13px;line-height:1.7;resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.pu-wrap{margin-top:14px;background:var(--b-event-bg);border-radius:12px;padding:12px 13px;}
.pu-lab{font-size:12.5px;font-weight:800;color:var(--b-event-tx);margin-bottom:9px;}
.pu-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.pu-row code{flex:none;background:#fff;border-radius:7px;padding:5px 9px;font-size:12.5px;
  font-weight:700;color:var(--ink);max-width:110px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.pu-n{flex:none;font-size:11.5px;color:var(--b-event-tx);}
.pu-sel{flex:1;min-width:0;margin:0;font-size:12.5px;padding:7px 9px;}
.pu-tip{font-size:11.5px;color:var(--b-event-tx);line-height:1.55;margin-top:4px;}
.pu-tip b{color:#8A5200;}
.my-types{margin-top:18px;}
.mt-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--divider);padding:10px 2px;}
.mt-row .lg{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--sub);}
.mt-row .lg i{min-width:26px;height:20px;border-radius:6px;font-size:11px;font-weight:800;
  font-style:normal;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.mt-row .lg b{color:var(--meta);font-weight:600;}
.mt-del{border:none;background:none;font-family:inherit;font-size:12px;font-weight:700;
  color:#F04452;cursor:pointer;padding:4px 2px;}
.mate-scroll{overflow-x:auto;margin-top:14px;}
.mate-tbl{border-collapse:collapse;font-size:11px;white-space:nowrap;}
.mate-tbl th,.mate-tbl td{border:1px solid var(--divider);padding:3px 4px;text-align:center;min-width:22px;}
.mate-tbl th.nm{text-align:left;position:sticky;left:0;background:var(--card);min-width:74px;
  font-weight:700;color:var(--ink);z-index:1;}
.mate-tbl th.wk{color:#F04452;}
.mate-tbl i{font-style:normal;display:inline-block;min-width:20px;border-radius:5px;
  padding:2px 3px;font-weight:800;font-size:10px;}

/* ================= 탭바를 띄운다 · 「더보기」 말풍선 (2026-08-24 운영자 요청) =================

   목업의 탭바는 화면 바닥에 붙는 띠였다. 아이폰에서 **화면 쓸어올리기(홈 제스처)와
   겹쳐** 눌리는 일이 생겨, 바닥에서 띄우고 라운드 사각형에 담았다.
   목업 규칙은 위에 그대로 두고 여기서 덮어쓴다 — 확정본을 지우지 않는다. */

.tabbar{
  position:absolute;left:14px;right:14px;z-index:20;
  /* safe-area 는 그대로 두고 그 위의 여백만 줄인다(14 → 6px, 2026-08-25 운영자 요청).
     **이 항을 빼면 아이폰 홈 인디케이터와 다시 겹친다** — 띄운 이유가 그것이었다.
     14 → 6 → 0px 으로 두 번 내렸다. safe-area 를 건드리지 않는 한 여기가 바닥이다. */
  bottom:calc(0px + env(safe-area-inset-bottom));
  border:1px solid rgba(255,255,255,.75);
  border-top:1px solid rgba(255,255,255,.75);  /* 목업의 실선 구분선을 지운다 */
  border-radius:999px;                         /* 모서리가 아니라 알약이다 */
  padding:7px 6px;
  background:rgba(255,255,255,.78);
  /* 글라스 — 뒤 내용이 비쳐 지나간다. 지원하지 않는 브라우저는 위의 반투명 흰색으로 끝난다. */
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 10px 30px rgba(25,31,40,.16), 0 1px 3px rgba(25,31,40,.06),
             inset 0 1px 0 rgba(255,255,255,.7);
}
/* 유리가 실제로 도는 브라우저에서만 더 투명하게 간다 — 안 도는 곳에서 글자가 뜨면 안 된다 */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .tabbar{background:rgba(255,255,255,.55);}
}
/* 지금 보고 있는 탭은 알약으로 감싼다 — 색만으로는 유리 위에서 잘 안 읽힌다 */
.tab{padding:6px 2px;border-radius:999px;transition:background .16s ease;}
.tab.on{background:rgba(0,196,113,.13);}
.tab:active{background:rgba(25,31,40,.06);}

/* 탭바가 흐름에서 빠졌으니 그만큼 아래를 비워 둔다 — 마지막 줄이 탭바에 가리지 않게 */
.view{padding-bottom:70px;}   /* safe-area 는 .screen 이 비워 둔다 — 여기서 또 더하면 두 번이다 */
.fab{bottom:calc(72px + env(safe-area-inset-bottom));}
.toast{bottom:calc(78px + env(safe-area-inset-bottom));}

/* ---- 「더보기」 말풍선 ---- */
.sheet.pop{align-items:flex-end;justify-content:flex-end;background:transparent;}
.sheet.pop .panel{
  width:auto;min-width:172px;max-width:min(64vw,260px);
  margin:0 14px calc(62px + env(safe-area-inset-bottom)) 0;
  padding:7px;border-radius:18px;max-height:none;
  overflow:visible;                 /* 시트의 overflow-y:auto 를 푼다 — 꼬리가 잘린다 */
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 12px 32px rgba(25,31,40,.2), 0 2px 6px rgba(25,31,40,.08);
  transform-origin:100% 100%;
  animation:popup .16s ease-out;
}
/* 말풍선 꼬리 — 「더보기」 칸을 가리킨다 */
.sheet.pop .panel::after{
  content:"";position:absolute;right:32px;bottom:-6px;
  width:14px;height:14px;border-radius:3px;transform:rotate(45deg);
  background:rgba(255,255,255,.86);
  border-right:1px solid rgba(255,255,255,.7);
  border-bottom:1px solid rgba(255,255,255,.7);
}
.sheet.pop .panel{position:relative;}
@keyframes popup{from{opacity:0;transform:translateY(6px) scale(.94);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.sheet.pop .panel{animation:none;}}

.morerow{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;
  background:none;border:none;border-radius:12px;
  font-family:inherit;font-size:14px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);text-align:left;cursor:pointer;}
.morerow + .morerow{margin-top:2px;}
.morerow:active{background:rgba(25,31,40,.06);}
.morerow .ic{font-size:18px;line-height:1;width:22px;text-align:center;}

/* ================= 규정 열람·검색 (Phase 5 — 목업에 없는 화면, 토큰만 쓴다) ================= */
.rule-wrap{padding:14px 2px 26px;}
.rule-search{display:flex;gap:8px;margin-bottom:14px;}
.rule-search .fin{margin-top:0;}
.rule-search .btn{margin:0;width:auto;padding:0 16px;white-space:nowrap;}

/* ---- 책꽂이. 규정 한 벌이 책 한 권이다 ----
   종류가 늘어도 손댈 곳이 없게 표지 색만 `.k-<kind>` 로 건다. 색은 목업 토큰에서만
   고른다 — 규정 탭 하나 때문에 팔레트를 늘리지 않는다. */
.shelf{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;padding:2px 2px 8px;}
.book{display:block;text-decoration:none;color:var(--ink);}
/* 표지는 3:2다. 세로로 길면 제목과 조문 수 사이가 텅 비는데, 그 공백이 책이 아니라
   빈 상자로 보이게 했다. 낮추면 두 권 자리에 네 권이 들어간다 — 규정은 계속 꽂힌다. */
.book .cover{position:relative;aspect-ratio:3/2;border-radius:2px 10px 10px 2px;
  padding:12px 12px 10px 23px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,0) 70%),var(--green-dark);
  color:#fff;
  box-shadow:0 1px 2px rgba(11,61,46,.14),0 6px 16px rgba(11,61,46,.10);}
.book:active .cover{transform:translateY(1px);
  box-shadow:0 1px 2px rgba(11,61,46,.12),0 3px 8px rgba(11,61,46,.08);}
/* 책등 — 왼쪽에 세로로 어둡게 깔린다. 이것 하나로 네모가 책이 된다.
   안쪽 오른편의 밝은 1px 이 접힘선이다. */
.book .spine{position:absolute;left:0;top:0;bottom:0;width:13px;
  background:rgba(0,0,0,.24);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.20),inset -4px 0 6px -4px rgba(0,0,0,.5);}
/* 오른쪽 책배 — 종이 단면. 예전에는 1px 줄무늬를 반복해 그렸는데 화면에서는
   책배가 아니라 테두리가 깨진 것처럼 보였다. 밝은 면 하나에 안쪽 그늘만 넣는다. */
.book .cover::after{content:"";position:absolute;right:0;top:7px;bottom:7px;width:4px;
  border-radius:0 2px 2px 0;background:rgba(255,255,255,.34);
  box-shadow:inset 1.5px 0 0 rgba(0,0,0,.13);}
.book .ct{margin:0;font-size:16px;font-weight:800;letter-spacing:-.03em;
  line-height:1.25;word-break:keep-all;}
.book .cm{font-size:9.5px;font-weight:600;line-height:1.5;opacity:.82;letter-spacing:-.01em;}
.book .cs{position:absolute;top:7px;right:9px;background:rgba(255,255,255,.24);
  border-radius:5px;padding:2px 6px;font-size:9px;font-weight:800;}
.book .bm{margin-top:8px;font-size:11.5px;color:var(--meta);line-height:1.5;
  word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;}
.book .cover.k-cba{background:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,0) 70%),var(--green-dark);}
.book .cover.k-rule{background:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,0) 70%),var(--green-deep);}
.book .cover.k-rules{background:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,0) 70%),var(--b-notice-tx);}
.book .cover.k-guide{background:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,0) 70%),var(--b-event-tx);}
.book .cover.k-etc{background:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,0) 70%),var(--meta);}
.rule-empty{text-align:center;color:var(--meta);font-size:13.5px;padding:34px 10px;line-height:1.7;}
.rule-note{background:var(--card);border-radius:14px;padding:13px 15px;margin-top:16px;
  font-size:12px;color:var(--sub);line-height:1.65;}
.rule-note b{color:var(--ink);}
.rule-src{display:flex;align-items:center;gap:8px;background:var(--green-tint);border-radius:13px;
  padding:12px 14px;margin-bottom:14px;text-decoration:none;color:var(--green-dark);
  font-size:13.5px;font-weight:700;}
.rule-src span{font-size:11.5px;font-weight:600;color:var(--green-deep);opacity:.85;}
.rule-chap{font-size:13px;font-weight:800;color:var(--green-deep);letter-spacing:-.01em;
  padding:18px 4px 8px;}
.rule-chap.annex{padding-left:16px;color:var(--sub);}
.rule-chap .ax{background:var(--b-notice-bg);color:var(--b-notice-tx);border-radius:6px;
  padding:2px 6px;font-size:10px;margin-right:6px;}
.rule-art{background:var(--card);border-radius:14px;padding:13px 15px;margin-bottom:7px;}
.rule-art.on{box-shadow:inset 0 0 0 1.5px var(--green);}
.ra-head{font-size:13.5px;font-weight:800;letter-spacing:-.01em;}
.ra-head b{color:var(--green-deep);}
.ra-body{font-size:13.5px;color:var(--sub);line-height:1.75;margin-top:7px;}
/* 항·호는 내어쓰기 — 번호가 왼쪽에 남고 본문이 그 오른쪽에 가지런히 선다 */
.ra-body .rl{white-space:pre-wrap;word-break:keep-all;}
.ra-body .rl.hang{padding-left:1.3em;text-indent:-1.3em;}
.rh-head{font-size:12.5px;font-weight:700;color:var(--sub);padding:4px 4px 9px;}
.rule-hits{margin-bottom:16px;}
.rh{display:block;background:var(--card);border-radius:13px;padding:12px 14px;margin-bottom:7px;
  text-decoration:none;color:var(--ink);}
.rh em{display:block;font-style:normal;font-size:11px;color:var(--meta);margin-bottom:3px;}
.rh b{font-size:13.5px;font-weight:800;color:var(--green-deep);}
.rh span{display:block;font-size:12.5px;color:var(--sub);line-height:1.6;margin-top:4px;}
.back{font-size:26px;color:var(--sub);padding:0 12px 0 0;cursor:pointer;line-height:1;}

/* ================= 소개 탭이 링크일 때 (Phase 6) =================
   화면 구조가 아예 다른 탭은 셸 안에서 바꿔치지 않고 그 주소로 나간다(`t.endpoint`).
   태그가 <button> 에서 <a> 로 바뀌는 것뿐이라 밑줄만 지우면 나머지는 그대로 받는다. */
a.tab, a.morerow{text-decoration:none;}

/* ================= 노동조합 가입 신청서 (Phase 7) =================
   종이 원서의 표 모양을 그대로 옮긴다 — 왼쪽 라벨 칸 + 오른쪽 입력 칸. 새 색을 들이지 않고
   기존 토큰만 쓴다. 앱 셸(탭바) 밖의 화면이라 100dvh 로 가두지 않고 그냥 흐르게 둔다. */
body.join-page{height:auto;min-height:100dvh;background:var(--page);overscroll-behavior-y:auto;}
.joinwrap{max-width:520px;margin:0 auto;
  padding:calc(28px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));}

.joinhead{text-align:center;margin-bottom:20px;}
.joinhead .logo{font-size:22px;font-weight:900;letter-spacing:-.03em;}
.joinhead .logo .accent{color:var(--green-deep);}
.joinhead h1{font-size:18px;font-weight:800;letter-spacing:-.02em;color:#fff;
  background:var(--green-deep);border-radius:12px;padding:11px 14px;margin:14px 0 8px;}
.joinhead .lead{font-size:13px;color:var(--sub);font-weight:600;}

/* 표 — 종이 원서의 두 칸 구조 */
.jointable{padding:4px 0;}
.jrow{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px;
  padding:9px 16px;border-bottom:1px solid var(--divider);}
.jointable .jrow:last-child{border-bottom:none;}
.jrow > label{font-size:12.5px;font-weight:700;color:var(--sub);margin:0;line-height:1.4;}
.jrow > label i{color:#F04452;font-style:normal;margin-left:2px;}
.jrow .inp{padding:8px 10px;}

.jsub{font-size:13px;font-weight:800;margin-bottom:10px;}

/* 동의 세 줄. 네모 칸을 직접 그린다 — 기본 체크박스는 기기마다 크기가 제각각이다. */
.jchk{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;
  padding:9px 0;cursor:pointer;}
.jchk + .jchk{border-top:1px solid var(--divider);}
.jchk input{position:absolute;opacity:0;width:0;height:0;}
.jchk .box{width:20px;height:20px;border:1.5px solid var(--divider);border-radius:6px;
  background:var(--card);margin-top:1px;position:relative;flex-shrink:0;}
.jchk input:checked + .box{background:var(--green);border-color:var(--green);}
.jchk input:checked + .box::after{content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);}
.jchk input:focus-visible + .box{outline:2px solid var(--green-deep);outline-offset:2px;}
.jchk .tx{font-size:13px;line-height:1.6;color:var(--ink);}

/* 자필서명판 */
.signrow{padding:14px 16px 4px;}
.signrow > label{display:block;font-size:12.5px;font-weight:700;color:var(--sub);margin-bottom:8px;}
.signrow > label i{color:#F04452;font-style:normal;margin-left:2px;}
.signpad{position:relative;border:1.5px dashed var(--divider);border-radius:12px;
  background:var(--card);height:170px;overflow:hidden;transition:border-color .2s ease;}
.signpad canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;}
/* 서명이 뜨지 않게 받쳐 주는 줄. 종이 원서의 「신청인 : ______」 자리다. */
.signpad .baseline{position:absolute;left:22px;right:22px;bottom:38px;height:1px;
  background:var(--divider);pointer-events:none;}
.signpad.done{border-style:solid;border-color:var(--green);}
.signpad.empty{border-color:#F04452;animation:signshake .35s ease;}
@keyframes signshake{25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}
@media (prefers-reduced-motion:reduce){.signpad.empty{animation:none;}}

.signfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;}
.signfoot .hint{font-size:11.5px;color:var(--meta);line-height:1.5;}
.mini{border:1px solid var(--divider);background:var(--card);color:var(--sub);
  font-family:inherit;font-size:12px;font-weight:700;padding:7px 11px;border-radius:9px;
  cursor:pointer;flex-shrink:0;}
.mini:active{background:var(--page);}

.jnote{font-size:12px;color:var(--meta);line-height:1.65;margin-top:12px;text-align:center;}
.jnote b{color:var(--sub);}

/* 사람이 아닌 것을 거르는 빈 칸 — 보이지도, 키보드로 닿지도 않는다 */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* 접수 완료 */
.donecard{background:var(--card);border-radius:20px;padding:26px 22px;text-align:center;
  box-shadow:0 1px 3px rgba(25,31,40,.03);}
.donecard .mark{width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff;
  font-size:26px;font-weight:800;line-height:52px;margin:0 auto 14px;}
.donecard h1{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px;}
.donecard p{font-size:13.5px;color:var(--sub);line-height:1.65;}
.donecard p.sub{font-size:12.5px;color:var(--meta);margin-top:10px;}
.donecard .btn{margin-top:18px;}

/* 콘솔에서 서명을 보는 자리 (admin.css 가 이 파일을 import 한다) */
.signview{border:1px solid var(--divider);border-radius:12px;background:var(--card);
  padding:12px 14px;max-width:420px;}
.signview svg{display:block;width:100%;height:auto;}
.signame{border-top:1px solid var(--divider);margin-top:8px;padding-top:8px;
  font-size:13px;font-weight:700;text-align:right;}
.signame span{color:var(--meta);font-weight:600;}

/* 로그인 화면의 「노동조합 가입하기」. 로그인 폼과 한 덩어리로 보이지 않게 띄워 놓는다 —
   아이디가 있는 사람과 없는 사람은 여기서 길이 갈린다. */
.joincta{margin-top:20px;padding-top:20px;border-top:1px solid var(--divider);}
.joincta .q{font-size:12.5px;font-weight:700;color:var(--sub);text-align:center;margin-bottom:10px;}
/* 로그인 화면의 배경색이 `--page` 라, 회색 버튼(`.btn.gray`)을 그대로 두면 배경에 묻혀
   버튼으로 안 보인다. 이 자리에서만 카드색 + 테두리로 세운다. */
.joincta .btn.gray{background:var(--card);border:1.5px solid var(--green);
  color:var(--green-deep);font-weight:800;}
.joincta .btn.gray:active{background:var(--page);}

/* 「더보기」 안의 가입 신청서 — 탭이 아니라 베타 기간 임시 노출이라 선으로 갈라 둔다 */
.morerow.beta{margin-top:6px;padding-top:11px;border-top:1px solid var(--divider);
  border-radius:0 0 12px 12px;color:var(--sub);}

/* ---- 노조 고르는 칸 (가입 신청서 맨 위) ---- */
.unionpick{padding:14px 16px;}
.unionpick > label{display:block;font-size:12.5px;font-weight:700;color:var(--sub);margin-bottom:8px;}
.unionpick .pickrow{display:flex;gap:8px;align-items:center;}
.unionpick .pickrow .inp{flex:1;font-weight:700;}
.unionpick .hint{font-size:11.5px;color:var(--meta);margin-top:7px;line-height:1.5;}

/* ---- 날짜 고르는 달력 ----
   근무표 달력(.cal-*)을 그대로 쓴다. 여기서 새로 정하는 것은 **띄우는 자리**와
   머리의 연·월 고르는 칸뿐이다. 색·크기는 그 달력 것을 그대로 물려받는다. */
.jrow{position:relative;}
.inp.datefield{cursor:pointer;color:var(--meta);}
.inp.datefield.filled{color:var(--ink);font-weight:600;}
.datepop{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);
  background:var(--card);border-radius:16px;padding:12px 12px 10px;
  box-shadow:0 14px 40px rgba(25,31,40,.22), 0 0 0 1px rgba(25,31,40,.06);}
.datepop .cal-nav{padding:0 0 10px;}
.datepop .cal-arrow{background:var(--page);}
.datepop .cal-grid{padding:4px;background:var(--page);}
.datepop .cal-cell{aspect-ratio:1/1;justify-content:center;}
.datepop .cal-cell .dnum{font-size:13px;color:var(--ink);}
.datepop .cal-cell.out .dnum{color:var(--meta);}
.datepop .cal-cell.picked{background:var(--green);}
.datepop .cal-cell.picked .dnum{color:#fff;font-weight:800;}
.dp-pick{display:flex;gap:6px;}
.dp-pick select{border:1px solid var(--divider);border-radius:9px;background:var(--card);
  font-family:inherit;font-size:13.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
  padding:5px 6px;cursor:pointer;}
.dp-foot{display:flex;justify-content:space-between;gap:8px;padding-top:9px;}

/* ---------------- 복지 혜택 안내서 ----------------
   규정 책꽂이에서 들어오지만 조문 뷰어와 다른 화면이다 — 조문은 읽는 글이고 이건 훑는 표다.
   목업에 없는 화면이라 토큰을 쓴다(1:1 상담·FAQ 와 같은 규칙). **딱 한 색만 새로 만들었다** —
   구분이 여섯인데 목업 배지 색이 넷뿐이라 「교육·자녀」의 파랑을 더했다(`benefits.KINDS`).
   구분 색은 서버가 인라인으로 준다 — 구분을 늘려도 이 파일은 안 고친다. */
.bf-cover{margin-top:12px;border-radius:20px;padding:26px 20px 22px;color:#fff;
  background:linear-gradient(152deg,#0F5140,var(--green-dark) 62%);
  box-shadow:0 10px 26px rgba(11,61,46,.22);}
.bf-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--green);
  margin-bottom:9px;}
.bf-cover h1{font-size:25px;font-weight:900;letter-spacing:-.035em;line-height:1.25;}
.bf-cover p{margin-top:10px;font-size:13px;line-height:1.65;color:rgba(255,255,255,.78);}
.bf-cover p b{color:#fff;font-weight:800;}
.bf-marks{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;}
.bf-mark{font-size:11px;font-weight:800;border-radius:999px;padding:5px 10px;}

.bf-sect{margin-top:22px;}
.bf-sect-head{display:flex;align-items:center;gap:7px;margin:0 6px 9px;
  font-size:14px;font-weight:800;letter-spacing:-.02em;}
.bf-dot{width:7px;height:7px;border-radius:50%;flex:none;}
.bf-n{font-size:11.5px;font-weight:700;color:var(--meta);}

.bf-card{background:var(--card);border-radius:16px;margin-bottom:8px;overflow:hidden;
  box-shadow:0 1px 3px rgba(25,31,40,.045);}
.bf-card summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;
  padding:14px 15px;}
.bf-card summary::-webkit-details-marker{display:none;}
.bf-ico{flex:none;width:34px;height:34px;border-radius:11px;display:flex;
  align-items:center;justify-content:center;font-size:15px;font-weight:900;}
.bf-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.bf-tt b{font-size:14.5px;font-weight:800;letter-spacing:-.02em;}
.bf-sum{font-size:12px;color:var(--meta);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bf-amt{flex:none;font-size:12.5px;font-weight:800;color:var(--green-deep);
  background:var(--green-tint);border-radius:999px;padding:5px 10px;}
.bf-arr{flex:none;color:var(--meta);transition:transform .16s ease;}
.bf-card[open] .bf-arr{transform:rotate(180deg);}
.bf-card[open] .bf-sum{white-space:normal;}
.bf-body{padding:2px 15px 16px 60px;}
.bf-row{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--divider);}
.bf-row dt{flex:none;width:34px;font-size:12px;font-weight:800;color:var(--green-deep);}
.bf-row dd{flex:1;font-size:13px;color:var(--sub);line-height:1.65;white-space:pre-line;}

/* 책꽂이에 꽂히는 「복지 혜택 안내」. **안내서(`k-guide`)와 같은 색을 쓴다** — 새 색을
   만들지 않고, 규정(차가운 초록)과 안내(따뜻한 주황)를 색으로 가른다. */
.book .cover.k-benefit{background:linear-gradient(158deg,rgba(255,255,255,.12),rgba(255,255,255,0) 70%),var(--b-event-tx);}

/* ================= 글에 붙는 사진 (Phase 8 — 소식지) =================
   노조 소식지는 **이미지가 곧 본문**이다(A4 비율 세로 한 장이 흔하다). 그래서 본문 옆에
   작게 두지 않고, 상세에서는 폭을 꽉 채워 세로로 이어 붙인다. 글자가 작아 확대해서 읽어야
   하므로 누르면 원본이 열린다 — 라이트박스를 만들지 않는다(브라우저의 핀치줌이 더 낫다). */
.pimgs{display:flex;flex-direction:column;gap:10px;}
.pimgs a{display:block;border-radius:14px;overflow:hidden;background:var(--divider);}
.pimgs img{display:block;width:100%;height:auto;}
.pimgs .zoom{display:block;text-align:center;font-size:12px;color:var(--meta);margin-top:-2px;}

/* 게시판 카드에 얹히는 표지. **세로로 긴 소식지를 그대로 넣으면 카드가 화면을 넘는다** —
   비율을 묶고 위쪽(제호와 머리기사가 있는 자리)을 보인다. */
.pcover{position:relative;margin-top:11px;border-radius:12px;overflow:hidden;background:var(--divider);}
.pcover img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top center;}
.pcover .cnt{position:absolute;right:8px;bottom:8px;background:rgba(25,31,40,.72);color:#fff;
  font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 9px;backdrop-filter:blur(6px);}
/* 갤러리형에 사진이 있으면 이모지 자리를 사진이 대신한다 */
.gal img{width:100%;height:100%;object-fit:cover;display:block;}

/* 첨부 파일 줄. 사진과 달리 펼치지 않고 내려받는다 — 확장자를 앞에 세워
   무엇인지 열기 전에 알게 한다(한글 파일을 폰에서 열지 못하는 조합원이 있다). */
.pfiles-h{font-size:12.5px;font-weight:800;color:var(--meta);margin-bottom:8px;}
.pfile{display:flex;align-items:center;gap:10px;padding:11px 0;
  border-top:1px solid var(--divider);text-decoration:none;color:inherit;}
.pfile:first-of-type{border-top:0;}
.pfile .ext{flex:none;min-width:42px;text-align:center;font-size:10.5px;font-weight:900;
  letter-spacing:.02em;color:var(--green-deep);background:var(--green-tint);
  border-radius:7px;padding:5px 6px;}
.pfile .nm{flex:1;min-width:0;font-size:13.5px;font-weight:700;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pfile .dl{flex:none;font-size:12.5px;font-weight:700;color:var(--meta);}

/* 첨부 파일 화면(post_file.html)의 PDF 미리보기. A4 비율로 상자를 잡는다 —
   PDF 는 제 높이를 알려주지 않으므로 상자가 정하지 않으면 납작하게 눌린다.
   폰에 따라 첫 장만 보이거나 비기도 해서(iOS) **아래의 「받기」 줄이 늘 함께 있다.** */
.fview{margin-top:12px;border-radius:14px;overflow:hidden;background:var(--divider);}
.fview object{display:block;width:100%;aspect-ratio:1/1.414;border:0;}
.fview .fnone{padding:28px 20px;text-align:center;font-size:13.5px;line-height:1.6;
  color:var(--meta);font-weight:600;}
.fnote{margin-top:10px;font-size:12px;color:var(--meta);text-align:center;}

/* ---- 사진 크게 보기 (post_image.html) ----
   앱 셸을 안 쓰는 화면이라 body 의 높이 잠금을 푼다(가입 화면과 같은 방식).
   바탕이 어두운 이유는 소식지 지면이 대개 흰 종이라서다 — 밝은 바탕에 얹으면
   지면의 가장자리가 어디인지 보이지 않는다. */
body.imgview{height:auto;min-height:100dvh;background:#12161C;overscroll-behavior-y:auto;}
.ivbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  background:rgba(18,22,28,.92);backdrop-filter:blur(8px);}
.ivbar .back{flex:none;font-size:14px;font-weight:800;letter-spacing:-.02em;color:#fff;
  text-decoration:none;background:rgba(255,255,255,.15);border-radius:999px;padding:8px 14px;}
.ivbar .ttl{flex:1;min-width:0;font-size:13px;font-weight:700;color:rgba(255,255,255,.72);
  letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ivbar .pg{flex:none;font-size:12px;font-weight:800;color:rgba(255,255,255,.55);}
/* 여러 장은 옆으로 넘긴다 — 홈 배너(.bn-track)와 같은 가로 스냅이다.
   `align-items:flex-start` 인 이유: 장마다 세로 길이가 달라도 위를 맞춰야 제호가 같은 줄에 선다.
   `overscroll-behavior-x:contain` 은 마지막 장에서 더 밀었을 때 브라우저의
   뒤로가기 제스처로 새지 않게 막는다 — 돌아가는 길은 버튼으로 따로 있다. */
.ivtrack{display:flex;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;}
.ivtrack::-webkit-scrollbar{display:none;}
.ivslide{flex:0 0 100%;scroll-snap-align:start;}
.ivimg{display:block;width:100%;height:auto;}
.ivfoot{padding:18px 14px calc(env(safe-area-inset-bottom) + 24px);
  max-width:520px;margin:0 auto;text-align:center;}
.ivback{display:block;padding:15px;border-radius:14px;background:var(--green);color:#fff;
  font-size:15px;font-weight:800;letter-spacing:-.02em;text-decoration:none;}
.ivfoot .hint{margin-top:11px;font-size:12px;color:rgba(255,255,255,.45);}
/* 원본 받기 줄. 글의 첨부 파일(.pfile)과 같은 모양이되 어두운 바탕에 맞춰 색만 뒤집는다 —
   같은 일(파일을 받는다)이면 같아 보여야 한다. */
.ivfile{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:11px 13px;
  border-radius:14px;background:rgba(255,255,255,.08);text-decoration:none;color:#fff;
  text-align:left;}
.ivfile .ext{flex:none;min-width:42px;text-align:center;font-size:10.5px;font-weight:900;
  letter-spacing:.02em;color:#fff;background:rgba(255,255,255,.16);border-radius:7px;padding:5px 6px;}
.ivfile .nm{flex:1;min-width:0;font-size:13.5px;font-weight:700;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ivfile .dl{flex:none;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.55);}