/* ===========================================
   CSS Variables & Base Styles
   =========================================== */

:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #4f5a63;
  --accent: #128a3a;
  --border: #e6e6e6;
  --lb-pad: 2px;
  /* Extra headroom to avoid fractional rounding crops on desktop */
  --lb-gap: 6px;
}

@media (min-width: 768px) {
  :root {
    --lb-pad: 3px;
  }
}

/* ===========================================
   Base Elements
   =========================================== */

html, body {
  height: 100%;
}

html {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 18px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===========================================
   Layout Components
   =========================================== */

/* Header */
.site-header {
  border-bottom: 2px solid var(--accent);
  background: #f6fbf7;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px;
  text-align: center;
}

.site-title {
  margin: 0 0 30px;
  font-size: 40px;
  color: var(--accent);
}

.site-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* Footer */
.site-footer {
  border-top: 2px solid var(--accent);
  background: #f6fbf7;
  margin-top: 32px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  color: var(--muted);
  font-size: 18px;
  text-align: center;
}

/* Loading */
.loading {
  max-width: 1200px;
  margin: 16px auto;
  padding: 0 16px;
  color: var(--muted);
}

/* ===========================================
   Gallery & Cards
   =========================================== */

.gallery {
  max-width: 1200px;
  margin: 16px auto;
  padding: 0 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  background: #fff;
  border: 1px solid #dfeee5;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(18,138,58,0.10);
}

.card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f3f8f4;
  display: grid;
  place-items: center;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-media img.img-error {
  filter: grayscale(1) opacity(0.6);
}

.media-placeholder {
  color: var(--muted);
  font-size: 12px;
}

.entry-row {
  padding: 2px 12px 6px;
}

.entry-num {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
}

.flag-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  color: #7a3e00;
  background: #fff6e5;
  border: 1px solid #ffd49a;
}

.card-content {
  padding: 12px;
}

.card-title {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--fg);
}

.work-title {
  font-size: 16px;
}

.applicant-title,
.recipient-title {
  font-size: 16px;
}

.award-title {
  color: #b45309;
}

.award-title .award-icon {
  margin-right: 6px;
}

.card-block {
  margin-top: 10px;
}

.card-block-title {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--accent);
}

.card-text {
  margin: 0;
  padding: 10px 12px;
  background: #f0f8f3;
  border: 1px solid #d8eedd;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: visible;
  overflow-x: visible;
  overscroll-behavior: auto;
  max-height: none;
}

.card-text pre {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ===========================================
   Legal Notice
   =========================================== */

.legal-notice {
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 12px 16px;
  background: #f9fcfa;
  border: 1px solid #dfeee5;
  border-radius: 10px;
}

.legal-notice h2 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--accent);
}

.legal-notice ul {
  margin: 0;
  padding-left: 20px;
}

.legal-notice li {
  margin: 6px 0;
  color: var(--muted);
  font-size: 16px;
}

/* ===========================================
   Lightbox
   =========================================== */

#lightbox::backdrop {
  background: rgba(0,0,0,0.9);
}

#lightbox {
  border: none;
  background: transparent;
  position: fixed;
  inset: 0;
  margin: 0 auto;
  /* Use padding to account for safe areas instead of image margins */
  padding: max(var(--lb-pad), env(safe-area-inset-top))
           max(var(--lb-pad), env(safe-area-inset-right))
           max(var(--lb-pad), env(safe-area-inset-bottom))
           max(var(--lb-pad), env(safe-area-inset-left));
  /* Fill the real viewport and ignore page scrollbars */
  width: 100vw;
  height: 100vh;   /* fallback */
  height: 100dvh;  /* dynamic viewport for mobile/Chromium */
  box-sizing: border-box;
  overflow: hidden;
}

@supports (overflow: clip) {
  #lightbox {
    overflow: clip;
  }
}

#lightbox[open] {
  display: grid;
  place-items: center;
}

#lightbox:not([open]) {
  display: none;
}

#lightbox img {
  /* Prevent fractional rounding crops: do not force exact 100% sizing */
  max-width: calc(100% - var(--lb-gap));
  max-height: calc(100% - var(--lb-gap));
  width: auto;
  height: auto;
  /* Allow shrinking inside grid container; fix min-size:auto issue */
  min-width: 0;
  min-height: 0;
  object-fit: contain; /* ensure full image is visible without cropping */
  display: block;
  margin: 0;
}

html.lightbox-open {
  overflow: hidden;
}

#lightbox .lightbox-close {
  position: fixed;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 24px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#lightbox:not([open]) .lightbox-close {
  display: none;
}

#lightbox .lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* JS-calculated viewport override to avoid 100vh issues (mobile only) */
@media (max-width: 600px) {
  /* iOS Safari legacy fallback: JS-updated --vh variable */
  #lightbox {
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw;
  }
}

/* ===========================================
   Awards & Results
   =========================================== */

.awards-wrap {
  max-width: 1200px;
  margin: 20px auto 8px;
  padding: 0 8px;
}

.awards-title {
  margin: 0 0 8px;
  font-size: 40px;
  color: var(--accent);
}

.awards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .awards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.award-card {
  border-color: #ffd24a;
  box-shadow: 0 2px 0 rgba(255,210,74,0.35);
}

.award-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  color: #b45309;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  font-weight: 700;
}

.award-recipient {
  margin: 0 0 4px;
  font-size: 18px;
}

/* ===========================================
   Announcements
   =========================================== */

.announcement {
  max-width: 1200px;
  margin: 12px auto 8px;
  padding: 0 8px;
}

.announcement-text {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

.others-wrap {
  max-width: 1200px;
  margin: 24px auto 8px;
  padding: 0 8px;
}

.others-title {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--accent);
}

/* Header announcement fine-tune */
.header-inner .announcement {
  margin: 16px auto 0;
  padding: 0;
  max-width: 1100px;
}

.header-inner .announcement-text {
  text-align: justify;
  text-justify: inter-ideograph;
}

/* Announcement media layout */
.announcement {
  display: grid;
  gap: 12px;
}

@media (min-width: 900px) {
  /* 中央を基準に左右配置（テキストは左、画像は右） */
  .announcement {
    grid-template-columns: 600px 400px;
    align-items: start;
    justify-content: center;
    justify-items: stretch;
  }

  /* テキストは580px本体 + 左右20pxのパディング */
  .announcement-text {
    grid-column: 1;
    padding-right: 20px;
  }

  .announcement-media {
    margin: 0;
    grid-column: 2;
    grid-row: 1 / -1;
  }
}

.announcement-media {
  margin: 0;
}

.announcement-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

/* ===========================================
   Special States & Highlights
   =========================================== */

/* Commentary (講評) highlight */
.card-block-title.is-commentary {
  color: #b45309;
}

.block-commentary .card-text {
  background: #fff7ed;
  border-color: #fed7aa;
}