/* 홈페이지 데이터랩(/data · /data/{도시} · /data/YYYY-MM) 화면 — 2026-11-04 시안(v39, 반응형 15너비 점검)의 CSS 를 .dl 아래로 가둔 것(기존 main.css 와 섞이지 않게). 이 파일이 정본이다. */
/* ── 배치 규칙: 토스증권 홈(11-03 실측) · 상자 꼴: 로파트너 패널 ─────────
   틀 = 본문 1048 + 오른쪽 칸 300, 사이 24. 패널 = 흰 바탕 · 1px #e5e8eb · 둥글기 12 · 그림자 없음.
   패널 안은 상자를 겹치지 않고 선으로만 나눈다. 예외는 '주요 변화' · '왜?' 안내 칸(#f9fafb · 둥글기 12).
   한 화면에 모두 펼친다(탭 안에 숨기지 않음) — 데이터가 빼곡히 보이는 것이 목적.
   상자 꼴 = 로파트너 '바로가기' 패널(QA 실측 11-03): 회색 바탕 #f4f5f7 위 흰 패널 · 1px #e5e7eb · 둥글기 8.
   패널 머리 42 · 제목 16/700 · 아래 선. 선은 모두 패널 끝에서 끝까지(안쪽 여백으로 끊지 않음), 한 종류(1px #eceef1)만.
   줄 이름 14/400, 값만 600. 줄 높이는 목록 · 표 모두 40, 표 머리 36, 지표 줄 52. 칩 32 · 둥글기 8. 간격 12 · 8.
   색 박스(네이버 Npay 포인트 카드 · AI 브리핑 줄 · 광고센터 안내 카드처럼): 흰 패널 사이에 색을 칠한 칸을 섞는다.
     ① 진한 강조 카드 = 사일삼 파랑 채움 · 흰 글자(진단) ② 옅은 파랑 띠 = AI 요약 한 줄 ③ 진한 남색 띠 = 핵심 숫자 다섯 칸
     ④ 옅은 파랑 카드 = 월간 리포트 받기. 색 박스 바탕은 생성한 추상 유리 그림(사일삼 것), 띠 배너 그림은 생성한 3D 물체.
   출처 · 서비스는 공식 아이콘(네이버 블로그 · 카페 · 지식iN · 구글 · 유튜브 · 로톡 · ChatGPT), 공식이 없는 것(웹문서 · 공공기관 · 언론)은 같은 꼴로 생성한 아이콘.
   칸 제목(h4)은 높이 40 · 아래 선이 칸 끝에서 끝까지. 그래프는 남는 높이의 가운데. 출처 종류는 어디서나 같은 색(블로그 초록 · 웹문서 파랑 · 공공 회색 · 카페 주황 · 지식iN 청록).
   상승 #f04452 · 하락 #3182f6, 강조 사일삼 파랑 #2e6bff. */
.dl{--bg:#f2f4f6;--edge:#e5e7eb;--line:#eceef1;--soft:#f9fafb;--chip:#f2f4f6;--t1:#191f28;--t2:#4e5968;--t3:#6b7684;--up:#f04452;--down:#3182f6;--accent:#2e6bff;--accent-soft:#eaf1ff;--bar:#c9d6f5;
  --c0:#2e6bff;--c1:#5fc6f2;--c2:#16a3a3;--c3:#f5a524;--c4:#c4cad3;--ink:#1b2333;--tint:#eef4ff;
  --s-blog:#03c75a;--s-web:#2e6bff;--s-pub:#7d8896;--s-cafe:#ff8a3d;--s-kin:#00b8a9;--s-news:#f04452;--s-video:#ff5a5f;color-scheme:light}
/* 글꼴: 실제 홈페이지는 jsdelivr Pretendard(동적 부분집합)를 쓴다. 시안은 CDN 글꼴이 막혀 같은 글꼴을 파일째 넣는다(OFL). 없으면 맑은 고딕으로 떨어져 네이버보다 투박해 보인다 */
.dl,.dl *{box-sizing:border-box}
.dl [hidden]{display:none!important}
/* 바탕 무늬 = 설문 화면 Watermark 그대로(로고 120×19.5 · 300×140 칸에 두 자리 엇갈림 · -24도 · 불투명 3.5%) */
.dl .mark{position:fixed;inset:0;width:100%;height:100%;opacity:.035;pointer-events:none;z-index:0}
.dl .page,.dl .foot{position:relative;z-index:1}
.dl{margin:0;background:var(--bg);color:var(--t1);letter-spacing:-0.3px;font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;word-break:keep-all}
.dl h1,.dl h2,.dl h3,.dl h4,.dl p,.dl ul,.dl ol{margin:0;padding:0}
.dl ul,.dl ol{list-style:none}
.dl a{color:inherit;text-decoration:none}
.dl button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
.dl .num{font-variant-numeric:tabular-nums}
.dl .up{color:var(--up)}
.dl .down{color:var(--down)}
.dl .flat{color:var(--t3)}
/* 기존 홈페이지 메뉴(413.co.kr 하위 페이지와 같은 자리 · 같은 꼴) — 실제 이식 땐 홈페이지 공용 머리를 그대로 쓴다 */
/* 첫 패널 머리 = 페이지 제목 줄: 왼쪽 h1 · 수집 상태, 오른쪽 지역 고르기 · 수집 방법(따로 머리 칸을 두지 않는다 — 로고 · 제목이 두 번 나오지 않게) */
.dl .pn-head.hub-head{min-height:60px;padding:12px 16px;flex-wrap:wrap;row-gap:10px}
.dl .hub-head h1{font-size:18px;line-height:26px;font-weight:800;letter-spacing:-0.4px;white-space:nowrap}
.dl .hh-l{display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-width:0}
.dl .hh-l>i{width:1px;height:16px;background:var(--edge)}
.dl .hh-r{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
/* 지역 고르기는 페이지의 다른 고르기(키워드 랭킹 칩)와 같은 칩 꼴 — 따로 회색 길을 두지 않는다. 좁은 화면에서는 줄을 바꾸지 않고 가로로 민다 */
.dl .region{display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
.dl .region .chip{display:inline-flex;align-items:center;flex:none}
/* 키워드 검색 칸: 본문 사이 한 줄 패널. 찾은 키워드를 누르면 오른쪽 '키워드 한눈에'에 그 키워드가 뜬다 */
.dl .finder{display:flex;align-items:center;gap:12px;padding:12px 16px;position:relative;z-index:6;border-top:1px solid var(--line)}
.dl .pn.hub{overflow:visible}
.dl .finder label{font-size:15px;font-weight:700;white-space:nowrap}
@media (max-width:560px){.dl .finder label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dl .finder{gap:8px}}
.dl .finder input{flex:1;min-width:0;height:44px;border-radius:10px;border:1px solid var(--edge);background:var(--soft);padding:0 14px;font:inherit;font-size:15px}
.dl .finder input:focus{outline:2px solid var(--accent);outline-offset:-1px;background:#fff}
.dl .q-go{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 18px;border-radius:10px;background:var(--accent);color:#fff;font-size:15px;font-weight:700;flex:none}
.dl .q-go svg{width:18px;height:18px}
.dl .found{position:absolute;left:16px;right:16px;top:calc(100% - 6px);z-index:7;background:#fff;border:1px solid var(--edge);border-radius:10px;box-shadow:0 8px 24px rgba(9,30,66,.12);overflow:hidden}
.dl .found button{display:grid;grid-template-columns:minmax(0,1fr) 90px 96px 24px;gap:12px;align-items:center;width:100%;height:40px;padding:0 14px;text-align:left;font-size:14px;border-top:1px solid var(--line)}
.dl .found button:first-child{border-top:0}
.dl .found button:hover,.dl .found button.on{background:var(--soft)}
.dl .found .tag{justify-self:end}
.dl .found b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .found span{color:var(--t3);font-size:13px;text-align:right}
.dl .found .none{padding:14px;font-size:14px;color:var(--t3)}
.dl .found .go{display:flex;align-items:center;justify-content:center;width:100%;height:44px;border-top:1px solid var(--line);background:var(--accent-soft);color:var(--accent);font-size:14px;font-weight:700}
.dl .page{max-width:1396px;margin:0 auto;padding:16px;display:grid;grid-template-columns:minmax(0,1048px) 300px;gap:16px;justify-content:center;align-items:start}
.dl .main,.dl .rail{display:flex;flex-direction:column;gap:12px;min-width:0}
.dl .rail{position:sticky;top:76px}
.dl .pn{border:1px solid var(--edge);border-radius:8px;background:#fff;min-width:0;overflow:hidden}
.dl .pn-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:8px 16px}
.dl .pn-head>:last-child:not(:first-child){min-width:0}
.dl .pn-head h2{font-size:16px;font-weight:700;white-space:nowrap;flex:none}
.dl .pc-h{display:flex;align-items:center;gap:8px}
.dl .pc{width:28px;height:28px;border-radius:50%;flex:none}
.dl .pn-head .meta{font-size:13px;color:var(--t3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .status{display:flex;gap:16px;align-items:center;font-size:14px;font-weight:500;color:var(--t2);flex-wrap:wrap}
.dl .status span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dl .status b{font-weight:inherit}
.dl .st-x,.dl .st-n{font-style:normal}
.dl .aiband{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 16px;background:#eef4ff url(/assets/images/datalab/bg_tint.webp) right center/cover no-repeat;border-top:1px solid #dfe8ff}
.dl .ab-ic{width:40px;height:40px;border-radius:10px;flex:none}
.dl .ab-t{min-width:0}
.dl .ab-lab{display:block;font-size:12px;font-weight:700;color:var(--accent)}
.dl .ab-t p{font-size:15px;line-height:22px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .ab-t p b{color:var(--accent);white-space:nowrap}
.dl .ab-t .ab-short{display:none}
.dl .ab-meta{margin-left:auto;font-size:13px;color:var(--t2);white-space:nowrap;background:#ffffffb3;border:1px solid #dfe8ff;border-radius:999px;padding:4px 10px}
/* 지표 줄 */
.dl .idx{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.1fr;border-top:1px solid var(--line)}
.dl .idx>div{padding:12px 16px;min-width:0}
.dl .idx>div+div{border-left:1px solid var(--line)}
/* 작은 지표 칸은 줄마다 선 — 열 높이를 세 줄이 똑같이 나눠 갖고 선은 칸 끝에서 끝까지 */
.dl .idx>.minis{padding:0;display:flex;flex-direction:column}
.dl .lab{font-size:13px;font-weight:600;color:var(--t2)}
.dl .bigv{font-size:22px;font-weight:700;margin-top:2px}
.dl .chg{font-size:13px;font-weight:600}
.dl .areabars{display:flex;align-items:flex-end;gap:10px;flex:1;min-height:72px;max-height:96px;margin:10px 0}
.dl .areabars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.dl .areabars i{display:block;width:100%;max-width:28px;border-radius:4px 4px 0 0;background:var(--bar)}
.dl .areabars div.on i{background:var(--accent)}
.dl .areabars span{font-size:12px;color:var(--t3);white-space:nowrap}
/* 큰 칸: 위 = 값 · 막대, 아래 = 조사 시점 두 칸(숫자 칸과 같은 꼴). 두 칸은 큰 칸 바닥에 붙고 선은 칸 끝에서 끝까지 */
.dl #idxMain{display:flex;flex-direction:column}
.dl .pair{display:grid;grid-template-columns:1fr 1fr;margin:auto -16px -12px;border-top:1px solid var(--line)}
.dl .pair>div{padding:10px 16px}
.dl .pair>div+div{border-left:1px solid var(--line)}
.dl .pair span{display:block;font-size:13px;color:var(--t3)}
.dl .pair b{font-size:15px;font-weight:600}
.dl .mini{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;flex:1;min-height:56px;padding:0 16px;cursor:pointer}
.dl .mini+.mini{border-top:1px solid var(--line)}
.dl .mini:hover{background:var(--soft)}
.dl .mini svg{width:56px;height:32px}
.dl .mini .n{font-size:13px;color:var(--t3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .mini .v{font-size:14px;font-weight:600;white-space:nowrap}
.dl .mini.on .n{color:var(--accent);font-weight:700}
.dl .mini.static{cursor:default}
.dl .mini.static:hover{background:none}
.dl .idx>.newsbox{padding:0;display:flex;flex-direction:column}
.dl .nb-head{display:flex;align-items:center;gap:6px;height:36px;padding:0 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--t3)}
.dl .nb-head b{color:var(--t1);font-weight:700}
.dl .nb-item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line)}
.dl .nb-item img{width:72px;height:54px;border-radius:6px;object-fit:cover;display:block}
.dl .nb-item p{font-size:13px;line-height:19px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .nb-item span,.dl .nb-line span{font-size:12px;color:var(--t3);font-weight:400}
.dl .nb-line{display:flex;align-items:center;gap:8px;flex:1;min-height:36px;padding:0 16px;font-size:13px;color:var(--t1)}
.dl .nb-line+.nb-line{border-top:1px solid var(--line)}
.dl .nb-line b{font-weight:400;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 칩 */
.dl .chips{display:flex;gap:6px;flex-wrap:nowrap;align-items:center;overflow-x:auto;scrollbar-width:none;padding:8px 16px;border-top:1px solid var(--line)}
.dl .chips>*{flex:none}
.dl .chips .t{font-size:16px;font-weight:700;margin-right:8px}
.dl .chip{height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--t2);background:#fff}
.dl .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.dl .chips .bar{width:1px;height:20px;background:var(--line);margin:0 4px}
/* 표 */
.dl .scroll{overflow-x:auto}
.dl .tbl .c-no{width:52px}
.dl .tbl .c-kw{width:190px}
.dl .tbl{width:100%;min-width:940px;border-collapse:collapse;table-layout:fixed;font-size:14px}
.dl .tbl th{height:36px;font-size:13px;font-weight:500;color:var(--t3);text-align:right;padding:0 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap;background:#fff}
.dl .tbl td{height:40px;padding:0 10px;text-align:right;font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .tbl th:first-child,.dl .tbl td:first-child{text-align:center;padding-left:16px;color:var(--t3);font-weight:500}
.dl .tbl .l{text-align:left}
.dl .tbl td.l{font-weight:400;color:var(--t1)}
.dl .tbl .c{text-align:center}
.dl .tbl tbody tr{cursor:pointer}
.dl .tbl tbody tr:hover td,.dl .tbl tbody tr.on td{background:var(--soft)}
.dl .tbl td.dim{color:var(--t3);font-weight:400}
.dl .tag{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;padding:0 6px;border-radius:4px;font-size:12px;font-weight:500;color:var(--t3)}
.dl .ic{width:16px;height:16px;border-radius:4px;flex:none;vertical-align:-3px}
.dl .sic{width:18px;height:18px;border-radius:5px;display:block}
.dl .sd{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:700;color:#fff;background:var(--k)}
.dl .sd.none{background:transparent;color:var(--t3);font-weight:500}
.dl .legend .lg-i{display:flex;gap:12px}
.dl .legend .lg-l{font-weight:inherit}
.dl .lg{display:inline-flex;align-items:center;gap:4px}
.dl .legend-row{display:none}
.dl .legend{display:flex;gap:12px;align-items:center;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;white-space:nowrap;font-size:13px;color:var(--t3)}
.dl .legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;background:var(--k)}
.dl .tag.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.dl .src-note{padding:8px 16px;font-size:12px;color:var(--t3);border-top:1px solid var(--line)}
.dl .more{display:flex;align-items:center;justify-content:center;width:100%;height:40px;border-top:1px solid var(--line);font-size:14px;font-weight:600;color:var(--t2)}
/* 4열 순위 */
.dl .r4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.dl .r4>section{min-width:0}
.dl .r4>section+section{border-left:1px solid var(--line)}
.dl .r4 h3{font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 16px;border-bottom:1px solid var(--line)}
.dl .r4 h3 span{font-size:13px;color:var(--t3);font-weight:500}
.dl .r4 li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;height:40px;padding:0 16px}
.dl .r4 li+li{border-top:1px solid var(--line)}
.dl .r4 .no{font-size:13px;color:var(--t3);font-weight:600;text-align:center}
.dl .r4 .k b{display:block;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .r4 .k{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dl .r4 .k b{min-width:0}
.dl .r4 .k span{font-size:13px;color:var(--t3);white-space:nowrap}
/* 3열 · 막대 */
.dl .c3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.dl .c3>section{padding:0 16px 12px;min-width:0;display:flex;flex-direction:column}
.dl .c3>section+section{border-left:1px solid var(--line)}
.dl .c3 h4{font-size:13px;font-weight:600;color:var(--t2);display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;margin:0 -16px 12px;padding:0 16px;border-bottom:1px solid var(--line)}
.dl .c3 h4 .ic{margin-right:6px}
.dl .c3 h4>em{display:inline-flex;align-items:center;font-style:normal}
.dl .c3 h4+.cells{border-top:0;margin-top:-12px}
.dl .c3 .cells{flex:1;grid-auto-rows:1fr}
.dl .c3 .cells div{justify-content:center}
.dl .c3 h4 span{color:var(--t3);font-weight:500}
.dl .hb{display:grid;grid-template-columns:128px minmax(0,1fr) 52px;gap:8px;align-items:center;height:32px;font-size:14px}
.dl .hb>span:first-child{display:flex;align-items:center;gap:6px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .track{height:6px;border-radius:3px;background:var(--chip);overflow:hidden}
.dl .track i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.dl .track i.sky{background:var(--c1)}
.dl .track i[style*="--k"]{background:var(--k)}
.dl .hb b{text-align:right;font-weight:600}
/* 숫자 칸 = 같은 폭 3열, 칸마다 선으로 나눔(Npay '시장 현황' 꼴). 선은 칸이 든 구역 끝에서 끝까지 — 구역 좌우 여백 16 · 아래 12 만큼 밖으로 편다 */
.dl .cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 -16px -12px;border-top:1px solid var(--line)}
.dl .cells div{display:flex;flex-direction:column;gap:2px;padding:10px 16px;min-width:0}
.dl .cells div:not(:nth-child(3n+1)){border-left:1px solid var(--line)}
.dl .cells div:nth-child(n+4){border-top:1px solid var(--line)}
.dl .cells span{font-size:13px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .cells b{font-size:15px;font-weight:600}
.dl .cols{display:grid;grid-template-columns:repeat(4,1fr);align-items:end;height:150px;gap:8px;margin-block:auto}
.dl .cols div{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;min-width:0}
.dl .cols i{display:block;width:26px;border-radius:4px 4px 0 0;background:var(--bar)}
.dl .cols div:first-child i{background:var(--accent)}
.dl .cols b{font-weight:600}
.dl .cols span{color:var(--t3);white-space:nowrap}
.dl .stack{display:flex;gap:2px;height:8px;border-radius:4px;overflow:hidden;margin:4px 0 10px}
.dl .stack i{display:block;height:100%}
.dl .c0{background:var(--c0)}
.dl .c1{background:var(--c1)}
.dl .c2{background:var(--c2)}
.dl .c3c{background:var(--c3)}
.dl .c4{background:var(--c4)}
.dl .leg li{display:flex;align-items:center;gap:8px;height:28px;font-size:13px;color:var(--t2)}
.dl .leg li+li{border-top:1px solid var(--line)}
.dl .leg i{width:8px;height:8px;border-radius:2px;flex:none}
.dl .leg b{margin-left:auto;color:var(--t1);font-weight:600}
.dl .big{font-size:22px;font-weight:700}
.dl .desc{font-size:13px;color:var(--t3);margin-top:2px}
/* ChatGPT */
.dl .heat{width:100%;min-width:700px;border-collapse:collapse;font-size:13px;table-layout:fixed}
.dl .heat thead th{height:36px;font-weight:600;color:var(--t3);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dl .heat td,.dl .heat tbody th{height:52px;text-align:center;font-weight:600}
.dl .heat tbody th{text-align:left;padding-left:16px;white-space:nowrap;font-weight:400}
.dl .heat tbody tr+tr td,.dl .heat tbody tr+tr th{border-top:1px solid var(--line)}
.dl .heat span{display:inline-grid;place-items:center;width:38px;height:24px;border-radius:6px;background:rgba(46,107,255,var(--h))}
.dl .heat small{display:block;font-size:12px;color:var(--t3);font-weight:500;margin-top:4px}
.dl .band{display:grid;grid-template-columns:150px 120px minmax(0,1fr) auto;align-items:center;gap:20px;height:96px;padding:0 24px;border-radius:8px;overflow:hidden;background:#0c0d12;color:#fff}
.dl .band .bn{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700}
.dl .band .bn img{width:104px;height:auto;display:block}
.dl .band .bn b{color:#7fa6ff}
.dl .band img{width:124px;height:96px;object-fit:cover;display:block}
.dl .band h3{font-size:26px;line-height:32px;font-weight:800;letter-spacing:-0.8px;display:flex;align-items:center;gap:16px;min-width:0}
.dl .band .bt-x,.dl .band .bt-s{font-style:normal}
.dl .band .bt-s{display:none}
.dl .band h3 small{display:flex;flex-direction:column;font-size:14px;line-height:18px;font-weight:700;letter-spacing:-0.3px}
.dl .band h3 small em{font-style:normal;color:#ff6b6b}
.dl .band a{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:999px;background:#f04452;color:#fff;font-size:15px;font-weight:700;white-space:nowrap}
.dl .pages-wrap{background:#182033;color:#fff;display:grid;grid-template-columns:minmax(0,1fr) 140px}
.dl .pw-art{width:140px;height:100%;object-fit:cover;display:block}
.dl .pw-main{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:16px}
.dl .pages-wrap h3{font-size:14px;font-weight:700}
/* 다섯 칸 = 반투명 유리 상자(같은 폭 · 같은 높이), 안은 이름 · 숫자 · 비율 막대가 위아래 가운데 */
.dl .pages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.dl .pages div{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:84px;padding:12px 14px;border-radius:10px;background:#ffffff12;border:1px solid #ffffff24}
.dl .pages span{display:block;font-size:13px;color:#d3dae6}
.dl .pages b{font-size:22px;line-height:26px;font-weight:700;color:#fff}
.dl .pages i{display:block;height:4px;border-radius:2px;background:#ffffff26;overflow:hidden}
.dl .pages i::before{content:'';display:block;height:100%;width:var(--p);border-radius:2px;background:#7fa6ff}
.dl .note{padding:10px 16px 12px;font-size:13px;color:var(--t3);border-top:1px solid var(--line)}
.dl .cite-in{padding:16px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:12px}
.dl .cite-card{background:#0a2a9d url(/assets/images/datalab/bg_blue.webp) right 62%/cover no-repeat;color:#fff;border-radius:10px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.dl .cite-lab{font-size:13px;font-weight:700;color:#fff}
.dl .cite-card blockquote{margin:0;font-size:16px;line-height:26px;color:#fff;overflow-wrap:anywhere;word-break:keep-all}
.dl .cite-card blockquote b{font-weight:700;white-space:nowrap}
.dl .cite-card blockquote span{color:#fff;text-decoration:underline;text-underline-offset:3px;display:inline-block;max-width:100%;overflow-wrap:anywhere}
.dl .cite-act{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.22)}
.dl .cite-act p{font-size:13px;line-height:20px;color:#fff;word-break:keep-all;min-width:0}
.dl .cite-copy{height:36px;padding:0 16px;border-radius:8px;background:#fff;color:#0a2a9d;font-size:14px;font-weight:700;border:0;flex:none;cursor:pointer}
.dl .cite-facts{display:flex;flex-direction:column;gap:8px;margin:0}
.dl .cite-facts div{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:0 16px;min-height:52px}
.dl .cite-facts dt{font-size:13px;color:var(--t2)}
.dl .cite-facts dd{margin:0;font-size:14px;font-weight:700;color:var(--t1);white-space:nowrap}
.dl .cite-ask{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px 12px 12px 20px}
.dl .cite-ask p{font-size:14px;color:var(--t1);word-break:keep-all;min-width:0}
.dl .cite-ask p small{display:block;font-size:13px;color:var(--t2);margin-top:2px}
.dl .cite-kakao{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:8px;background:#fee500;color:#191919;font-size:14px;font-weight:700;flex:none;white-space:nowrap}
.dl .cite-kakao svg{width:18px;height:18px}
.dl .cite-eds{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;padding-top:4px}
.dl .cite-eds-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dl .cite-eds-h h3{font-size:15px;font-weight:700;color:var(--t1)}
.dl .cite-eds-h span{font-size:13px;color:var(--t2)}
.dl .eds{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 20px)/3);gap:10px;overflow-x:auto;scrollbar-width:none;list-style:none;margin:0;padding:0}
.dl .eds a,.dl .eds .soon{display:flex;flex-direction:column;height:100%;border-radius:10px;min-width:0;overflow:hidden;background:#fff;border:1px solid var(--edge)}
.dl .eds a:hover{border-color:#c9d3e3}
.dl .ed-t{display:flex;align-items:center;justify-content:space-between;gap:8px;height:44px;padding:0 16px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:15px;font-weight:700;color:var(--t1)}
.dl .ed-t em{font-style:normal;font-size:12px;font-weight:700;color:#fff;background:var(--accent);border-radius:5px;padding:2px 7px}
.dl .ed-n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));flex:1}
.dl .ed-n>span{padding:10px 8px 12px 14px;font-size:12px;color:var(--t2);white-space:nowrap;min-width:0}
.dl .ed-n>span+span{border-left:1px solid var(--line)}
.dl .ed-n b{display:block;margin-top:4px;font-size:16px;font-weight:700;color:var(--t1)}
.dl .ed-u{display:flex;align-items:center;height:36px;padding:0 16px;border-top:1px solid var(--line);font-size:12px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .eds .soon{background:var(--soft);border-style:dashed}
.dl .soon .ed-t{color:var(--t2)}
.dl .soon .ed-u{color:var(--t3)}
.dl .soon p{flex:1;display:flex;align-items:center;padding:0 16px;font-size:13px;color:var(--t2)}
@media (max-width:720px){.dl .cite-in{grid-template-columns:minmax(0,1fr)}
.dl .eds{grid-auto-columns:82%}
.dl .cite-eds-h{flex-direction:column;gap:2px}
.dl .cite-act,.dl .cite-ask{flex-direction:column;align-items:stretch}
.dl .cite-copy,.dl .cite-kakao{justify-content:center}}
/* 약관 꼴 질문 · 답: 페이지 맨 아래 작은 회색 글, 상자 없이 두 단. 사람보다 AI 가 읽는 자리 — 서버가 미리 그린 글 + FAQPage 구조화 데이터 */
.dl .fine{max-width:1396px;margin:24px auto 0;padding:20px 16px 0;border-top:1px solid var(--edge);position:relative;z-index:1}
.dl .fine h2{font-size:13px;font-weight:700;color:var(--t2);margin-bottom:10px}
.dl .fine dl{columns:2;column-gap:32px;margin:0}
.dl .fine dt{font-size:12px;font-weight:700;color:var(--t2);margin-top:10px;break-after:avoid}
.dl .fine dd{margin:2px 0 0;font-size:12px;line-height:19px;color:var(--t3);break-inside:avoid}
/* 오른쪽 칸 */
.dl .lead-card{background:#15339a url(/assets/images/datalab/bg_blue_tall.webp) center/cover no-repeat;border-color:#15339a;color:#fff;padding:20px 16px 16px}
/* 색 박스 입자: 화면 크기 그대로 고운 노이즈를 한 겹 — 그림을 줄여도 입자가 뭉개지지 않게(네이버 바탕 그림 꼴) */
.dl .lead-card,.dl .report,.dl .pages-wrap,.dl .band{position:relative;isolation:isolate}
.dl .lead-card::after,.dl .report::after,.dl .pages-wrap::after,.dl .band::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.16;mix-blend-mode:overlay}
.dl .lead-card>*,.dl .report>*,.dl .pages-wrap>*,.dl .band>*{position:relative}
.dl .lead-card .eb{font-size:13px;font-weight:600;color:#dce7ff}
.dl .lead-card h2{font-size:20px;line-height:28px;font-weight:700;margin:4px 0 8px}
.dl .lead-card p{font-size:13px;line-height:20px;color:#eef3ff;margin-bottom:12px}
.dl .lead-card input{width:100%;height:40px;border-radius:8px;border:0;padding:0 12px;font:inherit;font-size:13px;margin-bottom:8px;background:#fff}
.dl .lead-card button{width:100%;height:40px;border-radius:8px;background:var(--ink);color:#fff;font-weight:600}
.dl .report{background:#0a2a9d url(/assets/images/datalab/bg_blue.webp) right 62%/auto 340% no-repeat;border-color:#0a2a9d;color:#fff;padding:14px 16px;display:flex;align-items:center;gap:12px}
.dl .report b{display:block;font-size:14px;font-weight:700}
.dl .report span{display:block;font-size:13px;color:#e3ebff;margin-top:2px}
.dl .report a{margin-left:auto;height:32px;display:inline-flex;align-items:center;padding:0 10px;border-radius:8px;background:#fff;color:var(--accent);font-size:13px;font-weight:700;white-space:nowrap}
.dl .detail{border-top:1px solid var(--line);animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
.dl .roll{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--t3)}
.dl .roll b{font-weight:500;min-width:44px;text-align:center}
.dl .roll button{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);color:var(--t2);line-height:20px}
.dl .detail .dh{padding:12px 16px;height:64px}
.dl .detail h3{font-size:15px;line-height:22px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .detail .dv{font-size:13px;line-height:18px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 롤링 카드는 키워드가 바뀌어도 크기가 같다: 출처 줄은 4칸 고정(빈 칸도 자리 차지), 설명은 3줄 고정 · 넘치면 말줄임 */
.dl .detail .slots{height:128px}
.dl .detail .slots .hb{height:32px}
.dl .detail .slots .empty{height:128px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 12px;background:var(--soft);border-radius:8px;text-align:center}
.dl .detail .slots .empty img{width:52px;height:52px;margin-bottom:2px}
.dl .detail .slots .empty b{font-size:13px;font-weight:600;color:var(--t2)}
.dl .detail .slots .empty span{font-size:12px;color:var(--t3)}
.dl .dsec{padding:0 16px 12px;border-top:1px solid var(--line)}
/* 칸 제목은 어디서나 같은 꼴(.c3 h4 와 같은 값): 높이 40 · 글자 세로 가운데 · 아래 선 끝에서 끝까지 */
.dl .dsec h4{font-size:13px;font-weight:600;color:var(--t2);display:flex;align-items:center;height:40px;margin:0 -16px 12px;padding:0 16px;border-bottom:1px solid var(--line)}
.dl .dsec h4+.cells{border-top:0;margin-top:-12px}
.dl .why{background:var(--soft);border-top:1px solid var(--line);padding:12px 16px;font-size:13px;line-height:20px;color:var(--t2);height:84px}
.dl .why span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dl .why b{color:var(--t1)}
.dl .empty{font-size:13px;color:var(--t3);padding:4px 0}
.dl .rank li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;height:40px;padding:0 16px;border-top:1px solid var(--line)}
.dl .rank .no{font-size:13px;color:var(--t3);font-weight:600;text-align:center}
.dl .rank .k b{display:block;font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .rank .k{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dl .rank .k b{min-width:0}
.dl .rank .k span{font-size:13px;color:var(--t3);white-space:nowrap}
/* 칼럼 칸: 그림 없이 글줄만 — 한 열 5줄(제목이 잘리지 않게), 줄마다 분류(고정 폭) · 제목(한 줄 말줄임) · 날짜(오른쪽), 선은 칸 끝에서 끝까지 */
.dl .cl{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.dl .cl-row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:12px;align-items:center;height:44px;padding:0 16px;min-width:0;border-bottom:1px solid var(--line)}
.dl .cl-row:last-child{border-bottom:0}
@media (max-width:560px){.dl .cl-row{grid-template-columns:96px minmax(0,1fr) auto;gap:10px}
.dl .cl-cat{font-size:11px}}
.dl .cl-row b{font-size:14px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .cl-row:hover b{text-decoration:underline}
.dl .cl-cat{font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .cl-d{font-size:12px;color:var(--t3)}
.dl .dlg{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(17,24,39,.36);backdrop-filter:blur(4px)}
.dl .dlg-box{width:min(420px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:16px;padding:24px 24px 20px}
.dl .dlg-top{text-align:center}
.dl .dlg-box img.face{width:64px;height:64px;border-radius:50%;display:block;margin:0 auto 12px}
.dl .dlg-top h3{font-size:19px;line-height:27px;font-weight:800}
.dl .dlg-top p{font-size:15px;line-height:23px;color:var(--t2);margin-top:6px}
.dl .dx-addr{display:block;margin-top:18px}
.dl .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dl .dx-addr input{width:100%;height:48px;border-radius:10px;border:1px solid var(--edge);padding:0 14px;font:inherit;font-size:15px}
.dl .dx-addr input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.dl .dx-addr input.bad{border-color:var(--up)}
.dl .dx-note{font-size:13px;color:var(--t3);margin-top:8px;text-align:center}
.dl .dx-note.bad{color:var(--up);font-weight:600}
.dl .dlg-btns{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;margin-top:16px}
.dl .dlg-btns>*{display:flex;align-items:center;justify-content:center;height:46px;border-radius:10px;font-size:15px;font-weight:700}
.dl .dlg-btns .no{background:var(--chip);color:var(--t2)}
.dl .dlg-btns .yes{background:var(--accent);color:#fff}
.dl .foot{max-width:1396px;margin:8px auto 40px;padding:0 16px;font-size:13px;color:var(--t3)}
@media (max-width:1400px){.dl .page{grid-template-columns:minmax(0,1fr)}
.dl .rail{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 오른쪽 칸이 아래로 내려온 2칸 배치: 진단 카드 | 리포트, 키워드 한눈에 | 많이 찾는 키워드 — 짝끼리 높이를 맞추고 늘어난 칸은 내용으로 채운다(빈 상자 금지) */
@media (max-width:1400px) and (min-width:861px){.dl .rail{grid-template-areas:"lead report" "roll rank"}
.dl .rail>:nth-child(1){grid-area:lead}
.dl .rail>:nth-child(2){grid-area:roll}
.dl .rail>:nth-child(3){grid-area:report}
.dl .rail>:nth-child(4){grid-area:rank;display:flex;flex-direction:column}
.dl .rail>:nth-child(4) .rank{flex:1;display:flex;flex-direction:column}
.dl .rail>:nth-child(4) .rank li{flex:1;height:auto;min-height:40px}
.dl .report{flex-direction:column;align-items:flex-start;justify-content:space-between;padding:20px 16px 16px}
.dl .report a{margin-left:0}}
/* 좁은 화면: 범례 아이콘은 머리 줄 아래 따로 한 줄(5칸 같은 폭) — 머리 줄에서 잘리지 않게 */
@media (max-width:760px){.dl .legend .lg-i{display:none}
.dl .legend-row{display:flex;justify-content:center;gap:16px;align-items:center;height:36px;padding:0 16px;border-top:1px solid var(--line);font-size:12px;color:var(--t3)}
.dl .legend-row .lg{white-space:nowrap}}
@media (max-width:480px){.dl .status{flex-wrap:nowrap;gap:12px;font-size:12px}
.dl .st-x{display:none}}
@media (max-width:400px){.dl .tbl .c-no{width:40px}
.dl .tbl .c-kw{width:128px}
.dl .tbl th:first-child,.dl .tbl td:first-child{padding-left:12px}
.dl .st-n{display:none}
.dl .status{gap:14px}
.dl .cells div{padding:10px 10px}
.dl .cells span{font-size:12px}
.dl .eds{grid-auto-columns:100%}}
/* 제목 줄이 한 줄에 다 들어가지 않는 너비: 제목 / 수집 상태 / 지역 칩을 같은 간격 세 줄로(가운데 세로선은 빼 — 혼자 남지 않게) */
@media (max-width:720px){.dl .pn-head.hub-head,.dl .hh-l{flex-direction:column;align-items:flex-start;gap:10px}
.dl .hh-l>i{display:none}}
@media (max-width:1024px) and (min-width:561px){.dl .cells span{font-size:12px}
.dl .eds{grid-auto-columns:calc((100% - 10px)/2)}
.dl .idx,.dl .r4{grid-template-columns:repeat(2,minmax(0,1fr))}
.dl .idx>div:nth-child(3),.dl .r4>section:nth-child(3){border-left:0}
.dl .idx>div:nth-child(n+3),.dl .r4>section:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:860px){.dl .fine dl{columns:1}
.dl .pages-wrap{grid-template-columns:minmax(0,1fr)}
.dl .pw-art{display:none}
.dl .ab-meta{display:none}
.dl .ab-t .ab-long{display:none}
.dl .ab-t .ab-short{display:block}
.dl .idx{grid-template-columns:repeat(2,minmax(0,1fr))}
.dl .idx>div:nth-child(3){border-left:0}
.dl .idx>div:nth-child(n+3){border-top:1px solid var(--line)}
.dl .r4{grid-template-columns:repeat(2,minmax(0,1fr))}
.dl .r4>section:nth-child(3){border-left:0}
.dl .r4>section:nth-child(n+3){border-top:1px solid var(--line)}
.dl .c3{grid-template-columns:minmax(0,1fr)}
.dl .c3>section+section{border-left:0;border-top:1px solid var(--line)}
.dl .pages{grid-template-columns:repeat(5,minmax(0,1fr))}
.dl .rail{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.dl .idx,.dl .r4{grid-template-columns:minmax(0,1fr)}
.dl .idx>div+div,.dl .r4>section+section{border-left:0;border-top:1px solid var(--line)}
.dl .page{padding:12px 16px}
.dl .status{gap:4px 12px;font-size:13px}}
@media (max-width:700px){.dl .pages{grid-template-columns:repeat(2,minmax(0,1fr))}
.dl .pages>:first-child{grid-column:1/-1}}
/* 배너가 한 줄(로고 · 그림 · 제목 · 단추)에 다 들어가지 않는 너비: [제목 · 설명 · 단추 | 그림] */
@media (max-width:1100px){.dl .band{grid-template-columns:minmax(0,1fr) 128px;grid-template-areas:"t i" "s i" "a i";height:auto;padding:18px 16px 16px;gap:10px 14px}
.dl .band .bn{display:none}
.dl .band>img{grid-area:i;width:128px;height:128px;border-radius:8px;align-self:center}
.dl .band h3{display:contents}
.dl .band .bt{grid-area:t;font-size:20px;line-height:26px;white-space:nowrap}
.dl .band h3 small{grid-area:s;font-size:13px;align-self:start}
.dl .band>span:last-child{grid-area:a;align-self:end}
.dl .band a{height:40px;padding:0 16px;font-size:14px}}
@media (max-width:560px){.dl .band .bt-x{display:none}
.dl .band .bt-s{display:inline}}
/* 아주 좁은 화면: 제목은 한 줄 전체 폭, 그림은 아래 오른쪽(위 860 규칙보다 뒤에 둬야 먹는다) */
@media (max-width:480px){.dl .band{grid-template-columns:minmax(0,1fr) 96px;grid-template-areas:"t t" "s i" "a i"}
.dl .band>img{width:96px;height:96px;align-self:end}}
@media (max-width:360px){.dl .legend-row{gap:10px}
.dl .band{grid-template-columns:minmax(0,1fr) 80px}
.dl .band>img{width:80px;height:80px}
.dl .band h3 small{font-size:12px}}
/* 도시 페이지만의 칸: 구글 서울 비교 · ChatGPT 도시 칸 · 키워드 표(서버가 그린 표 그대로) */
.dl .city-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}.dl .city-g>.wide{grid-column:1/-1}
.dl .city-g>section{padding:0 16px 12px;min-width:0;display:flex;flex-direction:column}
.dl .city-g>section+section{border-left:1px solid var(--line)}
.dl .city-g h4{font-size:13px;font-weight:600;color:var(--t2);display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;margin:0 -16px 12px;padding:0 16px;border-bottom:1px solid var(--line)}
.dl .city-g .big{font-size:28px;font-weight:800}
.dl .city-g p{font-size:13px;color:var(--t3);line-height:20px}
.dl .cells.city-cells{margin:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.dl .cells.city-cells div{border-top:0;border-left:1px solid var(--line)}
.dl .cells.city-cells div:first-child{border-left:0}
.dl .tbl .c-g1{width:150px}
@media (max-width:760px){.dl .cells.city-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
.dl .cells.city-cells div:nth-child(odd){border-left:0}
.dl .cells.city-cells div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (min-width:701px){.dl .pages{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:400px){.dl .pages{grid-template-columns:minmax(0,1fr)}
.dl .pages>:first-child{grid-column:auto}}
@media (max-width:860px){.dl .city-g{grid-template-columns:minmax(0,1fr)}
.dl .city-g>section+section{border-left:0;border-top:1px solid var(--line)}}