@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");

:root {
    --blue01: #388bda;
    --blue02: #d2e5f7;
    --green: #aeecad;
    --black01: #181b39;
    --black02: #373737;
    --gray01: #4b4b4b;
    --gray02: #b4b4b4;
    --gray03: #ebebeb;
    --gray04: #f6f6f6;
    --red: #db2f2f;
}

body {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--black01);
    font-style: normal;
    letter-spacing: -0.02em;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

html.hidden {
    overflow: hidden;
}

body.hidden {
    height: auto;
    overflow: hidden;
}

button,
input,
textarea,
select {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--black02);
    letter-spacing: -0.02em;
}

input::placeholder,
textarea::placeholder {
    color: var(--gray02);
}

.inner {
    position: relative;
    width: 1400px;
    margin: 0 auto;
}

/* ----- header ----- */
header .util {
    background-color: var(--black01);
}

header .util ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 30px;
    height: 40px;
}

header .util .util_list button,
header .util .util_list a {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
}

header .util ul .util_list button .icon,
header .util ul .util_list a .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
}

header .nav {
    background-color: var(--blue02);
}

header .nav .inner {
    display: flex;
    align-items: center;
    height: 60px;
}

header .nav .inner .logo {
    width: 115px;
    height: 35px;
    margin-right: 20px;
}

header .nav .inner .company {
    display: flex;
    max-width: 290px;
    font-size: 18px;
    font-weight: bold;
}

header .nav .inner .company p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

header .nav .inner nav {
    margin-left: auto;
}

header .nav .inner nav ul {
    display: flex;
    gap: 60px;
    font-weight: bold;
}

/* ----- footer ----- */
footer {
    background-color: var(--gray04);
}

footer .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 130px;
    color: var(--gray02);
}

footer .inner .logo a {
    width: 115px;
    height: 35px;
}

/* ----- button ----- */
.basic_button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    color: var(--black01);
    border-radius: 5px;
}

.basic_button .icon {
    width: 25px;
    height: 25px;
}

.basic_button.black {
    height: 50px;
    color: #fff;
    background-color: var(--black01);
}

.basic_button.black_line {
    height: 35px;
    border: 1px solid var(--black01);
    background-color: #fff;
}

.basic_button.black_line:hover {
    background-color: var(--blue02);
    border: 1px solid var(--blue02);
}

.basic_button.white_line {
    height: 35px;
    color: #fff;
    border: 1px solid #fff;
}

.basic_button.white_line .icon {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(186deg)
    brightness(104%) contrast(101%);
}
.basic_button.white_line:hover {
    color: var(--black01);
    background-color: var(--blue02);
    border-color: var(--blue02);
}
.basic_button.white_line:hover .icon {
    filter: invert(12%) sepia(10%) saturate(3281%) hue-rotate(197deg)
    brightness(95%) contrast(100%);
}

.basic_button.green {
    height: 35px;
    background-color: var(--green);
}

.basic_button.green .icon {
    filter: invert(12%) sepia(11%) saturate(3683%) hue-rotate(198deg) brightness(83%) contrast(97%);
}

.basic_button.green:disabled {
    color: var(--gray02);
    border: 1px solid var(--gray02);
    background-color: transparent;
}

.basic_button.green:disabled .icon {
    filter: invert(75%) sepia(0%) saturate(14%) hue-rotate(172deg) brightness(98%) contrast(85%);
}

/* input */
.basic_input {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    color: var(--black02);
    background-color: var(--gray04);
    border-radius: 5px;
}

.basic_input.error {
    border: 1px solid var(--red);
}

.search {
    display: flex;
}

.search input {
    width: 540px;
    height: 50px;
    padding: 0 20px;
    border: 1px solid var(--gray02);
    border-right: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.search .search_button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 50px;
    background-color: var(--black01);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.search .search_button .icon {
    display: inline-block;
    width: 25px;
    height: 25px;
}

/* textarea */
.basicTextarea {
    display: block;
    width: 100%;
    height: 230px;
    padding: 13px 20px;
    color: var(--black02);
    background-color: var(--gray04);
    border-radius: 5px;
}

.basicTextarea.error {
    border: 1px solid var(--red);
}

/* select */
.select {
    position: relative;
    cursor: pointer;
}

.select .now_select {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 127px;
    height: 35px;
    padding: 0 40px 0 10px;
    border: 1px solid var(--black01);
    border-radius: 5px;
}

.select .now_select::after {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url("../image/icon/icon_arrow_bottom.svg") no-repeat center /
    cover;
    content: "";
}

.select .option {
    position: absolute;
    top: calc(100% + 2px);
    display: none;
    width: 100%;
    max-height: 186px;
    background-color: var(--gray04);
    border-radius: 5px;
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
    overflow: auto;
}

.select .option .option_list {
    padding: 4px 10px;
}
.select .option .option_list .custom_title {
    padding: 4px 10px;
}

.select.on .now_select::after {
    transform: translateY(-50%) rotate(180deg);
}

.select.on .option {
    display: block;
}

/* pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.pagination button {
    width: 26px;
    height: 26px;
}

.pagination .page_arrow_button {
    display: flex;
    gap: 2px;
}

.pagination .page_number {
    display: flex;
    gap: 8px;
}

.pagination .page_number button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: var(--gray02);
    line-height: 1.1;
}

.pagination .page_number button.on {
    color: var(--black01);
    background-color: var(--blue02);
    border-radius: 2px;
}

/* ----- modal ----- */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9;
}

.modal .modal_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 680px;
    padding: 40px;
    background-color: #fff;
    border-radius: 20px;
}

.modal .title.line {
    padding-bottom: 10px;
}

.modal .close_button {
    width: 380px;
    margin: 0 auto;
}

.modal .custom_close_button {
    width: 380px;
    margin: 0 auto;
}

.modal .idle_button {
    width: 380px;
    margin: 0 auto;
}


.modal .event_button {
    margin: 70px auto 20px;
}

.modal .modal_inner .wrap {
    height: 100%;
    overflow: auto;
}

.basic_modal .text {
    font-size: 24px;
    font-weight: bold;
}

.basic_modal .sub_text {
    margin-top: 10px;
    font-size: 16px;
    color: var(--gray02);
}

.basic_modal .close_button {
    width: 190px;
    margin: 30px 0 0 auto;
}

.basic_modal .custom_close_button {
    width: 190px;
    margin: 30px 0 0 auto;
}

.basic_modal .idle_button {
    width: 190px;
    margin: 30px 0 0 auto;
}

/* 알림 모달 */
.notice_modal .notice {
    margin-bottom: 70px;
    padding: 20px 0;
    height: 420px;

    border-bottom: 1px solid var(--gray03);
}

.notice_modal .notice ul {
    height: 100%;
    overflow: auto;
}

.notice_modal .notice ul::-webkit-scrollbar {
    width: 20px;
    height: 20px;
}

.notice_modal .notice ul::-webkit-scrollbar-track {
    background: transparent;
}

.notice_modal .notice ul::-webkit-scrollbar-thumb {
    background: var(--gray04);
    background-clip: padding-box;
    border-left: 12px solid transparent;
}

.notice_modal .noticeList {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notice_modal .noticeList:not(:last-child) {
    margin-bottom: 18px;
}

.notice_modal .noticeList .date {
    font-weight: bold;
    color: var(--gray02);
}

/* 추천 간행물 모달 */
.publication_modal .modal_inner {
    height: 815px;
}

.publication_modal .book {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 364px;
    height: 462px;
    margin: 0 auto 20px;
    background-color: var(--gray04);
}

.publication_modal .book .img {
    width: 308px;
    height: 406px;
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.2);
}

.publication_modal .detail {
    margin-bottom: 50px;
    text-align: center;
    border-top: 2px solid var(--black01);
}

.publication_modal .detail_title {
    padding: 10px 0;
    font-size: 18px;
}

.publication_modal .detail .thead,
.publication_modal .detail .tbody {
    display: flex;
}

.publication_modal .detail .thead li,
.publication_modal .detail .tbody li {
    flex-shrink: 0;
    width: calc(100% / 3);
}

.publication_modal .detail .thead {
    padding: 10px 0;
    color: var(--gray02);
    border-top: 1px solid var(--gray03);
    border-bottom: 1px solid var(--gray03);
}

.publication_modal .detail .tbody {
    padding: 20px 0;
}

/* 클레임 신청 모달 */
.claim_modal .modal_inner {
    height: 833px;
}

.claim_modal .info {
    position: relative;
    height: 50px;
    margin-bottom: 20px;
    padding: 14px 20px;
    color: var(--gray02);
    background-color: var(--black01);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.claim_modal .info::after {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 20px;
    height: 20px;
    background: url("../image/icon/icon_arrow_bottom_white.svg") no-repeat center / cover;
    content: "";
}

.claim_modal .info.on {
    height: auto;
}

.claim_modal .info.on::after {
    transform: rotate(180deg);
}

.claim_modal .info p {
    margin-bottom: 27px;
}

.claim_modal .info .info_title {
    margin-right: 10px;
    font-weight: bold;
    color: #fff;
}

.claim_modal .info .info_list_wrap,
.claim_modal .info .numberlist_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.claim_modal .info .info_list_wrap {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #fff;
}

.claim_modal .info .numberlist_wrap li {
    flex-shrink: 0;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.claim_modal .title {
    margin-bottom: 20px;
}

.claim_modal .detail {
    margin-bottom: 20px;
}

.claim_modal .detail .claim_title {
    margin-bottom: 15px;
}

.claim_modal .filetitle_container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.claim_modal .filetitle_container .fileTitle {
    font-weight: bold;
    margin-right: 20px;
}

.claim_modal .filetitle_container input {
    display: none;
}

.claim_modal .filetitle_container label {
    width: 127px;
}

.claim_modal .filetitle_container .warning_text {
    margin-left: 10px;
}

.claim_modal .file_list_wrap {
    height: 145px;
    padding: 13px 20px;
    background-color: var(--gray04);
    border-radius: 5px;
}

.claim_modal .file_list_wrap.error {
    border: 1px solid var(--red);
}

.claim_modal .file_list_wrap .file_list {
    display: flex;
    color: var(--black02);
}

.claim_modal .file_list_wrap .file_list:not(:last-child) {
    margin-bottom: 12px;
}

.claim_modal .file_list_wrap .file_list .fileName {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.claim_modal .file_list_wrap .file_list .deleteButton {
    flex-shrink: 0;
    margin-left: 4px;
    color: var(--red);
    line-height: 1;
    border-bottom: 1px solid var(--red);
}

.claim_modal .error_text {
    width: 380px;
    margin: 10px auto -60px;
}

/* 배송 조회 모달 */
.delivery_modal .detail {
    min-height: 490px;
    margin-bottom: 70px;
    border-bottom: 1px solid var(--gray03);
}

/* 구독 문의하기 모달 */
.inquiry_modal .table {
    margin-bottom: 10px;
}

.inquiry_modal .table .thead,
.inquiry_modal .table .tbody {
    display: flex;
    align-items: center;
    text-align: center;
}

.inquiry_modal .table .thead {
    height: 42px;
    color: var(--gray02);
    border-bottom: 1px solid var(--gray03);
}

.inquiry_modal .table .tbody {
    padding: 20px 0;
}

.inquiry_modal .table .department,
.inquiry_modal .table .name {
    width: 170px;
}

.inquiry_modal .table .email {
    width: 260px;
}

.inquiry_modal .info li:not(:last-child),
.inquiry_modal .inquiry li:not(:last-child) {
    margin-bottom: 15px;
}

.inquiry_modal .format {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.inquiry_modal .format .buttonlist_wrap {
    display: flex;
    gap: 12px;
    margin-left: 30px;
}

.inquiry_modal .format .buttonList {
    width: 127px;
}

.inquiry_modal .format .buttonList input {
    display: none;
}

.inquiry_modal .format .buttonList label {
    cursor: pointer;
}

.inquiry_modal .format .buttonList input:checked + label {
    background-color: var(--blue02);
    border: 1px solid var(--blue02);
}

.inquiry_modal .inquiry {
    margin-bottom: 10px;
}

.inquiry_modal .error_text {
    width: 380px;
    margin: 10px auto -60px;
}

/* 비밀번호 변경 모달 */
.change_password_modal .modal_inner {
    padding: 40px 150px;
}

.change_password_modal .modal_title {
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.change_password_modal .input_list:not(:last-child) {
    margin-bottom: 15px;
}

.change_password_modal .error_text {
    margin: 10px 0 -60px;
}

/* 로그아웃 확인 모달 */
.logout_confirm_modal .button_container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;
    margin-top: 30px;
}

.logout_confirm_modal .button_container .close_button {
    margin: 0;
}

.logout_confirm_modal .button_container .cancel_button {
    width: auto;
}