/* 2026.10.16 : 과업지시서 INR-001 반응형 웹(PC·태블릿·스마트폰) — 부트스트랩 방식
   기본 폭은 style.css 에서 1180px 고정을 "최대 1180px, 좁으면 화면 폭"(부트스트랩 .container 와 같은 방식)으로 풀었다.
   화면 크기마다 폭을 정해 덮어쓰지 않고, 여기에는
     1) 어느 폭에서나 내용이 부모보다 넓어지지 않게 하는 공통 규칙
     2) 부트스트랩 navbar-expand-lg 와 같은 기준(992px 미만)에서 머리말을 "로고 + 메뉴 버튼"으로 접는 규칙
     3) 휴대폰(768px 미만)에서 여백·글자 크기·표 머리글·탭을 화면에 맞추는 규칙
   만 둔다. 목록 표는 js/responsive.js 가 부트스트랩 .table-responsive 로 감싼다. 레이아웃의 맨 끝에 둔다. */

/* 1) 공통 : 사진·입력칸이 화면 밖으로 나가지 않게 (인라인에서 옮긴 st-* 고정 폭도 화면이 좁으면 줄어듦) */
/*    (height 는 건드리지 않음 — .event_thumbnail 처럼 높이를 정해 둔 사진의 비율이 바뀌지 않게)
      (표 칸 안 입력칸은 제외 — 자동 폭 표에서 max-width:100% 를 주면 PC 에서도 칸이 줄어든다) */
.content-wrapper2 img, .content-wrapper2 video { max-width: 100%; }
.content-wrapper2 input, .content-wrapper2 select, .content-wrapper2 textarea, .content-wrapper2 .select2-container { max-width: 100%; }
.content-wrapper2 td input, .content-wrapper2 td select, .content-wrapper2 td textarea, .content-wrapper2 td .select2-container { max-width: none; }
.table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 표 칸의 한글이 한 글자씩 세로로 끊기지 않게 단어 단위로만 줄바꿈 → 칸이 모자라면 표가 넓어지고 가로로 밀어 본다 */
.table-responsive > table th, .table-responsive > table td { word-break: keep-all; }

/* 검색 상자의 회색 라벨 : 라벨이 그리드 칸(col-*) 자체라 회색이 칸 여백까지 칠해져 입력칸과 양옆 끝선이 어긋났다
   → 회색은 칸 안쪽(content-box)에만, 높이는 위아래 여백 대신 줄 높이로 입력칸(38px)과 같게 */
.srch_sty .form-group.row > .col-form-label[class*=" col-"], .srch_sty .form-group.row > [class*="col-"] > .col-form-label.d-block { background-clip: content-box; padding-top: 0; padding-bottom: 0; line-height: calc(2.25rem + 2px); }

/* 휴대폰 검색 조건 접기 (js/responsive.js) : 검색 칸이 여럿인 검색 상자는 "검색 조건 | 지금 조건 요약 ▾" 한 줄로 접어 두고 누르면 펼침 */
.m-filter-toggle { display: none; }
@media (max-width: 767.98px) {
  .m-filter-toggle { display: flex; align-items: center; width: 100%; margin-bottom: 0; padding: 10px 12px; gap: 10px; text-align: left;
                     background: #fff; border: 1px solid #dee2e6; border-radius: 6px; color: #222; font-size: 14px; }
  .m-filter-toggle::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 2px 0 auto; border: solid #888; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
  .m-filter-toggle[aria-expanded="true"] { margin-bottom: 12px; }
  .m-filter-toggle[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }
  .m-filter-label { flex: none; font-weight: bold; }
  .m-filter-text { min-width: 0; overflow: hidden; color: #777; white-space: nowrap; text-overflow: ellipsis; }
  .m-filter:not(.open) { display: none !important; }
  .srch_sty.m-filter-box { padding: 0 !important; border: 0; background: none; }
  .srch_sty.m-filter-box form > .m-filter.open { padding: 12px; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; }
}

/* 상세 "이름 | 값" 표 → 휴대폰 목록 (js/responsive.js toKv) : 이름은 작은 회색 글씨 위, 값은 아래. 짧은 값은 두 개씩 나란히 */
.kv-m { display: none; }
@media (max-width: 767.98px) {
  .kv-src { display: none !important; }
  .kv-m { display: flex; flex-wrap: wrap; background: #fff; border-top: 1px solid #eee; }
  .kv-i { flex: 0 0 100%; min-width: 0; padding: 10px 14px; border-bottom: 1px solid #eee; }
  .kv-i.kv-half { flex-basis: 50%; }
  .kv-i.kv-half + .kv-i.kv-half { border-left: 1px solid #eee; }
  .kv-l { margin-bottom: 2px; font-size: 12px; color: #888; }
  .kv-v { font-size: 14px; line-height: 1.5; color: #222; word-break: keep-all; overflow-wrap: anywhere; }
  .kv-v img { max-width: 100%; height: auto; }
  .kv-media { padding: 12px 14px; text-align: center; }
  .kv-media img { max-height: 240px; width: auto; }
}

/* 입력 양식 표 → 휴대폰에서 세로로 쌓기 (js/responsive.js toStack) : 이름(작은 회색) 위, 입력칸 아래 폭 가득 */
@media (max-width: 767.98px) {
  .content-wrapper2 table.table-stack, .table-stack > thead, .table-stack > tbody, .table-stack > tfoot, .table-stack > * > tr { display: block; width: 100% !important; }
  .content-wrapper2 table.table-stack { border: 1px solid #dee2e6 !important; border-radius: 6px; background: #fff; }
  .content-wrapper2 table.table-stack > * > tr > th, .content-wrapper2 table.table-stack > * > tr > td {
    display: block; width: 100% !important; max-width: none; min-height: 0; padding: 0 14px 12px !important; border: 0 !important; text-align: left !important; white-space: normal; }
  .content-wrapper2 table.table-stack > * > tr > .ts-l { padding: 12px 14px 4px !important; border-top: 1px solid #eee !important; background: none !important;
    color: #666; font-size: 13px; font-weight: 500; }
  .content-wrapper2 table.table-stack > tbody > tr:first-child > .ts-l:first-child { border-top: 0 !important; }
  .content-wrapper2 table.table-stack > thead > tr > * { padding: 10px 14px !important; background: #f4f6f9 !important; border-bottom: 1px solid #dee2e6 !important;
    color: #222; font-size: 15px; font-weight: bold; }
  .table-stack td:empty { display: none !important; }
  .content-wrapper2 .table-stack td input, .content-wrapper2 .table-stack td select, .content-wrapper2 .table-stack td textarea, .content-wrapper2 .table-stack td .select2-container { max-width: 100%; }
  /* 입력칸 하나 → 폭 가득 (퍼센트 폭·인라인 폭을 덮어씀) */
  .content-wrapper2 .table-stack td.ts-full input:not([type=checkbox]):not([type=radio]):not([type=file]), .content-wrapper2 .table-stack td.ts-full select,
  .content-wrapper2 .table-stack td.ts-full textarea, .content-wrapper2 .table-stack td.ts-full .form-group { width: 100% !important; }
  /* 입력칸 여럿 → 한 줄에 나눠 채움 ("~" "-" 글자는 사이에), 도움말 같은 블록은 다음 줄 */
  .content-wrapper2 table.table-stack > tbody > tr > td.ts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .content-wrapper2 .table-stack td.ts-row > input, .content-wrapper2 .table-stack td.ts-row > select, .content-wrapper2 .table-stack td.ts-row > .form-group {
    flex: 1 1 0; width: auto !important; min-width: 0; margin: 0 !important; }
  .content-wrapper2 .table-stack td.ts-row > .form-group > * { width: 100% !important; }
  .content-wrapper2 .table-stack td.ts-row > div:not(.form-group), .content-wrapper2 .table-stack td.ts-row > p, .content-wrapper2 .table-stack td.ts-row > small,
  .content-wrapper2 .table-stack td.ts-row > ul, .content-wrapper2 .table-stack td.ts-row > textarea { flex: 0 0 100%; }
  .content-wrapper2 .table-stack td.ts-row > br { display: none; }
  .content-wrapper2 .table-stack td .d-flex .form-control, .content-wrapper2 .table-stack td .input-group .form-control { width: auto !important; flex: 1 1 0; min-width: 0; }
}

/* 휴대폰 CKEditor (js/ckeditor-mobile.js 와 같이) : 도구 막대 단추를 손가락으로 누르기 쉽게 조금 크게 */
@media (max-width: 767.98px) {
  .cke_top .cke_toolbar { margin-bottom: 4px; }
  .cke_top a.cke_button { padding: 6px 7px; }
  .cke_top a.cke_combo_button { padding: 3px 4px; }
}

/* 링크 표시 : 밑줄(<u>) 대신 색으로 (style.css 가 링크 색을 검정 #222 로 덮어 써서 화면마다 <u> 로 링크를 표시해 왔다)
   마우스를 올리면 밑줄. 링크가 아닌 밑줄(훈련대상 등)은 밑줄만 없앰 */
a u, u.st-b4fc2a8 { text-decoration: none; color: #266ed4; }
a:hover u, a:focus u { text-decoration: underline; }
.st-455ea70 u { text-decoration: none; }

/* 2) 머리말 : 넓은 화면에서는 예전 그대로, 좁은 화면에서는 왼쪽 로고 + 오른쪽 "메뉴" 버튼, 누르면 메뉴가 아래로 펼쳐짐 */
.gnb-brand, .gnb-toggle { display: none; }

/* PC(992px 이상) 드롭다운 : 하위 메뉴 폭이 위 메뉴 글자 길이(141~212px)를 따라 들쭉날쭉하던 것을 맞춤.
   하위 메뉴만 넓히면(min-width) 위 메뉴 칸 밖으로 삐져나와 어긋나 보이므로, 위 메뉴 칸에 최소 폭을 주고 하위 메뉴는 칸 폭 그대로(100%) */
@media (min-width: 992px) {
  .admin #gnb .dep1 > li { min-width: 190px; }
  .admin #gnb .submenu { box-shadow: 0 8px 16px rgba(0,0,0,.15); }
  .admin #gnb .submenu > li > a { padding: 12px 16px; white-space: nowrap; }
}
/* 992~1199px : 메뉴가 6개(기업 담당자)면 190px × 6 이 화면을 넘어 두 줄로 꺾이므로 150px, 긴 하위 메뉴 글자는 줄바꿈 */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .admin #gnb .dep1 > li { min-width: 150px; }
  .admin #gnb .submenu > li > a { white-space: normal; word-break: keep-all; }
}

@media (max-width: 991.98px) {
  .admin header { height: auto; background-color: #021c56; }
  .admin .header { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .gnb-brand { display: block; line-height: 0; }
  .gnb-brand img { height: 30px; width: auto; }
  .gnb-toggle { display: inline-flex; margin-left: auto; align-items: center; height: 40px; padding: 0 12px; color: #fff; font-size: 15px; line-height: 1;
                background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; cursor: pointer; }
  .gnb-toggle:focus { outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; }
  .gnb-toggle-bar { display: inline-block; width: 18px; height: 12px; margin-right: 8px;
                    background: linear-gradient(#fff,#fff) 0 0 / 100% 2px no-repeat, linear-gradient(#fff,#fff) 0 5px / 100% 2px no-repeat, linear-gradient(#fff,#fff) 0 10px / 100% 2px no-repeat; }
  .gnb-toggle[aria-expanded="true"] { background: rgba(255,255,255,.12); }

  /* 메뉴 : 머리말 바로 아래로 펼치는 세로 목록. 묶음마다 구분선 */
  .admin #gnb { position: static; flex: 0 0 0; width: 0; }   /* 펼친 목록은 absolute 라 nav 자체는 자리를 차지하지 않게 → 버튼이 오른쪽 끝 */
  .admin #gnb .dep1 { display: none; position: absolute; left: 0; right: 0; top: 64px; z-index: 1000; padding: 4px 0 12px; background: #021c56;
                      border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 20px rgba(0,0,0,.25); }
  .admin #gnb.open .dep1 { display: block; }
  .admin #gnb .dep1 > li { float: none; }
  .admin #gnb .dep1 > li + li { border-top: 1px solid rgba(255,255,255,.1); }
  .admin #gnb .dep1 > li::before { display: none; }
  .admin #gnb .dep1 > li > a { display: block; padding: 14px 20px 10px; text-align: left; }
  .admin #gnb .dep1 > li > a > span { font-size: 16px; font-weight: 500; }
  .admin #gnb .current { background: none; }
  /* 하위 메뉴는 늘 펼쳐 둔다. !important : 마우스 hover 스크립트(slideUp)가 남기는 style="display:none" 보다 앞서야 함 */
  .admin #gnb .submenu { display: block !important; height: auto !important; position: static; width: auto; padding-bottom: 8px; background: none; text-align: left; }
  .admin #gnb .submenu > li > a { display: block; width: auto; padding: 9px 20px 9px 32px; font-size: 14px; color: #b8c4e0; }
  .admin #gnb .submenu > li > a:hover, .admin #gnb .submenu > li > a:active { background: rgba(255,255,255,.08); color: #fff; }
}

/* 3) 휴대폰(부트스트랩 sm 미만, 768px 미만) : 여백·글자 크기를 화면에 맞게 */
@media (max-width: 767.98px) {
  .content-wrapper2 { min-height: 0; padding: 20px 12px 48px; }
  .content-wrapper2 .content-header h1, .content-wrapper2 h1 { font-size: 1.4rem; }
  .content-wrapper2 .breadcrumb { padding: 4px 0; margin-bottom: 8px; font-size: 12px; }
  .content-wrapper2 .card-body { padding: 12px; }
  .content-wrapper2 .callout, .content-wrapper2 .alert { font-size: 13px; }

  /* 표 : 글자를 조금 줄이고 머리글은 한 줄로 → 표는 가로로 밀어 본다 */
  .table-responsive > table { font-size: 13px; }
  .table-responsive > table th { white-space: nowrap; }
  .table-responsive > table th, .table-responsive > table td { padding: 8px 10px; }

  /* 목록 표 → 카드 (js/responsive.js 가 .table-cards 와 칸마다 data-label 을 붙인 표만)
     한 행 = 카드 한 장, 칸마다 "머리글 이름 | 값" 한 줄, 버튼만 있는 칸은 카드 아래쪽 구분선 밑 파란 글자 단추 */
  .table-responsive > table.table-cards { display: block; border: 0; font-size: 14px; }
  .table-cards > thead, .table-cards tr.tc-head { display: none !important; }
  .table-cards > tbody, .table-cards > tfoot { display: block; }
  .table-cards > tbody > tr, .table-cards > tfoot > tr { display: flex; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 0; text-align: left; overflow: hidden;
                              background: #fff !important; border: 1px solid #dee2e6; border-radius: 6px; }
  .table-cards > tbody > tr.tc-has-actions { padding-bottom: 0; }
  .table-cards > tfoot > tr { background: #f4f6f9 !important; border-color: #ced4da; font-weight: bold; }   /* 합계 카드 */
  .table-responsive > table.table-cards > tbody > tr > td, .table-responsive > table.table-cards > tfoot > tr > td { display: block; flex: 0 0 100%; position: relative; min-height: 28px; padding: 4px 14px 4px 112px !important;
                              border: 0 !important; background: transparent !important; text-align: left !important; vertical-align: top; white-space: normal; line-height: 1.5; }
  .table-cards > tbody > tr > td::before, .table-cards > tfoot > tr > td::before { content: attr(data-label); position: absolute; left: 14px; top: 5px; width: 90px; overflow: hidden;
                              color: #999; font-size: 13px; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; }
  /* 첫 칸(기업명·이름·설문명 등)은 이름표 없이 카드 제목으로 */
  .table-responsive > table.table-cards > tbody > tr > td.tc-first { padding: 2px 14px 6px !important; font-size: 15px; font-weight: 600; color: #222; }
  .table-cards > tbody > tr > td.tc-first::before { display: none; }
  .table-cards > tfoot > tr > td.tc-first { font-weight: 600; color: #222; }
  .content-wrapper2 .table-cards td input[type=file] { width: 100%; }
  .content-wrapper2 .table-cards td input:not([type=checkbox]):not([type=radio]), .content-wrapper2 .table-cards td select, .content-wrapper2 .table-cards td textarea { max-width: 100%; }
  .table-responsive > table.table-cards > tbody > tr > td.tc-nolabel, .table-responsive > table.table-cards > tfoot > tr > td.tc-nolabel { padding-left: 14px !important; }
  .table-cards > tbody > tr > td.tc-nolabel::before, .table-cards > tfoot > tr > td.tc-nolabel::before { display: none; }
  .table-responsive > table.table-cards > tbody > tr > td.tc-seq, .table-responsive > table.table-cards > tbody > tr > td.tc-blank, .table-responsive > table.table-cards > tfoot > tr > td.tc-blank { display: none; }
  /* 단추 줄 : 카드 아래쪽 구분선 밑, 단추 칸이 여럿이면 한 줄에 나란히
     (flex-basis 1px : 0 이면 앞 칸(100%) 옆 같은 줄에 끼어 오른쪽 밖으로 밀려나므로 늘 새 줄로) */
  .table-responsive > table.table-cards > tbody > tr > td.tc-actions { display: flex; flex: 1 1 1px; align-items: stretch; min-width: 0; margin-top: 8px; padding: 0 !important;
                              border-top: 1px solid #eee !important; }
  .table-cards > tbody > tr > td.tc-actions + td.tc-actions { border-left: 1px solid #eee !important; }
  .table-cards > tbody > tr > td.tc-actions::before { display: none; }
  .table-cards > tbody > tr > td.tc-actions.tc-labeled::before { display: flex; flex: none; align-items: center; position: static; width: auto; overflow: visible; padding-left: 12px; }
  .table-cards td.tc-actions.tc-labeled .btn { padding-left: 4px; padding-right: 4px; }
  .table-cards td.tc-actions > * { flex: 1 1 0; display: flex; justify-content: center; align-items: center; margin: 0 !important; }
  .table-cards td.tc-actions > * + * { border-left: 1px solid #eee; }
  .table-cards td.tc-actions .btn, .table-cards td.tc-actions input[type=button], .table-cards td.tc-actions input[type=submit] { flex: 1 1 auto; width: 100%; margin: 0 !important; padding: 10px 8px; background: transparent !important; border: 0; border-radius: 0;
                              box-shadow: none; color: #266ed4 !important; font-size: 14px; font-weight: 500; white-space: nowrap; }
  .table-cards td.tc-actions .btn-danger, .table-cards td.tc-actions .btn-outline-danger { color: #dc3545 !important; }
  .table-cards td.tc-actions .btn:hover, .table-cards td.tc-actions .btn:active { background: #f3f8ff !important; }
  /* 내역 없음 행 */
  .table-cards > tbody > tr.tc-empty { padding: 0; }
  .table-cards > tbody > tr.tc-empty > td { display: block; flex: 0 0 100%; padding: 16px 0 !important; border: 0 !important; text-align: center !important; }

  /* 탭이 두 줄로 접히지 않게 가로로 밀어 보기 */
  .content-wrapper2 .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* 꼬리말 */
  footer .footer .address p, footer .footer .copyright { font-size: 12px; line-height: 1.6; }
}