/* A 상품 상세페이지 — 「공통 항목만」 고른 손님에게 다르게 보여야 하는 것 (J.J 2026-08-16)
 *
 * 공통 항목은 «메타필드를 만들지 않는다» — 값은 auto_settings.metafields.common/vals 에 저장하고
 * 테마에 글을 직접 쓴다(7/8 시안 메모가 못박은 계약). 그래서 그 손님에게는
 *   · 「입력칸(메타필드)을 만들어 드려요」  → 틀린 말
 *   · 「동적 소스로 연결하기」 안내         → 할 일이 아닌 일
 * 이라 감춘다. 섞인 손님(공통+개별)은 지금 그대로 둘 다 본다.
 *
 * ⛔ 표시(`html.a-common-only`)는 first-steps.js 가 판을 그릴 때마다 다시 얹는다.
 * ⛔ A 화면에서만 실린다 — 다른 두 장에는 이 파일이 안 붙는다.
 */

/* 요약 줄 — 두 줄을 다 넣어 두고 «지금 손님» 것만 보인다 */
.only-common { display: none; }
html.a-common-only .only-common { display: block; }
html.a-common-only .only-mixed { display: none; }

/* ── 테마 가이드 «내용 채우기» 걸음 ─────────────────────────────────
   공통만인 손님에게는 «연결하기»가 통째로 할 일이 아니다.
   ⛔ 「내용 넣는 방법이 두 가지예요」 머리말도 같이 감춘다 — 방법이 하나뿐인 손님에게
      둘이라고 말하면, 없는 갈림길을 찾느라 헤맨다.
   ⚠️ 번호가 7 → 4 로 바뀌었다 (J.J 2026-08-23 · 검수 2번 — 걸음 1~3이 딥링크 버튼으로
      접히면서 가이드가 5걸음이 됐다). 여기 선택자는 «그 걸음의 data-g»를 따라간다. */
html.a-common-only #gSteps li[data-g="4"] .learn { display: none; }
html.a-common-only #gSteps li[data-g="4"] .branch.each { display: none; }
html.a-common-only #gSteps li[data-g="4"] .backto { display: none; }
/* 남는 「모두 같음」 덩어리는 이제 «그 단계의 전부»라 딱지를 뗀다 */
html.a-common-only #gSteps li[data-g="4"] .branch.common .brh .tag { display: none; }

/* 공통으로 고른 항목이 «하나도 없으면» 그 갈래를 통째로 감춘다 — 빈 상자는 손님을 헷갈리게 한다 */
html.a-no-common #gSteps li[data-g="4"] .branch.common { display: none; }

/* 복사 상자 — 손님이 적은 항목이 여럿이면 줄로 나눠 보인다 (한 줄 = 한 항목) */
#cbList .cbrow + .cbrow {
  margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .08);
}
#cbList .cbt-empty { color: rgba(255, 255, 255, .4); font-style: italic; }

/* 7단계를 열면 곁판이 저절로 뜬다 — 왜 떴는지 한 줄 */
.ov-cue {
  margin: 0 0 14px; padding: 9px 12px; font-size: 12.5px; color: #d7e6b3;
  background: var(--lime-tint); border: 1px solid var(--lime-line); border-radius: 10px;
}

/* ── 「내가 만든 항목」 곁판 (J.J 2026-08-16) ────────────────────────────────
   테마 편집기는 다른 창이라 우리 화면이 안 보인다 — 그동안 «내가 정한 것»을 옆에 띄워 둔다.
   ⛔ 색을 새로 고르지 않는다. 시안이 :root 에 정해 둔 값만 쓴다. */
.ov-toggle {
  position: fixed; right: 18px; bottom: 18px; z-index: 88;
  padding: 11px 17px; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--lime-ink); background: var(--lime); border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.ov-panel {
  position: fixed; right: 18px; top: 74px; bottom: 74px; z-index: 87;
  width: min(340px, calc(100vw - 36px));
  display: flex; flex-direction: column;
  background: var(--card2); border: 1px solid var(--lime-line); border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateX(12px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.ov-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.ov-h {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 15px 16px 11px; font-size: 14px; font-weight: 800; color: var(--tx);
  border-bottom: 1px solid var(--line);
}
.ov-cnt {
  padding: 1px 8px; font-size: 11px; font-weight: 700;
  color: var(--lime); background: var(--lime-tint); border: 1px solid var(--lime-line); border-radius: 999px;
}
.ov-x {
  margin-left: auto; width: 24px; height: 24px; font: inherit; font-size: 12px; cursor: pointer;
  color: var(--mut); background: transparent; border: 1px solid var(--line2); border-radius: 7px;
}
.ov-list { flex: 1; overflow: auto; padding: 6px 16px 12px; }
/* 구분선은 «진하게» — 항목이 어디서 끊기는지 한눈에 보이게 (J.J 2026-08-16)
   🔴 흰색을 «값으로» 박아 뒀었다 — 다크에서만 보이고 라이트에선 흰 판 위 흰 선이라
      구분선이 «통째로 사라졌다»(J.J 2026-08-25 화면에서 잡음).
   ⇒ 글자색에서 뽑는다. 라이트에선 검정 계열, 다크에선 흰 계열로 «저절로» 따라온다.
      --line-c 로는 라이트에서 너무 옅어 08-16 의 「진하게」가 깨진다. */
.ov-row { padding: 13px 0; border-bottom: 1px solid color-mix(in srgb, var(--tx) 32%, transparent); }
.ov-row:last-child { border-bottom: 0; }
.ov-name { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 13px; font-weight: 700; color: var(--tx); }
.ov-tag { padding: 1px 7px; font-size: 10.5px; font-weight: 700; border-radius: 999px; }
/* 「무엇을 하면 되나」를 딱지 옆에 한 마디로 */
.ov-how { font-size: 11px; font-weight: 600; color: var(--mut); }
.ov-tag.base { color: var(--mut); background: transparent; box-shadow: inset 0 0 0 1px var(--line2); }
/* 🔴 값으로 박아 둔 «다크 기준» 색이었다 — 라이트에선 흰 판에 검은 남색 알약이 됐다.
   게다가 같은 뜻인데 자리마다 색이 달랐다 — 요약 판은 앰버, 이 팝업은 보라(2026-08-25 실측).
   ⇒ 사전 가족으로 통일한다. 모두 같음 = --read(파랑) · 제품마다 다름 = --guide(앰버). */
.ov-tag.common { color: var(--read); background: var(--read-bg); box-shadow: inset 0 0 0 1px var(--read-ln); }
.ov-tag.each { color: var(--guide); background: var(--guide-bg); box-shadow: inset 0 0 0 1px var(--guide-ln); }
.ov-text {
  margin-top: 7px; padding: 8px 10px; font-size: 12px; line-height: 1.55; color: #dfe3e8;
  background: var(--card); border: 1px solid var(--line); border-radius: 9px;
  white-space: pre-wrap; word-break: break-word;
}
.ov-note { margin-top: 6px; font-size: 11.5px; line-height: 1.6; color: var(--mut); }
.ov-note.ov-empty { color: #e0b25a; }
.ov-copy {
  margin-top: 7px; padding: 5px 11px; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  color: #84b4ea; background: #16283c; border: 1px solid #24466b; border-radius: 7px;
}
.ov-copy.ok { color: #7fd4a0; background: #1c3325; border-color: #2f5a3d; }

/* 좁은 화면 — 판이 본문을 덮으니 열었을 때만 뜨고, 버튼은 그대로 아래에 */
@media (max-width: 900px) {
  .ov-panel { top: 62px; bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .ov-panel { transition: none; }
}

/* ── 고른 항목이 «전부 스토어에 이미 있는» 손님 (J.J 2026-08-25) ─────────────
   그 손님에게 「이대로 만들게요 / 앱이 만들어 드려요」는 틀린 말이다 — 만들 게 없다.
   ⛔ 표시(`html.a-nothing-new`)는 first-steps.js 가 판을 그릴 때마다 다시 얹는다. */
.only-nothing { display: none; }
html.a-nothing-new .only-nothing { display: block; }
html.a-nothing-new .only-mixed,
html.a-nothing-new .only-common { display: none; }

/* 🔴 만들 게 없는 손님에겐 회색 「⏭️ 단계 ○는 건너뛰었어요」가 «위아래 중복»이다 (J.J 2026-08-25).
   아래 안내가 이미 「입력 방식 설정은 건너뜁니다」라고 말한다 — 같은 말을 두 번 하지 않는다.
   ⛔ 다른 손님(일부만 건너뛴 손님)에겐 그대로 둔다. 그쪽엔 중복이 아니다. */
html.a-nothing-new #tabFlow .skipnote { display: none !important; }