/* static/css/seo-pages.css — 변환쌍 랜딩페이지·포맷 사전 전용 스타일
 *
 * 이 페이지들은 검색 유입의 착지점이라 "도구가 바로 보이고, 그 아래에 읽을거리가
 * 있다"는 순서를 지킨다. 히어로(도구)는 기존 .hero/.glass-card를 그대로 재사용하고,
 * 여기서는 그 아래 콘텐츠 층(설명·단계·FAQ·관련 링크)만 정의한다.
 *
 * hover는 실제 클릭 대상(링크 칩·카드 링크·아코디언 버튼)에만 건다 — 배경 역할을
 * 하는 패널(.seo-panel)에는 걸지 않는다(CLAUDE.md §5).
 */

/* ─── 간결 푸터 ─────────────────────────────────────────────────────────── */
/* 브랜드 · 한 줄 소개 · 구분선 · 발행처/연락처. 4열 사이트맵을 걷어낸 자리(2026-08-14).
   hover는 실제 클릭 대상(브랜드 링크·메일·법적 링크)에만 건다. */
/* 세로 여백은 components.css의 .site-footer가 이미 갖고 있으므로 여기서 또 주지 않는다
   (둘을 더하면 푸터가 두 배로 두꺼워진다). */
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* 브랜드 표기 — 클릭 대상이 아니므로 hover·focus 연출을 두지 않는다(CLAUDE.md §5:
   hover는 실제 조작 대상에만). 링크가 아니라 전환 효과도 필요 없다. */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* 파비콘 이미지 자체가 마크다 — 보라 원 배경을 그림이 이미 갖고 있어 배경·라운드를
   따로 씌우지 않는다(씌우면 원 위에 사각형이 겹쳐 보인다). */
.footer-brand-mark {
  display: block;
  width: 30px;
  height: 30px;
  flex: none;
}
.footer-brand-name {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.015em;
  color: var(--text-primary);
}

.footer-tagline {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.footer-rule {
  width: 100%;
  height: 0;
  margin: 14px 0 4px;
  border: 0;
  border-top: 1px solid var(--border);
}

.footer-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
/* 발행처 링크 — ⓒ 기호까지 한 덩어리가 클릭 영역이다. 클릭 대상이므로 hover·focus 피드백을 준다. */
.footer-company {
  white-space: nowrap;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 160ms ease;
}
.footer-company:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.footer-company:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-left: auto; }
.footer-legal a {
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color 160ms ease;
}
.footer-legal a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 640px) {
  .footer-legal { margin-left: 0; }
  .footer-bottom { gap: 6px 14px; }
}

/* ─── 이동 경로(breadcrumb) ─────────────────────────────────────────────── */
.seo-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.seo-breadcrumb a {
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  transition: color 160ms ease, background-color 160ms ease;
}
.seo-breadcrumb a:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
.seo-breadcrumb a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.seo-breadcrumb-sep {
  color: var(--border);
  user-select: none;
}
.seo-breadcrumb-current {
  color: var(--text-primary);
  font-weight: 600;
}

/* ─── 신뢰 배지 줄 ──────────────────────────────────────────────────────── */
.seo-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.seo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
}
.seo-badge svg { flex: none; color: var(--accent); }

/* ─── 콘텐츠 층 공통 ────────────────────────────────────────────────────── */
.seo-content {
  max-width: 860px;
  margin-inline: auto;
}
.seo-block { margin-top: 56px; }
.seo-block:first-child { margin-top: 0; }

.seo-h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.seo-lead {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-secondary);
}
.seo-lead strong { color: var(--text-primary); font-weight: 600; }

/* 배경 역할 패널 — 클릭 대상이 아니므로 hover 없음 */
.seo-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

/* ─── "무엇이 달라지나요" 목록 ──────────────────────────────────────────── */
.seo-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.seo-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.seo-note-mark {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
}

/* ─── 이용 단계 ─────────────────────────────────────────────────────────── */
.seo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: seo-step; }
.seo-step { display: flex; gap: 14px; align-items: flex-start; }
.seo-step-num {
  flex: none;
  counter-increment: seo-step;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.seo-step-num::before { content: counter(seo-step); }
.seo-step-title { font-size: 15px; font-weight: 650; color: var(--text-primary); margin-bottom: 4px; }
.seo-step-text { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); }

/* ─── FAQ 아코디언 ──────────────────────────────────────────────────────── */
.seo-faq { display: grid; gap: 10px; }
.seo-faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}
.seo-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  font-weight: 620;
  color: var(--text-primary);
  transition: background-color 160ms ease;
}
.seo-faq-q:hover { background: var(--surface-2); }
.seo-faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.seo-faq-chevron {
  flex: none;
  color: var(--text-secondary);
  transition: transform 220ms ease;
}
.seo-faq-item[open] .seo-faq-chevron { transform: rotate(180deg); }
.seo-faq-a {
  padding: 0 18px 18px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-secondary);
}
/* <details>의 기본 삼각형 제거 */
.seo-faq-item summary { list-style: none; }
.seo-faq-item summary::-webkit-details-marker { display: none; }

/* ─── 관련 변환 링크 칩 ─────────────────────────────────────────────────── */
.seo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.seo-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.seo-chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  transform: translateY(-1px);
}
.seo-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seo-chip-arrow { color: var(--text-secondary); font-weight: 400; }
.seo-chip:hover .seo-chip-arrow { color: var(--accent); }

/* ─── 포맷 설명 2단 카드 ────────────────────────────────────────────────── */
.seo-format-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.seo-format-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.seo-format-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.seo-format-ext {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.seo-format-name { font-size: 15px; font-weight: 650; color: var(--text-primary); }
.seo-format-desc { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); }
.seo-format-use {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-secondary);
}
.seo-format-use-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin-bottom: 4px;
}

/* ─── 포맷 사전 목록 ────────────────────────────────────────────────────── */
.seo-cat-block { margin-top: 40px; }
.seo-cat-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.seo-cat-count { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.seo-format-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.seo-format-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.seo-format-link:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.seo-format-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seo-format-link-ext { font-size: 14px; font-weight: 750; color: var(--text-primary); }
.seo-format-link-name { font-size: 12.5px; color: var(--text-secondary); }

/* ─── 하단 CTA ──────────────────────────────────────────────────────────── */
.seo-cta {
  margin-top: 56px;
  padding: 28px 24px;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--tint-50), var(--surface-2));
  border: 1px solid var(--border);
  text-align: center;
}
.seo-cta-title { font-size: 19px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.seo-cta-desc { font-size: 14.5px; color: var(--text-secondary); margin-bottom: 18px; }

@media (max-width: 767px) {
  .seo-block { margin-top: 44px; }
  .seo-h2 { font-size: 20px; }
  .seo-panel { padding: 18px; }
  .seo-format-list { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

/* ─── 레이아웃 이동(CLS) 방지 ───────────────────────────────────────────── */
/* 아래 컨테이너들은 서버가 빈 div로 내려보내고 JS가 내용을 채운다. 예약 높이가 없으면
   내용이 들어오는 순간 아래 요소가 통째로 밀려 Core Web Vitals의 CLS가 나빠진다.
   JS를 고치지 않고 CSS만으로 삽입 전후 박스 크기를 맞춘다. */
#conversion-picker { min-height: 46px; }
#upload-queue:empty { min-height: 0; }
.hero-card #inline-converter:empty { min-height: 0; }

@media (max-width: 767px) {
  /* 모바일에서는 피커가 세로로 접히므로 예약 높이를 그에 맞춘다 */
  #conversion-picker { min-height: 96px; }
}

/* ─── 파일 목록 마크 ─────────────────────────────────────────────────────── */
/* 업로드 목록(대기열·변환기·압축기·묶음)의 항목 앞 자리. 원래는 올린 파일의 축소
   미리보기가 들어갔으나 2026-08-14 사용자 지시로 사이트 마크로 통일했다.
   기존 썸네일 컨테이너(.ic-row-thumb·.ic-bundle-thumb)가 36px 사각형에 회색 배경과
   overflow:hidden을 갖고 있으므로, 마크가 그 안에서 배경 없이 꽉 차게 그려지도록 맞춘다. */
.file-mark {
  display: block;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  line-height: 0;
}
.file-mark svg { width: 100%; height: 100%; display: block; }

/* 컨테이너가 회색 배경을 깔던 자리 — 마크가 원형이라 배경이 남으면 지저분해 없앤다 */
.ic-row-thumb, .ic-bundle-thumb { background: transparent; }