@import url(modal.css);

.wrap {
    max-width:1120px;
    width:100%;
    margin:auto;
}

@media screen and (max-width:1180px){
    .wrap {
        width:100%;
        max-width:96%;
    }
}

/**/

.fade-up {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 0.8s ease-out forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/**/
body {
    min-height:100vh;
    height:auto;
}

/* 부트스트랩 수정 */
.btn {
    font-size:1.7rem;
}

/* 헤더 */
#cbtp-header {
    background:#fff;
    position:relative;
    z-index:1000;
    border-bottom:1px solid #EAEDEF;
    display:flex;
    align-items: center;
    height:80px;
}
#cbtp-header .wrap {
    display:flex;
    align-items: center;
    justify-content:space-between;
}

#cbtp-header .logo {
    width:176px;
    height: 56px;
}

#cbtp-header .logo img {
    width:100%;
}
#cbtp-header .mymenu {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--eaedef, #EAEDEF);
    background: var(--f-6-f-8-fb, #F6F8FB);
}

#cbtp-header .mymenu > div {
    display: flex;
    align-items: center;
    gap: 4px;
}

#cbtp-header .mymenu a {
    position: relative;
    display: flex; /* 아이콘 + 텍스트 가로 정렬 */
    align-items: center;
    color: var(--4-b-4-b-4-b, #4B4B4B);
    font-family: "LINE Seed Sans KR";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    text-decoration: none;
    padding: 0 6px;
}

#cbtp-header .mymenu a img {
    width: 20px;
    height: 20px;
    display: block;
}

#cbtp-header .mymenu div a:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    margin-right: 2px;
    background-color: #EAEDEF;
}

#cbtp-header nav {
    padding:1rem;
}
#cbtp-header ul.m1 {
  display: flex;
  justify-content: center;
  font-family: "LINE Seed Sans KR";
  font-size: 1.6rem;
}

#cbtp-header ul.m1 li.m1 {
  position: relative;
  padding: 1.6rem;
}

#cbtp-header ul.m2 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  justify-content: flex-start; 
  align-items: center;
  width: 140px; 
  padding: 8px 0;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid var(--eaedef, #EAEDEF);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: 10;
}

#cbtp-header ul.m2 li.m2 {
  width: 120px;
}

#cbtp-header ul.m2 li.m2 a.m2 {
  display: block;
  width: 100%;              /* ✅ 부모 너비에 맞추기 */
  padding: 8px 0;
  text-align: center;
  color: var(--000, #333950);
  font-family: "LINE Seed Sans KR";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 153.846% */
  background: #fff;
  border-radius: 4px;
}

#cbtp-header ul.m2 li.m2 a.m2:hover {
  background: #F4F6F8;
  font-family: "LINE Seed Sans KR";
  font-weight: 600;
  color: #298584;
}

#cbtp-header ul.m1 li.m1:hover ul.m2 {
  display: flex;
}

/* 헤더 모바일 */
.hamburger {
    width: 28px;
    height: 24px;
    background: url('/images/content/main/icon_ham.png') no-repeat center/contain;
    cursor: pointer;
    display: none; /* PC 숨김 */
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: #fff;
    box-shadow: -4px 0 12px rgba(0,0,0,0.15);
    padding: 24px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    z-index: 9999;
    transition: right 0.35s ease;
}

#ham-toggle:checked ~ .mobile-menu {
    right: 0;
}

.mobile-close {
    font-size: 28px;
    font-weight: 700;
    font-family: "LINE Seed Sans KR";
    color: #333;
    cursor: pointer;
    width: 32px;
    height: 32px;
    align-self: flex-end;
    margin-bottom: 8px;
}

.mobile-user-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid #EAEDEF;
    padding-bottom: 20px;
}

.mobile-user-box .user-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
    font-family: "LINE Seed Sans KR";
    font-size: 15px;
    text-decoration: none;
}

.mobile-user-box .user-menu img {
    width: 20px;
    height: 20px;
}

.mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mobile-menu-list li a {
    color: #111;
    font-size: 16px;
    font-family: "LINE Seed Sans KR";
    text-decoration: none;
    font-weight: 500;
}


@media (max-width: 767px) {

    /* PC 메뉴 숨기기 */
    #cbtp-header nav,
    #cbtp-header ul.m1,
    #cbtp-header .mymenu {
        display: none !important;
    }

    /* 햄버거 활성화 */
    .hamburger {
        display: block;
    }
}

.m-sub-toggle {
    display: none;
}

.m-sub-label {
    display: block;
    font-size: 16px;
    font-family: "LINE Seed Sans KR";
    font-weight: 500;
    color: #111;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.m-sub-label::after {
    content: "▼";
    font-size: 12px;
    font-family: "LINE Seed Sans KR";
    position: absolute;
    right: 0;
    top: 4px;
    transition: 0.3s;
}

.m-sub-toggle:checked + .m-sub-label::after {
    transform: rotate(180deg);
}

.m2-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 12px;
    margin-top: 4px;
}

.m-sub-toggle:checked + .m-sub-label + .m2-list {
    max-height: 400px; /* 넉넉한 값 */
}

.m2-list li a {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    font-family: "LINE Seed Sans KR";
    color: #444;
    text-decoration: none;
}

.m-sub-label::after {
    content: "";
    position: absolute;
    right: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    background: url('/images/content/layout/arrow_down_20.png') no-repeat center/contain;
    transition: transform 0.3s;
}

/* 펼침 시 180도 회전 */
.m-sub-toggle:checked + .m-sub-label::after {
    transform: rotate(180deg);
}


/**/
.sub-layout {
    display:flex;
    flex-direction: column;
    min-height:100vh;
}
.sub-layout .container-section {
    flex:1;
    display:flex;
    align-items:stretch;
    gap:8rem;
    padding:7.2rem 0;
}
.sub-layout .container-section aside {
    flex:0 0 200px;
    height:auto;
}
.side-menu {}
.side-menu .head {
    font-size:2.8rem;
    font-family: "LINE Seed Sans KR";
    font-weight:bold;
    margin-bottom:2.8rem;
}
.side-menu .body {
    font-size:1.8rem;
    font-family: "LINE Seed Sans KR";
    border-top:1px solid #333950;
}
.side-menu .body li {
    padding:1.6rem 1.2rem;
    border-bottom:1px solid #D1D2D3;
}
.side-menu .body li a {
    color: #727887;
    font-size:1.8rem;
    font-family: "LINE Seed Sans KR";
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
}
.side-menu .body li a.active {
    font-weight:bold;
    color:#298584;
}
.side-menu .body li a.active:before {
    content:"-";
}
.sub-layout .container-section .container-body {
    flex:1 1 auto;
}
.sub-layout .page-subject {
    color:#000;
    font-family: "LINE Seed Sans KR";
    font-weight:800;
    font-size:4rem;
    margin-bottom:4rem;
    margin-top: 3.2rem;
}

@media (max-width: 767px) {
    .sub-layout .container-section {
        flex-direction: column;    /* 본문이 세로로 쌓이도록 */
        gap: 0;                    /* 여백 제거 */
        padding: 3.2rem 0;         /* 모바일용 여백 줄이기 (선택) */
    }

    .sub-layout .container-section aside {
        display: none !important;  /* 사이드메뉴 숨김 */
    }

    /* 모바일에서 페이지 제목 상단 여백 조정 (선택사항) */
    .sub-layout .page-subject {
        margin-top: 1.6rem;
        font-family: "LINE Seed Sans KR";
        font-size: 2.8rem; /* 제목도 약간 줄이는 게 보통 좋아 */
    }
}


/* 푸터 */
footer .head {
    border-top: 1px solid #D1D2D3;
    background: #fff;
}

footer .head .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 10px 0;
}

footer .head .customer-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; 
    gap: 8px;
}

footer .head .customer-center .cs-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

footer .head .customer-center .cs-title .cs-icon {
    width: 24px;
    height: 24px;
}

footer .head .customer-center .cs-title .cs-icon img {
    width: 100%;
}

footer .head .customer-center .cs-title span {
    font-family: "LINE Seed Sans KR";
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

footer .head .customer-center .cs-num {
    display: flex;
    align-items: center;
    gap: 8px;
}

footer .head .customer-center .cs-num span {
    font-size: 16px;
    font-family: "LINE Seed Sans KR";
    color: #369291;
}

footer .head .logo {
    width:160px;
}

footer .head .logo img {
    width:100%;
}


footer .body {
    border-top:1px solid #D1D2D3;
    background:#F1F3F6;
    padding:20px 0 30px 0;
}

footer .body .banner-list {
    margin-bottom:56px;
}

footer .body .info {
    display:flex;
    justify-content: space-between;
}

footer .body .address {
    font-family: "LINE Seed Sans KR";
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 20px;
    letter-spacing: 0;
    vertical-align: middle;
    margin-bottom:8px;
}

footer .body .copyright {
    font-family: "LINE Seed Sans KR";
    font-size:1.2rem;
    color:#727887;
    font-weight:250;
}

footer .body .info a {
    font-family: "LINE Seed Sans KR";
    font-weight: 400;
    font-size: 1.4rem;
    color: #727887;
    position:relative;
    margin-right:12px;
    text-decoration: underline;
}


/* PC에서는 모바일 footer 숨기기 */
.footer-banner-mobile {
    display: none;
}

/* ----- 모바일 전용 ----- */
@media (max-width: 768px) {

    /* 고객센터 */
    footer .head .wrap {
        flex-direction: column;
        gap: 4px;
        align-items: center;
    }
    
    footer .head .logo {
        display: none;
    }

    footer .head .customer-center .cs-title span {
        font-family: "LINE Seed Sans KR";
        font-size: 12px; 
    }

    footer .head .customer-center .cs-num span {
        font-family: "LINE Seed Sans KR";
        font-size: 12px; 
    }

    footer .head .customer-center .cs-title .cs-icon {
        display: none;
    }

    /* PC 배너 숨기기 */
    .footer-banner-pc {
        display: none;
    }

    /* 모바일 리스트 보여주기 */
    .footer-banner-mobile {
        display: block;
        margin-bottom: 20px;
    }

    .footer-banner-mobile summary {
        padding: 8px 0;
        font-family: "LINE Seed Sans KR";
        font-size: 12px;
        text-align: center;
        font-weight: 500;
        cursor: pointer;
        background-color: #fff;
        border-radius: 8px;
        border:1px solid #ddd;
    }

    /* swiper 구조 깨고 세로 리스트로 전환 */

    .footer-banner-mobile .swiper-wrapper {
        margin-top: 20px;
        display: block !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .footer-banner-mobile .swiper-slide {
        width: 100% !important;
        display: block !important;
        margin-bottom: 12px;
        text-align: center;
    }

    .footer-banner-mobile .swiper-slide img {
        width: 120px;   /* 필요 시 조절 */
        height: auto;
        margin: 0 auto;
        display: block;
    }


    /* 주소 + 카피 + 약관 */
    footer .body .info {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    
    footer .body .copyright {
        font-family: "LINE Seed Sans KR";
        font-size: 10px;        /* 1.2rem → 11px */
    }

    footer .body .info .links a {
        font-family: "LINE Seed Sans KR";
        margin-right: 8px;
        font-size: 12px; 
    }

    footer .body .address {
        font-family: "LINE Seed Sans KR";
        font-size: 12px; 
    }

    
}



/* 공통 컴포넌트 */
.btn {
    width:240px;
    height:48px;
    display:flex;
    justify-content: center;
    align-items: center;
    font-family: "LINE Seed Sans KR";
    font-weight: 400;
    font-size: 1.4rem;
    color:#727887;
    border:1px solid #D1D2D3;
    border-radius:8px;
    background:#fff;
    transition: all 0.2s ease;
}
.btn:hover {
    background:#EEEEEE;
}
.btn.disabled {
    opacity:0.4;
    cursor:default;
}
.btn.btn-edit {
    font-family: LineSeed, -apple-system, BlinkMacSystemFont, system-ui, "Noto Sans KR", "Malgun Gothic", sans-serif;
    background:#264993;
    color:#fff;
    font-weight:700;
    border:1px solid #264993;
}
.btn.btn-edit:hover {
    background:#1d3875;
}
.btn.btn-primary {
    color:#fff !important;
}


@media (max-width: 768px) {

    .btn {
        width: 100%;              /* 모바일에서는 가로폭 꽉 채우도록 */
        height: 44px;             /* 높이는 약간 줄여서 자연스럽게 */
        font-family: "LINE Seed Sans KR";
        font-size: 14px;          /* rem 대신 px로 명확하게 */
        border-radius: 6px;       /* 둥글기 약간 축소 */
    }
    
    .btn.btn-edit {
        font-family: "LINE Seed Sans KR";
        font-size: 14px;
        height: 44px;
    }

    .btn.btn-primary {
        font-family: "LINE Seed Sans KR";
        font-size: 14px !important;
    }

    .btn.disabled {
        opacity: 0.5;             /* 살짝 더 흐리게 */
        cursor: default;          /* 모바일에서 pointer 의미 없어도 유지 */
    }
}



/* 사전진단 소개, 사전진단 안내 */

.esg-overview-top {
  position: relative;
  padding-left: 20px; /* 바와 텍스트 간격 확보 */
  border-left: 2px solid #EAEDEF; /* 세로 바 색상 */
}

.esg-overview-desc {
color: var(--4-b-4-b-4-b, #4B4B4B);
font-family: "LINE Seed Sans KR";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}

.section-subtitle {
  font-size: 20px;
  font-style: normal;
  font-family: "LINE Seed Sans KR";
  font-weight: 700;
  line-height: 32px; /* 160% */
  letter-spacing: -0.4px;
  border-bottom: 1px solid rgba(75, 75, 75, 0.60);
  padding-bottom: 12px;
  margin-top: 56px;
}

@media (max-width: 767px) {

    /* 좌측 세로 바 + 타이틀 영역 줄이기 */
    .esg-overview-top {
        padding-left: 14px;
        border-left-width: 2px; 
    }

    /* 설명문 */
    .esg-overview-desc {
        font-family: "LINE Seed Sans KR";
        font-size: 14px;
        line-height: 22px;
    }

    /* PC 전용 줄바꿈 숨김 */
    .pc-only {
        display: none;
    }

    /* 섹션 서브타이틀 */
    .section-subtitle {
        font-family: "LINE Seed Sans KR";
        font-size: 16px;
        line-height: 24px;
        margin-top: 32px;      /* 간격 줄이기 */
        padding-bottom: 10px;  /* 하단 라인 간격 축소 */
    }
}


.esg-purpose img,
.esg-structure img,
.esg-test-step img,
.esg-test-structure img {
  width: 100%;
  max-width: 840px;
  height: auto;
  display: block;
  margin: 0 auto;
}


.benefit-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 20px 0 0 0;
}

.benefit-item {
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 6px solid rgba(54, 164, 159, 0.20);
  background: #FFF;
  padding: 20px;
}

.benefit-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  margin-right: 16px;
}

.benefit-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 텍스트 */
.benefit-text h4 {
  color: #36A49F;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  font-family: "LINE Seed Sans KR";
  line-height: 24px; /* 133.333% */
  margin: 0 0 8px 0;
}

.benefit-text p {
  color: var(--333950, #333950);
  font-size: 13px;
  font-style: normal;
  font-family: "LINE Seed Sans KR";
  font-weight: 400;
  line-height: 20px; /* 153.846% */
}

.section-desc{
color: var(--727887, #727887);
font-family: "LINE Seed Sans KR";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
margin-top: 4px;
}

@media (max-width: 767px) {

  /* 그리드 2열 → 1열 */
  .benefit-list {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
  }

  /* 아이템 전체 박스 */
  .benefit-item {
    padding: 14px 16px; /* 패딩 감소 */
    border-width: 4px;  /* 테두리 두께 축소 */
    border-radius: 6px;
  }

  /* 아이콘 크기 축소 */
  .benefit-icon {
    width: 44px;
    height: 44px;
    margin-right: 12px;
  }

  .benefit-icon img {
    width: 100%;
    height: 100%;
  }

  /* 타이틀 */
  .benefit-text h4 {
    font-family: "LINE Seed Sans KR";
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 6px;
  }

  /* 본문 텍스트 */
  .benefit-text p {
    font-family: "LINE Seed Sans KR";
    font-size: 12px;
    line-height: 18px;
  }

  /* 상단 설명 문구 */
  .section-desc {
    font-family: "LINE Seed Sans KR";
    font-size: 13px;
    line-height: 18px;
  }
}


.guide-list {
  padding: 12px;
  margin-top: 20px;
  list-style: none;
  margin: 0;
  background: #F4F6F8;
}

.guide-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: #FFF;
  border-bottom: 1px solid #f0f0f0;
}

.guide-list li:last-child {
  border-bottom: none;
}

.guide-list img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.guide-text strong {
    color: var(--4-b-4-b-4-b, #4B4B4B);
    text-align: center;
    font-size: 16px;
    font-family: "LINE Seed Sans KR";
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    letter-spacing: -0.32px;
    margin-bottom: 8px;
}

.guide-text p {
  color: var(--4-b-4-b-4-b, #4B4B4B);
  font-family: "LINE Seed Sans KR";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  opacity: 0.8;
}

/* 등급 안내 */
/* 표 스타일 */
.esg-grade-table {
    width: 100%;
    border-collapse: collapse;
    /* margin-top: 24px; */
    background: #fff;
    /* border-top: 2px solid #EAEDEF; */
    font-size: 14px;
    font-family: "LINE Seed Sans KR";
}

.esg-grade-table th {
    background: #F4F6F8;
    font-weight: 700;
    font-family: "LINE Seed Sans KR";
    color: #333950;
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #EAEDEF;
}

/* 열 너비 */
.esg-grade-table .col-rank { width: 90px; }
.esg-grade-table .col-desc { width: auto; }
.esg-grade-table .col-badge { width: 120px; }

/* 개별 셀 정렬 */
.rank-cell {
    text-align: center;
    font-weight: 700;
    font-family: "LINE Seed Sans KR";
}

.desc-cell {
    text-align: left;
    line-height: 20px;
    color: #4B4B4B;
}

.badge-cell {
    text-align: center;
}

/* 배지 사이즈 */
.badge-cell img {
    width: 64px;
    height: 80px;
    object-fit: contain;
}

/* 행 줄 */
.esg-grade-table td {
    padding: 8px 16px;
    border-bottom: 1px solid #F0F0F0;
}

@media (max-width: 767px) {

  /* 테이블 전체 축소 */
  .esg-grade-table {
      font-size: 12px;
      font-family: "LINE Seed Sans KR";
  }

  .esg-grade-table th {
      padding: 10px 6px;
      font-size: 13px;
      font-family: "LINE Seed Sans KR";
  }

  .esg-grade-table td {
      padding: 6px 10px;
  }

  /* 열 너비 축소 */
  .esg-grade-table .col-rank { width: 60px; }
  .esg-grade-table .col-badge { width: 80px; }

  /* 텍스트 줄바꿈 자연스럽게 */
  .desc-cell {
      font-size: 12px;
      font-family: "LINE Seed Sans KR";
      line-height: 18px;
      word-break: keep-all;
  }

  /* 배지 이미지 축소 */
  .badge-cell img {
      width: 44px;
      height: 56px;
  }
}



/* modal */
.modal.show {
    display:flex !important;
    justify-content: center;
    align-items: center;
}
.modal.show .modal-dialog {
    max-width:540px;
    width:100%;
}
.modal.show .modal-dialog .modal-header {
    display:none;
}
.modal.show .modal-dialog .modal-content {
    border-radius:56px 0 56px 0;
    overflow:hidden;
    background:#F8F8F8;
}
.modal.show .modal-dialog .modal-body {
    padding:4.8rem;
    font-size:2rem;
    font-weight:400;
    color:#000;
    line-height:140%;
}

@media (max-width: 768px) {

    .modal.show {
        align-items: flex-end;      /* 하단에서 올라오는 모달 느낌 */
        padding: 0 16px 20px 16px;  /* 좌우·하단 여백 */
    }

    .modal.show .modal-dialog {
        max-width: 100%;
        width: 100%;
        margin: 0;
    }

    .modal.show .modal-dialog .modal-content {
        border-radius: 24px 24px 0 0; /* 모바일은 크게 둥근 상단 */
        background: #F8F8F8;
    }

    .modal.show .modal-dialog .modal-body {
        padding: 24px 20px;
        font-size: 16px;
        font-family: "LINE Seed Sans KR";
        line-height: 150%;
    }
}



/* 회원가입 유도 */
/* 전체 영역 */
.join-complete-wrap {
    width: 100%;
    padding: 140px 0;
    display: flex;
    justify-content: center;
}

/* 카드 */
.join-complete-card {
    width: 537px;
    height: 320px;
    padding: 43px 97px;
    border-radius: 56px 0;
    border: 1px solid var(--eaedef, #EAEDEF);
    background: #F8F8F8;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* gap: 16px; */
}

/* 아이콘 */
.join-complete-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 24px;
}

.join-complete-title {
    color: var(--000000, #000);
    text-align: center;
    font-size: 24px;
    font-family: "LINE Seed Sans KR";
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 33.6px */
    letter-spacing: -0.96px;
    margin-bottom: 8px;
}

.join-complete-desc {
    color: var(--727887, #727887);
    text-align: center;
    font-size: 15px;
    font-family: "LINE Seed Sans KR";
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 24px */
    margin-bottom: 24px;
}

.join-complete-btns {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
    transition: all 0.2s ease;
}

.join-complete-btn {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 160px;
    height: 48px;
    border-radius: 8px;
    text-decoration: none;

    font-size: 14px;
    font-family: "LINE Seed Sans KR";
    line-height: 20px;
}

.join-complete-btn.cancel {
    border: 1px solid #D1D2D3;
    background: #FFF;
    color: #727887;
    transition: all 0.2s ease;
}

.join-complete-btn.cancel:hover {
    background: #EEE;
}

.join-complete-btn.submit {
    background: #264993;
    border: none;
    color: #FFF;
    font-weight: 700;
    font-family: "LINE Seed Sans KR";
    transition: all 0.2s ease;
}

.join-complete-btn.submit:hover {
    background:
        linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%),
        #264993;
}

.join-complete-btn:focus,
.join-complete-btn:active {
    outline: none;
    box-shadow: none;
}


@media (max-width: 767px) {

    /* 전체 박스 */
    .join-complete-wrap {
        padding: 60px 0;
    }

    /* 카드 */
    .join-complete-card {
        width: calc(100% - 40px);   /* 좌우 20px 여백 */
        height: auto;
        padding: 32px 24px;
        border-radius: 32px 0;
    }

    .join-complete-icon {
        width: 56px;
        height: 56px;
        margin-bottom: 20px;
    }

    .join-complete-title {
        font-size: 20px;
        font-family: "LINE Seed Sans KR";
        margin-bottom: 6px;
        line-height: 1.4;
    }

    .join-complete-desc {
        font-size: 14px;
        font-family: "LINE Seed Sans KR";
        line-height: 22px;
        margin-bottom: 20px;
    }

    /* 버튼 그룹: 가로 한줄 */
    .join-complete-btns {
        flex-direction: row !important;
        justify-content: center;
        width: 100%;
        gap: 8px;
        margin-top: 16px;
    }

    /* 버튼 */
    .join-complete-btn {
        width: 100%;   /* 두 버튼이 균등하게 */
        max-width: none;
        height: 48px;
        font-size: 14px;
        font-family: "LINE Seed Sans KR";
    }
}