/* ロジトレ アプリ プロトタイプ・スタイル */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* === 一時的：AdSense審査前は広告プレースホルダーを非表示 ===
   ※ AdSense合格・広告コード実装後にこのブロック4行を削除する。 */
.ad-zone, .inline-ad { display: none !important; }
.layout { display: block !important; max-width: 720px !important; }
/* === ここまで === */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  background: linear-gradient(135deg, #F5F7FA 0%, #E8EEF5 100%);
  color: #1A2332;
  line-height: 1.7;
  padding: 24px 16px 60px;
  min-height: 100vh;
}

/* ===== 3-column layout (PC: ad-left | main | ad-right) ===== */
.layout {
  display: grid;
  grid-template-columns: 1fr minmax(0, 720px) 1fr;
  gap: 32px;
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
}
.container { width: 100%; min-width: 0; }
.ad-zone {
  position: sticky;
  top: 24px;
  display: flex;
  justify-content: center;
}
.ad-placeholder {
  width: 300px;
  height: 600px;
  background: white;
  border: 3px dashed #94A3B8;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.5px;
}
.ad-placeholder .ad-size {
  font-size: 12px;
  font-weight: 500;
  color: #B0BEC5;
  margin-top: 6px;
}

/* タブレット・スマホでは広告枠を畳む */
@media (max-width: 1199px) {
  .layout {
    display: block;
    max-width: 720px;
  }
  .ad-zone { display: none; }
}

/* ===== Inline ads (mobile/tablet) ===== */
.inline-ad {
  display: none;
}
@media (max-width: 1199px) {
  .inline-ad {
    display: flex;
    justify-content: center;
    margin: 24px 0;
  }
}
.ad-placeholder-mobile {
  width: 300px;
  height: 250px;
  background: white;
  border: 3px dashed #94A3B8;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.5px;
  max-width: 100%;
}

/* ===== Hero ===== */
.hero {
  margin-bottom: 28px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(91, 127, 232, 0.10);
  border: 3px solid #94A3B8;
  overflow: hidden;
}
.hero-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  background-image: url('/assets/header.jpg');
  background-size: cover;
  background-position: center;
}
.hero-icon-wrapper {
  position: absolute;
  bottom: -36px;
  left: 24px;
  width: 84px;
  height: 84px;
}
.hero-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.hero-spacer {
  height: 32px;  /* アイコンが下にはみ出すスペース確保（最小限）*/
}

/* === ブックマーク誘導 CTA（目立つ位置に配置）=== */
.bookmark-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  margin: 0 0 24px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 3px solid #F59E0B;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.20);
}
.bookmark-cta .bookmark-icon {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
}
.bookmark-cta .bookmark-text {
  font-size: 14px;
  color: #78350F;
  line-height: 1.6;
  flex: 1;
}
.bookmark-cta .bookmark-text strong {
  display: block;
  font-size: 17px;
  font-weight: 900;
  color: #92400E;
  margin-bottom: 4px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Card (共通) ===== */
.card {
  background: white;
  border-radius: 20px;
  padding: 28px 24px;
  margin-bottom: 24px;
  box-shadow: 0 12px 32px rgba(91, 127, 232, 0.12);
  border: 3px solid #94A3B8;
}

/* ===== Home screen ===== */
.home-cta {
  text-align: center;
  padding: 36px 24px;
}
.home-cta .date-label {
  font-size: 14px;
  color: #5D6B7E;
  margin-bottom: 10px;
  font-weight: 600;
}
.home-cta .main-title {
  font-size: clamp(20px, 5vw, 28px);
  font-weight: 900;
  color: #0F172A;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-cta .sub-text {
  color: #5D6B7E;
  font-size: 15px;
  margin-bottom: 28px;
  line-height: 1.8;
}
.btn-primary {
  display: inline-block;
  padding: 16px clamp(20px, 5vw, 48px);
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #5B7FE8 0%, #4A6BD9 100%);
  color: white;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 8px 20px rgba(91, 127, 232, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(91, 127, 232, 0.45); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
  display: inline-block;
  padding: 12px 24px;
  border: 3px solid #94A3B8;
  border-radius: 12px;
  background: white;
  color: #5D6B7E;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.btn-secondary:hover { background: #F1F5F9; border-color: #94A3B8; }

/* Streak card */
.streak-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 24px;
  text-align: center;
}
.streak-item .num {
  font-size: 28px;
  font-weight: 900;
  color: #5B7FE8;
  line-height: 1.2;
}
.streak-item .label {
  font-size: 12px;
  color: #5D6B7E;
  font-weight: 600;
}
.streak-item.streak .num { color: #F59E0B; }

/* ===== Quiz screen ===== */
.progress-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px 18px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(91, 127, 232, 0.05);
}
.progress-bar .step {
  flex: 1;
  height: 8px;
  background: #E5E7EB;
  border-radius: 4px;
  transition: background 0.2s;
}
.progress-bar .step.done { background: #5B7FE8; }
.progress-bar .step.current { background: linear-gradient(90deg, #5B7FE8 50%, #E5E7EB 50%); }
.progress-bar .step-label {
  font-size: 13px;
  font-weight: 700;
  color: #5D6B7E;
  white-space: nowrap;
}

.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px dashed #CFD8DC;
}
.qnum {
  font-size: 22px;
  font-weight: 900;
  color: #0F172A;
}
.qnum-of {
  font-size: 14px;
  color: #5D6B7E;
  font-weight: 600;
  margin-left: 8px;
}

/* Question */
.question {
  font-size: 19px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 18px;
  line-height: 1.7;
  white-space: pre-line;
  letter-spacing: 0.3px;
}
.quote-box {
  background: #EFF6FF;
  border-left: 6px solid #3B82F6;
  padding: 18px 22px;
  border-radius: 10px;
  margin: 16px 0 22px;
  font-size: 16px;
  color: #1E3A8A;
  line-height: 1.85;
  font-weight: 500;
  white-space: pre-line;
}

.instruction {
  font-size: 13px;
  color: #6B7280;
  margin: 4px 0 14px;
  padding: 10px 14px;
  background: #F8FAFC;
  border-radius: 8px;
  border-left: 3px solid #93C5FD;
  line-height: 1.5;
}

/* Choices */
.choices { margin-bottom: 24px; }
.choice {
  background: #F9FAFB;
  border: 3px solid #94A3B8;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: #111827;
  transition: all 0.15s;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.choice:hover { border-color: #93C5FD; background: #F0F9FF; }
.choice.selected {
  border-color: #3B82F6;
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  color: #1E40AF;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.20);
}
.card.answered .choice { cursor: default; }
.card.answered .choice:hover { border-color: #D1D5DB; background: #F9FAFB; }
.card.answered .instruction { display: none; }

.choice.revealed-correct {
  border-color: #10B981 !important;
  background: #F0FDF4 !important;
  color: #14532D !important;
  font-weight: 700;
}
.choice.revealed-correct::before {
  content: "✓ ";
  font-weight: 900;
  color: #047857;
  margin-right: 6px;
  font-size: 18px;
}
.choice.revealed-wrong {
  border-color: #EF4444 !important;
  background: #FEF2F2 !important;
  color: #7F1D1D !important;
  font-weight: 700;
}
.choice.revealed-wrong::before {
  content: "✗ ";
  font-weight: 900;
  color: #B91C1C;
  margin-right: 6px;
  font-size: 18px;
}

/* Buttons */
.submit-btn {
  width: 100%;
  padding: 16px;
  margin-top: 10px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #5B7FE8 0%, #4A6BD9 100%);
  color: white;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 16px rgba(91, 127, 232, 0.30);
  transition: all 0.15s;
}
.submit-btn:disabled {
  background: #CBD5E1;
  color: #94A3B8;
  cursor: not-allowed;
  box-shadow: none;
}
.submit-btn:not(:disabled):hover { transform: translateY(-1px); }

.next-btn {
  width: 100%;
  padding: 16px;
  margin-top: 18px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: white;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.30);
}
.next-btn:hover { transform: translateY(-1px); }

/* Result header */
.result-header {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  padding: 18px;
  border-radius: 14px;
  margin-bottom: 16px;
}
.result-header.correct-result {
  background: #F0FDF4;
  color: #047857;
  border: 1px solid #BBF7D0;
}
.result-header.wrong-result {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FCA5A5;
}

/* Explanation sections */
.exp {
  margin-top: 18px;
  padding: 16px 0 0;
  border-top: 1px solid #E5E7EB;
  line-height: 1.85;
}
.exp h4 {
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 800;
}
.exp p, .exp li {
  font-size: 15px;
  color: #1F2937;
}
.exp.pattern-info h4 { color: #1E40AF; }
.exp.pattern-info p { font-size: 16px; font-weight: 700; color: #1E40AF; }
.exp.correct h4 { color: #047857; }
.exp.wrong h4 { color: #991B1B; }
.exp.wrong ul {
  list-style: none;
  padding: 0;
  margin-top: 6px;
}
.exp.wrong li {
  padding-left: 16px;
  position: relative;
  margin-bottom: 6px;
}
.exp.wrong li::before {
  content: "・";
  position: absolute;
  left: 0;
  font-weight: 900;
  color: #9CA3AF;
}
.exp.tip h4 { color: #92400E; }

/* ===== Complete screen ===== */
.complete-hero {
  text-align: center;
  padding: 32px 20px;
}
.complete-hero .emoji { font-size: 56px; margin-bottom: 12px; }
.complete-hero h2 {
  font-size: 26px;
  font-weight: 900;
  color: #0F172A;
  margin-bottom: 8px;
}
.complete-hero .score {
  font-size: 20px;
  color: #5B7FE8;
  font-weight: 800;
  margin-bottom: 14px;
}
.complete-hero .sub {
  font-size: 15px;
  color: #5D6B7E;
  line-height: 1.7;
}

.results-list { margin: 24px 0; }
.result-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #F8FAFC;
  border-radius: 12px;
  margin-bottom: 10px;
}
.result-row .icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
}
.result-row .icon.correct { background: #DCFCE7; color: #047857; }
.result-row .icon.wrong { background: #FEE2E2; color: #B91C1C; }
.result-row .text {
  font-size: 14px;
  color: #1F2937;
  line-height: 1.5;
  flex: 1;
}
.result-row .pattern {
  font-size: 12px;
  color: #5D6B7E;
  font-weight: 600;
}

.disclaimer {
  text-align: center;
  color: #757575;
  font-size: 12px;
  line-height: 1.8;
  margin-top: 32px;
  padding: 20px 16px;
  background: white;
  border-radius: 14px;
  border: 2px dashed #94A3B8;
}
.disclaimer a { color: #5B7FE8; }

/* Loading */
.loading {
  text-align: center;
  padding: 60px 20px;
  color: #5D6B7E;
}
.loading .spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid #E5E7EB;
  border-top: 4px solid #5B7FE8;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Hidden */
.hidden { display: none !important; }

/* Mobile */
@media (max-width: 600px) {
  body { padding: 16px 12px 40px; }
  .card { padding: 20px 18px; }
  .question { font-size: 17px; }
  .choice { font-size: 15px; }
  .complete-hero h2 { font-size: 22px; }
  .complete-hero .emoji { font-size: 48px; }
}

/* ===== SEO content (static, crawlable) ===== */
.seo-content {
  max-width: 720px;
  margin: 8px auto 0;
}
.seo-card {
  background: white;
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 12px 32px rgba(91, 127, 232, 0.12);
  border: 3px solid #94A3B8;
  color: #1F2937;
}
.seo-card h1 {
  font-size: clamp(19px, 4.5vw, 25px);
  font-weight: 900;
  color: #0F172A;
  line-height: 1.5;
  margin-bottom: 16px;
  letter-spacing: 0.2px;
}
.seo-card h2 {
  font-size: 18px;
  font-weight: 800;
  color: #1E40AF;
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px dashed #CFD8DC;
}
.seo-card p {
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 12px;
}
.seo-card ul {
  margin: 0 0 12px;
  padding-left: 0;
  list-style: none;
}
.seo-card ul li {
  position: relative;
  padding: 9px 0 9px 26px;
  font-size: 15px;
  line-height: 1.7;
  border-bottom: 1px solid #F1F5F9;
}
.seo-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 9px;
  color: #5B7FE8;
  font-weight: 900;
}
.seo-q {
  background: #EFF6FF;
  border-left: 6px solid #3B82F6;
  padding: 14px 18px;
  border-radius: 10px;
  font-weight: 700;
  color: #1E3A8A !important;
}
.seo-choices {
  margin: 12px 0 14px;
  padding-left: 24px;
}
.seo-choices li {
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 7px;
}
.seo-a {
  font-size: 17px !important;
  font-weight: 900;
  color: #047857 !important;
  margin-bottom: 8px !important;
}
.seo-faq dt {
  font-weight: 800;
  color: #0F172A;
  margin-top: 14px;
  font-size: 15px;
}
.seo-faq dd {
  margin: 4px 0 0;
  font-size: 15px;
  color: #1F2937;
  line-height: 1.7;
}

@media (prefers-color-scheme: dark) {
  .seo-card {
    background: #1A2332;
    border-color: #334155;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    color: #F3F4F6;
  }
  .seo-card h1 { color: #FFFFFF; }
  .seo-card h2 { color: #93C5FD; border-bottom-color: #334155; }
  .seo-card ul li { border-bottom-color: #243044; }
  .seo-card ul li::before { color: #60A5FA; }
  .seo-q {
    background: #0F172A;
    border-left-color: #60A5FA;
    color: #DBEAFE !important;
  }
  .seo-a { color: #6EE7B7 !important; }
  .seo-faq dt { color: #FFFFFF; }
  .seo-faq dd { color: #F3F4F6; }
}

/* ========================================
   Dark Mode (OS prefers-color-scheme)
   ======================================== */
@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(135deg, #000000 0%, #0F172A 100%);
    color: #F3F4F6;
  }

  /* Hero */
  .hero {
    background: #1A2332;
    border-color: #2C3E50;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
  .hero-icon { border-color: #1A2332; }

  /* Card */
  .card {
    background: #1A2332;
    border-color: #334155;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  }

  /* Home CTA */
  .home-cta .date-label { color: #9CA3AF; }
  .home-cta .main-title { color: #FFFFFF; }
  .home-cta .sub-text { color: #D1D5DB; }

  /* Streak */
  .streak-item .num { color: #60A5FA; }
  .streak-item .label { color: #9CA3AF; }
  .streak-item.streak .num { color: #FCD34D; }

  /* Progress bar */
  .progress-bar {
    background: #1A2332;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  .progress-bar .step { background: #334155; }
  .progress-bar .step.done { background: #60A5FA; }
  .progress-bar .step.current { background: linear-gradient(90deg, #60A5FA 50%, #334155 50%); }
  .progress-bar .step-label { color: #D1D5DB; }

  /* Card header */
  .card-header { border-bottom-color: #334155; }
  .qnum { color: #FFFFFF; }
  .qnum-of { color: #9CA3AF; }

  /* Question */
  .question { color: #FFFFFF; }
  .quote-box {
    background: #0F172A;
    border-left-color: #60A5FA;
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  .instruction {
    background: #0F172A;
    color: #9CA3AF;
    border-left-color: #60A5FA;
  }

  /* Choices */
  .choice {
    background: #0F172A;
    border-color: #475569;
    color: #F3F4F6;
  }
  .choice:hover { border-color: #60A5FA; background: #1E293B; }
  .choice.selected {
    background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%);
    border-color: #60A5FA;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(96, 165, 250, 0.30);
  }
  .card.answered .choice:hover { border-color: #475569; background: #0F172A; }

  .choice.revealed-correct {
    border-color: #34D399 !important;
    background: #052E1A !important;
    color: #6EE7B7 !important;
  }
  .choice.revealed-correct::before { color: #FFFFFF; }
  .choice.revealed-wrong {
    border-color: #F87171 !important;
    background: #2A0E0E !important;
    color: #FECACA !important;
  }
  .choice.revealed-wrong::before { color: #FECACA; }

  /* Result header */
  .result-header.correct-result {
    background: #052E1A;
    color: #6EE7B7;
    border-color: #047857;
  }
  .result-header.wrong-result {
    background: #2A0E0E;
    color: #FECACA;
    border-color: #991B1B;
  }

  /* Explanation */
  .exp { border-top-color: #334155; }
  .exp p, .exp li { color: #F3F4F6; }
  .exp.pattern-info h4 { color: #93C5FD; }
  .exp.pattern-info p { color: #DBEAFE; }
  .exp.correct h4 { color: #6EE7B7; }
  .exp.wrong h4 { color: #FECACA; }
  .exp.wrong li::before { color: #64748B; }
  .exp.tip h4 { color: #FCD34D; }

  /* Buttons */
  .btn-primary {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.40);
  }
  .btn-secondary {
    background: #1A2332;
    border-color: #475569;
    color: #D1D5DB;
  }
  .btn-secondary:hover { background: #0F172A; border-color: #64748B; }
  .submit-btn {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
  }
  .submit-btn:disabled {
    background: #334155;
    color: #64748B;
  }
  .next-btn {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
  }

  /* Complete screen */
  .complete-hero h2 { color: #FFFFFF; }
  .complete-hero .score { color: #60A5FA; }
  .complete-hero .sub { color: #D1D5DB; }
  .result-row {
    background: #0F172A;
  }
  .result-row .text { color: #F3F4F6; }
  .result-row .pattern { color: #9CA3AF; }
  .result-row .icon.correct { background: #052E1A; color: #6EE7B7; }
  .result-row .icon.wrong { background: #2A0E0E; color: #FECACA; }

  /* Disclaimer */
  .disclaimer {
    background: #1A2332;
    color: #9CA3AF;
    border-color: #374151;
  }
  .disclaimer a { color: #60A5FA; }

  /* Loading */
  .loading { color: #9CA3AF; }
  .loading .spinner {
    border-color: #334155;
    border-top-color: #60A5FA;
  }

  /* Ad placeholders (dark) */
  .ad-placeholder,
  .ad-placeholder-mobile {
    background: #1A2332;
    border-color: #475569;
    color: #64748B;
  }
  .ad-placeholder .ad-size,
  .ad-placeholder-mobile .ad-size { color: #475569; }

  /* ブックマーク CTA (dark) */
  .bookmark-cta {
    background: linear-gradient(135deg, #422006 0%, #78350F 100%);
    border-color: #FCD34D;
    box-shadow: 0 6px 20px rgba(252, 211, 77, 0.20);
  }
  .bookmark-cta .bookmark-text { color: #FDE68A; }
  .bookmark-cta .bookmark-text strong { color: #FCD34D; }
}