/* ─────────────────────────────────────────
   Glossary Archive — 블로그/뉴스 톤 헤더 + 2열(필터/결과)
   (blog.css/news.css와 분리된 전용 파일)
   ───────────────────────────────────────── */
.glossary-archive {
    background: var(--c-bg-white, #fff);
    padding: clamp(72px, 9vw, 120px) 0 96px;
    min-height: 70vh;
    color: var(--c-text-dark);
    position: relative;
    overflow: hidden;
}
/* 헤더 뒤 배경 워시 제거(2026-08-06) — blog/news/article과 동일하게 순백. 되살리려면 복원.
.glossary-archive::before {
    content: ""; position: absolute; top: -260px; left: 50%;
    transform: translateX(-50%);
    width: 1100px; height: 620px;
    background:
        radial-gradient(circle at 30% 30%, rgba(82, 144, 255, 0.16), transparent 60%),
        radial-gradient(circle at 70% 40%, rgba(136, 146, 250, 0.12), transparent 60%),
        radial-gradient(circle at 50% 80%, rgba(255, 175, 200, 0.07), transparent 55%);
    filter: blur(80px);
    pointer-events: none;
}
*/
.glossary-archive > .container { position: relative; z-index: 1; }

.glossary-archive__header { max-width: 760px; margin: 0 0 40px; }
.glossary-archive__hd {
    font-size: clamp(36px, 4.5vw, 56px); font-weight: 600;
    line-height: 1.05; margin: 0; color: var(--c-text-heading);
}
.glossary-archive__sub {
    margin: 16px 0 0;
    font-size: 16px; line-height: 1.65; letter-spacing: -0.1px;
    color: var(--c-text-muted);
}

/* ── 추천 단어 스트립 ("이것만은 알고 가세요") ── */
/* 에센셜 — 위 헤어라인으로 헤더와 구획, 아래(필터/결과)와는 타이트하게 */
/* 에센셜 — 서브타이틀과 아래 본문의 중간: 위아래 40px 균등 */
.glossary-featured {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 16px;
    padding-top: 20px;
    border-top: 1px solid var(--c-border-light);
    margin: 0 0 40px;
}
.glossary-featured__label {
    flex: 0 0 auto;
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--c-text-subtle);
}
.glossary-featured__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.glossary-featured__link {
    font-size: 13.5px; font-weight: 500; letter-spacing: -0.1px;
    color: var(--c-text-dark); text-decoration: none;
    transition: color 0.12s ease;
}
.glossary-featured__link:hover { color: var(--c-accent-violet); }
/* Pillar 지정 용어 — 에센셜에서 보라·굵게로 살짝 강조(중요도 순 맨 앞에 정렬됨) */
.glossary-featured__link.is-pillar { color: var(--c-accent-purple); font-weight: 600; }
.glossary-featured__dot { color: var(--c-text-faint, rgba(28, 28, 28, 0.3)); font-size: 13px; }

/* ── 2열: 좌 필터(sticky) / 우 결과 ── */
.glossary-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

/* 좌측 필터 */
.glossary-side {
    position: sticky;
    top: 96px;
}
.glossary-side__head {
    display: flex; align-items: center; gap: 7px;
    height: 52px;   /* 우측 툴바와 동일 높이 → 헤어라인 Y 일치 */
    font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--c-text-dark);
    margin-bottom: 16px;
    border-bottom: 1px solid var(--c-border-light);
}
.glossary-side__ico { color: var(--c-text-subtle); }
.glossary-side__reset {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    margin-left: auto; padding: 2px 0;
    font: inherit; font-size: 12px; font-weight: 500;
    color: var(--c-accent-violet);
}
.glossary-side__reset:hover { text-decoration: underline; }
/* 가나다 정렬 토글 — 헤드 우측 끝 (reset 숨김 시에도 자리 유지) */
.glossary-sort {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex: 0 0 auto;
    margin-left: auto;
    background: transparent !important; border: 0 !important;
    border-radius: 7px !important; padding: 0 !important; box-shadow: none !important;
    color: var(--c-text-subtle);
    transition: color 0.12s ease, background 0.12s ease;
}
.glossary-side__reset:not([hidden]) ~ .glossary-sort { margin-left: 8px; }
.glossary-sort:hover { color: var(--c-text-dark); background: rgba(28, 28, 28, 0.05) !important; }
.glossary-sort svg { transition: transform 0.2s ease; }
.glossary-sort[data-dir="desc"] svg { transform: rotate(180deg); }
.glossary-side__group { margin-bottom: 22px; }
.glossary-side__label {
    display: block; margin-bottom: 10px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--c-text-subtle);
}
.glossary-side__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
}
.glossary-side__btn {
    appearance: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    height: 30px; padding: 0 2px;
    background: transparent !important; border: 1px solid transparent !important;
    border-radius: 7px !important; box-shadow: none !important;
    font: inherit; font-size: 12.5px; font-weight: 500;
    color: var(--c-text-body);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
/* '전체' 버튼은 두 칸 */
.glossary-side__btn[data-gl-letter=""] { grid-column: span 2; }
.glossary-side__btn:hover { background: rgba(28, 28, 28, 0.05) !important; color: var(--c-text-dark); }
.glossary-side__btn.is-active {
    background: var(--c-text-dark) !important;
    color: #fff !important;
    border-color: var(--c-text-dark) !important;
}
.glossary-side__btn:disabled {
    color: var(--c-text-faint, rgba(28, 28, 28, 0.25));
    cursor: default;
    background: transparent !important;
}

/* 우측 결과 */
.glossary-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    height: 52px;   /* 필터 헤드와 동일 높이 → 헤어라인 Y 일치 */
    margin-bottom: 8px;
    border-bottom: 1px solid var(--c-border-light);
}
/* 검색 — 필/테두리 없는 투명 플레인 (아이콘 + 인풋만) */
.glossary-search {
    display: inline-flex; align-items: center; gap: 9px;
    width: min(280px, 100%);
    padding: 0;
    background: transparent;
    border: 0;
}
.glossary-search__ico { color: var(--c-text-subtle); flex: 0 0 auto; }
/* ibm 전역 input[type=search] !important 이중 필 방지 — 안쪽 완전 리셋 */
.glossary-search .glossary-search__input {
    border: 0 !important; background: transparent !important;
    border-radius: 0 !important; padding: 0 !important; box-shadow: none !important;
    outline: none; width: 100%;
    font-size: 14px; color: var(--c-text-dark);
}
.glossary-search .glossary-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none; appearance: none;
    width: 13px; height: 13px; cursor: pointer; flex: 0 0 auto;
    background-color: var(--c-text-subtle);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.glossary-count {
    flex: 0 0 auto;
    font-size: 13px; color: var(--c-text-subtle);
}
.glossary-count b { font-weight: 600; color: var(--c-text-dark); }

/* 글자 그룹 — "A." 헤딩 + 항목 리스트 */
.glossary-group { padding: 30px 0 6px; border-bottom: 1px solid var(--c-border-light); }
.glossary-group:last-of-type { border-bottom: 0; }
.glossary-group__hd {
    margin: 0 0 18px;
    font-size: 24px !important; font-weight: 700 !important;
    letter-spacing: -0.3px !important; line-height: 1.2 !important;
    color: var(--c-accent-violet);
}
.glossary-group__list { display: flex; flex-direction: column; gap: 24px; padding-bottom: 24px; }
.glossary-item { max-width: none; cursor: pointer; }
.glossary-item:hover .glossary-item__word { color: var(--c-accent-violet); }
.glossary-item__word {
    display: inline-block;
    font-size: 17px; font-weight: 600; letter-spacing: -0.2px;
    color: var(--c-text-heading); text-decoration: none;
    margin-bottom: 5px;
    transition: color 0.12s ease;
}
.glossary-item__word:hover { color: var(--c-accent-violet); }
.glossary-item__def {
    margin: 0;
    max-width: 72em;   /* 가독 한계만 유지 — 영역은 풀폭 */
    font-size: 14.5px; line-height: 1.62; letter-spacing: -0.1px;
    color: var(--c-text-muted);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.glossary-empty { text-align: center; color: var(--c-text-subtle); padding: 64px 0; }

/* ── 반응형 ── */
@media (max-width: 960px) {
    .glossary-layout { grid-template-columns: 1fr; gap: 28px; }
    /* 필터: 상단 일반 블록(sticky 해제). 9열 = A~Z(26)+0–9(1)=27이 정확히 3행
       → '전체'를 풀행으로 두면 빈칸 없는 직사각형 */
    .glossary-side { position: static; }
    .glossary-side__grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .glossary-side__btn[data-gl-letter=""] { grid-column: 1 / -1; }
    /* 에센셜 — 줄어든 폭에선 라벨·용어 가운데 정렬 */
    .glossary-featured { justify-content: center; }
    .glossary-featured__links { justify-content: center; }
}
@media (max-width: 600px) {
    .glossary-archive { padding: 96px 0 64px; }   /* 헤더(65px)가 위에 얹힘 — 보강 */
    /* 검색·카운트는 좁아져도 한 줄 유지 (카운트 좌 · 검색 우) */
    .glossary-toolbar { gap: 12px; }
    .glossary-search { width: auto; flex: 1 1 auto; max-width: 220px; }
}

/* ─────────────────────────────────────────
   Single Glossary Term
   ───────────────────────────────────────── */
.glossary-single {
    background: var(--c-bg-white);
    padding: clamp(72px, 9vw, 120px) 0 96px;   /* 아카이브와 동일한 상단 여백 */
    min-height: 60vh;
    position: relative;
    overflow: hidden;
}
/* 배경 워시 제거(2026-08-06) — 순백. 되살리려면 복원.
.glossary-single::before {
    content: ""; position: absolute; top: -260px; left: 50%;
    transform: translateX(-50%);
    width: 1100px; height: 620px;
    background:
        radial-gradient(circle at 30% 30%, rgba(82, 144, 255, 0.16), transparent 60%),
        radial-gradient(circle at 70% 40%, rgba(136, 146, 250, 0.12), transparent 60%),
        radial-gradient(circle at 50% 80%, rgba(255, 175, 200, 0.07), transparent 55%);
    filter: blur(80px);
    pointer-events: none;
}
*/
.glossary-single__inner { position: relative; z-index: 1; }
/* 타이틀 속 용어만 보라 강조 */
.glossary-single__term { color: var(--c-accent-violet); }

.glossary-single__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-px);
}

/* eyebrow 메타 — 블로그 싱글의 카테고리 라벨과 동일 톤 */
.glossary-single__meta {
    margin-bottom: 18px;
    font-size: 14px;
}
.glossary-single__meta-label {
    color: var(--c-accent-violet-text, #6a52d8);
    font-weight: 500;
    text-decoration: none;
}
.glossary-single__meta-label:hover { text-decoration: underline; }

/* 사전 스타일 2열: 좌 용어(sticky) / 우 정의 본문 */
.glossary-single__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
.glossary-single__head {
    /* sticky 제거 — 그리드 상단 정렬이 본문 첫 줄과 어긋나지 않게 */
}

@media (max-width: 1024px) {
    .glossary-single__layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .glossary-single__head { position: static; }
}

.glossary-single__main {
    min-width: 0;
    /* 좌측 eyebrow 블록 높이(메타 + margin-bottom 18px)만큼 내려 본문 첫 줄을 타이틀 상단과 정렬 */
    padding-top: 39px;
}
@media (max-width: 1024px) {
    .glossary-single__main { padding-top: 0; }
}

.glossary-single__title {
    font-size: clamp(32px, 3.2vw, 42px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.8px;
    color: var(--c-text-heading);
    margin: 0;
}

@media (max-width: 768px) {
    .glossary-single__title { font-size: 28px; }
}

.glossary-single__content.entry-content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--c-text-heading);
}

.glossary-single__content.entry-content > * { margin-bottom: 1em; }
/* 첫 요소 상단 여백 제거 — 안 그러면 본문 첫 줄이 좌측 제목보다 아래로 내려가 2열 정렬이
   어긋난다(main padding-top이 이미 제목 높이만큼 내려줌 + h2 margin-top 2em이 겹쳐 47px 밀림). */
.glossary-single__content.entry-content > *:first-child { margin-top: 0; }
.glossary-single__content.entry-content h2 { font-size: 24px; font-weight: 600; margin: 2em 0 0.6em; }
.glossary-single__content.entry-content h3 { font-size: 20px; font-weight: 600; margin: 1.5em 0 0.5em; }
.glossary-single__content.entry-content ul,
.glossary-single__content.entry-content ol { padding-left: 24px; }
.glossary-single__content.entry-content ul { list-style: disc; }
.glossary-single__content.entry-content ol { list-style: decimal; }
.glossary-single__content.entry-content li { margin-bottom: 6px; }
.glossary-single__content.entry-content a {
    color: var(--c-accent-purple);
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* glossary/product 자동링크: 본문 톤(검정 + 점선 밑줄)으로 통일 */
.glossary-single__content.entry-content a.glossary-link,
.glossary-single__content.entry-content a.product-link {
    color: var(--c-text-dark); text-decoration: none;
    border-bottom: 1px dotted rgba(28, 28, 28, 0.3);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.glossary-single__content.entry-content a.glossary-link:hover,
.glossary-single__content.entry-content a.product-link:hover {
    color: var(--c-accent-violet-text);
    border-bottom-style: solid; border-bottom-color: currentColor;
}
.glossary-single__content.entry-content blockquote {
    border-left: 3px solid var(--c-accent-purple);
    padding-left: 20px;
    margin: 1.5em 0;
    color: var(--c-text-muted);
    font-style: italic;
}
.glossary-single__content.entry-content img {
    max-width: 100%;
    border-radius: var(--r-sm);
    margin: 1.5em 0;
}

/* ── Related sidebar ── */
/* 관련 용어 — 본문 하단 풀폭: 제목 + 헤어라인 + 카드 가로 나열 (감싸는 박스 없음) */
.glossary-single__related {
    margin-top: 56px;
}

.glossary-single__related-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;   /* 넓던 자간 정리 */
    color: var(--c-text-muted);
    margin: 0;   /* 헤어라인 제거 — 아래가 카드라 구분 충분 */
}

.glossary-single__related-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 1024px) {
    .glossary-single__related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .glossary-single__related-list { grid-template-columns: 1fr; }
}

.glossary-single__related-item a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 18px;
    background: var(--c-bg-white);
    border: 1px solid var(--c-border-light);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: all var(--transition);
}

.glossary-single__related-item a:hover {
    border-color: var(--c-accent-purple);
    box-shadow: 0 4px 12px rgba(136, 146, 250, 0.15);
}

.glossary-single__related-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--c-text-heading);
}

.glossary-single__related-def {
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 600px) {
    .glossary-single { padding-top: 92px; }   /* 헤더(65px)가 위에 얹힘 — 보강 */
}

/* ── 낱말카드 prev/next 내비 (본문 하단, 텍스트 링크) ── */
.glossary-single__pager {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--c-border-light);
}
.glossary-single__pager-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    max-width: 46%;
}
.glossary-single__pager-next { text-align: right; margin-left: auto; }
.glossary-single__pager-dir {
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--c-text-subtle);
    transition: color 0.12s ease;
}
.glossary-single__pager-term {
    font-size: 15px; font-weight: 600; letter-spacing: -0.2px;
    color: var(--c-text-dark);
    transition: color 0.12s ease;
}
.glossary-single__pager-link:hover .glossary-single__pager-dir,
.glossary-single__pager-link:hover .glossary-single__pager-term { color: var(--c-accent-violet-text, #6F50CC); }

/* ── 글로서리 싱글 FAQ 아코디언 (본문 밑, 풀폭) — 네이티브 <details> ── */
.glossary-single__faq {
    margin-top: 64px;  /* 본문 텍스트와 충분히 떨어뜨림 — 헤어라인 없이 여백만 */
}
.glossary-single__faq-title {
    /* 섹션 라벨 — 질문(16.5px)보다 작은 위계 */
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-text-subtle);
    margin: 0 0 4px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-border-light);
}
.glossary-faq-list { display: flex; flex-direction: column; }
.glossary-faq-item {
    border-bottom: 1px solid var(--c-border-light);
}
.glossary-faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 17px 2px;
    font-size: 14px; font-weight: 700; letter-spacing: -0.1px;
    color: var(--c-text-heading);
    cursor: pointer; list-style: none;
    transition: color 0.15s ease;
}
.glossary-faq-q::-webkit-details-marker { display: none; }
.glossary-faq-q:hover { color: var(--c-accent-violet-text, #6F50CC); }
.glossary-faq-item[open] .glossary-faq-q { color: var(--c-accent-violet-text, #6F50CC); }
.glossary-faq-chev {
    flex: 0 0 auto; color: var(--c-text-subtle);
    transition: transform 0.2s ease, color 0.15s ease;
}
.glossary-faq-item[open] .glossary-faq-chev { transform: rotate(180deg); color: var(--c-accent-violet-text, #6F50CC); }
.glossary-faq-a {
    padding: 0 2px 18px;
    font-size: 14px; line-height: 1.7; letter-spacing: 0;
    color: var(--c-text-muted);
    max-width: 720px;
}
.glossary-faq-a p { margin: 0 0 0.8em; }
.glossary-faq-a p:last-child { margin-bottom: 0; }
/* 펼침 살짝 페이드 */
.glossary-faq-item[open] .glossary-faq-a { animation: glossaryFaqIn 0.22s ease both; }
@keyframes glossaryFaqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ── 이 주제 더 보기 — Related Glossaries 위, 동일 카드 양식 + Article/Blog 아이브로우 ── */
.glossary-related { margin-top: 56px; }
.glossary-related__hd { font-size: 14px; font-weight: 600 !important; letter-spacing: 0; color: var(--c-text-muted); margin: 0; }
.glossary-related__grid {
    list-style: none; margin: 16px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 1024px) { .glossary-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .glossary-related__grid { grid-template-columns: 1fr; } }
.glossary-related__item a {
    display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px;
    background: var(--c-bg-white); border: 1px solid var(--c-border-light); border-radius: var(--r-sm);
    text-decoration: none; transition: all var(--transition);
}
.glossary-related__item a:hover { border-color: var(--c-accent-purple); box-shadow: 0 4px 12px rgba(136, 146, 250, 0.15); }
/* Pillar 강조 — 필러 아티클/블로그(맨 앞 정렬됨): 보라 테두리 + 은은한 글로우 */
.glossary-related__item.is-pillar a { border-color: var(--c-accent-purple); box-shadow: 0 3px 14px rgba(136, 146, 250, 0.18); }
.glossary-related__item.is-pillar a:hover { box-shadow: 0 5px 20px rgba(136, 146, 250, 0.26); }
/* 카드 eyebrow(__kind, trap-free) — 디자인시스템 카드 eyebrow spec(.ai-ready__col-eyebrow)과 동일 */
.glossary-related__kind { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em !important; text-transform: uppercase; color: var(--c-accent-violet); display: inline-flex; align-items: center; gap: 7px; }
/* Pillar 뱃지 — Article/Blog 표시 옆 보라 "필러" 라벨 (eyebrow와 수직 중앙 정렬) */
.glossary-related__pill { display: inline-flex; align-items: center; padding: 2px 8px; font-family: var(--font-sans, -apple-system, "Segoe UI", sans-serif); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; color: #fff; background: var(--c-accent-purple); border-radius: 999px; }
.glossary-related__name { font-size: 15px; font-weight: 600; color: var(--c-text-heading); line-height: 1.4; }