@charset "utf-8";
/* ============================================================
   A. 데이터형 — 파일픽
   Design System: Lovable  (A_designSystem_Lovable.md)

   핵심 규칙
   - 페이지 배경은 순백이 아닌 크림 #f7f4ed. 카드도 같은 크림 → 테두리로 구분
   - 모든 회색은 #1c1c1c 의 투명도 변주로만 생성 (색상 통일)
   - 그림자로 카드를 띄우지 않는다. #eceae4 테두리가 컨테인먼트 장치
   - 채도 높은 액센트 금지. 포인트는 크림과 같은 웜 축의 저채도 테라코타
     #b4441f 한 색만, 의미가 있는 지점(1위·변동·노제휴·주 CTA)에만 사용
   - 웨이트는 400 / 600 두 단계만. 700 사용 금지
   - 다크 버튼의 멀티 레이어 인셋 섀도가 시스템의 시그니처
   - 풀 필(9999px)은 아이콘·액션 필에만. 사각 버튼은 6px
   ============================================================ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* 앵커 이동 시 스티키 헤더가 대상 제목을 덮지 않게 한다.
   페이지 간 이동 · 같은 페이지 클릭 · 뒤로가기 모두 여기서 처리된다. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dd,table{margin:0;padding:0}
/* [hidden]{display:none} 은 UA 스타일이라 author 의 display 선언에 무조건 진다.
   .dl-art{display:flex} 하나로 hidden 속성이 통째로 무력해지므로 여기서 못 박는다. */
[hidden]{display:none!important}
ul,ol{list-style:none}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
th{text-align:left;font-weight:600}

/* ---------- tokens ---------- */
:root{
  /* Primary */
  --cream:#f7f4ed;
  --charcoal:#1c1c1c;
  --offwhite:#fcfbf8;

  /* Neutral scale — 전부 #1c1c1c 의 투명도 변주 */
  --ink-83:rgba(28,28,28,.83);
  --ink-82:rgba(28,28,28,.82);
  --muted:#5f5f5d;
  --ink-40:rgba(28,28,28,.4);
  --ink-12:rgba(28,28,28,.12);
  --ink-04:rgba(28,28,28,.04);
  --ink-03:rgba(28,28,28,.03);

  /* Surface & Border */
  --line:#eceae4;

  /* Accent — 기능색. 크림과 같은 웜 축의 저채도 테라코타.
     1위 · 변동 · 노제휴 · 주 CTA 에만 쓰고 장식으로는 쓰지 않는다. */
  --accent:#b4441f;
  --accent-hover:#9c3a19;
  --accent-weak:rgba(180,68,31,.07);
  --accent-line:rgba(180,68,31,.3);

  /* Interactive */
  --ring:rgba(59,130,246,.5);
  --focus-shadow:rgba(0,0,0,.1) 0 4px 12px;
  --inset:rgba(255,255,255,.2) 0 .5px 0 0 inset,
          rgba(0,0,0,.2) 0 0 0 .5px inset,
          rgba(0,0,0,.05) 0 1px 2px 0;

  /* Radius */
  --r-micro:4px;
  --r-std:6px;
  --r-comfy:8px;
  --r-card:12px;
  --r-container:16px;
  --r-pill:9999px;

  /* Spacing — 8px base, 상단이 크게 벌어지는 스케일 */
  --s-1:8px;  --s-2:12px; --s-3:16px; --s-4:24px;
  --s-5:32px; --s-6:40px; --s-7:56px; --s-8:80px; --s-9:96px;

  /* Type */
  --t-display:60px;
  --t-section:48px;
  --t-sub:36px;
  --t-card:20px;
  --t-lead:18px;
  --t-body:16px;
  --t-cap:14px;

  --measure:44rem;
  --max:1200px;
  --gut:var(--s-4);
}

/* ---------- 포인트 서체 ---------- */
/* 여기어때 잘난체 — 지적재산권 ㈜위드이노베이션 (제공 ㈜여기어때컴퍼니)

   개인·기업 모두 상업적 사용 무료. 배포된 파일 그대로 써야 하며 글꼴 자체를
   팔거나 수정·개작해 재배포하는 것은 금지. 출처 표기는 의무가 아니라 권장이라
   화면 푸터에서 빼고 여기로 옮겼다 (2026-08-21). 조건 전문은 font/LICENSE.txt.
   라이선스 안내: https://gccompany.co.kr/font

   _verify/subset_fonts.py 로 사용 문자만 남긴 서브셋 (551KB → 42KB).
   본문 문구를 바꾸면 서브셋을 다시 만들어야 한다. */
@font-face{
  font-family:"Jalnan";
  src:url("../font/Jalnan.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* ---------- base ---------- */
body{
  /* Camera Plain Variable 은 비공개 폰트 → 문서의 fallback 체인을 따르되
     한글은 Pretendard 가 받는다. 휴머니스트 톤은 letter-spacing 으로 보완. */
  font-family:"Pretendard Variable","Pretendard","Apple SD Gothic Neo",
    ui-sans-serif,system-ui,"Malgun Gothic","맑은 고딕",-apple-system,sans-serif;
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.5;
  color:var(--ink-82);
  background:var(--cream);
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
.dl-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
/* 스크린리더 전용. table 에 직접 걸면 min-content 폭 때문에 클리핑이 안 되므로
   반드시 div 로 감싸서 사용한다. */
/* 스크린리더 전용. 폭이 min-content 로 고정되는 table 은 여기에 직접 넣지 않는다
   (1px 컨테이너를 밀어내 문서에 가로 스크롤이 생긴다). 텍스트로 서술할 것. */
.dl-sr{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}

/* 링크 — 색 변화 없이 밑줄이 인터랙션 신호 */
.dl-a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--accent-line)}
.dl-a:hover{text-decoration-color:var(--accent)}

/* ---------- header ---------- */
.dl-header{background:var(--cream);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50}
.dl-header__inner{max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--s-3)}

/* 브랜드명 — 잘난체. 단일 웨이트(400)라 600 을 지정하면 합성 굵게가 걸린다. */
.dl-logo{display:flex;align-items:center;gap:10px;font-size:var(--t-body);font-weight:400;
  font-family:"Jalnan","Pretendard Variable","Pretendard",sans-serif;
  color:var(--charcoal);letter-spacing:0;flex:none}
.dl-logo__mark{width:34px;height:34px;border-radius:var(--r-comfy);display:block;flex:none}

.dl-gnb{display:flex;gap:var(--s-1)}
.dl-gnb__link{display:block;padding:var(--s-1) var(--s-2);font-size:var(--t-cap);
  font-weight:400;color:var(--charcoal);border-radius:var(--r-std);white-space:nowrap}
.dl-gnb__link:hover{background:var(--ink-04)}
.dl-gnb__link[aria-current="page"]{color:var(--accent);font-weight:600}

.dl-navtoggle{display:none;width:40px;height:40px;border-radius:var(--r-std);
  border:1px solid var(--ink-40);align-items:center;justify-content:center}
.dl-navtoggle:active{opacity:.8}
.dl-navtoggle__bar,.dl-navtoggle__bar::before,.dl-navtoggle__bar::after{
  display:block;width:16px;height:1.5px;background:var(--charcoal);border-radius:2px}
.dl-navtoggle__bar{position:relative}
.dl-navtoggle__bar::before,.dl-navtoggle__bar::after{content:"";position:absolute;left:0}
.dl-navtoggle__bar::before{top:-5px}
.dl-navtoggle__bar::after{top:5px}

/* ---------- layout ---------- */
.dl-main{padding:var(--s-7) 0 var(--s-8)}
.dl-section{margin-bottom:var(--s-8)}
.dl-section:last-child{margin-bottom:0}
.dl-section--tint{background:var(--accent-weak);border:1px solid var(--accent-line);
  border-radius:var(--r-container);padding:var(--s-6)}

.dl-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-6);
  align-items:start}
.dl-cols > *{min-width:0}
.dl-table{min-width:0}

/* 카드/패널 — 배경은 페이지와 동일한 크림, 테두리로만 구분 */
.dl-panel{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-card)}
.dl-panel__body{padding:var(--s-4)}

/* ---------- typography ---------- */
.dl-pagehead{margin-bottom:var(--s-5)}
.dl-breadcrumb{font-size:var(--t-cap);color:var(--muted);margin-bottom:var(--s-2)}
.dl-breadcrumb a:hover{text-decoration:underline}
.dl-breadcrumb__sep{margin:0 8px;color:var(--ink-40)}

/* 잘난체는 획이 굵어 자체로 무게를 갖는다. weight 는 400 으로 두고
   letter-spacing 을 본문 규칙보다 덜 조인다. */
.dl-h1{font-size:var(--t-section);line-height:1.12;font-weight:400;color:var(--charcoal);
  font-family:"Jalnan","Pretendard Variable","Pretendard",sans-serif;
  letter-spacing:-.4px;max-width:20ch;text-wrap:balance}
.dl-h2{font-size:var(--t-sub);line-height:1.1;font-weight:600;color:var(--charcoal);
  letter-spacing:-.9px;margin-bottom:var(--s-2);max-width:24ch;text-wrap:balance}
.dl-h3{font-size:var(--t-card);line-height:1.25;font-weight:600;color:var(--charcoal);
  letter-spacing:0;margin-bottom:var(--s-1)}
.dl-lead{font-size:var(--t-lead);line-height:1.38;color:var(--muted)}
.dl-p{margin-bottom:var(--s-3);max-width:var(--measure);line-height:1.5}
.dl-p:last-child{margin-bottom:0}
.dl-meta{font-size:var(--t-cap);line-height:1.5;color:var(--muted)}
.dl-meta time{font-variant-numeric:tabular-nums}

/* Direct Answer — 행잉 라벨 2단 구성.
   좌측 컬러 바 대신 라벨 컬럼과 본문 컬럼을 나누는 인쇄물식 배치를 쓴다. */
.dl-answer{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-3);
  margin:var(--s-4) 0 var(--s-5);max-width:calc(var(--measure) + 96px + var(--s-3));
  padding:0}
.dl-answer__label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--accent);text-transform:uppercase;margin:0;padding-top:4px;line-height:1.4}
.dl-answer p{font-size:var(--t-body);line-height:1.5;color:var(--ink-83)}
.dl-answer strong{font-weight:600;color:var(--charcoal)}

/* lead — 같은 2단 구성에 크림 톤 카드. 테두리는 사방 균일 */
.dl-answer--lead{background:var(--accent-weak);border:1px solid var(--accent-line);
  border-radius:var(--r-card);padding:var(--s-4);gap:var(--s-4);max-width:none}
.dl-answer--lead .dl-answer__label{padding-top:5px}
.dl-answer--lead p{font-size:var(--t-lead);line-height:1.38;color:var(--charcoal)}
.dl-section--tint .dl-answer--lead{background:var(--cream);border-color:var(--line)}
/* 집계 방식 — 클린 랭킹 문구와 도메인 집계 문구를 한 칸에 쌓는다 */
.dl-answer__body{min-width:0}
.dl-answer__body p{margin:0}
.dl-answer__body p + p{margin-top:10px}
.dl-answer--lead .dl-answer__head{font-family:var(--ff-point);font-weight:700;
  font-size:1.0625rem;line-height:1.3}
.dl-answer--lead .dl-answer__head::before{content:"◍";margin-right:7px;color:var(--accent)}
.dl-answer--lead .dl-answer__sub{padding-top:10px;border-top:1px solid var(--accent-line);
  font-size:.9375rem;line-height:1.6;color:var(--ink-83)}

/* ---------- 지표 바 ---------- */
.dl-stats{display:grid;grid-template-columns:repeat(5,1fr);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--cream)}
.dl-stats__item{padding:var(--s-4);border-right:1px solid var(--line)}
.dl-stats__item:last-child{border-right:0}
.dl-stats__label{display:block;font-size:var(--t-cap);color:var(--muted);margin-bottom:4px}
.dl-stats__value{font-size:var(--t-card);font-weight:600;color:var(--charcoal);
  font-variant-numeric:tabular-nums;letter-spacing:-.3px;line-height:1.25}

/* ---------- 순위표 ---------- */
.dl-table{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  background:var(--cream)}
/* 리셋에서 p{margin:0} 이라 설명문 바로 뒤 표가 테두리에 붙는다 */
p+.dl-table{margin-top:var(--s-3)}
.dl-table table{font-size:var(--t-cap)}
.dl-table thead th{background:var(--ink-03);color:var(--muted);font-size:var(--t-cap);
  font-weight:600;padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--line);
  white-space:nowrap}
.dl-table tbody td{padding:var(--s-4) var(--s-3);border-bottom:1px solid var(--line);
  vertical-align:middle}
.dl-table tbody tr:last-child td{border-bottom:0}
/* 상위 3위 — 색이 아니라 톤(3% 틴트)으로 구분 */
.dl-table tbody tr.is-top{background:var(--accent-weak)}
/* 틴트 섹션 안에서는 배경과 톤이 겹쳐 오히려 4·5위가 도드라진다.
   표 전체를 크림으로 깔고 상위 강조는 순위 숫자·테두리로만 준다. */
.dl-section--tint .dl-table{background:var(--cream);border:1px solid var(--line)}
.dl-section--tint .dl-table tbody tr,
.dl-section--tint .dl-table tbody tr.is-top{background:transparent}
.dl-section--tint .dl-table tbody tr:hover{background:var(--ink-03)}
.dl-table tbody tr:hover{background:rgba(180,68,31,.04)}

.dl-rank{font-size:var(--t-card);font-weight:400;color:var(--muted);
  font-family:"Jalnan","Pretendard Variable","Pretendard",sans-serif;
  font-variant-numeric:tabular-nums;width:44px;display:inline-block;
  vertical-align:middle;letter-spacing:0}
.dl-rank--1,.dl-rank--2,.dl-rank--3{color:var(--accent)}
.dl-table th small{display:block;margin-top:2px;font-size:.75em;font-weight:400;color:var(--muted)}
.dl-name{font-size:var(--t-body);font-weight:600;color:var(--charcoal);
  display:inline-block;vertical-align:middle;line-height:1.25}

/* 브랜드 로고 칩 — 원본이 흰 배경 JPG 라 크림 위에서는 흰 타일로 감싼다 */
.dl-logochip{flex:none;display:inline-block;vertical-align:middle;
  width:104px;height:47px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-comfy);padding:6px;
  margin-right:var(--s-3)}
.dl-logochip--lg{width:180px;height:81px;margin-right:0}
.dl-titlerow{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.dl-name__sub{display:block;font-size:var(--t-cap);color:var(--muted);font-weight:400;
  margin-top:3px;line-height:1.5}

/* 열 폭을 명시해 auto layout 이 서비스명 열을 짓누르지 않게 한다 */
.dl-table td.dl-td-rank,.dl-table th:first-child{width:64px}
.dl-table td.dl-td-name{min-width:316px}
/* 비교표는 사이드바 그리드 밖으로 빼서 전체 폭을 쓴다(마크업 참고).
   792px 안에서는 이름 칸 하한선 때문에 요금제·고객센터가 81px 까지 눌렸다. */
#compare .dl-table td.dl-td-name{min-width:276px}
#compare .dl-table td[data-label="요금제"]{width:212px}
#compare .dl-table td[data-label="고객센터"]{width:216px}
#compare .dl-table td[data-label="전용 앱"]{width:72px;white-space:nowrap}
/* 상세정보 · 공식 사이트를 한 칸에 나란히 둔다. 열을 하나 더 만들면 표가 넘친다.
   flex 로 좌측 정렬하면 앞 항목 길이('상세정보' vs '확인 중')에 따라
   공식 사이트 버튼의 x 좌표가 행마다 달라진다. 두 칸을 고정해 세로로 맞춘다.

   🔴 A 순위표는 2026-08-21 부터 행 전체가 링크라 이 버튼 묶음을 쓰지 않는다.
      다른 페이지의 표에서 아직 쓰고 있어 규칙은 남겨 둔다. */
.dl-acts{display:grid;grid-template-columns:84px auto;gap:var(--s-1);
  align-items:center;justify-content:start;white-space:nowrap}
.dl-table td[data-label="점유율"]{width:190px}
.dl-table td[data-label="변동"]{width:96px}
.dl-table td[data-label="제휴 여부"]{width:104px}
/* 노제휴 표 전용. index 비교표에도 같은 data-label 이 있으므로 반드시 스코프를 둔다.
   전역으로 걸면 "1599-6221 평일 10~18시" 가 nowrap 으로 폭을 밀어 마지막 열이 잘린다. */
#no-affiliate .dl-table td[data-label="사업자등록번호"]{width:128px;white-space:nowrap}
#no-affiliate .dl-table td[data-label="고객센터"]{width:116px;white-space:nowrap}
/* 노제휴 표는 서비스명이 짧아 이름 칸을 좁혀 확인 정보에 폭을 넘긴다 */
#no-affiliate .dl-table td.dl-td-name{min-width:296px}
.dl-share{font-size:var(--t-lead);font-weight:600;color:var(--charcoal);
  font-variant-numeric:tabular-nums;letter-spacing:-.3px;display:block;line-height:1.25}
.dl-bar{display:block;height:6px;border-radius:var(--r-pill);background:var(--ink-12);
  margin-top:8px;overflow:hidden;width:100%;max-width:156px}
.dl-bar__fill{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}

.dl-delta{font-size:var(--t-cap);font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--charcoal)}
.dl-delta--up{color:var(--accent)}
.dl-delta--same{color:var(--muted);font-weight:400}
.dl-delta__ico{display:inline-block;width:0;height:0;margin-right:5px;vertical-align:1px}
.dl-delta--up .dl-delta__ico{border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:6px solid var(--accent)}
.dl-delta--down .dl-delta__ico{border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:6px solid var(--muted)}

/* ---------- 배지 / 버튼 / 칩 ---------- */
.dl-badge{display:inline-block;font-size:var(--t-cap);font-weight:400;padding:3px 10px;
  border-radius:var(--r-pill);line-height:1.5;white-space:nowrap}
.dl-badge--none{border:1px solid var(--accent-line);background:var(--accent-weak);
  color:var(--accent);font-weight:600}
.dl-badge--tie{border:1px solid var(--line);color:var(--muted);background:var(--ink-03)}
.dl-badge--grade{border:1px solid var(--ink-40);color:var(--charcoal)}

/* 시그니처 — 다크 버튼의 멀티 레이어 인셋 섀도 */
.dl-btn{display:inline-block;padding:var(--s-1) var(--s-3);border-radius:var(--r-std);
  font-size:var(--t-body);font-weight:400;text-align:center;white-space:nowrap;
  transition:opacity .12s,background .12s}
.dl-btn:active{opacity:.8}
.dl-btn:focus-visible{box-shadow:var(--focus-shadow);outline:none}
.dl-btn--primary{background:var(--accent);color:var(--offwhite);box-shadow:var(--inset)}
.dl-btn--primary:hover{background:var(--accent-hover)}
.dl-btn--dark{background:var(--charcoal);color:var(--offwhite);box-shadow:var(--inset)}
.dl-btn--ghost{background:transparent;color:var(--charcoal);border:1px solid var(--ink-40)}
.dl-btn--surface{background:var(--cream);color:var(--charcoal);border:1px solid var(--line)}
.dl-btn--sm{font-size:var(--t-cap);padding:6px var(--s-2)}
.dl-btn--block{display:block;width:100%}

.dl-chips{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.dl-chip{display:inline-block;padding:6px var(--s-3);border:1px solid var(--line);
  border-radius:var(--r-pill);font-size:var(--t-cap);color:var(--charcoal);background:var(--cream)}
/* 버튼은 폰트를 상속하지 않는다. 링크 칩과 같은 모양을 내려면 명시해야 한다. */
button.dl-chip{font:inherit;font-size:var(--t-cap);line-height:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.dl-chip:hover{background:var(--ink-04)}
.dl-chip[aria-current="true"],.dl-chip[aria-pressed="true"],.dl-chip--on{
  background:var(--accent);border-color:var(--accent);
  color:var(--offwhite);box-shadow:var(--inset)}
.dl-chip[aria-pressed="true"]:hover{background:var(--accent)}
/* 분류별 건수 — 선택 전에도 어느 분류에 글이 몇 건인지 보이게 한다 */
.dl-chip__n{opacity:.62;font-variant-numeric:tabular-nums;margin-left:2px}
.dl-arts__empty{color:var(--muted);font-size:var(--t-cap);padding:var(--s-4) 0}

/* ---------- 사이드바 ----------
   전 페이지가 이 규칙을 함께 쓴다. 여기만 손대면 A 전체 사이드바가 같이 바뀐다. */
.dl-side{display:flex;flex-direction:column;gap:var(--s-3)}
.dl-side .dl-panel:first-child{border-color:var(--accent-line);
  background:var(--accent-weak)}

/* 제목 위 짧은 강조선 — 패널마다 시작점이 분명해진다 */
.dl-side__title{font-size:var(--t-card);font-weight:700;color:var(--charcoal);
  margin-bottom:10px;padding-top:10px;line-height:1.25;position:relative}
.dl-side__title::before{content:"";position:absolute;top:0;left:0;
  width:22px;height:3px;border-radius:2px;background:var(--accent)}
.dl-side__desc{font-size:var(--t-cap);color:var(--muted);margin-bottom:var(--s-3);line-height:1.5}

/* 목적별 추천 — 순번을 배지로 */
.dl-minirank{font-size:var(--t-cap);width:100%}
.dl-minirank td{padding:7px 0;border-bottom:1px solid var(--line)}
.dl-minirank tr:last-child td{border-bottom:0}
.dl-minirank td.dl-minirank__no{width:30px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums}
.dl-minirank tr:nth-child(-n+3) .dl-minirank__no{color:var(--accent)}
.dl-minirank__val{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}

/* 링크 목록 — 밋밋한 텍스트 줄에서 눌러지는 칸으로 */
.dl-linklist li{border-bottom:1px solid var(--line)}
.dl-linklist li:last-child{border-bottom:0}
.dl-linklist a{display:block;padding:var(--s-2) 0;font-size:var(--t-cap)}
.dl-linklist a:hover{text-decoration:underline}

.dl-linklist--rich{display:grid;gap:6px}
.dl-linklist--rich li{border-bottom:0}
.dl-linklist--rich a{display:block;padding:10px 30px 10px 12px;border-radius:10px;
  background:#fff;border:1px solid var(--line);text-decoration:none;position:relative;
  transition:border-color .15s,transform .15s}
.dl-linklist--rich a::after{content:"";position:absolute;right:13px;top:50%;
  width:6px;height:6px;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:translateY(-50%) rotate(-45deg);transition:right .15s,border-color .15s}
.dl-linklist--rich a:hover{border-color:var(--accent);transform:translateX(2px);
  text-decoration:none}
.dl-linklist--rich a:hover::after{right:10px;border-color:var(--accent)}
.dl-linklist__t{display:flex;align-items:center;gap:7px;
  font-size:var(--t-cap);font-weight:700;color:var(--charcoal)}
.dl-linklist__t b{font-size:.625rem;font-weight:700;padding:1px 6px;border-radius:999px;
  background:var(--accent-weak);color:var(--accent);font-variant-numeric:tabular-nums}
.dl-linklist__d{display:block;margin-top:2px;font-size:.75rem;line-height:1.45;
  color:var(--muted)}

/* ---------- 카드 ---------- */
.dl-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)}

/* ── 헤드라인 수치 (a_table.py 가 생성) ───────────────────── */
.dl-ledes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.dl-lede{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-4);
  background:var(--accent-weak);border:1px solid var(--accent);border-radius:var(--r-card)}
.dl-lede__num{flex:none;margin:0;font-family:var(--ff-point);font-size:3.25rem;
  line-height:.9;color:var(--accent);letter-spacing:-.02em}
.dl-lede__unit{font-size:1.125rem;margin-left:2px}
.dl-lede__txt{margin:0;font-size:.9375rem;line-height:1.6}
@media (max-width:900px){.dl-ledes{grid-template-columns:1fr}
  .dl-lede__num{font-size:2.5rem}}

/* ── 값 막대 ─────────────────────────────────────────────── */
.dl-bar{display:block;height:5px;margin-bottom:5px;border-radius:999px;
  background:rgba(0,0,0,.07);overflow:hidden}
.dl-bar__fill{display:block;height:100%;background:var(--accent);border-radius:999px}
.dl-bar__num{font-variant-numeric:tabular-nums}

/* ── 클릭 순위 보드 (a_rank_board.py 가 생성) ──────────────── */
/* 순위표 머리 — 제목 왼쪽, 기간 선택과 갱신일은 오른쪽 끝에 붙인다.
   제목에 flex:1 만 주면 dl-h2 의 max-width 에 걸려 도구가 가운데에 뜬다. */
.dl-boardbar{display:flex;align-items:baseline;gap:12px;
  margin:0 0 10px;flex-wrap:wrap}
.dl-boardbar .dl-h2{margin:0;max-width:none}
.dl-boardbar__tools{margin-left:auto;display:flex;align-items:baseline;gap:12px}
.dl-select{padding:8px 12px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font:inherit;font-size:.9375rem;font-weight:700}

/* 행 전체가 링크 ─────────────────────────────────────────
   서비스명의 <a> 가 ::after 로 행을 덮는다. 진짜 링크라 새 탭·가운데 클릭·
   크롤러가 모두 정상 동작한다. tr 에 position:relative 가 있어야 덮인다. */
.dl-table tbody tr.dl-rk{position:relative}
.dl-rowlink{color:inherit;text-decoration:none}
.dl-rowlink::after{content:"";position:absolute;inset:0;z-index:1}
.dl-table tbody tr.dl-rk:hover{background:var(--ink-04);cursor:pointer}
.dl-table tbody tr.dl-rk.is-top:hover{background:rgba(180,68,31,.11)}
.dl-rowlink:focus-visible::after{outline:2px solid var(--accent);outline-offset:-3px;
  border-radius:var(--r-std)}

/* 눌러진다는 신호. 행 끝의 화살표가 hover 에서 앞으로 나간다. */
.dl-td-go{width:28px;text-align:right}
.dl-go{display:inline-block;font-size:1.375rem;line-height:1;color:var(--ink-40);
  transition:transform .15s,color .15s}
.dl-table tbody tr.dl-rk:hover .dl-go{transform:translateX(3px);color:var(--accent)}

/* 순위 변동 — 실시간에서만 뜬다 */
.dl-move{display:block;margin-top:2px;font-size:.6875rem;font-weight:700;color:var(--muted)}
.dl-move--up{color:#c0392b}
.dl-move--down{color:#2b6cb0}
.dl-td-click{font-variant-numeric:tabular-nums;white-space:nowrap}
.dl-td-click strong{font-size:1.0625rem}

.dl-board__badges{display:flex;flex-wrap:wrap;gap:6px}
.dl-badge{padding:4px 9px;border:1px solid var(--accent);border-radius:6px;
  font-size:.75rem;font-weight:700;color:var(--accent);white-space:nowrap}

/* ── 일간 순위 변화 — 격자 (a_rank_board.py) ────────────────
   꺾은선이었는데 12개 선이 겹쳐 상위 몇 곳 말고는 안 읽혔다.
   한 칸 = 하루, 색 농도 = 그날 순위(--o 가 1 에 가까울수록 위). */
.dl-lc__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* width:100% 를 주면 이름 열과 칸 사이가 벌어진다. 내용 폭으로 두고 왼쪽에 붙인다. */
.dl-grid{border-collapse:separate;border-spacing:3px;width:auto;
  font-variant-numeric:tabular-nums}
.dl-grid thead th{padding:0 0 4px;font-size:.6875rem;font-weight:400;color:var(--muted);
  text-align:center}
.dl-grid__name{padding-right:10px;text-align:left;white-space:nowrap;
  font-size:.8125rem;font-weight:700;color:var(--muted)}
.dl-grid__cell{width:30px;height:28px;text-align:center;border-radius:5px;
  font-size:.6875rem;color:#8a6a5c;
  background:rgba(180,68,31,calc(var(--o) * .5))}
.dl-grid__cell.is-top{color:#fff;font-weight:700;
  background:rgba(180,68,31,calc(.45 + var(--o) * .55))}
.dl-grid tr.is-feat .dl-grid__name{color:var(--accent)}
.dl-grid tr.is-feat .dl-grid__cell{box-shadow:inset 0 0 0 1px rgba(180,68,31,.28)}
.dl-grid__trend{padding-left:10px;text-align:right;white-space:nowrap}
.dl-grid__trend .dl-move{display:inline;margin:0}

.dl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dl-chip{padding:6px 12px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font:inherit;font-size:.8125rem;cursor:pointer;color:var(--muted)}
.dl-chip.is-on{border-color:var(--accent);background:var(--accent-weak);
  color:var(--accent);font-weight:700}
.dl-chip::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;
  border-radius:50%;background:rgba(0,0,0,.2);vertical-align:middle}
.dl-chip.is-on::before{background:var(--accent)}

/* ── TOP4 세로 막대 (a_table.py 가 생성) ──────────────────── */
.dl-podium{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:var(--s-3)}
.dl-podium__item{display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:10px}

/* 막대는 이 트랙 안에서 자란다. 트랙에 고정 높이가 있어야 % 가 계산된다.
   높이는 0 에서 --h 까지 오르고, 숫자는 ui.js 가 0 부터 센다. */
.dl-podium__track{display:flex;align-items:flex-end;justify-content:center;
  width:100%;height:132px;padding-top:30px;box-sizing:content-box}
.dl-podium__bar{position:relative;display:flex;align-items:flex-end;justify-content:center;
  width:66px;height:0;padding-bottom:8px;border-radius:8px 8px 0 0;background:var(--accent);
  transition:height 1s cubic-bezier(.22,.9,.28,1);
  transition-delay:calc(var(--i,0) * 110ms)}
.dl-podium[data-grow].is-in .dl-podium__bar{height:var(--h)}
html.no-anim .dl-podium__bar{height:var(--h);transition:none}
.dl-podium__item:nth-child(n+3) .dl-podium__bar{background:#d9a894}

/* 값은 막대 밖 위쪽 — 흐린 막대 위 흰 글씨는 대비가 모자란다 */
.dl-podium__val{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  margin-bottom:6px;font-family:var(--ff-point);font-size:1.375rem;line-height:1;
  white-space:nowrap;color:var(--accent);font-variant-numeric:tabular-nums}
.dl-podium__val i{font-style:normal;font-size:.8125rem;margin-left:1px}
.dl-podium__rank{font-family:var(--ff-point);font-size:1.125rem;line-height:1;color:#fff}
.dl-podium__item:nth-child(n+3) .dl-podium__rank{color:#7a3520}

.dl-podium__logo{width:104px;height:47px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:6px}
.dl-podium__name{font-weight:700;font-size:1.0625rem}

/* 위 순위표에 없는 값만 붙인다 — 서비스 연차 · 등록 도메인 */
.dl-podium__facts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;width:100%}
.dl-podium__fact{flex:1 1 0;min-width:74px;padding:8px 6px;border:1px solid var(--line);
  border-radius:10px;background:#fff;
  display:flex;flex-direction:column;gap:2px;
  font-size:.6875rem;color:var(--muted);letter-spacing:.01em}
.dl-podium__fact b{font-family:var(--ff-point);font-size:1.25rem;line-height:1;
  color:var(--charcoal);font-weight:700}
.dl-podium__fact b i{font-style:normal;font-size:.75rem;margin-left:1px;color:var(--muted)}

@media (max-width:900px){
  .dl-podium{grid-template-columns:repeat(2,1fr);row-gap:var(--s-4)}
  .dl-podium__track{height:104px}
}
@media (max-width:479px){
  .dl-podium{grid-template-columns:1fr}
  .dl-podium__track{height:72px}
}

.dl-tag{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.6875rem;font-weight:700;
  letter-spacing:.02em;vertical-align:middle}

/* ── 별점 (a_table.py 가 생성) ────────────────────────────── */
.dl-stars{display:inline-flex;gap:1px;vertical-align:middle}
.dl-stars i{width:14px;height:14px;display:block;background:rgba(0,0,0,.14);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.dl-stars i.is-on{background:var(--accent)}
.dl-stars i.is-half{background:linear-gradient(90deg,var(--accent) 50%,rgba(0,0,0,.14) 50%)}
.dl-stars__num{margin-left:6px;font-weight:700;font-variant-numeric:tabular-nums}
.dl-td-review{min-width:22ch;max-width:36ch;font-size:.9375rem;line-height:1.55}
.dl-table .dl-board__badges{justify-content:flex-start;max-width:15ch}

/* ── 점유율 차트 (a_table.py 가 생성) ─────────────────────── */
.dl-chart{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dl-chart__row{display:grid;grid-template-columns:96px 1fr 64px;align-items:center;gap:12px}
.dl-chart__label{font-size:.9375rem;font-weight:700;color:var(--muted)}
.dl-chart__track{height:14px;border-radius:999px;background:rgba(0,0,0,.06);overflow:hidden}
.dl-chart__val{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;
  color:var(--muted)}

/* 막대는 0 에서 --w 까지 자란다. 화면에 들어올 때 .is-in 이 붙는다(ui.js).
   폭을 인라인으로 박으면 스크롤 전에 이미 다 그려져 있어 늘어날 것이 없다.
   자바스크립트가 없으면 아래 no-js 규칙이 즉시 --w 로 채운다. */
.dl-chart__fill{display:block;height:100%;width:0;border-radius:999px;
  background:#d8c3b8;
  transition:width .9s cubic-bezier(.22,.9,.28,1);
  transition-delay:calc(var(--i,0) * 45ms)}
.dl-chart[data-grow].is-in .dl-chart__fill{width:var(--w)}
html.no-anim .dl-chart__fill{width:var(--w);transition:none}

/* 온디스크·케이디스크는 다른 색으로 세운다 — 나머지와 한눈에 갈려야 한다 */
.dl-chart__row.is-feat .dl-chart__label,
.dl-chart__row.is-feat .dl-chart__val{color:var(--charcoal)}
.dl-chart__row.is-feat .dl-chart__track{background:var(--accent-weak)}
.dl-chart__row.is-feat .dl-chart__fill{
  background:linear-gradient(90deg,var(--accent),#e0653a)}

.dl-swatch{display:inline-block;width:11px;height:11px;margin-right:5px;
  border-radius:3px;background:#d8c3b8;vertical-align:-1px}
.dl-swatch--feat{background:var(--accent)}

@media (max-width:479px){.dl-chart__row{grid-template-columns:74px 1fr 54px;gap:8px}}

/* ── 편집부가 고른 4곳 (a_table.py 가 생성) ───────────────── */
.dl-picks{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);
  list-style:none;margin:0;padding:0}
.dl-pick{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:8px;padding:var(--s-3);background:var(--cream);
  border:1px solid var(--line);border-radius:var(--r-card)}
.dl-pick:nth-child(-n+2){border-color:var(--accent);background:var(--accent-weak)}
.dl-pick__no{position:absolute;top:10px;right:14px;
  font-family:var(--ff-point);font-size:1.5rem;line-height:1;color:var(--accent)}
.dl-pick__logo{margin-top:14px;width:104px;height:47px;object-fit:contain;
  background:#fff;border:1px solid var(--line);border-radius:6px}
.dl-pick__name{font-weight:700;font-size:1.0625rem}
.dl-pick__best{position:absolute;top:10px;left:14px;padding:2px 8px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:.6875rem;font-weight:700;letter-spacing:.04em}
.dl-pick__stat{font-family:var(--ff-point);font-size:1.5rem;line-height:1;color:var(--accent)}
.dl-pick__stat strong{font-size:2rem}
.dl-pick__why{font-size:.9375rem;line-height:1.5;color:var(--ink)}
.dl-pick__src{font-size:.75rem;color:var(--muted)}
.dl-pick .dl-btn{margin-top:auto}
@media (max-width:900px){.dl-picks{grid-template-columns:repeat(2,1fr)}}
@media (max-width:479px){.dl-picks{grid-template-columns:1fr}}
.dl-card{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s-4);transition:border-color .15s}
a.dl-card:hover{border-color:var(--ink-40)}

.dl-arts{display:flex;flex-direction:column;gap:var(--s-3)}
.dl-art{display:flex;gap:var(--s-4);background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r-card);padding:var(--s-4);transition:border-color .15s}
.dl-art:hover{border-color:var(--ink-40)}
.dl-art__body{min-width:0;max-width:var(--measure)}
.dl-art__title{font-size:var(--t-card);font-weight:600;color:var(--charcoal);
  margin-bottom:6px;line-height:1.25;letter-spacing:-.2px}
.dl-art__sum{font-size:var(--t-cap);color:var(--muted);margin-bottom:var(--s-1);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- FAQ ---------- */
.dl-faq{display:flex;flex-direction:column;gap:var(--s-2)}
.dl-faq__item{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden}
.dl-faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s-3);padding:var(--s-4);text-align:left;font-size:var(--t-card);font-weight:600;
  color:var(--charcoal);line-height:1.25;letter-spacing:-.2px}
.dl-faq__q:hover{background:var(--ink-04)}
.dl-faq__icon{flex:none;width:18px;height:18px;position:relative;margin-top:3px}
.dl-faq__icon::before,.dl-faq__icon::after{content:"";position:absolute;background:var(--ink-40);
  transition:transform .2s}
.dl-faq__icon::before{top:8px;left:0;width:18px;height:1.5px}
.dl-faq__icon::after{top:0;left:8px;width:1.5px;height:18px}
.dl-faq__q[aria-expanded="true"] .dl-faq__icon::after{transform:scaleY(0)}
.dl-faq__a{padding:var(--s-3) var(--s-4) var(--s-4);font-size:var(--t-body);color:var(--ink-82);
  border-top:1px solid var(--line);max-width:var(--measure);line-height:1.5}
.dl-faq__a strong{color:var(--charcoal);font-weight:600}
/* 버튼이 <h3> 안에 있어 답변 div 는 버튼의 형제가 아니다.
   인접 형제(+)로는 잡히지 않으므로 항목에 클래스를 걸어 접는다. */
.dl-faq__item.is-closed .dl-faq__a{display:none}

/* ---------- 본문 프로즈 ---------- */
.dl-prose h2{font-size:var(--t-sub);font-weight:600;color:var(--charcoal);
  margin:var(--s-7) 0 var(--s-2);letter-spacing:-.9px;max-width:24ch;line-height:1.1}
.dl-prose h3{font-size:var(--t-card);font-weight:600;color:var(--charcoal);
  margin:var(--s-5) 0 var(--s-1);line-height:1.25}
.dl-prose > p,.dl-prose > ul,.dl-prose > ol{max-width:var(--measure)}
.dl-prose p{margin-bottom:var(--s-3);line-height:1.5}
.dl-prose ul{margin:0 0 var(--s-3)}
.dl-prose ul li{position:relative;padding-left:var(--s-3);margin-bottom:var(--s-1)}
.dl-prose ul li::before{content:"";position:absolute;left:2px;top:10px;width:4px;height:4px;
  border-radius:var(--r-pill);background:var(--ink-40)}
.dl-prose ol{counter-reset:n;margin:0 0 var(--s-3)}
.dl-prose ol li{counter-increment:n;position:relative;padding-left:28px;margin-bottom:var(--s-1)}
.dl-prose ol li::before{content:counter(n);position:absolute;left:0;top:2px;width:20px;height:20px;
  border-radius:var(--r-pill);border:1px solid var(--accent-line);color:var(--accent);
  font-size:12px;font-weight:600;display:grid;place-items:center}

/* 좁은 화면에서 표가 잘리지 않게 가로 스크롤을 준다.
   포커스 링은 스크롤 영역임을 알리는 유일한 단서이므로 지우지 않는다. */
.dl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dl-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 표 전체에 고정 폭을 주면 열 수가 많을 때 마지막 열이 한 글자씩 접힌다.
   열마다 최소 폭을 줘서 auto layout 이 열을 짓누르지 못하게 하고,
   그 합이 화면을 넘으면 래퍼가 가로로 스크롤한다. */
.dl-dtable th,.dl-dtable td{min-width:88px}
.dl-dtable tbody th{min-width:104px}
.dl-dtable{width:100%;font-size:var(--t-cap);background:var(--cream);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  margin-bottom:var(--s-4)}
.dl-dtable th,.dl-dtable td{padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--line)}
.dl-dtable thead th{background:var(--ink-03);font-size:var(--t-cap);color:var(--muted);
  white-space:nowrap}
.dl-dtable tbody tr:last-child th,.dl-dtable tbody tr:last-child td{border-bottom:0}
.dl-dtable tbody th{font-weight:600;color:var(--charcoal);width:32%}
.dl-dtable__num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;
  color:var(--charcoal)}
.dl-dtable thead th.dl-dtable__num{text-align:right;font-weight:600}
.dl-dtable__row--excluded{background:var(--ink-04)}
.dl-dtable__row--excluded th,.dl-dtable__row--excluded td{color:var(--muted)}

.dl-chart{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-card);
  padding:var(--s-4)}
.dl-chart__fig{margin:0}
.dl-chart__svg{display:block;width:100%;height:auto;
  font-family:inherit;font-variant-numeric:tabular-nums}
.dl-legend{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-3);
  font-size:var(--t-cap);color:var(--muted)}
.dl-legend span{display:flex;align-items:center;gap:8px}
.dl-legend i{width:10px;height:10px;border-radius:var(--r-pill);display:block}
/* 채도 없는 액센트 — 차콜 투명도 단계로만 시리즈 구분 */
.dl-legend__c1{background:#b4441f}
.dl-legend__c2{background:#1c1c1c}
.dl-legend__c3{background:#8a6b52}
.dl-legend__c4{background:rgba(28,28,28,.42)}
.dl-legend__c5{background:rgba(28,28,28,.2)}

/* ---------- 페이지네이션 ---------- */
.dl-pager{display:flex;justify-content:center;gap:var(--s-1);margin-top:var(--s-5)}
.dl-pager a{min-width:36px;height:36px;display:grid;place-items:center;padding:0 var(--s-2);
  border:1px solid var(--line);border-radius:var(--r-std);font-size:var(--t-cap)}
.dl-pager a:hover{background:var(--ink-04)}
.dl-pager a[aria-current="page"]{background:var(--accent);border-color:var(--accent);
  color:var(--offwhite);font-weight:600;box-shadow:var(--inset)}

/* ---------- 문의 ---------- */
.dl-contact{background:var(--cream);border:1px solid var(--line);
  border-radius:var(--r-container);padding:var(--s-7) var(--s-4);text-align:center}
.dl-contact__mail{display:inline-block;font-size:var(--t-sub);font-weight:600;
  color:var(--accent);margin:var(--s-2) 0 var(--s-1);letter-spacing:-.9px;line-height:1.1}
.dl-contact__mail:hover{text-decoration:underline;text-underline-offset:4px}
.dl-contact__note{font-size:var(--t-cap);color:var(--muted);max-width:52ch;margin:0 auto;
  line-height:1.5}

/* ---------- footer ---------- */
.dl-footer{border-top:1px solid var(--line);padding:var(--s-6) 0;margin-top:var(--s-9)}
.dl-footer__nav{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-bottom:var(--s-3);
  font-size:var(--t-cap)}
.dl-footer__nav a:hover{text-decoration:underline}
.dl-footer__note{font-size:var(--t-cap);color:var(--muted);line-height:1.5;max-width:70ch}

/* ============================================================
   유틸리티 / 모디파이어
   ============================================================ */
.u-mt1{margin-top:var(--s-1)}
.u-mt2{margin-top:var(--s-3)}
.u-mt3{margin-top:var(--s-5)}
.u-mb1{margin-bottom:var(--s-1)}
.u-mb2{margin-bottom:var(--s-3)}
.dl-grid--2{grid-template-columns:repeat(2,1fr)}
.dl-grid--3{grid-template-columns:repeat(3,1fr)}
.dl-stats--4{grid-template-columns:repeat(4,1fr)}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1280px){
  :root{--t-section:44px}
}
@media (max-width:1024px){
  :root{--t-section:36px;--t-sub:28px;--gut:var(--s-3)}
  .dl-h1{letter-spacing:-.9px}
  .dl-cols{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .dl-cards{grid-template-columns:repeat(2,1fr)}
  .dl-stats{grid-template-columns:repeat(3,1fr)}
  .dl-stats__item:nth-child(3n){border-right:0}
  .dl-stats__item{border-bottom:1px solid var(--line)}
  .dl-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .dl-side .dl-panel:first-child{grid-column:1 / -1}
  .dl-main{padding:var(--s-6) 0 var(--s-7)}
  .dl-section{margin-bottom:var(--s-7)}
}
@media (max-width:768px){
  :root{--t-section:30px;--t-sub:24px;--t-card:18px}
  .dl-h1{letter-spacing:-.6px}
  .dl-h2{letter-spacing:-.4px}
  .dl-navtoggle{display:flex}
  .dl-gnb{position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);padding:var(--s-1) var(--gut) var(--s-3)}
  .dl-gnb[hidden]{display:none}
  .dl-gnb__link{padding:var(--s-2) var(--s-1);border-radius:var(--r-std);font-size:var(--t-body)}

  .dl-stats{grid-template-columns:repeat(2,1fr)}
  .dl-stats__item:nth-child(3n){border-right:1px solid var(--line)}
  .dl-stats__item:nth-child(2n){border-right:0}

  /* ── 순위표 → 카드 전환 ──
     tr 을 grid 로 만들면 테이블 박스 모델과 충돌해 가로 넘침이 난다.
     tr 은 block 으로 두고, 순위만 카드 우상단에 절대 배치한다. */
  .dl-table{border:0;border-radius:0;overflow:visible}
  .dl-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .dl-table table,.dl-table tbody{display:block;width:100%}
  .dl-table tbody tr,.dl-table tbody tr.is-top{display:block;position:relative;
    background:var(--cream);border:1px solid var(--line);border-radius:var(--r-card);
    padding:var(--s-3);margin-bottom:var(--s-2)}
  .dl-table tbody tr.is-top{border-color:var(--accent-line);background:var(--accent-weak)}
  .dl-table tbody tr:hover{background:var(--cream)}
  .dl-table tbody tr.is-top:hover{background:var(--accent-weak)}

  /* 데스크톱에서 지정한 열 폭을 전부 해제해야 카드가 제 폭을 갖는다.
     열거식으로 적으면 데스크톱에 열 폭 규칙을 하나 추가할 때마다 여기가 새고,
     #compare · #no-affiliate 처럼 ID 로 스코프된 규칙은 미디어쿼리로도 못 이긴다.
     카드로 바뀐 뒤에는 '열 폭' 자체가 성립하지 않으므로 !important 로 일괄 무효화한다. */
  .dl-table th,
  .dl-table td{width:auto!important;min-width:0!important;max-width:none!important;
    white-space:normal}
  .dl-acts{justify-content:flex-end}
  /* 카드 전체가 링크라 화살표 칸은 군더더기다. 라벨도 없어 빈 줄로 보인다. */
  .dl-table tbody td.dl-td-go{display:none}
  .dl-table tbody td{display:flex;align-items:center;justify-content:space-between;
    gap:var(--s-3);padding:var(--s-1) 0;border-bottom:1px solid var(--line);
    width:auto;min-width:0}
  .dl-table tbody td:last-child{border-bottom:0;padding-bottom:0}
  .dl-table tbody td::before{content:attr(data-label);flex:none;font-size:var(--t-cap);
    color:var(--muted)}
  .dl-table tbody td[data-label=""]::before{display:none}

  /* 순위 — 카드 우상단 배지 */
  .dl-table tbody tr td.dl-td-rank{position:absolute;top:var(--s-3);right:var(--s-3);
    display:block;padding:0;border-bottom:0;width:auto;min-width:0;text-align:right}
  /* 서비스명 — 로고 + 이름을 카드 헤더로 */
  .dl-table tbody td.dl-td-name{display:flex;align-items:center;justify-content:flex-start;
    gap:var(--s-2);padding:0 40px var(--s-2) 0;border-bottom:1px solid var(--line)}
  .dl-table tbody td.dl-td-name .dl-name{min-width:0}

  .dl-rank{width:auto}
  .dl-logochip{width:92px;height:42px;margin-right:0;flex:none}
  .dl-logochip--lg{width:120px;height:54px}
  .dl-titlerow{gap:var(--s-3)}
  .dl-share{display:inline-block}
  .dl-bar{width:104px;max-width:104px;margin-top:0;flex:none}

  .dl-cards,.dl-grid--2,.dl-grid--3{grid-template-columns:1fr}
  .dl-art{flex-direction:column;gap:var(--s-3)}
    .dl-side{grid-template-columns:minmax(0,1fr)}
  .dl-chart__canvas{height:200px}
  .dl-section--tint{padding:var(--s-4)}
  .dl-answer,.dl-answer--lead{grid-template-columns:1fr;gap:var(--s-1)}
  .dl-contact{padding:var(--s-5) var(--s-3)}
  .dl-contact__mail{font-size:var(--t-card);word-break:break-all;letter-spacing:-.2px}
  .dl-footer{margin-top:var(--s-7)}
}
@media (max-width:600px){
  :root{--t-section:26px}
  .dl-stats{grid-template-columns:1fr}
  .dl-stats__item{border-right:0}
}

/* ---------- 접근성 / 인쇄 ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--r-micro)}
@media print{
  .dl-header,.dl-footer,.dl-navtoggle{display:none}
  body{background:#fff;font-size:11pt}
  .dl-cols{display:block}
}