/* ポスターの書体・星空の額・書き出しボタン */
@font-face {
  font-family: "Great Vibes";
  src: url("../vendor/fonts/great-vibes-latin-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Great Vibes";
  src: url("../vendor/fonts/great-vibes-latin-ext-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Pinyon Script";
  src: url("../vendor/fonts/pinyon-script-latin-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Pinyon Script";
  src: url("../vendor/fonts/pinyon-script-latin-ext-400-normal.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.chart-frame {
  padding: clamp(12px, 3vw, 28px);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-card);
  background: radial-gradient(ellipse at 50% 40%, #0e1530, #070a16 75%);
}

.chart canvas {
  display: block;
  /* 縦長の用紙でも、スクロールせずに全体が見える大きさに収める */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: max(440px, calc(100vh - 230px));
  margin: 0 auto;
  border-radius: 4px;
  /* 白い配色でもポスターの端がわかるよう、紙のような影を付ける */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 50px rgba(0, 0, 0, 0.55);
}

.export-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 460px;
  margin: 20px auto 0;
}

.button-export {
  width: 100%;
  margin-top: 0;
  font-size: 1rem;
}

.export-hint {
  margin-top: 10px;
}