@charset "UTF-8";

/* =============================================
   한국경제 앱 개편 EVENT - UI Stylesheet
   ============================================= */

/* ---------------------------------------------
   CSS Custom Properties
   --------------------------------------------- */
:root {
    /* Colors */
    --color-primary: #1C61ED;

    --color-gray-primary: #121212;
    --color-gray-secondary: #585858;
    --color-gray-tertiary: #888888;
}

/* ---------------------------------------------
   reset
   --------------------------------------------- */
html,body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none; -moz-text-size-adjust:none; -o-text-size-adjust:none; text-size-adjust:none}
body,div,span,em,strong,select,section,article,nav,footer,header,address,caption,figure,figcaption,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,textarea,input,button,tr,th,td,table {margin:0; padding:0}
*,::after,::before {box-sizing:border-box}
body {color:var(--color-gray-primary); font-family:'Pretendard', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; line-height:1.2}
h1,h2,h3,h4,h5,h6 {font-size:inherit}
ol,ul {list-style-type:none}
blockquote,q {quotes:none}
blockquote:before,blockquote:after,q:after,q:before {content:''; content:none}
img,fieldset,iframe {border:0 none; vertical-align:top}
img {max-width:100%}
i,em,address,optgroup {font-style:normal}
hr {display:none}
input,button,textarea,select {font:inherit; color:inherit}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {display:none}
button {border:0 none; border-radius:0; background:transparent; cursor:pointer; color:inherit}
[role="button"] {cursor:pointer}
table {border-collapse:collapse; border-spacing:0}
th, td {color:inherit}
caption {width:0; height:0; overflow:hidden; color:transparent; text-indent:-9999px}
legend,.blind {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
a {color:inherit; text-decoration:none}

/* ---------------------------------------------
   공통 유틸리티
   --------------------------------------------- */
.only-pc {
    display: block;
}
.only-mo {
    display: none;
}

/* ---------------------------------------------
   Layout - 공통 레이아웃
   --------------------------------------------- */
.layout-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------------------------------------------
   상세 페이지 헤더
   --------------------------------------------- */
.ev-detail__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
}
.ev-detail__contents {
    padding: 24px 0;
}
.ev-detail__title {
    font-weight: normal;
    font-size: 20px;
    line-height: 1.4;
    text-align: center;
}
.btn-back {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
}
.btn-notice {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
}
.btn-save {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--color-primary);
    background: #fff;
    color: var(--color-primary);
    font-size: 12px;
    border-radius: 50rem;
}
.btn-save:disabled {
    border-color: #ccc;
    background-color: #cccccc;
    color: #888;
    cursor: not-allowed;
}

/* ---------------------------------------------
   상세 페이지 콘텐츠
   --------------------------------------------- */
.ev-detail {
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.ev-detail .layout-inner {
    max-width: 720px;
}

/* ---------------------------------------------
   Notice - 유의사항
   --------------------------------------------- */
.notice__title {
    margin-bottom: 24px;
    font-size: 20px;
}
.notice__section:not(:first-child) {
    margin-top: 20px;
}
.notice__subtitle {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.45;
}
.notice__list > li {
    position: relative;
    padding-left: 20px;
    font-size: 15px;
    line-height: 1.65;
}
.notice__list > li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 11px;
    width: 3px;
    height: 3px;
    border-radius: 100%;
    background-color: var(--color-gray-primary);
}
.notice__list a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* ---------------------------------------------
   Privacy - 개인정보 동의
   --------------------------------------------- */
.privacy__title {
    margin-bottom: 24px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}
.privacy__info {
    margin-bottom: 20px;
    line-height: 1.45;
    color: var(--color-gray-secondary);
}
.privacy__list {
    margin-bottom: 8px;
}
.privacy__list-item {
    position: relative;
    padding-left: 10px;
    font-size: 13px;
}
.privacy__list-item::before {
    content: '·';
    position: absolute;
    left: 0;
    top: 0;
}
.privacy__notice {
    font-size: 14px;
}
.privacy__form {
    margin-bottom: 32px;
}
.privacy__field {
    display:flex;
    align-items:center;
    gap: 12px;
}
.privacy__field:not(:first-child) {
    margin-top: 10px;
}
.privacy__label {
    flex: 0 0 auto;
    width: 60px;
    font-size: 15px;
    font-weight: 500;
}
.privacy__input {
    flex: 1;
    width: 100%;
    height: 46px;
    padding: 0 12px;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s;
}
.privacy__input::placeholder {
    color: #888;
    font-size: 15px;
}
.privacy__input:focus {
    border-color: var(--color-primary);
}
.privacy__agree {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}
.privacy__checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.privacy__checkbox + .privacy__checkbox-label {
    position: relative;
    min-height: 24px;
    padding-left: 32px;
    font-size: 14px;
    line-height: 1.6;
    cursor: pointer;
}
.privacy__checkbox + .privacy__checkbox-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 7.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C5.28 3 6.12 3 7.8 3h8.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C21 5.28 21 6.12 21 7.8v8.4c0 1.68 0 2.52-.327 3.162a3 3 0 0 1-1.311 1.311C18.72 21 17.88 21 16.2 21H7.8c-1.68 0-2.52 0-3.162-.327a3 3 0 0 1-1.311-1.311C3 18.72 3 17.88 3 16.2z'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
}
.privacy__checkbox:checked + .privacy__checkbox-label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m7.5 12 3 3 6-6M7.8 21h8.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C21 18.72 21 17.88 21 16.2V7.8c0-1.68 0-2.52-.327-3.162a3 3 0 0 0-1.311-1.311C18.72 3 17.88 3 16.2 3H7.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C3 5.28 3 6.12 3 7.8v8.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C5.28 21 6.12 21 7.8 21'/%3E%3C/svg%3E");
}
.privacy__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 53px;
    border: 1px solid var(--color-primary);
    background: #fff;
    color: var(--color-primary);
    font-size: 18px;
    border-radius: 50rem;
}
.privacy__btn:disabled {
    border-color: #ccc;
    background-color: #cccccc;
    color: #888;
    cursor: not-allowed;
}

/* ---------------------------------------------
   Feed
   --------------------------------------------- */
/* 피드 상단 영역 */
.feed__top {
    margin-bottom: 32px;
}
.feed__top .ev-title {
    margin-bottom: 24px;
    text-align: center;
    line-height: 1.5;
}
.feed__top .ev-title__main {
    color: var(--color-primary);
    font-size: 22px;
    font-weight: 700;
}
.feed__top .ev-title__sub {
    margin-top: 4px;
    font-size: 15px;
}
.feed__status {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.feed__status-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding:12px 20px;
    border-radius: 8px;
    background: #F0F5FF;
    font-size: 14px;
}
.feed__status-item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    flex: 1;
    max-width: 260px;
}
.feed__status-label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80px;
    margin-right: 16px;
    font-weight: 700;
}
.feed__status-label::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    opacity: 0.2;
    background: #2668EE;
}
.feed__status-value {
    display: flex;
    justify-content: flex-end;
}
.feed__status-activity {
    gap: 12px;
}
.feed__activity-item em {
    color: var(--color-primary);
}
/* Feed 플로팅 버튼 */
.feed-floating {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 100;
}
.feed-floating__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #2668EE;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}
.feed-floating.is-scrolling .feed-floating__btn {
    transform: translateX(40px);
}
.feed-floating__text {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}
/* Feed 비어있을 때 */
.feed__empty {
    padding-top: 32px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.feed__empty-title {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
}
.feed__empty-img {
    margin-bottom: 20px;
}
.feed__empty-desc {
    font-size: 15px;
    line-height: 1.45;
}
/* Feed 리스트 */
.feed__item {
    display: flex;
    gap: 8px;
    padding:16px 0;
    border-top: 1px solid #ddd;
}
.feed__item-num {
    display: none;
    flex: 0 0 auto;
    min-width: 30px;
    font-size: 15px;
    text-align: center;
}
.feed__item-content {
    flex: 1;
}
.feed__item-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.feed__item-avatar {
    flex: 0 0 auto;
}
i[class^="icon-avatar--"] {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    vertical-align: top;
}
.icon-avatar--good {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cg fill-rule='evenodd' clip-path='url(%23b)' clip-rule='evenodd'%3E%3Cpath fill='%23fcb49b' d='M10 0c5.52 0 10 4.48 10 10s-4.48 10-10 10S0 15.52 0 10 4.48 0 10 0'/%3E%3Cpath fill='%23fff' d='M8.065 5.844a2.176 2.176 0 0 1 0 4.35 2.176 2.176 0 0 1 0-4.35'/%3E%3Cpath fill='%23fff' d='M12.098 5.844a2.176 2.176 0 0 1 0 4.35 2.176 2.176 0 0 1 0-4.35'/%3E%3Cpath fill='%23000' d='M12.1 7.402c.27-.475.826-.485 1.11-.257.283.229.292.697.023 1.171-.173.326-.602.656-.99.896a.21.21 0 0 1-.213.005c-.398-.224-.84-.538-1.025-.855-.288-.463-.297-.932-.024-1.172.274-.24.831-.251 1.119.212M8.051 7.402c.27-.475.826-.485 1.11-.257.283.229.292.697.023 1.171-.172.326-.602.656-.99.896a.21.21 0 0 1-.213.005c-.398-.224-.84-.538-1.025-.855-.288-.463-.297-.932-.024-1.172.274-.24.832-.251 1.119.212'/%3E%3C/g%3E%3Cpath stroke='%23210e15' stroke-linecap='round' stroke-linejoin='round' stroke-width='.824' d='M6.667 12.335c2.096 1.731 5.185 1.504 6.812-.04'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.icon-avatar--soso {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cg fill-rule='evenodd' clip-path='url(%23a)' clip-rule='evenodd'%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='%2392dbf2' d='M10 0c5.52 0 10 4.48 10 10s-4.48 10-10 10S0 15.52 0 10 4.48 0 10 0'/%3E%3Cpath fill='%23fff' d='M7.642 6.726a2.082 2.082 0 0 1 0 4.162 2.082 2.082 0 0 1 0-4.162'/%3E%3Cpath fill='%23000' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='.02' d='M6.87 7.831a.892.892 0 1 1 0 1.785.892.892 0 0 1 0-1.785'/%3E%3Cpath fill='%23fff' d='M11.741 6.726a2.082 2.082 0 0 1 0 4.162 2.082 2.082 0 0 1 0-4.162'/%3E%3Cpath fill='%23000' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='.02' d='M10.91 7.773a.95.95 0 1 1 0 1.899.95.95 0 0 1 0-1.899'/%3E%3C/g%3E%3Cpath fill='%230b060a' d='M9.197 12.035a.804.804 0 1 1 0 1.608.804.804 0 0 1 0-1.608'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.icon-avatar--bad {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cg clip-path='url(%23b)'%3E%3Cpath fill='%239e89d2' fill-rule='evenodd' d='M10 0c5.52 0 10 4.48 10 10s-4.48 10-10 10S0 15.52 0 10 4.48 0 10 0' clip-rule='evenodd'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='.814' d='M7.612 13.514c1.898-.547 3.283-.552 5.097 0'/%3E%3Cpath fill='%23e0f0fb' fill-rule='evenodd' d='M15.099 6.281c.741.911 2.277 2.843 2.632 4.222a1.497 1.497 0 0 1-2.897.746c-.355-1.378.843-3.508.264-4.968' clip-rule='evenodd'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M6.225 8.269c-.815 1.745.89 3.4 2.692 2.407 1.582-.873 1.194-3.009-.328-3.697-.72.535-1.514.958-2.364 1.29' clip-rule='evenodd'/%3E%3Cpath fill='%230b060a' fill-rule='evenodd' d='M8.853 9.465a.92.92 0 1 1-1.544-1.004.92.92 0 0 1 1.544 1.004' clip-rule='evenodd'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M13.55 8.293c.814 1.746-.891 3.4-2.693 2.408-1.582-.874-1.194-3.01.329-3.698.72.535 1.513.958 2.363 1.29' clip-rule='evenodd'/%3E%3Cpath fill='%230b060a' fill-rule='evenodd' d='M10.92 9.49a.92.92 0 1 0 1.544-1.005.92.92 0 0 0-1.544 1.005' clip-rule='evenodd'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath fill='%23fff' d='M0 0h20v20H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.feed__item-date {
    font-size: 14px;
    color: var(--color-gray-secondary);
}
.feed__item-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.feed__item-text {
    font-size: 15px;
    line-height: 1.45;
}
.feed__item-img {
    position: relative;
    height: 0;
    padding-bottom: 63%;
    overflow: hidden;
}
.feed__item-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------
   Write - 후기 작성
   --------------------------------------------- */
.write__header {
    margin-bottom: 24px;
}
.write__date {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--color-gray-secondary);
}
.write__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.45;
}
.write__emotion {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.write__emotion-item {
    flex: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.write__emotion-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 40px;
    border-radius: 50rem;
    background: #F3F3F3;
    font-size: 15px;
    
}
.write__emotion-item input:checked + .write__emotion-text {
    background: var(--color-gray-primary);
    font-weight: 600;
    color: #fff;
}
.write__form-header {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    color: var(--color-primary);
}
.write__form-header .write__form-guide {
    font-size: 13px;
    font-weight: 600;
}
.write__form-header .write__form-count {
    font-size: 12px;
}
.write__form-count strong {
    font-weight: 500;
}
.write__form-body {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
}
.write__textarea {
    width: 100%;
    min-height: 300px;
    padding: 0;
    border: none;
    outline: none;
    resize: none;
    font-size: 16px;
    line-height: 1.45;
}
.write__textarea::placeholder {
    color: #888;
    font-size: 14px;
}
.write__attach {
    margin-top: 24px;
}
.write__attach-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.write__attach-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--color-gray-secondary);
    border-radius: 50rem;
    cursor: pointer;
    font-size: 12px;
}
.write__attach-info {
    color: var(--color-gray-secondary);
    font-size: 12px;
    line-height: 1.45;
}
.write__attach-thumb {
    margin-top: 12px;
}
.attach-thumb {
    position: relative;
    width: 90px;
    height: 90px;
    overflow: hidden;
}
.attach-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.attach-thumb::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    border: 1px solid rgba(0,0,0,.08);
    pointer-events: none;
}
.attach-thumb__remove {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #000;
}

/* ===================================
   Toast
=================================== */
.toast {
    position: fixed;
    bottom: 24px;
    left: 20px;
    right: 20px;
    z-index: 1000;
    padding: 12px 20px;
    background: rgba(18, 18, 18, .8);
    border-radius: 8px;
}
.toast__msg {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    line-height: 1.45;
    text-align: center;
}

/* =============================================
   메인
   ============================================= */
/* 메인 공통 */
.ev-main {
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.event-section {
    padding: clamp(40px,8vw,80px) 0;
}
.event-title-wrap {
    margin-bottom: clamp(24px,3.2vw,32px);
    text-align: center;
}
.section-tit {
    font-family: 'Cafe24Anemone', sans-serif;
    font-weight: 400;
    font-size: clamp(28px,3.6vw,36px);
    line-height: 1.3;
}
.event-subtit {
    margin-top: 4px;
    font-size: clamp(16px,1.8vw,18px);
    line-height: 1.45;
}
.event-subtit .highlight {
    color: #74D5FB;
    font-weight: 600;
}
.event-title-wrap .event-btn-wrap {
    margin-top: 24px;
}
/* Hero */
.hero {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 31px);
    padding: clamp(55px,8vw,80px) 0 0;
    background: linear-gradient(192deg, #00205F 6.9%, #000 61.9%);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.hero-bg {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(https://static.hankyung.com/resource/www/promotion/app-challenge/img/hero-bg.jpg) no-repeat 50% 50%/ cover;
    pointer-events: none;
}
/* .hero-bg2 {
    background-image: url(https://static.hankyung.com/resource/www/promotion/app-challenge/img/hero-bg2.jpg);
} */
.hero > .layout-inner {
    flex: 1;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.hero .event-tit {
    padding: 5px 4px;
    margin-bottom: 12px;
    border-top: 1px solid #93B7FF;
    border-bottom: 1px solid #93B7FF;
    color: #93B7FF;
    font-size: clamp(18px,3vw,30px);
    font-weight: 700;
    line-height: 1.3;
}
.hero .event-main-tit {
    margin-bottom: 32px;
    font-weight: 400;
    font-family: 'Cafe24Anemone', sans-serif;
    line-height: 1.3;
    color: #fff;
}
.hero .event-main-tit .tit-sub {
    display: block;
    font-size: clamp(32px,6.2vw,62px);
}
.hero .event-main-tit .tit-main {
    display: block;
    font-size: clamp(36px,7.6vw,76px);
    background: linear-gradient(0deg, #93B7FF 0%, #fff 40%, #fff 50%, #fff 100%);
    background-size: 100% 200%;
    background-position: 0 0;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero .event-main-tit .tit-main-highlight {
    display: inline-block;
    background: linear-gradient(0deg, #FFA95E 0%, #fff 40%, #fff 50%, #fff 100%);
    background-size: 100% 200%;
    background-position: 0 0;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 400;
}
.hero-desc {
    color: #fff;
    font-size: clamp(15px,2vw,20px);
    font-weight: 500;
    line-height: 1.45;
}
.hero-desc .highlight {
    color: #93B7FF;
    font-weight: 400;
}
.hero .event-period {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 0;
    margin-top: 24px;
    padding: clamp(6px,1vw,10px) clamp(12px,2vw,20px);
    border: 1px solid #FEB87B;
    border-radius: 50rem;
    color: #FEB87B;
    font-weight: 500;
    font-size: clamp(14px,1.8vw,18px);
    line-height: 1.4;
}
.hero .event-period-label {
    display: inline-flex;
    align-items: center;
    font-weight: 700;
}
.hero .event-period-label::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 15px;
    margin: 0 clamp(6px,.8vw,8px);
    background: #FEB87B;
    opacity: 0.4;
}
.hero-prize-box {
    position: relative;
    width: 100%;
    padding: clamp(30px,5vw,50px) 0;
}
.hero-prize-bg {
    content: '';
    position: absolute;
    top: clamp(78px,22.4vw,240px);
    left: 0;
    right: 0;
    bottom: 0;
    /* height: clamp(56px,11.5vw,115px); */
    background: #1E51B8;
}
.hero-prize-box .img-prize-box {
    position: relative;
    width: clamp(280px,74.7vw,747px);
}
/* hero 별빛 */
.hero-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.hero-stars .star {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(147,183,255,0.6) 40%, rgba(147,183,255,0) 70%);
    box-shadow: 0 0 10px 2px rgba(147,183,255,0.5), 0 0 20px 4px rgba(147,183,255,0.3);
    opacity: 0;
}
/* 선물 상자 파티클 */
.hero-prize-img-area {
    position: relative;
    width: clamp(280px,74.7vw,747px);
    max-width: 100%;
    margin: 0 auto;
}
.hero-prize-confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.hero-prize-confetti .confetti {
    position: absolute;
    opacity: 0;
}
.hero-prize-confetti .confetti:nth-child(1) {
    top: -20%;
    left: -5%;
    width: clamp(46px,9.3vw,93px);
    height: clamp(49px,9.3vw,99px);
    background: url(https://static.hankyung.com/resource/www/promotion/app-challenge/img/hero-box-conf1.png?v=2) no-repeat 50% 50%/contain;
}
.hero-prize-confetti .confetti:nth-child(2) {
    top: 2%;
    left: -15%;
    width: clamp(25px,5vw,50px);
    height: clamp(25px,5vw,50px);
    background: url(https://static.hankyung.com/resource/www/promotion/app-challenge/img/hero-box-conf4.png) no-repeat 50% 50%/contain;
}
.hero-prize-confetti .confetti:nth-child(3) {
    top: 20%;
    left: -8%;
    width: clamp(19px,3.9vw,39px);
    height: clamp(20px,4vw,40px);
    background: url(https://static.hankyung.com/resource/www/promotion/app-challenge/img/hero-box-conf2.png) no-repeat 50% 50%/contain;
}
.hero-prize-confetti .confetti:nth-child(4) {
    top: 37%;
    left: -2%;
    width: clamp(23px,4.6vw,46px);
    height: clamp(24px,4.9vw,49px);
    background: url(https://static.hankyung.com/resource/www/promotion/app-challenge/img/hero-box-conf3.png) no-repeat 50% 50%/contain;
}
.hero-prize-confetti .confetti:nth-child(5) {
    top: -11%;
    right: -10%;
    width: clamp(40px,8.1vw,81px);
    height: clamp(40px,8vw,80px);
    background: url(https://static.hankyung.com/resource/www/promotion/app-challenge/img/hero-box-conf5.png) no-repeat 50% 50%/contain;
}
.hero-prize-confetti .confetti:nth-child(6) {
    top: 15%;
    right: 10%;
    width: clamp(5px,1vw,10px);
    height: clamp(5px,1vw,10px);
    background: url(https://static.hankyung.com/resource/www/promotion/app-challenge/img/hero-box-conf6.png) no-repeat 50% 50%/contain;
}
.hero-prize-confetti .confetti:nth-child(7) {
    top: 22%;
    right: 11%;
    width: clamp(24px,4.8vw,48px);
    height: clamp(20px,4vw,40px);
    background: url(https://static.hankyung.com/resource/www/promotion/app-challenge/img/hero-box-conf7.png) no-repeat 50% 50%/contain;
}
.hero-prize-confetti .confetti:nth-child(8) {
    top: 24%;
    right: -5%;
    width: clamp(45px,9.1vw,91px);
    height: clamp(49px,9.8vw,98px);
    background: url(https://static.hankyung.com/resource/www/promotion/app-challenge/img/hero-box-conf8.png) no-repeat 50% 50%/contain;
}
/* 맥북에어 11 ~ 15 대응 */
@media screen and (min-width: 1000px) and (max-height: 1000px) {
    .hero > .layout-inner,
    .hero-prize-img-area {
        transform: scale(.8);
        transform-origin: center top;
    }
    .hero > .layout-inner {
        flex: 0 0 auto;
    }
    .hero {
        margin-bottom: -5%;
    }
    .hero-prize-box {
        margin-top: -5%;
    }
    .hero-prize-img-area {
        margin-top: 2%
    }
}
@media screen and (min-width: 1000px) and (max-height: 800px) {
    .hero > .layout-inner,
    .hero-prize-img-area {
        transform: scale(.75);
    }
    .hero {
        margin-bottom: -10%;
    }
    .hero-prize-box {
        margin-top: -10%;
    }
}
/* pc 1920*1280 대응 */
@media screen and (min-width: 1920px) and (min-height: 1280px) {
    .hero > .layout-inner {
        transform: scale(1.2);
    }
}

/* 참여방법 */
.event-guide {
    position: relative;
    background: #1E51B8;
}
.event-guide::before {
    content: '';
    position: absolute;
    left: 0;
    top: -10px;
    right: 0;
    height: 20px;
    background: #1E51B8;
    pointer-events: none;
    opacity: 0;
}
.event-guide.is-active::before {
    opacity: 1;
}
.event-guide .event-title-wrap {
    color: #fff;
}
.btn-update-app {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 48px;
    padding: 0 24px;
    border: 1px solid #fff;
    border-radius: 50rem;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}
.btn-update-app::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M.75 9.083 9.083.75m0 0H.75m8.333 0v8.333'/%3E%3C/svg%3E") no-repeat 50% 50% / 9px 9px;
}
.guide-box-block {
    display: grid;
    gap: 16px;
}
.guide-box {
    padding: clamp(24px,4vw,40px) clamp(20px,2.4vw,24px);
    border-radius: clamp(16px,2.4vw,24px);
    background: #fff;
    text-align: center;
}
.guide-box__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(30px,3.8vw,38px);
    margin-bottom: 10px;
    padding: 0 12px;
    border-radius: 50rem;
    background: var(--color-primary);
    color: #fff;
    font-size: clamp(15px,2vw,20px);
    font-weight: 700;
}
.guide-box__title {
    font-size: clamp(20px,2.4vw,24px);
    line-height: 1.3;
}
.guide-box__title-sub {
    font-weight: 400;
    font-size: clamp(18px,2.4vw,24px);
}
.guide-box__img {
    margin: clamp(16px,2.4vw,24px) 0;
    text-align: center;
}
.guide-box__img img {
    max-width: clamp(162px,30vw,300px);
}
.guide-box__desc {
    font-size: clamp(15px,1.6vw,16px);
    line-height: 1.45;
}
.guide-qr,
.guide-store {
    margin: clamp(16px,2.4vw,24px) auto;
    text-align: center;
}
.guide-qr img {
    width: 200px;
}
.guide-store {
    max-width: 320px;
    padding: 20px;
    border-radius: 16px;
    background: #F5F5F5;;
}
.guide-store__label {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
}
.guide-store__btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.guide-store__link {
    display: block;
    max-width: 142px;
    margin: 0 auto;
}
.guide-box--tip {
    background: #102B60;
    text-align: left;
    padding: clamp(24px,3vw,30px) 20px;
}
.guide-box--tip .guide-box__header {
    margin-bottom: 16px;
}
.guide-box__tip-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    color: #86DBFD;
    font-size: clamp(18px,2.2vw,22px);
}
.guide-box__tip-title::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath fill='%23f9c23c' d='m3.157 18.688.92-.247.246-.534 1.594.042 1.658-.444.373-.579 1.552.064 1.62-.434c1.124-.3 1.505-1.712.68-2.537L5.975 8.188c-.825-.825-2.237-.45-2.537.68l-.483 1.805.068 1.465-.551.34-.494 1.844.083 1.404-.54.303-.214.802c-.307 1.125.725 2.157 1.85 1.857'/%3E%3Cpath fill='%233f5fff' d='M4.875 15.658c-.925-.864-1.713-1.904-2.41-3.161l.487-1.815c.799 1.748 1.698 3.055 2.776 4.062 1.04.97 2.27 1.686 3.794 2.24l-1.956.523a11.2 11.2 0 0 1-2.691-1.85M2.679 17.429a7.4 7.4 0 0 1-1.16-1.396l.466-1.74c.44.932.931 1.647 1.548 2.223.614.575 1.38 1.037 2.398 1.429l-1.868.5a7.4 7.4 0 0 1-1.384-1.016'/%3E%3Cpath fill='%236d4534' d='M11.944 16.056c.875-.875-.213-3.375-2.425-5.587-2.213-2.213-4.707-3.3-5.582-2.425s.213 3.375 2.425 5.587c2.213 2.213 4.713 3.294 5.582 2.425'/%3E%3Cpath fill='%23f70a8d' d='M7.256 4.544a6.08 6.08 0 0 1 .45 4.681 6.06 6.06 0 0 1-2.381 3.25 11 11 0 0 1-.844-1.206A4.62 4.62 0 0 0 6.3 8.794a4.6 4.6 0 0 0-.337-3.556.73.73 0 0 1 .3-.994.73.73 0 0 1 .993.3M13.844 10.445a4.15 4.15 0 0 1 4.033-.631.655.655 0 1 0 .458-1.228 5.46 5.46 0 0 0-5.304.831.655.655 0 0 0 .813 1.028M3.756 6.056a.725.725 0 1 0 0-1.45.725.725 0 0 0 0 1.45M16.331 5.331a.725.725 0 1 1-1.45 0 .725.725 0 0 1 1.45 0'/%3E%3Cpath fill='%23f9c23c' d='M7.806 2.475a.6.6 0 1 1-1.2 0 .6.6 0 0 1 1.2 0M15.925 15.256a.606.606 0 1 1-1.212 0 .606.606 0 0 1 1.212 0'/%3E%3Cpath fill='%2300a6ed' d='M13.519 2.512a.6.6 0 0 0-.363-.15.62.62 0 0 0-.65.575c-.044.688-.519 1.932-.7 2.35q0 .005-.003.01l-.003.009q-.051.124-.108.244a1.76 1.76 0 0 0-.849-.575l-.018-.006A1.616 1.616 0 0 0 8.78 5.994c-.137.412-.106.85.088 1.237.193.388.525.675.937.813q.067.021.134.028.475.127.916.01a4 4 0 0 1-.062.255.613.613 0 0 0 .43.75.613.613 0 0 0 .75-.43q.213-.766.184-1.552a5.3 5.3 0 0 0 .78-1.343l.008-.022c.116-.28.724-1.751.785-2.734a.63.63 0 0 0-.212-.494m-3.05 3.619c.172.057.348.154.424.548-.308.285-.506.254-.68.196l-.064-.018a.38.38 0 0 1-.18-.182.36.36 0 0 1-.02-.3.396.396 0 0 1 .5-.25zM11.419 11.35a8.21 8.21 0 0 1 6.287.762c.356.207.481.65.288 1a.74.74 0 0 1-1.007.282 6.78 6.78 0 0 0-5.168-.625 6.73 6.73 0 0 0-3.575 2.425 13 13 0 0 1-1.163-.9 8.2 8.2 0 0 1 4.338-2.944M10.39 10.616a.719.719 0 1 1-1.438 0 .719.719 0 0 1 1.438 0'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
}
.guide-box__tip-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.guide-box__tip-item {
    display: flex;
    gap: 4px;
}
.guide-box__tip-item::before {
    content: '';
    flex: 0 0 auto;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M13.334 4 6 11.333 2.667 8'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
}
.guide-box__tip-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.guide-box__tip-summary {
    font-size: clamp(15px,1.8vw,18px);
    font-weight: 500;
    color: #fff;
    line-height: 1.45;
}
.guide-box__tip-desc {
    font-size: clamp(13px,1.6vw,16px);
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    line-height: 1.45;
}
.btn-event-join {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 56px;
    margin-top: 30px;
    border-radius: 50rem;
    background: #86DBFD;
    font-size: 18px;
    font-weight: 700;
}
.btn-event-join::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m7.5 15 5-5-5-5'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
}
/* 선물 */
.event-prize {
    position: relative;
    overflow: hidden;
    background: #F0F5FF;
}
.event-prize > .layout-inner {
    position: relative;
    z-index: 1;
}
/* PC 꽃가루 효과 */
.prize-confetti {
    display: none;
}
.prize-confetti .confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
}
.event-prize .event-deco {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 12px;
    padding: 8px 14px;
    border: 1px solid var(--color-primary);
    border-radius: 50rem;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
}
.event-prize .event-deco::before,
.event-prize .event-deco::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: var(--color-primary);
}
.prize-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.prize-item__badge {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border-radius: 100%;
    background: #1C61ED;
    color: #fff;
    font-size: 13px;
}
.prize-item__name {
    font-size: 16px;
    line-height: 1.45;
    text-align: center;
}
.prize-list__notice {
    margin-top: 30px;
    color: var(--color-gray-secondary);
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}
/* 공유하기 */
.section-stit {
    font-size: clamp(20px,2.8vw,28px);
    font-weight: 700;
    line-height: 1.45;
}
.share-btn {
    width: clamp(50px,6vw,60px);
    height: clamp(50px,6vw,60px);
    border-radius: 100%;
    background: #F4F4F6;
}
.share-btn i {
    display: inline-block;
    width: clamp(24px,2.8vw,28px);
    height: clamp(24px,2.8vw,28px);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
} 
.icon-share--link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23121212' d='M10.683 8.48a5.3 5.3 0 0 1 3.86 2.11.972.972 0 0 1-1.557 1.164 3.35 3.35 0 0 0-5.05-.361l-2.58 2.58a3.35 3.35 0 0 0 4.734 4.736l1.466-1.466a.972.972 0 0 1 1.375 1.375l-1.49 1.49a5.293 5.293 0 0 1-7.485-7.485l2.605-2.605.206-.195a5.3 5.3 0 0 1 3.916-1.342m5.672-6a5.294 5.294 0 0 1 3.76 8.97l-.011.012-2.592 2.593a5.295 5.295 0 0 1-7.982-.572.972.972 0 1 1 1.557-1.165 3.35 3.35 0 0 0 3.851 1.132c.45-.168.859-.43 1.198-.77l2.581-2.58a3.349 3.349 0 0 0-4.725-4.745l-1.486 1.477a.972.972 0 0 1-1.371-1.379l1.486-1.478.01-.01a5.3 5.3 0 0 1 3.724-1.485'/%3E%3C/svg%3E");
}
.icon-share--kakao {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23121212' d='M11.667.728C5.242.728 0 4.955 0 10.197c0 3.381 2.198 6.256 5.41 7.947L4.313 22.37c0 .169 0 .253.084.338.085.084.17.084.254.084s.169 0 .169-.084l4.734-3.297c.676.084 1.353.169 2.114.169 6.425 0 11.666-4.227 11.666-9.469 0-5.157-5.241-9.384-11.666-9.384'/%3E%3Cpath fill='%23f4f4f6' d='M7.271 7.238c.761 0 .761 1.183 0 1.267H6.088v4.143c0 .592-1.268.592-1.268 0V8.505H3.552c-.761 0-.761-1.267 0-1.267zm1.353.339c.254-.592 1.352-.423 1.521 0 .254.507 1.438 3.804 1.776 4.734.254.592-.93 1.1-1.184.423-.338-.845-.253-.846-.253-.846H8.201l-.253.846c-.253.592-1.353.084-1.1-.508.339-.846 1.438-3.973 1.776-4.65m10.736-.253c.254-.254 1.1.59.846.844-.423.423-1.606 1.692-1.606 1.692l1.691 2.282c.338.423-.677 1.184-1.1.677l-1.606-2.198-.338.338v1.69c0 .508-1.267.508-1.267 0V7.663c0-.508 1.267-.508 1.267 0v1.775zm-7.016.506c0-.761 1.352-.761 1.352 0v3.973h1.607c.591 0 .591 1.183 0 1.184H12.85c-.592 0-.507-.677-.507-.677zm-3.635 2.96h1.437L9.47 8.675z'/%3E%3C/svg%3E");
}
.icon-share--x {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23121212' d='M22.407 12.035c0-5.727-4.643-10.37-10.37-10.37-5.728 0-10.371 4.643-10.371 10.37 0 5.177 3.792 9.467 8.75 10.245v-7.247H7.783v-2.998h2.633V9.751c0-2.6 1.548-4.035 3.917-4.035 1.134 0 2.321.203 2.321.203V8.47h-1.307c-1.288 0-1.69.799-1.69 1.62v1.944h2.876l-.46 2.998h-2.416v7.247c4.958-.778 8.75-5.068 8.75-10.245'/%3E%3C/svg%3E");
}
.icon-share--facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23121212' fill-rule='evenodd' d='M9.468 12.946 2.06 21.4h3.282l5.67-6.49 4.996 6.491 6.399-.035-8.113-10.727 6.923-7.93-3.229-.037-5.229 5.96-4.474-5.95-6.619-.007zm9.064 6.509-1.657-.005L5.5 4.555h1.78z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.icon-share--threads {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23121212' d='M16.802 10.875a7 7 0 0 0-.284-.129c-.168-3.081-1.851-4.846-4.679-4.864h-.038c-1.691 0-3.097.722-3.963 2.036l1.555 1.066c.646-.98 1.661-1.19 2.409-1.19h.026c.93.006 1.633.277 2.088.804q.496.58.662 1.586a12 12 0 0 0-2.673-.129c-2.688.155-4.416 1.723-4.3 3.901.06 1.105.61 2.056 1.55 2.677.795.525 1.82.782 2.884.723 1.406-.077 2.509-.613 3.278-1.594.585-.745.954-1.71 1.117-2.926.67.404 1.167.937 1.441 1.576.466 1.087.494 2.874-.964 4.33-1.278 1.277-2.813 1.829-5.134 1.846-2.573-.02-4.52-.845-5.786-2.454-1.185-1.506-1.797-3.682-1.82-6.468.023-2.785.635-4.961 1.82-6.468 1.266-1.609 3.213-2.434 5.787-2.453 2.592.019 4.573.848 5.887 2.465.644.793 1.13 1.79 1.45 2.952l1.822-.486c-.388-1.43-.999-2.664-1.83-3.686C17.423 1.917 14.96.855 11.784.833h-.013C8.603.855 6.167 1.921 4.53 4.002c-1.457 1.851-2.208 4.427-2.233 7.657v.015c.025 3.23.776 5.806 2.233 7.657 1.637 2.08 4.073 3.147 7.241 3.169h.013c2.817-.02 4.802-.757 6.438-2.391 2.14-2.138 2.075-4.818 1.37-6.463-.506-1.18-1.47-2.138-2.79-2.77m-4.863 4.573c-1.179.066-2.403-.463-2.463-1.596-.045-.84.598-1.777 2.535-1.888q.333-.02.653-.02c.704 0 1.362.07 1.96.2-.223 2.788-1.532 3.24-2.686 3.303'/%3E%3C/svg%3E");
}
.icon-share--band {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23121212' d='M11.564 6.394 9.707 6.6V5.053A2.89 2.89 0 0 0 6.82 2.268 2.89 2.89 0 0 0 3.93 5.053v8.974a7.737 7.737 0 0 0 15.473-.103 7.943 7.943 0 0 0-7.84-7.53m0 14.235a6.5 6.5 0 0 1-6.499-6.499V5.26A1.754 1.754 0 0 1 6.82 3.505 1.857 1.857 0 0 1 8.573 5.26v8.768a3.094 3.094 0 0 0 5.282 2.291 3.094 3.094 0 0 0-2.188-5.282 2.9 2.9 0 0 0-1.857.619v-1.341a4 4 0 0 1 1.857-.413 4.23 4.23 0 1 1-4.23 4.23V5.155a.62.62 0 0 0-.618-.516.62.62 0 0 0-.619.516v9.387a5.364 5.364 0 0 0 5.364 4.951 5.364 5.364 0 0 0 0-10.728 5.4 5.4 0 0 0-1.857.31V7.838l1.857-.31a6.5 6.5 0 0 1 6.499 6.499 6.6 6.6 0 0 1-6.499 6.602m-1.96-6.602a1.857 1.857 0 1 1 1.857 1.857 1.753 1.753 0 0 1-1.857-1.857'/%3E%3C/svg%3E");
}

/* 유의사항 */
.event-notice {
    background: #F7F7F7;
}
.event-notice .event-title-wrap {
    margin: 0;
    text-align: left;
}
.event-notice .event-cont {
    margin-top: clamp(24px,3.2vw,32px);
}


/* ---------------------------------------------
   앱으로 이동 버튼
   --------------------------------------------- */
.btn-go-app {
    display: none;
}

@media (max-width: 1000px) {
    .only-pc {
        display: none;
    }
    .only-mo {
        display: block;
    }
    /* .hero-bg2 {
        background-image: url(https://static.hankyung.com/resource/www/promotion/app-challenge/img/hero-bg2-md.jpg);
    } */

    .guide-box__sub-item + .guide-box__sub-item {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #ddd;
    }
    .event-prize .event-cont {
        margin: 0 -20px;
    }
    .prize-list {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        overflow: hidden;
    }
    .prize-list__row {
        flex: 0 1 auto;
        display: flex;
        width: auto;
        animation: InfinitySlide 10s linear infinite paused;
        animation-play-state: running;
    }
    .prize-item {
        position: relative;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 156px;
        transform: translateZ(0);
    }
    .prize-item__img {
        width: 140px;
        margin: 0 auto;
    }
    @keyframes InfinitySlide {
        0% {
            transform: translateX(0)
        }

        to {
            transform: translateX(-100%)
        }
    }
    .event-share .event-cont {
        display: flex;
        justify-content: center;
    }
    .share-list {
        display: inline-grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto); 
        gap: 16px;
    }
    
    .event-notice .section-stit {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .event-notice .section-stit::after {
        content: '';
        flex-shrink: 0;
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%231a1a1a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
        transition: transform 0.3s;
    }
    .event-notice .section-stit.is-expanded::after {
        transform: rotate(180deg);
    }
    /* 앱으로 이동 버튼 */
    body:has(.btn-go-app) .ev-main {
        padding-bottom: 77px;
    }
    .btn-go-app {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 24px 8px;
        border-radius: 24px 24px 0 0;
        background: rgba(47, 59, 71,.9);
        backdrop-filter: blur(10px);
    }
    .btn-go-app::after {
        content: '';
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M.75 9.083 9.083.75m0 0H.75m8.333 0v8.333'/%3E%3C/svg%3E") no-repeat 50% 50% / 9px 9px;
    }
    .btn-go-app__text {
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        line-height: 1.45;
    }
}
/* @media (max-width: 720px) {
    .hero-bg2 {
        background-image: url(https://static.hankyung.com/resource/www/promotion/app-challenge/img/hero-bg2-sm.jpg);
    }

    .hero-prize-box {
        padding-bottom:65px;
    }
    .hero-prize-bg {
        height: 115px;
    }
} */
@media (min-width: 1000px) {
    .guide-box-block {
        grid-template-areas:
            "a a"
            "b b"
            "c d"
            "e e";
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
    .guide-box--step1 { grid-area: a; }
    .guide-box--step2 { grid-area: b; }
    .guide-box--step3 { grid-area: c; }
    .guide-box--step4 { grid-area: d; }
    .guide-box--tip { grid-area: e; }
    .guide-box__content {
        display: flex;
        justify-content: center;
        gap: 48px;
    }
    .guide-box__sub-item {
        position: relative;
    }
    .guide-box__sub-item:not(:only-child) {
        width: 400px;
    }
    .guide-box__sub-item:not(:only-child):not(:first-child)::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -24px;
        transform: translateY(-50%);
        width: 1px;
        height: 240px;
        background: #ddd;
    }

    .prize-list__row {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 24px;
        padding: 0 24px;
    }
    .prize-item {
        width: 140px;
    }
    .prize-list__row:nth-child(2) {
        display: none;
    }
    .prize-list__notice {
        margin-top: 48px;
    }
    /* PC 꽃가루 효과 */
    .prize-confetti {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 2;
        max-width: 1000px;
    }
    .prize-confetti .confetti {
        position: absolute;
    }
    .prize-confetti .confetti:nth-child(1) {
        top: 232px;
        left: 0;
        width: 22px;
        height: 29px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='36' fill='none'%3E%3Cpath fill='%2394e2ee' d='M.077 13.296 7.021 0c.709 10.524 8.73 20.729 12.557 23.48L13.33 35.446C4.022 30.586-.67 17.606.077 13.296'/%3E%3C/svg%3E") no-repeat 0 0/contain;
    }
    .prize-confetti .confetti:nth-child(2) {
        top: 340px;
        left: 55px;
        width: 26px;
        height: 15px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='15' fill='none'%3E%3Cpath fill='%23fda8c2' d='M25.5 9.5 21 0C17 5 5.833 7 0 6l4.5 8.5c10.4 2 18.333-2.5 21-5'/%3E%3C/svg%3E") no-repeat 0 0/contain;
    }
    .prize-confetti .confetti:nth-child(3) {
        top: 430px;
        left: 0;
        width: 35px;
        height: 24px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='30' fill='none'%3E%3Cpath stroke='%23eeee4d' stroke-width='6' d='M0 27h12V15h11.5V3h11'/%3E%3C/svg%3E") no-repeat 0 0/contain;
    }
    .prize-confetti .confetti:nth-child(4) {
        top: 488px;
        left: 50px;
        width: 10px;
        height: 10px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none'%3E%3Ccircle cx='5' cy='5' r='5' fill='%236de7d7'/%3E%3C/svg%3E") no-repeat 0 0/contain;
    }
    .prize-confetti .confetti:nth-child(5) {
        top: 570px;
        left: 34px;
        width: 17px;
        height: 16px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' fill='none'%3E%3Cpath fill='%238d9ffc' d='M17.015 0h-11c-5 4.5-6.167 13-6 15.5h10.5c0-5.5 3-12 6.5-15.5'/%3E%3C/svg%3E") no-repeat 0 0/contain;
    }
    .prize-confetti .confetti:nth-child(6) {
        top: 244px;
        right: 55px;
        width: 21px;
        height: 12px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='13' fill='none'%3E%3Cpath fill='%2385dfd3' d='m0 8.593 6-8c6-2 12.5 1.5 15 4l-6.5 7.5c-3.998-3.498-10.993-3.5-14.494-3.5z'/%3E%3C/svg%3E") no-repeat 0 0/contain;
    }
    .prize-confetti .confetti:nth-child(7) {
        top: 300px;
        right: 0;
        width: 17px;
        height: 24px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='23' fill='none'%3E%3Cpath fill='%23fda8c2' d='M16.298 11.18C13.865 5.08 7.326 1.507 3.853.038a.49.49 0 0 0-.658.31l-3.17 9.966c-.09.28.08.575.359.665 4.072 1.327 9.383 7.623 11.856 11.755.233.39.837.319.96-.118l3.114-11.121a.5.5 0 0 0-.016-.315'/%3E%3C/svg%3E") no-repeat 0 0/contain;
    }
    .prize-confetti .confetti:nth-child(8) {
        top: 438px;
        right: 73px;
        width: 24px;
        height: 29px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='29' fill='none'%3E%3Cpath fill='%238d9ffc' d='M23.97 15.55 22.597.445a.47.47 0 0 0-.82-.289c-2.55 2.698-11.32 11.49-20.952 13.565A1.034 1.034 0 0 0 0 14.723v12.52a.978.978 0 0 0 1.127.975c10.771-1.733 19.889-7.87 22.695-12.06a.93.93 0 0 0 .148-.608'/%3E%3C/svg%3E") no-repeat 0 0/contain;
    }
    .prize-confetti .confetti:nth-child(9) {
        top: 460px;
        right: 26px;
        width: 10px;
        height: 10px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23eeee4d'/%3E%3C/svg%3E") no-repeat 0 0/contain;
    }
    .prize-confetti .confetti:nth-child(10) {
        top: 574px;
        right: 15px;
        width: 20px;
        height: 29px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='29' fill='none'%3E%3Cpath stroke='%2394e2ee' stroke-width='6' d='M3 0v9h9.5v9h10v10.5'/%3E%3C/svg%3E") no-repeat 0 0/contain;
    }
    .share-list {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
    }
    .btn-go-app {
        display: none;
    }
}