/* LIVON Help Center — scoped to #help. Same editorial language as the other light LIVON screens (white, ink, pills). */
html[data-lv-view="help"],
html[data-lv-view="help"] body {
  height: auto !important;
  /* visible (not auto) keeps the viewport as the scroller */
  overflow: visible !important;
  overflow-x: clip !important;
}
html[data-lv-view="help"] main {
  height: auto !important;
  overflow: visible !important;
}
html[data-lv-view="help"] main > #help {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
html:not([data-lv-view="help"]) main > #help { display: none; }

#help {
  background: #fff;
  color: #0a0a0a;
  font-family: "Noto Sans KR", "Noto Sans", Pretendard, sans-serif;
  min-height: 100svh;
  padding: calc(var(--gnav-h, 74px) + 2.5rem) 0 5rem;
}
#help :where(h1, h2, h3, p, li, a, span, button, strong, small, label, input) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
#help .lv-hp-inner {
  width: min(880px, calc(100% - clamp(1.25rem, 4vw, 3rem) * 2));
  margin: 0 auto;
}
#help .lv-hp-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #737373;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
#help .lv-hp-title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.12;
}
#help .lv-hp-title--md { font-size: clamp(1.55rem, 3.4vw, 2.25rem); letter-spacing: -0.03em; line-height: 1.2; }
#help .lv-hp-title:focus { outline: none; }
#help .lv-hp-lead { margin: 0.85rem 0 0; color: #525252; line-height: 1.65; }
#help .lv-hp-head { margin-bottom: 1.5rem; }

#help .lv-hp-search { display: flex; gap: 0.5rem; margin: 0 0 2rem; }
#help .lv-hp-search input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 1rem;
  border: 1px solid #0a0a0a;
  border-radius: 0;
  background: #fff;
  color: #0a0a0a;
  font: inherit;
}
#help .lv-hp-search--lg input { min-height: 56px; font-size: 1.05rem; }
#help .lv-hp-search input:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; }

#help .lv-hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid #0a0a0a;
  border-radius: 999px;
  background: #fff;
  color: #0a0a0a;
  font: inherit;
  font-weight: 650;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
}
#help .lv-hp-btn--dark { background: #0a0a0a; color: #fff; }
#help .lv-hp-search .lv-hp-btn { border-radius: 0; flex: 0 0 auto; padding: 0 1.4rem; }
#help .lv-hp-btn:focus-visible,
#help a:focus-visible,
#help button:focus-visible { outline: 2px solid #0a0a0a; outline-offset: 2px; }

#help .lv-hp-sec { margin-top: 2.75rem; }
#help .lv-hp-sec > h2 { margin: 0 0 0.9rem; font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; }
#help .lv-hp-sec > .lv-hp-lead { margin: -0.4rem 0 1rem; }

#help .lv-hp-cats { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
#help .lv-hp-cats a {
  display: grid;
  gap: 0.3rem;
  height: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid #e5e5e5;
  color: inherit;
  text-decoration: none;
}
#help .lv-hp-cats a:hover { border-color: #0a0a0a; }
#help .lv-hp-cats strong { font-size: 1.02rem; }
#help .lv-hp-cats span { color: #525252; font-size: 0.9rem; line-height: 1.5; }
#help .lv-hp-cats small { color: #737373; font-size: 0.8rem; }

#help .lv-hp-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #e5e5e5; }
#help .lv-hp-list li { border-bottom: 1px solid #e5e5e5; }
#help .lv-hp-list a {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem 0.25rem;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
#help .lv-hp-list a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
#help .lv-hp-list strong { font-weight: 650; line-height: 1.45; }
#help .lv-hp-list span { color: #525252; font-size: 0.92rem; line-height: 1.55; }
#help .lv-hp-list small { color: #737373; font-size: 0.8rem; }
#help .lv-hp-sec > p { margin: 1rem 0 0; }

#help .lv-hp-status { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
#help .lv-hp-status li { padding: 0.9rem 1rem; border: 1px solid #e5e5e5; }
#help .lv-hp-status__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; }
#help .lv-hp-status p { margin: 0.4rem 0 0; color: #525252; font-size: 0.92rem; line-height: 1.55; }
#help .lv-hp-status a { color: #0a0a0a; font-weight: 650; text-underline-offset: 3px; }
#help .lv-hp-badge { display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0 0.6rem; border: 1px solid #0a0a0a; font-size: 0.78rem; font-weight: 650; white-space: nowrap; }
#help .lv-hp-badge--available { background: #0a0a0a; color: #fff; }
#help .lv-hp-badge--local { background: #fff; color: #0a0a0a; }
#help .lv-hp-badge--off { border-style: dashed; color: #525252; border-color: #a3a3a3; }

#help .lv-hp-crumbs ol { margin: 0 0 1.25rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.85rem; color: #737373; }
#help .lv-hp-crumbs li + li::before { content: "›"; margin-right: 0.5rem; color: #a3a3a3; }
#help .lv-hp-crumbs a { color: #0a0a0a; text-underline-offset: 3px; display: inline-block; padding: 0.35rem 0; }
#help .lv-hp-crumbs span { display: inline-block; padding: 0.35rem 0; }

#help .lv-hp-faq { border-top: 1px solid #0a0a0a; }
#help .lv-hp-faq__item { border-bottom: 1px solid #e5e5e5; }
#help .lv-hp-faq__q { margin: 0; font-size: 1rem; }
#help .lv-hp-faq__q button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 56px;
  padding: 0.85rem 0.25rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 650;
  text-align: left;
  line-height: 1.45;
  cursor: pointer;
}
#help .lv-hp-faq__q button::after { content: "+"; flex: 0 0 auto; font-weight: 400; font-size: 1.25rem; line-height: 1; }
#help .lv-hp-faq__q button[aria-expanded="true"]::after { content: "–"; }
#help .lv-hp-faq__a { padding: 0 0.25rem 1.1rem; }
#help .lv-hp-faq__a p { margin: 0 0 0.6rem; color: #404040; line-height: 1.7; }
#help .lv-hp-faq__a a { color: #0a0a0a; font-weight: 650; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }

#help .lv-hp-article > p { margin: 1rem 0 0; line-height: 1.8; color: #262626; }
#help .lv-hp-article .lv-hp-answer { margin-top: 1.25rem; padding: 1.1rem 1.2rem; border-left: 3px solid #0a0a0a; background: #f6f6f6; font-size: 1.05rem; font-weight: 550; color: #0a0a0a; line-height: 1.7; }
#help .lv-hp-block { margin-top: 1.75rem; }
#help .lv-hp-block h2 { margin: 0 0 0.6rem; font-size: 1.05rem; font-weight: 750; }
#help .lv-hp-block p { margin: 0; line-height: 1.8; color: #262626; }
#help .lv-hp-block ul,
#help .lv-hp-block ol { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.45rem; line-height: 1.7; color: #262626; }
#help .lv-hp-callout { margin-top: 1.5rem !important; padding: 0.9rem 1rem; border: 1px dashed #a3a3a3; }
#help .lv-hp-callout strong { margin-right: 0.35rem; }
#help .lv-hp-feature { margin-top: 1.75rem !important; }

#help .lv-hp-empty { padding: 1.25rem 1.2rem; border: 1px dashed #a3a3a3; }
#help .lv-hp-empty h2 { margin: 0 0 0.6rem; font-size: 1.15rem; }
#help .lv-hp-empty ul { margin: 0 0 1rem; padding-left: 1.2rem; line-height: 1.7; color: #404040; }
#help .lv-hp-empty p { margin: 1rem 0 0.5rem; font-weight: 650; }
#help .lv-hp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
#help .lv-hp-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.95rem; border: 1px solid #d4d4d4; border-radius: 999px; color: #0a0a0a; text-decoration: none; font-size: 0.9rem; font-weight: 550; }
#help .lv-hp-chips a:hover { border-color: #0a0a0a; }

#help .lv-hp-note { margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid #e5e5e5; color: #737373; font-size: 0.88rem; line-height: 1.6; }
#help .lv-hp-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #e5e5e5; }

/* contextual help links placed on other screens */
.lv-help-link { color: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.lv-help-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 480px) {
  #help { padding-top: calc(var(--gnav-h, 74px) + 1.5rem); }
  #help .lv-hp-search { flex-wrap: wrap; }
  #help .lv-hp-search input { flex: 1 1 100%; }
  #help .lv-hp-search .lv-hp-btn { flex: 1 1 auto; }
  #help .lv-hp-foot .lv-hp-btn { flex: 1 1 auto; }
}

/* shown only when JavaScript is off (<noscript> in index.html): links to the static guide pages */
.lv-noscript { position: relative; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.1rem; padding: 0.9rem 1.25rem; background: #fff; color: #0a0a0a; font-family: "Noto Sans KR", system-ui, sans-serif; }
.lv-noscript p { flex: 1 1 100%; margin: 0; font-size: 0.92rem; }
.lv-noscript a { display: inline-flex; align-items: center; min-height: 44px; color: #0a0a0a; font-weight: 650; }