/* =====================================================
   store.css — 英検ワークシート (/resources/)
   -----------------------------------------------------
   The product page, its purchase form, the thanks page and the download
   page. Built from the tokens in base.css and the site's own components:
   the price table is css/fee.css, the key figures are .facts, the cards
   are .card, the FAQ is .faq-list, and the form reuses the trial form's
   controls (css/trial.css: .trial-form-card, .trial-input, .trial-pill,
   .trial-consent-*, .trial-submit, .trial-alert) so the site has one
   form look, not two. Only what is new to these pages lives here.

   1. Page scope
   2. Hero + the drawn worksheet
   3. Contents (files panel)
   4. Purchase form additions (grade pills, order summary, notice)
   5. Terms
   6. Thanks / download pages
   ===================================================== */

/* =====================
   1. PAGE SCOPE
   The page's one action is the purchase form; the sticky "book via LINE"
   bar would sit over its button on a phone. The closing CTA band still
   offers LINE at the end of the product page.
   ===================== */
.page-store .mobile-sticky-cta { display: none; }
.store-break-mobile { display: none; }
@media (max-width: 520px) {
  .store-break-mobile { display: inline; }
}
@media (max-width: 767px) {
  .store-break-desktop { display: none; }
}

/* =====================
   2. HERO — product hero (centred text, the product below)
   ===================== */
.store-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + var(--sp-xl)) 0 0;
  background-color: var(--bg-cream);
  text-align: center;
}
@media (max-width: 767px) {
  .store-hero { padding-top: calc(var(--header-h) + var(--sp-lg)); }
}
.store-hero::before {
  /* the legal / trial hero texture: a faint gold dot grid */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(245, 158, 11, 0.10) 1px, transparent 1.2px);
  background-size: 28px 28px;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.store-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.store-hero-title {
  font-size: var(--fs-display);
  font-weight: var(--fw-head);
  line-height: var(--lh-display);
  text-wrap: balance;
  word-break: auto-phrase;
  margin: 0 0 var(--sp-5);
}
.store-hero-title sup { font-size: 0.45em; }
/* the marked word in brand blue, as in the /payment/ and /app/ heroes */
.store-hero-title .title-mark { color: var(--primary); }
.store-hero-sub {
  max-width: 660px;
  margin: 0 auto;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-light);
}
.store-hero-sub em {
  white-space: nowrap;   /* 「読解50題」 never splits between 読解 and 50題 */
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--text-main);
}
.store-hero-sub sup { font-size: 0.6em; }
.store-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.store-hero-price {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  color: var(--text-light);
}
.store-hero-price .font-en {
  font-size: var(--fs-h2);
  font-weight: var(--fw-head);
  color: var(--text-main);
  margin-right: 0.1em;
}

/* The worksheet, drawn: three A4 sheets fanned out, passage in front.
   Shapes only — a reader sees "this is a printed worksheet", never a
   question. Sheets are 210:297 like the PDF. */
.store-sheets {
  position: relative;
  width: min(100%, 560px);
  height: 300px;
  margin: var(--sp-12) auto 0;
}
.store-sheet {
  position: absolute;
  bottom: -36px;
  left: 50%;
  width: 200px;
  aspect-ratio: 210 / 297;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 0;
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  text-align: left;
}
.store-sheet--writing   { transform: translateX(-112%) rotate(-7deg); }
.store-sheet--questions { transform: translateX(12%) rotate(6deg); }
.store-sheet--passage   { transform: translateX(-50%) translateY(-18px); z-index: 2; }
.store-sheet-head {
  display: flex;
  align-items: center;
  gap: 5px;
}
.store-sheet-badge {
  display: block;
  width: 26px;
  height: 9px;
  border: 1px solid #ABABAB;
  border-radius: 1px;
}
.store-sheet-badge--wide { width: 38px; }
.store-sheet-track {
  margin-left: auto;
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.store-sheet-title {
  display: block;
  width: 72%;
  height: 8px;
  border-radius: 2px;
  background: #2C2C2C;
  box-shadow: 0 9px 0 -3px #fff, 0 10px 0 -3px #2C2C2C;
  margin-bottom: 6px;
}
.store-sheet-box {
  display: block;
  flex: 1;
  margin-bottom: 18px;
  padding: 10px;
  border: 1px solid #D1D1D1;
  background: #FAFAFA;
}
.store-sheet-box--short { flex: 0 0 56px; margin-bottom: 0; }
.store-sheet-lines {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(to bottom, #C9C9C9 0 2px, transparent 2px 9px);
  -webkit-mask: linear-gradient(to right, #000 92%, transparent);
          mask: linear-gradient(to right, #000 92%, transparent);
}
.store-sheet-q {
  display: block;
  height: 46px;
  border: 1px solid #D1D1D1;
  background:
    linear-gradient(#333, #333) 8px 8px / 14px 8px no-repeat,
    repeating-linear-gradient(to bottom, #D4D4D4 0 2px, transparent 2px 8px) 30px 9px / calc(100% - 40px) 30px no-repeat;
}
.store-sheet-rules {
  display: block;
  flex: 1;
  background: repeating-linear-gradient(to bottom, transparent 0 13px, #BABABA 13px 14px);
}
/* The sheets fade into the band rather than being cut at its edge
   (.app-hero-fade on /payment/ and /app/). */
.store-hero-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  background: linear-gradient(180deg, rgba(250, 247, 243, 0) 0%, var(--bg-cream) 100%);
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 600px) {
  .store-sheets { height: 230px; margin-top: var(--sp-10); }
  .store-sheet { width: 150px; padding: 12px 12px 0; gap: 8px; }
  .store-sheet-q { height: 34px; }
}

/* =====================
   3. CONTENTS
   ===================== */
.store-facts { margin-bottom: var(--sp-block); }
.store-kinds .card-text sup { font-size: 0.6em; }
/* a .card; only the space above it is the page's */
.store-files { margin-top: var(--sp-block); }
.store-files-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
}
.store-files-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.store-files-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border-warm);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
}
.store-file-name { font-weight: var(--fw-bold); color: var(--text-main); }
.store-file-meta { color: var(--text-light); }
@media (max-width: 520px) {
  /* every row the same shape on a phone: the name, then its format under it */
  .store-files-list li { flex-direction: column; gap: 0; }
}
.store-files .note { max-width: none; }

/* The price table sized to what is on sale: fee.css lays four cells to a
   row, and two grades in a four-track row left half the panel empty. */
@media (min-width: 1024px) {
  .store-fee[data-count="1"] { max-width: 360px; margin-inline: auto; }
  .store-fee[data-count="2"] { max-width: 640px; margin-inline: auto; }
  .store-fee[data-count="3"] { max-width: 900px; margin-inline: auto; }
  .store-fee .fee-row[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
  .store-fee .fee-row[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-fee .fee-row[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 521px) and (max-width: 1023px) {
  .store-fee[data-count="1"] { max-width: 360px; margin-inline: auto; }
  .store-fee .fee-row[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
}

.store-empty {
  max-width: var(--w-narrow);
  margin: 0 auto;
  padding: var(--sp-6);
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-light);
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
}

/* =====================
   4. PURCHASE FORM — the trial form's card and controls, plus:
   ===================== */
.store-buy-container { max-width: var(--w-narrow); }
.store-buy-container .section-header { text-align: center; }
.store-buy-container .section-desc { margin-inline: auto; }

/* Grade pills: a price line under the grade name. The column count comes
   from how many grades are on sale (data-cols), capped at two on phones. */
.store-grade-group[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.store-grade-group[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.store-grade-group[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.store-grade-group[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 480px) {
  .store-grade-group[data-cols="3"],
  .store-grade-group[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.store-grade-pill label {
  flex-direction: column;
  gap: 2px;
  min-height: 64px;
}
.store-grade-name { font-size: var(--fs-body); }
.store-grade-price {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--text-light);
}
.store-grade-pill input:checked + label .store-grade-price { color: rgba(255, 255, 255, 0.9); }
.trial-choice[aria-invalid="true"] .trial-pill label { border-color: #E5484D; }

/* 最終確認 — the order, stated before the button */
.store-summary {
  margin-top: var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-warm);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-md);
}
.store-summary-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-bold);
}
.store-summary-list { margin: 0; }
.store-summary-list > div {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px dashed var(--border-warm);
}
.store-summary-list > div:first-child { border-top: 0; padding-top: 0; }
.store-summary-list dt {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-bold);
  color: var(--text-light);
}
.store-summary-list dd {
  margin: 0;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--text-main);
}
.store-summary-list strong {
  font-family: var(--font-en);
  font-size: var(--fs-h3);
  font-weight: var(--fw-head);
  color: var(--text-main);
}
.store-summary-sub { color: var(--text-light); }
.store-summary-list strong.is-empty { font-weight: var(--fw-regular); color: var(--text-muted); }
@media (max-width: 480px) {
  .store-summary { padding: var(--sp-4); }
  .store-summary-list > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.store-consent { margin-top: var(--sp-6); }

/* A returning buyer who cancelled on Stripe: information, not an error. */
.store-notice {
  margin-bottom: var(--sp-md);
  padding: 0.85rem 1.1rem;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--ink-sky);
  background: rgba(0, 174, 239, 0.08);
  border: 1px solid rgba(0, 174, 239, 0.25);
  border-radius: var(--r-sm);
}

/* =====================
   5. TERMS
   ===================== */
.store-narrow { max-width: var(--w-narrow); }
.store-terms {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: store-terms;
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.store-terms li {
  position: relative;
  padding: var(--sp-4) var(--sp-6) var(--sp-4) calc(var(--sp-6) + 2.25rem);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--text-light);
  counter-increment: store-terms;
}
.store-terms li + li { border-top: 1px solid var(--border-warm); }
.store-terms li::before {
  content: counter(store-terms, decimal-leading-zero);
  position: absolute;
  left: var(--sp-6);
  top: var(--sp-4);
  font-family: var(--font-en);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-md);
  font-weight: var(--fw-head);
  color: var(--accent);
}
.store-terms strong {
  display: block;
  color: var(--text-main);
  /* a one-line rule: never 「…できませ／ん。」 */
  word-break: auto-phrase;
  text-wrap: balance;
}
.store-terms sup { font-size: 0.6em; }
.store-terms a {
  color: var(--ink-sky);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

/* =====================
   6. THANKS / DOWNLOAD
   ===================== */
.store-thanks-notes {
  max-width: 34em;
  margin: var(--sp-6) auto 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + 1em);
  list-style: disc;
  text-align: left;
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--text-light);
  background: var(--bg-warm);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-md);
}
.store-thanks-notes li + li { margin-top: var(--sp-2); }
.store-thanks a,
.store-dl-info a {
  color: var(--ink-sky);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.store-thanks .btn { text-decoration: none; }
/* the masked address is the page's key fact: brand-blue text at body size
   is --ink-sky (contrast), not --primary */
.store-thanks .trial-thanks-text em { color: var(--ink-sky); }
.store-thanks-action { margin-top: var(--sp-8); }
.store-masked { overflow-wrap: anywhere; }
.store-spinner {
  display: inline-block;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-5);
  border: 3px solid rgba(0, 174, 239, 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: trial-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .store-spinner { animation: none; }
}

.store-dl-card {
  margin-bottom: var(--sp-6);
  padding: var(--sp-5) var(--pad-card) var(--sp-3);
  background: var(--bg-white);
  border: 1px solid var(--border-warm);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.store-dl-heading {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
}
.store-dl-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.store-dl-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
}
.store-dl-item + .store-dl-item { border-top: 1px solid var(--border-warm); }
.store-dl-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: rgba(0, 174, 239, 0.10);
  color: var(--primary);
}
.store-dl-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.store-dl-name {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-bold);
  color: var(--text-main);
  word-break: auto-phrase;
}
.store-dl-meta {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-light);
}
.store-dl-btn { flex-shrink: 0; }
@media (max-width: 480px) {
  .store-dl-item { flex-wrap: wrap; }
  .store-dl-btn { width: 100%; }
}

.store-tracks {
  margin: 0 0 var(--sp-3);
  border-top: 1px solid var(--border-warm);
}
.store-tracks-summary {
  /* block, like .faq-summary: a flex <summary> loses its disclosure role in
     older WebKit */
  display: block;
  padding: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  font-weight: var(--fw-bold);
  color: var(--ink-sky);
  cursor: pointer;
  list-style: none;
}
.store-tracks-summary::-webkit-details-marker { display: none; }
/* the FAQ's +/− toggle, small */
.store-tracks-summary::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  margin-right: var(--sp-2);
  vertical-align: -0.2em;
  font-family: var(--font-en);
  line-height: 1;
}
.store-tracks[open] .store-tracks-summary::before { content: '\2212'; }
.store-tracks-summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.store-tracks-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-6);
  margin: 0;
  padding: 0 0 var(--sp-3);
  list-style: none;
}
@media (max-width: 640px) {
  .store-tracks-list { grid-template-columns: minmax(0, 1fr); }
}
.store-tracks-list a {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  min-height: 44px;
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--border-warm);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--text-main);
}
.store-tracks-list a:hover .store-track-title { color: var(--ink-sky); text-decoration: underline; }
.store-tracks-list a:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.store-track-no {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--text-light);
}
.store-track-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.store-dl-info {
  padding: 0 var(--sp-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-light);
}
.store-dl-info p { margin: 0 0 var(--sp-2); }
.store-dl-info ul { margin: 0; padding-left: 1.2em; list-style: disc; }
.store-dl-info li + li { margin-top: var(--sp-1); }
.store-license { font-weight: var(--fw-bold); color: var(--text-main); letter-spacing: 0.04em; }

/* The error / guide states use the trial page's .trial-error-hero; the one
   link some of them carry (the support address) reads like the site's
   other inline links. */
.store-error .trial-error-desc a {
  color: var(--ink-sky);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

/* 英検® in the store's titles and copy: the site-wide recipe (components.css
   .card sup), so the mark never adds leading. Breadcrumbs and buttons are
   flex rows and write a plain ® instead, as the header nav does. */
.page-store .trial-thanks-text sup,
.page-store .trial-hero-title sup {
  font-size: 0.6em;
  vertical-align: baseline;
  position: relative;
  top: -0.45em;
}
.page-store .trial-hero-title sup { font-size: 0.45em; top: -0.9em; }