/* 사진뒷면 공용 스타일 — 가이드·소개 페이지용. 첫 화면(index.html)과 같은 토큰을 쓴다. */
:root {
  color-scheme: light dark;
  --bg:#FAF7F2; --surface:#FFFFFF; --surface-2:#F3EEE6; --line:#E6DED2;
  --fg:#1E2430; --muted:#5F6673;
  --primary:#24477A; --primary-fg:#FFFFFF; --primary-soft:#E7EDF6;
  --stamp:#B4441C;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(30,36,48,.04), 0 8px 24px rgba(30,36,48,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#15171C; --surface:#1D2027; --surface-2:#252932; --line:#323743;
    --fg:#ECEEF2; --muted:#A2A9B6;
    --primary:#8FB0E8; --primary-fg:#10203A; --primary-soft:#22304A;
    --stamp:#F0956E;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--fg); font: 16px/1.75 system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; }
a { color: var(--primary); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px 48px; }

/* 상단 줄 */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 0 0; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.01em; color:var(--fg); text-decoration:none; }
.brand svg { width:30px; height:30px; flex:none; }
.nav { display:flex; gap:4px; }
.nav a { color:var(--muted); text-decoration:none; font-weight:600; font-size:15px; padding:8px 12px; border-radius:10px; min-height:40px; display:inline-flex; align-items:center; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--fg); background:var(--surface-2); }

/* 글 */
.crumb { margin:28px 0 0; font-size:14px; color:var(--muted); }
.crumb a { color:var(--muted); }
article { max-width: 720px; }
article h1 { margin:8px 0 0; font-size: clamp(26px, 5.6vw, 36px); line-height:1.25; letter-spacing:-.025em; font-weight:800; }
.meta { margin:12px 0 0; color:var(--muted); font-size:14px; }
.lede { margin:18px 0 0; font-size:18px; color:var(--fg); }
article h2 { margin:40px 0 10px; font-size:22px; line-height:1.35; letter-spacing:-.015em; font-weight:800; }
article h3 { margin:24px 0 6px; font-size:17px; font-weight:700; }
article p { margin:12px 0; }
article ol, article ul { padding-left: 1.4em; margin:12px 0; }
article li { margin:6px 0; }
article li::marker { color: var(--muted); }
.path { display:inline; font-weight:700; background:var(--surface-2); border-radius:6px; padding:1px 6px; }
.note { margin:20px 0; padding:14px 16px; border-radius:var(--radius-sm); background:var(--surface-2); border-left:4px solid var(--primary); }
.note.warn { border-left-color: var(--stamp); }
.note p { margin:0; }
.note p + p { margin-top:8px; }
.toc { margin:24px 0 0; padding:14px 18px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
.toc strong { display:block; font-size:14px; color:var(--muted); margin-bottom:4px; }
.toc ol { margin:0; padding-left:1.3em; }
.toc li { margin:2px 0; }
table.facts { width:100%; border-collapse:collapse; font-size:15px; margin:14px 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
table.facts th, table.facts td { text-align:left; padding:10px 12px; border-top:1px solid var(--line); vertical-align:top; }
table.facts tr:first-child th, table.facts tr:first-child td { border-top:0; }
table.facts th { width:34%; color:var(--muted); font-weight:600; background:var(--surface-2); }

.cta { margin:40px 0 0; padding:22px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.cta p { margin:0; flex:1 1 260px; }
.cta strong { display:block; font-size:17px; margin-bottom:2px; }
.btn { display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border-radius:12px; background:var(--primary); color:var(--primary-fg); font-weight:700; text-decoration:none; }

.related { margin:40px 0 0; }
.related h2 { font-size:18px; margin:0 0 10px; }

/* 카드 목록 */
.cards { display:grid; grid-template-columns:1fr; gap:12px; margin:20px 0 0; padding:0; list-style:none; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
.cards a { display:block; height:100%; padding:18px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); text-decoration:none; color:var(--fg); transition: border-color .15s ease, transform .15s ease; }
.cards a:hover { border-color:var(--primary); transform: translateY(-1px); }
.cards .tag { display:inline-block; font-size:12px; font-weight:700; color:var(--primary); background:var(--primary-soft); border-radius:999px; padding:2px 10px; }
.cards h2, .cards h3 { margin:10px 0 6px; font-size:17px; line-height:1.4; font-weight:800; letter-spacing:-.01em; }
.cards p { margin:0; color:var(--muted); font-size:15px; line-height:1.6; }

.page-head { padding:28px 0 0; }
.page-head h1 { margin:0; font-size: clamp(26px, 5.6vw, 36px); line-height:1.25; letter-spacing:-.025em; font-weight:800; }
.page-head p { margin:12px 0 0; color:var(--muted); font-size:17px; max-width:36em; }

footer { margin-top: 56px; padding-top: 18px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
footer p { margin:0 0 8px; }
footer a { color: inherit; }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }