/* /test 재개편 시험 페이지 스타일 (2026-09-23). 기존 스킨과 분리 — 이 파일은 /test 에서만 로드된다.
   색은 기존 체계 승격: #347BF7(스킨 CTA) · #0F1E33(inquiry 네이비) · #C3D3EC(보조). 글꼴은 자체 호스팅 Pretendard. */
:root{
  color-scheme: light;
  --ink:#0B1627;      /* 히어로·다크 섹션 바탕 (기존 네이비 #0F1E33 을 한 단계 깊게) */
  --navy:#0F1E33;     /* 기존 inquiry 네이비 — 제목·본문 */
  --signal:#347BF7;   /* 기존 스킨 CTA 블루 — 행동에만 쓴다 */
  --frost:#C3D3EC;    /* 기존 보조색 */
  --paper:#F4F6FA;    /* 밝은 섹션 바탕 */
  --line:#DCE3EE;
  --mute:#5B6B82;
  --on-ink:#E8EEF7;
  --on-ink-mute:#8FA2BD;
  --sans:"Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gut:clamp(16px,4vw,48px);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--navy);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){body{padding-bottom:0}}
/* 하단 바 자리는 body 가 아니라 푸터가 비운다 — body 여백(밝은 바탕)이 어두운 푸터와 하단 바 사이에 흰 띠로 보였다(iPhone 17 Pro Max 실측 2026-10-02: 여백 76 > 바 71). 모든 페이지가 _bottom 의 .site-foot 로 끝난다(_top·_bottom 10/10) */
@media (max-width:899px){body{padding-bottom:0}body .site-foot{padding-bottom:calc(36px + 76px + env(safe-area-inset-bottom,0px))}}
a{color:inherit}
h1,h2,h3{text-wrap:balance;word-break:keep-all;margin:0;letter-spacing:-.02em}
p{word-break:keep-all;margin:0}
/* 어절 단위 줄바꿈을 모든 요소에(2026-10-08) — p·h 에만 있어 링크 카드 제목·FAQ 질문·동의 문구·바닥글 주소가 낱말 중간에서 끊겼다
   (9쪽×6폭 실측 129건, 조판 필터는 a·summary 안 문장을 감싸지 않는다). 긴 영문·주소는 넘칠 때만 끊는다. 코드성 문자열(.console-v·.map-pk·.post-meta a·.post-files a)은 아래에서 break-all 유지. */
body{word-break:keep-all;overflow-wrap:break-word}
/* 한국어 줄바꿈(2026-09-28) — 서버 조판 필터(Kotype)가 의미 덩어리를 NBSP 로 묶고, 짧은 문구의 문장을 .ks 로 감싼다.
   .ks 는 한 덩어리 문장: 줄에 다 안 들어가면 새 줄에서 시작한다. pretty 는 마지막 줄에 한 어절만 남는 것을 줄인다. */
.ks{display:inline-block;max-width:100%}
/* 홈 첫 화면 아래 구간은 화면에 다가올 때 그린다(2026-10-08 콘텐츠 seo 감사: 전환 후 홈 TBT 가 현재 홈의 약 2배 — Lighthouse 3회 382~453 vs 184~253ms 재현).
   원인 분해: 서드파티(w.js·채널톡·GTM)는 양쪽 같고, 커진 것은 문서 자체(스타일·레이아웃·렌더 — 요소 약 3,700개)와 지도·콘솔 초기화.
   배포 전 라이브 주입 A/B(4배 CPU 감속, 5회씩): TBT 근사 중앙값 928→552ms · CLS 0 · 전부 그린 뒤 구간 높이 차 0 · 앵커 9개 도착 위치 차 0 ·
   sticky 위치 같음 · 접기·책장·콘솔·수상 동작 같음(390·1280). 화면 차는 글자 안티앨리어싱 수준(합성 층).
   제외: 앞 3구간(히어로·상담·첫 이야기 — 첫 화면) · #network(지도 '크게 보기'가 position:fixed — 이 속성의 paint 격리 안에선 화면 기준이 아니라 구간 기준이 된다).
   새 구간에 fixed 오버레이를 넣으면 이 규칙의 :not() 에 그 구간을 더한다. :has 를 모르는 브라우저는 규칙 전체를 무시(지금과 같음). */
main#top:has(>section.hero)>section:nth-of-type(n+4):not(#network){content-visibility:auto;contain-intrinsic-size:auto 900px}
.kc{display:inline-block;max-width:100%}   /* Kotype 절(쉼표) 덩어리 — 한 줄에 다 안 들어가는 문장은 쉼표 뒤에서 끊긴다(대표 2026-09-30) */
.nw{white-space:nowrap}
p,li,dd,dt,figcaption,blockquote,small,label,td{text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}

/* 시안 표기 */
.proto{background:#FFF7D6;color:#5A4600;font-size:13px;padding:8px var(--gut);text-align:center}
.form-sent{background:#E7F6EE;color:#0E5A3A;font-size:15px;line-height:1.55;padding:14px 16px;border-radius:14px;margin:0 0 12px;font-weight:500}
.form-sent a{color:inherit;font-weight:700}
.agree-more{font-size:13px;color:#5B6B82;text-decoration:underline;margin-left:4px}
.proto b{font-weight:700}

/* 헤더 */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(11,22,39,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(195,211,236,.12)}
.hdr .wrap{display:flex;align-items:center;gap:24px;height:64px}
.logo{display:flex;align-items:center;text-decoration:none}   /* 글자 'ARKLINK 아크링크' → 공식 로고 이미지(2026-10-07) */
.logo img{display:block;height:40px;width:auto}
.foot-logo{display:block;height:32px;width:auto;margin:2px 0 4px}
.nav{display:none;gap:22px;margin-left:auto;color:var(--on-ink);font-size:15px}
.nav a{text-decoration:none;opacity:.86}
.nav a:hover{opacity:1}
.hdr-call{margin-left:auto;display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-family:var(--mono);font-size:15px}
.hdr-call span{display:none;font-family:var(--sans);font-size:12px;color:var(--on-ink-mute)}
@media (min-width:980px){.nav{display:flex}.hdr-call{margin-left:12px}.hdr-call span{display:inline}}

/* 히어로 */
.hero{background:var(--ink);color:var(--on-ink);overflow:hidden;position:relative}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:32px;padding-block:44px 36px}
@media (min-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;padding-block:72px 64px;gap:48px}}
.hero h1{font-size:clamp(34px,6.2vw,60px);line-height:1.12;font-weight:700;color:#fff}
.hero h1 em{font-style:normal;color:var(--frost)}
.hero .lede{margin-top:18px;font-size:clamp(16px,1.6vw,18px);color:var(--on-ink);max-width:34em;opacity:.92}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:12px;font-weight:700;font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:var(--sans)}
.btn-primary{background:var(--signal);color:#fff}
.btn-primary:hover{background:#2767d8}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(195,211,236,.35)}
.btn-ghost .mono{font-size:17px}
@media (max-width:599px){.cta-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cta-pair .btn{padding:0 10px;white-space:nowrap}.cta-pair .btn-ghost{flex-direction:column;gap:1px;line-height:1.2}.cta-pair .btn-ghost .mono{font-size:13px;font-weight:600;opacity:.85}}   /* 홈 첫 화면: 휴대폰에서 무료 상담 신청·전화 상담 한 줄(대표 2026-10-15), 번호는 둘째 줄 */
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:13px;color:var(--on-ink-mute)}
.trust b{color:var(--on-ink);font-weight:500}

/* 해결 원장 */
.ledger{position:relative;border:1px solid rgba(195,211,236,.14);border-radius:18px;padding:18px 18px 14px;background:linear-gradient(180deg,rgba(52,123,247,.07),rgba(52,123,247,0) 60%)}
.ledger-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.ledger-top .big{font-family:var(--mono);font-size:clamp(34px,4.6vw,48px);color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.ledger-top .big small{font-size:14px;color:var(--on-ink-mute);margin-left:6px;font-family:var(--sans)}
.ledger-top .cap{font-size:13px;color:var(--on-ink-mute);text-align:right}
#ledgerCanvas{display:block;width:100%;height:240px;margin-top:12px}
@media (min-width:900px){#ledgerCanvas{height:300px}}
.ticker{margin-top:10px;border-top:1px dashed rgba(195,211,236,.18);padding-top:10px;font-size:13px;color:var(--on-ink);min-height:44px;display:flex;gap:10px;align-items:flex-start}
.ticker .when{font-family:var(--mono);color:var(--frost);white-space:nowrap}
.ticker .t{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ledger-note{margin-top:8px;font-size:11.5px;color:var(--on-ink-mute)}

/* 섹션 공통 */
section{padding-block:clamp(56px,8vw,104px)}
.sec-head{display:grid;gap:14px;margin-bottom:36px;max-width:44em}
.sec-head h2{font-size:clamp(26px,3.6vw,40px);line-height:1.2;font-weight:700}
.sec-head p{color:var(--mute);font-size:17px}
/* 설명을 제목 오른쪽 한 줄로(해결 사례 진행 과정, 대표 2026-10-19 이미지 '여기 바꿔주세요'). 900px 미만은 위 기본(제목 아래) */

/* 지금 할 일 */
.steps{display:grid;gap:14px;grid-template-columns:1fr;counter-reset:s}
@media (min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 20px 20px;position:relative}
.step .n{font-family:var(--mono);font-size:13px;color:var(--signal);letter-spacing:.08em}
.step h3{font-size:20px;margin-top:8px}
.step p{margin-top:8px;color:var(--mute);font-size:15px}
.step .bar{position:absolute;left:20px;right:20px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--frost);overflow:hidden}
.step .bar i{display:block;height:100%;width:100%;background:var(--signal);transform-origin:left;transform:scaleX(var(--p,1))}

/* 아카이브 */
.archive{background:#fff}
.arc-grid{display:grid;gap:40px}
@media (min-width:960px){.arc-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);align-items:start}}
.arc-stat .big{font-family:var(--mono);font-size:clamp(44px,6vw,72px);line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.arc-stat .unit{font-size:15px;color:var(--mute);margin-top:8px}
.bars{margin-top:28px;display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;font-size:14px}
.bar-row>span:first-child{min-width:0;overflow-wrap:anywhere}
.bar-row .track{height:12px;background:var(--paper);border-radius:6px;overflow:hidden}
.bar-row .fill{height:100%;background:var(--navy);border-radius:6px}
.bar-row.hi .fill{background:var(--signal)}
.bar-row .v{font-family:var(--mono);font-size:13px;color:var(--mute);min-width:9.5em;text-align:right}
.arc-foot{margin-top:18px;font-size:13px;color:var(--mute)}
.cards{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:620px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;background:#fff;transition:transform .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-2px);border-color:var(--frost)}
.card img,.card .card-ph{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--ink)}   /* 비율 고정: 원본 비율이 달라 한 줄의 카드 제목 높이가 어긋났다(2026-09-28) */
.card .card-ph{background:linear-gradient(135deg,var(--ink),#1c3357)}
.card .body{padding:14px 16px 16px;display:grid;gap:6px;align-content:start}   /* start: 옆 카드 높이만큼 늘어날 때 남는 높이가 메타 줄에 나눠 들어가 제목이 내려가던 결함(2026-09-28) */
.card .meta{font-family:var(--mono);font-size:12px;color:var(--mute);display:flex;gap:10px}
.card .meta b{color:var(--signal);font-weight:500}
.card h3{font-size:16px;line-height:1.45;font-weight:500}

/* 기술 */
.tech{background:var(--ink);color:var(--on-ink)}
.tech .sec-head p{color:var(--on-ink-mute)}
.tech .sec-head h2{color:#fff}
.sol-list{display:grid;border-top:1px solid rgba(195,211,236,.14)}
.sol{display:grid;grid-template-columns:44px 1fr;gap:4px 16px;padding:22px 0;border-bottom:1px solid rgba(195,211,236,.14);align-items:baseline}
@media (min-width:860px){.sol{grid-template-columns:60px minmax(0,1fr) minmax(0,1.3fr) 180px;gap:24px}}
.sol .n{font-family:var(--mono);color:var(--on-ink-mute);font-size:13px}
.sol h3{font-size:20px;color:#fff;font-weight:500}
.sol p{color:var(--on-ink);opacity:.8;font-size:15px;grid-column:2}
.sol .prod{grid-column:2;font-family:var(--mono);font-size:13px;color:var(--frost)}
@media (min-width:860px){.sol p{grid-column:auto}.sol .prod{grid-column:auto;text-align:right}}
.tech-note{margin-top:18px;font-size:13px;color:var(--on-ink-mute)}

/* 증거 벽 */
.proof-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;-webkit-overflow-scrolling:touch}
.strip figure{margin:0;flex:0 0 auto;width:min(46vw,210px);scroll-snap-align:start}
.strip img{display:block;width:100%;height:auto;aspect-ratio:300/420;object-fit:cover;border-radius:6px;box-shadow:0 1px 2px rgba(15,30,51,.08),0 8px 24px -12px rgba(15,30,51,.35);background:#fff}
/* 함께한 기관 — 모든 카드가 같은 상자(로고 칸 고정 높이 + 이름 두 줄 칸). 로고는 원색 그대로, 칸 안에 contain */
.orgs{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.org-g{margin-top:18px}
.org-g h4{font-size:14px;font-weight:600;color:var(--mute);margin:0 0 10px}
.org-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:560px){.org-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.org-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.org{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.org-logo{height:52px;width:100%;display:flex;align-items:center;justify-content:center}
.org-logo img{max-width:88%;max-height:40px;width:auto;height:auto;object-fit:contain}
.org-logo b{font-size:14px;line-height:1.35;font-weight:700;color:var(--navy);text-align:center;word-break:keep-all}
.org-name{font-size:13px;line-height:1.35;color:var(--mute);text-align:center;min-height:2.7em;width:100%;display:grid;align-content:center;word-break:keep-all;overflow-wrap:anywhere}
.org-txt .org-logo{flex:1;height:auto;min-height:calc(62px + 2.7 * 13px * 1)}  /* 로고 칸 52 + 간격 10 + 이름 칸 2.7em — 이름만 있는 카드도 같은 높이 */
.org-txt .org-name{display:none}

/* 생태계 */
.eco{background:#fff}
.eco-sum{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14px;color:var(--mute)}
.eco-sum b{font-family:var(--mono);color:var(--navy);font-size:18px;font-weight:500;margin-right:4px}

/* FAQ */
.faq-grid{display:grid;gap:30px}
@media (min-width:900px){.faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}}
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font-size:17px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--signal)}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--mute);font-size:15px}

/* 마감 */
.close{background:var(--ink);color:var(--on-ink)}
.close .wrap{display:grid;gap:28px}
@media (min-width:900px){.close .wrap{grid-template-columns:1.1fr 1fr;align-items:center}}
.close h2{font-size:clamp(28px,4vw,44px);color:#fff;line-height:1.2}
.close p{color:var(--on-ink-mute);margin-top:12px}
.form{background:#fff;color:var(--navy);border-radius:18px;padding:22px;display:grid;gap:12px}
.form label{font-size:13px;color:var(--mute);display:grid;gap:6px}
/* 아이폰(WebKit) 좁은 폭에서 신청서가 화면 밖으로 넘쳤다: 열 폭 미지정 grid 인 label 이 입력칸 기본 폭(333px)을 열 폭으로 잡고, form 도 grid 항목이라 그만큼 커졌다(393폭 3px·375폭 18px 넘침, 2026-10-02 실측). 크롬 엔진 화면은 변화 0 */
.form{min-width:0}.form label{grid-template-columns:minmax(0,1fr)}
.form input,.form select,.form textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy)}
.form .agree{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--mute)}
.form .agree input{width:18px;height:18px}
.form .err{font-size:14px;color:#B42318;min-height:1.2em}
.num-copy{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:22px;color:#fff;background:transparent;border:1px solid rgba(195,211,236,.35);border-radius:12px;padding:10px 16px;cursor:pointer}
.num-copy small{font-family:var(--sans);font-size:12px;color:var(--on-ink-mute)}

.site-foot{background:#081120;color:var(--on-ink-mute);font-size:13px;padding-block:36px}
.site-foot .wrap{display:grid;gap:10px}
.foot-biz wbr{display:none}   /* 사업자 정보 줄(_bottom.php): 조판 필터가 메일 '@' 뒤에 넣는 <wbr> 은 .nw 안에서도 줄을 끊는다(크롬 실측 2026-10-30) — 메일은 한 덩어리로 */
@media (max-width:599px){.foot-biz .fb-l{display:block}.foot-biz .fb-d{display:none}}   /* 휴대폰: 항목마다 한 줄(대표 2026-10-30 '줄바꿈 정돈') */
@media (min-width:600px){.foot-biz .fb-l{white-space:nowrap}}   /* 넓은 폭: 줄은 항목 사이('·' 뒤)에서만 — 가장 긴 항목(주소) 약 400px < 600px 본문 폭 */
.src{margin-top:18px;border-top:1px solid rgba(195,211,236,.12);padding-top:18px}
.src summary{font-size:13px;color:var(--on-ink);font-weight:500}
.src ul{margin:10px 0 0;padding-left:18px;display:grid;gap:4px}

/* 모바일 행동 도크 */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:#0B1627;border-top:1px solid rgba(195,211,236,.14)}
.dock .btn{min-height:50px;font-size:15px;white-space:nowrap;padding:0 12px}
@media (min-width:900px){.dock{display:none}}
/* 채널톡(#ch-plugin, z-index 10000000)의 캠페인 팝업 영역(화면 아래 ~125px)이 하단 바 3칸을 전부 덮어 탭 0 이었다(2026-09-28 실측, 스왑 미리보기).
   운영 홈 main_consult_banner.css 와 같은 처방: 하단 바를 그 위로 올리고, 메신저가 열려 채널톡이 body 에 ch-scroll-lock 을 달면 비켜 준다. */
.dock{z-index:10000001}
body.ch-scroll-lock .dock{z-index:60}
body.ch-scroll-lock .guide{z-index:60}   /* 길잡이도 같은 처방 — 8판(2026-10-20)부터 상담 폼 구간에서도 떠 있으므로 메신저가 열리면 그 아래로(gpt-6-astra 심사: 카드만 메신저 위에 남는 층위) */
/* 스왑(live): 하단 바에 채팅 상담이 더해져 3칸 */
.dock.dock-3{grid-template-columns:1fr 1fr 1.35fr;gap:6px;padding-inline:10px}
.dock.dock-3 .btn{padding:0 6px;font-size:14px}
@media (max-width:340px){.dock.dock-3{gap:4px;padding-inline:6px}.dock.dock-3 .btn{padding:0 3px;font-size:13px}}   /* 320px 에서 3칸 최소폭 323px(2026-09-28 실측) */
/* 꼬리 전체 메뉴(운영 cfg_menu) */
.foot-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 20px;padding-bottom:22px;margin-bottom:12px;border-bottom:1px solid rgba(195,211,236,.12)}
.foot-menu-h{color:var(--on-ink);font-weight:700;text-decoration:none}
.foot-menu ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.foot-menu ul a{color:inherit;text-decoration:none}
.foot-menu a:hover{text-decoration:underline}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* 링크 카드 */
a.sol{text-decoration:none;color:inherit}
a.sol:hover h3{text-decoration:underline;text-underline-offset:4px}
.sat-mark{width:32px;height:32px;border-radius:8px;background:var(--navy);display:grid;place-items:center;color:#fff;font-family:var(--mono);font-size:13px}
.ticker a.t{color:var(--on-ink);text-decoration:none}
.faq-grid .sec-head a{color:var(--signal)}

/* ── 위협 성좌(히어로·연구소) ─────────────────────────── */
.stars{position:relative;display:grid;gap:12px}
.stars canvas{display:block;width:100%;height:320px}
@media (min-width:900px){.hero .stars canvas{height:460px}}
/* 모바일(2026-09-26 3차): 2차에서 성좌를 글 뒤에 깔았더니 제목·설명과 겹쳤다(3차 리뷰 B11) → 히어로 맨 위의 독립된 띠(180px)로
   옮기고 글과 겹치지 않게 한다. 띠 안에는 개수와 연구소 링크만 얹고 긴 설명·범례는 뺀다(설명은 연구소 절에 있다). */
@media (max-width:899px){
  .hero{padding-top:0}   /* 공통 section 상단 여백(56px)이 .wrap 여백과 겹쳐 첫 화면을 비웠다 */
  .hero .wrap{padding-block:0 32px;gap:22px}
  .hero .stars{order:-1;position:relative;display:grid;gap:6px;padding-top:12px}
  .hero .stars canvas{height:170px}
  .hero .stars .legend,.hero .stars figcaption>span:not(.stars-k):not(.stars-l){display:none}
  .hero .stars .stars-l{color:var(--on-ink)}
  .hero .stars figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13px}
  .hero .stars .stars-k{font-size:28px}
  .hero .stars figcaption::after{content:none}
}
@media (max-width:899px){html.vh-short .hero .stars canvas{height:130px}}   /* 짧은 폰 조건은 로드 때 한 번(html.vh-short, _top.php) — 뷰포트 높이 미디어 쿼리는 크롬 iOS 툴바 접힘마다 뒤집혀 히어로 높이를 흔든다(2026-10-21) */
.stars-lg canvas{height:380px}   /* 휴대폰·태블릿 연결 지도(연구소 개요·홈 악성 서버 연결) — 선(앱 줄 → 악성 서버)이 남는 높이를 다 채우는 그림이라 높이가 곧 선 길이다. 420 → 380(대표 2026-10-30 "세로로 너무 긴 것같아. 선을 좀 짧게") */
@media (min-width:900px){.stars-lg canvas{height:560px}}
.stars-xl canvas{height:380px}   /* 연구소 '악성 서버 연결' 탭 — 520 → 380(같은 지시, 선 약 335 → 200px@390). 개요(stars-lg)보다 작아지지 않게 같은 값 */
@media (min-width:900px){.stars-xl canvas{height:720px}}
.stars figcaption{font-size:14px;color:var(--on-ink-mute);display:grid;gap:6px}
.stars figcaption b{color:var(--on-ink);font-weight:500}
.stars figcaption a{color:var(--frost)}
.stars-k{font-size:40px;line-height:1;color:#fff}
.stars-l{display:none}
@media (max-width:899px){.hero .stars .stars-l{display:inline}}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--on-ink-mute)}
.legend i,.stack-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px}
.tip{position:absolute;z-index:5;max-width:240px;padding:8px 10px;border-radius:8px;background:rgba(8,17,32,.95);border:1px solid rgba(195,211,236,.2);color:var(--on-ink);font-size:12.5px;line-height:1.45;pointer-events:none}

/* ── 홈 연구소 요약 ─────────────────────────────────────── */
.lab-teaser{background:var(--ink);color:var(--on-ink);border-top:1px solid rgba(195,211,236,.08)}
.lab-teaser .sec-head h2{color:#fff}
.lab-teaser .sec-head p{color:var(--on-ink-mute)}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(195,211,236,.12);border:1px solid rgba(195,211,236,.12);border-radius:16px;overflow:hidden;margin-bottom:32px}
@media (min-width:760px){.kpis{grid-template-columns:repeat(4,1fr)}}
.labpage .kpis{grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.labpage .kpis{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.labpage .kpis{grid-template-columns:repeat(6,1fr)}}
/* 연구소 지표 5칸(대표 2026-10-14 '악성앱 유형' 칸 제외): 2열이면 마지막 칸을 한 줄로 펼쳐 빈 칸을 없애고, 760px 이상은 5칸 한 줄 */
.labpage .kpis-5>div:last-child{grid-column:1/-1}
@media (min-width:760px){.labpage .kpis-5{grid-template-columns:repeat(5,1fr)}.labpage .kpis-5>div:last-child{grid-column:auto}}
.kpis div{background:var(--ink);padding:18px 18px 16px;display:grid;gap:6px}
.kpis .k{font-size:clamp(28px,3.4vw,40px);line-height:1;color:#fff}
.kpis .l{font-size:13px;color:var(--on-ink-mute)}
.exfil{display:grid;gap:10px;max-width:760px}
.exfil h3{font-size:16px;color:#fff;font-weight:500;margin-bottom:6px}
.lab-teaser .bar-row .track,.lab-dark .bar-row .track{background:rgba(195,211,236,.12)}
.lab-teaser .bar-row .fill{background:var(--signal)}
.lab-teaser .bar-row .v{color:var(--on-ink-mute)}
.lab-more{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
.btn-line{background:transparent;color:inherit;border:1px solid currentColor;opacity:.9}
.lab-teaser .btn-line,.close .btn-line{color:#fff}

/* ── 해결 사례 ─────────────────────────────────────────── */
.cases{background:var(--ink);color:var(--on-ink)}
.cases .sec-head h2{color:#fff}
.cases .sec-head a{color:var(--frost)}
.cases-grid{display:grid;gap:28px}
@media (min-width:900px){.cases-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center}}

/* ── 연구소 페이지 ─────────────────────────────────────── */
.lab-hero{background:var(--ink);color:var(--on-ink);padding-block:clamp(40px,6vw,72px) 0}
.lab-hero h1{font-size:clamp(30px,5vw,52px);line-height:1.15;color:#fff;margin-top:12px}
.lab-hero .lede{margin-top:14px;max-width:44em;color:var(--on-ink);opacity:.9}
.lab-hero .lede b{color:#F6C453;font-weight:500}
.tabs{display:flex;gap:4px;margin-top:28px;overflow-x:auto}
.tabs a{padding:12px 16px;border-radius:10px 10px 0 0;text-decoration:none;color:var(--on-ink-mute);font-weight:500;white-space:nowrap}
.tabs a[aria-current]{background:var(--paper);color:var(--navy)}
.tabs a[aria-current] .mono{color:var(--signal)}
.lab-dark{background:var(--ink);color:var(--on-ink);padding-block:28px clamp(40px,6vw,72px)}
.labpage > section:nth-of-type(2).lab-dark{padding-top:0}
.lab-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}   /* 암시 열은 내용 최소폭으로 늘어난다 — 360px 에서 22px 가로 넘침(2026-09-28 실측) */
@media (min-width:900px){.lab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start;min-width:0}
.panel h2{font-size:19px}
.panel .sub{color:var(--mute);font-size:13.5px;margin-top:-4px}
.panel-wide{grid-column:1/-1}
.panel .bar-row{grid-template-columns:minmax(64px,9.5em) 1fr auto}
.panel .bar-row .v{min-width:6.5em}
.stack{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px}
.stack-legend{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px}
.months{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:18px;overflow-x:auto;overflow-y:hidden}   /* 달이 늘면 제 칸 안에서 가로로 — 320px 에서 39px 넘침(2026-09-28) */
.mcol{flex:1;display:grid;grid-template-rows:1fr auto auto;height:100%;align-items:end;text-align:center;min-width:0}
.mbar{display:block;background:var(--navy);border-radius:4px 4px 0 0;align-self:end}
.mv{font-size:11px;color:var(--navy)}
.ml{font-size:10.5px;color:var(--mute)}
.apps{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:680px){.apps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.apps{grid-template-columns:repeat(3,1fr)}}
.app{display:grid;gap:10px;align-content:start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;color:inherit}
.app:hover{border-color:var(--frost)}
.app-top{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center}
.app-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:700}
.app-n{display:grid;min-width:0}
.app-n b{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-n small{font-size:11.5px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-t{font-family:var(--mono);font-size:11px;padding:3px 7px;border-radius:6px;background:var(--paper);color:var(--navy)}
.app-t.t-extreme{background:#FDE7E8;color:#A3232A}.app-t.t-critical{background:#FFF0E0;color:#9A4E00}.app-t.t-high{background:#FDF4DA;color:#7A5A00}
.app-s{font-size:14px;color:var(--mute);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere}
.app-m{display:flex;gap:12px;font-size:12px;color:var(--mute)}
.lab-recent{background:var(--paper)}
/* 연구소 '최근 분석' 6장(lab.php .apps-mq) — 899px 이하는 공용 흐르는 줄(ark2026.js 3g)의 트랙: 한 줄 flex, 다음 카드가 보이게 칸 폭은 줄 폭의 80%(최대 300px). 900px 이상은 위 .apps 격자 그대로 — 트랙의 max-content 폭을 풀어 넘침이 없게(엔진이 .mq-fit 고정, 복제 0) */
@media (max-width:899px){.apps-mq .apps.mq-track{display:flex;gap:12px}.apps-mq .apps.mq-track>.app{flex:0 0 auto;width:272px;width:min(300px,80cqw)}.apps-mq .mq-rail{scroll-snap-type:x mandatory}.apps-mq .app{scroll-snap-align:start}}
@media (min-width:900px){.apps-mq .apps.mq-track{width:auto}.apps-mq .apps.mq-track>[data-mq-clone]{display:none}}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px}
.filters input,.filters select{font:inherit;font-size:15px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy)}
.filters input{flex:1 1 240px}
.filters .count{margin-left:auto;color:var(--mute);font-size:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.table-wrap{overflow-x:auto;overflow-y:hidden;border:1px solid var(--line);border-radius:14px;background:#fff}
table.hubs{border-collapse:collapse;width:100%;font-size:14px}
table.hubs th,table.hubs td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.hubs th{font-size:12.5px;color:var(--mute);font-weight:500;background:var(--paper)}
table.hubs td.mono{white-space:nowrap}
/* 열 비율(대표 2026-10-28 "비율 배치 좀 똑바로 … '연결된 / 앱' 없어 보이게"): 가장 긴 서버 주소 하나(44자)가 첫 열을 433px 로 늘려 앱 이름 열이 눌리고 머리글 '연결된 앱'이 두 줄로 꺾였다(900~1280 실측).
   640px 이상 = 고정 배치 — 서버 32%(주소는 [.] 뒤에서만 줄바꿈, lab.php <wbr>) · 연결된 앱 96px(머리글 한 줄·숫자 오른쪽 정렬) · 앱 이름 나머지. 휴대폰(639 이하)은 아래 행 카드 배치 그대로 */
@media (min-width:640px){
  table.hubs{table-layout:fixed}
  table.hubs th{white-space:nowrap}
  table.hubs th:nth-child(1){width:32%}
  table.hubs th:nth-child(2){width:96px}
  table.hubs td:nth-child(1){white-space:normal;overflow-wrap:anywhere}
  table.hubs th:nth-child(2),table.hubs td:nth-child(2){text-align:right;font-variant-numeric:tabular-nums}
  table.hubs td:nth-child(3){word-break:keep-all;overflow-wrap:anywhere}
}
.nav a[aria-current]{opacity:1;color:#fff;text-decoration:underline;text-underline-offset:6px}


/* ── 솔루션 작동 영상 카드 ─────────────────────────────── */
.motion-list{display:grid;gap:16px}
@media (min-width:980px){.motion-list{grid-template-columns:repeat(2,1fr)}}
.motion{display:grid;grid-template-columns:1fr;background:#fff;color:var(--navy);border-radius:18px;overflow:hidden;text-decoration:none}
@media (min-width:620px){.motion{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
.motion-txt{padding:22px;display:grid;gap:8px;align-content:start}   /* center 면 요약 길이에 따라 옆 카드와 제목 높이가 갈린다 */
.motion-txt .n{font-size:12.5px;color:var(--signal)}
.motion-txt h3{font-size:19px}
.motion-txt p{font-size:14.5px;color:var(--mute)}
.motion-txt .more{font-size:13.5px;color:var(--signal);font-weight:500}
.motion-vid{background:#fff;display:block}
.motion-vid video{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain}
.motion:hover h3{text-decoration:underline;text-underline-offset:4px}

/* ── 피해자 인터뷰 영상 ───────────────────────────────── */
.videos{background:var(--paper)}
.vgrid{display:grid;gap:18px;grid-template-columns:1fr}
@media (min-width:640px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.vgrid{grid-template-columns:repeat(3,1fr)}}
.vcard{margin:0;display:grid;gap:10px}
.vplay{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:12px;overflow:hidden;background:var(--ink);cursor:pointer}
.vplay img{display:block;width:100%;height:100%;object-fit:cover}
.vicon{position:absolute;left:50%;top:50%;width:64px;height:44px;margin:-22px 0 0 -32px;border-radius:12px;background:rgba(11,22,39,.82)}
.vicon::after{content:"";position:absolute;left:26px;top:13px;border-left:16px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.vplay:hover .vicon{background:var(--signal)}
.vcard iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px}
.vcard figcaption{display:grid;gap:4px;font-size:15px;line-height:1.5}
.vcard figcaption a{color:var(--navy);text-decoration:none;font-weight:500}
.vcard figcaption span{font-size:12px;color:var(--mute)}

/* ── 언론 보도 ─────────────────────────────────────────── */
.press{margin-top:40px}
.press h3,.proof-sub{font-size:15px;font-family:var(--mono);letter-spacing:.06em;color:var(--signal);font-weight:500;margin-bottom:12px}
.press-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.press-card{flex:0 0 auto;width:min(70vw,260px);scroll-snap-align:start;display:grid;grid-template-rows:auto 1fr auto;gap:8px;text-decoration:none;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}   /* 2026-09-30 대표: 날짜는 카드 바닥 한 자리(제목 행이 1fr 로 남는 높이를 먹는다) — 줄 안 카드들은 flex 로 같은 높이 */
.press-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--paper)}
.press-card>span{padding:0 12px;font-size:14px;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;align-self:start}   /* 직계 자식만 — 후손 선택자였을 땐 Kotype 의 중첩 span.nw 까지 -webkit-box+padding 이 걸려 "(주)아크링크"가 제 줄로 떨어지고 쉼표가 줄 머리에 왔다(2026-09-30) */   /* 어절 단위 줄바꿈(대표 2026-09-30 "줄바꿈 교정") */
.press-card>small{padding:0 12px 12px;font-size:12px;color:var(--mute);align-self:end}

/* ── DeepScan 소개 ─────────────────────────────────────── */
.ds-feature{display:grid;gap:20px;align-items:center;margin-bottom:22px;background:var(--ink);color:var(--on-ink);border-radius:18px;padding:22px}
@media (min-width:900px){.ds-feature{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);padding:28px}}
.ds-txt{display:grid;gap:10px;align-content:center}
.ds-txt h3{font-size:22px;color:#fff}
.ds-txt p{color:var(--on-ink-mute);font-size:15px}
.ds-txt .btn-line{color:#fff;justify-self:start}
.ds-play{position:relative;border:0;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#000;aspect-ratio:16/9}
.ds-play img{display:block;width:100%;height:100%;object-fit:cover}
.ds-feature video{display:block;width:100%;border-radius:12px;aspect-ratio:16/9;background:#000}

/* ── DeepScan 작동 그래프(홈 영상 자리) — 2026-09-29 대표 '영상 대신에 시각적 그래프 … gif 같은 걸로' → 'deep-scan.ai 의 내용을 제대로 이해하지 못하고 만든 것 같아'
   deep-scan.ai 공식 4단계(원본 등록 → 지문 추출 → 24시간 수집 → 확인과 채증)를 반복 재생. 문구 출처는 home.php 주석.
   기본 스타일 = 완성 화면(스크립트 없음·모션 줄이기·썸네일 캡처). 스크립트가 .dsv-js 를 붙이고 시간순으로 .t1~.t14 를 더한다(화면 밖이면 멈춤). */
.dsv-stage{margin:0;position:relative;background:#050B16;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;display:grid;gap:10px;min-width:0;color:var(--on-ink);align-content:center}
@media (min-width:900px){.dsv-stage{padding:14px 16px;min-height:100%}}
.dsv-rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;counter-reset:dsvr}
.dsv-rail li{counter-increment:dsvr;font-size:11px;line-height:1.3;color:#C8D6EE;border-top:2px solid var(--signal);padding-top:5px;word-break:keep-all;transition:opacity .4s,border-color .4s,color .4s}
.dsv-rail li::before{content:counter(dsvr) ' ';font-family:var(--mono);color:#7FA6E8}
.dsv-body{display:grid;gap:8px;min-width:0}
@media (min-width:900px){.dsv-body{grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) minmax(0,.95fr);align-items:stretch}}
.dsv-col{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px;display:grid;gap:8px;align-content:start;min-width:0}
.dsv-reg{display:flex;align-items:center;gap:8px;transition:opacity .4s}
.dsv-reg strong{font-size:12.5px;color:#fff;line-height:1.3;word-break:keep-all}
.dsv-film{flex:0 0 30px;height:22px;border-radius:4px;background:#1B2A44;border:1px solid rgba(255,255,255,.25);display:flex;gap:2px;padding:3px;align-items:stretch}
.dsv-film i{flex:1;border-radius:1px;background:linear-gradient(160deg,#9CC3FF,#347BF7)}
.dsv-print small{display:block;font-size:11px;color:#7FA6E8;margin-bottom:3px}
.dsv-fp{display:flex;align-items:flex-end;gap:2px;height:16px;min-width:0}
.dsv-print .dsv-fp{height:24px}
.dsv-fp i{flex:1;min-width:1px;height:var(--h);background:var(--signal);border-radius:1px;transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 18ms)}
.dsv-fp-src i{background:#E6EEF9}
.dsv-del{margin:0;font-size:10.5px;line-height:1.4;color:var(--on-ink-mute);word-break:keep-all}
.dsv-h{margin:0;font-size:11px;color:#7FA6E8;line-height:1.3;word-break:keep-all}
.dsv-rows{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.dsv-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:5px 7px;transition:opacity .4s,transform .4s,border-color .4s}
.dsv-row.is-hit{border-color:rgba(52,123,247,.55)}
.dsv-row.is-miss{opacity:.5}
.dsv-where{display:grid;min-width:0}
.dsv-where b{font-size:11.5px;color:#fff;font-weight:600;line-height:1.3}
.dsv-where small{font-size:10px;color:var(--on-ink-mute);line-height:1.3;word-break:keep-all}  /* 말줄임 금지 — 좁으면 줄을 바꾼다 */
.dsv-sig{display:flex;gap:2px}
.dsv-sig i{width:5px;height:12px;border-radius:1px;background:rgba(255,255,255,.14);transition:background-color .3s;transition-delay:calc(var(--i) * 45ms)}
.dsv-sig i.on{background:var(--signal)}
.dsv-row em{font-style:normal;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 7px;white-space:nowrap;transition:opacity .3s}
.dsv-row.is-hit em{background:var(--signal);color:#fff}
.dsv-row.is-miss em{border:1px solid rgba(255,255,255,.3);color:var(--on-ink-mute)}
.dsv-check{margin:0;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#fff;transition:opacity .4s}
.dsv-tick{width:16px;height:16px;border-radius:50%;background:#22C55E;position:relative;flex:0 0 16px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.dsv-tick::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.dsv-hist{margin:0;display:grid;gap:1px;border-left:2px solid var(--signal);padding-left:7px;transition:opacity .4s}
.dsv-hist strong{font-size:12px;color:#fff}
.dsv-hist small{font-size:10.5px;color:var(--on-ink-mute)}
.dsv-ev{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.dsv-ev li{font-size:11px;color:#DCE6F5;line-height:1.3;display:flex;gap:6px;align-items:center;transition:opacity .35s}
.dsv-ev li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--signal);flex:0 0 7px}
.dsv-out{margin:0;justify-self:start;font-size:11px;font-weight:700;color:#fff;background:var(--signal);border-radius:999px;padding:3px 9px;transition:opacity .35s,transform .35s}
.dsv-stage figcaption{font-size:11px;color:var(--on-ink-mute);line-height:1.45}
/* 시작 상태 — 스크립트가 붙인 .dsv-js 에서만, 해당 시각(.tN)이 오기 전까지 */
.dsv-js .dsv-rail li{opacity:.35;border-top-color:rgba(255,255,255,.2)}
.dsv-js.t1 .dsv-rail .r1,.dsv-js.t2 .dsv-rail .r2,.dsv-js.t3 .dsv-rail .r3,.dsv-js.t9 .dsv-rail .r4{opacity:1;border-top-color:var(--signal)}
.dsv-js:not(.t1) .dsv-reg{opacity:.2}
.dsv-js:not(.t2) .dsv-print .dsv-fp i{transform:scaleY(.08)}
.dsv-js:not(.t2) .dsv-del{opacity:0}
.dsv-js:not(.t3) .q1,.dsv-js:not(.t4) .q2,.dsv-js:not(.t5) .q3,.dsv-js:not(.t6) .q4{opacity:0;transform:translateX(-6px)}
.dsv-js:not(.t4) .q1 .dsv-sig i.on,.dsv-js:not(.t5) .q2 .dsv-sig i.on,.dsv-js:not(.t6) .q3 .dsv-sig i.on,.dsv-js:not(.t7) .q4 .dsv-sig i.on{background:rgba(255,255,255,.14)}
.dsv-js:not(.t5) .q1 em,.dsv-js:not(.t6) .q2 em,.dsv-js:not(.t7) .q3 em,.dsv-js:not(.t8) .q4 em{opacity:0}
.dsv-js:not(.t7) .q3.is-miss{opacity:.9}
.dsv-js:not(.t9) .dsv-check{opacity:.25}
.dsv-js:not(.t9) .dsv-tick{transform:scale(0)}
.dsv-js:not(.t10) .dsv-hist{opacity:0}
.dsv-js:not(.t11) .dsv-ev .e1,.dsv-js:not(.t11) .dsv-ev .e2,.dsv-js:not(.t12) .dsv-ev .e3,.dsv-js:not(.t12) .dsv-ev .e4,.dsv-js:not(.t13) .dsv-ev .e5{opacity:.15}
.dsv-js:not(.t14) .dsv-out{opacity:0;transform:scale(.85)}
/* 수치 4장(deep-scan.ai 공개 카드) — 영상 카드 아래 */
.dsv-stats{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.dsv-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dsv-stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:8px;align-content:start;min-width:0}
.dsv-num{font-size:clamp(26px,3.2vw,34px);line-height:1.1;color:var(--signal);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dsv-gauge{display:block;height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.dsv-gauge i{display:block;height:100%;width:var(--p);background:var(--signal);border-radius:4px;transform-origin:left}
.dsv-dots{display:flex;gap:4px;height:8px;align-items:center}
.dsv-dots i{width:8px;height:8px;border-radius:50%;background:var(--signal)}
.dsv-dots i:first-child{background:var(--navy)}
.dsv-stat .dsv-fp-mini{grid-area:auto;width:100%;height:8px;gap:1px}
.dsv-stat .dsv-fp-mini i{background:var(--signal)}
.dsv-lbl{font-size:12.5px;color:var(--mute);line-height:1.5;word-break:keep-all}
.dsv-ttl{font-size:14.5px;font-weight:700;color:var(--navy);line-height:1.45;word-break:keep-all}
.dsv-note{font-size:12px;color:var(--mute);margin:10px 0 0}
.dsv-stats-anim .dsv-gauge i{transform:scaleX(0)}
.dsv-stats-anim .dsv-dots i{opacity:0;transform:scale(.3)}
.dsv-stats-anim.on .dsv-gauge i{transform:none;transition:transform 1.2s cubic-bezier(.2,.8,.2,1) .3s}
.dsv-stats-anim.on .dsv-dots i{opacity:1;transform:none;transition:opacity .25s,transform .3s;transition-delay:calc(300ms + var(--i) * 110ms)}

/* ── 연구소: 닥터피싱 ─────────────────────────────────── */
.kpis-light{background:var(--line);border-color:var(--line);margin-bottom:12px}
.kpis-light div{background:var(--paper)}
.kpis-light .k{color:var(--navy)}
.kpis-light .l{color:var(--mute)}
.labpage .kpis-light{grid-template-columns:repeat(3,1fr)}
.drp-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}   /* 열 최소 폭 0 — 기본(auto)이면 가장 긴 이름 한 줄(horsetalk_patched_v2 등)에 열이 맞춰져 375px 이하에서 날짜 164개가 전부 상자 밖으로 잘렸다(2026-10-28 실기기·실측 9~68px) */
@media (min-width:760px){.drp-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}}
.drp-list a{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);text-decoration:none;color:var(--navy);font-size:14.5px}
.drp-list .mono{font-size:12px;color:var(--mute);white-space:nowrap}
.drp-list b{min-width:0;overflow-wrap:anywhere}   /* 긴 이름은 줄을 바꾸고 날짜 칸은 지킨다 */
.drp-note{font-size:12.5px;color:var(--mute);font-weight:400}
.drp-scroll{max-height:276px;overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:thin;padding-right:6px;outline-offset:4px}   /* 종전 6줄 높이(41×6+6×5, 2026-10-28 실측) — 그 안에서 전부 스크롤 */
@media (min-width:760px){.drp-scroll{max-height:135px}}   /* 두 열: 종전 6개 = 3줄(41×3+6×2) */
.drp-scroll::-webkit-scrollbar{width:6px}
.drp-scroll::-webkit-scrollbar-thumb{background:rgba(15,30,51,.22);border-radius:3px}

/* ── 헤더 CTA·모바일 메뉴(JS 0 — details/summary) ──────── */
.hdr-cta{display:none;margin-left:10px;padding:9px 14px;border-radius:10px;background:var(--signal);color:#fff;text-decoration:none;font-weight:700;font-size:14px}
@media (min-width:980px){.hdr-cta{display:inline-flex}}
.mnav{margin-left:12px;position:relative}
@media (min-width:980px){.mnav{display:none}}
.mnav summary{list-style:none;cursor:pointer;width:40px;height:40px;display:grid;place-content:center;gap:5px;border-radius:10px;border:1px solid rgba(195,211,236,.25)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary span{display:block;width:18px;height:2px;background:#fff;border-radius:2px}
.mnav[open] summary{background:rgba(195,211,236,.12)}
.mnav nav{position:absolute;right:0;top:48px;min-width:220px;background:var(--ink);border:1px solid rgba(195,211,236,.18);border-radius:14px;padding:8px;display:grid;box-shadow:0 18px 40px -12px rgba(0,0,0,.5)}
.mnav nav a{padding:12px 14px;color:var(--on-ink);text-decoration:none;border-radius:10px;font-size:16px}
.mnav nav a[aria-current]{background:rgba(52,123,247,.18);color:#fff}
.mnav nav a.mnav-cta{margin-top:6px;background:var(--signal);color:#fff;text-align:center;font-weight:700}
/* 979px 이하에서 헤더 전화 링크는 내용이 전부 숨겨져(위 '.hdr-call span{display:none}' 가 줄바꿈 필터의 <span class="nw">번호</span> 까지 숨긴다) 폭 0 인 채
   탭 순서에만 남아 있었다(13쪽 전부·axe link-name, 2026-10-01 실측). 화면은 그대로 두고 링크만 접근성 트리·탭 순서에서 뺀다 — 전화는 하단 바·본문 버튼이 맡는다.
   번호를 모바일 헤더에 다시 보일지(9-23 초안은 보였다)는 대표 결정 사항이라 여기서 바꾸지 않는다. */
@media (max-width:979px){.hdr-call{display:none}.mnav{margin-left:auto}}   /* 메뉴 버튼을 오른쪽 끝에 붙이던 것은 이 링크의 margin-left:auto 였다 — 링크를 빼면 그 역할을 메뉴 버튼이 직접 맡는다(안 하면 버튼이 로고 옆 188px 로 온다: 배포 직후 8폭 실측으로 적발) */

/* ── 하위 페이지 머리(공통 원형) ─────────────────────────
   <section class="phero"><div class="wrap phero-grid"><div class="phero-txt"> eyebrow·h1·lede·cta-row </div>
   <div class="phero-vis"> 선택: 캔버스·영상·목업 </div></div></section>                        */
.phero{background:var(--ink);color:var(--on-ink);padding-block:clamp(44px,7vw,88px) clamp(40px,6vw,72px);overflow:hidden;position:relative}
.phero-grid{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.phero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.phero h1{font-size:clamp(32px,5.2vw,56px);line-height:1.13;color:#fff;margin-top:12px}
.phero h1 em{font-style:normal;color:var(--frost)}
.phero .lede{margin-top:16px;font-size:clamp(16px,1.6vw,18px);max-width:40em;opacity:.92}
.phero .crumbs,.lab-hero .crumbs{font-size:13px;color:var(--on-ink-mute);display:flex;gap:6px;flex-wrap:wrap}
.phero .crumbs a,.lab-hero .crumbs a{color:var(--on-ink-mute);text-decoration:none}
.phero-vis{position:relative;min-height:240px}
.band{background:var(--paper)}
.band-white{background:#fff}
.band-dark{background:var(--ink);color:var(--on-ink)}
.band-dark .sec-head h2{color:#fff}.band-dark .sec-head p{color:var(--on-ink-mute)}
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:28px}
.pager-clip{margin-top:16px}
.pg-clip{overflow-x:clip}   /* 쪽 넘김 효과가 상자 밖으로 나가 가로 넘침으로 읽히지 않게(ark2026.js 3g-9) — 스크롤 상자가 아니라 표 머리 고정이 산다 */
@supports not (overflow-x:clip){@media (max-width:639px){.pg-clip{overflow:hidden}}}   /* clip 이 없는 옛 브라우저: 표 머리 고정이 없는 폭에서만 hidden */   /* 긴 표 쪽 넘김(ark2026.js 3g-9, 휴대폰) — 표 바로 아래라 목록 쪽 번호(28px)보다 붙인다 */
table.pg-l{animation:pgL .28s ease}table.pg-r{animation:pgR .28s ease}   /* 넘긴 방향에서 들어온다 — 다음 쪽은 오른쪽에서, 이전 쪽은 왼쪽에서(탭 장 밀기 live.css lvSwL·R 과 같은 결) */
@keyframes pgL{from{opacity:.3;transform:translate3d(40px,0,0)}to{opacity:1;transform:none}}
@keyframes pgR{from{opacity:.3;transform:translate3d(-40px,0,0)}to{opacity:1;transform:none}}
.pager a,.pager span,.pager button{min-width:40px;height:40px;display:grid;place-items:center;padding:0 10px;border-radius:10px;border:1px solid var(--line);text-decoration:none;color:var(--navy);font-family:var(--mono);font-size:14px;background:#fff}
.pager [aria-current]{background:var(--navy);color:#fff;border-color:var(--navy)}
.pager .pager-arw,.pager .pager-off{font-family:var(--sans);font-size:17px}
.pager .pager-off{color:#b3bdcc;border-color:#edf0f5}   /* 갈 곳 없는 처음·이전·다음·끝 — 자리는 지키고 흐리게(_pager.php) */
.pager button{cursor:pointer;line-height:1}
.pager a:hover,.pager button:hover{border-color:var(--signal);color:var(--signal)}
@media (max-width:420px){.pager{gap:4px}.pager a,.pager span,.pager button{min-width:34px;padding:0 6px}}   /* « ‹ 5칸 › » 9칸 = 34×9+4×8 = 338px — 390px(쓸 폭 338) 한 줄 */
@media (max-width:380px){.pager .pager-far{display:none}}   /* 360px 은 쓸 폭 300 → 번호 3칸(7칸 262px) */
/* 휴대폰·태블릿(899px 이하) 쪽 번호는 한 줄 — 칸이 줄 폭에 맞춰 줄어든다(대표 2026-10-30 "끝 쪽 아이콘이 밑으로 내려가 있어": 421~430px 에서 40×9+6×8=408 > 쓸 폭 396 이라 » 가 둘째 줄로) */
@media (max-width:899px){.pager{flex-wrap:nowrap}.pager a,.pager span,.pager button{flex:0 1 40px;min-width:0;padding:0}}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chips a{padding:9px 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--navy);font-size:14.5px;background:#fff}
.chips a[aria-current]{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ── 분석 기록 재생 콘솔 ───────────────────────────────── */
.lab-split{display:grid;gap:22px;align-items:start}
.lab-left{display:flex;flex-direction:column;gap:16px;min-width:0}
.lab-left .console{flex:1 1 auto}
.lab-left .lab-more{margin:0}
@media (min-width:980px){.lab-split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch}}
@media (max-width:979px){.lab-split{display:flex;flex-direction:column;align-items:stretch}.lab-left{display:contents}   /* align-items:stretch — 기본 규칙의 start 가 상속돼 콘솔 폭이 내용물 크기(마운트 순간 124px)로 수축해 min-height 예약이 1,384px 로 튀었다(2026-10-07, 머리글 제거로 드러난 잠복 결함) */.lab-left .console{order:1}.lab-split>div:not(.lab-left){order:2}.lab-left .lab-more{order:3}}   /* 한 칸 배치: 콘솔 → 막대 → 버튼 */
/* 홈 연구소는 머리 숫자 4칸을 뺐다(대표 2026-10-01) — 두 열 높이는 같고, 오른쪽 열은 남는 높이를 막대 줄 사이에 고르게 나눠 아래 문구가 왼쪽 버튼 하단선에 닿는다(콘솔 높이는 console.js 가 예약해 재생 중 안 변한다) */
.exfil-bars{display:grid;gap:10px}
.lab-teaser .bar-row{grid-template-columns:104px 1fr 3.6em}.lab-teaser .bar-row .v{min-width:0}   /* 값이 퍼센트만 남았다 — 개수용 9.5em 폭 제거(막대·숫자 사이 빈칸), 라벨 열은 '기기·전화 정보'가 한 줄로 들어가게 */
@media (min-width:980px){.lab-split [data-lab-num]{display:flex;flex-direction:column}.lab-split .exfil{flex:1 1 auto;display:flex;flex-direction:column}.lab-split .exfil-bars{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between}.lab-split .exfil-note{padding-top:12px}}
.console{background:#060D18;border:1px solid rgba(195,211,236,.16);border-radius:16px;overflow:hidden;min-height:300px;box-shadow:0 24px 60px -30px rgba(0,0,0,.8)}
.console-wide{margin-bottom:24px}
.console-head{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid rgba(195,211,236,.1);font-size:12.5px;color:var(--on-ink-mute)}
.console-dots{display:flex;gap:6px}
.console-dots i{width:9px;height:9px;border-radius:50%;background:rgba(195,211,236,.25)}
.console-dots i:first-child{background:#F2545B}
.console-title{letter-spacing:.06em}
.console-idx{margin-left:auto;color:var(--frost)}
.console-body{padding:16px 16px 18px;display:grid;gap:10px;font-size:13.5px;line-height:1.55}
.console-row{display:grid;grid-template-columns:5.6em 1fr;gap:10px}   /* 라벨 '앱 이름·악성 서버·위험도'(대표 2026-10-14) — 4.2em 이면 '악성 서버'가 값 칸을 침범 */
.console-k{color:var(--signal);white-space:nowrap}
.console-v{color:var(--on-ink);word-break:break-all}
.console-row.is-verdict .console-v{color:#fff;font-weight:600}
.console[data-t="extreme"] .is-verdict .console-v{color:#FF8A8F}
.console[data-t="critical"] .is-verdict .console-v{color:#FFB870}

/* 공용 결함 보정(2026-09-23 페이지 제작자 보고): .sec-head p 가 .eyebrow 색을 덮어쓰던 것 */
.sec-head p.eyebrow{color:var(--signal)}
.band-dark .sec-head p.eyebrow,.tech .sec-head p.eyebrow,.lab-teaser .sec-head p.eyebrow,.cases .sec-head p.eyebrow{color:#7FA8FF}
/* 모바일 메뉴가 FAQ 용 전역 details/summary 규칙(+ 기호·밑줄·여백)을 물려받던 것 차단(2026-09-23 실측) */
details.mnav{border:0;padding:0}
details.mnav summary::after{content:none}
details.mnav summary{font-size:0}
/* 실패·상태 안내(2026-09-25) */
.chat-notice{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:10000002;max-width:min(92vw,420px);background:#0F1E33;color:#fff;border:1px solid rgba(195,211,236,.3);border-radius:12px;padding:12px 16px;font-size:14px;line-height:1.5;margin:0;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.media-fail,.lab-fail{font-size:14px;color:#C3D3EC;margin:8px 0}
.media-fail a,.lab-fail a{color:#fff;text-decoration:underline}
.foot-links{margin-top:8px}
.foot-links a{color:inherit;text-decoration:underline;font-weight:600}
.form textarea{resize:vertical;min-height:84px;line-height:1.5}
.form label small{color:var(--mute);font-weight:400}
.form-bad{background:#FDECEC;color:#8A1C1C}
.ds-quote{margin:0 0 10px;padding:0 0 0 14px;border-left:3px solid var(--signal)}
.ds-quote p{margin:0}
.ds-quote footer{font-size:12px;color:var(--mute);margin-top:6px}
/* 대표 사례(2026-09-26) — 인용 4단 흐름. 세로 레일 하나에 단계 번호를 달고, 마지막 결과만 신호색으로 */
.case{background:#fff;color:var(--navy)}
.case .sec-head p a{color:var(--signal)}
.case-rail{list-style:none;margin:28px 0 0;padding:0 0 0 22px;position:relative;display:grid;gap:26px;max-width:820px}
.case-rail::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--line),var(--signal))}
.case-step{position:relative}
.case-step::before{content:"";position:absolute;left:-22px;top:5px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--signal)}
.case-end::before{background:var(--signal)}
.case-n{display:block;font-size:12px;letter-spacing:.06em;color:var(--mute);margin-bottom:8px}
.case blockquote{margin:0;font-size:clamp(17px,2vw,20px);line-height:1.65;word-break:keep-all;color:var(--navy)}
.case-end blockquote{font-weight:700}
.case-meta{margin:10px 0 0;font-size:14px;color:var(--mute)}
.case-meta b{color:var(--navy)}
.case-tech{margin:0;display:grid;gap:12px}
.case-tech div{padding:14px 16px;border:1px solid var(--line);border-radius:12px}
.case-tech dt a{font-weight:700;color:var(--signal);text-decoration:none}
.case-tech dd{margin:6px 0 0;line-height:1.6;word-break:keep-all}
@media (min-width:760px){.case-tech{grid-template-columns:1fr 1fr}}
.case-lab{margin:26px 0 0;font-size:14px;color:var(--mute);max-width:820px}
.case-lab a{color:var(--signal)}
.case .cta-row{margin-top:24px}
/* 모바일 홈 길이(4차 리뷰 C9): 인터뷰 영상은 4편까지만, 나머지는 '인터뷰 전체 보기'로 */
@media (max-width:899px){.videos .vgrid .vcard:nth-child(n+3){display:none}}   /* 해결 사례 인터뷰 영상: 모바일은 2편 + '인터뷰 전체 보기'(2026-10-07 전수 감사 — 홈·자료와 같은 6편) */
/* 모바일 솔루션 6종: 세로 2,585px → 가로로 넘기는 한 줄(4차 리뷰 C9). 넘침은 이 목록 안에서만 — 페이지는 가로로 밀리지 않는다.
   카드 폭 84% 라 다음 카드가 조금 보여 넘길 수 있음을 알린다. 화면에 들어온 카드의 영상만 재생된다(기존 IntersectionObserver). */
@media (max-width:619px){
  .motion-list{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 8px;scroll-padding:0 var(--gut);overscroll-behavior-x:contain}
  .motion-list .motion{flex:0 0 84%;scroll-snap-align:start;display:flex;flex-direction:column-reverse;justify-content:flex-end}   /* 늘어난 카드의 빈 공간을 아래로 — 영상·제목이 카드마다 같은 높이 */
  .motion-list .motion-txt{padding:16px 18px 20px}
}
/* 연구소 지도 상호작용(2026-09-28) — 조작 줄·선택 패널. 어두운 바탕(.lab-dark) 위. */
.map-ctl{display:grid;gap:10px;margin:0 0 12px}
.map-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.map-q{flex:1 1 220px;min-width:0;font:inherit;font-size:15px;padding:10px 12px;border-radius:10px;border:1px solid rgba(195,211,236,.25);background:rgba(11,22,39,.6);color:var(--on-ink)}
.map-q::placeholder{color:var(--on-ink-mute)}
.map-btn,.map-chip{font:inherit;font-size:13px;padding:8px 12px;border-radius:999px;border:1px solid rgba(195,211,236,.28);background:transparent;color:var(--on-ink);cursor:pointer;min-height:36px}
.map-chip[aria-pressed="true"]{background:var(--c,#347BF7);border-color:var(--c,#347BF7);color:#0B1627;font-weight:700}
.map-chip:not([style])[aria-pressed="true"]{background:#347BF7;border-color:#347BF7;color:#fff}
.map-btn:hover,.map-chip:hover{border-color:rgba(195,211,236,.6)}
.map-lbl{font-size:12px;color:var(--on-ink-mute);margin-right:2px}
.map-count{font-size:13px;color:var(--frost);margin-left:auto}
.map-time{gap:10px}
.map-range{flex:1 1 200px;min-width:0;accent-color:#347BF7}
.map-tlab{font-size:13px;color:var(--frost);min-width:92px}
.map-tnote{flex-basis:100%;font-size:12px;color:var(--on-ink-mute)}
.map-stage{position:relative}
.stars-lg.lab-wait .map-stage::after{content:"연결 지도를 불러오는 중…";position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:rgba(195,211,236,.7);background:radial-gradient(circle at 1px 1px,rgba(195,211,236,.14) 1px,transparent 1.6px) 0 0/22px 22px;pointer-events:none}   /* 자료가 오기 전 지도 자리(2026-10-20): 빈 먹색이 아니라 점무늬와 한 줄 — lab.js 가 받으면 ark2026.js 의 lab-wait 가 떨어져 사라진다 */
/* 히어로 지도 상세(대표 2026-10-01): 넓은 화면에서는 지도 아래쪽에 겹쳐 뜬다 — 엔진이 고른 점을 지도 가운데로 모으므로 아래 44% 만 덮는다(고른 점이 가려지지 않는다).
   좁은 화면은 연구소 지도와 같이 지도 아래에 열린다(밀려 내려가는 건 사용자가 눌렀을 때뿐). */
.hero .map-sel{margin-top:10px;max-height:min(36vh,290px);overflow:auto;font-size:13.5px;padding:14px 16px}
@media (min-width:900px){.hero .map-sel{left:10px;right:10px;bottom:10px;top:auto;width:auto;max-height:44%;margin:0;padding:12px 14px}}
@media (min-width:900px){.hero .map-sel.is-top{top:10px;bottom:auto}}
.hero .tip{max-width:220px}
@media (pointer:coarse){.hero .map-close{min-height:40px;padding:0 16px}}   /* 터치 기기: 닫기 버튼도 손가락 크기로 */
.map-stage canvas:focus-visible{outline:2px solid #347BF7;outline-offset:4px;border-radius:12px}
.map-sel{margin-top:12px;padding:16px 18px;border-radius:14px;background:rgba(8,17,32,.94);border:1px solid rgba(195,211,236,.18);color:var(--on-ink);font-size:14px;line-height:1.55}
@media (min-width:900px){.map-sel{position:absolute;top:12px;right:12px;width:340px;max-height:calc(100% - 24px);overflow:auto;margin:0;z-index:6}}
.map-sel h3{font-size:18px;margin:2px 0 4px;word-break:keep-all;overflow-wrap:anywhere}
.map-k{font-size:12px;color:var(--on-ink-mute);margin:0}
.map-pk{font-size:12px;color:var(--on-ink-mute);margin:0 0 8px;word-break:break-all}
.map-dl{display:grid;gap:4px;margin:8px 0}
.map-dl div{display:grid;grid-template-columns:96px 1fr;gap:8px}
.map-dl dt{color:var(--on-ink-mute)}
.map-dl dd{margin:0;word-break:keep-all;overflow-wrap:anywhere}
.map-xs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.map-tag{font-size:12px;padding:3px 8px;border-radius:999px;background:rgba(242,84,91,.16);color:#FFB3B6}
.map-sum{color:var(--on-ink);opacity:.88;margin:8px 0}
.map-acts{display:flex;flex-wrap:wrap;gap:8px 14px;margin:10px 0 0}
.map-link{font:inherit;font-size:13.5px;background:none;border:0;padding:0;color:#8FB5FF;text-decoration:underline;cursor:pointer;text-align:left}
.map-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;max-height:260px;overflow:auto}
.map-list .mono{font-size:12px;color:var(--on-ink-mute)}
.map-close{float:right;font:inherit;font-size:12.5px;padding:4px 10px;border-radius:999px;border:1px solid rgba(195,211,236,.3);background:transparent;color:var(--on-ink);cursor:pointer}
.map-raw{background:rgba(195,211,236,.1);color:var(--on-ink-mute);font-size:11px}
.map-res{padding:10px 12px;border-radius:12px;background:rgba(8,17,32,.6);border:1px solid rgba(195,211,236,.14)}
.map-res-list{max-height:200px}
.map-btn:disabled{opacity:.6;cursor:default}
/* 검체 기록(2026-09-28) — 아크링크 보안연구소 카드뉴스와 같은 편집 언어: 크림 지면·녹흑 잉크·고정폭 라벨·▲ 도판 설명.
   색은 카드 규격(arklink-cards W1) 그대로. 빨강은 표시(마커)에만 — 행동(버튼)은 사이트 공통 --signal 을 쓴다. */
.spec{--sp-paper:#F2F1EC;--sp-card:#FBFAF7;--sp-line:#D9D7CF;--sp-ink:#171D1A;--sp-ink2:#23302A;--sp-mute:#5C6660;--sp-red:#C13438;--sp-gold:#E3B341;
  background:var(--sp-paper);color:var(--sp-ink);padding:clamp(64px,9vw,120px) 0}
.spec-tag{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px;font-size:12.5px;letter-spacing:.12em;color:var(--sp-mute)}
.spec-tag b{font-weight:500;letter-spacing:.02em;color:var(--sp-red);border:1px solid var(--sp-red);border-radius:3px;padding:2px 8px}
.spec-head h2{font-size:clamp(30px,4.2vw,52px);line-height:1.22;letter-spacing:-.02em;margin:0;color:var(--sp-ink)}
.spec-sub{margin:14px 0 0;color:var(--sp-mute);font-size:17px}
.spec-sum{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:12px;border-top:1px solid var(--sp-line);padding-top:24px}
@media (min-width:900px){.spec-sum{grid-template-columns:repeat(3,1fr);gap:28px}}
.spec-sum li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;align-content:start}
.spec-sum .mono{font-size:12px;color:var(--sp-red);border:1px solid var(--sp-red);border-radius:3px;padding:1px 6px;margin-top:3px}
.spec-sum p{margin:0;font-size:15.5px;line-height:1.7;color:var(--sp-ink2)}
.spec-grid{display:grid;gap:16px;margin-top:40px}
@media (min-width:640px){.spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.spec-wide,.spec-gen{grid-column:1/-1}}
@media (min-width:1100px){.spec-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.spec-wide{grid-column:span 2}.spec-gen{grid-column:span 2}}
.spec-fig{margin:0;background:var(--sp-card);border:1px solid var(--sp-line);border-radius:6px;padding:16px;display:grid;gap:12px;align-content:start}
.spec-lab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;margin:0;font-size:11.5px;letter-spacing:.08em;color:var(--sp-mute)}
.spec-lab span{white-space:nowrap}   /* 라벨은 통째로 줄을 넘긴다 — 좁은 칸에서 '· 권한 요구' 가 쪼개지지 않게 */
.spec-lab span:first-child{color:var(--sp-red)}
.spec-fig img{display:block;width:100%;height:auto;max-width:100%;border:1px solid var(--sp-line);border-radius:3px;background:#fff}
.spec-fig:not(.spec-wide) img{aspect-ratio:1/1;object-fit:cover}
.spec-wide img{aspect-ratio:4/3;object-fit:contain}   /* 가로 도판 두 장의 높이를 맞춘다(원본 1.51·1.25 비율 차로 한쪽 카드가 비었다) */
.spec-fig figcaption{font-size:13.5px;line-height:1.65;color:var(--sp-mute)}
.spec-gen{background:var(--sp-ink);color:#E8EFEA;border-radius:6px;padding:18px 18px 16px;display:grid;gap:14px;align-content:start}
.spec-gen .spec-lab{color:#8FA098}
.spec-gen .spec-lab span:first-child{color:#8FA098}
.spec-gen ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.spec-gen li{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:start;align-content:start}
.spec-gen li>b{font-size:12px;font-weight:500;color:var(--sp-gold);border:1px solid #5C6660;border-radius:3px;text-align:center;padding:3px 0}
.spec-gen h3{margin:0;font-size:16px;color:#FBFAF7}
.spec-gen p{margin:4px 0 8px;font-size:13.5px;line-height:1.6;color:#AEBDB5}
.spec-gen .g{display:block;height:6px;border-radius:2px;background:linear-gradient(90deg,var(--sp-red) 0 44%,transparent 44%)}
.spec-gen .g2{background:linear-gradient(90deg,var(--sp-red) 0 44%,var(--sp-gold) 44% 70%,transparent 70%)}
.spec-gen .g3{background:linear-gradient(90deg,var(--sp-red) 0 44%,var(--sp-gold) 44% 70%,#5C6660 70% 100%)}
.spec-key{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0;font-size:11.5px;color:#8FA098}
.spec-key i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.spec-key .k1{background:var(--sp-red)}.spec-key .k2{background:var(--sp-gold)}.spec-key .k3{background:#5C6660}
.spec-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin:28px 0 0;padding-top:16px;border-top:1px solid var(--sp-line);font-size:14px}
.spec-foot .mono{color:var(--sp-mute);letter-spacing:.06em;font-size:12.5px}
.spec-foot a{color:var(--sp-ink);font-weight:600}
/* 관리자 팝업(운영 layout/popup.html 계약 — _popup.php) */
.ark-pops{position:absolute;top:0;left:0;right:0;height:0;z-index:2000}   /* 폭 0 이면 모바일 팝업의 width:% 가 0 으로 무너진다(리뷰 2차 실측) */
.ark-pop{position:absolute;background:#fff;color:#111;border:1px solid #111;font-size:13px;max-width:calc(100vw - 16px);box-shadow:0 12px 32px rgba(0,0,0,.25)}
.ark-pop[hidden]{display:none}
.ark-pop h4{margin:0;padding:6px 44px 6px 12px;font-size:13px;font-weight:700}
.ark-pop-body{overflow:auto;max-height:70vh}
.ark-pop-body img,.ark-pop-body table,.ark-pop-body div{max-width:100%;height:auto}
.ark-pop-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 12px;border-top:1px solid #ddd}
.ark-pop-foot button{font:inherit;font-weight:700;border:0;background:#111;color:#fff;border-radius:4px;padding:6px 12px;cursor:pointer}
/* 관리자 메인 배너(협력·캠페인) — cfg_mainBanner */
.bnr{background:var(--paper,#F4F6FA)}
.bnr-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,82%);gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding-bottom:6px}   /* overflow-y 를 명시하지 않으면 x:auto 가 y 도 auto 로 만들어, 등장 전 카드의 translateY(24px) 만큼(18px) 세로로 움찔거렸다(대표 2026-10-07 '위아래 스크롤이 왜 허용되어 있는가'). 같은 구조의 가로 스크롤러 8곳(.table-wrap·.awc-track·.rvx-list·.ivx-list·.sxn·.sxn-bar·.mx-shot-row·about.css .about-wall)에도 같은 날 같은 선언을 두었다 — 지금은 세로 넘침 0 이라 그림이 바뀌지 않고, 뒤에 등장 모션이 붙어도 움찔거리지 않는다 */
@media (min-width:900px){.bnr-row{grid-auto-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));overflow:visible}}
.bnr-card{scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;min-width:0}
.bnr-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#E9EDF3}
.bnr-txt{padding:16px 18px 18px;display:grid;gap:8px;align-content:start}
.bnr-sub{margin:0;font-size:13px;color:var(--mute)}
.bnr-txt h3{margin:0;font-size:17px;line-height:1.4}
.bnr-txt .btn{justify-self:start;margin-top:4px}
/* 홈 해결 사례 — 후기 미리보기(2026-09-28, 점그래프 대체). 어두운 섹션 위 카드 */
.rv-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,84%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
@media (min-width:900px){.rv-list{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}}
.rv-card{scroll-snap-align:start;display:grid;grid-template-rows:1fr auto;gap:14px;min-width:0;padding:18px 18px 16px;border:1px solid rgba(195,211,236,.16);border-radius:16px;background:rgba(255,255,255,.04);color:var(--on-ink);text-decoration:none;transition:border-color .2s,background .2s}
.rv-card:hover,.rv-card:focus-visible{border-color:rgba(195,211,236,.4);background:rgba(255,255,255,.07)}
.rv-ex{margin:0;font-size:15px;line-height:1.7;color:#fff}
.rv-ex::before{content:"“";color:var(--frost);font-size:1.3em;line-height:0;margin-right:2px}
.rv-meta{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:12.5px;color:var(--on-ink-mute);border-top:1px dashed rgba(195,211,236,.16);padding-top:10px;min-width:0}
.rv-meta b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rv-meta time{flex:none}
/* 홈 특허·인증·수상 — 사진 줄 아래 전체 목록 이동(2026-09-28) */
.proof-more{margin:18px 0 0;font-size:15px}
.proof-more a{color:var(--signal);font-weight:600;text-decoration:none}
.proof-more a:hover{text-decoration:underline}

/* ══ 홈 배치 개편(2026-09-29 대표 1~19번) — 새 섹션 ═════════════════════════ */
/* 2 언론 */
.press-sec{background:#fff}
.press-sec .sec-head{margin-bottom:22px}
/* 3 수상 연혁 */
/* ── 2026-09-29 대표 시안 재구성: 수상·기관·특허인증·Why·진행 과정·후기·인터뷰·기술력 ── */
/* 수상 연혁 — 엔키 교육 페이지 배치(왼쪽 로고 · 오른쪽 좌우 화살표 카드). 한 장 = [기관 + 상장] */
.awards{background:#fff}
.awc{position:relative;--awc-up:0px;--awc-pad:calc(var(--awc-up) + 6px);margin-top:calc(-1 * var(--awc-pad))}   /* 2026-09-30 대표: 상장 윗변을 섹션 안내문 윗변까지 — ark2026.js 3a 가 --awc-up 을 잰다(6px 는 그림자 여유) */
/* .awc::before 위 구분선은 2026-09-30 대표 지시로 삭제("이 부분의 상단 테두리는 삭제해줘"). --awc-pad 는 상장이 위로 커지는 여백으로만 쓴다. */
.awc-track{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-top:var(--awc-pad)}   /* 아래 구분선 삭제(대표 2026-10-02 '아래 테두리 삭제해 줘') */
.awc-track::-webkit-scrollbar{display:none}
.awc-slide{scroll-snap-align:start;scroll-snap-stop:always;display:grid;gap:18px;padding:28px 0 26px;min-width:0;align-content:start;grid-template-areas:"head" "img" "orgs"}   /* 폰: 머리글 → 상장 → 기관 */
@media (min-width:900px){.awc-slide{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:". img" "head img" "orgs img" ". img";column-gap:40px;row-gap:0;align-items:center;align-content:stretch}.awc-slide .awc-head{align-self:end}.awc-slide .awc-orgs{align-self:start;margin-top:22px}   /* 7차(대표 2026-09-30 "ggc 사이즈가 다른 이미지들이랑 달라"): 상장 칸이 장 전체 높이(1fr 여백행 포함)를 걸치므로 후원 줄이 없는 장도 같은 칸 높이 = 같은 상장 크기. 머리글·기관은 1fr 여백행이 위아래로 가운데 정렬 */   /* 5차: 왼쪽 = 머리글 위 + 기관 묶음, 오른쪽 열 전체 = 상장(카드 없음) */
  /* 6차(대표 "좌측 영역보다 살짝 더 높은 높이로"): 상장 칸은 두 행을 걸치므로 칸 높이 = 왼쪽 묶음 높이. 상장은 그 칸 안에 절대배치(행 높이에 안 끼어듦)하고 위아래 16px 씩 더 높게, 폭은 비율대로 */
  .awc-slide .awc-img{align-self:stretch;justify-self:stretch;position:relative;max-width:none;min-height:0;background:none;box-shadow:none;border-radius:0;overflow:visible;pointer-events:none}
  .awc-slide .awc-img img{position:absolute;top:calc(-1 * var(--awc-img-up,16px));left:50%;height:calc(100% + var(--awc-img-up,16px) + 16px);width:auto;max-width:100%;aspect-ratio:640/851;transform:translateX(-50%);border-radius:8px;background:#fff;box-shadow:0 2px 4px rgba(15,30,51,.08),0 26px 52px -24px rgba(15,30,51,.5);pointer-events:auto;object-fit:contain;transition:transform .25s}
  .awc-slide .awc-img:hover{transform:none}.awc-slide .awc-img:hover img{transform:translate(-50%,-3px)}}
/* 위: 큰 상장 카드 */
.awc-head{grid-area:head;display:grid;gap:6px;min-width:0}
.awc-date{margin:0;font-size:12.5px;letter-spacing:.02em;color:var(--signal)}.awc-date time{font-weight:600}
.awc-title{margin:0;text-align:left;font-size:clamp(20px,2vw,26px);line-height:1.3;color:var(--navy);word-break:keep-all;letter-spacing:-.02em}
.awc-tl{color:inherit;text-decoration:none;text-underline-offset:5px;text-decoration-thickness:2px;transition:color .2s}   /* 관련 소식이 있으면 상 이름이 링크(대표 2026-09-30) */
.awc-tl:hover,.awc-tl:focus-visible{color:var(--signal);text-decoration:underline}
.awc-tarr{display:inline-block;margin-left:.3em;color:var(--signal);font-size:.78em;vertical-align:.08em;transition:transform .2s}
.awc-tl:hover .awc-tarr,.awc-tl:focus-visible .awc-tarr{transform:translateX(4px)}
.awc-img{grid-area:img;display:block;justify-self:center;align-self:center;width:100%;max-width:440px;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 2px 4px rgba(15,30,51,.08),0 26px 52px -24px rgba(15,30,51,.5);transition:transform .25s}   /* 카드 없이 오른쪽 열을 상장이 쓴다(5차) */
.awc-img:hover{transform:translateY(-3px)}
.awc-img img{display:block;width:100%;height:auto;aspect-ratio:640/851;object-fit:contain;background:#fff}
/* 아래: 주최 | 주관 | 후원 가로 한 줄 */
.awc-orgs{grid-area:orgs;display:grid;gap:26px;align-content:center;min-width:0;padding:2px 0}   /* 두 줄을 묶어 머리글 아래(대표 "위 아래 사이 여백이 너무 커") · 테두리·배경 없음 */
.awc-role{min-width:0}
.awc-rl{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--mute);letter-spacing:.04em}
.awc-logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.awc-logos>li{flex:none}
.aw-role{flex:none;font-size:10.5px;font-weight:700;color:var(--signal);background:#EAF1FE;border-radius:4px;padding:1px 6px;letter-spacing:.04em;font-style:normal;line-height:1.4}   /* 칩 안 역할 표시(주최/주관) */
.awc-rl small{font-weight:500;color:var(--mute);margin-left:4px}
.awc-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.aw-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 11px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;color:var(--navy);text-decoration:none;line-height:1.3;white-space:nowrap}
a.aw-chip:hover,a.aw-chip:focus-visible{border-color:var(--signal);color:var(--signal)}
.aw-chip img{height:22px;width:auto;max-width:52px;object-fit:contain}
.aw-chip .aw-sym{height:24px;width:auto;max-width:80px;object-fit:contain;border-radius:5px}   /* 80px: 글자표(대한뉴스·뉴스메이커·K·ESG)가 24px 높이 안에서 읽히는 폭(2026-09-30) */   /* 심볼(정사각 96px 또는 가로 글자표 KSME·K·ESG) */
.aw-chip.aw-txt{padding-left:14px}
.awc-logos .aw-chip{box-sizing:border-box;min-height:44px}   /* 주최·주관 칩은 심볼 유무와 무관하게 같은 높이(글자만인 칩 38 → 44) */
/* 좌우 화살표 — 장 묶음 바깥(≥1280 은 여백에, 900~1279 는 .awc 안쪽 52px 자리에), 900 미만은 숨기고 손으로 민다(scroll-snap) */
@media (min-width:900px) and (max-width:1279px){.awc{padding:0 52px}}
.awc-arr{position:absolute;top:calc(50% + var(--awc-pad,6px) / 2);transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:26px;line-height:1;display:grid;place-items:center;padding:0 0 3px;cursor:pointer;box-shadow:0 8px 20px -10px rgba(15,30,51,.45);z-index:2;transition:background .2s,color .2s,border-color .2s}
.awc-arr[hidden]{display:none}
.awc-arr:hover:not(:disabled),.awc-arr:focus-visible{background:var(--signal);color:#fff;border-color:var(--signal)}
.awc-arr:disabled{opacity:.35;cursor:default}
.awc-prev{left:0}.awc-next{right:0}
@media (min-width:1280px){.awc-prev{left:-58px}.awc-next{right:-58px}}
@media (max-width:899px){.awc-arr{display:none}}
/* 흐르는 줄(사이트 공용 엔진, ark2026.js 3g): [data-mq] 안의 .mq-rail>.mq-track. 원본을 복제해 칸을 2배 이상 채우고 한 세트 폭(--mq-shift)만큼 흘린다. .mq-rev = 반대 방향.
   2026-10-26 대표 "우리 홈페이지의 가로 스크롤, 모두 [후원 기관 줄] 구조나 규칙, 세팅으로 통일하자" → 신규 앱 줄·소식 줄·해결 후기 줄·인터뷰 목록·기관 두 줄·수상 칩 줄·회사 소개 특허 띠·언론 줄이 전부 이 엔진 하나.
   규칙(기관 줄 기준): 끊기지 않을 만큼 복제(보통 한 벌, aria-hidden·탭 순서 제외) · 초당 40px(한 바퀴 최소 14초, 기관 줄 둘째 줄 = 카드당 5초 = 39px/s) · 카드 위 마우스만 멈춤(대표 2026-10-15) · 키보드 초점이면 풀어서 제자리 · 화면 밖(.mq-off)·보이지 않는 장([inert])이면 멈춤 · 가장자리 흐림 없음(대표 2026-09-30 "그라디언트 다 빼") · 멈춤 버튼 없음(2026-09-30).
   스크립트 없음·모션 줄이기 = 복제 없이 손으로 넘기는 줄(overflow-x:auto, 스크롤바 숨김). 원본이 줄 안에 다 들어가면 흐르지 않고 고정(.mq-fit, 대표 2026-09-30 "주관이 적은 경우에는 고정") */
.mq-rail{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.mq-rail.mq-cq{container-type:inline-size}   /* 칸 폭을 줄 폭 비율로 잡는 줄(소식·후기·인터뷰 — 마크업에 mq-cq)만 컨테이너: 100cqw 로 잰다. 모든 .mq-rail 에 주면 회사 소개 언론 줄처럼 바깥 컨테이너(.about-pr) 기준이던 cqw 식이 바뀐다(심사 2026-10-26) */
.mq-rail::-webkit-scrollbar{display:none}
.mq-on .mq-rail,.mq-on.mq-rail{overflow:hidden}   /* 상자가 곧 줄인 경우(.mq-rail[data-mq]) 포함 */
.mq-track{flex-wrap:nowrap;width:max-content}

.mq-on .mq-track{animation:mqMove var(--mq-dur,30s) linear infinite}
.mq-on .mq-rev .mq-track{animation-direction:reverse}
@keyframes mqMove{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--mq-shift,50%)))}}
.mq-paused .mq-track,[inert] .mq-track{animation-play-state:paused}   /* 스크립트(0.3초 포인터 감시)가 붙이는 표식 — :has 를 모르는 브라우저의 멈춤도 이 줄. 아래 :has 규칙과 한 묶음으로 쓰면 미지원 브라우저에서 둘 다 무효가 된다(심사 2026-10-26) */
@media (hover:hover){.mq-on .mq-track:has(>:hover){animation-play-state:paused}}   /* 마우스 멈춤은 칩·카드 위에서만(대표 2026-10-15 '카드에 마우스호버를 해야') — 마우스가 있는 기기만: 휴대폰은 탭한 카드에 :hover 가 남아 줄이 계속 멈춰 있었다(2026-10-26 손가락 밀기 실측) */
.mq-fit .mq-track{animation:none;transform:none}   /* 고정 줄: 같은 상자의 다른 줄이 흘러도 이 줄은 안 움직인다 */
.mq-focus .mq-track{animation:none}   /* 키보드 초점(:focus-visible, ark2026.js 3g 가 붙인다)이면 흐름을 풀어 원래 자리로 — 포커스된 카드가 잘린 영역에 남지 않게. 마우스 클릭의 초점은 풀지 않는다(풀면 트랙이 제자리로 튀어 누르던 카드가 포인터 밑에서 빠진다) */

/* 함께한 기관 — 흐르는 로고 카드 두 줄 */
.orgs-sec{background:#fff;padding-top:0}
.om-box{display:grid;gap:12px;overflow:hidden}   /* 2026-09-30 대표: 상자 배경·테두리 없이 줄만 */
.om-h{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--navy)}
.om-rail{overflow-x:auto;scrollbar-width:none;padding:2px 0}
.om-rail::-webkit-scrollbar{display:none}
.om-track{list-style:none;margin:0;padding:0;display:flex;gap:12px;width:max-content}
.om-card{display:grid;grid-template-rows:1fr auto;gap:6px;width:184px;height:158px;padding:14px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--navy);transition:border-color .2s}
.om-site{display:grid;grid-template-rows:56px auto;align-content:start;justify-items:center;gap:5px;min-height:0;text-decoration:none;color:inherit;border-radius:8px}
.om-card:has(a.om-site:hover),.om-card:has(a.om-site:focus-visible){border-color:var(--signal)}
.om-logo{display:flex;align-items:center;justify-content:center;width:100%;height:56px}
.om-logo img{max-width:88%;max-height:42px;width:auto;height:auto;object-fit:contain}
.om-logo b{font-size:14px;line-height:1.35;text-align:center;word-break:keep-all}
.om-name{font-size:12.5px;line-height:1.35;color:var(--mute);text-align:center;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.om-txt .om-site{grid-template-rows:1fr;align-content:stretch}
.om-txt .om-logo{height:100%}
.om-rel{align-self:end;text-decoration:none;display:flex;gap:5px;align-items:baseline;justify-content:center;flex-wrap:wrap;max-width:100%;padding-top:6px;border-top:1px dashed var(--line);width:100%;font-size:11.5px;line-height:1.35;color:var(--navy);text-align:center}
.om-rel b{flex:none;font-size:10.5px;font-weight:700;color:var(--signal);background:#EAF1FE;border-radius:4px;padding:1px 5px}
.om-rel span{word-break:keep-all;overflow-wrap:anywhere}
a.om-rel span{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;transition:text-decoration-color .2s}
a.om-rel:hover span,a.om-rel:focus-visible span{color:var(--signal);text-decoration-color:currentColor}
.om-txt .om-name{display:none}
/* 흐름·멈춤·복제는 공용 엔진(.mq-rail/.mq-track, ark2026.js 3g) — 2026-10-26 통일. 양끝 흐림 마스크는 2026-09-30 대표 "그라디언트 다 빼"로 없음(전 줄 공통) */

/* 특허·인증 — 어두운 카드(안랩 Related Link 참고), 누르면 왼쪽 인증서가 바뀐다 */
.cert-sec{background:radial-gradient(120% 90% at 100% 0%,#2A2D35 0%,#0C0D10 55%) #0C0D10;color:#E9ECF2}
.cert-sec .sec-head h2{color:#fff}
.cert-sec .sec-head p{color:#A9B0BD}
.cert-sec .sec-head p.eyebrow{color:#9FB6E6}
.cert-grid{display:grid;gap:28px;align-items:start}
@media (min-width:960px){.cert-grid{grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:40px}}
.cert-view{margin:0;display:grid;gap:14px;justify-items:center;align-content:start;max-width:420px;width:100%;justify-self:center}   /* align-content:start — live.js C 가 이 칸에 최소 높이(가장 큰 인증서 기준)를 잡으면 격자가 남는 높이를 행에 나눠 흰 틀이 늘어나 그림 아래가 비었다(대표 2026-10-19 '하단만 너무 여백이 넓어. 모든 카드 다'). 남는 높이는 캡션 아래 빈자리로 */
.cert-frame{width:100%;background:#fff;border-radius:10px;padding:14px;box-shadow:0 20px 60px -20px rgba(0,0,0,.7)}
.cert-frame img{display:block;width:100%;height:auto;transition:opacity .25s}   /* 비율은 img 의 width·height(인증서 실제 크기) — 가로형이면 틀도 낮아진다 */
.cert-frame img.is-swap{opacity:0}
.cert-view figcaption{display:grid;gap:4px;text-align:center}
.cert-view figcaption b{font-size:20px;color:#fff}
.cert-view figcaption span{font-size:13px;color:#A9B0BD;word-break:keep-all}
@media (max-width:899px){.cert-view figcaption .cert-sub-p{display:block}}   /* 증서 이름 끝 괄호(발급 기관)는 다음 줄(대표 2026-10-28 "괄호를 줄바꿈 하면 더 예쁘잖아") — 900px 이상은 한 줄로 이어 쓴다 */
.cert-all{color:#fff;font-size:14px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.cert-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.cert-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cert-card{position:relative;display:grid;gap:18px;align-content:start;width:100%;height:100%;min-height:156px;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:22px 22px 24px;border-radius:16px;border:1px solid #2B2E36;background:rgba(18,19,23,.86);transition:border-color .2s,background .2s}
.cert-card:hover{border-color:#5A606D}
.cert-card[aria-pressed="true"]{border-color:var(--signal);background:rgba(28,40,70,.9)}
.cert-pill{justify-self:start;background:#E7E9EE;color:#111;border-radius:999px;padding:5px 13px;font-size:13px;font-weight:700;line-height:1.35;max-width:calc(100% - 28px);word-break:keep-all}
.cert-arr{position:absolute;right:20px;top:22px;color:#C9CED8;font-size:18px;line-height:1}
.cert-card[aria-pressed="true"] .cert-arr{color:#fff}
.cert-d{font-size:15px;line-height:1.65;color:#D6DAE2;word-break:keep-all}

/* Why ARKLINK — 흰 숫자 카드(지니언스 참고) */
.why{background:var(--paper)}
.why-head{text-align:center;justify-items:center;margin-inline:auto}
.why-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.why-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.why-card{background:#fff;border-radius:18px;padding:28px 24px;display:grid;gap:10px;grid-template-rows:auto auto 1fr;align-content:stretch;box-shadow:0 1px 2px rgba(15,30,51,.05),0 10px 30px -18px rgba(15,30,51,.25)}
.why-k{display:block;font-size:clamp(23px,2.3vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--navy);word-break:keep-all}   /* 32→28px(2026-10-07 대표 '타이틀만 소폭 축소') */
.why-ic{display:block;width:26px;height:26px;margin-bottom:9px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;color:var(--navy)}   /* 타이틀 위 선 아이콘 — _h_why.php $WHY_IC */
.why-card h3{font-size:16px;line-height:1.45;color:var(--signal)}
.why-card p{font-size:14.5px;line-height:1.65;color:var(--mute);word-break:keep-all}
.why-card a{align-self:end;margin-top:6px;color:var(--navy);font-size:14px;font-weight:600;text-decoration:none;justify-self:start;border-bottom:1px solid var(--frost)}
.why-card a:hover{color:var(--signal);border-color:var(--signal)}

/* 진행 과정 — /inquiry 원형 그대로(막대가 차례로 차는 6초 반복) */
.proc{background:#fff}
/* 진행 과정 시안 G(?ps=g, 2026-10-22 대표 '피해 대응 가이드처럼') — 탭·패널·계기판은 가이드 파일(pages/help.css)을 그대로 쓰고, 여기는 이 구간에만 있는 두 가지:
   연락 버튼 3개(전화는 한 줄 전체, 채팅·신청서 둘) · 기술 칩은 솔루션 페이지 링크 */
.proc-g .help-sxt .sxn{grid-template-columns:repeat(4,minmax(0,1fr))}   /* 단계 4개 — steps.css 의 5칸(가이드 5단계)을 이 구간만 4칸으로(1440 에서 오른쪽 한 칸이 비던 것, 2026-10-22 운영 캡처). 휴대폰은 가로 줄(flex)이라 무관 */
.proc-g .pg-acts button.help-btn{font:inherit;font-size:15px;font-weight:700;cursor:pointer}
/* 연락 버튼 셋은 모든 폭에서 한 줄(휴대폰 대표 2026-10-23 '3개 버튼을 나란히' → PC 2026-10-26 '피시화면에서, 한 줄로 나란히 … 차지하는 버튼 영역이 너무 크잖아' — 종전 PC 는 전화 한 줄 + 둘, 2줄) */
.proc-g .pg-acts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.proc-g .pg-acts .help-btn,.proc-g .pg-acts a.help-btn,.proc-g .pg-acts button.help-btn,.proc-g .pg-acts .help-btn.help-btn-primary{padding:0 8px;font-size:15px;text-align:center;word-break:keep-all}   /* 세 글자 크기를 같게 — 종전엔 신청서(a)만 14px(steps.css .help-sxt.is-fig .help-btn 이 같은 특이도·뒤 순서로 이김 → a.help-btn 으로 한 단계 높임), 한 줄에 나란히 서며 차이가 드러났다 */
@media (max-width:899px){   /* 휴대폰은 14px — 320 에서도 칸 80px·글자 한 줄(운영 주입 실측). 전화도 같은 14px(steps.css .is-fig 15px 를 이기려고 클래스 둘) */
  .proc-g .pg-acts .help-btn,.proc-g .pg-acts a.help-btn,.proc-g .pg-acts button.help-btn,.proc-g .pg-acts .help-btn.help-btn-primary{padding:0 6px;font-size:14px;line-height:1.3}
}
.proc-g .pg-tech li{padding:0}
.proc-g .pg-tech li::before{display:none}
.proc-g .pg-tech li a{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:6px 12px 6px 10px;color:inherit;text-decoration:none;border-radius:inherit}
.proc-g .pg-tech li a::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--signal)}
.proc-g .pg-tech li a::after{content:"→";color:var(--signal);font-weight:700}
.proc-g .pg-tech li a:hover,.proc-g .pg-tech li a:focus-visible{color:var(--signal)}
/* 진행 과정 — 2026-10-08 재구성(대표 "이 페이지가 미흡한 것 같다" · GPT gpt-6-astra 블라인드 발산 P1 채택, 상세는 _h_process.php 머리 주석):
   데스크톱은 네 단계를 가로 카드가 아니라 세로 4행으로 — 왼쪽 요약(번호·제목·/inquiry 한 줄), 오른쪽 그 단계에서 일어나는 일(운영 FAQ 원문). 번호·선은 중립색(파랑은 행동·선택에만),
   종전 4.8초 진행 막대 채움 모션(psF1~4·psN1~4)은 뺐다 — 정적 안내에 '처리 중'처럼 보이는 채움은 불필요(GPT 심사 진단). 모바일(899px 이하)은 아래 @media 블록 — 2×2 요약 격자 그대로. */
.ps-row{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:minmax(0,1fr)}
/* 2026-10-08 2판(대표 "디자인 측면에서의 미흡 … 다른 영역에 비해 부족·단순"): 행 = [번호 레일 | 코드로 그린 무대 figure.psv | 글]. 무대는 기술력 계기판(.sxv)과 같은 어휘(어두운 면·11px 라벨·칸·칩) — 글자는 전부 1차 표기 부분 문자열(C30). */
.ps{display:grid;grid-template-columns:56px minmax(0,.42fr) minmax(0,.58fr);grid-template-rows:auto auto 1fr;column-gap:28px;row-gap:6px;padding:26px 0;border-top:1px solid var(--line);align-items:start}
.ps:first-child{border-top:0;padding-top:4px}
.ps-track{display:none}
.ps-n{grid-column:1;grid-row:1/4;font-family:var(--mono);font-size:26px;font-weight:600;line-height:1;color:var(--mute);letter-spacing:-.02em;padding-top:4px}
.ps h3{grid-column:3;grid-row:1;margin:0;font-size:21px;line-height:1.3;word-break:keep-all}
.ps>p{grid-column:3;grid-row:2;margin:0;font-size:14.5px;line-height:1.65;color:var(--mute);word-break:keep-all}
.psv{grid-column:2;grid-row:1/4;margin:0;align-self:stretch;justify-items:start;align-content:center;background:#050B16;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px;display:grid;gap:10px;align-content:start;min-width:0;color:var(--on-ink)}
.psv-k{margin:0;font-size:12px;line-height:1.3;color:#7FA6E8;letter-spacing:.02em;word-break:keep-all}   /* 라벨색은 기술력 계기판(.sxv-h)과 같은 #7FA6E8 — 대표 승인 어휘(2026-09-30) */
.psv-f{margin:0;font-size:12.5px;line-height:1.5;color:var(--on-ink-mute);word-break:keep-all}
.psv-big{margin:0;font-size:17px;font-weight:600;line-height:1.3;color:#DCE6F5;word-break:keep-all}
.psv-big b{font-family:var(--mono);font-size:38px;font-weight:600;line-height:1;color:#fff;letter-spacing:-.02em;vertical-align:-4px;margin:0 2px}
.psv-big-s b{font-family:inherit;font-size:26px;vertical-align:-2px}
.psv-core{margin:0;font-size:20px;font-weight:700;line-height:1.3;color:#fff;word-break:keep-all}
.psv-cells{list-style:none;margin:0;padding:0;display:grid;gap:6px;grid-template-columns:repeat(3,minmax(0,1fr))}
.psv-cells.psv-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.psv-cells li{background:rgba(255,255,255,.07);border-radius:10px;padding:11px 8px;font-size:13px;line-height:1.35;color:#DCE6F5;text-align:center;word-break:keep-all;min-width:0}   /* 내부 칸은 면만(테두리 없음 — 윤곽 한 겹은 무대 바깥선) */
.psv-list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.psv-list li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.45;color:#DCE6F5;word-break:keep-all}
.psv-list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;border:1.5px solid var(--on-ink-mute)}
.psv-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.psv-flow .psv-cells{flex:1 1 200px}
.psv-flow-s{font-size:12px}
.psv-arr{color:var(--on-ink-mute);font-size:inherit;line-height:1}
.psv-t{font-size:12.5px;line-height:1.35;color:#DCE6F5;word-break:keep-all}
.psv-chip{font-style:normal;font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,.12);border-radius:999px;padding:4px 10px;white-space:nowrap}

/* 실제 해결 후기 — 엔키 카드(배지 · 제목 · 내용 · 날짜) */
.rvx{background:#fff}
.rvx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.pill-more{display:inline-flex;align-items:center;gap:14px;padding:8px 0;color:var(--navy);font-weight:700;font-size:15px;letter-spacing:-.01em;text-decoration:none;transition:color .2s}   /* 대표 2026-09-30 '타사를 따라한 느낌' → 알약 버튼을 버리고 글자 + 가는 선 화살표 */
.pill-more span{position:relative;display:block;width:30px;height:1px;background:currentColor;font-size:0;transition:width .28s cubic-bezier(.2,.7,.2,1)}
.pill-more span::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.pill-more:hover,.pill-more:focus-visible{color:var(--signal)}
.pill-more:hover span,.pill-more:focus-visible span{width:54px}
@media (prefers-reduced-motion:reduce){.pill-more span{transition:none}}
.rvx-list{list-style:none;margin:0;padding:0 0 6px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,84%);gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}
@media (min-width:900px){.rvx-list{grid-auto-columns:calc((100% - 32px) / 3)}}   /* 데스크톱도 5편을 가로로 넘긴다 — 한 화면 3편, 나머지는 넘겨서(대표 2026-10-07 "여기도 가로스크롤 해서 볼 수 있게 하면 어떤가?"). 바로 아래 인터뷰(.ivx-list)와 같은 방식, 단서(진행 막대·끝 페이드)는 ark2026.js 3k */
.rvx-list>li{scroll-snap-align:start;min-width:0}
/* 공용 흐르는 줄 안(2026-10-26 통일): 소식·후기·인터뷰 줄은 트랙(.mq-track)이 되고 바깥 .mq-rail 이 스크롤·흐름 상자다 — 트랙은 늘 한 줄(flex, max-content), 칸 폭은 상자 폭(cqw)으로 전과 같게(폴백 px 는 cqw 모르는 옛 브라우저용, 뒤 규칙이 덮는다).
   엔진이 안 돌 때(모션 줄이기·스크립트 없음)는 상자가 손으로 넘기는 줄(스냅 + 3k 진행 막대). .press-sec .press-row[data-line](live.css, 0,3,0)보다 높은 특이도(0,4,0) */
.mq-rail>.press-row[data-line].mq-track,.mq-rail>.rvx-list.mq-track,.mq-rail>.ivx-list.mq-track{display:flex;flex-wrap:nowrap;width:max-content;overflow:visible;scroll-snap-type:none;scroll-behavior:auto}
.mq-rail:has(>.press-row),.mq-rail:has(>.rvx-list),.mq-rail:has(>.ivx-list),.mq-rail:has(>.ivx-cards){scroll-snap-type:x mandatory}
.mq-rail>.rvx-list.mq-track>li{flex:0 0 auto;width:260px}   /* 원 격자 minmax(260px,84%)는 넘치는 줄에서 260px 로 수렴했다(실측) — 같은 값 */
@media (min-width:900px){.mq-rail>.rvx-list.mq-track>li{width:350px;width:calc((100cqw - 32px) / 3)}}
.mq-rail>.ivx-list.mq-track>li{flex:0 0 auto;width:200px;width:calc((100cqw - 24px) / 3)}
@media (max-width:640px){.mq-rail>.ivx-list.mq-track>li{width:157px;width:44cqw}}
.rvx-card{position:relative;display:flex;flex-direction:column;gap:12px;height:100%;min-height:320px;padding:30px 28px 26px;border-radius:6px;overflow:hidden;color:#fff;text-decoration:none;background:var(--navy);isolation:isolate}   /* 2026-09-30 대표 지시: 얼룩(그라디언트) 전부 제거 — 민무늬 브랜드 네이비 */
.rvx-card:hover .rvx-t,.rvx-card:focus-visible .rvx-t{text-decoration:underline;text-underline-offset:4px}
.rvx-badge{align-self:flex-start;font-size:13px;font-weight:600;color:#fff;background:rgba(52,123,247,.3);border-radius:6px;padding:5px 10px}
.rvx-t{font-size:20px;line-height:1.45;font-weight:700;word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rvx-ex{font-size:14.5px;line-height:1.65;color:var(--on-ink);opacity:.92;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.rvx-d{margin-top:auto;font-size:13px;color:var(--on-ink-mute)}

/* 피해자 인터뷰 — 최신 영상 크게 + 전 영상 목록 · 콘텐츠로 보는 인터뷰 */
.ivx{background:var(--paper)}
.ivx-grid{display:grid;gap:32px;align-items:start}
.ivx-main{display:grid;gap:12px;min-width:0}
.ivx-stage iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:14px;background:var(--ink)}
.ivx-big{border-radius:14px}
.ivx-cap{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:15px;min-width:0}
.ivx-cap a{color:var(--navy);font-weight:600;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ivx-cap time{flex:none;font-size:12.5px;color:var(--mute)}
.ivx-grid{--ivx-pb:6px}
.ivx-list{list-style:none;margin:6px 0 0;padding:0 0 var(--ivx-pb);display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px) / 3);gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory}
@media (max-width:640px){.ivx-list{grid-auto-columns:44%}}
.ivx-list>li{scroll-snap-align:start;min-width:0}
.ivx-item{display:grid;gap:6px;text-decoration:none;color:var(--navy);min-width:0;position:relative}
/* 2026-09-30 대표 '마우스호버 테두리가 이상해 · 첫 카드는 테두리가 사라지지도 않아' → 그림 밖에 뜨던 outline 링을 없앰.
   마우스 올림 = 살짝 떠오름 + 제목 파랑 · 재생 중(aria-current) = 썸네일 어둡게 + '재생 중' 배지 */
.ivx-item img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;background:var(--ink);transition:transform .2s,box-shadow .2s,filter .2s}
.ivx-item:hover img{transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(15,30,51,.5)}
.ivx-item:hover .ivx-it{color:var(--signal)}
.ivx-item[aria-current="true"] img{filter:brightness(.55)}
.ivx.has-player .ivx-item[aria-current="true"]::after{content:"선택한 영상";position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--navy);font-size:11px;font-weight:700;line-height:1.3;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ivx-item img{transition:none}.ivx-item:hover img{transform:none}}
.ivx-it{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}
.ivx-side{display:grid;gap:14px;min-width:0}
.ivx-sh{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ivx-sh h3{font-size:17px;color:var(--signal)}
.ivx-sh a{font-size:14px;color:var(--signal);font-weight:600;text-decoration:none}
.ivx-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
/* ≥1000: [빈칸 | 소제목·더보기] / [큰 영상 | 글 카드] 두 행 — 글 카드 윗선 = 큰 영상 윗선(대표 2026-09-30). .ivx-side 는 display:contents 로 풀어 자식이 바깥 격자에 직접 놓인다. 이 블록은 .ivx-side/.ivx-cards 기본 규칙 *뒤*에 있어야 이긴다(같은 특이도) */
@media (min-width:1000px){.ivx-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:40px;row-gap:14px}
  .ivx-side{display:contents}.ivx-sh{grid-column:2;grid-row:1}.ivx-main{grid-column:1;grid-row:2}.ivx-cards{grid-column:2;grid-row:2;align-self:stretch;align-content:space-between;margin-bottom:var(--ivx-pb)}}   /* 카드 열 아랫변 = 왼쪽 영상 목록 아랫변, 남는 높이는 행 사이로(대표 2026-09-30 "요소 사이 간격을 조금 더 확장해서 하단까지") */
.ivx-card{display:grid;gap:8px;text-decoration:none;color:var(--navy);min-width:0}
.ivx-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:10px;background:#fff}
.ivx-card>span{font-size:13px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all}   /* 직계 자식만(같은 이유) */
.ivx-card:hover span{text-decoration:underline;text-underline-offset:3px}
/* 휴대폰·태블릿(1000 미만, 두 칸 배치가 아닌 폭): 글 카드도 가로로 넘긴다(대표 2026-10-26 '모바일에서는 가로 스크롤 넘어가는 것으로') — 위 영상 목록(.ivx-list)·후기 줄과 같은 방식,
   진행 막대·밀어 보기 안내는 ark2026.js 3k. 3k 가 목록을 .hs-wrap 으로 감싸므로 1000 이상에선 그 감싸개가 바깥 격자의 칸(2열 2행)을 대신 맡는다 */
@media (max-width:999px){.ivx-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 28px) / 3);gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding-bottom:6px}.ivx-cards>li{scroll-snap-align:start;min-width:0}}
@media (max-width:640px){.ivx-cards{grid-auto-columns:64%}}   /* 휴대폰: 한 장 반 — 다음 카드가 걸쳐 보여 넘길 수 있음을 알린다 */
@media (min-width:1000px){.ivx-side>.hs-wrap,.ivx-side>.mq-rail{grid-column:2;grid-row:2;display:grid;align-self:stretch;margin-bottom:var(--ivx-pb)}.ivx-side>.hs-wrap .ivx-cards,.ivx-side>.mq-rail>.ivx-cards{grid-column:auto;grid-row:auto;margin-bottom:0}.ivx-side .hs-wrap>.mq-rail{display:grid}
  .ivx-cards.mq-track{width:auto}.ivx-cards.mq-track>[data-mq-clone]{display:none}}   /* 1000 이상: 글 카드는 두 칸 격자 그대로(999→1000 리사이즈 직후 엔진이 복제를 걷기 전 200ms 도 복제는 안 보이게) — 트랙의 max-content 폭을 풀어 넘침이 없게(엔진이 .mq-fit 고정으로 판정, 복제 0). 바깥 .mq-rail(평소)·.hs-wrap(모션 줄이기, 3k)이 격자 칸을 맡는다 */
/* 1000 미만 흐르는 줄(2026-10-26 통일): 트랙은 한 줄(flex), 칸 폭은 줄 폭 변수로 전과 같게(3칸 / 휴대폰 64%) */
@media (max-width:999px){.mq-rail>.ivx-cards.mq-track{display:flex;flex-wrap:nowrap;width:max-content;overflow:visible;scroll-snap-type:none;padding-bottom:0}.mq-rail>.ivx-cards.mq-track>li{flex:0 0 auto;width:226px;width:calc((100cqw - 28px) / 3)}}
@media (max-width:640px){.mq-rail>.ivx-cards.mq-track>li{width:229px;width:64cqw}}

/* 아크링크의 기술력 — 세로 패널 6개, 마우스를 올리면 넓어지고 작동 애니메이션이 돈다 */
.sx-sec{background:var(--ink);color:var(--on-ink)}
.sx-sec .sec-head h2{color:#fff}
.sx-sec .sec-head p{color:var(--on-ink-mute)}
.sx-sec .sec-head p.eyebrow{color:#8FB3FF}
/* 기술력 — 엔키형 행 카드(2026-09-30): 위 요약 띠 .sxn(6칸) + 행 카드 .sxr>.sx(글 절반 .sxr-txt · 시각물 절반 .sxr-vis, 짝수 행은 좌우 교대) */
.sxn{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media (max-width:1099px){.sxn{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:639px){.sxn{display:flex;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:0 -16px 22px;padding:0 16px;scroll-snap-type:x proximity}.sxn::-webkit-scrollbar{display:none}.sxn>li{flex:0 0 66%;scroll-snap-align:center}}   /* 고른 카드는 가운데 — 앞뒤 카드가 양옆에 걸쳐 보인다(2026-10-22 대표 '이전 카드가 아예 시야에서 사라지도록 … 불편', live.js D 의 줄 밀기와 같은 기준) */
.sxn a{display:grid;gap:6px;grid-template-rows:auto auto 1fr auto;height:100%;padding:16px 16px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--on-ink);text-decoration:none;transition:background .2s,border-color .2s}
.sxn a:hover,.sxn a:focus-visible{background:rgba(255,255,255,.1);border-color:rgba(143,179,255,.6)}
.sxn .mono{font-size:12px;color:#8FB3FF}
.sxn b{font-size:15.5px;color:#fff;letter-spacing:-.01em;word-break:keep-all}
.sxn-h{align-self:start;font-size:12.5px;line-height:1.45;color:var(--on-ink-mute);word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sxn-arr{justify-self:end;align-self:end;color:#8FB3FF;font-size:14px}   /* 2026-09-30: 설명이 1줄이든 2줄이든 같은 자리(대표 '위치가 중구난방') */
/* 요약 띠 고정 바(2026-09-30 대표 '이 요소가 보이지 않을 만큼 스크롤한 시점부터 상단에 고정'): 자리는 .wrap 안 sticky 0높이, 바는 absolute 라 본문이 밀리지 않는다. ark2026.js 3h 가 .on 과 aria-current 를 관리. */
.sxn-pin{position:sticky;top:calc(var(--hdr-h,65px) + var(--pin-h,0px) + env(safe-area-inset-top,0px));z-index:30;height:0;margin:0;pointer-events:none}   /* 구간 제목 띠(--pin-h, 3g-5) 아래 — 2026-10-28 되살리며 모든 폭 */
.sxn-pin[hidden]{display:none}
.sxn-bar{position:absolute;left:0;right:0;margin:0 auto;width:max-content;max-width:100%;top:8px;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:6px;border-radius:14px;background:#0B1627;border:1px solid rgba(143,179,255,.28);box-shadow:0 14px 34px -18px rgba(0,0,0,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s,transform .22s,visibility 0s .22s}
.sxn-bar::-webkit-scrollbar{display:none}   /* 바 배경은 불투명(2026-10-29 — 94% 였을 때 아래 본문 글자가 비쳤다, 겹쳐 뜨는 요소 불투명 원칙) */
.sxn-pin.on .sxn-bar{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .22s,visibility 0s}
.sxn-bar a{flex:none;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;color:var(--on-ink);text-decoration:none;font-size:13.5px;line-height:1.2;border:1px solid transparent;white-space:nowrap}
.sxn-bar a .mono{font-size:11px;color:#8FB3FF}
.sxn-bar a.sxn-top{padding:7px 14px 7px 11px;margin-right:2px;background:rgba(255,255,255,.06);border-color:rgba(143,179,255,.28)}   /* '이 섹션 맨 위(SOLUTION)로' — 솔루션 번호 띠와 구분되는 첫 칸 */
.sxn-bar a.sxn-top .mono{font-size:13px;line-height:1}
.sxn-bar a.sxn-top b{font-size:12px;letter-spacing:.08em;font-weight:700}
.sxn-bar a b{font-weight:600;color:#fff}
.sxn-bar a:hover,.sxn-bar a:focus-visible{background:rgba(255,255,255,.08)}
.sxn-bar a[aria-current="true"]{background:rgba(52,123,247,.22);border-color:rgba(143,179,255,.55)}
.sxn-bar>button{font:inherit;cursor:pointer;background:none;flex:none;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;color:var(--on-ink);font-size:13.5px;line-height:1.2;border:1px solid transparent;white-space:nowrap}   /* 넘김 고정 바(window.ArkPin, 2026-10-29) — 항목이 링크가 아니라 단추. 모양은 위 a 와 같다 */
.sxn-bar>button[hidden]{display:none}
.sxn-bar>button b{max-width:15em;overflow:hidden;text-overflow:ellipsis}   /* 긴 이름(인터뷰 영상 제목)은 칸 안에서 줄임 — 바를 넘겨 다른 항목을 볼 수 있게 */
.sxn-bar>button .mono{font-size:11px;color:#8FB3FF}
.sxn-bar>button b{font-weight:600;color:#fff}
.sxn-bar>button.sxn-top{padding:7px 14px 7px 11px;margin-right:2px;background:rgba(255,255,255,.06);border-color:rgba(143,179,255,.28)}
.sxn-bar>button.sxn-top .mono{font-size:13px;line-height:1}
.sxn-bar>button.sxn-top b{font-size:12px;letter-spacing:.08em;font-weight:700}
.sxn-bar>button:hover,.sxn-bar>button:focus-visible{background:rgba(255,255,255,.08)}
.sxn-bar>button[aria-current="true"]{background:rgba(52,123,247,.22);border-color:rgba(143,179,255,.55)}
.sxn-js .sx{scroll-margin-top:calc(var(--hdr-h,65px) + 70px)}   /* 앵커 도착 시 고정 바(8+~48px)에 가려지지 않게 */
@media (prefers-reduced-motion:reduce){.sxn-bar,.sxn-pin.on .sxn-bar{transition:none}}
.sxr{list-style:none;margin:0;padding:0;display:grid;gap:22px}
/* 책장 넘김(모바일 639px 이하, 대표 2026-10-01 '세로 스크롤이 너무 길면 압박감 — > 버튼으로 다음 내용'): 행 카드를 한 장씩 가로 scroll-snap 으로 — 스크립트가 없어도 손으로 넘긴다.
   ‹ 01 / 06 › 컨트롤·트랙 높이 맞춤·inert 는 ark2026.js 3i. 900px 이상은 세로 행 카드 그대로(컨트롤은 숨김). 세로 스크롤은 그대로 된다(트랙은 가로만 스크롤). */
.sxp-ctl{display:none}
@media (max-width:639px){
  .sxr[data-sxp],.eco-pages[data-sxp],.sxp-list[data-sxp]{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:12px;align-items:start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sxr[data-sxp]::-webkit-scrollbar,.eco-pages[data-sxp]::-webkit-scrollbar,.sxp-list[data-sxp]::-webkit-scrollbar{display:none}
  .sxr[data-sxp]>.sx,.eco-pages[data-sxp]>*,.sxp-list[data-sxp]>*{scroll-snap-align:start;scroll-snap-stop:always}
  .sxr[data-sxp].sxp-on,.eco-pages[data-sxp].sxp-on,.sxp-list[data-sxp].sxp-on{overflow-x:hidden;scroll-snap-type:none;touch-action:pan-y pinch-zoom}   /* 스크립트가 넘김을 맡은 뒤: 관성으로 여러 장이 넘어갈 통로를 없앤다(한 동작에 한 장 — ark2026.js 3i) */
  .eco-pages[data-sxp]>.drp-band{margin:0;border-top:0;padding-top:0}   /* 한 장의 맨 위 — 세로로 이어 붙일 때의 위 여백·구분선은 가로 쪽에선 필요 없고 높이 계산만 어긋나게 한다 */
  .sxp-ctl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
  .sxp-ctl[data-sxp-ctl="bottom"]{margin:14px 0 0}
  .sxp-b{flex:none;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font:400 28px/1 var(--sans);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s}
  .sxp-b span{display:block;transform:translateY(-2px)}   /* 글자 ‹ › 는 줄 바닥에 앉아 원 안에서 아래로 처진다 */
  .sxp-b:not(:disabled):active,.sxp-b:not(:disabled):focus-visible{background:var(--signal);border-color:var(--signal)}
  .sxp-b:disabled{opacity:.3;cursor:default}
  .sxp-mid{flex:1;min-width:0;margin:0;display:grid;gap:2px;justify-items:center;text-align:center}
  .sxp-no{font-size:12px;letter-spacing:.06em;color:#8FB3FF}
  .sxp-t{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .eco .sxp-b{border-color:var(--line);background:#fff;color:var(--navy)}   /* 흰 바탕 구간용 */
  .eco .sxp-b:not(:disabled):active,.eco .sxp-b:not(:disabled):focus-visible{background:var(--signal);border-color:var(--signal);color:#fff}
  .eco .sxp-no{color:var(--signal)}
  .eco .sxp-t{color:var(--navy)}
  .sxp-light .sxp-b{border-color:var(--line);background:#fff;color:var(--navy)}   /* 흰 바탕 카드 목록(연구소 최근 분석·분석 목록·후기·인터뷰 영상 — 2026-10-28) */
  .sxp-light .sxp-b:not(:disabled):active,.sxp-light .sxp-b:not(:disabled):focus-visible{background:var(--signal);border-color:var(--signal);color:#fff}
  .sxp-light .sxp-t{color:var(--navy)}
  /* 번호 탭 줄(ark2026.js 3i, 대표 2026-10-29 "전부 다, [솔루션 번호 탭 .sxn] 이런 구조를 참고해서") — 솔루션 탭(.sxn 휴대폰판)과 같은 칸: 번호(mono 12) + 이름(15.5 굵게), 둥근 14, 고른 칸 = 파란 테.
     칸이 많으면 줄을 옆으로 민다(본문 폭 밖까지, 스크롤바 숨김). 어두운 구간 기본 · 흰 바탕(.sxp-light) 밝은 칸 */
  .sxp-tabs-w{display:block}
  .sxp-tabs{list-style:none;display:flex;gap:8px;margin:0 calc(-1 * var(--gut,16px));padding:0 var(--gut,16px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity}
  .sxp-tabs::-webkit-scrollbar{display:none}
  .sxp-tabs>li{flex:1 0 46%;min-width:0;scroll-snap-align:center}
  .sxp-tabs button{display:grid;gap:3px;align-content:start;width:100%;height:100%;min-height:58px;padding:11px 14px;font:inherit;text-align:left;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--on-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,border-color .2s}
  .sxp-tabs .mono{font-size:12px;line-height:1.2;color:#8FB3FF}
  .sxp-tabs b{font-size:15px;line-height:1.35;color:#fff;letter-spacing:-.01em;word-break:keep-all;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sxp-tabs li.on button{background:rgba(52,123,247,.18);border-color:rgba(143,179,255,.75)}
  .sxp-tabs button:focus-visible{outline:2px solid #8FB3FF;outline-offset:2px}
  .sxp-light .sxp-tabs button{background:#fff;border-color:var(--line);color:var(--navy)}
  .sxp-light .sxp-tabs .mono{color:var(--signal)}
  .sxp-light .sxp-tabs b{color:var(--navy)}
  .sxp-light .sxp-tabs li.on button{background:#EAF1FE;border-color:var(--signal)}
  .sxp-light .sxp-tabs button:focus-visible{outline-color:var(--signal)}
  .sxp-list[data-sxp]{grid-template-columns:none}   /* 목록 원래의 1fr 열 정의가 남으면 첫 장만 그 칸(남는 폭 34px)에 들어가 찌그러진다 — 장은 전부 100% 자동 열 */
  .sxp-list[data-sxp]>*{min-width:0}
  .videos .sxp-list[data-sxp] .vcard:nth-child(n+3){display:grid}   /* 휴대폰 2편만 보이던 규칙은 넘김이 6편을 한 장씩 맡으면 풀린다 */
}
/* 행 카드(v5 2026-09-30): 어두운 카드 + 코드로 그린 계기판(.sxv). 이미지·영상 자산 0 */
.sx{display:grid;background:#0F1E33;border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;color:var(--on-ink);min-width:0;scroll-margin-top:84px}
@media (min-width:900px){.sx{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.sx:nth-child(even) .sxr-txt{order:2}}
.sxr-txt{display:grid;gap:12px;align-content:center;padding:clamp(24px,3.4vw,44px);min-width:0}
.sxr-no{font-size:13px;color:#8FB3FF}
.sx h3{font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.02em;margin:0;color:#fff;word-break:keep-all}
.sxr-lead{font-size:17px;font-weight:600;color:#DCE6F5;line-height:1.5;word-break:keep-all;margin:0}
.sxr-sum{font-size:15px;line-height:1.7;color:var(--on-ink-mute);word-break:keep-all;margin:0}
.sxr-chk{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 20px}
.sxr-chk li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:#fff;word-break:keep-all}
.sxr-chk img{width:22px;height:22px;flex:none}
.sx-btn{justify-self:start;display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:11px 18px;border-radius:999px;background:var(--signal);color:#fff;font-size:14.5px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
.sx-btn:hover,.sx-btn:focus-visible{background:#fff;color:var(--navy)}
.sxr-vis{position:relative;min-width:0;display:grid;padding:14px}
@media (max-width:899px){.sxr-vis{order:-1;padding:14px 14px 0}}   /* 한 열이면 계기판 위, 글 아래 */
@media (min-width:900px){.sxr-vis{padding:18px 18px 18px 0}.sx:nth-child(even) .sxr-vis{padding:18px 0 18px 18px}}
/* 계기판 무대 — DeepScan 4단계 패널(.dsv-stage)과 같은 문법: 어두운 무대 · 번호 단계 띠 · 칸 · 알약 · 꼬리표 */
.sxv{margin:0;position:relative;background:#050B16;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;display:grid;grid-template-rows:auto 1fr auto;gap:10px;min-width:0;min-height:100%}
.sxv-rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;counter-reset:sxvr}
.sxv-rail li{counter-increment:sxvr;font-size:11px;line-height:1.3;color:#C8D6EE;border-top:2px solid var(--signal);padding-top:5px;word-break:keep-all;transition:opacity .4s,border-color .4s}
.sxv-rail li::before{content:counter(sxvr) ' ';font-family:var(--mono);color:#7FA6E8}
.sxv-js .sxv-rail li{opacity:.35;border-top-color:rgba(255,255,255,.2);position:relative}
.sxv-js.t1 .sxv-rail li:nth-child(1),.sxv-js.t2 .sxv-rail li:nth-child(2),.sxv-js.t3 .sxv-rail li:nth-child(3),.sxv-js.t4 .sxv-rail li:nth-child(4){opacity:1}
/* 단계 레일 진행(대표 2026-10-19 '진행 순서에 따라서 테두리에 색칠'): 단계가 시작되면 윗선이 그 단계 길이(--seg, 3e 가 data-ms 로 계산) 동안 왼쪽부터 차오른다 — 네 칸이 이어진 진행 막대.
   .sxv-hold(넘김 멈춤 — 카드 위 마우스·초점·화면 밖)면 채움도 선다. 모션 줄이기는 sxv-js 가 붙지 않아 원래의 꽉 찬 윗선 */
.sxv-js .sxv-rail li::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--signal);transform-origin:left;transform:scaleX(0)}
.sxv-js.t1 .sxv-rail li:nth-child(1)::after,.sxv-js.t2 .sxv-rail li:nth-child(2)::after,.sxv-js.t3 .sxv-rail li:nth-child(3)::after,.sxv-js.t4 .sxv-rail li:nth-child(4)::after{animation:sxvSeg var(--seg,2s) linear forwards}
.sxv-js.sxv-hold .sxv-rail li::after{animation-play-state:paused}
@keyframes sxvSeg{to{transform:scaleX(1)}}
.sxv-body{display:grid;gap:8px;min-width:0;align-self:center;align-items:start}   /* 칸은 내용 높이, 묶음은 무대 세로 가운데(빈 칸이 커 보이지 않게 — gpt-6-astra 디자인 렌즈) */
.sxv-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:479px){.sxv-3{grid-template-columns:1fr}}
.sxv-col{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px;display:grid;gap:8px;align-content:start;min-width:0}
.sxv-h{margin:0;font-size:11px;color:#7FA6E8;line-height:1.3;word-break:keep-all}
.sxv-kv{margin:0;display:grid;gap:1px}.sxv-kv b{font-size:20px;color:#fff;line-height:1.1}.sxv-kv span{font-size:10.5px;color:var(--on-ink-mute);word-break:keep-all}
.sxv-pill{font-style:normal;font-size:10.5px;font-weight:700;color:#fff;background:var(--signal);border-radius:999px;padding:3px 9px;justify-self:start;white-space:nowrap;transition:opacity .35s,transform .35s}
.sxv-chip{font-style:normal;font-size:10.5px;font-weight:700;color:#DCE6F5;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:2px 8px;justify-self:start;white-space:nowrap;transition:opacity .35s,transform .35s}
.sxv figcaption{font-size:11px;color:var(--on-ink-mute);line-height:1.45;word-break:keep-all}
.sx-sec .sxv{grid-template-rows:auto 1fr}   /* 기술력 무대는 출처 꼬리표를 뺐다(대표 2026-10-28) — 빈 셋째 줄의 틈 10px 가 아래에 남지 않게. DeepScan 의 '예시 화면' 은 암묵 줄로 그려진다 */
/* 단계별 나타남(.s1~.s4 = 그 단계부터 보임) — 스크립트가 없거나 모션 줄이기면 전부 보이는 완성 화면 */
.sxv-js .s1,.sxv-js .s2,.sxv-js .s3,.sxv-js .s4{opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}
.sxv-js.t1 .s1,.sxv-js.t2 .s2,.sxv-js.t3 .s3,.sxv-js.t4 .s4{opacity:1;transform:none}
/* 01 Deep-Coding — 스캔 격자 · 취약점 막대 · 우회 고리 */
.dc-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;position:relative;overflow:hidden;border-radius:6px;padding:2px;max-width:230px}   /* 8×3 — 폰 한 열에서도 낮게 */
.dc-key{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--on-ink-mute)}.dc-key i{width:9px;height:9px;border-radius:2px;background:#FF9F43}   /* 주황 칸 = 취약점(범례) */
.dc-grid i{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.12);transition:background-color .35s;transition-delay:calc(var(--i) * 45ms)}
.sxv:not(.sxv-js) .dc-grid i,.sxv-js.t1 .dc-grid i{background:var(--signal)}
.sxv:not(.sxv-js) .dc-grid i.x,.sxv-js.t2 .dc-grid i.x{background:#FF9F43}
.dc-scan{position:absolute;inset:0;opacity:0;pointer-events:none}.dc-scan::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:3px;background:linear-gradient(90deg,transparent,#DCEBFF,transparent)}   /* 2026-10-22 선은 ::before, 움직임은 transform — top 키프레임이 매 프레임 레이아웃을 일으켰다(계기판 구간 Layout 120회/초 실측) */
.sxv-js.t1:not(.t2) .dc-scan{opacity:1;animation:dcScan 1.5s linear infinite;will-change:transform}
@keyframes dcScan{from{transform:translateY(0)}to{transform:translateY(calc(100% - 5px))}}
.dc-find{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dc-find li{display:grid;grid-template-columns:auto 1fr;gap:3px 7px;align-items:center;font-size:10.5px;color:#DCE6F5}
.dc-find b{font-weight:700;color:#7FA6E8;font-size:10px}
.dc-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}.dc-bar i{display:block;height:100%;width:var(--p);background:var(--signal);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sxv-js:not(.t2) .dc-bar i{transform:scaleX(0)}
.dc-find small{grid-column:1/-1;font-size:10px;color:var(--on-ink-mute);word-break:keep-all}
.dc-c{align-content:start;justify-items:start}
.dc-ring{width:74px;height:74px;border-radius:50%;background:conic-gradient(var(--signal) calc(var(--p) * 1%),rgba(255,255,255,.12) 0);display:grid;place-items:center;align-content:center;position:relative;justify-self:center;transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .4s}
.dc-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#0B1627}
.dc-ring b{position:relative;font-size:17px;color:#fff;line-height:1}.dc-ring small{position:relative;font-size:9px;color:var(--on-ink-mute);line-height:1;margin-top:2px}
.sxv-js:not(.t3) .dc-ring{transform:scale(.6);opacity:.3}
/* 02 Data-Swapjack — 서버 · 데이터셋 타일 · 바꿔치기 */
.ds-set{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.ds-set li{height:20px;border-radius:4px;background:linear-gradient(160deg,#FF8A8F,#F2545B);transition:opacity .4s,transform .4s,background .5s;transition-delay:calc(var(--i) * 80ms)}
.ds-fake li,.ds-out li{background:repeating-linear-gradient(135deg,#9CC3FF 0 4px,#347BF7 4px 8px)}   /* 가상의 데이터셋 = 빗금 파랑, 피해 데이터셋 = 민무늬 빨강 */
.sxv-ds .sxv-col{position:relative}.sxv-ds .sxv-col:not(:last-child)::after{content:"→";position:absolute;right:-11px;top:50%;transform:translateY(-50%);color:#7FA6E8;font-size:13px;line-height:1;z-index:1}
@media (max-width:479px){.sxv-ds .sxv-col:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-11px;transform:translateX(-50%)}}
.ds-srv{display:grid;gap:6px;padding:8px;border:1px dashed rgba(255,255,255,.28);border-radius:8px}
.ds-led{width:8px;height:8px;border-radius:50%;background:#F2545B;box-shadow:0 0 8px #F2545B;justify-self:end;transition:background .5s,box-shadow .5s}
.ds-tag{font-size:10px;color:var(--on-ink-mute);word-break:keep-all}
.ds-tag-a{display:none}.sxv-js:not(.t3) .ds-tag-a{display:block}.sxv-js:not(.t3) .ds-tag-b{display:none}
.sxv-js:not(.t1) .ds-real li{opacity:0;transform:translateY(-8px)}
.sxv-js:not(.t2) .ds-fake li{opacity:0;transform:translateX(-10px)}
.sxv:not(.sxv-js) .ds-real li,.sxv-js.t3 .ds-real li{background:repeating-linear-gradient(135deg,#9CC3FF 0 4px,#347BF7 4px 8px)}   /* 서버 안은 가상(빗금)으로 */
.sxv:not(.sxv-js) .ds-fake li,.sxv-js.t3 .ds-fake li{background:linear-gradient(160deg,#FF8A8F,#F2545B);opacity:.5}   /* 가운데엔 빠져나온 피해(빨강) */
.ds-tag-c{display:none}.sxv:not(.sxv-js) .ds-tag-c,.sxv-js.t3 .ds-tag-c{display:block}
.sxv:not(.sxv-js) .ds-led,.sxv-js.t3 .ds-led{background:#347BF7;box-shadow:0 0 8px #347BF7}
.ds-swap{display:inline-block;color:#9CC3FF;margin-right:2px}
.sxv-js.t3:not(.t4) .ds-swap{animation:dsSwap .9s ease-in-out infinite alternate}
@keyframes dsSwap{from{transform:translateX(-2px)}to{transform:translateX(2px)}}
.sxv-js:not(.t4) .ds-out li{opacity:0;transform:translateX(-12px)}
/* 03 Aegis — 가해자 계정 · 유포 경로 · 플랫폼 · 확산 속도
   한 격자: 행 1 = '유포 경로' 제목, 행 2~4 = 선 한 줄 + 플랫폼 한 줄(같은 행이라 세로 위치가 정의상 같다), 행 5 = 확산 속도. 열 사이 틈 0 — 선의 양 끝이 가해자 원·플랫폼 원 테두리에 닿는다.
   가해자는 글자(왼쪽)·원(오른쪽), 플랫폼은 원(왼쪽)·글자(오른쪽) — 노드가 안쪽, 라벨이 바깥쪽.
   가해자 원 옆 세로 분기선(.ag-body::before, 첫 선 중심~셋째 선 중심)이 세 갈래를 한 계정에서 나오는 것으로 묶는다 — 행 높이는 원 지름 22px 로 정해지므로 위아래 10px 여백이 선 중심에 닿는다(gpt-6-astra 심사: 위아래 경로의 출발점이 모호).
   (대표 2026-10-19 '선이 도달하는 위치가 플랫폼 원 3개와 맞지 않아서 어색해' — 종전엔 선 셋이 18px 간격으로 가운데 모여 원 셋(53px 간격)과 +58/+23/-12px 어긋났고 끝이 원 앞 15px 에서 멎었다) */
.ag-body{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto auto auto auto;gap:16px 0;align-items:center}
.ag-mid,.ag-paths,.ag-dst{display:contents}
.ag-mid .sxv-h{grid-column:2;grid-row:1;padding-left:8px}
.ag-src{display:grid;grid-column:1;grid-row:2/5;grid-template-columns:auto 22px;grid-template-rows:auto auto auto;column-gap:8px;row-gap:3px;align-items:center;justify-items:end;text-align:right;font-size:10.5px;color:#DCE6F5}
.ag-src .ag-node{grid-column:2;grid-row:1/4;align-self:center}
.ag-src b{grid-column:1;grid-row:1;font-size:11px;color:#fff;font-weight:700}
.ag-src small{grid-column:1;grid-row:2;font-size:10px;color:var(--on-ink-mute)}
.ag-src .sxv-pill{grid-column:1;grid-row:3;justify-self:end;margin-top:2px}
.ag-dst{list-style:none;margin:0;padding:0}
.ag-dst li{display:grid;grid-column:3;grid-template-columns:22px auto;column-gap:8px;align-items:center;font-size:10.5px;color:#DCE6F5}
.ag-dst b{font-size:11px;color:#fff;font-weight:700}
.ag-paths li:nth-child(1),.ag-dst li:nth-child(1){grid-row:2}
.ag-paths li:nth-child(2),.ag-dst li:nth-child(2){grid-row:3}
.ag-paths li:nth-child(3),.ag-dst li:nth-child(3){grid-row:4}
.ag-node{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.35);transition:opacity .4s,background .4s,border-color .4s,box-shadow .4s}
.ag-bad{background:#F2545B;border-color:#FF8A8F;box-shadow:0 0 10px rgba(242,84,91,.6)}
.ag-body::before{content:"";grid-column:2;grid-row:2/5;justify-self:start;align-self:stretch;width:2px;margin:10px 0;background:rgba(255,255,255,.22);border-radius:1px;transition:opacity .5s}
.ag-paths{list-style:none;margin:0;padding:0}
.ag-paths li{grid-column:2;align-self:center;position:relative;height:2px;background:rgba(255,255,255,.22);border-radius:1px;transition:opacity .5s}
.ag-paths li::after{content:"";position:absolute;left:36%;top:-7px;width:22px;height:16px;background:#050B16;border-left:2px solid #FF9F43;border-right:2px solid #FF9F43;opacity:0;transition:opacity .4s}   /* 혼선 = 경로가 끊긴 구간 */
.sxv:not(.sxv-js) .ag-paths li::after,.sxv-js.t2 .ag-paths li::after{opacity:1}
.sxv:not(.sxv-js) .ag-paths li,.sxv-js.t4 .ag-paths li,.sxv:not(.sxv-js) .ag-body::before,.sxv-js.t4 .ag-body::before{opacity:.4}
.ag-dot{position:absolute;top:-3px;left:0;width:100%;height:8px;pointer-events:none;--dot:#F2545B;animation:agRun 1.6s linear infinite;animation-delay:calc(var(--i) * .45s);will-change:transform}.ag-dot::before{content:"";position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--dot)}   /* 2026-10-22 점은 ::before, 이동은 transform — 줄 폭 100% 요소를 밀어 left 키프레임과 같은 궤적(translateX 의 % 는 자기 폭 기준) */
@keyframes agRun{from{transform:translateX(0);opacity:0}15%{opacity:1}to{transform:translateX(calc(100% - 8px));opacity:1}}
.sxv-js:not(.t1) .ag-dot{animation-play-state:paused;opacity:0}
.sxv:not(.sxv-js) .ag-paths li,.sxv-js.t2 .ag-paths li{background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px)}
.sxv:not(.sxv-js) .ag-dot,.sxv-js.t2 .ag-dot{animation:agJam 1.2s ease-in-out infinite alternate;--dot:#FF9F43}
@keyframes agJam{from{transform:translateX(8%);opacity:.9}to{transform:translateX(28%);opacity:.35}}
.sxv:not(.sxv-js) .ag-dst .ag-node,.sxv-js.t3 .ag-dst .ag-node{opacity:.3}
.sxv:not(.sxv-js) .ag-dst b,.sxv-js.t3 .ag-dst b{color:var(--on-ink-mute)}
.sxv:not(.sxv-js) .ag-bad,.sxv-js.t4 .ag-bad{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35);box-shadow:none}
.sxv:not(.sxv-js) .ag-dot,.sxv-js.t4 .ag-dot{opacity:0;animation:none}
.ag-meter{grid-column:1/-1;grid-row:5;margin:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;font-size:10.5px;color:#DCE6F5}
.ag-track{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.ag-track i{display:block;height:100%;width:14%;background:var(--signal);transition:width 1.2s cubic-bezier(.2,.7,.2,1),background .6s}
.sxv-js:not(.t1) .ag-track i{width:0}
.sxv-js.t1:not(.t3) .ag-track i{width:92%;background:#F2545B}
.sxv-js.t3:not(.t4) .ag-track i{width:46%;background:#FF9F43}
.ag-meter b{font-size:10.5px;color:#fff;white-space:nowrap}
/* 04 Deep Scan — 기준 이미지 · 지문 막대 · 변형 3종 대조 */
.sc-body{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}
@media (max-width:479px){.sc-body{grid-template-columns:1fr}}
.sc-src{justify-items:start}
.sc-img{display:block;width:54px;height:40px;border-radius:6px;background:linear-gradient(180deg,#7FB0FF 0 58%,#2F5FB3 58%);position:relative;overflow:hidden;transition:opacity .4s,transform .4s}
.sc-img::after{content:"";position:absolute;left:12px;top:8px;width:12px;height:12px;border-radius:50%;background:#F6C453}
.sc-fp{display:flex;align-items:flex-end;gap:2px;height:22px;width:100%}
.sc-fp i{flex:1;min-width:1px;height:var(--h);background:#E6EEF9;border-radius:1px;transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 25ms)}
.sxv-js:not(.t2) .sc-fp i{transform:scaleY(.08)}
.sc-note{font-size:10px;color:var(--on-ink-mute)}
.sc-vars{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sc-var{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 8px;transition:opacity .4s,transform .4s;transition-delay:calc(var(--i) * 140ms)}
.sc-var .sc-img{width:40px;height:30px}
.sc-var .sc-img::after{left:9px;top:6px;width:9px;height:9px}
.sc-m .sc-img{background:repeating-conic-gradient(#7FB0FF 0 25%,#4C79C9 0 50%) 0 0/8px 8px}   /* 모자이크 */
.sc-c .sc-img{width:26px;height:30px}   /* 크롭 */
.sc-h .sc-img{filter:hue-rotate(130deg) saturate(1.3)}   /* 색상 변경 */
.sc-w{display:grid;gap:4px;min-width:0}
.sc-var b{font-size:11px;color:#fff;font-weight:600;line-height:1.3}
.sc-sig{display:flex;gap:2px}.sc-sig i{width:4px;height:11px;border-radius:1px;background:rgba(255,255,255,.14);transition:background-color .3s;transition-delay:calc(var(--i) * 45ms)}
.sc-sig i.on{background:var(--signal)}
.sxv-js:not(.t3) .sc-var{opacity:0;transform:translateX(-6px)}
.sxv-js:not(.t3) .sc-sig i.on{background:rgba(255,255,255,.14)}
/* 05 DeterOS — 수신 카드 · 의심/불안/경고 요소 · 진입 장벽 */
.dt-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:479px){.dt-body{grid-template-columns:1fr}}
.dt-phone{position:relative;border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:10px;display:grid;gap:8px;background:rgba(255,255,255,.03);align-content:start}
.dt-msg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;padding:8px;border-radius:8px;background:rgba(255,255,255,.06)}
.dt-thumb{width:34px;height:34px;border-radius:6px;background:repeating-linear-gradient(45deg,#3A4A66 0 4px,#2A3850 4px 8px)}
.dt-msg b{font-size:11px;color:#fff;display:block;line-height:1.3;word-break:keep-all}
.dt-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.dt-chips em{font-style:normal;font-size:10px;font-weight:700;border-radius:999px;padding:1px 7px;background:rgba(242,84,91,.18);color:#FFB3B6;border:1px solid rgba(242,84,91,.5);transition:opacity .35s,transform .35s;transition-delay:calc(var(--i) * 120ms)}
.sxv-js:not(.t2) .dt-chips em{opacity:0;transform:translateY(4px)}
.dt-act{display:grid;gap:8px;justify-items:start}
.dt-open{font-size:10.5px;color:#fff;background:rgba(255,255,255,.15);border-radius:999px;padding:3px 10px;transition:opacity .4s}
.sxv:not(.sxv-js) .dt-open,.sxv-js.t3 .dt-open{opacity:.4;text-decoration:line-through}   /* 장벽이 서면 열람이 막힌다 */
.dt-bar{justify-self:stretch;text-align:center;border:1px dashed #FF9F43;border-radius:6px;background:rgba(255,159,67,.14);padding:6px 10px;font-size:10.5px;color:#FFD3A6;font-weight:700;white-space:nowrap}
.dt-out p{margin:0;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10.5px;color:#DCE6F5;flex-wrap:wrap}
/* 06 Ridentify — 시선 점 · 추상 실루엣(얼굴 없음) · 보호 고리 */
.ri-body{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center}
@media (max-width:479px){.ri-body{grid-template-columns:1fr}}
.ri-stage{position:relative;height:176px;display:grid;place-items:center}
/* 실루엣 = 한 요소의 그라데이션 두 개(머리 원 + 어깨 반타원). 잔상(.ri-g)·노이즈(.ri-noise)는 같은 모양을 색·마스크만 바꿔 겹친다 — 얼굴 없음 */
.ri-fig{position:relative;z-index:2;width:72px;height:84px;--c:#DCE6F5;background:radial-gradient(circle at 50% 24%,var(--c) 17px,transparent 18px),radial-gradient(31px 30px at 50% 98%,var(--c) 98%,transparent 100%);transform:translate(0,-8px)}
.ri-g{position:absolute;inset:0;background:radial-gradient(circle at 50% 24%,var(--c) 17px,transparent 18px),radial-gradient(31px 30px at 50% 98%,var(--c) 98%,transparent 100%);opacity:0;mix-blend-mode:screen}
.ri-g1{--c:#4ED4FF}.ri-g2{--c:#FF5FA8}
.ri-noise{position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.92 0 0 0 0 1 0 0 0 1.4 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;background-size:96px 96px;-webkit-mask:radial-gradient(circle at 50% 24%,#000 17px,transparent 18px),radial-gradient(31px 30px at 50% 98%,#000 98%,transparent 100%);mask:radial-gradient(circle at 50% 24%,#000 17px,transparent 18px),radial-gradient(31px 30px at 50% 98%,#000 98%,transparent 100%);opacity:0;transition:opacity .45s;animation:riStatic .12s steps(2) infinite}
@keyframes riStatic{0%{background-position:0 0}25%{background-position:-31px 17px}50%{background-position:23px -29px}75%{background-position:-11px -19px}100%{background-position:37px 9px}}
.ri-mask{position:absolute;left:50%;top:24%;width:32px;height:12px;margin:-6px 0 0 -16px;border-radius:7px;background:#fff;box-shadow:0 0 0 1px rgba(52,123,247,.35),0 0 10px rgba(52,123,247,.5);z-index:3;transition:opacity .3s,transform .3s cubic-bezier(.3,1.5,.5,1)}   /* 가면 */
.ri-frame{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-62px 0 0 -32px;border:2px solid rgba(52,123,247,.75);z-index:1;-webkit-mask:linear-gradient(#000 0 0) 0 0/14px 14px no-repeat,linear-gradient(#000 0 0) 100% 0/14px 14px no-repeat,linear-gradient(#000 0 0) 0 100%/14px 14px no-repeat,linear-gradient(#000 0 0) 100% 100%/14px 14px no-repeat;mask:linear-gradient(#000 0 0) 0 0/14px 14px no-repeat,linear-gradient(#000 0 0) 100% 0/14px 14px no-repeat,linear-gradient(#000 0 0) 0 100%/14px 14px no-repeat,linear-gradient(#000 0 0) 100% 100%/14px 14px no-repeat;transition:opacity .4s}   /* 인식 괄호 */
.sxv-js:not(.t1) .ri-frame{opacity:0}
/* 2 재규정 — 지직거림: 실루엣이 가로 조각으로 찢기며 청록·자홍 잔상이 갈라지고 안에 정전기 노이즈가 낀다 */
.sxv-js.t2:not(.t3) .ri-fig{animation:riJit .45s steps(1) infinite}
.sxv-js.t2:not(.t3) .ri-g1{opacity:.9;animation:riG1 .55s steps(1) infinite}
.sxv-js.t2:not(.t3) .ri-g2{opacity:.9;animation:riG2 .7s steps(1) infinite}
.sxv-js.t2:not(.t3) .ri-frame{animation:riJitF .3s steps(1) infinite}
@keyframes riJit{0%{transform:translate(-1px,-8px)}30%{transform:translate(2px,-8px)}60%{transform:translate(-2px,-8px)}100%{transform:translate(1px,-8px)}}
@keyframes riJitF{0%{transform:translateX(2px)}50%{transform:translateX(-2px)}100%{transform:translateX(1px)}}
@keyframes riG1{0%{clip-path:inset(0 0 70% 0);transform:translateX(-4px)}25%{clip-path:inset(35% 0 40% 0);transform:translateX(3px)}50%{clip-path:inset(60% 0 10% 0);transform:translateX(-3px)}75%{clip-path:inset(15% 0 55% 0);transform:translateX(4px)}100%{clip-path:inset(45% 0 25% 0);transform:translateX(-2px)}}
@keyframes riG2{0%{clip-path:inset(50% 0 20% 0);transform:translateX(4px)}25%{clip-path:inset(10% 0 65% 0);transform:translateX(-3px)}50%{clip-path:inset(30% 0 45% 0);transform:translateX(3px)}75%{clip-path:inset(70% 0 0 0);transform:translateX(-4px)}100%{clip-path:inset(0 0 80% 0);transform:translateX(2px)}}
.sxv-js.t2 .ri-noise{opacity:.95}
/* 3 재정의 — 노이즈가 가라앉고 가면이 남는다(부정적 시선을 가린 채) */
.sxv:not(.sxv-js) .ri-noise,.sxv-js.t3 .ri-noise{opacity:.42}
.sxv-js .ri-mask{opacity:0;transform:scale(.4)}
.sxv:not(.sxv-js) .ri-mask,.sxv-js.t3 .ri-mask{opacity:1;transform:none}
.ri-lbl{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:10.5px;color:var(--on-ink-mute)}
.ri-eye{position:absolute;left:calc(50% - 5px);top:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:#F2545B;transform:rotate(var(--a)) translateY(-64px);transition:background .5s,box-shadow .5s,transform .8s cubic-bezier(.2,.7,.2,1),opacity .4s;transition-delay:calc(var(--i) * 60ms)}
.ri-eye::before{content:"";position:absolute;left:4px;top:10px;width:2px;height:40px;background:linear-gradient(180deg,rgba(242,84,91,.85),transparent);transition:opacity .5s}
.sxv-js.t1 .ri-eye{transform:rotate(var(--a)) translateY(-64px)}
.sxv:not(.sxv-js) .ri-eye,.sxv-js.t2 .ri-eye{background:#FF9F43;transform:rotate(calc(var(--a) + 14deg)) translateY(-70px)}
.sxv:not(.sxv-js) .ri-eye::before,.sxv-js.t2 .ri-eye::before{opacity:.35}
.sxv:not(.sxv-js) .ri-eye,.sxv-js.t3 .ri-eye{background:#347BF7}
.sxv:not(.sxv-js) .ri-eye::before,.sxv-js.t3 .ri-eye::before{opacity:.3;background:linear-gradient(180deg,rgba(52,123,247,.8),transparent)}
.ri-shield{position:absolute;left:50%;top:50%;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:2px solid var(--signal);box-shadow:0 0 0 6px rgba(52,123,247,.14);transition:opacity .5s,transform .6s cubic-bezier(.3,1.4,.5,1)}
.sxv-js .ri-shield{transform:scale(.6)}
.sxv-js.t4 .ri-shield{transform:none}
.ri-out p{margin:0;display:flex;gap:6px;flex-wrap:wrap}
.ri-bad{border-color:rgba(242,84,91,.6);color:#FFB3B6}
.sxv:not(.sxv-js) .ri-bad,.sxv-js.t2 .ri-bad{opacity:.35;text-decoration:line-through}
@media (prefers-reduced-motion:reduce){.sxv *{animation:none!important;transition:none!important}}
/* 휴대폰 정돈(대표 2026-10-26 '이 섹션, 모바일에서 … 단 하나 불편한 점 없이 정돈된 연출') — PC 무변화. 이 블록은 위 계기판 규칙들 *뒤*에 있어야 이긴다(같은 특이도).
   실측(375, 수정 전): 탭 카드 155px(설명 2줄 = 바로 아래 카드 부제와 같은 문장) · 단계 띠 4칸 54px 에 '악성/앱/전체/스캔' 4줄 · 세 칸이 세로로 쌓여 Deep-Coding 그림 731px →
   가장 긴 카드 높이(1,089)를 여섯 장 모두 예약해 Aegis 는 그림 283px 이 750px 상자 가운데 떠 있었다. gpt-6-astra 시각 심사 13건 반영(칸 읽기 순서 1→2→3·막대 공통 폭·화살표 틈·크롭 행 정렬·대기 중 빈 칸) */
.dt-out p.sxv-h{display:block;color:#7FA6E8}   /* '차단기제'는 칸 제목 — .dt-out p(특이도 높음)가 제목 모양을 덮어 흰 본문처럼 보였다(모든 폭의 결함) */
@media (max-width:639px){.sxn a{grid-template-rows:auto auto;padding:12px 14px;gap:3px}.sxn .sxn-h,.sxn .sxn-arr{display:none}.sxn>li{flex-basis:46%}}   /* 탭 = 번호·이름만(설명은 아래 카드 부제와 같은 문장) — 155→74px */
@media (max-width:479px){
  .sxv-rail{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px;column-gap:12px}   /* 단계 띠 2×2 — 이름이 낱말마다 줄바뀌지 않게(홈 진행 과정·가이드 그림도 같은 띠) */
  .sxv-js .sxv-rail li{opacity:.6}   /* 아직 안 온 단계도 읽힌다(.35 는 글자가 묻혔다) — 진행은 윗선 채움·밝기로 구분 */
  .sxv-js .sxv-pill:is(.s1,.s2,.s3,.s4),.sxv-js .sxv-chip:is(.s1,.s2,.s3,.s4){opacity:.22;transform:none}   /* 결과 알약·칩은 차례가 오기 전에도 흐린 윤곽으로 자리를 지킨다(빈 칸으로 보이지 않게) */
  .sxv-js.t1 .s1,.sxv-js.t2 .s2,.sxv-js.t3 .s3,.sxv-js.t4 .s4{opacity:1}
  /* 01 Deep-Coding — 칸 순서 = 단계 순서(스캔 → 취약점 → 방어 기제), 스캔·방어 기제 칸은 가로로 눕혀 낮게 */
  .sxv-dc .sxv-3>.sxv-col:nth-child(1){grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:end}
  .sxv-dc .sxv-3>.sxv-col:nth-child(1)>.sxv-h{grid-column:1/-1}
  .sxv-dc .sxv-3>.sxv-col:nth-child(1)>.dc-grid{grid-column:1;grid-row:2/4;align-self:center;max-width:196px}
  .sxv-dc .sxv-3>.sxv-col:nth-child(1)>.dc-key{grid-column:2;grid-row:2}
  .sxv-dc .sxv-3>.sxv-col:nth-child(1)>.sxv-kv{grid-column:2;grid-row:3}
  .sxv-dc .dc-find{gap:6px}
  .sxv-dc .dc-find li{grid-template-columns:auto minmax(0,1fr);row-gap:4px}   /* 이름·수치 한 줄, 그 아래 막대 — 세 막대가 같은 폭·같은 시작점(값끼리 비교된다) */
  .sxv-dc .dc-find .dc-bar{grid-column:1/-1;grid-row:2}
  .sxv-dc .dc-find small{grid-column:2;grid-row:1;justify-self:end;text-align:right}
  .sxv-dc .dc-c{grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
  .sxv-dc .dc-c>.sxv-h{grid-column:1/-1}
  .sxv-dc .dc-c>.dc-ring{grid-column:1;grid-row:2/4;width:64px;height:64px}
  .sxv-dc .dc-c>.sxv-kv{grid-column:2;grid-row:2;align-self:end}
  .sxv-dc .dc-c>.sxv-pill{grid-column:2;grid-row:3;align-self:start}
  /* 02 Data-Swapjack — 서버 → 바꿔치기 나란히, 유포 데이터는 아래 한 줄. 화살표는 칸 테두리에서 떨어진 18px 틈 가운데 */
  .sxv-ds .sxv-3{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .sxv-ds .sxv-3>.sxv-col:nth-child(3){grid-column:1/-1}
  .sxv-ds .sxv-col:nth-child(1)::after{content:"→";left:auto;right:-14px;top:50%;bottom:auto;transform:translateY(-50%)}
  .sxv-ds .sxv-col:nth-child(2)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-16px;transform:translateX(-50%)}
  .sxv-ds .ds-out{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sxv-js:not(.t4) .ds-out li{opacity:.18;transform:none}   /* 결과 칸도 차례 전엔 흐린 자리 */
  .sx-sec .ag-body{row-gap:30px}   /* 03 Aegis — 가장 짧은 그림이라 경로 사이를 조금 띄운다(66px 은 느슨했다 — 심사) */
  /* 06 DeepScan — 기준 이미지와 지문 막대를 나란히, 변형 행의 그림 칸 40px 고정(크롭만 글자가 14px 왼쪽에서 시작하던 것) */
  .sc-src{grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:end}
  .sc-src>.sxv-h{grid-column:1/-1}
  .sc-src>.sc-img{grid-row:2/4}
  .sc-src>.sc-fp,.sc-src>.sc-note{grid-column:2}
  .sc-var{grid-template-columns:40px minmax(0,1fr) auto}
}
/* 12 C2 네트워크 */
.netw.lab-dark{padding-block:clamp(56px,8vw,104px)}
.netw .sec-head h2{color:#fff}
.netw .sec-head p{color:var(--on-ink-mute)}
.netw figcaption{color:var(--on-ink-mute)}
.netw figcaption a{color:#fff}
/* 14 닥터피싱(13 DeepScan 섹션 안) */
.drp-band{margin-top:22px;border:1px solid var(--line);border-radius:18px;background:#fff;padding:22px;display:grid;gap:22px;align-items:center}
@media (min-width:900px){.drp-band{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:28px}}
.drp-txt{display:grid;gap:12px;min-width:0}
.drp-txt h3{font-size:clamp(20px,2.4vw,24px);line-height:1.3;word-break:keep-all}
.drp-q{margin:0;padding-left:14px;border-left:3px solid var(--signal)}
.drp-q p{margin:0;color:var(--navy)}
.drp-q footer{font-size:12px;color:var(--mute);margin-top:6px}
.drp-fig{margin:0;display:grid;gap:12px;min-width:0}
.drp-k{display:flex;gap:24px}
.drp-k div{display:grid}
.drp-k b{font-size:clamp(26px,3vw,32px);color:var(--signal)}
.drp-k span{font-size:13px;color:var(--mute)}
.drp-bars{display:flex;align-items:flex-end;gap:4px;height:120px;border-bottom:1px solid var(--line);padding-bottom:18px;position:relative;min-width:0}
.drp-bar{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.drp-bar i{display:block;width:100%;max-width:26px;height:var(--h);min-height:2px;background:var(--signal);border-radius:3px 3px 0 0;transform-origin:bottom}
.drp-bar small{position:absolute;bottom:-17px;font-size:10px;color:var(--mute)}
.drp-fig figcaption{font-size:12px;color:var(--mute);word-break:keep-all}
/* 15 수법·실제 화면 */
.mt{background:var(--paper)}
.mt-grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:900px){.mt-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px}}
.mt-left{display:grid;gap:14px;min-width:0}
.mt-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:5px}
.mt-tab{border:0;background:none;border-radius:10px;padding:10px 6px;font:inherit;font-size:15px;font-weight:700;color:var(--mute);cursor:pointer;display:flex;gap:6px;justify-content:center;align-items:center}
.mt-tab .mono{font-size:11.5px;font-weight:500}
.mt-tab[aria-pressed="true"]{background:var(--navy);color:#fff}
.mt-chips{display:flex;flex-wrap:wrap;gap:6px}
.mt-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;color:var(--navy);cursor:pointer}
.mt-chip[aria-pressed="true"]{border-color:var(--signal);color:var(--signal);font-weight:700;background:#EEF4FF}
.mt-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;display:grid;gap:10px;min-width:0}
.mt-panel h3{font-size:19px}
.mt-panel h3 span{font-size:13px;color:var(--mute);font-weight:500}
.mt-panel p{margin:0;font-size:15px;line-height:1.7;color:var(--navy);word-break:keep-all}
.mt-guide{font-size:14px;color:var(--signal);font-weight:600;text-decoration:none;justify-self:start}
.mt-cta{display:grid;gap:10px;justify-items:start}
.mt-cta p{margin:0;font-size:14px;color:var(--mute)}
.mt-right{display:grid;gap:10px;justify-items:center;min-width:0}
.mt-phone{width:min(300px,100%);aspect-ratio:9/18.5;border-radius:34px;background:#0B1627;padding:12px;box-shadow:0 20px 50px rgba(15,30,51,.25);display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;overflow:hidden}
.mt-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 6px}
.mt-ttl{font-size:12px;color:#fff}
.mt-tag{font-size:10.5px;color:#0B1627;background:var(--frost);border-radius:999px;padding:2px 8px;white-space:nowrap}
.mt-tag.is-real{background:#FCA5A5}
.mt-screen{position:relative;border-radius:24px;overflow:hidden;background:#F4F6FA;min-height:0}
.mt-chat{position:absolute;inset:0;padding:16px 12px;display:flex;flex-direction:column;gap:8px;justify-content:flex-end;transition:opacity .4s}
.mt-b{margin:0;max-width:84%;background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:8px 12px;font-size:13.5px;line-height:1.45;color:var(--navy);word-break:keep-all;transition:opacity .35s,transform .35s}
.mt-file{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:700}
.mt-file::before{content:"⬇ ";}
.mt-screen .mt-shot{position:absolute;inset:0;margin:0;transition:opacity .45s}
.mt-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.mt-shot figcaption{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(11,22,39,.86);color:#fff;border-radius:10px;padding:6px 10px;display:grid;gap:1px}
.mt-shot figcaption b{font-size:12.5px}
.mt-shot figcaption span{font-size:11.5px;color:var(--frost)}
.mt-js .mt-screen .mt-shot{opacity:0}
.mt-js .mt-screen .mt-shot.on{opacity:1}
.mt-js .mt-b{opacity:0;transform:translateY(6px)}
.mt-js .mt-b.on{opacity:1;transform:none}
.mt-js .mt-chat.off{opacity:0}
.mt-note{margin:0;font-size:12px;color:var(--mute);text-align:center;max-width:32em;word-break:keep-all}
.mt-strip{margin-top:36px}
.mt-strip-h{font-size:12.5px;letter-spacing:.08em;color:var(--mute);margin:0 0 10px}
.mt-reel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.mt-reel .mt-shot{position:relative;flex:0 0 150px;margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);scroll-snap-align:start;background:#fff}
.mt-reel .mt-shot img{height:auto;aspect-ratio:9/20}
.mt-reel .mt-shot figcaption{position:static;background:none;color:var(--navy);padding:8px 10px}
.mt-reel .mt-shot figcaption span{color:var(--mute)}
/* 15 악성앱 대조 콘솔(2026-10-06 개편 — 대표 '디자인의 극치'). 글자·가는 선·실제 아이콘과 화면만. 파랑은 선택 표시와 행동에만, 윤곽은 한 겹.
   옛 구간(.mt-*)의 규칙은 ?mt=z 비교용으로 남긴다. */
.mx{background:var(--paper)}
.mx-cols{display:grid;gap:26px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:960px){.mx-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}}
.mx-lab{display:block;margin:0 0 10px;font-size:17px;font-weight:700;color:var(--navy)}
.mx-q{position:relative}
.mx-q input{width:100%;min-height:54px;box-sizing:border-box;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:16px;color:var(--navy);-webkit-appearance:none;appearance:none}
.mx-q input::placeholder{color:#8A97AB}
.mx-q input:focus{outline:0;box-shadow:0 0 0 2px var(--signal)}   /* 초점 윤곽 한 겹(테두리색은 그대로) */
.mx-why{margin:0 0 12px;font-size:15px;line-height:1.6;font-weight:600;color:var(--navy);word-break:keep-all;max-width:34em}
.mx-q input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.mx-res{list-style:none;margin:0;padding:6px 0 0}
.mx-res li{border-bottom:1px solid var(--line)}
.mx-res button{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;min-height:48px;padding:5px 2px;background:none;border:0;font:inherit;font-size:15px;font-weight:600;text-align:left;color:var(--navy);cursor:pointer}
.mx-res button .mx-ic{width:36px;height:36px}
.mx-res button .mono{font-size:12.5px;font-weight:400;color:var(--mute)}
.mx-res p{margin:10px 2px 4px;font-size:14.5px;line-height:1.6;color:var(--mute);word-break:keep-all}
.mx-sub{margin:14px 0 10px;font-size:13px;line-height:1.6;color:var(--mute);word-break:keep-all}
.mx-sub-b{margin:12px 0 0}
/* 아이콘 밭 = 쪽 단위 가로 넘김(대표 2026-10-06 '페이지를 만들어서 가로로 넘겨볼 수 있도록'). 열 수 고정(넓은 화면 10·좁은 화면 8), 타일 크기는 폭에서.
   스크립트가 켜지면 .mx-pages: 밭이 가로 스크롤 줄이 되고 그 안에 쪽(.mx-page — 넓은 화면 70개·좁은 화면 32개)이 한 장씩 스냅된다. 아래에 ‹ 01 / 05 › 줄(.mx-pg).
   스크립트가 없으면 서버가 그린 앞 70개가 그대로 격자(좁은 화면은 32개만). 쪽의 안쪽 여백 5px = 선택 테두리(바깥 4px)가 스크롤 상자에 잘리지 않게, 밭은 그만큼 바깥으로. */
.mx-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.mx-b{display:block;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:24%;background:none;cursor:pointer;transition:transform .18s}
.mx-b:hover{transform:translateY(-1px)}
.mx-b[aria-pressed="true"]{outline:2px solid var(--signal);outline-offset:2px}
@media (max-width:959px){.mx-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}.mx-grid:not(.mx-pages) .mx-b:nth-child(n+33){display:none}}
.mx-grid.mx-pages{display:flex;gap:0;margin:-5px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;align-items:flex-start;-webkit-overflow-scrolling:touch}
.mx-grid.mx-pages::-webkit-scrollbar{display:none}
.mx-page{flex:0 0 100%;min-width:0;box-sizing:border-box;padding:5px;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;align-content:start}
@media (max-width:959px){.mx-page{grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}}
.mx-pg{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;min-height:44px}
.mx-pg[hidden]{display:none}
.mx-pg-hint{display:inline-flex;align-items:center;gap:8px;min-width:0;color:var(--mute)}
.mx-pg-hint .hs-hint{font-size:13px;opacity:1}
.mx-pg-nav{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
@media (min-width:960px){.mx-pg{justify-content:flex-end}.mx-pg-nav{margin-left:0}}   /* 넓은 화면(안내 문구 없음): 갈매기를 넘김 버튼 바로 왼쪽에 — 떨어져 있으면 무엇을 가리키는지 약하다 */
.mx-pg-b{flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);font:400 26px/1 var(--sans);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s,color .15s}
.mx-pg-b span{display:block;transform:translateY(-2px)}   /* 글자 ‹ › 는 줄 바닥에 앉아 원 안에서 아래로 처진다(기술력 넘김 줄과 같은 보정) */
.mx-pg-b:hover{border-color:var(--signal);color:var(--signal)}   /* 끝 쪽 비활성·쪽 번호(.mx-pg-no)는 없앴다 — 루프 넘김(2026-10-07) */
/* 아이콘 타일 — 스프라이트(--sp)는 구간이 화면 가까이 올 때 스크립트가 넣는다(noscript 는 바로). 타일은 어떤 크기든 되게 좌표를 퍼센트로 환산한다: 가로 = x/(열−1), 세로 = y/(행−1) */
.mx-ic{display:block;width:100%;aspect-ratio:1;border-radius:24%;background:#fff var(--sp,none) no-repeat;background-size:calc(var(--cols,18)*100%) auto;background-position:calc(var(--x,0)/(var(--cols,18) - 1)*100%) calc(var(--y,0)/(var(--rows,18) - 1)*100%);box-shadow:0 1px 2px rgba(15,30,51,.10);overflow:hidden}
.mx-b .mx-ic{height:100%}
.mx-ic-img img{display:block;width:100%;height:100%;object-fit:cover}
.mx-ph{display:grid;place-items:center;color:#fff;font-weight:700;font-size:clamp(14px,1.1vw,19px);line-height:1;background:#2A3B57}   /* 첫 글자 타일 — 중립 남회색(파랑은 행동·선택에만, GPT 2026-10-07 F01; 위험 색은 등급 배지가 맡는다) */
/* 기록 패널(남색) */
.mx-rec{background:var(--ink);color:var(--on-ink);border-radius:20px;padding:24px;min-width:0;align-content:start;scroll-margin-top:84px}
.mx-rec>div[data-f="rec"]{display:grid;gap:18px}
@media (min-width:960px){.mx-rec{position:sticky;top:92px;padding:28px}}
/* 머리글(2026-10-07 대표 "훨씬 컴팩트하고 가지런하고 예쁘게"): 아이콘 56 · 이름 20px · 단서 한 줄 12.5px · 배지(테두리 없는 틴트, 11.5px)+분석일 한 줄. 세 줄이 같은 왼쪽 선에, 간격 3/5px */
.mx-rec-h{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center}
.mx-ic-l{width:56px;height:56px}
.mx-ic-l.mx-ph{font-size:24px}
.mx-rec-t{min-width:0}
.mx-nm{margin:0;font-size:20px;line-height:1.2;font-weight:700;color:#fff;word-break:keep-all;overflow-wrap:anywhere}
.mx-trait{margin:3px 0 0;font-size:12.5px;line-height:1.45;color:var(--on-ink-mute);word-break:keep-all}
.mx-meta{margin:5px 0 0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:12.5px;line-height:1.4;color:var(--on-ink-mute)}
.mx-t{display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 7px;border-radius:999px;background:rgba(246,196,83,.16);font-family:var(--mono);font-size:11.5px;line-height:1.3;color:#fff}   /* 위험 등급 배지 — 색은 의미(위험)로만, 테두리 없이 틴트 한 겹 */
.mx-t::before{content:"";width:7px;height:7px;border-radius:50%;background:#F6C453}
.mx-t[data-t="extreme"]{background:rgba(242,84,91,.2)}
.mx-t[data-t="extreme"]::before{background:#F2545B}
.mx-t[data-t="critical"]{background:rgba(255,159,67,.18)}
.mx-t[data-t="critical"]::before{background:#FF9F43}
.mx-ic-l{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
/* 기록 본문 — 2026-10-07 재구성(GPT 심사 F01·F02·F04·F05·F06·F07). 모든 폭에서 한 열, DOM 순서 = 보이는 순서: 사실 → 실제 화면 → 상담 → 관련 앱(접힘).
   480px 두 열 분기는 뺐다(그 폭에서 사실 열이 204px 로 좁아졌다). 화면 블록만 [장면 118px(640px 이상 150px) | 제목·캡션·순서 근거] 두 열. */
.mx-rec-b{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.mx-scr{min-width:0;display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:start;padding:12px;border-radius:16px;background:rgba(255,255,255,.035)}   /* 묶음 표면(패널 위 한 층) */
@media (min-width:640px){.mx-scr{grid-template-columns:150px minmax(0,1fr);gap:18px;padding:14px}}
}
.mx-scr-t{min-width:0}
.mx-scr-one .mx-scr-t{align-self:center}   /* 캡션 하나 = 장면 옆 세로 가운데 */
.mx-scr-h{margin:0 0 8px;font-size:12.5px;color:var(--on-ink-mute)}
/* 장면 = 수집 화면 원본 비율(360×800)을 자르지 않고, 누르면 원본이 새 창에(크게 보기) */
.mx-stage{position:relative;display:block;aspect-ratio:9/20;border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;box-shadow:0 0 0 1px rgba(255,255,255,.14)}   /* 기기 화면 느낌의 한 겹 테두리 */
.mx-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:top;opacity:0;transition:opacity .35s}
.mx-stage img.on{opacity:1}
.mx-zoom{position:absolute;right:6px;top:6px;padding:3px 7px;border-radius:7px;background:rgba(11,22,39,.72);color:#fff;font-size:11px;line-height:1.3;letter-spacing:.01em}   /* 장면 내용(로그인 칸·버튼)을 덮지 않게 상태 표시줄 자리(오른쪽 위)에 작게 */
.mx-stage:hover .mx-zoom,.mx-stage:focus-visible .mx-zoom{background:var(--signal)}
.mx-caps{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.mx-caps li{position:relative}
.mx-caps li::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:1px;background:rgba(195,211,236,.2)}   /* 순서 레일 — 설치 뒤 화면이 이어지는 차례 */
.mx-caps li:first-child::before{top:50%}
.mx-caps li:last-child::before{bottom:50%}
.mx-caps li:only-child::before{display:none}
.mx-cap{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:center;width:100%;min-height:44px;padding:6px 8px 6px 4px;border-radius:10px;background:none;border:1px solid transparent;font:inherit;font-size:13.5px;line-height:1.4;text-align:left;color:var(--on-ink-mute);cursor:pointer}   /* 44px 표적(GPT F04) · 번호는 레일 위 동그라미 */
.mx-cap .mono{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;background:var(--ink);border:1px solid rgba(195,211,236,.4);color:var(--on-ink-mute)}
.mx-cap[aria-current="true"]{color:#fff}
.mx-cap[aria-current="true"] .mono{background:var(--signal);border-color:var(--signal);color:#fff}   /* 고른 장면 = 파랑(선택) */
.mx-cap:hover,.mx-cap:focus-visible{color:#fff;border-color:rgba(143,179,255,.35)}
.mx-order{margin:0 0 8px 2px;font-size:12px;line-height:1.5;color:var(--on-ink-mute);word-break:keep-all}   /* 제목 아래, 캡션 위 */
.mx-dl{margin:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid rgba(195,211,236,.16)}   /* 한 열(2026-10-07: '첫 화면·연구소 분석' 두 카드의 2열 격자를 뺐다 — 한 장만 있는 앱 112 에서 옆 칸이 비었다) */
.mx-dl>div{display:grid;gap:3px;align-content:start;padding:12px 0;border-bottom:1px solid rgba(195,211,236,.16)}
.mx-dl-more{border-top:0}
.mx-dl-id{border-top:0}
.mx-dl-id:not([hidden])+.mx-scr[hidden]+.mx-dl{border-top:0}   /* 화면 블록이 숨겨져 신원 목록과 사실 목록이 맞닿으면 구분선이 두 줄(아래선+윗선)로 겹치던 것 */
.mx-dl-id>div:first-child{padding-top:0}
.mx-dl dt{font-size:12.5px;color:var(--on-ink-mute)}
.mx-dl dd{margin:0;font-size:15.5px;line-height:1.55;color:#fff;word-break:keep-all;overflow-wrap:anywhere}
.mx-dl dd.mono{font-size:14px}
.mx-act{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}   /* 한 줄(2026-10-07 대표 "한 줄로 압축") — 버튼이 남는 폭을 차지하고 보고서 링크는 오른쪽. 폭이 모자라면(320px·글자 확대) 링크가 아래 줄로 내려간다(GPT 심사 F01: 버튼 글자가 밖으로 나가는 것보다 줄바꿈) */
.mx-act .btn-primary{flex:1 1 auto;min-width:max-content;justify-content:center;text-align:center;white-space:nowrap}
@media (max-width:479px){.mx-act .btn-primary{padding-inline:14px;font-size:14.5px}.mx-act-l{display:none}}   /* 좁은 폭은 '설치했다면 지금 상담' + '보고서 전문 →'(310px 안) */
.mx-rec>div[data-f="rec"].mx-in{animation:mxIn .22s ease-out}   /* 앱을 바꿨을 때 한 번 스며들기 */
@keyframes mxIn{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
.mx-rep{font-size:14px;font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.mx-none{display:grid;gap:12px;justify-items:start;font-size:15px;line-height:1.65;color:#fff;word-break:keep-all}
.mx-none p{margin:0;max-width:30em}
.mx-none-h{font-size:19px;font-weight:700}
.mx-link{display:inline-flex;align-items:center;gap:4px;margin:6px 6px 0 0;padding:0 12px;min-height:38px;border:1px solid rgba(195,211,236,.3);border-radius:999px;background:rgba(255,255,255,.04);font:inherit;font-size:14px;line-height:1.3;color:#fff;text-decoration:none;cursor:pointer}   /* 2026-10-07: 밑줄 글줄 → 알약 버튼(누르면 그 앱 기록으로, 표적 38px — GPT F04) */
.mx-link::after{content:"›";color:#7FB0FF;font-weight:600}
.mx-link:hover,.mx-link:focus-visible{border-color:var(--signal);color:#fff;background:rgba(52,123,247,.18)}
.mx-link:active,.mx-cap:active{background:rgba(255,255,255,.1)}   /* 눌림 반응 */
.mx-sep{display:none}
/* 앱 이름 목록 3행(같은 아이콘 · 같은 서버 · 같은 계열): 알약 두 줄(행당 ~100~125px) → 글줄(2026-10-07 대표 "한 줄로 압축·컴팩트하게"). 라벨은 줄머리에 작게, 이름은 가운뎃점으로 이어지는 밑줄 링크 */
.mx-dl-more>div,.mx-dl-id>div[data-f="qrow"]{display:block;padding:6px 0 8px;border-bottom:0;font-size:14px;line-height:1.9}
.mx-dl-id>div[data-f="qrow"]{padding:0 0 10px;border-bottom:1px solid rgba(195,211,236,.16)}   /* 신원 행은 아래 '빼가는 정보'와 선으로 나눈다 */
.mx-dl-more dt,.mx-dl-id>div[data-f="qrow"] dt{display:inline;font-size:12.5px;color:var(--on-ink-mute);margin-right:8px}
.mx-dl-more dd,.mx-dl-id>div[data-f="qrow"] dd{display:inline;font-size:14px;line-height:1.9}
.mx-dl .mx-link{display:inline;max-width:100%;margin:0;padding:4px 0;min-height:0;border:0;border-radius:0;background:none;font-size:14px;color:#D9E4F5;text-decoration:underline;text-decoration-color:rgba(127,176,255,.55);text-underline-offset:3px;white-space:normal}
/* 가운뎃점은 버튼(원자 인라인) 안의 ::after 로 — 버튼과 뒤 글자 사이엔 nbsp 로도 못 막는 줄바꿈 기회가 있어, 점이 다음 줄 머리에 가던 것(2026-10-07 실측 'Purplay' 뒤). inline-block 이라 밑줄은 안 이어진다 */
.mx-dl .mx-link:not(:last-child)::after{content:"·";display:inline-block;margin:0 7px;color:var(--on-ink-mute);font-weight:400;text-decoration:none}
.mx-dl .mx-link:last-child::after{content:none}   /* 기본 .mx-link::after 의 '›' 가 마지막 이름에 되살아나지 않게 */
.mx-dl .mx-link:hover,.mx-dl .mx-link:focus-visible{background:none;color:#fff;text-decoration-color:#7FB0FF}
.mx-dl .mx-sep{display:none}
.mx-tag{display:inline-block;margin:5px 6px 0 0;padding:2px 8px;border-radius:6px;border:1px solid rgba(195,211,236,.22);color:#fff;font-size:13.5px;line-height:1.45}   /* 빼가는 정보 표식 — 각지고 중립(누를 수 없음이 보이게, GPT F07) */
.mx-dl dd[data-f="x"]{margin-top:-4px}
.mx-nm:focus{outline:none}
.mx-nm:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:6px}
.mx-nm.mx-nm-quiet:focus-visible{outline:none}   /* 손가락·마우스로 골라 초점이 옮겨왔을 땐 테두리 없이(키보드만 보임) */
.mx-more{border-top:1px solid rgba(195,211,236,.16);padding-top:0}
.mx .mx-more summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;color:#fff;font-size:14.5px;font-weight:600}   /* .mx summary{gap:0}(가이드 접힘, 뒤에 있음)보다 특이도를 높인다 */
.mx-more summary::-webkit-details-marker{display:none}
.mx-more summary::after{margin-left:auto;font-size:18px;color:#7FB0FF}   /* 표식은 사이트 공통 '+ / –'(173행)를 쓴다 — 오른쪽 끝 */
.mx-more summary small{font-weight:400;color:var(--on-ink-mute);font-size:12.5px}
.mx-more summary:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:8px}
/* 실제 화면이 있는 앱 — 화면으로 찾기(옆으로 넘기는 한 줄) */
.mx-shots{margin-top:18px}
.mx-shot-row{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.mx-shot-row>li{flex:0 0 72px;min-width:0;scroll-snap-align:start}
.mx-shot-row button{display:block;width:100%;padding:0;background:none;border:0;font:inherit;text-align:left;color:var(--navy);cursor:pointer}
.mx-shot-th{display:block;aspect-ratio:9/13;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.mx-shot-th img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.mx-shot-row b{display:block;margin-top:5px;font-size:12px;font-weight:600;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
.mx-shot-row button[aria-pressed="true"] .mx-shot-th{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal)}
.mx-shot-row button[aria-pressed="true"] b{color:var(--signal)}
.mx .btn:focus-visible,.mx button:focus-visible,.mx a:focus-visible,.mx summary:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.mx-rec .btn:focus-visible,.mx-rec button:focus-visible,.mx-rec a:focus-visible{outline-color:#fff}
/* 가이드에 적힌 유도 방식 — 채널 줄(펼치면 번호 단계 원문). 사이트 공통 details 규칙(FAQ용)을 이 구간에서 되돌린다 */
.mx-paths{margin-top:40px}
.mx details{border:0;padding:0}
.mx summary{font-size:inherit;font-weight:inherit;gap:0}
.mx-ch{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
@media (min-width:960px){.mx-ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:44px;align-items:start}}
.mx-ch>li{border-bottom:1px solid var(--line);min-width:0}
.mx-d>summary{display:grid;grid-template-columns:auto auto minmax(0,1fr) 16px;column-gap:10px;align-items:baseline;padding:12px 2px;cursor:pointer;list-style:none;min-height:48px;box-sizing:border-box}
.mx-d>summary::-webkit-details-marker{display:none}
.mx-d>summary::after{content:"+";font-family:var(--mono);font-size:15px;color:var(--mute);text-align:right;grid-column:4;grid-row:1}
.mx-d[open]>summary::after{content:"−"}
.mx-ch-n{font-size:16px;line-height:1.5;font-weight:700;color:var(--navy);white-space:nowrap}
.mx-ch-g{font-size:12px;color:var(--mute);white-space:nowrap}
.mx-ch-q{font-size:14.5px;line-height:1.5;color:var(--navy);text-align:right;min-width:0;word-break:keep-all}
@media (max-width:519px){.mx-d>summary{grid-template-columns:auto minmax(0,1fr) 16px}.mx-d>summary::after{grid-column:3}.mx-ch-q{grid-column:1 / 3;grid-row:2;text-align:left;color:var(--mute)}}
.mx-d:focus-within>summary,.mx-d>summary:hover{background:rgba(52,123,247,.04)}
.mx-steps{list-style:none;margin:0;padding:2px 2px 4px;display:grid;gap:12px}
.mx-steps>li{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:8px;align-items:baseline}
.mx-steps .mono{font-size:12px;color:var(--mute)}
.mx-steps b{display:block;font-size:15px;color:var(--navy);word-break:keep-all}
.mx-steps p{margin:3px 0 0;font-size:14.5px;line-height:1.65;color:#33435C;word-break:keep-all}
.mx-guide{display:inline-block;margin:10px 2px 16px 36px;font-size:14px;font-weight:600;color:var(--signal);text-decoration:none}
.mx-end{margin-top:34px;display:grid;gap:12px}
.mx-end p{margin:0;font-size:17px;line-height:1.6;font-weight:600;color:var(--navy);word-break:keep-all;max-width:36em}
.mx-end p.mx-end2{font-size:15px;font-weight:400;color:#33435C;margin-top:-4px}
.mx-end-l a{font-size:15px;font-weight:600;color:var(--signal);text-decoration:none}
.mx-note{margin:18px 0 0;font-size:12.5px;line-height:1.7;color:var(--mute);word-break:keep-all;max-width:60em}
@media (prefers-reduced-motion:reduce){.mx-stage img,.mx-b{transition:none}.mx-rec>div[data-f="rec"].mx-in{animation:none}}
/* 17 SBS */
.sbs{background:var(--ink);color:var(--on-ink)}
.sbs .sec-head h2{color:#fff}
.sbs .sec-head p{color:var(--on-ink-mute)}
.sbs-grid{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:900px){.sbs-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:32px}}
.sbs-video video{display:block;width:100%;height:auto;border-radius:14px;background:#000;aspect-ratio:16/9}
.sbs-src{margin:8px 0 0;font-size:12px;color:var(--on-ink-mute);word-break:keep-all}
.sbs-src a{color:#fff}
.sbs-quote{display:grid;gap:12px;min-width:0}
.sbs-who{margin:0;display:grid;gap:2px}
.sbs-who b{font-size:18px;color:#fff}
.sbs-who span{font-size:12.5px;color:var(--on-ink-mute)}
.sbs-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sbs-step{width:100%;text-align:left;border:1px solid rgba(195,211,236,.2);background:rgba(255,255,255,.03);border-radius:12px;padding:12px 14px;display:grid;gap:4px;font:inherit;color:var(--on-ink);cursor:pointer;transition:border-color .3s,background-color .3s}
.sbs-step .mono{font-size:11.5px;color:var(--frost)}
.sbs-step span:last-child{font-size:14.5px;line-height:1.55;word-break:keep-all}
.sbs-step.on{border-color:var(--signal);background:rgba(52,123,247,.14)}
.mt-grid:not(.mt-js) .mt-chat{display:none}   /* 스크립트가 없으면 실제 화면만 */
/* hidden 속성이 display 지정에 지지 않게(2026-09-29 실측: .mt-panel{display:grid} 가 hidden 을 이겨 9개 경로 설명이 한꺼번에 보였다) */
[hidden]{display:none!important}
.mt-right{position:relative}
/* '자동 재생 멈춤'·'자동 넘김 멈춤' 알약 버튼은 2026-09-30 대표 지시로 전부 뺐다(수상 장·기관 줄과 같은 규칙) — 마우스·키보드 초점이 머무는 동안 멈추고, 모션 줄이기면 완성 화면. */
.lab-fail a{color:#fff}

/* ── 히어로 '신규 분석 악성앱' 슬라이드(2026-09-29 대표) — 공용 흐르는 줄 엔진(.mq-rail/.mq-track, ark2026.js 3g)이 목록을 복제해 왼쪽으로 끊김 없이 흘린다(2026-10-26 통일).
   스크립트 없음·모션 줄이기 = 손으로 넘기는 정지 줄. 카드 위 마우스·키보드 초점이 머물면 멈춘다(멈춤 버튼은 2026-09-30 대표 지시로 뺐다). */
.stars figcaption.nap,.hero .stars figcaption.nap{display:grid;gap:8px;min-width:0;font-size:13px}
.nap-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.nap-t{color:#fff;font-weight:600;font-size:14px}
.nap-rail{overflow-x:auto;scrollbar-width:none}   /* 흐름·멈춤·복제 = 공용 엔진(.mq-rail/.mq-track), 흐림 없음 — 2026-10-26 통일 */
.nap-rail::-webkit-scrollbar{display:none}
.nap-track{list-style:none;margin:0;padding:2px 0;display:flex;gap:10px;width:max-content}
.nap-app{display:grid;grid-template-columns:44px minmax(0,auto);grid-template-rows:auto auto;column-gap:10px;row-gap:2px;align-items:center;padding:8px 14px 8px 8px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(195,211,236,.16);text-decoration:none;max-width:280px}
.nap-app:hover,.nap-app:focus-visible{border-color:var(--signal);background:rgba(52,123,247,.12)}
.nap-app img{grid-row:1/3;width:44px;height:44px;border-radius:10px;background:#fff;object-fit:cover}
.nap-n{color:#fff;font-size:13.5px;font-weight:600;line-height:1.3;max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:end}
.nap-m{display:flex;min-width:0;max-width:210px;color:var(--on-ink-mute);font-size:11.5px;line-height:1.3;white-space:nowrap;align-self:start}
.nap-al{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nap-m time,.nap-sep{flex:none}
.nap-sep{margin:0 5px}
.mq-on.mq-off .mq-track,.sxv-rest .ri-noise{animation-play-state:paused}   /* 2026-10-22 화면 밖이면 멈춘다 — 스크립트가 교차 관찰로 *-off(흐르는 줄)·sxv-rest(계기판 쉼)를 붙인다. 보이지 않는 마퀴·노이즈가 합성 커밋·페인트를 계속 만들던 상시 비용 */
@media (max-width:899px){.nap-app{grid-template-columns:36px minmax(0,auto);padding:6px 12px 6px 6px}.nap-app img{width:36px;height:36px;border-radius:8px}.nap-n{font-size:12.5px;max-width:205px}.nap-m{max-width:205px}}
.nap-ph{grid-row:1/3;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:18px;background:linear-gradient(135deg,#F6C453,#347BF7)}
.nap-ph.nap-extreme{background:linear-gradient(135deg,#F2545B,#347BF7)}
.nap-ph.nap-critical{background:linear-gradient(135deg,#FF9F43,#347BF7)}
@media (max-width:899px){.nap-ph{width:36px;height:36px;border-radius:8px;font-size:15px}}

/* ── 2026-09-30 대표 시안 반영(11·13·14·15·17·18번) ─────────────────────────── */
/* 11번 연구소: 머리 강조·퍼센트 막대·문장·숫자 오르는 모션 */
.lab-teaser .sec-head h2 .acc,.drp-txt h3 .acc{color:#4D8DFF}
.lab-teaser .sec-head h2 .acc{color:#6FA0FF}
.exfil-sub{margin:-2px 0 6px;font-size:13px;color:var(--on-ink-mute)}
.exfil-note{margin:12px 0 0;font-size:15px;line-height:1.7;color:#fff;word-break:keep-all}
.exfil-note b{color:#6FA0FF;font-weight:700}
.lab-num-anim .bar-row .fill{transform:scaleX(0);transform-origin:left}
.lab-num-anim.on .bar-row .fill{transform:none;transition:transform 1.2s cubic-bezier(.2,.8,.2,1) .15s}
.lab-teaser .lab-more .btn{white-space:normal}
/* 홈 연구소 버튼은 컴팩트(대표 2026-10-01 '너무 큰 영역'): 52→40px·16→14px·여백 22→16px. 문구·왼쪽 열 콘솔 아래 위치는 그대로. 터치(≤979px·pointer:coarse)는 44px 유지.
   .lab-more 는 /lab·솔루션 페이지도 쓰므로 전부 .lab-teaser 안으로 한정한다. */
.lab-teaser .lab-more{gap:8px}
.lab-teaser .lab-more .btn{min-height:40px;padding:0 16px;font-size:14px;gap:8px;border-radius:10px}
@media (max-width:979px),(pointer:coarse){.lab-teaser .lab-more .btn{min-height:44px}}
/* 13번 DeepScan: 문장 줄바꿈·예시 화면 캡션 왼쪽 정렬·큰 숫자 옆 괄호 */
.ds-quote p{word-break:keep-all}
.dsv-stage figcaption{text-align:left}
.dsv-num-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
.dsv-up{font-size:12.5px;color:var(--mute);font-weight:500;word-break:keep-all}
/* 14번 닥터피싱: drphishing.ai 첫 화면 구성 */
.drp-lede{margin:0;color:var(--mute);font-size:15px;line-height:1.7;word-break:keep-all}
.drp-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.drp-tags li{font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.drp-tags li::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.drp-tags .t-r{background:#FDECEC;color:#D64545}.drp-tags .t-y{background:#FFF1DC;color:#D9822B}.drp-tags .t-g{background:#E4F6EA;color:#2E9E5B}
.drp-priv{margin:0;font-size:12.5px;color:var(--mute);line-height:1.6;word-break:keep-all}
.drp-k{gap:12px}
.drp-k div{flex:1;min-width:0;border:1px solid var(--line);border-radius:14px;padding:14px 14px 12px}
.drp-k b.drp-r{color:#E5484D}
.drp-chart{background:var(--ink);border-radius:14px;padding:14px 14px 8px;min-width:0}
.drp-chart-h{margin:0 0 4px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.drp-chart-h b{font-size:14px;color:var(--on-ink);font-weight:700}
.drp-chart-h span{font-size:12px;color:var(--on-ink-mute)}
.drp-plot{position:relative;height:220px;margin:0 4px}
.drp-ribbon{position:absolute;inset:0;background:var(--signal)}
.drp-vl{position:absolute;bottom:24px;width:1px;background:rgba(195,211,236,.14);transform:translateX(-50%)}
.drp-dot{position:absolute;width:9px;height:9px;box-sizing:border-box;border-radius:50%;background:var(--ink);border:2px solid var(--frost);transform:translate(-50%,-50%)}
.drp-val{position:absolute;transform:translate(-50%,-160%);font-size:13px;font-weight:700;color:var(--on-ink);font-style:normal;line-height:1}
.drp-mo{position:absolute;bottom:0;transform:translateX(-50%);font-size:11px;color:var(--on-ink-mute);white-space:nowrap}
@media (max-width:520px){.drp-val{font-size:11px}.drp-mo{font-size:10px}}
/* 15번 수법: 버튼 한 줄·폰 위치 */
.mt-cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* 17번 SBS: 요약 3줄 */
.sbs-step span:last-child{font-weight:600}
/* 18번 협력·캠페인: 카드 전체가 링크, 내리면 하나씩 뜬다 */
.bnr-card.is-link{text-decoration:none;color:inherit;cursor:pointer;transition:box-shadow .25s,transform .25s}
.bnr-card.is-link:hover,.bnr-card.is-link:focus-visible{box-shadow:0 10px 28px rgba(15,30,51,.14)}
.bnr-rv .bnr-card{opacity:0;transform:translateY(24px)}
.bnr-rv .bnr-card.in{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.faq-more{margin:14px 0 0;display:flex;justify-content:flex-end}
@media (prefers-reduced-motion:reduce){.bnr-rv .bnr-card{opacity:1;transform:none}.lab-num-anim .bar-row .fill{transform:none}}
/* 지도 모양 선택(대표 2026-10-01): 흐름형 · 기존형 */
.map-sw{display:inline-flex;gap:6px}
.map-sw-b[aria-pressed="true"]{background:#fff;color:#0B1627;border-color:#fff}
.stars figcaption.cap-links{display:flex;flex-wrap:wrap;gap:6px 18px}

/* ── 닥터피싱 블록 절제판(대표 2026-10-01 '갑자기 이게 너무 너무 유치해 보이네') ──
   걷어낸 것: 파스텔 신호등 알약 · 테두리 박스(숫자 칸 3 + 단계 칸 3) · 형광에 가까운 파랑·빨강 숫자 · 점 테두리 · 세로 보조선 · 굵은 선.
   남긴 것: 같은 문구·같은 수치·같은 그래프 구성. 글자와 가는 선만 쓰고, 어두운 면은 그래프 하나뿐. */
.drp-band{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:44px 0 0;margin-top:44px;gap:40px;align-items:start}
@media (min-width:900px){.drp-band{padding:44px 0 0;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}}
.drp-txt{gap:16px}
.drp-txt h3{font-size:clamp(22px,2.6vw,28px);font-weight:700;letter-spacing:-.02em}
.drp-txt h3 .acc{color:var(--signal)}
.drp-lede{font-size:15px;color:var(--mute)}
.drp-tags{gap:4px 18px}
.drp-tags li{padding:0;border-radius:0;background:none!important;font-size:13px;font-weight:500;color:var(--mute)!important;gap:7px}
.drp-tags li::before{width:7px;height:7px}
.drp-tags .t-r::before{background:#D9534F}.drp-tags .t-y::before{background:#D9A441}.drp-tags .t-g::before{background:#4EA36B}
.drp-steps{list-style:none;margin:4px 0 0;padding:0;display:block;border-top:1px solid var(--line)}
/* 단계 3행 — 번호·제목·설명이 같은 세 칸 격자(64px · 150px · 나머지)에 놓인다: 행 높이·글 시작 위치가 모두 같다(대표 2026-10-01 '규격도 비율도 안 맞는 것 같다') */
.drp-steps li{display:grid;grid-template-columns:64px 150px minmax(0,1fr);align-items:baseline;gap:0 8px;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:15px 0;min-width:0}
.drp-steps li+li{border-left:0;padding-left:0}
@media (max-width:640px){.drp-steps li{grid-template-columns:48px minmax(0,1fr);row-gap:3px;padding:14px 0}.drp-steps li small{grid-row:1/3}.drp-steps li b,.drp-steps li span{grid-column:2}}
.drp-steps small{font-size:11px;font-weight:500;color:var(--mute);letter-spacing:.08em;white-space:nowrap}
.drp-steps b{font-size:15px;font-weight:600;line-height:1.4;word-break:keep-all}
.drp-steps span{font-size:13.5px;color:var(--mute);line-height:1.5;word-break:keep-all}
.drp-priv{font-size:12.5px}
.drp-k{gap:0;border-bottom:1px solid var(--line);padding-bottom:18px}
.drp-k div{border:0;border-radius:0;padding:0 20px 0 0}
.drp-k div+div{border-left:1px solid var(--line);padding-left:20px}
.drp-k b,.drp-k b.drp-r{font-size:clamp(26px,2.8vw,34px);font-weight:600;color:var(--navy);letter-spacing:-.02em}
.drp-k span{font-size:13px;margin-top:2px}
.drp-chart{background:var(--ink);border-radius:12px;padding:18px 18px 10px}
.drp-chart-h b{font-size:13px;font-weight:600}
.drp-ribbon{background:var(--frost);opacity:.9}
/* 구간 선(대표 2026-10-01 '굳이 얇아지게 할 필요가 있는가'): 길이·각도로 눕힌 2px 선 — 어느 기울기에서도 두께가 같다. 미지원 브라우저는 위 띠 그대로 */
.drp-seg{display:none}
@supports (width:hypot(1px,1px)) and (transform:rotate(atan2(1px,1px))) and (width:1cqw){
  .drp-plot{container-type:size}
  .drp-ribbon{display:none}
  .drp-seg{display:block;position:absolute;left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqh);width:hypot(var(--dx) * 1cqw,var(--dy) * 1cqh);height:2px;background:var(--frost);opacity:.9;border-radius:1px;transform-origin:0 50%;transform:translateY(-50%) rotate(atan2(var(--dy) * 1cqh,var(--dx) * 1cqw))}
}
.drp-dot{width:7px;height:7px;border:0;background:var(--frost)}
.drp-val{font-size:12px;font-weight:500;color:var(--on-ink-mute);transform:translate(-50%,-165%)}
.drp-mo{font-size:11px}

/* ── 2026-10-01 대표 지시 ─────────────────────────────────────────────── */
/* 히어로: 윗 여백 축소(대표 '여기 윗 여백이 굳이 필요한가') — 왼쪽 열을 오른쪽 지도와 가운데 맞추던 것을 위 맞춤으로, 위 안쪽 여백 72 → 36px */
@media (min-width:900px){.hero{padding-block:0}.hero .wrap{align-items:start;padding-block:40px 56px}}   /* 섹션 자체의 위·아래 여백(102px)도 걷는다 — 이게 첫 화면 위 공백의 대부분이었다 */
/* 히어로 문구: 줄 구성은 마크업의 <br> 이 정한다(최대 폭 제한 없이, 좁은 화면에서만 각 줄 안에서 자동 줄바꿈) */
.hero .lede{max-width:none;word-break:keep-all}
/* 진행 과정: 단계마다 따라오는 것 + 하단 두 패널 */
.ps-more{grid-column:3;grid-row:3;display:grid;gap:10px;align-content:start;min-width:0;margin-top:4px}
.ps-more h4{margin:0;font-size:13px;font-weight:600;color:var(--navy);letter-spacing:.01em}
.ps-lead{margin:0;font-size:15px;line-height:1.75;color:var(--navy);word-break:keep-all}
.ps-note{margin:0;font-size:13.5px;line-height:1.6;color:var(--mute);word-break:keep-all}
.ps-tech-k{margin:4px 0 0;font-size:12px;font-weight:500;color:var(--mute);letter-spacing:.02em}
.ps-prep{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 18px}
.ps-prep li{font-size:13.5px;line-height:1.5;color:var(--navy);padding-left:12px;position:relative;word-break:keep-all}
.ps-prep li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--mute)}
.ps-tech{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.ps-tech a{display:inline-flex;gap:8px;align-items:baseline;text-decoration:none;color:inherit;min-width:0}
.ps-tech a::after{content:"›";color:var(--mute);font-size:15px;line-height:1;align-self:center}   /* 데스크톱에도 링크 단서(모바일 패널의 › 와 같게, GPT 2차 심사 F07) */
.ps-tech b{font-size:14px;font-weight:600;color:var(--navy);white-space:nowrap}
.ps-tech span{font-size:12.5px;line-height:1.45;color:var(--mute);word-break:keep-all}
.ps-tech a:hover b,.ps-tech a:focus-visible b{color:var(--signal);text-decoration:underline}
.ps-side{display:grid;gap:40px;margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}   /* 2026-10-08: 4행 전환으로 늘어난 높이를 간격에서 덜어낸다(GPT 2차 심사 F05) */
@media (min-width:900px){.ps-side{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px}}
.ps-side h3{font-size:18px;margin:0 0 6px}
.ps-todo ol,.ps-nope ul{list-style:none;margin:0;padding:0}
.ps-todo li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 8px;padding:14px 0;border-bottom:1px solid var(--line)}
.ps-todo li>span{font-size:12px;color:var(--mute);padding-top:3px}
.ps-todo b{font-size:15px;font-weight:600;color:var(--navy)}
.ps-todo p,.ps-nope p{margin:3px 0 0;font-size:13.5px;line-height:1.6;color:var(--mute);word-break:keep-all}
.ps-nope li{padding:14px 0;border-bottom:1px solid var(--line)}
.ps-nope s{font-size:15px;font-weight:600;color:var(--navy);text-decoration:line-through 2px #E5484D;text-decoration-thickness:2px;text-decoration-color:#E5484D}   /* 취소선이 잘 안 보였다(연회색 1px, 대표 2026-10-02 '취소선이 있는건지 없는건지 잘 모르겠다') → 빨강 2px, /help 의 같은 목록과 같은 표기 */
.ps-more-link{display:inline-block;margin-top:16px;font-size:14px;font-weight:600;color:var(--signal);text-decoration:none}
/* 상담 신청 영역(대표 시안 이미지) */
.close-v2{padding-bottom:0}
@media (max-width:899px){.hero+.close{padding-top:0}}   /* 2안: 첫 화면 바로 뒤 신청 폼 — 같은 바탕 두 구간의 위아래 여백이 겹쳐 152px 빈 곳이 됐다(실기기 2026-10-02) */
.close-v2 .wrap{gap:36px;align-items:center}
@media (max-width:899px){.close-v2 .wrap{gap:16px}}   /* 휴대폰: 안내 알약 ↔ 상담 신청서 사이 36→16px(대표 2026-10-26 "이 영역 사이의 폭을 좁혀줘") — 위아래로 쌓일 때만, PC 두 칸은 그대로 */
@media (min-width:900px){.close-v2 .wrap{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px}}
.close-eb{color:var(--on-ink)}
.close-v2 h2{margin-top:14px;font-size:clamp(24px,2.85vw,36px);line-height:1.32;letter-spacing:-.02em;word-break:keep-all}   /* 36px 이하여야 시안대로 2줄에 들어간다 */
.close-v2 h2 .acc{color:#4D8DFF}
.close-v2 .close-lede{margin-top:22px;font-size:15.5px;line-height:1.7;color:var(--on-ink-mute);word-break:keep-all}
.close-chk{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:16px}
.close-chk li{display:flex;gap:12px;align-items:center;min-height:24px;font-size:15.5px;color:var(--on-ink)}
.close-chk li::before{content:"";flex:0 0 18px;height:18px;background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%2345C98A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.close-ch{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px;margin-top:36px}
@media (max-width:520px){.close-ch{grid-template-columns:minmax(0,1fr)}}
.close-tel,.close-chat{min-height:60px;border:1px solid rgba(195,211,236,.22);border-radius:14px;background:rgba(255,255,255,.03);color:var(--on-ink)}
.close-tel{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:0 10px;padding:10px 12px 10px 16px}
.close-tel-k{grid-column:1;font-size:11.5px;color:var(--on-ink-mute)}
.close-tel-n{grid-column:1;font-size:24px;font-weight:600;color:#fff;text-decoration:none;line-height:1.2;white-space:nowrap}
.close-copy{grid-column:2;grid-row:1/3;font:inherit;font-size:12.5px;color:var(--on-ink);background:transparent;border:1px solid rgba(195,211,236,.3);border-radius:10px;padding:9px 12px;cursor:pointer;white-space:nowrap}
.close-copy:hover,.close-chat:hover{border-color:rgba(195,211,236,.6)}
.close-chat{display:flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.close-v2 .close-sub{margin-top:14px;font-size:13px;color:var(--on-ink-mute)}
.form-card{border-radius:24px;padding:30px 34px 33px;gap:0;box-shadow:0 24px 60px rgba(0,0,0,.32)}
@media (max-width:520px){.form-card{padding:24px 20px 24px}}
.form-h{margin:0 0 10px;font-size:24px;line-height:1.3;letter-spacing:-.02em;color:var(--navy)}
.close-v2 .form-card .form-sub{margin:0 0 4px;font-size:15.5px;line-height:1.45;font-weight:500;color:var(--navy)}
.form-sub .acc{color:var(--signal)}
.form-card label{font-size:15px;font-weight:600;line-height:1.5;color:var(--navy);gap:6px}
.form-card label+label{margin-top:13px}
.form-card .form-lb small{font-size:12px;font-weight:400;color:var(--mute);margin-left:8px}
.form-card>label{grid-template-columns:4.6em minmax(0,1fr);column-gap:14px;align-items:center}   /* 항목명 | 입력칸 가로 두 줄(대표 2026-10-26 "이거 각각 가로로 배치해서 2 줄로") — 항목명 칸은 '피해 유형'(15px) 폭에 맞춘 고정 폭이라 두 입력칸의 왼끝이 맞는다 */
.form-card>label .form-lb small{display:none}   /* '해당하는 피해 유형을 선택해 주세요'는 칸 안 첫 줄 '선택해 주세요'와 같은 말 — 가로 배치에선 항목명 칸에 못 들어가 접는다 */
.form-card input,.form-card select{height:46px;border-radius:14px;padding:0 18px;background:#F4F6FA;border-color:#E3E8F0;font-weight:400}
.form-card input[type=checkbox]{height:18px;padding:0}
.form-card select{-webkit-appearance:none;appearance:none;padding-right:46px;background:#F4F6FA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%232A3547' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center/16px}
.form-card .agree{font-weight:400;margin-top:15px;min-height:24px}
.form-card .agree label{font-size:14.5px;font-weight:400;color:var(--navy);gap:0}
.form-card .agree-more{margin-left:auto}
.form-card .btn-primary{min-height:44px;height:44px;margin-top:21px;font-size:18px;border-radius:14px}
.close-v2 .form-card .form-priv{display:block;margin:20px 0 0;font-size:12px;line-height:1.4;color:var(--mute);text-align:center}
.close-crisis{margin:36px auto 0;padding-block:0 36px;text-align:center;font-size:13.5px;color:var(--on-ink-mute);word-break:keep-all}
.close-v2 .close-crisis{padding-bottom:calc(clamp(56px,8vw,104px) + 12px)}   /* 아래 여백 = 위 여백(구간 위 padding + 눈썹 글 margin-top 12px). 대표 2026-10-23 '하단 여백을 상단 여백만큼' */
@media (max-width:899px){.hero+.close .close-crisis{padding-bottom:36px}}   /* 홈 모바일은 위 여백이 0(첫 화면과 붙임)이라 아래만 기존 그대로 */
/* 아이콘은 인라인 SVG 가 아니라 CSS — 인라인 svg 는 조판 필터(Kotype)가 허용 목록 밖이라 문서 전체를 원문으로 돌려보낸다(C23) */
.close-chat::before{content:"";width:20px;height:20px;background:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-8l-5 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z' fill='none' stroke='%23E8EEF7' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E")}
.form-priv::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;background:no-repeat center/14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='1.8' fill='none' stroke='%238A97AB' stroke-width='1.8'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5' fill='none' stroke='%238A97AB' stroke-width='1.8'/%3E%3C/svg%3E")}
.close-v2 .close-crisis.wrap{display:block}   /* .close .wrap 의 2열 격자가 이 줄을 반으로 가르던 것 */
.form-card .err:empty{display:none}

/* ── 첫 화면 시안 B(?hero=b, 2026-10-01 대표 '아크링크에 걸맞는 최상') — 위기 입구 띠 + 모바일 순서. 평소 주소에는 .crisis 도 .hero-b 도 없다. ── */
.crisis{background:#12264A;color:#fff;border-bottom:1px solid rgba(195,211,236,.14)}
/* 띠 = 입구 하나(대표 2026-10-01 '아래에 또 버튼이 있어서 중복'): 버튼 모양 없이 질문 + 밑줄 링크 한 줄, 띠 전체가 탭 대상(최소 높이 48px). 전화·신청서는 히어로에만. */
.crisis-go{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;width:100%;min-height:48px;padding:9px 0;margin:0;background:none;border:0;color:#fff;font:inherit;font-size:14px;line-height:1.45;text-align:left;cursor:pointer}
.crisis-q{font-weight:700;color:#FFD166}   /* 질문 한 구절만 따뜻한 색 — 띠 전체를 붉게 칠하지 않는다(수치심 상태의 방문자에게 경보음을 울리지 않는다) */
.crisis-a{margin-left:auto;font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35);white-space:nowrap}
.crisis-a span{display:inline-block;transition:transform .2s}
.crisis-go:hover .crisis-a{text-decoration-color:#fff}
.crisis-go:hover .crisis-a span{transform:translateX(3px)}
.crisis-go:focus-visible{outline:2px solid #fff;outline-offset:-2px;border-radius:6px}
/* 근거 카드(모바일 전용) — 신뢰 줄 아래 한 장. 900px 이상은 지도가 옆에 있어 숨긴다 */
.hero-ev{display:grid;gap:4px;margin-top:18px;padding:12px 14px;border:1px solid rgba(195,211,236,.22);border-radius:12px;background:rgba(255,255,255,.04);color:var(--on-ink);text-decoration:none;font-size:13.5px;line-height:1.5;word-break:keep-all}
.hero-ev-k{font-size:11.5px;letter-spacing:.02em;color:var(--on-ink-mute)}
.hero-ev-t b{color:#fff;font-weight:700}
.hero-ev-m{color:var(--frost);font-weight:600;font-size:12.5px}
@media (min-width:900px){.hero-ev{display:none}}
@media (max-width:899px){.nap-head a{display:none}}   /* 휴대폰: 연구소로 가는 길은 첫 화면 상자 하나(대표 2026-10-30 "연구소 이동 탭 둘 중에 하나 빼도 될 듯") — PC 는 첫 화면 상자가 없어 이 링크가 유일 */
/* 피해 대응 그림 아래 연구소 링크 — 휴대폰은 홈 첫 화면 상자(.hero-ev)와 같은 모양·문구(대표 2026-10-30 "왼쪽 화면이랑 통일감 있게 문구 수정(디자인도)") */
@media (max-width:899px){a.lab-ev{display:block;margin-top:14px;padding:11px 14px;border:1px solid rgba(195,211,236,.22);border-radius:12px;background:rgba(255,255,255,.04);color:var(--frost);font-weight:600;font-size:12.5px;line-height:1.5;text-decoration:none}}
/* 히어로의 행동 줄이 보이는 동안 하단 고정 바를 내린다(같은 화면에 채운 버튼 셋이 경쟁하지 않게) — ark2026.js 가 .hero-b 에서만 html.cta-vis 를 켠다 */
.dock{transition:transform .25s ease}
.cta-vis .dock{transform:translateY(130%)}
@media (max-width:899px){
  .crisis-go{font-size:13.5px;padding:8px 0}
  .crisis-a{margin-left:0}   /* 두 줄: 질문 / 링크 */
  .hero-b .stars{order:1;padding-top:4px}        /* 글·행동·신뢰 줄이 먼저, 지도는 그 아래 — 벤치마크 11곳 공통 순서 */
  .hero-b .wrap{padding-block:26px 28px;gap:26px}
}


/* ── 가로 스크롤 단서(대표 2026-10-01 '가로 스크롤을 하면 더 콘텐츠가 나온다는 걸 전혀 알아차릴 수 없다') ── */
/* ① 보도자료: 가로 스크롤을 버리고 2줄 격자 + 더보기. 모바일 2열(4장) · 640px 이상 3열(6장) · 스크립트 없으면 전부 보인다(ark2026.js 3j 가 접는다) */
.press-sec .press-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;scroll-snap-type:none;padding-bottom:0}
.press-sec .press-card{width:auto;min-width:0}
.press-sec .press-card>span{-webkit-line-clamp:5;font-size:13.5px}   /* 2열 폭(약 170px)에서 긴 제목이 잘리지 않게 줄 수를 넉넉히 */
@media (min-width:640px){.press-sec .press-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.press-sec .press-card>span{-webkit-line-clamp:4;font-size:14px}}
@media (min-width:900px){.press-sec .press-card>span{-webkit-line-clamp:3}}
.press-sec .press-row.pr-js:not(.open) .press-card:nth-child(n+5){display:none}
@media (min-width:640px){.press-sec .press-row.pr-js:not(.open) .press-card:nth-child(n+5){display:grid}.press-sec .press-row.pr-js:not(.open) .press-card:nth-child(n+7){display:none}}
.press-more{margin:18px 0 0;display:flex;justify-content:center;align-items:center;gap:8px 14px;flex-wrap:wrap}
.press-fold{background:none;border:0;padding:8px 6px;font:inherit;font-size:13.5px;color:var(--mute);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.press-fold[hidden]{display:none}
.press-more[hidden]{display:none}
.press-more-btn{font:inherit;background:none;border:0;cursor:pointer;padding:12px 8px}   /* 터치 높이 44px 안팎(글자 15px + 위아래 12px) */
.press-more-btn span{transition:none}
/* ② 수상 연혁(모바일): 한 장씩 넘기는데 화살표가 숨어 있어 더 있는지 알 수 없었다 → 아래에 이전·다음 + 01 / 09 */
.awc-count{display:none}
@media (max-width:899px){
  .awc{padding-bottom:64px}
  .awc .awc-arr{display:grid;top:auto;bottom:0;transform:none;width:48px;height:48px}
  .awc .awc-prev{left:0}.awc .awc-next{right:0}
  .awc-count{display:block;position:absolute;left:56px;right:56px;bottom:16px;text-align:center;font-size:14px;letter-spacing:.06em;color:var(--mute)}
}
/* ③ 그 밖의 가로 스크롤 영역: 스크롤 진행 막대(항상) + 터치 기기 안내 문구(처음 밀기 전까지) — 맥 오버레이 스크롤바·가려진 스크롤바에서도 더 있다는 게 보인다 */
.hs-cue{display:flex;align-items:center;gap:12px;margin-top:10px;color:inherit}
.hs-cue[hidden]{display:none}
.hs-track{position:relative;flex:1;height:4px;border-radius:2px;background:rgba(128,140,160,.28)}   /* overflow:hidden 을 뺐다 — 아래 ::before 의 위아래 10px 누름 영역을 잘라 실제로는 4px 만 눌렸다(2026-10-06 실측, GPT 심사). 손잡이는 막대 안에서만 움직여 넘치지 않는다 */
.hs-track i{position:absolute;left:0;top:0;height:100%;border-radius:2px;background:var(--signal);will-change:transform}
/* 진행 막대가 붙은 가로 영역은 브라우저 기본 스크롤바를 숨긴다(대표 2026-10-02 '하단에도 스크롤이 중복으로 있어. 삭제해 줘').
   ark2026.js 3k 가 막대를 붙인 영역에만 .hs-on 을 단다 — JS 가 안 돌면 기본 스크롤바가 남는다. 마우스만 쓰는 데스크톱을 위해 막대를 누르거나 끌면 그 위치로 이동한다. */
.hs-on{scrollbar-width:none}
.hs-on::-webkit-scrollbar{display:none}
.hs-track{cursor:pointer;touch-action:none}
.hs-track::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.hs-hint{flex:none;font-size:12px;line-height:1;opacity:.72;white-space:nowrap}
.hs-cue.hs-done .hs-hint{display:none}
/* 도달 안내(대표 2026-10-06 '옆으로 넘겨보라는 애니메이션 [ ->>> ]', ark2026.js 머리 0 arkSwipeHint): 영역이 화면에 들어오면 갈매기 ››› 가 왼쪽부터 차례로 켜지며 오른쪽으로 밀리고(1.2초 × 3),
   영역 안의 내용이 왼쪽으로 26px 밀렸다 돌아온다(0.9초, 첫 도달 한 번). 한 번 넘기면 사라진다(.hs-done). 모션 줄이기면 움직임 없이 갈매기만.
   미는 것은 transform 이 아니라 translate 개별 속성 — 자식이 이미 가진 transform(배너 줄 카드 5장, 2026-10-06 실측)을 덮어쓰지 않고 합쳐진다. translate 를 모르는 옛 브라우저는 밀림 없이 갈매기만. */
.hs-go{display:inline-flex;flex:none;gap:1px;font:700 16px/16px var(--sans);color:var(--signal)}
.hs-cue .hs-go{margin-block:-6px}   /* 진행 막대 줄의 높이(막대 4px·안내 문구 12px)를 갈매기가 늘리지 않게 — 다른 구간의 세로 길이 불변 */
.hs-go i{font-style:normal;opacity:.26}
.hs-go.on i{animation:hsGo 1.2s ease-in-out 2}
.hs-go.on i:nth-child(2){animation-delay:.16s}
.hs-go.on i:nth-child(3){animation-delay:.32s}
@keyframes hsGo{0%,70%,100%{opacity:.26;transform:none}30%{opacity:1;transform:translateX(3px)}}
.hs-done .hs-go,.hs-done .hs-hint{display:none}
.hs-nudge>*{animation:hsNudge .9s cubic-bezier(.3,.7,.2,1) 1}
@keyframes hsNudge{0%,100%{translate:0 0}42%{translate:-26px 0}}
@media (prefers-reduced-motion:reduce){.hs-go.on i{animation:none;opacity:.8}.hs-nudge>*{animation:none}}
/* 갈매기 자리 — 줄 오른쪽 끝 고정(edge, 2026-10-07 채택; ark2026.js 3k) */
.hs-wrap{position:relative;min-width:0}   /* 격자·플렉스 칸 안에서 안의 가로 줄(max-content) 폭으로 늘어나지 않게(2026-10-26 모션 줄이기 실측: 신규 앱·기관 줄이 2,600~4,300px 로 벌어졌다) */
.hs-over{position:absolute;inset:0;pointer-events:none}
.hs-over.hs-done,.hs-over.hs-off{display:none}   /* hs-off = 내용이 넘치지 않음(ark2026.js 3k upd) — 밀 수 없는 영역에 '더 있다' 단서를 그리지 않는다 */
.hs-over .hs-go{position:absolute;top:var(--hs-y,50%);transform:translateY(-50%);font-size:22px;line-height:22px;gap:2px}   /* --hs-y = 첫 그림의 세로 중심(JS) */
.hs-edge{left:auto;width:72px;background:linear-gradient(90deg,transparent,var(--hs-bg,#fff) 62%)}   /* 오른쪽 끝, 바탕색 페이드가 '더 있다'를 말하고 갈매기는 그 위 — 내용을 덮지 않는다 */
.hs-edge .hs-go{right:4px}
@media (prefers-reduced-motion:reduce){.hs-mid .hs-go.on{animation:none;opacity:1;transform:translate(12px,-50%)}}

/* 진행 과정 모바일 접기 버튼(ark2026.js 3f-2) — 제목이 보이는 펼침. 데스크톱(900px 이상)에는 버튼이 생기지 않는다. */
.ps-fold{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:10px;padding:10px 0;background:none;border:0;border-top:1px solid var(--line);font:inherit;font-size:13.5px;font-weight:600;color:var(--navy);text-align:left;cursor:pointer}
.ps-fold i{flex:0 0 10px;width:10px;height:10px;border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.ps-fold[aria-expanded="true"] i{transform:rotate(-135deg) translateY(-2px)}
.ps-fold[aria-expanded="true"]+.ps-more{margin-top:0;border-top:0;padding-top:4px}
.fold-x{display:none}
/* 접기 그룹 단추(ark2026.js 3f-2 .fold-ck) = 단계 카드 자료 목록 단추(.help-ck-t)와 같은 모양 — 제목 · 파란 원 화살표 · '펼쳐보기/접기', 접혀 있는 동안 깜빡임(ckBlink 공용, 대표 2026-10-28 "여기도 … 반짝반짝") */
.ps-fold.fold-ck{justify-content:flex-start;gap:10px;min-height:44px;-webkit-tap-highlight-color:transparent}
.ps-fold.fold-ck i,.ps-fold.fold-ck[aria-expanded="true"] i{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border:0;border-radius:50%;background:var(--signal);color:#fff;box-shadow:0 2px 8px rgba(52,123,247,.35);transform:none}
.ps-fold.fold-ck i::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.ps-fold.fold-ck[aria-expanded="true"] i::before{transform:translateY(2px) rotate(-135deg)}
.ps-fold.fold-ck .fold-x{display:inline;font-size:13px;font-weight:600;color:var(--signal);margin-left:-2px;white-space:nowrap}
.ps-fold.fold-ck[aria-expanded="false"] i{animation:ckBlink 1.1s ease-in-out infinite}
.ps-fold.fold-ck:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:8px}
@media (prefers-reduced-motion:reduce){.ps-fold.fold-ck[aria-expanded="false"] i{animation:none}}
.ps-side .ps-fold{margin-top:0;border-top:0;padding:14px 0;font-size:15px}
.ps-side .ps-fold+div h3{display:none}   /* 접기 버튼이 제목 역할을 하므로 펼친 안의 제목은 숨긴다(중복) */
@media (max-width:899px){
  .ps-side{gap:0;margin-top:0;padding-top:0;border-top:0}.ps-side>div{border-bottom:1px solid var(--line)}   /* 위 줄은 .ps-fold-all 의 아래 줄이 맡는다(줄 두 개 겹침 방지) */
  /* 단계 2×2 요약 격자(모바일): 번호·제목 한 줄 + 설명 — 제목과 4단계가 한 화면(523px~)에 함께. 진행 막대·숫자 모션은 그대로. 펼치면(.open) 1열로 바뀌어 단계마다 자료·기술이 따라온다. */
  .ps-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
  .ps-row.open{grid-template-columns:minmax(0,1fr)}
  /* 2026-10-08 2판: 요약 격자를 어두운 요약판으로(기술력 계기판과 같은 면) — 무대(figure.psv)는 모바일에 싣지 않는다(기본 길이 683px 유지, 대표 승인 접기 구조 그대로) */
  .ps-row{row-gap:0}
  .ps-row.ps-dark{background:#050B16;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:2px 14px 6px}   /* ark2026.js 3f-2 가 상세를 패널로 옮긴 뒤에만 어두운 면 — 스크립트 없으면 밝은 격자에 상세가 제자리(글자색 그대로 읽힘) */
  .psv{display:none}
  .ps,.ps:first-child{grid-template-rows:auto;grid-row:auto;grid-template-columns:30px minmax(0,1fr);column-gap:8px;row-gap:2px;padding:10px 0 10px;border-top:0;align-content:start}
  .ps .ps-track{display:block;grid-column:1/-1;height:1px;background:var(--line);border-radius:2px;margin-bottom:6px}   /* 칸 위 선 — 중립·정적 */
  .ps-dark .ps .ps-track{background:rgba(255,255,255,.12)}
  .ps .ps-n{grid-column:1;grid-row:2;font-size:13.5px;line-height:1.45;color:var(--mute);padding-top:0}
  .ps-dark .ps .ps-n{color:var(--on-ink-mute)}
  .ps h3{grid-column:2;grid-row:2;font-size:15px;line-height:1.45;word-break:keep-all}
  .ps-dark .ps h3{color:#fff}
  .ps>p{grid-column:1/-1;grid-row:3;font-size:13px;line-height:1.5;margin:0;word-break:keep-all}
  .ps-dark .ps>p{color:var(--on-ink-mute)}
  .ps .ps-more{grid-column:1/-1;grid-row:auto;margin-top:6px;padding-top:8px;border-top:1px dashed var(--line)}
  .ps-fold-all{margin-top:6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
}
/* 진행 과정 모바일 자동 넘김(대표 2026-10-15 — 데스크톱 3f-3 과 같은 규칙·같은 6.5초): 2×2 요약판에서 지금 단계 칸 위 선에 파란 막대가 차오르고 나머지는 흐리다.
   칸을 누르면 그 단계에 머문다(.pt-btn — 데스크톱과 같은 덮개 단추). 펼쳐 읽는 동안(.pt-open — 접기 버튼 aria-expanded)은 흐리게 하지 않는다. 멈춤 버튼 없음(대표 2026-09-30) */
@media (max-width:899px){
  .proc-a.pt-js .pa-rail .ps{position:relative}
  .proc-a.pt-js .pa-rail .pt-btn{display:block;position:absolute;inset:0;width:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;border-radius:8px;-webkit-tap-highlight-color:transparent}
  .proc-a .pt-btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
  .proc-a.pt-js .pa-rail .ps .ps-track{position:relative;overflow:hidden;height:2px}
  .proc-a.pt-picked .pa-rail .ps.on .ps-track{background:var(--signal)}
  .proc-a.pt-auto:not(.pt-open) .pa-rail .ps.on .ps-track{background:rgba(52,123,247,.3)}
  .proc-a.pt-auto .pa-rail .ps .ps-track::after{content:"";position:absolute;inset:0;background:var(--signal);transform:scaleX(0);transform-origin:left center}
  .proc-a.pt-auto:not(.pt-open) .pa-rail .ps.on.run .ps-track::after{animation:ptFillM var(--pt-dur,6500ms) linear forwards}
  .proc-a.pt-auto.pt-hold .pa-rail .ps.on.run .ps-track::after{animation-play-state:paused}
  .proc-a.pt-js .pa-rail .ps-n,.proc-a.pt-js .pa-rail .ps>h3,.proc-a.pt-js .pa-rail .ps>p{transition:opacity .35s ease}
  .proc-a.pt-auto:not(.pt-open) .pa-rail .ps:not(.on) .ps-n,.proc-a.pt-auto:not(.pt-open) .pa-rail .ps:not(.on)>h3,.proc-a.pt-auto:not(.pt-open) .pa-rail .ps:not(.on)>p{opacity:.42}   /* 흐림은 자동 넘김 중에만(모션 줄이기·직접 고른 뒤엔 네 칸 모두 또렷) */
  @keyframes ptFillM{to{transform:scaleX(1)}}
}
@media (max-width:899px) and (prefers-reduced-motion:reduce){.proc-a.pt-js .pa-rail .ps-n,.proc-a.pt-js .pa-rail .ps>h3,.proc-a.pt-js .pa-rail .ps>p{transition:none}}

/* 인증 모바일(640px 미만, 대표 2026-10-01 '모바일이 불친절' — GPT 심사 D안: 판단에 필요한 이름은 전부 보이게, 증빙은 선택형): 이름 칩 6개 2열을 뷰어 위에, 뷰어 축소, 설명은 선택한 것만 캡션 아래. 640px 이상 불변. */
.cert-vd{display:none}
.cert-k{display:none}
@media (max-width:639px){
  .cert-grid{gap:14px}
  /* 2026-10-26 대표 '이 부분, [진행 과정 탭 줄] 이렇게 바꾸는 거 어때? … 휴대폰에서만': 이름 알약 2열 → 홈 진행 과정·기술력 탭 줄(.sxn 휴대폰판)과 같은 가로 줄 카드.
     작은 글자(.cert-k) + 이름, 고른 칸은 파란 바탕·테두리, 자동 전환의 남은 시간은 테두리를 도는 빛 선(live.css·live.js C). 넘치는 칸은 옆으로 밀고, 고른 칸은 줄 가운데로 온다 */
  .cert-list{order:-1;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin:0 -16px;padding:0 16px;scroll-snap-type:x proximity}
  .cert-list::-webkit-scrollbar{display:none}
  .cert-list>li{flex:0 0 46%;display:flex;scroll-snap-align:center}
  .cert-card,.cert-card:hover{min-height:0;display:grid;align-content:start;gap:3px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);box-shadow:none;transition:background .2s,border-color .2s}
  .cert-card[aria-pressed="true"]{background:rgba(52,123,247,.18);border-color:rgba(143,179,255,.75)}
  .cert-card .cert-d,.cert-card .cert-arr{display:none}
  .cert-k{display:block;font-size:12px;line-height:1.4;color:#8FB3FF}
  .cert-card .cert-pill,.cert-card[aria-pressed="true"] .cert-pill{display:block;justify-self:stretch;max-width:none;padding:0;border-radius:0;background:none;color:#fff;font-size:15.5px;font-weight:700;line-height:1.35;letter-spacing:-.01em;text-align:left;word-break:keep-all}
  .cert-card:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .cert-view{max-width:300px;gap:10px}
  .cert-frame{padding:10px}
  .cert-view figcaption b{font-size:17px}
  .cert-vd{display:block;font-size:13.5px;line-height:1.6;color:#D6DAE2;margin-top:4px;word-break:keep-all}
}

/* why 카드의 설명+링크 묶음(.why-more) — 데스크톱은 전과 같은 배치(설명이 남은 높이를 차지, 링크는 아래 고정). 모바일(639px 이하) 2×2 요약 + 버튼 하나로 펼침(ark2026.js 3f-2). */
.why-more{display:grid;gap:10px;grid-template-rows:1fr auto;min-height:0}
@media (max-width:639px){
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .why-grid.open{grid-template-columns:minmax(0,1fr)}
  .why-card{padding:12px 14px 13px;gap:5px;border-radius:14px;grid-template-rows:auto auto auto;align-content:start}   /* 위 여백 14→12: 아이콘 행이 생긴 만큼 되돌려 구간 증가를 줄인다(GPT F01) */
  .why-k{font-size:19px}
  .why-ic{width:18px;height:18px;margin-bottom:4px}
  .why-card h3{font-size:13.5px;line-height:1.45}
  .why-more{margin-top:6px;padding-top:8px;border-top:1px dashed var(--line);gap:8px}
  .why-grid+.ps-fold-all{color:var(--navy)}
}

/* 수상 모바일 축소(899px 이하, 대표 2026-10-01 '너무 커서 부담스럽다'): 상장은 머리글 옆 작은 썸네일(누르면 크게 — 기존 링크), 기관 칩은 흐르지 않고 줄바꿈으로 쌓이며, 후원은 '후원 N곳' 펼침(data-fold). 900px 이상 불변. */
@media (max-width:899px){
  .awc-slide{grid-template-columns:minmax(0,1fr) 96px;grid-template-areas:"head img" "orgs orgs";column-gap:14px;row-gap:14px;padding:22px 0 18px;align-items:start}
  .awc-head{align-self:start}
  .awc-title{font-size:17px}
  .awc-img{width:96px;max-width:96px;justify-self:end;align-self:start;border-radius:6px;box-shadow:0 1px 3px rgba(15,30,51,.12),0 10px 22px -10px rgba(15,30,51,.4)}
  .awc-img:hover{transform:none}
  .awc-orgs{gap:10px;padding:0}
  .awc-rl{margin:0 0 8px;font-size:12.5px}
  .awc-orgs .mq-rail{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .awc-orgs .mq-track{display:flex;flex-wrap:wrap;gap:6px;width:auto;animation:none!important;transform:none!important}
  .awc-orgs [data-mq-clone]{display:none}
  .awc-orgs .aw-chip{padding:6px 11px 6px 8px;font-size:12.5px;gap:6px}
  .awc-logos .aw-chip{min-height:34px}
  .aw-chip .aw-sym{height:18px;max-width:60px}
  .aw-chip img{height:16px}
  .awc-sp .awc-rl{display:none}   /* 접기 버튼이 '후원 N곳' 제목을 맡는다 */
  .awc-role:not(.awc-sp) > .awc-rl{display:none}   /* '주최 · 주관' 라벨 — 모바일은 칩마다 역할 태그가 있어 중복(2026-10-07 전수 감사) */
  .awc-orgs .ps-fold{margin-top:0;padding:8px 0;border-top:0;font-size:13px;color:var(--mute)}
  .awc-orgs .ps-fold+.awc-sp{padding-top:2px}
}


/* 그룹 접기 패널(대표 2026-10-01 '펼치면 내부 콘텐츠가 아래로 펼쳐져야 한다'): 버튼 바로 아래에 단계·이유별 상세가 소제목과 함께 나열된다(ark2026.js 3f-2) */
.fold-panel{display:grid;gap:0;margin:0;padding:0 0 4px}
.fold-panel[hidden]{display:none}
.fold-item{padding:14px 0;border-top:1px dashed var(--line)}
.fold-item:first-child{border-top:0;padding-top:12px}
.fold-item-h{margin:0 0 8px;font-size:14.5px;font-weight:700;line-height:1.4;color:var(--navy);word-break:keep-all}
.fold-item .ps-more,.fold-item .why-more{margin:0;padding:0;border:0}   /* 카드 안에서 쓰던 위 구분선·여백은 패널 항목이 맡는다 */

/* 모바일(899px 이하) 읽는 글자 바닥 12px + 작은 누름 대상의 누름 영역 확장 — 2026-10-01 전면 평가(/test 390px 실측: 12px 미만 글자 622노드·높이 24px 미만 누름 대상 220개).
   대상은 '읽는 글'(관계 줄·날짜·앱 꼬리표·보조 설명)뿐이다. 후기 장부 주석(.ledger-note)은 12px 이면 412px 폭에서 한 줄이 두 줄이 돼 첫 화면이 21px 밀려 그대로 둔다(주입 시험). 계기판·차트 안 라벨(기술력·연구소 월별·후기 달력)과 다른 작업이 맡은 구간(수법·SBS·닥터피싱·인터뷰)은 손대지 않는다.
   누름 영역은 보이지 않는 ::after 로만 넓힌다(화면 변화 0). 데스크톱(900px 이상)은 그대로다. */
@media (max-width:899px){
  .om-rel,.om-rel b{font-size:12px}
  .aw-role{font-size:12px}
  .nap-m{font-size:12px}
  .hero-ev-k{font-size:12px}
  .close-tel-k{font-size:12px}
  .sxn-bar a .mono{font-size:12px}
  .app-n small,.app-t{font-size:12px}
  .form label small{font-size:12px}
  a.om-rel,.awc-tl,.crumbs a,.agree-more,.foot-links a,.ivx-sh a,.mx-rep,.sbs-src a,.nap-head a{position:relative}
  a.om-rel::after,.awc-tl::after,.crumbs a::after,.agree-more::after,.foot-links a::after,.ivx-sh a::after,.mx-rep::after,.sbs-src a::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
  /* 2026-10-07 전수 점검(21면×5폭 실측): 눌리는 높이 24px 미만인 글 링크 중 위아래 10px 안에 다른 컨트롤이 없는 것은 위 목록에 더했다(인터뷰 더보기·네트워크 2개·보고서 전문·기사 원문).
     ‘연구소 전체 보기’는 바로 아래 11px 에 앱 카드가 있어 2px 만 넓힌다(21→25px). ‘악성 앱 빅데이터 전체 보기’(18px)는 위 10px·아래 8px 에 앱 이름 버튼이 있어 가상 요소 대신 자기 여백으로 24px 를 만든다(겹침 0). 지도 슬라이더는 16px 트랙 → 24px 상자(트랙은 가운데 그대로). */
  .nap-head a::after{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}
  .mx-end-l a,.cap-links a{display:inline-block;line-height:24px}   /* 네트워크 링크 2개는 320px 에서 두 줄로 접혀(실측 행 간격 6px) ±10px 가상 요소가 14px 겹친다(GPT 심사 F03) — 자기 상자로 24px */
  .map-range{height:24px}
  /* 12px 하한(위 .om-rel·.aw-role·.nap-m 과 같은 규칙) — 홈에서 11~11.5px 로 남아 있던 네 곳. 그림 안 축 라벨(.drp-mo)은 계기판 글자 결정(대표 대기)에 속해 두지 않았다 */
  .drp-steps small,.sbs-step .mono,.mx-t,.mx-zoom{font-size:12px}
  /* 신청서 동의 문구: 체크박스(18px)와 문구(21px)가 신청 필수 단계인데 눌리는 높이가 22px — 체크박스 칸까지 왼쪽으로 덮고 위아래 10px 넓힌다(iPhone 실측 2026-10-02, 신청 버튼·내용 보기와 겹침 0) */
  .agree label{position:relative}
  .agree label::after{content:"";position:absolute;left:-26px;right:0;top:-10px;bottom:-10px}
  /* 푸터 메뉴 — 글자 높이 15px·줄 간격 27~28px(실측): 위아래 6px 씩만 넓혀 이웃 줄과 겹치지 않게, 짧은 낱말('수상'·'소식' 22px)은 오른쪽으로 24px */
  .foot-menu a{position:relative}
  .foot-menu a::after{content:"";position:absolute;left:-8px;right:-24px;top:-6px;bottom:-6px}
}

/* ── 2026-10-02 대표 모바일 지시 묶음(이미지 8장) ──
   ① 줄바꿈: br.m-br 은 모바일(899px 이하)에서만 — 데스크톱은 한 문장으로 흐른다(인증 상자 설명)
   ② 섹션 제목 밑 설명 글자 통일('폰트 크기가 작아질 경우 메인타이틀 밑 설명 부분 폰트 크기 통일'): 17px → 화면 폭 비례 13.5~15px.
      지정 줄 중 가장 긴 '독자적인 보안 특허 출원 기술과 국제 공인 인증을 바탕으로,'가 360폭(13.5px·319/328px)부터 한 줄(WebKit 실측)
   ③ 인증 상자 설명 15→14px · ④ 신청 영역은 '무료 상담 신청'·체크 3줄·신청서만(제목은 화면 낭독용으로 남김) ·
   ⑤ 수상 화살표 양옆(세로 자리 = --awc-mid, ark2026.js) · ⑥ 후기 카드 작게·본문 3줄(5편, 데스크톱은 3편) · ⑦ 캠페인 사진 그림이 가운데 오게(모바일 배너는 위가 글자 여백·아래가 그림) */
@media (min-width:900px){br.m-br{display:none}}   /* 후기 4·5번째 숨김은 뺐다(2026-10-07 데스크톱 가로 넘김 — 위 .rvx-list) */
@media (max-width:899px){
  .sec-head p:not(.eyebrow){font-size:clamp(13.5px,3.7vw,15px)}
  .cert-d{font-size:14px}
  #apply .close-l h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  #apply .close-lede,#apply .close-ch,#apply .close-sub{display:none}
  #apply .close-chk{margin-top:16px}
  .awc .awc-arr{top:var(--awc-mid,40%);bottom:auto;transform:translateY(-50%);width:40px;height:40px;font-size:22px;box-shadow:0 2px 10px rgba(15,30,51,.14)}
  .awc .awc-prev{left:-12px}.awc .awc-next{right:-12px}
  .awc{padding-bottom:40px}
  .awc-count{left:0;right:0;bottom:8px}
  .rvx-list{grid-auto-columns:minmax(232px,74%)}
  .mq-rail>.rvx-list.mq-track>li{width:232px}   /* 원 격자 minmax(232px,74%)의 실측 소비면 = 232px */
  .rvx-card{min-height:0;padding:22px 20px 20px;gap:10px}
  .rvx-t{font-size:17px}
  .rvx-ex{font-size:13.5px;-webkit-line-clamp:3}
  .bnr-card img{object-position:50% 80%}
}

/* 지정 줄 묶음: p.lines 안의 span 하나 = 한 줄(대표가 정한 줄바꿈 — Kotype 쉼표 덩어리와 섞이지 않게 줄마다 블록) */
p.lines>span{display:block}

/* 대표 2026-10-02 '진행해봐': ① 수상 모바일 — 오른쪽 화살표(40px, right:-12px)가 상장 사진 오른쪽 28px 를 덮던 것 → 사진 오른쪽에 화살표 자리 28px 칸(겹침 1,120px²→0, 슬라이드 높이 변화 0) ② 기술력·DeepScan 계기판 글자 바닥 12px(사이트 글자 바닥과 같게) — 계기판 안 요소에 걸리던 12px 미만 규칙 37개를 브라우저 스타일시트에서 전수 추출(미디어쿼리 포함), 세로·가로 잘림 0 */
@media (max-width:899px){.awc-slide{grid-template-columns:minmax(0,1fr) 96px 28px;grid-template-areas:"head img ." "orgs orgs orgs"}}
:root :is(.ag-dst b,.ag-dst li,.ag-meter,.ag-meter b,.ag-src,.ag-src b,.ag-src small,.dc-find b,.dc-find li,.dc-find small,.dc-key,.ds-tag,.dsv-del,.dsv-ev li,.dsv-h,.dsv-hist small,.dsv-out,.dsv-print small,.dsv-rail li,.dsv-row em,.dsv-stage figcaption,.dsv-where b,.dsv-where small,.dt-bar,.dt-chips em,.dt-msg b,.dt-open,.dt-out p,.ri-lbl,.sc-note,.sc-var b,.sxv figcaption,.sxv-chip,.sxv-h,.sxv-kv span,.sxv-pill,.sxv-rail li){font-size:12px}

/* 히어로 지도 모바일 크게 보기(대표 2026-10-06) — 899px 이하 첫 탭에 지도를 화면 전체로(ark2026.js 1b). 900px 이상 진입 불변.
   펼친 화면은 항상 가로: 폰이 세로면 상자를 90° 돌린다(.is-rot, 크기·변형은 스크립트가 px 로). 크게 보기 상자 규칙은 폭 조건 밖 —
   펼친 뒤 폰을 가로로 돌려 900px 를 넘어도 그대로 그려져야 한다. 하단 바·채널톡 버튼(z 10000001)보다 위 */
.map-fullbar,.map-expand{display:none}
@media (max-width:899px){
  .hero .map-expand{display:block;position:absolute;right:6px;bottom:6px;font-size:12px;line-height:1;padding:6px 9px;border-radius:999px;background:rgba(8,17,32,.78);border:1px solid rgba(195,211,236,.22);color:var(--on-ink);pointer-events:none}
}
.map-stage.is-full{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2147483000;display:flex;flex-direction:column;background:#07101F;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.map-stage.is-full.is-rot{right:auto;bottom:auto;transform-origin:0 0;padding:env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px) env(safe-area-inset-top,0px)}   /* 돌린 상자: 왼쪽 변 = 폰의 위(노치), 오른쪽 변 = 폰의 아래(홈 막대) */
.map-stage.is-full .map-expand{display:none}
.map-stage.is-full{touch-action:none}   /* 펼친 화면의 두 손가락 = 지도 확대(스크립트) — 페이지 확대·스크롤 금지 */
.hero .map-stage.is-full .map-sel{touch-action:pan-y;overscroll-behavior:contain}   /* 상세 칸은 세로로 밀어 읽는다(스크롤 상자라 자기 값이 적용) */
.map-stage.is-full .map-fullbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;padding:6px 12px 2px 16px}
.map-fullbar p{margin:0;font-size:13px;line-height:1.4;color:var(--on-ink-mute)}
.map-full-close{flex:0 0 auto;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(195,211,236,.3);background:transparent;color:var(--on-ink);font:inherit;font-size:14px;font-weight:600}
.hero .map-stage.is-full canvas{flex:1 1 0;height:0!important;min-height:0;width:100%}
.hero .map-stage.is-full .map-sel{position:absolute;top:58px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:auto;width:min(40%,320px);max-height:none;margin:0;overflow:auto}   /* 가로 화면: 상세는 오른쪽 세로 칸(지도 위에 겹침 — 지도 크기가 바뀌면 엔진 좌표가 어긋난다) */
.hero .map-stage.is-full.is-rot .map-sel{bottom:12px;touch-action:none}   /* 돌린 상자의 상세 칸 스크롤은 스크립트가 민다(브라우저는 돌린 방향을 못 맞춤) */
/* 세로 큰 화면(폴드 편 세로·세로 태블릿, 돌리지 않음): 지도는 가로 비율(폭의 62%, 화면 아래 240px 은 상세 칸 몫)로 위에, 상세 칸은 아래 흐름에 — 지도 크기는 고정이라 엔진 좌표 불변 */
.hero .map-stage.is-full.is-tall canvas{flex:0 0 auto;height:min(62vw,calc(100% - 300px))!important}
.hero .map-stage.is-full.is-tall .map-sel{position:static;width:auto;max-height:none;flex:0 1 auto;min-height:0;margin:12px 12px calc(12px + env(safe-area-inset-bottom,0px))}
.map-full-close.no-ring:focus{outline:none}
.map-full-lock,.map-full-lock body{overflow:hidden;touch-action:none}   /* 펼친 동안 페이지 확대 금지 — 돌리지 않은 html·body 에 걸어야 아이폰 사파리가 지킨다(돌린 상자의 touch-action 영역은 어긋난다) */

/* 모바일(639px 이하) 기술력 고정 바 없음(대표 2026-10-06 '현재의 구조라면 모바일에서 이 내비게이션 바는 필요가 없다') — 책장 넘김의 ‹ 01 / 06 › 줄이 현재 위치·이동을 맡는다.
   640px 이상은 6장이 세로로 길게 쌓이므로 고정 바가 그대로 일한다. sxn-pin-off */
/* 2026-10-28 되살림(대표 "스크롤에 의해 가려졌을 때, 위에 내비게이션 있던 건 어디 갖다 버렸어? 다시 가져와", '[PC 외 버전 - 모바일 등]') — 휴대폰(899px 이하)만. 종전 639px 이하 숨김은 걷고, PC 는 10-15 이후처럼 없음 */
@media (min-width:900px){.sxn-pin{display:none}}

/* 모바일 기술력 '‹ 01 / 06 ›' 줄 따라오기(대표 2026-10-06 '스크롤로 인해 가려질 때(솔루션 영역에서만) 따라오게'): 줄이 머리글 밑에 붙고, 이 구간(.wrap)이 끝나면 같이 올라간다.
   조상에 overflow 가 없어 sticky 가 듣는다(2026-10-06 실측). 뒤로 지나가는 카드가 비치지 않게 구간 바탕색으로 채우고 좌우 거터까지 편다. 서비스 구간 줄은 그대로(따라오지 않음). sxp-stick */
@media (max-width:639px){
  #tech .sxp-ctl[data-sxp-ctl="top"]{position:sticky;top:calc(var(--hdr-h,65px) + var(--pin-h,0px) + env(safe-area-inset-top,0px));z-index:28;margin:0 calc(-1 * var(--gut)) 12px;padding:8px var(--gut);background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08)}
  #tech .sxp-ctl[data-sxp-ctl="top"] .sxp-b{width:44px;height:44px}   /* 따라오는 동안 화면을 덜 가리게 48 → 44(누름 영역 기준선) */
}

/* 닥터피싱 블록 소제목 크기 = 구간 머리글 소제목 크기(대표 2026-10-06 '왼쪽 파트와 글 크기가 다름'): .sec-head p{font-size:17px} 는 머리글 안 소제목에만 걸려 .drp-txt 의 것은 13px 로 남았다. drp-eyebrow-match */
.drp-txt .eyebrow{font-size:17px;letter-spacing:.02em}

/* 홈 진행 과정 — 모바일 펼침 재구성(대표 2026-10-06 '레이아웃이 너무 늘어지고 지루 … 소제목을 단계 제목의 우측에'): ps-fold-compact
   ① 단계 제목(01 상담 접수)과 소제목(미리 정리해 두면 좋은 자료·관련 기술)을 한 줄에 좌우로 ② 준비 자료 = 칩 ③ 관련 기술 = 이름·설명 한 줄 행
   ④ 할 일 = 파란 번호 원 ⑤ 효과 없는 대응 = 2×2 카드. 이 패널은 899px 이하에서만 생긴다(ark2026.js 3f-2) — 데스크톱 배치는 그대로. */
.fold-item:has(>.ps-more){display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 12px;align-items:baseline}
.fold-item:has(>.ps-more) .fold-item-h{margin:0}
.fold-item>.ps-more{display:contents}
.fold-item>.ps-more>h4{grid-column:2;grid-row:1;justify-self:end;margin:0;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--mute);text-align:right;word-break:keep-all}   /* 소제목은 행동이 아니라 파랑을 쓰지 않는다(2026-10-08) */
.fold-item>.ps-more>ul,.fold-item>.ps-more>p{grid-column:1/-1}
.fold-item>.ps-more>.ps-lead{margin:0;font-size:14px;line-height:1.65}
.fold-item>.ps-more>.ps-note{margin:0}
.fold-item>.ps-more>.ps-tech-k{margin:2px 0 0}
.fold-item .ps-prep{display:flex;flex-wrap:wrap;gap:6px}
.fold-item .ps-prep li{padding:6px 11px;border-radius:999px;background:var(--paper);font-size:13px;line-height:1.35}
.fold-item .ps-prep li::before{display:none}
.fold-item .ps-tech{display:grid;gap:6px}
.fold-item .ps-tech a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;min-height:44px;padding:6px 12px;border-radius:10px;background:var(--paper)}
.fold-item .ps-tech b{white-space:normal}
.fold-item .ps-tech a::after{content:"›";color:var(--signal);font-size:18px;line-height:1}
.fold-item .ps-tech b{white-space:nowrap}
@media (max-width:899px){
  .ps-todo li{grid-template-columns:26px minmax(0,1fr);gap:0 10px;padding:11px 0}
  .ps-todo li>span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;padding:0;background:var(--navy);color:#fff;font-size:12px;font-weight:700}   /* 번호 원은 행동이 아니라 파랑을 쓰지 않는다(2026-10-08, GPT 2차 심사 F08) */
  .ps-todo li:last-child,.ps-side>div.ps-todo ol{border-bottom:0}
  .ps-todo{padding-bottom:6px}
  .ps-nope ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ps-nope li{padding:12px 12px 13px;border:0;border-radius:12px;background:rgba(229,72,77,.06)}
  .ps-nope p{font-size:13px;line-height:1.55}
  .ps-nope .ps-more-link{margin:12px 0 14px}
  .ps-todo .ks,.ps-todo .kc,.ps-nope .ks,.ps-nope .kc{display:inline}   /* 좁은 폭에서는 문장 덩어리를 풀어 자연 줄바꿈(묶인 채로는 줄이 들쭉날쭉) */
}
@media (max-width:899px){.logo img{height:34px}}   /* 모바일 로고 40→34px(대표 2026-10-07 '모바일에서 로고가 조금 큰 것 같아') logo-m-size */
@media (max-width:899px){.mx-paths > p.mx-lab{display:none}}   /* 접기 버튼('가이드에 적힌 유도 방식 보기')이 제목을 맡는 폭에서는 같은 문구의 제목을 숨긴다(2026-10-07 전수 감사) */
/* 2026-10-07 전수 감사 — 모바일(899px 이하)은 하단 고정 바(.dock)가 '전화 상담'·'무료 상담 신청'을 항상 띄우므로, 상담 구간(.close)의 같은 행동(번호 복사·전화·#apply)은 숨긴다. 채팅 상담·폼은 그대로. 데스크톱은 바가 없어 전부 보인다 */
@media (max-width:899px){.close .num-copy,.close .cta-row>a[href^="tel:"],.close .cta-row>a[href$="#apply"]{display:none}}
/* 해결 사례 진행 4단계(.steps): 모바일 2×2 — 홈 진행 과정(.ps-row)과 같은 형태(2026-10-07 전수 감사, 1열 619px → 약 절반) */
@media (max-width:759px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.step{padding:16px 14px 18px}.step h3{font-size:16px;margin-top:6px}.step p{font-size:13.5px;margin-top:6px}}

/* PC(900px 이상) 15번 '가해자가 악성앱 설치로 이끄는 경로' 소제목을 한 줄로(대표 2026-10-07 'pc에서는 그냥 한줄로'): 머리글 최대 폭 44em(704px)이 문장 전체(약 730px)보다 좁아
   '실제 악성 앱 데이터를 분석해,' 에서 들쭉날쭉 끊기던 것. 이 구간만 폭 제한을 풀어 900~1920px 에서 한 줄(실측). 제목 오른쪽 배치안은 문단이 3줄로 늘어 기각. 모바일 불변. mt-head-1line */
@media (min-width:900px){#methods .sec-head{max-width:none}}

/* ── 홈 진행 과정 시안 A(?ps=a, 2026-10-08 저녁 — 대표 "디자인이나 카피가 굉장히 별로야. 우리 브랜드 톤이랑도 맞지 않는 듯해.") ──
   3판(GPT 심사 W01): 데스크톱 = 네 단계 레일(고르는 탭, 선택만 파랑 윗선) + 고른 단계 패널[글 | 그 단계에서 실제로 쓰는 것(어두운 무대, 채움 한 겹)].
   패널은 한 칸에 겹쳐 두고(가장 긴 패널 높이로 고정 — 고를 때 아래가 출렁이지 않는다) 고른 것만 보인다. 스크립트 없으면(.pt-js 없음) 네 패널이 차례로.
   모바일은 평소 규칙 그대로(ark2026.js 3f-2 의 2×2 요약판 + 접기) — 레일 버튼·패널은 숨긴다. */
.pa-free{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--mute);word-break:keep-all}
.pa-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:12px}
.pa-cta .ps-more-link{margin-top:0}
.pt-btn,.pt-panels,.pt-sum,.pt-hint{display:none}
@media (max-width:899px){
  .pa-cta{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (min-width:900px){
  .proc-a .pa-lede{font-size:16px;line-height:1.75;color:var(--mute)}
  .proc-a .pa-rail{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px;margin-top:36px;border-top:1px solid var(--line)}
  .proc-a .pa-rail .ps,.proc-a .pa-rail .ps:first-child{display:block;position:relative;padding:20px 0 4px;border-top:0;min-width:0}
  .proc-a .pa-rail .ps::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:transparent}
  .proc-a .pa-rail .ps-n{display:block;padding:0;margin:0 0 6px;font-size:12px;letter-spacing:.04em;color:var(--mute)}
  .proc-a .pa-rail h3{font-size:19px;line-height:1.3}
  .proc-a .pa-rail .ps>p,.proc-a .pa-rail .ps-more{display:none}
  .proc-a .pt-sum{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--mute);word-break:keep-all}
  .proc-a.pt-js .pt-hint{display:block;visibility:hidden;margin:28px 0 -24px;text-align:right;font-size:12.5px;color:var(--mute)}
  .proc-a.pt-auto .pt-hint{visibility:visible}   /* 자동 넘김 중에만 보인다 — 자리는 유지(직접 고르는 순간 레일이 밀리지 않게) */
  .proc-a.pt-js .pa-rail .ps h3{color:var(--mute)}
  .proc-a.pt-js .pa-rail .ps.on::before{background:var(--signal)}
  /* 자동 넘김(ark2026.js 3f-3 .pt-auto): 고른 칸 윗선 = 옅은 바탕 + 채움 막대(--pt-dur 동안). 멈춘 동안(.pt-hold)은 그 자리에서 정지 */
  .proc-a.pt-auto .pa-rail .ps.on::before{background:rgba(52,123,247,.22)}
  .proc-a.pt-auto .pa-rail .ps::after{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:left center;pointer-events:none}
  .proc-a.pt-auto .pa-rail .ps.on.run::after{animation:ptFill var(--pt-dur,6500ms) linear forwards}
  .proc-a.pt-auto.pt-hold .pa-rail .ps.on.run::after{animation-play-state:paused}
  @keyframes ptFill{to{transform:scaleX(1)}}
  .proc-a.pt-js .pa-rail .ps.on h3{color:var(--navy)}
  .proc-a.pt-js .pa-rail .ps:hover h3{color:var(--navy)}
  .proc-a.pt-js .pt-btn{display:block;position:absolute;inset:0;width:100%;margin:0;padding:0;border:0;background:none;cursor:pointer;border-radius:4px}
  .proc-a .pt-btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
  .proc-a .pt-panels{display:grid;gap:28px;margin-top:28px}
  .proc-a.pt-js .pt-panels{gap:0}
  .proc-a.pt-js .pt-panel{grid-area:1/1;visibility:hidden}
  .proc-a.pt-js .pt-panel.on{visibility:visible}
  .proc-a .pt-panel{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);gap:40px;align-items:stretch;padding:0;margin:0;border:0;background:none}   /* section 요소라 전역 구간 여백(위아래 104px)을 상속하던 것을 끊는다(1440 실측 패널 541 중 내용 333) */
  .proc-a .pt-text{padding-top:6px;min-width:0}
  .proc-a .pt-k{margin:0;font-size:13px;font-weight:500;color:var(--mute)}
  .proc-a .pt-k .mono{margin-right:6px}
  .proc-a .pt-big{margin:10px 0 0;font-size:26px;font-weight:700;line-height:1.35;color:var(--navy);word-break:keep-all;text-wrap:balance}
  .proc-a .pt-p{margin:14px 0 0;font-size:15px;line-height:1.75;color:var(--navy);word-break:keep-all}
  .proc-a .pt-stage{display:grid;align-content:center;gap:14px;min-width:0;padding:28px 30px 30px;border-radius:14px;background:#050B16}
  .proc-a .pt-sk{margin:0;font-size:12px;letter-spacing:.02em;color:#7FA6E8}
  .proc-a .pt-acts,.proc-a .pt-tech{list-style:none;margin:0;padding:0;display:grid;gap:8px}
  .proc-a .pt-act,.proc-a .pt-tech a{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:14px 16px;border:0;border-radius:10px;background:rgba(255,255,255,.07);color:#fff;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
  .proc-a .pt-act b,.proc-a .pt-tech b{font-size:16px;font-weight:600;white-space:nowrap}
  .proc-a .pt-act span,.proc-a .pt-tech span{font-size:13.5px;line-height:1.45;color:var(--on-ink-mute);text-align:right;word-break:keep-all}
  .proc-a .pt-tech a::after{content:"›";color:var(--on-ink-mute);font-size:16px;line-height:1}
  .proc-a .pt-act:hover,.proc-a .pt-tech a:hover,.proc-a .pt-act:focus-visible,.proc-a .pt-tech a:focus-visible{background:rgba(255,255,255,.12)}
  .proc-a .pt-act:focus-visible,.proc-a .pt-tech a:focus-visible{outline:2px solid #7FA6E8;outline-offset:2px}
  .proc-a .pt-check{list-style:none;margin:0;padding:0;display:grid;gap:12px}
  .proc-a .pt-check li{position:relative;padding-left:28px;font-size:16px;line-height:1.5;color:#fff;word-break:keep-all}
  .proc-a .pt-check li::before{content:"";position:absolute;left:0;top:.3em;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--on-ink-mute)}
  .proc-a .pt-flow{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--on-ink-mute)}
  .proc-a .pt-flow span{margin:0 6px}
  .proc-a .pt-doc{margin:0 0 4px;display:grid;gap:4px}
  .proc-a .pt-doc b{font-size:20px;font-weight:700;color:#fff}
  .proc-a .pt-doc span{font-size:14px;color:var(--on-ink-mute)}
  .proc-a .pa-free,.proc-g .pa-free{margin-top:28px;font-size:14.5px}
  .proc-a .pa-cta,.proc-g .pa-cta{gap:16px 28px;margin-top:16px}
}
@media (min-width:900px) and (max-width:1100px){
  .proc-a .pt-panel{gap:28px}   /* 한 열로 쌓으면 짧은 패널 아래에 빈 면이 남아(3차 심사 X02) 이 폭도 두 열 */
  .proc-a .pt-big{font-size:23px}
}

/* 모바일 줄바꿈(대표 2026-10-08 "줄바꿈 점검 좀 전체적으로 해줘. 모바일이야."): 문장(.ks)·절(.kc) 덩어리는 inline-block 이라, 덩어리 하나가 한 줄보다 길면
   그 안에서 꺾인 뒤 꼬리('훨씬 빠르며,')가 다음 덩어리와 한 줄을 나누지 못해 짧은 줄로 남았다. 휴대폰 한 줄은 20자 안팎이라 대부분의 절이 한 줄보다 길다.
   30개 주소 × 360·390·412 실측(같은 검출기): 짧은 중간 줄 242 → 63, 앞서 구간별로 덧댄 같은 처방(.ps-todo·.help-step)을 전체로 넓힌 것.
   데스크톱(900px 이상)은 쉼표 뒤 끊김(대표 2026-09-30) 그대로. mobile-ks-flow */
@media (max-width:899px){.ks,.kc{display:inline}}
@media (max-width:899px){.ks+.ks::before{content:"\A";white-space:pre}}   /* 문장이 바뀌면 새 줄에서 시작(대표 2026-10-26 "줄바꿈 좀 … 하면 안 돼? 몇 번을 말해?" — 위기 상담 '…견디지 마세요. / 24시간 자살예방상담 …'). 문장 안은 위 규칙대로 보통 흐름이라 꼬리 짧은 줄이 생기지 않는다. 휴대폰 10쪽 문장 이어붙음 35→0·빈 줄 0 */
/* 360px 대 기기(375 미만)에서 기술력 계기판 레일 칸 안쪽 64px 에 '4 열람하지 않고'(65px, 조판 필터가 '않고'를 묶음)가 1px 넘쳐 낱말 중간이 끊기던 것 */
@media (max-width:374px){.sxv-rail li{font-size:10.5px}}

/* 인증 설명의 지정 줄바꿈이 사파리에서 3줄로 깨지던 것(대표 2026-10-08 '기업부설연구소…' 캡션 지적 → 전수 점검): .cert-view 가 justify-items:center 라
   figcaption 이 내용 폭으로 줄어드는데, WebKit 은 그 폭을 1/64px 로 내림(ISO 233.0625 < 첫 줄 233.1)해 지정 줄 하나가 넘친다고 보고 한 번 더 꺾었다
   ('국제 표준 규격에 부합하는 / 엄격한 정보보호 및 / …', 벤처도 같음). 크롬은 넘어가서 안 보였다. figure 폭으로 펴면 가운데 정렬은 text-align 이 그대로 한다.
   WebKit·크롬 375·440: 6종 모두 설명 줄 수 = 지정 줄 수, 1280 변화 0. cert-cap-stretch */
.cert-view figcaption{justify-self:stretch}

/* 궁금증 분기 띠(2026-10-15 대표 기획, 미리보기 ?ask=a — _h_ask.php). 방문자 말로 묻는 칩 → 답이 있는 구간. 칩 모양은 해결 사례 쪽 .chips 그대로 */
.ask{padding:18px 0 6px}
.ask-h{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.02em;color:var(--signal);margin:0 0 10px}
.ask .chips{margin-bottom:0}
.ask .chips a{font-size:14px;padding:8px 13px;background:#fff}
.ask .chips a::after{content:"→";margin-left:6px;opacity:.55}
#why,#tech,#awards,#cases{scroll-margin-top:calc(var(--hdr-h,65px) + 12px)}   /* 칩으로 도착할 때 고정 머리에 가려지지 않게 */

/* 길잡이 줄(2026-10-15 대표 2판 "따라와야" — _h_guide.php·guide.js, 미리보기 ?ask=b|c). 하단 바와 같은 먹색의 평평한 띠: 장식·테두리·둥근 알약 없음.
   한 줄 = 지금 구간에서 다음에 볼 것(목적지를 드러내는 문장), 오른쪽 '다른 궁금증' = 나머지 질문 목록(떠 있는 것이라 그림자 허용). 채움선은 3판에서 뺐다(건너뛰기 장치에 독서 진척도 금지 — GPT 심사). */
.guide{position:fixed;left:0;right:0;z-index:10000001;background:#12223A;color:#fff;font-family:var(--sans);transition:transform .28s cubic-bezier(.22,1,.36,1)}
.guide-bottom{bottom:calc(71px + env(safe-area-inset-bottom,0px));transform:translateY(calc(100% + 72px))}
.guide-top{top:calc(var(--hdr-h,65px) + env(safe-area-inset-top,0px));transform:translateY(calc(-100% - 66px))}
.guide.on{transform:none}
.guide .wrap{display:flex;align-items:center;gap:12px;height:44px}
.guide-q{flex:1;min-width:0;display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-size:15px;font-weight:500;line-height:44px;white-space:nowrap;overflow:hidden}
.guide-q>span{display:inline-block;position:relative;overflow:hidden;transition:width .38s cubic-bezier(.22,1,.36,1)}   /* 6판(2026-10-20 대표 "이 변화가 좀 더 잘 보였으면"): 폭 전이 상자 — 교체 때 guide.js 가 폭을 옛 폭→새 폭으로 미끄러뜨린다(화살표가 따라 움직여 바뀐 것이 보인다). 자식 한정(>)이라 안쪽 글자 포장(.gq-t, guide.js 가 span 으로 감싼다)에는 overflow·position 이 직접 매칭되지 않는다. 포장이 em 이던 판은 기본 이탤릭으로 글자가 기울어 마지막 글자의 우상단이 상자 밖으로 나가 잘렸다(대표 2026-10-20 "글자 우상단이 잘려" — 운영 실측: 숨김/표시 차이 27px, 이탤릭 끄면 0). 줄임표는 여기가 아니라 안쪽 .gq-t 가 맡는다(아래) */
.guide-q>span.gq-roll .gq-t{text-overflow:clip}   /* 미끄러지는 동안은 줄임표 없이 */
.guide-q .gq-t{display:block;overflow:hidden;text-overflow:ellipsis;transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .38s,color .6s ease .1s}   /* 글자 포장은 블록으로 두고 자기 글자를 직접 줄인다 — inline-block(원자 인라인)이면 바깥 상자의 text-overflow 가 글자 단위로 줄이지 못하고 통째로 자른다(css-overflow-3: 줄의 첫 원자 인라인은 줄임표 대상이 아니다; gpt-6-astra 심사 2026-10-20). 가용 폭을 넘는 문구(긴 문구·사파리 글자 확대)는 "…"로 */
.guide-q .gq-t.gq-in{transform:translateY(.9em);opacity:0;color:var(--signal)}      /* 새 글자의 출발 자리(아래·신호색) */
.guide-q .gq-t.gq-new{color:var(--signal);transition-delay:0s}   /* 바뀐 직후 잠깐 신호색 → 본색 */
.guide-q .gq-old{position:absolute;left:0;right:0;top:0;pointer-events:none}   /* 유령은 상자 폭(left·right 0)을 따라 같은 규칙으로 줄어든다 · nowrap 은 .guide-q 에서 상속 */
.guide-q .gq-old.gq-out{transform:translateY(-.9em);opacity:0}   /* 옛 글자는 위로 나간다 */
.guide-q::after{content:"→";flex:none;color:var(--signal);font-weight:600}
.guide-none .guide-q{visibility:hidden}
.guide-more{flex:none;display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0 0 0 8px;height:44px;color:rgba(255,255,255,.72);font:inherit;font-size:13px;cursor:pointer}
/* 목차 꺾쇠(테두리 두 변 8px·2px 를 돌려 ∧·∨): 회전축 = 두 변의 무게중심(박스 (5.3,5.3) — 두 변 합집합 28px² 의 중심)이고 그 점을 translate 로 박스 가운데(= 줄 가운데)에 둔다.
   두 상태가 같은 translate 라 전환 중에도 무게중심이 제자리에서 돈다 — 전에는 translateY(−2)→(+2)·회전이 함께 보간돼 ∧ 가 위에서 '>' 를 거쳐 ∨ 로 5.5px 내려왔다(대표 2026-10-26 "위 화살표 / 가운데 / 아래 화살표 이렇게 움직이는 것 같아 … 가운데(∧) → 가운데(∨)"). */
.guide-more i{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform-origin:5.3px 5.3px;transform:translate(-1.3px,-1.3px) rotate(-135deg);transition:transform .2s}
.guide-top .guide-more i{transform:translate(-1.3px,-1.3px) rotate(45deg)}
.guide-more[aria-expanded="true"] i{transform:translate(-1.3px,-1.3px) rotate(45deg)}
.guide-top .guide-more[aria-expanded="true"] i{transform:translate(-1.3px,-1.3px) rotate(-135deg)}
.guide-list{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;bottom:100%;background:#12223A;box-shadow:0 -10px 28px rgba(0,0,0,.28);max-height:176px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}   /* 목차 상자 = 4행(44px×4) 높이, 안에서만 넘긴다(2026-10-20 대표 '목차 4개 리스트에서 스크롤') */   /* taste-skill-ignore: 떠 있는 목록(메뉴) */
.guide-top .guide-list{bottom:auto;top:100%;box-shadow:0 10px 28px rgba(0,0,0,.28)}   /* taste-skill-ignore: 떠 있는 목록(메뉴) */
.guide-list a{display:block;height:44px;line-height:44px;padding:0 var(--gut);color:#fff;text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.guide-list a b{font-weight:400;color:rgba(255,255,255,.6);white-space:nowrap}
.guide-list a:active{background:rgba(255,255,255,.06)}
@media (min-width:900px){.guide-bottom{bottom:0;transform:translateY(100%)}}
html:has(.mnav[open]) .guide{display:none}   /* 모바일 메뉴(details.mnav)가 열린 동안은 길잡이도 닫는다 — 닫아야 할 층을 더하지 않는다(GPT 심사 5) */
@media (prefers-reduced-motion:reduce){.guide,.guide-q>span,.guide-q .gq-t,.guide-more i{transition:none}}
/* 칩으로 도착할 때 고정 머리(와 상단 길잡이 줄)에 가려지지 않게 — 길잡이가 켜진 문서에서만 */
.ask-guide main section[id]{scroll-margin-top:calc(var(--hdr-h,65px) + 12px)}
.ask-guide main section[aria-labelledby],.ask-guide main>article[aria-labelledby]{scroll-margin-top:calc(var(--hdr-h,65px) + 12px)}   /* 11판(2026-10-28): id 없이 제목으로만 이름 붙은 구간(회사 소개 비전·CEO·상담 진행 과정…, 홈 FAQ·연구소·deep-scan·협력)과 게시글 상세의 글 한 편 — 목차 행이 제목(#visionH)을 가리켜도 guide.js 는 그 구간 머리로 서므로 같은 여백이 있어야 고정 머리에 가려지지 않는다(gpt-6-astra 검토 2026-10-28: 56px 안쪽 여백 − 65px 머리 = 9px 가림) */
.ask-guide.ask-top main section[id],.ask-top #why,.ask-top #tech,.ask-top #awards,.ask-top #cases{scroll-margin-top:calc(var(--hdr-h,65px) + 44px + 12px)}   /* ID 선택자(#why… 77px 규칙)보다 특이도가 높아야 상단 띠 44px 이 더해진다(2026-10-15 ?ask=c 실측 77 → 121) */

/* 동행 길잡이 4판(?ask=f, 2026-10-19 저녁부터 평소 주소의 기본 — 대표 "게임의 펫이나 따라다니는 나비 … 귀여운 디자인을 원하는 건 굳이 아니고. 느낌만. 따라다니는 목차나.. 그런 느낌"; 낮에 올린 b 전폭 띠는 "이런 느낌이 아니라니까").
   전폭 띠가 아니라 왼쪽 아래(모바일: 하단 바 위 24px · 데스크톱: 상담 줄 위 20px — 바와 한 덩어리로 보이지 않게 떼어 둔다)에 떠 있는 카드 하나 — 겹: .guide-f(자리·등장) › .gf(따라붙기 transform, guide.js) › .gf-in(카드·말하기).
   그림·캐릭터 없음, 스크롤 밖의 움직임(떠다님·자동 회전) 없음(gpt-6-astra 2026-10-19 심사: 계속 움직이는 애니메이션은 나비에서 가져오면 안 되는 부분). 먹색 카드 + 그림자 한 겹(떠 있는 것).
   '지금' 줄 = 그 구간 눈썹의 1차 표기(따라다니는 목차), 그 아래 '다음에 볼 것' 한 줄 + '다른 궁금증'. 목록은 따로 뜨지 않고 같은 카드가 위로 자란다(같은 대상의 연속성). */
.guide-f{--gl:16px;left:var(--gl);right:auto;bottom:calc(71px + 24px + env(safe-area-inset-bottom,0px));width:min(300px,calc(100vw - 32px));max-width:calc(100vw - 32px);background:transparent;opacity:0;visibility:hidden;transform:translateY(18px) scale(.96);pointer-events:none;transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1),visibility 0s .32s}
.guide-f.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.guide-f .gf{position:relative;will-change:transform}
.guide-f .gf-in{position:relative;display:flex;flex-direction:column;background:#12223A;border-radius:18px;box-shadow:0 12px 32px rgba(11,22,39,.38),inset 0 1px 0 rgba(255,255,255,.06);transform-origin:16px 100%}   /* taste-skill-ignore: 떠 있는 카드 */
/* 5판(2026-10-20 실기기 실측 뒤): 카드 폭을 300px 로 고정(구간마다 159~294px 로 늘었다 줄던 것 — 대표 "너무 불안정해")하고 '말하기'의 카드 전체 커짐(scale 1.035)을 뺐다 — 남는 신호는 식별점 한 번 퍼짐(gfPing)과 글자 바뀜뿐 */
.guide-f .gf-now{position:relative;display:flex;align-items:center;gap:6px;margin:0;padding:11px 44px 0 16px;font-size:12px;line-height:1.2;color:rgba(255,255,255,.8);white-space:nowrap;transition:opacity .18s,visibility 0s}   /* 오른쪽 44px = 접기 단추 자리(9판) */
.guide-f .gf-now.empty>*{visibility:hidden}   /* 9판: 지금 표기가 없을 때도 줄은 남긴다(접기 단추가 이 줄 높이에 얹혀 있고 카드 높이 69px 이 고정이어야 한다) — guide.js setNow */
.guide-f .gf-now i{position:absolute;left:-4px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 2px #12223A}   /* 카드의 식별점 — '지금' 줄 높이에서 윤곽 왼쪽에 걸친 파란 점 하나(gpt-6-astra 시각 심사: 새 장식 대신 기존 점을 카드의 표식으로; 목록이 열려 줄이 내려가도 같이 간다). 구간이 바뀌면 한 번 퍼진다 */
.guide-f .gf-in.say .gf-now i{animation:gfPing .5s ease-out}
@keyframes gfPing{0%{box-shadow:0 0 0 2px #12223A,0 0 0 2px rgba(52,123,247,.55)}100%{box-shadow:0 0 0 2px #12223A,0 0 0 10px rgba(52,123,247,0)}}
.guide-f .gf-now .k{color:rgba(255,255,255,.46)}
.guide-f .gf-now b{min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.guide-bottom .gf-now,.guide-top .gf-now{display:none}
.guide-f .wrap{max-width:none;margin:0;padding:0 6px 0 16px;gap:8px;transition:opacity .18s,visibility 0s}
.guide-f .guide-q{flex:0 1 auto;font-size:14px}
.guide-f .guide-more{height:36px;margin-left:auto;padding:0 10px;border-radius:12px;gap:6px;color:rgba(255,255,255,.86);transition:background .15s,color .15s}   /* 항상 줄의 오른쪽 끝(열어서 카드가 넓어져도 '닫기'가 같은 자리) · 조작 단추답게 밝게 */
.guide-f .guide-more:hover,.guide-f .guide-more:focus-visible{background:rgba(255,255,255,.08);color:#fff}
.guide-f .guide-list{position:static;order:-1;left:auto;right:auto;bottom:auto;width:auto;padding:0;max-height:177px;border-radius:18px 18px 0 0;box-shadow:inset 0 -16px 14px -14px rgba(0,0,0,.55),inset 0 16px 14px -14px rgba(0,0,0,.55);border-bottom:1px solid rgba(255,255,255,.1);transition:opacity .18s,visibility 0s}   /* 상자 위아래 안쪽 그늘 = 더 있다는 표시(스크롤해도 상자 가장자리에 고정) */   /* 같은 카드 안에서 위로 자란다(따로 뜨는 판 없음) */
.guide-f .guide-list a{padding:0 32px 0 16px}   /* 10판: 열린 목록의 맨 위 행 오른쪽에 접기 배지가 21px 걸친다 — 목록 안을 넘기면 어느 행이든 맨 위에 오므로 전 행의 오른쪽 여백을 32px 로(가장 긴 행 'deep-scan.ai · 영상 및 키워드 모니터링' 여유 320px 에서 31→15px, 말줄임 0 실측 2026-10-26) */
.guide-list li.cur a{background:rgba(52,123,247,.14)}   /* 펼친 목차에서 지금 보는 구간의 행(guide.js renderList·aria-current) — 스크롤하면 이 표시가 옮겨 간다(2026-10-20) */
.guide-list li.cur a b{color:rgba(255,255,255,.8)}
@media (max-width:359px){.guide-f .guide-more .t{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.guide-f .guide-more{padding:0 8px}}   /* 아주 좁은 폰에선 화면엔 화살표만 — 글자는 display:none 이 아니라 시각적으로만 숨긴다(아이콘이 aria-hidden 이라 display:none 이면 버튼의 접근 가능한 이름이 비고, aria-controls 는 이름을 주지 않는다; gpt-6-astra 심사 2026-10-20) */
@media (min-width:900px){.guide-f{--gl:24px;bottom:28px}html.cbar-on .guide-f{bottom:calc(var(--cbar-h,92px) + 20px)}}
/* 9판 접기(2026-10-22 대표 "왼쪽으로 접고 펼치고 할 수 있게"): 카드 오른쪽 위('지금' 줄 끝)의 ‹ 단추(.gf-fold)로 카드를 왼쪽 가장자리로 접는다 — .guide-f.fold 가 카드 폭만큼 왼쪽으로 옮겨 오른쪽 28px 만 화면 안에 남고, 그 28px 이 같은 단추(›, 카드 높이 전체)다.
   단추는 .gf-in 에 absolute 로 얹힌다(줄 안의 flex 항목이 아니다 — 줄에 두면 긴 문구 '경찰 신고만으로 막을 수 없는 이유'가 186→155px 로 줄어 "…"가 생겼다, 2026-10-22 끼운 판 실측 3폭 공통). 자리는 아래에서 40px(= 줄 44px − 4px): 목록이 위로 자라도 카드 몸(69px)의 '지금' 줄 높이에 그대로 있고, 목차 단추(아래 4px 부터)와 겹치지 않는다. 꺾쇠는 목차 단추의 꺾쇠와 같은 세로줄에 선다(오른쪽 22px).
   접힌 동안 '지금' 줄·제안 줄·목록은 visibility 로 숨겨 탭 순서에서도 빠진다(포커스는 단추에 그대로). 접기 transform 은 .on 과 무관하게 걸어 둔다 — 접힌 채 숨었다 돌아올 때 숨김 자리(translateY 18px·scale)에서 대각선으로 날아들지 않고 제자리에서 밝아지기만 한다. 따라붙기(.gf translateY)는 guide.js 가 접힌 동안 걸지 않는다.
   10판(2026-10-26 대표 "이거 이 카드의 우상단에 살짝 튀어나오게 하자. 예쁘게."): 단추를 카드 안 '지금' 줄 끝이 아니라 카드 우상단 모서리에 걸친 30px 원 배지로 — 카드 밖으로 오른쪽 9·위 9px 나간다(카드색 원 + 흰 윤곽선 1.5px + 카드보다 작은 그림자, 왼쪽 윤곽에 걸친 식별점과 짝. gpt-6-astra 심사: 흰 원(B)은 '살짝'보다 강조라 기각).
   기준은 카드 전체의 위쪽(top)이라 목록이 위로 열려 카드가 자라도 늘 카드의 우상단에 있다. 접힌 동안(.fold)은 9판 손잡이(오른쪽 띠 전체) 그대로 — 원·윤곽선·그림자를 거둔다.
   배지 ↔ 손잡이는 부모 슬라이드(.guide-f .32s)와 같은 .32s 로 자리·크기·모서리·윤곽·그림자를 이어 변한다(즉시 바뀌면 중심이 29px 튄다 — 심사 적발). 그래서 접힌 높이는 auto(bottom:0)가 아니라 카드 몸 높이 69px 고정값(보간 가능; 카드 몸은 69px 고정 — 위 .gf-now.empty 주석). */
.guide-f .gf-fold{position:absolute;top:-9px;right:-9px;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;margin:0;padding:0;border:1.5px solid rgba(255,255,255,.88);border-radius:50%;background:#12223A;color:rgba(255,255,255,.92);box-shadow:0 6px 16px rgba(11,22,39,.34);cursor:pointer;transition:top .32s cubic-bezier(.22,1,.36,1),right .32s cubic-bezier(.22,1,.36,1),width .32s cubic-bezier(.22,1,.36,1),height .32s cubic-bezier(.22,1,.36,1),border-radius .32s,border-color .32s,box-shadow .32s,background .15s,color .15s}
.guide-f .gf-fold::before{content:"";position:absolute;inset:-4px;border-radius:50%}   /* 누르는 영역 = 35px 원(absolute 의 기준은 padding box 라 지름 = 30 − 윤곽선 2×1.5 + 8; 보이는 원은 30px) — WCAG 2.5.8 은 타깃 안에 24×24 정사각이 들어가야 한다(원은 지름 34 부터, 30px 원의 내접 정사각은 21.2). 열린 목록 행과 붙어 있어 간격 예외도 못 쓴다 */
.guide-f.fold .gf-fold::before{inset:0;border-radius:0}
.guide-f .gf-fold:hover,.guide-f .gf-fold:focus-visible{background:#1B2F4E;color:#fff;border-color:#fff}
.guide-f .gf-fold:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.guide-f .gf-fold i{width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateX(2px) rotate(45deg);transition:transform .2s}   /* ‹ (목차 단추의 꺾쇠와 같은 8px·2px) */
.guide-f.fold{transform:translateX(calc(28px - 100% - var(--gl)))}   /* 카드 폭 + 왼쪽 여백만큼 왼쪽으로 — 손잡이 28px 만 남는다. .guide-f.on 의 transform:none 보다 뒤에 있어 이긴다(같은 특이도) */
.guide-f.fold .gf-now,.guide-f.fold .wrap,.guide-f.fold .guide-list{visibility:hidden;opacity:0;transition-delay:0s,.18s}   /* 글자는 먼저 사라지고(.18s) 그 뒤 visibility — 펼칠 땐 바로 */
.guide-f.fold .gf-fold{top:0;right:0;width:28px;height:69px;border-color:transparent;border-radius:0 18px 18px 0;background:rgba(18,34,58,0);box-shadow:0 0 0 rgba(11,22,39,0);color:rgba(255,255,255,.86)}   /* 접힌 동안 단추 = 오른쪽 띠 전체(카드 몸 69px·모서리 18px 그대로 → 왼쪽 가장자리의 반알약 손잡이) — 10판 배지의 원·윤곽선·그림자는 투명값으로 거둔다(none 이 아니라 보간되는 값) */
.guide-f.fold .gf-fold:hover,.guide-f.fold .gf-fold:focus-visible{background:rgba(255,255,255,.08)}
.guide-f.fold .gf-fold i{transform:translateX(-2px) rotate(-135deg)}   /* › */
@media (prefers-reduced-motion:reduce){.guide-f,.guide-f .guide-more,.guide-f .gf-fold,.guide-f .gf-fold i,.guide-f .gf-now,.guide-f .wrap,.guide-f .guide-list{transition:none}.guide-f .gf-in.say .gf-now i{animation:none}}
/* 끄기 스위치 ?off=lag,blur,lv,cv (arkswap_helper ark_off → html.off-*; 대표 2026-10-20 폰 "화면 전체적으로 번쩍번쩍" 원인 가르기용 비교 주소 — 평소 주소엔 영향 없음) */
html.off-lag .guide-f .gf{transform:none!important;will-change:auto}   /* 카드 따라붙기 물리 끔(guide.js 도 off-lag 이면 물리를 안 건다) */
html.off-blur .hdr,html.off-blur .cbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#0B1627!important}   /* 머리·상담 줄 뒤 흐림 끔(iOS 에서 스크롤 중 다시 그리는 원인 후보) */
html.off-lv [data-lv]{opacity:1!important;transform:none!important;transition:none!important}   /* 등장 페이드 끔 */
html.off-cv main#top>section{content-visibility:visible!important;contain-intrinsic-size:auto!important}   /* 구간 지연 렌더 끔 */
/* 크롬 iOS 깜빡임 가르기(2026-10-21 대표 "크롬 모바일에서만 그래" — 영상: sticky 머리 띠가 스크롤 중 초당 최대 18회 켜졌다 꺼짐. WebKit 27 베타 노트 "Fixed an issue where sticky-positioned elements could flicker rapidly after scrolling"·버그 297779 "Chrome on iOS is still an issue"). ?off=cv·?off=blur 는 대표 실측상 무효 */
html.off-anchor{overflow-anchor:none}   /* 스크롤 앵커링 끔(WebKit 수정 항목이 속한 절) */
@media (max-width:899px){
  html.off-sticky .hdr{position:fixed;left:0;right:0;top:0;padding-top:env(safe-area-inset-top,0px)}   /* 머리 띠를 sticky 대신 fixed 로 — 본문은 머리 높이(64+1)만큼 위를 비운다(시험 배너는 머리 아래로 내려온다) */
  html.off-sticky body{padding-top:calc(65px + env(safe-area-inset-top,0px))}
  html.off-gpu .hdr,html.off-gpu .sxn-pin,html.off-gpu #tech .sxp-ctl[data-sxp-ctl="top"]{transform:translate3d(0,0,0);backface-visibility:hidden;-webkit-backface-visibility:hidden}   /* 고정 요소를 자기 합성 층으로(현장 우회 보고 조합) */
  html.off-top .hdr{top:0}   /* 머리 띠 top 의 env(safe-area-inset-top) 의존 제거 — 크롬 iOS 가 주소창을 접는 동안 이 값을 0↔상태바 높이로 바꾸면 sticky 자리가 프레임마다 뛴다는 가설(영상: 머리 띠 자리의 밝기가 초당 최대 18회 전환). 비컨 flick.js 의 sat= 가 그 값의 범위·변화 횟수를 잰다 */
  html.off-top .sxn-pin,html.off-top #tech .sxp-ctl[data-sxp-ctl="top"],html.off-top .guide-top{top:var(--hdr-h,65px)}
  html.off-hdr .hdr,html.off-hdr .sxn-pin,html.off-hdr #tech .sxp-ctl[data-sxp-ctl="top"]{position:static}   /* 고정 요소 0(판별자) — 이래도 번쩍이면 원인은 고정 요소가 아니라 화면 전체의 합성이다 */
}

/* 간편 상담 줄(2026-10-15 미리보기 ?bar=a — _h_bar.php·bar.js). 옛 홈 .mcb-banner(데스크톱 하단 고정 폼)를 새 톤으로: 머리(.hdr)와 같은 재질(먹색 94% + 흐림)의 평평한 줄 하나,
   칸 위에 남는 라벨 + 흰 입력 칸 둘·동의·파란 버튼. 900px 이상 전용(모바일은 .dock). 장식·그림자 없음.
   2판(GPT 심사 2026-10-15): 격자 2행 — 오류 문장은 연락처 칸 바로 위(1행, 비어 있으면 0), 라벨 노출, 동의 14px·44px, 줄 92px(12+15+4+46+13+1).
   3판(대표 2026-10-15 "따라다니는 거 없는데?"): 옛 띠처럼 처음부터 떠 있다 — 기본이 보임(스크립트 없이도), 본문의 다른 신청서에 입력 중일 때만 .off 로 내려간다(bar.js).
   줄 높이는 bar.js 가 --cbar-h 로 알린다(기본 92px) — 바닥글 여백(옛 홈 #footer padding-bottom 120px 과 같은 처방)과 길잡이 줄 자리가 따라온다. */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;background:rgba(11,22,39,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(195,211,236,.14);transform:none;transition:transform .28s cubic-bezier(.22,1,.36,1)}
@media (min-width:900px){.cbar{display:block}}
@media (min-width:900px) and (max-height:599px){.cbar{display:none}}   /* 낮은 창에선 줄을 두지 않는다 — 머리의 '상담 신청'이 남는다(GPT 심사 5) */
.cbar.off{transform:translateY(100%)}
@media (min-width:900px) and (min-height:600px){html:has(.cbar){scroll-padding-bottom:var(--cbar-h,92px)}}   /* 포커스·앵커 이동 때 대상이 줄 뒤에 숨지 않게 */
@media (min-width:900px) and (min-height:600px){body:has(.cbar) .site-foot{padding-bottom:calc(36px + var(--cbar-h,92px))}}   /* 바닥글 마지막 줄이 상시 줄에 가려지지 않게 */
@media (min-width:900px) and (min-height:600px){html.ask-bar .site-foot{padding-bottom:calc(36px + var(--cbar-h,92px))}}   /* :has 를 못 읽는 브라우저용 같은 규칙(bar.js 가 html.ask-bar 를 단다) — 선택자 목록으로 합치면 :has 때문에 통째로 버려진다 */
/* 8판 길잡이 카드(2026-10-20 대표 "그냥 계속 보여주면 어떨까?"): 카드가 페이지 끝에서도 떠 있으므로 바닥글 마지막 줄(개인정보처리방침 90×16)이 카드 아래 깔리지 않게 카드 높이 69px + 간격(모바일 24·상담 줄 위 20·데스크톱 28)만큼 더 비운다 — 실측 6개 뷰포트 전부 페이지 끝에서 덮였다. guide.js 가 f 카드일 때 html.ask-f 를 단다(스크립트 없이는 카드도 안 뜨니 여백도 없다) */
@media (max-width:899px){html.ask-f .site-foot{padding-bottom:calc(36px + 76px + 93px + env(safe-area-inset-bottom,0px))}}
@media (min-width:900px){html.ask-f .site-foot{padding-bottom:calc(36px + 28px + 69px)}}
@media (min-width:900px) and (min-height:600px){html.ask-f.cbar-on .site-foot{padding-bottom:calc(36px + var(--cbar-h,92px) + 20px + 69px)}}
.form.form-bar{background:none;color:#fff;border-radius:0;padding:12px 0 13px;display:grid;grid-template-columns:max-content 212px 164px max-content 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:0;align-items:end}
.form-bar .form-bar-k{grid-row:2;align-self:end;margin-bottom:3px;display:grid;gap:1px;min-width:0;padding-right:8px}   /* 제목 두 줄(39px)의 가운데를 입력 칸(46px) 가운데에 — center 는 라벨 줄까지 친 행 가운데라 10px 위로 떴다(2026-10-26) */
.form-bar .form-bar-k b{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em;white-space:nowrap;line-height:1.3}
.form-bar .form-bar-k small{font-size:12.5px;color:var(--on-ink-mute);white-space:nowrap;line-height:1.3}
.form-bar label.form-bar-f{grid-row:2;display:grid;gap:4px;font-size:12.5px;line-height:1.2;color:var(--on-ink-mute)}
.form-bar .form-bar-l small{font-weight:400;color:var(--on-ink-mute)}
.form-bar input,.form-bar select{height:46px;padding:0 14px;border-radius:10px;border:1px solid rgba(195,211,236,.25);background:#fff;color:var(--navy);font-size:15px}
.form-bar input{width:212px}
.form-bar select{width:164px}
.form-bar select{-webkit-appearance:none;appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%232A3547' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/16px}   /* 기본 화살표는 글자 들여쓰기가 입력 칸보다 4px 깊다 — 홈 상담 카드(.form-card select)와 같은 화살표 */
.form-bar select:has(option[value=""]:checked){color:#757575}   /* 아직 안 고른 상태는 연락처 칸 안내 글자와 같은 회색 — 남색이면 이미 고른 값처럼 읽힌다 */
.form-bar select option{color:var(--navy)}
.form-bar .agree{grid-row:2;min-height:44px;align-items:center;color:var(--on-ink);font-size:14px;white-space:nowrap;gap:8px}
.form-bar .agree input{width:20px;height:20px;margin:0}
.form-bar .agree label{color:var(--on-ink);padding:10px 0;font-size:14px}   /* .form label 13px(0,1,1)보다 특이도가 높아야 14px 이 선다 */
.form-bar .agree-more{color:var(--on-ink-mute);font-size:13.5px}
.form-bar .btn{grid-row:2;justify-self:end;min-height:46px;padding:0 20px;font-size:15px;white-space:nowrap}
.form-bar .err{grid-row:1;grid-column:2/4;margin:0 0 6px;padding:0;min-height:0;background:none;color:#FFB4A8;font-size:13.5px;line-height:1.3}
.form-bar .err:empty{display:none}
@media (min-width:900px) and (max-width:1139px){.form-bar .form-bar-k{display:none}.form.form-bar{grid-template-columns:180px 150px max-content 1fr}.form-bar input{width:180px}.form-bar select{width:150px}.form-bar .err{grid-column:1/3}}   /* 좁은 데스크톱: 제목 없이 폼만(900px 쓸 폭 828) */
@media (min-width:900px){html.cbar-on .guide-bottom{bottom:var(--cbar-h,92px);transform:translateY(calc(100% + var(--cbar-h,92px)))}html.cbar-on .guide-bottom.on{transform:none}}   /* 길잡이 줄(?ask=b)과 같이 켜지면 길잡이는 상담 줄 위에 올라앉는다(3판: 줄이 상시라 '내려가기'면 길잡이가 영영 안 보인다 — GPT 심사의 '고정 줄 둘 동시 금지'와 맞서는 자리, 대표 결정) · 접힐 땐 줄 뒤까지 내려간다 · .on 특이도(0,2,1)를 넘어야 다시 올라온다 */
/* 대응 단계 탭의 바탕 규칙(2026-10-22 pages/help.css 98·99·104·107~109·115행에서 옮김 — 가이드와 홈 진행 과정이 같이 쓴다. 가이드에선 원래도 help.css 의 이 선택자 첫 규칙이라 덮는 순서는 같다).
   나머지 탭·계기판 규칙은 pages/steps.css */
.help-step-k{margin:0;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--mute)}
.help-step-k>.mono:not(.help-step-n){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* 'STEP n' 글자는 화면에서 뺀다 — 바로 앞 원 숫자와 같은 말(대표 2026-10-23 '1이랑 스텝1이랑 같이 있으니까 좀 이상해'). 원은 aria-hidden 이라 화면 낭독기에는 이 글자로 단계를 남긴다(.sr 와 같은 방식). 탭 줄(.sxn)의 STEP n 은 그대로 */
.help-step-n{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--signal);color:#fff;font-size:15px;font-weight:700;letter-spacing:0}
.help-act{margin-top:auto;padding-top:14px;display:grid;gap:10px}   /* 카드 높이가 달라도 버튼 줄은 바닥에 맞는다 */
.help-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 16px;border-radius:12px;background:#fff;border:0;color:var(--navy);font-size:15px;font-weight:700;text-decoration:none;transition:border-color .2s,color .2s,background-color .2s}
.help-btn:hover,.help-btn:focus-visible{color:var(--signal)}   /* 테두리 없음(대표 2026-10-14 '이 박스들의 테두리도 없애줘') — 흰 채움이 카드 바탕(#F4F6FA·#EAF1FF) 위 상자 한 겹 */
.help-btn-primary{background:var(--signal);color:#fff;font-size:17px}
.help-btn-primary:hover,.help-btn-primary:focus-visible{background:#2A68D8;color:#fff}

/* ── 휴대폰 시안 ?mob=b(html.mob-b, 2026-10-26 — 보고서 '모바일 구간 실측' 13절 '버튼 줄 폭별 들쭉날쭉'): 연구소 단추 3개(180/171/191px 고정 — 390 이하 3줄·393 이상 2+1줄)와 닥터피싱 단추 2개(187+175 — 402 이하 2줄·411 이상 1줄)를 12폭 모두 같은 줄 수로.
   연구소 = 첫 단추 한 줄 + 나머지 둘 한 줄(2칸) · 닥터피싱 = 둘 한 줄(2칸, 첫 화면 .cta-pair 와 같은 규칙). 글자는 칸 안에서 줄바꿈. 표식 없으면 한 줄도 적용되지 않는다 */
@media (max-width:639px){
  html.mob-b .lab-teaser .lab-more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html.mob-b .lab-teaser .lab-more .btn{text-align:center;padding:0 10px}
  html.mob-b .lab-teaser .lab-more .btn-primary{grid-column:1/-1}
  html.mob-b .drp-band .cta-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html.mob-b .drp-band .cta-row .btn{gap:6px;padding:8px 8px;white-space:normal;text-align:center;line-height:1.25}   /* 글자 16px 그대로(줄이지 않는다 — 심사 2026-10-26 #9). 조판 필터가 단추 글자의 띄어쓰기를 묶음 공백으로 바꿔 한 줄(118px)로만 놓이므로 320px 칸(139)에 맞게 안쪽 여백 8·화살표 간격 6(실측: 10/10 이면 2px 넘침) */
}

/* ── 2026-10-26 대표 '[PC 외 해상도(모바일 등)]' 묶음 ──────────────────────────────────────
   ① 첫 화면 신뢰 줄 한 줄 · ② 상담 신청 확인 목록을 가이드 '미리 정리해 두면 좋은 자료' 알약으로 · ③ '자세히 보기' 접기 단추 위아래 선 없음
   ④ 수상 책장: 상장 양옆 화살표 대신 장 번호 줄(ark2026.js 3a) · ⑤ 소식 카드 그림 비율(ark2026.js 3g-0) · ⑥ 흐르는 줄 손가락 밀기(ark2026.js 3g) */
@media (max-width:639px){
  div.trust{flex-wrap:nowrap;gap:0 12px;white-space:nowrap;font-size:12.5px}
  div.trust .tr-x{display:none}   /* 원문 3항목(13px 411px)은 360px 화면에 글자 12px 하한으로 못 들어간다 → '연중무휴'·'정보보안'·'·닉네임'만 접는다(낱말은 화면 읽기 그대로 DOM 에 남는다) */
}
@media (max-width:359px){div.trust{font-size:12px;gap:0 9px}}
@media (max-width:899px){
  .close-chk{display:flex;flex-wrap:wrap;gap:8px}
  .close-chk li{display:inline-flex;gap:7px;min-height:0;padding:7px 12px 7px 10px;border-radius:999px;background:rgba(255,255,255,.09);font-size:14px;font-weight:600;line-height:1.3;color:#fff;word-break:keep-all}
  .close-chk li::before{flex:0 0 14px;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}   /* steps.css .help-ck li 와 같은 알약·같은 체크 — 어두운 면이라 바탕만 반투명 흰색 */
  .ps-fold-all{border-top:0;border-bottom:0}
  .close-chk{gap:7px 6px}
  .close-chk li{gap:6px;padding:6px 11px 6px 8px;font-size:13.5px}   /* 알약을 조금 줄여 앞 둘이 한 줄에(360px 이상 두 줄, 실측 155+142px) */
  .close-chk .cc-x{display:none}
}
@media (max-width:339px){.close-chk li{padding:6px 9px 6px 7px;font-size:12.5px;gap:5px}}   /* 320px 도 두 줄로 */
.awc-nav{display:none}
@media (max-width:899px){
  .awc .awc-arr{display:none}
  .awc{padding-bottom:0}   /* 예전 '01 / 09' 자리(40px) — 번호는 위 줄로 */
  .awc-nav{display:flex;gap:6px;margin:0 0 6px}
  .awc-nav button{flex:0 1 32px;min-width:0;aspect-ratio:1;max-height:32px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--mute);font-size:12px;font-weight:600;line-height:1;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .awc-nav button[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
  .awc-nav button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
}
.press-card img.pc-fit{object-fit:contain;background:var(--pc-bg,#0F1E33)}
.mq-on .mq-rail,.mq-on.mq-rail{touch-action:pan-y}   /* 흐르는 줄은 가로 밀기를 스크립트가 받는다(세로는 페이지 스크롤) */
.awc .mq-rail{touch-action:auto}   /* 수상 책장 안 칩 줄은 책장 넘김(가로 밀기)이 우선 */
.mq-drag .mq-track{will-change:transform}

/* 단계 카드 자료 목록 접기(ark2026.js 3g-1, 대표 2026-10-27) — 900px 이상은 펼친 그대로 */
.help-ck-b{display:grid;gap:8px}
.help-ck-t{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:default;pointer-events:none}
.help-ck-t i{display:none}
@media (max-width:899px){
  .help-sxt .help-ck{gap:0}
  .help-sxt .help-ck-t{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
  .help-sxt .help-ck-t i{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--signal);color:#fff;box-shadow:0 2px 8px rgba(52,123,247,.35)}
  .help-sxt .help-ck-t i::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
  .help-sxt .help-ck.ck-open .help-ck-t i::before{transform:translateY(2px) rotate(-135deg)}
  .help-sxt .help-ck:not(.ck-open) .help-ck-b{display:none}
  .help-sxt .help-ck.ck-open .help-ck-b{margin-top:4px}
  .help-sxt .help-ck-t:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:8px}
  .help-ck-t.ck-hint i{animation:ckHint 1s cubic-bezier(.3,.7,.4,1) 2}
}
@keyframes ckHint{0%,100%{transform:translateY(0);box-shadow:0 2px 8px rgba(52,123,247,.35),0 0 0 0 rgba(52,123,247,.5)}35%{transform:translateY(5px);box-shadow:0 2px 8px rgba(52,123,247,.35),0 0 0 10px rgba(52,123,247,0)}65%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.help-ck-t.ck-hint i{animation:none}}

/* 휴대폰 줄 정리(대표 2026-10-27): .m-x = 휴대폰에서 숨기는 글자(연구소 안내 괄호) · .m-kc = 휴대폰에서 구절(쉼표)마다 새 줄(상담 전 FAQ '이미 유포된 경우') */
@media (max-width:899px){.m-x{display:none}.m-kc .kc+.kc::before{content:"\A";white-space:pre}}
/* 닥터피싱 장의 눈썹은 넘김이 켜지면 구간 머리 눈썹이 대신 보여준다(ark2026.js 3i data-sxp-eb) — 같은 글자가 두 번 나오지 않게 */
@media (max-width:639px){.sxp-on .drp-txt>.eyebrow{display:none}}
/* 협력 기관 카드(대표 2026-10-27 "박스 크기를 조금 줄여서 한 화면에") — 휴대폰에서 위·아래 줄 같은 규격 184×158 → 156×134 */
@media (max-width:639px){
  .om-card{width:156px;height:134px;padding:10px;gap:4px;border-radius:12px}
  .om-site{grid-template-rows:46px auto;gap:3px}
  .om-logo{height:46px}
  .om-logo img{max-height:34px}
  .om-name{font-size:12px}
  .om-rel{padding-top:5px}
  .om-track{gap:10px}
}
/* 수상 증서 크게 보기(ark2026.js 3g-3, 휴대폰·태블릿) — 짙은 남색 바탕 위 흰 증서, 오른쪽 위 둥근 X. 바탕을 누르면 닫힌다 */
.ark-lbx{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:calc(64px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));border:0;background:transparent;color:#fff;overflow:auto;overscroll-behavior:contain}
.ark-lbx::backdrop{background:rgba(6,12,24,.86);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ark-lbx[open]{display:grid;place-items:center;animation:lbxIn .2s ease-out}
.ark-lbx-f{margin:0;display:grid;gap:12px;justify-items:center;width:100%;max-width:520px}
.ark-lbx-f img{display:block;width:auto;max-width:100%;max-height:calc(100dvh - 150px);height:auto;aspect-ratio:640/851;object-fit:contain;background:#fff;border-radius:8px;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.ark-lbx-c{font-size:14px;line-height:1.45;font-weight:600;color:rgba(232,240,252,.92);text-align:center;word-break:keep-all;max-width:36em}
.ark-lbx-x{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(15,30,51,.72);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.ark-lbx-x span{position:relative;width:18px;height:18px}
.ark-lbx-x span::before,.ark-lbx-x span::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.ark-lbx-x span::after{transform:translate(-50%,-50%) rotate(-45deg)}
.ark-lbx-x:focus-visible{outline:2px solid #4D8DFF;outline-offset:2px}
html.lbx-open,html.lbx-open body{overflow:hidden}
@keyframes lbxIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ark-lbx[open]{animation:none}}
/* 홈 진행 과정 끝 「상담 전 준비할 자료와 대응 지침 보기 →」 ~ 「실제 해결 후기」 사이 여백 줄이기(대표 2026-10-27) — 휴대폰: 125 → 69px(같은 흰 바탕이 이어지는 두 구간의 위·아래 안쪽 여백) */
@media (max-width:899px){#now.proc-g{padding-bottom:20px}#now.proc-g + .rvx{padding-top:36px}}
.why-card h3 .why-l{display:block}   /* 지정 줄(_h_why.php 제목의 \n — 대표 2026-10-27 '나와 같은 상황,' / '먼저 해결한 분들의 이야기') */
@media (max-width:379px){.why-card{padding-left:12px;padding-right:12px}}   /* 360px: 넷째 칸 둘째 줄 '먼저 해결한 분들의 이야기'(글자 폭 133.9px)가 칸 안쪽 131px 에 3px 모자라 한 번 더 꺾이던 것 — 좌우 14→12 로 135px(네 칸 같은 여백) */
/* 연구소 공유 악성 서버 표 — 휴대폰은 가로 밀기 없이 세 열이 한 화면에(대표 2026-10-28 "옆으로 밀어서 더보기로 하면 있는지도 모르겠어 … 악성 서버 열 너비를 줄이고 3개 다 한 표에").
   종전: 서버 칸 nowrap → 가장 긴 주소가 첫 열을 넓혀 표가 화면보다 넓어지고, 앱 이름 칸이 좁게 여러 줄로 꺾여 행이 높았다 */
@media (max-width:639px){
  /* 행 하나 = 첫 줄 [서버 주소 | 연결된 앱 수] + 둘째 줄 앱 이름(전체 폭). 머리 줄은 화면에서만 숨기고 읽어 주기는 그대로 */
  table.hubs{display:block;font-size:13px}
  table.hubs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.hubs tbody{display:block}
  table.hubs tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:5px;padding:11px 14px;border-bottom:1px solid var(--line)}
  table.hubs tr:last-child{border-bottom:0}
  table.hubs td{display:block;padding:0;border:0}
  table.hubs td:nth-child(1){white-space:normal;word-break:break-all;overflow-wrap:anywhere;font-size:12.5px;line-height:1.45;color:var(--navy);font-weight:600}
  table.hubs td:nth-child(2){align-self:start;white-space:nowrap;font-size:12px;color:var(--signal);font-weight:700}
  table.hubs td:nth-child(2)::before{content:"연결 앱 ";font-family:var(--sans);font-weight:600}
  table.hubs td:nth-child(2)::after{content:"개";font-family:var(--sans);font-weight:600}
  table.hubs td:nth-child(3){grid-column:1 / -1;font-size:13px;line-height:1.5;color:var(--mute);word-break:keep-all;overflow-wrap:anywhere}
}
/* 연구소 숫자 칸(분석한 악성앱 등 5칸 · 닥터피싱 검사 3칸) — 휴대폰에서 뺀다(대표 2026-10-28 "이건 없애자") */
@media (max-width:899px){.lab-dark .kpis-5,.drp .kpis-light,.drp-band .drp-fig{display:none}}   /* 2026-10-29 대표 "이거 빼달라고 하지 않았어?" — 같은 닥터피싱 숫자 3칸이 홈 닥터피싱 구간(_h_drp .drp-fig, 숫자 줄 하나뿐)에도 있었는데 10-28 엔 연구소만 숨겼다
/* 연구소 분석 기록 콘솔 — 우하단 넘김 카운트다운 원(console.js, 대표 2026-10-28) */
.console{position:relative}
.console-cd{position:absolute;right:12px;bottom:12px;width:30px;height:30px;display:grid;place-items:center;opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s;pointer-events:none}
.console-cd.on{opacity:1;transform:none}
.console-cd svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.console-cd circle{fill:none;stroke-width:2.5}
.console-cd .cd-trk{stroke:rgba(195,211,236,.18)}
.console-cd .cd-arc{stroke:#4D8DFF;stroke-linecap:round}
.console-cd b{position:relative;font:700 13px/1 var(--mono);color:#E8F0FC}
@media (prefers-reduced-motion:reduce){.console-cd{display:none}}
/* 단계 카드 자료 목록 단추(3g-1) — 화살표 옆 '펼쳐보기/접기' 글자, 접혀 있는 동안 화살표 깜빡임(대표 2026-10-28 "화살표 깜빡깜빡 + 옆에, 펼쳐보기") */
.help-ck-x{display:none}
@media (max-width:899px){
  .help-sxt .help-ck-x{display:inline;font-size:13px;font-weight:600;color:var(--signal);margin-left:-2px;white-space:nowrap}
  .help-sxt .help-ck:not(.ck-open) .help-ck-t i{animation:ckBlink 1.1s ease-in-out infinite}
}
@keyframes ckBlink{0%,100%{opacity:1;box-shadow:0 2px 8px rgba(52,123,247,.35),0 0 0 0 rgba(52,123,247,.45)}50%{opacity:.35;box-shadow:0 2px 8px rgba(52,123,247,.15),0 0 0 7px rgba(52,123,247,0)}}
@media (prefers-reduced-motion:reduce){.help-sxt .help-ck:not(.ck-open) .help-ck-t i{animation:none}}
/* '하지 마세요' 상자 설명 — 휴대폰은 쉼표 구절마다 새 줄(대표 2026-10-28 '초기화해도 … 지워지지 않고, / 악성 앱 분석에 …') */
@media (max-width:899px){.help-dont p:not(.help-dont-k) .kc+.kc::before{content:"\A";white-space:pre}}
/* 구간 제목 따라오기 띠(ark2026.js 3g-5, /test 전 페이지 휴대폰 — 2026-10-28 피해 대응 → 전 페이지) — 머리글 바로 아래, 구간 바탕색에 맞춰 밝음/어두움 */
.sec-pin{display:none}
@media (max-width:899px){
  .sec-pin{display:block;position:fixed;left:0;right:0;top:65px;z-index:45;padding:9px var(--gut,16px);background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:0 6px 14px -12px rgba(15,30,51,.5);opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s .18s;pointer-events:none}
  .sec-pin.on{opacity:1;visibility:visible;transition:opacity .18s}
  .sec-pin span{display:block;font-size:15px;font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sec-pin.sec-pin-dark{background:rgba(11,22,39,.96);border-bottom-color:rgba(195,211,236,.14)}
  .sec-pin.sec-pin-dark span{color:#fff}
}
@media (prefers-reduced-motion:reduce){.sec-pin,.sec-pin.on{transition:none}}
/* PC(900px 이상)에도 구간 제목 띠(대표 2026-10-28 "다른 페이지에서도 … 스크롤에 의해 감춰질 때 고정되어야지") — 휴대폰과 같은 띠, 글자는 본문 폭(--max)에 맞춰 왼쪽을 정렬 */
@media (min-width:900px){
  .sec-pin{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;top:65px;z-index:45;padding:11px max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:0 6px 14px -12px rgba(15,30,51,.5);opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s .18s;pointer-events:none}
  .sec-pin.on{opacity:1;visibility:visible;transition:opacity .18s}
  .sec-pin span{display:block;flex:1 1 auto;min-width:0;font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-.01em;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sec-pin.sec-pin-dark{background:rgba(11,22,39,.96);border-bottom-color:rgba(195,211,236,.14)}
  .sec-pin.sec-pin-dark span{color:#fff}
  .sec-pin span.ark-cd{display:none}   /* 넘김 숫자(ArkCd)는 휴대폰 전용 — PC 띠에 붙어도 그리지 않는다(위 .sec-pin span 이 .ark-cd{display:none} 을 이겨 큰 그림이 띠를 키웠다, gpt-6-astra) */
  /* 띠 아래로 비키는 PC 고정 요소 */
  .mx-rec{top:calc(92px + var(--pin-h,0px))}
  .sxn-pin{top:calc(var(--hdr-h,65px) + var(--pin-h,0px) + env(safe-area-inset-top,0px))}
}
/* 표 머리 줄 고정(대표 같은 날 "이런 표도 마찬가지") — 머리 줄이 보이는 640px 이상. 머리글 아래·구간 제목 띠 아래(--pin-h)에 붙는다.
   감싸개(.table-wrap)는 가로 넘침 상자라 그 안의 sticky 는 페이지가 아니라 상자에 붙는다 → 고정 배치(table-layout:fixed, 넘침 0)인 640 이상에서는 넘침을 풀고 둥근 모서리는 머리 칸이 맡는다 */
@media (min-width:640px){
  .table-wrap-hubs{overflow:visible}   /* lab.php 의 공유 서버 표 감싸개(:has 없는 브라우저도) */
  table.hubs thead th{position:sticky;top:calc(var(--hdr-h,65px) + var(--pin-h,0px));z-index:2;box-shadow:inset 0 -1px 0 var(--line)}
  table.hubs thead th:first-child{border-top-left-radius:14px}
  table.hubs thead th:last-child{border-top-right-radius:14px}
}
@media (prefers-reduced-motion:reduce){.sec-pin,.sec-pin.on{transition:none}}   /* PC 띠 규칙 뒤에 다시 — 같은 명시도라 뒤가 이긴다(gpt-6-astra) */
/* 끝 상담 신청 영역 위·아래 여백 — 휴대폰 68 → 48px(위: 구간 36 + 눈썹 12) · 68 → 44px(아래)(대표 2026-10-28 "위 아래 여백 영역을 알맞게 축소"). 홈 첫 화면 바로 뒤 영역(.hero+.close)은 이미 0 */
@media (max-width:899px){.close-v2{padding-top:36px}.close-v2 .close-crisis{padding-bottom:44px}}
/* 넓은 화면에서 연 뒤 639px 이하로 바뀌면(회전) 가로 밀기 단서(3k)가 책장 넘김(3i) 목록에 남던 것 — 넘김 목록에서는 단서를 걷는다(gpt-6-astra 2026-10-28) */
@media (max-width:639px){.hs-wrap:has(> .sxp-list[data-sxp]) > .hs-over,.hs-wrap:has(> .sxp-list[data-sxp]) + .hs-cue{display:none!important}}
/* 홈 첫 화면 연구소 카드(휴대폰 전용) — 기준 줄·설명 문장은 빼고 '아크링크 연구소에서 확인 →' 링크만(대표 2026-10-28 "아크링크 연구소에서 확인 제외하고 다 빼버리자") */
.hero-ev .hero-ev-k,.hero-ev .hero-ev-t{display:none}
.hero-ev{padding:11px 14px}
/* 넘김 카운트다운(ark2026.js window.ArkCd — 대표 2026-10-28 "이런 곳은 다 3/2/1 해줘"): 자동으로 넘어가는 구간(수상 연혁·특허·인증·진행 과정·기술력)의 머리글 끝, 넘어가기 3초 전부터.
   '분석 표본'(pages/hero_b.css .bench-cd) 과 같은 그림. 휴대폰에서만 자리를 갖고 처음부터 잡아 둔다(나타날 때 글자가 밀리지 않게) — 머리글 줄 높이를 넘지 않게 18px, 숫자 12px 하한 */
.ark-cd{display:none}
@media (max-width:899px){
  .ark-cd{display:inline-grid;place-items:center;position:relative;top:-1px;width:18px;height:18px;margin-left:7px;vertical-align:middle;opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s}
  .ark-cd.on{opacity:1;transform:none}
  .ark-cd svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
  .ark-cd circle{fill:none;stroke-width:2}
  .ark-cd .cd-trk{stroke:currentColor;opacity:.22}
  .ark-cd .cd-arc{stroke:currentColor;stroke-linecap:round}
  .ark-cd b{position:relative;font:700 12px/1 var(--mono);color:currentColor;letter-spacing:0}
  .ark-cd b::before{content:attr(data-n)}
}
@media (max-width:899px){   /* 구간 제목 따라오기 띠(.sec-pin)에 붙을 때 — 띠는 한 줄 그대로, 제목이 길면 제목 쪽이 줄임표 */
  .sec-pin{display:flex;align-items:center;gap:8px}   /* 숫자가 없을 때도 같은 한 줄(:has 없는 브라우저에서 띠 높이가 바뀌지 않게) */
  .sec-pin span{flex:1 1 auto;min-width:0}
  .sec-pin span.ark-cd{display:inline-grid;flex:none;margin-left:0;top:0;color:var(--signal)}   /* .sec-pin span{display:block} 보다 앞서야 원 안 숫자가 가운데(gpt-6-astra) */
  .sec-pin.sec-pin-dark .ark-cd{color:#7FA8FF}
}
@media (prefers-reduced-motion:reduce){.ark-cd{display:none!important}}
/* 다음 장 단추 반짝임(대표 2026-10-28 "여기도, 하이라이트. 반짝반짝") — 휴대폰 책장 넘김(3i)의 '다음' 단추. 그 목록을 한 번이라도 넘기면(.sxp-used) 멈춘다 */
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  .sxp-ctl:not(.sxp-used) .sxp-b[data-d="1"]:not(:disabled){animation:ckBlink 1.1s ease-in-out infinite}
}
/* 대표 2026-10-28 묶음 — 휴대폰:
   ① 닥터피싱 두 단추('무료로 앱 진단하기'·'아크링크 연구소 보기') 한 줄 나란히 — 시안 ?mob=b 의 같은 규칙(심사 2026-10-26 #9: 글자 16px 그대로, 칸 안 줄바꿈 허용)을 기본으로
   ② 악성앱 대조 콘솔 '다음 쪽' 단추 반짝임(.mx-pg-hint — 한 쪽이라도 넘기면 꺼짐)
   ③ 끝 상담 영역 전화 상자: '번호 복사' 단추를 걷고 상자 전체가 전화 걸기(tel:) — 링크의 누름 영역을 상자 전체로 넓힌다(PC 는 복사 그대로) */
@media (max-width:639px){
  .drp-band .cta-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .drp-band .cta-row .btn{gap:6px;padding:8px 8px;white-space:normal;text-align:center;line-height:1.25}
}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){.mx-pg-b.mx-pg-hint{animation:ckBlink 1.1s ease-in-out infinite}}
@media (max-width:899px){
  .close-tel{position:relative;grid-template-columns:minmax(0,1fr)}
  .close-copy{display:none}
  .close-tel-n::after{content:"";position:absolute;inset:0;border-radius:14px}
  .close-tel:active{background:rgba(255,255,255,.08)}
  /* 번호는 글자로 드러내지 않고 '전화 상담' 한마디로 — 옆 '채팅 상담'과 같은 모양(아이콘 + 16px 굵게, 가운데). 상자 전체가 전화 걸기인 것은 그대로, 번호는 링크 이름(aria-label)·tel: 에만 (대표 2026-10-29 "전화번호를 가시적으로 드러내지 않아도 되지 않을까? 전화 상담 으로") */
  .close-tel{display:flex;align-items:center;justify-content:center;padding:10px 16px}
  .close-tel-k{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--on-ink)}
  .close-tel-k::before{content:"";width:20px;height:20px;background:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 3.5h2.6l1.4 4.1-2 1.4a12 12 0 0 0 6.4 6.4l1.4-2 4.1 1.4v2.6a1.6 1.6 0 0 1-1.7 1.6A16.4 16.4 0 0 1 5 5.2a1.6 1.6 0 0 1 1.6-1.7z' fill='none' stroke='%23E8EEF7' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E")}
  .close-tel-n{font-size:0;line-height:0}   /* 글자만 접는다 — 누름 영역(::after, 상자 전체)과 링크 이름은 남는다 */
}
/* ── 구간 '전체 보기' 행동 줄(2026-10-28 대표 "같은 기능·같은 요소인데 위치나 배치, 통일감이 너무 미흡해" → 한 조각 _h_more 로: 콘텐츠 묶음 바로 아래·왼쪽, 한 모양·한 간격. 규격 = gpt-6-astra 심사 B안) ── */
.section-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:32px;min-width:0}
@media (max-width:899px){.section-actions{margin-top:24px;flex-direction:column;align-items:flex-start;gap:8px}}
.section-more{min-height:44px;padding:11px 0;line-height:22px;color:var(--navy)}   /* 글자 15px·700·선 화살표 = .pill-more 상속, 높이 44 = 터치 */
.section-more>span{margin-right:24px}   /* 화살표가 30→54px 로 늘 자리를 미리 비워 두어 이웃·줄바꿈이 안 움직인다 */
.section-more:hover>span,.section-more:focus-visible>span{margin-right:0}
.section-actions[data-tone="dark"] .section-more{color:var(--on-ink)}
/* 링크 여럿(.is-multi, _h_more): 휴대폰은 '전체 보기' 머리 한 줄 + 짧은 이름 칩(대표 2026-10-28 "이거 구조 너무 비효율적이야" — 세로 세 줄·'전체 보기' 세 번). PC 는 위 규칙 그대로 */
.section-actions-k,.section-more .sm-s{display:none}
.section-more .sm-l,.section-more .sm-s{font:inherit}
@media (max-width:899px){
  .section-actions.is-multi{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
  .section-actions-k{display:block;flex-basis:100%;margin:0 0 2px;font-size:13px;font-weight:600;color:var(--mute)}
  .section-actions[data-tone="dark"] .section-actions-k{color:var(--on-ink-mute)}
  .is-multi .section-more .sm-l{display:none}
  .is-multi .section-more .sm-s{display:inline}
  .is-multi .section-more{gap:4px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;line-height:1.2}
  .section-actions[data-tone="dark"].is-multi .section-more{border-color:rgba(255,255,255,.22)}
  .is-multi .section-more>span{display:none}
  .is-multi .section-more::after{content:"›";font-size:18px;font-weight:400;line-height:1;margin-top:-2px}
  .is-multi .section-more[target="_blank"]::after{content:none}   /* 새 창 칩은 이름 끝 ↗ 가 이미 방향을 말한다 */
}
.ivx-grid>.section-actions{margin-top:0}   /* 인터뷰: 격자 gap 32 가 이미 간격 — 아래 두 규칙과 함께 32/24 를 맞춘다 */
@media (max-width:899px){.ivx-grid>.section-actions{margin-top:-8px}}
@media (min-width:1000px){.ivx-grid>.section-actions{grid-column:2;grid-row:3;margin-top:12px}}   /* 오른쪽 글 열 아래(row-gap 14 + 카드 pb 6 + 12 = 32) */