@charset "UTF-8";
/* 공간아카이브 홈 (2026-08-18 클라 레퍼런스 리뉴얼)
   /shootPhoto/photoGallery 상단에 붙는 큐레이션 + 랭킹 영역.
   기존 탭/필터/그리드는 이 아래에 그대로 남는다 — 레퍼런스에는 그리드가 없지만
   지우면 수천 건을 둘러볼 수단이 사라진다.

   좌우 기준선은 다른 서브페이지와 동일하게 1200 컨테이너 − 우측 59px 인셋(=1141px).
   팔레트는 레퍼런스의 웜톤(베이지)을 따른다. */

/* 하단 80px: 2026-08-19 '전체 공간 둘러보기' 버튼(.ah_browseLink, margin-top:40px + 버튼 42px)을
   빼고 나니 이 wrap 이 padding-bottom:0 이라 마지막 .ah_cta 카드가 푸터에 0px 로 맞붙었다.
   (.ah_cta 는 margin-top 만 있고 margin-bottom 이 없다) 버튼이 만들던 82px 여백을 wrap 이 대신 낸다.
   archiveBrowse.jsp 의 .ah_wrap.ab_head 는 자기 <style> 의 .ab_head{padding-bottom:0} 이 이겨서 영향 없음. */
.ah_wrap{width:1200px;margin:0 auto;padding:36px 59px 80px 0;box-sizing:border-box;
         font-family:Pretendard,"Noto Sans KR",sans-serif;color:#1a1a1a;}

/* ---------------------------------------------------------------- 상단 배너 (관리자 교체) */
/* 규격은 홈 메인 배너와 동일(1920x700 / 1300x850 / 960x860).
   숨김 규칙은 반드시 `.ah_bannerBox img.ah_banner_tab` 처럼 요소 선택자를 포함해 쓸 것 —
   `.ah_banner_tab`(0,1,0) 만으로는 바로 위 `.ah_bannerBox img`(0,1,1) 를 못 이겨 3장이 다 쌓인다. */
.ah_bannerBox{border-radius:26px;overflow:hidden;line-height:0;font-size:0;}
.ah_bannerBox a{display:block;}
.ah_bannerBox img{display:block;width:100%;height:auto;}
.ah_bannerBox img.ah_banner_tab, .ah_bannerBox img.ah_banner_mo{display:none;}

/* ---------------------------------------------------------------- 배너 아래 검색 */
.ah_srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* 2026-08-25 클라 레퍼런스 반영 2차.
   1차(08-24)는 '흰 바 하나에 컨트롤을 담는' 구조였는데 시안은 정반대다 —
   바깥이 베이지(#DACAB6) 컨테이너이고 그 안에 흰 라운드 박스 5개가 각각 들어간다.
   그래서 .ah_search 는 '컨테이너', .ah_searchField 는 '흰 박스'로 역할을 한 단계씩 올린다.

   치수는 시안(배너 폭 886px)을 실제 콘텐츠 폭 1141px 로 환산한 배율 ×1.287 로 뽑았다
   (카드 폭 209→268.75 로 교차검증). 시안은 별도 목업이라 절대픽셀을 그대로 쓰면 안 된다.
     컨테이너 72→93 / 필드 43→55 / 라벨 ink 12→15.5(=17px 폰트) / 돋보기 17→22
   라벨 ink÷필드높이 비율은 시안 0.279, 08-24 판 0.286 으로 이미 같았다. 즉 '폰트만 작은' 게
   아니라 바 전체가 1.29배 작았던 것이라 필드와 폰트를 같은 비율로 올려야 한다.
   드롭다운은 네이티브 select 다(이유는 photoGallery.jsp 마크업 주석 참고).
   appearance 를 지우고 화살표를 배경 SVG 로 그려 브라우저별 기본 화살표 차이를 없앤다. */
.ah_search{display:flex;align-items:center;gap:12px;margin-top:28px;
           padding:14px 20px;box-sizing:border-box;
           background:#DACAB6;border:0;border-radius:12px;}

/* 검색창 = 독립한 흰 박스. 돋보기를 오른쪽 끝에 절대배치하기 위한 기준이기도 하다. */
.ah_searchField{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0;
                height:43px;padding:0 40px 0 14px;box-sizing:border-box;
                background:#fff;border:1px solid #b6b2ac;border-radius:6px;}
/* 포커스 링은 컨테이너가 아니라 이 박스에 준다(컨테이너에는 border 가 없어졌다) */
.ah_searchField:focus-within{border-color:#8a8378;}

/* 시안의 돋보기는 입력창 '오른쪽 끝'이다(08-24 판은 왼쪽).
   파란 '검색' 버튼을 없앴으므로 이 아이콘이 submit 버튼을 겸한다 —
   엔터 제출은 버튼이 없어도 브라우저 기본 동작으로 남지만(텍스트 입력 1개 = implicit submission),
   마우스만 쓰는 사용자에게 누를 대상은 남겨야 한다.
   button 기본 스타일(테두리/배경/appearance)을 전부 지우지 않으면 브라우저마다 회색 칩이 뜬다. */
.ah_searchIcon{position:absolute;right:0;top:0;width:40px;height:100%;
               display:flex;align-items:center;justify-content:center;
               padding:0;border:0;background:transparent;
               -webkit-appearance:none;appearance:none;
               color:#1a1a1a;cursor:pointer;}
.ah_searchIcon svg{display:block;width:17px;height:17px;}

/* min-width:0 이 없으면 input 의 기본 min-content 폭 때문에 좁은 화면에서 바가 밖으로 삐져나간다 */
.ah_searchInput{flex:1 1 auto;min-width:0;height:100%;padding:0;border:0;background:transparent;
                font-size:13.5px;color:#1c1a17;}
.ah_searchInput::placeholder{color:#8f8f8f;}
.ah_searchInput:focus{outline:none;}

.ah_searchFilters{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
/* 시안 드롭다운 폭은 114~126px 로 제각각인데 목업 오차로 보고 155px 로 균일화한다.
   155×4 + gap 16×4 = 684, 내부폭 1089 → 검색창 405px (시안 환산 400px) */
.ah_searchSelect{height:43px;padding:0 34px 0 14px;box-sizing:border-box;
                 border:1px solid #b6b2ac;border-radius:6px;background-color:#fff;
                 background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='11' viewBox='0 0 19 11'%3E%3Cpath d='M2 2L9.5 9L17 2' stroke='%231a1a1a' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                 background-repeat:no-repeat;background-position:right 13px center;background-size:15px 9px;
                 -webkit-appearance:none;-moz-appearance:none;appearance:none;
                 font-size:13.5px;font-weight:700;color:#1a1a1a;font-family:inherit;cursor:pointer;
                 min-width:120px;}
.ah_searchSelect:focus{outline:none;border-color:#8a8378;}
/* 파란 '검색' 버튼(.ah_searchBtn)은 시안에 없다(2026-08-25 클라 지적) — 마크업과 함께 규칙째 삭제했다. */

/* ---------------------------------------------------------------- 섹션 공통 */
/* 2026-08-20 클라 4/5번: 전 구간이 56px 로 균일해 카테고리가 한 덩어리로 붙어 보였다.
   84px 는 콘텐츠 폭 1114px 대비 7.5% 라 "따로 떠 있는" 느낌까지는 안 간다. */
.ah_sec{margin-top:84px;}
.ah_secHead{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.ah_secIcon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
            width:34px;height:34px;border-radius:10px;background:#f1e8db;color:#a3855a;}
/* 2026-08-28 클라 4번: 소제목 아이콘 7개가 전부 같은 웜그레이라 섹션이 구분되지 않았다.
   /community/operationData 의 '공사 전 준비 업무별 접수 현황' 칩 팔레트를 그대로 가져온다
   (operation_data.css:266-269 — agree/lift/permission/inspect 4색). 섹션이 7개라 3색이
   모자라 같은 공식(아주 옅은 틴트 배경 + 채도 있는 중간 톤 전경)으로 초록/청록/골드를 더했다.
   골드 전경 #e0a422 는 od_cardIcon--gold 에 이미 있는 값이다.
   선택자를 .ah_secIcon.ah_secIcon--x (0,2,0) 로 두는 이유: 단일 클래스면 .ah_secIcon(0,1,0)과
   특이도가 같아 '아래에 썼다'는 소스 순서로만 이긴다 — 규칙이 위로 옮겨지면 조용히 깨진다. */
.ah_secIcon.ah_secIcon--view  { background:#fdf3d9; color:#e0a422; }  /* 가장 많이 본 공간 (트로피) */
.ah_secIcon.ah_secIcon--photo { background:#e4edfd; color:#2D71EC; }  /* 사진  = od agree 파랑 */
.ah_secIcon.ah_secIcon--video { background:#ece6fb; color:#6f4fd8; }  /* 영상  = od lift 보라 */
.ah_secIcon.ah_secIcon--apt   { background:#e2f3e3; color:#2f9e44; }  /* 아파트 (추가 초록) */
.ah_secIcon.ah_secIcon--area  { background:#fdeee0; color:#d9822b; }  /* 평형  = od permission 주황 */
.ah_secIcon.ah_secIcon--style { background:#fde6ea; color:#d6455f; }  /* 스타일 = od inspect 레드 */
.ah_secIcon.ah_secIcon--store { background:#dcf0f2; color:#1a8a99; }  /* 상업공간 (추가 청록) */
.ah_secIcon svg{display:block;width:20px;height:20px;}
.ah_secTit{font-size:21px;font-weight:800;letter-spacing:-0.5px;color:#1c1a17;}
.ah_empty{padding:44px 0;text-align:center;font-size:14px;color:#a9a396;
          border:1px dashed #e3ded4;border-radius:12px;}

/* ---------------------------------------------------------------- 카드 4열 */
.ah_cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;}
.ah_card{display:block;border-radius:0;overflow:hidden;background:#fff;
         border:1px solid #ece7df;text-decoration:none;color:inherit;
         transition:transform .25s ease, box-shadow .25s ease;}
.ah_card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(28,26,23,.10);}
/* 카드 내부는 <a> 안이라 전부 span 이다. span 은 기본 display:inline 이고
   inline 요소에는 aspect-ratio 가 먹지 않아 썸네일이 73px 로 찌그러졌었다(2026-08-18).
   블록으로 승격시키는 선언을 빼면 안 된다. */
.ah_thumb{display:block;position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#f2f0ec;}
.ah_thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ah_badges{position:absolute;top:14px;left:14px;display:flex;gap:6px;z-index:1;}
/* 2026-08-28 클라 3번: 홈 메인 아카이브 섹션의 배지와 '모양이 다르다'는 지적.
   실제로 달랐다 — 라운드 6px(각진 사각) vs 999px(알약), 배경 rgba(35,31,26,.72) vs rgba(0,0,0,.45),
   폰트 11/700 vs 12/600, 패딩 5-9-4 vs 6-12-5. main_index2.css 의 .main_archiveBadge 와
   한 글자도 다르지 않게 맞춘다(같은 날 홈 쪽이 연해지고 인셋이 커진 값 기준).
   상하 패딩 6/5 의 1px 차이는 오타가 아니라 한글 광학 중앙 보정이다 — 같게 만들지 말 것. */
.ah_badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px 5px;border-radius:999px;
          background:rgba(0,0,0,.45);color:#fff;font-size:12px;font-weight:600;line-height:1;letter-spacing:-0.2px;white-space:nowrap;}
.ah_play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
         width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);
         display:flex;align-items:center;justify-content:center;}
.ah_play::after{content:"";width:0;height:0;margin-left:3px;
         border-left:13px solid #2b2b2b;border-top:8px solid transparent;border-bottom:8px solid transparent;}
/* 2026-08-20 요구사항 4: 썸네일 아래 박스가 너무 좁아 업체명/날짜/주소가 뭉쳐 보였다.
   박스를 키우고 두 줄 사이 간격도 함께 벌린다. */
.ah_cardTxt{display:block;padding:18px 16px 20px;}
.ah_cardTop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.ah_cardCom{font-size:14px;font-weight:700;color:#1c1a17;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ah_cardDate{flex:0 0 auto;font-size:12px;color:#b0aaa0;}
.ah_cardPlace{display:block;margin-top:10px;font-size:12.5px;line-height:1.5;color:#8b857b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------------------------------------------------------------- 랭킹 2열 */
.ah_rankRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:84px;}
/* 랭킹 카드 4장은 노출 건수와 무관하게 같은 높이로 고정한다(클라 요청).
   기준은 5줄이 다 찬 카드 = 412px(아파트/평형 카드 실측값). 4개 랭킹 모두 limit=5 로 조회하므로
   5줄이 이 컴포넌트의 최대 상태다. '스타일' 처럼 1줄만 있거나 '상업공간' 처럼 비어 있어도 줄지 않는다. */
.ah_rankCard{border:1px solid #ece7df;border-radius:14px;padding:8px 24px;background:#fff;
             min-height:412px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;}
.ah_rankCard .ah_rankList{width:100%;}
.ah_rankCard .ah_empty{margin:0;}
.ah_rankList > li{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid #f3efe8;}
.ah_rankList > li:last-child{border-bottom:0;}
.ah_rankNo{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
           width:24px;height:24px;border-radius:6px;font-size:12px;font-weight:700;}
.ah_rankCard--dark .ah_rankNo{background:#1c1a17;color:#fff;}
.ah_rankCard--warm .ah_rankNo{background:#e6d8c2;color:#6b5a3e;}
.ah_rankIcon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
             width:46px;height:46px;border-radius:50%;background:#f1e8db;color:#a3855a;}
.ah_rankCard--warm .ah_rankIcon{background:#f0efec;color:#8b857b;}
/* 2026-08-28 클라 4번(연장): 순위 카드 안의 46px 원형 칩은 각 섹션의 소제목 아이콘과
   같은 SVG 를 쓴다. 소제목만 색을 입히고 여기를 베이지/회색으로 두면 같은 그림이
   같은 화면에서 두 가지 색으로 나와 반쯤 만들다 만 것처럼 보인다(개수도 이쪽이 훨씬 많다 —
   4카드 x 최대 5줄 = 최대 20개 vs 소제목 7개). 소제목과 같은 색으로 맞춘다.
   --warm 규칙(0,2,0)을 이겨야 하므로 여기도 두 클래스로 특이도를 맞춘다. */
.ah_rankCard.ah_rank--apt   .ah_rankIcon{background:#e2f3e3;color:#2f9e44;}
.ah_rankCard.ah_rank--area  .ah_rankIcon{background:#fdeee0;color:#d9822b;}
.ah_rankCard.ah_rank--style .ah_rankIcon{background:#fde6ea;color:#d6455f;}
.ah_rankCard.ah_rank--store .ah_rankIcon{background:#dcf0f2;color:#1a8a99;}
.ah_rankIcon svg{display:block;width:24px;height:24px;}
.ah_rankTxt{min-width:0;}
.ah_rankName{display:block;font-size:15px;font-weight:700;color:#1c1a17;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ah_rankCnt{display:block;margin-top:4px;font-size:13px;color:#a9a396;}

/* ---------------------------------------------------------------- 하단 CTA */
.ah_cta{position:relative;display:flex;align-items:center;gap:24px;margin-top:100px;
        padding:34px 40px;background:#fbf7f1;border-radius:16px;overflow:hidden;}
.ah_ctaTxt{flex:1 1 auto;min-width:0;}
.ah_ctaTit{font-size:19px;font-weight:800;color:#1c1a17;word-break:keep-all;}
.ah_ctaDesc{margin-top:14px;font-size:14px;line-height:1.7;color:#6f6759;word-break:keep-all;}
.ah_ctaLead{margin-top:20px;font-size:15px;font-weight:700;color:#1c1a17;word-break:keep-all;}
/* 2026-08-20 클라 6번: 리드 문구 간격(20px)보다 작아 버튼이 문구에 붙어 보였다 */
.ah_ctaBtn{display:inline-flex;align-items:center;gap:7px;margin-top:32px;padding:10px 18px;
           background:#2D71EC;color:#fff;font-size:13px;font-weight:600;border-radius:6px;text-decoration:none;}
.ah_ctaBtn:hover{background:#1f4fb8;color:#fff;}
.ah_ctaArrow{display:inline-block;width:6px;height:6px;border-top:1.5px solid currentColor;
             border-right:1.5px solid currentColor;transform:rotate(45deg);}
.ah_ctaImg{flex:0 0 auto;width:150px;line-height:0;}
.ah_ctaImg img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:100px 100px 10px 10px;}
/* 로고는 아치 모양이 이미 그림 안에 있다. cover 로 자르거나 라운드를 먹이면 테두리가 잘린다. */
/* 2026-08-20 클라 6번: 172px -> 렌더 높이 279px 라 옆 텍스트(19~13px)와 무게가 안 맞았다.
   96px 면 렌더 높이 156px. 모바일(158행)이 PC 보다 커지지 않도록 그쪽도 함께 내린다. */
.ah_ctaImg--logo{width:96px;}
.ah_ctaImg--logo img{aspect-ratio:auto;height:auto;object-fit:contain;border-radius:0;}

/* 2026-08-19: '전체 공간 둘러보기' 링크 버튼(.ah_browseLink)은 레퍼런스에 없다는 클라 요청으로 삭제.
   규칙도 함께 지운다 — 마크업 참조자가 0 이라 남겨두면 죽은 CSS 다.
   전체 목록 진입은 .ah_cta 안의 '더 알아보기'(/shootPhoto/archiveBrowse)가 담당한다. */

/* ---------------------------------------------------------------- 반응형 */
@media all and (max-width:1200px){
	.ah_wrap{width:100%;padding:28px 20px 56px;}/* 하단 여백은 위 기본 규칙과 같은 이유(2026-08-19) */
}
@media all and (max-width:1199px){
	.ah_bannerBox img.ah_banner_pc{display:none;}
	.ah_bannerBox img.ah_banner_tab{display:block;}
}
@media all and (max-width:1024px){
	.ah_cards{gap:16px;}
	.ah_rankRow{gap:20px;}
	/* 1단으로 접히면 옆 카드와 높이를 맞출 이유가 없다 */
	.ah_rankCard{min-height:0;}
}
/* 2026-08-25: 드롭다운이 3→4개가 되고 폭도 106→155px 로 커지면서, 한 줄 배치에서 검색창이 먹는
   폭이 급격히 줄어든다. 1025px 에서는 입력 가용폭이 177px 라 placeholder(6항목·17px, 필요 293px)가
   116px 잘리고, 900px 에서는 검색창이 124px 로 찌그러진다.
   접기 임계값을 1024 가 아니라 1180 으로 잡는 이유: 1141px 이 겹침 0 인 수학적 경계인데
   실기기 한글 폰트가 헤드리스보다 넓게 렌더돼(이 저장소 기존 교훈) 경계에 붙이면 다시 물린다.
   1181px 에서 가용 333 vs 필요 293 으로 40px 여유가 남는 1180 을 택했다.
   → [검색창] / [사진][지역][평형][스타일] 두 줄로 접고 드롭다운은 균등분할한다. */
/* 2026-08-28 클라 1번으로 바 전체가 슬림해졌다(필드 55->43, 폰트 17->13.5, 드롭다운 155->120).
   접기 임계값 1180 은 '17px 폰트 + 155px 드롭다운' 기준이라 그대로 두면 1100px 대에서
   필요도 없는데 두 줄로 접혀 오히려 더 두꺼워진다(= 요청과 반대). 재계산:
     내부폭 = vw - 40(.ah_wrap) - 40(.ah_search padding)
     드롭다운 120*4 + gap 12*3 = 516, 필드/필터 사이 gap 12
     placeholder(6항목·13.5px) + 돋보기 40 + 좌패딩 14 ≈ 305 필요
   → 1025px 에서 필드 가용 417px(여유 112px). 900px 에서 292px 로 부족해진다.
   실기기 한글 폰트가 헤드리스보다 넓게 렌더되는 이 저장소 교훈을 감안해 1024 로 잡는다.

   ── 2026-08-28 2차 수정(회귀) ──────────────────────────────────────────────
   위 재계산식에 .pp_quickPanel 이 빠져 있었다. 그 패널은 total_header.css:137 에서
   position:fixed; right:0; width:152px; z-index:50 이고 601px 초과에서 항상 떠 있다.
   임계값을 1180 -> 1024 로 내리자 1025~1200px 가 다시 '한 줄'이 되는데, 한 줄에서는
   드롭다운이 120px 로 좁아서 마지막 '스타일'이 패널 밑으로 통째로 들어간다
   (1152px 실측: 클릭 가능폭 121px -> 8px. 중심점 클릭이 조용히 죽거나 패널의
    카톡/신청서 링크로 새어 나갔다. HEAD~1 CSS 를 주입해 A/B 로 인과 확인함).
   그래서 (a) 겹침 구간에서는 바에 패널 폭만큼 우측 거터를 주고,
        (b) 거터를 준 만큼 한 줄이 좁아지므로 접기 임계값을 1024 -> 1100 으로 올린다.
   거터 계산: vw<1200 이면 .ah_wrap 이 100%+padding 20 이라 우측 여백이 20px 뿐 →
             152-20 = 132px 이 필요. vw>=1200 이면 .ah_wrap 이 1200 중앙정렬 +
             padding-right 59 라 콘텐츠 우측이 (vw+1200)/2-59, 패널 좌측이 vw-152 →
             필요량 = (1200-vw)/2 + 93 이고 vw>=1386 에서 0 이 된다(그 위는 규칙 없음).
   1101px 검증: 내부폭 1101-40-132-40 = 889, 드롭다운 516 + gap 12 → 검색창 361px
                (필요 305px, 여유 56px) 으로 한 줄이 유지된다. */
@media all and (max-width:1100px){
	.ah_search{flex-wrap:wrap;gap:12px;}
	.ah_searchField{flex:1 1 100%;}
	.ah_searchFilters{flex:1 1 100%;gap:12px;}
	.ah_searchSelect{flex:1 1 0;min-width:0;}
}
/* 퀵패널 회피 거터. 600px 이하는 패널이 display:none(total_header_res.css:124)이라 제외한다. */
/* 경계는 .ah_wrap 자신이 바뀌는 지점(199행 max-width:1200px)과 같아야 한다.
   1200px 는 아직 '100% 폭 + padding 20' 쪽이라 평평한 132px 이 필요한데, 처음엔 두 블록이
   둘 다 1200 을 주장해 calc 쪽(93px)이 이겨 39px 이 모자랐다(#ahStyle 19px 이 패널 밑).
   ※ 한쪽 경계만 고치면 vw=1200 이 19px -> 112px 로 오히려 악화된다 — 반드시 둘 다 움직일 것. */
@media all and (min-width:601px) and (max-width:1200px){
	.ah_search{margin-right:132px;}
}
@media all and (min-width:1201px) and (max-width:1385px){
	.ah_search{margin-right:calc((1200px - 100vw) / 2 + 93px);}
}
@media all and (max-width:767px){
	.ah_bannerBox img.ah_banner_tab{display:none;}
	.ah_bannerBox img.ah_banner_mo{display:block;}
	.ah_bannerBox{border-radius:14px;}
	/* 드롭다운 4개를 한 줄에 세우면 360px 에서 한 칸이 65px 라 '스타일'+셰브론도 안 들어간다.
	   2×2 그리드로 접는다(390px → 156px / 360px → 141px 실측). flex-wrap 은 위 1024 블록에서 이미 켜진다. */
	.ah_search{padding:11px;gap:9px;}
	/* PC 가 43px 로 내려갔으므로 모바일이 그보다 커지면 안 된다(46 -> 40) */
	.ah_searchField{height:40px;padding:0 38px 0 12px;}
	.ah_searchIcon{width:38px;}
	.ah_searchIcon svg{width:16px;height:16px;}
	/* placeholder 가 6개 항목으로 길어졌고 오른쪽 돋보기가 44px 를 먹는다.
	   14px 면 360px 기기에서 잘린다(캔버스 실측 241.3px vs 가용 232px) → 13px. */
	.ah_searchInput{font-size:12.5px;}
	.ah_searchFilters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
	.ah_searchSelect{width:100%;min-width:0;height:40px;padding:0 30px 0 12px;font-size:13px;
	                 background-position:right 11px center;background-size:13px 8px;}
}
/* 2026-08-28 클라 3번(모바일): .ah_badges 에는 원래 반응형 변형이 아예 없어서
   PC 값(14px / 12px)이 모바일 작은 카드에도 그대로 걸렸다. 홈 메인은 600px 에서
   9px / 10px 로 줄고 601~834px 에서는 11px 을 쓴다 — '홈과 같은 모양'이 요구사항이므로
   중단점과 값을 main_index2.css 와 똑같이 맞춘다(834 / 600).
   상하 패딩 4/5 는 PC(6/5)와 보정 방향이 반대다 — 복사해 오지 말 것(main_index2.css 주석 참고). */
@media all and (max-width:834px){
	.ah_badges{top:11px;left:11px;}
}
@media all and (max-width:600px){
	.ah_badges{top:9px;left:9px;gap:4px;}
	.ah_badge{padding:4px 9px 5px;font-size:10px;}
}
@media all and (max-width:768px){
	.ah_sec{margin-top:52px;}
	.ah_secTit{font-size:17px;}
	.ah_secIcon{width:30px;height:30px;}
	.ah_secIcon svg{width:17px;height:17px;}
	.ah_cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
	.ah_cardCom{font-size:13px;}
	.ah_cardPlace{font-size:11.5px;}
	.ah_cardDate{font-size:11px;}
	.ah_play{width:36px;height:36px;}
	.ah_play::after{border-left-width:11px;border-top-width:7px;border-bottom-width:7px;}
	/* 2026-09-01 클라 "간격 균일하게": 1단으로 접히면 '카드 → 다음 제목' 간격이 두 종류로 갈린다.
	   행 안쪽(gap 14px: 아파트→평형, 스타일→상업공간)과 행 사이(margin-top 52px: 영상→아파트,
	   평형→스타일)가 번갈아 나와 들쭉날쭉했다. 클라가 52px 쪽을 기준으로 지목했으므로 gap 도 52px 로 맞춘다. */
	.ah_rankRow{grid-template-columns:minmax(0,1fr);gap:52px;margin-top:52px;}
	.ah_rankCard{padding:4px 16px;border-radius:12px;}
	.ah_rankList > li{padding:13px 0;gap:11px;}
	.ah_rankIcon{width:38px;height:38px;}
	.ah_rankIcon svg{width:20px;height:20px;}
	.ah_rankName{font-size:14px;}
	/* 2026-09-01 클라 "하단 배너가 세로로 너무 길다 → 가로형으로, 최대한 PC 와 유사하게":
	   column 으로 접으면 로고가 문구 아래에 통째로 실려 390px 기준 배너 높이가 490px 까지 갔다.
	   PC 와 같은 가로 배치(문구 좌 · 로고 우)를 그대로 두고 로고와 여백만 줄인다.
	   .ah_ctaImg 는 base 의 .ah_ctaImg--logo(96px) 와 특이도가 같지만 소스가 뒤라 이긴다. */
	.ah_cta{gap:14px;margin-top:64px;padding:22px 18px;border-radius:14px;}
	.ah_ctaImg{width:76px;}
	.ah_ctaTit{font-size:17px;}
	.ah_ctaDesc{margin-top:10px;font-size:13px;line-height:1.65;}
	/* 문구 칸이 230px 대로 좁아지면 PC 기준으로 넣어 둔 <br> 이 어절을 고아로 남긴다 */
	.ah_ctaDesc br{display:none;}
	.ah_ctaLead{margin-top:14px;font-size:14px;}
	.ah_ctaBtn{margin-top:18px;}
}