/* ==========================================================================
   hs-company.css — 회사소개(/content/회사소개/) 전용 스타일

   본문은 DB(g5_content, co_id='company')에 있고 HTMLPurifier 를 거쳐 나간다.
   <style>·<section>·id 가 지워지므로 class 로만 꾸민다(hs-privacy.css 와 같은 방식).
   ⚠ 모든 규칙은 .hs-company 안에서만 먹는다.
   ⚠ PC(skin/content/basic)·모바일(mobile/skin/content/basic) 스킨이 둘 다 이 파일을 불러온다.
   ========================================================================== */

.hs-company {
    --hc-red: #e63946;
    --hc-red-soft: #fdecee;
    --hc-ink: #111827;
    --hc-body: #374151;
    --hc-mute: #6b7280;
    --hc-line: #e5e7eb;
    --hc-soft: #f9fafb;
    max-width: 920px;
    margin: 0 auto;
    padding: 4px 4px 48px;
    color: var(--hc-body);
    font-size: 15px;
    line-height: 1.75;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-align: left;
}
.hs-company * { box-sizing: border-box; }
.hs-company p { margin: 0; }

/* 첫 화면 */
.hs-company .hc-hero {
    margin: 0 0 40px;
    padding: 44px 36px;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffffff 60%);
    border: 1px solid #fbd5d9;
}
.hs-company .hc-eyebrow {
    margin-bottom: 12px;
    color: var(--hc-red);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
}
.hs-company .hc-title {
    margin-bottom: 14px;
    color: var(--hc-ink);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.6px;
}
.hs-company .hc-lead { max-width: 620px; color: var(--hc-body); font-size: 16px; }

/* 구역 */
.hs-company .hc-block { margin: 0 0 40px; }
.hs-company h2 {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    color: var(--hc-ink);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.4px;
}

/* 하는 일 — 카드 4장 */
.hs-company .hc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.hs-company .hc-card {
    padding: 20px 18px;
    border: 1px solid var(--hc-line);
    border-radius: 14px;
    background: #fff;
}
.hs-company .hc-no {
    display: inline-block;
    margin-bottom: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--hc-red-soft);
    color: var(--hc-red);
    font-size: 12px;
    font-weight: 800;
}
.hs-company .hc-card b { display: block; margin-bottom: 6px; color: var(--hc-ink); font-size: 16px; }
.hs-company .hc-card p { color: var(--hc-mute); font-size: 14px; line-height: 1.65; }

/* 방식 — 목록 */
.hs-company .hc-points { margin: 0; padding: 0; list-style: none; }
.hs-company .hc-points li {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--hc-line);
}
.hs-company .hc-points li:last-child { border-bottom: 1px solid var(--hc-line); }
.hs-company .hc-points b { flex: 0 0 120px; color: var(--hc-ink); font-size: 15px; }
.hs-company .hc-points span { color: var(--hc-body); font-size: 15px; }

/* 회사 정보 */
.hs-company .hc-info {
    margin: 0;
    padding: 6px 20px;
    border-radius: 14px;
    background: var(--hc-soft);
    border: 1px solid var(--hc-line);
}
.hs-company .hc-info .hc-row { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid var(--hc-line); }
.hs-company .hc-info .hc-row:first-child { border-top: 0; }
.hs-company .hc-info .hc-k { flex: 0 0 120px; margin: 0; color: var(--hc-mute); font-size: 14px; font-weight: 600; }
.hs-company .hc-info .hc-v { margin: 0; color: var(--hc-ink); font-size: 14px; }

@media (max-width: 860px) {
    .hs-company .hc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .hs-company { font-size: 14px; }
    .hs-company .hc-hero { padding: 28px 20px; border-radius: 16px; margin-bottom: 32px; }
    .hs-company .hc-title { font-size: 21px; }
    .hs-company .hc-lead { font-size: 14.5px; }
    .hs-company .hc-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .hs-company .hc-card { padding: 16px 14px; }
    .hs-company .hc-card b { font-size: 15px; }
    .hs-company .hc-card p { font-size: 13px; }
    .hs-company .hc-points li { flex-direction: column; gap: 4px; }
    .hs-company .hc-points b { flex: none; }
    .hs-company .hc-info { padding: 4px 16px; }
    .hs-company .hc-info .hc-k { flex-basis: 96px; }
}
@media (max-width: 420px) {
    /* 좁은 폰에서는 카드 한 줄에 하나 — 두 칸이면 글이 너무 잘게 끊긴다 */
    .hs-company .hc-grid { grid-template-columns: 1fr; }
    .hs-company .hc-card { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; }
    .hs-company .hc-no { grid-row: span 2; margin: 2px 0 0; }
}