안»에서 로드된다
(시트 26번 · ownerNode 부모 = DIV). head 의 이 파일(23번)보다 «항상 뒤»라
동률·저특정도로는 절대 못 이긴다. 색·배경·테두리·라운딩 = 전부 «시각 속성»이라 브릿지 규칙 안이다.
폰트와 H2 색은 `!important` «없이» 이긴다(실측) — 붙이지 않는다.
⚠️ 이미지 2장(ico_sv_goto2.png · ico_recomm.png)은 파란 계열로 «남는다» — CSS 로 색이 안 바뀐다. */
#subMain h2, #subMain h3, #subMain h4{ font-family:var(--jb-font-display); }
#subMain .header.sm01 h2{ color:var(--jb-brand); }
#subMain .header .pg_info strong{ color:var(--jb-brand) !important; }
#subMain .step_wrap .item_wrap > a .dummy_btn{
background:var(--jb-brand) !important;
border-radius:var(--jb-r-pill) !important; /* 운영 4px → pill. 버튼이 155×44 라 실효 22px */
}
#subMain .header .sv_goto{ border-color:var(--jb-brand) !important; }
#subMain .recomm{ background:var(--jb-brand) !important; }
/* ▼ D283 (2026-09-27) — 자소서첨삭 타이틀 폰트 · 「신청하기」 색·라운딩.
사용자 지시 = 「타이틀 폰트와 신청하기 버튼의 색 및 라운딩 «만»」. 다른 색·다른 버튼은 «일부러» 두었다.
★ 본문 = #page-content.coverletter — 🔴 취업진단의 #subMain 이 «아니다»(이 화면엔 #subMain 이 없다).
화면마다 본문 컨테이너가 다르므로 D282 의 셀렉터를 옮겨 쓰지 않는다.
★ 범위 = 자소서첨삭 «4화면»이 이 컨테이너를 공유한다(mainList · introductionPassPage ·
mainEduceGuideList · mainEduceList). 타이틀 폰트는 4화면에 걸린다 — 같은 서비스라 의도한 범위다.
버튼(conserting_btn)은 «2화면»뿐이다(둘 다 「신청하기」).
🟢 `!important` 를 «쓰지 않는다» — D282 와 «반대»다. 경쟁 규칙이 `button{background-color:initial}`
`button{border-radius:…}` 뿐이라 요소 셀렉터다(실측으로 그냥 이긴다).
D282 에 !important 가 붙은 것은 submain.css 가 «
안»에서 로드되던 «그 화면의» 사정이었다.
⚠️ #_downWriteBtn(「자기소개서 작성하기」)은 «문구가 다른 버튼»이라 파란색·r17px 그대로 둔다. */
#page-content.coverletter h1, #page-content.coverletter h2,
#page-content.coverletter h3, #page-content.coverletter h4,
#page-content.coverletter h5{ font-family:var(--jb-font-display); }
#page-content.coverletter #_upperWriteBtn.conserting_btn{
background:var(--jb-brand);
border-color:var(--jb-brand);
border-radius:var(--jb-r-pill);
}
/* ▼ D285 (2026-09-27) — AI 역량검사 타이틀 폰트 «만». 개편 대상 밖 · 정본 퍼블 없음.
★ 본문 = main.aiAbility — 🔴 취업진단 #subMain · 자소서첨삭 #page-content.coverletter 와 «또» 다르다.
화면마다 반드시 확인한다. main.aiAbility 를 쓰는 JSP 는 aiMainList.jsp «한 곳»(전수 grep).
🟢 !important 불요(실측). 색·크기는 손대지 않는다 — 폰트만. */
main.aiAbility h1, main.aiAbility h2, main.aiAbility h3,
main.aiAbility h4, main.aiAbility h5{ font-family:var(--jb-font-display); }
/* ▼ D286 (2026-09-27) — 잡학사전 «탭 제목»만. 사용자가 범위를 직접 골랐다.
★ 메인 「잡학사전」은 이미지(job_dic_top_tit.png)라 폰트를 못 바꾼다. 그래서 물었고
「탭 제목만」(정책 꿀팁 · 취업 꿀팁 30px)으로 확정됐다. QUICK SERVICE · 카드 제목은 «범위 밖».
🔴 button.group_Tab 은 화면에 «6개»다 — 큰 탭 2(.job_dic_tab) + 카테고리 4(.def_tab_new · 20px).
클래스만으로 걸면 카테고리까지 바뀐다. 조상 .job_dic_tab 이 «반드시» 필요하다.
⚠️ 이 화면 카테고리는 기본 폰트가 Spoqa Han Sans 다 — 「그대로」의 기준값이 화면마다 다르다. */
.job_dic_tab .group_Tab, .job_dic_tab .group_Tab span{ font-family:var(--jb-font-display); }
/* ▼ D287 (2026-09-27) — 공지·Q&A·FAQ 탭 폰트.
🔴 범위 주의 — nav-tabs 는 36벌 · tag_search_wrap 은 23벌이고 «온라인 채용관»을 포함한다.
채용관은 이벤트와 같은 취급(공통 레이아웃만)이라 «건드리면 안 된다».
한정자 : nav-tabs «tab-n3» = hpdsk 6벌 전용 · .container.m_layout .tag_search_wrap = hpdsk 5벌.
채용관은 tab-n3 가 없고 container1 계열이라 둘 다 안 걸린다(전수 grep 확인). */
.nav-tabs.tab-n3 a{ font-family:var(--jb-font-display); }
/* ▼ D288 (2026-09-27) — 이벤트 목록 타이틀.
★ h2.ev_tit 는 «이벤트 목록 + 사이트맵» 2벌에 걸린다. eventInfo 캠페인 3벌은 #theme .ev_tit /
span.ev_tit / lev_tit 이라 «h2.ev_tit 가 아니다» → 범위 밖 캠페인은 안 걸린다.
사이트맵(「전체서비스」)은 함께 바뀐다 — 같은 h2 라 그대로 둔다(사용자에게 알렸다). */
h2.ev_tit{ font-family:var(--jb-font-display); }
/* ▼ D287 · D288 공통 — 검색/초기화 버튼.
🔴 `!important` «필수» — 운영 layout.css 가 `.btn_blue{ background·border·border-color … !important }`
로 «먼저» 선언한다(실측). D283 의 「안 붙인다」를 여기 옮기면 안 된다. 전부 시각 속성이다.
★ 위계를 만든다 — 지금은 검색·초기화가 «둘 다 파란 채움»이라 구분이 없다.
검색 = 브랜드 채움 / 초기화 = 아웃라인. 클래스 이름 btn_blue_line 자체가 «아웃라인» 의도였다.
🔴 버튼은 컨테이너로 못 좁힌다 — .ct_box.m_layout 이 100벌 넘고, tag_search_wrap 과의 조합에도
«마이페이지 rqtst·scrap»이 걸린다. 마이페이지는 정본 확정 단계(18)라 바뀌면 정본 1:1 이 깨진다.
그래서 :has(> h2.ev_tit) 로 «이 화면만» 잡는다. :has 선례 = D281 · D271 · 정본 .jb-ddaylist. */
/* 🔴 D301 (2026-09-27) — 위 셀렉터(`.btn_g .btn.btn_blue`)가 «두 가지»를 놓쳤다.
㉠ 상세의 「목록」은 .btn_g «밖»이다.
ntc/dtl : div.tag_search_wrap«.view_b_btn» > button.btn.btn_blue.btn-lg.fr
qna/dtl : 🔴 div«.board_btn_btm».view_b_btn > button.btn.btn_blue.btn-lg.fr
⚠️ 지시서는 둘 다 tag_search_wrap 이라고 봤으나 Q&A 는 board_btn_btm 이다(실측 정정).
➡️ 두 벌을 한 번에 잡는 공통 갈고리는 «.view_b_btn» 이다.
㉡ Q&A «상세»의 「초기화」는 class 가 `btn` «하나뿐»이다(목록 화면의 초기화는 btn_blue_line).
★ 범위 실측 (2026-09-27 · 전수 grep)
.container.m_layout ∩ tag_search_wrap = hpdsk 5벌 (faq/list · ntc/list · ntc/dtl · qna/list · qna/dtl)
.container.m_layout ∩ view_b_btn = hpdsk 2벌 (ntc/dtl · qna/dtl) ← 「목록」 딱 그 둘
🔴 view_b_btn 은 전체 5벌이고 «채용관 exhb/qnaDtl · 마이페이지 noticeDtl · 테마 nesDtaDtl»이 섞여 있다.
.container.m_layout 한정자가 셋을 모두 떨어뜨린다 — 채용관은 container1, 나머지 둘은 m_layout 이 없다.
(채용관·마이페이지는 각각 범위 밖 · 정본 확정 단계 18 이라 바뀌면 안 된다.)
★ 「글쓰기」(qna/list)는 .board_btn_btm.ar 이라 안 걸린다 · 「삭제·수정」(qna/dtl)은 btn_blue 가 없어 안 걸린다. */
/* 1) 라운딩 — 이 영역의 대상 버튼 전부(초기화 두 형태 + 목록 포함) */
.container.m_layout .tag_search_wrap .btn_g .btn,
.container.m_layout .view_b_btn .btn.btn_blue,
.ct_box.m_layout:has(> h2.ev_tit) .tag_search_wrap .btn_g .btn{
border-radius:var(--jb-r-pill) !important;
}
/* 2) 채움 — 검색 · 조회 · 「목록」
★ 「목록」을 채움으로 두는 이유 = 상세에서 목록으로 돌아가는 것이 그 화면의 «주 동작»이고
종전에도 파란 채움이었다. 아웃라인으로 낮추면 위계가 바뀐다(설계와 합의 · D301). */
.container.m_layout .tag_search_wrap .btn_g .btn.btn_blue,
.container.m_layout .view_b_btn .btn.btn_blue,
.ct_box.m_layout:has(> h2.ev_tit) .tag_search_wrap .btn_g .btn.btn_blue{
background:var(--jb-brand) !important;
border-color:var(--jb-brand) !important;
color:#fff !important;
}
/* 3) 아웃라인 — 초기화 «두 형태»
㉠ .btn_blue.btn_blue_line (ntc/list · qna/list · faq/list)
㉡ .btn «하나뿐» (qna/dtl)
★ ㉠ 은 2) 와 클래스 수가 같아 «순서»로 이긴다 — 이 블록이 뒤에 있어야 한다. */
.container.m_layout .tag_search_wrap .btn_g .btn.btn_blue.btn_blue_line,
.container.m_layout .tag_search_wrap .btn_g .btn:not(.btn_blue),
.ct_box.m_layout:has(> h2.ev_tit) .tag_search_wrap .btn_g .btn.btn_blue.btn_blue_line,
.ct_box.m_layout:has(> h2.ev_tit) .tag_search_wrap .btn_g .btn:not(.btn_blue){
background:#fff !important;
color:var(--jb-brand) !important;
border-color:var(--jb-brand) !important;
}