/* ==========================================================================
   목록 화면: 제품, 인증 특허, 카드형/목록형 게시판, 게시글 보기
   ========================================================================== */

/* ----- 제품 ----- */
.hk-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 60px 20px;
}
.hk-product { display: flex; flex-direction: column; align-items: center; }
.hk-product__img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--hk-radius);
    background: var(--hk-bg);
    overflow: hidden;
}
.hk-product__img.hk-ph { background: var(--hk-placeholder); }
.hk-product__img img { max-width: 92%; max-height: 92%; object-fit: contain; }
.hk-product__img:empty { background: var(--hk-bg); }
.hk-product__name {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 700;
    line-height: 25px;
    text-align: center;
}

/* ----- 인증 특허 ----- */
.hk-certs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 60px 16px;
}
.hk-cert { display: flex; flex-direction: column; min-width: 0; }
.hk-cert__img { display: block; margin-bottom: 10px; line-height: 0; background: #f1f1f1; }
.hk-cert__img img { width: 100%; height: auto; aspect-ratio: 256 / 362; object-fit: cover; transition: opacity .2s; }
.hk-cert__img:hover img { opacity: .85; }
.hk-cert__title {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}

/* ----- 인증 특허 (2차 시안): 대표 인증서 6개 + 연도별 목록 ----- */
.hk-cert-feat {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 40px 8px;
    margin-top: 40px;
}
.hk-cert-feat__item { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hk-cert-feat__img { display: block; width: 100%; margin-bottom: 10px; line-height: 0; background: #f1f1f1; }
.hk-cert-feat__img img { width: 100%; height: auto; aspect-ratio: 172 / 243; object-fit: cover; transition: opacity .2s; }
.hk-cert-feat__img:hover img { opacity: .85; }
.hk-cert-feat__title { margin-top: 10px; font-size: 14px; font-weight: 500; line-height: 1.25; }

.hk-cert-line { position: relative; margin-top: 160px; }
.hk-cert-line::before {
    content: '';
    position: absolute;
    left: 82px;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: #373737;
}
.hk-cert-line__year { position: relative; display: flex; }
.hk-cert-line__year + .hk-cert-line__year { margin-top: 40px; }
.hk-cert-line__year::after {
    content: '';
    position: absolute;
    left: 77px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #373737;
}
.hk-cert-line__y { flex: 0 0 127px; font-size: 16px; font-weight: 700; line-height: 20px; }
.hk-cert-line__items { flex: 1 1 auto; min-width: 0; }
.hk-cert-line__items li { font-size: 16px; font-weight: 700; line-height: 20px; }
.hk-cert-line__items li::before { content: '·'; }
.hk-cert-line__items li + li { margin-top: 16px; }
.hk-cert-line__items a:hover { color: var(--hk-blue); text-decoration: underline; text-underline-offset: 3px; }

/* ----- 카드형 게시판 ----- */
.hk-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 60px 20px;
}
.hk-card { display: flex; flex-direction: column; }
.hk-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 344 / 240;
    margin-bottom: 10px;
    border-radius: var(--hk-radius);
    object-fit: cover;
    transition: opacity .2s;
}
.hk-card:hover .hk-card__img { opacity: .85; }
.hk-card__title {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
}
.hk-card:hover .hk-card__title { text-decoration: underline; text-underline-offset: 3px; }

/* ----- 목록형 게시판 ----- */
.hk-list { margin-top: -20px; border-top: 1px solid var(--hk-line); }
.hk-list__row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 56px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hk-line);
    transition: background-color .2s;
}
.hk-list__row:hover { background: #fafafa; }
.hk-list__no {
    flex: 0 0 64px;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
}
.hk-list__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
}
.hk-list__row:hover .hk-list__title { color: var(--hk-blue); }
.hk-list__date {
    flex: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 17px;
}

/* ----- 게시글 보기 ----- */
.hk-post__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--hk-black);
}
.hk-post__title { font-size: 28px; font-weight: 700; line-height: 1.35; }
.hk-post__meta { display: flex; gap: 16px; font-size: 14px; color: var(--hk-muted); }
.hk-post__body {
    min-height: 240px;
    padding: 48px 0 64px;
    border-bottom: 1px solid var(--hk-line);
    font-size: 16px;
    line-height: 1.75;
}
.hk-post__body img { display: block; margin: 0 auto 32px; border-radius: 8px; }
.hk-post__pending { color: var(--hk-muted); }
.hk-post__foot { margin-top: 56px; text-align: center; }

/* ----- 제품 카드 링크 ----- */
.hk-product__link { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hk-product__link:hover .hk-product__img { opacity: .85; }
.hk-product__link:hover .hk-product__name { color: var(--hk-blue); }
.hk-product__img { transition: opacity .2s; }
.hk-cert__img.hk-ph { aspect-ratio: 256 / 362; background: var(--hk-placeholder); }

/* ----- 게시글 본문 (관리자 에디터로 작성한 HTML) ----- */
.hk-post__summary { margin-bottom: 32px; font-size: 18px; font-weight: 600; line-height: 1.6; }
.hk-richtext { overflow-wrap: anywhere; }
.hk-richtext > * + * { margin-top: 1em; }
.hk-richtext h3 { font-size: 22px; font-weight: 700; line-height: 1.4; }
.hk-richtext h4 { font-size: 18px; font-weight: 700; line-height: 1.4; }
.hk-richtext ul, .hk-richtext ol { padding-left: 1.4em; }
.hk-richtext ul { list-style: disc; }
.hk-richtext ol { list-style: decimal; }
.hk-richtext a { color: var(--hk-blue); text-decoration: underline; text-underline-offset: 3px; }
.hk-richtext blockquote { margin: 0; padding: 12px 20px; border-left: 4px solid var(--hk-line); color: var(--hk-sub-text); }
.hk-richtext img { margin: 24px auto; }
.hk-richtext hr { border: 0; border-top: 1px solid var(--hk-line); }
.hk-richtext table { width: 100%; border-collapse: collapse; }
.hk-richtext th, .hk-richtext td { padding: 8px 10px; border: 1px solid var(--hk-line); text-align: left; }
.hk-post__link { margin-top: 32px; text-align: center; }

/* ----- 첨부파일 ----- */
.hk-files { padding: 28px 0; border-bottom: 1px solid var(--hk-line); }
.hk-files__title { margin-bottom: 12px; font-size: 16px; font-weight: 700; }
.hk-files__list { display: flex; flex-direction: column; gap: 8px; }
.hk-files__item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    max-width: 100%;
    color: var(--hk-blue);
}
.hk-files__item:hover .hk-files__name { text-decoration: underline; text-underline-offset: 3px; }
.hk-files__name { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.hk-files__size { font-size: 14px; color: var(--hk-muted); }

/* ----- 이전 글 / 다음 글 ----- */
.hk-post__nav { border-bottom: 1px solid var(--hk-line); }
.hk-post__nav-item {
    display: flex;
    gap: 24px;
    padding: 16px 0;
    font-size: 15px;
}
.hk-post__nav-item + .hk-post__nav-item { border-top: 1px solid var(--hk-line); }
.hk-post__nav-label { flex: none; width: 64px; font-weight: 700; }
.hk-post__nav-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hk-post__nav-item:hover .hk-post__nav-title { color: var(--hk-blue); }

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1000px) {
    .hk-products,
    .hk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 16px; }
    .hk-certs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 16px; }
    .hk-cert-feat { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; }
    .hk-cert-line { margin-top: 80px; }
}

@media (max-width: 500px) {
    .hk-products { gap: 32px 12px; }
    .hk-product__name { margin-top: 12px; font-size: 16px; line-height: 1.3; }
    .hk-cards { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .hk-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
    .hk-cert__title { font-size: 14px; line-height: 1.4; }
    .hk-cert-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
    .hk-cert-line { margin-top: 56px; }
    .hk-cert-line::before { left: 4px; }
    .hk-cert-line__year { flex-direction: column; padding-left: 24px; }
    .hk-cert-line__year::after { left: 0; }
    .hk-cert-line__y { flex: none; margin-bottom: 10px; }
    .hk-cert-line__items li { font-size: 15px; }
    .hk-cert-line__items li + li { margin-top: 12px; }
    .hk-list__row { flex-wrap: wrap; gap: 4px 12px; padding: 14px 0; }
    .hk-list__no { flex-basis: auto; font-size: 13px; color: var(--hk-muted); }
    .hk-list__title { order: 3; flex-basis: 100%; font-size: 16px; line-height: 1.4; }
    .hk-list__date { margin-left: auto; font-size: 12px; color: var(--hk-muted); }
    .hk-post__title { font-size: 22px; }
}

@media (max-width: 500px) {
    .hk-post__nav-item { gap: 12px; font-size: 14px; }
    .hk-post__nav-label { width: 52px; }
    .hk-richtext h3 { font-size: 19px; }
}