/* ============================================= */
/*          NoaDot v5.1x - 전체 스타일 시트         */
/* ============================================= */

/* ===== 1. 기본 및 레이아웃 스타일 ===== */
:root {
  --padding: 15px;
  --primary-color: #4A90E2; /* 신규 코드에서 사용된 변수 추가 정의 */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-image: url('image.png');
  background-size: cover;
  background-attachment: fixed;
  background-color: #f4f7f9;
  margin: 0;
  color: #333;
  overflow: hidden;
}

section {
  background-color: rgba(255, 255, 255, 0.9);
  padding: var(--padding);
  border-radius: 8px;
  margin-bottom: var(--padding);
}

h1, h2, h3, h4 {
  margin-top: 0;
  padding-bottom: 10px;
}
h1 { padding-bottom: 0; font-size: 1.5em; }
h2 { border-bottom: 1px solid #ddd; }
h3 { display: inline-block; padding: 0; margin: 0; }

.app-container {
  display: flex;
  gap: var(--padding);
  padding: var(--padding);
  height: 100vh;
  box-sizing: border-box;
}

.left-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.right-panel { width: 420px; flex-shrink: 0; overflow-y: auto; height: 100%; }

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--padding);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  margin-bottom: var(--padding);
}
.main-header h1 { margin: 0; line-height: 1; }

.external-links { display: flex; gap: 15px; align-items: center; }
.external-links img { height: 28px; vertical-align: middle; transition: transform 0.2s; }
.external-links img:hover { transform: scale(1.1); }

.left-panel-content { display: flex; flex: 1; min-height: 0; gap: var(--padding); }
.app-container.text-mode .left-panel-content { flex-direction: row; }
.app-container.image-mode .left-panel-content { flex-direction: column; }

.hidden { display: none !important; }

/* ===== 2. 컴포넌트별 상세 스타일 ===== */

/* --- 2-1. 결과 & 캔버스 영역 --- */
#result-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  background: none;
  border: none;
  margin: 0;
}
#convertedCanvasContainer {
  flex: 1;
  overflow: hidden;
  border: 1px solid #ccc;
  position: relative;
  cursor: grab;
  border-radius: 8px;
  background-color: #e0e0e0;
  background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border-color 0.2s;
}
#convertedCanvasContainer:active { cursor: grabbing; }
#convertedCanvasContainer.drag-over { border-color: #2196F3; border-style: dashed; }

#placeholder-ui { display: flex; flex-direction: column; justify-content: center; align-items: center; color: #888; text-align: center; pointer-events: auto; }
.upload-icon { width: 64px; height: 64px; fill: #aaa; margin-bottom: 10px; }
#convertedCanvasContainer.has-image #placeholder-ui { display: none; }

#convertedCanvas { image-rendering: pixelated; transform-origin: center; box-shadow: 0 0 10px rgba(0,0,0,0.2); max-width: 100%; max-height: 100%; display: none; }
#convertedCanvasContainer.has-image #convertedCanvas { display: block; }

#top-ui-container { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; z-index: 11; pointer-events: none; }
.top-right-ui { display: flex; align-items: center; gap: 10px; }
#metadata-info-display { background-color: rgba(255, 221, 87, 0.85); color: #333; padding: 3px 8px; border-radius: 5px; font-size: 13px; font-weight: bold; border: 1px solid rgba(0,0,0,0.2); display: none; pointer-events: auto; }
#metadata-info-display.visible { display: block; }
#zoomLevelDisplay { background-color: rgba(0, 0, 0, 0.5); color: white; padding: 2px 8px; border-radius: 5px; font-size: 14px; pointer-events: auto; }
#centerBtn { position: absolute; bottom: 10px; right: 10px; z-index: 10; padding: 5px 10px; cursor: pointer; display: none; }
#convertedCanvasContainer.has-image #centerBtn { display: block; }

#loading-indicator {
    width: 24px;
    height: 24px;
    
    /* 1. 링의 전체 배경 (연하고 투명한 네이비/회색) */
    /* 기존: border: 3px solid rgba(255, 255, 255, 0.3); */
    border: 3px solid rgba(44, 62, 80, 0.3); 

    /* 2. 뱅글뱅글 돌아가는 부분 (진한 네이비) */
    /* 기존: border-top: 3px solid #fff; */
    border-top: 3px solid #2C3E50; 
    
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: none;
    z-index: 11;
}
#loading-indicator.visible { display: block; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.all-toggle-btn {
  width: 56px !important;
  height: 56px !important;
  border: 2px solid #666 !important;
  background-color: #fff !important;
  color: #333 !important;
  font-size: 28px !important;
  font-weight: bold !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  
  cursor: pointer;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0; 
  box-sizing: border-box; 
}

/* --- 2-2. 텍스트 에디터 --- */
#text-editor-panel { display: none; flex-direction: column; flex: 1; min-width: 0; background-color: rgba(255, 255, 255, 0.9); border-radius: 8px; }
.app-container.text-mode #text-editor-panel { display: flex; }
.editor-toolbar { padding: 8px; background-color: #f0f0f0; border-bottom: 1px solid #ccc; border-radius: 8px 8px 0 0; }
.editor-toolbar button { margin-right: 5px; padding: 4px 8px; }
.editor-toolbar button.active { background-color: #cce5ff; border-color: #b8daff; }
#editor-textarea { flex-grow: 1; width: 100%; box-sizing: border-box; border-radius: 0 0 8px 8px; border: none; padding: 10px; resize: none; font-size: 16px; background-color: white; }

/* --- 2-3. 컨트롤 패널 공통 --- */
.control-group { display: flex; flex-direction: column; }
.control-group label { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-weight: bold; }
.control-group input[type="range"] { width: 100%; }
.reset-btn { padding: 0; border: none; background: none; cursor: pointer; width: 18px; height: 18px; fill: #888; transition: transform 0.2s, fill 0.2s; }
.reset-btn:hover { fill: #333; transform: rotate(-90deg); }
fieldset:disabled { opacity: 0.6; pointer-events: none; }
.option-section, .main-mode-switcher, .mode-switcher { padding: var(--padding); background-color: rgba(255, 255, 255, 0.9); border-radius: 8px; margin-bottom: var(--padding); }
.checkbox-group { flex-direction: row; align-items: center; gap: 8px; }
.checkbox-group input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.checkbox-group label { margin: 0; font-weight: normal; }

.sub-options { margin-top: 10px; margin-left: 20px; padding-left: 15px; border-left: 2px solid #e0e0e0; display: grid; gap: 10px; }
.sub-options .control-group { margin-bottom: 0; }

.radio-toggle { display: flex; gap: 2px; padding: 2px; background-color: white; border: 1px solid #ccc; border-radius: 8px; }
.radio-toggle.main-toggle label { padding: 12px; font-size: 16px; }
.radio-toggle input[type="radio"] { display: none; }
.radio-toggle label { flex: 1 1 0; text-align: center; padding: 10px; cursor: pointer; background-color: #f0f0f0; color: #555; transition: background-color 0.2s; user-select: none; border-radius: 5px; }
.radio-toggle input[type="radio"]:checked + label { background-color: #337ab7; color: white; font-weight: bold; }

/* --- 2-4. 이미지 & 텍스트 컨트롤 --- */
.image-controls, #text-controls { display: grid; grid-template-columns: 1fr; gap: 15px; }
.image-controls select, #text-controls select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; background-color: white; }
.image-info { display: none; background-color: #e9ecef; padding: 8px 12px; border-radius: 4px; font-size: 14px; color: #555; line-height: 1.5; }
.app-container.image-loaded .image-info, .app-container.text-mode .image-info { display: block; }
.app-container.text-mode .image-only-info { display: none; }

#pixel-scale-controls.scale-control-group { gap: 12px; }
#pixel-scale-controls .control-group { margin-bottom: -5px; }
.scale-control-group { gap: 8px; }
.scale-input-wrapper { display: flex; align-items: center; gap: 8px; }
.scale-label { width: 30px; font-size: 14px; }
.scale-input-wrapper input[type="number"] { flex-grow: 1; text-align: center; }
.scale-buttons { display: flex; }
.scale-mod-btn { padding: 4px 6px; font-size: 12px; line-height: 1; min-width: 30px; border: 1px solid #ccc; background-color: #f0f0f0; }
.scale-mod-btn:hover { background-color: #e0e0e0; }
.scale-mod-btn:first-child { border-radius: 4px 0 0 4px; }
.scale-mod-btn:last-child { border-radius: 0 4px 4px 0; }
.scale-mod-btn:not(:last-child) { border-right: none; }

.font-controls { display: flex; gap: 8px; }
.font-controls select { flex-grow: 1; }
#uploadFontBtn { flex-shrink: 0; padding: 0 12px; }
#text-controls .color-picker-group { flex-direction: row; justify-content: space-between; align-items: center; }
#text-controls select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 8px; padding-right: 30px; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right .7em top 50%; background-size: .65em auto; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: none; }

/* --- 2-5. 팔레트 및 색상 관련 --- */
.palette-collection { display: grid; grid-template-columns: 1fr; gap: 15px; background: none; padding: 0; }
.palette-category { padding: var(--padding); background-color: rgba(255, 255, 255, 0.9); border-radius: 8px; }
.palette-section { padding: 15px; margin-top: 15px; border: 1px solid #eee; background-color: #fff; border-radius: 5px; }
.user-palette h2 { margin-bottom: 15px; }

summary { display: flex; align-items: center; gap: 10px; background-color: #e9ecef; padding: 10px; border-radius: 5px; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '▶'; font-size: 0.8em; transition: transform 0.2s; margin-left: auto; }
details[open] > summary::after { transform: rotate(90deg); }
.palette-status-icon { font-size: 1.2em; font-weight: bold; color: #ccc; transition: color 0.2s; }
.palette-status-icon.active { color: #4CAF50; }

.palette-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.color-container { display: flex; flex-direction: column; align-items: center; margin-bottom: 5px; }
.color-button { width: 56px; height: 56px; border: 2px solid #666; cursor: pointer; position: relative; box-sizing: border-box; }
.color-button.off { border-color: #ccc; opacity: 0.5; }
.color-button.off::after { content: 'X'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 32px; font-weight: bold; text-shadow: 1px 1px 2px black; }
.color-name { font-size: 10px; text-align: center; margin-top: 4px; width: 56px; word-break: break-all; }
button.toggle-all { cursor: pointer; }
.toggle-all-palette { width: 56px; height: 56px; border: 2px solid #666; background-color: #fff; color: #333; font-size: 28px; font-weight: bold; display: flex; justify-content: center; align-items: center; }

/* 팔레트 사용량 분석 */
.color-button.unused { border-style: dashed; border-color: #999; }
.color-button.unused::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(120, 120, 120, 0.5); z-index: 1; }
.usage-count { background-color: rgba(0, 0, 0, 0.7); color: white; font-size: 10px; font-weight: bold; padding: 0 3px; border-radius: 3px; line-height: 1.4; z-index: 2; }
.color-button > .usage-count { position: absolute; bottom: 0; right: 2px; }
.added-color-item > .usage-count { margin-left: auto; align-self: center; }

/* 사용자 정의 색상 추가 */
.add-color-form { display: flex; flex-direction: column; gap: 10px; }
.add-color-input-group { display: flex; gap: 5px; }
.add-color-input-group input { width: 100%; }
.add-color-separator { text-align: center; color: #888; font-size: 14px; margin: -5px 0; }
.input-feedback { font-size: 12px; color: #d9534f; padding: 4px 0 0 2px; min-height: 1.2em; display: block; transition: color 0.2s; }
.placeholder-section { padding: 20px; text-align: center; color: #888; background-color: #f9f9f9; border: 1px dashed #ccc; border-radius: 5px; }
#addedColors {
  display: flex !important;
  flex-direction: column !important; /* 세로 정렬 */
  gap: 8px !important;
  padding: 10px;
  background: #FAFAFA;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* 2. 개별 아이템: 가로 바 형태 */
.added-color-item {
  display: flex !important; /* flex로 내용물 가로 정렬 */
  align-items: center;
  width: 100%;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* 3. 색상 스와치 (왼쪽 네모) */
.added-color-item .added-color-swatch {
  width: 40px !important;
  height: 40px !important;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 4px;
  margin-right: 12px;
  flex-shrink: 0;
  cursor: pointer;
}

.added-color-item .added-color-info {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  flex: 1; /* 남은 공간 차지 */
  line-height: 1.3;
}

.color-hex {
  font-family: monospace;
  font-weight: bold;
  font-size: 14px;
  color: #333;
}

/* 5. 삭제 버튼 [-] 스타일 */
.added-color-item .remove-color-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px; /* 배지와의 간격 */
  position: static !important; /* 절대 위치 해제 */
  opacity: 1 !important;
}

.added-color-item .remove-color-btn:hover {
  background-color: #e0e0e0;
  color: #d00;
}

/* 6. 사용자 팔레트 전용 배지 스타일 (삭제 버튼 앞에 위치) */
.added-color-item .usage-badge {
  position: static !important; /* 절대 위치 해제 (흐름 따름) */
  display: inline-block;
  background-color: #333; /* 검은색 배경 */
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: bold;
  margin-left: auto; /* 오른쪽으로 밀어버림 (텍스트와 분리) */
  margin-right: 5px; /* 버튼과의 간격 */
  box-shadow: none;
  border: none;
  z-index: auto;
}

.added-color-item.off { background-color: #f0f0f0; opacity: 0.6; }
.added-color-swatch { width: 48px; height: 24px; border: 1px solid #888; flex-shrink: 0; cursor: pointer; }
.added-color-info { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.color-info-hex { font-weight: bold; font-size: 13px; font-family: 'Courier New', Courier, monospace; }
.color-info-rgb { font-size: 11px; color: #666; }
.delete-color-btn { padding: 2px 8px; cursor: pointer; font-size: 16px; font-weight: bold; border: 1px solid #ccc; background-color: #f0f0f0; border-radius: 4px; line-height: 1; }
.delete-color-btn:hover { background-color: #e0e0e0; border-color: #bbb; }
.reset-all-colors-btn { width: 100%; padding: 8px; margin-top: 15px; background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; border-radius: 4px; cursor: pointer; font-weight: bold; transition: background-color 0.2s; }
.reset-all-colors-btn:hover { background-color: #f1b0b7; }

/* 팔레트 가져오기/내보내기 */
.color-code-section { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.color-code-section textarea { width: 100%; min-height: 60px; resize: vertical; box-sizing: border-box; }
.color-code-section button { width: fit-content; padding: 5px 10px; }
.button-group-horizontal { display: flex; gap: 10px; }
.button-group-horizontal button { flex-grow: 1; }

/* --- 2-6. 분석 및 추천 관련 --- */
/* (v5.0, v4.5 스타일 통합) */
.analyze-button {
  width: 100%;
  padding: 10px;
  font-size: 15px;
  font-weight: bold;
  color: white;
  background-color: #5cb85c;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin: 5px 0 10px 0;
}
.analyze-button:hover:not(:disabled) { background-color: #4cae4c; }
.analyze-button:disabled { background-color: #ccc; cursor: not-allowed; }

.recommendation-report-area { display: flex; flex-direction: column; gap: 20px; margin-top: 15px; }
.recommendation-group { border: 1px solid #eee; border-radius: 5px; padding: 10px; background-color: #fcfcfc; }
.recommendation-group h4 { margin: 0 0 12px 0; padding: 0 0 8px 0; border-bottom: 1px solid #ddd; font-size: 14px; }
.recommendation-group-items { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; padding-right: 5px; }
.recommendation-item { display: flex; align-items: center; gap: 8px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 5px; font-size: 12px; }
.recommendation-item .recommendation-info { display: flex; align-items: center; gap: 8px; }
.recommendation-swatch { width: 24px; height: 24px; border: 1px solid #888; flex-shrink: 0; }
.recommendation-add-btn { padding: 4px 8px; cursor: pointer; font-size: 14px; font-weight: bold; border: none; background: none; color: #007bff; transition: color 0.2s; }
.recommendation-add-btn:hover { color: #0056b3; }
.recommendation-tag { font-size: 10px; padding: 2px 5px; background-color: #e9ecef; border-radius: 3px; color: #495057; white-space: nowrap; }

/* --- 2-7. 기타 UI 개선 --- */
.language-switcher { display: flex; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; }
.language-switcher button { background-color: #f0f0f0; border: none; padding: 6px 12px; cursor: pointer; color: #555; font-size: 13px; font-weight: bold; transition: background-color 0.2s; }
.language-switcher button:not(:last-child) { border-right: 1px solid #ccc; }
.language-switcher button:hover { background-color: #e0e0e0; }
.language-switcher button.active { background-color: #337ab7; color: white; }

.tooltip-box { position: fixed; background-color: rgba(0, 0, 0, 0.85); color: white; padding: 8px 12px; border-radius: 5px; font-size: 13px; line-height: 1.5; max-width: 300px; z-index: 9999; pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
.tooltip-box.visible { opacity: 1; transform: translateY(0); }

.download-section #downloadBtn { width: 100%; padding: 10px; font-size: 16px; font-weight: bold; color: white; background-color: #337ab7; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; margin-bottom: 15px; }
.download-section #downloadBtn:hover { background-color: #286090; }
.download-section #downloadBtn:disabled { background-color: #ccc; cursor: not-allowed; }

/* ===== 3. 레거시 스타일 (하단 팝업 갤러리) ===== */
/* 참고: 이 스타일은 새로운 중앙 팝업으로 대체될 수 있습니다. */
.recommendation-gallery-popup { position: fixed; bottom: 0; left: 0; right: 0; background-color: rgba(245, 245, 247, 0.95); backdrop-filter: blur(8px); border-top: 1px solid #ddd; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1); padding: 16px; z-index: 1000; display: flex; flex-direction: row; align-items: flex-start; gap: 24px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
.gallery-section { display: inline-block; vertical-align: top; flex-shrink: 0; width: 320px; white-space: normal; }
.gallery-section-title { margin: 0 0 12px 4px; font-size: 14px; font-weight: 600; color: #333; border-left: 3px solid #4a90e2; padding-left: 8px; }
.gallery-section-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.style-thumbnail { cursor: pointer; border: 1px solid #ccc; border-radius: 4px; overflow: hidden; transition: all 0.2s ease-in-out; background-color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.style-thumbnail:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-color: #4a90e2; }
.style-thumbnail img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid #eee; }
.style-thumbnail span { display: block; padding: 8px; font-size: 12px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== 4. 반응형 스타일 ===== */
@media (max-width: 1100px) {
  body { overflow: auto; }
  .app-container { flex-direction: column; height: auto; }
  .right-panel { width: 100%; height: auto; overflow-y: visible; }
  .app-container.text-mode .left-panel-content { flex-direction: column; }
}

/* =========================================
   프리셋 팝업 및 카드 스타일 (New - Grid 버전)
   ========================================= */

/* 팝업 컨테이너 (배경) */
#preset-popup-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
}

/* 팝업 본문 */
.preset-popup-content {
  background: white;
  width: 80%;
  max-width: 900px;
  height: auto;
  max-height: 80vh;
  border-radius: 12px;
  padding: 25px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
}

/* 스크롤 영역 & 그리드 레이아웃 */
.preset-scroll-wrapper {
  flex: 1;
  overflow-y: auto;
  display: grid;
  /* 카드 크기 자동 조절 (최소 160px) */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-auto-rows: min-content;
  align-content: start; 
  gap: 20px;
  padding: 10px;
}

/* 프리셋 카드 디자인 */
.preset-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.preset-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

/* 썸네일 래퍼 (배지 위치 기준점) */
.preset-thumb-wrapper {
    position: relative;
    width: 100%;
    /* aspect-ratio: 1 / 1;  <-- [삭제] 정사각형 강제 제거 */
    height: auto;         /* [추가] 높이 자동 */
    min-height: 100px;    /* 최소 높이 확보 */
    margin-bottom: 10px;
    border-radius: 6px;
    overflow: auto;
    border: 1px solid #eee;
    background-color: #f8f8f8; /* 배경색 추가 (투명 이미지 대비) */
    display: flex;             /* 중앙 정렬 */
    justify-content: center;
    align-items: center;
}

.preset-thumb-wrapper canvas {
    /* 캔버스가 너무 크면 카드 너비에 맞춤 */
    max-width: 100%;
    height: auto;
    display: block;
}

/* [핵심] 태그 배지 스타일 */
.preset-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  color: white;
  font-size: 11px;
  font-weight: bold;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 고정 태그 (파란색) */
.preset-badge.fixed {
  background-color: #4A90E2;
}

/* 추천 태그 (빨간색 - '강력 추천' 스타일) */
.preset-badge.recommended {
  background-color: #FF595E;
}

/* 프리셋 이름 */
.preset-card h4 {
  font-size: 14px;
  margin: 0;
  text-align: center;
  color: #333;
  font-weight: 600;
  word-break: keep-all; /* 단어 단위 줄바꿈 */
}

/* 팝업 닫기 버튼 */
.preset-popup-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.preset-popup-close:hover {
  color: #333;
}

/* =========================================
   기타 핫픽스 (색상 추천, 팔레트 배지 등)
   ========================================= */

/* 팔레트 배지 위치 조정 (오른쪽 하단) */
.usage-badge {
    position: absolute;
    top: auto;       /* 위쪽 배치 취소 */
    bottom: 2px;     /* 아래쪽 배치 */
    right: 2px;      /* 오른쪽 배치 */
    
    background-color: rgba(0, 0, 0, 0.7); /* 반투명 검은색 배경 */
    color: white;
    
    font-size: 10px;
    font-family: 'Pretendard', sans-serif;
    font-weight: bold;
    
    padding: 1px 4px;
    border-radius: 4px;
    border: none;    /* 테두리 제거 */
    box-shadow: none;
    
    z-index: 20;
    pointer-events: none;
    line-height: 1.2;
    min-width: auto; /* 최소 너비 해제 */
}

/* 추천 색상 아이콘(미리보기) 복구 */
.rec-color-box {
    width: 32px;       /* 크기 고정 */
    height: 32px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.2);
    flex-shrink: 0;    /* 찌그러짐 방지 */
    margin-right: 10px;
    display: block !important; /* 강제 표시 */
}

/* 추천 항목 리스트 스타일 */
.recommendation-item {
    display: flex;
    align-items: center;
    padding: 8px;
    width: 100%;
    border: 1px solid #eee;
    border-radius: 6px;
    background: white;
    margin-bottom: 5px;
}

.rec-text-info {
    flex: 1;
    display: flex;
    align-items: center; /* 텍스트 수직 정렬 */
    gap: 10px;
}

/* RGB 텍스트 */
.rec-hex { 
    font-weight: bold; 
    font-size: 13px; 
    color: #333; 
}

/* 타입 설명 (밝은 영역 등) */
.rec-desc { 
    font-size: 11px; 
    color: #666; 
    background: #eee; 
    padding: 2px 6px; 
    border-radius: 4px; 
}

/* 사용자 추가 색상 스와치 설정 (배지 위치 기준점) */
.added-color-swatch {
    position: relative !important; /* 배지가 이 안에 위치하려면 필수 */
}

/* ===== 5. 신규 모달 스타일 (v6.0) ===== */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000; /* 기존 팝업보다 높게 */
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(3px);
}

.modal-content {
  background: white;
  padding: 25px;
  border-radius: 10px;
  width: 320px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  animation: popIn 0.2s ease-out;
}

@keyframes popIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-buttons-vertical { display: flex; flex-direction: column; gap: 10px; }
.modal-buttons-vertical button { padding: 12px; font-size: 14px; cursor: pointer; border-radius: 6px; border: 1px solid #ccc; background: #fff; transition: all 0.2s; }
.modal-buttons-vertical button:hover { background: #f0f0f0; transform: translateY(-2px); }
#btn-save-to-file { background-color: #4A90E2; color: white; border: none; }
#btn-save-to-session { background-color: #FF595E; color: white; border: none; }

.modal-buttons-horizontal { display: flex; gap: 10px; justify-content: center; }
.modal-buttons-horizontal button { flex: 1; padding: 10px; cursor: pointer; border-radius: 6px; border: none; color: white; font-weight: bold; }
#btn-confirm-save-file { background-color: #28a745; }
.secondary-btn { background-color: #6c757d !important; color: white !important; }

.full-width-input {
  width: 100%; padding: 10px; box-sizing: border-box;
  border: 2px solid #eee; border-radius: 6px; font-size: 16px;
}
.full-width-input:focus { border-color: #4A90E2; outline: none; }

.neon-gold {
    color: #FFFFFF !important; /* 글자색: 흰색 */
    
    /* 텍스트 테두리 (Shadow Trick) */
    /* -webkit-text-stroke는 일부 브라우저에서 흐릿할 수 있어 shadow로 테두리를 만듭니다 */
    text-shadow: 
        /* 1. 갈색 테두리 (상하좌우 1px씩) - 어두운 Y계열, 채도 낮음 (#5D4037 등) */
        -1px -1px 0 #5D4037,  
         1px -1px 0 #5D4037,
        -1px  1px 0 #5D4037,
         1px  1px 0 #5D4037,
         
        /* 2. 밝은 노란색 네온 광채 (Glow) */
        0 0 5px #FFEB3B,   /* 안쪽 광채 (밝은 노랑) */
        0 0 10px #FBC02D;  /* 바깥쪽 광채 (진한 노랑) */
        
    font-weight: bold;
    transition: all 0.3s ease;
}

.neon-purple-light {
    color: #FFFFFF !important;
    text-shadow: -1px -1px 0 #4A148C, 1px -1px 0 #4A148C, -1px 1px 0 #4A148C, 1px 1px 0 #4A148C,
                 0 0 5px #E040FB, 0 0 10px #D500F9; /* 밝은 자주색 광채 */
    font-weight: bold;
    transition: all 0.3s ease;
}

/* [신규] Dark Purple 네온 (업스케일 3x용) */
.neon-purple-dark {
    color: #FFFFFF !important;
    text-shadow: -1px -1px 0 #311B92, 1px -1px 0 #311B92, -1px 1px 0 #311B92, 1px 1px 0 #311B92,
                 0 0 5px #7C4DFF, 0 0 10px #651FFF; /* 깊은 보라색 광채 */
    font-weight: bold;
    transition: all 0.3s ease;
}

/* [신규] Red 네온 (업스케일 + 배율 중복용) - 경고성 강렬함 */
.neon-red {
    color: #FFFFFF !important;
    text-shadow: -1px -1px 0 #B71C1C, 1px -1px 0 #B71C1C, -1px 1px 0 #B71C1C, 1px 1px 0 #B71C1C,
                 0 0 5px #FF5252, 0 0 10px #FF1744; /* 붉은색 광채 */
    font-weight: bold;
    transition: all 0.3s ease;
}


/* 변환 크기 텍스트 기본 스타일 강화 (전환 효과) */
#convertedDimensions {
    display: inline-block;
    transition: color 0.3s, text-shadow 0.3s;
    padding: 0 4px;
}

.main-big-btn {
    width: 100%;
    padding: 20px 0;      /* 위아래 여백을 크게 */
    font-size: 22px;      /* 폰트 키움 */
    font-weight: 800;     /* 아주 굵게 */
    color: white;
    background-color: #5cb85c; /* 연두색 */
    border: none;
    border-radius: 12px;  /* 둥근 모서리 (이미지 참고) */
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 살짝 그림자 */
    transition: transform 0.1s, background-color 0.2s;
    margin-bottom: 12px;  /* 아래 버튼들과의 간격 */
    line-height: 1;
}

.main-big-btn:hover:not(:disabled) {
    background-color: #4cae4c;
    transform: translateY(-2px);
}

.main-big-btn:active:not(:disabled) {
    transform: translateY(0);
}

.main-big-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    box-shadow: none;
}

/* 2. 하단 서브 버튼 그룹 컨테이너 */
.preset-sub-button-group {
    display: flex;
    gap: 10px;           /* 버튼 사이 간격 */
    width: 100%;
}

/* 3. 하단 서브 버튼 개별 스타일 */
.sub-preset-btn {
    flex: 1;             /* 3등분으로 꽉 차게 */
    padding: 12px 5px;   /* 내부 여백 */
    font-size: 14px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 10px; /* 둥근 모서리 */
    cursor: pointer;
    line-height: 1.4;    /* 두 줄 텍스트 간격 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: opacity 0.2s, transform 0.1s;
    
    /* 텍스트가 버튼 밖으로 나가지 않게 */
    white-space: normal; 
    word-break: keep-all; 
    text-align: center;
}

.sub-preset-btn:hover {
    opacity: 0.9;        /* 호버 시 살짝 밝게 */
    transform: translateY(-1px);
}

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

.text-icon-link {
    text-decoration: none;
    display: flex; /* a태그 높이 문제 방지 */
}

/* 호버 효과 (이미지와 동일하게 확대) */
.text-icon-link:hover .wdot-icon {
    transform: scale(1.1);
    background-color: #000; /* 호버 시 완전 검정 */
}

/* (참고) 기존 이미지 아이콘 스타일 유지/보완 */

.wdot-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 28px;  /* 다른 이미지 아이콘(GitHub 등)과 높이 맞춤 */
    height: 28px;
    background-color: #333; /* 로고 배경색 (진한 회색/검정) */
    color: white;
    font-weight: 900; /* 아주 굵게 */
    font-family: 'Verdana', sans-serif; /* 깔끔한 산세리프 폰트 */
    font-size: 16px;
    border-radius: 50%; /* 원형 아이콘 */
    transition: transform 0.2s, background-color 0.2s;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.external-links {
    display: flex;
    gap: 12px; /* 간격 살짝 조정 */
    align-items: center;
}

/* 구분선 (언어 선택기와 아이콘 사이) */
.link-separator {
    width: 1px;
    height: 24px;
    background-color: #ddd;
    margin: 0 5px;
}

/* style.css 추가/수정 */

.compare-icon-btn {
    position: absolute; 
    top: 10px; 
    right: 10px; 
    z-index: 20; /* 다른 요소들보다 위에 */
    /* 1. 크기 & 모양 */
    width: 42px;          /* 큼직하게 */
    height: 42px;
    border-radius: 8px;   /* 엣지 있는 둥근 사각형 */
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
    
    /* 2. 색상 & 투명도 */
    background-color: rgba(255, 255, 255, 0.3); /* 흰색 30% */
    color: #333;          /* 아이콘 색상 (진한 회색) */
    border: 2px solid #555; /* 진한 회색 테두리 */
    
    /* 3. 효과 */
    transition: all 0.2s ease;
    backdrop-filter: blur(2px); /* 뒤가 흐릿하게 보여서 고급스러움 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 마우스 올렸을 때 (조금 더 잘 보이게) */
.compare-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.8);
    border-color: #333;
    transform: scale(1.05);
}

/* 눌렀을 때 (확실한 피드백) */
.compare-icon-btn:active {
    background-color: #4A90E2; /* 파란색 강조 */
    color: white;
    border-color: #217dbb;
    transform: scale(0.95);
}

/* 아이콘(SVG) 크기 */
.compare-icon-btn svg {
    width: 28px;
    height: 28px;
    fill: currentColor; /* 버튼 색상 따라감 */
}
/* style.css 파일에 추가할 최종 댓글 관련 CSS */

/* --- 0. 댓글 모달 열기 버튼 --- */
.comment-open-btn {
    padding: 12px 25px; 
    font-size: 16px; 
    cursor: pointer; 
    background-color: #007bff; 
    color: white; 
    border: none; 
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background-color 0.2s, box-shadow 0.2s;
}

.comment-open-btn:hover {
    background-color: #0056b3; 
    box-shadow: 0 6px 8px rgba(0,0,0,0.15);
}

/* --- 1. 모달 및 기본 레이아웃 --- */

/* 댓글 모달 전체 (JS에서 is-active 클래스 추가/제거로 열림/닫힘 제어) */
.comment-modal-overlay {
    display: none; /* JS에서 is-active 클래스로 오버라이드 됨 */
    position: fixed; 
    z-index: 1000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.7);
    overflow: auto;
}

.comment-modal-overlay.is-active {
    display: block;
}

/* 모달 컨텐츠 박스 */
.comment-modal-content {
    background-color: #ffffff; 
    margin: 5% auto; 
    padding: 30px; 
    width: 90%; 
    max-width: 700px; 
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
    transition: all 0.3s ease;
}

/* 닫기 버튼 */
.comment-close-btn {
    color: #888; 
    float: right; 
    font-size: 36px; 
    font-weight: 300; 
    cursor: pointer;
    line-height: 1;
}
.comment-close-btn:hover {
    color: #333;
}

/* 댓글 목록 영역 */
.comments-list-container {
    max-height: 50vh; 
    overflow-y: auto;
    padding-right: 10px;
}


/* --- 2. 입력 필드 및 버튼 --- */

/* 메인 폼 및 대댓글 폼의 모든 입력 필드 통합 */
.comment-input-field,
.comment-input-area input[type="text"], 
.comment-input-area textarea {
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
    resize: vertical; 
}

.comment-input-field:focus,
.comment-input-area input[type="text"]:focus, 
.comment-input-area textarea:focus {
    border-color: #007bff;
    outline: none;
}

/* 등록/취소 버튼 기본 스타일 */
.comment-submit-btn {
    padding: 10px 20px; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: bold;
    transition: background-color 0.2s;
}

/* 메인 폼 등록 버튼 스타일 (index.html의 #submit-comment) */
.comment-submit-btn.comment-input-submit-btn {
    background-color: #007bff; 
    color: white; 
    float: right; /* index.html의 등록 버튼에만 적용 */
}
.comment-submit-btn.comment-input-submit-btn:hover {
    background-color: #0056b3;
}

/* 대댓글 폼 - 등록 버튼 스타일 */
.comment-submit-btn.comment-reply-submit {
    padding: 5px 10px; 
    background-color: #ffc107;
    color: black;
}
.comment-submit-btn.comment-reply-submit:hover {
    background-color: #e0a800;
}

/* 대댓글 폼 - 취소 버튼 스타일 */
.comment-submit-btn.comment-reply-cancel {
    padding: 5px 10px; 
    background-color: #ccc;
    color: black;
    margin-left: 5px;
}
.comment-submit-btn.comment-reply-cancel:hover {
    background-color: #a3a3a3;
}

/* --- 3. 개별 댓글 항목 (JS 렌더링 영역) --- */

/* 개별 댓글 아이템 (depth=0) */
.comment-item {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #ccc; /* 원본의 depth=0 스타일 */
    background-color: #fff; /* 원본의 depth=0 스타일 */
    transition: all 0.2s;
}

/* 대댓글 스타일 (depth > 0) */
.comment-item.comment-reply {
    border: 1px solid #eee; /* 원본의 depth > 0 스타일 */
    background-color: #f9f9f9; /* 원본의 depth > 0 스타일 */
    border-left: 3px solid #ffc107; /* 대댓글 구분선 강조 */
}

/* 댓글 헤더 (닉네임, 시간, 해시 코드 포함) */
.comment-header {
    margin: 0;
    font-weight: bold;
    line-height: 1.5;
}

/* 타임스탬프 스타일 */
.comment-time {
    font-size: 0.8em;
    color: #666;
}

/* 구분선 스타일 */
.comment-divider {
    margin: 5px 0;
    border-color: #eee;
    border-style: solid;
    border-width: 1px 0 0 0;
}

/* 댓글 내용 스타일 */
.comment-content {
    margin: 0 0 10px 0;
    white-space: pre-wrap; /* 줄바꿈 유지 */
}

/* 삭제 버튼 컨테이너 (float: right 스타일 적용) */
.comment-delete-btn-container {
    margin-left: 10px;
    float: right;
}

/* 대댓글 달기 버튼 스타일 */
.comment-action-btn.comment-reply-btn {
    font-size: 0.9em;
    color: #007bff;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

/* 대댓글 입력 폼 컨테이너 */
.comment-reply-form {
    display: none; /* JS에서 토글됨 */
    margin-top: 10px;
    border-top: 1px solid #eee;
    padding-top: 10px;
    padding-left: 10px;
    border-left: 3px solid #ffc107; /* 강조색 */
}