.glossary-main { width: min(1180px, calc(100% - 32px)); }
.glossary-hero { align-items: center; }
.glossary-hero h1 { max-width: 900px; font-size: clamp(38px, 6.2vw, 68px); }

.pack-status { margin: 0 0 24px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); }
.pack-status-heading h2 { margin: 0; font-size: clamp(25px, 4vw, 36px); }
.pack-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.pack-status-card { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-2); }
.pack-status-card strong, .pack-status-card span, .pack-status-card small { display: block; }
.pack-status-card span { margin-bottom: 8px; color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.pack-status-card strong { line-height: 1.45; }
.pack-status-card small { margin-top: 6px; color: var(--muted); line-height: 1.55; }
.pack-status-card.warning { border-color: #e6c29d; background: #fff7ed; }
.pack-status-card.warning span { color: var(--amber); }

.glossary-search { position: sticky; z-index: 5; top: 62px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.filter-button { min-height: 34px; padding: 0 12px; font-size: 12px; font-weight: 800; }
.filter-button.active { border-color: var(--green); background: #e4f3ed; color: var(--green-dark); }

.glossary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.term-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; scroll-margin-top: 170px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 8px 22px #1d3a320b; }
.term-card[hidden] { display: none; }
.term-visual { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid #d5e0db; border-radius: 9px; background: #eef4f1; }
.term-visual img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.term-visual.no-image { color: var(--green); font-size: 18px; font-weight: 900; }
.term-visual.icon-error img { opacity: .25; }
.term-main { min-width: 0; }
.term-title-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.term-title-row h2 { margin: 0; font-size: 19px; line-height: 1.35; }
.term-en { margin: 3px 0 0; color: var(--green-dark); font-size: 13px; font-weight: 800; }
.term-use { margin: 8px 0 0; color: var(--muted); line-height: 1.6; }
.term-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.term-meta code, .term-meta span { max-width: 100%; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2); color: #60736d; font-size: 10px; overflow-wrap: anywhere; }
.translation-badge { display: inline-flex; padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 900; }
.translation-badge.reviewed, .translation-badge.existing { background: #dff3eb; color: var(--green-dark); }
.translation-badge.project { background: #eef5ff; color: #285b99; }
.translation-badge.review-needed, .translation-badge.missing { background: #fff0df; color: var(--amber); }
.term-notes { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); }
.term-notes summary { color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 900; }
.term-notes p { margin: 7px 0 0; color: #71817c; font-size: 11px; line-height: 1.55; }

.translation-boundary { margin-top: 28px; padding: 22px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
.translation-boundary h2 { margin: 0; font-size: clamp(24px, 4vw, 34px); }
.boundary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.boundary-grid > div { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); }
.boundary-grid p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.glossary-error { padding: 20px; border: 1px solid #e6c29d; border-radius: 10px; background: #fff7ed; color: var(--amber); text-align: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 820px) {
  .pack-status-grid, .boundary-grid, .glossary-list { grid-template-columns: 1fr; }
  .glossary-search { position: static; }
}

@media (max-width: 620px) {
  .glossary-main { width: calc(100% - 24px); }
  .glossary-hero h1 { font-size: clamp(34px, 10.5vw, 48px); }
  .pack-status, .translation-boundary { padding: 16px; }
  .term-card { grid-template-columns: 46px minmax(0, 1fr); padding: 12px; }
  .term-visual { width: 44px; height: 44px; }
  .term-visual img { width: 38px; height: 38px; }
}