@charset "utf-8";
/* * JTBC 공모사채 투자자 안내센터 (creditor.css)
 * CDSJ-851 / Figma [버전2] 공모사채 투자자 안내센터 B (node 2099-9609)
 *
 * 기본 구성 : https://jtbc.co.kr/help/able (JTBC 장애인 서비스) 레이아웃
 *   - 문서 골격 / reset.css / 서버 절대경로 에셋 규칙을 그대로 따름
 *   - PC·MW 단일 마크업, 브레이크포인트 분기 없이 등비 축소만 사용
 *
 * 설계 기준폭
 *   - GNB 상단바 : 1245px  → 1245px 이하에서 calc(100vw * (Npx / 1245px))
 *   - 본문/푸터  :  640px  →  640px 이하에서 calc(100vw * (Npx /  640px))
 */

/* ------------------------------------------------------------------
   폰트
   reset.css 의 @font-face 는 루트 상대경로(/inc/fonts/...)를 사용하므로
   jtbc.co.kr 도메인 밖에서는 로드되지 않는다. 절대경로로 재선언한다.
   ------------------------------------------------------------------ */
@font-face {
  font-family: JTBC;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('https://nstatic.jtbc.co.kr/inc/fonts/JTBC/JTBC-Regular.woff2') format('woff2');
}

@font-face {
  font-family: JTBC;
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('https://nstatic.jtbc.co.kr/inc/fonts/JTBC/JTBC-ExtraBold.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('https://nstatic.jtbc.co.kr/inc/fonts/NotoSansKR/NotoSansKR-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('https://nstatic.jtbc.co.kr/inc/fonts/NotoSansKR/NotoSansKR-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  src: url('https://nstatic.jtbc.co.kr/inc/fonts/PretendardVariable.woff2') format('woff2-variations');
}

/* ------------------------------------------------------------------
   [추가] 레이아웃 시프트 방지용 대체 폰트 (메트릭 매칭)
   - Pretendard 로드 전 시스템 폰트가 Pretendard와 동일한 공간을
     차지하도록 조정하여 폰트 교체 시 글자 밀림(FOUT) 제거
   - 아래 수치는 근사치이며, 정확한 값은 Fontaine 등으로 실측 권장
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'Pretendard-fallback';
  src: local('Apple SD Gothic Neo'), local('AppleSDGothicNeo-Regular'),
       local('Malgun Gothic'), local('맑은 고딕');
  font-display: swap;
  size-adjust: 100.9%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ------------------------------------------------------------------
   디자인 토큰
   ------------------------------------------------------------------ */
:root {
  --color-point: #bb50ff;        /* color/onair-highlight : 보더·텍스트 */
  --color-point-fill: #ba50ff;   /* 버튼 배경 */
  --color-text: #2a2a2a;
  --color-text-sub: #666;
  --color-text-mute: #777;
  --color-text-off: #999;
  --color-line: #dfe0e1;         /* line/default */
  --color-line-gray: #e4e4e4;    /* colGray3 */
  --color-line-light: #eaeaea;
  --color-bg: #f8f8f8;
  --font-base: 'Pretendard Variable', 'Pretendard-fallback',
               'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
}

/* ------------------------------------------------------------------
   기본
   ------------------------------------------------------------------ */
body {
  font-family: var(--font-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}

/* ------------------------------------------------------------------
   GNB
   ------------------------------------------------------------------ */
.gnb {
  background-color: #fff;
}

.gnb-top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 14px;
  border-bottom: 1px solid var(--color-line-gray);
}

.gnb-top > .inner {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1245px;
}

.gnb-brand {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.gnb-brand .logo {
  flex-shrink: 0;
  width: 86px;
  height: 44px;
}

.gnb-brand .service-name {
  flex: 1 0 0;
  min-width: 0;
  padding: 16px 0 6px;
  overflow: hidden;
  color: var(--color-text);
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gnb-link {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: 6px 4px 6px 12px;
  border: 1px solid var(--color-text);
  border-radius: 16px;
}

.gnb-link > span {
  color: var(--color-text);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

.gnb-link:after {
  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;
}

.gnb-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--color-line-gray);
}

.gnb-menu > ul {
  display: flex;
  gap: 16px;
  width: 640px;
  max-width: 100%;
  height: 60px;
}

.gnb-menu > ul > li {
  flex: 1 0 0;
  min-width: 0;
}

/* reset.css 의 a:link(0,1,1) 를 확실히 넘기기 위해 가상클래스까지 함께 선언 */
.gnb-menu a,
.gnb-menu a:link,
.gnb-menu a:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 12px 8px;
  box-sizing: border-box;
  color: var(--color-text-off);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  white-space: nowrap;
}

.gnb-menu .on a,
.gnb-menu .on a:link,
.gnb-menu .on a:visited {
  border-bottom: 2px solid var(--color-point);
  color: var(--color-point);
}

/* ------------------------------------------------------------------
   레이아웃 : 본문 컬럼 640px
   ------------------------------------------------------------------ */
.container {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  width: 640px;
  max-width: calc(100% - 20px);
  margin: 0 auto;
  padding: 60px 0 100px;
}

/* ------------------------------------------------------------------
   인사말
   ------------------------------------------------------------------ */
.greeting {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.greeting-title {
  color: var(--color-text);
  font-family: JTBC, var(--font-base);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.5;
  text-align: center;
}

.greeting-title .round {
  display: block;
  font-weight: 400;
}

.greeting-desc {
  width: 100%;
  color: var(--color-text);
  font-size: 17px;
  line-height: 28px;
  letter-spacing: -0.5233px;
  text-align: left;
}

.greeting-desc > span {
  display: block;
  text-align: center;
}

/* ------------------------------------------------------------------
   섹션 공통
   ------------------------------------------------------------------ */
.section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  width: 100%;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  width: 100%;
}

.section-title {
  width: 100%;
  padding-bottom: 17px;
  border-bottom: 2.617px solid var(--color-line-light);
  box-sizing: border-box;
  color: var(--color-text);
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
}

.section-desc {
  width: 100%;
  color: var(--color-text);
  font-size: 17px;
  line-height: 28px;
  letter-spacing: -0.5233px;
}

/* ------------------------------------------------------------------
   안내 박스
   ------------------------------------------------------------------ */
.info-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 30px 20px;
  border: 1px solid var(--color-line);
  box-sizing: border-box;
  background-color: #fff;
}

.info-box ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-box li {
  position: relative;
  padding-left: 12px;
  color: var(--color-text);
  font-size: 17px;
  line-height: 28px;
  letter-spacing: -0.5233px;
}

.info-box li:before {
  content: '';
  position: absolute;
  top: 13px;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--color-text);
}

/* ------------------------------------------------------------------
   버튼
   ------------------------------------------------------------------ */
.btn-group {
  display: flex;
  gap: 16px;
  width: 100%;
}

.btn,
.btn:link,
.btn:visited,
.btn:hover,
.btn:active,
.btn:focus {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 56px;
  padding: 0 20px;
  border: 1px solid var(--color-point);
  box-sizing: border-box;
  background-color: var(--color-point-fill);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 17px;
  line-height: 17px;
  letter-spacing: -0.34px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* ------------------------------------------------------------------
   아코디언 (공지사항 / 자주 찾는 질문 공통)
   ------------------------------------------------------------------ */
.section.notice {
  gap: 40px;
}

.accordion-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.accordion {
  width: 100%;
  border-top: 1px solid var(--color-text-off);
  border-bottom: 1px solid var(--color-text-off);
  background-color: #fff;
}

.accordion > li + li .accordion-btn {
  border-top: 6px solid var(--color-line-light);
}

.accordion-btn {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  padding: 16px;
  border: 0;
  box-sizing: border-box;
  background-color: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.accordion-btn > .txt {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.accordion-btn .cate {
  display: block;
  color: var(--color-text-mute);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.7px;
}

.accordion-btn .subject {
  color: var(--color-text);
  font-size: 17px;
  line-height: 28px;
  letter-spacing: -0.7px;
}

.accordion-btn .date {
  color: var(--color-text-mute);
  font-family: 'Noto Sans KR', var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.7px;
}

.accordion-btn .arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  transition: transform .2s;
}

.accordion-btn[aria-expanded="true"] .subject {
  font-weight: 700;
}

.accordion-btn[aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}

.accordion-panel {
  padding: 16px;
  border-top: 6px solid #f2f2f2;
  color: var(--color-text);
  font-size: 15px;
  line-height: 24px;
}

.accordion-panel p + p {
  margin-top: 24px;
}

.accordion-panel .contact-list {
  margin-top: 24px;
}

.accordion-panel .contact-list li {
  position: relative;
  padding-left: 10px;
}

.accordion-panel .contact-list li:before {
  content: '-';
  position: absolute;
  left: 0;
}

.accordion-panel strong {
  font-weight: 700;
}

.accordion-panel a,
.accordion-panel a:link,
.accordion-panel a:visited {
  color: var(--color-text);
  text-decoration: underline;
}

.accordion-btn[aria-expanded="false"] + .accordion-panel {
  display: none;
}


/* 아코디언 변형 : Figma node 2163-3012 (index-v2) 기준
   답변 영역이 항목 박스(패딩 16px) 안에서 1px #d5d5d5 선으로 구분된다.
   기존 6px #f2f2f2 구분선을 쓰는 다른 페이지와 분리하기 위해 .type2 로 둔다. */
.accordion.type2 .accordion-panel {
  margin: 0 16px;
  padding: 16px 0;
  border-top: 1px solid #d5d5d5;
}

/* ------------------------------------------------------------------
   페이징
   ------------------------------------------------------------------ */
.paging {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.paging .group {
  display: flex;
  gap: 4px;
  align-items: center;
}

.paging a,
.paging a:link,
.paging a:visited,
.paging strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  color: var(--color-text-sub);
  font-family: 'Noto Sans KR', var(--font-base);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.7px;
}

.paging .num.on {
  border: 1px solid var(--color-line);
  background-color: #fff;
  color: var(--color-point-fill);
}

.paging svg {
  width: 26px;
  height: 26px;
}

/* ------------------------------------------------------------------
   문의사항
   ------------------------------------------------------------------ */
/* 설계 640px 기준 450 : 26(간격) : 164 = 70.3125% : 4.0625% : 25.625%
   백분율로 고정해 어떤 폭에서도 디자인 비율이 그대로 유지되게 한다.
   (flex-basis:0 + border-box 는 패딩·보더가 배분 위에 더해져 비율이 틀어진다) */
.contact {
  display: flex;
  gap: 4.0625%;
  align-items: stretch;
  width: 100%;
}

/* 디자인 비율 450 : 164 (사이 간격 26px). 고정폭 대신 비율로 분배해
   100vw 와 스크롤바 폭 차이로 컨테이너 실폭이 줄어도 비율이 유지되게 한다. */
.contact-info {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: space-between;
  width: 70.3125%;
  min-width: 0;
  font-size: 17px;
  line-height: 28px;
  letter-spacing: -0.5233px;
}

.contact-info .tel {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.contact-info .tel dt {
  color: var(--color-text);
  font-weight: 500;
}

.contact-info .tel dd {
  color: var(--color-point-fill);
  font-weight: 700;
}

.contact-info .etc {
  color: var(--color-text-sub);
}

.contact-info .etc a,
.contact-info .etc a:link,
.contact-info .etc a:visited {
  color: var(--color-text);
  text-decoration: underline;
}

/* 문의사항 버튼은 디자인상 폭이 164px 로 고정되어 라벨이 꽉 찬다.
   기본 버튼(좌우 20px)보다 패딩을 줄여 '자주 찾는 질문 보기' 가 잘리지 않게 한다. */
.contact .btn,
.contact .btn:link,
.contact .btn:visited,
.contact .btn:hover,
.contact .btn:active,
.contact .btn:focus {
  flex: 0 0 auto;
  width: 25.625%;
  padding: 0 10px;
}

/* ------------------------------------------------------------------
   푸터
   ------------------------------------------------------------------ */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;
  border-top: 1px solid var(--color-line-light);
  background-color: #fff;
}

.footer > .inner {
  display: flex;
  flex-direction: column;
  gap: 34px;
  align-items: center;
  width: 100%;
  padding: 28px 20px;
  border-top: 1px solid var(--color-line-light);
  box-sizing: border-box;
  background-color: #fbfbfb;
}

.footer-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 680px;
  max-width: 100%;
}

.footer-link > li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.3333%;
  padding: 5px 10px;
  box-sizing: border-box;
}

.footer-link > li:not(:nth-child(3n)):not(:last-child):after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background-color: var(--color-line);
}

.footer-link a,
.footer-link a:link,
.footer-link a:visited {
  color: var(--color-text-mute);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.8px;
  word-break: break-word;
}

.footer-link .strong a,
.footer-link .strong a:link,
.footer-link .strong a:visited {
  font-weight: 700;
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  width: 400px;
  max-width: 100%;
  color: var(--color-text-mute);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

.footer-info dl {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  justify-content: center;
}

.footer-info dl > div {
  position: relative;
  display: flex;
  gap: 4px;
}

.footer-info dl > div + div {
  margin-left: 10px;
}

.footer-info dl > div + div:before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  width: 1px;
  height: 10px;
  margin-top: -5px;
  background-color: var(--color-line);
}

.footer-copy {
  display: flex;
  flex-direction: column;
  gap: 5px;
}


/* ------------------------------------------------------------------
   서브 페이지 : 타이틀
   ------------------------------------------------------------------ */
.page-head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.page-title {
  color: var(--color-text);
  font-family: JTBC, var(--font-base);
  font-weight: 900;
  font-size: 28px;
  line-height: 1.5;
  text-align: center;
}

.page-desc {
  width: 100%;
  color: var(--color-text);
  font-size: 17px;
  line-height: 28px;
  letter-spacing: -0.5233px;
  text-align: center;
}

.page-desc.left {
  text-align: left;
}

.page-note {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  color: var(--color-text-mute);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.5233px;
  text-align: left;
}

.page-note strong {
  font-weight: 700;
}

.page-note a,
.page-note a:link,
.page-note a:visited {
  color: var(--color-text-mute);
  font-weight: 700;
  text-decoration: underline;
}

/* ------------------------------------------------------------------
   탭 버튼 (투자자 유형 / FAQ 분류)
   ------------------------------------------------------------------ */
.tab-btns {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.tab-btns > li {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
}

.tab-btns button {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 40px;
  padding: 0 20px;
  border: 1px solid var(--color-line);
  border-left: 0;
  box-sizing: border-box;
  background-color: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: -0.28px;
  white-space: nowrap;
  cursor: pointer;
}

.tab-btns > li:first-child button {
  border-left: 1px solid var(--color-line);
}

.tab-btns button[aria-selected="true"] {
  border-color: var(--color-point);
  background-color: var(--color-point-fill);
  color: #fff;
  font-weight: 700;
}

/* FAQ 분류 탭 : 높이 50px, 첫 칸 160px 고정, 4칸씩 줄바꿈 */
.tab-btns.faq > li {
  flex: 0 0 25%;
  width: 25%;
}

.tab-btns.faq button {
  height: 50px;
}

.tab-btns.faq > li:nth-child(5) button {
  border-left: 1px solid var(--color-line);
}

.tab-btns.faq > li:nth-child(n+5) button {
  border-top: 0;
}

/* 탭 패널 */
.section.form {
  gap: 30px;
}

.tab-pane {
  width: 100%;
}

.tab-pane[hidden] {
  display: none;
}

.tab-pane form {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

/* ------------------------------------------------------------------
   약관 동의 박스
   ------------------------------------------------------------------ */
.agree-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.agree-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.agree-label {
  width: 100%;
  color: var(--color-text);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
}

.agree-label .req {
  color: #ee0007;
}

.agree-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 230px;
  padding: 20px;
  border: 1px solid var(--color-line);
  box-sizing: border-box;
  background-color: #fff;
}

.agree-text {
  flex: 1 0 0;
  min-height: 0;
  padding-bottom: 15px;
  overflow-y: auto;
  color: var(--color-text);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  opacity: .6;
}

.agree-text > ol {
  list-style: decimal;
  padding-left: 24px;
}

.agree-text > ol > li + li {
  margin-top: 24px;
}

.agree-check {
  display: flex;
  flex-shrink: 0;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}

.agree-check label {
  display: flex;
  gap: 4px;
  align-items: center;
  color: var(--color-text);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  opacity: .6;
  cursor: pointer;
}

.agree-check input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-point-fill);
}

/* ------------------------------------------------------------------
   제출 버튼 (비활성 기본)
   ------------------------------------------------------------------ */
.btn-submit-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.btn-submit,
.btn-submit:link,
.btn-submit:visited {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 312px;
  max-width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 1px solid var(--color-line);
  box-sizing: border-box;
  background-color: var(--color-line);
  color: var(--color-text);
  font-family: inherit;
  font-weight: 500;
  font-size: 17px;
  line-height: 17px;
  letter-spacing: -0.34px;
  text-align: center;
  white-space: nowrap;
  opacity: .4;
  cursor: not-allowed;
}

.btn-submit:enabled,
.btn-submit.is-active {
  border-color: var(--color-point);
  background-color: var(--color-point-fill);
  color: #fff;
  font-weight: 700;
  opacity: 1;
  cursor: pointer;
}

/* ------------------------------------------------------------------
   조회 결과 : 인증 정보 카드
   ------------------------------------------------------------------ */
.info-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 30px 20px;
  border: 1px solid var(--color-line);
  box-sizing: border-box;
  background-color: #fff;
}

.info-card dl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 17px;
  line-height: 28px;
  letter-spacing: -0.5233px;
}

.info-card dl > div {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.info-card dt {
  flex-shrink: 0;
  width: 74px;
  color: var(--color-text-mute);
}

.info-card dd {
  width: 400px;
  max-width: 100%;
  color: var(--color-text);
}

/* ------------------------------------------------------------------
   조회 결과 : 보유 사채 목록
   ------------------------------------------------------------------ */
.result-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.result-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.result-title {
  width: 100%;
  color: var(--color-text);
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
}

.bond-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.bond-list > li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--color-line);
  box-sizing: border-box;
  background-color: #fff;
}

.bond-list .company {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-line);
  color: #444;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.bond-list .amount {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #444;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.32px;
}

.bond-list .amount .bar {
  flex-shrink: 0;
  width: 1px;
  height: 16px;
  background-color: #444;
}

.bond-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 180px;
  padding: 20px;
  border: 1px solid var(--color-line);
  box-sizing: border-box;
  background-color: #fff;
  color: var(--color-text-mute);
  font-size: 15px;
  line-height: 24px;
  text-align: center;
}

.note-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  color: var(--color-text-off);
  font-size: 15px;
  line-height: 20px;
}

.note-list li {
  position: relative;
  padding-left: 10px;
}

.note-list li:before {
  content: '';
  position: absolute;
  top: 9px;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--color-text-off);
}

.note-list a,
.note-list a:link,
.note-list a:visited {
  color: var(--color-text);
  text-decoration: underline;
}

/* ------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------ */
.faq-group {
  display: flex;
  flex-direction: column;
  gap: 17px;
  width: 100%;
}

.faq-title {
  width: 100%;
  color: var(--color-text);
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
}

.faq-title > br {
  display: none;
}

.faq-title > br:after {
  content: " ";
  display: inline-block;
  vertical-align: middle;
}

.accordion-btn .cate {
  color: var(--color-text-mute);
  font-family: 'Noto Sans KR', var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.7px;
}

.accordion.faq .accordion-btn > .txt {
  gap: 10px;
}


/* ==================================================================
   버전1(A) 전용 컴포넌트
   ================================================================== */

/* 인사말 하단 안내 문구 */
.greeting-note {
  width: 100%;
  color: var(--color-text-mute);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.5233px;
}

/* '등록한 정보 확인 및 수정을 원하신다면? 등록 정보 조회' 줄 */
.helper-link {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  color: var(--color-text-mute);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.3px;
}

.helper-link a,
.helper-link a:link,
.helper-link a:visited {
  color: var(--color-text);
  font-weight: 500;
  text-decoration: underline;
}

/* 본인인증 안내 박스 */
.auth-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 30px 20px;
  border: 1px solid var(--color-line);
  box-sizing: border-box;
  background-color: #fff;
}

.auth-box .desc {
  color: var(--color-text);
  font-size: 17px;
  line-height: 28px;
  letter-spacing: -0.5233px;
  text-align: center;
}

/* 등록 내역 카드 */
.record-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.record {
  width: 100%;
  border: 1px solid var(--color-line);
  box-sizing: border-box;
  background-color: #fff;
}

.record-bar {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 20px 16px 16px;
}

.record-bar .date {
  flex: 1 0 0;
  min-width: 0;
  color: var(--color-text);
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
}

.record-bar .acts {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  align-items: center;
}

.record-bar .acts a,
.record-bar .acts a:link,
.record-bar .acts a:visited,
.record-bar .acts button {
  border: 0;
  padding: 0;
  background: none;
  color: var(--color-text-mute);
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
}

.record-bar .acts .sep {
  flex-shrink: 0;
  width: 1px;
  height: 12px;
  background-color: var(--color-line-gray);
  pointer-events: none;
}

.record-body {
  padding: 0 16px 20px;
}

.record-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0;
  border-top: 1px solid var(--color-line);
  font-size: 15px;
  line-height: 22px;
}

.record-info > div {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}

.record-info dt {
  flex-shrink: 0;
  width: 44px;
  color: var(--color-text-mute);
  font-weight: 500;
}

.record-info dd {
  color: var(--color-text);
  font-weight: 600;
}

.record .bond-list > li {
  background-color: #f8f8fa;
}

.bond-list .company-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-line);
}

.bond-list .company-row .company {
  flex: 1 0 0;
  min-width: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.bond-list .btn-del {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.record-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 180px;
  color: var(--color-text-mute);
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
}

/* ------------------------------------------------------------------
   입력 폼
   ------------------------------------------------------------------ */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.field-label {
  width: 100%;
  color: var(--color-text);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
}

.field-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-line-gray);
  border-radius: 0;
  box-sizing: border-box;
  background-color: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
}

.field input::placeholder {
  color: var(--color-text-mute);
  opacity: .6;
}

.field input:read-only {
  background-color: #f7f7f7;
}

.field select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%232a2a2a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
}

.field .btn-search {
  flex-shrink: 0;
  padding: 12px 30px;
  border: 1px solid var(--color-text-mute);
  box-sizing: border-box;
  background-color: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.edit-form .record-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 16px;
  border-top: 1px solid var(--color-line);
}

/* 하단 액션 버튼 */
.form-actions {
  display: flex;
  gap: 16px;
  width: 100%;
}

.btn-line,
.btn-line:link,
.btn-line:visited {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 56px;
  padding: 0 20px;
  border: 1px solid var(--color-line);
  box-sizing: border-box;
  background-color: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-weight: 500;
  font-size: 17px;
  line-height: 17px;
  letter-spacing: -0.34px;
  white-space: nowrap;
  cursor: pointer;
}

/* 뒤로가기 링크 */
.back-link,
.back-link:link,
.back-link:visited {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: var(--color-text);
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
}

.back-link svg {
  width: 16px;
  height: 16px;
}


/* ------------------------------------------------------------------
   게시판 모듈 커스텀 (jtbcmodule board)
   공지사항·FAQ 를 BBS 모듈로 연동할 때 목록 행 구분선을
   퍼블리싱 아코디언(.accordion > li + li)과 동일하게 6px 로 맞춘다.

   모듈은 구분선을 border-bottom 으로 그린다.
     #jtbcmodule-board-container .board__row { border-bottom:1px solid #eaeaea }
   border-top 은 선언 자체가 없어(style:none) width 만 주면 0 으로 계산되므로
   border-bottom 의 두께만 덮어쓴다. style·color 는 모듈 값을 그대로 쓴다.

   !important 필수 : 페이지의 CSS 로드 순서가
     reset.css → creditor.css → jtbc-board.css
   라서 모듈 CSS 가 나중에 로드된다. 선택자 특이도가 같으면
   나중에 로드된 모듈 쪽이 이기므로 !important 로 덮어쓴다.
   ------------------------------------------------------------------ */
#jtbcmodule-board-container .board--list .board__row {
  border-bottom-width: 6px !important;
}

#jtbcmodule-board-container .board--list .board__row:last-child {
  border-bottom-width: 1px !important;
  border-bottom-color: #999 !important;
}

/* 모듈 기본 회색 배경 행(및 펼쳐진 상세)을 흰색으로 */
#jtbcmodule-board-container .board__row--gray,
#jtbcmodule-board-container .board__row--gray + .board__detail {
  background: #fff !important;
}

/* 목록 표 레이아웃 복원.
   모듈이 .board--list .board__row 에 display:flex 를 주는데 이 게시판은
   <table> 마크업이라 <tr> 이 플렉스 컨테이너가 되면서 colgroup 의
   폭 지정(8% / 60% / 5% / 5%)이 통째로 무시된다. 그 결과 칼럼이
   내용 폭으로 찌그러져 제목·작성일이 한 글자씩 세로로 줄바꿈된다. */
#jtbcmodule-board-container .board--list tr.board__row {
  display: table-row !important;
  gap: 0 !important;
  padding: 0 !important;
}

#jtbcmodule-board-container .board--list tr.board__row > td {
  display: table-cell !important;
  vertical-align: middle !important;
  padding: 16px 8px !important;
}

/* 펼쳐진 행은 상세 영역 아래에서 구분한다.
   행(gray) 자체의 구분선은 없애고 상세(.board__detail) 하단에 6px 를 준다.
   모듈에 .board__detail 보더 선언이 없어 !important 없이도 적용된다. */
#jtbcmodule-board-container .board__detail {
  border-bottom: 6px solid #eaeaea;
}

#jtbcmodule-board-container .board__detail:last-child {
  border-bottom: 1px solid #999;
}

/* 선택자에 .board--list 를 더해 특이도를 (1,3,0) 으로 올린다.
   (1,2,0) 인 채로 두면 파일 뒤쪽 660px 미디어쿼리의
   .board--list .board__row (동일 특이도, 나중 선언) 에 밀려
   모바일에서만 이 값이 무시된다. */
#jtbcmodule-board-container .board--list .board__row.board__row--gray {
  border-bottom-width: 1px !important;
}

/* 작성일 칸(3번째 td, 클래스 없음)은 한 줄로. */
#jtbcmodule-board-container .board--list .board__row > td:nth-child(3) {
  white-space: nowrap !important;
}

/* 게시판 영역이 부모(.container) 폭을 그대로 채우도록.
   모듈이 #jtbcmodule-board-container 에 min-width:320px 를 주는 탓에
   좁은 화면(본문 컬럼 < 320px)에서 컨테이너를 삐져나와 가로 스크롤이 생긴다. */
#jtbc-board {
  width: 100%;
}

#jtbcmodule-board-container {
  width: 100% !important;
  min-width: 0 !important;
}

/* 게시물 더보기(···) 메뉴 감춤 */
#jtbcmodule-board-container .board__dropdown .dropmenu {
  display: none !important;
}

/* 목록 하단(페이징 영역) */
#jtbcmodule-board-container .board__footer {
  margin: 0 !important;
  padding: 20px 0 40px !important;
  background: #f8f8f8 !important;
}


/* ------------------------------------------------------------------
   게시판 모듈 페이징 커스텀
   Figma node 2163-3123 기준.
     · 버튼 26x26, 그룹 내 간격 4px, 그룹 간 간격 14px
     · 화살표/현재페이지 : 배경 #fff, 테두리 1px #dfe0e1
     · 현재 페이지 글자 #ba50ff / 다른 페이지 글자 #666
   모듈은 CSS Modules 해시 클래스명(.Paging_btn__<hash>_jtbc-board)을 쓴다.
   해시는 모듈 빌드마다 바뀌므로 접두어 부분매칭으로 잡는다.
   ------------------------------------------------------------------ */
/* 페이징 가운데 정렬.
   모듈은 justify-content:space-between 인데 자식이 목록(ul) 하나뿐이라
   좌측에 붙는다. */
#jtbcmodule-board-container [class*="Paging_pagination__"] {
  justify-content: center !important;
  gap: 4px;
}

#jtbcmodule-board-container [class*="Paging_value__"] {
  flex: none;
}

#jtbcmodule-board-container [class*="Paging_btn__"] {
  width: 26px !important;
  min-width: 26px !important;
  height: 26px !important;
  color: #666 !important;
}

/* 비활성(첫/마지막 페이지) 도 배경·아이콘색을 동일하게.
   모듈은 disabled 에 background:#f8f8f8, 아이콘 fill #CCC 를 준다. */
#jtbcmodule-board-container [class*="Paging_btn__"]:disabled {
  background: #fff !important;
}

/* 화살표 아이콘 색 : 모듈 #9C9C9C(활성) / #CCC(비활성) → 디자인 #999 로 통일.
   path 의 fill="current" 가 무효값이라 svg 요소의 fill 이 그대로 적용된다. */
#jtbcmodule-board-container [class*="Paging_btn__"] svg {
  fill: #999 !important;
}

/* 화살표(처음·이전·다음·끝) 및 현재 페이지 : 테두리색 통일 */
#jtbcmodule-board-container [class*="Paging_first__"],
#jtbcmodule-board-container [class*="Paging_prev__"],
#jtbcmodule-board-container [class*="Paging_next__"],
#jtbcmodule-board-container [class*="Paging_last__"],
#jtbcmodule-board-container [class*="Paging_active__"] {
  border: 1px solid #dfe0e1 !important;
  background: #fff !important;
}

#jtbcmodule-board-container [class*="Paging_active__"] {
  color: #ba50ff !important;
}

/* 간격 : 그룹 내 4px / 그룹 간 14px
   목록에 gap:4px 가 걸려 있으므로
     · 그룹 내(처음·끝) 마진은 0 으로 두어 gap 만 남기고
     · 그룹 간(이전·다음) 은 차액 10px 을 더한다. 4 + 10 = 14px
   모듈 페이징은 버튼이 26px 고정이라 등비 축소 대상에서 제외한다. */
#jtbcmodule-board-container [class*="Paging_first__"] {
  margin-right: 0 !important;
}

#jtbcmodule-board-container [class*="Paging_last__"] {
  margin-left: 0 !important;
}

#jtbcmodule-board-container [class*="Paging_prev__"] {
  margin-right: 10px !important;
}

#jtbcmodule-board-container [class*="Paging_next__"] {
  margin-left: 10px !important;
}

/* 공지사항(BSYS) 게시판 No 넘버링 컬럼 숨김 */
#jtbcmodule-board-container .board {
  border-top: 1px solid #999 !important;
}

#jtbcmodule-board-container .board__wrap thead,
#jtbcmodule-board-container .board__head th:nth-child(1),
#jtbcmodule-board-container .board--list tr.board__row > td.board__num,
#jtbcmodule-board-container .board__row--gray > td:nth-child(1), 
#jtbcmodule-board-container .board__row--gray+.board__detail > td:nth-child(1)
{
  display: none !important;
}

/* FAQ 전용  */
.faq-group #jtbcmodule-board-container .board__head th:nth-child(3) ,
.faq-group #jtbcmodule-board-container .board--list tr.board__row > td:nth-child(3),
.faq-group #jtbcmodule-board-container .board__row--gray > td:nth-child(3), 
.faq-group #jtbcmodule-board-container .board__row--gray+.board__detail > td:nth-child(3)
{
  display: none !important;
}

#jtbcmodule-board-container .board__inner {
  margin-right: -115px;
}

.faq-group #jtbcmodule-board-container .board__inner {
  margin-right: -68px;
}

/* No 컬럼(8%) 제거분을 제목 컬럼에 합산해 colgroup 재조정 */
#jtbcmodule-board-container .board__wrap col:nth-child(1) { width: 90% !important; }
#jtbcmodule-board-container .board__wrap col:nth-child(2) { width: 5% !important; }
#jtbcmodule-board-container .board__wrap col:nth-child(3) { width: 5% !important; }

/* ==================================================================
   1245px 이하 : GNB 상단바 등비 축소 (able 과 동일한 방식)
   ================================================================== */
@media screen and (max-width: 1245px) {

  .gnb-top {
    padding: calc(100vw * (20px / 1245px)) calc(100vw * (14px / 1245px));
  }

  .gnb-top > .inner {
    max-width: none;
    gap: calc(100vw * (20px / 1245px));
  }
}


@media screen and (max-device-width: 767px) {
  #jtbcmodule-board-container .board__inner,
  .faq-group #jtbcmodule-board-container .board__inner {
    margin-right: 0;
  }

  #jtbcmodule-board-container .fr-element {
    min-height: auto;
  }
}


/* ------------------------------------------------------------------
   index-v3 전용 : 인사말 서명
   .greeting-desc 는 4개 파일이 공유하고 text-align:left 이므로
   서명 줄만 별도 블록으로 분리해 가운데 정렬한다.
   ------------------------------------------------------------------ */
.v2-greeting-sign {
  display: block;
  text-align: center;
}

/* 디자인(node 2099-10626)은 인사말 본문 전체가 text-center 다.
   .greeting-desc 는 다른 홈 3개와 공유하므로 v3 에서만 덧씌운다. */
.v2-greeting-desc {
  text-align: center;
}

/* reset.css 의 body{letter-spacing:-.7px} 가 전역 상속된다.
   디자인에 자간이 있는 것은 인사말·섹션 본문(-0.5233px) 뿐이고
   제목과 일정 목록은 자간 0 이므로 v3 범위에서만 되돌린다.
   (다른 홈 3개도 같은 상속을 받고 있으나 범위를 넘지 않도록 건드리지 않는다.) */
.v3-home .greeting-title,
.v3-home .section-title,
.v3-home .v2-schedule-list > li,
.v3-home .v2-schedule-note {
  letter-spacing: normal;
}

/* ------------------------------------------------------------------
   index-v3 전용 : 일정 안내 박스 (Figma node 2099-10633)
   기존 .info-box 와 마크업은 같고 항목 간격(4 → 6px)과
   라벨 볼드 처리만 달라 .v2- 접두어로 분리한다.
   ------------------------------------------------------------------ */
.v2-schedule-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 30px 0;
  border: 1px solid var(--color-line);
  box-sizing: border-box;
  background-color: #fff;
}

.v2-schedule-box > .inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

/* 항목 사이 간격. li 는 ul 안에 있어 .inner 의 gap 이 닿지 않으므로 직접 건다. */
.v2-schedule-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v2-schedule-list > li {
  position: relative;
  padding-left: 25.5px;
  color: var(--color-text);
  font-size: 17px;
  line-height: 28px;
  letter-spacing: 0;
}

.v2-schedule-list > li:before {
  content: '';
  position: absolute;
  top: 13px;
  left: 10.5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-text);
}

.v2-schedule-list .label {
  font-weight: 700;
}

.v2-schedule-list .v2-schedule-note {
  padding-top: 6px;
}

/* 항목 하위 주석 — 항목 텍스트와 같은 들여쓰기로 다음 줄에 */
.v2-schedule-note {
  display: block;
  color: var(--color-text-mute);
  font-family: 'Noto Sans KR', var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
}

/* ==================================================================
   660px 이하 : 본문·GNB 메뉴·푸터 등비 축소 (기준폭 660px)
   설계 본문 컬럼 640px + 좌우 여백 10px = 660px 을 기준으로 잡아,
   화면이 줄어도 본문이 화면 끝에 붙지 않고 여백이 함께 축소된다.
   ================================================================== */
@media screen and (max-width: 660px) {

  /* GNB */
  .gnb-top {
    padding: calc(100vw * (20px / 660px)) calc(100vw * (14px / 660px));
  }

  .gnb-top > .inner {
    gap: calc(100vw * (20px / 660px));
  }

  .gnb-brand {
    gap: calc(100vw * (16px / 660px));
  }

  .gnb-brand .logo {
    width: calc(100vw * (86px / 660px));
    height: calc(100vw * (44px / 660px));
  }

  .gnb-brand .service-name {
    padding: calc(100vw * (16px / 660px)) 0 calc(100vw * (6px / 660px));
    font-size: calc(100vw * (18px / 660px));
    line-height: calc(100vw * (22px / 660px));
  }

  .gnb-link {
    padding: calc(100vw * (6px / 660px)) calc(100vw * (4px / 660px)) calc(100vw * (6px / 660px)) calc(100vw * (12px / 660px));
    border-width: calc(100vw * (1px / 660px));
    border-radius: calc(100vw * (16px / 660px));
  }

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

  .gnb-link:after {
    width: calc(100vw * (20px / 660px));
    height: calc(100vw * (20px / 660px));
    background-size: calc(100vw * (20px / 660px));
  }

  .gnb-menu > ul {
    gap: calc(100vw * (16px / 660px));
    width: 100%;
    height: calc(100vw * (60px / 660px));
  }

  .gnb-menu a,
  .gnb-menu a:link,
  .gnb-menu a:visited {
    padding: calc(100vw * (12px / 660px)) calc(100vw * (8px / 660px));
    font-size: calc(100vw * (18px / 660px));
    line-height: calc(100vw * (24px / 660px));
  }

  .gnb-menu .on a,
  .gnb-menu .on a:link,
  .gnb-menu .on a:visited {
    border-bottom-width: calc(100vw * (2px / 660px));
  }

  /* 레이아웃 */
  /* 설계 640px 컬럼에는 좌우 패딩이 없다.
     100vw 를 그대로 컨텐츠 폭으로 써야 PC 와 완전히 동일한 비율이 나온다. */
  /* 본문 컬럼은 전체 폭이 아니라 640/660 만 차지한다.
     남는 20/660 이 좌우 여백이 되어 화면과 함께 등비로 줄어든다.
     100vw 는 스크롤바를 포함해 화면을 넘치므로 백분율로 잡는다. */
  .container {
    gap: calc(100vw * (60px / 660px));
    width: calc(100% * 640 / 660);
    max-width: none;
    margin: 0 auto;
    padding: calc(100vw * (60px / 660px)) 0 calc(100vw * (100px / 660px));
    box-sizing: border-box;
  }

  /* 인사말 */
  .greeting {
    gap: calc(100vw * (24px / 660px));
  }

  .greeting-title {
    font-size: calc(100vw * (28px / 660px));
  }

  .greeting-desc {
    font-size: calc(100vw * (17px / 660px));
    line-height: calc(100vw * (28px / 660px));
    letter-spacing: calc(100vw * (-0.5233px / 660px));
  }

  /* 섹션 공통 */
  .section {
    gap: calc(100vw * (20px / 660px));
  }

  .section-head {
    gap: calc(100vw * (15px / 660px));
  }

  .section-title {
    padding-bottom: calc(100vw * (17px / 660px));
    border-bottom-width: calc(100vw * (2.617px / 660px));
    font-size: calc(100vw * (22px / 660px));
    line-height: calc(100vw * (28px / 660px));
  }

  .section-desc {
    font-size: calc(100vw * (17px / 660px));
    line-height: calc(100vw * (28px / 660px));
    letter-spacing: calc(100vw * (-0.5233px / 660px));
  }

  /* 안내 박스 */
  .info-box {
    padding: calc(100vw * (30px / 660px)) calc(100vw * (20px / 660px));
    border-width: calc(100vw * (1px / 660px));
  }

  .info-box ul {
    gap: calc(100vw * (4px / 660px));
  }

  .info-box li {
    padding-left: calc(100vw * (12px / 660px));
    font-size: calc(100vw * (17px / 660px));
    line-height: calc(100vw * (28px / 660px));
    letter-spacing: calc(100vw * (-0.5233px / 660px));
  }

  .info-box li:before {
    top: calc(100vw * (13px / 660px));
    width: calc(100vw * (3px / 660px));
    height: calc(100vw * (3px / 660px));
  }

  /* 버튼 */
  .btn-group {
    gap: calc(100vw * (16px / 660px));
  }

  .btn,
  .btn:link,
  .btn:visited,
  .btn:hover,
  .btn:active,
  .btn:focus {
    height: calc(100vw * (56px / 660px));
    padding: 0 calc(100vw * (20px / 660px));
    border-width: calc(100vw * (1px / 660px));
    font-size: calc(100vw * (17px / 660px));
    line-height: calc(100vw * (17px / 660px));
    letter-spacing: calc(100vw * (-0.34px / 660px));
  }

  /* 아코디언 */
  .section.notice {
    gap: calc(100vw * (40px / 660px));
  }

  .accordion-wrap {
    gap: calc(100vw * (24px / 660px));
  }

  .accordion {
    border-top-width: calc(100vw * (1px / 660px));
    border-bottom-width: calc(100vw * (1px / 660px));
  }

  .accordion > li + li .accordion-btn {
    border-top-width: calc(100vw * (6px / 660px));
  }

  .accordion-btn {
    gap: calc(100vw * (16px / 660px));
    padding: calc(100vw * (16px / 660px));
  }

  .accordion-btn > .txt {
    gap: calc(100vw * (4px / 660px));
  }

  .accordion-btn .cate {
    font-size: calc(100vw * (14px / 660px));
    line-height: calc(100vw * (20px / 660px));
    letter-spacing: calc(100vw * (-0.7px / 660px));
  }

  .accordion-btn .subject {
    font-size: calc(100vw * (17px / 660px));
    line-height: calc(100vw * (28px / 660px));
    letter-spacing: calc(100vw * (-0.7px / 660px));
  }

  .accordion-btn .date {
    font-size: calc(100vw * (14px / 660px));
    line-height: calc(100vw * (18px / 660px));
    letter-spacing: calc(100vw * (-0.7px / 660px));
  }

  .accordion-btn .arrow {
    width: calc(100vw * (20px / 660px));
    height: calc(100vw * (20px / 660px));
    margin-top: calc(100vw * (4px / 660px));
  }

  .accordion-panel {
    padding: calc(100vw * (16px / 660px));
    border-top-width: calc(100vw * (6px / 660px));
    font-size: calc(100vw * (15px / 660px));
    line-height: calc(100vw * (24px / 660px));
  }

  .accordion-panel p + p,
  .accordion-panel .contact-list {
    margin-top: calc(100vw * (24px / 660px));
  }

  .accordion-panel .contact-list li {
    padding-left: calc(100vw * (10px / 660px));
  }

  /* 페이징 */
  .paging {
    gap: calc(100vw * (14px / 660px));
  }

  .paging .group {
    gap: calc(100vw * (4px / 660px));
  }

  .paging a,
  .paging a:link,
  .paging a:visited,
  .paging strong {
    width: calc(100vw * (26px / 660px));
    height: calc(100vw * (26px / 660px));
    font-size: calc(100vw * (14px / 660px));
    letter-spacing: calc(100vw * (-0.7px / 660px));
  }

  .paging .num.on {
    border-width: calc(100vw * (1px / 660px));
  }

  .paging svg {
    width: calc(100vw * (26px / 660px));
    height: calc(100vw * (26px / 660px));
  }

  /* 문의사항 */
  .contact-info {
    font-size: calc(100vw * (17px / 660px));
    line-height: calc(100vw * (28px / 660px));
    letter-spacing: calc(100vw * (-0.5233px / 660px));
  }

  .contact-info .tel {
    gap: calc(100vw * (8px / 660px));
  }

  .contact .btn,
  .contact .btn:link,
  .contact .btn:visited,
  .contact .btn:hover,
  .contact .btn:active,
  .contact .btn:focus {
    padding: 0 calc(100vw * (10px / 660px));
  }

  /* 푸터 */
  .footer {
    padding-top: calc(100vw * (5px / 660px));
    border-top-width: calc(100vw * (1px / 660px));
  }

  .footer > .inner {
    gap: calc(100vw * (34px / 660px));
    padding: calc(100vw * (28px / 660px)) calc(100vw * (20px / 660px));
    border-top-width: calc(100vw * (1px / 660px));
  }

  .footer-link > li {
    padding: calc(100vw * (5px / 660px)) calc(100vw * (10px / 660px));
  }

  .footer-link > li:not(:nth-child(3n)):not(:last-child):after {
    width: calc(100vw * (1px / 660px));
    height: calc(100vw * (12px / 660px));
    margin-top: calc(100vw * (-6px / 660px));
  }

  .footer-link a,
  .footer-link a:link,
  .footer-link a:visited {
    font-size: calc(100vw * (14px / 660px));
    line-height: calc(100vw * (22px / 660px));
    letter-spacing: calc(100vw * (-0.8px / 660px));
  }

  .footer-info {
    gap: calc(100vw * (7px / 660px));
    width: calc(100vw * (400px / 660px));
    font-size: calc(100vw * (11px / 660px));
  }

  .footer-info dl {
    gap: calc(100vw * (4px / 660px)) calc(100vw * (10px / 660px));
  }

  .footer-info dl > div {
    gap: calc(100vw * (4px / 660px));
  }

  .footer-info dl > div + div {
    margin-left: calc(100vw * (10px / 660px));
  }

  .footer-info dl > div + div:before {
    left: calc(100vw * (-10px / 660px));
    width: calc(100vw * (1px / 660px));
    height: calc(100vw * (10px / 660px));
    margin-top: calc(100vw * (-5px / 660px));
  }

  .footer-copy {
    gap: calc(100vw * (5px / 660px));
  }

  /* ---- 서브 페이지 타이틀 ---- */
  .page-head {
    gap: calc(100vw * (24px / 660px));
  }

  .page-title {
    font-size: calc(100vw * (28px / 660px));
  }

  .page-desc {
    font-size: calc(100vw * (17px / 660px));
    line-height: calc(100vw * (28px / 660px));
    letter-spacing: calc(100vw * (-0.5233px / 660px));
  }

  .page-note {
    gap: calc(100vw * (8px / 660px));
    font-size: calc(100vw * (15px / 660px));
    line-height: calc(100vw * (20px / 660px));
    letter-spacing: calc(100vw * (-0.5233px / 660px));
  }

  /* ---- 탭 버튼 ---- */
  .tab-btns button {
    height: calc(100vw * (40px / 660px));
    padding: 0 calc(100vw * (20px / 660px));
    border-width: calc(100vw * (1px / 660px));
    font-size: calc(100vw * (14px / 660px));
    line-height: calc(100vw * (17px / 660px));
    letter-spacing: calc(100vw * (-0.28px / 660px));
  }

  .tab-btns button,
  .tab-btns > li:not(:first-child) button {
    border-left-width: 0;
  }

  .tab-btns > li:first-child button,
  .tab-btns.faq > li:nth-child(5) button {
    border-left-width: calc(100vw * (1px / 660px));
  }

  .tab-btns.faq button {
    height: calc(100vw * (50px / 660px));
  }

  .tab-btns.faq > li:nth-child(n+5) button {
    border-top-width: 0;
  }

  /* ---- 약관 동의 ---- */
  .agree-group {
    gap: calc(100vw * (20px / 660px));
  }

  .agree-item {
    gap: calc(100vw * (8px / 660px));
  }

  .agree-label {
    font-size: calc(100vw * (17px / 660px));
  }

  .agree-box {
    height: calc(100vw * (230px / 660px));
    padding: calc(100vw * (20px / 660px));
    border-width: calc(100vw * (1px / 660px));
  }

  .agree-text {
    padding-bottom: calc(100vw * (15px / 660px));
    font-size: calc(100vw * (16px / 660px));
    line-height: calc(100vw * (24px / 660px));
  }

  .agree-text > ol {
    padding-left: calc(100vw * (24px / 660px));
  }

  .agree-text > ol > li + li {
    margin-top: calc(100vw * (24px / 660px));
  }

  .agree-check {
    gap: calc(100vw * (16px / 660px));
    padding-top: calc(100vw * (16px / 660px));
    border-top-width: calc(100vw * (1px / 660px));
  }

  .agree-check label {
    gap: calc(100vw * (4px / 660px));
    font-size: calc(100vw * (16px / 660px));
    line-height: calc(100vw * (20px / 660px));
  }

  .agree-check input {
    width: calc(100vw * (20px / 660px));
    height: calc(100vw * (20px / 660px));
  }

  /* ---- 제출 버튼 ---- */
  .btn-submit,
  .btn-submit:link,
  .btn-submit:visited {
    width: calc(100vw * (312px / 660px));
    height: calc(100vw * (56px / 660px));
    padding: 0 calc(100vw * (20px / 660px));
    border-width: calc(100vw * (1px / 660px));
    font-size: calc(100vw * (17px / 660px));
    line-height: calc(100vw * (17px / 660px));
    letter-spacing: calc(100vw * (-0.34px / 660px));
  }

  /* ---- 인증 정보 카드 ---- */
  .info-card {
    padding: calc(100vw * (30px / 660px)) calc(100vw * (20px / 660px));
    border-width: calc(100vw * (1px / 660px));
  }

  .info-card dl {
    gap: calc(100vw * (4px / 660px));
    font-size: calc(100vw * (17px / 660px));
    line-height: calc(100vw * (28px / 660px));
    letter-spacing: calc(100vw * (-0.5233px / 660px));
  }

  .info-card dl > div {
    gap: calc(100vw * (8px / 660px));
  }

  .info-card dt {
    width: calc(100vw * (74px / 660px));
  }

  .info-card dd {
    width: calc(100vw * (400px / 660px));
  }

  /* ---- 보유 사채 목록 ---- */
  .result-body {
    gap: calc(100vw * (20px / 660px));
  }

  .result-head {
    gap: calc(100vw * (16px / 660px));
  }

  .result-title,
  .faq-title {
    font-size: calc(100vw * (18px / 660px));
    line-height: calc(100vw * (26px / 660px));
  }

  .bond-list {
    gap: calc(100vw * (16px / 660px));
  }

  .bond-list > li {
    gap: calc(100vw * (10px / 660px));
    padding: calc(100vw * (16px / 660px)) calc(100vw * (20px / 660px));
    border-width: calc(100vw * (1px / 660px));
  }

  .bond-list .company {
    gap: calc(100vw * (4px / 660px));
    padding-bottom: calc(100vw * (10px / 660px));
    border-bottom-width: calc(100vw * (1px / 660px));
    font-size: calc(100vw * (16px / 660px));
    line-height: calc(100vw * (24px / 660px));
  }

  .bond-list .amount {
    gap: calc(100vw * (8px / 660px));
    font-size: calc(100vw * (16px / 660px));
    line-height: calc(100vw * (24px / 660px));
    letter-spacing: calc(100vw * (-0.32px / 660px));
  }

  .bond-list .amount .bar {
    width: calc(100vw * (1px / 660px));
    height: calc(100vw * (16px / 660px));
  }

  .bond-empty {
    height: calc(100vw * (180px / 660px));
    padding: calc(100vw * (20px / 660px));
    border-width: calc(100vw * (1px / 660px));
    font-size: calc(100vw * (15px / 660px));
    line-height: calc(100vw * (24px / 660px));
  }

  .note-list {
    gap: calc(100vw * (4px / 660px));
    font-size: calc(100vw * (15px / 660px));
    line-height: calc(100vw * (20px / 660px));
  }

  .note-list li {
    padding-left: calc(100vw * (10px / 660px));
  }

  .note-list li:before {
    top: calc(100vw * (9px / 660px));
    width: calc(100vw * (3px / 660px));
    height: calc(100vw * (3px / 660px));
  }

  /* ---- FAQ ---- */
  .faq-group {
    gap: calc(100vw * (17px / 660px));
  }

  .accordion.faq .accordion-btn > .txt {
    gap: calc(100vw * (10px / 660px));
  }

  .section.form,
  .tab-pane form {
    gap: calc(100vw * (30px / 660px));
  }

  /* ---- 버전1(A) 전용 ---- */
  .greeting-note {
    font-size: calc(100vw * (15px / 660px));
    line-height: calc(100vw * (20px / 660px));
    letter-spacing: calc(100vw * (-0.5233px / 660px));
  }

  .helper-link {
    gap: calc(100vw * (6px / 660px));
    font-size: calc(100vw * (15px / 660px));
    line-height: calc(100vw * (20px / 660px));
    letter-spacing: calc(100vw * (-0.3px / 660px));
  }

  .auth-box {
    gap: calc(100vw * (20px / 660px));
    padding: calc(100vw * (30px / 660px)) calc(100vw * (20px / 660px));
    border-width: calc(100vw * (1px / 660px));
  }

  .auth-box .desc {
    font-size: calc(100vw * (17px / 660px));
    line-height: calc(100vw * (28px / 660px));
    letter-spacing: calc(100vw * (-0.5233px / 660px));
  }

  .record-list {
    gap: calc(100vw * (16px / 660px));
  }

  .record {
    border-width: calc(100vw * (1px / 660px));
  }

  .record-bar {
    gap: calc(100vw * (16px / 660px));
    padding: calc(100vw * (20px / 660px)) calc(100vw * (16px / 660px)) calc(100vw * (16px / 660px));
  }

  .record-bar .date {
    font-size: calc(100vw * (16px / 660px));
    line-height: calc(100vw * (16px / 660px));
  }

  .record-bar .acts a,
  .record-bar .acts a:link,
  .record-bar .acts a:visited,
  .record-bar .acts button {
    font-size: calc(100vw * (14px / 660px));
    line-height: calc(100vw * (16px / 660px));
  }

  .record-bar .acts {
    gap: calc(100vw * (12px / 660px));
  }

  .record-bar .acts .sep {
    width: calc(100vw * (1px / 660px));
    height: calc(100vw * (12px / 660px));
  }

  .record-body {
    padding: 0 calc(100vw * (16px / 660px)) calc(100vw * (20px / 660px));
  }

  .record-info {
    gap: calc(100vw * (4px / 660px));
    padding: calc(100vw * (20px / 660px)) 0;
    border-top-width: calc(100vw * (1px / 660px));
    font-size: calc(100vw * (15px / 660px));
    line-height: calc(100vw * (22px / 660px));
  }

  .record-info > div {
    gap: calc(100vw * (8px / 660px));
  }

  .record-info dt {
    width: calc(100vw * (44px / 660px));
  }

  .bond-list .company-row {
    gap: calc(100vw * (10px / 660px));
    padding-bottom: calc(100vw * (10px / 660px));
    border-bottom-width: calc(100vw * (1px / 660px));
  }

  .bond-list .btn-del {
    width: calc(100vw * (24px / 660px));
    height: calc(100vw * (24px / 660px));
  }

  .record-empty {
    height: calc(100vw * (180px / 660px));
    font-size: calc(100vw * (15px / 660px));
    line-height: calc(100vw * (22px / 660px));
  }

  /* 입력 폼 */
  .field,
  .field-group {
    gap: calc(100vw * (8px / 660px));
  }

  .field-label {
    font-size: calc(100vw * (14px / 660px));
  }

  .field-row {
    gap: calc(100vw * (8px / 660px));
  }

  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field select {
    padding: calc(100vw * (12px / 660px)) calc(100vw * (14px / 660px));
    border-width: calc(100vw * (1px / 660px));
    font-size: calc(100vw * (16px / 660px));
  }

  .field select {
    padding-right: calc(100vw * (40px / 660px));
    background-position: right calc(100vw * (14px / 660px)) center;
    background-size: calc(100vw * (20px / 660px)) calc(100vw * (20px / 660px));
  }

  .field .btn-search {
    padding: calc(100vw * (12px / 660px)) calc(100vw * (30px / 660px));
    border-width: calc(100vw * (1px / 660px));
    font-size: calc(100vw * (16px / 660px));
  }

  .edit-form {
    gap: calc(100vw * (20px / 660px));
  }

  .edit-form .record-body {
    gap: calc(100vw * (20px / 660px));
    padding: calc(100vw * (20px / 660px)) calc(100vw * (16px / 660px));
    border-top-width: calc(100vw * (1px / 660px));
  }

  .form-actions {
    gap: calc(100vw * (16px / 660px));
  }

  .btn-line,
  .btn-line:link,
  .btn-line:visited {
    height: calc(100vw * (56px / 660px));
    padding: 0 calc(100vw * (20px / 660px));
    border-width: calc(100vw * (1px / 660px));
    font-size: calc(100vw * (17px / 660px));
    line-height: calc(100vw * (17px / 660px));
    letter-spacing: calc(100vw * (-0.34px / 660px));
  }

  .back-link,
  .back-link:link,
  .back-link:visited {
    gap: calc(100vw * (4px / 660px));
    font-size: calc(100vw * (15px / 660px));
    line-height: calc(100vw * (20px / 660px));
  }

  .back-link svg {
    width: calc(100vw * (16px / 660px));
    height: calc(100vw * (16px / 660px));
  }

  .accordion.type2 .accordion-panel {
    margin: 0 calc(100vw * (16px / 660px));
    padding: calc(100vw * (16px / 660px)) 0;
    border-top-width: calc(100vw * (1px / 660px));
  }

  /* 게시판 모듈 커스텀 */
  #jtbcmodule-board-container .board--list .board__row {
    border-bottom-width: calc(100vw * (6px / 660px)) !important;
  }

  #jtbcmodule-board-container .board--list .board__row:last-child {
    border-bottom-width: 1px !important;
  }

  #jtbcmodule-board-container .board__detail {
    border-bottom-width: calc(100vw * (6px / 660px));
  }

  #jtbcmodule-board-container .board__row--gray +
  #jtbcmodule-board-container .board__detail:last-child {
    border-bottom-width: calc(100vw * (1px / 660px));
    border-bottom-color: #797d84;
  }

  #jtbcmodule-board-container .board--list tr.board__row > td {
    padding: calc(100vw * (16px / 660px)) calc(100vw * (8px / 660px)) !important;
  }

  #jtbcmodule-board-container .board__footer {
    padding: calc(100vw * (20px / 660px)) 0 calc(100vw * (40px / 660px)) !important;
  }

  /* 본문 기본 높이 제거 */
  #jtbcmodule-board-container .fr-element {
    min-height: auto !important;
  }

  /* 게시판 모듈 텍스트 : 페이지 본문과 같은 비율로 축소.
     모듈은 자체 브레이크포인트로 14→12 / 16→13 처럼 단계적으로만 바뀌어
     연속 축소되는 페이지 본문과 비율이 어긋난다. PC 값(14 / 16px)을
     660px 기준 등비 축소로 환산한다. line-height 는 1.5 비율로 통일. */
  #jtbc-board th,
  #jtbc-board td {
    font-size: calc(100vw * (14px / 660px)) !important;
    line-height: 1.5 !important;
  }

  #jtbc-board td span[class*="board__"],
  #jtbc-board .fr-element,
  #jtbc-board .fr-element * {
    font-size: calc(100vw * (16px / 660px)) !important;
    line-height: 1.5 !important;
  }

  /* 페이징도 동일 비율로 축소.
     PC 기준값 : 버튼 26px, 글자 14px(line-height 16.1 = 1.15),
                 아이콘 16px, 목록 gap 4px, 보더 1px, 그룹 간격 10px */
  #jtbcmodule-board-container [class*="Paging_list__"] {
    gap: calc(100vw * (4px / 660px)) !important;
  }

  #jtbcmodule-board-container [class*="Paging_btn__"] {
    width: calc(100vw * (26px / 660px)) !important;
    min-width: calc(100vw * (26px / 660px)) !important;
    height: calc(100vw * (26px / 660px)) !important;
    font-size: calc(100vw * (14px / 660px)) !important;
    line-height: 1.15 !important;
  }

  #jtbcmodule-board-container [class*="Paging_first__"],
  #jtbcmodule-board-container [class*="Paging_prev__"],
  #jtbcmodule-board-container [class*="Paging_next__"],
  #jtbcmodule-board-container [class*="Paging_last__"],
  #jtbcmodule-board-container [class*="Paging_active__"] {
    border-width: calc(100vw * (1px / 660px)) !important;
  }

  #jtbcmodule-board-container [class*="Paging_prev__"] {
    margin-right: calc(100vw * (10px / 660px)) !important;
  }

  #jtbcmodule-board-container [class*="Paging_next__"] {
    margin-left: calc(100vw * (10px / 660px)) !important;
  }

  #jtbcmodule-board-container [class*="Paging_btn__"] i,
  #jtbcmodule-board-container [class*="Paging_btn__"] svg {
    width: calc(100vw * (16px / 660px)) !important;
    height: calc(100vw * (16px / 660px)) !important;
  }

  /* 모듈 잔여 고정값 보완 (PC 실측 대조로 확인된 미축소 항목)
     · 컨테이너·래퍼 기본 폰트 14px/1.5 — 하위 상속 기준
     · 목록 헤더 th 패딩 14px
     · 열기/닫기 아이콘 20px
     · 페이징 컨테이너 gap 4px */
  #jtbcmodule-board-container,
  #jtbcmodule-board-container .board,
  #jtbcmodule-board-container [class*="Paging_pagination__"],
  #jtbcmodule-board-container [class*="Paging_list__"],
  #jtbcmodule-board-container li {
    font-size: calc(100vw * (14px / 660px)) !important;
    line-height: 1.5 !important;
  }

  #jtbcmodule-board-container th {
    padding-top: calc(100vw * (14px / 660px)) !important;
    padding-bottom: calc(100vw * (14px / 660px)) !important;
  }

  #jtbcmodule-board-container td[class*="board__title-icon"],
  #jtbcmodule-board-container td[class*="board__title-icon"] i,
  #jtbcmodule-board-container td[class*="board__title-icon"] svg {
    width: calc(100vw * (20px / 660px)) !important;
    height: calc(100vw * (20px / 660px)) !important;
  }

  #jtbcmodule-board-container [class*="Paging_pagination__"] {
    gap: calc(100vw * (4px / 660px)) !important;
  }

  /* 실기기 전용(@media max-device-width) 대응 보완.
     모듈은 데스크톱 창 축소로는 재현되지 않는 max-device-width 블록에
     별도 고정 px 를 두고 있어, 실제 단말에서만 폰트가 커 보인다.
       .board__title  16px / .Paging_value__ 12px / .Paging_icon__ 46x14
     PC 기준값을 660px 등비 축소로 환산해 덮어쓴다. */
  #jtbcmodule-board-container .board__title {
    font-size: calc(100vw * (16px / 660px)) !important;
    line-height: 1.5 !important;
  }

  #jtbcmodule-board-container .board__inner,
  #jtbcmodule-board-container .board__box {
    font-size: calc(100vw * (16px / 660px)) !important;
    line-height: 1.5 !important;
  }

  #jtbcmodule-board-container [class*="Paging_value__"] {
    font-size: calc(100vw * (12px / 660px)) !important;
    line-height: 1.5 !important;
  }

  #jtbcmodule-board-container [class*="Paging_icon__"] {
    width: calc(100vw * (14px / 660px)) !important;
    height: calc(100vw * (46px / 660px)) !important;
  }

  #jtbcmodule-board-container .board__inner {
    margin-left: 0;
  }

  /* ---- index-v3 일정 안내 박스 ---- */
  .v2-schedule-box {
    padding: calc(100vw * (30px / 660px)) 0;
    border-width: calc(100vw * (1px / 660px));
  }

  .v2-schedule-box > .inner {
    gap: calc(100vw * (6px / 660px));
  }

  .v2-schedule-list > li {
    padding-left: calc(100vw * (25.5px / 660px));
    font-size: calc(100vw * (17px / 660px));
    line-height: calc(100vw * (28px / 660px));
  }

  .v2-schedule-list > li:before {
    top: calc(100vw * (13px / 660px));
    left: calc(100vw * (10.5px / 660px));
    width: calc(100vw * (4px / 660px));
    height: calc(100vw * (4px / 660px));
  }

  .v2-schedule-list .v2-schedule-note {
    padding-top: calc(100vw * (6px / 660px));
  }

  .v2-schedule-note {
    font-size: calc(100vw * (14px / 660px));
    line-height: calc(100vw * (18px / 660px));
  }
}