/* ===== Text Effects CSS ===== */
/* 이 파일의 효과들은 Selenium으로 렌더링되어 이미지로 변환됩니다 */

/* ===== Base Text ===== */
.text-effect-base {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 700;
  line-height: 1.4;
  word-break: keep-all;
}

/* ===== 1. 그라데이션 텍스트 ===== */
.text-effect-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-effect-gradient-gold {
  background: linear-gradient(135deg, #f5af19 0%, #f12711 50%, #f5af19 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-effect-gradient-ocean {
  background: linear-gradient(135deg, #667eea 0%, #00d2ff 50%, #3a7bd5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-effect-gradient-sunset {
  background: linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #ff9ff3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-effect-gradient-nature {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== 2. 네온 글로우 효과 ===== */
.text-effect-neon {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00de,
    0 0 30px #ff00de,
    0 0 40px #ff00de,
    0 0 55px #ff00de,
    0 0 75px #ff00de;
}

.text-effect-neon-blue {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #00d9ff,
    0 0 30px #00d9ff,
    0 0 40px #00d9ff,
    0 0 55px #00d9ff,
    0 0 75px #00d9ff;
}

.text-effect-neon-green {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #00ff88,
    0 0 30px #00ff88,
    0 0 40px #00ff88,
    0 0 55px #00ff88,
    0 0 75px #00ff88;
}

.text-effect-neon-orange {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff6b35,
    0 0 30px #ff6b35,
    0 0 40px #ff6b35,
    0 0 55px #ff6b35,
    0 0 75px #ff6b35;
}

/* ===== 3. 3D 입체 효과 ===== */
.text-effect-3d {
  color: #1a1a2e;
  text-shadow:
    1px 1px 0 #4a4a6a,
    2px 2px 0 #4a4a6a,
    3px 3px 0 #4a4a6a,
    4px 4px 0 #4a4a6a,
    5px 5px 0 #4a4a6a,
    6px 6px 10px rgba(0,0,0,0.4);
}

.text-effect-3d-blue {
  color: #4facfe;
  text-shadow:
    1px 1px 0 #2980b9,
    2px 2px 0 #2980b9,
    3px 3px 0 #2980b9,
    4px 4px 0 #2980b9,
    5px 5px 0 #2980b9,
    6px 6px 10px rgba(0,0,0,0.3);
}

.text-effect-3d-red {
  color: #ff6b6b;
  text-shadow:
    1px 1px 0 #c0392b,
    2px 2px 0 #c0392b,
    3px 3px 0 #c0392b,
    4px 4px 0 #c0392b,
    5px 5px 0 #c0392b,
    6px 6px 10px rgba(0,0,0,0.3);
}

.text-effect-3d-white {
  color: #ffffff;
  text-shadow:
    1px 1px 0 #bdc3c7,
    2px 2px 0 #bdc3c7,
    3px 3px 0 #bdc3c7,
    4px 4px 0 #95a5a6,
    5px 5px 0 #7f8c8d,
    6px 6px 10px rgba(0,0,0,0.4);
}

/* ===== 4. 형광펜 하이라이트 ===== */
.text-effect-highlight {
  background: linear-gradient(180deg, transparent 50%, #ffff00 50%);
  padding: 0 8px;
}

.text-effect-highlight-pink {
  background: linear-gradient(180deg, transparent 50%, #ff9ff3 50%);
  padding: 0 8px;
}

.text-effect-highlight-green {
  background: linear-gradient(180deg, transparent 50%, #55efc4 50%);
  padding: 0 8px;
}

.text-effect-highlight-blue {
  background: linear-gradient(180deg, transparent 50%, #74b9ff 50%);
  padding: 0 8px;
}

.text-effect-highlight-full {
  background: #ffff00;
  padding: 4px 12px;
  display: inline;
  box-decoration-break: clone;
}

/* ===== 5. 아웃라인 텍스트 ===== */
.text-effect-outline {
  color: transparent;
  -webkit-text-stroke: 2px #1a1a2e;
}

.text-effect-outline-white {
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
}

.text-effect-outline-thick {
  color: transparent;
  -webkit-text-stroke: 4px #1a1a2e;
}

.text-effect-outline-gradient {
  color: transparent;
  -webkit-text-stroke: 2px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
}

.text-effect-outline-filled {
  color: #ffffff;
  -webkit-text-stroke: 3px #1a1a2e;
  paint-order: stroke fill;
}

/* ===== 6. 그림자 텍스트 ===== */
.text-effect-shadow {
  color: #1a1a2e;
  text-shadow: 4px 4px 8px rgba(0,0,0,0.3);
}

.text-effect-shadow-hard {
  color: #1a1a2e;
  text-shadow: 5px 5px 0 rgba(0,0,0,0.2);
}

.text-effect-shadow-long {
  color: #333;
  text-shadow:
    1px 1px 0 #ccc,
    2px 2px 0 #ccc,
    3px 3px 0 #ccc,
    4px 4px 0 #ccc,
    5px 5px 0 #ccc,
    6px 6px 0 #ccc,
    7px 7px 0 #ccc,
    8px 8px 0 #ccc,
    9px 9px 0 #ccc,
    10px 10px 0 #ccc;
}

.text-effect-shadow-double {
  color: #fff;
  text-shadow:
    3px 3px 0 #ff6b6b,
    6px 6px 0 #feca57;
}

/* ===== 7. 레트로 효과 ===== */
.text-effect-retro {
  color: #ffeaa7;
  text-shadow:
    3px 3px 0 #d63031,
    6px 6px 0 #e17055;
  letter-spacing: 2px;
}

.text-effect-retro-blue {
  color: #74b9ff;
  text-shadow:
    3px 3px 0 #0984e3,
    6px 6px 0 #6c5ce7;
  letter-spacing: 2px;
}

.text-effect-retro-neon {
  color: #00ffff;
  text-shadow:
    0 0 5px #00ffff,
    3px 3px 0 #ff00ff,
    6px 6px 0 #ffff00;
  letter-spacing: 3px;
}

/* ===== 8. 특별 효과 ===== */
.text-effect-emboss {
  color: #ccc;
  text-shadow:
    -1px -1px 0 #fff,
    1px 1px 0 #333;
}

.text-effect-engrave {
  color: #ccc;
  text-shadow:
    -1px -1px 0 #333,
    1px 1px 0 #fff;
}

.text-effect-fire {
  color: #ff6b35;
  text-shadow:
    0 -2px 4px #ff0,
    0 -4px 10px #ff8000,
    0 -6px 18px #f00;
}

.text-effect-ice {
  color: #a5f3fc;
  text-shadow:
    0 0 10px #67e8f9,
    0 0 20px #22d3ee,
    0 0 30px #06b6d4,
    0 0 40px #0891b2;
}

.text-effect-gold {
  background: linear-gradient(180deg, #f5af19 0%, #d4a017 25%, #f5d061 50%, #d4a017 75%, #f5af19 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}

.text-effect-silver {
  background: linear-gradient(180deg, #e8e8e8 0%, #bdc3c7 25%, #f5f5f5 50%, #bdc3c7 75%, #e8e8e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}

/* ===== 9. 애니메이션 효과 (Static 버전) ===== */
.text-effect-shimmer {
  background: linear-gradient(
    90deg,
    #1a1a2e 0%,
    #667eea 25%,
    #764ba2 50%,
    #667eea 75%,
    #1a1a2e 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===== 10. 박스 스타일 텍스트 ===== */
.text-effect-box {
  background: #1a1a2e;
  color: #fff;
  padding: 12px 24px;
  display: inline-block;
}

.text-effect-box-rounded {
  background: #1a1a2e;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  display: inline-block;
}

.text-effect-box-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  display: inline-block;
}

.text-effect-box-outline {
  border: 3px solid #1a1a2e;
  color: #1a1a2e;
  padding: 12px 24px;
  display: inline-block;
}

/* ===== 11. 강조 믹스 ===== */
.text-effect-emphasis {
  position: relative;
}

.text-effect-emphasis::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: #ff6b6b;
  z-index: -1;
}

.text-effect-underline-thick {
  text-decoration: underline;
  text-decoration-color: #ff6b6b;
  text-decoration-thickness: 4px;
  text-underline-offset: 4px;
}

.text-effect-circle {
  position: relative;
  display: inline-block;
}

.text-effect-circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 150%;
  border: 3px solid #ff6b6b;
  border-radius: 50%;
}

/* ===== 12. 손글씨 스타일 ===== */
.text-effect-handwriting {
  font-family: 'Nanum Pen Script', cursive;
  color: #1a1a2e;
  transform: rotate(-2deg);
}

.text-effect-handwriting-highlight {
  font-family: 'Nanum Pen Script', cursive;
  color: #1a1a2e;
  background: linear-gradient(180deg, transparent 60%, #ffff00 60%);
  padding: 0 8px;
  transform: rotate(-2deg);
}

/* ===== 13. 타이포 믹스 (크기/컬러 혼합) ===== */
.text-effect-typo-mix .big {
  font-size: 1.5em;
  font-weight: 900;
}

.text-effect-typo-mix .small {
  font-size: 0.7em;
}

.text-effect-typo-mix .accent {
  color: #ff6b6b;
}

.text-effect-typo-mix .accent-bg {
  background: #ff6b6b;
  color: #fff;
  padding: 2px 8px;
}

/* ===== 배경용 유틸리티 ===== */
.bg-gradient-purple {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-gradient-sunset {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.bg-gradient-ocean {
  background: linear-gradient(135deg, #667eea 0%, #00d2ff 100%);
}

.bg-gradient-nature {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.bg-gradient-dark {
  background: linear-gradient(135deg, #0c0c0c 0%, #434343 100%);
}

.bg-gradient-warm {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.bg-gradient-cool {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.bg-gradient-luxury {
  background: linear-gradient(135deg, #d4a017 0%, #fff8dc 50%, #d4a017 100%);
}