/* ==========================================================================
   솔루션 (어플리케이션, 개발 지원)
   ========================================================================== */

/* ----- 어플리케이션 ----- */
.hk-apps-list { display: flex; flex-direction: column; gap: 160px; }
.hk-app { display: flex; gap: 40px; min-height: 440px; }
.hk-app--reverse { flex-direction: row-reverse; }
.hk-app__visual {
    flex: 0 0 606px;
    border-radius: var(--hk-radius);
    background: var(--hk-bg);
    overflow: hidden;
    line-height: 0;
}
.hk-app__visual img { width: 100%; height: 100%; object-fit: cover; }
/* 사진 준비 전 회색 자리 표시: 원래 사진과 같은 비율 */
.hk-app__visual.hk-ph { align-self: center; aspect-ratio: 606 / 440; background: var(--hk-placeholder); }
.hk-app__body {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 426px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 0;
}
.hk-app__logo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; line-height: 0; }
.hk-app__logo img { min-width: 0; max-width: 100%; }
.hk-app__logo img { width: auto; height: 40px; }
.hk-app__badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 16px;
    border-radius: 14px;
    background: var(--hk-blue);
    color: var(--hk-white);
    font-size: 16px;
    font-weight: 800;
    line-height: 20px;
}
.hk-app__subtitle { margin-top: 10px; font-size: 20px; line-height: 25px; }
.hk-app__desc { margin-top: 32px; font-size: 16px; line-height: 20px; }
.hk-app__guide { margin-top: 32px; }
.hk-app__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 32px; }

/* ----- 개발 지원 ----- */
.hk-systems {
    display: grid;
    grid-template-columns: 632fr 420fr;
    gap: 20px;
    margin-top: 40px;
}
/* 2차 시안: 위 넓은 카드 + 좁은 카드, 아래 전체 폭 카드. 배경 사진은 그라데이션까지 포함된 이미지 */
.hk-system {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 320px;
    padding: 40px;
    border-radius: var(--hk-radius);
    background: var(--hk-bg) var(--hk-system-image, none) center / cover no-repeat;
    overflow: hidden;
}
.hk-system--full { grid-column: 1 / -1; }
.hk-system__title { font-size: 24px; font-weight: 700; line-height: 30px; }
.hk-system__text { margin-top: 8px; font-size: 16px; line-height: 20px; }

.hk-devposts { margin-top: 80px; }
.hk-media-list > li { border-bottom: 1px solid var(--hk-line); }
.hk-media-list > li + li { padding-top: 40px; }
.hk-media-list > li:not(:last-child) { padding-bottom: 40px; }
.hk-media-list > li:last-child { padding-bottom: 40px; }
.hk-media { display: flex; gap: 40px; }
.hk-media__img {
    flex: 0 0 344px;
    height: 240px;
    border-radius: var(--hk-radius);
    transition: opacity .2s;
}
.hk-media:hover .hk-media__img { opacity: .85; }
.hk-media__body {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 552px;
    display: flex;
    flex-direction: column;
    padding-top: 48px;
}
.hk-media__title { margin-top: 10px; font-size: 20px; font-weight: 500; line-height: 25px; }
.hk-media:hover .hk-media__title { text-decoration: underline; text-underline-offset: 3px; }
.hk-media__text { margin-top: 24px; font-size: 16px; line-height: 20px; }

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1120px) {
    .hk-app__visual { flex-basis: 52%; }
}

@media (max-width: 1000px) {
    .hk-apps-list { gap: 96px; }
    .hk-app,
    .hk-app--reverse { flex-direction: column; min-height: 0; gap: 28px; }
    .hk-app__visual { flex: none; aspect-ratio: 606 / 440; max-width: 606px; width: 100%; }
    .hk-app__body { max-width: none; padding: 0; }
    .hk-app__stores { margin-top: 0; }

    .hk-systems { gap: 14px; }
    .hk-system { min-height: 260px; padding: 28px; }
    /* 좁은 화면에서는 사진이 다르게 잘리므로 글자 뒤를 밝게 */
    .hk-system { background-image: linear-gradient(to top, rgba(255, 255, 255, 0.92) 30%, rgba(255, 255, 255, 0) 70%), var(--hk-system-image, none); }

    .hk-media { gap: 28px; }
    .hk-media__img { flex-basis: 40%; height: auto; aspect-ratio: 344 / 240; }
    .hk-media__body { padding-top: 12px; }
}

@media (max-width: 500px) {
    .hk-app__logo img { height: 30px; }
    .hk-app__badge { height: 24px; font-size: 14px; padding: 0 12px; }
    .hk-app__subtitle { font-size: 17px; }
    .hk-app__desc { margin-top: 16px; font-size: 15px; line-height: 1.5; }
    .hk-app__guide { margin-top: 20px; }
    .hk-app__stores { padding-top: 24px; }

    .hk-systems { grid-template-columns: minmax(0, 1fr); }
    .hk-system { min-height: 220px; padding: 24px; background-position: right center; }
    .hk-system__text br { display: none; }
    .hk-system__title { font-size: 20px; }

    .hk-media { flex-direction: column; gap: 16px; }
    .hk-media__img { flex: none; width: 100%; }
    .hk-media__body { padding-top: 0; }
    .hk-media__text { margin-top: 12px; font-size: 15px; line-height: 1.5; }
}

/* 개발 지원 게시물 대표 이미지 */
img.hk-media__img { display: block; object-fit: cover; background: var(--hk-bg); }