/*
 * 용어 위키(인사이트 2 · 3) · 본문 말풍선 · '이 글에 나온 용어'
 * 홈페이지(qshop.ai) 디자인 토큰을 그대로 쓴다. 기존 인사이트 화면과 섞이지 않게 .wk · .wk-tip · .wk-aterms 안에서만 적용한다.
 * 전환 지점: PC 1101px 이상 · 태블릿 768~1100 · 모바일 767 이하
 */
.wk, .wk-tip, .wk-aterms, .blog-content a.wiki-term-link {
    --wk-brand: #0D9488;
    --wk-brand-tint: #F0FDFA;
    --wk-ink: #0A0A0A;
    --wk-ink-strong: #333333;
    --wk-ink-sub: #737373;
    --wk-ink-mute: #B2B2B2;
    --wk-line: #E7E7E7;
    --wk-line-soft: #EDEDED;
    --wk-surface: #FFFFFF;
    --wk-surface-sub: #F5F5F5;
    --wk-hover: #F6F9F9;
    --wk-radius: 7px;
    --wk-radius-xs: 4px;
    --wk-radius-sm: 8px;
    --wk-header-h: 80px;
}

.wk { font-family: 'SUIT', 'Pretendard', 'Noto Sans KR', -apple-system, 'Apple SD Gothic Neo', sans-serif; color: var(--wk-ink); font-size: 14px; line-height: 1.6; }
.wk a { color: inherit; text-decoration: none; }
.wk *, .wk *::before, .wk *::after { box-sizing: border-box; }

/* ===== 레이아웃: 사이드바 232 + 본문, 최대 1120 · 화면 폭 − 40 ===== */
.wk-layout { display: flex; width: calc(100% - 40px); max-width: 1120px; margin: 0 auto; }
.wk-side { width: 232px; flex-shrink: 0; padding: 32px 20px 40px 0; border-right: 1px solid var(--wk-line-soft); }
.wk-side-in { position: sticky; top: calc(var(--wk-header-h) + 32px); max-height: calc(100vh - var(--wk-header-h) - 56px); overflow-y: auto; scrollbar-width: none; }
.wk-side-in::-webkit-scrollbar { display: none; }
.wk-main { flex: 1; min-width: 0; padding: 40px 0 64px 40px; }

.wk-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--wk-radius); background: var(--wk-surface-sub); color: var(--wk-ink-sub); margin-bottom: 24px; }
.wk-search:focus-within { background: var(--wk-surface); box-shadow: inset 0 0 0 1.5px var(--wk-ink); color: var(--wk-ink); }
.wk-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.wk-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--wk-ink); }
.wk-search input::placeholder { color: var(--wk-ink-sub); }

.wk-grp { margin-bottom: 16px; }
.wk-gl { font-size: 12px; font-weight: 600; color: var(--wk-ink-sub); letter-spacing: .02em; padding: 4px 8px 2px; }
.wk-it { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--wk-ink-strong); padding: 6px 8px; border-radius: var(--wk-radius-sm); cursor: pointer; transition: background .15s, color .15s; }
.wk-it:hover { background: var(--wk-hover); color: var(--wk-ink); }
.wk-it.is-on { color: var(--wk-brand); font-weight: 600; background: var(--wk-brand-tint); }
.wk-it:focus-visible, .wk-chip:focus-visible, .wk-idx a:focus-visible { outline: 2px solid var(--wk-brand); outline-offset: 1px; }
.wk-cnt { font-size: 12px; color: var(--wk-ink-mute); font-weight: 400; }

.wk-h1 { font-size: 30px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.wk-h1 small { font-size: 18px; color: var(--wk-ink-sub); font-weight: 500; margin-left: 8px; }
.wk-lead { font-size: 15px; color: var(--wk-ink-sub); margin-top: 8px; }

.wk-tag { display: inline-block; font-size: 12px; font-weight: 500; color: var(--wk-ink-strong); background: var(--wk-surface-sub); border-radius: var(--wk-radius-xs); padding: 1px 8px; white-space: nowrap; }
a.wk-tag:hover { color: var(--wk-brand); background: var(--wk-brand-tint); }
.wk-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; flex-shrink: 0; }
.wk-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: var(--wk-radius-xs); background: #fef9c3; color: #854d0e; font-size: 11px; font-weight: 600; vertical-align: 2px; }

.wk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--wk-surface); box-shadow: inset 0 0 0 1px var(--wk-line); font-size: 13px; font-weight: 500; color: var(--wk-ink-strong); white-space: nowrap; cursor: pointer; }
.wk-chip:hover { box-shadow: inset 0 0 0 1px var(--wk-brand); color: var(--wk-brand); }
.wk-chip.is-on { background: var(--wk-ink); color: #fff; box-shadow: none; }
.wk-chip .wk-n { color: var(--wk-ink-mute); margin-left: 4px; font-weight: 400; }
.wk-chip.is-on .wk-n { color: rgba(255, 255, 255, .7); }

/* 태블릿 · 모바일에서 사이드바 대신 보이는 검색 · 분류 칩 줄 */
.wk-mbar { display: none; }

/* ===== 위키 목록 ===== */
.wk-count { font-size: 13px; color: var(--wk-ink-sub); margin-top: 20px; }
.wk-count b { color: var(--wk-ink); font-weight: 600; }
.wk-count button { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--wk-brand); cursor: pointer; }
.wk-idx { position: sticky; top: var(--wk-header-h); z-index: 2; background: var(--wk-surface); display: flex; flex-wrap: wrap; gap: 2px; margin-top: 12px; padding: 12px 0; border-top: 1px solid var(--wk-line); border-bottom: 1px solid var(--wk-line); }
.wk-idx a, .wk-idx span { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; border-radius: var(--wk-radius-sm); }
.wk-idx a:hover { background: var(--wk-hover); color: var(--wk-brand); }
.wk-idx span { color: var(--wk-ink-mute); font-weight: 400; }
.wk-idx i { width: 16px; flex-shrink: 0; }
.wk-lgroup { margin-top: 32px; scroll-margin-top: calc(var(--wk-header-h) + 72px); }
.wk-lgroup h2 { font-size: 20px; font-weight: 700; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 2px solid var(--wk-ink); width: fit-content; min-width: 40px; }
.wk-term { display: flex; gap: 24px; padding: 16px 8px; border-bottom: 1px solid var(--wk-line-soft); align-items: baseline; border-radius: var(--wk-radius-sm); }
.wk-term:hover { background: var(--wk-hover); }
.wk-term .wk-nm { width: 240px; flex-shrink: 0; font-size: 15px; font-weight: 600; }
.wk-term .wk-nm small { display: block; font-size: 12px; color: var(--wk-ink-sub); font-weight: 400; margin-top: 2px; }
.wk-term .wk-df { flex: 1; font-size: 14px; color: var(--wk-ink-strong); line-height: 1.65; }
.wk-term .wk-tags { justify-content: flex-end; max-width: 160px; }

.wk-empty { margin-top: 32px; padding: 32px; border-radius: var(--wk-radius-sm); background: var(--wk-surface-sub); text-align: center; }
.wk-empty b { display: block; font-size: 17px; font-weight: 600; }
.wk-empty p { margin-top: 6px; color: var(--wk-ink-sub); }
.wk-empty .wk-go { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--wk-brand); }
.wk-empty .wk-chips { justify-content: center; margin-top: 20px; }
.wk-empty .wk-k { margin-top: 24px; font-size: 12px; font-weight: 600; color: var(--wk-ink-sub); }

/* ===== 위키 상세 ===== */
.wk-dmain { max-width: 760px; }
.wk-crumb { font-size: 13px; color: var(--wk-ink-sub); }
.wk-crumb a { color: var(--wk-ink-strong); font-weight: 500; }
.wk-crumb a:hover { color: var(--wk-brand); }
.wk-crumb em { font-style: normal; margin: 0 8px; color: var(--wk-ink-mute); }
.wk-dh { margin-top: 16px; }
.wk-dh .wk-tags { margin-bottom: 8px; }
.wk-meta { font-size: 12px; color: var(--wk-ink-sub); margin-top: 8px; }
.wk-one { margin-top: 24px; border-radius: var(--wk-radius-sm); background: var(--wk-surface-sub); padding: 20px 24px; }
.wk-one .wk-lb { font-size: 12px; font-weight: 600; color: var(--wk-ink-sub); }
.wk-one p { font-size: 17px; font-weight: 500; line-height: 1.65; margin-top: 4px; }
.wk-body { margin-top: 40px; }
.wk-dsec { margin-top: 40px; }
.wk-dsec h2 { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.wk-dsec > p { font-size: 15px; color: var(--wk-ink-strong); line-height: 1.8; }
.wk-alias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wk-alias span { font-size: 14px; color: var(--wk-ink-strong); background: var(--wk-surface-sub); border-radius: var(--wk-radius-xs); padding: 4px 12px; }
.wk-rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; }
.wk-rc { display: flex; flex-direction: column; }
.wk-rc .wk-th { aspect-ratio: 16 / 9; border-radius: var(--wk-radius-xs); background: var(--wk-surface-sub); overflow: hidden; }
.wk-rc .wk-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-rc .wk-tag { margin-top: 12px; align-self: flex-start; }
.wk-rc .wk-tt { font-size: 15px; font-weight: 600; line-height: 1.5; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wk-rc:hover .wk-tt { color: var(--wk-brand); }
.wk-rc .wk-mt { font-size: 12px; color: var(--wk-ink-mute); margin-top: 8px; }
.wk-same-mobile { display: none; }
.wk [hidden] { display: none !important; }

/* 용어 본문(에디터 블록 HTML) */
.wk-content { font-size: 15px; line-height: 1.8; color: var(--wk-ink-strong); }
.wk-content > *:first-child { margin-top: 0; }
.wk-content p { margin: 8px 0 0; }
/* editor-blocks.css 의 .go-block-heading[data-level] 크기(28px · 24px)보다 우선하도록 같은 선택자를 함께 쓴다 */
.wk-content h2, .wk-content .go-block-heading[data-level="2"] { font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--wk-ink); margin: 40px 0 12px; }
.wk-content h3, .wk-content .go-block-heading[data-level="3"] { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--wk-ink); margin: 20px 0 8px; }
/* editor-blocks.css 의 에디터 전용 표시(제목 단계 H1~H3, 빈 블록 안내 문구)는 읽기 화면에 내보내지 않는다 */
.wk-content .go-block-heading::after,
.wk-content .go-block-heading:empty::before,
.wk-content .go-block-quote:empty::before,
.wk-content .go-block-code:empty::before,
.wk-content .go-block-html:empty::before { content: none; display: none; }
.wk-content ul, .wk-content ol { margin: 12px 0; padding-left: 1.5rem; }
.wk-content ul { list-style: disc; }
.wk-content ol { list-style: decimal; }
.wk-content li { margin-bottom: 6px; display: list-item; }
.wk-content a:not(.go-block-btn) { color: var(--wk-brand); text-decoration: underline; text-underline-offset: 2px; }
.wk-content blockquote { margin: 16px 0; padding-left: 16px; border-left: 3px solid var(--wk-line); color: var(--wk-ink-sub); }
.wk-content code { background: var(--wk-surface-sub); border-radius: 4px; padding: 1px 6px; font-size: 13px; }
.wk-content pre { margin: 12px 0; padding: 16px 20px; border-radius: var(--wk-radius-sm); background: #111; color: #e5e5e5; font-size: 13px; line-height: 1.7; overflow-x: auto; }
.wk-content pre code { background: none; padding: 0; color: inherit; }
.wk-content table { width: 100%; margin: 16px 0; border-collapse: collapse; font-size: 14px; }
.wk-content th, .wk-content td { border: 1px solid var(--wk-line); padding: 8px 12px; text-align: left; vertical-align: top; }
.wk-content th { background: var(--wk-surface-sub); font-weight: 600; }
.wk-content img { max-width: 100%; height: auto; border-radius: var(--wk-radius-sm); margin: 16px 0; }
.wk-content hr { border: 0; height: 1px; background: var(--wk-line); margin: 32px 0; }

/* ===== 본문 자동 링크 · 말풍선 ===== */
.blog-content a.wiki-term-link {
    color: inherit; text-decoration: none; font-weight: 500;
    border-bottom: 1.5px dotted var(--wk-brand); cursor: help;
}
.blog-content a.wiki-term-link:hover, .blog-content a.wiki-term-link.is-open { background: var(--wk-brand-tint); border-radius: 2px; }
.wk-tip {
    position: absolute; z-index: 2147483000; width: 340px; padding: 16px 20px;
    background: var(--wk-surface); border-radius: var(--wk-radius-sm);
    box-shadow: 0 0 0 1px var(--wk-line), 0 16px 32px -12px rgba(0, 0, 0, .22);
    font-family: 'SUIT', 'Pretendard', 'Noto Sans KR', -apple-system, sans-serif; color: var(--wk-ink); text-align: left;
}
.wk-tip[hidden] { display: none; }
.wk-tip .wk-lb { display: block; font-size: 11px; font-weight: 600; color: var(--wk-brand); }
.wk-tip .wk-nm { display: block; font-size: 16px; font-weight: 600; margin-top: 2px; }
.wk-tip .wk-nm small { font-size: 12px; color: var(--wk-ink-sub); font-weight: 400; margin-left: 4px; }
.wk-tip .wk-df { display: block; font-size: 14px; line-height: 1.65; color: var(--wk-ink-strong); margin-top: 4px; }
.wk-tip .wk-mo { display: inline-block; font-size: 13px; font-weight: 600; color: var(--wk-brand); margin-top: 12px; text-decoration: none; }
.wk-tip .wk-mo:hover { text-decoration: underline; }

.wk-aterms { margin-top: 40px; }
.wk-aterms .wk-k { font-size: 15px; font-weight: 600; margin-bottom: 12px; color: var(--wk-ink); }
.wk-aterms .wk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-aterms .wk-chip {
    display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--wk-surface);
    box-shadow: inset 0 0 0 1px var(--wk-line); font-size: 13px; font-weight: 500; color: var(--wk-ink-strong); text-decoration: none;
}
.wk-aterms .wk-chip:hover { box-shadow: inset 0 0 0 1px var(--wk-brand); color: var(--wk-brand); }

/* ===== 태블릿 (768~1100) ===== */
@media (max-width: 1100px) {
    .wk-layout { display: block; }
    .wk-side { display: none; }
    .wk-main { padding: 24px 0 64px; }
    .wk-h1 { font-size: 26px; line-height: 1.38; }
    .wk-h1 small { font-size: 15px; margin-left: 6px; }
    .wk-mbar { display: block; margin-top: 16px; }
    .wk-mbar .wk-search { margin-bottom: 0; }
    .wk-mbar .wk-chips { flex-wrap: nowrap; overflow-x: auto; margin: 16px -20px 0 0; padding-right: 20px; scrollbar-width: none; }
    /* 2단계 새 틀(body.ins-v2): 검색은 보조 바 하나로 통합 검색 화면에 가고(블로그 10 명세), 색인 바는 보조 바 아래에 붙는다. */
    .ins-v2 .wk-mbar .wk-search { display: none; }
    .ins-v2 .wk-mbar .wk-chips { margin-top: 0; }
    .ins-v2 .wk-idx { top: calc(var(--wk-header-h) + 48px); }
    .ins-v2 .wk-lgroup { scroll-margin-top: calc(var(--wk-header-h) + 120px); }
    .wk-mbar .wk-chips::-webkit-scrollbar { display: none; }
    .wk-mbar .wk-chip { flex-shrink: 0; }
    .wk-idx { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .wk-idx::-webkit-scrollbar { display: none; }
    .wk-term { display: grid; grid-template-columns: 170px 1fr auto; gap: 16px; padding: 12px 0; }
    .wk-term .wk-nm { width: auto; font-size: 14px; }
    .wk-term .wk-nm small { font-size: 11px; }
    .wk-term .wk-df { font-size: 13px; line-height: 1.6; }
    .wk-dmain { max-width: none; }
    .wk-one { margin-top: 20px; padding: 16px 20px; }
    .wk-one p { font-size: 15px; }
    .wk-dsec, .wk-body { margin-top: 32px; }
    .wk-dsec h2 { font-size: 17px; margin-bottom: 8px; }
    .wk-dsec > p { font-size: 14px; line-height: 1.75; }
    .wk-rgrid { gap: 16px; }
    .wk-rc .wk-tt { font-size: 13px; }
    .wk-rc .wk-tag { font-size: 11px; }
    .wk-same-mobile { display: block; }
    .wk-same-mobile .wk-chip { height: 30px; font-size: 12px; }
}

/* ===== 모바일 (767 이하) ===== */
@media (max-width: 767px) {
    .ins-v2 .wk { --wk-header-h: 65px; }
    .wk-main { padding: 20px 0 80px; }
    .wk-h1 { font-size: 22px; }
    .wk-mbar .wk-chips { margin-right: -20px; }
    .wk-term { grid-template-columns: 1fr auto; gap: 4px 12px; }
    .wk-term .wk-nm small { display: inline; margin-left: 6px; }
    .wk-term .wk-df { grid-column: 1 / -1; grid-row: 2; }
    .wk-rgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .wk-tip { width: auto; left: 16px !important; right: 16px; }
    .wk-aterms { margin-top: 32px; }
}