/* 일본판(/jp/) 페이지 스타일 — ★엘리멘터로 만든 페이지에는 적용하지 않는다(:not(.elementor-page)).
 * 엘리멘터 페이지에 걸면 main.site-main 폭 제한이 레이아웃을 눌러 디자인이 깨진다.
 * 즉 이 CSS 는 '엘리멘터가 아닌 순수 HTML 일본 페이지' 를 위한 폴백이다.
 * 헤더·푸터는 엘리멘터 테마빌더가 이미 그리므로 여기서는 '본문'만 다룬다.
 * body.m2m-jp 아래로만 적용돼 미국 페이지에는 한 줄도 닿지 않는다.
 * 일본어는 자간·행간을 넉넉히 잡아야 읽히고, 서체는 시스템 일본어 폰트를 우선한다.
 */

body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) {
  --jp-ink: #16181d;
  --jp-ink-2: #4a515b;
  --jp-line: #e3e6ea;
  --jp-bg-soft: #f5f6f8;
  --jp-brand: #0d0d0d;
  --jp-accent: #dd001b;
  --jp-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic,
             Meiryo, "Noto Sans JP", sans-serif;

  font-family: var(--jp-font);
  color: var(--jp-ink);
  font-size: 16px;
  line-height: 1.95;              /* 일본어는 행간을 넓게 — 한자·가나가 섞이면 빽빽해 보인다 */
  letter-spacing: .02em;
  max-width: 760px;               /* 읽기 좋은 1행 길이(일본어 기준 약 40자) */
  margin: 0 auto;
  padding: 40px 20px 72px;
}

/* ── 제목 ───────────────────────────────────────────── */
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) h1 {
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--jp-brand);
  margin: 0 0 24px;
}
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) h2 {
  font-size: clamp(20px, 2.8vw, 27px);
  line-height: 1.55;
  font-weight: 700;
  color: var(--jp-brand);
  margin: 56px 0 18px;
  padding-top: 30px;
  border-top: 2px solid var(--jp-brand);
}
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--jp-brand);
  margin: 34px 0 8px;
}
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) h1 + p { font-size: 17px; }

body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) p { margin: 0 0 18px; }
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) strong { font-weight: 700; color: var(--jp-brand); }
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) small { font-size: 13.5px; color: var(--jp-ink-2); }
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) hr {
  border: 0; border-top: 1px solid var(--jp-line); margin: 48px 0;
}

/* ── 목록: 카드처럼 ─────────────────────────────────── */
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) ul {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: grid; gap: 12px;
}
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) ul li {
  background: var(--jp-bg-soft);
  border-radius: 10px;
  padding: 16px 18px;
  line-height: 1.85;
}
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) ul li strong { display: block; margin-bottom: 2px; }

/* ── 인용(정직하게 알리는 문단) ─────────────────────── */
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) blockquote {
  margin: 26px 0;
  padding: 20px 22px;
  background: var(--jp-bg-soft);
  border-left: 4px solid var(--jp-brand);
  border-radius: 0 10px 10px 0;
}
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) blockquote p { margin: 0; font-size: 15px; color: var(--jp-ink-2); }

/* ── 버튼 ───────────────────────────────────────────── */
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) a.button {
  display: inline-block;
  background: var(--jp-brand);
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  padding: 17px 34px;
  border-radius: 10px;
  transition: transform .12s ease, background-color .12s ease;
}
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) a.button:hover { background: var(--jp-accent); transform: translateY(-1px); }
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) a.button:focus-visible { outline: 3px solid var(--jp-accent); outline-offset: 3px; }
/* 두 번째 버튼(LINE 등)은 보조 스타일 */
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) p + p > a.button:only-child {
  background: #fff; color: var(--jp-brand) !important; border: 2px solid var(--jp-brand);
  padding: 15px 32px;
}
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) p + p > a.button:only-child:hover { background: var(--jp-bg-soft); }

/* 버튼 바로 아래 보조 문구 */
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) a.button + small,
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) p > small { color: var(--jp-ink-2); }

/* ── 3단계 안내처럼 <strong> 로 시작하는 문단 ─────────── */
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) p > strong:first-child {
  font-size: 17px;
}

/* ── 커스터마이저 iframe 은 폭 제한을 풀어 크게 ───────── */
body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) .m2m-embed { max-width: none; }

@media (max-width: 640px) {
  body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) { padding: 26px 16px 56px; font-size: 15.5px; }
  body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) h2 { margin-top: 40px; padding-top: 22px; }
  body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) a.button { display: block; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  body.m2m-jp:not(.elementor-page) :is(main,.site-main,.entry-content) a.button { transition: none; }
}

/* ── 카탈로그 카드의 "CUSTOMIZE" 라벨 ─────────────────────
   이 글자는 마크업이 아니라 엘리멘터 페이지 CSS 의 article.elementor-post::after 로 그려진다.
   그래서 블록 치환·사전으로는 잡히지 않고, 같은 가상요소를 덮어쓰는 수밖에 없다.
   일본 페이지(body.m2m-jp)에서만 적용되므로 미국 카드는 그대로 CUSTOMIZE 로 남는다. */
body.m2m-jp article.elementor-post::after {
  content: "カスタマイズ" !important;
  font-family: "Pretendard JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", sans-serif !important;
  letter-spacing: .02em !important;   /* 영문 대문자용 자간이 일본어에는 넓다 */
}

/* ── 시뮬레이터 전체화면(/jp/customizer/) ─────────────────────
   헤더·푸터는 PHP 단계에서 이미 출력되지 않는다. 여기서는 테마가 남긴
   여백과, 훅을 안 거치고 직접 그려지는 잔여 요소만 정리한다.
   body.m2m-bare 는 일본 시뮬레이터에서만 붙으므로 다른 페이지·미국에는 닿지 않는다. */
body.m2m-bare header,
body.m2m-bare footer,
body.m2m-bare .site-header,
body.m2m-bare .site-footer,
body.m2m-bare [data-elementor-type="header"],
body.m2m-bare [data-elementor-type="footer"] { display: none !important; }

body.m2m-bare { margin: 0 !important; padding: 0 !important; }
body.m2m-bare .site-main,
body.m2m-bare main,
body.m2m-bare .elementor-section-wrap > .elementor-section:first-child { padding-top: 0 !important; margin-top: 0 !important; }