@charset "utf-8";
/* ============================================================
   경기프리웨이 2027 — 서브페이지 공용 시트
   ------------------------------------------------------------
   · main_2027.css 의 디자인 토큰(--g27-*)을 그대로 상속한다.
     이 파일은 반드시 main_2027.css 뒤에 로드되어야 한다.
   · 스코프는 body.g27-sub 이다.
   · body 에 .g27-legacy 가 함께 붙어 있으면(= 아직 2027 로 옮기지 않은 본문)
     레거시 마크업을 건드리지 않도록 본문 관련 규칙은 스스로 물러난다.
     헤더·서브상단·LNB·푸터는 폴백 화면에서도 2027 로 보인다.
   ============================================================ */

/* ------------------------------------------------------------
   0. 폴백 화면 보정
      레거시 시트(contents.css)가 .contentsarea 에 자체 여백·폭을 잡아둔다.
      2027 래퍼와 겹쳐 이중 여백이 생기므로 폴백일 때만 래퍼를 투명하게 만든다.
   ------------------------------------------------------------ */
.g27-legacy .g27-content > .g27-inner { max-width: none; padding: 0; }

/* ------------------------------------------------------------
   1. 서브 상단 — 배경사진 대신 타이포
      기존 .subtoparea sub1~8 은 메뉴 UUID 로 배경을 갈아끼웠다.
      UUID 는 서버마다 다르고 메뉴 개편 때 깨지므로 쓰지 않는다.
   ------------------------------------------------------------ */
.g27-sub .g27-subtop {
	position: relative; overflow: hidden;
	padding: 46px 0 40px;
	background: var(--g27-t50);
	border-bottom: 1px solid var(--g27-t100);
}
/* 메인 히어로의 도로 모티브를 아주 옅게 반복 — 메인과 같은 계열이라는 신호만 준다 */
.g27-sub .g27-subtop::after {
	content: ""; position: absolute; right: -60px; bottom: -90px;
	width: 260px; height: 260px; border-radius: 50%;
	background: var(--g27-t100); opacity: .55; pointer-events: none;
}
.g27-sub .g27-subtop__eyebrow {
	margin-top: 10px; font-size: 14px; font-weight: var(--g27-w-bold);
	color: var(--g27-primary-deep); letter-spacing: -0.01em;
}
.g27-sub .g27-subtop__title {
	position: relative; z-index: 1;
	margin-top: 12px;
	font-size: var(--fs-disp, 32px); font-weight: var(--g27-w-black);
	letter-spacing: -0.04em; line-height: 1.25; color: var(--g27-heading);
}

/* 브레드크럼 — 기존 nav 태그가 <li><a> 를 뱉는다 */
.g27-sub .g27-crumb { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.g27-sub .g27-crumb ul,
.g27-sub .g27-crumb li { display: inline-flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.g27-sub .g27-crumb li + li::before,
.g27-sub .g27-crumb .home + li::before {
	content: ""; width: 5px; height: 5px; margin: 0 4px;
	border-top: 1.4px solid var(--g27-c400); border-right: 1.4px solid var(--g27-c400);
	transform: rotate(45deg);
}
.g27-sub .g27-crumb a, .g27-sub .g27-crumb span {
	font-size: 12px; color: var(--g27-text-sub); text-decoration: none;
}
.g27-sub .g27-crumb a:hover { color: var(--g27-primary-deep); text-decoration: underline; }
.g27-sub .g27-crumb .home {
	display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
	background: no-repeat center/contain;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10l9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/></svg>");
}

/* ------------------------------------------------------------
   2. LNB — 형제 메뉴 탭
      기존은 부트스트랩 드롭다운이었다. 2027 은 가로 탭으로 펼친다.
   ------------------------------------------------------------ */
.g27-sub .g27-lnb { background: #fff; border-bottom: 1px solid var(--g27-line); position: sticky; top: 0; z-index: 100; }
.g27-sub .g27-lnb__list {
	display: flex; align-items: stretch; gap: 2px; list-style: none; margin: 0; padding: 0;
	overflow-x: auto; scrollbar-width: none;
}
.g27-sub .g27-lnb__list::-webkit-scrollbar { display: none; }
.g27-sub .g27-lnb__list > li { flex: 0 0 auto; }
/* 메뉴 태그(gbn=sub)는 <a> 가 아니라 <button> 을 뱉는다 — 둘 다 같은 탭 모양으로.
   (a 만 잡혀 있어서 버튼이 맨텍스트로 깨져 보이던 문제 수정) */
.g27-sub .g27-lnb__list a,
.g27-sub .g27-lnb__list button {
	position: relative; display: inline-flex; align-items: center; height: 52px; padding: 0 18px;
	font-size: 14px; color: var(--g27-text-sub); white-space: nowrap; text-decoration: none;
	background: transparent; border: 0; cursor: pointer; font-family: inherit; line-height: 1;
	transition: color var(--g27-dur-1);
}
.g27-sub .g27-lnb__list a::after,
.g27-sub .g27-lnb__list button::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 2px 2px 0 0;
	background: var(--g27-primary); transform: scaleX(0); transform-origin: center;
	transition: transform var(--g27-dur-2) var(--g27-ease-out);
}
.g27-sub .g27-lnb__list a:hover,
.g27-sub .g27-lnb__list button:hover { color: var(--g27-heading); }
.g27-sub .g27-lnb__list li.on > a,    .g27-sub .g27-lnb__list li.on > button,
.g27-sub .g27-lnb__list li.active > a, .g27-sub .g27-lnb__list li.active > button,
.g27-sub .g27-lnb__list a.on {
	color: var(--g27-primary-deep); font-weight: var(--g27-w-bold);
}
.g27-sub .g27-lnb__list li.on > a::after,    .g27-sub .g27-lnb__list li.on > button::after,
.g27-sub .g27-lnb__list li.active > a::after, .g27-sub .g27-lnb__list li.active > button::after,
.g27-sub .g27-lnb__list a.on::after { transform: scaleX(1); }
/* 탭이 0~1개면 바 자체를 접는다 — 항목만 숨기면 1px 경계선이 남아 지저분하다 */
.g27-sub .g27-lnb:not(:has(.g27-lnb__list li + li)) { display: none; }

/* ------------------------------------------------------------
   3. 본문 영역
   ------------------------------------------------------------ */
.g27-sub .g27-content { padding: 44px 0 88px; background: #fff; min-height: 40vh; }

/* 페이지 안 섹션 제목 */
.g27-sub .g27-page-head { margin-bottom: 22px; }
.g27-sub .g27-page-head h2 {
	font-size: 24px; font-weight: var(--g27-w-black); letter-spacing: -0.035em; color: var(--g27-heading);
}
.g27-sub .g27-page-head p { margin-top: 8px; font-size: 14px; color: var(--g27-text-sub); line-height: 1.6; }

/* ------------------------------------------------------------
   4. 검색바
   ------------------------------------------------------------ */
.g27-sub .g27-searchbar {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 16px; margin-bottom: 20px;
	background: var(--g27-c50); border: 1px solid var(--g27-line-soft); border-radius: var(--g27-r-lg);
}
/* 높이는 공용 폼 규칙(§7)과 같은 44px — 버튼과 한 줄에서 어긋나지 않게 */
.g27-sub .g27-searchbar select,
.g27-sub .g27-searchbar input[type="text"] {
	height: 44px; padding: 0 12px; border: 1px solid var(--g27-line); border-radius: var(--g27-r-sm);
	font-size: 14px; background: #fff; color: var(--g27-heading);
}
.g27-sub .g27-searchbar input[type="text"] { flex: 1 1 240px; min-width: 0; }
.g27-sub .g27-searchbar select { min-width: 120px; }
.g27-sub .g27-searchbar input:focus,
.g27-sub .g27-searchbar select:focus { border-color: var(--g27-primary); outline: none; box-shadow: 0 0 0 3px rgba(0,146,162,.14); }

/* ------------------------------------------------------------
   5. 버튼
   ------------------------------------------------------------ */
.g27-sub .g27-btn2 {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 44px; padding: 0 20px; border-radius: var(--g27-r-sm);
	font-size: 14px; font-weight: var(--g27-w-bold); text-decoration: none;
	border: 1px solid var(--g27-line); background: #fff; color: var(--g27-heading);
	transition: background var(--g27-dur-1), border-color var(--g27-dur-1), color var(--g27-dur-1), transform var(--g27-dur-1);
}
.g27-sub .g27-btn2:hover { background: var(--g27-c50); border-color: var(--g27-c300); }
.g27-sub .g27-btn2:active { transform: scale(.98); }
.g27-sub .g27-btn2.primary { background: var(--g27-primary); border-color: var(--g27-primary); color: #fff; }
.g27-sub .g27-btn2.primary:hover { background: var(--g27-primary-deep); border-color: var(--g27-primary-deep); }
.g27-sub .g27-btn2.ghost { background: transparent; }
.g27-sub .g27-btn2.sm { height: 34px; padding: 0 13px; font-size: 12px; }
.g27-sub .g27-btnrow { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.g27-sub .g27-btnrow.right { justify-content: flex-end; }
.g27-sub .g27-btnrow.between { justify-content: space-between; }

/* ------------------------------------------------------------
   6. 표 — 목록형 / 정의형
   ------------------------------------------------------------ */
.g27-sub .g27-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--g27-heading); }
.g27-sub .g27-table th,
.g27-sub .g27-table td { padding: 14px 12px; border-bottom: 1px solid var(--g27-line-soft); font-size: 14px; }
.g27-sub .g27-table thead th { background: var(--g27-c50); font-weight: var(--g27-w-bold); color: var(--g27-heading); white-space: nowrap; }
.g27-sub .g27-table tbody tr { transition: background var(--g27-dur-1); }
.g27-sub .g27-table tbody tr:hover { background: var(--g27-t50); }
.g27-sub .g27-table td.subj { text-align: left; }
.g27-sub .g27-table td.subj a { color: var(--g27-heading); text-decoration: none; font-weight: var(--g27-w-medium); }
.g27-sub .g27-table td.subj a:hover { color: var(--g27-primary-deep); text-decoration: underline; }
.g27-sub .g27-table .num, .g27-sub .g27-table .date, .g27-sub .g27-table .hit { text-align: center; color: var(--g27-text-sub); white-space: nowrap; }

/* 정의형(가로 라벨) — 상세·폼에서 쓴다 */
.g27-sub .g27-dl { width: 100%; border-collapse: collapse; border-top: 2px solid var(--g27-heading); }
.g27-sub .g27-dl th {
	width: 180px; padding: 14px 16px; text-align: left; vertical-align: top;
	background: var(--g27-c50); border-bottom: 1px solid var(--g27-line-soft);
	font-size: 14px; font-weight: var(--g27-w-bold); color: var(--g27-heading);
}
.g27-sub .g27-dl td { padding: 14px 16px; border-bottom: 1px solid var(--g27-line-soft); font-size: 14px; line-height: 1.7; }
.g27-sub .g27-dl th .req { color: #d93025; margin-left: 3px; }
/* 입력폼으로 쓰일 때 — 폼요소에 폭이 없으면 브라우저 기본폭(~200px)이라 미완성처럼 보인다.
   td 직계만 잡는다: g27-telrow·g27-daterow 등 안쪽 flex 행은 자기 규칙(flex-basis)을 쓴다 */
.g27-sub .g27-dl td > input[type="text"], .g27-sub .g27-dl td > input[type="password"],
.g27-sub .g27-dl td > input[type="tel"], .g27-sub .g27-dl td > input[type="email"],
.g27-sub .g27-dl td > input[type="number"] { width: 100%; max-width: 560px; }
.g27-sub .g27-dl td textarea { width: 100%; }
.g27-sub .g27-dl td > select { min-width: 180px; max-width: 560px; }

/* ------------------------------------------------------------
   7. 폼 요소
   ------------------------------------------------------------ */
/* [2026-08-11] 입력창 크기가 제각각인 문제 정리 — 한 줄 컨트롤은 전부 44px 로 통일한다
   (버튼 .g27-btn2 도 44px 이라 검색줄에서 select·input·button 이 딱 맞는다).
   ⚠ 선택자를 `body.` 로 시작하는 이유: main_2027.css 의 리셋
     `body.g27 select { font-size: inherit }` 가 특이도 (0,1,2) 라
     `.g27-sub select` (0,1,1) 를 이겨서 **select 만 16px·48px** 로 떠 있었다.
     input[type=text] 는 속성선택자 덕에 (0,2,1) 이라 14px 이 먹혀서, 같은 줄에서
     42(input) / 44(button) / 48(select) 세 높이가 섞였다. body 를 붙여 (0,2,1) 이상으로 올린다.
     → 이 블록의 `body.g27-sub` 접두어는 지우지 말 것. */
body.g27-sub input[type="text"], body.g27-sub input[type="password"], body.g27-sub input[type="tel"],
body.g27-sub input[type="email"], body.g27-sub input[type="number"], body.g27-sub input[type="date"],
body.g27-sub select {
	height: 44px; max-width: 100%; padding: 0 12px;
	border: 1px solid var(--g27-line); border-radius: var(--g27-r-sm);
	font-size: 14px; font-family: inherit; color: var(--g27-heading); background: #fff;
	transition: border-color var(--g27-dur-1), box-shadow var(--g27-dur-1);
}
body.g27-sub textarea {
	max-width: 100%; padding: 12px; border: 1px solid var(--g27-line); border-radius: var(--g27-r-sm);
	font-size: 14px; font-family: inherit; color: var(--g27-heading); background: #fff;
	transition: border-color var(--g27-dur-1), box-shadow var(--g27-dur-1);
}
.g27-sub textarea { min-height: 140px; line-height: 1.7; resize: vertical; }
.g27-sub input:focus, .g27-sub select:focus, .g27-sub textarea:focus {
	border-color: var(--g27-primary); outline: none; box-shadow: 0 0 0 3px rgba(0,146,162,.14);
}
.g27-sub input[disabled], .g27-sub select[disabled], .g27-sub textarea[disabled] {
	background: var(--g27-c50); color: var(--g27-text-sub); cursor: not-allowed;
}
.g27-sub .g27-help { margin-top: 6px; font-size: 12px; color: var(--g27-text-sub); line-height: 1.6; }
.g27-sub .g27-err  { margin-top: 6px; font-size: 12px; color: #d93025; }

/* ------------------------------------------------------------
   8. 페이징
   ------------------------------------------------------------ */
.g27-sub .g27-paging { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 34px; flex-wrap: wrap; }
.g27-sub .g27-paging a, .g27-sub .g27-paging strong, .g27-sub .g27-paging span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--g27-r-xs);
	font-size: 14px; color: var(--g27-text-sub); text-decoration: none;
	transition: background var(--g27-dur-1), color var(--g27-dur-1);
}
.g27-sub .g27-paging a:hover { background: var(--g27-c50); color: var(--g27-heading); }
.g27-sub .g27-paging strong, .g27-sub .g27-paging .on {
	background: var(--g27-primary); color: #fff; font-weight: var(--g27-w-bold);
}

/* 서버(NavigatorInfo.getPaggingWeb)가 뱉는 실제 페이징 마크업 —
   <div class="paging"> 안의 <button> 들. 화살표 버튼(btn-paging-*)은 레거시 CSS 에서
   배경이미지로 그리던 것이라, 전환 페이지에서는 빈 버튼으로 보였다 → 글리프로 그린다 */
.g27-sub .paging {
	display: flex; align-items: center; justify-content: center; gap: 4px;
	margin-top: 34px; flex-wrap: wrap;
}
.g27-sub .paging button, .g27-sub .paging a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding: 0 8px; border: 0; border-radius: var(--g27-r-xs);
	background: transparent; font-size: 14px; color: var(--g27-text-sub);
	text-decoration: none; cursor: pointer;
	transition: background var(--g27-dur-1), color var(--g27-dur-1);
}
.g27-sub .paging button:hover, .g27-sub .paging a:hover { background: var(--g27-c50); color: var(--g27-heading); }
.g27-sub .paging .on { background: var(--g27-primary); color: #fff; font-weight: var(--g27-w-bold); cursor: default; }
.g27-sub .paging .btn-paging-first::before { content: "\00AB"; }
.g27-sub .paging .btn-paging-pre::before   { content: "\2039"; }
.g27-sub .paging .btn-paging-next::before  { content: "\203A"; }
.g27-sub .paging .btn-paging-last::before  { content: "\00BB"; }
.g27-sub .paging .btn-paging-first::before,
.g27-sub .paging .btn-paging-pre::before,
.g27-sub .paging .btn-paging-next::before,
.g27-sub .paging .btn-paging-last::before { font-size: 16px; line-height: 1; }
/* 이동할 곳이 없는 화살표(onclick 없이 렌더됨)는 흐리게 */
.g27-sub .paging button:not([onclick]):not(.on) { opacity: .35; cursor: default; }
.g27-sub .paging button:not([onclick]):not(.on):hover { background: transparent; color: var(--g27-text-sub); }
/* 데스크톱에선 web 페이징(w_flex_only)만, 모바일에선 mobile 페이징(m_flex_only)만 —
   컨트롤러가 두 벌을 내려주고 레거시 시트가 이 클래스로 토글하던 것을 이어받는다 */
.g27-sub .paging.m_flex_only { display: none; }
@media (max-width: 768px) {
	.g27-sub .paging.w_flex_only { display: none; }
	.g27-sub .paging.m_flex_only { display: flex; }
}

/* ------------------------------------------------------------
   9. 빈 상태 / 알림
   ------------------------------------------------------------ */
.g27-sub .g27-empty {
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	padding: 64px 20px; text-align: center; color: var(--g27-text-sub); font-size: 14px;
	background: var(--g27-c50); border-radius: var(--g27-r-lg);
}
.g27-sub .g27-empty svg { width: 40px; height: 40px; color: var(--g27-c300); }
.g27-sub .g27-note {
	padding: 14px 16px; border-radius: var(--g27-r-sm); font-size: 14px; line-height: 1.7;
	background: var(--g27-t50); border: 1px solid var(--g27-t100); color: var(--g27-primary-deep);
}

/* ------------------------------------------------------------
   9-1. 게시판 목록 (web_2027/bdmg)
   ------------------------------------------------------------
   표 자체는 .g27-table 을 그대로 쓰고, 제목칸 안의 배지·아이콘만 여기서 잡는다.
   공지행은 배경으로, 답글행은 들여쓰기 화살표로 구분한다.
   ------------------------------------------------------------ */
.g27-sub .g27-board tbody tr.is-notice { background: var(--g27-t50); }
.g27-sub .g27-board tbody tr.is-notice:hover { background: var(--g27-t100); }
.g27-sub .g27-board tbody tr.is-reply td.subj { padding-left: 34px; position: relative; }
.g27-sub .g27-board tbody tr.is-reply td.subj::before {
	content: ""; position: absolute; left: 14px; top: 18px;
	width: 8px; height: 8px; border-left: 1.5px solid var(--g27-c300); border-bottom: 1.5px solid var(--g27-c300);
}
.g27-sub .g27-board__title { display: flex; align-items: center; gap: 7px; min-width: 0; }
.g27-sub .g27-board__title a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 글머리 — 통합 게시판에서 분류를 제목 앞 [공지]·[일감] 형태로 보여 준다(2026-08-11 고객의견 ④).
   별도 '카테고리' 열을 쓰지 않으므로 목록이 좁아지지 않는다. */
.g27-sub .g27-board__cate {
	flex: none; font-style: normal; font-size: var(--fs-sm);
	font-weight: var(--g27-w-bold); color: var(--g27-primary-strong); white-space: nowrap;
}
.g27-sub .g27-board__new {
	flex: none; height: 18px; padding: 0 6px; border-radius: 999px;
	background: var(--g27-accent, var(--g27-primary)); color: #fff;
	font-size: 12px; font-weight: var(--g27-w-black); font-style: normal; line-height: 18px; letter-spacing: .02em;
}
.g27-sub .g27-board__cmt {
	flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
	background: var(--g27-c100); color: var(--g27-c500);
	font-size: 12px; font-weight: var(--g27-w-bold); line-height: 20px; text-align: center;
}
.g27-sub .g27-board__lock { flex: none; width: 15px; height: 15px; color: var(--g27-text-sub); }
.g27-sub .g27-board__clip { width: 17px; height: 17px; color: var(--g27-text-sub); vertical-align: middle; }
.g27-sub .g27-board td.cate, .g27-sub .g27-board td.att, .g27-sub .g27-board td.scrap { text-align: center; }
.g27-sub .g27-board td.cell { text-align: center; color: var(--g27-text-sub); }
.g27 .g27-badge.is-done { background: var(--g27-t100); color: var(--g27-primary-deep); }

/* ------------------------------------------------------------
   9-2. 게시글 상세 (web_2027/bdmg)
   ------------------------------------------------------------ */
.g27-sub .g27-post { border-top: 2px solid var(--g27-heading); }
.g27-sub .g27-post__head { position: relative; padding: 22px 0 16px; border-bottom: 1px solid var(--g27-line-soft); }
.g27-sub .g27-post__eyebrow {
	margin-bottom: 6px; font-size: 12px; font-weight: var(--g27-w-black);
	letter-spacing: .08em; text-transform: uppercase; color: var(--g27-primary);
}
.g27-sub .g27-post__title {
	font-size: 24px; font-weight: var(--g27-w-bold); line-height: 1.45;
	letter-spacing: -0.03em; color: var(--g27-heading); word-break: keep-all;
}
.g27-sub .g27-post__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.g27-sub .g27-post__meta li { position: relative; font-size: 12px; color: var(--g27-text-sub); }
.g27-sub .g27-post__meta li + li::before {
	content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
	width: 1px; height: 11px; background: var(--g27-line);
}
.g27-sub .g27-post__scrap { position: absolute; top: 22px; right: 0; }
.g27-sub .g27-post__files { padding: 16px 18px; margin-top: 16px; background: var(--g27-c50); border-radius: var(--g27-r-sm); }
.g27-sub .g27-post__files-t { margin-bottom: 8px; font-size: 12px; font-weight: var(--g27-w-bold); color: var(--g27-heading); }
.g27-sub .g27-post__files li + li { margin-top: 6px; }
.g27-sub .g27-post__files a { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--g27-primary-deep); }
.g27-sub .g27-post__files a:hover { text-decoration: underline; }
.g27-sub .g27-post__files svg { flex: none; width: 15px; height: 15px; }
.g27-sub .g27-post__body { padding: 28px 2px 32px; }
.g27-sub .g27-post__video { margin-bottom: 18px; }
.g27-sub .g27-post__video iframe, .g27-sub .g27-post__video video { width: 100%; max-width: 100%; aspect-ratio: 16/9; height: auto; border: 0; }
.g27-sub .g27-post.is-answer { margin-top: 34px; border-top-color: var(--g27-primary); background: var(--g27-t50); padding: 0 20px 4px; }

/* 본문 HTML 은 관리자가 에디터로 넣은 것 — 최소한의 읽기 스타일만 준다.
   [2026-08-11] 기본꼴(문단 여백·목록 번호/불릿·링크 밑줄)은 :where() 로 특이도를 0으로 낮춘다.
   소개 페이지처럼 자체 스타일을 가진 디자인 콘텐츠(.pfi 등)가 들어오면
   그쪽 규칙이 항상 이기고, 맨 HTML 만 넣은 일반 게시글에는 종전과 똑같이 입혀진다.
   (이걸 높은 특이도로 두면 디자인 콘텐츠의 절차 흐름도에 브라우저 기본 번호 1. 2. 3. 이
    함께 찍히는 사고가 난다 — 실제로 났던 사고다) */
.g27-sub .g27-prose { font-size: 14px; line-height: 1.85; color: var(--g27-text); word-break: keep-all; }
.g27-sub .g27-prose img { max-width: 100%; height: auto; }
	/* 특이도 설계 : 공용 리셋(body.g27 li = 0,0,1,2)과 '동률'로 맞춰 로드 순서(main → sub)로 이기고,
	   디자인 콘텐츠의 인라인 <style> 은 같은 동률에서 가장 나중이라 다시 이긴다.
	   → 일반 게시글 = 불릿·번호·밑줄 정상 / .pfi 콘텐츠 = 자기 디자인만 */
:where(.g27-sub) .g27-prose p { margin: 0 0 14px; }
.g27-sub .g27-prose a { color: var(--g27-primary-deep); text-decoration: underline; }
:where(.g27-sub) .g27-prose table { max-width: 100%; }
:where(.g27-sub) .g27-prose ul, :where(.g27-sub) .g27-prose ol { margin: 0 0 14px 18px; }
:where(.g27-sub) .g27-prose ul li { list-style: disc; }
:where(.g27-sub) .g27-prose ol li { list-style: decimal; }

/* 버튼줄 좌우 배치 */
.g27-sub .g27-btnrow__l, .g27-sub .g27-btnrow__r { display: inline-flex; gap: 8px; flex-wrap: wrap; }

/* 이전글 / 다음글 */
.g27-sub .g27-pnnav { margin-top: 34px; border-top: 1px solid var(--g27-line-soft); }
.g27-sub .g27-pnnav__item {
	display: flex; align-items: center; gap: 16px; padding: 15px 4px;
	border-bottom: 1px solid var(--g27-line-soft); color: var(--g27-text);
}
.g27-sub .g27-pnnav__item:hover { background: var(--g27-c50); }
.g27-sub .g27-pnnav__lbl {
	flex: none; width: 66px; font-size: 12px; font-weight: var(--g27-w-bold); color: var(--g27-text-sub);
}
.g27-sub .g27-pnnav__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }

/* 부트스트랩 모달 최소 스타일
   전환 페이지에는 bootstrap.css 가 없다. 여는 쪽은 bootstrap.min.js 가 그대로 하고
   (display:block 을 인라인으로 넣는다), 보이는 모양만 여기서 잡는다. */
.g27-sub .g27-modal { display: none; position: fixed; inset: 0; z-index: 1050; overflow-y: auto; }
.g27-sub .g27-modal .popup {
	width: min(420px, calc(100% - 32px)); margin: 14vh auto 40px; padding: 26px 24px 22px;
	background: #fff; border-radius: var(--g27-r-lg); box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.g27-sub .g27-modal .password_box p { margin-bottom: 12px; font-size: 14px; color: var(--g27-heading); }
.g27-sub .g27-modal .g27-btnrow { margin-top: 18px; }
.g27-sub .modal-backdrop { position: fixed; inset: 0; z-index: 1040; background: #000; }
.g27-sub .modal-backdrop.in { opacity: .45; }
.g27-sub .g27-field + .g27-field { margin-top: 10px; }
.g27-sub .g27-field input { width: 100%; }

/* ------------------------------------------------------------
   9-3. 목록 상단바 · 정렬 · 카드형 목록 (일감정보 등)
   ------------------------------------------------------------ */
.g27-sub .g27-listbar {
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	padding: 12px 2px; border-bottom: 1px solid var(--g27-line-soft);
}
.g27-sub .g27-listbar__cnt { font-size: 14px; color: var(--g27-text-sub); }
.g27-sub .g27-listbar__cnt strong { color: var(--g27-primary-deep); font-weight: var(--g27-w-bold); }
.g27-sub .g27-listbar__cnt span { margin-left: 4px; font-size: 12px; }

/* 정렬 — 라디오를 세그먼트 컨트롤처럼 */
.g27-sub .g27-sort { display: flex; gap: 4px; }
.g27-sub .g27-sort input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.g27-sub .g27-sort label {
	display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
	border-radius: 999px; font-size: 12px; color: var(--g27-text-sub); cursor: pointer;
	transition: background var(--g27-dur-1), color var(--g27-dur-1);
}
.g27-sub .g27-sort label:hover { background: var(--g27-c50); color: var(--g27-heading); }
.g27-sub .g27-sort input:checked + label { background: var(--g27-heading); color: #fff; font-weight: var(--g27-w-bold); }
.g27-sub .g27-sort input:focus-visible + label { outline: 2px solid var(--g27-primary); outline-offset: 2px; }

/* 카드형 목록 */
.g27-sub .g27-joblist { display: grid; gap: 12px; margin-top: 16px; }
.g27-sub .g27-jobcard {
	position: relative; border: 1px solid var(--g27-line-soft); border-radius: var(--g27-r-lg);
	background: #fff; transition: border-color var(--g27-dur-1), box-shadow var(--g27-dur-1), transform var(--g27-dur-1);
}
.g27-sub .g27-jobcard:hover { border-color: var(--g27-c300); box-shadow: var(--g27-sh-2); transform: translateY(-2px); }
.g27-sub .g27-jobcard__link { display: block; padding: 18px 56px 18px 20px; color: inherit; }
.g27-sub .g27-jobcard__top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.g27-sub .g27-jobcard__date { font-size: 12px; color: var(--g27-text-sub); }
.g27-sub .g27-jobcard__title {
	font-size: 16px; font-weight: var(--g27-w-bold); line-height: 1.5; letter-spacing: -0.025em;
	color: var(--g27-heading); word-break: keep-all;
}
.g27-sub .g27-jobcard:hover .g27-jobcard__title { color: var(--g27-primary-deep); }
.g27-sub .g27-jobcard__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.g27-sub .g27-jobcard__meta li { position: relative; font-size: 12px; color: var(--g27-text-sub); }
.g27-sub .g27-jobcard__meta li + li::before {
	content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
	width: 1px; height: 11px; background: var(--g27-line);
}
.g27-sub .g27-jobcard__keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.g27-sub .g27-chip.sm { height: 24px; padding: 0 10px; font-size: 12px; }
.g27-sub .g27-joblist__empty { list-style: none; }

/* 좋아요 — 체크박스를 하트 토글로. input 은 접근성을 위해 남기고 화면에서만 숨긴다 */
.g27-sub .g27-jobcard__like { position: absolute; top: 14px; right: 14px; z-index: 2; }
.g27-sub .g27-jobcard__like input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.g27-sub .g27-jobcard__like label {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
	font-size: 0; color: var(--g27-c300);
	background: no-repeat center/17px 17px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6bec9' stroke-width='2'%3E%3Cpath d='M12 20.5l-7.1-7a4.4 4.4 0 1 1 6.2-6.2l.9.9.9-.9a4.4 4.4 0 1 1 6.2 6.2z'/%3E%3C/svg%3E");
	transition: background-color var(--g27-dur-1);
}
.g27-sub .g27-jobcard__like label:hover { background-color: var(--g27-c50); }
.g27-sub .g27-jobcard__like input:checked + label {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e2544c' stroke='%23e2544c' stroke-width='2'%3E%3Cpath d='M12 20.5l-7.1-7a4.4 4.4 0 1 1 6.2-6.2l.9.9.9-.9a4.4 4.4 0 1 1 6.2 6.2z'/%3E%3C/svg%3E");
}
.g27-sub .g27-jobcard__like input:focus-visible + label { outline: 2px solid var(--g27-primary); outline-offset: 2px; }

/* 상세 공통 보조 — 상태칩 줄 · 첨부 목록 · 본문 소제목 */
.g27-sub .g27-post__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.g27-sub .g27-post__period { font-size: 12px; color: var(--g27-text-sub); }
.g27-sub .g27-post__like { position: absolute; top: 18px; right: 0; }
.g27-sub .g27-filelist li + li { margin-top: 6px; }
.g27-sub .g27-filelist a { display: inline-flex; align-items: center; gap: 7px; color: var(--g27-primary-deep); }
.g27-sub .g27-filelist a:hover { text-decoration: underline; }
.g27-sub .g27-filelist svg { flex: none; width: 15px; height: 15px; }
.g27-sub .g27-section + .g27-section { margin-top: 30px; }
.g27-sub .g27-section__t {
	margin-bottom: 12px; padding-left: 11px; position: relative;
	font-size: 16px; font-weight: var(--g27-w-bold); letter-spacing: -0.025em; color: var(--g27-heading);
}
.g27-sub .g27-section__t::before {
	content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
	background: var(--g27-primary); border-radius: 2px;
}

/* 검색 패널 (강의 목록 등 상단 가로형 검색) */
.g27-sub .g27-searchpanel { padding: 16px 18px; background: var(--g27-c50); border-radius: var(--g27-r-lg); }
.g27-sub .g27-searchpanel__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.g27-sub .g27-searchpanel__lbl { flex: none; font-size: 12px; font-weight: var(--g27-w-bold); color: var(--g27-heading); }
.g27-sub .g27-searchpanel__row input[type="text"] { flex: 1 1 280px; min-width: 0; background: #fff; }
.g27-sub .g27-searchpanel__keys:empty { display: none; }
.g27-sub .g27-searchpanel__keys { margin-top: 10px; font-size: 12px; color: var(--g27-text-sub); }
.g27-sub .g27-listbar__note { font-size: 12px; color: var(--g27-text-sub); }

/* 카드 그리드 (강의 갤러리) */
.g27-sub .g27-cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 18px; }
.g27-sub .g27-cardgrid__empty { grid-column: 1 / -1; list-style: none; }
.g27-sub .g27-vcard {
	position: relative; border: 1px solid var(--g27-line-soft); border-radius: var(--g27-r-lg);
	background: #fff; overflow: hidden;
	transition: border-color var(--g27-dur-1), box-shadow var(--g27-dur-1), transform var(--g27-dur-1);
}
.g27-sub .g27-vcard:hover { border-color: var(--g27-c300); box-shadow: var(--g27-sh-2); transform: translateY(-3px); }
.g27-sub .g27-vcard__link { display: block; color: inherit; }
.g27-sub .g27-vcard__thumb {
	aspect-ratio: 16 / 10; background-color: var(--g27-c100);
	background-size: contain; background-repeat: no-repeat; background-position: center;
}
.g27-sub .g27-vcard__body { padding: 15px 16px 17px; }
.g27-sub .g27-vcard__title {
	font-size: 14px; font-weight: var(--g27-w-bold); line-height: 1.5; letter-spacing: -0.025em;
	color: var(--g27-heading); word-break: keep-all;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.g27-sub .g27-vcard:hover .g27-vcard__title { color: var(--g27-primary-deep); }
.g27-sub .g27-vcard__lect { margin-top: 7px; font-size: 12px; color: var(--g27-text-sub); }
.g27-sub .g27-vcard__keys { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.g27-sub .g27-vcard__like { position: absolute; top: 10px; right: 10px; z-index: 2; }
.g27-sub .g27-vcard__like label { background-color: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

/* ------------------------------------------------------------
   9-5. 두 갈래 선택 카드 · 단계 필터 · 진행 단계 (법률상담)
   ------------------------------------------------------------ */
.g27-sub .g27-choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.g27-sub .g27-choice__item {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 30px 24px 24px; border: 1px solid var(--g27-line-soft); border-radius: var(--g27-r-lg); background: #fff;
}
.g27-sub .g27-choice__ico {
	width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
	margin-bottom: 14px; border-radius: 50%; background: var(--g27-t50); color: var(--g27-primary);
}
.g27-sub .g27-choice__ico svg { width: 27px; height: 27px; }
.g27-sub .g27-choice__t { font-size: 16px; font-weight: var(--g27-w-bold); color: var(--g27-heading); }
.g27-sub .g27-choice__d { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--g27-text-sub); word-break: keep-all; }
.g27-sub .g27-choice__item .g27-btnrow { margin-top: 18px; width: 100%; }

/* 단계별 건수 필터 */
.g27-sub .g27-stepfilter__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.g27-sub .g27-stepfilter__list > li > a {
	display: flex; flex-direction: column; justify-content: space-between; gap: 10px; height: 100%;
	padding: 16px 14px; border: 1px solid var(--g27-line-soft); border-radius: var(--g27-r-lg);
	background: #fff; color: var(--g27-text-sub);
	transition: border-color var(--g27-dur-1), background var(--g27-dur-1), color var(--g27-dur-1);
}
.g27-sub .g27-stepfilter__list > li > a:hover { border-color: var(--g27-c300); background: var(--g27-c50); }
.g27-sub .g27-stepfilter__t { font-size: 12px; line-height: 1.5; word-break: keep-all; }
.g27-sub .g27-stepfilter__list .num { font-size: 24px; font-weight: var(--g27-w-black); color: var(--g27-heading); }
.g27-sub .g27-stepfilter__list > li.active > a {
	border-color: var(--g27-primary); background: var(--g27-primary); color: #fff;
}
.g27-sub .g27-stepfilter__list > li.active .num { color: #fff; }

/* 진행 단계 표시 — 현재 단계까지 채운다 */
.g27-sub .g27-steps { display: flex; gap: 0; margin-bottom: 26px; }
.g27-sub .g27-steps > li {
	position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
	text-align: center;
}
.g27-sub .g27-steps > li::before {
	content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--g27-line);
}
.g27-sub .g27-steps > li:first-child::before { display: none; }
.g27-sub .g27-steps > li.done::before { background: var(--g27-primary); }
.g27-sub .g27-steps__dot {
	position: relative; z-index: 1;
	width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; background: #fff; border: 2px solid var(--g27-line);
	font-size: 12px; font-weight: var(--g27-w-bold); color: var(--g27-text-sub);
}
.g27-sub .g27-steps > li.done .g27-steps__dot { background: var(--g27-primary); border-color: var(--g27-primary); color: #fff; }
.g27-sub .g27-steps > li.active .g27-steps__dot { box-shadow: 0 0 0 4px var(--g27-t100); }
.g27-sub .g27-steps__t { font-size: 12px; line-height: 1.5; color: var(--g27-text-sub); word-break: keep-all; }
.g27-sub .g27-steps > li.active .g27-steps__t { color: var(--g27-heading); font-weight: var(--g27-w-bold); }

/* 인증(로그인·찾기) 카드 */
.g27-sub .g27-authbox {
	width: min(430px, 100%); margin: 10px auto 0; padding: 32px 30px 30px;
	border: 1px solid var(--g27-line-soft); border-radius: var(--g27-r-lg); background: #fff;
}
.g27-sub .g27-authbox__t { font-size: 24px; font-weight: var(--g27-w-bold); color: var(--g27-heading); text-align: center; }
.g27-sub .g27-authbox__d { margin: 8px 0 22px; font-size: 12px; color: var(--g27-text-sub); text-align: center; word-break: keep-all; }
.g27-sub .g27-authbox__field + .g27-authbox__field { margin-top: 12px; }
.g27-sub .g27-authbox__field label {
	display: block; margin-bottom: 6px; font-size: 12px;
	font-weight: var(--g27-w-bold); color: var(--g27-heading);
}
.g27-sub .g27-authbox__field input { width: 100%; }
.g27-sub .g27-authbox__submit { width: 100%; margin-top: 20px; height: 46px; font-size: 14px; }
.g27-sub .g27-authbox__links {
	display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin-top: 18px;
	padding-top: 16px; border-top: 1px solid var(--g27-line-soft);
}
.g27-sub .g27-authbox__links button {
	position: relative; padding: 4px 12px; background: none; border: 0; cursor: pointer;
	font-size: 12px; color: var(--g27-text-sub);
}
.g27-sub .g27-authbox__links button:hover { color: var(--g27-primary-deep); text-decoration: underline; }
.g27-sub .g27-authbox__links button + button::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 1px; height: 11px; background: var(--g27-line);
}

/* 댓글 */
.g27-sub .g27-cmt { padding: 16px 2px; border-bottom: 1px solid var(--g27-line-soft); }
.g27-sub .g27-cmt.reply { padding-left: 30px; background: var(--g27-c50); }
.g27-sub .g27-cmt__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.g27-sub .g27-cmt__re { width: 15px; height: 15px; color: var(--g27-c300); }
.g27-sub .g27-cmt__meta { display: flex; gap: 6px 14px; flex: 1 1 auto; }
.g27-sub .g27-cmt__meta li { position: relative; font-size: 12px; color: var(--g27-text-sub); }
.g27-sub .g27-cmt__meta li:first-child { font-weight: var(--g27-w-bold); color: var(--g27-heading); }
.g27-sub .g27-cmt__meta li + li::before {
	content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
	width: 1px; height: 10px; background: var(--g27-line);
}
.g27-sub .g27-cmt__btns { display: flex; gap: 5px; }
.g27-sub .g27-cmt__body { margin-top: 8px; font-size: 14px; line-height: 1.75; color: var(--g27-text); word-break: break-word; white-space: pre-line; }
.g27-sub .g27-cmt__edit { margin-top: 10px; }
.g27-sub .g27-cmt__edit textarea { width: 100%; min-height: 90px; }
.g27-sub .g27-cmt__editbtns { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.g27-sub .g27-cmt__editbtns .byte { margin-right: auto; }

/* 요약형(썸네일 가로) 목록 — 게시판 요약형 */
.g27-sub .g27-smylist { display: grid; gap: 12px; margin-top: 14px; }
.g27-sub .g27-smylist__empty { list-style: none; }
.g27-sub .g27-smycard {
	border: 1px solid var(--g27-line-soft); border-radius: var(--g27-r-lg); background: #fff; overflow: hidden;
	transition: border-color var(--g27-dur-1), box-shadow var(--g27-dur-1), transform var(--g27-dur-1);
}
.g27-sub .g27-smycard:hover { border-color: var(--g27-c300); box-shadow: var(--g27-sh-2); transform: translateY(-2px); }
.g27-sub .g27-smycard__link { display: flex; gap: 18px; padding: 16px; color: inherit; }
.g27-sub .g27-smycard__thumb {
	flex: none; width: 160px; aspect-ratio: 4 / 3; border-radius: var(--g27-r-sm);
	background-color: var(--g27-c100); background-size: cover; background-position: center;
}
.g27-sub .g27-smycard__body { flex: 1 1 auto; min-width: 0; }
.g27-sub .g27-smycard__title {
	font-size: 16px; font-weight: var(--g27-w-bold); line-height: 1.5; letter-spacing: -0.025em;
	color: var(--g27-heading); word-break: keep-all;
}
.g27-sub .g27-smycard:hover .g27-smycard__title { color: var(--g27-primary-deep); }
.g27-sub .g27-smycard__sum {
	margin-top: 7px; font-size: 14px; line-height: 1.7; color: var(--g27-text-sub); word-break: keep-all;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.g27-sub .g27-smycard__meta { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 10px; }
.g27-sub .g27-smycard__meta li { position: relative; font-size: 12px; color: var(--g27-text-sub); }
.g27-sub .g27-smycard__meta li + li::before {
	content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
	width: 1px; height: 10px; background: var(--g27-line);
}
@media screen and (max-width: 720px) {
	.g27-sub .g27-smycard__link { gap: 12px; padding: 12px; }
	.g27-sub .g27-smycard__thumb { width: 96px; }
}

/* 프로필 카드 (프리랜서 목록) */
.g27-sub .g27-pcard__photo {
	aspect-ratio: 4 / 3; background-color: var(--g27-c100);
	background-size: contain; background-repeat: no-repeat; background-position: center;
}
.g27-sub .g27-pcard__dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin-top: 9px; }
.g27-sub .g27-pcard__dl dt { font-size: 12px; color: var(--g27-text-sub); white-space: nowrap; }
.g27-sub .g27-pcard__dl dd { font-size: 12px; color: var(--g27-text); word-break: keep-all; }

/* 칩 줄 (분야·분류 필터) — 일감·계약서·FAQ 공용 */
.g27-sub .g27-chiprow { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 6px; }
.g27-sub .g27-chiprow .cat_btn,
.g27-sub .leco_category .cat_btn {
	display: inline-flex; align-items: center; height: 33px; padding: 0 14px;
	font-size: 12px; line-height: 1.4; white-space: nowrap; word-break: keep-all;
	color: var(--g27-text); background: #fff;
	border: 1px solid var(--g27-line); border-radius: 999px; cursor: pointer;
	transition: background var(--g27-dur-1), border-color var(--g27-dur-1), color var(--g27-dur-1);
}
.g27-sub .g27-chiprow .cat_btn:hover,
.g27-sub .leco_category .cat_btn:hover { background: var(--g27-c50); border-color: var(--g27-c300); }
.g27-sub .g27-chiprow .cat_btn[data-selected="selected"],
.g27-sub .leco_category .cat_btn[data-selected="selected"] {
	background: var(--g27-primary); border-color: var(--g27-primary); color: #fff; font-weight: var(--g27-w-bold);
}

/* FAQ 목록 */
.g27-sub .g27-faqlist { border-top: 2px solid var(--g27-heading); margin-top: 14px; }
.g27-sub .g27-faqlist > li { border-bottom: 1px solid var(--g27-line-soft); }
.g27-sub .g27-faqlist__link { display: flex; align-items: center; gap: 13px; padding: 17px 6px; color: var(--g27-text); }
.g27-sub .g27-faqlist__link:hover { background: var(--g27-c50); }
.g27-sub .g27-faqlist__q {
	flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--g27-t100); color: var(--g27-primary-deep);
	font-size: 12px; font-weight: var(--g27-w-black);
}
.g27-sub .g27-faqlist__t { flex: 1 1 auto; font-size: 14px; line-height: 1.55; word-break: keep-all; }
.g27-sub .g27-faqlist__link:hover .g27-faqlist__t { color: var(--g27-primary-deep); }
.g27-sub .g27-faqlist__arw { flex: none; width: 17px; height: 17px; color: var(--g27-c300); }

/* 외부 링크형 문서 목록 (표준계약서) */
.g27-sub .g27-doclist { display: grid; gap: 10px; margin-top: 16px; }
.g27-sub .g27-doclist__item {
	width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
	padding: 16px 18px; background: #fff; cursor: pointer;
	border: 1px solid var(--g27-line-soft); border-radius: var(--g27-r-lg);
	transition: border-color var(--g27-dur-1), box-shadow var(--g27-dur-1), transform var(--g27-dur-1);
}
.g27-sub .g27-doclist__item:hover { border-color: var(--g27-c300); box-shadow: var(--g27-sh-2); transform: translateY(-2px); }
.g27-sub .g27-doclist__ico {
	flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--g27-r-sm); background: var(--g27-t50); color: var(--g27-primary);
}
.g27-sub .g27-doclist__ico svg { width: 21px; height: 21px; }
.g27-sub .g27-doclist__txt { flex: 1 1 auto; min-width: 0; }
.g27-sub .g27-doclist__txt strong {
	display: block; font-size: 14px; font-weight: var(--g27-w-bold); color: var(--g27-heading);
	line-height: 1.5; word-break: keep-all;
}
.g27-sub .g27-doclist__txt em { display: block; margin-top: 4px; font-size: 12px; font-style: normal; color: var(--g27-text-sub); }
.g27-sub .g27-doclist__arw { flex: none; width: 18px; height: 18px; color: var(--g27-c300); }
.g27-sub .g27-doclist__item:hover .g27-doclist__arw { color: var(--g27-primary); }

/* 파일 첨부 위젯 */
.g27-sub .g27-file__row { display: flex; gap: 8px; align-items: center; }
.g27-sub .g27-file__row input[type="text"] { flex: 1 1 auto; min-width: 0; }
.g27-sub .g27-file__pick {
	position: relative; overflow: hidden; flex: none;
	display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
	border: 1px solid var(--g27-line); border-radius: var(--g27-r-sm); background: #fff;
	font-size: 14px; color: var(--g27-heading); cursor: pointer;
}
.g27-sub .g27-file__pick:hover { background: var(--g27-c50); border-color: var(--g27-c300); }
.g27-sub .g27-file__pick input[type="file"] {
	position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.g27-sub .g27-file .g27-help { margin-top: 7px; }
.g27-sub .g27-dl th .req { color: #d93025; margin-left: 3px; }

/* 파일 여러 개 첨부 (내정보 사진) — 행을 JS(addFile)가 만들어 붙인다.
   생성 HTML 은 레거시 클래스(.attachment-file · .ipfile · .btn_add)를 쓰므로
   g27-file__row 대신 그 클래스들을 직접 잡아야 새로 추가된 행도 같은 모양이 된다. */
.g27-sub .g27-file--multi .attachment-file { display: flex; gap: 8px; align-items: center; }
.g27-sub .g27-file--multi .attachment-file + .attachment-file { margin-top: 8px; }
.g27-sub .g27-file--multi .inpbox { flex: 1 1 auto; min-width: 0; margin: 0; }
.g27-sub .g27-file--multi .inpbox input[type="text"] { width: 100%; }
.g27-sub .g27-file--multi .ipfile {
	position: relative; overflow: hidden; flex: none; margin: 0;
	display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
	border: 1px solid var(--g27-line); border-radius: var(--g27-r-sm); background: #fff;
	font-size: 14px; color: var(--g27-heading); cursor: pointer;
}
.g27-sub .g27-file--multi .ipfile:hover { background: var(--g27-c50); border-color: var(--g27-c300); }
.g27-sub .g27-file--multi .ipfile input[type="file"] {
	position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.g27-sub .g27-file--multi .button_box { flex: none; display: flex; gap: 6px; margin: 0; }
.g27-sub .g27-file--multi .btn_add {
	width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer;
	border: 1px solid var(--g27-line); border-radius: var(--g27-r-sm);
	background: #fff; color: var(--g27-text-sub); font-size: 16px; line-height: 1;
}
.g27-sub .g27-file--multi .btn_add::before { content: "+"; }
.g27-sub .g27-file--multi .btn_add.delete::before { content: "\00d7"; }
.g27-sub .g27-file--multi .btn_add:hover { background: var(--g27-c50); border-color: var(--g27-c300); color: var(--g27-heading); }
.g27-sub .g27-file--multi .btn_add.delete:hover { color: #d93025; }
/* JS 가 추가하는 행의 버튼은 클래스가 .add / .delete 뿐인 화면도 있다(게시판 글쓰기) */
.g27-sub .g27-file--multi .button_box > .add,
.g27-sub .g27-file--multi .button_box > .delete {
	width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer;
	border: 1px solid var(--g27-line); border-radius: var(--g27-r-sm);
	background: #fff; color: var(--g27-text-sub); font-size: 16px; line-height: 1;
}
.g27-sub .g27-file--multi .button_box > .add::before { content: "+"; }
.g27-sub .g27-file--multi .button_box > .delete::before { content: "\00d7"; }
.g27-sub .g27-file--multi .button_box > .add:hover { background: var(--g27-c50); border-color: var(--g27-c300); color: var(--g27-heading); }
.g27-sub .g27-file--multi .button_box > .delete:hover { background: var(--g27-c50); border-color: var(--g27-c300); color: #d93025; }
/* 등록된 파일 목록(attachment-list) 안의 삭제 버튼 */
.g27-sub .g27-file--multi .attachment-list { list-style: none; padding: 0; margin: 10px 0 0; }
.g27-sub .g27-file--multi .attachment-list li { display: flex; align-items: center; gap: 8px; }
.g27-sub .g27-file--multi .attachment-list li + li { margin-top: 6px; }
.g27-sub .g27-file--multi .attachment-list a { flex: 1 1 auto; color: var(--g27-primary-deep); }
.g27-sub .g27-file--multi .attachment-list a:hover { text-decoration: underline; }
.g27-sub .g27-file--multi .btn_file_delete {
	width: 28px; height: 28px; flex: none; padding: 0; cursor: pointer;
	border: 1px solid var(--g27-line); border-radius: 50%;
	background: #fff; color: var(--g27-text-sub); font-size: 14px; line-height: 1;
}
.g27-sub .g27-file--multi .btn_file_delete::before { content: "\00d7"; }
.g27-sub .g27-file--multi .btn_file_delete:hover { background: var(--g27-c100); color: #d93025; }

/* 등록된 파일 삭제 버튼은 화면마다 클래스가 다르다(btn_add.delete / btn4.minus) */
.g27-sub .g27-file--multi .btn4 {
	width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer;
	border: 1px solid var(--g27-line); border-radius: var(--g27-r-sm);
	background: #fff; color: var(--g27-text-sub); font-size: 16px; line-height: 1;
}
.g27-sub .g27-file--multi .btn4.minus::before { content: "\00d7"; }
.g27-sub .g27-file--multi .btn4:hover { background: var(--g27-c50); border-color: var(--g27-c300); color: #d93025; }
.g27-sub .g27-file--multi ._edit_file .attachment-file > a { flex: 1 1 auto; color: var(--g27-primary-deep); }
.g27-sub .g27-file--multi ._edit_file .attachment-file > a:hover { text-decoration: underline; }

/* 표 안에서 팝업을 여는 텍스트 버튼 */
.g27-sub .g27-linkbtn {
	background: none; border: 0; padding: 0; cursor: pointer;
	font-size: 14px; color: var(--g27-primary-deep); text-decoration: underline;
}
.g27-sub .g27-linkbtn:hover { color: var(--g27-heading); }

/* ------------------------------------------------------------
   9-4. 탭 · 영상 · 만족도조사 · 모달 헤더
   ------------------------------------------------------------
   탭 전환은 부트스트랩 tab 플러그인이 .active 를 붙였다 떼는 방식이다.
   전환 페이지에는 부트스트랩 CSS 가 없으므로 표시/숨김을 여기서 정의한다.
   ------------------------------------------------------------ */
.g27-sub .g27-tabs { margin-top: 30px; }
.g27-sub .g27-tabs__nav { display: flex; gap: 4px; border-bottom: 1px solid var(--g27-line); }
.g27-sub .g27-tabs__nav button {
	height: 44px; padding: 0 20px; background: none; border: 0; cursor: pointer;
	font-size: 14px; color: var(--g27-text-sub); border-bottom: 2px solid transparent;
	transition: color var(--g27-dur-1), border-color var(--g27-dur-1);
}
.g27-sub .g27-tabs__nav button:hover { color: var(--g27-heading); }
.g27-sub .g27-tabs__nav li.active button {
	color: var(--g27-primary-deep); font-weight: var(--g27-w-bold); border-bottom-color: var(--g27-primary);
}
.g27-sub .g27-tabpane { display: none; padding-top: 22px; }
.g27-sub .g27-tabpane.active { display: block; }

.g27-sub .g27-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--g27-r-lg); overflow: hidden; }
.g27-sub .g27-video iframe, .g27-sub .g27-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.g27-sub .g27-survey__q { padding: 16px 0; border-bottom: 1px solid var(--g27-line-soft); }
.g27-sub .g27-survey__q legend { display: flex; gap: 8px; margin-bottom: 11px; }
.g27-sub .g27-survey__num { font-weight: var(--g27-w-black); color: var(--g27-primary); }
.g27-sub .g27-survey__tit { font-size: 14px; font-weight: var(--g27-w-bold); color: var(--g27-heading); }
.g27-sub .g27-survey__tit em { display: block; margin-top: 3px; font-size: 12px; font-weight: var(--g27-w-regular); font-style: normal; color: var(--g27-text-sub); }
.g27-sub .g27-survey__scale { display: flex; gap: 6px; flex-wrap: wrap; }
.g27-sub .g27-survey__scale input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.g27-sub .g27-survey__scale label {
	display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 36px;
	border: 1px solid var(--g27-line); border-radius: var(--g27-r-sm);
	font-size: 12px; color: var(--g27-text); cursor: pointer;
}
.g27-sub .g27-survey__scale input:checked + label {
	background: var(--g27-primary); border-color: var(--g27-primary); color: #fff; font-weight: var(--g27-w-bold);
}
.g27-sub .g27-survey__scale input:focus-visible + label { outline: 2px solid var(--g27-primary); outline-offset: 2px; }

.g27-sub .g27-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.g27-sub .g27-modal__head h3 { font-size: 16px; font-weight: var(--g27-w-bold); color: var(--g27-heading); }
.g27-sub .g27-modal__close {
	width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--g27-text-sub);
}
.g27-sub .g27-modal__close:hover { background: var(--g27-c50); color: var(--g27-heading); }
.g27-sub .g27-modal__close svg { width: 17px; height: 17px; }
.g27-sub .g27-modal .popup.board { width: min(560px, calc(100% - 32px)); }

/* ------------------------------------------------------------
   10. 반응형
   ------------------------------------------------------------ */
@media screen and (max-width: 900px) {
	.g27-sub .g27-cardgrid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.g27-sub .g27-subtop { padding: 32px 0 28px; }
	.g27-sub .g27-content { padding: 32px 0 64px; }
	.g27-sub .g27-dl th { width: 120px; padding: 12px; font-size: 14px; }
	.g27-sub .g27-dl td { padding: 12px; font-size: 14px; }
}
@media screen and (max-width: 720px) {
	.g27-sub .g27-subtop { padding: 24px 0 22px; }
	.g27-sub .g27-lnb__list a { height: 46px; padding: 0 14px; font-size: 14px; }
	.g27-sub .g27-content { padding: 24px 0 56px; }
	/* 표는 가로 스크롤로 — 좁은 화면에서 셀이 뭉개지는 것보다 낫다 */
	.g27-sub .g27-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.g27-sub .g27-table { min-width: 560px; }
	/* 정의형은 세로로 쌓는다 */
	.g27-sub .g27-dl, .g27-sub .g27-dl tbody, .g27-sub .g27-dl tr, .g27-sub .g27-dl th, .g27-sub .g27-dl td { display: block; width: auto; }
	.g27-sub .g27-dl th { border-bottom: 0; padding-bottom: 6px; }
	.g27-sub .g27-dl td { padding-top: 0; }
	/* [2026-08-11] 좁은 화면에서만 버튼을 42 로 줄이던 것을 없앴다 —
	   입력·선택이 44 라 같은 줄에서 2px 씩 어긋났고, 터치 목표도 44 가 맞다(WCAG 2.5.5) */
	.g27-sub .g27-btnrow .g27-btn2 { flex: 1 1 auto; }
	.g27-sub .g27-cardgrid { grid-template-columns: 1fr; }
	.g27-sub .g27-choice { grid-template-columns: 1fr; gap: 12px; }
	.g27-sub .g27-stepfilter__list { grid-template-columns: repeat(2, 1fr); }
	.g27-sub .g27-steps { flex-wrap: wrap; gap: 14px 0; }
	.g27-sub .g27-steps > li { flex: 0 0 50%; }
	.g27-sub .g27-steps > li::before { display: none; }
	.g27-sub .g27-listbar { flex-direction: column; align-items: flex-start; gap: 8px; }
	.g27-sub .g27-jobcard__link { padding: 16px 52px 16px 16px; }
	.g27-sub .g27-post__title { font-size: 16px; }
	.g27-sub .g27-pnnav__lbl { width: 56px; }
}

/* ============================================================
   11. 레거시 클래스 브리지
   ------------------------------------------------------------
   아직 web_2027 로 옮기지 않은 본문(.g27-legacy)을 위한 매핑이다.
   144개 JSP 를 다 옮기기 전에도 화면이 2027 톤으로 보이게 한다.
   · 대상은 실제 사용 빈도가 높은 클래스만 골랐다(전수 조사 결과 기준).
   · 레거시 시트(contents.css/table.css)보다 뒤에 로드되므로 같은 명시도면 이긴다.
     명시도가 밀리는 곳은 .g27-legacy 를 앞에 붙여 한 단계 올렸다.
   · 해당 페이지를 web_2027 로 옮기면 .g27-legacy 가 사라져 이 블록은 자동으로 빠진다.
   ============================================================ */

/* ---- 버튼 (btn / btn2 / btn5 / bg_blue / bg_white3 / bg_gray) ---- */
.g27-legacy .btn, .g27-legacy .btn2, .g27-legacy .btn5,
.g27-legacy .button_box a, .g27-legacy .button_box button {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 42px; padding: 0 20px; border-radius: var(--g27-r-sm);
	font-size: 14px; font-weight: var(--g27-w-bold); font-family: inherit;
	border: 1px solid var(--g27-line); background: #fff; color: var(--g27-heading);
	text-decoration: none; cursor: pointer; line-height: 1.2;
	transition: background var(--g27-dur-1), border-color var(--g27-dur-1), color var(--g27-dur-1), transform var(--g27-dur-1);
}
.g27-legacy .btn:hover, .g27-legacy .btn2:hover, .g27-legacy .btn5:hover,
.g27-legacy .button_box a:hover, .g27-legacy .button_box button:hover { background: var(--g27-c50); border-color: var(--g27-c300); }
.g27-legacy .btn:active, .g27-legacy .btn2:active, .g27-legacy .btn5:active { transform: scale(.98); }
/* 강조 버튼 */
.g27-legacy .bg_blue, .g27-legacy .bg_blue2, .g27-legacy a.bg_blue, .g27-legacy button.bg_blue {
	background: var(--g27-primary) !important; border-color: var(--g27-primary) !important; color: #fff !important;
}
.g27-legacy .bg_blue:hover, .g27-legacy .bg_blue2:hover {
	background: var(--g27-primary-deep) !important; border-color: var(--g27-primary-deep) !important;
}
.g27-legacy .bg_gray, .g27-legacy .bg_gray4 { background: var(--g27-c100) !important; border-color: var(--g27-line) !important; color: var(--g27-heading) !important; }
.g27-legacy .bg_white, .g27-legacy .bg_white3 { background: #fff !important; }
.g27-legacy .button_box { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.g27-legacy .button_box.right { justify-content: flex-end; }

/* ---- 입력 (inpbox / txt / inputBg) ---- */
.g27-legacy .inpbox { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.g27-legacy input.txt, .g27-legacy .inputBg,
.g27-legacy input[type="text"], .g27-legacy input[type="password"],
.g27-legacy input[type="tel"], .g27-legacy input[type="email"], .g27-legacy select, .g27-legacy textarea {
	height: auto; min-height: 42px; padding: 9px 12px;
	border: 1px solid var(--g27-line); border-radius: var(--g27-r-sm);
	font-size: 14px; font-family: inherit; color: var(--g27-heading); background: #fff;
	transition: border-color var(--g27-dur-1), box-shadow var(--g27-dur-1);
}
.g27-legacy textarea { min-height: 130px; line-height: 1.7; }
/* 레거시 화면도 select 만 16px 로 커지는 문제가 같다(§7 주석 참고) — 특이도만 올려 맞춘다.
   높이는 표 안이 촘촘해 min-height 를 유지한다. */
body.g27-legacy select, body.g27-legacy textarea { font-size: 14px; }
.g27-legacy input:focus, .g27-legacy select:focus, .g27-legacy textarea:focus {
	border-color: var(--g27-primary); outline: none; box-shadow: 0 0 0 3px rgba(0, 146, 162, .14);
}

/* ---- 표 (contents.css/table.css 의 기본 표) ---- */
.g27-legacy .contentsarea table, .g27-legacy .boardlist, .g27-legacy .boardview {
	width: 100%; border-collapse: collapse;
}
.g27-legacy .contentsarea table th, .g27-legacy .contentsarea table td {
	padding: 13px 12px; border-bottom: 1px solid var(--g27-line-soft); font-size: 14px; line-height: 1.6;
}
.g27-legacy .contentsarea table thead th { background: var(--g27-c50); color: var(--g27-heading); font-weight: var(--g27-w-bold); }
.g27-legacy .contentsarea table tbody tr:hover { background: var(--g27-t50); }

/* ---- 게시판 상단 검색 ---- */
.g27-legacy .board_top, .g27-legacy .boardlist_top {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	padding: 14px 16px; margin-bottom: 18px;
	background: var(--g27-c50); border: 1px solid var(--g27-line-soft); border-radius: var(--g27-r-lg);
}
.g27-legacy .boardschbox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.g27-legacy .btn_search {
	display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 18px;
	border: 1px solid var(--g27-primary); border-radius: var(--g27-r-sm);
	background: var(--g27-primary); color: #fff; font-weight: var(--g27-w-bold); font-size: 14px; cursor: pointer;
}
.g27-legacy .btn_search:hover { background: var(--g27-primary-deep); border-color: var(--g27-primary-deep); }

/* ---- 페이징 ---- */
.g27-legacy .paging, .g27-legacy .pagination {
	display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 30px; flex-wrap: wrap;
}
.g27-legacy .paging a, .g27-legacy .paging strong, .g27-legacy .pagination a, .g27-legacy .pagination strong {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--g27-r-xs);
	font-size: 14px; color: var(--g27-text-sub); text-decoration: none;
}
.g27-legacy .paging a:hover, .g27-legacy .pagination a:hover { background: var(--g27-c50); color: var(--g27-heading); }
.g27-legacy .paging strong, .g27-legacy .paging .on,
.g27-legacy .pagination strong, .g27-legacy .pagination .on {
	background: var(--g27-primary); color: #fff; font-weight: var(--g27-w-bold);
}

/* ---- 게시판 상세 (boardview) ---- */
.g27-legacy .boardview { border-top: 2px solid var(--g27-heading); }
.g27-legacy .boardview th {
	width: 150px; background: var(--g27-c50); text-align: left;
	font-weight: var(--g27-w-bold); color: var(--g27-heading);
}
.g27-legacy .boardview .subject, .g27-legacy .boardview .view_tit {
	font-size: 24px; font-weight: var(--g27-w-black); letter-spacing: -0.03em; color: var(--g27-heading);
	padding: 18px 12px;
}
.g27-legacy .boardview .cont, .g27-legacy .boardview .view_cont {
	padding: 26px 12px; line-height: 1.8; font-size: 14px; min-height: 180px;
}
.g27-legacy .boardview .cont img { max-width: 100%; height: auto; }

/* ---- 첨부파일 ---- */
.g27-legacy .attachment-list, .g27-legacy .file_list {
	padding: 12px 14px; background: var(--g27-c50);
	border: 1px solid var(--g27-line-soft); border-radius: var(--g27-r-sm);
}
.g27-legacy .attachment-file, .g27-legacy .attachment-file-edit,
.g27-legacy .file_list li, .g27-legacy .ipfile {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 5px 0; font-size: 14px; color: var(--g27-text-sub);
}
.g27-legacy .attachment-file a, .g27-legacy .file_list a { color: var(--g27-heading); text-decoration: none; }
.g27-legacy .attachment-file a:hover, .g27-legacy .file_list a:hover { color: var(--g27-primary-deep); text-decoration: underline; }
.g27-legacy .btn_add {
	display: inline-flex; align-items: center; justify-content: center; gap: 5px;
	min-height: 34px; padding: 0 12px; border-radius: var(--g27-r-xs);
	border: 1px solid var(--g27-line); background: #fff; color: var(--g27-heading);
	font-size: 12px; cursor: pointer;
}
.g27-legacy .btn_add:hover { background: var(--g27-c50); border-color: var(--g27-c300); }
.g27-legacy .delete { color: #d93025; }

/* ---- 체크박스 · 라디오 ---- */
.g27-legacy .check_box { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.g27-legacy .check_box + .check_box { margin-left: 12px; }
.g27-legacy input[type="checkbox"], .g27-legacy input[type="radio"] {
	width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0;
	accent-color: var(--g27-primary); cursor: pointer;
}
.g27-legacy .check_box label { cursor: pointer; font-size: 14px; }

/* ---- 셀렉트 박스 (optionbox / select_box) ---- */
.g27-legacy .select_box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.g27-legacy .optionbox select { min-width: 110px; }

/* ---- 캘린더 입력 ---- */
.g27-legacy .calendarbox { display: inline-flex; align-items: center; gap: 6px; }
.g27-legacy .calendarbox input { max-width: 150px; }

/* ---- 목록형 카드 (list_type) ---- */
.g27-legacy .list_type > li {
	padding: 16px; margin-bottom: 10px;
	border: 1px solid var(--g27-line-soft); border-radius: var(--g27-r-lg); background: #fff;
	transition: border-color var(--g27-dur-1), box-shadow var(--g27-dur-1), transform var(--g27-dur-1);
}
.g27-legacy .list_type > li:hover {
	border-color: var(--g27-t200); box-shadow: var(--g27-sh-2); transform: translateY(-2px);
}

/* ---- 팝업 본문 ---- */
.g27-legacy .popup, .g27-legacy .popup_inner { padding: 0; }
.g27-legacy .popup_inner { max-width: 100%; }

/* ---- 안내 문구 · 아이콘 ---- */
.g27-legacy .character {
	padding: 14px 16px; border-radius: var(--g27-r-sm); line-height: 1.7; font-size: 14px;
	background: var(--g27-t50); border: 1px solid var(--g27-t100); color: var(--g27-primary-deep);
}
.g27-legacy .line { border-color: var(--g27-line-soft); }

/* ---- 정렬 유틸 (레거시 시트가 !important 로 잡아둔 경우가 있어 그대로 둔다) ---- */
.g27-legacy .center, .g27-legacy .txtc { text-align: center; }
.g27-legacy .right { text-align: right; }

/* ---- 자잘한 유틸 ---- */
.g27-legacy .point, .g27-legacy .color_blue { color: var(--g27-primary-deep); }
.g27-legacy .tit, .g27-legacy .title {
	font-weight: var(--g27-w-bold); color: var(--g27-heading); letter-spacing: -0.02em;
}
.g27-legacy .title_box { margin-bottom: 14px; }
.g27-legacy .box, .g27-legacy .div_box {
	border: 1px solid var(--g27-line-soft); border-radius: var(--g27-r-lg); padding: 18px;
}
.g27-legacy .file_list, .g27-legacy .attachment-list { border-radius: var(--g27-r-sm); }

/* 인쇄 — 크롬(헤더·LNB·퀵)은 빼고 본문만 */
@media print {
	.g27-sub .g27-lnb, .g27-sub .g27-quick, .g27-sub .skipnavi { display: none !important; }
	.g27-sub .g27-subtop { padding: 0 0 12px; background: none; border-bottom: 1px solid #000; }
	.g27-sub .g27-content { padding: 12px 0; }
}

/* 휴대전화 3칸 한 줄 (아이디·비밀번호 찾기) */
/* 체크박스 여러 개 (분야·서비스지역처럼 항목이 많은 것) */
.g27-sub .g27-checkgrid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px;
	list-style: none; padding: 0; margin: 0;
}
.g27-sub .g27-checkgrid > li { display: flex; align-items: center; gap: 7px; }
.g27-sub .g27-checkgrid input[type="checkbox"] {
	width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: none;
	accent-color: var(--g27-primary); cursor: pointer;
}
.g27-sub .g27-checkgrid label { cursor: pointer; font-size: 14px; word-break: keep-all; }
.g27-sub .g27-checkgrid--single { grid-template-columns: 1fr; }

/* 통합검색 결과 — 카드는 g27-jobcard 를 그대로 쓰고, 본문 미리보기와 경로만 더한다 */
.g27-sub .g27-srch__text {
	margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--g27-text-sub);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	/* 미리보기는 JSP 가 공백을 전부 걷어낸 한 덩어리 문자열 — 강제 줄바꿈을 열어주지 않으면
	   min-content 가 카드·그리드를 화면 밖까지 밀어낸다(모바일 가로 스크롤 사고 원인) */
	word-break: break-all; overflow-wrap: anywhere;
}
/* 카드가 그리드 트랙을 밀지 못하게 */
.g27-sub #dataContent .g27-jobcard { min-width: 0; }
.g27-sub .g27-srch__nav { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 10px; list-style: none; padding: 0; }
.g27-sub .g27-srch__nav li { font-size: 12px; color: var(--g27-text-sub); }
.g27-sub .g27-srch__nav li + li::before { content: "›"; margin-right: 5px; color: var(--g27-c300); }
.g27-sub .g27-srch__more { margin: 4px 0 44px; }

/* 프리랜서 상세 — 사진 슬라이드 + 정보표 2단 (슬라이드는 slick 그대로 쓴다) */
.g27-sub .g27-prof { display: grid; grid-template-columns: 320px 1fr; gap: 26px; align-items: start; }
.g27-sub .g27-prof__media { min-width: 0; }
.g27-sub .g27-prof__media .slider-for img,
.g27-sub .g27-prof__media .slider-nav img {
	width: 100%; height: auto; border-radius: var(--g27-r-lg); background: var(--g27-c50);
}
.g27-sub .g27-prof__media .slider-nav { margin-top: 8px; }
.g27-sub .g27-prof__media .slider-nav .slick-slide { padding: 0 4px; box-sizing: border-box; cursor: pointer; }
.g27-sub .g27-prof__body { min-width: 0; }
@media (max-width: 900px) {
	.g27-sub .g27-prof { grid-template-columns: 1fr; gap: 18px; }
	.g27-sub .g27-prof__media { max-width: 360px; margin: 0 auto; }
}

/* 라디오 한 줄 (사용/미사용 같은 두세 개짜리) */
.g27-sub .g27-radiorow { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 0; }
.g27-sub .g27-radiorow > li { display: flex; align-items: center; gap: 7px; }
.g27-sub .g27-radiorow input[type="radio"] {
	width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0; flex: none;
	accent-color: var(--g27-primary); cursor: pointer;
}
.g27-sub .g27-radiorow label { cursor: pointer; font-size: 14px; }

/* 자동등록방지(캡차) */
.g27-sub .g27-captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border: 0; padding: 0; margin: 0; }
.g27-sub .g27-captcha legend { padding: 0; }
.g27-sub .g27-captcha img { height: 42px; border: 1px solid var(--g27-line); border-radius: var(--g27-r-sm); background: #fff; }
.g27-sub .g27-captcha input[type="text"] { flex: 0 0 140px; }
.g27-sub .g27-captcha button {
	display: inline-flex; align-items: center; height: 40px; padding: 0 14px; cursor: pointer;
	border: 1px solid var(--g27-line); border-radius: var(--g27-r-sm); background: #fff;
	font-size: 14px; color: var(--g27-heading);
}
.g27-sub .g27-captcha button:hover { background: var(--g27-c50); border-color: var(--g27-c300); }
.g27-sub .g27-captcha #captcha_info { flex: 1 1 100%; font-size: 12px; color: var(--g27-text-sub); }

/* 댓글 작성 영역 (게시판)
   답댓글 작성칸은 JS(comtReply)가 레거시 클래스로 만들어 붙인다.
   그래서 g27-* 가 아니라 .comment_area 안의 레거시 클래스를 직접 잡는다. */
.g27-sub .comment_area .comment_write {
	padding: 16px; margin-top: 10px;
	background: var(--g27-c50); border: 1px solid var(--g27-line-soft); border-radius: var(--g27-r-lg);
}
.g27-sub .comment_area .name_box { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.g27-sub .comment_area .name_box .inpbox { flex: 1 1 160px; min-width: 0; }
.g27-sub .comment_area .inpbox input { width: 100%; }
.g27-sub .comment_area .tareabox textarea { width: 100%; min-height: 96px; }
.g27-sub .comment_area .byte { font-size: 12px; color: var(--g27-text-sub); }
.g27-sub .comment_area .comment_write .button_box {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px;
}
.g27-sub .comment_area .comment_write .button_box .right {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.g27-sub .comment_area .comt_captcha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.g27-sub .comment_area .comt_captcha img { height: 40px; border: 1px solid var(--g27-line); border-radius: var(--g27-r-sm); }
.g27-sub .comment_area .comt_captcha input { flex: 0 0 130px; }
/* JS 가 만들어 붙이는 btn2 계열 — 2027 버튼 모양으로 */
.g27-sub .comment_area .btn2, .g27-sub .comment_area .comt_captcha button {
	display: inline-flex; align-items: center; justify-content: center;
	height: 38px; padding: 0 16px; cursor: pointer; white-space: nowrap;
	border: 1px solid var(--g27-line); border-radius: var(--g27-r-sm);
	background: #fff; color: var(--g27-heading); font-size: 14px;
}
.g27-sub .comment_area .btn2:hover, .g27-sub .comment_area .comt_captcha button:hover {
	background: var(--g27-c50); border-color: var(--g27-c300);
}
.g27-sub .comment_area .btn2.bg_blue, .g27-sub .comment_area .btn2.bg_blue2 {
	background: var(--g27-primary); border-color: var(--g27-primary); color: #fff; font-weight: var(--g27-w-bold);
}
.g27-sub .comment_area .btn2.bg_blue:hover, .g27-sub .comment_area .btn2.bg_blue2:hover {
	background: var(--g27-primary-deep); border-color: var(--g27-primary-deep);
}

/* 개인정보 수집 동의 박스 (법률상담 신청 등) */
.g27-sub .g27-agree {
	max-height: 300px; overflow-y: auto;
	padding: 18px 20px; margin-bottom: 14px;
	border: 1px solid var(--g27-line); border-radius: var(--g27-r-lg);
	background: var(--g27-c50); font-size: 14px; line-height: 1.75; color: var(--g27-text);
}
.g27-sub .g27-agree > * + * { margin-top: 14px; }
.g27-sub .g27-agree h4 { font-size: 14px; font-weight: var(--g27-w-bold); color: var(--g27-heading); }
.g27-sub .g27-agree table { width: 100%; background: #fff; border-top: 2px solid var(--g27-heading); }
.g27-sub .g27-agree th, .g27-sub .g27-agree td {
	padding: 9px 10px; border-bottom: 1px solid var(--g27-line-soft); font-size: 12px; text-align: center;
}
.g27-sub .g27-agree th { background: var(--g27-c50); font-weight: var(--g27-w-bold); color: var(--g27-heading); }
.g27-sub .g27-agree td ul { list-style: none; padding: 0; margin: 0; }
.g27-sub .g27-agree .g27-agree__note { color: var(--g27-text-sub); }
/* 약관 본문의 조항 번호 목록 (회원가입 이용약관) */
.g27-sub .g27-agree .div_box + .div_box { margin-top: 16px; }
.g27-sub .g27-agree .div_box > p:first-child { font-weight: var(--g27-w-bold); color: var(--g27-heading); }
.g27-sub .g27-agree .num_list2 { counter-reset: g27num; list-style: none; padding: 0; margin: 6px 0 0; }
.g27-sub .g27-agree .num_list2 > li { counter-increment: g27num; position: relative; padding-left: 22px; margin-top: 5px; }
.g27-sub .g27-agree .num_list2 > li::before {
	content: counter(g27num) "."; position: absolute; left: 0; color: var(--g27-text-sub);
}
.g27-sub .g27-agree .num_list { counter-reset: g27sub; list-style: none; padding: 0; margin: 5px 0 0; }
.g27-sub .g27-agree .num_list > li { counter-increment: g27sub; position: relative; padding-left: 24px; margin-top: 4px; }
.g27-sub .g27-agree .num_list > li::before {
	content: counter(g27sub) ")"; position: absolute; left: 0; color: var(--g27-text-sub);
}
.g27-sub .g27-agree .list_type4 { list-style: none; padding: 0; margin: 0; }
.g27-sub .g27-agree .tablebasic { overflow-x: auto; }
/* 전체동의 줄만 눈에 띄게 */
.g27-sub .g27-checkgrid--all {
	padding: 14px 16px; margin-top: 8px;
	background: var(--g27-c50); border: 1px solid var(--g27-line); border-radius: var(--g27-r-lg);
}
.g27-sub .g27-checkgrid--all label { font-weight: var(--g27-w-bold); color: var(--g27-heading); }

/* 값 옆에 붙는 조회 버튼 (사업자등록번호 등) */
.g27-sub .g27-inputbtn { display: flex; gap: 8px; align-items: center; }
.g27-sub .g27-inputbtn input[type="text"] { flex: 1 1 auto; min-width: 0; }

.g27-sub .g27-telrow { display: flex; gap: 6px; }
.g27-sub .g27-telrow select { flex: 0 0 92px; }
.g27-sub .g27-telrow input { flex: 1 1 0; min-width: 0; }

/* 이메일 입력 (아이디 @ 도메인 + 도메인 선택) */
.g27-sub .g27-emailrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.g27-sub .g27-emailrow input { flex: 1 1 130px; min-width: 0; }
.g27-sub .g27-emailrow select { flex: 0 0 150px; }
.g27-sub .g27-emailrow .character { flex: none; color: var(--g27-text-sub); }
@media (max-width: 560px) {
	.g27-sub .g27-emailrow select { flex: 1 1 100%; }
}

/* 마이페이지 검색 조건 폼 */
.g27-sub .g27-filterform { padding: 18px 20px 16px; background: var(--g27-c50); border-radius: var(--g27-r-lg); }
.g27-sub .g27-filterform__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px; }
.g27-sub .g27-filterform__item.wide { grid-column: span 3; }
.g27-sub .g27-filterform__item label {
	display: block; margin-bottom: 5px; font-size: 12px;
	font-weight: var(--g27-w-bold); color: var(--g27-heading);
}
.g27-sub .g27-filterform__item select,
.g27-sub .g27-filterform__item input[type="text"] { width: 100%; background: #fff; }
.g27-sub .g27-filterform .g27-btnrow { margin-top: 16px; }

/* 좌측 사이드 필터(wkrg_filter) — 일감정보 목록에서 시작해 프리랜서 홍보 목록이 같은 마크업을 쓴다.
   [2026-08-11] 규칙이 일감 JSP 인라인 <style> 에만 있어서 홍보 목록은 라벨이 옆에 붙고
   컨트롤 폭도 안 잡혀 있었다 → 공용 시트로 올린다(두 페이지가 같은 모양). */
.g27-sub .wkrg_filter__item + .wkrg_filter__item { margin-top: 14px; }
.g27-sub .wkrg_filter__lbl {
	display: block; margin-bottom: 6px;
	font-size: 12px; font-weight: var(--g27-w-bold); color: var(--g27-heading);
}
.g27-sub .wkrg_filter__item select,
.g27-sub .wkrg_filter__item input[type="text"] { width: 100%; background: #fff; }
.g27-sub .wkrg_filter__item select + select { margin-top: 6px; }
.g27-sub .wkrg_filter__btns { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.g27-sub .wkrg_filter__btns .g27-btn2 { width: 100%; }
.g27-sub .g27-daterow { display: flex; align-items: center; gap: 8px; }
.g27-sub .g27-daterow input { flex: 1 1 0; min-width: 0; }
@media screen and (max-width: 720px) {
	.g27-sub .g27-filterform__grid { grid-template-columns: 1fr; }
	.g27-sub .g27-filterform__item.wide { grid-column: auto; }
}
.g27-sub .g27-filterform__item.wide2 { grid-column: span 2; }
.g27-sub .g27-table td.check, .g27-sub .g27-table th.check { text-align: center; }
.g27-sub .g27-filelist li { display: flex; align-items: center; gap: 8px; }
.g27-sub .g27-filedel {
	flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
	background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--g27-text-sub);
}
.g27-sub .g27-filedel:hover { background: var(--g27-c100); color: #d93025; }
.g27-sub .g27-filedel svg { width: 13px; height: 13px; }

/* ============================================================
   12. 모바일 최적화 — "밑으로만 늘어뜨리지 않기" (2026-08-10)
   ------------------------------------------------------------
   좁은 화면에서 1열 세로 나열로 도망가지 않고,
   2열 타일 · 가로 스와이프 · 좌우 병치로 화면당 정보량을 유지한다.
   ============================================================ */

/* 표준계약서 등 문서 목록 — 넓은 화면에서 2열 (한 줄 카드가 너무 길어 시선이 왕복하던 것) */
@media screen and (min-width: 721px) {
	.g27-sub .g27-doclist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

@media screen and (max-width: 720px) {
	/* 강의 갤러리: 1열(스크롤 폭탄) → 2열 컴팩트 타일 */
	.g27-sub .g27-cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.g27-sub .g27-vcard__body { padding: 11px 12px 13px; }
	.g27-sub .g27-vcard__title { font-size: 14px; }
	.g27-sub .g27-vcard__lect { margin-top: 5px; font-size: 12px; }
	.g27-sub .g27-vcard__keys { display: none; }        /* 좁은 타일에서 칩은 소음 */

	/* 두 갈래 선택 카드: 세로 2장 쌓기 → 아이콘 좌·텍스트 우 가로형 (높이 절반).
	   자식이 ico/t/d/btnrow 형제 구조(래퍼 없음)라 flex 가 아니라 grid 로 배치한다 */
	.g27-sub .g27-choice__item {
		display: grid; grid-template-columns: auto minmax(0, 1fr);
		align-items: start; column-gap: 14px; row-gap: 0;
		text-align: left; padding: 16px 16px 14px 14px;
	}
	.g27-sub .g27-choice__ico { grid-row: 1 / span 3; width: 46px; height: 46px; margin-bottom: 0; align-self: center; }
	.g27-sub .g27-choice__t, .g27-sub .g27-choice__d,
	.g27-sub .g27-choice__item .g27-btnrow { grid-column: 2; }
	.g27-sub .g27-choice__d { margin-top: 4px; font-size: 12px; }
	.g27-sub .g27-choice__item .g27-btnrow { width: auto; margin-top: 10px; justify-content: flex-start; }
	.g27-sub .g27-choice__item .g27-btnrow .g27-btn2 { flex: 0 0 auto; height: 36px; padding: 0 14px; font-size: 12px; }

	/* 단계 필터: 2열 그리드(3행) → 한 줄 가로 스와이프 */
	.g27-sub .g27-stepfilter__list {
		display: flex; gap: 8px;
		overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
		scrollbar-width: none; padding-bottom: 4px;
		margin-left: calc(var(--g27-gutter, 16px) * -1); margin-right: calc(var(--g27-gutter, 16px) * -1);
		padding-left: var(--g27-gutter, 16px); padding-right: var(--g27-gutter, 16px);
	}
	.g27-sub .g27-stepfilter__list::-webkit-scrollbar { display: none; }
	.g27-sub .g27-stepfilter__list > li { flex: 0 0 116px; scroll-snap-align: start; }

	/* 이전글/다음글: 두 줄 쌓기 → 좌우 병치 카드.
	   ⚠ 1fr(=minmax(auto,1fr)) 은 nowrap 제목의 min-content 에 밀려 화면보다 커진다 → minmax(0,1fr) */
	.g27-sub .g27-pnnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-top: 0; }
	.g27-sub .g27-pnnav__item {
		flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0;
		padding: 12px 14px; border: 1px solid var(--g27-line-soft); border-radius: var(--g27-r-sm);
	}
	.g27-sub .g27-pnnav__lbl { width: auto; font-size: 12px; }
	.g27-sub .g27-pnnav__txt { width: 100%; font-size: 12px; }

	/* 검색바: 조건(셀렉트)들은 반반, 검색어 입력만 전체 폭 */
	.g27-sub .g27-searchbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.g27-sub .g27-searchbar select { min-width: 0; width: 100%; }
	.g27-sub .g27-searchbar input[type="text"] { grid-column: 1 / -1; }
	.g27-sub .g27-searchbar .g27-btn2 { width: 100%; }

	/* 문서 목록: 카드 안 여백만 조여 한 화면 표시량 확보 */
	.g27-sub .g27-doclist { gap: 8px; }
	.g27-sub .g27-doclist__item { padding: 12px 12px; gap: 10px; }
	.g27-sub .g27-doclist__ico { width: 36px; height: 36px; }
}

/* 초소형 (~400) — 2열 타일 유지가 어려운 항목만 1열로 되돌린다 */
@media screen and (max-width: 400px) {
	.g27-sub .g27-pnnav { grid-template-columns: 1fr; }
}

/* ============================================================
   13. 은은한 고도화 — 전 서브페이지 공통 (2026-08-10)
   ------------------------------------------------------------
   "너무 심하지 않게": 진입 페이드 · hover 폴리시 · 포커스 링.
   등장 효과 클래스(.g27-reveal 계열)는 main_2027.css 의 규칙을 재사용하고
   태깅과 관찰은 Sub_2027.js(initReveal)가 담당한다.
   ============================================================ */

/* 서브 상단 진입 모션 — CSS 만으로 동작 (JS 무관) */
.g27-sub .g27-subtop .g27-crumb    { animation: g27FadeUp .5s var(--g27-ease-out) both; }
.g27-sub .g27-subtop__eyebrow      { animation: g27FadeUp .5s var(--g27-ease-out) .06s both; }
.g27-sub .g27-subtop__title        { animation: g27FadeUp .5s var(--g27-ease-out) .12s both; }
/* 도로 모티브 점선 링 — 메인 히어로와 같은 계열이라는 신호 */
.g27-sub .g27-subtop::before {
	content: ""; position: absolute; right: 40px; top: -70px;
	width: 190px; height: 190px; border-radius: 50%;
	border: 2px dashed var(--g27-t200); opacity: .8; pointer-events: none;
}

/* LNB — sticky 로 떠 있을 때 존재감 (상시 옅은 그림자) */
.g27-sub .g27-lnb { box-shadow: 0 2px 10px rgba(11, 59, 70, .04); }

/* 강의 썸네일 hover 줌 */
.g27-sub .g27-vcard__thumb { transition: transform var(--g27-dur-3) var(--g27-ease-out); }
.g27-sub .g27-vcard:hover .g27-vcard__thumb { transform: scale(1.045); }

/* 문서 목록 hover — 아이콘이 브랜드색으로 차오름 */
.g27-sub .g27-doclist__ico { transition: background var(--g27-dur-1), color var(--g27-dur-1); }
.g27-sub .g27-doclist__item:hover .g27-doclist__ico { background: var(--g27-primary); color: #fff; }

/* 포커스 링 — 메인과 동일 규격 */
.g27-sub a:focus-visible,
.g27-sub button:focus-visible,
.g27-sub input:focus-visible,
.g27-sub select:focus-visible { outline: 3px solid var(--g27-t600); outline-offset: 3px; border-radius: 6px; }

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
	.g27-sub .g27-subtop .g27-crumb,
	.g27-sub .g27-subtop__eyebrow,
	.g27-sub .g27-subtop__title { animation: none; }
	.g27-sub .g27-vcard:hover .g27-vcard__thumb { transform: none; }
}

/* ============================================================
   14. 통합검색 (2026-08-11 고도화)
   ------------------------------------------------------------
   대형 검색바 · 결과 요약 · 탭 건수 배지 · 검색어 하이라이트 ·
   결과 2열 그리드 · 로딩 스켈레톤 · 첫 방문/전체 0건 안내.
   ============================================================ */

/* 대형 검색바 — 메인 히어로 검색과 같은 문법 */
.g27-sub .g27-bigsearch {
	position: relative; display: flex; gap: 8px; align-items: center;
	max-width: 720px; margin: 4px auto 0;
}
.g27-sub .g27-bigsearch .txt {
	flex: 1 1 auto; min-width: 0; height: 58px; padding: 0 24px;
	font-size: 16px; font-weight: var(--g27-w-medium);
	background: #fff; border: 2px solid var(--g27-t200); border-radius: var(--g27-r-pill, 999px);
	box-shadow: 0 10px 28px rgba(0, 146, 162, .10);
	transition: border-color var(--g27-dur-2), box-shadow var(--g27-dur-2);
}
.g27-sub .g27-bigsearch .txt:focus {
	border-color: var(--g27-primary); outline: none;
	box-shadow: 0 12px 32px rgba(0, 146, 162, .18), 0 0 0 4px rgba(0, 146, 162, .12);
}
.g27-sub .g27-bigsearch .g27-btn2 { height: 58px; padding: 0 26px; border-radius: var(--g27-r-pill, 999px); }
/* 빈 검색어 흔들림 */
.g27-sub .g27-bigsearch.is-shake .txt { animation: g27SrchShake .4s; border-color: #d93025; }
@keyframes g27SrchShake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-7px); }
	55% { transform: translateX(6px); }
	80% { transform: translateX(-3px); }
}

/* 결과 요약 줄 */
.g27-sub .g27-srchsum {
	margin: 26px 0 6px; text-align: center;
	font-size: 16px; color: var(--g27-text-sub); letter-spacing: -.02em;
}
.g27-sub .g27-srchsum strong,
.g27-sub .g27-srchsum #searchResulttxt { color: var(--g27-primary-deep); font-weight: var(--g27-w-bold); }
.g27-sub .g27-srchsum #totCnt { color: var(--g27-heading); font-weight: var(--g27-w-black); }
.g27-sub .g27-srchsum[hidden] { display: none; }

/* 분류 탭 — 가운데 정렬 + 건수 배지 */
.g27-sub #srchTabs { justify-content: center; margin: 14px 0 10px; }
.g27-sub #srchTabs .cat_btn .cnt {
	margin-left: 5px; font-size: 12px; font-weight: var(--g27-w-black);
	color: var(--g27-primary-strong);
}
.g27-sub #srchTabs .cat_btn[data-selected="selected"] .cnt { color: #fff; }
.g27-sub #srchTabs .cat_btn .cnt:empty { display: none; }

/* 검색어 하이라이트 */
.g27-sub #dataContent mark {
	background: var(--g27-t100); color: var(--g27-primary-deep);
	border-radius: 3px; padding: 0 2px; font-weight: var(--g27-w-bold);
}

/* 결과 목록 — 데스크톱 2열 (검색 페이지 한정) */
@media screen and (min-width: 900px) {
	.g27-sub #dataContent .g27-joblist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.g27-sub #dataContent .g27-joblist__empty { grid-column: 1 / -1; }
}

/* 결과 카드 — 렌더될 때마다 스태거 등장 (관찰자 없이 CSS 만으로) */
.g27-sub #dataContent .g27-jobcard { animation: g27FadeUp .42s var(--g27-ease-out) both; }
.g27-sub #dataContent .g27-jobcard:nth-child(2) { animation-delay: .05s; }
.g27-sub #dataContent .g27-jobcard:nth-child(3) { animation-delay: .1s; }
.g27-sub #dataContent .g27-jobcard:nth-child(4) { animation-delay: .15s; }
.g27-sub #dataContent .g27-jobcard:nth-child(5) { animation-delay: .2s; }
.g27-sub #dataContent .g27-jobcard:nth-child(n+6) { animation-delay: .25s; }
.g27-sub #dataContent .g27-section__t { animation: g27FadeUp .4s var(--g27-ease-out) both; }
.g27-sub #dataContent .g27-section__t .cnt { color: var(--g27-primary-strong); }

/* 로딩 스켈레톤 */
.g27-sub .g27-skel { display: grid; gap: 12px; margin-top: 20px; }
@media screen and (min-width: 900px) { .g27-sub .g27-skel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g27-sub .g27-skel > i {
	display: block; height: 108px; border-radius: var(--g27-r-lg);
	background: var(--g27-c50); border: 1px solid var(--g27-line-soft);
	animation: g27SkelPulse 1.1s ease-in-out infinite alternate;
}
.g27-sub .g27-skel > i:nth-child(2) { animation-delay: .18s; }
.g27-sub .g27-skel > i:nth-child(3) { animation-delay: .36s; }
.g27-sub .g27-skel > i:nth-child(4) { animation-delay: .54s; }
@keyframes g27SkelPulse { from { opacity: 1; } to { opacity: .45; } }

/* 첫 방문 안내 · 전체 0건 — 추천 검색어 제안 */
.g27-sub .g27-srchguide { padding: 56px 20px 64px; text-align: center; }
.g27-sub .g27-srchguide svg { width: 44px; height: 44px; margin-bottom: 12px; color: var(--g27-t300); }
.g27-sub .g27-srchguide p { font-size: 16px; color: var(--g27-text-sub); line-height: 1.7; word-break: keep-all; }
.g27-sub .g27-srchguide p strong { color: var(--g27-heading); }
.g27-sub .g27-srchguide__keys {
	display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px;
}
.g27-sub .g27-srchguide__keys .lbl { width: 100%; font-size: 12px; font-weight: var(--g27-w-bold); color: var(--g27-text-sub); }

/* 모바일 */
@media screen and (max-width: 720px) {
	.g27-sub .g27-bigsearch { flex-wrap: wrap; gap: 8px; }
	.g27-sub .g27-bigsearch .txt { flex: 1 1 100%; height: 50px; padding: 0 18px; }
	.g27-sub .g27-bigsearch .g27-btn2 { flex: 1 1 0; height: 44px; padding: 0; }
	/* 탭: 줄바꿈 3줄 → 한 줄 가로 스와이프 (끝 페이드 마스크) */
	.g27-sub #srchTabs {
		flex-wrap: nowrap; justify-content: flex-start;
		overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
		margin-left: calc(var(--g27-gutter, 16px) * -1); margin-right: calc(var(--g27-gutter, 16px) * -1);
		padding: 2px var(--g27-gutter, 16px) 6px;
		-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
		        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
	}
	.g27-sub #srchTabs::-webkit-scrollbar { display: none; }
	.g27-sub #srchTabs .cat_btn { flex: 0 0 auto; }
	.g27-sub .g27-srchsum { font-size: 14px; margin-top: 18px; }
}

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
	.g27-sub #dataContent .g27-jobcard,
	.g27-sub #dataContent .g27-section__t,
	.g27-sub .g27-skel > i,
	.g27-sub .g27-bigsearch.is-shake .txt { animation: none; }
}