.logo-guide { --guide-ink: #17202e; --guide-accent: #d83b30; --guide-line: #e3e6eb; color: var(--guide-ink); padding-bottom: 48px; }
.logo-guide *, .logo-guide *::before, .logo-guide *::after { box-sizing: border-box; }
.logo-guide p, .logo-guide li { color: #171717; line-height: 1.75; }
.logo-guide a { text-decoration: none; }
.logo-guide a:focus-visible { outline: 3px solid var(--guide-accent); outline-offset: 4px; }
.guide-hero { padding: 56px 0 40px; text-align: center; background: radial-gradient(ellipse at 50% 100%, #f5f0fa, transparent 65%); }
.guide-eyebrow { display: inline-block; padding: 8px 14px; border: 1px solid #ffd2cd; border-radius: 999px; background: #fff8f7; color: var(--guide-accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.guide-hero h1 { margin: 20px auto; max-width: 900px; color: var(--guide-ink); font-size: clamp(40px, 4.8vw, 68px); font-weight: 400; letter-spacing: -.04em; line-height: 1.1; text-wrap: balance; }
.guide-hero h1 span { color: #ff4f40; }
.guide-hero p { max-width: 710px; margin: 0 auto; font-size: 17px; }
.guide-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.guide-nav a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 44px; border: 1px solid var(--guide-line); border-radius: 10px; background: #fff; color: var(--guide-ink); font-size: 14px; }
.guide-nav a:first-child { background: var(--guide-accent); border-color: var(--guide-accent); color: white; }
.guide-nav a:hover { border-color: var(--guide-accent); }
.guide-content { counter-reset: guide-section; }
.guide-section { padding: 48px 0; margin-top: 0; scroll-margin-top: 100px; }
.guide-section + .guide-section { border-top: 1px solid var(--guide-line); }
.logo-guide .card-style-twenty, .logo-guide .course-data { padding: 0; margin: 0; border: 0; background: none; border-radius: 0; box-shadow: none; transform: none; }
.guide-section h2 { display: flex; align-items: baseline; gap: 16px; margin: 0 0 28px !important; color: var(--guide-ink); font-family: "Funnel Display", sans-serif; font-size: clamp(26px, 3vw, 38px); font-weight: 400; letter-spacing: -.03em; line-height: 1.2; }
.guide-section h2::before { counter-increment: guide-section; content: "0" counter(guide-section); color: var(--guide-accent); font-family: inherit; font-size: 16px; letter-spacing: 0; }
.guide-section h3 { color: var(--guide-ink); font-size: 18px; line-height: 1.4; }
.guide-section .row.g-3 { --bs-gutter-x: 32px; --bs-gutter-y: 28px; }
.logo-display, .logo-display-bo { display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 16px; padding: 28px !important; border: 1px solid var(--guide-line); border-radius: 20px; background: #f8f6fc; text-align: center; }
.logo-display > div:first-child, .logo-display-bo > div:first-child { display: flex; align-items: center; justify-content: center; margin: 0 0 24px; height: 240px; }
.logo-display-bo > div:first-child { height: 120px; }
.guide-logo { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.logo-display-bo .guide-logo { width: 300px; max-height: 80px; }
.dark-bg-outline { background: radial-gradient(ellipse at 100% 0, #44304a, transparent 70%), #17202e; border-color: #17202e; }
.logo-display > div:last-child, .logo-display-bo > div:last-child { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.logo-guide .download-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border: 1px solid #d9dde5; border-radius: 10px; background: #fff; color: var(--guide-ink); font-size: 14px; font-weight: 600; }
.logo-guide .download-link:hover { background: #fff0ed; border-color: var(--guide-accent); color: var(--guide-accent); }
.logo-guide .rules, .logo-guide .dos, .logo-guide .donts { list-style: none; padding: 0; margin: 16px 0 24px; }
.logo-guide .rules li, .logo-guide .dos li, .logo-guide .donts li { position: relative; padding: 10px 0 10px 26px; font-size: 16px; }
.logo-guide li > span.fw-bold { position: absolute; left: 0; color: var(--guide-accent); }
.logo-guide .dos li > span { color: #18754c; }
.logo-guide code { color: #2e186a; background: #f3f0f9; padding: 2px 6px; border-radius: 5px; font-size: .92em; overflow-wrap: anywhere; }
.example-pair { padding: 24px 28px; margin: 20px 0; border-left: 3px solid var(--guide-accent); background: #faf9fc; }
.example-pair > p:first-child { margin: 0; }
.logo-guide .example-note { font-size: 14px; margin-bottom: 0; }
.logo-guide .bg-light { background: #f8f6fc !important; border-radius: 12px !important; padding: 20px !important; }
@media (max-width: 767px) {
    .logo-guide { padding-bottom: 24px; }
    .guide-hero { padding: 32px 0 28px; }
    .guide-hero p { font-size: 16px; }
    .guide-nav { display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; }
    .guide-nav a { justify-content: center; padding: 10px; font-size: 13px; }
    .guide-section { padding: 32px 0; }
    .guide-section h2 { gap: 10px; margin-bottom: 24px !important; }
    .logo-display, .logo-display-bo { padding: 20px !important; }
    .logo-display > div:first-child { height: 200px; }
    .logo-display-bo > div:first-child { height: 100px; }
    .logo-guide .download-link { flex: 1; padding: 10px 8px; }
    .example-pair { padding: 20px 16px; }
    .logo-guide .rules li, .logo-guide .dos li, .logo-guide .donts li { font-size: 15px; }
}