/* 랜딩 페이지 전용 스타일. 모바일 퍼스트 재설계(2026-09-11, 오너 승인).
   규율(하드): 모든 셀렉터는 .landing- 프리픽스 클래스로만 시작한다. 태그·전역 셀렉터
   금지. 이 파일은 채팅 페이지가 로드하지 않으므로 역방향 오염이 구조적으로 불가능하다.
   색·타이포·간격은 style.css의 :root 토큰을 그대로 쓴다. 색은 원시 토큰이 아니라
   style.css가 정의한 역할 토큰(--background/--foreground/--card/--muted/
   --muted-foreground/--border/--primary/--primary-foreground/--ring)을 참조한다.
   역할이 없는 보조 잉크(--ink-700)·구조룰(--rule-strong)·CTA 눌림색(--accent-press)은
   원시 토큰 이름 그대로 쓴다. 정당색(--party-*)을 보던 의석 도트는 13차(2026-09-13)
   돔 철거와 함께 사라졌고, 이 파일은 색을 하나도 새로 선언하지 않는다.

   조판 방법론(이번 재설계의 핵심): 베이스 선언이 곧 모바일 조판이고, 넓은 화면은
   @media (min-width: 720px) / (min-width: 1080px) 두 단으로 넓힌다. 종전의 "데스크톱
   기본 + max-width 900px에서 접기"를 역전한 것이다. max-width 쿼리는 쓰지 않는다:
   한 파일에 두 방법론이 섞이면 어느 쪽이 기본인지 읽어서는 알 수 없게 된다.

   이 파일이 선언하는 변수는 섹션 수직 리듬 2종과 헤더 높이(--landing-header-h)
   뿐이다. 스탯 카드의 존 걸침 깊이(--landing-straddle)와 도트 색을 나르던
   --landing-dot은 13차 스탯·돔 철거로 쓰는 규칙이 없어져 함께 걷었다. */

.landing-body {
  /* 촉각 2단계: 바탕을 순백에서 쿨 그레이 페이지 캔버스로 내린다(style.css :root
     --canvas-page). 상단 흰 광원(--grad-canvas)은 body 원소 규칙(style.css)에서
     내려오고, 이 규칙은 색만 새 값으로 덮는다. */
  background-color: var(--canvas-page);
  color: var(--foreground);
  /* 한국어 어절 단위 줄바꿈. 기본 CJK 규칙은 음절 사이 아무 데서나 꺾어
     "발의했더 / 라?" 같은 낱말 중간 절단이 난다. 랜딩의 모든 텍스트는 공백이
     있는 산문이라 keep-all로 넘칠 위험이 없다(URL 같은 무공백 장문 없음). */
  word-break: keep-all;
  /* 존 밴딩의 풀블리드 ::before가 뷰포트 폭(100vw)으로 펴져 문서 폭을 넘긴다.
     여기서 가로만 잘라 넘침이 스크롤로 자라지 않게 한다. body의 overflow는 뷰포트로
     전파된다(html에 overflow 선언이 없다). clip은 scroll과 달리 스크롤 컨테이너를
     만들지 않아 세로 스크롤·앵커 점프에 영향이 없다. */
  overflow-x: clip;
  /* 섹션 수직 리듬(모바일 기준). 좁은 화면은 좌우 여백을 줄 수 없으니 절 사이를
     후하게 벌려 구획을 만든다. 데스크톱 축소판 리듬(40px)은 폐지했다. */
  --landing-rhythm: 72px;
  --landing-rhythm-tight: 32px;
  /* 헤더 실측 높이(패딩 14px 상하 + 링크 탭 타깃 44px). 아래 히어로 높이 계산이
     이 값을 뺀다. 헤더 패딩을 바꾸면 여기도 같이 바꾼다. */
  --landing-header-h: 72px;
}

/* width:100%는 장식이 아니다: body가 sticky footer 때문에 flex column인데 여기서
   `margin: 0 auto`를 쓴다. flexbox에서 교차축 auto 마진은 stretch를 무효화하므로
   폭이 max-content로 잡혀 브랜드가 화면 한가운데로 끌려간다(style.css의 main 규칙이
   같은 이유로 width:100%를 단다). box-sizing: border-box는 style.css 전역 규칙이다.
   패딩 상하 14px는 --landing-header-h 계산의 절반이다. */
.landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px 20px;
}

/* 헤더 우측 나브(/chat 직접 진입점 3곳, 2026-09-15): 블로그 텍스트 링크 +
   질문하기 버튼 둘을 묶는다. 순서는 DOM 그대로 블로그가 앞, 질문하기가 뒤 =
   오른쪽 끝(더 무거운 동선이 가장자리를 차지). */
.landing-header-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 블로그는 헤더 안에서 다시 텍스트 링크로 격하된다(같은 지시): 질문하기 버튼이
   오른쪽 끝 표적 자리를 가져가므로 블로그는 맨글자 링크로 조용해진다 - 재정
   2026-09-12(맨글자가 싸 보인다는 판정)의 역방향이 아니라, 그 자리를 질문하기에
   내준 것. 44px는 다른 탭 타깃과 같은 하한이다. */
.landing-header-text {
  font-size: 14px;
  color: var(--ink-700);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
}

.landing-header-text:hover {
  color: var(--ink-900);
}

.landing-header-text:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* 헤더 우측 primary 진입점: 종전 블로그 버튼 자리를 그대로 이어받는다(같은
   지시). 테두리형 조용한 버튼(쇼케이스 quiet CTA와 같은 문법의 소형판) - 첫
   화면에서 채워진 표적은 여전히 히어로 CTA 하나뿐이다. 44px는 탭 타깃 하한이자
   헤더 높이의 기준선이다. */
.landing-header-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  /* tactile 시안: 보조 버튼 재질(솟은 종이). 치수 44px는 불변이다. */
  background-color: var(--card);
  background-image: var(--grad-paper);
  box-shadow: var(--edge-lo), var(--shadow-raise);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-900);
  text-decoration: none;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.landing-header-link:hover {
  background-color: var(--muted);
  border-color: var(--ink-500);
  box-shadow: var(--edge-lo), var(--shadow-raise-hi);
}

.landing-header-link:active {
  background: var(--border);
  box-shadow: var(--shadow-press);
}

/* scroll-margin-top: 스킵 링크(#main)로 점프했을 때 본문 첫 줄이 뷰포트 최상단에
   딱 붙지 않게 한다(web-interface-guidelines: heading anchor scroll-margin).
   padding-bottom이 0인 이유: 마지막 절(블로그)이 캔버스 밴드라 그 아래 흰 여백이
   남으면 캔버스-백-캔버스(판권면)로 지면이 세 번 갈린다. 문서 끝 여백은 밴드 자신의
   padding-block이 대신 낸다. */
.landing-main {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
  scroll-margin-top: 24px;
}

/* 판권면은 아래 블로그 밴드와 맞닿아 한 덩어리 지면이 된다(반전 근거는 밴드 규칙
   주석 참조). 헤어라인은 남긴다: 문서 끝 표시다. landing.css는 랜딩만 싣기 때문에
   블로그·index의 판권면 픽셀은 그대로다. */
.landing-body .site-footer {
  background-color: var(--paper);
}

/* 모바일(손가락 입력)에서는 cat.js가 서기를 우하단 코너에 고정하므로 문서 끝에서 판권면
   마지막 줄과 말풍선이 겹친다(실측 2026-09-14: 글리프 540px², 말풍선 4,070px²). 판권면
   하단에 서기 자리를 미리 비워 둔다. 데스크톱(정밀 포인터)은 서기가 걸어다니고 유저가
   치울 수 있으니 예약하지 않는다. */
@media (pointer: coarse) {
  .landing-body .site-footer .container { padding-bottom: 112px; }
}

/* ---- 섹션 공통 ---- */

/* 구획 머리 = 아이브로우(구획 번호·이름) + 제목 + 하단 괘선. 모든 뷰포트가 같은
   문법을 쓴다(재설계 Task 2d). 종전 데스크톱의 "잔여 폭 괘선 ::after" 변형은
   폐지했다: 제목이 개행되는 좁은 폭에서 성립하지 않는 문법이라, 모바일이 기본이
   되는 이번 조판에서는 예외 쪽이 기본 행세를 할 수 없다. */
.landing-section-head {
  margin: 0 0 20px;
}

.landing-kicker {
  margin: 0 0 8px;
}

.landing-section-title {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-strong);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.landing-how,
.landing-blog {
  margin-top: var(--landing-rhythm);
}

/* ---- 존 밴딩: 캔버스 - 백 - 캔버스 - 백 교대 (촉각 2단계 반전) ----
   1단계까지는 이 밴드가 --canvas 지면으로 작동 방식·블로그 두 절만 도드라지게 했다
   (흰 페이지 바탕 위에 살짝 어두운 지면을 까는 방식). 촉각 2단계 A에서 페이지 바탕
   자체가 --canvas-page(값이 --canvas와 거의 같다)로 내려가면서 이 밴드가 새 바탕과
   구분되지 않게 됐다(대비 상실). 밴드를 흰 종이 시트(--paper)로 반전해 그레이 바탕
   위에 뜨는 지면으로 되돌린다: 쇼케이스·원칙은 여전히 바탕 그대로(이제 그레이)라
   지면이 교대하는 리듬은 유지된다. 밴드는 지면이지 카드가 아니다: 보더·그림자·
   라운드를 주지 않는다(밴드 안 카드 자체의 정의는 각 카드의 보더·그림자가 진다).
   풀블리드 기법: .landing-main이 max-width 중앙 정렬이라 절 상자가 지면 폭을 가질 수
   없다. 절대 배치 ::before를 뷰포트 폭으로 펴고 음수 z-index로 본문 뒤에 보낸다.
   html에 배경 선언이 없어 body 배경이 페이지 캔버스로 승격되므로, 음수 z-index 층은
   그 캔버스 위·본문 아래에 정확히 놓인다(.landing-main도 절 상자도 쌓임 맥락을 만들지
   않는다: position/z-index/opacity/transform 없음). 100vw 넘침은 .landing-body의
   overflow-x: clip이 받는다(가로 스크롤 0). */
.landing-how,
.landing-blog {
  position: relative;
}

.landing-how::before,
.landing-blog::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  inset-block: 0;
  background-color: var(--paper);
  z-index: -1;
}

/* 밴드 안쪽 여백. 절 사이 흰 여백(--landing-rhythm)을 대신하는 값이라 리듬과 같은
   급으로 잡는다. 블로그 밴드는 위쪽 margin을 0으로 지워 원칙 절이 끝나는 자리에서
   지면이 곧바로 바뀌게 한다: 색 경계 자체가 절 구분이므로 공백을 겹쳐 주면 두 번
   나눈 것이 된다. 아래 규칙은 위 margin-top 공통 규칙보다 뒤에 있어야 한다. */
.landing-blog {
  margin-top: 0;
  padding-block: 56px 60px;
}

/* ---- 1. 히어로 ---- */

/* 모바일에서는 텍스트 -> 데모 한 줄 적층이고, 태블릿까지 이 순서를 유지한 채
   가운데로 모인다. 좌우 2단은 좁은 폭에서 성립하지 않으므로 기본이 아니라
   1080px 단의 예외로 둔다. */
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 0;
}

/* 오너 재정 2026-09-12(6차): 뷰포트 높이 예약(peek 기제)을 폐지한다. 히어로가
   제목+CTA로 압축된 뒤로는 예약분이 전부 빈 띠가 됐다("휑하다"). 콘텐츠를 자연
   흐름으로 촘촘히 붙여, 첫 화면을 여백이 아니라 다음 콘텐츠(데모 카드·작동 방식
   절)가 채우게 한다. */
/* 축 통일(오너 재정 2026-09-12 8차): 좁은 화면에서 텍스트만 좌정렬이면 가운데로
   모인 데모 카드와 축이 어긋난다. 모바일·태블릿은 전부 중앙축, 좌정렬은 좌우
   2단이 서는 1080px 단의 몫이다. */
.landing-hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: 36px 4px;
}

.landing-hero-title {
  margin: 12px 0 var(--space-4);
  /* 오너 재정 2026-09-12: 종전 clamp(34px, 9.2vw, 44px)는 과대했다. 한 단 줄인다. */
  font-size: clamp(29px, 7.8vw, 38px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* 서브카피: 제목의 질문에 사용자 가치로 응답하는 한 줄. 제목보다 확실히 작고
   본문 잉크보다 한 단 죽인다. */
.landing-hero-sub {
  margin: 0 0 var(--space-5);
  max-width: 30em;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-700);
  /* 15차: 좁은 화면에서 "바로 / 나옵니다."처럼 끝 어절만 고아 줄로 떨어지는 것
     수복. keep-all로 어절 단위 개행 + balance로 두 줄 길이를 고르게 나눈다
     (미지원 브라우저는 현행 개행 그대로 - 점진 향상). */
  word-break: keep-all;
  text-wrap: balance;
}

/* 질문 입력 폼(오너 지시 2026-09-12): 입력창 + 제출 버튼 한 줄. 모바일 중앙축
   안에서 본문 폭을 다 쓰고, 데스크톱 좌열에서는 좌정렬로 선다.
   입력 폰트 16px은 취향이 아니라 iOS가 그 미만이면 포커스 시 화면을 확대해
   버리는 것을 막는 하한이다. */
.landing-ask {
  display: flex;
  width: 100%;
  max-width: 560px;
  gap: 8px;
  /* 예시 칩(2026-09-15)이 바로 밑에 붙으므로 히어로-CTA 간격은 칩 블록이 맡는다. */
  margin: 0 0 var(--space-3);
}

.landing-ask-input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--card);
  /* 촉각 2단계: 살짝 눌린 종이 필드(입력 대기 상태를 오목한 표면으로 표시). */
  box-shadow: var(--shadow-press-soft), var(--edge-lo);
  font: inherit;
  font-size: 16px;
  color: var(--foreground);
}

.landing-ask-input::placeholder {
  color: var(--muted-foreground);
}

.landing-ask-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}

/* 예시 질문 칩(2026-09-15): 실측(프로드 390x844)에서 데모 창 하단이 697px이라
   칩 4개가 줄바꿈되면(+약 200px) 데모가 첫 화면 밖으로 밀려난다("양 폼팩터 첫
   화면 완결" 위반). 모바일은 줄바꿈 대신 한 줄 가로 스크롤 스트립으로 둔다 -
   끝 칩이 잘려 보이는 것이 스크롤 힌트다. 재질은 style.css .example-q(채팅
   히어로 칩)와 같다 - 두 표면이 같은 컨트롤을 같은 재질로 말한다. */
.landing-ask-examples {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 8px;
  width: 100%;
  margin: 0 0 var(--space-5);
}

.landing-ask-examples::-webkit-scrollbar {
  display: none;
}

.landing-example-q {
  display: inline-flex;
  flex: none;
  align-items: center;
  white-space: nowrap;
  min-height: 36px;
  padding: 7px 12px;
  font-size: 13px;
  color: var(--ink-700);
  text-decoration: none;
  background-color: var(--card);
  background-image: var(--grad-paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--edge-lo), var(--shadow-raise);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.landing-example-q:hover {
  border-color: var(--ink-500);
  background-color: var(--muted);
  box-shadow: var(--edge-lo), var(--shadow-raise-hi);
}

.landing-example-q:active {
  background: var(--border);
  box-shadow: var(--shadow-press);
}

.landing-example-q:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* 오너 재정 2026-09-12: 풀라운드 필 + 과대 치수가 촌스럽다는 판정. 사각 라운드
   (radius-input)에 치수를 한 단 죄어 크리스프하게 간다. 색 규율(primary는 accent의
   자리)은 유지한다. 이제 질문 폼의 제출 버튼이다(border 0은 button 기본값 제거). */
.landing-cta {
  border: 0;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 22px;
  border-radius: var(--radius-input);
  /* tactile 시안: 채워진 CTA 3종 공통 재질(위가 밝은 액센트 그라디언트 + 상단 안쪽
     하이라이트 + 하단 눌림색 엣지 + 접촉·앰비언트 2겹). 값은 style.css :root 토큰이다
     - 이 파일은 색·그림자를 새로 선언하지 않는다. */
  background-color: var(--primary);
  background-image: var(--grad-primary);
  box-shadow: var(--edge-hi), var(--edge-lo-primary), var(--shadow-raise-primary);
  color: var(--primary-foreground);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

/* 아이콘 제출 버튼(오너 지시 2026-09-12): 글자 대신 기호. 입력창과 같은 48px
   높이의 원형이고, 시각은 .landing-cta(채워진 accent)를 그대로 계승한다. */
.landing-ask-submit {
  width: 48px;
  min-width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
}

.landing-cta:hover {
  background-color: var(--accent-press);
  background-image: var(--grad-primary-hover);
  box-shadow: var(--edge-hi), var(--edge-lo-primary), var(--shadow-raise-primary-hi);
}

/* 눌림 피드백: 원형 아이콘 제출이라 style.css 아이콘 버튼 관례대로 축소를 쓴다.
   여기에 그라디언트 반전과 안쪽 그림자를 더해 표면이 눌린 것으로 읽히게 한다.
   transition을 걸지 않아 즉시 적용된다. */
.landing-cta:active {
  background-color: var(--accent-press);
  background-image: var(--grad-primary-press);
  box-shadow: var(--shadow-press-primary);
  transform: scale(0.98);
}

/* 보조 CTA: 같은 색을 두 번 쓰지 않는다(단일 primary 규율). 테두리형 종이 버튼.
   히어로에서는 걷어냈고 쇼케이스 절(/chat행)에만 남는다. */
.landing-cta-quiet {
  background-color: var(--card);
  background-image: var(--grad-paper);
  box-shadow: var(--edge-lo), var(--shadow-raise);
  color: var(--ink-900);
  border: 1px solid var(--border);
}

/* 액센트 글로우와 액센트 엣지는 filled CTA 전용이다: 테두리형 보조 CTA는 위
   .landing-cta:hover가 얹는 값을 종이 표면 재질로 되돌린다. */
.landing-cta-quiet:hover {
  background-color: var(--muted);
  background-image: var(--grad-paper);
  box-shadow: var(--edge-lo), var(--shadow-raise-hi);
}

/* 테두리형 버튼의 press는 표면 한 단 짙게(style.css 디스클로저 행 관례) + 안쪽
   그림자. 위 .landing-cta:active의 축소는 그대로 상속된다. */
.landing-cta-quiet:active {
  background: var(--border);
  box-shadow: var(--shadow-press);
}

/* ---- 히어로 데모(12차): 정지 상태가 곧 완성형이다. 애니메이션은 아래
   no-preference 블록에서만 건다 - reduced-motion·크롤러는 이 상태를 본다. ---- */
/* 14차(2026-09-13) 데모 창틀: 돔 배경이 빠지자(13차) 버블·카드가 맨 페이지에
   흩어져 떠 보였다("배열 어색" 오너 재정). 패널로 감싸 제품 화면 미니언으로
   묶는다 - 12차 원 레퍼런스(Aside 데모 창)와도 맞는 문법. 창틀은 애니메이션이
   없는 이 바깥 요소에 건다: 12s 리셋 페이드는 안쪽 -chat에 걸려 있어 내용만
   사라지고 창틀은 남는다(창이 통째로 깜빡이면 리플레이가 아니라 고장으로
   읽힌다). 15차 색 재정: muted 창틀이 아래 작동방식 밴드와 같은 canvas 회색이라
   탁하게 겹쳤다 - 창틀은 흰 창문(괘선+옅은 그림자), 내부 대비는 질의 버블이
   앱 .turn-bubble 문법(canvas 칩)을 그대로 입어 만든다. */
.landing-demo {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding: var(--space-4);
  border: 1px solid rgba(22, 24, 29, 0.06);
  border-radius: var(--radius-card);
  /* tactile 시안: 창틀을 하드웨어 패널로 읽히게 한다. 아주 옅은 위->아래 표면
     그라디언트 + 하단 안쪽 1px 엣지. 오프토큰 하드코딩 그림자는 토큰으로 옮겼다
     (--shadow-panel이 종전 값과 같은 급이다).
     촉각 2단계: 확실한 하드웨어 패널로 한 단 더 올린다. 상단 안쪽 하이라이트(edge-hi)
     + 상위 티어 패널 그림자(--shadow-panel-hi) + 보더를 더 옅게(--border보다 연한
     rgba). 랜딩에서 가장 눈에 띄는 표면이라 이 창틀 하나만 이 급을 쓴다. */
  background-color: var(--card);
  background-image: var(--grad-paper-soft);
  box-shadow: var(--edge-hi), var(--edge-lo), var(--shadow-panel-hi);
}

.landing-demo-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* 15차: 흰 창틀 안 내부 대비는 이 버블이 만든다 - 실제 채팅의 유저 질의 칩
   (.turn-bubble)을 그대로 입는다. 촉각 2단계에서 .turn-bubble이 canvas 배경에서
   종이 솟음(흰 표면 + edge-lo + raise)으로 바뀌어(style.css) 이 규칙도 같이 옮긴다. */
.landing-demo-query {
  align-self: flex-end;
  max-width: 90%;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-bubble);
  background-color: var(--card);
  background-image: var(--grad-paper);
  box-shadow: var(--edge-lo), var(--shadow-raise);
  font-size: 15px;
  font-weight: 600;
}

.landing-demo-query-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  max-width: 100%;
}

.landing-demo-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--primary);
  visibility: hidden;
}

.landing-demo-thinking {
  display: flex;
  gap: 6px;
  margin: 0;
  padding-left: 4px;
  opacity: 0;
}

.landing-demo-thinking span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted-foreground);
}

.landing-demo-answer {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  /* 창 안의 답변 카드도 같은 재질을 얕게 입는다(패널 안 패널이라 한 단 약하게).
     촉각 2단계: shadow-card -> raise, 상단 안쪽 하이라이트(edge-hi) 추가. */
  background-color: var(--card);
  background-image: var(--grad-paper-soft);
  box-shadow: var(--edge-hi), var(--edge-lo), var(--shadow-raise);
}

/* 13차: 카드형 구답변(법안명·결과·수치·출처 4줄)을 실제 제품과 같은 산문 한
   문단으로 갈았다. 층위 칩(.provenance-chip)과 인용 칩(.cite)은 style.css 조판을
   그대로 쓴다 - 이 파일에 규칙을 더하지 않는다(값 원천 이중화 금지). */
.landing-demo-answer-prose {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.75;
}

/* 예외 한 줄: .cite의 inline-block은 원자 박스라 양옆이 늘 개행 후보다 -
   템플릿이 넣은 word joiner가 무력해져 좁은 화면에서 마침표가 홀로 개행된다.
   데모 스코프에서만 inline으로 되돌리면 결합자가 칩·마침표를 앞 어절에 묶는다
   (조판 속성은 전부 style.css 값 그대로라 시각 변화 없음). */
.landing-demo-answer-prose .cite { display: inline; }

/* 17차: 종합분석 확장분(셋째·넷째 산문). 모바일은 두 문장으로 축약하고(오너
   단서) 넓은 화면(720px+)에서 펼친다. 콘텐츠는 항상 DOM에 있어 크롤러는 전문을
   본다 - 노출만 조판이 제어한다. */
.landing-demo-answer-ext { display: none; }

/* 18차 토큰 스트리밍의 진행도. 등록 커스텀 프로퍼티라 키프레임에서 수치로
   보간되고(미등록이면 중간에 이산 점프 = 한 번에 출현으로 강등될 뿐 깨지지
   않는다), initial 1이라 애니메이션이 없는 모든 상태(정지·reduced-motion·
   미지원 브라우저·크롤러)는 전문이 보인다. @property는 최상위 규칙이어야
   한다 - 미디어 블록 안에 넣으면 조용히 무시된다(테스트가 위치를 고정). */
@property --landing-stream {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

/* 단어 스팬: 컨테이너가 흘려보내는 진행도에 자기 연번(--i)을 대조해 자기
   차례에 켜진다. 진행도 1이면 전 단어 opacity 1이다. 스팬별 animation-delay를
   쓰지 않는 이유: delay는 20s 루프 전체를 밀어 사이클 리셋이 단어마다 어긋나고
   (마지막 단어가 다음 사이클 타이핑 단계까지 잔존), 컨테이너 단일 애니메이션
   유도는 마스터 타임라인과 위상이 원리적으로 어긋날 수 없다. */
.landing-demo-w {
  opacity: clamp(0, calc(var(--landing-stream) * var(--n, 1) - var(--i, 0)), 1);
}

/* 마스터 타임라인 20s: 모든 요소가 같은 duration을 공유하고 키프레임 %로
   자기 구간을 갖는다(위상 어긋남 없는 무한 루프의 표준형). 키프레임 이름이
   landing- 프리픽스인 것은 이 파일의 규율이다(테스트가 고정한다).
   16차(2026-09-13): 두 문장 답변에 12s -> 16s. 17차(2026-09-13): 넓은 화면
   네 문장 답변에 16s -> 20s, 타이핑·생각을 더 앞으로 죄어 열람 약 11.8s. */
@media (prefers-reduced-motion: no-preference) {
  .landing-demo-chat { animation: landing-demo-cycle 20s linear infinite; }

  .landing-demo-query-text { animation: landing-demo-type 20s infinite; }

  .landing-demo-caret {
    animation: landing-demo-caret-gate 20s step-end infinite,
               landing-demo-blink 1s steps(2, jump-none) infinite;
  }

  .landing-demo-thinking { animation: landing-demo-think 20s linear infinite; }

  .landing-demo-thinking span { animation: landing-demo-pulse 0.9s ease-in-out infinite; }

  .landing-demo-thinking span:nth-child(2) { animation-delay: 0.15s; }

  .landing-demo-thinking span:nth-child(3) { animation-delay: 0.3s; }

  /* 답변 카드 등장과 토큰 스트리밍(등록 프로퍼티 보간)은 같은 20s를 공유한다.
     스트림은 linear 필수 - ease면 단어 간격이 구간 끝에서 뭉친다. */
  .landing-demo-answer {
    animation: landing-demo-answer 20s infinite,
               landing-demo-stream 20s linear infinite;
  }
}

@keyframes landing-demo-cycle {
  0%, 97% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes landing-demo-type {
  0%, 5% { max-width: 0; animation-timing-function: steps(16, end); }
  17%, 100% { max-width: 100%; }
}

@keyframes landing-demo-caret-gate {
  0% { visibility: visible; }
  19%, 100% { visibility: hidden; }
}

@keyframes landing-demo-blink {
  0% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes landing-demo-think {
  0%, 18% { opacity: 0; }
  21%, 31% { opacity: 1; }
  35%, 100% { opacity: 0; }
}

@keyframes landing-demo-pulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes landing-demo-answer {
  0%, 33% { opacity: 0; transform: translateY(12px); }
  38%, 97% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

/* 18차: 토큰 스트리밍 진행도. 카드 등장(38%)이 끝난 뒤 층위 칩이 한 박자 홀로
   보이고 단어가 흐르기 시작한다. 38->64% = 5.2s에 약 90단어(단어당 약 58ms -
   실제 스트리밍보다 빠르게, 오너 단서). 사이클 말미 리셋은 컨테이너 페이드
   (97-100%)가 가린다. */
@keyframes landing-demo-stream {
  0%, 38% { --landing-stream: 0; }
  64%, 100% { --landing-stream: 1; }
}

/* ---- 2. 작동 방식 ---- */

/* 밴드 기본 여백. 이 규칙은 위 margin-top 공통 규칙보다 뒤에 있어야 한다.
   13차(2026-09-13): 스탯 스트립이 철거되면서 그 카드에 밴드 경계를 걸치던
   .landing-stats + .landing-how 규칙(--landing-straddle)이 함께 사라졌다. 이제
   이 기본 규칙이 위 경계를 맡고, 히어로와 이 밴드는 --landing-rhythm이 나눈다. */
.landing-how {
  padding-block: 56px 60px;
}

.landing-step-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 카드 크롬을 걷고 괘선 위 기입으로 바꾼다. 정적 구획은 괘선과 지면이 나누고,
   그림자는 부유 크롬과 인터랙티브 카드에만 남는다. */
.landing-step {
  padding: var(--space-4) 0 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-top: 2px solid var(--rule-strong);
}

/* 번호는 처리 순서다. 좁은 화면에서는 이 숫자가 구획 표지 노릇을 하므로 크게 둔다. */
.landing-step-num {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: 28px;
  line-height: 1.1;
  color: var(--muted-foreground);
}

.landing-step-label {
  margin: 0 0 var(--space-2);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
}

.landing-step-desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-700);
}

/* /chat 직접 진입점 3곳(2026-09-15): 작동방식 절 끝 보조 CTA 배치. 히어로 CTA와
   같은 색을 두 번 쓰지 않는 규율이라 테두리형(.landing-cta-quiet)을 쓴다. */
.landing-steps-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-6);
}

/* ---- 3. 블로그 3편 ---- */

.landing-post-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.landing-post {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  /* tactile 시안: 카드는 절제 구역이다(부풀리지 않음). 옅은 표면 그라디언트 +
     하단 안쪽 엣지까지만, 그림자 총량은 종전 그대로.
     촉각 2단계: 목록 카드 급을 raise로 통일(블로그 밴드가 흰 시트로 반전된 뒤로도
     보더+그림자만으로 카드 경계를 잃지 않게 한 단 올린다). */
  background-color: var(--card);
  background-image: var(--grad-paper-soft);
  box-shadow: var(--edge-hi), var(--edge-lo), var(--shadow-raise);
  transition: box-shadow 150ms ease;
}

/* 카드 링크 hover: 제목 밑줄에 더해 카드가 한 단 뜬다. 링크가 카드 전면을 채우므로
   카드 셀렉터에 건다. */
.landing-post:hover {
  box-shadow: var(--edge-hi), var(--edge-lo), var(--shadow-raise-hi);
}

/* overflow-wrap: 블로그 제목·설명은 길이가 정해져 있지 않다. 띄어쓰기 없는 긴
   토큰(법안명·URL 등)이 들어와도 카드 밖으로 삐져나가지 않게 한다. */
.landing-post-link {
  display: block;
  width: 100%;
  padding: var(--space-5);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-card);
  overflow-wrap: break-word;
}

.landing-post-link:hover .landing-post-title {
  text-decoration: underline;
}

/* 카드 링크 press: 카드 표면을 한 단 낮춰 눌림을 표면으로 표현한다. */
.landing-post-link:active {
  background: var(--muted);
  border-radius: var(--radius-card);
}

/* 카드 썸네일: 목록 표면(.blog-list-thumb)과 같은 원천·같은 cover 규칙이다.
   주제 사진은 비율이 제각각이라 aspect-ratio 박스에 cover로 잘라 채운다.
   og.png 폴백은 이미 1200:630이라 이 규칙이 아무 일도 하지 않는다. */
.landing-post-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: var(--radius-input);
  background: var(--paper);
  margin: 0 0 var(--space-3);
}

/* 사진 출처 1줄(Pexels 가이드라인). 각주 성격이라 본문보다 죽인다(.blog-photo-credit
   관례). 링크는 본문 링크 규칙(잉크+밑줄)을 그대로 상속한다. */
.landing-photo-credit {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-500);
}

.landing-post-date {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.landing-post-title {
  display: block;
  margin: 6px 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}

.landing-post-desc {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-700);
}

.landing-blog-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.landing-blog-more:hover {
  text-decoration-thickness: 2px;
}

.landing-blog-more:active {
  color: var(--ink-700);
}

/* ---- 확장 1단: 태블릿 이상 ---- */

@media (min-width: 720px) {
  .landing-body {
    --landing-rhythm: 84px;
    --landing-rhythm-tight: 40px;
  }

  .landing-header,
  .landing-main {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* 히어로가 가운데로 모인다. 모바일의 좌정렬은 읽기 시작점이 하나뿐인 좁은 단에서
     맞는 조판이고, 폭이 넓어지면 중앙 정렬이 데모 카드와 축을 공유한다. */
  .landing-hero-text {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
    align-items: center;
  }

  /* 넓은 화면은 가로 스크롤 힌트가 필요 없다 - 2줄 줄바꿈 + 가운데 축. */
  .landing-ask-examples {
    flex-wrap: wrap;
    overflow: visible;
    justify-content: center;
    width: min(100%, 720px);
  }

  /* 17차: 종합분석 확장분은 태블릿부터 펼친다(축약은 모바일만 - 오너 단서).
     창도 산문 네 문장에 맞춰 한 단 넓힌다. */
  .landing-demo-answer-ext { display: inline; }

  .landing-demo {
    max-width: 640px;
  }

  .landing-step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .landing-how {
    padding-block: 64px 68px;
  }

  .landing-blog {
    padding-block: 64px 68px;
  }
}

/* ---- 확장 2단: 데스크톱 ---- */

@media (min-width: 1080px) {
  .landing-body {
    --landing-rhythm: 96px;
  }

  /* 오너 재정 2026-09-13(17차): 좌우 2단(5차)을 다시 접는다. 2단은 데모가 작은
     소품일 때의 문법인데, 데모가 첫 화면의 주인공(대형 창 + 네 문장 종합분석)이
     된 뒤로는 데모를 좁은 우측 열에 가둬 "휑함"의 원인이 됐다. 제목 한 줄 ->
     서브 -> 입력폼 -> 대형 데모 창의 상하 중앙 적층으로 첫 화면을 세로로 채운다.
     (5차의 "가운데 적층 기각"과 다른 국면이다: 그때 데모는 지금의 절반 크기였다.) */
  .landing-hero {
    gap: 40px;
    /* 오너 재정 2026-09-13(16차): 데스크톱 첫 화면은 히어로가 다 갖는다("작동방식이
       첫 화면에 보일 필요가 있을까" - 6차 자연 흐름 재정의 데스크톱 한정 번복).
       100svh에서 헤더+히어로 상하 패딩을 뺀 만큼 예약해 작동 방식 절을 fold 아래로
       내린다. 과소 예약이 밴드 상단을 다시 첫 화면에 들이므로 뺄셈은 작게 잡는다. */
    min-height: calc(100svh - 140px);
    align-content: center;
    justify-items: center;
    /* 하단 패딩을 크게 둬 콘텐츠를 기하 중앙보다 위(광학 중심)에 앉힌다. */
    padding-block: 8px 56px;
  }

  /* 적층 중앙축은 720px 단과 같고, 폭 상한만 푼다(제목 한 줄이 640px을 넘는다). */
  .landing-hero-text {
    max-width: none;
    padding-block: 0;
  }

  /* 17차: 데모가 첫 화면의 주인공이다 - 본문 컨테이너급 폭으로 편다. */
  .landing-demo {
    max-width: 880px;
    padding: var(--space-5);
  }

  /* 16차: 커진 창에 맞춰 데모 활자도 본문 크기로 올린다(15px는 넓은 창에서
     모형처럼 작게 읽힌다). */
  .landing-demo-query,
  .landing-demo-answer-prose {
    font-size: 16px;
  }

  /* 17차: 상하 적층에서 제목은 한 줄로 선다(강제 nowrap 없이 자연 적재 -
     4vw면 1080px 뷰포트에서도 14어절 제목이 콘텐츠 폭 안에 든다). */
  .landing-hero-title {
    font-size: clamp(42px, 4vw, 56px);
  }

  .landing-hero-sub {
    font-size: 17px;
  }

  .landing-post-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---- 스크롤 리빌 (오너 승인 2026-09-11) ----
   CSS scroll-driven animation만 쓴다. JS는 한 줄도 추가하지 않는다(랜딩 스크립트는
   JSON-LD + cat.js 둘로 고정돼 있다). @supports 밖 기본값은 완전 정적이라 미지원
   브라우저는 지금과 똑같이 보이고, 모션 최소화 설정이면 발동하지 않는다.
   히어로와 데모는 대상이 아니다: 첫 화면은 즉시 렌더해야 하고 LCP를 늦출 수 없다.
   대상은 언제나 자식 요소다. .landing-step-list·.landing-post-list는 cat.js가
   지면(선반)으로 읽는 블록이라 transform이 걸리면 고양이가 재는 rect가 스크롤 중에
   움직인다(그래서 컨테이너가 아니라 그 자식에 건다). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .landing-reveal {
      animation: landing-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* 모션 최소화 설정에서는 CTA 전이도 끈다(설계 §2 모션 허용 목록의 단서). 도트
   fade-in 해제는 13차 돔 철거와 함께 사라졌다. 리빌과 데모 루프는 각자의
   no-preference 가드가 이미 막는다. */
@media (prefers-reduced-motion: reduce) {
  .landing-cta { transition: none; }
}