/* CLAUDE C-UX · FIRST-01/03 — 서비스 비교·문의 후 안내·터치/포커스 보강.
   home.css 토큰만 사용하고 기존 규칙을 덮어쓰지 않는 추가 전용 스타일이다. */

/* 앵커 이동 시 고정 헤더에 가려지지 않게 한다 */
#compare,#after-inquiry,#contact{scroll-margin-top:84px}

/* 서비스 한눈에 비교 */
.compare-sec{background:var(--raised);border-top:1px solid var(--line)}
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;min-width:760px;border-collapse:collapse;font-size:15px;line-height:24px}
.compare-table caption{text-align:left;padding-bottom:16px;color:var(--ink-muted);font-size:14px;line-height:22px}
.compare-table th,.compare-table td{padding:18px 20px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare-table thead th{border-bottom:2px solid var(--ink);font:700 16px/24px var(--sans);vertical-align:bottom}
.compare-table tbody th{width:132px;color:var(--ink-muted);font-weight:700;font-size:14px}
.compare-state{display:block;margin-top:4px;font:400 13px/20px var(--sans);color:var(--ink-muted)}
.compare-table tfoot td{border-bottom:0;padding-top:24px}
.compare-cta{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:700;text-decoration:underline;text-underline-offset:5px;color:var(--ink)}
.compare-cta:hover{color:var(--ink-muted)}
.compare-note{margin-top:20px;max-width:760px;font-size:14px;line-height:23px;color:var(--ink-muted)}
.compare-help{margin-top:12px;font-size:14px;color:var(--ink-muted)}

/* 문의 후 진행 안내 */
.after-sec{border-top:1px solid var(--line)}
.after-steps{counter-reset:after;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px}
.after-steps li{counter-increment:after;position:relative;padding:20px 0 0;border-top:2px solid var(--line-strong)}
.after-steps li::before{content:counter(after,decimal-leading-zero);display:block;margin-bottom:10px;font:500 13px/18px var(--mono);color:var(--ink-muted)}
.after-steps b{display:block;margin-bottom:6px;font-size:17px;line-height:26px}
.after-steps span{display:block;font-size:15px;line-height:24px;color:var(--ink-muted)}
.after-notice{display:flex;gap:12px;align-items:flex-start;margin-top:36px;padding:18px 20px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);max-width:760px;font-size:15px;line-height:25px}
.after-notice b{flex:none}

/* /video 목적별 상품 찾기 · /sns 운영 방식 구분 */
.choose-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.choose-list li{display:flex;flex-direction:column;gap:8px;padding:24px 0;border-top:1px solid var(--line);min-width:0}
.choose-list b{font-size:17px;line-height:26px}
.choose-list span{color:var(--ink-muted);font-size:15px;line-height:24px}
.choose-cta{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;margin-top:4px;padding:0 4px;font-weight:700;text-decoration:underline;text-underline-offset:5px;color:var(--ink)}
.choose-cta:hover{color:var(--ink-muted)}
.sns-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sns-mode{display:flex;flex-direction:column;gap:12px;padding:28px;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--raised);min-width:0}
.sns-mode h3{font-size:22px;line-height:30px}
.sns-mode p:not(.service-state){color:var(--ink-muted);font-size:15px;line-height:25px}
.sns-mode-off{border-style:dashed;background:var(--surface)}
.sns-mode-off .service-state{color:var(--ink-muted)}
.choose-list :focus-visible,.sns-mode :focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--r-sm)}
@media (max-width:760px){
  .choose-list{grid-template-columns:1fr}
  .sns-modes{grid-template-columns:1fr}
  .sns-mode{padding:22px}
}

/* 터치 타깃: 모바일에서 44px 이상 확보 */
@media (max-width:760px){
  .foot .foot-nav a{min-height:44px}
  .nav a{padding-left:8px;padding-right:8px}
  .iform .agree{min-height:44px;align-items:center}
  .iform .agree a,.check-option{min-height:44px;display:inline-flex;align-items:center}
  .compare-scroll{margin:0 -16px;padding:0 16px}
  .compare-table{min-width:680px}
  .after-steps{grid-template-columns:1fr;gap:0}
  .after-steps li{padding:18px 0 20px}
}
@media (min-width:761px) and (max-width:1023px){
  .nav{gap:20px}
  .nav a{padding-left:6px;padding-right:6px}
  .after-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
}

/* 어두운 배경 외 밝은 영역에서도 포커스가 보이도록 한다 */
.compare-sec :focus-visible,.after-sec :focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:var(--r-sm)}
.compare-scroll:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (forced-colors:active){
  .compare-table thead th{border-bottom-color:CanvasText}
  .after-steps li{border-top-color:CanvasText}
  .after-notice{border-color:CanvasText}
}