/* /test 대응 단계 탭 — 피해 대응 가이드(/test/help #now)와 홈 진행 과정(#now, 2026-10-22 대표 "메인 홈 진행 과정을 피해 대응 가이드처럼")이 함께 쓴다.
   2026-10-22 pages/help.css 258~522행을 순서 그대로 옮겼다(가이드는 help.css 다음에 싣는다 — 덮는 순서 불변). 버튼·번호 같은 바탕 규칙 7줄은 ark2026.css 끝. */
/* ── 대응 단계 탭(평소 화면, 2026-10-19 대표 '이걸로 가자' — 시안 ?steps=5t 를 기본으로. 이전 4장 .help-steps 는 ?steps=z) — 홈 기술력 구조(.sxn 탭 + .sxr>.sx 한 장, live.js D)를 이 페이지의 밝은 카드로.
   홈 규칙(ark2026.css .sxn/.sx — 어두운 바탕용 색)을 이 상자 안에서만 덮는다. 탭 5칸(900 이상 한 줄 · 그 아래 휴대폰은 홈과 같은 가로 줄) */
.help-sxt .sxn{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1099px) and (min-width:640px){.help-sxt .sxn{grid-template-columns:repeat(5,minmax(0,1fr))}}
.help-sxt .sxn a{background:var(--paper);border-color:transparent;color:var(--navy);grid-template-rows:auto 1fr;padding:16px 16px 18px}
.help-sxt .sxn a:hover,.help-sxt .sxn a:focus-visible{background:#EAF1FF;border-color:rgba(52,123,247,.35)}
.help-sxt .sxn .mono{color:var(--signal);font-weight:700;letter-spacing:.06em}
.help-sxt .sxn b{color:var(--navy);font-size:16px;line-height:1.35}
.help-sxt .sxn-arr{display:none}
.sxt-on .help-sxt .sxn li.on a{background:#EAF1FF;border-color:rgba(52,123,247,.55)}
.sxt-on .help-sxt .sxn li.on b{color:var(--navy)}
.help-sxt .lv-trace rect{stroke:var(--signal)}
.help-sxt .sx{background:var(--paper);border:0;color:var(--navy)}
.help-sxt .sx.help-sx-last{background:#EAF1FF}
.help-sxt .sx h3{color:var(--navy);font-size:clamp(22px,2.2vw,28px)}
.help-sxt .sxr-sum{color:var(--mute);font-size:16px;line-height:1.75}
.help-sxt .sxr-sum p{margin:0}
.help-sxt .sxr-sum b{color:var(--navy);font-weight:700}
.help-sxt .sxr-txt .help-step-k{margin:0}
.help-sxt .sxr-vis{align-content:center;padding:0 clamp(24px,3.4vw,44px) clamp(24px,3.4vw,44px)}
.help-sxt .sxr-vis .help-act{margin:0}
.help-sxt .sxr-vis .help-act:not(.help-act-card){padding-top:0}   /* 앱 검색 카드는 안쪽 여백(14px 16px 16px)을 그대로 — 지우면 문구가 카드 윗변에 붙는다(2026-10-19 캡처) */
.help-sxt .sxr-vis .help-act.help-act-card{margin-top:0}
@media (min-width:900px){
  .help-sxt .sx{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .help-sxt .sx .sxr-txt{order:0}   /* 홈은 짝수 장 좌우 교대 — 여기는 한 장씩만 보이므로 늘 왼쪽 글·오른쪽 할 일 */
  .help-sxt .sxr-vis,.help-sxt .sx:nth-child(even) .sxr-vis{padding:clamp(24px,3.4vw,44px) clamp(24px,3.4vw,44px) clamp(24px,3.4vw,44px) 0}
}
@media (max-width:899px){.help-sxt .sxr-vis{order:0}}   /* 한 열에선 글 먼저, 할 일 상자는 아래(홈은 그림이 위) */
/* 한 열에선 STEP 표식 오른쪽에 제목(대표 2026-10-23 '상담 접수를 STEP 1 과 나란히') — 줄 하나(36px)를 덜 쓴다. 마크업은 그대로, 격자 칸만: 표식 1칸·제목 2칸, 나머지는 전체 폭.
   실측(운영 주입): 390·360 에서 제목 9개 전부 한 줄, 320 에서 가이드 긴 제목 3개만 두 줄(표식과 세로 가운데) */
@media (max-width:899px){
  .help-sxt .sxr-txt{grid-template-columns:auto minmax(0,1fr);column-gap:12px}
  .help-sxt .sxr-txt>*{grid-column:1/-1}
  .help-sxt .sxr-txt>.help-step-k{grid-column:1}
  .help-sxt .sxr-txt>h3{grid-column:2;align-self:center}
}
/* 탭 시안 내용 보강(대표 2026-10-19 '내용도 더 풍성하게') — 왼쪽: 이유 한 줄 · 챙길 것 목록 / 오른쪽: 할 일 상자 + 하지 마세요. 색은 이 페이지 그대로(파랑 강조, × 는 효과 없는 대응의 빨강) */
.help-sxt.is-rich .sxr-txt{align-content:start;gap:14px}
.help-why{margin:2px 0 0;display:grid;gap:4px;padding:12px 16px;border-left:3px solid var(--signal);background:#fff;border-radius:0 12px 12px 0;font-size:15px;line-height:1.65;color:var(--navy);word-break:keep-all}
.help-why-k{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--signal)}
.help-ck{display:grid;gap:8px}
.help-ck-k{margin:0;font-size:13px;font-weight:700;color:var(--navy)}
.help-ck-k small{font-weight:500;color:var(--mute);font-size:12px;margin-left:4px}
.help-ck ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.help-ck li{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;background:#fff;font-size:14px;font-weight:600;color:var(--navy);line-height:1.3;word-break:keep-all}
.help-ck li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.help-sxt.is-rich .sxr-vis{align-content:start;gap:14px}
.help-dont{display:grid;gap:4px;padding:14px 16px;border-radius:14px;background:#FFF1F1}
.help-dont p{margin:0;font-size:14px;line-height:1.65;color:var(--navy);word-break:keep-all}
.help-dont .help-dont-k{font-size:13px;font-weight:700;color:#C13438}
.help-dont-k span{font-weight:700;margin-right:2px}
@media (min-width:900px){.help-sxt.is-rich .sxr-vis{padding-top:clamp(24px,3.4vw,44px)}}
.help-why-t{display:block}   /* 문장이 둘이면 조판 필터가 문장마다 감싸 표지 옆에 붙었다(2026-10-19 390 캡처) — 본문은 한 덩어리로 */
/* ── 탭 시안 계기판(대표 2026-10-19 '애니메이션이랑 그런 것들도 함께') — 홈 기술력 계기판(.sxv, ark2026.css)과 같은 판·레일·칩·알약. 아래는 다섯 단계의 그림 조각뿐.
   단계 표식: .sxv-js.tN = N단계까지 진행 · .sN = N단계부터 보임(공통 규칙). 모션 줄이기·스크립트 없음 = .sxv-js 가 없어 전부 보이는 완성 화면 */
.help-sxt.is-fig .sx{align-items:stretch}
.help-sxt.is-fig .sxr-vis{display:grid;gap:14px;align-content:start}
.help-sxt.is-fig .sxv{min-height:0}
.help-act-row{display:grid;gap:10px;padding-top:4px}
@media (min-width:640px){.help-act-row{grid-template-columns:repeat(2,minmax(0,1fr))}.help-act-row .help-foot{grid-column:1/-1}}
.hv .sxv-body{min-height:168px;align-self:stretch;align-content:center}
.hv .sxv-col{justify-items:start;align-content:start}
/* 1 파일·보관함·검색 */
.hv-file{display:grid;place-items:center;align-content:center;gap:2px;width:52px;height:62px;border-radius:6px 16px 6px 6px;background:#E9F0FC;color:#0B1627;font-size:10px;line-height:1.2}
.hv-file b{font-size:13px;font-weight:800;letter-spacing:.02em;color:#1957C9}.hv-file small{font-size:9.5px;color:#43506A}
.hv-file.hv-sm{width:34px;height:42px}.hv-file.hv-sm b{font-size:10.5px}
.hv-vault{display:grid;place-items:center;width:64px;height:62px;border-radius:12px;border:2px solid var(--signal);background:rgba(52,123,247,.14)}
.sxv-js:not(.t3) .hv-vault .hv-file{transform:translateX(-34px);opacity:0;transition:transform .6s,opacity .6s}
.sxv-js.t3 .hv-vault .hv-file{transition:transform .6s,opacity .6s}
.hv-search{display:flex;align-items:center;gap:6px;width:100%;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:10.5px;color:#C8D6EE;white-space:nowrap;overflow:hidden}
.hv-search i{flex:none;width:10px;height:10px;border:2px solid #9CC3FF;border-radius:50%;position:relative}
.hv-search i::after{content:"";position:absolute;right:-4px;bottom:-4px;width:5px;height:2px;background:#9CC3FF;transform:rotate(45deg)}
.hv-no{color:#FFB3B6;border-color:rgba(242,84,91,.6)}
/* 2 휴대폰 → 탈취 정보 막대(연구소 비율) */
.hv-flow{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);gap:8px}
@media (max-width:479px){.hv-flow{grid-template-columns:1fr}}
.hv-ex ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;width:100%}
.hv-ex li{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr) 30px;align-items:center;gap:8px;font-size:10.5px;color:#C8D6EE}
.hv-ex li b{font-size:11px;color:#fff;text-align:right}
.hv-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.hv-bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:#F2545B;transform-origin:left;transition:transform 1.4s cubic-bezier(.3,.7,.2,1),background .5s}
.sxv-js.t4 .hv-bar i,.sxv:not(.sxv-js) .hv-bar i{background:#5C6B85}   /* 삭제 뒤: 더 빠져나가지 않는다(붉은 흐름이 멈춘 회색) */
.sxv-js:not(.t1) .hv-bar i{background:repeating-linear-gradient(90deg,#F2545B 0 8px,#FF8A8F 8px 16px);background-size:32px 100%;animation:hvFlow .8s linear infinite}
@keyframes hvFlow{to{background-position:32px 0}}
/* 3 기기·계정 */
.hv-dev{display:block;width:34px;height:58px;border-radius:8px;border:2px solid #9CC3FF;background:rgba(52,123,247,.18);position:relative}
.hv-dev::after{content:"";position:absolute;left:50%;bottom:4px;width:10px;height:2px;border-radius:2px;background:#9CC3FF;transform:translateX(-50%)}
.hv-dev-bad{border-color:#F2545B;background:rgba(242,84,91,.16)}
.hv-dev-bad::before{content:"!";position:absolute;inset:0;display:grid;place-items:center;color:#FF8A8F;font-weight:800;font-size:16px}
.hv-dev-bad::after{background:#F2545B}
.hv-acc{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:100%}
.hv-acc li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px;border-radius:7px;background:rgba(255,255,255,.07);font-size:10.5px;color:#DCE6F5}
.hv-acc li i{flex:none;width:14px;height:14px;border-radius:50%;background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.sxv-js.t4 .hv-acc li:nth-child(2) i{transition-delay:.25s}.sxv-js.t4 .hv-acc li:nth-child(3) i{transition-delay:.5s}
/* 4 대화·프로필·기록 */
.hv-chat{display:grid;gap:5px;width:100%;padding:8px;border-radius:8px;background:rgba(255,255,255,.05);position:relative}
.hv-chat i{display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.22)}
.hv-chat i:nth-child(1){width:70%}.hv-chat i:nth-child(2){width:52%;justify-self:end;background:rgba(242,84,91,.55)}.hv-chat i:nth-child(3){width:62%}
.hv-chat::after{content:"";position:absolute;inset:-3px;border:2px solid #9CC3FF;border-radius:10px;opacity:0}
.sxv-js.t1:not(.t2) .hv-chat::after{animation:hvShot 1.2s ease-out 1 .3s}
@keyframes hvShot{0%{opacity:0;transform:scale(1.06)}30%{opacity:1;transform:none}100%{opacity:.0}}
.hv-prof{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:8px;width:100%;padding:8px;border-radius:8px;background:rgba(255,255,255,.05)}
.hv-prof i{width:24px;height:24px;border-radius:50%;background:#5C6B85}
.hv-prof span{height:8px;border-radius:4px;background:rgba(255,255,255,.22)}
.hv-rec{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:100%}
.hv-rec li{padding:5px 8px;border-radius:7px;background:rgba(255,255,255,.07);font-size:10.5px;color:#DCE6F5;border-left:3px solid var(--signal)}
/* 5 연락·분석·방안 */
.hv-ring{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--signal);position:relative}
.hv-ring i{width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E") center/20px no-repeat}   /* 수화기(테두리 깎은 모양은 폰에서 뜻 모를 호로 보였다 — 2026-10-19 캡처) */
.hv-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--signal)}
.sxv-js.t1:not(.t2) .hv-ring::after{animation:hvPing 1.4s ease-out infinite}
@keyframes hvPing{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}
.hv-plan{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:100%}
.hv-plan li{height:8px;border-radius:4px;background:rgba(143,179,255,.45)}
.hv-plan li:nth-child(2){width:80%}.hv-plan li:nth-child(3){width:60%}
.sxv-js.sxv-hold .hv-bar i,.sxv-js.sxv-hold .hv-chat::after,.sxv-js.sxv-hold .hv-ring::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hv-bar i,.hv-vault .hv-file{transition:none}}
/* gpt-6-astra 시각 심사(2026-10-19 '수정 후 채택') 반영: 2단계 삭제 표시를 분명히(빨간 X) · 데이터 출처는 막대 위 · 3단계 체크 제거(완료로 읽혔다) · 5단계 뜻 없는 막대 제거 ·
   폰: 하지 마세요를 그림 위로(연락 버튼 뒤 긴 그림에 밀리지 않게) · 그림 칸 가로 3칸 압축 */
.hv .sxv-h small{display:block;margin-top:2px;font-size:10px;color:#9FB2CF}
.hv .sxv-h{color:#9FBDF0}
@media (max-width:899px){
  .help-sxt.is-fig .sxr-vis .help-dont{order:-1}
  .hv .sxv-body{min-height:0}
  .hv .sxv-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .hv .sxv-3 .sxv-col{padding:8px;gap:6px}
  .hv .sxv-chip,.hv .sxv-pill{white-space:normal;font-size:10px;line-height:1.3}
  .hv-file{width:44px;height:52px}.hv-vault{width:52px;height:52px}
}
/* ── 규격·여백 정리(대표 2026-10-19 '여백과 카드들의 규격과 비율 등을 아름답게 맞춰줘' → 같은 날 '비율을 유지하면서 각자의 실크기를 좀 더 줄여도' — 여백 0.8배·글자 한 단계·계기판 300→260) — 실측(1440)에서 아래 빈칸 44~205px · 좌우 칼럼 480/472 · 모서리 6종 · 안쪽 여백 3종 · 계기판 높이 237~272 가 섞여 있었다.
   한 규칙으로: 패널 안쪽 40 · 칼럼 간격 40 · 같은 폭 두 칼럼 · 칼럼 안 간격 16 · 안쪽 상자 모서리 16 / 여백 16×20 · 탭 모서리 16 · 탭→패널 20 · 데스크톱은 칼럼 내용을 세로 가운데(짧은 단계도 위아래 여백이 같게) ·
   계기판은 레일 두 줄 높이·전체 높이 고정(단계마다 같은 판) · 폰은 위부터 쌓고 2단계 그림은 두 칸 유지 */
.help-sxt.is-fig .sxn{gap:10px;margin-bottom:16px}
.help-sxt.is-fig .sxn a{border-radius:14px;padding:13px 15px}
.help-sxt.is-fig .sxn b{font-size:15px}
.help-sxt.is-fig .sx{border-radius:20px}
.help-sxt.is-fig .sx .sxr-txt,.help-sxt.is-fig .sx .sxr-vis{padding:0;gap:12px}
.help-sxt.is-fig .sx h3{font-size:clamp(20px,1.7vw,24px)}
.help-sxt.is-fig .sxr-sum{font-size:15px;line-height:1.7}
.help-sxt.is-fig .help-why{border-radius:4px 14px 14px 4px;padding:13px 16px;font-size:14px;line-height:1.6}
.help-sxt.is-fig .help-ck li{padding:6px 10px 6px 9px;font-size:13px}
.help-sxt.is-fig .help-dont{border-radius:14px;padding:13px 16px;gap:4px}
.help-sxt.is-fig .help-dont p{font-size:14px;line-height:1.6}
.help-sxt.is-fig .help-dont .help-dont-k{font-size:12.5px}
.help-sxt.is-fig .help-act.help-act-card{border-radius:14px;padding:13px 16px 16px;margin-top:0;gap:12px}
.help-sxt.is-fig .help-btn{border-radius:10px;min-height:44px;font-size:14px}
.help-sxt.is-fig .help-btn-primary{font-size:15px}
.help-sxt.is-fig .help-act-row{gap:8px}
.help-sxt.is-fig .sxv.hv{border-radius:14px;padding:14px;gap:8px;grid-template-rows:auto 1fr}
.hv .sxv-rail li{min-height:calc(2 * 1.3em + 7px)}   /* 레일 글이 한 줄인 단계도 두 줄 높이 — 다섯 판의 머리 높이가 같다 */
@media (min-width:900px){
  .help-sxt.is-fig .sx{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;padding:32px}
  .help-sxt.is-fig .sx .sxr-txt,.help-sxt.is-fig .sx .sxr-vis{align-content:center}
  .help-sxt.is-fig .sx .sxr-txt{order:0}
  .help-sxt.is-fig .sxv.hv{min-height:260px}
  .help-sxt.is-fig .hv-ex ul{gap:4px}   /* 2단계 막대 목록이 판을 268 로 밀던 것 — 다섯 판 모두 260 */
}
@media (max-width:899px){
  .help-sxt.is-fig .sxr{align-items:start}
  .help-sxt.is-fig .sx{padding:20px 16px;row-gap:16px;border-radius:18px;align-content:start;align-self:start}   /* 카드는 내용 높이만 — 목록이 잡아 둔 높이(가장 긴 단계, 넘길 때 아래가 들썩이지 않게)는 카드 밖 여백으로 남는다(빈 카드 안 292~398px 이던 것) */
  .help-sxt.is-fig .sx .sxr-txt,.help-sxt.is-fig .sx .sxr-vis{gap:12px}
  .hv .sxv-body.hv-flow{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:6px}
  .hv .hv-ex li{grid-template-columns:minmax(0,1fr) 28px;row-gap:3px}
  .hv .hv-ex li .hv-bar{grid-column:1/-1;grid-row:2}
}
/* 계기판 안: 칸 높이를 같게(내용 따라 제각각이던 것), 묶음은 레일 바로 아래부터 판을 채운다(가운데 떠서 레일 아래가 비던 것) · 폰에서 줄바꿈되는 알약은 둥근 사각(세 줄 알약이 일그러졌다) */
.hv .sxv-body{align-self:stretch;align-items:stretch;align-content:stretch}
.hv .sxv-body > .sxv-col{height:100%}
@media (max-width:899px){.hv .sxv-chip,.hv .sxv-pill{border-radius:8px;padding:3px 7px}}
/* 칸 안: 머리글·그림은 위, 마지막 알약은 칸 바닥 — 같은 줄 칸들의 알약이 한 줄에 선다(내용이 위에 몰려 칸 아래가 비던 것) */
.hv .sxv-body > .sxv-col{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hv .sxv-body > .sxv-col > .sxv-pill:last-child,.hv .sxv-body > .sxv-col > .sxv-chip:last-child{margin-top:auto}
.hv .sxv-body > .sxv-col > .hv-search,.hv .sxv-body > .sxv-col > .hv-acc,.hv .sxv-body > .sxv-col > .hv-rec,.hv .sxv-body > .sxv-col > .hv-chat,.hv .sxv-body > .sxv-col > .hv-prof,.hv .hv-ex ul{width:100%}
/* 2026-10-19 대표 '2,3이 너무 부실해' — 2·3단계 보강 조각. 순서가 있는 챙길 것(2단계 삭제 순서)은 체크 대신 번호 */
.help-ck ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:hck}
.help-ck ol li{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;background:#fff;font-size:14px;font-weight:600;color:var(--navy);line-height:1.3;word-break:keep-all;counter-increment:hck}
.help-ck.is-ol li::before{content:counter(hck);flex:none;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--signal);color:#fff;font-size:10px;font-weight:800;line-height:1;font-family:var(--mono)}
.help-sxt.is-fig .help-ck ol li{padding:6px 10px 6px 9px;font-size:13px}
.hv-pc{display:block;width:62px;height:42px;border-radius:6px;border:2px solid #9CC3FF;background:rgba(52,123,247,.18);position:relative;margin-bottom:10px}   /* 안전한 다른 기기(PC 등) — 모니터 + 받침 */
.hv-pc::after{content:"";position:absolute;left:50%;bottom:-10px;width:24px;height:6px;border-radius:0 0 4px 4px;background:#9CC3FF;transform:translateX(-50%)}
@media (max-width:899px){.hv-pc{width:48px;height:34px}}
@media (max-width:899px){.hv .sxv-body.hv-flow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* 순서 목록은 한 줄에 하나(번호가 줄 단위로 읽히게) */
.help-ck.is-ol ol{flex-direction:column;align-items:flex-start}
/* 2단계 할 일 상자 = 지울 것 / 남길 것 두 칸 */
.help-act-card.help-kd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.help-kd-c{display:grid;gap:4px;align-content:start}
.help-kd-k{margin:0;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700}
.help-kd-c.is-del .help-kd-k{color:#C13438}.help-kd-c.is-keep .help-kd-k{color:var(--signal)}
.help-kd-c.is-del .help-kd-k::before{content:"×";font-weight:800}
.help-kd-c.is-keep .help-kd-k::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.help-kd-t{margin:0;font-size:14px;font-weight:600;line-height:1.5;color:var(--navy);word-break:keep-all}
.help-kd-c.is-keep{border-left:1px solid var(--line);padding-left:12px}
/* 보조 행동 한 줄(3단계 엠세이퍼) — 주 행동(비밀번호·2단계 인증)보다 낮게: 흰 줄 하나, 오른쪽 ↗ */
.help-mini{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:2px;padding:12px 16px;border-radius:14px;background:#fff;color:var(--navy);text-decoration:none;transition:color .2s,box-shadow .2s}
.help-mini:hover,.help-mini:focus-visible{color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal)}
.help-mini-k{grid-column:1;font-size:12px;font-weight:700;color:var(--mute)}
.help-mini-t{grid-column:1;font-size:14px;font-weight:700;word-break:keep-all}
.help-mini-go{grid-column:2;grid-row:1/3;font-size:16px;font-weight:700;color:var(--signal)}
@media (max-width:479px){.help-act-card.help-kd{grid-template-columns:1fr;gap:10px}.help-kd-c.is-keep{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:10px}}   /* 폰: 두 칸이 좁아 세 줄로 꺾였다 — 위아래로 */
/* 2단계 그림 = 휴대폰 홈 화면에서 꾹 눌러 삭제(대표 2026-10-19 '바탕화면에서 꾹 누르면 삭제버튼 … 이렇게 연출하자').
   시계: 처음 막대가 흐른다(탈취 중) → 1 비행기 모드(상태 표시줄 비행기·흐름 멈춤) → 2 지울 앱 확인(악성 아이콘에 테·나머지 흐림) → 3 꾹 누름(손끝·안내 카드) → 4 아이콘이 사라지고 막대 회색.
   안내 카드는 실제 메뉴 흉내가 아니라 기기별 이름표(애플 설명서 '앱 제거 → 앱 삭제' · 삼성전자서비스 '설치 삭제') — 한 단계 메뉴로 그리면 아이폰 중간 단계가 빠진다(gpt-6-astra 심사).
   스크립트 없음·모션 줄이기 = 꾹 누른 장면(안내 카드가 보이는 화면)이 완성 화면 */
@media (min-width:900px){.hv .sxv-body.hv-flow{grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr)}}
.hv-home{position:relative;width:100%;max-width:120px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:17px 8px 9px;border-radius:14px;border:2px solid #3A4A66;background:linear-gradient(180deg,#16233D,#0E1729)}
.hv-air{position:absolute;top:4px;right:9px;width:11px;height:11px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23DCE6F5' d='M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z'/%3E%3C/svg%3E") center/11px no-repeat}
.hv-ic{display:block;aspect-ratio:1;border-radius:8px;background:rgba(255,255,255,.14);transition:opacity .35s,transform .45s}
.hv-ic:nth-child(3n){background:rgba(143,179,255,.28)}.hv-ic:nth-child(4n){background:rgba(255,255,255,.22)}
.hv-ic-bad{position:relative;display:grid;place-items:center;background:linear-gradient(160deg,#FF8A8F,#F2545B)!important}
.hv-ic-bad b{font-style:normal;font-size:12px;font-weight:800;color:#fff;line-height:1}
.hv-press{position:absolute;inset:-5px;border-radius:12px;border:2px solid #8FB3FF;opacity:0;transition:opacity .3s}
.hv-touch{position:absolute;left:50%;top:58%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:rgba(255,255,255,.8);box-shadow:0 0 0 4px rgba(255,255,255,.25);opacity:0}
.hv-menu{position:absolute;left:50%;top:41%;z-index:1;display:grid;min-width:108px;padding:2px 0 4px;border-radius:10px;background:#F4F6FA;box-shadow:0 6px 18px rgba(0,0,0,.45);font-size:10px;line-height:1.3;white-space:nowrap;transform:translateX(-50%)}
.hv-menu .hv-mk{padding:4px 10px 0;font-weight:600;color:#6B7A93}
.hv-menu .hv-mk+.is-del+.hv-mk{margin-top:3px;padding-top:5px;border-top:1px solid #DCE2EC}
.hv-menu .is-del{padding:1px 10px 2px;font-weight:800;color:#E5484D}
.sxv-js .hv-menu.s3{transform:translate(-50%,4px)}.sxv-js.t3 .hv-menu.s3{transform:translateX(-50%)}   /* 단계 표식의 translateY 와 가운데 맞춤을 함께 */
.sxv:not(.sxv-js) .hv-press,.sxv-js.t2:not(.t4) .hv-press{opacity:1}
.sxv:not(.sxv-js) .hv-touch{opacity:1}
.sxv-js.t3:not(.t4) .hv-touch{animation:hvHold 1.3s ease-out infinite}
@keyframes hvHold{0%{transform:scale(1.6);opacity:0}45%{transform:none;opacity:1}100%{transform:none;opacity:1}}
.sxv-js.t3:not(.t4) .hv-ic-bad{transform:scale(.92)}
.sxv:not(.sxv-js) .hv-ic:not(.hv-ic-bad),.sxv-js.t2:not(.t4) .hv-ic:not(.hv-ic-bad){opacity:.35}
.sxv-js.t4 .hv-ic-bad{transform:scale(0);opacity:0}
.sxv-js.t4 .hv-menu.s3{opacity:0;transform:translate(-50%,4px)}
.sxv-js.sxv-hold .hv-touch{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hv-ic{transition:none}}
.help-ck-n{margin:0;font-size:13px;line-height:1.5;color:var(--mute);word-break:keep-all}   /* 목록 아래 단서(2단계: 아이콘이 숨겨진 경우 — 글 #200 등 '아이콘을 숨긴 채') */
/* 레일 ↔ 그림 거리(대표 2026-10-19 '여기랑 여기랑 너무 멀어서, 가독성이 떨어져') — 실측 1440: 레일 글 아랫선 → 휴대폰 그림 64px 중 17px 이 늘 비어 있던 두 줄 예약.
   두 줄 예약은 다섯 판의 머리 높이를 맞추려던 것 — 레일 글이 모든 단계에서 한 줄인 폭(실측: 1200 이상 · 600~899)에선 필요 없어 끈다. 섞이는 폭(900~1199 · 599 이하)은 유지.
   레일→칸 간격 12→8. 1200 이상은 레일이 줄어든 만큼 판 높이 260→240(칸 안 높이는 그대로 — 칸 아래가 비지 않게). 레일 글을 바꾸면 raillines 실측을 다시 */
@media (min-width:1200px),(min-width:600px) and (max-width:899px){.hv .sxv-rail li{min-height:0}}
@media (min-width:1200px){.help-sxt.is-fig .sxv.hv{min-height:240px}}
/* 목록 항목 글은 한 덩어리(<li><span>) — 항목이 inline-flex 라 조판 필터가 글 가운데 넣는 .nw 조각이 따로 배치돼 벌어졌다(2026-10-19 폰 2단계 3번). 번호·체크(::before) + 글 = 항목 두 개 */
.help-ck li>span{min-width:0}
/* 그림 속 단일 물체(파일·보관함·기기·PC·전화)를 칸의 빈 공간에 맞게 키우고 머리글과 아래 알약 사이 가운데에(대표 2026-10-19 '여백을 좀 더 활용하도록' — 전화·APK 파일, 같은 종류 전부) */
.hv .sxv-col > .hv-file,.hv .sxv-col > .hv-vault,.hv .sxv-col > .hv-dev,.hv .sxv-col > .hv-pc,.hv .sxv-col > .hv-ring,.hv .sxv-col > .sxv-kv,.hv .sxv-col > .hv-search{margin-block:auto}
@media (min-width:900px){
  .hv-file{width:72px;height:86px;border-radius:8px 22px 8px 8px;gap:4px}.hv-file b{font-size:17px}.hv-file small{font-size:11px}
  .hv-vault{width:88px;height:84px;border-radius:16px}.hv-file.hv-sm{width:46px;height:56px;border-radius:6px 14px 6px 6px}.hv-file.hv-sm b{font-size:13px}
  .hv-dev{width:46px;height:78px;border-radius:10px}.hv-dev-bad::before{font-size:22px}
  .hv-pc{width:84px;height:56px}.hv-pc::after{width:30px;height:7px;bottom:-11px}
  .hv-ring{width:68px;height:68px}.hv-ring i{width:30px;height:30px;background-size:30px}
}
@media (max-width:899px){
  .hv-file{width:58px;height:70px}.hv-vault{width:68px;height:66px}.hv-file.hv-sm{width:38px;height:46px}
  .hv-dev{width:40px;height:68px}.hv-pc{width:64px;height:44px}
  .hv-ring{width:56px;height:56px}.hv-ring i{width:26px;height:26px;background-size:26px}
}
.sxv-js.t1:not(.t2) .hv-ring::after{animation-name:hvPing2}
@keyframes hvPing2{from{transform:scale(1);opacity:.9}to{transform:scale(1.45);opacity:0}}
/* 5단계 셋째 칸: 솔루션 이름표(사전 label 6종) — 칸 폭에 맞춰 줄바꿈되는 작은 이름표, 차례로 나타남 */
.hv-sol{list-style:none;margin:0;padding:0;display:grid;gap:3px;width:100%}   /* 상자 칩은 다섯 줄을 차지해 판을 밀었다(274px) — 점 붙은 한 줄 목록으로 */
.hv-sol li{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;line-height:1.3;color:#DCE6F5;white-space:nowrap}
.hv-sol li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:#8FB3FF}
.sxv-js .hv-sol.s3 li{opacity:0;transform:translateY(3px);transition:opacity .35s,transform .35s}
.sxv-js.t3 .hv-sol.s3 li{opacity:1;transform:none}
.sxv-js.t3 .hv-sol li:nth-child(2){transition-delay:.12s}.sxv-js.t3 .hv-sol li:nth-child(3){transition-delay:.24s}.sxv-js.t3 .hv-sol li:nth-child(4){transition-delay:.36s}.sxv-js.t3 .hv-sol li:nth-child(5){transition-delay:.48s}.sxv-js.t3 .hv-sol li:nth-child(6){transition-delay:.6s}
@media (prefers-reduced-motion:reduce){.hv-sol li{transition:none}}
/* 칸 안 넘침 0(360px 실측: 3단계 '새 비밀번호까지 유출' 칩 3px · 5단계 'Data-Swapjack' 7px) — 칩·알약은 칸 폭까지, 좁은 폰은 이름표 점 생략 */
.hv .sxv-col > .sxv-chip,.hv .sxv-col > .sxv-pill{max-width:100%;box-sizing:border-box}
@media (max-width:380px){.hv-sol li::before{display:none}}
/* gpt-6-astra 시각 심사(2026-10-19 '수정 후 채택') 반영: 단일 그림은 칸의 가로 가운데(머리글·알약 정렬은 그대로) · 5단계 '30분' 칸은 아래 알약이 없어 세로 가운데가 처져 보였다 — 알약 자리만큼 올리고 숫자를 키움 */
.hv .sxv-col > .hv-file,.hv .sxv-col > .hv-vault,.hv .sxv-col > .hv-dev,.hv .sxv-col > .hv-pc,.hv .sxv-col > .hv-ring{align-self:center}
.hv .sxv-col > .sxv-kv{align-self:center;text-align:center;padding-bottom:44px}
@media (min-width:900px){.hv .sxv-kv b{font-size:34px;line-height:1.1}}
/* 탭 테두리 빛(대표 2026-10-19 '여기 테두리도 애니메이션 부여해 줘'): 자동 넘김 중엔 남은 시간을 그리는 선(live.css lvTrace)이 있지만,
   탭을 직접 고르면 자동 넘김이 끝나 선이 사라지고 테두리가 멈췄다. 그때 고른 탭 테두리를 짧은 빛 조각이 계속 돈다(남은 시간 표시와 헷갈리지 않게 조각 18%).
   모션 줄이기면 live.css 가 .lv-trace 를 그리지 않는다 */
.help-sxt.is-fig .sxn li.on:not(.lv-run) .lv-trace rect{opacity:1;stroke-dasharray:18 82;stroke-dashoffset:100;animation:hvTabLoop 3.2s linear infinite}
@keyframes hvTabLoop{to{stroke-dashoffset:0}}
/* 그림 셋째 칸 검색창 모형 — 휴대폰 칸 폭(65~87px)에 '앱 이름·패키지명'(101px)이 한 줄로 안 들어가 잘리던 것(대표 2026-10-28 "요소 비율 때문에 잘려"): 가운뎃점 뒤에서 두 줄로 */
@media (max-width:639px){
  .hv-search{white-space:normal;align-items:flex-start;line-height:1.35;word-break:keep-all;padding:6px 7px}
  .hv-search > i{margin-top:2px}
}