/* =====================================================
   portfolio_list.css  —  구축사례 목록 페이지
   prefix : pl__
   rathontech.com/usecase/01.php 스타일 기준
   CodiON 색상 적용 (lime + blue)
===================================================== */

/* ─────────────────────────────────────────────────
   0. 공통 변수
───────────────────────────────────────────────── */
.pl {
    --pl-white      : #ffffff;
    --pl-black      : #111111;
    --pl-sub-black  : #555555;
    --pl-gray       : #999999;
    --pl-border     : #dddddd;
    --pl-bg-light   : #f5f5f5;
    --pl-lime       : #07328B;  /* ico-sol */
    --pl-blue       : #07328B;  /* ico-ind / pagination */
    --pl-radius-img : 12px;
    --pl-radius-btn : 30px;
    --pl-radius-ico : 5px;
    --pl-inner-max  : 1520px;
    --pl-px         : 50px;
}

/* ─────────────────────────────────────────────────
   1. 기본 레이아웃
───────────────────────────────────────────────── */
.pl {
    display: block;
    width: 100%;
    background: var(--pl-white);
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    color: var(--pl-black);
    margin-top: 0;
}

.pl__inner {
    max-width: var(--pl-inner-max);
    margin: 0 auto;
    padding: 0 var(--pl-px);
}

/* ─────────────────────────────────────────────────
   2. 타이틀 영역
───────────────────────────────────────────────── */
.pl__tit-box {
    text-align: center;
    padding: 150px 0 80px;
    border-bottom: 1px solid var(--pl-border);
    margin-bottom: 50px;
}

.pl__h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    margin: 0 0 16px;
    color: var(--pl-black);
}

.pl__subtitle {
    font-size: 18px;
    font-weight: 400;
    color: var(--pl-sub-black);
    margin: 0;
    line-height: 1.6;
}

/* ─────────────────────────────────────────────────
   3. 검색 / 필터 폼
───────────────────────────────────────────────── */
.pl__srch-form { width: 100%; }

.pl__list-wrap {}

.pl__srch-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* 셀렉트 박스 */
.pl__select-box {
    display: flex;
    gap: 16px;
}

.pl__select-box .form-select-wrap {
    width: 240px;
}

/* 검색 인풋 */
.pl__input-box {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 340px;
    height: clamp(40px, 5svh, 49px);
    padding: 0 20px;
    border-radius: 10px;
    background: #f2f4f7;
    transition: background 0.2s;
}

.pl__input {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: 1rem;
    font-weight: 400;
    color: var(--pl-black);
    font-family: inherit;
}
.pl__input::placeholder { color: #999; }
.pl__input:focus { outline: 0; }

.pl__input-box:focus-within {
    background: #e8edf5;
    outline: 2px solid var(--pl-blue);
    outline-offset: 0;
}

.pl__srch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--pl-sub-black);
    cursor: pointer;
    transition: color 0.2s;
}
.pl__srch-btn:hover { color: var(--pl-blue); }

/* ─────────────────────────────────────────────────
   4. 카드 그리드
───────────────────────────────────────────────── */
.pl__list-box {
    margin-top: 60px;
    margin-bottom: 80px;
}

.pl__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ─────────────────────────────────────────────────
   5. 카드 (.case-box)
───────────────────────────────────────────────── */
.pl__case-box {}

/* 이미지 영역 */
.pl__img-box {
    display: block;
    aspect-ratio: 414 / 285;
    border-radius: var(--pl-radius-img);
    overflow: hidden;
    margin-bottom: 24px;
    background: #f0f0f0;
}
.pl__img-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease-in-out;
}
.pl__grid li:hover .pl__img-box img {
    transform: scale(1.08);
}

.pl__img-empty {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e8edf2 0%, #d4dce6 100%);
}

/* 텍스트 영역 (링크) */
.pl__txt-box {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* 배지 */
.pl__ico-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.pl__ico-sol,
.pl__ico-ind {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    padding: 5px 10px;
    border-radius: var(--pl-radius-ico);
    white-space: nowrap;
}

/* 카테고리 배지 */
.pl__ico-sol {
    background-color: var(--pl-lime);
    color: #fff;
}


/* 제목 / 설명 */
.pl__dl { margin: 0; }

.pl__dl dt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: var(--pl-black);
    margin-bottom: 10px;
    transition: color 0.2s;
}

.pl__dl dd {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--pl-sub-black);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─────────────────────────────────────────────────
   6. 검색결과 없음
───────────────────────────────────────────────── */
.pl__no-list-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 120px 0 100px;
}

.pl__no-ico {
    display: block;
    color: #bbb;
}

.pl__no-txt {
    font-size: 20px;
    font-weight: 400;
    color: var(--pl-sub-black);
    margin: 0;
    text-align: center;
    line-height: 1.6;
}

/* ─────────────────────────────────────────────────
   7. 페이지네이션
───────────────────────────────────────────────── */
.pl__pagenation-wrap {
    margin-top: 20px;
}

.pl__pagenation-wrap ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 공통: 화살표 li */
.pl__pg-pprev,
.pl__pg-prev,
.pl__pg-next,
.pl__pg-nnext {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pl__pg-pprev a,
.pl__pg-pprev span,
.pl__pg-prev  a,
.pl__pg-prev  span,
.pl__pg-next  a,
.pl__pg-next  span,
.pl__pg-nnext a,
.pl__pg-nnext span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--pl-black);
    text-decoration: none;
    transition: color 0.2s;
}
.pl__pg-pprev svg,
.pl__pg-prev  svg,
.pl__pg-next  svg,
.pl__pg-nnext svg {
    width: 20px;
    height: 20px;
}

.pl__pg-pprev a:hover,
.pl__pg-prev  a:hover,
.pl__pg-next  a:hover,
.pl__pg-nnext a:hover {
    color: var(--pl-blue);
}

/* 비활성 화살표 */
.pl__pg-disabled a,
.pl__pg-disabled span {
    color: #ccc;
    cursor: default;
    pointer-events: none;
}

/* 페이지 번호 */
.pl__pg-num {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pl__pg-num a,
.pl__pg-num span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 16px;
    font-weight: 400;
    color: var(--pl-black);
    text-decoration: none;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    transition: color 0.2s;
    font-family: 'Inter', 'Pretendard', sans-serif;
}

.pl__pg-num a:hover {
    color: var(--pl-blue);
}

/* 현재 페이지 */
.pl__pg-on span {
    color: #fff !important;
    font-weight: 600;
}
.pl__pg-on::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--pl-blue);
    z-index: 0;
}

/* ─────────────────────────────────────────────────
   8. 반응형 — 1625px 이상 (상세페이지 동일: 패딩 0)
───────────────────────────────────────────────── */
@media (min-width: 1625px) {
    .pl__inner { padding-left: 0; padding-right: 0; }
}

/* ─────────────────────────────────────────────────
   9. 반응형 — 1400px
───────────────────────────────────────────────── */
@media (max-width: 1400px) {
    .pl { --pl-px: 100px; }
}

/* ─────────────────────────────────────────────────
   10. 반응형 — 1200px (상세페이지 동일: 60px)
───────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .pl { --pl-px: 60px; }
    .pl__h1   { font-size: 40px; }
    .pl__grid { gap: 64px 24px; }
    .pl__dl dt { font-size: 18px; }
}

/* ─────────────────────────────────────────────────
   11. 반응형 — 1024px
───────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pl__tit-box { padding: 130px 0 60px; }
    .pl__list-box { margin-top: 48px; margin-bottom: 64px; }
    .pl__grid { gap: 56px 20px; }
    .pl__img-box { margin-bottom: 18px; }
    .pl__ico-box  { margin-bottom: 10px; }
}

/* ─────────────────────────────────────────────────
   12. 반응형 — 960px (상세페이지 동일: 40px)
───────────────────────────────────────────────── */
@media (max-width: 960px) {
    .pl { --pl-px: 40px; }
}

/* ─────────────────────────────────────────────────
   13. 반응형 — 800px (태블릿)
───────────────────────────────────────────────── */
@media (max-width: 800px) {
    /* 검색 폼: 세로 정렬 */
    .pl__srch-box {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .pl__select-box { width: 100%; }
    .pl__select-box .form-select-wrap { width: 100%; }
    .pl__input-box  { width: 100%; }

    /* 그리드: 2열 */
    .pl__tit-box  { padding: 110px 0 50px; }
    .pl__h1       { font-size: 34px; }
    .pl__subtitle { font-size: 16px; }
    .pl__grid     { grid-template-columns: repeat(2, 1fr); gap: 48px 16px; }
    .pl__dl dt    { font-size: 16px; }
    .pl__dl dd    { font-size: 13px; }
    .pl__ico-sol,
    .pl__ico-ind  { font-size: 12px; }
}

/* ─────────────────────────────────────────────────
   14. 반응형 — 768px (상세페이지 동일: 24px)
───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pl { --pl-px: 24px; }
}

/* ─────────────────────────────────────────────────
   15. 반응형 — 480px (상세페이지 동일: 16px)
───────────────────────────────────────────────── */
@media (max-width: 480px) {
    .pl { --pl-px: 16px; }

    /* 그리드: 1열 */
    .pl__tit-box  { padding: 100px 0 40px; margin-bottom: 36px; }
    .pl__h1       { font-size: 28px; letter-spacing: -0.5px; }
    .pl__subtitle { font-size: 14px; }
    .pl__grid     { grid-template-columns: 1fr; gap: 52px; }
    .pl__img-box  { aspect-ratio: 320 / 216; }

    /* 페이지네이션 */
    .pl__pagenation-wrap ul { gap: 16px; }
    .pl__pg-num a,
    .pl__pg-num span { width: 36px; height: 36px; font-size: 15px; }
    .pl__pg-pprev svg,
    .pl__pg-prev  svg,
    .pl__pg-next  svg,
    .pl__pg-nnext svg { width: 18px; height: 18px; }
}