/*
  © 2025 SnuPhoto
  All Rights Reserved.
  Unauthorized reproduction or redistribution of this stylesheet is prohibited.
*/
:root {
  /* ✅ Light Theme Colors */
  --primary: #ef4444;        /* 메인 브랜드 레드 */
  --primary-dark: #dc2626;   /* hover용 진한 레드 */
  --primary-light: #fef2f2;  /* 연한 배경 */
  --secondary: #3b82f6;      /* 포인트 블루 */
  --secondary-dark: #2563eb;
  --success: #10b981;
  --success-dark: #059669;
  --bg: #fafafa;             /* 페이지 배경 (연회색) */
  --ink: #1f2937;            /* 본문 텍스트 */
  --card: #fff;              /* 카드 배경 */
  --muted: #6b7280;          /* 보조 텍스트 */
  --line: #e5e7eb;           /* 경계선 */

  /* Shadows */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

  /* Typography */
  --font-xs: 13px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-lg: 18px;
  --font-xl: 20px;

  /* Line Heights (행간) */
  --lh-tight: 1.25;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  /* Letter Spacing (자간) */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.02em;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
}

[data-theme="dark"] {
  --primary: #f87171;        /* 밝은 레드 */
  --primary-dark: #ef4444;   /* 포인트 레드 */
  --primary-light: #450a0a;  /* 어두운 배경용 */
  --secondary: #60a5fa;      /* 하이라이트 블루 */
  --secondary-dark: #3b82f6;
  --success: #34d399;
  --success-dark: #10b981;
  --bg: #0f172a;             /* 페이지 배경 (거의 검정) */
  --ink: #f1f5f9;            /* 본문 텍스트 (밝게) */
  --card: #1e293b;           /* 카드 배경 (짙은 회색) */
  --muted: #94a3b8;          /* 보조 텍스트 */
  --line: #334155;           /* 구분선 */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ========================================
   Base Styles
======================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-anchor: none;
  scroll-behavior: auto;
  scroll-padding-top: 60px; /* 모바일 상단 UI 겹침 방지 */
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto,
    "Apple SD Gothic Neo", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--font-base);
  line-height: 1.7; /* 가독성 개선 */
  letter-spacing: -0.01em; /* 한글 최적화 */
  transition: background 0.3s, color 0.3s;
  overflow-y: auto;
  overflow-anchor: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; /* Firefox 가독성 */
  font-feature-settings: "kern", "liga", "clig", "calt";
}

/* ========================================
   Cookie Banner
======================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  color: #fff;
  padding: var(--space-md);
  z-index: 9999;
  display: none;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.cookie-banner.show {
  display: block;
}

.cookie-content {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: var(--font-sm);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
}

.cookie-text {
  flex: 1;
  min-width: 300px;
}

.cookie-text a {
  color: #60a5fa;
  text-decoration: underline;
}

.cookie-buttons {
  display: flex;
  gap: 10px;
}

.cookie-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-size: var(--font-sm);
  letter-spacing: var(--ls-normal);
  transition: all 0.2s;
}

.cookie-accept {
  background: var(--success);
  color: #fff;
}

.cookie-accept:hover {
  background: var(--success-dark);
}

.cookie-decline {
  background: var(--muted);
  color: #fff;
}

.cookie-decline:hover {
  background: #4b5563;
}

/* ========================================
   Grid System
======================================== */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: start; /* 상단 정렬 */
}

.col-12 {
  grid-column: span 12;
  width: 100%; /* 너비 100% 보장 */
}

.md-col-6 {
  grid-column: span 12;
}

.md-col-8 {
  grid-column: span 12;
}

.md-col-10 {
  grid-column: span 12;
}

.lg-col-8 {
  grid-column: span 12;
}

@media (min-width: 768px) {
  .md-col-6 {
    grid-column: span 6;
  }
  .md-col-8 {
    grid-column: span 8;
    margin: 0 auto; /* 중앙 정렬 */
  }
  .md-col-10 {
    grid-column: 2 / span 10; /* 정확한 중앙 정렬 */
  }
}

@media (min-width: 1024px) {
  .lg-col-8 {
    grid-column: 3 / span 8; /* 정확한 중앙 정렬 */
  }
  .md-col-10 {
    grid-column: 2 / span 10;
  }
}

.center {
  justify-self: center;
  text-align: center;
}

.right {
  justify-self: end;
}

/* ========================================
   Header
======================================== */
.header {
  padding: 10px 0 var(--space-lg);
}

.header .brand .logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header h1 {
  margin: 0;
  font-size: var(--font-xl);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.header h1 #t-title {
  color: var(--primary);
  background: linear-gradient(135deg, var(--primary) 0%, #f97316 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.muted {
  color: var(--muted);
  font-size: var(--font-sm);
  font-weight: 500;
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
}

.small {
  font-size: var(--font-xs);
  letter-spacing: var(--ls-normal);
}

.topbar {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  align-items: center;
}

/* ========================================
   Theme Toggle
======================================== */
.theme-toggle {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 22px;
  transition: all 0.2s;
  box-shadow: var(--shadow);
  line-height: 1;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

/* ========================================
   Hero Section
======================================== */
.hero {
  background: linear-gradient(135deg, var(--primary-light) 0%, #fff 100%);
  border-radius: 16px;
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  margin-bottom: var(--space-xl);
  border: 2px solid var(--primary);
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .hero {
  background: linear-gradient(
    135deg,
    var(--primary-light) 0%,
    var(--card) 100%
  );
}

.hero-icon {
  font-size: 48px;
  margin-bottom: var(--space-sm);
  line-height: 1;
}

.hero h2 {
  font-size: var(--font-xl);
  color: var(--primary);
  margin-bottom: var(--space-xs);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.hero p {
  color: var(--muted);
  font-size: var(--font-base);
  max-width: 600px;
  margin: 0 auto;
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
}

/* ========================================
   Form Controls
======================================== */
.input {
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  min-width: 280px;
  width: 100%;
  max-width: 560px;
  font-size: var(--font-base);
  background: var(--card);
  color: var(--ink);
  transition: all 0.2s;
  box-shadow: var(--shadow);
  letter-spacing: -0.005em; /* ✅ 자간 최적화 */
  line-height: 1.5; /* ✅ 행간 개선 */
  box-sizing: border-box; /* ✅ 패딩 포함 */
}

.input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  transform: translateY(-1px); /* ✅ 포커스 시 미세한 상승 */
}

.input::placeholder {
  color: var(--muted);
  opacity: 0.7;
  letter-spacing: -0.005em;
}

.select {
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  font-size: var(--font-base);
  font-weight: 600;
  transition: all 0.2s;
  box-shadow: var(--shadow);
  letter-spacing: var(--ls-normal);
}

.select:hover {
  border-color: var(--primary);
}

.upload-zone {
  border: 3px dashed var(--line);
  border-radius: 16px;
  padding: var(--space-3xl);
  text-align: center;
  background: var(--card);
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
  margin: var(--space-lg) auto;
  max-width: 600px;
}

.upload-zone:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.upload-zone.dragover {
  border-color: var(--primary);
  background: var(--primary-light);
  border-width: 4px;
  transform: scale(1.02);
}

.upload-zone.has-file {
  border-color: var(--success);
  background: #f0fdf4;
}

[data-theme="dark"] .upload-zone.has-file {
  background: #064e3b;
}

.upload-icon {
  font-size: 64px;
  margin-bottom: var(--space-md);
  transition: transform 0.3s;
}

.upload-zone:hover .upload-icon {
  transform: scale(1.1);
}

.upload-text {
  color: var(--ink);
  font-size: var(--font-base);
  line-height: var(--lh-normal);
  margin: 0;
}

.upload-text strong {
  color: var(--primary);
  font-size: var(--font-lg);
  display: block;
  margin-bottom: var(--space-xs);
}

.upload-hint {
  color: var(--muted);
  font-size: var(--font-sm);
}

.file-input {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-zone .file-name {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--success);
  color: white;
  border-radius: 8px;
  font-weight: 600;
  display: inline-block;
  font-size: var(--font-sm);
}

/* /MODIFIED ui-fix */

/* ========================================
   Buttons
======================================== */
.btn,
.btn-primary {
  border: 0;
  border-radius: 12px;
  padding: 14px 24px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  font-size: var(--font-base);
  transition: all 0.2s;
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: var(--ls-normal);
  line-height: 1;
}

.btn {
  background: #111827;
}

[data-theme="dark"] .btn {
  background: #334155;
}

.btn-primary {
  background: var(--primary);
}

.btn:hover,
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn:active,
.btn-primary:active {
  transform: scale(0.98);
}

.btn:disabled,
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.hint {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-sm);
  color: var(--muted);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
}

/* ========================================
   Sections
======================================== */
.section {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 2rem; /* 섹션 내부 여백 개선 */
  margin-bottom: 2rem; /* 섹션 간격 개선 */
  box-shadow: var(--shadow);
  transition: all 0.3s;
  width: 100%; /* 너비 100% 보장 */
  box-sizing: border-box; /* 패딩 포함 너비 계산 */
}

.section:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px); /* 호버 시 미세한 상승 효과 */
}

.section h2 {
  font-size: var(--font-lg);
  margin-bottom: 1.5rem; /* 제목 하단 여백 */
  color: var(--ink);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  letter-spacing: -0.02em; /* 제목 자간 */
  line-height: 1.3; /* 제목 행간 */
}

.row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%; /* 너비 100% */
}

/* ========================================
   Thumbnail Cards
======================================== */
.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

.thumb-card {
  width: 100%;
  max-width: 720px;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: var(--space-xl);
  text-align: center;
  background: var(--card);
  transition: all 0.3s;
  box-shadow: var(--shadow);
}

.thumb-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.thumb-card img {
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto var(--space-md);
  transition: all 0.3s;
  box-shadow: var(--shadow);
}

.thumb-card img:hover {
  box-shadow: var(--shadow-lg);
}

.thumb-card.img-error img {
  display: none;
}

.thumb-card.img-error::before {
  content: attr(data-error-msg);
  display: block;
  padding: 60px 20px;
  background: #fef3c7;
  border-radius: 10px;
  color: #92400e;
  font-weight: 700;
  font-size: var(--font-base);
  text-align: center;
  margin-bottom: var(--space-md);
  border: 2px dashed #f59e0b;
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
}

.thumb-card.img-error[data-error-msg=""]::before {
  content: "⚠️ 이 해상도는 지원되지 않습니다";
}

.thumb-meta {
  font-size: var(--font-sm);
  color: var(--muted);
  margin: var(--space-md) 0;
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-normal);
}

.thumb-actions {
  margin-top: var(--space-md);
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.thumb-actions a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  transition: all 0.2s;
  flex: 1;
  min-width: 160px;
  text-align: center;
  justify-content: center;
  box-shadow: var(--shadow);
  font-size: var(--font-base);
  letter-spacing: -0.005em; /* ✅ 자간 최적화 */
  line-height: 1.3; /* ✅ 행간 개선 */
  position: relative;
  overflow: hidden;
}

/* ✅ 다운로드 애니메이션 */
.thumb-actions a.downloading {
  animation: downloadPulse 0.6s ease-in-out;
  pointer-events: none;
}

@keyframes downloadPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.95); }
}

.thumb-actions a::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transition: left 0.3s;
}

.thumb-actions a:active::after {
  left: 100%;
}

.thumb-actions a:hover {
  transform: translateY(-2px) scale(1.02); /* ✅ 호버 효과 개선 */
  box-shadow: var(--shadow-lg);
}

.thumb-actions a:active {
  transform: scale(0.98);
}

/* ========================================
   How-to Card
======================================== */
.card {
  border: 2px dashed var(--line);
  background: var(--card);
  border-radius: 14px;
  padding: var(--space-lg);
  margin-top: var(--space-lg);
  transition: all 0.3s;
}

.card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.card h3 {
  margin-top: 0;
  margin-bottom: var(--space-md);
  font-size: var(--font-lg);
  color: var(--primary);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.howto-list {
  margin: var(--space-xs) 0 0;
  max-width: 720px;
  text-align: left;
  line-height: var(--lh-relaxed);
  padding-left: 1.5rem;
  color: var(--ink);
}

.howto-list li {
  margin: var(--space-xs) 0;
  font-size: var(--font-base);
  letter-spacing: var(--ls-normal);
}

.howto-list li strong {
  color: var(--primary);
  font-weight: 700;
}

/* ========================================
   Info Badges
======================================== */
.info-badge {
  background: var(--primary-light);
  border: 2px solid var(--primary);
  border-radius: 10px;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: var(--font-sm);
  color: var(--primary-dark);
  text-align: center;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
}

[data-theme="dark"] .info-badge {
  background: var(--primary-light);
  color: var(--primary);
}

.note-badge {
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 10px;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: var(--font-xs);
  color: #856404;
  text-align: center;
  font-weight: 600;
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-normal);
}

/* ========================================
   Preview
======================================== */
.preview {
  margin-top: var(--space-md);
  /* Use a responsive grid so before/after images align neatly. The grid will
     automatically wrap on small screens and show two columns on larger screens. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  justify-items: center;
  align-items: start;
}

.preview img {
  max-width: 100%;
  width: 100%;
  height: auto;
  /* Limit the height of preview images so extremely tall images (e.g. upscaled shorts)
     don't dominate the page. This ensures before/after comparisons remain easy
     to view on all devices. */
  max-height: 600px;
  border-radius: 12px;
  border: 2px solid var(--line);
  box-shadow: var(--shadow-lg);
}

/* Individual preview item wrapper */
.preview-item {
  width: 100%;
  text-align: center;
}

/* Label above each preview image */
.preview-label {
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--primary);
  font-size: var(--font-sm);
}

/* ========================================
   FAQ
======================================== */
.faq {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.faq-item {
  border: 2px solid var(--line);
  border-radius: 12px;
  margin-bottom: var(--space-md);
  overflow: hidden;
  background: var(--card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.faq .q {
  font-weight: 700;
  padding: 18px var(--space-lg);
  font-size: var(--font-base);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  line-height: 1.5;
  user-select: none;
  transition: background 0.2s ease;
}

.faq .q:hover {
  background: var(--primary-light);
}

.faq .q::before {
  content: "Q.";
  font-size: var(--font-lg);
  font-weight: 800;
  margin-right: 12px;
  flex-shrink: 0;
}

.faq .q::after {
  content: "▼";
  font-size: 12px;
  transition: transform 0.2s ease;
  margin-left: 16px;
  padding-left: var(--space-sm);
  flex-shrink: 0;
  opacity: 0.7;
}

.faq-item.active .q::after {
  transform: rotate(180deg);
}

.faq .a {
  color: var(--ink);
  line-height: var(--lh-relaxed);
  font-size: 15px;
  letter-spacing: var(--ls-normal);
  letter-spacing: -0.005em;
  padding: 0 var(--space-lg);
  display: none;
}

.faq-item.active .a {
  display: block;
  padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);
}

.faq-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.faq-wrapper h2 {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

/* ========================================
   ✅ 추가: FAQ 확장 애니메이션 & 한줄 요약
   (기존 구조 유지, 가장 마지막에 추가)
======================================== */
.faq .q {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.faq .a {
  display: block;                 /* 기존 display:none 무력화 */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 var(--space-lg);
}

.faq-item.active .a {
  max-height: 500px;
  padding: var(--space-sm) var(--space-lg) var(--space-lg);
}

/* MODIFIED faq-scroll - Prevent scroll lock */
.no-scroll {
  overflow: hidden !important;
}
/* /MODIFIED faq-scroll */

/* ========================================
   Footer
======================================== */
.footer {
  padding-bottom: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.footer a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
  letter-spacing: var(--ls-normal);
}

.footer a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.footer-links {
  margin-bottom: var(--space-md);
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: var(--font-sm);
}

.sr-only {
  position: absolute;
  left: -9999px;
}

/* ========================================
   Scrollbar Styles (SnuPhoto 브랜드 컬러 적용)
======================================== */
body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background: rgba(240, 240, 240, 0.1);
}

body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ef4444 0%, #d32f2f 100%);
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: background 0.3s ease;
}

body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #f87171 0%, #b91c1c 100%);
}

/* 다크모드 */
[data-theme="dark"] body::-webkit-scrollbar-track {
  background: rgba(30, 30, 30, 0.4);
}

[data-theme="dark"] body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f87171 0%, #b91c1c 100%);
  border: 2px solid rgba(0, 0, 0, 0.3);
}

/* ========================================
   Modal
======================================== */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  overflow: auto;
  backdrop-filter: blur(4px);
}

.modal.active {
  display: block;
}

.modal-content {
  background: var(--card);
  margin: var(--space-2xl) auto;
  padding: var(--space-2xl);
  border-radius: 16px;
  max-width: 700px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 2px solid var(--line);
}

.modal-close {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 32px;
  font-weight: bold;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s;
}

.modal-close:hover {
  color: var(--primary);
  transform: scale(1.2);
}

.modal-content h2 {
  margin-top: 0;
  color: var(--primary);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.modal-content h3 {
  color: var(--ink);
  margin-top: var(--space-xl);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.modal-content p {
  line-height: var(--lh-relaxed);
  color: var(--ink);
  margin: var(--space-sm) 0;
  letter-spacing: var(--ls-normal);
}

.modal-content ul {
  line-height: var(--lh-relaxed);
  color: var(--ink);
  margin: var(--space-sm) 0;
  padding-left: 24px;
  letter-spacing: var(--ls-normal);
}

.modal-content a {
  color: var(--primary);
  font-weight: 600;
}

/* ========================================
   Loading Spinner
======================================== */
.loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 3px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 8px;
}

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

/* ========================================
   Responsive
======================================== */
@media (max-width: 640px) {
  .hero h2 {
    font-size: var(--font-lg);
  }
  .section {
    padding: var(--space-lg);
  }
  .thumb-actions a {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

.footer-copy {
  text-align: center;
  line-height: 1.6;
  margin-top: 0;
  padding-top: 0.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--font-sm);
}

.scroll-buttons {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 9999;
}

.scroll-buttons {
  z-index: 99999 !important;
}

.scroll-buttons.visible {
  opacity: 1;
  visibility: visible;
}

.scroll-buttons button,
.scroll-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 18px;
  box-shadow: var(--shadow);
  transition: background 0.3s, transform 0.2s;
}
.scroll-buttons button:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .scroll-buttons {
    right: 12px;
    bottom: 80px;
  } /* 쿠키배너 겹침 방지 */
}
/* ========================================
   FAQ Scroll 안정화 (모바일 대응)
   2025-10 안정 패치
======================================== */
html,
body {
  overscroll-behavior-y: contain;
  scroll-behavior: smooth !important;
}

.faq {
  scroll-margin-top: 0;
}

.faq-item .a {
  transition: none !important; /* FAQ 열림/닫힘 시 부드러운 이동 제거 */
}

@supports (-webkit-touch-callout: none) {
  .faq {
    overscroll-behavior-y: contain;
    touch-action: manipulation;
  }
}
/* ========================================
   ✅ Responsive Optimization Patch (Add-on)
   2025-10 Update | 유지보수 안전 버전
======================================== */

/* Mobile (≤640px) */
@media (max-width: 640px) {
  .scroll-buttons {
    right: 12px;
    bottom: 80px; /* 쿠키배너 겹침 방지 */
  }

  .hero h2 {
    font-size: var(--font-lg);
    line-height: 1.4;
  }

  input#url {
    max-width: 100%;
  }

  .footer-links {
    flex-direction: column;
    gap: 8px;
  }

  .hero-icon {
    font-size: 36px;
  }
}

@media (max-width: 480px) {
  .hero h2 {
    font-size: 18px;
    line-height: 1.4;
  }
  .section {
    padding: 16px;
  }
}

/* Tablet (641px ~ 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
  .section {
    padding: var(--space-lg);
    max-width: 90%;
    margin: 0 auto var(--space-lg);
  }

  .btn,
  .btn-primary {
    padding: 12px 18px;
    font-size: 15px;
  }
}

/* Desktop (≥1280px) */
@media (min-width: 1280px) {
  .wrap {
    max-width: 1280px;
  }

  .hero {
    margin-top: var(--space-xl);
    padding: var(--space-2xl);
  }
}

/* Accessibility */
.scroll-buttons button {
  border: none;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 18px;
  box-shadow: var(--shadow);
}

.scroll-buttons button:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

/* style.css 맨 아래 */

/* ========================================
   색상 테마 완벽 통일
======================================== */

/* 전체 색상 변수 확장 */
:root {
  --primary: #ef4444;
  --primary-hover: #dc2626;
  --secondary: #6b7280;
  --secondary-hover: #4b5563;
  --success: #10b981;
  --success-hover: #059669;
  --bg: #0f172a;
  --card: #1e293b;
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --line: #334155;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] {
  --bg: #f8fafc;
  --card: #ffffff;
  --ink: #1e293b;
  --muted: #64748b;
  --line: #e2e8f0;
}

/* END 색상 테마 */


/* ========================================
   Disclaimer Card 스타일
======================================== */

.disclaimer-card {
  padding: 1.5rem;
  line-height: 1.8;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  transition: all 0.3s;
}

.disclaimer-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
}

.disclaimer-text {
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.9;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* END Disclaimer */


/* ========================================
   다크모드 가독성 강화
======================================== */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #f9fafb !important;
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span,
[data-theme="dark"] label {
  color: #e5e7eb !important;
}

[data-theme="dark"] .card {
  background: var(--card);
  color: #e5e7eb !important;
}

[data-theme="dark"] .card h2,
[data-theme="dark"] .card h3,
[data-theme="dark"] .card p,
[data-theme="dark"] .card li {
  color: #e5e7eb !important;
}

[data-theme="dark"] .disclaimer-text {
  color: #e5e7eb !important;
}

/* END 다크모드 가독성 */


/* ========================================
   전체 가독성 개선
======================================== */

body {
  letter-spacing: -0.01em;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em; /* 제목 자간 최적화 */
  line-height: 1.4; /* 제목 행간 */
  font-weight: 600;
  margin-bottom: 0.5em; /* 제목 하단 여백 */
  word-break: keep-all; /* 한글 단어 단위 줄바꿈 */
}

p {
  letter-spacing: -0.005em; /* 본문 자간 최적화 */
  line-height: 1.8; /* 본문 행간 개선 */
  margin-bottom: 1em; /* 문단 간격 */
  word-break: keep-all; /* 한글 단어 단위 줄바꿈 */
}

li {
  letter-spacing: -0.005em;
  line-height: 1.7;
  margin-bottom: 0.5em; /* 리스트 항목 간격 */
  word-break: keep-all;
}

.card {
  line-height: 1.8;
  letter-spacing: -0.005em;
  padding: 1.5rem; /* 카드 내부 여백 */
}

.card p {
  margin-bottom: 1rem; /* 카드 내 문단 간격 */
}

.card p:last-child {
  margin-bottom: 0; /* 마지막 문단 여백 제거 */
}

strong, b {
  font-weight: 700;
  color: inherit;
  letter-spacing: -0.01em; /* 강조 텍스트 자간 */
}

/* END 가독성 개선 */


/* ========================================
   Cookie Banner 스타일
======================================== */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  color: var(--ink);
  padding: 1rem 0;
  z-index: 9999;
  display: none;
  box-shadow: 0 -4px 10px var(--shadow);
  border-top: 2px solid var(--line);
}

.cookie-banner.show {
  display: block;
}

.cookie-banner-content {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cookie-text {
  flex: 1;
  min-width: 300px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink);
}

.cookie-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.cookie-link {
  color: var(--primary);
  text-decoration: underline;
  padding: 0 0.5rem;
  font-size: 0.9rem;
}

.cookie-link:hover {
  color: var(--primary-hover);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border-radius: 6px;
}

/* 모바일 Cookie Banner */
@media (max-width: 767px) {
  .cookie-banner-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .cookie-text {
    min-width: 100%;
  }
  
  .cookie-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* END Cookie Banner */


/* ========================================
   반응형 디자인 개선
======================================== */

/* 모바일 최적화 */
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
  
  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  .card {
    padding: 1.25rem;
  }
  
  .disclaimer-card {
    padding: 1.25rem;
  }
  
  .disclaimer-text {
    font-size: 0.85rem;
    line-height: 1.7;
  }
  
  .btn {
    padding: 0.625rem 1rem;
    font-size: 0.9rem;
  }
  
  .section {
    padding: 1.5rem 0;
  }
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 15px;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  .card {
    padding: 1.5rem;
  }
}

/* 데스크톱 */
@media (min-width: 1024px) {
  body {
    font-size: 16px;
  }
  
  h1 {
    font-size: 2.25rem;
  }
  
  .card {
    padding: 1.75rem;
  }
}

/* END 반응형 디자인 */


/* ========================================
   버튼 통일성
======================================== */

.btn, .btn-primary, .btn-secondary {
  transition: all 0.3s;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary, .btn {
  background: var(--secondary);
  color: #fff;
}

.btn-secondary:hover, .btn:hover {
  background: var(--secondary-hover);
  transform: translateY(-1px);
}

.btn-primary:active, .btn-secondary:active, .btn:active {
  transform: translateY(0);
}

/* END 버튼 통일성 */


/* ========================================
   카드 통일성
======================================== */

.card {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: var(--space-xl);
  box-shadow: var(--shadow);
  transition: all 0.3s;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

/* END 카드 통일성 */


/* ========================================
   이미지 모달 스타일
======================================== */

.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.image-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  cursor: pointer;
}

.image-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.image-modal-content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.image-modal-close {
  position: absolute;
  top: -45px;
  right: 0;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.95);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2
/* ========================================
   ✅ 완벽한 12그리드 & 반응형 최적화
======================================== */

/* 모바일 최적화 (기본) */
@media (max-width: 767px) {
  .row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  
  .row .input {
    max-width: 100%;
    width: 100%;
  }
  
  .row .btn-primary,
  .row .btn {
    width: 100%;
    justify-content: center;
  }
  
  #reset-thumbs {
    width: 100% !important;
  }
  
  .section {
    padding: 1.5rem;
  }
  
  .thumb-actions {
    flex-direction: column;
  }
  
  .thumb-actions a {
    width: 100%;
    min-width: auto;
  }
}

/* 태블릿 최적화 */
@media (min-width: 768px) and (max-width: 1023px) {
  .row {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  
  .row .input {
    flex: 1;
    min-width: 0;
  }
  
  .row .btn-primary {
    flex-shrink: 0;
    min-width: 140px;
  }
  
  #reset-thumbs {
    flex-shrink: 0;
    min-width: 100px;
  }
}

/* 데스크톱 최적화 */
@media (min-width: 1024px) {
  .row {
    justify-content: center;
    gap: 1rem;
  }
  
  .row .input {
    flex: 1;
    max-width: 560px;
  }
  
  .row .btn-primary {
    flex-shrink: 0;
  }
  
  #reset-thumbs {
    flex-shrink: 0;
  }
}

/* ========================================
   ✅ 터치 인터랙션 최적화
======================================== */

/* 터치 디바이스에서 버튼 크기 증가 */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .btn-primary,
  .thumb-actions a {
    min-height: 48px; /* 터치 최소 크기 */
    padding: 16px 28px;
  }
  
  .input {
    min-height: 48px;
    padding: 16px;
    font-size: 16px; /* iOS 자동 줌 방지 */
  }
}

/* 호버 가능한 디바이스에서만 호버 효과 */
@media (hover: hover) and (pointer: fine) {
  .btn:hover,
  .btn-primary:hover,
  .thumb-card:hover,
  .card:hover {
    transform: translateY(-2px);
  }
  
  .input:hover {
    border-color: var(--primary);
  }
}

/* END 완벽한 12그리드 & 반응형 */