@charset "utf-8";

/* *********************************************************************************************** */
/* 250915 롯데호텔 리워즈 멤버십 혜택 */
:root {
    --primary: #000;
    --secondary: #897767;
    --text: #111;
    --bg: #EAE4DC;
}

body { letter-spacing: -0.03em; }
.letter-loose { letter-spacing: 0 !important; }
.letter-tight { letter-spacing: -0.01em !important; }

/* 이벤트 무효화 */
.event-title { display: none; }
.event-wrap { padding-top: 0; }
.lh-content { padding-top: 0; }

/* lang */
.lh-lang { justify-content: center; margin-top: -14%; letter-spacing: 0;  }
.lh-lang__item { display: flex; margin: 1%; padding: 2.5% 4%; border: 1px solid var(--primary); border-radius: .8vw; color: #8D888B; }
.lh-lang__item--active { background: var(--primary); color: white; font-weight: 600; }

/* logo, title, date */
.lh-logo { max-width: 70%; margin: auto; margin-top: 7%; }
.lh-title { margin-top: 8%; padding: 0 6% ; text-align: center; line-height: 1.3; letter-spacing: -0.04em; font-size: clamp(30px, calc(30px + (56  - 30) * ((100vw - 360px) / (770 - 360))), 56px); }
.lh-title__sub { display: block; margin-bottom: 4%; font-weight: 600; font-size: clamp(22px, calc(22px + (42  - 22) * ((100vw - 360px) / (770 - 360))), 42px); }
.lh-date { margin: 10% 0; color: var(--secondary); }

/* 공통, 인증, 쿠폰 */
.lh-bg { margin-top: -18%; padding: 26% 8% 12%; background: var(--bg); }
.lh-common__desc { line-height: 1.7; letter-spacing: -0.04em; color: var(--text); }

/* form, 버튼 */
.lh-form { margin-top: 12%;  }
input.lh-form__control, .lh-btn { height: clamp(60px, calc(60px + (120 - 60) * ((100vw - 360px) / (770 - 360))), 120px); padding: 0 3%; border-width: 0; border-radius: .8vw; font-size: clamp(18px, calc(18px + (37 - 18) * ((100vw - 375px) / (770 - 375))), 37px); }
input.lh-form__control::placeholder { text-align: center; color: #9C9A9E !important; }
.lh-btn { text-transform: uppercase; font-weight: 600; }
.lh-btn--primary { background: var(--text); color: white; text-transform: uppercase; }
.lh-btn--secondary { background: var(--secondary); color: white; }

/* 쿠폰 */
.lh-confirm { margin-top: 12%; }
.lh-confirm__title { font-size: clamp(30px, calc(30px + (56  - 30) * ((100vw - 360px) / (770 - 360))), 56px); }
.lh-coupon { position: relative; margin-top: 6%; padding: 0 5%; background-color: var(--secondary); }
.lh-coupon--completed { position: relative; }
.lh-coupon--completed::after { content: '발급완료'; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); color: white; font-size: clamp(18px, calc(18px + (37 - 18) * ((100vw - 375px) / (770 - 375))), 37px); font-weight: 500; }

.lh-coupon::before { content: ''; position:absolute;  }
.lh-coupon__content { position: relative; padding: 10% 0; background: white; color: var(--secondary); }
.lh-coupon__title { letter-spacing: -0.05em; font-size: clamp(24px, calc(24px + (48  - 24) * ((100vw - 360px) / (770 - 360))), 48px); }
.lh-coupon__desc { margin-top: 5%; line-height: 1.7; }
.lh-circle { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; z-index: 10; }
.lh-circle__item { width: clamp(22px, calc(22px + (44  - 22) * ((100vw - 360px) / (770 - 360))), 44px); height: clamp(22px, calc(22px + (44  - 22) * ((100vw - 360px) / (770 - 360))), 44px); background: var(--bg); border-radius: 50%; }
.lh-circle__item--left { margin-left: -5%; }
.lh-circle__item--right { margin-right: -5%; }

/* 유의사항 */
.lh-caution { padding: 11% 8%; padding-left: 9%; }
.lh-caution .common-list { padding-top: 0; color: var(--primary); }
.lh-caution .common-list__item:before { content: '•'; left: 0; top: 0; width: 0; height: 0; background: transparent; }
.lh-caution .common-list__item { padding-left: 4.4%; }

/* 영문 */
[lang='en'] .lh-coupon--completed::after { content: 'VOUCHER ISSUED'; }
[lang='en'] .lh-coupon__title { font-size: clamp(20px, calc(20px + (40  - 20) * ((100vw - 360px) / (770 - 360))), 40px); }
[lang='en'] input.lh-form__control { letter-spacing: -0.03em; }