@charset "utf-8";
/* ============================================================
   B. 신뢰/평가형 — 파일스코어
   Design System: Ollama  (B_designSystem_alpha.md)

   핵심 규칙
   - 페이지 전체가 하나의 종이(#ffffff). 서피스 교대 없음
   - 브랜드 색 없음. 검정 + 흰색 + 회색이 기본
     포인트는 골드 #b8801f 한 색만, 별점·노제휴·상위 순위에만 (CTA 는 흑백 유지)
   - 모든 인터랙티브 요소는 rounded.full(9999px) 필. 카드만 12px
   - 드롭 섀도 0. 깊이는 1px 헤어라인 또는 다크 서피스 반전으로만
   - 다크 서피스(#171717)는 페이지당 정확히 한 번만 — "여기를 보라" 신호
   - 섹션 사이는 88px 공백. 장식 구분선 없음
   - 문서(Markdown)처럼 읽히는 단일 리딩 컬럼(720px)
   ============================================================ */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* 앵커 이동 시 스티키 헤더가 대상 제목을 덮지 않게 한다.
   페이지 간 이동 · 같은 페이지 클릭 · 뒤로가기 모두 여기서 처리된다. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dd,table,blockquote{margin:0;padding:0}
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:500}

/* ---------- tokens ---------- */
:root{
  /* Brand & Surface */
  --primary:#000;
  --ink-deep:#090909;
  --canvas:#fff;
  --surface-soft:#fafafa;
  --surface-dark:#171717;
  --hairline:#e5e5e5;
  --hairline-strong:#d4d4d4;

  /* Text */
  --ink:#000;
  --charcoal:#525252;
  --body:#737373;
  --mute:#a3a3a3;
  --on-dark:#fff;
  --on-dark-mute:rgba(255,255,255,.7);

  /* Terminal (터미널 목업 한정) */
  --term-red:#ff5f56;
  --term-yellow:#ffbd2e;
  --term-green:#27c93f;

  /* Accent — 기능색. 별점·노제휴·상위 순위에만 쓰고
     CTA 와 본문은 흑백을 유지한다 (문서의 restraint 원칙). */
  --accent:#b8801f;
  --accent-weak:#fdf8ec;
  --accent-line:#e6d2a4;

  --focus-ring:rgba(59,130,246,.5);

  /* Radius */
  --r-none:0;
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-full:9999px;

  /* Spacing */
  --xxs:2px; --xs:4px; --sm:8px; --md:12px;
  --lg:16px; --xl:24px; --xxl:32px; --section:88px;

  /* Type */
  --display-xl:36px;
  --display-lg:30px;
  --heading-lg:24px;
  --heading-md:20px;
  --heading-sm:18px;
  --body-md:16px;
  --body-sm:14px;
  --caption:12px;

  /* 읽기 컬럼 */
  --col:720px;
  --col-wide:1000px;
  --pad:var(--xl);
}

/* ---------- 포인트 서체 ---------- */
/* 페이퍼로지(Paperlogy) — 이주임(PTKKUN) X 김도균

   SIL Open Font License 1.1. 상업적 사용·수정·재배포 가능하고 글꼴 단독 판매와
   라이선스 변경만 금지. OFL 은 화면 고지를 요구하지 않아 푸터에서 뺐다 (2026-08-21).

   🔴 대신 OFL 2항은 폰트를 재배포할 때 저작권 고지와 라이선스 사본을 함께 넣으라고
      한다. woff2 를 서버에서 내려 주는 것도 재배포다. font/LICENSE.txt 를 지우지 말 것.
   배포처: https://freesentation.blog/paperlogyfont

   9 웨이트 중 제목에 쓰는 600·700 만 내려받아 서브셋했다 (157KB → 24KB 각).
   본문 문구를 바꾸면 _verify/subset_fonts.py 를 다시 실행할 것. */
@font-face{
  font-family:"Paperlogy";
  src:url("../font/Paperlogy-6SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Paperlogy";
  src:url("../font/Paperlogy-7Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

/* ---------- base ---------- */
body{
  /* SF Pro Rounded 는 Apple 라이선스 → 문서가 지정한 오픈소스 대체 Nunito 사용.
     한글 글리프는 Pretendard 가 받는다 (font-family 는 글리프 단위로 폴백). */
  font-family:"Pretendard Variable","Pretendard",ui-sans-serif,system-ui,
    -apple-system,"Segoe UI","Malgun Gothic","맑은 고딕",sans-serif;
  font-size:var(--body-md);
  font-weight:400;
  line-height:1.5;
  color:var(--body);
  background:var(--canvas);
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.u-display{
  font-family:"Paperlogy","Nunito","Pretendard Variable","Pretendard",
    system-ui,-apple-system,sans-serif;
}
code,kbd,samp,.u-code{
  font-family:"JetBrains Mono","Fira Code",ui-monospace,SFMono-Regular,Menlo,Monaco,
    Consolas,monospace;
}

.l-shell{max-width:var(--col-wide);margin:0 auto;padding:0 var(--pad)}
.l-shell--narrow{max-width:var(--col)}
.u-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.u-num{font-variant-numeric:tabular-nums}

.c-link{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* 외부 서비스 링크 — 제휴가 아니라 편의 연결이다. rel 은 nofollow noopener 만 붙인다.
   보상 계약이 생기면 그때 sponsored 를 추가하고 고지 문구도 함께 넣어야 한다. */
.c-extlink{color:inherit;text-decoration:underline;text-decoration-color:var(--hairline-strong);
  text-underline-offset:3px}
.c-extlink:hover{text-decoration-color:var(--ink)}
.l-block--free .c-extlink{text-decoration-color:rgba(255,255,255,.4)}
.l-block--free .c-extlink:hover{text-decoration-color:var(--on-dark)}
.c-link--mute{color:var(--body)}

/* ============================================================
   header — 56px, 플랫, 검정 필 CTA
   ============================================================ */
.l-header{background:var(--canvas);border-bottom:1px solid var(--hairline)}
.l-header__bar{max-width:var(--col-wide);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:var(--xl);height:64px}

.c-brand{display:flex;align-items:center;gap:var(--sm);flex:none}
.c-brand__seal{width:34px;height:34px;flex:none;border-radius:var(--r-full);display:block}
/* 브랜드명 — 페이퍼로지. 600·700 만 실려 있어 500 은 600 으로 올라간다.
   렌더되는 굵기를 그대로 적는다. 영문 부제는 본문 서체를 유지한다. */
.c-brand__name{font-size:var(--body-md);font-weight:600;color:var(--ink);line-height:1.25;
  font-family:"Paperlogy","Pretendard Variable","Pretendard",sans-serif}
.c-brand__sub{display:block;font-size:var(--caption);font-weight:400;color:var(--mute);
  font-family:"Pretendard Variable","Pretendard",ui-sans-serif,system-ui,sans-serif;
  line-height:1.33;margin-top:1px}

.c-nav{display:flex;gap:var(--lg);align-items:center}
.c-nav__item{display:block;padding:var(--sm) 0;font-size:var(--body-sm);font-weight:500;
  color:var(--body);white-space:nowrap}
.c-nav__item:hover{color:var(--ink)}
.c-nav__item.is-current{color:var(--ink)}

.c-menubtn{display:none;width:36px;height:36px;border-radius:var(--r-full);
  border:1px solid var(--hairline-strong);align-items:center;justify-content:center;flex:none}
.c-menubtn__line,.c-menubtn__line::before,.c-menubtn__line::after{
  display:block;width:15px;height:1.5px;background:var(--ink)}
.c-menubtn__line{position:relative}
.c-menubtn__line::before,.c-menubtn__line::after{content:"";position:absolute;left:0}
.c-menubtn__line::before{top:-5px}
.c-menubtn__line::after{top:5px}

/* ============================================================
   layout — 88px 섹션 리듬
   ============================================================ */
.l-main{padding:var(--xxl) 0 var(--section)}
.l-block{margin-bottom:var(--section)}
.l-block:last-child{margin-bottom:0}

.c-pagetitle{margin-bottom:var(--xl);max-width:var(--col)}
.c-pagetitle__crumb{font-size:var(--body-sm);color:var(--body);margin-bottom:var(--md)}
.c-pagetitle__crumb a:hover{text-decoration:underline}
.c-pagetitle__crumb span{margin:0 var(--sm);color:var(--hairline-strong)}
/* Paperlogy 는 600·700 만 싣는다. 500 으로 두면 브라우저가 600 으로 올려 잡으므로
   실제 렌더 굵기를 그대로 적는다. */
.c-pagetitle__h1{font-size:var(--display-xl);line-height:1.11;font-weight:600;color:var(--ink);
  letter-spacing:0;max-width:22ch;text-wrap:balance}
.c-pagetitle__stamp{display:block;font-size:var(--body-sm);color:var(--body);margin-top:var(--md)}

.c-heading{font-size:var(--display-lg);line-height:1.2;font-weight:600;color:var(--ink);
  margin-bottom:var(--lg);max-width:24ch;text-wrap:balance}
.c-subheading{font-size:var(--heading-lg);font-weight:600;color:var(--ink);line-height:1.33;
  margin:var(--xxl) 0 var(--md)}

.c-text{margin-bottom:var(--lg);max-width:var(--col)}
.c-text:last-child{margin-bottom:0}
.c-note{font-size:var(--body-sm);line-height:1.43;color:var(--body);max-width:var(--col)}

/* Direct Answer — 장식 컨테이너 없이 산문으로 */
.c-verdict{margin:var(--lg) 0 var(--xl);max-width:var(--col)}
.c-verdict__tag{display:inline-block;font-size:var(--body-sm);font-weight:500;
  color:var(--accent);background:var(--accent-weak);padding:var(--xs) var(--md);
  border-radius:var(--r-full);margin-bottom:var(--md)}
.c-verdict p{font-size:var(--body-md);line-height:1.5;color:var(--body)}
.c-verdict strong{font-weight:500;color:var(--ink)}
.c-verdict--lead p{font-size:var(--heading-sm);line-height:1.56;color:var(--charcoal)}

/* ============================================================
   평가 영역 5칸
   ============================================================ */
.c-criteria{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--md)}
.c-criteria__cell{border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:var(--xl) var(--lg);text-align:center}
.c-criteria__icon{width:48px;height:48px;margin:0 auto var(--md);border-radius:var(--r-full);
  background:var(--accent-weak);display:grid;place-items:center;
  font-size:var(--heading-md);font-weight:500;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1}
.c-criteria__name{font-size:var(--body-sm);font-weight:500;color:var(--ink);margin-bottom:var(--xs)}
.c-criteria__point{font-size:var(--caption);color:var(--body)}

/* 심사 개요 */
.c-summary{border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden}
.c-summary__row{display:flex;border-bottom:1px solid var(--hairline)}
.c-summary__row:last-child{border-bottom:0}
.c-summary__key{flex:none;width:180px;padding:var(--lg) var(--xl);
  font-size:var(--body-sm);font-weight:500;color:var(--ink)}
.c-summary__val{padding:var(--lg) var(--xl);font-size:var(--body-sm);color:var(--body)}

/* ============================================================
   추천 TOP5 — 카드 그리드
   순위 리본 + 사이트 바로가기 / 서비스명 / 선정이유 / 종합신뢰도 / 해시태그
   ============================================================ */
.c-recs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--xl)}
.c-rec{border:1px solid var(--hairline);border-radius:var(--r-lg);background:var(--canvas);
  padding:var(--lg);display:flex;flex-direction:column}

.c-rec__top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--md);margin-bottom:var(--lg)}
.c-rec__no{flex:none;display:grid;place-items:center;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums}
/* 1~3위 — 리본. 카드 상단 테두리에 걸치게 올린다 */
.c-rec__no--ribbon{width:36px;height:50px;margin-top:calc(var(--lg) * -1 - 1px);
  padding-bottom:12px;font-size:var(--heading-md);color:#fff;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%)}
.c-rec__no--r1{background:#b8801f}
.c-rec__no--r2{background:#c9a052}
.c-rec__no--r3{background:#dcc490}
/* 4위 이하 — 중립 원형 */
.c-rec__no--circle{width:32px;height:32px;border-radius:var(--r-full);
  background:var(--surface-soft);color:var(--mute);font-size:var(--body-sm)}

/* 로고마다 가로세로 비율이 달라 좌측 정렬하면 들쭉날쭉해 보인다.
   고정 높이 박스 안에서 가운데 정렬해 시각적 기준선을 맞춘다. */
.c-rec__logo{display:block;width:100%;height:56px;object-fit:contain;
  object-position:center;margin:0 0 var(--md)}

/* 이름이 로고 alt 속성에만 있으면 본문 텍스트로 추출되지 않는다
   (AI 요약·스크린리더는 되지만 일반 텍스트 파싱은 안 됨) — 눈에 보이는
   제목으로도 남긴다. */
.c-rec__name{margin:0 0 var(--sm);font-size:var(--body-md);font-weight:600;color:var(--charcoal)}
.c-rec__detail{display:block;margin:0 0 var(--lg);font-size:var(--caption)}

.c-rec__spec{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--sm) var(--md);align-items:start;margin-bottom:var(--lg)}
.c-rec__spec dt{font-size:var(--caption);color:var(--body);white-space:nowrap;padding-top:3px}
.c-rec__spec dd{margin:0;font-size:var(--body-sm);line-height:1.43;color:var(--charcoal)}

.c-rec__rate{display:flex;align-items:center;gap:var(--sm)}
/* 별점 — 아웃라인 5개 위에 채움 5개를 점수 비율(--fill)만큼 클립해 겹친다 */
.c-rec__stars{position:relative;display:inline-block;line-height:0;flex:none}
.c-rec__stars-bg,.c-rec__stars-fg{display:flex;gap:1px}
.c-rec__stars-bg{color:var(--hairline-strong)}
.c-rec__stars-fg{position:absolute;left:0;top:0;color:var(--accent);
  width:var(--fill,0%);overflow:hidden}
.c-rec__stars svg{width:14px;height:14px;display:block;flex:none}
.c-rec__score{font-size:var(--body-sm);color:var(--charcoal);font-variant-numeric:tabular-nums}

.c-rec__tags{display:flex;flex-wrap:wrap;gap:var(--sm);margin-top:auto;
  padding-top:var(--md);border-top:1px solid var(--hairline)}
.c-rec__tags span{font-size:var(--caption);color:var(--accent)}

/* ============================================================
   버튼 — 전부 풀 필
   ============================================================ */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sm);
  height:36px;padding:0 20px;border-radius:var(--r-full);
  font-size:var(--body-sm);font-weight:500;line-height:1;text-align:center;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s}
.c-btn--fill{background:var(--primary);color:var(--canvas)}
.c-btn--fill:active{background:var(--ink-deep)}
.c-btn--line{background:var(--canvas);color:var(--ink);border:1px solid var(--hairline-strong)}
.c-btn--line:hover{border-color:var(--ink)}
.c-btn--on-dark{background:var(--canvas);color:var(--ink)}
.c-btn--mini{height:32px;padding:0 var(--lg);font-size:var(--caption)}
.c-btn--wide{display:flex;width:100%}

/* 필터 칩 */
.c-filter{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--lg) var(--xl)}
.c-filter__row{display:flex;align-items:flex-start;gap:var(--lg);flex-wrap:wrap}
.c-filter__row+.c-filter__row{margin-top:var(--lg);padding-top:var(--lg);
  border-top:1px solid var(--hairline)}
.c-filter__label{flex:none;width:52px;font-size:var(--body-sm);font-weight:500;
  color:var(--body);padding-top:7px}
.c-filter__opts{display:flex;flex-wrap:wrap;gap:var(--sm)}
.c-filter__opt{display:inline-flex;align-items:center;height:32px;padding:0 var(--lg);
  border-radius:var(--r-full);font-size:var(--body-sm);color:var(--body);
  background:var(--surface-soft)}
.c-filter__opt:hover{color:var(--ink)}
/* 정렬은 <button> 이다. a 와 같은 모양을 유지한다 */
button.c-filter__opt{font:inherit;cursor:pointer;border:0}
/* 정렬 상태 안내 — 순서가 안 바뀌어도 무엇이 적용됐는지 보이게 한다 */
.c-sortstate{margin-top:var(--md);font-size:var(--body-sm);color:var(--ink);
  background:var(--accent-weak);border:1px solid var(--accent-line);
  border-radius:var(--r-md);padding:var(--md) var(--lg);display:none}
.c-sortstate.is-on{display:block}
.c-sortstate b{font-weight:500}
/* 정렬 기준 컬럼 하이라이트 — 어느 열로 줄 세웠는지 한눈에 */
.c-scoretable th[aria-sort],
.c-scoretable td.is-sorted{background:var(--accent-weak)}
.c-scoretable th[aria-sort]{color:var(--ink)}
button.c-filter__opt:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.c-filter__opt.is-on{background:var(--primary);color:var(--canvas);font-weight:500}

.c-toggle{display:inline-flex;align-items:center;gap:var(--sm);height:32px;padding:0 var(--lg);
  border-radius:var(--r-full);background:var(--surface-soft);
  font-size:var(--body-sm);font-weight:500;color:var(--ink)}
.c-toggle:hover{background:#f0f0f0}
.c-toggle svg{width:14px;height:14px;transition:transform .18s}
.c-toggle[aria-expanded="false"] svg{transform:rotate(-90deg)}

/* ============================================================
   점수표 — 헤어라인만, 섀도 없음
   ============================================================ */
.c-tablebar{display:flex;align-items:center;justify-content:space-between;gap:var(--lg);
  margin-bottom:var(--xl);flex-wrap:wrap}
.c-tablebar__note{font-size:var(--body-sm);color:var(--body)}

.c-scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--hairline);border-radius:var(--r-lg)}
.c-scoretable{min-width:860px;font-size:var(--body-sm)}
/* 헤더는 열마다 줄 수가 다르다 — 순위·등급은 1줄, 영역명은 2줄 + 배점 1줄.
   bottom 정렬이면 1줄짜리가 배점 줄까지 내려앉아 라벨 높이가 어긋난다.
   middle 로 두면 줄 수가 달라도 시각적 중심이 맞는다. */
.c-scoretable thead th{background:var(--surface-soft);color:var(--body);font-size:var(--caption);
  font-weight:500;padding:var(--md) var(--sm);white-space:nowrap;line-height:1.4;
  vertical-align:middle;border-bottom:1px solid var(--hairline)}
/* 헤더 정렬을 값 정렬과 일치시킨다 */
.c-scoretable thead th.c-scoretable__rank,
.c-scoretable thead th.c-scoretable__cell,
.c-scoretable thead th.c-scoretable__total{text-align:center;color:var(--body);font-weight:500}
.c-table thead th.c-table__num{text-align:right}
.c-scoretable thead th small{display:block;font-weight:400;color:var(--mute);font-size:11px}
.c-scoretable tbody td{padding:var(--lg) var(--sm);border-bottom:1px solid var(--hairline);
  vertical-align:middle}
.c-scoretable tbody tr:last-child td{border-bottom:0}
.c-scoretable__rank{font-size:var(--heading-sm);font-weight:500;color:var(--mute);
  width:56px;text-align:center;font-variant-numeric:tabular-nums}
.c-scoretable tbody tr:nth-child(-n+3) .c-scoretable__rank{color:var(--accent)}
.c-scoretable__name{font-size:var(--body-md);font-weight:500;color:var(--ink);white-space:nowrap}
.c-scoretable__cell{text-align:center;color:var(--mute);font-size:var(--caption);
  font-variant-numeric:tabular-nums}
.c-scoretable__total{text-align:center;font-size:var(--heading-sm);font-weight:500;
  color:var(--ink);font-variant-numeric:tabular-nums}
.c-scoretable.is-compact{min-width:0}
.c-scoretable.is-compact thead th:nth-child(n+3):nth-child(-n+7),
.c-scoretable.is-compact tbody td:nth-child(n+3):nth-child(-n+7){display:none}

/* 종합점수 요약 표(홈 — ranking.html 전체 표보다 가벼운 TOP5 미리보기) */
.c-qtablewrap{border:1px solid var(--hairline);border-radius:var(--r-lg);overflow:hidden}
.c-qtable{font-size:var(--body-sm);min-width:480px}
.c-qtable thead th{background:var(--surface-soft);color:var(--body);font-size:var(--caption);
  font-weight:500;padding:10px var(--md);border-bottom:1px solid var(--hairline);
  text-align:left;white-space:nowrap}
.c-qtable tbody td{padding:var(--lg) var(--md);border-bottom:1px solid var(--hairline);
  vertical-align:middle}
.c-qtable tbody tr:last-child td{border-bottom:0}
.c-qtable__rank{font-size:var(--heading-sm);font-weight:500;color:var(--mute);
  width:40px;text-align:center;font-variant-numeric:tabular-nums}
.c-qtable__rank.is-top{color:var(--accent)}
.c-qtable__name{display:flex;align-items:center;gap:var(--sm);min-width:150px;
  font-size:var(--body-md);font-weight:500;color:var(--ink);white-space:nowrap}
.c-qtable__logo{border-radius:var(--r-sm);border:1px solid var(--hairline);
  object-fit:contain;background:#fff;flex:none}
.c-qtable__score{min-width:170px}
.c-qbar{display:block;height:6px;border-radius:var(--r-full);background:var(--surface-soft);
  border:1px solid var(--hairline);margin-bottom:6px;overflow:hidden;width:100%;max-width:140px}
.c-qbar__fill{display:block;height:100%;background:var(--primary);border-radius:var(--r-full)}
.c-qbar__fill--accent{background:var(--accent)}
.c-qtable__num{font-size:var(--body-md);font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums}
.c-qtable__cell{text-align:center;white-space:nowrap}
.c-qdelta{font-size:var(--caption);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.c-qdelta--up{color:var(--accent)}
.c-qdelta--down{color:var(--mute)}
.c-qspark{display:block}

/* 태그 — 전부 소프트 서피스 필 */
.c-tag{display:inline-flex;align-items:center;font-size:var(--caption);font-weight:500;
  padding:var(--xs) var(--md);line-height:1.33;white-space:nowrap;border-radius:var(--r-full);
  background:var(--surface-soft);color:var(--charcoal)}
.c-tag--grade{background:var(--primary);color:var(--canvas)}
.c-tag--grade-b{background:var(--surface-soft);color:var(--charcoal)}
.c-tag--free{background:var(--accent-weak);color:var(--accent);border:1px solid var(--accent-line)}
.c-tag--paid{background:var(--surface-soft);color:var(--mute)}
/* 확인 전 상태 — '제휴' 로 단정하지 않는다 */
.c-tag--pending{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* ============================================================
   본문 프로즈
   ============================================================ */
.c-prose h2{font-size:var(--heading-lg);font-weight:600;color:var(--ink);
  margin:var(--xxl) 0 var(--md);line-height:1.33;max-width:26ch}
.c-prose h3{font-size:var(--heading-sm);font-weight:500;color:var(--ink);
  margin:var(--xl) 0 var(--sm);line-height:1.56}
.c-prose > p,.c-prose > ul,.c-prose > ol{max-width:var(--col)}
.c-prose p{margin-bottom:var(--lg)}
.c-prose ul{margin:0 0 var(--lg)}
.c-prose ul li{position:relative;padding-left:var(--lg);margin-bottom:var(--sm);
  font-size:var(--body-sm);line-height:1.43}
.c-prose ul li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;
  border-radius:var(--r-full);background:var(--mute)}
.c-prose ol{counter-reset:step;margin:0 0 var(--lg)}
.c-prose ol li{counter-increment:step;position:relative;padding-left:26px;margin-bottom:var(--sm);
  font-size:var(--body-sm);line-height:1.43}
.c-prose ol li::before{content:counter(step) ".";position:absolute;left:0;top:0;
  font-weight:500;color:var(--ink)}

/* 지표 카드 */
.c-area{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--xxl);
  margin-bottom:var(--xl)}
.c-area:last-child{margin-bottom:0}
.c-area__head{display:flex;align-items:center;justify-content:space-between;gap:var(--lg);
  margin-bottom:var(--md)}
.c-area__title{font-size:var(--heading-md);font-weight:500;color:var(--ink);line-height:1.4}
.c-area__point{flex:none;font-size:var(--caption);font-weight:500;color:var(--accent);
  background:var(--accent-weak);padding:var(--xs) var(--md);border-radius:var(--r-full)}
.c-area__lead{margin-bottom:var(--lg);max-width:var(--col);font-size:var(--body-sm);
  line-height:1.43}
.c-area .c-table{margin-bottom:0;border:0}

/* FAQ */
.c-faq__item{border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:var(--lg) var(--xl);margin-bottom:var(--md)}
.c-faq__item:last-child{margin-bottom:0}
.c-faq__q{cursor:pointer;font-size:var(--body-md);font-weight:600;color:var(--ink);
  list-style:none}
.c-faq__q::-webkit-details-marker{display:none}
.c-faq__q::before{content:"+";display:inline-block;width:1.2em;color:var(--accent);
  font-weight:700}
.c-faq__item[open] .c-faq__q::before{content:"−"}
.c-faq__a{margin:var(--md) 0 0;padding-left:1.2em;font-size:var(--body-sm);
  line-height:1.6;color:var(--charcoal)}

/* 표 */
.c-table{width:100%;font-size:var(--body-sm);border:1px solid var(--hairline);
  border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--xl)}
.c-table th,.c-table td{padding:var(--md) var(--lg);border-bottom:1px solid var(--hairline)}
.c-table thead th{background:var(--surface-soft);font-size:var(--caption);color:var(--body);
  font-weight:500;white-space:nowrap}
.c-table tbody tr:last-child th,.c-table tbody tr:last-child td{border-bottom:0}
.c-table tbody th{font-weight:500;color:var(--ink);width:30%}
.c-table td{color:var(--charcoal)}
.c-table__num{text-align:right;font-variant-numeric:tabular-nums;font-weight:500;color:var(--ink)}
.c-table__zero td,.c-table__zero th{color:var(--mute)}

/* ============================================================
   원칙 / 절차
   ============================================================ */
.c-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--xl)}
.c-principle{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--xxl)}
.c-principle__no{font-size:var(--caption);font-weight:500;color:var(--mute);
  display:block;margin-bottom:var(--sm)}
.c-principle__title{font-size:var(--heading-md);font-weight:500;color:var(--ink);
  margin-bottom:var(--sm);line-height:1.4}
.c-principle p{font-size:var(--body-sm);line-height:1.43}

.c-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--lg)}
.c-step{border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--xl)}
.c-step__no{font-size:var(--caption);font-weight:500;color:var(--mute);display:block;
  margin-bottom:var(--sm)}
.c-step__title{font-size:var(--body-md);font-weight:500;color:var(--ink);margin-bottom:var(--xs);
  line-height:1.5}

/* ============================================================
   노제휴 섹션 — 시스템의 유일한 다크 서피스 (페이지당 1회)
   ============================================================ */
.l-block--free{background:var(--surface-dark);border-radius:var(--r-lg);
  padding:var(--xxl);color:var(--on-dark)}
.l-block--free .c-heading{color:var(--on-dark)}
.l-block--free .c-verdict p{color:var(--on-dark-mute)}
.l-block--free .c-verdict strong{color:var(--on-dark)}
.l-block--free .c-verdict__tag{background:rgba(255,255,255,.12);color:var(--on-dark)}
.l-block--free .c-prose h3{color:var(--on-dark)}
.l-block--free .c-prose p{color:var(--on-dark-mute)}
/* 다크 서피스 위의 각주·링크 — 기준 문장이 여기 들어오면서 필요해졌다 */
.l-block--free .c-note{color:var(--on-dark-mute)}
.l-block--free .c-subheading{color:var(--on-dark)}
.l-block--free .c-text{color:var(--on-dark-mute)}
.l-block--free .c-text strong{color:var(--on-dark)}
.l-block--free .c-list{color:var(--on-dark-mute)}
.l-block--free .c-list li::marker{color:rgba(255,255,255,.45)}
.l-block--free .c-note strong{color:var(--on-dark)}
.l-block--free .c-link{color:var(--on-dark);text-decoration-color:rgba(255,255,255,.5)}
.l-block--free .c-link:hover{text-decoration-color:var(--on-dark)}
.l-block--free .c-tag--pending{border-color:rgba(255,255,255,.28);color:var(--on-dark-mute)}
.l-block--free .c-table{border-color:rgba(255,255,255,.14)}
.l-block--free .c-table th,.l-block--free .c-table td{border-bottom-color:rgba(255,255,255,.14)}
.l-block--free .c-table thead th{background:rgba(255,255,255,.06);color:var(--on-dark-mute)}
.l-block--free .c-table tbody th{color:var(--on-dark)}
.l-block--free .c-table td{color:var(--on-dark-mute)}
.l-block--free .c-table__num{color:var(--on-dark)}
.l-block--free .c-tag--grade{background:var(--canvas);color:var(--ink)}
.l-block--free .c-tag--grade-b{background:rgba(255,255,255,.12);color:var(--on-dark)}
.l-block--free .c-btn--line{background:transparent;color:var(--on-dark);
  border-color:rgba(255,255,255,.34)}
.l-block--free .c-btn--line:hover{border-color:var(--on-dark)}
.l-block--free .c-btn--fill{background:var(--canvas);color:var(--ink)}

.c-freelist{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--lg)}
.c-freeitem{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:var(--xl)}
.c-freeitem__head{display:flex;align-items:center;gap:var(--sm);margin-bottom:var(--sm);
  flex-wrap:wrap}
.c-freeitem__name{font-size:var(--body-md);font-weight:500;color:var(--on-dark)}
.c-freeitem__score{font-size:var(--body-sm);color:var(--on-dark-mute);
  font-variant-numeric:tabular-nums}
.c-freeitem .c-note{color:var(--on-dark-mute)}
.c-freeitem .c-tag--free{background:rgba(184,128,31,.18);color:#f0cf8a;
  border-color:rgba(184,128,31,.5)}

/* ============================================================
   Q&A — 항상 펼침 (아코디언 없음)
   ============================================================ */
.c-qa{border-top:1px solid var(--hairline)}
.c-qa__item{border-bottom:1px solid var(--hairline);padding:var(--lg) 0}
.c-qa__q{font-size:var(--heading-sm);font-weight:500;color:var(--ink);margin-bottom:var(--xs);
  line-height:1.56;max-width:34ch}
.c-qa__a{font-size:var(--body-md);color:var(--body);max-width:var(--col);line-height:1.5}
.c-qa__a strong{color:var(--ink);font-weight:500}

/* ============================================================
   연락
   ============================================================ */
.c-contact{border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:var(--xxl);text-align:center}
.c-contact__title{font-size:var(--heading-md);font-weight:500;color:var(--ink);
  margin-bottom:var(--sm);line-height:1.4}
.c-contact__mail{display:inline-block;font-size:var(--display-lg);font-weight:500;
  color:var(--ink);line-height:1.2;margin-bottom:var(--md)}
.c-contact__mail:hover{text-decoration:underline;text-underline-offset:4px}
.c-contact__note{font-size:var(--body-sm);color:var(--body);max-width:56ch;margin:0 auto;
  line-height:1.43}

/* ============================================================
   footer — 헤어라인 한 줄 + 작은 링크 행
   ============================================================ */
.l-footer{border-top:1px solid var(--hairline);padding:var(--xxl) 0;margin-top:var(--section)}
.l-footer__nav{display:flex;flex-wrap:wrap;gap:var(--xl);font-size:var(--body-sm);
  margin-bottom:var(--lg)}
.l-footer__nav a{color:var(--body)}
.l-footer__nav a:hover{color:var(--ink)}
.l-footer__note{font-size:var(--caption);line-height:1.6;color:var(--mute);max-width:72ch}
.l-footer__note a{color:var(--body);text-decoration:underline}
/* 연혁·사업자정보를 두지 않는다 — 운영원칙 페이지로 대체 */

/* ---------- 유틸 ---------- */
.u-mt1{margin-top:var(--sm)}
.u-mt2{margin-top:var(--lg)}
.u-mt3{margin-top:var(--xl)}
.u-mb1{margin-bottom:var(--sm)}
.u-mb2{margin-bottom:var(--lg)}
.u-ml1{margin-left:var(--sm)}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1024px){
  .c-criteria{grid-template-columns:repeat(3,1fr)}
  .c-recs{grid-template-columns:repeat(2,1fr)}
  .c-principles{grid-template-columns:1fr}
  .c-steps{grid-template-columns:repeat(2,1fr)}
  .c-freelist{grid-template-columns:1fr}
  :root{--section:64px}
}
@media (max-width:768px){
  :root{--pad:var(--lg);--section:48px;--display-xl:28px;--display-lg:24px;--heading-lg:20px}
  .l-main{padding:var(--xl) 0 var(--section)}
  .l-header{position:relative}
  .c-menubtn{display:flex}
  .c-nav{position:absolute;top:100%;left:0;right:0;z-index:60;flex-direction:column;
    align-items:stretch;gap:0;background:var(--canvas);border-bottom:1px solid var(--hairline);
    padding:0 var(--pad) var(--md)}
  .c-nav[hidden]{display:none}
  .c-nav__item{padding:var(--lg) 0;border-bottom:1px solid var(--hairline);font-size:var(--body-md)}
  .c-nav__item:last-child{border-bottom:0}

  .c-criteria{grid-template-columns:repeat(2,1fr)}
  .c-recs{grid-template-columns:1fr}
  .c-steps{grid-template-columns:1fr}

  .c-scroller::after{content:"← 좌우로 스크롤하거나 위의 접기 버튼을 사용하세요";
    display:block;padding:var(--md);font-size:var(--caption);color:var(--mute);
    text-align:center;border-top:1px solid var(--hairline);position:sticky;left:0}
  .c-scoretable.is-compact{min-width:0}

  .c-summary__row{flex-direction:column}
  .c-summary__key{width:100%;padding:var(--md) var(--lg)}
  .c-summary__val{padding:0 var(--lg) var(--md)}

  .l-block--free{padding:var(--xl) var(--lg)}
  .c-area{padding:var(--xl) var(--lg)}
  .c-table th,.c-table td{padding:var(--md)}
  .c-table tbody th{width:38%}
  .c-contact{padding:var(--xl) var(--lg)}
  .c-contact__mail{font-size:var(--heading-md);word-break:break-all}
  .c-filter__row{flex-direction:column;gap:var(--sm)}
  .c-filter__label{width:auto;padding-top:0}
}
@media (max-width:600px){
  .c-criteria{grid-template-columns:1fr}
}

/* ---------- 접근성 / 인쇄 ---------- */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--r-sm)}
@media print{
  .l-header,.l-footer,.c-menubtn,.c-tablebar{display:none}
  body{background:#fff;font-size:11pt}
  .c-scroller{overflow:visible}
}