:root {
	color-scheme: light only;
	--footerH : 150px;
	--footerMT : -150px;
	--popEase : cubic-bezier(0.2, 0, 0.2, 1);
	--popDuration : 350ms;
	--slideEase : cubic-bezier(0.4, 0, 0, 1);
	--slideDuration : 500ms;
	--sat: env(safe-area-inset-top);
	--sar: env(safe-area-inset-right);
	--sab: env(safe-area-inset-bottom);
	--sal: env(safe-area-inset-left);
    --darkBack : #121212;
	--darkBackLight : #1c1c1c;
	--darkMain : #222;
	--darkColor : #e8e8e8;
	--btnSubmitColor : #3cb371;

	--blue : #118dff;
	--blueDark : #0071db;
	--green : #00b300;
    --red: #f53535;
}

html, body { position: relative; float: left; width: 100%; height: 100%; min-width: 320px; margin:0; padding:0; background: #f8fafb; }

html {
	-webkit-tap-highlight-color: rgba(0,0,0,0); /* 링크를 터치했을때 나오는 기본 영역의 색상을 제어 */
	tap-highlight-color: rgba(0,0,0,0);

	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;

	-webkit-touch-callout: none;
	touch-callout: none;

	/* 화면을 길게 누르고 있을때 뜨는 팝업이나 액션시트를 제어 */
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
	-moz-user-select: none; /* mozilla browsers */
	-khtml-user-select: none; /* webkit (konqueror) browsers */
	-ms-user-select: none; /* IE10+ */
	user-select: none; /* standard syntax */
}

html.pc { overflow-y: scroll; }

body {
    word-break: keep-all; font-size: 15px; line-height: 1; color: #202020; font-family: sans-serif; font-size: 0;
    font-family: 'Spoqa Han Sans Neo', Pretendard, 'Roboto', sans-serif; font-size: 0; text-align: center;
}

body > * { width:100%; }
div, a, ul { box-sizing:border-box; }
div, img, a, ul { float: left; border:none; }
ul { margin:0; }
a { text-decoration:none; color:inherit; cursor: pointer; }
input, textarea, pre, xmp { font-family:inherit; font-size:inherit; line-height: inherit; color:inherit; letter-spacing:inherit; text-align:inherit; box-sizing: border-box; margin:0; float: left; /*-webkit-appearance:none; -moz-appearance:none; appearance:none;*/ }
input, textarea { border-radius: 0; font-family: sans-serif; }
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; }
input[disabled], textarea[disabled], select[disabled] { background: #eee; color:#777; }
table { border-collapse: collapse; float: left; font-size: inherit; line-height: inherit; color: inherit; }
tr { position: relative; }
th, td { position: relative; padding: 0; }
th { text-align: left; font-weight: normal; }
section { float: left; box-sizing: border-box; }
button { background: #fff; border:1px solid #ccc; cursor: pointer; font-family: inherit; border: none; margin: 0; padding: 0; outline: none; }

html.pc textarea::-webkit-scrollbar { width: 14px; background: transparent; cursor: auto; }
html.pc textarea::-webkit-scrollbar-thumb { border: 5px solid transparent; cursor: auto; border-radius: 10px; }

/* IE X표시 안보이게 */
::-ms-clear, ::-ms-reveal { display: none; }


@-webkit-keyframes popup { 0% { transform: scale(0); } 35% { transform: scale(1.06); } 70% { transform: scale(0.99); } 100% { transform: scale(1); } }

.a { cursor: pointer; }

#console { position: fixed; top: env(safe-area-inset-top); left: 0; width: 100%; background: yellow; color: #000; font-size: 13px; line-height: 1.5; z-index: 99999; }

.pop-container { display: none; position: fixed; top: 0; left: 0; justify-content: center; align-items: center; width: 100%; height: 100%; min-width: 320px; padding: 20px; z-index: 900; touch-action: none; overflow: hidden; }
.pop-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; transition: opacity 250ms; opacity: 0; }
.pop-body {
    position: relative; display: flex; flex-direction: column; width: 100%; max-height: 100%; border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.2); background: #f8fafb; text-align: center;
    transition-property: transform, opacity; transition-duration: 250ms; transform: scale(0.9); opacity: 0; overflow: hidden;
}
.pop-container.on { display: flex; }
.pop-container.ani .pop-back { opacity: 0.35; }
.pop-container.ani .pop-body { opacity: 1; transform: scale(1); }

#pop-back { display: none; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; }
#pop-back.on { display: block; }
html.m #pop-back { position: absolute; }
html.pc #pop-back { position: fixed; }

.badge { position: relative; }
.badge::after { content: ''; position: absolute; top: 2px; right: -6px; width: 6px; height: 6px; background: var(--red); border-radius: 6px; }

.btn { cursor: pointer; }
.btn.lock { pointer-events: none; }

.btn-kakao { display: flex; align-items: center; justify-content: center; font-weight: 700; background: #FEE500; color: #191600; }
.btn-kakao::before { content: ''; }
.btn-kakao::before { background-image: url('/svg/logo-kakao.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; }
html.pc .btn-kakao { transition: background 150ms; cursor: pointer; }
html.pc .btn-kakao:hover { background: #e6cf00; }
html.pc .btn-kakao:active { background: #ccb800; transition-duration: 0s; }
html.m .btn-kakao:active { background: #e6cf00; }

#top-top-area .btn-kakao { padding: 8px 10px; margin: 0 3px 0 0; font-size: 11px; border-radius: 7px; gap: 5px; }
#top-top-area .btn-kakao::before { width: 12px; height: 15px; }
html.m #top-m-area .btn-kakao { width: 100%; /*max-width: 240px;*/ padding: 12px 0; border-radius: 13px; font-size: 15px; gap: 11px; }
html.m #top-m-area .btn-kakao::before { width: 20px; height: 30px; }

html.pc #top-top-area2 { gap: 15px; }
#top-center-area { position: relative; height: 100%; display: flex; justify-content: center; align-items: center; }
html.pc #top-center-area { flex: 1; justify-content: flex-start; padding: 0 20px; }


#preload { position: absolute; top: 0; left: 0; opacity: 0; width: 24px; height: 24px; z-index: -1; pointer-events: none!important; }
#preload > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#body { position: relative; width: 100%; min-height: 100%; display: flex; flex-direction: column; align-items: center; }
#body-wrap { position: relative; width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; }
#body-area { position: relative; width: 100%; flex: 1; max-width: 840px; display: flex; flex-direction: column; }

#body.off { transform: translateX(-30%); }
#body.hide { display: none; }

#footer-area { position: relative; width: 100%; }
#footer-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: var(--footerH); font-size: 12px; color: #888; -webkit-user-select: text; }

#footer-terms-area { width: 100%; display: flex; justify-content: center; font-size: 12px; margin-top: 15px; }
.footer-btn { color: #111; cursor: pointer; }
.footer-btn:hover { color: #000; }
.footer-btn-line { margin: 0 7px; opacity: 0.5; }

html.pc #footer-area { background: #eee; background: #ecf1f4; background: #f3f5f6; }
html.pc #footer-wrap { color: #999; }
html.dark.pc #footer-area { background: #060606; }

#alert {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); padding: 20px;
    justify-content: center; align-items: center; touch-action: none; z-index: 4000;
}
#alert-box {
    display: flex; flex-direction: column; overflow: hidden; min-width: 230px; max-width: 350px; background: #fff; border-radius: 12px; box-shadow: 1px 1px 15px rgba(0,0,0,0.1);
    text-align: center; letter-spacing: -0.2px; }
#alert-txt { width: 100%; flex-grow: 1; padding: 20px; font-size: 13px; line-height: 19px; }
#alert-btn { width: 100%; line-height: 45px; border-top: 1px solid #eee; content: '확인'; font-size: 16px; color: #4285f4; cursor: pointer; }
#alert-btn:active { background: #eee; }
#alert.on { display: flex; }

#top-notice { position: relative; display: flex; width: 100%; padding: 10px; padding-bottom: 0; justify-content: center; }
#top-notice-box { display: flex; align-items: center; position: relative; width: 100%; color: hsl(120 50% 30%); }
#top-notice-icon { width: 14px; margin: 0 9px; line-height: 12px; font-size: 10px; border: 1px solid hsl(120 50% 30%); border-radius: 20px; text-align: center; }
#top-notice-txt { flex: 1; font-size: 12px; line-height: 16px; padding: 6px 0; }
#top-notice-close { width: 32px; height: 100%; padding: 11px; cursor: pointer; opacity: 0.5; }
#top-notice-close:hover { opacity: 1; }
#top-notice-close .x-bar::before { background: hsl(120 50% 20%)!important; height: 2px!important; }
#top-notice-close .x-bar::after  { background: hsl(120 50% 20%)!important; height: 2px!important; }

html.pc #top-notice { padding: 0; background: hsl(120 50% 90%); }
html.pc #top-notice-box { max-width: 850px; }
html.pc #top-notice-icon { margin: 0 12px; }
html.pc #top-notice-txt { padding: 9px 0; }
html.m #top-notice-box { /* max-width: 410px; */ border: 1px solid hsl(120 50% 80%); border-radius: 7px; background: hsl(120 50% 90%); }

.btn-dot { box-sizing: content-box; width: 3px; padding: 8px 14px; opacity: 0.5; cursor: pointer; border-radius: 50px; }
.btn-dot > * { width: 100%; height: 3px; margin-top: 3px; background: #000; border-radius: 10px; clear: both; }
.btn-dot > *:first-child { margin: 0; }
html.pc .btn-dot:hover { opacity: 1; }

.dot-menu-btn { display: flex; align-items: center; justify-content: center; width: 100%; font-size: 14px; text-align: center; }
.dot-menu-btn.del { color: red; }
.dot-menu-btn::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 10px; background-size: contain; background-repeat: no-repeat; }
.dot-menu-btn.edit::before { background-image: url('/svg/edit.svg'); }
.dot-menu-btn.del::before { background-image: url('/svg/delete.svg'); }

html.pc #dot-menu-area { display: none; position: absolute; top: 50%; left: -6px; margin-top: 21px; z-index: 100; }
html.pc #dot-menu-back { display: none; }
html.pc #dot-menu-wrap { position: absolute; top: 0; left: 0; width: 120px; padding: 8px 0; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 32px rgba(0,0,0,0.1); }
html.pc #dot-menu-wrap > div { width: 100%; }
html.pc .dot-menu-btn { clear: both; height: 36px; cursor: pointer; }
html.pc .dot-menu-btn:hover { background: #0001; }
html.pc .dot-menu-btn:active { background: #0002; }
html.pc body.dot-menu #dot-menu-area { display: block; }
html.pc body.dot-menu #pop-back { display: block; }

html.dark .dot-menu-btn.del { color: #f55; }
html.dark.pc #dot-menu-wrap { background: #2d2d2d; box-shadow: 0 4px 32px #000; }
html.dark.pc .dot-menu-btn:hover { background: #ffffff1a; }
html.dark.pc .dot-menu-btn:active { background: #fff3; }

html.m #dot-menu-area { display: none; position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; overflow: hidden; }
html.m #dot-menu-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); transition: opacity 150ms; opacity: 0; }
html.m #dot-menu-wrap {
	position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 10px; transition: transform 150ms ease-in; transform: translateY(100%);
	display: flex; justify-content: center;
	padding-bottom: max(constant(safe-area-inset-bottom), 10px);
	padding-bottom: max(env(safe-area-inset-bottom), 10px);
}
html.m #dot-menu-wrap > div { width: 100%; max-width: 410px; background: #fff; overflow: hidden; border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.2); }
html.m .dot-menu-btn { width: 100%; height: 60px; }
html.m .dot-menu-btn:active { background: #eaeaeb; }

html.m body.dot-menu #dot-menu-back { opacity: 1; transition-duration: 250ms; }
html.m body.dot-menu #dot-menu-wrap { transform: translateY(0); transition-timing-function: ease-out; transition-duration: 250ms; }

html.dark.m #dot-menu-wrap > div, html.dark.m .dot-menu-btn { background: #2d2d2d; }
html.dark.m .dot-menu-btn:active { background: #fff3; }
html.dark.m body.dot-menu #dot-menu-wrap { box-shadow: 0 0 20px #000; }
html.dark.m body.dot-menu #dot-menu-back { background: rgba(0,0,0,0.5); }

.svg { background-size: contain; background-position: center; background-repeat: no-repeat; }
.svg-back, .svg-back-w { position: absolute; top: 0; left: 0; width: 58px; height: 54px; background-size: 28px; cursor: pointer; }

.x-bar { position: relative; top: 50%; width: 100%; margin-top: -1px; }
.x-bar::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #111; transform: rotate(45deg); }
.x-bar::after  { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: #111; transform: rotate(-45deg); }

#tri { position: absolute; top: 0; left: 0; margin-left: -5px; border-top: 7px solid #ffb833; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: none; }


.btn-jog { width: 38px; height: 24px; padding: 2px; background: #e9e9ea; border-radius: 30px; overflow: hidden; cursor: pointer; transition: background 200ms; }
html.pc .btn-jog { background: #e5e5e5; }
html.dark .btn-jog { background: #444; }
.btn-jog::after { content: ''; float: left; pointer-events: none; width: 20px; height: 20px; background: #fff; border-radius: 30px; transition: transform 200ms; display: block; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
html .btn-jog.on { background: #34c759; }
html.dark .btn-jog.on { background: #528876; }
.btn-jog.on::after { transform: translateX(14px); }
html.m .btn-jog.big { width: 48px; height: 30px; }
html.m .btn-jog.big::after { width: 26px; height: 26px; }
html.m .btn-jog.big.on::after { transform: translateX(18px); }
.btn-jog.small { width: 29px; height: 18px; }
.btn-jog.small::after { width: 14px; height: 14px; }
.btn-jog.small.on::after { transform: translateX(11px); }


#btn-darkmode-wrap { display: flex; align-items: center; height: 29px; }
#btn-darkmode-txt { font-size: 12px; opacity: 0.7; }
#btn-darkmode { margin-left: 6px; }
#top-m-area #btn-darkmode { background: #ccc; }

html.dark #btn-darkmode { background: linear-gradient(to top, #528876, #41675A); background: #528876!important; }
html.dark #btn-darkmode::after { transform: translateX(18px); }
html.dark.pc #btn-darkmode::after { transform: translateX(14px); }
html.dark #btn-darkmode.small::after { transform: translateX(11px); }


#loading { display: none; touch-action: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 3000; }
#loading::before { content: ''; display: block; box-sizing: border-box; position: absolute; top: 50%; left: 50%; border-radius: 100px;
                border: 3px solid #fff; border-top-color: transparent; width: 30px; height: 30px; margin: -15px 0 0 -15px; }
@keyframes spin {
    from { transform: rotate(0deg); opacity: 1; }
    to { transform: rotate(359deg); opacity: 1; }
}
@keyframes spin_complete {
    from {
        opacity: 1;
        transform: scale(1);
        border-width: 15px;
    }
    to {
        opacity: 0.3;
        transform: scale(2);
        border-width: 0;
    }
}

#loading::after {
    content: ''; display: none; position: absolute; top: 50%; left: 50%;
    width: 28px; height: 15px; border: 0px solid #fff; border-top: none; border-right: none;
    animation-duration: 350ms;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0, 0, 0.1, 1);
    transform: rotate(-45deg) translate(-8px, -16px);
    transform-origin: top left;
}
#loading.complete::before { border-top-color: #fff; }
#loading.complete::after { display: block; animation-name: checkmark; animation-delay: 0ms; }
@keyframes checkmark {
    0% {
        scale: 3;
        border-width: 3px;
        width: 0;
        height: 0;
    }
    25% {
        border-width: 3px;
        width: 0;
        height: 15px;
    }
    50% {
        scale: 1;
        border-width: 3px;
        width: 33px;
        height: 15px;
    }
    75% {
        scale: 1;
        border-width: 3px;
        width: 26px;
        height: 15px;
    }
    100% {
        scale: 1;
        border-width: 3px;
        width: 28px;
        height: 15px;
    }
}
@keyframes checkmark_after {
    0% {
        border-width: 3px;
        width: 28px;
        height: 15px;
        transform: rotate(-45deg) translate(-8px, -16px);
    }
    50% {
        border-width: 3px;
        width: 28px;
        height: 0;
        transform: rotate(-45deg) translate(-8px, -1px);
    }
    100% {
        border-width: 3px;
        width: 0;
        height: 0;
        transform: rotate(-45deg) translate(20px, -1px);
    }
}

@keyframes pageloading {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
}

.loading-ico { position: absolute; top: 50%; }
.loading-ico > * { position: absolute; top: 0; left: 50%; opacity: 0.2; width: 4px; height: 50%; margin-left: -2px; transform-origin: center bottom; }
.loading-ico > * { animation-timing-function: linear; animation-duration: 800ms; animation-iteration-count: infinite; }
.loading-ico > *::after { content: ''; display: block; width: 100%; height: 60%; background: #777; border-radius: 4px; }
.loading-ico > * { animation-delay: 0ms; }
.loading-ico > *+* { transform: rotate(-45deg); animation-delay: -100ms; }
.loading-ico > *+*+* { transform: rotate(-90deg); animation-delay: -200ms; }
.loading-ico > *+*+*+* { transform: rotate(-135deg); animation-delay: -300ms; }
.loading-ico > *+*+*+*+* { transform: rotate(180deg); animation-delay: -400ms; }
.loading-ico > *+*+*+*+*+* { transform: rotate(135deg); animation-delay: -500ms; }
.loading-ico > *+*+*+*+*+*+* { transform: rotate(90deg); animation-delay: -600ms; }
.loading-ico > *+*+*+*+*+*+*+* { transform: rotate(45deg); animation-delay: -700ms; }
html.dark .loading-ico > *::after { background: #fff!important; }

#page-loading { display: none; touch-action: none; position: fixed; top: 0; left: 0; width: 100vw; width: 100%; height: 100%; z-index: 1000; pointer-events: none; }
html.ios #page-loading { height: 100vh; }
#page-loading .loading-ico { left: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; }
#page-loading .loading-ico > * { width: 4px; }

html.notouch { pointer-events: none; }
html.page-loading #page-loading { display: block; }
html.page-loading #page-loading .loading-ico > * { animation-name: pageloading; }
html.page-loading.block #page-loading { pointer-events: auto; }
html.page-loading.block.noico #page-loading .loading-ico { display: none; }
html.page-loading.opacity #body { opacity: 0.5; }
html.page-loading.black #page-loading { background-color: rgba(0,0,0,0.35); }
html.page-loading.black .loading-ico > *::after { background: #fff; }

html.hide #body-wrap { display: none!important; }
html.hide #top-btn-refresh { pointer-events: none!important; }

html.hide-all #body-wrap, html.hide-all #top-m-area, html.hide-all #body { display: none!important; }
html.hide-top #top-menu-area { display: none!important; }
html.hide-top #top-dash-area { display: none!important; }
html.hide-top #top-center-area { display: none!important; }
html.hide-top #top-right-area { display: none!important; }
html.hide-top #top-btn-nextdate-wrap { display: none!important; }
html.hide-top-right #top-right-area { display: none!important; }

html.lock { height: 100%; min-height: 100%; touch-action: none; }
html.lock body { height: 100%; overflow: hidden!important; touch-action: none; }
body.lock { touch-action: none; }

body.loading #loading { display: block; }
body.loading #loading::before { animation: spin 800ms infinite linear; }
body.loading #loading.complete::before { animation: spin_complete 200ms forwards; }
body.loading #loading.complete.after::before { animation: spin 800ms infinite linear; animation-delay: 500ms; opacity: 0; border-top-color: transparent; }
body.loading #loading.complete.after::after {
    animation: checkmark_after 150ms; animation-delay: 100ms; animation-fill-mode: backwards; animation-timing-function: linear;
}

/* top 편의점 버튼 */
#top-btn-go-cvs-wrap { position: relative; }
#top-btn-go-cvs { position: relative; display: flex; align-items: center; gap: 3px; font-size: 11px; line-height: 29px; border-radius: 50px; padding: 0 10px; font-weight: 700; box-shadow: 0 2px 7px rgba(0,0,0,0.2); background: linear-gradient(130deg, #ff5b5b, #ac2fff); color: #fff; border: 1px solid #ffffffdd; overflow: hidden; }
#top-btn-go-cvs .svg-cvs { width: 13px; height: 13px; background-image: url('/svg/dark/cvs.svg'); }
#top-btn-go-cvs-wrap .svg-new { position: absolute; top: -1px; right: -1px; width: 13px; height: 13px; pointer-events: none; }
@media screen and (max-width: 374px) {
	#top-btn-go-cvs { flex-direction: column; font-size: 9px; line-height: 1; padding: 4px 10px; gap: 1px; font-weight: 400; }
	#top-btn-go-cvs .svg { width: 12px; height: 12px; }
}
/* #top-btn-go-cvs::after { content: ''; width: 130px; height: 70px; background: #fff; position: absolute; top: -32px; left: 0; transform: rotate(20deg) translateX(0) scaleX(0); transform-origin: left; animation-timing-function: linear; animation-duration: 11s; animation-iteration-count: infinite; animation-name: btn_light; animation-delay: 1s; pointer-events: none; }
@keyframes btn_light {
    0% { transform: rotate(20deg) translateX(0) scaleX(0); }
    3% { transform: rotate(20deg) translateX(0) scaleX(1); }
    6% { transform: rotate(20deg) translateX(100%) scaleX(0); }
} */

#top-btn-refresh { position: absolute; right: 15px; width: 46px; height: 46px; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.15); border-radius: 50px; overflow: hidden; touch-action: none; }
#top-btn-refresh > .svg { width: 100%; height: 100%; background-size: 32px; background-position: 7px 6.5px; opacity: 0.35; }
#top-btn-refresh.on > .svg { opacity: 1; animation: spin 500ms infinite linear; }
#top-btn-refresh:active { background: #ddd; }
@media screen and (max-width: 359px) {
	#top-btn-refresh { right: 10px; }
}

html.dark #top-btn-refresh { background: #333; box-shadow: 0 0 20px #000; }
html.dark #top-btn-refresh:active { background: #555; }



.slide-popup { position: fixed; top: 0; left: 0; width: 100%; min-width: 320px; height: 100%; overflow: hidden; z-index: 200; }
.slide-popup-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; transition: opacity var(--slideDuration); }
.slide-popup-wrap { position: relative; width: 100%; overflow: hidden; }
.slide-popup-wrap > div { width: 100%; display: flex; flex-direction: column; align-items: center; }
.slide-popup-wrap > div > div { position: relative; width: 100%; display: flex; justify-content: center; }
.slide-popup-top { z-index: 10; }
.slide-popup-top > div { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 54px; font-size: 18px; line-height: 54px; font-weight: bold; }
.slide-popup-top .btn-close { position: absolute; top: 0; left: 0; width: 58px; height: 100%; padding: 21px; cursor: pointer; }
.slide-popup-top .btn-submit { position: absolute; top: 0; right: 0; color: #4285f4; font-size: 15px; line-height: 54px; padding: 0 21px; cursor: pointer; }
.slide-popup-body { flex: 1; width: 100%; padding: 10px 40px 50px; align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; }
.slide-popup-body > div { width: 100%; max-width: 340px; }
.slide-popup-bottom { padding: 15px; }
.slide-popup-bottom > div { width: 100%; max-width: 360px; }
.slide-popup.hide { display: none; }

.slide-popup.on .slide-popup-back { opacity: 0.35; }
html.dark .slide-popup.on .slide-popup-back { opacity: 0.75; }


.pwa { display: none; }

@media all and (display-mode: standalone) {

	.pwa { display: block; }
	.not-pwa { display: none!important; }

	html { height: 100%!important; overflow: hidden; touch-action: none; }
	html.lock { height: 100%; }

	html.ios { height: 100vh!important; }
	html.ios.lock { height: 100vh!important; }

	#body { display: block; height: 100%; overflow: hidden; }

	#body-wrap { display: block; height: 100%; margin: 0; overflow-y: scroll; overscroll-behavior: contain; }
	#body-area { min-height: 100%; }

	#footer-area { margin-bottom: 0!important; }

}

#pop-samsung { position: fixed; top: 0; left: 0; width: 100%; min-width: 320px; height: 100%; z-index: 999; display: flex; align-items: flex-end; text-align: center; touch-action: none;
    background: rgba(0,0,0,0.35); }
html.ios #pop-samsung { height: 100vh; }
#pop-samsung .wrap { position: relative; padding: 30px 20px; width: 100%; background: #fff; display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 0 15px rgba(0,0,0,0.35); border-radius: 20px 20px 0 0;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 30px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 30px); }
#pop-samsung .txt { font-size: 22px; font-weight: 500; margin: 10px 0 20px; }
#pop-samsung .txt2 { display: flex; flex-direction: column; gap: 7px; font-size: 14px; line-height: 20px; }
#pop-samsung .txt3 { width: 100%; max-width: 420px; background: #f1f3f5; border-radius: 15px; font-size: 13px; line-height: 27px; text-align: left; padding: 13px 16px 13px 10px; margin: 25px 0 20px; }
#pop-samsung .txt3 div { font-size: 15px; font-weight: 700; width: 100%; padding: 0 0 6px 6px; }
#pop-samsung .txt3 div.sub { font-size: 12px; line-height: 1; font-weight: 400; opacity: 0.5; padding: 13px 0 5px 6px; }
#pop-samsung .txt3 span { background: #fff; border-radius: 8px; padding: 0 6px; margin: 5px 0 5px 6px; display: inline-block; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
#pop-samsung .txt3 > b { margin: 0 0 0 6px; opacity: 0.35; }
#pop-samsung .btn-area { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 15px; }
#pop-samsung .btn.never { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 24px; font-weight: 500; padding-left: 3px; }
#pop-samsung .btn.never::before { content: ''; width: 8px; height: 8px; border-radius: 30px; outline: 1px solid #aaa; outline-offset: 2px; }
#pop-samsung .btn.never.on::before { background: #000; }
#pop-samsung .btn.close { width: 100%; max-width: 350px; font-size: 16px; line-height: 48px; background: #000; color: #fff; border-radius: 10px; }

html.dark #pop-samsung { background: rgba(0,0,0,0.65); }
html.dark #pop-samsung .wrap { background: #333; box-shadow: 0 0 15px #000; }
html.dark #pop-samsung .txt3 { background: #222; }
html.dark #pop-samsung .txt3 span { background: #373737; box-shadow: 0 2px 5px rgba(0,0,0,0.35); }
html.dark #pop-samsung .btn.never.on::before { background: var(--darkColor); }
html.dark #pop-samsung .btn.close { background: #111; color: var(--darkColor); }