/* 공략 글·공략 모음 (tools/guides.mjs가 만드는 guides.html, guides/*.html). style.css의 책상·종이 값과 legal.css 위에 얹는다. 모서리는 네모. */
.guide { padding-top: 6px; }
.guide-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 44px; color: var(--on-night-2); font-size: var(--fs-m); }
.guide-crumb a { color: var(--on-night); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 2px; }
.guide-crumb [aria-current] { overflow-wrap: anywhere; }
.guide-crumb .sep { opacity: 0.8; }

.guide-doc { margin-top: 4px; }
.guide-doc h1 { font-size: 26px; line-height: 1.3; margin: 0 0 14px; word-break: keep-all; overflow-wrap: break-word; }
.guide-kicker { color: var(--ink-3); }
.guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; font-family: var(--mono); font-size: var(--fs-s); color: var(--ink-3); }
.guide-chip { display: inline-block; border: 1.5px solid var(--ink); background: var(--paper-2); color: var(--ink); font-weight: 700; padding: 0 8px; line-height: 1.6; }
.guide-min { color: var(--ink-3); }

.guide-fig { margin: 0 0 20px; max-width: 576px; border: 1.5px solid var(--ink); background: var(--paper-3); box-shadow: 3px 3px 0 var(--ink); line-height: 0; }
.guide-fig img { width: 100%; height: auto; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

/* 본문: 읽기 편한 줄 길이 */
.guide-body { max-width: 65ch; font-size: 16px; line-height: 1.85; word-break: keep-all; overflow-wrap: break-word; }
.guide-body p { margin: 0 0 14px; }
.guide-body h2 { font-size: var(--fs-xl); line-height: 1.4; margin: 34px 0 12px; }
.guide-body h3 { font-family: var(--doc); font-size: 17px; line-height: 1.4; margin: 24px 0 8px; padding-left: 9px; border-left: 4px solid var(--seal); }
.guide-body ul, .guide-body ol { margin: 0 0 16px; padding-left: 1.5em; }
.guide-body li { margin: 4px 0; padding-left: 2px; }
.guide-body strong { font-weight: 800; }
.guide-body a { text-underline-offset: 3px; }
.tip { margin: 20px 0; padding: 10px 14px; background: var(--pen-soft); border: 1.5px solid var(--pen); border-left-width: 6px; line-height: 1.75; }
.tip p { margin: 0 0 6px; }
.tip p:last-child { margin-bottom: 0; }
.tip-label { font-family: var(--mono); color: var(--pen); margin-right: 4px; }

/* 시작 버튼: 크고 네모난 인주 도장 */
.guide .guide-start { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 420px; min-height: 56px; padding: 10px 18px; background: var(--seal); color: #fff8f6; border: 1.5px solid #7d1a15; border-radius: 0; box-shadow: 3px 3px 0 #7d1a15; font-size: var(--fs-xl); font-weight: 800; letter-spacing: 0.04em; line-height: 1.2; text-decoration: none; transition: transform 0.06s, box-shadow 0.06s, background 0.12s; }
@media (hover: hover) { .guide .guide-start:hover { background: #d8392f; } }
.guide .guide-start:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #7d1a15; }
.guide-cta { margin: 30px 0 0; }
.guide-cta-note { display: block; margin-top: 10px; font-size: var(--fs-s); color: var(--ink-3); }

/* 다른 공략 */
.guide-more { margin-top: 18px; padding: 18px 20px 14px; }
.guide-more h2 { font-family: var(--doc); font-size: var(--fs-xl); margin: 0 0 6px; padding-bottom: 5px; border-bottom: 2px solid var(--ink); }
.guide-more ul { list-style: none; margin: 0; padding: 0; }
.guide-more li { border-bottom: 1px solid var(--rule); }
.guide-more li a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 48px; padding: 8px 0; color: var(--ink); text-decoration: none; }
.guide-more li a:hover .guide-more-t { text-decoration: underline; }
.guide-more-t { flex: 1 1 12em; font-weight: 700; word-break: keep-all; overflow-wrap: break-word; }
.guide-more .guide-min { font-family: var(--mono); font-size: var(--fs-s); }
.guide-all { margin: 8px 0 0; }
.guide-all a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* 공략 모음 */
.guide-intro { margin: 0 0 18px; font-size: 16px; line-height: 1.75; max-width: 65ch; word-break: keep-all; }
.guide-empty { padding: 20px 0; color: var(--ink-2); }
.guide-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.guide-card { position: relative; background: var(--receipt); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 14px 16px 16px; }
.guide .guide-card h2 { border: 0; margin: 2px 0 6px; padding: 0; font-size: 18px; line-height: 1.4; word-break: keep-all; overflow-wrap: break-word; }
.guide .guide-card h2 a { color: var(--ink); text-decoration: none; }
.guide .guide-card h2 a::after { content: ""; position: absolute; inset: 0; }
.guide .guide-card:hover h2 a { text-decoration: underline; text-underline-offset: 3px; }
.guide .guide-card:has(a:focus-visible) { outline: 3px solid var(--pen); outline-offset: 2px; }
.guide .guide-card a:focus-visible { outline: none; }
.guide-desc { margin: 0; color: var(--ink-2); font-size: var(--fs-m); line-height: 1.7; word-break: keep-all; }
@media (min-width: 640px) {
  .guide-doc h1 { font-size: 30px; }
  .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .guide-more { padding: 22px 40px 16px; }
}