/* ══ Guide Sections (공통) ══ */
.guide {
  margin-top: var(--space-3xl);
  padding-top: var(--space-2xl);
  border-top: 1px solid rgba(63, 69, 108, 0.4);
}

.guide__heading {
  font-family: var(--font-headline);
  font-size: var(--font-size-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-tertiary);
  margin-bottom: var(--space-sm);
}

.guide__intro {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
  line-height: 1.7;
}

/* ── Roadmap Progress ── */
.roadmap__progress { margin-bottom: var(--space-lg); }
.roadmap__progress-info { font-family: var(--font-label); font-size: 0.75rem; color: var(--color-outline); margin-bottom: var(--space-sm); }
.roadmap__progress-track { height: 6px; background: rgba(63,69,108,0.3); border-radius: var(--radius-full); overflow: hidden; }
.roadmap__progress-bar { height: 100%; background: linear-gradient(90deg, var(--color-tertiary-dim), var(--color-primary)); border-radius: var(--radius-full); transition: width 0.4s ease; }
html.light .roadmap__progress-track { background: #e5e7eb; }
html.light .roadmap__progress-bar { background: linear-gradient(90deg, #0d9488, #7c4dff); }

.roadmap__check { flex-shrink: 0; display: flex; align-items: center; cursor: pointer; }
.roadmap__check input { display: none; }
.roadmap__checkmark { width: 22px; height: 22px; border: 2px solid var(--color-border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); font-size: 0.7rem; }
.roadmap__check input:checked + .roadmap__checkmark { background: var(--color-tertiary-dim); border-color: var(--color-tertiary-dim); color: #fff; }
.roadmap__check input:checked + .roadmap__checkmark::after { content: '✓'; }
.roadmap__item--done { opacity: 0.6; }
.roadmap__item--done .roadmap__title { text-decoration: line-through; }
html.light .roadmap__checkmark { border-color: #d4d8e3; }
html.light .roadmap__check input:checked + .roadmap__checkmark { background: #0d9488; border-color: #0d9488; }

/* ── Roadmap ── */
.roadmap {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.roadmap__item {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: rgba(23, 32, 86, 0.5);
  border: 1px solid rgba(63, 69, 108, 0.5);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition-fast);
}

.roadmap__item:hover {
  border-color: var(--color-outline);
}

.roadmap__day {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-on-primary);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dim));
  border-radius: var(--radius-lg);
}

.roadmap__content {
  flex: 1;
  min-width: 0;
}

.roadmap__title {
  font-family: var(--font-headline);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.roadmap__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.roadmap__action {
  font-size: var(--font-size-sm);
  color: var(--color-tertiary-dim);
  background: rgba(90, 228, 208, 0.06);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}

.roadmap__terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* ── Prompt Compare ── */
.prompt-compare {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.pc__item {
  background: rgba(23, 32, 86, 0.5);
  border: 1px solid rgba(63, 69, 108, 0.5);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
}

.pc__goal {
  font-family: var(--font-headline);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

.pc__boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.pc__box {
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}

.pc__box--bad {
  background: rgba(255, 113, 108, 0.06);
  border: 1px solid rgba(255, 113, 108, 0.2);
}

.pc__box--good {
  background: rgba(93, 231, 211, 0.06);
  border: 1px solid rgba(93, 231, 211, 0.2);
}

.pc__label {
  font-family: var(--font-headline);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.pc__code {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.7;
  margin: 0;
}

.pc__why {
  font-size: var(--font-size-sm);
  color: var(--color-tertiary-dim);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.pc__tags {
  font-size: 0.75rem;
  color: var(--color-outline);
}

.pc__tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: rgba(175, 136, 255, 0.1);
  border: 1px solid rgba(175, 136, 255, 0.2);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  font-size: 0.7rem;
  margin-left: 0.25rem;
}

/* ── Tools Compare Table ── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(63, 69, 108, 0.5);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.compare-table th {
  font-family: var(--font-headline);
  font-weight: 600;
  color: var(--color-tertiary-dim);
  background: rgba(23, 32, 86, 0.8);
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid rgba(63, 69, 108, 0.5);
}

.compare-table td {
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text-muted);
  border-bottom: 1px solid rgba(63, 69, 108, 0.3);
  white-space: nowrap;
}

.compare-table tr:last-child td {
  border-bottom: none;
}

.compare-table tr:hover td {
  background: rgba(23, 32, 86, 0.4);
}

.ct__tool {
  font-family: var(--font-headline);
  font-weight: 600;
  color: var(--color-text) !important;
}

/* ── Pitfalls ── */
.pitfalls {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pitfall__item {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background: rgba(23, 32, 86, 0.5);
  border: 1px solid rgba(63, 69, 108, 0.5);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition-fast);
}

.pitfall__item:hover {
  border-color: var(--color-outline);
}

.pitfall__icon {
  flex-shrink: 0;
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.pitfall__content {
  flex: 1;
  min-width: 0;
}

.pitfall__title {
  font-family: var(--font-headline);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.pitfall__problem {
  font-size: var(--font-size-sm);
  color: var(--color-level-advanced);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
  opacity: 0.9;
}

.pitfall__solution {
  font-size: var(--font-size-sm);
  color: var(--color-tertiary-dim);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.pitfall__related {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

/* ── Service Roadmap ── */
.service-roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.sr__item {
  background: rgba(23, 32, 86, 0.5);
  border: 1px solid rgba(63, 69, 108, 0.5);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.sr__item:hover {
  border-color: var(--color-outline);
  transform: translateY(-2px);
}

.sr__step {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
}

.sr__icon { font-size: var(--font-size-lg); }
.sr__num { font-family: var(--font-headline); font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.8); letter-spacing: 0.08em; }

.sr__content { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.sr__title { font-family: var(--font-headline); font-size: var(--font-size-lg); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-xs); }
.sr__desc { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-sm); }
.sr__detail { font-size: 0.8rem; color: var(--color-outline); line-height: 1.7; }

/* Light mode */
html.light .sr__item { background: #fff; border-color: #d4d8e3; }
html.light .sr__item:hover { border-color: #9ca3af; }
html.light .sr__title { color: #1a1d2e; }
html.light .sr__desc { color: #4a5068; }
html.light .sr__detail { color: #8890a8; }

@media (max-width: 768px) {
  .service-roadmap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .service-roadmap { grid-template-columns: 1fr; }
}

/* ── Cheatsheet ── */
.cheatsheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.cs__item {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: rgba(23, 32, 86, 0.5);
  border: 1px solid rgba(63, 69, 108, 0.5);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition-fast);
}

.cs__item:hover {
  border-color: var(--color-outline);
}

.cs__emoji {
  flex-shrink: 0;
  font-size: var(--font-size-xl);
  line-height: 1;
}

.cs__content {
  flex: 1;
  min-width: 0;
}

.cs__when {
  font-size: 0.7rem;
  color: var(--color-outline);
  margin-bottom: var(--space-xs);
}

.cs__technique {
  font-family: var(--font-headline);
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.cs__example {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--color-tertiary-dim);
  margin-bottom: var(--space-xs);
}

.cs__tip {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ── Error Dict ── */
.error-dict {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.ed__item {
  padding: var(--space-lg);
  background: rgba(23, 32, 86, 0.5);
  border: 1px solid rgba(63, 69, 108, 0.5);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition-fast);
}

.ed__item:hover {
  border-color: var(--color-outline);
}

.ed__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.ed__code {
  font-family: monospace;
  font-size: var(--font-size-sm);
  color: var(--color-level-advanced);
  background: rgba(255, 113, 108, 0.08);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
}

.ed__meaning {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.ed__solution {
  font-size: var(--font-size-sm);
  color: var(--color-tertiary-dim);
  line-height: 1.7;
}

/* ── Roadmap Result ── */
.roadmap__result {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  background: rgba(175, 136, 255, 0.06);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  line-height: 1.6;
}

/* ── Responsive: Guide Sections ── */
@media (max-width: 768px) {
  .guide__heading {
    font-size: var(--font-size-xl);
  }

  .roadmap__item {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .roadmap__day {
    width: auto;
    height: auto;
    padding: var(--space-xs) var(--space-md);
    align-self: flex-start;
  }

  .pc__boxes {
    grid-template-columns: 1fr;
  }

  .pitfall__item {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .cheatsheet {
    grid-template-columns: 1fr;
  }

  .ed__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
}

/* ── Print Mode ── */
@media print {
  .gate, .nav, .jump-menu, .fab, .search, .tabs, .filters, .counter,
  .card__toggle, .card__bookmark, .roadmap__check, .related__pill,
  .hero__stats, .skip-link { display: none !important; }

  body { background: #fff; color: #1a1d2e; font-size: 11pt; }
  .main { max-width: 100%; padding: 0; }
  .hero { padding: 1rem 0; }
  .hero__title { color: #1a1d2e; text-shadow: none; font-size: 1.5rem; }
  .hero__subtitle { color: #4a5068; }
  .hero__description { color: #4a5068; }

  .card { background: #fff; border: 1px solid #ddd; break-inside: avoid; page-break-inside: avoid; }
  .card--expanded .card__detail { max-height: none; }
  .card__term { color: #1a1d2e; }
  .card__section-title { color: #0d9488; }
  .card__section-text { color: #333; }
  .card__badge { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  .guide { border-top: 1px solid #ddd; }
  .guide__heading { color: #1a1d2e; }
  .roadmap__item, .pc__item, .pitfall__item, .cs__item, .ed__item,
  .sr__item { background: #fff; border: 1px solid #ddd; break-inside: avoid; }

  .compare-table th { background: #f5f5f5 !important; print-color-adjust: exact; }

  .footer { border-top: 1px solid #ddd; }
  .footer__line { color: #666; }
}

/* ── Utility: Hidden ── */
[hidden] {
  display: none !important;
}