/* ══════════════════════════════════════════════════════════════
   홈 아이덴티티 블록 — 좌우 배치 (2026-09-18 확정: t2 바깥 정렬 + h1 넓어짐)

   html[data-b03s-split] 가 있을 때만 산다(홈에서 PHP 가 첫 페인트 전에 박는다).
   없으면 이 파일은 아무것도 하지 않는다 = 원래 스택·스크럽.

   ⚠ main.js 가 매 프레임 인라인으로 쓰던 opacity/transform 을 대비해 배치 규칙은
     !important 로 굳힌다. 가드 덕에 홈에서는 인라인 값 자체가 생기지 않지만,
     require 를 껐다 켜는 사이 캐시된 페이지가 섞일 수 있어 남겨 둔다.

   글자 크기는 손대지 않는다 — 제목 --fs-d2, 본문 --fs-body 그대로. 정렬·자간만 바꾼다.
   견주고 버린 시안(t1·t3·t4·t5, h2~h5)과 스위처는
   html/docs/검수-2026-09-18/수정전-백업/butler-home-lab-시안전체/ 에 있다.
   ══════════════════════════════════════════════════════════════ */

/* ── 배치 뼈대 — 좌우 나란히 ─────────────────────────────── */
html[data-b03s-split] .b03s-identity .b03s-stack{ height:auto !important; }
html[data-b03s-split] .b03s-identity .b03s-viewport{
  position:relative !important; top:auto !important;
  height:88svh !important; min-height:560px; overflow:hidden !important; clip-path:none !important;
  display:flex; flex-direction:row;
}
html[data-b03s-split] .b03s-identity .b03s-card{
  position:relative !important; inset:auto !important; height:100% !important;
  flex:1 1 50%; min-width:0;
  opacity:1 !important; transform:none !important; filter:none !important;
  will-change:auto !important;
  transition:flex-basis .7s cubic-bezier(.22,.61,.36,1);
}
html[data-b03s-split] .b03s-identity .b03s-media{ transform:none !important; will-change:auto !important; }
html[data-b03s-split] .b03s-identity .b03s-smoke{ display:none !important; }
html[data-b03s-split] .b03s-identity .b03s-detail{ opacity:1 !important; }
/* 좌우로 나뉘면 한 카드 폭이 절반이라 본문이 너무 넓게 퍼진다 — 줄 길이만 잡는다(크기 아님) */
html[data-b03s-split] .b03s-identity .b03s-text{ max-width:34em; }

/* 두 카드 사이 1px 이음선 — 사진이 붙어 보이지 않게 */
html[data-b03s-split] .b03s-identity .b03s-card[data-card="1"]::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:rgba(255,255,255,.18); z-index:3; pointer-events:none;
}

/* ── t2 바깥 정렬 — 왼쪽 카드는 왼쪽·오른쪽 카드는 오른쪽. 화면 양끝을 향한다 ── */
html[data-b03s-typo="t2"] .b03s-card[data-card="0"] .b03s-detail{ align-items:flex-start; text-align:left; }
html[data-b03s-typo="t2"] .b03s-card[data-card="1"] .b03s-detail{ align-items:flex-end;   text-align:right; }
html[data-b03s-typo="t2"] .b03s-name{ letter-spacing:-.01em; }

/* ── h1 넓어짐 — 올린 쪽 55% / 반대쪽 45% (처음 62/38 은 과해 하늘님이 줄임, 2026-09-18) ── */
html[data-b03s-hover="h1"] .b03s-identity .b03s-card:hover{ flex-basis:55%; }
html[data-b03s-hover="h1"] .b03s-identity .b03s-viewport:hover .b03s-card:not(:hover){ flex-basis:45%; }

/* ── 모바일 — 좌우가 아니라 위아래. 호버는 없다 ───────────── */
@media (max-width:767px){
  html[data-b03s-split] .b03s-identity .b03s-viewport{ flex-direction:column; height:auto !important; min-height:0; }
  html[data-b03s-split] .b03s-identity .b03s-card{ height:70svh !important; flex-basis:auto; }
  html[data-b03s-split] .b03s-identity .b03s-card[data-card="1"]::before{ width:auto; height:1px; right:0; bottom:auto; }
  html[data-b03s-typo] .b03s-detail{ align-items:center !important; text-align:center !important; }
}

/* ══════════════════════════════════════════════════════════════
   배경 등장 모션 시안 (2026-09-19 하늘님 지시)

   좌우 배치로 굳히면서 두 카드는 `opacity:1 !important; transform:none !important` 로
   못 박혀 있다 — 스크럽 잔값이 섞이지 않게 한 조치다. 그래서 지금은 **등장 연출이 없다.**
   여기서는 그 못을 피해 `.b03s-media`(사진) 에만 연출을 건다.
   덮개(.b03s-shade)와 글(.b03s-detail)은 건드리지 않는다 — 글은 처음부터 읽혀야 한다.

   ⚠ 위 배치 규칙이 `.b03s-media{transform:none !important}` 라 여기서도 !important 가 필요하다.
   ⚠ `html.b03s-bg-js[data-b03s-bg="…"]` 로 가른다. 값이 없으면(s1) 아무 규칙도 안 붙는다 = 지금 그대로.
   ⚠ 두 장이 **약간 어긋나게** 들어와야 좌우가 살아난다 — 오른쪽에 딜레이를 준다.
   ══════════════════════════════════════════════════════════════ */
html.b03s-bg-js[data-b03s-bg] .b03s-identity .b03s-media {
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.22,.61,.36,1), clip-path 1.1s cubic-bezier(.22,.61,.36,1);
}
html.b03s-bg-js[data-b03s-bg] .b03s-identity .b03s-card[data-card="1"] .b03s-media { transition-delay: .16s; }

/* ② 페이드인 */
html.b03s-bg-js[data-b03s-bg="s2"] .b03s-identity .b03s-media { opacity: 0; }
html.b03s-bg-js[data-b03s-bg="s2"] .b03s-identity.bg-in .b03s-media { opacity: 1; }

/* ③ 아래에서 올라오며 */
html.b03s-bg-js[data-b03s-bg="s3"] .b03s-identity .b03s-media { opacity: 0; transform: translate3d(0, 48px, 0) !important; }
html.b03s-bg-js[data-b03s-bg="s3"] .b03s-identity.bg-in .b03s-media { opacity: 1; transform: none !important; }

/* ④ 바깥에서 가운데로 열리기 — 왼쪽 장은 왼쪽 끝에서, 오른쪽 장은 오른쪽 끝에서 */
html.b03s-bg-js[data-b03s-bg="s4"] .b03s-identity .b03s-card[data-card="0"] .b03s-media { clip-path: inset(0 100% 0 0); }
html.b03s-bg-js[data-b03s-bg="s4"] .b03s-identity .b03s-card[data-card="1"] .b03s-media { clip-path: inset(0 0 0 100%); }
/* ⚠ 끝 상태 선택자가 시작 상태보다 **약하면 안 된다.** 시작 쪽은 `.b03s-card[data-card=…]`
     를 거쳐 가므로 점수가 높다. 끝 쪽도 같은 길이를 지나게 해야 이긴다(실측으로 잡은 버그). */
html.b03s-bg-js[data-b03s-bg="s4"] .b03s-identity.bg-in .b03s-card[data-card] .b03s-media { clip-path: inset(0 0 0 0); }

/* ⑤ 줌아웃 — 살짝 확대된 채 들어와 제자리로 */
html.b03s-bg-js[data-b03s-bg="s5"] .b03s-identity .b03s-media { opacity: 0; transform: scale(1.12) !important; }
html.b03s-bg-js[data-b03s-bg="s5"] .b03s-identity.bg-in .b03s-media { opacity: 1; transform: none !important; }

/* 움직임을 줄여 달라고 했으면 처음부터 완성 상태로 둔다 */

/* ⚠ 위 연출 규칙은 모두 `html.b03s-bg-js` 가 붙어 있어야 산다. 그 표시는 bg-lab.js 가
     맨 처음에 붙인다. **숨기는 쪽에 조건을 건다** — 스크립트가 안 돌면 연출이 없을 뿐
     사진은 그대로 보인다. 조건이 없으면 편집 화면에서 배경이 통째로 사라진다.
     풋터의 `body:not(.b07-js)` 와 같은 수법이다. (2026-09-29) */

@media (prefers-reduced-motion: reduce) {
  html[data-b03s-bg] .b03s-identity .b03s-media {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   브레이크댄스 편집 화면에서는 등장 연출을 끈다 — 2026-09-29

   ── 무엇이 잘못됐나 ────────────────────────────────────────────
   편집 화면에서 홈 Surgery / Skin care 배경 사진이 통째로 안 보였다.
   실측: 사진은 다 받아졌는데(`complete:true`, 2560px) `opacity:0` 이었다.

   ── 왜 ────────────────────────────────────────────────────────
   등장 연출은 `.b03s-media` 를 `opacity:0` 으로 두고, bg-lab.js 가 섹션이 화면에
   들어올 때 `.bg-in` 을 붙여 띄운다. 그런데 편집 화면에서는
     ① 캔버스가 변형된 아이프레임이라 IntersectionObserver 가 끝내 안 걸리고,
     ② 설령 붙여도 **빌더가 요소를 다시 그리면서 그 클래스를 지운다.**
   그래서 JS 로는 못 고친다. 숨기는 쪽을 CSS 로 꺼야 한다.

   ⚠ `.builder-element` 는 **빌더가 편집 화면에서만** 요소에 붙이는 클래스다.
     방문자 화면에는 없다(실측 확인). 그래서 이 규칙은 편집 화면에만 닿는다.
   ══════════════════════════════════════════════════════════════ */
html[data-b03s-bg] .b03s-identity.builder-element .b03s-media {
  opacity:    1 !important;
  transform:  none !important;
  clip-path:  none !important;
  transition: none !important;
}