/* AI 용어집 — blog.css(토큰·버튼·카드·머리 띠) 위에 얹는다.
   모양은 t-auction.co.kr «경매 용어집»: 용어 하나 = 한 화면, 한 줄 뜻 → 그림 → 쉽게 말하면 → 실제로는 → 왜 → 조심 → 관련 용어.
   도식은 data/glossary.json 의 diagrams 를 CSS 로 그리고, 장면 일러스트는 scenes 이미지와 캡션으로 표시한다. */

/* ── 허브 ─────────────────────────────────────────────── */
.search{display:flex; align-items:center; gap:10px; max-width:560px; margin-top:22px; padding:0 18px; height:3.25rem;
  background:var(--paper); border:2px solid var(--rule); border-radius:16px; box-shadow:0 2px 0 0 var(--rule)}
.search input{flex:1; min-width:0; border:0; outline:0; background:none; font:inherit; font-size:16px; color:var(--ink)}
.search:focus-within{border-color:var(--brand); box-shadow:0 2px 0 0 var(--brand)}
.search svg{flex:0 0 auto}
.g-body{padding-top:40px; padding-bottom:96px}
.g-sec{margin-top:44px}
.g-sec:first-child{margin-top:0}
.g-sec-h{display:flex; align-items:center; gap:12px; margin:0 0 16px; font-size:20px; font-weight:800}
.g-sec-h .n{font-size:13px; font-weight:800; color:var(--ink-45)}
.g-sec-h::after{content:""; flex:1; height:2px; border-radius:2px; background:var(--rule)}
.g-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:12px}
.g-card{padding:16px 18px}
.g-card b{display:block; font-size:18px; font-weight:800; line-height:1.35}
.g-card small{display:block; margin-top:2px; font-size:12.5px; font-weight:700; color:var(--ink-45)}
.g-card span{display:block; margin-top:8px; font-size:14px; line-height:1.65; color:var(--ink-70);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
a.g-card:hover b{color:var(--brand-text)}
.g-empty{margin:32px 0; color:var(--ink-55)}

/* ── 용어 한 편 ──────────────────────────────────────── */
.term{max-width:760px; margin:0 auto; padding:40px 24px 120px}
.term-title{margin:14px 0 0; font-size:40px; line-height:1.25; font-weight:800; letter-spacing:-.01em}
.term-en{display:block; margin-top:6px; font-size:16px; font-weight:700; color:var(--ink-45)}
.term-one{margin:22px 0 0; padding:20px 22px; border-radius:20px; background:var(--brand-soft); font-size:19px; line-height:1.7; font-weight:700}
.term h2{margin:48px 0 0; font-size:22px; line-height:1.4; font-weight:800}
.term h2::before{content:""; display:block; width:28px; height:4px; border-radius:2px; background:var(--brand); margin-bottom:.6em}
.term .eli5{margin-top:14px}
.term .eli5 p{margin:0; font-size:17px; line-height:1.9}
.term .eli5 p + p{margin-top:.9em}
.term ul.plain{margin:14px 0 0; padding-left:1.3em; font-size:16.5px; line-height:1.85}
.term ul.plain li + li{margin-top:.35em}
.why{margin-top:28px; padding:18px 20px; border-radius:16px; background:var(--sun-soft); border:2px solid #f5df8f}
.why b{display:block; font-size:14px; font-weight:800; color:#8a6a00}
.why p{margin:6px 0 0; font-size:16.5px; line-height:1.85}
.watch{margin-top:14px; padding:18px 20px; border-radius:16px; background:var(--red-soft); border:2px solid #f6c7c2}
.watch b{display:block; font-size:14px; font-weight:800; color:var(--red)}
.watch ul{margin:6px 0 0; padding-left:1.2em; font-size:16px; line-height:1.8}
.chips-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.chips-row .muted{opacity:.55; pointer-events:none}
.see{margin-top:14px; display:grid; gap:10px}
.see a{padding:14px 18px}
.see small{display:block; font-size:12px; font-weight:800; color:var(--brand-text)}
.see b{display:block; margin-top:2px; font-size:15.5px; font-weight:800}
.see a.locked small::after{content:" · 🔒 수강생 로그인"; color:var(--ink-55)}

/* ── 장면 일러스트 (미완성·새 용어는 GPT Images · public/img/glossary) ── */
.scene{margin:22px 0 0}
.scene img{display:block; width:100%; max-width:600px; margin:0 auto; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:20px; border:2px solid var(--rule); box-shadow:0 2px 0 0 var(--rule); background:#fff}
.scene figcaption{margin-top:12px; font-size:16px; line-height:1.6; font-weight:700; color:var(--ink-80); text-align:center}
.scene-tag{display:inline-block; margin-right:8px; padding:2px 10px; border-radius:999px; background:var(--sun-soft); color:#8a6a00; font-size:12px; font-weight:800; vertical-align:2px}
.g-card.has-thumb{padding-top:0; overflow:hidden}
.g-card .thumb{display:block; width:calc(100% + 36px); height:auto; margin:0 -18px 12px; aspect-ratio:4/3; object-fit:cover; border-bottom:2px solid var(--rule); background:#fff}

/* ── 그림 (diagrams) ──────────────────────────────────── */
.fig{margin:22px 0 0; padding:20px; border-radius:20px; background:var(--desk); border:2px solid var(--rule)}
.fig-h{margin:0 0 14px; font-size:15px; font-weight:800; color:var(--ink-80)}
.fig-note{margin:12px 0 0; font-size:13px; color:var(--ink-55)}
/* 색 — good 초록 · warn 빨강 · info 하늘 · sun 노랑 · violet 보라 · plain 흰 */
.t-good{background:var(--green-soft); border-color:#c6e8b3 !important}
.t-warn{background:var(--red-soft); border-color:#f6c7c2 !important}
.t-info{background:var(--brand-soft); border-color:#b9e4fb !important}
.t-sun{background:var(--sun-soft); border-color:#f5df8f !important}
.t-violet{background:var(--violet-soft); border-color:#d6ccfb !important}
.t-plain{background:var(--paper)}
.box{padding:14px 16px; border-radius:14px; border:2px solid var(--rule); background:var(--paper)}
.box b{display:block; font-size:16px; font-weight:800; line-height:1.4}
.box span{display:block; margin-top:4px; font-size:14px; line-height:1.6; color:var(--ink-70)}

/* compare — 두 칸 */
.d-compare{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.d-compare ul{margin:8px 0 0; padding-left:1.1em; font-size:14.5px; line-height:1.7}
.d-compare .vs{display:none}

/* flow — 왼쪽에서 오른쪽으로 (좁으면 위에서 아래로) */
.d-flow{display:flex; align-items:stretch; gap:8px}
.d-flow .box{flex:1 1 0; min-width:0; text-align:center}
.d-flow .arrow{flex:0 0 auto; align-self:center; font-size:22px; font-weight:800; color:var(--ink-45)}

/* steps — 번호 사다리 */
.d-steps{list-style:none; margin:0; padding:0; counter-reset:s}
.d-steps li{position:relative; padding:0 0 18px 50px; counter-increment:s}
.d-steps li:last-child{padding-bottom:0}
.d-steps li::before{content:counter(s); position:absolute; left:0; top:0; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--brand); color:#fff; font-weight:800; font-size:15px}
.d-steps li.warn::before{background:var(--sun); color:var(--ink)}
.d-steps li::after{content:""; position:absolute; left:16px; top:38px; bottom:4px; width:2px; background:var(--rule)}
.d-steps li:last-child::after{display:none}
.d-steps b{display:block; padding-top:5px; font-size:16px; font-weight:800}
.d-steps span{display:block; margin-top:2px; font-size:14px; line-height:1.6; color:var(--ink-70)}

/* branch — 하나에서 갈래로 */
.d-branch .root{text-align:center}
.d-branch .down{display:block; text-align:center; font-size:22px; font-weight:800; color:var(--ink-45); margin:6px 0}
.d-branch .kids{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:10px}
.d-branch .label{display:inline-block; margin-bottom:6px; padding:2px 10px; border-radius:999px; background:var(--paper); border:1px solid var(--rule); font-size:12px; font-weight:800; color:var(--ink-55)}

/* levels — 가로 막대 */
.d-levels{display:grid; gap:12px}
.d-levels .row-h{display:flex; justify-content:space-between; gap:12px; font-size:14px; font-weight:800}
.d-levels .row-h em{font-style:normal; color:var(--ink-55)}
.d-levels .track{margin-top:6px; height:16px; border-radius:999px; background:var(--paper); border:2px solid var(--rule); overflow:hidden}
.d-levels .fill{height:100%; border-radius:999px; background:var(--brand)}
.d-levels .fill.t-good{background:#7bc65a} .d-levels .fill.t-warn{background:#ef7d72} .d-levels .fill.t-sun{background:var(--sun)} .d-levels .fill.t-violet{background:#9b86f0}
.d-levels .fill.t-info{background:var(--brand)} .d-levels .fill.t-plain{background:#c3c7d2}

/* nest — 큰 상자 안에 작은 상자 */
.d-nest .ring{padding:14px 16px 16px; border-radius:18px; border:2px solid var(--rule)}
.d-nest .ring > b{display:block; font-size:16px; font-weight:800}
.d-nest .ring > span{display:block; margin-top:2px; font-size:13.5px; line-height:1.55; color:var(--ink-70)}
.d-nest .ring .ring{margin-top:12px}

/* table */
.d-table{overflow-x:auto; border:2px solid var(--rule); border-radius:14px; background:var(--paper)}
.d-table table{width:100%; border-collapse:collapse; font-size:14.5px; line-height:1.55}
.d-table th, .d-table td{padding:10px 12px; text-align:left; vertical-align:top; border-top:1px solid var(--rule)}
.d-table thead th{border-top:0; background:var(--desk); font-size:13px; font-weight:800}
.d-table td:first-child{font-weight:800; white-space:nowrap}

@media (max-width:760px){
  .term{padding:28px 16px 96px}
  .term-title{font-size:32px}
  .term-one{font-size:17.5px; padding:16px 18px}
  .fig{padding:14px}
  .d-nest .ring{padding:12px 10px 12px}
  .d-nest .ring .ring{margin-top:10px}
  .d-compare{grid-template-columns:1fr}
  .d-flow{flex-direction:column}
  .d-flow .arrow{transform:rotate(90deg)}
  .g-grid{grid-template-columns:1fr}
  /* 폰: 카드를 가로로 — 왼쪽 작은 그림, 오른쪽 글 (100개를 세로로 늘어놓아도 덜 길게) */
  .g-card.has-thumb{display:grid; grid-template-columns:104px minmax(0,1fr); column-gap:14px; align-content:center; padding:12px 14px 12px 0}
  .g-card.has-thumb .thumb{grid-row:1 / span 3; width:104px; height:100%; min-height:96px; margin:-12px 0; aspect-ratio:auto; border-bottom:0; border-right:2px solid var(--rule)}
  .g-card.has-thumb span{margin-top:4px; font-size:13.5px}
}