/* AmaGris 홈페이지 — 다크 테마(앱 색감과 통일, 배경은 한 톤 밝게) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #26262d; color: #dcdcdc;
  /* 본문 폰트 = Pretendard(자체 호스팅, /fonts/pretendard.css). 못 받으면 기존 시스템 폰트로 폴백. */
  font-family: 'Pretendard', "Segoe UI", "Malgun Gothic", system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: #5aa9ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* nav */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; background: #202027; border-bottom: 1px solid #38383f;
  position: sticky; top: 0; z-index: 10;
}
.nav .brand { font-size: 20px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 9px; }
/* 로고는 SVG(자체적으로 둥근 모서리)라 border-radius 를 따로 주지 않는다. */
.nav .brand .brand-mark { width: 24px; height: 24px; display: block; }
.nav .brand:hover { text-decoration: none; }
.nav nav a { margin-left: 20px; color: #c4c4c4; }
.nav nav a:hover { color: #fff; text-decoration: none; }
.nav nav a.active { color: #fff; border-bottom: 2px solid #4a86e8; padding-bottom: 3px; }
.nav nav a.active:hover { text-decoration: none; }
.btn-sm {
  background: #2d6cdf; color: #fff !important; padding: 6px 14px;
  border-radius: 6px; font-size: 14px;
}
/* 언어 전환 — 다른 언어로 넘어가는 링크(현재 언어가 아니라 "바꿀 언어"를 표시한다) */
.nav nav a.lang {
  margin-left: 16px; padding: 5px 11px; font-size: 13px; color: #b8b8b8;
  border: 1px solid #4a4a54; border-radius: 6px;
}
.nav nav a.lang:hover { color: #fff; border-color: #7b7b88; text-decoration: none; }
.nav nav a.lang::before { content: "\1F310"; margin-right: 6px; opacity: .75; }

/* layout */
main { max-width: 960px; margin: 0 auto; padding: 0 24px; }
.foot { text-align: center; color: #808080; padding: 40px 0; font-size: 13px; }

/* hero */
.hero {
  display: flex; gap: 32px; align-items: center; padding: 56px 0 40px;
  flex-wrap: wrap;
}
.hero-text { flex: 1 1 340px; }
.hero-text h1 { font-size: 44px; margin: 0 0 12px; color: #fff; }
.tagline { font-size: 17px; color: #b6b6b6; margin: 0 0 24px; }
.cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.btn {
  background: #2d6cdf; color: #fff !important; padding: 11px 22px;
  border-radius: 8px; font-weight: 600; font-size: 15px;
}
.btn:hover { background: #3a78ea; text-decoration: none; }
.btn-ghost { color: #d0d0d0 !important; padding: 11px 18px; border: 1px solid #48484f; border-radius: 8px; }
.btn-ghost:hover { border-color: #777; text-decoration: none; }
.ver { color: #8a8a8a; font-size: 14px; }
/* 앱 아이콘(public/img/main.png). 파일이 없으면 index.pug 의 onerror 가 이 블록을 숨긴다.
   테두리·radius 를 주지 않는다 — 이미지 자체가 라운드 사각형이고 바깥이 투명이라
   사각 테두리를 씌우면 모서리가 어긋나 보인다. 대신 drop-shadow 로 배경에서 띄운다. */
.hero-shot { flex: 0 1 300px; }
.hero-shot img {
  display: block; width: 240px; max-width: 100%; margin: 0 auto;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45));
}

/* features */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 24px 0 8px; }
.feat { background: #30303a; border: 1px solid #3f3f49; border-radius: 10px; padding: 18px 20px; }
.feat h3 { margin: 0 0 6px; color: #e6dfa8; font-size: 16px; display: flex; align-items: center; gap: 9px; }
.feat p { margin: 0; color: #bcbcbc; font-size: 14px; }
/* 카드 제목 아이콘 — 정의는 views/icons.svg 스프라이트. stroke 가 currentColor 라 제목 색을 따라간다. */
.icon-sprite { display: none; }
.feat h3 .fi {
  flex: 0 0 auto; width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* quick start */
.quick { padding: 32px 0 8px; }
.quick h2 { color: #fff; }
.quick ol { color: #d0d0d0; }
.quick .more { color: #9a9a9a; }

/* 투자 고지 — 눈에는 띄되 본문을 가리지 않게 낮은 채도로. 금융 성격상 랜딩에 상시 노출한다. */
.notice { padding: 8px 0 48px; }
.notice p {
  margin: 0; padding: 14px 16px; font-size: 13px; color: #a2a2a2;
  background: #2b2b33; border: 1px solid #3f3f49; border-left: 3px solid #8a7a3f; border-radius: 8px;
}

/* guide 2단 레이아웃 (좌측 목차 + 본문) */
/* 목차 클릭 시 스크롤 애니메이션 없이 즉시 이동한다(scroll-behavior: smooth 미사용). */
.guide-layout { max-width: 1160px; margin: 0 auto; padding: 0 24px; display: flex; gap: 34px; align-items: flex-start; }
.guide-layout .guide { flex: 1 1 auto; min-width: 0; }
.toc { flex: 0 0 220px; position: sticky; top: 60px; align-self: flex-start; max-height: calc(100vh - 80px); overflow-y: auto; padding: 32px 0; }
/* 목차 글자색은 본문(body #dcdcdc)과 같은 톤으로 맞춘다 — 흐리면 읽기 어렵다.
   대신 레벨 구분을 색 대비(흐리게)로 하지 않으므로, 굵기 · 들여쓰기 · 그룹 간격 · 서브 항목 앞
   가이드 선으로 계층을 만든다. h1=문서 제목 / h2=메인 목차 / h3=서브 목차. */
.toc-title { color: #a0a0a0; font-size: 11px; letter-spacing: .6px; margin: 0 0 10px 10px; text-transform: uppercase; }
.toc nav { display: flex; flex-direction: column; }
.toc a { display: block; color: #dcdcdc; font-size: 14px; line-height: 1.55; padding: 4px 10px; border-left: 2px solid transparent; text-decoration: none; }
.toc a:hover { color: #fff; text-decoration: none; }
.toc a.active { color: #fff; border-left-color: #4a86e8; background: rgba(255,255,255,0.05); }
/* 문서 제목 — 목차 맨 위 1개. 아래 항목들과 선으로 끊어 준다. */
.toc a.toc-l1 {
  font-weight: 700; color: #fff; font-size: 15px;
  margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid #3c3c45;
}
/* 메인 목차(h2) — 굵게 + 위쪽 여백으로 그룹의 시작임을 보인다. */
.toc a.toc-l2 { font-weight: 600; color: #f2f2f2; margin-top: 10px; }
/* 서브 목차(h3) — 한 단 들여쓰고 보통 굵기. 왼쪽 세로선으로 상위 그룹에 속함을 표시.
   (a 의 border-left 는 active 표시가 쓰므로 여기서는 ::before 로 그린다) */
.toc a.toc-l3 {
  position: relative; padding-left: 26px; font-weight: 400; font-size: 13.5px;
}
.toc a.toc-l3::before {
  content: ""; position: absolute; left: 14px; top: 0; bottom: 0;
  border-left: 1px solid #4a4a54;
}
.guide h1, .guide h2, .guide h3 { scroll-margin-top: 72px; }
/* 본문 상호 참조 링크(#슬러그)가 가리키는 앵커 — 헤딩 앞의 빈 span. 자리를 차지하지 않되
   점프했을 때 sticky nav 에 제목이 가리지 않도록 헤딩과 같은 여백을 준다. build-guide.js 가 생성. */
.guide .anchor { display: block; height: 0; scroll-margin-top: 72px; }
@media (max-width: 860px) {
  .guide-layout { display: block; padding: 0 24px; }
  .toc { display: none; }
}

/* guide (markdown) */
.guide { padding: 32px 0 56px; }
.guide h1 { color: #fff; border-bottom: 1px solid #3c3c45; padding-bottom: 10px; }
.guide h2 { color: #fff; margin-top: 32px; border-bottom: 1px solid #34343d; padding-bottom: 6px; }
.guide h3, .guide h4 { color: #e6e6e6; }
.guide code { background: #3a3a42; padding: 1px 6px; border-radius: 4px; color: #e0a07a; font-size: 90%; }
.guide pre { background: #1a1a1f; border: 1px solid #3c3c45; border-radius: 8px; padding: 14px; overflow-x: auto; }
.guide pre code { background: none; padding: 0; color: #dcdcdc; }
.guide table { border-collapse: collapse; width: 100%; margin: 14px 0; display: block; overflow-x: auto; }
.guide th, .guide td { border: 1px solid #46464f; padding: 7px 10px; text-align: left; font-size: 14px; }
.guide th { background: #313139; color: #f0f0f0; }
.guide blockquote { border-left: 3px solid #4a4a54; margin: 12px 0; padding: 4px 14px; color: #a6a6a6; }
.guide a { color: #5aa9ff; }

@media (max-width: 640px) {
  .features { grid-template-columns: 1fr; }
  .hero-text h1 { font-size: 34px; }
}

/*----------------- Scrollbar (webkit, 전역) -----------------------------------
   AmaGris 앱과 동일한 다크 스크롤바 — 원본: AmaGrisClient/Template/Theme/black/common.css.
   ::-webkit-scrollbar 는 전역 셀렉터라 별도 한정 없이 모든 스크롤 영역(페이지 본문·가이드 목차·
   코드 블록·표)에 적용된다. 화살표 이미지는 앱 Assets 에서 public/img/scroll/ 로 복사해 왔다.
   ------------------------------------------------------------------------------ */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: #404040;
}

::-webkit-scrollbar-thumb {
  background-color: #777777;
  border: 2px solid transparent;
  border-radius: 2px;
  background-clip: content-box;
}

/* 가로 + 세로 스크롤바가 동시에 있는 영역의 우하단 교차점 */
::-webkit-scrollbar-corner {
  background-color: #303030;
}

/* 스크롤바 화살표 버튼 (상단↑ / 하단↓ / 좌측← / 우측→).
   Chromium 기본값이 사실상 hidden 이라 display:block + 명시적 사이즈로 강제 표시한다.
   ★ :start / :end 위치 한정 필수 — :vertical:decrement 만 쓰면 increment 와 둘 다 상단에
     같이 그려져 상하 화살표가 위에 붙어 버린다. 가로도 동일. */
::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment {
  display: block;
  background-color: #404040;
  background-position: center center;
  background-repeat: no-repeat;
}

::-webkit-scrollbar-button:vertical:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment   { height: 12px; }

::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment { width: 12px; }

::-webkit-scrollbar-button:vertical:start:decrement    { background-image: url('/img/scroll/scroll_up_arrow.png'); }
::-webkit-scrollbar-button:vertical:end:increment      { background-image: url('/img/scroll/scroll_down_arrow.png'); }
::-webkit-scrollbar-button:horizontal:start:decrement  { background-image: url('/img/scroll/scroll_left_arrow.png'); }
::-webkit-scrollbar-button:horizontal:end:increment    { background-image: url('/img/scroll/scroll_right_arrow.png'); }

/* Firefox 등 ::-webkit-scrollbar 를 지원하지 않는 브라우저용 근사치(색만 맞춘다. 화살표는 없음).
   앱은 Electron(Chromium) 전용이라 원본에 없던 규칙이지만, 홈페이지는 다른 브라우저로도 열린다.
   ★ @supports 로 감싸는 이유 — Chromium 121+ 는 표준 scrollbar-color 를 지원하고, 이 속성이
     선언되면 위의 ::-webkit-scrollbar 커스터마이즈가 통째로 무시된다. 조건 없이 쓰면 안 된다. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: auto; scrollbar-color: #777777 #404040; }
}