/* =========================================================================
   Howl Solution 전용 스타일시트
   출처: /workspace/projects/260716-howl-solution/mockups/*.html 디자인 목업을 이식.
   기존 KINA 템플릿(Bootstrap 5)과 공존하되, 하울솔루션 페이지(레이아웃/홈/회사소개/
   시공이력/제품소개/시공문의)는 이 파일의 변수·클래스 체계를 우선 사용한다.
   ========================================================================= */

:root {
    --howl-navy: #1a2f5e;
    --howl-navy-dark: #12213f;
    --howl-ink: #1c2530;
    --howl-sub: #5b6472;
    --howl-line: #e4e7ec;
    --howl-bg-soft: #f5f6f8;
    --howl-bg-soft2: #eceef1;
    --howl-accent: #c8942f;
    --howl-radius: 4px;
}

/* ===== 공통 리셋/유틸 (Bootstrap과 충돌 없는 범위에서 최소 적용) ===== */
.howl-page {
    font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic",
        -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--howl-ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/* 버튼(.howl-btn)은 제외한다 — 제외하지 않으면 이 규칙(명시도 0,1,1)이
   .howl-btn-primary 등 변형 클래스(0,1,0)의 color를 이겨 버튼 글자색이 부모색으로 상속된다. */
.howl-page a:not(.howl-btn) { color: inherit; }
.howl-page a { text-decoration: none; }
.howl-page img { max-width: 100%; display: block; }
.howl-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.howl-eyebrow {
    font-size: 13px; letter-spacing: .14em; font-weight: 700;
    color: var(--howl-navy); text-transform: uppercase; display: inline-block;
}
.howl-section-title { font-size: 32px; font-weight: 800; letter-spacing: -0.01em; margin: 10px 0 0; color: var(--howl-ink); }
.howl-section-desc { font-size: 15px; color: var(--howl-sub); margin: 12px 0 0; max-width: 560px; }

/* ===== 사진 박스 공용 (어둡게 깔고, 호버 시 확대 + 원래 밝기) =====
   비율이 제각각인 사진을 박스에 맞춰 잘라내고, 위에 네이비 딤 레이어를 얹는다.
   호버 시 딤이 걷히면서 이미지가 확대된다. 확대분은 overflow:hidden으로 잘린다. */
.howl-photo { position: relative; overflow: hidden; }
.howl-photo img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1); transition: transform .55s ease;
}
.howl-photo::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: rgba(10,16,30,.34); transition: opacity .45s ease;
}
/* 카드 전체가 링크인 경우(시공분야 카드) 본문 위에 올려도 함께 반응해야 한다 */
.howl-photo:hover img { transform: scale(1.07); }
.howl-photo:hover::after { opacity: 0; }

/* 터치 기기는 호버가 없어 딤이 영구히 남는다 — 처음부터 원래 밝기로 보여준다 */
@media (hover: none) {
    .howl-photo::after { opacity: 0; }
}
/* 모션 최소화 선호 시 확대는 생략하고 밝기 변화만 남긴다 */
@media (prefers-reduced-motion: reduce) {
    .howl-photo img { transition: none; }
    .howl-photo:hover img { transform: none; }
}

.howl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 28px; font-size: 15px; font-weight: 700; border-radius: var(--howl-radius);
    border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
}
.howl-btn-primary { background: var(--howl-navy); color: #fff; }
.howl-btn-primary:hover { background: var(--howl-navy-dark); color: #fff; }
.howl-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.howl-btn-outline-navy { background: #fff; color: var(--howl-navy); border-color: var(--howl-navy); }
.howl-btn-outline-navy:hover { background: var(--howl-navy); color: #fff; }
.howl-btn-white { background: #fff; color: var(--howl-navy); }
/* 골드 — 네이비 계열 버튼과 나란히 놓았을 때 우선순위가 드러나도록 */
.howl-btn-accent { background: var(--howl-accent); color: #fff; }
.howl-btn-accent:hover { background: #ab7d26; color: #fff; }
.howl-btn-sm { padding: 10px 16px; font-size: 13px; }

/* ===== 헤더 ===== */
.howl-header {
    position: sticky; top: 0; z-index: 1040;
    background: #fff; border-bottom: 1px solid var(--howl-line);
}
.howl-header-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 32px; position: relative;
    height: 76px; display: flex; align-items: center; justify-content: space-between;
}
.howl-wordmark { display: flex; align-items: center; flex: none; }
/* 로고 원본 1400x250(5.6:1). 높이 기준으로 고정하고 너비는 자동 산출한다. */
.howl-wordmark img { height: 34px; width: auto; }
.howl-main-menu { display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
.howl-main-menu a { font-size: 15px; font-weight: 600; color: var(--howl-ink); }
.howl-main-menu a:hover { color: var(--howl-navy); }
.howl-main-menu a.active { color: var(--howl-navy); position: relative; }
.howl-main-menu a.active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -27px; height: 2px; background: var(--howl-navy);
}
.howl-header-right { display: flex; align-items: center; gap: 16px; }
.howl-menu-toggle {
    display: none; align-items: center; justify-content: center; width: 38px; height: 38px;
    border: 1.5px solid var(--howl-line); border-radius: 8px; background: #fff; color: var(--howl-ink);
    padding: 0; flex: none;
}
.howl-menu-toggle svg { width: 20px; height: 20px; }

.howl-mobile-menu {
    display: none;
    border-bottom: 1px solid var(--howl-line);
    background: #fff;
}
.howl-mobile-menu.show { display: block; }
.howl-mobile-menu ul { list-style: none; margin: 0; padding: 8px 20px 16px; }
.howl-mobile-menu a {
    display: block; padding: 12px 4px; font-size: 15px; font-weight: 600; color: var(--howl-ink);
    border-bottom: 1px solid var(--howl-line);
}
.howl-mobile-menu a.active { color: var(--howl-navy); }

section[data-anchor] { scroll-margin-top: 76px; }

/* ===== 페이지 히어로(서브페이지 공통) =====
   현장 사진을 배경이 아니라 "질감"으로 쓴다. 높이가 267px / 약 5.4:1이라 사진을 전면에
   깔면 어떤 사진이든 가운데 띠만 남아 알아볼 수 없고, 사진 밝기에 따라 흰 글씨가 묻힌다.
   그래서 진한 네이비 그라데이션(88~93%)을 위에 겹쳐 대비를 항상 보장하고,
   사진은 형태와 색만 은은하게 비치게 한다. 사진을 교체해도 가독성이 무너지지 않는다.
   페이지별 사진은 아래 --howl-hero-photo 변수로 지정한다. */
.howl-page-hero {
    position: relative;
    background:
        linear-gradient(180deg, rgba(10,16,30,.88) 0%, rgba(10,16,30,.93) 100%),
        var(--howl-hero-photo, none) center 45% / cover no-repeat,
        var(--howl-navy-dark);
    /* 사진 레이어를 아래 네이비와 luminosity로 합성한다 — 사진의 명암만 남고 색은 네이비를 따른다.
       무대 조명 사진은 초록·자홍처럼 원색이 강해서 그대로 깔면 브랜드 컬러를 밀어낸다.
       이미지를 탈색해 저장하지 않고 CSS에서 처리하므로, 나중에 사진을 바꿔도 톤이 유지된다. */
    background-blend-mode: normal, luminosity, normal;
    padding: 64px 0 48px;
}
/* 페이지별 배경 사진 — 페이지 성격에 맞는 현장을 하나씩 배정한다 */
.howl-page-hero--company     { --howl-hero-photo: url("/images/hero-title-3.jpg"); } /* 다목적실 */
.howl-page-hero--cases       { --howl-hero-photo: url("/images/hero-title-4.jpg"); } /* 트러스 리깅 */
.howl-page-hero--case-detail { --howl-hero-photo: url("/images/hero-title-2.jpg"); } /* 무대 조명 */
.howl-page-hero--products    { --howl-hero-photo: url("/images/hero-title-1.jpg"); } /* 음향 장비 */
.howl-page-hero--inquiry     { --howl-hero-photo: url("/images/hero-title-5.jpg"); } /* 프로젝션 매핑 */
.howl-page-hero .howl-eyebrow { color: #d7deed; }
.howl-page-hero h1 { font-size: 36px; font-weight: 800; color: #fff; letter-spacing: -0.01em; margin: 12px 0 0; }
.howl-page-hero p { font-size: 15px; color: #dbe1ec; margin: 14px 0 0; max-width: 600px; }
.howl-breadcrumb { font-size: 13px; color: #aeb8cc; margin-top: 20px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.howl-breadcrumb a:hover { color: #fff; }
.howl-breadcrumb svg { width: 12px; height: 12px; flex: none; }

/* ===== 홈: 히어로 ===== */
.howl-hero {
    position: relative; height: 640px; overflow: hidden;
    background: var(--howl-navy-dark); /* 이미지 로드 전 배경 */
    display: flex; align-items: flex-end;
}
/* 슬라이드 레이어 — 트랙에 가로로 이어 붙이고 translateX로 밀어 넘긴다(크로스페이드 아님).
   어둡게 깔리는 그라데이션은 .howl-hero::after 별도 레이어라 슬라이드가 바뀌어도 유지된다. */
.howl-hero-track {
    position: absolute; inset: 0; display: flex;
    transition: transform .7s cubic-bezier(.55,.06,.25,1);
}
.howl-hero-slide {
    flex: 0 0 100%; height: 100%;
    /* 현재는 사진이 없다(라이언클럽 자료 전량 제거) — 대체 사진이 오면 뷰에서
       --howl-hero-slide-photo 변수로 지정한다. 사진은 그라데이션을 덮고, 문구 대비는
       .howl-hero::after 오버레이가 계속 보장한다. */
    background:
        var(--howl-hero-slide-photo, none) center / cover no-repeat,
        radial-gradient(1100px 640px at 78% 18%, #24406e 0%, var(--howl-navy-dark) 58%, #0a1223 100%);
}
/* 임시 배경 — 슬라이드마다 광원 위치와 톤을 조금씩 달리해 밀림 전환이 눈에 보이게 한다 */
.howl-hero-slide:nth-child(2) { background-image: var(--howl-hero-slide-photo, none), radial-gradient(1100px 640px at 22% 30%, #1f4468 0%, var(--howl-navy-dark) 58%, #0a1223 100%); }
.howl-hero-slide:nth-child(3) { background-image: var(--howl-hero-slide-photo, none), radial-gradient(1100px 640px at 70% 78%, #2c3f70 0%, #101f3c 55%, #0a1223 100%); }
.howl-hero-slide:nth-child(4) { background-image: var(--howl-hero-slide-photo, none), radial-gradient(1100px 640px at 30% 70%, #3a3f63 0%, var(--howl-navy-dark) 60%, #0a1223 100%); }
/* 영상 슬라이드 — 배경 div와 같은 crop 동작. <video>에는 background-size가 안 먹으므로 object-fit으로 맞춘다 */
video.howl-hero-slide { object-fit: cover; object-position: center; min-width: 0; }
/* 검수용 임시: 현재 슬라이드의 자료 번호 배지(우상단) — 클라이언트 선정이 끝나면 마크업과 함께 제거 */
.howl-hero-media-tag {
    position: absolute; z-index: 3; top: 16px; right: 16px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #fff;
    background: rgba(10,16,30,.55); border: 1px solid rgba(255,255,255,.25);
    padding: 6px 12px; border-radius: 16px; pointer-events: none;
}
.howl-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,16,30,.35) 0%, rgba(10,16,30,.55) 55%, rgba(10,16,30,.82) 100%);
}
.howl-hero-content { position: relative; z-index: 2; width: 100%; padding: 0 32px 76px; max-width: 1280px; margin: 0 auto; }

/* 좌우 화살표 — 세로 중앙, 히어로 콘텐츠와 같은 1280px 그리드 안쪽에 정렬 */
.howl-hero-arrow {
    position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10,16,30,.35); border: 1.5px solid rgba(255,255,255,.5); color: #fff;
    transition: background .2s, border-color .2s;
}
.howl-hero-arrow:hover { background: rgba(10,16,30,.65); border-color: #fff; }
.howl-hero-arrow svg { width: 20px; height: 20px; }
/* 콘텐츠 그리드(1280px)보다 넓은 1600px 기준으로 벌려 화면 바깥쪽에 배치한다.
   여백이 없는 좁은 화면에서는 32px 하한이 적용돼 가장자리에 붙는다. */
.howl-hero-arrow.prev { left: max(32px, calc((100% - 1600px) / 2)); }
.howl-hero-arrow.next { right: max(32px, calc((100% - 1600px) / 2)); }

/* 슬라이드 인디케이터 — 하단 중앙의 원형 점, 슬라이드 개수만큼 */
.howl-hero-dots {
    position: absolute; z-index: 3; bottom: 28px;
    left: 50%; transform: translateX(-50%);
    display: flex; gap: 10px;
}
.howl-hero-dots button {
    width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,.35); transition: background .2s, transform .2s;
}
.howl-hero-dots button:hover { background: rgba(255,255,255,.7); }
.howl-hero-dots button.is-active { background: #fff; transform: scale(1.25); }

/* 모션 최소화를 선호하는 사용자에게는 밀림 전환과 문구 상승 애니메이션을 적용하지 않는다
   (자동 전환은 스크립트에서 함께 끈다) */
@media (prefers-reduced-motion: reduce) {
    .howl-hero-track { transition: none; }
    .howl-hero-copy-item.is-active .howl-hero-line { animation: none; opacity: 1; transform: none; }
}
.howl-hero-content .howl-eyebrow { color: #d7deed; }
/* 슬라이드 문구 — 4개 항목을 같은 자리에 겹쳐 두고 활성 항목만 보인다.
   min-height는 헤드 2줄 + 서브 1줄 기준 고정값 — 없으면 문구 길이에 따라 CTA가 출렁인다. */
.howl-hero-copy { position: relative; min-height: 192px; margin-top: 14px; }
.howl-hero-copy-item { position: absolute; inset: 0; visibility: hidden; }
.howl-hero-copy-item.is-active { visibility: visible; }
.howl-hero-line { margin: 0; opacity: 0; }
.howl-hero-line--head {
    font-size: 42px; font-weight: 800; color: #fff; letter-spacing: -0.01em; line-height: 1.32;
}
.howl-hero-line--sub { font-size: 16px; color: #dbe1ec; margin-top: 16px; max-width: 640px; }
/* is-active가 다시 붙을 때마다 줄이 아래에서 순서대로 올라온다 — 첫 줄, 둘째 줄, 서브 순 */
.howl-hero-copy-item.is-active .howl-hero-line { animation: howl-hero-rise .6s cubic-bezier(.22,.61,.36,1) forwards; }
.howl-hero-copy-item.is-active .howl-hero-line:nth-child(1) { animation-delay: .1s; }
.howl-hero-copy-item.is-active .howl-hero-line:nth-child(2) { animation-delay: .28s; }
.howl-hero-copy-item.is-active .howl-hero-line:nth-child(3) { animation-delay: .5s; }
@keyframes howl-hero-rise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}
.howl-hero-cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

/* ===== 홈: 회사소개 티저 ===== */
.howl-about { padding-top: 96px; padding-bottom: 96px; }
.howl-about-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
/* 회사소개 페이지로 가는 링크라 블록으로 깔아 높이를 갖게 한다 */
.howl-about-photo { display: block; height: 400px; border-radius: var(--howl-radius); position: relative; }
/* "누르는 것"임이 보이도록 사진을 살짝 어둡게 하고 좌하단에 알약형 버튼을 항상 띄운다.
   (호버 줌만으로는 클릭 가능하다는 신호가 약하다는 클라이언트 피드백, 2026-08) */
.howl-about-photo::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,16,30,.08) 40%, rgba(10,16,30,.45) 100%);
    border-radius: var(--howl-radius);
}
.howl-about-photo-pill {
    position: absolute; left: 20px; bottom: 20px; z-index: 2;
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--howl-navy);
    font-size: 13px; font-weight: 800; letter-spacing: .01em;
    padding: 10px 18px; border-radius: 22px;
    box-shadow: 0 6px 16px rgba(16,26,48,.28);
    transition: gap .2s ease, background .2s ease;
}
.howl-about-photo-pill svg { width: 14px; height: 14px; transition: transform .2s ease; }
.howl-about-photo:hover .howl-about-photo-pill { gap: 12px; }
.howl-about-photo:hover .howl-about-photo-pill svg { transform: translateX(2px); }
.howl-about-text .howl-section-desc { max-width: none; }
.howl-about-points { margin-top: 28px; display: flex; flex-direction: column; border-top: 1px solid var(--howl-line); }
.howl-about-point { display: flex; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--howl-line); }
.howl-about-point b { flex: none; width: 96px; font-size: 13px; font-weight: 800; color: var(--howl-navy); letter-spacing: .02em; }
.howl-about-point p { margin: 0; font-size: 14px; color: var(--howl-sub); }
.howl-about-cta { margin-top: 32px; }

/* ===== 최근 설치 사례(홈) / 설치 사례 목록 카드 공용 ===== */
.howl-projects { background: var(--howl-bg-soft); padding: 96px 0; }
.howl-projects-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.howl-project-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.howl-project-grid.howl-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* --- 홈 전용: 2줄 가로 캐러셀 ---
   카드를 세로 2장씩 열로 쌓고 가로로 스크롤한다. 좌우 버튼은 한 화면 폭씩 이동.
   스크롤바는 숨기되 스냅으로 열 경계에 맞춘다. */
.howl-project-carousel {
    margin-top: 48px;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: calc((100% - 3 * 24px) / 4); /* 데스크톱: 4열 노출 */
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.howl-project-carousel::-webkit-scrollbar { display: none; }
.howl-project-carousel .howl-project-card { scroll-snap-align: start; }
.howl-carousel-nav { display: flex; gap: 10px; }
.howl-carousel-btn {
    width: 42px; height: 42px; padding: 0; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1.5px solid var(--howl-line); color: var(--howl-ink);
    transition: border-color .2s, color .2s, background .2s;
}
.howl-carousel-btn:hover { border-color: var(--howl-navy); color: var(--howl-navy); }
.howl-carousel-btn:disabled { opacity: .35; cursor: default; }
.howl-carousel-btn:disabled:hover { border-color: var(--howl-line); color: var(--howl-ink); }
.howl-carousel-btn svg { width: 18px; height: 18px; }
/* 태블릿 폭에서는 노출 열 수를 줄인다 (모바일 규칙은 아래 768px 블록) */
@media (max-width: 1200px) {
    .howl-project-carousel { grid-auto-columns: calc((100% - 2 * 24px) / 3); }
}
@media (max-width: 992px) {
    .howl-project-carousel { grid-auto-columns: calc((100% - 24px) / 2); }
}
.howl-project-card {
    background: #fff; border: 1px solid var(--howl-line); border-radius: var(--howl-radius);
    overflow: hidden; display: block; transition: box-shadow .15s ease;
}
.howl-project-card:hover { box-shadow: 0 8px 20px rgba(20,30,50,.1); }
.howl-project-thumb {
    height: 170px;
    background: repeating-linear-gradient(45deg, #cfd4dc 0px, #cfd4dc 2px, #dde1e7 2px, #dde1e7 26px);
    display: flex; align-items: center; justify-content: center; color: #7a8393; flex-direction: column; gap: 8px;
}
.howl-project-thumb svg { width: 30px; height: 30px; opacity: .8; }
.howl-project-thumb span { font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.howl-project-body { padding: 20px; }
.howl-project-tags { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.howl-tag {
    font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 12px;
    background: var(--howl-bg-soft2); color: var(--howl-navy); letter-spacing: .02em; display: inline-block;
}
.howl-project-name { font-size: 16px; font-weight: 700; color: var(--howl-ink); }
.howl-project-loc { font-size: 13px; color: var(--howl-sub); margin-top: 4px; }
.howl-project-client { font-size: 12.5px; color: var(--howl-sub); margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--howl-line); }
.howl-project-client strong { color: var(--howl-ink); font-weight: 700; }
.howl-projects-more { text-align: center; margin-top: 44px; }

/* ===== 브랜드로고 ===== */
.howl-brands { background: #f1f2f4; padding: 72px 0; }
.howl-brands-head { text-align: center; }
.howl-brands-head .howl-eyebrow { display: block; }
.howl-brands-head .howl-section-title { font-size: 24px; margin-top: 8px; }
.howl-brand-row {
    margin-top: 40px; display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; padding: 32px 40px; background: #fff;
    border: 1px solid var(--howl-line); border-radius: var(--howl-radius);
}
/* 호버 시 글자가 커지며(폭이 실제로 늘어나 이웃을 밀어낸다) 브랜드 고유색이 나타난다.
   transform: scale은 레이아웃을 밀지 못하므로 font-size를 직접 키운다.
   고유색은 뷰에서 --brand-color 인라인 변수로 지정하고, 없으면 네이비. */
.howl-brand-word {
    font-size: 22px; font-weight: 800; color: #7a8393; letter-spacing: -0.01em; opacity: .85;
    transition: font-size .22s ease, color .22s ease, opacity .22s ease;
    cursor: default; line-height: 1.2;
}
.howl-brand-word:hover {
    font-size: 28px; opacity: 1;
    color: var(--brand-color, var(--howl-navy));
}
@media (prefers-reduced-motion: reduce) {
    .howl-brand-word { transition: none; }
}
/* 실제 로고 파일이 들어오면 워드마크 대신 렌더된다 — 비율 유지 + 높이만 고정.
   현재 홈 스트립은 워드마크로 고정돼 있다(제품 사진은 30px 높이에서 판독 불가). */
.howl-brand-logo { height: 30px; width: auto; max-width: 140px; object-fit: contain; }
.howl-brands-head { position: relative; }
.howl-brands-more {
    position: absolute; right: 0; bottom: 2px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; font-weight: 700; color: var(--howl-navy);
}
.howl-brands-more svg { width: 14px; height: 14px; }
.howl-brands-more:hover { text-decoration: underline; }

/* ===== 문의유도 배너 =====
   원래 어두운 현장 사진 위에 네이비 오버레이였으나 사진(slide01)이 라이언클럽 자료라 제거했다.
   대체 사진이 확보되면 그라데이션 뒤에 url() 레이어를 다시 추가하면 된다. */
.howl-cta-banner {
    position: relative; overflow: hidden; padding: 104px 0; text-align: center;
    background:
        linear-gradient(180deg, rgba(18,33,63,.55) 0%, rgba(18,33,63,.78) 100%),
        radial-gradient(1200px 500px at 50% 0%, #22406c 0%, var(--howl-navy-dark) 62%, #0c1a33 100%);
}
.howl-cta-banner .howl-wrap { position: relative; }
.howl-cta-banner h3 { font-size: 30px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.01em; }
.howl-cta-banner p { font-size: 15px; color: #c3cce2; margin: 14px 0 0; }
.howl-cta-banner .howl-btn { margin-top: 28px; }

/* ===== 회사소개: 인사말 ===== */
.howl-intro { padding-top: 96px; padding-bottom: 96px; }
.howl-intro-grid { margin-top: 48px; display: grid; grid-template-columns: 420px 1fr; gap: 56px; align-items: start; }
.howl-intro-photo {
    height: 480px; border-radius: var(--howl-radius); overflow: hidden;
    background: repeating-linear-gradient(45deg, #cfd4dc 0px, #cfd4dc 2px, #dde1e7 2px, #dde1e7 26px);
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: #7a8393;
}
/* 세로형 원본이라 박스(420x480)에 맞춰 채우고 넘치는 부분은 잘라낸다 */
.howl-intro-photo img { width: 100%; height: 100%; object-fit: cover; }
.howl-intro-photo svg { width: 34px; height: 34px; opacity: .8; }
.howl-intro-photo span { font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.howl-intro-copy .ceo-name { font-size: 14px; font-weight: 700; color: var(--howl-navy); letter-spacing: .02em; }
.howl-intro-copy h3 { font-size: 26px; font-weight: 800; line-height: 1.5; margin: 14px 0 0; color: var(--howl-ink); }
.howl-intro-copy p { font-size: 15px; color: var(--howl-sub); line-height: 1.9; margin: 20px 0 0; }
.howl-intro-sign { margin-top: 32px; font-size: 14px; font-weight: 700; color: var(--howl-ink); }
.howl-intro-sign span { display: block; font-size: 13px; font-weight: 600; color: var(--howl-sub); margin-top: 4px; }

/* ===== 경영철학 ===== */
.howl-philosophy { background: var(--howl-navy); padding: 56px 0; }
.howl-phil-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.howl-phil-card { text-align: center; padding: 28px 20px; border-right: 1px solid rgba(255,255,255,.14); }
.howl-phil-card:last-child { border-right: none; }
.howl-phil-num { font-size: 15px; font-weight: 800; color: var(--howl-accent); letter-spacing: .05em; }
.howl-phil-title { font-size: 18px; font-weight: 800; color: #fff; margin-top: 10px; }
.howl-phil-desc { font-size: 13px; color: #c3cce2; margin-top: 8px; line-height: 1.7; }

/* ===== 연혁(타임라인) ===== */
.howl-history { background: var(--howl-bg-soft); padding: 96px 0; }
.howl-timeline { margin-top: 56px; position: relative; }
.howl-timeline::before { content: ""; position: absolute; left: 120px; top: 6px; bottom: 6px; width: 2px; background: var(--howl-line); }
.howl-tl-item { display: grid; grid-template-columns: 120px 1fr; gap: 32px; padding: 0 0 40px; position: relative; }
.howl-tl-item:last-child { padding-bottom: 0; }
.howl-tl-year { font-size: 20px; font-weight: 800; color: var(--howl-navy); text-align: right; padding-top: 2px; }
.howl-tl-body { position: relative; background: #fff; border: 1px solid var(--howl-line); border-radius: var(--howl-radius); padding: 22px 24px; }
.howl-tl-body::before {
    content: ""; position: absolute; left: -38px; top: 26px; width: 11px; height: 11px; border-radius: 50%;
    background: var(--howl-navy); border: 3px solid var(--howl-bg-soft);
}
.howl-tl-tag { font-size: 11px; font-weight: 700; color: var(--howl-accent); letter-spacing: .04em; text-transform: uppercase; }
.howl-tl-title { font-size: 16px; font-weight: 700; color: var(--howl-ink); margin-top: 6px; }
.howl-tl-desc { font-size: 13.5px; color: var(--howl-sub); margin-top: 6px; line-height: 1.7; }

/* ===== 오시는길 ===== */
.howl-location { background: var(--howl-bg-soft); padding: 96px 0; }
.howl-loc-grid { margin-top: 48px; display: grid; grid-template-columns: 1fr 380px; gap: 24px; }
/* 지도 임베드 — iframe이 박스를 채우고, 우하단에 네이버 지도 바로가기를 얹는다 */
.howl-map {
    position: relative; height: 420px; overflow: hidden;
    border: 1px solid var(--howl-line); border-radius: var(--howl-radius); background: var(--howl-bg-soft2);
}
.howl-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.howl-map-link {
    position: absolute; right: 12px; bottom: 12px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: 20px; background: #fff;
    border: 1px solid var(--howl-line); box-shadow: 0 4px 12px rgba(20,30,50,.16);
    font-size: 13px; font-weight: 700; color: var(--howl-navy);
}
.howl-map-link:hover { background: var(--howl-navy); color: #fff; border-color: var(--howl-navy); }
.howl-map-link svg { width: 13px; height: 13px; flex: none; }

.howl-map-placeholder {
    height: 420px; border-radius: var(--howl-radius);
    background:
        repeating-linear-gradient(0deg, #e2e5ea 0px, #e2e5ea 1px, #eef0f3 1px, #eef0f3 40px),
        repeating-linear-gradient(90deg, #e2e5ea 0px, #e2e5ea 1px, #eef0f3 1px, #eef0f3 40px);
    border: 1px solid var(--howl-line);
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: #7a8393;
}
.howl-map-placeholder svg { width: 34px; height: 34px; opacity: .85; }
.howl-map-placeholder span { font-size: 13px; font-weight: 700; }
.howl-loc-info { background: #fff; border: 1px solid var(--howl-line); border-radius: var(--howl-radius); padding: 28px 26px; }
.howl-loc-info h4 { font-size: 17px; font-weight: 800; color: var(--howl-ink); margin: 0 0 18px; }
.howl-loc-row { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--howl-line); }
.howl-loc-row:first-of-type { border-top: none; }
.howl-loc-row .ic { width: 18px; height: 18px; flex: none; color: var(--howl-navy); margin-top: 1px; }
.howl-loc-row .ic svg { width: 18px; height: 18px; }
.howl-loc-row div { font-size: 13.5px; color: var(--howl-sub); line-height: 1.7; }
.howl-loc-row div strong { display: block; font-size: 12px; color: var(--howl-ink); font-weight: 700; margin-bottom: 2px; }

/* ===== 시공이력 목록 컨트롤(필터/뷰전환) ===== */
.howl-list-section { padding-top: 72px; padding-bottom: 96px; }
.howl-list-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 36px; }
.howl-filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.howl-filter-tab {
    padding: 10px 20px; font-size: 14px; font-weight: 700; color: var(--howl-sub);
    background: var(--howl-bg-soft); border: 1px solid var(--howl-line); border-radius: 22px; cursor: pointer;
}
.howl-filter-tab.active, a.howl-filter-tab.active { background: var(--howl-navy); color: #fff; border-color: var(--howl-navy); }
.howl-view-toggle { display: flex; gap: 2px; background: var(--howl-bg-soft2); border-radius: var(--howl-radius); padding: 3px; }
.howl-view-btn {
    display: flex; align-items: center; gap: 6px; padding: 9px 16px; font-size: 13px; font-weight: 700;
    color: var(--howl-sub); background: transparent; border: none; border-radius: 3px; cursor: pointer;
}
.howl-view-btn svg { width: 15px; height: 15px; }
.howl-view-btn.active { background: #fff; color: var(--howl-navy); box-shadow: 0 1px 3px rgba(20,30,50,.12); }

/* 현장유형 보조 필터 — 위 분야 탭보다 한 단계 약한 위계로 둔다 */
.howl-subfilter {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: -20px 0 32px; padding-bottom: 24px; border-bottom: 1px solid var(--howl-line);
}
.howl-subfilter-label { font-size: 12.5px; font-weight: 700; color: var(--howl-sub); margin-right: 4px; }
.howl-chip {
    font-size: 12.5px; font-weight: 600; color: var(--howl-sub);
    background: #fff; border: 1px solid var(--howl-line); border-radius: 20px; padding: 5px 13px;
    transition: border-color .15s ease, color .15s ease;
}
.howl-chip:hover { border-color: var(--howl-navy); color: var(--howl-navy); }
.howl-chip.active, a.howl-chip.active { background: var(--howl-bg-soft2); border-color: var(--howl-navy); color: var(--howl-navy); }

.howl-empty { padding: 56px 0; text-align: center; color: var(--howl-sub); font-size: 14px; }
.howl-empty a { margin-left: 8px; color: var(--howl-navy); font-weight: 700; text-decoration: underline; }

.howl-card-view { display: none; }
.howl-card-view.active { display: grid; }
.howl-table-view { display: none; }
.howl-table-view.active { display: block; }

/* ===== 페이저 ===== */
.howl-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 48px; }
.howl-pager-num, .howl-pager-btn {
    display: flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 10px;
    font-size: 13.5px; font-weight: 700; color: var(--howl-sub);
    background: #fff; border: 1px solid var(--howl-line); border-radius: var(--howl-radius);
    transition: border-color .15s ease, color .15s ease;
}
.howl-pager-num:hover, .howl-pager-btn:hover { border-color: var(--howl-navy); color: var(--howl-navy); }
.howl-pager-num.active, span.howl-pager-num.active {
    background: var(--howl-navy); border-color: var(--howl-navy); color: #fff;
}
.howl-pager-btn svg { width: 16px; height: 16px; }
.howl-pager-gap { min-width: 20px; text-align: center; color: var(--howl-sub); font-size: 13px; }

.howl-record-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--howl-line); }
.howl-record-table caption { text-align: left; font-size: 13px; color: var(--howl-sub); padding: 0 0 14px; caption-side: top; }
.howl-record-table thead th { background: var(--howl-navy); color: #fff; font-size: 13.5px; font-weight: 700; text-align: left; padding: 14px 18px; letter-spacing: .01em; }
.howl-record-table thead th:first-child { border-top-left-radius: var(--howl-radius); }
.howl-record-table thead th:last-child { border-top-right-radius: var(--howl-radius); }
.howl-record-table tbody td { padding: 16px 18px; font-size: 14px; color: var(--howl-ink); border-top: 1px solid var(--howl-line); }
.howl-record-table tbody tr:nth-child(even) { background: var(--howl-bg-soft); }
.howl-record-table tbody tr:hover { background: var(--howl-bg-soft2); }
.howl-record-table tbody a { font-weight: 700; color: var(--howl-navy); }
.howl-record-table tbody a:hover { text-decoration: underline; }
.howl-record-fields { display: flex; gap: 6px; flex-wrap: wrap; }
.howl-record-note { font-size: 12.5px; color: var(--howl-sub); margin-top: 14px; }

/* ===== 시공이력 상세 ===== */
.howl-detail-hero { padding: 56px 0 40px; }
.howl-detail-tags { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.howl-detail-tags .howl-tag { font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 14px; background: rgba(255,255,255,.15); color: #fff; letter-spacing: .02em; }
.howl-detail-hero h1 { font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -0.01em; margin: 14px 0 0; max-width: 800px; line-height: 1.4; }
.howl-detail-meta { display: flex; gap: 28px; margin-top: 22px; flex-wrap: wrap; }
.howl-detail-meta div { font-size: 13px; color: #c3cce2; }
.howl-detail-meta strong { display: block; font-size: 11px; font-weight: 700; color: #8b96ac; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.howl-detail-meta span { font-size: 15px; font-weight: 700; color: #fff; }

.howl-detail-body { padding-top: 72px; padding-bottom: 96px; }
.howl-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.howl-detail-block { margin-bottom: 56px; }
.howl-detail-block:last-child { margin-bottom: 0; }
.howl-block-title { font-size: 20px; font-weight: 800; color: var(--howl-ink); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.howl-block-title .num {
    width: 26px; height: 26px; border-radius: 50%; background: var(--howl-navy); color: #fff;
    font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none;
}
.howl-overview-text { font-size: 15px; color: var(--howl-sub); line-height: 1.9; white-space: pre-line; }

.howl-point-list { counter-reset: point; list-style: none; margin: 0; padding: 0; }
.howl-point-list li { counter-increment: point; display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--howl-line); }
.howl-point-list li:first-child { border-top: none; }
.howl-point-list li::before {
    content: counter(point); flex: none; width: 28px; height: 28px; border-radius: 50%;
    background: var(--howl-bg-soft2); color: var(--howl-navy); font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.howl-point-list .point-body { font-size: 14.5px; color: var(--howl-ink); line-height: 1.8; padding-top: 3px; }
.howl-point-list .point-body strong { display: block; font-size: 15px; font-weight: 700; margin-bottom: 4px; }

.howl-product-list { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.howl-product-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--howl-line); font-size: 14px; }
.howl-product-list li:first-child { border-top: none; }
.howl-product-list .p-name { font-weight: 700; color: var(--howl-ink); }
.howl-product-list .p-spec { color: var(--howl-sub); font-size: 13px; }

/* ===== 현장사진 갤러리 ===== */
.howl-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.howl-gallery-item {
    position: relative; display: block; padding: 0; height: 180px; cursor: zoom-in;
    border: 1px solid var(--howl-line); border-radius: var(--howl-radius); overflow: hidden;
    background: var(--howl-bg-soft2);
}
.howl-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.howl-gallery-item::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: rgba(10,16,30,.18); transition: opacity .3s ease;
}
.howl-gallery-item:hover img { transform: scale(1.06); }
.howl-gallery-item:hover::after { opacity: 0; }
.howl-gallery-item:focus-visible { outline: 2px solid var(--howl-navy); outline-offset: 2px; }
@media (hover: none) { .howl-gallery-item::after { opacity: 0; } }

/* ===== 라이트박스 ===== */
body.howl-lb-open { overflow: hidden; }
.howl-lightbox {
    position: fixed; inset: 0; z-index: 2000; background: rgba(8,12,22,.92);
    display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px;
}
.howl-lightbox[hidden] { display: none; }
.howl-lb-stage { margin: 0; max-width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 12px; }
.howl-lb-stage img {
    max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain;
    border-radius: var(--howl-radius); background: #0d1320;
}
.howl-lb-stage figcaption {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    color: #d7dce6; font-size: 13.5px; line-height: 1.6;
}
.howl-lb-count { color: #8f99ac; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.howl-lb-nav, .howl-lb-close {
    flex: none; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.1); border: none; border-radius: 50%; color: #fff; cursor: pointer;
    transition: background .2s ease;
}
.howl-lb-nav { width: 52px; height: 52px; }
.howl-lb-nav svg { width: 26px; height: 26px; }
.howl-lb-close { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; }
.howl-lb-close svg { width: 20px; height: 20px; }
.howl-lb-nav:hover, .howl-lb-close:hover { background: rgba(255,255,255,.22); }

.howl-video-embed {
    aspect-ratio: 16/9; border-radius: var(--howl-radius); background: #12213f;
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
    color: #c3cce2; border: 1px solid var(--howl-line); overflow: hidden;
}
.howl-video-embed iframe { width: 100%; height: 100%; border: 0; }
.howl-video-embed .play-ic { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
.howl-video-embed .play-ic svg { width: 22px; height: 22px; color: #fff; }
.howl-video-embed span { font-size: 13px; font-weight: 700; }

.howl-side-card { background: var(--howl-bg-soft); border: 1px solid var(--howl-line); border-radius: var(--howl-radius); padding: 24px 22px; position: sticky; top: 96px; }
.howl-side-card h4 { font-size: 15px; font-weight: 800; margin: 0 0 16px; color: var(--howl-ink); }
.howl-side-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--howl-line); font-size: 13.5px; }
.howl-side-row:first-of-type { border-top: none; }
.howl-side-row .k { color: var(--howl-sub); font-weight: 600; }
.howl-side-row .v { color: var(--howl-ink); font-weight: 700; text-align: right; }
.howl-side-cta { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.howl-side-cta .howl-btn { width: 100%; }

/* ===== 제품소개 ===== */
.howl-products-section { padding-top: 72px; padding-bottom: 96px; }

/* 브랜드 카드(기본) — 최초 제품 카드 디자인 그대로. 치수·간격을 바꾸지 말 것.
   제품 사진 대신 브랜드 로고가 들어가며, LogoUrl이 비어 있는 동안은 플레이스홀더가 렌더된다. */
.howl-product-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.howl-product-card { border: 1px solid var(--howl-line); border-radius: var(--howl-radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.howl-product-thumb {
    height: 200px;
    background: repeating-linear-gradient(45deg, #cfd4dc 0px, #cfd4dc 2px, #dde1e7 2px, #dde1e7 26px);
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: #7a8393;
}
.howl-product-thumb svg { width: 28px; height: 28px; opacity: .8; }
.howl-product-thumb span { font-size: 12px; font-weight: 700; }
/* 썸네일을 꽉 채우는 쪽을 택했다 — 비율이 제각각인 사진들의 레터박스 여백이 더 지저분해서.
   대신 원본 비율과 다른 만큼 잘려 나가므로(특히 세로형) 사진 교체 시 중앙 구도를 확인할 것. */
.howl-product-thumb img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.howl-product-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.howl-product-name { font-size: 16px; font-weight: 800; color: var(--howl-ink); margin-top: 2px; }
.howl-product-specs { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; }
.howl-product-specs li { font-size: 13px; color: var(--howl-sub); padding-left: 14px; position: relative; line-height: 1.6; }
.howl-product-specs li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--howl-navy); }
/* 상세보기(골드)를 공식 사이트 위에 두기 위해 세로로 쌓는다 */
.howl-product-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 4px; }
.howl-product-actions .howl-btn { width: 100%; padding: 11px 14px; font-size: 13px; gap: 6px; }

/* 브랜드 월(비교용 ?view=wall) — 27개를 한 화면에 담아야 하므로 타일은 작고 균일하게 둔다.
   로고 파일이 없어도 워드마크로 성립하고, LogoUrl이 채워지면 이미지로 자동 교체된다. */
.howl-brand-wall {
    margin-top: 40px; display: grid; gap: 1px;
    grid-template-columns: repeat(4, 1fr);
    background: var(--howl-line); border: 1px solid var(--howl-line);
}
.howl-brand-tile {
    position: relative; background: #fff; min-height: 132px; padding: 20px 16px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    transition: background .18s ease;
}
.howl-brand-tile:not(.is-static):hover { background: var(--howl-bg-soft); }
.howl-brand-tile .howl-brand-word {
    font-size: 17px; letter-spacing: .02em; line-height: 1.35;
    transition: color .18s ease, opacity .18s ease;
}
.howl-brand-tile:not(.is-static):hover .howl-brand-word { color: var(--howl-navy); opacity: 1; }
/* 워드마크 기준 40px였는데 지금 들어오는 건 제품 사진이라 그 높이로는 판독이 안 된다 */
.howl-brand-tile .howl-brand-logo { height: 72px; max-width: 100%; }
/* 외부 링크 아이콘 — 링크가 있는 타일에만, 호버 시에만 보인다 */
.howl-brand-tile-ic {
    position: absolute; top: 10px; right: 10px; color: var(--howl-sub);
    opacity: 0; transition: opacity .18s ease;
}
.howl-brand-tile-ic svg { width: 14px; height: 14px; display: block; }
.howl-brand-tile:hover .howl-brand-tile-ic { opacity: 1; }
@media (hover: none) { .howl-brand-tile-ic { opacity: .55; } }
.howl-brand-tile:focus-visible { outline: 2px solid var(--howl-navy); outline-offset: -2px; }

/* 카탈로그만 보고 이탈하지 않도록 하단에 문의 동선을 둔다 */
.howl-products-cta {
    margin-top: 72px; padding: 28px 32px; display: flex; align-items: center;
    justify-content: space-between; gap: 24px; flex-wrap: wrap;
    background: var(--howl-bg-soft); border: 1px solid var(--howl-line); border-radius: var(--howl-radius);
}
.howl-products-cta strong { display: block; font-size: 16px; font-weight: 800; color: var(--howl-ink); }
.howl-products-cta span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--howl-sub); line-height: 1.7; }

/* ===== 시공문의 ===== */
.howl-contact-section { padding-top: 56px; padding-bottom: 0; }
.howl-contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.howl-contact-card {
    display: flex; align-items: center; gap: 18px; padding: 26px 24px; border: 1px solid var(--howl-line);
    border-radius: var(--howl-radius); background: var(--howl-bg-soft); flex-wrap: wrap;
}
.howl-contact-card .ic {
    width: 52px; height: 52px; border-radius: 50%; background: var(--howl-navy); color: #fff;
    display: flex; align-items: center; justify-content: center; flex: none;
}
.howl-contact-card .ic svg { width: 24px; height: 24px; }
.howl-contact-card h4 { font-size: 16px; font-weight: 800; margin: 0 0 4px; color: var(--howl-ink); }
.howl-contact-card p { font-size: 13.5px; color: var(--howl-sub); margin: 0; }
.howl-contact-card .cta { margin-left: auto; flex: none; }

.howl-form-section { padding-top: 64px; padding-bottom: 96px; }
.howl-form-layout { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
.howl-inquiry-form { border: 1px solid var(--howl-line); border-radius: var(--howl-radius); padding: 40px; background: #fff; }
.howl-form-group { margin-bottom: 26px; }
.howl-form-group:last-child { margin-bottom: 0; }
.howl-form-label { display: block; font-size: 14px; font-weight: 700; color: var(--howl-ink); margin-bottom: 10px; }
.howl-form-label .req { color: #c0392b; margin-left: 3px; }
.howl-form-control {
    width: 100%; padding: 12px 14px; font-size: 14px; border: 1.5px solid var(--howl-line);
    border-radius: var(--howl-radius); color: var(--howl-ink); font-family: inherit; background: #fff;
}
.howl-form-control:focus {
    outline: none; border-color: var(--howl-navy); box-shadow: 0 0 0 3px rgba(26,47,94,.15);
}
textarea.howl-form-control { resize: vertical; min-height: 110px; }
.howl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.howl-checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--howl-ink); font-weight: 600; }
.howl-checkbox-item input { width: 18px; height: 18px; accent-color: var(--howl-navy); cursor: pointer; }
/* 개인정보 수집·이용 동의 — 안내 박스 + 필수 체크 */
.howl-privacy-box {
    font-size: 12.5px; color: var(--howl-sub); line-height: 1.7;
    background: var(--howl-bg-soft); border: 1px solid var(--howl-line);
    border-radius: var(--howl-radius); padding: 14px 16px; margin-bottom: 12px;
}
.howl-privacy-box b { display: block; color: var(--howl-ink); font-size: 13px; margin-bottom: 6px; }
.howl-privacy-box ul { margin: 0 0 6px; padding-left: 18px; }
.howl-privacy-box a { color: var(--howl-navy); font-weight: 700; text-decoration: underline; }
.howl-privacy-check { cursor: pointer; }
.howl-privacy-check .req { color: #c0392b; }
.howl-file-drop {
    border: 1.5px dashed var(--howl-line); border-radius: var(--howl-radius); padding: 28px; text-align: center;
    color: var(--howl-sub); font-size: 13.5px; background: var(--howl-bg-soft);
}
.howl-file-drop svg { width: 26px; height: 26px; margin: 0 auto 10px; color: #7a8393; }
.howl-form-hint { font-size: 12.5px; color: var(--howl-sub); margin-top: 8px; }
.howl-form-submit { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--howl-line); }
.howl-form-submit .howl-btn { width: 100%; padding: 16px; font-size: 16px; }
.howl-form-submit p { font-size: 12.5px; color: var(--howl-sub); margin: 12px 0 0; text-align: center; }

.howl-info-card { background: var(--howl-bg-soft); border: 1px solid var(--howl-line); border-radius: var(--howl-radius); padding: 26px 24px; position: sticky; top: 96px; }
.howl-info-card h4 { font-size: 15px; font-weight: 800; margin: 0 0 16px; }
.howl-info-card ol { counter-reset: step; display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
.howl-info-card li { counter-increment: step; display: flex; gap: 12px; font-size: 13px; color: var(--howl-sub); line-height: 1.6; }
.howl-info-card li::before {
    content: counter(step); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--howl-navy);
    color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.howl-info-card li strong { display: block; color: var(--howl-ink); font-weight: 700; margin-bottom: 2px; }

/* ===== 푸터 ===== */
.howl-footer { background: var(--howl-navy-dark); color: #aab4c8; padding: 56px 0 32px; }
.howl-footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.1); }
/* 푸터는 네이비 배경이라 원본(검정/녹색) 로고가 묻힌다.
   흰색 반전 버전 파일을 따로 두는 대신 필터로 단색 화이트 처리한다. */
.howl-footer-word img { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.howl-footer-info { font-size: 13px; line-height: 1.9; margin-top: 14px; color: #8b96ac; }
.howl-footer-links { display: flex; gap: 28px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.howl-footer-links a { font-size: 13px; color: #c3cce2; font-weight: 600; }
.howl-footer-links a:hover { color: #fff; }
.howl-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; flex-wrap: wrap; gap: 16px; }
.howl-footer-copy { font-size: 12px; color: #77839c; }
.howl-footer-sns { display: flex; gap: 12px; }
.howl-sns-dot {
    width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center; color: #c3cce2;
}
.howl-sns-dot svg { width: 16px; height: 16px; }

/* ===== 우측 플로팅 사이드바 ===== */
.howl-float-sidebar {
    position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 1030;
    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--howl-line);
    border-radius: 12px; box-shadow: 0 8px 24px rgba(20,30,50,.12); overflow: hidden;
}
.howl-float-item {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--howl-line);
    cursor: pointer; min-width: 52px; background: none; border-left: none; border-right: none; border-top: none;
}
.howl-float-item:last-child { border-bottom: none; }
.howl-float-item .ic { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--howl-navy); }
.howl-float-item .ic svg, .howl-float-item .ic i { width: 20px; height: 20px; font-size: 20px; }
/* 평소에는 아이콘만 보이고, 사이드바에 마우스를 올리면 라벨이 옆으로 펼쳐진다(2026-08 클라이언트 요청).
   개별 항목이 아니라 사이드바 전체 호버 기준이라 목록을 훑는 동안 폭이 출렁이지 않는다.
   키보드 사용자를 위해 focus-within에서도 펼친다.
   모바일에서는 아래 미디어쿼리가 라벨을 display:none으로 감춰 아이콘 바만 남는다. */
.howl-float-label {
    font-size: 12px; font-weight: 700; color: var(--howl-ink); white-space: nowrap;
    max-width: 0; opacity: 0; overflow: hidden;
    transition: max-width .25s ease, opacity .2s ease;
}
.howl-float-sidebar:hover .howl-float-label,
.howl-float-sidebar:focus-within .howl-float-label { max-width: 110px; opacity: 1; }
.howl-float-item:hover { background: var(--howl-bg-soft); }
@media (prefers-reduced-motion: reduce) {
    .howl-float-label { transition: none; }
}

/* ===== 모바일 반응형 ===== */
@media (max-width: 768px) {
    .howl-wrap { padding: 0 20px; }
    .howl-header-inner { padding: 0 16px; height: 64px; }
    .howl-wordmark img { height: 26px; }
    .howl-main-menu { display: none; }
    .howl-menu-toggle { display: flex; }

    .howl-hero { height: 520px; }
    .howl-hero-content { padding: 0 20px 64px; }
    .howl-hero-dots { bottom: 22px; }
    .howl-hero-arrow { width: 38px; height: 38px; }
    .howl-hero-arrow svg { width: 16px; height: 16px; }
    .howl-hero-arrow.prev { left: 12px; }
    .howl-hero-arrow.next { right: 12px; }
    .howl-hero-copy { min-height: 158px; }
    .howl-hero-line--head { font-size: 27px; }
    .howl-hero-line--sub { font-size: 14px; max-width: 100%; }
    .howl-hero-cta { flex-wrap: wrap; }

    .howl-about { padding-top: 56px; padding-bottom: 56px; }
    .howl-about-inner { grid-template-columns: 1fr; gap: 28px; }
    .howl-about-photo { height: 240px; }
    .howl-about-point { flex-direction: column; gap: 4px; }
    .howl-about-point b { width: auto; }

    .howl-section-title { font-size: 24px; }

    .howl-projects { padding: 56px 0; }
    .howl-project-grid { grid-template-columns: 1fr; gap: 16px; }
    .howl-project-grid.howl-cols-3 { grid-template-columns: 1fr; }
    /* 캐러셀: 모바일은 열 1개(카드 2장) + 다음 열 살짝 보이게 — 옆으로 넘길 수 있음을 암시 */
    .howl-project-carousel { grid-auto-columns: 86%; gap: 16px; margin-top: 32px; }

    .howl-brands { padding: 48px 0; }
    .howl-brand-row { padding: 24px 20px; justify-content: center; gap: 24px; }

    .howl-cta-banner { padding: 64px 0; }
    .howl-cta-banner h3 { font-size: 22px; }

    .howl-page-hero { padding: 40px 0 32px; }
    .howl-page-hero h1 { font-size: 26px; }

    .howl-intro { padding-top: 56px; padding-bottom: 56px; }
    .howl-intro-grid { grid-template-columns: 1fr; gap: 28px; }
    .howl-intro-photo { height: 280px; }
    .howl-intro-copy h3 { font-size: 20px; }

    .howl-philosophy { padding: 36px 0; }
    .howl-phil-inner { grid-template-columns: 1fr; gap: 0; }
    .howl-phil-card { border-right: none; border-bottom: 1px solid rgba(255,255,255,.14); padding: 20px 12px; }
    .howl-phil-card:last-child { border-bottom: none; }

    .howl-history { padding: 56px 0; }
    .howl-timeline::before { left: 8px; }
    .howl-tl-item { grid-template-columns: 1fr; gap: 8px; }
    .howl-tl-year { text-align: left; padding-left: 26px; }
    .howl-tl-body { margin-left: 26px; }
    .howl-tl-body::before { left: -26px; }

    .howl-location { padding: 56px 0; }
    .howl-loc-grid { grid-template-columns: 1fr; }
    .howl-map, .howl-map-placeholder { height: 280px; }

    .howl-list-section { padding-top: 48px; padding-bottom: 56px; }
    .howl-list-controls { flex-direction: column; align-items: flex-start; }
    .howl-record-table { font-size: 13px; }
    .howl-record-table thead th, .howl-record-table tbody td { padding: 12px 10px; }

    .howl-detail-hero { padding: 36px 0 28px; }
    .howl-detail-hero h1 { font-size: 22px; }
    .howl-detail-meta { gap: 18px; }
    .howl-detail-body { padding-top: 48px; padding-bottom: 56px; }
    .howl-detail-grid { grid-template-columns: 1fr; gap: 32px; }
    .howl-side-card { position: static; }
    .howl-block-title { font-size: 18px; }
    .howl-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .howl-gallery-item { height: 130px; }
    /* 좁은 화면에선 화살표 버튼이 사진 폭을 잡아먹는다 — 크기를 줄이고 여백을 좁힌다 */
    .howl-lightbox { padding: 16px 4px; gap: 2px; }
    .howl-lb-nav { width: 38px; height: 38px; }
    .howl-lb-nav svg { width: 20px; height: 20px; }
    .howl-lb-close { top: 12px; right: 12px; }
    .howl-lb-stage figcaption { flex-direction: column; align-items: flex-start; gap: 4px; }

    .howl-products-section { padding-top: 48px; padding-bottom: 56px; }
    .howl-product-grid { grid-template-columns: 1fr; gap: 16px; }
    .howl-brand-wall { grid-template-columns: repeat(3, 1fr); }
    .howl-brand-tile { min-height: 96px; padding: 16px 10px; }
    .howl-brand-tile .howl-brand-logo { height: 56px; }
    .howl-brand-tile .howl-brand-word { font-size: 14px; }
    .howl-products-cta { margin-top: 48px; padding: 22px 20px; }
    /* 브랜드 스트립 헤드의 "전체 보기"는 겹치지 않게 흐름 배치로 되돌린다 */
    .howl-brands-more { position: static; display: inline-flex; margin-top: 10px; }

    .howl-contact-section { padding-top: 40px; padding-bottom: 0; }
    .howl-contact-cards { grid-template-columns: 1fr; }
    .howl-contact-card .cta { margin-left: 0; width: 100%; }
    .howl-contact-card .cta .howl-btn { width: 100%; }

    .howl-form-section { padding-top: 40px; padding-bottom: 56px; }
    .howl-form-layout { grid-template-columns: 1fr; gap: 28px; }
    .howl-info-card { position: static; }
    .howl-inquiry-form { padding: 24px 20px; }
    .howl-form-row { grid-template-columns: 1fr; gap: 0; }

    .howl-footer-top { flex-direction: column; gap: 24px; }
    .howl-footer-links { gap: 20px; flex-wrap: wrap; }
    .howl-footer-bottom { flex-direction: column; align-items: flex-start; }

    /* 우측 플로팅 사이드바 → 하단 고정 아이콘 바로 전환 (tech-design.md §5-3) */
    .howl-float-sidebar {
        right: 12px; top: auto; bottom: 16px; transform: none; flex-direction: row; border-radius: 30px;
    }
    .howl-float-item { padding: 10px; border-bottom: none; border-right: 1px solid var(--howl-line); min-width: auto; }
    .howl-float-item:last-child { border-right: none; }
    .howl-float-item .ic { width: 18px; height: 18px; }
    .howl-float-item .ic svg, .howl-float-item .ic i { width: 18px; height: 18px; font-size: 18px; }
    .howl-float-label { display: none; }
}

@media (max-width: 480px) {
    .howl-header-inner { height: 58px; }
    .howl-wordmark img { height: 22px; }
    .howl-hero { height: 480px; }
    .howl-hero-copy { min-height: 150px; }
    .howl-hero-line--head { font-size: 23px; }
    .howl-page-hero h1 { font-size: 22px; }
    .howl-detail-hero h1 { font-size: 19px; }
    .howl-brand-word { font-size: 18px; }
    .howl-brand-wall { grid-template-columns: repeat(2, 1fr); }
    .howl-record-table { display: block; overflow-x: auto; white-space: nowrap; }
    .howl-float-item { padding: 8px; }
}