@charset "UTF-8";
/*
    수상 실적 페이지 (/awards)

    service.css 위에 얹는다. 색·여백·글자 크기는 거기 값을 그대로 쓰고
    여기서는 이 페이지에만 있는 것(시상별 건수, 수상 목록 행)만 정의한다.
    배경 영상이 어두워 흰 글자를 쓰는 것도 service.css 와 같다.
*/

/* ---------- 시상별 건수 ---------- */
.awd_sum {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.awd_sum li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
}
.awd_sum_n {
    font-size: 22px;
    font-weight: 700;
    color: #bcb2ff;
    line-height: 1;
}
.awd_sum_t {
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
    letter-spacing: .01em;
}

/* ---------- 연도별 목록 ---------- */
.awd_list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.awd_item {
    display: grid;
    /* 고객사 이름이 길면(「한국공예디자인문화진흥원」) 옆 칸을 넘어간다.
       minmax 로 줄어들 수 있게 하고 min-width:0 을 함께 둔다 —
       grid 항목은 기본값이 min-width:auto 라 내용보다 작아지지 않는다. */
    grid-template-columns: minmax(0, 16rem) minmax(0, 12rem) minmax(0, 1fr);
    gap: 0 2rem;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.awd_item > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
.awd_item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.awd_client {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
}
.awd_name {
    font-size: 14px;
    color: #bcb2ff;
    line-height: 1.7;
    letter-spacing: .01em;
}
.awd_field {
    font-size: 15px;
    color: rgba(255, 255, 255, .78);
    line-height: 1.6;
}

/* ---------- 맺음말 ----------
   .ins_p 는 insight.css 에 있는데 이 페이지는 그 파일을 불러오지 않는다.
   여기서 필요한 만큼만 정의한다. */
.awd_note_sec .ins_p {
    font-size: 16px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .8);
    max-width: 60em;
    margin: 0 0 1.1em;
}
.awd_note_sec .ins_p:last-child {
    margin-bottom: 0;
}
.awd_note_sec .ins_p a {
    color: #bcb2ff;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.awd_note_sec .ins_p a:hover,
.awd_note_sec .ins_p a:focus-visible {
    border-bottom-color: currentColor;
}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 768px) {
    .awd_sum {
        gap: 10px;
    }
    .awd_sum li {
        padding: 10px 14px;
    }
    .awd_sum_n {
        font-size: 18px;
    }
    .awd_sum_t {
        font-size: 13px;
    }
    /* 세 칸을 한 줄씩 쌓는다. 가로로 밀어야 보이는 표가 되지 않게 한다. */
    .awd_item {
        grid-template-columns: 1fr;
        gap: 2px 0;
        padding: 14px 0;
    }
    .awd_client {
        font-size: 15px;
    }
    .awd_note_sec .ins_p {
        font-size: 15px;
        line-height: 1.8;
    }
    .awd_name,
    .awd_field {
        font-size: 13px;
    }
}

/* ---------- 박스 배경 블러 ----------
   이 페이지들은 어두운 배경 영상 위에 놓인다. 카드 배경이 거의 투명해
   영상의 밝은 부분이 글자 뒤로 지나가면 읽기 어려웠다(2026-09-12 확인).
   배경색은 그대로 두고 뒤를 흐리게만 한다 — 색을 바꾸면 기존 인상이 달라진다.
   방식은 .header.sub_header 와 같다. */
.awd_sum li {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}