/* 랜딩 사이트 공통 스타일. home.html 에서 옮겨 왔고 pricing.html 등 다른 페이지도 같이 쓴다. */
/* 슈퍼리스트 홈(superlist.com)을 2026-09-03 에 실측해 같은 구조·치수로 옮겼다.
   배경 #181824 · h1 64/600/60.8 · h2 48/600/52.8 (흰 문장 + 회색 #535676 문장) · h3 24/400 · 본문 18/500
   · 헤더 100 · 콘텐츠 폭 1300 · 카드 r20 · 후기 카드 p40 r20 · 푸터 5열(색 제목).
   이미지는 public/landing/dark/ 의 생성 이미지(gpt-image, 글자 없는 어두운 UI 목업)다. */




:root {
  --bg: #181824;
  --panel: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 255, 255, 0.08);
  --ink: #fff;
  --dim: #535676;
  --muted: rgba(255, 255, 255, 0.55);
  --primary: #4772fa;
  --blue: #2f7cff;
  --violet: #6b5cf6;
  --coral: #ff3b30;
  /* 슈퍼리스트 버튼 실측: 위 #f9613f → 아래 #c5230d 세로 그라데이션 + 위 0.5px 흰 하이라이트 */
  --btn-bg: linear-gradient(0deg, #c5230d 0%, #f9613f 100%);
  --btn-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05), inset 0 0.5px 0 rgba(255, 255, 255, 0.45);
  --content: 1300px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px; line-height: 1.4; font-weight: 500; letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
img { display: block; max-width: 100%; }
.container { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 20px; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── 헤더 (슈퍼리스트 실측: h100 · 좌우 50 · 아이콘 28 + 글자 간격 10 · 메뉴 16/600 간격 24 화살표 18 · 로그인 16/600 · 가입 알약형 h48 px20 16/400 · 로그인↔가입 20) ── */
/* 슈퍼리스트처럼 화면에 고정: 아래로 내리면 위로 숨고(-100%), 위로 올리면 블러 배경과 함께 다시 내려온다 */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 100px; transition: transform 0.35s var(--ease), background-color 0.25s; }
.site-header.hide { transform: translateY(-100%); }
.site-header.blur { background: rgba(24, 24, 36, 0.35); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.site-header .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; max-width: none; padding: 0 50px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 22px; line-height: 23px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.brand img { width: 119px; height: 28px; object-fit: contain; }
.navbar { display: flex; gap: 24px; font-size: 16px; line-height: 19.2px; font-weight: 600; color: #f7f7ff; }
.navbar a { display: inline-flex; align-items: center; gap: 3px; transition: color 0.15s; }
.navbar a:hover { color: var(--muted); }
.navbar svg { width: 18px; height: 18px; }
/* 드롭다운 (슈퍼리스트 실측: 패널 r16 p8 어두운 카드, 항목 132×40 r12 16/600, 트리거는 자홍 #e64bff + 밑줄) */
.navbar .has-menu { position: relative; }
.navbar .has-menu > a { padding: 6px 0; }
.navbar .menu { position: absolute; left: -8px; top: 100%; min-width: 148px; padding: 8px; border-radius: 16px; background: #24243a; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.18s, transform 0.18s var(--ease); }
.navbar .menu a { display: flex; align-items: center; gap: 10px; height: 40px; padding: 8px; border-radius: 12px; font-size: 16px; font-weight: 600; color: #fff; white-space: nowrap; }
.navbar .menu a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.navbar .has-menu:hover > a, .navbar .has-menu:focus-within > a { color: #e64bff; text-decoration: underline; text-underline-offset: 6px; }
.navbar .has-menu:hover .menu, .navbar .has-menu:focus-within .menu { opacity: 1; visibility: visible; transform: none; }
.auth { display: flex; justify-content: flex-end; align-items: center; gap: 20px; font-size: 16px; font-weight: 600; color: #f7f7ff; }
/* 로그인 상태의 헤더: 프로필 이미지 하나 (클릭하면 웹 앱) */
.auth .me { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--primary); color: #fff; font-size: 16px; font-weight: 700; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); transition: box-shadow 0.2s, transform 0.2s var(--ease); }
.auth .me:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.auth .me img { width: 100%; height: 100%; object-fit: cover; }
.signup { padding: 10px 14px; border-radius: 100px; background: var(--btn-bg); box-shadow: var(--btn-shadow); color: #fff; font-size: 16px; line-height: 19px; font-weight: 600; letter-spacing: -0.01em; }

/* ── 버튼 (슈퍼리스트 실측: r100 · 여백 14/25/15 → h51 · 18/400 흰색 ls -0.01em) ── */
.btn { display: inline-block; padding: 14px 25px 15px; border-radius: 100px; background: var(--btn-bg); box-shadow: var(--btn-shadow); color: #fff; font-size: 18px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; transition: transform 0.2s var(--ease), filter 0.2s; } /* 슈퍼리스트는 글꼴 자체가 세미볼드 */
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* 히어로 + 선언문 + 로고 행이 한 그라데이션 위에 얹힌다 (슈퍼리스트 첨부 이미지에서 색 샘플링:
   위 #1e1c30 옅은 보라, 프레임 아래 왼쪽 붉은 #7b3138 · 가운데 자홍 #874474 · 오른쪽 보라 #5a4c9c, 로고 행 지나며 #181824 로 복귀) */
.top { position: relative; padding-top: 100px; overflow: hidden; }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #1b1a2b; }
.top::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 84%, #181824 100%),
    radial-gradient(45% 30% at 55% 10%, rgba(96, 66, 160, 0.6), transparent 70%),
    radial-gradient(35% 30% at 100% 30%, rgba(70, 50, 120, 0.7), transparent 70%),
    radial-gradient(45% 40% at 0% 72%, #8a3540 0%, rgba(138, 53, 64, 0) 70%),
    radial-gradient(70% 38% at 45% 80%, #963f7e 0%, rgba(150, 63, 126, 0) 70%),
    radial-gradient(50% 40% at 100% 68%, #5f4fa8 0%, rgba(95, 79, 168, 0) 70%),
    radial-gradient(80% 26% at 50% 96%, #6a4a8a 0%, rgba(106, 74, 138, 0) 70%); }
.hero { position: relative; }
.hero .content { display: flex; flex-direction: column; align-items: center; padding-top: 90px; text-align: center; }
.hero h1 { font-size: 64px; line-height: 0.95; font-weight: 600; letter-spacing: -0.02em; }
.hero h1 span { display: block; color: #ff4a36; } /* 슈퍼리스트 실측 강조색 */
.hero .sub { margin-top: 30px; max-width: 700px; font-size: 18px; line-height: 1.4; font-weight: 500; }
.hero .btn { margin-top: 36px; }
.hero-shot { position: relative; margin: 96px auto 0; width: 100%; max-width: var(--content); padding: 0 20px; }
.hero-shot .frame { aspect-ratio: 1.6; padding: 16px; border-radius: 40px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45); overflow: hidden; }
.hero-shot img, .hero-shot video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 26px; }

/* ── 한 문장 선언 (30/600 중앙) ── */
.statement { padding: 140px 0 120px; text-align: center; }
.statement h2 { margin: 0 auto; max-width: 780px; font-size: 30px; line-height: 1.2; font-weight: 600; }
.logos { padding-bottom: 170px; text-align: center; }
.logos p { font-size: 20px; font-weight: 600; }
.logos ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 40px; margin: 56px auto 0; max-width: 1000px; }
.logos li { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.72); }

/* ── 섹션 제목: 아이콘 + 48/600 (흰 문장 + 회색 문장) ── */
/* 슈퍼리스트 실측(1440): 섹션 패딩 좌우 50 → 콘텐츠 1275 · 아이콘 212×38 상단 32 · 제목 48/600/52.8 ls -0.02em 폭 800 · 아이콘→제목 20 */
.sec { padding-top: 32px; }
.sec .container { max-width: 1375px; padding: 0 50px; }
.sec .mark { width: 212px; height: 38px; color: var(--primary); }
.sec .mark svg { width: 100%; height: 100%; }
/* AI 섹션 마크: 이퀄라이저 막대가 차례로 튀어나온다 */
.mark-ai .eq { transform-origin: center; transform: scaleY(0); opacity: 0; transition: transform 0.5s var(--ease), opacity 0.3s var(--ease); transition-delay: calc(var(--i) * 0.06s); }
.mark-ai .eq { transform-box: fill-box; }
.mark-ai .tail { transform: scaleX(0); transform-origin: left center; }
.mark-ai.in .eq { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mark-ai .eq { transition: none; transform: none; opacity: 1; } }
/* 벡터 그리기 모션: 선 길이만큼 점선 간격을 주고 오프셋을 0 으로 줄이면 펜으로 그리듯 나타난다. 길이는 JS 가 getTotalLength 로 넣는다. */
.draw path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.draw.on path { animation: draw 0.9s var(--ease) forwards; animation-delay: calc(var(--n) * 0.25s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .draw path { stroke-dashoffset: 0; } }
.sec h2 { margin-top: 20px; max-width: 800px; font-size: 48px; line-height: 52.8px; font-weight: 600; letter-spacing: -0.02em; }
.sec h2 span { color: #696f81; }

/* ── 다섯 개 앱 대신: 좌 목록 · 우 파란 폰 카드 ── */
/* 목록 610 + 간격 60 + 카드 606×489 · 제목 아래 33 · 목록은 카드 세로 중앙 · 항목 간격 27 · 그리드 아래 80 */
.juggle { display: grid; grid-template-columns: 1fr 606px; gap: 60px; align-items: center; margin-top: 33px; padding-bottom: 80px; }
.juggle ul { display: flex; flex-direction: column; gap: 27px; padding-left: 4px; }
.juggle li { position: relative; padding-left: 24px; }
.juggle li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.13); }
.juggle li::after { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 0; background: #7577e0; transition: height 0.4s var(--ease); }
.juggle li.on::after { height: 17px; }
.juggle h3 { font-size: 24px; line-height: 28.8px; font-weight: 400; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.6); transition: color 0.3s; }
.juggle li.on h3 { color: var(--ink); }
.juggle p { margin-top: 10px; font-size: 18px; line-height: 25.2px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.card { position: relative; border-radius: 20px; overflow: hidden; background: var(--panel); }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.card:hover img { transform: scale(1.03); }
.juggle .card { aspect-ratio: 606 / 489; background: #0a0a0a; } /* PC 영상은 카드와 같은 비율, 배경은 영상 검정 */
.juggle .card img, .juggle .card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(0.98); opacity: 0; transition: opacity 0.5s var(--ease), transform 0.9s var(--ease); }
.juggle .card img.on, .juggle .card video.on { opacity: 1; }
.juggle .card:hover img, .juggle .card:hover video { transform: scale(1.01); }

/* ── 기능 카드 격자 (h3 24/400 · 본문 18 회색 · 카드 r20) ── */
/* 슈퍼리스트 실측: 제목→카드열 64 · 2열 588×440 간격 100 · h3 24/400 · 본문 18/400/21.6 #696f81 (h3 아래 8, 카드 위 46) */
.feats { display: grid; gap: 40px; margin-top: 64px; }
.feats.two { grid-template-columns: repeat(2, 1fr); gap: 100px; }
/* 3열: 제목→카드열 41 · 372×278 간격 80 · 본문 아래 30 */
.feats.three { grid-template-columns: repeat(3, 1fr); gap: 80px; margin-top: 41px; }
.feats.three .feat p { min-height: 43.2px; margin-bottom: 30px; }
.feats.three .card video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ai-cinema { margin: 0; min-width: 0; }
.ai-screen { overflow: hidden; border-radius: 24px; border: 10px solid #0a0a0a; background: #1a1a1a; }
.ai-screen video { display: block; width: 100%; height: auto; aspect-ratio: 36 / 29; object-fit: contain; }
.ai-cinema figcaption, .video-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 2px 0; color: #aaa7b7; font-size: 12px; }
.case-cinema { min-width: 0; }
.ai-motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex-shrink: 0; min-height: 44px; padding: 0 14px; border: 1px solid #ffffff20; border-radius: 999px; background: transparent; color: #c7c4d1; font: inherit; font-size: 13px; cursor: pointer; }
.ai-motion-toggle:hover { border-color: #ffffff50; color: #fff; }
.ai-motion-toggle span:first-child { width: 12px; text-align: center; font-size: 11px; }
.ai-chapter:focus-visible, .ai-motion-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 6px; border-radius: 4px; }
.home .ai-demo .ai-motion-toggle, .home .video-controls .ai-motion-toggle { width: auto; min-height: 44px; padding: 0 14px; border: 1px solid #ffffff20; text-align: center; font-size: 13px; }
.home .ai-recording { margin-top: 0; padding: 80px 0 0; }
.ai-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); grid-template-areas: "media intro" "media steps"; column-gap: 60px; row-gap: 32px; align-items: start; }
.ai-intro { grid-area: intro; text-align: left; }
.home .ai-intro .mark { margin: 0 0 20px; width: 212px; height: 38px; }
.home .ai-intro h2 { margin: 0; font-size: 48px; line-height: 1.2; letter-spacing: -.02em; }
.home .ai-intro h2 span { color: #a8a6b8; }
.home .ai-intro h2 em { color: #945aff; font-style: normal; }
.home .ai-intro .ai-plan { margin: 16px 0 0; font-size: 15px; color: #a8a6b8; }
.ai-demo { grid-area: media; min-width: 0; align-self: center; }
.ai-demo .ai-screen { border: 1px solid #ffffff24; border-radius: 20px; box-shadow: 0 16px 48px #0003; }
.ai-chapters { grid-area: steps; display: grid; gap: 24px; }
.ai-chapters li { border-left: 2px solid #ffffff20; padding-left: 20px; }
.ai-chapters li.on { border-color: #a59cff; }
.ai-chapters h3 { font-size: 19px; font-weight: 600; }
.ai-chapter { width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: #c4c1d0; font: inherit; text-align: left; cursor: pointer; transition: color .2s; }
.ai-chapter:hover, .ai-chapters li.on .ai-chapter { color: #fff; }
.ai-chapter:active { transform: translateY(1px); }
.ai-chapters p { margin-top: 4px; max-width: 360px; color: #b6b2c4; font-size: 15px; line-height: 1.7; }
@media (max-width: 1000px) {
  .ai-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "media" "steps"; gap: 32px; }
  .ai-demo { width: 100%; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 767px) {
  .home .ai-recording { padding: 56px 0 0; }
  .home .ai-intro .mark { width: 170px; height: 31px; margin-bottom: 24px; }
  .home .ai-intro h2 { font-size: 32px; }
  .ai-chapters { gap: 24px; }
  .ai-chapters p { max-width: none; }
  .ai-cinema figcaption { font-size: 11px; }
}
.feat h3 { font-size: 24px; line-height: 28.8px; font-weight: 400; letter-spacing: -0.02em; }
.feat p { margin: 8px 0 46px; font-size: 18px; line-height: 21.6px; font-weight: 400; letter-spacing: -0.012em; color: #696f81; }
.feats.two .card { aspect-ratio: 588 / 440; }
.feats.two .feat:nth-child(2) .card img { object-position: 0 0; transform: scale(1.1); transform-origin: 0 0; } /* 오른쪽 창은 아래가 잘리게 */
/*
  그림 위에 앱 영상 얹기. 색 판은 그림이 그대로 맡고, 창 자리만 영상이 덮는다.
  창 왼쪽·위 값은 그림에서 실측한 것이다 — calendar.webp 은 창이 x 150 / y 57 (1536×1024),
  matrix.webp 은 왼쪽에 여백 없이 위로만 y 80 이다. 카드는 object-fit:cover 라 세로 비율은 그대로 오고,
  가로는 왼쪽 그림만 가운데 잘림(84px)만큼 당겨진다. 오른쪽 창은 scale(1.1) 이 걸려 위 여백도 1.1 배다.
*/
/* video 는 대체 요소라 left+right 만으로는 안 늘어난다 — 크기를 직접 준다. */
.shot-on-bg video { position: absolute; left: 4.8%; top: 5.6%; width: 95.2%; height: 94.4%; object-fit: cover; object-position: left top; border-top-left-radius: 12px; }
.feats.two .feat:nth-child(2) .shot-on-bg video { left: 0; top: 8.6%; width: 100%; height: 91.4%; border-top-left-radius: 0; }
.feats.two .feat:nth-child(2) .card:hover img { transform: scale(1.13); }
.feats.three .card { aspect-ratio: 372 / 278; }

/* ── 배지 행 (슈퍼리스트 실측: 섹션 h504 · 배지 210×64 · 가운데 그림 210×104 · 간격 10) ── */
.awards { height: 504px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.laurel { position: relative; width: 210px; height: 64px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #a3a3ae; }
.laurel::before, .laurel::after { content: ""; position: absolute; top: 0; width: 28px; height: 64px; background: url(/landing/dark/laurel.webp) center / contain no-repeat; } /* 생성한 월계수 가지, 오른쪽은 미러 */
.laurel::before { left: 4px; } .laurel::after { right: 4px; transform: scaleX(-1); }
.laurel small { font-size: 15px; line-height: 1; font-weight: 600; letter-spacing: -0.01em; }
.laurel b { margin-top: 5px; font-size: 26px; line-height: 1; font-weight: 700; }
.awards img { width: 130px; height: 130px; margin-inline: 25px; object-fit: contain; mask-image: radial-gradient(circle, #000 62%, transparent 72%); }

/* ── 큰 단어 목록 (슈퍼리스트 실측: 51/600/61.2 ls -0.02em · 행 간격 41 · 섹션 상하 12 · 위쪽 단어가 밝고 아래로 흐려짐 · 호버 시 밝은 말풍선) ── */
.words { padding: 12px 0; text-align: center; }
.words ul { display: flex; flex-direction: column; gap: 41px; }
.words li { position: relative; font-size: 51px; line-height: 61.2px; font-weight: 600; letter-spacing: -0.02em; color: #fff; opacity: 0.25; transition: opacity 0.25s; cursor: default; }
/* 호버: 단어는 자기 색(--c)으로, 말풍선은 그 색 카드 + 흰 글자 + 어두운 미니 화면 (슈퍼리스트 실측: 카드 300 · 여백 20 · r22 · 색은 흰→보라→파랑→초록 순환) */
.words li:hover { opacity: 1 !important; color: var(--c); }
.words .tip { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px); width: 300px; padding: 20px; border-radius: 22px; background: var(--c); color: #fff; font-size: 16px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; text-align: center; opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s var(--ease); pointer-events: none; z-index: 2; }
.words .tip b { display: block; font-weight: 500; }
.words li[style*="#eeeeee"] .tip { color: #181824; } /* 흰 카드는 어두운 글자 */

/* ── 픽셀 인용문 (슈퍼리스트 실측: 섹션 h411 · h2 상단 103 · 폭 750 · 51px/45.9 ls -0.02em · 앞 문장 #535676 · 강조 글자는 흰→보라→분홍 순환) ── */
.pixel-quote { height: 411px; padding-top: 103px; text-align: center; }
.pixel-quote h2 { margin: 0 auto; max-width: 820px; font-family: "Galmuri11", monospace; font-size: 55px; line-height: 62px; font-weight: 700; letter-spacing: 0; color: #535676; -webkit-font-smoothing: none; font-smooth: never; image-rendering: pixelated; }
.pixel-quote h2 .w { white-space: nowrap; }
.pixel-quote h2 { word-spacing: -0.3em; }
.pixel-quote h2 span span, .pixel-quote h2 > span:not(.w) { display: inline-block; color: #535676; transition: color 0.35s; transition-delay: calc(var(--i) * 28ms); }
.pixel-quote.on h2 .w span { color: var(--k); }
.pixel-quote .credit { word-spacing: -0.3em; display: inline-flex; align-items: center; gap: 22px; margin-top: 44px; font-family: "Galmuri11", monospace; font-size: 22px; font-weight: 700; color: #535676; -webkit-font-smoothing: none; }
.pixel-quote .credit svg { width: 110px; height: 30px; }

/* ── 마무리 CTA + 흐르는 후기 (슈퍼리스트 실측: 래퍼 h1143 overflow hidden · CTA 는 상단 79 에 절대 배치 · 3열 카드 340 간격 40 · 초당 약 25px 위로 흐름 · 위아래 페이드) ── */
.finale { position: relative; height: 1143px; overflow: hidden; }
.finale .cta { position: absolute; left: 0; right: 0; top: 79px; z-index: 2; text-align: center; pointer-events: none; }
.finale .cta::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1100px; height: 420px; transform: translate(-50%, -50%); z-index: -1; background: radial-gradient(50% 50% at 50% 50%, #181824 30%, rgba(24, 24, 36, 0.85) 55%, rgba(24, 24, 36, 0) 100%); } /* 제목 뒤 어두운 글로우 */
.cta h2 { margin: 0 auto; max-width: 756px; font-size: 48px; line-height: 57.6px; font-weight: 600; letter-spacing: -0.02em; }
.cta .btn { pointer-events: auto; margin-top: 18px; }
.reviews { position: absolute; inset: 0; padding-top: 114px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); }
.reviews .cols { display: flex; justify-content: center; gap: 22px; }
.reviews .col { width: 340px; flex: none; }
.reviews .track { display: flex; flex-direction: column; gap: 40px; will-change: transform; animation: rise var(--dur, 40s) linear infinite; }
.reviews .col:nth-child(2) .track { animation-delay: -13s; }
.reviews .col:nth-child(3) .track { animation-delay: -27s; }
@keyframes rise { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .reviews .track { animation: none; } }
.review { padding: 40px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); background: var(--bg); }
.review .quote { font-size: 16px; line-height: 20.8px; font-weight: 400; }
.review .name { margin-top: 20px; font-size: 16px; line-height: 19.2px; font-weight: 500; }
.review .job { font-size: 16px; line-height: 20.8px; font-weight: 400; color: rgba(255, 255, 255, 0.55); }

/* ── 푸터 (슈퍼리스트 실측: h804 · 여백 80/63/40 · 구역 433+542+325 · 제목 16/400/24 색상별 · 링크 14/400 #8e8da0 행 간격 38 · 제목→링크 30 · 업데이트 카드 r16 p24) ── */
.site-footer { padding: 80px 63px 40px; font-size: 14px; line-height: 18.2px; font-weight: 400; letter-spacing: -0.01em; }
.fnav { display: grid; grid-template-columns: 433fr 542fr 325fr; max-width: 1300px; margin: 0 auto; } /* 1440 실측 비율, 좁은 화면에선 비율대로 줄어듦 */
.fnav h5 { margin: 0 0 30px; font-size: 16px; line-height: 24px; font-weight: 400; color: #eee; }
.fnav .c-app h5 { color: #f739f7; } .fnav .c-cases h5 { color: #fbe74e; } .fnav .c-social h5 { color: #2590f1; } .fnav .c-updates h5 { color: #34c77b; }
.fnav ul { display: flex; flex-direction: column; gap: 21px; color: #8e8da0; min-width: 0; }
.fnav > div { min-width: 0; }
.fnav a:hover { color: #fff; }
.fnav .two { display: grid; grid-template-columns: 221fr 212fr; }
.fnav .trio { display: grid; grid-template-columns: 184fr 184fr 174fr; }
.update-card { display: block; margin-top: 0; padding: 24px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); }
.update-card small { display: block; font-size: 12px; line-height: 14.4px; color: #8e8da0; }
.update-card small b { font-weight: 400; color: #8e8da0; margin-left: 6px; }
.update-card strong { display: block; margin-top: 10px; font-size: 24px; line-height: 28.8px; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.update-card time { display: block; margin-top: 10px; font-size: 12px; line-height: 14.4px; color: #fff; }
.compare { max-width: 1300px; margin: 120px auto 0; }
.compare h5 { margin: 0 0 22px; font-size: 16px; line-height: 24px; font-weight: 400; color: #8e8da0; }
.compare ul { display: flex; flex-wrap: wrap; gap: 21px 30px; color: #8e8da0; }
.compare a:hover { color: #fff; }
.copy { margin: 100px 0 0; text-align: center; color: #8e8da0; }
.copy span + span::before { content: "•"; margin: 0 10px; }

.menu-toggle { display: none; }

/* ── 태블릿 (≤1200): 슈퍼리스트처럼 메뉴를 "메뉴" 버튼으로 접고, 2열 → 1열 ── */
@media (max-width: 1200px) {
  .navbar, .auth { display: none; }
  .site-header .container { grid-template-columns: 1fr auto; padding: 0 40px; } /* 태블릿: 헤더·본문·푸터 모두 40px 로 통일 */
  .container, .sec .container { padding: 0 40px; }
  /* 슈퍼리스트 1024 실측: 헤더 60 · 로고 20 · "Menu" 글자만 · h1 48 · 본문 16 · 버튼 h48 · 앱 창 폭 73% 가운데 */
  .site-header { height: 60px; }
  .site-header .container { height: 60px; }
  .menu-toggle { display: inline-flex; align-items: center; height: 40px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
  /* 열린 메뉴: 슈퍼리스트처럼 화면 전체를 덮는 안내 페이지. 헤더 줄(로고·닫기)은 그대로, 아래에 큰 메뉴가 가운데 정렬 */
  html.menu-open { overflow: hidden; }
  .site-header.open { height: auto; bottom: 0; overflow-y: auto; background: var(--bg); transform: none;
    background-image: radial-gradient(360px 220px at 50% 30%, rgba(255, 255, 255, 0.07), transparent 70%), radial-gradient(260px 200px at 50% 62%, rgba(249, 97, 63, 0.35), transparent 70%); }
  .site-header.open .container { display: flex; flex-wrap: wrap; align-items: center; height: auto; min-height: 100%; align-content: flex-start; }
  .site-header.open .brand { flex: 1; height: 60px; }
  .site-header.open .menu-toggle { color: #9b8cff; text-decoration: underline; text-underline-offset: 4px; }
  .site-header.open .navbar, .site-header.open .auth { display: flex; flex-direction: column; align-items: center; width: 100%; order: 1; }
  .site-header.open .navbar { gap: 20px; padding: 36px 0 10px; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; }
  .site-header.open .navbar svg { width: 24px; height: 24px; transition: transform 0.2s var(--ease); }
  .site-header.open .has-menu { display: flex; flex-direction: column; align-items: center; }
  .site-header.open .has-menu > a { padding: 0; }
  .site-header.open .has-menu.on > a { color: var(--muted); }
  .site-header.open .has-menu.on > a svg { transform: rotate(180deg); }
  .site-header.open .has-menu:hover > a, .site-header.open .has-menu:focus-within > a { color: inherit; text-decoration: none; }
  .site-header.open .has-menu .menu { display: none; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 8px 0 4px; min-width: 0; text-align: center; }
  .site-header.open .has-menu.on .menu { display: block; }
  .site-header.open .has-menu .menu a { justify-content: center; height: 36px; font-size: 18px; font-weight: 600; color: var(--muted); }
  .site-header.open .has-menu .menu a:hover { background: none; color: #fff; }
  .site-header.open .auth { gap: 16px; padding: 14px 0 40px; font-size: 18px; }
  .site-header.open .signup { padding: 14px 30px; font-size: 20px; line-height: 24px; }
  .site-header.open .auth .me { width: 56px; height: 56px; font-size: 22px; }
  .top { padding-top: 60px; }
  .hero .content { padding-top: 100px; }
  .hero h1 { font-size: 48px; line-height: 1; }
  .hero .sub { margin-top: 20px; max-width: 560px; font-size: 16px; line-height: 1.4; }
  .hero .btn { margin-top: 24px; }
  .btn { padding: 12px 22px 13px; font-size: 16px; }
  .hero-shot { margin: 60px auto 0; width: 100%; padding: 0 40px; } /* 헤더 로고·메뉴와 같은 선에 맞춤 */
  .hero-shot .frame { padding: 12px; border-radius: 32px; }
  .hero-shot img, .hero-shot video { border-radius: 20px; }
  .statement { padding: 120px 0 90px; }
  .statement h2 { max-width: 640px; }
  .logos { padding-bottom: 140px; }
  .logos ul { gap: 40px 24px; margin-top: 44px; }
  .logos li { font-size: 26px; }
  .site-footer { padding: 80px 40px 40px; }
  .fnav { grid-template-columns: 1fr 1fr; gap: 48px 24px; }
  .fnav .trio { grid-template-columns: 1fr 1fr 1fr; }
  .fnav .c-updates { grid-column: 1 / -1; max-width: 420px; }
  .juggle { grid-template-columns: 1fr; gap: 48px; }
  .juggle ul { max-width: 610px; }
  .feats.three { grid-template-columns: 1fr; gap: 56px; }
  .feats.three .feat p { min-height: 0; }
  .feats.three .card { aspect-ratio: 606 / 400; }
  .logos ul { max-width: 760px; }
}

@media (max-width: 1100px) { .reviews .col:nth-child(3) { display: none; } }
@media (max-width: 760px) { .reviews .col:nth-child(2) { display: none; } .finale { height: 900px; } .reviews { padding-top: 150px; } }

/* ── 모바일 (≤760): 1열, 글자 축소, 여백 20 ── */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .container, .sec .container, .site-header .container { padding: 0 20px; } /* 헤더도 본문과 같은 여백 */
  .brand { font-size: 20px; } .brand img { width: 102px; height: 24px; }
  .hero-shot { width: 100%; padding: 0 20px; }
  .hero .content { padding-top: 56px; }
  .hero h1 { font-size: 40px; line-height: 1.05; }
  .hero .sub { margin-top: 22px; font-size: 17px; }
  .hero .btn { margin-top: 28px; }
  .hero-shot { margin-top: 56px; }
  .hero-shot .frame { padding: 8px; border-radius: 22px; }
  .hero-shot img, .hero-shot video { border-radius: 16px; }
  .statement { padding: 90px 0 70px; }
  .statement h2 { font-size: 24px; }
  .logos { padding-bottom: 110px; }
  .logos p { font-size: 17px; }
  .logos ul { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; margin-top: 36px; }
  .logos li { font-size: 24px; }
  .sec .mark { width: 150px; height: 27px; }
  .sec h2, .cta h2 { font-size: 32px; line-height: 1.12; }
  .sec[style] { padding-top: 120px !important; }
  .juggle { margin-top: 28px; gap: 36px; padding-bottom: 40px; }
  .juggle h3 { font-size: 21px; }
  .juggle p { font-size: 16px; line-height: 1.5; }
  .feats { margin-top: 48px; }
  .feats.two { grid-template-columns: 1fr; gap: 48px; }
  .feat h3 { font-size: 21px; }
  .feat p { margin: 10px 0 22px; font-size: 17px; }
  .awards { height: auto; padding: 60px 0 20px; flex-direction: column; gap: 24px; }
  .words ul { gap: 20px; }
  .words li { font-size: 34px; line-height: 1.2; }
  .words .tip { display: none; }
  .pixel-quote { height: auto; padding: 80px 0 60px; } .pixel-quote h2 { font-size: 33px; line-height: 40px; }
  .review { padding: 28px; } .reviews .col { width: min(340px, calc(100vw - 40px)); }
  .site-footer { padding: 60px 20px 30px; }
  .fnav { grid-template-columns: 1fr; gap: 40px; }
  .fnav .two { grid-template-columns: 1fr 1fr; }
  .fnav .trio { grid-template-columns: 1fr 1fr; gap: 40px 16px; }
  .compare { margin-top: 60px; }
  .copy { margin-top: 60px; }
}

/* 홈: 제품 흐름과 읽을 수 있는 데모를 중심으로 구성한다. */
.home { --dim: #9da3b4; }
.home [id] { scroll-margin-top: 100px; }
.home a:focus-visible, .home button:focus-visible { outline: 2px solid #ff9b8f; outline-offset: 5px; }
.home .hero h1 { line-height: 1.12; }
.home .hero .content { padding-top: 56px; }
.home .hero .sub { margin-top: 24px; max-width: 740px; color: #c5c4d0; line-height: 1.7; }
.home .start-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 24px; }
.home .start-actions .btn { margin: 0; }
.home .download-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #dedce7; font-size: 16px; }
.home .download-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.home .hero-shot { max-width: 1340px; margin-top: 64px; }
.home .hero-shot .frame { aspect-ratio: 1.8; }
.home .statement { padding: 100px 0 80px; }
.home .statement h2 { line-height: 1.5; }
.home .logos { padding-bottom: 80px; }
.logos small { display: block; margin-top: 12px; color: #c4bbd2; font-size: 14px; font-weight: 400; letter-spacing: 0; }
.home .logos a { display: block; padding: 8px; }
.home .sec { padding-top: 32px; }
.home .sec .container { max-width: 1550px; padding-inline: 75px; }
.home .sec.ai-recording { padding-top: 80px; }
.home .awards { height: auto; padding: 100px 0; }
.home .sec h2 { max-width: 900px; line-height: 1.2; }
.home .sec h2 span, .home .feat p { color: var(--dim); }
.home .juggle { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 60px; margin-top: 32px; padding-bottom: 0; }
.home .juggle li.on::after { height: 100%; }
.home .juggle button { width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.home .juggle p { margin-top: 6px; color: #b6b2c4; line-height: 1.6; }
.home .phone-swap video[hidden] { display: none; }
.home .phone-swap:hover video { transform: scale(.98); }
.home .feats.two { gap: 56px; margin-top: 48px; }
.home .feat h3 { font-size: 26px; line-height: 1.3; }
.home .feat p { margin: 12px 0 28px; line-height: 1.7; }
.home .laurel { color: #bab7c7; }
.home .words li { width: fit-content; max-width: calc(100% - 40px); margin-inline: auto; }
.home .words li.is-open, .home .words li:focus-within { opacity: 1 !important; color: var(--c); z-index: 3; }
.home .feature-trigger { display: block; margin-inline: auto; min-height: 44px; padding: 4px 12px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; transition: color 150ms ease-out; }
.home .feature-trigger:focus-visible { outline-color: var(--c); }
/* 설명은 단어 사이 41px 간격 안에 절대배치 — 레이아웃이 안 움직이고 다음 단어를 덮지도 않는다. 글자는 단어 색(--c)을 옅게 이어받는다 */
.home .words .tip { position: absolute; left: 50%; top: calc(100% + 2px); width: max-content; max-width: min(520px, calc(100vw - 40px)); padding: 0; background: none; box-shadow: none; border-radius: 0; color: var(--c); font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: 0; text-align: center; text-wrap: balance; opacity: 0; visibility: hidden; transform: translate(-50%, -4px); transition: opacity 180ms ease-out, transform 220ms var(--ease), visibility 180ms; pointer-events: none; }
.home .words .tip p { margin: 0; opacity: .8; }
.home .words li.is-open .tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.home .words li[style*="#eeeeee"] .tip { color: #fff; }
.home .pixel-quote { height: auto; min-height: 411px; padding-bottom: 70px; }
.home .pixel-quote h2, .home .pixel-quote .credit { color: #9da3b4; }
.home .finale .cta { pointer-events: auto; }
.home .finale .reviews { padding-top: 210px; }
.home .review .job { color: #c0b9d0; font-size: 13px; }
.home .fnav ul, .home .compare, .home .compare h5 { color: #aaa7b7; }
.home .update-card > span { display: block; margin-top: 16px; color: #b6b2c4; font-size: 13px; line-height: 1.5; }
@media (max-width: 1200px) {
  .home .sec .container { padding-inline: 40px; }
}
@media (max-width: 1000px) {
  .home .juggle { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .home [id] { scroll-margin-top: 80px; }
  .home .hero h1 { font-size: clamp(32px, 9vw, 40px); }
  .home .hero .sub { font-size: 16px; }
  .home .hero .sub br { display: none; }
  .home .start-actions { flex-direction: column; gap: 10px; margin-top: 26px; }
  .home .hero-shot { margin-top: 35px; }
  .home .hero-shot .frame { aspect-ratio: 1.1; }
  .home .hero-shot video { object-fit: cover; object-position: left top; }
  .home .sec { padding-top: 32px; }
  .home .sec .container { padding-inline: 20px; }
  .home .sec.ai-recording { padding-top: 56px; }
  .home .awards { padding: 80px 20px; }
  .home .juggle { margin-top: 32px; padding-bottom: 0; }
  .home .juggle ul { gap: 20px; }
  .home .feats.two { gap: 40px; margin-top: 32px; }
  .home .feat h3 { font-size: 23px; }
  .home .feat p { margin: 12px 0 24px; font-size: 16px; }
  .home .statement { padding: 72px 0 56px; }
  .home .logos { padding-bottom: 48px; }
  .home .words { padding-top: 48px; }
  .home .words li { font-size: clamp(26px, 7.5vw, 34px); }
  .home .words .tip { display: none; } /* 폰은 단어 간격 20px 뿐이라 설명을 접는다 */
  .home .pixel-quote .credit svg { width: 65px; }
  .home .finale .reviews { padding-top: 330px; }
}
@media (prefers-reduced-motion: reduce) { html:has(.home) { scroll-behavior: auto; } }
@media (prefers-reduced-motion: reduce) { .home .feature-trigger, .home .words .tip { transition: none; } }

/* 화면에는 안 보이고 검색엔진·스크린리더에만 읽히는 제목 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }