/* Compact, public-topic navigation; no card-sized content blocks. */
.resource-guide {
  --resource-ink: #173b60;
  --resource-muted: #596b7b;
  --resource-line: #d6e0e8;
  color: var(--resource-ink);
  font-family: var(--sans, 'Noto Sans KR', sans-serif);
  background: #f7f9fb;
  border-top: 1px solid var(--resource-line);
  border-bottom: 1px solid var(--resource-line);
  scroll-margin-top: 140px;
}
.resource-guide *, .resource-guide *::before, .resource-guide *::after { box-sizing: border-box; }
.resource-guide .resource-guide__inner { padding-top: 22px; padding-bottom: 18px; }
.resource-guide__header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.resource-guide .resource-guide__title {
  margin: 0;
  color: var(--resource-ink);
  font-family: var(--sans, sans-serif);
  font-size: 21px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -.025em;
}
.resource-guide .resource-guide__english {
  display: block;
  margin-top: 2px;
  color: var(--resource-muted);
  font-family: Manrope, var(--sans, sans-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .01em;
  text-transform: none;
}
.resource-guide__search { position: relative; flex: 0 1 310px; min-width: 180px; }
.resource-guide .resource-guide__input {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 9px 12px 9px 36px;
  border: 1px solid #b9c8d4;
  border-radius: 3px;
  background: #fff;
  color: var(--resource-ink);
  font: 400 14px/1.6 var(--sans, sans-serif);
  letter-spacing: 0;
}
.resource-guide__input::placeholder { color: #607080; opacity: 1; }
.resource-guide__search-icon { position: absolute; top: 50%; left: 13px; width: 12px; height: 12px; transform: translateY(-65%); border: 1.5px solid var(--resource-muted); border-radius: 50%; pointer-events: none; }
.resource-guide__search-icon::after { content: ''; position: absolute; width: 6px; height: 1.5px; right: -4px; bottom: -2px; background: var(--resource-muted); transform: rotate(45deg); transform-origin: left center; }
.resource-guide .resource-guide__topics { display: flex; flex-wrap: wrap; gap: 2px 22px; margin: 13px 0 0; padding: 0; list-style: none; }
.resource-guide .resource-guide__topic { min-width: 0; max-width: 100%; margin: 0; padding: 0; }
.resource-guide .resource-guide__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  max-width: 100%;
  padding: 6px 0;
  color: var(--resource-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.65;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.resource-guide__arrow { color: #8b6d39; font-size: 13px; font-weight: 400; }
.resource-guide__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.resource-guide .resource-guide__empty { margin: 10px 0; color: var(--resource-muted); font-size: 13px; line-height: 1.8; }
.resource-guide__empty a { color: var(--resource-ink); text-decoration: underline; text-underline-offset: 3px; }
.resource-guide .resource-guide__reading { margin: 3px 0 0; padding: 0; border: 0; background: none; }
.resource-guide .resource-guide__reading > summary { min-height: 32px; padding: 5px 0; color: var(--resource-muted); font-size: 12px; font-weight: 500; line-height: 1.7; cursor: pointer; }
.resource-guide__reading > summary::marker { color: #8b6d39; }
.resource-guide .resource-guide__reading > summary .resource-guide__english { display: inline; margin-left: 8px; font-size: 11px; }
.resource-guide .resource-guide__reading > p { max-width: 900px; margin: 4px 0 0; color: var(--resource-muted); font-size: 12px; line-height: 1.85; overflow-wrap: anywhere; }
.resource-guide [hidden] { display: none !important; }
.resource-guide__sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.resource-guide input:focus-visible, .resource-guide a:focus-visible, .resource-guide summary:focus-visible { outline: 3px solid #9b793d; outline-offset: 3px; }
@media (max-width: 600px) {
  .resource-guide .resource-guide__inner { padding-top: 18px; padding-bottom: 15px; }
  .resource-guide__header { flex-wrap: wrap; gap: 12px; }
  .resource-guide .resource-guide__title { font-size: 20px; }
  .resource-guide__search { flex-basis: 100%; min-width: 0; }
  .resource-guide .resource-guide__input { font-size: 16px; }
  .resource-guide .resource-guide__topics { gap: 0 18px; margin-top: 10px; }
  .resource-guide .resource-guide__link { min-height: 44px; font-size: 13px; }
}