/* TAISUN スキル販売 — ダウンロードページ共通スタイル */

:root {
  --color-primary: #0F3D7A;
  --color-primary-dark: #0A2244;
  --color-accent: #FFB400;
  --color-bg: #F5F7FB;
  --color-card: #FFFFFF;
  --color-text: #1B2A4E;
  --color-text-mute: #6B7A99;
  --color-border: #E2E8F2;
  --color-success: #2E8B57;
  --color-error: #C0392B;
  --shadow-card: 0 8px 28px rgba(15, 61, 122, 0.08);
  --radius: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Yu Gothic UI", "Yu Gothic", "Hiragino Sans", "Meiryo", system-ui, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px 64px;
}

.brand {
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--color-text-mute);
  margin-bottom: 24px;
  text-transform: uppercase;
}

.card {
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 40px 36px;
  width: 100%;
  max-width: 520px;
}

.card h1 {
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--color-primary-dark);
}

.card .lead {
  font-size: 15px;
  color: var(--color-text-mute);
  margin: 0 0 24px;
}

.product-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-text-mute);
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.product-meta span { display: inline-flex; align-items: center; gap: 4px; }

label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-text);
}

input[type="password"], input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: #FAFBFE;
  color: var(--color-text);
  transition: border-color 0.15s, background 0.15s;
}

input[type="password"]:focus, input[type="text"]:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #FFF;
}

button[type="submit"], .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  color: #FFF;
  background: var(--color-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}

button[type="submit"]:hover, .btn-primary:hover { background: var(--color-primary-dark); }
button[type="submit"]:active, .btn-primary:active { transform: translateY(1px); }
button[type="submit"]:disabled { background: #97A8C8; cursor: not-allowed; }

.notice {
  margin-top: 24px;
  padding: 14px 16px;
  background: #F0F4FA;
  border-left: 3px solid var(--color-primary);
  font-size: 13px;
  color: var(--color-text-mute);
  border-radius: 0 6px 6px 0;
}

.message {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 8px;
  font-size: 14px;
  display: none;
}

.message.show { display: block; }
.message.error { background: #FDECEA; color: var(--color-error); border: 1px solid #F5C6C0; }
.message.success { background: #E7F6EC; color: var(--color-success); border: 1px solid #BFE3CC; }

.dl-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 16px;
  background: var(--color-accent);
  color: var(--color-primary-dark);
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}

.dl-link:hover { background: #FFC940; text-decoration: none; }

.footer {
  margin-top: 36px;
  font-size: 12px;
  color: var(--color-text-mute);
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid #FFFFFF55;
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 540px) {
  .card { padding: 28px 22px; }
  .card h1 { font-size: 19px; }
}