/* 1. Base & global tokens --------------------------------------------- */
:root {
  --mode-label-color: #5c5c5c;
  --mode-tabs-border-color: #e7ebf3;
  --mode-helper-text-color: #929292;
  --mode-border-color: #dfe3ed;
}
* {
  font-family: inherit;
}
.container {
  /*box-shadow:0 0 10px rgba(0,0,0,0.1);*/
  margin-top: 10px;
}
.ratio-title {
  min-width: 160px;
  white-space: nowrap;
}
.ratio-title label {
  white-space: nowrap;
}

/* 2. Layout: main image generator panels ------------------------------ */
.image-create {
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  width: 100%;
}

.image-mode-tabs {
  background: #fff;
  border: 1px solid #e7ebf3;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
  display: flex;
  flex: 1 1 50%;
  flex-direction: column;
  margin-bottom: 0;
  min-width: 0;
  max-width: 45%;
}
.model-toolbar {
  display: none;
  min-height: 39vh;
}
.model-status-text {
  color: #007bff;
  font-size: 13px;
  margin-bottom: 8px;
  min-height: 18px;
}
.model-status-text[data-state='error'] {
  color: #c0392b;
}
.view-mode-toggle {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  gap: 6px;
}
.view-mode-toggle {
  display: none;
}
.view-mode-toggle input {
  margin: 0;
}
.view-mode-toggle span[data-mode='test'] {
  color: #c0392b;
  font-weight: 600;
}
.image-mode-tabs .image-setting {
  width: 100%;
}
/* 3. Settings panel (prompt & controls) ------------------------------- */
.image-setting .mode-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px;
}
.mode-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.image-prompt-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.image-prompt-with-fill {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  gap: 12px;
}
.image-prompt-rows {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.mode-field--inline-row {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.mode-field--inline-row .mode-label {
  flex: 0 0 84px;
  flex-shrink: 0;
  margin: 0;
  min-width: 84px;
}
.mode-field--inline-row .prompt-field-surface,
.mode-field--inline-row textarea.title-input-field {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
}
.draft-title-row {
  align-items: center;
  display: flex;
  flex: 1 1 0%;
  gap: 10px;
  min-width: 0;
  width: 100%;
}
.draft-title-row #titleInputImage,
.draft-title-row textarea.title-input-field {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  width: 100% !important;
}
.draft-options-toggle-btn {
  background: #eef4ff;
  border: 1px solid #c9d7f2;
  border-radius: 10px;
  color: #2f4f7d;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  white-space: nowrap;
}
.draft-options-toggle-btn:hover {
  background: #e4eeff;
}

.draft-options-panel[hidden] {
  display: none;
}
.draft-style-mode-block[hidden] {
  display: none !important;
}
.draft-count-field[hidden] {
  display: none !important;
}

.draft-options-collapsed-line {
  border-top: 1px dashed #d8e1f0;
  display: block;
  margin: 2px 4px 0;
}

.image-prompt-block:not(.is-draft-collapsed) .draft-options-collapsed-line {
  display: none;
}

.draft-options-panel-inner {
  background: #fbfdff;
  border: 1px solid #d8e1f0;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}
.draft-detail-field {
  align-items: flex-start;
}
.draft-detail-field .mode-label {
  padding-top: 7px;
}
.draft-detail-field .prompt-field-surface--short {
  min-height: 56px;
  resize: vertical;
}
.draft-style-field,
.draft-count-field {
  align-items: flex-start;
}
.draft-style-panel,
.draft-count-panel {
  flex: 1 1 auto;
  min-width: 0;
}
.draft-style-accordion-toggle {
  align-items: center;
  background: #f7f7f8;
  border: 1px solid #eceef2;
  border-radius: 14px;
  color: #3f4857;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 16px;
  text-align: left;
  width: 100%;
}
.draft-style-accordion-summary {
  color: #6c7482;
  flex: 1 1 auto;
  font-size: 14px;
  min-width: 0;
}
.draft-style-accordion-arrow {
  border-bottom: 1.5px solid #6c7482;
  border-right: 1.5px solid #6c7482;
  display: inline-block;
  flex: 0 0 auto;
  height: 8px;
  margin-top: -3px;
  transform: rotate(45deg);
  transition: transform 0.2s ease, margin-top 0.2s ease;
  width: 8px;
}
.draft-style-accordion-toggle[aria-expanded='true'] .draft-style-accordion-arrow {
  margin-top: 3px;
  transform: rotate(-135deg);
}
.draft-style-accordion-panel {
  margin-top: 12px;
}
.draft-style-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.draft-style-card {
  align-items: stretch;
  background: #fff;
  border: 1px solid #d8e1f0;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.draft-style-card:hover {
  border-color: #8eb5f2;
  transform: translateY(-1px);
}
.draft-style-card.is-selected {
  border-color: #2f6fe4;
  box-shadow: 0 0 0 2px rgba(47, 111, 228, 0.12);
}
.draft-style-card-preview {
  background-color: #f3f6fb;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid #dde6f7;
  border-radius: 12px;
  display: block;
  height: 86px;
  position: relative;
}
.draft-style-card[data-style-preview='1'] .draft-style-card-preview {
  background-image: url('./images/demo/template%20(1).png');
}
.draft-style-card[data-style-preview='2'] .draft-style-card-preview {
  background-image: url('./images/demo/template%20(2).png');
}
.draft-style-card[data-style-preview='3'] .draft-style-card-preview {
  background-image: url('./images/demo/template%20(3).png');
}
.draft-style-card[data-style-preview='4'] .draft-style-card-preview {
  background-image: url('./images/demo/template%20(4).png');
}
.draft-style-card[data-style-preview='5'] .draft-style-card-preview {
  background-image: url('./images/demo/template%20(5).png');
}
.draft-style-card[data-style-preview='6'] .draft-style-card-preview {
  background-image: url('./images/demo/template%20(6).png');
}
.draft-style-card[data-style-preview='7'] .draft-style-card-preview {
  background-image: url('./images/demo/template%20(7).png');
}
.draft-style-card-preview::before,
.draft-style-card-preview::after {
  background: #d8e2f3;
  border-radius: 999px;
  content: '';
  left: 14px;
  position: absolute;
  right: 14px;
}
.draft-style-card[data-style-preview] .draft-style-card-preview::before,
.draft-style-card[data-style-preview] .draft-style-card-preview::after {
  display: none;
}
.draft-style-card-preview::before {
  height: 10px;
  top: 18px;
}
.draft-style-card-preview::after {
  box-shadow: 0 18px 0 #e7eef9, 0 36px 0 #edf3fc;
  height: 8px;
  top: 40px;
}
.draft-style-card-label {
  color: #5b6475;
  font-size: 13px;
  font-weight: 600;
}
.draft-style-upload-card {
  align-items: center;
  background: linear-gradient(180deg, #fcfdff 0%, #f6f9ff 100%);
  border: 1px dashed #b9c9e6;
  border-radius: 14px;
  color: #5b6475;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 126px;
  padding: 12px;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.draft-style-upload-card:hover {
  background: linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
  border-color: #8eb5f2;
  transform: translateY(-1px);
}
.draft-style-upload-icon {
  align-items: center;
  background: #fff;
  border: 1px solid #d8e1f0;
  border-radius: 999px;
  color: #2f6fe4;
  display: inline-flex;
  font-size: 22px;
  height: 34px;
  justify-content: center;
  line-height: 1;
  width: 34px;
}
.draft-style-upload-label {
  color: #4b5a73;
  font-size: 13px;
  font-weight: 700;
}
.draft-style-upload-help {
  color: #7a8699;
  font-size: 12px;
}
.draft-style-direct-field {
  margin-top: 12px;
}
.draft-style-text-field .prompt-field-surface--short {
  min-height: 56px;
  resize: vertical;
}
.draft-style-direct-input,
.draft-count-select {
  background: #fff;
  border: 1px solid #d8e1f0;
  border-radius: 5px;
  color: #1f2937;
  font-size: 14px;
  min-height: 32px;
  padding: 0px 12px;
  width: 100%;
}
.draft-sections-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 54vh;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
}
.draft-sections-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.draft-sections-toolbar .mode-label {
  margin-bottom: 0;
}
.draft-section-add-btn {
  align-items: center;
  background: none;
  border: 0;
  color: #5c5c5c;
  cursor: pointer;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.draft-section-add-btn:hover {
  transform: translateY(-1px);
}
.draft-section-add-btn:active {
  transform: translateY(0);
}
.draft-section-add-btn:disabled {
  color: #c3cfdd;
  cursor: not-allowed;
  opacity: 0.7;
}
.draft-section-add-btn:disabled:hover {
  transform: none;
}
.draft-section-add-btn:focus,
.draft-section-add-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(47, 111, 228, 0.2);
  outline: none;
}
.draft-section-item {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}
.draft-section-card {
  background: linear-gradient(180deg, #ffffff 0%, #fdfefe 100%);
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.draft-section-header {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}
.draft-section-remove-btn {
  align-items: center;
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: #8fa1ba;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 32px;
  font-size: 22px;
  height: 32px;
  justify-content: center;
  line-height: 1;
  margin: 8px 10px 0 0;
  padding: 0;
  transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.draft-section-remove-btn:hover {
  color: #5d7698;
}
.draft-section-remove-btn:focus,
.draft-section-remove-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(47, 111, 228, 0.16);
  outline: none;
}
.draft-section-remove-btn:disabled {
  background: transparent;
  color: #c3cfdd;
  cursor: not-allowed;
  opacity: 0.7;
}
.draft-section-drag-handle {
  align-items: center;
  align-self: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #8fa1ba;
  cursor: grab;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  margin: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
  visibility: hidden;
}
.draft-section-drag-handle,
.draft-section-drag-handle:hover,
.draft-section-drag-handle:active,
.draft-section-drag-handle:focus,
.draft-section-drag-handle:focus-visible {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
.draft-section-drag-handle:hover {
  color: #627896;
  transform: translateY(-1px);
}
.draft-section-drag-handle:active {
  cursor: grabbing;
  transform: translateY(0);
}
.draft-section-drag-handle::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.draft-section-item:hover .draft-section-drag-handle,
.draft-section-item:focus-within .draft-section-drag-handle,
.draft-section-item.is-dragging .draft-section-drag-handle {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.draft-section-drag-icon {
  display: grid;
  gap: 3px 4px;
  grid-template-columns: repeat(2, 4px);
  grid-template-rows: repeat(3, 4px);
}
.draft-section-drag-icon span {
  background: currentColor;
  border-radius: 50%;
  display: block;
  height: 4px;
  width: 4px;
}
.draft-section-number {
  align-items: center;
  align-self: center;
  background: linear-gradient(180deg, #f2f7ff 0%, #e8f0fd 100%);
  border: 1px solid #d4dfef;
  border-radius: 8px;
  color: #3f5f89;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  display: inline-flex;
  flex: 0 0 32px;
  font-size: 13px;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  margin: 10px 0 0 12px;
}
.draft-section-item.is-dragging {
  opacity: 0.7;
}
.draft-section-item.is-dragging .draft-section-card {
  box-shadow: 0 10px 24px rgba(31, 59, 108, 0.08);
}
.draft-section-item.is-dragging .draft-section-drag-handle {
  color: #5d7698;
}
.draft-section-item:hover .draft-section-card {
  border-color: #c6d6ec;
}
.draft-section-item:focus-within .draft-section-card {
  border-color: #8eb5f2;
  box-shadow: 0 0 0 3px rgba(47, 111, 228, 0.12);
}
.draft-section-title-input,
.draft-section-body-input {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #1f2937 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
}
.draft-section-type-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #f4f8ff url('./images/sub_layout_06.gif') no-repeat calc(100% - 12px) center !important;
  background-size: 10px auto !important;
  border: 1px solid #d4dfef !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #3f5f89 !important;
  flex: 0 0 122px;
  font-size: 13px !important;
  font-weight: 700 !important;
  height: 40px !important;
  margin: 10px 10px 0 0 !important;
  padding: 0 34px 0 14px !important;
}
.draft-section-title-input {
  box-sizing: border-box !important;
  border-bottom: 1px solid #e6edf7 !important;
  color: #14233b !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  min-height: 50px !important;
  padding: 13px 16px 10px !important;
  resize: none !important;
}
.draft-section-body-input {
  box-sizing: border-box !important;
  color: #22324a !important;
  min-height: 56px !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  padding: 12px 16px 14px !important;
  resize: none !important;
}
.draft-section-title-input::placeholder {
  color: #8a97ab;
}
.draft-section-body-input::placeholder {
  color: #98a4b6;
}
.draft-prompt-hidden[hidden] {
  display: none;
}
.draft-count-select-wrap {
  position: relative;
  width: 100%;
}
.draft-count-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff url('./images/sub_layout_06.gif') no-repeat calc(100% - 12px) center;
  padding-right: 34px;
}
.draft-style-text-field textarea {
  width: 100% !important;
}
.draft-style-accordion-toggle:focus,
.draft-section-drag-handle:focus,
.draft-style-direct-input:focus,
.draft-style-text-field textarea:focus,
.draft-section-type-select:focus,
.draft-count-select:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(81, 143, 83, 0.15);
  outline: none;
}
.draft-section-title-input:focus,
.draft-section-body-input:focus {
  outline: none;
}
.draft-count-panel {
  max-width: 180px;
}
.ai-fill-from-title-btn--stacked {
  align-self: flex-start;
  background: #007bff;
  border: 0;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px !important;
  padding: 8px 14px;
  white-space: nowrap;
}
.ai-fill-from-title-btn--stacked:hover:not(:disabled) {
  background: #0069d9;
}
.ai-fill-from-title-btn--stacked:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
.mode-label {
  color: var(--mode-label-color);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.mode-control,
.mode-select {
  width: 100%;
}
.mode-field-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mode-select select {
  border: 1px solid var(--mode-border-color);
  border-radius: 5px;
  color: #1f2937;
  font-size: 14px;
  height: auto !important;
  padding: 10px 14px;
  width: 100%;
}
.mode-select .ratioInput {
  background: #fff;
  border: 1px solid var(--mode-border-color);
  border-radius: 5px;
  display: block;
  padding-right: 44px;
  position: relative;
  width: 100%;
}
.mode-select .ratioInput select {
  border-radius: 5px;
  padding: 10px 14px;
}
.mode-select .ratioInput div i {
  background: #e5e7eb;
}

.mode-field-header {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}
.mode-helper-text {
  color: var(--mode-helper-text-color);
  font-size: 12px;
  line-height: 1;
  margin: 0;
}
.prompt-field-surface {
  border: 1px solid var(--mode-border-color);
  border-radius: 5px;
  color: #1f2937;
  font-size: 12px;
  line-height: 1.5;
  padding: 5px 8px 0 8px;
  resize: vertical;
}
textarea.prompt-field-surface::placeholder {
  color: var(--mode-helper-text-color);
}
textarea.prompt-field-surface:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(81, 143, 83, 0.15);
  outline: none;
}
textarea.title-input-field {
  box-sizing: border-box !important;
  height: 32px !important;
  overflow: hidden;
  resize: none;
}
textarea.title-input-field:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(81, 143, 83, 0.15);
  outline: none;
}
.image-setting .prompt-field .prompt-field-surface {
  height: 300px;
}
.image-setting .prompt-field .prompt-field-surface--short {
  min-height: 32px;
  box-sizing: border-box !important;
  overflow-y: auto;
  resize: vertical;
}
.mode-actions button {
  align-items: center;
  background: #007bff;
  border: none;
  border-radius: 14px;
  color: #fff;
  display: flex;
  font-size: 16px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  padding: 12px 8px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  width: 100%;
}
.mode-actions button:hover:not(:disabled) {
  box-shadow: 0 14px 26px rgba(31, 101, 255, 0.3);
  transform: translateY(-1px);
}
.mode-actions button:disabled {
  background: #c8d1e1;
  box-shadow: none;
  cursor: not-allowed;
}

/* 4. Generated image upload (drag & drop) ----------------------------- */
#upload-area-image {
  align-items: center;
  background: #fff;
  border: 2px dashed #ddd;
  display: flex;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
}
#upload-area-image:hover {
  border-color: #007bff;
  box-shadow: 0 0 10px #ccc inset;
}
#upload-area-image.dragover {
  background: #e6f3ff;
  border-color: #007bff;
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.3);
  transform: scale(1.02);
}
#upload-area-image.has-images {
  align-items: flex-start;
  background: #f8f9fa;
  border-color: #007bff;
  border-style: solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-height: 200px;
  min-height: 80px;
  overflow-y: auto;
}
#upload-area-image.has-images .mask {
  display: none;
}
#upload-area-image.has-images #upload-button-image {
  display: none;
}
#upload-area-image.has-images::after {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  bottom: 5px;
  color: #666;
  content: var(--after-content, '클릭하거나 드래그하여 더 많은 이미지 추가 (최대 5개)');
  font-size: 11px;
  left: 50%;
  padding: 2px 8px;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}
#upload-area-image.has-image {
  background: #fff;
  border-color: #e0e0e0;
  border-style: solid;
}
#upload-area-image.has-image:hover {
  box-shadow: none;
}
#upload-area-image #fileElemImage {
  cursor: pointer;
  height: 100% !important;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
#upload-button-image {
  background: url(./images/upload.png) no-repeat center 10px;
  background-size: 40px;
  border: none;
  border-radius: 4px;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.2;
  padding: 10px 20px;
  padding-top: 50px;
  pointer-events: none;
  text-align: center;
}
#upload-button-image span {
  color: #999;
  display: block;
  font-size: 12px;
  margin-top: 5px;
}
#recognition-progress-image {
  background: #f0f0f0;
  border-radius: 2px;
  bottom: 10px;
  height: 4px;
  left: 10px;
  position: absolute;
  right: 10px;
}
#recognition-progress-image::-webkit-progress-bar {
  background: #f0f0f0;
  border-radius: 2px;
}
#recognition-progress-image::-webkit-progress-value {
  background: #007bff;
  border-radius: 2px;
}
#status-text-image {
  bottom: 20px;
  color: #666;
  font-size: 12px;
  left: 50%;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
}

.mode-field.upload-field {
  gap: 4px;
}
.mode-field.upload-field.disabled {
  pointer-events: none;
}
.mode-upload-area {
  background: #fbfcff;
}
.mode-upload-area #upload-area-image {
  border-color: #cfd7eb;
  border-radius: 14px;
  height: 15vh;
  min-height: 100px;
}
.mode-upload-area #upload-area-image.disabled {
  background: #f3f4f6;
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.mode-upload-area #upload-area-image.disabled:hover {
  border-color: #cfd7eb;
  box-shadow: none;
}
.upload-disabled-message {
  align-items: center;
  background: rgba(243, 244, 246, 0.95);
  border-radius: 14px;
  bottom: 0;
  color: #6b7280;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  justify-content: center;
  left: 0;
  padding: 20px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  z-index: 10;
}
.progress-container {
  margin-top: 5px;
  position: relative;
  width: 100%;
}
.progress-text {
  color: white;
  font-weight: bold;
  left: 50%;
  position: absolute;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  top: 50%;
  transform: translate(-50%, -50%);
}
progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: 4px;
  height: 20px;
  overflow: hidden;
  width: 100%;
}
progress::-webkit-progress-bar {
  background-color: #f0f0f0;
  border-radius: 4px;
}
progress::-webkit-progress-value {
  background-color: #518f53;
  border-radius: 4px;
  transition: width 0.3s ease;
}
progress::-moz-progress-bar {
  background-color: #518f53;
  border-radius: 4px;
  transition: width 0.3s ease;
}
progress::-ms-fill {
  background-color: #518f53;
  border: none;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.progress-text {
  color: #ccc;
  font-size: 12px;
  font-weight: bold;
  left: 50%;
  position: absolute;
  text-shadow: 0 0 1px BLACK;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 0.3s;
}
.image-select label {
  margin-right: 5px;
}
.image-select select {
  border-radius: 4px;
  height: 37px !important;
  padding: 5px 10px;
}

.image-setting {
  flex-direction: column;
}
.image-bar {
  align-items: stretch;
  display: flex;
  flex: 1 1 50%;
  margin-top: 0;
  min-width: 0;
  max-width: 55%;
}
.image-right-panel {
  display: flex;
  flex: 1 1 0%;
  min-width: 0;
}
.image-right-panel > * {
  width: 100%;
}

/* 5. Result image list & viewer -------------------------------------- */
#image-box {
  border: 1px solid var(--mode-tabs-border-color);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: auto;
  min-height: 300px;
  overflow-x: auto;
  padding: 5px;
  position: relative;
  width: 100%;
  max-height: 76vh;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
}
@keyframes promptBlink {
  50% {
    opacity: 0;
  }
}
#image-box span {
  align-items: center;
  color: #bbb;
  display: flex;
  justify-content: center;
  text-align: center;
}
#image-box > div {
  align-items: center;
  display: none;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
#image-box > div#images {
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  height: auto;
  justify-content: flex-start;
  padding: 5px;
  position: relative;
  transition: 0.3s;
  z-index: 50;
  z-index: 10;
}

#images[v-cloak] {
  display: none !important;
}

#image-box > div#images > div a {
  align-items: center;
  background: #007bff url(./images/downw.png) no-repeat calc(100% - 20px) center;
  background-size: auto 15px;
  color: #fff;
  display: flex;
  height: 26px;
  justify-content: center;
  margin: 5px 0 0 !important;
  margin-top: 5px;
  transition: 0.3s;
  width: 94%;
}
.image-area {
  align-items: center;
  background-color: #fefefe;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  max-height: 100%;
  max-width: 100%;
}
.image-area img {
  max-height: 100%;
  max-width: 100%;
}
.image-btn {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.image-btn button {
  background: #007bff;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: block;
  height: 36px;
  margin-top: 10px;
  padding: 0 20px;
  transition: 0.3s;
  width: 100%;
}
.image-btn.x2 button {
  width: calc(50% - 4px);
}
.image-btn button:hover {
  background: #0f63bd;
}
.image-btn button.back span {
  background: url(./images/back.png) no-repeat right center;
  background-size: auto 100%;
  display: inline-block;
  padding-right: 25px;
}
.image-btn button.downw span {
  background: url(./images/downw.png) no-repeat right center;
  background-size: auto 100%;
  display: inline-block;
  padding-right: 25px;
}
.ratio-1-1 {
  aspect-ratio: 1/1;
}
.ratio-4-3 {
  aspect-ratio: 4/3;
}
.ratio-3-4 {
  aspect-ratio: 3/4;
}
.ratio-16-9 {
  aspect-ratio: 16/9;
}
.ratio-9-16 {
  aspect-ratio: 9/16;
}
.image-area-content {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
#errorMsg {
  color: red;
}

/* Layout: breakpoint for narrower screens ---------------------------- */
@media (max-width: 1100px) {
  .image-create {
    flex-direction: column;
  }
  .image-mode-tabs,
  .image-bar,
  .image-mode-tabs + .image-bar {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .draft-style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .draft-section-header {
    flex-direction: column;
    gap: 0;
  }
  .draft-section-type-select {
    flex: 0 0 auto;
    height: 40px !important;
    margin: 0 14px 0 14px !important;
    width: calc(100% - 28px) !important;
  }
  .draft-section-title-input {
    border-bottom: 0 !important;
    padding-bottom: 10px !important;
  }
  .draft-section-body-input {
    border-top: 1px solid #e6edf7 !important;
    margin-top: 12px !important;
  }
}
.ratioInput {
  border: 1px solid #ddd;
  box-sizing: border-box;
  display: inline-block;
  padding-right: 40px;
  position: relative;
  width: 120px;
}
.ratioInput div {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 0;
  position: absolute;
  right: 10px;
  top: 0;
  width: 20px;
  z-index: 0;
}
.ratioInput div i {
  background: #f0f0f0;
  border: 1px solid #333;
  box-sizing: border-box;
  display: block;
  margin: 0;
  transition: all 0.3s ease;
}
.ratioInput select {
  border: 0;
  padding: 8px;
  width: 100%;
}
/* AI 모델 선택기 스타일 - remove.htm과 동일한 스타일 적용 */
.custom-ai-selector {
  border: 1px solid var(--mode-border-color);
  border-radius: 5px;
  display: inline-block;
  margin-left: 10px;
  overflow: visible;
  position: relative;
  width: 220px;
}
.custom-ai-selector * {
  margin-left: 0;
}
.custom-ai-selector .selected-ai-option {
  align-items: center;
  background: #fff url('./images/sub_layout_06.gif') no-repeat scroll calc(100% - 10px) center !important;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  height: 36px;
  padding: 0 10px;
}
.selected-ai-option img {
  margin-right: 5px;
  width: 20px;
}
.ai-options-list {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 0 0 5px 5px;
  box-sizing: border-box;
  display: none;
  list-style: none;
  margin: 0;
  margin-left: 0;
  max-height: 450px;
  overflow: auto;
  padding: 0;
  position: absolute;
  top: 35px;
  width: 100%;
  z-index: 99;
}
.ai-options-list li {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 5px;
}
.ai-options-list::-webkit-scrollbar-button {
  background: #f1f1f1;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  height: 12px;
}
.ai-options-list::-webkit-scrollbar-button:vertical:start:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath d='M3 1L1 3L3 5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 4px 4px;
}
.ai-options-list::-webkit-scrollbar-button:vertical:end:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath d='M3 1L5 3L3 5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 4px 4px;
}
.ai-options-list::-webkit-scrollbar-button:hover {
  background-color: #e0e0e0;
}
.ai-options-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.ai-options-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}
.ai-options-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 7. Tools & original image input ------------------------------------ */
.tools {
  border: 1px solid #eee;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  height: 34vh;
  margin-bottom: 10px;
  margin-top: 10px;
  min-height: 400px;
}

/* 이미지 입력 섹션 */
.image-input-section {
  flex: 0 0 auto;
}

.image-input {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

.upload-btn {
  align-items: center;
  background: #28a745;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  gap: 8px;
  justify-content: center;
  padding: 10px 20px;
  transition: background 0.3s ease;
}

.upload-btn:hover {
  background: #218838;
}

.upload-icon {
  filter: brightness(0) invert(1);
  height: 20px;
  width: 20px;
}

/* 이미지 미리보기 스타일 */
.image-preview {
  border: 1px solid #ddd;
  border-radius: 4px;
  display: inline-block;
  height: 80px;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease;
  width: 80px;
}

.image-preview:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

.image-preview img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.image-preview .remove-btn {
  align-items: center;
  background: #ff4444;
  border: none;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  height: 18px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 18px;
}

.image-preview .remove-btn:hover {
  background: rgba(255, 0, 0, 0.9);
}

/* 토스트 알림 */
.toast-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 9999;
}

.toast {
  align-items: flex-start;
  animation: toast-enter 0.25s ease forwards;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  color: #fff;
  display: flex;
  font-size: 14px;
  gap: 16px;
  justify-content: space-between;
  max-width: 320px;
  min-width: 240px;
  opacity: 0;
  padding: 12px 16px;
  pointer-events: auto;
  transform: translateY(-10px);
}

.toast-message {
  flex: 1;
  line-height: 1.4;
}

.toast-close {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.toast-close:hover {
  opacity: 0.8;
}

.toast-info {
  background: rgba(31, 41, 55, 0.95);
}

.toast-success {
  background: rgba(14, 159, 110, 0.95);
}

.toast-warning {
  background: rgba(217, 119, 6, 0.95);
}

.toast-error {
  background: rgba(220, 38, 38, 0.95);
}

.toast-leave {
  animation: toast-leave 0.2s ease forwards;
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* 9. Generate button section ---------------------------------------- */
.generate-section {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 10px 0px;
}

.generate-section button {
  align-items: center;
  background: #007bff;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-size: 14px;
  gap: 8px;
  height: 36px;
  justify-content: center;
  padding: 8px 20px;
  transition: background 0.3s ease;
  width: 95%;
}

.generate-section button:hover {
  background: #0f63bd;
}

.generate-section button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  opacity: 0.6;
}
.generate-section button.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

/* 생성 버튼 아이콘 스타일 */
.generate-icon {
  filter: brightness(0) invert(1); /* 흰색으로 변환 */
  height: 24px;
  transition: all 0.3s ease;
  width: 24px;
}

.generate-section button:hover .generate-icon {
  transform: scale(1.1);
}

.model-name {
  font-size: 14px !important;
}

/* style.css의 ::after 의사 요소 제거 */
.custom-ai-selector .selected-ai-option::after {
  display: none !important;
}

/* 동적으로 생성되는 요소들의 스타일 */
.image-skeleton {
  position:relative;
  align-items: center;
  background: #f8f9fa;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px 0;
  min-height: 220px;
  padding: 5px;
  text-align: center;
  width: 100%;
  max-width: 720px;
}

.skeleton-image {
  align-items: center;
  background: #e3e7f0;
  border-radius: 16px;
  clip-path: inset(0 round 16px);
  display: flex;
  height: 256px;
  justify-content: center;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.skeleton-image::after {
  animation: skeleton-shimmer 1.6s infinite;
  background: linear-gradient(
    120deg,
    rgba(244, 245, 249, 0) 0%,
    rgba(244, 245, 249, 0.7) 50%,
    rgba(244, 245, 249, 0) 100%
  );
  content: '';
  filter: blur(3px);
  inset: 0;
  position: absolute;
  z-index: 0;
}
.skeleton-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  inset: 0;
  justify-content: center;
  padding: 0 24px;
  position: absolute;
  text-align: center;
  z-index: 1;
}
.skeleton-loading-gif {
  height: 28px;
  margin: 0 auto 4px;
  width: 28px;
}
.skeleton-status-title {
  color: #1f2937;
  font-size: 16px;
  font-weight: 700;
}
.skeleton-status-subtitle {
  color: #6b7280;
  font-size: 13px;
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes skeleton-button-spin {
  to {
    transform: rotate(360deg);
  }
}

.image-card-header {
  gap: 8px;
  margin-bottom: 2px;
  width: 94%;
}

.card-model-info {
  align-items: center;
  display: none;
  gap: 2px;
}

.card-model-avatar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  height: 18px;
  margin-bottom: 2px;
  object-fit: cover;
  width: 18px;
}

.card-model-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-model-meta strong {
  color: #111827;
  font-size: 14px;
}

.card-model-meta span {
  color: #1a7a2e;
  font-size: 12px;
  font-weight: 600;
}

.image-card-body {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.status-badge {
  background: #ececec;
  border-radius: 999px;
  color: #555;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  text-transform: uppercase;
}

.status-badge.state-loading {
  background: #fff4e5;
  color: #b05d00;
}

.status-badge.state-completed {
  background: #e8fff3;
  color: #1a7a2e;
}

.status-badge.state-error {
  background: #ffecec;
  color: #c0392b;
}

.model-capability-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.model-capability-badges .cap-badge {
  background: #f8f8f8;
  border: 1px solid #d0d0d0;
  border-radius: 999px;
  color: #555;
  font-size: 10px;
  padding: 2px 6px;
}

.model-capability-badges .cap-badge.cap-input {
  background: #f1fff0;
  border-color: #87c16f;
  color: #2f7a1d;
}

.model-capability-badges .cap-badge.cap-img2img {
  background: #eef5ff;
  border-color: #5fa2ff;
  color: #0b63c5;
}

.card-message {
  color: #666;
  font-size: 12px;
  margin-left: auto;
  text-align: right;
}

.card-message.success {
  color: #1a7a2e;
}

.card-message.error {
  color: #c0392b;
}

.image-error {
  align-items: center;
  color: #ff5a5a;
  display: flex;
  font-size: 13px;
  justify-content: center;
  line-height: 1.4;
  min-height: 150px;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.download-link {
  align-items: center;
  background: #007bff url(../images/downw.png) no-repeat calc(100% - 20px) center;
  background-size: auto 15px;
  border-radius: 4px;
  color: #fff;
  display: flex;
  height: 26px;
  justify-content: center;
  margin: 5px 0 0 !important;
  margin-top: 5px;
  text-decoration: none;
  transition: 0.3s;
  width: 100%;
}

.image-action-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.image-action-row .download-link {
  flex: 1 1 0;
}

.copy-link {
  align-items: center;
  background: #007bff url(./images/copy2.png) no-repeat calc(100% - 20px) center;
  background-size: auto 15px;
  border-radius: 4px;
  color: #fff;
  display: flex;
  height: 26px;
  justify-content: center;
  margin: 5px 0 0 !important;
  margin-top: 5px;
  text-decoration: none;
  transition: 0.3s;
  width: 100%;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0 14px;
}

.copy-link:disabled {
  background-color: #c8d1e1;
  cursor: wait;
}

.download-link:hover {
  background-color: #0f63bd;
}

.copy-link:hover:not(:disabled) {
  background-color: #0f63bd;
}

.ai-model-img {
  height: 20px;
  object-fit: contain;
  width: 20px;
}

.generated-image {
  height: auto;
  margin-bottom: 10px;
  max-width: 100%;
  min-width: 256px;
  width: 94%;
}

.download-link-inline {
  margin-left: 10px;
}

.refresh-icon {
  cursor: hand;
}

/* 6. Prompt about / translation helper -------------------------------- */
.image-about {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 30%;
  padding: 10px;
}

.about-header {
  border-bottom: 1px solid #eee;
  margin-bottom: 5px;
  padding-bottom: 5px;
}

.about-header label {
  align-items: center;
  color: #333;
  display: flex;
  font-weight: 500;
  justify-content: space-between;
}

.about-header span {
  align-items: center;
  color: #333;
  display: flex;
  font-weight: 500;
  justify-content: space-between;
}

/* 프롬프트 번역 텍스트와 도움말 이미지를 왼쪽에 그룹화 */
.about-header span::before {
  align-items: center;
  content: '';
  display: flex;
  gap: 5px;
}

/* 토글 스위치를 오른쪽에 고정 */
.about-header span .toggle-switch {
  margin-left: auto;
}

/* 도움말 아이콘 스타일 */
.help-icon {
  cursor: help;
  display: inline-block;
  height: 16px;
  margin-left: 5px;
  opacity: 0.7;
  position: relative;
  transition: opacity 0.2s ease;
  vertical-align: middle;
  width: 16px;
}

.help-icon::after,
.help-icon::before {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.15s ease;
}

.help-icon::after {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  bottom: calc(100% + 10px);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 12px;
  left: 50%;
  line-height: 1.2;
  min-width: 220px;
  padding: 6px 10px;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 10;
}

.help-icon::before {
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
  border-style: solid;
  border-width: 6px;
  bottom: calc(100% + 4px);
  content: '';
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.help-icon:hover,
.help-icon:focus {
  opacity: 1;
}

.help-icon:hover::after,
.help-icon:hover::before,
.help-icon:focus::after,
.help-icon:focus::before {
  opacity: 1;
}

.help-tooltip {
  background: rgba(0, 0, 0, 0.85);
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  max-width: 280px;
  opacity: 0;
  padding: 8px 12px;
  pointer-events: none;
  position: absolute;
  transform: translate3d(0, -4px, 0);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  z-index: 9999;
}

.help-tooltip.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.about-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.image-about textarea {
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  color: #333;
  font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
  font-size: 14px;
  height: 100%;
  line-height: 1.4;
  margin-top: 5px;
  padding: 10px;
  resize: none;
  text-align: left;
  vertical-align: top;
  width: 100%;
}
.image-about textarea::placeholder {
  color: #bbb;
}

/* 8. Legacy file upload area ---------------------------------------- */
.image-input-section .file-part {
  height: 200px;
  margin-bottom: 15px;
  position: relative;
}

/* 업로드 영역 */
#upload-area {
  align-items: center;
  background: #fff;
  border: 2px dashed #ddd;
  border-radius: 5px;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
}

#upload-area:hover {
  border-color: #007bff;
  box-shadow: 0 0 10px #ccc inset;
}

#upload-area.dragover {
  background: #e6f3ff;
  border-color: #007bff;
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.3);
  transform: scale(1.02);
}

/* 업로드 영역에 이미지가 있을 때 */
#upload-area.has-images {
  align-items: flex-start;
  background: #f8f9fa;
  border-color: #007bff;
  border-style: solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-height: 200px;
  min-height: 80px;
  overflow-y: auto;
}

#upload-area.has-images .mask {
  display: none;
}

#upload-area.has-images #upload-button {
  display: none;
}

/* 이미지가 있을 때 추가 안내 텍스트 */
#upload-area.has-images::after {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
  bottom: 5px;
  color: #666;
  content: var(--after-content, '클릭하거나 드래그하여 더 많은 이미지 추가 (최대 5개)');
  font-size: 11px;
  left: 50%;
  padding: 2px 8px;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

#upload-area.has-image:hover {
  box-shadow: none;
}

#upload-area #fileElem {
  cursor: pointer;
  height: 100% !important;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#upload-button {
  background: url(./images/upload.png) no-repeat center 10px;
  background-size: 40px;
  border: none;
  border-radius: 4px;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 20px;
  padding-top: 50px;
  pointer-events: none;
  text-align: center;
}

#upload-button span {
  color: #999;
  display: block;
  font-size: 12px;
  margin-top: 5px;
}

/* 마스크 오버레이 */
.mask {
  bottom: 0;
  display: none;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}

.mask::before {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.mask span {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 18px;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  position: relative;
  text-align: center;
  text-shadow: 0px 0px 4px #000;
  z-index: 11;
}

/* 업로드 영역 활성화 */
#upload-area.has-image {
  background: #fff;
  border-color: #e0e0e0;
  border-style: solid;
}

/* 진행률 표시 */
#recognition-progress {
  background: #f0f0f0;
  border-radius: 2px;
  bottom: 10px;
  height: 4px;
  left: 10px;
  position: absolute;
  right: 10px;
}

#recognition-progress::-webkit-progress-bar {
  background: #f0f0f0;
  border-radius: 2px;
}

#recognition-progress::-webkit-progress-value {
  background: #007bff;
  border-radius: 2px;
}

#status-text {
  bottom: 20px;
  color: #666;
  font-size: 12px;
  left: 50%;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
}

/* 10. Responsive tweaks ---------------------------------------------- */
@media (max-height: 800px) {
  .prompt-field .prompt-field-surface {
    font-size: 12px;
  }

  .mode-actions button {
    border-radius: 10px;
    padding: 8px 4px;
  }

  #upload-button-image {
    background-size: 36px;
    font-size: 12px;
    line-height: 1;
  }

  #upload-button-image span {
    font-size: 10px;
  }
}


.mode-field-history{
  display:none;
  background:#f5f5f5;
  border-radius: 15px;
  border: 1px solid #dddddd;
}
.mode-field-history > ul{padding: 0;}
.mode-field-history > ul > li{display: flex;position: relative;font-size: 15px;padding: 3px 45px 3px 20px;list-style: none;border-top: 1px solid #ddd;}
.mode-field-history > ul > li:first-child{border-top:0;}
.mode-field-history > ul > li *{font-size:inherit;}
.mode-field-history > ul > li .tit{display:block;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;}
.mode-field-history > ul > li .del{position: absolute;right: 20px;top: 5px;width: 18px;height: 18px;border-radius: 50%;background: #a19697;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 14px;line-height: 1.4;cursor: pointer;z-index: 10;}

/* 이미지 컨트롤 버튼 공통 스타일 */
.image-control-group {
	position: absolute;
	top: 6px;
	right: 12px;
	z-index: 1500;
	display: flex;
	align-items: center;
	gap: 4px;
}

.image-control-btn {
	position: static;
	z-index: 66;
	background: #007BFF;
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 0;
	width: 21px;
	height: 21px;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
	transition: 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/*.image-control-btn:hover {
	background: #0f63bd;
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15);
}*/

/* windowbs 개별 스타일 */
#windowbs {
	background: #007BFF url("https://dev.han.kr/chat/images/sub/wbw.png") no-repeat center center;
	background-size: cover;
	z-index: 1500;
}

.presentation-editor-trigger-btn {
	border: 1px solid #fff;
	background-color: #007BFF;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23FFFFFF'%3E%3Cpath d='M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px 12px;
	z-index: 1500;
}

.presentation-editor-trigger-btn:hover {
	background-color: #0f63bd;
}

#windowbs.on {
	background: #007BFF url("https://dev.han.kr/chat/images/sub/ws1w.png") no-repeat center center;
	background-size: cover;
}
body.img-fullscreen, html.img-fullscreen { overflow: hidden !important; }
.image-card-body.big{position: fixed;width: 100%;height: 100vh;top: 0;left: 0;box-sizing:border-box;z-index: 9999;align-items: center;justify-content: center;}
.image-card-body.big::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, #ffffff, #f5edea, #f9edf6, #d1e3ff, #f5d8ed, #ffe8e1, #efeaea);
background-size: 200% 200%;animation: gradientAnimation 5s ease infinite;border-radius: 10px;z-index: -1;}
@keyframes gradientAnimation {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.image-card-body.big .generated-image{max-height:100%;width: auto;}
.image-card-body.big .download-link{display: none !important;}