.guide-page { background: var(--bg); padding: 42px 0 72px; }
.guide-hero { padding: 20px 0 32px; border-bottom: 1px solid var(--line); }
.back-link { display: inline-flex; margin-bottom: 28px; font-size: 14px; font-weight: 700; color: var(--accent); }
.guide-hero h1 { margin-top: 7px; font-size: clamp(30px, 5vw, 48px); font-weight: 800; }
.guide-position { max-width: 760px; margin-top: 10px; font-size: 17px; line-height: 1.65; color: var(--text); }
.guide-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 150px)); gap: 10px; margin-top: 24px; }
.guide-stats > div { padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow-sm); }
.guide-stats b { display: block; font-size: 21px; font-variant-numeric: tabular-nums; }
.guide-stats span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.guide-body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; margin-top: 26px; align-items: start; }
.guide-main { min-width: 0; }
.guide-section { padding: 22px 24px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.guide-section h2 { font-size: 19px; font-weight: 800; }
.guide-section h3 { font-size: 15px; }
.guide-section > p, .guide-section li { color: var(--text); line-height: 1.75; }
.guide-section > p { margin-top: 10px; white-space: pre-line; }
.guide-section ul { display: grid; gap: 9px; margin-top: 12px; padding-left: 20px; }
.guide-section li::marker { color: var(--accent); }
.lead-section { background: var(--accent-soft); border-color: #c7d9fb; }
.core-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.core-card { display: flex; gap: 11px; padding: 10px; background: var(--fill); border-radius: 9px; }
.core-card img { width: 44px; height: 62px; flex: none; object-fit: cover; border-radius: 4px; background: #e1e7f0; }
.core-card h3 { font-size: 14px; }
.core-card p { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.match-guide-grid { display: grid; gap: 9px; margin-top: 13px; }
.match-guide { padding: 11px 13px; background: var(--fill); border-radius: 8px; }
.match-guide-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.match-guide-head b { color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.match-guide p { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.teaching-placeholder { border-style: dashed; background: transparent; box-shadow: none; }
.teaching-placeholder p { color: var(--muted); }
.guide-side { position: sticky; top: 84px; }
.deck-box { max-height: calc(100vh - 110px); overflow: auto; }
.deck-group + .deck-group { margin-top: 18px; }
.deck-group h3 { padding-bottom: 7px; border-bottom: 1px solid var(--line); color: var(--ink); }
.deck-card { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; }
.deck-card img { width: 30px; height: 42px; object-fit: cover; border-radius: 3px; background: #e1e7f0; }
.deck-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-card b { color: var(--muted); font-variant-numeric: tabular-nums; }
.side-vs h3 { margin-top: 15px; font-size: 13px; color: var(--muted); }
.side-vs p { margin-top: 7px; font-size: 13px; }
@media (max-width: 900px) { .guide-body { grid-template-columns: 1fr; } .guide-side { position: static; } .deck-box { max-height: none; } }
@media (max-width: 560px) { .guide-page { padding-top: 22px; } .guide-section { padding: 18px 16px; } .guide-stats { grid-template-columns: repeat(2, 1fr); } .core-grid { grid-template-columns: 1fr; } .guide-position { font-size: 15px; } }