※ 화면폭에 따라 flex 방향·간격이 바뀌는 래퍼는 유틸리티로 표현할 수
없으므로 해당 페이지 규칙에 그대로 둔다.
※ .dot_block / .dot_head 의 gap:10px 은 점 표식(18px)과 들여쓰기
(28px = 18+10)가 맞물려 있어 그리드 예외로 유지한다.
══════════════════════════════════════════════════════════ */
.row { display: flex; }
.stack { display: flex; flex-direction: column; }
.contents { display: contents; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-base { align-items: baseline; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-0 { gap: 0; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-28 { gap: 28px; }
.gap-32 { gap: 32px; }
.gap-36 { gap: 36px; }
.gap-40 { gap: 40px; }
.gap-50 { gap: 50px; } /* 4px 그리드 예외 — basic-plan.html 목표값 그대로 유지 */
.wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.shrink-0 { flex-shrink: 0; }
.overflow-x-auto { overflow-x: auto; }
.icon-80 { width: 80px; height: 80px; }
/* ══════════════════════════════════════════════════════════
공용 강조 테두리 박스 (.primary_box)
연락처 안내(.contact-box), 경비노동자 상담 핫라인(.guard-worker-hotline-box),
상담 동의(.counsel-agree-box)가 각자 만들었던 동일한 primary 색 테두리를 통합.
크기/배경/내부 레이아웃은 각 컴포넌트 클래스가 계속 담당한다.
══════════════════════════════════════════════════════════ */
.primary_box {
border: 1px solid var(--color-primary);
}
.contact-box { padding: 12px 14px; }
/* ────────────────────────────────────────
공용 페이지네이션 번호
(li 로 감싼 목록형: .pagination / 낱개 버튼형: .pagination-num
/ pageNavigationUtil이 생성하는 Bootstrap 스타일 마크업
.page-item, .page-link, .active, .disabled 도 동일하게 적용
— 사이트 전체 목록 화면이 같은 유틸을 공유하므로 여기서
한 번만 고치면 모든 목록 페이지에 반영됨)
──────────────────────────────────────── */
.pagination {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
}
.pagination li,
.page-item {
display: flex;
}
.pagination li button,
.pagination li span,
.pagination-num,
.page-link {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
font-size: 14px;
font-weight: 400;
font-family: var(--font);
color: var(--color-text);
background: #fff;
border: 1px solid var(--color-line);
border-right: none;
cursor: pointer;
text-decoration: none;
transition: background 0.2s;
}
.pagination li:last-child button,
.pagination li:last-child span,
.pagination-num:last-child,
.page-item:last-child .page-link {
border-right: 1px solid var(--color-line);
}
.pagination li button:hover,
.pagination-num:hover:not(.is-active):not([disabled]),
.page-link:hover {
background: #F8FAFC;
}
.pagination-num[disabled],
.page-item.disabled .page-link {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
.pagination li.is-active span,
.pagination-num.is-active,
.page-item.active .page-link {
position: relative;
z-index: 1;
color: var(--color-primary);
border-color: var(--color-primary);
box-shadow: inset 0 0 0 1px var(--color-primary);
}
.pagination li.is-active + li button,
.pagination li.is-active + li span,
.pagination-num.is-active + .pagination-num,
.page-item.active + .page-item .page-link {
border-left-color: var(--color-primary);
}
.pagination--lg li button,
.pagination--lg li span {
width: 50px;
height: 50px;
}
@media (max-width: 767px) {
.pagination li button,
.pagination li span,
.pagination-num,
.page-link {
width: 32px;
height: 32px;
font-size: 12px;
}
.pagination-num.is-active { font-size: 14px; }
.pagination--lg li button,
.pagination--lg li span {
width: 36px;
height: 36px;
font-size: 14px;
}
}
/* 탭 콘텐츠 패널 공용 (hidden 속성이 stack/row의 display에 덮이지 않도록 보장) */
.tab-panel[hidden] { display: none; }
.tab-panel--pad { padding-top: 32px; padding-bottom: 60px; }
/* ══════════════════════════════════════════════════════════
공통 표 (.table)
페이지별 표 클래스를 만들지 않고 아래 골격 + 변형을 조합한다.
페이지 클래스에는 열 폭(.col-*)과 반응형 숨김만 남긴다.
── 유형 ───────────────────────────────
.table_list 목록형(게시판) — 셀 높이 고정 52px, 가운데 정렬, 행 hover
.table_tall 셀 높이 60px
.table_data 내용형(정보 나열) — 패딩 기반, 왼쪽 정렬, 머리행 음영
── 변형 ───────────────────────────────
.table_fixed table-layout: fixed
.table_divided 세로 구분선
.table_boxed 전체 격자 테두리 (상단 강조선 없음)
.table_plain 상단 강조선 없음
.table_left 본문 셀 왼쪽 정렬 (머리행은 가운데 유지)
.table_top 셀 위쪽 정렬
.table_w480 / --w640 / --w720 가로 스크롤 임계폭
.table_col_stack_mobile 열 제목 표(본문 1행)를 ≤767px 에서 [제목→값] 세로로 쌓음 — 가로 스크롤 대신
── flex 2열 표 (div 기반) ──────────────
.table_row 행 구분선 (라벨/값 셀 폭은 표마다 달라 페이지 규칙 유지)
── 래퍼 ───────────────────────────────
.table_wrap overflow-x: auto (가로 스크롤)
예)
══════════════════════════════════════════════════════════ */
.table_wrap { overflow-x: auto; padding-bottom: 3px; }
/* 가로 스크롤 컨테이너 공용 스크롤바 — 오버레이 스크롤바 환경(모바일 등)에서도
스크롤 가능 여부가 항상 보이도록 구디자인 .tb_wrap과 동일한 얇은 스크롤바 적용 */
.table_wrap,
.proc-flow,
.el-procedure-steps,
.pft-table-wrap,
.labor-rights-steps,
.labor-rights-table-wrap {
scrollbar-width: thin;
scrollbar-color: #dfdfdf #fff;
}
.table_wrap::-webkit-scrollbar,
.proc-flow::-webkit-scrollbar,
.el-procedure-steps::-webkit-scrollbar,
.pft-table-wrap::-webkit-scrollbar,
.labor-rights-steps::-webkit-scrollbar,
.labor-rights-table-wrap::-webkit-scrollbar {
width: 3px;
height: 3px;
}
.table_wrap::-webkit-scrollbar-thumb,
.proc-flow::-webkit-scrollbar-thumb,
.el-procedure-steps::-webkit-scrollbar-thumb,
.pft-table-wrap::-webkit-scrollbar-thumb,
.labor-rights-steps::-webkit-scrollbar-thumb,
.labor-rights-table-wrap::-webkit-scrollbar-thumb {
background-color: #dfdfdf;
}
.table_wrap::-webkit-scrollbar-track,
.proc-flow::-webkit-scrollbar-track,
.el-procedure-steps::-webkit-scrollbar-track,
.pft-table-wrap::-webkit-scrollbar-track,
.labor-rights-steps::-webkit-scrollbar-track,
.labor-rights-table-wrap::-webkit-scrollbar-track {
background-color: #fff;
}
.table {
width: 100%;
border-top: 3px solid var(--color-primary);
}
table.table { border-collapse: collapse; }
/* 셀 선택자는 :where() 로 감싸 특이도를 0,1,0 으로 낮춘다.
그래야 .text-strong / .text-center 같은 유틸리티와 페이지별 셀 수식어가
뒤에 오기만 하면 정상적으로 덮어쓸 수 있다. */
.table :where(th, td) {
border-bottom: 1px solid var(--color-line);
text-align: center;
color: var(--color-text);
font-family: var(--font);
}
.table :where(th) { font-weight: 500; }
.table :where(td) { font-weight: 400; }
/* ── 목록형 ── */
.table_list :where(th, td) {
height: 52px;
padding: 0 10px;
font-size: 15px;
}
.table_list tbody tr:hover {
background: #F8FAFC;
cursor: pointer;
}
/* (2026-10-14) 화상상담 예약내역은 행 전체가 아니라 예약번호 링크만 클릭됨 → 행에는 일반 포인터(링크·버튼은 그대로 손가락) */
.video-counsel-history-table tbody tr:hover { cursor: default; }
/* (2026-10-22) 방문상담 예약내역도 방문센터 링크만 클릭됨 → 행에는 일반 포인터 */
.counsel-history-table tbody tr:hover { cursor: default; }
.table_tall :where(th, td) { height: 60px; }
/* ── 내용형 ── */
.table_data :where(th, td) {
padding: 16px;
font-size: 14px;
line-height: 1.6;
vertical-align: middle;
word-break: keep-all;
}
.table_data :where(thead th) { background: #9c9c9c; color: #fff; }
/* ── 변형 ── */
.table_fixed { table-layout: fixed; }
.table_divided :where(th, td) { border-right: 1px solid var(--color-line); }
/* 표 오른쪽 끝 세로선만 숨김 — border-collapse 에서 hidden 은 맞닿은 칸 테두리보다 우선한다 (2026-10-01).
전에는 칸 :last-child 의 오른쪽 선을 지웠는데, 위 행의 rowspan 이 마지막 열을 덮는 행(A1000122 제2조 표 12행)은
행의 마지막 칸이 마지막 열이 아니라서 안쪽 세로선까지 지워졌다. */
table.table_divided { border-right: hidden; }
.table_boxed { border-top: none; }
.table_boxed :where(th, td) { border: 1px solid var(--color-line); }
.table_boxed :where(th, td):first-child { border-left: none; }
.table_boxed :where(th, td):last-child { border-right: none; }
.table_boxed :where(thead tr:first-child th) { border-top: none; }
.table_plain { border-top: none; }
.table_left :where(th, td) { text-align: left; }
.table_left :where(thead th) { text-align: center; }
.table_top :where(th, td) { vertical-align: top; }
/* ── 글자 수식어 (표 셀에서도 덮어쓸 수 있도록 .table 뒤에 배치) ── */
.text-danger { color: #EF4444; }
.text-muted { color: #64748B; }
.text-point { color: var(--color-primary); }
.text-invert { color: #fff; }
.text-success { color: #16A34A; }
.text-strong { font-weight: 500; }
.text-tight { line-height: 1; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-right--sm-left { text-align: right; }
.text-nowrap { white-space: nowrap; }
.text-preline { white-space: pre-line; }
.text-prewrap { white-space: pre-wrap; }
.text-break-all { word-break: break-all; }
.text-break-word { word-wrap: break-word; }
/* 기호 내어쓰기 — ※ · ①~⑳ · - 로 시작하는 문단·목록 항목에 붙인다.
두 번째 줄부터 기호 뒤 글자 위치에 맞춰 들여쓴다 (불릿 .dot_list_item과 같은 효과).
※ 안내 문구
① 항목
- 항목
들여쓰기 폭(--hang) = 기호 + 공백 한 칸 (Noto Sans KR, lang="ko", Chrome 실측)
※ · ①~⑳ 1.28em (기본) - 0.63em (--dash) 1) ~ 9) 1.17em (--paren)
1. ~ 9. 1.115em (--num) 10. ~ 99. 1.67em (--num2) 가. ~ 하. 1.48em (--kor) (2026-10-01, A1000107)
기호 뒤는 반드시 한 칸 띄운다.
첫 줄만 당겨지므로 로 나눠야 한다
(
) ──
가로 표(.table_data/.table_list)와 동일하게 진짜 을 쓰고,
행마다 라벨 값 구조로 둔다 — role 속성을 손으로 붙일 필요가 없다.
예) */
.table_kv :where(tr) { border-bottom: 1px solid var(--color-line); }
/* flex div 기반 표(연도-금액 등 라벨-값이 아닌 균등열 표)에서 쓰는 행 구분선 */
.table_row { border-bottom: 1px solid var(--color-line); }
.table_kv :where(th) {
width: 170px;
text-align: left;
vertical-align: middle;
padding: 16px 18px;
font-size: 15px;
font-weight: 500;
}
.table_kv :where(th) img {
display: inline-block;
width: 18px;
height: 18px;
object-fit: contain;
vertical-align: middle;
margin-right: 10px;
}
.table_kv :where(th) span { vertical-align: middle; }
.table_kv :where(td) {
text-align: left;
vertical-align: middle;
padding: 16px 18px;
font-size: 14px;
line-height: 1.6;
}
/* 셀 수식어: 값이 여러 줄일 때 위쪽 정렬 (해당 td에만) */
.table_cell_top { vertical-align: top; padding-top: 18px; padding-bottom: 18px; line-height: 1.9; }
/* 셀 수식어: 값 칸을 오른쪽 정렬로 (보통 .text-danger 와 함께 사용) */
.table_cell_end { text-align: right; }
/* 아이콘 크기 변형 */
/* .table_kv th img 기본 규칙(0,1,1)과 특정도를 맞춰야 이길 수 있다 */
img.table_icon_sm { width: 16px; height: 16px; }
/* 표 변형: 아이콘 없이 라벨을 가운데 정렬해서 쓰는 표 (지도가 붙은 정보 표는 제외 — 배경 없음) */
.table_kv_center :where(th) { text-align: center; }
/* 표 변형: 라벨이 짧은 단어가 아니라 문장인 표 (고정폭 대신 비율폭) */
.table_kv_wide :where(th) { width: 35%; }
/* --kv-center/--kv-wide 를 쓰는 표에만 배경 적용 (지도 붙은 정보 표는 기본 .table_kv 라 제외됨) */
.table_kv_center :where(th),
.table_kv_wide :where(th) {
background: #9c9c9c;
color: #fff;
}
@media (max-width: 767px) {
.table_list :where(th, td) { height: 44px; padding: 0 6px; font-size: 12px; }
.table_tall :where(th, td) { height: 48px; }
.table_data :where(th, td) { padding: 12px; font-size: 13px; }
.table_kv :where(th) { width: 100px; padding: 14px 12px; font-size: 14px; }
.table_kv :where(th) img { width: 15px; height: 15px; margin-right: 6px; }
.table_kv :where(td) { font-size: 13px; padding: 14px 12px; }
.table_kv_wide :where(th) { width: 40%; }
/* 표 변형: 모바일에서 라벨/값을 세로로 쌓는 표 */
.table_kv_stack_mobile :where(tr, th, td) { display: block; width: 100%; }
.table_kv_stack_mobile :where(th) { text-align: left; padding-bottom: 4px; border-right: none; }
/* 표 변형: 열 제목(thead) 표를 모바일에서 [제목1 → 값1 → 제목2 → 값2 …] 세로로 쌓는다 (A1000094, 2026-10-01)
.table_kv_stack_mobile 의 열 제목 표 판 — 가로 스크롤(.table_w720 최소폭) 대신 쓴다.
thead/tbody/tr 을 display:contents 로 빼고 칸을 order 로 번갈아 세운다 → 본문 행이 1개인 표 전용, 4열까지.
(칸마다 제목을 붙이는 data-label 방식은 CMS 저장 필터가 data-* 를 지워서 못 쓴다) */
table.table_col_stack_mobile { display: flex; flex-direction: column; min-width: 0; }
.table_col_stack_mobile :where(thead, tbody, tr) { display: contents; }
.table_col_stack_mobile :where(th, td) { display: block; width: 100%; text-align: left; border-right: none; }
.table_col_stack_mobile :where(thead th:nth-child(1)) { order: 1; }
.table_col_stack_mobile :where(td:nth-child(1)) { order: 2; }
.table_col_stack_mobile :where(thead th:nth-child(2)) { order: 3; }
.table_col_stack_mobile :where(td:nth-child(2)) { order: 4; }
.table_col_stack_mobile :where(thead th:nth-child(3)) { order: 5; }
.table_col_stack_mobile :where(td:nth-child(3)) { order: 6; }
.table_col_stack_mobile :where(thead th:nth-child(4)) { order: 7; }
.table_col_stack_mobile :where(td:nth-child(4)) { order: 8; }
}
/* ────────────────────────────────────────
공용 점(·) 목록 — 안내문 항목 표시용
글꼴/색상은 부모 또는 함께 지정한 텍스트 클래스에서 상속받음
──────────────────────────────────────── */
.dot_list {
list-style: none;
margin: 0;
padding: 0;
font-size: 15px;
font-weight: 400;
line-height: 1.7;
word-break: keep-all;
color: var(--color-text);
font-family: var(--font);
}
.dot_list_item {
position: relative;
padding-left: 20px;
}
.dot_list_item::before {
content: '';
position: absolute;
left: 5px;
top: 0.85em;
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
transform: translateY(-50%);
}
/* 빨간 글자 항목(.text-danger)이어도 점은 본문 글자색 — 점까지 빨갛게 되지 않게 (2026-09-30) */
.dot_list_item.text-danger::before {
background: var(--color-text);
}
.dot_list_item_sub {
margin-left: 14px;
}
/* 목록 항목 안에 중첩된 하위 목록 — 하위 항목끼리도 상위 문장과 첫 하위 항목 사이처럼 추가 간격 없이 (2026-09-30).
(상위 → 첫 하위는 원래 0 인데 하위끼리만 .stack.gap-4/gap-8 로 4~8px 더 벌어져 있었다)
목록이 아닌 블록 안의 목록(주요 프로그램 li.dot_block > .dot_list 등)은 대상 아님 */
.dot_list > li > .dot_list {
row-gap: 0;
}
.dot_list_item_flush {
padding-left: 0;
}
.dot_list_item_flush::before {
content: none;
}
/* ────────────────────────────────────────
공용 항목 블록 (빨강 점 + 제목 + 본문)
페이지 구분 없이 아래 4개 클래스만 사용한다.
.dot_block 항목 블록 — 점제목과 그 아래 본문을 묶음
--sep 항목 간 구분선
--flush 자식 들여쓰기 없음 (중첩 블록용)
.dot_head 점 + 제목 가로 줄
.section_dot 점 표식 (속 빈 빨강 링)
.dot_title 점 옆 제목 18px / 500 / 1.5 (모바일 16px)
.dot_body 점 아래 본문 16px / 400 / 1.7 (모바일 15px)
들여쓰기 28px = 점 18px + 간격 10px
──────────────────────────────────────── */
.dot_block {
display: flex;
flex-direction: column;
gap: 10px;
}
/* 점제목 아래 모든 콘텐츠(본문·목록·표·버튼) 들여쓰기 */
.dot_block > *:not(.dot_head) {
padding-left: 28px;
}
/* 블록으로 묶이지 않고 점제목 바로 뒤에 오는 본문 */
.dot_head + .dot_body {
padding-left: 28px;
}
.dot_block_flush > *:not(.dot_head) {
padding-left: 0;
}
/* (2026-11-06) 관리자 편집기로 다시 저장해 클래스가 빠진 조문 본문() — .dot_body 와 같은 글자 규격(16px, 767px 이하 15px)
예: A1000108 이용약관 제3조·제7조 「
① 기관은 …
」. 클래스가 있는 문단(.dot_body_sm 등)은 그대로 */
.dot_block > p:not([class]) {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
word-break: keep-all;
color: var(--color-text);
font-family: var(--font);
}
@media (max-width: 767px) {
.dot_block > p:not([class]) { font-size: 15px; }
}
/* 모바일에서는 표·절차 플로우까지 들여쓰면 폭이 과도하게 좁아지므로
좁은 화면에서만 들여쓰기를 해제해 전체 폭을 쓰게 한다 (데스크탑은 유지) */
@media (max-width: 767px) {
.dot_block > .table_wrap,
.dot_block > table.table,
.dot_block > .proc-flow,
.dot_block > .el-procedure-steps,
.dot_block > .labor-rights-steps,
.dot_block > .labor-rights-table-wrap {
padding-left: 0;
}
}
/* 강조 라벨(.dot_body_sm.text-point.text-strong)은 바로 아래 내용과 붙어 보여야 하므로
부모의 flex gap을 상쇄한다. 라벨이 wrapper 없이 직계 자식일 때만 적용 — 클래스 없는
순수 wrapper div 안에 있으면(예: [신청방법]) 애초에 gap이 안 걸려 이미 붙어 있다.
(절차 아이콘 다이어그램의 라벨은 같은 클래스를 쓰지만 이 캡션 패턴과 무관하므로
직계 자식 선택자로만 한정해 영향받지 않는다) */
.dot_block > .dot_body_sm.text-point.text-strong {
margin-bottom: -10px;
}
.labor-rights-steps-wrap > .dot_body_sm.text-point.text-strong {
margin-bottom: -12px;
}
/* 항목 간 구분선 */
.dot_block_sep + .dot_block_sep {
border-top: 1px solid var(--color-line-light);
padding-top: 20px;
}
.dot_head {
display: flex;
align-items: flex-start;
gap: 10px;
}
/* 점 표식 — 제목 첫 줄 중앙에 맞춤
margin-top = (라인박스 높이 − 점 높이) ÷ 2 + 잉크 보정(0.048em)
font-size를 .dot_title과 동일하게 맞춰두고 전부 em으로 계산 — .dot_title font-size가
바뀌면 여기 font-size 한 줄만 맞추면 margin-top 전체가 비례해서 따라온다(구 사이트
default.css의 .tit_md { background-position: 0 0.3em } 방식 참고).
"잉크 보정" 비율(0.048em)은 계산으로 못 구한다 — Noto Sans KR 한글 글자가 폰트
라인박스 중심보다 아래로 치우쳐 그려지는 폰트 자체의 특성이라(이전 S-Core-Dream은
반대로 위로 치우쳐 있었음), Playwright로 실제 렌더링 픽셀(점 중심 vs 글자 잉크 중심)을
26개 샘플씩 측정해(18px 폰트에서 점이 잉크 중심보다 2.25px 위, 16px 폰트에서 2.11px 위,
각각 font-size 대비 4.3%·5.3%) 평균으로 정했다 (2026-08-11, 폰트를 S-Core-Dream에서
Noto Sans KR로 교체하며 재측정). 폰트가 바뀌지 않는 한 그대로 유효하다. */
.section_dot {
width: 18px;
height: 18px;
border-radius: 9999px;
border: 4.5px solid #F87171;
box-sizing: border-box;
font-size: 18px;
margin-top: calc((1.5em - 18px) / 2 + 0.048em);
}
/* .dot_title / .dot_body 스타일은 상단 「공통 글자 규격」 참조 */
@media (max-width: 767px) {
.section_dot { font-size: 16px; }
}
/* ────────────────────────────────────────
탭 없는 텍스트 페이지 콘텐츠 상단 여백
──────────────────────────────────────── */
.content-inner--top { padding-top: 6px; }
/* ────────────────────────────────────────
공통 필수 입력 표시
──────────────────────────────────────── */
.required-dot {
color: #EF4444;
font-size: 20px;
font-weight: 400;
}
.join-form-label.is-required::before,
.counsel-form-label.is-required::before,
.counsel-form-divider.is-required::before {
content: '*';
color: #EF4444;
font-size: 19px;
font-weight: 400;
flex-shrink: 0;
}
/* ────────────────────────────────────────
페이지 타이틀 바 (서브 공통)
──────────────────────────────────────── */
.page-title-bar {
background: var(--color-primary);
padding: 28px 0;
}
.page-title {
font-size: 20px;
font-weight: 500;
color: #fff;
line-height: 1;
}
/* ────────────────────────────────────────
로그인 페이지
──────────────────────────────────────── */
.login-section {
padding: 48px 0;
background: #fff;
}
.login-layout {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
gap: 40px;
}
/* ── 로그인 카드 ── */
.login-card {
width: 520px;
max-width: 100%;
min-width: 0;
padding: 36px 80px;
}
/* ── 입력 필드 ── */
/* 박스 규격(크기/테두리/배경/포커스)은 공용 .input_box 재사용 */
.login-input-wrap__icon {
color: var(--color-primary);
}
.login-input-wrap__icon img {
width: 22px;
height: 22px;
object-fit: contain;
}
.login-input-wrap input {
flex: 1;
border: none;
outline: none;
font-size: 13px;
font-family: var(--font);
color: var(--color-text);
background: transparent;
}
.login-input-wrap input::placeholder {
color: #94A3B8;
}
/* ── 아이디 찾기 / 비밀번호 재발급 ── */
.login-links a {
font-size: 12px;
color: var(--color-text);
transition: color .2s;
}
.login-links a:hover { color: var(--color-primary); }
/* ── 회원가입 ── */
.login-join {
padding-top: 14px;
border-top: 1px solid var(--color-line);
}
/* ── 소셜 로그인 ── */
.login-social {
width: 220px;
display: flex;
flex-direction: column;
gap: 14px;
}
.login-social a img {
width: 190px;
display: block;
}
/* ── 반응형 ── */
/* 태블릿·모바일(≤1023px): 카드 아래에 소셜 로그인을 한 줄로 둔다.
예전에는 768~859px 에서 소셜 영역이 카드 아래로 밀리면서 220px 세로 묶음이 되고, 767px 이하는 버튼이 세로로 쌓였다.
신한SIGN 이 추가될 예정이라 3칸으로 나누고 왼쪽부터 채운다(지금은 카카오·네이버 2칸 + 빈 1칸). */
@media (max-width: 1023px) {
.login-layout {
flex-direction: column;
align-items: center;
}
.login-social {
width: 520px; /* 로그인 카드와 같은 폭 */
max-width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
align-items: start;
text-align: left;
}
.login-social a img {
width: 100%;
}
.login-social p {
grid-column: 1 / -1; /* 안내 문구는 3칸 전체 폭 */
}
}
@media (max-width: 767px) {
.page-title { font-size: 20px; }
.page-title-bar { padding: 20px 0; }
.login-section { padding: 32px 0; }
.login-layout {
flex-direction: column;
align-items: center;
gap: 24px;
}
.login-card {
padding: 28px 20px;
}
.login-social {
width: 100%;
gap: 8px;
}
}
/* ────────────────────────────────────────
아이디 찾기 페이지
──────────────────────────────────────── */
/* 섹션 래퍼 – login-section과 동일 */
.find-id-section {
padding: 48px 0;
background: #fff;
}
/* 카드 + 안내 문구를 세로 중앙 정렬 */
/* 스텝 래퍼: 카드 폭 기준을 잡아준다 (없으면 모바일에서 내용 폭으로 붕괴) */
#findIdStep1,
#findIdStep2 {
width: 580px;
max-width: 100%;
}
/* 결과 화면 내부 요소 간격 (안내문 · 결과카드 · 버튼) */
/* 안내 문구 */
/* ── 입력 폼 카드 – login-card와 동일 크기/스타일 ── */
.find-id-form-card {
width: 580px;
max-width: 100%;
padding: 44px 90px;
}
/* 박스 규격은 공용 .input_box 재사용 */
.find-id-form__input {
font-size: 13px;
font-family: var(--font);
color: var(--color-text);
width: 100%;
}
.find-id-form__input::placeholder { color: #94A3B8; }
.find-id-form__error {
font-size: 11px;
color: #E03B3B;
min-height: 14px;
display: block;
}
/* 일치 없음 안내 */
.find-id-form__no-match {
margin: 4px 0 0;
}
/* ── 결과 카드 – login-card와 동일 크기/스타일 ── */
.find-id-result-card {
width: 100%;
padding: 44px 90px;
}
/* ── 액션 버튼 영역 ── */
.find-id-actions {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}
/* 결과 섹션 액션 버튼 영역: 결과 카드 너비에 맞춤 */
#findIdStep2 .find-id-actions { width: 580px; }
/* 결과 섹션 안내 문구: 서브배너 타이틀과 동일한 좌측 기준 */
#findIdStep2 .find-id-desc {
width: 100%;
text-align: left;
}
/* ── 반응형 ── */
@media (max-width: 767px) {
.find-id-section { padding: 32px 0; }
.find-id-form-card,
.find-id-result-card { width: 100%; padding: 28px 20px; }
/* 세로로 쌓을 때 버튼은 전체 폭·제 높이로 — 버튼의 .flex-1(기준 크기 0)이 세로 방향에선 높이를 0 기준으로 만들어
버튼이 글자 높이(22px)·글자 폭으로 납작해졌다 (2026-10-03, 아이디 찾기 결과) */
.find-id-actions { flex-direction: column; align-items: stretch; }
.find-id-actions > .btn { flex: none; }
#findIdStep2 .find-id-actions { width: 100%; }
}
/* ────────────────────────────────────────
비밀번호 재발급 페이지
──────────────────────────────────────── */
.find-pw-section {
padding: 40px 0;
background: #fff;
}
/* 안내 문구 */
/* 폼 카드 */
.find-pw-card {
width: 100%;
padding: 44px 0 48px;
}
.find-pw-form {
width: 720px;
}
.find-pw-form__row {
display: flex;
align-items: center;
gap: 20px;
}
.find-pw-form__label {
width: 110px;
font-size: 14px;
font-weight: 400;
margin-top: 4px;
}
/* 나머지 박스 규격은 공용 .input_box 재사용, 이 폼만 살짝 더 큰 높이/여백 사용 */
.find-pw-form__input-wrap {
width: 100%;
height: 50px;
padding: 0 20px;
}
.find-pw-form__icon img { width: 23px; height: 23px; object-fit: contain; }
.find-pw-form__input {
margin-top: 4px;
border: none;
outline: none;
font-size: 13px;
background: transparent;
font-family: var(--font);
color: var(--color-text);
}
.find-pw-form__input::placeholder { color: #94A3B8; }
.find-pw-form__error {
display: block;
padding-left: 2px;
}
.find-pw-form__error:empty { display: none; }
/* 성공 화면 */
.find-pw-wrap--center { align-items: center; }
.find-pw-success-card {
width: 100%;
padding: 60px 0;
}
/* 버튼 영역 */
.find-pw-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
}
/* ── 반응형 ── */
@media (max-width: 767px) {
.find-pw-section { padding: 32px 0; }
.find-pw-card { padding: 28px 20px; }
.find-pw-form { width: 100%; }
.find-pw-form__row { flex-direction: column; align-items: stretch; gap: 6px; }
.find-pw-form__label { width: auto; }
.find-pw-form__field { width: 100%; }
.find-pw-form__input-wrap { height: 60px; width: 100%; }
.find-pw-actions { flex-direction: column; width: 100%; }
}
/* 400px 이하: 글자 크기 축소 + 좌우 여백 확보 (텍스트가 카드에 붙는 문제 방지) */
@media (max-width: 400px) {
.find-pw-success-card { padding: 44px 20px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.find-pw-form { width: 100%; padding: 0 40px; }
}
/* ────────────────────────────────────────
회원가입 페이지 (4단계 공통)
──────────────────────────────────────── */
.join-section {
padding: 48px 0;
background: #fff;
}
/* ── 단계 표시 바 ── */
.join-steps {
display: flex;
height: 72px;
}
.join-step {
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
gap: 70px;
background: #fff;
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
border-right: 1px solid var(--color-line);
}
.join-step:first-child {
border-radius: 14px 0 0 14px;
}
.join-step:last-child {
border-radius: 0 14px 14px 0;
}
.join-step.is-active {
background: #F97316;
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
}
.join-step__num {
font-size: 20px;
font-weight: 100;
line-height: 1;
color: var(--color-text);
}
.join-step.is-active .join-step__num { color: #fff; }
.join-step.is-active .join-step__text { color: #fff; }
/* ── 본인인증 방법 선택 ── */
.join-auth__cards {
display: flex;
justify-content: center;
gap: 28px;
}
.join-auth-card {
width: 360px;
padding: 24px;
}
.join-auth-card__img-wrap img {
width: 100%;
height: auto;
display: block;
}
/* ── 완료된 첫 번째 단계 (is-done) ── */
.join-step.is-done {
border-left: 1px solid var(--color-line);
}
/* ── 약관 동의 영역 ── */
.join-terms__title {
margin: 0 0 12px;
}
.join-terms__title + .join-terms__box {
margin-bottom: 10px;
}
.join-terms__box {
border: 1px solid var(--color-line);
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 10px;
background: #fff;
}
.join-terms__check-row {
padding: 14px 18px;
background: #EAF2FF;
border-radius: 6px;
}
/* .chk_inp.chk_inp--sm 공용 규칙 사용 (18px), 텍스트는 .dot_body_xs.text-point.text-strong */
.join-terms__scroll {
height: 240px;
overflow-y: auto;
overflow-x: auto;
padding: 12px 0;
font-size: 13px;
font-weight: 400;
color: #334155;
line-height: 1.8;
}
/* CMS 본문(CN)에 포함된 구디자인 제목/체크박스는 숨기고 약관 텍스트만 노출 (vglbCnsl 동의서 등) */
.join-terms__scroll > h3.tit_lg,
.join-terms__scroll .terms > ul.chk_inp {
display: none;
}
/* 반응형(좁은 화면)에서 약관 본문(CMS)의 표가 잘리거나 칸이 찌그러지지 않도록 표에 최소 폭을 주고,
표 감싸개(.table_wrap)의 좁은 자체 스크롤 대신 약관 상자(.join-terms__scroll) 전체를 가로로 스크롤한다.
본문 글은 상자 폭에 맞춰 줄바꿈되고, 표가 상자보다 넓을 때만 가로 스크롤이 생긴다. */
.join-terms__scroll .table_wrap {
overflow: visible;
}
.join-terms__scroll table {
min-width: 720px;
}
/* (2026-11-06) 중소사업주 컨설팅 개인정보 동의서(reqstFormTermVglbCnsl, CMS 본문) 안의 구 디자인 표(.table_D)가
새 디자인에 표 규칙이 없어 선·머리칸 없이 글자만 흩어져 보이던 문제 — 이 상자 안에서만 새 디자인 표 모양으로.
본문은 www(구 디자인)와 같은 DB 콘텐츠라 콘텐츠는 그대로 두고 CSS 로만 맞춘다.
표 위 캡션은 바로 위 굵은 소제목(<개인정보 수집·이용 동의>)과 같은 말이라 화면에서만 숨김(화면낭독기는 읽음) */
.join-terms__scroll table.table_D {
width: 100%;
min-width: 560px;
margin: 6px 0 4px;
border-collapse: collapse;
border-top: 2px solid var(--color-primary);
}
.join-terms__scroll table.table_D caption {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.join-terms__scroll table.table_D :where(th, td) {
padding: 8px 10px;
border-bottom: 1px solid var(--color-line);
font-size: 13px;
line-height: 1.6;
vertical-align: middle;
word-break: keep-all;
color: var(--color-text);
}
.join-terms__scroll table.table_D th {
background: #F1F5F9;
font-weight: 500;
text-align: center;
}
.join-terms__scroll table.table_D td { text-align: left; }
.join-terms__scroll table.table_D :where(th, td) + :where(th, td) { border-left: 1px solid var(--color-line); }
.join-terms__scroll .scroll_box { overflow: visible; }
/* 동의서 항목(구 디자인 .agree_list) 사이 간격 */
.join-terms__scroll .agree_list { margin: 0; padding: 0; list-style: none; }
.join-terms__scroll .agree_list > li + li { margin-top: 10px; }
.join-terms__scroll .agree_list ol { margin: 2px 0 0; padding: 0; list-style: none; }
/* 좁은 화면: 표가 짧은 글 3~4칸이라 상자 가로 스크롤 대신 상자 폭에 맞춰 줄바꿈 */
@media (max-width: 767px) {
.join-terms__scroll table.table_D { min-width: 0; }
.join-terms__scroll table.table_D :where(th, td) { padding: 6px; font-size: 12px; overflow-wrap: anywhere; }
}
/* ── 다음단계 버튼 ── */
.join-next-wrap {
padding-top: 4px;
}
/* 가운데 정렬 묶음(.stack.items-center) 안에서는 줄이 글자 폭으로 줄어, ≤767 에서 width:100% 인
고정 폭 버튼(btn_w260 등)이 글자 폭(약 87px)으로 쪼그라들어 글자가 테두리에 붙고 잘렸다
(회원가입 완료 '메인으로 이동', 2026-10-12). 줄을 가로 전체로 늘려 버튼 폭 기준을 확보 */
.stack.items-center > .join-next-wrap {
align-self: stretch;
}
/* ── 정보입력 폼 (join-step3) ── */
.join-info-section {
width: 100%;
}
.join-info-header {
display: flex;
align-items: center;
}
.join-required-note {
font-size: 13px;
}
.join-form-table {
width: 100%;
border-left: 1px solid var(--color-line);
border-right: 1px solid var(--color-line);
}
.join-form-row {
display: flex;
align-items: stretch;
min-height: 58px;
}
.join-form-row--tall {
min-height: 70px;
}
.join-form-label {
width: 160px;
padding: 0 16px;
border-bottom: 1px solid var(--color-line);
font-size: 13px;
font-weight: 500;
line-height: 1.6;
color: var(--color-text);
}
.join-form-field {
padding: 0 16px;
border-bottom: 1px solid var(--color-line);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.join-form-row--tall .join-form-field {
flex-wrap: nowrap;
gap: 20px;
align-items: center;
}
/* 테두리/반경/배경은 공용 .field_box 재사용 */
.join-input {
width: 200px;
height: 36px;
padding: 0 12px;
font-size: 13px;
color: var(--color-text);
box-sizing: border-box;
}
.join-input::placeholder { color: #94A3B8; }
.join-select {
height: 36px;
padding: 0 28px 0 12px;
font-size: 13px;
color: var(--color-text);
background-image: url("../images/new_portal/ico_select_arrow.svg");
background-repeat: no-repeat;
background-position: right 10px center;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
min-width: 130px;
box-sizing: border-box;
}
.join-field-msg.is-error { color: #EF4444; display: none; }
.join-field-msg.is-error.is-show { display: inline; }
.join-field-msg.is-ok { color: var(--color-primary); display: none; }
.join-field-msg.is-ok.is-show { display: inline; }
.join-input.is-error { border-color: #EF4444; }
/* 이메일 */
.join-email-group {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.join-input--sm { width: 110px; }
.join-input--md { width: 150px; }
/* 라디오 버튼: .radio_inp.radio_inp--sm 공용 규칙 사용 (20px, 점 12px) */
.radio_inp__msg {
min-width: 0;
}
/* 하단 버튼 */
.join-action-row {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
/* ── 가입완료 (join-step4) ── */
.join-complete__img {
width: 240px;
height: 240px;
}
.join-complete__img img {
width: 240px;
height: 240px;
object-fit: contain;
}
/* 휴면 계정 해제 안내(dormant.jsp) 문장 끊기 (2026-10-12) — 넓은 화면에서만 의도한 위치에서 줄바꿈.
좁으면 강제 줄바꿈 때문에 짧은 줄이 생겨(이름 3자 기준 533px 이하) 자연 줄바꿈으로 되돌린다.
이름이 길수록 더 넓은 폭에서 생기므로 5자 이름까지 여유를 두고 575px 이하 */
@media (max-width: 575.98px) {
.dormant-notice__br { display: none; }
}
/* ── 반응형 ── */
@media (max-width: 767px) {
.join-section { padding: 32px 0; }
.join-steps {
height: auto;
flex-direction: column;
}
.join-step {
border: 1px solid var(--color-line);
border-bottom: none;
border-radius: 0;
padding: 16px 20px;
}
.join-step:first-child { border-radius: 0; }
.join-step:last-child { border-bottom: 1px solid var(--color-line); border-radius: 0; }
.join-step.is-active { border-color: transparent; }
.join-step.is-done {
border: 1px solid var(--color-line);
border-bottom: none;
}
.join-auth__cards { flex-direction: column; gap: 20px; }
.join-auth-card { max-width: 100%; padding: 24px; }
/* 정보입력 폼 모바일 */
.join-info-header { flex-direction: column; align-items: flex-start; gap: 6px; }
.join-form-row { flex-direction: column; min-height: auto; }
.join-form-row--tall { min-height: auto; }
.join-form-label { width: 100%; border-bottom: none; border-top: 1px solid var(--color-line); padding: 10px 12px; }
.join-form-field { padding: 10px 12px; flex-wrap: wrap; gap: 6px; }
.join-form-row--tall .join-form-field { flex-wrap: wrap; gap: 10px; align-items: center; }
.join-input { width: 100%; max-width: 100%;
font-family: var(--font);
color: var(--color-text);
}
.join-input--sm { width: 100px; }
.join-input--md { width: 130px; }
.join-email-group { flex-wrap: wrap; }
.join-action-row { flex-direction: column; gap: 10px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
/* 태블릿: 라벨↔아이콘 간격(기본 70px)이 4개 스텝을 넘기므로 축소 */
.join-step { padding: 0 12px; gap: 12px; min-width: 0; }
.join-step__num { font-size: 22px; }
.join-auth-card { padding: 24px; }
/* 정보입력 폼 태블릿 */
.join-form-label { width: 140px; }
.join-input { width: 180px;
font-family: var(--font);
color: var(--color-text);
}
.join-form-row--tall .join-form-field { gap: 16px; }
}
/* ────────────────────────────────────────
개인정보처리방침 / 이용약관 페이지
──────────────────────────────────────── */
.privacy-title-bar {
background: #06B6D4;
padding: 28px 0;
}
.privacy-section {
padding: 48px 0;
background: #fff;
}
.privacy-text {
padding: 16px 15px;
}
.privacy-text p {
margin: 0 0 8px;
}
.privacy-article-title {
margin: 16px 0 4px;
}
.privacy-list {
list-style: none;
padding: 0;
margin: 0 0 8px;
}
.privacy-list li {
padding-left: 8px;
line-height: 1.7;
}
/* 푸터 정책 링크 현재 페이지 활성 상태 */
.footer-policy-bar__left a.is-active {
background: #555;
}
/* ── 반응형 ── */
@media (max-width: 767px) {
.privacy-title-bar { padding: 20px 0; }
.privacy-section { padding: 32px 0; }
.privacy-text {
padding: 12px 8px;
}
}
/* ────────────────────────────────────────
休서울이동노동자 쉼터 페이지
──────────────────────────────────────── */
/* ────────────────────────────────────────
페이지 타이틀 배너 (공통)
──────────────────────────────────────── */
.sub-hero {
background-image: url(../images/new_portal/Sub-banner.svg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sub-hero__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 38px var(--container-pad-sm);
min-height: 120px;
box-sizing: border-box;
}
@media (min-width: 768px) {
.sub-hero__inner {
padding-left: var(--container-pad-md);
padding-right: var(--container-pad-md);
}
}
@media (min-width: 1200px) {
.sub-hero__inner {
padding-left: var(--container-pad-lg);
padding-right: var(--container-pad-lg);
}
}
.sub-hero__title {
font-size: 23px;
font-weight: 500;
line-height: 1.5;
color: var(--color-text);
font-family: var(--font);
}
/* 타이틀이 긴 페이지용 축소 변형 (wsin) */
.sub-hero__title--sm {
font-size: 22px;
}
@media (max-width: 767px) {
.sub-hero__inner { padding: 28px var(--container-pad-sm); min-height: 90px; }
.sub-hero__title { font-size: 20px; }
.sub-hero__title--sm { font-size: 17px; }
}
/* ────────────────────────────────────────
브레드크럼
──────────────────────────────────────── */
.breadcrumb__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 25px var(--container-pad-sm);
}
/* 아이콘 잉크가 텍스트보다 위로 떠 보이는 착시 보정 */
.breadcrumb__inner > span:first-child img {
transform: translateY(1px);
}
@media (min-width: 768px) {
.breadcrumb__inner {
padding-left: var(--container-pad-md);
padding-right: var(--container-pad-md);
}
}
@media (min-width: 1200px) {
.breadcrumb__inner {
padding-left: var(--container-pad-lg);
padding-right: var(--container-pad-lg);
}
}
.breadcrumb__list {
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumb__link {
font-size: 14px;
color: var(--color-text);
line-height: 1.4;
white-space: nowrap;
font-family: var(--font);
}
.breadcrumb__current {
font-size: 14px;
line-height: 1.4;
white-space: nowrap;
color: var(--color-text);
font-family: var(--font);
}
.breadcrumb__sep {
color: #64748B;
margin: 0 4px;
}
/* 실제 페이지로 연결된 상위 링크 */
.breadcrumb__link[href]:not([href="#"]) { cursor: pointer; }
.breadcrumb__link[href]:not([href="#"]):hover { color: var(--color-primary); text-decoration: underline; }
/* 현재 항목 드롭다운 (하위메뉴 형제 페이지) */
.breadcrumb__item--dropdown { position: relative; }
.breadcrumb__current--toggle { cursor: pointer; }
.breadcrumb__item--dropdown .breadcrumb__sep { cursor: pointer; }
.breadcrumb__item--dropdown .breadcrumb__sep svg { transition: transform .2s; }
.breadcrumb__item--dropdown.is-open .breadcrumb__sep svg { transform: rotate(180deg); }
.breadcrumb__dropdown {
position: absolute;
top: 100%;
left: 0;
z-index: 50;
min-width: 180px;
margin: 8px 0 0;
padding: 6px 0;
list-style: none;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
display: none;
}
.breadcrumb__item--dropdown.is-open .breadcrumb__dropdown { display: block; }
.breadcrumb__dropdown li { margin: 0; }
.breadcrumb__dropdown a {
display: block;
padding: 8px 16px;
font-size: 14px;
color: var(--color-text-sub);
text-decoration: none;
white-space: nowrap;
line-height: 1.4;
font-family: var(--font);
}
.breadcrumb__dropdown a:hover { background: #EBF4FF; color: var(--color-primary); }
.breadcrumb__dropdown a.is-current { color: var(--color-primary); font-weight: 600; }
/* 초소형 화면: 긴 경로가 한 줄을 넘겨 삐져나오지 않도록 폰트 축소 */
@media (max-width: 360px) {
.breadcrumb__link,
.breadcrumb__current { font-size: 12px; }
.breadcrumb__sep { margin: 0 2px; }
}
/* ────────────────────────────────────────
탭 메뉴
──────────────────────────────────────── */
/* ────────────────────────────────────────
공용 탭 (박스형, 채움 스타일)
──────────────────────────────────────── */
.tab-box {
height: 64px;
font-size: 18px;
font-weight: 500;
background: #fff;
border: 1px solid var(--color-line);
border-left: none;
cursor: pointer;
transition: background 0.2s, color 0.2s;
letter-spacing: 0.1px;
line-height: 1.5;
padding: 0 12px;
text-align: center;
text-decoration: none;
font-family: var(--font);
color: var(--color-text);
}
.tab-box:first-child {
border-left: 1px solid var(--color-line);
}
.tab-box.is-active {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
font-weight: 600;
}
.tab-box:not(.is-active):hover {
background: #F8FAFC;
}
.tab-box:disabled {
cursor: default;
pointer-events: none;
}
/* 탭 수가 많아 폭이 좁아야 하는 경우 (예: 6개 이상) */
.tab-box--sm {
min-width: 80px;
font-size: 15px;
padding: 0 8px;
white-space: nowrap;
}
@media (min-width: 880px) {
.tab-box--sm { font-size: 16px; white-space: normal; }
}
@media (max-width: 767px) {
.tab-box {
font-size: 13px;
min-width: 0;
height: auto;
min-height: 50px;
padding: 6px 6px;
line-height: 1.3;
word-break: keep-all;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.tab-box { font-size: 16px; height: 58px; }
}
/* 접이식 탭메뉴 공통 패턴 (1024px 이하: 세로 드롭다운으로 전환)
쉼터 선택(.worker-shelter-tabs), 통합검색 분류(.search-tabs), 자료실 분류(.recsroom-tabs)
등 개수가 가변적인 탭 그룹이 각자 갖고 있던 동일한 드롭다운 패턴을 통합.
마크업: .tabs-collapse-wrap > .tabs-collapse-toggle + .tabs-collapse-list(role=tablist),
열림 상태는 .tabs-collapse-wrap.is-open, 토글 스크립트는 common/js/mordern/sub.js 참고. */
.tabs-collapse-toggle { display: none; }
@media (max-width: 1024px) {
.tabs-collapse-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 46px;
padding: 10px 16px;
background: #fff;
border: 1px solid var(--color-line);
border-radius: 8px;
font-family: var(--font);
font-size: 14px;
font-weight: 500;
color: var(--color-text);
cursor: pointer;
}
.tabs-collapse-toggle__text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tabs-collapse-toggle__icon {
flex: 0 0 auto;
width: 8px;
height: 8px;
margin-left: 8px;
border-right: 2px solid var(--color-text-sub);
border-bottom: 2px solid var(--color-text-sub);
transform: rotate(45deg);
transition: transform .2s ease;
}
.tabs-collapse-wrap.is-open .tabs-collapse-toggle__icon {
transform: rotate(225deg);
margin-top: 4px;
}
.tabs-collapse-list {
flex-direction: column;
max-height: 0;
opacity: 0;
margin-top: 0;
border: 1px solid transparent;
border-radius: 8px;
overflow: hidden;
transition: max-height .3s ease, opacity .25s ease, margin-top .3s ease, border-color .25s ease;
}
.tabs-collapse-wrap.is-open .tabs-collapse-list {
max-height: 600px;
opacity: 1;
margin-top: 4px;
border-color: var(--color-line);
}
.tabs-collapse-list__row { flex-direction: column; }
.tabs-collapse-list .tab-box {
flex: 0 0 auto;
width: 100%;
min-width: 0;
height: auto;
min-height: 46px;
font-size: 14px;
padding: 10px 16px;
text-align: left;
border: none;
border-top: 1px solid var(--color-line);
}
.tabs-collapse-list > .tab-box:first-child { border-top: none; }
.tabs-collapse-list__row:first-child .tab-box:first-child { border-top: none; }
}
/* 지도 영역 → .map / .map__placeholder 공용 규칙 재사용
([Backend] 카카오맵 SDK 연동 시 내부 div 교체) */
/* 정보 테이블(주소·전화번호·운영시간)은 공통 .table_label/.table_value 사용 */
/* ────────────────────────────────────────
대관정보 섹션
──────────────────────────────────────── */
.wsh {
border: 2px solid var(--color-line);
padding: 30px 24px;
}
.wsh__body {
display: flex;
align-items: flex-start;
gap: 32px;
padding: 16px 12px;
}
.wsh__img {
width: 300px;
height: 225px;
object-fit: cover;
display: block;
}
.wsh__items {
align-self: stretch;
}
.wsh__item {
padding: 0 16px;
background: #F1F5F9;
min-height: 60px;
}
.wsh__item-icon {
width: 40px;
height: 40px;
object-fit: contain;
}
/* ────────────────────────────────────────
노동자/사용자상담 페이지 (worker-counsel.html)
──────────────────────────────────────── */
.counsel-content {
padding-bottom: 60px;
}
.counsel-content__inner {
gap: 32px;
}
/* ── 탭 버튼 ── */
/* ── 안내 박스 ── */
.counsel-info {
background: #fff;
border: 1px solid var(--color-line);
padding: 30px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
/* videoCnslt/selectPageSurvey.jsp, vglbCnsl/completeVglbCnsl.jsp — 세로로 쌓아 가운데 정렬하는 안내/완료 화면 변형 */
.counsel-info--center { text-align: center; }
/* ════════════════════════════════════════
공통 검색 필터 (list-filter)
counsel / faq / vedu / pvideo 페이지 공유
════════════════════════════════════════ */
.list-filter {
background: #F1F5F9;
padding: 28px 80px;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
justify-content: center;
}
.list-filter__select {
height: 46px;
border: 1px solid var(--color-line);
border-radius: 4px;
background: #fff url("../images/new_portal/ico_select_arrow_thin.svg") no-repeat right 12px center;
font-size: 14px;
padding: 0 32px 0 12px;
outline: none;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
font-family: var(--font);
color: var(--color-text);
}
.list-filter__select:focus { border-color: var(--color-primary); }
.list-filter__input {
height: 46px;
flex: 1;
min-width: 200px;
border: 1px solid var(--color-line);
border-radius: 4px;
background: #fff;
font-size: 14px;
padding: 0 16px;
outline: none;
font-family: var(--font);
color: var(--color-text);
}
.list-filter__input:focus { border-color: var(--color-primary); }
.list-filter__input::placeholder { color: #94A3B8; }
.list-filter__btn {
height: 46px;
padding: 0 18px;
background: #64748B;
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: background 0.2s;
font-family: var(--font);
}
.list-filter__btn:hover { background: #475569; }
@media (max-width: 767px) {
.list-filter { padding: 16px; flex-direction: column; align-items: stretch; }
/* 세로 스택 시 셀렉트도 전체폭 (변형 셀렉트 고정폭보다 우선하도록 특이성 상향) */
.list-filter .list-filter__select { width: 100%; }
/* 세로 배치에서 flex:1이 높이를 눌러 입력창이 납작해지므로 flex 해제 + 높이 복원 */
.list-filter__input { min-width: 0; flex: 0 0 auto; height: 46px; }
.list-filter__btn { width: 100%; justify-content: center;
color: #fff;
font-family: var(--font);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.list-filter { padding: 24px 32px; }
}
/* ── 검색 필터 ── */
/* counsel 필터 select 너비 */
.list-filter__select--year { width: 110px; }
.list-filter__select--type { width: 170px; }
.list-filter__select--field { width: 90px; }
/* ── 목록 ── */
.counsel-list__count em {
color: #006ED6;
font-style: normal;
}
/* ── 테이블 ── */
.counsel-table .col-num { width: 130px; }
.counsel-table .col-receipt { width: 155px; }
.counsel-table .col-title { text-align: left; padding-left: 12px; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.counsel-table .col-status { width: 130px; }
.counsel-table .col-date { width: 130px; }
/* 권리구제 신청내역 목록(counsel-table--remedy): 신청인(이름) 칸은 고정 폭으로 둔다.
예전에는 제목용 col-title(남는 폭 전부)을 써서 신청인 칸이 지나치게 넓었고, '유형 (접수번호)'가 들어가는
접수번호 칸(155px)은 2~3줄로 접혔다. 모든 칸에 폭이 지정되면 표 폭(100%)에 맞춰 비례 배분되어
1366px 화면에서 접수번호 약 240px(약 1.5배)·신청인 약 217px 가 된다. */
.counsel-table--remedy .col-applicant { width: 140px; }
@media (max-width: 767px) {
/* 공용 모바일 규칙은 접수번호 칸(.col-receipt)을 숨기지만, 이 표는 접수번호 칸이 상세로 가는 링크라 숨기지 않는다.
(예전에는
텍스트
크기 기본 20px · --sm 18px · --lg 22px
상태 --disabled (읽기전용처럼 흐리게)
라디오:
텍스트
크기 기본 24px(점 14px) · --sm 20px(점 12px)
══════════════════════════════════════════════════════════ */
.chk_inp { cursor: pointer; }
/* 감싸는 요소가 label 이 아니면(div·ul·td 등) 빈 영역을 눌러도 체크되지 않으므로
손가락 커서는 실제로 눌리는 체크박스·label 에만 준다 */
.chk_inp:not(label) { cursor: default; }
.chk_inp label { cursor: pointer; }
.chk_inp input[type="checkbox"] {
width: 20px;
height: 20px;
accent-color: var(--color-primary);
cursor: pointer;
flex-shrink: 0;
}
.chk_inp--sm input[type="checkbox"] { width: 18px; height: 18px; transform: translateY(-1px); }
.chk_inp--lg input[type="checkbox"] { width: 22px; height: 22px; }
.chk_inp--disabled { opacity: 0.45; pointer-events: none; }
.radio_inp { cursor: pointer; }
/* (2026-10-13) display:none 이면 키보드(Tab·방향키)로 선택할 수 없고 스크린리더가 라디오로 인식하지 못함
→ 화면에서만 숨기고(흐름 밖 1px·투명) 포커스·접근성은 유지, 키보드 포커스는 동그라미 테두리로 표시 */
.radio_inp input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.radio_inp input[type="radio"]:focus-visible ~ .radio_inp__circle { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.radio_inp__circle {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid #64748B;
background: #fff;
}
.radio_inp input[type="radio"]:checked ~ .radio_inp__circle::after {
content: '';
width: 14px;
height: 14px;
background: var(--color-primary);
border-radius: 50%;
display: block;
}
.radio_inp--sm .radio_inp__circle { width: 20px; height: 20px; }
.radio_inp--sm input[type="radio"]:checked ~ .radio_inp__circle::after { width: 12px; height: 12px; }
/* 날짜 + 시간 */
.booking-date-wrap {
display: flex;
gap: 40px;
align-items: flex-start;
width: 100%;
flex-wrap: wrap;
}
/* 캘린더 */
.booking-cal { flex-shrink: 0; }
.booking-cal__nav {
height: 48px;
}
.booking-cal__nav-btn {
background: none;
border: none;
cursor: pointer;
font-size: 18px;
color: #334155;
padding: 4px 8px;
}
.booking-cal__month {
min-width: 100px;
}
.booking-cal__grid {
display: grid;
grid-template-columns: repeat(7, 40px);
gap: 2px;
}
.booking-cal__head-cell {
width: 40px;
height: 40px;
font-size: 12px;
background: #DBEAFE;
border-bottom: 1px solid var(--color-line);
}
.booking-cal__day {
width: 40px;
height: 40px;
font-size: 12px;
color: var(--color-primary);
cursor: pointer;
border-right: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
background: #fff;
transition: background .15s;
user-select: none;
}
.booking-cal__day.is-selected { background: var(--color-primary); color: #fff; font-weight: 700; }
.booking-cal__day.is-unavailable { color: #EF4444; cursor: default; background: #F8FAFC; }
.booking-cal__day.is-empty { cursor: default; background: transparent; border: none; }
.booking-cal__day.is-today:not(.is-selected) { font-weight: 700; }
.booking-cal__nav-btn[disabled] { color: var(--color-line); cursor: default; }
/* 모바일: 달력 7열을 고정 40px 대신 유연폭으로 (좁은 화면에서 넘침 방지) */
@media (max-width: 767px) {
.booking-cal { flex-shrink: 1; width: 100%; }
.booking-cal__grid { grid-template-columns: repeat(7, 1fr); }
.booking-cal__head-cell,
.booking-cal__day { width: auto; }
}
.booking-cal__legend {
margin-top: 16px;
font-size: 13px;
}
.booking-cal__legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
}
.booking-cal__legend-dot--selected { background: var(--color-primary); }
.booking-cal__legend-dot--unavail { background: #EF4444; }
/* 시간 그리드 */
.booking-time {
min-width: 300px;
padding-top: 6px;
}
.booking-time__title {
height: 40px;
font-size: 14px;
font-weight: 500;
margin-bottom: 2px;
}
.booking-time__grid {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.booking-time__grid td {
font-size: 13px;
text-align: center;
padding: 8px 8px;
border-right: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
cursor: pointer;
white-space: nowrap;
background: #fff;
transition: background .1s;
color: var(--color-text);
}
.booking-time__grid td:first-child { border-left: 1px solid var(--color-line); }
.booking-time__grid tr:first-child td { border-top: 1px solid var(--color-line); }
.booking-time__grid td:hover:not(.is-booked):not(.is-empty) { background: #EFF6FF; }
.booking-time__grid td.is-selected { background: #DBEAFE; color: var(--color-primary); font-weight: 600; }
.booking-time__grid td.is-booked { color: rgba(15, 23, 42, 0.25); cursor: default; background: #fff; }
/* 시간 수가 4의 배수가 아닐 때 채우는 빈 칸 — 테두리 없음.
첫 줄 위 테두리 규칙(tr:first-child td, 특이도 0,2,2)이 더 강해 빈 칸에도 위 선이 그려져
"2칸뿐인데 위 선이 끝까지" 보였다 → 같은 조건을 붙여 이긴다 (2026-10-07). hover 배경도 빈 칸 제외 */
.booking-time__grid td.is-empty,
.booking-time__grid tr:first-child td.is-empty { cursor: default; background: transparent; border-color: transparent; }
/* 모바일: 4열 시간표가 좁아지면 "09:00~10:00" 텍스트가 칸을 넘어 깨지므로 폰트·패딩 축소 */
@media (max-width: 767px) {
.booking-time__grid td { font-size: 12px; padding: 9px 3px; }
}
@media (max-width: 479px) {
.booking-time__grid td { font-size: 11px; padding: 9px 2px; }
}
@media (max-width: 360px) {
.booking-time__grid td { font-size: 10px; padding: 9px 0; }
}
@media (max-width: 320px) {
.booking-time__grid td { font-size: 9px; padding: 9px 0; }
}
.booking-time__note {
margin-top: 39px;
}
.booking-time__note--edit {
margin-bottom: 12px;
}
/* 장비대여 */
/* .chk_inp 공용 규칙 사용 (20px 기본 크기), 텍스트는 .dot_body_sm */
/* 하단 버튼 → .form-actions 공용 규칙 재사용 */
/* 반응형 */
@media (max-width: 767px) {
.wsr-rules { padding: 20px 16px; }
.wsr-rules__notice { padding: 16px 20px; }
/* 좁은 화면: 시간 선택 패널 최소폭(300px) 해제 → 시간표는 .scroll-x로 스크롤 */
.booking-time { min-width: 0; max-width: 100%; }
.booking-time .scroll-x { min-width: 0; max-width: 100%; }
.booking-date-wrap { min-width: 0; flex-direction: column; }
.wsr-input--md { width: 100%; }
.wsr-input--sm { width: 130px; }
.wsr-type-img { width: 120px; height: 90px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.wsr-rules { padding: 24px 30px; }
.wsr-input--md { width: 240px; }
}
/* ────────────────────────────────────────
방문상담예약 페이지 (visit-counsel-apply.html)
──────────────────────────────────────── */
/* 기본 선택 - 드롭다운 + 기관정보 행 */
.visit-counsel-basic-top {
display: flex;
align-items: flex-start;
gap: 24px;
width: 100%;
}
/* 기관 정보 목록 */
.visit-counsel-facility-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 15px;
line-height: 1.9;
}
.visit-counsel-facility-info li::before {
content: '• ';
}
/* 상담실 사진 — (2026-10-13, TC-252) 사진이 4장 넘으면 한 줄에 모두 들어가 작아지던 문제
→ 한 화면 4장(767px 이하 2장) 고정, 나머지는 가로 스크롤(스냅) + 넘칠 때만 이전/다음 버튼(booking.js createPhotoSlider) */
.visit-counsel-photo {
position: relative;
margin-top: 14px;
width: 100%;
}
.visit-counsel-photo-grid {
display: flex;
gap: 8px;
width: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
}
.visit-counsel-photo-grid:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.visit-counsel-photo-grid img {
flex: 0 0 calc((100% - 24px) / 4);
min-width: 0;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
scroll-snap-align: start;
}
/* 이전/다음 버튼 — 아이콘은 SVG 화살표(글자 ‹ › 는 가늘고 중심이 어긋나 보였음), 사진 위에서도 보이도록 불투명 흰 배경 */
.visit-counsel-photo__nav {
position: absolute;
top: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid #94A3B8;
border-radius: 50%;
background: #fff;
color: #1E293B;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transform: translateY(-50%);
cursor: pointer;
}
.visit-counsel-photo__nav svg { display: block; width: 18px; height: 18px; }
.visit-counsel-photo__nav:hover { border-color: var(--color-primary); color: var(--color-primary); }
.visit-counsel-photo__nav:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.visit-counsel-photo__nav[hidden] { display: none; }
/* 끝에 닿으면 disabled 대신 aria-disabled — disabled 는 포커스를 잃게 해서 키보드 사용자가 페이지 맨 위로 튕김 */
.visit-counsel-photo__nav[aria-disabled="true"] { opacity: 0.4; cursor: default; box-shadow: none; }
.visit-counsel-photo__nav[aria-disabled="true"]:hover { border-color: #94A3B8; color: #1E293B; }
.visit-counsel-photo__nav--prev { left: 8px; }
.visit-counsel-photo__nav--next { right: 8px; }
@media (max-width: 767px) {
.visit-counsel-basic-top { flex-direction: column; gap: 12px; }
.visit-counsel-photo-grid img { flex: 0 0 calc((100% - 8px) / 2); aspect-ratio: 4 / 3; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.visit-counsel-photo-grid img { aspect-ratio: 4 / 3; }
}
/* ────────────────────────────────────────
방문상담예약 신청내역 조회 페이지 (visit-counsel-list.html)
──────────────────────────────────────── */
.visit-counsel-filter .list-filter__select {
width: 185px;
}
.counsel-history-table .col-num { width: 100px; }
.counsel-history-table .col-center { text-align: left; padding-left: 20px; }
.counsel-history-table .col-date { width: 140px; }
.counsel-history-table .col-time { width: 140px; }
.counsel-history-table .col-status { width: 130px; }
.counsel-history-table .col-reg { width: 120px; }
.counsel-history-link {
color: var(--color-primary);
text-decoration: none;
}
.counsel-history-link:hover { text-decoration: underline; }
/* 상태 배지는 공용 .counsel-status(+ --pending/--done/--approved) 사용 */
@media (max-width: 767px) {
.visit-counsel-filter .list-filter__select { width: 100%; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.visit-counsel-filter .list-filter__select { width: 150px; }
.counsel-history-table .col-date { width: 110px; }
.counsel-history-table .col-time { width: 110px; }
}
/* ────────────────────────────────────────
화상상담 예약내역 조회 (video-counsel-list.html)
기본 표/배지/페이지네이션은 공용 규칙(.counsel-history-table 등) 재사용
──────────────────────────────────────── */
/* 목록 상단: 건수 + 예약 신청 버튼 */
.vcl-head .counsel-list__count { margin: 0; }
/* 화상상담 예약내역 표 컬럼 폭 */
.video-counsel-history-table .col-num { width: 70px; }
.video-counsel-history-table .col-no { width: 200px; }
.video-counsel-history-table .col-datetime { width: 220px; }
.video-counsel-history-table .col-counselor { width: auto; }
.video-counsel-history-table .col-status { width: 120px; }
.video-counsel-history-table .col-survey { width: 110px; }
.video-counsel-history-table .col-reg { width: 120px; }
@media (max-width: 767px) {
.video-counsel-history-table .col-counselor,
.video-counsel-history-table .col-survey { display: none; }
}
/* ── 예약내역 표 모바일: 기존 표 모양 유지한 채 축소 (마이페이지 방식) ──
부가 컬럼을 숨기고 고정 레이아웃 + 폰트 축소로 화면에 맞춘다. */
@media (max-width: 767px) {
.counsel-history-table,
.video-counsel-history-table { table-layout: fixed; width: 100%; }
.counsel-history-table th,
.counsel-history-table td { font-size: 12px; height: 44px; padding: 0 4px; }
/* 방문상담 예약내역: 번호·방문센터·예약날짜·상태 유지, 예약시간·등록일 숨김.
모든 컬럼 명시 폭(합 ≤ 275) → 320px에서도 안 넘치고 넓어지면 비례 확장. */
.counsel-history-table .col-time,
.counsel-history-table .col-reg { display: none; }
.counsel-history-table .col-num { width: 38px; }
.counsel-history-table .col-center {
width: 98px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.counsel-history-table .col-date { width: 82px; }
.counsel-history-table .col-status { width: 56px; }
.counsel-history-table .col-center .counsel-history-link {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 화상상담 예약내역: 번호·예약번호·예약일시·상태 유지, 담당상담사·설문·신청일 숨김. */
.video-counsel-history-table .col-counselor,
.video-counsel-history-table .col-survey,
.video-counsel-history-table .col-reg { display: none; }
.video-counsel-history-table .col-num { width: 38px; }
.video-counsel-history-table .col-no {
width: 88px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.video-counsel-history-table .col-datetime { width: 86px; white-space: normal; line-height: 1.3; }
.video-counsel-history-table .col-status { width: 54px; }
.video-counsel-history-table .col-no .counsel-history-link {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 상태 배지 축소 (컬럼이 많은 화상상담 표에서만) */
.video-counsel-history-table .counsel-status { width: 52px; height: 26px; font-size: 11px; }
}
/* ────────────────────────────────────────
공지사항 목록 페이지 (notice-list.html)
──────────────────────────────────────── */
.notice-filter__select--field { width: 120px; }
.notice-filter .list-filter__input { max-width: 520px; }
/* 기본 표 스타일은 .counsel-history-table 공용 규칙 참조 */
.notice-table .col-num { width: 90px; }
/* 쉼터상담 상담번호(T20240902-0007 형태)처럼 일련번호가 긴 경우 줄바꿈 방지 */
.notice-table .col-no { width: 180px; white-space: nowrap; }
.notice-table .col-title {
text-align: left;
padding-left: 20px;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.notice-table .col-writer { width: 160px; }
.notice-table .col-date { width: 120px; }
.notice-table .col-views { width: 90px; }
.notice-table .col-category { width: 140px; }
.notice-table .col-file { width: 100px; text-align: center; }
.notice-table .col-file img { display: inline-block; }
/* 제목 컬럼: 헤더("제목")는 가운데 정렬, 본문 제목은 좌측정렬 유지 — notice-table 공통 규칙 */
.notice-table th.col-title { text-align: center; }
.notice-table__link {
color: var(--color-text);
text-decoration: none;
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
.notice-table__link:hover { color: var(--color-primary); text-decoration: underline; }
@media (max-width: 767px) {
.notice-filter .list-filter__input { max-width: none; }
/* 모바일: 표가 화면 밖으로 나가지 않도록 고정 레이아웃 + 부가 컬럼 숨김 */
.notice-table { table-layout: fixed; }
.notice-table .col-writer,
.notice-table .col-views,
.notice-table .col-category,
.notice-table .col-file { display: none; }
.notice-table th,
.notice-table td { font-size: 12px; height: 44px; padding: 0 6px; }
.notice-table .col-num { width: 44px; }
.notice-table .col-no { width: 110px; }
.notice-table .col-date { width: 82px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.notice-table .col-writer { width: 110px; }
.notice-table .col-date { width: 100px; }
}
/* ────────────────────────────────────────
정책연구 목록 페이지 (policy-research.html)
──────────────────────────────────────── */
.notice-table .col-category { width: 120px; }
.notice-table .col-file { width: 100px; }
.archive-card {
display: flex;
gap: 32px;
background: #fff;
border: 1px solid var(--color-line);
border-radius: 8px;
padding: 28px;
}
.archive-card__thumb {
flex: 0 0 140px;
}
.archive-card__thumb img {
width: 100%;
height: auto;
display: block;
border: 1px solid var(--color-line-light);
}
.archive-card__body {
min-width: 0;
}
.archive-card__badge {
color: var(--color-primary);
margin-right: 4px;
}
.archive-card__meta {
list-style: none;
margin: 0;
padding: 0;
}
.archive-card__meta li {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #334155;
}
.archive-card__meta-label {
min-width: 70px;
color: #64748B;
font-weight: 500;
}
.archive-card__file {
display: inline-flex;
align-items: center;
gap: 6px;
}
.archive-card__actions {
margin-top: auto;
}
.archive-card__actions .post-detail__file-btn {
padding-top: 14px;
}
.archive-card__actions .post-detail__file-btn img,
.archive-card__actions .post-detail__file-btn span {
margin-top: -4px;
}
@media (max-width: 767px) {
.notice-table .col-category,
.notice-table .col-file { display: none; }
.archive-card { flex-direction: column; padding: 20px; }
.archive-card__thumb { width: 132px; margin: 0 auto; }
}
/* ────────────────────────────────────────
공지사항 상세 페이지 (notice-detail.html)
──────────────────────────────────────── */
.post-detail {
width: 100%;
border-top: 3px solid var(--color-primary);
}
.post-detail__title {
min-height: 72px;
border-bottom: 1px solid var(--color-line);
padding: 0px 30px;
font-size: 16px;
font-weight: 500;
line-height: 1.42;
word-break: keep-all;
overflow-wrap: anywhere;
}
.post-detail__meta {
display: flex;
border-bottom: 1px solid var(--color-line);
}
.post-detail__meta-item {
flex: 1 1 0;
min-height: 60px;
padding: 14px 30px;
}
.post-detail__meta-item + .post-detail__meta-item {
border-left: 1px solid var(--color-line-light);
}
.post-detail__meta-label {
flex: 0 0 auto;
min-width: 60px;
}
.post-detail__file {
min-height: 72px;
padding: 14px 30px;
border-bottom: 1px solid var(--color-line);
}
.post-detail__file-info {
min-width: 0;
}
.post-detail__file-icon { flex: 0 0 auto; }
.post-detail__file-name {
font-size: 15px;
font-weight: 400;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color-text);
font-family: var(--font);
}
.post-detail__file-name:hover { color: var(--color-primary); text-decoration: underline; }
.post-detail__file-actions {
flex: 0 0 auto;
}
/* 나머지 모양(테두리/배경/hover)은 공용 .ext-link-btn 재사용, 이 자리만 살짝 더 큰 크기 사용 */
.post-detail__file-btn {
padding: 10px 20px;
font-size: 15px;
cursor: pointer;
}
/* 아이콘이 인라인 svg가 아니라 이 tax-counsel-cases-detail
클래스를 잘못 물려받고 있었음 — 자기 이름으로 바로잡고(각각 tccd/scd로 축약),
기존 시각 출력은 유지하도록 선택자만 그룹으로 묶음. 이 오버라이드가
shelter-counsel-detail.html에도 실제로 필요한 디자인인지는 별도 확인 필요.]
──────────────────────────────────────── */
.tccd .post-detail,
.scd .post-detail { border-top: none; }
.tccd .breadcrumb__inner,
.scd .breadcrumb__inner { padding-bottom: 10px; }
.tccd .post-detail__title,
.scd .post-detail__title {
border-bottom: none;
min-height: auto;
padding-top: 30px;
padding-bottom: 14px;
}
/* ────────────────────────────────────────
노동자상담 신청하기 페이지 (worker-counsel-apply.html)
──────────────────────────────────────── */
.counsel-apply-wrap {
display: flex;
flex-direction: column;
gap: 50px;
padding-bottom: 30px;
}
/* ── 동의 박스 ── */
.counsel-agree-box {
padding: 30px 50px;
display: flex;
align-items: center;
gap: 50px;
}
.counsel-agree-img {
width: 158px;
height: 158px;
overflow: hidden;
}
.counsel-agree-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.counsel-agree-radios {
padding-top: 4px;
}
/* ── 섹션 구조 ── */
.counsel-required-note {
font-size: 15px;
}
/* ── 폼 테이블 ── */
.counsel-form-table {
width: 100%;
}
.counsel-form-row {
display: flex;
align-items: stretch;
min-height: 72px;
}
/* 여러 줄 내용(텍스트·textarea) 행: 내용만큼 늘어나되, 내용이 비거나 한 줄이어도 일반 행(72px)보다 낮아지지 않게 한다.
(예전 min-height: auto 는 빈 값이면 행이 44px 로 줄고 라벨 글자가 아래 구분선에 붙어 보였다 — 권리구제 상세 등)
모바일은 아래 반응형 규칙(.counsel-form-row { min-height: auto })이 그대로 적용된다. */
.counsel-form-row--auto {
min-height: 72px;
}
/* ── 레이블 (스타일은 .counsel-form-label 공용 규칙 참조) ── */
/* 위쪽 정렬 라벨: 일반 행(72px 가운데 정렬) 라벨과 글자 높이가 같도록 위 여백 24px */
.counsel-form-label--top {
align-items: flex-start;
padding-top: 24px;
}
/* 2열 행의 오른쪽 레이블 */
.counsel-form-divider {
width: 180px;
padding: 0 20px;
font-size: 15px;
font-weight: 500;
border-left: 1px solid var(--color-line);
line-height: 1.5;
color: var(--color-text);
}
/* ── 필드 셀 ── */
.counsel-form-field {
padding: 0 20px;
min-width: 0;
}
.counsel-form-field--col {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 16px;
padding: 16px 20px;
}
/* 상담 날짜/시간 필드: 캘린더 상하 여백 확보 */
.counsel-form-field--datetime {
padding-top: 28px;
padding-bottom: 28px;
}
.counsel-form-field--top {
align-items: flex-start;
padding-top: 22px; /* 위쪽 정렬 라벨(24px)과 첫 줄 높이를 맞춤 */
padding-bottom: 18px;
}
.counsel-form-field--compact {
padding-top: 14px;
padding-bottom: 14px;
}
/* 두 컬럼 행 */
.counsel-form-field--half {
min-width: 0;
padding: 14px 20px;
}
@media (max-width: 767px) {
.counsel-form-field--half { padding: 12px 16px; width: 100%; }
}
/* ── 입력 컴포넌트: 테두리/반경/배경은 공용 .field_box 재사용 ── */
.counsel-input {
height: 48px;
padding: 0 16px;
font-size: 15px;
color: var(--color-text);
box-sizing: border-box;
}
.counsel-input::placeholder { color: #94A3B8; }
.counsel-input--name { width: 180px; }
.counsel-input--phone { width: 100px; text-align: center; }
.counsel-input--email-local { width: 140px; }
.counsel-input--email-domain {
min-width: 120px;
max-width: 200px;
}
.counsel-input--full {
min-width: 0;
}
/* vglbAtny/insertFormVglbAtnyBplcChck.jsp — 사업장 현황표의 disabled 합계 입력칸 */
.counsel-input--total { width: 80px; }
.counsel-input--total-sm { width: 60px; }
/* ── 선택 컴포넌트: 테두리/반경/배경은 공용 .field_box 재사용 ── */
.counsel-select {
height: 48px;
padding: 0 36px 0 16px;
font-size: 15px;
color: var(--color-text);
background-image: url("../images/new_portal/ico_select_arrow.svg");
background-repeat: no-repeat;
background-position: right 12px center;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
box-sizing: border-box;
}
.counsel-select--phone { min-width: 90px; padding-right: 30px; }
.counsel-select--mid { min-width: 160px; }
.counsel-select--email { min-width: 140px; }
/* ── 라디오 ── */
.counsel-radio-group {
display: flex;
align-items: center;
gap: 10px 40px;
flex-wrap: wrap;
padding: 16px 0;
}
/* .radio_inp/.radio_inp__circle 공용 규칙 사용 (24px 기본 크기) */
/* ── 체크박스 ── */
.counsel-checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
padding: 16px 0;
}
/* 항목이 길거나 세로로 한 줄씩 나열해야 보기 편한 경우(예: 컨설팅 신청 사항) */
.counsel-checkbox-group--col {
flex-direction: column;
flex-wrap: nowrap;
gap: 12px;
padding: 12px 0;
}
/* .chk_inp 공용 규칙 사용 (18px → .chk_inp--sm), flex-shrink 필요하면 input에 shrink-0 */
/* CacheCommboUtil의 getRadioStrAttrDisabled/getCheckboxStrAttrDisabled 등은
완성된 HTML 문자열(.form-check/.form-check-input/.form-check-label, 구디자인
부트스트랩 클래스)을 그대로 반환해서 마크업 자체는 바꿀 수 없다 — 실제 DB
코드값·checked/disabled 로직을 그대로 쓰기 위해 헬퍼는 유지하고, 색상/폰트만
새 디자인 톤에 맞게 재스킨한다. 라디오는 새 디자인의 커스텀 동그라미
인디케이터(.radio_inp__circle)까지는 재현 못하고, 네이티브 라디오를
강조색으로 스타일링하는 선에서 절충. */
.counsel-radio-group .form-check,
.counsel-checkbox-group .form-check {
display: inline-flex;
align-items: center;
gap: 6px;
}
.counsel-radio-group .form-check-input,
.counsel-checkbox-group .form-check-input {
width: 18px;
height: 18px;
accent-color: var(--color-primary);
cursor: pointer;
}
.counsel-radio-group .form-check-label,
.counsel-checkbox-group .form-check-label {
font-size: 14px;
font-weight: 400;
color: var(--color-text);
cursor: pointer;
}
/* ── 전화번호/이메일 그룹 ── */
/* ── 필드 노트 ── */
/* ── 텍스트에어리어 ── */
.counsel-textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--color-line);
border-radius: 0;
font-size: 15px;
font-family: var(--font);
color: var(--color-text);
background: #fff;
resize: none;
outline: none;
line-height: 1.7;
box-sizing: border-box;
}
.counsel-textarea:focus { border-color: var(--color-primary); }
.counsel-textarea::placeholder { color: #94A3B8; }
.counsel-textarea--sm { font-size: 13px; }
.counsel-textarea-count {
text-align: right;
font-size: 14px;
color: var(--color-text);
font-family: var(--font);
padding-top: 4px;
}
/* textarea 하단: 안내문(좌) + 글자수(우) 한 줄 배치 */
.counsel-textarea-foot {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-top: 8px;
}
.counsel-textarea-foot .counsel-textarea-note { flex: 1; }
.counsel-textarea-foot .counsel-textarea-count { padding-top: 0; white-space: nowrap; }
@media (max-width: 767px) {
.counsel-textarea-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
.counsel-textarea-foot .counsel-textarea-count { align-self: flex-end; }
}
/* ── 하단 버튼 ── */
.counsel-apply-actions {
display: flex;
justify-content: center;
gap: 20px;
}
/* ── 반응형 ── */
@media (max-width: 767px) {
.counsel-agree-box { flex-direction: column; padding: 20px; gap: 20px; }
.counsel-agree-img { width: 100px; height: 100px; }
.counsel-form-row { flex-direction: column; min-height: auto; }
.counsel-form-row--auto { flex-direction: column; }
.counsel-form-label { width: 100%; border-bottom: 1px solid var(--color-line); border-right: none; min-height: 48px; }
/* 모바일은 라벨이 내용 위 머리줄이라 위쪽 정렬이 필요 없음 — 다른 라벨처럼 48px 안 가운데(예전엔 글자가 아래 선에 붙음) */
.counsel-form-label--top { align-items: center; padding-top: 0; }
.counsel-form-divider { width: 100%; border-left: none; border-top: 1px solid var(--color-line); min-height: 48px; }
.counsel-form-field { padding: 12px 16px; }
.counsel-form-field--col { padding: 12px 16px; }
.counsel-input--name { width: 100%; }
.counsel-input--email-local { width: 110px; }
.counsel-input--email-domain { max-width: 140px; }
.counsel-radio-group { gap: 16px; }
.counsel-checkbox-group { gap: 8px 12px; }
.counsel-apply-actions { flex-direction: column; align-items: center; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.counsel-agree-box { padding: 24px 30px; gap: 30px; }
.counsel-agree-img { width: 120px; height: 120px; }
.counsel-form-label { width: 150px; }
.counsel-form-divider { width: 150px; }
.counsel-select--mid { min-width: 130px; }
}
/* ────────────────────────────────────────
자주묻는 질문(FAQ) 페이지 (faq.html)
──────────────────────────────────────── */
/* 콘텐츠 래퍼 */
.faq-content__inner {
gap: 32px;
}
/* ── 카테고리 탭 ──
스타일은 공용 .tab-box 재사용. 2행 그리드라 아래쪽 행만 위쪽 테두리를 지워
위 행의 아래 테두리와 겹치지 않게 한다. */
.faq-categories__row:last-child .tab-box {
border-top: none;
}
/* faq 검색 select 너비 */
.faq-search__select { width: 110px; }
/* ── FAQ 목록 ── */
.faq-list__wrap {
border-top: 3px solid var(--color-primary);
}
/* ── FAQ 개별 항목 ── */
.faq-item__header {
width: 100%;
min-height: 52px;
background: #fff;
border: none;
border-bottom: 1px solid var(--color-line);
padding: 0;
cursor: pointer;
text-align: left;
}
.faq-item__header:hover {
background: #F8FAFC;
}
.faq-item.is-open > .faq-item__header {
background: #fff;
}
/* 카테고리 뱃지 + 질문 텍스트 공통 */
/* 카테고리 뱃지 */
/* (2026-10-29) 100 → 150px: 가장 긴 분류명(근로시간/휴일/휴가·징계/해고/인사이동, 16px 약 130px)도 한 줄 */
.faq-item__cat {
width: 150px;
text-align: center;
padding: 12px 8px;
align-self: stretch;
border-right: 1px solid var(--color-line);
background: var(--color-primary);
color: #fff;
}
/* 질문 텍스트 */
.faq-item__question {
padding: 0 16px;
align-self: stretch;
}
.faq-item.is-open > .faq-item__header .faq-item__question {
color: #F97316;
}
/* 토글 버튼 */
.faq-item__toggle {
width: 60px;
align-self: stretch;
border-left: 1px solid var(--color-line);
position: relative;
}
/* 닫힌 상태 토글 원형 */
.faq-item:not(.is-open) .faq-item__toggle::before {
content: '';
position: absolute;
width: 26px;
height: 26px;
border-radius: 50%;
background: #E9E9E9;
}
/* 원 색상 전환 */
.faq-item__toggle::before {
transition: background-color 0.3s ease;
}
/* 열린 상태 토글 원형 */
.faq-item.is-open .faq-item__toggle::before {
content: '';
position: absolute;
width: 26px;
height: 26px;
border-radius: 50%;
background: #99B9FF;
}
/* 아이콘 공통: 절대 배치 + 전환 */
.faq-item__toggle svg {
position: absolute;
z-index: 1;
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* 닫힌 상태: + 표시, - 숨김(오른쪽 방향으로 대기) */
.faq-item .icon-plus { opacity: 1; transform: rotate(0deg); }
.faq-item .icon-minus { opacity: 0; transform: rotate(90deg); }
/* 열린 상태: + 왼쪽으로 사라지고, - 회전해서 등장 */
.faq-item.is-open .icon-plus { opacity: 0; transform: rotate(-90deg); }
.faq-item.is-open .icon-minus { opacity: 1; transform: rotate(0deg); }
/* ── 답변 박스 ── */
.faq-item__answer {
max-height: 0;
overflow: hidden;
padding: 0 20px;
background: #EFF6FF;
border-bottom: 0px solid var(--color-line);
transition: max-height 0.35s ease, padding 0.35s ease, border-bottom-width 0.35s ease;
}
.faq-item.is-open .faq-item__answer {
max-height: 600px;
padding: 24px 20px;
border-bottom-width: 1px;
}
/* 검색결과 없음은 공통 .list-empty-msg 사용, 하단 구분선만 스코프 추가 */
.faq-list__wrap .list-empty-msg { border-bottom: 1px solid var(--color-line); }
.faq-item__answer p {
font-size: 14px;
font-weight: 400;
line-height: 1.7;
margin: 0;
}
/* 답변 안 번호 목록(① → 1) 등)도 답변 문단과 같은 글자 크기 — .dot_list 기본 15px 대신 */
.faq-item__answer .dot_list { font-size: 14px; }
/* 답변 첨부파일 (2026-10-28) — 공용 .file-attachment(아이콘 + 파일명 한 줄) + 크기, 답변 글과 같은 14px */
.faq-item__files {
margin: 16px 0 0;
padding: 0;
list-style: none;
}
.faq-item__files li { min-width: 0; font-size: 14px; }
.faq-item__files .file-attachment { min-width: 0; color: var(--color-text); }
.faq-item__files .file-attachment:hover .file-attachment__name { text-decoration: underline; }
.faq-item__file-size { color: var(--color-text-sub); }
/* ── 페이지네이션 ── */
.faq-pagination {
padding: 40px 0;
}
/* ── 반응형 ── */
@media (max-width: 767px) {
.faq-content__inner { gap: 20px; }
/* (2026-10-29) 64px·15px 에선 네 글자(근로계약 55px)도 안쪽(43px)을 넘어 잘림 → 넓히고 13px, '/' 뒤(JSP wbr)·띄어쓰기에서 줄바꿈 */
.faq-item__cat {
width: 72px;
padding: 10px 6px;
font-size: 13px;
line-height: 1.35;
}
.faq-item__question {
padding: 0 8px;
}
.faq-item__toggle { width: 44px; }
.faq-item__answer p,
.faq-item__answer .dot_list { font-size: 12px; }
.faq-item__files li,
.faq-item__files .file-attachment__name { font-size: 12px; }
.faq-item.is-open .faq-item__answer { padding: 16px 12px; }
}
/* ────────────────────────────────────────
찾아가는 교육신청 목록 (visit-edu-list.html)
──────────────────────────────────────── */
/* vedu 필터 select 너비 */
.edu-filter__select { width: 150px; }
/* 목록 */
.edu-list__grid-wrap {
padding-top: 20px;
border-top: 3px solid var(--color-primary);
}
.edu-row {
display: flex;
align-items: stretch;
gap: 20px;
}
/* 카드: 반경/테두리는 공용 .card + .card_r18 재사용 */
.edu-card {
min-width: 0;
max-width: calc(50% - 10px);
padding: 20px 30px;
background: #fff;
display: flex;
flex-direction: column;
gap: 20px;
cursor: pointer;
transition: box-shadow 0.2s;
text-decoration: none;
}
.edu-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.edu-card--featured {
border: none;
box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.20);
}
.edu-card--featured:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.28); }
/* 뱃지 */
.edu-card__badges {
display: flex;
align-items: center;
gap: 8px;
}
.status_badge {
height: 38px;
padding: 0 20px;
border-radius: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
white-space: nowrap;
}
.status_badge_open { background: #F9841A; color: #fff; font-weight: 500; }
.status_badge_closed { background: #334155; color: #fff; font-weight: 500; }
.status_badge_org {
border: 1px solid #93C5FD;
font-weight: 400;
}
/* 카드 본문 */
.edu-card__title-bar {
height: 54px;
padding: 0 20px;
background: #F1F5F9;
}
.edu-card__title {
font-size: 15px;
font-weight: 500;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 정보 목록 */
.edu-card__info {
list-style: none;
margin: 0;
padding: 14px;
}
.edu-card__info-item {
font-size: 15px;
line-height: 1.6;
}
.edu-card__info-item::before {
content: '·';
flex-shrink: 0;
margin-right: 5px;
}
.edu-card__info-label {
color: var(--color-primary);
font-weight: 500;
margin-right: 4px;
}
/* 페이지네이션 */
.edu-pagination {
padding: 50px 0;
}
@media (max-width: 767px) {
.edu-row { flex-direction: column; }
.edu-card { padding: 16px 20px; gap: 14px; }
/* 좁은 화면에서 상태/기관 뱃지가 한 줄에 안 들어가면 줄바꿈 */
.edu-card__badges { flex-wrap: wrap; }
.status_badge { font-size: 14px; height: 32px; padding: 0 14px; }
.status_badge_org { max-width: 100%; }
.edu-card__title { font-size: 15px; }
.edu-card__info-item { font-size: 14px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.edu-filter__select { width: 120px; }
.edu-card { padding: 18px 22px; gap: 16px; }
.edu-card__title { font-size: 16px; }
.edu-card__info-item { font-size: 14px; }
.edu-card__title-bar { height: 48px; }
}
/* ────────────────────────────────────────
방문상담예약 신청이력 (visitCounselDetail)
──────────────────────────────────────── */
/* 체크박스 읽기전용: 시각은 유지하고 인터랙션만 차단 */
.counsel-detail .chk_inp {
pointer-events: none;
cursor: default;
}
/* 버튼: rental-cancel-btn / rental-submit-btn 기존 크기 그대로 사용 */
.form-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
padding-top: 32px;
}
@media (max-width: 767px) {
.form-actions { flex-direction: column; gap: 10px; }
}
/* ────────────────────────────────────────
찾아가는 교육신청 상세 (visit-edu-detail.html)
──────────────────────────────────────── */
.edu-detail-content { padding-top: 10px; }
/* 상세 카드 */
.edu-detail-card {
border: 1px solid var(--color-primary);
padding: 30px;
display: flex;
align-items: stretch;
gap: 20px;
}
/* 썸네일 — Labor_education.svg 자체에 배경·텍스트·일러스트 포함 */
.edu-detail-card__thumb {
line-height: 0;
}
.edu-detail-card__thumb-img {
width: 260px;
height: 100%;
display: block;
object-fit: cover;
}
/* 정보 영역 */
.edu-detail-card__info {
min-width: 0;
}
/* 제목 줄바꿈 허용 */
.edu-card__title--wrap {
white-space: normal;
overflow: visible;
text-overflow: unset;
}
/* 교육내용 섹션 헤더 */
.edu-detail-section__header {
margin-bottom: 12px;
}
.edu-detail-section__bullet {
width: 20px;
height: 20px;
border-radius: 50%;
border: 5px solid #F87171;
box-sizing: border-box;
}
/* 교육내용 본문 영역 */
.edu-detail-section__body {
background: #F1F5F9;
padding: 30px;
}
.edu-detail-section__text-wrap {
padding: 16px;
}
/* 첨부파일 */
/* 강사 정보 — 배정 강사 유무 안내 (visitEduApplyHistory) */
.edu-instructor__list {
list-style: none;
margin: 0;
padding: 0;
}
.edu-instructor__item {
padding: 16px;
background: #fff;
}
.file-attachment {
min-width: 0;
/* flex 아이템으로서 부모보다 넓어지지 않도록 */
max-width: 100%;
padding: 16px;
background: #fff;
text-decoration: none;
cursor: pointer;
transition: background .2s;
}
.file-attachment:hover { background: #F8FAFC; }
.file-attachment--plain { padding: 0; background: transparent; }
.file-attachment--plain:hover { background: transparent; }
.file-attachment svg { flex-shrink: 0; }
.file-attachment__name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
font-weight: 400;
}
/* 목록 버튼 */
.edu-list-btn-wrap {
padding-bottom: 20px;
}
/* 반응형 */
@media (max-width: 767px) {
.edu-detail-card { flex-direction: column; padding: 20px; }
.edu-detail-card__thumb-img { width: 100%; }
.edu-detail-section__body { padding: 16px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.edu-detail-card__thumb-img { width: 220px; }
}
/* ====================================================================
찾아가는 교육 신청내역 조회 (visitEduApplyList)
기본 표/페이지네이션은 공용 규칙 재사용
==================================================================== */
.edu-apply-table .col-num { width: 90px; }
.edu-apply-table .col-title { text-align: left; padding-left: 20px; }
.edu-apply-table .col-select { width: 130px; }
.edu-apply-table .col-done { width: 140px; }
.edu-apply-table .col-period { width: 210px; }
.edu-apply-table .col-date { width: 140px; }
.edu-apply-table__link {
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
}
.edu-apply-table__link:hover { text-decoration: underline; }
/* 선정여부 / 교육완료여부 배지는 공용 .badge(+ --outline/--outline-primary) 사용 */
.edu-apply-table .badge { min-width: 78px; }
@media (max-width: 767px) {
.edu-apply-table { table-layout: fixed; }
.edu-apply-table th,
.edu-apply-table td { font-size: 12px; height: 48px; padding: 0 6px; }
.edu-apply-table .col-title {
padding-left: 8px;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.edu-apply-table .col-period { display: none; }
.edu-apply-table .col-num { width: 40px; }
.edu-apply-table .col-select { width: 78px; }
.edu-apply-table .col-done { width: 84px; }
.edu-apply-table .badge { min-width: 60px; height: 28px; font-size: 11px; padding: 0 8px; }
}
/* ====================================================================
찾아가는 교육신청 폼 (visitEduApply)
==================================================================== */
/* 소속기관 입력 */
.edu-input--org { width: 240px; }
/* 수강인원 입력 */
.edu-input--count { width: 180px; }
/* 날짜/시간 입력 */
.edu-date-input {
min-width: 200px;
padding-right: 44px;
cursor: pointer;
}
.edu-time-input {
min-width: 180px;
padding-right: 44px;
cursor: pointer;
}
/* 교육시간 그룹 (시작 - 종료) */
.edu-time-group {
display: flex;
align-items: center;
gap: 10px;
}
/* 반응형 */
@media (max-width: 767px) {
.edu-time-group { flex-wrap: wrap; }
.edu-date-input,
.edu-time-input { min-width: 0; flex: 1; }
.edu-input--org,
.edu-input--count { width: 100%; }
}
/* ── 날짜 선택 팝업 ── */
.edu-datepick-popup {
position: fixed;
z-index: 9999;
background: #fff;
border: 1px solid var(--color-line);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
padding: 16px;
min-width: 280px;
}
/* ── 시간 선택 팝업 ── */
.edu-timepick-popup {
position: fixed;
z-index: 9999;
background: #fff;
border: 1px solid var(--color-line);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
max-height: 220px;
overflow-y: auto;
min-width: 180px;
padding: 6px 0;
}
.edu-timepick-item {
padding: 10px 20px;
cursor: pointer;
font-size: 15px;
line-height: 1.5;
color: var(--color-text);
}
.edu-timepick-item:hover { background: #F1F5F9; }
.edu-timepick-item.is-selected {
background: #EFF6FF;
color: var(--color-primary);
font-weight: 600;
}
/* ────────────────────────────────────────
홍보영상 목록 (promo-video-list.html)
──────────────────────────────────────── */
/* 검색 필터 */
/* pvideo 필터 select 너비 */
.pvl-filter__select--center { width: 200px; }
.pvl-filter__select--type { width: 120px; }
/* pvideo 입력창 최대 너비 */
.pvl-filter .list-filter__input { max-width: 460px; }
/* 목록 영역 */
/* 그리드 */
/* 행 */
.pvl-row {
display: flex;
gap: 30px;
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
margin-bottom: -1px;
padding: 30px 0;
}
.pvl-row:first-child {
border-top: 3px solid var(--color-primary);
}
/* 카드 */
.pvl-card {
width: calc((100% - 60px) / 3);
display: flex;
flex-direction: column;
gap: 20px;
cursor: pointer;
text-decoration: none;
color: inherit;
transition: opacity 0.2s;
}
.pvl-card:hover { opacity: 0.82; }
/* 썸네일: css/common.css의 .video_thumb 공용 컴포넌트 사용(재생 아이콘 오버레이 등).
목업은 .video_thumb_0~8 CSS 패턴을 썼지만, 실제 데이터는 THUMB_IMG_PATH 이미지가
있으므로 그 안에 가
스타일 없이 빈 텍스트로만 노출되던 문제 수정 */
.customoverlay {
position: relative;
bottom: 50px;
left: 0;
border-radius: 6px;
border: 0;
box-shadow: 0px 1px 2px #888;
float: left;
height: 40px;
}
.customoverlay .title {
display: block;
text-align: center;
background: #fff;
padding: 10px 15px;
font-size: 14px;
font-weight: bold;
white-space: nowrap;
}
.customoverlay:after {
content: '';
position: absolute;
margin-left: -12px;
left: 50%;
bottom: -12px;
width: 22px;
height: 12px;
background: url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png");
}
/* 기관 정보 테이블은 공통 .table_label/.table_value 사용 */
.info__link {
text-decoration: none;
}
.info__link:hover {
color: #1e40af;
}
.info__link-icon {
display: inline-block;
vertical-align: middle;
}
/* 반응형 */
@media (max-width: 767px) {
.detail__inner { padding-top: 0px; gap: 18px; }
.profile__media { height: 170px; }
.profile__card {
margin: -50px 12px 0;
flex-direction: column;
align-items: flex-start;
padding: 20px;
gap: 16px;
}
.profile__intro { flex: 0 1 auto; }
.profile__info {
width: 100%;
padding-left: 0;
padding-top: 16px;
border-left: none;
border-top: 1px solid var(--color-line);
}
.map { height: 240px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.profile__media { height: 230px; }
.profile__card { margin-top: -65px; }
}
/* ========================================================
서울시노동자종합지원기관 (slc)
======================================================== */
/* 히어로 → .sub-hero / .sub-hero__inner / .sub-hero__title */
/* 본문 래퍼 */
.support-agency-content__inner {
gap: 40px;
}
/* 섹션 */
/* 섹션 설명 문구 */
/* 문의 안내 바 */
.support-agency-inquiry {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 14px;
background: #EFF6FF;
border-radius: 10px;
padding: 14px 20px;
font-size: 14px;
line-height: 1.5;
}
@media (min-width: 1200px) {
.support-agency-inquiry { font-size: 15px; }
}
.support-agency-inquiry__label {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
color: var(--color-primary-hover);
}
.support-agency-inquiry__label::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-primary-hover);
}
.support-agency-inquiry__text a {
color: var(--color-primary-hover);
text-decoration: none;
}
/* 2열 그리드 */
.support-agency-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.support-agency-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 카드 */
.support-agency-card {
background: #fff;
overflow: hidden;
}
.support-agency-card__header {
padding: 0 20px;
min-height: 42px; /* (2026-10-28) 70 → 42 (60%), 센터찾기·쉼터찾기와 같게 */
border-bottom: 1px solid #CADDFF;
/* (2026-10-28) 제목 칸에 연한 바탕색 — 제목과 본문 구분. 색은 카드 강조색(--agency-accent)을 옅게 */
background: color-mix(in srgb, var(--agency-accent, #3B82F6) 8%, #fff);
}
/* (2026-10-28) 제목 앞 ▶ 화살표 — 센터·쉼터 그림 아이콘 대신. 모양은 SVG(ico_card_arrow.svg), 색은 강조색을 따른다 */
.support-agency-card__header::before {
content: '';
flex-shrink: 0;
width: 10px;
height: 12px;
background-color: var(--agency-accent, var(--color-primary));
-webkit-mask: url("../images/new_portal/ico_card_arrow.svg") no-repeat center / contain;
mask: url("../images/new_portal/ico_card_arrow.svg") no-repeat center / contain;
}
@media (min-width: 1200px) {
.support-agency-card__header { min-height: 48px; padding: 0 20px; } /* (2026-10-28) 80 → 48 */
}
/* (2026-10-28) 카드 제목 글자 — 센터찾기·쉼터찾기 지도 카드와 같은 19px(모바일 18px). 공용 .dot_title_xs 는 16px/15px */
.support-agency-card__header .dot_title_xs { font-size: 19px; }
@media (max-width: 767px) {
.support-agency-card__header .dot_title_xs { font-size: 18px; }
}
/* (2026-10-28) 그림 아이콘은 쓰지 않는다(▶ 화살표로 대체). 운영 DB 콘텐츠를 다시 등록하기 전에도 겹쳐 보이지 않게 숨김 */
.support-agency-card__icon {
display: none;
width: 28px;
height: auto;
}
@media (min-width: 1200px) {
.support-agency-card__icon { width: 34px; }
}
.support-agency-card__body {
padding: 18px 20px;
}
@media (min-width: 1200px) {
.support-agency-card__body { padding: 20px; }
}
.support-agency-card__list {
list-style: disc;
margin: 0;
padding: 0 0 0 18px;
}
.support-agency-card__list li {
font-size: 14px;
line-height: 1.6;
color: var(--color-text);
}
.support-agency-card__list li a {
color: var(--color-primary-hover);
text-decoration: none;
}
/* "라벨: 값" 항목 — 값이 길어 줄바꿈되면 둘째 줄을 값 시작 위치(라벨 뒤)에 맞춘다 (2026-09-30).
라벨 폭이 항목마다 달라(위치·이용시간·문의 …) 글자 폭 내어쓰기(.text-hang)로는 못 맞추므로 두 칸으로 나눈다.
목록 점(disc)을 유지하려고 li 가 아니라 안쪽 span 을 inline-flex 로 둔다 — 점은 첫 줄 기준선에 맞는다.
간격 0.28em = Noto Sans KR 공백 폭 실측(0.279em), 원래 "위치: 서울…" 과 같은 자리.
위치: 서울시 … 단계명
*/
.proc-flow__title { font-size: 16px; color: #2b55c0; }
.proc-flow > .proc-flow__item:not(:last-child)::after {
content: '';
position: absolute;
right: -1px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 30px;
background: #fff;
}
.proc-flow__arrow + .proc-flow__item::before {
content: '';
position: absolute;
left: -1px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 30px;
background: #fff;
}
@media (min-width: 1200px) {
.proc-flow__icon { width: 70px; height: 70px; }
.proc-flow__icon--lg { width: 58px; height: 58px; }
.proc-flow__item { flex-basis: 190px; min-width: 190px; }
}
.wsin-table td {
line-height: 1.6;
vertical-align: middle;
word-break: keep-all;
}
/* 767px 이하: 가로 스크롤이 아니라 완전 세로 1단으로 전환 (중간 wrap 단계 없음) */
@media (max-width: 767px) {
.proc-flow { flex-direction: column; overflow-x: visible; gap: 0; }
.proc-flow__item { flex: 1 1 auto; width: 100%; min-width: 0; }
/* 세로 1단에서도 가로 배열처럼 화살표가 상자 테두리에 겹치게 (2026-10-01 — 전에는 gap 16px 로 상자 사이 68px)
화살표 이미지(30x36)를 90° 돌리면 보이는 높이는 30px 이지만 배치 높이는 회전 전 36px 이므로,
위아래 -15px 여백으로 배치 높이를 6px 로 줄인다 → 상자 사이 6px, 위아래 상자에 12px 씩 겹침(가로와 같은 치수).
겹친 자리의 테두리는 가로와 같은 흰 조각을 윗변·아랫변 가운데에 30x3 으로 돌려 가린다 */
.proc-flow__arrow { transform: rotate(90deg); margin: -15px 0; }
.proc-flow > .proc-flow__item:not(:last-child)::after {
top: auto;
right: auto;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 3px;
}
.proc-flow__arrow + .proc-flow__item::before {
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 3px;
}
/* 세로 1단에서는 아이템끼리 높이를 맞출 상대가 없어 각자 내용 높이만큼만 차지하므로,
캡션의 2줄 예약분(min-height)이 빈 공간으로 남아 내용이 위로 쏠려 보인다.
한 줄로 꽉 찬 박스에서는 이 예약이 필요 없으니 여기서만 해제 */
.proc-flow__item:not(.proc-flow__item--tall) .dot_body_xs { min-height: 0; }
/* 2칸짜리 박스(--dual)는 두 칸을 위아래로 쌓으면 혼자 다른 박스의 2배 높이가 되므로
세로 1단에서는 두 칸을 가로로 나란히 둔다. 칸을 반씩 나눠 가지면 박스가 넓을수록
두 내용이 양끝으로 벌어지므로, 칸 폭을 150px로 고정해 가운데로 모은다
(좁은 화면에선 150px 밑으로 줄면서 캡션이 줄바꿈) */
.proc-flow__item--dual { flex-direction: row; }
.proc-flow__item--dual .proc-flow__dual-cell { flex: 0 1 150px; min-width: 0; }
/* 나란히 놓인 두 칸 중 --lg 아이콘 칸만 틀이 10px 낮아 가운데 정렬 시 아이콘·캡션이
옆 칸보다 5px 내려가므로, 틀 높이만 일반 아이콘과 맞춘다 (이미지는 contain이라 크기 그대로) */
.proc-flow__item--dual .proc-flow__icon--lg { height: 60px; }
/* --dual 박스가 있는 플로우(A1000044·A1000052)는 캡션 줄 수·아이콘 크기(--lg) 차이로
박스 높이가 제각각이라 가장 큰 박스에 맞춰 전부 같은 높이로 만든다.
자식이 박스/화살표 번갈아 오므로 grid-auto-rows '1fr auto' 반복 패턴으로
박스 행끼리만 같은 높이, 화살표 행은 제 높이 */
.proc-flow:has(> .proc-flow__item--dual) { display: grid; grid-auto-rows: 1fr auto; }
.proc-flow:has(> .proc-flow__item--dual) > .proc-flow__item { padding-top: 20px; padding-bottom: 20px; }
.proc-flow:has(> .proc-flow__item--dual) > .proc-flow__arrow { justify-self: center; }
}
/* ========================================================
아름다운청년 전태일기념관 (jtm)
======================================================== */
/* 본문 콘텐츠 래퍼 */
/* 페이지 소개 */
/* 시설 소개 섹션 */
.taeil-memorial-facility__content {
display: flex;
align-items: stretch;
gap: 28px;
}
.taeil-memorial-facility__img {
width: 320px;
display: block;
object-fit: cover;
}
/* 층별 안내 — 이미지와 항상 같은 높이로 맞춤(부모 stretch), 내용은 자연스러운 높이 + 줄 간격 확보 */
.taeil-memorial-facility__floors {
height: auto;
gap: 14px;
padding: 16px 20px;
border: 1px solid #99B9FF;
box-sizing: border-box;
}
/* flex: 0 0 auto — 고정 높이에 맞춰 늘었다 줄었다 하지 않고 항상 자기 내용만큼의 높이
align-items: flex-start — 배지를 텍스트 세로 중앙이 아니라 첫 줄 기준 상단에 맞춤 (모든 화면 폭 공통) */
.taeil-memorial-floor {
flex: 0 0 auto;
min-height: 0;
align-items: flex-start;
}
/* 층수 배지는 공용 .badge(+ --primary) 사용, 고정폭만 스코프 */
.taeil-memorial-facility__floors .badge {
width: 120px;
height: 28px;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
}
/* 반응형 */
@media (max-width: 767px) {
.taeil-memorial-facility__content { flex-direction: column; }
.taeil-memorial-facility__img { width: 100%; }
/* width: 100% — 세로 스택에서는 align-items: flex-start(가로축) 때문에 내용 기준 폭만 차지해 우측에 여백이 남으므로 강제로 꽉 채움 */
.taeil-memorial-facility__floors { width: 100%; }
.taeil-memorial-facility__floors .badge { width: 80px; font-size: 13px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.taeil-memorial-facility__img { width: 260px; }
.taeil-memorial-facility__floors .badge { width: 100px; }
}
/* ────────────────────────────────────────
감정노동 종사자 권리보호 페이지 (el)
──────────────────────────────────────── */
/* 히어로 배너 → .sub-hero / .sub-hero__inner / .sub-hero__title */
/* 탭 버튼 영역 */
.el-tabs-wrap {
position: relative;
}
.el-tabs-toggle {
display: none;
font-family: var(--font);
}
.el-tabs {
display: flex;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad-sm);
overflow-x: auto;
}
@media (min-width: 880px) {
.el-tabs { padding: 0 var(--container-pad-md); overflow-x: visible; }
}
@media (min-width: 1200px) {
.el-tabs { padding: 0 var(--container-pad-lg); }
}
/* .tab-box.tab-box--sm 공용 규칙 사용 */
@media (max-width: 879px) {
.el-tabs-wrap {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad-sm);
position: relative;
z-index: 20;
}
/* ── 드롭다운 토글 버튼 ── */
.el-tabs-toggle {
width: 100%;
min-height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 20px;
border: 1px solid var(--color-primary);
border-radius: 12px;
background: #fff;
color: #3f5486;
font-size: 15px;
font-weight: 500;
line-height: 1.35;
text-align: left;
cursor: pointer;
box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
transition: border-radius .2s ease, box-shadow .2s ease;
}
/* 열렸을 때: 아래 패널과 이어지도록 하단을 각지게 + 그림자 제거 */
.el-tabs-wrap.is-open .el-tabs-toggle {
border-radius: 12px 12px 0 0;
box-shadow: none;
}
/* 토글 라벨: 현재 탭 이름 */
.el-tabs-toggle__text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 쉐브론 아이콘 */
.el-tabs-toggle__icon {
flex: 0 0 auto;
width: 10px;
height: 10px;
border-right: 2px solid #3f5486;
border-bottom: 2px solid #3f5486;
transform: rotate(45deg);
margin-top: -5px;
transition: transform .22s ease, margin-top .22s ease;
}
.el-tabs-wrap.is-open .el-tabs-toggle__icon {
transform: rotate(225deg);
margin-top: 4px;
}
/* ── 드롭다운 패널 (문서 흐름에 포함 → 열리면 아래 콘텐츠가 밀림) ── */
.el-tabs {
position: static;
max-width: none;
display: flex;
flex-direction: column;
margin: 0;
padding: 0 6px;
overflow: hidden;
border: 1px solid transparent;
border-top: none;
border-radius: 0 0 12px 12px;
background: #fff;
box-shadow: 0 12px 24px rgba(15, 23, 42, .12);
/* 닫힘 상태: 높이 0으로 접힘 */
max-height: 0;
opacity: 0;
pointer-events: none;
transition: max-height .28s ease, opacity .2s ease, padding .28s ease, border-color .28s ease;
}
.el-tabs-wrap.is-open .el-tabs {
max-height: 460px;
opacity: 1;
padding: 6px;
border-color: var(--color-primary);
pointer-events: auto;
}
/* ── 드롭다운 항목: .tab-box 공용 규칙을 이 컨텍스트에서만 덮어씀 ── */
.el-tabs .tab-box {
position: relative;
width: 100%;
min-width: 0;
min-height: 46px;
height: auto;
justify-content: flex-start;
padding: 8px 16px;
border: none;
border-radius: 8px;
font-size: 14.5px;
font-weight: 400;
color: #334155;
text-align: left;
white-space: normal;
word-break: keep-all;
transition: background .15s ease, color .15s ease;
}
.el-tabs .tab-box:first-child { border: none; }
.el-tabs .tab-box:not(.is-active):hover { background: #F1F5F9; }
.el-tabs .tab-box.is-active {
background: #EFF6FF;
color: #3f5486;
font-weight: 500;
border: none;
}
}
/* 패널 컨테이너 */
.el-panels {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad-sm);
}
@media (min-width: 768px) {
.el-panels { padding: 0 var(--container-pad-md); }
}
@media (min-width: 1200px) {
.el-panels { padding: 0 var(--container-pad-lg); }
}
/* CMS 본문 안에 넣은 감정노동 탭(.el-tabs-embed — A1000086~092 통합 콘텐츠, 2026-10-01)
퍼블리싱 원본은 탭·패널을 페이지 최상위에 두고 각자 폭·좌우 여백을 갖지만, 본문은 이미
본문 틀(testwww .content-inner / www .nd-content)이 폭·여백을 가지므로 그 컨테이너 값을 뺀다
(안 빼면 좌우 여백이 두 번 붙는다) */
.el-tabs-embed .el-tabs,
.el-tabs-embed .el-panels {
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
@media (max-width: 879px) {
.el-tabs-embed .el-tabs-wrap {
max-width: none;
padding-left: 0;
padding-right: 0;
}
/* 드롭다운 안쪽 여백은 원래대로(닫힘 0 6px / 열림 6px — .is-open 규칙이 더 강함) */
.el-tabs-embed .el-tabs {
padding-left: 6px;
padding-right: 6px;
}
}
/* 정의 섹션 */
/* 정보 박스 (아이콘 + 설명) */
.el-info-box {
display: flex;
align-items: center;
gap: 18px;
padding: 20px 24px;
border-radius: 12px;
border: 1px solid var(--color-line);
}
/* CTA 버튼 */
/* 감정노동 CTA → .ext-link-btn .ext-link-btn--lg */
/* 직군 카드 그리드 */
.el-job-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.el-job-card {
padding: 24px 20px;
border-radius: 12px;
text-align: center;
}
.el-job-card__img {
width: 72px;
height: 72px;
object-fit: contain;
}
.el-solo-job__desc {
padding-left: 22px;
}
.el-solo-job__note {
font-size: 13px;
font-weight: 400;
color: #EF4444;
line-height: 1.6;
padding-left: 22px;
}
/* 감정노동 원인 카드 레이아웃 */
.el-cause-cards {
display: flex;
align-items: stretch;
gap: 16px;
}
.el-cause-card {
padding: 24px 12px;
}
.el-cause-card--narrow {
flex: 0 0 auto;
width: 90px;
}
.el-cause-card__icon img {
width: 72px;
height: 72px;
object-fit: contain;
}
.el-cause-card__pills {
width: 100%;
padding-top: 14px;
}
.el-cause-pill {
width: 100%;
min-height: 54px;
padding: 8px 10px;
background: #F1F5F9;
border-radius: 8px;
font-size: 14px;
font-weight: 400;
text-align: center;
line-height: 1.55;
box-sizing: border-box;
}
/* 반응형 */
@media (max-width: 767px) {
.el-info-box { flex-direction: column; align-items: flex-start; padding: 16px; }
.ext-link-btn--lg { font-size: 14px; height: 52px; padding: 0 20px; }
.el-job-cards { grid-template-columns: repeat(2, 1fr); }
.el-cause-cards { flex-direction: column; }
.el-cause-card--narrow { width: 100%; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.el-job-cards { grid-template-columns: repeat(2, 1fr); }
.el-cause-card--narrow { width: 72px; }
.el-cause-pill { font-size: 13px; }
}
/* ============================================================
감정노동 원인 패널 — 법령·Q&A·조례 섹션
============================================================ */
/* 법령 섹션 */
.el-law-box {
padding: 20px 24px;
border: 1px solid var(--color-line);
}
/* Q&A 아코디언 섹션: 스타일은 공용 .faq-list__wrap 재사용 */
/* 관련법 Q&A: 열린 상태 원형 배경색 */
.el-qa-section .faq-item.is-open .faq-item__toggle::before {
background: rgb(153, 185, 255);
}
/* 관련법 Q&A: 열린 상태 내부 기호 흰색 */
.el-qa-section .faq-item.is-open .icon-minus line {
stroke: white;
}
/* 조례 현황 섹션 */
.el-impact-row {
display: flex;
align-items: stretch;
border-bottom: 1px solid var(--color-line);
min-height: 80px;
}
.el-impact-label {
width: 130px;
text-align: center;
color: var(--color-primary);
font-size: 15px;
font-weight: 400;
line-height: 1.6;
padding: 16px 8px;
}
.el-impact-label--right {
border-left: 1px solid var(--color-line);
}
.el-impact-content {
padding: 16px 18px;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
}
.el-health-bullet {
width: 16px;
height: 16px;
border-radius: 50%;
border: 4px solid #F87171;
box-sizing: border-box;
}
.el-health-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
/* 감정노동의 부정적 영향 표: 한 행에 [제목|내용|제목|내용] 4칸 → 1023px 이하는 공간이 부족해(내용 칸 311px 이하, 4줄로 감김)
한 행에 [제목|내용] 한 쌍씩. 제목은 계속 왼쪽, 내용은 오른쪽 — 내용 칸이 줄의 나머지를 채워 뒤쪽 쌍이 다음 줄로 넘어간다.
두 번째 쌍 위에는 가로 구분선. */
@media (max-width: 1023px) {
.el-impact-row { flex-wrap: wrap; }
.el-impact-content { flex: 1 1 calc(100% - 130px); }
.el-impact-label--right { border-left: none; }
.el-impact-label--right,
.el-impact-label--right + .el-impact-content { border-top: 1px solid var(--color-line); }
}
@media (max-width: 767px) {
/* 좁은 화면은 제목 칸을 줄여 내용 칸 확보 (제목은 최대 4글자) */
.el-impact-label { width: 96px; }
.el-impact-content { flex-basis: calc(100% - 96px); }
.el-health-cards { grid-template-columns: 1fr; }
}
/* ============================================================
감정노동 현황 패널 (charts: 목업)
============================================================ */
.el-status-notes {
list-style: none;
padding: 0;
margin: 0;
}
.el-status-notes li {
font-size: 13px;
font-weight: 400;
color: #64748B;
line-height: 1.7;
}
/* 차트 그리드 */
.el-status-charts {
display: grid;
gap: 16px;
}
.el-status-charts--2 {
grid-template-columns: repeat(2, 1fr);
}
.el-status-charts--4 {
grid-template-columns: repeat(4, 1fr);
}
/* 차트 카드(테두리 박스) */
.el-chart-card {
margin: 0;
padding: 16px;
border: 1px solid var(--color-line-light);
border-radius: 6px;
background: #fff;
/* 그리드 트랙이 차트(SVG) 내부 콘텐츠 크기 이하로 줄어들 수 있도록 허용.
(min-width:auto 기본값이면 창을 좁힐 때 차트 SVG가 축소되지 않아 가로 넘침 발생) */
min-width: 0;
}
/* 차트 렌더 컨테이너 — Apache ECharts (common/js/elLaborCharts.js, 2026-10-01 Highcharts 에서 교체)
차트는 SVG 를 JS 가 그리므로 모양 값은 아래 CSS 변수로 넘긴다(elLaborCharts.js 가 읽음). 값만 바꾸면 차트에 반영된다. */
.el-chart {
position: relative;
width: 100%;
height: 320px;
min-width: 0;
overflow: hidden; /* 크기 다시 맞추는 동안 SVG가 잠깐 넘쳐도 레이아웃을 밀지 않도록 */
/* ── 차트 색상 팔레트 ──
계열/포인트에 부여한 시맨틱 클래스(.el-c--*)로 색을 지정하므로
데이터 순서가 바뀌어도 색이 어긋나지 않습니다(순서 의존 제거).
색을 바꾸려면 아래 팔레트 변수만 수정하세요. */
--el-blue: #7CB5EC;
--el-orange: #F7A35C;
--el-green: rgb(145, 209, 106);
--el-blue2: rgb(73, 147, 255);
--el-gray: #B0B7C3;
/* ── 차트 글자·선 (elLaborCharts.js 가 읽음) ── */
--el-title-size: 15px; /* 차트 제목 */
--el-title-weight: 500;
--el-title-color: var(--color-text);
--el-unit-size: 11px; /* 단위 "(단위: 천명)" */
--el-unit-color: #94A3B8;
--el-axis-label-size: 11px; /* 축 글자 */
--el-axis-label-color: #64748B;
--el-axis-line-color: #333333; /* x축 기준선 */
--el-grid-color: #E6E6E6; /* 가로 눈금선 */
--el-legend-color: #333333; /* 범례 글자 */
--el-marker-stroke: #FFFFFF; /* 꺾은선 점 테두리 */
}
.el-status-charts--4 .el-chart {
height: 300px;
--el-title-size: 13px; /* 좁은 4단 차트: 제목이 도구 아이콘과 겹치지 않도록 축소 + 좌측 정렬(JS) */
}
/* 4단 차트 카드: 제목/단위/도구 아이콘이 위로 붙도록 상단 여백 축소 */
.el-status-charts--4 .el-chart-card {
padding-top: 6px;
}
/* ── 시맨틱 색상 클래스 → 팔레트 매핑 ──
차트 계열/포인트에 부여한 .el-c--* 클래스에 색을 연결합니다.
컬럼은 fill, 꺾은선은 stroke가 적용됩니다(값 순서와 무관).
색상 그룹만 옮기면 특정 항목 색을 바꿀 수 있습니다. */
.el-chart .el-c--employed, /* 취업자수 */
.el-chart .el-c--regular, /* 상용직 */
.el-chart .el-c--male, /* 남성 */
.el-chart .el-c--direct, /* 직영 */
.el-chart .el-c--approved, /* 승인건수 */
.el-chart .el-c--stress-m { /* 스트레스 고위험군(남) */
fill: var(--el-blue);
stroke: var(--el-blue);
}
.el-chart .el-c--emotional, /* 감정노동자수(선) */
.el-chart .el-c--temp, /* 임시·일용직 */
.el-chart .el-c--female, /* 여성 */
.el-chart .el-c--partner, /* 협력사 */
.el-chart .el-c--consign, /* 위탁 */
.el-chart .el-c--applied, /* 신청건수 */
.el-chart .el-c--stress-f { /* 스트레스 고위험군(여) */
fill: var(--el-orange);
stroke: var(--el-orange);
}
.el-chart .el-c--service, /* 서비스종사(월평균) */
.el-chart .el-c--mixed, /* 혼합 */
.el-chart .el-c--approval-rate, /* 승인율(선) */
.el-chart .el-c--depress-general { /* 우울증 유병률(일반) */
fill: var(--el-green);
stroke: var(--el-green);
}
.el-chart .el-c--depress-emotional { /* 우울증 유병률(감정노동자) */
fill: var(--el-blue2);
stroke: var(--el-blue2);
}
.el-chart .el-c--suicide { /* 자살고위험군 비교 */
fill: var(--el-gray);
stroke: var(--el-gray);
}
/* 하단 안내 콜아웃(파란 박스) */
.el-status-callout {
padding: 18px 20px;
background: #EFF6FF;
border-radius: 8px;
}
.el-status-callout__icon {
width: 22px;
height: 22px;
display: inline-flex;
}
.el-status-callout__icon img {
width: 100%;
height: 100%;
}
@media (max-width: 1023px) {
.el-status-charts--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.el-status-charts--2,
.el-status-charts--4 { grid-template-columns: 1fr; }
.el-chart,
.el-status-charts--4 .el-chart { height: 280px; }
}
/* ============================================================
실천약속 패널
============================================================ */
/* 실천 약속 목록 */
.el-promise-list {
list-style: none;
padding: 0;
margin: 0;
}
.el-promise-item {
height: 64px;
padding: 0 24px;
background: #EFF6FF;
border-radius: 8px;
overflow: hidden;
}
/* 강성민원 단계별 대응 절차 */
/* 박스는 가장 긴 박스 높이에 맞춘다(stretch) — center 면 설명·제목이 한 줄 더 감기는 폭(768~900px 가로 배치)에서
그 박스만 커져 높이가 들쭉날쭉해진다. 화살표만 세로 가운데. */
.el-procedure-steps {
display: flex;
align-items: stretch;
gap: 0;
overflow-x: auto;
padding-bottom: 3px;
}
/* 테두리/반경/정렬은 공용 .step_box 재사용 */
/* 넓을 땐 채우고, 170px 밑으로는 줄지 않고 .el-procedure-steps 가로 스크롤로 처리 */
.el-procedure-step {
flex: 1 1 170px;
min-width: 170px;
padding: 24px 16px;
}
.el-procedure-step__arrow {
align-self: center;
margin: 0 -10px;
padding: 0 2px;
background: #fff;
z-index: 1;
}
.el-procedure-step__icon {
width: 64px;
height: 64px;
}
.el-procedure-step__icon img {
width: 64px;
height: 64px;
object-fit: contain;
}
.el-procedure-step__badge {
width: 100%;
height: 28px;
background: #F1F5F9;
font-size: 14px;
font-weight: 400;
color: var(--color-primary);
line-height: 1;
}
/* 세로 1단도 가로 배열과 같은 치수로 화살표를 위아래 박스 테두리에 겹친다 — 박스 사이 14px, 위아래 10px 겹침.
90° 돌린 화살표는 배치 높이 36px(이미지 30x36 의 세로)·보이는 높이 34px(이미지 폭 30 + 좌우 padding 2px) 이라
margin -11px → 박스 사이 36-22=14px, 보이는 흰 바탕이 위아래 박스 안으로 11-1=10px 들어가 테두리를 가린다. */
@media (max-width: 767px) {
.el-procedure-steps {
flex-direction: column;
gap: 0;
}
.el-procedure-step { flex: 1 1 auto; width: 100%; min-width: 0; }
.el-procedure-step__arrow {
transform: rotate(90deg);
margin: -11px 0;
}
.el-promise-item {
height: auto;
padding: 14px 18px;
}
}
/* ────────────────────────────────────────
서울시어르신돌봄종사자 종합지원센터 (ecw)
──────────────────────────────────────── */
/* 히어로 배너 → .sub-hero / .sub-hero__inner / .sub-hero__title */
/* 본문 */
.ecw-content__inner {
gap: 40px;
}
/* 페이지 소개 — elderly-care-workers/working-mom-support/living-wage-support/seg/seoul-gangso-support 공용 */
/* 지역센터 표(어르신돌봄/직장맘 공용): 라벨·값 칸은 공통 .table_label/.table_value 사용 */
.table_link {
color: #1D4ED8;
text-decoration: underline;
font-family: var(--font);
margin-right: 8px;
}
.table_link:hover { color: #1e40af; }
/* 반응형 */
@media (max-width: 767px) {
.ecw-content__inner { gap: 28px; }
}
/* ────────────────────────────────────────
서울시직장맘지원센터 페이지 (working-mom-support.html)
──────────────────────────────────────── */
/* 히어로 배너 → .sub-hero / .sub-hero__inner / .sub-hero__title */
/* 본문 */
.wms-content__inner {
gap: 40px;
}
/* 지역센터 표 스타일은 어르신돌봄 섹션의 공용 규칙 참조 */
/* 반응형 */
@media (max-width: 767px) {
.wms-content__inner { gap: 28px; }
}
/* ────────────────────────────────────────
위드유 서울직장성희롱성폭력예방센터 페이지 (with-you-center.html)
──────────────────────────────────────── */
/* 히어로 배너 */
/* 히어로 배너 → .sub-hero / .sub-hero__inner / .sub-hero__title */
/* 본문 콘텐츠 */
.harassment-prevention-content__inner {
gap: 48px;
}
/* 섹션 타이틀 */
.harassment-prevention-section__title {
margin-bottom: 20px;
line-height: 1.4;
}
/* 블록: 성희롱 정의·예방 섹션 */
/* 예방 조치 설명 */
.wyc-prevent-desc {
font-size: 15px;
line-height: 1.7;
}
.wyc-prevent-desc .wyc-fine {
color: #EF4444;
font-weight: 500;
}
/* 테이블 (성립요건 / 조치 의무): 라벨·값 칸은 공통 .table_label_wide/.table_value 사용 */
.harassment-prevention-table { margin-top: 10px; }
/* 제목:내용 칸을 50:50으로 (PC/모바일 공통, .table_kv 기본 폭 오버라이드) */
.harassment-prevention-table :where(th, td) { width: 50%; }
/* 조치 의무 표: 과태료 칸은 글자 폭만큼만, 나머지는 제목 칸이 채움 (50:50 해제)
빈 td도 50%를 받으면 열 전체가 다시 절반이 되므로 표 단위로 해제한다
(:has()는 인자 특이도를 가져가 0,2,0 → 아래 규칙도 0,2,0으로 맞추고 뒤에 둬야 이김) */
.harassment-prevention-table:has(.table_cell_end) :where(th, td) { width: auto; }
.harassment-prevention-table .table_cell_end { width: 1%; white-space: nowrap; }
/* 직장 내 괴롭힘 금지 — 과태료 강조 문구 두께 */
/* 직장 내 괴롭힘 금지 — 본문 파란 강조어 (색상만, 두께는 일반) */
/* 성희롱 유형 카드 */
.wyc-type-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.wyc-type-card {
padding: 28px 24px;
}
.wyc-type-card__icon img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.wyc-type-card__desc {
font-size: 14px;
line-height: 1.7;
text-align: left;
width: 100%;
}
.wyc-type-card__desc li {
list-style: disc;
margin-left: 16px;
margin-bottom: 4px;
}
/* 반응형 */
@media (max-width: 767px) {
.harassment-prevention-content__inner { gap: 32px; }
.wyc-type-cards { grid-template-columns: 1fr; }
}
@media (min-width: 768px) {
.wyc-type-cards { grid-template-columns: repeat(3, 1fr); }
}
/* ────────────────────────────────────────
서울형 생활입원비지원 (slw)
──────────────────────────────────────── */
/* 인트로 — 스타일은 .ecw-intro / .contact-box 공용 규칙 참조 */
/* 섹션 */
/* 하위 섹션 */
.section-block + .section-block {
border-top: 1px solid var(--color-line-light);
padding-top: 20px;
}
.rate-history-table__cell {
padding: 18px 20px;
}
/* 2026년 강조 행 */
.rate-history-table__row--highlight .rate-history-table__cell {
color: var(--color-primary);
font-weight: 500;
}
/* 레이블형 테이블(추진현황)의 라벨 칸은 공통 .table_label_center 사용 */
/* 안내 문구 */
/* ────────────────────────────────────────
서울형 이음공제
──────────────────────────────────────── */
.seg-content {
padding-bottom: 60px;
}
.seg-content__inner {
gap: 40px;
padding-top: 6px;
}
/* 인트로 — 스타일은 .ecw-intro / .contact-box 공용 규칙 참조 (contact-label만 font-weight:700 별도) */
/* 섹션 공통 */
/* 본문 머리셀 (조건·내용·금액) */
.seg-table__td--head {
background: #F8FAFC;
font-weight: 500;
}
/* 3개 카드 */
.seg-cards {
display: flex;
gap: 18px;
}
.seg-card {
padding: 30px 20px;
}
.seg-card__icon img {
width: 80px;
height: 80px;
object-fit: contain;
}
/* 안내 문구 */
/* 반응형 */
@media (max-width: 767px) {
.seg-cards {
flex-direction: column;
}
}
/* ────────────────────────────────────────
서울형 강소기업 지원 (gangso)
──────────────────────────────────────── */
/* 인트로 — 스타일은 .ecw-intro / .contact-box 공용 규칙 참조 */
/* 섹션 */
/* 사업개요 항목 목록 */
.sgs-item__body {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
/* 링크 버튼 (외부 링크 스타일) */
/* 강소기업 링크 버튼 → .ext-link-btn .ext-link-btn--md */
/* 안내 문구 */
/* 하단 버튼 그룹 → 공용 .sub-bottom-btns (「글자 끝 바로가기 버튼」 블록 아래) */
/* 반응형 */
@media (max-width: 767px) {
.sgs-item__body { flex-direction: column; gap: 10px; }
.ext-link-btn--md { white-space: normal; }
.ext-link-btn--xl { min-height: 60px; font-size: 15px; padding: 14px 20px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
.ext-link-btn--xl { font-size: 16px; padding: 0 20px; }
}
/* ────────────────────────────────────────
무료 노동법률상담 (free-legal-counsel)
──────────────────────────────────────── */
/* 레이아웃 → .content-inner .sub-content .content-inner--top 조합으로 대체 */
.flc-page-title {
margin-bottom: 8px;
line-height: 1.4;
}
.flc-btn-group {
margin-top: 4px;
}
/* 무료상담/컨설팅 링크 버튼 → .ext-link-btn */
.flc-divider {
border: none;
border-top: 1px solid var(--color-line-light);
margin: 0;
}
.flc-section-title {
line-height: 1.4;
padding-bottom: 12px;
border-bottom: 2px solid var(--color-primary);
}
/* 무료상담 도구 버튼 → .ext-link-btn .ext-link-btn--block */
/* ─────────────────────────────────────────
노동권리보호관 권리구제지원
─────────────────────────────────────────── */
/* 레이아웃 → .content-inner .sub-content .content-inner--top 조합으로 대체 */
.rights-protection-intro-links {
margin: 6px 0 0;
padding: 0;
list-style: none;
}
.rights-protection-intro-links li {
font-size: 14px;
color: #334155;
line-height: 1.7;
}
.rights-protection-intro-links a {
color: var(--color-primary);
text-decoration: none;
}
.rights-protection-intro-links a:hover {
text-decoration: underline;
}
.rps-table td.col-category {
font-weight: 500;
text-align: center;
background: #F8FAFC;
vertical-align: middle;
width: 130px;
}
/* ========================================================
경비노동자 전담 권리구제지원 (guard-worker-rights)
======================================================== */
.guard-worker-hotline-box {
display: flex;
align-items: center;
gap: 8px;
border-radius: 6px;
padding: 14px 20px;
font-size: 14px;
line-height: 1.6;
word-break: keep-all;
flex-wrap: wrap;
}
.guard-worker-hotline-box__label {
color: #EF4444;
font-weight: 500;
white-space: nowrap;
}
/* 라벨 앞 점(·)은 빨간 라벨이어도 본문 글자색 (2026-10-01)
· 신고전화 안에 넣어 선택 시 위로 들뜨는 transform을
그대로 상속하므로 들뜬 상태에서도 어긋나지 않는다 */
/* (2026-10-29 고객 요청) 한강 — 맨 아래 평평한 층(guMapSvg.jsp .gu-map__river). 구(.gu-map__path)는 같은 강 모양(폭 20.4)만큼
잘라낸 채(mask #guMapRiverCut) 그 위에 놓인다 → 구가 떠올라도 강은 그대로. 회색(20.4) 위 흰색(18)으로 양쪽 강가에 1.2 경계선.
이전의 구별 흰 강 띠(.gu-map__erase-edge)는 구와 함께 떠올라 강이 같이 움직여 보였으므로 쓰지 않는다 */
.gu-map__river { pointer-events: none; }
.gu-map__river-line { fill: none; stroke: #B8C3D1; stroke-width: 20.4; stroke-linecap: butt; stroke-linejoin: round; } /* 끝은 평평하게 — 강이 끝나는 곳엔 선 없음 */
.gu-map__river-fill { fill: none; stroke: #fff; stroke-width: 18; stroke-linecap: butt; stroke-linejoin: round; }
.gu-map__erase-edge {
fill: none;
stroke: #fff;
stroke-width: 18;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
.gu-map__label {
font-size: 22px;
font-weight: 500;
font-family: var(--font);
fill: #64748B;
text-anchor: middle;
pointer-events: none;
transform-box: fill-box;
transform-origin: center;
transition: fill .15s, font-weight .15s, font-size .15s, transform .15s;
}
/* 선택·호버 시 뜨는 입체 효과 — 참고 데모(test_map.html)와 동일한 원리로,
스케일로 키운 복제본을 "삐져나오게" 하는 방식(모양의 굴곡에 따라 옆면
두께가 제각각 달라 보이는 문제가 있었다) 대신, 도형 자체에 방향이 고정된
솔리드 drop-shadow를 여러 겹 쌓아 어떤 자치구 모양이든 항상 균일한
두께의 "옆면"이 생기게 한다. 선택된 구는 JS에서 다른 구 그룹보다 뒤(위)로
옮겨지므로, 실제로 겹치는 그림자를 써도 이웃 구에 가려지지 않는다.
호버는 같은 기법을 절반 강도로 써서 "미리보기"임이 구분되게 한다 */
.gu-map__path,
.gu-map__erase-edge {
transform-box: fill-box;
transform-origin: center;
transition: transform .15s, fill .15s, filter .15s;
}
.gu-map__group:not(.is-selected):hover .gu-map__path,
.gu-map__group:not(.is-selected):hover .gu-map__erase-edge {
transform: translateY(-4px);
}
.gu-map__group:not(.is-selected):hover .gu-map__path {
filter:
drop-shadow(0 1px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 55%, black))
drop-shadow(0 2px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 55%, black))
drop-shadow(0 3px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 55%, black))
drop-shadow(0 5px 6px rgba(15, 23, 42, .15));
}
.gu-map__group.is-selected .gu-map__path,
.gu-map__group.is-selected .gu-map__erase-edge {
transform: translateY(-8px);
}
/* 선택된 구는 색이 채워지고 위로 뜨면서 그 자체로 옆 구와 뚜렷하게
구분되므로, 간격용 흰 선(erase-edge)이 더 필요 없다 — 오히려 색이 채워진
블록 위에 흰 줄이 파여 보이는 부작용이 생겨 꺼둔다. 이웃 쪽에 남아있는
같은 경계의 erase-edge 사본은 선택된 구가 그 위로 올라오면서(z-order)
가려지므로 간격 자체는 계속 유지된다 */
.gu-map__group.is-selected .gu-map__erase-edge {
opacity: 0;
}
.gu-map__group.is-selected .gu-map__path {
fill: var(--gu-accent, var(--color-primary));
filter:
drop-shadow(0 2px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 65%, black))
drop-shadow(0 4px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 65%, black))
drop-shadow(0 6px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 65%, black))
drop-shadow(0 10px 12px rgba(15, 23, 42, .22));
}
/* 라벨(text)은 모든 지역 도형이 그려진 뒤 별도 레이어(.gu-map__labels)에 한꺼번에
그려 넣는다 — 좁고 긴 자치구(강북구 등) 라벨이 이웃 도형의 경계선(stroke)에
가려 글자가 깨져 보이는 문제를 막기 위함 */
/* 기본 크기가 22px로 올라오면서 금천구 등 좁은 자치구의 절대 상한
(약 22.6px, isPointInFill 실측 — 라벨을 어디로 옮겨도 이 이상은 불가능)
에 거의 다 붙어버려, 선택 시 "더 커 보이는" 여유가 1.8% 남짓만 남는다.
데스크톱/모바일 구분 없이 동일한 값을 쓰기로 해서(사용자 요청) 아래
font-size가 모든 화면 폭에 그대로 적용된다 — 화면 폭별로 다른 값을
또 쓰고 싶어지면 병목이 데스크톱에는 없다는 점(뷰박스 좌표라 폭과
무관)을 기억할 것 */
/* (2026-10-29) 강 층 방식 — 구는 강 모양만큼 잘라 그리고(mask), 떠오를 때의 입체 그림자는 잘린 모양 바깥(강 위)으로도
보이도록 경로가 아닌 구 묶음(.gu-map__group)에 건다(그림자를 경로에 걸면 mask 에 같이 잘린다) */
.gu-map__path { mask: url(#guMapRiverCut); }
.gu-map__erase-edge { display: none; }
.gu-map__group { transition: filter .15s; }
.gu-map__group:not(.is-selected):hover .gu-map__path,
.gu-map__group.is-selected .gu-map__path { filter: none; }
.gu-map__group:not(.is-selected):hover {
filter:
drop-shadow(0 1px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 55%, black))
drop-shadow(0 2px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 55%, black))
drop-shadow(0 3px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 55%, black))
drop-shadow(0 5px 6px rgba(15, 23, 42, .15));
}
.gu-map__group.is-selected {
filter:
drop-shadow(0 2px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 65%, black))
drop-shadow(0 4px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 65%, black))
drop-shadow(0 6px 0 color-mix(in srgb, var(--gu-accent, var(--color-primary)) 65%, black))
drop-shadow(0 10px 12px rgba(15, 23, 42, .22));
}
.gu-map__label.is-selected {
fill: #fff;
font-weight: 700;
font-size: 22.4px;
transform: translateY(-8px);
}
/* hover 시 도형 fill이 선택색으로 바뀌는 것과 짝을 맞춰, 글자색도 선택 시와
동일한 흰색으로. 도형이 -4px 뜨는 것과 같이 라벨도 따라 움직여야 글자가
도형 위에서 어긋나지 않는다 — 굵기는 선택 상태와 구분되도록 그대로 둔다 */
.gu-map__label.is-hover:not(.is-selected) {
fill: #fff;
font-size: 22.2px;
transform: translateY(-4px);
}
@media (max-width: 767px) {
.gu-map { padding: 14px; }
}
/* 카드 안 아이콘+제목 행을 카드 중앙에 정렬 */
.gu-map-page .support-agency-card__header {
--agency-accent: var(--gu-accent);
justify-content: center;
/* 카드 안 가로 구분선(공용 #CADDFF)도 테두리 색과 같게 */
border-bottom-color: var(--gu-accent);
}
.gu-map-page .support-agency-card__header .dot_title_xs {
color: var(--gu-accent);
/* 공용 .dot_title_xs(16px/모바일 15px)보다 지도 페이지 카드 제목만 3px 더 크게 */
font-size: 19px;
}
@media (max-width: 767px) {
/* 300~327px 구간에서 가장 긴 제목("서대문구 노동자종합지원센터" 등)이
고정 18px로는 2줄로 줄바꿈됨 — vw 기반 clamp로 좁은 폭에서만 더
줄어들게 하고, 350px 이상에서는 기존 18px 그대로 유지(실측
canvas measureText로 300~767px 전 구간 한 줄 유지 확인) */
.gu-map-page .support-agency-card__header .dot_title_xs {
font-size: clamp(12px, 8vw - 10px, 18px);
white-space: nowrap;
}
}
/* 센터찾기·쉼터찾기 카드 테두리도 각 페이지 타이틀과 같은 강조색으로 (공용 card_accent 파랑 대신) */
.gu-map-page--center .support-agency-card.card_accent,
.gu-map-page--shelter .support-agency-card.card_accent {
border-color: var(--gu-accent);
}
/* 지도 아래 시설 카드는 seoul-labor-support.html의 .support-agency-card/.support-agency-grid를
그대로 재사용. 다만 이 페이지는 구 대부분이 카드 1장이라 공용 repeat(2,1fr)을
그대로 쓰면 카드가 왼쪽 칸에만 붙어 지도·제목과 어긋나 보이고, 카드 2장인
구(예: 마포구)에서 2열로 보이게 하려던 auto-fit(minmax) 시도는 이 페이지의
카드 목록 컨테이너 폭이 화면 폭과 무관하게 정확히 "520px×2+20px gap=1060px"로
수렴하는 지점이 있어(넓은 화면에서 항상 여기로 귀결) 그 정확한 경계값에서
auto-fit 트랙 계산이 부동소수점 오차로 1열로 접히는 문제가 재현됨 — CSS만으로
"가용폭 기준"으로 열 수를 추론하는 방식은 이 폭 조합에서 원천적으로 불안정하다.
그래서 화면 폭이 아니라 실제 카드 "개수"(JS가 이미 알고 있음)로 열 수를
결정하도록 바꿈: 기본은 항상 폭 520px 단일 열 중앙정렬, JS가 카드 2장 이상일
때만 붙이는 .support-agency-grid--multi 클래스가 있고 화면이 768px 이상일
때만 고정 2열(520px씩)로 전환 — 폭 계산이 전혀 끼어들지 않으므로 그 경계값
문제 자체가 발생할 수 없다 */
.gu-map-page .support-agency-grid {
margin: 0 auto;
grid-template-columns: minmax(0, 520px);
justify-content: center;
}
/* [hidden] 표준 동작(display:none)이 위 display:grid 선언에 덮여 무시되던
문제 — hidden 처리된 빈 그리드가 높이 0으로도 여전히 레이아웃에 남아
상위 섹션의 gap을 하나 더 차지해, 카드가 보일 때보다 안내 문구가 보일
때 위 여백이 16px 더 벌어지는 원인이었다. 속성 선택자로 특이도를 올려
진짜로 없앤다 */
.gu-map-page .support-agency-grid[hidden] {
display: none;
}
@media (min-width: 768px) {
.gu-map-page .support-agency-grid.support-agency-grid--multi {
grid-template-columns: repeat(2, minmax(0, 520px));
}
}
.gu-map-card {
text-decoration: none;
color: inherit;
transition: box-shadow .15s, transform .15s;
}
.gu-map-card:not(.gu-map-card--empty):hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.gu-map-card--empty {
opacity: .6;
}
.gu-map-card--empty .support-agency-card__header .dot_title_xs {
color: var(--color-text-light);
}
/* 정보가 없는 구를 선택했을 때 카드 자리 대신 표시하는 안내 문구 — 별도
버튼 없이 지도 아래에 텍스트만 보여주되, 카드와 같은 톤의 테두리로 감싼다.
--gu-accent는 .gu-map-page에 이미 페이지별로 선언돼 있어(센터=파랑,
쉼터=주황) 별도 페이지 스코프 규칙 없이 그대로 상속된다 */
.gu-map-empty-msg {
width: 100%;
max-width: 520px;
margin: 0 auto;
text-align: center;
color: var(--color-text-light);
padding: 20px 24px;
font-size: 17px;
background: #fff;
border: 1px solid var(--gu-accent, var(--color-line));
border-radius: 18px;
box-sizing: border-box;
}
/* (2026-10-28) 센터찾기·쉼터찾기 좌우 2분할(≥1024): 왼쪽 지도, 오른쪽 선택한 구의 카드 목록(세로 1열).
카드가 많은 구(쉼터 강남구 5곳 등)는 오른쪽이 길어진다 — 필요하면 스크롤·페이징을 따로 검토 */
@media (min-width: 1024px) {
.gu-map-page .content-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 40px;
align-items: start;
}
.gu-map-page .support-agency-grid,
.gu-map-page .support-agency-grid.support-agency-grid--multi {
grid-template-columns: minmax(0, 1fr);
margin: 0;
}
.gu-map-page .gu-map-empty-msg {
max-width: none;
margin: 0;
}
/* (2026-10-29 고객 요청) 오른쪽 기관이 많으면(쉼터 강남구 5곳 등) 목록 높이를 지도 높이에 맞추고 안에서 스크롤.
목록을 절대 배치로 빼서 줄 높이는 지도가 정하고, 목록은 그 높이 안에서만 스크롤된다 */
.gu-map-page .content-inner > section {
position: relative;
align-self: stretch;
}
.gu-map-page .content-inner > section > .support-agency-grid {
position: absolute;
/* 마우스를 올리면 카드가 2px 떠오르고 그림자가 생긴다(.gu-map-card:hover) — 스크롤 상자에 잘리지 않게
위·왼쪽·아래로 여유를 두고, 그만큼 상자를 바깥으로 넓혀 카드 위치는 그대로 */
inset: -6px -8px -10px -10px;
padding: 6px 8px 10px 10px;
overflow-y: auto;
align-content: start;
grid-auto-rows: max-content; /* 카드(overflow:hidden)가 목록 높이에 맞춰 눌리지 않게 — 넘치면 스크롤 */
scrollbar-width: thin;
scrollbar-color: #C5CED9 transparent;
}
}
/* ════════════════════════════════════════════════════════════
노동자지원기관 "센터소개" 콘텐츠 (cnts, cntnts_id=A10000xx)
[주의] CN은 관리자가 입력한 구디자인 원본 마크업(.total_center/.slide_wrap/
.list_dep2/.table_A 등)이라 그대로 두고, selectContents.jsp의 스크립트가
렌더 직후 이 DOM을 신디자인 공용 컴포넌트로 재조립한다 — 그 결과물이
.profile/.profile__media/.profile__card/.profile__info(프로필 정보 카드),
.programs__list/.dot_block(주요 프로그램), .map(지도) 이며, 전부 shelterRent
소개 페이지 등에서 이미 쓰는 기존 클래스라 여기서 별도 CSS를 추가하지 않는다.
════════════════════════════════════════════════════════════ */
.total_center {
display: flex;
flex-direction: column;
gap: 32px;
}
/* ════════════════════════════════════════════════════════════
키오스크형 단독 화면 (.empty 레이아웃 — 헤더/푸터 없음)
QR 스캔으로 진입하는 쉼터 방문기록(shelterVisitRcord), qr 모듈 등에서 사용.
대응 목업이 없어 사이트 공용 톤(.card/.btn/.counsel-form-table 등)만으로
가운데 정렬된 단일 카드 화면을 구성한다.
════════════════════════════════════════════════════════════ */
.kiosk-page {
display: flex;
justify-content: center;
min-height: 100vh;
background: var(--color-bg-light);
padding: 40px 20px;
box-sizing: border-box;
}
.kiosk-page__inner {
width: 100%;
max-width: 480px;
}
.kiosk-page__inner--wide {
max-width: 680px;
}
.kiosk-page__header {
text-align: center;
margin-bottom: 4px;
}
.kiosk-page__btn-wrap {
margin-top: 4px;
}
.kiosk-page__footer {
text-align: center;
margin-top: 8px;
}
.kiosk-card {
padding: 24px 20px;
background: var(--color-bg);
}
.kiosk-card--complete {
padding: 40px 20px;
}
@media (max-width: 480px) {
.kiosk-page { padding: 24px 12px; }
.kiosk-card { padding: 20px 16px; }
}
/* remedyRight/selectRemedyRightQestnar.jsp — 권리구제 만족도조사(2026-10-14)
개편 전(파란 제목 띠 + 문항별 상자) 대비 질문·선택지만 남아 비어 보여, 안내 머리말 + 문항 상자(번호 배지·제목 띠)로 구성.
fieldset 은 .contents(display:contents) 라 여백은 안쪽 선택지 묶음에 준다 */
.remedy-survey__intro {
padding-bottom: 16px;
border-bottom: 2px solid var(--color-primary);
}
.remedy-survey__list {
gap: 16px;
}
.remedy-survey__q {
border: 1px solid var(--color-line);
border-radius: 12px;
overflow: hidden;
background: var(--color-bg);
}
.remedy-survey__q-tit {
padding: 14px 18px;
background: var(--color-bg-light);
border-bottom: 1px solid var(--color-line-light);
line-height: 1.5;
}
.remedy-survey__q-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-top: 1px;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.remedy-survey__q-body:not(fieldset),
.remedy-survey__q fieldset > .counsel-radio-group {
padding: 16px 18px;
}
@media (max-width: 480px) {
.remedy-survey__q-tit { padding: 12px 14px; }
.remedy-survey__q-body:not(fieldset),
.remedy-survey__q fieldset > .counsel-radio-group { padding: 14px; }
}
/* ════════════════════════════════════════════════════════════
노동통계 (cnsltStats) — Chart.js 캔버스는 그대로 두고
탭/검색폼/카드 테두리만 사이트 공용 톤으로 재구성. 대응 목업 없음.
════════════════════════════════════════════════════════════ */
.stats-tabs { gap: 8px; }
.stats-term { row-gap: 8px; }
.stats-chart-card {
border: 1px solid var(--color-line);
overflow: hidden;
}
.stats-chart-card .chart-body {
margin: 50px;
}
@media (max-width: 767px) {
.stats-chart-card .chart-body { margin: 24px 12px; }
.stats-chart-card .chart-header > div,
.stats-chart-card > div[style*="padding-left: 60px"] {
padding-left: 20px !important;
}
}
/* qr/selectQrCode.jsp — 쉼터 방문기록용 QR 안내 키오스크 화면(.kiosk-page 재사용) */
.kiosk-qr-img {
width: 220px;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
}
.kiosk-qr-img img {
max-width: 100%;
max-height: 100%;
}
/* remedyRight/selectRemedyRightPrint.jsp — 인쇄용 공식 신청서(권리보호관 도구).
병합 셀(rowspan/colspan) 구조를 유지해야 해서 counsel-form-table 대신
실제 table을 그대로 쓰고, 보더/여백만 신디자인 톤으로 맞춘다. */
.remedy-print-table {
width: 100%;
border-top: 2px solid var(--color-text);
border-collapse: collapse;
}
.remedy-print-table th,
.remedy-print-table td {
border: 1px solid var(--color-line);
padding: 12px 16px;
font-size: 14px;
color: var(--color-text);
text-align: left;
vertical-align: middle;
}
.remedy-print-table th {
background: var(--color-bg-light);
font-weight: 500;
text-align: center;
white-space: nowrap;
}
.remedy-print-table__sign {
padding: 24px 0;
}
/* instrctr/selectInstrctrConfirm.jsp — 항목명:값 2열 레이아웃 인쇄표 (같은 .remedy-print-table 재사용) */
.remedy-print-table--label-value col:first-child { width: 20%; }
/* vglbAtny/insertFormVglbAtnyBplcChck.jsp, selectVglbAtnyBplcChck.jsp — 근무형태별 근로자수 표 */
.remedy-print-table--worktype col[span] { width: 120px; }
/* vglbAtny/insertFormVglbAtnyBplcChck.jsp, selectVglbAtnyBplcChck.jsp — 사업장 점검표(점검사항) */
.remedy-print-table--inspection col:nth-child(1) { width: 140px; }
.remedy-print-table--inspection col:nth-child(2) { width: 220px; }
.remedy-print-table--inspection col:nth-child(3),
.remedy-print-table--inspection col:nth-child(4) { width: 160px; }
/* shelterEdc/selectShelterEdc.jsp — 교육 정보 요약(썸네일+메타정보) */
.shelter-edc-summary__thumb {
width: 240px;
aspect-ratio: 4/3;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-bg-light);
}
.shelter-edc-summary__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.shelter-edc-summary__body {
min-width: 260px;
}
@media (max-width: 600px) {
.shelter-edc-summary__thumb { width: 100%; }
}
/* instrctr 등 안내형 허브 페이지의 공지 카드 (.card 공용 규칙과 짝) */
.counsel-notice-box {
padding: 24px;
background: var(--color-bg-light);
}
/* 원문자(①②③...) 심볼 — (2026-11-06 부터 dot_list--num 은 CSS 동그라미 번호를 쓰므로 미사용, 정의만 남김) */
@counter-style dot-circled-num {
system: fixed;
symbols: '①' '②' '③' '④' '⑤' '⑥' '⑦' '⑧' '⑨' '⑩' '⑪' '⑫' '⑬' '⑭' '⑮' '⑯' '⑰' '⑱' '⑲' '⑳';
suffix: '';
}
/* vglbAtny 등 번호 매김 약관/안내 목록 (dot_list의 불릿을 원문자로 대체) */
/* (2026-11-06 고객 요청, A1000108 이용약관 제2조) 번호 목록이 조문 본문(.dot_body 16px)보다 작아 보이던 문제
1) 글자 크기: .dot_list 15px → 본문과 같게 16px(767px 이하 15px)
2) 번호: 사이트 글꼴(Noto Sans KR 부분 글꼴)에 ①~⑳ 글자가 없어 맑은 고딕으로 대신 그려져 작고 가늘게 보였다
→ 원문자 글자 대신 숫자를 CSS 동그라미(테두리) 안에 그린다. 글꼴과 상관없이 같은 크기·굵기.
크기: 본문 16px 일 때 동그라미 18px·숫자 12px, 767px 이하 17px·11px. 첫 줄 가운데에 맞춤(목록 줄높이 1.7 기준) */
.dot_list--num {
counter-reset: dotnum;
font-size: 16px;
}
.dot_list--num > .dot_list_item {
padding-left: 26px;
counter-increment: dotnum;
}
.dot_list--num > .dot_list_item::before {
content: counter(dotnum);
position: absolute;
left: 0;
/* 동그라미 18px(본문 16px) — 첫 줄(16px × 1.7 = 27.2px) 가운데: (27.2 - 18) / 2 */
top: 4.6px;
box-sizing: border-box;
width: 18px;
height: 18px;
border: 1px solid currentColor;
border-radius: 50%;
background: none;
transform: none;
font-size: 12px;
font-weight: 500;
/* 줄높이 14px: 16px(원 안쪽 높이)이면 Noto Sans KR 숫자가 원 중심보다 0.6~0.9px 아래로 처짐 → 14px 에서 ±0.44px 이내 (8배 확대 픽셀 측정, 2026-11-06) */
line-height: 14px;
letter-spacing: 0;
text-align: center;
text-indent: 0;
}
/* 번호 항목 안의 하위 목록(가. 1. 등)도 번호 항목과 같은 글자 크기 — .dot_list 기본 15px 를 따르면 하위 항목만 작아 보임 */
.dot_list--num .dot_list { font-size: inherit; }
@media (max-width: 767px) {
.dot_list--num { font-size: 15px; }
/* 본문 15px — 동그라미 17px, 첫 줄(25.5px) 가운데. 이 크기에서는 줄높이 15px 로 ±0.2px 이내 */
.dot_list--num > .dot_list_item::before { top: 4.25px; width: 17px; height: 17px; font-size: 11px; line-height: 15px; }
}
/* instrctr/updateFormInstrctr.jsp, updateFormInstrctrReqst.jsp, insertFormInstrctrReqst.jsp
— 강사 자격/경력 증빙서류 첨부 목록(레거시 table_B 위젯), 인라인 style 분리 */
.instrctr-file-list { list-style: none; margin: 0; padding: 0; }
#lctre col:nth-child(1), #wrc col:nth-child(1), #lcns col:nth-child(1),
#ltrry col:nth-child(1), #etc col:nth-child(1) { width: 5%; }
#lctre col:nth-child(2), #wrc col:nth-child(2) { width: 20%; }
#lctre col:nth-child(3), #wrc col:nth-child(3) { width: 40%; }
#lctre col:nth-child(4), #wrc col:nth-child(4) { width: 20%; }
#lctre col:nth-child(5), #wrc col:nth-child(5), #ltrry col:nth-child(5), #etc col:nth-child(3) { width: 15%; }
#lcns col:nth-child(2), #lcns col:nth-child(3), #lcns col:nth-child(4), #lcns col:nth-child(5) { width: 20%; }
#lcns col:nth-child(6) { width: 15%; }
#ltrry col:nth-child(2), #ltrry col:nth-child(3), #ltrry col:nth-child(4) { width: 26%; }
#etc col:nth-child(2) { width: 80%; }
.instrctr-file-list .date_inp .inp { width: 47.5%; }
.instrctr-file-list .date_inp > span { width: 5%; }
#lcns .inp, #ltrry .inp { width: 100%; }
#etc .inp { max-width: 100%; }
/* (2026-10-14) X-12 모바일에서 증빙 표가 화면 밖으로 넘치고 입력칸이 2~3글자 폭으로 좁아지던 문제
— 표를 .table_wrap(가로 스크롤)으로 감싸고, 좁은 화면에서만 표에 최소 폭을 줘 칸 폭 확보 */
@media (max-width: 767px) {
.instrctr-table-scroll .table_B { min-width: 640px; }
.instrctr-table-scroll #lcns { min-width: 720px; }
.instrctr-table-scroll #etc { min-width: 480px; }
}
/* .upload-one-file-btn(강사 신청 파일선택)은 공용 버튼 btn_outline_muted btn_sm 으로 맞춤 — 높이 43px 별도 규칙 삭제 (2026-10-03) */
/* 고른 파일명(.file-name)·등록된 파일(.file-name-1) 옆 '삭제'도 공용 버튼(btn_outline_muted btn_sm) — 파란 밑줄 글자 규칙 대체 (2026-10-03)
.file-name 은 처음엔 인라인 display:none, JS show() 가 인라인을 지우면 아래 inline-flex 로 보인다 */
.file-name, .file-name-1 { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 100%; }
.file-name-1 > a:not(.btn) { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
/* 파일첨부 드래그드롭 표(#fileTableTbody) 액션 컬럼 — instrctr 외 edcGroup/remedyRight/pssrpBsns 등에서도 공용 */
#fileTableTbody col:last-child { width: 120px; }
.upload-btn-wrapper input[type="file"] { width: 100%; }
/* cnts/fragments/A1000122_body.jsp — dot_list_item 텍스트에 바로 이어지는 .table_wrap
(stack gap이 적용 안 되는 li 안이라 별도 상단 여백 필요) */
.table_wrap--in-list { margin-top: 20px; }
/* instrctr/selectInstrctr.jsp, selectInstrctrReqst.jsp — 강사 자격/경력 조회(읽기전용) 표.
updateForm 쪽과 #lctre 등 id를 공유하지만 체크박스 열이 없어 컬럼 구성이 달라
.instrctr-view-table을 같이 줘서 구분한다. */
#lctre.instrctr-view-table col:nth-child(1),
#wrc.instrctr-view-table col:nth-child(1) { width: 20%; }
#lctre.instrctr-view-table col:nth-child(2),
#wrc.instrctr-view-table col:nth-child(2) { width: 40%; }
#lctre.instrctr-view-table col:nth-child(3),
#wrc.instrctr-view-table col:nth-child(3),
#lctre.instrctr-view-table col:nth-child(4),
#wrc.instrctr-view-table col:nth-child(4) { width: 20%; }
#lcns.instrctr-view-table col { width: 20%; }
#ltrry.instrctr-view-table col:nth-child(1),
#ltrry.instrctr-view-table col:nth-child(2),
#ltrry.instrctr-view-table col:nth-child(3) { width: 26%; }
#ltrry.instrctr-view-table col:nth-child(4) { width: 20%; }
#etc.instrctr-view-table col:nth-child(1) { width: 80%; }
#etc.instrctr-view-table col:nth-child(2) { width: 20%; }
/* cnsltStats/selectStatsListCnsltStats.jsp — 상담 통계 차트 숫자 표시 영역 */
.chart-stat-row { color: #1c3d90; padding-left: 60px; }
.chart-stat-row--top { padding-top: 50px; }
.chart-loc, .chart-title, .chart-data { font-size: 30px; }
.chart-data-stand, .chart-yoy { font-size: 20px; }
.chart-yoy_yymm { font-size: 17px; }
.chart-data-md {
margin-left: 3px;
width: 120px;
height: 50px;
color: #fff;
text-align: center;
font-size: 20px;
font-weight: bold;
display: inline-block;
background-image: url('/common/images/statistics_arrow_up.png');
background-size: 100% 100%;
}
.chart-data-yoy { padding-top: 10px; }
/* ══════════════════════════════════════════════════════════
[복원] 퍼블리싱 신규본 교체 시 되살린 블록 (2026-09-28 최초, 2026-09-29 재적용)
신규본에는 아래 규칙들이 빠져 있다. 신규본이 갈라져 나온 베이스에 아직
반영되지 않은 것들로 보이며, 교체 때마다 다시 넣어야 한다.
셋 다 JSP 소스에서는 검색되지 않는다 — 통합관리시스템 DB 에 저장된
콘텐츠(cnts) HTML 이 쓰는 규칙이라 소스 검색으로 사용처가 잡히지 않기 때문.
(콘텐츠에