/* ==========================================================================
   video maker - 사이트 전체 스타일시트

   빌드 도구 없음. 이 파일이 곧 최종 CSS이므로 그대로 열어서 고치면 됩니다.

   디자인 방향: "계측기(instrument)".
   제품 자체가 "약한 하드웨어에서 정확하게 돌아가는 도구"라서, 사이트도 장식이
   아니라 눈금과 헤어라인으로 구조를 만드는 쪽으로 잡았습니다. 박스를 겹겹이
   쌓는 대신 1px 선과 여백으로 묶고, 수치는 전부 고정폭 숫자로 흘립니다.

   색은 실제 앱(app/design_system.py)의 토큰을 그대로 가져왔습니다.
     LIGHT.bg #F5F5F7 / LIGHT.text #1D1D1F / LIGHT.accent #6C5CE7
     DARK.bg  #0B0B0E / DARK.text  #F5F5F7 / DARK.accent  #8477F5
   덕분에 사이트 크롬과 제품 스크린샷이 같은 회색 위에 놓입니다.

   반지름 규칙(한 벌만 씁니다. 알약 모양은 어디에도 쓰지 않습니다):
     --r-xs 8px  작은 표식, 태그
     --r-sm 10px 버튼, 입력
     --r-md 14px 카드
     --r-lg 20px 큰 면
     --r-plate 24px 스크린샷 판

   순서:
     1. 리셋      2. 토큰       3. 기본 요소    4. 레이아웃 뼈대
     5. 내비/푸터  6. 공용 부품   7. 페이지 블록  8. 모션
   ========================================================================== */


/* ------------------------------------------------------------------ 1. 리셋 -- */

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

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, hr {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

ul, ol { padding: 0; list-style: none; }

b, strong { font-weight: bolder; }

img, svg, video, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
}

hr { border: 0; height: 0; color: inherit; }

summary { display: list-item; }


/* ------------------------------------------------------------------ 2. 토큰 --

   다크 값은 아래 두 군데에 같은 내용으로 들어갑니다.
     (a) @media (prefers-color-scheme: dark) 안의 :root:not([data-theme="light"])
     (b) :root[data-theme="dark"]
   (a)는 시스템 설정을 따르는 기본 동작, (b)는 사용자가 머리말에서 다크를
   직접 고른 경우입니다. 한쪽만 고치면 토글이 어긋나므로 항상 같이 고치세요. */

:root {
  color-scheme: light;

  /* 브랜드. 앱의 accent 계열을 그대로 씁니다. */
  --violet:        #6C5CE7;  /* 아이콘, 선, 면에 쓰는 원색 */
  --violet-text:   #5B4AD4;  /* 본문 위에 얹는 강조 글자. 원색은 대비가 모자랍니다 */
  --violet-solid:  #6C5CE7;  /* 흰 글씨를 얹는 버튼 배경 (흰 글씨 대비 4.86:1) */
  --violet-hover:  #5A49D8;
  --violet-press:  #4C3FC0;
  --violet-wash:   #EFEDFD;
  --violet-edge:   rgb(108 92 231 / .26);
  --sky:           #4C6FFF;  /* 오로라의 두 번째 정지점. 앱의 accent_grad_end */

  /* 중립. 앱의 bg/surface 계열 */
  --canvas:  #F5F5F7;
  --surface: #FFFFFF;
  --raised:  #FFFFFF;
  --sunken:  #EDEDF1;
  --hair:    #E2E2E8;
  --hair-2:  #CFCFD8;

  --ink:   #1D1D1F;
  --ink-2: #4A4A52;
  --ink-3: #6B6B73;

  --ok:    #167A3C;
  --ok-bg: #E3F5EA;

  /* 그림자는 검정 대신 브랜드 보라를 우려 씁니다. 흰 바탕에서 회색이 아니라
     "이 제품의" 그림자로 읽히게 하려는 것입니다. */
  --e-sm: 0 1px 2px rgb(29 29 31 / .06),
          0 4px 14px rgb(108 92 231 / .08);
  --e-md: 0 2px 6px rgb(29 29 31 / .05),
          0 14px 38px rgb(108 92 231 / .11);
  --e-lg: 0 6px 18px rgb(29 29 31 / .06),
          0 34px 80px rgb(108 92 231 / .16);

  /* 면 위쪽 1px 하이라이트. 다크에서만 보이고 라이트에서는 0이 됩니다. */
  --sheen: inset 0 1px 0 rgb(255 255 255 / 0);

  /* 히어로 뒤에 까는 오로라의 세기. 다크는 바탕이 어두워 더 올려야 합니다. */
  --aurora-a: 15%;
  --aurora-b: 10%;

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-plate: 24px;

  /* 라틴 글자는 Satoshi, 한글은 Pretendard가 받습니다. 한 줄 안에서 섞여도
     Satoshi에 한글 글리프가 없어 자동으로 Pretendard로 떨어집니다. */
  --font-sans: "Satoshi", "Pretendard Variable", Pretendard, system-ui, -apple-system, "Malgun Gothic", sans-serif;
  /* 한글 글리프가 JetBrains Mono에 없습니다. 아무것도 안 적어 두면 제네릭
     monospace(굴림 계열)로 떨어져 본문과 얼굴이 어긋나므로, 숫자를 가져오는
     JetBrains Mono 뒤·제네릭 앞에 Pretendard를 끼워 둡니다. 숫자는 여전히
     JetBrains Mono가 잡으므로 tabular-nums 정렬은 그대로입니다. */
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, "Pretendard Variable", Pretendard, monospace;

  --w-page:  1160px;   /* 글이 들어가는 폭 */
  --w-plate: 1320px;   /* 스크린샷처럼 넓게 눕히는 것만 */

  --nav-h: 68px;
}

:root[data-theme="light"] { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --violet:        #8477F5;
    --violet-text:   #8477F5;
    --violet-solid:  #6F65DB;  /* 흰 글씨 대비 4.60:1 */
    --violet-hover:  #7E74E8;
    --violet-press:  #5C52C4;
    --violet-wash:   #1C1930;
    --violet-edge:   rgb(132 119 245 / .30);
    --sky:           #5B9CFF;

    --canvas:  #0B0B0E;
    --surface: #131317;
    --raised:  #18181C;
    --sunken:  #0F0F13;
    --hair:    #26262C;
    --hair-2:  #3A3A43;

    --ink:   #F5F5F7;
    --ink-2: #A9A9B2;
    --ink-3: #83838C;

    --ok:    #3DDC66;
    --ok-bg: #11291A;

    --e-sm: 0 1px 2px rgb(0 0 0 / .5);
    --e-md: 0 10px 30px rgb(0 0 0 / .45);
    --e-lg: 0 30px 80px rgb(0 0 0 / .6);

    --sheen: inset 0 1px 0 rgb(255 255 255 / .06);

    --aurora-a: 26%;
    --aurora-b: 16%;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --violet:        #8477F5;
  --violet-text:   #8477F5;
  --violet-solid:  #6F65DB;
  --violet-hover:  #7E74E8;
  --violet-press:  #5C52C4;
  --violet-wash:   #1C1930;
  --violet-edge:   rgb(132 119 245 / .30);
  --sky:           #5B9CFF;

  --canvas:  #0B0B0E;
  --surface: #131317;
  --raised:  #18181C;
  --sunken:  #0F0F13;
  --hair:    #26262C;
  --hair-2:  #3A3A43;

  --ink:   #F5F5F7;
  --ink-2: #A9A9B2;
  --ink-3: #83838C;

  --ok:    #3DDC66;
  --ok-bg: #11291A;

  --e-sm: 0 1px 2px rgb(0 0 0 / .5);
  --e-md: 0 10px 30px rgb(0 0 0 / .45);
  --e-lg: 0 30px 80px rgb(0 0 0 / .6);

  --sheen: inset 0 1px 0 rgb(255 255 255 / .06);

  --aurora-a: 26%;
  --aurora-b: 16%;
}


/* -------------------------------------------------------------- 3. 기본 요소 -- */

body {
  background-color: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* 한글은 낱말 단위로 끊어야 읽힙니다. 이게 없으면 좁은 화면에서
     "내 컴퓨터에 / 서"처럼 낱말 가운데가 잘립니다. 긴 영문 토큰만
     예외적으로 아무 데서나 끊습니다. */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background-color: var(--violet-wash); color: var(--violet-text); }

/* --- 제목과 본문 --------------------------------------------------------
   한글은 라틴보다 자간을 덜 조여야 읽힙니다. -.03em 밑으로는 내리지 않습니다. */

.h1 { font-size: clamp(33px, 5.4vw, 68px); font-weight: 800; letter-spacing: -.032em; line-height: 1.14; }
.h2 { font-size: clamp(25px, 3.3vw, 44px); font-weight: 800; letter-spacing: -.028em; line-height: 1.2;  }
.h3 { font-size: clamp(19px, 2vw, 24px);   font-weight: 700; letter-spacing: -.02em;  line-height: 1.34; }

/* 강조 낱말은 같은 글꼴의 색만 바꿉니다. 헤드라인 안에 다른 서체를 끼워 넣는
   것은 아마추어 티가 나서 쓰지 않습니다. */
.h1 em, .h2 em, .h3 em { font-style: normal; color: var(--violet-text); }

.lead      { font-size: 17.5px; line-height: 1.78; color: var(--ink-2); max-width: 64ch; }
.body-text { font-size: 16px;   line-height: 1.78; color: var(--ink-2); max-width: 64ch; }
.lead strong, .body-text strong { color: var(--ink); font-weight: 600; }
.lead + .lead, .body-text + .body-text { margin-top: 18px; }

.h1 + .lead      { margin-top: 22px; }
.h2 + .lead      { margin-top: 20px; }
.h2 + .body-text { margin-top: 20px; }

.sec-lead   { margin-top: 16px; margin-bottom: 48px; }
.lead-intro { margin-bottom: 48px; }

/* 섹션 머리표. 한 페이지에 최대 두 번까지만 씁니다. */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}

/* 수치는 전부 고정폭으로. 계측기 언어의 핵심입니다. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* ---------------------------------------------------------- 4. 레이아웃 뼈대 --

   밀도는 낮게(VISUAL_DENSITY 3) 잡았습니다. 섹션 사이가 넉넉해야 각 섹션이
   "하나의 주장"으로 읽히고, 정보가 많은 제품 사이트일수록 그렇습니다. */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: 20px;
}
.wrap-plate { max-width: var(--w-plate); }

.section    { padding-block: clamp(72px, 8.5vw, 124px); }
.section-sm { padding-block: clamp(44px, 5vw, 68px); }

/* 밴드는 바탕색을 바꾸는 대신 위아래 헤어라인으로만 구분합니다. 테마를
   뒤집지 않으므로 페이지 전체가 한 벌의 밝기로 유지됩니다(§4.11). */
.band {
  background-color: var(--surface);
  border-block: 1px solid var(--hair);
}

.rule { border-top: 1px solid var(--hair); }

@media (min-width: 768px) {
  .wrap { padding-inline: 32px; }
}
@media (min-width: 1280px) {
  .wrap { padding-inline: 40px; }
}


/* ------------------------------------------------------------ 5. 내비/푸터 --

   내비는 히어로 위에 떠 있다가, 스크롤로 히어로를 벗어나면 헤어라인과
   흐림 바탕이 생깁니다. 스크롤 이벤트 대신 히어로 맨 위에 둔 감시용
   엘리먼트를 IntersectionObserver로 봅니다(app.js). */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--w-plate);
  margin-inline: auto;
  padding-inline: 20px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background-color .25s;
}

.nav.is-stuck {
  background-color: color-mix(in srgb, var(--canvas) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-bottom-color: var(--hair);
}

/* 흐림 효과를 줄이라고 한 이용자에게는 불투명 바탕을 줍니다. */
@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck {
    background-color: var(--canvas);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (min-width: 768px) { .nav { padding-inline: 32px; } }
@media (min-width: 1280px) { .nav { padding-inline: 40px; } }

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-right: auto;
}
.nav-brand em { font-style: normal; color: var(--violet-text); }

/* 워드마크 옆 표식. 앱 아이콘의 모서리 반지름을 따라갑니다. */
/* 앱과 같은 로고 그림입니다(app/assets/logo.png을 256px로 줄인 것).
   제 색과 투명 배경을 가진 그림이라, 글자 마크 시절의 그라디언트 바탕과
   안쪽 하이라이트는 빼야 합니다 — 투명한 자리에 흰 선 한 줄로 남습니다. */
.brand-mark {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-links { display: none; gap: 30px; font-size: 14.5px; color: var(--ink-2); }
.nav-links a { position: relative; padding-block: 6px; white-space: nowrap; transition: color .16s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current] { color: var(--ink); }

/* 현재 페이지는 색만으로 알리지 않고 밑줄도 같이 그립니다. */
.nav-links a[aria-current]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  border-radius: 2px;
  background-color: var(--violet);
}

.nav-right { display: flex; gap: 8px; align-items: center; }
.nav-right .btn-ghost { display: none; }

.skip {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 90;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background-color: var(--violet-solid);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: top .18s;
}
.skip:focus { top: 12px; }

/* 아이콘만 있는 정사각 버튼(테마 토글, 메뉴) */
.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  background-color: var(--surface);
  color: var(--ink-2);
  font-size: 17px;
  cursor: pointer;
  transition: border-color .16s, color .16s, background-color .16s;
}
.icon-btn:hover { border-color: var(--hair-2); color: var(--ink); }

/* 테마 토글. 현재 상태에 해당하는 글리프 하나만 보입니다. */
.theme-btn i { display: none; }
:root:not([data-theme]) .theme-btn .i-auto { display: block; }
:root[data-theme="light"] .theme-btn .i-light { display: block; }
:root[data-theme="dark"]  .theme-btn .i-dark  { display: block; }

.nav-toggle .ph-x { display: none; }
.nav-toggle[aria-expanded="true"] .ph-list { display: none; }
.nav-toggle[aria-expanded="true"] .ph-x { display: block; }

.nav-panel {
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 39;
  padding: 26px 20px 40px;
  background-color: var(--canvas);
  border-top: 1px solid var(--hair);
  overflow-y: auto;
}
.nav-panel[hidden] { display: none; }
.nav-panel a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 17px;
  border-bottom: 1px solid var(--hair);
  font-size: 18px;
  font-weight: 600;
}
.nav-panel a[aria-current] { color: var(--violet-text); }
.nav-panel a .ph { color: var(--ink-3); font-size: 17px; }
.nav-panel .btn { width: 100%; justify-content: center; margin-top: 26px; border-bottom: 0; }
.nav-panel .btn .ph { color: currentColor; }

@media (min-width: 768px) {
  .nav-right .btn-ghost { display: inline-flex; }
}
@media (min-width: 900px) {
  .nav-links  { display: flex; }
  .nav-toggle { display: none; }
  .nav-panel  { display: none; }
}

.site-footer {
  border-top: 1px solid var(--hair);
  padding-block: 44px;
  font-size: 14px;
  color: var(--ink-3);
}
.site-footer a { transition: color .16s; }
.site-footer a:hover { color: var(--ink); }

.foot-row   { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; color: var(--ink-2); }
.foot-brand em { font-style: normal; color: var(--violet-text); }
.foot-brand .brand-mark { width: 22px; height: 22px; }


/* ------------------------------------------------------------ 6. 공용 부품 --

   컬러 글로우는 어디에도 쓰지 않습니다. 깊이는 1px 테두리와 색을 우려낸
   그림자로만 만듭니다. */

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: nowrap;      /* 데스크톱에서 라벨이 두 줄로 접히면 안 됩니다 */
  padding: 13px 22px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  background-color: var(--violet-solid);
  box-shadow: var(--e-sm), inset 0 1px 0 rgb(255 255 255 / .22);
  cursor: pointer;
  transition: background-color .18s, transform .12s, box-shadow .18s;
}
.btn:hover  { background-color: var(--violet-hover); box-shadow: var(--e-md), inset 0 1px 0 rgb(255 255 255 / .22); }
.btn:active { background-color: var(--violet-press); transform: translateY(1px); }
.btn .ph { font-size: 17px; color: currentColor; }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: nowrap;
  padding: 12px 21px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair-2);
  background-color: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: border-color .18s, background-color .18s, transform .12s, color .18s;
}
.btn-ghost:hover  { border-color: var(--violet); color: var(--violet-text); background-color: var(--violet-wash); }
.btn-ghost:active { transform: translateY(1px); }
.btn-ghost .ph { font-size: 16px; transition: transform .2s cubic-bezier(.16,1,.3,1); }
.btn-ghost:hover .ph-arrow-right { transform: translateX(3px); }

.btn-sm { font-size: 13.5px; padding: 9px 15px; }
.btn-ghost.btn-sm { padding: 8px 14px; }
.btn-lg { font-size: 16.5px; padding: 16px 28px; }
.btn-ghost.btn-lg { padding: 15px 27px; }

.is-pending { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-row-center { justify-content: center; }

/* --- 카드 ---------------------------------------------------------------
   면은 꼭 필요한 곳에만 씁니다. 대부분의 묶음은 헤어라인과 여백으로 처리하고,
   카드는 여기부터 독립된 덩어리라는 뜻일 때만 꺼냅니다. */

.card {
  position: relative;
  padding: 24px;
  border-radius: var(--r-md);
  background-color: var(--surface);
  border: 1px solid var(--hair);
  box-shadow: var(--sheen);
  transition: border-color .22s, transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s;
}
.card:hover {
  border-color: var(--hair-2);
  transform: translateY(-2px);
  box-shadow: var(--e-md), var(--sheen);
}
.card:hover .icon-badge { color: var(--violet); border-color: var(--violet-edge); }
.band .card { background-color: var(--canvas); }
.card-col { display: flex; flex-direction: column; }

.card-head  { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.card-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.card-desc  { font-size: 14px; line-height: 1.72; color: var(--ink-2); }

.icon-badge {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-xs);
  border: 1px solid var(--hair);
  background-color: var(--canvas);
  color: var(--ink-2);
  font-size: 18px;
  transition: color .22s, border-color .22s;
}
.band .icon-badge { background-color: var(--surface); }
.icon-badge-lg { width: 46px; height: 46px; font-size: 22px; border-radius: var(--r-sm); }

/* --- 칩과 태그 ---------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--r-xs);
  border: 1px solid var(--hair);
  background-color: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  transition: border-color .16s, color .16s;
}
a.chip:hover { border-color: var(--violet); color: var(--violet-text); }
.chip i { font-size: 14px; color: var(--violet); }
.band .chip { background-color: var(--canvas); }

.chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.chip-row-tight { margin-top: 22px; }
.chip-row-wide  { margin-top: 40px; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  border: 1px solid var(--hair);
  background-color: var(--canvas);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-3);
}
.band .tag { background-color: var(--surface); }
.tag-ok { color: var(--ok); background-color: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.band .tag-ok { background-color: var(--ok-bg); }
.tag-foot { margin-top: 18px; }
.tag-push { margin-top: auto; align-self: flex-start; }
.tag i { font-size: 12px; }

/* --- 스크린샷 판 --------------------------------------------------------
   앱 UI가 1400px이라 반폭 컬럼에 넣으면 글씨를 읽을 수 없습니다. 그래서
   판은 본문보다 넓게 두고, 바닥에 은은한 빛을 깔아 떠 있는 것처럼 놓습니다. */

.plate {
  position: relative;
  border-radius: var(--r-plate);
  overflow: hidden;
  background-color: var(--sunken);
  border: 1px solid var(--hair);
  box-shadow: var(--e-lg), inset 0 1px 0 rgb(255 255 255 / .1);
}
.plate img { width: 100%; height: auto; }

/* 판 아래 바닥 빛. 별도 요소 없이 래퍼의 가상 요소 하나로 처리합니다. */
.plate-wrap { position: relative; }
.plate-wrap::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -34px;
  height: 80px;
  z-index: -1;
  border-radius: 999px;
  background-image: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--violet) 34%, transparent), transparent 72%);
  filter: blur(26px);
  pointer-events: none;
}

.shot-caption { margin-top: 16px; font-size: 13px; color: var(--ink-3); }

/* 판 위에 얹는 작은 정보 패널. 사진 위 라벨이 아니라 옆에 붙는 별도 면이라
   기울이지 않습니다. 기울인 콜라주는 금방 싸구려로 읽힙니다. */
.plate-panel {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  width: 196px;
  padding: 16px;
  border-radius: var(--r-md);
  background-color: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid var(--hair-2);
  box-shadow: var(--e-md), inset 0 1px 0 rgb(255 255 255 / .16);
}
@media (prefers-reduced-transparency: reduce) {
  .plate-panel { background-color: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.plate-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.plate-panel-title i { color: var(--violet); font-size: 14px; }
.plate-panel ol { display: flex; flex-direction: column; gap: 8px; }
.plate-panel li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.plate-panel li i { color: var(--violet); font-size: 13px; flex-shrink: 0; }

/* 좁은 화면에서는 패널이 스크린샷을 덮어버리므로 뺍니다. */
@media (max-width: 720px) {
  .plate-panel { display: none; }
}

/* --- 쉬운 말 요약 -------------------------------------------------------
   기술 용어 없이 한 번 더 풀어 주는 칸입니다. 이 사이트 독자의 상당수가
   GPU가 뭔지 모르는 사람이라 장식이 아니라 본문입니다. */

.plain {
  display: flex;
  gap: 14px;
  padding: 20px 22px;
  margin-block: 28px;
  border-radius: var(--r-md);
  border: 1px solid var(--violet-edge);
  background-color: var(--violet-wash);
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 68ch;
}
.plain i { color: var(--violet-text); font-size: 19px; flex-shrink: 0; margin-top: 2px; }
.plain b { font-weight: 700; color: var(--ink); }
.plain-foot { margin-top: 36px; margin-bottom: 0; }

/* --- FAQ. details는 JS 없이 동작하고 키보드로도 열립니다. --------------- */

.faq { border-top: 1px solid var(--hair); margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -.015em;
  cursor: pointer;
  list-style: none;
  transition: color .16s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink-3);
  flex-shrink: 0;
  transition: transform .2s cubic-bezier(.16,1,.3,1), color .16s;
}
.faq details[open] summary::after { transform: rotate(45deg); color: var(--violet); }
.faq summary:hover { color: var(--violet-text); }
.faq-body {
  padding-bottom: 24px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 68ch;
}
.faq-body strong { color: var(--ink); font-weight: 600; }

/* --- 본문에 끼는 인라인 코드 -------------------------------------------- */

.code-chip {
  font-family: var(--font-mono);
  font-size: .86em;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--hair);
  background-color: var(--canvas);
  color: var(--violet-text);
  white-space: nowrap;
}
.band .code-chip { background-color: var(--surface); }


/* -------------------------------------------------------- 7. 페이지 블록 -- */

/* --- 오로라 -------------------------------------------------------------
   앱의 AuroraBackground 위젯을 사이트로 옮겨 온 것입니다. 사이트와 제품이
   같은 빛을 쓰게 하려는 것이지 예뻐 보이려는 장식이 아닙니다.
   페이지당 한 번만 깝니다(히어로 또는 페이지 머리말). */

.aurora {
  position: absolute;
  /* 히어로는 스티키 내비 아래에서 시작합니다. 빛을 내비 높이만큼 위로
     끌어올리지 않으면 내비 바로 밑에 가로선이 한 줄 생깁니다. */
  top: calc(var(--nav-h) * -1);
  left: 0;
  right: 0;
  height: 830px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.aurora span:nth-child(1) {
  top: -232px;
  left: -140px;
  width: 720px;
  height: 620px;
  background-color: color-mix(in srgb, var(--violet) var(--aurora-a), transparent);
}
.aurora span:nth-child(2) {
  top: -152px;
  right: -180px;
  width: 620px;
  height: 520px;
  background-color: color-mix(in srgb, var(--sky) var(--aurora-b), transparent);
}

/* --- 홈 히어로 ---------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(40px, 5vw, 84px);   /* 96px를 넘기면 내용이 화면 중턱에 뜹니다 */
  padding-bottom: clamp(56px, 6vw, 92px);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  margin-bottom: 26px;
  border-radius: var(--r-xs);
  border: 1px solid var(--violet-edge);
  background-color: var(--violet-wash);
  color: var(--violet-text);
  font-size: 13px;
  font-weight: 650;
}
.hero-badge i { font-size: 15px; }

.hero-title { max-width: 21ch; margin-bottom: 24px; }
.hero-sub {
  font-size: 18px;
  line-height: 1.72;
  color: var(--ink-2);
  max-width: 44ch;
  margin-bottom: 34px;
}

/* --- 히어로 스크린샷 ----------------------------------------------------- */

.shot-block { margin-top: clamp(52px, 6vw, 84px); }

.shot-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  background-color: var(--surface);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.shot-tab {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 650;
  padding: 8px 15px;
  border-radius: 7px;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .16s, background-color .16s;
}
.shot-tab:hover { color: var(--ink-2); }
.shot-tab[aria-selected="true"] {
  color: var(--ink);
  background-color: var(--canvas);
  box-shadow: var(--e-sm);
}

/* 탭을 바꾸면 사진이 갈아 끼워집니다. 갈아 끼우는 순간만 짧게 흐려서
   다른 화면으로 넘어갔다는 것을 알립니다. */
.plate img { transition: opacity .18s ease; }
.plate img.is-swapping { opacity: 0; }

/* --- 사양 줄. 히어로 바로 아래, 헤어라인 한 줄로만 --------------------- */

.spec-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  border-block: 1px solid var(--hair);
}
.spec-bar > * {
  flex: 1 1 158px;
  padding: 20px 4px 20px 22px;
  border-left: 1px solid var(--hair);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 9px;
}
.spec-bar > *:first-child { border-left: 0; padding-left: 0; }
.spec-bar i { font-size: 16px; color: var(--violet); flex-shrink: 0; }
.spec-bar b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }

@media (max-width: 720px) {
  .spec-bar > * { flex-basis: 50%; border-left: 0; padding: 14px 0; }
  .spec-bar > *:nth-child(n+2) { border-top: 1px solid var(--hair); }
}

/* --- 하위 페이지 머리말 -------------------------------------------------- */

.page-head,
.page-head-split {
  position: relative;
  padding-top: clamp(48px, 5.5vw, 92px);
}
.page-head { padding-bottom: clamp(20px, 3vw, 40px); }
.page-head-split { padding-bottom: clamp(56px, 6vw, 96px); }

/* 제목마다 줄바꿈이 떨어지는 지점이 달라 폭만 따로 잡습니다. */
.title-workspaces { max-width: 19ch; margin-bottom: 22px; }
.title-who        { max-width: 21ch; margin-bottom: 22px; }
.title-providers  { max-width: 16ch; margin-bottom: 22px; }
.title-download   { max-width: 13ch; margin-bottom: 22px; }

.title-overview     { max-width: 19ch; margin-bottom: 24px; }
.title-solo         { max-width: 19ch; }
.title-audience     { max-width: 21ch; }
.title-privacy      { max-width: 19ch; }
.title-architecture { max-width: 21ch; margin-bottom: 26px; }
.title-craft        { max-width: 17ch; margin-bottom: 26px; }
.title-close        { max-width: 17ch; margin-inline: auto; margin-bottom: 20px; }

/* --- 두 단 배치 ---------------------------------------------------------- */

.split-toolkit,
.split-editor,
.split-download {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 40px;
}

/* 좁은 화면에서는 스크린샷을 먼저 보여 줍니다. 도구 상자 섹션은 오른쪽이
   사진이 아니라 순서 목록이라 제외합니다. 제목보다 먼저 나오면 맥락 없이
   목록부터 읽히게 됩니다. */
.split-editor .split-copy,
.split-download .split-copy  { order: 2; }
.split-editor .split-media,
.split-download .split-media { order: 1; }

@media (min-width: 1024px) {
  .split-toolkit  { grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); gap: 68px; align-items: start; }
  .split-editor   { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 60px; }
  .split-download { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 60px; }
  .split-editor .split-copy,
  .split-download .split-copy  { order: 1; }
  .split-editor .split-media,
  .split-download .split-media { order: 2; }
}

/* --- 생성 파이프라인 레일 ------------------------------------------------
   네 단계를 같은 크기 카드 넷으로 늘어놓으면 순서가 아니라 목록으로 읽힙니다.
   그래서 실제로 이어진 한 줄 위에 마디를 찍고, 스크롤로 들어올 때 그 선이
   왼쪽에서 오른쪽으로 그려지게 했습니다. 선이 곧 순서라는 정보입니다. */

.rail { position: relative; margin-top: 52px; }

.rail-line {
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background-image: linear-gradient(180deg, var(--violet), var(--sky));
  transform-origin: top center;
}

.rail-items { display: grid; gap: 30px; padding-left: 34px; }

.rail-item { position: relative; }
.rail-item::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background-color: var(--canvas);
  border: 2px solid var(--violet);
}
.band .rail-item::before { background-color: var(--surface); }
.rail-item.is-optional::before { border-style: dashed; border-color: var(--hair-2); }

.rail-name { font-size: 16px; font-weight: 700; letter-spacing: -.015em; display: flex; align-items: center; gap: 9px; }
.rail-name i { color: var(--violet); font-size: 17px; }
.rail-item.is-optional .rail-name i { color: var(--ink-3); }
.rail-note { font-size: 14px; line-height: 1.68; color: var(--ink-2); margin-top: 7px; max-width: 34ch; }
.rail-tech {
  display: inline-block;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--ink-3);
}

@media (min-width: 900px) {
  .rail-line {
    left: 8px;
    right: 8px;
    top: 7px;
    bottom: auto;
    width: auto;
    height: 2px;
    background-image: linear-gradient(90deg, var(--violet), var(--sky));
    transform-origin: left center;
  }
  .rail-items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    padding-left: 0;
    padding-top: 38px;
  }
  .rail-item::before { left: 0; top: -38px; }
  .rail-note { max-width: none; }
}

/* --- 세 단계. 상자 없이 머리선으로만 묶습니다. -------------------------- */

.stepline { margin-top: 48px; display: grid; gap: 0; }
.step-item { padding-block: 30px; border-top: 1px solid var(--hair); }
.step-item h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.step-item h3 i { color: var(--violet); font-size: 20px; }
.step-item p { font-size: 15px; line-height: 1.74; color: var(--ink-2); max-width: 40ch; }

@media (min-width: 860px) {
  .stepline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .step-item { padding: 34px 30px 0 30px; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
  .step-item:first-child { padding-left: 0; border-left: 0; }
}

/* --- 12개 작업 공간 행렬. 1px 틈이 곧 선이 됩니다. --------------------- */

.matrix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.matrix-cell {
  background-color: var(--surface);
  padding: 26px 24px;
  transition: background-color .2s;
}
.band .matrix-cell { background-color: var(--canvas); }
.matrix-cell:hover { background-color: var(--violet-wash); }
.matrix-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.matrix-head i { font-size: 20px; color: var(--violet); }
.matrix-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.matrix-desc { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }

@media (min-width: 620px)  { .matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .matrix { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- 한 편이 만들어지는 순서 (세로 타임라인) ---------------------------- */

.flow-head {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.flow-list { position: relative; padding-left: 26px; display: flex; flex-direction: column; gap: 4px; }
.flow-list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background-image: linear-gradient(180deg, var(--violet), var(--hair));
}
.flow-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding-block: 12px;
  font-size: 14.5px;
}
.flow-step::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 50%;
  translate: 0 -50%;
  width: 11px;
  height: 11px;
  border-radius: 4px;
  background-color: var(--canvas);
  border: 2px solid var(--violet);
}
.band .flow-step::before { background-color: var(--surface); }
.flow-step:last-child::before { border-color: var(--hair-2); }
.flow-step i { font-size: 17px; color: var(--violet); flex-shrink: 0; }
.flow-step:last-child i { color: var(--ink-3); }
.flow-name { flex: 1 1 0%; font-weight: 600; }

/* --- 대시로 표시하는 목록 (어디서 돌아가나, 세 단) ---------------------- */

.col-grid { display: grid; grid-template-columns: 1fr; gap: 34px; margin-top: 48px; }
.col-head {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-3);
}
.col-head i { color: var(--violet); font-size: 15px; }
.col-head-ok   i { color: var(--ok); }
.col-head-mute i { color: var(--ink-3); }

.tick-list { display: flex; flex-direction: column; gap: 11px; }
.tick-list li { font-size: 14.5px; color: var(--ink-2); padding-left: 18px; position: relative; }
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .66em;
  width: 7px;
  height: 1px;
  background-color: var(--hair-2);
}

@media (min-width: 860px) { .col-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }

/* --- 수치 한 줄 --------------------------------------------------------- */

.figure-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.figure { padding: 26px 20px; border-top: 1px solid var(--hair); }
.figure-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink);
}
.figure-num small { font-size: .46em; font-weight: 500; color: var(--ink-3); margin-left: 4px; letter-spacing: 0; }
.figure-label { font-size: 13px; color: var(--ink-3); margin-top: 12px; }

@media (min-width: 720px) {
  .figure-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .figure { border-left: 1px solid var(--hair); padding-left: 28px; }
  .figure:first-child { border-left: 0; padding-left: 0; }
}

/* --- 사양 정의 목록 ------------------------------------------------------ */

.spec-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 48px; }
.spec { padding: 22px 0; border-top: 1px solid var(--hair); }
.spec dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.spec dd { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.spec dd.ok { color: var(--ok); }

@media (min-width: 560px) {
  .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec { padding: 24px 22px; border-left: 1px solid var(--hair); }
  .spec:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}
@media (min-width: 1024px) {
  .spec-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .spec { padding: 24px 18px; }
  .spec:nth-child(3n+1) { border-left: 1px solid var(--hair); padding-left: 18px; }
  .spec:first-child { border-left: 0; padding-left: 0; }
}

/* --- 대표 기능 벤토. 다섯 항목, 다섯 칸. -------------------------------
   칸 이름은 기능 이름 그대로입니다. */

.bento {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  grid-template-areas: "video" "shortform" "caption" "avatar" "kaggle";
}
@media (min-width: 680px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "video video" "shortform caption" "avatar kaggle";
  }
}
@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "video video shortform"
      "video video caption"
      "avatar kaggle kaggle";
  }
}
.b-video     { grid-area: video; }
.b-shortform { grid-area: shortform; }
.b-caption   { grid-area: caption; }
.b-avatar    { grid-area: avatar; }
.b-kaggle    { grid-area: kaggle; }

/* 큰 칸은 글자만 두지 않고 실제 제품 화면을 함께 놓습니다. 글씨 카드만
   여섯 장 늘어놓은 벤토는 바로 티가 납니다. */
.b-video { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.b-video-media { position: relative; background-color: var(--sunken); border-bottom: 1px solid var(--hair); }
.b-video-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 8; }
.b-video-body { padding: 28px; }

.b-avatar { background-image: linear-gradient(150deg, color-mix(in srgb, var(--violet) 13%, transparent), transparent 58%); }
.b-kaggle { background-image: radial-gradient(420px 260px at 100% 100%, color-mix(in srgb, var(--sky) 16%, transparent), transparent 70%); }

.feat-title { font-size: 16.5px; line-height: 1.45; font-weight: 700; letter-spacing: -.015em; margin-top: 16px; margin-bottom: 10px; }
.b-video .feat-title { font-size: 21px; margin-top: 0; }
.feat-desc { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }

/* --- 사용 사례: 독자 배지 ------------------------------------------------ */

.who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--r-xs);
  margin-bottom: 20px;
  background-color: var(--violet-wash);
  color: var(--violet-text);
  border: 1px solid var(--violet-edge);
}
.who i { font-size: 14px; }

/* --- 사용 사례: 대표 시나리오의 다섯 단계 -------------------------------- */

.run-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 52px;
  background-color: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.run-step { background-color: var(--surface); padding: 24px 22px; }
.band .run-step { background-color: var(--canvas); }
.run-step i { font-size: 21px; color: var(--violet); }
.run-name { font-size: 15px; font-weight: 700; letter-spacing: -.015em; margin-top: 14px; }
.run-tab  { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); margin-top: 6px; letter-spacing: .04em; }

/* 다섯 단계도 마찬가지. 두 단일 때 마지막 단계가 줄을 다 차지합니다. */
@media (min-width: 560px) {
  .run-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-grid > :last-child { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .run-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .run-grid > :last-child { grid-column: auto; }
}

/* --- 사용 사례: 나머지 시나리오 카드 ------------------------------------- */

.scene-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
.scene-title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 12px; line-height: 1.35; }
.scene-desc  { font-size: 14.5px; line-height: 1.74; color: var(--ink-2); }
.scene-list {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.scene-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.scene-list i  { font-size: 16px; color: var(--violet); flex-shrink: 0; }
.scene-list .tab { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }

@media (min-width: 1000px) { .scene-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- AI 제공자 ---------------------------------------------------------- */

.prov-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.prov-mark {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  background-image: linear-gradient(145deg, var(--violet), var(--sky));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35);
}
.prov-mark.is-local { background-image: linear-gradient(145deg, var(--ok), color-mix(in srgb, var(--ok) 55%, #000)); }
.prov-name { font-size: 16px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 9px; }
.prov-desc { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); margin-bottom: 20px; }

/* 다섯 개를 두 단으로 놓으면 마지막 줄에 빈 칸이 하나 남습니다.
   마지막 카드를 두 칸으로 늘려 줄을 채웁니다. */
@media (min-width: 620px) {
  .prov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prov-grid > :last-child { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .prov-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .prov-grid > :last-child { grid-column: auto; }
}

/* --- 아키텍처 설명 ------------------------------------------------------- */

.arch-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 52px; }
.arch-item { padding-block: 30px; border-top: 1px solid var(--hair); }
.arch-title { font-size: 16.5px; font-weight: 700; letter-spacing: -.018em; margin-top: 16px; margin-bottom: 10px; }
.arch-item .card-desc { max-width: 42ch; }

@media (min-width: 1000px) {
  .arch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .arch-item { padding: 34px 28px 0 28px; border-left: 1px solid var(--hair); }
  .arch-item:first-child { padding-left: 0; border-left: 0; }
}

/* --- 다운로드 페이지 ----------------------------------------------------- */

.dl-sub { font-size: 18px; line-height: 1.72; color: var(--ink-2); max-width: 38ch; margin-bottom: 34px; }
.dl-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.dl-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--ink-2);
  margin-bottom: 16px;
  max-width: 44ch;
}
/* line-height는 일부러 지정하지 않습니다. 이 셀렉터가 Phosphor의 .ph-fill
   규칙보다 우선순위가 높아, 값을 주면 아이콘 글리프가 세로로 밀립니다. */
.dl-note i { font-size: 17px; color: var(--violet); flex-shrink: 0; margin-top: 2px; }
.dl-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); letter-spacing: .02em; }

.craft-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: 52px;
  background-color: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.craft-item { background-color: var(--surface); padding: 28px 24px; }
.band .craft-item { background-color: var(--canvas); }
.craft-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; margin-top: 16px; margin-bottom: 9px; }
.craft-desc  { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }

@media (min-width: 620px)  { .craft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .craft-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- 페이지를 닫는 자리 -------------------------------------------------- */

.center-cta { position: relative; text-align: center; }
.close-lead { max-width: 50ch; margin-inline: auto; margin-bottom: 38px; text-align: center; }
/* --- 심화 설명 두 단. 왼쪽 제목은 붙어서 따라옵니다. -------------------- */

/* 모바일에서 grid-template-columns를 빼면 칸이 max-content로 잡혀, 안에 든
   <pre> 한 줄이 페이지 전체를 가로로 밀어냅니다(실측: 375px에서 500px).
   minmax(0, 1fr)과 자식의 min-width:0이 그걸 막습니다. */
.split-deep { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.split-deep > * { min-width: 0; }
.deep-head .h2 { margin-bottom: 16px; }
.deep-head .body-text { margin-bottom: 18px; }

@media (min-width: 1000px) {
  .split-deep {
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
  /* 오른쪽 목록이 길어서, 왼쪽 제목이 같이 흘러가면 무엇에 대한 목록인지
     중간부터 알 수 없게 됩니다. 붙여 두고 목록만 지나가게 합니다. */
  .split-deep > .deep-head { position: sticky; top: calc(var(--nav-h) + 28px); }
}

/* --- 항목 나열. 카드를 열두 장 깔지 않고 헤어라인으로만 끊습니다. ------ */

.detail-list { border-top: 1px solid var(--hair); }
.detail-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 0 16px;
  padding: 20px 2px;
  border-bottom: 1px solid var(--hair);
  transition: background-color .2s;
}
.detail-item:hover { background-color: var(--violet-wash); }
/* line-height를 지정하면 Phosphor 글리프가 세로로 밀립니다(.dl-note와 같은 이유). */
.detail-item > i { font-size: 20px; color: var(--violet); margin-top: 1px; }
.detail-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 11px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: 7px;
}
.detail-name .tag { font-weight: 500; letter-spacing: 0; }
.detail-desc { font-size: 14px; line-height: 1.72; color: var(--ink-2); text-wrap: pretty; }
.detail-desc + .detail-desc { margin-top: 8px; }

/* --- 번호 붙은 단계. 눈금처럼 읽히도록 고정폭 숫자를 씁니다. ------------ */

.seq { counter-reset: seq; border-top: 1px solid var(--hair); }
.seq-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 18px;
  padding: 20px 2px;
  border-bottom: 1px solid var(--hair);
}
.seq-item::before {
  counter-increment: seq;
  content: counter(seq, decimal-leading-zero);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--violet-text);
  padding-top: 4px;
}
.seq-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px 11px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: 7px;
}
.seq-name .tag { font-weight: 500; letter-spacing: 0; }
.seq-desc { font-size: 14px; line-height: 1.72; color: var(--ink-2); text-wrap: pretty; }

/* --- 명령줄. 배포가 소스 형태라 실제로 칠 줄을 그대로 보여 줍니다. ------
   pre에 overflow-x를 주는 것이 핵심입니다. 긴 명령 한 줄 때문에 페이지
   전체가 가로로 밀리는 것을 막습니다. */

.cmd + .cmd { margin-top: 20px; }
.cmd-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 9px;
}
.cmd pre {
  margin: 0;
  overflow-x: auto;
  padding: 15px 17px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hair);
  background-color: var(--sunken);
  box-shadow: var(--sheen);
}
.cmd code {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--ink);
  white-space: pre;
}
.cmd .c { color: var(--ink-3); }   /* 주석 줄 */
.cmd .p { color: var(--violet-text); }  /* 프롬프트 표시 */

/* --- 배포 경로 두 갈래 --------------------------------------------------- */

.track-grid { display: grid; gap: 18px; margin-top: 30px; }
@media (min-width: 860px) { .track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.track-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.track-head i { font-size: 20px; color: var(--violet); }
.track-name { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.track-desc { font-size: 14px; line-height: 1.72; color: var(--ink-2); margin-bottom: 16px; }



/* ------------------------------------------------------------------ 8. 모션 --

   모션은 전부 이유가 있어야 넣습니다. 여기 있는 것은 넷뿐입니다.
     1) 히어로 등장 순서 - 무엇을 먼저 읽어야 하는지 알립니다
     2) 스크롤 리빌 + 차례 밀기 - 긴 목록이 도착하는 순서를 만듭니다
     3) 파이프라인 선 그리기 - 선 자체가 순서라는 정보라 그려져야 뜻이 삽니다
     4) 오로라 표류 - 앱의 배경과 같은 빛이라는 신호

   전부 prefers-reduced-motion 아래에서는 켜지지 않습니다. 규칙 자체를
   no-preference 안에 넣었으므로 축소 설정에서는 처음부터 최종 상태입니다.
   transform과 opacity만 건드리므로 레이아웃을 다시 계산하지 않습니다. */

@media (prefers-reduced-motion: no-preference) {

  /* 1) 히어로 등장. 배지, 제목, 설명, 버튼, 스크린샷 순서로 올라옵니다. */
  .js .hero-in {
    opacity: 0;
    transform: translateY(14px);
    animation: hero-rise .72s cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  @keyframes hero-rise {
    to { opacity: 1; transform: none; }
  }

  /* 2) 스크롤 리빌. is-visible은 app.js의 IntersectionObserver가 붙입니다. */
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.16, 1, .3, 1),
                transform .6s cubic-bezier(.16, 1, .3, 1);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }

  /* 같은 묶음 안의 항목은 차례로 밀어 줍니다. --i는 app.js가 넣습니다. */
  .js .stagger > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s cubic-bezier(.16, 1, .3, 1),
                transform .55s cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--i, 0) * 55ms);
  }
  .js .stagger.is-visible > * { opacity: 1; transform: none; }

  /* 3) 파이프라인 선. 세로일 때는 위에서 아래로, 가로일 때는 왼쪽에서
     오른쪽으로 자랍니다. transform-origin은 7절에서 방향에 맞춰 잡았습니다. */
  .js .rail-line {
    transform: scaleY(0);
    transition: transform 1.1s cubic-bezier(.22, 1, .36, 1) .15s;
  }
  .js .rail.is-visible .rail-line { transform: scaleY(1); }

  @media (min-width: 900px) {
    .js .rail-line { transform: scaleX(0); }
    .js .rail.is-visible .rail-line { transform: scaleX(1); }
  }

  /* 4) 오로라 표류. 아주 느리게, 아주 조금만 움직입니다. 이게 눈에 띄면
     실패입니다. 배경이 살아 있다는 느낌만 남으면 됩니다. */
  .aurora span:nth-child(1) { animation: drift-a 26s ease-in-out infinite alternate; }
  .aurora span:nth-child(2) { animation: drift-b 32s ease-in-out infinite alternate; }

  @keyframes drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(70px, 40px, 0) scale(1.1); }
  }
  @keyframes drift-b {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-60px, 50px, 0) scale(1.08); }
  }
}

/* 부드러운 스크롤도 축소 설정에서는 끕니다. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}