/* =====================================================================
   안내 페이지 랜딩 (테마 0.9.0) — landing 페이지에서만 mirabo-style 뒤에 싣는다.

   스펙 docs/superpowers/specs/2026-10-17-landing-sections-design.md §6.4 를 따라
   스파이크 목업(…-mockup-paristo.html, 히어로 split 은 …-v1-split-hero.html)을 옮겼다.
   - 본문(AutoBlog)에는 클래스가 없다. 섹션은 `.mp > section[data-mirabo]`, 안은 자식 구조로 겨냥한다.
     클래스는 테마·플러그인이 쓰는 마크업(mp-hero*, mp-crumbs, mp-kicker, mp-actions, mp-btn*,
     mp-trust, mp-cta__nap), 플러그인 NAP 블록(.mirabo-nap)과 FAQ(.faq-section)뿐이다.
   - 변형 속성 data-cols·data-variant·data-layout·data-width 는 섹션 루트에서만 읽는다.
   - 색은 테마 토큰만. 리터럴은 흰색의 투명도와 color-mix() 재료로 쓰는 검정·흰색 hex 뿐이다.
   ===================================================================== */

/* ---------- 토큰 ---------- */
/* 히어로와 관련 글 띠는 .mp 의 형제라 같은 값을 따로 받는다. --mp-dark 의 neutral 기조는
   inc/dynamic-css.php 가 이보다 구체적인 선택자로 덮는다. */
.mp,
.mp-hero,
.mirabo-landing .sb-more--page {
  --mp-dark: color-mix(in oklab, var(--c-accent-ink) 72%, #000);
  --mp-dark-2: color-mix(in oklab, var(--c-accent-ink) 55%, #000);
  --mp-on-dark: color-mix(in srgb, var(--c-accent-soft) 85%, #fff);
  --mp-y: clamp(72px, 9vw, 128px);
  --mp-y-sm: clamp(48px, 6vw, 80px);
}

/* 섹션은 전폭 배경, 안쪽은 콘텐츠 폭(목업의 .sb-container 와 같은 상자). 자식마다 max-width 를
   주는 대신 섹션의 좌우 여백을 (전체 폭 - 콘텐츠 폭) / 2 로 잡아 2열 격자를 섹션에 바로 건다.
   100% 는 쓰는 자리에서 .mp 의 폭으로 풀린다. */
/* 한국어는 어절 단위로 줄을 바꾼다 — 기본값이면 「설계합니 / 다」처럼 낱자로 끊긴다(2026-10-18). */
.mp,
.mp-hero { word-break: keep-all; overflow-wrap: break-word; }

.mp {
  --mp-gutter: max(var(--pad-x), calc((100% - var(--w-content)) / 2));
  --mp-gutter-narrow: max(var(--pad-x), calc((100% - 976px) / 2));
  --mp-pad-y: var(--mp-y);
  /* 가로 넘침(링 점·워터마크)만 자른다 — hidden 이면 요약 카드가 히어로 위로 겹쳐 올라간 부분까지 잘린다. */
  overflow-x: clip;
}

/* ---------- 톤 ---------- */
.mp > section {
  position: relative;
  padding: var(--mp-pad-y) var(--mp-gutter);
}
.mp > section[data-tone="soft"] { background: var(--c-soft); }
.mp > section[data-tone="wash"] { background: var(--c-accent-wash); }
.mp > section[data-tone="dark"] { background: var(--mp-dark); color: rgba(255,255,255,1); }
.mp > section[data-tone="dark"] p { color: rgba(255,255,255,.78); }

/* ---------- 섹션 머리: header > p(영문 라벨) + h2(span + b) + p(설명) ---------- */
:is(.mp > section > header, .mp > [data-mirabo="split"] > div > header) {
  max-width: 760px;
  margin: 0 0 clamp(36px, 5vw, 64px);
}
.mp > section[data-align="center"] > header { margin-left: auto; margin-right: auto; text-align: center; }
:is(.mp > section > header, .mp > [data-mirabo="split"] > div > header) > p:first-child {
  font-family: var(--f-display); font-style: italic; font-size: 17px; letter-spacing: .06em;
  color: var(--c-accent-ink); margin: 0 0 14px;
}
:is(.mp > section > header, .mp > [data-mirabo="split"] > div > header) > h2 {
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.25; letter-spacing: -0.02em; margin: 0; font-weight: 400;
}
:is(.mp > section > header, .mp > [data-mirabo="split"] > div > header) > h2 b { display: block; font-weight: 700; }
:is(.mp > section > header, .mp > [data-mirabo="split"] > div > header) > h2 ~ p {
  font-size: 17px; line-height: 1.75; color: var(--c-text-muted); margin: 20px 0 0;
}
:is(.mp > section > header, .mp > [data-mirabo="split"] > div > header) > h2 ~ p b { color: var(--c-text); font-weight: 600; }
.mp > section[data-tone="dark"] :is(header > p:first-child) { color: var(--mp-on-dark); }
.mp > section[data-tone="dark"] header > h2 ~ p { color: rgba(255,255,255,.78); }
.mp > section[data-tone="dark"] header > h2 ~ p b { color: rgba(255,255,255,1); }

/* ---------- 히어로 (테마 template-parts/landing-hero.php) ---------- */
.mp-hero { position: relative; isolation: isolate; overflow: hidden; }
.mp-hero > .sb-container { position: relative; }

/* photo — 전폭 사진 + 왼쪽이 진한 가로 그라데이션 + 흰 글자 */
.mp-hero--photo { color: rgba(255,255,255,1); }
.mp-hero__bg { position: absolute; inset: 0; z-index: -1; }
.mp-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.mp-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mp-dark) 92%, transparent) 0%, color-mix(in srgb, var(--mp-dark) 74%, transparent) 55%, color-mix(in srgb, var(--mp-dark) 42%, transparent) 100%);
}
.mp-hero__inner { padding: clamp(56px, 7vw, 92px) 0 clamp(64px, 8vw, 104px); max-width: 880px; }

.mp-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: rgba(255,255,255,.72); margin: 0 0 26px; padding: 0; list-style: none; }
.mp-crumbs a { color: inherit; }
.mp-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.mp-crumbs [aria-current] { color: rgba(255,255,255,1); font-weight: 600; }
.mp-kicker {
  display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: var(--r-pill); font-size: 14px; font-weight: 700;
  background: color-mix(in srgb, var(--c-accent-soft) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c-accent-soft) 40%, transparent); color: var(--mp-on-dark);
}
.mp-hero__title { font-size: clamp(30px, 1.2rem + 2.7vw, 50px); line-height: 1.28; letter-spacing: -0.03em; margin: 0; font-weight: 800; max-width: 19em; }
.mp-hero__lead { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.7; color: rgba(255,255,255,.86); max-width: 38em; margin: 16px 0 0; }
.mp-hero .mp-actions { margin-top: 32px; }
.mp-trust { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.88); }
.mp-trust li { display: inline-flex; align-items: center; gap: 7px; }
.mp-trust svg { flex: none; width: 16px; height: 16px; stroke: var(--mp-on-dark); stroke-width: 2.6; fill: none; }

/* split·plain — 스파이크 v1: 밝은 히어로 그라데이션, 워터마크. plain 은 split 에서 사진 칸만 뺀 것 */
.mp-hero--split,
.mp-hero--plain { padding: clamp(40px, 6vw, 88px) 0 0; background: var(--c-accent-hero-grad); }
.mp-hero__mark {
  position: absolute; right: -0.1em; top: -0.12em; font-family: var(--f-display); font-size: clamp(120px, 22vw, 320px); line-height: 1;
  color: var(--c-accent-soft); opacity: .45; user-select: none; pointer-events: none; letter-spacing: -0.02em; white-space: nowrap;
}
.mp-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: end; }
.mp-hero__text,
.mp-hero--plain .mp-hero__inner { padding: 0 0 clamp(48px, 7vw, 96px); }
.mp-hero__photo { margin: 0; position: relative; aspect-ratio: 4 / 4.4; border-radius: var(--r-panel) var(--r-panel) 0 0; overflow: hidden; background: var(--c-accent-soft); }
.mp-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
:is(.mp-hero--split, .mp-hero--plain) .mp-crumbs { color: var(--c-text-muted); margin-bottom: 28px; }
:is(.mp-hero--split, .mp-hero--plain) .mp-crumbs [aria-current] { color: var(--c-text); }
:is(.mp-hero--split, .mp-hero--plain) .mp-kicker { background: rgba(255,255,255,.7); border-color: var(--c-accent-border); color: var(--c-accent-ink); }
:is(.mp-hero--split, .mp-hero--plain) .mp-hero__title { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.15; font-weight: 700; }
:is(.mp-hero--split, .mp-hero--plain) .mp-hero__lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--c-text-muted); max-width: 520px; margin-top: 22px; }
:is(.mp-hero--split, .mp-hero--plain) .mp-trust { color: var(--c-text); }
:is(.mp-hero--split, .mp-hero--plain) .mp-trust svg { stroke: var(--c-accent); }

/* ---------- 버튼 (플러그인 render_actions: div.mp-actions > a.mp-btn.mp-btn--primary|--outline) ---------- */
/* 밝은 배경은 액센트, 어두운 곳(photo 히어로·dark 톤·cta 카드)은 연한 액센트 + 흰 테두리 — 부모를 보고 바꾼다. */
.mp-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mp-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: var(--r-pill); font-size: 16px; font-weight: 600;
  background: var(--c-accent); color: var(--c-accent-on); transition: background .2s, color .2s, transform .2s;
}
.mp-btn:hover { background: var(--c-accent-hover); transform: translateY(-1px); }
.mp-btn--outline { background: transparent; color: var(--c-accent-ink); border: 1.5px solid var(--c-accent-ink); }
.mp-btn--outline:hover { background: var(--c-accent-ink); color: rgba(255,255,255,1); }
:is(.mp-hero--photo, .mp > section[data-tone="dark"], .mp > section[data-mirabo="cta"]) .mp-btn { background: var(--c-accent-soft); color: var(--mp-dark); }
:is(.mp-hero--photo, .mp > section[data-tone="dark"], .mp > section[data-mirabo="cta"]) .mp-btn:hover { background: rgba(255,255,255,1); }
:is(.mp-hero--photo, .mp > section[data-tone="dark"], .mp > section[data-mirabo="cta"]) .mp-btn--outline { background: rgba(255,255,255,.06); color: rgba(255,255,255,1); border: 1.5px solid rgba(255,255,255,.4); }
:is(.mp-hero--photo, .mp > section[data-tone="dark"], .mp > section[data-mirabo="cta"]) .mp-btn--outline:hover { background: rgba(255,255,255,.14); }

/* ---------- summary: p(「핵심 요약」) → p(결론) → dl — 히어로 바로 아래 카드 ---------- */
/* 섹션 자체가 카드다(콘텐츠 폭). photo 히어로 바로 뒤의 첫 섹션일 때만 히어로 바닥에 48px 겹친다. 톤 속성은 무시한다. */
.mp > section[data-mirabo="summary"] {
  z-index: 2;
  margin: clamp(32px, 4vw, 48px) var(--mp-gutter) 0;
  padding: 36px 40px 32px;
  background: var(--c-accent-wash); color: var(--c-text);
  border: 1px solid var(--c-accent-border); border-radius: var(--r-panel);
}
.mp-hero--photo + .mp > section[data-mirabo="summary"]:first-child { margin-top: -48px; }
.mp > section[data-mirabo="summary"] > p:first-child { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--c-accent-ink); }
.mp > section[data-mirabo="summary"] > p + p { margin: 0; font-size: 17px; line-height: 1.8; color: var(--c-text); }
.mp > section[data-mirabo="summary"] > p b { font-weight: 700; color: var(--c-accent-ink); }
.mp > section[data-mirabo="summary"] > dl { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 48px; margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--c-accent-border); }
.mp > section[data-mirabo="summary"] dt { font-size: 13px; font-weight: 700; color: var(--c-accent-ink); margin-bottom: 4px; }
.mp > section[data-mirabo="summary"] dd { margin: 0; font-size: 15px; color: var(--c-text-muted); }

/* ---------- intro: header → dl → figure → NAP ---------- */
/* 사진이 있으면 왼쪽(글)·오른쪽(사진) 2열. 위아래 1fr 줄이 왼쪽 묶음을 사진 높이의 가운데에 둔다. */
.mp > [data-mirabo="intro"]:has(> figure) {
  display: grid; grid-template-columns: 1.05fr 0.95fr; grid-template-rows: 1fr repeat(6, auto) 1fr;
  column-gap: clamp(32px, 5vw, 80px); align-items: center;
}
.mp > [data-mirabo="intro"]:has(> figure) > * { grid-column: 1; }
.mp > [data-mirabo="intro"]:has(> figure) > :not(figure):nth-child(1) { grid-row: 2; }
.mp > [data-mirabo="intro"]:has(> figure) > :not(figure):nth-child(2) { grid-row: 3; }
.mp > [data-mirabo="intro"]:has(> figure) > :not(figure):nth-child(3) { grid-row: 4; }
.mp > [data-mirabo="intro"]:has(> figure) > :not(figure):nth-child(4) { grid-row: 5; }
.mp > [data-mirabo="intro"]:has(> figure) > :not(figure):nth-child(5) { grid-row: 6; }
.mp > [data-mirabo="intro"]:has(> figure) > :not(figure):nth-child(6) { grid-row: 7; }
.mp > [data-mirabo="intro"]:has(> figure) > figure { grid-column: 2; grid-row: 1 / -1; align-self: center; }
.mp > [data-mirabo="intro"] > figure { margin: 0; position: relative; aspect-ratio: 4 / 4.6; border-radius: var(--r-panel); overflow: hidden; background: var(--c-soft); }
.mp > [data-mirabo="intro"] > figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 흰 바탕에 글과 사진만 있어 허전했다(2026-10-18 사용자 지적) — 사진 쪽에 색 면을 깔고(사진 가운데쯤부터 오른쪽 끝까지, 위는 비워 사진이 면 위로 올라오게),
   사진에 그림자, 제목을 한 단계 키우고 라벨 앞에 짧은 선을 둔다. 첫 섹션이라 페이지의 인상을 정한다. */
.mp > [data-mirabo="intro"]:has(> figure)::before {
  content: ""; position: absolute; top: 26%; bottom: 0; right: 0; z-index: 0;
  width: calc(var(--mp-gutter) + (100% - 2 * var(--mp-gutter)) * .3);
  background: var(--c-accent-wash);
}
.mp > [data-mirabo="intro"][data-tone="wash"]:has(> figure)::before { background: var(--c-soft); }
.mp > [data-mirabo="intro"][data-tone="dark"]:has(> figure)::before { background: var(--mp-dark-2); }
.mp > [data-mirabo="intro"]:has(> figure) > * { position: relative; z-index: 1; }
.mp > [data-mirabo="intro"]:has(> figure) > figure { box-shadow: 0 32px 64px -32px color-mix(in srgb, #000 45%, transparent); }
.mp > [data-mirabo="intro"] > header > h2 { font-size: clamp(30px, 3.9vw, 50px); }
.mp > [data-mirabo="intro"] > header > p:first-child::before {
  content: ""; display: inline-block; width: 32px; height: 1px; margin-right: 12px; vertical-align: middle; background: currentColor;
}
.mp > [data-mirabo="intro"] > dl { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; margin: 0; padding-top: 32px; border-top: 1px solid var(--c-border); }
.mp > [data-mirabo="intro"] > dl dt { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--c-accent-ink); margin-bottom: 6px; }
.mp > [data-mirabo="intro"] > dl dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--c-text); }
.mp > [data-mirabo="intro"] > dl dd small { display: block; color: var(--c-text-muted); font-size: 13px; margin-top: 4px; }

/* NAP 블록(플러그인 div.mirabo-nap > dl > div.mirabo-nap__row > dt + dd). 글의 규칙(style.css)은 .post-content 범위라 .mp 에
   닿지 않는다 — 2026-10-17 파리스토 location 을 랜딩으로 옮길 때 맨 목록으로 나와 찾았다. intro 의 dl 과 같은 모양으로 그린다. */
.mp .mirabo-nap { margin: 0; padding-top: 32px; border-top: 1px solid var(--c-border); }
.mp .mirabo-nap__list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; margin: 0; }
.mp .mirabo-nap dt { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--c-accent-ink); margin-bottom: 6px; }
.mp .mirabo-nap dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--c-text); word-break: keep-all; overflow-wrap: anywhere; }
.mp .mirabo-nap dd a:not(.mirabo-nap__map) { color: inherit; }
.mp .mirabo-nap__hours { margin: 0; padding: 0; list-style: none; }
.mp .mirabo-nap__map { margin-left: 8px; font-size: 13px; font-weight: 600; color: var(--c-accent-ink); text-underline-offset: 3px; }
.mp > section[data-tone="dark"] .mirabo-nap { border-top-color: rgba(255,255,255,.18); }
.mp > section[data-tone="dark"] .mirabo-nap :is(dt, .mirabo-nap__map) { color: var(--mp-on-dark); }
.mp > section[data-tone="dark"] .mirabo-nap dd { color: rgba(255,255,255,.85); }

/* ---------- text (와 섹션 밖 느슨한 요소, 실수로 온 hero): 글 본문 열 ---------- */
.mp > :is([data-mirabo="text"], [data-mirabo="hero"]):not([data-width="wide"]) { padding-left: var(--mp-gutter-narrow); padding-right: var(--mp-gutter-narrow); }
.mp > :not(section) { margin: 0 var(--mp-gutter-narrow) 1.1em; }
.mp > :not(section):first-child,
.mp > section + :not(section) { margin-top: var(--mp-y); }
.mp > :not(section):last-child,
.mp > :not(section):has(+ section) { margin-bottom: var(--mp-y); }
:is(.mp > [data-mirabo="text"], .mp > [data-mirabo="hero"], .mp) > :is(p, ul, ol, blockquote) { font-size: 17px; line-height: 1.8; }
:is(.mp > [data-mirabo="text"], .mp > [data-mirabo="hero"]) > :is(p, ul, ol, blockquote, table) { margin: 0 0 1.1em; }
:is(.mp > [data-mirabo="text"], .mp > [data-mirabo="hero"]) > :is(ul, ol) { padding-left: 1.4em; }
:is(.mp > [data-mirabo="text"], .mp > [data-mirabo="hero"], .mp) > :is(h2, h3) { line-height: 1.4; letter-spacing: -0.02em; }
:is(.mp > [data-mirabo="text"], .mp > [data-mirabo="hero"]) > h3 { font-size: 22px; margin: 1.6em 0 .6em; }
:is(.mp > [data-mirabo="text"], .mp > [data-mirabo="hero"]) > figure { margin: 2em 0; }
:is(.mp > [data-mirabo="text"], .mp > [data-mirabo="hero"]) > figure img { width: 100%; height: auto; border-radius: var(--r-panel); }
:is(.mp > [data-mirabo="text"], .mp > [data-mirabo="hero"]) > figure figcaption { margin-top: 10px; font-size: 14px; color: var(--c-text-muted); }
:is(.mp > [data-mirabo="text"], .mp > [data-mirabo="hero"]) > blockquote { padding-left: 20px; border-left: 3px solid var(--c-accent); color: var(--c-text-muted); margin-left: 0; margin-right: 0; }
:is(.mp > [data-mirabo="text"], .mp > [data-mirabo="hero"]) > table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: 15px; }
:is(.mp > [data-mirabo="text"], .mp > [data-mirabo="hero"]) > table :is(th, td) { padding: 14px 12px; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
:is(.mp > [data-mirabo="text"], .mp > [data-mirabo="hero"]) > table th { background: var(--c-soft); font-weight: 700; }
:is(.mp > [data-mirabo="text"], .mp > [data-mirabo="hero"]) > :last-child { margin-bottom: 0; }

/* ---------- ring: header → ul(li 4개, span·b) — 고민 링 ---------- */
.mp > [data-mirabo="ring"] > ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1120px; list-style: none; margin: 0 auto; padding: 0; }
.mp > [data-mirabo="ring"] > ul > li {
  position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 24px;
  font-size: 16px; line-height: 1.55; border: 1px solid var(--c-accent-border); background: var(--c-bg); color: var(--c-text); container-type: inline-size;
}
.mp > [data-mirabo="ring"] > ul > li::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 1px dashed var(--c-accent-soft); }
.mp > [data-mirabo="ring"] > ul > li::after {
  content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--c-accent); top: 50%; left: 50%;
  transform: rotate(var(--a, 0deg)) translateY(calc(-50% - 50cqw));
}
.mp > [data-mirabo="ring"] > ul > li:nth-child(4n+1) { --a: -38deg; }
.mp > [data-mirabo="ring"] > ul > li:nth-child(4n+2) { --a: 62deg; }
.mp > [data-mirabo="ring"] > ul > li:nth-child(4n+3) { --a: 168deg; }
.mp > [data-mirabo="ring"] > ul > li:nth-child(4n+4) { --a: -112deg; }
.mp > [data-mirabo="ring"] > ul > li span { position: relative; z-index: 1; }
.mp > [data-mirabo="ring"] > ul > li b { display: block; position: relative; z-index: 1; font-weight: 700; color: var(--c-accent-ink); margin-top: 4px; }

/* ---------- gallery: header → ul(li > figure > img + figcaption) → p(주석) ---------- */
.mp > [data-mirabo="gallery"] > ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.mp > [data-mirabo="gallery"][data-cols="3"] > ul { grid-template-columns: repeat(3, 1fr); }
.mp > [data-mirabo="gallery"][data-cols="2"] > ul { grid-template-columns: repeat(2, 1fr); }
.mp > [data-mirabo="gallery"] > ul > li { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-card); overflow: hidden; background: var(--c-soft); }
.mp > [data-mirabo="gallery"] > ul > li figure { margin: 0; }
.mp > [data-mirabo="gallery"] > ul > li img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.mp > [data-mirabo="gallery"] > ul > li:hover img { transform: scale(1.04); }
.mp > [data-mirabo="gallery"] > ul > li figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 18px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, #000 65%, transparent)); color: rgba(255,255,255,1); font-size: 15px; font-weight: 600;
}
.mp > [data-mirabo="gallery"] > ul > li figcaption small { display: block; font-weight: 400; opacity: .8; font-size: 13px; margin-top: 2px; }
.mp > [data-mirabo="gallery"] > p { margin: 20px 0 0; font-size: 13.5px; color: var(--c-text-muted); }

/* ---------- cards: header → ul(li) — ref(참조 라벨) · icon(svg) · photo(figure) ---------- */
.mp > [data-mirabo="cards"] > ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.mp > [data-mirabo="cards"][data-cols="2"] > ul { grid-template-columns: repeat(2, 1fr); }
.mp > [data-mirabo="cards"] > ul > li { background: var(--c-soft); color: var(--c-text); border-radius: var(--r-panel); padding: 36px 32px 40px; overflow: hidden; }
.mp > [data-mirabo="cards"]:is([data-tone="soft"], [data-tone="wash"]) > ul > li { background: var(--c-bg); }
.mp > [data-mirabo="cards"] > ul > li > h3 { margin: 0 0 12px; font-size: 21px; line-height: 1.35; letter-spacing: -0.01em; }
.mp > section[data-mirabo="cards"] > ul > li > p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--c-text-muted); }
.mp > [data-mirabo="cards"] > ul > li > p strong { color: var(--c-accent-ink); }
/* 목업은 .mp-card__ref 의 여백 16px·액센트 색이 .mp-card p { margin: 0; color: muted } 에 덮여 보였다 — 승인된 화면대로 둔다. */
.mp > section[data-mirabo="cards"][data-variant="ref"] > ul > li > p:first-child { font-family: var(--f-display); font-style: italic; font-size: 15px; letter-spacing: .04em; color: var(--c-text-muted); margin: 0; }
/* 목업의 56px 원(div.mp-card__icon)은 계약에 없다 — svg 자체에 원 배경과 안쪽 여백을 준다. */
.mp > [data-mirabo="cards"][data-variant="icon"] > ul > li > svg {
  display: block; width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--c-bg); margin-bottom: 24px;
  stroke: var(--c-accent-ink); stroke-width: 1.5; fill: none;
}
.mp > [data-mirabo="cards"][data-variant="icon"]:is([data-tone="soft"], [data-tone="wash"]) > ul > li > svg { background: var(--c-accent-wash); }
/* photo 는 목업에 없다 — 카드 위쪽 끝까지 붙인 사진 한 장. */
.mp > [data-mirabo="cards"][data-variant="photo"] > ul > li > figure { margin: -36px -32px 28px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-soft); }
.mp > [data-mirabo="cards"][data-variant="photo"] > ul > li > figure img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- split: figure → div(header → h3 → ul·p) ---------- */
.mp > [data-mirabo="split"] { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.mp > [data-mirabo="split"][data-layout="image-right"] > figure { order: 2; }
.mp > [data-mirabo="split"] > figure { margin: 0; position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-panel); overflow: hidden; background: var(--c-soft); }
.mp > [data-mirabo="split"] > figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mp > [data-mirabo="split"] > div > header { margin-bottom: 28px; }
.mp > [data-mirabo="split"] > div > h3 { font-size: 22px; margin: 0 0 18px; letter-spacing: -0.02em; }
.mp > [data-mirabo="split"] > div > p { font-size: 16px; line-height: 1.75; margin: 0 0 12px; }

/* 점 목록 — split 의 ul, care 카드의 ul */
:is(.mp > [data-mirabo="split"] > div, .mp > [data-mirabo="care"] > ol > li) > ul { list-style: none; margin: 0; padding: 0; }
:is(.mp > [data-mirabo="split"] > div, .mp > [data-mirabo="care"] > ol > li) > ul > li { position: relative; padding-left: 20px; margin-bottom: 12px; font-size: 16px; line-height: 1.65; }
:is(.mp > [data-mirabo="split"] > div, .mp > [data-mirabo="care"] > ol > li) > ul > li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); }
:is(.mp > [data-mirabo="split"] > div, .mp > [data-mirabo="care"] > ol > li) > ul > li b { font-weight: 600; background: linear-gradient(transparent 62%, var(--c-accent-highlight) 62%); }
.mp > [data-mirabo="split"][data-tone="dark"] > div > ul > li b { color: var(--c-text); }

/* ---------- steps: header → ol(li > span(번호) + strong + span) → p(알약 강조줄) ---------- */
/* 3~6 단계를 한 줄에 칸 수 그대로. 목업은 dark 만 그렸다 — 밝은 톤은 카드와 같은 면 색으로 옮겼다. */
.mp > [data-mirabo="steps"] > ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.mp > [data-mirabo="steps"] > ol > li { position: relative; padding: 28px 22px 26px; border-radius: var(--r-card); background: var(--c-soft); border: 1px solid var(--c-border); }
.mp > [data-mirabo="steps"]:is([data-tone="soft"], [data-tone="wash"]) > ol > li { background: var(--c-bg); }
.mp > [data-mirabo="steps"] > ol > li > span:first-child { display: block; font-family: var(--f-display); font-size: 40px; line-height: 1; color: var(--c-accent-ink); margin-bottom: 18px; }
.mp > [data-mirabo="steps"] > ol > li > strong { display: block; font-size: 18px; font-weight: 700; margin-bottom: 8px; min-height: 2.6em; }
.mp > [data-mirabo="steps"] > ol > li > strong ~ span { display: block; font-size: 14px; line-height: 1.6; color: var(--c-text-muted); }
.mp > [data-mirabo="steps"] > ol > li + li::before {
  content: ""; position: absolute; left: -12px; top: 44px; width: 8px; height: 8px;
  border-top: 1px solid var(--c-accent-ink); border-right: 1px solid var(--c-accent-ink); transform: rotate(45deg); opacity: .6;
}
.mp > [data-mirabo="steps"] > ol ~ p {
  margin: 40px auto 0; width: fit-content; max-width: 100%; padding: 14px 28px; border-radius: var(--r-pill);
  background: var(--c-soft); border: 1px solid var(--c-border); font-size: 15px; text-align: center; display: flex; align-items: center; gap: 14px;
}
.mp > [data-mirabo="steps"]:is([data-tone="soft"], [data-tone="wash"]) > ol ~ p { background: var(--c-bg); }
.mp > [data-mirabo="steps"] > ol ~ p b { color: var(--c-accent-ink); }
.mp > [data-mirabo="steps"] > ol ~ p i { width: 1px; height: 14px; background: var(--c-border); }
.mp > [data-mirabo="steps"][data-tone="dark"] > ol > li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.mp > [data-mirabo="steps"][data-tone="dark"] > ol > li > span:first-child { color: var(--mp-on-dark); }
.mp > [data-mirabo="steps"][data-tone="dark"] > ol > li > strong ~ span { color: rgba(255,255,255,.72); }
.mp > [data-mirabo="steps"][data-tone="dark"] > ol > li + li::before { border-color: var(--mp-on-dark); }
.mp > [data-mirabo="steps"][data-tone="dark"] > ol ~ p { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.mp > [data-mirabo="steps"][data-tone="dark"] > ol ~ p b { color: var(--mp-on-dark); }
.mp > [data-mirabo="steps"][data-tone="dark"] > ol ~ p i { background: rgba(255,255,255,.35); }

/* ---------- care: header → ol(li > h3(span 번호 + 글) + ul) ---------- */
.mp > [data-mirabo="care"] > ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.mp > [data-mirabo="care"][data-cols="2"] > ol { grid-template-columns: repeat(2, 1fr); }
.mp > [data-mirabo="care"] > ol > li { background: var(--c-soft); color: var(--c-text); border-radius: var(--r-panel); padding: 32px 28px; }
.mp > [data-mirabo="care"]:is([data-tone="soft"], [data-tone="wash"]) > ol > li { background: var(--c-bg); }
.mp > [data-mirabo="care"] > ol > li > h3 { margin: 0 0 14px; font-size: 20px; }
.mp > [data-mirabo="care"] > ol > li > h3 > span:first-child { font-family: var(--f-display); color: var(--c-accent-ink); margin-right: 10px; font-weight: 400; }

/* ---------- notice: h3(em + 글) → ul — 주의·안내 박스 ---------- */
/* 섹션은 톤 밴드 그대로 두고 박스는 ::before 로 그린다(감쌀 요소가 계약에 없다). care 바로 뒤면 붙는다. */
.mp > section[data-mirabo="notice"] {
  --mp-notice-y: var(--mp-pad-y);
  display: grid; grid-template-columns: 220px 1fr; gap: 24px 48px; align-items: start;
  padding: calc(var(--mp-notice-y) + 32px) calc(var(--mp-gutter) + 36px);
  color: var(--c-text);
}
.mp > section[data-mirabo="notice"]::before {
  content: ""; position: absolute; inset: var(--mp-notice-y) var(--mp-gutter);
  background: var(--c-accent-wash); border: 1px solid var(--c-accent-border); border-radius: var(--r-panel);
}
.mp > section[data-mirabo="notice"] > * { position: relative; }
.mp > [data-mirabo="care"]:has(+ [data-mirabo="notice"]) { padding-bottom: 0; }
.mp > [data-mirabo="care"] + section[data-mirabo="notice"] { --mp-notice-y: 24px; padding-bottom: calc(var(--mp-pad-y) + 32px); }
.mp > [data-mirabo="care"] + section[data-mirabo="notice"]::before { bottom: var(--mp-pad-y); }
/* care 와 붙은 notice 는 배경도 care 의 톤을 따른다 — 톤이 다르면 박스가 두 밴드 경계에 걸린다. */
.mp > [data-mirabo="care"]:is(:not([data-tone]), [data-tone="light"]) + section[data-mirabo="notice"] { background: transparent; }
.mp > [data-mirabo="care"][data-tone="soft"] + section[data-mirabo="notice"] { background: var(--c-soft); }
.mp > [data-mirabo="care"][data-tone="wash"] + section[data-mirabo="notice"] { background: var(--c-accent-wash); }
.mp > [data-mirabo="care"][data-tone="dark"] + section[data-mirabo="notice"] { background: var(--mp-dark); }
.mp > [data-mirabo="notice"] > h3 { margin: 0; font-size: 20px; color: var(--c-text); }
.mp > [data-mirabo="notice"] > h3 em { display: block; font-style: italic; font-family: var(--f-display); font-size: 15px; letter-spacing: .08em; color: var(--c-accent-ink); margin-bottom: 6px; }
.mp > [data-mirabo="notice"] > ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
/* 목업은 li 를 flex(svg + span)로 그렸다 — 본문 li 는 글과 <b> 가 섞인 한 줄이라 아이콘을 왼쪽 여백에 띄운다. */
.mp > [data-mirabo="notice"] > ul > li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.6; color: var(--c-text); }
.mp > [data-mirabo="notice"] > ul > li > svg { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; stroke: var(--c-accent); stroke-width: 1.6; fill: none; }
/* 목업의 체크 아이콘 — 본문 li 에 svg 가 없으면 CSS 가 그린다. */
.mp > [data-mirabo="notice"] > ul > li:not(:has(> svg))::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: var(--c-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='8.5'/%3E%3Cpath d='M6.2 10.2l2.6 2.6 5-5.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='8.5'/%3E%3Cpath d='M6.2 10.2l2.6 2.6 5-5.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- faq: header → div.faq-section(details[data-mfq-item]) — 2열(머리 ∣ 목록) ---------- */
.mp > [data-mirabo="faq"] { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.mp .faq-section details { background: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--r-card); margin-bottom: 12px; padding: 0 24px; }
.mp .faq-section summary { list-style: none; cursor: pointer; padding: 20px 32px 20px 0; font-size: 17px; font-weight: 600; position: relative; }
.mp .faq-section summary::-webkit-details-marker { display: none; }
.mp .faq-section summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: var(--c-accent-ink); }
.mp .faq-section details[open] summary::after { content: "−"; }
.mp .faq-section details p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.75; color: var(--c-text-muted); }

/* ---------- cta: p(영문 라벨) → h2 → p(설명) → 치환된 버튼·NAP 줄 — 전폭 띠 ---------- */
/* 다른 섹션처럼 전폭 배경이다(0.9.2, 2026-10-18 사용자 결정 — 0.9.0 의 인셋 카드를 바꿨다). 아래 여백이 없다:
   관련 글 띠가 있으면 그 띠가 위 여백을 갖고, 없으면 푸터에 바로 붙는다. 톤 속성은 무시한다. */
.mp > section[data-mirabo="cta"] {
  overflow: hidden; text-align: center;
  padding: var(--mp-y) var(--mp-gutter);
  background: var(--mp-dark); color: rgba(255,255,255,1);
}
.mp > section[data-mirabo="cta"] > :not(.mp-hero__mark) { position: relative; }
.mp > section[data-mirabo="cta"] p { color: rgba(255,255,255,.78); }
.mp > section[data-mirabo="cta"] > p:has(~ h2) { font-family: var(--f-display); font-style: italic; font-size: 17px; letter-spacing: .06em; color: var(--mp-on-dark); margin: 0 0 14px; }
.mp > section[data-mirabo="cta"] > h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.25; margin: 0 0 16px; font-weight: 400; }
.mp > section[data-mirabo="cta"] > h2 b { font-weight: 700; }
.mp > section[data-mirabo="cta"] > h2 ~ p:not(.mp-cta__nap) { margin: 0 auto 32px; max-width: 560px; }
.mp > section[data-mirabo="cta"] .mp-actions { justify-content: center; margin-bottom: 36px; }
.mp > section[data-mirabo="cta"] > .mp-hero__mark { color: rgba(255,255,255,.08); opacity: 1; }
/* cta 안에서는 위의 p 색(.78)을 받는다 — 목업과 같다. */
.mp-cta__nap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; font-size: 15px; color: rgba(255,255,255,.75); margin: 0; }
.mp-cta__nap i { display: block; width: 1px; height: 12px; background: rgba(255,255,255,.35); }
.mp-cta__nap a { color: inherit; }

/* ---------- 관련 글 띠 (기존 template-parts/page-related.php — 마크업은 그대로, 여백과 큰 제목만) ---------- */
.mirabo-landing .sb-more--page { margin: 0; padding: var(--mp-y) var(--pad-x); }
.mirabo-landing .sb-more--page > * { max-width: var(--w-content); margin-left: auto; margin-right: auto; }
.mirabo-landing .sb-more--page .sb-more__head { align-items: flex-end; color: var(--c-text); }
.mirabo-landing .sb-more--page .sb-more__title { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; }
/* 푸터의 위 여백(90px)을 랜딩에서는 없앤다 — 관련 글 띠가 없으면 전폭 CTA 가 푸터에 바로 붙고, 있으면 띠의 아래 여백이 간격이다. */
.mirabo-landing .sb-footer { margin-top: 0; }

/* ---------- 리빌 (assets/js/landing.js 가 <html> 에 mp-js, 화면에 든 자식에 is-in) ---------- */
.mp-js .mp > section > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.mp-js .mp > section > .is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mp-js .mp > section > * { opacity: 1; transform: none; transition: none; }
}
@media print {
  .mp-js .mp > section > * { opacity: 1; transform: none; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 1023px) {
  .mp-hero__grid { grid-template-columns: 1fr; }
  .mp-hero__photo { aspect-ratio: 16 / 10; border-radius: var(--r-panel); }
  .mp-hero__text { padding-bottom: 40px; }

  .mp > [data-mirabo="intro"]:has(> figure) { display: flex; flex-direction: column; align-items: stretch; gap: clamp(32px, 5vw, 80px); }
  .mp > [data-mirabo="intro"]:has(> figure) > figure { align-self: stretch; aspect-ratio: 16 / 10; }
  .mp > [data-mirabo="intro"]:has(> figure)::before { display: none; }
  .mp > [data-mirabo="split"],
  .mp > [data-mirabo="faq"] { grid-template-columns: 1fr; }
  .mp > [data-mirabo="split"][data-layout="image-right"] > figure { order: 0; }
  .mp > [data-mirabo="ring"] > ul { grid-template-columns: repeat(2, 1fr); }
  .mp > [data-mirabo="gallery"] > ul,
  .mp > [data-mirabo="gallery"][data-cols="3"] > ul { grid-template-columns: repeat(2, 1fr); }
  .mp > [data-mirabo="steps"] > ol { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .mp > [data-mirabo="steps"] > ol > li + li::before { display: none; }
  .mp > [data-mirabo="cards"] > ul { grid-template-columns: 1fr; }
  .mp > [data-mirabo="care"] > ol,
  .mp > [data-mirabo="care"][data-cols="2"] > ol { grid-template-columns: 1fr; }
  .mp > section[data-mirabo="notice"] { grid-template-columns: 1fr; }
  .mp > [data-mirabo="notice"] > ul { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .mp { --mp-pad-y: var(--mp-y-sm); }
  .mp-hero .mp-actions { display: grid; }
  .mp-trust { display: grid; gap: 6px; }
  .mp-hero__mark { font-size: 110px; }

  .mp-hero--photo + .mp > section[data-mirabo="summary"]:first-child { margin-top: -24px; }
  .mp > section[data-mirabo="summary"] { padding: 26px 22px; }
  .mp > section[data-mirabo="summary"] > dl,
  .mp > [data-mirabo="intro"] > dl,
  .mp .mirabo-nap__list { grid-template-columns: 1fr; }
  .mp > [data-mirabo="ring"] > ul { gap: 14px; }
  .mp > [data-mirabo="ring"] > ul > li { font-size: 14px; padding: 16px; }
  .mp > [data-mirabo="steps"] > ol { grid-template-columns: 1fr; }
  .mp > [data-mirabo="cards"][data-cols="2"] > ul { grid-template-columns: 1fr; }
  .mp > [data-mirabo="steps"] > ol ~ p { flex-direction: column; gap: 6px; }
  .mp > [data-mirabo="steps"] > ol ~ p i { display: none; }
  .mp > [data-mirabo="cards"] > ul > li,
  .mp > [data-mirabo="care"] > ol > li { padding: 28px 22px 32px; }
  .mp > [data-mirabo="cards"][data-variant="photo"] > ul > li > figure { margin: -28px -22px 24px; }
  .mp > section[data-mirabo="cta"] { padding: var(--mp-y-sm) var(--mp-gutter); }
}