@charset "UTF-8";
/* 커뮤니티 > 전국 운영 데이터 (2026-08-14 신설)
header.jsp 가 안에서 total_common.css / main_style_j.css 를 '나중에' 로드하기 때문에
a{color:...} 같은 요소 선택자에 조용히 덮인다. 그래서 모든 규칙을 .od_wrap 으로 스코프한다.
우측 59px 패딩은 press/staff/photoGallery 와 같은 헤더 '고객지원' 글자선 보정. */
.od_wrap {
width: 1200px;
margin: 0 auto;
padding: 40px 59px 90px 0;
box-sizing: border-box;
font-family: Pretendard, "Noto Sans KR", sans-serif;
color: #1a1a1a;
}
.od_wrap .od_srOnly {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ---------------------------------------------------------------- 상단 배너 */
/* 관리자 교체형 배너(1920x700 / 1300x850 / 960x860). 폭은 .od_wrap 이 잡는 1114px 이다.
숨김 규칙은 반드시 `.od_bannerBox img.od_banner_tab` 처럼 요소 선택자를 포함해서 쓸 것 —
`.od_banner_tab`(0,1,0) 만으로는 바로 위 `.od_bannerBox img`(0,1,1) 를 못 이겨
PC/태블릿/모바일 3장이 세로로 전부 쌓인다. */
.od_wrap .od_bannerBox {
border-radius: 26px;
overflow: hidden;
line-height: 0;
font-size: 0;
}
.od_wrap .od_bannerBox a {
display: block;
}
.od_wrap .od_bannerBox img {
display: block;
width: 100%;
height: auto;
}
.od_wrap .od_bannerBox img.od_banner_tab,
.od_wrap .od_bannerBox img.od_banner_mo {
display: none;
}
/* ---------------------------------------------------------------- 검색 */
.od_wrap .od_searchBox {
display: flex;
align-items: center;
/* 우측 포인트 리스트 폭을 20px 넘겨줬으므로(아래 .od_searchPoints) 그만큼 좌우 여백을
줄여 좌측 검색 영역의 폭 손실을 상쇄한다. 안 줄이면 뷰포트 1025~1039px 구간에서
좌측 제목이 2줄로 접히는 새 회귀가 생긴다(실측). 구분선 좌우는 34/34 대칭 유지. */
gap: 34px;
margin-top: 20px;
padding: 34px 44px;
background: #eef3fd;
border-radius: 20px;
}
.od_wrap .od_searchMain {
flex: 1 1 auto;
min-width: 0;
}
.od_wrap .od_searchTitle {
font-size: 18px;
font-weight: 700;
color: #16191f;
word-break: keep-all;
}
/* 제목 옆 물음표 배지. 마우스를 올리면 집계 기준을 알려 준다(시안의 ⓘ 자리) */
/* 2026-09-04 클라: 물음표를 '누르면' 말풍선이 뜨게. 기준 박스가 필요해 래퍼를 하나 둔다
(말풍선은 od_searchTitle 이 아니라 이 래퍼를 기준으로 위치를 잡는다 - 제목이 2줄로
접히는 폭에서도 말풍선이 물음표를 따라가야 한다). */
.od_wrap .od_helpWrap {
position: relative;
display: inline-block;
vertical-align: 2px;
line-height: 1;
}
.od_wrap .od_helpDot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-left: 6px;
padding: 0;
background: transparent;
border: 1.4px solid var(--mBlue);
border-radius: 50%;
color: var(--mBlue);
font-size: 11px;
font-weight: 700;
line-height: 1;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.od_wrap .od_helpDot[aria-expanded="true"] {
background: var(--mBlue);
color: #fff;
}
/* 말풍선. 물음표 아래에 붙되 왼쪽 끝을 물음표에 맞추고, 좁은 폭에서 화면 밖으로
나가지 않도록 max-width 를 뷰포트 기준으로도 한 번 더 묶는다.
★ [hidden] 숨김 규칙을 반드시 같이 둘 것.
브라우저 기본 스타일시트의 `[hidden]{display:none}` 은 명시도가 (0,1,0) 인데
아래 `.od_wrap .od_helpTip` 은 (0,2,0) 이라, display 를 선언하는 순간
hidden 이어도 말풍선이 계속 떠 있게 된다(JS 로 열기 전부터 노출). */
.od_wrap .od_helpTip[hidden] {
display: none;
}
.od_wrap .od_helpTip {
position: absolute;
top: calc(100% + 9px);
left: 0;
z-index: 20;
display: block;
width: 320px;
max-width: calc(100vw - 48px);
padding: 12px 14px;
background: #16191f;
border-radius: 8px;
color: #fff;
font-size: 13px;
font-weight: 400;
line-height: 1.62;
letter-spacing: -0.2px;
/* 제목이 keep-all 이라 말풍선도 같은 규칙을 써야 어절 중간에서 안 끊긴다 */
word-break: keep-all;
white-space: normal;
text-align: left;
box-shadow: 0 6px 20px rgba(22,25,31,.18);
}
/* 꼬리. 물음표 중심(왼쪽 6px 마진 + 반지름 9px)에 맞춘다 */
.od_wrap .od_helpTip::before {
content: "";
position: absolute;
top: -5px;
left: 11px;
width: 10px;
height: 10px;
background: #16191f;
border-radius: 2px;
transform: rotate(45deg);
}
.od_wrap .od_searchSub {
margin-top: 6px;
font-size: 14px;
color: #6b7482;
word-break: keep-all;
}
/* 시안은 검색 버튼이 입력창 바깥이 아니라 안쪽 오른쪽에 박혀 있다 */
.od_wrap .od_searchForm {
position: relative;
margin-top: 16px;
max-width: 500px;
}
.od_wrap .od_searchInput {
display: block;
width: 100%;
height: 54px;
padding: 0 104px 0 18px;
box-sizing: border-box;
background: #fff;
border: 1px solid #cfd8e6;
border-radius: 10px;
font-size: 15px;
color: #1a1a1a;
}
.od_wrap .od_searchInput::placeholder {
color: #a7b0bd;
}
.od_wrap .od_searchInput:focus {
outline: none;
border-color: var(--mBlue);
}
.od_wrap .od_searchBtn {
position: absolute;
top: 6px;
right: 6px;
width: 88px;
height: 42px;
background: var(--mBlue);
color: #fff;
font-size: 15px;
font-weight: 600;
border: 0;
border-radius: 8px;
cursor: pointer;
}
.od_wrap .od_searchBtn:disabled {
background: #9db6e6;
cursor: default;
}
.od_wrap .od_searchMsg {
min-height: 18px;
margin-top: 8px;
font-size: 13px;
color: #d0342c;
}
/* 2열 각 칸의 텍스트 가용폭 = (width - 1(border) - padding-left - column-gap) / 2 - 34(아이콘) - 10(gap).
430/48/30 이면 131.5px 라 '현재 공사 현황 미리 확인'(134.67px)이 어절 경계에서 2줄로 접혔다.
'이웃의 공사 피로도 예상'(131.25px)도 여유가 0.25px 뿐이라 우연히 한 줄이던 상태였다.
450/34/24 로 151.5px 를 확보해 최장 항목 기준 16.8px 여유를 둔다. */
.od_wrap .od_searchPoints {
flex: 0 0 auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
width: 450px;
padding-left: 34px;
border-left: 1px solid #d8e2f5;
}
.od_wrap .od_searchPoints li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 500;
color: #3c4450;
word-break: keep-all;
/* Pretendard 는 CDN 웹폰트라 로딩 전/실패 시 시스템 고딕(159.69px)으로 렌더돼 가용폭을 넘긴다.
PC 는 무조건 한 줄로 붙여 둔다(넘쳐도 옆 칸까지 20.7px 여유 실측).
1단으로 풀리는 1024 이하에서는 아래 미디어쿼리에서 normal 로 되돌린다. */
white-space: nowrap;
}
.od_wrap .od_pointIcon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: #dbe6fb;
color: var(--mBlue);
border-radius: 50%;
}
.od_wrap .od_pointIcon svg {
display: block;
width: 18px;
height: 18px;
}
/* ---------------------------------------------------------------- 섹션 공통 */
.od_wrap .od_col2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px;
}
/* 2026-08-20 클라 8/10번: 카드 하단과 다음 섹션 제목이 붙어 보여 56px -> 88px
2026-08-28 클라 1번: 아직 좁다(검색박스↔'지역별 공사중 현황', 아파트카드↔'공사 전 준비 업무별'
두 지점을 지목) → 88px -> 120px. 콘텐츠 폭 1114px 대비 10.8%.
두 지점은 서로 다른 규칙이 아니라 둘 다 이 .od_section margin-top 이다(한 곳만 고치면 어긋난다). */
.od_wrap .od_section {
margin-top: 120px;
}
/* 특이도 (0,3,0) 이라 위 규칙을 이긴다 — 반드시 같은 값으로 함께 움직일 것 */
.od_wrap .od_col2 .od_section {
margin-top: 120px;
}
.od_wrap .od_secTitle {
font-size: 22px;
font-weight: 700;
color: #16191f;
letter-spacing: -0.4px;
}
.od_wrap .od_secSub {
margin-top: 10px;
font-size: 15px;
color: #727171;
word-break: keep-all;
}
/* 2026-08-20 클라 9번: 부제와 박스가 붙어 보여 18px -> 28px. 업무 4카드는 아래 od_workGrid 가 별도로 받는다
2026-08-28: 섹션 간격을 88 -> 120 으로 벌렸으므로 제목 묶음(제목+부제+박스)이 상대적으로
더 뭉쳐 보이지 않게 28 -> 34 로 같이 올린다. */
.od_wrap .od_card {
margin-top: 34px;
padding: 26px 30px;
background: #fff;
border: 1px solid #e5e8ee;
border-radius: 14px;
box-sizing: border-box;
}
/* 좌우 2단 순위 카드는 항목 수와 무관하게 같은 높이로 고정한다(클라 요청).
기준은 막대 10줄짜리 'TOP 10' 카드 — 10*38 + 헤드 48 + 상하 패딩 52 ≈ 480. */
.od_wrap .od_col2 .od_section {
display: flex;
flex-direction: column;
}
.od_wrap .od_card--fixed {
flex: 1 1 auto;
min-height: 486px;
}
.od_wrap .od_cardHead {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 20px;
border-bottom: 1px solid #f0f2f6;
}
.od_wrap .od_cardIcon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
color: var(--mBlue);
}
.od_wrap .od_cardIcon--gold {
color: #e0a422;
}
.od_wrap .od_cardIcon svg {
display: block;
width: 22px;
height: 22px;
}
/* 업무별 4카드는 아이콘이 카드마다 달라야 한다(전에는 4장 모두 같은 회색 문서였다).
색만 바꾸면 시안의 컬러 일러스트와 결이 비슷해지고, 배경 원이 있어야 제목과 높이가 맞는다. */
.od_wrap .od_card--work .od_cardIcon {
width: 36px;
height: 36px;
border-radius: 10px;
}
.od_wrap .od_card--work .od_cardIcon svg {
width: 21px;
height: 21px;
}
.od_wrap .od_cardIcon--agree { background: #e4edfd; color: #2D71EC; }
.od_wrap .od_cardIcon--lift { background: #ece6fb; color: #6f4fd8; }
.od_wrap .od_cardIcon--permission { background: #fdeee0; color: #d9822b; }
.od_wrap .od_cardIcon--inspect { background: #fde6ea; color: #d6455f; }
.od_wrap .od_cardTitle {
font-size: 16px;
font-weight: 700;
color: #16191f;
}
.od_wrap .od_cardMeta {
font-size: 13px;
color: #9aa2ae;
}
.od_wrap .od_empty {
padding: 40px 0;
text-align: center;
font-size: 14px;
color: #a7b0bd;
}
/* ------------------------------------------------- 지역 순위(막대) */
.od_wrap .od_barList {
margin-top: 6px;
}
.od_wrap .od_barList li {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
}
.od_wrap .od_barRank {
flex: 0 0 auto;
width: 18px;
font-size: 13px;
font-weight: 600;
color: #9aa2ae;
text-align: right;
}
.od_wrap .od_barName {
flex: 0 0 auto;
width: 52px;
font-size: 14px;
font-weight: 600;
color: #2b3240;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.od_wrap .od_barTrack {
flex: 1 1 auto;
min-width: 0;
height: 8px;
background: #eceff4;
border-radius: 999px;
overflow: hidden;
}
.od_wrap .od_barFill {
display: block;
height: 100%;
background: var(--mBlue);
border-radius: 999px;
}
.od_wrap .od_barVal {
flex: 0 0 auto;
width: 108px;
text-align: right;
font-size: 13px;
color: #6b7482;
white-space: nowrap;
}
.od_wrap .od_barVal b {
font-weight: 700;
color: #2b3240;
}
.od_wrap .od_barVal em {
margin-left: 4px;
font-style: normal;
color: #9aa2ae;
}
/* ------------------------------------------------- 아파트 순위 */
.od_wrap .od_rankList {
margin-top: 4px;
}
.od_wrap .od_rankList li {
display: flex;
align-items: center;
gap: 14px;
padding: 15px 0;
border-bottom: 1px solid #f5f6f9;
}
.od_wrap .od_rankList li:last-child {
border-bottom: 0;
padding-bottom: 0;
}
/* 시안은 1위만 진한 파랑이고 2위 이하는 연한 파랑이다 */
.od_wrap .od_rankNo {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #cfe0fb;
color: #2D71EC;
font-size: 12px;
font-weight: 700;
border-radius: 6px;
}
.od_wrap .od_rankList li:first-child .od_rankNo {
background: var(--mBlue);
color: #fff;
}
.od_wrap .od_rankTxt {
flex: 1 1 auto;
min-width: 0;
}
.od_wrap .od_rankName {
display: block;
font-size: 15px;
font-weight: 700;
color: #16191f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.od_wrap .od_rankAddr {
display: block;
margin-top: 3px;
font-size: 13px;
font-style: normal;
color: #9aa2ae;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.od_wrap .od_rankCnt {
flex: 0 0 auto;
font-size: 14px;
font-weight: 700;
color: #2b3240;
white-space: nowrap;
}
/* ------------------------------------------------- 업무별 4카드 */
/* 시안은 카드 사이 간격이 좌우/상하 모두 같고, 카드 4장의 높이도 서로 같다
(5줄이 안 차는 카드가 있어도 줄어들지 않게 고정) */
/* 아래 .od_workGrid .od_card{margin-top:0} 때문에 부제와 카드가 0px 로 붙어 있었다.
행 간격(gap:24px)을 건드리지 않으려면 컨테이너에 margin 을 준다 — 값은 .od_card 와 동일하게 */
.od_wrap .od_workGrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin-top: 28px;
}
.od_wrap .od_workGrid .od_card--work {
min-height: 430px;
}
.od_wrap .od_workGrid .od_card {
margin-top: 0;
}
/* ------------------------------------------------- 차트 */
.od_wrap .od_chartCard {
position: relative;
padding: 28px 24px 20px;
}
.od_wrap .od_chartUnit {
position: absolute;
top: 20px;
right: 24px;
font-size: 12px;
color: #9aa2ae;
}
.od_wrap .od_chart {
width: 100%;
}
.od_wrap .od_chart svg {
display: block;
width: 100%;
height: auto;
}
/* ------------------------------------------------- 하단 CTA */
/* 2026-08-28: .od_section 을 88 -> 120 으로 올리면서 여기만 88 로 남아
마지막 섹션과 CTA 사이만 리듬이 깨졌다. 같이 올린다. */
.od_wrap .od_bottomCta {
margin-top: 120px;
}
.od_wrap .od_ctaTitle {
font-size: 24px;
font-weight: 700;
color: #16191f;
letter-spacing: -0.5px;
}
.od_wrap .od_ctaTxt {
margin-top: 18px;
font-size: 15px;
line-height: 1.7;
color: #5b6472;
word-break: keep-all;
}
.od_wrap .od_ctaBtns {
display: flex;
gap: 14px;
margin-top: 30px;
}
.od_wrap .od_ctaBtn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 178px;
padding: 15px 26px;
box-sizing: border-box;
font-size: 15px;
font-weight: 600;
border-radius: 6px;
text-decoration: none;
white-space: nowrap;
}
.od_wrap .od_ctaBtn--blue {
background: #1f4fb8;
color: #fff;
}
.od_wrap .od_ctaBtn--blue:hover {
background: #1a4299;
color: #fff;
}
.od_wrap .od_ctaBtn--kakao {
background: #fee500;
color: #191600;
}
.od_wrap .od_ctaBtn--kakao:hover {
background: #f5dd00;
color: #191600;
}
.od_wrap .od_kakaoIcon svg {
display: block;
width: 20px;
height: 20px;
}
.od_wrap .od_ctaArrow {
display: inline-block;
width: 7px;
height: 7px;
border-top: 1.6px solid currentColor;
border-right: 1.6px solid currentColor;
transform: rotate(45deg);
}
/* ------------------------------------------------- 하단 안내 */
.od_wrap .od_notice {
display: flex;
align-items: center;
gap: 12px;
margin-top: 56px;
padding: 20px 24px;
background: #dfe9fb;
border-radius: 8px;
font-size: 14px;
line-height: 1.6;
color: #2b3240;
word-break: keep-all;
}
.od_wrap .od_privacyNote {
margin-top: 14px;
font-size: 12.5px;
line-height: 1.6;
color: #9aa2ae;
word-break: keep-all;
}
.od_wrap .od_noticeIcon {
flex: 0 0 auto;
color: var(--mBlue);
}
.od_wrap .od_noticeIcon svg {
display: block;
width: 22px;
height: 22px;
}
/* ------------------------------------------------- 검색 결과 팝업 */
.od_wrap .od_modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
.od_wrap .od_modal[hidden] {
display: none;
}
.od_wrap .od_modalDim {
position: absolute;
inset: 0;
background: rgba(16, 20, 28, 0.45);
}
.od_wrap .od_modalBox {
position: relative;
width: 100%;
max-width: 560px;
max-height: 86vh;
overflow-y: auto;
padding: 32px;
box-sizing: border-box;
background: #fff;
border-radius: 16px;
box-shadow: 0 18px 50px rgba(16, 20, 28, 0.22);
}
.od_wrap .od_modalTitleRow {
display: flex;
align-items: center;
gap: 10px;
}
.od_wrap .od_modalCheck {
flex: 0 0 auto;
display: inline-flex;
color: var(--mBlue);
}
.od_wrap .od_modalCheck svg {
display: block;
width: 26px;
height: 26px;
}
.od_wrap .od_modalName {
font-size: 22px;
font-weight: 700;
color: #16191f;
word-break: keep-all;
}
.od_wrap .od_modalAddr {
margin-top: 10px;
padding-left: 36px;
font-size: 15px;
color: #6b7482;
}
.od_wrap .od_modalCount {
margin-top: 10px;
padding-left: 36px;
font-size: 15px;
font-weight: 600;
color: var(--mBlue);
}
.od_wrap .od_modalCount b {
margin-left: 10px;
font-size: 17px;
font-weight: 700;
}
.od_wrap .od_dongBox {
margin-top: 22px;
padding: 20px;
background: #eef3fd;
border-radius: 12px;
}
.od_wrap .od_dongHead {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 600;
color: #2b3240;
}
.od_wrap .od_dongHead span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: #cfe0fb;
color: var(--mBlue);
border-radius: 50%;
}
.od_wrap .od_dongHead svg {
display: block;
width: 15px;
height: 15px;
}
.od_wrap .od_dongList {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
margin-top: 14px;
}
.od_wrap .od_dongList li {
font-size: 15px;
font-weight: 700;
color: #2b3240;
white-space: nowrap;
}
.od_wrap .od_dongList li em {
margin-left: 6px;
font-style: normal;
font-weight: 600;
color: var(--mBlue);
}
.od_wrap .od_privacy {
display: flex;
align-items: center;
gap: 8px;
margin-top: 16px;
font-size: 13px;
color: #8a919c;
}
.od_wrap .od_privacy svg {
display: block;
width: 17px;
height: 17px;
flex: 0 0 auto;
}
.od_wrap .od_pickList {
margin-top: 18px;
}
.od_wrap .od_pickList li + li {
margin-top: 8px;
}
.od_wrap .od_pickBtn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 14px 16px;
background: #f7f9fc;
border: 1px solid #e5e8ee;
border-radius: 10px;
font-size: 15px;
color: #16191f;
text-align: left;
cursor: pointer;
}
.od_wrap .od_pickBtn:hover {
border-color: var(--mBlue);
}
.od_wrap .od_pickBtn em {
font-style: normal;
font-size: 13px;
color: #9aa2ae;
}
.od_wrap .od_modalBtns {
display: flex;
gap: 12px;
margin-top: 26px;
}
.od_wrap .od_modalBtn {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 52px;
box-sizing: border-box;
font-size: 15px;
font-weight: 600;
border-radius: 10px;
text-decoration: none;
cursor: pointer;
}
.od_wrap .od_modalBtn--ghost {
background: #fff;
border: 1px solid #d5dae3;
color: #2b3240;
}
.od_wrap .od_modalBtn--kakao {
background: #fee500;
border: 0;
color: #191600;
}
/* ---------------------------------------------------------------- 반응형 */
@media all and (max-width: 1200px) {
.od_wrap {
width: 100%;
padding: 32px 20px 70px;
}
}
/* 배너 3종 교체 지점은 홈 메인 배너/고객보호와 같은 1199 / 767 경계를 쓴다 */
@media all and (max-width: 1199px) {
.od_wrap .od_bannerBox img.od_banner_pc {
display: none;
}
.od_wrap .od_bannerBox img.od_banner_tab {
display: block;
}
}
@media all and (max-width: 1024px) {
.od_wrap .od_searchBox {
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.od_wrap .od_searchForm {
max-width: none;
}
.od_wrap .od_searchPoints {
width: 100%;
padding-left: 0;
padding-top: 24px;
border-left: 0;
border-top: 1px solid #d8e2f5;
}
/* 모바일/태블릿은 폭이 넉넉해 접힐 일이 없지만, 문구가 길어졌을 때
word-break:keep-all 로 '어절 경계'에서만 끊기게 하려면 nowrap 을 반드시 푼다. */
.od_wrap .od_searchPoints li {
white-space: normal;
}
.od_wrap .od_col2 {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
/* 1단으로 접히면 옆 카드와 높이를 맞출 이유가 없다. 고정 높이를 풀어 빈 공간을 없앤다 */
.od_wrap .od_card--fixed,
.od_wrap .od_workGrid .od_card--work {
min-height: 0;
}
/* 차트는 viewBox 1000x340 고정이라 컨테이너가 좁아지면 글자까지 같이 줄어든다.
390px 화면에서는 축척이 0.32 라 12 짜리 라벨이 약 3.8px 로 렌더돼 읽을 수가 없다.
최소 폭을 두고 가로로 밀어 보게 한다.
2026-09-01 4차 검수: 경계가 700 이라 '폰 가로모드'(740~932)가 통째로 빠져 있었다.
세로 390 에서 12px 이던 글자가 가로로 돌리면 7.8~9.0px 로 오히려 작아졌다.
1단 레이아웃 경계(1024)와 같이 맞춘다 — JS 의 isNarrow() 도 반드시 같은 값이어야 한다. */
.od_wrap .od_chart {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.od_wrap .od_chart svg {
min-width: 720px;
}
}
@media all and (max-width: 767px) {
.od_wrap .od_bannerBox img.od_banner_tab {
display: none;
}
.od_wrap .od_bannerBox img.od_banner_mo {
display: block;
}
.od_wrap .od_bannerBox {
border-radius: 14px;
}
}
@media all and (max-width: 700px) {
.od_wrap .od_searchBox {
margin-top: 14px;
padding: 22px 18px;
border-radius: 14px;
gap: 18px;
}
.od_wrap .od_searchTitle {
font-size: 16px;
}
.od_wrap .od_searchSub {
font-size: 13px;
}
/* 2026-09-01 클라 1번 "검색창이 너무 크고, 검색 버튼이 폰트보다 커서 부자연스럽다".
390px 실측: 입력칸 높이 54px / 버튼 88x42px(15px bold) 이라 버튼이 플레이스홀더보다 무거웠고,
오른쪽 padding 104px 때문에 글자 가용폭이 192px 뿐이라 예시(218.6px)가 26.6px 잘렸다.
버튼을 62x34(13px)로 줄여 padding 을 78px 로 되돌리고 폰트도 14px 로 낮춘다.
(예시 문구 자체도 3개 -> 2개로 줄였다 - operationData.jsp) */
.od_wrap .od_searchForm {
margin-top: 14px;
}
.od_wrap .od_searchInput {
height: 46px;
padding: 0 78px 0 16px;
font-size: 14px;
}
.od_wrap .od_searchBtn {
top: 6px;
right: 6px;
width: 62px;
height: 34px;
font-size: 13px;
border-radius: 7px;
}
.od_wrap .od_searchMsg {
margin-top: 6px;
font-size: 12px;
}
/* 2026-09-01 클라 1번 "아이콘 배치 위치 수정": 1단으로 세우면 아이콘 4개가 왼쪽 끝에 일렬로 서고
오른쪽이 통째로 빈다(클라가 그 빈 자리를 동그라미로 표시). PC 와 같은 2x2 로 되돌려
그 공간을 쓴다. 폭이 314px 이라 아이콘 34->30, 문구 14->13px 로 낮춰야 두 칸이 들어간다. */
.od_wrap .od_searchPoints {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 10px;
padding-top: 18px;
}
.od_wrap .od_searchPoints li {
gap: 8px;
font-size: 13px;
}
.od_wrap .od_pointIcon {
width: 30px;
height: 30px;
}
.od_wrap .od_pointIcon svg {
width: 16px;
height: 16px;
}
/* 2026-08-28: PC 88->120 과 같은 비율(x1.36)로 56 -> 76 */
.od_wrap .od_section {
margin-top: 76px;
}
/* base 의 (0,3,0) 규칙은 여기서도 이기므로 명시적으로 같이 줄여준다 */
.od_wrap .od_col2 .od_section {
margin-top: 76px;
}
.od_wrap .od_secTitle {
font-size: 18px;
}
.od_wrap .od_secSub {
font-size: 13px;
}
.od_wrap .od_card {
margin-top: 24px;
padding: 18px 16px;
border-radius: 12px;
}
.od_wrap .od_chartCard {
padding-left: 14px;
padding-right: 14px;
}
.od_wrap .od_searchBox {
padding: 22px 18px;
}
.od_wrap .od_notice {
padding: 16px 18px;
font-size: 13px;
}
.od_wrap .od_barName {
width: 44px;
font-size: 13px;
}
.od_wrap .od_barVal {
width: 88px;
font-size: 12px;
}
.od_wrap .od_rankName {
font-size: 14px;
}
.od_wrap .od_rankAddr {
font-size: 12px;
}
.od_wrap .od_workGrid {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
margin-top: 20px;
}
.od_wrap .od_ctaTitle {
font-size: 19px;
}
/* 2026-09-01 클라 4번 "문장 줄바꿈 부자연스러움": PC 폭(1114px) 기준으로 넣은
이
모바일에서는 앞 문장이 이미 접힌 뒤에 한 번 더 끊어 '확인하셨다면,' 한 어절만 남긴다.
모바일에서는
을 죽이고 word-break:keep-all 이 어절 경계에서 접게 둔다. */
.od_wrap .od_ctaTxt br {
display: none;
}
.od_wrap .od_ctaBtns {
flex-direction: column;
gap: 10px;
}
.od_wrap .od_ctaBtn {
width: 100%;
min-width: 0;
}
.od_wrap .od_modalBox {
padding: 24px 20px;
border-radius: 14px;
}
.od_wrap .od_modalName {
font-size: 18px;
}
.od_wrap .od_modalAddr,
.od_wrap .od_modalCount {
padding-left: 0;
}
.od_wrap .od_modalBtns {
margin-top: 20px;
}
.od_wrap .od_modalBtn {
height: 48px;
font-size: 14px;
}
}