/* ============================================================
 * GEO 용어사전 — glossary.css
 *  gx-*  : 페이지(목록·상세) 레이아웃
 *  gw-*  : 용어별 와이어프레임 / 인포그래픽 프리미티브
 *  팔레트: emerald(#10b981) / slate, geo.css 와 일관
 * ============================================================ */

/* ---------- 목록: 소개 ---------- */
.gx-intro { background:#fff; border:1px solid #e2e8f0; border-radius:20px; padding:24px 26px;
    box-shadow:0 8px 30px -16px rgba(15,23,42,.18); }
.gx-intro-lead { font-size:1.02rem; line-height:1.7; color:#334155; }
.gx-intro-lead strong { color:#0f172a; }
.gx-intro-feats { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.gx-feat { font-size:.82rem; color:#475569; background:#f0fdf4; border:1px solid #a7f3d0;
    border-radius:100px; padding:6px 14px; }
.gx-feat b { color:#047857; font-weight:800; }

/* ---------- 목록: 클러스터 헤더 ---------- */
.gx-cluster-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-bottom:18px;
    padding-bottom:12px; border-bottom:2px solid #ecfdf5; }
.gx-cluster-tag { font-size:10px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
    color:#047857; background:#dcfce7; border-radius:6px; padding:3px 9px; }
.gx-cluster-head h3 { font-size:1.35rem; font-weight:800; color:#0f172a; margin:0; }
.gx-cluster-head p { font-size:.88rem; color:#64748b; margin:0; }

/* ---------- 목록: 카드 그리드 ---------- */
.gx-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .gx-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .gx-grid{ grid-template-columns:1fr;} }
.gx-card { display:flex; flex-direction:column; background:#fff; border:1px solid #e2e8f0;
    border-radius:16px; padding:20px 20px 18px; text-decoration:none; transition:.18s ease;
    box-shadow:0 4px 18px rgba(15,23,42,.04); }
.gx-card:hover { border-color:#10b981; transform:translateY(-3px); box-shadow:0 12px 28px -12px rgba(16,185,129,.35); }
.gx-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gx-card-top h4 { font-size:1.05rem; font-weight:800; color:#0f172a; margin:0; line-height:1.3; }
.gx-card-viz { flex-shrink:0; font-size:10px; font-weight:800; color:#047857; background:#ecfdf5;
    border:1px solid #a7f3d0; border-radius:6px; padding:2px 7px; }
.gx-card-badges { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.gx-card-code { flex-shrink:0; font-size:10px; font-weight:800; color:#0369a1; background:#e0f2fe;
    border:1px solid #bae6fd; border-radius:6px; padding:2px 7px; }
.gx-card-own { display:inline-block; align-self:flex-start; font-size:10px; font-weight:800; color:#9d174d;
    background:#fce7f3; border:1px solid #fbcfe8; border-radius:6px; padding:2px 8px; margin:7px 0 0; }
.gx-card-en { font-size:.74rem; color:#94a3b8; font-weight:600; margin:3px 0 9px; letter-spacing:.01em; }
.gx-card-short { font-size:.88rem; line-height:1.6; color:#475569; margin:0 0 14px; flex:1; }
.gx-card-short strong { color:#0f172a; font-weight:700; }
.gx-card-more { font-size:.82rem; font-weight:700; color:#10b981; }

/* ---------- 목록: 하단 CTA ---------- */
.gx-bottom { text-align:center; background:linear-gradient(135deg,#064e3b 0%,#0f172a 100%);
    border-radius:24px; padding:40px 28px; }
.gx-bottom-kicker { font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
    color:#6ee7b7; margin-bottom:10px; }
.gx-bottom h3 { font-size:clamp(1.3rem,2.6vw,1.7rem); font-weight:800; color:#fff; margin:0 0 20px; }
.gx-bottom-links { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.gx-bottom-links a { font-size:.92rem; font-weight:700; color:#0f172a; background:#fff;
    border-radius:100px; padding:10px 20px; text-decoration:none; transition:.18s; }
.gx-bottom-links a:hover { background:#10b981; color:#fff; }

/* ---------- 상세 ---------- */
.gx-eyebrow { font-size:.8rem; font-weight:700; color:#64748b; }
.gx-eyebrow a { color:#047857; text-decoration:none; }
.gx-eyebrow a:hover { text-decoration:underline; }
.gx-own-badge { display:inline-block; font-size:11px; font-weight:800; color:#9d174d; background:#fce7f3;
    border:1px solid #fbcfe8; border-radius:100px; padding:3px 10px; margin-left:6px; vertical-align:middle; }
.gx-detail { max-width:780px; margin:0 auto; }
.gx-lead { font-size:1.18rem; line-height:1.7; color:#1e293b; font-weight:500;
    padding:18px 22px; background:#f0fdf4; border-left:4px solid #10b981; border-radius:0 14px 14px 0;
    margin-bottom:28px; }
.gx-lead strong { color:#047857; font-weight:800; }
.gx-body { font-size:1rem; line-height:1.8; color:#334155; }
.gx-body p { margin:0 0 16px; }
.gx-body strong { color:#0f172a; font-weight:700; }
.gx-body em { font-style:italic; color:#b45309; font-weight:600; }

/* 코드 스니펫 (코드가 필요한 용어) */
.gx-code { margin:26px 0; border-radius:14px; overflow:hidden; border:1px solid #1e293b; }
.gx-code-cap { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background:#0b1220; padding:10px 14px; border-bottom:1px solid #1e293b; }
.gx-code-lang { font-family:ui-monospace,Menlo,monospace; font-size:10px; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase; color:#34d399;
    background:#052e26; border:1px solid #065f46; padding:3px 9px; border-radius:100px; white-space:nowrap; }
.gx-code-desc { font-size:.82rem; color:#94a3b8; line-height:1.4; }
.gx-code-pre { margin:0; background:#0f172a; padding:16px 18px; overflow-x:auto; }
.gx-code-pre code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem;
    line-height:1.65; color:#e2e8f0; white-space:pre; display:block; }

/* 왜 GEO에서 중요한가 */
.gx-why { margin:28px 0; padding:20px 22px; background:#0f172a; border-radius:16px; }
.gx-why-tag { font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
    color:#6ee7b7; margin-bottom:8px; }
.gx-why p { font-size:.98rem; line-height:1.7; color:#e2e8f0; margin:0; }

/* 섹션 공통 태그 */
.gx-sec-tag { font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
    color:#94a3b8; margin:28px 0 12px; }

/* 외부 출처 (필수) */
.gx-sources ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.gx-sources li a { display:flex; align-items:center; gap:8px; font-size:.92rem; font-weight:600;
    color:#0f172a; text-decoration:none; padding:12px 16px; background:#fff; border:1px solid #e2e8f0;
    border-radius:12px; transition:.16s; }
.gx-sources li a:hover { border-color:#10b981; background:#f0fdf4; }
.gx-ext { margin-left:auto; color:#10b981; font-weight:800; }

/* 함께 읽기 (쌍두마차) */
.gx-article-row { display:flex; flex-wrap:wrap; gap:10px; }
.gx-article-card { font-size:.9rem; font-weight:700; color:#fff; background:#10b981;
    border-radius:12px; padding:12px 18px; text-decoration:none; transition:.16s; }
.gx-article-card:hover { background:#047857; }
.gx-article-card span { opacity:.8; }

/* 관련 용어 */
.gx-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.gx-chip { font-size:.85rem; font-weight:600; color:#334155; background:#fff; border:1px solid #cbd5e1;
    border-radius:100px; padding:7px 15px; text-decoration:none; transition:.16s; }
.gx-chip:hover { border-color:#10b981; color:#047857; background:#f0fdf4; }

/* 하단 내비 */
.gx-foot-nav { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center;
    margin-top:40px; padding-top:22px; border-top:1px solid #e2e8f0; }
.gx-back { font-size:.92rem; font-weight:700; color:#475569; text-decoration:none; }
.gx-back:hover { color:#0f172a; }
.gx-cta-link { font-size:.92rem; font-weight:800; color:#fff; background:#0f172a; border-radius:100px;
    padding:10px 22px; text-decoration:none; transition:.16s; }
.gx-cta-link:hover { background:#10b981; }

/* ============================================================
 *  와이어프레임 / 인포그래픽 프리미티브 (gw-*)
 * ============================================================ */
.gw-fig { margin:24px 0; padding:22px; background:#fff; border:1px solid #e2e8f0; border-radius:18px;
    box-shadow:0 4px 20px rgba(15,23,42,.05); }
.gw-cap { font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
    color:#94a3b8; text-align:center; margin-bottom:16px; }
.gw-cap-foot { font-size:.84rem; line-height:1.6; color:#64748b; text-align:center; margin:16px 0 0; }
.gw-cap-foot b { color:#0f172a; }

/* 흐름(flow) */
.gw-flow { display:flex; flex-wrap:wrap; align-items:stretch; gap:6px; justify-content:center; }
.gw-node { flex:1 1 110px; min-width:104px; background:#f8fafc; border:1.5px solid #cbd5e1;
    border-radius:12px; padding:12px 10px; text-align:center; }
.gw-node .k { display:block; font-family:ui-monospace,Menlo,monospace; font-size:9px; font-weight:800;
    letter-spacing:.06em; text-transform:uppercase; color:#94a3b8; margin-bottom:6px; }
.gw-node .v { font-size:12.5px; font-weight:700; color:#334155; line-height:1.35; }
.gw-node .v small { display:block; font-size:10.5px; font-weight:500; color:#64748b; margin-top:2px; }
.gw-node .v b { color:#047857; }
.gw-node.hot { background:#ecfdf5; border-color:#10b981; }
.gw-node.hot .v { color:#047857; }
.gw-node.cold { border-style:dashed; border-color:#fca5a5; background:#fef2f2; }
.gw-node.cold .v { color:#b91c1c; }
.gw-arrow { align-self:center; color:#10b981; font-weight:800; font-size:16px; }
@media (max-width:560px){ .gw-arrow{ transform:rotate(90deg);} }
.gw-loop-back { color:#047857; font-weight:600; }

/* 분할(split: 관측/추정 등) */
.gw-split { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid #e2e8f0;
    border-radius:16px; overflow:hidden; }
@media (max-width:640px){ .gw-split{ grid-template-columns:1fr;} }
.gw-side { padding:20px 22px; }
.gw-side.ok { background:#f0fdf4; }
.gw-side.no { background:#fffbeb; border-left:1px solid #e2e8f0; }
@media (max-width:640px){ .gw-side.no{ border-left:none; border-top:1px solid #e2e8f0;} }
.gw-side-tag { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em;
    text-transform:uppercase; padding:4px 12px; border-radius:100px; margin-bottom:12px; }
.gw-side.ok .gw-side-tag { background:#dcfce7; color:#166534; }
.gw-side.no .gw-side-tag { background:#fef3c7; color:#92400e; }
.gw-side ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.gw-side li { font-size:.88rem; line-height:1.5; color:#334155; padding-left:16px; position:relative; }
.gw-side.ok li::before { content:"✓"; position:absolute; left:0; color:#059669; font-weight:800; }
.gw-side.no li::before { content:"✕"; position:absolute; left:0; color:#dc2626; font-weight:800; }
.gw-side li em { font-style:italic; color:#b45309; font-weight:600; }

/* 임베딩 인포그래픽 */
.gw-embed { display:flex; justify-content:center; }
.gw-embed svg { width:100%; max-width:440px; height:auto; }
.gw-embed .gw-lbl { font-size:11px; font-weight:700; fill:#334155; }
.gw-embed .gw-lbl-sm { font-size:9.5px; font-weight:600; fill:#94a3b8; }
.gw-embed .gw-node-t { font-size:11px; font-weight:700; fill:#334155; }
.gw-embed .gw-node-c { font-size:12.5px; font-weight:800; fill:#ffffff; }