/**
 * widgets/layout/brand-header — 전문(버티컬) 사이트용 상단 헤더
 *
 * 색은 전부 CSS 변수로만 노출한다. 사이트 style.css 가 --w-brand-header-* 또는
 * --site-* 를 재정의하면 이 파일을 고치지 않고 색이 바뀐다.
 *
 * 드롭다운은 JS 없이 :hover / :focus-within 으로 연다 — 키보드 사용자도 열 수 있다.
 */
.w-brand-header {
    --w-brand-header-bg:      var(--site-header-bg, #fff);
    --w-brand-header-fg:      var(--site-text, #1f2937);
    --w-brand-header-muted:   var(--site-muted, #6b7280);
    --w-brand-header-border:  var(--site-border, #e5e7eb);
    --w-brand-header-brand:   var(--site-brand, #0f766e);
    --w-brand-header-height:  60px;

    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--w-brand-header-bg);
    border-bottom: 1px solid var(--w-brand-header-border);
}

.w-brand-header__inner {
    max-width: var(--site-max-width, 1280px);
    margin: 0 auto;
    padding: 0 1.25rem;
    min-height: var(--w-brand-header-height);
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* ── 로고 ───────────────────────────────────────────────── */
.w-brand-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    color: var(--w-brand-header-brand);
    flex: 0 0 auto;
}

.w-brand-header__logo:hover { text-decoration: none; }
.w-brand-header__logo img { height: 30px; width: auto; display: block; }

.w-brand-header__name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--w-brand-header-brand);
}

/* ── 주 메뉴 ────────────────────────────────────────────── */
.w-brand-header__nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 1 auto;
    min-width: 0;
}

.w-brand-header__item { position: relative; }

.w-brand-header__link,
.w-brand-header__user-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--w-brand-header-fg);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* 호버 명암은 프로젝트 규칙 값을 쓴다 (배경 #f1f5f9 / 텍스트 #64748b).
   text-decoration:none 을 명시해야 전역 a:hover 밑줄을 이긴다 — 명시도 (0,2,0). */
.w-brand-header__link:hover,
.w-brand-header__user-link:hover {
    background: #f1f5f9;
    color: #64748b;
    text-decoration: none;
}

.w-brand-header__link.is-current {
    color: var(--w-brand-header-brand);
    background: var(--site-brand-soft, #f0fdfa);
}

.w-brand-header__caret {
    font-size: 0.625rem;
    opacity: 0.55;
    transition: transform 0.15s ease;
}

.w-brand-header__item:hover .w-brand-header__caret,
.w-brand-header__item:focus-within .w-brand-header__caret {
    transform: rotate(180deg);
}

/* ── 드롭다운 ───────────────────────────────────────────── */
.w-brand-header__panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    padding: 0.4rem;
    background: #fff;
    border: 1px solid var(--w-brand-header-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 10;
}

.w-brand-header__panel--right { left: auto; right: 0; }

.w-brand-header__item.has-children:hover > .w-brand-header__panel,
.w-brand-header__item.has-children:focus-within > .w-brand-header__panel {
    display: block;
}

.w-brand-header__panel-link {
    display: block;
    padding: 0.45rem 0.65rem;
    border-radius: 5px;
    font-size: 0.875rem;
    color: var(--w-brand-header-fg);
    text-decoration: none;
    white-space: nowrap;
}

.w-brand-header__panel-link:hover {
    background: #f1f5f9;
    color: #64748b;
    text-decoration: none;
}

/* ── 검색 ───────────────────────────────────────────────── */
.w-brand-header__search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 340px;
    margin-left: auto;
}

.w-brand-header__search-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8125rem;
    color: var(--w-brand-header-muted);
    pointer-events: none;
}

.w-brand-header__search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    border: 1px solid var(--w-brand-header-border);
    border-radius: 999px;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--w-brand-header-fg);
    background: var(--site-bg-soft, #f8fafc);
}

.w-brand-header__search-input:focus {
    outline: none;
    border-color: var(--w-brand-header-brand);
    background: #fff;
}

/* ── 오른쪽 액션 ────────────────────────────────────────── */
.w-brand-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-left: auto;
}

/* 검색창이 있으면 그것이 auto 여백을 가져가므로 액션은 붙어서 따라온다 */
.w-brand-header__search ~ .w-brand-header__actions { margin-left: 0; }

.w-brand-header__user-link { font-weight: 500; }
.w-brand-header__user-link i { font-size: 0.9375rem; }

/* ── 클릭 팝업 (선택 옵션 'popup') ─────────────────────────
   트리거·열림·닫힘·포커스는 <wa-button>·<wa-popover> 가 맡는다.
   여기서는 팝업 안 링크의 간격만 잡는다. 보일 뷰포트는 사이트 CSS 가 정한다. */
.w-brand-header__popup { display: inline-flex; align-items: center; }

.w-brand-header__popover { --max-width: 260px; }
.w-brand-header__popover::part(body) { padding: 0.35rem; }

.w-brand-header__popup-list {
    display: grid;
    gap: 0.15rem;
    min-width: 180px;
}

.w-brand-header__popup-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--w-brand-header-fg);
    text-decoration: none;
    white-space: nowrap;
}

.w-brand-header__popup-link i {
    width: 1.1rem;
    text-align: center;
    color: var(--w-brand-header-brand);
}

/* 호버 명암은 프로젝트 규칙 값을 쓴다 (배경 #f1f5f9 / 텍스트 #64748b) */
.w-brand-header__popup-link:hover {
    background: #f1f5f9;
    color: #64748b;
    text-decoration: none;
}

.w-brand-header__popup-link:focus-visible {
    outline: 2px solid var(--w-brand-header-brand);
    outline-offset: 1px;
}

.w-brand-header__popup-link.is-current {
    color: var(--w-brand-header-brand);
    background: var(--site-brand-soft, #f0fdfa);
}

/* ── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .w-brand-header__search { max-width: 220px; }
}

@media (max-width: 860px) {
    .w-brand-header__inner {
        flex-wrap: wrap;
        padding: 0.6rem 1rem;
        gap: 0.6rem;
    }

    /* 좁은 화면에서는 메뉴를 아래 줄로 내리고 가로 스크롤로 넘긴다.
       메뉴를 숨기면 이 사이트의 유일한 탐색 수단이 사라진다. */
    .w-brand-header__nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        gap: 0.15rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .w-brand-header__nav::-webkit-scrollbar { display: none; }

    /* 가로 스크롤 안에서는 절대배치 패널이 잘린다 — 부모 링크만 남긴다 */
    .w-brand-header__nav .w-brand-header__panel { display: none !important; }
    .w-brand-header__nav .w-brand-header__caret { display: none; }

    .w-brand-header__search { order: 2; max-width: none; flex: 1 1 100%; }
    .w-brand-header__actions { order: 1; margin-left: auto; }
}