html,
body {
  margin: 0;
  padding: 0;
  background: #0A0B10;
  color: #F2F4F8;
}

body {
  font-family: "Pretendard Variable", "Pretendard", "Hiragino Kaku Gothic ProN",
               "Yu Gothic UI", "Noto Sans JP", sans-serif;
  font-feature-settings: "ss01", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

a {
  color: inherit;
}

html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.1);
  border-radius: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* ── 네비게이션 반응형 ── */
.oj-nav-links       { display: flex; }
.oj-nav-actions     { display: flex; }
.oj-hamburger       { display: none; }
.oj-mobile-menu     { display: none; }

/* 데스크탑 nav 좌우 패딩 복원 */
#main-nav { padding-left: 56px !important; padding-right: 56px !important; }

/* ── 히어로 반응형 ── */
.oj-hero-grid       { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.oj-deck-wrap       { display: block; }

/* ── About 섹션 반응형 ── */
.oj-about-paras     { display: grid; grid-template-columns: repeat(3, 1fr); }

/* ── Philosophy 섹션 반응형 ── */
.oj-philosophy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.oj-philosophy-title { white-space: pre-line; }

/* ── Products 그리드 반응형 ── */
.oj-products-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* ── CTA actions 반응형 ── */
.oj-cta-actions     { display: flex; flex-direction: row; gap: 12px; justify-content: center; }

/* ── Footer 반응형 ── */
.oj-footer-grid     { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.oj-footer-bottom   { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }

/* ── Account 영역 반응형 ── */
.oj-account-shell   { padding: 40px 56px 100px; }

/* ── Product page 반응형 ── */
.oj-product-tab-bar { padding: 0 56px; }
.oj-product-screen-header { padding: 0 56px 24px; }
.oj-product-screen-missing { padding: 80px 56px 120px; }

/* ── Flowa 제품 페이지 반응형 ── */
.wr-section-pad        { padding: 120px 80px; }
.wr-features-grid      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wr-pricing-grid       { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.wr-signup-grid        { display: grid; grid-template-columns: 1fr 1.15fr; }
.wr-hero-grid          { display: grid; grid-template-columns: 1fr 1.15fr; }
.wr-hero-a-copy        { padding: 80px 80px 0; }
.wr-hero-c-inner       { padding: 88px 80px 56px; }

/* ─────────────────────────────────────────────
   Tablet  (≤ 1024px)
───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .oj-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 64px 40px 80px !important;
  }
  .oj-about-paras {
    grid-template-columns: repeat(2, 1fr);
  }
  .oj-philosophy-grid {
    gap: 48px;
  }
  .oj-philosophy-title {
    width: auto !important;
  }
  .oj-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Flowa */
  .wr-section-pad   { padding: 80px 44px; }
  .wr-features-grid { grid-template-columns: repeat(2, 1fr); }
  .wr-hero-a-copy   { padding: 64px 44px 0; }
  .wr-hero-c-inner  { padding: 64px 44px 40px; }
}

/* ─────────────────────────────────────────────
   Mobile landscape  (≤ 820px)
───────────────────────────────────────────── */
@media (max-width: 820px) {
  /* 네비게이션 */
  #main-nav { padding-left: 20px !important; padding-right: 20px !important; }
  .oj-nav-links   { display: none; }
  .oj-nav-actions { display: none; }
  .oj-hamburger   { display: flex; }

  /* 히어로: 1열 */
  .oj-hero-grid {
    grid-template-columns: 1fr !important;
    padding: 56px 24px 72px !important;
    gap: 40px;
  }

  /* About */
  .oj-about-inner { padding: 64px 24px 72px !important; }
  .oj-about-title { font-size: 40px !important; }
  .oj-about-lead  { font-size: 20px !important; }
  .oj-about-paras { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* Philosophy */
  .oj-philosophy-section { padding: 72px 24px !important; }
  .oj-philosophy-grid    { grid-template-columns: 1fr !important; gap: 36px; }
  .oj-philosophy-h2      { font-size: 28px !important; }

  /* Products */
  .oj-products-section  { padding: 32px 24px 80px !important; }
  .oj-products-grid     { grid-template-columns: 1fr !important; }
  .oj-products-title    { font-size: 32px !important; }

  /* CTA */
  .oj-cta-section { padding: 0 24px 80px !important; }
  .oj-cta-panel   { padding: 44px 28px !important; }
  .oj-cta-title   { font-size: 28px !important; }
  .oj-cta-actions { flex-direction: column; align-items: center; }
  .oj-cta-actions a,
  .oj-cta-actions button { width: 100%; max-width: 320px; text-align: center; }

  /* Footer */
  .oj-footer-root   { padding: 48px 24px 32px !important; }
  .oj-footer-grid   { grid-template-columns: 1fr 1fr; gap: 28px; }
  .oj-footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

  /* Product page */
  [id^="product-"][id$="-detail"] { padding-top: 24px !important; }
  .oj-product-tab-bar          { padding: 0 20px !important; }
  .oj-product-screen-header    { padding: 0 20px 20px !important; }
  .oj-product-screen-missing   { padding: 60px 20px 80px !important; }

  /* Account */
  .oj-account-shell { padding: 28px 20px 80px !important; }

  /* Flowa */
  .wr-section-pad   { padding: 64px 24px !important; }
  .wr-features-grid { grid-template-columns: 1fr !important; }
  .wr-pricing-grid  { grid-template-columns: 1fr !important; }
  .wr-signup-grid   { grid-template-columns: 1fr !important; }
  .wr-hero-grid     { grid-template-columns: 1fr !important; padding: 40px 24px 56px !important; }
  .wr-hero-a-copy   { padding: 56px 24px 0 !important; }
  .wr-hero-c-inner  { padding: 56px 24px 32px !important; }

  /* 기존 product 내부 (ID selector 유지) */
  [id^="product-"][id$="-detail"] { padding-top: 28px !important; }
  #product-tab-bar,
  [id$="-screen-header"],
  [id$="-hero-inner"],
  [id$="-screens"],
  [id$="-features"],
  [id$="-compare"],
  [id$="-pricing"],
  [id$="-calculator"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  [id$="-hero-title"] { font-size: 36px !important; }
  [id$="-hero-copy"]  { font-size: 16px !important; }
  [id$="-pricing-card"],
  [id$="-calculator-card"]      { grid-template-columns: 1fr !important; }
  [id$="-pricing-main"],
  [id$="-calculator-controls"]  { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
  [id$="-compare-grid"]         { min-width: 720px; }
}

/* ─────────────────────────────────────────────
   Mobile portrait  (≤ 560px)
───────────────────────────────────────────── */
@media (max-width: 560px) {
  /* 히어로 */
  .oj-hero-title  { font-size: 38px !important; }
  .oj-hero-sub    { font-size: 15px !important; }
  .oj-deck-wrap   { display: none; }

  /* Footer */
  .oj-footer-grid { grid-template-columns: 1fr; }

  /* 기존 product 내부 */
  [id$="-features-grid"],
  [id$="-screens-grid"],
  [id$="-calculator-deploy"],
  [id$="-calculator-periods"]   { grid-template-columns: 1fr !important; }
  [id$="-pricing-price"]        { font-size: 46px !important; }
  [id$="-calculator-net"],
  [id$="-calculator-total"]     { font-size: 38px !important; }
}

/* ─────────────────────────────────────────────
   Small phone  (≤ 375px)
───────────────────────────────────────────── */
@media (max-width: 375px) {
  .oj-hero-title { font-size: 32px !important; }
  .oj-about-title { font-size: 34px !important; }
  .oj-products-grid { gap: 12px; }
}

/* ── 모바일 메뉴 오버레이 ── */
.oj-mobile-menu.open {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  background: rgba(10,11,16,.97);
  backdrop-filter: blur(20px);
  z-index: 100;
  padding: 0;
  overflow-y: auto;
}

/* ── 문의 패널 반응형 ── */
#products-contact-inner { display: grid; grid-template-columns: 1fr 1.15fr; }

@media (max-width: 820px) {
  #products-contact-inner {
    grid-template-columns: 1fr !important;
  }
  #products-contact-info {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 36px 28px !important;
  }
  #products-contact-form {
    padding: 36px 28px !important;
  }
  /* 관리자 방문자 대시보드 분포 그리드 모바일 */
  .oj-admin-dist-grid {
    grid-template-columns: 1fr !important;
  }
  /* KPI 카드 모바일 */
  .oj-admin-kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  #section-products-contact { padding: 0 16px !important; }
  #products-contact-info,
  #products-contact-form { padding: 28px 20px !important; }
}