/* ===== 有明海サイト デザインシステム（提案書 v2 のトークンを踏襲） ===== */
:root{
  --paper:#F6FAFB; --paper-raised:#FFFFFF; --ink:#16242B; --ink-soft:#57707A;
  --line:#D6E6EA; --tide:#1E7A9C; --tide-soft:#E1F1F5; --mud:#8B5A32; --mud-soft:#F3E6D2;
  --sky:#64809A; --sky-soft:#E6EEF2; --warn:#9E3D28; --warn-soft:#F1DCD3; --sun:#C98A2E; --sun-soft:#F3E3C6;
  --radius:8px; --shadow:0 1px 3px rgba(22,36,43,.10);
  --font-display:'Shippori Mincho',serif; --font-body:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.8; font-size:16px; -webkit-font-smoothing:antialiased;}
img,svg{max-width:100%;}
a{color:var(--tide); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.4; margin:0 0 .5em;}
.wrap{max-width:720px; margin:0 auto; padding:0 18px;}
p{margin:0 0 14px;}

/* ---- header / nav（2026-09-16 情報設計の整理：スマホ=ハンバーガー全項目メニュー、
   PC=「見る／知る／一緒に見る／私たちについて」でグループ化した横ナビ） ---- */
.site-header{background:var(--paper-raised); border-bottom:1px solid var(--line); padding:14px 0;}
.site-header .header-row{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink);}
.brand small{display:block; font-family:var(--font-body); font-size:10.5px; color:var(--ink-soft); font-weight:400;}

/* ハンバーガーボタン（スマホのみ表示） */
.nav-toggle{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:40px; height:40px; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--paper-raised); cursor:pointer; flex:0 0 auto;}
.nav-toggle-bar{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* PC横ナビ（グループ化）：スマホでは非表示、ハンバーガーのドロワーに一本化する */
.nav-groups{display:none;}

/* スマホの全画面ドロワーメニュー（サイト全体の目次として、開けば縦に全項目が見える） */
.nav-drawer{position:fixed; inset:0; z-index:300;}
.nav-drawer[hidden]{display:none;}
.nav-drawer-backdrop{position:absolute; inset:0; background:rgba(22,36,43,.45);}
.nav-drawer-panel{position:absolute; top:0; right:0; bottom:0; width:min(86vw, 340px); background:var(--paper-raised); box-shadow:-6px 0 24px rgba(22,36,43,.18); display:flex; flex-direction:column; overflow-y:auto;}
.nav-drawer-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 16px 12px; border-bottom:1px solid var(--line);}
.nav-drawer-close{width:34px; height:34px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font-size:15px; line-height:1; cursor:pointer; flex:0 0 auto;}
.nav-drawer-body{padding:8px 8px 20px;}
.nav-drawer-group{padding:12px 8px 4px;}
.nav-drawer-group-label{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--tide); text-transform:none; padding:0 8px 6px; border-bottom:1px solid var(--line); margin-bottom:6px;}
.nav-drawer-group a{display:block; padding:11px 10px; border-radius:8px; font-size:14.5px; font-weight:700; color:var(--ink);}
.nav-drawer-group a.active{background:var(--tide-soft); color:var(--tide);}
.nav-drawer-group a:hover{background:var(--paper);}

@media (min-width: 760px){
  /* PC・タブレット幅ではハンバーガーは使わず、グループ化した横ナビを表示する */
  .nav-toggle{display:none;}
  .nav-groups{display:flex; flex-wrap:wrap; align-items:flex-start; gap:18px; padding:10px 0 12px; border-top:1px solid var(--line); margin-top:12px;}
  .nav-group{display:flex; flex-direction:column; gap:4px;}
  .nav-group-label{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.03em; color:var(--ink-soft); padding-left:2px;}
  .nav-group-links{display:flex; flex-wrap:wrap; gap:2px;}
  .nav-group-links a{white-space:nowrap; font-size:12.5px; font-weight:700; padding:6px 10px; border-radius:999px; color:var(--ink-soft);}
  .nav-group-links a.active, .nav-group-links a:hover{background:var(--tide-soft); color:var(--tide); text-decoration:none;}
}
@media (min-width: 1080px){
  .nav-groups{gap:26px;}
  .nav-group-links a{padding:6px 12px; font-size:13px;}
}

/* ---- hero / page head ---- */
.pagehead{padding:26px 0 6px;}
.pagehead .eyebrow{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:var(--tide); font-weight:700;}
.pagehead h1{font-size:clamp(22px,6vw,30px); margin-top:6px;}
.pagehead .lede{color:var(--ink-soft); font-size:14.5px; max-width:56ch;}

main{padding-bottom:60px;}
section.block{padding:26px 0;}
section.block + section.block{border-top:1px solid var(--line);}
h2.block-title{font-size:19px; display:flex; align-items:baseline; gap:8px;}
h2.block-title .no{font-family:var(--font-mono); font-size:12px; color:var(--tide); font-weight:600;}
h3.sub-title{font-size:15.5px; margin-top:26px;}

/* ---- location chooser ---- */
.locrow{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
.locbtn{flex:0 0 auto; font-family:var(--font-body); font-size:13px; font-weight:700; padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink);}
.locbtn.sel{background:var(--tide); border-color:var(--tide); color:#fff;}

/* ---- priority stat tiers (mobile-first: tier1/2 always visible, tier3 in <details>) ---- */
.stat-hero{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;}
.stat-hero.cols-3{grid-template-columns:repeat(3, minmax(0,1fr));}
.stat-hero.cols-4{grid-template-columns:repeat(4, minmax(0,1fr));}
.stat-hero .stat{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:16px; text-align:center;}
.stat-hero .stat .v{font-family:var(--font-mono); font-size:clamp(22px,6vw,28px); font-weight:600; color:var(--tide);}
.stat-hero.cols-3 .stat .v,
.stat-hero.cols-4 .stat .v{font-size:clamp(18px,5vw,26px);}
@media (max-width:480px){
  .stat-hero.cols-4{grid-template-columns:repeat(2, minmax(0,1fr));}
}
.stat-hero .stat .l{font-size:11.5px; color:var(--ink-soft); margin-top:4px;}
.today-line{margin-top:14px; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; font-size:13.6px; display:flex; gap:10px; align-items:center;}
.today-photo{background:repeating-linear-gradient(45deg, var(--line) 0 2px, transparent 2px 10px); border-radius:6px; height:120px; margin-top:12px;}

/* ---- 有明海の変化を見てみる（トップページ、比較への入口） ---- */
.compare-grid{display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px;}
@media (min-width:560px){.compare-grid{grid-template-columns:repeat(3, minmax(0,1fr));}}
.compare-card{display:block; border:1px solid var(--line); background:var(--paper-raised); border-radius:var(--radius); padding:14px 16px; text-decoration:none !important; color:var(--ink);}
.compare-card:hover{border-color:var(--tide);}
.compare-card .cc-label{font-weight:700; font-size:13.5px;}
.compare-card .cc-sub{font-size:11.5px; color:var(--ink-soft); margin-top:4px;}

/* ---- トップページ：「有明海を知る」「一緒に見る」への案内タイル（旧版。現在未使用だが
   他ページからの参照が万一あった場合に備え、当面はそのまま残しておく） ---- */
.entry-tiles{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:12px;}
.entry-tile{display:flex; flex-direction:column; gap:3px; border:1px solid var(--line); background:var(--paper-raised); border-radius:var(--radius); padding:13px 14px; text-decoration:none !important; color:var(--ink);}
.entry-tile:hover{border-color:var(--tide);}
.entry-tile .et-title{font-weight:700; font-size:13.5px;}
.entry-tile .et-sub{font-size:11px; color:var(--ink-soft);}
@media (min-width:560px){.entry-tiles{grid-template-columns:repeat(4, minmax(0,1fr));}}

/* ---- トップページ：ヒーロー（初めて来た人への案内板。2026-09-16 追加） ----
   写真がある時（.hero--photo）は全面写真＋下端にグラデーションで文字を重ね、
   写真が無い時（.hero--illust）は既存の案内キャラのイラストを大きくして代用する。 */
.hero{position:relative; margin-top:18px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--paper-raised);}
.hero-media{display:block; width:100%; aspect-ratio:16/10; background-size:cover; background-position:center; background-color:var(--tide-soft);}
.hero-media--illust{display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, var(--tide-soft), var(--paper-raised) 85%);}
.hero--illust .hero-media{aspect-ratio:auto; height:168px;}
.hero-illust{width:min(190px,52%); height:auto;}
.hero-copy{position:relative; padding:16px 20px 20px;}
.hero-eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; font-weight:700; margin:0; color:var(--tide);}
.hero-title{font-size:clamp(24px,7vw,34px); margin:6px 0 8px; text-wrap:balance; font-family:var(--font-display);}
.hero-sub{font-size:14px; margin:0; max-width:40ch; color:var(--ink-soft);}
.hero-note{font-size:11.5px; color:var(--ink-soft); margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);}
.hero--photo .hero-copy{position:absolute; left:0; right:0; bottom:0; padding:22px 20px 20px; background:linear-gradient(180deg, rgba(22,36,43,0) 0%, rgba(22,36,43,.82) 85%);}
.hero--photo .hero-eyebrow{color:rgba(255,255,255,.92);}
.hero--photo .hero-title, .hero--photo .hero-sub{color:#fff;}
.hero--photo .hero-sub{opacity:.95;}

/* ---- トップページ：3つの入口（有明海を見る／知る／一緒に見る） ---- */
.cat-tiles{display:grid; grid-template-columns:1fr; gap:12px; margin-top:18px;}
.cat-tile{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper-raised); text-decoration:none !important; color:var(--ink);}
.cat-tile:hover{border-color:var(--tide);}
.cat-tile-media{display:block; width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; background-color:var(--paper);}
.cat-tile-media--icon{display:flex; align-items:center; justify-content:center; background:var(--paper);}
.cat-tile-media--icon svg{width:56px; height:56px;}
.cat-tile-body{padding:14px 16px;}
.cat-tile-title{display:block; font-weight:700; font-size:16px;}
.cat-tile-sub{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:4px;}
@media (min-width:640px){.cat-tiles{grid-template-columns:repeat(3, minmax(0,1fr));}}

details.more{margin-top:14px;}
details.more > summary{cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--tide); background:var(--tide-soft); border-radius:999px; padding:9px 16px;}
details.more > summary::-webkit-details-marker{display:none;}
details.more[open] > summary::after{content:"▴";}
details.more > summary::after{content:"▾"; font-size:10px;}
.stat-grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:12px;}
.stat-grid3 .stat{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:10px; text-align:center;}
.stat-grid3 .stat .v{font-family:var(--font-mono); font-size:15px; font-weight:600;}
.stat-grid3 .stat .l{font-size:10px; color:var(--ink-soft); margin-top:2px;}

/* ---- guide character speech ---- */
.guide-row{display:flex; gap:14px; align-items:center; margin-top:18px;}
.guide-row .gicon{flex:0 0 auto; width:54px; height:54px;}
.speech-bubble{background:var(--tide-soft); border:1px solid var(--tide); border-radius:14px 14px 14px 4px; padding:10px 14px; font-size:13.6px; font-weight:700;}

/* ---- zukan ---- */
.collect-meter{margin-top:8px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); padding:12px 16px;}
.collect-meter .cm-top{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft);}
.collect-meter .cm-top b{font-family:var(--font-mono); color:var(--tide); font-size:15px;}
.meter-track{margin-top:6px; height:8px; border-radius:999px; background:var(--tide-soft); overflow:hidden;}
.meter-fill{height:100%; background:var(--tide); border-radius:999px;}
.zukan-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;}
@media(min-width:560px){.zukan-grid{grid-template-columns:repeat(3,1fr);}}
.zcard{border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); overflow:hidden; text-decoration:none !important;}
.zcard .zph{height:84px; position:relative;}
.zcard .zicon{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.zcard .zicon svg{width:42px; height:42px;}
.zcard .zbody{padding:10px 12px;}
.zcard .zname{font-weight:700; font-size:13px;}
.zcard .zlatin{font-size:10px; color:var(--ink-soft); font-style:italic; font-family:var(--font-mono);}
.badge{display:inline-flex; font-size:10px; font-weight:700; border-radius:4px; padding:2px 7px; font-family:var(--font-mono); margin-top:5px;}
.badge--new{background:var(--tide-soft); color:var(--tide);}
.badge--seen{background:var(--mud-soft); color:var(--mud);}
.badge--season{background:var(--sky-soft); color:var(--sky);}
.badge--survey{background:transparent; color:var(--ink-soft); border:1px dashed var(--line);}
.badge--first{background:var(--sun-soft); color:var(--sun);}
.zcard .zmeta{margin-top:5px; font-size:10px; color:var(--ink-soft); font-family:var(--font-mono);}
.freq{margin-top:6px; display:inline-flex; font-size:10px; font-weight:700; font-family:var(--font-mono); border-radius:4px; padding:2px 7px;}
.freq--often{background:var(--tide-soft); color:var(--tide);}
.freq--some{background:var(--sky-soft); color:var(--sky);}
.freq--rare{background:var(--sun-soft); color:var(--sun);}
.zcard .zfact{margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); font-size:11px; line-height:1.55;}

/* ---- record cards (mobile-first "table as cards": 365-day, asari, typhoon) ---- */
.rec-card{border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); padding:14px 16px; margin-top:10px;}
.rec-card .rec-date{font-family:var(--font-mono); font-size:12px; color:var(--tide); font-weight:700;}
.rec-card dl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:8px 0 0; font-size:13px;}
.rec-card dt{color:var(--ink-soft);}
.rec-card dd{margin:0; font-family:var(--font-mono);}
.rec-card .rec-note{margin-top:8px; font-size:12.5px; color:var(--ink-soft); font-family:var(--font-body);}

/* ---- 定点君ブログ：Twitter風の短い投稿カード ---- */
.bk-post .rec-date a{color:inherit; text-decoration:none;}
.bk-post .rec-date a:hover{text-decoration:underline;}
.bk-body{margin:8px 0 0; font-size:13.6px; line-height:1.7; white-space:pre-line;}

/* ---- 潮を知る：「今、海はどうなっている？」現況カード ---- */
.tide-now-card{margin-top:0;}
.tide-now-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px;}
.tide-now-grid .l{font-size:11px; color:var(--ink-soft);}
.tide-now-grid .v{font-family:var(--font-mono); font-size:19px; font-weight:600; color:var(--tide); margin-top:2px;}

.status-pill{display:inline-flex; font-size:10.5px; font-family:var(--font-mono); border-radius:3px; padding:2px 7px; font-weight:700;}
.status-pill.kakutei{background:var(--tide-soft); color:var(--tide);}
.status-pill.sokuho{background:var(--sun-soft); color:var(--sun);}

.datatag{display:inline-flex; font-size:10px; font-family:var(--font-mono); font-weight:700; border-radius:3px; padding:2px 7px;}
.datatag.public{background:var(--sky-soft); color:var(--sky);}
.datatag.observed{background:var(--tide-soft); color:var(--tide);}

/* ---- 潮を知る：今日の潮回り（大潮・中潮・小潮・長潮・若潮）バッジ ---- */
.tide-cycle-card{margin-top:10px;}
.tide-cycle-badge{display:inline-flex; align-items:baseline; font-family:var(--font-display); font-weight:700; font-size:20px; border-radius:6px; padding:3px 14px;}
.tide-cycle-badge--大潮{background:var(--tide-soft); color:var(--tide);}
.tide-cycle-badge--中潮{background:var(--sun-soft); color:var(--sun);}
.tide-cycle-badge--小潮{background:var(--sky-soft); color:var(--sky);}
.tide-cycle-badge--長潮{background:var(--mud-soft); color:var(--mud);}
.tide-cycle-badge--若潮{background:var(--mud-soft); color:var(--tide);}
tr.tide-cycle-row--today{background:var(--tide-soft);}
tr.tide-cycle-row--today td:first-child{font-weight:700; color:var(--tide);}

figure{margin:20px 0 0;}
figure svg{display:block; margin:0 auto; width:100%; height:auto;}
figcaption{margin-top:10px; font-size:12px; color:var(--ink-soft); text-align:center;}

.chart-legend{display:inline-flex; gap:12px; flex-wrap:wrap; margin-right:8px;}
.chart-legend-item{display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--ink);}
.chart-legend-item i{display:inline-block; width:9px; height:9px; border-radius:2px;}

.table-wrap{overflow-x:auto; margin-top:14px;}
table{border-collapse:collapse; width:100%; font-size:13px; min-width:420px;}
th,td{text-align:left; padding:8px 12px; border-bottom:1px solid var(--line);}
thead th{background:var(--paper-raised); font-size:11px; color:var(--ink-soft); font-family:var(--font-mono);}

.langpair{margin-top:14px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.langpair .simple{padding:14px 16px; background:var(--tide-soft); font-size:14.5px;}
.langpair .detail{padding:12px 16px; border-top:1px dashed var(--line); font-size:12.6px; color:var(--ink-soft);}
.langpair .lbl{font-family:var(--font-mono); font-size:10px; font-weight:700; display:block; margin-bottom:4px;}

.notice{background:var(--sun-soft); border:1px solid var(--sun); border-radius:var(--radius); padding:12px 16px; font-size:12.8px; margin-top:16px;}
.notice-box{background:var(--sun-soft); border:1px solid var(--sun); border-radius:var(--radius); padding:16px; font-size:13px; margin-top:16px; text-align:center;}
.stack-note{font-size:12.6px; color:var(--ink-soft); margin-top:12px;}

/* ---- forms (admin) ---- */
.formcard{background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-top:18px;}
.formrow{margin-bottom:16px;}
.formrow label{display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:6px;}
.formrow input:not([type="checkbox"]):not([type="radio"]), .formrow select, .formrow textarea{width:100%; font-size:16px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--paper); font-family:var(--font-body); color:var(--ink);}
.choicegrid{display:flex; gap:6px; flex-wrap:wrap;}
.choicebtn{position:relative; border:1px solid var(--line); background:var(--paper); border-radius:999px; padding:9px 16px; font-size:13px; font-weight:700; cursor:pointer;}
.choicebtn.sel, .choicebtn:has(input:checked){background:var(--tide); border-color:var(--tide); color:#fff;}
.choicebtn input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:none;}
.btn{display:inline-block; font-family:var(--font-body); font-size:14px; font-weight:700; border-radius:6px; padding:11px 22px; border:1px solid transparent; cursor:pointer;}
.btn-primary{background:var(--tide); color:#fff;}
.btn-secondary{background:transparent; border-color:var(--ink); color:var(--ink);}
.flash{background:var(--tide-soft); border:1px solid var(--tide); color:var(--ink); border-radius:6px; padding:10px 14px; margin-top:14px; font-size:13.5px;}
.flash.error{background:var(--warn-soft); border-color:var(--warn);}

.admin-table{font-size:12.5px;}
.correction-tag{font-size:10px; font-family:var(--font-mono); color:var(--warn); border:1px dashed var(--warn); border-radius:3px; padding:1px 6px; margin-left:6px;}

/* ---- 写真アップロード（現場のスマホから複数枚を撮影・選択） ---- */
.photo-input-row{display:flex; gap:8px; flex-wrap:wrap;}
.photo-pick-btn{display:inline-flex; align-items:center; gap:6px; cursor:pointer;}
.photo-count-label{font-size:12px; color:var(--tide); font-weight:700; margin-left:8px;}
.photo-thumbs{display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:8px; margin-top:12px;}
.photo-thumb{position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden; aspect-ratio:1/1; background:var(--paper);}
.photo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-thumb-remove{position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:999px; border:none; background:rgba(22,36,43,.72); color:#fff; font-size:12px; line-height:1; cursor:pointer;}
.photo-thumb-size{position:absolute; bottom:0; left:0; right:0; background:rgba(22,36,43,.6); color:#fff; font-size:9px; font-family:var(--font-mono); padding:2px 4px; text-align:right;}

/* ---- 登録済み写真の管理（差し替え・掲載先変更・削除） ---- */
.photo-manage-grid{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px;}
@media (min-width:640px){.photo-manage-grid{grid-template-columns:1fr 1fr;}}
.photo-manage-card{display:flex; gap:10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); padding:10px;}
.photo-manage-card .pm-thumb{flex:0 0 auto; width:76px; height:76px; border-radius:6px; overflow:hidden; background:var(--paper);}
.photo-manage-card .pm-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-manage-card .pm-body{flex:1; min-width:0; font-size:11.5px;}
.photo-manage-card .pm-tags{display:flex; gap:4px; flex-wrap:wrap; margin-top:4px;}
.photo-manage-card .pm-tag{font-family:var(--font-mono); font-size:9.5px; background:var(--tide-soft); color:var(--tide); border-radius:3px; padding:1px 5px;}
.photo-manage-card .pm-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
.photo-manage-card .pm-actions button, .photo-manage-card .pm-actions label{font-size:11px; padding:5px 10px;}
.pm-checkrow{display:flex; gap:4px; flex-wrap:wrap; margin-top:4px;}
.pm-checkrow label{display:inline-flex; align-items:center; gap:3px; font-size:10.5px; border:1px solid var(--line); border-radius:999px; padding:2px 7px; background:var(--paper);}
.pm-checkrow label:has(input:checked){background:var(--tide-soft); border-color:var(--tide); color:var(--tide);}
.photo-manage-card.is-top-photo{border-color:var(--tide); box-shadow:0 0 0 1px var(--tide) inset;}

/* ---- 公開ページ側の写真ギャラリー ---- */
.photo-gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); gap:8px; margin-top:10px;}
.photo-gallery a, .photo-gallery .pg-item{display:block; border-radius:8px; overflow:hidden; aspect-ratio:1/1; background:var(--paper-raised); border:1px solid var(--line);}
.photo-gallery img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-gallery-cap{font-size:10.5px; color:var(--ink-soft); margin-top:3px;}

/* ---- サイト全体共通：写真ライトボックス（クリックで元画像を拡大表示） ---- */
/* 生きもの図鑑メイン写真の .sg-lightbox（species-gallery.js）とは別物。クラス名を衝突させない。 */
img.pg-zoomable{cursor:zoom-in;}
.pg-lightbox{position:fixed; inset:0; z-index:200; background:rgba(22,36,43,.92); display:flex; align-items:center; justify-content:center; padding:56px 16px 16px;}
.pg-lightbox[hidden]{display:none;}
.pg-lightbox-stage{position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%;}
.pg-lightbox-img{display:block; max-width:92vw; max-height:88vh; width:auto; height:auto; object-fit:contain; border-radius:4px; background:var(--paper-raised);}
.pg-lightbox-close{position:fixed; top:14px; right:16px; width:36px; height:36px; border-radius:999px; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:16px; line-height:1; cursor:pointer; z-index:2;}
@media (max-width:640px){
  .pg-lightbox{padding:0;}
  .pg-lightbox-img{max-width:100vw; max-height:100vh; border-radius:0;}
  .pg-lightbox-close{top:10px; right:10px;}
}

/* ---- 生きもの図鑑：メルカリ風の写真ギャラリー ---- */
.species-gallery{display:block;}
.sg-main{display:flex; align-items:center; justify-content:center; width:100%; min-height:160px; max-height:420px; padding:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); cursor:zoom-in; box-shadow:var(--shadow);}
.sg-main-img{display:block; max-width:100%; max-height:420px; width:auto; height:auto; object-fit:contain;}
.sg-lightbox{position:fixed; inset:0; z-index:100; background:rgba(22,36,43,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:56px 16px 16px; gap:0;}
.sg-lightbox[hidden]{display:none;}
.sg-lightbox-stage{position:relative; display:flex; align-items:center; justify-content:center; width:100%; flex:1 1 auto; min-height:0;}
.sg-lightbox-img{display:block; max-width:92vw; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:4px;}
.sg-lightbox-close{position:fixed; top:14px; right:16px; width:36px; height:36px; border-radius:999px; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:16px; cursor:pointer; z-index:2;}
.sg-lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:24px; line-height:1; cursor:pointer; z-index:1;}
.sg-lightbox-prev{left:2px;}
.sg-lightbox-next{right:2px;}
.sg-lightbox-thumbs{flex:0 0 auto; display:flex; gap:8px; margin-top:14px; overflow-x:auto; max-width:92vw; padding:2px 4px 6px;}
.sg-lightbox-thumbs .sg-thumb{flex:0 0 auto; width:52px; height:52px; padding:0; border-radius:6px; overflow:hidden; border:2px solid transparent; background:rgba(255,255,255,.1); cursor:pointer; opacity:.65;}
.sg-lightbox-thumbs .sg-thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.sg-lightbox-thumbs .sg-thumb.is-active{border-color:#fff; opacity:1;}
@media (min-width:640px){.sg-main{max-height:480px;} .sg-main-img{max-height:480px;}}

footer.site-footer{border-top:1px solid var(--line); padding:24px 0 40px; margin-top:20px;}
footer.site-footer p{font-size:12px; color:var(--ink-soft); margin:0;}
footer.site-footer .footer-links{margin-top:8px;}
footer.site-footer .footer-links a{font-size:12px; color:var(--ink-soft);}

.timeline{margin-top:12px; display:grid; gap:10px;}
.timeline-item{display:grid; grid-template-columns:88px 1fr; gap:12px; border-left:2px solid var(--line); padding-left:12px;}
.timeline-date{font-family:var(--font-mono); font-size:11.5px; color:var(--tide); font-weight:700;}
.timeline-body{font-size:13px;}

.hidden{display:none !important;}

.sync-banner{display:flex; align-items:center; gap:8px; background:var(--sun-soft); border:1px solid var(--sun); border-radius:var(--radius); padding:10px 14px; font-size:12.6px; margin-top:14px;}
.sync-banner .dot{width:8px; height:8px; border-radius:50%; background:var(--sun); flex:0 0 auto;}
.sync-banner.ok{background:var(--tide-soft); border-color:var(--tide);}
.sync-banner.ok .dot{background:var(--tide);}

/* 法人情報・活動記録ページ */
.wrap-narrow{max-width:560px; margin:0 auto; padding:0 18px;}
.page-head{padding:28px 0 6px;}
.page-head .eyebrow{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; color:var(--tide); font-weight:700;}
.page-head h1{margin:6px 0 8px;}
.page-head .kicker{color:var(--ink-soft); font-size:14.5px; max-width:56ch;}
.prose p{font-size:14.5px; margin:0 0 14px;}
.info-table dl{display:grid; grid-template-columns:110px 1fr; gap:10px 16px; font-size:13.6px; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;}
.info-table dt{color:var(--ink-soft); font-weight:700;}
.filterbar{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.filterbar .chip{font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink-soft);}
.filterbar .chip.active{background:var(--tide); border-color:var(--tide); color:#fff;}
.result-count{font-size:12px; color:var(--ink-soft); margin-top:10px;}
.act-card{display:block; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-raised); padding:14px 16px; margin-top:10px; text-decoration:none !important; color:var(--ink);}
.act-card:hover{border-color:var(--tide);}
.act-card .act-meta{display:flex; gap:10px; align-items:center; font-size:11.5px; color:var(--ink-soft); font-family:var(--font-mono);}
.act-card .act-cat{background:var(--tide-soft); color:var(--tide); border-radius:999px; padding:2px 10px; font-weight:700;}
.act-card h4{margin:8px 0 4px; font-size:15px;}
.act-card p{margin:0; font-size:13px; color:var(--ink-soft);}
.sample-tag{font-size:10px; font-family:var(--font-mono); color:var(--sun); border:1px dashed var(--sun); border-radius:3px; padding:1px 6px; margin-left:6px;}
.linklike-danger{background:none; border:none; padding:0; font:inherit; font-size:12.6px; color:var(--warn); text-decoration:underline; cursor:pointer;}
.linklike{background:none; border:none; padding:0; font:inherit; font-size:12.6px; color:var(--tide); text-decoration:underline; cursor:pointer;}