@charset "utf-8";

/* .font-pretendard */
:root {
    --color-main: #007154;
    --color-main2: #29a748;
    --font-pretendard: 'Pretendard', sans-serif;
    --font-ohsquareAir: 'Cafe24OhsquareAir', sans-serif;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-0.5rem);
    }
    60% {
        transform: translateY(-0.25rem);
    }
}

@keyframes rotate {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}


@keyframes rotateBg {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

html {
    font-size:16px;
}

body {
    max-width: 31.25rem;
    margin: 0 auto;
    position: relative;
}

@media (max-width: 500px) {
    html,
    body {
        font-size: 3.2vw;
    }
}

.main__top {
    background: url(../img/main_bg_top.jpg) no-repeat center center;
    background-size: cover;
    height: 50rem;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main__top {
    text-align: center;
}
.main__top ,
.main__top  * {
    font-family: var(--font-pretendard);
}
.main__top p {
    font-size: 1.5625rem;
    color: #fff;
    font-weight: 500;
    text-shadow: 0 1.0625rem 1rem rgba(0,0,0,0.05);
    padding-bottom: 3.125rem;
}
.main__top span {
    font-size: 1.5625rem;
    color: var(--color-main);
    font-weight: 500;
}
.event__tab.result {
    box-shadow: 12px 0 103px rgba(0,0,0,0.45);
}
.event__tab {
    display: flex;
    justify-content: center;
    align-items: center;
}
.event__tab button {
    height: 4.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5625rem;
    color: #8d8d8d;
    width: 50%;
    background: #000;
}
.event__tab button.active {
    background: var(--color-main2);
    color: #fff;
}

.main__btm {
    background: url(../img/main_bg_btm.jpg) no-repeat center center;
    background-size: cover;
    min-height: 80rem;
    padding-top: 4.375rem;
    text-align: center;
}
.title-marker {
    width: 9.375rem;
    height: 1.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-main);
    margin: 0 auto;
    border-radius: 3.125rem;
    background: #e6fbcd;
    gap: 0.625rem;
    margin-bottom: 1.5625rem;
}
.title-marker img {
    width: 0.8125rem;
}

.title-marker span {
    font-size: 1rem;
    color: var(--color-main2);
}
.main__btm h1 b,
.main__btm h1 {
    font-size: 3.75rem;
}
.main__btm h1 b {
    color: var(--color-main2);
}
.main__btm .text-sub {
    font-size: 1.4375rem;
    font-family: var(--font-ohsquareAir);
    padding: 0.9375rem 0 0.625rem;
}
.main__btm .text-coupon {
    font-size: 1.4375rem;
}
.main__btm .text-date {
    font-family: var(--font-pretendard);
    font-size: 1.3125rem;
    padding-top: 0.9375rem;
    font-weight: 500;
    padding-bottom: 33.125rem;
}

.main__btm__btmitem {
    padding: 0 2.1875rem;
}
.main__btm__btmitem>button {
    width: 100%;
    height: 5rem;
    margin-bottom: 0.9375rem;
    border-radius: 3.125rem;
}
.main__btm__btmitem>button .text-balloon {
    position: absolute;
    top: -2.1875rem;
    left: calc(50% - 8.03125rem);
    width: 16.0625rem;
    height: 2.5rem;
    border-radius: 0.3125rem;
    color: #24b24c;
    background: #fff;
    font-weight: 600;
    font-family: var(--font-pretendard);
    font-size: 1.1875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0.75rem 0 2rem rgba(0,0,0,0.2);
    z-index: 10;
    animation: bounce 1.5s ease-in-out infinite;
}
.main__btm__btmitem>button .text-balloon::before {
    content:'▼';
    position: absolute;
    bottom: -1.875rem;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
}
.main__btm__btmitem>button.btn-login {
    background: var(--color-main2);
    color: #fff;
    position: relative;
    font-size: 2.1875rem;
}
.main__btm__btmitem>button.btn-card {
    background: #000;
    color: #fff;
    font-size: 2.1875rem;
}

.main__btm__btmitem h2 {
    padding-top: 2.5rem;
    font-family: var(--font-ohsquareAir);
    font-size: 1.4375rem;
    font-weight: 600;
    padding-bottom: 1.25rem;
}
.main__btm__btmitem .sns {
    display: flex;
    justify-content: space-between;
    gap: 0.9375rem;
}
.main__btm__btmitem .sns button {
    border-radius: 50%;
}
.main__btm__btmitem .sns button img {
    width: 100%;
}


/* 로그인 */
.login__wrap {
    text-align: center;
    padding: 5.625rem 2.1875rem;
    background: #fff;
    min-height: 100vh;
}

.login__wrap .logo {
    margin-bottom: 3.125rem;
}

.login__wrap .logo img {
    height: 3.75rem;
}

.login__form {
}

.login__form .form-group {
    margin-bottom: 1.25rem;
    text-align: left;
}

.login__form .form-group label {
    display: block;
    font-size: 1.21875rem;
    color: #333;
    margin-bottom: 0.5rem;
    font-family: var(--font-pretendard);
    font-weight: 500;
    padding-left: 0.625rem;
}

.login__form .form-group input {
    width: 100%;
    height: 4.375rem;
    padding: 0 1rem;
    border: 2px solid #e5e5e5;
    border-radius: 0.5rem;
    font-size: 1.40625rem;
    font-family: var(--font-pretendard);
    background: #fff;
    outline: none;
    box-sizing: border-box;
    font-weight: 500;
}

.login__form .form-group input:focus {
    border-color: #5ecc7d;
    background: #fff;
}

.login__form .form-group input::placeholder {
    color: #ccc;
    font-weight: 500;
}

.login__form .btn-login {
    width: 100%;
    height: 4.375rem;
    background: var(--color-main2);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-size: 1.40625rem;
    font-family: var(--font-pretendard);
    font-weight: 600;
    cursor: pointer;
    margin-top: 0;
}

.login__form .btn-login:active {
    transform: translateY(0);
}

.login__links {
    margin-top: 2.5rem;
}

.login__links a {
    color: #a2a2a2;
    text-decoration: none;
    font-size: 1.21875rem;
    font-family: var(--font-pretendard);
    font-weight: 600;
}

.login__links a:hover {
    color: var(--color-main);
}

.login__links .divider {
    margin: 0 0.625rem;
    width: 0.125rem;
    height: 1.25rem;
    background: #e5e5e5;
    display: inline-block;
    position: relative;
    top: 0.1875rem;
}
/* card choise */
.choise__wrap{
    background:url(../img/start_bg.jpg) no-repeat center center;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:calc(100vh - 4.375rem);
}
.choise__wrap h1{
    font-size:2.5rem;
    color:#fff;
}
.choise__items {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:0.9375rem;
}
.choise__items .btn-choise-item.active .img-card,
.choise__items .btn-choise-item:hover .img-card {
    filter:brightness(1.2);
}

/* 클릭한 버튼 강조 효과 */
.choise__items .btn-choise-item.clicked {
    transform: scale(1.05);
    transition: all 0.2s ease;
}

.choise__items .btn-choise-item.clicked .img-card {
    filter: brightness(1.3) contrast(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.choise__items .btn-choise-item.clicked .balloon {
    background: #fff;
    color: #333;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: none;
    transform: scale(1.05);
}

.choise__items .btn-choise-item.clicked .usertype {
    background: #007154;
    box-shadow: 0 4px 15px rgba(0, 113, 84, 0.4);
    transform: scale(1.05);
}

.choise__items .btn-choise-item.clicked .usertype.type2 {
    background: #2940ff;
    box-shadow: 0 4px 15px rgba(41, 64, 255, 0.4);
}

/* 클릭되지 않은 버튼들 상대적으로 어둡게 */
.choise__items.has-clicked .btn-choise-item:not(.clicked) {
    opacity: 0.6;
    filter: brightness(0.8);
    transform: scale(0.95);
    transition: all 0.3s ease;
}

.choise__items.has-clicked .btn-choise-item:not(.clicked) .img-card {
    filter: brightness(0.7) contrast(0.9);
}
.choise__items .btn-choise-item .balloon {
    width:calc(100% - 1.875rem);
    left:0.9375rem;
    position:relative;
    background:#ebd2ff;
    margin-bottom:1.5625rem;
    padding:0.9375rem 0.3125rem;
    border-radius:1.25rem;
}
.choise__items .btn-choise-item .balloon::before {
    content:'▼';
    display:inline-block;
    position:absolute;
    bottom:-0.9375rem;
    z-index:10;
    left:calc(50% - 0.625rem);
    font-family:var(--font-pretendard);
    color:#ebd2ff;
}
.choise__items .btn-choise-item .balloon p {
    font-size:1.25rem;
    font-family:var(--font-ohsquareAir);
}
.choise__items .btn-choise-item .balloon.type2 {
    background:#d3e9ff;
}
.choise__items .btn-choise-item .balloon.type2::before{
    color:#d3e9ff;
}
.choise__items .btn-choise-item .usertype {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.3125rem;
    background:#8e70fd;
    margin-top:0.9375rem;
    height:3.125rem;
    width:calc(100% - 1.25rem);
    margin:0.9375rem auto;
    border-radius:3.125rem;
}
.choise__items .btn-choise-item .usertype img {
    width:0.75rem;
}
.choise__items .btn-choise-item .usertype span {
    color:#fff;
    font-size:1.875rem;
}

.choise__items .btn-choise-item .usertype.type2{
    background:#4d62ff;
}
.choise__items .btn-choise-item .img-card {
    width:100%;
}
.choise__contents{
    padding:1.25rem;
}
.choise__contents h1 {
    padding-bottom:2.5rem;
    line-height:1.2;
}
.choise__contents>strong {
    color:#29a748;
    font-size:2.375rem;
    padding-bottom:1.5625rem;
    display:block;
}
.choise__items.end {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 1.25rem 1rem;
    text-align: center;
}
.choise__items.end .btn-choise-item:nth-child(1) {
    grid-column: 2 / 4;
    grid-row: 1;
}
.choise__items.end .btn-choise-item:nth-child(2) {
    grid-column: 4 / 6;
    grid-row: 1;
}
.choise__items.end .btn-choise-item:nth-child(3) {
    grid-column: 1 / 3;
    grid-row: 2;
}
.choise__items.end .btn-choise-item:nth-child(4) {
    grid-column: 3 / 5;
    grid-row: 2;
}
.choise__items.end .btn-choise-item:nth-child(5) {
    grid-column: 5 / 7;
    grid-row: 2;
}

/* 카드 순차 등장 애니메이션 */
@keyframes cardSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.choise__items.end .btn-choise-item {
    opacity: 0;
    animation: cardSlideIn 0.6s ease-out forwards;
}

.choise__items.end .btn-choise-item:nth-child(1) {
    animation-delay: 0.1s;
}

.choise__items.end .btn-choise-item:nth-child(2) {
    animation-delay: 0.2s;
}

.choise__items.end .btn-choise-item:nth-child(3) {
    animation-delay: 0.3s;
}

.choise__items.end .btn-choise-item:nth-child(4) {
    animation-delay: 0.4s;
}

.choise__items.end .btn-choise-item:nth-child(5) {
    animation-delay: 0.5s;
}
.choise__items.loading {
    justify-content:center;
}
.choise__items.loading button {}
.choise__items.loading img {
    max-width:13.4375rem;
    margin:0 auto;
    display:block;
    animation: rotate 5s linear infinite;
}

/* 결과 */
.event__tab.result {
    text-align:center;
}

.event__tab button {
    
}

.event__tab button.active {
    
}

.result__wrap {
    padding:3.75rem 1.25rem;
    text-align:center;
}

.result__wrap.b2c__result {
    background:url(../img/result_bg.jpg) no-repeat top center;
    background-size:cover;
}
.result__wrap.b2b__result {
    background:url(../img/result_bg_b2b.jpg) no-repeat top center;
    background-size:cover;
}

.result__wrap h2 {
    color:#fff;
    text-shadow:0 0.0625rem 1rem rgba(95, 64, 174, 0.5);
}

.result__wrap .title-top {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.625rem;
}

.result__wrap .title-top img {
    width:1.875rem;
    position:relative;
    top:-0.1875rem;
}

.result__wrap .title-top span {
    font-size:3.125rem;
}

.result__wrap .title-btm {
    padding-top:0.3125rem;
    padding-bottom:1.25rem;
    font-size:4.0625rem;
}

.result__wrap p {
    font-family:var(--font-ohsquareAir);
    color:#fff;
    font-size:1.875rem;
    padding-bottom:3.25rem;
}

.result__card {
    margin-bottom:4.0625rem;
}

.result__card img {
    width:100%;
    max-width:18.125rem;
}

.title-coupon {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:0 0.9375rem;
}

.title-coupon img {
    height:0.4375rem;
}

.title-coupon b {
    color:#e8e1ff;
    font-size:2.6875rem;
}

.result__coupon p {
    font-size:1.78125rem;
    color:#e8e1ff;
}

.coupon-img {
    width:100%;
    margin-bottom:2.5rem;
    padding:0 3.875rem;
}
.result__wrap p.text-share {
    font-size:1.4375rem;
    padding-bottom:1.5rem;
}
.result__sns {
    display:flex;
    justify-content:center;
    gap:0 0.625rem;
    padding:0 3.125rem;
}

.result__sns button {
    width:100%;
}

.result__sns button img {
    width:100%;
}

.warning__wrap {
    padding:2.1875rem 1.25rem;
    background:#f1effd;
}
.warning__wrap * {
    font-family:var(--font-pretendard);
    color:#616161;
}

.warning__wrap h4 {
    font-size:1.3125rem;
    font-weight:500;
    padding-bottom:0.625rem;
}

.warning__wrap h4 img {
    width:1.25rem;
}

.warning__wrap h4 span {
    
}

.warning__wrap ul {
    padding-left:0.625rem;
}

.warning__wrap li {
    list-style:disc;
    list-style-type: '-';
    padding-left:0.625rem;
    padding-bottom:0.3125rem;
    font-size:1.125rem;
    letter-spacing:-0.09375rem;
}

footer {
    background:#424242;
    padding:2.1875rem 1.25rem;
}

footer img {
    height:1.5625rem;
    margin-bottom:0.9375rem;
}

footer p {
    font-family:var(--font-pretendard);
    color:#c1c1c1;
    line-height:1.2;
}
footer .copy {
    color:#5b5b5b;
    font-size:1.03125rem;
    font-family:var(--font-pretendard);
    margin-top:1.25rem;
}

/* 화면 전환 닦아내기 애니메이션 */
.page-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

.page-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
}

.page-content.current {
    transform: translateX(0);
    z-index: 1;
}

.page-content.next {
    transform: translateX(100%);
    z-index: 2;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
}

.page-content.next.slide-in {
    transform: translateX(0);
}

.page-content.current.slide-out {
    transform: translateX(-100%);
}

/* 로딩 상태 개선 */
.loading-transition {
    pointer-events: none;
}

.loading-transition .btn-choise-item {
    pointer-events: none;
    opacity: 0.8;
    transform: scale(0.98);
    transition: all 0.2s ease;
}

/* 페이지 로딩 중 플레이스홀더 */
.page-content.next:empty::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}
.loading-img{
    width:100%;
    position:absolute;
    top:35%;
    left:0;
    animation: rotateBg 30s linear infinite;
}

@keyframes loading-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes wipeIn {
    0% { 
        transform: translateX(100%); 
    }
    100% { 
        transform: translateX(0); 
    }
}

@keyframes wipeOut {
    0% { 
        transform: translateX(0); 
    }
    100% { 
        transform: translateX(-100%); 
    }
}

/* 기존 transition-overlay 제거하고 새로운 방식으로 변경 */
.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #007154;
    z-index: 9999;
    transform: translateX(100%);
    display: none;
}

.transition-overlay.active {
    display: block;
}

.wipe-transition {
    animation: wipeIn 0.8s ease-out forwards;
}

.wipe-transition.wipe-out {
    animation: wipeOut 0.4s ease-in forwards;
}

/* 페이지 전환 시 기존 내용 페이드아웃 */
.choise__wrap.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.choise__wrap.fade-in {
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

/* 버튼 클릭 시 비활성화 */
.btn-choise-item:disabled {
    pointer-events: none;
    opacity: 0.7;
}

/* 모바일 최적화 */
@media (max-width: 500px) {
    .page-content {
        transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
}