/* ========================================
   tools.css — 도구 앱셸 (사이드바 + 도구 본문)

   🔴 **진열 페이지는 2026-09-05 에 없앴다.** 카드는 랜딩(css/landing.css)이
      그리고, 여기 있던 `.tools-page`/`.tools-grid`/`.tool-card`/`.tools-code`
      규칙은 전부 지웠다. 진열이 하던 일은 랜딩·사이드바·마이페이지로 갔다.
      → 카드 스타일을 다시 여기 만들지 말 것. 랜딩 것을 고치면 된다.

   규칙은 docs/prd-redesign.md. 이 파일이 지키는 것:
     · 바탕은 순백 — 색은 콘텐츠(아이콘·배지)가 낸다
     · 경계는 테두리 몫. 그림자는 호버 보조만
     · 오렌지는 액센트(활성 표시). 주 버튼은 --ink-900 검정
   ======================================== */

/* 아이콘 SVG — 사이드바 · 잠금화면 · 설명 페이지가 공용으로 쓴다.
   🔴 진열이 없어진 뒤에도 **남겨야 한다** (toolIconSvg() 가 이 클래스를 박는다). */
.tool-icon-svg {
  width: 22px;
  height: 22px;
}
/* ========================================
   도구 앱셸 — 전체 높이 좌측 사이드바 + 본문
   (includes/tool-layout.php 가 그린다)

   🔴 **도구 화면에는 상단 nav 가 없다.** header.php 가 $appShell 일 때 헤더를
      통째로 내보내지 않는다. 사이드바가 곧 내비이므로 상단에 또 두면 같은 역할이
      두 줄이 되고 세로 공간을 먹는다 (docs/prd-redesign.md §7).

   🔴 사이트 전체를 사이드바로 바꾸지는 **않았다.** 공급사 15열 표는
      --container-wide(1400) 를 온전히 써야 하고, 랜딩은 비로그인 유입이
      착지하는 곳이라 상단 nav 가 맞다. 사이드바는 **도구 화면에서만** 뜬다.

   🔴 진열(pages/tools/index.php)도 상단 nav 다 — 파는 화면이라 사이트의
      다른 곳으로 나갈 길이 있어야 한다.
   ======================================== */

/* 사이드바가 fixed 로 서므로 본문을 그만큼 밀어 준다.
   폭은 --tool-sidebar-w 한 곳에서만 정한다 — 접힘/펼침이 이 값만 바꾼다. */
.is-app-shell {
  --tool-sidebar-w: 216px;
  --tool-rail-w: 60px;
}

.is-app-shell.is-sidebar-collapsed {
  --tool-sidebar-w: var(--tool-rail-w);
}

.tool-shell {
  display: block;
  padding-left: var(--tool-sidebar-w);
  transition: padding-left var(--transition-fast);
}

/* ────────────── 사이드바 ────────────── */
/* 🔴 sticky 가 아니라 fixed 다. sticky 는 부모 높이에 갇혀서 도구 본문이 짧으면
   사이드바도 같이 짧아진다 — 화면 좌측을 끝에서 끝까지 채우려면 fixed 여야 한다. */
.tool-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--tool-sidebar-w);
  z-index: 900;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-right: 1px solid var(--ink-200);
  transition: width var(--transition-fast);
}

/* ── 상단: 로고 ──
   🔴 도구 화면에서 사이트 밖으로 나가는 **유일한 길**이다. 상단 nav 를 없앴으므로
      이게 없으면 사용자가 도구 안에 갇힌다. */
.tool-sidebar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;               /* 옛 헤더와 같은 높이 — 페이지를 옮겨도 윗선이 안 튄다 */
  padding: 0 14px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--ink-200);
}

.tool-sidebar-logo {
  display: flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

.tool-sidebar-logo img {
  height: 24px;
  width: auto;
  max-width: 104px;
  object-fit: contain;
}

/* ── 접기 버튼 ── */
.tool-sidebar-toggle {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink-500);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.tool-sidebar-toggle:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}

.tool-sidebar-toggle svg {
  width: 17px;
  height: 17px;
}

/* 접히면 로고를 감추고 버튼만 가운데 — 레일에 로고를 우겨넣으면 잘린다 */
.is-sidebar-collapsed .tool-sidebar-head {
  padding: 0;
  justify-content: center;
}

.is-sidebar-collapsed .tool-sidebar-logo {
  display: none;
}

.is-sidebar-collapsed .tool-sidebar-toggle {
  margin-left: 0;
}

/* ── 내비 ── */
.tool-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-md) 10px;
}

/* 그룹 라벨 — 도구가 늘어도 무엇들인지가 한눈에 남는다 */
/* 그룹 라벨 — 🔴 **항목보다 작고 가벼워야 한다.**
   예전엔 라벨이 700, 항목이 500 이라 **라벨이 자기가 묶는 것보다 굵었다** →
   같은 목록의 한 줄처럼 읽혔다(클릭되는 줄인지 아닌지 구분이 안 됐다).
   지금은 세 가지로 갈라 둔다: ① 더 작게 ② 대문자처럼 자간을 넓혀 ③ 위에 여백.
   색·굵기만으로는 부족하다 — **성격이 다르다는 신호**가 필요하다. */
.tool-nav-label {
  padding: 4px 10px;
  margin-top: var(--spacing-md);
  font-size: var(--font-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  white-space: nowrap;
}

/* 첫 그룹은 위 여백을 줄인다 — 사이드바 상단이 붕 뜬다 */
.tool-nav-label:first-child {
  margin-top: 0;
}

.tool-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink-600);
  font-size: var(--font-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.tool-nav-item:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}

/* 🔴 활성 표시는 **배경 한 겹**으로만. 왼쪽 오렌지 바까지 더하면 사이드바가
   장식이 많아 보인다 — 여긴 읽는 곳이 아니라 옮겨 다니는 곳이다. */
.tool-nav-item.is-active {
  background: var(--ink-900);
  color: var(--text-inverse);
  font-weight: 600;
}

.tool-nav-item.is-active:hover {
  background: var(--ink-900);
  color: var(--text-inverse);
}

.tool-nav-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
}

.tool-nav-icon .tool-icon-svg {
  width: 17px;
  height: 17px;
}

.tool-nav-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 미보유 — 흐리게 두되 클릭은 살린다(진열로 간다). 잠근 티를 내기보다
   가면 살 수 있다는 길을 남기는 편이 낫다. */
.tool-nav-item.is-locked {
  color: var(--ink-400);
}

/* ── 상태 배지 ──
   🔴 **예외에만** 붙는다. 보유가 기본값인데 전부 '사용중' 을 달면 네 줄이 다 배지가
      되어 정작 미보유가 안 보인다. 사이드바는 훑는 곳이라 표시가 많을수록 안 읽힌다.
   🔴 '비활성중' 같은 부정 표현을 쓰지 않는다 — 뜻도 틀리고(가졌는데 꺼둔 것)
      prd-redesign.md 가 금지했다. 할 일(구매)이나 사실(D-5)을 그대로 적는다. */
.tool-nav-badge {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: nowrap;
}

/* 구매 — 행동을 유도하는 자리라 브랜드 색을 쓴다 */
.tool-nav-badge.is-buy {
  background: var(--brand-50);
  color: var(--brand-600);
}

/* 만료 임박 — 🔴 빨강을 쓰지 않는다. 오류로 읽히고 팔레트에 없는 색이다 */
.tool-nav-badge.is-soon {
  background: var(--brand-100);
  color: var(--brand-700);
}

/* 활성 항목 위에서는 배경이 검정이라 배지가 묻힌다 — 반전시킨다 */
.tool-nav-item.is-active .tool-nav-badge {
  background: rgba(255, 255, 255, 0.18);
  color: var(--text-inverse);
}

/* 진열로 가는 항목 — 도구가 아니므로 위에 여백으로 떼어 둔다 */
.tool-nav-more {
  margin-top: var(--spacing-sm);
}

/* ── 접힘(레일) ──
   🔴 폭을 0 으로 접지 않는다. 완전히 숨기면 다시 여는 버튼을 본문 위에 띄워야 해서
      화면이 지저분해진다. 아이콘 레일로 남기면 접은 채로도 도구 전환이 된다. */
.is-sidebar-collapsed .tool-nav {
  padding-left: 6px;
  padding-right: 6px;
  align-items: center;
}

.is-sidebar-collapsed .tool-nav-label {
  /* 라벨은 접히면 읽을 수 없다 — 자리를 구분선으로 대신한다 */
  height: 1px;
  padding: 0;
  margin: var(--spacing-sm) 4px;
  width: 24px;
  overflow: hidden;
  background: var(--ink-200);
  color: transparent;
}

.is-sidebar-collapsed .tool-nav-item {
  width: 40px;
  padding: 9px 0;
  justify-content: center;
  gap: 0;
}

.is-sidebar-collapsed .tool-nav-text,
.is-sidebar-collapsed .tool-nav-badge {
  display: none;
}

/* ── 하단: 계정 ──
   🔴 아이디와 [내 정보] 뿐이다. 결제코드는 뺐다 — 스토어 주문 옵션을 채울 때
      한 번 필요한 값인데 도구를 쓰는 내내 자리를 먹었고, 계정 식별자가 화면에
      상시 떠 있을 이유도 없다. 필요한 순간에 사용자는 마이페이지에 있다. */
.tool-sidebar-foot {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-top: 1px solid var(--ink-200);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-sidebar-user {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--ink-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 비로그인일 때는 같은 자리가 버튼이 된다 — 생김새는 같게 */
.tool-sidebar-user.as-button {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.tool-sidebar-user.as-button:hover {
  color: var(--brand-600);
}

.tool-sidebar-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: none;
  color: var(--ink-500);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.tool-sidebar-icon:hover {
  background: var(--ink-100);
  color: var(--ink-900);
}

.tool-sidebar-icon svg {
  width: 17px;
  height: 17px;
}

/* 접히면 아이콘만 남는다 — 레일에 닉네임은 안 들어간다 */
.is-sidebar-collapsed .tool-sidebar-foot {
  padding: 10px 0;
  justify-content: center;
}

.is-sidebar-collapsed .tool-sidebar-user {
  display: none;
}

/* ────────────── 본문 ────────────── */
/* 🔴 min-width:0 이 없으면 안쪽의 넓은 표·그리드가 본문을 밀어낸다. */
.tool-main {
  min-width: 0;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--container-pad) var(--spacing-2xl);
}

/* 도구 페이지는 자기 좌우 패딩을 갖고 있었다(단독 페이지였으므로).
   껍데기 안에서는 tool-main 이 패딩을 대므로 중복을 지운다. */
.tool-main > .sm-page,
.tool-main > .tool-doc {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

/* ────────────── 미보유 화면 ────────────── */
.tool-locked {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--spacing-2xl) 0;
  text-align: center;
}

.tool-locked-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--ink-100);
  color: var(--ink-400);
  margin-bottom: var(--spacing-md);
}

.tool-locked-icon .tool-icon-svg {
  width: 26px;
  height: 26px;
}

.tool-locked-title {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.tool-locked-desc {
  margin: 0 0 var(--spacing-lg);
  font-size: var(--font-sm);
  line-height: var(--line-loose);
  color: var(--ink-500);
}

.tool-locked-btn {
  min-width: 180px;
}

.tool-locked-note {
  margin: var(--spacing-md) 0 0;
  font-size: var(--font-xs);
  line-height: var(--line-loose);
  color: var(--ink-500);
}

.tool-locked-note a {
  color: var(--brand-600);
}

/* ────────────── 좁은 화면 ──────────────
   🔴 여기서는 사이드바를 **오버레이**로 바꾼다. 좁은 화면에 216px 을 상시로 내주면
      도구 본문에 남는 게 없다. 기본은 닫힘이고 상단 바의 ☰ 로 연다.
   🔴 접힘(레일) 상태는 이 폭에서 의미가 없다 — 열림/닫힘 두 상태만 쓴다. */
@media (max-width: 820px) {
  .tool-shell {
    padding-left: 0;
  }

  /* 사이드바가 화면에서 빠졌으므로 로고와 ☰ 를 담을 바가 필요하다 */
  .tool-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;   /* 🔴 매직브러시가 이 값을 뺀다(--mb-topbar-h). 바꾸면 css/magic-brush.css 도 같이 */
    padding: 0 var(--container-pad);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--ink-200);
    position: sticky;
    top: 0;
    z-index: 800;
  }

  .tool-sidebar {
    width: 216px;
    transform: translateX(-100%);
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-xl);
  }

  .is-sidebar-open .tool-sidebar {
    transform: translateX(0);
  }

  /* 열렸을 때 뒤를 덮는다 — 바깥을 누르면 닫힌다 */
  .tool-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 890;
    background: rgba(20, 19, 15, 0.34);
  }

  .is-sidebar-open .tool-scrim {
    display: block;
  }

  /* 🔴 좁은 화면에선 레일이 아니라 완전 닫힘이므로 접힘 규칙을 전부 되돌린다.
     되돌리지 않으면 저장된 접힘 상태로 들어왔을 때 오버레이가 레일 모양으로 열린다. */
  .is-app-shell.is-sidebar-collapsed {
    --tool-sidebar-w: 216px;
  }

  .is-sidebar-collapsed .tool-sidebar-head { padding: 0 14px; justify-content: flex-start; }
  .is-sidebar-collapsed .tool-sidebar-logo { display: flex; }
  .is-sidebar-collapsed .tool-sidebar-toggle { margin-left: auto; }
  .is-sidebar-collapsed .tool-nav { padding-left: 10px; padding-right: 10px; align-items: stretch; }
  .is-sidebar-collapsed .tool-nav-label {
    height: auto; width: auto; padding: 6px 10px 4px; margin: 0;
    background: none; color: var(--ink-400); overflow: visible;
  }
  .is-sidebar-collapsed .tool-nav-item { width: auto; padding: 8px 10px; justify-content: flex-start; gap: 10px; }
  .is-sidebar-collapsed .tool-nav-text { display: block; }
  .is-sidebar-collapsed .tool-nav-badge { display: inline-block; }
  .is-sidebar-collapsed .tool-sidebar-foot { padding: 10px 14px; justify-content: flex-start; }
  .is-sidebar-collapsed .tool-sidebar-user { display: block; }
}

/* 넓은 화면에서는 상단 바·스크림이 필요 없다 */
@media (min-width: 821px) {
  .tool-topbar,
  .tool-scrim {
    display: none;
  }
}

/* ========================================
   도구 설명 페이지 (.tool-doc)

   실행이 딴 데(확장·Flow·PC 프로그램)에 있는 도구의 설명 화면.
   🔴 카드로 감싸지 않는다 — tool-main 안에서 또 상자를 두르면 이중 중첩이다
      (docs/prd-redesign.md §3). 블록 사이 여백과 제목 농도로만 나눈다.
   ======================================== */
.tool-doc {
  max-width: 68ch;
}

/* 🔴 단락 사이는 **선보다 여백**이 먼저다. 예전엔 위아래 여백이 같아서
   (둘 다 xl) 경계선이 어느 단락에 속하는지 애매했다 — 제목이 자기 앞 선에
   붙어 보였다. 아래 여백을 키워 **다음 제목이 선에서 떨어지게** 한다. */
.tool-doc-block {
  padding-bottom: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
  border-bottom: 1px solid var(--ink-200);
}

/* 마지막 블록은 밑줄을 지운다 — 페이지 끝에 선이 뜨면 뭔가 잘린 것처럼 보인다 */
.tool-doc-block:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

/* 소제목 — 🔴 본문과 **1px 차이(15 vs 14px)** 라 거의 구분이 안 됐다.
   게다가 본문 목록의 <strong> 이 ink-800 이라 제목만큼 진했다.
   크기를 키우는 대신 **왼쪽에 짧은 규칙선**을 세워 성격을 가른다 —
   글자 크기를 더 키우면 사이드바 폭에서 줄바꿈이 생기고, 페이지 제목(h1)과도
   경쟁한다. 선은 폭을 안 먹으면서 '여기서 새 단락이 시작된다' 를 말한다. */
.tool-doc-title {
  position: relative;
  margin: 0 0 var(--spacing-md);
  padding-left: 11px;
  font-size: var(--font-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

.tool-doc-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 3px;
  border-radius: var(--radius-full);
  background: var(--brand-500);
}

.tool-doc-text {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-base);
  line-height: var(--line-loose);
  color: var(--ink-600);
}

.tool-doc-list,
.tool-doc-steps {
  margin: 0 0 var(--spacing-md);
  padding-left: 1.2em;
  font-size: var(--font-base);
  line-height: var(--line-loose);
  color: var(--ink-600);
}

.tool-doc-list li,
.tool-doc-steps li {
  margin-bottom: var(--spacing-xs);
}

/* 🔴 본문 강조는 **제목보다 약해야 한다.** ink-800/600 은 제목(ink-900/700)과
   거의 같아서, 목록의 굵은 앞말이 소제목처럼 읽혔다(단락 경계가 흐려진 원인). */
.tool-doc-list strong,
.tool-doc-steps strong,
.tool-doc-text strong {
  color: var(--ink-700);
  font-weight: 600;
}

.tool-doc-btn {
  font-size: var(--font-sm);
  padding: 9px 22px;
}

.tool-doc-note {
  margin: var(--spacing-sm) 0 0;
  font-size: var(--font-xs);
  line-height: var(--line-loose);
  color: var(--ink-500);
}

/* ────────────── 미보유 안내 배너 ──────────────
   🔴 잠금 화면과 다르다. 본문을 **가리지 않고** 위에 얹기만 한다 —
      설명을 읽고 나서 사도록 하는 게 목적이다.
   🔴 오렌지 배경을 칠하지 않는다. 액센트는 테두리와 강조 글자에만
      (칠하면 광고 배너처럼 읽혀 오히려 무시된다). */
.tool-buybar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-lg);
}

.tool-buybar-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-sm);
  line-height: var(--line-base);
  color: var(--ink-600);
}

.tool-buybar-text strong {
  font-size: var(--font-base);
  color: var(--ink-900);
}

.tool-buybar-btn {
  flex-shrink: 0;
  font-size: var(--font-sm);
  padding: 9px 22px;
}

.tool-buybar-note {
  margin: calc(var(--spacing-lg) * -1 + var(--spacing-sm)) 0 var(--spacing-lg);
  font-size: var(--font-xs);
  color: var(--ink-500);
}

.tool-buybar-note a {
  color: var(--brand-600);
}

@media (max-width: 640px) {
  .tool-buybar {
    align-items: stretch;
  }

  .tool-buybar-btn {
    width: 100%;
    justify-content: center;
  }
}

/* 다음 단계 안내 (소스메이커 → Flow 썸네일 메이커).
   🔴 도구 사이의 **순서**를 알리는 자리다. 카드로 감싸지 않고 줄로 둔다 —
      본문 기능과 경쟁하면 안 된다. */
.sm-next {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--ink-200);
}

.sm-next-title {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--ink-900);
}

.sm-next-text {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-sm);
  line-height: var(--line-loose);
  color: var(--ink-500);
}

.sm-next-btn {
  font-size: var(--font-sm);
  padding: 9px 22px;
}

/* ========================================
   도구 소개 이미지 슬라이드 (.tool-shots)

   🔴 가로 스크롤 + 스냅. 자동 넘김 없음 — 전/후 비교 이미지는 들여다보는
      그림이라 보는 중에 넘어가면 방해다.
   ======================================== */
.tool-shots {
  margin-bottom: var(--spacing-xl);
}

.tool-shots-track {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* 스크롤바는 숨기되 스크롤은 남긴다 — 트랙패드·스와이프로 넘긴다 */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tool-shots-track::-webkit-scrollbar { display: none; }

.tool-shot {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-100);
}

/* 🔴 세로를 고정한다. 비교 이미지의 비율이 제각각이라 그냥 두면 장을 넘길 때마다
   페이지 높이가 튄다(아래 본문이 위아래로 움직인다). */
.tool-shot img {
  display: block;
  width: 100%;
  height: clamp(220px, 34vw, 420px);
  object-fit: contain;
}

.tool-shots-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: var(--spacing-md);
}

.tool-shots-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: var(--ink-300);
  cursor: pointer;
  transition: background var(--transition-fast), width var(--transition-fast);
}

.tool-shots-dot.is-on {
  width: 20px;
  background: var(--ink-800);
}

/* ────────────── 무료 / 정식 2열 비교 ──────────────
   🔴 표(table)를 쓰지 않는다. 항목이 4개뿐이라 표로 짜면 좁은 화면에서
      가로 스크롤이 생기고, 헤더 행이 한 줄 더 먹는다. */
.tool-cmp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.tool-cmp-col {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
}

/* 정식판만 테두리로 구분한다 — 배경까지 칠하면 광고처럼 읽힌다 */
.tool-cmp-col.is-pro {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.tool-cmp-head {
  margin: 0 0 var(--spacing-md);
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--ink-500);
}

.tool-cmp-col.is-pro .tool-cmp-head {
  color: var(--brand-700);
}

.tool-cmp-list {
  margin: 0 0 var(--spacing-lg);
  padding-left: 1.1em;
  font-size: var(--font-sm);
  line-height: var(--line-loose);
  color: var(--ink-600);
}

.tool-cmp-list strong {
  color: var(--ink-900);
  font-weight: 700;
}

/* 버튼을 칸 바닥에 붙인다 — 항목 수가 달라도 두 버튼이 같은 줄에 선다 */
.tool-cmp-btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  font-size: var(--font-sm);
  padding: 9px 16px;
}