/* Public landing only; the editor and document pages retain their styles. */

/* ── 색 (2026-09-20 사장님 "디자인을 흰색으로 깔끔하게 하자") ───────────────────
   전에는 검은 바탕(#111315)에 라임(#bafb69)을 글자색으로도 썼다. 흰 바탕으로 옮기면
   **라임을 글자에 그대로 쓸 수 없다** — 흰색 위 #bafb69 는 대비가 1.4:1 이라 안 읽힌다.
   그래서 라임은 **단추 바탕으로만** 남기고, 글자·선·아이콘에 쓸 짙은 초록을 따로 뒀다.
   회색도 파랑 쪽이 아니라 초록 쪽으로 아주 살짝 기울여 강조색과 한 벌로 보이게 했다. */
.landing {
  --ink: #14171a;          /* 본문·제목 — 흰 위 15.8:1 */
  --landing-muted: #5a626b;/* 설명 글 — 흰 위 6.0:1 (AA 통과) */
  --line: #e4e7e2;         /* 칸 사이 선 */
  --surface: #f7f8f5;      /* 살짝 올라온 면 (카드·FAQ) */
  --landing-accent: #2f6b12;/* 글자·선·아이콘에 쓰는 강조 — 흰 위 6.4:1 */
  --accent-fill: #bafb69;  /* 단추 바탕. 글자를 얹을 때만 쓴다 */
  --on-fill: #16210a;      /* 라임 위에 얹는 글자 — 라임 위 12.9:1 */
}
body.landing { margin: 0; padding: 0; background: #fff; color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.65; }
.landing-wrap { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.landing a { color: inherit; text-decoration: none; }
.landing a:focus-visible, .landing summary:focus-visible { outline: 3px solid var(--landing-accent); outline-offset: 5px; }
.landing-skip { position: absolute; left: 24px; top: -100px; padding: 12px; background: #fff; border: 1px solid var(--line); z-index: 5; }
.landing-skip:focus { top: 12px; }
.landing-nav { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 100px; border-bottom: 1px solid var(--line); }
.landing-brand { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; font-size: 23px; font-weight: 750; letter-spacing: -1px; }
.landing-nav nav a, .landing-footer div a { display: inline-flex; align-items: center; min-height: 44px; }
.landing-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--landing-accent); border-radius: 9px; color: var(--landing-accent); font-size: 19px; }
.landing-nav nav, .landing-footer div { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; font-size: 14px; color: var(--landing-muted); }
.landing-nav a:hover, .landing-footer a:hover, .landing-nav [aria-current] { color: var(--landing-accent); }
/* 페이지가 3,268px 인데 시작 단추가 y=368 과 y=3,138 둘뿐이었다 — 그 사이 2,770px 을
   읽는 동안 시작할 자리가 없다. 머리글에 하나 둔다 (2026-09-13 랜딩 정리). */
.landing-nav .landing-nav-cta { padding: 10px 18px; border: 1px solid var(--landing-accent); border-radius: 7px; color: var(--landing-accent); font-weight: 650; }
.landing-nav .landing-nav-cta:hover { background: var(--landing-accent); color: #fff; }
/* 가운데 한 벌 — 제목 → 한 줄 → 단추 → 바로 화면 (2026-09-20).
   전에는 좌우로 갈라 놓아 첫 화면에 여섯 덩이가 흩어져 있었다. 읽는 차례를 하나로
   세우면 무엇을 보라는 것인지가 분명해진다. */
/* 글을 덜어 낸 만큼 그림을 올린다 — 첫 화면(900px)에서 편집기 판이 더 보이게
   위 여백을 62 → 44 로 줄였다 (사장님 지시 2026-09-20 "디자인을 드러내는 디자인으로") */
.landing-hero { padding-block: 44px 0; text-align: center; }
.landing-hero > * { min-width: 0; }
.landing h1 { font-size: clamp(34px, 3.3vw, 48px); font-weight: 650; line-height: 1.22; letter-spacing: -2.5px; margin: 0 0 28px; word-break: keep-all; text-wrap: balance; }
/* 가운데 한 벌에서는 제목을 조금 더 크게, 줄을 좁게 — 두 줄 안에 들어와야 한 덩이로 읽힌다 */
.landing-hero h1 { font-size: clamp(34px, 3.9vw, 54px); line-height: 1.18; margin: 0 auto 16px; max-width: 26ch; }
.landing h1 em { color: var(--landing-accent); font-style: normal; }
.landing-lede { color: var(--landing-muted); max-width: 47ch; font-size: 17px; margin: 0 0 32px; }
.landing-hero .landing-lede { margin: 0 auto 26px; max-width: 58ch; font-size: 17px; }
.landing-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.landing-hero .landing-actions { justify-content: center; }
.landing .landing-button { display: inline-flex; align-items: center; gap: 30px; padding: 14px 24px; background: var(--accent-fill); border-radius: 7px; color: var(--on-fill); font-size: 16px; font-weight: 750; }
.landing-button:hover { background: #a9ef52; }
.landing-secondary { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; border-bottom: 1px solid #aab1b7; }
.landing-secondary:hover { border-bottom-color: var(--landing-accent); color: var(--landing-accent); }
.landing-note { color: var(--landing-muted); font-size: 13px; margin-top: 19px; }
/* 화면 그림이 제목 바로 아래 오도록 여백을 준다 — 첫 화면에서 글과 그림이 한 덩이다 */
.landing-hero .landing-note { margin: 14px 0 30px; }
.landing-hero .landing-preview-link { display: block; max-width: 1120px; margin-inline: auto; }
/* 미리보기 판 — 흰 바탕에서는 유리 느낌이 안 보인다. 옅은 면에 얇은 선과
   퍼진 그림자로 「화면을 올려놓은 것」 처럼 보이게 한다 */
.landing-preview { position: relative; margin: 0 0 35px; padding: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 18px 50px #14171a1a, 0 2px 6px #14171a0d; }
/* 10px 글씨라 대비를 넉넉히 준다 — #6d757d 는 옅은 면 위에서 4.39:1 로 기준(4.5)에 걸렸다 */
.landing-preview-bar { display: flex; gap: 8px; align-items: center; padding: 5px 6px 13px; font: 10px ui-monospace, monospace; color: #565d64; }
.landing-preview-bar > span:last-child { margin-left: auto; }
.landing-status { width: 6px; height: 6px; background: var(--landing-accent); border-radius: 50%; }
/* 기능은 이름만 늘어놓는다 — 넷에서 여덟로 늘리면서 space-between 을 버렸다.
   flex 로 벌려 놓으면 낱말 길이에 따라 칸 간격이 들쭉날쭉해 줄이 안 맞는다 (2026-09-20) */
.landing-capabilities { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 20px; padding-block: 25px; border-block: 1px solid var(--line); color: #4a525a; font-size: 14px; }
.landing-capabilities span::before { content: "+"; margin-right: 12px; color: var(--landing-accent); }
.landing-section { padding-block: 78px; border-bottom: 1px solid var(--line); scroll-margin-top: 25px; }
.landing h2 { font-size: clamp(26px, 3vw, 37px); line-height: 1.3; letter-spacing: -1.3px; font-weight: 600; margin: 0 0 36px; word-break: keep-all; text-wrap: balance; }
.landing h3 { font-size: 18px; font-weight: 600; letter-spacing: -.4px; margin: 14px 0 10px; word-break: keep-all; }
.landing-guide p, .landing-faq p { color: var(--landing-muted); font-size: 16px; margin: 0; }
.landing-section-top { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.landing-section-top > a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; white-space: nowrap; color: var(--landing-accent); }
.landing-guide-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.landing-guide-icon { color: var(--landing-accent); font: 24px ui-monospace, monospace; min-height: 36px; }
.landing-guide h3 { line-height: 1.5; }
.landing-guide-link { display: flex; justify-content: space-between; gap: 8px; padding-top: 30px; margin-top: auto; font-size: 13px; color: var(--landing-accent); }
/* 두 칸(제목 | 목록)을 버리고 **제목을 위로 올렸다** (2026-09-20).
   왼쪽 칸을 좁혀 빈 구멍을 없앴더니 이번에는 제목이 두 줄로 꺾였다
   ("시작하기 전에 / 궁금한 것들."). 칸 너비로 맞추는 방법은 언어마다 깨진다 —
   영문 "A few things before you start." 는 한국어보다 두 배 넘게 길다.
   위아래로 쌓으면 어느 언어든 제목이 한 줄로 서고 구멍도 안 생긴다.
   답글만 읽기 좋은 너비로 묶는다 — 목록이 1,180px 를 다 쓰면 글줄이 너무 길다. */
.landing-faq { display: block; }
.landing-faq h2 { margin-bottom: 30px; }
.landing-faq p { max-width: 76ch; }
.landing-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; cursor: pointer; font-size: 17px; list-style: none; }
.landing-faq summary::-webkit-details-marker { display: none; }
/* 브라우저 기본 삼각형만 이 자리에 남아 있었다 — 나머지는 다 우리가 그린 것이다 */
.landing-faq summary::after { content: "+"; flex: none; color: var(--landing-accent); font: 19px ui-monospace, monospace; }
.landing-faq details[open] summary::after { content: "\2212"; }
.landing-faq p { padding-top: 6px; padding-bottom: 14px; }
/* 글을 뺐으므로 단추 하나만 선다 — 여백도 그만큼 줄인다 */
.landing-closing { text-align: center; padding-block: 56px; }

.landing-footer { display: flex; justify-content: space-between; gap: 25px; padding-block: 25px 40px; border-top: 1px solid var(--line); }
@media (max-width: 900px) {
  .landing-hero { gap: 32px; }
  .landing h1 { font-size: 38px; }
  .landing-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .landing-wrap { width: calc(100% - 40px); }
  .landing-nav { align-items: flex-start; flex-direction: column; gap: 14px; padding-block: 20px; }
  .landing-nav nav { gap: 22px; }
  .landing-hero { grid-template-columns: 1fr; padding-block: 52px 35px; gap: 40px; }
  .landing h1 { font-size: clamp(31px, 7.8vw, 45px); letter-spacing: -1.6px; }
  .landing-preview { margin-bottom: 0; }
  .landing-faq { grid-template-columns: 1fr; gap: 30px; }
  .landing-section { padding-block: 50px; }
  .landing-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 13px; gap: 15px; }
  .landing-section-top { display: block; margin-bottom: 28px; }
  .landing-section-top h2 { margin-bottom: 18px; }
  .landing-guide-grid { grid-template-columns: 1fr; }
  .landing-footer { flex-direction: column; }
}

/* ── 바탕 (2026-09-20) ─────────────────────────────────────────────────────
   전에는 검은 바탕이 평평해 보여서 빛 번짐 셋과 입자 결을 깔아 뒀었다.
   **흰 바탕에서는 둘 다 뺀다** — 입자 결은 흰 위에서 때 탄 것처럼 보이고,
   빛 번짐은 색이 뜬다. 대신 첫 화면 뒤에만 아주 옅은 기울기 하나를 둔다.
   사장님 지시가 「깔끔하게」 이므로 더 얹지 않는다. */
/* 상단 막대 배경이 50vw 로 화면 밖까지 나간다 — vw 는 세로 스크롤바 폭을 포함하므로
   스크롤바가 보이는 창(윈도우 크롬)에서는 그만큼 가로로 삐져나와 가로 스크롤바가 생긴다.
   clip 은 hidden 과 달리 스크롤 상자를 안 만들어 sticky 상단 막대를 안 깬다 (코드 리뷰 2026-09-15) */
body.landing { position: relative; isolation: isolate; overflow-x: clip; }
body.landing::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 760px; z-index: -1; pointer-events: none;
  background: linear-gradient(#f4f7ef, #fff 78%);
}
/* 상단 막대 — 스크롤하면 배경이 흐려지며 따라온다.
   막대 자체는 가운데 폭(.landing-wrap)이라 배경을 거기 주면 네모가 드러난다 —
   화면 양끝까지 늘린 판을 뒤에 깔아 준다 */
.landing-nav { position: sticky; top: 0; z-index: 4; }
.landing-nav::before {
  content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
  background: #ffffffd9; backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.landing-nav { border-bottom: 0; }
/* 사용법 카드 — 흰 위에서는 유리 대신 **선과 옅은 면**이 낫다.
   손을 올리면 테두리가 강조색으로 바뀌고 살짝 뜬다 */
.landing-guide {
  display: flex; flex-direction: column;
  padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.landing-guide:hover {
  border-color: var(--landing-accent); transform: translateY(-3px);
  box-shadow: 0 12px 30px #14171a14;
}
.landing-faq details {
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px;
  background: var(--surface); padding-inline: 18px;
}
.landing-faq details[open] { border-color: var(--landing-accent); background: #fff; }
/* 시작 단추 — 옆으로 흐르는 빛 */
.landing .landing-button { position: relative; overflow: hidden; }
.landing .landing-button::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, #ffffffb0 50%, transparent 62%);
  transform: translateX(-130%);
}
.landing .landing-button:hover::after { transition: transform .7s ease; transform: translateX(130%); }
/* 움직임을 꺼 둔 손님에게는 아무것도 안 움직인다 */
@media (prefers-reduced-motion: reduce) {
  .landing-guide { transition: none; }
  .landing-guide:hover { transform: none; }
  .landing .landing-button::after { display: none; }
}

/* 진짜 편집기 화면 (2026-09-15) — 브라우저 틀 안에 넣고 살짝 기울여 깊이를 준다.
   손을 올리면 반듯하게 선다. 움직임을 꺼 둔 손님에게는 처음부터 반듯하다 */
.landing-shot { display: block; width: 100%; height: auto; border-radius: 5px; background: #e9ebe6; }
.landing-preview {
  transform: perspective(1600px) rotateY(-4deg) rotateX(1.5deg);
  transform-origin: left center; transition: transform .45s ease;
}
.landing-preview:hover { transform: perspective(1600px) rotateY(0deg) rotateX(0deg); }
@media (max-width: 900px) { .landing-preview, .landing-preview:hover { transform: none; } }
/* 손전화에서는 편집기 전체를 390px 에 욱여넣으면 글자가 안 보여 회색 덩어리가 된다.
   PC 에서 제일 센 그림인데 모바일에서는 아무것도 못 보여 주고 있었다 (2026-09-20).
   그래서 **잘라서 크게** 보여 준다 — 오른쪽 레이어 패널 쪽을 잡는다.
   거기 「AI Edit 03 · AI Edit 01」 이 마스크와 함께 쌓여 있어서, 우리가 말하는
   "AI 가 고친 곳이 레이어로 남는다" 를 글 없이 그대로 보여 주는 자리다.
   cover 라 2배 가까이 커진다 (맞춰 넣으면 0.26배, 이렇게 자르면 0.51배). */
@media (max-width: 650px) {
  .landing-shot { aspect-ratio: 3 / 4; object-fit: cover; object-position: 100% 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-preview, .landing-preview:hover { transform: none; transition: none; }
}

/* ── 미리보기를 눌러 편집기로 (2026-09-19) ──
   가짜 주소창까지 그려 놓고 눌러도 아무 일이 없었다. 사람은 이것을 당연히 누른다.
   실측: 홈에 온 58 중 편집기까지 간 사람 9 (15%). */
.landing-preview-link { display: block; text-decoration: none; border-radius: 13px; }
.landing-preview-link:focus-visible { outline: 2px solid var(--landing-accent); outline-offset: 4px; }
.landing-preview-link .landing-preview { transition: transform .18s ease, box-shadow .18s ease; }
.landing-preview-link:hover .landing-preview,
.landing-preview-link:focus-visible .landing-preview {
  transform: translateY(-3px); box-shadow: 0 26px 60px #14171a24;
}
/* 「열립니다」 를 눌러야 아는 것이 아니라 올려만 봐도 알게 한다.
   늘 띄워 두면 그림을 가리므로 마우스를 올릴 때만 뜬다 — 손가락 기기에는 hover 가
   없으므로, 거기서는 그림 전체가 링크인 것으로 충분하다 (단추도 바로 위에 있다). */
.landing-preview-open {
  position: absolute; inset: auto 16px 16px auto;
  background: var(--landing-accent); color: #fff; font-size: 13px; font-weight: 600;
  padding: 7px 13px; border-radius: 999px;
  opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease;
}
.landing-preview-link:hover .landing-preview-open,
.landing-preview-link:focus-visible .landing-preview-open { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .landing-preview-link .landing-preview, .landing-preview-open { transition: none; }
}