/*
 * fx 자사몰 솔루션 비교(화면키 compare) — /compare/ 와 그 아래 세 쪽. 접두사 fx-cmp-.
 * 어두운 큰 머리(제목·한 줄 결론·기준일) → 밝은 읽기 면 → 「옮기는 방법」만 어두운 면 → 밝은 면 → 밝은 CTA 띠(푸터는 어둡다).
 * 모든 구획이 fx-wrap 하나·왼쪽선 하나에 맞고 제목은 항상 구획 위에 온다. 구분은 선이 아니라 여백과 글자 크기 대비로 하고,
 * 선은 비교 표 머리 아래 한 줄과 행 사이의 아주 옅은 선만 남긴다. 본문 링크는 굵기·색·↗/→ 글자로 알리고 밑줄은 호버·포커스 때만.
 * 공통 부품(fx-wrap·fx-button)·토큰(--fx-*)만 쓴다. 비교 표는 모든 열을 같은 무게로 보인다(특정 열 강조 없음).
 * 본문은 편집 가능한 페이지 내용이라 요소(h3·p·ul·ol·table·a)를 클래스 없이 .fx-cmp-prose 아래에서 꾸민다.
 * 순서: 바탕 -> 머리 -> 구획 -> 본문 요소 -> 표 -> 구획별(상대·방법·FAQ·출처·함께 보기) -> 끝 CTA -> 반응형(1024/768/480) -> reduced-motion
 */

/* ===== 바탕 ===== */
.fx-cmp{overflow-x:clip;background:var(--fx-bg);color:var(--fx-fg)}

/* ===== 머리 ===== */
.fx-cmp-head{padding:160px 0 96px;background:var(--fx-s0)}
.fx-cmp-kind{margin-bottom:var(--fx-sp-6);font-size:var(--fx-size-small);font-weight:600;line-height:1.4;letter-spacing:.02em;color:var(--fx-fg-3)}
.fx-cmp-kind__link{color:inherit;transition:color .2s ease}
.fx-cmp-kind__link:hover,.fx-cmp-kind__link:focus-visible{color:var(--fx-fg);text-decoration:underline;text-underline-offset:4px}
.fx-cmp-h1{max-width:1000px;font-weight:700;letter-spacing:-.03em;word-break:keep-all;text-wrap:balance}
.fx-cmp-h1__main{display:block;font-size:clamp(36px,6vw,72px);line-height:1.12}
.fx-cmp-h1__sub{display:block;margin-top:var(--fx-sp-4);font-size:clamp(18px,2.2vw,26px);line-height:1.5;font-weight:400;letter-spacing:-.01em;color:var(--fx-fg-2)}
.fx-cmp-verdict{max-width:880px;margin-top:var(--fx-sp-16)}
.fx-cmp-verdict__label{margin-bottom:var(--fx-sp-3);font-size:var(--fx-size-small);font-weight:600;line-height:1.4;letter-spacing:.02em;color:var(--fx-fg-3)}
.fx-cmp-verdict__body>p{font-size:clamp(20px,2.4vw,28px);line-height:1.55;font-weight:600;letter-spacing:-.02em;color:var(--fx-fg);word-break:keep-all}
.fx-cmp-asof{margin-top:var(--fx-sp-8);font-size:var(--fx-size-small);line-height:1.5;color:var(--fx-fg-3);font-variant-numeric:tabular-nums}
.fx-cmp-asof__link{color:var(--fx-brand);font-weight:600;transition:color .2s ease}
.fx-cmp-asof__link:hover,.fx-cmp-asof__link:focus-visible{color:var(--fx-brand-hover);text-decoration:underline;text-underline-offset:4px}

/* ===== 구획: 제목은 항상 위, 구획 사이는 선 없이 120px(밝은 면 둘 사이 60+60) ===== */
.fx-cmp-intro{padding:60px 0}
.fx-cmp-head+.fx-cmp-sec{padding-top:72px}
.fx-cmp-sec{padding:60px 0;min-width:0;scroll-margin-top:96px}
.fx-cmp-sec:has(+ .fx-cmp-sec--steps){padding-bottom:120px}
.fx-cmp-sec--steps+.fx-cmp-sec{padding-top:120px}
.fx-cmp-h2{margin-bottom:var(--fx-sp-8);font-size:clamp(30px,4vw,48px);line-height:1.2;font-weight:700;letter-spacing:-.03em;word-break:keep-all}
.fx-cmp-body{min-width:0}

/* ===== 본문 요소: 글은 최대 760px, 표·그리드는 전폭 ===== */
.fx-cmp-prose{font-size:17px;line-height:1.8;color:var(--fx-fg-2);word-break:keep-all;overflow-wrap:break-word}
.fx-cmp-prose>*+*{margin-top:var(--fx-sp-4)}
.fx-cmp-prose>p,.fx-cmp-prose>h3{max-width:760px}
.fx-cmp-prose strong{color:var(--fx-fg);font-weight:700}
.fx-cmp-prose a{color:var(--fx-fg);font-weight:600;text-decoration:none;overflow-wrap:anywhere;transition:text-decoration-color .2s ease}
.fx-cmp-prose a:hover,.fx-cmp-prose a:focus-visible{text-decoration:underline;text-decoration-thickness:.1em;text-underline-offset:.2em}
.fx-cmp-prose a:focus-visible,.fx-cmp-kind__link:focus-visible,.fx-cmp-asof__link:focus-visible,.fx-cmp-scroll:focus-visible,.fx-cmp-cta .fx-button:focus-visible{outline:2px solid var(--fx-ring);outline-offset:3px;border-radius:2px}
.fx-cmp-ext{font-weight:400;color:var(--fx-fg-3)}
.fx-cmp-prose h3{color:var(--fx-fg);font-size:20px;line-height:1.5;font-weight:700;letter-spacing:-.02em}

/* ===== 비교 표: 고정 레이아웃, 행 머리 200px + 나머지 같은 폭, 머리 아래 2px 한 줄, 행 사이는 아주 옅게 ===== */
.fx-cmp-scroll{overflow-x:auto;overscroll-behavior-x:contain}
.fx-cmp-scroll table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:15px;line-height:1.7;font-variant-numeric:tabular-nums}
.fx-cmp-scroll th,.fx-cmp-scroll td{padding:20px 24px 20px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--fx-edge)}
.fx-cmp-scroll tbody tr:last-child>*{border-bottom:0}
.fx-cmp-scroll thead th{padding-top:0;padding-bottom:16px;font-size:18px;line-height:1.4;font-weight:700;letter-spacing:-.01em;color:var(--fx-fg);border-bottom:2px solid var(--fx-fg)}
.fx-cmp-scroll thead th:first-child,.fx-cmp-scroll tbody th{width:200px}
.fx-cmp-scroll tbody th{font-weight:600;color:var(--fx-fg)}
.fx-cmp-scroll td{color:var(--fx-fg-2);overflow-wrap:anywhere}
.fx-cmp-scroll th:last-child,.fx-cmp-scroll td:last-child{padding-right:0}

/* ===== 구획별: 선 없이 여백과 글자 대비로 나눈다 ===== */
/* 상대가 더 나은 경우: 768 이상 2열 */
.fx-cmp-sec--other ul{display:grid;gap:var(--fx-sp-8) var(--fx-sp-16);grid-template-columns:minmax(0,1fr);list-style:none}
.fx-cmp-sec--other li{font-size:17px;line-height:1.75}
.fx-cmp-sec--other li+li{margin-top:0}

/* 옮기는 방법(어두운 면): 라임 큰 번호 */
.fx-cmp-sec--steps{padding:120px 0}
.fx-cmp-sec--steps ol{display:grid;gap:var(--fx-sp-12) var(--fx-sp-8);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));list-style:none;counter-reset:cmpstep}
.fx-cmp-sec--steps li{counter-increment:cmpstep}
.fx-cmp-sec--steps li+li{margin-top:0}
.fx-cmp-sec--steps li::before{content:counter(cmpstep);display:block;margin-bottom:var(--fx-sp-4);font-size:clamp(48px,6vw,72px);line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--fx-brand);font-variant-numeric:tabular-nums}
.fx-cmp-sec--steps .fx-cmp-prose a:focus-visible{outline-color:var(--fx-brand)}

/* FAQ: 질문 굵게, 답은 그 아래(1024 이상은 질문 왼쪽·답 오른쪽). 쌍 사이는 여백만 */
.fx-cmp-sec--faq .fx-cmp-prose{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--fx-sp-2)}
.fx-cmp-sec--faq .fx-cmp-prose>*+*{margin-top:0}
.fx-cmp-sec--faq .fx-cmp-prose>h3{max-width:none;margin-top:var(--fx-sp-8);font-size:20px}
.fx-cmp-sec--faq .fx-cmp-prose>h3:first-child{margin-top:0}
.fx-cmp-sec--faq .fx-cmp-prose>h3+p{max-width:760px}

/* 그 밖 구획 */
.fx-cmp-sec--generic .fx-cmp-prose ul,.fx-cmp-sec--generic .fx-cmp-prose ol{max-width:760px;padding-left:1.25em}

/* 기준일과 출처: 같은 표 규칙, 14px 차분한 톤 */
.fx-cmp-sec--sources .fx-cmp-prose>p{font-size:15px;line-height:1.7}
.fx-cmp-sec--sources .fx-cmp-scroll{margin-top:var(--fx-sp-8)}
.fx-cmp-sec--sources .fx-cmp-scroll table{font-size:var(--fx-size-small);line-height:1.65}
.fx-cmp-sec--sources .fx-cmp-scroll th,.fx-cmp-sec--sources .fx-cmp-scroll td{padding-top:14px;padding-bottom:14px}
.fx-cmp-sec--sources .fx-cmp-scroll thead th{padding-top:0;padding-bottom:12px;font-size:15px}
.fx-cmp-sec--sources .fx-cmp-scroll tbody th{font-weight:600;color:var(--fx-fg-2)}
.fx-cmp-sec--sources .fx-cmp-scroll thead th:first-child,.fx-cmp-sec--sources .fx-cmp-scroll tbody th{width:72px}
.fx-cmp-sec--sources .fx-cmp-scroll thead th:nth-child(2){width:34%}
.fx-cmp-sec--sources .fx-cmp-scroll thead th:last-child{width:120px}

/* 함께 보기: 가로로 놓인 링크 목록(선 없음) */
.fx-cmp-sec--related ul{display:flex;flex-direction:column;gap:var(--fx-sp-4);list-style:none}
.fx-cmp-sec--related li{display:block;font-size:0;line-height:0;color:var(--fx-fg-3)}
.fx-cmp-sec--related li+li{margin-top:0}
.fx-cmp-sec--related a{display:inline-block;font-size:18px;line-height:1.6;font-weight:600;margin:0 var(--fx-sp-6) var(--fx-sp-2) 0}
.fx-cmp-rel-desc{display:block;margin:-4px 0 var(--fx-sp-2);font-size:15px;line-height:1.6;font-weight:400;color:var(--fx-fg-3)}
.fx-cmp-sec--related a::after{content:"\2192";display:inline-block;margin-left:var(--fx-sp-2);font-weight:400;color:var(--fx-fg-3);transition:transform .2s ease}
.fx-cmp-sec--related a:hover::after,.fx-cmp-sec--related a:focus-visible::after{transform:translateX(4px)}

/* ===== 끝 CTA 띠: 밝은 면(푸터가 어두워 붙지 않게 아래 여백 크게), 큰 타이포 + 버튼 둘 ===== */
.fx-cmp-cta{padding:120px 0 160px}
.fx-cmp-cta__title{max-width:880px;font-size:clamp(32px,4.6vw,60px);line-height:1.18;font-weight:700;letter-spacing:-.03em;word-break:keep-all}
.fx-cmp-cta__text{max-width:640px;margin-top:var(--fx-sp-6);font-size:18px;line-height:1.7;color:var(--fx-fg-2);word-break:keep-all}
.fx-cmp-cta__actions{display:flex;flex-wrap:wrap;gap:var(--fx-sp-3);margin-top:var(--fx-sp-8)}
.fx-cmp-cta .fx-button--line{box-shadow:inset 0 0 0 1px var(--fx-fg);transition:background-color .2s ease,color .2s ease,transform .25s ease}
.fx-cmp-cta .fx-button--line:hover{background:var(--fx-fg);color:var(--fx-bg)}

/* ===== 반응형 ===== */
@media (min-width:1024px){
  .fx-cmp-sec--faq .fx-cmp-prose{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--fx-sp-12);row-gap:0}
  .fx-cmp-sec--faq .fx-cmp-prose>h3{grid-column:1;margin-top:0;padding-top:var(--fx-sp-8)}
  .fx-cmp-sec--faq .fx-cmp-prose>h3+p{grid-column:2;margin-top:0;padding-top:calc(var(--fx-sp-8) - 2px)}
  .fx-cmp-sec--faq .fx-cmp-prose>h3:first-child,.fx-cmp-sec--faq .fx-cmp-prose>h3:first-child+p{padding-top:0}
}
@media (min-width:768px){
  .fx-cmp-sec--other ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .fx-cmp-head{padding:112px 0 64px}
  .fx-cmp-verdict{margin-top:var(--fx-sp-12)}
  .fx-cmp-intro,.fx-cmp-sec{padding:36px 0}
  .fx-cmp-head+.fx-cmp-sec{padding-top:48px}
  .fx-cmp-sec:has(+ .fx-cmp-sec--steps){padding-bottom:72px}
  .fx-cmp-sec--steps,.fx-cmp-sec--steps+.fx-cmp-sec{padding-top:72px}
  .fx-cmp-sec--steps{padding-bottom:72px}
  .fx-cmp-h2{margin-bottom:var(--fx-sp-6)}
  .fx-cmp-prose{font-size:16px}
  .fx-cmp-scroll{overflow:visible}
  .fx-cmp-scroll table,.fx-cmp-scroll tbody,.fx-cmp-scroll tr,.fx-cmp-scroll th,.fx-cmp-scroll td{display:block;width:100%}
  .fx-cmp-scroll thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .fx-cmp-scroll tr{padding:var(--fx-sp-6) 0;border-bottom:1px solid var(--fx-edge)}
  .fx-cmp-scroll tbody tr:first-child{padding-top:0}
  .fx-cmp-scroll tbody tr:last-child{border-bottom:0}
  .fx-cmp-scroll th,.fx-cmp-scroll td{padding:0;border-bottom:0}
  .fx-cmp-scroll thead th:first-child,.fx-cmp-scroll tbody th,.fx-cmp-sec--sources .fx-cmp-scroll tbody th{width:100%}
  .fx-cmp-scroll tbody th{margin-bottom:var(--fx-sp-3);font-size:17px}
  .fx-cmp-sec--sources .fx-cmp-scroll th,.fx-cmp-sec--sources .fx-cmp-scroll td{padding:0}
  .fx-cmp-scroll td{margin-top:var(--fx-sp-3)}
  .fx-cmp-scroll td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:13px;font-weight:600;line-height:1.5;color:var(--fx-fg-3)}
  .fx-cmp-sec--steps ol{grid-template-columns:minmax(0,1fr)}
  .fx-cmp-cta{padding:72px 0 112px}
  .fx-cmp-cta__actions .fx-button{flex:1 1 100%}
}
@media (max-width:480px){
  .fx-cmp-h1__main{font-size:32px}
  .fx-cmp-cta__title{font-size:30px}
}

@media (prefers-reduced-motion:reduce){
  .fx-cmp-prose a,.fx-cmp-kind__link,.fx-cmp-asof__link,.fx-cmp-sec--related a::after,.fx-cmp-cta .fx-button--line{transition:none}
  .fx-cmp-sec--related a:hover::after,.fx-cmp-sec--related a:focus-visible::after{transform:none}
}