/* 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%;
}
.image-mode-tabs + .image-bar {
  display: flex;
  margin-top: 0;
}

/* 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-with-fill {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  gap: 12px;
}
.image-prompt-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.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;
}
.mode-field--title-row {
  align-items: center;
}
.title-row-actions {
  align-items: center;
  display: flex;
  flex: 1 1 0%;
  gap: 8px;
  min-width: 0;
}
.title-row-actions .title-input-field {
  flex: 1 1 0%;
  min-width: 0;
}
.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],
.draft-style-mode-block[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 .prompt-field-surface--short {
  min-height: 56px;
  resize: vertical;
}
.draft-style-field {
  align-items: flex-start;
}
.draft-style-field {
  display: block;
}
.draft-style-field .mode-label {
  display: block;
  margin-bottom: 8px;
  padding-top: 0;
}
.draft-style-selector {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.draft-style-selector-panel {
  background: linear-gradient(180deg, #fbfdff 0%, #f6f9ff 100%);
  border: 1px dashed #d8e1f0;
  border-radius: 16px;
  padding: 14px;
}
.draft-style-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.draft-style-card {
  align-items: stretch;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px;
  position: relative;
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.draft-style-card:hover {
  background: #f8fbff;
  border-color: #8eb5f2;
  transform: translateY(-1px);
}
.draft-style-card.is-selected {
  background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%);
  border-color: #2f6fe4;
  box-shadow: 0 0 0 2px rgba(47, 111, 228, 0.18), 0 8px 18px rgba(47, 111, 228, 0.18);
}
.draft-style-card.is-selected::after {
  align-items: center;
  background: #fff;
  border: 2px solid #1d4ed8;
  border-radius: 50%;
  color: #1d4ed8;
  content: '✓';
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  height: 24px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 12px;
  top: 10px;
  width: 24px;
  z-index: 2;
}
.draft-style-card-preview {
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 16 / 9;
  border: 1px solid #dde6f7;
  border-radius: 12px;
  display: block;
  position: relative;
}
.draft-style-card-preview.has-preview-image::before,
.draft-style-card-preview.has-preview-image::after {
  display: none;
}
.draft-style-card-label {
  color: #5b6475;
  font-size: 13px;
  font-weight: 600;
}
.draft-style-card.is-selected .draft-style-card-label {
  color: #174ea6;
  font-weight: 800;
}
.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: 8px;
  position: relative;
  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-card.is-selected {
  background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%);
  border-color: #2f6fe4;
  border-style: solid;
  box-shadow: 0 0 0 2px rgba(47, 111, 228, 0.18), 0 8px 18px rgba(47, 111, 228, 0.18);
}
.draft-style-upload-icon {
  align-items: center;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border: 1px solid #d7e3f6;
  border-radius: 18px;
  color: #2f6fe4;
  display: inline-flex;
  font-size: 30px;
  font-weight: 300;
  height: 56px;
  justify-content: center;
  line-height: 1;
  width: 56px;
}
.draft-style-upload-card.has-file .draft-style-upload-icon {
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #dde6f7;
  border-radius: 12px;
  border-style: solid;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  height: 86px;
  width: 100%;
}
.draft-style-upload-remove {
  align-items: center;
  background: rgba(17, 24, 39, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  font-weight: 700;
  height: 26px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 14px;
  top: 14px;
  width: 26px;
  z-index: 3;
}
.draft-style-upload-remove:hover,
.draft-style-upload-remove:focus-visible {
  background: #111827;
}
.draft-style-upload-remove[hidden] {
  display: none;
}
.draft-style-upload-label {
  color: #4b5a73;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draft-style-upload-card.is-selected .draft-style-upload-label {
  color: #174ea6;
  font-weight: 800;
}
.draft-style-upload-help {
  color: #7a8699;
  font-size: 12px;
  line-height: 1.35;
}
.draft-style-direct-field {
  align-items: center;
  display: flex;
  gap: 14px;
  padding-top: 12px;
}
.draft-style-direct-label {
  color: #5b6475;
  flex: 0 0 74px;
  font-size: 14px;
  font-weight: 600;
}
.draft-style-direct-input {
  background: #fff;
  border: 1px solid #d8e1f0;
  border-radius: 5px;
  color: #1f2937;
  font-size: 14px;
  min-height: 32px;
  padding: 0 12px;
  width: 100%;
}
.draft-style-direct-input {
  border-radius: 12px;
  min-height: 40px;
}
.draft-style-direct-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(47, 111, 228, 0.16);
  outline: none;
}
.prompt-detail-fields {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.prompt-detail-fields[hidden] {
  display: none;
}
.prompt-section-divider {
  border-top: 1px dashed #d8dee9;
  margin: 4px 0 0;
  width: 100%;
}
.mode-field--inline-row {
  align-items: center;
  flex-direction: row;
  gap: 10px;
}
.mode-field--inline-row .mode-label {
  flex-shrink: 0;
  margin: 0;
  min-width: 6.3em;
}
.mode-field--inline-row .prompt-field-surface,
.mode-field--inline-row textarea.title-input-field {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
}
.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;
}
.ai-fill-from-title-btn--inline,
.prompt-detail-toggle-btn {
  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;
  min-height: 36px;
  padding: 8px 14px;
  white-space: nowrap;
}
.prompt-detail-toggle-btn {
  background: #5f6b7a;
}
.ai-fill-from-title-btn--inline:hover:not(:disabled) {
  background: #0069d9;
}
.prompt-detail-toggle-btn:hover:not(:disabled) {
  background: #4c5764;
}
.ai-fill-from-title-btn--inline:disabled,
.prompt-detail-toggle-btn: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;
}
.button-group {
  align-items: center;
  bottom: 16px;
  left: 10px;
  display: flex;
  gap: 5px;
}
.volume-control {
  align-items: center;
  display: flex;
}
.volume-control input[type='range'] {
  width: 110px;
}
.swap-btn,
.translate-btn,
.speak-btn,
.copy-btn,
.stop-btn {
  background: #007bff;
  border-radius: 5px;
  border: none;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}
.swap-btn {
  font-size: 20px;
  padding: 8px 30px;
}
.swap-btn i {
  display: inline-block;
  font-style: normal;
  transform: rotate(90deg);
}
.translate-btn,
.speak-btn,
.copy-btn,
.stop-btn {
  padding: 8px 15px;
}
.speak-btn img,
.copy-btn img,
.stop-btn img {
  width: 20px;
}
.translate-btn:hover {
  background: #0056b3;
}
.speak-btn:hover,
.copy-btn:hover,
.stop-btn:hover {
  background: #0f63bd;
}
.generate-btn-inline {
  align-items: center;
  background: #007bff;
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  width: 50%;
  gap: 8px;
  justify-content: center;
  margin-left: auto;
  padding: 8px 14px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.generate-btn-inline:hover:not(:disabled) {
  box-shadow: 0 14px 26px rgba(31, 101, 255, 0.3);
  transform: translateY(-1px);
}
.generate-btn-inline:disabled {
  background: #c8d1e1;
  box-shadow: none;
  cursor: not-allowed;
}
.generate-btn-inline .generate-icon {
  height: 18px;
  width: 18px;
}
.speak-btn[disabled],
.stop-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.volume-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 12px 24px;
  background: rgba(0, 123, 255, 0.9);
  color: #fff;
  border-radius: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  font-family: Arial, sans-serif;
  font-size: 16px;
  opacity: 0;
  animation: fadeInOut 1s ease;
  z-index: 1000;
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  20%,
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border: 2px solid #fff;
  border-top: 2px solid #999;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.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 {
  background: var(--presentation-result-panel-bg);
  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%;
}
@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: transparent;
  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%;
  }
}
.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: var(--presentation-result-card-bg);
  border: 1px solid var(--presentation-result-card-border);
  border-radius: 18px;
  box-shadow: var(--presentation-result-shadow);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px 0;
  min-height: 220px;
  padding: 14px;
  text-align: center;
  width: 100%;
  max-width: 45vw;
}

.presentation-result-item {
  position:relative;
  align-items: center;
  background: var(--presentation-result-card-bg);
  border: 1px solid var(--presentation-result-card-border);
  border-radius: 18px;
  box-shadow: var(--presentation-result-shadow);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px 0;
  min-height: 220px;
  padding: 14px;
  text-align: center;
  width: 100%;
  max-width: 45vw;
}

.presentation-result-item[data-state="loading"],
.presentation-result-item[data-state="rendering"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 0;
  padding: 0;
}

.presentation-result-item[data-state="loading"] .skeleton-image,
.presentation-result-item[data-state="rendering"] .skeleton-image {
  margin-bottom: 0;
}

.skeleton-image {
  align-items: center;
  background: linear-gradient(180deg, #f5f7fb 0%, #e9eef7 100%);
  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.8s infinite;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0) 65%
  );
  content: '';
  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%;
}

.presentation-media-row {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  width: 94%;
}

.presentation-badge-slot {
  display: flex;
  flex: 0 0 40px;
  justify-content: flex-start;
}

.presentation-media-column {
  flex: 1 1 auto;
  min-width: 0;
}

.presentation-image-frame {
  background: linear-gradient(180deg, #f8fafc 0%, var(--presentation-result-surface-bg) 100%);
  border: 1px solid var(--presentation-result-surface-border);
  border-radius: 14px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  width: 100%;
  min-height: 256px;
}

.presentation-card-fade-enter-active,
.presentation-card-fade-leave-active {
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.presentation-card-fade-enter-from,
.presentation-card-fade-leave-to {
  opacity: 0;
  transform: translateY(6px);
}

.presentation-image-frame--partial {
  border-radius: 12px;
  overflow: hidden;
}

.presentation-image-frame--partial .image-control-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.partial-image-overlay {
  align-items: center;
  backdrop-filter: blur(1.5px);
  background: rgba(255, 255, 255, 0.32);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.32s ease;
  z-index: 3;
}

.partial-image-overlay--active {
  opacity: 1;
}

.presentation-section-badge {
  align-items: center;
  background: linear-gradient(180deg, #f2f7ff 0%, #e8f0fd 100%);
  border: 1px solid #d4dfef;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  color: #3f5f89;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  margin-top: 5px;
  min-width: 32px;
  padding: 0;
  position: relative;
  z-index: 1;
}

.presentation-media-column .image-action-row {
  width: 100%;
}

/* html 카드는 image의 <img>처럼 고유 너비를 가진 콘텐츠가 없어
   shrink-to-fit 컨텍스트에서 폭이 붕괴한다. 정폭 조상을 채우도록 강제한다. */
.presentation-result-card {
  width: 100%;
}

.presentation-html-slide-host {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  /* control group(absolute) 기준점 */
  position: relative;
}

.presentation-html-slide-frame,
.presentation-html-slide-frame__scale,
.presentation-html-slide-frame__iframe {
  box-sizing: border-box;
}

.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;
  flex-direction: column;
  font-size: 13px;
  gap: 10px;
  justify-content: center;
  line-height: 1.4;
  min-height: 150px;
  padding: 10px;
  text-align: center;
  width: 100%;
}

.download-link {
  align-items: center;
  background: var(--presentation-action-bg, #007bff) url(./images/downw.png) no-repeat calc(100% - 20px) center;
  background-size: auto 15px;
  border: none;
  border-radius: 4px;
  color: var(--presentation-action-text, #fff);
  cursor: pointer;
  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;
}

.image-action-row .download-link:disabled {
  background-color: var(--presentation-action-bg, #007bff);
  cursor: not-allowed;
  opacity: var(--presentation-action-disabled-opacity, 0.55);
}

.presentation-direct-download-trigger {
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0 14px;
}

.retry-link {
  background: var(--presentation-action-bg, #007bff) url(./images/replay.svg) no-repeat calc(100% - 20px) center;
  background-size: auto 15px;
  border: 0;
  cursor: pointer;
  font-size: 13px;
}

.retry-link:disabled {
  cursor: not-allowed;
  opacity: var(--presentation-action-disabled-opacity, 0.55);
}

.copy-link {
  align-items: center;
  background: var(--presentation-action-bg, #007bff) url(./images/copy2.png) no-repeat calc(100% - 20px) center;
  background-size: auto 15px;
  border-radius: 4px;
  color: var(--presentation-action-text, #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 {
  cursor: not-allowed;
  opacity: var(--presentation-action-disabled-opacity, 0.55);
}

.download-link:hover:not(:disabled) {
  background-color: var(--presentation-action-bg-hover, #0f63bd);
}

.copy-link:hover:not(:disabled) {
  background-color: var(--presentation-action-bg-hover, #0f63bd);
}

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

.generated-image {
  border-radius: 10px;
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
  min-width: 0;
  transition: filter 0.36s ease, opacity 0.36s ease, transform 0.36s ease;
  width: 100%;
}

.generated-image--partial {
  filter: blur(1.5px) saturate(0.9);
  opacity: 0.82;
}

.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;padding:48px;}
.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 .presentation-media-row{align-items:center;display:flex;justify-content:center;width:100%;}
.image-card-body.big .presentation-badge-slot{display:none !important;}
.image-card-body.big .presentation-media-column{align-items:center;display:flex;flex:0 1 auto;flex-direction:column;max-height:calc(100vh - 96px);max-width:calc(100vw - 96px);}
.image-card-body.big .presentation-image-frame{background:transparent;border:0;border-radius:0;display:flex;justify-content:center;max-height:calc(100vh - 96px);max-width:calc(100vw - 96px);min-height:0;overflow:visible;padding:0;width:fit-content;}
.image-card-body.big .generated-image{
	border-radius: 12px;
	box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
	display: block;
	height: auto;
	max-height: calc(100vh - 96px);
	max-width: calc(100vw - 96px);
	object-fit: contain;
	width: auto;
}
.image-card-body.big .image-control-group{
	position: fixed;
	right: 16px;
	top: 16px;
	z-index: 10000;
}
.image-card-body.big .image-action-row,
.image-card-body.big .download-link{display: none !important;}

/* ── html 카드 액션 버튼 색 통일 ──────────────────────────────
   image 버튼 체계(다운로드=진한 파랑, 복사/재시도=연한 파랑)로 통일하되,
   현재는 기능 미구현이라 비활성 느낌으로 연하게 표시한다.
   기존 .copy-link:disabled(#c8d1e1) 등을 이기도록 :disabled까지 명시해 specificity를 맞춘다. */
.presentation-media-row--html .image-action-row .download-link,
.presentation-media-row--html .image-action-row .download-link:disabled {
	background-color: #007bff;
	color: #fff;
}
.presentation-media-row--html .image-action-row .copy-link,
.presentation-media-row--html .image-action-row .copy-link:disabled,
.presentation-media-row--html .image-action-row .retry-link,
.presentation-media-row--html .image-action-row .retry-link:disabled {
	color: #fff;
}
.presentation-media-row--html .image-action-row .download-link:disabled,
.presentation-media-row--html .image-action-row .copy-link:disabled,
.presentation-media-row--html .image-action-row .retry-link:disabled,
.presentation-media-row--html .image-control-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ── html 카드 단위 확대(크게 보기) ───────────────────────────── */
.presentation-result-card {
	position: relative;
}
/* html 카드 control group 안의 확대 버튼 (image 카드 windowbs와 동일 아이콘) */
.presentation-html-enlarge-btn {
	background: #007BFF url("https://dev.han.kr/chat/images/sub/wbw.png") no-repeat center center;
	background-size: cover;
}
.presentation-html-enlarge-btn.is-on {
	background-image: url("https://dev.han.kr/chat/images/sub/ws1w.png");
}
.presentation-result-card--enlarged {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px;
	background: linear-gradient(45deg, #ffffff, #f5edea, #f9edf6, #d1e3ff, #f5d8ed, #ffe8e1, #efeaea);
	background-size: 200% 200%;
	animation: gradientAnimation 5s ease infinite;
}
.presentation-result-card--enlarged .presentation-media-row {
	width: 100%;
	max-width: 1280px;
	align-items: center;
	justify-content: center;
}
.presentation-result-card--enlarged .presentation-image-frame {
	background: transparent;
	border: 0;
	min-height: 0;
	overflow: visible;
	padding: 0;
}
.presentation-result-card--enlarged .image-control-group {
	position: fixed;
	right: 16px;
	top: 16px;
	z-index: 10000;
}
/* 확대 중에는 번호 뱃지와 액션 버튼을 숨겨 슬라이드에 집중한다. */
.presentation-result-card--enlarged .presentation-badge-slot,
.presentation-result-card--enlarged .image-action-row {
	display: none !important;
}