@charset "UTF-8";

/* ══════════════════════════════
   HRD 강사뱅크 — 서브 컨텐츠 (1023px 이하)
   · PC 값을 먼저 불러온 뒤 좁은 화면 값만 덮어쓴다
   · 페이지에서는 이 파일 하나만 링크한다
   · 규칙 옆 주석의 숫자는 축소 전 PC 원본 값
══════════════════════════════ */

@import url("contents_pc.css");

@media only all and (max-width: 1023px) {
    .title-wrapper {
        margin-bottom: 15px;
        align-items: flex-end;
    }

    .title-wrapper .title-type01,
    .title-wrapper .title-type02,
    .title-wrapper .title-type03,
    .title-wrapper .word-type01,
    .title-wrapper .word-type02 {
        margin-bottom: 0;
    }

    .title-type01 {
        position: relative;
        padding-left: 34px;
        margin-bottom: 12px;
        font-size: 24px;
        line-height: 32px;
        background-image: url(../img/bul/bullet_type01.png);
        background-size: 27px 27px;
        background-position: 0 0;
    }
    .title-type02 {
        margin-bottom: 4px;
        padding-left: 18px;
        font-size: 17px;
        line-height: 24px;
        background-position: 0 6px;
        background-size: 12px 12px;
    }
    .title-type03 {
        margin-bottom: 4px;
        font-size: 15px;
        line-height: 19px;
    }
    .word-type01 {
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 23px;
    }
    .word-type02 {
        font-size: 13px;
        line-height: 20px;
    }
    .circle-bullet {
        padding-left: 18px;
    }
    .circle-bullet:before {
        top: 8.5px;
        left: 6px;
        width: 3px;
        height: 3px;
    }
    .line-bullet {
        padding-left: 9px;
    }
    .line-bullet:before {
        top: 12px;
        width: 5px;
        height: 1px;
    }
    .ul-list01 {
        font-size: 14px;
        line-height: 23px;
    }
    .ul-list01>li {
        position: relative;
        padding-left: 8px;
    }
    .ul-list01>li:before {
        top: 10px;
        width: 2px;
        height: 2px;
    }
    .ul-list01>li>ul,
    .ul-list01>li>ol {
        padding: 8px 0;
        font-size: 13px;
        line-height: 21px;
    }
    .ul-list01>li>ul>li {
        padding-left: 8px;
    }
    .ul-list01>li ol li {
        padding-left: 15px;
    }
    .ul-list01>li ol ol {
        font-size: 12px;
        line-height: 18px;
    }
    .ol-list01 {
        font-size: 14px;
        line-height: 23px;
    }
    .ol-list01>li {
        position: relative;
        padding-left: 15px;
    }
    .ol-list01>li .number {
        font-size: 10px;
    }
    .ol-list01>li>ul,
    .ol-list01>li>ol {
        padding: 8px 0;
        font-size: 13px;
        line-height: 21px;
    }
    .ol-list01>li>ul>li {
        padding-left: 15px;
    }
    .ol-list01>li>ol>li {
        padding-left: 15px;
    }
    .ol-list01>li>ol>li .number {
        font-size: 10px;
    }


    .search-filter-body {
        padding: 20px;
    }

    /* 좁은 화면에서는 좌우로 나누지 않고 세로로 쌓는다 */
    .search-filter-body .one-box {
        display: block;
    }

    .search-filter-body .one-box > .half-box + .half-box {
        margin-top: 14px;
    }

    /* 라벨 위 / 필드 아래로 세로 배치 */
    .filter-row {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .filter-row + .filter-row,
    .filter-row > dt ~ dt {
        margin-top: 14px;
    }

    .filter-row-top > dt {
        padding-top: 0;
    }

    .filter-row > dd.dd-full {
        grid-column: auto;
    }

    .field-row-3 {
        flex-wrap: wrap;
        gap: 8px;
    }

    .field-row-3 > .field-select {
        flex: 1 1 30%;
    }

    .input-checkbox-wrapper.region-list {
        grid-template-columns: repeat(4, 1fr);
    }

    .region-list > .input-checkbox-area:nth-child(12) {
        grid-column-start: auto;
    }

    .ai-recommend-list {
        grid-template-columns: 1fr;
        padding: 20px 20px 10px 20px;
        gap: 8px;                     /* 10 */
    }

    .tutor-list {
        grid-template-columns: 1fr;
        gap: 16px;                    /* 20 */
    }

    /* ── AI 추천강사 / 강사 목록 카드 : PC 값 / 1.25 ── */

    .ai-card {
        padding: 16px;                /* 20 */
    }

    .tutor-card {
        padding: 21px 24px;           /* 26 30 */
    }

    .tutor-head {
        gap: 4px;                     /* 5 */
        margin-bottom: 16px;          /* 20 */
    }

    .tutor-name {
        gap: 6px;                     /* 8 */
        font-size: 18px;              /* 22 */
    }

    .tutor-name-text {
        min-width: 4.4rem;            /* 5.5rem */
    }

    .tutor-info {
        padding-bottom: 11px;         /* 14 */
        margin-bottom: 16px;          /* 20 */
        gap: 4px;                     /* 5 */
        font-size: 13px;              /* 16 */
    }

    .tutor-info div {
        gap: 8px;                     /* 10 */
    }

    .tutor-info dt {
        min-width: 86px;              /* 107 */
    }

    .result-head {
        flex-wrap: wrap;
        padding: 20px;
    }

    /* ── 강사 상세 ── */
    .instructor-page {
        padding: 35px;
    }

    .profile-card {
        gap: 20px;
        padding: 0 0 24px 0;
        margin-bottom: 36px;
    }

    /* PC 는 padding-right 로 자리를 비워 두지만 여기서는 절대배치를 풀어
       본문과 칸을 나눠 쓴다 (그대로 두면 설명글이 사진 밑으로 깔린다) */
    .profile-side {
        position: static;
        flex: 0 0 auto;
        order: 1;
    }

    /* 모바일 크기 : PC 값 / 1.25 (주석 숫자는 PC 값) */
    .profile-info {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 16px;          /* 20 */
        font-size: 15px;              /* 19 */
    }

    .profile-ncs {
        font-size: 13px;              /* 16 */
    }

    .profile-info > div,
    .profile-ncs {
        gap: 8px;                     /* 10 */
    }

    .profile-info dt,
    .profile-ncs dt {
        flex-basis: 84px;
    }

    /* 기간을 위로 올리고 내용을 아래에 둔다 */
    .history-list > li,
    .history-list-simple > li {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .history-period {
        flex-basis: auto;
    }

    .history-date,
    .history-term {
        display: inline;
    }

    .history-term::before {
        content: " · ";
        color: #cccccc;
    }

    /* 강사위키는 좁은 화면에서도 PC 와 같은 가로 배치를 유지하고 크기만 줄인다 */
    .wiki-item {
        gap: 16px;                    /* 48 */
    }

    /* float 용 clearfix 가 flex 아이템이 되어 본문 뒤에 gap 이 하나 더 생긴다 */
    .wiki-item:after {
        display: none;
    }

    .wiki-thumb {
        flex: 0 0 40%;                /* PC 는 357px 고정, 여기선 같은 비율로 줄인다 */
        height: auto;
        aspect-ratio: 357 / 230;
    }

    .wiki-item-title {
        font-size: 19px;
    }

    /* ── 강사 섭외요청 ── */
    .input-phone-wrapper {
        gap: 6px;
    }

    .input-schedule-wrapper {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* 일자·시각이 한 줄에 다 들어가지 않아 ~ 는 쓰지 않는다 */
    .input-schedule-wrapper > .word-unit {
        display: none;
    }

    .input-calendar-area {
        flex: 1 1 100%;
        width: auto;
        padding-right: 36px;
    }

    /* board_pc.css 의 190px 고정을 풀어 일자·시각 칸이 dd 폭을 다 쓰게 한다 */
    .input-schedule-wrapper > .input-calendar-area,
    .input-schedule-wrapper > .input-time-area {
        flex: 1 1 100%;
    }

    .board-write dl dd .input-schedule-wrapper .input-time-area > select {
        flex: 1 1 0;
        min-width: 0;
    }

    /* 훈련일정 : 768 ~ 1023 구간은 일자+시각을 한 줄씩 두 줄로 */
    @media only all and (min-width: 768px) {
        .input-schedule-wrapper > .input-calendar-area,
        .input-schedule-wrapper > .input-time-area {
            flex: 1 1 40%;
        }
    }

    .input-time-area {
        flex: 1 1 0;
        min-width: 0;
        gap: 6px;
    }

    .board-write dl dd .input-time-area > select {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    /* ── 강사섭외 히스토리 ── */

    .table-type02 table thead th,
    .table-type02 table tbody th,
    .table-type02 table tfoot th {
        padding: 15px 5px;
        font-size: 13px;
        line-height: 1.38461;
        word-break: break-all;
    }

    .table-type02 table tbody td,
    .table-type02 table tfoot td {
        padding: 10px 5px;
        font-size: 13px;
        line-height: 1.38461;
    }
    /* ══════════════════════════════
       모바일 크기 — PC 값 / 1.25
       (모바일 규칙이 없던 항목만. 주석 숫자는 PC 값)
    ══════════════════════════════ */

    .point-important {
        font-size: 13px;              /* 16 */
    }

    .word-notice01 {
        padding-left: 14px;           /* 18 */
        font-size: 16px;              /* 20 */
        line-height: 27px;            /* 34 */
    }

    .word-date {
        font-size: 13px;              /* 16 */
    }

    /* ── 강사검색 ── */

    .search-filter {
        margin-bottom: 55px;          /* 85 */
    }

    .field-row {
        gap: 10px;                    /* 12 */
    }

    .search-submit-area {
        padding: 21px 0 0;            /* 26 */
    }

    .search-submit-area .btn-primary {
        min-width: 112px;             /* 140 */
    }

    .ai-recommend {
        margin-bottom: 32px;          /* 40 */
        border-radius: 8px;           /* 10 */
    }

    .ai-recommend-head {
        height: 62px;                 /* 78 */
        padding: 0 20px;              /* 30 */
    }

    .ai-recommend-label {
        gap: 12px;                    /* 15 */
    }

    .ai-recommend-title {
        font-size: 19px;              /* 24 */
    }

    .tutor-meta {
        font-size: 14px;              /* 18 */
    }

    .tutor-view {
        width: 21px;                  /* 26 */
        height: 21px;                 /* 26 */
    }

    .tutor-view img {
        width: 9px;                   /* 11 */
    }

    .tutor-name + .tutor-view {
        margin-left: 6px;             /* 7 */
    }

    .tutor-foot .tutor-career {
        font-size: 13px;              /* 16 */
    }

    .tutor-foot .state {
        gap: 4px;                     /* 5 */
        font-size: 13px;              /* 16 */
    }

    .tutor-foot .state .dot {
        width: 11px;                  /* 14 */
        height: 11px;                 /* 14 */
        border-width: 2px;            /* 3 */
    }

    .result-total {
        font-size: 16px;              /* 20 */
    }

    .result-sort {
        height: 32px;                 /* 40 */
        min-width: 106px;             /* 132 */
        padding: 0 29px 0 11px;       /* 0 36 0 14 */
        background-position: right 12px center;
        font-size: 12px;              /* 15 */
        background-size: 8px 4.8px
    }

    /* ── 강사 상세 ── */

    .instructor-page {
        padding: 44px;                /* 55 */
        border-radius: 16px;          /* 20 */
    }

    .word-date + .instructor-page {
        margin-top: 10px;             /* 25 */
    }

    .profile-name {
        margin-bottom: 19px;          /* 24 */
        font-size: 24px;              /* 30 */
    }

    .profile-badge .badge {
        height: 28px;
        border-radius: 14px;
        font-size: 13px;
    }    

    .profile-photo {
        width: 96px;                  /* 120 */
        height: 124px;                /* 155 */
    }

    .instructor-section {
        margin-bottom: 32px;          /* 40 */
    }

    .instructor-title {
        margin-bottom: 7px;           /* 9 */
        font-size: 16px;              /* 20 */
    }

    .instructor-text {
        font-size: 14px;              /* 18 */
    }

    .keyword-tags {
        gap: 6px;                     /* 7 */
    }

    .keyword-tags .tag {
        height: 29px;                 /* 36 */
        padding: 0 12px;              /* 0 15 */
        font-size: 13px;              /* 16 */
    }

    .instructor-section.detail-section-line {
        margin-top: 44px;             /* 55 */
    }

    .instructor-section.detail-section-line + .instructor-section.detail-section-line {
        margin-top: 44px;             /* 80 */
    }

    .detail-section-line .instructor-title {
        padding: 12px 0 10px 0;       /* 15 0 13 0 */
    }

    .history-head {
        gap: 16px;                    /* 20 */
    }

    .history-head strong {
        font-size: 16px;              /* 20 */
    }

    .history-sub {
        font-size: 11px;              /* 14 */
    }

    .history-desc {
        margin-top: 10px;             /* 12 */
        font-size: 13px;              /* 16 */
    }

    .wiki-section {
        margin-top: 52px;             /* 65 */
    }

    .wiki-section .btn-more {
        top: 10px;                    /* 12 */
        gap: 6px;                     /* 8 */
        font-size: 13px;              /* 16 */
    }

    .btn-more img {
        width: 10px;                  /* 12 */
    }

    .wiki-list > li + li {
        margin-top: 80px;             /* 33 */
    }

    .wiki-body {
        padding-top: 0;            /* 17 */
    }

    .wiki-desc {
        font-size: 16px;              /* 20 */
    }

    /* ── 표 ── */

    .table-type03 table thead th,
    .table-type03 table tbody th,
    .table-type03 table tfoot th,
    .table-type03 table tbody td,
    .table-type03 table tfoot td {
        padding: 14px 22px;           /* 17 27 */
        font-size: 13px;              /* 16 */
        line-height: 22px;            /* 28 */
        word-break: break-all;
    }

    /* 강사 섭외요청 버튼 : PC 값 / 1.25 (주석 숫자는 PC 값) */
    .btn-request {
        gap: 6px;                     /* 8 */
        height: 37px;                 /* 46 */
        padding: 0 16px;              /* 0 20 */
        border-radius: 6px;           /* 8 */
        font-size: 16px;              /* 20 */
    }

    .btn-request img {
        width: 12px;                  /* 15 */
    }

    /* NCS 분류 : 대·중·소분류 셀렉트를 한 줄에 하나씩 */
    .field-row-3 > .field-select {
        flex: 1 1 100%;
    }

    .field-select {
        font-size: 12px;
        height: 36px;
        text-indent: 16px;
        background-position: right 12px center;
        background-size: 8px 4.8px
    }

}

/* 활동지역 : 680 ~ 1023 구간은 5개씩 */
@media only all and (min-width: 680px) and (max-width: 1023px) {
    .input-checkbox-wrapper.region-list {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* 열이 많은 표는 좁은 화면에서 행 하나를 카드 하나로 세워서 보여준다.
   display 를 바꾸면 표 의미구조가 사라지므로 마크업에 role 을 명시해두었고,
   thead 는 숨기지 않고 화면 밖으로만 빼서 보조기기에는 그대로 읽히게 한다. */
@media only all and (max-width: 1023px) {
    .table-card {
        border-top: 0;
    }

    .table-card table,
    .table-card tbody,
    .table-card tr,
    .table-card td {
        display: block;
    }

    /* reset.css 의 border-collapse: collapse 가 남아 있으면 카드(tr)의
       좌·우·아래 테두리가 병합 규칙에 먹혀 위쪽 선만 그려진다 */
    .table-card table {
        border-collapse: separate;
    }

    .table-card colgroup {
        display: none;
    }

    .table-card thead {
        overflow: hidden;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        clip: rect(0, 0, 0, 0);
    }

    .table-card tbody tr {
        padding: 8px 16px;
        border: 1px solid #ddd;
        border-top: 2px solid #126bb5;
        background: #fff;
    }

    .table-card tbody tr + tr {
        margin-top: 12px;
    }

    .table-card table tbody td {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 7px 0;
        border: 0;
        text-align: left;
        word-break: keep-all;
    }

    .table-card table tbody td + td {
        border-top: 1px solid #f1f1f1;
    }

    .table-card tbody td:before {
        content: attr(data-label);
        flex: 0 0 72px;
        color: #666666;
        font-weight: 700;
    }
}

@media only all and (max-width: 1023px) {
    /* ── 신청서작성 ── */

    .word-notice02 {
        padding-left: 18px;
        font-size: 14px;
    }

    .word-notice02:before {
        top: 4px;
        width: 11px;
        height: 11px;
        background-size: 11px 11px;
    }

    .input-email-wrapper > select {
        flex: 1 1 100%;
        width: auto;
    }

    .input-checkbox-wrapper.horizontal {
        gap: 10px 16px;
    }

    .input-checkbox-wrapper .input-checkbox-area label {
        font-size: 14px;
    }

    /* 열이 많은 입력표는 가로 스크롤로 넘긴다.
       카드로 세우는 표(.table-card)는 제외한다 */
    .table-type01:not(.table-card),
    .table-type02:not(.table-card) {
        overflow-x: auto;
    }

    .table-type01:not(.table-card) > table,
    .table-type02:not(.table-card) > table {
        min-width: 720px;
    }
}

/* 근무기간 : 좁아지면 ~ 는 첫 줄에 남기고 종료일만 아래로 내린다.
   contents_pc.css 의 .table-type01 .input-calendar-area(flex: 1 1 0) 를 이겨야 한다 */
@media only all and (max-width: 850px) {
    .input-period {
        flex-wrap: wrap;
    }

    .table-type01 .input-period > .input-calendar-area,
    .table-type02 .input-period > .input-calendar-area {
        /* 두 줄의 칸 폭을 같게 : 늘어나면 아래 칸만 ~ 자리까지 넓어진다 */
        flex: 0 0 calc(100% - 20px);
        width: auto;
    }
}

/* 강사위키 : 768 이하에서는 썸네일을 본문 위로 올려 한 줄을 다 쓴다 */
@media only all and (max-width: 768px) {
    .wiki-item {
        flex-direction: column;
    }

    .wiki-thumb {
        flex: 0 0 auto;
        width: 100%;
    }

    /* PC 는 원본 크기 그대로 가운데 정렬이라 넓어진 칸을 못 채운다 */
    .wiki-thumb img {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-width: none;
    }
}

@media only all and (max-width: 640px) {
    /* 카드 여백은 1023 블록의 값(16px / 21px 24px)을 그대로 쓴다.
       여기서 20px 로 되돌리면 화면이 좁아질수록 여백이 커져 버린다 */

    /* 폭이 좁으면 이름이 지나치게 눌리므로 성별·경력을 아래 줄로 내린다 */
    .tutor-head {
        flex-wrap: wrap;
    }

    .tutor-name {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    /* 보유자격도 활동지역과 같은 3칸 격자로 맞춘다 */
    .input-checkbox-wrapper.region-list,
    .input-checkbox-wrapper.cert-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .input-checkbox-wrapper.cert-list {
        gap: 10px 8px;                /* 활동지역과 같은 간격 */
    }

    /* ── 강사 상세 ── */

    /* 사진칸을 본문 위로 올리고 본문은 한 줄을 다 쓴다 */
    .profile-card {
        flex-direction: column;
        align-items: stretch;
    }

    .profile-side {
        flex-direction: column;
        align-items: center;
        order: 0;
    }

    .join-count {
        gap: 6px 20px;
    }

    .join-count strong {
        font-size: 16px;
    }
}

/* 검색필터 기간 : 아주 좁은 화면에서는 ~ 를 첫 줄에 남기고 종료일만 아래로 내린다 */
/* 475 이하 : 보유자격은 글자가 길어(우수숙련 기술자) 2칸씩 */
@media only all and (max-width: 475px) {
    .input-checkbox-wrapper.cert-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only all and (max-width: 359px) {
    .search-filter .input-calendar-wrapper {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .search-filter .input-calendar-wrapper > .input-calendar-area {
        flex: 0 0 calc(100% - 30px);
    }
}