/* home-dark: 입자 첫 화면과 이어지는 어두운 톤. automation·home-next·home-mix·home-flow 위에 덮는다(이 쪽 전용).
   원칙: 바탕·글자 색 이름(--paper·--ink…)을 어둡게 다시 정하고, 손님 화면·전표·채팅처럼 "실물 물건"만 원래 종이 색으로 밝게 남긴다. */
:root{--wood:#050608;--paper:#0a0c10;--paper2:#0e1116;--sheet:#141820;--ink:#eef1f6;--ink2:#9aa3b4;--rule:rgba(238,241,246,.18);--hair:rgba(238,241,246,.1);--seal:#92b3ed;--serif:Pretendard,"Malgun Gothic",sans-serif;--text2:#b7bdca}
html{background:var(--paper)}
body.dark{color-scheme:dark}

/* 실물 물건: 원래 종이 색 그대로(빨간 도장·밑줄 포함) — 어두운 바탕 위에 놓인 물건처럼 */
.dark :is(.fh-card,.fh-fly,.slip,.fly-sheet,.chat-card){--paper:#ECE7DD;--paper2:#E2DCD0;--sheet:#FAF8F2;--ink:#1B1A16;--ink2:#5E5A50;--rule:rgba(27,26,22,.9);--hair:rgba(27,26,22,.22);--seal:#C2361F;--text2:#3a372f;color-scheme:light;color:var(--ink)}
.dark .chat-log .shop small{color:#667085}
.dark :is(.fh-card,.slip,.fly-sheet,.chat-card){box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 60px -28px #000}

/* 머리 줄: 늘 어두운 상태(종이 전환 대신 반투명 검정) */
.dark .top.paper{background:rgba(5,6,8,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);border-color:var(--hair)}
.dark .top.paper .on-dark{display:block!important}.dark .top.paper .on-paper{display:none!important}

/* 종이 결(곱하기 겹침)은 어두운 바탕에선 더러워 보이니 끈다 */
.dark :is(.try,.channel,.setup,.sheet-sec)::before{display:none}

/* 박아 둔 갈색 글자색 → 밝은 회색 */
.dark :is(.sec-head p:not(.num),.setup-list p,.pillar-copy>p,.i-kind,.live-meta p,.price-ledger .price-card>p,.price-extra p:not(.mono),.contact-summary){color:var(--text2)}
.dark .price-ledger .price-card ul{border-top-color:var(--hair)}

/* 버튼: 강조 파랑 위 검은 글자 */
.dark .ink-btn,.dark .ink-btn:disabled{background:var(--seal);color:#06080c}
.dark .ink-btn:hover{background:#b9cff5}
.dark .chat-card .chat-mark{color:#fff}

/* 문의지: 노란 제본 대신 파란 선 한 줄 */
.dark .pad{box-shadow:0 0 0 1px var(--hair),0 30px 60px -30px #000}
.dark .pad-bind{height:3px;background:var(--seal)}.dark .pad-bind::after{display:none}
.dark .pad-row,.dark .contact-pad fieldset{border-bottom-color:rgba(146,179,237,.22)}
.dark select option{background:var(--sheet);color:var(--ink)}

/* 휴대폰·전후 비교 틀 */
.dark .device{box-shadow:inset 0 0 0 1.5px #4a4d56,0 30px 60px -20px #000}
.dark .cmp-frame{background:#101216;box-shadow:0 30px 60px -30px #000}
.dark .cmp-line,.dark .cmp-line i{background:#eef1f6}.dark .cmp-line i::before{color:#111}
.dark .idx-filter button[aria-pressed="true"] small{color:#3d4a66}
.dark .live-shot,.dark .idx-peek{box-shadow:0 0 0 1px var(--hair),0 26px 44px -26px #000}

/* 여정 제목: 쪽의 첫 제목(h1)은 입자 첫 화면이 가지므로 여기는 h2 — home-flow 의 h1 모양을 그대로 */
.fh-head h2{font-family:var(--serif);font-weight:900;font-size:clamp(30px,3.6vw,56px);line-height:1.14;letter-spacing:-.045em}
@media (max-width:700px){.fh-head h2{font-size:clamp(24px,7.4vw,32px)}}

/* 입자 첫 화면과 여정 첫 막 사이에 색 경계가 보이지 않게 같은 검정으로 */
.dark .fh-sheet{background:linear-gradient(#000,var(--wood) 55%)}

/* 첫 화면이 도는 동안 멀리 아래 구역은 그리지 않는다 — 글자가 많아 글꼴 조각을 수십 개 받고 처리하느라 입자 시작이 늦어졌다(휴대폰 조건 실측 약 2.5초).
   가까이 오면 그때 그린다. 높이는 한 번 그린 뒤 기억한다. */
/* (2026-10-12 뺌) 화면 밖 구역을 1100px로 미리 잡아 두던 content-visibility — 다른 화면에서 #layer-2 로 올 때 체험 칸이 1245→1019로 줄며 162px 지나쳐 멈춤(실측). 정확한 위치가 우선 */

/* 여정 스스로 재생(data-play=auto): 구역은 화면 한 장, 끝나면 '다시 보기' */
.flow-hero[data-play=auto]{height:100vh}
.fh-replay{position:absolute;right:clamp(16px,4vw,48px);top:84px;z-index:6;border:1px solid rgba(244,237,226,.5);background:rgba(10,8,6,.45);color:var(--cream);font:600 13px/1 var(--serif);padding:10px 14px;border-radius:99px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s}
.flow-hero.played .fh-replay{opacity:1;pointer-events:auto}
.fh-replay:hover{background:rgba(10,8,6,.7)}

/* 여정 되풀이(data-play=loop): 다시 보기 단추 없음, 끝→처음 사이에 잠깐 어둡게 */
.flow-hero[data-play=loop]{height:100vh}
.flow-hero.loop .fh-replay{display:none}
.flow-hero.loop .fh-pin::after{content:"";position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .4s;z-index:7}
.flow-hero.dim .fh-pin::after{opacity:1}