/* 사진 작업판 — 사진을 누르면 무대를 통째로 덮는 편집판 (J.J 확정 2026-09-16·17)
정본: 노션 「사진 편집 섹션」 §2 자리 묶음 넷 · §6 확정 규칙 ⑪⑫⑭
🔴 자리 묶음이 «넷»이다. 서로 다른 기능을 한곳에 섞지 마라 —
섞는 순간 「어디까지가 이 사진 것인지」가 사라진다.
① .pb-top 최상단 = 편집기 «전체» [기능 알아보기] [닫기] 둘뿐
② .pb-side 오른쪽 = 사진 «전체» 관리 [자동 설정하기] 가 여기 머리에 있다
③ .pb-nowrow 사진 위 = «지금 그 사진» 것
④ .pb-tools 사진 아래 = 실제 편집 도구
⑤ .pb-apply 그 아래 = [적용]
⛔ 새 색을 짓지 마라 — 값은 전부 tokens.css 에 있는 이름이다.
기존 자르기 창(.crop-*)과 «같은 결»이다: 판 var(--surface) · 선 var(--border) · 글자 var(--text).
사진 «위»(무대·상자·손잡이)만 흰색을 쓴다 — 거긴 사진이 바탕이라 판 색과 상관없다.
⛔ `font: 700 13px/1 inherit` 처럼 한 줄로 쓰지 마라 — inherit 이 들어가면 브라우저가
그 선언을 «통째로» 버려 굵기까지 죽는다 (2026-09-09 실측 · 파일 9개 21곳). */
/* 🔴 2026-09-25 — 옆판 폭을 정본 목업과 같게 한다 (J.J 「목업이랑 다르다」 · 두 번째 지적).
🔴 CSS 를 읽어 «짐작»하지 않고 목업을 띄워 «쟀다» (headless · 뷰포트 1600×1100):
격자 컨테이너 415px · 한 줄 4칸 · 타일 98×122(4:5) · gap 8
⚠️ 처음엔 `.바닥.열림.넓게`(clamp 560~820)로 읽었는데 «틀렸다» — 사진은 `넓게` 목록
(사이즈표·옵션·판매가)에 없고, 아예 `작업판열기('기본')` 으로 «다른 판»이 열린다.
소스만 읽었으면 두 배 넓은 판을 만들 뻔했다.
⇒ 격자가 415px 를 받게 한다: 415 + 좌우 패딩 14×2 = 443px.
옛값 320px 이 이 화면이 깨진 «뿌리»였다 — 아래 ⑵ 와 한 짝이라 «둘 다» 고쳐야 한다.
⛔ 폭만 넓히지 마라: 칸이 6개로 고정돼 있어서 타일만 커지고 줄당 장수는 그대로다.
⛔ 칸만 고치지도 마라: 292px 안에서는 100px 타일이 두 장밖에 안 들어간다. */
.pboard { position: fixed; inset: 0; z-index: 30; background: var(--page);
/* 🔄 2026-10-14 (J.J) — 430 → **446** 기본 + 끌어서 넓히기(--pb-side-w · app.js 옆판넓이붙이기).
J.J: 「3줄이다 보니 아래 이미지를 옮기는 데 불편 · 한눈에 안 보임 · 중간 편집창이 좀 작아도 되니 4줄로」
「혹은 드래그해서 늘리면 늘어나게 · 기본이 4줄 보이게」
병(실측 캡처): 마우스가 있는 맥은 스크롤바가 15px 를 먹어 격자가 430-14-15=401 → 3칸이었다.
⇒ 몸에 scrollbar-gutter:stable(스크롤바 자리를 늘 비워 둔다) + 판 446 → 격자 417 · 4칸 · 타일 98 (스크롤바가 있든 없든 같다). */
--pb-side-w: 446px; /* 기본값 — 끌면 app.js 가 판에 직접 덮는다(style) */
display: grid; grid-template-columns: minmax(0, 1fr) var(--pb-side-w); gap: 0;
/* 🔴 2026-09-25 (J.J 표시 ②) — 줄을 «판 높이»에 못 박는다.
이 값이 없으면 격자 줄이 `auto` 라 «내용만큼» 커진다. 판은 `inset:0` 이라 안 커지므로
넘친 만큼이 화면 밖으로 나간다 — 옆판이 같이 늘어나 「안 쓰는 사진」 칸이 잘렸다.
⚠️ `.pb-main { min-height: 0 }` 도 같은 일을 한다. 둘을 다 넣으면 «하나를 빼도» 안 울려서
지키는 자가 없는 줄이 된다(2026-09-25 실측: 하나씩 뺐을 땐 자가 둘 다 초록이었다).
그래서 «이 한 줄»만 둔다 — 이 줄을 빼면 test-photo-side-panel 의 1280×620 줄이 운다.
실측(1680×729 · 고치기 전): 판 729 인데 `grid-template-rows: 780px` · #phOff 702~780. */
grid-template-rows: minmax(0, 1fr); }
/* 🔄 2026-09-25 (J.J 표시 ①) — 443 → **430**. 목업을 띄워 «잰» 값이다:
목업 옆판 430 · 격자 415 · 타일 98×122 · 4칸 (W 1600·1440·1280·1100·1000·920 에서 «전부 같다»)
⛔ 목업은 폭이 변해도 이 값을 «안» 바꾼다. 반응형으로 만들지 마라. */
.pboard[hidden] { display: none; }
/* ── ① 최상단 — 편집기 «전체» ─────────────────────────────────────────────
⛔ 원본 보기·영역 지우기·자르기 초기화·자동 설정하기를 여기 넣지 마라.
그 넷은 각각 ③ 과 ② 의 것이다. */
.pb-main { display: flex; flex-direction: column; min-width: 0; }
.pb-top { display: flex; align-items: center; gap: 10px;
padding: 12px 16px; border-bottom: 1px solid var(--border); }
.pb-top .pb-title { font-weight: 800; font-size: 15px; color: var(--text); }
/* 미는 몫은 «맨 앞 것»에만 준다. 둘에 주면 auto 가 둘이 되어 사이가 벌어진다
(라이브 .crop-head 가 그 자국을 갖고 있다 — 같은 실수를 되풀이하지 않는다). */
/* 🔴 닫기는 «화면 여덟 곳이 한 벌»이다 (J.J 확정 2026-09-18) — 모양은 edit-shell.css 의 `es-닫` 하나뿐이고
여기서는 자리만 잡는다. ⛔ 여기에 모양을 다시 짓지 마라(두 작업판이 다른 얼굴이 된다 · 설계그림 주석). */
.pb-top .pb-가름 { flex: none; width: 1px; height: 18px; background: var(--border); }
/* 🔴 2026-09-25 (J.J 표시 ⑤) — 「기능 알아보기」와 [닫기]가 «왼쪽»에 서 있었다(실측 x=92·224).
까닭: `:first-of-type` 은 «같은 태그» 중 첫째를 뜻한다. 이 줄의 첫 span 은 `.pb-가름` 이 아니라
`.pb-title` 이라, 이 규칙이 **한 번도 안 먹었다**. 오류도 0줄이다 — 그냥 조용히 왼쪽에 섰다.
⇒ 미는 몫을 «제목»에 준다. 목업은 오른쪽이다(띄워서 확인 · 그림에도 오른쪽에 있다).
⛔ `:first-of-type` 으로 되돌리지 마라 — 같은 태그가 앞에 하나라도 생기면 또 조용히 죽는다. */
.pb-top .pb-title { margin-right: auto; }
.pb-top .pb-howto { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; font-size: 12.5px; }
.pb-top .pb-howto svg { flex: none; }
/* ── 사진 기둥 — ③④⑤ 가 «사진과 같은 폭»이다 (확정 규칙 ⑫) ──────────────
⛔ 무대칸 전체 폭으로 펴지 마라 — 사진은 가운데 좁게 서는데 단추만 멀리 떠서
「이게 어느 사진 것인지」가 안 보인다 (J.J 2026-09-16 지적).
★ 세로 셈 : 머리줄 34 + 도구줄 38 + gap 9×2 = 90px 을 사진 높이에서 뺀다.
그 «90» 을 네 자리가 같이 쓴다 — 그래서 한 곳(--pb-chrome)에 둔다. ⛔ 하나만 고치지 마라. */
.pb-wrap { flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px; }
.pb-col { --pb-chrome: 90px;
/* 🔄 2026-10-03 (J.J 신호 3eeecd7b030c808c98ded42b362404fb) — 「사진 폭이랑 관련없이 정렬되게 · 항상 고정으로 폭을 두면 되잖아요」.
전엔 줄들이 «사진 폭»을 따라가서, 사진이 좁아지면(짧은 창) 도구줄이 모자라 16:9 칩·[처음으로]가 잘렸고
그걸 막으려고 칸 폭 바닥(440·420)과 사진 폭(360)을 따로 두다 보니 사진은 왼쪽에 붙고 줄은 더 넓게 섰다(실측 1373×756: 칸 420 · 사진 360 · 도구 넘침 27).
⇒ 둘을 «떼어» 낸다:
· 줄 넷(사진 위 · 도구 · [적용] · 되돌리기) = 늘 같은 폭(--pb-row) · 가운데
· 사진 = 화면 높이가 허락하는 만큼 · 가운데
⚠️ --pb-row 는 도구줄이 한 줄로 다 서는 폭에서 골랐다(비율 넷 ~204 + 도구 묶음 193 + 사이 ≈ 414 · [처음으로]는 [적용] 줄로 갔다).
⛔ 줄 폭을 다시 사진 폭에 묶지 마라 — 그게 이 병이다. ⛔ 무대칸 «전체 폭»으로 펴지도 마라(정본 금지 · 2026-09-16). */
--pb-row: 440px;
--pb-photo: calc((100vh - 200px - var(--pb-chrome)) * 0.8); /* 사진은 4:5 — 쓸 수 있는 높이의 0.8 이 폭이다 */
width: min(100%, max(var(--pb-row), var(--pb-photo)));
display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; }
.pb-col > .pb-nowrow, .pb-col > .pb-tools, .pb-col > .pb-apply, .pb-col > .pb-revert { width: min(100%, var(--pb-row)); }
/* 사진(무대)은 칸 폭을 그대로 쓴다(.pb-stage width:100%) — 짧은 창에서는 아래 360 이 잡는다. 가운데 서는 것은 칸의 align-items 가 한다. */
/* 🔴 2026-09-25 (J.J 표시 ②) — «짧은» 창에서는 그 폭 바닥을 440 → 360 으로 낮춘다.
까닭: `.pb-stage` 는 `width:100% · aspect-ratio:4/5` 라 «폭이 높이를 정한다».
폭 바닥 440 이면 사진이 늘 550 높이가 되고, 거기에 머리줄34+도구줄38+[적용]44+gap 27 = 143 을
더하면 693 이다. 판이 그보다 낮으면 [적용] 줄과 「안 쓰는 사진」이 화면 밖으로 나간다.
실측(고치기 전 · 폭 1680): 높이 700·729 에서 [적용] 바닥 764 · #phOff 바닥 780 → 둘 다 판 밖.
이 고침 뒤(폭 920~1680 · 높이 700·729): 넷 다 판 «안» · 도구줄은 그대로 «한 줄»(38px).
⚠️ 820px 은 «그 위에서는 아무것도 안 바뀌는» 값으로 골랐다 — 높이 900·1100 에서
사진·도구줄·[적용] 자리가 바탕과 «한 픽셀도» 다르지 않다(실측).
⛔ 이걸 `min-width: 0` 으로 바꾸지 마라 — 위 주석이 막은 «도구줄 깨짐»이 그 값의 병이다.
360 은 바닥을 «남겨 둔» 값이고, 920 폭에서도 도구줄이 한 줄임을 재서 골랐다. */
/* 🔴 2026-09-26 (J.J 새 그림 · 「16:9가 잘려있어 … 일자로 잘되게 해줘」)
위 360 이 «16:9 칩을 잘라 먹고 있었다». 도구줄이 서려면 411 이 든다
(칩 204 + 가름 1 + 돌리기 190 + gap 16). 360 이면 도구줄 373 · 칩 묶음 160 뿐이다.
실측(J.J 창 1373×756): 칩묶음 160 / 필요 204 → 16:9 «가로로 밀려» 안 보임. 1373×900 은 275 라 멀쩡.
🔴🔴 왜 지난 자가 통과시켰나 — 그때 잰 것은 「도구줄이 «한 줄»인가」였다. 칩은 `nowrap` 이라
접히지 «않으므로» 밀려나도 한 줄이다. 스크롤바까지 감춰 둬서 «잘린 자국»도 안 남는다.
⇒ 「한 줄인가」와 「넷이 다 보이나」는 «다른 것»이다. 둘 다 재라(test-photo-side-panel ⑧).
⛔ 바닥을 430 으로 «올리지 마라» — 재 봤고 깨진다. 사진이 430×538 이 되어 [적용] 줄 바닥이 752 로
판(700·729) 밖으로 나간다. 그것이 애초에 440 → 360 으로 내린 까닭이다(J.J 표시 ②).
⇒ 칸을 넓히는 대신 «칩을 좁힌다». 짧은 창에서만 칩 옆여백을 12 → 6 으로 줄인다:
4:5 45→33 · 1:1 45→33 · 3:4 44→32 · 16:9 52→40 = 138 + gap 18 = **156 ≤ 160** ✓
글자 크기(13px)와 칩 높이(31px)는 «안» 줄인다 — 누르는 자리가 작아지면 안 된다. */
@media (max-height: 820px) {
/* 🔴 칸은 «도구줄이 설 만큼» 준다(420) — 그런데 사진은 360 에 묶는다.
두 값이 «다른 것»을 재고 있기 때문이다:
· 칸 폭 = 도구줄이 한 줄로 서는 데 드는 폭 (칩 204 + 가름 1 + 돌리기 190 + gap 16 = 411)
· 사진 폭 = 그 아래 [적용] 줄까지 판 «안»에 들어가는 데 드는 폭 (360×1.25 = 450 + chrome 143 = 593)
전엔 둘을 한 값(360)으로 묶어서, 사진을 지키면 칩이 잘리고 칩을 지키면 [적용]이 나갔다.
⛔ 다시 한 값으로 합치지 마라 — 그게 이 병이다.
⚠️ 420 은 «칸»이지 무대 전체가 아니다(정본 금지 사항은 «무대 전체 폭으로 펴기»다). */
.pb-col .pb-stage { max-width: 360px; } /* 10-03 — 칸 폭 바닥(420)은 걷었다: 줄들은 이제 --pb-row 고정이다 */
}
/* ── ③ 사진 위 — «지금 그 사진» 것 ───────────────────────────────────── */
.pb-nowrow { display: flex; align-items: center; gap: 8px; height: 34px; }
.pb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--now); flex: none; }
.pb-name { font-weight: 700; font-size: 13px; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 🔴 2026-09-25 (J.J 24.png 정본 · 홈페이지 KPoupee) — 이름은 «왼 끝», 단추는 «오른 끝».
전엔 `.pb-erase` 하나에만 `margin-left:auto` 를 걸어서, 앱처럼 [영역 지우기]가 감춰지면
[원본 보기]가 이름 바로 옆에 붙어 있었다(23.png 이 그 모습이다).
⇒ 미는 것을 «이름»에 건다. 그러면 뒤에 오는 단추가 몇 개든 오른쪽에 모인다.
⛔ 단추마다 margin-left:auto 를 걸지 마라 — 둘 다 있으면 둘 사이가 벌어진다. */
.pb-nowrow .pb-name { margin-right: auto; }
/* 🔴 2026-09-25 (J.J 24.png 정본) — 그 두 단추는 «색으로» 갈린다.
원본 보기 눈 그림 + 파랑 영역 지우기 연필 그림 + 주황
⛔ 새 색을 짓지 않았다 — tokens.css 에 이미 있는 이름이다.
어두운 판에서 --read 는 하늘빛(#8fc7f0) · --warn 은 주황(#dfb173)이고, 정본 그림의 그 색이다.
⛔ `.ghost` 를 통째로 고치지 마라 — styles.css:297 이 막아 둔 것이다. 이 줄 «안»에서만 건다.
⚠️ 들어오는 마디 이름은 `.crop-orig`·`.crop-erase` 다(`.pb-*` 가 아니다 — 아래 237줄 주석 참고). */
.pb-nowrow .crop-orig { color: var(--read); border-color: var(--read); }
.pb-nowrow .crop-erase { color: var(--warn); border-color: var(--warn); }
/* 연필은 마크업이 이미 넣어 준다(app.js:5120 의 PENCIL). 눈은 «없어서» 여기서 넣는다.
⛔ 배경 그림으로 넣지 마라 — 색이 안 따라온다. 마스크로 넣어야 위의 color 를 그대로 입는다.
⚠️ 마크업으로 옮기려면 부품이 product-edit 로 넘어간다. 그때 이 규칙을 같이 걷어라. */
.pb-nowrow .crop-orig::before {
content: ''; width: 15px; height: 15px; margin-right: 5px; flex: none;
display: inline-block; vertical-align: -2px; background: currentColor;
-webkit-mask: var(--pb-eye) center / contain no-repeat;
mask: var(--pb-eye) center / contain no-repeat;
}
.pboard { --pb-eye: url("data:image/svg+xml;utf8,"); }
.pb-nowrow .crop-orig, .pb-nowrow .crop-erase { display: inline-flex; align-items: center; }
/* 🔄 2026-09-27 (J.J 신호 3e7ecd7b030c8075a4c0c6e93a83db2c 「편집초기화 버튼이 너무 흐리다 · 한 단계 밝게 · 아이콘 자연스럽게」)
기본 .ghost 는 --muted 글자 + --border 테두리라 어두운 판에서 거의 안 보였다.
⇒ 글자 한 단계 밝게(--tx2) · 테두리 --tx3 · 앞에 «되돌리기» 화살표(목록의 「되돌」 그림과 같은 모양 · 색은 글자색을 입는다).
⛔ 파랑(원본 보기)·주황(영역 지우기)을 쓰지 않는다 — 셋이 색으로 갈리는 줄이라 초기화는 «무색»이 맞다. */
.pb-nowrow .crop-clear { display: inline-flex; align-items: center; color: var(--tx2); border-color: var(--tx3); }
.pb-nowrow .crop-clear:hover { color: var(--tx); border-color: var(--tx2); }
.pb-nowrow .crop-clear::before {
content: ''; width: 14px; height: 14px; margin-right: 5px; flex: none;
display: inline-block; vertical-align: -2px; background: currentColor;
-webkit-mask: var(--pb-reset) center / contain no-repeat;
mask: var(--pb-reset) center / contain no-repeat;
}
.pboard { --pb-reset: url("data:image/svg+xml;utf8,"); }
/* 🔴 2026-09-26 (J.J ⑩ · 그림 jj-0926-편집-10) — 「See the / original」「Reset the / crop」이 두 줄로 접혔다.
까닭: 단추 글자 «접지 마라»가 폰 구역(아래 max-width 규칙)에만 있었다. 큰 화면에선 칸이 사진 폭이라
이름·단추 셋이 한 줄에 서려다 단추가 눌려 글자가 접혔다.
⇒ 단추는 «제 너비를 지킨다». 줄어드는 것은 이름 쪽이다(이미 말줄임 … 이 걸려 있다).
⛔ 이름에 flex:none 을 걸지 마라 — 그러면 이번엔 단추가 칸 밖으로 밀려난다. */
.pb-nowrow > button { flex: none; white-space: nowrap; }
.pb-nowrow .pb-name { min-width: 0; }
/* [자르기 초기화] 는 «값이 있을 때만» 뜬다. 라이브 .crop-clear 와 같은 규칙이다
(「자른 적이 있을 때만 그린다」 — app.js 가 그 자리를 이미 그렇게 갖고 있다). */
.pb-nowrow .pb-clear[hidden] { display: none; }
/* ── 큰 편집 사진 — 자르기 무대는 기존 .crop-stage 를 그대로 쓴다 ────────── */
/* 🔴 2026-09-25 — 이 줄이 «폰에서만» 걸려 있었다. 데스크톱에서는 안 걸려서
J.J 캡처의 「가운데 큰 사진이 까맣게 비고 손잡이만 왼쪽 끝」이 났다.
원래 주석(17-A4 실측, 폰 자리):
`.crop-stage` 는 어느 폭에서나 `min(58vh, 460px)` 인데, 담는 `.pb-stage` 는
`aspect-ratio:4/5` 라 «슬롯 높이»가 따로 있다. 460 을 그 안에 넣으면 어긋난다.
실측 2026-09-25 (1600×1100 · 흉내에 «진짜» 그림을 물려서):
.pb-stage 648×810 ← 4:5 슬롯. 맞는 값이다
.crop-stage 648×460 ← 460 에 갇혀 있었다
사진 349×436 ← 그래서 무대의 54% 만 차고 나머지가 까맣게 남았다
⇒ 폰만이 아니라 «작업판 안이면 늘» 슬롯을 따르게 한다. 상자는 ResizeObserver 가 비율 그대로 따라온다.
⛔ 이 줄을 다시 미디어 안으로 넣지 마라 — 폰에서만 맞고 데스크톱이 도로 깨진다.
⚠️ `.crop-stage` 의 `min(58vh,460px)` 자체는 «건드리지 않는다» — 옛 자르기 창이 그 값으로 산다. */
.pb-stage .crop-stage { height: 100%; }
.pb-stage { position: relative; width: 100%; aspect-ratio: 4 / 5;
background: #111; border-radius: 8px; overflow: hidden; touch-action: none;
box-shadow: inset 0 0 0 1px var(--border); line-height: 0; }
/* 🆕 2026-09-26 (J.J 신호 3e7ecd7b030c8075a4c0c6e93a83db2c 「적용 후 설정창엔 원본 아래위가 남아 있어 적용됐는지 모른다 · 미리보기처럼 모이게」)
«적용된» 자르기가 있는 사진(data-적용됨 · app.js 작업판열기)이고 아직 손대지 않았으면(미적용 자국 없음) 잘린 바깥을 «다 가린다» —
무대 바탕(#111)과 같은 색으로 덮어 미리보기처럼 결과만 보인다. 안내선도 감춘다.
손대기 시작하면(편집값바뀜 → data-미적용="1") 옛 반투명(0.55)으로 돌아가 원본을 보며 고친다.
⛔ .crop-sel 의 pointer-events 는 그대로다 — 가린 채로도 끌어서 고칠 수 있어야 한다. */
#pboard[data-적용됨="1"]:not([data-미적용="1"]) .pb-stage .crop-sel { box-shadow: 0 0 0 9999px #111; border-color: transparent; }
#pboard[data-적용됨="1"]:not([data-미적용="1"]) .pb-stage .crop-grid { opacity: 0; }
/* ── ④ 사진 아래 — 실제 편집 도구 (가로 한 줄) ──────────────────────────
⛔ 사진 «오른쪽 세로» 막대로 되돌리지 마라 — 2026-09-16 에 걷힌 판이다.
⛔ 「비율」 라벨을 다시 붙이지 마라 — 칩이 그 자체로 비율이고, 좁아지면 칩과 겹쳤다. */
.pb-tools { display: flex; align-items: center; gap: 8px; height: 38px; flex-wrap: nowrap; }
.pb-ratios { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pb-ratios::-webkit-scrollbar { display: none; }
/* 🔴 2026-09-25 (J.J 23.png) — 비율 칩이 «두 줄»로 접혔다. 무조건 한 줄이다.
J.J 원문: 「아마 사진 캔버스의 양쪽끝에 맞추는 것때문에 그러는데 그러지말고 무조건 1행으로」
── 까닭 (실측) ──────────────────────────────────────────
옮겨 심은 마디의 «진짜 이름»은 `.crop-ratios` 이고, 그 정본은 styles.css:703 의
`flex-wrap: wrap` 이다. 이 파일이 그걸 한 줄로 되돌리는 규칙을 이미 갖고 있었는데
**폰 구역(max-width:860) «안»에만** 있었다 — 「큰 화면은 멀쩡하다」고 봤기 때문이다.
그 전제가 깨졌다: 2026-09-25 짧은 창 고침으로 `.pb-col` 폭 바닥이 820px 아래에서
440 → 360 이 되면서, 큰 «폭»이어도 창이 낮으면 칸이 좁아져 칩이 접힌다.
⇒ 폭을 가리지 말고 «어느 화면에서나» 한 줄로 둔다. 넘치면 가로로 굴린다.
⛔ 사진 폭에 맞추려고 다시 접지 마라 — 그게 J.J 가 짚은 그것이다.
⛔ 폰 구역 안의 같은 규칙을 «지우지» 마라. 거기 것은 그 구역의 다른 값과 한 벌이다. */
/* 🔴 2026-09-26 (J.J ⑨) — 「비율과 돌리기 단추의 행이 안 맞고 비율이 아래로 내려가 있다」.
까닭(실측): `.crop-ratios` 의 정본(styles.css:703)에 `margin-top: 10px` 이 붙어 있다.
그 마디를 이 도구줄로 «옮겨 심으면서» 그 여백이 따라왔다 — 한 줄짜리 도구줄 안에서는
그만큼 «아래로» 밀린다. 잰 값: 도구줄 y 963(높이 38) · 돌리기 y 965 · 비율 y **972**.
⛔ styles.css 쪽 값을 건드리지 마라 — 거기 `.crop-ratios` 는 «자르기 판»에서 위 칸과 떨어뜨리는
제 몫이 있다. 여기(도구줄 안)에서만 0 으로 둔다. */
.pb-tools .crop-ratios,
.pb-tools .pb-ratios { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
margin-block: 0; overflow-x: auto; scrollbar-width: none; }
.pb-tools .crop-ratios::-webkit-scrollbar,
.pb-tools .pb-ratios::-webkit-scrollbar { display: none; }
.pb-tools .crop-ratios > *,
.pb-tools .pb-ratios > * { flex: none; }
.pb-sep { width: 1px; height: 18px; background: var(--border); flex: none; }
.pb-turns { display: flex; gap: 6px; margin-left: auto; flex: none; }
/* ── ⑤ [적용] — 편집값이 생겼을 때만 «뜬다». 자리는 «늘» 비워 둔다 ────────
⛔ 뜰 때만 자리를 만들면 손댈 때마다 사진이 출렁인다 (확정 규칙 ⑧).
그래서 높이 44 를 항상 차지하고 «안»만 숨긴다. */
.pb-apply { height: 44px; display: flex; align-items: center; gap: 8px; }
.pb-apply > * { visibility: hidden; }
.pb-apply.on > * { visibility: visible; }
.pb-say { font-size: 12.5px; color: var(--guide); }
.pb-apply .pb-undo { margin-left: auto; }
/* ── ⑥ 되돌리기 줄 — ② 원본 보는 중 / ③ 되돌린 뒤 (2026-09-18 · 8-A8) ────────
🔴 [이 원본으로 되돌리기]는 «위험한 동작»이라 투명이다 (목업 정본).
⛔ 채운 라임 [적용]과 같은 무게로 만들지 마라 — 손님이 눌러야 할 단추로 읽는다.
⚠️ ③ 의 안내 줄은 «읽는 글»이다(--read 계열). 오류색을 쓰지 않는다 —
손님이 «스스로» 되돌린 것이지 잘못된 일이 일어난 게 아니다.
⛔ 새 색을 짓지 않는다. 전부 tokens.css 에 있는 이름이다. */
.pb-revert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 34px; }
.pb-revert[hidden] { display: none; }
.pb-revert .rv-say { font-size: 12.5px; color: var(--muted); }
/* ③ 의 안내 줄만 --read 계열이다 (J.J 지침 ①-③). ⛔ --guide 로 대신하지 마라 —
그건 위저드의 «안내» 금색이고 뜻이 다르다(tokens.css 가 그렇게 못 박았다).
⛔ 오류색도 아니다 — 손님이 «스스로» 되돌린 것이지 잘못된 일이 일어난 게 아니다. */
.pb-revert.되돌림 .rv-say { color: var(--read); }
.pb-revert .rv-undo { margin-left: auto; }
/* ── ② 오른쪽 — 사진 «전체» 관리 ────────────────────────────────────────
[자동 설정하기] 가 여기 머리에 있다. 그건 «지금 사진 한 장»이 아니라
«사진 전체에 어떤 기준을 자동 적용할지»를 정하는 것이기 때문이다 (확정 규칙 ①).
⛔ 왼쪽 편집 도구에 섞지 마라. ⛔ 최상단으로 올리지도 마라. */
.pb-side { border-left: 1px solid var(--border); background: var(--surface);
display: flex; flex-direction: column; min-height: 0; position: relative; }
/* 🆕 2026-10-14 (J.J) — 옆판 왼쪽 가장자리를 끌어 넓이를 바꾼다(넓히면 한 줄 5장·6장). 두 번 누르면 처음(446)으로.
손잡이는 테두리 위 8px 띠 — 평소엔 안 보이고, 마우스를 올리거나 끄는 동안만 선이 보인다. */
.pb-side-grip { position: absolute; top: 0; bottom: 0; left: -4px; width: 8px; z-index: 6;
cursor: col-resize; touch-action: none; outline: none; }
.pb-side-grip::after { content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px;
background: transparent; transition: background .12s; }
.pb-side-grip:hover::after, .pb-side-grip:focus-visible::after, .pboard.pb-resizing .pb-side-grip::after { background: var(--accent); }
.pboard.pb-resizing { cursor: col-resize; user-select: none; }
.pb-side-head { display: flex; align-items: center; gap: 8px;
padding: 12px 14px 8px; }
.pb-side-n { font-weight: 700; font-size: 13px; color: var(--text); }
.pb-side-head .pb-auto { margin-left: auto; }
.pb-side-hint { margin: 0; padding: 0 14px 10px; font-size: 12px; color: var(--muted); }
/* 사진 격자·안 쓰는 사진은 «기존 것»이 그대로 들어온다 (#pg · #phOff).
⛔ 여기서 격자를 새로 그리지 마라 — renderMedia() 가 이미 그린다. */
/* 🔄 2026-09-25 (J.J 표시 ①) — 좌우 여백 14 → **7**. 목업을 잰 값에 맞춘다:
목업 옆판 430 · 격자 415 (여백 7.5씩) · 4칸 · 타일 98
⛔ 폭만 430 으로 줄이고 여백을 14 로 두면 격자가 401 이 되어 «3칸»이 된다(실측).
폭과 여백은 한 짝이다 — 하나만 고치지 마라. */
.pb-side-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 7px 16px; scrollbar-gutter: stable; } /* 🆕 10-14 — 스크롤바가 생겨도 칸 수가 안 바뀐다(위 .pboard 주석) */
/* 🔴 2026-09-25 (J.J 표시 ②) — 「안 쓰는 사진」이 «늘 보여야» 한다.
실측: 사진 24장 · 창 높이 800 에서 몸이 720 인데 속이 917 이라 스크롤이 생기고,
그 줄이 y=981 로 «화면 밖»으로 밀렸다(화면안=false). 아래로 내려야만 보였다 — J.J 지적 그대로.
⇒ 스크롤 칸 «바닥»에 붙인다. 목록은 그 위로 흐르고, 이 줄은 늘 제자리에 선다.
⚠️ 바탕을 깔아야 한다 — 안 깔면 뒤로 지나가는 타일이 글자에 비친다.
⚠️ 패딩 음수(-7px)는 «좌우 패딩(7px)»을 되돌리는 값이다. 둘이 «한 짝»이라 한쪽만 고치지 마라.
🔴 2026-09-25 정정 — 여기 「14px」이라 적혀 있었다(옛 값). 이 줄은 «한 짝» 경고라
숫자가 틀리면 다음 사람이 -14 로 되돌려 이 줄이 좌우로 삐져나간다. 검수가 잡았다. */
/* 🔵 축소(C1) · 2026-09-25 — 여기 있던 `.pb-side-body #phOff { position: sticky; … }` 를 걷었다.
S 가 #phOff 를 «옆판 발치»로 옮겨서 이 고르개는 이제 «한 줄도 안 걸린다».
⛔ 되살리지 마라 — J.J 가 그 꼴을 보고 「공중에 떠 있다」고 했다(판 바닥에서 372px 위).
붙이는 규칙은 아래 `.pb-side > #phOff` 한 벌이다. */
/* ── 🔵 확장(E1) · 2026-09-25 — 「안 쓰는 사진」의 «새 자리» 규칙을 «미리» 깔아 둔다 ──────
J.J 라이브 확인: 위 꼴(스크롤 칸 «안» + sticky)을 보고 **「공중에 떠 있음」**이라고 했다.
바라는 것: 옆판 «발치»에 붙고(목록과 안 겹침), 처음엔 «접힌» 채.
⇒ 자리를 옮기는 것은 `app.js`(sourcing.product-edit)라 **판이 다르다.**
그래서 셋으로 나눈다: **E1 규칙 깔기(여기) → S 갈아끼우기(app.js) → C1 옛 것 걷기.**
⭕ 지금은 #phOff 가 아직 «몸 안»이라 아래 규칙은 «한 줄도 안 걸린다» — 해가 없다.
⛔ 위 옛 규칙을 지금 걷지 마라 — 걷으면 이 판만 선 나무에서 그 줄이 목록과 같이 굴러
«화면 밖»으로 밀린다(그게 바로 이 옛 규칙이 고친 병이다). 걷는 것은 C1 이다. */
.pb-side > #phOff:not(:empty) {
flex: none;
border-top: 1px solid var(--border);
background: var(--surface);
padding: 6px 7px 8px;
max-height: 46%; /* 펼쳐도 판을 통째로 먹지 않게 — 그 안에서만 구른다 */
overflow-y: auto;
}
/* 빈 칸(끈 사진 0장)은 자리도 안 차지한다 — 테두리 한 줄이 떠 있으면 그것도 «뜬» 꼴이다 */
.pb-side > #phOff:empty { display: none; }
/* 옮긴 마디는 옛 규칙을 못 받는다 — 타일 규칙을 «새 자리»에도 건다 */
.pb-side > #phOff .photo-grid {
grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 8px;
}
.pb-side > #phOff .ph { aspect-ratio: 4 / 5; }
/* ── 「슉」 — 체크를 끄면 「안 쓰는 사진」으로 날아간다 (확정 규칙 ③) ───────
⛔ 그 자리에서 «사라지게» 두지 마라. 손님은 사진이 «지워진» 줄 안다.
★ 접혀 있으면 목적지 자리를 «잴 수 없다»(display:none 은 0,0).
⇒ 타일은 조용히 옮기고, «분신» 하나를 띄워 「안 쓰는 사진」 머리글 쪽으로 날려 보낸다.
★ 0.34s. ⛔ 늘리지 마라 — 길면 손님이 «기다리는» 것이 된다. */
.pb-fly { position: fixed; z-index: 60; pointer-events: none; border-radius: 8px;
overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.28);
transition: transform .34s cubic-bezier(.4, 0, .2, 1), opacity .34s ease; }
.pb-fly img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes pb-blink { 0%, 100% { background: transparent } 40% { background: color-mix(in srgb, var(--now) 22%, transparent) } }
.pb-blink { animation: pb-blink .5s ease; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
.pb-fly { transition: none; }
.pb-blink { animation: none; }
}
/* ── 좁은 화면 — 오른쪽 목록이 아래로 내려온다 ────────────────────────── */
@media (max-width: 860px) {
/* 🔄 2026-09-27 (J.J 신호 3ddecd7b030c80a6b3aecf3c115a46a3 「모바일 사진 편집창이 이상하다 · 편집을 할 수 없어요」)
병(조사 390×844 실측): 판이 높이 고정 격자(1fr · auto)라 위 칸이 ~435px 인데, 사진 기둥은 폭이 꽉 차 4:5 무대가 ~448px 에
도구줄·[적용]까지 ~662px 이 들었다 → 넘친 무대 위로 아래 사진 더미(#pg)가 그려졌다(둘 다 relative · 더미가 뒤에 온다).
⇒ 폰에선 판 «전체»가 한 줄로 내리 굴러간다: 무대 → 도구줄 → [적용] → 사진 목록. 무대 끌기는 .pb-stage touch-action:none 이 그대로 지킨다.
⛔ 격자를 rows: auto auto 로 두지 마라 — 목록 몸이 flex:1 · min-height:0 이라 95px 로 짜부라진다(조사에서 재 봤다). */
.pboard { display: block; overflow-y: auto; overscroll-behavior: contain; }
.pb-side { border-left: 0; border-top: 1px solid var(--border); max-height: none; }
.pb-side-body { overflow: visible; }
.pb-side-grip { display: none; } /* 🆕 10-14 — 폰은 판이 한 줄로 내리 구르므로 넓이 끌기가 없다 */
.pb-col { --pb-chrome: 138px; } /* 폰은 도구줄이 두 줄이다(위 주석) — 90 에서 38+10 이 늘었다 */
/* 🔴 여기부터 — 옮겨 심은 마디는 «슬롯 이름»의 규칙을 못 받는다 (2026-09-19 · 17-A5)
작업판은 자르기 UI 를 새로 만들지 않고 `openCropper` 가 만든 마디를 «옮겨 심는다».
그래서 손잡이(이벤트)는 살지만, 이 파일이 `.pb-ratios`·`.pb-erase` 같은 «제 이름»으로
써 둔 규칙은 들어온 마디(`.crop-ratios`·`.crop-erase`)에 한 줄도 안 걸린다.
17-A4 실측으로 그 결과 넷이 드러났다. 아래는 그 넷을 «들어오는 이름»으로 다시 쓴 것이다.
⛔ 큰 화면은 멀쩡하다(1280 에서 넷 다 안 난다) — 그래서 폰 구역으로만 한정한다. */
/* ① 비율 칩이 폰에서 «안 눌리던» 것 (17-A4 실측: 진짜 탭으로 4:5→4:5, 안 바뀜)
칩 줄이 38px 슬롯 안에서 세 줄(108px)로 접혀 위로 넘쳤고, 그렇게 겹친 자리를
`.crop-sel`(절대 · 사진 위 자르는 네모)이 덮어 탭을 먹었다.
⇒ 작업판이 `.pb-ratios` 에 이미 갖고 있던 «한 줄 + 가로 굴림»을 들어오는 이름에도 준다.
⛔ `.crop-sel` 의 pointer-events 를 끄지 마라 — 그건 가리는 것을 놔둔 채 «드래그»를 죽인다. */
.pb-tools .crop-ratios { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
overflow-x: auto; scrollbar-width: none; }
.pb-tools .crop-ratios::-webkit-scrollbar { display: none; }
.pb-tools .crop-ratios > * { flex: none; }
/* 🔴 돌리기·뒤집기 넷이 «처음부터 화면 밖»이던 것 (Opus Ultra 실측 2026-09-22 · 375: 오른끝 522 / 창 375 = 147px 밖)
`.pb-tools` 는 한 줄(nowrap)이고 그 안에서 칩 줄이 `flex:1 1 auto` 로 남는 자리를 다 먹는다 —
그래서 그 «뒤»에 선 돌리기 무리는 언제나 줄 끝, 곧 «화면 밖»에 놓인다. 문서 넘침은 0 이라 그 잣대론 안 잡힌다.
⇒ 폰에서만 도구줄을 «두 줄»로 편다: 칩 줄이 한 줄을 다 쓰고 돌리기 넷이 아랫줄에 선다.
⛔ ① 의 「칩 줄 = 한 줄 + 가로 굴림」을 되돌리지 마라 — 칩이 세 줄로 접혀 자르는 네모를 덮던 것을 막는 못이다(17-A4).
여기서 펴는 것은 «도구줄»이지 «칩 줄»이 아니다.
⚠️ 줄이 하나 늘었으니 사진 높이에서 빼는 값도 같이 는다(머리 34 + 도구 38×2 + gap 9×3 = 138). ⛔ 한쪽만 고치지 마라. */
.pb-tools { flex-wrap: wrap; height: auto; row-gap: 8px; }
.pb-tools .crop-turns { margin-left: 0; }
.pb-tools .crop-sep { display: none; } /* 두 줄이 되면 가름선이 줄 끝에 홀로 남는다 */
/* ③④ 사진 위 줄 — 이름이 27px 로 뭉개지고, 단추 글자가 세로로 쌓이던 것
`.pb-nowrow{height:34px}` 한 줄에 «이름 + 단추 셋»이 다 들어가려다 셋 다 37px 로 눌렸다.
⇒ 접히게 두고, 이름은 제 줄을 통째로 쓰고, 단추는 제 너비를 지킨다. */
.pb-nowrow { height: auto; min-height: 34px; flex-wrap: wrap; row-gap: 6px; }
.pb-nowrow .pb-name { flex: 1 1 100%; min-width: 0; }
.pb-nowrow > button { flex: none; white-space: nowrap; }
}
/* ── 🔴 목업과 갈렸던 자리 셋 (J.J 2026-09-24 지적 · 페이블이 정본 목업과 기계 대조) ──────
정본 : ~/globalroad-notes/목업-지에딧-제품편집-판매페이지형-20260911.html 의 작업판 오른쪽 판
⚠️ 여기 규칙은 «작업판 옆판 안»으로만 건다. 아래 띠(메인 격자)는 제 정본이 따로 있다 —
거기선 대표가 `.ph.hero` 로 2×2 인 것이 «맞다»(app.js renderMedia 주석). 같이 고치면 그쪽이 깨진다. */
/* ㉢ 대표 타일이 2×2 로 커져 격자가 통째로 어긋나던 것.
목업에서 대표 타일은 «다른 타일과 같은 크기»이고, 구별은 「대표 사진」 딱지와
지금 편집 중이라는 라임 테두리(.타일.지금)가 한다. 크기로 구별하지 않는다. */
.pb-side-body .ph.hero { grid-column: auto; grid-row: auto; }
.pb-side-body .ph.hero .thumb { font-size: 12px; }
/* 🔴🔴 2026-09-25 — «이 화면이 목업과 달라 보인 뿌리» (J.J 두 번 지적 · 페이블 기계 대조)
옆판은 본 카드의 격자를 «그대로 옮겨 담는다»:
app.js 몸.appendChild(pg) ← #pg «그 요소»를 통째로 옮긴다
styles.css #pg, #pg.photo-grid, #pg.pg { grid-template-columns: repeat(6, 1fr) }
`#pg` 는 640px 짜리 «본 카드»를 보고 지은 격자다. id 로 건 규칙이라 자리를 옮겨도 따라온다.
본 카드 안폭 640 · 6칸 · gap10 → 타일 98.3px ← 목업 100px 과 거의 같다(맞는 값이다)
옛 옆판 안폭 292 · 6칸 · gap10 → 타일 40.3px ← 2.4배 작다
목업 .타일 width:100px 고정 · 4:5 · 줄바꿈 (칸 수를 «폭»이 정한다)
🔴 그래서 「체크·번호·⋮⋮ 가 뭉쳐 보인다」는 «따로 난 병이 아니다». 배지 넷의 자리는
목업과 같다(모서리 4~7px). 40px 타일 안에서 `5+18+…+17+5 = 45 > 40` 이라 닿는 것뿐이다.
⛔ 그걸 고치려고 배지 «자리»를 옮기지 마라 — 타일을 키운 뒤에 도로 어긋난다.
「＋업로드」 글자가 점선 밖으로 넘치던 것도 같은 까닭이다.
⛔ styles.css 의 `#pg` 규칙을 지우지 마라 — «본 카드»에서는 그 값이 맞다.
여기서 «옆판 안일 때만» 덮는다. 지우면 멀쩡한 쪽이 깨진다.
⚠️ 칸 수를 `repeat(4, …)` 로 «박지» 마라 — 판이 좁아지면(폰·반응형) 타일이 뭉개진다.
목업도 칸 수를 «폭»이 정한다(flex 줄바꿈). minmax 로 두면 좁아질 때 3칸·2칸으로 내려간다.
⚠️ minmax 의 아래값은 98 이 아니라 **95** 다. 415px 에서
`(415+8) / (98+8) = 3.99` → 3칸으로 «한 칸 모자라게» 떨어진다(실측). 95 면 4.1 → 4칸이고
각 칸은 `(415-24)/4 = 97.75px` 로 목업과 같아진다. ⛔ 98 로 올리지 마라. */
.pb-side-body #pg,
.pb-side-body #pg.photo-grid,
.pb-side-body #pg.pg { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 8px; }
/* ⑶ 비율 — 목업 `.타일{ aspect-ratio:4/5 }`. 본 카드는 고른 비율(--ph-ar)을 따라가는 것이 맞지만
(J.J 2026-08-22 · 사진1) 옆판은 «고르는 자리»가 아니라 «넘겨보는 자리»라 목업대로 4:5 로 세운다. */
.pb-side-body .ph { aspect-ratio: 4 / 5; }
/* ㉠ 끌기 손잡이 — 정본 `.끌` 값 그대로 (왼쪽 아래 · 18×18 · 반투명 검정) */
.pb-side-body .ph-grip,
#pg .ph-grip {
position: absolute; left: 5px; bottom: 5px; width: 18px; height: 18px;
border-radius: 5px; display: grid; place-items: center;
background: rgba(0, 0, 0, .5); color: rgba(255, 255, 255, .85);
font-size: 9px; line-height: 1; letter-spacing: -1px;
cursor: grab; z-index: 2; user-select: none;
}
#pg .ph.add .ph-grip { display: none; } /* ＋업로드 칸에는 붙지 않는다 */
/* 체크 — 정본 `.체크` 값 (오른쪽 위 4px · 16×16 · 흰 테두리 반투명 검정 바탕).
⛔ 초록으로 «채우지» 마라 — 채운 칸은 이 앱에서 「켜져 있음」이 아니라 다른 뜻으로 읽힌다. */
.pb-side-body .ph-chk { top: 4px; right: 4px; }
.pb-side-body .ph-chk .cl-box { width: 16px; height: 16px; border-radius: 4px; }
/* ═══ 사진 편집창 단추 체계 «B안» (J.J 확정 2026-09-30 · 신호 3d4ecd7b030c80738d8de11fc23d8c56) ═══════════════
목업: ~/globalroad-notes/목업-지에딧-사진편집-단추체계-A안B안-20260930.html (오른쪽 B안) · 영역 지우기 = …영역지우기-단추-시안-20260930.html ㉡.
모양을 «하는 일의 종류»로 가른다 — 상태는 스위치 · 도구는 네모 그림단추 · 진짜 실행(영역 지우기)만 «면»이 있다 · 처음으로는 글자만.
⛔ 색을 새로 짓지 않는다 — 전부 tokens.css 에 있는 이름(목업이 쓴 값 그대로)이다.
⛔ 사진 무대(.pb-stage)는 손대지 않는다. 바뀌는 곳은 위(.pb-nowrow)·아래(.pb-tools) 두 줄뿐이다. */
/* ① 편집본 | 원본 — 켜고 끄는 «상태»라 스위치다. 지금 무엇을 보는지 늘 보인다. */
.pb-nowrow .crop-vsw { display: inline-flex; flex: none; gap: 2px; padding: 3px;
background: var(--chip-c); border: 1px solid var(--line-c); border-radius: 10px; }
.pb-nowrow .crop-vsw > button { border: 0; background: transparent; color: var(--tx3);
font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1; padding: 0 13px; height: 28px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.pb-nowrow .crop-vsw > button:hover:not(:disabled) { color: var(--tx2); }
.pb-nowrow .crop-vsw > button.on { background: var(--now-bg); color: var(--now); box-shadow: inset 0 0 0 1px var(--now-ln); }
.pb-nowrow .crop-vsw > button:disabled { opacity: .45; cursor: not-allowed; }
/* 옛 단추 꼴(파랑 글자·테 + 눈 그림)은 스위치 안에선 안 입는다 */
.pb-nowrow .crop-vsw .crop-orig { border: 0; }
.pb-nowrow .crop-vsw .crop-orig::before { content: none; }
/* ② 다운로드 — 가끔 쓴다. 그림만 두고 이름은 우리 쪽지(data-쪽지)가 말한다. */
.pb-nowrow .crop-dl { flex: none; width: 34px; height: 34px; padding: 0; border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center; color: var(--tx2); border-color: var(--line-c); }
.pb-nowrow .crop-dl:hover:not(:disabled) { color: var(--tx); border-color: var(--tx2); }
.pb-nowrow .crop-dl svg { width: 16px; height: 16px; }
/* ③ 영역 지우기 — 이 창에서 사진이 실제로 바뀌는 유일한 일이라 혼자 «은은하게 채운 면»(시안 ㉡).
⚠️ 그림은 라이브 그대로(색이 안에 박혀 있어 늘 금색 — 맞는 동작). */
.pb-nowrow .crop-erase { background: var(--guide-bg); border-color: var(--guide-ln); color: var(--guide); }
.pb-nowrow .crop-erase:hover { background: color-mix(in srgb, var(--guide) 18%, transparent); border-color: var(--guide); color: var(--guide); }
/* ④ 비율 넷 — 따로 떨어진 알약이 아니라 «붙은 덩어리». 고른 것만 라임. */
.pb-tools .crop-ratios { flex: 0 1 auto; display: inline-flex; gap: 2px; padding: 3px;
background: var(--chip-c); border: 1px solid var(--line-c); border-radius: 10px; }
.pb-tools .crop-ratios .ratio-c { border: 0; background: transparent; color: var(--tx3);
font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1; padding: 0 13px; height: 28px; border-radius: 7px; }
.pb-tools .crop-ratios .ratio-c:hover { color: var(--tx2); }
.pb-tools .crop-ratios .ratio-c.on { background: var(--now-bg); color: var(--now); box-shadow: inset 0 0 0 1px var(--now-ln); border: 0; }
/* ⑤ 도구 — [최대로 잡기] | [돌리기·뒤집기 넷] 을 네모 그림단추 한 묶음으로, 둘 사이는 얇은 선. */
.pb-tools .crop-turns { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px;
background: var(--chip-c); border: 1px solid var(--line-c); border-radius: 10px; }
.pb-tools .crop-turns .ghost { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; border-radius: 7px;
color: var(--tx2); display: inline-flex; align-items: center; justify-content: center; }
.pb-tools .crop-turns .ghost:hover { background: color-mix(in srgb, var(--tx) 10%, transparent); color: var(--tx); }
.pb-tools .crop-turns svg { width: 16px; height: 16px; }
/* 묶음 안 얇은 선 = .crop-vr(pe15). 옛 가름(.crop-sep)은 도구줄로 옮겨 심어지지만(시험이 그 네 줄을 오려 돈다) B안에선 안 보인다. */
.pb-tools > .crop-sep { display: none; }
.pb-tools .crop-turns .crop-vr { display: block; flex: none; width: 1px; height: 18px; margin: 0 2px; background: var(--line-c); }
/* ⑥ 처음으로(편집 초기화) — 도구가 아니라 «취소»다. 돌리기 옆에 같은 모양으로 두면 잘못 눌러 통째로 날린다 → 글자만, 떼어 둔다. */
.pb-apply .crop-clear { flex: none; border: 0; background: transparent; color: var(--tx3); padding: 0 2px; height: 32px;
font-family: inherit; font-weight: 600; font-size: 12.5px; line-height: 1; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-c); cursor: pointer; }
.pb-apply .crop-clear:hover { color: var(--danger); text-decoration-color: var(--danger); }
.pb-apply .crop-clear::before { content: none; }
/* 🔄 2026-10-03 (J.J 2번 «된다») — [처음으로]는 [적용] 줄 «왼쪽»이다(app.js 작업판에심기). 손대기 전에도 «자른 값이 있으면» 보인다 —
[적용] 줄은 안을 숨기지만(visibility) 이 하나만 연다. 「바꾼 것이 있어요 — 적용해야 저장돼요」 글은 판에서 안 보인다(밝은 [적용]으로 충분). */
.pb-apply .crop-ctl { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 0; }
.pb-apply .crop-ctl .crop-clear { visibility: visible; }
.pb-apply .crop-say { display: none; }
.pb-apply .crop-acts { margin-left: auto; }
/* 🔄 2026-10-03 (16:9 정리 · J.J 신호 3eeecd7b030c808c98ded42b362404fb) — 폰에서 도구 묶음은 둘째 줄 «왼쪽»에 선다.
까닭(실측 390×844): [처음으로]가 [적용] 줄로 간 뒤 위 B안 규칙(margin-left:auto)이 묶음을 오른끝에 붙여, 끝 단추 쪽지가 판 밖으로 11px 나가
판이 옆으로 굴렀다(scrollWidth 401 / 390). 폰 구역의 원래 뜻(「돌리기 넷이 아랫줄에 선다」 · margin-left:0)을 B안 «뒤»에서 다시 건다. */
@media (max-width: 860px) {
.pb-tools .crop-turns { margin-left: 0; }
}
/* ── 🔄 2026-10-03 (J.J 신호 3eeecd7b030c808c98ded42b362404fb «됐다. 헌데…») ─────────────────────────────────
ⓐ 「처음으로가 왜 왼쪽 정렬인가 · 색도 너무 연하다」 → [적용] 줄 «오른쪽»에 선다 · 글자 한 단계 밝게(--tx3 → --tx2).
손대기 전(.on 없음)엔 [되돌리기]·[적용]을 자리째 빼서([처음으로] 혼자) 오른끝에 붙는다. 손대면 그 둘이 [처음으로] 오른쪽에 나온다.
⚠️ 마디 차례는 그대로다(.crop-ctl 맨 앞 = [처음으로] · TG2 ㉔) — 오른쪽으로 미는 것은 여기 margin 이 한다.
⚠️ 줄 높이(44)는 그대로라 사진은 안 흔들린다(확정 규칙 ⑧ 의 뜻). 옆으로 비켜서는 것은 작은 글자 하나뿐이다.
ⓑ 「원본을 누르면 원본에서 아무것도 할 수 없다 → 오른쪽 하단에 되돌리기 단추」 → 원본을 보는 동안(.pb-revert.원본중)
비어 있던 도구줄·[적용] 줄을 접고, [편집 전으로 되돌리기]를 사진 바로 아래 «오른쪽»에 또렷하게 세운다.
⛔ 하는 일은 그대로다(되돌리기물음 → 한 번 묻고 «첫 편집 전»으로) — 글·조건(판정() 하나 · 30일)은 app.js 가 정한다. 여기는 자리와 모양뿐. */
.pb-apply .crop-clear { margin-left: auto; color: var(--tx2); text-decoration-color: var(--tx3); }
.pb-apply .crop-clear ~ .crop-acts { margin-left: 12px; }
.pb-apply:not(.on) .crop-acts { display: none; }
.pb-col:has(> .pb-revert.원본중:not([hidden])) > .pb-tools,
.pb-col:has(> .pb-revert.원본중:not([hidden])) > .pb-apply { display: none; }
.pb-revert.원본중 { justify-content: flex-end; }
.pb-revert.원본중 .rv-do { height: 36px; padding: 0 14px; color: var(--tx); border-color: var(--tx2); font-weight: 700; }
.pb-revert.원본중 .rv-do:hover:not(:disabled) { border-color: var(--tx); }