/* ============================================================
   atlas.css — 2026-09 redesign ("地図帳＋フィールドノート")
   Loaded after common.css. Two jobs:
     1. Site-wide flattening on top of the retuned tokens (paper / ink /
        hairlines, no shadows, no rounded corners).
     2. Styles for the atlas templates: RuleAtlasLayout (country /
        prefecture guides) and the home page (pages/index.astro).
   Colours come from src/styles/tokens.css only — no raw hex here except
   in comments. See docs/design-refresh.md §4 for the rules.
   ============================================================ */

/* ---------- 1. site-wide ---------- */
:root { --atlas-max: 1480px; --atlas-read: 1120px; --atlas-gutter: 24px; }

body { color: var(--text-color); background: var(--body-color); }
a { color: var(--primary-color); }
a:hover { color: var(--primary-hover); }
h1, h2, h3, h4, h5, h6 { color: var(--text-color); letter-spacing: -0.005em; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Flatten leftovers from the Bootstrap era: no shadows, square corners. */
.shadow, .shadow-sm, .shadow-lg, .shadow-bottom, .card, .btn, .badge, .alert, .modal-content,
.match-height, .apply-bg, .site-navbar, .site-drawer__panel, .gp-strip, .update-milestone-card,
.clue-summary-panel, .notices, .notice, .tab-content, .nav-tabs, .img-thumbnail, .figure-img,
.rule-hero-symbol, .references-section, .main-information, .qz-card, .qz-btn, .qz-summary {
  box-shadow: none !important;
  border-radius: 0 !important;
}
img, .img-fluid, iframe { border-radius: 0 !important; }
.btn-primary { background: var(--primary-color); border-color: var(--primary-color); color: var(--primary-text); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

/* Header: paper, hairline, no white bar */
header.sticky-top.bg-white, header.atlas-header, .site-navbar { background: var(--body-color) !important; }
header.sticky-top, header.atlas-header { position: sticky; top: 0; z-index: 1030; border-bottom: 1px solid var(--border-soft); }
.navbar-brand__icon { background: var(--primary-color) !important; color: var(--primary-text) !important; border-radius: 0 !important; }
.navbar-primary a { font-weight: 600; }
.navbar-primary a.is-active { border-bottom: 2px solid var(--text-color) !important; color: var(--text-color) !important; }

/* Footer: quiet, hairline top */
.site-footer { background: var(--body-color) !important; border-top: 1px solid var(--border-soft); color: var(--text-muted); }
.site-footer a { color: var(--text-color); }
.site-footer .footer-bottom { border-top: 1px solid var(--border-soft); }

/* Guide-page leftovers (DefaultLayout hubs, industry): tone the navy hero down to ink */
.rule-hero-section { background: var(--text-color) !important; }
.section-title, .content h2.section-title { border-color: var(--text-color); }
.clue-summary-panel { background: var(--surface-color); border: 1px solid var(--border-soft); border-top: 2px solid var(--text-color); }

/* Skip link */
.skip-link { background: var(--text-color); color: var(--body-color); }

/* ---------- 2. atlas layout (RuleAtlasLayout) ---------- */
.atlas { padding: 0 0 56px; }
.atlas__wrap { max-width: var(--atlas-max); margin: 0 auto; padding: 0 var(--atlas-gutter); }
.atlas .atlas-h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 4px; line-height: 1.3; }
.atlas .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.atlas-btn {
  font: inherit; font-size: 0.85rem; color: var(--text-color); background: var(--surface-color);
  border: 1px solid var(--border-strong); padding: 5px 12px; cursor: pointer; white-space: nowrap; line-height: 1.5;
}
.atlas-btn:hover { background: var(--surface-alt); }
.atlas-btn[aria-pressed="true"] { background: var(--text-color); color: var(--body-color); border-color: var(--text-color); }
.atlas-btn--sm { padding: 2px 10px; font-size: 0.78rem; }

/* hero (photo band: heroGallery[0] → a photo from the page's clues → bg → default) */
.atlas-hero { padding: 34px 0 16px; }
.atlas-hero--photo { position: relative; margin: 0 calc(-1 * var(--atlas-gutter)); padding: 250px var(--atlas-gutter) 18px; min-height: 420px; color: #fff; }
.atlas-hero__photo { position: absolute; inset: 0; overflow: hidden; background: var(--text-color); }
.atlas-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; }
.atlas-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,22,31,0.15) 0%, rgba(16,22,31,0.25) 45%, rgba(16,22,31,0.82) 100%); }
.atlas-hero--photo > :not(.atlas-hero__photo) { position: relative; z-index: 1; }
.atlas-hero--photo .atlas-crumb, .atlas-hero--photo .atlas-crumb a, .atlas-hero--photo .atlas-hero__lead, .atlas-hero--photo .atlas-hero__meta { color: rgba(255,255,255,0.82); }
.atlas-hero--photo .atlas-hero__title { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.atlas-hero--photo .atlas-hero__meta b { color: #fff; }
.atlas-hero--photo .atlas-hero__flag { border-color: rgba(255,255,255,0.6); }
.atlas-crumb { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.04em; }
.atlas-crumb a { color: var(--text-muted); }
.atlas-crumb a:hover { color: var(--text-color); }
.atlas-crumb__sep { margin: 0 6px; opacity: 0.7; }
.atlas-hero__title { display: flex; align-items: center; gap: 14px; font-size: 2.1rem; line-height: 1.2; font-weight: 800; margin: 8px 0 6px; }
.atlas-hero__flag { width: 46px; height: 31px; object-fit: cover; border: 1px solid var(--border-soft); flex: none; }
.atlas-hero__lead { color: var(--text-muted); max-width: 640px; margin: 0 0 4px; }
.atlas-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.82rem; color: var(--text-muted); margin: 6px 0 0; }
.atlas-hero__meta b { color: var(--text-color); font-weight: 600; }
.atlas-you[hidden] { display: none; }

/* chapter nav (sticky under the site header) */

/* hero jump buttons (クイズ / 基本情報 / 関連動画) */
.atlas-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; position: relative; z-index: 1; }
.atlas-hero--photo .atlas-btn--hero { color: #fff; border-color: rgba(255, 255, 255, 0.7); background: rgba(0, 0, 0, 0.25); }
.atlas-hero--photo .atlas-btn--hero:hover { background: rgba(0, 0, 0, 0.45); text-decoration: none; }
/* 1. glance */
.atlas-glance { padding-top: 22px; }
.atlas-glance__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); margin: 0 0 10px; }
.atlas-glance__cell { display: block; padding: 14px 16px 12px 0; color: inherit; text-decoration: none; }
.atlas-glance__cell:hover { text-decoration: none; color: inherit; }
.atlas-glance__k { display: block; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-muted); }
.atlas-glance__v { display: block; font-weight: 600; line-height: 1.5; font-size: 0.95rem; }
.atlas-glance__v mark { background: none; color: inherit; font-weight: 800; border-bottom: 2px solid var(--primary-color); }
/* headline value (".ge", "左側通行", "ジョージア語") with the full clue small beneath */
.atlas-glance__big { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; margin: 4px 0 4px; letter-spacing: 0.01em; border-left: 3px solid var(--cat, var(--primary-color)); padding-left: 10px; }
/* a phrase ("カメラが低い") instead of a code (".jp", "011") would wrap over three lines at 1.7rem */
.atlas-glance__big--long { font-size: 1.15rem; line-height: 1.35; }
.atlas-glance__t { display: block; font-size: 0.8rem; line-height: 1.55; color: var(--text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.atlas-glance__t mark { background: none; color: inherit; font-weight: 700; }
.atlas-glance__cell--basic { cursor: default; }
.atlas-features { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--border-soft); }
.atlas-features li { padding: 10px 0; border-bottom: 1px solid var(--border-soft); line-height: 1.75; }
.atlas-features .quiz, .atlas-entry__text .quiz { font-weight: 700; border-bottom: 2px solid var(--primary-color); }
.atlas-ref { margin-left: 4px; font-size: 0.8em; }
.atlas-strip { display: flex; flex-wrap: wrap; gap: 6px 26px; font-size: 0.86rem; color: var(--text-color); padding: 6px 0 4px; }
.atlas-strip__k { color: var(--text-muted); margin-right: 4px; }
.atlas-strip a { color: var(--text-color); border-bottom: 1px solid var(--border-strong); }
.atlas-strip a:hover { color: var(--primary-color); border-bottom-color: var(--primary-color); text-decoration: none; }

/* 2. clues */
.atlas-clues { display: grid; grid-template-columns: minmax(0, var(--atlas-read)); margin-top: 34px; }
.atlas-cats { position: sticky; top: calc(var(--site-header-h, 56px) + 16px); align-self: start; font-size: 0.86rem; }
.atlas-cats__h { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; font-weight: 700; }
.atlas-cats__link { display: block; padding: 5px 0 5px 12px; color: var(--text-muted); border-left: 2px solid transparent; text-decoration: none; }
.atlas-cats__link:hover { color: var(--text-color); text-decoration: none; }
.atlas-cats__link.is-on { color: var(--text-color); font-weight: 700; border-left-color: var(--cat, var(--text-color)); }
.atlas-cats__sub { margin-top: 22px; }
.atlas-cats__sub .atlas-cats__link.is-on { border-left-color: var(--primary-color); }
.atlas-group { margin: 34px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--text-color); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.atlas-group:first-child { margin-top: 0; }
.atlas-group[hidden] { display: none; }
.atlas-group__hint { color: var(--text-muted); font-size: 0.82rem; }
.atlas-group__map { margin-left: auto; font-size: 0.82rem; color: var(--text-muted); border-bottom: 1px solid var(--border-soft); }
/* the three tiers (全国 → 地域 → 都市・町): numbered headers; scope groups inside are sub-headings */
.atlas-steps { margin: 0 0 22px; padding: 12px 16px; border: 1px solid var(--border-strong); background: var(--surface-alt); }
.atlas-steps__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; counter-reset: none; }
.atlas-steps__list a { display: inline-flex; align-items: center; gap: 8px; color: var(--text-color); text-decoration: none; font-weight: 700; font-size: 0.95rem; }
.atlas-steps__list a:hover { color: var(--primary-color); }
.atlas-steps__list b { display: inline-grid; place-items: center; width: 24px; height: 24px; background: var(--text-color); color: var(--body-color); font-size: 0.8rem; font-weight: 700; }
.atlas-steps__list small { font-weight: 400; color: var(--text-muted); }
.atlas-tier { display: flex; gap: 16px; align-items: flex-start; margin: 44px 0 6px; padding-bottom: 10px; border-bottom: 2px solid var(--text-color); }
.atlas-tier[hidden] { display: none; }
.atlas-steps + .atlas-tier { margin-top: 10px; }
.atlas-tier__n { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: var(--text-color); color: var(--body-color); font-size: 1.5rem; font-weight: 700; }
.atlas-tier__title { margin: 0; font-size: 1.45rem; font-weight: 800; line-height: 1.2; }
.atlas-tier__title small { font-weight: 400; margin-left: 10px; color: var(--text-muted); font-size: 0.85rem; }
.atlas-tier__desc { margin: 4px 0 0; font-size: 0.86rem; color: var(--text-muted); }
.atlas-group--sub { margin: 30px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border-strong); }
.atlas .atlas-h3 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
/* sub-headings from the body (景色 / 産業 / 植生) inside a tier or place group */
.atlas-group--sec { margin: 26px 0 2px; padding-bottom: 3px; border-bottom: 1px solid var(--border-soft); }
.atlas-h3--sec { font-size: 0.9rem; letter-spacing: 0.06em; color: var(--text-muted); }
/* nested bullets of a summary line, and tab details folded into it */
.atlas-entry__points { margin: 6px 0 0 1.2em; padding: 0; font-size: 0.92rem; line-height: 1.7; }
.atlas-entry__points li { margin: 0; }
.atlas-entry__ex-inline { font-size: 0.72rem; color: var(--text-muted); margin-left: 5px; border-bottom: 1px solid var(--border-soft); }
/* notes attached to a clue (tip / warning / info) — a left rule in the category colour, no box */
.atlas-entry__note { margin-top: 8px; padding: 2px 0 2px 12px; border-left: 3px solid var(--border-strong); font-size: 0.92rem; line-height: 1.7; }
.atlas-entry__note--tip { border-left-color: var(--cat, var(--primary-color)); }
.atlas-entry__note--warning { border-left-color: var(--cat-confusable, #9A2D24); }
.atlas-entry__note--info { border-left-color: var(--border-strong); }
.atlas-entry__note-kind { display: inline-block; margin-right: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); }
.atlas-entry__note--warning .atlas-entry__note-kind { color: var(--cat-confusable, #9A2D24); }
.atlas-entry__caption { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--text-color); line-height: 1.5; }
.atlas-entry__caption + .atlas-entry__credit { margin-top: 1px; }
.atlas-entry__detail { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border-soft); }
.atlas-entry__detail .atlas-entry__sc { display: block; margin: 0 0 2px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted); }
.atlas-entry__detail .atlas-entry__text { font-size: 0.95rem; }
.atlas-entry__ex--detail { display: block; margin-top: 4px; font-size: 0.78rem; color: var(--text-muted); }
.atlas-entry__ex--detail a { color: var(--text-muted); margin-left: 6px; border-bottom: 1px solid var(--border-soft); }
/* 4. basics, 5. videos */
.atlas-basics { margin-top: 44px; max-width: var(--atlas-read); }
.atlas-videos { margin-top: 44px; }
.atlas-videos .video-section { border: 0; padding: 0; background: none; margin: 0; }
.atlas-videos .video-section .section-title { display: none; }
/* sign / logo SVGs: full size says nothing, so a row of small pictures */
.atlas-entry__fig--small { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.atlas-entry__fig--small img { width: auto; max-width: 200px; max-height: 160px; padding: 10px; }
.atlas-entry { padding: 20px 0 18px; border-top: 1px solid var(--border-soft); }
.atlas-entry[hidden] { display: none; }
.atlas-entry:target { background: var(--surface-alt); box-shadow: 0 0 0 12px var(--surface-alt); }
.atlas-entry__cat { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; color: var(--cat, var(--text-muted)); margin-bottom: 2px; }
.atlas-entry__sc { color: var(--text-muted); font-weight: 500; letter-spacing: 0.02em; margin-left: 10px; }
.atlas-entry__text { margin: 0; line-height: 1.85; }
.atlas-entry__text mark { background: none; color: var(--text-color); font-weight: 700; border-bottom: 2px solid var(--cat, var(--primary-color)); }
.atlas-entry__foot { margin-top: 8px; font-size: 0.78rem; color: var(--text-muted); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.atlas-entry__foot a { color: var(--text-muted); border-bottom: 1px solid var(--border-soft); margin-left: 6px; }
.atlas-entry__foot a:hover { color: var(--primary-color); text-decoration: none; }
.atlas-entry__conf { letter-spacing: 1px; }
/* photos are the point of the game: full column width, pairs side by side (min 300 each) */
.atlas-entry__fig { margin: 14px 0 0; display: grid; gap: 10px; }
.atlas-entry__fig img { width: 100%; height: auto; display: block; border: 1px solid var(--border-soft); background: var(--surface-color); }
.atlas-entry__fig--pair { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* two photos the text compares ("1 枚目 / 2 枚目"): always side by side (clue-copyedit step 4) */
.atlas-entry__fig--lr,
.atlas-entry--photo .atlas-entry__fig--lr { grid-template-columns: 1fr 1fr; }
/* every clue has a picture slot: generated card, photo, or an empty box of the same size */
.atlas-entry__fig--card img { background: var(--body-color); }
/* photo credits (from {{% lb %}} / Wikimedia lines in the body) */
.atlas-entry__shot { display: block; min-width: 0; }
.atlas-entry__credit { display: block; margin-top: 4px; font-size: 0.7rem; color: var(--text-muted); line-height: 1.4; }
.atlas-entry__credit a { color: inherit; border-bottom: 1px solid var(--border-soft); }
.atlas-hero__credit { position: absolute; right: 12px; bottom: 8px; font-size: 0.68rem; color: rgba(255, 255, 255, 0.8); z-index: 1; }
.atlas-hero__credit a { color: inherit; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
/* photo not ready yet: the same slot a landscape photo takes (2026-09-17) */
.atlas-entry__fig--empty { width: 100%; aspect-ratio: 4 / 3; max-height: 300px; box-sizing: border-box; border: 1px dashed var(--border-strong); background: var(--surface-alt); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-muted); }
.atlas-entry__pending { font-size: 0.86rem; letter-spacing: 0.12em; }
.atlas-entry__fig--empty small { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--cat, var(--text-muted)); }
@media (min-width: 900px) {
  /* text left, picture right (~55% of the column). From 900px, not 1100px: between the two a
     single column blew one-line clues up to an 800–1000px photo (2026-09-16 見やすさ点検). */
  .atlas-entry--photo { display: grid; grid-template-columns: minmax(300px, 42%) minmax(0, 1fr); gap: 28px; align-items: start; }
  .atlas-entry--photo .atlas-entry__fig { margin-top: 4px; }
  .atlas-entry--photo .atlas-entry__fig--pair { grid-template-columns: 1fr; }
  .atlas-entry--photo .atlas-entry__fig--pair.atlas-entry__fig--lr { grid-template-columns: 1fr 1fr; }
}
/* ---- shapes (docs/atlas-heavy-pages.md) ---- */
/* one-line facts: a compact list, two columns when wide; no picture slot */
.atlas-block[hidden] { display: none; }
.atlas-facts { list-style: none; margin: 0; padding: 10px 0 6px; border-top: 1px solid var(--border-soft); display: grid; grid-template-columns: 1fr; gap: 2px 32px; }
.atlas-fact { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 0 12px; padding: 7px 0; line-height: 1.6; font-size: 0.97rem; }
.atlas-fact[hidden] { display: none; }
.atlas-fact::before { content: ""; background: var(--cat, var(--border-strong)); margin: 5px 0; }
.atlas-fact__cat { grid-column: 2; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; color: var(--cat, var(--text-muted)); line-height: 1.3; }
.atlas-fact__text { grid-column: 2; }
.atlas-fact__text mark { background: none; color: var(--text-color); font-weight: 700; border-bottom: 2px solid var(--cat, var(--primary-color)); }
.atlas-fact__points { grid-column: 2; margin: 2px 0 0 1.1em; padding: 0; font-size: 0.88rem; line-height: 1.6; color: var(--text-color); }
.atlas-fact__points li { margin: 0; }
.atlas-fact__note { grid-column: 2; display: block; margin-top: 4px; font-size: 0.86rem; }
.atlas-fact__ex { grid-column: 2; font-size: 0.72rem; color: var(--text-muted); }
.atlas-fact__ex a { color: var(--text-muted); margin-right: 8px; border-bottom: 1px solid var(--border-soft); }
.atlas-fact:target { background: var(--surface-alt); box-shadow: 0 0 0 8px var(--surface-alt); }
@media (min-width: 760px) { .atlas-facts { grid-template-columns: 1fr 1fr; } }
/* single-entry places: a card grid instead of heading + row */
.atlas-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 26px 24px; padding: 18px 0 8px; border-top: 1px solid var(--border-soft); }
.atlas-place { min-width: 0; border-top: 3px solid var(--cat, var(--border-strong)); padding-top: 10px; }
.atlas-place[hidden] { display: none; }
.atlas-place:target { background: var(--surface-alt); box-shadow: 0 0 0 10px var(--surface-alt); }
.atlas-place__fig { margin: 0 0 10px; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--border-soft); background: var(--surface-color); }
.atlas-place__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atlas-place__fig--card img { object-fit: contain; background: var(--body-color); }
.atlas-place__fig--empty { aspect-ratio: 4 / 3; display: grid; place-items: center; border: 1px dashed var(--border-strong); background: var(--surface-alt); color: var(--text-muted); font-size: 0.72rem; letter-spacing: 0.08em; }
.atlas-place__fig--empty span { border: 1px solid var(--border-soft); padding: 2px 10px; background: var(--surface-color); }
.atlas-place__more { position: absolute; right: 6px; bottom: 6px; background: var(--text-color); color: var(--body-color); font-size: 0.72rem; padding: 1px 7px; }
.atlas-place__name { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.atlas-place__cat { margin: 2px 0 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: var(--cat, var(--text-muted)); }
.atlas-place__text { margin: 0; font-size: 0.93rem; line-height: 1.75; }
.atlas-place__text mark { background: none; color: var(--text-color); font-weight: 700; border-bottom: 2px solid var(--cat, var(--primary-color)); }
.atlas-place__note { font-size: 0.86rem; }
.atlas-place__foot { margin: 8px 0 0; font-size: 0.76rem; color: var(--text-muted); display: flex; gap: 14px; flex-wrap: wrap; }
.atlas-place__foot a { color: var(--text-muted); border-bottom: 1px solid var(--border-soft); margin-left: 6px; }
/* gallery: many pictures (one per place) as a captioned grid under the text */
.atlas-entry__fig--gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 10px; }
.atlas-entry__fig--gallery .atlas-entry__shot { color: inherit; text-decoration: none; }
.atlas-entry__fig--gallery .atlas-entry__shot img { aspect-ratio: 4 / 3; object-fit: cover; }
.atlas-entry__fig--gallery .atlas-entry__caption { font-weight: 700; font-size: 0.8rem; }
/* table: key → value bullets */
.atlas-entry__table { margin: 10px 0 0; border-collapse: collapse; font-size: 0.9rem; line-height: 1.6; width: 100%; max-width: 640px; }
.atlas-entry__table th, .atlas-entry__table td { text-align: left; vertical-align: top; padding: 5px 12px 5px 0; border-bottom: 1px solid var(--border-soft); }
.atlas-entry__table th { font-weight: 700; white-space: nowrap; color: var(--text-color); width: 1%; }
.atlas-entry__table th::after { content: "→"; margin-left: 10px; color: var(--text-muted); font-weight: 400; }
.atlas-entry__table-note { color: var(--text-muted); font-size: 0.86rem; }
.atlas-entry__table mark { background: none; font-weight: 700; border-bottom: 2px solid var(--cat, var(--primary-color)); }
/* ---- lightbox ---- */
img[data-zoom] { cursor: zoom-in; }
.atlas-lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; display: none; }
.atlas-lightbox[open] { display: grid; place-items: center; }
.atlas-lightbox::backdrop { background: rgba(10, 12, 16, 0.88); }
.atlas-lightbox__fig { margin: 0; max-width: 96vw; max-height: 94vh; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 10px; }
.atlas-lightbox__fig img { max-width: 96vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; cursor: zoom-out; background: #111; border: 1px solid rgba(255, 255, 255, 0.12); }
.atlas-lightbox__fig figcaption { color: #eee; font-size: 0.95rem; text-align: center; }
.atlas-lightbox__fig figcaption small { display: block; margin-top: 2px; color: #aaa; font-size: 0.74rem; }
.atlas-lightbox__close, .atlas-lightbox__nav { position: fixed; appearance: none; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.5); color: #fff; font: inherit; cursor: pointer; }
.atlas-lightbox__close { top: 14px; right: 14px; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.atlas-lightbox__nav { top: 50%; transform: translateY(-50%); width: 44px; height: 64px; font-size: 2rem; line-height: 1; }
.atlas-lightbox__nav--prev { left: 12px; }
.atlas-lightbox__nav--next { right: 12px; }
.atlas-lightbox__nav[hidden] { display: none; }
.atlas-lightbox__close:hover, .atlas-lightbox__nav:hover { background: rgba(255, 255, 255, 0.18); }
.atlas-gallery__stage-img { display: block; }
/* ---- pictures at their own size (signs, logos, marks) ---- */
/* photos: never wider than their own pixels (inline max-width from the file header) */
.atlas-entry__fig img { max-width: 100%; }
/* photos next to a clue: never stretched past their own pixels (remote pictures have no header size),
   and tall portrait pictures stay within the screen instead of running 800px+ down the page (2026-09-16 表示点検) */
.atlas-entry__media .atlas-entry__fig:not(.atlas-entry__fig--card) > img,
.atlas-entry__media .atlas-entry__fig:not(.atlas-entry__fig--card) .atlas-entry__shot > img { width: auto; max-width: 100%; max-height: min(72vh, 600px); }
/* icon-sized pictures (SVG signs, small logos): a wrapping row at natural size, capped in height */
/* （--icons の並びは display モードに置き換え。2026-09-18） */
/* gallery of marks: tiles only (no big stage), sized to compare side by side */
.atlas-gallery--tiles .atlas-gallery__thumbs { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.atlas-gallery--tiles .atlas-gallery__thumb { cursor: default; color: var(--text-color); font-size: 0.78rem; }
.atlas-gallery--tiles .atlas-gallery__thumb img { aspect-ratio: auto; height: 96px; width: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.atlas-gallery--tiles .atlas-gallery__thumb[data-has-map="1"] { cursor: pointer; }
.atlas-gallery--tiles .atlas-gallery__thumb.is-on { border-color: var(--cat, var(--primary-color)); }
.atlas-gallery__maps .atlas-mini-map { max-height: 260px; width: auto; max-width: 100%; }
@media (min-width: 760px) { .atlas-gallery--tiles:has(.atlas-gallery__maps) { grid-template-columns: minmax(0, 1fr) 200px; } .atlas-gallery--tiles .atlas-gallery__thumbs { grid-column: 1; grid-row: 1; } .atlas-gallery--tiles .atlas-gallery__maps { grid-column: 2; grid-row: 1; } }
/* place card whose only picture is a sign / logo: show it whole, not cropped */
.atlas-place__fig--icon img { object-fit: contain; padding: 12px; box-sizing: border-box; }
/* ---- mini location maps (docs/atlas-heavy-pages.md §2-E) ---- */
.atlas-mini-map { display: block; width: 100%; height: auto; }
/* "here" on a place map is always the pin red, whatever the clue's category colour (a grey 'other' town was
   hard to tell from the outline); contrast groups (.g0–.g3) still set their own colours */
.atlas-mini-map { --cat: var(--ng, #D35A4D); }
.atlas-mini-map-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.atlas-mini-map path, .atlas-mini-map use { fill: var(--surface-alt); stroke: var(--border-strong); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.atlas-mini-map path.is-on, .atlas-mini-map use.is-on { fill: var(--cat, var(--primary-color)); fill-opacity: calc(0.3 + 0.7 * var(--w, 1)); stroke: var(--text-color); }
.atlas-mini-map .zone { fill: var(--cat, var(--primary-color)); fill-opacity: 0.35; }
.atlas-mini-map .around { fill: var(--cat, var(--primary-color)); fill-opacity: 0.4; stroke: var(--cat, var(--primary-color)); stroke-width: 2; vector-effect: non-scaling-stroke; }
.atlas-mini-map .around { fill-opacity: 0.25; }
/* The pin standing on an "around" centre is always red (Na's decision: a pin must read as a pin, whatever the
   category or group colour), with a paper rim and hole. Unit geometry, so strokes are in units too. */
.atlas-mini-map .marker-pin { fill: var(--ng, #D35A4D); stroke: var(--body-color); stroke-width: 0.12; stroke-linejoin: round; vector-effect: none; paint-order: stroke; }
.atlas-mini-map .g0 .marker-pin, .atlas-mini-map .g1 .marker-pin, .atlas-mini-map .g2 .marker-pin, .atlas-mini-map .g3 .marker-pin { fill: var(--ng, #D35A4D); }
.atlas-mini-map .marker-hole { fill: var(--body-color); stroke: none; }
.atlas-mini-map .pin { fill: var(--cat, var(--primary-color)); stroke: var(--body-color); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* Bands: along a road / river, along the outline (coast / border), or the inland left over.
   Their widths are map units on raw paths, so the `path, use` rule above must not apply. */
.atlas-mini-map .along { fill: none; stroke: var(--cat, var(--primary-color)); stroke-opacity: 0.45; stroke-linecap: round; stroke-linejoin: round; vector-effect: none; }
.atlas-mini-map .edge .band { fill: none; stroke: var(--cat, var(--primary-color)); stroke-opacity: 0.45; stroke-linejoin: round; vector-effect: none; }
.atlas-mini-map .inland { fill: var(--cat, var(--primary-color)); fill-opacity: 0.35; stroke: none; }
/* "Everywhere except …": the outline filled, the written shapes cut out through a mask. */
.atlas-mini-map .except { fill: var(--cat, var(--primary-color)); fill-opacity: 0.3; stroke: none; }
.atlas-mini-map .except-cut { fill: none; stroke: var(--cat, var(--primary-color)); stroke-width: 1.5; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
/* Mask contents are luminance only: white keeps, black cuts. Keep the generic path/use colours out. */
.atlas-mini-map mask .mask-bg { fill: #fff; stroke: none; }
.atlas-mini-map mask .cut { fill: #000; fill-opacity: 1; stroke: none; }
.atlas-mini-map mask .cut-line { fill: none; stroke: #000; stroke-linecap: round; stroke-linejoin: round; vector-effect: none; }
.atlas-mini-map mask .cut-band { fill: none; stroke: #000; stroke-linejoin: round; vector-effect: none; }
.atlas-mini-map mask .cut-band--keep { stroke: #fff; }
/* Contrast groups: each <g class="gN"> recolours the shapes inside it; the legend uses the same colours. */
.atlas-mini-map .g0, .atlas-mini-legend .g0 { --cat: var(--cat-g0, #1F5FA8); }
.atlas-mini-map .g1, .atlas-mini-legend .g1 { --cat: var(--cat-g1, #C2571A); }
.atlas-mini-map .g2, .atlas-mini-legend .g2 { --cat: var(--cat-g2, #2F7D4F); }
.atlas-mini-map .g3, .atlas-mini-legend .g3 { --cat: var(--cat-g3, #7B3FA0); }
.atlas-mini-map .area { fill: var(--cat, var(--primary-color)); fill-opacity: calc(0.3 + 0.7 * var(--w, 1)); stroke: var(--text-color); }
.atlas-mini-legend { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.78rem; color: var(--text-muted); }
.atlas-mini-legend li { display: inline-flex; align-items: center; gap: 6px; }
.atlas-mini-legend i { display: inline-block; width: 12px; height: 12px; background: var(--cat); opacity: 0.75; border: 1px solid var(--border-strong); }
.atlas-entry__side { min-width: 0; }
/* photo | place map, side by side; the map is a slim column with the same top edge, never over the photo */
.atlas-entry__media { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.atlas-entry__media--with-map { grid-template-columns: minmax(0, 1fr) clamp(96px, 26%, 160px); }
.atlas-entry__media .atlas-entry__fig { margin: 0; }
.atlas-entry__media .atlas-entry__map { margin: 0; padding: 0; border: 0; background: none; }
.atlas-entry__media .atlas-entry__map .atlas-mini-map { width: 100%; height: auto; max-height: 260px; }
.atlas-entry__fig--map { display: grid; place-items: center start; padding: 4px 0; }
@media (min-width: 900px) { .atlas-entry--photo .atlas-entry__fig--map { place-items: start end; } }
.atlas-entry__fig--map .atlas-mini-map { max-height: 280px; width: auto; max-width: min(100%, 320px); }
/* the place map under the clue text (clues that also have pictures) */
/* the place map under the clue text: no frame or background, just the outline.
   Its box follows the outline (viewBox cropped in minimap.ts, --ar = width / height):
   a wide country fills the text column, a tall one stands at most --map-h high. */
.atlas-entry__map--main { --map-h: 240px; margin: 16px 0 0; padding: 0; border: 0; background: none; }
.atlas-entry__map-cap { font-size: 0.7rem; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 4px; text-align: left; }
/* 地図は本文の列の中で左右中央に置く（2026-09-18）。
   flex と margin: auto の両方で寄せる（どちらか片方でも中央になるように） */
.atlas-entry__map-body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.atlas-entry__map--main { text-align: center; }
.atlas-entry__map--main .atlas-mini-map { width: min(100%, calc(var(--map-h) * var(--ar, 1))); height: auto; max-height: none; margin-left: auto; margin-right: auto; }
.atlas-entry__map--main .atlas-mini-map--wide { width: min(100%, calc(var(--map-h) * var(--ar, 1)), 460px); }
.atlas-entry__map--main .atlas-mini-map--tall { --map-h: 300px; }
@media (max-width: 899px) { .atlas-entry__map--main { --map-h: 200px; } }
@media (max-width: 599px) { .atlas-entry__map--main { --map-h: 170px; } }
.atlas-mini-map { overflow: visible; }
/* single column (tablets, narrow windows): a picture no wider than a comfortable reading width */
@media (max-width: 899px) { .atlas-entry > .atlas-entry__side, .atlas-entry > .atlas-entry__fig:not(.atlas-entry__fig--map) { max-width: 640px; } }
.atlas-place__fig--map { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 6px; }
.atlas-place__fig--map .atlas-mini-map { max-height: 100%; width: auto; max-width: 100%; }
/* card top: photo | map side by side (no overlay) */
.atlas-place__media { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
.atlas-place__media--with-map { grid-template-columns: minmax(0, 1fr) 30%; }
.atlas-place__media .atlas-place__fig { margin: 0; }
.atlas-place__map { padding: 0; display: grid; place-items: center; }
.atlas-place__map .atlas-mini-map { width: 100%; height: auto; max-height: 100%; }
/* gallery: stage + thumbnails, map beside the stage when the pictures carry a place */
.atlas-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.atlas-gallery__stage { min-width: 0; }
.atlas-gallery__link { display: block; }
.atlas-gallery__stage img { width: 100%; height: auto; display: block; border: 1px solid var(--border-soft); background: var(--surface-color); }
.atlas-gallery__cap { margin-top: 6px; font-weight: 700; font-size: 0.92rem; }
.atlas-gallery__maps { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.atlas-gallery__map[hidden] { display: none; }
.atlas-gallery__thumbs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.atlas-gallery__thumb { appearance: none; background: none; border: 2px solid transparent; padding: 2px; margin: 0; cursor: pointer; text-align: left; font: inherit; color: var(--text-muted); font-size: 0.74rem; line-height: 1.3; }
.atlas-gallery__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 1px solid var(--border-soft); background: var(--surface-color); }
.atlas-gallery__thumb span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 3px; }
.atlas-gallery__thumb:hover { color: var(--text-color); }
.atlas-gallery__thumb.is-on { border-color: var(--cat, var(--primary-color)); color: var(--text-color); font-weight: 700; }
@media (min-width: 760px) { .atlas-gallery { grid-template-columns: minmax(0, 1fr) 200px; align-items: start; } .atlas-gallery:not(:has(.atlas-gallery__maps)) { grid-template-columns: minmax(0, 1fr); } }
/* Street View embeds: closed by default, iframe created on open */
.atlas-sv { margin-top: 10px; font-size: 0.86rem; }
.atlas-sv summary { cursor: pointer; display: inline-block; padding: 4px 12px; border: 1px solid var(--border-strong); color: var(--text-color); font-weight: 700; list-style: none; }
.atlas-sv summary::-webkit-details-marker { display: none; }
.atlas-sv summary::before { content: "▸ "; color: var(--text-muted); }
.atlas-sv[open] summary::before { content: "▾ "; }
.atlas-sv summary small { margin-left: 8px; color: var(--text-muted); font-weight: 400; }
.atlas-sv summary:hover { border-color: var(--text-color); }
.atlas-sv__slot { margin-top: 10px; aspect-ratio: 16 / 10; background: var(--surface-alt); border: 1px solid var(--border-soft); }
.atlas-sv__slot iframe { width: 100%; height: 100%; border: 0; display: block; }
/* tier heading sticks under the site header, with links to its sub-sections */
.atlas-tier { position: sticky; top: var(--site-header-h, 56px); z-index: 5; background: var(--body-color); padding-top: 8px; }
.atlas-tier__nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 0.82rem; }
.atlas-tier__nav a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--border-soft); }
.atlas-tier__nav a:hover { color: var(--primary-color); }
.atlas-group--sec, .atlas-group--sub { scroll-margin-top: calc(var(--site-header-h, 56px) + 120px); }
.atlas-entry__part, .atlas-entry, .atlas-fact, .atlas-place { scroll-margin-top: calc(var(--site-header-h, 56px) + 110px); }
@media (max-width: 759px) { .atlas-tier { position: static; } .atlas-group--sec, .atlas-group--sub, .atlas-entry__part, .atlas-entry, .atlas-fact, .atlas-place { scroll-margin-top: calc(var(--site-header-h, 56px) + 12px); } }
.atlas-empty { color: var(--text-muted); padding: 20px 0; }
.atlas-empty[hidden] { display: none; }
/* study mode */

/* 3'. Japan: pick a prefecture (hub + region hubs) */
.atlas-prefs { margin-top: 48px; }
.atlas-tier--static { position: static; }
.atlas-prefs__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 28px; margin-top: 14px; }
.atlas-prefs__map { border: 1px solid var(--border-soft); background: var(--accent-soft); align-self: start; }
.atlas-prefs__map .geo-hero-map { border: 0; }
.atlas-prefs__group { margin-top: 18px; }
.atlas-prefs__group:first-child { margin-top: 0; }
.atlas-prefs__group .atlas-group--sub { margin-top: 0; }
.atlas-prefs__group .atlas-h3 a { color: inherit; text-decoration: none; }
.atlas-prefs__group .atlas-h3 a:hover { color: var(--primary-color); }
.atlas-prefs__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.atlas-prefs__all { margin-top: 26px; }
.atlas-prefs__all > summary { cursor: pointer; display: inline-block; padding: 6px 14px; border: 1px solid var(--border-strong); font-weight: 700; list-style: none; }
.atlas-prefs__all > summary::-webkit-details-marker { display: none; }
.atlas-prefs__all > summary::before { content: "▸ "; color: var(--text-muted); }
.atlas-prefs__all[open] > summary::before { content: "▾ "; }
.atlas-prefs__all > summary small { margin-left: 8px; color: var(--text-muted); font-weight: 400; }
@media (min-width: 1000px) {
  .atlas-prefs__body { grid-template-columns: minmax(320px, 42%) minmax(0, 1fr); }
  .atlas-prefs__body--region { grid-template-columns: minmax(280px, 34%) minmax(0, 1fr); }
  .atlas-prefs__map { position: sticky; top: calc(var(--site-header-h, 56px) + 16px); }
}
/* 県別の目印の比較表 */
.pref-symbols { margin-top: 18px; overflow-x: auto; }
.pref-symbols__table { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
.pref-symbols__caption { caption-side: top; text-align: left; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); padding: 0 0 6px; }
.pref-symbols__table th, .pref-symbols__table td { border-bottom: 1px solid var(--border-soft); padding: 8px 10px; text-align: left; vertical-align: middle; }
.pref-symbols__table thead th { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); border-bottom: 2px solid var(--text-color); white-space: nowrap; }
.pref-symbols__table tbody th { white-space: nowrap; font-weight: 700; }
.pref-symbols__table tbody th a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.pref-symbols__table tbody th a:hover { color: var(--primary-color); }
.pref-symbols__table tbody th img { width: 30px; height: 20px; object-fit: cover; border: 1px solid var(--border-soft); background: var(--surface-alt); }
.pref-symbols__cell { min-width: 96px; }
.pref-symbols__cell img { height: 44px; width: auto; max-width: 120px; object-fit: contain; display: block; background: var(--surface-color); border: 1px solid var(--border-soft); padding: 3px; }
.pref-symbols__cell--bare img { background: var(--text-color); border-color: var(--text-color); }
.pref-symbols__cell .pref-symbols__svg svg { height: 44px; width: auto; display: block; }
.pref-symbols__cell small { display: block; margin-top: 3px; font-size: 0.72rem; color: var(--text-muted); }
.pref-symbols__none { color: var(--border-strong); text-align: center; }
/* 3. regions */
.atlas-regions { margin-top: 52px; }
.atlas-regions__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; margin-top: 14px; }
.atlas-regions__map { min-width: 0; }
.atlas-region-map { background: var(--accent-soft); border: 1px solid var(--border-soft); position: relative; }
.atlas-region-map__svg { width: 100%; height: auto; max-height: 460px; display: block; }
.atlas-region-map path { fill: var(--m0); stroke: var(--primary-color); stroke-width: 0.6; transition: fill var(--dur-fast); }
.atlas-region-map path.m1 { fill: var(--m1); }
.atlas-region-map path.m2 { fill: var(--m2); }
.atlas-region-map path.m3 { fill: var(--m3); }
.atlas-region-map path:hover { fill: var(--primary-hover); cursor: pointer; }
.atlas-region-map path.is-correct, .atlas-region-map path.is-correct:hover { fill: var(--ok) !important; }
.atlas-region-map path.is-wrong, .atlas-region-map path.is-wrong:hover { fill: var(--ng) !important; }
.atlas-region-map path.is-reveal, .atlas-region-map path.is-reveal:hover { fill: var(--ok-done) !important; stroke: var(--ok-ink); stroke-width: 1.2; }
.atlas-region-map path.is-hover { fill: var(--primary-hover); }
.atlas-regions__name { margin: 0 0 14px; min-height: 2.4em; font-size: 1.3rem; font-weight: 800; line-height: 1.3; padding: 10px 14px; border: 1px solid var(--border-strong); background: var(--surface-color); }
.atlas-regions__name-hint { font-size: 0.86rem; font-weight: 400; color: var(--text-muted); }
/* mini quiz panel */
.atlas-regions__side { min-width: 0; }
.atlas-mini { border: 1px solid var(--border-strong); background: var(--surface-color); padding: 14px 16px; }
.atlas-mini__q { font-size: 1.15rem; font-weight: 800; line-height: 1.4; min-height: 2.8em; }
.atlas-mini.is-playing .atlas-mini__q { color: var(--primary-color); }
.atlas-mini__status { display: flex; gap: 14px; font-size: 0.85rem; color: var(--text-muted); margin: 6px 0 10px; min-height: 1.4em; }
.atlas-mini__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.atlas-mini__actions [hidden] { display: none; }
.atlas-mini__links { margin-top: 18px; }
.atlas-mini__links .atlas-links { font-size: 0.88rem; }
.atlas-regions__credit { font-size: 0.72rem; color: var(--text-muted); margin: 6px 0 0; }
.atlas-rlist { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; max-height: 460px; overflow: auto; border-top: 1px solid var(--border-soft); }
.atlas-rlist__row { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-soft); align-items: center; cursor: pointer; }
.atlas-rlist__row:hover { background: var(--surface-alt); }
.atlas-rlist__dot { width: 10px; height: 10px; display: inline-block; }
.atlas-rlist__note { color: var(--text-muted); margin-left: 8px; font-size: 0.75rem; }
.atlas-rlist__stat { color: var(--text-muted); font-size: 0.78rem; }
.m0 { background: var(--m0); } .m1 { background: var(--m1); } .m2 { background: var(--m2); } .m3 { background: var(--m3); }
.atlas-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.72rem; color: var(--text-muted); margin-top: 10px; }
.atlas-legend i { width: 14px; height: 10px; display: inline-block; margin-right: 4px; vertical-align: -1px; }
/* StaticGeoMap inside the atlas: paper tones */
.atlas .geo-hero-map { border: 1px solid var(--border-soft); }

/* 4. article (the original markdown body keeps common.css styles, narrowed) */
.atlas-article { margin-top: 52px; }
.atlas-article__body { max-width: var(--atlas-read); margin-top: 16px; }
.atlas-article__body img { max-width: 100%; height: auto; }
.atlas-article__body .googlemap-if { margin: 12px 0; }

/* asides */
.atlas-aside { margin-top: 40px; max-width: var(--atlas-read); }
.atlas-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-soft); }
.atlas-links li { padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.atlas-links--inline { display: flex; flex-wrap: wrap; gap: 0; border: 0; }
.atlas-links--inline li { border: 0; padding: 4px 14px 4px 0; }
.atlas-links--inline a { color: var(--text-color); border-bottom: 1px solid var(--border-strong); }
.atlas .references-list { font-size: 0.85rem; color: var(--text-muted); }
.atlas-ad { margin-top: 56px; min-height: 90px; }

@media (max-width: 899px) {
  .atlas-hero { padding-top: 22px; }
  .atlas-hero--photo { padding-top: 110px; min-height: 220px; }
  .atlas-hero__title { font-size: 1.6rem; }
  .atlas-clues { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 22px; }
  .atlas-cats { position: static; min-width: 0; display: flex; gap: 2px; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--border-soft); padding-bottom: 6px; scrollbar-width: none; }
  .atlas-cats::-webkit-scrollbar { display: none; }
  .atlas-cats__h { display: none; }
  .atlas-cats__link { border-left: 0; border-bottom: 2px solid transparent; padding: 6px 10px; }
  .atlas-cats__link.is-on { border-bottom-color: var(--cat, var(--text-color)); }
  .atlas-cats__sub { margin-top: 0; display: flex; gap: 2px; padding-left: 14px; border-left: 1px solid var(--border-soft); margin-left: 8px; }
  .atlas-regions__grid { grid-template-columns: 1fr; }
  .atlas-rlist { max-height: 320px; }
}

/* ---------- 3. home (pages/index.astro) ---------- */
.home { padding-bottom: 40px; }
.home__wrap { max-width: var(--atlas-max); margin: 0 auto; padding: 0 var(--atlas-gutter); }
.home-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; padding-top: 24px; }
/* photo mosaic: 4 columns, first tile 2×2 */
.home-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 170px; gap: 6px; }
.home-tile { position: relative; display: block; overflow: hidden; background: var(--surface-alt); border: 1px solid var(--border-soft); }
.home-tile:first-child { grid-column: span 2; grid-row: span 2; }
.home-tile:nth-child(6) { grid-column: span 2; }
.home-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-base); }
.home-tile:hover img { transform: scale(1.04); }
.home-tile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; font-size: 0.74rem; color: #fff; background: linear-gradient(180deg, rgba(16,22,31,0) 0%, rgba(16,22,31,0.75) 100%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-eyebrow { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.home-sec { margin-top: 40px; }
.home-sec__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.home-sec__head h2 { margin: 0; font-size: 1.25rem; font-weight: 800; }
.home-sec__head span { color: var(--text-muted); font-size: 0.85rem; }
.home-sec__head a.more { margin-left: auto; font-size: 0.85rem; color: var(--text-muted); }
.home-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.home-upd { border: 1px solid var(--border-soft); background: var(--surface-color); padding: 12px 14px; display: grid; grid-template-columns: 30px 1fr; gap: 10px; font-size: 0.86rem; color: inherit; text-decoration: none; }
.home-upd:hover { background: var(--surface-alt); text-decoration: none; color: inherit; }
.home-upd i { width: 30px; height: 20px; border: 1px solid var(--border-soft); display: block; margin-top: 3px; background-size: cover; background-position: center; background-color: var(--surface-alt); }
.home-upd b { display: block; font-size: 0.95rem; }
.home-upd .m { color: var(--text-muted); font-size: 0.72rem; margin-top: 4px; display: flex; gap: 10px; }
.home-quiz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.home-quiz a { border-top: 2px solid var(--text-color); padding-top: 10px; color: inherit; text-decoration: none; font-size: 0.86rem; }
.home-quiz a:hover { text-decoration: none; color: var(--primary-color); }
.home-quiz b { display: block; font-size: 0.95rem; margin-bottom: 4px; }
.home-quiz small { color: var(--text-muted); }
.home-read { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.home-read a { display: block; border-top: 2px solid var(--text-color); padding-top: 10px; font-size: 0.86rem; color: inherit; text-decoration: none; }
.home-read a:hover { text-decoration: none; color: var(--primary-color); }
.home-read a .ph { height: 200px; background: var(--surface-alt); margin-bottom: 10px; border: 1px solid var(--border-soft); background-size: cover; background-position: center; }
.home-read a.home-read__noimg { padding-top: 14px; }
.home-read a b { display: block; font-size: 0.95rem; margin-bottom: 4px; }
.home-read small { color: var(--text-muted); }
/* explore column */
.home-explore { border: 1px solid var(--border-soft); background: var(--surface-color); padding: 12px 14px; align-self: start; }
.home-hubs { list-style: none; margin: 6px 0 0; padding: 0; }
.home-hubs li { border-top: 1px solid var(--border-soft); }
.home-hubs a { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; color: inherit; text-decoration: none; font-size: 0.9rem; }
.home-hubs a:hover { color: var(--primary-color); text-decoration: none; }
.home-hubs a b { font-weight: 700; }
.home-hubs a .mono { color: var(--text-muted); font-size: 0.78rem; }
.home-hubs a small { grid-column: 1 / -1; color: var(--text-muted); font-size: 0.74rem; line-height: 1.4; }
@media (max-width: 899px) {
  .home-top, .home-grid3, .home-read, .home-quiz { grid-template-columns: 1fr; }
  .home-quiz { grid-template-columns: 1fr 1fr; }
  .home-mosaic { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 96px; }
  .home-tile:nth-child(n+10) { display: none; }
}

/* ---------- 4. guide hubs (RuleHubLayout) ---------- */
.hub-hero { padding-bottom: 8px; }
.hub-jump { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.86rem; padding: 10px 0 4px; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.hub-jump a { color: var(--text-color); font-weight: 600; padding: 4px 0; }
.hub-jump a small { margin-left: 5px; color: var(--text-muted); font-weight: 400; }
.hub-group { margin-top: 30px; }
.hub-map { margin: 10px 0 14px; border: 1px solid var(--border-soft); background: var(--accent-soft); }
.hub-map .geo-hero-map { border: 0; }
.hub-map--single { margin: 18px 0 8px; }
.hub-group .atlas-group { margin-top: 0; }
.hub-group .atlas-h2 a { color: inherit; }
.hub-grid { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.hub-card { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-soft); background: var(--surface-color); color: inherit; text-decoration: none; font-size: 0.9rem; min-height: 46px; }
.hub-card:hover { background: var(--surface-alt); color: var(--primary-color); text-decoration: none; }
.hub-card img { width: 40px; height: 27px; object-fit: cover; border: 1px solid var(--border-soft); background: var(--surface-alt); }
.hub-card i { width: 40px; height: 27px; border: 1px solid var(--border-soft); background: var(--surface-alt); display: block; }
.hub-card b { font-weight: 600; line-height: 1.3; }
.hub-card small { color: var(--text-muted); font-size: 0.74rem; }
/* not in GeoGuessr's official map: clearly dimmed, with a tag under the name */
.hub-card.is-unofficial { background: var(--surface-alt); border-color: var(--border-soft); color: var(--text-muted); }
.hub-card.is-unofficial img { filter: grayscale(0.7); opacity: 0.55; }
.hub-card.is-unofficial b { font-weight: 500; }
.hub-card.is-unofficial:hover { color: var(--text-color); }
.hub-card__tag { display: block; font-size: 0.68rem; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 2px; }
.hub-legend { display: inline-flex; align-items: center; gap: 6px; }
.hub-legend__swatch { width: 14px; height: 14px; border: 1px solid var(--border-soft); background: var(--surface-alt); display: inline-block; }
/* phones: the header actions wrapped under the logo and hung over the page (2026-09-16 見やすさ点検, 375px) */
@media (max-width: 430px) {
  .site-navbar .container { flex-wrap: nowrap; }
  .site-navbar .navbar-brand { min-width: 0; margin-right: 8px; }
  .site-navbar .navbar-brand__text { font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .site-navbar .navbar-actions { gap: 4px; flex-shrink: 0; }
}
/* entries that stay one column at every width (tables, galleries): the picture never grows past a
   reading width — a table clue showed its photo at 895×600 on a laptop (2026-09-16 見やすさ点検) */
.atlas-entry--table > .atlas-entry__side { max-width: 640px; }
.atlas-gallery__stage img { width: auto; max-width: 100%; max-height: min(72vh, 600px); }
.atlas-entry--table .atlas-entry__fig--empty { max-width: 420px; margin-top: 14px; }
/* regions with no official coverage (frontmatter is_unofficial): a stamp under the title and a grey hero photo (2026-09-17) */
.atlas-unofficial { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0 8px; }
.atlas-unofficial__stamp { display: inline-block; padding: 3px 12px; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.1em; color: #fff; background: var(--ng, #D35A4D); border: 2px solid #fff; }
.atlas-unofficial__note { font-size: 0.86rem; color: rgba(255,255,255,0.92); text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.atlas-hero--unofficial .atlas-hero__photo img { filter: grayscale(1); opacity: 0.7; }
.atlas-hero--unofficial .atlas-hero__flag { filter: grayscale(0.8); }

/* one card for clues that share a photo (2026-09-18): the texts stack, separated by a rule */
.atlas-entry__part[hidden] { display: none; }
.atlas-entry--shared .atlas-entry__part + .atlas-entry__part { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.atlas-entry__part:target { background: var(--surface-alt); box-shadow: 0 0 0 8px var(--surface-alt); }

/* ---- 写真の見せ方（YAML の images[].display、2026-09-18） ----
   photo: 列いっぱい（既定）/ wide: 横長で列いっぱい / card: 枠の中で大きめに中央
   icon: 枠の中に小さく中央 / tall: 高さで決めて中央。
   枠は横幅だけ一定で、高さは画像に合わせる（上下に余白を作らない）。 */
.atlas-entry__fig { justify-items: center; align-items: center; }
.atlas-entry__fig--area {
  width: 100%; box-sizing: border-box; padding: 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  border: 1px solid var(--border-soft); background: var(--surface-alt);
}
.atlas-entry__fig--area img { width: auto; height: auto; border: 0; background: none; object-fit: contain; }
.atlas-entry__fig--area .atlas-entry__shot { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.atlas-entry__fig--disp-card img { width: min(100%, 320px); max-height: 300px; }
.atlas-entry__fig--disp-icon img { width: min(58%, 170px); max-height: 170px; }
.atlas-entry__fig--disp-tall img { max-height: min(56vh, 420px); width: auto; max-width: 100%; }
.atlas-entry__fig--disp-wide img { width: 100%; max-width: 100%; }
/* ふつうの写真も高さで上限をかける（縦に伸びすぎない） */
.atlas-entry__fig--disp-photo img { max-height: min(64vh, 540px); width: auto; max-width: 100%; }
.atlas-entry__fig--disp-photo { width: 100%; }
/* 2 枚以上を 1 つの枠に並べるときは 1 枚あたりを小さく */
.atlas-entry__fig--disp-card img:not(:only-child) { width: min(46%, 230px); }
.atlas-entry__fig--disp-icon img:not(:only-child) { width: min(30%, 120px); }
@media (max-width: 899px) {
  .atlas-entry__fig--area { padding: 12px; }
  .atlas-entry__fig--disp-tall img { max-height: min(50vh, 360px); }
}