* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Nanum Gothic", "Noto Sans", sans-serif;
  word-break: keep-all;
  overflow-wrap: normal;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 640px; }
.page-hero { padding: 64px 24px; text-align: center; }
.form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; margin: 0 auto; }
.form label { display: flex; flex-direction: column; gap: 4px; }
.form .consent-checkbox { flex-direction: row; align-items: center; gap: 8px; }
.form button { padding: 12px; cursor: pointer; }
.alert-error { color: #c0392b; }
.alert-success { color: #27ae60; }
.placeholder-note { color: #888; font-size: 14px; }

/* 개인정보 동의 체크박스 + 스크롤형 약관 미리보기 박스 — /24(ib-partner)와 /25(get-in-touch) 둘 다
   실측 결과 완전히 동일한 컴포넌트라(2026-08-12, 두 라이브 페이지 스크린샷 대조) 여기 공통으로 둠.
   각 페이지 전용 CSS(ib-partner.css/get-in-touch.css)는 입력창 자체의 스타일(박스형 vs 밑줄형)만
   따로 관리. */
.ibform-label { font-size: 16px; font-weight: 400; color: #000; }
.ibform-label em { color: #EF4444; font-style: normal; margin-left: 2px; }
.ibform-consent { display: flex; flex-direction: column; gap: 8px; }
.ibform-legalbox {
  margin-top: 4px; border: 1px solid #E2E8F0; border-radius: 8px; padding: 16px;
  max-height: 160px; overflow-y: auto; background: #F8FAFC; font-size: 13px; color: #475569; line-height: 1.6;
}
.ibform-legalbox strong { display: block; margin-bottom: 8px; color: #000; }
.ibform-legalbox p { white-space: pre-line; margin: 0; }
.ibform-checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: #000; cursor: pointer; }
.ibform-checkbox input { margin-top: 3px; flex-shrink: 0; }
.ibform-submit {
  align-self: center; margin-top: 8px; background: #155DFC; color: #fff; border: none;
  border-radius: 999px; padding: 14px 40px; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .2s ease;
}
.ibform-submit:hover { background: #BBD0FE; }

/* trading-mobile-break 패턴: 문장 경계마다 삽입, 모바일에서만 노출 */
.trading-mobile-break { display: none; }

/* 스크롤 진입 시 fade-in 애니메이션(public/js/scroll-reveal.js, IntersectionObserver 기반).
   라이브 사이트 실측: opacity만 변하는 순수 fade(transform 변화 없음) — imweb 원본 동작과 맞춤. */
[data-anim] { opacity: 0; transition: opacity .6s ease; }
[data-anim].is-visible { opacity: 1; }

/* `!important`는 의도적: `.mt5-photo img { display:block }` 같은 컴포넌트 규칙보다 명시도가
   낮아도 항상 이겨야 하는 표시/숨김 토글 유틸리티. 모바일 미디어쿼리 쪽은 `block` 강제가 아니라
   `revert`로 풀어줘서, 각 컴포넌트가 자기 display 값(flex/grid/block)을 그대로 유지하게 함
   — 안 그러면 예: `.gallery-row{display:flex}` 같은 규칙이 깨짐. */
.mobile-only { display: none !important; }

/* ---------- site header (모든 페이지 공통, layout.ejs) ----------
   실측 확인(라이브 사이트 Playwright 좌표 대조): nav 링크 블록은 로고/우측 클러스터와
   무관하게 뷰포트 정중앙에 절대 배치됨(1440에서 center=720.0, 1728에서 center=864.0 —
   viewport 폭의 정확히 절반). 로고 폭과 우측 클러스터 폭이 다르므로 grid 1fr/auto/1fr나
   flex space-between로는 이 정중앙 배치가 재현되지 않아 absolute+translate로 처리. */
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 40px; height: 90px; position: relative; z-index: 50; }
.site-logo { display: block; text-decoration: none; }
.site-logo img { height: 66px; width: auto; display: block; }
.site-nav-links {
  display: flex; align-items: center; gap: 24px;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.site-nav-links a { font-size: 15px; font-weight: 400; color: #000; text-decoration: none; white-space: nowrap; }
.site-nav-links a:first-child { font-weight: 700; }
.site-nav-links a:hover { color: #155DFC; }
.site-nav-links a.is-active { color: #155DFC; position: relative; }
.site-nav-links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: #155DFC;
}
/* 데스크톱 nav 드롭다운(고객 지원/회사 소개) — 2026-08-12 라이브 hover 실측값 그대로.
   회사 소개는 "이용 규정" 항목에서 2단으로 중첩되는 flyout(오른쪽으로 펼침). */
.nav-item.has-dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: 100%; left: 0; width: 160px; margin: 0; padding: 0;
  background: #fff; box-shadow: 0 6px 12px rgba(0, 0, 0, .176); border-radius: 3px; z-index: 1000;
  visibility: hidden; opacity: 0; transition: opacity .15s ease;
}
.nav-item.has-dropdown:hover > .dropdown-menu { visibility: visible; opacity: 1; }
.dropdown-menu a {
  display: block; padding: 10px 20px; font-size: 13px; font-weight: 400; color: rgb(33, 33, 33);
  text-decoration: none; white-space: nowrap;
}
.dropdown-menu a:hover { background: #F4F6F8; color: #155DFC; }
.dropdown-submenu { position: relative; }
.dropdown-submenu > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dropdown-chevron { color: #99A1AF; }
.dropdown-menu-flyout { top: 0; left: 100%; }
.dropdown-submenu:hover > .dropdown-menu-flyout { visibility: visible; opacity: 1; }

.site-nav-right { display: flex; align-items: center; gap: 24px; }
.lang-switch { display: flex; align-items: center; gap: 4px; }
.lang-switch img { width: 23px; height: 16px; display: block; }
.site-nav-right .nav-cta {
  background: #155DFC; color: #fff; padding: 8px 20px; border-radius: 999px;
  font-size: 14px; letter-spacing: 1px; transition: background .2s ease;
}
.nav-cta:hover, .benefits-cta:hover, .mobile-header-cta:hover, .service-cta-wrap a:hover { background: #BBD0FE; }

/* ---------- mobile header bar + hamburger menu (모든 페이지 공통) ----------
   실측(라이브 사이트 직접 클릭, 스크린샷 확인) 기준: 모바일 헤더엔 로고가 없고
   [햄버거, 국기2개] — [거래시작 CTA] 순서. 햄버거를 누르면 전체화면 오버레이가 아니라
   왼쪽에서 슬라이드 인하는 흰 배경 사이드바(폭 ~80vw)가 뜨고, 나머지 화면은 어둡게 dim
   처리됨. 언어 선택은 사이드바 맨 아래 국기+라벨+화살표 드롭다운형 버튼 하나. */
.mobile-header-bar { display: flex; align-items: center; gap: 16px; }
.mobile-header-bar .lang-switch { gap: 4px; }
.mobile-header-spacer { flex: 1 1 auto; }
.mobile-header-cta {
  background: #155DFC; color: #fff; padding: 8px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 400; text-decoration: none; white-space: nowrap;
  transition: background .2s ease;
}

.hamburger-btn {
  display: flex; width: 24px; height: 18px; padding: 0; border: none; background: none; cursor: pointer;
  flex-direction: column; justify-content: space-between; flex-shrink: 0;
}
.hamburger-btn span { display: block; height: 2px; width: 100%; background: #000; border-radius: 1px; }

.mobile-nav-backdrop {
  display: none; position: fixed; inset: 0; z-index: 99; background: rgba(0, 0, 0, 0.5);
}
.mobile-nav-backdrop.is-open { display: block; }

.mobile-nav-overlay {
  display: flex; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; width: 80vw; max-width: 320px;
  background: #fff; flex-direction: column; padding: 20px 24px 32px; overflow-y: auto;
  transform: translateX(-100%); transition: transform 0.25s ease;
}
.mobile-nav-overlay.is-open { transform: translateX(0); }
.mobile-nav-close {
  align-self: flex-end; border: none; background: none; font-size: 28px; line-height: 1;
  color: #000; cursor: pointer; margin-bottom: 16px; padding: 4px;
}
.mobile-nav-links { display: flex; flex-direction: column; margin-bottom: auto; }
.mobile-nav-links a {
  display: block; font-size: 17px; font-weight: 400; color: #000; text-decoration: none;
  padding: 14px 8px; border-radius: 6px;
}
.mobile-nav-links a.is-active { color: #155DFC; font-weight: 700; background: #F4F6F8; }

/* 모바일 드로어 아코디언(고객 지원/회사 소개) — 실측: 챕터론 클릭 시 펼침(즉시 이동 아님), 화살표 회전 */
.mobile-nav-group { display: flex; flex-direction: column; }
.mobile-nav-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  background: none; border: none; text-align: left; cursor: pointer;
  font-size: 17px; font-weight: 400; color: #000; font-family: inherit;
  padding: 14px 8px; border-radius: 6px;
}
.mobile-nav-toggle.is-active { color: #155DFC; font-weight: 700; }
.mobile-nav-chevron { flex-shrink: 0; color: #99A1AF; transition: transform .2s ease; }
.mobile-nav-toggle.is-open .mobile-nav-chevron { transform: rotate(180deg); }
.mobile-nav-submenu {
  display: flex; flex-direction: column; max-height: 0; overflow: hidden; padding-left: 16px;
  transition: max-height .25s ease;
}
.mobile-nav-submenu.is-open { max-height: 400px; }
.mobile-nav-submenu a {
  display: block; font-size: 15px; font-weight: 400; color: #4A5565; text-decoration: none;
  padding: 12px 8px;
}
.mobile-nav-subgroup { display: flex; flex-direction: column; }
.mobile-nav-toggle-nested { font-size: 15px; color: #4A5565; padding: 12px 8px; }
.mobile-nav-submenu-nested { padding-left: 16px; }
.mobile-nav-submenu-nested a { font-size: 14px; }
.mobile-nav-lang-switch {
  display: flex; align-items: center; gap: 8px; margin-top: 24px; padding: 8px; text-decoration: none; color: #000;
  align-self: flex-start;
}
.mobile-nav-lang-switch img { width: 20px; height: 14px; display: block; border-radius: 2px; }
.mobile-nav-lang-switch span { font-size: 14px; }
.mobile-nav-lang-switch svg { color: #99A1AF; }

/* ---------- site footer (모든 페이지 공통, layout.ejs) ---------- */
.site-footer { background: #06122A; color: #94A3B8; padding: 64px 40px 40px; }
.footer-inner { max-width: 1180px; margin: 0 auto; }
.footer-links { display: flex; gap: 24px; font-size: 12px; margin-bottom: 24px; }
.footer-links a { color: #94A3B8; text-decoration: none; font-weight: 400; }
.footer-links a:last-child { font-weight: 700; }
.footer-nav { display: flex; gap: 20px; font-size: 14px; margin-bottom: 32px; flex-wrap: wrap; }
.footer-nav a { color: #94A3B8; text-decoration: none; }
.footer-brand { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 16px; }
.footer-company-lines { font-size: 12px; color: #62748E; line-height: 1.8; margin-bottom: 24px; }
.footer-risk-heading { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.footer-risk-text { font-size: 12px; color: #62748E; line-height: 1.7; margin-bottom: 24px; }
.footer-badges { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.footer-badges img { height: 49px; width: auto; max-width: 100%; }
.footer-badges img:last-child { height: 74px; }
.footer-copyright { font-size: 12px; font-weight: 700; }

@media (max-width: 720px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: revert !important; }
  /* `revert` rolls back to the tag's UA-default display (`block` for a <div>), NOT to this
     file's own `display:flex` rule — needs an explicit override to actually lay out as a row. */
  .mobile-header-bar.mobile-only { display: flex !important; }
  /* 실측(라이브 모바일): CTA 버튼이 화면 오른쪽 끝(헤더 padding만큼 여백)에 위치. 로컬은
     `.mobile-header-bar`(base)가 `.site-header`의 flex item으로서 flex-grow 기본값(0)이라
     콘텐츠 폭만큼만 차지해서, 그 안의 `.mobile-header-spacer{flex:1}`이 밀어줄 여유 공간
     자체가 없어 CTA가 국기 바로 옆에 붙어있었음 — bar 자체를 부모 폭까지 늘려야 spacer가
     실제로 작동함. */
  .mobile-header-bar { flex: 1 1 auto; }

  .trading-mobile-break { display: block; }
  .page-hero { padding: 32px 24px; }

  /* 실측(라이브 모바일, Playwright): 헤더가 스크롤해도 `position:fixed;top:0`으로 화면에 계속
     고정됨(imweb `scroll-to-fixed` 위젯). 로컬은 `position:relative`라 스크롤하면 같이 밀려
     올라가던 버그 — 모바일에서만 fixed로 전환하고, 헤더가 차지하던 자리만큼 body에 padding-top을
     줘서 첫 로드 시 본문이 헤더 밑에 깔리지 않게 함. */
  .site-header { padding: 12px 20px; height: auto; position: fixed; top: 0; left: 0; right: 0; width: 100%; background: #fff; }
  body { padding-top: 56px; }
  .site-footer { padding: 40px 20px 32px; }
  .footer-nav { gap: 12px 16px; }
  /* 두 번째 배지(desktop-31/desktop-en-31, natural 5244x712)가 height:74px 고정에 width:auto라
     390px 뷰포트에서 545px로 튀어나가면서 레이아웃 뷰포트 자체를 565px로 밀어버리는 버그가 있었음
     (2026-08-11 발견) — 그 뒤 `width:100%;max-width:200px` 폭 기준 캡으로 고쳤었는데, 재실측
     결과(2026-08-12) 이건 과잉 수정이었음: 라이브는 두 배지 다 height:49px 고정 + width:auto(원본
     비율 그대로)만으로 이미 182px/360px 둘 다 390px 뷰포트 안에 안전하게 들어감 — max-width 캡이
     오히려 배지2를 44% 찌그러뜨리고 있었음(200×27로 종횡비 깨짐). 캡 제거, 두 배지 다 동일하게
     height:49px;width:auto로 통일. */
  .footer-badges img,
  .footer-badges img:last-child { height: 49px; width: auto; }
}