/* ヘッダーとフッター：掲載枠・料金・掲載期間をまとめて案内する。 */
/* 背景画像は金色の光とタイルを上端・下端に置き、文字が乗る中央は暗いまま残す。 */
.app-header,
.app-footer { position: relative; isolation: isolate; border: 0; }
.app-header {
  /* ウォールより前面、Bootstrapのモーダル・モバイルメニューより背面。 */
  z-index: 1000;
  background:
    radial-gradient(ellipse 22% 62% at 14% 52%, #050c18d9, #050c1800),
    linear-gradient(180deg, #050c1800 55%, #050c18b3),
    url("../images/chrome-header-bg-v1.webp") center top / max(100%, 1180px) auto no-repeat,
    linear-gradient(180deg, #0a1526, #050d19);
}
.app-footer {
  background:
    radial-gradient(ellipse 18% 75% at 11% 50%, #040b16cc, #040b1600),
    url("../images/chrome-footer-bg-v1.webp") center bottom / max(100%, 1180px) auto no-repeat,
    linear-gradient(0deg, #091424, #040b16);
}
/* 本文との境目に、中央ほど明るい金の細線を引く。 */
.app-header::after,
.app-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  height: 1px;
  background: linear-gradient(90deg, #b8893a00, #d9ad5a 18%, #fff1c2 50%, #d9ad5a 82%, #b8893a00);
  box-shadow: 0 0 10px 1px #f3c86a88, 0 0 26px 2px #e5bf6533;
  pointer-events: none;
}
.app-header::after { bottom: 0; }
.app-footer::before { top: 0; }
.app-header {
  display: grid;
  grid-template-columns: minmax(270px, .95fr) 145px 285px minmax(350px, 1.25fr);
  align-items: center;
  gap: 14px;
  min-height: 180px;
  padding: 14px 26px 16px;
}
.app-header .app-brand {
  width: 100%;
  max-width: 390px;
  min-width: 0;
  margin: 0;
  text-align: center;
  text-decoration: none;
  order: initial;
}
.app-header .app-brand img,
.app-footer .footer-brand img { aspect-ratio: 5 / 1; object-fit: cover; object-position: center; }
.brand-tagline { display: block; margin-top: -2px; color: #f1cf82; font-family: Georgia, "Times New Roman", serif; font-size: 13px; line-height: 1.7; letter-spacing: .2em; text-shadow: 0 0 10px #e5bf6540; }
.app-header .header-stat {
  border: 1px solid #56657c;
  border-radius: 8px;
  background: linear-gradient(180deg, #0b1729e6, #050c18f0);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 12px;
  margin: 0;
  min-width: 0;
  box-shadow: inset 0 1px 0 #efd48e24, 0 10px 28px #0008;
  order: initial;
}
.app-header .price-stat { display: block; text-align: left; }
.app-header .price-stat strong { font-size: 27px; letter-spacing: -.025em; }
.app-header .price-stat strong span { font-size: 14px; color: #e1e7f0; }
.app-header .price-stat small { display: block; margin-top: 6px; font-size: 10px; color: #b4c0cf; }
.app-header .sold-stat { display: block; width: auto; max-width: none; }
.app-header .sold-heading { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.sold-heading i { color: var(--wall-gold); font-size: 23px; }
.app-header .sold-heading small { font-size: 11px; color: #d6deea; }
.app-header .sold-heading strong { font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; }
.app-header .sold-denominator { font-size: 12px; color: #d6deea; }
.app-header .sold-track { width: 100%; height: 8px; margin: 10px 0 9px; border: 1px solid #30475b; border-radius: 4px; background: #071b2c; }
.app-header .sold-track { overflow: visible; }
.app-header .sold-track span { position: relative; min-width: 8px; border-radius: 4px; background: linear-gradient(90deg, #d6a640, #f8dda0); box-shadow: 0 0 8px #f3c86a66; }
/* 進み具合の先端に光る粒を置き、少ない販売数でも位置が分かるようにする。 */
.app-header .sold-track span::after { content: ""; position: absolute; top: 50%; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fff3cf; box-shadow: 0 0 6px 2px #f3c86acc; transform: translateY(-50%); }
.tile-allocation { display: flex; gap: 7px; }
.tile-allocation > span { display: flex; flex: 1; align-items: center; justify-content: center; gap: 5px; padding: 6px 4px; border: 1px solid #34485d; border-radius: 4px; color: #afbdce; font-size: 10px; line-height: 1.4; }
.tile-allocation b { color: #e5edf7; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tile-allocation > span:last-child b { color: var(--wall-gold); }
.header-actions { display: grid; min-width: 0; gap: 14px; }
.header-lifetime { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; min-height: 48px; padding: 5px 12px; border: 1.5px solid #d7ad5c; border-radius: 7px; background: linear-gradient(100deg, #3d2c12f2, #0b1522f0 45%, #2a1f0ef2); color: #ffe2a0; font-size: 13px; line-height: 1.6; font-weight: 700; letter-spacing: .04em; box-shadow: 0 0 16px #e5bf6530, inset 0 1px 0 #ffe7a855, inset 0 0 18px #e5bf6514; }
.header-lifetime i { flex-shrink: 0; color: #f5d17a; font-size: 36px; line-height: 1; filter: drop-shadow(0 0 6px #e5bf6580); }
.app-header .header-tools { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-header .app-search { order: initial; flex: 1; min-width: 0; height: 48px; margin: 0; padding: 10px 13px; border-color: #627087; background: #050e19eb; box-shadow: 0 10px 28px #0007; }
.app-header .app-search input { font-size: 12px; }
.app-header .header-button { justify-content: center; min-height: 48px; font-size: 13px; }
.app-header .cart-button { width: 48px; flex-shrink: 0; padding: 0; margin: 0; border-color: #627087; background: linear-gradient(150deg, #12273a, #061523); color: #e7eff9; }
.app-header #cartButtonLabel { display: none; }
.app-header .cart-badge { position: absolute; top: -5px; right: -5px; border: 1px solid #dfbd75; background: #d7b05a; color: #111820; }
.app-header .header-account { flex-shrink: 0; }
.app-header .account-button { padding-inline: 18px; border: 1.5px solid #d7ad5c; background: linear-gradient(135deg, #5a4420e6, #1a1a16f0 55%, #3a2c12e6); color: #ffe2a0; font-weight: 700; box-shadow: 0 0 14px #e5bf6533, inset 0 1px 0 #ffe7a855; }
.app-header .account-button:hover { border-color: #f3cf7c; background: linear-gradient(135deg, #6e5426, #22201a 55%, #4a3816); color: #fff0c4; }
.app-header .header-button:focus-visible,
.app-footer a:focus-visible,
.app-footer button:focus-visible { outline: 2px solid var(--wall-gold); outline-offset: 3px; }

.app-footer { display: grid; grid-template-columns: 236px minmax(260px, 1fr) auto; align-items: center; gap: 24px; padding: 18px 26px; min-height: 108px; }
.app-footer .footer-brand { display: block; width: 100%; max-width: 270px; text-decoration: none; }
.footer-brand img { display: block; width: 100%; height: auto; }
.footer-japanese-name { display: block; margin-top: 4px; color: #e7c77c; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif; font-size: 11px; line-height: 1.6; text-align: center; letter-spacing: .3em; }
.footer-promise { display: flex; align-items: center; gap: 16px; padding-left: 28px; border-left: 1px solid #c9a2584d; min-width: 0; }
.footer-promise > i { color: #f5d17a; font-size: 42px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 0 7px #e5bf6580); }
.footer-promise p { margin: 0 0 4px; color: #f5d17a; font-size: 13px; line-height: 1.6; font-weight: 700; letter-spacing: .02em; }
.footer-promise span { display: block; color: #d3dbe6; font-size: 10.5px; line-height: 1.8; }
.footer-meta { display: flex; align-items: center; gap: 16px; }
.app-footer .footer-legal { display: flex; width: auto; max-width: none; align-items: center; gap: 0; margin: 0; }
/* 法的リンクは縦線で区切って一続きに並べる。 */
.app-footer .footer-legal button { display: inline-flex; align-items: center; padding: 0 11px; }
.app-footer .footer-legal button + button::before { content: ""; width: 1px; height: 12px; margin-right: 11px; margin-left: -11px; background: #7d8796; }
.app-footer .footer-legal button { min-height: 44px; font-size: 11px; color: #d3dbe6; line-height: 1.7; }
.app-footer .footer-legal button:hover { color: var(--wall-gold); }
.footer-community { display: grid; gap: 6px; border-left: 1px solid #c9a2584d; padding-left: 20px; text-align: right; text-shadow: 0 1px 6px #000, 0 0 12px #000c; }
.app-footer .footer-social { display: flex; justify-content: flex-end; gap: 4px; }
.footer-social a,
.footer-social .social-pending { display: inline-flex; justify-content: center; align-items: center; width: 34px; height: 34px; border-radius: 5px; color: #dce6f4; font-size: 17px; text-decoration: none; }
.footer-social a:hover { background: #d7a64415; color: var(--wall-gold); }
.footer-social .social-pending { opacity: .65; }
.app-footer small { font-size: 10px; margin: 0; width: auto; color: #b9c4d3; }

@media (min-width: 1800px) {
  .app-header { grid-template-columns: minmax(360px, .95fr) 165px 310px minmax(420px, 1.25fr); gap: 24px; padding: 14px 32px; }
  .app-header .app-brand { max-width: 450px; }
  .brand-tagline { font-size: 14px; }
  .header-lifetime { font-size: 14px; }
  .app-footer { grid-template-columns: 290px minmax(260px, 1fr) auto; padding-inline: 32px; }
}
@media (max-width: 1279px) {
  .app-header { grid-template-columns: minmax(250px, 1fr) 145px 285px; gap: 12px 16px; padding: 14px 20px; }
  .app-header .app-brand { justify-self: center; }
  .header-actions { grid-column: 1 / -1; grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.3fr); align-items: center; gap: 20px; }
  .app-footer { grid-template-columns: 220px minmax(250px, 1fr); gap: 6px 24px; padding: 16px 20px; }
  .footer-meta { grid-column: 1 / -1; justify-content: center; gap: 24px; }
}
@media (max-width: 760px) {
  .app-header { grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr); grid-template-areas: none; gap: 12px; padding: 14px; text-align: center; }
  .app-header .app-brand { grid-area: auto; grid-column: 1 / -1; width: 100%; max-width: 360px; margin: auto; }
  .brand-tagline { font-size: 10px; margin-top: -2px; }
  .app-header .price-stat { grid-area: auto; justify-self: stretch; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 10px 6px; text-align: center; }
  .app-header .price-stat strong { font-size: 23px; }
  .app-header .price-stat strong span { font-size: 11px; }
  .app-header .price-stat small { font-size: 8px; margin-top: 6px; }
  .app-header .sold-stat { grid-area: auto; width: 100%; padding: 10px; justify-self: stretch; }
  .app-header .sold-heading { gap: 5px; justify-content: center; }
  .sold-heading i { font-size: 18px; }
  .app-header .sold-heading strong { font-size: 22px; }
  .app-header .sold-heading small,
  .app-header .sold-denominator { font-size: 10px; }
  .app-header .sold-track { height: 6px; margin: 8px 0; }
  .tile-allocation { flex-wrap: wrap; gap: 4px; }
  .tile-allocation > span { font-size: 9px; padding: 4px; }
  .tile-allocation b { font-size: 10px; }
  .header-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .header-lifetime { min-height: 38px; font-size: 10px; gap: 7px; padding: 6px; }
  .header-lifetime i { font-size: 25px; }
  .app-header .header-tools { grid-area: auto; display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; width: 100%; }
  .app-header .header-tools.has-cart { grid-template-columns: minmax(0, 1fr) 48px 48px; }
  .app-header .app-search input { font-size: 16px; }
  .app-header .mobile-menu-toggle { display: flex; }
  .app-header .header-account { display: none; }
  .app-footer { display: flex; flex-direction: column; gap: 14px; padding: 22px 14px; text-align: center; }
  .app-footer .footer-brand { max-width: 285px; }
  .footer-promise { justify-content: center; border: 0; padding: 0; gap: 10px; }
  .footer-promise > i { font-size: 30px; }
  .footer-promise p { font-size: 11px; }
  .footer-promise span { font-size: 9px; }
  .footer-meta { display: flex; flex-direction: column; gap: 12px; width: 100%; }
  .app-footer .footer-legal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 380px; gap: 0 12px; }
  .app-footer .footer-legal button { justify-content: center; font-size: 11px; padding: 8px 0; }
  .app-footer .footer-legal button + button::before { display: none; }
  .footer-community { border: 0; padding: 0; gap: 8px; }
  .app-footer small { font-size: 9px; white-space: normal; }
}