/* ================================================================
   Disney RUN INCHEON 2026 — 통합 스타일
   sec01 + sec02 + sec03

   기준
   - 모든 스타일은 #disneyRun 기준으로 스코프 처리
   - 기존 CMS / Bootstrap / 외부 CSS 충돌 최소화
   - 섹션별 변수 관리
   - PC / 모바일 분리
   ================================================================ */


/* ================================================================
   COMMON
   ================================================================ */

/* 단독 랜딩 페이지 기준 reset */
html,
body {
    margin: 0;
    padding: 0;
}

#disneyRun {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', 'Noto Sans CJK KR', sans-serif;
    color: #191919;

    /* 공통 레이아웃 */
    --dr-inner-max: 1203px;
    --dr-side-gap: 40px;
}

#disneyRun * {
    box-sizing: border-box;
    /* CMS reset.css 가 요소마다 Pretendard 를 강제 → #disneyRun 안에선 Noto 로 되돌림.
       (손글씨 탭 .dr-eventtab 은 클래스 선택자라 우선순위로 Nanum Pen Script 유지) */
    font-family: 'Noto Sans KR', 'Noto Sans CJK KR', sans-serif;
}

#disneyRun img {
    max-width: 100%;
    height: auto;
}

#disneyRun .dr-section {
    position: relative;
}

#disneyRun .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ================================================================
   SECTION 01 — 비주얼 히어로
   ================================================================ */

/* ① 설정값 */
#disneyRun {
    --bg-image: url('/img/ready/sec01_visual.png');
    --bg-ratio: 2560 / 1200;

    --logo-left: 14%;
    --logo-top: 21%;
    --logo-width: 36%;

    --dday-cx: 33%;
    --dday-top: 59%;
    --dday-bg: #fed16d;
    --dday-color: #191919;
    --dday-outline: #ffe6ae;
    --dday-font: 2.3vw;
    --dday-gap: 0.25em;
    --dday-pad: 0.35em 0.9em;
    --dday-radius: 8px;
    --dday-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
}

/* ② 구조 */
#disneyRun .dr-sec01 {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: var(--bg-ratio);
    background: var(--bg-image) no-repeat center center;
    background-size: cover;
}

#disneyRun .dr-sec01 .dr-inner {
    position: absolute;
    inset: 0;
}

#disneyRun .dr-sec01 .dr-logo {
    position: absolute;
    left: var(--logo-left);
    top: var(--logo-top);
    width: var(--logo-width);
}

#disneyRun .dr-sec01 .dr-dday {
    position: absolute;
    left: var(--dday-cx);
    top: var(--dday-top);
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: var(--dday-gap);
    padding: var(--dday-pad);
    background: var(--dday-bg);
    border-radius: var(--dday-radius);
    color: var(--dday-color);
    font-weight: 900;
    font-size: var(--dday-font);
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--dday-shadow);
    text-shadow:
        -1px -1px 0 var(--dday-outline),
         1px -1px 0 var(--dday-outline),
        -1px  1px 0 var(--dday-outline),
         1px  1px 0 var(--dday-outline),
        -1px  0   0 var(--dday-outline),
         1px  0   0 var(--dday-outline),
         0   -1px 0 var(--dday-outline),
         0    1px 0 var(--dday-outline);
}

/* ③ 모바일 */
@media (max-width: 768px) {
    #disneyRun {
        --bg-image: url('/img/ready/sec01_visual_m.png');
        --bg-ratio: 780 / 1379;

        --logo-left: 8%;
        --logo-top: 8%;
        --logo-width: 84%;

        --dday-cx: 50%;
        --dday-top: 33%;
        --dday-font: 7vw;
        --dday-gap: 0.2em;
        --dday-pad: 0.4em 0.8em;
        --dday-radius: 10px;
        --dday-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    }
}


/* ================================================================
   SECTION 02 — Special Running Event
   ================================================================ */

/* ① 설정값 */
#disneyRun {
    --s2-bg: #ffffff;
    --s2-max: 1203px;
    --s2-text: #191919;
    --s2-blue: #3bb4e5;
    --s2-border: #3bb4e5;
    --s2-gray: #939393;
    --s2-desc: #5a5f63;
    --s2-card-bg: #f4f5f6;

    --s2-fs-display: 62px;     /* Bootstrap 의 html{font-size:10px} 영향 차단 위해 px 고정 */
    --s2-fs-heading: 44px;
    --s2-fs-subhead: 32px;
    --s2-fs-title: 30px;
    --s2-fs-body: 22px;
}

/* ② 구조 */
#disneyRun .dr-sec02 {
    background: var(--s2-bg);
}

#disneyRun .dr-sec02-inner {
    position: relative;
    width: min(var(--s2-max), calc(100% - var(--dr-side-gap)));
    margin: 0 auto;
}

#disneyRun .dr-sec02-content {
    position: relative;
    padding: 150px 0 0;
    text-align: center;
}

#disneyRun .dr-sec02 .dr-tag {
    display: inline-block;
    background: var(--s2-text);
    color: #ffffff;
    font-size: var(--s2-fs-title);
    font-weight: 900;
    line-height: 1.2;
    padding: 5px 10px;
}

#disneyRun .dr-sec02 .sm-p {
    font-size: 30px;
}
#disneyRun .dr-sec02 .sm-p2 {
    font-size: 36px;
}


#disneyRun .dr-sec02 .dr-title {
    margin: 18px 0 0;
    font-size: var(--s2-fs-display);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

#disneyRun .dr-sec02 .dr-eventbox {
    position: relative;
    margin-top: 96px;
    border: 4px solid var(--s2-border);
    border-radius: 28px;
    padding: 64px 36px;
}

#disneyRun .dr-sec02 .dr-eventtab {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    background: var(--s2-blue);
    color: #ffffff;
    font-family: 'Nanum Pen Script', cursive;
    font-weight: 700;
    font-style: italic;
    font-size: var(--s2-fs-heading);
    line-height: 1.1;
    letter-spacing: 1px;
    padding: 6px 32px;
    border-radius: 999px;
    white-space: nowrap;
}

#disneyRun .dr-sec02 .dr-event-title {
    margin: 0;
    font-size: var(--s2-fs-heading);
    font-weight: 900;
    line-height: 1.25;
}

#disneyRun .dr-sec02 .dr-event-desc {
    margin: 30px 0 0;
    font-size: var(--s2-fs-body);
    line-height: 1.6;
    color: var(--s2-desc);
    word-break: keep-all;
}

#disneyRun .dr-sec02 .dr-accent {
    color: var(--s2-blue);
    font-weight: 700;
}

#disneyRun .dr-sec02 .dr-cols {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

#disneyRun .dr-sec02 .dr-col {
    min-width: 0;
}

#disneyRun .dr-sec02 .dr-round {
    margin-bottom: 22px;
}

#disneyRun .dr-sec02 .dr-round-date {
    display: block;
    margin-top: 30px;
    font-size: var(--s2-fs-title);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -1.8px;
    color: var(--s2-gray);
}

#disneyRun .dr-sec02 .dr-round-label {
    position: relative;
    z-index: 0;
    display: inline-block;
    padding-bottom: 16px;
    font-size: var(--s2-fs-subhead);
    font-weight: 900;
    line-height: 1.2;
    color: var(--s2-gray);
}

#disneyRun .dr-sec02 .dr-underline {
    position: absolute;
    left: 0;
    bottom: 16px;
    width: 100%;
    z-index: -1;
    pointer-events: none;
}

#disneyRun .dr-sec02 .dr-round.is-active .dr-round-date,
#disneyRun .dr-sec02 .dr-round.is-active .dr-round-label {
    color: var(--s2-blue);
}

#disneyRun .dr-sec02 .dr-card {
    background: var(--s2-card-bg);
    border-radius: 20px;
    padding: 36px 0;
    text-align: center;
}

#disneyRun .dr-sec02 .dr-card-no {
    display: inline-block;
    background: var(--s2-blue);
    color: #ffffff;
    font-size: var(--s2-fs-body);
    font-weight: 700;
    line-height: 1.2;
    padding: 2px 24px;
    border-radius: 30px;
}

#disneyRun .dr-sec02 .dr-card-title {
    margin-top: 10px;
    font-size: var(--s2-fs-body);
    font-weight: 700;
    line-height: 1.3;
}

#disneyRun .dr-sec02 .dr-card-month {
    margin-top: 6px;
    font-size: var(--s2-fs-body);
    line-height: 1.3;
    color: var(--s2-desc);
}

#disneyRun .dr-sec02 .dr-card-img {
    margin: 6px auto 0;
    width: 100%;
}

/* ③ 모바일 */
@media (max-width: 768px) {
    #disneyRun {
        --dr-side-gap: 36px;

        --s2-fs-display: 30px;
        --s2-fs-heading: 24px;
        --s2-fs-subhead: 20px;
        --s2-fs-title: 18px;
        --s2-fs-body: 16px;
    }

    #disneyRun .dr-sec02-content {
        padding: 64px 0;
    }

    #disneyRun .dr-sec02 .dr-eventbox {
        margin-top: 60px;
        padding: 56px 18px 40px;
        border-radius: 20px;
    }

    #disneyRun .dr-sec02 .dr-cols {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #disneyRun .dr-sec02 .dr-card-img {
        width: 90%;
    }
    #disneyRun .dr-sec02 .dr-card{
        margin-top: -16px;
    }
    #disneyRun .dr-sec02 .sm-p {
    font-size: 14px;
}
#disneyRun .dr-sec02 .sm-p2 {
    font-size: 16px;
}


}


/* ================================================================
   SECTION 03 — Main Running Event
   ================================================================ */

/* ① 설정값 */
#disneyRun {
    --s3-bg: #ffffff;
    --s3-max: 1203px;
    --s3-text: #191919;
    --s3-pink: #fe9bb1;
    --s3-border: #ffc4d3;
    --s3-sub: #5a5f63;
    --s3-card-bg: #f4f5f6;

    --s3-fs-display: 72px;     /* Bootstrap 의 html{font-size:10px} 영향 차단 위해 px 고정 */
    --s3-fs-heading: 44px;
    --s3-fs-subhead: 36px;
    --s3-fs-title: 24px;
    --s3-fs-body: 22px;
}

/* ② 구조 */
#disneyRun .dr-sec03 {
    background: var(--s3-bg);
}

#disneyRun .dr-sec03-inner {
    position: relative;
    width: min(var(--s3-max), calc(100% - var(--dr-side-gap)));
    margin: 0 auto;
}

#disneyRun .dr-sec03-content {
    position: relative;
    padding: 150px 0 120px;
    text-align: center;
}

#disneyRun .dr-sec03 .dr-eventbox {
    position: relative;
    border: 4px solid var(--s3-border);
    border-radius: 28px;
    padding: 64px 36px;
}

#disneyRun .dr-sec03 .dr-eventtab {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    background: var(--s3-pink);
    color: #ffffff;
    font-family: 'Nanum Pen Script', cursive;
    font-weight: 700;
    font-style: italic;
    font-size: var(--s3-fs-heading);
    line-height: 1.1;
    letter-spacing: 1px;
    padding: 6px 32px;
    border-radius: 999px;
    white-space: nowrap;
}

#disneyRun .dr-sec03 .dr-event-title {
    margin: 0;
    font-size: var(--s3-fs-heading);
    font-weight: 900;
    line-height: 1.25;
}

#disneyRun .dr-sec03 .dr-event-sub {
    margin: 30px 0 0;
    font-size: var(--s3-fs-title);
    font-weight: 500;
    line-height: 1.4;
    color: var(--s3-sub);
    word-break: keep-all;
}

#disneyRun .dr-sec03 .dr-ticket {
    margin: 20px 0 0;
    font-size: var(--s3-fs-subhead);
    font-weight: 900;
    line-height: 1.25;
    color: var(--s3-pink);
}

#disneyRun .dr-sec03 .dr-ul {
    position: relative;
    z-index: 0;
    display: inline-block;
}

#disneyRun .dr-sec03 .dr-underline {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
    pointer-events: none;
}

#disneyRun .dr-sec03 .dr-cols {
    margin-top: 34px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 480px));
    justify-content: center;
    gap: 30px;
}

#disneyRun .dr-sec03 .dr-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: var(--s3-card-bg);
}

#disneyRun .dr-sec03 .dr-card-dist {
    position: absolute;
    top: 15%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: var(--s3-fs-display);
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    color: #2b2b2b;
    letter-spacing: -1px;
    text-shadow: 2px 3px 0 rgba(0, 0, 0, 0.08);
}

#disneyRun .dr-sec03 .dr-card-img {
    width: 100%;
}

/* ③ 모바일 */
@media (max-width: 768px) {
    #disneyRun {
        --s3-fs-display: 62px;
        --s3-fs-heading: 24px;
        --s3-fs-subhead: 20px;
        --s3-fs-title: 16px;
        --s3-fs-body: 16px;
    }

    #disneyRun .dr-sec03-content {
        padding: 64px 0;
    }

    #disneyRun .dr-sec03 .dr-eventbox {
        padding: 56px 18px 40px;
        border-radius: 20px;
    }

    #disneyRun .dr-sec03 .dr-cols {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}


/* ================================================================
   SMALL MOBILE
   ================================================================ */

@media (max-width: 480px) {
    #disneyRun {
        --dr-side-gap: 28px;
    }

    #disneyRun .dr-sec02 .dr-eventtab,
    #disneyRun .dr-sec03 .dr-eventtab {
        max-width: calc(100vw - 48px);
        padding: 6px 20px;
        font-size: 22px;
        text-align: center;
    }

    #disneyRun .dr-sec02 .dr-title {
        line-height: 1.25;
    }

    #disneyRun .dr-sec02 .dr-event-desc {
        word-break: keep-all;
    }

    #disneyRun .dr-sec03 .dr-event-sub {
        word-break: keep-all;
        line-height: 1.5;
    }
}