/**
 * 고객지원 서비스 안내 (/cs, /cs/info)
 * 2026-11-03  ISC 117번
 * 2026-11-04  ISC 119번  한 화면에 다 보이게 본문을 다시 짰습니다.
 *
 * 이 화면에서만 씁니다. cs.css 를 건드리지 않으려고 따로 둡니다.
 * 카드와 색 칠한 칸 없이 가는 선과 글자 굵기로 나눕니다 (첫 화면과 같은 결).
 * 머리말의 로그인 전 메뉴(자물쇠, 로그인 단추)도 여기 있습니다.
 */

/* ---------- 본문 ----------
   119번: PC 한 화면(1280×900, 머리말과 바닥글 포함)에 다 들어오게 줄였습니다.
   4단계는 가로 네 칸, 접수 방법과 센터 안내는 나란히 둡니다. 휴대폰은 위에서 아래로 쌓습니다. */
.cs_info{padding-bottom:40px;}
.cs_info .cs_title{padding:32px 0 20px;}
.cs_info .cs_title p{margin-top:6px;}

.ci_steps{
  list-style:none;margin:0;padding:0;counter-reset:ci;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid #39424E;border-bottom:1px solid #E3E6EA;
}
.ci_steps > li{padding:14px 20px 16px 0;counter-increment:ci;}
.ci_steps > li + li{padding-left:20px;border-left:1px solid #E3E6EA;}
.ci_steps > li::before{
  content:counter(ci,decimal-leading-zero);display:inline-block;margin-right:8px;
  font-size:14px;font-weight:700;color:#0099B0;line-height:1.5;
}
.ci_steps b{font-size:15px;font-weight:700;color:#14171C;line-height:1.5;}
.ci_steps span{display:block;margin-top:6px;font-size:13px;line-height:1.7;color:#485363;}

.ci_cols{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:28px;}

.ci_h{
  margin:0;padding-bottom:10px;border-bottom:1px solid #39424E;
  font-size:16px;font-weight:700;color:#14171C;
}

.ci_way{padding:12px 0;border-bottom:1px solid #E3E6EA;}
.ci_way b{display:block;margin-bottom:4px;font-size:15px;font-weight:700;color:#14171C;}
.ci_way span{font-size:13px;line-height:1.7;color:#485363;}

.ci_cta{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:16px;}
.ci_cta .btn{min-width:160px;display:inline-flex;align-items:center;justify-content:center;text-align:center;}
.ci_cta small{font-size:13px;color:#848E9D;}

.ci_kv{display:grid;grid-template-columns:180px 1fr;margin:0;}
.ci_kv dt,
.ci_kv dd{margin:0;padding:9px 0;border-bottom:1px solid #E3E6EA;font-size:13px;line-height:1.7;}
.ci_kv dt{color:#6B7787;}
.ci_kv dd{color:#14171C;}

.ci_tel{font-weight:700;color:#14171C;white-space:nowrap;}
a.ci_tel:hover{color:#0099B0;}

.ci_ask{margin-top:12px;font-size:13px;line-height:1.7;color:#6B7787;}

/* ---------- 머리말: 로그인 전 메뉴 ---------- */
.cs_nav a.lock{color:#9BA5B4;}
.cs_nav a.lock svg{width:11px;height:11px;margin-left:4px;vertical-align:-1px;fill:none;stroke:currentColor;stroke-width:1.6;}
.cs_nav a.lock:hover{color:#6B7787;}

.cs_login_btn{
  flex:0 0 auto;display:inline-flex;align-items:center;height:36px;padding:0 16px;
  border-radius:8px;background:#0099B0;color:#FFF !important;font-size:14px;font-weight:600;
  transition:background .25s ease;
}
.cs_login_btn:hover{background:#008498;}

@media screen and (max-width:768px){
  .ci_steps{grid-template-columns:1fr;}
  .ci_steps > li,
  .ci_steps > li + li{padding:14px 0;border-left:0;}
  .ci_steps > li + li{border-top:1px solid #E3E6EA;}
  .ci_cols{grid-template-columns:1fr;gap:32px;}
  .ci_kv{grid-template-columns:1fr;}
  .ci_kv dt{padding-bottom:0;border-bottom:0;}
  .ci_kv dd{padding-top:4px;}
  .ci_cta .btn{flex:1 1 100%;}
  /* 휴대폰에서는 로그인 단추를 메뉴 단추 왼쪽에 둡니다 */
  .cs_login_btn{order:2;height:34px;padding:0 12px;font-size:13px;margin-left:auto;}
  .cs_head .cs_burger{order:3;}
}