@charset "utf-8";
/* 2026 우린 함께니까! 댄스 챌린지 */

@font-face {
    font-family: "Pretendard";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/dance/Pretendard-Regular.subset.woff2") format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/dance/Pretendard-Medium.subset.woff2") format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/dance/Pretendard-SemiBold.subset.woff2") format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/dance/Pretendard-Bold.subset.woff2") format("woff2");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/dance/Pretendard-ExtraBold.subset.woff2") format("woff2");
}

/* 기본 */
.dance {
    --dance-orange: #ff6500;
    --dance-orange-deep: #ff6b00;
    --dance-line: #292929;
    --dance-text: #111;
    --dance-sub: #222;
    max-width: 927px;
    margin: 0 auto;
    padding-bottom: 44px;
    background: #ffca1c url("../images/dance/pattern.png") 2px 1px repeat;
    color: var(--dance-text);
    font-family: "Pretendard", "Malgun Gothic", "맑은 고딕", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.02em;
    text-align: left;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.dance *,
.dance *::before,
.dance *::after {
    box-sizing: border-box;
    /* 사이트 공통 * { font-family }, span { line-height } 덮어쓰기 */
    font-family: inherit;
    line-height: inherit;
}
/* 클래스 규칙이 항상 이기도록 우선순위 0 */
:where(.dance) :where(h3, h4, h5, p, ul, ol, li, dl, dt, dd) {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    list-style: none;
}
.dance img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: top;
}
.dance a {
    text-decoration: none;
}
.dance a:not([class]) {
    color: inherit;
}
.dance a:focus-visible {
    outline: 3px solid #1a73e8;
    outline-offset: 3px;
}
.dance strong {
    font-weight: 800;
}
.dance-blind {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.dance-orange {
    color: var(--dance-orange);
}
/* 형광펜 밑줄 */
.dance-mark {
    margin-left: -9px;
    padding: 0 10px 0 9px;
    background: linear-gradient(transparent 38%, rgba(255, 192, 61, 0.4) 38%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
/* 노란 형광펜 (전체 높이) */
.dance-mark-full {
    padding: 2px 6px;
    background: rgba(255, 225, 61, 0.4);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* 상단 비주얼 */
.dance-hero {
    position: relative;
    padding: 57px 0 72px;
    text-align: center;
}
.dance-hero-badge {
    display: inline-block;
    min-width: 397px;
    padding: 0 24px;
    border: 2px solid var(--dance-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 5px 0 -2px var(--dance-orange-deep), 0 5px 0 var(--dance-line);
    font-size: 24px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: -0.025em;
    color: #000;
}
.dance-hero-title {
    margin-top: 23px;
}
.dance-hero-stage {
    position: relative;
    margin-top: 32px;
}
.dance-hero-logo img {
    width: 308px;
}
.dance-hero-date {
    display: inline-block;
    margin-top: 21px;
    padding: 0 52px;
    border-radius: 28px;
    background: #0d0d0d;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: -0.01em;
}
.dance-hero-deco {
    position: absolute;
    top: 0;
}
.dance-hero-deco.is-left {
    left: 7.44%;
    width: 17.15%;
}
.dance-hero-deco.is-right {
    top: 6px;
    right: 5.93%;
    width: 19.74%;
}
.dance-hero-survey {
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 157px;
    height: 87px;
    border: 2px solid var(--dance-line);
    border-radius: 20px;
    background: var(--dance-orange-deep);
    box-shadow: 0 6px 0 -2px #ffca1c, 0 6px 0 var(--dance-line);
    color: #000;
    font-size: 24px;
    font-weight: 800;
    line-height: 27px;
    letter-spacing: -0.025em;
    transition: transform 0.2s, box-shadow 0.2s;
}
.dance-hero-survey:hover,
.dance-hero-survey:focus-visible {
    transform: translateY(3px);
    box-shadow: 0 3px 0 -2px #ffca1c, 0 3px 0 var(--dance-line);
}

/* 흰색 본문 카드 */
.dance-card {
    position: relative;
    margin: 0 40px;
    padding: 0 40px 41px;
    border: 2px solid var(--dance-line);
    border-radius: 60px;
    background: #fff;
    overflow: hidden;
}
.dance-card > * {
    position: relative;
}
.dance-divider {
    display: block;
    width: 203px;
    height: 22px;
    margin: 58px auto 0;
    border: 0;
    background: url("../images/dance/divider.png") no-repeat 0 0 / 100% 100%;
}
/* 섹션 타이틀 (말풍선 박스) */
.dance-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 594px;
    max-width: 100%;
    height: 65px;
    margin: 50px auto 0;
    padding: 0 20px;
    border: 2px solid var(--dance-line);
    border-radius: 33px;
    background: #fff;
    box-shadow: 0 6px 0 -2px var(--dance-orange-deep), 0 6px 0 var(--dance-line);
}

/* 섹션1: 소개 */
.dance-intro {
    padding-top: 63px;
    text-align: center;
}
.dance-card > .dance-intro-bg {
    position: absolute;
    top: 100px;
    left: 6.4%;
    width: 87.3%;
    padding-top: 87.3%;
    border-radius: 50%;
    background: #fffde1;
}
.dance-intro-text {
    font-size: 26px;
    line-height: 39px;
    letter-spacing: -0.025em;
}
.dance-intro-text:nth-of-type(1) {
    margin-top: 47px;
}
.dance-intro-text:nth-of-type(2) {
    margin-top: 24px;
}
.dance-intro-text:nth-of-type(3) {
    margin-top: 22px;
}
.dance-intro-slogan {
    margin-top: 43px;
}
.dance-intro-deco {
    position: absolute;
}
.dance-intro-deco.is-1 {
    top: 285px;
    left: -15px;
    width: 139px;
}
.dance-intro-deco.is-2 {
    top: 274px;
    left: 638px;
    width: 132px;
}
.dance-intro-deco.is-3 {
    top: 524px;
    left: 13px;
    width: 179px;
}
.dance-intro-deco.is-4 {
    top: 519px;
    left: 537px;
    width: 225px;
}

/* 섹션2: 참여방법 */
.dance-join-row {
    display: flex;
    padding-left: 2px;
}
.dance-join-row + .dance-join-row {
    margin-top: 30px;
}
.dance-join .dance-title + .dance-join-row {
    margin-top: 33px;
}
.dance-join-label {
    flex: 0 0 177px;
    padding-top: 8px;
}
.dance-join-body {
    flex: 1;
    min-width: 0;
}
.dance-join-head {
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.025em;
}
.dance-join-head .dance-num {
    font-weight: 400;
}
.dance-join-text {
    margin-top: 11px;
    color: var(--dance-sub);
    font-size: 20px;
    line-height: 30px;
}
.dance-steps > li + li {
    margin-top: 19px;
}
.dance-mail {
    margin-top: 8px;
    font-size: 24px;
    font-weight: 700;
    line-height: 30px;
    color: var(--dance-orange);
}
.dance-mail a:hover {
    text-decoration: underline;
}
.dance-ref {
    margin-top: 15px;
    color: var(--dance-sub);
    font-size: 18px;
    font-weight: 400;
    line-height: 23.5px;
}
.dance-mail + .dance-ref {
    margin-top: 13px;
}
.dance-ref > li {
    padding-left: 1.15em;
    text-indent: -1.15em;
}
.dance-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    width: 443px;
    max-width: 100%;
    height: 56px;
    margin-top: 41px;
    margin-left: -2px;
    border-radius: 28px;
    background: var(--dance-orange-deep);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    transition: background-color 0.2s;
}
.dance-download:hover,
.dance-download:focus-visible {
    background: #e65a00;
}
.dance-download img {
    width: 25px;
}
.dance-join + .dance-divider {
    margin-top: 47px;
}

/* 섹션3: 안무 소개 */
.dance-moves {
    text-align: center;
}
.dance-moves-catch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-top: 33px;
    color: var(--dance-orange);
    font-size: 26px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.025em;
}
.dance-moves-catch img {
    width: 27px;
}
.dance-moves-text {
    margin-top: 10px;
    font-size: 22px;
    line-height: 33px;
}
.dance-moves-text + .dance-moves-text {
    margin-top: 8px;
}
.dance-video-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 27px;
    margin: 37px -1px 0;
    text-align: left;
}
.dance-video-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24px;
    font-weight: 800;
    line-height: 32px;
    letter-spacing: -0.025em;
}
.dance-video-num {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--dance-orange-deep);
    text-align: center;
}
.dance-video-thumb {
    position: relative;
    display: block;
    margin-top: 12px;
    border: 2px solid var(--dance-line);
    border-radius: 20px;
    box-shadow: 0 8px 0 -2px var(--dance-orange-deep), 0 8px 0 var(--dance-line);
}
.dance-video-thumb > img {
    display: block;
    width: 100%;
    aspect-ratio: 369 / 209;
    border-radius: 18px;
    object-fit: cover;
}
.dance-video-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s;
}
.dance-video-thumb:hover::after,
.dance-video-thumb:focus-visible::after {
    background: rgba(0, 0, 0, 0.05);
}
.dance-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    background: url("../images/dance/icon-play.png") no-repeat 0 0 / 100% 100%;
    opacity: 0.9;
    transition: transform 0.2s;
}
.dance-video-thumb:hover .dance-video-play,
.dance-video-thumb:focus-visible .dance-video-play {
    transform: scale(1.1);
}
.dance-video-desc {
    margin-top: 16px;
    padding-left: 12px;
    font-size: 20px;
    line-height: 30px;
}
.dance-video-level {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    padding-left: 13px;
    color: var(--dance-sub);
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
}
.dance-stars {
    display: inline-flex;
    gap: 5px;
}
.dance-stars img {
    width: 19px;
}
/* 5번 안무: 2열 중앙 배치 + 아이키 뱃지 */
.dance-video-special {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 27px) / 2);
}
.dance-video-media {
    position: relative;
}
.dance-video-badge {
    position: absolute;
    top: 50%;
    left: calc(100% + 24px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 156px;
    height: 156px;
    margin-top: -78px;
    background: #ffe48f;
    clip-path: polygon(50% 0, 65.3% 13%, 85.4% 14.6%, 87% 34.7%, 100% 50%, 87% 65.3%, 85.4% 85.4%, 65.3% 87%, 50% 100%, 34.7% 87%, 14.6% 85.4%, 13% 65.3%, 0 50%, 13% 34.7%, 14.6% 14.6%, 34.7% 13%);
    color: var(--dance-text);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.03em;
    text-align: center;
}
.dance-moves + .dance-divider {
    margin-top: 47px;
}

/* 섹션4: 경품 & 우수작 */
.dance-prize-lead {
    margin-top: 27px;
    font-size: 22px;
    line-height: 34px;
    text-align: center;
}
.dance-prize-lead img {
    width: 30px;
    margin: -4px 0 0 2px;
    vertical-align: middle;
}
.dance-prize-box {
    margin-top: 25px;
    padding: 32px 30px 27px;
    border: 2px solid var(--dance-line);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 6px 0 -2px var(--dance-orange-deep), 0 6px 0 var(--dance-line);
}
.dance-prize-item {
    display: flex;
    align-items: center;
    gap: 28px;
}
.dance-prize-item + .dance-prize-item {
    margin-top: 13px;
}
.dance-prize-item dt {
    flex: 0 0 120px;
}
.dance-prize-item dd {
    font-size: 20px;
    line-height: 39px;
    letter-spacing: -0.025em;
}
.dance-prize-item dd strong {
    margin-right: 8px;
    font-size: 26px;
    font-weight: 700;
}
.dance-prize-note {
    margin-top: 4px;
    padding-left: 147px;
    color: var(--dance-sub);
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}
.dance-prize-note > span {
    display: block;
    padding-left: 17px;
    text-indent: -17px;
}
.dance-criteria {
    margin-top: 37px;
    padding-left: 35px;
}
.dance-criteria h5,
.dance-notice-title,
.dance-contact-title {
    line-height: 0;
}
.dance-criteria-text {
    margin-top: 12px;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}
.dance-criteria-text strong {
    font-weight: 700;
}
.dance-criteria-list {
    margin-top: 11px;
    font-size: 18px;
    font-weight: 400;
    line-height: 33px;
}
.dance-criteria-list > div {
    display: flex;
}
.dance-criteria-list dt {
    position: relative;
    flex: 0 0 143px;
    padding-left: 18px;
    font-weight: 700;
}
.dance-criteria-list dt::before {
    content: "◆";
    position: absolute;
    left: 0;
    color: var(--dance-orange);
    font-size: 10px;
}
.dance-prize + .dance-divider {
    margin-top: 44px;
}

/* 섹션5: 유의사항, 문의처 */
.dance-notice {
    padding-left: 3px;
}
.dance-notice-title {
    margin-top: 51px;
}
.dance-notice-list {
    margin-top: 10px;
    color: var(--dance-sub);
    font-size: 17px;
    font-weight: 400;
    line-height: 29.4px;
}
.dance-notice-list > li {
    position: relative;
    padding-left: 0.65em;
}
.dance-notice-list > li::before {
    content: "·";
    position: absolute;
    left: 0;
}
.dance-contact-title {
    margin-top: 41px;
}
.dance-contact {
    margin-top: 10px;
    color: var(--dance-sub);
    font-size: 17px;
    font-weight: 400;
    line-height: 29.4px;
}
.dance-contact-info {
    display: flex;
    flex-wrap: wrap;
    column-gap: 26px;
}
.dance-contact-info strong {
    margin-right: 9px;
    font-weight: 700;
}
.dance-contact-info a:hover {
    text-decoration: underline;
}
.dance-contact-guide {
    margin-top: 7px;
    color: var(--dance-orange);
    font-size: 17px;
    font-weight: 600;
    line-height: 29.4px;
}

/* 반응형 */
@media screen and (max-width: 960px) {
    .dance-intro-deco.is-1 {
        left: -3%;
    }
    .dance-intro-deco.is-2 {
        left: auto;
        right: -3%;
    }
    .dance-intro-deco.is-3 {
        left: -2%;
    }
    .dance-intro-deco.is-4 {
        left: auto;
        right: -5%;
    }
}

@media screen and (max-width: 768px) {
    .dance {
        padding-bottom: 24px;
        font-size: 16px;
    }
    .dance-hero {
        padding: 28px 16px 40px;
    }
    .dance-hero-badge {
        min-width: 0;
        padding: 0 18px;
        border-radius: 20px;
        font-size: 16px;
        line-height: 36px;
    }
    .dance-hero-title {
        margin-top: 16px;
    }
    .dance-hero-stage {
        margin-top: 18px;
    }
    .dance-hero-logo img {
        width: 36%;
    }
    .dance-hero-date {
        margin-top: 14px;
        padding: 0 24px;
        font-size: 18px;
        line-height: 40px;
    }
    .dance-hero-survey {
        position: static;
        width: auto;
        height: auto;
        margin: 26px auto 0;
        padding: 10px 26px;
        display: inline-flex;
        border-radius: 16px;
        font-size: 17px;
        line-height: 22px;
    }
    .dance-hero-survey br {
        display: none;
    }
    .dance-card {
        margin: 0 16px;
        padding: 0 20px 32px;
        border-radius: 32px;
    }
    .dance-divider {
        width: 150px;
        height: 16px;
        margin-top: 40px;
    }
    .dance-title {
        height: 54px;
        margin-top: 36px;
    }
    .dance-title img {
        max-height: 26px;
        width: auto;
    }
    .dance-intro {
        padding-top: 36px;
    }
    .dance-intro-text {
        font-size: 17px;
        line-height: 1.6;
    }
    .dance-intro-text:nth-of-type(1) {
        margin-top: 24px;
    }
    .dance-intro-text:nth-of-type(2),
    .dance-intro-text:nth-of-type(3) {
        margin-top: 14px;
    }
    .dance-intro-slogan {
        margin-top: 28px;
    }
    .dance-intro-deco {
        display: none;
    }
    .dance-card > .dance-intro-bg {
        top: 60px;
        left: -10%;
        width: 120%;
        padding-top: 120%;
    }
    .dance-join-row {
        display: block;
        padding-left: 0;
    }
    .dance-join .dance-title + .dance-join-row,
    .dance-join-row + .dance-join-row {
        margin-top: 28px;
    }
    .dance-join-label {
        padding: 0 0 12px;
    }
    .dance-join-label img {
        height: 22px;
        width: auto;
    }
    .dance-join-head {
        font-size: 19px;
        line-height: 28px;
    }
    .dance-join-text,
    .dance-mail {
        font-size: 16px;
        line-height: 1.6;
    }
    .dance-mail {
        font-size: 18px;
    }
    .dance-ref {
        font-size: 15px;
        line-height: 1.55;
    }
    .dance-download {
        margin: 28px auto 0;
        height: 50px;
        font-size: 19px;
    }
    .dance-join + .dance-divider,
    .dance-moves + .dance-divider,
    .dance-prize + .dance-divider {
        margin-top: 40px;
    }
    .dance-moves-catch {
        gap: 8px;
        margin-top: 24px;
        font-size: 18px;
        line-height: 26px;
    }
    .dance-moves-catch img {
        width: 22px;
    }
    .dance-moves-text {
        font-size: 16px;
        line-height: 1.6;
    }
    .dance-video-list {
        gap: 28px 16px;
        margin: 28px 0 0;
    }
    .dance-video-name {
        gap: 8px;
        font-size: 20px;
        line-height: 26px;
    }
    .dance-video-num {
        width: 26px;
        height: 26px;
        border-radius: 5px;
    }
    .dance-video-play {
        width: 44px;
        height: 44px;
        margin: -22px 0 0 -22px;
    }
    .dance-video-desc {
        padding-left: 4px;
        font-size: 16px;
        line-height: 1.5;
    }
    .dance-video-level {
        padding-left: 4px;
        font-size: 15px;
    }
    .dance-stars img {
        width: 16px;
    }
    .dance-video-special {
        width: calc((100% - 16px) / 2);
    }
    .dance-video-badge {
        left: calc(100% + 12px);
        width: 112px;
        height: 112px;
        margin-top: -56px;
        font-size: 15px;
    }
    .dance-prize-lead {
        margin-top: 22px;
        font-size: 16px;
        line-height: 1.6;
    }
    .dance-prize-lead img {
        width: 24px;
    }
    .dance-prize-box {
        padding: 24px 20px;
        border-radius: 24px;
    }
    .dance-prize-item {
        display: block;
    }
    .dance-prize-item + .dance-prize-item {
        margin-top: 20px;
    }
    .dance-prize-item dt img {
        width: 96px;
    }
    .dance-prize-item dd {
        margin-top: 8px;
        font-size: 15px;
        line-height: 1.6;
    }
    .dance-prize-item dd strong {
        display: table;
        margin-bottom: 2px;
        font-size: 19px;
    }
    .dance-br-pc {
        display: none;
    }
    .dance-prize-note {
        margin-top: 16px;
        padding-left: 0;
        font-size: 14px;
        line-height: 1.6;
    }
    .dance-criteria {
        margin-top: 32px;
        padding-left: 0;
    }
    .dance-criteria-text {
        font-size: 16px;
        line-height: 1.6;
    }
    .dance-criteria-list {
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.6;
    }
    .dance-criteria-list > div {
        display: block;
    }
    .dance-criteria-list > div + div {
        margin-top: 8px;
    }
    .dance-criteria-list dd {
        padding-left: 18px;
    }
    .dance-notice {
        padding-left: 0;
    }
    .dance-notice-title,
    .dance-contact-title {
        margin-top: 36px;
    }
    .dance-notice-list,
    .dance-contact,
    .dance-contact-guide {
        font-size: 15px;
        line-height: 1.65;
    }
    .dance-notice-list > li + li {
        margin-top: 4px;
    }
    .dance-contact-info {
        display: block;
    }
}

@media screen and (max-width: 540px) {
    .dance-hero-deco {
        display: none;
    }
    .dance-video-list {
        grid-template-columns: 1fr;
    }
    .dance-video-special {
        width: 100%;
    }
    .dance-video-badge {
        top: -14px;
        right: -8px;
        left: auto;
        width: 100px;
        height: 100px;
        margin-top: 0;
        font-size: 14px;
    }
    .dance-prize-note br,
    .dance-criteria-text br {
        display: none;
    }
    .dance-moves-catch {
        font-size: 16px;
    }
}