/* 메인 페이지 — 사이트와 같은 밝은 톤 위에, 제품마다 화면 전체를 채우는 장면이 이어진다(hm-).
   사이트 공용 값(site.css 의 글꼴·색·버튼·소식 카드·문의 띠)은 그대로 쓰고, 이 파일은 절 배치만 정한다.
   첫 화면(기체 세 대) → 장면 01~04(사진·영상 전체, 번호·종류·용도, 이름·한 문장, 판독값) → 전부 직접 만듭니다 → 현장 기록 → 소식.
   장면 안의 글은 그 장면이 화면에 들어올 때 한꺼번에 뜬다(assets/js/home.js, 눈높이 기준이 아니다). */
.hm { --hm-line: rgba(17,24,39,.1); --hm-live: var(--link); --hm-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.hm :where(h1, h2, h3) { margin: 0; letter-spacing: -0.02em; line-height: 1.15; font-weight: 700; }
.hm :where(p, ul, ol, li, dl, dd, dt, figure) { margin: 0; padding: 0; list-style: none; }
.hm :where(p) { text-wrap: pretty; }
.hm-line { display: block; }   /* 문장마다 줄바꿈 */
.hm :where(img, video) { display: block; max-width: 100%; height: auto; }
.hm-idx, .hm-log time, .hm-rail i { font-family: var(--hm-mono); font-size: 12px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.hm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* 장면: 화면 전체 사진·영상 위에 번호·종류·용도(위), 이름·한 문장·단추(아래 왼쪽), 판독값(아래 오른쪽). 글은 흰색 */
.hm-ch { position: relative; min-height: 100vh; min-height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: stretch; overflow: hidden; isolation: isolate; color: #fff; background: #000; }
.hm-ch-media { position: absolute; inset: 0; z-index: -1; }
.hm-ch-media img, .hm-ch-media video { width: 100%; height: 100%; object-fit: cover; }
.hm-ch.is-t .hm-ch-media img { object-position: center 35%; }
.hm-ch.is-q .hm-ch-media img { object-position: 60% center; }
/* DRTView 장면: Windows 판 메인 화면을 화면 전체에. 판독값은 오른쪽 대신 글 아래에 두어 앱의 오른쪽 계기판이 그대로 보이게 한다 */
.hm-ch.is-drtview .hm-ch-media img { object-position: center; }
.hm-ch.is-drtview .hm-ch-media::after { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.15) 55%, rgba(0,0,0,.88) 100%); }
.hm-ch.is-drtview .hm-ch-foot { grid-template-columns: 1fr; }
.hm-ch.is-drtview .hm-readout { justify-self: start; max-width: 560px; margin-top: 8px; padding-right: 0; }
.hm-ch.is-drtview .hm-ch-text .hm-actions { order: 3; }
.hm-ch-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.06) 30%, rgba(0,0,0,.1) 55%, rgba(0,0,0,.82) 100%); }
.hm-ch-hud { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; min-height: 100vh; min-height: 100svh; padding-top: calc(var(--header-space) + 28px); padding-bottom: 56px; }
.hm-ch-hud::before, .hm-ch-hud::after { content: ""; position: absolute; width: 26px; height: 26px; border: 1px solid rgba(255,255,255,.55); pointer-events: none; }
.hm-ch-hud::before { left: var(--gutter); top: calc(var(--header-space) + 28px); border-right: 0; border-bottom: 0; }
.hm-ch-hud::after { right: var(--gutter); bottom: 56px; border-left: 0; border-top: 0; }
.hm-ch-head { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding: 5px 0 0 40px; font-size: 14px; color: rgba(255,255,255,.78); }
.hm-idx { font-size: 14px; color: #8fb4ff; }
.hm-kind { font-weight: 600; color: #fff; }
.hm-uses { color: rgba(255,255,255,.6); }
.hm-ch-foot { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; }
.hm-ch-text h2 { font-size: clamp(48px, min(8.5vw, 13vh), 120px); line-height: .98; letter-spacing: -0.045em; }
.hm-ch-text p { margin-top: 16px; max-width: 760px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.84); }
.hm-ch .btn-ghost { border-color: rgba(255,255,255,.6); }
.hm-readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; max-width: 470px; justify-self: end; padding: 16px 40px 0 0; border-top: 1px solid rgba(255,255,255,.4); }
.hm-readout dd b { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.hm-readout dd small { margin-left: 3px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.75); }
.hm-readout dt { margin-top: 8px; font-size: 13px; color: rgba(255,255,255,.6); }
/* 장면 글 등장: 장면이 화면에 들어오면(home.js 가 is-in) 위 → 이름 → 문장 → 단추 → 판독값 차례로. 움직임 줄이기면 바로 보인다 */
html.motion .hm-ch-head, html.motion .hm-ch-text > *, html.motion .hm-readout > div { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
html.motion .hm-ch.is-in .hm-ch-head, html.motion .hm-ch.is-in .hm-ch-text > *, html.motion .hm-ch.is-in .hm-readout > div { opacity: 1; transform: none; }
html.motion .hm-ch.is-in .hm-ch-text > :nth-child(2) { transition-delay: .1s; }
html.motion .hm-ch.is-in .hm-ch-text > :nth-child(3) { transition-delay: .2s; }
html.motion .hm-ch.is-in .hm-readout > :nth-child(1) { transition-delay: .25s; }
html.motion .hm-ch.is-in .hm-readout > :nth-child(2) { transition-delay: .33s; }
html.motion .hm-ch.is-in .hm-readout > :nth-child(3) { transition-delay: .41s; }

/* 장면 안 차례(레일이 없는 폭에서만): 네 제품 이름, 현재 것은 진하게 */
.hm-ch-nav { display: none; width: 100%; gap: 14px; margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.55); }
.hm-ch-nav a { display: inline-flex; gap: 5px; align-items: baseline; white-space: nowrap; }
.hm-ch-nav a i { font-style: normal; font-family: var(--hm-mono); font-size: 11px; letter-spacing: .06em; }
.hm-ch-nav a.is-active { color: #fff; font-weight: 600; }

/* 직접 설계하고 개발하는 다섯 가지: 왼쪽 제목·설명·조종기 사진, 오른쪽 번호 목록 */
.hm-sys { padding: 112px 0; background: var(--panel); }
.hm-sys-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.hm-sys-text h2 { font-size: clamp(32px, 4.2vw, 52px); letter-spacing: -0.03em; }
.hm-sys-text p { margin-top: 18px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.hm-sys-text figure { margin-top: 32px; overflow: hidden; border-radius: 16px; background: #101418; }
.hm-sys-text figure img { width: 100%; height: auto; }
.hm-sys-list li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 26px 0; border-top: 1px solid var(--line); }
.hm-sys-list li:last-child { border-bottom: 1px solid var(--line); }
.hm-sys-list i { font-style: normal; font-family: var(--hm-mono); font-size: 13px; letter-spacing: .08em; color: var(--hm-live); padding-top: 6px; }
.hm-sys-list b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.hm-sys-list span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.hm-sys-list .hm-sys-more { grid-template-columns: 1fr; padding: 22px 0 0; border-bottom: 0 !important; }

/* 현장 기록: 현장 사진 띠(흐른다) + 최근 연혁 */
.hm-record { padding: 104px 0 0; background: var(--bg); }
.hm-record-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: end; margin-bottom: 40px; }
.hm-record-head h2 { font-size: clamp(32px, 4.5vw, 56px); letter-spacing: -0.03em; }
.hm-record-head p { font-size: 17px; color: var(--ink-2); }
.hm-strip { overflow: hidden; }
.hm-strip ul { display: flex; gap: 8px; width: max-content; }
.hm-strip li { width: 240px; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: #e5e7eb; }
.hm-strip img { width: 100%; height: 100%; object-fit: cover; }
html.motion .hm-strip ul { animation: hm-strip 70s linear infinite; }
@keyframes hm-strip { to { transform: translateX(-50%); } }
.hm-log { margin-top: 48px; padding-bottom: 104px; }
.hm-log li { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; }
.hm-log li:last-child { border-bottom: 1px solid var(--line); }
.hm-log time { color: var(--hm-live); }
.hm-log-head { grid-template-columns: 1fr auto !important; border-top: 0 !important; font-size: 14px !important; color: var(--ink-3); }

/* 소식 */
.hm-news { padding: 104px 0 24px; background: var(--panel); }
.hm-news-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.hm-news-head h2 { font-size: clamp(32px, 4.5vw, 56px); letter-spacing: -0.03em; }

/* 오른쪽 레일: 현재 장면 번호. 바탕이 밝든 어둡든 보이게 색을 반전한다. 첫 화면 위에서는 숨긴다 */
.hm-rail { position: fixed; right: 20px; top: 50%; z-index: 60; display: flex; flex-direction: column; gap: 12px; transform: translateY(-50%); mix-blend-mode: difference; color: #fff; }
.hm-rail a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; opacity: .55; font-size: 12px; transition: opacity .2s; }
.hm-rail a span { opacity: 0; transition: opacity .2s; white-space: nowrap; }
.hm-rail a i { font-style: normal; width: 22px; text-align: right; }
.hm-rail a.is-active, .hm-rail a:hover { opacity: 1; }
.hm-rail a.is-active span, .hm-rail a:hover span { opacity: 1; }
.hm-rail a::after { content: ""; width: 10px; height: 1px; background: currentColor; }
.hm-rail a.is-active::after { width: 20px; }

@media (max-width: 1100px) { .hm-rail { display: none; } .hm-ch-nav { display: flex; flex-wrap: wrap; } }
@media (max-width: 900px) {
  .hm-ch-foot { grid-template-columns: 1fr; gap: 28px; }
  .hm-readout { justify-self: start; max-width: none; padding-right: 0; }
  .hm-sys-grid { grid-template-columns: 1fr; gap: 36px; }
  .hm-record-head { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 768px) {
  .hm-ch-hud { padding-bottom: 44px; }
  .hm-ch-hud::after { bottom: 44px; }
  .hm-ch-head { padding-left: 36px; font-size: 13px; }
  .hm-ch-text p { font-size: 16px; }
  .hm-readout { gap: 10px; }
  .hm-readout dd b { font-size: 26px; }
  .hm-readout dt { font-size: 12px; }
  .hm-sys, .hm-news, .hm-record { padding-top: 64px; }
  .hm-sys { padding-bottom: 64px; }
  .hm-log { padding-bottom: 64px; }
  .hm-log li { grid-template-columns: 1fr; gap: 2px; font-size: 15px; }
  .hm-strip li { width: 160px; }
}
@media (max-width: 560px) {
  .hm-readout dd b { font-size: 24px; }
  .hm-readout dd small { font-size: 12px; }
  .hm-sys-list li { padding: 18px 0; grid-template-columns: 40px 1fr; }
  .hm-sys-list b { font-size: 19px; }
}

/* 장면 넘기기. 마우스·트랙패드(hover 가능한 장치)는 home.js 가 휠 한 번에 한 장면씩 부드럽게 옮긴다.
   터치 장치는 브라우저 기본 스냅(가까우면 맞춤). 두 경우 모두 장면 네 개까지만이고, 직접 설계 절부터는 보통 스크롤이다 */
@media (hover: none) {
  html:has(body.page-home) { scroll-snap-type: y proximity; }   /* 장면 네 개만 스냅 지점. 그 뒤(직접 설계부터)는 보통 스크롤 */
}
@media (min-width: 901px) { .hm-ch, .hm-ch-hud { height: 100vh; height: 100svh; min-height: 0; } }