/* /test 홈 첫 화면 '분석 표본대'(기본 화면 — 2026-10-15 재설계[대표 '그냥 아예 재설계해줘'], 2026-10-16 채택[대표 '이걸로 하자. 교체.']; 이전 지도는 ?map=a). 마크업은 home.php $map_b 분기, 동작은 hero-b.js.
   자리: .hero figure.bench-fig > .map-stage.bench-stage > .bench(머리글 · 표본 목록 · 기록 · 서버 그림). 색은 ark2026.css 변수·등급 색만(새 색 없음).
   휴대폰(≤899) 띠 170px(짧은 폰 130px): 머리글 + 표본 하나(아이콘·이름·등급·악성 서버). 첫 탭 = 기존 '가로 전체 화면'(.map-stage.is-full) — 그 안에선 표본 목록·빼가는 정보·서버 그림이 펼쳐진다.
   데스크톱(≥900) 531×460: 왼쪽 표본 목록(아이콘 있는 분석 앱 전부 — 저절로 위로 흐른다, hero-b.js 5), 오른쪽 기록 + 아래 서버 그림.
   아이콘(.bench-ic)은 콘솔(ark2026.css .mx-ic)과 같은 스프라이트 격자 규칙 — --sp 를 hero-b.js 가 받아서 넣으면(has-sp) 낱장 img 는 숨는다(좌표 없는 앱 .no-sp 는 낱장 그대로). */
.bench-fig{gap:12px}
.bench-stage{position:relative;border:1px solid rgba(143,162,189,.24);border-radius:12px;background:var(--ink);overflow:hidden}
.bench{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "rec";gap:8px;padding:12px;box-sizing:border-box}
.bench-head{grid-area:head;display:flex;align-items:baseline;justify-content:space-between;gap:8px;line-height:22px;min-width:0}
.bench-t{font-size:15px;font-weight:600;color:var(--on-ink);white-space:nowrap}
.bench-k{font-size:12px;color:var(--on-ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bench-list{grid-area:list;list-style:none;margin:0;padding:0;display:none;gap:8px;align-content:start;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:none}   /* 목록은 굴릴 수 있고(휠·손가락) 스크롤바는 없다 — 흐르는 목록(hero-b.js 5) */
.bench-list::-webkit-scrollbar{display:none}
.bench-list.is-flow{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(to bottom,transparent,#000 12px,#000 calc(100% - 12px),transparent)}   /* 위아래 12px 만 흐리게 — 이어져 흐른다는 신호 */
.bench-tile{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;align-items:center;width:100%;padding:6px 8px;border-radius:10px;border:1px solid rgba(143,162,189,.24);background:transparent;color:var(--on-ink);font:inherit;text-align:left;cursor:pointer;min-width:0}
.bench-ic{display:block;flex:none;overflow:hidden;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%)}   /* ark2026.css .mx-ic 와 같은 식 — --cols/--rows 는 #heroBench(서버), --sp 는 hero-b.js */
.bench-ic img{display:block;width:100%;height:100%;object-fit:cover}
.bench.has-sp .bench-ic:not(.no-sp) img{display:none}
.bench-tile .bench-ic{grid-row:1/3;width:32px;height:32px;border-radius:8px}
.bench-tn{font-size:13px;line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bench-tg{font-size:12px;line-height:16px}
.t-extreme{color:#F2545B}.t-critical{color:#FF9F43}.t-high{color:#F6C453}
.bench-tile:hover{border-color:var(--frost)}
.bench-tile:focus-visible{outline:2px solid var(--frost);outline-offset:2px}
.bench-expand{display:none}   /* 띠(899px 이하)에서만 보이는 '크게 보기' 버튼 — 데스크톱·전체 화면엔 없다(아래 @media) */
.bench-tile.is-on{border:2px solid var(--frost);padding:5px 7px}
.bench-rec{grid-area:rec;display:grid;gap:12px;min-width:0;align-content:start}
.bench-id{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;min-width:0}
.bench-id .bench-ic{width:56px;height:56px;border-radius:12px}
.bench-name{margin:0;font-size:22px;line-height:28px;font-weight:700;color:#fff;overflow-wrap:anywhere}
.bench-grade{margin:4px 0 0;font-size:13px;line-height:18px;font-weight:600}
.bench-grade i{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}
.bench-dl{margin:0;display:grid;gap:10px;min-width:0}
.bench-dl div{display:grid;gap:3px;min-width:0}
.bench-dl dt{font-size:12px;line-height:18px;color:var(--on-ink-mute)}
.bench-dl dd{margin:0;font-size:14px;line-height:20px;color:var(--on-ink);min-width:0}
.bench-host{color:var(--frost);overflow-wrap:anywhere}
.bench-tags{display:flex;flex-wrap:wrap;gap:6px}
.bench-tags span{padding:2px 8px;border-radius:999px;border:1px solid rgba(195,211,236,.22);font-size:12.5px;line-height:18px;white-space:nowrap}
.bench-tags .bench-more{border-color:transparent;color:var(--on-ink-mute);padding-left:0}
.bench-acts{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;line-height:20px}
.bench-acts .map-link{font-size:14px;color:var(--frost);min-height:32px;display:inline-flex;align-items:center;text-underline-offset:3px}
.bench-web{grid-area:web;position:relative;min-height:112px;border-top:1px solid rgba(143,162,189,.18);padding-top:8px;display:none}
.bench-wk{margin:0;font-size:12.5px;line-height:18px;color:var(--on-ink-mute);position:relative;z-index:1}
.bench-wk b{color:var(--on-ink);font-weight:600}
.bench-lg{display:none;font-size:12px;line-height:16px;color:var(--on-ink-mute);white-space:nowrap}   /* 범례 '점 = 앱 1종 · 선 = 같은 서버'(gpt-6-astra 최종 심사) — 데스크톱 둘째 줄, 전체 화면 같은 줄 오른쪽 */
.bench.is-single .bench-web{min-height:0}
.bench.is-nohub .bench-web{display:none}   /* 기록에 악성 서버가 없는 앱(연구소 사본 319 중 83)은 그림 칸을 접는다 — 상세 패널처럼 없는 줄은 비우지 않고 뺀다 */
.bench-stage .map-sel{background:rgb(8,17,32);z-index:6}   /* 상세 패널은 불투명 — 지도 위에선 .94 반투명이 점·선을 비치게 하는 뜻이었지만 표본대 뒤는 글자라 .985 로도 제목·아이콘이 비쳤다(2026-10-15 불투명 주입 대조로 확인) · 폰 전체 화면에서 범례(.bench-wk z-index 1)가 패널 위로 올라오던 것 */
/* 상세 패널은 표본대 안쪽을 덮는다(대표 2026-10-15 "내부 요소를 가리게(완전 꽉 차게 말고) … 애매하게 표시될 바에 그게 낫겠어"). 지도 위에선 아래/위 44% 띠로 고른 점을 남겼지만(ark2026.css .hero .map-sel) 표본대에선 기록 글자와 섞여 애매했다.
   여백 = 표본대 테두리 안쪽 10px(데스크톱, 내용은 20px 안쪽이라 글자 노출 0) · 전체 화면은 머리띠(52px) 아래 58px 부터 12px(내용은 16px 안쪽). 세로 큰 화면(.is-tall)도 아래 정적 배치 대신 같은 덮기 */
@media (min-width:900px){
  .hero .bench-stage .map-sel,.hero .bench-stage .map-sel.is-top{top:10px;bottom:10px;left:10px;right:10px;width:auto;max-height:none}
}
.hero .bench-stage.is-full .map-sel,.hero .bench-stage.is-full.is-tall .map-sel{position:absolute;top:58px;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;max-height:none;margin:0;flex:none}
.hero .bench-stage.is-full.is-rot .map-sel{bottom:12px}   /* 돌린 상자의 안전 영역은 상자 패딩이 처리한다(ark2026.css .is-rot 규칙과 같은 값) */
.hero .bench-stage.is-full .map-sel .map-close{display:none}   /* 전체 화면의 닫기는 머리띠 하나(대표 2026-10-15 "닫기가 둘") — 머리띠 닫기가 패널부터 닫는다(hero-b.js 4) */
.hero .bench-stage.is-full .map-fullbar p{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* 패널이 열리면 안내 자리에 그 제목 — 길면 말줄임 */
.bench-hub{background:none;border:0;padding:0;margin:0;color:var(--frost);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bench-hub b{color:#fff}
.bench-fig .bench-web canvas{position:absolute;left:0;right:0;top:28px;bottom:0;width:100%;height:calc(100% - 28px)!important;display:block;cursor:default}
.bench-fig .bench-web canvas:focus-visible{outline:2px solid #347BF7;outline-offset:2px;border-radius:8px}
/* 휴대폰 띠(≤899): 표본 하나 — 머리글 · 아이콘·이름·등급 · 악성 서버 · 빼가는 정보 한 줄(gpt-6-astra 최종 심사 weakest_link: 이름·서버만으론 '수집 목록'과 '분석 결과'가 구별되지 않는다).
   170px = 여백 22 + 머리 22 + 8 + 식별 44 + 8 + 서버 20 + 4 + 빼가는 정보 20 = 148. 맨 아랫줄은 오른쪽 아래 '크게 보기' 버튼(.bench-expand — 지도용 알약 .map-expand 는 숨기고 같은 자리에 실제 버튼) 자리를 비운다 */
@media (max-width:899px){
  .bench{height:170px;grid-template-rows:22px minmax(0,1fr);gap:8px;padding:12px 12px 10px}
  .bench-rec{gap:8px}
  .bench-id{grid-template-columns:44px minmax(0,1fr);gap:10px}
  .bench-id .bench-ic{width:44px;height:44px;border-radius:10px}
  .bench-name{font-size:16px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bench-grade{margin-top:2px;font-size:12px;line-height:16px}
  .bench-dl{gap:4px}
  .bench-dl div{grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:baseline}
  .bench-dl dt{font-size:12px;line-height:20px}
  .bench-dl dd{font-size:13px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bench-dl .bench-x dd{display:block;margin-right:78px;min-width:0}   /* 알약(≈66px) 자리 — 퍼센트 max-width 는 iOS 사파리가 그리드 칸에서 무시해 14 Pro Max(375폭)에서 43px 겹쳤다(2026-10-15 실기기) */
  .bench-tags span{display:inline;padding:0;border:0;font-size:13px;line-height:20px}
  .bench-tags span+span::before{content:" · ";color:var(--on-ink-mute)}
  .bench-tags .bench-more{color:var(--on-ink-mute)}
  .bench-dl .bench-f,.bench-acts{display:none}   /* .bench-dl div 보다 우선순위가 높아야 숨는다(처음엔 밀려서 알약과 겹쳤다) */
  .bench-stage .map-expand{display:none}   /* 지도용 장식 알약(ark2026.js 가 만드는 aria-hidden span) 대신 아래 실제 버튼 — 키보드·보조기기가 띠에 들어올 길(gpt-6-astra 2026-10-16, 실측: 띠 안 초점 요소 0) */
  .bench-stage:not(.is-full) .bench-expand{display:block;position:absolute;right:6px;bottom:6px;margin:0;font:inherit;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);cursor:pointer;appearance:none;-webkit-appearance:none}   /* ark2026.css .hero .map-expand 와 같은 자리·모양. 띠 전체가 탭 대상이라 누름 영역은 띠 전체 */
  .bench-expand:focus-visible{outline:2px solid var(--frost);outline-offset:2px}
}
@media (max-width:899px){   /* 짧은 폰(뷰포트 높이 ≤760) 축소판 — 조건은 미디어 쿼리가 아니라 _top.php 가 로드 때 한 번 정하는 html.vh-short. 크롬 iOS 는 툴바를 접고 펼 때마다 뷰포트 높이가 바뀌어 760 경계를 넘나들고, 그때마다 히어로 높이가 40px 씩 뛰어 스크롤 앵커링과 맞물려 머리 띠가 초당 18회 깜빡였다(2026-10-21 대표 '크롬 모바일에서만'; WebKit 수정 310545@main 의 '스크롤 관찰+내용 변화 순환' 그대로) */
   /* 짧은 폰 130px = 여백 18 + 머리 20 + 6 + 식별 36 + 6 + 서버 18 + 4 + 빼가는 정보 18 = 126 */
  html.vh-short .bench{height:130px;grid-template-rows:20px minmax(0,1fr);gap:6px;padding:10px 12px 8px}
  html.vh-short .bench-head{line-height:20px}
  html.vh-short .bench-rec{gap:6px}
  html.vh-short .bench-id{grid-template-columns:36px minmax(0,1fr)}
  html.vh-short .bench-id .bench-ic{width:36px;height:36px;border-radius:9px}
  html.vh-short .bench-name{font-size:15px;line-height:20px}
  html.vh-short .bench-grade{margin-top:0;font-size:11.5px;line-height:14px}
  html.vh-short .bench-dl dt,html.vh-short .bench-dl dd,html.vh-short .bench-tags span{line-height:18px}
}
/* 가로 전체 화면(기존 .map-stage.is-full — 폰은 돌린 664×338, 폴드·태블릿은 가로 비율): 표본 목록 | 기록 + 서버 그림 */
.hero .map-stage.is-full .bench{flex:1 1 0;min-height:0;height:auto;display:grid;grid-template-columns:168px minmax(0,1fr);grid-template-rows:24px minmax(0,1fr) 96px;grid-template-areas:"head head" "list rec" "list web";gap:10px 16px;padding:8px 16px 12px}
.hero .map-stage.is-full .bench-head{line-height:24px}
.hero .map-stage.is-full .bench-list{display:grid;gap:5px;overflow:auto;min-height:0}
.hero .map-stage.is-full .bench-tile{grid-template-columns:26px minmax(0,1fr);column-gap:7px;padding:4px 7px;border-radius:8px}
.hero .map-stage.is-full .bench-tile.is-on{padding:3px 6px}
.hero .map-stage.is-full .bench-tile .bench-ic{width:26px;height:26px;border-radius:7px}
.hero .map-stage.is-full .bench-tn{font-size:12px;line-height:15px}
.hero .map-stage.is-full .bench-tg{font-size:11px;line-height:14px}
.hero .map-stage.is-full .bench-rec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"id id" "dl acts";gap:8px 16px;align-content:start;min-height:0;overflow:hidden}
.hero .map-stage.is-full .bench-id{grid-area:id;grid-template-columns:44px minmax(0,1fr);gap:10px}
.hero .map-stage.is-full .bench-id .bench-ic{width:44px;height:44px;border-radius:10px}
.hero .map-stage.is-full .bench-name{font-size:18px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero .map-stage.is-full .bench-grade{margin-top:2px;font-size:12px;line-height:16px}
.hero .map-stage.is-full .bench-dl{grid-area:dl;gap:6px}
.hero .map-stage.is-full .bench-dl div{grid-template-columns:none;gap:2px}
.hero .map-stage.is-full .bench-dl dt{font-size:11.5px;line-height:16px}
.hero .map-stage.is-full .bench-dl dd{font-size:13px;line-height:18px;white-space:normal}
.hero .map-stage.is-full .bench-host{max-width:none}
.hero .map-stage.is-full .bench-dl .bench-x{display:grid}
.hero .map-stage.is-full .bench-dl .bench-x dd{display:flex;max-width:none}   /* 띠용 한 줄 규칙(block·알약 자리) 해제 */
.hero .map-stage.is-full .bench-dl .bench-f{display:none}   /* 338px 높이엔 유형 묶음까지 넣으면 값이 잘린다 — 상세 패널에 있다 */
.hero .map-stage.is-full .bench-tags span{display:inline-block;font-size:11.5px;line-height:16px;padding:1px 7px;border:1px solid rgba(195,211,236,.22)}   /* 알약 복원(띠 규칙이 테두리를 지웠다) */
.hero .map-stage.is-full .bench-tags span+span::before{content:none}
.hero .map-stage.is-full .bench-tags .bench-more{border-color:transparent;padding-left:0}
.hero .map-stage.is-full .bench-acts{grid-area:acts;display:flex;flex-direction:column;align-items:flex-start;gap:4px;align-self:start}
.hero .map-stage.is-full .bench-acts .map-link{font-size:13px;min-height:28px}
.hero .map-stage.is-full .bench.is-single{grid-template-rows:24px minmax(0,1fr) 64px}
.hero .map-stage.is-full .bench.is-nohub{grid-template-rows:24px minmax(0,1fr) 0}
.hero .map-stage.is-full .bench.is-nohub .bench-web{display:none}   /* 위 .is-full .bench-web{display:block} 보다 우선해야 접힌다(gpt-6-astra 2026-10-16) */
.hero .map-stage.is-full .bench-web{display:block;min-height:0}
.hero .map-stage.is-full .bench-wk{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hero .map-stage.is-full .bench-lg{display:inline;font-size:11.5px}
.hero .map-stage.is-full .bench-web canvas{height:calc(100% - 28px)!important;flex:none;width:100%}
.hero .map-stage.is-full .map-expand{display:none}
/* 데스크톱(≥900): 531×460 안에 표본 목록(흐름) | 기록 + 서버 그림 */
@media (min-width:900px){
  .bench{height:460px;grid-template-columns:160px minmax(0,1fr);grid-template-rows:28px minmax(0,1fr) 128px;grid-template-areas:"head head" "list rec" "list web";gap:16px;padding:20px}
  .bench-head{line-height:28px}
  .bench-list{display:grid}
  .bench-rec{display:flex;flex-direction:column;gap:10px;overflow:hidden}   /* 넘치면 빼가는 정보(dl)만 줄고 '분석 기록 전체' 버튼은 항상 보인다(Synca: 알약 2줄 + 그림 128px 에서 버튼이 6px 밀려 나갔다, 2026-10-15 실측) */
  .bench-id,.bench-acts{flex:0 0 auto}
  .bench-dl{flex:0 1 auto;min-height:0;overflow:hidden;gap:8px}
  .bench-tags span{padding:1px 7px}
  .bench-web{display:block}
  .bench-dl .bench-f{display:none}   /* 데스크톱 기록 칸(296px)도 유형 묶음까지 넣으면 아래 '분석 기록 전체' 버튼이 잘린다(Synca 실측) — 상세 패널에 있다 */
  .bench-lg{display:block}
  .bench-fig .bench:not(.is-single) .bench-web canvas{top:46px;height:calc(100% - 46px)!important}   /* 범례 줄(16px) 아래부터 — 32점은 세로 10px 간격 6열까지 들어간다(hero-b.js layout) */
  .bench.is-single{grid-template-rows:28px minmax(0,1fr) 64px}   /* 점 하나·줄 하나(심사: 빈 그림이 기록보다 눈에 남는다) — 48~64px */
  .bench.is-nohub{grid-template-rows:28px minmax(0,1fr) 0}
  .hero .bench-fig .map-sel{z-index:6}
}
@media (prefers-reduced-motion:reduce){.bench-tile,.bench-rec{transition:none}}
/* 휴대폰 띠 표본 자동 넘김(hero-b.js 8, 대표 2026-10-28) — 새 표본이 투명에서 0.35초에 떠오른다. 모션 줄이기면 넘김 자체가 없다 */
@media (max-width:899px){.hero .map-stage:not(.is-full) .bench-rec{transition:opacity .35s ease}.hero .map-stage:not(.is-full) .bench.is-rot .bench-rec{opacity:0;transition:none}}
/* 넘김 카운트다운(hero-b.js 8, 대표 2026-10-28 "분석 표본 옆에 숫자 3/2/1 … 원 안에 있는 숫자") — 홈 콘솔 .console-cd 와 같은 어법(원 테두리가 줄어든다·숫자 mono).
   띠(899px 이하·전체 화면 아님)에서만 자리를 갖고, 자리는 늘 잡아 둔 채 보일 때만 불투명 — 숫자가 나타나고 사라질 때 옆 글자가 밀리지 않게. 줄 높이(20~22px)를 넘지 않게 20px, 숫자는 12px 하한. 세로는 middle+top -1px = 글자 중심과 0~0.3px(webkit·chromium 실측; -4px 는 9px 처졌다) */
.bench-cd{display:none}
@media (max-width:899px){
  .hero .map-stage:not(.is-full) .bench-cd{display:inline-grid;place-items:center;position:relative;width:20px;height:20px;margin-left:6px;vertical-align:middle;top:-1px;opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s}
  .hero .map-stage:not(.is-full) .bench-cd.on{opacity:1;transform:none}
  .bench-cd svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
  .bench-cd circle{fill:none;stroke-width:2}
  .bench-cd .cd-trk{stroke:rgba(195,211,236,.18)}
  .bench-cd .cd-arc{stroke:#4D8DFF;stroke-linecap:round}
  .bench-cd b{position:relative;font:700 12px/1 var(--mono);color:#E8F0FC}
}
@media (prefers-reduced-motion:reduce){.bench-cd{display:none!important}}