/* * JTBC 장애인 서비스 (able.css)
 * 2025-11-17
 */

@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 400 600 900;
  /* 프리텐다드 변수 폰트가 지원하는 전체 굵기 범위 */
  font-style: normal;
  font-display: swap;
  /* 폰트 로딩 시 텍스트가 바로 보이도록 설정 */
  src: url('https://nstatic.jtbc.co.kr/inc/fonts/PretendardVariable.woff2') format('woff2-variations');
}

/* 기본 스타일 */
body {
  font-family: 'Noto Sans KR';
  line-height: 1.6;
  color: #2A2A2A;
  background-color: #fff;
}

.able-header {
  border-bottom: 1px solid #E4E4E4;
}

.able-header>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1245px;
  height: 84px;
  margin: 0 auto;
  padding: 0 14px;
}

.able-header .logo {
  width: 86px;
  height: 44px;
}

.able-header .link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 6px 4px 6px 12px;
  border: 1px solid #2A2A2A;
  border-radius: 16px;
}

.able-header .link>span {
  color: #2A2A2A;
  flex-grow: 1;
  font-family: 'Pretendard Variable';
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
}

.able-header .link:after {
  flex-grow: 1;
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: url('https://images.jtbc.co.kr/ui_jtbc/able/link-arrow@2x.png') no-repeat 0 0 / 20px;
}

/* 레이아웃 */
.able-container {
  width: 1205px;
  margin: 0 auto;
  padding: 40px 20px 0 20px;
}

.able-container .bold {
  font-weight: bold;
}

/* 텍스트 및 제목 */
.main-title {
  padding: 70px 0 80px;
  border-bottom: 2px solid #404040;
  font-family: JTBC;
  font-weight: 800;
  font-size: 54px;
  line-height: 66px;
  letter-spacing: -1%;
  text-align: center;
  vertical-align: middle;
}

.able-section {
  /*margin-bottom: 50px;*/
}

.section-title {
  display: inline-flex;
  margin: 50px 0 40px;
  font-family: 'Noto Sans KR';
  font-weight: bold;
  font-size: 40px;
  line-height: 50px;
  letter-spacing: 0;
  vertical-align: middle;
}

.section-title.bg {
  margin: 0;
  padding: 14px 29px 18px;
  background-color: #2A2A2A;
  border-radius: 40px;
  color: #fff;
  font-family: 'Noto Sans KR';
  font-weight: normal;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0;
  vertical-align: middle;
}

h2.section-title {
  margin: 70px 0 40px;
}

.sub-title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 15px;
}

.section-desc {
  position: relative;
  margin-bottom: 80px;
  padding-left: 16px;
  font-family: 'Noto Sans KR';
  font-weight: normal;
  font-size: 32px;
  line-height: 100%;
  letter-spacing: 0;
  vertical-align: middle;
}

.section-desc:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  overflow: hidden;
  background: url('https://images.jtbc.co.kr/ui_jtbc/able/icon-list-circle.png') no-repeat 0 0 / contain;
}

/* 키보드 가이드 리스트 */
.guide-list {
  list-style: none;
}

.guide-list li {
  position: relative;
  margin-bottom: 40px;
  padding-left: 16px;
  font-family: 'Noto Sans KR';
  font-weight: normal;
  font-size: 32px;
  line-height: 100%;
  letter-spacing: 0;
  vertical-align: middle;
}

.guide-list li:nth-child(1) {
  margin-bottom: 24px;
}

.guide-list li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  overflow: hidden;
  background: url('https://images.jtbc.co.kr/ui_jtbc/able/icon-list-circle.png') no-repeat 0 0 / contain;
}

.guide-list li:last-child {
  margin-bottom: 0;
}

.guide-key {
  margin-top: 40px;
  padding-bottom: 70px;
  border-bottom: 1px solid #404040;
  font-family: 'Noto Sans KR';
  font-weight: normal;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0;
  vertical-align: middle;
}

.guide-key li {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.guide-key li:last-child {
  margin-bottom: 0;
}

.guide-key li:last-child .key {
  padding-left: 0;
  padding-right: 0;
}

.guide-key li > span {
  margin-right: 20px;
}

/* 키보드 키 스타일 */
strong.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 74px;
  margin-right: 20px;
  padding: 21px 20px 25px;
  border: 1px solid #797D84;
  border-radius: 8px;
  box-sizing: border-box;
  font-family: 'Noto Sans KR';
  font-weight: normal;
  font-size: 28px;
  line-height: 28px;
  letter-spacing: 0;
  vertical-align: middle;
}

strong.key.arrow {
  padding: 21px 20px 21px;
}

/* 단축키 테이블 */
.table-wrap {
  overflow-x: auto;
  /* 모바일 대응 */
}

.shortcut-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #ddd;
  font-size: 15px;
}

/* 접근성을 위한 캡션 숨김 (화면에는 보이지 않음) */
.shortcut-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}

.shortcut-table td {
  padding: 0 0 24px;
  vertical-align: middle;
}

.shortcut-table .col-key {
  width: 120px;
  /* '키' 컬럼 너비 고정 */
}

.shortcut-table .col-desc {
  width: auto;
}

/* 테이블 첫 번째 열(키) 스타일 */
.shortcut-table td:first-child {
  color: #111;
}

/* 단계별 가이드 (이미지 포함) */
.guide-steps {
  list-style: none;
  padding-left: 0;
  margin-top: 24px;
}

.guide-steps li {
  /*margin-bottom: 40px;*/
}

.guide-steps .step-desc {
  margin-bottom: 24px;
  font-family: 'Noto Sans KR';
  font-weight: normal;
  font-size: 32px;
  line-height: 100%;
  letter-spacing: 0;
  vertical-align: middle;
}

.guide-steps .img-wrap {
  margin-bottom: 80px;
  overflow: hidden;
  line-height: 0;
}

.guide-steps .img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.copyright-wrap {
  padding: 40px 0 100px;
}
.copyright-wrap ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap:30px
}
.copyright-wrap ul > li {
  font-family: 'Noto Sans KR';
  font-weight: 400;
  font-size: 13px;
  line-height: 100%;
  letter-spacing: 0;
}

@media screen and (max-width: 1245px) {

  .able-header>div {
    max-width: none;
    height: calc(100vw * (84px / 1245px));
    padding: 0 calc(100vw * (14px / 1245px));
  }

  .able-header .logo {
    width: calc(100vw * (86px / 1245px));
    height: calc(100vw * (44px / 1245px));
  }

  .able-header .link {
    height: calc(100vw * (20px / 1245px));
    padding: calc(100vw * (6px / 1245px)) calc(100vw * (4px / 1245px)) calc(100vw * (6px / 1245px)) calc(100vw * (12px / 1245px));
    border: calc(100vw * (1px / 1245px)) solid #2A2A2A;
    border-radius: calc(100vw * (16px / 1245px));
  }

  .able-header .link>span {
    font-size: calc(100vw * (14px / 1245px));
    line-height: calc(100vw * (20px / 1245px));
  }

  .able-header .link:after {
    width: calc(100vw * (20px / 1245px));
    height: calc(100vw * (20px / 1245px));
    background: url('https://images.jtbc.co.kr/ui_jtbc/able/link-arrow@2x.png') no-repeat 0 0 / calc(100vw * (20px / 1245px));
  }

  /* 레이아웃 */
  .able-container {
    width: calc(100vw * (1205px / 1245px));
    padding: calc(100vw * (40px / 1245px)) calc(100vw * (20px / 1245px)) 0 calc(100vw * (20px / 1245px));
  }

  /* 텍스트 및 제목 */
  .main-title {
    padding: calc(100vw * (70px / 1245px)) 0 calc(100vw * (80px / 1245px));
    border-bottom: calc(100vw * (2px / 1245px)) solid #404040;
    font-size: calc(100vw * (54px / 1245px));
    line-height: calc(100vw * (66px / 1245px));
  }

  .able-section {
    /*margin-bottom: calc(100vw * (50px / 1245px));*/
  }

  .section-title {
    margin: calc(100vw * (50px / 1245px)) 0 calc(100vw * (40px / 1245px));
    font-size: calc(100vw * (40px / 1245px));
    line-height: calc(100vw * (50px / 1245px));
  }

  .section-title.bg {
    padding: calc(100vw * (14px / 1245px)) calc(100vw * (29px / 1245px)) calc(100vw * (18px / 1245px));
    border-radius: calc(100vw * (40px / 1245px));
    font-size: calc(100vw * (32px / 1245px));
    line-height: calc(100vw * (32px / 1245px));
  }

  h2.section-title {
    margin: calc(100vw * (70px / 1245px)) 0 calc(100vw * (40px / 1245px));
  }

  .sub-title {
    font-size: calc(100vw * (18px / 1245px));
    margin-top: calc(100vw * (30px / 1245px));
    margin-bottom: calc(100vw * (15px / 1245px));
  }

  .section-desc {
    margin-bottom: calc(100vw * (80px / 1245px));
    padding-left: calc(100vw * (16px / 1245px));
    font-size: calc(100vw * (32px / 1245px));
  }

  .section-desc:before {
    width: calc(100vw * (6px / 1245px));
    height: calc(100vw * (6px / 1245px));
  }

  /* 키보드 가이드 리스트 */
  .guide-list li {
    margin-bottom: calc(100vw * (40px / 1245px));
    padding-left: calc(100vw * (16px / 1245px));
    font-size: calc(100vw * (32px / 1245px));
  }

  .guide-list li:nth-child(1) {
    margin-bottom: calc(100vw * (24px / 1245px));
  }

  .guide-list li:before {
    width: calc(100vw * (6px / 1245px));
    height: calc(100vw * (6px / 1245px));
  }

  .guide-key {
    margin-top: calc(100vw * (40px / 1245px));
    padding-bottom: calc(100vw * (70px / 1245px));
    border-bottom: calc(100vw * (1px / 1245px)) solid #404040;
    font-size: calc(100vw * (32px / 1245px));
    line-height: calc(100vw * (32px / 1245px));
  }

  .guide-key li {
    margin-bottom: calc(100vw * (24px / 1245px));
  }

  .guide-key li > span {
    margin-right: calc(100vw * (20px / 1245px));
  }

  /* 키보드 키 스타일 */
  strong.key {
    min-width: calc(100vw * (74px / 1245px));
    height: calc(100vw * (74px / 1245px));
    margin-right: calc(100vw * (20px / 1245px));
    padding: calc(100vw * (21px / 1245px)) calc(100vw * (20px / 1245px)) calc(100vw * (25px / 1245px));
    border: calc(100vw * (1px / 1245px)) solid #797D84;
    border-radius: calc(100vw * (8px / 1245px));
    font-size: calc(100vw * (28px / 1245px));
    line-height: calc(100vw * (28px / 1245px));
  }

  strong.key.arrow {
    padding: calc(100vw * (21px / 1245px)) calc(100vw * (20px / 1245px)) calc(100vw * (21px / 1245px));
  }

  .guide-key li:nth-child(2) > strong.key.arrow > img,
  .guide-key li:nth-child(3) > strong.key.arrow > img {
    width: calc(100vw * (10px / 1245px));
    height: calc(100vw * (20px / 1245px));
  }

  .guide-key li:nth-child(4) > strong.key.arrow > img,
  .guide-key li:nth-child(5) > strong.key.arrow > img {
    width: calc(100vw * (20px / 1245px));
    height: calc(100vw * (10px / 1245px));
  }

  /* 단축키 테이블 */
  .shortcut-table {
    border-top: calc(100vw * (1px / 1245px)) solid #ddd;
    font-size: calc(100vw * (15px / 1245px));
  }

  /* 접근성을 위한 캡션 숨김 (화면에는 보이지 않음) */
  .shortcut-table caption {
    width: calc(100vw * (1px / 1245px));
    height: calc(100vw * (1px / 1245px));
    margin: calc(100vw * (-1px / 1245px));
  }

  .shortcut-table td {
    padding: 0 0 calc(100vw * (24px / 1245px));
  }

  .shortcut-table .col-key {
    width: calc(100vw * (120px / 1245px));
    /* '키' 컬럼 너비 고정 */
  }

  /* 단계별 가이드 (이미지 포함) */
  .guide-steps {
    margin-top: calc(100vw * (24px / 1245px));
  }

  .guide-steps li {
    /*margin-bottom: calc(100vw * (40px / 1245px));*/
  }

  .guide-steps .step-desc {
    margin-bottom: calc(100vw * (24px / 1245px));
    font-size: calc(100vw * (32px / 1245px));
  }

  .guide-steps .img-wrap {
    margin-bottom: calc(100vw * (80px / 1245px));
  }

  .copyright-wrap {
    padding: calc(100vw * (40px / 1245px)) 0 calc(100vw * (100px / 1245px));
  }
  .copyright-wrap ul {
    gap: calc(100vw * (30px / 1245px));
  }
  .copyright-wrap ul > li {
    font-size: calc(100vw * (13px / 1245px));
  }
}