/* 랜딩 페이지 전용 스타일.
   ⚠ styles.css(에디터용)와 절대 섞지 않는다.
   이 프로젝트의 최다 결함 유형이 「전역 CSS 규칙이 새 요소에 몰래 얹히는 것」이라,
   랜딩은 아예 다른 파일로 분리해 서로 간섭할 수 없게 만든다.
   색은 에디터와 같은 값을 쓴다(같은 제품으로 보여야 하므로).
   글자 크기는 다르게 간다 — 에디터는 도구라 13px 로 빽빽하지만,
   랜딩은 읽는 페이지라 16px 이상이어야 한다.

   ── 디자인 위계 (2026-08-31 확정) ─────────────────────────────────
   ① 크기
        1위 히어로 영상 · 2위 h1 40px · 3위 h2 28px
        4위 h3 17~18px · 5위 본문 15~16px · 6위 보조 14px
        ⚠ h1 을 44 → 40 으로 낮추고 히어로 위 여백을 76 → 56 으로 줄였다.
          그래야 노트북 첫 화면에 **영상이 걸린다.**
          영상이 주인공인데 스크롤해야 보이면 주인공이 아니다.

   ② 색 — 파랑(--primary)은 **누르는 것에만** 쓴다.
        버튼과 링크. 그 외에는 쓰지 않는다.
        파랑이 흔해지면 「바로 시작하기」가 안 튄다.
        (예전에는 '쓰는 순서' 번호 동그라미가 파랑이었다 — 회색으로 내렸다)
        강조는 색이 아니라 **굵기·크기·여백·흰 바탕**으로 만든다.

   ③ 배경 — 흰/회색을 여덟 번 번갈아 쓰면 경계가 흐려진다. 세 덩어리로 묶는다.
        보여준다(흰) → 설명한다(회색 바탕 + 흰 카드) → 정한다(흰) → 마무리(--ink)
        여백도 위계다: 섹션 사이 72px, 덩어리 사이 96px.

   ④ 아이콘 — 안 쓴다. 이모지는 절대 안 쓴다.
        설득하는 것은 아이콘이 아니라 실제 화면이다.

   ⚠⚠ 이 파일은 랜딩 말고도 pricing·account·terms·privacy·checkout 이 같이 물린다.
       머리·꼬리(.top .logo .btn .wrap footer …)를 공유하려고 일부러 그렇게 했다.
       그래서 **랜딩에만 쓰는 이름을 흔한 낱말로 지으면 다른 페이지를 부순다.**

       실제로 그랬다 (2026-08-31): 랜딩 요금 블록에 `.plans { display:grid }` 를 넣었더니
       pricing.html 의 <section class="plans"> 가 3열 그리드가 되어,
       내용이 1번 칸(920px)으로 몰리고 2·3번 칸이 빈 채로 오른쪽을 차지했다.
       pricing.html 이 `.plans { padding }` 을 갖고 있었지만 **속성이 달라서 안 덮였다.**
       → 랜딩 전용 요금 클래스는 전부 `lp-` (landing pricing) 접두사를 붙인다.
   ─────────────────────────────────────────────────────────────── */

:root {
  --primary: #1e88e5;
  --primary-d: #1565c0;
  --primary-dd: #0d47a1;   /* 버튼 hover — primary-d 보다 한 단계 더 진하게 */
  --primary-bg: #e8f1fc;
  --tx: #24303d;      /* 랜딩은 본문을 조금 더 진하게 — 넓은 여백에서 #333 은 흐려 보인다 */
  --tx2: #55636f;
  --tx3: #8b98a5;
  --bd: #dde3ea;
  --bg: #fff;
  --bg2: #f6f8fb;
  --ink: #1f2a36;     /* 푸터·마무리 바탕 — #16202b 에서 한 단계 밝혔다(2026-08-31).
                         너무 검으면 페이지 끝이 '뚝 끊긴' 느낌이 든다. */
  --r: 6px;
  --r-lg: 12px;
  --wrap: 1080px;     /* 최대 폭 */

  /* 섹션 리듬 */
  /* 섹션 사이. 2026-09-11 에 72 → 104px 로 넓혔다 (고원빈: "간격을 더 벌려서
     그 내용만 한 화면에 보이게").
     ⚠ 근거 — 국내 SaaS 5곳과 같은 잣대(화면 900px 대비 섹션 높이 중앙값)로 재 보니
        스티비 100% · 채널톡 100% · 미리캔버스 101% · 잔디 93% · 모두싸인 86% 인데
        우리만 **58%** 였다. 그래서 스크롤 한 번에 섹션이 두 개씩 걸쳐 보였다.
     ⚠ 여백만 늘린다고 해결되지 않는다 — 원인의 절반은 '내용이 적어서' 다.
        제목 크기(section > .wrap > h2)도 함께 봐야 한다. */
  --gap-sec: 104px;   /* 섹션 사이 */
  --gap-band: 96px;   /* 덩어리 사이 */

  /* 미리보기 칸 비율 — 아래 .shot 주석 참고 */
  /* 히어로 자리 비율. **poster(assets/shot-editor.jpg)와 같아야 한다** —
     다르면 .shot 의 object-fit:cover 가 그림을 잘라낸다.
     2026-09-11 에 배선도 이미지를 1400×772 로 바꾸면서 여기도 같이 맞췄다.
     (옛 값 1600/813 을 그대로 뒀더니 도면 아래가 잘렸다) */
  --shot-ar: 1400 / 772;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* ⚠ 상단 막대가 sticky(72px) 라, 앵커(#faq 같은 것)로 이동하면 그 섹션의 제목이
   **헤더 밑에 깔린다.** 실제로 #outputs 는 제목 top 이 0px 이었다(2026-08-31 측정).
   scroll-margin-top 으로 헤더 높이만큼 미리 띄워 둔다 — 72 + 여백 16. */
section[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic",
        "맑은 고딕", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;

  /* ★ 한글은 이게 없으면 줄바꿈이 어절 한가운데를 자른다.
     실제로 "아두이노·ESP32 프로젝트의 배선 / 을 실물 사진 그대로" 처럼
     '배선' 과 '을' 이 갈라졌다. 브라우저 기본값이 한글을 글자 단위로 끊기 때문이다.
     keep-all 은 어절을 안 자르고, overflow-wrap 은 그래도 안 들어가는
     아주 긴 낱말(URL 등)만 예외로 자른다 — 둘을 같이 써야 안전하다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 본문 링크도 --primary(#1e88e5) 로 두면 흰 바탕에서 3.71:1 이라 15px 글씨엔 모자란다.
   --primary-d 는 5.81:1. 큰 제목의 강조(.hl)만 --primary 를 그대로 쓴다 — 거긴 큰 글씨다. */
a { color: var(--primary-d); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; background: var(--bg2);
  border: 1px solid var(--bd); border-radius: 4px; padding: 1px 5px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* 화면에는 안 보이되 읽기 도구에는 읽히는 글 (표의 빈 머리칸 등) */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* 섹션 제목 — 모든 섹션이 같은 위계를 쓴다 */
section > .wrap > h2 {
  margin: 0 0 8px; text-align: center;
  font-size: 28px; font-weight: 700; letter-spacing: -.01em;
  text-wrap: balance;
}
.section-sub {
  margin: 0 0 40px; text-align: center; color: var(--tx2); font-size: 17px;
  text-wrap: balance;
}

/* ── 상단 바 ─────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bd);
}
/* 헤더 높이 — 60 → 72px. 위가 여유로우면 사이트가 성의 있어 보인다.
   (참고한 곳들은 대개 80~100px 를 쓴다) */
.top .wrap { display: flex; align-items: center; gap: 20px; height: 72px; }
/* 워드마크(왼쪽 브랜드 이름).
   ⚠ 지금은 시스템 글꼴이다 — 윈도우에서는 맑은 고딕이 잡히는데, 낱자가 넓어서
      로고보다 '그냥 글씨' 로 보인다. 글꼴을 바꾸려면 자체 호스팅밖에 없다:
      _headers 의 CSP 가 `style-src 'self'` · `font-src 'self' data:` 라
      **구글 폰트(fonts.googleapis.com)는 아예 차단된다.**
   ⚠ 글꼴을 바꾸기 전에 할 수 있는 것 — 자간을 좁히고 굵기를 올린다.
      한글 워드마크는 자간만 줄여도 '이름' 처럼 뭉쳐 보인다. */
.logo {
  font-size: 19px; font-weight: 800; color: var(--tx);
  letter-spacing: -.035em;
  display: flex; align-items: center; gap: 7px;
}
.logo:hover { text-decoration: none; }
/* 브랜드 마크 — 🔌 이모지 자리를 실제 로고로 바꿨다 (2026-08-24).
   .logo 가 flex(align-items:center) 라 세로 정렬은 자동으로 맞는다.
   글자 크기(19px)를 따라가도록 em 으로 잡는다.
   간격은 .logo 의 gap: 7px 가 이미 준다 — margin 을 또 주면 두 번 벌어진다. */
.logo .brand-mark { width: 1.35em; height: 1.35em; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 26px; }
/* ⚠⚠ 반드시 :not(.btn) 을 붙인다.
      예전에는 `.top nav a` 였는데, 이 선택자(0,0,1,2)가 `.btn-main`(0,0,1,0)을 이겨서
      **네비 버튼의 글자까지 회색으로 칠했다.** 파란 바탕에 회색 글자 —
      명암비 1.68:1 로 거의 안 읽혔다(2026-08-31 발견).
      클래스 하나 차이로 이기고 지는 자리라, 아예 겹치지 않게 갈라 둔다.

   ⚠ 색은 --tx2(회색)에서 --tx(거의 검정)로 올렸다.
      원래 회색으로 둔 이유는 '네비는 읽는 것이 아니라 필요할 때 찾는 것' 이라
      본문보다 뒤로 물리려던 것인데, 우리 --tx2(#55636f)는 흐린 편이라
      성의 없어 보였다. 참고한 사이트들도 네비는 거의 검정에 가깝다. */
.top nav a:not(.btn) { color: var(--tx); font-size: 15px; font-weight: 600; }
.top nav a:not(.btn):hover { color: var(--primary-d); text-decoration: none; }
/* 로그인·회원가입 — 맨 오른쪽에, 나머지보다 작고 흐리게. (망고보드 형태)
   여기는 '사이트를 둘러보는' 항목이 아니라 '내 계정' 쪽이라 한 단계 뒤로 물린다.

   ⚠ 색을 --tx3(#8b98a5)로 두지 않는다 — 흰 바탕에 2.9:1 이라 읽기 기준(4.5:1)에 못 미친다.
      --tx2(#55636f)는 6.4:1 로, 회색으로 보이면서도 읽힌다.
      네비에서 대비를 놓쳐 1.68:1 이 나온 적이 있다(2026-08-31). 같은 실수를 반복하지 않는다. */
.top nav a.nav-auth { font-size: 13px; font-weight: 500; color: var(--tx2); }
.top nav a.nav-auth:hover { color: var(--tx); }
/* 둘은 한 덩어리다 — 기본 26px 은 남남처럼 보인다 */
.top-auth { display: flex; align-items: center; gap: 14px; }

/* 넓은 화면에서는 머리줄 **맨 오른쪽 끝**으로 뺀다 (망고보드 형태).
   가운데 1080px 통(.wrap) 안에 두면 [배선 그리기] 버튼에 붙어 버린다.

   ⚠ 1400px 아래에서는 흐름 그대로 둔다. 통의 오른쪽 끝과 창의 오른쪽 끝이
      가까워져서, 떼어 놓으면 [배선 그리기] 버튼과 겹친다.
      계산으로는 1314px 부터 안전한데 **실측으로 1300px 에서 14px 겹쳤다** —
      스크롤바 폭과 네비 실제 너비 때문이다. 24px 여유를 더해 1400 으로 잡았다.
      .top 이 sticky 라 이미 '자리 잡힌' 요소여서 기준으로 쓸 수 있다. */
@media (min-width: 1400px) {
  .top-auth { position: absolute; right: 32px; top: 0; height: 72px; }
}

/* 버튼 — 파랑은 여기서만 쓴다.
   ⚠⚠ 바탕색을 --primary(#1e88e5) 에서 --primary-d(#1565c0) 로 내렸다 (2026-08-31).
      흰 글자 대비 #1e88e5 는 **3.68:1** 이라 읽기 기준(4.5:1)에 못 미친다.
      18px 굵은 글씨는 '큰 글씨' 예외(3:1)를 겨우 노리는 수준이고,
      네비의 15px 버튼은 예외에도 못 들어간다. #1565c0 은 **5.81:1** 로 넉넉하다. */
.btn {
  display: inline-block; padding: 11px 22px; border-radius: var(--r);
  font-size: 16px; font-weight: 600; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-main { background: var(--primary-d); color: #fff; }
.btn-main:hover { background: var(--primary-dd); }
.btn-sub { background: #fff; color: var(--tx); border-color: var(--bd); }
.btn-sub:hover { background: var(--bg2); }
/* 어두운 바탕(마무리 섹션) 위에서는 흰 버튼이 가장 잘 보인다 */
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: #e9eef4; }
.btn-sm { padding: 8px 16px; font-size: 15px; }

/* 히어로·마무리의 주 버튼. 작은 버튼은 '한번 눌러볼까' 를 못 만든다.
   ⚠ 그림자는 아주 옅게만. 진하면 2010년대 웹처럼 보인다. */
.btn-hero {
  padding: 17px 42px; font-size: 18px; border-radius: 8px;
  box-shadow: 0 2px 10px rgba(21, 101, 192, .3);
}
.btn-light.btn-hero { box-shadow: 0 2px 10px rgba(0, 0, 0, .28); }

/* ══ 덩어리 1 「보여준다」 ═══════════════════════════ */

/* ── 히어로 ─────────────────────────────────────── */
.hero { padding: 56px 0 0; text-align: center; }
.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.35; font-weight: 800; letter-spacing: -.02em;
  text-wrap: balance;
}
.hero p.lead {
  margin: 0 auto 30px; max-width: 640px;
  font-size: 18px; color: var(--tx2); text-wrap: balance;
}
/* 헤드라인 둘째 줄만 파랑. 문장 전체가 검정이면 어디를 읽어야 할지 안 보인다.
   ⚠ 파랑을 '누르는 것에만' 쓰기로 했는데 여기가 유일한 예외다.
      제목은 눌리는 것이 아니라 **읽히는 것**이라 버튼과 경쟁하지 않는다.
   ⚠ 버튼과 **같은 파랑**을 쓴다. 한 화면에 밝은 파랑·진한 파랑이 같이 있으면
      의도한 것이 아니라 색을 잘못 고른 것처럼 보인다. */
.hero h1 .hl { color: var(--primary-d); }

.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* 「가입도 설치도 없이…」·「작업물은 브라우저에 자동 저장…」 두 줄의 스타일이 있던 자리.
   2026-09-02 문구를 빼면서 규칙도 같이 치웠다 — 안 쓰는 규칙을 남겨 두면
   다음 사람이 '어딘가 쓰나 보다' 하고 못 지운다. */

/* 도면·영상 미리보기 자리.
   ⚠ 비율을 **미리** 잡아 둔다. 안 잡으면 영상이 뜨는 순간 아래 내용이 통째로 밀린다.
      (레이아웃이 튀는 이 현상이 실제 체감으로는 '렉'으로 읽힌다)
      값은 poster(1600×813) 기준이다. 영상을 다른 비율로 찍었으면
      --shot-ar 한 줄만 바꾸면 poster·영상·자리가 한꺼번에 맞는다. */
.shot {
  position: relative;
  margin: 44px auto 0; max-width: 900px;
  border: 1px solid var(--bd); border-radius: var(--r-lg);
  background: var(--bg2); overflow: hidden;
  aspect-ratio: var(--shot-ar);
}
/* 영상이 아직 없으면 poster 가 같은 자리에 그대로 보인다 — 빈 칸이 생기지 않는다 */
.shot img,
.shot .hero-video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; background: var(--bg2);
}

/* 재생 단추 — 좁은 화면·데이터 절약·'움직임 줄이기' 일 때만 나온다.
   그 경우 영상을 아예 안 받으므로, 보고 싶은 사람이 눌러서 그때 받는다.
   ⚠ 이모지를 쓰지 않는다. 삼각형은 SVG 로 직접 그린다. */
.hero-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px 12px 16px;
  border: 0; border-radius: 999px;
  background: rgba(22, 32, 43, .82); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
/* display 를 지정했으므로 hidden 속성을 다시 눌러 줘야 한다 — 안 하면 항상 보인다 */
.hero-play[hidden] { display: none; }
.hero-play:hover { background: rgba(22, 32, 43, .94); }
.hero-play svg { width: 17px; height: 17px; fill: currentColor; display: block; }

/* ── 무엇을 만드나 ──────────────────────────────── */
.uses { padding: var(--gap-sec) 0 var(--gap-band); }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.card {
  background: #fff; border: 1px solid var(--bd); border-radius: var(--r-lg);
  padding: 24px 22px;
}
.card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.card p { margin: 0; color: var(--tx2); font-size: 15px; }


/* ══ 덩어리 2 「설명한다」 — 회색 바탕에 흰 카드 ══════ */
/* 세 섹션(쓰는 순서 · 나오는 것 · 뭐가 다른가)이 배경을 공유해
   하나의 덩어리로 읽힌다. 섹션마다 흰/회색을 번갈아 쓰면 경계가 흐려진다. */
.band {
  background: var(--bg2);
  border-block: 1px solid var(--bd);
  padding: var(--gap-band) 0;
}
.band > section { padding-bottom: var(--gap-sec); }
.band > section:last-child { padding-bottom: 0; }

/* 「무엇이 다른가요?」 만 위아래를 더 벌린다. (2026-09-11 고원빈)
   내용이 411px 뿐이라(제목 + 부제 + 4줄 표) 앞뒤 섹션과 한 화면에 겹쳐 보였다.

   ⚠ 왜 --gap-sec 만으로는 안 됐나 —
      .band 안의 섹션은 **아래 여백만** 갖고, 이 섹션은 마지막 자식이라 그마저 0 이다.
      그래서 위 규칙을 늘려도 이 섹션 하나만 그대로였다. 여기서 따로 준다.
   ⚠ 한 화면(900px)을 꽉 채우려면 앞뒤로 250px 씩 비워야 하는데, 그러면 '여유' 가 아니라
      '빈 화면' 으로 보인다. 조사한 국내 5곳 중 가장 낮은 모두싸인(86%)에 맞췄다. */
.band > section.compare {
  padding-top: 180px;
  padding-bottom: 180px;
}

/* ── 쓰는 순서 (가로 한 줄) ─────────────────────── */
/* ⚠ 일부러 압축해 두었다. 히어로 영상이 들어오면 이 섹션은 보조가 된다.
     그때 크면 자리를 다툰다. */
.steprow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  list-style: none; margin: 0; padding: 0; counter-reset: s;
}
.steprow li {
  counter-increment: s;
  background: #fff; border: 1px solid var(--bd); border-radius: var(--r-lg);
  padding: 22px 20px;
}
/* 번호는 회색이다. 예전에는 파란 동그라미였는데,
   파랑을 여기에 쓰면 정작 눌러야 할 버튼이 안 튄다. */
.steprow li::before {
  content: counter(s, decimal-leading-zero);
  display: block; margin-bottom: 10px;
  font-size: 13px; font-weight: 800; letter-spacing: .08em;
  color: var(--tx3);
}
.steprow li h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.steprow li p { margin: 0; color: var(--tx2); font-size: 15px; }

/* ── 나오는 것 ──────────────────────────────────── */
/* ⚠ 예전에는 2단 그리드였다. 그림이 508px 로 작아져 도면·표가 안 읽혔다. (2026-09-11)
   국내 SaaS 6곳 실측에서 5곳이 제품 스크린샷을 한 줄에 하나로 놓는다. */
.out-grid { display: block; }
.out {
  margin: 0 0 26px; background: #fff;
  border: 1px solid var(--bd); border-radius: var(--r-lg); overflow: hidden;
}
/* ⚠ aspect-ratio + object-fit:cover 는 그림을 **잘라낸다.**
   --shot-ar(1600/813=1.97)과 실제 이미지 비율이 달라 실제로 잘려 나가고 있었다.
   이제 그림의 제 비율대로 둔다 — 잘리지 않고, 자리는 img 의 width/height 속성이 미리 잡는다. */
.out-shot { border-bottom: 1px solid var(--bd); background: var(--bg2); }
.out-shot img { display: block; width: 100%; height: auto; }
/* 그림이 커진 만큼 설명 글씨도 같이 올린다 — 그림만 키우면 글이 주석처럼 작아 보인다 */
.out figcaption { padding: 22px 26px 24px; }
.out figcaption h3 { margin: 0 0 8px; font-size: 21px; font-weight: 700; }
.out figcaption p { margin: 0; color: var(--tx2); font-size: 16px; line-height: 1.7; }

/* 화면 그림이 없는 항목 — 카드와 무게를 달리해서 '빠진 자리' 로 안 보이게 한다 */
.out-note {
  margin-top: 20px;
  background: #fff; border: 1px solid var(--bd); border-radius: var(--r-lg);
  padding: 22px 24px;
}
.out-note h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.out-note p { margin: 0; color: var(--tx2); font-size: 15px; }
.out-cta { margin: 22px 0 0; text-align: center; }

/* ── 뭐가 다른가 ────────────────────────────────── */
/* ⚠ 좁은 화면에서 표는 반드시 자기 상자 안에서만 넘치게 한다.
     안 그러면 페이지 전체에 가로 스크롤이 생긴다 (검사가 이걸 잡는다). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
  /* ⚠ 3열이던 시절 min-width 가 640px 이었다. 2열로 줄이면서(2026-09-11) 낮춘다 —
     안 낮추면 좁은 화면에서 쓸데없이 가로 스크롤이 생긴다. */
  width: 100%; min-width: 440px; border-collapse: collapse;
  background: transparent; font-size: 15px;
}
.cmp th, .cmp td {
  padding: 13px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--bd);
}
.cmp thead th {
  font-size: 15px; font-weight: 700; color: var(--tx);
  border-bottom: 2px solid var(--bd); white-space: nowrap;
}
.cmp .th-sub { display: block; font-size: 13px; font-weight: 500; color: var(--tx3); }
/* ○ / ✕ 표시. 글자(이모지·기호)가 아니라 **CSS 로 그린 도형**이다 —
   기호는 글꼴마다 크기·굵기가 달라 줄이 들쭉날쭉해진다(이 파일 맨 위 규칙과 같은 이유).
   ⚠ 색으로만 뜻을 전하지 않는다. 옆에 항상 짧은 말이 함께 있고,
      ○ 는 테두리 원, ✕ 는 두 선이라 **모양만으로도 구분**된다. */
.cmp .mk {
  display: inline-block; width: 13px; height: 13px; margin-right: 8px;
  position: relative; top: 1px; flex: none;
}
.cmp .mk.yes {
  border: 2px solid #2e7d4f; border-radius: 50%;
}
.cmp .mk.no::before, .cmp .mk.no::after {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 13px; height: 2px; background: #b0b7bf; border-radius: 1px;
}
.cmp .mk.no::before { transform: rotate(45deg); }
.cmp .mk.no::after  { transform: rotate(-45deg); }
.cmp tbody th { font-weight: 600; color: var(--tx2); white-space: nowrap; }
.cmp td { color: var(--tx2); }
/* 우리 칸은 색이 아니라 **흰 바탕 + 테두리**로 띄운다.
   덩어리 2 가 회색이라 흰 칸이 앞으로 나오는데, 바탕만으로는 경계가 약해
   '한 칸'으로 안 읽힌다. 좌우에 선을 둘러 하나의 기둥으로 만든다.
   ⚠ 여기에 파랑을 쓰지 않는다 — 파랑은 누르는 것에만. */
.cmp .mine {
  background: #fff; color: var(--tx);
  border-left: 1px solid var(--bd); border-right: 1px solid var(--bd);
}
.cmp thead .mine {
  border-top: 1px solid var(--bd);
  border-bottom-color: var(--tx);
  font-size: 16px;
}
.cmp tbody tr:last-child .mine { border-bottom: 1px solid var(--bd); }
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td { border-bottom: 0; }

/* ══ 덩어리 3 「정한다」 ═════════════════════════════ */

/* ── 요금 ───────────────────────────────────────── */
.price { padding: var(--gap-band) 0 var(--gap-sec); }
/* ── 요금 카드 ─────────────────────────────────────────────────────
   ⚠ **pricing.html 의 <style> 에 있는 규칙을 그대로 옮긴 것**이다. (2026-09-11)
      값을 손으로 옮기다 정렬 규칙을 빠뜨려 세 카드가 어긋난 적이 있다.
      요금제 페이지의 카드 모양을 고치면 **여기도 같이 고친다.**
   ⚠ 선택자 앞에 .price 를 붙여 랜딩의 요금 섹션 안에서만 걸리게 했다 —
      pricing.html 은 자기 <style> 을 그대로 쓰므로 서로 간섭하지 않는다. */
.price .plans { padding: 40px 0 72px; }

/* 요금 카드 아래 환불 안내 (2026-09-11 신설).
   PG 심사가 "상품 상세페이지에 환불·취소 규정 기재"를 요구해서 넣었다.
   ⚠ .plans 안으로 범위를 묶는다 — 전역 .refund-note 로 두면 나중에 다른 화면에
      같은 이름을 쓸 때 서로 덮어쓴다(이 프로젝트에서 제일 자주 난 결함이다).
   ⚠ 처음에 .price 로 묶었다가 규칙이 통째로 안 붙었다. 요금제 페이지의 섹션은
      <section class="plans"> 이고 .price 는 랜딩 쪽 이름이다. 렌더링을 재서 잡았다
      (폭이 max-width 760 을 무시하고 1040 으로 나왔다). */
.plans .refund-note {
  max-width: 760px; margin: 8px auto 0; padding: 20px 22px;
  border: 1px solid #e6e8eb; border-radius: 12px; background: #fafbfc;
  text-align: left;
}
.plans .refund-note h3 { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.plans .refund-note ul { margin: 0; padding-left: 18px; }
.plans .refund-note li { margin: 6px 0; font-size: 13.5px; line-height: 1.65; color: #5a6169; }
.plans .refund-note b { color: #2b3138; }
@media (max-width: 640px) {
  .plans .refund-note { padding: 16px 16px; }
  .plans .refund-note li { font-size: 13px; }
}
/* ⚠ align-items 를 start 로 두면 카드가 저마다 내용 높이만큼만 자라서
   세 장의 아래끝이 들쭉날쭉해진다. stretch(기본값)로 두어 높이를 맞춘다.
   내용이 적은 카드는 아래가 비는데, 그 자리는 아래 .plan-feats 가 채운다. */
.price .plan-grid {
  display: grid; gap: 20px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 1040px; margin: 0 auto;
}
/* 카드 자신도 세로 flex 로 둬야 안쪽 요소가 남은 높이를 나눠 가질 수 있다 */
.price .plan {
  position: relative; background: #fff; display: flex; flex-direction: column;
  border: 1px solid #e3e7ec; border-radius: 16px; padding: 32px 26px;
}
/* 추천 요금제를 들어올린다 — 처음 오는 사람을 여기로 들인다 */
.price .plan.is-pick { border-color: #1e88e5; box-shadow: 0 6px 24px rgba(30,136,229,.13); }
.price .plan-name { font-size: 15px; font-weight: 600; color: #202124; margin: 0 0 14px; }
.price .plan.is-paid .plan-name::before { content: "✦ "; color: #1e88e5; }

.price .plan-price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; flex-wrap: wrap; }
.price .plan-price .num { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: #202124; }
.price .plan-price .per { font-size: 14px; color: #8a9098; }
/* 값 아래 한 줄. 높이를 고정해 세 카드의 버튼 높이가 어긋나지 않게 한다. */
/* ⚠ min-height 를 26px 로 둔 이유 — 아래 .save b 가 18px 로 커져서
   그 줄의 높이가 늘었다. 세 카드가 같은 높이를 쓰지 않으면 버튼이 어긋난다. */
.price .plan-sub { min-height: 26px; margin: 0 0 18px; font-size: 13px; color: #6b7280;
            display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price .plan-sub .strike { color: #aab0b8; text-decoration: line-through; }
.price .plan-sub .save { color: #1666b0; font-weight: 600; }
/* 값 자체만 키운다 — '꼴' 같은 조사까지 키우면 문장이 뭉툭해진다.
   line-height:1 을 주는 이유 — 18px 글자가 줄 높이를 밀어올리면
   그 카드만 4px 내려가서 세 카드의 버튼이 어긋난다. */
.price .plan-sub .save b { font-size: 18px; font-weight: 700; letter-spacing: -.01em;
                    line-height: 1; }

/* word-break: keep-all — 한국어는 기본값이 아무 글자에서나 줄을 끊어서
   「이용 가능합/니다」처럼 단어가 쪼개진다. 띄어쓰기에서만 끊기게 한다. */
.price .plan-desc { margin: 0 0 22px; font-size: 14px; line-height: 1.65; color: #5f6771;
  min-height: 68px; word-break: keep-all; }
.price .plan .btn { display: block; width: 100%; text-align: center; box-sizing: border-box; }

/* flex:1 로 남은 높이를 이 영역이 가져간다 — 카드 높이를 맞추면 생기는
   아래쪽 빈 공간이 기능 목록 뒤로 들어가, 테두리가 어색하게 끊기지 않는다. */
.price .plan-feats { margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid #f0f2f5;
              flex: 1 1 auto; }
.price .plan-feats > b { display: block; font-size: 13px; font-weight: 600; color: #202124; margin: 0 0 12px; }
.price .plan-feats ul { margin: 0; padding: 0; list-style: none; }
.price .plan-feats li {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 6px 0; font-size: 13.5px; line-height: 1.55; color: #4b5563;
}
.price .plan-feats li::before { content: "✓"; flex: none; color: #1e88e5; font-weight: 600; }
/* 무료에 없는 항목 — 줄을 빼지 않고 ✕ 로 **같은 자리에** 남긴다.
   빼 버리면 Pro 카드만 줄이 많아 보이는 게 아니라, 무료 카드를 보는 사람이
   "이게 원래 있는 기능인지" 를 모른다. 자리를 맞춰야 두 카드를 비교할 수 있다. */
.price .plan-feats li.off { color: #9aa0a6; }
.price .plan-feats li.off::before { content: "✕"; color: #c9ced4; }
/* ⚠ li 가 flex 라서 안의 <b> 도 flex 항목이 되어 gap 이 글자 사이에 끼어든다.
   글자를 span 으로 묶어 flex 항목을 '✓ + 글자' 둘로 고정한다. */
.price .plan-feats li > span { flex: 1; min-width: 0; }
/* 랜딩에만 있는 「추천」 배지 — 요금제 페이지의 .plan-tag 와 같은 모양 */
.price .plan-tag {
  position: absolute; top: 30px; right: 26px;
  padding: 4px 11px; border-radius: 999px;
  background: #e8f1fc; color: #1565c0; font-size: 12px; font-weight: 700;
}

/* ★ 처음 돈을 내는 사람이 실제로 무서워하는 세 가지.
     우리는 이미 이렇게 만들어 놓고(js/pro.js) 랜딩에서 한 번도 말한 적이 없었다. */
.promise {
  margin: 28px auto 0; max-width: 760px; padding: 0; list-style: none;
}
.promise li {
  border-left: 3px solid var(--bd);
  padding: 2px 0 2px 18px; margin-bottom: 16px;
  color: var(--tx2); font-size: 15px;
}
.promise li:last-child { margin-bottom: 0; }
.promise li b { color: var(--tx); }
.promise li i { font-style: normal; font-weight: 600; }
/* .price-more(「요금제 자세히 보기」) 규칙은 걷어냈다 — 그 마크업을 2026-09-11 에 뺐다. */

/* ── 자주 묻는 질문 ─────────────────────────────── */
/* ⚠ 이 스타일은 **랜딩과 요금제가 같이 쓴다.** 예전에는 요금제가 자기 <style> 에
   같은 규칙을 따로 갖고 있었는데, 그러면 한쪽만 고쳐서 두 화면이 어긋난다.
   정의는 여기 한 곳에만 둔다. (2026-08-31 통합)
   ⚠ <details>/<summary> 라 여는 스크립트가 없다. 키보드·화면읽기도 브라우저가 맡는다.
   ⚠ 항목을 선으로만 나누고 딱 붙여 두면 '표' 처럼 보인다. 카드로 띄운다 —
      요금 카드와 같은 언어(흰 바탕·1px 테두리·둥근 모서리)를 쓴다. */
.faq { padding: 0 0 var(--gap-band); }
.faq-sub { text-align: center; font-size: 15px; color: var(--tx2); margin: 0 0 44px; }

.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-list details { background: #fff; border: 1px solid var(--bd); border-radius: 12px; }
.faq-list details[open] { border-color: #cddcf0; }
/* 기본 삼각형 표시를 없앤다 — 크롬은 ::-webkit-details-marker, 나머지는 list-style */
.faq-list summary { list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary {
  cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 22px;
  font-size: 15.5px; font-weight: 700; color: var(--tx); line-height: 1.5;
}
.faq-list summary:hover { color: var(--primary-d); }
.faq-list summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 12px; }
.faq-list .chev {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: #9aa2ab; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease;
}
.faq-list details[open] .chev { transform: rotate(180deg); stroke: var(--primary-d); }
.faq-list .a { margin: 0; padding: 0 22px 22px; font-size: 14.5px; line-height: 1.85; color: var(--tx2); }
@media (prefers-reduced-motion: reduce) { .faq-list .chev { transition: none; } }

/* ── 마무리 ─────────────────────────────────────── */
/* 여기서 한 번 끊는다. 앞이 전부 밝은 바탕이라 어두운 면이 마침표가 된다. */
.closing {
  padding: var(--gap-sec) 0; text-align: center;
  background: var(--ink); color: #fff;
}
.closing h2 { margin: 0 0 10px; font-size: 26px; font-weight: 700; }
.closing p { margin: 0 0 26px; color: #b9c3ce; font-size: 17px; }

/* ── 푸터 ───────────────────────────────────────── */
/* ⚠ 법적 필수 영역이다. 전자상거래법 제10조에 따라
   상호·대표자·주소·연락처·사업자등록번호·이용약관을 초기화면에 표시해야 한다.
   임의로 항목을 지우지 말 것. */
/* 푸터 — 다시 어두운 계열로 (2026-08-31).
   ⚠ 한 번 흰색으로 갔다가 되돌렸다. 바로 위 마무리 CTA(.closing)가 어두운데
      푸터만 밝으니 페이지가 **만들다 만 것처럼** 보였다.
      둘을 같은 색으로 묶고 가는 선 하나로만 나눈다 — '어두운 마무리' 한 덩어리가 된다.
   ⚠ 다만 예전(#16202b)보다 한 단계 밝힌 #1f2a36 을 쓴다. 새까맣게 두면
      법정 표시란이 도로 무거워진다.
   ⚠ 글자 굵기는 브랜드명 하나만 남긴다. 여기는 읽히는 곳이 아니라 찾는 곳이다. */
footer {
  background: var(--ink); color: #93a1b0;
  border-top: 1px solid #2c3a4a;
  padding: 48px 0 34px; font-size: 12.5px;
}

/* 위쪽 — 브랜드 한 칸 + 링크 세 칸 */
.foot-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 34px; margin-bottom: 26px; border-bottom: 1px solid #2c3a4a;
}
/* ⚠ .foot-brand 로 좁히지 않는다. checkout.html 은 링크 칸 없이 법정 표시만 두는
   간단한 푸터를 쓰는데(결제 중에 나가는 링크를 늘리지 않는다), 그 페이지의
   브랜드 줄이 규칙 밖으로 밀려나 아무 스타일도 못 받았다(2026-08-31). */
footer .biz-name { color: #fff; font-size: 15px; font-weight: 700; margin: 0 0 10px; }
.foot-tag { margin: 0; color: #93a1b0; font-size: 13px; line-height: 1.75; }

.foot-cols { display: contents; }          /* 세 칸이 .foot-top 그리드에 그대로 놓이게 */
.foot-cols > div { display: flex; flex-direction: column; gap: 9px; }
.foot-cols b { color: #dbe3ec; font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.foot-cols a { color: #93a1b0; font-size: 13px; }
.foot-cols a:hover { color: #fff; text-decoration: none; }

/* 아래쪽 — 법정 표시. 작게, 한 덩어리로. */
footer .biz { line-height: 1.9; margin: 0 0 12px; color: #7d8b9a; }
footer .biz .sep { color: #46566a; margin: 0 9px; }
footer a { color: #93a1b0; }
footer a:hover { color: #fff; }
footer .copy { margin: 0; color: #6b7987; font-size: 12px; }

/* 아직 안 채운 칸 — 배포 스크립트가 이 표시를 찾아 배포를 막는다 */
.todo { color: #ff9d9d; }

/* ── 좁은 화면 ──────────────────────────────────── */
@media (max-width: 900px) {
  .steprow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  :root { --gap-sec: 72px; --gap-band: 68px; }
  .grid, .out-grid, .lp-plans { grid-template-columns: 1fr; }
  .top nav { gap: 14px; }
  .top nav a.hide-sm { display: none; }
  .btn-hero { padding: 15px 32px; font-size: 17px; }
  .hero { padding: 40px 0 0; }
  .shot { margin-top: 32px; }
  section > .wrap > h2 { font-size: 24px; }
  .section-sub { font-size: 16px; margin-bottom: 30px; }
}
@media (max-width: 560px) {
  .steprow { grid-template-columns: 1fr; }
}

/* 좁은 화면 — 푸터 네 칸을 접는다. .foot-cols 가 display:contents 라
   자식이 바로 그리드에 놓이므로, 열 수만 바꾸면 그대로 따라온다. */
@media (max-width: 820px) {
  .foot-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}
@media (max-width: 520px) {
  .foot-top { grid-template-columns: 1fr; gap: 24px; }
}

/* ── 좁은 화면의 비교표 ──────────────────────────── */
/* ⚠ 그냥 가로로 넘기게 두면 **「이지케이블」 칸이 화면 밖으로 잘린다.**
     정작 봐야 할 칸이 기본 상태에서 안 보이고, 옆으로 밀 수 있다는 것도 모른다.
     그래서 좁아지면 표를 버리고 '항목별 카드' 로 바꾼다.
     각 값이 어느 열의 것인지는 td 의 data-label 이 알려 준다. */
@media (max-width: 700px) {
  .table-scroll { overflow: visible; }
  .cmp { min-width: 0; display: block; }
  .cmp thead { display: none; }          /* 머리줄은 data-label 이 대신한다 */
  .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }

  .cmp tbody tr {
    background: #fff; border: 1px solid var(--bd); border-radius: var(--r-lg);
    padding: 14px 16px; margin-bottom: 12px;
  }
  .cmp tbody tr:last-child { margin-bottom: 0; }

  .cmp tbody th {
    padding: 0 0 8px; border: 0;
    font-size: 15px; font-weight: 700; color: var(--tx);
  }
  .cmp tbody td {
    display: flex; gap: 14px; justify-content: space-between; align-items: baseline;
    padding: 5px 0; border: 0; background: transparent;
    text-align: right;
  }
  .cmp tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto; text-align: left;
    color: var(--tx3); font-size: 13px; font-weight: 500;
  }
  /* 우리 줄만 위에 선을 그어 구분한다 — 넓은 화면의 '흰 기둥' 과 같은 역할 */
  .cmp tbody td.mine {
    border: 0; border-top: 1px solid var(--bd);
    margin-top: 5px; padding-top: 9px;
  }
  .cmp tbody td.mine::before { color: var(--tx2); font-weight: 700; }
}

/* ── 어두운 화면 설정 ───────────────────────────── */
/* 에디터는 밝은 화면 고정이라 랜딩도 맞춘다.
   다만 시스템이 어두울 때 눈부시지 않게 배경만 살짝 낮춘다. */
@media (prefers-color-scheme: dark) {
  :root { --bg: #fbfcfd; --bg2: #f1f4f8; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}