:root {
  --ddg-bg: #eef1f5;
  --ddg-surface: #ffffff;
  --ddg-surface-soft: #f7f8fa;
  --ddg-line: #dfe3e8;
  --ddg-line-strong: #c8ced6;
  --ddg-text: #20242a;
  --ddg-muted: #747d88;
  --ddg-accent: #ef4b4b;
  --ddg-accent-dark: #d93d3d;
  --ddg-blue: #2f6feb;
  --ddg-shadow: 0 18px 55px rgba(30, 40, 55, .13);
  --ddg-topbar-height: 64px;
  --ddg-rail-width: 72px;
  --ddg-properties-width: 280px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: Pretendard, "Noto Sans KR", Arial, sans-serif;
  background: var(--ddg-bg);
  color: var(--ddg-text);
}
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }

.ddg-editor { width: 100%; height: 100%; display: grid; grid-template-rows: var(--ddg-topbar-height) 1fr; }
.ddg-topbar {
  position: relative; z-index: 30; display: grid; grid-template-columns: minmax(230px,1fr) auto minmax(310px,1fr);
  align-items: center; gap: 16px; padding: 0 16px; background: var(--ddg-surface); border-bottom: 1px solid var(--ddg-line);
}
.ddg-topbar__left, .ddg-topbar__center, .ddg-topbar__right { display: flex; align-items: center; gap: 8px; }
.ddg-topbar__center { justify-content: center; }
.ddg-topbar__right { justify-content: flex-end; }
.ddg-product-heading { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ddg-product-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.ddg-product-heading span { color: var(--ddg-muted); font-size: 12px; }

.ddg-icon-button, .ddg-tool-button, .ddg-secondary-button, .ddg-primary-button, .ddg-fit-button, .ddg-zoom-button {
  border: 1px solid var(--ddg-line); background: var(--ddg-surface); color: var(--ddg-text); border-radius: 9px; min-height: 38px;
}
.ddg-icon-button { width: 38px; padding: 0; font-size: 20px; }
.ddg-tool-button, .ddg-secondary-button, .ddg-fit-button { padding: 0 13px; }
.ddg-primary-button { padding: 0 18px; border-color: var(--ddg-accent); color: #fff; background: var(--ddg-accent); font-weight: 700; }
.ddg-primary-button:not(:disabled):hover { background: var(--ddg-accent-dark); }
.ddg-secondary-button:not(:disabled):hover, .ddg-tool-button:not(:disabled):hover, .ddg-icon-button:not(:disabled):hover, .ddg-fit-button:hover { border-color: var(--ddg-line-strong); background: var(--ddg-surface-soft); }

.ddg-editor-body { min-height: 0; display: grid; grid-template-columns: var(--ddg-rail-width) minmax(0,1fr) var(--ddg-properties-width); transition: grid-template-columns .2s ease; }
.ddg-left-rail { display: flex; flex-direction: column; align-items: stretch; padding: 10px 7px; border-right: 1px solid var(--ddg-line); background: var(--ddg-surface); z-index: 20; }
.ddg-left-rail__spacer { flex: 1; }
.ddg-rail-button { min-height: 62px; border: 0; border-radius: 10px; background: transparent; color: var(--ddg-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 11px; }
.ddg-rail-button:not(:disabled):hover, .ddg-rail-button.is-active { color: var(--ddg-accent); background: #fff0f0; }
.ddg-rail-button__icon { font-size: 21px; font-weight: 700; line-height: 1; }

.ddg-workspace-shell { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(circle at center, #f9fafb 0, #eceff3 76%); }
.ddg-program-contact { position: absolute; z-index: 13; right: 18px; bottom: 15px; font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; font-weight: 400; letter-spacing: -.15px; color: rgba(91,98,110,.58); pointer-events: none; user-select: none; white-space: nowrap; }
.ddg-viewport { position: absolute; inset: 22px 22px 130px; overflow: auto; display: flex; align-items: center; justify-content: center; scrollbar-color: #c3c9d1 transparent; }
.ddg-canvas { position: relative; width: 1000px; height: 750px; flex: 0 0 auto; transform-origin: center center; background: #fff; border: 1px solid rgba(85,95,110,.18); border-radius: 6px; box-shadow: var(--ddg-shadow); overflow: hidden; }
.ddg-layer { position: absolute; inset: 0; pointer-events: none; }
.ddg-layer--grid { background-image: linear-gradient(rgba(70,80,95,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(70,80,95,.035) 1px, transparent 1px); background-size: 20px 20px; }
.ddg-background-object { position: absolute; display: block; user-select: none; -webkit-user-drag: none; object-fit: contain; }
.ddg-print-area { position: absolute; border: 2px dashed var(--ddg-accent); background: rgba(239,75,75,.055); border-radius: 3px; }
.ddg-print-area__label { position: absolute; left: 0; top: -29px; max-width: 180px; padding: 5px 9px; border-radius: 7px; background: var(--ddg-accent); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: 0 5px 12px rgba(190,40,40,.22); }
.ddg-print-area.is-inactive { opacity: .28; }
.ddg-print-area.is-current:not(.is-inactive) { box-shadow: 0 0 0 3px rgba(239,75,75,.08); }
.ddg-object-area.is-current { z-index: 2; }

.ddg-loading, .ddg-empty-state { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--ddg-muted); }
.ddg-loading strong, .ddg-empty-state strong { color: var(--ddg-text); font-size: 16px; }
.ddg-loading span, .ddg-empty-state span { font-size: 13px; }
.ddg-spinner { width: 34px; height: 34px; border: 3px solid #d9dee5; border-top-color: var(--ddg-accent); border-radius: 50%; animation: ddg-spin .8s linear infinite; margin-bottom: 5px; }
@keyframes ddg-spin { to { transform: rotate(360deg); } }
.ddg-empty-state__icon { font-size: 42px; color: #b0b7c1; }

.ddg-face-tabs { position: absolute; left: 50%; top: 12px; z-index: 15; transform: translateX(-50%); display: flex; gap: 5px; padding: 5px; border: 1px solid var(--ddg-line); border-radius: 11px; background: rgba(255,255,255,.94); box-shadow: 0 8px 26px rgba(50,60,75,.1); }
.ddg-face-tab { min-height: 32px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: var(--ddg-muted); font-size: 12px; }
.ddg-face-tab.is-active { color: #fff; background: var(--ddg-accent); font-weight: 700; }

.ddg-zoom-bar { position: absolute; z-index: 14; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); min-width: 0; min-height: 48px; display: grid; grid-template-columns: 34px minmax(110px,220px) 34px 52px auto auto auto; align-items: center; gap: 7px; padding: 5px 7px; border: 1px solid var(--ddg-line); border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 10px 30px rgba(40,50,65,.12); }
.ddg-zoom-button { min-height: 36px; height: 36px; width: 34px; font-size: 20px; line-height: 1; }
.ddg-zoom-bar input[type="range"] { width: 100%; min-width: 0; accent-color: var(--ddg-accent); }
.ddg-zoom-bar output { color: var(--ddg-muted); text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.ddg-fit-button, .ddg-bottom-tool { min-height: 36px; height: 36px; padding: 0 11px; border-radius: 9px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ddg-bottom-tool { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--ddg-line); background: #fff; color: var(--ddg-text); }
.ddg-bottom-tool--assistant:hover { border-color: var(--ddg-line-strong); background: var(--ddg-surface-soft); }
.ddg-bottom-tool--3d { border-color: #244f9e; background: #2f6feb; color: #fff; box-shadow: 0 5px 14px rgba(47,111,235,.2); }
.ddg-bottom-tool--3d:hover { background: #255fcf; border-color: #1f52b5; }

.ddg-properties { min-width: 0; border-left: 1px solid var(--ddg-line); background: var(--ddg-surface); overflow: auto; transition: transform .2s ease, opacity .2s ease; }
.ddg-properties__header { display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 72px; padding: 14px 14px 12px 18px; border-bottom: 1px solid var(--ddg-line); }
.ddg-properties__header div { display: flex; flex-direction: column; gap: 3px; }
.ddg-properties__header strong { font-size: 15px; }
.ddg-properties__header span { color: var(--ddg-muted); font-size: 11px; }
.ddg-properties__content { padding: 17px; }
.ddg-info-list { margin: 0; display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--ddg-line); border-radius: 10px; background: var(--ddg-line); }
.ddg-info-list div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 11px 12px; background: var(--ddg-surface); font-size: 12px; }
.ddg-info-list dt { color: var(--ddg-muted); }
.ddg-info-list dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-weight: 700; }
.ddg-notice-card { margin-top: 14px; padding: 14px; border-radius: 10px; background: #fff5f5; color: #a83e3e; }
.ddg-notice-card strong { font-size: 12px; }
.ddg-notice-card p { margin: 7px 0 0; font-size: 11px; line-height: 1.65; }

.ddg-editor[data-properties-open="false"] .ddg-editor-body { grid-template-columns: var(--ddg-rail-width) minmax(0,1fr) 0; }
.ddg-editor[data-properties-open="false"] .ddg-properties { opacity: 0; transform: translateX(100%); overflow: hidden; border-left: 0; }
.ddg-editor[data-focus-mode="true"] { --ddg-topbar-height: 48px; }
.ddg-editor[data-focus-mode="true"] .ddg-editor-body { grid-template-columns: 0 minmax(0,1fr) 0; }
.ddg-editor[data-focus-mode="true"] .ddg-left-rail, .ddg-editor[data-focus-mode="true"] .ddg-properties { opacity: 0; overflow: hidden; pointer-events: none; }
.ddg-editor[data-focus-mode="true"] .ddg-topbar__center { display: none; }
.ddg-editor[data-focus-mode="true"] .ddg-topbar { grid-template-columns: minmax(200px,1fr) auto; }
.ddg-editor[data-focus-mode="true"] .ddg-topbar__right { grid-column: 2; }

.ddg-item-drawer { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(390px, 92vw); background: var(--ddg-surface); box-shadow: 18px 0 55px rgba(25,35,50,.24); transform: translateX(-105%); transition: transform .22s ease; }
.ddg-item-drawer.is-open { transform: translateX(0); }
.ddg-item-drawer__header { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 72px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--ddg-line); }
.ddg-item-drawer__header div { display: flex; flex-direction: column; gap: 4px; }
.ddg-item-drawer__header span { color: var(--ddg-muted); font-size: 11px; }
.ddg-drawer-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(25,30,40,.35); backdrop-filter: blur(2px); }
.ddg-item-drawer.is-required #ddgCloseDrawerButton { visibility: hidden; pointer-events: none; }
.ddg-simple-print-mode { padding: 16px 14px 14px; border-bottom: 1px solid var(--ddg-line); background: #fafbfc; }
.ddg-simple-print-mode > strong { display: block; font-size: 15px; color: var(--ddg-text); }
.ddg-simple-print-mode > p { margin: 7px 0 12px; color: var(--ddg-muted); font-size: 11px; line-height: 1.55; }
.ddg-simple-print-mode__buttons { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ddg-simple-print-mode__buttons button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 54px; padding: 10px 12px; border: 1px solid var(--ddg-line); border-radius: 11px; background: #fff; color: var(--ddg-text); text-align: left; }
.ddg-simple-print-mode__buttons button:hover, .ddg-simple-print-mode__buttons button.is-active { border-color: var(--ddg-accent); background: #fff7f7; box-shadow: 0 7px 18px rgba(220,55,55,.09); }
.ddg-simple-print-mode__buttons b { font-size: 13px; }
.ddg-simple-print-mode__buttons span { color: var(--ddg-muted); font-size: 11px; }
.ddg-item-drawer.has-simple-mode .ddg-item-list { height: calc(100% - 286px); }
.ddg-item-list { height: calc(100% - 72px); overflow: auto; padding: 12px; display: grid; align-content: start; gap: 9px; }
.ddg-item-card { width: 100%; display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--ddg-line); border-radius: 12px; background: #fff; text-align: left; }
.ddg-item-card:hover, .ddg-item-card.is-active { border-color: var(--ddg-accent); box-shadow: 0 7px 18px rgba(220,55,55,.1); }
.ddg-item-card__thumb { width: 72px; height: 60px; border-radius: 8px; background: #f0f2f5; object-fit: contain; }
.ddg-item-card__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ddg-item-card__body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ddg-item-card__body span { color: var(--ddg-muted); font-size: 11px; }
.ddg-item-list__empty { padding: 28px 12px; color: var(--ddg-muted); font-size: 12px; text-align: center; }

.ddg-toast { position: fixed; z-index: 100; left: 50%; bottom: 78px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 11px 16px; border-radius: 9px; background: #252a31; color: #fff; font-size: 12px; box-shadow: 0 10px 32px rgba(0,0,0,.25); transition: .2s ease; }
.ddg-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

[hidden] { display: none !important; }

@media (max-width: 1100px) {
  :root { --ddg-properties-width: 240px; }
  .ddg-topbar { grid-template-columns: minmax(180px,1fr) auto; }
  .ddg-topbar__center { display: none; }
  .ddg-topbar__right { grid-column: 2; }
  .ddg-tool-button span { display: none; }
}
@media (max-width: 1280px) {
  .ddg-zoom-bar { grid-template-columns: 34px minmax(100px,170px) 34px 48px auto auto auto; gap: 5px; }
  .ddg-fit-button, .ddg-bottom-tool { padding: 0 8px; font-size: 11px; }
}
@media (max-width: 760px) {
  :root { --ddg-topbar-height: 56px; --ddg-rail-width: 58px; }
  .ddg-topbar { padding: 0 8px; gap: 7px; }
  .ddg-product-heading span, .ddg-secondary-button:not(#ddgFocusButton) { display: none; }
  .ddg-primary-button { padding: 0 12px; }
  .ddg-editor-body { grid-template-columns: var(--ddg-rail-width) minmax(0,1fr) 0; }
  .ddg-properties { position: fixed; z-index: 45; top: var(--ddg-topbar-height); right: 0; bottom: 0; width: min(300px,85vw); box-shadow: -12px 0 35px rgba(30,40,55,.16); }
  .ddg-viewport { inset: 12px 10px 122px; }
  .ddg-zoom-bar { width: calc(100% - 18px); max-width: none; grid-template-columns: 34px minmax(80px,1fr) 34px 52px; grid-auto-rows: 36px; bottom: 10px; gap: 5px; }
  .ddg-fit-button { display: none; }
  .ddg-bottom-tool--assistant { grid-column: 1 / 3; }
  .ddg-bottom-tool--3d { grid-column: 3 / 5; }
}

/* STEP16-2 Photo Engine */
.ddg-layer--objects { pointer-events: auto; }
.ddg-object-area { position: absolute; overflow: hidden; pointer-events: auto; }
.ddg-photo-object {
  position: absolute; transform-origin: center center; border: 0;
  cursor: move; touch-action: none; user-select: none;
}
.ddg-photo-object img { width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; user-select: none; }
/* 선택선은 객체 크기에 영향을 주지 않도록 inset shadow로 표시합니다. */
.ddg-photo-object.is-selected {
  box-shadow: inset 0 0 0 2px var(--ddg-blue), 0 0 0 1px rgba(255,255,255,.9);
}
.ddg-object-handle {
  position: absolute; z-index: 3; width: 18px; height: 18px; padding: 0; border: 2px solid #fff;
  border-radius: 5px; background: var(--ddg-blue); box-shadow: 0 2px 7px rgba(25,45,80,.28); touch-action: none;
}
.ddg-object-handle--resize { right: -10px; bottom: -10px; cursor: nwse-resize; }
.ddg-object-handle--text-width { right: -10px; top: 50%; width: 16px; height: 26px; transform: translateY(-50%); border-radius: 8px; cursor: ew-resize; }
.ddg-object-handle--text-width::after { content: '↔'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 900; }
.ddg-object-handle--rotate { left: 50%; top: -34px; transform: translateX(-50%); border-radius: 50%; cursor: grab; }
.ddg-object-handle--rotate::after { content: '↻'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; }
.ddg-object-handle--rotate::before { content: ''; position: absolute; left: 50%; top: 16px; width: 2px; height: 17px; background: var(--ddg-blue); transform: translateX(-50%); }

.ddg-side-panel {
  position: fixed; z-index: 42; left: var(--ddg-rail-width); top: var(--ddg-topbar-height); bottom: 0;
  width: 310px; background: #fff; border-right: 1px solid var(--ddg-line); box-shadow: 12px 0 35px rgba(35,45,60,.12);
  transform: translateX(-105%); opacity: 0; pointer-events: none; transition: transform .2s ease, opacity .2s ease;
}
.ddg-side-panel.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.ddg-side-panel__header { min-height: 72px; padding: 14px 12px 12px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ddg-line); }
.ddg-side-panel__header div { display: flex; flex-direction: column; gap: 4px; }
.ddg-side-panel__header span { color: var(--ddg-muted); font-size: 11px; }
.ddg-side-panel__content { height: calc(100% - 72px); overflow: auto; padding: 16px; }
.ddg-upload-box { min-height: 160px; border: 2px dashed #d3d8df; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: #fafbfc; cursor: pointer; text-align: center; }
.ddg-upload-box:hover, .ddg-upload-box.is-dragover { border-color: var(--ddg-accent); background: #fff5f5; }
.ddg-upload-box__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--ddg-accent); color: #fff; font-size: 26px; line-height: 1; }
.ddg-upload-box strong { font-size: 14px; }
.ddg-upload-box span:last-child { color: var(--ddg-muted); font-size: 11px; }
.ddg-photo-library { margin-top: 14px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.ddg-photo-thumb { min-width: 0; padding: 5px; border: 1px solid var(--ddg-line); border-radius: 9px; background: #fff; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.ddg-photo-thumb:hover { border-color: var(--ddg-accent); }
.ddg-photo-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: #f2f3f5; }
.ddg-photo-thumb span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ddg-muted); font-size: 10px; }

.ddg-property-section { padding: 0 0 17px; margin-bottom: 17px; border-bottom: 1px solid var(--ddg-line); }
.ddg-property-section > strong { display: block; margin-bottom: 11px; font-size: 13px; }
.ddg-property-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ddg-property-grid label { min-width: 0; display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 4px; padding: 5px 7px; border: 1px solid var(--ddg-line); border-radius: 8px; color: var(--ddg-muted); font-size: 11px; }
.ddg-property-grid input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--ddg-text); background: transparent; text-align: right; }
.ddg-check-row { margin-top: 10px; display: flex; align-items: center; gap: 7px; color: var(--ddg-text); font-size: 12px; }
.ddg-check-row input { accent-color: var(--ddg-accent); }
.ddg-range-row { display: grid; grid-template-columns: 1fr 48px; align-items: center; gap: 8px; }
.ddg-range-row input { width: 100%; accent-color: var(--ddg-accent); }
.ddg-range-row output { height: 34px; display: grid; place-items: center; border: 1px solid var(--ddg-line); border-radius: 8px; color: var(--ddg-muted); font-size: 11px; }
.ddg-property-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ddg-danger-button { min-height: 38px; border: 1px solid #ffcaca; border-radius: 9px; background: #fff4f4; color: #d63d3d; font-weight: 700; }
.ddg-danger-button:hover { background: #ffe8e8; }

.ddg-editor[data-focus-mode="true"] .ddg-side-panel { left: 0; top: var(--ddg-topbar-height); }
@media (max-width: 760px) {
  .ddg-side-panel { left: var(--ddg-rail-width); width: min(300px, calc(100vw - var(--ddg-rail-width))); }
}


/* STEP16-2 Photo Engine stabilization */
.ddg-photo-object.is-locked { cursor: default; }
.ddg-photo-object.is-locked.is-selected { border-style: dashed; }
.ddg-photo-object.is-locked::after {
  content: '잠금'; position: absolute; right: 4px; top: 4px; padding: 3px 5px; border-radius: 5px;
  background: rgba(32,36,42,.82); color: #fff; font-size: 9px; font-weight: 700; pointer-events: none;
}
.ddg-photo-thumb.is-selected { border-color: var(--ddg-blue); box-shadow: 0 0 0 1px rgba(47,111,235,.12); }
.ddg-photo-thumb.is-hidden img { opacity: .35; }
.ddg-photo-thumb small { min-height: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #9a6262; font-size: 9px; }
.ddg-photo-library__empty { grid-column: 1 / -1; padding: 20px 8px; color: var(--ddg-muted); font-size: 11px; text-align: center; }
.ddg-property-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 11px; }
.ddg-property-heading-row strong { font-size: 13px; }
.ddg-property-heading-row span { color: var(--ddg-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.ddg-layer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ddg-layer-actions .ddg-secondary-button { min-height: 34px; padding: 0 7px; font-size: 11px; }
.ddg-state-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ddg-toggle-button { min-height: 36px; border: 1px solid var(--ddg-line); border-radius: 9px; background: #fff; color: var(--ddg-text); font-weight: 700; font-size: 11px; }
.ddg-toggle-button:hover { background: var(--ddg-surface-soft); }
.ddg-toggle-button.is-active { border-color: #f1b7b7; background: #fff1f1; color: #bd4444; }
.ddg-property-grid input:disabled, .ddg-range-row input:disabled { opacity: .55; cursor: not-allowed; }

/* STEP16-3 Text Engine */
.ddg-text-object {
  position: absolute; transform-origin: center center; border: 1px solid transparent;
  cursor: move; touch-action: none; user-select: none;
}
.ddg-text-object__content {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  white-space: pre-wrap; word-break: keep-all; overflow-wrap: normal; line-height: 1.18;
  pointer-events: none; user-select: none; padding: 2px;
}
.ddg-text-object.is-selected { border: 2px solid var(--ddg-blue); box-shadow: 0 0 0 1px rgba(255,255,255,.92); }
.ddg-text-object.is-locked { cursor: default; }
.ddg-text-object.is-locked.is-selected { border-style: dashed; }
.ddg-text-object.is-locked::after {
  content: '잠금'; position: absolute; right: 4px; top: 4px; padding: 3px 5px; border-radius: 5px;
  background: rgba(32,36,42,.82); color: #fff; font-size: 9px; font-weight: 700; pointer-events: none;
}
.ddg-new-text-card { padding: 13px; border: 1px solid var(--ddg-line); border-radius: 12px; background: var(--ddg-surface-soft); }
.ddg-new-text-card label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; }
.ddg-new-text-card textarea, .ddg-textarea {
  width: 100%; resize: vertical; min-height: 76px; padding: 10px 11px; border: 1px solid var(--ddg-line);
  border-radius: 9px; background: #fff; color: var(--ddg-text); outline: none; line-height: 1.45;
}
.ddg-new-text-card textarea:focus, .ddg-textarea:focus { border-color: var(--ddg-blue); box-shadow: 0 0 0 3px rgba(47,111,235,.1); }
.ddg-new-text-card .ddg-primary-button { width: 100%; margin-top: 9px; }
.ddg-text-library { margin-top: 14px; display: grid; gap: 8px; }
.ddg-text-library-item {
  width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid var(--ddg-line); border-radius: 10px;
  background: #fff; display: flex; flex-direction: column; align-items: stretch; gap: 5px; text-align: left;
}
.ddg-text-library-item:hover, .ddg-text-library-item.is-selected { border-color: var(--ddg-blue); }
.ddg-text-library-item.is-hidden { opacity: .55; }
.ddg-text-library-item strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.ddg-text-library-item small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ddg-muted); font-size: 9px; }
.ddg-select { width: 100%; min-height: 38px; padding: 0 9px; border: 1px solid var(--ddg-line); border-radius: 8px; background: #fff; color: var(--ddg-text); }
.ddg-select--compact { min-width: 82px; width: auto; flex: 1; }
.ddg-inline-actions { display: flex; gap: 7px; margin-top: 9px; }
.ddg-inline-actions > * { flex: 1; }
.ddg-color-control { display: grid; grid-template-columns: 42px 1fr; gap: 8px; align-items: center; }
.ddg-color-control input[type="color"] { width: 42px; height: 38px; padding: 3px; border: 1px solid var(--ddg-line); border-radius: 8px; background: #fff; }
.ddg-color-control input[type="text"] { width: 100%; min-height: 38px; padding: 0 10px; border: 1px solid var(--ddg-line); border-radius: 8px; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.ddg-help-text { display: block; margin-top: 7px; color: var(--ddg-muted); font-size: 10px; line-height: 1.45; }
.ddg-mini-button { min-height: 28px; padding: 0 9px; border: 1px solid var(--ddg-line); border-radius: 7px; background: #fff; color: var(--ddg-muted); font-size: 10px; }
.ddg-text-presets { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ddg-text-presets button { min-height: 32px; padding: 0 7px; border: 1px solid var(--ddg-line); border-radius: 8px; background: #fff; font-size: 10px; }
.ddg-text-presets button:hover { border-color: var(--ddg-blue); background: #f4f8ff; }


/* STEP16-4 Object Manager */
.ddg-object-manager-panel { width: 340px; }
.ddg-object-manager { display: flex; flex-direction: column; gap: 11px; }
.ddg-object-manager__summary { padding: 10px 12px; border-radius: 9px; background: #f3f6fa; color: #4d5968; font-size: 11px; font-weight: 800; }
.ddg-object-search { display: grid; gap: 6px; color: var(--ddg-muted); font-size: 10px; font-weight: 700; }
.ddg-object-search input { min-height: 38px; width: 100%; padding: 0 11px; border: 1px solid var(--ddg-line); border-radius: 9px; outline: none; }
.ddg-object-search input:focus { border-color: var(--ddg-blue); box-shadow: 0 0 0 3px rgba(47,111,235,.1); }
.ddg-object-filters { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.ddg-object-filters button { min-height: 33px; border: 1px solid var(--ddg-line); border-radius: 8px; background: #fff; color: var(--ddg-muted); font-size: 11px; font-weight: 700; }
.ddg-object-filters button.is-active { border-color: var(--ddg-blue); background: #eff5ff; color: var(--ddg-blue); }
.ddg-object-manager__hint { margin: 0; color: var(--ddg-muted); font-size: 10px; line-height: 1.45; }
.ddg-object-list { display: grid; gap: 7px; min-height: 80px; }
.ddg-object-list__empty { padding: 28px 10px; border: 1px dashed var(--ddg-line); border-radius: 10px; color: var(--ddg-muted); text-align: center; font-size: 11px; }
.ddg-object-row { min-width: 0; display: grid; grid-template-columns: 19px 42px minmax(0,1fr) 31px 31px; align-items: center; gap: 6px; padding: 7px; border: 1px solid var(--ddg-line); border-radius: 10px; background: #fff; transition: border-color .15s, background .15s, opacity .15s; }
.ddg-object-row:hover { border-color: #aebcd0; }
.ddg-object-row.is-selected { border-color: var(--ddg-blue); background: #f4f8ff; box-shadow: 0 0 0 1px rgba(47,111,235,.08); }
.ddg-object-row.is-hidden .ddg-object-row__preview, .ddg-object-row.is-hidden .ddg-object-row__main { opacity: .42; }
.ddg-object-row.is-dragging { opacity: .35; }
.ddg-object-row.is-drop-target { border-color: var(--ddg-accent); box-shadow: 0 -3px 0 var(--ddg-accent); }
.ddg-object-row__drag { color: #a2aab4; cursor: grab; font-size: 13px; letter-spacing: -4px; user-select: none; }
.ddg-object-row__preview { width: 42px; height: 42px; overflow: hidden; display: grid; place-items: center; border-radius: 7px; background: #f1f3f6; }
.ddg-object-row__preview img { width: 100%; height: 100%; object-fit: cover; }
.ddg-object-row__text-icon { color: var(--ddg-blue); font-size: 20px; font-weight: 900; }
.ddg-object-row__main { min-width: 0; padding: 0; border: 0; background: transparent; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.ddg-object-row__main strong, .ddg-object-row__main small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ddg-object-row__main strong { font-size: 11px; }
.ddg-object-row__main small { color: var(--ddg-muted); font-size: 9px; }
.ddg-object-row__icon { width: 31px; height: 31px; padding: 0; border: 1px solid var(--ddg-line); border-radius: 7px; background: #fff; color: #65707d; font-size: 11px; }
.ddg-object-row__icon:hover { border-color: var(--ddg-blue); }
.ddg-object-row__icon.is-active { border-color: #efb1b1; background: #fff2f2; color: #c54343; }


/* STEP16-4.2: 단면인쇄는 면 전환 버튼 대신 현재 편집면 안내만 표시 */
.ddg-face-tab--status {
  cursor: default;
  pointer-events: none;
  user-select: none;
}


/* STEP16-4.3: 단면 편집면 최초 선택 및 변경 */
.ddg-face-tab--change { background:#fff; color:var(--ddg-muted); }
.ddg-face-tab--change:hover { border-color:var(--ddg-blue); color:var(--ddg-blue); }
body.ddg-modal-open { overflow:hidden; }
.ddg-modal { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px; }
.ddg-modal[hidden] { display:none; }
.ddg-modal__backdrop { position:absolute; inset:0; background:rgba(24,30,38,.48); backdrop-filter:blur(2px); }
.ddg-modal__dialog { position:relative; width:min(460px,100%); overflow:hidden; border:1px solid var(--ddg-line); border-radius:16px; background:#fff; box-shadow:0 24px 70px rgba(20,30,45,.25); }
.ddg-modal__header { padding:20px 22px 15px; border-bottom:1px solid var(--ddg-line); }
.ddg-modal__header strong { display:block; font-size:17px; }
.ddg-modal__header span { display:block; margin-top:5px; color:var(--ddg-muted); font-size:11px; }
.ddg-modal__body { padding:18px 22px; display:grid; gap:16px; }
.ddg-side-choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ddg-side-choice label { cursor:pointer; }
.ddg-side-choice input { position:absolute; opacity:0; pointer-events:none; }
.ddg-side-choice span { min-height:86px; padding:15px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:2px solid var(--ddg-line); border-radius:12px; background:#fff; text-align:center; }
.ddg-side-choice input:checked + span { border-color:var(--ddg-accent); background:#fff4f4; box-shadow:0 0 0 3px rgba(239,77,77,.1); }
.ddg-side-choice strong { font-size:14px; }
.ddg-side-choice small { color:var(--ddg-muted); font-size:10px; }
.ddg-side-behavior { padding:13px; border-radius:11px; background:var(--ddg-surface-soft); display:grid; gap:9px; }
.ddg-side-behavior[hidden] { display:none; }
.ddg-side-behavior > strong { font-size:11px; }
.ddg-side-behavior label { display:flex; gap:8px; align-items:center; font-size:11px; }
.ddg-modal__footer { padding:14px 22px 20px; display:flex; justify-content:flex-end; gap:8px; }
@media (max-width:560px) { .ddg-side-choice { grid-template-columns:1fr; } }


/* 단면 인쇄 활성/비활성 영역 안내 */
.ddg-print-area.is-current:not(.is-inactive) {
  box-shadow: 0 0 0 3px rgba(239,75,75,.10), 0 0 20px rgba(239,75,75,.17);
}
.ddg-print-area__inactive-note {
  position:absolute;
  left:50%;
  z-index:3;
  transform:translateX(-50%);
  pointer-events:none;
  white-space:nowrap;
  text-align:center;
}
.ddg-print-area__inactive-note {
  top:50%;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:9px 13px;
  border:1px solid rgba(120,128,140,.22);
  border-radius:10px;
  background:rgba(255,255,255,.82);
  color:#737b86;
  box-shadow:0 7px 18px rgba(40,50,65,.08);
  transform:translate(-50%,-50%);
}
.ddg-print-area__inactive-note strong { font-size:11px; }
.ddg-print-area__inactive-note small { font-size:9px; }
.ddg-side-choice span { min-height:100px; }
.ddg-side-choice small { max-width:150px; line-height:1.45; }

/* STEP16-3 font library expansion */
.ddg-property-count{
  margin-left:6px;
  color:#8a8f98;
  font-size:11px;
  font-weight:600;
}
#ddgTextFontFamily{
  min-height:40px;
}

/* STEP16-4-1 DDG Smart Crop */
.ddg-crop-overlay{position:fixed;inset:0;z-index:2500;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(20,27,38,.68);backdrop-filter:blur(5px)}
.ddg-crop-overlay[hidden]{display:none}
.ddg-crop-dialog{width:min(1160px,96vw);max-height:94vh;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 28px 80px rgba(0,0,0,.32);display:flex;flex-direction:column}
.ddg-crop-header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid #e7eaf0}
.ddg-crop-header div{display:flex;flex-direction:column;gap:4px}.ddg-crop-header strong{font-size:20px}.ddg-crop-header span{font-size:13px;color:#717887}
.ddg-crop-close{width:38px;height:38px;border:0;border-radius:10px;background:#f0f2f5;font-size:25px;cursor:pointer}
.ddg-crop-body{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:0;overflow:auto}
.ddg-crop-stage-wrap{min-height:520px;padding:28px;background:#202733;display:flex;align-items:center;justify-content:center}
.ddg-crop-stage{position:relative;display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%}
.ddg-crop-stage canvas{display:block;max-width:100%;max-height:62vh;background:#eef1f5;box-shadow:0 12px 38px rgba(0,0,0,.3);cursor:grab;touch-action:none}
.ddg-crop-stage canvas.is-dragging{cursor:grabbing}
.ddg-crop-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:7px 12px;border-radius:999px;background:rgba(18,24,33,.72);color:#fff;font-size:12px;white-space:nowrap;pointer-events:none}
.ddg-crop-controls{padding:22px;overflow:auto;background:#fafbfc;border-left:1px solid #e5e8ed}
.ddg-crop-section{display:flex;flex-direction:column;gap:12px;padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid #e5e8ed}.ddg-crop-section:last-of-type{margin-bottom:14px}
.ddg-crop-ratios{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ddg-crop-ratios button,.ddg-crop-action-row button{min-height:38px;border:1px solid #d7dce4;border-radius:9px;background:#fff;cursor:pointer;font-weight:700;color:#434a57}.ddg-crop-ratios button.is-active{border-color:#e54848;background:#fff1f1;color:#c52d2d;box-shadow:0 0 0 2px rgba(229,72,72,.12)}
.ddg-crop-label-row{display:flex;justify-content:space-between;align-items:center}.ddg-crop-label-row output{font-weight:800;color:#d43b3b}
.ddg-crop-controls input[type=range]{width:100%}.ddg-crop-action-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}.ddg-crop-note{padding:12px;border-radius:10px;background:#f0f4f8;color:#66707f;font-size:12px;line-height:1.55}
.ddg-crop-footer{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-top:1px solid #e7eaf0;background:#fff}.ddg-crop-footer>div{display:flex;gap:9px}
.ddg-photo-recrop-button{width:100%;margin-bottom:8px}
@media(max-width:860px){.ddg-crop-dialog{width:98vw}.ddg-crop-body{grid-template-columns:1fr}.ddg-crop-stage-wrap{min-height:360px;padding:16px}.ddg-crop-controls{border-left:0;border-top:1px solid #e5e8ed}.ddg-crop-footer{gap:10px;flex-wrap:wrap}}

/* STEP17-5: 사진 맞춤 도우미 */
.ddg-photo-fit-actions { display: grid; gap: 7px; margin-top: 9px; }
.ddg-photo-fit-actions .ddg-secondary-button { width: 100%; min-height: 36px; justify-content: center; }

/* STEP17-6: DDG Smart Snap V1 */
.ddg-snap-guide {
  position: absolute;
  z-index: 90;
  pointer-events: none;
  background: #1e88ff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.72), 0 0 8px rgba(30,136,255,.38);
  opacity: .96;
}
.ddg-snap-guide--vertical {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-.5px);
}
.ddg-snap-guide--horizontal {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-.5px);
}

/* STEP17-7: DDG Smart Snap - 인쇄영역 가장자리 */
.ddg-snap-guide--vertical.ddg-snap-guide--left {
  left: 0;
  transform: none;
}
.ddg-snap-guide--vertical.ddg-snap-guide--center {
  left: 50%;
  transform: translateX(-.5px);
}
.ddg-snap-guide--vertical.ddg-snap-guide--right {
  left: auto;
  right: 0;
  transform: none;
}
.ddg-snap-guide--horizontal.ddg-snap-guide--top {
  top: 0;
  transform: none;
}
.ddg-snap-guide--horizontal.ddg-snap-guide--center {
  top: 50%;
  transform: translateY(-.5px);
}
.ddg-snap-guide--horizontal.ddg-snap-guide--bottom {
  top: auto;
  bottom: 0;
  transform: none;
}

/* STEP17-8: 다른 사진 객체 정렬 가이드 */
.ddg-snap-guide--object,
.ddg-snap-guide--object-center {
  background: #8b5cf6;
  box-shadow: 0 0 0 1px rgba(255,255,255,.78), 0 0 8px rgba(139,92,246,.42);
}
.ddg-snap-guide--vertical.ddg-snap-guide--object,
.ddg-snap-guide--vertical.ddg-snap-guide--object-center {
  transform: translateX(-.5px);
}
.ddg-snap-guide--horizontal.ddg-snap-guide--object,
.ddg-snap-guide--horizontal.ddg-snap-guide--object-center {
  transform: translateY(-.5px);
}


/* Customer Portal direct-entry return button */
.ddg-customer-return{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 13px;border:1px solid #dbe1e8;border-radius:10px;background:#fff;color:#394150;font:800 12px/1 Arial,"Noto Sans KR",sans-serif;cursor:pointer;white-space:nowrap}
.ddg-customer-return:hover{background:#f5f7fa;border-color:#cbd3dd}
.ddg-customer-return[hidden]{display:none!important}

/* STEP22 Session Engine */
.ddg-session-status{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 10px;border:1px solid #d8dee8;border-radius:999px;background:#fff;color:#526071;font-size:12px;font-weight:700;white-space:nowrap}
.ddg-session-status i{width:8px;height:8px;border-radius:50%;background:#21a366;box-shadow:0 0 0 3px rgba(33,163,102,.12)}
.ddg-session-status.is-saving i{background:#e9a000;box-shadow:0 0 0 3px rgba(233,160,0,.14);animation:ddgSessionPulse 1s infinite}
.ddg-session-status.is-local i{background:#4d7ee8;box-shadow:0 0 0 3px rgba(77,126,232,.14)}
.ddg-session-status.is-error{color:#c92727;border-color:#f1b8b8;background:#fff7f7}
.ddg-session-status.is-error i{background:#d93636;box-shadow:0 0 0 3px rgba(217,54,54,.13)}
@keyframes ddgSessionPulse{50%{opacity:.35}}
@media(max-width:900px){.ddg-session-status b{display:none}.ddg-session-status{padding:0 9px}}


/* STEP25 empty print-area V1-style quick photo button */
.ddg-empty-area-photo-button {
  position: absolute;
  left: 50%;
  top: 18%;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 82px;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 999px;
  background: rgba(230,230,230,.92);
  box-shadow: 0 5px 16px rgba(20,30,45,.08);
  color: #606975;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease;
  pointer-events: auto;
}
.ddg-empty-area-photo-button span { font-size: 15px; font-weight: 800; line-height: 1; }
.ddg-empty-area-photo-button strong { font-size: 12px; font-weight: 800; }
.ddg-empty-area-photo-button:hover {
  background: rgba(255,255,255,.98);
  color: var(--ddg-accent, #f44336);
  box-shadow: 0 7px 20px rgba(20,30,45,.13);
  transform: translate(-50%, -50%) scale(1.03);
}
.ddg-empty-area-photo-button:focus-visible {
  outline: 3px solid rgba(244,67,54,.24);
  outline-offset: 2px;
}
.ddg-object-area:not(.is-current) .ddg-empty-area-photo-button { opacity: .72; }

/* RC1 FINAL-01: 현재 상품/옵션을 유지하는 편집 초기화 */
.ddg-reset-button,
.ddg-reset-confirm-button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid #e2a34c;
  border-radius: 8px;
  background: #fff8ec;
  color: #9a5b08;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.ddg-reset-button:hover,
.ddg-reset-confirm-button:hover {
  border-color: #cc8120;
  background: #ffefd4;
  color: #7e4700;
}
.ddg-reset-button:disabled,
.ddg-reset-confirm-button:disabled {
  cursor: not-allowed;
  opacity: .55;
}
.ddg-reset-confirm-button {
  min-width: 82px;
  background: #e58a19;
  border-color: #e58a19;
  color: #fff;
}
.ddg-reset-confirm-button:hover {
  background: #cc7410;
  border-color: #cc7410;
  color: #fff;
}
.ddg-reset-modal__dialog { width: min(430px,100%); }
.ddg-reset-modal__message,
.ddg-reset-modal__notice { margin: 0; }
.ddg-reset-modal__message { color: #303743; font-size: 13px; line-height: 1.65; }
.ddg-reset-modal__notice { padding: 11px 12px; border-radius: 9px; background: #fff6e7; color: #9a5b08; font-size: 11px; line-height: 1.5; }
@media (max-width: 1100px) {
  .ddg-reset-button { padding: 0 10px; }
}
@media (max-width: 760px) {
  .ddg-reset-button { font-size: 0; width: 38px; padding: 0; }
  .ddg-reset-button::before { content: '↺'; font-size: 18px; }
}


/* CAFE24 STEP3: 주문상품/아이템 배경 잠금 */
body[data-cafe24-editor-locked="true"] #ddgBackButton,
body[data-cafe24-editor-locked="true"] #ddgItemPickerButton {
  display:none !important;
}
.ddg-cafe24-order-badge {
  display:inline-flex;
  align-items:center;
  min-height:22px;
  width:max-content;
  max-width:440px;
  margin-top:3px;
  padding:2px 9px;
  border:1px solid #fecaca;
  border-radius:999px;
  background:#fff1f2;
  color:#be123c;
  font-size:11px;
  font-weight:700;
  line-height:1.4;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* RC2-5C Project Mode */
.ddg-project-badge{display:flex;align-items:center;gap:7px;margin-top:4px;flex-wrap:wrap}
.ddg-project-badge strong,.ddg-project-badge span{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border-radius:999px;font-size:11px;line-height:1;font-weight:750}
.ddg-project-badge strong{background:#172033;color:#fff}
.ddg-project-badge span{background:#eef2f7;color:#536071}
body[data-project-mode="true"] #ddgBackButton,body[data-project-mode="true"] #ddgItemPickerButton{display:none!important}
body[data-project-mode="true"] .ddg-item-drawer,body[data-project-mode="true"] #ddgDrawerBackdrop{display:none!important}

/* RC4 topbar UI polish: action grouping and consistent controls */
.ddg-topbar {
  grid-template-columns: minmax(250px, 1fr) auto minmax(620px, 1.65fr);
  gap: 14px;
  padding: 0 14px;
}
.ddg-topbar__center,
.ddg-topbar__right {
  gap: 0;
}
.ddg-topbar__right {
  min-width: 0;
}
.ddg-action-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.ddg-topbar__right .ddg-action-group + .ddg-action-group {
  margin-left: 13px;
  padding-left: 14px;
}
.ddg-topbar__right .ddg-action-group + .ddg-action-group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--ddg-line);
}
.ddg-topbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.2px;
  white-space: nowrap;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .08s ease;
}
.ddg-topbar-button:not(:disabled):active {
  transform: translateY(1px);
}
.ddg-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  font-size: 17px;
  line-height: 1;
}
.ddg-action-group--file .ddg-topbar-button {
  background: #f8f6ff;
  border-color: #ded8f4;
}
.ddg-action-group--file .ddg-topbar-button:not(:disabled):hover {
  background: #f1edff;
  border-color: #c8bde9;
}
.ddg-action-group--view .ddg-topbar-button {
  background: #f7faff;
  border-color: #d7e1f1;
}
.ddg-action-group--view .ddg-topbar-button:not(:disabled):hover {
  background: #eef5ff;
  border-color: #bfd0e8;
}
.ddg-reset-button.ddg-topbar-button {
  min-width: 72px;
  border: 1px solid #efc4b9;
  background: #fffaf8;
  color: #b64b37;
  font-weight: 700;
}
.ddg-reset-button.ddg-topbar-button:not(:disabled):hover {
  border-color: #df9d8c;
  background: #fff2ed;
}
.ddg-primary-button.ddg-topbar-button {
  min-width: 92px;
  box-shadow: 0 5px 13px rgba(239,75,75,.18);
}
.ddg-primary-button.ddg-topbar-button:not(:disabled):hover {
  box-shadow: 0 7px 17px rgba(217,61,61,.24);
}

@media (max-width: 1500px) {
  .ddg-topbar { grid-template-columns: minmax(220px,1fr) auto minmax(570px,1.7fr); gap: 10px; padding: 0 10px; }
  .ddg-topbar-button { height: 40px; min-height: 40px; padding: 0 12px; font-size: 13px; }
  .ddg-action-group { gap: 5px; }
  .ddg-topbar__right .ddg-action-group + .ddg-action-group { margin-left: 9px; padding-left: 10px; }
}

@media (max-width: 1280px) {
  .ddg-topbar { grid-template-columns: minmax(200px,1fr) auto; }
  .ddg-topbar__center { display: none; }
  .ddg-topbar__right { grid-column: 2; }
  .ddg-topbar-button { padding: 0 10px; }
  .ddg-action-group--view #ddgAssistantButton .ddg-button-icon { display: none; }
}

@media (max-width: 980px) {
  .ddg-action-group--view { display: none; }
  .ddg-topbar__right .ddg-action-group--complete { margin-left: 9px; padding-left: 10px; }
}


/* RC4 Editor Status Center */
.ddg-status-center {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  width: min(980px, calc(100% - 48px));
  min-height: 42px;
  margin: 0;
  padding: 0 16px 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #e4e8ee;
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 3px 12px rgba(23,32,51,.055);
  color: #465163;
  font-size: 14px;
  line-height: 1.45;
}
.ddg-status-center__message {
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .15s ease;
}
.ddg-status-center__message.is-changing { opacity: .35; }
.ddg-status-center__message strong { color: #172033; font-weight: 750; }
.ddg-status-center__state {
  flex: 0 0 auto;
  min-width: 48px;
  padding-left: 14px;
  border-left: 1px solid #e7eaf0;
  color: #7a8494;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}
.ddg-status-center[data-tone="success"] { border-color: #cfe7d7; background: #fbfffc; }
.ddg-status-center[data-tone="warning"] { border-color: #ead9ad; background: #fffdf7; }
.ddg-status-center[data-tone="error"] { border-color: #ecc8c8; background: #fffafa; }
@media (max-width: 980px) {
  .ddg-status-center {
    bottom: 72px;
    width: calc(100% - 24px);
    padding: 0 12px;
    font-size: 13px;
  }
  .ddg-status-center__state { display: none; }
}