/* ============================================================
   桜台自治会アプリ 住民のページの共通の見た目（2026-11-09）
   旗二（旗ヶ崎二区）の公式LINEのページ（統合アプリ public/shiru.html・kairan.html）と同じ色・形
   ミントの帯の見出し → 白いカード → 青緑のボタン・橙の電話ボタン・全画面で拡大する画面
   文字は rem、ボタンは min-height（OSの文字サイズ200%でも崩れないように）
   制作・運営: 旗二でじたる
   ============================================================ */
:root {
  --font: "Hiragino Maru Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", "Meiryo", system-ui, sans-serif;
  --paper: #FBF8F2; --card: #FFFFFF; --line: #E6E0D6; --ink: #2A2724; --ink-2: #5E5850;
  --mint: #CFEDE3; --mint-ink: #1E3F35; --mint-ink-2: #1F5E4B;
  --teal: #0B7F96; --teal-dark: #08657A; --teal-pale: #E2F3F6; --pink: #D9408F; --pink-dark: #B42F74;
  --red: #C8321F; --tel-ink: #4A2E00;
  --badge: #FFE9A8; --badge-ink: #5C3F00;
  --r-s: .75rem; --r-m: 1rem; --r-pill: 999px;
  --shadow: 0 2px 0 var(--line), 0 10px 24px -14px rgba(60,40,20,.35);
  --btn-line: #C9E2E8;
  --tone-a: #2471B3; --tone-a-pale: #E3F0FA; --tone-a-ink: #1C5A8F;
  --tone-b: #C45F17; --tone-b-pale: #FCEBDD; --tone-b-ink: #9A4A10;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.6; overflow-wrap: break-word; }
.app { max-width: 35rem; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--teal-dark); }
button { font: inherit; cursor: pointer; color: inherit; }

/* 見出しの帯 */
.hdr { background: var(--mint); padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.hdr-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.org { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 700; color: var(--mint-ink-2); }
.org img { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #fff; }
.back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .375rem 1.125rem; border-radius: var(--r-pill); border: 1.5px solid var(--mint-ink-2); background: var(--card); color: var(--mint-ink); font-size: 1rem; font-weight: 800; }
.title { margin: 0; font-size: 1.75rem; line-height: 1.3; font-weight: 800; color: var(--mint-ink); }
.badge { align-self: flex-start; padding: .375rem .875rem; border-radius: var(--r-pill); background: var(--badge); color: var(--badge-ink); font-size: .9375rem; font-weight: 800; }
.notice { margin: 0; padding: .75rem .875rem; border-radius: var(--r-s); background: var(--card); line-height: 1.7; }

/* 本文 */
.main { flex: 1; padding: 1.25rem 1rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 1.125rem; padding: 1.125rem 1rem 1.25rem; display: flex; flex-direction: column; gap: .875rem; box-shadow: var(--shadow); }
.lead { margin: 0 .25rem; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
.b-h { margin: 0; display: flex; align-items: flex-start; gap: .5rem; font-size: 1.25rem; line-height: 1.4; font-weight: 800; color: var(--teal-dark); }
.b-h::before { content: ""; flex: none; width: .375rem; align-self: stretch; min-height: 1.2em; border-radius: .2rem; background: var(--teal); }
.b-p { margin: 0; white-space: pre-line; line-height: 1.75; }
.state { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 2rem 1rem; text-align: center; background: var(--card); border-radius: var(--r-m); border: 1.5px dashed #CFC6B6; color: var(--ink-2); font-weight: 700; }

/* ボタン（右に › の丸） */
.btns { display: flex; flex-direction: column; gap: .625rem; }
.btn { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 3.75rem; padding: .75rem .875rem .75rem 1.125rem; border-radius: var(--r-m); border: 1.5px solid var(--btn-line); background: var(--card); color: var(--teal-dark); font-size: 1.1875rem; line-height: 1.4; font-weight: 800; text-decoration: none; text-align: left; box-shadow: 0 2px 0 var(--btn-line); }
.btn::after { content: "›"; flex: none; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--teal); color: #fff; font-size: 1.5rem; line-height: 1; padding-bottom: .15rem; }
.btn:active { transform: translateY(2px); box-shadow: none; background: var(--teal-pale); }
.btn-tx { min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.btn-note { font-size: .875rem; line-height: 1.5; font-weight: 700; color: var(--ink-2); }

/* タイル（絵＋名前の四角を2つずつ。文字を大きくした端末では1列） */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: .75rem; }
.tile { --tc: var(--teal); --tb: #DCF0EE; --tk: var(--teal-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-width: 0; min-height: 9rem; padding: 1rem .625rem; border: 2px solid var(--tc); border-radius: 1.125rem; background: var(--tb); color: var(--tk); text-align: center; text-decoration: none; font-size: 1.1875rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; box-shadow: 0 3px 0 var(--tc); }
.tile:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tc); }
.tile svg { width: 3.25rem; height: 3.25rem; flex: none; }
.tile .tile-note { font-size: .875rem; font-weight: 700; color: var(--ink-2); line-height: 1.45; }
.tiles > .tile:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
.tile.c-red { --tc: #E02424; --tb: #FFDCDC; --tk: #9E1414; }
.tile.c-brown { --tc: #7A4900; --tb: #FFE9C7; --tk: #5A3600; }
.tile.c-blue { --tc: #004AAD; --tb: #D2E5FF; --tk: #003580; }
.tile.c-green { --tc: #0A714E; --tb: #CDEFBE; --tk: #075238; }
.tile.c-sky { --tc: #1F80FF; --tb: #D6EEFF; --tk: #0B4FA8; }
.tile.c-orange { --tc: #D9650B; --tb: #FFE5CC; --tk: #8F4206; }
.tile.c-pink { --tc: #D9408F; --tb: #FCE1EE; --tk: #9C2463; }
.tile.c-purple { --tc: #7B4FC9; --tb: #EDE3FB; --tk: #4F2E8C; }

/* 電話ボタン（2つずつ横に。番号は出さない） */
.tel-hint { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--ink-2); text-align: center; }
.tels { display: flex; flex-wrap: wrap; gap: .625rem; }
.tel { flex: 1 1 9rem; min-width: 0; min-height: 4.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem; padding: .625rem .75rem; border-radius: var(--r-m); border: 1.5px solid #E9A23C; background: #FFF4E2; color: var(--tel-ink); text-decoration: none; text-align: center; font-size: 1.1875rem; font-weight: 800; line-height: 1.35; box-shadow: 0 2px 0 #E9A23C; }
.tel small { font-size: .875rem; font-weight: 700; }
.tel::before { content: "📞"; font-size: 1.25rem; }
.tel:active { transform: translateY(2px); box-shadow: none; }
.tel.wide { flex-basis: 100%; }

/* タブ（回覧｜市報等。旗二の「回覧・市報を見る」と同じ形） */
.tabs { position: sticky; top: 0; z-index: 2; background: var(--paper); padding: .75rem .75rem 0; }
.tabs-row { display: flex; align-items: flex-end; gap: .5rem; }
.tab { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: .5rem; border: 2px solid; border-bottom: none; border-radius: var(--r-m) var(--r-m) 0 0; font-size: 1.0625rem; font-weight: 800; text-align: center; }
.tab.is-active { flex: 1.35; min-height: 3.75rem; font-size: 1.375rem; color: #fff; }
.tab--a { border-color: var(--tone-a); background: var(--tone-a-pale); color: var(--tone-a-ink); }
.tab--a.is-active { background: var(--tone-a); color: #fff; }
.tab--b { border-color: var(--tone-b); background: var(--tone-b-pale); color: var(--tone-b-ink); }
.tab--b.is-active { background: var(--tone-b); color: #fff; }
.tabs-rule { height: 5px; border-radius: 3px; background: var(--tone-a); }
.tabs[data-view="b"] .tabs-rule { background: var(--tone-b); }

/* 表紙を2つずつ並べる（回覧の1枚ずつ・アルバム） */
.covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .875rem .75rem; }
.cov { display: flex; flex-direction: column; gap: .375rem; min-width: 0; padding: .375rem .375rem .625rem; border-radius: var(--r-s); border: 1.5px solid var(--line); background: var(--card); box-shadow: 0 2px 0 var(--line); text-align: left; color: var(--ink); }
.cov:active { transform: translateY(1px); box-shadow: none; }
.cov img, .cov .noimg { display: block; width: 100%; aspect-ratio: 210 / 297; object-fit: cover; object-position: top; border-radius: .375rem; border: 1px solid #EEE9E0; background: #F3EFE8; }
.cov.photo img { aspect-ratio: 4 / 3; object-position: center; }
.cov .noimg { display: flex; align-items: center; justify-content: center; color: var(--red); font-weight: 800; }
.cov-t { font-size: 1rem; font-weight: 800; line-height: 1.45; padding: 0 .125rem; }
.cov-n { font-size: .875rem; font-weight: 700; color: var(--ink-2); padding: 0 .125rem; }

/* 写真を並べる */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: .5rem; }
.photos button { display: block; padding: 0; border: none; background: none; border-radius: var(--r-s); }
.photos button { position: relative; }
.photos .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3.5rem; height: 2.5rem; border-radius: .75rem; background: rgba(230,33,23,.92); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.photos .play::before { content: ""; border-style: solid; border-width: .55rem 0 .55rem .9rem; border-color: transparent transparent transparent #fff; margin-left: .2rem; }
.photos .vlen { position: absolute; right: .375rem; bottom: .375rem; padding: .05rem .5rem; border-radius: .375rem; background: rgba(0,0,0,.72); color: #fff; font-size: .8125rem; font-weight: 800; pointer-events: none; }
.viewer-video { display: block; width: 100%; max-height: 100%; margin: auto; background: #000; }
.photos img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-s); background: #F3EFE8; }

/* 全画面で見る（旗二の .viewer と同じ形。左上「← もどる」とスマホの戻るで閉じる） */
.viewer { position: fixed; inset: 0; z-index: 10; background: #111; color: #fff; display: flex; flex-direction: column; }
.viewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .625rem .75rem; background: #1E1E1E; border-bottom: 1px solid #333; }
.viewer-back { flex: none; min-height: 3rem; padding: .5rem 1rem; border-radius: var(--r-pill); border: 1.5px solid #fff; background: #fff; color: #111; font-size: 1.0625rem; font-weight: 800; }
.viewer-title { flex: 1 1 8rem; min-width: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.viewer-body { flex: 1; overflow: auto; padding: .75rem; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: .75rem; }
.viewer-body img { display: block; width: 100%; height: auto; margin: 0 auto; background: #fff; flex: none; }
.viewer-zoom { display: flex; flex-wrap: wrap; gap: .75rem; padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom)); background: #1E1E1E; border-top: 1px solid #333; }
.zoom { flex: 1 1 7rem; min-height: 3.25rem; padding: .5rem; border-radius: 14px; border: 1.5px solid #666; background: #2A2A2A; color: #fff; font-size: 1.125rem; font-weight: 800; }
.zoom--in { background: #fff; border-color: #fff; color: #111; }
.zoom:disabled { color: #8A8A8A; cursor: default; }
.viewer-pdf { display: block; color: #fff; text-align: center; padding: .5rem; font-weight: 700; }
body.viewing { overflow: hidden; }

/* 入力（予約） */
.q { margin: 0; font-size: 1.375rem; line-height: 1.45; font-weight: 800; color: var(--ink); }
.q-step { font-size: .9375rem; font-weight: 800; color: var(--teal-dark); }
.inp { width: 100%; min-height: 3.5rem; padding: .75rem 1rem; border: 2px solid #CFC6B6; border-radius: var(--r-s); background: #fff; font: inherit; font-size: 1.25rem; }
.inp:focus { outline: 3px solid var(--teal-pale); border-color: var(--teal); }
.go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.75rem; padding: .75rem 1rem; border: none; border-radius: var(--r-m); background: var(--teal); color: #fff; font-size: 1.25rem; font-weight: 800; box-shadow: 0 3px 0 var(--teal-dark); }
.go:disabled { background: #A9A39A; box-shadow: none; }
.sub { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem; padding: .5rem 1rem; border: none; background: none; color: var(--teal-dark); font-size: 1.0625rem; font-weight: 700; text-decoration: underline; }
.err { margin: 0; color: var(--red); font-weight: 800; }

/* フッター */
.foot { padding: 1.25rem 1rem 1.75rem; text-align: center; color: var(--ink-2); font-size: .875rem; border-top: 1px solid var(--line); }
.foot b { display: block; color: var(--mint-ink-2); font-size: .9375rem; }