/* ============================================================
   brand.css — 브랜드 제품소개 페이지 (brand.php / brand_detail.php)
   ★ 사이트 내부 페이지다. 자체 상단바·푸터 없이 hp_header/hp_footer 를 쓰므로
     모든 규칙은 .brand-page / .hero / .peerbar 안쪽으로 가둔다.
     ★ 전역 이름(.one .card .grid .chips .sec .b .n)을 그대로 쓰면 헤더 드롭다운
       (.hpx-drop.one — 전국·음반·세운)과 부딪힌다. 실제로 깨졌다: var(--card) 가
       .brand-page 밖에서는 정의가 없어 background 가 통째로 무효 → 배경 투명.
       스코프에 더해 이름 자체도 .bp-solo 로 바꿨다. 절대 되돌리지 말 것.
   구성: 히어로 → 회사정보·연락처 → 행사배너 → 제품소개
   ============================================================ */
.brand-page{
  --fg:#16161a; --sub:#55555c; --mut:#9a9aa2; --line:#ececef;
  --card:#f3f2ee; --pill:#fff; --pill-line:#dcdce0; --on-bg:#16161a; --on-fg:#fff;
  font-family:'Pretendard',-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  color:var(--fg);line-height:1.5;padding-bottom:70px;
}
.brand-page *{box-sizing:border-box;}
.brand-page a{color:inherit;text-decoration:none;}
.brand-page img{display:block;max-width:100%;}
.brand-page .wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ── 같은 유형 업체 목록 (사이트 메뉴 바로 아래) ── */
.peerbar{border-bottom:1px solid #ececef;background:#fff;
         font-family:'Pretendard',-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;}
.peerbar *{box-sizing:border-box;}
.peerbar .pb-in{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:14px;height:52px;}
.peerbar .pb-lb{flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:1px;color:#9a9aa2;
                padding-right:14px;border-right:1px solid #ececef;}
.peerbar .pb-ls{flex:1 1 auto;display:flex;gap:20px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;}
.peerbar .pb-ls::-webkit-scrollbar{display:none;}
.peerbar .pb-ls a{flex:0 0 auto;font-size:14px;color:#55555c;text-decoration:none;padding:4px 0;
                  border-bottom:2px solid transparent;}
.peerbar .pb-ls a:hover{color:#16161a;}
.peerbar .pb-ls a.on{color:#16161a;font-weight:700;border-bottom-color:#16161a;}
.peerbar .pb-all{flex:0 0 auto;font-size:12.5px;color:#9a9aa2;text-decoration:none;padding-left:14px;border-left:1px solid #ececef;}
.peerbar .pb-all:hover{color:#16161a;}

/* ── 히어로 (맨 위: 최근 올린 제품 / 배너) ── */
.hero{position:relative;display:flex;align-items:flex-end;height:420px;overflow:hidden;background:#16161a;color:#fff;
      font-family:'Pretendard',-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;}
.hero *{box-sizing:border-box;}
.hero .bg{position:absolute;top:-2%;left:-2%;right:-2%;bottom:-2%;background-position:center;background-size:cover;
          animation:kenburns 22s ease-in-out infinite alternate;opacity:0;transition:opacity 1s ease;}
.hero .bg.on{opacity:1;}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero .ov{position:absolute;top:0;left:0;right:0;bottom:0;
          background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,.66) 100%);}
.hero .in{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:0 24px 34px;
          opacity:0;transform:translateY(22px);animation:rise .9s .1s ease forwards;}
@keyframes rise{to{opacity:1;transform:none}}
.hero .hl{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:1.5px;padding:4px 11px;
          border:1px solid rgba(255,255,255,.55);border-radius:999px;margin-bottom:12px;}
.hero .hp{font-size:clamp(20px,3vw,30px);font-weight:600;letter-spacing:-.5px;}
.hero .nm{font-size:clamp(26px,4vw,42px);font-weight:600;letter-spacing:-1.1px;line-height:1.1;}
.hero .ds{font-size:clamp(13px,1.7vw,16px);color:#e6e6ea;margin-top:10px;line-height:1.6;max-width:760px;}
.hero .dots{position:absolute;bottom:16px;right:24px;display:flex;gap:8px;z-index:3;}
.hero .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:background .25s,transform .25s;}
.hero .dot.on{background:#fff;transform:scale(1.2);}
/* 제품 사진은 세로로 더 크게 — 기기가 잘리지 않도록 */
.hero.prod{height:72vh;min-height:460px;max-height:800px;}

/* ── 회사 정보 · 연락처 ── */
.brand-page .cmp{padding:34px 0 6px;}
/* 히어로가 없을 때(=올린 제품이 아직 없을 때) 페이지가 허전하지 않게 위를 띄운다 */
.brand-page.nohero .cmp{padding-top:48px;}
.brand-page.nohero .sec{padding-top:10px;}
.brand-page .cmp .ch{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 14px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.brand-page .cmp .ch .lg{height:40px;width:auto;align-self:center;}
.brand-page .cmp .ch h1{font-size:clamp(22px,3.2vw,32px);font-weight:700;letter-spacing:-.8px;line-height:1.2;margin:0;}
.brand-page .cmp .ch .tl{font-size:14.5px;color:var(--sub);}
.brand-page .cmp .ch .mg{margin-left:auto;display:inline-flex;align-items:center;height:34px;padding:0 15px;
             border:1px solid var(--pill-line);border-radius:999px;font-size:13px;font-weight:600;background:var(--pill);}
.brand-page .cmp .ch .mg:hover{background:var(--on-bg);color:var(--on-fg);border-color:var(--on-bg);}
.brand-page .cmp .cb{display:flex;flex-wrap:wrap;gap:26px 56px;padding:22px 0 4px;}
.brand-page .cmp .cl{flex:1 1 480px;min-width:0;}
.brand-page .cmp .cl .tx{font-size:15px;line-height:1.9;color:var(--sub);white-space:pre-line;word-break:keep-all;max-width:620px;}
.brand-page .cmp .cl .tx.no{color:var(--mut);}
/* 사진은 건물 사진일 수도, 로고일 수도 있다 — 어느 쪽이든 커지지 않게 높이로 묶는다 */
.brand-page .cmp .cl .ph{margin-top:20px;}
.brand-page .cmp .cl .ph img{width:auto;max-width:260px;max-height:150px;object-fit:contain;border-radius:8px;}
.brand-page .cmp .ci{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0;flex:0 0 340px;
         font-size:14px;line-height:1.6;align-content:start;}
.brand-page .cmp .ci dt{color:var(--mut);font-size:13px;margin:0;}
.brand-page .cmp .ci dd{color:var(--fg);margin:0;word-break:break-all;}
.brand-page .cmp .ci a{color:#1457b0;}
.brand-page .cmp .ci a:hover{text-decoration:underline;}
.brand-page .cmp .ci .mp{display:inline-block;margin-left:7px;font-size:12px;padding:1px 9px;border:1px solid var(--pill-line);
             border-radius:10px;color:var(--mut);}

/* ── 행사 배너 ── */
.brand-page .evbanner{height:62px;overflow:hidden;display:flex;align-items:center;font-size:19px;font-weight:500;letter-spacing:-.3px;margin-top:30px;}
.brand-page .evbanner-in{width:100%;text-align:center;padding:0 16px;white-space:nowrap;}
.brand-page .evfx-marquee .evbanner-in{display:inline-block;padding-left:100%;animation:evmq 12s linear infinite;}
@keyframes evmq{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
.brand-page .evfx-blink{animation:evbl 1s steps(1) infinite;}
@keyframes evbl{0%,49%{opacity:1}50%,100%{opacity:.3}}
.brand-page .evbanner-img{display:block;margin-top:30px;}
.brand-page .evbanner-img img{width:100%;}

/* ── 브랜드 칩 ── */
.brand-page .chips{display:flex;flex-wrap:wrap;gap:8px;padding:32px 0 0;}
.brand-page .chips a{display:inline-flex;align-items:center;height:36px;padding:0 16px;border:1px solid var(--pill-line);
         border-radius:999px;font-size:13.5px;font-weight:500;background:var(--pill);}
.brand-page .chips a.on, .brand-page .chips a:hover{background:var(--on-bg);color:var(--on-fg);border-color:var(--on-bg);}
.brand-page .chips .all{border-style:dashed;}

/* ── 제품 목록 ── */
.brand-page .sec{padding:26px 0 0;}
.brand-page .gh{font-size:13px;letter-spacing:3px;color:var(--mut);margin:42px 0 18px;text-transform:uppercase;}
.brand-page .gh:first-child{margin-top:10px;}
.brand-page .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px;}
.brand-page .card{display:block;}
.brand-page .card .tw{overflow:hidden;border-radius:12px;background:var(--card);position:relative;padding-bottom:100%;}
.brand-page .card .thumb{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center;background-size:cover;transition:transform .6s ease;}
.brand-page .card:hover .thumb{transform:scale(1.06);}
.brand-page .card .b{font-size:12px;color:var(--mut);margin-top:12px;}
.brand-page .card .n{font-size:14.5px;font-weight:500;margin-top:3px;line-height:1.45;}
.brand-page .soon{text-align:center;color:var(--mut);padding:64px 0;background:var(--card);border-radius:14px;font-size:14.5px;margin-top:8px;}

/* ── 상세 ── */
.brand-page .dcrumb{border-bottom:1px solid var(--line);margin-bottom:6px;}
.brand-page .dcrumb a{display:inline-block;padding:15px 0;font-size:13.5px;color:var(--sub);}
.brand-page .dcrumb a:hover{color:var(--fg);}
.brand-page .dwrap{max-width:980px;margin:0 auto;padding:0 24px;}
.brand-page .dhd{padding:28px 0 20px;}
.brand-page .dhd .b{font-size:13px;color:var(--mut);letter-spacing:.5px;}
.brand-page .dhd h1{font-size:clamp(23px,3.2vw,32px);font-weight:700;letter-spacing:-.8px;line-height:1.25;margin:6px 0 0;}
.brand-page .dhd .ct{font-size:13px;color:var(--mut);margin-top:8px;}
.brand-page .gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:14px;background:var(--card);scrollbar-width:none;}
.brand-page .gal::-webkit-scrollbar{display:none;}
.brand-page .gal .gs{flex:0 0 100%;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;height:min(66vh,620px);}
.brand-page .gal .gs img{max-width:100%;max-height:100%;object-fit:contain;}
.brand-page .bp-solo{border-radius:14px;overflow:hidden;background:var(--card);}
.brand-page .bp-solo img{width:100%;}
.brand-page .thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;}
.brand-page .thumbs button{flex:0 0 72px;height:72px;border:2px solid transparent;border-radius:8px;overflow:hidden;background:var(--card);cursor:pointer;padding:0;}
.brand-page .thumbs button.on{border-color:var(--fg);}
.brand-page .thumbs img{width:100%;height:100%;object-fit:cover;}
.brand-page .dbody{margin-top:34px;font-size:15.5px;line-height:1.85;color:var(--sub);word-break:keep-all;overflow-wrap:anywhere;}
.brand-page .dbody img{max-width:100%;height:auto;margin:14px auto;border-radius:8px;}
.brand-page .dbody h1, .brand-page .dbody h2, .brand-page .dbody h3{color:var(--fg);margin:26px 0 10px;line-height:1.35;}
.brand-page .dbody p{margin:0 0 12px;}
.brand-page .dbody ul, .brand-page .dbody ol{padding-left:22px;margin:0 0 12px;}
.brand-page .dbody a{color:#1457b0;text-decoration:underline;}
.brand-page .dback{margin:44px 0 10px;text-align:center;}
.brand-page .dback a{display:inline-flex;align-items:center;height:44px;padding:0 26px;border:1px solid var(--pill-line);border-radius:999px;font-size:14px;}
.brand-page .dback a:hover{background:var(--on-bg);color:var(--on-fg);border-color:var(--on-bg);}
.brand-page .hidden-note{margin-top:18px;padding:12px 16px;border-radius:10px;background:#fff4e0;color:#8a5a00;font-size:13.5px;}
.brand-page .own-btn{display:inline-flex;margin-left:10px;height:30px;align-items:center;padding:0 12px;
         border:1px solid var(--pill-line);border-radius:8px;font-size:12.5px;vertical-align:middle;}

@media (max-width:1100px){ .brand-page .grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){
  .brand-page .wrap, .brand-page .dwrap, .peerbar .pb-in{padding:0 16px;}
  .peerbar .pb-in{gap:10px;height:48px;}
  .peerbar .pb-ls{gap:14px;}
  .peerbar .pb-all{display:none;}
  .hero{height:52vh;min-height:300px;}
  .hero.prod{height:64vh;min-height:380px;max-height:none;}
  .hero .in{padding:0 16px 26px;}
  .brand-page .cmp .cb{gap:22px;}
  .brand-page .cmp .ci{flex-basis:100%;}
  .brand-page .grid{grid-template-columns:repeat(2,1fr);gap:20px 14px;}
  .brand-page .gal .gs{height:58vh;}
  .brand-page .thumbs button{flex-basis:58px;height:58px;}
}