/* ===========================================================================
   이미지 툴킷 — 대시보드 UI
   밝고 여백 넓은 SaaS 톤. 아이콘은 인라인 SVG 마스크로 그린다.
   외부 CDN 에 의존하지 않는다 — 유일한 예외는 index.php 가 불러오는 Pretendard
   가변 폰트뿐이다(font-display:swap 이 내장돼 있어 차단되면 아래 시스템 폰트
   스택으로 조용히 대체된다). 아이콘 폰트·JS·CSS 프레임워크는 여전히 들이지 않는다.
   =========================================================================== */

:root {
  color-scheme: light;

  /* 계약 토큰 — 이름 유지 */
  --bg: #f3f5f7;
  --surface: #ffffff;
  --border: #e2e7ec;
  --text: #151a20;
  --muted: #5d6b7a;
  --accent: #0d7c6d;
  --danger: #bf3a2e;
  --radius: 14px;

  /* 파생 토큰 */
  --accent-ink: #ffffff;
  --accent-soft: #e7f4f1;
  --accent-line: #b6dcd4;
  --danger-soft: #fdedeb;
  --danger-line: #f2c7c1;
  --surface-2: #f8fafb;
  --shadow-1: 0 1px 2px rgba(16, 32, 40, .05), 0 1px 3px rgba(16, 32, 40, .04);
  --shadow-2: 0 1px 2px rgba(16, 32, 40, .05), 0 10px 26px -8px rgba(16, 32, 40, .14);

  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --theme-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.8A8.6 8.6 0 0 1 9.2 3.5a8.6 8.6 0 1 0 11.3 11.3Z'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1216;
  --surface: #161c22;
  --border: #28323b;
  --text: #e7edf2;
  --muted: #94a4b3;
  --accent: #4ed6ba;
  --danger: #ff8f81;
  --accent-ink: #04231e;
  --accent-soft: #15302b;
  --accent-line: #235349;
  --danger-soft: #2d1c1a;
  --danger-line: #56302c;
  --surface-2: #1b222a;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 30px -10px rgba(0, 0, 0, .7);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a4b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --theme-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M4.6 4.6 6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1216;
    --surface: #161c22;
    --border: #28323b;
    --text: #e7edf2;
    --muted: #94a4b3;
    --accent: #4ed6ba;
    --danger: #ff8f81;
    --accent-ink: #04231e;
    --accent-soft: #15302b;
    --accent-line: #235349;
    --danger-soft: #2d1c1a;
    --danger-line: #56302c;
    --surface-2: #1b222a;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 30px -10px rgba(0, 0, 0, .7);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a4b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --theme-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M4.6 4.6 6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4'/%3E%3C/svg%3E");
  }
}

/* --- 기본 ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* Pretendard 가 index.php 의 CDN 링크로 로드되면 맨 앞에서 매치된다. CDN 이 막히거나
     느리면(혹은 font-display:swap 이 대체 중이면) 뒤의 시스템 폰트 스택이 그대로 쓰이므로
     이 목록 자체가 이미 CDN 차단에 대한 대비다. */
  font-family: "Pretendard Variable", system-ui, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  /* 한국어는 어절 단위로 끊고, 끊을 수 없는 긴 토큰(파일명 등)만 강제로 접는다.
     — 375px 폭에서 가로 스크롤이 생기지 않게 하는 핵심 두 줄이다. */
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

/* JS 가 hidden 속성으로 옵션·패널을 껐다 켠다.
   display 를 지정하는 규칙이 hidden 을 이기지 못하도록 여기서 못 박는다. */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3 { letter-spacing: -.018em; text-wrap: balance; }
/* 마지막 줄에 한 어절만 남는 것을 막는다. 지원하지 않는 브라우저는 그냥 무시한다. */
p, .empty, .tab-sub { text-wrap: pretty; }

/* 아이콘 — 인라인 SVG 를 마스크로 써서 currentColor 를 따라가게 한다(테마 대응). */
.ico,
.dropzone::before,
.brand::before,
.theme-icon,
.shield-mark,
.notice-mark,
.tabs button::before,
.facts li::before,
a.ghost.download::before {
  -webkit-mask-image: var(--glyph);
  mask-image: var(--glyph);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentColor;
}

/* --- 상단 바 -------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 11px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
}
.brand::before {
  content: "";
  width: 20px;
  height: 20px;
  color: var(--accent);
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='4.5' width='17.6' height='15' rx='2.6'/%3E%3Ccircle cx='8.8' cy='10' r='1.5'/%3E%3Cpath d='m4 17.6 4.8-4.4 3.6 3.2 3-2.6 4.6 4'/%3E%3C/svg%3E");
}
.theme-btn { font-size: 13px; padding: 8px 13px; }
.theme-icon {
  width: 16px;
  height: 16px;
  --glyph: var(--theme-glyph);
}

/* --- 레이아웃 ------------------------------------------------------------- */

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 8px;
}

.hero { margin: 44px 0 26px; }
.hero h1 {
  margin: 0;
  font-size: clamp(25px, 4.4vw, 33px);
  line-height: 1.28;
  font-weight: 700;
}
.lede {
  margin: 12px 0 0;
  max-width: 44rem;
  font-size: 15.5px;
  color: var(--muted);
}

/* --- 개인정보 안내 패널 (이 화면에서 가장 눈에 띄어야 하는 요소) ---------- */

.shield {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin: 0 0 30px;
  padding: 20px 22px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.shield-mark {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  color: var(--accent);
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 4.8 5.7v5.4c0 4.4 3 8.2 7.2 9.2 4.2-1 7.2-4.8 7.2-9.2V5.7L12 2.8Z'/%3E%3Cpath d='m9.2 12.1 2 2 3.6-3.9'/%3E%3C/svg%3E");
}
.shield-body { min-width: 0; }
.shield h2 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
}
.shield p {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}
.facts li {
  position: relative;
  padding: 4px 12px 4px 27px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}
.facts li::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  color: var(--accent);
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 6.8'/%3E%3C/svg%3E");
}

/* --- 알림 줄 -------------------------------------------------------------- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.notice-mark {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  color: var(--accent);
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 11.1v5.3'/%3E%3Cpath d='M12 7.7h.01'/%3E%3C/svg%3E");
}
.notice strong { color: var(--text); font-weight: 700; }
.notice-danger {
  margin: 0 0 26px;
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 600;
}

/* --- 도구 선택 탭 --------------------------------------------------------- */

.tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 0 0 34px;
}
.tabs button {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 13px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.tabs button::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 21px;
  height: 21px;
  margin-top: 2px;
  color: var(--muted);
}
.tabs button[data-panel="panel-compress"]::before {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 14.5h5v5'/%3E%3Cpath d='m3.2 20.8 6.3-6.3'/%3E%3Cpath d='M19.5 9.5h-5v-5'/%3E%3Cpath d='m20.8 3.2-6.3 6.3'/%3E%3C/svg%3E");
}
.tabs button[data-panel="panel-bg"]::before {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.6'/%3E%3Ccircle cx='6' cy='18' r='2.6'/%3E%3Cpath d='M20 4 8.4 15.8'/%3E%3Cpath d='m14.6 14.6 5.4 5.4'/%3E%3Cpath d='m8.3 8.2 3.4 3.4'/%3E%3C/svg%3E");
}
.tab-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
}
.tab-sub {
  grid-column: 2;
  grid-row: 2;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.tabs button:hover { border-color: var(--accent-line); }
.tabs button[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow-2);
}
.tabs button[aria-selected="true"]::before,
.tabs button[aria-selected="true"] .tab-title { color: var(--accent); }
.tabs button[aria-selected="true"] .tab-sub { color: var(--text); }

/* --- 단계(1·2·3) ---------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 16px;
  row-gap: 13px;
  padding-bottom: 30px;
}
.step:last-child { padding-bottom: 0; }
/* 단계를 잇는 세로 선 — 흐름이 눈에 보이게 하는 이 화면의 표식 */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 42px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--border);
}
.step-num {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.step-heading { grid-column: 2; grid-row: 1; min-width: 0; }
.step-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
}
.step-sub {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.step-body { grid-column: 2; grid-row: 2; min-width: 0; }

.panel-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

/* --- 드롭존 --------------------------------------------------------------- */
/* 안내 문구는 JS 가 textContent 로 갈아끼운다 — 아이콘은 반드시 의사요소로 그린다. */

.dropzone {
  display: grid;
  place-items: center;
  gap: 13px;
  min-height: 170px;
  padding: 30px 20px;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.dropzone::before {
  content: "";
  width: 34px;
  height: 34px;
  opacity: .8;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 13V6.5a2 2 0 0 0-2-2h-13a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h7.2'/%3E%3Ccircle cx='9' cy='9.4' r='1.4'/%3E%3Cpath d='m3.9 15.9 3.8-3.4 3.2 2.8'/%3E%3Cpath d='M18 21.2v-6.6'/%3E%3Cpath d='m15.6 17 2.4-2.4 2.4 2.4'/%3E%3C/svg%3E");
}
.dropzone:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}
.dropzone.dragging {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- 옵션 필드 ------------------------------------------------------------ */

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 22px 24px;
}
.field { min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field > label,
.field-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.val {
  display: inline-block;
  margin-left: 5px;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}
.hint {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sub-label {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.field.check {
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.field.check:has(input:checked) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.check-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  margin: 0;
  cursor: pointer;
}
.check-row input { width: 18px; height: 18px; margin: 2px 0 0; }
.check-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.check-row .hint { margin-top: 4px; }

/* --- 폼 컨트롤 ------------------------------------------------------------ */

select,
input[type="number"],
input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px 18px;
  cursor: pointer;
}
select:hover,
input[type="number"]:hover,
input[type="text"]:hover { border-color: var(--accent-line); }

input[type="range"] {
  width: 100%;
  margin: 6px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }

input[type="color"] {
  width: 100%;
  max-width: 130px;
  height: 42px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
/* 기본값이 흰색이라 테두리가 없으면 밝은 배경에서 빈 칸처럼 보인다. */
input[type="color"]::-webkit-color-swatch { border: 1px solid var(--border); border-radius: 7px; }

input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
}
input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

progress {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 8px;
  margin-top: 9px;
  border: none;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
progress::-webkit-progress-bar { background: var(--border); }
progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--accent); }

/* --- 버튼 ----------------------------------------------------------------- */

button.primary {
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-1);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s, transform .06s;
}
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
button.primary:active:not(:disabled) { transform: translateY(1px); }
button.primary:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }

button.ghost,
a.ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
button.ghost:hover:not(:disabled),
a.ghost:hover { border-color: var(--accent-line); background: var(--accent-soft); }
button.ghost:disabled { opacity: .45; cursor: not-allowed; }

a.ghost.download::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--accent);
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6v11'/%3E%3Cpath d='m7.4 10.4 4.6 4.6 4.6-4.6'/%3E%3Cpath d='M4.6 20.4h14.8'/%3E%3C/svg%3E");
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.actions-hint {
  flex: 1 1 240px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* 실행 메시지 — 내용이 있을 때만 보인다. */
.run-msg { margin: 0; font-size: 13px; }
.run-msg:empty { display: none; }
.run-msg:not(:empty) {
  margin-top: 16px;
  padding: 11px 14px;
  border: 1px solid var(--danger-line);
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
  font-weight: 600;
}
/* 정보성 변형 — "고급 압축을 불러오지 못해 기본 인코더로 처리했습니다" 처럼 설계대로
   동작한 결과를 알리는 문구는 실패가 아니다. 같은 자리에 같은 크기로 두되 위험(붉은색)
   으로 읽히지 않게 한다. .notice 와 같은 강조색 조합을 쓴다. */
.run-msg.info:not(:empty) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
.run-msg .muted { font-weight: 400; }

/* --- 결과 ----------------------------------------------------------------- */

#sq-results,
#bg-results { display: grid; gap: 14px; }
#sq-results:empty,
#bg-results:empty { display: none; }

#sq-results .card,
#bg-results .card {
  position: relative;
  padding: 17px 19px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-size: 14px;
}
#sq-results .card p,
#bg-results .card p { margin: 6px 0 0; }

.result-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.result-stats {
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.result-msg { font-size: 13.5px; }
.result-diag {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
}
.result-actions { margin-top: 14px !important; }
/* 넓은 화면에서는 내려받기 버튼을 카드 머리말 오른쪽에 올린다 — 파일명이 길어도
   겹치지 않도록 좁은 화면에서는 그냥 흐름대로 아래에 둔다. */
@media (min-width: 721px) {
  .result-actions {
    position: absolute;
    top: 15px;
    right: 18px;
    margin: 0 !important;
    max-width: 45%;
  }
  #sq-results .card > .result-name,
  #bg-results .card > .result-name,
  #sq-results .card > .result-stats,
  #bg-results .card > .result-stats { padding-right: calc(45% + 12px); }
}

#sq-results .card.error,
#bg-results .card.error {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

/* 처리 중 카드(파일명 텍스트만 있는 상태)에 조용한 맥박을 준다. */
#sq-results .card:not(:has(*)),
#bg-results .card:not(:has(*)) {
  color: var(--muted);
  animation: pending 1.4s ease-in-out infinite;
}
@keyframes pending { 50% { opacity: .55; } }

.empty {
  margin: 0;
  padding: 30px 22px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}
.empty b { color: var(--text); }
#sq-results:not(:empty) + .empty,
#bg-results:not(:empty) + .empty { display: none; }

/* --- 원본 / 결과 비교 슬라이더 -------------------------------------------- */

.compare-host {
  width: 100%;
  max-width: 560px;
  margin: 14px 0 0;
}
.compare {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
}
.compare img { display: block; width: 100%; height: auto; }
/* 체커보드는 결과 층(.compare-after) 바로 뒤에 깔아야 한다 — 컨테이너(.compare)에
   걸면 결과보다 먼저 그려지는 원본(.compare-before)이 그 위를 덮어, 결과의 투명
   픽셀로 체커보드가 아니라 원본이 비쳐 보이는 버그가 생긴다. */
.compare.checker .compare-after {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #d8dade 25%, transparent 25%, transparent 75%, #d8dade 75%),
    linear-gradient(45deg, #d8dade 25%, transparent 25%, transparent 75%, #d8dade 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}
.compare-after {
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
  border-right: 2px solid var(--accent);
}
.compare-after img { width: auto; max-width: none; height: 100%; }
.compare-handle {
  position: absolute;
  left: 0;
  bottom: 8px;
  width: 100%;
  margin: 0;
  -webkit-appearance: auto;
  appearance: auto;
  background: transparent;
  accent-color: var(--accent);
}

/* 좌우 비교를 유지한 채 크게 보는 버튼 — 미니 비교 뷰 우상단에 얹는다. */
.compare-enlarge {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-1);
}
.compare-enlarge:hover { border-color: var(--accent-line); background: var(--accent-soft); }

/* --- 비교 뷰 확대 모달 ------------------------------------------------------ */

.compare-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 16, .62);
}
.compare-modal-panel {
  position: relative;
  z-index: 1;
  width: 900px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 46px 18px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.compare-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.compare-modal-close:hover { border-color: var(--accent-line); background: var(--accent-soft); }
/* 모달 안에서는 카드 폭 제한(max-width:560px) 대신 패널 폭을 다 쓴다. */
.compare-modal-host.compare-host { max-width: none; width: 100%; margin: 0; }

/* 배경 지우기는 실시간 미리보기가 없어 결과 카드가 곧 사용자가 화질·투명 경계를
   판단하는 유일한 화면이다 — 압축 탭의 실시간 미리보기(아래)와 같은 이유로,
   기본 카드 폭 제한(560px)을 풀어 크게 보여준다. */
#bg-results .compare-host { max-width: 100%; }

/* --- 압축 탭 실시간 미리보기 ------------------------------------------------ */

.sq-preview {
  margin-top: 22px;
  padding: 16px 17px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.sq-preview-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.sq-preview-scope {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.sq-preview-file {
  margin: 13px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
.sq-preview-stats {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text);
}
.sq-preview-status {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
/* 안내가 없을 땐 자리를 차지하지 않게 한다. display 를 끄면 aria-live 영역이
   접근성 트리에서 사라질 수 있어 여백만 접는다. */
.sq-preview-status:empty { margin: 0; }
/* 계산 중에는 이전 숫자를 지우지 않고 흐리게만 둔다 — 값이 잠깐 비어 보이지 않게. */
.sq-preview.is-busy .sq-preview-stats { opacity: .45; }
.sq-preview.is-busy .sq-preview-status { animation: pending 1.4s ease-in-out infinite; }
.sq-preview.is-failed .sq-preview-status { color: var(--danger); font-weight: 600; }
/* 이 기능의 목적이 화질을 눈으로 판단하는 것이다 — 결과 카드(560px)보다 크게 준다. */
.sq-preview .compare-host { max-width: 100%; margin-top: 13px; }

/* --- 바닥 통계 ------------------------------------------------------------ */

.footer {
  margin-top: 60px;
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 24px 52px;
  text-align: center;
}
.stat-bar {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.footer-note {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.muted { color: var(--muted); font-size: 13px; }
.error { color: var(--danger); }

/* --- 좁은 화면 ------------------------------------------------------------ */

@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .topbar-inner { padding: 10px 16px; }
  .wrap { padding: 0 16px 8px; }
  .hero { margin: 30px 0 22px; }
  .shield { flex-direction: column; gap: 12px; padding: 17px 18px; }
  .tabs { grid-template-columns: 1fr; }

  /* 세로 선을 걷어내고 번호를 제목 옆에 붙인 뒤, 본문은 폭을 다 쓰게 한다.
     — 좁은 화면에서 들여쓰기 때문에 가로 스크롤이 생기지 않게 하는 처리다. */
  .step { grid-template-columns: 28px 1fr; column-gap: 11px; padding-bottom: 26px; }
  .step:not(:last-child)::before { display: none; }
  .step-num { width: 28px; height: 28px; font-size: 12.5px; }
  .step-body { grid-column: 1 / -1; }
  .step-title { font-size: 15.5px; }

  .panel-card { padding: 16px; }
  .sq-preview { margin-top: 18px; padding: 13px 14px 15px; }
  .fields { grid-template-columns: 1fr; gap: 20px; }
  .pair { grid-template-columns: 1fr; }
  .actions > button { flex: 1 1 100%; }
  .footer-inner { padding: 20px 16px 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}