서브페이지 상단: 사진 배경 타이틀 + 알약형 하위 탭

const PATH = [
  { label: "홈", href: "/" },
  { label: "커뮤니티", href: "/notice" },
  { label: "공지사항", href: "/notice" },
];

const TABS = [
  { label: "공지사항", href: "/notice", current: true },
  { label: "수강생 갤러리", href: "/gallery", current: false },
  { label: "자료실", href: "/resources", current: false },
];

const FONT = '"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif';

export default function SubPageHeader() {
  return (
    <section className="w-full bg-white" style={{ fontFamily: FONT }}>
      <div className="relative bg-[#1B263B] bg-cover bg-center pb-[60px] pt-14 text-white lg:pb-[72px] lg:pt-[88px]" style={{ backgroundImage: "url(https://nnuer.site/media/185mo4MPFwD6)" }}>
        <div className="absolute inset-0 bg-[linear-gradient(100deg,rgba(18,26,42,0.94)_0%,rgba(27,38,59,0.82)_60%,rgba(27,38,59,0.6)_100%)]" />
        <div className="relative mx-auto w-full max-w-[1200px] px-4 sm:px-6">
          <p className="flex flex-wrap gap-2 text-sm text-white/60">
            {PATH.map((p, i) => (
              <span key={p.label} className="flex items-center gap-2">
                {i > 0 && <span className="text-white/35">/</span>}
                {i === PATH.length - 1 ? (
                  <span className="text-[#F5C842]">{p.label}</span>
                ) : (
                  <a href={p.href} className="hover:text-white">
                    {p.label}
                  </a>
                )}
              </span>
            ))}
          </p>
          <h1 className="mt-3 text-[32px] font-extrabold tracking-[-0.04em] sm:text-[42px] lg:text-[52px]">공지사항</h1>
        </div>
      </div>

      <nav aria-label="커뮤니티 하위 메뉴" className="relative z-[2] -mt-7 flex justify-center px-4 sm:px-6">
        <div className="inline-flex max-w-full gap-1 overflow-x-auto rounded-full bg-white p-1.5 shadow-[0_18px_40px_rgba(18,26,42,0.12)]">
          {TABS.map((t) => (
            <a
              key={t.label}
              href={t.href}
              aria-current={t.current ? "page" : undefined}
              className={`shrink-0 rounded-full px-4 py-[9px] text-[15px] font-bold transition-colors sm:px-6 sm:py-2.5 sm:text-base ${
                t.current ? "bg-[#1B263B] text-white" : "text-[#8a93a3] hover:text-[#172031]"
              }`}
            >
              {t.label}
            </a>
          ))}
        </div>
      </nav>
    </section>
  );
}