/*
 * Emoticon Maker - AI 이모티콘 생성
 * Copyright (c) 2026 Hwang Minho (revfactory@gmail.com)
 * Licensed under Apache 2.0 + Commons Clause — 상업적 판매 불가
 * See LICENSE file for details
 */

/* ===== Reset (Tailwind preflight covers most, but keep cursor/font inheritance) ===== */
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ===== Keyframe Animations ===== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { background: #E5E5E5; } 50% { background: #F5F5F5; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-16px); } }
@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}
@keyframes num-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===== Step Section display logic ===== */
.step-section { display: none; animation: fadeIn 300ms ease-out; }
.step-section.active { display: block; }

/* ===== Skeleton animation ===== */
.skeleton { border-radius: 12px; animation: pulse 1.5s ease-in-out infinite; }

/* ===== Step Indicator — tooltip & transitions ===== */
.step-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  transition: all 200ms ease-out;
  flex-shrink: 0;
  position: relative;
}
.step-dot.completed { background: #111111; color: #FFFFFF; }
.step-dot.current { background: #111111; color: #FFFFFF; transform: scale(1.1); box-shadow: 0 0 0 3px #FAFAFA, 0 0 0 5px #111111; }
.step-dot.pending { background: #E5E5E5; color: #999999; }
.step-dot::after {
  content: attr(data-tooltip);
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: #111111; color: #FFFFFF;
  font-size: 11px; font-weight: 500; white-space: nowrap;
  padding: 4px 10px; border-radius: 6px;
  opacity: 0; pointer-events: none; transition: opacity 150ms;
}
.step-dot:hover::after { opacity: 1; }
.step-line {
  width: 24px; height: 2px; flex-shrink: 0;
  transition: background 200ms ease-out;
}
.step-line.completed { background: #111111; }
.step-line.pending { background: #E5E5E5; }

/* ===== Toast animations ===== */
.toast {
  padding: 12px 20px; border-radius: 12px; font-size: 14px; font-weight: 500;
  animation: slideDown 200ms ease-out; pointer-events: auto;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.toast.success { background: #111111; color: #FFFFFF; }
.toast.error { background: #EF4444; color: #FFFFFF; }
.toast.info { background: #F5F5F5; color: #333333; }
.toast.exiting { animation: slideUp 150ms ease-in forwards; }
.toast .toast-close { cursor: pointer; margin-left: 8px; opacity: 0.7; font-size: 16px; }
.toast .toast-close:hover { opacity: 1; }

/* ===== Spinner inline (API key verify) ===== */
.spinner-inline {
  width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #FFFFFF; border-radius: 50%; animation: spin 0.6s linear infinite;
  display: inline-block;
}

/* ===== Loading spinner ===== */
.loading-spinner { animation: spin 0.7s linear infinite; }

/* ===== Input error state ===== */
.input-field.error { border-color: #EF4444 !important; }

/* ===== Drop zone states ===== */
.drop-zone.dragover { border-color: #111111 !important; background: rgba(0,0,0,0.04); transform: scale(1.01); }
.drop-zone.compact { height: 120px; border-radius: 12px; flex-direction: column; gap: 4px; }
.drop-zone.compact .icon { font-size: 24px; }
.drop-zone.compact .text { font-size: 13px; text-align: center; }
.drop-zone.compact .hint { font-size: 12px; }

/* ===== Upload actions visible state ===== */
.upload-actions.visible { display: block; }

/* ===== Photo grid item ===== */
.photo-grid-item {
  position: relative; width: 140px; height: 140px;
  border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.photo-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-grid-item .delete-btn {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; transition: background 150ms; line-height: 1;
}
.photo-grid-item .delete-btn:hover { background: #EF4444; }

/* ===== Photo thumbs (style step) ===== */
.photo-thumbs img {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; border: 3px solid #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.photo-thumbs img + img { margin-left: -12px; }

/* ===== Style cards ===== */
.style-card {
  padding: 20px; border-radius: 16px;
  border: 2px solid transparent; cursor: pointer;
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  display: flex; align-items: center; gap: 14px;
  transition: all 200ms ease-out;
}
.style-card:hover { border-color: #E0E0E0; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.style-card.selected { border-color: #111111 !important; background: #EBEBEB !important; }
.style-card .emoji { font-size: 32px; flex-shrink: 0; line-height: 1; }
.style-card .info { min-width: 0; }
.style-card .name { font-size: 15px; font-weight: 700; }
.style-card .description { font-size: 13px; color: #888888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.style-card.ai-suggested { border-color: #F0F0F0; background: #FAFAFA; }
.style-card.ai-more-card { border: 2px dashed #D0D0D0; background: transparent; justify-content: center; }
.style-card.ai-more-card:hover { border-color: #111111; background: #F5F5F5; }

/* ===== Style tab active state ===== */
.style-tab.active { color: #111111 !important; border-bottom-color: #111111 !important; }

/* ===== Skeleton box (base review) ===== */
.skeleton-box .loading-dots::after {
  content: ''; animation: dots 1.5s steps(4, end) infinite;
}

/* ===== Progress detail dots animation ===== */
.progress-detail::after { content: ''; animation: dots 1.5s steps(4, end) infinite; }

/* ===== Progress ring animations ===== */
.progress-ring-wrap .num { animation: num-breathe 2s ease-in-out infinite; }
.fg-circle { animation: progress-pulse 2s ease-in-out infinite; }

/* ===== Emoticon list items ===== */
.emoticon-list-item {
  padding: 12px 16px; border-radius: 12px;
  background: #FFFFFF; border: 1px solid #F0F0F0;
  display: flex; align-items: flex-start; gap: 10px;
  transition: background 150ms;
}
.emoticon-list-item:hover { background: #F9F9F9; }
.emoticon-list-item .num { font-size: 13px; color: #CCCCCC; width: 24px; flex-shrink: 0; font-weight: 600; }
.emoticon-list-item .content { min-width: 0; flex: 1; }
.emoticon-list-item .label { font-size: 14px; font-weight: 600; color: #111111; }
.emoticon-list-item .prompt-desc { font-size: 12px; color: #AAAAAA; line-height: 1.4; word-break: break-word; }
.emoticon-list-item .edit-btn {
  flex-shrink: 0; width: 28px; height: 28px; border: none; background: none;
  cursor: pointer; font-size: 14px; border-radius: 8px; color: #CCCCCC;
  display: flex; align-items: center; justify-content: center; transition: all 150ms;
}
.emoticon-list-item .edit-btn:hover { background: #F0F0F0; color: #888888; }
.emoticon-list-item.editing { border-color: #111111; background: #F9F9F9; }
.emoticon-list-item .edit-fields { display: none; flex-direction: column; gap: 6px; width: 100%; }
.emoticon-list-item.editing .label,
.emoticon-list-item.editing .prompt-desc { display: none; }
.emoticon-list-item.editing .edit-fields { display: flex; }
.edit-fields input, .edit-fields textarea {
  width: 100%; padding: 6px 10px; border: 1.5px solid #E0E0E0; border-radius: 8px;
  font-size: 13px; font-family: inherit; outline: none;
}
.edit-fields input:focus, .edit-fields textarea:focus { border-color: #111111; }
.edit-fields textarea { height: 48px; resize: vertical; font-size: 12px; }
.edit-fields .edit-actions { display: flex; gap: 6px; justify-content: flex-end; }
.edit-fields .edit-actions button {
  padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: none;
}
.edit-fields .save-btn { background: #111111; color: #FFFFFF; }
.edit-fields .cancel-btn { background: #F0F0F0; color: #666; }

/* ===== List skeleton ===== */
.list-skeleton .skel-item { height: 56px; border-radius: 12px; }

/* ===== Sheet thumbnails ===== */
.sheet-thumb {
  width: 120px; height: 80px; border-radius: 8px;
  overflow: hidden; background: #F5F5F5;
  border: 1px dashed #E5E5E5;
  display: flex; align-items: center; justify-content: center;
  transition: all 300ms ease-out;
}
.sheet-thumb.done { border-style: solid; animation: fadeIn 300ms ease-out; }
.sheet-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Error state for failed sheets */
.sheet-thumb.sheet-error { border-color: #EF4444; color: #EF4444; }
.sheet-thumb.done { cursor: pointer; }
.sheet-thumb.done:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

/* Sheet thumb wrapper */
.sheet-thumb-wrapper { display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Sheet retry button */
.sheet-retry-btn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #E5E5E5; background: #fff;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 200ms;
  color: #666;
}
.sheet-retry-btn:hover { background: #F5F5F5; color: #333; transform: rotate(90deg); }

/* Modal sheet retry button */
.modal-sheet-retry-btn {
  margin-top: 12px; padding: 8px 16px;
  border-radius: 12px; border: 1px solid #E5E5E5;
  background: #fff; cursor: pointer;
  font-size: 14px; color: #666;
  transition: all 200ms;
}
.modal-sheet-retry-btn:hover { background: #F5F5F5; color: #333; }

/* ===== Emoticon cards ===== */
.emoticon-card {
  aspect-ratio: 1; background: #FFFFFF; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06); position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px; transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  overflow: hidden;
}
.emoticon-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.emoticon-card img { width: 80%; height: 80%; object-fit: contain; }
.emoticon-card .card-num { position: absolute; top: 6px; left: 10px; font-size: 11px; font-weight: 500; color: #CCCCCC; }
.emoticon-card .card-label {
  position: absolute; bottom: 6px; left: 0; right: 0;
  font-size: 11px; color: #999999; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 6px;
}

/* ===== Special images ===== */
.special-images .special-item { text-align: center; }
.special-images .special-item img { border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 4px; }
.special-images .special-item .label-text { font-size: 12px; color: #AAAAAA; }

/* ===== Modal open state ===== */
.modal-overlay.open { display: flex; }

/* ===== Loading overlay active state ===== */
.loading-overlay.active { display: flex; }

/* ===== Responsive ===== */
@media (max-width: 639px) {
  .step-dot { width: 24px; height: 24px; font-size: 10px; }
  .step-line { width: 16px; }
  .photo-grid-item { width: 110px; height: 110px; }
  .modal-nav { width: 48px; height: 44px; }
}