/* ══════════════════════════════════════════════════════════════════════════
   画像サンプル集 — Sky Factory Japan
   Design tokens and component classes below are the subset of the "Modernist"
   design system that this page actually uses, lifted verbatim from
   _ds/modernist-…/styles.css in the Claude Design handoff bundle.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --color-neutral-700: #605d5d;

  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;

  /* Archivo carries the Latin/numeric product codes; Noto Sans JP picks up the
     Japanese, which Archivo has no glyphs for, so the UI reads as one simple
     gothic on every OS instead of falling through to each platform's default. */
  --font-heading: "Archivo", "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Archivo", "Noto Sans JP", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;

  --radius-md: 0px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}

img { display: block; max-width: 100%; }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-500); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
[hidden] { display: none !important; }

.hr {
  height: 2px; border: 0; margin: 0 0 24px;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }

/* — forms — */
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

/* ══ Page shell ═══════════════════════════════════════════════════════════ */

.app-view {
  min-height: 100vh;
  padding: 56px 64px 140px;
}

.app-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.app-logo { height: 32px; width: auto; }

/* ══ ご利用方法 ═══════════════════════════════════════════════════════════ */

.usage {
  max-width: 720px; margin: 0 0 40px; padding: 16px 20px;
  border: 1px solid var(--color-divider);
  font-size: 13px; line-height: 1.7; color: var(--color-neutral-700);
}
.usage-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--color-text); margin-bottom: 6px;
}

/* ══ フィルター ═══════════════════════════════════════════════════════════ */

.filter-label {
  font-size: 11px; letter-spacing: 0.05em;
  color: var(--color-neutral-700); margin-bottom: 8px;
}
.filter-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.filter-row-cat { gap: 28px; margin-bottom: 44px; }

.tab {
  background: none; border: none; padding: 0 0 6px;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--color-neutral-700);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.tab[aria-pressed="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent-500);
}

/* ══ グリッド ═════════════════════════════════════════════════════════════ */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 32px;
}

.card { position: relative; }
.card[hidden] { display: none; }

.card-fav {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border: none;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer; font-size: 16px; line-height: 1;
  color: var(--color-neutral-700);
}
.card-fav[aria-pressed="true"] { color: var(--color-accent-500); }

.card-open {
  display: block; width: 100%; padding: 0; border: none; background: none;
  text-align: left; font: inherit; color: inherit;
  cursor: pointer; position: relative;
}
.card-open:hover { opacity: 0.82; }

/* height:auto is load-bearing — the img's width/height attributes are
   presentational hints, and a fixed height would make aspect-ratio a no-op. */
.card-img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  background: #fff; display: block;
}
.card-code {
  margin-top: 10px;
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  letter-spacing: 0.02em;
}

/* ══ ライトボックス ═══════════════════════════════════════════════════════ */

.lb {
  position: fixed; inset: 0;
  background: rgba(32, 30, 29, 0.94);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; padding: 48px;
}
.lb-inner { position: relative; max-width: 88vw; max-height: 88vh; }
.lb-img {
  max-width: 88vw; max-height: 78vh; object-fit: contain; background: #fff;
}
.lb-code {
  margin-top: 14px; color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: 16px;
  letter-spacing: 0.02em;
}
.lb-close {
  position: absolute; top: -44px; right: 0;
  background: none; border: none; color: #fff;
  font-size: 30px; cursor: pointer; line-height: 1;
}
.lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #fff;
  font-size: 44px; cursor: pointer; z-index: 51; line-height: 1;
}
.lb-prev { left: 24px; }
.lb-next { right: 24px; }

/* ══ 選択画像バー ═════════════════════════════════════════════════════════ */

.favbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #fff; border-top: 2px solid var(--color-divider);
  padding: 18px 64px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 40;
}
.favbar-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.favbar-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  white-space: nowrap;
}
.favbar-chips { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; }
.favbar-note { font-size: 11px; line-height: 1.6; color: var(--color-neutral-700); }
.facility-input { width: 220px; }
#print-btn { white-space: nowrap; }

.chip {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--color-divider); padding: 4px 8px;
}
.chip img { width: 32px; height: 32px; object-fit: cover; display: block; }
.chip span {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
}
.chip button {
  background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--color-neutral-700); line-height: 1;
}

/* ══ PDF出力用ドキュメント ════════════════════════════════════════════════
   Off-screen on screen, laid out for print. Never display:none — an
   unrendered subtree gives the print engine no layout to paginate.

   One .print-page per selected image, each carrying its own header and
   footer, so nothing has to repeat across pages and no engine-specific
   running-header mechanism is involved.
   ═══════════════════════════════════════════════════════════════════════ */

.print-doc-wrap { position: absolute; left: -9999px; top: 0; }

.print-page {
  display: flex; flex-direction: column;
  width: 210mm;
  /* 1mm under A4's 297mm. At exactly the sheet height, sub-pixel rounding
     spills each page onto a second sheet — that is where Safari's blank page
     after every content page came from. The 1mm is invisible and absorbs it. */
  height: 296mm;
  overflow: hidden;
  padding: 40px 58px;
  background: #fff;
  color: var(--color-text); font-family: var(--font-body);
}

.pp-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-divider);
}
.pp-title {
  font-family: var(--font-body); font-weight: 800; font-size: 18px;
  line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 6px;
}
.pp-facility { font-size: 12px; color: var(--color-neutral-700); }
.pp-logo { height: 24px; width: auto; }

/* Top-aligned under the header, not centred in the remaining space — this
   matches the approved reference layout. */
.pp-main {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start;
  padding-top: 95px;
}
/* 60 of the 70 sources are not square, so the square crop has to be imposed
   here. Both dimensions are stated outright rather than width + aspect-ratio:
   the page box is fixed, and an engine that skips aspect-ratio would otherwise
   letterbox the image and shift the caption page to page. */
.pp-img {
  display: block;
  width: 524px; height: 524px; max-width: 100%;
  object-fit: cover; background: #fff;
}
.pp-code {
  flex: none; margin-top: 16px; text-align: center;
  font-family: var(--font-body); font-weight: 700; font-size: 18px;
  letter-spacing: 0.02em;
}

.pp-foot {
  flex: none;
  border-top: 1px solid var(--color-divider); padding-top: 8px;
  font-size: 10px; line-height: 1.5; color: var(--color-neutral-700);
}

/* ══ 印刷 ═════════════════════════════════════════════════════════════════ */

* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

@media print {
  @page { size: A4; margin: 0; }
  html, body { margin: 0 !important; padding: 0 !important; height: auto !important; }
  body { background: #fff; }
  .app-view { display: none !important; }
  .print-doc-wrap { position: static !important; left: auto !important; }

  .print-page { break-after: page; break-inside: avoid; }
  .print-page:last-child { break-after: auto; }

  /* Chrome rasterises custom Japanese webfonts when exporting to PDF, which
     leaves the text unselectable and uncopyable. Standard system faces keep a
     real text layer in the PDF. */
  .print-doc-wrap, .print-doc-wrap * {
    font-family: "Hiragino Sans", "Yu Gothic", sans-serif !important;
  }
}

/* ══ 狭い画面 ═════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
  .app-view { padding: 32px 20px 200px; }
  .favbar { padding: 14px 20px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
  .lb { padding: 24px; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  .facility-input { width: 100%; }
}