/* ══════════════════════════════════════════════════════════════════════════════════════════════
   EPK 현재 섹션 표시 + 모바일 섹션 바

   왜 필요한가. 실측한 모바일 페이지 높이가 13,923px, 812px 화면 기준 17.1 화면 분량입니다.
   그런데 index.html:144 의 `@media (max-width: 900px) { .desktop-nav { display: none } }` 때문에
   좁은 화면에서는 내비게이션이 통째로 사라집니다. 즉 폰으로 프레스킷을 여는 사람에게는 17
   화면을 끝까지 긁는 것 말고 다른 방법이 없었습니다. 이 문서를 여는 쪽은 대개 프로모터나
   기자이고, 대개 문의처나 음악으로 바로 가고 싶어 합니다.

   ── 두 화면에서 하는 일이 다릅니다
   넓은 화면: 이미 있는 .desktop-nav 가 현재 위치를 말하게 합니다. 새 요소를 넣지 않습니다.
   좁은 화면: .desktop-nav 가 숨겨져 있으므로 헤더 아래에 고정 바를 새로 넣습니다.

   ── 활성 표시를 강조색 글자로 하지 않은 이유
   .desktop-nav a:hover 가 이미 var(--ink) 이고(index.html:92), --accent #F2112C 는 이 페이지의
   #151515 바탕에서 4.25:1 이라 .7rem(11.2px) 글자로는 WCAG 1.4.3 의 4.5:1 을 넘지 못합니다.
   글자는 --ink 로 올려 대비를 확보하고, 강조색은 밑줄이라는 비텍스트 요소로만 씁니다.

   ADDITIVE. index.php 의 주입 두 줄을 빼면 원래 EPK 로 돌아갑니다.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 앵커 착지 위치 ──────────────────────────────────────────────────────────────────────────
   .site-header 가 position:fixed 라(index.html:77-84) #music 같은 앵커로 뛰면 섹션 머리가 헤더
   뒤에 가려집니다. 접근성 감사도 같은 지점을 지적했습니다: 아래에서 Shift+Tab 으로 올라온
   포커스가 헤더 밑으로 들어갑니다. 헤더 높이를 js 가 실측해 --epk-chrome-h 로 넘깁니다. */
#profile,
#roles,
#career,
#music,
#network,
#contact {
    scroll-margin-top: calc(var(--epk-chrome-h, 82px) + 16px);
}

/* ── 넓은 화면: 기존 내비게이션에 현재 위치 ─────────────────────────────────────────────────── */
.desktop-nav a {
    position: relative;
}

.desktop-nav a[aria-current="true"] {
    color: var(--ink, #f5f5f2);
}

.desktop-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent, #F2112C);
    box-shadow: 0 0 8px rgba(242, 17, 44, 0.5);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}

.desktop-nav a[aria-current="true"]::after {
    transform: scaleX(1);
}

/* ── 좁은 화면: 헤더 아래 섹션 바 ───────────────────────────────────────────────────────────
   기본은 숨김입니다. .desktop-nav 가 사라지는 900px 이하에서만 나타납니다. */
.epk-secbar {
    display: none;
}

@media (max-width: 900px) {
    /* ── 헤더와 바를 하나의 면으로 ────────────────────────────────────────────────────────
       바를 넣기 전까지 .site-header 는 맨 위에서 배경이 없고(히어로가 비침), 스크롤하면
       .scrolled 가 rgba(21,21,21,.92) 와 border-bottom 을 얹는 구조였습니다(index.html:77-85).
       거기에 반투명한 바를 하나 더 붙이자 두 가지가 보였습니다.

         1. 맨 위에서 투명한 헤더와 불투명한 바가 맞닿아 경계에서 뚝 끊겨 보였습니다.
         2. 스크롤 중에는 알파가 .92 대 .94 로 어긋나고 그 사이에 헤더의 border-bottom 이
            한 줄 더 들어갔습니다. 게다가 둘 다 backdrop-filter 라 블러 커널이 각자의 경계에서
            잘려, 서로 맞닿은 자리에 실눈 같은 선이 남습니다. 반투명 면 두 장을 세로로 붙이면
            피할 수 없는 현상입니다.

       그래서 바가 있는 폭에서는 헤더와 바를 같은 불투명 색 하나로 칠하고 사이의 선을 없앱니다.
       두 장이 아니라 한 장이 되므로 알파 차이도 블러 경계도 생기지 않습니다. 반투명 유리
       느낌은 바가 없는 넓은 화면에서 그대로 유지됩니다. */
    .site-header,
    .site-header.scrolled {
        background: var(--bg, #151515);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 0;
    }

    .epk-secbar {
        position: fixed;
        top: var(--epk-header-h, 70px);
        left: 0;
        right: 0;
        z-index: 49;   /* .site-header 가 50 이므로 그 바로 아래 */
        display: block;
        background: var(--bg, #151515);
        border-bottom: 1px solid var(--line, rgba(255, 255, 252, .11));
    }

    /* 항목이 여섯 개가 되면서 영어 라벨이 375px 폭에서 423px 로 넘쳤다(실측). Contact 가
       잘렸다. 간격과 자간을 조여 한 줄에 담는다. 한국어는 라벨이 훨씬 짧아 여유가 크다. */
    .epk-secbar-inner {
        display: flex;
        align-items: stretch;
        gap: 12px;
        height: 38px;
        padding: 0 12px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-behavior: smooth;
    }

    .epk-secbar-inner::-webkit-scrollbar {
        display: none;
    }

    .epk-secbar a {
        position: relative;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        color: #aaa8ae;
        text-decoration: none;
        font-size: 0.64rem;
        font-weight: 800;
        letter-spacing: 0.045em;
        text-transform: uppercase;
        white-space: nowrap;
        transition: color 180ms ease;
    }

    .epk-secbar a[aria-current="true"] {
        color: var(--ink, #f5f5f2);
    }

    .epk-secbar a::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 7px;
        height: 2px;
        border-radius: 2px;
        background: var(--accent, #F2112C);
        box-shadow: 0 0 8px rgba(242, 17, 44, 0.5);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .epk-secbar a[aria-current="true"]::after {
        transform: scaleX(1);
    }

    .epk-secbar a:focus-visible {
        outline: 2px solid var(--accent, #F2112C);
        outline-offset: 3px;
        border-radius: 2px;
    }

    /* 히어로가 헤더 높이만큼 가려지지 않게 본문 시작을 내린다. 기존에는 헤더 하나만 떠 있었고
       이제 바가 하나 더 붙기 때문이다. */
    #main {
        padding-top: 38px;
    }
}

/* 더 좁은 화면에서 한 번 더 조인다. 넘치더라도 줄은 가로로 스크롤되니 기능이 깨지지는
   않지만, 목차는 전부 보이는 편이 낫다. */
@media (max-width: 400px) {
    .epk-secbar-inner {
        gap: 9px;
        padding: 0 10px;
    }

    .epk-secbar a {
        font-size: 0.6rem;
        letter-spacing: 0.02em;
    }
}

/* 인쇄물에는 화면 전용 장치가 나가지 않는다. PDF 는 /epk/print/ 라는 별도 페이지에서 나오지만
   브라우저 인쇄에도 대비한다. */
@media print {
    .epk-secbar {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .desktop-nav a::after,
    .epk-secbar a,
    .epk-secbar a::after {
        transition: none;
    }
}