@charset "utf-8";

/* ===================================================================
   포트폴리오 게시판 스킨 (2026-09-28)

   [배경] 이 게시판은 menu/sub03 의 정적 페이지 + 모달 팝업을 대체한다.
          모달 안에만 있던 내용은 검색엔진·AI 크롤러가 읽을 수 없어
          GEO·AEO 타겟팅이 불가능했다. 글 하나당 주소 하나를 갖게 하면서
          기존 폰트·간격·색은 그대로 옮겨 왔다.

   [출처] .col01/.row01/.card01     ← menu/sub03/index.php 의 인라인 style
          .modal._portfolio 계열     ← menu/sub03/modal.php 의 인라인 style
          #bo_cate                   ← skin/board/news/style.css
   =================================================================== */


/* -------------------------------------------------------------
   1. 페이지 상단 — 제목 + 소개문

   bbs/board.php 는 .page-title-wrap 안에 h2 만 출력한다.
   기존 포트폴리오 페이지는 제목과 소개문을 한 덩어리로 묶고 그 아래에
   구분선을 그었으므로, 구분선을 소개문 쪽으로 넘긴다.
   (board.php 가 인라인 <style> 로 margin-bottom 을 주므로 !important 가 필요하다)
   ------------------------------------------------------------- */
/* [주의] 제목 칸(.page-title-wrap)의 배경 로고는 '목록'에서만 쓴다.
   상세 페이지에도 같은 칸이 있어서 여기에 두면 로고가 목록 버튼과 겹친다.
   그래서 이 규칙만 list.skin.php 안의 <style> 로 옮겨 두었다. */

/* 구분선 아래 여백 — 다른 메뉴 페이지와 같은 간격을 쓴다. (2026-09-30)
   원래 .page-title-wrap 이 가지고 있던 margin-bottom(--krds-spacer-20, 8rem)을
   구분선과 함께 이쪽으로 옮겨온다. 값을 직접 적지 않고 토큰을 그대로 써서
   디자인 시스템이 바뀌면 같이 따라가게 한다.
   (기준: /service/procedure/ — 선 아래 80px) */
.pf_intro {
    margin: 0 0 var(--krds-spacer-20, 8rem);
    padding: 0 0 30px 0;
    border-bottom: 0.1rem solid var(--krds-gray-30, #d8d8d8);
}

.pf_intro .sub_text01 {
    margin: 0;
}

.main_doc {
    text-indent: -15px;
    padding: 0 0 0 15px;
}

.main_doc img.bullet_point01 {
    vertical-align: text-top;
}


/* -------------------------------------------------------------
   2. 분류 탭 — 콤퓨타이야기와 같은 형태를 쓴다
   ------------------------------------------------------------- */
#bo_cate {
    margin: 25px 0 0;
}

#bo_cate h2 {
    position: absolute;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

#bo_cate ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_cate ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    content: "";
}

#bo_cate li {
    display: inline-block;
    padding: 4px;
}

#bo_cate a {
    display: block;
    line-height: 28px;
    padding: 5px 16px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid var(--krds-gray-30, #d8d8d8);
    color: var(--krds-gray-70, #555555);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#bo_cate a:focus,
#bo_cate a:hover,
#bo_cate a:active {
    text-decoration: none;
    background: var(--krds-secondary-5, #edf1f5);
    border-color: var(--krds-secondary, #003675);
    color: var(--krds-secondary, #003675);
}

#bo_cate #bo_cate_on {
    z-index: 2;
    background: var(--krds-secondary, #003675);
    border-color: var(--krds-secondary, #003675);
    color: #fff;
    font-weight: 700;
}


/* -------------------------------------------------------------
   3. 카드 목록 — 기존 정적 페이지의 그리드를 그대로 쓴다
   ------------------------------------------------------------- */
/* [주의] 원래는 width:fit-content 였다. 정적 페이지 시절에는 한 면에 늘 6~9장이
   깔려서 드러나지 않았지만, 분류 탭이 생겨 1~4장만 남는 경우가 나오면서
   문제가 됐다. fit-content 는 '내용만큼'이라 카드가 적으면 칸이 좁아지고,
   카드 폭이 그 좁아진 칸의 23% 로 다시 계산되어 함께 쪼그라든다.
   (실측 : 8장 219px / 4장 193px / 2장 95px / 1장 153px)
   폭을 100% 로 고정해 장수와 무관하게 카드 크기가 같게 한다. */
.col01 {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 50px auto 50px;
    gap: 15px;
}

.row01 {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.row01 .card01 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 23%;
    gap: 10px;
    cursor: pointer;
    border-radius: 5px;
    overflow: hidden;
}

.row01 .card01 img {
    width: 100%;
    transition: transform 0.3s;
}

.row01 .card01:hover img {
    transform: scale(1.1);
}

/* 카드 이름이 밝은 사진 위에서도 읽히도록 아래쪽에 어두운 그라데이션을 깐다. (2026-09-30)

   [배경] 기존 썸네일 40장은 이미지 자체를 어둡게 만들어 두었다.
          (라벨 영역 평균 밝기 중앙값 69 / 최대 123)
          반면 캄몽에서 가져온 사진은 그런 처리가 없어 글자가 묻힌다.
          (중앙값 170 / 최대 246 — 거의 흰 바탕)

   [방법] 이미지를 다시 만들지 않고 CSS 로 덮는다. 원본은 그대로 둔다.
          전체에 brightness() 를 걸면 이미 어두운 기존 카드가 과하게 어두워지므로,
          글자가 놓이는 아래쪽만 덮어 위쪽 사진은 그대로 보이게 한다.
          앞으로 올리는 사진에도 손대지 않고 그대로 적용된다. */
.row01 .card01::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* 2026-09-30 : 지정값. 높이 55% → 82.5%, 농도는 아래 값으로 고정한다. */
    height: 82.5%;
    background: linear-gradient(to top,
        rgba(0, 0, 0, .95) 0%,
        rgba(0, 0, 0, .45) 50%,
        rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

.row01 .card01 .card_text01 {
    position: absolute;
    bottom: 15px;
    left: 15px;
    z-index: 2;
    color: #fff;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* 카드 전체를 링크로 감싼다. 기존 div 와 같은 상자로 보이게 한다. */
.row01 a.card01,
.row01 a.card01:hover,
.row01 a.card01:focus {
    text-decoration: none;
    color: inherit;
}

/* 비공개 항목 — 관리 권한자에게만 목록에 나타난다 */
.row01 .card01.is_draft img {
    filter: grayscale(1) brightness(.75);
}

.row01 .card01 .pf_draft_mark {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 4px;
    background: #7a5a12;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.pf_empty {
    width: 100%;
    padding: 60px 0;
    text-align: center;
    color: var(--krds-gray-60, #6d7882);
}


/* -------------------------------------------------------------
   4. 상세 보기 — 모달 안에 있던 배치를 페이지로 옮긴 것
   ------------------------------------------------------------- */
#pf_view {
    padding: 10px 0 0;
}

#pf_view .pf_head {
    margin: 0 0 var(--krds-spacer-4, 1.6rem);
}

#pf_view .pf_cate {
    margin: 0 0 12px;
}

#pf_view .pf_title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--krds-gray-90, #1d1d1d);
}

/* 해시태그 줄 — 모달의 .conts-tit 와 같은 글자색·크기 */
#pf_view .pf_tags {
    margin: 10px 0 0;
    color: #0074E6;
    font-size: var(--krds-fz-title-xsm, 1.7rem);
    font-weight: 700;
    line-height: 1.5;
    word-break: keep-all;
}

#pf_view .pf_body {
    color: var(--krds-gray-90, #1d1d1d);
}

/* 이미지 슬라이드

   [주의] 본문 칸(.contents)은 플렉스 아이템이다. min-width 기본값이 auto 라
          자식의 '최대 내용 너비'까지 늘어나는데, 슬라이드 원본 이미지가
          3,000px 을 넘다 보니 칸이 통째로 부풀고, 스와이퍼가 그 폭을 다시
          슬라이드 폭으로 잡아 서로 밀어올리며 폭이 발산한다.
          (실측 33,554,432px = 2^25 까지 커졌다)
          min-width:0 으로 내려 부모가 정한 폭을 따르게 한다. */
.contents {
    min-width: 0;
}

#pf_view .vb-swiper {
    width: 100%;
    max-width: 100%;
}

#pf_view .vb-swiper .swiper {
    width: 100%;
}

#pf_view .vb-swiper {
    position: relative;
    margin: 0 0 var(--krds-spacer-4, 1.6rem) 0;
    border-radius: 10px;
    overflow: hidden;
}

#pf_view .vb-swiper .swiper-wrapper {
    margin: 0;
    padding: 0;
    list-style: none;
}

#pf_view .vb-swiper .swiper-slide {
    aspect-ratio: 16/9;
}

/* 기존에는 background-image 라 크롤러가 읽지 못했다. img + alt 로 바꾼다. */
#pf_view .vb-swiper .swiper-slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

#pf_view .vb-swiper .swiper-button-prev {
    left: 15px;
}

#pf_view .vb-swiper .swiper-button-next {
    right: 15px;
}

#pf_view .vb-swiper .swiper-indicator {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* 소제목 — 모달의 <b class="main_title01"> 과 같은 크기로 보이게 한다 */
#pf_view .main_title01 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 2;
}

/* 항목 목록 — 보이는 모습은 "<b>라벨</b> : 값" 그대로지만
   dl/dt/dd 라서 기계가 항목-값 쌍으로 읽을 수 있다. */
#pf_view .pf_meta {
    margin: 0 0 24px;
}

#pf_view .pf_meta > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .4em;
    line-height: 1.9;
}

#pf_view .pf_meta dt {
    flex-shrink: 0;
    margin: 0;
    font-weight: 700;
}

#pf_view .pf_meta dt::after {
    content: " :";
}

#pf_view .pf_meta dd {
    margin: 0;
    word-break: keep-all;
}

#pf_view .pf_desc {
    margin: 0;
    line-height: 1.9;
    word-break: keep-all;
}

#pf_view .pf_foot {
    display: flex;
    justify-content: center;
    margin: 40px 0 0;
}


/* -------------------------------------------------------------
   5. 공개 / 비공개 상자 — 콤퓨타이야기의 발행 상자와 같은 형태
   ------------------------------------------------------------- */
#bo_v_top {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
}

#bo_v_top:after {
    content: none;
}

#bo_v_top .btn_bo_user {
    flex-shrink: 0;
    display: flex;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_v_top .btn_bo_user .btn_ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--krds-gray-60, #717171);
    background: #fff;
    border: 1px solid var(--krds-gray-20, #e4e4e4);
    border-radius: 6px;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
}

#bo_v_top .btn_bo_user .btn_ico:hover,
#bo_v_top .btn_bo_user .btn_ico:focus {
    background: var(--krds-gray-5, #f8f8f8);
    border-color: var(--krds-gray-40, #c6c6c6);
    color: var(--krds-gray-90, #1d1d1d);
}

#bo_v_top .susun_pub_box {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    height: 34px;
    margin: 0;
    padding: 3px 3px 3px 12px;
    overflow: hidden;
    border-radius: 6px;
    background: #f2f5f8;
    border: 1px solid #dde3ea;
    font-size: 13px;
    line-height: 1;
    color: #41505f;
}

#bo_v_top .susun_pub_box.is_draft {
    background: #fff6e5;
    border-color: #f0d49a;
    color: #7a5a12;
}

#bo_v_top .susun_pub_box strong {
    flex-shrink: 0;
    font-weight: 700;
}

#bo_v_top .susun_pub_box > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#bo_v_top .susun_pub_box .susun_pub_form {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;
}

#bo_v_top .susun_pub_box button {
    height: 26px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    background: #3a8afd;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

#bo_v_top .susun_pub_box.is_draft button {
    background: #e08b00;
}

#bo_v_top .susun_pub_box .susun_pub_hint {
    flex-shrink: 0;
    margin-left: auto;
    padding-right: 9px;
    color: #8a7434;
}


/* -------------------------------------------------------------
   6. 글쓰기 · 수정 폼
   ------------------------------------------------------------- */
#pf_write .pf_form_row {
    margin: 0 0 18px;
}

#pf_write label.pf_label {
    display: block;
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--krds-gray-90, #1d1d1d);
}

#pf_write .pf_help {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--krds-gray-60, #6d7882);
}

#pf_write .frm_input,
#pf_write select,
#pf_write textarea {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--krds-gray-30, #d8d8d8);
    border-radius: 6px;
    background: #fff;
    font-size: 15px;
    color: var(--krds-gray-90, #1d1d1d);
}

#pf_write textarea {
    height: auto;
    padding: 12px 14px;
    line-height: 1.7;
    resize: vertical;
}

#pf_write select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23555' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

#pf_write .frm_input:focus,
#pf_write select:focus,
#pf_write textarea:focus {
    outline: 2px solid var(--krds-secondary, #003675);
    outline-offset: -2px;
}

/* 공개 체크박스 — 테마 CSS 가 기본 체크박스를 화면 밖으로 밀어내므로
   라벨에 직접 네모와 체크 표시를 그린다. (콤퓨타이야기 글쓰기 폼과 같은 방식) */
#pf_write .pf_publish_row {
    margin: 24px 0 18px;
    padding: 16px 18px;
    border: 1px solid var(--krds-gray-30, #d8d8d8);
    border-radius: 8px;
    background: var(--krds-gray-5, #f8f8f8);
}

#pf_write .pf_publish_row .pf_check {
    position: relative;
    display: inline-block;
    padding-left: 30px;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    cursor: pointer;
}

#pf_write .pf_publish_row .pf_check::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    border: 1px solid var(--krds-gray-40, #c6c6c6);
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}

#pf_write .pf_publish_row input[type="checkbox"]:checked + .pf_check::before {
    border-color: var(--krds-secondary, #003675);
    background: var(--krds-secondary, #003675);
}

#pf_write .pf_publish_row .pf_check::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 7px;
    width: 7px;
    height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

#pf_write .pf_publish_row input[type="checkbox"]:checked + .pf_check::after {
    opacity: 1;
}

#pf_write .pf_btn_area {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 30px 0 0;
}


/* -------------------------------------------------------------
   7. 좁은 화면
   ------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
    .row01 {
        justify-content: center;
    }

    .row01 .card01 {
        width: 160px;
    }

    #bo_v_top {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    #bo_v_top .btn_bo_user {
        align-self: flex-end;
    }

    #bo_v_top .susun_pub_box {
        flex: none;
        height: auto;
        padding: 10px 12px;
        flex-wrap: wrap;
        line-height: 1.5;
    }

    #bo_v_top .susun_pub_box > span {
        white-space: normal;
        overflow: visible;
    }

    #bo_v_top .susun_pub_box .susun_pub_form,
    #bo_v_top .susun_pub_box .susun_pub_hint {
        margin-left: 0;
    }
}

@media screen and (max-width: 599px) {
    .row01 .card01 {
        width: 140px;
    }

    #pf_view .pf_title {
        font-size: 20px;
    }

    #pf_view .main_title01 {
        font-size: 18px;
        line-height: 1.8;
    }

    #pf_view .vb-swiper .swiper-button-prev,
    #pf_view .vb-swiper .swiper-button-next {
        display: none;
    }
}