.footprints-page{
    max-width:1200px;
    margin:0 auto;
    padding:42px 24px 80px;
    color:#1c2b3a;
}

.footprints-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:28px;
    align-items:start;
}

.footprints-main{
    min-width:0;
}

.footprints-intro{
    position:relative;
    padding:10px 0 24px;
}

.footprints-kicker{
    display:inline-block;
    color:#2c84d7;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.footprints-intro h1{
    margin:12px 0 6px;
    font-size:42px;
    line-height:1.1;
    letter-spacing:-.04em;
    color:#1b2a3b;
}

.footprints-intro p{
    margin:0;
    color:#6d7d8d;
    font-size:15px;
    line-height:1.6;
}

.footprints-trail{
    display:flex;
    gap:16px;
    transform:rotate(-12deg);
}

.footprints-trail--intro{
    position:absolute;
    right:7%;
    bottom:8px;
}

.footprints-trail i{
    display:block;
    width:13px;
    height:20px;
    border-radius:55% 45% 50% 45%;
    background:#cfeafc;
    transform:rotate(25deg);
}

.footprints-trail i:nth-child(2){
    margin-top:10px;
    transform:rotate(-8deg);
}

.footprints-trail i:nth-child(3){
    margin-top:2px;
    transform:rotate(25deg);
}


/* =========================
   발자취 카테고리 필터
========================= */

.footprints-filters{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:10px;
    margin:10px 0 22px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}

.footprints-filters::-webkit-scrollbar{
    display:none;
}

.footprints-filter{
    flex:0 0 auto;
    white-space:nowrap;
    padding:9px 18px;
    border:1px solid #dfeaf6;
    border-radius:999px;
    background:#fff;
    color:#4d5d73;
    font:inherit;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:all .2s ease;
}

.footprints-filter:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 16px rgba(31,90,160,.08);
}

.footprints-filter.is-active{
    background:#0d69df;
    border-color:#0d69df;
    color:#fff;
    box-shadow:0 8px 18px rgba(13,105,223,.18);
}


/* =========================
   연도 아코디언
========================= */

.footprints-accordion{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.footprints-year{
    border:1px solid #dfeaf7;
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 30px rgba(30,78,140,.04);
    overflow:hidden;
}

.footprints-year.is-open{
    background:#fbfdff;
}

.footprints-year__toggle{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 22px;
    border:0;
    background:transparent;
    color:#17314d;
    font:inherit;
    font-weight:800;
    letter-spacing:-.02em;
    cursor:pointer;
    text-align:left;
}

.footprints-year__toggle:hover{
    background:#f7fbff;
}

.footprints-year__label{
    font-size:36px;
    line-height:1;
}

.footprints-year__meta{
    margin-left:auto;
    color:#7d8da1;
    font-size:13px;
    font-weight:700;
}

.footprints-year__chevron{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    font-size:19px;
    color:#0d69df;
    transition:transform .2s ease;
}

.footprints-year.is-open .footprints-year__chevron{
    transform:rotate(180deg);
}

.footprints-year__body{
    display:none;
    padding:0 22px 22px;
}

.footprints-year.is-open .footprints-year__body{
    display:block;
}


/* =========================
   타임라인
========================= */

.footprints-timeline{
    position:relative;
    padding-left:18px;
}

.footprints-timeline::before{
    content:"";
    position:absolute;
    left:12px;
    top:4px;
    bottom:4px;
    width:2px;
    background:#dfeaf7;
}

.footprint-entry{
    position:relative;
    display:grid;
    grid-template-columns:150px 18px minmax(0,1fr);
    gap:16px;
    align-items:flex-start;
    padding:14px 0 14px 18px;
    margin-left:0;
}

.footprint-entry__rail{
    position:absolute;
    left:-8px;
    top:26px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#fff;
    border:3px solid #6eaee7;
    box-shadow:0 0 0 4px rgba(110,174,231,.12);
}

.footprint-entry__media{
    width:150px;
    height:90px;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #e1ebf7;
    background:#edf5fd;
    display:grid;
    place-items:center;
    color:#8ca5ba;
    font-size:11px;
    font-weight:700;
    text-align:center;
}

.footprint-entry__media.has-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.footprint-entry__icon{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#eaf4ff;
    color:#0d69df;
    display:grid;
    place-items:center;
    margin-top:8px;
    font-size:10px;
    font-weight:800;
}

.footprint-entry__content{
    min-width:0;
    padding-top:2px;
}

.footprint-entry__meta{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:8px;
}

.footprint-entry__meta time{
    color:#3d89d1;
    font-size:12px;
    font-weight:800;
}

.footprint-entry__tag{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    background:#edf5ff;
    color:#2a6ec5;
    font-size:11px;
    font-weight:700;
}

.footprint-entry__content h2{
    margin:0 0 8px;
    font-size:18px;
    line-height:1.35;
    color:#1d2b3a;
    letter-spacing:-.02em;
}

.footprint-entry__content p{
    margin:0;
    color:#6b7f94;
    font-size:13px;
    line-height:1.6;
}

.footprint-entry__badges{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
}

.footprint-entry__badges span{
    padding:4px 7px;
    border-radius:999px;
    background:#edf7fd;
    color:#3b7bbb;
    font-size:10px;
    font-weight:700;
}

.footprint-entry__awards{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.footprint-entry__awards figure{
    width:52px;
    margin:0;
    text-align:center;
}

.footprint-entry__awards img{
    display:block;
    width:52px;
    height:52px;
    object-fit:cover;
    border-radius:9px;
    border:1px solid #e4edf8;
}

.footprint-entry__awards figcaption{
    margin-top:4px;
    color:#75879a;
    font-size:9px;
    line-height:1.2;
}


/* =========================
   발자취 요약
========================= */

.footprints-summary{
    padding-top:12px;
}

.footprints-summary__card{
    position:sticky;
    top:84px;
    border:1px solid #dfeaf7;
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 28px rgba(30,78,140,.05);
    padding:20px;
}

.footprints-summary__card h2{
    margin:0 0 16px;
    font-size:24px;
    letter-spacing:-.03em;
    color:#1b2a3b;
}

.footprints-summary__list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.footprints-summary__list li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid #edf3f9;
    color:#4d5d73;
    font-size:14px;
}

.footprints-summary__list li:last-child{
    border-bottom:0;
}

.footprints-summary__list span{
    font-weight:600;
}

.footprints-summary__list strong{
    font-size:16px;
    color:#13385e;
}

.footprints-page .is-hidden{
    display:none !important;
}


/* =========================
   PC
========================= */

@media (min-width:981px){

    .footprints-layout{
        grid-template-rows:auto auto auto;
        column-gap:28px;
        row-gap:0;
    }

    .footprints-main{
        display:contents;
    }

    .footprints-intro{
        grid-column:1;
        grid-row:1;
    }

    /*
     * 필터는 좌측 타임라인 폭에만 제한하지 않고
     * 우측 요약 영역까지 포함한 전체 폭 사용
     */
    .footprints-filters{
        grid-column:1 / -1;
        grid-row:2;
    }

    .footprints-accordion{
        grid-column:1;
        grid-row:3;
    }

    .footprints-summary{
        grid-column:2;
        grid-row:3;
        padding-top:0;
    }
}


/* =========================
   태블릿 이하
========================= */

@media (max-width:980px){

    .footprints-layout{
        grid-template-columns:1fr;
    }

    .footprints-main{
        display:block;
    }

    .footprints-summary{
        padding-top:0;
    }

    .footprints-summary__card{
        position:static;
    }
}


/* =========================
   모바일
========================= */

@media (max-width:720px){

    .footprints-page{
        padding:28px 16px 60px;
    }

    .footprints-intro h1{
        font-size:30px;
    }

    .footprints-kicker{
        font-size:11px;
    }

    .footprints-trail--intro{
        right:2%;
        bottom:4px;
        transform:scale(.8) rotate(-12deg);
    }

    .footprints-filters{
        gap:8px;
    }

    .footprints-filter{
        padding:8px 14px;
        font-size:12px;
    }

    .footprints-year__toggle{
        padding:14px 16px;
    }

    .footprints-year__label{
        font-size:28px;
    }

    .footprints-year__meta{
        font-size:12px;
    }

    .footprints-year__body{
        padding:0 14px 16px;
    }

    .footprints-timeline{
        padding-left:14px;
    }

    .footprints-timeline::before{
        left:8px;
    }

    .footprint-entry{
        grid-template-columns:94px 14px minmax(0,1fr);
        gap:10px;
        padding-left:12px;
    }

    .footprint-entry__rail{
        left:-8px;
        top:20px;
        width:10px;
        height:10px;
        border-width:2px;
    }

    .footprint-entry__media{
        width:94px;
        height:66px;
        border-radius:10px;
    }

    .footprint-entry__content h2{
        font-size:16px;
    }

    .footprint-entry__content p{
        font-size:12px;
    }

    .footprint-entry__awards figure{
        width:42px;
    }

    .footprint-entry__awards img{
        width:42px;
        height:42px;
    }
}

/* =========================================
   Footprints Badge Emphasis
   ========================================= */

/* 장기 활동 - RED */
.footprint-badge[data-footprint-badge="장기 활동"]{
    background:#fff1f2;
    border:1px solid #fda4af;
    color:#be123c;
    font-weight:800;
}

/* 현재 진행 중 - GREEN */
.footprint-badge[data-footprint-badge="진행 중"]{
    background:#ecfdf5;
    border:1px solid #86efac;
    color:#047857;
    font-weight:800;
}

/* CELINE 등 럭셔리 브랜드 - BLACK + GOLD */
.footprint-badge[data-footprint-badge="럭셔리 브랜드"]{
    background:#171717;
    border:1px solid #b99755;
    color:#f4dda4;
    font-weight:800;
    letter-spacing:.02em;
}

/* 시즌 활동 */
.footprint-badge[data-footprint-badge="시즌 활동"]{
    background:#eff6ff;
    border:1px solid #bfdbfe;
    color:#2563eb;
    font-weight:700;
}

/* 단기 협업 */
.footprint-badge[data-footprint-badge="단기 협업"]{
    background:#f8fafc;
    border:1px solid #cbd5e1;
    color:#64748b;
    font-weight:700;
}

/* 특별한 최초 기록 */
.footprint-badge[data-footprint-badge="브랜드 최초 보이그룹"]{
    background:#faf5ff;
    border:1px solid #d8b4fe;
    color:#7e22ce;
    font-weight:800;
}

/* 수상 대상 */
.footprint-badge[data-footprint-badge="대상"]{
    background:#fff8df;
    border:1px solid #e9c46a;
    color:#8a5a00;
    font-weight:900;
}

/* 다관왕 */
.footprint-badge[data-footprint-badge="2관왕"],
.footprint-badge[data-footprint-badge="3관왕"],
.footprint-badge[data-footprint-badge="4관왕"]{
    background:#f5f3ff;
    border:1px solid #c4b5fd;
    color:#6d28d9;
    font-weight:800;
}


/* =========================================
   Award Entry
   수상 대표 카드는 메인 이미지 칸을 없애고
   본문 + 상세영역이 넓게 사용
   ========================================= */

.footprint-entry[data-footprint-category="award"]{
    grid-template-columns:18px minmax(0,1fr);
    gap:12px;
}

.footprint-entry[data-footprint-category="award"] .footprint-entry__media{
    display:none;
}

.footprint-entry[data-footprint-category="award"] .footprint-entry__icon{
    grid-column:1;
    grid-row:1;
}

.footprint-entry[data-footprint-category="award"] .footprint-entry__content{
    grid-column:2;
    grid-row:1;
    width:100%;
    min-width:0;
}


/* =========================================
   Awards Detail
   ========================================= */

.footprint-award-details{
    width:100%;
    margin-top:16px;
    border:1px solid #dbe7f3;
    border-radius:14px;
    background:#fff;
    overflow:hidden;
}

.footprint-award-details__toggle{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding:13px 16px;
    cursor:pointer;
    list-style:none;
    background:#f7fbff;
    color:#21364d;
    font-size:14px;
    font-weight:800;
}

.footprint-award-details__toggle::-webkit-details-marker{
    display:none;
}

.footprint-award-details__toggle::after{
    content:"⌄";
    flex:0 0 auto;
    margin-left:2px;
    color:#78aee2;
    font-size:17px;
    line-height:1;
    transition:transform .2s ease;
}

.footprint-award-details[open] .footprint-award-details__toggle::after{
    transform:rotate(180deg);
}

.footprint-award-details__count{
    margin-left:auto;
    white-space:nowrap;
    color:#7d91a7;
    font-size:12px;
    font-weight:700;
}

.footprint-award-details__list{
    display:flex;
    flex-direction:column;
    padding:4px 16px 14px;
}

.footprint-award-detail{
    display:grid;
    grid-template-columns:140px minmax(0,1fr);
    gap:18px;
    align-items:center;
    padding:18px 0;
    border-bottom:1px solid #edf2f7;
}

.footprint-award-detail:last-child{
    border-bottom:0;
}

.footprint-award-detail__image{
    width:140px;
    height:100px;
    border-radius:12px;
    overflow:hidden;
    background:#f3f6f9;
}

.footprint-award-detail__image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.footprint-award-detail__content{
    width:100%;
    min-width:0;
}

.footprint-award-detail__content time{
    display:block;
    margin-bottom:5px;
    color:#72a8dd;
    font-size:11px;
    font-weight:800;
}

.footprint-award-detail__content h3{
    width:100%;
    margin:0 0 9px;
    color:#1d3147;
    font-size:15px;
    line-height:1.4;
    word-break:keep-all;
    overflow-wrap:normal;
}

.footprint-award-detail__prizes{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    width:100%;
}

.footprint-award-detail__prizes span{
    display:inline-flex;
    align-items:center;
    width:auto;
    max-width:100%;
    min-height:25px;
    padding:4px 8px;
    border:1px solid #d5e8f8;
    border-radius:999px;
    background:#f3f9ff;
    color:#397cb9;
    font-size:11px;
    line-height:1.25;
    font-weight:700;
    white-space:normal;
    word-break:keep-all;
}


/* =========================
   수상 상세 - 태블릿/모바일
========================= */

@media (max-width:720px){

    .footprint-entry[data-footprint-category="award"]{
        grid-template-columns:14px minmax(0,1fr);
        gap:10px;
    }

    .footprint-entry[data-footprint-category="award"] .footprint-entry__icon{
        width:14px;
        height:14px;
        margin-top:8px;
        font-size:9px;
    }

    .footprint-award-details__toggle{
        padding:12px 13px;
        font-size:13px;
    }

    .footprint-award-details__count{
        font-size:11px;
    }

    .footprint-award-details__list{
        padding:2px 13px 12px;
    }

    .footprint-award-detail{
        grid-template-columns:1fr;
        gap:10px;
        padding:15px 0;
    }

    .footprint-award-detail__image{
        width:100%;
        height:auto;
        aspect-ratio:16 / 9;
        border-radius:10px;
    }

    .footprint-award-detail__content h3{
        font-size:14px;
    }

    .footprint-award-detail__prizes span{
        min-height:24px;
        padding:4px 7px;
        font-size:10px;
    }
}