@charset "utf-8";
/******************************************************************
    구해줘 부산 방충망 — 브랜드 컬러 시스템
    디자인 브리프 4장(컬러 시스템) 기준.
    main.css 이후에 로드되어 템플릿 기본값(검정 CTA)을 덮어쓴다.
******************************************************************/

/* 로고에서 추출한 실제 브랜드 컬러: 남색 #2e3163, 주황(코랄) #e58058 */
:root {
    /* 신뢰 컬러 — 헤더/푸터/주요 제목. 흰 글씨 대비 12.1:1 */
    --navy: #2e3163;
    --navy-dark: #22254a;

    /* 로고 주황 그대로 — 아이콘, 포인트, 보더용.
       흰 글씨 대비가 2.78:1 뿐이라 버튼 배경으로는 쓰지 말 것. */
    --brand-orange: #e58058;

    /* CTA 전용 주황 — 로고 주황을 어둡게 조정해 흰 글씨 대비 4.91:1 (WCAG AA 통과) */
    --cta-orange: #b85228;
    --cta-orange-hover: #9e4522;

    /* 옅은 오렌지 강조 배경 — 견적문의 배너 등 */
    --accent-bg: #fdf1ea;

    /* 본문/배경 */
    --charcoal: #222;
    --gray-bg: #f8f8f8;

    --focus-ring: #b85228;

    /* 이 너비 미만에서는 레이아웃을 더 접지 않고 가로 스크롤로 넘긴다.
       (smkorics 테마와 동일 기준 320px) */
    --gw-min-width: 320px;
}

/******************************************************************
    최소 폭 — 320px 미만에서 레이아웃 고정
    gw.css 는 html·body 를 모두 overflow-x:hidden 으로 두는데,
    html 까지 hidden 이면 뷰포트가 --gw-min-width 보다 좁을 때
    가로 스크롤이 생기지 않아 본문 오른쪽이 잘린 채 볼 수 없다.
    스크롤 주체는 html 로 두고, body 는 내부 요소의 가로 넘침을 계속 잘라낸다.
******************************************************************/

html { overflow-x: auto; }
body { overflow-x: hidden; }
html, body { min-width: var(--gw-min-width); }

/* position:fixed 요소는 body 의 min-width 를 물려받지 않아 따로 지정해야
   가로 스크롤 시 본문과 함께 늘어난다 */
#hd,
#mob-gnb,
.mob-cta-bar { min-width: var(--gw-min-width); }

/* CTA 버튼 — 검정 고스트 버튼을 주황 솔리드로 교체 */
.gw-main-btn01 {
    border-color: var(--brand-orange);
    background: var(--brand-orange);
    color: #fff;
}
.gw-main-btn01:before { background: var(--cta-orange); }
.gw-main-btn01:hover { color: #fff; }

/* 어두운 배경 위 CTA는 흰 테두리 대신 주황을 유지하되 대비 확보 */
.gw-color-fff .gw-main-btn01,
#gw-theme02-main-location .gw-main-btn01,
#gw-theme02-main-banner .gw-main-btn01 {
    border-color: var(--cta-orange);
    background: var(--cta-orange);
    color: #fff;
}

/* main.css 는 이 배너 버튼의 호버 글자색을 #000 으로 되돌린다(특이도가 더 높음).
   주황 배경 위 검은 글씨가 되므로 흰색으로 유지한다. */
#gw-theme02-main-banner .gw-img-container:hover .gw-main-btn01 { color: #fff; }

/* 카드형 화살표 버튼 */
.gw-small-btn { background: var(--cta-orange); color: #fff; }
.gw-small-btn:hover { background: var(--cta-orange-hover); }

/* gw-btn01 채움 호버가 좁은 화면(≤1280)에서 꺼져 있어 되살린다 */
.gw-btn01::before { display: block; }
.gw-btn01:hover::before { width: 150%; }
.gw-btn01:hover { color: #fff; border-color: #000; }

/* 주요 제목 — 남색 (main.css 의 padding-bottom:80px 를 줄인다) */
.gw-sec-title {
    padding-bottom: 48px;
    font-size: 48px;
    color: var(--navy);
}

/* 소제목(영문 라벨) — main.css 의 margin-bottom:20px, font-size:var(--main-title04) 를 줄인다 */
.gw-sec-sub-title {
    margin-bottom: 12px;
    font-size: 18px;
}

/* 화면이 좁아지면 제목을 줄인다 (테마 responsive.css 와 같은 분기점) */
@media screen and (max-width: 1280px) {
    .gw-sec-title { padding-bottom: 40px; font-size: 40px; }
}
@media screen and (max-width: 768px) {
    .gw-sec-title { padding-bottom: 32px; font-size: 32px; }
    .gw-sec-sub-title { margin-bottom: 8px; font-size: 16px; }
}
@media screen and (max-width: 576px) {
    .gw-sec-title { padding-bottom: 28px; font-size: 26px; }
}

/* 강조 배경 밴드 */
.gw-accent-band { background: var(--accent-bg); }

/* 강조 문구 */
.gw-emphasis { color: var(--cta-orange); font-weight: 700; }

/******************************************************************
    메인 히어로 배너
    배경 사진이 밝아 흰 글씨가 묻히므로 어두운 색으로 바꾼다.
    (스킨: skin/banner/design_1/style.css 를 덮어씀)
******************************************************************/

/* 문구는 왼쪽 정렬. 스킨은 가운데 정렬(align-items:center)로 잡혀 있다. */
#gw-theme-main-visual .gw-main-visual-text-con {
    align-items: flex-start;
    color: #000;
    text-align: left;
}
#gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div { color: #000; }
#gw-theme-main-visual .gw-main-visual-text-con > * { width: auto; }

/* 본문 컨테이너(1500px)와 같은 선에서 시작하게 들여쓴다.
   화면이 좁으면 최소 20px 을 유지한다. */
#gw-theme-main-visual .gw-main-visual-text-con {
    padding-left: max(20px, calc((100vw - 1500px) / 2));
    padding-right: 20px;
}

/* 배경 사진을 살짝 눌러 검은 글씨가 잘 읽히게 한다 */
#gw-theme-main-visual .swiper-slide { position: relative; }
#gw-theme-main-visual .swiper-slide:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .3);
}

/* 두 번째 줄을 제목과 같은 크기로 키우고 바로 붙인다 */
#gw-theme-main-visual .gw-main-visual-text-con { gap: 8px; }
#gw-theme-main-visual .gw-bottom-container { min-height: auto; }
/* 스킨의 `.gw-bottom-container > div` 규칙이 특이도(1,2,1)로 더 높으므로
   같은 형태에 클래스를 하나 더 얹어(1,3,1) 이긴다. */
#gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div.gw-main-visual-text02 {
    font-size: 70px;
    font-family: 'NEXON Lv1 Gothic OTF', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
}
#gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div.gw-main-visual-text03 {
    margin-top: 24px;
    font-size: 20px;
}
#gw-theme-main-visual .gw-main-visual-text01 { line-height: 1.2; }

/* 배너 '문의하기' 버튼 — CodePen davidicus/emgQKJ 의 4번(btn-4) 광택 효과를 원본 그대로 적용.
   btn-4 원본: 버튼은 색 변화 없이, hover 시 흰 대각선 광택(::after)만 좌→우로 스쳐 지나간다.
     ::after { width:50px; height:155px; top:-50px; left:-75px; opacity:.2; rotate(35deg);
               transition: all 550ms cubic-bezier(.19,1,.22,1); z-index:-10 }  →  hover 시 left:120%
   primary(주황) 채움은 유지하고, 광택은 span 없이 ::before(음수 z-index)에 깔아
   배경(주황) 위·텍스트 아래에 위치시킨다. isolation 으로 음수 z-index 를 버튼 안에 가둔다. */
#gw-theme-main-visual .gw-slide-btn-container .gw-btn01 {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-width: 200px;
    border: 3px solid var(--brand-orange);
    color: #fff;
    background: var(--brand-orange);
    transition: all .6s ease;
}
/* 스킨 hover(border:#000, color 변경)를 무력화 — btn-4 는 hover 시 버튼 색이 그대로다 */
#gw-theme-main-visual .gw-slide-btn-container .gw-btn01:hover {
    color: #fff;
    background: var(--brand-orange);
    border-color: var(--brand-orange);
}
/* 스킨 기본 채움 레이어(:before)를 btn-4 의 흰 광택(::after)으로 재정의 */
#gw-theme-main-visual .gw-slide-btn-container .gw-btn01:before {
    content: "";
    display: block;
    position: absolute;
    top: -50px;
    left: -75px;
    width: 50px;
    height: 155px;
    background: #fff;
    opacity: .2;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    z-index: -10;
    pointer-events: none;
}
/* hover: 광택만 우측으로 스윕. 스킨의 :hover::before{width:150%} 을 눌러 광택 폭(50px) 유지 */
#gw-theme-main-visual .gw-slide-btn-container .gw-btn01:hover:before {
    left: 120%;
    width: 50px;
}

/* 하단 scroll 인디케이터, 진행바 제거 */
#gw-theme-main-visual .scroll,
#gw-theme-main-visual .gw-progress-container { display: none; }

/* 한글은 기본값(word-break:normal)에서 음절 단위로 잘려 "방충 / 망" 처럼 단어 중간이 깨진다.
   keep-all 로 어절(띄어쓰기) 단위로만 줄바꿈되게 한다. */
#gw-theme-main-visual .gw-main-visual-text01,
#gw-theme-main-visual .gw-main-visual-text01 span,
#gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div {
    word-break: keep-all;
    overflow-wrap: break-word;
}
/* 제목이 줄어드는 지점에서 두 번째 줄도 같이 줄인다 (스킨 style.css 와 같은 분기점) */
@media screen and (max-width: 1440px) {
    #gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div.gw-main-visual-text02 { font-size: 60px; }
}
@media screen and (max-width: 1024px) {
    #gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div.gw-main-visual-text02 { font-size: 44px; }
}
/* 좁은 화면에서 제목이 화면폭을 넘지 않도록 단계적으로 줄인다.
   text01(구해줘 부산 방충망) > text02(부산 전지역 …) 의 크기 위계는 유지한다. */
/* 모바일·태블릿에서 text02 는 "… 방충망 / 시공 전문" 으로 끊어지는 편이 보기 좋다.
   배너 문구는 관리자 DB 에서 오므로 <br> 을 넣을 수 없어, 폭을 제한해 줄바꿈 위치를 고정한다.
   현재 문구 "부산 전지역 맞춤 방충망 시공 전문" 기준:
     "부산 전지역 맞춤 방충망" ≈ 10.8em < 13em < 전체 ≈ 15.3em
   → "시공 전문"이 첫 줄에 들어가지 못해 항상 방충망 뒤에서 끊긴다.
   (문구가 바뀌면 강제 위치는 풀리고 자연 줄바꿈으로 돌아갈 뿐 레이아웃은 깨지지 않는다) */
@media screen and (max-width: 1024px) {
    #gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div.gw-main-visual-text02 {
        max-width: 13em;
    }
}

@media screen and (max-width: 768px) {
    #gw-theme-main-visual .gw-main-visual-text-con .gw-main-visual-text01 { font-size: 40px; }
    #gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div.gw-main-visual-text02 { font-size: 34px; }
    #gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div.gw-main-visual-text03 { margin-top: 18px; font-size: 17px; }
}
@media screen and (max-width: 576px) {
    #gw-theme-main-visual .gw-main-visual-text-con .gw-main-visual-text01 { font-size: 34px; }
    #gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div.gw-main-visual-text02 { font-size: 29px; }
    #gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div.gw-main-visual-text03 { margin-top: 16px; font-size: 16px; }
    /* 스킨이 자식마다 padding:0 20px 을 다시 주므로 컨테이너 좌측 패딩은 0 으로 되돌려 총 20px 유지 */
    #gw-theme-main-visual .gw-main-visual-text-con { padding-left: 0; padding-right: 0; gap: 6px; }
}
@media screen and (max-width: 375px) {
    #gw-theme-main-visual .gw-main-visual-text-con .gw-main-visual-text01 { font-size: 30px; }
    #gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div.gw-main-visual-text02 { font-size: 25px; }
}

/******************************************************************
    사이드 메뉴(1440px 이하) — 열고 닫는 애니메이션
    responsive.css 는 display:none <-> block 을 토글하는데, display 는
    전이 대상이 아니라 transition:all 0.5s 가 무시돼 딱 끊겨 보였다.
    항상 렌더해 두고 transform/opacity 로 움직인다.
******************************************************************/

@media screen and (max-width: 1440px) {
    #mob-gnb {
        display: block;
        /* 오른쪽에서 밀려 들어오고 오른쪽으로 빠진다 (responsive.css 의 left:-100% 무력화) */
        left: auto;
        right: 0;
        transform: translateX(100%);
        opacity: 0;
        visibility: hidden;
        /* 닫힐 때는 슬라이드가 끝난 뒤에 visibility 를 꺼야 사라지는 게 보인다 */
        transition: transform .4s cubic-bezier(.22, 1, .36, 1),
                    opacity .3s ease,
                    visibility 0s linear .4s;
    }
    #mob-gnb.on {
        left: auto;
        right: 0;
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        transition: transform .4s cubic-bezier(.22, 1, .36, 1),
                    opacity .3s ease,
                    visibility 0s;
    }

    /* 항목이 순서대로 따라 들어온다.
       (항목별 transition-delay 는 head.php 스크립트가 이미 넣고 있었다) */
    #mob-gnb .menu-list > ul > li {
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity .3s ease, transform .3s ease;
    }
    #mob-gnb.on .menu-list > ul > li {
        opacity: 1;
        transform: translateY(0);
    }

    /* 하단 고정 CTA 바가 메뉴 마지막 항목을 가리지 않도록 여백 확보 */
    #mob-gnb .menu-list { padding-bottom: 76px; }

    /* ── 사이드 메뉴 상단 헤더 (햄버거로 바뀌는 전 구간 공통: 폰·태블릿·좁은 데스크탑) ──
       메뉴를 화면 맨 위(top:0)까지 끌어올려 기존 글로벌 헤더 위치에 겹치게 하고,
       그 자리에 'MENU' 라벨 + 닫기 X 헤더 줄을 둔다. 닫기 X 가 원래 햄버거 아이콘
       자리(헤더 높이 60px)에 놓여, 열리면 햄버거 대신 X 로 보인다. */
    #mob-gnb { top: 0; height: 100%; }
    #mob-gnb .menu-list { padding-top: 0; }
    #mob-gnb .mob-menu-close {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: static;
        width: auto;
        height: 60px;
        margin: 0;
        padding: 0 20px;
        border-radius: 0;
        border-bottom: 1px solid #eee;
        background: transparent;
        /* head.css 의 transition:all .5s 제거 (아래 hover 회전 방지와 함께) */
        transition: none;
    }
    #mob-gnb .mob-menu-close i {
        font-size: 24px;
        color: #333;
        cursor: pointer;
        transition: color .2s ease;
    }
    #mob-gnb .mob-menu-close:hover i { color: var(--cta-orange); }
    /* head.css 의 `.mob-menu-close:hover{transform:rotate(180deg)}` 를 끈다.
       원래는 작은 원형 닫기 버튼용이었는데, 여기선 헤더 줄 전체라서 hover 시
       헤더가 통째로 빙글 도는 문제가 있었다. 회전 없이 아이콘 색만 바뀌게 한다. */
    #mob-gnb .mob-menu-close:hover { transform: none; }
}

/* 태블릿보다 넓은데 헤더가 햄버거로 바뀌는 구간(≈1025~1440px)에서는
   사이드 메뉴가 화면을 꽉 채우면 과하다. 오른쪽 약 35% 만 차지하는 드로어로 만든다.
   (실제 폰·태블릿 세로 ≤1024px 에서는 위 규칙대로 전체 폭을 유지한다)
   드로어는 오른쪽에서 슬라이드하므로(위 transform:translateX) 오른쪽에 붙는다. */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    #mob-gnb {
        width: 35%;
        box-shadow: -10px 0 40px rgba(0, 0, 0, .18);
    }
    /* 이 구간은 드로어가 오른쪽 35% 라 왼쪽의 로고가 드로어 헤더에 들어오지 않는다.
       그래서 헤더 왼쪽에 'MENU' 라벨을 둔다. (≤1024 전체폭에서는 로고가 그대로
       헤더에 보이므로 라벨을 넣지 않는다) */
    #mob-gnb .mob-menu-close::before {
        content: "MENU";
        margin-right: auto;
        color: var(--navy);
        font-family: "Outfit", "Noto Sans KR", sans-serif;
        font-weight: 700;
        font-size: 16px;
        letter-spacing: .06em;
    }
    /* 하단 CTA 바도 드로어 폭·위치에 맞춰 오른쪽 35% 로 (full-width 로 삐져나가지 않게) */
    body.on .mob-cta-bar {
        width: 35%;
        left: auto;
        right: 0;
    }
}

/******************************************************************
    현재 페이지 메뉴 표시 (대메뉴·하위메뉴 공통) — 포인트 컬러
******************************************************************/

/* 데스크탑 글로벌 헤더 */
#gnb .gnb_1dli.bcm-current > .gnb_1da,
#gnb .gnb_2dli.bcm-current > .gnb_2da {
    color: var(--brand-orange);
    font-weight: 700;
}

/* 태블릿·모바일 사이드 메뉴 */
#mob-gnb .menu-list > ul > li.bcm-current > .dep01,
#mob-gnb .menu-list > ul > li.bcm-current > .dep01 > span,
#mob-gnb .dep02 > li.bcm-current > .dep01,
#mob-gnb .dep02 > li.bcm-current > .dep01 > span {
    color: var(--brand-orange);
}

/* 하위메뉴가 있는 항목의 펼침 화살표도 같이 물든다
   (PC 는 li.hassub:after, 사이드메뉴는 span.hassub:before 로 그려진다) */
#gnb .gnb_1dli.bcm-current.hassub:after {
    color: var(--brand-orange);
}
#mob-gnb .menu-list > ul > li.bcm-current > .dep01 .hassub:before {
    color: var(--brand-orange);
}

/******************************************************************
    글로벌 헤더 하위메뉴 — 긴 이름이 줄바꿈되던 문제

    데스크탑 GNB 드롭다운(.gnb_2dul)은 폭이 min-width:100%(대메뉴 한 칸 폭)로
    좁게 잡혀 있어서, "블랙스텐(고양이)방충망" 처럼 대메뉴 칸보다 긴 항목이
    "블랙스텐(고양이)방충 / 망" 으로 줄바꿈됐다.

    항목을 한 줄로 고정하면 드롭다운 폭이 auto 라 가장 긴 항목에 맞춰 넓어져
    줄바꿈이 사라진다. (별도 폭 지정 없이 콘텐츠에 맞게 자동 확장)

    데스크탑 GNB 는 1440px 초과에서만 보이고 그 이하는 모바일 사이드메뉴로
    전환된다. 모바일 하위항목(dep02)은 full-width 세로 리스트라 현재 이름들은
    넘치지 않지만, 고정 높이(45px) 안에서 혹시라도 접히지 않도록 함께 nowrap 한다.
******************************************************************/
/* 대메뉴(.gnb_1da)도 "회사소 / 개" 처럼 글자 중간에서 접히지 않도록 한 줄 고정.
   데스크탑 GNB 가 보이는 폭(>1440px)에서는 한 줄에 다 들어간다. */
#gnb .gnb_1da { white-space: nowrap; }
#gnb .gnb_2dul,
#gnb .gnb_2da { white-space: nowrap; }
#mob-gnb .dep02 > li a { white-space: nowrap; }

/******************************************************************
    게시판 카테고리 탭(.gw-tabs) — 좁은 화면에서 글자가 세로로 쪼개지는 문제
    gw.css 의 `.gw-tabs > li{flex:1}` 이 탭 개수만큼 폭을 균등 분할해서,
    폭이 좁아지면 "미세방충망" 이 한 글자씩 세로로 접힌다.
    폭 분할을 풀고 내용 폭을 유지한 채 가로 스크롤로 넘긴다.
******************************************************************/

@media screen and (max-width: 768px) {
    .gw-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* 스크롤바는 숨기고 스와이프로만 넘긴다 */
        scrollbar-width: none;
    }
    .gw-tabs::-webkit-scrollbar { display: none; }
    .gw-tabs > li { flex: 0 0 auto; }
    .gw-tabs > li > a { white-space: nowrap; }
}

/******************************************************************
    헤더 로고 — 1440px 이하에서 헤더 높이(60px)에 맞춰 축소
******************************************************************/

@media screen and (max-width: 1440px) {
    #logo .light-mode-logo { height: 40px; width: auto; }
}

/******************************************************************
    푸터 — 남색 배경
    헤더는 로고가 흰 배경용이라 흰색을 유지한다.
******************************************************************/

#ft,
#ft_wr {
    background: var(--navy);
    border-top-color: var(--navy);
}

/* 회사 정보 */
#ft_company .ft_info { color: rgba(255, 255, 255, .7); }
#ft_company .ft_info > p > span:not(:last-child):after { background: rgba(255, 255, 255, .3); }

/* 사이트맵 / 약관 / 로그인 */
#ft_link a { color: #fff; }
#ft_link a:hover { color: var(--brand-orange); }
#ft_link a:not(:last-child):after { background: rgba(255, 255, 255, .3); }

/* 전화 / 이메일 링크 */
#ft .tel-link { color: #fff; }
#ft .tel-link:hover { color: var(--brand-orange); }

/* SNS */
#ft .gw-sns-container > li > a { color: rgba(255, 255, 255, .7); }
#ft .gw-sns-container > li > a:hover { color: var(--brand-orange); }

/* 저작권 */
#ft .ft-bottom {
    color: rgba(255, 255, 255, .6);
    border-top-color: rgba(255, 255, 255, .2);
}

/* 어두운 배경 위 포커스 링 */
#ft a:focus-visible { outline-color: #fff; }

/******************************************************************
    서브페이지 공통 헤더 정리
******************************************************************/

/* breadcrumb 숨김 */
.gw-sub-theme-title-container .breadcrumb-container { display: none; }

/* 사이드 메뉴 라운드 제거
   head.css 의 `.gw-side-menu-container01 > [class*=gw-side-menu-depth] > button{border-radius:50px}`
   가 특이도가 높아 안 먹히므로 같은 특이도로 맞춰 덮어쓴다(brand.css 가 뒤에 로드됨). */
.gw-side-menu-container01 > [class*="gw-side-menu-depth"] > button,
.gw-side-menu-depth01 > button,
.gw-side-menu-depth02,
[class*="gw-side-menu-depth"] > ul {
    border-radius: 0;
}

/******************************************************************
    포커스 상태 (브리프 9장)
    reset.css 의 전역 *:focus{outline:none} 을 되돌린다.
    선택자 특이도(0,1,1) > (0,1,0) 이고 로드 순서도 뒤이므로 우선한다.
******************************************************************/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

/* 어두운 배경 위에서는 포커스 링을 흰색으로 */
#mob-gnb a:focus-visible,
#gw-theme02-main-location a:focus-visible {
    outline-color: #fff;
}

/******************************************************************
    고객후기 사이드메뉴 — 각진(라운드 없는) 탭
    (head.php 에서 review 게시판일 때 .gw-sidemenu-square 부여)
******************************************************************/
.gw-sidemenu-square .gw-side-menu-container01 > [class*="gw-side-menu-depth"] > button {
    border-radius: 0;
}
.gw-sidemenu-square [class*="gw-side-menu-depth"] > ul {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/******************************************************************
    게시판·FAQ 검색창 — 각지게 (라운드 제거)
    대상: 시공사례/고객후기/공지사항/방충망 관리법 게시판 + 자주 묻는 질문
    원본은 각 스킨 style.css 의 `#gw-bo-list .sch_input{border-radius:5px}` 과
    gw.css 의 `.sel-wrap > select{border-radius:5px}`. brand.css 가 뒤에 로드된다.
    검색창에만 적용되도록 감싸는 컨테이너로 한정한다(다른 폼의 select 는 그대로).
******************************************************************/
.search-container .sel-wrap > select,
.faq-search-container .sel-wrap > select,
#gw-bo-list .sch_input,
.faq-search-container .frm_input {
    border-radius: 0;
}

/******************************************************************
    사이드메뉴(탭) 정리
    원본 규칙은 css/sub_head.css 에 있고, brand.css 가 뒤에 로드되므로 여기서 덮어쓴다.
******************************************************************/

/* 두 탭의 높이를 맞춘다.
   주황(depth01)은 배경이 button 에, 하양(depth02)은 배경이 감싸는 div 에 있다.
   button 이 inline-block 이라 div 쪽에만 baseline 여백이 붙어 흰 탭이 몇 px 더 높았다.
   높이를 빼서 맞추는 대신 원인(inline 여백)을 없앤다. */
[class*="gw-side-menu-depth"] > button { display: block; }

/* 창 너비를 바꿀 때 주황 탭만 늘었다 줄었다 하던 문제.
   sub_head.css 의 `transition: all 1s` 에 width 가 포함돼 있었다.
   이 버튼에는 hover 등 상태 변화가 없으므로 색 전환만 남긴다. */
.gw-side-menu-depth01 > button {
    transition: background-color .3s ease, color .3s ease;
}

@media screen and (max-width: 768px) {
    /* 탭 너비 기준을 100vw → % 로 바꾼다.
       100vw 는 스크롤바 폭을 포함해서, 같은 375px 라도 데스크탑 브라우저(스크롤바 있음)와
       모바일(스크롤바 없음)의 좌우 여백이 달라 보였다. % 는 스크롤바를 뺀 콘텐츠 폭 기준이라
       두 환경이 같아진다. 기존 모바일(약 94.7%)보다 살짝 좁게 잡는다. */
    /* 폭 상하한: 768px 에서 700px 가까이 늘어나 버튼 하나가 화면을 거의 다 차지했고,
       320px(사이트 최소 폭) 아래에서는 반대로 너무 좁아졌다.
       컨테이너는 absolute + left:50% + translateX(-50%) 로 가운데 정렬되므로
       폭이 상한에 걸려 줄어들어도 그대로 가운데를 유지한다(sub_head.css 22행). */
    .gw-side-menu-container { width: 92%; min-width: 300px; max-width: 520px; }
    [class*="gw-side-menu-depth"] { width: 100%; }
    [class*="gw-side-menu-depth"] > button { width: 100%; }

    /* reset.css 의 `.gw-flex{align-items:center}` 때문에 세로로 쌓았을 때 자식이
       내용 폭으로 줄어든다. 탭이 1개인 경우 감싸는 .gw-side-menu-container01 이
       여기 걸려 탭이 좁아졌다. 가로로 꽉 채우도록 되돌린다. */
    .gw-side-menu-container > .gw-flex { align-items: stretch; }
    .gw-side-menu-container01 { width: 100%; }

    /* 두 탭 사이 간격 제거 — 위아래로 붙인다 */
    .gw-side-menu-depth01 { margin-bottom: 0; }

    /* 배너와 그 아래 영역의 경계가 탭메뉴의 세로 정중앙을 지나게 한다.
       탭 1개 = 60px → 30px 만큼, 탭 2개 = 120px → 60px 만큼 아래로 내리고,
       내려온 높이만큼 #container 위쪽에 자리를 비워 콘텐츠와 겹치지 않게 한다.
       (탭 2개는 스택의 정중앙이 두 탭의 맞닿는 선이라 경계가 그 선과 일치한다) */
    .bcm-tab-single .gw-side-menu-container { bottom: -30px; }
    .bcm-tab-single #container { padding-top: 30px; }
    .bcm-tab-double .gw-side-menu-container { bottom: -60px; }
    .bcm-tab-double #container { padding-top: 60px; }

    /* 탭 뒤 '여백 영역만' 배너 아래 첫 섹션 색과 맞춘다.
       (.bcm-sub 서브페이지는 남색 .bcm-sub-hero 로 시작한다)

       주의: 여기서 background(단축) 나 background-color 를 쓰면 #container 전체,
       즉 페이지 본문 배경까지 남색이 되어 본문 글자가 안 보이게 된다.
       배경색은 그대로 두고, 위쪽 padding 높이만큼만 덧칠하는 방식으로 처리한다. */
    .bcm-tab-strip-navy #container {
        background-image: linear-gradient(var(--navy), var(--navy));
        background-repeat: no-repeat;
        background-position: top center;
    }
    .bcm-tab-single.bcm-tab-strip-navy #container { background-size: 100% 30px; }
    .bcm-tab-double.bcm-tab-strip-navy #container { background-size: 100% 60px; }
}

/******************************************************************
    후기 본문 강점 키워드 형광펜
    (theme.config.php 의 bcm_highlight_keywords() 가 <mark class="bcm-hl"> 를 씌운다)
    메인 후기 슬라이더 + 후기 게시판 목록에 공통 적용.
******************************************************************/
.bcm-hl {
    /* mark 기본 노랑 배경/검정 글씨를 지우고 브랜드 주황 마커로 대체 */
    background: transparent;
    /* 마커만 칠하면 '드래그 선택 영역'처럼 보인다. 글자도 진하게·굵게 해야 의도된 강조로 읽힌다 */
    color: var(--navy, #2e3163);
    font-weight: 600;
    padding: 0 .12em;
    /* em 기준이라 폰트 크기·행간이 달라져도 글자 아랫부분에만 칠해진다.
       색은 포인트 색(--brand-orange #e58058)에 투명도만 준 것.
       34% 는 너무 옅어 살몬처럼 보여, 포인트 주황으로 또렷이 읽히게 45% 로 올렸다. */
    box-shadow: inset 0 -.52em 0 rgba(229, 128, 88, .45);
    border-radius: 2px;
    /* 줄바꿈으로 조각나도 각 조각에 마커가 그려지도록 */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* 후기 카드에 마우스를 올리면 마커가 살짝 진해진다 */
.gw-review-card-link:hover .bcm-hl,
.bcm-review-card-link:hover .bcm-hl {
    box-shadow: inset 0 -.52em 0 rgba(229, 128, 88, .55);
}

/* 마커 애니메이션을 끄기 원하는 사용자 배려 */
@media (prefers-reduced-motion: no-preference) {
    .bcm-hl { transition: box-shadow .25s ease; }
}