/* 「내 홈페이지」 꾸미기(admin-page.js) 자리 배치 — 색·글자·부품은 ds.css 토큰·부품만. 시안 = public/assets/cust-v6-editor.html.
   강조색 = 그 가게 색 조합(.pe 에 data-palette|data-brand — 고르면 바로 바뀜). 관리 화면이라 기기 어두운 모드를 따르므로 옅은 칠은 늘 --surface 와 섞어 씀(파스텔 위 밝은 글자 안 생기게).
   좁은 화면(~899px, 2026-11-01 시안 v6 틀) = 전체 화면: 위 띠(닫기 · 꾸미기 · 저장하고 올리기) → 상태 → 길잡이 → 바로 보기(액자) → 판 · 고르기 5칸 = 아래 도구 막대(관리 아래 탭 대신)
   900~1099px = 한 줄(상태 → 바로 보기 → 고르기 → 판 → 아래 「저장하고 올리기」) · 넓은 화면(1100px~) = 왼쪽 고르기 + 오른쪽 바로 보기(휴대폰 모양 / PC 폭) */
.pe{display:grid;gap:14px;max-width:640px;margin:0 auto}
.pe,.pe-sheet{--pe-tint:color-mix(in srgb,var(--g1,var(--brand)) 9%,var(--surface));--pe-dash:color-mix(in srgb,var(--g1,var(--brand)) 45%,transparent)}
.pe-head{display:grid;gap:6px}
.pe-status{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:32px}
.pe-status .hint{flex-basis:100%}
.pe-open{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 2px;color:var(--brand-text);text-decoration:none;margin-inline-start:auto}
.pe-open .ic{width:16px;height:16px}
.pe-top{display:none}  /* 위 띠 = 좁은 화면만(맨 아래 @media) */
.pe-acts{display:flex;flex-wrap:wrap;gap:8px}
.pe-acts:empty{display:none}

/* 처음 10분 길잡이(2026-11-01 걸어보기 9): 세 걸음 한 줄 — 누르면 그 판 · 끝낸 걸음 = ✓ · 「나중에」 */
.pe-guide{display:grid;gap:10px;padding:12px;border-radius:18px;background:var(--pe-tint);border:1px solid var(--pe-dash)}
.pe-guide[hidden]{display:none}
.pe-g-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pe-g-h b{font-size:15px;font-weight:800;padding-inline-start:2px}
.pe-g-later{min-height:36px;padding:4px 6px}
.pe-g-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pe-g-st{display:grid;justify-items:center;align-content:center;gap:6px;width:100%;min-height:78px;padding:10px 4px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:700;line-height:1.25;text-align:center;word-break:keep-all}
.pe-g-st:hover{background:var(--surface-2)}
.pe-g-st:focus-visible{outline:2px solid var(--brand-text);outline-offset:2px}
.pe-g-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-style:normal;font-size:14px;font-weight:800;color:#FFFFFF;background:linear-gradient(135deg,var(--g1,var(--brand)),var(--g2,var(--brand)))}
.pe-g-n .ic{width:16px;height:16px;stroke-width:3}
.pe-g-st.done{background:transparent;border-style:dashed;color:var(--muted)}
.pe-g-st.done .pe-g-n{background:var(--surface);color:var(--brand-text);box-shadow:inset 0 0 0 1.5px var(--pe-dash)}

/* 바로 보기: 휴대폰 = 화면 폭 그대로 둥근 액자 */
.pe-stage{position:relative;min-width:0}
.pe-vsw{display:none}
.pe-dev{height:clamp(300px,44dvh,440px);border-radius:26px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#FFFFFF;-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}
/* ↑ 가면(mask) = 액자 속 홈페이지의 섞기 층(입자 .grain mix-blend)이 둥근 자르기 밖 아래 두 모서리에 검은 틈을 그리던 것을 막음(크롬 — 2026-10-23 진단). 겉모양은 그대로 */
.pe-frame{display:block;width:100%;height:100%;border:0;border-radius:25px;clip-path:inset(0 round 25px);background:#FFFFFF}  /* 액자는 바깥 둥근 자르기를 안 따르는 브라우저가 있어 직접 둥글게 */
.pe-tip{display:flex;align-items:center;gap:6px;margin-top:8px}
.pe-tip .ic{width:15px;height:15px;color:var(--brand-text)}

/* 고르기 4칸 */
.pe-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 6px}
.pe-tabs button .ic{width:17px;height:17px}
.pe-tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pe-tabs button[aria-selected="true"] .ic{color:var(--brand-text)}
.pe-tabs button span{white-space:nowrap}
@media (max-width:479px){.pe-tabs button{flex-direction:column;gap:2px;min-height:54px;padding:4px 2px;font-size:12px}}  /* 휴대폰 = 그림 위 · 글 아래(칸 다섯이 한 줄에, 글이 꺾이지 않게) */
.pe-panel{display:grid;gap:14px;min-width:0}
.pe-lead{margin:0 2px}
.pe-sec-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.pe-sec-tools>.hint{flex:1;min-width:120px;margin:0}
.pe-sec-layouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pe-sec-card{display:grid;gap:8px;min-width:0;padding:10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);text-align:start;font-size:14px}
.pe-sec-card:hover{background:var(--surface-2)}.pe-sec-card[aria-pressed=true]{border-color:var(--brand-text);box-shadow:inset 0 0 0 1px var(--brand-text)}
.pe-sec-card:focus-visible,.pe-sec-library-photo:focus-visible{outline:2px solid var(--brand-text);outline-offset:3px}
.pe-sec-sketch{display:flex;gap:7px;align-items:center;position:relative;overflow:hidden;width:100%;height:78px;padding:10px;background:var(--surface-2);border-radius:10px}
.pe-sec-sketch>i{display:block;width:48%;height:100%;flex:none;border-radius:5px;background:linear-gradient(135deg,var(--g1,var(--brand)),var(--g2,var(--brand)));opacity:.75}
.pe-sec-sketch>b{display:grid;gap:5px;flex:1;min-width:0}.pe-sec-sketch s{height:5px;border-radius:4px;background:var(--line);text-decoration:none}.pe-sec-sketch s:last-child{width:65%}
.pe-sec-sketch[data-layout=split-right]{flex-direction:row-reverse}.pe-sec-sketch[data-layout=stack]{flex-direction:column}.pe-sec-sketch[data-layout=stack]>i{width:100%;height:55%}.pe-sec-sketch[data-layout=stack]>b{width:100%}
.pe-sec-sketch[data-layout=overlay]>i{position:absolute;inset:7px;width:auto;height:auto}.pe-sec-sketch[data-layout=overlay]>b{z-index:1;align-self:end;max-width:65%;padding:7px;background:var(--surface);border-radius:5px}
.pe-sec-sketch[data-layout=grid],.pe-sec-sketch[data-layout=slider]{align-items:stretch}.pe-sec-sketch[data-layout=grid]>i{width:30%}.pe-sec-sketch[data-layout=grid]>b{grid-template-columns:1fr 1fr;align-content:stretch}.pe-sec-sketch[data-layout=grid] s{width:100%;height:auto}
.pe-sec-sketch[data-layout=slider]>i{width:72%}.pe-sec-sketch[data-layout=slider]>b{min-width:40%}.pe-sec-sketch[data-layout=slider]>b s{height:100%}
.pe-bgo>.pe-sec-sketch{width:48px;height:42px;padding:5px;gap:3px;flex:none}.pe-bgo>.pe-sec-sketch s{height:3px}
.pe-sec-details{border:1px solid var(--line);border-radius:14px;padding:0 12px;min-width:0}.pe-sec-details>summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:650;gap:8px}.pe-sec-details>summary::before{content:'+';font-size:20px;color:var(--muted)}.pe-sec-details[open]>summary::before{content:'−'}.pe-sec-details[open]{padding-bottom:12px}
.pe-sec-details>.field,.pe-sec-details>.pe-sec-layouts{margin-top:12px}.pe-sec-details>summary{list-style:none}.pe-sec-details>summary::-webkit-details-marker{display:none}
.pe-sec-template{display:flex;align-items:center;gap:10px;width:100%;min-height:64px;text-align:start;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:8px;margin-top:8px}.pe-sec-template>b{flex:1;font-size:14px}
.pe-sec-template>.pe-sec-sketch{width:56px;height:44px;padding:5px;gap:3px;flex:none}.pe-sec-template>.pe-sec-sketch s{height:3px}.pe-sec-add>.pe-h3{margin-top:12px}.pe-sec-add>.pe-switch{margin-top:12px}
.pe-sec-empty{display:flex;align-items:center;justify-content:center;gap:8px;min-height:96px;margin:8px 0;border:1px dashed var(--line);border-radius:12px;background:var(--surface-2);color:var(--muted);font-size:14px}
.pe-sec-store{margin:10px 0 0;font-size:13px;color:var(--muted)}.pe-sec-store.warn{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--amber-soft);color:var(--amber-ink);font-weight:700}
.pe-sec-lib-item{position:relative;min-width:0}.pe-sec-lib-item>.pe-sec-library-photo{width:100%}.pe-sec-lib-del{position:absolute;inset-inline-start:4px;bottom:4px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.25)}.pe-sec-lib-del:focus-visible{outline:2px solid var(--brand-text);outline-offset:2px}.pe-sec-lib-del .ic{width:18px;height:18px}
.pe-sec-unused{margin-top:10px}
.pe-sec-template-sketches{display:flex;gap:3px;width:100px;flex:none}.pe-sec-template-sketches .pe-sec-sketch{width:44px;height:40px;padding:4px;gap:3px}.pe-sec-template-sketches .pe-sec-sketch s{height:3px}
.pe-sec-selected{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:8px 0}.pe-sec-selected>li{min-width:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-2)}
.pe-sec-selected>li>img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.pe-sec-photo-actions{display:flex;justify-content:center;gap:0}.pe-sec-photo-actions>.btn{min-height:44px;min-width:40px;padding:0}
.pe-sec-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.pe-sec-library-photo{position:relative;aspect-ratio:1;min-width:0;padding:0;overflow:hidden;border:2px solid transparent;border-radius:10px;background:var(--surface-2)}
.pe-sec-library-photo>img{width:100%;height:100%;object-fit:cover}.pe-sec-library-photo[aria-pressed=true]{border-color:var(--brand-text)}.pe-sec-library-photo>.ic{position:absolute;inset-inline-end:4px;top:4px;color:var(--brand-text);background:var(--surface);border-radius:50%;padding:2px;width:24px;height:24px}
.pe-sec-bottom{display:flex;flex-wrap:wrap;gap:8px}.pe-sec-photos>.pe-sec-details{margin-top:10px}.pe-sec-photos>.pe-switch{margin-top:8px}.pe-sec-editor [hidden]{display:none!important}
.pe-ups{display:grid;gap:16px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.pe-row .who span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pe-row>.ic{color:var(--faint)}
.pe-bi{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;background:var(--pe-tint);color:var(--brand-text)}
.pe-bi .ic{width:18px;height:18px}

/* 칸: 얼굴(고정) · 손잡이 · 이름 · 위/아래 · 보이기 스위치 */
.pe-lh{font-size:13px;font-weight:700;color:var(--muted);margin:2px 4px -6px}
.pe-blks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pe-blk{position:relative;display:flex;align-items:center;gap:6px;min-height:64px;padding:8px 6px 8px 0;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 3px 10px -8px rgba(27,29,41,.3)}
.pe-blk.lock{background:var(--pe-tint);border-color:transparent}
.pe-grip{flex:none;width:44px;height:48px;display:grid;grid-template-columns:repeat(2,4px);gap:4px;place-content:center;border-radius:10px;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.pe-grip i{width:4px;height:4px;border-radius:50%;background:var(--faint)}
.pe-grip:hover{background:var(--surface-2)}
.pe-blk.lock .pe-grip{visibility:hidden}
.pe-bt{flex:1;min-width:0}
/* 「칸」 줄 가운데 = 고치는 곳으로 가는 단추(O13) — 줄 모양은 그대로 */
.pe-bgo{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:48px;padding:4px 6px;margin:0;border:0;border-radius:12px;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.pe-bgo:hover{background:var(--surface-2)}
.pe-bgo:focus-visible{outline:2px solid var(--brand-text);outline-offset:2px}
.pe-bt b{display:block;font-size:15px;font-weight:700;overflow-wrap:anywhere}
.pe-bt small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.35}
.pe-blk.off .pe-bt,.pe-blk.off .pe-bi{opacity:.55}
.pe-ud{flex:none;display:flex}
.pe-ud .btn.icon.small{width:44px;min-width:44px;min-height:44px;color:var(--muted)}
@media (max-width:419px){.pe-blk .pe-bi{display:none}}  /* 좁은 휴대폰: 누를 자리(손잡이·위아래 44px)를 지키려고 장식 그림을 뺌 */
.pe-eye{flex:none;min-height:44px;padding:0 2px;border:0;background:none}
.pe-eye[aria-checked="true"] i,.pe-switch[aria-checked="true"] i{background:linear-gradient(110deg,var(--g1,var(--brand)),var(--g2,var(--brand)))}
/* 끌기(시안 v6): 손가락을 따라 떠오른 줄(복사본 — position:fixed, admin-page.js dragRow) + 놓일 자리 = 점선 빈칸 */
.pe-blk.lift{z-index:40;border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(120deg,var(--g1,var(--brand)),var(--g2,var(--brand))) border-box;box-shadow:0 18px 30px -14px var(--g1,var(--brand));cursor:grabbing}
.pe-blk.lift .pe-grip i{background:var(--brand-text)}
.pe-blk.gap{background:color-mix(in srgb,var(--pe-tint) 60%,transparent);border:2px dashed var(--pe-dash);box-shadow:none}
.pe-blk.gap>*{visibility:hidden}
.pe-blks.dragging{-webkit-user-select:none;user-select:none}
.pe-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;border-radius:16px;border:1.5px dashed var(--pe-dash);background:none;color:var(--brand-text);font-size:15px;font-weight:700}
.pe-add:hover{background:var(--pe-tint)}

/* 사진(소식) */
.pe-drop{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:14px;border-radius:18px;border:2px dashed var(--pe-dash);background:var(--pe-tint);color:var(--ink);text-align:start}
.pe-drop>i{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#FFFFFF;background:linear-gradient(135deg,var(--g1,var(--brand)),var(--g2,var(--brand)))}
.pe-drop b{display:block;font-size:15px}
.pe-drop small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.pe-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
@media (min-width:600px) and (max-width:1099px){.pe-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pe-post{position:relative;aspect-ratio:1;min-width:0}
.pe-tile{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--pe-tint);color:var(--ink);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform .12s}
.pe-tile img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.pe-tile.txt{display:grid;place-items:center;padding:24px 8px 8px}
.pe-ptxt{font-size:12px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;white-space:pre-line}
.pe-no{position:absolute;inset-inline-start:6px;top:6px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;display:grid;place-items:center;font-size:11.5px;font-weight:760;background:rgba(255,255,255,.94);color:#3F3D56;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.pe-post.lift{z-index:3}
.pe-post.lift .pe-tile{transform:scale(1.07) rotate(3deg);box-shadow:0 18px 28px -12px var(--g1,var(--brand));outline:3px solid #FFFFFF}
.pe-grid.dragging .pe-post:not(.lift) .pe-tile{opacity:.85}
.pe-post.up{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border-radius:14px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:650;text-align:center;padding:6px}
.pe-post.up i{position:relative;width:60%;height:5px;border-radius:5px;background:var(--line);overflow:hidden}
.pe-post.up i::after{content:"";position:absolute;inset:0 auto 0 0;width:40%;border-radius:5px;background:linear-gradient(90deg,var(--g1,var(--brand)),var(--g2,var(--brand)));animation:pe-load 1.1s ease-in-out infinite}
@keyframes pe-load{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media (prefers-reduced-motion: reduce){.pe-post.up i::after{animation:none;width:100%}.pe-tile{transition:none}}
.pe-pimg{width:100%;max-height:40vh;object-fit:contain;border-radius:14px;background:var(--surface-2)}
.pe-pimg.sm{max-height:180px}
.pe-quote{padding:10px 12px;border-radius:12px;background:var(--surface-2);white-space:pre-line;overflow-wrap:anywhere}
.pe-ta{min-height:112px;resize:vertical;line-height:1.5}
.pe-del{margin-inline-start:auto}
.pe-pmsg:empty{display:none}

/* 색 조합 3개 = 그라데이션 띠 + 이름(고른 것 = 테두리 + ✓) */
.pe-pal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pe-sw{display:grid;gap:8px;justify-items:center;padding:8px 8px 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:650;line-height:1.25;text-align:center}
.pe-sw i{width:100%;height:52px;border-radius:11px;background:var(--g1)}  /* 가게 화면은 가게 색 한 가지(11-05) */
.pe-sw:hover{background:var(--surface-2)}
.pe-sw[aria-checked="true"]{border-color:var(--g1);box-shadow:inset 0 0 0 1.5px var(--g1);color:var(--ink)}
.pe-sw[aria-checked="true"] span::before{content:"✓ ";color:var(--g1);font-weight:800}

/* 모양 4개(10-30) = 작은 견본 그림 + 이름·어울리는 곳 (고른 것 = 테두리 + ✓) · 추천·추가 기능 꼬리표 */
.pe-h3{font-size:15px;font-weight:800;margin:4px 0 6px}
.pe-h3+.hint{margin-top:0}
.pe-looks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pe-lk{position:relative;display:grid;gap:8px;align-content:start;padding:8px 8px 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--muted);text-align:start;line-height:1.3}
.pe-lk:hover{background:var(--surface-2)}
.pe-lk[aria-checked="true"]{border-color:var(--g1);box-shadow:inset 0 0 0 1.5px var(--g1);color:var(--ink)}
.pe-lk[aria-checked="true"] .pe-lk-t b::before{content:"✓ ";color:var(--g1);font-weight:800}
.pe-lk-t{display:grid;gap:2px;padding:0 2px}
.pe-lk-t b{font-size:13.5px;font-weight:750;color:var(--ink)}
.pe-lk-t small{font-size:12px}
.pe-lk-tag{position:absolute;top:6px;inset-inline-end:6px;padding:2px 7px;border-radius:999px;font-size:11px;font-style:normal;font-weight:750;color:#FFFFFF;background:linear-gradient(110deg,var(--g1),var(--g2))}
.pe-lk-tag.x{color:var(--ink);background:var(--surface-2);border:1px solid var(--line)}
/* 견본 그림: b = 표지 · s = 칸 줄 셋 (모양마다 비율만 다름) */
.pe-lk-m{display:grid;gap:4px;height:72px;padding:6px;border-radius:11px;background:var(--surface-2);overflow:hidden}
.pe-lk-m b{border-radius:7px;background:linear-gradient(110deg,var(--g1),var(--g2));height:22px}
.pe-lk-m s{display:block;border-radius:4px;background:var(--line);height:7px;text-decoration:none}
.pe-lk-m s:nth-child(3){width:70%}.pe-lk-m s:nth-child(4){width:45%}
.pe-lk[data-l=photo] .pe-lk-m b{height:44px}
.pe-lk[data-l=trust] .pe-lk-m b{height:12px}
.pe-lk[data-l=trust] .pe-lk-m s{height:9px;background:color-mix(in srgb,var(--g1) 30%,var(--line))}
.pe-lk[data-l=motion] .pe-lk-m b{height:30px;background-size:200% 200%;animation:peFlow 4s ease-in-out infinite alternate}
@keyframes peFlow{to{background-position:100% 100%}}
@media (prefers-reduced-motion:reduce){.pe-lk[data-l=motion] .pe-lk-m b{animation:none}}
.pe-lorder{margin-top:10px}
.pe-lk-img{display:block;width:100%;height:auto;aspect-ratio:240/345;max-height:200px;object-fit:cover;object-position:top;border-radius:11px;background:var(--surface-2)}
.pe-ltip{display:flex;gap:6px;align-items:center;margin-top:10px}
.pe-lfill{margin-top:8px}
.pe-pal[aria-disabled="true"]{opacity:.45}
.pe-pal[aria-disabled="true"] .pe-sw{cursor:not-allowed}
.pe-lmsg:empty{display:none}
.pe-looks+.pe-lmsg,.pe-lorder+.pe-lmsg{margin-top:8px}
.pe-lmsg~.pe-h3{margin-top:22px}

/* 사진 손질 판(10-30): 손질한 사진 · 원본 나란히 — 누르면 그쪽 고름 */
.pol-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pol-c{display:grid;gap:6px;padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--muted);font-size:13px;font-weight:650;text-align:center}
.pol-c img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:11px;background:var(--surface-2)}
.pol-c[aria-checked="true"]{border-color:var(--g1);box-shadow:inset 0 0 0 1.5px var(--g1);color:var(--ink)}
.pol-c[aria-checked="true"] span::before{content:"✓ ";color:var(--g1);font-weight:800}

/* 색 고르기 옆 작은 맛보기(가게 화면 바탕 + 그 색 단추) — 휴대폰에서 바로 보기가 위로 지나가도 고른 색이 바로 보이게 */
.pe-csample{display:grid;gap:10px;padding:16px;border-radius:20px;border:1px solid var(--line);background:var(--bg)}
.pe-csample b{font-size:15px;color:#202824}
.pe-csample .btn.grad{background:var(--g1);width:100%;min-height:48px;font-size:16px;font-weight:700;pointer-events:none}

/* 판 안(.pe-sheet = 이 칸이 연 판 — 가게 색 조합을 붙임) */
.pe-sug{gap:6px}
.pe-sug .chip{min-height:36px;padding:0 12px;font-size:13px;background:var(--pe-tint);border-color:transparent}
.pe-tags .chip{gap:2px;padding-inline-end:4px}
.pe-x{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--muted)}
.pe-x:hover{background:var(--surface-2)}
.pe-x .ic{width:16px;height:16px}
.pe-addrow{display:flex;gap:8px}
.pe-addrow .btn{flex:none}
.pe-sws{display:grid;gap:8px}
/* 「첫 화면」(2026-10-30): 스위치 줄 · 넘기는 사진(작은 사진 바둑판 + 앞/뒤·지우기) */
.pe-hseg button:disabled{opacity:.45;cursor:not-allowed}
.pe-tohero{justify-self:start;display:inline-flex;align-items:center;gap:6px}
.pe-hmsg:empty{display:none}
.pe-hph{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.pe-hph-t{display:grid;gap:4px}
.pe-hph-t .pe-now{justify-self:start}
.pe-hph-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.pe-hph-l li{display:grid;gap:4px;min-width:0}
.pe-hph-l img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--pe-tint)}
.pe-hph-l .pe-ud{display:flex;justify-content:center;gap:0}
.pe-hph-a{display:flex}
/* 「칸」 띠 쌓기(2026-10-30): 컴퓨터 배치 두 갈래(작은 도식) · 칸 판(내용 + 꾸밈) · 배너 글 */
.pe-laybox{margin-bottom:6px}
.pe-lays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pe-lay{display:grid;gap:8px;align-content:start;padding:8px 8px 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--muted);text-align:start;line-height:1.3}
.pe-lay:hover{background:var(--surface-2)}
.pe-lay[aria-checked="true"]{border-color:var(--g1);box-shadow:inset 0 0 0 1.5px var(--g1);color:var(--ink)}
.pe-lay[aria-checked="true"]>span>b::before{content:"✓ ";color:var(--g1);font-weight:800}
.pe-lay>span{display:grid;gap:2px;padding:0 2px}
.pe-lay>span>b{font-size:13.5px;font-weight:750;color:var(--ink)}
.pe-lay>span>small{font-size:12px}
.pe-lay-m{display:grid;gap:4px;height:58px;padding:6px;border-radius:11px;background:var(--surface-2)}
.pe-lay-m b{border-radius:5px;background:linear-gradient(110deg,var(--g1),var(--g2));opacity:.75}
.pe-lay-m s{display:block;border-radius:4px;background:var(--line);text-decoration:none}
.pe-lay[data-lay=cols] .pe-lay-m{grid-template-columns:1fr 2fr;grid-template-rows:1fr 1fr}
.pe-lay[data-lay=cols] .pe-lay-m b{grid-row:1/3}
.pe-lay[data-lay=bands] .pe-lay-m{grid-template-rows:14px 1fr 1fr}
.pe-laypc{justify-self:start}
.pe-laymsg:empty,.pe-bmsg:empty,.pe-bnmsg:empty{display:none}
.pe-band .pe-h3{margin-top:6px}
.pe-bedit{justify-content:center}
.pe-bnbox{display:grid;gap:12px}
.pe-switch{justify-content:space-between;width:100%;min-height:58px;padding:8px 12px 8px 14px;border-radius:14px;white-space:normal;text-align:start;color:var(--ink)}
.pe-now{display:inline-flex;align-items:center;gap:4px;width:fit-content;padding:2px 9px;border-radius:999px;background:var(--pe-tint);color:var(--brand-text);font-size:12px;font-weight:700;line-height:1.5}
.pe-now .ic{width:13px;height:13px}
.pe-row .who .pe-now{display:inline-flex;margin-top:4px}
.pe-switch[aria-checked="true"]{color:var(--ink);border-color:var(--pe-dash)}
.pe-swt{display:grid;gap:2px;min-width:0}
.pe-swt b{font-size:15px}
.pe-swt small{font-size:12.5px;font-weight:500;color:var(--muted);overflow-wrap:anywhere}

/* 아래 「저장하고 올리기」: 휴대폰 = 아래 탭 바로 위에 붙음 */
.pe-bar{position:sticky;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:6;display:flex;gap:8px;margin:0 -16px;padding:12px 16px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 0%,transparent),var(--bg) 34%)}
.pe-bar .btn.grad{flex:1;min-width:0}
.pe-bar .btn.line{flex:none;min-height:56px}
@media (min-width:900px){.pe-bar{bottom:0;margin:0 -24px;padding:12px 24px 16px}}

/* 컴퓨터: 폴더 사진을 끌고 들어오면 화면 위에 놓는 자리 */
.pe-fdrop{position:fixed;inset:16px;z-index:58;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;border-radius:24px;border:3px dashed var(--g1,var(--brand));
  background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-align:center;pointer-events:none}
.pe-fdrop b{font-size:18px;font-weight:800}
.pe-fdrop small{font-size:13px;color:var(--muted)}

/* 좁은 화면(관리 화면이 아래 탭을 쓰는 폭 ~899px) = 시안 v6 틀(2026-11-01): 꾸미기 칸이 열려 있으면 전체 화면.
   관리 위 띠·아래 탭 숨김 → 이 칸의 위 띠(붙어 다님) + 아래 도구 막대(고르기 5칸 = 같은 단추, 자리만 바닥) · 판은 공용 아래 판(뒤 어둡게 + 잡는 손잡이, ds.css .sheet) */
@media (max-width:899px){
  body:has(#v-page:not([hidden])) :is(#top,#tabbar){display:none!important}
  body:has(#v-page:not([hidden])) .adm-main{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  body:has(#v-page:not([hidden])):has(#toast:not([hidden])) .adm-main{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  body:has(#v-page:not([hidden])) .toast{bottom:calc(75px + env(safe-area-inset-bottom,0px))}  /* 알림 띠 = 아래 도구 막대 바로 위 */
  .pe-top{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:56px;margin:-14px calc(50% - 50vw) 0;padding:6px 12px;padding-top:calc(6px + env(safe-area-inset-top,0px));
    background:color-mix(in srgb,var(--bg) 96%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .pe-close{padding:0 10px;color:var(--muted)}
  .pe-top-t{font-size:16px;font-weight:800;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pe-top-pub{display:flex}
  .pe-top-pub .btn{min-height:40px;padding:0 14px;font-size:14px;white-space:nowrap;box-shadow:0 8px 18px -10px var(--g1,var(--brand))}
  .pe-panel{scroll-margin-top:68px}
  .pe-bar{display:none}  /* 단추는 위 띠로(admin-page.js drawBar) */
  .pe-tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;justify-content:center;gap:0;border-radius:0;padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .pe-tabs button{flex-direction:column;gap:4px;max-width:120px;min-height:58px;padding:2px;font-size:11.5px;font-weight:650;color:var(--muted);background:none}
  .pe-tabs button .ic{width:38px;height:34px;padding:8px 10px;border-radius:12px;background:var(--surface-2);color:var(--muted)}
  .pe-tabs button[aria-selected="true"]{background:none;box-shadow:none;color:var(--ink)}
  .pe-tabs button[aria-selected="true"] .ic{color:#FFFFFF;background:linear-gradient(135deg,var(--g1,var(--brand)),var(--g2,var(--brand)))}
}

/* 넓은 화면: 왼쪽 고르기(380px) + 오른쪽 바로 보기(위에 붙어 다님) */
@media (min-width:1100px){
  .pe{max-width:none;grid-template-columns:minmax(360px,400px) minmax(0,1fr);grid-template-areas:"head stage" "tabs stage" "panels stage" "bar stage";grid-template-rows:auto auto 1fr auto;column-gap:24px;row-gap:14px;align-items:start}
  .pe-head{grid-area:head}
  .pe-tabs{grid-area:tabs}
  .pe-panels{grid-area:panels;min-width:0}
  .pe-bar{grid-area:bar;margin:0;padding:12px 0 16px}
  .pe-stage{grid-area:stage;position:sticky;top:92px;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:calc(100dvh - 112px);padding:16px;border-radius:var(--r-l);background:var(--pe-tint);border:1px solid var(--line)}
  .pe-vsw{display:flex;align-self:flex-start;min-width:280px}
  .pe-dev{width:390px;max-width:100%;height:calc(100dvh - 220px);max-height:860px;border-radius:44px;border:9px solid #0E0F14;background:#0E0F14;box-shadow:0 30px 60px -28px rgba(30,20,60,.45)}
  .pe-dev .pe-frame{border-radius:35px;clip-path:inset(0 round 35px)}
  .pe-stage.pc .pe-dev{width:100%;border-radius:14px;border:1px solid var(--line);background:#FFFFFF;box-shadow:var(--shadow)}
  .pe-stage.pc .pe-frame{border-radius:0;clip-path:none}
  .pe-stage.pc .pe-dev{overflow:hidden}  /* 액자는 1280 폭으로 그리고 줄임(admin-page.js fitPc) — 둥근 자르기는 바깥 칸이 맡음 */
  .pe-tip{margin-top:0}
}