/* ============================================================
   메리츠증권 Open API 포털 — 모던 핀테크 디자인 시스템
   (신규 페이지 전용, 기존 리소스와 독립, 애니메이션 미사용)
   ============================================================ */

:root {
  /* 색상 토큰 */
  --oa-ink: #101828;          /* 본문 잉크 */
  --oa-ink-soft: #344054;
  --oa-muted: #667085;
  --oa-faint: #98a2b3;
  --oa-line: #e4e7ec;
  --oa-line-strong: #d0d5dd;
  --oa-bg: #f7f8fa;           /* 페이지 배경 */
  --oa-surface: #ffffff;      /* 카드 배경 */
  --oa-surface-sub: #f9fafb;
  --oa-primary: #e2231a;      /* 메리츠 레드 */
  --oa-primary-dark: #b91c14;
  --oa-primary-tint: #fef3f2;
  --oa-navy: #0f1b3d;         /* 딥 네이비 (히어로/코드) */
  --oa-blue: #175cd3;
  --oa-blue-tint: #eff8ff;
  --oa-green: #067647;
  --oa-green-tint: #ecfdf3;
  --oa-amber: #b54708;
  --oa-amber-tint: #fffaeb;

  --oa-radius: 12px;
  --oa-radius-sm: 8px;
  --oa-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --oa-shadow-md: 0 4px 16px rgba(16, 24, 40, .08);
  --oa-font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --oa-mono: "JetBrains Mono", "Consolas", "Courier New", monospace;
}

/* ---------- 베이스 ---------- */
.oa-body {
  margin: 0;
  background: var(--oa-bg);
  color: var(--oa-ink);
  font-family: var(--oa-font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.oa-body *,
.oa-body *::before,
.oa-body *::after { box-sizing: border-box; }

.oa-body a { color: inherit; text-decoration: none; }
.oa-body button { font-family: inherit; cursor: pointer; }
.oa-body img { max-width: 100%; }

.oa-container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* ---------- 상단 GNB ---------- */
.oa-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--oa-surface);
}
.oa-header-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 36px; height: 64px;
}
.oa-logo { display: flex; align-items: baseline; gap: 8px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.oa-logo .brand { color: var(--oa-primary); }
.oa-logo .prod { color: var(--oa-ink); }
.oa-gnb { display: flex; gap: 4px; flex: 1; }
.oa-gnb a {
  padding: 8px 14px; border-radius: var(--oa-radius-sm);
  font-weight: 600; font-size: 15px; color: var(--oa-ink-soft);
}
.oa-gnb a:hover { background: var(--oa-surface-sub); color: var(--oa-ink); }
.oa-gnb a.active { color: var(--oa-primary); background: var(--oa-primary-tint); }
.oa-header-actions { display: flex; align-items: center; gap: 8px; }

/* ---------- 버튼 ---------- */
.oa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--oa-radius-sm);
  font-size: 14px; font-weight: 700; border: 1px solid transparent;
  white-space: nowrap;
}
.oa-btn-primary { background: var(--oa-primary); color: #fff; }
.oa-btn-primary:hover { background: var(--oa-primary-dark); }
.oa-btn-dark { background: var(--oa-navy); color: #fff; }
.oa-btn-dark:hover { background: #1c2b5a; }
.oa-btn-outline { background: var(--oa-surface); color: var(--oa-ink-soft); border-color: var(--oa-line-strong); }
.oa-btn-outline:hover { border-color: var(--oa-faint); background: var(--oa-surface-sub); }
.oa-btn-ghost { background: transparent; color: var(--oa-ink-soft); }
.oa-btn-ghost:hover { background: var(--oa-surface-sub); }
.oa-btn-sm { padding: 5px 12px; font-size: 13px; border-radius: 6px; }
.oa-btn-lg { padding: 13px 28px; font-size: 16px; border-radius: 10px; }
.oa-btn-block { width: 100%; }
.oa-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 페이지 헤더 ---------- */
.oa-page { padding: 48px 0 80px; }
.oa-breadcrumb { font-size: 13px; color: var(--oa-faint); margin-bottom: 10px; }
.oa-breadcrumb b { color: var(--oa-muted); font-weight: 600; }
.oa-page-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.oa-page-desc { color: var(--oa-muted); margin: 0 0 20px; font-size: 15px; }

/* ---------- 카드 ---------- */
.oa-card {
  background: var(--oa-surface); border: 1px solid var(--oa-line);
  border-radius: var(--oa-radius); box-shadow: var(--oa-shadow);
}
.oa-card-pad { padding: 28px; }
.oa-card-title { font-size: 17px; font-weight: 800; margin: 0 0 16px; letter-spacing: -.01em; }
.oa-grid { display: grid; gap: 20px; }
.oa-grid-2 { grid-template-columns: repeat(2, 1fr); }
.oa-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .oa-grid-2, .oa-grid-3 { grid-template-columns: 1fr; } }

/* 넘버링 피처 카드 */
.oa-feature { padding: 24px; }
.oa-feature .num {
  display: inline-flex; width: 34px; height: 34px; border-radius: 50%;
  background: var(--oa-primary-tint); color: var(--oa-primary);
  align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
  margin-bottom: 14px;
}
.oa-feature h4 { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.oa-feature p { margin: 0; color: var(--oa-muted); font-size: 14px; }

/* ---------- 탭 ---------- */
.oa-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--oa-line); margin-bottom: 32px; }
.oa-tabs .oa-tab {
  padding: 12px 20px; margin-bottom: -2px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-size: 16px; font-weight: 700; color: var(--oa-muted);
}
.oa-tabs .oa-tab:hover { color: var(--oa-ink); }
.oa-tabs .oa-tab.active { color: var(--oa-primary); border-bottom-color: var(--oa-primary); }
.oa-tab-panel { display: none; }
.oa-tab-panel.active { display: block; }

/* 세그먼트(서브탭) */
.oa-segment { display: inline-flex; background: var(--oa-surface-sub); border: 1px solid var(--oa-line); border-radius: 10px; padding: 4px; gap: 4px; }
.oa-segment button {
  border: 0; background: transparent; padding: 8px 20px; border-radius: 7px;
  font-size: 14px; font-weight: 700; color: var(--oa-muted);
}
.oa-segment button.active { background: var(--oa-surface); color: var(--oa-ink); box-shadow: var(--oa-shadow); }

/* ---------- 폼 ---------- */
.oa-field { margin-bottom: 20px; }
.oa-label { display: block; font-size: 13px; font-weight: 700; color: var(--oa-ink-soft); margin-bottom: 7px; }
.oa-input, .oa-select, .oa-textarea {
  width: 100%; padding: 11px 14px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--oa-line-strong); border-radius: var(--oa-radius-sm);
  background: var(--oa-surface); color: var(--oa-ink);
}
.oa-input:focus, .oa-select:focus, .oa-textarea:focus {
  outline: none; border-color: var(--oa-primary); box-shadow: 0 0 0 3px rgba(226, 35, 26, .12);
}
.oa-textarea { resize: vertical; min-height: 220px; line-height: 1.7; }
.oa-char-count { text-align: right; font-size: 12px; color: var(--oa-faint); margin-top: 5px; }
.oa-radio-group { display: flex; gap: 20px; align-items: center; }
.oa-radio-group label { display: inline-flex; gap: 7px; align-items: center; font-size: 14px; cursor: pointer; }
.oa-help { font-size: 13px; color: var(--oa-faint); margin-top: 6px; }

/* ---------- 테이블 ---------- */
.oa-table-wrap { overflow-x: auto; }
.oa-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.oa-table th {
  text-align: left; padding: 12px 14px; background: var(--oa-surface-sub);
  color: var(--oa-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid var(--oa-line);
  white-space: nowrap;
}
.oa-table td { padding: 14px; border-bottom: 1px solid var(--oa-line); vertical-align: middle; }
.oa-table tr:last-child td { border-bottom: 0; }
.oa-table tbody tr:hover { background: var(--oa-surface-sub); }

/* ---------- 배지 ---------- */
.oa-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.oa-badge-green { background: var(--oa-green-tint); color: var(--oa-green); }
.oa-badge-amber { background: var(--oa-amber-tint); color: var(--oa-amber); }
.oa-badge-blue { background: var(--oa-blue-tint); color: var(--oa-blue); }
.oa-badge-red { background: var(--oa-primary-tint); color: var(--oa-primary); }
.oa-badge-gray { background: var(--oa-surface-sub); color: var(--oa-muted); }

/* ---------- 코드 블록 ---------- */
.oa-code {
  position: relative; background: var(--oa-navy); color: #e6eaf3;
  border-radius: var(--oa-radius); padding: 20px 22px;
  font-family: var(--oa-mono); font-size: 13.5px; line-height: 1.75;
  overflow-x: auto;
}
.oa-code pre { margin: 0; font-family: inherit; white-space: pre; }
.oa-code .oa-copy {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255, 255, 255, .1); color: #cdd5e4;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px;
  padding: 4px 12px; font-size: 12px; font-weight: 700;
}
.oa-code .oa-copy:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* ---------- 아코디언 ---------- */
.oa-accordion { border: 1px solid var(--oa-line); border-radius: var(--oa-radius); background: var(--oa-surface); overflow: hidden; }
.oa-accordion + .oa-accordion { margin-top: 14px; }
.oa-accordion-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 20px 24px; background: none; border: 0; text-align: left;
}
.oa-accordion-head .t { font-size: 16px; font-weight: 800; }
.oa-accordion-head .d { font-size: 13px; color: var(--oa-muted); margin-top: 3px; }
.oa-accordion-head .chev { color: var(--oa-faint); font-size: 13px; font-weight: 700; }
.oa-accordion-body { display: none; padding: 0 24px 24px; }
.oa-accordion.open .oa-accordion-body { display: block; }

/* ---------- 히어로 ---------- */
.oa-hero {
  background: var(--oa-navy); color: #fff;
  border-radius: 16px; padding: 52px 48px; margin-bottom: 40px;
}
.oa-hero .eyebrow { color: #93a5d1; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.oa-hero h2 { margin: 0 0 14px; font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.oa-hero p { margin: 0; color: #b9c3dd; font-size: 16px; max-width: 720px; }

/* ---------- 스텝/체크 리스트 ---------- */
.oa-steps { counter-reset: step; display: grid; gap: 14px; }
.oa-check-item { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--oa-surface-sub); border-radius: var(--oa-radius-sm); }
.oa-check-item .ic { color: var(--oa-green); font-weight: 800; }
.oa-check-item b { display: block; font-size: 14px; }
.oa-check-item span { font-size: 13px; color: var(--oa-muted); }

/* ---------- 채팅 예시 ---------- */
.oa-chat { display: grid; gap: 12px; }
.oa-chat .msg { max-width: 78%; padding: 12px 16px; border-radius: 12px; font-size: 14px; }
.oa-chat .me { justify-self: end; background: var(--oa-primary); color: #fff; border-bottom-right-radius: 4px; }
.oa-chat .ai { justify-self: start; background: var(--oa-surface-sub); border: 1px solid var(--oa-line); border-bottom-left-radius: 4px; }
.oa-chat .ai b { color: var(--oa-green); }

/* ---------- QR 로그인 ---------- */
.oa-auth-card { max-width: 460px; margin: 0 auto; }
.oa-qr-box {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px; background: var(--oa-surface-sub); border: 1px dashed var(--oa-line-strong);
  border-radius: var(--oa-radius); text-align: center;
}
.oa-qr-canvas { background: #fff; padding: 10px; border: 1px solid var(--oa-line); border-radius: 10px; }
.oa-qr-timer { font-family: var(--oa-mono); font-size: 15px; font-weight: 700; color: var(--oa-primary); }
.oa-easy-no { font-size: 26px; font-weight: 800; letter-spacing: 6px; }
.oa-pin-dots { display: flex; gap: 14px; justify-content: center; margin: 22px 0; }
.oa-pin-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--oa-line-strong); }
.oa-pin-dots i.on { background: var(--oa-primary); }

/* ---------- 다운로드 행 ---------- */
.oa-file-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border: 1px solid var(--oa-line); border-radius: var(--oa-radius);
  background: var(--oa-surface);
}
.oa-file-row + .oa-file-row { margin-top: 12px; }
.oa-file-row .name { font-weight: 800; font-size: 15px; }
.oa-file-row .meta { font-size: 13px; color: var(--oa-muted); margin-top: 3px; }

/* ---------- 검색바 ---------- */
.oa-searchbar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.oa-searchbar .oa-select { width: auto; min-width: 130px; }
.oa-searchbar .oa-input { flex: 1; min-width: 220px; }

/* ---------- 푸터 ---------- */
.oa-footer { border-top: 1px solid var(--oa-line); background: var(--oa-surface); margin-top: 40px; }
.oa-footer-inner { max-width: 1400px; margin: 0 auto; padding: 28px 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--oa-faint); font-size: 13px; }

/* ---------- 유틸 ---------- */
.oa-mt-8 { margin-top: 8px; } .oa-mt-16 { margin-top: 16px; } .oa-mt-24 { margin-top: 24px; }
.oa-mt-32 { margin-top: 32px; } .oa-mt-48 { margin-top: 48px; }
.oa-mb-16 { margin-bottom: 16px; } .oa-mb-24 { margin-bottom: 24px; } .oa-mb-32 { margin-bottom: 32px; }
.oa-flex { display: flex; align-items: center; gap: 12px; }
.oa-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.oa-right { text-align: right; }
.oa-center { text-align: center; }
.oa-muted { color: var(--oa-muted); }
.oa-small { font-size: 13px; }
.oa-mono { font-family: var(--oa-mono); }
.oa-section-label { font-size: 13px; font-weight: 800; color: var(--oa-primary); letter-spacing: .06em; margin-bottom: 8px; }
.oa-h3 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 18px; }
.oa-divider { border: 0; border-top: 1px solid var(--oa-line); margin: 32px 0; }
.oa-lock { color: var(--oa-faint); font-size: 13px; }
.oa-masked { font-family: var(--oa-mono); letter-spacing: 1px; }