/* ふくスポ Web版。Android版と同じ「スポーツ新聞風」(生成りの紙・墨・赤)。色は着せ替えで変わる(app.js が --xxx を入れ替える) */

:root {
  /* 文字の大きさの倍率(メニューの「文字の大きさ」で変わる。最初は「大きめ」) */
  --fs: 1.15;
  --ivory: #F3F0E8; --paper: #FBF9F4; --ink: #111111; --ink-soft: #55504A; --line: #B9B2A4; --divider: #E6E0D3;
  --accent: #C8102E; --topbar: #F3F0E8; --navbar: #E6E0D3; --onbar: #111111; --onbar-soft: #55504A; --nav-icon: #C8102E;
  --barwarn: #C8102E; --away: #2B4C7E;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --nav-h: 70px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: calc(15px * var(--fs)); line-height: 1.45;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); overflow-wrap: anywhere;
  -webkit-tap-highlight-color: rgba(0,0,0,0.06);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
img { display: block; }
input { font: inherit; }

/* ---------- 上の帯・下のメニュー ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; min-height: 44px;
  padding: env(safe-area-inset-top) 8px 0; background: var(--topbar); color: var(--onbar); border-bottom: 2px solid var(--ink);
}
.topbar .tb-text { flex: 1; text-align: center; font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px; }
.topbar .warn { color: var(--barwarn); font-weight: 800; }
.icon-btn { width: 40px; height: 40px; font-size: calc(22px * var(--fs)); line-height: 40px; text-align: center; color: var(--onbar); flex: none; }
.icon-sp { width: 40px; flex: none; }
.icon-btn.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 360px) { .tb-now { display: none; } }

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; background: var(--navbar);
  border-top: 1px solid var(--ink); box-shadow: 0 -3px 0 -2px var(--ink); padding-bottom: env(safe-area-inset-bottom);
}
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; min-height: var(--nav-h); padding: 3px 0 6px; color: var(--onbar-soft); min-width: 0; }
.nav-item .nav-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.nav-item.on { background: color-mix(in srgb, var(--onbar) 14%, transparent); color: var(--onbar); }
.nav-item.on .nav-bar { background: var(--nav-icon); }
.nav-item svg { width: 27px; height: 27px; fill: currentColor; margin-top: 9px; }
.nav-item.on svg { fill: var(--nav-icon); }
.nav-label { font-size: clamp(11px, 3.4vw, 14px); margin-top: 3px; white-space: nowrap; }
.nav-item.on .nav-label { font-weight: 800; }

.jump-btns { position: fixed; right: 12px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px); z-index: 25; display: flex; flex-direction: column; gap: 8px; }
.jump-btns button { width: 40px; height: 40px; border: 1px solid var(--ink); background: color-mix(in srgb, var(--paper) 92%, transparent); font-size: calc(14px * var(--fs)); text-align: center; }

/* ---------- 画面 ---------- */
.page { max-width: 760px; margin: 0 auto; padding: 12px 16px 80px; }
.sticky-sel { position: sticky; top: calc(46px + env(safe-area-inset-top)); z-index: 20; background: var(--ivory); padding: 8px 16px 6px; max-width: 760px; margin: 0 auto; }
.jump-row { margin-top: 6px; }

.row { display: flex; align-items: center; }
.row.top { align-items: flex-start; }
.row.bottom { align-items: flex-end; }
.row.stretch { align-items: stretch; }
.row.wrap { flex-wrap: wrap; }
.row.center { justify-content: center; }
.col { display: flex; flex-direction: column; }
.col.center { align-items: center; }
.grow { flex: 1 1 auto; min-width: 0; }
.minw0 { min-width: 0; }
.gap1 { gap: 1px; } .gap2 { gap: 2px; } .gap3 { gap: 3px; } .gap4 { gap: 4px; } .gap5 { gap: 5px; } .gap6 { gap: 6px; } .gap8 { gap: 8px; }
.gap10 { gap: 10px; } .gap12 { gap: 12px; } .gap14 { gap: 14px; } .gap16 { gap: 16px; } .gap18 { gap: 18px; }
.pad10 { padding: 10px; } .pad14 { padding: 14px; } .pad16 { padding: 16px; } .pad20 { padding: 20px; } .pad12v { padding: 12px 0; }
.left { text-align: left; } .center { text-align: center; }
.nowrap { white-space: nowrap; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.clamp2, .clamp3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp2 { -webkit-line-clamp: 2; } .clamp3 { -webkit-line-clamp: 3; }
.pre { white-space: pre-line; }
.hide { display: none !important; }
.hidden { visibility: hidden; }
.tap { cursor: pointer; }

/* 文字 */
.t-xs { font-size: calc(11px * var(--fs)); } .t-10 { font-size: calc(10px * var(--fs)); } .t-12 { font-size: calc(12px * var(--fs)); } .t-13 { font-size: calc(13px * var(--fs)); }
.t-sm { font-size: calc(12.5px * var(--fs)); } .t-label { font-size: calc(12.5px * var(--fs)); font-weight: 600; } .t-md { font-size: calc(14px * var(--fs)); }
.t-lg { font-size: calc(16px * var(--fs)); } .t-xl { font-size: calc(21px * var(--fs)); } .t-title { font-size: calc(14px * var(--fs)); font-weight: 800; }
.b { font-weight: 700; } .xb { font-weight: 800; }
.soft { color: var(--ink-soft); }
.red { color: var(--accent); }
.accent { color: var(--accent); }
.faint { color: var(--line); }
.headline { font-family: var(--serif); font-weight: 900; line-height: 1.2; }
.headline.w52 { width: 52px; flex: none; } .headline.w58 { width: 58px; flex: none; } .headline.w64 { width: 64px; flex: none; }

.section-label { align-self: flex-start; display: inline-block; background: var(--ink); color: var(--ivory); font-size: calc(11px * var(--fs)); font-weight: 800; letter-spacing: 2px; padding: 2px 8px; }
.section-label.red { background: var(--accent); }
.double-rule { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); height: 4px; }
.thin-rule { border-top: 1px solid var(--ink); }
.thin-rule.soft { border-top-color: var(--line); }

.card { border: 1px solid var(--ink); background: var(--paper); border-radius: 3px; }
.box { border: 1px solid var(--ink); background: var(--paper); padding: 12px; }
.box.soft-border { border-color: var(--line); padding: 10px; }
.box.red-border { border: 1.5px solid var(--accent); }
.note-box { background: var(--divider); padding: 10px 12px; border-radius: 3px; }

/* ボタン */
.chip { border: 1px solid var(--ink); background: var(--paper); color: var(--ink); font-size: calc(12px * var(--fs)); padding: 7px 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: inline-block; }
.chip.on { background: var(--ink); color: var(--ivory); font-weight: 800; }
.chip.small { font-size: calc(11px * var(--fs)); padding: 7px 2px; }
.chip.sort { padding: 7px 0; font-size: clamp(9.5px, 2.9vw, 12px); }
.chip.b { font-weight: 700; font-size: clamp(10px, 3.2vw, 13px); padding: 7px 4px; }
.tabchip { padding: 8px 4px; font-size: clamp(10px, 3.3vw, 13px); }
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 10px 14px; border-radius: 20px; font-size: calc(14px * var(--fs)); font-weight: 600; min-height: 42px; }
.btn.wide { display: flex; width: 100%; }
.btn.outline { border: 1px solid var(--line); background: #fff; }
.btn.outline-accent { border: 1.5px solid var(--accent); color: var(--accent); font-weight: 800; }
.btn.accent { background: var(--accent); color: #fff; }
.btn.ink { background: var(--ink); color: #fff; }
.link-accent { color: var(--accent); font-size: calc(13.5px * var(--fs)); padding: 6px 0; display: block; }
.link-accent.xs { font-size: calc(11px * var(--fs)); }
.toggle-h { display: block; width: 100%; font-weight: 800; font-size: calc(13.5px * var(--fs)); padding: 4px 0; }
.toggle-row { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 0; min-width: 0; }
.choice { border: 1px solid var(--line); background: var(--paper); padding: 10px 0; text-align: center; border-radius: 3px; font-size: calc(13.5px * var(--fs)); font-weight: 600; }
.choice.on { color: #fff; }

/* チーム切り替え */
.team-selector .row { gap: 4px; }
.team-chip { display: flex; flex-direction: column; border: 1px solid var(--ink); background: var(--paper); min-width: 0; }
.team-chip .bar { height: 4px; background: var(--tc); }
.team-chip .lbl { height: 30px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: clamp(8.5px, 2.75vw, 11.5px); white-space: nowrap; overflow: hidden; padding: 0 2px; }
.team-chip.on { background: var(--tc); border-color: var(--tc); color: #fff; }
.team-line { height: 5px; margin-top: 8px; }

/* 札 */
.ha-tag { display: inline-block; flex: none; border: 1px solid var(--away); color: var(--away); background: var(--paper); font-size: calc(10px * var(--fs)); font-weight: 800; letter-spacing: .5px; padding: 1px 5px; white-space: nowrap; line-height: 1.3; }
.ha-tag.home { border-color: var(--accent); background: var(--accent); color: #fff; }
.ha-tag.big { font-size: calc(14px * var(--fs)); padding: 1px 7px; }
.date-col .ha-tag { margin-top: 2px; }
.badge { display: inline-block; align-self: flex-start; font-size: calc(10px * var(--fs)); font-weight: 800; padding: 1px 5px; white-space: nowrap; color: #fff; background: var(--accent); }
.badge.special { color: var(--ivory); }
.badge.outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.source-tag { border: 1px solid var(--ink); font-size: calc(11px * var(--fs)); font-weight: 800; padding: 0 5px; white-space: nowrap; flex: none; }
.cat-tag { border: 1px solid var(--ink); font-size: calc(10px * var(--fs)); font-weight: 800; padding: 0 5px; white-space: nowrap; }
.invite-tag { border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; font-size: calc(11px * var(--fs)); padding: 3px 6px; white-space: nowrap; flex: none; }
.team-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 900; flex: none; }
.countdown { border: 1.5px solid var(--accent); background: var(--paper); color: var(--accent); font-weight: 800; font-size: calc(13.5px * var(--fs)); padding: 2px 8px; white-space: nowrap; flex: none; }
.feature-tag { background: var(--accent); color: #fff; font-family: var(--serif); font-weight: 900; font-size: calc(16px * var(--fs)); padding: 1px 10px; flex: none; }
.all-tag { background: var(--ink); color: var(--paper); font-size: calc(10px * var(--fs)); font-weight: 800; padding: 1px 5px; }

/* 写真 */
.ph { position: relative; display: inline-block; overflow: hidden; flex: none; background: transparent; }
.ph.keep { border: 1px solid var(--line); }
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: center; cursor: zoom-in; }
.ph.top img { object-position: center top; }
.ph.contain img { object-fit: contain; height: auto; }
.ph-name { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(17,17,17,.6); color: #fff; font-size: calc(8px * var(--fs)); line-height: 10px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px; }
.fphoto .ph-name { font-size: calc(11px * var(--fs)); line-height: 14px; padding: 3px 6px; text-align: left; }
.phw.beside { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.ph-name-b { font-size: calc(11px * var(--fs)); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.prow { display: flex; gap: 8px; overflow: hidden; }
.prow[data-count="3"] > .pitem:nth-child(n+4), .prow[data-count="4"] > .pitem:nth-child(n+5), .prow[data-count="5"] > .pitem:nth-child(n+6) { display: none; }
.prow-wrap { display: flex; flex-direction: column; gap: 4px; }
.pitem { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.pl-no, .pl-cap { font-size: calc(11px * var(--fs)); color: var(--ink-soft); text-align: center; }
.pl-name { font-size: calc(10px * var(--fs)); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pl-cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pbox { display: inline-flex; flex: none; }
.banner .ph { display: block; }
.banner-cap { font-size: calc(11px * var(--fs)); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll .chip { flex: none; }
.hscroll .prow { overflow: visible; }

/* 一面 */
.news-row { display: block; padding: 12px; }
.news-thumb { position: relative; width: 48px; height: 48px; border-radius: 3px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.news-thumb .ph { position: absolute; inset: 0; }
.game-card { padding: 14px; }
.date-col { width: 56px; flex: none; display: flex; flex-direction: column; align-items: center; }
.matchday { border: 2px solid var(--accent); }
.fc { border: 1px solid var(--line); padding: 5px 8px; display: flex; flex-direction: column; gap: 2px; }
.fc-row { display: flex; align-items: center; padding: 2px 0; }
.fc-row.head { align-items: flex-end; }
.fc-l { flex: 1.1; min-width: 0; white-space: nowrap; overflow: hidden; }
.fc-c { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; min-width: 0; white-space: nowrap; }
.scorebox { display: flex; align-items: center; justify-content: space-evenly; border: 2px solid var(--ink); background: var(--paper); padding: 10px 12px; }
.prev-line { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); padding: 8px 10px; }
.multi-game { border: 1.5px solid; }
.h2h { border: 1px solid var(--line); padding: 5px 8px; display: flex; flex-direction: column; gap: 2px; }
.preview .pv-r { display: flex; align-items: center; padding: 1px 0; }
.preview .pv-r > :first-child, .preview .pv-r > :last-child { flex: 1; text-align: center; min-width: 0; }
.preview .pv-r .mid { width: 44px; text-align: center; flex: none; }
.brief-row { display: flex; align-items: stretch; }
.vline { width: 1px; background: var(--ink); margin: 0 8px; flex: none; }
.ha-card .vline { margin: 0; }
.feature .carousel { overflow: hidden; touch-action: pan-y; transition: height .2s; user-select: none; -webkit-user-select: none; }
.feature .track { display: flex; align-items: flex-start; gap: 16px; will-change: transform; }
.feature .slide { flex: 0 0 100%; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.feature .slide img { -webkit-user-drag: none; pointer-events: none; }
.fphoto { position: relative; width: 150px; height: 200px; flex: none; overflow: hidden; }
.fphoto .ph { position: absolute; inset: 0; }
.fphoto .ph img { cursor: inherit; }
.fgraphic { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px; color: #fff; text-align: center; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: none; }
.dot.on { width: 10px; height: 10px; background: var(--accent); }
@media (max-width: 380px) { .fphoto { width: 120px; height: 160px; } }

/* 特別な日・PV */
.special-banner { border: 3px solid var(--accent); padding: 3px; }
.special-banner > .bars { display: flex; height: 6px; outline: 1px solid var(--accent); }
.special-banner .in { border: 1px solid var(--accent); border-top: 0; background: var(--paper); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.sp-label { background: var(--accent); color: var(--ivory); font-size: calc(12px * var(--fs)); font-weight: 800; padding: 2px 8px; }
.sp-conf { border: 1px solid var(--ink-soft); color: var(--ink-soft); font-size: calc(11px * var(--fs)); font-weight: 700; padding: 1px 6px; }
.sp-conf.on { border-color: var(--accent); color: var(--accent); }
.sp-game { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.sp-game .vbar { width: 4px; height: 30px; flex: none; }
.pv-item { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--accent); background: var(--paper); padding: 10px; }
.pv-item.auto { border-color: var(--ink-soft); }

/* 試合 */
.summary-tile { flex: 1; border: 1px solid var(--ink); background: var(--paper); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0; }
.summary-tile.on { border-width: 2px; background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
.month-h { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 0 4px; border-bottom: 2px solid var(--ink); }
.sched { border: 1px solid var(--line); background: #fff; border-radius: 3px; padding: 12px; box-shadow: 0 1px 1px rgba(0,0,0,.06); cursor: pointer; }
.sched.sel { border-width: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12); }
.result-badge { display: flex; flex-direction: column; align-items: flex-end; padding: 4px; flex: none; }
.inline-detail { border: 2px solid; background: #fff; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.quick { padding: 12px; border-radius: 3px; }
.score-side { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.score-side b { font-size: calc(14px * var(--fs)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.score-side .bar { width: 36px; height: 3px; margin-top: 3px; }
.result-pill { border-radius: 6px; padding: 4px 10px; font-size: calc(13.5px * var(--fs)); font-weight: 600; }
.stats-table { margin-top: 4px; }
.stats-row { display: flex; align-items: center; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: calc(14px * var(--fs)); }
.stats-row.head { font-weight: 800; border-bottom: 2px solid var(--ink); }
.stats-row.bold { font-weight: 800; }
.stats-row.hl span:last-child { color: var(--accent); }
.ha-card { display: flex; border: 1px solid var(--ink); background: var(--paper); padding: 10px 0; }
.ha-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 4px; min-width: 0; }

/* シート・ダイアログ */
.sheet-back { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto; background: var(--paper); z-index: 41; border-radius: 12px 12px 0 0; padding-bottom: env(safe-area-inset-bottom); }
.sheet-in { padding: 16px 16px 32px; max-width: 760px; margin: 0 auto; }
.dialog { position: fixed; left: 16px; right: 16px; top: 20vh; z-index: 41; background: var(--paper); padding: 16px; border-radius: 8px; max-width: 520px; margin: 0 auto; }

/* 表 */
.tbl { border: 1px solid var(--ink); background: var(--paper); }
.tr { border-bottom: 1px solid var(--line); padding: 6px; font-size: calc(12px * var(--fs)); }
.tr > .row > span, .tr.th > span { text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr .l { text-align: left; justify-content: flex-start; white-space: normal; }
.tr.th { display: flex; background: var(--ink); color: var(--paper); font-weight: 700; font-size: calc(11px * var(--fs)); padding: 5px 6px; }
.tr.tap { cursor: pointer; }
.tr-detail { padding: 4px 0 0 4px; display: flex; flex-direction: column; gap: 2px; }
.ts-cell { display: flex; flex-direction: column; align-items: center; font-size: calc(15px * var(--fs)); }
.season-cell { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.season-cell .fit { font-size: clamp(13px, 4.4vw, 18px); font-weight: 800; white-space: nowrap; }
.season-cell .fit.sm { font-size: clamp(11px, 3.6vw, 14px); }
.season-cell .fit.accent { color: var(--accent); }

/* 選手 */
.stat-cell { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.stat-cell b { white-space: nowrap; }
.stat-row { display: flex; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
.hl-row { display: flex; align-items: center; background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 4px 8px; }
.hl-box { display: flex; flex-direction: column; background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 4px 8px; }
.statlines { padding-top: 2px; }
.gl-row { padding: 4px 0; }
.log-row { border: 1px solid var(--line); padding: 4px 8px; }
.opp-match { padding: 3px 0; }

/* トピック */
.radar-row { display: flex; border: 1px solid var(--ink); background: var(--paper); padding: 12px; }
.search { position: relative; }
.search input { width: 100%; border: 1px solid var(--ink-soft); border-radius: 4px; padding: 12px 40px 12px 12px; background: #fff; font-size: calc(16px * var(--fs)); }
.search .clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding: 8px; color: var(--ink-soft); }
.past-toggle { display: block; width: 100%; border: 1px solid var(--ink); background: var(--paper); padding: 10px 12px; font-weight: 800; font-size: calc(14px * var(--fs)); margin-top: 8px; text-align: left; }
.past-toggle.on { background: var(--ink); color: var(--ivory); }
.check { display: flex; align-items: center; gap: 8px; font-size: calc(14px * var(--fs)); padding: 4px 0; }
.check input { width: 20px; height: 20px; }
.input { width: 100%; border: 1px solid var(--ink-soft); border-radius: 4px; padding: 12px; background: #fff; font-size: calc(16px * var(--fs)); }

/* メニュー */
.menu-row { display: flex; align-items: center; width: 100%; border: 1px solid var(--ink); background: var(--paper); padding: 14px; gap: 8px; }

/* 写真の拡大・お知らせ */
.zoom { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.zoom[hidden] { display: none; }
.zoom img { max-width: 100%; max-height: 80vh; min-width: min(100%, 320px); object-fit: contain; }
.zoom-cap { color: #fff; margin-top: 10px; font-size: calc(14px * var(--fs)); text-align: center; }
.zoom-close { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 14px; color: #fff; font-size: calc(32px * var(--fs)); }
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 64px); z-index: 60; background: rgba(17,17,17,.9); color: #fff; padding: 12px 14px; border-radius: 8px; font-size: calc(14px * var(--fs)); text-align: center; }
.toast[hidden] { display: none; }

@media (min-width: 700px) {
  body { font-size: calc(16px * var(--fs)); }
}

/* ---------- 自分の記録:持ち物チェック・写真・コメント・SNS投稿(v1.002) ---------- */
.grow1 { flex: 1 1 0; min-width: 0; }
.pad8v { padding: 8px 0; }
.row.top { align-items: flex-start; }
.packing { border: 1px solid var(--ink); background: var(--paper); padding: 14px; }
.pk-head { width: 100%; text-align: left; }
.pk-edit { color: var(--accent); font-weight: 800; font-size: calc(14px * var(--fs)); padding: 6px 0 6px 10px; flex: none; }
.pk-group { font-size: calc(14px * var(--fs)); padding: 10px 0 2px; }
.pk-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 4px; border-bottom: 1px solid var(--divider); font-size: calc(16px * var(--fs)); }
.pk-row.on .pk-label { color: var(--ink-soft); text-decoration: line-through; }
.pk-box { width: 20px; height: 20px; flex: none; border: 2px solid var(--ink-soft); border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; font-size: calc(14px * var(--fs)); font-weight: 900; line-height: 1; }
.pk-row.on .pk-box { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.pk-row.edit { padding: 4px 0 4px 12px; }
.pk-del { color: var(--accent); font-weight: 700; font-size: calc(14px * var(--fs)); padding: 10px 12px; flex: none; }
.pk-btn { padding: 8px 10px; font-size: calc(14px * var(--fs)); white-space: nowrap; min-width: 0; }
.ph-count { display: inline-block; border: 1px solid var(--ink); color: var(--ink); font-size: calc(10px * var(--fs)); font-weight: 700; padding: 0 3px; margin-right: 4px; line-height: 1.4; }
.photo-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.ph-tile { flex: none; width: 72px; height: 72px; border: 1px solid var(--ink); background: var(--divider); display: flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; }
.ph-tile img { width: 100%; height: 100%; object-fit: contain; }
.ph-tile.add { border-color: var(--ink-soft); background: var(--paper); flex-direction: column; cursor: pointer; }
.ph-tile.add b { font-size: calc(22px * var(--fs)); line-height: 1.1; }
.ph-tile.add span { font-size: calc(10px * var(--fs)); }
.ph-tile.add.busy { opacity: .7; cursor: default; }
.np-photo { cursor: zoom-in; }
.np-frame { width: 100%; border: 1px solid var(--ink); background: var(--divider); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.np-frame img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.np-fit { display: flex; justify-content: center; }
.np-img { border: 1px solid var(--ink); display: block; }
.np-cap { font-size: calc(11px * var(--fs)); line-height: 15px; color: var(--ink); }
.share-btn { padding: 8px 6px; font-size: calc(13px * var(--fs)); white-space: nowrap; min-width: 0; }
.btn:disabled { opacity: .5; }
textarea.input { resize: vertical; min-height: 64px; font-family: inherit; line-height: 1.5; }
.pviewer { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 12px; }
.pviewer[hidden] { display: none; }
.pv-in { width: 100%; max-width: 760px; background: var(--ink); color: var(--ivory); padding: 12px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 24px); overflow-y: auto; }
.pv-img { height: min(420px, 60vh); display: flex; align-items: center; justify-content: center; }
.pv-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pv-cap { font-size: calc(12px * var(--fs)); }
.pv-nav { display: flex; align-items: center; }
.pv-nav span { flex: 1; text-align: center; font-size: calc(12px * var(--fs)); }
.pv-nav button, .pv-actions button { color: var(--ivory); padding: 8px 10px; font-size: calc(14px * var(--fs)); }
.pv-nav button:disabled { opacity: .35; }
.pv-hint { font-size: calc(10px * var(--fs)); opacity: .7; text-align: center; }
.pv-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.pv-ask { font-size: calc(12px * var(--fs)); width: 100%; }
.pv-actions .pv-danger { background: var(--accent); color: #fff; border-radius: 3px; }
.ph-tile.add { position: relative; }
.vh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
#cm-save { flex: none; white-space: nowrap; }

/* ---------- v1.004 ---------- */
.update-bar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px); z-index: 58; display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--ivory); padding: 8px 8px 8px 14px; border-radius: 8px; font-size: calc(14px * var(--fs)); font-weight: 700; max-width: 736px; margin: 0 auto; }
.update-bar[hidden] { display: none; }
.update-bar .btn { min-height: 36px; padding: 6px 14px; }
.ios-guide { border: 2px solid var(--accent); background: var(--paper); padding: 12px 14px; }
.ios-guide ol { margin: 4px 0 0; padding-left: 1.4em; }
.ios-guide li { margin: 2px 0; }
.share-ic { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; fill: currentColor; }
.howto-feature { border: 1px solid var(--ink); background: var(--paper); }
.howto-feature img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); }
.howto-feature .hf-body { padding: 10px 12px 12px; }
.howto-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .howto-grid { grid-template-columns: 1fr 1fr; } }
.howto-feature { align-items: stretch; overflow: hidden; }
.howto-feature img { width: 44%; max-width: 200px; height: auto; max-height: 300px; flex: none; border-bottom: 0; border-right: 1px solid var(--line); object-fit: cover; object-position: top; align-self: flex-start; }

/* 文字を大きくしたとき、横に並んだボタンの文字が切れないよう、幅を等分して折り返す(v1.007) */
.row > .btn.grow { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; line-height: 1.25; }

/* 今季のチームの数字:相手との比べ(v1.011) */
.ts-cell { position: relative; padding: 6px 2px 4px; border-radius: 6px; }
.ts-cell.lose b { font-weight: 600; }
.ts-win { align-self: center; margin-bottom: 2px; color: #fff; font-size: calc(10px * var(--fs)); font-weight: 800; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.ts-mark { display: flex; align-items: center; justify-content: center; font-size: calc(14px * var(--fs)); }
.ts-summary { display: flex; gap: 4px; border: 1px solid var(--line); background: var(--paper); border-radius: 6px; padding: 8px 10px; }
.ts-count { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }
.ts-count b { font-size: calc(26px * var(--fs)); line-height: 1.1; font-family: var(--serif); font-weight: 900; }
.ts-count .t-xs { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ts-summary .center { text-align: center; }
.ts-vs { flex: none; align-self: center; }

/* メニュー:チームの色(v1.013) */
.menu-row.team { border-color: var(--tc); border-left-width: 6px; }
.chip.team { border-color: var(--tc); color: var(--tc); font-weight: 700; }
.chip[data-team-chip] { border-color: var(--tc); color: var(--tc); font-weight: 700; border-left-width: 5px; }
.chip.on[data-team-chip] { background: var(--tc); color: #fff; }