/* FUTKAR — Guide pages (reading + flow + visuals) — warm theme */
.guide-hero {
  background:
    radial-gradient(ellipse 80% 55% at 50% -15%, rgba(242, 122, 33, 0.14), transparent),
    radial-gradient(ellipse 45% 40% at 100% 10%, rgba(26, 26, 26, 0.04), transparent),
    linear-gradient(180deg, #FBF7F2 0%, #FFFFFF 100%);
}
.dark .guide-hero {
  background:
    radial-gradient(ellipse 80% 55% at 50% -15%, rgba(242, 122, 33, 0.12), transparent),
    radial-gradient(ellipse 45% 40% at 100% 10%, rgba(255, 255, 255, 0.04), transparent),
    linear-gradient(180deg, #181818 0%, #181818 100%);
}

.guide-answer {
  border-left: 4px solid #F27A21;
  background: linear-gradient(90deg, rgba(242, 122, 33, 0.08), transparent);
}
.dark .guide-answer { background: linear-gradient(90deg, rgba(242, 122, 33, 0.14), transparent); }

.guide-prose h2 { scroll-margin-top: 6rem; font-family: var(--fk-font-display, Fraunces, Georgia, serif); }
.guide-prose p { line-height: 1.75; }
.guide-prose .callout {
  border-radius: 1rem;
  border: 1px solid #E8E2DA;
  background: #FBF7F2;
  padding: 1rem 1.25rem;
}
.dark .guide-prose .callout {
  border-color: #404040;
  background: rgba(38, 38, 38, 0.68);
}

.guide-toc {
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 7rem);
  overflow: auto;
}
.guide-toc a { display: block; padding: 0.35rem 0; font-size: 0.875rem; color: #8A837C; border-left: 2px solid transparent; padding-left: 0.75rem; margin-left: -0.75rem; }
.guide-toc a:hover { color: #F27A21; }
.guide-toc a.active { color: #E06A12; font-weight: 600; border-left-color: #F27A21; }
.dark .guide-toc a { color: #A8A097; }
.dark .guide-toc a:hover { color: #F5A05A; }
.dark .guide-toc a.active { color: #F5A05A; border-left-color: #F5A05A; }

/* FAQ (guide pages use .open). Override futkar.css .faq-answer max-height:0 clamp. */
.faq-answer { display: none; max-height: none; overflow: visible; }
.faq-item.open .faq-answer { display: block; max-height: none; overflow: visible; }
.faq-item.open .faq-icon { transform: rotate(180deg); }

/* Flowchart */
.flow {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}
.flow-step {
  position: relative;
  border-radius: 1rem;
  border: 1px solid #E8E2DA;
  background: #fff;
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 24px -16px rgba(40, 28, 18, 0.12);
}
.dark .flow-step {
  border-color: #404040;
  background: #262626;
}
.flow-arrow {
  display: flex;
  justify-content: center;
  padding: 0.35rem 0;
  color: #8A837C;
  font-size: 1.25rem;
  line-height: 1;
}
@media (min-width: 768px) {
  .flow-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: stretch;
  }
  .flow-row .flow-arrow { display: none; }
  .flow-row .flow-step::after {
    content: "→";
    position: absolute;
    right: -0.65rem;
    top: 50%;
    transform: translateY(-50%);
    color: #C4B8A8;
    font-size: 1.1rem;
    z-index: 1;
  }
  .flow-row .flow-step:last-child::after { content: none; }
}

.guide-scene {
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid #E8E2DA;
  background: linear-gradient(145deg, #FFF5EB, #F3EBE3 55%, #fff);
  box-shadow: 0 12px 40px -16px rgba(40, 28, 18, 0.14);
}
.dark .guide-scene {
  border-color: #404040;
  background: linear-gradient(145deg, #262626, #181818 60%);
}

.guide-use-card {
  border-radius: 1rem;
  border: 1px solid #E8E2DA;
  background: #fff;
  padding: 1.25rem;
  box-shadow: 0 8px 24px -16px rgba(40, 28, 18, 0.1);
}
.dark .guide-use-card {
  border-color: #404040;
  background: #262626;
}

.guide-related-card {
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  border: 1px solid #E8E2DA;
  background: #fff;
  padding: 1.25rem;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 8px 24px -16px rgba(40, 28, 18, 0.1);
}
.guide-related-card:hover {
  transform: translateY(-2px);
  border-color: #F27A21;
  box-shadow: 0 16px 36px -16px rgba(242, 122, 33, 0.2);
}
.dark .guide-related-card {
  border-color: #404040;
  background: #262626;
}

.reading-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: #8A837C;
}
.dark .reading-meta { color: #A8A097; }

/* Mistake / pitfall mini flow (mistake -> signal -> fix) */
.mini-flow { display: grid; gap: 0.75rem; }
@media (min-width: 640px) {
  .mini-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.mini-flow-part {
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.mini-flow-part .label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  opacity: 0.75;
}

.pitfall-card {
  border-radius: 1rem;
  border: 1px solid #F5C9A8;
  background: #FFF5EB;
  padding: 1.1rem 1.25rem;
}
.dark .pitfall-card { border-color: rgba(242, 122, 33, 0.35); background: rgba(242, 122, 33, 0.08); }