/* 이 페이지의 구성·여백·이미지·반응형을 관리합니다.
   공통 폰트·색상·라인·라운드·탭 디자인: _03.css */

/* 비상벨 상세 페이지: 기본(PC) → 1024px(태블릿) → 760px(모바일) → 420px(작은 모바일) */
.hkb {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    position: relative;
    padding: 150px 0 0;
    overflow: hidden;
}
.hkb *, .hkb *::before, .hkb *::after { box-sizing: inherit }

.hkb__wrap {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

.hkb__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--hkb-blue);
    font-size: var(--fs-caption);
    font-weight: var(--hkb-weight-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hkb__title p,
.hkb__title > p {
    margin-bottom: 14px;
    color: var(--hkb-blue);
    font-size: var(--fs-lead);
    font-weight: var(--hkb-weight-heavy);
}
.hkb__title h2 {
    font-size: var(--fs-display);
    line-height: var(--lh-heading);
    letter-spacing: -0.06em;
}

.hkb .hk-product-tabs{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: 10px;
    margin: 40px 0;
    transition: all 0.3s ease;
}
.hkb .hk-product-tabs a {
    display: block;
    padding: 20px 6px;
    height: auto;
    border: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}
.hkb .hk-product-tabs a:hover { border-color: var(--hkb-tab-bg); }

.hkb__split {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 60px;
    align-items: start;
}
.hkb__split-head { position: static; }
.hkb__split-head h2 {
    margin: 0;
    font-size: var(--fs-heading-lg);
    font-weight: var(--hkb-weight-bold);
    letter-spacing: -.01em;
    line-height: var(--lh-heading);
    color: var(--hkb-text);
}
.hkb__split-head p {
    margin: 14px 0 0;
    color: var(--hkb-text-muted);
    font-size: var(--fs-body);
}
.hkb__split-body { min-width: 0; }

.hkb__hero {
    padding: 40px 0 0 0;
    background: var(--hkb-bg);
    text-align: left;
}

.hkb__hero-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: clamp(40px, 6vw, 80px) clamp(10px, 2vw, 40px);
    border-radius: var(--hkb-radius-lg);
    overflow: hidden;

    text-align: center;
    color: var(--hkb-white);
    background-position: center center;
    background-size: cover;
}
.hkb__hero-box>h2 {
    margin: 0 0 20px;
    font-size: var(--fs-display);
    font-weight: var(--hkb-weight-heavy);
    letter-spacing: -.02em;
    line-height: var(--lh-heading);
    color: var(--hkb-white);
}
.hkb__hero-box>p {
    margin: 0;

    font-size: var(--fs-lead);
    color: var(--hkb-blue-soft);
}
.hkb__hero-banner {
    margin: clamp(20px, 3vw, 30px) 0 0 0;
    border-radius: var(--hkb-radius-lg);
    overflow: hidden;
    background: var(--hkb-surface-alt);
    border: 1px solid var(--hkb-line);
    padding: clamp(10px, 1.5vw, 20px);
}
.hkb__hero-banner img { 
    display: block; 
    width: 100%; 
    height: auto;
    border-radius: var(--hkb-radius-lg);
}

.hkb__section { padding: clamp(52px, 6vw, 88px) 0; background: var(--hkb-bg); }
.hkb__section--alt { background: var(--hkb-bg-alt); }

.hkb__process {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--hkb-line);
    border: 1px solid var(--hkb-line);
    border-radius: var(--hkb-radius-lg);
    overflow: hidden;
}
.hkb__step {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 30px 30px;
    background: var(--hkb-surface);
    text-align: left;
}
.hkb__step em {
    display: block;
    font-style: normal;
    font-weight: var(--hkb-weight-heavy);
    font-size: var(--fs-heading-sm);
    letter-spacing: -.02em;
    color: var(--hkb-blue);
    font-family: var(--hkb-font-number);
}
.hkb__step h3 { margin: 0 0 8px; font-size: var(--fs-heading-sm); font-weight: var(--hkb-weight-bold); color: var(--hkb-text); }
.hkb__step p { 
    margin: 0;
    color: var(--hkb-text-muted);
    font-size: var(--fs-body);
}

@media (max-width: 1024px) {
    .hkb { padding-top: 100px; }
    .hkb__wrap { padding-inline: 24px; }
    .hkb .hk-product-tabs { gap: 5px; margin: 24px 0; }
    .hkb .hk-product-tabs a { font-size: var(--fs-small); padding: 10px 6px; }
    .hkb__split { grid-template-columns: 1fr; gap: 20px; }
    .hkb__split-head { position: static; margin-bottom: 4px; }
    .hkb__step { grid-template-columns: 1fr; gap: 8px; }}

@media (max-width: 760px) {
    .hkb { padding-top: 60px; }
    .hkb__wrap { padding-inline: 20px; }
    .hkb__hero { padding: 48px 0 0; }
    .hkb__section { padding: 40px 0; }}

@media (max-width: 420px) {
    .hkb .hk-product-tabs { gap: 4px; }}
.hkb__hero-box { overflow-wrap: anywhere; }

/* 페이지별 이미지 및 개별 설정 */
.hkb .hkb__hero-box { background-image: url(/image/main/security/01-img-01.jpg); }