/* /test/help — 피해 대응 (2026-09-23). 모든 클래스는 help- 접두. 공용 토큰(ark2026.css)만 쓴다. */ /* ── 히어로 ─────────────────────────────────────────── */ .help-hero h1 em{display:inline-block} .help-jump{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:26px;max-width:520px} .help-jump a{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border-radius:12px;border:1px solid rgba(195,211,236,.18);background:rgba(195,211,236,.05);color:var(--on-ink);text-decoration:none;font-size:15px;font-weight:500} .help-jump a:hover{border-color:rgba(195,211,236,.45)} .help-jump .mono{font-size:12px;color:var(--frost);opacity:.8} /* 대표 시안(2026-10-06): 목차는 모든 폭에서 2×2, 항목 오른쪽 끝에 화살표 */ .help-jump-t{flex:1 1 auto;min-width:0} .help-jump-a{flex:none;color:var(--frost);opacity:.75;transition:transform .15s} .help-jump a:hover .help-jump-a{transform:translateX(3px);opacity:1} @media (prefers-reduced-motion:reduce){.help-jump-a{transition:none}} @media (max-width:379px){.help-jump a{gap:6px;padding:0 10px;font-size:14px}} @media (max-width:339px){.help-jump a{gap:5px;padding:0 8px;font-size:13px}.help-jump .mono{font-size:11px}} /* 설명 문구: 어두운 상자 + 넓은 화면에서 세 줄 */ .help-hero .help-lede{max-width:520px;padding:16px 18px;border-radius:14px;border:1px solid rgba(195,211,236,.14);background:rgba(4,10,20,.5);opacity:1;color:rgba(232,240,252,.86);line-height:1.6} .help-lede b{color:#fff;font-weight:700} @media (min-width:520px){.help-lede-l{display:block}} /* 전화 버튼: 번호만 고정폭 글꼴이라 '전화 상담'과 글자 몸통 높이가 어긋나던 것 — 같은 글꼴에 숫자 폭만 고정 */ .help-hero .cta-row .btn .mono{font-family:inherit;font-variant-numeric:tabular-nums} /* 시그니처: 악성앱 정보 흐름 */ .help-flow{margin:0;display:grid;gap:14px;border:1px solid rgba(195,211,236,.14);border-radius:18px;padding:14px;background:linear-gradient(180deg,rgba(52,123,247,.07),rgba(52,123,247,0) 70%)} .help-flow-h{margin:2px 2px 0;font-size:17px;font-weight:700;color:#fff;line-height:1.35} .help-flow-stage{position:relative} .help-flow canvas{display:block;width:100%;height:240px} @media (min-width:620px){.help-flow canvas{height:300px}} @media (min-width:900px){.help-flow canvas{height:320px}} .help-flow-tag{position:absolute;top:4px;font-size:12px;color:var(--on-ink-mute);font-family:var(--mono);letter-spacing:.04em} .help-flow-l{left:4px} .help-flow-r{right:4px} .help-flow-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px} .help-del{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 16px;border-radius:12px;border:1px solid #F2545B;background:rgba(242,84,91,.12);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer} .help-del-ic{width:16px;height:18px;position:relative;border:2px solid currentColor;border-top:0;border-radius:0 0 3px 3px;margin-top:3px} .help-del-ic::before{content:"";position:absolute;left:-5px;right:-5px;top:-5px;height:2px;background:currentColor;border-radius:2px} .help-del[aria-pressed="true"]{border-color:#5ED3B4;background:rgba(94,211,180,.12)} .help-flow-msg{flex:1 1 200px;font-size:14.5px;color:var(--on-ink);min-height:1.5em} .help-del[aria-pressed="true"] + .help-flow-msg{color:#9BE7CF} .help-flow figcaption{display:grid;gap:10px;font-size:13px;color:var(--on-ink-mute)} .help-ex{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px} .help-ex li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:4px 8px;font-size:13px;color:var(--on-ink)} .help-ex i{width:9px;height:9px;border-radius:50%} .help-ex span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .help-ex b{font-weight:500;color:var(--on-ink-mute);font-size:12px} .help-ex .help-ex-bar{grid-column:1/-1;height:3px;border-radius:2px;background:rgba(195,211,236,.1);overflow:hidden} .help-ex .help-ex-bar span{display:block;height:100%} @media (max-width:339px){.help-ex{gap:8px 12px}.help-ex li{font-size:12px;gap:4px 6px}} /* 320폭에서 '기기·전화 정보'가 1px 넘쳐 말줄임되던 것 */ .help-flow-note{word-break:keep-all;overflow-wrap:anywhere} .help-flow-note a{color:var(--frost)} .help-flow-note b{color:var(--on-ink);font-weight:500} /* ── 시안 B(?flow=b, 2026-10-15) 4판: 대표 예시('악성 앱 탈취 정보 - 디자인 수정.html') 구조 — 왼쪽 정보 항목(아이콘+이름+비율) → 가운데 신경망 구체(악성 앱) → 오른쪽 붉은 '악성 서버'. 항목·아이콘·서버 캡션은 DOM(마크업은 그대로: li 의 i 가 아이콘 상자, help-flow-r 태그가 서버 캡션), 곡선·빔·구체·서버 고리·가운데 라벨은 canvas(help.js 1b). 글자는 A 와 같다(새 문구 0). 막대는 숨기고 비율은 항목 글자 + 곡선 가닥 수로. JS 없으면 전부 켜진 정지 그림. 삭제하면 아이콘이 초록, 바탕 빛무리·서버 캡션이 꺼진다. */ .help-flow-b{gap:12px;background:linear-gradient(180deg,rgba(195,211,236,.05),rgba(195,211,236,0) 70%)} .help-flow-b .help-flow-stage{display:block;padding:0;min-height:0;aspect-ratio:5/4} .help-flow-b .help-flow-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 62% 52%,rgba(52,123,247,.14),rgba(52,123,247,0) 72%);pointer-events:none;transition:opacity .7s} .help-flow-b.is-cut .help-flow-stage::before{opacity:0} .help-flow-b canvas{position:absolute;inset:0;width:100%;height:100%} /* 서버 캡션: '악성 서버' 태그가 서버 고리 위에 붉게 */ .help-flow-b .help-flow-r{left:89%;right:auto;top:15%;transform:translateX(-50%);color:#FF9AA4;white-space:nowrap;transition:color .6s} .help-flow-b.is-cut .help-flow-r{color:var(--on-ink-mute)} /* 항목: 아이콘 상자 + 이름(굵게) + 비율(아래, 모노) — 세로로 고르게 */ .help-flow-b .help-ex{position:absolute;left:3%;top:15%;bottom:6%;width:34%;z-index:1;display:grid;grid-template-columns:none;align-content:space-between;margin:0;padding:0;list-style:none} .help-flow-b .help-ex li{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-areas:"ic l" "ic p";column-gap:6px;align-items:center;padding:0;border:0;background:none;font-size:11px;line-height:1.2;color:var(--on-ink-mute);transition:color .4s} .help-flow-b .help-ex li>span:first-of-type{grid-area:l;align-self:end;justify-self:start;font-weight:700;word-break:keep-all} /* justify-self:start — 상자가 글자 폭만큼이라 곡선이 글자 끝에서 출발(help.js 가 실측) */ .help-flow-b .help-ex b{grid-area:p;align-self:start;justify-self:start;margin-top:2px;font-size:9.5px;font-weight:500;color:var(--on-ink-mute);transition:color .4s} .help-flow-b .help-ex .help-ex-bar{display:none} html.mob-b .help-flow-b .help-ex b{font-size:11px} /* 휴대폰 시안 ?mob=b(2026-10-26): 비율 숫자 9.5px → 11px(12폭 전부 9.5px 였다 — 보고서 13절). 항목 이름(11px)과 같은 크기, 굵기로만 구분. 표식 없으면 그대로 9.5px */ html.mob-b .help-flow-b .help-ex{row-gap:6px} /* 항목 6개 × 32px + 줄 사이 8px = 232 > 상자 210 이라 마지막 항목이 상자 아래로 22px 나가 아래 조작 줄과 4px 까지 붙었다(390 실측) → 줄 사이 6px 로 12px 만 나가게(기존 9.5px 화면의 16px 보다 적다) */ .help-flow-b .help-ex i{grid-area:ic;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;color:#6F85A8;border:1px solid rgba(96,165,250,.14);background:rgba(59,130,246,.05);box-shadow:0 0 0 rgba(59,130,246,0);transition:color .4s,border-color .4s,background .4s,box-shadow .4s} .help-flow-b .help-ex i::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat} .help-flow-b .help-ex li.is-on{color:#fff} .help-flow-b .help-ex li.is-on b{color:#9FD0FF} .help-flow-b .help-ex li.is-on i{color:#9FD0FF;border-color:rgba(96,165,250,.3);background:linear-gradient(180deg,rgba(59,130,246,.24),rgba(59,130,246,.06));box-shadow:0 0 14px rgba(59,130,246,.3)} .help-flow-b .help-ex li.is-hot i{color:#fff;border-color:rgba(160,200,255,.6);box-shadow:0 0 18px rgba(90,170,255,.6)} .help-flow-b .help-ex li.is-hot b{color:#fff} /* 가장 많이 가져가는 정보 하나(help.js 가 is-top 을 붙인다)는 예시처럼 붉게 — 최다 항목을 즉시 구분(gpt-6-astra 심사 수정 1건) */ .help-flow-b .help-ex li.is-top.is-on b{color:#FF8794} .help-flow-b .help-ex li.is-top.is-on i{color:#FFC2C8;border-color:rgba(255,77,94,.45);background:linear-gradient(180deg,rgba(255,77,94,.24),rgba(255,77,94,.06));box-shadow:0 0 16px rgba(255,77,94,.35)} .help-flow-b .help-ex li.is-top.is-hot i{color:#fff;border-color:rgba(255,160,170,.7);box-shadow:0 0 18px rgba(255,100,115,.6)} .help-flow-b.is-cut .help-ex li{color:var(--on-ink)} .help-flow-b.is-cut .help-ex li b,.help-flow-b.is-cut .help-ex li.is-on b{color:var(--on-ink-mute)} .help-flow-b.is-cut .help-ex li i,.help-flow-b.is-cut .help-ex li.is-on i{color:#5ED3B4;border-color:rgba(94,211,180,.45);background:rgba(94,211,180,.08);box-shadow:none} .help-flow-b .help-ex li[data-k=contacts] i{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c1-3.5 3.8-5.5 7-5.5s6 2 7 5.5'/%3E%3C/svg%3E")} .help-flow-b .help-ex li[data-k=sms] i{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E")} .help-flow-b .help-ex li[data-k=phone_info] i{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E")} .help-flow-b .help-ex li[data-k=files] i{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3C/svg%3E")} .help-flow-b .help-ex li[data-k=images] i{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M4 17l5-4 4 3 3-2 4 3'/%3E%3C/svg%3E")} .help-flow-b .help-ex li[data-k=location] i{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6-6.5-11a6.5 6.5 0 0113 0c0 5-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E")} @media (min-width:620px){.help-flow-b .help-flow-stage{aspect-ratio:3/2}.help-flow-b .help-ex{width:30%;top:16%;bottom:8%}.help-flow-b .help-ex li{grid-template-columns:28px minmax(0,1fr);column-gap:8px;font-size:12.5px}.help-flow-b .help-ex b{font-size:10.5px}.help-flow-b .help-ex i{width:28px;height:28px;border-radius:9px}.help-flow-b .help-ex i::before{width:14px;height:14px}} @media (max-width:619px){.help-flow-b .help-flow-stage{min-height:266px}} /* 왼쪽 여섯 줄(한 줄 31px)이 쓰는 높이는 폭과 무관한데 무대는 폭에 비례해 낮아져 340~389px 에서 '위치'가 무대 아래로 7~34px 나갔다(2026-10-23 실측, 375px 11px). 하한 266 = 390px 무대 262 + 여유 4 → 320~620 넘침 0 */ @media (max-width:339px){.help-flow-b .help-flow-stage{aspect-ratio:1/1}.help-flow-b .help-ex{width:36%}.help-flow-b .help-ex li{font-size:10.5px}} @media (prefers-reduced-motion:reduce){.help-flow-b .help-ex li,.help-flow-b .help-ex i,.help-flow-b .help-ex b,.help-flow-b .help-flow-r,.help-flow-b .help-flow-stage::before{transition:none}} /* ── 지금 할 일 ─────────────────────────────────────── */ .help-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px} /* 카드 4장(대표 시안 2026-10-06 '2번 대응 가이드'): 테두리 없는 옅은 바탕 카드('박스 테두리 제거'), 번호·STEP → 제목 → 설명 → (바닥) 안내 상자·버튼. 마지막 카드(상담)만 옅은 파랑. */ .help-step{display:flex;flex-direction:column;gap:12px;padding:24px 22px 22px;border-radius:20px;background:var(--paper);min-width:0} .help-step-last{background:#EAF1FF} .help-step h3{margin:6px 0 0;font-size:clamp(18px,1.7vw,21px);line-height:1.35;word-break:keep-all} .help-step>p:not(.help-step-k),.help-step-d>p{margin:0;color:var(--mute);font-size:15px;line-height:1.75;word-break:keep-all} .help-step>p b,.help-step-d>p b{color:var(--navy);font-weight:700} .help-step-d{display:grid;gap:12px;align-content:start} /* 1번 설명 두 문단을 한 줄(행)로 묶는다 */ .help-foot{margin:2px 0 0;font-size:13px;line-height:1.6;color:var(--mute);word-break:keep-all} .help-aside{margin:0;font-size:14px;line-height:1.6;color:var(--navy);font-weight:500;background:#fff;border-radius:12px;padding:14px 16px;word-break:keep-all} /* 안내 문구 + 버튼 한 카드(대표 2026-10-19 그림) — 흰 카드 안에 문구, 아래 테두리 버튼. 카드 바탕(#F4F6FA) 위라 카드 자체는 테두리 없음(10-14 '테두리 없애줘'), 흰 카드 위 흰 버튼은 경계가 안 보여 버튼에만 가는 선 */ .help-act.help-act-card{background:#fff;border-radius:16px;margin-top:14px;padding:14px 16px 16px;gap:14px} /* 다른 카드의 블록은 위 14px 이 빈 여백(.help-act padding-top)이라 흰 상자가 14px 아래서 시작한다 — 이 카드도 그 14px 을 바깥 여백으로 두고(흰 칠 밖), 안쪽 글 시작선은 안내 상자(.help-aside padding 14px)와 같게(대표 2026-10-19 '정렬 똑바로 맞춰', 실측 14px 어긋남) */ .help-act-card .help-aside{background:none;padding:0;border-radius:0} .help-act-card .help-btn{border:1px solid var(--line)} .help-act-card .help-btn:hover,.help-act-card .help-btn:focus-visible{border-color:var(--signal)} .help-now .sec-head h2 .acc{color:var(--signal)} .help-step .ks,.help-step .kc{display:inline} /* 좁은 카드에서는 문장 덩어리(조판 필터)를 풀어 자연 줄바꿈 — 묶인 채로는 줄이 들쭉날쭉 끊긴다(2026-10-06 라이브 실측). 낱말 묶음(.nw)은 그대로 */ @media (min-width:640px){.help-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}} @media (min-width:1080px){.help-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.help-step{padding:28px 24px 24px}} /* 대표 2026-10-15 '각 카드의 [안내 상자·버튼 블록] 들 규격 및 위치 맞춰' — 2열 이상에서는 카드 네 줄(번호·제목·설명·블록)을 같은 행끼리 맞춘다. 블록은 그 행의 맨 위에서 시작(바닥 정렬 대신 시작선 정렬) → 같은 줄 카드의 안내 상자·첫 버튼이 같은 높이에 선다. 짧은 블록 아래는 빈칸으로 남는다. */ @supports (grid-template-rows:subgrid){@media (min-width:640px){ .help-step{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:12px;align-content:start} .help-act{margin-top:0;align-content:start} }} /* ── 효과 없는 대응 ─────────────────────────────────── */ /* 2026-10-14 대표 시안: 왼쪽 제목·문장·상담 버튼, 오른쪽 2×2 항목(붉은 ×, 제목, 설명). 행 사이 가는 선 */ .help-nope2{display:grid;gap:30px} @media (min-width:980px){.help-nope2{grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr);align-items:center;gap:56px}} .help-nope2-l .eyebrow{color:#7FA8FF} /* 어두운 구간 소제목 색(홈 .band-dark 와 같음) */ .help-nope2-l h2{color:#fff;font-size:clamp(28px,3.3vw,44px);line-height:1.28;margin:12px 0 16px;word-break:keep-all} .help-nope2-l p{color:var(--on-ink);opacity:.86;font-size:15.5px;line-height:1.7} .help-nope2-l .btn{margin-top:24px} .help-nope2-list{list-style:none;margin:0;padding:0;display:grid} .help-nope2-list li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:22px 0;border-top:1px solid rgba(195,211,236,.14)} .help-nope2-list li:first-child{border-top:0;padding-top:0} @media (min-width:640px){.help-nope2-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}.help-nope2-list li:nth-child(2){border-top:0;padding-top:0}} .help-nope2-x{width:34px;height:34px;border-radius:50%;background:rgba(242,84,91,.16);color:#F2545B;display:grid;place-items:center;font-size:18px;font-weight:700;line-height:1} .help-nope2-list h3{font-size:19px;color:#fff;font-weight:700;line-height:1.4;margin:3px 0 8px} .help-nope2-list p{color:var(--on-ink);opacity:.82;font-size:15px;line-height:1.65;word-break:keep-all} .help-nope-end{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:17px;color:var(--on-ink)} /* ── 신고 창구 ─────────────────────────────────────── */ .help-ch{display:grid;gap:12px} @media (min-width:760px){.help-ch{grid-template-columns:repeat(2,minmax(0,1fr))}} .help-ch-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:10px;align-content:start;transition:border-color .2s ease,box-shadow .2s ease,opacity .2s ease} /* 2026-10-15 대표 지시: 카드 위 상황 꼬리표 — 붉은 테두리(피해 대응 그림의 '악성 앱 즉시 삭제' 버튼과 같은 #F2545B). 흰 카드 위라 글자는 진한 빨강(대비 5:1 이상) */ .help-ch-card .help-ch-tag{justify-self:start;margin:0;padding:5px 11px;border:1px solid #F2545B;border-radius:9px;background:rgba(242,84,91,.07);color:#C42F37;font-size:13px;font-weight:700;line-height:1.45;word-break:keep-all} /* 2026-10-15 대표 지시: 버튼 두 개를 가로로 나란히, 글자는 번호·주소만 → 같은 날 '규격 자체가 너무 이상하잖아' 로 버튼 규격 통일: 모든 버튼 = 반 칸(같은 폭)·높이 50px(대응 가이드 버튼과 같음)·가운데 정렬·같은 글꼴. 버튼이 하나인 카드도 같은 폭. 카드는 데스크톱도 2×2(4열이면 카드 안쪽 228px 라 ecrm.police.go.kr 이 반 칸에 여백 없이 꽉 찬다 — gpt-6-astra 블라인드 판정 Y) */ .help-ch-act{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:360px;margin-top:4px} .help-ch-act>a{display:flex;align-items:center;justify-content:center;height:50px;min-width:0;padding:0 8px;border-radius:10px;box-sizing:border-box;white-space:nowrap;text-decoration:none;font-family:inherit;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums} /* 넓은 화면: 꼬리표·제목·설명·버튼 네 줄을 같은 행끼리 맞춘다(subgrid) — 제목이 1줄/2줄로 갈려도 설명·버튼 시작 높이가 같다 */ @supports (grid-template-rows:subgrid){@media (min-width:760px){.help-ch{grid-auto-rows:auto}.help-ch-card{grid-row:span 4;grid-template-rows:subgrid;row-gap:10px}}} .help-ch-k{font-size:30px;font-weight:700;line-height:1;color:var(--signal)} .help-ch-card h3{font-size:17px;line-height:1.4} .help-ch-card p{font-size:14.5px;color:var(--mute)} .help-ch-call{background:var(--navy);color:#fff} /* 신고 ≠ 해결 + 신고 전 준비 자료 한 영역(대표 2026-10-15 상자 → 10-19 이미지 지시로 두 칸을 합침): 흰 바탕 한 장, 두 줄 — 윗줄은 준비 자료, 아랫단은 별개 안내. 각 줄은 [글 | 버튼], 넓은 화면에서 버튼 칸은 세로 구분선 오른쪽(버튼 색은 그대로: 주 행동 파랑·나머지 선 버튼) */ .help-solve{margin-top:22px;display:grid;border-radius:16px;background:#fff;border:1px solid var(--line);overflow:hidden} .help-solve-row{display:grid;gap:14px;padding:20px 22px;min-width:0} .help-solve-row + .help-solve-row{border-top:1px solid var(--line)} .help-solve-prep p{margin:0;font-size:15px;line-height:1.6;color:var(--mute)} .help-solve-prep p b{color:var(--navy);font-weight:700} .help-solve h3{font-size:19px;line-height:1.4;color:var(--navy)} .help-solve-t{display:grid;gap:6px;min-width:0} .help-solve-t p{font-size:15px;color:var(--mute);margin:0} .help-solve-act{display:flex;flex-wrap:wrap;gap:10px} .help-solve-act .btn-line{color:var(--navy)} @media (min-width:900px){ .help-solve-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0;padding:22px 30px} .help-solve-row>:first-child{padding-right:28px} .help-solve-act{flex-direction:column;align-items:stretch;align-self:stretch;justify-content:center;width:316px;padding-left:28px;border-left:1px solid var(--line)} /* 두 줄의 구분선이 같은 세로선에 서게 고정 폭 — 가장 긴 버튼('몸캠피싱 신고 방법 자세히 보기', 조판이 낱말 사이를 붙여 꺾이지 않는다)이 한 줄로 들어가는 폭 */ .help-solve-act .btn{justify-content:center;white-space:nowrap} } @media (max-width:480px){.help-solve-act .btn{flex:1 1 100%}} /* ── 진행 과정 ─────────────────────────────────────── */ .help-track{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:t} @media (min-width:760px){.help-track{grid-template-columns:repeat(4,minmax(0,1fr))}} .help-track li{border-top:2px solid var(--signal);padding:16px 4px 4px;display:grid;gap:6px} .help-track li:nth-child(2){border-color:#5C95F9}.help-track li:nth-child(3){border-color:#8FB0EE}.help-track li:nth-child(4){border-color:var(--frost)} .help-track .mono{font-size:13px;color:var(--frost)} .help-track h3{font-size:20px;color:#fff} .help-track p{font-size:15px;color:var(--on-ink-mute)} /* ── 자주 묻는 질문 ─────────────────────────────────── */ .help-faq-grid{display:grid;gap:26px} @media (min-width:900px){.help-faq-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.45fr);align-items:start}.help-faq-head{position:sticky;top:calc(88px + var(--pin-h,0px))}} .help-faq-head{margin:0} .help-faq-head h2 .mono{font-size:.6em;color:var(--signal);vertical-align:middle} .help-faq-head a{color:var(--signal)} .help-search input{width:100%;font:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--navy)} .help-search input:focus{outline:2px solid var(--signal);outline-offset:1px;background:#fff} .help-count{font-size:13px;color:var(--mute);min-height:1.2em} .help-faq-g{font-size:14px;color:var(--signal);font-weight:500;margin:6px 0 2px} .help-faq-g ~ .help-faq-g{margin-top:28px} .help-faq-g .mono{color:var(--mute)} .help-q summary{line-height:1.5} .help-q p{white-space:pre-line;overflow-wrap:anywhere} .help-q-src{display:inline-block;margin-top:8px;font-size:13px;color:var(--signal)} .help-q mark{background:#FFF1B8;color:inherit;border-radius:2px} .help-empty{padding:18px 0;color:var(--mute)} .help-empty a{color:var(--signal)} /* 상황별 글(허브-스포크) — FAQ 검색이 숨기지 않게 #faqList 바깥, 데스크톱은 질문 열 아래 · 칸은 한 줄에 하나 */ @media (min-width:900px){.help-reads{grid-column:2}} .help-reads-h{font-size:14px;color:var(--signal);font-weight:500;margin:0 0 10px} .help-faq-grid .help-camp-list{grid-template-columns:minmax(0,1fr)} .help-faq-grid .help-camp-list a{background:var(--paper)} /* FAQ 홈 모양(2026-10-14): 제목 아래 캠페인 게시판 버튼, 더보기 안 검색·나머지 질문, 상황별 글은 그 아래 */ .help-faq-camp{margin-top:18px} .help-faq button.pill-more{background:none;border:0;font-family:inherit;cursor:pointer} /* 홈은 , 여기는 펼치기라