@charset "UTF-8";

:root {
	--general-font-family: 'Pretendard';
	
	--font-color-default: #5d5d5d;
	--font-color-light: #7d7d7d;
	--font-color-super-light: #bebebe;
	--font-color-disabled: #dadada;
	--font-color-theme: #5c8f86;
	--font-color-dark-theme: #47706a;
	--font-color-light-theme: #b2d1c9;
	--font-color-white: #fff;
	--font-color-noti: #ef6c63;
	--font-color-red: #ff0000;
	--font-color-blue: #0000ff;
	--font-color-link : #2080d0;
	
	--border-default: 1px solid #7d7d7d;
	--border-double-default: 3px double #7d7d7d;
	--border-light: 1px solid #adadad;
	--border-dashed-light: 1px dashed #adadad;
	--border-dashed-light-theme: 1px dashed #b2d1c9;
	--border-dashed-super-light-theme: 1px dashed #c2d5d1;
	--border-dashed-dark-theme: 2px dashed #5c8f86;
	--border-super-light: 1px solid #d3d3d3;
	--border-bold-super-light: 2px solid #eaeaea;
	--border-ultra-light: 1px solid #eaeaea;
	--border-theme: 1px solid #b2d1c9;
	--border-dark-theme: 1px solid #5c8f86;
	--border-bold-dark-theme: 2px solid #5c8f86;
	--border-light-theme: 1px solid #b2d1c9;
	--border-bold-light-theme: 2px solid #b2d1c9;
	--border-super-light-theme: 1px solid #c2d5d1;
	--border-ultra-light-theme: 1px solid #e2eeeb;
	--border-white: 1px solid #fff;
	--border-point: 1px solid #ef6c63;
	--border-disabled: 1px solid #ddd;
	--border-light-blue: 1px solid #90c0e8;
	--border-blue: 1px solid #2080d0;
	
	--bg-color-white: #fff;
	--bg-color-theme: #b2d1c9;
	--bg-color-light: #eaeaea;
	--bg-color-super-light: #f7f7f7;
	--bg-color-light-blue: #d6e8f7;
	--bg-color-light-theme: #e2eeeb;
	--bg-color-super-light-theme: #f0f6f5;
	--bg-color-ultra-light-theme: #f8fafa;
	--bg-color-sand: #fdf6e3;
	--bg-color-mint: #e0f7fa;
	--bg-color-pastel-mint: #f0fff4;
	--bg-color-lavender: #fff0f5;
	--bg-color-cream: #fff8e1;
	--bg-color-lilac: #f3e5f5;
	--bg-color-dim: rgba( 0, 0, 0, 0.25 );
	--bg-color-trans: rgba( 125, 125, 125, 0.25 );
	--bg-color-gray-trans: rgba( 64, 64, 64, 0.25 );
	--bg-color-dark-trans: rgba( 0, 0, 0, 0.65 );
	--bg-color-disabled: #f7f7fb;
	--bg-color-wran : #ffdcdc;
	
	--btn-bg-color-theme: #5c8f86;
	--btn-bg-color-light-theme: #b2d1c9;
	--btn-bg-color-super-light-theme: #e2eeeb;
	--btn-bg-color-blue: #2080d0;
	--btn-bg-color-gray: #eaeaea;
	
	--make-wrap-width: 600px;
	--preview-wrap-width: 400px;
	--template-content-height: 60rem;
	
	--menu-wrap-width: 75%;
	--menu-header-gap: 5rem;
	--menu-footer-gap: 5rem;
	
	--makup-footer-gap: 5rem;
	
	--preview-footer-gap: 5rem;
	
	--quill-simp-edit-height: 22rem;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://img.viewfinder.co.kr/dearto/resources/fonts/Pretendard/Pretendard-ExtraLight.woff2') format('woff2'),
  		url('https://img.viewfinder.co.kr/dearto/resources/fonts/Pretendard/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200; font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://img.viewfinder.co.kr/dearto/resources/fonts/Pretendard/Pretendard-Regular.woff2') format('woff2'),
  		url('https://img.viewfinder.co.kr/dearto/resources/fonts/Pretendard/Pretendard-Regular.woff') format('woff');
  font-weight: 400; font-style: normal;
}

@font-face {
  font-family: 'Pretendard';
  src: url('https://img.viewfinder.co.kr/dearto/resources/fonts/Pretendard/Pretendard-Bold.woff2') format('woff2'),
  		url('https://img.viewfinder.co.kr/dearto/resources/fonts/Pretendard/Pretendard-Bold.woff') format('woff');
  font-weight: 700; font-style: normal;
}

@font-face {
  font-family: 'NanumSquareNeo';
  src: url('https://img.viewfinder.co.kr/dearto/resources/fonts/NaverNanumSquareNeo/NanumSquareNeo-Light.woff2') format('woff2'),
  		url('https://img.viewfinder.co.kr/dearto/resources/fonts/NaverNanumSquareNeo/NanumSquareNeo-Light.woff') format('woff');
  font-weight: 300; font-style: normal;
}

@font-face {
  font-family: 'NanumSquareNeo';
  src: url('https://img.viewfinder.co.kr/dearto/resources/fonts/NaverNanumSquareNeo/NanumSquareNeo-Regular.woff2') format('woff2'),
  		url('https://img.viewfinder.co.kr/dearto/resources/fonts/NaverNanumSquareNeo/NanumSquareNeo-Regular.woff') format('woff');
  font-weight: 400; font-style: normal;
}

@font-face {
  font-family: 'NanumSquareNeo';
  src: url('https://img.viewfinder.co.kr/dearto/resources/fonts/NaverNanumSquareNeo/NanumSquareNeo-Bold.woff2') format('woff2'),
  		url('https://img.viewfinder.co.kr/dearto/resources/fonts/NaverNanumSquareNeo/NanumSquareNeo-Bold.woff') format('woff');
  font-weight: 700; font-style: normal;
}

@font-face {
  font-family: 'HallymGothic';
  src: url('https://img.viewfinder.co.kr/dearto/resources/fonts/HallymGothic/HallymGothic-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal;
}

@font-face {
  font-family: 'HallymGothic';
  src: url('https://img.viewfinder.co.kr/dearto/resources/fonts/HallymGothic/HallymGothic-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal;
}

@font-face {
  font-family: 'HallymGothic';
  src: url('https://img.viewfinder.co.kr/dearto/resources/fonts/HallymGothic/HallymGothic-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal;
}

@font-face {
  font-family: 'SunBatang';
  src: url('https://img.viewfinder.co.kr/dearto/resources/fonts/SunBatang/SunBatang-Light.woff2') format('woff2'),
  		url('https://img.viewfinder.co.kr/dearto/resources/fonts/SunBatang/SunBatang-Light.woff') format('woff');
  font-weight: 300; font-style: normal;
}

@font-face {
  font-family: 'SunBatang';
  src: url('https://img.viewfinder.co.kr/dearto/resources/fonts/SunBatang/SunBatang-Medium.woff2') format('woff2'),
  		url('https://img.viewfinder.co.kr/dearto/resources/fonts/SunBatang/SunBatang-Medium.woff') format('woff');
  font-weight: 500; font-style: normal;
}

@font-face {
  font-family: 'SunBatang';
  src: url('https://img.viewfinder.co.kr/dearto/resources/fonts/SunBatang/SunBatang-Bold.woff2') format('woff2'),
  		url('https://img.viewfinder.co.kr/dearto/resources/fonts/SunBatang/SunBatang-Bold.woff') format('woff');
  font-weight: 700; font-style: normal;
}



html { width: 100%; min-width: 360px; height: 100%; font-size: 11px; background: var( --bg-color-white ); color: var( --font-color-default ); scroll-behavior: smooth; display: none; }
body { position: relative; margin: 0; padding: 0; width: 100%; min-width: 360px; height: 100%; font-size: 11px; font-family: 'Pretendard', sans-serif; background: var( --bg-color-super-light-theme ); display: none; }
body.modal { overflow: hidden; }
body * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Pretendard', sans-serif; }
body.dragging { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; -ms-user-select: none !important; }
body.dragging * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; -ms-user-select: none !important; }

html.page-hide, body.page-hide { visibility: hidden; }

a { cursor: pointer; outline: none; }
a:VISITED { text-decoration: none; color: inherit; }
a:ACTIVE { text-decoration: none; color: inherit; }
a:LINK { text-decoration: none; color: inherit; }
a:HOVER { text-decoration: none; color: inherit; }

/* buttons */
button { padding: 0.8rem 2.4rem; border: var( --border-default ); border-radius: 0.8rem; background: none; outline: none; cursor: pointer; }
button:disabled { cursor: not-allowed; }
button.theme-btn { border: var( --border-theme ); background-color: var( --btn-bg-color-theme ); color: var( --font-color-white ); }

img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* select */
select { padding: 0.2rem 2rem 0.2rem 0.6rem; font-size: 1.1rem; text-align: left; outline: none !important; user-select: none !important; border: var( --border-light ); border-radius: 0.4rem; cursor: pointer; color: var( --font-color-light ); background-color: var( --bg-color-white ); }
select:disabled { cursor: not-allowed; color: var( --font-color-disabled ); background-color: var( --bg-color-disabled ) !important; }

/* input */
input[type="text"], input[type="password"] { padding: 0.3rem 0.6rem; font-size: 1.1rem; text-align: left; outline: none !important; user-select: none !important; border: var( --border-light ); border-radius: 0.4rem; color: var( --font-color-light ); background-color: var( --bg-color-white ); }
input[type="text"]::placeholder, input[type="password"]::placeholder { color: var( --font-color-super-light ); }
input[type="text"]:disabled, input[type="password"]:disabled { border: var( --border-disabled ); background-color: var( --bg-color-disabled ) !important; }
input[type="file"] { display: none; }

/* textarea */
textarea { box-sizing: border-box; text-align: left; outline: none !important; letter-spacing: 0.6px !important; user-select: none !important; resize: none !important; color: var( --font-color-light ); background-color: var( --bg-color-white ); border: var( --border-light ); border-radius: 0.4rem; }
textarea::placeholder { color: var( --font-color-super-light ); }
textarea:disabled { border: var( --border-disabled ); background-color: var( --bg-color-disabled ) !important; }

/* checkbox */
label.check-label { position: relative; display: flex; align-items: center; padding-left: 2.4rem; word-break: break-all; cursor: pointer; }
label.check-label input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none !important; user-select: none !important; position: absolute; left: 0; width: 1.6rem; height: 1.6rem; border: var( --border-light ); border-radius: 0.4rem; background: var( --bg-color-white ); }
label.check-label input[type="checkbox"]:checked { background: var( --btn-bg-color-blue ); }
label.check-label input[type="checkbox"]:disabled { background: var( --btn-bg-color-theme ); }
label.check-label input[type="checkbox"]:disabled:not(:checked).disabled { background: var( --bg-color-disabled ); border: var( --border-disabled ); }
label.check-label input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 2px; left: 5px; width: 4px; height: 8px; border: var( --border-white ); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* radio */
label.radio-label { position: relative; display: flex; align-items: center; padding-left: 2rem; word-break: break-all; cursor: pointer; }
label.radio-label input[type="radio"] { outline: none !important; user-select: none !important; position: absolute; left: 0; width: 1.4rem; height: 1.4rem; }

/* login button in exception */
p#login { margin-top: 6rem; text-align: center; }
p#login > span#login { display: flex; align-items: center; justify-content: center; margin: 0 auto; padding: 0.4rem 2.4rem; font-size: 1.2rem; font-weight: 700; color: var( --font-color-light ); background-color: var( --bg-color-white );
	border: var( --border-super-light-theme ); border-radius: 0.8rem; cursor: pointer; }
p#login > span#login img { margin-right: 1rem; width: 3.4rem; height: 3.4rem; }
p#login > button#mypage { color: var( --font-color-dark-theme ); background-color: var( --btn-bg-color-light-theme ); }

/* bgm */
label.bgm-label { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
label.bgm-label input[type="radio"] { outline: none !important; user-select: none !important; position: relative; width: 1.4rem; height: 1.4rem; }

/* required */
span.required { color: red; margin-right: 0.4rem; }

/* table layout ( exclude jquery datepicker table ) */
table:not(.ui-datepicker-calendar) { width: 100%; border-spacing: 0; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
table:not(.ui-datepicker-calendar) tr th { padding: 0.4rem; text-align: center; border-top: var( --border-default ); border-left: var( --border-default ); border-bottom: var( --border-double-default ); }
table:not(.ui-datepicker-calendar) tr th:last-child { border-right: var( --border-default ); }
table:not(.ui-datepicker-calendar) tr td { padding: 0.4rem; text-align: center; border-top: var( --border-default ); border-right: var( --border-default ); word-wrap: break-word; word-break: break-word; white-space: normal; }
table:not(.ui-datepicker-calendar) tr td:first-child { border-left: var( --border-default ); }
table:not(.ui-datepicker-calendar) tr:last-child td { border-bottom: var( --border-default ); }

/* exception-content */
div.exception-content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
div.exception-content div.exception { width: 90%; max-width: 600px; text-align: center; }
div.exception-content div.exception img { width: 3rem; height: 3rem; }
div.exception-content div.exception div.message-wrap { margin-top: 6rem; font-size: 13px; }
div.exception-content div.exception div.message-wrap p.message { margin-bottom: 4rem; line-height: 2rem; }

/* dialog-content */
div.dialog { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(72,72,72,0.35); z-index: 999; }
div.dialog > div.content { position: absolute; left: 50%; top: 50%; padding: 1.4rem; width: 40rem; max-width: 90%; height: auto; max-height: 80vh; transform: translate( -50%, -50% ); background-color: var( --bg-color-white ); border-radius: 1rem; }
div.dialog > div.content > div.head { position: relative; padding: 0.5rem 0; font-size: 1.6rem; text-align: center; }
div.dialog > div.content > div.head > button.pop_close { position: absolute; top: 0.6rem; right: 0; margin: 0; padding: 0; width: 1.6rem; height: 1.6rem; border: none; border-radius: 0; opacity: 0.7;
	background-image: url( 'https://img.viewfinder.co.kr/dearto/resources/images/thin-close.png' ); background-repeat: no-repeat; background-size: contain; }
div.dialog > div.content > div.body { padding: 3rem 1rem; max-height: 70vh; overflow-x: hidden; overflow-y: auto;  font-size: 1.3rem; }
div.dialog > div.content > div.body > p.pos { margin-top: 3rem; text-align: center; color: var( --font-color-theme ); }
div.dialog > div.content > div.body > p.pos > strong { margin-right: 1.4rem; color: var( --font-color-dark-theme ); }
div.dialog > div.content > div.footer { display: flex; justify-content: space-evenly; }
div.dialog > div.content > div.footer button { padding: 0.8rem 2.4rem; width: 45%; font-size: 1.4rem; border: none; border-radius: 0.4rem; color: var( --color-of-white ); color: var( --font-color-theme ); }
div.dialog > div.content > div.footer button:not(:first-child) { margin-left: 1.2rem; }
div.dialog > div.content > div.footer button.confirm { background-color: var( --btn-bg-color-super-light-theme ); }
div.dialog > div.content > div.footer button.cancel { background-color: var( --btn-bg-color-gray ); }

/* progress */
div.dialog > div.progress { position: absolute; display: flex; flex-direction: column; align-items: center; left: 50%; top: 50%; padding: 2rem; width: max-content; height: auto; transform: translate( -50%, -50% ); background: none; color: var( --color-of-white ); }
div.dialog > div.progress > div { background: none; }
div.dialog > div.progress > div.loading { width: 4.5rem; height: 4.5rem; background-image: url( 'https://img.viewfinder.co.kr/dearto/resources/images/spinner.svg' ); background-repeat: no-repeat; background-size: contain; }
div.dialog > div.progress > div.message { margin-top: 2rem; font-size: 1.2rem; letter-spacing: 1px; line-height: 2.2rem; text-align: center; color: var( --font-color-white ); }


/* toast */
div.toast { position: fixed; display: flex; flex-wrap: wrap; align-items: center; left: 50%; top: -100%; padding: 0.6rem 1.4rem; width: max-content; max-width: 90%; transform: translateX( -50% );
	border-radius: 0.8rem; background-color: var( --bg-color-dark-trans ); color: var( --font-color-white ); transition: top 0.5s ease; z-index: 996; }
div.toast.show { top: calc( var( --menu-header-gap ) + 1rem ); transition: top 1s ease; }
div.toast.show.nohead { top: 2rem; transition: top 1s ease; }
div.toast > span.progress { margin-right: 0.8rem; width: 1.4rem; height: 1.4rem; background-image: url( 'https://img.viewfinder.co.kr/dearto/resources/images/spinner.svg' ); background-repeat: no-repeat; background-size: contain; }
div.toast > p.msg { font-size: 1rem; line-height: 1.6rem; }
div.toast > p.ratio { margin-top: 0.6rem; width: calc( 100% - 4rem ); font-size: 0; line-height: 0; height: 0.6rem; border-radius: 0.6rem; border: var( --border-ultra-light ); text-align: left; }
div.toast > p.ratio > span { display: block; width: 0%; height: 100%; background-color: var( --bg-color-theme ); }
div.toast > span.ratio { margin-top: 0.6rem; width: 4rem; text-align: right; color: var( --font-color-white ); font-size: 1rem; }

.hide { display: none; }

.center { text-align: center !important; }
.left { text-align: left !important; }
.right { text-align: right !important; }
.bold { font-weight: 700 !important; }

/* jQuery datepicker override */
.datepicker-sun a { color: red !important; }
.datepicker-sun a.ui-state-active { color: #ffe0e0 !important; }
.datepicker-sat a { color: blue !important; }
.datepicker-sat a.ui-state-active { color: #e0e0ff !important; }

.w10 { width: 10rem !important; }
.w12 { width: 12rem !important; }
.w15 { width: 15rem !important; }
.w20 { width: 20rem !important; }
.w25 { width: 25rem !important; }
.w30 { width: 30rem !important; }

.w50p { width: 50% !important; }
.w60p { width: 60% !important; }
.w70p { width: 70% !important; }
.w80p { width: 80% !important; }
.w85p { width: 85% !important; }
.w90p { width: 90% !important; }
.w95p { width: 95% !important; }
.w100p { width: 100% !important; }

.mt02 { margin-top: 0.2rem !important; }
.mt04 { margin-top: 0.4rem !important; }
.mt06 { margin-top: 0.6rem !important; }
.mt08 { margin-top: 0.8rem !important; }
.mt1 { margin-top: 1rem !important; }
.mt2 { margin-top: 2rem !important; }
.mt3 { margin-top: 3rem !important; }
.mt4 { margin-top: 4rem !important; }

.ml03 { margin-left: 0.3rem !important; }
.ml06 { margin-left: 0.6rem !important; }

.mb1 { margin-bottom: 1rem !important; }

.pr1 { padding-right: 1rem !important; }
.pl1 { padding-left: 1rem !important; }
.pl2 { padding-left: 2rem !important; }

.ml05 { margin-left: 0.5rem !important; }
.ml1 { margin-left: 1rem !important; }

.fs1 { font-size: 1rem !important; }
.fs11 { font-size: 1.1rem !important; }
.fs12 { font-size: 1.2rem !important; }