/* 편집 껍데기 — 제품편집 «판매페이지형» 공용 껍데기의 모양 (U8 · 신호 3daecd7b030c801181b9c165781e78f4)
 *
 * 🔴 이 파일은 index.html 에 «늘» 실린다 — 깃발이 꺼진 손님의 옛 화면에도 실린다.
 *    그래서 모든 규칙의 «머리»가 껍데기 마디로 시작한다(.es-… 등 — 허용 머리는 tests/test-edit-shell.js 가 센다).
 *    껍데기 마디가 없으면 0곳에 먹는다. ⛔ `.now{…}`·`.card{…}` 같은 맨몸 규칙을 넣지 마라 — 옛 화면이 바뀐다.
 *    쉼표로 묶은 선택자는 «낱낱이» 그 머리로 시작해야 한다(첫 것만 맞으면 둘째가 옛 화면에 샌다).
 * 🔴 색을 여기서 «정의»하지 않는다 (J.J 규칙 18). 라이브의 판은 <html data-theme> 에 걸린다(shell-theme.js) —
 *    body 직속 창도 그대로 물려받는다. 껍데기가 제 그릇에 --tx 같은 토큰을 따로 들면 그 순간 목업의 병
 *    (토큰이 «형제»라 안 내려오는 것)이 옮는다. 색 글자(# · rgb)도 0건이다 — 전부 tokens.css 의 이름으로 부른다.
 * 🔴 패널의 조상에 container-type · transform · filter · backdrop-filter · perspective · contain · will-change ·
 *    content-visibility 를 «절대» 걸지 마라. 카드 안 쪽지창과 가게 메뉴 하위판이 `position:fixed` + 화면 좌표로 뜬다 —
 *    조상이 담는 상자가 되면 오류 0줄로 자리가 어긋난다. container-type 은 입력칸이 없는 `.es-보기` 하나에만 건다.
 * ⛔ 그릇의 넘침은 `overflow:hidden` 이 아니라 `overflow:clip` 이다 — hidden 은 스크롤바만 없을 뿐
 *    `scrollIntoView()`·`focus()` 로는 굴러간다(「바로 고치기」가 패널 안 칸에 그것을 부른다). 그릇이 1px 이라도 넘쳐 있으면
 *    통째로 밀려 올라가고 되돌릴 스크롤바가 없다. 구르는 것은 `.es-보기` 와 `.es-패널몸` 둘뿐이다.
 * ⛔ 높이를 `calc(100vh - N)` 으로 빼서 정하지 마라(8px 어긋난 적이 있다) — 세로 flex + `min-height:0` 으로 내린다.
 */

/* ══ 뼈대 — 세로로: 무대(미리보기 | 패널 | 레일) · 알림 · 상태바 ══════════════════ */
/* 껍데기 제 변수는 «색이 아닌 것»뿐이다. 패널 폭은 이 변수 하나가 정한다 — 격자 틀을 적는 곳은 `.es-바닥` 한 곳이다.
   (클래스 셋짜리 규칙이 미디어 규칙을 이겨 미리보기가 80px 로 짜부라진 목업의 사고가 구조적으로 못 난다) */
/* 🔴 폭은 «두 가지뿐»이다 — 380px 과 넓게(J.J 규칙 5). 넓게의 숫자는 아래 `--es-넓게` 한 줄이다(각 섹션 지침에도 같은 수가 적혀 있다 — 바꾸면 거기도).
   ⛔ 패널마다 폭을 따로 두지 마라(규칙 6). 어느 칸이 넓은지는 edit-shell.js 의 칸표(넓게 칸)가 정하고, 여기는 .es-넓게 한 이름만 본다. */
.es-집{ --es-레일폭:52px; --es-패널폭:0px; --es-넓게:clamp(560px, 40vw, 820px);
  flex:1 1 auto; display:flex; flex-direction:column; min-width:0; min-height:0; width:100%;
  overflow:clip; background:var(--page); color:var(--tx) }
.es-집:not(.es-좁음):has(> .es-무대 > .es-바닥.es-열림){ --es-패널폭:380px }
.es-집:not(.es-좁음):has(> .es-무대 > .es-바닥.es-열림.es-넓게){ --es-패널폭:var(--es-넓게) }
.es-집.es-좁음{ --es-레일폭:0px }
/* 코치마크·토스트가 여기 뜬다(position:relative). ⛔ 여기에 container-type 을 걸지 마라 — 목업은 걸었고, 그래서 확대창을 못 넣었다 */
.es-무대{ position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:clip }
.es-바닥{ flex:1 1 auto; min-height:0; display:grid;
  grid-template-columns:minmax(0,1fr) var(--es-패널폭) var(--es-레일폭); grid-template-rows:minmax(0,1fr);
  transition:grid-template-columns .18s; overflow:clip }

/* ══ 미리보기 — 화면의 «주인공». ⛔ 여기에 설정 폼을 끼워 넣지 마라(입력칸 0개 — 그래서 몇 번을 다시 칠해도 커서가 안 튄다) ══ */
.es-보기{ grid-column:1; grid-row:1; min-width:0; min-height:0; overflow:auto; padding:24px 40px 60px;
  container-type:inline-size; container-name:es보기 }
/* 사진 칸을 «1fr 1fr» 로 두면 사진이 너무 커져 옵션·장바구니가 첫 화면에서 접힌다(목업 실측) — 사진 칸만 폭을 못 박는다 */
.es-보기속{ max-width:1000px; margin:0 auto; display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:40px }
/* 좁아지면 «한 칸»으로 선다 — 진짜 테마가 하는 그대로(목업 값 560 그대로). 재는 그릇은 미리보기 하나뿐이다(입력칸 0 · fixed 로 뜨는 것 0) */
@container es보기 (max-width:560px){
  .es-보기속{ grid-template-columns:minmax(0,1fr); gap:24px }
}

/* ── 무대 속 — 목업 .보기속 안의 것들을 이름만 es- 로 옮겼다. 입력칸 0 · 값은 edit-shell.js 의 지금칠하기() 가 넣는다 ──
   ⛔ 여기 규칙에 transform 을 쓰지 마라(위 머리말의 금지 목록 · 시험이 센다) — 연필의 «뜸»은 opacity 로만 준다. */
.es-정보{ min-width:0 }
/* 편집할 수 있는 곳 — ⛔ 늘 테두리를 두르지 마라. 화면이 설정폼처럼 보인다. 올렸을 때만 «점선», 열었을 때만 «라임 실선»이다.
   라임을 쓰는 까닭 — 사전에서 --now 는 「지금」이다. «지금 편집 중»이 정확히 그 뜻이다. */
.es-편집{ position:relative; border-radius:10px; outline:1px dashed transparent; outline-offset:6px; transition:outline-color .12s, background .12s; cursor:pointer }
.es-편집:hover{ outline-color:var(--tx3) }
.es-편집:hover > .es-연필{ opacity:1 }
.es-편집.es-켬{ outline:1px solid var(--now); outline-offset:6px; background:color-mix(in srgb, var(--now) 6%, transparent) }
.es-편집.es-켬 > .es-연필{ opacity:1; background:var(--now); color:var(--now-ink); border-color:var(--now) }
.es-연필{ position:absolute; top:-10px; right:-10px; z-index:3; display:grid; place-items:center; width:24px; height:24px; border-radius:7px; opacity:0;
  background:var(--card); border:1px solid var(--line-c); color:var(--tx2); transition:opacity .12s }
/* 사진 — 큰 사진 4:5 + 썸네일. 0장이면 회색 틀 안에 «까닭»(서버 문장 그대로)이 선다 */
/* 칸 비율 — 전체 사진 규격(자동설정 비율)을 edit-shell.js 가 이 변수로 싣는다(J.J 2026-09-30 · 3ebe…e1c). 기본 4:5 */
.es-사진칸{ --es-칸비: 4 / 5 }
.es-사진큰{ position:relative; aspect-ratio:var(--es-칸비, 4/5); border-radius:12px; overflow:clip; background:color-mix(in srgb, var(--tx) 7%, var(--card)) }
.es-사진큰 img{ display:block; width:100%; height:100%; object-fit:cover }
.es-사진큰 img[hidden]{ display:none }
.es-사진없음{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px;
  text-align:center; font-size:12.5px; line-height:1.6; color:var(--tx3) }
.es-사진없음[hidden]{ display:none }
.es-썸줄{ display:flex; gap:9px; margin-top:11px; min-width:0; overflow:clip }
.es-썸{ flex:none; width:62px; aspect-ratio:var(--es-칸비, 4/5); border-radius:8px; overflow:clip; border:1px solid transparent; background:color-mix(in srgb, var(--tx) 7%, var(--card)) }
.es-썸 img{ display:block; width:100%; height:100%; object-fit:cover }
.es-썸더{ display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--tx2); border-color:var(--line-c) }
/* 벤더 줄 — 브랜드 · (주소 자리) · 바로가기가 «같이» 선다. 새 줄을 안 만든다(J.J 2026-09-13) */
.es-벤더줄{ display:flex; align-items:center; gap:12px; position:relative }
.es-벤더줄 > .es-벤더칸{ min-width:0 }
.es-브랜드{ font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--tx3); overflow-wrap:anywhere }
.es-주소자리{ position:relative; margin-left:auto; flex:none }
.es-바로자리{ position:relative; flex:none }
.es-바로자리[hidden]{ display:none }
/* 세기 — 승인(라임 채움) < [자동 설정하기](파란 면) 보다도 약하다. 그래도 회색으로 묻지는 않는다 */
.es-바로단추{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:999px; border:1px solid var(--line-c);
  background:var(--card); font-family:inherit; font-size:11px; font-weight:600; color:var(--tx3); white-space:nowrap; cursor:pointer }
.es-바로단추:hover, .es-바로단추[aria-expanded="true"]{ border-color:var(--tx3); color:var(--tx2) }
.es-바로단추 .es-화{ font-size:12px; color:var(--tx3) }
.es-바로단추 .es-아래{ font-size:10px; color:var(--tx3); margin-left:-1px }
/* 메뉴는 absolute 다 — .es-보기 가 container 라 그 안의 fixed 는 갇힌다(머리말) */
.es-바로메뉴{ position:absolute; top:30px; right:0; z-index:26; min-width:190px; padding:5px; border-radius:11px; border:1px solid var(--line-c);
  background:var(--card); box-shadow:0 14px 34px rgba(0,0,0,.4) }
.es-바로메뉴[hidden]{ display:none }
.es-바로줄{ width:100%; display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:8px; font-size:12.5px; color:var(--tx2); text-decoration:none; cursor:pointer }
.es-바로줄:hover{ background:var(--chip-c); color:var(--tx) }
.es-바로줄 .es-아{ flex:none; display:grid; place-items:center; color:var(--tx3) }
.es-바로줄 .es-글{ flex:1; min-width:0 }
.es-바로줄 .es-화{ flex:none; font-size:11px; color:var(--tx3) }
/* 상품명 · 판매가. 빈 값은 주황(--warn = 봐 주세요)으로 «없다»고 말한다 — 빈 자리를 비워 두지 않는다 */
.es-상품명{ margin:10px 0 0; font-size:23px; font-weight:700; letter-spacing:-.02em; line-height:1.35; color:var(--tx); overflow-wrap:anywhere }
.es-보기 .es-빔{ color:var(--warn); font-weight:700 }
/* 🆕 10-14 — AI 설명이 «오는 중»: 경고색 말고 읽기색 + 깜빡이는 점.
   ⚠️ 박자는 styles.css 의 dw-blink(설정창 .dw-dot 것)를 «빌려» 쓴다 — 이 파일엔 @keyframes 를 못 둔다(§5 ⓐ). */
.es-보기 .es-쓰는중{ display:flex; align-items:center; gap:8px; color:var(--read); font-weight:700 }
.es-보기 .es-쓰는점{ flex:none; width:7px; height:7px; border-radius:50%; background:currentColor; animation:dw-blink 1.4s ease-in-out infinite }
@media (prefers-reduced-motion:reduce){ .es-보기 .es-쓰는점{ animation:none; opacity:.7 } }
.es-값{ margin-top:14px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.es-값 .es-지금{ font-size:21px; font-weight:800; color:var(--tx) }
.es-값 .es-전{ font-size:14px; color:var(--tx3); text-decoration:line-through }
.es-값 .es-할{ font-size:12px; font-weight:700; color:var(--danger) }
.es-값 .es-전[hidden], .es-값 .es-할[hidden]{ display:none }
/* 못 셌다 — «판매가 그 자리»에 빠진 것을 이름으로. ⛔ 0원·미정 같은 «숫자처럼 생긴 것»을 두지 않는다 */
.es-값.es-못셈 .es-지금{ color:var(--warn); font-size:17px; letter-spacing:-.01em }
.es-못셈줄{ margin:10px 0 0; padding:9px 12px; border-radius:10px; font-size:12px; line-height:1.65; color:var(--tx2); background:var(--warn-bg); border:1px solid var(--warn-ln) }
/* 🔴 「!」 — J.J 그림 그대로. 글보다 조금 크고 경고색이다. aria-hidden 이라 낭독기는 안 읽는다
   (읽을 것은 뒤따르는 «문장»이다. 「느낌표」를 읽어 주면 방해만 된다) */
.es-못셈표{ margin-right:6px; font-weight:800; color:var(--warn); font-size:13px; line-height:1 }
.es-못셈줄[hidden]{ display:none }
/* 옵션 — 이름 + 값 칩. 대표사진이 있는 값은 사진 칩(⛔ style="background:#색" 으로 되돌리지 마라 — 손님 스토어에 뜨는 건 사진이다) */
.es-옵션칸{ margin-top:18px; display:grid; gap:12px }
.es-옵션칸[hidden]{ display:none }
/* 🔄 2026-09-27 (J.J 신호 3e1ecd7b030c80b4a211e9acb39cbd92 ③ 「미리보기 옵션 아래위 여백이 없다」) — 위 gap 은 칸의 «한 아이»(data-옵칸들)에만
   걸려 옵션 묶음 사이엔 한 번도 안 먹었다. 묶음을 담는 그 마디에 간격을 주고, 편집 테두리와 글이 붙지 않게 안여백을 준다. */
.es-옵션칸 > [data-옵칸들]{ display:grid; gap:14px; padding:4px 2px }
.es-옵이름{ font-size:12px; font-weight:700; color:var(--tx2); margin-bottom:7px }
.es-옵줄{ display:flex; flex-wrap:wrap; gap:7px }
.es-옵{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:30px; padding:0 10px; border-radius:8px;
  border:1px solid var(--line-c); background:var(--card); font-size:12px; font-weight:600; color:var(--tx2) }
.es-옵사진{ width:40px; height:40px; padding:0; border-radius:8px; overflow:clip }
.es-옵사진 img{ display:block; width:100%; height:100%; object-fit:cover }
/* 사이즈표 줄 — 장바구니 «바로 위 · 항상»(J.J 2026-09-20). 시안 ㉢: 글자만 라임 · 테두리·면은 색을 뺀다 · 아직 없으면 «점선».
   ⛔ 테두리·면을 라임으로 되돌리지 마라 — 장바구니 바로 위에 라임 덩어리가 서면 승인과 같은 세기로 읽힌다. 눌리는 것은 이 줄(영역)이다 */
.es-사이즈줄{ margin-top:18px; display:flex; cursor:pointer }
.es-사이즈줄 button{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; font-family:inherit; font-size:12.5px; font-weight:700;
  color:var(--now); border:1px dashed var(--line-c); background:none; pointer-events:none }
.es-사이즈줄[data-있나="예"] button{ border-style:solid; border-color:var(--line-c); color:var(--tx) }
.es-사이즈줄:hover button{ border-color:color-mix(in srgb, var(--now) 55%, transparent); background:color-mix(in srgb, var(--now) 8%, transparent) }
.es-사이즈줄.es-켬 button{ border-style:solid; border-color:var(--now); color:var(--now) }
/* 🆕 2026-09-29 — 옵션 0개일 때만 서는 «＋ 옵션 추가» 점선 줄. 사이즈표 줄과 같은 꼴(점선 · 글자만 라임).
   ⛔ `[hidden]` 줄을 지우지 마라 — 위 display:flex 가 hidden 을 이겨서 옵션이 있어도 줄이 선다. */
.es-옵션추가줄{ margin-top:14px; display:flex; cursor:pointer }
.es-옵션추가줄[hidden]{ display:none }
.es-옵션추가줄 button{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; font-family:inherit; font-size:12.5px; font-weight:700;
  color:var(--now); border:1px dashed var(--line-c); background:none; pointer-events:none }
.es-옵션추가줄:hover button{ border-color:color-mix(in srgb, var(--now) 55%, transparent); background:color-mix(in srgb, var(--now) 8%, transparent) }
/* 장바구니 — 모양만. 안 눌린다(aria-hidden · pointer-events:none)
   🗑 2026-09-26 — 「바로 구매」(.es-주 · 채운 단추)를 걷었다(J.J 신호 3e7ecd7b030c8067b81cca7a7aaf5303 · 판 D). 그리는 자리 0. */
.es-사기{ margin-top:14px; display:flex; gap:10px }
.es-사기 button{ flex:1; height:46px; border-radius:10px; font-family:inherit; font-size:14px; font-weight:700; border:1px solid var(--line-c);
  background:var(--card); color:var(--tx); pointer-events:none }
/* 설명 — «글 하나». 장바구니 아래 · 접히는 탭 위(실제 쇼피파이 상품페이지 그대로) */
.es-상세{ margin-top:26px; padding-top:24px; border-top:1px solid var(--line-s) }
.es-상세 h3{ margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--tx3) }
.es-상세글{ font-size:13px; line-height:1.85; color:var(--tx2); overflow-wrap:anywhere }
.es-상세글 > :first-child{ margin-top:0 }
.es-상세글 img{ max-width:100%; height:auto }
.es-상세글 table{ max-width:100%; border-collapse:collapse }
.es-상세글 td, .es-상세글 th{ border:1px solid var(--line-s); padding:4px 8px }
/* 접히는 추가정보 — 손님 페이지의 그 탭이다(안 펴진다). 값 있는 칸이 0이면 점선 한 줄(규칙 17 — 점선 = 아직 없는 것을 더한다) */
.es-탭들{ margin-top:26px; border-top:1px solid var(--line-s) }
.es-탭줄{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 2px; border-bottom:1px solid var(--line-s);
  font-size:13px; font-weight:600; color:var(--tx2) }
.es-탭줄 .es-cv{ color:var(--tx3); font-size:11px }
.es-탭줄.es-점선{ color:var(--tx3); border-bottom-style:dashed }
/* 코치마크 — 최초 1회. «떠서» 보이고 세로로 0px 을 쓴다. 기준은 .es-무대(position:relative) — 보기를 굴려도 늘 보인다 */
.es-코치막{ position:absolute; inset:0; z-index:35; display:grid; place-items:start center; padding:56px 20px 0; background:rgba(0,0,0,.34) }
.es-코치{ width:min(420px, 100%); padding:16px 18px; border-radius:14px; background:var(--card); border:1px solid var(--line-c); box-shadow:0 18px 44px rgba(0,0,0,.5) }
.es-코치머리{ display:flex; align-items:center; gap:9px; margin-bottom:8px }
.es-코치머리 .es-아{ color:var(--read); display:grid; place-items:center }
.es-코치머리 b{ font-size:13.5px; font-weight:700; color:var(--tx) }
.es-코치 p{ margin:0; font-size:12.5px; line-height:1.75; color:var(--tx2) }
/* 굵게 쓴 «따르는 것» 쪽이 눈에 먼저 들어와야 한다 — 그게 이 안내의 요지다 */
.es-코치 p b{ color:var(--tx); font-weight:700 }
.es-코치발{ margin-top:14px; display:flex; align-items:center; gap:12px }
.es-코치발 a{ font-size:12px; color:var(--tx2); text-decoration:underline; text-underline-offset:3px }
.es-코치확인{ margin-left:auto; height:34px; padding:0 16px; border-radius:9px; border:0; background:var(--now); color:var(--now-ink);
  font-family:inherit; font-size:13px; font-weight:700; cursor:pointer }

/* ══ 패널 — 여덟이 «같은 칸»(격자 둘째 열)에 서고, 보이는 것은 하나다(나머지는 hidden) ══ */
.es-패널{ grid-column:2; grid-row:1; min-width:0; min-height:0; display:flex; flex-direction:column;
  overflow:clip; background:var(--card); border-left:1px solid var(--line-c) }
/* 머리는 «구르지 않는다» — 몸만 구른다. 🔴 flex-wrap 이 있어야 한다: 조치가 필요한 칩의 설명 줄(.chip-say)이
   app.js 손에 의해 칩 자리 «바로 뒤»에 꽂힌다(칩이 제목을 떠났기 때문이다). 안 접으면 그 문단이 제목과 × 사이에 선다. */
.es-패널머리{ flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:16px 16px 14px; background:var(--card); border-bottom:1px solid var(--line-s) }
.es-패널머리 > .chip-say, .es-머리위 > .chip-say, .es-접머리 > .chip-say{ flex:0 0 100%; order:99; margin:6px 0 0 }
.es-패널머리 .es-아{ width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:8px;
  background:var(--chip-c); color:var(--tx2) }
.es-패널머리 > b, .es-머리위 > b{ flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:14px; font-weight:700; letter-spacing:-.015em; color:var(--tx) }
.es-영어{ margin-left:6px; font-size:11.5px; font-weight:600; color:var(--tx3) }
.es-칩자리{ flex:none; min-width:0; display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px }
.es-칩자리:empty{ display:none }
/* 카드 제목에서 옮겨 온 상태 칩은 머리의 «둘째 줄»에 선다. 첫 줄(그림 · 제목 · [자동 설정하기] · ×)은 목업이 잰 그대로라
   380px 에서 남는 폭이 39px 뿐이다 — 칩을 같은 줄에 끼우면 제목이 잘리거나 × 가 아래로 밀린다(하니스 실측).
   (정본에 없는 자리라 이렇게 정했다 — 목업의 패널 머리에는 상태 칩이 없다. 섹션이 패널 속을 갈면 이 칩도 같이 자리를 찾는다) */
.es-패널머리 > .es-칩자리, .es-머리위 > .es-칩자리{ order:98; flex:0 0 100% }
/* 🔴 2026-09-26 (J.J ③ · 그림 jj-0926-편집2-01·02) — 사이즈표 머리는 목업 그대로 «제목 + GloSize 알약 + ✕» 한 줄이다.
   ⑴ 「미적용」 칩을 머리에서 «감춘다». ⛔ 지우지 마라 — 레일 단계 색(app.js 단계목록 `칩: 'szChip'`)이 그 칩을 읽는다.
      칩은 edit-shell.js 가 카드 제목에서 «옮겨» 온 것이라 여기서 없애면 레일도 같이 잃는다. 보이는 것만 끈다.
   ⑵ 칩 자리를 둘째 줄(100%)이 아니라 «제목 줄»에 세운다 — 들어오는 것이 GloSize 알약 하나뿐이라 한 줄에 선다.
   ⑶ 알약 곁말(「연결하면 이 표가 제품에 자동으로 들어가요」)은 머리에서 뺀다 — 목업 머리줄에 곁말이 없다.
      ⚠️ 앞 회차 「페이블 조건 1」(단추와 곁말은 한 마디)과 부딪히는 자리라 J.J 최신 지시와 목업을 따랐다 — 정본에 없는 판단이다.
      마디는 그대로 한 덩어리로 옮겨 온다(손잡이·곁말이 고아가 안 된다). 보이는 것만 끈다. */
.es-패널머리 > .es-칩자리[data-머리칩자리="사이즈표"], .es-머리위 > .es-칩자리[data-머리칩자리="사이즈표"]{ order:0; flex:none }
.es-칩자리[data-머리칩자리="사이즈표"] > .chip6{ display:none }
.es-칩자리[data-머리칩자리="사이즈표"] .sz-send > .muted{ display:none }
/* [자동 설정하기] — 파랑(--read = 알려주기). ⛔ 라임 금지: 라임은 「지금 할 것」이고 그 주인은 승인 하나다(J.J 규칙 16) */
.es-자동칩{ flex:none; height:30px; padding:0 11px; display:inline-flex; align-items:center; gap:6px;
  border-radius:9px; border:1px solid var(--read-ln); background:var(--read-bg); color:var(--read);
  font-family:inherit; font-size:12.5px; font-weight:700; white-space:nowrap; cursor:pointer }
.es-자동칩:hover{ border-color:var(--read); background:color-mix(in srgb, var(--read) 26%, var(--read-bg)) }
.es-자동칩 svg{ flex:none }
/* ⛔ 칩과 닫기를 붙이지 마라 — 잘못 누른다. 가름선이 제 여백을 갖고 있다 */
.es-머리가름{ flex:none; width:1px; height:18px; margin:0 4px 0 5px; background:var(--line-c) }

/* ── 설명 패널 머리는 «두 줄»이다 (J.J 확정 §6-2) ─────────────────────────
   첫줄   상품설명 Description  [✨ 자동 설정하기]  ───── [✕]
   둘째줄   ● 저장 안 됨              무료 N회 남음  [✎ 다시 작성]   ← 오른쪽 정렬
   ⛔ 다른 패널 머리를 건드리지 않는다 — .es-두줄 이 붙은 것(설명)만 갈린다.
   ⛔ ───── 는 «그리는 선»이 아니다. 「닫기를 오른쪽에 두라」는 뜻이다(지침 §2).
      진짜 선은 .es-머리가름 1px 하나뿐이고 그건 첫줄에 이미 있다. 둘째 줄엔 선을 긋지 마라. */
.es-패널머리.es-두줄{ display:block; flex-wrap:nowrap }
.es-머리위{ display:flex; flex-wrap:wrap; align-items:center; gap:10px }
.es-머리아래{ display:flex; align-items:center; gap:10px; margin:6px 0 0 }
/* 🔴 저장 표시는 «왼쪽 끝»이고, 비었을 때(idle) 감춰진다.
   ⛔ 이 칸에 margin-right:auto 를 걸지 마라 — 감춰지면 자리가 없어서 아무것도 안 밀린다
      (지침 §2 실측). 그래서 «밀개»를 따로 둔다. 밀개는 늘 있으니 늘 민다. */
.es-머리아래 > .save-ind{ flex:none }
.es-머리아래 > .save-ind.idle{ display:none }
.es-머리밀개{ flex:1 1 auto; min-width:0 }

/* 🆕 2026-09-25 (J.J 그림 대조 ⑴⑸ · 정본 목업) — 상품설명 패널 «첫 줄»의 차례를 목업에 맞춘다.
     목업 :  [그림] 상품설명 Description [⚙ 자동 설정하기] ───────── │ (✕)
     라이브:  [그림] 상품설명 Description ───────── [⚙ 자동 설정하기] │ (✕)
   까닭은 마크업이 아니라 «누가 늘어나나»였다 — 제목 `<b>` 가 `flex:1 1 0` 이라 제 혼자 늘어나서
   뒤의 것을 통째로 오른쪽 끝으로 밀었다. ⇒ 제목은 «제 폭»만 쓰고, 미는 일은 가름이 맡는다.
   🔴 그래서 **마크업을 한 줄도 안 고쳤다** — edit-shell.js 는 그대로다(자리만 CSS 가 정한다).
   ⛔ 「두 줄 머리」(= 상품설명)에만 건다. 다른 패널은 J.J 가 그림으로 고른 적이 없어 그대로 둔다 —
      정본에 없는 자리를 나 혼자 바꾸지 않는다. 다른 패널도 이렇게 하라시면 `.es-두줄` 만 떼면 된다.
   ⚠️ 그래서 패널마다 [자동 설정하기] 자리가 달라진다. 그것이 거슬리면 J.J 가 정할 일이다. */
.es-패널머리.es-두줄 .es-머리위 > b{ flex:0 1 auto }
.es-패널머리.es-두줄 .es-머리위 > .es-머리가름{ margin-left:auto }
/* ⑸ 머리 아래 가로줄 — 목업엔 «없다». 편집기 상자가 이미 제 테두리를 갖고 있어 선이 둘로 겹쳐 보였다. */
.es-패널머리.es-두줄{ border-bottom:0 }
.es-머리아래슬롯{ flex:none; display:inline-flex; align-items:center; gap:8px }
/* 슬롯 «안»은 app.js 가 그린다(.desc-act). 카드 안에 있을 때 쓰던 여백은 여기선 뺀다 */
.es-머리아래슬롯 .desc-act{ margin:0 }
/* 닫기 — 화면의 여덟 곳이 «한 벌»이다 (J.J 확정 2026-09-18): 동그라미 × 30px · 면 --line-c · 테두리 없음.
   ⛔ border 를 넣지 마라([다시 작성]과 무게가 같아진다 — 한 번 퇴짜난 길이다) · ⛔ 「닫기」 글자를 되살리지 마라(제목이 잘린다)
   ⛔ 네모나 알약으로 바꾸지 마라 · ⛔ 36px 이상으로 키우지도 28px 로 줄이지도 마라(둘 다 J.J 가 보고 물렸다) */
.es-닫{ flex:none; display:grid; place-items:center; width:30px; height:30px; padding:0; border-radius:50%;
  border:0; background:var(--line-c); color:var(--tx); cursor:pointer }
.es-닫 svg{ width:14px; height:14px }
.es-닫:hover{ background:color-mix(in srgb, var(--tx) 22%, var(--line-c)) }
.es-패널몸{ flex:1 1 auto; min-height:0; overflow:auto; padding:16px;
  display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-content:start }

/* ── 과도기 담기 — 기존 카드가 «통째로» 들어온다. 패널이 이미 한 장의 면이라 카드의 제 면·테·번호는 걷는다 ──
   (섹션 행이 패널 속을 목업대로 갈 때 이 묶음은 그 칸부터 필요 없어진다) */
.es-패널몸 > .card, .es-접몸 > .card{ min-width:0; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none }
.es-패널 .es-패널몸 .card h2.big::before{ display:none }
/* 같은 말 두 번 금지(J.J 규칙 20) — 패널 머리(운영은 접이 머리)가 이미 말한 제목만 감춘다. ⛔ 선택자로 넓게 잡지 마라:
   판매가 패널의 둘째 카드 제목 「변형별 가격 · 사진」은 패널 제목과 다른 말이다. 어느 카드인지는 edit-shell.js 의 칸표가 정한다. */
.es-제목감춤 > h2.big, .es-제목감춤 > .card-h > h2.big, .es-제목감춤 > .card-top > h2.big{ display:none }
.es-제목감춤 > .card-h:has(> h2.big:only-child){ display:none }
/* 머리에 [자동 설정하기] 가 선 카드만 제 톱니를 감춘다 — 같은 문이 둘이 되지 않게. 문 자체는 그 톱니다(안 보여도 눌린다) */
.es-톱니감춤 > .card-h > .cg-anc{ display:none }
.es-제목감춤.es-톱니감춤 > .card-h:not(:has(> :not(h2.big):not(.cg-anc))){ display:none }

/* ══ 손잡이 다섯 계단 — «공용 한 벌» (J.J 확정 2026-09-13 · 부모 행 공통 규칙 ①) ═══════════
   섹션마다 다시 만들지 마라. 값은 설계그림(목업-지에딧-제품편집-판매페이지형-20260911.html)의
   `.칸` · `.봄` · `.되` · `.원본팝` 규칙 그대로 옮긴 것이다(한글 클래스는 안 베꼈다 — es- 이름으로 옮겼다).
   🔴 역할이 다르면 모양도 다르다. 한 화면에 «면까지 파란» 손잡이는 [자동 설정하기] 칩 하나뿐이다:
       입력칸 = 면 있음 · 보기 = 맨몸(파란 글자) · 되돌리기 = 테두리만(⛔ 빨강 금지) · 칩 = 파란 면
   ⛔ 검정 바탕에 검정 테두리를 두지 마라(J.J §2) — 칸의 «경계»가 사라진다.
      --line-c 는 «칸을 가르는 줄»이라 입력칸 테두리로 쓰기엔 한 급 어둡다. */
.es-칸{ margin:0 }
.es-칸 + .es-도구줄{ margin-top:10px }
.es-라벨{ display:block; font-size:12px; font-weight:600; color:var(--tx2); margin-bottom:7px }
/* ⚠️ 영어 칸이름은 라이브 `.card h2 .en` 과 «같은 자»다(11.5/600/muted/6px).
      ⛔ 라벨을 textContent 로 다시 그리지 마라 — 이 칸이 조용히 사라진다. innerHTML 로 그린다. */
.es-라벨 .en{ margin-left:6px; font-size:11.5px; font-weight:600; color:var(--tx3); vertical-align:baseline }
/* 🔴 선택자를 «두 겹»으로 둔다 — styles.css 의 `input[type="text"]`(0,1,1)·`input:focus`(0,1,1) 이
   홑겹 클래스(0,1,0)를 이긴다. 실측 2026-09-22: 테두리가 조용히 --line-c 로 돌아가
   검은 바탕 대비가 1.61 이었다(바라는 값 3.0↑). 오류는 0줄이었고 «색만» 옛것이었다.
   ⛔ 홑겹으로 되돌리지 마라. ⛔ !important 로 이기지 마라 — 그러면 섹션마다 또 !important 가 붙는다. */
.es-칸 .es-입력{ width:100%; font-family:inherit; font-size:13.5px; font-weight:400; color:var(--tx);
  background:var(--page); border-radius:9px; padding:10px 12px; outline:none;
  border:1px solid color-mix(in srgb, var(--tx3) 72%, var(--line-c));
  transition:border-color .12s, box-shadow .12s }
/* ⚠️ 라이브 `input:focus` 는 outline 2px + border-color:transparent 다 — 그대로 두면 테두리가 «사라진다» */
.es-칸 .es-입력:focus{ outline:none; border-color:var(--read);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--read) 22%, transparent) }
.es-칸오류{ display:none; margin:7px 0 0; font-size:11.5px; font-weight:600; color:var(--danger) }
/* 오류는 «틀렸을 때만» 자리를 차지한다 — ⛔ 평소에 빈 줄을 잡아 두지 마라(칸이 들썩인다) */
.es-틀림 .es-입력, .es-틀림 .es-입력:focus{ border-color:var(--danger) }
.es-틀림 .es-칸오류{ display:block }
.es-도구줄{ display:flex; gap:8px; flex-wrap:wrap }
.es-봄자리{ position:relative; display:inline-flex }
.es-봄{ height:28px; padding:0 6px; display:inline-flex; align-items:center; gap:6px;
  border:0; border-radius:7px; background:none; color:var(--read);
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer }
.es-봄:hover{ background:color-mix(in srgb, var(--read) 12%, transparent) }
.es-되{ height:28px; padding:0 10px; display:inline-flex; align-items:center; gap:6px;
  border:1px solid color-mix(in srgb, var(--tx3) 70%, var(--line-c));
  border-radius:7px; background:none; color:var(--tx3);
  font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer }
.es-되:hover{ border-color:var(--tx3); color:var(--tx2); background:color-mix(in srgb, var(--tx) 5%, transparent) }
/* 팝오버는 «누른 단추 바로 아래»다 (J.J 2026-09-13 — ⛔ 모달 아님 · 바깥을 누르면 닫힌다) */
.es-원본팝{ position:absolute; left:0; top:calc(100% + 7px); z-index:30; width:320px; max-width:78vw;
  padding:12px 13px; border-radius:11px; border:1px solid var(--line-c); background:var(--card);
  box-shadow:0 14px 34px rgba(0,0,0,.42) }
.es-원본팝 b{ display:block; font-size:11.5px; font-weight:800; color:var(--read); margin-bottom:6px }
.es-원본팝 .글{ display:block; font-size:12.5px; line-height:1.6; color:var(--tx); word-break:break-word }

/* ── 벤더 — 「자동」 딱지는 «회색 옅은 알약»이다 (J.J 확정 2026-09-17 · 설계그림 .벤더값 .딱지) ──
   🔴 라이브 `.tb-badge.auto` 는 styles.css 안에서 «다섯 번» 선언되고 맨 뒤 것(「자동 배지 전부 보라로 통일」)이
      이긴다 — 그래서 계산된 색이 회색이 아니라 --now 계열이다. 섹션 정본은 「⛔ 파랑 금지 · 회색 옅은 알약」이라
      여기서 «이 패널 자리»만 못 박는다. ⛔ styles.css 의 전역 규칙을 고치지 마라 —
      그 색은 「추가 정보」 칸이 쓰는 확정값이라 같이 바뀌면 남의 섹션이 조용히 달라진다.
   ⚠️ 「직접 입력」(.tb-badge.own · 라임)은 그대로 둔다 — 자동이 아니라는 표시라 색이 달라야 한다. */
/* ⚠️ 머리는 반드시 `.es-` 로 시작한다 — 이 파일은 «늘 실리므로» 옛 화면에 새면 안 된다.
      tests/test-edit-shell.js ⓐ 가 그것을 잰다(맨몸 `#venRow …` 로 썼다가 붉어졌다 · 2026-09-22). */
.es-패널몸 #venRow .tb-badge.auto{ color:var(--tx3); background:color-mix(in srgb, var(--tx3) 14%, transparent);
  border:1px solid var(--line-c) }
/* 값은 «읽는 글자»다(⛔ 단추처럼 보이면 안 된다 · J.J 2026-08-22) — 설계그림 .벤더값 .값 */
.es-패널몸 #venRow .ven-read{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; min-height:34px }
.es-패널몸 #venRow .ven-val{ font-size:15px; font-weight:700; color:var(--tx); letter-spacing:-.01em }

/* ── 운영 — 넷이 «같이» 보이고 누른 것만 펼쳐진다 (J.J 규칙 4) ── */
.es-패널[data-es칸="운영"] > .es-패널몸{ gap:0; padding-top:4px }
.es-접{ min-width:0; border-bottom:1px solid var(--line-c) }
.es-접:last-of-type{ border-bottom:0 }
.es-접머리{ width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:13px 0;
  font-size:13px; font-weight:700; color:var(--tx); text-align:left; cursor:pointer }
.es-접머리:focus-visible{ outline:2px solid var(--read); outline-offset:2px; border-radius:6px }
.es-접이름{ flex:none }
/* 물음표는 «이름 바로 옆»이다 (J.J 2026-09-18 — 세모 옆으로 밀려 있던 것을 옮겼다).
   ⛔ 자리만 잡는다 — 모양은 라이브 `.cat-q` 그대로고, 여기서 다시 짓지 않는다.
   도움말 판은 그 마디가 들고 온 `.cat-pop` 이라 «떠서» 아래 줄을 안 민다(J.J 확정). */
.es-물음자리{ flex:none; display:inline-flex; align-items:center }
.es-물음자리:empty{ display:none }
.es-접값{ flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:11.5px; font-weight:700; color:var(--read) }
/* 🆕 2026-09-25 (J.J ⑰ ① · 정본 목업 M:2290) — «펼치면» 접은 줄의 값은 숨는다.
   까닭 — 그 값은 「접혀 있어도 알 수 있게」 하는 요약이다. 펼치면 진짜 내용이 바로 아래 있어서
   같은 말을 두 번 하고, 요약과 실제가 어긋나 보이는 순간(다시 세기 전)이 생긴다.
   ⛔ `display:none` 이 아니라 `opacity:0` 이다(목업 그대로) — 자리를 잃으면 ▾ 가 좌우로 움직인다. */
.es-접머리[aria-expanded="true"] .es-접값{ opacity:0 }

/* 🆕 2026-09-25 (J.J ⑰ ① · 정본) — 접은 줄은 «이름 + 값 + ▾» 뿐이다. 카드 상태칩은 안 보인다.
   ⛔ 칩을 «지우지» 않는다 — app.js 의 stChip 이 그 마디를 id 로 찾아 칠하고, 승인 바·레일 요약이
      같은 칩을 읽는다. 지우면 그 셋이 조용히 죽는다. ⇒ 마디는 두고 «안 보이게»만 한다.
   ⚠️ 잃는 것: 접힌 채로는 「해야·봐야」 상태를 칩으로 못 본다. 다만 값 줄(.es-접값)이
      「미설정」 같은 말을 경고색으로 이미 말하고, 펼치면 카드 안에서 그대로 보인다.
      정본이 그 모양을 고른 것이라 되돌리려면 J.J 가 다시 정해야 한다. */
.es-접머리 > .es-칩자리, .es-접머리 > .chip-say{ display:none }
/* ⚠️ 화살을 돌리지(rotate) 않고 글자를 바꾼다 — 패널 안에서는 transform 을 한 곳도 안 쓴다(위 머리말의 금지 목록) */
.es-접화살{ flex:none; color:var(--tx3); font-size:13px }
.es-접화살::before{ content:"\25BE" }
.es-접머리[aria-expanded="true"] .es-접화살::before{ content:"\25B4" }
.es-접몸{ min-width:0; padding:0 0 14px }
/* 🔴🔴 앞줄(파란 띠) — «펼친 칸»이 갖는다 (J.J 2026-09-18 · 목업 2298~2305 값 그대로)
   J.J 원문: 「컬렉션과 태그만 따로 앞줄을 해두지 말고 모든 상품운영정보 안의 내용이 오픈될 때마다
              앞줄을 주세요. 카테고리를 누르든 제품유형을 누르든 컬렉션과 태그가 너무 튀어서
              헷갈리기 때문입니다.」
   ⛔ 컬렉션·태그에 «늘» 붙는 띠·면을 되살리지 마라 — 그게 「너무 튀던」 그것이다.
   ⛔ 면을 세게 주지 마라(5%) — 세면 칸이 «다른 창»처럼 보인다.
   ⚠️ 새 마디·새 class 를 만들지 않는다 — 접이펴기() 가 이미 aria-expanded 를 넷 다 갱신하므로
      이 규칙 하나면 «열린 칸»을 정확히 고른다. 열린 칸이 어디든 같은 얼굴이라 서로 안 겨룬다.
   ⚠️ margin:0 -10px 은 .es-패널몸 의 좌우 padding(16px) «안»이라 넘치지 않는다.
   ⛔ 머리는 반드시 .es- 로 시작한다 — 이 파일은 «늘» 실려서 옛 화면에 샌다
      (목업 이름 «.접칸» 을 그대로 베끼면 tests/test-edit-shell.js ⓐ 가 붉어진다). */
.es-접:has(> .es-접머리[aria-expanded="true"]){
  margin:0 -10px; padding:0 8px 0 10px; border-radius:10px;
  background:color-mix(in srgb, var(--read) 5%, transparent);
  border-left:2px solid var(--read-ln) }

/* ══ 레일 — 패널이 닫혀 있어도 «어디를 고칠 수 있나»가 보인다 ═══════════════════════
   ⛔ border-left 가름선을 되살리지 마라 (J.J 2026-09-20: 선 위에 아이콘이 «꿰인 것»처럼 보였다) — 면을 한 급 올려 가른다 */
.es-레일{ grid-column:3; grid-row:1; min-height:0; overflow:clip; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 0; background:color-mix(in srgb, var(--tx) 3%, var(--page)) }
[data-theme="light"] .es-레일{ background:var(--card) }
.es-레일 button{ width:34px; height:34px; padding:0; display:grid; place-items:center; border-radius:9px;
  border:1px solid transparent; background:none; color:var(--tx3); cursor:pointer }
.es-레일 button:hover{ color:var(--tx); background:color-mix(in srgb, var(--tx) 7%, transparent) }
.es-레일 button.now{ color:var(--now); background:color-mix(in srgb, var(--now) 13%, transparent) }
/* 🆕 2026-09-27 (J.J ㉠ · 파란 단추) — 레일 맨 아래 「? 가이드」. 파랑은 가이드 파랑 한 벌(--read · .es-자동칩과 같은 결)이다. */
.es-레일 .es-레일가이드{ margin-top:auto; width:40px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-radius:10px; border:1px solid var(--read-ln); background:var(--read-bg); color:var(--read) }
.es-레일 .es-레일가이드 b{ font-size:14px; font-weight:800; line-height:1 }
.es-레일 .es-레일가이드 span{ font-size:9.5px; font-weight:700; line-height:1.1; letter-spacing:-.02em }
.es-레일 .es-레일가이드:hover{ color:var(--read); border-color:var(--read); background:color-mix(in srgb, var(--read) 26%, var(--read-bg)) }

/* ══ 알림 — 목업에 자리가 없는 라이브 알림 셋(중국어 남음 · 「승인했는데 아직 안 갔어요」 · 저장 실패) ═══
   상태바 «바로 위» 얇은 줄이다. 내용이 있을 때만 높이가 생긴다 — 셋 다 비어 있거나 숨어 있으면 0 이다. */
.es-알림{ flex:none; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:0 16px }
.es-알림:has(> :not([hidden]):not(:empty)){ padding-top:8px; padding-bottom:8px }

/* ══ 상태바 — 라이브 `#gateBar` «그 마디 자체»다. 여기서는 «자리»만 잡는다 ══════════════════
   ⛔ overflow 를 걸지 마라 — 잠긴 승인의 쪽지와 「승인 후 제품 상태」 판이 위로 뜬다.
   라이트에서만 바닥을 --card 로 올리는 까닭은 모양이 아니라 «읽힘»이다(목업 실측: 3% 섞은 바탕 위 --read 글자 4.43 → --card 위 4.99). */
.es-상태바{ flex:none; min-width:0; display:flex; flex-wrap:nowrap; align-items:center; gap:12px;
  height:56px; margin:0; padding:0 24px 0 16px; border:0; border-top:1px solid var(--line-c); border-radius:0;
  background:color-mix(in srgb, var(--tx) 3%, var(--page)) }
[data-theme="light"] .es-상태바{ background:var(--card) }
/* ── .st-gate 를 안 입혀서 «같이 사라지는» 라이브 규칙 17 중 이어받을 것(D-2) ──
   `.gate-right{flex:none}` 을 안 받으면 밑의 `.gate-right{flex-wrap:wrap}` 이 살아, 저장 표시·임시저장·승인이 nowrap 상태바 안에서
   저희끼리 두 줄로 접힌다. `margin-left:auto` 는 운영 무리가 가져간다(운영정보 ↔ 임시저장 사이 = gap 12 + 16 = 28 · J.J 24~32).
   안 받는 것: 도는 빛 넷(::before · :disabled::before · reduce-motion) · .gate-say 넷(그 마디가 템플릿에 없다) · .st-gate 제 sticky·그림자. */
.es-상태바 > .pub-one{ flex:none; min-width:0 }
.es-상태바 .gate-right{ flex:none; flex-wrap:nowrap; gap:13px; margin-left:16px }
.es-상태바 .save-ind{ font-size:11.5px; font-weight:600; opacity:.85 }
.es-상태바 .save-ind.안됨{ opacity:1 }
/* ── 승인 = «라임 알약 · 빛 없음» (J.J 2026-09-20 세 바퀴 끝 「라임버튼 알약 그냥 그걸로」) ──
   ⛔ ::before(도는 빛)·animation 을 되살리지 마라 — 세기는 «면»이 내는 것이지 «빛»이 내는 것이 아니었다.
   ⚠️ 라이브(.st-gate .gate-approve)는 지금도 알약 + 도는 빛이다 — 이쪽이 J.J 가 보고 고른 «나중» 것이다.
   ⚠️ 라이트에서 --now 는 파랑이다. 「라임」은 다크의 모습이고, 색 값을 안 박는 한(규칙 18) 라이트는 파랑 알약이 맞다.
   잠김(:disabled)은 라이브 값 그대로(--wait-bg/--wait/--wait-ln) + opacity:1 — 밑의 `.gate-approve:disabled{opacity:.5}` 가
   .st-gate 없이도 걸리기 때문에 «적어야» 한다. 검정은 black 으로 적는다(# 색 글자 0건). */
.es-상태바 [data-승인]{ position:static; height:36px; padding:0 26px; border-radius:9999px; border:1px solid var(--now); background:var(--now); color:var(--now-ink);
  font-family:inherit; font-size:13px; font-weight:700; line-height:1; box-shadow:none; cursor:pointer; white-space:nowrap }
.es-상태바 [data-승인]:hover{ background:color-mix(in srgb, var(--now) 88%, black); border-color:color-mix(in srgb, var(--now) 88%, black) }
.es-상태바 [data-승인]:disabled{ opacity:1; cursor:not-allowed; background:var(--wait-bg); border-color:var(--wait-ln); color:var(--wait); box-shadow:none }
/* ── 임시저장 = 사각 9px — 알약은 승인 «하나뿐»이다(J.J 2026-08-28). 「저장 안 됨」이면 면이 차오른다: --chip-c + --tx3 테두리.
   ⛔ 금색 금지(09-20 걷음) · ⛔ «못 누르는 승인» 한 벌(--wait-bg …)로 하지 마라 — 임시저장이 «꺼진 승인»으로 읽힌다. */
.es-상태바 [data-임시저장]{ height:36px; padding:0 16px; border-radius:9px; border:1px solid var(--line-c); background:var(--card); color:var(--tx);
  font-family:inherit; font-size:13px; font-weight:700; line-height:1; box-shadow:none; cursor:pointer; white-space:nowrap }
.es-상태바 [data-임시저장]:hover{ border-color:var(--tx3) }
.es-상태바 [data-임시저장].안됨{ background:var(--chip-c); border-color:var(--tx3); color:var(--tx); font-weight:800 }
/* ── 운영 칩 넷 (J.J 확정 2026-09-13 · B안 오른쪽) — 승인 «직전에 한 번 훑는 자리». 같은 줄이지만 다른 무리 · 사이를 띄운다.
   ⛔ 하단 «중앙»으로 되돌리지 마라 · ⛔ 승인 단추에 붙이지 마라 · ⛔ align-items:baseline 금지(글자만 9px 아래로 쏠린다 — 목업 실측)
   값은 파랑(--read = 알려주기). 빈 값 = --warn(봐 주세요) · 없음 = --tx3. ⛔ 라임(승인) · 금색(코인) 금지. */
.es-운영무리{ display:flex; align-items:center; gap:0; min-width:0; flex-wrap:nowrap; margin-left:auto }
/* 📱 폰 폭 — 상태바가 한 줄에 «안 들어간다». 실측 375·390 에서 [승인]의 오른끝이 418px 이라
   화면 «밖»으로 나가 손님이 누를 수가 없었다(문서는 안 넘쳤다 — 그래서 넘침 잣대만으로는 안 잡힌다).
   🔴 접는 차례는 상단 두 줄 정본과 같다 — «알려주는 것»부터 접고 «누르는 것»은 끝까지 남긴다.
      ⇒ 운영 칩 넷(컬렉션·태그·카테고리·유형 = 훑어보는 값)을 접고, 임시저장·승인은 그대로 둔다.
      그 값들은 패널을 열면 그대로 있다 — 폰에서 잃는 것은 «한눈에 보기»뿐이다.
   ⛔ 승인·임시저장을 줄이거나 아이콘으로 바꾸지 마라(J.J 확정 모양) · ⛔ 바를 두 줄로 만들지 마라(높이 56 은 못이다).
   ⚠️ 「승인 후 제품 상태」는 «고르는 것»이라 남긴다 — 다만 자리를 양보하게 줄어들 수 있게 둔다. */
.es-좁음 .es-상태바 .es-운영무리{ display:none }
.es-좁음 .es-상태바 > .pub-one{ flex:0 1 auto; min-width:0; overflow:hidden }
.es-좁음 .es-상태바 .gate-right{ margin-left:auto }
/* 🔄 2026-09-27 (J.J 신호 3ddecd7b030c80a6b3aecf3c115a46a3 「하단 스티키가 모바일에서 겹쳐져」) — 폰 실측: 「승인 후 제품 상태」 글자가 자리를 먹어
   값 칩이 「Acti」로 잘렸고, 저장 점이 칩 옆에 끼었고, AI 리포트 알약(글자 포함)이 본문 위에 얹혀 문장을 가렸다.
   ⇒ 폰에서만: 칩 앞 설명 글자(.pub-one-t)를 접고(칩 자체 = 고르는 것은 남김) · 저장 점을 감추고(「저장 안 됨」은 임시저장 단추 면이 이미 말한다)
      · 여백을 줄이고 · AI 리포트는 아이콘 + 수만(글자 접음) 오른쪽 끝으로. ⛔ 두 줄로 만들지 않는다(높이 56 못) · 승인·임시저장 모양 그대로. */
.es-좁음 .es-상태바{ gap:8px; padding:0 12px }
.es-좁음 .es-상태바 .pub-one-t{ display:none }
.es-좁음 .es-상태바 > .pub-one{ flex:0 1 auto; overflow:visible }
.es-좁음 .es-상태바 .save-ind{ display:none }
.es-좁음 .es-상태바 .gate-right{ gap:8px }
.es-좁음 .es-상태바 #acAnchor{ right:12px !important }
.es-좁음 .es-상태바 .ai-btn{ font-size:0; gap:4px; padding:6px 8px 6px 6px }
.es-좁음 .es-상태바 .ai-btn .ai-count{ font-size:12px }
.es-운영칩{ display:inline-flex; align-items:center; gap:5px; min-width:0; max-width:190px; height:26px; padding:0 9px; border-radius:8px;
  border:1px solid transparent; background:none; font-family:inherit; font-size:11.5px; color:var(--tx); cursor:pointer }
.es-운영칩:hover{ border-color:var(--line-c); background:var(--card) }
.es-운영칩 .es-이름{ flex:none; font-weight:600; color:var(--tx3) }
.es-운영값{ min-width:0; font-weight:700; color:var(--read); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.es-운영값.es-빔{ color:var(--warn) }
.es-운영값.es-없음{ color:var(--tx3); font-weight:600 }
.es-운영가름{ flex:none; width:1px; height:14px; background:var(--line-c); margin:0 2px }
/* 편집 칸 ≤ 1180(«빠듯») — 칩의 말줄임 자리를 줄인다. 폭이 아니라 «말»이다(목업의 1180 셋째 폭은 안 넣었다 · Q1 ㉠) */
.es-빠듯 .es-운영칩{ max-width:130px }
/* ── 사진 작업판이 열리면 상태바를 «걷는다» (J.J 2026-09-16) ──
   🔴 장식이 아니다: #acAnchor(AI 점검 · fixed · z 55)가 이 마디 «안»에 있어 판(z 30) 위로 뚫고 나온다 — 옛 화면은 .st-gate 를
   display:none 해서 그것까지 감췄다. 새 껍데기에선 이 한 줄이 그 일을 한다. 설명 패널은 작업판이 아니라 안 걸린다(거긴 임시저장이 유일한 저장 길). */
body:has(> #pboard:not([hidden])) .es-상태바{ display:none }
/* ── AI 점검 단추 자리 (D-6) — 템플릿의 인라인 right:18px 은 새 화면에서 레일 52 + 열린 패널(380~820) 위에 얹힌다.
   미리보기 쪽 오른쪽 아래로 비킨다. 인라인을 이겨야 해서 !important 가 하나 든다(색이 아니라 «자리»다). 패널이 닫히면 --es-패널폭 이 0 이라 레일 바로 왼쪽. */
.es-상태바 #acAnchor{ right:calc(var(--es-레일폭) + var(--es-패널폭) + 18px) !important }
/* ── .pane-head — 알약(#studio-status: 올리는 중 · Shopify 반영 안 됨 · 실패)이 숨어 있으면 줄째 접는다(나머지 둘은 styles.css 가 이미 display:none).
   보일 때는 pane 의 안여백이 0 이므로 제 여백을 준다. 🔴 `.es-집` 마디까지 같이 거는 까닭: pane 의 속성은 끈적하다(위 높이 사슬 주석). */
.pane[data-껍데기="판매페이지"]:has(> #studio-root > .es-집) > .pane-head{ padding:8px 16px; flex:none }
.pane[data-껍데기="판매페이지"]:has(> #studio-root > .es-집) > .pane-head:not(:has(#studio-status:not([hidden]))){ display:none }

/* ══ 메뉴 줄 맨 오른쪽의 문 「메뉴 카테고리 설정하기 ↗」 (J.J 2026-09-21 · 규칙 23) ═══════════════════
   «다른 화면으로 나가는 문»이다 — 가게 메뉴 항목이 아니다. ⛔ 가게 메뉴와 같은 글꼴·색으로 만들지 마라 · ⛔ 라임 금지(파랑 --read = 알려주기).
   자리는 absolute(흐름 밖) — 링크의 가운데 정렬이 문 폭에 안 흔들린다. 겹침은 .gr-menu 에 좌우 «같은» 안여백(--es-문폭)을 줘서 막는다.
   ⛔ .gr-menu 에 container-type 금지 — .gr-sub(하위판)가 fixed 다. ⛔ transform 으로 세로 가운데를 잡지 마라(금지 목록) — margin 으로.
   🔴 명시도 — .gr-menu.모름 button(0,2,1 · 「↻ 다시 읽기」용)이 nav 안의 모든 button 에 걸린다. 한 겹(.gr-menu-door)이면 가게 메뉴를 못 읽은
      상태에서 파랑 알약이 회색 네모가 된다(오류 0줄). 그래서 문의 규칙은 전부 .gr-menu-door[data-메뉴설정][type="button"](0,3,0)로 적는다. */
.gr-menu:has(> [data-메뉴설정]){ --es-문폭:212px; position:relative; padding-inline:var(--es-문폭) }
.gr-menu:has(> [data-메뉴설정]):has(> .gr-menu-door-짧게){ --es-문폭:64px }
/* ≤1100 은 shell.css 가 메뉴 줄을 «옆으로 미는» 구간이다(flex-start · overflow-x:auto) — 왼쪽 여백은 원래대로, 오른쪽만 문 자리를 남긴다 */
@media (max-width:1100px){ .gr-menu:has(> [data-메뉴설정]){ padding-left:20px } }
.gr-menu-door[data-메뉴설정][type="button"]{ position:absolute; right:14px; top:50%; margin-top:-14px; display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 11px; border-radius:999px; cursor:pointer; white-space:nowrap; opacity:1;
  border:1px solid var(--read-ln); background:var(--read-bg); color:var(--read);
  font-family:inherit; font-size:11.5px; font-weight:800; letter-spacing:0; line-height:1 }
.gr-menu-door[data-메뉴설정][type="button"]:hover{ background:color-mix(in srgb, var(--read) 20%, var(--read-bg)) }
.gr-menu-door[data-메뉴설정][type="button"] svg{ flex:none }
.gr-menu-door[data-메뉴설정][type="button"][hidden]{ display:none }
/* 빠듯하면 글자를 접고 아이콘 + ↗ 만 (aria-label·title 은 온전하다). 경계는 edit-shell.js 가 「마지막 링크 오른쪽 ≤ 문 왼쪽」으로 잰다 */
.gr-menu-door[data-메뉴설정][type="button"].gr-menu-door-짧게{ padding:0 9px }
.gr-menu-door[data-메뉴설정][type="button"].gr-menu-door-짧게 > .gr-menu-door-tx{ display:none }
/* 🆕 2026-10-11 밤업무 12 · 🔄 2026-10-14 (J.J 시안 4) — [메뉴 전체 보기]는 «오른쪽» 문 바로 왼쪽 · 회색 알약(이 화면 안에서 열고 닫는 단추).
   ⛔ 파랑(--read)을 안 쓴다 — 파랑은 «다른 화면으로 가는 문»(옆 설정하기)이다. 둘이 나란히 있어도 갈리게.
   자리(right)와 안여백(--es-문폭)은 edit-shell.js 문폭맞추기() 가 «잰 값»으로 건다. 같은 명시도 규칙(0,3,0) — .gr-menu.모름 button 에 안 진다. */
.gr-menu-all[data-메뉴전체][type="button"]{ position:absolute; right:240px; top:50%; margin-top:-14px; display:inline-flex; align-items:center; gap:6px;
  height:28px; padding:0 11px; border-radius:999px; cursor:pointer; white-space:nowrap; opacity:1;
  border:1px solid var(--line-c); background:var(--chip-c); color:var(--tx2);
  font-family:inherit; font-size:11.5px; font-weight:800; letter-spacing:0; line-height:1 }
.gr-menu-all[data-메뉴전체][type="button"]:hover{ border-color:var(--tx3); color:var(--tx) }
.gr-menu-all[data-메뉴전체][type="button"].gr-menu-all-켜짐{ background:var(--tx); border-color:var(--tx); color:var(--card) }
.gr-menu-all[data-메뉴전체][type="button"] svg{ flex:none }
.gr-menu-all[data-메뉴전체][type="button"][hidden]{ display:none }
.gr-menu-all[data-메뉴전체][type="button"].gr-menu-all-짧게{ padding:0 9px }
.gr-menu-all[data-메뉴전체][type="button"].gr-menu-all-짧게 > .gr-menu-all-tx{ display:none }
@media (max-width:1100px){ .gr-menu:has(> [data-메뉴설정]):has(> [data-메뉴전체]:not([hidden])){ padding-left:20px } }
.app-shell[data-screen="app"]:has(> .pane[data-pane="studio"][hidden]) > .gr-menu > .gr-menu-all[data-메뉴전체][type="button"]{ display:none }

/* 편집 pane 이 숨어 있으면(목록 화면) 문도 숨는다 — 편집 화면에서만 서는 문이다 */
.app-shell[data-screen="app"]:has(> .pane[data-pane="studio"][hidden]) > .gr-menu > .gr-menu-door[data-메뉴설정][type="button"]{ display:none }

/* ══ 좁은 화면 — 편집 칸 ≤ 900 (J.J 규칙 7 · 2026-09-27 패널은 «감춤» 대신 전체 화면 판) ═══════════════════════════════════════
   판정은 edit-shell.js 가 ResizeObserver 로 «편집 칸»을 재서 .es-좁음 을 붙인다(창이 아니다 — 기둥 222px 이 있다).
   폭이 변수 하나라 아래 세 선택자가 없어도 미리보기는 안 짜부라지지만, 규칙 7이 「클래스 셋까지 규칙에 적는다」고 못 박았고
   섹션 행들이 그 문장을 인용하므로 글자 그대로 셋을 적는다. (목업의 80px 사고: 클래스 셋짜리가 미디어 규칙의 둘짜리를 이겼다) */
.es-좁음 .es-바닥, .es-좁음 .es-바닥.es-열림, .es-좁음 .es-바닥.es-열림.es-넓게{ grid-template-columns:minmax(0,1fr) }
.es-좁음 .es-레일{ display:none }
/* 🔄 2026-09-27 (J.J 신호 3ddecd7b030c80a6b3aecf3c115a46a3 「모바일에서 편집창을 눌러도 아예 열리지 않아요 · 전체화면 사이드창으로」)
   병: 여기서 패널까지 display:none 이라, 미리보기를 누르면 열기('…')가 돌고 초록 테두리까지 섰는데 판은 0×0 이었다.
   ⇒ 좁을 때 패널 = «전체 화면 판». 닫힌 판은 styles.css [hidden]{display:none !important} 가 그대로 감춘다.
   z 45 = 위 띠(30) 위 · 모달(50)·서랍(55/60)·사이즈표 확대(80)·둘러보기(8990+) 아래. 조상에 transform·filter·contain 없음(fixed 가 창을 덮는다 · 조사 실측). */
.es-좁음 .es-패널{ display:flex; position:fixed; inset:0; z-index:45; border-left:0 }
/* 🆕 2026-09-27 (J.J 신호 3e8ecd7b030c80beb2c6c4a9c2698a35 「스토어 메뉴와 설정창 경계가 안 보인다」) — 설정창 «위»에 선 한 줄.
   가게 메뉴 줄(.gr-menu)과 설정창이 같은 회색 면이라 맞닿아 한 덩어리로 보였다.
   ⛔ 메뉴 줄 쪽에 선을 긋지 않는다 — shell.css 가 「그 줄의 면이 곧 경계 · 위·아래 선 금지」로 막아 둔 자리다. 설정창 쪽에만 긋는다.
   ⚠️ 폰(좁음)은 설정창이 화면 전체라 맞닿는 메뉴가 없다 — 거기선 안 긋는다. */
.es-집:not(.es-좁음) .es-패널{ border-top:1px solid var(--line-c) }
/* 판이 열린 동안 상태바를 걷는다 — 그 안의 #acAnchor(fixed · z 55)가 판 위로 뚫고 나온다(아래 사진 작업판 규칙과 같은 까닭). */
.es-집.es-좁음:has(> .es-무대 > .es-바닥.es-열림) > .es-상태바{ display:none }

/* ══ 폰 하단 「상품 설정 · {현재 상태} ▴」 문 + 바텀 시트 (J.J 신호 3ebecd7b030c810585aceee4ff917cd7 · 2026-09-30) ══════════════
   «폰만»이다 — 문·시트 고름·짧은 제목 전부 좁음(es-좁음) 일 때만 보이고, PC(넓음)는 한 픽셀도 안 바뀐다(문은 display:none · 시트 규칙은 좁음 머리).
   🔴 #pubOne(Draft 고르기)을 감추는 것은 «문이 있을 때만»이다(`:has(> .es-설정문)`) — app.js 가 문(공개상태…)을 아직 안 건네는 판이면
      edit-shell.js 가 문을 안 짓고, 폰은 옛 모양 그대로 #pubOne 으로 고른다. 고를 길이 없어지는 배포 차례가 없다.
   ⛔ 새 줄(sticky)을 만들지 마라 — 같은 상태바 한 줄(높이 56 못). 오른쪽 임시저장·승인은 모양 그대로(위 규칙).
   ⚠️ 줄어드는 차례: 문의 «이름»(상품 설정 · 영어는 Product settings)이 말줄임으로 먼저 줄고, 상태 글자(Active/Draft)는 끝까지 남는다.
      승인은 줄지 않는다(누르는 무리는 flex:none). */
.es-상태바 > .es-설정문{ display:none }
.es-좁음 .es-상태바:has(> .es-설정문) > .pub-one{ display:none }
.es-좁음 .es-상태바 > .es-설정문{ flex:0 1 auto; min-width:0; display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 11px;
  border-radius:9px; border:1px solid var(--line-c); background:var(--card); color:var(--tx);
  font-family:inherit; font-size:12.5px; font-weight:700; line-height:1; white-space:nowrap; cursor:pointer }
.es-좁음 .es-상태바 > .es-설정문[aria-expanded="true"]{ border-color:var(--tx3) }
.es-설정이름{ min-width:0; overflow:hidden; text-overflow:ellipsis }
/* 상태 글자는 «안 준다» — 이름이 먼저 준다. 파랑(--read = 알려주기) · ⛔ 라임 금지(라임은 승인 하나) */
.es-설정값{ flex:none; color:var(--read) }
.es-설정값::before{ content:"\00B7"; margin-right:6px; color:var(--tx3) }
.es-설정값[hidden]{ display:none }
.es-설정화{ flex:none; font-size:10px; color:var(--tx3) }
/* 시트 제목 — 폰은 「상품 설정」, PC 는 「상품 운영 정보」(둘 다 마디가 있고 하나만 보인다) */
.es-집:not(.es-좁음) .es-좁은말{ display:none }
.es-좁음 .es-넓은말{ display:none }
/* 🔴 바텀 시트 — 운영 패널 «그 마디»가 좁을 때 바닥에서 선다. 위 `.es-좁음 .es-패널{…inset:0}`(전체 화면 판)은 그대로 두고 운영만 덮는다.
   높이 ≈ 화면 2/3: 위 끝을 «34dvh 와 48px 중 큰 것»에 둔다(= min(66dvh, 화면-48px)) — ⛔ calc(100dvh - N) 로 빼지 마라(머리말 · 8px 어긋난 적).
   안은 몸(.es-패널몸)만 구른다. 바닥 여백은 홈 막대(safe-area)를 비킨다. 화면 키보드가 가린 만큼은 --es-키보드(edit-shell.js 가 잰다)로 올린다. */
.es-패널[data-es칸="운영"]{ --es-키보드:0px }
.es-집.es-좁음 .es-패널[data-es칸="운영"]{ inset:auto 0 var(--es-키보드) 0; top:max(48px, 34dvh); border-radius:16px 16px 0 0;
  border-top:1px solid var(--line-c); padding-bottom:max(16px, env(safe-area-inset-bottom)); box-shadow:0 -14px 40px rgba(0,0,0,.45) }
.es-집.es-좁음 .es-패널[data-es칸="운영"] > .es-패널머리{ border-radius:16px 16px 0 0 }
.es-집.es-좁음 .es-패널[data-es칸="운영"]:focus{ outline:none }
/* 시트 뒤 막 — `.es-집` 안 · z 44(시트 45 바로 밑). 누르면 닫힌다(data-닫기). 열린 동안만 hidden 이 풀린다 */
.es-시트막{ position:fixed; inset:0; z-index:44; background:rgba(0,0,0,.5) }
.es-시트막[hidden]{ display:none }
.es-집:not(.es-좁음) > .es-시트막{ display:none }
/* 차례 — 등록 상태 → 태그 → 컬렉션 → 카테고리 → 제품 유형 (폰만). PC 의 접이 차례(컬렉션 → 태그 …)는 그대로다 */
.es-집.es-좁음 .es-패널[data-es칸="운영"] > .es-패널몸 > [data-등록상태]{ order:-2 }
.es-집.es-좁음 .es-패널[data-es칸="운영"] > .es-패널몸 > [data-접="태그"]{ order:-1 }
/* 등록 상태 — 값 둘(Active/Draft)을 «같은 힘»으로(PC 칩 규칙 · J.J 2026-09-01). 고른 것만 면이 차고 ✓ 가 선다 */
.es-등록상태{ display:none }
.es-좁음 .es-등록상태{ display:block; padding:12px 0 14px; border-bottom:1px solid var(--line-c) }
.es-등록상태이름{ font-size:13px; font-weight:700; color:var(--tx); margin-bottom:9px }
.es-등록상태고름{ display:flex; gap:8px }
.es-공개고름{ flex:1 1 0; min-width:0; height:38px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 10px;
  border-radius:9px; border:1px solid var(--line-c); background:none; color:var(--tx); font-family:inherit; font-size:13px; font-weight:700; cursor:pointer }
.es-공개고름[aria-pressed="true"]{ background:var(--chip-c); border-color:var(--tx3) }
.es-공개고름:disabled{ cursor:progress; opacity:.7 }
.es-고름표{ width:12px; flex:none; color:var(--read) }
.es-공개고름[aria-pressed="true"] > .es-고름표::before{ content:"\2713" }
.es-등록상태알림{ margin:9px 0 0; font-size:12px; line-height:1.55; color:var(--tx2); word-break:keep-all }
.es-등록상태알림[hidden]{ display:none }

/* ══ 높이 사슬 — 창 높이를 «빼서» 정하지 않는다. 격자 셋째 줄을 막고 세로 flex + min-height:0 으로 내린다 ══════
   🔴 배치 규칙의 열쇠는 속성이 아니라 «마디»다. pane 의 data-껍데기 는 끈적해서(다음 제품의 스피너·「못 찾았어요」 판에도 남는다)
      속성만 보고 여백 0·최대폭 없음·100dvh 를 걸면 그 화면들이 여백 0 으로 붙는다. 그래서 전부 `.es-집` 마디까지 같이 건다.
   🔴 명시도 — 라이브 `.pane:has(#studio-root){ max-width:1090px }` 은 (1,1,0)이다. 클래스·속성만으로는 못 이긴다 →
      `.pane[data-껍데기]:has(> #studio-root > .es-집)` (1,3,0). */
.app-shell[data-screen="app"]:has(> .pane[data-껍데기="판매페이지"]:not([hidden]) > #studio-root > .es-집){
  height:100dvh; min-height:0; grid-template-rows:auto auto minmax(0,1fr) }
/* 🔴 창 ≤ 980 에서는 shell.css 가 .app-shell 을 block 으로 푼다(기둥이 서랍이 된다) — block 에는 «셋째 줄»이 없어 사슬의 첫 고리가 끊긴다.
   새 껍데기가 서 있을 때만 격자를 되살린다. 첫 열이 0 인 까닭: 위 띠·메뉴 줄·pane 은 shell.css 가 둘째 열(grid-column:2)에 두고,
   기둥은 fixed 서랍이라 흐름 밖이다. 셋째 줄은 1fr 이 아니라 minmax(0,1fr) — 1fr 의 밑은 auto 라 내용이 크면 줄이 자란다. */
@media (max-width:980px){
  .app-shell[data-screen="app"]:has(> .pane[data-껍데기="판매페이지"]:not([hidden]) > #studio-root > .es-집){
    display:grid; grid-template-columns:0 minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr) }
}
.pane[data-껍데기="판매페이지"]:has(> #studio-root > .es-집){
  max-width:none; width:100%; margin:0; padding:0; gap:0; display:flex; flex-direction:column; min-width:0; min-height:0 }
.pane[data-껍데기="판매페이지"]:has(> #studio-root > .es-집) > #studio-root{
  flex:1 1 auto; display:flex; flex-direction:column; gap:0; width:100%; margin:0; min-width:0; min-height:0 }