/* 소개 화면 전용. body.landing 안에서만 걸리게 해 업무·인증 화면과 섞이지 않는다.
   간격·타입은 shell.css 토큰만 쓴다. 외부 글꼴·CDN을 부르지 않는다.

   조형 규칙은 선택된 로고에서 가져왔다 — 굵은 상판 하나와 가는 케이블 여럿.
   이 화면의 구획선은 그 두 가지뿐이다:
     --rule-heavy  2px 검정   구역을 나눈다(상판)
     --rule-fine   1px 옅은 선 같은 구역 안의 줄을 나눈다(케이블)
   승인된 로고는 검정 #000000과 흰색 #FFFFFF만 쓰므로(BRAND_GUIDE_KO "단색·여백")
   이 화면에서는 shell의 네이비 강조색을 검정으로 바꾼다. 값을 새로 짓지 않고
   --accent 토큰 하나만 다시 정해서 버튼·링크·포커스 표시가 함께 따라오게 한다. */

body.landing {
  --rule-heavy: var(--label);
  --rule-fine: var(--shade);
  padding: 0 0 var(--s7);
}
/* 로고와 본문이 같은 폭 안에서 시작하도록 업무 화면보다 좁게 잡는다. */
.landing .page { max-width: 60rem; padding: 0 var(--s5); }

/* ── 상단 막대 ────────────────────────────────────────────────
   로고 이미지 크기는 shell.css가 .selected-wordmark 한 곳에서 정한다. */
.landing .intro-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule-fine);
}
.landing .intro-bar .brand { display: inline-flex; align-items: center; }
.landing .intro-bar .brand:hover { text-decoration: none; }
.landing .intro-bar .right { display: inline-flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/* 검정 한 가지만 쓰므로 버튼의 눌림 전후를 밝기로 구분할 수 없다.
   대신 흑백을 뒤집는다 — 이 화면에서 유일하게 움직이는 부분이다. */
.landing .btn:hover { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.landing .btn-secondary:hover { background: var(--accent); color: var(--surface); border-color: var(--accent); }

/* 로그인·가입 화면도 body.landing 을 쓰므로 위 규칙과 아래 좁은 화면 규칙은 그대로 둔다. */
@media (max-width: 48rem) { .landing .page { padding: 0 var(--s4); } }
@media (max-width: 24rem) { .landing .page { padding: 0 var(--s3); } }

/* ══ 여기부터 소개 화면(body.landing-home)만 ══════════════════════════════════
   값은 현행 app_shell.css(2026-10 F안)와 DESIGN.md를 따른다: 종이빛 바탕, 흰 24px 카드와 옅은 그림자,
   맨 위 검정 강조 카드 하나(26px), 알약 모양 단추·칩, 30px 안팎 제목, 숫자는 고정폭, 3px 파란 포커스 링.
   외부 글꼴·CDN 없음. 옛 브랜드 시안의 남색·검정 머리띠·선화 스케치는 쓰지 않는다.
   shell.css에는 어두운 화면이 없어서 소개 화면만 prefers-color-scheme 을 따로 맡는다. */
body.landing-home {
  --bg: #f4f4f1; --card: #ffffff; --well: #ecebe6; --fill: #f1f0ec; --sep: #e6e5df;
  --label: #111111; --label2: #55544f; --ink: #171717; --on-ink: #ffffff; --blue: #1f5fbf;
  --shadow: 0 1px 2px rgba(17,17,17,.04), 0 14px 32px -20px rgba(17,17,17,.22);
  --shadow-up: 0 2px 4px rgba(17,17,17,.05), 0 22px 40px -22px rgba(17,17,17,.32);
  --font: 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
  /* shell.css 부품(.btn, .skip-link, 본문)이 같은 값을 읽게 이름을 이어 준다 */
  --surface: var(--card); --surface-sub: var(--well); --line: var(--sep); --line-strong: var(--outline);
  --text: var(--label); --text-muted: var(--label2); --pill: var(--well);
  --accent: var(--ink); --accent-dark: #000000;
  font-family: var(--font); letter-spacing: -.01em; padding: 0 0 var(--s7);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) body.landing-home {
    --bg: #121211; --card: #1e1e1c; --well: #181816; --fill: #2a2a27; --sep: #33332f; --line-strong: var(--outline);
    --label: #f4f4f1; --label2: #b5b4ad; --ink: #f4f4f1; --on-ink: #111111; --blue: #6aa3ff;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 32px -20px rgba(0,0,0,.7);
    --shadow-up: 0 2px 4px rgba(0,0,0,.35), 0 22px 40px -22px rgba(0,0,0,.8);
    --accent-dark: #ffffff; color-scheme: dark;
  }
  html:not([data-theme="light"]) body.landing-home .selected-wordmark { filter: invert(1); }
  html:not([data-theme="light"]) body.landing-home { background-image: none; }
}
html[data-theme="dark"] body.landing-home {
  --bg: #121211; --card: #1e1e1c; --well: #181816; --fill: #2a2a27; --sep: #33332f; --line-strong: var(--outline);
  --label: #f4f4f1; --label2: #b5b4ad; --ink: #f4f4f1; --on-ink: #111111; --blue: #6aa3ff;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 32px -20px rgba(0,0,0,.7);
  --shadow-up: 0 2px 4px rgba(0,0,0,.35), 0 22px 40px -22px rgba(0,0,0,.8);
  --accent-dark: #ffffff; color-scheme: dark; background-image: none;
}
html[data-theme="dark"] body.landing-home .selected-wordmark { filter: invert(1); }

.landing-home :is(a, button, summary):focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.landing-home .btn {
  min-height: 44px; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  background: var(--ink); color: var(--on-ink); border-color: var(--ink); text-decoration: none;
}
.landing-home .btn:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); opacity: .86; }
.landing-home .btn-secondary { background: var(--card); color: var(--label); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.landing-home .btn-secondary:hover { background: var(--fill); color: var(--label); border-color: var(--line-strong); opacity: 1; }
.landing-home .btn-lg { min-height: 48px; padding: 12px 24px; font-size: 15px; }

/* ── 상단 막대: 큰 로고 한 곳(히어로 안에 로고를 되풀이하지 않는다) ── */
.landing-home .intro-bar { border-bottom: 0; display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding: var(--s4) 0 var(--s2); }
.landing-home .intro-bar .brand { display: inline-flex; align-items: center; margin-right: auto; }
.landing-home .intro-bar .brand:hover { text-decoration: none; }
.landing-home .intro-bar .brand img.selected-wordmark { width: 18rem; height: auto; }
.landing-home .intro-nav { display: flex; gap: var(--s1); }
.landing-home .intro-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4);
  color: var(--label2); border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none;
}
.landing-home .intro-nav a:hover { background: var(--card); color: var(--label); box-shadow: var(--shadow); }
.landing-home .intro-bar .right { display: inline-flex; align-items: center; gap: var(--s3); }

/* ── 히어로: 이 화면의 검정 강조 카드 하나, 두 줄 표어 ── */
.landing-home .hero {
  background: var(--ink); color: var(--on-ink); border-radius: 26px; box-shadow: var(--shadow-up);
  padding: var(--s6) var(--s6) var(--s5); margin-top: var(--s3);
}
.landing-home .hero h1 {
  margin: 0; font-size: clamp(2rem, 4.6vw, 2.75rem); line-height: 1.18; font-weight: 700;
  letter-spacing: -.03em; word-break: keep-all; color: inherit; text-wrap: balance;
}
.landing-home .hero h1 .soft {
  display: block; margin-top: var(--s2); font-size: clamp(1.25rem, 2.8vw, 1.625rem); line-height: 1.3;
  font-weight: 500; letter-spacing: -.02em; opacity: .9;
}
.landing-home .hero .lede { margin: var(--s4) 0 0; max-width: 40rem; font-size: 15px; line-height: 1.6; color: inherit; word-break: keep-all; }
.landing-home .cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.landing-home .hero .btn { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.landing-home .hero .btn-ghost, .landing-home .hero .btn-ghost:hover { background: transparent; color: var(--on-ink); border-color: var(--on-ink); box-shadow: none; }
.landing-home .hero :is(a):focus-visible { outline-color: var(--on-ink); }
.landing-home .jump { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: var(--s5) 0 0; padding: 0; }
.landing-home .jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); font-size: 14px; font-weight: 500;
  border-radius: 999px; background: color-mix(in srgb, var(--on-ink) 14%, transparent); color: var(--on-ink); text-decoration: none;
}
.landing-home .jump a:hover { background: color-mix(in srgb, var(--on-ink) 24%, transparent); }

/* ── 구역 공통 ── */
.landing-home :is(.features, .flow, .pricing, .start) { margin-top: var(--s7); }
.landing-home :is(.features, .flow, .pricing, .start) > h2 {
  font-size: clamp(1.5rem, 3vw, 1.875rem); line-height: 1.25; margin: 0 0 var(--s4); letter-spacing: -.025em; font-weight: 700; color: var(--label);
}

/* ── 업무 도구: 이점 두 문장 + 실제 화면(합성 현장 '모창 전기실') ── */
.landing-home .rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.landing-home .rows li {
  display: flex; flex-direction: column; gap: var(--s4); background: var(--card); border-radius: 24px;
  box-shadow: var(--shadow); padding: 18px 20px 20px; scroll-margin-top: var(--s5);
}
.landing-home .rows h3 { font-size: 17px; line-height: 1.3; margin: 0 0 var(--s2); color: var(--label); font-weight: 700; }
.landing-home .rows .say p { font-size: 15px; line-height: 1.55; color: var(--label2); margin: 0; word-break: keep-all; }
.landing-home .shot { margin: 0; width: 100%; flex: 1; display: flex; flex-direction: column; }
/* 같은 줄 카드는 높이를 맞추고, 설명 글은 카드 아래에 붙인다(그림은 늘리지 않는다). */
.landing-home .rows .shot figcaption { margin-top: auto; padding-top: var(--s2); }
@media(min-width:48.0625rem){.landing-home #docs .preview{height:300px}}
/* 예시 결과에서 눈여겨볼 숫자. 그림에 나온 값만 쓴다. */
.landing-home .result-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 10px; margin: var(--s4) 0 0; }
.landing-home .result-facts > div { background: var(--well); border-radius: 16px; padding: 14px 16px; }
.landing-home .result-facts dt { font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--label); font-variant-numeric: tabular-nums; }
.landing-home .result-facts dd { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--label2); word-break: keep-all; }
/* 화면 그림은 핵심 부분만 보이는 짧은 미리보기다. 쪽 위치는 그림 높이 대비 비율(가로 폭 %)이라 폭이 바뀌어도 같은 곳을 보여 준다. */
.landing-home .preview { height: 260px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--well); }
.landing-home .preview img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; }
.landing-home .shot figcaption { margin-top: var(--s2); font-size: 13px; line-height: 1.5; color: var(--label2); }

/* ── 쓰는 순서 3단계: 실제 코드의 흐름(가입 → 처음 등록 → 업무 화면 입력 → 목록·결과·서류) ── */
.landing-home .flow .lede { margin: calc(var(--s2) * -1) 0 var(--s4); max-width: 40rem; color: var(--label2); word-break: keep-all; }
.landing-home .steps {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--card); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden;
}
.landing-home .steps li { padding: 20px 24px 24px; border-left: 1px solid var(--sep); }
.landing-home .steps li:first-child { border-left: 0; }
.landing-home .steps .n { display: block; font-family: Consolas, D2Coding, 'Courier New', monospace; font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 700; line-height: 1; color: var(--label); margin-bottom: var(--s3); }
.landing-home .steps strong { display: block; font-size: 17px; margin-bottom: var(--s2); color: var(--label); }
.landing-home .steps p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--label2); word-break: keep-all; }

/* ── 이용 요금 ── */
.landing-home .trial { background: var(--well); border-radius: 20px; padding: 18px 20px; margin-bottom: 14px; }
.landing-home .trial h3 { font-size: 17px; margin: 0 0 var(--s2); color: var(--label); }
.landing-home .trial p { margin: 0; max-width: 40rem; word-break: keep-all; }
.landing-home .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.landing-home .plan { background: var(--card); border-radius: 24px; box-shadow: var(--shadow); padding: 20px 24px 22px; }
.landing-home .plan h3 { font-size: 18px; margin: 0 0 var(--s1); color: var(--label); }
.landing-home .plan .basis { color: var(--label2); font-size: 13px; margin: 0 0 var(--s4); }
.landing-home .plan dl { margin: 0; border-top: 2px solid var(--ink); }
.landing-home .plan dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--sep); }
.landing-home .plan dt { font-weight: 700; }
.landing-home .plan dd { margin: 0; }
.landing-home .eb-price { font-family: Consolas, D2Coding, 'Courier New', monospace; font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 700; }
.landing-home .plan .note { margin: var(--s4) 0 0; font-size: 13px; color: var(--label2); }

/* ── 시작하기 ── */
.landing-home .start { background: var(--card); border-radius: 24px; box-shadow: var(--shadow); padding: var(--s6); }
.landing-home .start p { margin: 0 0 var(--s2); max-width: 34rem; word-break: keep-all; }
/* 시작 행동은 가입(또는 가입 안내)이 주, 로그인은 보조 */
.landing-home .start .btn-ghost, .landing-home .start .btn-ghost:hover { background: var(--card); color: var(--label); border-color: var(--line-strong); opacity: 1; }

/* ── 바닥 ── */
.landing-home .foot { margin-top: var(--s7); padding-top: var(--s4); border-top: 1px solid var(--sep); color: var(--label2); font-size: 13px; }
.landing-home .foot p { margin: 0 0 var(--s2); }
.landing-home .foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.landing-home .foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); margin-left: calc(var(--s3) * -1); color: var(--label2); text-decoration: underline; }
.landing-home .skip-link { min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 48rem) {
  .landing-home .hero { padding: var(--s5) var(--s5) var(--s5); }
  .landing-home .steps { grid-template-columns: minmax(0, 1fr); }
  .landing-home .steps li { border-left: 0; border-top: 1px solid var(--sep); }
  .landing-home .steps li:first-child { border-top: 0; }
  .landing-home .plans { grid-template-columns: minmax(0, 1fr); }
  .landing-home .plan { padding: var(--s5); }
}
@media (max-width: 40rem) {
  .landing-home .intro-nav { display: none; }
  .landing-home .intro-bar .brand img.selected-wordmark { width: 13.5rem; }
  .landing-home .rows { grid-template-columns: minmax(0, 1fr); }
  .landing-home .preview { height: 240px; }
  .landing-home :is(.features, .flow, .pricing, .start) { margin-top: var(--s6); }
  .landing-home .start { padding: var(--s5); }
}
@media (prefers-reduced-motion: reduce) {
  .landing-home * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 오픈 전 배너와 비활성 표시. 기존 랜딩의 그림·조형은 유지한다. */
.landing-home .launch-banner { margin: var(--s3) 0 0; padding: var(--s3) var(--s4); border-radius: 12px; background: var(--well); color: var(--label); font-size: 14px; font-weight: 600; text-align: center; word-break: keep-all; }
.landing-home .unavailable { cursor: default; text-decoration: none; }
.landing-home .hero-purpose { color: inherit; font-size: 14px; line-height: 1.6; }

.landing-home :is(.faq, .information) { margin-top: var(--s6); line-height: 1.7; }
.landing-home .faq h2 { font-size: 24px; }
.landing-home .faq details { border-bottom: 1px solid var(--sep); padding: var(--s3) 0; }
.landing-home .faq summary { cursor: pointer; min-height: 44px; padding: var(--s2) 0; font-weight: 600; }
.landing-home .faq p { max-width: 44rem; word-break: keep-all; }
.landing-home .information { max-width: 44rem; margin-inline: auto; overflow-wrap: anywhere; }
.landing-home .information h1 { font-size: 28px; }
.landing-home .information h2 { font-size: 20px; }
.landing-home .information nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.landing-home .information nav a { min-height: 44px; display: inline-flex; align-items: center; }

/* 결과가 보이는 구간만 미리 본다. 원본 예시 화면은 바꾸지 않는다. */
.landing-home #daily .preview { height: auto; aspect-ratio: 780 / 650; }
.landing-home #daily .preview img { margin-top: -24%; }
.landing-home #outage .preview { height: auto; aspect-ratio: 716 / 400; }
.landing-home #monitor { grid-column: 1 / -1; }
.landing-home :is(#monitor, #diag) .preview { height: auto; padding: 18px 0; background: var(--well); }
.landing-home #monitor .preview img { max-width: 440px; margin-inline: auto; }
.landing-home #diag .preview { padding: 0 0 12px; }
.landing-home #diag .preview img { margin-top: 0; }
/* 흑백 결과 그림도 주변 카드와 같은 명암을 따른다. */
html[data-theme="dark"] .landing-home .preview img { filter: invert(.88) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .landing-home .preview img { filter: invert(.88) hue-rotate(180deg); }
}

.landing-home .scope { background: var(--card); padding: var(--s5); border-radius: 24px; }
.landing-home .scope p { max-width: 44rem; word-break: keep-all; }

@media(max-width:48rem){.landing-home .rows li{padding:16px;gap:12px}.landing-home .rows .preview{max-height:190px}.landing-home :is(.features,.flow,.start){margin-top:24px}}

@media(max-width:40rem){.landing-home #monitor .preview{padding:0;border:0;background:transparent}.landing-home #monitor .preview img{max-width:none;width:100%}}
@media(max-width:40rem){.landing-home #docs .preview{height:320px;max-height:none;border-radius:12px}.landing-home #docs .preview img{width:900px;max-width:none;height:auto}.landing-home #docs .shot{min-width:0;overflow:hidden}}
.landing-home .intro-bar .login-link { min-height: 44px; padding: 0 18px; }