/* ============================================================
   landing.css — 첫 화면(상업용 랜딩) 스타일 (2026-09-13 신설)
   ------------------------------------------------------------
   ⚠ 독립 정적 페이지다 — SPA(index.html)의 theme.css·shell.css에 기대지 않는다(legal.css와
     같은 이유: 어디서 열려도 혼자 완결돼야 한다). 색 값은 theme.css·브랜드 마크와 **같은 값**을
     옮겨 적었다 — 강조 라이트 #0284c7 · 다크 #38bdf8 · 네이비 #070D1E · 시안 #4DEEEA.
   ⚠ 히어로(첫 화면)는 테마와 무관하게 **항상 어둡다** — 실시간 지도가 관제실 톤이어야 항적 점이
     산다(FlightAware 첫 화면과 같은 구성: 어두운 지도 위에 검색창). 아래 절(기능·참여·바닥글)만
     라이트/다크를 따른다(feeders.html과 같은 규칙: 고른 테마가 OS 설정을 이긴다).
   ⛔ 외부 CDN·웹폰트 없음(번들 자족성) — 워드마크만 저장소 벤더 Iceland, 나머지는 시스템 글꼴.
   ⚠ 길이 목표 «1.5화면»(사용자 지시 2026-09-13) — 히어로 1화면 + 기능 한 줄 + 참여 띠 + 바닥글.
     기능 카드를 두 줄로 늘리면 바로 2화면을 넘는다(1440×900 실측 기준). 늘릴 때는 재 본다.
   ============================================================ */
:root {
  --nx-navy: #070d1e;
  --nx-deep: #121d3a;
  --nx-cyan: #4deeea;
  --nx-cyan-dim: rgba(77, 238, 234, 0.55);
  --nx-white: #f8fafc;
  --nx-hero-sub: #b6c2d3;

  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --text: #0f172a;
  --text2: #475569;
  --text3: #64748b;
  --accent: #0284c7;
  --accent-soft: #e0f2fe;
  --on-accent: #ffffff;
  --shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18);

  --font-sans: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI Variable Text',
               'Segoe UI', Roboto, 'Malgun Gothic', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, 'Roboto Mono', Menlo, 'Malgun Gothic', monospace;
  --font-display: 'Iceland', var(--font-sans);

  --hdr-h: 64px;
  --wrap: 1180px;
}
[data-theme="dark"] {
  --bg: #0b1220; --surface: #111a2b; --surface-2: #17223a; --border: #1f2b40;
  --text: #e6edf5; --text2: #a9b7c9; --text3: #7c8ca0;
  --accent: #38bdf8; --accent-soft: rgba(56, 189, 248, 0.16); --on-accent: #0b1220;
  --shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  /* ⚠ 사용자가 고른 테마(data-theme)가 없을 때만 — 고른 것이 OS 설정을 이긴다 */
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #0b1220; --surface: #111a2b; --surface-2: #17223a; --border: #1f2b40;
    --text: #e6edf5; --text2: #a9b7c9; --text3: #7c8ca0;
    --accent: #38bdf8; --accent-soft: rgba(56, 189, 248, 0.16); --on-accent: #0b1220;
    --shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* 한국어는 어절 단위로만 줄을 바꾼다 — 기본값이면 「하늘\n을,」처럼 글자 사이가 끊긴다(모바일 실측) */
  word-break: keep-all; overflow-wrap: break-word;
}
a { color: inherit; }
button { font: inherit; }
.wrap { width: min(var(--wrap), calc(100% - 40px)); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 상단 바 — 항상 네이비 (히어로와 한 덩어리) ─────────────────────────── */
.ld-hdr {
  position: sticky; top: 0; z-index: 20; height: var(--hdr-h);
  background: rgba(7, 13, 30, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: var(--nx-white);
}
.ld-hdr .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.ld-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.ld-brand img { width: 30px; height: 30px; flex: 0 0 auto; }
.ld-brand b {
  font-family: var(--font-display); font-weight: 400; font-size: 27px; letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1;
}
.ld-nav { display: flex; gap: 22px; margin-left: 8px; }
.ld-nav a { text-decoration: none; color: #c7d2e1; font-size: 14px; font-weight: 600; }
.ld-nav a:hover { color: #ffffff; }
/* 상단 메뉴 「새 기능」 배지 (2026-10-01, 사용자 지시 — 「커뮤니티」에 NEW 표시) — 글자 N 하나로
   자리를 작게 두고 title로 뜻을 풀어 쓴다(스크린리더는 위 aria-label을 읽는다). */
.ld-new {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 14px; height: 14px; margin-left: 4px; padding: 0 3px;
  border-radius: 999px; background: #4deeea; color: #070d1e;
  font-size: 9px; font-weight: 800; line-height: 1; vertical-align: 2px;
}
/* 모바일 전용 「게시판」 단추(actions 맨 끝, 「서비스 열기」 다음) — 데스크톱에서는 숨는다. 아래 760px 매체쿼리가 뒤집는다 (2026-10-04, 사용자 지시) */
.ld-nav-cm-m { display: none; }
.ld-hdr-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.ld-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
/* ⛔ hidden 을 클래스가 이기지 않게 (2026-09-18 리뷰) — 브라우저 기본 [hidden]{display:none}은
   작성자 규칙(.ld-btn{display:inline-flex})보다 약하다. 이 줄이 없어서 landing.js applyGate가
   el.hidden 을 꺼도 「내 피더 보기」·「문제 해결 FAQ」가 **모든 방문자에게 그대로 보였다**
   (2026-09-17 단계별 노출 배포). shell.css 557 에 같은 함정이 이미 적혀 있다. */
.ld-btn[hidden] { display: none; }
.ld-btn.pri { background: var(--nx-cyan); color: var(--nx-navy); }
.ld-btn.pri:hover { background: #7ff5f2; }
.ld-btn.ghost { background: rgba(255, 255, 255, 0.06); color: #e6edf5; border-color: rgba(255, 255, 255, 0.16); }
.ld-btn.ghost:hover { background: rgba(255, 255, 255, 0.12); }
.ld-btn.acc { background: var(--accent); color: var(--on-accent); }
.ld-btn.acc:hover { filter: brightness(1.08); }
.ld-btn.line { background: transparent; color: var(--text); border-color: var(--border); }
.ld-btn.line:hover { background: var(--surface-2); }

/* ── 히어로 — 실시간 지도 캔버스 + 검색 ──────────────────────────────────── */
.ld-hero {
  /* 90vh — 첫 화면 아래에 기능 줄의 머리가 살짝 보여 «더 있다»가 읽히고, 전체가 1.5화면에 든다
     (100vh면 1440×900에서 1.6화면 실측). 내용이 더 길면(모바일) 내용 높이가 이긴다. */
  position: relative; min-height: calc(90vh - var(--hdr-h)); min-height: calc(90svh - var(--hdr-h));
  background: var(--nx-navy); color: var(--nx-white); overflow: hidden;
  display: flex; align-items: center;
}
.ld-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ld-hero::after {
  /* 글자 뒤만 살짝 어둡게 — 지도는 보이되 제목·검색창이 읽혀야 한다 */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(7, 13, 30, 0.62), rgba(7, 13, 30, 0.10) 70%, rgba(7, 13, 30, 0) 100%),
    linear-gradient(180deg, rgba(7, 13, 30, 0.35) 0%, rgba(7, 13, 30, 0) 30%, rgba(7, 13, 30, 0) 70%, rgba(7, 13, 30, 0.75) 100%);
}
.ld-hero-in {
  position: relative; z-index: 2; width: min(820px, calc(100% - 40px)); margin: 0 auto;
  padding: 44px 0 56px; text-align: center;
}
.ld-kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(77, 238, 234, 0.10); border: 1px solid rgba(77, 238, 234, 0.28);
  color: var(--nx-cyan); font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
}
.ld-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--nx-cyan); box-shadow: 0 0 0 0 rgba(77, 238, 234, 0.6); animation: ld-pulse 2s infinite; }
@keyframes ld-pulse { 0% { box-shadow: 0 0 0 0 rgba(77, 238, 234, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(77, 238, 234, 0); } 100% { box-shadow: 0 0 0 0 rgba(77, 238, 234, 0); } }
.ld-h1 {
  margin: 18px 0 12px; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.18; font-weight: 800;
  letter-spacing: -0.02em; text-shadow: 0 2px 24px rgba(7, 13, 30, 0.6);
}
.ld-h1 em { font-style: normal; color: var(--nx-cyan); }
.ld-sub { margin: 0 auto 26px; max-width: 640px; color: var(--nx-hero-sub); font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.65; }

/* 검색 카드 — 항공편 · 등록기호 · 공항
   ⭐ 2026-09-20 (사용자 지시 「검색화면 흰색도 주변 다크모드와 어울리게 가독성도 좋게」) — 흰 카드 → 어두운 유리.
   ⚠ 히어로는 테마와 무관하게 항상 어둡다(맨 위 주석) — 그래서 이 카드도 **테마 변수(--surface 등)를 쓰지 않고**
     어두운 값으로 고정한다. 변수를 쓰면 라이트 테마에서 다시 흰 카드가 된다. 톤은 아래 지표 알약(.ld-stat)과 같다.
   ⚠ 글자색은 명도비 4.5:1 이상으로 골랐다(카드 뒤에 밝은 해안선이 비치는 경우로 계산) —
     안내문·탭 #a9b7c9 8.6:1 · 자리표시 #8a9bb3 5.3:1 · 입력 글자 14:1 · 조회 단추(시안 위 네이비) 13.6:1. 색을 바꾸면 다시 잰다. */
.ld-search {
  background: rgba(11, 18, 36, 0.82); color: var(--nx-white); border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
  padding: 12px 12px 10px; text-align: left; color-scheme: dark;
}
.ld-tabs { display: flex; gap: 4px; padding: 0 4px 8px; }
.ld-tabs button {
  border: 0; background: transparent; color: #a9b7c9; font-weight: 700; font-size: 13.5px;
  padding: 7px 12px; border-radius: 8px; cursor: pointer;
}
.ld-tabs button[aria-pressed="true"] { background: rgba(77, 238, 234, 0.14); color: var(--nx-cyan); }
.ld-tabs button:hover { color: #ffffff; }
.ld-tabs button:focus-visible, .ld-go:focus-visible { outline: 2px solid var(--nx-cyan); outline-offset: 2px; }
.ld-row { display: flex; gap: 8px; }
.ld-in {
  flex: 1; min-width: 0; height: 50px; padding: 0 16px; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, 0.20);
  font: 600 16px/1 var(--font-sans); color: #f8fafc; background: rgba(255, 255, 255, 0.06); outline: none;
  text-transform: uppercase; caret-color: var(--nx-cyan);
}
.ld-in::placeholder { color: #8a9bb3; text-transform: none; font-weight: 500; }
.ld-in:hover { border-color: rgba(255, 255, 255, 0.32); }
.ld-in:focus { border-color: var(--nx-cyan); background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 3px rgba(77, 238, 234, 0.20); }
.ld-go { height: 50px; padding: 0 22px; border-radius: 10px; border: 0; background: var(--nx-cyan); color: var(--nx-navy); font-weight: 800; font-size: 15px; cursor: pointer; }
.ld-go:hover { background: #7ff5f2; }
.ld-hint { margin: 8px 6px 0; font-size: 12.5px; color: #a9b7c9; }

/* 검색 결과 */
.ld-out { margin-top: 10px; display: grid; gap: 8px; }
.ld-out:empty { display: none; }
/* 카드 전체가 링크(<a>) — 어디를 눌러도 서비스 화면으로 간다 (2026-09-13 사용자 지시) */
.rs-card {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 10px 14px;
  text-decoration: none; color: inherit; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s, transform 0.08s, background 0.12s;
}
.rs-card:hover { border-color: var(--nx-cyan-dim); background: rgba(77, 238, 234, 0.07); box-shadow: 0 4px 14px -4px rgba(77, 238, 234, 0.25); }
.rs-card:hover .rs-link { text-decoration: underline; }
.rs-card:active { transform: translateY(1px); }
.rs-cs { font-family: var(--font-mono); font-weight: 800; font-size: 17px; color: #ffffff; letter-spacing: 0.02em; }
.rs-meta { font-size: 12.5px; color: #a9b7c9; }
.rs-kv { grid-column: 1; display: flex; gap: 14px; font-size: 13px; color: #c7d2e1; }
.rs-kv b { font-family: var(--font-mono); font-weight: 700; color: #ffffff; }
.rs-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-decoration: none; font-weight: 700; font-size: 13px; color: var(--nx-cyan); white-space: nowrap; }
.rs-empty { background: rgba(251, 146, 60, 0.12); border: 1px solid rgba(251, 146, 60, 0.38); color: #fed7aa; border-radius: 12px; padding: 12px 14px; font-size: 13.5px; }
.rs-empty a { color: #fdba74; font-weight: 700; }
.rs-note { font-size: 12px; color: #a9b7c9; margin: 2px 6px 0; }

/* ── DB 요약 카드 (2026-09-20) — 노선·오늘 스케줄·최근 며칠 운항 ──────────────
   결과 목록 **맨 위**에 얹힌다(features/landing/landing.js sumHtml). 실시간 카드(.rs-card)와
   구분되도록 왼쪽에 시안 띠를 두고 배경을 한 단계 진하게 했다 — 「지금 보이는 것」과
   「DB가 아는 것」은 다른 말이라 한눈에 갈라져야 한다. */
.ld-sum {
  position: relative; border-radius: 12px; padding: 12px 14px 11px 16px;
  background: rgba(77, 238, 234, 0.06); border: 1px solid rgba(77, 238, 234, 0.28);
  display: grid; gap: 7px;
}
.ld-sum::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 3px; background: var(--nx-cyan);
}
.sm-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sm-h b { font-family: var(--font-mono); font-weight: 800; font-size: 17px; color: #fff; letter-spacing: 0.02em; }
.sm-sub { font-size: 12.5px; color: #a9b7c9; }
.sm-route { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 14.5px; color: #e7eefb; }
.sm-route b { font-weight: 700; color: #fff; }
.sm-route i { font-family: var(--font-mono); font-style: normal; font-size: 12.5px; color: var(--nx-cyan); }
.sm-route em { font-style: normal; color: #7c8ba1; padding: 0 2px; }
.sm-src {
  font-size: 11.5px; color: #a9b7c9; border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px; padding: 1px 8px; margin-left: 2px;
}
.sm-kv { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: #c7d2e1; }
.sm-kv b { font-family: var(--font-mono); font-weight: 700; color: #fff; }
.sm-hist { display: grid; gap: 3px; font-size: 12.5px; color: #c7d2e1; }
.sm-day { display: flex; gap: 8px; }
.sm-day i { font-family: var(--font-mono); font-style: normal; color: #8fa0b6; min-width: 38px; }
.sm-more { justify-self: start; font-size: 13px; font-weight: 700; color: var(--nx-cyan); text-decoration: none; }
.sm-more:hover { text-decoration: underline; }
.sm-note { font-size: 11.5px; color: #93a2b6; }
.sm-more-n { color: #8fa0b6; }   /* 「외 N편」 — 화면에 안 실은 레그 수 */
.sm-note b { color: #c7d2e1; }

/* 실시간 지표 알약 */
.ld-stats { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.ld-stat {
  min-width: 150px; padding: 10px 16px; border-radius: 12px; text-align: left;
  background: rgba(7, 13, 30, 0.55); border: 1px solid rgba(255, 255, 255, 0.10); backdrop-filter: blur(6px);
}
.ld-stat b { display: block; font-family: var(--font-mono); font-size: 22px; line-height: 1.1; color: #fff; font-weight: 800; }
.ld-stat b small { font-family: var(--font-sans); font-size: 12px; color: #cbd5e1; font-weight: 600; margin-left: 3px; }
.ld-stat span { display: block; font-size: 11.5px; color: #9fb0c6; margin-top: 4px; }
.ld-credit { position: absolute; right: 12px; bottom: 8px; z-index: 2; font-size: 11px; color: rgba(203, 213, 225, 0.55); }
.ld-credit a { color: inherit; }

/* 캔버스 위 툴팁 — 항적에 마우스를 올렸을 때 */
.ld-tip {
  position: absolute; z-index: 3; pointer-events: none; display: none;
  background: rgba(7, 13, 30, 0.92); color: #e6edf5; border: 1px solid rgba(77, 238, 234, 0.35);
  border-radius: 8px; padding: 6px 9px; font-size: 12px; line-height: 1.35; white-space: nowrap;
}
.ld-tip b { font-family: var(--font-mono); color: var(--nx-cyan); font-size: 13px; }

/* ── 기능 한 줄 ───────────────────────────────────────────────────────────── */
/* ⚠ 아래 세 절(기능·띠·바닥글)의 여백은 «1.5화면» 예산이다 — 1440×900에서 히어로 836px 뒤에
   약 510px만 남는다. 여백을 키우면 곧 2화면이 된다(첫 실측 342+280+95 = 1.8화면 → 줄였다). */
.ld-sec { padding: 22px 0 14px; }
.ld-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.ld-sec-h h2 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.ld-sec-h p { margin: 0; color: var(--text3); font-size: 13px; }
.ld-feat { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
/* 카드는 <a> 다 — 눌러서 서비스 화면으로 간다(2026-09-13 「모두 실제 동작하는 랜딩페이지」) */
.ld-card {
  display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px 12px;
  text-decoration: none; color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ld-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.ld-card:hover h3 { color: var(--accent); }
.ld-card:active { transform: none; }
.ld-card .ico {
  width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; margin-bottom: 8px;
}
.ld-card .ico svg { width: 18px; height: 18px; }
.ld-card h3 { margin: 0 0 3px; font-size: 14px; }
.ld-card p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--text2); }
.ld-card .tag { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700; color: var(--text3); border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; line-height: 17px; }

/* ── 시작·참여 띠 ─────────────────────────────────────────────────────────── */
.ld-cta { padding: 0 0 16px; }
/* ⭐ 2026-09-26 디자인 통일(사용자 지시 「랜딩페이지 하단도 디자인 통일」) — 두 패널을 위 기능 카드(.ld-card)와
   같은 말투로: 흰 표면·같은 테두리·모서리 12px·제목 16px. 종전 「시작」 패널만 남색 그라데이션이라 오른쪽 높이에
   늘어나 빈 남색 덩어리가 됐다(1440 실측). 왼쪽을 좁히고(0.8fr) 단추 줄을 바닥에 붙여 두 패널의 단추가 한 줄에 선다.
   ⚠ 클래스 이름은 그대로 — i18n/landing-en.js가 .ld-panel.start/.feed 로 글자를 바꾼다. */
.ld-cta-in {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 10px; align-items: stretch;
}
.ld-cta-in > .ld-panel { min-width: 0; }   /* 격자 칸의 min-width:auto가 nowrap 명령줄에 끌려 늘어나던 것(모바일 가로 넘침 실측) */
.ld-panel {
  display: flex; flex-direction: column; border-radius: 12px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border);
}
.ld-panel h2 { margin: 0 0 6px; font-size: 16px; letter-spacing: -0.01em; }
.ld-panel p { margin: 0 0 9px; color: var(--text2); font-size: 12.5px; line-height: 1.5; }
.ld-panel > .acts { margin-top: auto; padding-top: 4px; }   /* 단추 줄은 늘 바닥 — 두 패널의 단추가 같은 높이에 선다 */
/* 「시작」은 강조 패널 — 색 덩어리 대신 강조색 옅은 바탕 + 왼쪽 띠로만 구분한다(카드와 같은 흰 표면 계열) */
.ld-panel.start {
  background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  position: relative;
}
/* 왼쪽 띠 — inset 그림자로 그리면 둥근 모서리를 따라 휘어 보였다(09-26 운영 캡처). 위아래를 띄운 막대로 */
.ld-panel.start::before {
  content: ''; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
}
.ld-panel.start h2 { font-size: 17px; }
/* 「시작」은 글이 짧아 바닥 정렬이면 가운데가 비었다(1870 실측 313px 중 내용 ~100px) — 내용을 세로 가운데로 모은다 */
.ld-panel.start { justify-content: center; }
.ld-panel.start > .acts { margin-top: 6px; }
/* 설치 명령 — 눌러서 복사한다(2026-09-13). ⚠ 클립보드는 보안 맥락(https·localhost)에서만 되므로
   실패하면 조용히 두지 말고 「직접 선택해 복사해 주세요」로 알린다. */
/* 피더 신청 상태 한 줄 (2026-09-17) — 로그인·신청 상태에 따라 landing.js 가 채운다.
   ⚠ 값이 없으면 요소가 hidden 이라 자리를 차지하지 않는다(안내가 없을 때 빈 줄이 남지 않게). */
.ld-feedstat { margin: 0 0 9px; padding: 7px 10px; border-radius: 8px; font-size: 12.5px;
  background: var(--surface2, rgba(77,238,234,.08)); border: 1px solid var(--border);
  color: var(--text2); }
.ld-panel.feed p.ld-feedstat { margin: 0 0 9px; }

/* ⚠ 2026-09-26 — 복사 단추를 absolute로 명령 위에 띄우면, 가로 스크롤되는 명령 글자가 단추 밑으로 들어가
   「<내 UUID>복사」처럼 겹쳐 보였다(padding-right는 스크롤 끝에만 생긴다). 단추를 명령 옆 칸으로 뺀다. */
.ld-codewrap {
  display: flex; align-items: center; gap: 6px; margin: 0 0 9px; padding: 0 6px 0 0;
  border-radius: 9px; background: #0b1220; border: 1px solid rgba(255, 255, 255, 0.08);   /* 다크 테마 표면(#111a2b)에 묻히지 않게 */
}
.ld-code {
  display: block; flex: 1 1 auto; min-width: 0; margin: 0; padding: 8px 11px; overflow-x: auto;
  background: transparent; color: #cde9ff; font: 12px/1.5 var(--font-mono); white-space: nowrap;
}
.ld-code i { color: #7ff5f2; font-style: normal; }
.ld-copy {
  flex: 0 0 auto; height: 24px; padding: 0 10px; border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.10); color: #e6edf5;
  font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.ld-copy:hover { background: rgba(255, 255, 255, 0.2); }
.ld-copy.ok { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.ld-panel .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ld-panel .acts .ld-btn { height: 36px; padding: 0 14px; font-size: 13px; }
/* 패널 안 단추는 두 가지로만 — 주 동작은 강조색 채움, 나머지는 테두리(종전 시안·파랑·테두리 세 색이 한 줄에 섞였다).
   ⚠ 히어로·머리 바의 .pri(시안)·.ghost(반투명 흰)는 어두운 바탕용이라 여기서만 덮는다. */
.ld-panel .ld-btn.pri { background: var(--accent); color: var(--on-accent); }
.ld-panel .ld-btn.pri:hover { background: var(--accent); filter: brightness(1.08); }
.ld-panel .ld-btn.ghost,
.ld-panel .ld-btn.acc { background: var(--surface); color: var(--text); border-color: var(--border); filter: none; }
.ld-panel .ld-btn.ghost:hover,
.ld-panel .ld-btn.acc:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }
.ld-panel .ld-btn.line:hover { border-color: var(--accent); color: var(--accent); }

/* ── 바닥글 ───────────────────────────────────────────────────────────────── */
.ld-foot { border-top: 1px solid var(--border); padding: 10px 0 14px; color: var(--text3); font-size: 12px; }
.ld-foot .row { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.ld-foot .row + .row { margin-top: 4px; }
.ld-foot a { color: var(--text2); text-decoration: none; }
.ld-foot a:hover { text-decoration: underline; }
.ld-foot .warn { color: var(--text2); font-weight: 600; }

/* ── 아래 절 색 — 히어로와 한 톤 (2026-09-26 사용자 지시 「상단 검정색과 하단 흰색이 너무 대비된다 — 더 유사하지만 세련되게」) ──
   ⭐ 머리말의 「아래 절만 라이트/다크를 따른다」를 이 지시로 바꿨다 — 아래 절은 테마와 무관하게 **히어로보다 한 단계 밝은 남색**이다.
   층은 명도 세 단계로만 준다: 히어로 #070d1e → 절 바탕 #0a1428 → 카드 #0f1b33(테두리는 옅은 청회색). 강조는 히어로와 같은 시안.
   토큰을 이 세 절에만 다시 정의한다 — :root를 바꾸면 히어로 안의 검색 결과·브리핑 카드까지 딸려 바뀐다.
   ⚠ release-note.css(소식 카드 #rnCards)는 제 토큰 이름을 쓰고 기본값이 흰색이라 그 이름도 여기서 함께 준다. */
.ld-sec, .ld-cta, .ld-foot {
  --bg: #0a1428; --surface: #0f1b33; --surface-2: #15233f; --border: rgba(148, 170, 200, 0.14);
  --text: #e6edf5; --text2: #a3b2c6; --text3: #7b8ba1;
  --accent: var(--nx-cyan); --accent-soft: rgba(77, 238, 234, 0.10); --on-accent: var(--nx-navy);
  --shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.6);
  --bg-surface-elevated: var(--surface); --border-subtle: var(--border); --border-medium: rgba(148, 170, 200, 0.24);
  --text-secondary: var(--text2); --text-tertiary: var(--text3); --bg-sunken: #0a1428;
  background: var(--bg); color: var(--text);
}
body { background: #0a1428; }   /* 바닥글 아래 여백·넘겨 당김(overscroll)에서 흰 바탕이 비치지 않게 */
/* 히어로 바로 아래 첫 절 — 히어로 바닥색에서 절 바탕으로 이어 경계선이 생기지 않게 */
.ld-hero + .ld-sec, .ld-hero + .ld-sec[hidden] + .ld-sec { background: linear-gradient(180deg, var(--nx-navy) 0, var(--bg) 140px); }
.ld-card, .ld-panel.feed { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); }   /* 카드 윗변에 아주 옅은 빛 — 평평한 사각 대신 표면으로 읽힌다 */
.ld-card:hover { box-shadow: var(--shadow), 0 0 0 1px rgba(77, 238, 234, 0.18); }
.ld-code { color: #cde9ff; }
.ld-codewrap { background: #070d1e; border-color: rgba(148, 170, 200, 0.12); }
.ld-panel.start { background: linear-gradient(135deg, rgba(77, 238, 234, 0.09), var(--surface) 65%); }
.ld-panel .ld-btn.pri:hover { background: #7ff5f2; filter: none; }
.ld-feedstat { background: rgba(77, 238, 234, 0.06); border-color: rgba(77, 238, 234, 0.18); color: var(--text2); }
.ld-foot { border-top-color: rgba(148, 170, 200, 0.10); }

/* ── 좁은 화면 ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ld-feat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  /* 2026-10-04: 메뉴를 전체 숨기면 모바일에서 커뮤니티로 갈 길이 없었다(#cm 절은 글이 없으면 숨는다 — 유일한
     진입로가 사라졌다는 신고). 위 nav는 그대로 숨기고, 「서비스 열기」 다음에 「게시판」 단추를 둔다
     (actions 안의 .ld-nav-cm-m — 같은 작은 flex 줄의 다음 칸이라 순서가 항상 그대로 지켜진다).
     2026-10-04(2차, 사용자 지시): 자리를 「서비스 열기」 다음으로 · 글자를 짧은 「게시판」으로. */
  .ld-nav { display: none; }
  .ld-nav-cm-m {
    display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
    border-radius: 10px; background: rgba(255, 255, 255, 0.08); font-size: 13px;
    color: #c7d2e1; text-decoration: none;
  }
  /* ⚠ 2026-10-04 실측(CDP로 뷰포트 고정, 360~760px 확인): 이 줄만으로는 넘치지 않지만, 혹시 모를 긴 번역
     문구·확대 글꼴 대비 안전망으로 넘치면 다음 줄로 내려가게 한다(기본은 한 줄 그대로). */
  .ld-hdr-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .ld-hdr .wrap { gap: 12px; }
  .ld-brand b { font-size: 24px; }
  .ld-hdr .ld-btn { height: 36px; padding: 0 12px; font-size: 13px; }
  .ld-hero-in { padding: 28px 0 44px; }
  .ld-sub { font-size: 14.5px; }
  .ld-tabs button { padding: 7px 9px; font-size: 13px; }
  .ld-row { flex-direction: column; }
  .ld-go { height: 46px; }
  /* ⚠ flex: none — 세로 배치에서는 .ld-in 의 flex:1(basis 0)이 height 를 이겨 입력칸이 20px로 눌렸다(운영 390px 실측, 2026-09-20) */
  .ld-in { flex: none; width: 100%; height: 46px; font-size: 15px; }
  .ld-stats { gap: 8px; }
  .ld-stat { min-width: calc(50% - 4px); padding: 9px 12px; }
  .ld-stat b { font-size: 19px; }
  /* ⚠ static으로 두면 .ld-hero(flex row)의 옆 칸이 되어 검색창 오른쪽에 붙는다(실측) — absolute 유지, 가운데 */
  .ld-credit { left: 0; right: 0; bottom: 6px; text-align: center; padding: 0 12px; }
  .ld-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ld-cta-in { grid-template-columns: 1fr; }
  .rs-card { grid-template-columns: 1fr; }
  .rs-link { grid-column: auto; grid-row: auto; }
  .sm-kv { gap: 10px; font-size: 12.5px; }      /* 폰에서 두 줄로 접히게 — 가로 스크롤을 만들지 않는다 */
  .sm-route { font-size: 13.5px; }
}
@media (max-width: 420px) {
  .ld-hdr .ld-btn.ghost { display: none; }   /* 「로그인」은 서비스 화면 안에도 있다 — 좁은 폰에서는 「서비스 열기」 하나만 */
}
@media (prefers-reduced-motion: reduce) {
  .ld-kicker i { animation: none; }
  .ld-card { transition: none; }
  html { scroll-behavior: auto; }
}