/* =========================================================
   탭비트 실전노트 — 고유 디자인 정체성 (트레이딩 터미널)
   styles.css 뒤에 불러 같은 선택자를 덮어씁니다.
   목적: A(탭비트 길잡이)와 한눈에 다른 사이트로 보이게 —
   글꼴·헤더·히어로·섹션제목·카드·버튼·배경을 전부 다르게.
   ========================================================= */

:root {
  /* A 는 Pretendard(둥근 지오메트릭). B 는 시스템 고딕 + 모노 강조로 다른 글자 인상 */
  --sans: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic',
          'Segoe UI', Roboto, sans-serif;
  --mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, Consolas, 'D2Coding', monospace;
  --radius: 6px;
  --radius-lg: 8px;
}

/* ---- 배경: 점무늬 → 얇은 격자선 (터미널 그리드) ---- */
body::before {
  background-image:
    linear-gradient(rgba(0, 224, 176, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 224, 176, 0.05) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
}

/* ---- 타이포 ---- */
body { font-feature-settings: 'tnum' 1; }
h1, h2, h3, h4 { letter-spacing: -0.01em; font-weight: 800; }
/* A 의 형광펜 밑줄 강조 제거 → 민트 글자 + 아래 얇은 선 */
h1 em, h2 em, h3 em, .display em,
.logo__text em, .step__title em {
  background: none !important;
  color: var(--brand-ink) !important;
  box-shadow: inset 0 -2px 0 rgba(0, 224, 176, 0.5);
  padding-bottom: 1px;
}

/* ---- 섹션 꼬리표: 대문자 스페이싱 → 모노 "// label" ---- */
.eyebrow {
  font-family: var(--mono);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--brand-ink);
  padding: 3px 9px;
  border: 1px solid var(--brand-line);
  border-radius: 4px;
  background: rgba(0, 224, 176, 0.06);
}
.eyebrow::before { content: '// '; opacity: 0.7; }
/* A 시그니처 마름모 구분선 제거 */
.diamond { display: none !important; }

/* ---- 헤더: 반투명 → 불투명 + 상단 민트 라인, 로고 각진 사각 ---- */
.site-header {
  background: #080e1a;
  border-top: 2px solid var(--brand);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.logo { font-family: var(--mono); font-weight: 700; letter-spacing: -0.02em; }
.logo__mark {
  border-radius: 3px;
  transform: none;
  background: var(--brand);
  color: #05080d;
  font-family: var(--mono);
}
.logo__mark span { transform: none; }
.logo__text em { box-shadow: none; color: var(--brand-ink) !important; }
.nav a { border-radius: 4px; font-weight: 500; }
.nav a:hover { background: transparent; color: var(--brand-ink); box-shadow: inset 0 -2px 0 var(--brand); border-radius: 0; }
.nav a[aria-current='page'] { box-shadow: inset 0 -2px 0 var(--brand); border-radius: 0; }

/* ---- 버튼: 알약 → 각진, 브랜드는 플랫 민트, 고스트는 민트 아웃라인 ---- */
.btn { border-radius: 5px; font-weight: 700; letter-spacing: 0; }
.btn--brand { background: var(--brand); color: #05110d; }
.btn--brand:hover { filter: none; background: #16f0c0; }
.btn--ghost { border-color: var(--brand-line); color: var(--brand-ink); }
.btn--ghost:hover { border-color: var(--brand); background: rgba(0, 224, 176, 0.08); color: var(--brand-ink); }
.btn--sm, .btn--lg { border-radius: 5px; }
.nav a.btn--brand, .nav a.btn--brand:hover { background: var(--brand); color: #05110d; box-shadow: none; }
.btn--brand { box-shadow: none !important; }

/* ---- 히어로: 배지 각지게, 이미지 사각+코너 프레임, 스탯을 터미널 박스로 ---- */
.hero__badge {
  border-radius: 4px;
  font-family: var(--mono);
  font-weight: 600;
  background: rgba(0, 224, 176, 0.06);
}
.hero::after { display: none; }   /* A 의 대각선 슬래시 제거 */
.hero__visual img { border-radius: 6px; border: 1px solid var(--brand-line); }
.hero__visual::before, .hero__visual::after {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--brand);
  z-index: 2;
}
.hero__visual::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.hero__visual::after  { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.hero__stats {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0c1626;
  padding: 0;
  margin-top: 30px;
}
.hero__stats div {
  flex: 1;
  min-width: 0;
  padding: 16px 18px;
  border-right: 1px solid var(--line);
}
.hero__stats div:last-child { border-right: 0; }
.hero__stats dt { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; }
.hero__stats dd { font-family: var(--mono); font-weight: 700; }

/* ---- 카드: 이모지 박스 → 모노 번호, 테두리 강조 ---- */
.grid { counter-reset: bcard; }
.card__icon { display: none; }
.card {
  border-radius: 6px;
  background: #0c1626;
}
.grid > .card::before {
  counter-increment: bcard;
  content: counter(bcard, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 14px;
  letter-spacing: 0.05em;
}
.card:hover { border-color: var(--brand); transform: none; box-shadow: 0 0 0 1px var(--brand), 0 0 24px rgba(0, 224, 176, 0.12); }
a.card::after { content: '›'; font-family: var(--mono); }

/* ---- 표·숫자: 모노 (터미널 느낌) ---- */
table, .result__value, .result__big, .code, .codebox__label { font-family: var(--mono); }
.result__big { letter-spacing: -0.01em; }

/* ---- 본문 리스트 불릿: 마름모 → 민트 대시 ---- */
.prose ul li::before {
  content: '—';
  background: none !important;
  transform: none !important;
  width: auto; height: auto;
  color: var(--brand-ink);
  left: 0; top: 0;
  font-family: var(--mono);
}
.prose ul li { padding-left: 22px; }

/* 모바일: A 는 히어로 이미지를 본문 위에 크게 놓지만(order:-1),
   B 는 트레이더 랜딩이라 제목·수치를 먼저 보여주고 이미지는 그 아래 작게 */
@media (max-width: 900px) {
  .hero__visual { order: 0 !important; max-width: 380px !important; }
  .hero__stats { flex-wrap: nowrap; }
  .hero__stats dd { font-size: 15px; }
}

/* =========================================================
   문서형 레이아웃 (B 고유 구조) — 좌측 목차 사이드바 + 단일 본문
   상단 가로헤더·히어로 좌우분할·3칸 카드그리드를 버린 배치.
   ========================================================= */
.doc { display: flex; align-items: flex-start; max-width: 1220px; margin-inline: auto; }
.doc__side {
  position: sticky; top: 0; align-self: flex-start;
  width: 256px; flex: none; height: 100vh; box-sizing: border-box;
  padding: 24px 20px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 20px; background: #080e1a;
}
.doc__brand { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.doc__brand .logo__mark { width: 26px; height: 26px; }
.doc__side-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.doc__toc { display: flex; flex-direction: column; gap: 1px; }
.doc__toc a { display: flex; gap: 9px; font-size: 14px; color: var(--text-2); padding: 8px 10px; border-radius: 5px; border-left: 2px solid transparent; }
.doc__toc a:hover, .doc__toc a.is-active { color: var(--brand-ink); border-left-color: var(--brand); background: rgba(0, 224, 176, 0.05); }
.doc__toc-num { font-family: var(--mono); color: var(--text-3); font-size: 12px; }
.doc__side .btn { width: 100%; }
.doc__side-foot { margin-top: auto; font-size: 11px; color: var(--text-3); line-height: 1.6; }
.doc__main { flex: 1; min-width: 0; padding: 44px clamp(20px, 4vw, 60px) 0; max-width: 880px; }

.dochead { padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.dochead__kicker { font-family: var(--mono); color: var(--brand-ink); font-size: 13px; }
.dochead h1 { font-size: clamp(28px, 4.4vw, 46px); margin: 12px 0 14px; }
.dochead__sum { color: var(--text-2); font-size: clamp(16px, 1.9vw, 18px); line-height: 1.75; max-width: 62ch; }
.dochead__sum strong { color: var(--text); }
.fee-strip { display: flex; flex-wrap: wrap; gap: 0; margin-top: 26px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.fee-strip div { flex: 1; min-width: 130px; padding: 14px 16px; border-right: 1px solid var(--line); background: #0c1626; }
.fee-strip div:last-child { border-right: 0; }
.fee-strip dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-3); }
.fee-strip dd { font-family: var(--mono); font-weight: 700; font-size: 18px; margin-top: 5px; color: var(--text); }

.docsec { padding: 42px 0; border-bottom: 1px solid var(--line-soft); scroll-margin-top: 16px; }
.docsec > h2 { font-size: clamp(21px, 3vw, 28px); display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.docsec > h2::before { content: attr(data-n); font-family: var(--mono); font-size: 14px; color: var(--brand-ink); font-weight: 700; }
.docsec__intro { color: var(--text-2); font-size: 15.5px; line-height: 1.8; max-width: 66ch; margin-bottom: 22px; }

/* 카드그리드 대체 — 왼쪽 민트 룰이 붙은 문서 리스트 */
.doclist { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.doclist > a, .doclist > div { padding: 18px 4px 18px 18px; border-bottom: 1px solid var(--line-soft); border-left: 2px solid var(--brand-line); display: block; transition: border-left-color 0.16s, background 0.16s; }
.doclist > a:hover { border-left-color: var(--brand); background: rgba(0, 224, 176, 0.04); }
.doclist h3 { font-size: 16px; margin-bottom: 5px; }
.doclist p { color: var(--text-2); font-size: 14.5px; line-height: 1.65; }
.doclist a[href] h3 { color: var(--text); }

/* 스텝 — 세로 행(번호 + 썸네일 + 텍스트). A 의 10칸 그리드와 완전히 다른 배치 */
.steplist { display: flex; flex-direction: column; gap: 12px; }
.steprow { display: grid; grid-template-columns: 48px 116px 1fr; gap: 16px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #0c1626; cursor: pointer; transition: border-color 0.16s; }
.steprow:hover { border-color: var(--brand); }
.steprow__n { font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--brand-ink); text-align: center; }
.steprow img { width: 116px; height: auto; border-radius: 4px; border: 1px solid var(--line); display: block; }
.steprow__t b { display: block; margin-bottom: 3px; font-size: 15px; }
.steprow__t span { color: var(--text-2); font-size: 13.5px; line-height: 1.5; }

.doc-cta { margin: 44px 0; padding: 28px; border: 1px solid var(--brand-line); border-radius: 8px; background: #0c1626; }
.doc-cta h2 { font-size: 22px; margin-bottom: 10px; }
.doc-cta p { color: var(--text-2); margin-bottom: 18px; }



/* ===== 내부 페이지: A 식 섹션을 문서형으로 (doc__main 안에서만) ===== */
.doc__main .wrap { max-width: none; padding-inline: 0; margin: 0; }
.doc__main .section { padding-block: 36px; border-bottom: 1px solid var(--line-soft); }
.doc__main .section--tight { padding-block: 30px; }
.doc__main .section--alt { background: transparent; }
.doc__main .page-hero { padding: 0 0 30px; border-bottom: 1px solid var(--line); text-align: left; }
.doc__main .section-head { text-align: left; max-width: none; margin-inline: 0; margin-bottom: 22px; }
.doc__main .section-head--center { text-align: left; margin-inline: 0; }
.doc__main .grid--3, .doc__main .next-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.doc__main .grid--2 { grid-template-columns: 1fr; gap: 24px; }
/* 스크린샷 이미지는 본문 폭을 다 먹지 않게 고정폭·왼쪽 정렬, 지그재그(좌우 번갈이) 끔 */
.doc__main .step__media { max-width: 320px; margin: 0; box-shadow: none; }
.doc__main .step { grid-template-columns: 320px 1fr; align-items: start; gap: 30px; }
.doc__main .step:nth-child(even) { grid-template-columns: 320px 1fr; }
.doc__main .step:nth-child(even) .step__media { order: 0; }
.doc__main .steps { gap: 40px; }
.doc__main .step__title { font-size: clamp(20px, 2.6vw, 26px); }
.doc__main .shots { gap: 12px; }
.doc__main .cta { text-align: left; }

/* ===== 혜택 팝업 (A 의 상단 배너 대체) ===== */
.popup { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.popup.is-open { display: flex; }
.popup__backdrop { position: absolute; inset: 0; background: rgba(3, 7, 14, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.popup__box { position: relative; width: 100%; max-width: 420px; background: #0c1626; border: 1px solid var(--brand-line); border-top: 3px solid var(--brand); border-radius: 10px; padding: 30px 26px 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5); animation: popupIn 0.22s ease; }
@keyframes popupIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.popup__x { position: absolute; top: 12px; right: 14px; background: none; border: 0; color: var(--text-3); font-size: 24px; line-height: 1; cursor: pointer; }
.popup__x:hover { color: var(--text); }
.popup__kicker { font-family: var(--mono); color: var(--brand-ink); font-size: 12.5px; }
.popup__box h2 { font-size: 21px; margin: 10px 0 12px; }
.popup__body { color: var(--text-2); font-size: 14.5px; line-height: 1.7; margin-bottom: 20px; }
.popup__box .btn { width: 100%; }
.popup__later { display: block; width: 100%; margin-top: 10px; background: none; border: 0; color: var(--text-3); font-size: 13px; cursor: pointer; padding: 6px; }
.popup__later:hover { color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .popup__box { animation: none; } }

/* ===== 모바일: 사이드바 → 상단 바 + 가로 스크롤 메뉴 ===== */
@media (max-width: 900px) {
  .doc { display: block; }
  .doc__side { position: sticky; top: 0; z-index: 60; flex-direction: row; flex-wrap: wrap; align-items: center; height: auto; width: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 14px; gap: 10px; }
  .doc__brand { margin-right: auto; }
  .doc__side-label, .doc__side-foot { display: none; }
  .doc__toc { order: 3; width: 100%; flex-flow: row nowrap; overflow-x: auto; gap: 2px; }
  .doc__toc a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; padding: 7px 9px; flex: none; }
  .doc__toc a.is-active { border-left: 0; border-bottom-color: var(--brand); }
  .doc__side .btn { width: auto; padding: 8px 14px; font-size: 13px; }
  .doc__main { padding: 24px 16px 0; max-width: none; }
  .doc__main .step, .doc__main .step:nth-child(even), .doc__main .grid--2, .doc__main .grid--3, .doc__main .next-grid { grid-template-columns: 1fr; }
  .doc__main .step__media { max-width: 300px; }
  .steprow { grid-template-columns: 40px 80px 1fr; gap: 12px; }
  .steprow img { width: 80px; }
}