/*
 * landing-extra.css — 재검수 결함 1 수정: S8 CTA 배너
 * (resources/views/site/sections/cta-banner.blade.php, `.section--cta-banner`)
 * 스타일.
 *
 * *** 이 파일은 수작업 전용이다. 절대 스크립트로 재생성하지 마라. ***
 * landing-common.css / landing/{slug}.css는 scripts/p5-extract-landing-css.py가
 * "생성"하는 산출물이라 그 스크립트를 재실행하면 파일 내용이 통째로
 * 덮어써진다 — 실제로 여기 있던 CTA 배너 CSS가 그렇게 사라진 적이 있다
 * (2026-08 재검수 결함 1). 같은 사고를 막기 위해 이 CSS를 생성 산출물이
 * 아닌 이 파일(수작업, 스크립트 소유 아님 — mirror-extra.css와 동일한
 * 관례)로 분리했다. 앞으로 CTA 배너 CSS를 고칠 때도 반드시 이 파일만
 * 수정하고, landing-common.css/landing/{slug}.css에는 손대지 마라.
 *
 * 로드 순서: resources/views/site/layouts/mirror.blade.php의 <head>에서
 * mirror-extra.css 바로 다음, @stack('head') 바로 앞에 링크된다 — 벤더
 * CSS 22개 + landing-common.css/landing/{slug}.css(로드된다면)보다 반드시
 * 뒤에 온다.
 *
 * 원본 실측(mirror/www.morethan-inc.com/*.html의 #s20240905c3a09facdbfdf
 * 섹션, 위젯 w20240905d421b4a1d598c 외 텍스트/버튼 위젯 3개 — "고객센터
 * /02-6958-7566", "메일로 견적 묻기/morethan@morethan-inc.com", "빠른 상담
 * 신청" + 버튼 "상담 하러 가기". playwright getComputedStyle, 뷰포트
 * 1280px, http://127.0.0.1:8110/Morethan):
 *   - section: padding-top/bottom 30px, .inside max-width 1400px, 좌우
 *     padding 0(그리드가 만들던 여백이므로 여기서는 최소 안전 여백만 둠)
 *   - 로고 이미지 높이 30px(현재는 wordmark 파셜의 'sm' 텍스트 워드마크로
 *     대체 — 로고 자체가 아니라 배치만 재현하면 됨)
 *   - 라벨/값(<p><span>): font-size 14px, color rgb(255,255,255)(흰색,
 *     색치환표 대상 아님), line-height 28px, font-weight 400
 *   - 버튼(a.btn.btn-sm "상담 하러 가기"): padding-top/bottom 6px,
 *     padding-left/right 22px, border-radius 30px, height 30px,
 *     background rgb(245,245,245) → 색치환표 #f5f5f5→#FFF1EF 적용,
 *     color rgb(35,35,35) → 색치환표 #232323→#333333 적용, font-size 12px
 *   - 배경: section_bg가 남색(#003e51 근사, 실측 코너 픽셀 rgb(1,37,49)~
 *     rgb(0,62,81)) 단색조 그라디언트 이미지 — DB의 bg_image 설정(이미
 *     코랄로 재색상화된 migrated 자산)이 인라인 style로 주입되므로
 *     여기서는 배경색 자체를 지정하지 않고 레이아웃/타이포만 담당한다.
 */
.section--cta-banner {
    padding: 30px 0;
    color: #fff;
}

.section--cta-banner .inside {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.section--cta-banner .grid {
    display: block;
}

.widget.cta-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px 40px;
}

.cta-banner__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.cta-banner__logo img {
    display: block;
    height: 30px;
    width: auto;
}

.cta-banner__columns {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px 32px;
}

.cta-banner__column {
    flex: 1 1 200px;
}

.cta-banner__label,
.cta-banner__value {
    margin: 0;
    font-size: 14px;
    line-height: 28px;
    font-weight: 400;
    color: #fff;
}

.section--cta-banner .cta-banner__value a {
    color: #fff;
    text-decoration: none;
}

.section--cta-banner .cta-banner__value a:hover {
    text-decoration: underline;
}

/* .doz_sys a { color:#000; }(custom.cm.css)와 특이도가 같은 링크
   요소라 클래스만으로는(.cta-banner__button, 0,0,1,0 < 0,0,1,1) 이긴다는
   보장이 없다 — 섹션 스코프를 더해 확실히 이긴다(0,0,2,1). */
.section--cta-banner a.cta-banner__button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 6px 22px;
    margin-top: 4px;
    border-radius: 30px;
    background-color: #FFF1EF;
    color: #333333;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

.section--cta-banner a.cta-banner__button:hover {
    color: #333333;
    text-decoration: none;
    opacity: 0.9;
}

@media (max-width: 767px) {
    .widget.cta-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-banner__columns {
        flex-direction: column;
        width: 100%;
    }
}

/* 결함 1(모바일 결함 재검수) — shop_showcase(포트폴리오 진열) 위젯
 * 모바일 그리드 붕괴.
 *
 * 원본 실측(127.0.0.1:8110/Morethan 375px, playwright getComputedStyle):
 * .shop-item width 360px(=1열 전체폭), padding 0 7.5px, margin-bottom 0px;
 * .thumb-row margin 0 -7.5px. 원본은 이 값을 site2.css의
 * `@media(max-width:767px){ .type-slide .thumb-row.m-list-type2 .shop-item
 * { width:100% !important; } }`(11299번째 줄 블록 안, 12602번째 줄)로
 * 얻는다 — 순수 CSS 미디어쿼리이고, imweb JS(런타임이 붙이는 pc_section
 * 클래스)와 무관하게 항상 계산 가능한 규칙이다.
 *
 * 그런데 landing-common.css의 "P5 compat shim"(owl-carousel JS 미탑재로
 * 인한 그리드 붕괴 방지용, 위 owl-carousel 섹션 주석 참고)이 추가한
 * `.type-slide.thumb-item-4 .shop-item, .thumb-fluid.type-slide
 * .thumb-item-4 .shop-item { width: 25% !important; }`는 미디어쿼리 없이
 * 전 폭에서 항상 적용된다.
 *
 * 최초 시도(단순히 이 파일에 같은 특이도(0,0,4,0)의 미디어쿼리 규칙을
 * 추가)는 효과가 없었다 — 원인을 다시 실측(curl로 렌더된 HTML 순서
 * 확인)한 결과, landing-common.css/landing/{slug}.css는 이 레이아웃의
 * <head> 링크가 아니라 **P4 섹션(html-embed, 첫 번째 섹션의 raw_html)이
 * <body> 최상단에 삽입하는 <link>**였다(mirror.blade.php에는 애초에
 * landing-common.css 링크가 없다 — 파일 상단의 "landing-extra.css가
 * landing-common.css보다 나중에 로드된다"는 이전 주석은 이 P4/html-embed
 * 렌더 경로에서는 사실이 아니었다). 즉 실제 DOM 순서는
 * mirror-extra.css → landing-extra.css(<head>) → landing-common.css →
 * landing/{slug}.css(<body> 최상단) 순이라 landing-extra.css가 오히려
 * *먼저* 온다. 같은 특이도 + 둘 다 !important면 나중에 오는
 * landing-common.css가 이긴다 — 그래서 82.5px가 그대로 남았다.
 *
 * 로드 순서를 바꿀 수 없으므로(html-embed 섹션 콘텐츠는 DB 시드 데이터,
 * P4 소유) 특이도를 확실히 더 높여 순서와 무관하게 이기도록 한다 —
 * `body.doz_sys` 접두사로 (0,0,4,0) → (0,1,4,1)까지 올린다. padding
 * (0 7.5px)/margin(-7.5px)은 이미 다른 경로로 올바르게 적용되고 있어
 * (실측 확인) 손대지 않는다 — width만 되돌린다. */
@media (max-width: 767px) {
    body.doz_sys .type-slide.thumb-item-2 .shop-item, body.doz_sys .thumb-fluid.type-slide .thumb-item-2 .shop-item,
    body.doz_sys .type-slide.thumb-item-3 .shop-item, body.doz_sys .thumb-fluid.type-slide .thumb-item-3 .shop-item,
    body.doz_sys .type-slide.thumb-item-4 .shop-item, body.doz_sys .thumb-fluid.type-slide .thumb-item-4 .shop-item,
    body.doz_sys .type-slide.thumb-item-5 .shop-item, body.doz_sys .thumb-fluid.type-slide .thumb-item-5 .shop-item {
        width: 100% !important;
    }
}

/* 결함 — .hover_img_hide 이미지 가로 오버플로(재검수 실측: aboutus에서
 * body.scrollWidth 1290(원본) → 1605(앱), 315px 초과).
 *
 * 원본 실측(playwright getComputedStyle, 1280px 데스크톱, 위젯
 * #w2024042200e7a3c51fc27 .org_image, http://127.0.0.1:8110/Aboutus):
 * 원본은 아임웹 image.js가 서버에 저장된 위젯 설정(img_width/img_height/
 * circle 등, 페이지 <script>의 img_w....init({...}) 호출 인자로 전달됨)을
 * 읽어 <img class="org_image">에 인라인 스타일로 width/height를 지정한다
 * (예: visibility:inherit; display:inline-block; width:auto; height:154px).
 * 이 앱은 아임웹 벤더 JS를 로드하지 않으므로(PRD §7.1) 그 인라인 스타일이
 * 전혀 붙지 않아 이미지가 원본 픽셀 크기(예: 1920px) 그대로 렌더링되고,
 * 부모 .img_wrap의 고정 높이도 JS가 주지 않아 사라져 가로로 넘친다.
 *
 * .img_wrap 자체의 overflow:hidden은 이미 site.css가 준다(4151번째 줄
 * `.widget.image .img_wrap{overflow:hidden}`) — 문제는 img가 그 박스
 * 폭에 전혀 맞춰지지 않는다는 점뿐이다. img를 컨테이너 폭에 맞춰
 * `max-width:100%; height:auto`로 축소시키면 (1) 가로 오버플로가
 * 사라지고 (2) .img_wrap이 height:auto라 스케일된 이미지 높이를 그대로
 * 따라가므로 레이아웃이 깨지지 않는다. 실제로 site.css는 이미
 * `@media(max-width:991px){ .widget.image.org_size img{max-width:100%} }`로
 * 모바일에서 동일한 처치를 하고 있다(9251번째 줄) — 이 규칙을 데스크톱까지
 * 확장하는 셈이다(그래서 아래 선택자도 site.css 모바일 규칙과 동일하게
 * `.org_size`로 잡는다 — `.hover_img_hide`만으로는 부족했다. 실측 결과
 * aboutus의 실제 body 레벨 오버플로 주범은 `.hover_img_hide`가 아니라
 * 같은 섹션의 형제 위젯인 `.org_size.img_circle`(원형 아이콘, 클래스에
 * hover_img_hide가 없음)이었다 — `.img_wrap`이 `.img_circle`에서는
 * site.css가 overflow:visible로 되돌리므로(4156번째 줄) 클리핑에 기대지
 * 못하고 이미지 자체가 그대로 새어나갔다. `.hover_img_hide`만 고치면
 * 이 위젯들은 그대로 남아 aboutus의 body.scrollWidth가 여전히 어긋난다).
 *
 * img-circle 변형(원 안에 담기는 아이콘 등, class="img-circle org_image")은
 * vendor_blue_10.css의 전역 `.img-circle{border-radius:50%}` 규칙이 이미
 * 원본·앱 양쪽에서 동일하게 적용되므로 별도 처리가 필요 없다 — 폭만
 * 맞추면 원본 소스가 대부분 1:1 비율이라 자연스럽게 원으로 보인다.
 *
 * .hover_img(마우스오버 시 다른 이미지로 크로스페이드하는 오버레이 레이어)는
 * 원본에서도 정적 HTML에는 없고 image.js가 런타임에 DOM을 생성해 붙인다
 * (mirror/ 원본 HTML 전체에 `_hover_image hover_img` 마크업이 0건 —
 * 실측 확인). 이 앱은 그 JS를 로드하지 않으므로 이 레이어 자체가
 * 존재하지 않아 별도 CSS가 필요 없다(레이아웃에 영향 없음). 이번
 * hover_img_hide 위젯들의 실제 hover 효과는 `.hover_txt`/`.overlay`
 * 노출이며, 그 토글은 site.css의 범용(비 ID-스코프) 규칙
 * (`.widget.image.hover_text_position_overlay:hover .hover_txt` 등,
 * 4165번째 줄)이 이미 커버한다. */
.widget.image.org_size .img_wrap img.org_image {
    max-width: 100%;
    height: auto;
}

/* 결함 — .gallery2(owl-carousel 갤러리 위젯) 완전 미표시.
 * 5개 페이지(morethan/fabric/metal/acrylic/keycap)의 "이렇게 특별한
 * 브랜드들이 / 모댄을 통해 가치를 높였습니다" 헤딩 아래 브랜드 로고
 * 그리드를 포함해, `.gallery2` 클래스가 붙은 모든 갤러리 위젯이
 * getComputedStyle에서 display:none, width/height 0으로 실측됨(DOM에는
 * 존재하나 화면에 렌더되지 않음).
 *
 * 원인: 벤더 CSS(vendor_blue_10.css)의 `.owl-carousel{display:none}`은
 * owl-carousel JS가 초기화를 마친 뒤 `.owl-loaded` 클래스를 붙여
 * display:block으로 되돌리는 것을 전제로 한 게이트다. 이 앱은 아임웹
 * 벤더 JS(owl-carousel 포함)를 로드하지 않으므로(PRD §7.1) `.owl-loaded`가
 * 절대 붙지 않아 `.gallery2`(owl-carousel 인스턴스)가 항상
 * display:none으로 남는다. 이건 `.visual_area`(히어로 캐러셀)에 이미
 * 적용된 것과 같은 종류의 결함이며, 위 P5 compat shim
 * (`.owl-carousel.visual_area{display:block}`)이 `.gallery2`는 커버하지
 * 않아서 발생했다.
 *
 * 원본 실측(playwright getComputedStyle, http://127.0.0.1:8110/Morethan,
 * "이렇게 특별한 브랜드들이" 섹션의 갤러리 위젯 w20260714a6f17385ddaf7):
 *   - 아임웹 관리자 설정(gallery_w20260714a6f17385ddaf7.init(...) 호출
 *     인자): "type":"slide","sub_type":"slide_02","grid_col_count":"6",
 *     "grid_mobile_col_count":"2" — 모든 브랜드 로고 그리드 위젯이
 *     fabric/metal/acrylic/keycap 페이지에서도 동일한 설정.
 *   - 1280px: 갤러리 폭 1103px, `.item_gallary` 184×140px(1103÷184≈6 —
 *     grid_col_count:"6"과 일치, 한 화면에 6열 보임)
 *   - 375px: 갤러리 폭 346.5px, `.item_gallary` 174×133px(346.5÷174≈2 —
 *     grid_mobile_col_count:"2"와 일치)
 *   - 열 수/여백/테두리/배경 등 세부 스타일은 이미
 *     scripts/p5-extract-landing-css.py가 뽑아낸 위젯별 CSS
 *     (public/vendor/imweb/landing/{slug}.css, 예:
 *     `#{widgetId} .slide_02 .item_gallary{padding:1.5px}`,
 *     `#{widgetId} .type_slide .item_gallary .img_wrap{background-size:
 *     cover;height:100%}`)가 정확히 재현하고 있어 손대지 않는다 — 여기서
 *     보완하는 건 오직 (1) display:none 해제와 (2) owl-carousel JS가
 *     런타임에 인라인으로 계산해 주던 아이템 폭/줄바꿈(정적 그리드)뿐이다.
 *     캐러셀 자동 슬라이드 자체는 JS 없이 재현하지 않는다(정적 그리드로
 *     전체 아이템을 보여주는 폴백 — shop_showcase 정적 그리드 폴백과
 *     동일한 전략, 위 "P5 compat shim" 참고).
 *
 * morethan 페이지에는 브랜드 로고 그리드(slide_02, 4개) 외에 리뷰 이미지
 * 슬라이더 1개(w202409059af5b2fd85a15, sub_type "slide_01",
 * grid_col_count:"1")가 더 있어 총 5개의 `.gallery2` 위젯이 존재한다
 * (fabric/metal/acrylic/keycap은 slide_02 4개뿐, 총 4개) — 아래 규칙은
 * `.slide_02`(6열/2열)와 그 외(기본값 1열, 리뷰 슬라이더 포함) 서브타입
 * 모두를 커버한다. */
.gallery2.owl-carousel {
    display: flex !important;
    flex-wrap: wrap;
}

/* item_gallary의 display:block은 위젯별 생성 CSS(landing/{slug}.css의
   `#{widgetId} .slide_02 .item_gallary{display:block}` 등)가 이미
   지정하고 있어 여기서 다시 지정하지 않는다 — flex 컨테이너 안에서는
   자식의 outer display 값과 무관하게 flex item으로 취급되므로 충돌이
   없다. (display:inline-block으로 열을 나눴던 첫 시도는 마크업 개행이
   만드는 inline-block 사이 공백만큼 폭이 초과되어 6열이 아닌 5열로
   줄바꿈되는 결함이 있어 flex로 대체했다.) */
.gallery2.owl-carousel > .item_gallary {
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 184 / 140;
}

.gallery2.owl-carousel.slide_02 > .item_gallary {
    width: 16.6667%;
}

@media (max-width: 767px) {
    .gallery2.owl-carousel.slide_02 > .item_gallary {
        width: 50%;
        aspect-ratio: 174 / 133;
    }
}

/* slide_01(리뷰 이미지 슬라이더, grid_col_count:1) 전용 비율 — 원본
   실측(1280px, w202409059af5b2fd85a15) .item_gallary 692×415px */
.gallery2.owl-carousel.slide_01 > .item_gallary {
    aspect-ratio: 692 / 415;
}