{% extends "base.html" %}
{% block title %}사용 가이드 — CPGuard{% endblock %}

{% block head %}
<style>
  .guide { max-width: 820px; margin: 0 auto; }
  .guide h1 { font-size: 24px; margin: 0 0 6px; }
  .guide h2 { font-size: 18px; margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
  .guide h3 { font-size: 14.5px; margin: 20px 0 8px; color: var(--fg); }
  .guide p { line-height: 1.75; margin: 10px 0; color: var(--fg); }
  .guide ul, .guide ol { line-height: 1.75; padding-left: 24px; margin: 10px 0; }
  .guide li { margin: 5px 0; }
  .guide code { font-family: Consolas, monospace; font-size: 12.5px; background: var(--sunken);
    border: 1px solid var(--line); border-radius:0; padding: 1px 5px; }
  .guide pre { background: var(--sunken); border: 1px solid var(--line); border-radius:0;
    padding: 12px 14px; overflow-x: auto; margin: 12px 0; }
  .guide pre code { background: none; border: 0; padding: 0; font-size: 12.5px; line-height: 1.6; }
  .guide blockquote { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent);
    margin: 12px 0; padding: 8px 14px; color: var(--fg); border-radius:0; }
  .guide blockquote + blockquote { margin-top: -12px; border-top: 0; padding-top: 0; }
  .guide table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
  .guide th, .guide td { border: 1px solid var(--line); padding: 7px 10px; text-align: left;
    vertical-align: top; line-height: 1.6; }
  .guide th { background: var(--sunken); font-weight: 700; white-space: nowrap; }
  .guide td code { white-space: nowrap; }
  .guide hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
  .guide a { color: var(--accent); }
  .guide .top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
</style>
{% endblock %}

{% block content %}
<div class="guide">
  <div class="top">
    <a class="btn ghost" href="/">← 홈으로</a>
    <a class="btn ghost" href="{% url 'settings' %}">LLM 설정</a>
  </div>
  {{ content }}
</div>
{% endblock %}