/* ============================================================
   QuickTools — SEO Content Sections (공유 스타일)
   모든 툴 페이지와 메인 페이지에서 링크해서 사용합니다.
   ============================================================ */

/* ════════════════════════════════════════════════
   DESIGN SYSTEM | 전역 공유 토큰 & 유틸리티 클래스
   이 파일은 홈 + 모든 도구 페이지가 링크하는 유일한 공통 CSS라
   여기에 두면 도구 페이지에서 클래스명만 붙여 바로 재사용할 수 있다.

   IMPORTANT: 아래 토큰은 전부 비색상(간격/크기/폰트스택)이다.
   색은 기존 테마 변수(--border-color, --bg-primary)를 그대로 참조하므로
   라이트/다크 전환이 자동으로 따라오고, 새 색상값은 추가하지 않는다.
   ════════════════════════════════════════════════ */
:root {
  --dot-gap: 22px;   /* 도트그리드 간격 */
  --dot-size: 1px;   /* 도트 반지름 */
  --fold-size: 14px; /* 종이접기 모서리 한 변 */
  --font-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* ── 도트그리드 배경 ──
   색이 --border-color라 라이트(#e2e5ef)/다크(#2e2e33) 모두 자연스럽게 깔린다.
   내용이 얹히는 컨테이너에 붙이고, 자식 요소는 z-index 없이도 위에 그려진다. */
.dot-grid-bg {
  background-image: radial-gradient(var(--border-color) var(--dot-size), transparent 0);
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: 0 0;
}

/* ── 종이접기 모서리 ──
   [왜 이렇게 바뀌었나 — 반복된 "삼각형이 두 색으로 갈라져 보인다"의 진짜 원인]
   직전 구현은 코너를 clip-path로 잘라내고, 그 위에 ::after(border-width 트릭)
   삼각형을 따로 얹는 "도형 2개" 방식이었다. 그런데 두 도형의 기준 상자가 다르다:
     · clip-path  → 기준이 border-box
     · position:absolute 자식(::after) → 기준이 padding-box
   그래서 테두리 두께만큼 정확히 어긋난다. 실측(카드 폭 324px, --fold-size 14px,
   border 1px) 결과:
     clip 컷 코너 사각형 : left 310 / top  0 / right 324 / bottom 14
     ::after 삼각형 상자  : left 309 / top  1 / right 323 / bottom 15
   → x -1px, y +1px. 잘려나간 자리의 위·오른쪽 가장자리에 테두리 두께만큼
   L자 틈이 남고 그 사이로 페이지 배경(도트그리드)이 비친다. 이게 "제3의 색",
   즉 삼각형이 두 색으로 갈라져 보이던 정체다. (border가 2px인
   .password-output-wrap 은 이 틈이 2px이라 더 심했다.)

   [해결 — 도형을 하나로]
   접힌 면을 별도 요소로 얹지 않고, 대상 요소 "자신의 background 레이어"로 그린다.
   background-origin을 border-box로 두면 clip-path와 완전히 같은 기준 상자를
   쓰게 되므로, 대각선이 단 하나의 좌표계에서만 정의된다 → 테두리 두께가 몇이든
   어긋날 수가 없다. 45deg 그라디언트의 50% 하드스톱 선은 정사각형 상자의
   주대각선과 정확히 일치하고, 그 선이 곧 clip-path의 컷 라인이다.

   [접힌 면의 색 — 단색, 레이어도 하나]
   접힌 면은 var(--border-color) 단색 삼각형 하나가 전부다.
   라이트에서는 카드보다 어둡고(#e2e5ef) 다크에서는 밝아(#2a2e48) 두 테마
   모두에서 접힌 면이 자연스럽게 구분된다.

   한때 입체감을 위해 접힌 면의 두 변 바깥에 옅은 그림자 띠를 깔았는데,
   그 띠가 접힌 면 경계선 바로 옆에 붙어 있어서 확대하면
   [접힌 면 경계선] + [바로 옆 어두운 띠] 가 "테두리가 두 겹"으로 보였다.
   격리 테스트로 확인한 뒤 걷어냈다. 이제 이 코너에서 선은 딱 하나 —
   접힌 면과 잘려나간 배경이 만나는 대각선뿐이다.
   (참고: clip-path는 잘린 단면에 테두리를 새로 그리지 않는다. 카드 border를
   빨강 5px로 바꿔 확인했고, 대각선에는 border가 전혀 그려지지 않았다.)

   대상 요소에 position:relative 가 이미 있어야 한다. */
.fold-corner {
  clip-path: polygon(0 0, calc(100% - var(--fold-size)) 0, 100% var(--fold-size), 100% 100%, 0 100%);

  /* IMPORTANT: clip-path와 같은 기준 상자(border-box)를 써야 대각선이 어긋나지 않는다 */
  background-origin: border-box;
  background-clip: border-box;
  background-repeat: no-repeat;
  /* 접힌 면(종이 뒷면) — var(--border-color) 단색.
     여기 쓰인 linear-gradient는 색을 섞기 위한 게 아니라 50% 하드스톱으로
     "삼각형 모양"을 만들기 위한 것이다(도형 정의부이므로 건드리지 말 것). */
  background-image: linear-gradient(45deg, var(--border-color) 50%, transparent 50%);
  background-size: var(--fold-size) var(--fold-size);
  background-position: right 0 top 0;
}

/* ── 숫자 표시용 모노스페이스 ──
   tabular-nums로 자릿수가 바뀌어도 폭이 흔들리지 않는다. */
.num-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.seo-content {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border-color);
}

.seo-intro {
  margin-bottom: 36px;
}

.seo-intro h2 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.seo-intro p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.85;
  max-width: 680px;
}

/* ── Use-cases + How-to Grid ── */
.seo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 36px;
}

.seo-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  transition: border-color 0.25s;
}

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

.seo-card h3 {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text-primary);
}

.seo-card ul,
.seo-card ol {
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.seo-card li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ── FAQ ── */
.faq-section {
  margin-bottom: 36px;
}

.faq-section > h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.faq-item {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--bg-secondary);
  transition: border-color 0.2s;
}

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

.faq-item summary {
  padding: 15px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  -webkit-user-select: none;
}

.faq-item summary::before {
  content: 'Q.';
  color: var(--primary-color);
  font-weight: 800;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item[open] summary {
  color: var(--primary-color);
}

.faq-answer {
  padding: 12px 20px 16px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.8;
  border-top: 1px solid var(--border-color);
}

/* ── Related Tools ── */
.related-section {
  margin-bottom: 20px;
}

.related-section h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text-primary);
}

.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.related-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  background: var(--bg-secondary);
  transition: all 0.2s;
}

.related-link:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: var(--primary-light);
  transform: translateY(-1px);
}

/* ── Related Tools | 카드형 (related-tools.js가 채운다) ──
   related-tools-grid가 비어있는 동안(JS 렌더 전/미해당 페이지)은 자리만 차지하지 않도록
   :empty에서 접어둔다. */
.related-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.related-tools-grid:empty { display: none; }

.related-tool-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-secondary);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.related-tool-card:hover,
.related-tool-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px var(--shadow-hover);
}

.related-tool-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary-color);
}

.related-tool-icon svg {
  width: 20px;
  height: 20px;
}

.related-tool-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.related-tool-title {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text-primary);
}

.related-tool-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-tool-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-light);
}

.related-tool-arrow svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
  .related-tool-desc { white-space: normal; }
}

/* ── Main page SEO section ── */
.about-section {
  margin-top: 60px;
  padding: 40px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
}

.about-section h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}

.about-section p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 20px;
}

.about-section p:last-child { margin-bottom: 0; }

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}

.use-case-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px;
}

.use-case-card h3 {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.use-case-card p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 680px) {
  .seo-grid { grid-template-columns: 1fr; }
  .use-cases-grid { grid-template-columns: 1fr; }
  .about-section { padding: 24px 20px; }
  .seo-intro h2 { font-size: 1.2rem; }
}

/* ══════════════════════════════════════
   Footer — 홈 + 모든 도구 페이지 공통
   src/partials/footer.html 이 이 클래스들을 쓴다. 도구 페이지는 /style.css 를
   로드하지 않으므로(공통 CSS 는 이 파일 하나뿐) 여기에 둬야 전 페이지에 적용된다.
   style.css 에서 그대로 옮겨온 것이라 규칙 내용은 변경되지 않았다.
   ══════════════════════════════════════ */
.main-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  margin-top: auto;
  padding: 44px 24px 28px;
  transition: background 0.3s, border-color 0.3s;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-color);
}

/* 브랜드 열 */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-logo {
  font-size: 1.1rem;
  font-weight: 800;
  display: block;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-brand p {
  font-size: 0.8rem;
  color: var(--text-light);
  line-height: 1.65;
  margin: 0;
}

.footer-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.footer-trust-chip {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 2px 8px;
  letter-spacing: 0.01em;
  transition: border-color 0.2s, color 0.2s;
}

/* 링크 열 공통 */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.footer-col h3 {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}

.footer-col a {
  display: inline-block;
  padding: 5px 2px;
  margin: -1px -2px;
  font-size: 0.82rem;
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-col a:hover {
  color: var(--primary-color);
}

.footer-col-divider {
  height: 1px;
  background: var(--border-color);
  margin: 6px 0;
}

/* 준비 중 항목 */
.footer-coming {
  font-size: 0.82rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 5px;
}

.footer-coming::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-color);
  flex-shrink: 0;
}

/* 정책 링크 */
.footer-policy-link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.2s;
}

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

.policy-soon {
  font-size: 0.62rem;
  color: var(--text-light);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 1px 5px;
  opacity: 0.7;
}

/* 하단 바 */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-copy {
  font-size: 0.75rem;
  color: var(--text-light);
  margin: 0;
}

.footer-note {
  font-size: 0.72rem;
  color: var(--text-light);
  margin: 0;
}

/* ── 모바일 ── */
@media (max-width: 640px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}