/*
 * it-hp 홈 Synology 안내 띠 (.syn-strip)
 * - style.css(Vite 번들)에 섞지 않고 $additional_css 훅으로만 로드한다(templates/it-hp/index.php).
 * - TP-Link 띠(.tpl-strip, css/tp-link.css) 바로 아래에 이어 붙는 두 번째 줄이라 위쪽 테두리는 두지 않는다
 *   (TP-Link 띠의 아래 테두리가 두 줄 사이 구분선이 된다).
 * - 테마 변수(--blue-*, --border-*, --text-*)만 쓰고 단색만 쓴다.
 * - 로고는 고정 박스(130x40) 안에서 비율을 유지해 맞추므로 SVG/PNG 어느 쪽이든 레이아웃이 움직이지 않는다.
 */

.syn-strip {
    padding: 18px 0;
    border-bottom: 1px solid var(--border-color, #e3e8ef);
    background: #fff;
}

.syn-strip-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 28px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.syn-strip-logo {
    display: block;
    width: 130px;
    height: 40px;
    object-fit: contain;
    object-position: left center;
}

/* 본문 폭(613px)과 버튼 최소 폭(160px)은 바로 위 TP-Link 띠(.tpl-strip-text, .tpl-strip-link)의 실측 폭에 맞춘 값이다.
   두 줄의 로고·본문·버튼 열이 세로로 가지런히 정렬되고, 좁은 화면에서도 같은 폭에서 같은 방식으로 줄바꿈된다. */
.syn-strip-text {
    flex: 0 1 613px;
    min-width: 0;
    margin: 0;
    color: var(--text-secondary, #344054);
    font-size: 1rem;
    line-height: 1.6;
    word-break: keep-all;
}

.syn-strip-text strong {
    color: var(--text-primary, #101828);
}

.syn-strip-link {
    min-width: 160px;
    padding: 8px 18px;
    text-align: center;
    border: 1px solid var(--blue-600, #0b4dd8);
    border-radius: 999px;
    color: var(--blue-600, #0b4dd8);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.syn-strip-link:hover,
.syn-strip-link:focus-visible {
    background: var(--blue-600, #0b4dd8);
    color: #fff;
}