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

/* 탭으로 보면 섹션이 하나만 나온다. 위아래로 잇던 구분선과 큰 여백은 빈칸으로만 남는다.
   인쇄할 때는 전부 이어 나오므로 원래 구분선을 그대로 쓴다 (@media print 제외) */
@media screen {
  .guide:not(.pane--off) {
    margin-top: var(--space-lg);
    padding-top: 0;
    border-top: none;
  }
}

.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;
}

.guide__subheading {
  font-family: var(--font-headline);
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: var(--space-2xl) 0 var(--space-md);
}
html.light .guide__subheading { color: #141c2f; }

/* ── Deploy Walkthrough Widget ── */
.deploy-widget { margin-bottom: var(--space-2xl); }
.dw { max-width: 640px; margin: 0 auto; }
.dw__frame {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
}
.dw__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--color-surface-high);
  border-bottom: 1px solid var(--color-border);
}
.dw__tl { width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; flex: none; }
.dw__tl:nth-child(2) { background: #ffbd2e; }
.dw__tl:nth-child(3) { background: #27c93f; }
.dw__url {
  margin-left: 10px;
  flex: 1;
  font-family: var(--font-label);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dw__screen { background: #ffffff; line-height: 0; }
.dw__img { width: 100%; height: auto; display: block; }
.dw__caption { padding: var(--space-md) var(--space-xs) 0; text-align: center; }
.dw__badge {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
}
.dw__title {
  font-family: var(--font-headline);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-sm) 0 var(--space-xs);
}
.dw__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
  min-height: 3.4em;
}
.dw__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-md);
}
.dw__btn {
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  cursor: pointer;
  transition: var(--transition-fast);
}
.dw__btn:hover { background: var(--color-surface-hover); border-color: var(--color-outline); }
.dw__btn--play { background: var(--color-primary-dim); border-color: var(--color-primary-dim); color: #fff; min-width: 86px; }
.dw__btn--play:hover { background: var(--color-primary); border-color: var(--color-primary); }
.dw__btn--playing { background: var(--color-tertiary-dim); border-color: var(--color-tertiary-dim); color: #04203b; }
.dw__dots { display: flex; gap: 7px; margin-left: 6px; }
.dw__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--transition-fast);
}
.dw__dot:hover { background: var(--color-outline); }
.dw__dot--active { background: var(--color-primary); transform: scale(1.25); }

/* ── 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(57, 58, 50,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: #dee5ed; }
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: #d1dae5; }
html.light .roadmap__check input:checked + .roadmap__checkmark { background: #0d9488; border-color: #0f766e; }

/* ── 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(35, 36, 29, 0.5);
  border: 1px solid rgba(57, 58, 50, 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(239, 188, 112, 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(35, 36, 29, 0.5);
  border: 1px solid rgba(57, 58, 50, 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 {
  /* monospace 단독이면 한글이 시스템 대체 글꼴로 띄엄띄엄 그려져 안 읽힌다 (2026-08-11).
     라틴·숫자만 코드 글꼴을 쓰고 한글은 Noto Sans KR로 받는다. 색도 본문 글자색으로 올림 */
  font-family: Consolas, 'SF Mono', Menlo, 'Noto Sans KR', monospace;
  font-size: 0.875rem;
  color: var(--color-text);
  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(239, 188, 112, 0.1);
  border: 1px solid rgba(239, 188, 112, 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(57, 58, 50, 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(35, 36, 29, 0.8);
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid rgba(57, 58, 50, 0.5);
}

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

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

.compare-table tr:hover td {
  background: rgba(35, 36, 29, 0.4);
}

/* 긴 설명이 들어가는 비교표(업종별 디자인 룰): 셀을 접어서 가로 잘림을 막는다 */
.compare-table--wrap td {
  white-space: normal;
  word-break: keep-all;
  vertical-align: top;
}

.compare-table--wrap td:first-child { white-space: nowrap; }
.compare-table--wrap td:last-child { min-width: 14rem; }

/* 가이드 본문 링크: 브라우저 기본 파랑은 어두운 배경에서 거의 안 보인다 */
.guide__intro a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}

.guide__intro a:hover { color: var(--color-tertiary-dim); }

.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(35, 36, 29, 0.5);
  border: 1px solid rgba(57, 58, 50, 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-danger);
  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);
}

/* 넓은 화면에서 함정·해결(증상·대신)을 좌우 2단으로 —
   글줄 폭(40rem)을 지키면서 오른쪽 빈 공간을 내용으로 채운다 (2026-07-29) */
@media (min-width: 1024px) {
  .pitfall__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-2xl);
    align-items: start;
  }
  .pitfall__title { grid-column: 1 / -1; }
  .pitfall__problem { grid-column: 1; margin-bottom: 0; }
  .pitfall__solution { grid-column: 2; margin-bottom: 0; }
  .pitfall__related { grid-column: 1 / -1; margin-top: var(--space-sm); }
}

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

.sr__item {
  background: rgba(35, 36, 29, 0.5);
  border: 1px solid rgba(57, 58, 50, 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: #d1dae5; }
html.light .sr__item:hover { border-color: #6b7a90; }
html.light .sr__title { color: #141c2f; }
html.light .sr__desc { color: #334155; }
html.light .sr__detail { color: #5a697f; }

@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(35, 36, 29, 0.5);
  border: 1px solid rgba(57, 58, 50, 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 {
  /* 프롬프트 상자(.pc__code)와 같은 처방 — monospace 단독이면 한글이
     시스템 대체 글꼴로 띄엄띄엄 그려져 안 읽힌다 (2026-08-12) */
  font-family: Consolas, 'SF Mono', Menlo, 'Noto Sans KR', monospace;
  font-size: 0.875rem;
  color: var(--color-text);
  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(35, 36, 29, 0.5);
  border: 1px solid rgba(57, 58, 50, 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-danger);
  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(239, 188, 112, 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: #141c2f; font-size: 11pt; }
  .main { max-width: 100%; padding: 0; }
  .hero { padding: 1rem 0; }
  .hero__title { color: #141c2f; text-shadow: none; font-size: 1.5rem; }
  .hero__subtitle { color: #334155; }
  .hero__description { color: #334155; }

  .card { background: #fff; border: 1px solid #ddd; break-inside: avoid; page-break-inside: avoid; }
  .card--expanded .card__detail { max-height: none; }
  .card__term { color: #141c2f; }
  .card__section-title { color: #0f766e; }
  .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: #141c2f; }
  .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;
}

/* ── 라인 아이콘 (js/icons.js가 data-icon 자리에 SVG 주입) ── */
.pitfall__icon {
  color: var(--color-primary);
  line-height: 0;
}
.pitfall__icon svg { width: 2rem; height: 2rem; display: block; }

/* sr__step은 컬러 배경 위 → 아이콘은 흰색 */
.sr__icon {
  color: #fff;
  line-height: 0;
}
.sr__icon svg { width: 1.25rem; height: 1.25rem; display: block; }

.cs__emoji {
  color: var(--color-primary);
  line-height: 0;
}
.cs__emoji svg { width: 1.5rem; height: 1.5rem; display: block; }

/* 프롬프트 비교 라벨 안 아이콘은 라벨 색을 따름 */
.pc__label .icon,
.pc__why .icon { color: inherit; }
.pc__label .icon svg,
.pc__why .icon svg { width: 1em; height: 1em; }

/* ── 읽기 폭 ──
   본문 컨테이너를 1040으로 넓히면서 문단이 한 줄 62자가 됐다.
   한글은 35–45자가 편하다. 컨테이너는 넓게 두고 글줄만 잡는다 (2026-07-26) */
.guide__intro,
.pitfall__problem,
.pitfall__solution,
.card__section-text,
.roadmap__desc,
.sr__detail,
.pc__why {
  max-width: 40rem;
}

/* 표에 붙은 설명은 본문이 아니라 캡션이다. 읽기 폭(40rem)으로 줄이면
   전체 폭 표 옆에서 오른쪽만 비어 보인다 (2026-08-15 은아님 지적) → 표 폭을 따른다 */
.guide__intro--table {
  max-width: none;
}