/* 위 여백은 공용 .page-head 가 정합니다. 제목 크기만 이 페이지가 키웁니다. */
.intro-row {
  display: block;
  margin-top: 12px;
}
/* 이 페이지 제목만 크게 씁니다. 공용 .page-head h1 (명시도 0,1,1) 을
   넘어야 해서 같은 수준으로 셀렉터를 맞춥니다. */
.page-head h1 {
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: 1.2;
  letter-spacing: -2.5px;
}
h1 em {
  font-style: normal;
  color: var(--accent);
}
.lead {
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted);
  margin: 20px 0 0;
}
.section-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 25px 0 20px;
}
.section {
  padding-top: 50px;
  padding-bottom: 52px;
}
.provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.provider {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 110px;
  min-width: 0;
}
/* 이번 회차에 안 뽑힌 곳은 감춥니다.
   .provider 가 display 를 직접 정해 브라우저 기본 [hidden] 규칙을
   이겨 버립니다. 그래서 순위에서 빠진 카드가 옛 번호를 단 채
   목록 맨 앞에 남아 있었습니다(10번이 1번보다 먼저 나오던 원인). */
.provider[hidden],
tbody tr[hidden] {
  display: none;
}
/*
 * 상위 2곳.
 *
 * 전에는 분홍 테두리 + 분홍 추천 상자 + 빨간 버튼이 한 카드에
 * 같이 있었습니다. 사이트의 다른 화면은 흰 카드에 얇은 회색
 * 테두리를 쓰고, 강조색은 주 행동 버튼 한 곳에만 씁니다.
 * 이 카드만 따로 노는 이유가 그것이었습니다.
 *
 * 분홍을 걷어내고, 사이트가 "지금 이것" 을 나타내는 방식
 * (잉크색 채움 — 바로가기 칩, 표 머리와 같은 방식)으로 바꿉니다.
 * 카드에 남는 강조색은 공식 홈페이지 버튼 하나뿐입니다.
 */
.provider.featured {
  border-color: #c3ccda;
  box-shadow: 0 6px 20px #1720230f;
}
/* 로고가 있는 카드(62px)와 없는 카드의 첫 줄 높이를 맞춥니다.
   그래야 같은 줄에 놓인 두 카드의 제목이 같은 높이에서 시작합니다. */
.provider-top {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
}
.rank {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 900;
  line-height: 1;
  color: #c1c9d6;
  font-variant-numeric: tabular-nums;
}
.featured .rank {
  color: var(--ink);
}
.brand {
  width: 180px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  flex-shrink: 1;
  min-width: 0;
}
.brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.provider-title {
  margin: 12px 0 14px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
.provider h3 {
  font-size: 24px;
  letter-spacing: -1px;
  margin: 0;
}
.provider-title > span {
  font-size: 14px;
  color: var(--muted);
}
h4 {
  font-size: 14px;
  margin: 0 0 9px;
}
.facts ul {
  margin: 0;
  padding-left: 18px;
  font-size: 15px;
  color: #536070;
  line-height: 1.65;
}
.facts li + li {
  margin-top: 5px;
}
.reason {
  background: #f5f7fa;
  padding: 14px 16px;
  border-radius: 8px;
  margin: 14px 0 18px;
}
/* 추천 상자는 일반 카드와 같은 회색을 씁니다. 분홍을 뺐습니다. */
.featured .reason {
  background: #eef1f6;
}
.reason p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}
.provider-bottom {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.comparison-section {
  background: #edf0f5;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 45px 0;
}
.table-wrap {
  border: 1px solid #d8dfe8;
  background: #fff;
  border-radius: 10px;
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  min-width: 680px;
  text-align: left;
}
caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
th,
td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
thead th {
  font-size: 13px;
  background: #25354d;
  color: #fff;
  font-weight: 700;
}
tbody tr:last-child > * {
  border-bottom: 0;
}
tbody td:first-child {
  width: 60px;
  color: #778397;
  font-weight: 800;
}
tbody th {
  width: 160px;
  font-size: 16px;
}
tbody td {
  color: #657080;
}
tbody .priority {
  background: #fff7f8;
}
.priority td:first-child {
  color: var(--ink);
}
tbody th small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}
tbody a span {
  color: #9ca7b6;
  margin-left: 4px;
}
tbody a:hover {
  color: var(--accent);
}
/* 비교 섹션은 배경이 #edf0f5 로 살짝 어둡습니다. --muted(#657080)가
   여기서 4.40:1 로 AA(4.5:1)에 못 미쳐, 이 섹션에서만 한 단계 진하게 씁니다. */
.comparison-section .eyebrow,
.comparison-section .section-head > p {
  color: #616c7a;
}

/* 지금 보고 있는 구간을 바로가기 칩에 표시합니다. 탭 선택과 같은 방식입니다. */
.section-links [aria-current="true"] {
  background: var(--ink);
  color: #fff;
}

.method-section {
  background: #192333;
  color: #fff;
  padding: 48px 0;
}
/* 이 섹션만 배경이 어둡습니다. --muted(#657080)는 여기서 3.15:1 이라
   섹션 안의 다른 보조 텍스트와 같은 밝은 회색을 씁니다. */
.method-section .eyebrow,
.criteria-grid span {
  color: #c5cedb;
}

.method-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  color: #c5cedb;
  font-size: 15px;
  line-height: 1.85;
}
.method-intro p {
  margin: 0;
}
.method-intro strong {
  color: #fff;
}
/* 글만 있는 안내 카드. 네 칸으로 벌어지는 폭입니다. */
.criteria-grid {
  --card-min: 230px;
  --cards-gap: 14px;
  margin-top: 30px;
}
.criteria-grid article {
  padding: 22px 18px;
  background: #ffffff07;
  border: 1px solid #ffffff16;
  border-radius: 8px;
}
.criteria-grid span {
  font-size: 13px;
  font-weight: 800;
}
.criteria-grid h3 {
  font-size: 17px;
  letter-spacing: -0.5px;
  margin: 10px 0;
}
.criteria-grid p {
  font-size: 14px;
  color: #b8c4d3;
  line-height: 1.8;
  margin: 0;
}
.faq {
  background: #fff;
  margin-bottom: 10px;
}

/* 질문 목록: 굵기를 빼고 2px 작게 — 제목처럼 크고 무겁게 보이지 않게 */
.faq .seed-accordion__title {
  font-weight: var(--seed-font-weight-medium);
  font-size: calc(var(--seed-font-size-t5) - 2px);
}

/* ===== 추천 순서 자동 갱신 ===== */
.ranking-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: var(--seed-font-size-t2);
  line-height: 1.5;
}

.ranking-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.1);
}

.ranking-status-time {
  color: #7b8696;
}

/*
 * 상위 2곳의 순번은 잉크색 판에 흰 숫자로 씁니다.
 * 바로가기 칩의 현재 위치 표시, 비교표 머리와 같은 방식이라
 * 이 화면 안에서 "지금 이것" 이 한 가지 모양으로 읽힙니다.
 */
.provider.featured .rank {
  color: var(--ink);
}

.provider.featured .rank-number {
  display: inline-block;
  min-width: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #465469;
  font-size: 40px;
  letter-spacing: -1.5px;
}

/* ===== 순위 변동 표시 ===== */
.rank-number {
  font-size: 40px;
  line-height: 1;
}

.rank-move {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.table-rank-number {
  display: inline-block;
  min-width: 24px;
  margin-right: 7px;
  font-variant-numeric: tabular-nums;
}

tbody td:first-child .rank-move {
  vertical-align: 1px;
}

/* ===== 랭킹 라이브 대시보드 ===== */
.ranking-live-card {
  flex: 0 0 196px;
  padding: 13px 16px;
  border-radius: 12px;
  background: #171b22;
  color: #fff;
  box-shadow: 0 10px 24px rgba(23, 27, 34, 0.12);
}

.ranking-live-card > span {
  display: block;
  color: #c7ced8;
  font-size: 11px;
  font-weight: 700;
}

.ranking-live-card strong {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
}

.ranking-live-card small {
  display: block;
  margin-top: 6px;
  color: #9ea8b5;
  font-size: 11px;
}

.ranking-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.ranking-summary span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dce2ea;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.summary-up,
.rank-move.is-up {
  color: #e0445e;
}

.summary-down,
.rank-move.is-down {
  color: #3d67c8;
}

.summary-new,
.rank-move.is-new {
  color: #c87a12;
}

.summary-same,
.rank-move.is-same {
  color: #8b95a3;
}

/* 비교 카드는 본문 글자를 유지하면서 장식과 여백을 줄입니다. */
#more .provider-grid {
  gap: 14px;
}
#more .provider {
  padding: 16px;
}
#more .provider-top {
  min-height: 44px;
  gap: 10px;
}
#more .rank-number,
#more .provider.featured .rank-number {
  font-size: 28px;
  letter-spacing: -1px;
}
#more .rank-move {
  font-size: 10px;
}
#more .brand {
  width: 132px;
  height: 44px;
  overflow: hidden;
}
/*
 * 로고 크기 맞추기: 바깥 여백을 깎은 파일(assets/logos/)을 쓰고,
 * 높이를 logoK(--k, = 1/√가로세로비)에 비례하게 줘서 로고마다 보이는 면적을 같게 합니다.
 * 넓은 워드마크는 낮게, 네모난 아이콘은 높게. 칸을 넘지 않게 최대 높이·폭을 둡니다.
 */
#more .brand {
  justify-content: flex-start;
}
#more .brand img {
  width: auto;
  height: min(40px, calc(var(--k, 0.55) * 60px));
  max-width: 100%;
}
#more .provider-title {
  margin: 9px 0 10px;
  padding-bottom: 9px;
}
#more .provider h3 {
  font-size: 19px;
  letter-spacing: -0.6px;
}
#more .provider-title > span {
  font-size: 13px;
}
#more .facts ul {
  font-size: 14px;
  line-height: 1.5;
}
#more .facts li + li {
  margin-top: 4px;
}
#more h4 {
  font-size: 13px;
  margin-bottom: 5px;
}
#more .reason {
  box-sizing: border-box;
  min-height: 82px;
  margin: 10px 0 12px;
  padding: 10px 12px;
}
#more .provider-bottom {
  margin-top: 0;
  min-height: 0;
  padding-top: 17px;
}
#more .visit {
  min-height: 40px;
}

/* 추천 대상이 먼저 보이도록 본문을 순서대로 읽히는 평면 레이아웃으로 정리합니다. */
#more .provider .reason,
#more .provider.featured .reason {
  min-height: 55px;
  margin: 0 0 9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#more .reason h4 {
  margin: 0 0 4px;
  color: #344255;
  font-size: 12px;
  font-weight: 700;
}

#more .reason p {
  color: #344255;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

#more .facts {
  flex: 1;
  padding-bottom: 16px;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 900px) {
  .provider {
    padding: 19px;
  }
  .provider-top {
    gap: 12px;
  }
  .brand {
    width: 150px;
  }
  .rank {
    font-size: 34px;
  }
  .rank-number {
    font-size: 34px;
  }

  /* 상위 순위 숫자는 박스 없이 색상으로만 강조합니다. */
  .provider.featured .rank-number {
    font-size: 34px;
  }
  .comparison-section .section-head {
    align-items: stretch;
  }

  .ranking-live-card {
    flex-basis: 184px;
  }
}

@media (max-width: 650px) {
  .intro {
    padding-top: 32px;
  }
  .intro-row {
    display: block;
  }
  h1 {
    font-size: 36px;
    letter-spacing: -1.8px;
  }
  .criteria-grid h3 {
    font-size: 16px;
  }
  .criteria-grid p {
    font-size: 13px;
  }

  .ranking-status-time {
    flex-basis: 100%;
    padding-left: 16px;
  }

  .rank-move {
    font-size: 10px;
  }
  .lead {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.65;
  }
  .section-links::-webkit-scrollbar {
    display: none;
  }
  .section {
    padding-top: 32px;
    padding-bottom: 34px;
  }
  .comparison-section .section-head {
    display: block;
  }
  .ranking-summary span {
    min-height: 24px;
    padding: 3px 7px;
    font-size: 10px;
  }
  .table-wrap {
    margin: 0 -2px;
    border-radius: 9px;
  }
  table {
    min-width: 620px;
    font-size: 13px;
  }
  th,
  td {
    padding: 11px 13px;
  }
  thead th {
    font-size: 12px;
  }
  tbody th {
    width: 135px;
    font-size: 14px;
  }
  .provider-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .provider {
    scroll-margin-top: 140px;
    padding: 16px;
    border-radius: 14px;
  }
  .provider-top {
    min-height: 52px;
    gap: 10px;
  }
  .rank {
    font-size: 38px;
    gap: 5px;
  }
  .rank-number,
  .provider.featured .rank-number {
    font-size: 30px;
  }
  .brand {
    width: 128px;
    height: 50px;
  }
  .provider-title {
    margin: 9px 0 12px;
    padding-bottom: 11px;
  }
  .provider h3 {
    font-size: 20px;
    letter-spacing: -0.6px;
  }
  .provider-title > span {
    font-size: 13px;
  }
  h4 {
    font-size: 13px;
    margin-bottom: 7px;
  }
  .facts ul {
    padding-left: 17px;
    font-size: 14px;
    line-height: 1.6;
  }
  .reason {
    margin: 12px 0 14px;
    padding: 12px 13px;
  }
  .reason p {
    font-size: 14px;
    line-height: 1.6;
  }
  .provider-bottom {
    min-height: 0;
    padding-top: 13px;
  }
  .provider-bottom .visit {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
  .method-section {
    padding: 32px 0;
  }
  .method-intro {
    grid-template-columns: 1fr;
    gap: 12px;
    font-size: 14px;
    line-height: 1.7;
  }
  .criteria-grid {
    --cards-gap: 10px;
    --card-min: 100%;
    margin-top: 20px;
  }
  .criteria-grid article {
    padding: 16px 14px;
  }
  .faq-section {
    padding-top: 34px;
    padding-bottom: 34px;
  }
  #more .provider-grid {
    gap: 10px;
  }
  #more .provider {
    padding: 14px;
  }
  #more .provider-top {
    min-height: 38px;
    gap: 8px;
  }
  #more .rank-number,
  #more .provider.featured .rank-number {
    font-size: 25px;
  }
  #more .brand {
    width: 112px;
    height: 38px;
  }
  #more .brand img {
    height: min(34px, calc(var(--k, 0.55) * 50px));
  }
  #more .provider h3 {
    font-size: 18px;
  }
  #more .reason {
    min-height: 0;
  }
  #more .visit {
    min-height: 42px;
  }

  /* 모바일 상단: 한눈에 읽히는 제목과 현재 순위만 남깁니다. */
  .intro.page-head {
    padding-top: 24px;
  }
  .intro .label {
    display: none;
  }
  .page-head h1 {
    margin-top: 0;
    font-size: 28px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -1.1px;
  }
  .page-head .lead {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.55;
  }
  .section-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
    gap: 6px;
    margin: 16px 0 16px;
  }
  .section-links > a {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid #e1e6ed;
    background: #fff;
    color: #596577;
    font-size: 11.5px;
    font-weight: 600;
  }
  .section-links [aria-current="true"] {
    border-color: #f3ccd2;
    background: #fff1f3;
    color: #c42740;
  }
  .comparison-section {
    padding: 30px 0;
    padding-top: 24px;
  }
  .comparison-section .eyebrow {
    display: none;
  }
  .comparison-section .section-head h2 {
    margin-top: 0;
    font-size: 22px;
    font-weight: 750;
    line-height: 1.3;
  }
  .ranking-status {
    gap: 6px;
    margin-top: 7px;
    color: #687585;
    font-size: 11px;
  }
  .ranking-summary {
    gap: 5px;
    margin-top: 8px;
    display: none;
  }
  .ranking-live-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 11px;
    padding: 11px 13px;
    border: 1px solid #dce2ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    color: var(--ink);
  }
  .ranking-live-card > span {
    color: #687585;
    font-size: 11px;
    font-weight: 600;
  }
  .ranking-live-card strong {
    margin: 0;
    color: #35445a;
    font-size: 14px;
    font-weight: 700;
  }
  .ranking-live-card small {
    margin-top: 6px;
    display: none;
  }
  #more .provider .reason,
  #more .provider.featured .reason {
    min-height: 0;
    margin-bottom: 10px;
  }

  /*
   * 비교표 모바일 카드형.
   *
   * 표가 4칸(순서·서비스·주요 특징·추천 대상)이라 좁은 화면에서는
   * 가로로 다 안 들어가 옆으로 스크롤해야 했습니다. 정보 구조(<table>)는
   * 그대로 두고 보이는 모양만 카드로 접습니다 — 스크린리더는 여전히
   * 표로 읽고, PC 화면은 이 구간 밖이라 그대로입니다.
   */
  #comparison .table-wrap {
    overflow: visible;
    border: none;
    background: none;
    margin: 0;
  }

  #comparison table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  /* 칸 이름은 각 값 앞에 라벨로 다시 보여주므로 머리글은 화면에서만 뺍니다. */
  #comparison thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  #comparison tbody {
    display: block;
  }

  #comparison tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    background: #fff;
    border: 1px solid #d8dfe8;
    border-radius: 12px;
    padding: 13px 14px;
    margin-bottom: 10px;
  }

  /*
   * 순위 밖으로 밀린 행은 JS 가 hidden 속성으로 감춥니다. 위 규칙이
   * #comparison(아이디)까지 붙어 있어 tbody tr[hidden]{display:none}
   * (아이디 없음)보다 우선순위가 높아 숨김이 풀립니다. 여기서 다시 감춥니다.
   */
  #comparison tbody tr[hidden] {
    display: none;
  }

  #comparison tbody tr:last-child {
    margin-bottom: 0;
  }

  #comparison tbody tr.priority {
    background: #fff7f8;
  }

  #comparison tbody td,
  #comparison tbody th {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: none;
  }

  /* 순서(숫자+증감)를 서비스명과 한 줄에 둡니다. */
  #comparison tbody td:first-child {
    order: -1;
    display: flex;
    align-items: baseline;
    font-size: 13px;
    color: #778397;
  }

  #comparison tbody tr.priority td:first-child {
    color: var(--ink);
  }

  /*
   * 모바일 1~3위: 판 색·테두리·숫자 크기를 한 단계씩 달리해 순위 차이가 바로 보이게.
   * (카드 띠·메달 색은 쓰지 않습니다)
   */
  #comparison tbody tr.top-1 {
    background: #ffeef1;
    border-color: #f5c3cc;
  }
  #comparison tbody tr.top-2 {
    background: #fff4f6;
    border-color: #f8d6dc;
  }
  #comparison tbody tr.top-3 {
    background: #fffafb;
    border-color: #fbe3e7;
  }
  #comparison tbody tr.top-1 .table-rank-number {
    font-size: 22px;
  }
  #comparison tbody tr.top-2 .table-rank-number {
    font-size: 19px;
  }
  #comparison tbody tr.top-3 .table-rank-number {
    font-size: 17px;
  }
  #comparison tbody tr.top-1 th[scope="row"] {
    font-size: 17px;
  }

  #comparison tbody th[scope="row"] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
  }

  /* 주요 특징: 라벨을 위, 값을 아래에 둡니다. */
  #comparison tbody td[data-label] {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: #657080;
  }

  #comparison tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 700;
    color: #8b95a3;
  }

  /*
   * "이런 분께 추천"은 아래 #more 카드의 "이런 분께 추천해요"와 문장까지
   * 거의 같습니다(예: "인기 목록부터 빠르게 둘러보고 싶은 분" / "인기
   * 목록에서 볼거리를 먼저 고르는 분."). 표가 카드형이 되며 두 구간이
   * 모바일에서 같은 모양·같은 내용으로 겹쳐 보였습니다. 이 칸은 모바일
   * 카드에서 빼고, 서비스명을 누르면 이어지는 #more 카드에서 보여 줍니다.
   * 위 규칙과 이 규칙은 우선순위가 같아 순서상 나중인 이 규칙이 이깁니다.
   * 표(데스크톱)와 스크린리더에는 그대로 남습니다.
   */
  #comparison tbody td[data-label="이런 분께 추천"] {
    display: none;
  }
}

@media (max-width: 380px) {
  .provider {
    padding: 14px;
  }
  .brand {
    width: 116px;
  }
  .rank-number,
  .provider.featured .rank-number {
    font-size: 28px;
  }
}

@media (max-width: 360px) {
  h1 {
    font-size: 32px;
  }
  .rank {
    font-size: 32px;
  }
  .provider-bottom {
    gap: 12px;
  }
}

/*
 * MORE TO COMPARE 카드 위계(2026-09).
 * 서비스 이름 아래 한 줄 소개 자리에 핵심 키워드 칩을 두고,
 * "~분께 추천해요." 문장을 크고 진하게 둬 눈이 먼저 잡게 합니다.
 * "주요 특징" 문장은 그대로 둡니다.
 */
#more .provider .reason p {
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* 추천 문장과 "주요 특징" 사이를 좁힙니다(자리 맞춤용 최소 높이 제거). */
#more .provider .reason,
#more .provider.featured .reason {
  min-height: 0;
  margin-bottom: 12px;
}

#more .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

#more .chips li {
  padding: 4px 9px;
  border-radius: 999px;
  background: #f1f3f7;
  color: #5b6676;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

@media (max-width: 650px) {
  /* 좁은 화면에서는 추천 문장을 빼고 칩과 주요 특징만 둡니다. */
  #more .provider .reason,
  #more .provider.featured .reason {
    display: none;
  }
  #more .chips li {
    padding: 3px 8px;
    font-size: 11.5px;
  }
}

/*
 * 1~3위 강조(2026-09): 순위 숫자를 사이트 강조색(빨강) 계열로 칠하되
 * 투명도 대신 채도는 같거나 높고 명도만 조금씩 밝힌 단색을 써서,
 * 3위도 4위 이하 회색보다 확실히 강조돼 보이게 합니다.
 * 공식 홈페이지 버튼(빨강)은 그대로입니다. 카드 띠·메달 색은 쓰지 않습니다.
 */
.top-1 { --rank-color: var(--accent); }  /* #e52f49 · hsl(352 78% 54%) */
.top-2 { --rank-color: hsl(352 84% 61%); }
.top-3 { --rank-color: hsl(352 90% 67%); }

#more .provider.top-1 .rank-number,
#more .provider.top-2 .rank-number,
#more .provider.top-3 .rank-number,
#comparison tbody tr.top-1 .table-rank-number,
#comparison tbody tr.top-2 .table-rank-number,
#comparison tbody tr.top-3 .table-rank-number {
  color: var(--rank-color);
}

#comparison tbody tr.top-1 .table-rank-number,
#comparison tbody tr.top-2 .table-rank-number,
#comparison tbody tr.top-3 .table-rank-number {
  font-weight: 900;
}