@charset "utf-8";



/* --------------------------------------------------------
게시판 목록 스타일 - UXC GALLERY
* board.css 변수 시스템 사용
----------------------------------------------------------*/
.boardListWrap {position:relative;}

/* galleryTadi list */
[data-board="uxc_favicon"] {display:grid;grid-template-columns:repeat(auto-fill, minmax(156px, auto)); grid-gap:20px; scrollbar-width:none;-webkit-box-pack:center;}
[data-board="uxc_favicon"] .cardBox {display:flex; flex-direction:column; position:relative; gap:10px; border-radius:8px; background:var(--board-white); box-shadow:0 0px 0px 1px var(--board-gray-300); opacity:0; transform:translateY(20px); animation:fadeInUp 0.6s ease forwards;}
[data-board="uxc_favicon"] .cardBox.active,
[data-board="uxc_favicon"] .cardBox:hover {z-index:1; transform:translateY(-8px) scale(1.02); box-shadow:0 0px 0px 1px var(--color-prime);}
[data-board="uxc_favicon"] .cardBox .checkBox {position:absolute; z-index:1; top:20px; right:20px; opacity:0; transform:scale(0.8); transition:all 0.2s ease;}
[data-board="uxc_favicon"] .cardBox:hover .checkBox {opacity:1; transform:scale(1);}
[data-board="uxc_favicon"] .cardBox .thumb {display:flex; align-items:center; position:relative; overflow:hidden; border-radius:10px; border:1px solid var(--board-gray-200);}
[data-board="uxc_favicon"] .cardBox .thumb .labelBox {position:absolute; z-index:1; top:6px; left:6px;}
[data-board="uxc_favicon"] .cardBox:hover .thumb .labelBox {transform:translateY(0); opacity:1;}
[data-board="uxc_favicon"] .cardBox .thumb img {width:100%; transition:transform 0.4s ease;}
[data-board="uxc_favicon"] .cardBox:hover .thumb img {transform:scale(1.05);}
[data-board="uxc_favicon"] .cardBox .thumb .youtube_ico {display:flex; justify-content:center; align-items:center; position:absolute; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.3); opacity:0; transition:all 0.3s ease;}
[data-board="uxc_favicon"] .cardBox:hover .thumb .youtube_ico {opacity:1;}
[data-board="uxc_favicon"] .cardBox .thumb .youtube_ico img {width:50px; transform:scale(0.8); transition:transform 0.2s ease;}
[data-board="uxc_favicon"] .cardBox:hover .thumb .youtube_ico img {transform:scale(1);}
[data-board="uxc_favicon"] .cardBox .cardBoxContent {display:flex; flex-direction:column; justify-content:space-between; gap:20px;}
[data-board="uxc_favicon"] .cardBox .cardBoxContent .titleBox {display:flex; flex-direction:column; gap:10px;}
[data-board="uxc_favicon"] .cardBox .cardBoxContent .titleBox .title {display:block; color:var(--board-gray-900); font-size:16px; font-weight:600; line-height:1.2; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
[data-board="uxc_favicon"] .cardBox .cardBoxContent .titleBox .title a {display:flex; flex-direction:column; gap:10px;}
[data-board="uxc_favicon"] .cardBox .cardBoxContent .titleBox .title a strong {font-weight:600; font-size:13px;}
[data-board="uxc_favicon"] .cardBox .cardBoxContent .titleBox .title a strong .bo_current {display:none; padding:2px 8px; border-radius:var(--board-radius-lg); background:var(--color-prime); color:var(--board-white); font-size:11px; font-weight:500;}
[data-board="uxc_favicon"] .cardBox .cardBoxContent .titleBox .title a strong .iconBox {padding:2px 6px; border-radius:10px; background:var(--board-success); color:var(--board-white); font-size:10px; font-weight:600;}
[data-board="uxc_favicon"] .cardBox:hover .cardBoxContent .titleBox .title {color:var(--color-prime);}
[data-board="uxc_favicon"] .cardBox .cardBoxContent .titleBox .desc {display:block; color:var(--board-gray-500); font-size:13px; font-weight:400; text-align:left; line-height:1.4; opacity:0.8; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
[data-board="uxc_favicon"] .cardBox:hover .cardBoxContent .titleBox .desc {opacity:1;}
[data-board="uxc_favicon"] .cardBox .cardBoxContent .infoBox {justify-content:space-between; align-items:center; display:flex;}
[data-board="uxc_favicon"] .cardBox .cardBoxContent .infoBox .user {display:flex; justify-content:center; align-items:center; width:30px; height:30px; background:var(--board-gray-300); border-radius:50%; overflow:hidden; transition:transform 0.2s ease;}
[data-board="uxc_favicon"] .cardBox:hover .cardBoxContent .infoBox .user {transform:scale(1.1);}
[data-board="uxc_favicon"] .cardBox .cardBoxContent .infoBox .user img {width:100%; height:100%; border-radius:50%; object-fit:cover;}
[data-board="uxc_favicon"] .cardBox .cardBoxContent .infoBox .info {gap:10px; display:flex; align-items:center;}
[data-board="uxc_favicon"] .cardBox .cardBoxContent .infoBox .info dl {width:auto; border:0; margin:0; display:flex; align-items:center; gap:4px;}
[data-board="uxc_favicon"] .cardBox .cardBoxContent .infoBox .info dl dt {color:var(--board-gray-500); font-size:14px;}
[data-board="uxc_favicon"] .cardBox .cardBoxContent .infoBox .info dl dd {color:var(--board-gray-600); font-size:13px; margin:0;}

/* 애니메이션 키프레임 */
@keyframes fadeInUp {
  0% {opacity:0; transform:translateY(20px);}
  100% {opacity:1; transform:translateY(0);}
}

/* 로딩 애니메이션 */
[data-board="uxc_favicon"].loading .cardBox {animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse {
  0%, 100% {opacity:0.4;}
  50% {opacity:0.8;}
}

/* 반응형 애니메이션 조정 */
@media (max-width: 768px) {
  [data-board="uxc_favicon"] .cardBox:hover {transform:translateY(-4px) scale(1.01);}
  [data-board="uxc_favicon"] .cardBox:hover .thumb img {transform:scale(1.02);}
}

@media (prefers-reduced-motion: reduce) {
  [data-board="uxc_favicon"] .cardBox {animation:none; opacity:1; transform:none;}
  [data-board="uxc_favicon"] .cardBox:hover {transform:none; transition:box-shadow 0.2s ease;}
}

/* --------------------------------------------------------
파비콘 에디터 스타일
----------------------------------------------------------*/

/* 파비콘 에디터 컨테이너 */
.favicon-editor-container {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 30px;
  margin-bottom: 20px;
  padding: 20px;
  background: var(--board-white);
  border: 1px solid var(--board-gray-200);
  border-radius: var(--board-radius-lg);
}

/* 왼쪽: 드로잉 영역 + 미리보기 */
.editor-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 캔버스 영역 */
.canvas-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: var(--board-gray-50);
  border: 1px solid var(--board-gray-300);
  border-radius: var(--board-radius-md);
}

#favicon-canvas {
  border: 1px solid var(--board-gray-400);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  image-rendering: pixelated;
  cursor: crosshair;
}

/* 미리보기 영역 */
.preview-area {
  display: flex;
  justify-content: center;
  padding: 20px;
}

/* 브라우저 탭 미리보기 */
.browser-tab-preview {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background: var(--board-white);
  border: 1px solid var(--board-gray-200);
  border-radius: var(--board-radius-md);
}

.browser-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: var(--board-gray-200);
  border-radius: 8px 8px 0 0;
  box-shadow: 0 1px 3px var(--board-overlay-400);
  transition: background 0.2s ease;
}

.browser-tab:hover {
  background: var(--board-gray-300);
}

.browser-tab canvas {
  image-rendering: pixelated;
  flex-shrink: 0;
}

.browser-tab .tab-title {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--board-gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-tab .tab-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--board-gray-600);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.browser-tab .tab-close:hover {
  background: var(--board-overlay-400);
  color: var(--board-gray-800);
}

/* 오른쪽: 툴바 */
.toolbar-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background: var(--board-gray-50);
  border: 1px solid var(--board-gray-200);
  border-radius: var(--board-radius-md);
}

.tool-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tool-group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--board-gray-800);
}

/* AI 파비콘 생성 섹션 */
.ai-generator-section {
  margin-bottom: 20px;
}

.ai-generator-section .tool-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--board-gray-800);
}

.ai-generator-section .tool-group-title svg {
  color: var(--color-prime);
}

.ai-generator-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ai-prompt-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--board-gray-300);
  border-radius: var(--board-radius-sm);
  background: var(--board-white);
  color: var(--board-gray-900);
  font-size: 14px;
  transition: all 0.2s ease;
}

.ai-prompt-input:focus {
  outline: none;
  border-color: var(--color-prime);
  box-shadow: 0 0 0 3px rgba(var(--color-prime-rgb, 0, 123, 255), 0.1);
}

.ai-prompt-input::placeholder {
  color: var(--board-gray-500);
}

.btn-generate-ai {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--color-prime);
  border: none;
  border-radius: var(--board-radius-sm);
  color: var(--board-white);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-generate-ai:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-generate-ai:active {
  transform: translateY(0);
}

.btn-generate-ai:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-generate-ai svg {
  width: 18px;
  height: 18px;
}

.ai-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--board-blue-50, #E3F2FD);
  border: 1px solid var(--board-blue-200, #90CAF9);
  border-radius: var(--board-radius-sm);
  color: var(--board-blue-700, #1976D2);
  font-size: 13px;
}

.ai-loading .loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--board-blue-200, #90CAF9);
  border-top-color: var(--board-blue-600, #1E88E5);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.ai-error {
  padding: 10px 14px;
  background: var(--board-red-50, #FFEBEE);
  border: 1px solid var(--board-red-200, #EF9A9A);
  border-radius: var(--board-radius-sm);
  color: var(--board-red-700, #D32F2F);
  font-size: 13px;
  line-height: 1.5;
}

/* 도구 버튼 그리드 (2x2) */
.tool-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/* 툴 버튼 */
.tool-buttons .tool-btn,
.editor-controls .control-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--board-white);
  border: 1px solid var(--board-gray-300);
  border-radius: var(--board-radius-sm);
  color: var(--board-gray-700);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 편집 버튼도 그리드 (2x2) */
.editor-controls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.tool-btn:hover,
.control-btn:hover:not(:disabled) {
  background: var(--board-gray-100);
  border-color: var(--color-prime);
  color: var(--color-prime);
  transform: translateX(2px);
}

.tool-btn.active,
.control-btn.active {
  background: var(--color-prime);
  border-color: var(--color-prime);
  color: var(--board-white);
}

.tool-btn:disabled,
.control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tool-btn svg,
.control-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.tool-btn span,
.control-btn span {
  flex: 1;
  text-align: left;
}

/* 색상 컨트롤 */
#color-picker {
  width: 100%;
  height: 40px;
  border: 1px solid var(--board-gray-300);
  border-radius: var(--board-radius-sm);
  cursor: pointer;
}

/* 색상 팔레트 */
.color-palette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--board-gray-300);
  border-radius: var(--board-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.color-swatch:hover {
  transform: scale(1.1);
  border-color: var(--board-gray-600);
}

.color-swatch.active {
  border-color: var(--color-prime);
  border-width: 3px;
  transform: scale(1.15);
}

/* 최근 사용 색상 (빈 박스) */
.color-swatch.recent-color {
  background: var(--board-gray-100);
  position: relative;
}


/* 단축키 안내 */
.shortcuts-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: var(--board-gray-600);
}

.shortcuts-info ul li {
  padding: 4px 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.shortcuts-info ul li strong {
  color: var(--board-gray-800);
  font-weight: 600;
  font-family: monospace;
  background: var(--board-gray-200);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
}

/* 하단: 다운로드 섹션 */
.download-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background: var(--board-white);
  border: 1px solid var(--board-gray-200);
  border-radius: var(--board-radius-md);
  margin-bottom: 30px;
}

.download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--color-prime);
  border: none;
  border-radius: var(--board-radius-sm);
  color: var(--board-white);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.download-btn:hover {
  background: var(--color-prime-hover, #0056b3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.download-btn:active {
  transform: translateY(0);
}

.download-btn svg {
  width: 20px;
  height: 20px;
}

.btn-png {
  background: var(--board-success, #28a745);
}

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

.btn-ico {
  background: var(--board-info, #17a2b8);
}

.btn-ico:hover {
  background: #138496;
}

/* 로딩 표시 */
.export-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px;
  background: var(--board-gray-100);
  border-radius: var(--board-radius-sm);
  font-size: 13px;
  color: var(--board-gray-700);
}

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--board-gray-300);
  border-top-color: var(--color-prime);
  border-radius: 50%;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}

/* 반응형 디자인 */
@media (max-width: 1024px) {
  .favicon-editor-container {
    grid-template-columns: 1fr;
  }

  .toolbar-section {
    max-width: none;
  }

  .download-section {
    flex-wrap: wrap;
  }

  .download-btn {
    flex: 1;
    min-width: 200px;
  }
}

@media (max-width: 768px) {
  .favicon-editor-container {
    padding: 15px;
    gap: 20px;
  }

  .browser-tab-preview {
    max-width: 100%;
  }

  .canvas-wrapper {
    padding: 10px;
  }

  #favicon-canvas {
    max-width: 100%;
    height: auto;
  }

  .preview-section {
    flex-direction: column;
  }

  /* 도구 영역 */
  .toolbar-section {
    display: grid;
    gap: 15px;
  }

  .tool-group {
    width: 100%;
  }

  /* 도구 버튼 - 2x2 그리드 유지 */
  .tool-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* 편집 버튼 - 2x2 그리드 유지 */
  .editor-controls {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  /* AI 생성 영역 - 반응형 */
  .ai-input-group {
    flex-direction: column;
  }

  .btn-generate-ai {
    width: 100%;
  }

  /* 색상 팔렛트 - 반응형 조정 */
  .color-palette {
    grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
    gap: 6px;
  }

  .color-swatch {
    width: 100%;
    height: 32px;
    min-width: 32px;
  }

  /* 다운로드 버튼 */
  .download-section {
    flex-direction: column;
  }

  .download-btn {
    width: 100%;
  }

  .shortcuts-info {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .tool-btn span,
  .control-btn span {
    display: none;
  }

  .tool-btn,
  .control-btn {
    padding: 8px;
    justify-content: center;
  }

  .download-buttons {
    gap: 6px;
  }

  .download-btn {
    padding: 8px 12px;
    font-size: 13px;
  }
}