@charset "UTF-8";

/* FONT Scale 보정값 */
:root {
	--font-calc-ratio: 1.0;
	--font-calc-offset: 0px;
}

/* template > font-family */
.Pretendard, .Pretendard * { font-family: 'Pretendard'; font-weight: 400; }
.NanumSquareNeo, .NanumSquareNeo * { font-family: 'NanumSquareNeo'; font-weight: 400; }
.HallymGothic, .HallymGothic * { font-family: 'HallymGothic'; font-weight: 400; }
.SunBatang, .SunBatang * { font-family: 'SunBatang'; font-weight: 400; }
.NanumMyeongjo, .NanumMyeongjo * { font-family: 'NanumMyeongjo'; font-weight: 400; }
.Cafe24-GownBam, .Cafe24-GownBam * { font-family: 'Cafe24-GownBam'; font-weight: 400; }

/* template > font-size */
.fszS { font-size: calc( 1.2rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ) !important; }
.fszS * { font-size: calc( 1.2rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ); }
.fszS .larger { font-size: calc( 1.3rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ); }
.fszS .most { font-size: calc( 1.4rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ); }
.fszD { font-size: calc( 1.3rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ) !important; }
.fszD * { font-size: calc( 1.3rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ); }
.fszD .larger { font-size: calc( 1.4rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ); }
.fszD .most { font-size: calc( 1.5rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ); }
.fszL { font-size: calc( 1.4rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ) !important; }
.fszL * { font-size: calc( 1.4rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ); }
.fszL .larger { font-size: calc( 1.5rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ); }
.fszL .most { font-size: calc( 1.6rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ); }
.fszM { font-size: calc( 1.5rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ) !important; }
.fszM * { font-size: calc( 1.5rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ); }
.fszM .larger { font-size: calc( 1.6rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ); }
.fszM .most { font-size: calc( 1.7rem * var( --font-calc-ratio ) + var( --font-calc-offset ) ); }

/** 공통 */
div.preview-wrap > h1 > button.bgm-icon { position: absolute; bottom: -4rem; right: 2rem; width: 2.4rem; height: 1.6rem; padding: 0; border: none; border-radius: 0;
	background-image: url('https://static.dearto.kr/images/speaker-off.png'); background-size: contain; background-repeat: no-repeat; z-index: 1; opacity: 0.65; }
div.preview-wrap > h1 > button.bgm-icon.on { background-image: url('https://static.dearto.kr/images/speaker-on.png'); }

div.template-content { position: relative; }
div.template-content > div.partition { padding: 0; height: 7rem; }
div.template-content > button.bgm-icon { position: fixed; display: none; top: 2rem; right: 2rem; width: 2.4rem; height: 1.6rem; padding: 0; border: none; border-radius: 0;
	background-image: url('https://static.dearto.kr/images/speaker-off.png'); background-size: contain; background-repeat: no-repeat; z-index: 1; opacity: 0.65; }
div.template-content > button.bgm-icon.on { background-image: url('https://static.dearto.kr/images/speaker-on.png'); }
div.template-content > section { margin: 0; padding: 0; background-color: inherit; }
div.template-content > section.hide + div.partition { display: none; }
div.template-content > section.force-hide + div.partition { display: none; }
div.template-content > section > div { background-color: inherit; }
/*
div.template-content > h5.copyright { padding: 2rem 0 4rem 0; text-align: center; background-color: inherit; }
div.template-content > h5.copyright > a { font-family: Pretendard !important; font-size: 1.1rem !important; text-decoration: underline; color: var( --font-color-light ); }
*/

div.img-viewer { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: var( --bg-color-dark-gray-trans ); display: none; z-index: 910; }
div.img-viewer div.viewer { position: absolute; left: 50%; top: 50%; padding: 1rem; width: 96%; max-width: var( --preview-wrap-width ); height: 96%; max-height: var( --template-content-height ); border: var( --border-super-light );
	transform: translate( -50%, -50% ); border-radius: 0.8rem; background-color: var( --bg-color-white ); }
div.img-viewer div.viewer ._swiper { height: 90%; }
div.img-viewer div.viewer ._swiper img { position: absolute; left: 50%; top: calc( 50% - 1.4rem ); max-width: 100%; max-height: 90%; transform: translate( -50%, -50% ); border-radius: 0.6rem; }
div.img-viewer div.viewer .footer { display: flex; align-items: center; justify-content: center; height: 10%; }
div.img-viewer div.viewer .footer button.close { padding: 0.8rem 2.4rem; width: 45%; border: none; border-radius: 0.4rem; }
a.call { position: relative; margin-left: 0.6rem; padding-left: 1.8rem; color: var( --font-color-link ); }
a.call svg.call-icon { position: absolute; left: 0; top: 50%; width: 1.4rem; height: 1.4rem; transform: translateY( -50% ); }
a.to-call { display: inline-block; }
a.to-call svg.call-icon { width: 2.2rem; height: 2.2rem; }
a.to-sms { display: inline-block; }
a.to-sms svg.sms-icon { width: 2.2rem; height: 2.2rem; }

/* popup-content */
div.popups { position: fixed; display: none; left: 0; top: 0; width: 100%; height: 100%; font-family: var( --general-font-family ); background: rgba(72,72,72,0.35); font-size: 1.3rem; z-index: 999; }
div.popups > div.content { position: absolute; left: 50%; top: 50%; padding: 0; width: 40rem; max-width: 90%; height: auto; max-height: 90%; transform: translate( -50%, -50% ); background-color: var( --bg-color-white ); border-radius: 0.6rem; overflow: hidden; }
div.popups > div.content > div.head { position: relative; padding: 1.6rem 0; text-align: center; }
div.popups > div.content > div.head > span.toggle { position: absolute; display: flex; top: 50%; right: 1.2rem; padding: 0.2rem; justify-content: space-between; align-items: center; border: 1px solid #fff; border-radius: 100px;
	background-color: var( --bg-color-super-light ); transform: translateY(-50%); cursor: pointer; }
div.popups > div.content > div.head > span.toggle span.label { padding: 0 1rem; min-width: 5rem; }
div.popups > div.content > div.head > span.toggle span.pin { display: inline-block; width: 2rem; height: 2rem; background: #fff; border-radius: 2rem; border: var( --border-super-light-theme ); }
div.popups > div.content > div.head > span.toggle.on { flex-direction: row-reverse; }
div.popups > div.content > div.body { padding: 0; max-height: 80vh; overflow-x: hidden; overflow-y: auto; font-size: 1.3rem; }


/* 멀티초대장 switching 팝업 */
div.popups > div.content.multi-invt-switcher > div.head { padding: 1.2rem 0; background: var( --bg-color-light-theme ); }
div.popups > div.content.multi-invt-switcher > div.body { padding: 1.2rem; }
div.popups > div.content.multi-invt-switcher > div.body p { padding: 1.2rem 0; font-size: 1.2rem; text-align: center; }
div.popups > div.content.multi-invt-switcher > div.body p.notification { padding: 1rem; text-align: left; color: var( --font-color-theme ); }
div.popups > div.content.multi-invt-switcher > div.body ul { padding: 1rem; width: 100%; list-style: none; }
div.popups > div.content.multi-invt-switcher > div.body ul li { padding: 0.4rem; text-align: left; }
div.popups > div.content.multi-invt-switcher > div.body ul li.master { position: relative; padding-bottom: 0.8rem; border-bottom: var( --border-dashed-theme ); }
div.popups > div.content.multi-invt-switcher > div.body ul li.master + li { padding-top: 0.8rem; }
div.popups > div.content.multi-invt-switcher > div.body ul li.master span.master { position: absolute; right: 1rem; top: -0.4rem; padding: 0.2rem 0.6rem; font-size: 1.1rem; border-radius: 1rem; background: var( --bg-color-white ); color: var( --font-color-link ); }
div.popups > div.content.multi-invt-switcher > div.body ul li div { padding: 0.4rem 0.8rem; border: var( --border-light-theme ); border-radius: 0.6rem; color: var( --font-color-light ); }
div.popups > div.content.multi-invt-switcher > div.body ul li div.current { color: var( --font-color-disabled ); border: var(--border-dark-theme ); }
div.popups > div.content.multi-invt-switcher > div.body ul li div.on { color: var( --font-color-theme ); background: var( --bg-color-light-theme ); }
div.popups > div.content.multi-invt-switcher > div.body ul li div > label { font-size: 1.1rem; line-height: 1.8rem; }
div.popups > div.content.multi-invt-switcher > div.body ul li div > label > strong { display: contents; }
div.popups > div.content.multi-invt-switcher > div.body button.switching-invt { font-size: 1.2rem; color: var( --font-color-white ); border: none; background-color: var( --bg-color-theme ); }
div.popups > div.content.multi-invt-switcher > div.body button.switching-invt:disabled { color: var( --font-color-disabled ); background-color: var( --bg-color-disabled ); }


/* 멀티초대장 supply 팝업 */
div.popups > div.content.multi-invt-supply > div.head { padding: 1.2rem 0; background: var( --bg-color-light-theme ); }
div.popups > div.content.multi-invt-supply > div.body { padding: 1.2rem; }
div.popups > div.content.multi-invt-supply > div.body p { padding: 1.2rem 0; font-size: 1.2rem; text-align: center; }
div.popups > div.content.multi-invt-supply > div.body p.notification { padding: 1rem; text-align: left; color: var( --font-color-theme ); }
div.popups > div.content.multi-invt-supply > div.body p.description span { font-weight: 700; }
div.popups > div.content.multi-invt-supply > div.body ul { padding: 1rem; width: 100%; list-style: none; }
div.popups > div.content.multi-invt-supply > div.body ul li { padding: 0.4rem; text-align: left; }
div.popups > div.content.multi-invt-supply > div.body ul li.master { position: relative; padding-bottom: 0.8rem; border-bottom: var( --border-dashed-theme ); }
div.popups > div.content.multi-invt-supply > div.body ul li.master + li { padding-top: 0.8rem; }
div.popups > div.content.multi-invt-supply > div.body ul li.master span.master { position: absolute; right: 1rem; top: -0.4rem; padding: 0.2rem 0.6rem; font-size: 1.1rem; border-radius: 1rem; background: var( --bg-color-white ); color: var( --font-color-link ); }
div.popups > div.content.multi-invt-supply > div.body ul li div { padding: 0.4rem 0.8rem; border: var( --border-light-theme ); border-radius: 0.6rem; color: var( --font-color-light ); }
div.popups > div.content.multi-invt-supply > div.body ul li div.current { color: var( --font-color-disabled ); border: var(--border-dark-theme ); }
div.popups > div.content.multi-invt-supply > div.body ul li div.on { color: var( --font-color-theme ); background: var( --bg-color-light-theme ); }
div.popups > div.content.multi-invt-supply > div.body ul li div > label { font-size: 1.1rem; line-height: 1.8rem; }
div.popups > div.content.multi-invt-supply > div.body ul li div > label > strong { display: contents; }
div.popups > div.content.multi-invt-supply > div.body button.supply-invt { font-size: 1.2rem; color: var( --font-color-white ); border: none; background-color: var( --bg-color-theme ); }
div.popups > div.content.multi-invt-supply > div.body button.supply-invt:disabled { color: var( --font-color-disabled ); background-color: var( --bg-color-disabled ); }


div.view-content { position: relative; width: 100%; height: auto; }
/* 모바일 스타일 */
@media ( max-width: 768px ) {
	div.view-content {  }
	div.preview-wrap > h1 > button.bgm-icon { display: none; }
}
/* 데스크탑 스타일 */ 
@media ( min-width: 769px ) {
	div.view-content { margin: 0 auto; max-width: 40rem; }
	div.preview-wrap > h1 { position: relative; }
	div.template-content > button.bgm-icon { display: none; }
}

/* swiper square type */
.swiper-slide.square { align-items: flex-start !important; }
.swiper-slide.square .grid-9 { display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; gap: 10px; }
.swiper-slide.square .grid-9 .grid-item { aspect-ratio: 1 / 1;  overflow: hidden; cursor: pointer; }
.swiper-slide.square .grid-9 .grid-item img { display: block; width: 100%; height: 100%; object-fit: cover !important; border-radius: 0.4rem; }


/* scroll-snap */
div.template-content > section, div.template-content > div { margin-top: 4rem; padding: 0; visibility: hidden; opacity: 0; }
div.template-content > section.entry, div.template-content > div.entry { margin-top: 0 !important; visibility: visible; opacity: 1; transition: margin-top 2s ease, padding-bottom 2s ease, opacity 3s ease; }

strong { font-weight: 700 !important; }