@charset "UTF-8";

/*
 * HanbitSoft Service Development Team
 * spg8116@hanbitsoft.co.kr
*/

/* 1. box-sizing을 border-box로 통일 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. 기본 마진 제거 */
* {
    margin: 0;
}

/* 3. 모바일 브라우저에서 텍스트 크기 조절 방지 및 기본 높이 설정 */
html {
    height: 100%;
}
body {
    min-height: 100%;
}

/* 4. 타이포그래피 설정 및 부드러운 텍스트 렌더링 */
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* 5. 미디어 요소가 컨테이너를 벗어나지 않도록 설정 (반응형 기본) */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

ul,
ol,
li {
    list-style: none;
    padding: 0;
}

a {
    text-decoration: none; /* 기본 밑줄 제거 */
    color: inherit; /* 부모 요소의 글자 색상을 그대로 상속받음 */
}

/* 6. 폼 태그들이 부모의 폰트를 상속받도록 설정 */
input,
button,
textarea,
select {
    font: inherit;
}

table {
    border-collapse: collapse;
}

/* 7. 텍스트가 부모 컨테이너를 넘어갈 때 자동 줄바꿈 */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* 8. React/Next.js의 최상위 루트 요소가 페이지 전체 높이를 차지하도록 설정 */
#root,
#__next {
    isolation: isolate;
}

.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    max-width: 2560px;
    font-family:
        "맑은 고딕", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
}

.btnHome {
    position: absolute;
    z-index: 100;
    top: 41px;
    right: 0;
    width: 120px;
    height: 46px;
}

.globalheader {
    background: url(../images/bg-header.jpg) no-repeat 50% 0;
    height: 629px;
}

.globalnav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    display: flex;
    width: 100%;
    justify-content: center;
    z-index: 100;
}
.globalnav .globalnav-content {
    background: #373534;
    flex: 1;
}
.globalnav .globalnav-content:first-child .globalnav-link {
    margin-left: auto;
}
.globalnav .globalnav-content:last-child .globalnav-link {
    margin-right: auto;
}
.globalnav .globalnav-content .globalnav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
    height: 74px;
    font-size: 25px;
    color: #72706f;
}
.globalnav .globalnav-content.active {
    background: #ff546c;
}
.globalnav .globalnav-content.active .globalnav-link {
    color: #fff;
}

.globalfooter {
    background: #1c1c1c;
}
.globalfooter .globalfooter-content {
    display: flex;
    align-items: center;
    gap: 90px;
    width: 1200px;
    margin: 0 auto;
    padding: 117px 0;
}
.globalfooter .globalfooter-content h2 {
    background: url(../images/footer-headline.png) no-repeat 0 0;
    width: 90px;
    height: 24px;
}
.globalfooter .globalfooter-content ol {
    flex: 1;
}
.globalfooter .globalfooter-content ol li {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: -0.98px;
    color: #818181;
    padding-bottom: 10px;
    word-break: keep-all;
}
.globalfooter .globalfooter-content ol li strong {
    color: #a5a5a5;
}
.globalfooter .globalfooter-content ol li .footer-link {
    border: 0;
    background: transparent;
    color: #a4a4a4;
    text-decoration: underline;
    cursor: pointer;
}
.globalfooter .globalfooter-content ol li.em {
    color: #a4a4a4;
}
.globalfooter .copyright {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.4px;
    color: #4d4d4d;
}
.globalfooter.refund .globalfooter-content h2 {
    background-image: url(../images/footer-headline-refund.png);
    width: 122px;
    height: 53px;
}

.section {
    padding: 110px 0;
    text-align: center;
}

.section-content {
    position: relative;
    width: 1200px;
    margin: 0 auto;
}

.heading-2 {
    font-size: 48px;
    font-weight: 400;
    letter-spacing: -1px;
    color: #3a3837;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 30px;
    position: relative;
}
.heading-2 em {
    font-weight: 700;
    font-style: normal;
}
.heading-2 em::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background: #fe8496;
    width: 15px;
    height: 6px;
}

.heading-3 {
    font-size: 35px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -1px;
    color: #3a3837;
    padding-bottom: 30px;
}

.typo-copy {
    font-size: 21px;
    font-weight: 300;
    letter-spacing: -0.4px;
    color: #282123;
    text-align: center;
    padding-bottom: 20px;
}
.typo-copy strong {
    font-weight: 700;
}
.typo-copy-emp,
.typo-copy-emp-02 {
    font-size: 21px;
    font-weight: 400;
    letter-spacing: -0.6px;
    color: #211d1e;
    text-align: center;
}
.typo-copy-emp-02 {
    font-style: italic;
    color: #ff546c;
}
.typo-copy-small {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: #717070;
    text-align: center;
}

.infomation-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 0 50px;
}
.infomation-wrapper .information,
.infomation-wrapper .information-empa {
    border-radius: 999px;
    border: 1px solid #ff455f;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 848px;
    height: 57px;
}
.infomation-wrapper .information .info-headline,
.infomation-wrapper .information-empa .info-headline {
    font-size: 19px;
    font-weight: 700;
    color: #ff455f;
}
.infomation-wrapper .information .info-des,
.infomation-wrapper .information-empa .info-des {
    font-size: 19px;
    font-weight: 400;
    color: #373534;
}
.infomation-wrapper .information-empa {
    background-color: #fff0f0;
}
.infomation-wrapper .information-emp .notice {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: #717070;
    padding-top: 15px;
}

.button-primary {
    border: none;
    background: #ff455f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #fff;
    cursor: pointer;
}
.button-secondary {
    border: 1px solid #ff455f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #ff455f;
    cursor: pointer;
}

.button-text-primary {
    border: 0;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.4px;
    color: #ff546c;
    text-decoration: underline;
    cursor: pointer;
}

.table-wrapper {
    width: 686px;
    margin: 0 auto 20px;
}
table {
    width: 100%;
    font-size: 19px;
}
table th,
table td {
    border: 2px solid #ffcfcf;
    height: 50px;
}
table th {
    background: #ff546c;
    color: #fff;
}
table td {
    color: #373534;
}

.notice-box {
    border: 2px solid #c2c2c2;
    background: #f6f6f6;
    padding: 50px 0;
}
.notice-box .notice-box-headline {
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -1px;
    color: #3a3837;
    padding-bottom: 36px;
}
.notice-box ol {
    width: 840px;
    margin: 0 auto;
}
.notice-box ol li {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.6px;
    color: #666666;
    text-align: left;
    word-break: keep-all;
}
.notice-box ol li em {
    font-style: normal;
    font-weight: 700;
    color: #ff546c;
}

.notice-list {
    padding-top: 20px;
}
.notice-list li {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: #717070;
    text-align: center;
    padding-bottom: 4px;
}

.agree-box {
    margin: 24px 0 44px;
    cursor: pointer;
}
.agree-box span {
    font-size: 19px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.6px;
    color: #242423;
    text-decoration: underline;
    cursor: pointer;
}

.footer-link {
    border: 0;
    background: transparent;
    text-decoration: underline;
    cursor: pointer;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.modal.active {
    display: block;
}
.modal .dimmed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
}
.modal .modal-content {
    border-radius: 24px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 640px;
    padding: 64px;
    text-align: center;
    z-index: 2;
    box-sizing: border-box;
}
.modal .modal-content .button-close {
    background: transparent;
    position: absolute;
    top: 0;
    right: 10px;
    padding: 10px;
    width: 48px;
    height: 48px;
}
.modal .modal-content .button-close img {
    width: 48px;
    height: 48px;
}
.modal .modal-content h1 {
    border-bottom: 2px solid #ce3231;
    font-size: 34px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -1.7px;
    color: #282828;
    text-align: center;
    padding-bottom: 34px;
}
.modal .modal-content p {
    color: #333;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 137.5% */
    letter-spacing: -0.8px;
    padding: 28px 0 36px;
}
.modal .modal-content small {
    display: block;
    font-size: 14px;
    font-weight: 700;
    padding-bottom: 16px;
}
.modal .modal-content button {
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 120px;
    padding: 37px 50px;
    margin: 0 auto;
    box-sizing: border-box;
    cursor: pointer;
}
.modal .modal-content button span {
    color: #fff;
    text-align: left;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 137.5% */
    letter-spacing: -0.8px;
}
.modal .modal-content button span strong {
    display: block;
    color: #fff;
    text-align: left;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 133.333% */
    letter-spacing: -0.9px;
}
.modal .modal-content button img {
    width: 16px;
}
.modal .modal-content button.phone {
    border-radius: 6px;
    background: #4f4f4f;
    margin-bottom: 20px;
}
.modal .modal-content button.ipin {
    border-radius: 6px;
    border: 1px solid #4f4f4f;
    background: #fff;
}
.modal .modal-content button.ipin span,
.modal .modal-content button.ipin span strong,
.modal .modal-content button.ipin span img {
    color: #4f4f4f;
}

/* 캐릭터 이관 일정 안내 */
.section-character-migration-schedule .button-wrapper {
    text-align: center;
}
.section-character-migration-schedule .button-wrapper .button-primary {
    width: 468px;
}

/* 캐릭터 이관신청 */
.process {
    position: relative;
    width: 272px;
    margin: 0 auto 40px;
}
.process ul {
    display: flex;
    gap: 24px;
    justify-content: center;
}
.process li {
    border-radius: 50%;
    border: 1px solid #cbcbcb;
    background: #fff;
    width: 25px;
    height: 25px;
    position: relative;
}
.process li::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #cbcbdb;
    width: 15px;
    height: 15px;
}
.process li.active {
    border-color: #fecdd4;
    background: #ffdde3;
}
.process li.active::after {
    background: #ff546c;
}
.process .background-line {
    border: 1px dashed #cbcbcb;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translate(0, -50%);
}

/* 1. 라벨 클릭 영역 설정 */
.input-check-character {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    gap: 8px;
    margin-right: 16px; /* 항목 간 간격 */
}

/* 2. 기본 라디오 버튼 숨기기 */
.input-check-character input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

/* 3. 체크박스 모양의 가짜 라디오 버튼 만들기 */
.checkmark {
    width: 24px;
    height: 24px;
    border: 2px solid #ff546c;
    position: relative;
    transition: all 0.2s;
}

/* 4. 선택(Checked)되었을 때의 박스 디자인 */
.input-check-character input:checked ~ .checkmark {
    background-color: #ff546c;
    border-color: #ff546c;
}

/* 5. 박스 안의 체크 모양(V) 그리기 */
.checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 6. 선택되었을 때 V자 모양 보여주기 */
.input-check-character input:checked ~ .checkmark::after {
    display: block;
}

/* 1. 비활성화 상태일 때 가짜 체크박스(라디오) 디자인 변경 */
.input-check-character input:disabled ~ .checkmark {
    background-color: #c6c6c6;
    border-color: #b5b5b5;
    cursor: not-allowed;
}

/* 2. 비활성화 상태인데 '체크(선택)'까지 되어 있는 경우 */
.input-check-character input:checked:disabled ~ .checkmark {
    background-color: #c0c0c0; /* 기존 파란색 대신 회색으로 */
    border-color: #c0c0c0;
}

/* 3. 라벨 텍스트 전체를 흐리게 만들고 커서 바꾸기 (최신 브라우저 지원) */
.input-check-character:has(input:disabled) {
    color: #999;
    cursor: not-allowed;
}

/* 만약 브라우저 호환성 때문에 :has()를 쓰기 어렵다면 아래 방식을 사용하세요 */
/* .input-check-character input:disabled ~ span (텍스트를 span으로 한 번 더 감쌌을 경우) */

/* 캐릭터 이관 신청 1 */
.section-character-migration-request-01 {
    text-align: center;
}
.how-to-migration {
    text-align: center;
}
.migration-step {
    background: url(../images/migration-step.png) no-repeat;
    width: 1200px;
    height: 157px;
    margin-bottom: 50px;
}
.section-character-migration-request-01 .button-wrapper {
    width: 680px;
    margin: 0 auto;
}

/* 캐릭터 이관 신청 3 */
.select-character {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 12px;
    row-gap: 48px;
    padding-top: 20px;
}
.select-character .select-character-item {
    width: calc(300px - 12px);
}
.select-character .select-character-item .input-check-character {
    margin-bottom: 22px;
}

/* 캐릭터 이관 신청 4-A */
.application-date {
    border: 1px solid #c2c2c2;
    background-color: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 683px;
    height: 67px;
    margin: 0 auto 57px;
}
.application-date p {
    font-size: 19px;
    color: #ff546c;
}
.application-date p strong {
    font-weight: 700;
}

.application-details {
    display: flex;
    justify-content: center;
    gap: 25px;
}
.application-details .application-details-item {
    width: 480px;
}
.application-details .application-details-item h4 {
    border: 2px solid #ffcfcf;
    border-bottom: 0;
    background-color: #646464;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

/* 캐시 환불 신청 */
.apply-info {
    padding-bottom: 94px;
}
.apply-info ol {
    padding-bottom: 30px;
}
.apply-info ol li {
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: -0.6px;
    color: #666666;
}
.apply-info .condition {
    border: 2px solid #dcdcdc;
    width: 683px;
    margin: 0 auto;
    box-sizing: border-box;
}
.apply-info .condition h4 {
    background-color: #1c1c1c;
    display: flex;
    align-items: center;
    height: 60px;
    justify-content: center;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
}
.apply-info .condition ul li {
    border-top: 2px solid #dcdcdc;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 53px;
    font-size: 19px;
    font-weight: 400;
    color: #373534;
}
.apply-info .condition ul li:first-child {
    border-top: 0;
}

.apply-refund {
}
.apply-refund .before-login {
    border: 2px solid #c2c2c2;
    background-color: #f6f6f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 872px;
    height: 311px;
    margin: 0 auto;
    box-sizing: border-box;
}
.apply-refund .before-login p {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.6px;
    color: #211d1e;
    padding-bottom: 45px;
}

.apply-refund .after-login {
    border: 2px solid #c2c2c2;
    background-color: #f6f6f6;
    width: 872px;
    margin: 0 auto;
    padding: 30px 60px 60px;
    box-sizing: border-box;
}
.apply-refund .after-login h4 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -1px;
    color: #252423;
    padding-bottom: 35px;
}
.apply-refund .after-login table.refund-info {
    border-top: 2px solid #2b2b2b;
    border-bottom: 2px solid #2b2b2b;
    border-left: 0;
    border-right: 0;
    margin-bottom: 20px;
}
.apply-refund .after-login table.refund-info th {
    border: 0;
    border-top: 2px solid #fff;
    background: #cbcbcb;
    height: 48px;
    font-size: 17px;
    font-weight: 700;
    color: #212121;
}
.apply-refund .after-login table.refund-info tr:first-child th,
.apply-refund .after-login table.refund-info tr:first-child td {
    border-top: 0;
}
.apply-refund .after-login table.refund-info td {
    border: 0;
    border-top: 2px solid #cbcbcb;
    background: #fff;
    height: 48px;
    font-size: 17px;
    font-weight: 400;
    color: #212121;
    text-align: left;
    padding: 0 28px;
    box-sizing: border-box;
}
.apply-refund .after-login h5 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -1px;
    color: #636363;
    text-align: left;
    padding-bottom: 8px;
}
.apply-refund .after-login ol {
    padding-bottom: 30px;
}
.apply-refund .after-login ol li {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.4px;
    color: #838383;
    text-align: left;
}
.apply-refund .after-login ol li strong {
    font-weight: 400;
    color: #de5454;
}
.apply-refund .after-login .input-check {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 50px;
}
.apply-refund .after-login .input-check input {
    accent-color: #575757;
    width: 19px;
    height: 19px;
}
.apply-refund .after-login .input-check .text {
    font-size: 16px;
    font-weight: 700;
    line-height: 23px;
    letter-spacing: -0.6px;
    color: #242423;
    text-align: left;
    text-decoration: underline;
}
.apply-refund .after-login .refund-account-info {
    border-top: 2px solid #cdcdcd;
    border-bottom: 2px solid #cdcdcd;
    background-color: #efefef;
    padding: 34px 50px;
    margin-bottom: 16px;
}
.apply-refund .after-login .refund-account-info div {
    display: flex;
    align-items: center;
    padding-top: 13px;
}
.apply-refund .after-login .refund-account-info div:first-child {
    padding-top: 0;
}
.apply-refund .after-login .refund-account-info div span {
    flex: 1;
    font-size: 17px;
    font-weight: 700;
    text-align: left;
    color: #212121;
}
.apply-refund .after-login .refund-account-info div input {
    border: 1px solid #e1e1e1;
    background: #fff;
    width: 489px;
    height: 48px;
    padding: 0 25px;
    box-sizing: border-box;
}
.apply-refund .after-login ul {
    padding-bottom: 50px;
}
.apply-refund .after-login ul li {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.4px;
    color: #838383;
}

/* 캐릭터 이관 혜택 */
.welcome-gift {
    border: 2px solid #ffe8e8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    height: 458px;
    box-sizing: border-box;
}

/* 수정사항 */
.button-apply-migration,
.button-start-migration {
    margin-bottom: 16px;
}