/* 사진 편집기 — 스튜디오급 UI 보정 (v234)
   v232의 진한 핑크/퍼플 느낌을 줄이고, 살롱 업무앱처럼 차분한 고급 톤으로 덮는다. */

.pe-sheet {
  --pe-bg: #111217;
  --pe-surface: rgba(25, 26, 31, 0.92);
  --pe-surface-2: rgba(34, 35, 40, 0.94);
  --pe-line: rgba(255, 250, 242, 0.1);
  --pe-text: #f7f1e8;
  --pe-muted: rgba(247, 241, 232, 0.64);
  --pe-copper: #c69b63;
  --pe-rose: #d08c8e;
  --pe-sage: #87977d;

  background: #111217 !important;
}

.pe-root {
  color: var(--pe-text) !important;
}

.pe-topbar,
.pe-tabs,
.pe-panel {
  background: var(--pe-surface) !important;
  border-color: var(--pe-line) !important;
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.24);
}

.pe-title {
  background: none !important;
  color: var(--pe-text) !important;
  -webkit-text-fill-color: currentColor !important;
  letter-spacing: 0 !important;
  font-weight: 800 !important;
}

.pe-btn-primary,
.pe-action-btn,
.pe-chip-btn.on,
.pe-tab.on {
  background: linear-gradient(135deg, #c69b63 0%, #d08c8e 100%) !important;
  border-color: rgba(255, 250, 242, 0.2) !important;
  color: #111217 !important;
  box-shadow: 0 8px 24px rgba(198, 155, 99, 0.22) !important;
}

.pe-action-btn-secondary,
.pe-chip-btn,
.pe-tab,
.pe-iconbtn,
.pe-back-btn {
  background: rgba(255, 250, 242, 0.06) !important;
  border: 1px solid rgba(255, 250, 242, 0.09) !important;
  color: var(--pe-text) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.pe-tab {
  min-width: 74px;
  height: 36px;
  padding: 0 13px !important;
}

.pe-canvas {
  border-radius: 8px !important;
  box-shadow: 0 22px 58px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,250,242,0.08) !important;
}

.pe-panel {
  max-height: 48vh !important;
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom)) !important;
}

.pe-field-label {
  color: var(--pe-muted) !important;
  font-size: 11px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.pe-studio-hero {
  border: 1px solid rgba(255,250,242,0.1);
  background: linear-gradient(135deg, rgba(247,241,232,0.1), rgba(135,151,125,0.08));
  border-radius: 8px;
  padding: 13px 14px;
  margin-bottom: 12px;
}

.pe-studio-hero span,
.pe-studio-tag {
  color: var(--pe-copper);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pe-studio-hero strong {
  display: block;
  margin-top: 4px;
  color: var(--pe-text);
  font-size: 16px;
  line-height: 1.25;
}

.pe-studio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pe-studio-card {
  min-height: 96px;
  border: 1px solid rgba(255,250,242,0.1);
  border-radius: 8px;
  background: rgba(255,250,242,0.055);
  color: var(--pe-text);
  padding: 12px;
  text-align: left;
}

.pe-studio-card strong {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.2;
}

.pe-studio-card small {
  display: block;
  margin-top: 5px;
  color: var(--pe-muted);
  font-size: 11px;
  line-height: 1.35;
}

.pe-studio-section {
  margin-top: 14px;
}

.pe-segment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.pe-segment button {
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,250,242,0.1);
  background: rgba(255,250,242,0.055);
  color: var(--pe-text);
  font-weight: 700;
}

.pe-segment button.on {
  background: var(--pe-copper);
  color: #111217;
  border-color: transparent;
}

.pe-slider {
  display: block;
  margin-top: 13px;
}

.pe-slider-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--pe-muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.pe-slider input[type="range"],
input[data-studio-slider] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pe-sage), var(--pe-copper), var(--pe-rose));
  outline: none;
}

.pe-slider input[type="range"]::-webkit-slider-thumb,
input[data-studio-slider]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fffaf2;
  border: 2px solid var(--pe-copper);
  box-shadow: 0 3px 12px rgba(0,0,0,0.34);
}

.pe-template-premium-btn {
  margin-top: 12px;
  width: 100%;
}

.pe-tpl-loop-hero,
.pe-tpl-loop-section,
.pe-tpl-loop-done {
  background: rgba(255,250,242,0.06);
  border: 1px solid rgba(255,250,242,0.1);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.pe-tpl-loop-copy {
  display: grid;
  gap: 4px;
}

.pe-tpl-loop-copy span,
.pe-tpl-loop-head span {
  color: #c69b63;
  font-size: 11px;
  font-weight: 800;
}

.pe-tpl-loop-copy strong,
.pe-tpl-loop-head strong,
.pe-tpl-loop-done strong {
  color: #fffaf2;
  font-size: 15px;
  font-weight: 900;
}

.pe-tpl-loop-copy p,
.pe-tpl-loop-card small {
  color: rgba(255,250,242,0.68);
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.pe-tpl-loop-preview {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 10px 0;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(127,146,121,0.38), rgba(198,155,99,0.28));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,250,242,0.78);
  font-size: 12px;
  font-weight: 800;
}

.pe-tpl-loop-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pe-tpl-loop-preview i {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(17,18,23,0.72);
  color: #fffaf2;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.pe-tpl-loop-actions,
.pe-tpl-loop-done div {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 8px;
}

.pe-tpl-loop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.pe-tpl-loop-cats {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.pe-tpl-loop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pe-tpl-loop-card {
  min-height: 92px;
  position: relative;
  border: 1px solid rgba(255,250,242,0.12);
  border-radius: 8px;
  background: rgba(255,250,242,0.08);
  color: #fffaf2;
  padding: 22px 9px 10px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.pe-tpl-loop-card strong,
.pe-tpl-loop-card small {
  display: block;
  overflow-wrap: anywhere;
}

.pe-tpl-loop-card strong {
  font-size: 12px;
  line-height: 1.26;
  font-weight: 900;
}

.pe-tpl-loop-card small {
  margin-top: 5px;
}

.pe-tpl-loop-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 8px;
  font-weight: 900;
}

.pe-tpl-loop-badge.free {
  background: rgba(31,157,99,0.18);
  color: #79e0ad;
}

.pe-tpl-loop-badge.pro {
  background: rgba(202,161,90,0.2);
  color: #e8d9b8;
}

.pe-tpl-loop-done {
  display: grid;
  gap: 8px;
}

.pe-mask-status {
  border: 1px solid rgba(255,250,242,0.1);
  border-radius: 8px;
  background: rgba(255,250,242,0.06);
  padding: 12px;
  margin-bottom: 14px;
}

.pe-mask-status-grid {
  display: grid;
  gap: 8px;
}

.pe-mask-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: start;
  padding: 9px;
  border: 1px solid rgba(255,250,242,0.1);
  border-radius: 8px;
  background: rgba(17,18,23,0.46);
}

.pe-mask-status-row strong,
.pe-mask-status-row small,
.pe-mask-status-row em {
  display: block;
}

.pe-mask-status-row strong {
  color: #fffaf2;
  font-size: 12px;
  font-weight: 900;
}

.pe-mask-status-row small,
.pe-mask-status-row em {
  color: rgba(255,250,242,0.64);
  font-size: 11px;
  line-height: 1.35;
}

.pe-mask-status-row em {
  grid-column: 1 / -1;
  font-style: normal;
}

.pe-mask-badge {
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.pe-mask-badge.strong {
  color: #83ecc0;
  background: rgba(31,157,99,0.18);
}

.pe-mask-badge.weak,
.pe-mask-badge.pending {
  color: #e8d9b8;
  background: rgba(202,161,90,0.18);
}

.pe-mask-badge.fallback,
.pe-mask-badge.disabled {
  color: rgba(255,250,242,0.72);
  background: rgba(255,250,242,0.1);
}

/* PE-AI-1A — 부위 기반 추천 카드 */
.pe-reco {
  border: 1px solid rgba(255,250,242,0.1);
  border-radius: 14px;
  background: rgba(255,250,242,0.06);
  padding: 12px;
  margin-bottom: 14px;
}

.pe-reco-grid {
  display: grid;
  gap: 8px;
}

.pe-reco-card {
  border: 1px solid rgba(255,250,242,0.1);
  border-radius: 12px;
  background: rgba(17,18,23,0.46);
  padding: 10px 11px;
}

.pe-reco-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.pe-reco-head strong {
  color: #fffaf2;
  font-size: 12px;
  font-weight: 900;
}

.pe-reco-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.pe-reco-chip {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,250,242,0.78);
  background: rgba(255,250,242,0.08);
  border: 1px solid rgba(255,250,242,0.1);
  border-radius: 999px;
  padding: 3px 8px;
}

.pe-reco-chip b {
  color: #fffaf2;
  font-weight: 900;
}

.pe-reco-apply {
  width: 100%;
}

/* PE-AI-1B — AI 정밀 추천 버튼 / 로딩 / 동의 모달 */
.pe-reco-precise-btn {
  border: 1px solid rgba(131,236,192,0.35);
  background: rgba(31,157,99,0.16);
  color: #83ecc0;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.pe-reco-precise-btn:disabled { opacity: 0.55; cursor: default; }

.pe-reco-loading {
  font-size: 11px;
  color: rgba(255,250,242,0.7);
  padding: 6px 2px;
}

.pe-reco-consent-ov {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  padding: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.pe-reco-consent {
  width: 100%;
  max-width: 340px;
  background: #1b1c22;
  border: 1px solid rgba(255,250,242,0.12);
  border-radius: 16px;
  padding: 18px;
}
.pe-reco-consent-title { color: #fffaf2; font-size: 15px; font-weight: 900; margin-bottom: 8px; }
.pe-reco-consent-body { color: rgba(255,250,242,0.78); font-size: 12px; line-height: 1.5; margin-bottom: 16px; }
.pe-reco-consent-btns { display: flex; gap: 8px; justify-content: flex-end; }

.pe-l3-panel { color: #fffaf2; }
.pe-l3-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.pe-l3-sub { color: rgba(255,250,242,0.68); font-size: 12px; line-height: 1.45; }
.pe-l3-badge {
  flex: 0 0 auto;
  border: 1px solid rgba(255,250,242,0.14);
  background: rgba(255,250,242,0.08);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 900;
  color: #f6d7a8;
}
.pe-l3-mode-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }
.pe-l3-mode {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,250,242,0.11);
  background: rgba(255,250,242,0.06);
  color: #fffaf2;
  border-radius: 8px;
  padding: 11px 12px;
  cursor: pointer;
}
.pe-l3-mode.on { border-color: rgba(246,215,168,0.78); background: rgba(246,215,168,0.12); }
.pe-l3-mode span { display: block; font-size: 13px; font-weight: 900; margin-bottom: 3px; }
.pe-l3-mode small { display: block; color: rgba(255,250,242,0.66); font-size: 11px; line-height: 1.35; }
.pe-l3-cost, .pe-l3-loading, .pe-l3-empty, .pe-l3-result-meta {
  color: rgba(255,250,242,0.7);
  font-size: 12px;
  line-height: 1.45;
}
.pe-l3-cost { margin-bottom: 10px; }
.pe-l3-empty, .pe-l3-loading, .pe-l3-error {
  border: 1px solid rgba(255,250,242,0.1);
  background: rgba(255,250,242,0.06);
  border-radius: 8px;
  padding: 12px;
}
.pe-l3-error { color: #ffd0d0; font-size: 12px; line-height: 1.45; margin-top: 10px; }
.pe-l3-preview { margin-top: 12px; }
.pe-l3-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pe-l3-compare figure {
  margin: 0;
  border: 1px solid rgba(255,250,242,0.1);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,250,242,0.05);
}
.pe-l3-compare img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.pe-l3-compare figcaption {
  padding: 6px 8px;
  font-size: 11px;
  color: rgba(255,250,242,0.72);
}
.pe-l3-result-meta { margin: 8px 0; }
.pe-l3-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pe-l3-create { margin-top: 2px; }

.pe-l3-consent-ov {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  padding: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
.pe-l3-consent {
  width: 100%;
  max-width: 360px;
  background: #1b1c22;
  border: 1px solid rgba(255,250,242,0.12);
  border-radius: 16px;
  padding: 18px;
}
.pe-l3-consent-title { color: #fffaf2; font-size: 15px; font-weight: 900; margin-bottom: 8px; }
.pe-l3-consent-body, .pe-l3-consent-cost { color: rgba(255,250,242,0.78); font-size: 12px; line-height: 1.5; }
.pe-l3-consent-cost { margin: 10px 0 16px; color: #f6d7a8; font-weight: 800; }
.pe-l3-consent-btns { display: flex; gap: 8px; justify-content: flex-end; }

#tplV2Sheet {
  background: #111217 !important;
  color: #f7f1e8 !important;
}

#tplV2Sheet header {
  background: rgba(25,26,31,0.96) !important;
  border-bottom: 1px solid rgba(255,250,242,0.1) !important;
}

#tpv2Cats {
  background: rgba(17,18,23,0.98) !important;
  border-bottom: 1px solid rgba(255,250,242,0.08) !important;
}

#tpv2Search {
  background: rgba(255,250,242,0.08) !important;
  color: #f7f1e8 !important;
  border: 1px solid rgba(255,250,242,0.12) !important;
  border-radius: 8px !important;
}

#tpv2Grid {
  background: #111217 !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
}

.tpv2-card {
  border: 1px solid rgba(255,250,242,0.1) !important;
  border-radius: 8px !important;
  background: rgba(255,250,242,0.055) !important;
  color: #f7f1e8 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.24);
}

.tpv2-card > div:first-child {
  background: linear-gradient(135deg, #24252b, #7f9279, #c69b63) !important;
  color: #fffaf2 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.42) !important;
}

@media (width <= 430px) {
  .pe-studio-grid {
    grid-template-columns: 1fr;
  }

  .pe-tab {
    min-width: 68px;
  }
}

/* ──────────────────────────────────────────────────────────────
   [작업실 자연스러운 전환] 작업실(밝은 화면)에서 편집기를 열 때(.pe-embed-soft)
   '검은 전체화면 창'이 튀는 느낌을 없애려고 라이트 테마로 덮는다.
   레버리지: studio 의 CSS 변수(--pe-*)만 라이트로 재정의하면 var() 쓰는
   대부분 컴포넌트(슬라이더 라벨/필드/카드/세그먼트/타이틀)가 한 번에 밝아진다.
   하드코딩 크림색(#fffaf2/#e8d9b8) 쓰는 곳만 타깃으로 추가 보정.
   범위는 전부 `.pe-embed-soft` 하위 → 일반(챗봇/기본) 편집기 열기엔 영향 0.
   ────────────────────────────────────────────────────────────── */
.pe-sheet.pe-embed-soft {
  --pe-bg: #f4f5f7;
  --pe-surface: #fff;
  --pe-surface-2: #f1f2f4;
  --pe-line: rgba(0, 0, 0, 0.08);
  --pe-text: #1f2430;
  --pe-muted: #6b7280;

  background: #f4f5f7 !important;
  animation: pe-embed-fade 200ms ease-out;
}
@keyframes pe-embed-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 캔버스 스테이지 — 검은 void → 작업실 톤 밝은 면 */
.pe-embed-soft .pe-stage { background: #eceef1; }
.pe-embed-soft .pe-canvas {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}
.pe-embed-soft .pe-panel { background: #fff !important; color: #1f2430; }
/* 상단바 버튼 — 밝은 스테이지 위에서 보이게(투명-흰 → 옅은 회색면+진한 글자) */
.pe-embed-soft .pe-iconbtn,
.pe-embed-soft .pe-back-btn,
.pe-embed-soft .pe-action-btn-secondary,
.pe-embed-soft .pe-chip-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #1f2430 !important;
}
.pe-embed-soft .pe-topbar-chip {
  background: rgba(0, 0, 0, 0.06);
  color: #1f2430;
  backdrop-filter: none;
}
/* 패널 내부 하드코딩 밝은 글자 보정 */
.pe-embed-soft .pe-slider-val,
.pe-embed-soft .pe-action-label,
.pe-embed-soft .pe-section-label,
.pe-embed-soft .pe-tpl-loop-copy strong,
.pe-embed-soft .pe-tpl-loop-head strong,
.pe-embed-soft .pe-tpl-loop-done strong,
.pe-embed-soft .pe-tpl-loop-card,
.pe-embed-soft .pe-tpl-loop-preview i,
.pe-embed-soft .pe-mask-status-row strong,
.pe-embed-soft .pe-mask-status-row small,
.pe-embed-soft .pe-mask-status-row em { color: #1f2430 !important; }
.pe-embed-soft .pe-tpl-loop-card,
.pe-embed-soft .pe-studio-card,
.pe-embed-soft .pe-segment button { background: #f4f5f7 !important; }
.pe-embed-soft .pe-input { background: #fff; color: #1f2430; }
.pe-embed-soft .pe-hint { color: #8a8f99; }