/* 바로 가기 — 헤더에만 밤하늘 색, 나머지는 거의 투명 (원본에 없던 새 디자인) */
.ql {
    --ql-ink: #1c2633; --ql-soft: #66758a; --ql-accent: #3d7ce0; --ql-line: rgba(28, 38, 51, 0.10);
    --ql-card: rgba(28, 38, 51, 0.02); --ql-hover: rgba(61, 124, 224, 0.08);
    margin: 3px 0 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.ql-title {
    margin: 0 0 8px; padding: 7px 9px; border-radius: 10px;
    background: linear-gradient(135deg, #1f3d55 0%, #172e40 55%, #0a0e18 100%);
    color: #eef2f8; font-size: 12px; letter-spacing: .06em;
}
.ql a.ql-card {
    display: block; margin-bottom: 8px; padding: 6px 6px 7px; border-radius: 10px;
    border: 1px solid var(--ql-line); background: var(--ql-card);
    color: var(--ql-ink); text-align: center; text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.ql a.ql-card:hover { transform: translateY(-2px); border-color: var(--ql-accent); background: var(--ql-hover); text-decoration: none; }
.ql a.ql-card:focus-visible { outline: 2px solid var(--ql-accent); outline-offset: 2px; }
.ql-card img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 7px; }
.ql-card span { display: block; margin-top: 6px; font-size: 12px; line-height: 1.3; word-break: keep-all; }
.ql-card small { display: block; margin-top: 2px; color: var(--ql-soft); font-size: 10.5px; }
.ql-ext::after { content: "\00a0\2197"; color: var(--ql-accent); }

@media (prefers-color-scheme: dark) {
    .ql { --ql-ink: #e3e9f1; --ql-soft: #93a1b3; --ql-accent: #8fbcff; --ql-line: rgba(255, 255, 255, 0.10);
          --ql-card: rgba(255, 255, 255, 0.02); --ql-hover: rgba(143, 188, 255, 0.10); }
}