/* 03 공통 디자인 설정: 색상·폰트·굵기·라운드는 이곳에서 관리합니다.
   기존 화면의 색상 차이는 용도별 변수로 보존했습니다.
   --fs-* / --lh-*는 아래 폰트 가이드에서 관리합니다. */
:root {
    --hkb-bg: #ffffff;
    --hkb-bg-alt: #f4f8ff;
    --hkb-surface: #ffffff;
    --hkb-surface-alt: #f7f9fc;
    --hkb-line: #e0e5ee;
    --hkb-text: #1a2323;
    --hkb-text-muted: #51565f;
    --hkb-blue: #1446c8;
    --hkb-blue-light: #4478da; /* 밝은 강조 배경: 흰색 글자와 함께 사용 */
    --hkb-blue-dark: #00338f;
    --hkb-blue-deep: #092558;
    --hkb-blue-soft: #e9f1ff;
    --hkb-dark: #222734;
    --hkb-white: #fff;
    --hkb-tab-bg: #333;
    --hkb-tab-hover: #222;
    --hkb-red: #c01521;
    --hkb-red-dark: #a30013;
    --hkb-focus: #2457a6;
    --hkb-heading: #19386c;
    --hkb-highlight: #ffdc58;
    --hkb-line-strong: #c5cfde;
    --hkb-line-table: #d8e0ec;
    --hkb-line-table-head: #7c8189;
    --hkb-line-placeholder: #b7c5d8;
    --hkb-bg-neutral: #f7f7f7;
    --hkb-bg-intro: #f1f3f6;
    --hkb-bg-tag: #edf2f8;
    --hkb-bg-placeholder: #edf2f7;
    --hkb-bg-notice: #edf1f6;
    --hkb-bg-local: #f4f7fc;
    --hkb-bg-group: #eaf1fc;
    --hkb-bg-law: #f4f4f4;
    --hkb-text-number: #93a6c4;
    --hkb-text-placeholder: #50637e;
    --hkb-text-caption: #67778d;
    --hkb-text-law: #424a56;
    --hkb-text-note: #69717e;
    --hkb-text-meta: #606975;
    --hkb-text-group-number: #6689bb;
    --hkb-text-group: #50647f;
    --hkb-surface-overlay: rgba(255,255,255,.9);
    --hkb-text-inverse-muted: rgba(255,255,255,.78);
    --hkb-line-inverse: rgba(255,255,255,.35);
    --hkb-font: "Pretendard", "Noto Sans KR", Roboto, "Apple SD Gothic Neo", Arial, sans-serif;
    --hkb-font-number: Roboto, Arial, sans-serif;
    --hkb-radius-xs: 5px;
    --hkb-radius-tag: 6px;
    --hkb-radius-sm: 8px;
    --hkb-radius-md: 10px;
    --hkb-radius-badge-mobile: 12px;
    --hkb-radius-lg: 14px;
    --hkb-radius-xl: 18px;
    --hkb-radius-pill: 999px;
    --hkb-weight-normal: 400;
    --hkb-weight-medium: 500;
    --hkb-weight-semibold: 600;
    --hkb-weight-bold: 700;
    --hkb-weight-heavy: 800;
}

/* 보안사업부 폰트 가이드: 모든 03 페이지에 공통 적용.
   화면 폭에 따라 clamp의 최소·최대 범위 안에서 확대 (변수별 전환 너비는 다름) */
:root {
    --fs-display: clamp(36px, 2.5vw + 20px, 56px);
    --fs-heading-lg: clamp(30px, 1.25vw + 22px, 40px);
    --fs-heading-md: clamp(24px, 1vw + 16px, 32px);
    --fs-heading-sm: clamp(20px, 0.5vw + 16px, 24px);
    --fs-lead: clamp(18px, 0.25vw + 16px, 20px);
    --fs-body: clamp(16px, 0.25vw + 14px, 18px);
    --fs-small: clamp(14px, 0.25vw + 12px, 16px);
    --fs-caption: 14px;
    --lh-heading: 1.35;
    --lh-body: 1.75;
    --lh-caption: 1.5;
}
/* 별도 페이지 CSS가 없어도 적용되는 기본값. 페이지별 세부 규칙은 뒤에서 보완. */
:where(#security), .hk-security-cta { font-size: var(--fs-body); line-height: var(--lh-body); }
:where(#security) :is(h1, h2, h3, h4) { line-height: var(--lh-heading); }
:where(#security) h1 { font-size: var(--fs-display); }
:where(#security) h2 { font-size: var(--fs-heading-md); }
:where(#security) :is(h3, h4) { font-size: var(--fs-heading-sm); }
:where(#security) small { font-size: var(--fs-caption); line-height: var(--lh-caption); }
:where(#security) table { font-size: var(--fs-small); line-height: var(--lh-caption); }
.hk-security-hero {
    --hk-hero-image: url("/image/main/sub-visual03.jpg");
}
.hk-sub-hero .hk-container h1 { font-size: var(--fs-display); line-height: var(--lh-heading); }
.hk-sub-hero .hk-container p { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.hk-sub-hero .hk-container > span { font-size: var(--fs-small); line-height: var(--lh-caption); }
.hk-sub-nav a { font-size: var(--fs-small); line-height: var(--lh-caption); }
#security .hk-page-heading h2 { font-size: var(--fs-display); line-height: var(--lh-heading); }
#security .hk-page-heading > p { font-size: var(--fs-lead); line-height: var(--lh-body); }

.hk-product {
    position: relative;
    padding: 150px 0 100px;
    overflow: hidden;
    background: var(--hkb-white);
}

.hk-product-content,
.hk-product-content *{box-sizing:border-box}
.hk-product-content{width:100%;max-width:1400px;margin:0 auto;padding:100px 0;color:var(--hkb-tab-bg);background:var(--hkb-white)}
.hk-product-content a{color:inherit;text-decoration:none}

/* -page 상세 페이지 공통 기본 서체·배색 */
.hkb {
    background: var(--hkb-bg);
    color: var(--hkb-text);
    font-family: var(--hkb-font);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* -page 상세 페이지 링크 탭의 공통 디자인. 배치·여백은 각 페이지 CSS에서 관리. */
.hkb .hk-product-tabs a {
    border-radius: var(--hkb-radius-md);
    background: var(--hkb-tab-bg);
    color: var(--hkb-white);
    text-align: center;
    text-decoration: none;
    font-size: var(--fs-lead);
    font-weight: var(--hkb-weight-semibold);
    line-height: var(--lh-caption);
}
.hkb .hk-product-tabs a:hover { background: var(--hkb-tab-hover); }
.hkb .hk-product-tabs a.is-active { background: var(--hkb-blue); color: var(--hkb-white); }
.hkb .hk-product-tabs a.is-active:hover { background: var(--hkb-blue-dark); color: var(--hkb-white); }

/* 3개 탭 메뉴 */
.hk-product-tabs{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: 10px;
    margin: 40px 0;
    transition: all 0.3s ease;
}
.hk-product-tabs button{height:60px;border-radius:var(--hkb-radius-xs);background:var(--hkb-tab-bg);color:var(--hkb-white);font-size: var(--fs-small);font-weight:var(--hkb-weight-semibold);border:0;cursor:pointer;transition:all 0.3s ease;}
.hk-product-tabs button:hover{background:var(--hkb-tab-hover);border-color:var(--hkb-tab-bg)}
.hk-product-tabs button.is-active{background:var(--hkb-red);color:var(--hkb-white);}
.hk-product-tabs button.is-active:hover{background:var(--hkb-red-dark);color:var(--hkb-white)}

.hk-product-panel {
    display: none;
}

.hk-product-panel.is-active {
    display: block;
}

.hk-product-grid {
    display: flex;
    justify-content: center;
    width: 100%;
    border-radius: var(--hkb-radius-md);
    border: 1px solid var(--hkb-line);
    /*background: var(--hkb-bg-neutral);*/
    /*padding: 30px;*/
}

.hk-product-grid img {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: var(--hkb-radius-md);
}

/* 페이지 내 줄바꿈도 공통 모바일 기준(760px)에 맞춤 */
#security .br-pc { display: block; }
#security .br-mobile { display: none; }

/* 공통 CTA: _security_cta.php — 페이지별 .hkb 스타일에 의존하지 않음 */
.hk-security-cta {
    box-sizing: border-box;
    padding: clamp(56px, 7vw, 100px) clamp(28px, 5vw, 64px);
    background: var(--hkb-blue-deep) url("/image/main/security/bg-02.jpg") center center / cover;
    color: var(--hkb-white);
    text-align: left;
    font-family: var(--hkb-font);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
.hk-security-cta *,
.hk-security-cta *::before,
.hk-security-cta *::after { box-sizing: border-box; }
.hk-security-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 32px 48px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}
.hk-security-cta__text { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.hk-security-cta .hk-security-cta__text h2 {
    margin: 0 0 14px;
    font-size: var(--fs-heading-lg);
    font-weight: var(--hkb-weight-bold);
    line-height: var(--lh-heading);
    color: var(--hkb-white);
}
.hk-security-cta .hk-security-cta__text p { margin: 0; max-width: 620px; color: var(--hkb-text-inverse-muted); }
.hk-security-cta__actions { display: flex; flex-direction: row; gap: 14px; }
.hk-security-cta .hk-security-cta__actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 13px 28px;
    border-radius: var(--hkb-radius-sm);
    font-weight: var(--hkb-weight-semibold);
    font-size: var(--fs-body);
    text-decoration: none;
}
.hk-security-cta .hk-security-cta__actions a:first-child { background: var(--hkb-white); color: var(--hkb-blue-dark); }
.hk-security-cta .hk-security-cta__actions a:last-child { background: transparent; color: var(--hkb-white); border: 1px solid var(--hkb-line-inverse); }

/* 태블릿: 공통 layout.css와 동일한 기준 */
@media (max-width: 1024px) {
    .hk-security-cta__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-inline: 24px; }
    .hk-security-cta__actions { flex-wrap: wrap; }
    .hk-product-grid {
        padding: 20px;
    }
    
    .hk-product-content {padding:60px 0;}
    .hk-product-tabs {gap:5px; margin: 0 0 20px;}
    .hk-product-tabs button {height: auto; font-size: var(--fs-small); padding: 10px 0;}
    .hk-product {
        padding: 100px 0 80px;
    }
}

/* 모바일 */
@media (max-width: 760px) {
    #security .br-pc { display: none; }
    #security .br-mobile { display: block; }
    .hk-security-cta { padding: 60px 0; }
    .hk-security-cta__inner { padding-inline: 20px; }
    .hk-security-cta__actions { flex-direction: column; align-items: stretch; }
  
  .hk-product {
        padding: 60px 0 40px;
    }
  
  .hk-product-grid {
        padding: 0px;
    }
}

/* 작은 모바일 */
@media (max-width: 420px) {
  .hk-product-tabs{grid-template-columns:repeat(3,1fr);gap:4px}
}

/* 키보드 탐색: 기본 outline 제거를 보완하며 박스 크기는 바꾸지 않음 */
#security .hk-product-tabs :is(a, button):focus-visible,
#security .hkb__cta-actions a:focus-visible,
.hk-security-cta__actions a:focus-visible {
    outline: 3px solid var(--hkb-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--hkb-white);
}