/* 랜딩(비로그인 첫 화면)·요금제 — 프롬프트 메인창 (토스 심사 대응, docs/64 · 디자인 docs/28)
 *
 * 레퍼런스 = Claude 모바일 첫 화면: 중앙 로고+인사, 컴포저 하나, 하단 사업자 정보.
 * 색·크기는 전부 app.css 토큰(--panel·--line·--accent·--fs-*)만 쓴다 — 다크/라이트 자동.
 * 컴포저 글자 15.5px는 실물(#chatinput, app.css:3012)과 같은 메트릭을 따른 것이다.
 */

/* 랜딩에서도 **사이드바는 남긴다** (사용자 지시 2026-08-23, 레퍼런스 ChatGPT 첫 화면) —
   메뉴·계정 현황이 곧 랜딩의 내비다. 티커·헤더·챗탭만 걷어 프롬프트창을 주인공으로. */
body.landing #ticker, body.landing header,
body.landing #chattab, body.landing #chatpanel { display: none !important; }
/* 콘텐츠는 사이드바 옆 전폭의 **중앙**에 (사용자 지시 2026-08-23 캡처 — 우로 밀림 교정).
   범인은 body.chat-open #app의 드로어 여백(440px): 랜딩은 드로어를 숨기는데 여백만 남아
   중앙이 오른쪽으로 밀렸다. 사이드바는 #app 밖 flex 형제라 이 0이 사이드바를 덮지 않는다.
   landing.css가 app.css 뒤에 로드되므로 같은 특이도로 이긴다. */
body.landing #app { margin-left: 0; }

/* 첫 방문 프리페인트 (index.html head) — /api/me 판정 전 껍데기 깜빡임 방지.
   판정이 끝나면 main.js가 클래스를 걷는다. 사이드바는 랜딩에서도 남기로 했으므로
   (위 규칙) 여기서도 가리지 않는다 — 가렸다 보이면 그게 곧 깜빡임이다.
   main은 가린다 — 하드 리프레시(캐시 무시)면 JS가 뜨기 전까지 종목분석의 빈 안내문
   ("종목을 검색하면…")이 흘러나왔다(실측 2026-08-23). 랜딩 진입엔 랜딩만 보여야 한다. */
html.prelanding #ticker, html.prelanding header,
html.prelanding #chattab, html.prelanding #chatpanel,
html.prelanding main { visibility: hidden; }

/* ---------- 랜딩 골격: 상단 바 / 중앙(히어로+컴포저) / 하단 푸터 ---------- */
/* 높이는 지정하지 않는다 — 앱 전체가 body scale(1.2) 안이라(app.css:95) 100dvh를 쓰면
   1.2배로 부풀어 푸터가 화면 밖으로 잘린다(실측 2026-08-22). .page가 이미 flex:1로
   #app을 꽉 채우므로 그 높이를 그대로 쓴다. */
#view-landing:not([hidden]) {
  display: flex; flex-direction: column;
  box-sizing: border-box;
  padding: 14px 20px 18px;
}
.lndtop { display: flex; justify-content: flex-end; gap: 8px; }
/* **판정 전에는 비워 둔다** (머신러너님 지적 2026-08-29 "로그인 상태에서 리프레시하면
   우측 상단에 로그인|회원가입이 잠깐 나타났다 사라져").
   두 버튼은 index.html의 정적 마크업이라 첫 페인트에 **무조건 그려진다.** 로그인 여부는
   `/api/me`가 돌아온 뒤에야 알 수 있고, 그때 `body.anon`이 붙는다 — 그 사이의 한 박자가
   로그인 사용자에게 **남의 화면**을 보여준 것이다.
   그래서 기본을 '감춤'으로 두고 **비로그인이 확인됐을 때만** 보여준다. `display`가 아니라
   `visibility`인 이유: 31px 자리를 미리 비워 둬야 버튼이 나타날 때 아래 콘텐츠가 안 튄다
   (아래 `.lndfoot`의 min-height와 같은 사유).
   ⚠ 이건 폰 전용이 아니다 — 같은 깜빡임이 데스크톱에도 있었다. 대가는 비로그인 사용자가
   버튼을 응답 한 박자 뒤에 보는 것뿐이고, 잘못된 화면을 보여주는 것보다 낫다. */
.lndtop { visibility: hidden; }
body.anon .lndtop { visibility: visible; }
.lndghost, .lndcta {
  font: inherit; font-size: var(--fs-sub); line-height: 1;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
}
/* 로그인 = 아웃라인 버튼 (사용자 지시 2026-08-29 "테두리를 청록색으로").
   옆의 '3초 회원가입'이 채운 청록이라, 같은 --accent를 **선으로만** 써서 한 쌍을 만든다.
   쉬는 상태는 46%로 눌러 CTA보다 뒤에 서고, 호버에서 100%로 올라온다. */
.lndghost { color: var(--dim); background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent); }
.lndghost:hover { color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lndcta { color: var(--bg); background: var(--accent); border: 0; font-weight: 600; }
.lndcta:hover { filter: brightness(1.06); }

.lndmid {
  flex: 1; display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  width: 100%; max-width: 640px; margin: 0 auto;
  /* 상단 바 높이만큼 시각 중심을 살짝 올린다 — 광학 보정 */
  padding-bottom: 5vh;
}
#lndhero { text-align: center; margin-bottom: 26px; }
/* 부제 줄(.lndsub)은 폐지 (2026-08-28) — '좋은 대화는 더 나은 기준을 만듭니다'는
   컴포저 플레이스홀더(#lndinput)가 대신 말한다. 인사말이 히어로의 마지막 줄. */
.lndci { height: 34px; width: auto; display: block; margin: 0 auto 18px; }
body[data-theme="dark"] .lndci { content: url(/static/img/brand/joovis_ci_dark.png); }
.lndhello { font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }

/* ---------- 컴포저 — 실물(#chatbox)과 같은 문법의 경량판 ---------- */
#lndform { width: 100%; }
#lndbox {
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
  padding: 14px 14px 8px;
  box-shadow: 0 10px 34px color-mix(in srgb, var(--tg-ink, #000) 14%, transparent);
  transition: border-color .15s ease;
}
#lndbox:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
#lndinput {
  display: block; width: 100%; box-sizing: border-box;
  border: 0; background: transparent; outline: none; resize: none;
  color: var(--text); font: inherit; font-size: 15.5px; line-height: 1.55;
  /* 상자를 15% 키운다 (사용자 지시 2026-08-26) — 커지는 곳은 **글이 들어가는 칸**이다.
     버튼·힌트 줄을 키우면 컨트롤만 굵어지고 쓸 자리는 그대로다. 26→40px이면 상자 키가
     92→106px(+15%)이 되고, 두 줄까지는 상자가 안 흔들린다. 자동 늘림(landing.js)은
     `height`를 인라인으로 얹지만 min-height가 이기므로 이 값이 바닥으로 남는다. */
  padding: 2px 2px; min-height: 40px; max-height: 200px;
}
#lndinput::placeholder { color: var(--dim); }
.lndbar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
/* 도구·스킬 '+' — 홈 컴포저의 30px보다 **크게**(사용자 지시 2026-08-26), 전송 버튼과 같은 34px 키.
   랜딩은 첫 화면이라 눌러 볼 것이 눈에 띄어야 한다. */
.lndplus {
  flex: none; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s ease, border-color .15s ease;
}
.lndplus svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lndplus:hover, .lndplus[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
/* 빌려 온 도구 메뉴(#plusmenu)가 이 상자를 기준으로 뜨게 — 없으면 화면 좌상단으로 날아간다 */
#lndbox { position: relative; }
/* 랜딩에서는 **아래로** 편다. 홈 컴포저는 화면 맨 아래에 있어 위로 여는 게 맞지만, 랜딩의
   컴포저는 한가운데라 위로 열면 로고와 인사말을 덮는다(실측 2026-08-26). 아래는 비어 있다. */
#lndbox .plusmenu { top: 100%; bottom: auto; margin: 6px 0 0; }
.lndhint { margin-left: auto; font-size: var(--fs-lab); color: var(--dim); }
#lndsend {
  /* 전송만 약 15% 크게 (사용자 지시 2026-08-31) — 옆의 .lndplus(34px)는 그대로 둔다.
     클로드·ChatGPT도 보내기를 더 크게 둔다: 그 버튼이 이 줄의 결론이기 때문이다. */
  flex: none; width: 39px; height: 39px; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--accent); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
#lndsend svg { width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#lndsend:hover { filter: brightness(1.06); }

/* 둘러보기 칩 — 열려 있는 화면들로 가는 낮은 문 (anongate open 정책과 1:1).
   아이콘 = 사이드바 메뉴와 같은 SVG(같은 곳으로 간다는 표식, docs/28 라인 아이콘) */
.lndtry {
  margin-top: 18px; font-size: var(--fs-lab); color: var(--dim);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.lndtry a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text); cursor: pointer; text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px 5px 10px;
}
.lndtry a svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; color: var(--dim);
}
.lndtry a:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); }
.lndtry a:hover svg { color: var(--accent); }

/* ---------- 푸터 — Claude 모바일 문법: 사업자 정보 3줄 + 문서 링크 ---------- */
.lndfoot {
  /* 자리를 미리 비워 둔다 (사용자 지적 2026-08-24 "아래 있다가 정위치로 띡") — 이 줄이 없으면
     서버 응답 전 높이가 0이라 `.lndmid`(flex:1)가 그만큼 커지고, 응답이 오는 순간 중앙 정렬
     콘텐츠가 **위로 튄다**(실측: 히어로 top 295→237, 58px).
     값 95px = 4줄(사업자 3줄 + 문서 링크)의 실제 CSS 높이. ⚠ 화면에서 잰 114px은 **렌더 픽셀**이다
     — 앱 전체가 body scale(1.2) 안이라 CSS px과 다르다(114 ÷ 1.2 = 95). 그대로 넣으면 19px을
     더 예약해 콘텐츠가 그만큼 위로 앉는다. */
  /* 문서 링크 행이 계정 메뉴로 빠져 3줄만 남았다 → 예약 높이도 그만큼 줄인다(3줄 × 27 ÷ 1.2) */
  min-height: 68px;
  margin-top: 26px; text-align: center;
  /* **조용하게** (사용자 지시 2026-08-26 "너무 티나지 않게") — 표시 의무는 지키되
     첫 화면의 주인공은 컴포저다. 크기는 배지 단으로, 색은 한 단 더 흐리게. */
  font-size: var(--fs-badge); line-height: 1.85; color: var(--dim); opacity: .82;
  word-break: keep-all;
}
.lndfoot a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.lndfoot a:hover { color: var(--text); }
.lndlinks { margin-top: 4px; }
.lndlinks a { text-decoration: none; }
.lndlinks a:hover { text-decoration: underline; }
.lndsep { margin: 0 7px; opacity: .6; }
.lndnote { font-size: var(--fs-body); color: var(--dim); padding: 24px 0; text-align: center; }

/* ---------- 요금제 뷰 — 카드(.jvpccard)는 plan.js·app.css 것을 그대로 쓴다 ---------- */
#view-pricing:not([hidden]) { display: block; }
#view-pricing .jvpcgrid { max-width: 860px; margin: 0 auto; }
#view-pricing .jvpcfoot { max-width: 860px; margin: 14px auto 0; text-align: center; }
#view-pricing .lndfoot { margin: 34px auto 8px; }

/* ---------- 모바일 (첨부 레퍼런스가 모바일) ---------- */
@media (max-width: 560px) {
  #view-landing:not([hidden]) { padding: 10px 12px 14px; }
  .lndhello { font-size: 22px; }
  .lndci { height: 30px; }
  .lndmid { padding-bottom: 3vh; }
  .lndfoot { font-size: var(--fs-badge); line-height: 1.85; }
  .lndsep { margin: 0 5px; }
}

/* ---------- 모바일 랜딩 골격 (2026-08-29, 폰 스크린샷 지적 3건) ----------
   ① 좌상단 흰 상자 — 사이드바가 61x74로 잘려 홈·포트폴리오 아이콘만 남아 있었다.
      app.css의 접힘/스트립 특이도는 그쪽에서 고쳤지만, **랜딩에서는 아예 감춘다.**
      머리말의 "랜딩에서도 사이드바는 남긴다"(2026-08-23)는 **데스크톱 판단**이다 — 폰에서는
      랜딩이 이미 제 내비를 갖고 있다(`.lndtry` 3칩 + `.lndtop` 로그인/회원가입). 같은 것을
      두 번 얹으면 첫 화면의 주인공인 컴포저가 밀린다. 데스크톱(>900px)은 그대로 남는다.
   ② 로그인·회원가입 버튼과 JooVIS 로고가 붙어 있었다(.lndtop 84~115 / #lndhero 114~).
      ①로 74px이 사라지면 상단이 풀리고, .lndmid(flex:1)가 남은 높이를 가져가 중앙에 앉는다.
   ③ 푸터가 화면 중턱(y=427~505)에 떠 아래로 307px이 비었다. 원인은 높이다 —
      좁은 화면에서 `body{height:auto}`(app.css)라 #app이 뷰포트를 안 채웠다.
      ⚠ 파일 머리의 "높이를 지정하지 않는다"는 경고는 **확대(1.2) 때문**이었다. 지금은
      `calc(.../var(--zoom,1))`로 나눠 주므로 확대가 켜진 좁은 창(마우스)에서도 안 부푼다.
      dvh를 쓰는 이유: 모바일 브라우저 주소창이 접히고 펴져도 실제 보이는 높이를 따라간다. */
@media (max-width: 900px) {
  body.landing #sidebar { display: none !important; }
  /* ⚠ **단, 햄버거로 열었을 때는 그린다** (실측 2026-08-29 — "햄버거를 눌러도 회색빛만 돌고
     아무것도 안 보임"). 위 한 줄이 랜딩의 사이드바를 통째로 지웠는데, 그 뒤에 로그인
     사용자에게 햄버거를 열어 줬다. 그래서 눌러도 **스크림만 깔리고 드로어는 없는** 상태가 됐다.
     감추는 것은 '평소'이지 '열었을 때'가 아니다 — 여는 손잡이를 준 이상 열리는 대상이 있어야 한다.
     `!important`는 위 줄의 `!important`를 이기기 위한 것이고, 특이도도 한 단 높다. */
  body.landing.nav-open #sidebar { display: flex !important; }
  /* 프롬프트 블록을 아래로 (머신러너님 지시 2026-08-29 "조금 아래로").
     실측(375x812, 비로그인): 블록(로고~칩) 중심이 355px로 **화면 중심(406)보다 51px 위**였고
     칩 아래로 234px이 비었다. 원인 둘 —
       · 위쪽은 `.lndtop`(41px)만 차지하는데 아래쪽은 푸터 블록이 118px을 가져가 **비대칭**이고
       · `.lndmid`의 `padding-bottom:3vh`가 '광학 보정'으로 한 번 더 위로 올렸다.
     데스크톱에서는 그 보정이 옳다(상단 바가 있고 화면이 넓다). 폰에서는 화면이 좁아 그 보정이
     블록을 눈에 띄게 위로 띄운다. 그래서 폰에서만 보정을 끄고 비대칭만큼 내린다.
     `clamp`인 이유: 가로로 눕히면(높이 375) 9vh가 34px로 줄어 푸터와 부딪히지 않는다. */
  .lndmid { padding-bottom: 0; padding-top: clamp(0px, 9vh, 84px); }
  body.landing #app { min-height: calc(100vh / var(--zoom, 1)); }
}
@supports (height: 100dvh) {
  @media (max-width: 900px) {
    body.landing #app { min-height: calc(100dvh / var(--zoom, 1)); }
  }
}