/* 이 페이지의 구성·여백·이미지·반응형을 관리합니다.
   공통 폰트·색상·라인·라운드·탭 디자인: _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 h3>strong {
    color: var(--hkb-red);
    font-weight: var(--hkb-weight-bold);
}

.hkb__step p { 
    margin: 0;
    color: var(--hkb-text-muted);
    font-size: var(--fs-body);
}

.hkb__tabs { 
    display: flex; 
    gap: 8px; 
    margin-bottom: 15px; 
}
.hkb__tab {
    padding: 4px 16px;
    border-radius: var(--hkb-radius-pill);
    background: var(--hkb-surface-alt);
    border: 1px solid var(--hkb-blue);
    color: var(--hkb-text-muted);
    font-size: var(--fs-caption);
    font-weight: var(--hkb-weight-semibold);
}
.hkb__tab--active { background: var(--hkb-blue); color: var(--hkb-white); border-color: transparent; }

.hkb__product {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding: 40px 0;
    border-bottom: 1px solid var(--hkb-line);
    text-align: left;
    align-content: start;
}
.hkb__product:last-child { border-bottom: none; padding-bottom: 0; }
.hkb__product:first-child { padding-top: 0; }
.hkb__figure--product {
    aspect-ratio: 4/5;
    border-radius: var(--hkb-radius-md);
    background: var(--hkb-surface-alt);
    border: 1px solid var(--hkb-line);
    display: flex; align-items: center; justify-content: center;
    padding: 16px; margin: 0;
}
.hkb__figure--product img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
}
.hkb__product-text h3 { 
    font-size: var(--fs-heading-sm);
    font-weight: var(--hkb-weight-bold);
    color: var(--hkb-blue);
}

.hkb__info {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
    font-weight: var(--hkb-weight-normal);
    color: var(--hkb-text-muted);
    font-size: var(--fs-small);
    border-top: solid 1px var(--hkb-line);
    border-bottom: solid 1px var(--hkb-line);
    padding: 4px;
}

.hkb__product-text ul { margin: 20px 0 0; padding-left: 20px; color: var(--hkb-text-muted); }
.hkb__product-text li { margin: 4px 0; list-style: disc; }
.hkb__product-text li::marker { color: var(--hkb-blue) }

.hkb__spec { display: flex; flex-direction: column; gap: 14px; }
.hkb__spec-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 24px 26px;
    border-radius: var(--hkb-radius-md);
    background: var(--hkb-surface);
    border: 1px solid var(--hkb-line);
    text-align: left;
}
.hkb__spec-row em {
    font-style: normal; font-weight: var(--hkb-weight-bold); font-size: var(--fs-heading-sm); color: var(--hkb-blue);
    font-family: var(--hkb-font-number);
}
.hkb__spec-row b { 
    display: block;
    font-size: var(--fs-heading-sm);
    color: var(--hkb-text);
    font-weight: var(--hkb-weight-bold);
    margin-top: 8px;
    margin-bottom: 6px;
}
.hkb__spec-row span { 
    color: var(--hkb-text-muted); 
    font-size: var(--fs-small); 
}
.hkb .v-line { 
    color: var(--hkb-line) !important;
    vertical-align: middle;
    border-left: solid 1px var(--hkb-line);
    margin-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

@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; }
    .hkb__product { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }}

@media (max-width: 760px) {
    .hkb { padding-top: 60px; }
    .hkb__wrap { padding-inline: 20px; }
    .hkb__hero { padding: 48px 0 0; }
    .hkb__section { padding: 40px 0; }
    .hkb__product { grid-template-columns: 1fr; }
    .hkb__figure--product { aspect-ratio: 5 / 4; }
    .hkb__spec-row { 
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
        padding: 18px;
        display: grid;
        grid-auto-flow: row;
        align-items: start;
    }

    .hkb__spec-row span {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .hkb .v-line { 
        border-bottom: solid 1px var(--hkb-line);
        margin-bottom: 8px;
        padding-bottom: 8px;
        box-sizing: border-box;
        border-left: 0px;
        margin-left: 0px;
        padding-right: 0px;
    }

    .hkb__product-text ul {
        margin: 8px 0 0;
    }}

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

/* 긴 제품명과 확대된 텍스트가 콘텐츠 영역을 넘지 않도록 처리 */
.hkb__product-text, .hkb__spec-row > div { min-width: 0; overflow-wrap: anywhere; }
.hkb__tabs { flex-wrap: wrap; }
.hkb__hero-box { overflow-wrap: anywhere; }

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

.hkb .hkb__split-head h2 { font-size: var(--fs-heading-lg); }