:root {
  --font-size-lg-faq: 1.25rem;
}

body {
  padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--footer-safe-area, 8rem) + env(safe-area-inset-bottom, 0px));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

:is(a, button, input, select, textarea, details, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--border-radius-sm);
}

main.container {
  max-width: var(--width-tool-container);
  width: 100%;
  margin-inline: auto;
  min-height: calc(100vh - var(--header-height));
  padding-top: var(--space-lg);
  padding-inline: var(--space-lg);
  padding-bottom: max(var(--footer-safe-area, 8rem), 8rem);
}

.page-header {
  background: var(--color-primary-lighter);
  padding: var(--space-xl) var(--space-md);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  position: relative;
  z-index: 10;
}
.page-header h1 {
  color: var(--color-primary-dark);
  margin-bottom: var(--space-sm);
  word-break: keep-all;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}
.page-header .emoji {
  font-size: clamp(1.5rem, 0.5rem + 2vw, 2rem);
  line-height: 1;
}
.page-header p {
  font-size: var(--font-size-base);
  max-width: 700px;
  margin: 0 auto;
  color: var(--color-text-light);
  line-height: var(--line-height-base);
}
.page-header .page-scope-note {
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  max-width: 68ch;
}
.page-header br.mobile-only {
  display: none;
}

.card {
  max-width: var(--width-tool-container);
  width: 100%;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  gap: var(--space-sm);
}

.faq-card-body {
  padding: 0;
}

.search-filter-controls {
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--space-xl);
  border: 1px solid var(--color-border);
}
.search-filter-controls:hover {
  transform: none;
  box-shadow: var(--shadow-soft);
}

.noscript-help {
  margin: 0 0 var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--border-radius-base);
  background: var(--color-warning-bg);
  color: var(--color-text);
}

.noscript-help h2 {
  margin: 0 0 var(--space-xs);
  font-size: 1rem;
  line-height: 1.5;
}

.noscript-help p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
}

.noscript-help p + p {
  margin-top: var(--space-xs);
}

.search-box {
  position: relative;
  margin-bottom: var(--space-md);
}
#search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  padding-left: 2.5rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-base);
}
.search-box .search-emoji {
  position: absolute;
  left: 0.9375rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-light);
}

.search-scope-note {
  max-width: 68ch;
  margin: 0.72rem 0 0;
  /* Sits on .search-filter-controls's fixed light gradient (never flips dark). */
  color: #5A626A;
  font-size: 0.875rem;
  line-height: 1.6;
}

.runtime-status {
  margin: 0 0 var(--space-lg);
  padding: 0.9rem 1rem;
  border-radius: var(--border-radius-base);
  background: var(--color-info-bg, var(--color-primary-lighter));
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.65;
}

.runtime-status[data-state="error"] {
  background: var(--color-warning-bg);
}

.runtime-status[hidden] {
  display: none;
}

.inline-emoji,
.filter-emoji,
.btn-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: -0.08em;
}

.inline-emoji {
  font-size: 1.15em;
  margin-right: var(--space-xs);
}

.accordion {
  width: 100%;
  max-width: var(--width-tool-container);
  margin-inline: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.accordion:hover {
  transform: none;
  box-shadow: var(--shadow-soft);
}
.accordion-item {
  border-bottom: 1px solid var(--color-border-light);
  background-color: var(--color-surface);
  transition: opacity var(--transition-medium), transform var(--transition-medium);
}
.accordion-item:last-child {
  border-bottom: none;
}
.accordion-q-row {
  display: flex;
  align-items: stretch;
  background-color: var(--color-surface);
  transition: background-color var(--transition-fast);
}
.accordion-q-row.is-open {
  background-color: var(--color-primary-lighter);
}
.accordion-q {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  background-color: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  flex: 1;
  min-width: 0;
}
.accordion-q-text {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  flex: 1;
  min-width: 0;
}
.faq-q-emoji {
  flex: 0 0 auto;
  width: 2rem;
  min-width: 2rem;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji, sans-serif;
  font-size: clamp(1.55rem, 2.5vw, 1.8rem);
  line-height: 1;
  text-align: center;
  transform: translateY(0.03em);
}
.faq-q-label {
  flex: 1 1 auto;
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.faq-q-preview {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  /* Sits on .accordion-item's fixed light background (never flips dark). */
  color: #5A626A;
  font-size: 0.86em;
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.5;
}
.core-question-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.52rem;
  border-radius: var(--border-radius-pill);
  background: var(--color-primary-lighter);
  color: var(--color-primary-dark);
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
}
.faq-q-label .core-question-badge {
  margin-left: 0.45rem;
  vertical-align: 0.08em;
}
.accordion-arrow {
  margin-left: var(--space-md);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  padding: 0.34rem 0.62rem;
  border-radius: var(--border-radius-pill);
  background: rgba(74, 113, 147, 0.08);
}
.accordion-a {
  overflow: hidden;
  transition: max-height var(--transition-medium), padding var(--transition-medium);
  padding: 0 var(--space-lg);
}
.accordion-a-body {
  padding-bottom: var(--space-lg);
  color: var(--color-text-light);
}
.accordion-a-body p {
  margin-bottom: var(--space-sm);
}
.accordion-a-body ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
  color: var(--color-text-light);
}
.accordion-a-body ul li {
  margin-bottom: var(--space-xs);
  color: var(--color-text-light);
}
.accordion-q-row.is-open + .accordion-a {
  max-height: 3000px;
  padding-top: var(--space-md);
  padding-bottom: 0;
}
.accordion-q[aria-expanded="true"] .accordion-arrow {
  color: var(--color-primary-dark);
  background: rgba(74, 113, 147, 0.14);
  transform: none;
}
#no-results {
  text-align: center;
  padding: var(--space-lg);
  /* Background is overridden to a fixed light rgba() further down this file
     (never flips dark). */
  color: #5A626A;
  display: none;
}

.keyword {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
}
mark {
  background-color: var(--color-primary-lighter);
  padding: 0.1em 0.3em;
  border-radius: var(--border-radius-sm);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.search-hit {
  padding: 0.04em 0.14em;
  border-radius: 0.2em;
  background: var(--ds-warning-bg, #faf6ea);
  color: inherit;
  font-weight: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.emoji {
  margin-right: var(--space-xs);
  vertical-align: middle;
}
.related-questions {
  margin-top: var(--space-lg);
  border-top: 1px dashed var(--color-border-light);
  padding-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.related-questions h4 {
  color: var(--color-text-dark);
  font-size: clamp(1.08rem, 1.02rem + 0.3vw, 1.18rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.45;
  margin-bottom: 0.15rem;
  word-break: keep-all;
}
.related-link {
  display: block;
  width: 100%;
  background: var(--color-primary-lighter);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-sm);
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
  padding: 0.65rem 0.8rem;
  margin: 0;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.45;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.related-link:hover,
.related-link:focus-visible {
  background: var(--color-surface);
  border-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  outline: none;
}
.btn-save-answer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background-color: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-light);
  padding: .5rem var(--space-md);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  margin-top: var(--space-md);
  transition: all var(--transition-fast);
}

.pagination-controls {
  text-align: center;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.bottom-search-panel {
  display: grid;
  gap: var(--space-md);
  width: 100%;
  max-width: var(--width-tool-container);
  margin: 0 auto var(--space-lg);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-soft);
}

.bottom-search-copy {
  text-align: center;
}

.bottom-search-copy h2 {
  margin-bottom: var(--space-xs);
  /* .bottom-search-panel's background is overridden to a fixed light
     gradient further down this file (never flips dark). */
  color: #3A556E;
  font-size: var(--font-size-lg);
}

.bottom-search-copy p {
  margin: 0;
  color: #5A626A;
  font-size: var(--font-size-sm);
}

.bottom-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
}

.bottom-search-box {
  position: relative;
}

.bottom-search-box .search-emoji {
  position: absolute;
  left: 0.9375rem;
  top: 50%;
  color: var(--color-text-light);
  transform: translateY(-50%);
}

#bottom-search-input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-md);
  padding-left: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  font: inherit;
  font-size: var(--font-size-base);
}

.bottom-search-submit {
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.bottom-search-submit:focus-visible,
#bottom-search-input:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.pagination-btn {
  background-color: var(--color-surface);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary-light);
  padding: .5rem var(--space-md);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  margin: 0 var(--space-xs);
  transition: all var(--transition-fast);
}
.pagination-btn.active {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
}
.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#page-info {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin: 0 var(--space-md);
}

.top-return-row {
  text-align: center;
  margin-top: var(--space-xl);
}

.btn-top {
  background-color: var(--color-surface);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary-light);
  padding: .5rem var(--space-md);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.btn-top .btn-emoji {
  margin-right: var(--space-xs);
}

@media (hover: hover) {
  .accordion-q:hover {
    background-color: var(--color-primary-lighter);
  }
  .btn-save-answer:hover, .btn-top:hover {
    background-color: var(--color-primary-lighter);
    border-color: var(--color-primary);
    transform: translateY(-0.04rem);
    box-shadow: var(--shadow-soft);
  }
  .pagination-btn:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-color: var(--color-primary);
  }
  .bottom-search-submit:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    box-shadow: var(--shadow-soft);
    transform: translateY(-0.04rem);
  }
}

@media (max-width: 48rem) {
  .page-header {
    padding: var(--space-xl) var(--space-md);
    margin-bottom: var(--space-xl);
  }
  .page-header h1 {
    gap: var(--space-sm);
  }
  .page-header .emoji {
    font-size: clamp(1.5rem, 0.5rem + 2vw, 2rem);
  }
  .page-header p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }
  .page-header br.mobile-only {
    display: block;
  }
  .bottom-search-panel {
    padding: var(--space-md);
    border-radius: var(--border-radius-base);
  }
  .bottom-search-form {
    grid-template-columns: 1fr;
  }
  .bottom-search-submit {
    width: 100%;
  }
}

@media (max-width: 30rem) {
  .page-header h1 {
    word-break: keep-all;
    font-size: 1.75rem;
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* 2026-07-02 Q&A entry polish: 사전처럼 딱딱하지 않고, 찾기 쉬운 질감으로 정리 */
.search-filter-controls {
  border: 0;
  background: linear-gradient(180deg, rgba(245, 249, 252, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow: var(--shadow-soft);
}

.search-filter-controls:hover,
.accordion:hover {
  transform: none;
  box-shadow: var(--shadow-soft);
}

#search-input,
#bottom-search-input {
  min-height: 3.15rem;
  border-color: rgba(74, 113, 147, 0.18);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  /* No color was previously set, so text inherited var(--color-text), which
     flips near-white in dark mode against this always-light input surface. */
  color: #2A2A2A;
}

#search-input::placeholder,
#bottom-search-input::placeholder {
  color: rgba(74, 91, 106, 0.68);
}

.search-box .search-emoji,
.bottom-search-box .search-emoji {
  font-size: 1.15rem;
  opacity: 0.9;
}

.card {
  border: 0;
  box-shadow: none;
  background: transparent;
}

.card-header {
  padding-inline: 0.2rem;
  margin-bottom: var(--space-sm);
}

.card-title {
  color: var(--color-primary-dark);
  font-size: clamp(1.35rem, 1.16rem + 0.75vw, 1.72rem);
}

.accordion {
  display: grid;
  gap: 0.72rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.accordion-item {
  overflow: hidden;
  border: 0;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.accordion-q-row {
  background: transparent;
}

.accordion-q-row.is-open {
  background: rgba(235, 244, 250, 0.92);
}

.accordion-q {
  min-height: 4.25rem;
  padding: 1rem 1.15rem;
}

.accordion-q-text {
  gap: 0.75rem;
  line-height: 1.55;
}

.faq-q-emoji {
  font-size: clamp(1.38rem, 2.2vw, 1.72rem);
}

.accordion-a {
  padding-inline: clamp(1rem, 2.4vw, 1.35rem);
}

.accordion-q-row.is-open + .accordion-a {
  padding-top: 0.25rem;
}

.accordion-a-body {
  padding-bottom: 1.25rem;
  line-height: 1.78;
}

.accordion-a-body p,
.accordion-a-body li {
  line-height: 1.78;
}

.related-questions {
  border-top: 0;
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(245, 249, 252, 0.9);
}

.related-link {
  border: 0;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
}

#no-results {
  margin-top: var(--space-md);
  border-radius: 1rem;
  background: rgba(245, 249, 252, 0.9);
}

.bottom-search-panel {
  border: 0;
  background: linear-gradient(180deg, rgba(245, 249, 252, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow: var(--shadow-soft);
}

.bottom-search-submit,
.btn-top,
.pagination-btn {
  min-height: 2.9rem;
  border-radius: var(--border-radius-pill);
  box-shadow: var(--shadow-soft);
}

@media (hover: hover) {
  .accordion-q:hover {
    background-color: rgba(235, 244, 250, 0.75);
  }
}

@media (max-width: 48rem) {
  .search-filter-controls {
    padding: var(--space-md);
  }

  .accordion-q {
    min-height: 4rem;
    padding: 0.95rem 1rem;
  }

  .bottom-search-panel {
    padding: var(--space-lg) var(--space-md);
  }
}

.search-filter-controls .search-box {
  margin-bottom: 0;
}

/* 2026-07-03 mobile QA: 검색과 질문 읽기에만 시선이 머물도록 정리 */
.accordion-item.is-open {
  background: linear-gradient(180deg, rgba(241, 248, 253, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow: var(--shadow-soft);
}

.accordion-item.is-open .accordion-q-row {
  background: transparent;
}

.accordion-a-body table {
  display: block;
  width: 100% !important;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: separate !important;
  border-spacing: 0.35rem;
  border: 0 !important;
  border-radius: 0.9rem;
  background: rgba(245, 249, 252, 0.82);
  box-shadow: none;
  padding: 0.35rem;
  -webkit-overflow-scrolling: touch;
}

.accordion-a-body th,
.accordion-a-body td {
  border: 0 !important;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.72rem 0.78rem !important;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.65;
  vertical-align: top;
}

.accordion-a-body th {
  color: var(--color-primary-dark);
  background: rgba(235, 244, 250, 0.95);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 48rem) {
  main.container {
    padding-inline: var(--space-md);
  }

  .accordion {
    gap: 0.85rem;
  }

  .accordion-q-row {
    align-items: stretch;
  }

  .accordion-q {
    order: 1;
    min-height: 4.25rem;
    padding: 1rem 0.65rem 1rem 1rem;
  }

  .accordion-q-text {
    gap: 0.55rem;
    line-height: 1.58;
  }

  .core-question-badge {
    display: none;
  }

  .accordion-a {
    padding-inline: 1rem;
  }

  .accordion-q-row.is-open + .accordion-a {
    padding-top: 0.65rem;
  }

  .accordion-a-body {
    padding-bottom: 1.45rem;
    font-size: 0.98rem;
    line-height: 1.82;
  }

  .accordion-a-body p,
  .accordion-a-body li {
    line-height: 1.82;
  }

  .related-questions {
    padding: 0.85rem;
    gap: 0.5rem;
  }

  .related-questions h4 {
    font-size: 1rem;
  }

  .related-link {
    min-height: 2.9rem;
    padding: 0.78rem 0.9rem;
  }

  mark {
    padding: 0.08em 0.25em;
  }
}

/* Keep the FAQ content while removing the redundant list heading block. */
main.container > section.card > .card-header {
  display: none;
}

/* Align FAQ rows with the search panel. */
main.container > section.card > .card-body {
  padding: 0;
}

/* 2026-07-13 audit follow-up: keep dense reference rows readable without
   hiding priority or pagination state on small screens. */
main.container,
main.container > .search-filter-controls,
main.container > .card,
main.container > .pagination-controls,
main.container > .bottom-search-panel {
  max-width: 60rem;
}

@media (max-width: 48rem) {
  .core-question-badge {
    display: inline-flex;
    padding: 0.12rem 0.38rem;
    font-size: 0.875rem;
  }

  .accordion-a-body table {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary-light) var(--color-primary-lighter);
    scroll-snap-type: x proximity;
    background-image: linear-gradient(to right, transparent calc(100% - 1.25rem), rgba(74, 108, 140, 0.1));
  }

  .accordion-a-body :is(th, td) {
    scroll-snap-align: start;
  }
}

/* 2026-07-14: calm, lounge-like reading rhythm for the long-form FAQ. */
#faq-accordion {
  gap: 0.82rem;
}

#faq-accordion .accordion-item {
  min-width: 0;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.97);
  box-shadow:
    0 0.2rem 0.75rem rgba(42, 69, 91, 0.055),
    0 0.9rem 2.1rem rgba(42, 69, 91, 0.045);
}

#faq-accordion .accordion-item.is-open {
  background: linear-gradient(180deg, rgba(239, 247, 252, 0.98) 0, rgba(255, 255, 255, 0.99) 9.5rem);
  box-shadow:
    0 0.3rem 0.9rem rgba(42, 69, 91, 0.07),
    0 1.15rem 2.6rem rgba(42, 69, 91, 0.065);
}

#faq-accordion .accordion-q-row,
#faq-accordion .accordion-q,
#faq-accordion .accordion-q-text,
#faq-accordion .faq-q-label {
  min-width: 0;
}

#faq-accordion .accordion-q-row.is-open {
  background: rgba(228, 241, 249, 0.58);
}

#faq-accordion .accordion-q {
  min-height: 4.65rem;
  padding: 1.08rem 1.2rem;
  border-radius: 1.2rem;
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

#faq-accordion .accordion-q-text {
  gap: 0.78rem;
  /* .accordion-item's background is a fixed rgba(255,255,255,...) surface in
     both modes (see rule above), but --color-primary-dark flips to a light
     blue in dark mode. Pin to the light-mode literal so it stays readable. */
  color: #3A556E;
  font-size: clamp(1.04rem, 0.99rem + 0.2vw, 1.14rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.52;
  letter-spacing: -0.012em;
}

#faq-accordion .faq-q-emoji {
  width: 2.15rem;
  min-width: 2.15rem;
  font-size: clamp(1.5rem, 1.32rem + 0.55vw, 1.82rem);
}

#faq-accordion .faq-q-label {
  text-wrap: pretty;
}

#faq-accordion .accordion-arrow {
  min-width: 3.35rem;
  min-height: 2.35rem;
  margin-left: 0.8rem;
  padding: 0.38rem 0.68rem;
  background: rgba(74, 113, 147, 0.085);
  color: #3A556E;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

#faq-accordion .accordion-q[aria-expanded="true"] .accordion-arrow {
  background: rgba(74, 113, 147, 0.16);
  box-shadow: inset 0 0 0 1px rgba(74, 113, 147, 0.08);
}

#faq-accordion .accordion-q:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

#faq-accordion .accordion-a {
  padding-inline: clamp(1rem, 4vw, 2.35rem);
}

#faq-accordion .accordion-q-row.is-open + .accordion-a {
  padding-top: 0.7rem;
}

#faq-accordion .accordion-a-body {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  padding: 0 0 2rem;
  color: #405363;
  font-size: clamp(1rem, 0.97rem + 0.12vw, 1.055rem);
  line-height: 1.82;
  overflow-wrap: anywhere;
  word-break: keep-all;
}

#faq-accordion .accordion-a-body > .emoji:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.4rem;
  font-size: 1.28em;
  line-height: 1;
}

#faq-accordion .accordion-a-body > .keyword {
  color: var(--color-primary-dark);
  font-size: 1.055em;
  line-height: 1.65;
}

#faq-accordion .accordion-a-body p {
  margin: 1rem 0 0;
  line-height: 1.82;
  text-wrap: pretty;
}

#faq-accordion .accordion-a-body > p:first-of-type {
  margin-top: 1.35rem;
}

#faq-accordion .accordion-a-body p > strong:first-child {
  color: #294d67;
  font-weight: var(--font-weight-semibold);
}

#faq-accordion .accordion-a-body ul,
#faq-accordion .accordion-a-body ol {
  margin: 0.55rem 0 1.15rem;
  padding: 0.88rem 1rem 0.88rem 2rem;
  border: 0;
  border-radius: 0.95rem;
  background: rgba(239, 246, 250, 0.62);
  color: #405363;
}

#faq-accordion .accordion-a-body li {
  margin: 0;
  padding-left: 0.12rem;
  color: inherit;
  line-height: 1.74;
}

#faq-accordion .accordion-a-body li + li {
  margin-top: 0.48rem;
}

#faq-accordion .accordion-a-body li::marker {
  color: #527d9d;
  font-weight: var(--font-weight-semibold);
}

#faq-accordion .accordion-a-body mark {
  padding: 0.1em 0.28em;
  border-radius: 0.38em;
  background: rgba(219, 237, 247, 0.8);
  color: #294d67;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

#faq-accordion .accordion-a-body table {
  display: table;
  width: 100% !important;
  table-layout: fixed;
  margin: 1rem 0 1.25rem;
  padding: 0.3rem;
  overflow: visible;
  border-spacing: 0.35rem;
  background: rgba(239, 246, 250, 0.68);
}

#faq-accordion .accordion-a-body :is(th, td) {
  min-width: 0;
  padding: 0.75rem 0.82rem !important;
  border-radius: 0.72rem;
  line-height: 1.62;
  overflow-wrap: anywhere;
  word-break: normal;
}

#faq-accordion .related-questions {
  max-width: 48rem;
  margin: 1.45rem auto 0;
  padding: 1rem;
  border: 0;
  border-radius: 1rem;
  background: rgba(238, 246, 251, 0.72);
}

#faq-accordion .related-questions h4 {
  margin-bottom: 0.25rem;
  color: #294d67;
}

#faq-accordion .related-link {
  min-height: 3rem;
  padding: 0.72rem 0.9rem;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0.18rem 0.6rem rgba(42, 69, 91, 0.055);
}

#faq-accordion .accordion-item--safety {
  box-shadow:
    inset 0 0 0 1px var(--color-warning-border, rgba(95, 127, 153, 0.35)),
    0 0.18rem 0.6rem rgba(42, 69, 91, 0.055);
}

#faq-accordion .accordion-item--safety .faq-q-label::before {
  content: "안전 먼저";
  display: inline-flex;
  align-items: center;
  margin-right: 0.45rem;
  padding: 0.1rem 0.42rem;
  border: 1px solid currentColor;
  border-radius: var(--border-radius-pill);
  background: var(--color-warning-bg);
  color: var(--color-warning-text, var(--color-primary-dark));
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  vertical-align: 0.08em;
  white-space: nowrap;
}

@media (hover: hover) {
  #faq-accordion .accordion-q:hover {
    background: rgba(220, 237, 247, 0.72);
  }

  #faq-accordion .accordion-item.is-open .accordion-q:hover {
    background: rgba(210, 232, 245, 0.62);
  }

  #faq-accordion .related-link:hover {
    background: rgba(224, 239, 248, 0.82);
    color: var(--color-primary-dark);
  }
}

@media (max-width: 48rem) {
  main.container {
    min-width: 0;
    padding-inline: clamp(0.72rem, 3.5vw, 1rem);
  }

  main.container > * {
    min-width: 0;
    max-width: 100%;
  }

  #faq-accordion {
    gap: 0.66rem;
  }

  #faq-accordion .accordion-item,
  #faq-accordion .accordion-q {
    border-radius: 1rem;
  }

  #faq-accordion .accordion-q {
    min-height: 4rem;
    padding: 0.86rem 0.72rem;
  }

  #faq-accordion .accordion-q-text {
    gap: 0.5rem;
    font-size: clamp(0.98rem, 3.95vw, 1.04rem);
    line-height: 1.5;
    letter-spacing: -0.016em;
  }

  #faq-accordion .faq-q-emoji {
    width: 1.82rem;
    min-width: 1.82rem;
    font-size: 1.46rem;
  }

  #faq-accordion .core-question-badge {
    margin-left: 0.2rem;
    padding: 0.1rem 0.32rem;
    font-size: 0.875rem;
  }

  #faq-accordion .accordion-arrow {
    min-width: 2.8rem;
    min-height: 2.2rem;
    margin-left: 0.38rem;
    padding-inline: 0.48rem;
    font-size: 0.875rem;
  }

  #faq-accordion .accordion-a {
    padding-inline: 0.78rem;
  }

  #faq-accordion .accordion-q-row.is-open + .accordion-a {
    padding-top: 0.58rem;
  }

  #faq-accordion .accordion-a-body {
    max-width: none;
    padding-bottom: 1.45rem;
    font-size: 1rem;
    line-height: 1.78;
    word-break: normal;
  }

  #faq-accordion .accordion-a-body p {
    margin-top: 0.9rem;
    line-height: 1.78;
  }

  #faq-accordion .accordion-a-body > p:first-of-type {
    margin-top: 1.12rem;
  }

  #faq-accordion .accordion-a-body ul,
  #faq-accordion .accordion-a-body ol {
    margin: 0.48rem 0 0.95rem;
    padding: 0.78rem 0.72rem 0.78rem 1.72rem;
    border-radius: 0.82rem;
  }

  #faq-accordion .accordion-a-body li {
    line-height: 1.7;
  }

  #faq-accordion .accordion-a-body li + li {
    margin-top: 0.4rem;
  }

  #faq-accordion .accordion-a-body table {
    display: table;
    width: 100% !important;
    table-layout: fixed;
    margin: 0.85rem 0 1rem;
    padding: 0.18rem;
    overflow: visible;
    border-spacing: 0.22rem;
    background-image: none;
  }

  #faq-accordion .accordion-a-body :is(th, td) {
    padding: 0.58rem 0.5rem !important;
    border-radius: 0.58rem;
    font-size: 1rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  #faq-accordion .related-questions {
    margin-top: 1.15rem;
    padding: 0.78rem;
    border-radius: 0.86rem;
  }

  #faq-accordion .related-link {
    min-height: 2.85rem;
    padding: 0.68rem 0.75rem;
    font-size: 1rem;
  }
}

@media (max-width: 24.5rem) {
  #faq-accordion .accordion-q {
    padding-inline: 0.65rem;
  }

  #faq-accordion .faq-q-emoji {
    width: 1.7rem;
    min-width: 1.7rem;
    font-size: 1.36rem;
  }

  #faq-accordion .accordion-arrow {
    min-width: 2.62rem;
    margin-left: 0.25rem;
    padding-inline: 0.38rem;
  }

  #faq-accordion .accordion-a {
    padding-inline: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #faq-accordion :is(.accordion-item, .accordion-q, .accordion-arrow, .accordion-a, .related-link) {
    transition: none !important;
  }
}

@media (forced-colors: active) {
  #faq-accordion .accordion-item,
  #faq-accordion .accordion-a-body :is(ul, ol, table),
  #faq-accordion .related-questions {
    outline: 1px solid CanvasText;
  }

  #faq-accordion .accordion-q:focus-visible {
    outline: 3px solid Highlight;
  }
}

/* 2026-07-20: show the complete answer with a visual reading map. */
#faq-accordion .faq-answer-summary {
  margin: 1.1rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  background: rgba(232, 242, 248, 0.88);
  color: #294d67;
  line-height: 1.72;
}

#faq-accordion .faq-answer-detail {
  margin-top: 0.75rem;
}

#faq-accordion .faq-answer-detail-content {
  display: grid;
  gap: 0.72rem;
  margin-top: 0;
}

#faq-accordion .answer-guide-section {
  padding: 0.88rem 1rem;
  border-radius: 0.9rem;
  background: rgba(247, 249, 250, 0.96);
}

#faq-accordion .answer-guide-answer {
  background: rgba(248, 247, 241, 0.96);
}

#faq-accordion .answer-guide-compare {
  background: rgba(239, 246, 250, 0.9);
}

#faq-accordion .answer-guide-action {
  background: rgba(239, 247, 242, 0.94);
}

#faq-accordion .answer-guide-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.48rem;
  color: #294d67;
  font-size: 1rem;
  line-height: 1.45;
}

#faq-accordion .answer-guide-heading > span:first-child {
  font-size: 1.28rem;
  line-height: 1;
}

#faq-accordion .answer-guide-section p,
#faq-accordion .answer-guide-section ul,
#faq-accordion .answer-guide-section ol {
  margin-top: 0;
  margin-bottom: 0;
}

#faq-accordion .answer-guide-section ul,
#faq-accordion .answer-guide-section ol {
  padding-top: 0.2rem;
  padding-bottom: 0.1rem;
  background: transparent;
}

#faq-accordion .faq-visual-guide {
  margin-top: 0.75rem;
}

#faq-accordion .faq-visual-guide table {
  margin: 0;
  background: rgba(247, 249, 250, 0.98);
}

#faq-accordion .faq-visual-guide caption {
  padding: 0 0.2rem 0.55rem;
  color: #294d67;
  font-size: 0.98rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  text-align: left;
}

#faq-accordion .faq-visual-guide th {
  color: #294d67;
  background: rgba(226, 239, 247, 0.88);
  font-weight: var(--font-weight-semibold);
}

#faq-accordion .faq-visual-guide td {
  background: rgba(255, 255, 255, 0.96);
}

#faq-accordion .faq-official-help {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 0.9rem;
  background: var(--color-info-bg, var(--color-primary-lighter));
  color: var(--color-text);
}

#faq-accordion .faq-official-help__title {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: 1rem;
  line-height: 1.5;
}

#faq-accordion .faq-official-help .faq-official-help__meta {
  margin: 0.28rem 0 0;
  color: var(--color-text-light);
  font-size: 0.875rem;
  line-height: 1.6;
}

#faq-accordion .faq-official-help .faq-official-help__list {
  margin: 0.7rem 0 0;
  padding: 0 0 0 1.25rem;
  background: transparent;
}

#faq-accordion .faq-official-help__list li {
  line-height: 1.65;
}

#faq-accordion .faq-official-help__phone {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.4rem 0.25rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#faq-accordion .faq-official-help__list a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

@media (max-width: 35rem) {
  #faq-accordion .faq-answer-summary,
  #faq-accordion .answer-guide-section {
    padding: 0.78rem 0.82rem;
    border-radius: 0.78rem;
  }

  #faq-accordion .answer-guide-heading {
    font-size: 1rem;
  }

  #faq-accordion .faq-visual-guide :is(th, td) {
    padding: 0.54rem 0.44rem !important;
    font-size: 1rem;
  }
}

@media (forced-colors: active) {
  #faq-accordion .faq-answer-summary,
  #faq-accordion .answer-guide-section,
  #faq-accordion .faq-visual-guide :is(th, td),
  #faq-accordion .faq-official-help,
  #faq-accordion .accordion-item--safety,
  .runtime-status,
  #faq-accordion .faq-official-help__phone {
    outline: 1px solid CanvasText;
  }
}

/* 2026-07-19: keep the rich FAQ while making search and long answers easier to scan. */
.search-box #search-input {
  padding-right: 4.7rem;
}

.search-clear {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  min-width: 3.6rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 0.72rem;
  background: transparent;
  /* Sits on .search-filter-controls's fixed light gradient (never flips dark). */
  color: #3A556E;
  font-size: 0.88rem;
  font-weight: var(--font-weight-semibold);
  transform: translateY(-50%);
  cursor: pointer;
}

.search-clear:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

.search-result-status {
  margin: 0.65rem 0 0;
  color: var(--color-text-light);
  font-size: 0.92rem;
  line-height: 1.55;
}

#faq-accordion .accordion-a-body a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .search-clear:hover {
    background: var(--color-primary-lighter);
  }

  #faq-accordion .accordion-a-body a:hover {
    color: var(--color-primary);
  }
}

@media (forced-colors: active) {
  .search-hit {
    background: Highlight;
    color: HighlightText;
  }

  .search-clear {
    outline: 1px solid CanvasText;
  }
}

/* Keep the whole answer visible after its question is opened. */
#faq-accordion .faq-answer-detail {
  margin-top: 0.75rem;
}

#faq-accordion .faq-answer-detail-content {
  margin-top: 0;
}