/* 원본 v9.1 의 .g3 · .bm 스타일에서 홈 임베드에 필요한 것만 옮겼다 */
:root{--pink:#c2185b;--pink2:#e91e63;--pink-soft:#fde7ef;--ink:#111827;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
#scene{position:relative;width:100%;height:100%;min-height:240px}

/* ---------- 3D ---------- */
.g3{position:absolute;inset:0;overflow:hidden;user-select:none;-webkit-user-select:none}
.g3 canvas{width:100%;height:100%;display:block}
.g3tags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.g3t{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:5px 12px 5px 5px;box-shadow:0 4px 14px rgba(40,20,40,.18);white-space:nowrap;transition:box-shadow .35s}
.g3t::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#fff}
.g3t i{font-style:normal;width:22px;height:22px;border-radius:50%;background:var(--pink2);color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
.g3t.cnt i{background:#7c3aed}
.g3t b{font-size:13.5px;font-weight:800;color:#1d1a22;letter-spacing:-.02em}
.g3t.live{box-shadow:0 0 0 3px var(--pink2),0 6px 18px rgba(233,30,99,.28)}
.g3t.cnt.live{box-shadow:0 0 0 3px #7c3aed,0 6px 18px rgba(124,58,237,.26)}
.g3key{display:none}
/* 휴대폰: 장면 안에는 번호만, 단계 이름은 아래 범례 */
@media (max-width:599px){
  .g3t{padding:3px;box-shadow:0 3px 10px rgba(40,20,40,.2)}
  .g3t::after{bottom:-5px;margin-left:-5px;border-width:5px}
  .g3t i{width:20px;height:20px;font-size:11.5px}
  .g3t b{display:none}
  .g3t.live{box-shadow:0 0 0 2px var(--pink2),0 4px 12px rgba(233,30,99,.26)}
  .g3t.cnt.live{box-shadow:0 0 0 2px #7c3aed,0 4px 12px rgba(124,58,237,.24)}
  .g3key{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;position:absolute;left:8px;right:8px;bottom:8px;pointer-events:none}
  .g3key span{display:flex;align-items:center;gap:5px;background:#fff;border-radius:999px;padding:3px 10px 3px 3px;font-size:12px;font-weight:800;color:#1d1a22;letter-spacing:-.02em;white-space:nowrap;box-shadow:0 2px 8px rgba(40,20,40,.12);transition:box-shadow .35s}
  .g3key i{font-style:normal;width:18px;height:18px;border-radius:50%;background:var(--pink2);color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center}
  .g3key .cnt i{background:#7c3aed}
  .g3key .live{box-shadow:0 0 0 2px var(--pink2),0 2px 8px rgba(233,30,99,.24)}
  .g3key .cnt.live{box-shadow:0 0 0 2px #7c3aed,0 2px 8px rgba(124,58,237,.22)}
}

/* ---------- 2D (원본 도식) ---------- */
/* 도식 전체를 iframe 안에 맞춘다 — 좌우로 밀지 않는다 */
#flat{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;padding:8px}
#flat-hint{display:none}
#flat-stage{position:relative;flex:none;margin:auto}
.bm{position:absolute;left:0;top:0;width:856px;height:400px;transform-origin:0 0;border:1px solid #f1e6ec;border-radius:16px;background:radial-gradient(circle at 50% 48%,#fff0f6 0,#fff 44%);overflow:hidden}
.bm>svg{position:absolute;inset:0;width:100%;height:100%}
/* 좁은 폭: 같은 노드 · 라벨을 세로로. 왼쪽 30px 은 ④ 가 소비자로 돌아가는 길 */
.bm.stack{height:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:44px;padding:14px 12px 14px 30px;align-items:center}
.bm.stack>svg{width:auto;height:auto}
.bm.stack .bn,.bm.stack .lbl{position:relative;z-index:1}
.bm.stack .cons{grid-column:1/-1;justify-self:center;width:66%}
.bm.stack .brand{grid-column:1/-1;justify-self:center;width:82%;min-height:180px}
.bm.stack .l-ad{margin:26px -14px 26px 0}
.bm.stack .l-ord{margin:26px 0 26px -14px}
.bm.stack .l-src{margin:24px 0}
.bm.stack .c1{position:relative;justify-self:center;z-index:1}
.bm.stack .sup,.bm.stack .log{align-self:stretch}
.bm.stack .c0{text-align:center;padding:0;line-height:1.2;background:none;z-index:1}
.bm.stack .l-log{grid-column:1/-1;justify-self:start;width:calc(75% - 20px);margin-top:18px}
.bm .ar{fill:none;stroke:#c3bcc8;stroke-width:2.2;stroke-dasharray:7 6;animation:bmflow 1.1s linear infinite}
.bm .ar.sub{stroke-width:1.5;stroke:#d9d2dd}
@keyframes bmflow{to{stroke-dashoffset:-26}}
.bn{position:absolute;background:#fff;border:1.5px solid #e3dde6;border-radius:14px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px}
.bn .ic{width:36px;height:36px;border-radius:10px;background:#f4f2f6;color:#333;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.bn b{font-size:15px;font-weight:800;letter-spacing:-.02em}
.bn small{font-size:11.5px;color:#666;line-height:1.4;word-break:keep-all}
.bn.cons .ic{background:#eef3ff;color:#2a4dbb}
.bn.brand{border:2px solid var(--pink);border-radius:20px;box-shadow:0 12px 32px rgba(194,24,91,.15)}
.bn.brand .bt{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--pink)}
.bn.brand .ic{background:var(--pink);color:#fff;width:46px;height:46px;border-radius:13px}
.bn.brand b{font-size:17px}
.bchips{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:4px}
.bchips span{font-size:10.5px;font-weight:700;background:#f4f2f6;color:#4b4452;border-radius:4px;padding:2px 6px}
.bchips span.p{background:var(--pink-soft);color:var(--pink)}
.lbl{position:absolute;display:flex;gap:8px;align-items:flex-start;background:#fff;border:1px solid #ebe6ee;border-radius:10px;padding:6px 9px;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.lbl .num{flex:none;width:22px;height:22px;border-radius:50%;background:#374151;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.lbl b{display:block;font-size:13px;font-weight:800;letter-spacing:-.02em;word-break:keep-all}
.lbl small{display:block;font-size:11px;color:#777;line-height:1.35;margin-top:1px;word-break:keep-all}
.lbl.can .num{background:var(--pink2)}
.bm .cap{position:absolute;font-size:11px;font-weight:700;color:#9a93a0;background:#fff;padding:0 4px}
@media (prefers-reduced-motion:reduce){.bm .ar{animation:none}.g3t{transition:none}}