/* SNS image crop tool — Roberin fresh tool-only redesign 20260621 */
.sns-image-tool.sns-crop-studio {
  --sns-paper: #faf2e8;
  --sns-paper-2: #fff7e8;
  --sns-panel: #fffdf7;
  --sns-panel-soft: #faecd4;
  --sns-line: #6b5745;
  --sns-line-soft: #b79b79;
  --sns-ink: #2b2119;
  --sns-muted: #695a4c;
  --sns-cta: #f2e3d3;
  --sns-cta-strong: #e5c27a;
  --sns-green: #e3efd2;
  --sns-blue: #dfeef8;
  --sns-shadow: 4px 4px 0 rgba(107, 87, 69, 0.18);
  box-sizing: border-box !important;
  width: min(100%, 1180px) !important;
  margin: 20px auto !important;
  padding: 0 !important;
  border: 2px solid var(--sns-line) !important;
  border-radius: 0 !important;
  color: var(--sns-ink) !important;
  font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background:
    linear-gradient(rgba(107, 87, 69, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 87, 69, 0.045) 1px, transparent 1px),
    var(--sns-paper) !important;
  background-size: 18px 18px, 18px 18px, auto !important;
  box-shadow: var(--sns-shadow) !important;
  line-height: 1.45 !important;
  overflow: clip !important;
}

.sns-crop-studio *,
.sns-crop-studio *::before,
.sns-crop-studio *::after {
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

.sns-crop-title {
  display: grid !important;
  gap: 8px !important;
  padding: 18px 22px 16px !important;
  background: linear-gradient(135deg, #fff8ec 0%, #f7e3bf 58%, #fff3d7 100%) !important;
  color: var(--sns-ink) !important;
}

.sns-crop-kicker {
  width: fit-content !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(107, 87, 69, 0.38) !important;
  background: rgba(255, 253, 247, 0.72) !important;
  color: #5c4939 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 0.03em !important;
}

.sns-crop-title h2 {
  margin: 0 !important;
  color: var(--sns-ink) !important;
  font-size: clamp(24px, 3vw, 34px) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
}

.sns-crop-title p {
  margin: 0 !important;
  max-width: 760px !important;
  color: #4f4034 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.sns-crop-body {
  border-top: 2px solid var(--sns-line) !important;
  padding: 18px !important;
  display: grid !important;
  gap: 14px !important;
}

.sns-crop-upload-stage,
.sns-crop-editor-stage {
  min-width: 0 !important;
}

.sns-crop-upload-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.sns-crop-dropzone {
  position: relative !important;
  min-height: 190px !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  border: 2px dashed var(--sns-line) !important;
  background: var(--sns-panel) !important;
  color: var(--sns-ink) !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}

.sns-crop-dropzone:hover,
.sns-crop-dropzone.drag-over {
  background: #fff3d7 !important;
  box-shadow: inset 0 0 0 4px rgba(229, 194, 122, 0.22) !important;
}

.sns-crop-dropzone input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.sns-crop-upload-copy {
  position: relative !important;
  z-index: 6 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 10px !important;
  text-align: center !important;
}

.sns-crop-upload-copy strong {
  color: var(--sns-ink) !important;
  font-size: 20px !important;
  font-weight: 950 !important;
}

.sns-crop-upload-copy span {
  color: var(--sns-muted) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.sns-crop-upload-button,
.sns-crop-action-primary,
.sns-crop-action-secondary,
.sns-crop-tool-btn,
.sns-crop-tab,
.sns-crop-platform-btn,
.sns-crop-type-btn {
  min-height: 42px !important;
  border-radius: 0 !important;
  border: 2px solid var(--sns-line) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  cursor: pointer !important;
  text-align: center !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.sns-crop-upload-button,
.sns-crop-action-primary {
  padding: 0 16px !important;
  background: var(--sns-cta) !important;
  color: var(--sns-ink) !important;
}

.sns-crop-action-secondary,
.sns-crop-tool-btn,
.sns-crop-tab,
.sns-crop-platform-btn,
.sns-crop-type-btn {
  padding: 0 10px !important;
  background: var(--sns-panel) !important;
  color: var(--sns-ink) !important;
}

.sns-crop-upload-button:hover,
.sns-crop-action-primary:hover,
.sns-crop-action-secondary:hover,
.sns-crop-tool-btn:hover,
.sns-crop-tab:hover,
.sns-crop-platform-btn:hover,
.sns-crop-type-btn:hover {
  background: #fff0cb !important;
  color: var(--sns-ink) !important;
  transform: none !important;
}

.sns-crop-platform-btn.active,
.sns-crop-type-btn.active,
.sns-crop-tab.active {
  background: var(--sns-green) !important;
  color: var(--sns-ink) !important;
  outline: 2px solid rgba(43, 33, 25, 0.12) !important;
  outline-offset: -4px !important;
}

.sns-crop-helper {
  display: grid !important;
  gap: 10px !important;
  padding: 16px !important;
  border: 2px solid var(--sns-line) !important;
  background: var(--sns-panel) !important;
}

.sns-crop-helper h3,
.sns-crop-panel h3,
.sns-crop-panel h4,
.sns-crop-work-head h3 {
  margin: 0 !important;
  color: var(--sns-ink) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

.sns-crop-helper p,
.sns-crop-panel p,
.sns-crop-work-head p {
  margin: 0 !important;
  color: var(--sns-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.sns-crop-helper-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  gap: 8px !important;
}

.sns-crop-helper-list li {
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  color: var(--sns-ink) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

.sns-crop-helper-list li::before {
  content: "" !important;
  width: 10px !important;
  height: 10px !important;
  border: 2px solid var(--sns-line) !important;
  background: var(--sns-cta-strong) !important;
}

.sns-crop-editor-stage {
  display: grid !important;
  gap: 14px !important;
}

.sns-crop-config-panel,
.sns-crop-panel {
  border: 2px solid var(--sns-line) !important;
  background: var(--sns-panel) !important;
  box-shadow: 2px 2px 0 rgba(107, 87, 69, 0.12) !important;
}

.sns-crop-config-panel {
  padding: 14px !important;
  display: grid !important;
  gap: 12px !important;
}

.sns-crop-config-head,
.sns-crop-work-head,
.sns-crop-panel-head {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.sns-crop-config-head span,
.sns-crop-panel-head span {
  display: inline-grid !important;
  min-height: 28px !important;
  place-items: center !important;
  padding: 0 8px !important;
  border: 1px solid var(--sns-line-soft) !important;
  background: var(--sns-panel-soft) !important;
  color: var(--sns-ink) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.sns-crop-platform-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.sns-crop-type-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.sns-crop-platform-btn,
.sns-crop-type-btn {
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.sns-crop-type-btn {
  font-size: 12px !important;
}

.sns-crop-spec-card {
  display: none;
  border: 2px solid var(--sns-line) !important;
  background: var(--sns-blue) !important;
  padding: 10px !important;
}

.sns-crop-spec-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.sns-crop-spec-item {
  min-height: 44px !important;
  display: grid !important;
  align-content: center !important;
  gap: 2px !important;
  border: 1px solid var(--sns-line-soft) !important;
  background: rgba(255, 253, 247, 0.72) !important;
  padding: 6px 8px !important;
  min-width: 0 !important;
}

.sns-crop-spec-item span:first-child {
  color: var(--sns-muted) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.sns-crop-spec-item span:last-child {
  color: var(--sns-ink) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  overflow-wrap: anywhere !important;
}

.sns-crop-workbench {
  display: grid !important;
  grid-template-columns: minmax(0, 1.28fr) minmax(330px, 0.72fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.sns-crop-canvas-panel,
.sns-crop-output-panel {
  min-width: 0 !important;
  display: grid !important;
  gap: 10px !important;
  padding: 14px !important;
}

.sns-crop-tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.sns-crop-tab {
  width: 100% !important;
}

.sns-crop-pane[hidden],
#editorContainer[style*="display: none"] {
  display: none !important;
}

#editorContainer[style*="display: block"] {
  display: grid !important;
}

.sns-crop-pane.active {
  display: block !important;
}

.sns-crop-editor-frame {
  display: grid !important;
  grid-template-rows: minmax(420px, 1fr) auto !important;
  gap: 10px !important;
  min-height: 478px !important;
}

.sns-crop-cropper-box {
  position: relative !important;
  min-height: 420px !important;
  overflow: hidden !important;
  border: 2px solid var(--sns-line) !important;
  background:
    linear-gradient(45deg, rgba(107, 87, 69, 0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(107, 87, 69, 0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(107, 87, 69, 0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(107, 87, 69, 0.08) 75%),
    #fffdf7 !important;
  background-size: 24px 24px !important;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0 !important;
}

.sns-crop-cropper-box img {
  display: block !important;
  max-width: 100% !important;
}

.sns-crop-editor-tools {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.sns-crop-tool-btn {
  min-height: 38px !important;
  padding-inline: 8px !important;
}

.sns-crop-preview-wrap {
  display: grid !important;
  gap: 10px !important;
}

.sns-crop-preview-box {
  min-height: 240px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid var(--sns-line) !important;
  background: #fff7e8 !important;
  overflow: hidden !important;
}

.sns-crop-preview-image {
  display: block !important;
  min-width: 80px !important;
  min-height: 80px !important;
  max-width: 100% !important;
  max-height: 300px !important;
  background-color: #fffdf7 !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  border: 1px solid var(--sns-line-soft) !important;
}

.sns-crop-metrics {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.sns-crop-metric {
  min-height: 50px !important;
  display: grid !important;
  align-content: center !important;
  gap: 2px !important;
  padding: 8px !important;
  border: 1px solid var(--sns-line-soft) !important;
  background: var(--sns-green) !important;
}

.sns-crop-metric span:first-child {
  color: #584839 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.sns-crop-metric span:last-child,
.sns-crop-metric strong {
  color: var(--sns-ink) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.sns-crop-option-stack {
  display: grid !important;
  gap: 8px !important;
}

.sns-crop-control-row,
.sns-crop-format-row,
.sns-crop-file-row,
.sns-crop-action-row {
  display: grid !important;
  gap: 8px !important;
  align-items: end !important;
}

.sns-crop-control-row {
  grid-template-columns: minmax(0, 1fr) 74px !important;
}

.sns-crop-format-row {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.sns-crop-file-row {
  grid-template-columns: minmax(0, 1fr) 62px !important;
}

.sns-crop-action-row {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.sns-crop-field-label {
  display: block !important;
  margin: 0 0 5px !important;
  color: var(--sns-ink) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

.sns-crop-control-row input[type="range"] {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid var(--sns-line) !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  outline: none !important;
}

.sns-crop-control-row input[type="range"]::-webkit-slider-runnable-track {
  height: 8px !important;
  border: 1px solid var(--sns-line-soft) !important;
  background: linear-gradient(90deg, var(--sns-cta-strong), var(--sns-panel-soft)) !important;
}

.sns-crop-control-row input[type="range"]::-moz-range-track {
  height: 8px !important;
  border: 1px solid var(--sns-line-soft) !important;
  background: linear-gradient(90deg, var(--sns-cta-strong), var(--sns-panel-soft)) !important;
}

.sns-crop-control-row input[type="range"]::-webkit-slider-thumb {
  width: 18px !important;
  height: 18px !important;
  margin-top: -6px !important;
  border-radius: 0 !important;
  border: 2px solid var(--sns-line) !important;
  background: var(--sns-paper-2) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.sns-crop-control-row input[type="range"]::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 0 !important;
  border: 2px solid var(--sns-line) !important;
  background: var(--sns-paper-2) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.sns-crop-value-badge,
.sns-crop-file-ext {
  min-height: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 8px !important;
  border: 2px solid var(--sns-line) !important;
  background: var(--sns-panel-soft) !important;
  color: var(--sns-ink) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.sns-crop-format-option {
  position: relative !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border: 2px solid var(--sns-line) !important;
  background: var(--sns-panel) !important;
  color: var(--sns-ink) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.sns-crop-format-option input {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

.sns-crop-format-option:has(input:checked) {
  background: var(--sns-green) !important;
  outline: 2px solid rgba(43, 33, 25, 0.12) !important;
  outline-offset: -4px !important;
}

.sns-crop-file-row input[type="text"] {
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 2px solid var(--sns-line) !important;
  background: var(--sns-panel) !important;
  color: var(--sns-ink) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 42px !important;
  box-shadow: none !important;
}

.sns-crop-file-row input[type="text"]::placeholder {
  color: #a89988 !important;
  font-weight: 700 !important;
}

.sns-crop-file-row input[type="text"]:focus,
.sns-crop-control-row input[type="range"]:focus,
.sns-crop-format-option:focus-within,
.sns-crop-upload-button:focus-visible,
.sns-crop-action-primary:focus-visible,
.sns-crop-action-secondary:focus-visible,
.sns-crop-tool-btn:focus-visible,
.sns-crop-tab:focus-visible,
.sns-crop-platform-btn:focus-visible,
.sns-crop-type-btn:focus-visible {
  outline: 3px solid #d2aa55 !important;
  outline-offset: 2px !important;
}

.sns-crop-action-row button {
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.sns-crop-note-strip {
  display: grid !important;
  gap: 6px !important;
  padding: 10px !important;
  border: 1px solid var(--sns-line-soft) !important;
  background: #fff3d7 !important;
  color: var(--sns-ink) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.sns-crop-note-strip p {
  margin: 0 !important;
}

.sns-crop-privacy {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: space-between !important;
  border: 2px solid var(--sns-line) !important;
  background: var(--sns-panel) !important;
  padding: 10px 12px !important;
  color: var(--sns-muted) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.sns-crop-privacy strong {
  color: var(--sns-ink) !important;
  font-weight: 950 !important;
}

.sns-crop-studio .cropper-view-box {
  outline: 2px solid #d2aa55 !important;
  outline-color: rgba(210, 170, 85, 0.88) !important;
}

.sns-crop-studio .cropper-line,
.sns-crop-studio .cropper-point {
  background-color: #d2aa55 !important;
}

.sns-crop-studio .cropper-point {
  width: 8px !important;
  height: 8px !important;
}

.sns-crop-studio .cropper-center {
  width: 0 !important;
  height: 0 !important;
}

.sns-crop-studio .cropper-face {
  background-color: rgba(210, 170, 85, 0.12) !important;
}

body[data-scheme="dark"] .sns-image-tool.sns-crop-studio,
body[data-scheme="inverse"] .sns-image-tool.sns-crop-studio {
  --sns-paper: #241d18;
  --sns-paper-2: #30251e;
  --sns-panel: #332820;
  --sns-panel-soft: #463322;
  --sns-line: #d8c1a0;
  --sns-line-soft: #927a5e;
  --sns-ink: #fff2dc;
  --sns-muted: #dcc8ac;
  --sns-cta: #ead2aa;
  --sns-cta-strong: #c99642;
  --sns-green: #31402a;
  --sns-blue: #283d47;
  --sns-shadow: 4px 4px 0 rgba(0, 0, 0, 0.38);
  color: var(--sns-ink) !important;
  background:
    linear-gradient(rgba(216, 193, 160, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 193, 160, 0.055) 1px, transparent 1px),
    var(--sns-paper) !important;
  background-size: 18px 18px, 18px 18px, auto !important;
}

body[data-scheme="dark"] .sns-crop-title,
body[data-scheme="inverse"] .sns-crop-title {
  background: linear-gradient(135deg, #3b2d22 0%, #5b4027 58%, #34281f 100%) !important;
}

body[data-scheme="dark"] .sns-crop-spec-card,
body[data-scheme="inverse"] .sns-crop-spec-card {
  background: var(--sns-blue) !important;
}

body[data-scheme="dark"] .sns-crop-spec-item,
body[data-scheme="inverse"] .sns-crop-spec-item {
  background: rgba(51, 40, 32, 0.94) !important;
  border-color: var(--sns-line-soft) !important;
}

body[data-scheme="dark"] .sns-crop-kicker,
body[data-scheme="inverse"] .sns-crop-kicker,
body[data-scheme="dark"] .sns-crop-config-head span,
body[data-scheme="inverse"] .sns-crop-config-head span,
body[data-scheme="dark"] .sns-crop-panel-head span,
body[data-scheme="inverse"] .sns-crop-panel-head span,
body[data-scheme="dark"] .sns-crop-value-badge,
body[data-scheme="inverse"] .sns-crop-value-badge,
body[data-scheme="dark"] .sns-crop-file-ext,
body[data-scheme="inverse"] .sns-crop-file-ext {
  background: var(--sns-panel-soft) !important;
  color: var(--sns-ink) !important;
  border-color: var(--sns-line) !important;
}

body[data-scheme="dark"] .sns-crop-title h2,
body[data-scheme="inverse"] .sns-crop-title h2,
body[data-scheme="dark"] .sns-crop-title p,
body[data-scheme="inverse"] .sns-crop-title p,
body[data-scheme="dark"] .sns-crop-kicker,
body[data-scheme="inverse"] .sns-crop-kicker,
body[data-scheme="dark"] .sns-crop-helper h3,
body[data-scheme="inverse"] .sns-crop-helper h3,
body[data-scheme="dark"] .sns-crop-panel h3,
body[data-scheme="inverse"] .sns-crop-panel h3,
body[data-scheme="dark"] .sns-crop-panel h4,
body[data-scheme="inverse"] .sns-crop-panel h4,
body[data-scheme="dark"] .sns-crop-work-head h3,
body[data-scheme="inverse"] .sns-crop-work-head h3,
body[data-scheme="dark"] .sns-crop-note-strip,
body[data-scheme="inverse"] .sns-crop-note-strip,
body[data-scheme="dark"] .sns-crop-privacy,
body[data-scheme="inverse"] .sns-crop-privacy,
body[data-scheme="dark"] .sns-crop-privacy strong,
body[data-scheme="inverse"] .sns-crop-privacy strong {
  color: var(--sns-ink) !important;
}

body[data-scheme="dark"] .sns-crop-helper p,
body[data-scheme="inverse"] .sns-crop-helper p,
body[data-scheme="dark"] .sns-crop-panel p,
body[data-scheme="inverse"] .sns-crop-panel p,
body[data-scheme="dark"] .sns-crop-work-head p,
body[data-scheme="inverse"] .sns-crop-work-head p,
body[data-scheme="dark"] .sns-crop-spec-item span:first-child,
body[data-scheme="inverse"] .sns-crop-spec-item span:first-child,
body[data-scheme="dark"] .sns-crop-metric span:first-child,
body[data-scheme="inverse"] .sns-crop-metric span:first-child {
  color: var(--sns-muted) !important;
}

body[data-scheme="dark"] .sns-crop-upload-button,
body[data-scheme="inverse"] .sns-crop-upload-button,
body[data-scheme="dark"] .sns-crop-action-primary,
body[data-scheme="inverse"] .sns-crop-action-primary {
  background: var(--sns-cta) !important;
  color: #21180f !important;
}

body[data-scheme="dark"] .sns-crop-action-secondary,
body[data-scheme="inverse"] .sns-crop-action-secondary,
body[data-scheme="dark"] .sns-crop-tool-btn,
body[data-scheme="inverse"] .sns-crop-tool-btn,
body[data-scheme="dark"] .sns-crop-tab,
body[data-scheme="inverse"] .sns-crop-tab,
body[data-scheme="dark"] .sns-crop-platform-btn,
body[data-scheme="inverse"] .sns-crop-platform-btn,
body[data-scheme="dark"] .sns-crop-type-btn,
body[data-scheme="inverse"] .sns-crop-type-btn,
body[data-scheme="dark"] .sns-crop-format-option,
body[data-scheme="inverse"] .sns-crop-format-option,
body[data-scheme="dark"] .sns-crop-file-row input[type="text"],
body[data-scheme="inverse"] .sns-crop-file-row input[type="text"] {
  background: var(--sns-panel) !important;
  color: var(--sns-ink) !important;
  border-color: var(--sns-line) !important;
}

body[data-scheme="dark"] .sns-crop-platform-btn.active,
body[data-scheme="inverse"] .sns-crop-platform-btn.active,
body[data-scheme="dark"] .sns-crop-type-btn.active,
body[data-scheme="inverse"] .sns-crop-type-btn.active,
body[data-scheme="dark"] .sns-crop-tab.active,
body[data-scheme="inverse"] .sns-crop-tab.active,
body[data-scheme="dark"] .sns-crop-format-option:has(input:checked),
body[data-scheme="inverse"] .sns-crop-format-option:has(input:checked) {
  background: var(--sns-green) !important;
  color: var(--sns-ink) !important;
}

body[data-scheme="dark"] .sns-crop-note-strip,
body[data-scheme="inverse"] .sns-crop-note-strip,
body[data-scheme="dark"] .sns-crop-preview-box,
body[data-scheme="inverse"] .sns-crop-preview-box,
body[data-scheme="dark"] .sns-crop-preview-image,
body[data-scheme="inverse"] .sns-crop-preview-image,
body[data-scheme="dark"] .sns-crop-cropper-box,
body[data-scheme="inverse"] .sns-crop-cropper-box {
  background-color: var(--sns-panel) !important;
}

body[data-scheme="dark"] .sns-crop-file-row input[type="text"]::placeholder,
body[data-scheme="inverse"] .sns-crop-file-row input[type="text"]::placeholder {
  color: #bda98d !important;
}

body[data-scheme="dark"] .sns-crop-dropzone:hover,
body[data-scheme="inverse"] .sns-crop-dropzone:hover,
body[data-scheme="dark"] .sns-crop-dropzone.drag-over,
body[data-scheme="inverse"] .sns-crop-dropzone.drag-over {
  background: #3c2d23 !important;
  color: var(--sns-ink) !important;
  box-shadow: inset 0 0 0 4px rgba(201, 150, 66, 0.22) !important;
}

body[data-scheme="dark"] .sns-crop-action-secondary:hover,
body[data-scheme="inverse"] .sns-crop-action-secondary:hover,
body[data-scheme="dark"] .sns-crop-tool-btn:hover,
body[data-scheme="inverse"] .sns-crop-tool-btn:hover,
body[data-scheme="dark"] .sns-crop-platform-btn:hover,
body[data-scheme="inverse"] .sns-crop-platform-btn:hover,
body[data-scheme="dark"] .sns-crop-type-btn:hover,
body[data-scheme="inverse"] .sns-crop-type-btn:hover,
body[data-scheme="dark"] .sns-crop-format-option:hover,
body[data-scheme="inverse"] .sns-crop-format-option:hover {
  background: #463322 !important;
  color: var(--sns-ink) !important;
  border-color: var(--sns-line) !important;
}

body[data-scheme="dark"] .sns-crop-upload-button:hover,
body[data-scheme="inverse"] .sns-crop-upload-button:hover,
body[data-scheme="dark"] .sns-crop-action-primary:hover,
body[data-scheme="inverse"] .sns-crop-action-primary:hover {
  background: #efd7ad !important;
  color: #21180f !important;
}

@media (max-width: 980px) {
  .sns-crop-upload-grid,
  .sns-crop-workbench {
    grid-template-columns: 1fr !important;
  }

  .sns-crop-platform-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .sns-crop-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .sns-crop-editor-frame {
    grid-template-rows: minmax(360px, 1fr) auto !important;
  }

  .sns-crop-cropper-box {
    min-height: 360px !important;
  }
}

@media (max-width: 640px) {
  .sns-image-tool.sns-crop-studio {
    width: min(100%, calc(100vw - 20px)) !important;
    margin: 12px auto !important;
  }

  .sns-crop-title {
    padding: 14px !important;
  }

  .sns-crop-body {
    padding: 12px !important;
    gap: 12px !important;
  }

  .sns-crop-config-panel,
  .sns-crop-panel,
  .sns-crop-helper {
    padding: 12px !important;
  }

  .sns-crop-platform-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .sns-crop-type-grid,
  .sns-crop-spec-grid,
  .sns-crop-metrics,
  .sns-crop-format-row,
  .sns-crop-action-row {
    grid-template-columns: 1fr !important;
  }

  .sns-crop-config-head,
  .sns-crop-work-head,
  .sns-crop-panel-head {
    display: grid !important;
    align-items: start !important;
  }

  .sns-crop-control-row,
  .sns-crop-file-row {
    grid-template-columns: minmax(0, 1fr) 64px !important;
  }

  .sns-crop-editor-tools {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .sns-crop-editor-frame {
    grid-template-rows: minmax(310px, auto) auto !important;
    min-height: 0 !important;
  }

  .sns-crop-cropper-box {
    min-height: 310px !important;
  }

  .sns-crop-preview-box {
    min-height: 190px !important;
  }
}

@media (max-width: 390px) {
  .sns-crop-platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sns-crop-platform-btn {
    white-space: normal !important;
    line-height: 1.1 !important;
    font-size: 11px !important;
  }

  .sns-crop-title h2 {
    font-size: 22px !important;
  }

  .sns-crop-upload-copy strong {
    font-size: 17px !important;
  }
}


/* Full-width cropper layout follow-up — 20260622 */
.sns-crop-cropper-box img.cropper-hidden {
  display: none !important;
}

.sns-crop-cropper-box > img:not(.cropper-hidden) {
  width: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

@media (min-width: 981px) {
  #editorContainer[style*="display: block"].sns-crop-editor-stage {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.48fr) !important;
    align-items: start !important;
    gap: 14px !important;
  }

  #editorContainer[style*="display: block"] .sns-crop-workbench {
    display: contents !important;
  }

  #editorContainer[style*="display: block"] .sns-crop-canvas-panel {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    min-height: 0 !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  #editorContainer[style*="display: block"] .sns-crop-config-panel {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    padding: 12px !important;
    gap: 9px !important;
  }

  #editorContainer[style*="display: block"] .sns-crop-output-panel {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: start !important;
    min-height: 0 !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .sns-crop-config-head {
    display: grid !important;
    align-items: start !important;
    gap: 6px !important;
  }

  .sns-crop-config-head p,
  .sns-crop-work-head p,
  .sns-crop-panel-head p,
  .sns-crop-output-panel > .sns-crop-note-strip {
    display: none !important;
  }

  .sns-crop-config-head span,
  .sns-crop-panel-head span {
    min-height: 24px !important;
    font-size: 10px !important;
  }

  .sns-crop-platform-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .sns-crop-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .sns-crop-platform-btn,
  .sns-crop-type-btn {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 5px !important;
    font-size: 11px !important;
    line-height: 1.05 !important;
  }

  .sns-crop-spec-card {
    padding: 8px !important;
  }

  .sns-crop-spec-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .sns-crop-spec-item {
    min-height: 34px !important;
    align-items: center !important;
    align-content: center !important;
    padding: 5px 7px !important;
  }

  .sns-crop-spec-item span:first-child {
    font-size: 10px !important;
  }

  .sns-crop-spec-item span:last-child {
    font-size: 12px !important;
  }

  .sns-crop-work-head,
  .sns-crop-panel-head {
    align-items: center !important;
    min-height: 34px !important;
  }

  .sns-crop-editor-frame {
    grid-template-rows: clamp(420px, 52vh, 540px) auto !important;
    min-height: 0 !important;
    gap: 8px !important;
  }

  .sns-crop-cropper-box {
    width: 100% !important;
    height: clamp(420px, 52vh, 540px) !important;
    min-height: 420px !important;
  }

  .sns-crop-studio .cropper-container {
    margin: 0 auto !important;
    max-width: 100% !important;
  }

  .sns-crop-editor-tools {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .sns-crop-tool-btn {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
    padding-inline: 5px !important;
  }

  .sns-crop-preview-wrap {
    gap: 8px !important;
  }

  .sns-crop-preview-box {
    min-height: 178px !important;
    height: 178px !important;
  }

  .sns-crop-preview-image {
    min-height: 70px !important;
    max-height: 166px !important;
  }

  .sns-crop-metrics {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .sns-crop-metric {
    min-height: 40px !important;
    padding: 6px 8px !important;
  }

  .sns-crop-option-stack {
    gap: 7px !important;
  }

  .sns-crop-field-label {
    margin-bottom: 4px !important;
  }

  .sns-crop-privacy {
    min-height: 36px !important;
    padding: 8px 10px !important;
  }
}

@media (min-width: 981px) and (max-width: 1120px) {
  #editorContainer[style*="display: block"].sns-crop-editor-stage {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.46fr) !important;
  }

  .sns-crop-platform-grid,
  .sns-crop-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* Cropper single-image canvas fix — 20260621
   Cropper.js renders a second clipped <img> inside .cropper-view-box by default.
   The export/crop data still comes from Cropper, but the editing surface shows one image plus one crop frame. */
.sns-crop-studio .cropper-view-box > img {
  display: none !important;
}

.sns-crop-studio .cropper-drag-box.cropper-modal,
.sns-crop-studio .cropper-modal {
  background: transparent !important;
  opacity: 1 !important;
}

.sns-crop-studio .cropper-drag-box {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.sns-crop-studio .cropper-view-box {
  outline: 3px solid rgba(210, 170, 85, 0.95) !important;
  box-shadow: 0 0 0 1px rgba(43, 33, 25, 0.55) inset !important;
}

.sns-crop-studio .cropper-face {
  background: transparent !important;
}


/* Preview aspect/fill correction — 20260621
   The preview div gets exact JS width/height. Do not clamp its height independently. */
.sns-crop-studio .sns-crop-preview-image {
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
}


/* Final preview 100% fit correction — 20260622
   The preview frame follows the selected export aspect ratio; the generated preview fills both axes. */
.sns-crop-studio .sns-crop-preview-box {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--sns-preview-aspect, 16 / 9) !important;
  padding: 0 !important;
}

.sns-crop-studio .sns-crop-preview-image {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border: 0 !important;
  background-size: 100% 100% !important;
}

.sns-crop-studio .sns-crop-preview-box {
  border: 0 !important;
  outline: 2px solid var(--sns-line) !important;
  outline-offset: -2px !important;
}


/* Cropper full-original visibility correction — 20260622
   The edit canvas follows the uploaded image ratio so the whole source is visible without panning. */
.sns-crop-studio .sns-crop-cropper-box {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: var(--sns-cropper-aspect, 4 / 3) !important;
}

.sns-crop-studio .cropper-drag-box,
.sns-crop-studio .cropper-canvas,
.sns-crop-studio .cropper-canvas img,
.sns-crop-studio .cropper-face {
  cursor: grab !important;
}

.sns-crop-studio .cropper-container:active .cropper-drag-box,
.sns-crop-studio .cropper-container:active .cropper-canvas,
.sns-crop-studio .cropper-container:active .cropper-canvas img,
.sns-crop-studio .cropper-container:active .cropper-face {
  cursor: grabbing !important;
}


/* Full-image cropper row height correction — 20260622
   Let the editor row grow to the original-image aspect ratio instead of overlapping the settings panels. */
.sns-crop-studio .sns-crop-editor-frame {
  grid-template-rows: auto auto !important;
  min-height: 0 !important;
}

/* Crop work-area drag follow-up — 20260623
   The image still opens fully visible, but the crop area itself can be repositioned by mouse drag. */
.sns-crop-studio .cropper-face {
  cursor: grab !important;
  pointer-events: auto !important;
}


/* Crop drag dark heading follow-up — 20260623
   Keep the settings heading inside the tool color system instead of inheriting global dark H3 white on a light ancestor. */
.sns-crop-studio .sns-crop-config-head h3 {
  margin: 0 !important;
  color: var(--sns-ink) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

body[data-scheme="dark"] .sns-crop-studio .sns-crop-config-panel,
body[data-scheme="inverse"] .sns-crop-studio .sns-crop-config-panel,
html[data-scheme="dark"] body .sns-crop-studio .sns-crop-config-panel,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-config-panel {
  background: var(--sns-panel) !important;
  color: var(--sns-ink) !important;
}

body[data-scheme="dark"] .sns-crop-studio .sns-crop-config-head h3,
body[data-scheme="inverse"] .sns-crop-studio .sns-crop-config-head h3,
html[data-scheme="dark"] body .sns-crop-studio .sns-crop-config-head h3,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-config-head h3 {
  color: var(--sns-ink) !important;
}


/* Crop drag dark title contrast follow-up — 20260623
   Give the dark title band an actual dark background-color fallback so contrast audits do not sample a light ancestor behind the gradient. */
body[data-scheme="dark"] .sns-crop-studio .sns-crop-title,
body[data-scheme="inverse"] .sns-crop-studio .sns-crop-title,
html[data-scheme="dark"] body .sns-crop-studio .sns-crop-title,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-title {
  background: linear-gradient(135deg, #2b2119 0%, #3a2b20 58%, #211812 100%), #2b2119 !important;
  background-color: #2b2119 !important;
}

body[data-scheme="dark"] .sns-crop-studio .sns-crop-title p,
body[data-scheme="inverse"] .sns-crop-studio .sns-crop-title p,
html[data-scheme="dark"] body .sns-crop-studio .sns-crop-title p,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-title p {
  color: #fff6e5 !important;
}


/* Crop drag html-scheme dark parity follow-up — 20260623
   Some site dark toggles leave the scheme on <html>; mirror the tool root and title tokens there too. */
html[data-scheme="dark"] body .sns-image-tool.sns-crop-studio,
html[data-scheme="inverse"] body .sns-image-tool.sns-crop-studio,
html[data-theme="dark"] body .sns-image-tool.sns-crop-studio {
  --sns-paper: #241d18;
  --sns-paper-2: #30251e;
  --sns-panel: #332820;
  --sns-panel-soft: #463322;
  --sns-line: #d8c1a0;
  --sns-line-soft: #927a5e;
  --sns-ink: #fff2dc;
  --sns-muted: #dcc8ac;
  --sns-cta: #ead2aa;
  --sns-cta-strong: #c99642;
  --sns-green: #31402a;
  --sns-blue: #283d47;
  --sns-shadow: 4px 4px 0 rgba(0, 0, 0, 0.38);
  color: var(--sns-ink) !important;
  background:
    linear-gradient(rgba(216, 193, 160, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216, 193, 160, 0.055) 1px, transparent 1px),
    var(--sns-paper) !important;
  background-color: var(--sns-paper) !important;
  background-size: 18px 18px, 18px 18px, auto !important;
}

html[data-scheme="dark"] body .sns-crop-studio .sns-crop-kicker,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-kicker,
html[data-theme="dark"] body .sns-crop-studio .sns-crop-kicker {
  background: var(--sns-panel-soft) !important;
  color: var(--sns-ink) !important;
  border-color: var(--sns-line) !important;
}

html[data-scheme="dark"] body .sns-crop-studio .sns-crop-title h2,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-title h2,
html[data-theme="dark"] body .sns-crop-studio .sns-crop-title h2 {
  color: var(--sns-ink) !important;
}


/* Crop drag html-scheme component dark parity fixed — 20260623 */
html[data-scheme="dark"] body .sns-crop-studio .sns-crop-spec-card,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-spec-card,
html[data-theme="dark"] body .sns-crop-studio .sns-crop-spec-card {
  background: var(--sns-blue) !important;
  color: var(--sns-ink) !important;
}

html[data-scheme="dark"] body .sns-crop-studio .sns-crop-spec-item,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-spec-item,
html[data-theme="dark"] body .sns-crop-studio .sns-crop-spec-item {
  background: rgba(51, 40, 32, 0.94) !important;
  border-color: var(--sns-line-soft) !important;
  color: var(--sns-ink) !important;
}

html[data-scheme="dark"] body .sns-crop-studio .sns-crop-spec-item span:first-child,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-spec-item span:first-child,
html[data-theme="dark"] body .sns-crop-studio .sns-crop-spec-item span:first-child,
html[data-scheme="dark"] body .sns-crop-studio .sns-crop-metric span:first-child,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-metric span:first-child,
html[data-theme="dark"] body .sns-crop-studio .sns-crop-metric span:first-child {
  color: var(--sns-muted) !important;
}

html[data-scheme="dark"] body .sns-crop-studio .sns-crop-spec-item span:last-child,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-spec-item span:last-child,
html[data-theme="dark"] body .sns-crop-studio .sns-crop-spec-item span:last-child,
html[data-scheme="dark"] body .sns-crop-studio #recommendedSize,
html[data-scheme="inverse"] body .sns-crop-studio #recommendedSize,
html[data-theme="dark"] body .sns-crop-studio #recommendedSize,
html[data-scheme="dark"] body .sns-crop-studio #aspectRatio,
html[data-scheme="inverse"] body .sns-crop-studio #aspectRatio,
html[data-theme="dark"] body .sns-crop-studio #aspectRatio,
html[data-scheme="dark"] body .sns-crop-studio #formatNote,
html[data-scheme="inverse"] body .sns-crop-studio #formatNote,
html[data-theme="dark"] body .sns-crop-studio #formatNote,
html[data-scheme="dark"] body .sns-crop-studio .sns-crop-metric span,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-metric span,
html[data-theme="dark"] body .sns-crop-studio .sns-crop-metric span,
html[data-scheme="dark"] body .sns-crop-studio .sns-crop-metric strong,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-metric strong,
html[data-theme="dark"] body .sns-crop-studio .sns-crop-metric strong {
  color: var(--sns-ink) !important;
}

html[data-scheme="dark"] body .sns-crop-studio .sns-crop-metric,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-metric,
html[data-theme="dark"] body .sns-crop-studio .sns-crop-metric {
  background: var(--sns-green) !important;
  color: var(--sns-ink) !important;
  border-color: var(--sns-line) !important;
}

html[data-scheme="dark"] body .sns-crop-studio .sns-crop-action-primary,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-action-primary,
html[data-theme="dark"] body .sns-crop-studio .sns-crop-action-primary,
html[data-scheme="dark"] body .sns-crop-studio .sns-crop-upload-button,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-upload-button,
html[data-theme="dark"] body .sns-crop-studio .sns-crop-upload-button {
  background: var(--sns-cta) !important;
  color: #21180f !important;
  border-color: var(--sns-line) !important;
}


/* Crop drag html-scheme note strip dark parity follow-up — 20260623 */
html[data-scheme="dark"] body .sns-crop-studio .sns-crop-note-strip,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-note-strip,
html[data-theme="dark"] body .sns-crop-studio .sns-crop-note-strip,
body[data-scheme="dark"] .sns-crop-studio .sns-crop-note-strip,
body[data-scheme="inverse"] .sns-crop-studio .sns-crop-note-strip {
  background: var(--sns-panel-soft) !important;
  color: var(--sns-ink) !important;
  border-color: var(--sns-line) !important;
}

html[data-scheme="dark"] body .sns-crop-studio .sns-crop-note-strip *,
html[data-scheme="inverse"] body .sns-crop-studio .sns-crop-note-strip *,
html[data-theme="dark"] body .sns-crop-studio .sns-crop-note-strip *,
body[data-scheme="dark"] .sns-crop-studio .sns-crop-note-strip *,
body[data-scheme="inverse"] .sns-crop-studio .sns-crop-note-strip * {
  color: var(--sns-ink) !important;
}