@charset "UTF-8";

:root{
	--paper:#FFFEFB;
	--ink:#5d5d5d;
	--ink-soft:#8C877F;
	--line:#E6E3DC;
	--sage:#5A5650;
	--sage-deep:#3A3733;
	--sage-pale:#5A5650;
	--sage-mid:#5A5650;
	--sand:#F6EFE6;
	--sky:#5A5650;
	--sand:#F6EFE6;
	--cream:#F7F5F1;
		
	--general-font-family: 'Pretendard';
	
	--font-color-dark: #3d3d3d;
	--font-color-default: #5d5d5d;
	--font-color-light: #7d7d7d;
	--font-color-super-light: #bebebe;
	--font-color-disabled: #dadada;
	--font-color-theme: #5c8f86;
	--font-color-new-theme: #576764;
	--font-color-dark-theme: #47706a;
	--font-color-light-theme: #b2d1c9;
	--font-color-white: #fff;
	--font-color-noti: #ef6c63;
	--font-color-warn: #ff8000;
	--font-color-red: #ff0000;
	--font-color-delete: #b63e3e;
	--font-color-blue: #0000ff;
	--font-color-link : #2080d0;
	
	--border-default: 1px solid #7d7d7d;
	--border-absolute-black: 1px solid #000000;
	--border-double-default: 3px double #7d7d7d;
	--border-light: 1px solid #adadad;
	--border-dashed-theme: 1px dashed #5c8f86;
	--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-bolder-super-light: 3px solid #d3d3d3;
	--border-super-light-blue: 1px solid #e9eef3;
	--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-double-light-blue: 2px solid #90c0e8;
	--border-blue: 1px solid #2080d0;
	--border-double-blue: 2px solid #2080d0;
	--border-double-dark-theme: 3px double #5c8f86;
	
	--bg-color-white: #fff;
	--bg-color-absolute-black: #000000;
	--bg-color-default-font: #5d5d5d;
	--bg-color-dark-green: #4aa452;
	--bg-color-theme: #b2d1c9;
	--bg-color-dark-theme: #5c8f86;
	--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-pastel-mint: #f0fff4;
	--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-gray-trans: rgba( 32, 32, 32, 0.65 );
	--bg-color-dark-trans: rgba( 0, 0, 0, 0.5 );
	--bg-color-disabled: #f7f7fb;
	--bg-color-wran: #ffdcdc;
	--bg-color-soft-wran: #f7ebeb;
	--bg-color-noti: #ef6c63;
	--bg-color-red: #ff0000;
	--bg-color-selected: #ffffe0;
	
	--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: 460px;
	--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;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family:'Pretendard', -apple-system, sans-serif; color: var(--ink); background: var(--paper); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.serif { font-family:'Gowun Batang', serif; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.notification { margin-top: 30px; padding: 0 24px; font-size: 14px; text-align: center; font-weight: 700; color: var( --ink-soft ); }

/* ===== Header ===== */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 20px 0; transition: background .3s ease, padding .3s ease; }
.header.scrolled { background: rgba(255,254,251,0.9); backdrop-filter: blur(10px); padding: 12px 0; border-bottom: 1px solid var(--line); }
.header-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.logo { font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 600; font-style: italic; color: var(--paper); transition: color .3s ease; }
.header.scrolled .logo { color: var(--ink); }
.nav-links { display: flex; gap: 34px; font-size: 14px; color: rgba(255,254,251,0.85); transition: color .3s ease; }
.header.scrolled .nav-links { color: var(--ink-soft); }
.nav-links a:hover { opacity: 0.7; }
.header-cta { font-size: 13.5px; font-weight: 600; padding: 10px 22px; border-radius: 100px; background: rgba(255,254,251,0.15); border: 1px solid rgba(255,254,251,0.5); color: var(--paper); transition: all .3s ease; }
.header.scrolled .header-cta { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--paper); }

@media ( max-width:760px ){ .nav-links{ display: none; } }

/* ===== HERO — full-bleed photo ===== */
.hero { position: relative; height: 100vh; min-height: 560px; display: flex; align-items: center; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; background: var(--sage) url('https://static.dearto.kr/images/bg/main-hero-03.webp?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat; opacity: .85; }
.hero-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,0.35) 0%, rgba(20,20,20,0.25) 40%, rgba(20,20,20,0.7) 100%); }
.hero-content{ position: relative; z-index: 2; width: 100%; padding: 0 24px; text-align: center; color: var(--paper); }
.hero-eyebrow { font-size: 12.5px; letter-spacing: 3px; text-transform: uppercase; opacity: 0.85; margin-bottom: 18px; font-weight: 500; }
.hero h1 { font-family: 'Gowun Batang', serif; font-weight: 700; font-size: clamp(32px,6vw,52px); line-height: 1.5; margin-bottom: 180px; text-shadow: 0 2px 20px rgba(0,0,0,0.15); }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 12.5px; color: rgba(255,254,251,0.75); letter-spacing: 0.2px; }
.btn-primary { font-size: 15px; font-weight: 600; padding: 15px 32px; border: 1.5px solid var(--sage); border-radius: 100px; background: var(--paper); color: var(--ink); transition: transform .2s ease, background .2s ease; }
.btn-primary:hover { background: var(--sage); border: 1.5px solid rgba(255,254,251,0.7); border-color: var(--paper); color: var(--paper); transform: translateY(-2px); }

@media ( max-height:680px ){ .hero h1 { margin-bottom: 256px; } }
@media ( min-height: 681px ) and ( max-height: 860px ){ .hero h1 { margin-bottom: 376px; } }
@media ( min-height: 861px ) and ( max-height: 1200px ){ .hero h1 { margin-bottom: 400px; } }
@media ( min-height:1201px ){ .hero h1 { margin-bottom: 600px; } }

/* ===== Section shared ===== */
section { padding: 0; }
.section-pad { padding: 110px 0; }
.alt-bg { background: var(--cream); }
.section-head { text-align: center; max-width: 600px; margin: 0 auto 64px; }
.section-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 1.5px; color: var(--sage-deep); text-transform: uppercase; margin-bottom: 16px; }
.section-head h2 { font-family: 'Gowun Batang', serif; font-size: clamp(26px,4vw,36px); font-weight: 700; line-height: 1.55; margin-bottom: 16px; }
.section-head p { color: var(--ink-soft); font-size: 15.5px; }

/* ===== Story / value — photo + text split ===== */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.story.story-text-only { grid-template-columns: 1fr; max-width: 640px; text-align: center; }
.story.story-text-only .story-list { align-items: flex-start; max-width: 440px; margin: 0 auto; }
.story.story-text-only .story-list-item { text-align: left; }
.story-photo { position: relative; aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; background: var(--sage); }
.story-photo .frame-tag { position: absolute; bottom: 20px; left: 20px; font-family: 'Gowun Batang', serif; color: var(--paper); font-size: 14px; background: rgba(58,55,51,0.3); backdrop-filter: blur(6px); padding: 8px 16px; border-radius: 100px; }
.story-text h3 { font-family: 'Gowun Batang', serif; font-size: clamp(22px,3vw,30px); line-height: 1.6; margin-bottom: 24px; font-weight: 700; }
.story-text p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.85; margin-bottom: 64px; }
.story-list { display: flex; flex-direction: column; gap: 16px; }
.story-list-item { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; }
.story-list-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage-deep); margin-top: 7px; flex-shrink: 0; }
.story-list-item b { color: var(--ink); }

@media ( max-width:820px ){
	.story{ grid-template-columns: 1fr; gap: 36px; }
}

/* ===== Templates — clean card grid ===== */
.tpl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0 16px; max-width: 760px; margin: 0 auto; }
@media ( min-width:760px ){
	.tpl-grid { grid-template-columns: repeat(4, 1fr); max-width: 1180px; gap: 24px; }
}

.tpl-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; cursor: pointer; }
.tpl-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -16px rgba(58,55,51,0.16); border-color: var(--sage); }
.tpl-photo { aspect-ratio: 2.35/4; }
.tpl-photo.tp1 { background: #C8C4BC url('https://static.dearto.kr/images/templates/captures/DearTo기본.webp?q=80&w=500&auto=format&fit=crop') center/cover; }
.tpl-photo.tp2 { background: #A8A39A url('https://static.dearto.kr/images/templates/captures/별빛데이.webp?q=80&w=500&auto=format&fit=crop') center/cover; background-position: top; }
.tpl-photo.tp3 { background: #888378 url('https://static.dearto.kr/images/templates/captures/로맨틱아치.webp?q=80&w=500&auto=format&fit=crop') center/cover; }
.tpl-photo.tp4 { background: #6B6660 url('https://static.dearto.kr/images/templates/captures/웨딩데이.webp?q=80&w=500&auto=format&fit=crop') center/cover; background-position: top; }
.tpl-photo.tp5 { background: #C8C4BC url('https://static.dearto.kr/images/templates/captures/플라워가든.webp?q=80&w=500&auto=format&fit=crop') center/cover; }
.tpl-photo.tp6 { background: #A8A39A url('https://static.dearto.kr/images/templates/captures/더클래식.webp?q=80&w=500&auto=format&fit=crop') center/cover; background-position: top; }
.tpl-photo.tp7 { background: #888378 url('https://static.dearto.kr/images/templates/captures/웨딩모먼트.webp?q=80&w=500&auto=format&fit=crop') center/cover; background-position: top; }
.tpl-photo.tp8 { background: #6B6660 url('https://static.dearto.kr/images/templates/captures/클래식오벌.webp?q=80&w=500&auto=format&fit=crop') center/cover; }
.tpl-photo.tp9 { background: #C8C4BC url('https://static.dearto.kr/images/templates/captures/리본스케치.webp?q=80&w=500&auto=format&fit=crop') center/cover; }
.tpl-photo.tp10 { background: #A8A39A url('https://static.dearto.kr/images/templates/captures/클래식리본.webp?q=80&w=500&auto=format&fit=crop') center/cover; }
.tpl-photo.tp11 { background: #888378 url('https://static.dearto.kr/images/templates/captures/소프트내추럴.webp?q=80&w=500&auto=format&fit=crop') center/cover; }
.tpl-photo.tp12 { background: #6B6660 url('https://static.dearto.kr/images/templates/captures/로맨틱베일.webp?q=80&w=500&auto=format&fit=crop') center/cover; }
.tpl-photo.tp13 { background: #6B6660 url('https://static.dearto.kr/images/templates/captures/플라워레터_01.webp?q=80&w=500&auto=format&fit=crop') center/cover; }
.tpl-card-info { padding: 16px 18px 20px; border-top: 1px solid var(--line); }
.tpl-card .tpl-cap { font-family: 'Gowun Batang', serif; font-size: 14px; font-weight: 700; color: var(--ink); }
.tpl-card .tpl-sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; display: block; }

/* ===== Quote band ===== */
.quote-band { position: relative; padding: 140px 24px; text-align: center; background: var(--sage); overflow: hidden; }
.quote-mark { font-family: 'Playfair Display', serif; font-style: italic; font-size: 54px; color: rgba(255,254,251,0.6); line-height: 1; margin-bottom: 6px; position: relative; z-index: 1; }
.quote-band p { position: relative; z-index: 1; font-family: 'Gowun Batang', serif; font-weight: 700; font-size: clamp(20px,3vw,28px); line-height: 1.8; max-width: 600px; margin: 0 auto; color: var(--paper); }

/* ===== Features — minimal text list, no grid noise ===== */
.feature-list { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.feature-row { display: flex; align-items: baseline; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.feature-row:first-child { border-top: 1px solid var(--line); }
.feature-num { font-family: 'Playfair Display', serif; font-style: italic; font-size: 18px; color: var(--sage-deep); flex-shrink: 0; width: 32px; }
.feature-row > div > * { display: block; }
.feature-row > div h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.feature-row > div span { font-size: 13.5px; color: var(--ink-soft); }
.feature-row > div a { margin-top: 6px; font-size: 13.5px; color: var(--font-color-theme); }

/* ===== Final CTA — photo backdrop ===== */
.final-cta { position: relative; margin: 0 24px 100px; max-width: 1132px; margin-left: auto; margin-right: auto; border-radius: 28px; overflow: hidden; padding: 130px 24px; text-align: center; }
.final-cta-bg { position: absolute; inset: 0; background: var(--sage-deep); }
.final-cta-content { position: relative; z-index: 1; color: var(--paper); }
.final-cta h2 { font-family: 'Gowun Batang', serif; font-size: clamp(28px,4.5vw,42px); font-weight: 700; margin-bottom: 18px; line-height: 1.5; }
.final-cta p { color: rgba(255,254,251,0.8); font-size: 15.5px; margin-bottom: 36px; }
.final-cta .btn-primary { background: transparent; border: 1.5px solid rgba(255,254,251,0.7); color: var(--paper); }
.final-cta .btn-primary:hover { background: var(--paper); border-color: var(--paper); color: var(--sage-deep); }

/* ===== Footer ===== */
footer { padding: 64px 24px 40px; border-top: 1px solid var(--line); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 18px; margin-bottom: 36px; }
.footer-links { display: flex; width: 100%; gap: 26px; font-size: 13.5px; color: var(--ink-soft); }
.footer-links a:hover { color: var(--ink); }
.footer-meta { font-size: 12.5px; color: var(--ink-soft); line-height: 1.9; }
.footer-copy { font-size: 12px; color: var(--ink-soft); margin-top: 16px; }

/* ===== Scroll reveal ===== */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce){
	* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
	html { scroll-behavior: auto; }
}

@media ( max-width:600px ){
	.section-pad { padding: 72px 0; }
	.quote-band { padding: 90px 24px; }
	.final-cta { margin: 0 16px 70px; padding: 90px 24px; }
}


/* dialog-content */
div.dialog { font-size: 11px; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(72,72,72,0.5); z-index: 999; }
div.dialog.target { position: absolute; background: rgba(72,72,72,0.35); border-radius: inherit; z-index: 996; }
div.dialog > div.content { position: absolute; left: 50%; top: 50%; padding: 12px 12px 20px 12px; width: 90%; max-width: 34rem; height: auto; max-height: 80vh; transform: translate( -50%, -50% ); background-color: var( --bg-color-white ); }
div.dialog > div.content > div.head { position: relative; padding: 0.5rem 0; font-size: 18px; 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://static.dearto.kr/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: 15px; }
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: 10px 36px; width: 45%; font-size: 14px; border: none; border-radius: 0; color: var( --font-color-default ); }
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( --bg-color-absolute-black ); color: var( --font-color-white ); }
div.dialog > div.content > div.footer button.cancel { background-color: var( --btn-bg-color-gray ); }


/* login dialog */
div.dialog > div.login-popup { position: absolute; left: 50%; top: 50%; padding: 18px; width: 90%; max-width: 22rem; height: fit-content; max-height: 80vh; font-size: 13px; transform: translate( -50%, -50% ); transition: opacity 0.5s ease;
	background-color: var( --bg-color-white ); border-radius: 8px; opacity: 0; }
div.dialog > div.login-popup.active { opacity: 1; transition: opacity 1s ease; }
div.dialog > div.login-popup button.close { position: absolute; right: 16px; top: 16px; padding: 0; width: 18px; height: 18px; border: none; border-radius: 0;
	background-image: url('https://static.dearto.kr/images/thin-close.png'); background-size: contain; background-repeat: no-repeat; }
div.dialog > div.login-popup div.ttl > h3 { padding: 0 0 12px 0; font-size: 17px; font-weight: 700; }
div.dialog > div.login-popup ul { margin: 30px auto 20px auto; width: fit-content; }
div.dialog > div.login-popup ul li.user { display: flex; align-items: center; padding: 0; margin-top: 1.2rem; width: 200px; height: 48px; cursor: pointer; }
div.dialog > div.login-popup ul li.user.naver { border-radius: 0.4rem; background-color: #03a94d; }
div.dialog > div.login-popup ul li.user.kakao { border-radius: 0.4rem; background-color: #ffeb00; }
div.dialog > div.login-popup ul li.user > img { margin: 8px; width: 30px; height: 22px; }
div.dialog > div.login-popup ul li.user.naver > svg { margin: 8px; width: 30px; height: 22px; color: #fff; }
div.dialog > div.login-popup ul li.user > span { display: flex; align-items: center; justify-content: center; padding-left: 20px; border-left: var( --border-white ); font-size: 15px; font-weight: 700; letter-spacing: 1.4px; }
div.dialog > div.login-popup ul li.user.naver > span { color: #fff; }
div.dialog > div.login-popup ul li:first-child { margin-top: 0; }



div.dialog > div.login-popup div.func { display: flex; align-items: center; justify-content: space-around; margin-top: 1rem; padding-top: 1rem; border-top: var( --border-light-theme ); }
div.dialog > div.login-popup div.func button { padding: 0.6rem 2.4rem; width: 100%; border: var( --border-theme ); border-radius: 0.4rem; color: var( --font-color-theme ); }
div.dialog > div.login-popup div.func button.naver-login { border: 1px solid var( --bg-color-dark-theme ); background-color: var( --bg-color-dark-theme ); color: var( --font-color-white ); }
div.dialog > div.login-popup div.func button.kakao-login { border: 1px solid var( --bg-color-dark-theme ); background-color: var( --bg-color-dark-theme ); color: var( --font-color-white ); }


/** 문의하기 dialog */
div.dialog#inquiry-dialog div.content { width: 90%; }
div.dialog#inquiry-dialog div.content div.body { padding: 0 8px 0 8px; }
div.dialog#inquiry-dialog div.content div.body > div { margin-top: 0 !important; }
div.dialog#inquiry-dialog div.content div.body > div > p { margin-top: 8px; font-size: 15px; }
div.dialog#inquiry-dialog div.content div.body > div > p textarea { padding: 6px; width: 113.5%; height: 10rem; font-family: Pretendard; font-size: 17px; line-height: 20px; transform-origin: left top; }
div.dialog#inquiry-dialog div.content div.body > div > p input { padding: 6px; width: 113.5%; font-family: Pretendard; font-size: 17px; transform-origin: left top; }
div.dialog#inquiry-dialog div.content div.body > div > p select { padding: 6px; width: 113.5%; font-family: Pretendard; font-size: 15px; transform: scale(0.875); transform-origin: left top; }
div.dialog#inquiry-dialog div.content div.body > div.invt { display: none; }
div.dialog#inquiry-dialog div.content div.footer { margin-top: 1rem; }

/* input focus auto zoom-in anti control */
input[type="text"], input[type="password"] { padding: 0.3rem 0.6rem; 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 ); font-family: Pretendard; font-size: 17px; }
input[type="text"]:disabled, input[type="password"]:disabled { border: var( --border-disabled ); background-color: var( --bg-color-disabled ) !important; }
input[type="text"], input[type="password"] { width: 114.285%; transform: scale(0.875); transform-origin: left bottom; }
input[type="text"]::placeholder, input[type="password"]::placeholder { transform: scale(0.875); transform-origin: left bottom; }

/* buttons */
button { outline: none; cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* 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;
	font-size: 1.5rem; transform: scale(0.875); width: 114.285%; transform-origin: left bottom; }
textarea::placeholder { color: var( --font-color-super-light ); font-family: Pretendard; font-size: 17px; }
textarea:disabled { border: var( --border-disabled ); background-color: var( --bg-color-disabled ) !important; }

/* 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; }
select option:disabled { color: var( --font-color-disabled ); }

/* required */
span.required { color: var( --font-color-default ); margin-right: 0.4rem; }