@charset "utf-8";

/* reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; color: inherit; outline: none; font: inherit; }
header, footer, section, article, aside, nav, main, hr, figure, figcaption, details, summary { display: block; }
h1, h2, h3, h4, h5, h6, th { font-weight: inherit; }
strong, b { font-weight: 900; }
small { font-size: 0.875em; }
sub, sup { font-size: 0.75em; }
address, em, i, cite, dfn, var { font-style: normal; }
abbr { text-decoration: underline dotted; cursor: help; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
a { text-decoration: none; color: inherit; }
button { background: none; border: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
input, textarea, select { border: 1px solid transparent; background-color: transparent; }
option { color: #333; }
fieldset { border: none; }
textarea { resize: vertical; min-height: 8rem; }
img { vertical-align: top; }
hr { width: 100%; height: 1px; border: none; }
::placeholder { color: rgba(255,255,255,0.8); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

  ::-webkit-scrollbar-track {
    border-radius: 0.125rem;
    background-color: lightgray;
  }
  ::-webkit-scrollbar {
    width: 0.25rem;
    border-radius: 0.125rem;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 0.125rem;
    background-color: gray;};
  }

/* 그누보드 기본 */
#captcha #captcha_info { margin-bottom: 0; font-size: 0.875rem; opacity: 0.6; font-weight: 300; }
#captcha #captcha_key { background-color: transparent; width: 120px; text-align: left; }
.pg_current { background-color: #333476; border-color: #333476; }

/* utility */
.u-container { width: 100%; padding: 0 1.25rem; margin-left: auto; margin-right: auto; }
.login .u-container,
.mb_confirm .u-container,
.password_lost .u-container { width: 75%; max-width: 800px; }

.u-grid { display: grid; }
.u-flex { display: flex; align-items: center; }
.u-line { width: 100%; height: 1px; border: 0; background-color: rgba(255,255,255,0.6); margin: 0.75rem 0; }

.u-emph { color: #6669ec; font-weight: 600; }
.u-ellipsis { white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis;text-overflow: ellipsis; }

.u-btn { font-weight: 600; display: inline-flex; justify-content: center; align-items: center; background-color: #979797; color: #fff; padding: 0.3125em 0.625em; border-radius: 0.5rem; }
.u-btn-01 { background-color: #FDF8A0; color: #6669ec; }
.u-btn-02 { background-color: #acaeff; color: #fff; }
.u-btn-03 { background-color: #FF3E8E; color: #fff; }
.u-btn-line { background-color: transparent; border: 1px solid #fff; }
.u-btn[disabled] { background-color: #B5B5D8; color: #7D7DBA; cursor: default; }

.u-btn-group { display: flex; justify-content: center; align-items: center; gap: 0.625rem; margin-top: 1.5rem; }
.u-btn-group .u-btn { width: 50%; padding: 0.875em 0.625em; }

.u-form-style, textarea { width: 100%; border: 1px solid #fff; border-radius: 0.5rem; padding: 0.625em; }
.u-form-style.u-flex { gap: 0.625em; }
.u-form-style[disabled],
.u-form-style[readonly] { opacity: 0.4; cursor: default; }

.u-form-icon { flex-shrink: 0; padding: 0 0.25em; }
.u-form-text { flex-grow: 1; max-width: calc(100% - 3em); }

.u-form-file .fileInput { display: none; }
.u-form-file .fileLabel { cursor: pointer; }
.u-form-file .fileName { display: inline-block; }

.u-form-check input { display: none; }
.u-form-check label { display: inline-flex; justify-content: flex-start; align-items: center; gap: 0.25em; cursor: pointer; vertical-align: top; line-height: 1.25em; }
.u-form-check label > * { vertical-align: top; }
.u-form-check label span { display: inline-block; width: 1.25em; height: 1.25em; border: 1px solid #fff; border-radius: 0.25rem; margin-top: -2px; }
.u-form-check input[type=checkbox]:checked + label span { background: url(../img/icon_chk.png) no-repeat center/80%; }
.u-form-check input[type=radio] + label span { -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; }
.u-form-check input[type=radio]:checked + label span { border: 0.35rem solid #fff;    background: #000; }
.u-form-check input[disabled] + label { cursor: default; }
.u-form-check input[disabled] + label span { filter: grayscale(1); }

.u-form-wrapper { display: flex; flex-wrap: wrap; gap: 0.875rem; }
.u-form-group { width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.u-form-group.nowrap { flex-wrap: nowrap; align-items: center; }
.u-form-group .u-btn { flex-shrink: 0; padding: 0.6em 1em; }

.u-form-list { display: flex; flex-direction: column; gap: 1rem; }
.u-form-info { font-size: 0.875rem; font-weight: 300; display: block; padding: 0.3em 0;}
.u-form-info::before { content:"※"; }

.u-list-item { border-top: 1px solid rgba(255,255,255,0.3); padding: 0.75rem 0; }
.u-list-item:first-child { padding-top: 0; border: 0; }
.u-list-item:last-child { padding-bottom: 0; }
.u-list-label { font-size: 0.875em; font-weight: 300; margin-bottom: 0.35rem; }
.u-list-desc { font-size: 0.9375em; }
.u-list-btn { display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.u-list-btn .u-btn { flex: 1 1 0; padding: 0.875em 0.625em; }

/* base */
.is_main_body { line-height: 1.4; font-family: 'NanumSquare', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #eef2fc; overflow: hidden; }
.wrapper { margin: 0 auto; height: calc(var(--vh, 1vh) * 100); display: flex; position: relative; }

/* modal */
.modal { width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); position: absolute; right: 0; top: 0; z-index: 1000; display: none; }
.modal .u-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.modal_inner { width: 96%; margin: auto; background-color: #fafafa; flex-direction: column; align-items: stretch; border-radius: 1rem; overflow: hidden; max-width: 800px; }
.modal_title { font-weight: 700; padding: 0.875rem 1rem; box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.04); position: relative; background-color: #fff; }
.modal_content { width: 100%; height: calc(var(--vh, 1vh) * 60); overflow-y: scroll; font-size: 0.875rem; padding: 0.75rem 1rem; color: #555; max-height: 25rem; line-height: 1.6; }
.modal_close_btn { padding: 1rem; box-shadow: 0 -0.25rem 0.5rem rgba(0,0,0,0.04); border-radius: 0 0 0.5rem 0.5rem;}
.modal_content .u-btn-line { border-color: #aaa; color: #777; }

/* alert */
#customAlert { position:absolute; right: 0; top: 0; z-index: 9999; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); opacity: 0; transition: 0.35s; pointer-events: none; }
#customAlert .alert_box { background-color:#fff; color:#333; -webkit-border-radius: 1rem;-moz-border-radius: 1rem;border-radius: 1rem; box-shadow: 0 0.25rem 2rem rgba(24, 24, 24, 0.1); width:80%; margin: auto; padding: 1rem; position: absolute; top: 50%; left: 0; right: 0; transition: 0.35s; transform: translateY(-65%); }
#customAlert .alert_desc { font-size: 0.9375em; font-weight: 600; }
#customAlert .alert_button { display: flex; max-width: 30%; padding: 0.4em 1em; background-color: #6669ec; color: #fff; margin: auto; -webkit-border-radius: 0.5rem;-moz-border-radius: 0.5rem;border-radius: 0.5rem; font-size: 0.875em; margin-top: 1rem; }
#customAlert.show { opacity: 1; pointer-events: auto; }
#customAlert.show .alert_box { transform: translateY(-50%); opacity: 1; }

/* app */
.app { width: 100%; height: 100%; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; display: flex; flex-direction: column; background-color: #6669ec; color: #fff; box-shadow: 0 0.625rem 1.875rem rgba(24, 24, 24, 0.08); position: relative; }
.app::-webkit-scrollbar { display: none; }

/* 1) 잘못된 문법 수정 (전역 스크롤바 스타일) */
::-webkit-scrollbar-track {
  border-radius: 0.125rem;
  background-color: lightgray;
}
::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem; /* 가로 스크롤 대비 */
  border-radius: 0.125rem;
}
::-webkit-scrollbar-thumb {
  border-radius: 0.125rem;
  background-color: gray; /* ← 여기 ; 로 끝내고 중괄호 하나만 닫기 */
}

/* 2) 모바일에선 스크롤바 '숨기지 않기' */
@media (max-width: 767px) {
  .app {
    -ms-overflow-style: auto !important;   /* IE/레거시 */
    scrollbar-width: thin !important;      /* Firefox */
  }
  .app::-webkit-scrollbar {
    display: block !important;             /* WebKit(안드/아이폰) */
    width: 6px;
    height: 6px;
  }
}

/* 3) 정말 필요할 때만 body를 막자 (선택) */
/* .is_main_body { overflow: hidden; }  ← 이게 꼭 필요 없다면 주석처리 또는 다음처럼 조건부로 */
@media (max-width: 767px) {
  .is_main_body { overflow-y: auto; }  /* 페이지 자체 스크롤 허용 */
}


/* bottom-app_bar */
.bottom_app_bar { position: sticky; bottom: -1px; width: 100%; background-color: #fff; padding: 0 0.5rem; box-shadow: 0 -0.25rem 1rem rgba(0,0,0,0.07); z-index: 9999; }
.bottom_app_bar img { height: 1.375rem; }
.bottom_app_bar .app_bar_list { text-align: center; }
.bottom_app_bar .app_bar_item { width: 33.333%; padding: 0.75rem 0; }
.bottom_app_bar .app_bar_link { padding: 0.5em; display: inline-block; filter: grayscale(1); -webkit-transition: 0.25s;-moz-transition: 0.25s;-ms-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;}
.bottom_app_bar .app_bar_item.active a,
.bottom_app_bar .app_bar_link:hover { filter: none; }

/* header */
.header { flex-shrink: 0; }
.header_inner { justify-content: space-between; height: 4rem; }
.header_logo a { display: block; }
.header_logo img { height: 1.25rem; }
.header_user { font-size: 0.875rem; gap: 1rem; }
.header_user a { display: inline-flex; align-items: center; }
.header_user small { font-weight: 400; margin-left: 0.25em; }
.header_user_login img { height: 1.625rem; }
.header_user_logout img { height: 1.25rem; }

/* footer */
.footer { font-size: 0.8125rem; flex-shrink: 0; }
.footer_fnb { border-top: 1px solid rgba(255, 255, 255, 0.6); border-bottom: 1px solid rgba(255, 255, 255, 0.6); }
.footer_fnb .fnb_list { justify-content: space-around; padding: 0.5rem 0; }
.footer_fnb .fnb_btn {  padding: 0.25em; display: inline-block; }
.footer_inner { padding: 1rem 0; }
.footer_corp .corp_item { align-items: flex-start; }
.footer_corp .corp_item:not(:last-child) { margin-bottom: 0.5rem; }
.footer_corp .corp_label { font-weight: 700; margin-right: 0.75em; }
.footer_disclaimer { font-size: 0.9375em; color: rgba(255, 255, 255, 0.7); margin: 0.75rem 0; display: block; }
.footer_copyright { font-size: 0.9375em; color: rgba(255, 255, 255, 0.7); font-weight: 300; }

/* main */
.main { flex-grow: 1; }
.main_title { position: sticky; top: 0; width: 100%; box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.04); gap: 0.5rem; padding: 0.25rem; background-color: #fff; color: #333; z-index: 999; }
.main_title a { padding: 0.875rem; }
.main_title b { font-weight: 600; font-size: 1.125rem; }
.main_section { padding: 2rem 0; }

.section_title { text-align: center; font-weight: 700; margin-bottom: 1.25rem; }
.section_title h2 { font-size: 1.125rem; }
.section_title h2::after { content:""; width: 2rem; height: 0.2rem; background-color: #fff; display: block; margin: 0.75rem auto 1rem; }
.section_title p { font-size: 0.875rem; font-weight: 300; opacity: 0.9; }

.section_area { border-top: 1px solid #fff; padding: 1.125rem 0; position: relative; }
.section_area:last-of-type { border-bottom: 1px solid #fff; }
.more-btn { background-color: #03C75A; margin-bottom: 0.875em; font-size: 0.875em; padding: 0.25em 0.875em 0.15em; -webkit-border-radius: 9999px;-moz-border-radius: 9999px;border-radius: 9999px; }

/* 서비스 이용안내 */
.guide { text-align: center; }
.guide img { max-width: 100%; }

/* 게시판 */
.bo_user_btn_list { font-size: 0.875rem; display: flex; justify-content: flex-end; align-items: center; margin-bottom: 0.875rem; gap: 0.25rem; }
.bo_user_btn_list > li { position: relative; }
.bo_user_btn { width: 2.5em; height: 2.5em; display: inline-flex; justify-content: center; align-items: center; background-color: #5859c5; -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; }
.bo_user_opt { position: absolute; right: 0; top: 100%; background-color: #fff; border: 1px solid #eee; color: #767676; border-radius: 0.5rem; margin-top: 0.5rem; display: none; z-index: 9; }
.bo_user_opt i { width: 1.5em; }
.bo_user_opt_btn { font-size: 0.8125rem; white-space: nowrap; padding: 0.25em 0.5em; display: inline-flex; justify-content: center; align-items: center; gap: 0.25em; }
.bo_user_opt_btn:hover { color: #5859c5; }

.bo_v_tit { font-size: 1.125rem; font-weight: 700; }
.bo_v_info { font-size: 0.8125rem; margin-top: 0.25rem; color: rgba(255,255,255,0.8); gap: 0.5em; }
.bo_v_info strong { font-weight: 400; }
.bo_v_info strong:nth-of-type(1) { margin-left: auto; }
.bo_v_info .fa { margin-right: 0.25em; }
.bo_v_img { margin-bottom: 1rem; }
.bo_v_img a { display: block; }
.bo_v_img img { max-width: 100%; height: auto; }
.bo_v_con { font-size: 0.875rem; margin-bottom: 1rem; }
.bo_v_attach { flex-direction: column; align-items: stretch; gap: 0.875rem; }
.bo_v_attach_link { font-size: 0.875rem; }
.bo_v_attach .u-form-icon { padding: 0 0.5em; font-size: 1.125em; }
.bo_v_attach .u-form-text strong { width: 100%; display: block; }
.bo_v_attach .u-form-text span { font-size: 0.8125rem; }
.bo_v_nav { margin-top: 2rem; border-top: 1px solid rgba(255,255,255,0.3); }
.bo_v_nav li { border-bottom: 1px solid rgba(255,255,255,0.3); padding: 0.75rem 0; font-size: 0.8125rem; }
.bo_v_nav a { width: 100%; }
.bo_v_nav i { padding: 0 0.5rem; }

.bo_search { font-size: 0.875em; }
.bo_search .u-form-style { padding: 0; display: flex; }
.bo_search .u-form-style > * { padding: 0.625em; }
.bo_search .bo_search_select { width: 8em; }
.bo_search .bo_search_input { flex-grow: 1; }
.bo_search .bo_search_btn { padding: 0 1em; background-color: transparent; }

.bo_list_top { justify-content: space-between; margin: 1.5rem 0 0.5rem; }
.bo_list_top .bo_user_btn_list { margin-bottom: 0; }
.bo_list_total { font-size: 0.875rem; }

.bo_list_wrap { margin-bottom: 1rem; }
.bo_list_wrap .all_chk { font-size: 0.875em; }
.bo_list_wrap ul { border-top: 1px solid rgba(255,255,255,0.3); margin-top: 0.5rem; }
.bo_list_item { font-size: 0.875rem; border-bottom: 1px solid rgba(255,255,255,0.3); padding: 0.75rem 0; position: relative; }
.bo_list_item .bo_list_chk { position: absolute; top: 0; right: 0; margin: 0.75rem; }
.bo_list_item .bo_subject { font-size: 1em; font-weight: 600; margin: 0.25em 0; display: block; }
.bo_list_item .bo_info { display: flex; gap: 0.5rem; font-size: 0.875em; color: rgba(255,255,255,0.7); font-weight: 300; }
.bo_subject:hover { text-decoration: underline; }

.answer { border: 1px solid rgba(255,255,255,0.3); padding: 1.25rem; margin-top: 2rem; }

/* sns */
.sns-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.sns-wrap a { display: flex; justify-content: center; align-items: center; font-weight: 700; -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; height: 2.5rem; font-size: 0.9315rem; }
.sns-wrap .ico { display: inline-block; width: 2rem; height: 2rem; }
.sns-naver {background:#1EC800}
.sns-naver .ico {background:url('../img/sns_naver_s.png') no-repeat center /100%;}
.sns-kakao {background-color:#ffeb00; color:#3c1e1e}
.sns-kakao .ico {background:url('../img/sns_kakao_s.png') no-repeat center /100%;}
.sns-wrap p { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; font-size: 0.875rem; margin: 0.875rem 0; }
.sns-wrap p::before,
.sns-wrap p::after { content:""; flex-grow: 1; height: 1px;background-color: #fff; display: block; }

/* 로그인 */
.login { text-align: center; min-height: calc((var(--vh, 1vh) * 100) - 8rem); display: flex; align-items: center; }
.login .u-form-style,
.login .u-btn { -webkit-border-radius: 999px;-moz-border-radius: 999px; border-radius: 999px; }
.login .u-form-style { min-height: 3em; }
.login .u-btn { width: 100%; }
.login_title { font-size: 1.375rem; }
.login_img { margin: 1.5rem 0; }
.login_img img { max-width: 135px; margin: auto; }
.login_info { justify-content: space-between; font-size: 0.875rem; margin-top: 0.875rem; }
.login .sns-wrap { margin-bottom: 0.75rem; }

/* 회원가입 */
.register_agree { background-color: #A3A5F4; padding: 0.75rem; font-size: 0.875rem; margin: 0.875rem 0; }
.register_agree .u-form-check label span { margin-right: 0.3em; }
.register_item { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.register_item:last-child { margin-bottom: 0; }
.register_item b { font-weight: 400; color: #FF4747; }
.register_btn { text-decoration: underline; }

.register_form .section_area { padding-top: 0; }
.register_form .section_area h3 { padding: 0.75rem 1.25rem; background-color: #A3A5F4; border-bottom: 1px solid #fff; margin-bottom: 0.75rem; font-weight: 700; }
.register_form #captcha { margin-bottom: 0.75rem; }
.register_form .sns-wrap { margin-top: 0.75rem; flex-direction: row; }
.register_form .sns-wrap a { height: auto; }
.register_form .sns-wrap .txt { display: none; }
.register_form .u-form-style[readonly] { opacity: 1; border: 0; padding: 0; }

.register_result { text-align: center; }
.register_result .result_txt { font-size: 0.9375rem; margin-bottom: 1.5rem; }
.register_result .result_email { font-size: 0.9375rem; display: inline-block; margin-bottom: 1.5rem; }
.register_result .result_email li { display: grid; grid-template-columns: 1fr 2fr; gap: 0.5rem; margin: 0.5rem 0; }
.register_result .result_email span { font-weight: 300; }
.register_result .result_email strong { font-weight: 500; text-align: left; }

/* 상품 목록 */
.sct {  }
.empty { text-align: center; padding: 4rem 0; opacity: 0.5; margin-top: 1rem; }
.sct_add { position: sticky; right: 5%; bottom: 5%; }

.sct_sortlst { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.sct_sort { font-size: 0.8125rem; position: relative; }
.sct_sort button,
.sct_sort ul { background-color: #6669ec; -webkit-border-radius: 0.5rem;-moz-border-radius: 0.5rem;border-radius: 0.5rem; border: 1px solid #fff;}
.sct_sort button, .sct_sort a { padding: 0.375em 0.75em; display: inline-block;  }
.sct_sort button { position: relative; z-index: 10; }
.sct_sort ul { position: absolute; top: 50%; width: 100%; left: 0; padding-top: 1rem; z-index: 5; display: none; }
.sct_sort a { opacity: 0.6; }
.sct_sort a:hover { opacity: 1; }
.sct_sort.open button i { transform: rotate(180deg); }
.sct_sort.open ul { display: block; }

/* 도네이션 목록 */
.donation_item { --dn-color: #fff; border-radius: 0.5em; padding: 0.75em 0.75em 0.5em 0.75em; margin-bottom: 1em; position: relative; background-color: #A3A5F4; color: var(--dn-color); font-weight: 600; text-align: left; }
.donation_item:last-child { margin-bottom: 0; }
.donation_box { display: flex; gap: 0.75em; margin-bottom: 0.75em; }
.donation_thumb { width: 25%; max-width: 6rem; border-radius: 0.5rem; background: no-repeat center/cover; flex-shrink: 0; position: relative; overflow: hidden; cursor: pointer; }
.donation_thumb .ratio { width: 100%; padding-top: 100%; }
.donation_text { font-size: 0.875em; flex-grow: 1; display: flex; flex-direction: column; width: calc(100% - 25% - 0.75em); }
.donation_subj { font-size: 1.125em; font-weight: 700; }
.donation_prd { margin: 0.2em 0; }
.donation_btn { display: flex; justify-content: flex-end; align-items: center; gap: 0.5em; margin-top: auto; }
.donation_btn .u-btn { font-size: 0.9em; padding: 0 0.75em; height: 2em; line-height: 1; }
.donation_btn span { background-color: #000; }
.donation_btn b { border-radius: 0.5em; padding: 0 0.625em; height: 1.8em; display: inline-flex; justify-content: center; align-items: center; line-height: 1; font-weight: 600; }
.donation_price { display: flex; padding-top: 0.5em; border-top: 1px solid var(--dn-color); line-height: 1; }
.donation_price * { font-size: 0.9375em; width: 50%; text-align: center; }
.donation_price strong { border-right: 1px solid var(--dn-color); color: #FDF8A0; font-weight: inherit; }
.donation_writer_btn { display: flex; padding-top: 0.5em; margin-top: 0.5em; border-top: 1px solid var(--dn-color); line-height: 1; gap: 0.5em; align-items: center; }
.donation_writer_btn .badge { font-size: 0.8125em; line-height: 1; height: 2em; display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--dn-color); -webkit-border-radius: 0.5em;-moz-border-radius: 0.5em;border-radius: 0.5em; padding: 0 0.875em;  }
.donation_writer_btn .status { -webkit-border-radius: 5em;-moz-border-radius: 5em;border-radius: 5em; background-color: #FDF8A0; color: #6669ec; border-color: #FDF8A0; padding: 0 0.625em; height: 1.8em; }
.donation_writer_btn .status_info { font-size: 0.875em; }
.donation_writer_btn .status_info small { font-size: 0.9125em; }
.donation_writer_btn .status_info i { color: #A3A5F4; font-size: 1.125em; margin-right: 0.2em; }
.donation_writer_btn div:last-of-type { margin-right: auto; }

/* 도네성공 */
.donation_item.done { background-color: #FDF8A0; --dn-color: #323232; }
.donation_item.done .donation_price strong { color: #6669ec; }
.donation_item.done .donation_writer_btn .status { background-color: #6669ec; border-color: #6669ec; color: #FDF8A0; }

/* 결제내역 */
.donation_item.payment { background-color: rgba(0,0,0,0.2); }



/* 도네이션 등록 */
.donation_add .preview { width: 100%; display: flex; justify-content: center; align-items: center; padding-top: 80%; cursor: pointer; -webkit-border-radius: 1rem;-moz-border-radius: 1rem;border-radius: 1rem; border: 1px solid #fff; background: #A3A5F4 no-repeat center/cover; position: relative; }
.donation_add .preview i { font-size: 3rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.donation_add .fileName { font-size: 0.875rem; }
.donation_add .fileName::before { content:"※ "; }
.donation_add .auto_input { border: 0; opacity: 1; padding: 0 0.625em 0.625em; }
.donation_add #charCount { font-size: 0.875rem;text-align: right; }

/* 도네이션 상세 */
.donation_detail {    overflow-y: scroll;  height: calc(var(--vh, 1vh) * 60); max-height: none; padding: 1rem; background-color: #fff; }
.donation_detail .thumb { width: 100%; -webkit-border-radius: 0.5rem;-moz-border-radius: 0.5rem;border-radius: 0.5rem; border: 1px solid #dedede; background: no-repeat center/cover; position: relative; overflow: hidden; }
.donation_detail .thumb .ratio { width: 100%; padding-top: 65%; }
.donation_detail .thumb .title_overlay { background-color: rgba(0,0,0,0.7); position: absolute; bottom: 0; left: 0; width: 100%; color: #fff; padding: 0.5em 0.75em; }
.donation_detail .info { margin: 1rem 0; }
.donation_detail .info li { margin-top: 0.5rem; color: #000; }
.donation_detail .info li:first-child { margin-top: 0; }
.donation_detail .info strong { background-color: #000; color: #fff; display: inline-block; padding: 0.15em 0.875em; -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; font-weight: 400; font-size: 0.9375em; }
.donation_detail .info span { margin-left: 0.5em; }
.donation_detail .desc { background-color: #f5f5f5; -webkit-border-radius: 0.5em;-moz-border-radius: 0.5em;border-radius: 0.5em; padding: 0.875em; line-height: 1.4; font-size: 0.9375em; }
.donation_detail .u-btn-group { margin-top: 1rem; }
.donation_detail .u-btn { padding: 0.75em 0.625em; }

/* 도네이션 결제 */
.donation_order { font-size: 0.9375rem; line-height: 1.4; }
.donation_order_line { background-color: #ddd; margin: 1rem 0; }
.donation_order_info { font-size: 0.875rem; margin-bottom: 0.5rem; }
/*.donation_order .u-list-item { padding-top: 0; }*/
.donation_order input[type=text]:not(.u-form-style) { padding: 0.25em 0.5em; -webkit-border-radius: 0.5rem;-moz-border-radius: 0.5rem;border-radius: 0.5rem; }
.donation_order input[type=text],
.donation_order .u-form-style,
.donation_order textarea,
.donation_order .u-form-check label span {background: #fff; color: #000; border-color: #ddd; }
.donation_order dl { font-size: 0.875rem; display: flex; flex-wrap: wrap; border-top: 1px solid #ddd; line-height: 1; }
.donation_order dt,
.donation_order dd { border-bottom: 1px solid #ddd; padding: 0.75em 0.5em; position: relative; }
.donation_order dt { width: 7em; background-color: #A3A5F4; color: #fff; }
.donation_order dd { width: calc(100% - 7em); text-align: right; }

/* 주문상품 */
/*.donation_order .donation_item { font-size: 0.9375rem; background-color: #fff; color: #111; line-height: 1.4; border: 1px solid #dedede; }*/
/*.donation_order .donation_text { text-shadow: none; }*/
/*.donation_order .donation_price { border-color: #6669ec; }*/
/*.donation_order .donation_price strong { color: #6669ec; }*/

/* 결제금액 선택 */
.donation_amount_select { margin-top: 1rem; }
.donation_amount_select ul { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.5rem; }
.donation_amount_select li { line-height: 1; display: flex; align-items: center; gap: 0.5em; }
.donation_amount_select li:last-child:nth-child(odd) { grid-column: span 2; }
.donation_amount_select .it_price_input { border: 1px solid #ddd; padding: 0.25em 0.5em;}
.donation_amount_select .u-form-check input[type=radio]:checked + label span { border-color: #6669ec; }

/* 주문상태 합계 */
.donation_amount_total { margin: 1rem 0; }

/* 주문자정보 */
.donation_buyer { margin-top: 1rem; }

/* 결제정보 */
.donation_payment_info  { margin: 1rem 0; }

/* 쿠폰 */
.donation_payment_info .cp_btn1,
.donation_payment_info .cp_cancel1 { margin: 0; }
.donation_payment_info .cp_cancel1 { margin-left: 0.25em; }
.od_coupon_wrap { position: absolute; right: 0; width: 100%; top: 100%; }
.od_coupon { text-align: left; font-size: 0.9375em; position: absolute; right: 0; top: 0; background-color: #fff; width: 100%; border: 1px solid #ddd; -webkit-border-radius: 1rem;-moz-border-radius: 1rem;border-radius: 1rem; box-shadow: 0.05em 0.05em 0.5em rgba(0,0,0,0.2); margin-top: -0.5em; z-index: 10; color: #222; }
.od_coupon h3 { padding: 0.75em 1em; font-size: 1.125em; font-weight: 700; }
.od_coupon .tbl_head02 { margin: 0 1em 1em; }
.od_coupon .btn_confirm { display: block; margin: 0; }
.od_coupon .btn_confirm .btn_close { position: absolute; right: 0; top: 0; border: 0; width: auto; padding: 0.75em; font-size: 1.125em; }

/* 결제방법 */
.donation_payment_method ul { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.5rem; }
.donation_payment_method li { line-height: 1; display: flex; align-items: center; gap: 0.5em; }
.donation_payment_method li:last-child:nth-child(odd) { grid-column: span 2; }
.donation_payment_point { font-size: 0.875rem; }
.donation_payment_point div { display: flex; align-items: center; padding: 0.3em 0; }
.donation_payment_point label,
.donation_payment_point strong { margin-right: auto; }
.donation_payment_bank { margin-top: 1rem; border-top: 1px solid #ddd; padding-top: 1rem; display: none; }
.donation_payment_bank_deposit { display: flex; justify-content: space-between; margin-top: 0.3em; }

/* 결제버튼 */
.donation_order .btn_confirm { margin-top: 1.5rem; gap: 0.5rem; display: grid; grid-template-columns: 1fr 1fr; direction: rtl; }
.donation_order .btn_confirm a,
.donation_order .btn_confirm button,
.donation_order .btn_confirm input { display: flex; justify-content: center; align-items: center; padding: 0.75em 1.25em; width: 100%; height: auto; border-radius: 0.5rem; }
.donation_order .btn_submit { background-color: #FF3E8E; color: #fff; border: 0; }
.donation_order .btn_cancel { border-color: #aaa; color: #777; }

/* 결제 기타 */
#show_progress { text-align: center; margin-top: 1rem; }
#show_progress img { width: 3rem; }
#show_progress span { display: block; margin-top: 1rem; }

/* 마이페이지 */
.smb_profile { text-align: center; margin-bottom: 1.25rem; }
.smb_profile_img { -webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px; overflow: hidden; width: 3rem; margin: auto; }
.smb_profile_img img { width: 100%; height: auto; }
.smb_profile_name { font-size: 0.875rem; margin-top: 0.5rem; }
.smb_act { font-size: 0.8125rem; display: flex; gap: 0.5rem; justify-content: center; align-items: center; margin-top: 0.75rem; }
.smb_act .u-btn { padding: 0.3125em 1.5em; }
.smb_title { margin-bottom: 0.75rem; font-size: 1.125rem; }
.smb .section_area { position: relative; }
.smb .more-btn { font-size: 0.875rem; position: absolute; right: 0; top: 1.25rem; margin-bottom: 0; }

/* 개인결제 */
.spv_list {  }
.spv_item { display: flex; align-items: center; gap: 1rem; padding: 0.75em; background-color: rgba(0,0,0,0.2); -webkit-border-radius: 1rem;-moz-border-radius: 1rem;border-radius: 1rem; margin-bottom: 1em; }
.spv_item:last-child { margin-bottom: 0; }
.spv_img img { width: 5rem; border-radius: 0.5rem; }
.spv_txt { font-weight: 600; }
.spv_cost { font-size: 0.9em; margin: 0.25em 0; }
.spv_status { font-size: 0.9em; }
.spv_status span { opacity: 0.8; }
.spv_status a { }

/* 메인 */
.idx_swiper {
    --swiper-theme-color: #fff;
    --swiper-navigation-size: 1.5rem;
    --swiper-navigation-sides-offset: 1rem;
    --swiper-pagination-bullet-width: 2rem;
    --swiper-pagination-bullet-height: 0.3rem;
    --swiper-pagination-bullet-border-radius: 0;
}
.idx_swiper img { width: 100%; height: auto; }
.idx_swiper .swiper-button-prev,
.idx_swiper .swiper-button-next { background-color: rgba(0,0,0,0.1); width: 3rem; height: 3rem; -webkit-border-radius: 9999px;-moz-border-radius: 9999px;border-radius: 9999px; -webkit-transition: 0.2s;-moz-transition: 0.2s;-ms-transition: 0.2s;-o-transition: 0.2s;transition: 0.2s; }
.idx_swiper .swiper-button-prev:hover,
.idx_swiper .swiper-button-next:hover { background-color: rgba(0,0,0,0.6);}
.idx_donation { text-align: right;  padding: 1.5rem 0; }

/* promotion */
.promo { flex-grow: 1; height: 100%; position: relative; display: none; }
.promo_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.promo_bg .circle { position: absolute; }
.promo_bg .circle1 { width: 42%; top: 3%; right: 9%; }
.promo_bg .circle2 { width: 12%; top: 45%; right: 7%; }
.promo_bg .circle3 { width: 56%; bottom: 14%; right: 70%; }
.promo_inner { height: 100%; padding: 1.25rem 2rem 2.5rem; display: flex; flex-direction: column; position: relative; gap: 3rem; }
.promo_logo img { filter: invert(1); height: 1.25rem; }
.promo_swiper { width: 70%; box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1); margin-left: 0; }
.promo_swiper img { width: 100%; height: auto; }
.promo_text { margin-top: 1.25rem; }
.promo_text h2 { font-size: 2.5rem; font-weight: 300; }
.promo_text h2 span { background: linear-gradient(to top , #6669ec 40%, transparent 40%); }
.promo_text p { font-size: 1.125rem; margin-top: 0.75rem; }
.promo_download { margin-top: auto; text-align: center; display: none; }
.promo_download h3 { font-size: 1.125rem; margin-bottom: 1rem; }
.promo_download h3 strong { font-weight: 900; }
.promo_download_link { display: flex; justify-content: center; align-items: center; gap: 1rem; }
.promo_download_link a { background-color: #fff; border-radius: 0.75rem; display: inline-flex; justify-content: center; align-items: center; gap: 0.5rem; padding: 0.5rem; width: 40%; box-shadow: inset 0 0.15rem 0.25rem rgba(0,0,0,0), 0 0.25rem 0.5rem rgba(0,0,0,0.1); transition: 0.25s; }
.promo_download_link a:hover { box-shadow: inset 0 0.15rem 0.25rem rgba(0,0,0,0.1), 0 0.25rem 0.5rem rgba(0,0,0,0); }
.promo_download_link a span { font-size: 0.9375rem; font-weight: 900; }
.promo_download_link a img { height: 1.25rem; }




/* 반응형 */
@media (orientation: portrait){
    @media (max-width: 479px) {
        html { font-size: clamp(13px, 4vw, 20px); }
    }
    @media (min-width: 480px) {
        html { font-size: clamp(14px, 2.75vw, 22px); }
    }
    @media (max-width: 767px) {
        html { font-size: clamp(15px, 2.5vw, 23px); }

        .login .u-container,
        .mb_confirm .u-container,
        .password_lost .u-container { width: 90%; }
    }
    @media (min-width: 768px) and (max-width: 1024px){
        html { font-size: clamp(16px, 2.25vw, 24px); }

       /* .app .donation_list { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
        .app .donation_item { margin: 0; }
        .app .donation_box { flex-direction: column; position: relative; }
        .app .donation_thumb { max-width: none; width: 100%; }
        .app .donation_btn { position: absolute; right: 0.75em; top: 0.75em; }
        .app .donation_price { flex-direction: column; gap: 0.3em; }
        .app .donation_price strong, .donation_price span { text-align: left; width: 100%; }
        .app .donation_price strong { border: 0; }*/
    }
}
@media (orientation: landscape){
    @media (min-width: 900px){
        .wrapper { max-width: 1024px; }
        .promo { display: block; width: calc(100% - 500px); }
        .app, .modal, #customAlert { max-width: 500px; }
    }
    @media (max-width: 1024px){
        html { font-size: clamp(12px, 1.6vw, 16px) }
    }
}