@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/landing/geist-latin-400.woff2") format("woff2");
}

* { box-sizing: border-box; }
html { scroll-padding-top: 74px; }
.helpPage {
  margin: 0;
  background: #050c0e;
  color: #e5eeeb;
  font-family: "Geist", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK KR", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.helpPage a { color: inherit; text-underline-offset: 5px; }
.helpPage a:hover { color: #e9ef42; }
.helpPage :focus-visible { outline: 2px solid #e9ef42; outline-offset: 5px; }
.helpSkip {
  position: fixed;
  top: 8px;
  left: 16px;
  z-index: 100;
  padding: 8px 16px;
  background: #e9ef42;
  color: #050c0e !important;
  transform: translateY(-180%);
}
.helpSkip:focus { transform: translateY(0); }
.helpHero, .helpLayout, .helpSupport, .helpFooter {
  width: min(1180px, calc(100% - 96px));
  margin-inline: auto;
}
.helpHero { padding: clamp(42px, 6vw, 80px) 0 42px; }
.helpEyebrow {
  margin: 0 0 20px;
  color: #e9ef42;
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.helpHero h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.14;
  text-wrap: balance;
}
.helpIntro { margin: 20px 0 8px; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; }
.helpLead { max-width: 720px; margin: 12px 0 24px; color: #a8bbb9; }
.helpHeroLinks { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.helpHeroLinks > span { color: #92aaa7; font-size: 13px; }
.helpAppLink {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 10px 16px;
  border: 1px solid #e9ef42;
  color: #e9ef42 !important;
  font-size: 14px;
  text-decoration: none;
}
.helpAppLink:hover { background: #e9ef42; color: #050c0e !important; }
.helpNote { max-width: 790px; margin: 24px 0 0; color: #a8bbb9; font-size: 13px; }
.helpLayout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 64px; align-items: start; }
.helpSidebar { position: sticky; top: 74px; max-height: calc(100dvh - 98px); overflow-y: auto; padding-bottom: 10px; }
.helpContents { border-top: 1px solid #395052; }
.helpContents > summary { padding: 18px 0; color: #e5eeeb; cursor: pointer; font-size: 13px; }
.helpContents ol { margin: 0; padding: 0; list-style: none; }
.helpContents a {
  display: flex;
  align-items: baseline;
  gap: 13px;
  min-height: 44px;
  padding: 9px 10px 9px 0;
  color: #a8bbb9;
  font-size: 13px;
  line-height: 1.55;
  text-decoration: none;
}
.helpContents a > span { flex: 0 0 24px; color: #77938f; font-family: "Geist Mono", monospace; font-size: 11px; }
.helpContents a[aria-current="location"], .helpContents a[aria-current="location"] > span { color: #e9ef42; }
.helpArticle { min-width: 0; }
.helpChapter { padding: 28px 0 42px; border-top: 1px solid #395052; scroll-margin-top: 16px; }
.helpChapterHeading { display: flex; align-items: baseline; gap: 18px; margin-bottom: 26px; }
.helpChapterHeading > span { color: #e9ef42; font-family: "Geist Mono", monospace; font-size: 12px; }
.helpChapter h2 { margin: 0; font-size: clamp(25px, 2.7vw, 32px); font-weight: 400; line-height: 1.3; letter-spacing: -.025em; text-wrap: balance; }
.helpChapter h3 { margin: 38px 0 16px; font-size: 20px; font-weight: 500; line-height: 1.4; }
.helpChapter p { margin: 18px 0; color: #bccdc9; }
.helpChapter strong { color: #e5eeeb; font-weight: 600; }
.helpChapter ol, .helpChapter ul { padding-left: 24px; }
.helpChapter li { margin: 12px 0; padding-left: 6px; color: #bccdc9; }
.helpChapter li::marker { color: #e9ef42; }
.helpScreenshot { margin: 12px 0; }
.helpFigure { border: 1px solid #293e40; background: #0a1518; }
.helpFigure > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 16px;
  color: #a8bbb9;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
}
.helpFigure > summary::-webkit-details-marker { display: none; }
.helpFigure > summary:hover { color: #e9ef42; }
.helpFigure > summary > span { flex-shrink: 0; color: #e9ef42; }
.helpFigure[open] > summary { border-bottom: 1px solid #293e40; }
.helpFigure[open] > summary > span { transform: rotate(45deg); }
.helpFigure figure { margin: 0; padding: 20px; text-align: center; }
.helpFigure img { display: block; width: min(100%, 360px); height: auto; margin-inline: auto; }
.helpFigure figcaption { padding-top: 14px; font-size: 12px; }
.helpBack { display: inline-block; margin-top: 24px; color: #92aaa7 !important; font-size: 12px; text-decoration: none; }
.helpBack:hover { color: #e9ef42 !important; }
.helpSupport { padding: 40px 0; border-top: 1px solid #395052; }
.helpSupport h2 { margin: 0 0 12px; font-weight: 400; font-size: 30px; }
.helpSupport p { margin: 0 0 20px; color: #a8bbb9; }
.helpSupport > div { display: flex; flex-wrap: wrap; gap: 16px 36px; font-size: 14px; }
footer.helpFooter { margin-bottom: 32px; padding-top: 20px; font-size: 12px; }

@media (max-width: 1050px) {
  .helpLayout { grid-template-columns: 230px minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 820px) {
  .helpHero, .helpLayout, .helpSupport, .helpFooter { width: calc(100% - 40px); }
  .helpHero { padding-top: 32px; }
  .helpLayout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .helpSidebar { position: static; max-height: none; padding: 0; }
  .helpContents { border-bottom: 1px solid #395052; }
  .helpContents ol { padding-bottom: 16px; }
  .helpContents a { min-height: 44px; font-size: 14px; }
  .helpChapter { padding: 24px 0 36px; }
  .helpChapterHeading { gap: 12px; }
  .helpHero h1 { letter-spacing: -.035em; }
  .helpNote { font-size: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}