* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  background: #f5f5f5;
  color: #1a1a1a;
  font-size: 14px;
  line-height: 1.7;
}

.page {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ─────────────────────────────────── */
.site-header {
  padding: 20px 16px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
.site-header a { text-decoration: none; }
.site-logo { height: 48px; display: block; margin: 0 auto; }
.site-logo-text { font-size: 20px; font-weight: 700; color: #333; }

/* ── Page content ────────────────────────────── */
.page-content { flex: 1; padding: 20px 16px; }

/* ── Buttons ─────────────────────────────────── */
.btn {
  display: block; width: 100%;
  padding: 14px; font-size: 15px; font-weight: 700;
  border: none; border-radius: 8px; cursor: pointer;
  margin-bottom: 10px; transition: opacity .15s;
  text-align: center; text-decoration: none;
  line-height: 1.3;
}
.btn:last-child { margin-bottom: 0; }
.btn:hover { opacity: .85; }
.btn-primary { background: #f38b1f; color: #fff; }
.btn-danger  { background: #c0392b; color: #fff; }
.btn-ghost   { background: #f3f4f6; color: #555; }
.btn-outline { background: #fff; color: #333; border: 2px solid #ccc; }
.price-small { font-size: 12px; font-weight: 400; opacity: .85; }

/* ── Top page ────────────────────────────────── */
.app-desc { color: #444; margin-bottom: 24px; }
.app-desc p { margin-bottom: 8px; }
.app-desc p:last-child { margin-bottom: 0; }

.section-banner {
  font-size: 13px; font-weight: 400; color: #333;
  text-align: center;
  padding: 8px 12px;
  margin: 0 0 16px;
  border: 1px solid #999;
}

.purchase-note { font-size: 13px; color: #555; margin-bottom: 16px; }
.purchase-note a { color: #0000cc; text-decoration: underline; }
.purchase-note a:hover { color: #0000ee; }

.terms-notes { margin-top: 20px; padding: 0; list-style: none; }
.terms-notes li {
  font-size: 12px; color: #666;
  padding: 8px 0 8px 14px;
  border-top: 1px solid #f0f0f0;
  position: relative;
}
.terms-notes li:last-child { border-bottom: 1px solid #f0f0f0; }
.terms-notes li::before { content: '・'; position: absolute; left: 0; }

/* ── Subscription states ─────────────────────── */
.badge-row { text-align: center; margin-bottom: 16px; }
.badge {
  display: inline-block; padding: 4px 14px;
  border-radius: 20px; font-size: 12px; font-weight: 700;
}
.badge-active   { background: #d4edda; color: #1a8a3c; }
.badge-released { background: #fde8e8; color: #c0392b; }

.code-box {
  background: #f8f8f8; border: 2px dashed #ddd;
  border-radius: 10px; padding: 20px; margin-bottom: 16px;
  text-align: center;
}
.code-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.code-value { font-family: monospace; font-size: 22px; font-weight: 700; word-break: break-all; }
.code-hint  { font-size: 12px; color: #999; margin-top: 8px; }
.notice     { font-size: 13px; color: #888; text-align: center; padding: 20px 0; }
.divider    { border: none; border-top: 1px solid #eee; margin: 16px 0; }

/* ── Sub-page content ────────────────────────── */
.section-box { margin-bottom: 28px; }
.section-heading {
  font-size: 15px; font-weight: 700;
  border-left: 4px solid #f38b1f;
  padding-left: 10px;
  margin-bottom: 12px;
}

.info-list { list-style: none; padding: 0; }
.info-list li {
  font-size: 13px; color: #444;
  padding: 6px 0 6px 14px;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}
.info-list li::before { content: '・'; position: absolute; left: 0; color: #f38b1f; }

/* ── Legal content ───────────────────────────── */
.legal-body { font-size: 13px; color: #333; line-height: 1.9; }
.legal-body p { margin-bottom: 12px; }
.legal-article { margin-bottom: 20px; }
.legal-article h3 { font-size: 14px; font-weight: 700; margin-bottom: 8px; color: #222; }

/* ── Contact ─────────────────────────────────── */
.contact-note { font-size: 13px; color: #555; margin-bottom: 16px; line-height: 1.8; }
.contact-hours { font-size: 13px; color: #444; margin-bottom: 4px; }
.contact-links { font-size: 13px; margin-bottom: 16px; }
.contact-links a { color: #f38b1f; text-decoration: none; }
.contact-links a:hover { text-decoration: underline; }

/* ── Cancellation page ───────────────────────── */
.cancel-notice {
  background: #fff8f0; border: 1px solid #f38b1f;
  border-radius: 8px; padding: 14px 16px; margin-bottom: 24px;
  font-size: 13px; color: #555;
}

/* ── Footer (top page only) ──────────────────── */
.site-footer {
  padding: 20px 16px 32px;
  background: #f8f8f8;
  border-top: 1px solid #eee;
  text-align: center;
  font-size: 12px;
}
.site-footer .footer-row { margin-bottom: 6px; line-height: 2; }
.site-footer a { color: #0000cc; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-sep { color: #555; margin: 0 3px; }

/* ── Minimal footer (sub-pages) ──────────────── */
.footer-minimal {
  padding: 16px;
  text-align: center;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #aaa;
}
.footer-minimal a { color: #aaa; text-decoration: none; }
.footer-minimal a:hover { text-decoration: underline; }