/* ========================================================
   COMMON.CSS — 모든 페이지 공통 스타일
   - 색상 팔레트: 진회색 40% / 블랙 30% / 청남색 10% / 흰색 20%
   - 폰트: Pretendard 단일 사용 (전 페이지 통일)
   ======================================================== */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

/* ---------- CSS Variables ---------- */
:root{
    --c-darkgray: #2C2F33;      /* 진회색 40% */
    --c-darkgray-2: #383C42;
    --c-black:    #0F1115;      /* 블랙 30% */
    --c-black-2:  #1A1D22;
    --c-navy:     #1B3A6B;      /* 청남색 10% — XGRIDS 톤 매칭 */
    --c-navy-hl:  #5AA1FF;      /* 청남색 강조 — 어두운 배경 가독성 ↑ (이전 #2E62B3 → #5AA1FF) */
    --c-navy-soft:rgba(46,98,179,0.18);
    --c-white:    #F2F2EE;      /* 콘크리트 흰색 20% */
    --c-white-2:  #C9C9C2;
    --c-line:     rgba(242,242,238,0.12);

    --font-display: 'Pretendard', sans-serif;
    --font-body:    'Pretendard', sans-serif;

    --header-h: 60px;
    --max-w: 1280px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
    font-family: var(--font-body);
    background: var(--c-black);
    color: var(--c-white);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* 한글 단어 단위 줄바꿈 — 영문 단어 / 한글 어절이 중간에서 끊기지 않게 */
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ============================================================
   전역 텍스트 줄바꿈 강화 — 모든 텍스트 컨테이너에 명시적 적용
   한글: 어절(단어) 단위로만 끊기게 (word-break: keep-all)
   영문 장단어: 단어 사이에서 우선 끊고, 정말 안 되면 단어 안에서 끊기 (overflow-wrap: break-word)
   ※ overflow-wrap: anywhere 는 한글 글자도 끊어 어색해서 사용 안 함
   ============================================================ */
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, span, a,
th, td, blockquote, figcaption,
.desc, .sub, .lead, .eyebrow,
.product-row-text, .product-row-text *,
.industry-text, .industry-text *,
.biz-card, .biz-card *,
.tl-card, .tl-card *,
.pd-summary, .pd-summary *,
.pd-section, .pd-section *,
.feat-card, .feat-card *,
.compat-card, .compat-card *,
.sysreq-card, .sysreq-card *,
.grade-card, .grade-card *,
.cmp-card, .cmp-card *,
.qi-panel, .qi-panel *,
.cf-table, .cf-table *,
.sw-intro, .sw-intro *,
.sw-hero, .sw-hero *,
.lcc-block-title, .lcc-block-sub,
.about-message p,
.about-intro p,
.section-subtitle,
.section-title,
.block-title,
.block-sub,
.cat-title,
.cat-sub{
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ============================================================
   파란색 소형 라벨 가독성 강화 — 전 페이지 / 모든 셀렉터 일괄
   (navy-hl 색상 텍스트는 무조건 굵게 + 최소 폰트 크기 보장)
   ============================================================ */
.eyebrow,
.block-eyebrow,
.cat-eyebrow,
.industry-eyebrow,
.industry-text .industry-eyebrow,
.pd-eyebrow,
.pd-section .pd-eyebrow,
.pd-video-eyebrow,
.pd-perf-specs-title,
.pd-video-cap,
.product-tag,
.sw-tag,
.cmp-card-tag,
.brand-tag,
.pd-summary .brand-tag,
.dl-label,
.dl-meta,
.biz-tag,
.biz-card .biz-tag,
.grade-tag,
.grade-card .grade-tag,
.grade-shared .g-label,
.perf-title,
.perf-sub,
.tl-card h3,
.lcc-viewer-overlay-sub,
.lcc-viewer-overlay-title,
.lcc-viewer-cta-pill,
.history-period,
.qi-eyebrow,
.qi-full-link,
.info-sub,
.contact-info .info-sub,
.info-block .label,
.contact-info-section .label{
    font-weight: 700 !important;
}

/* 12px 이하로 너무 작은 라벨들은 14px 로 끌어올림 */
.eyebrow,
.block-eyebrow,
.cat-eyebrow,
.pd-eyebrow,
.pd-section .pd-eyebrow,
.pd-video-eyebrow,
.biz-tag,
.biz-card .biz-tag,
.grade-tag,
.grade-card .grade-tag,
.qi-eyebrow{
    font-size: 14px !important;
    letter-spacing: 0.3px !important;
}

/* ============================================================
   제품 상세 페이지 PRODUCT VIDEO — 하단 자막 가리기 (모든 페이지 일괄)
   영상 프레임을 짧게 (16:8) + 위쪽 정렬로 하단 ~10% 자동 크롭
   ============================================================ */
.pd-video-el{
    aspect-ratio: 16 / 8 !important;
    object-fit: cover !important;
    object-position: center top !important;
}

/* ============================================================
   본문/서브타이틀/설명문 — 전 페이지 통일 룩
   ("캡처한 데이터를 가공하고 활용하는 XGRIDS 소프트웨어 솔루션" 스타일)
   ============================================================ */
.section-subtitle,
.section-inner > .section-subtitle,
.product-desc,
.sw-desc,
.pd-desc,
.pd-sub,
.cat-sub,
.industry-text p,
.industry-text > p,
.ind-body p,
.biz-card .biz-body p,
.uc-desc,
.ind-card .ind-body p,
.grade-sub,
.grade-note,
.lead,
.page-hero .lead,
.lcc-viewer-overlay-sub,
.cf-sub{
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    color: var(--c-white-2);
    letter-spacing: 0.5px;
    line-height: 1.7;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }

/* 콘크리트/석회암 텍스처 그라데이션은 섹션 간 색상 차이를 만들어 제거.
   body 의 단색 검정만 사용. */

/* ============================================================
   HEADER (상단 패널)
   ============================================================ */
.site-header{
    position: fixed;
    top:0; left:0; right:0;
    height: var(--header-h);
    background: rgba(15,17,21,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--c-line);
    z-index: 100;
    display:flex;
    align-items:center;
}
.site-header .header-inner{
    width:100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 32px;
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    height: 100%;
}

/* 좌·우 로고 공통 — 투명 PNG 직접 표시 */
.site-header .logo{
    display:flex; align-items:center; justify-content:center; gap:8px;
    height: 60px;
    padding: 0;
    background: transparent;
    transition: transform .2s ease, opacity .2s ease;
    overflow: visible;
}
.site-header .logo:hover{
    transform: translateY(-1px);
}
.site-header .logo img{
    max-height: 72px;
    max-width: 360px;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
    /* 어두운 헤더에서 회색 텍스트가 살짝 묻히지 않도록 보정 */
    filter: brightness(1.45) contrast(1.05);
}
/* 좌측 3dgslabs.ai 로고는 이미지 내부 여백이 커서 max-height를 키워 시각적 높이를 우측과 맞춤 */
.site-header .logo-left img{
    max-height: 140px;
}
.site-header .logo-right img{
    max-height: 52px;
    max-width: 80px;
    filter: brightness(1.05);
}
.site-header .logo .logo-fallback{
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.3px;
    color: var(--c-white);
}

.site-header .logo-left{ justify-self: start; }
.site-header .logo-right{ justify-self: end; }

/* 가운데 메뉴 — 간격 1.25× */
.site-header .nav{
    justify-self: center;
    display:flex; gap: 70px;
    height: 100%;
    align-items: center;
}
.site-header .nav > a,
.site-header .nav .nav-item > a{
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.3px;
    color: var(--c-white-2);
    padding: 6px 4px;
    position:relative;
    transition: color .25s ease;
    display: inline-flex;
    align-items: center;
}
.site-header .nav > a::after,
.site-header .nav .nav-item > a::after{
    content:'';
    position:absolute; left:0; right:0; bottom:0;
    height:2px;
    background: var(--c-navy-hl);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s ease;
}
.site-header .nav > a:hover,
.site-header .nav > a.active,
.site-header .nav .nav-item > a:hover,
.site-header .nav .nav-item > a.active{ color: var(--c-white); }
.site-header .nav > a:hover::after,
.site-header .nav > a.active::after,
.site-header .nav .nav-item > a:hover::after,
.site-header .nav .nav-item > a.active::after{ transform: scaleX(1); }

/* ---------- 드롭다운 (제품) ---------- */
.site-header .nav-item{
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.site-header .nav-item .dropdown{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 180px;
    background: rgba(15,17,21,0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--c-line);
    border-top: 2px solid var(--c-navy-hl);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, transform .25s ease, visibility .22s;
    z-index: 50;
    box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
.site-header .nav-item:hover .dropdown,
.site-header .nav-item:focus-within .dropdown{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.site-header .nav-item .dropdown{
    min-width: 220px;
}
.site-header .nav-item .dropdown a{
    display: block;
    padding: 9px 28px;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.3px;
    color: var(--c-white-2);
    text-align: center;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
    position: relative;
}
.site-header .nav-item .dropdown a::after{ display: none; } /* nav 밑줄 제거 */
.site-header .nav-item .dropdown a:hover{
    background: rgba(46,98,179,0.18);
    color: var(--c-white);
}

/* 드롭다운 카테고리 헤더 (HARDWARE / SOFTWARE) */
.site-header .nav-item .dropdown .dd-group-title{
    display: block;
    padding: 10px 28px 6px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--c-navy-hl);
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
}
.site-header .nav-item .dropdown .dd-divider{
    height: 1px;
    margin: 6px 18px;
    background: var(--c-line);
}

/* ============================================================
   FOOTER (하단 패널)
   ============================================================ */
.site-footer{
    background: var(--c-darkgray);
    color: var(--c-white-2);
    padding: 56px 32px 28px;
    margin-top: 80px;
    border-top: 1px solid var(--c-line);
    position:relative;
    z-index: 1;
}
.site-footer .footer-inner{
    max-width: var(--max-w);
    margin: 0 auto;
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(242,242,238,0.08);
}
.site-footer .footer-left{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: fit-content;        /* 가장 긴 자식(이메일)이 컨테이너 폭을 결정 */
    height: 100%;
}
.site-footer .footer-left .brand{
    display:flex; align-items:center; gap: 12px;
}
.site-footer .footer-left .brand img{
    height: 134px; width:auto;
    filter: brightness(1.5) contrast(1.05);
}
.site-footer .footer-left .brand .brand-text{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    color: var(--c-white);
    letter-spacing: 0.3px;
}
.site-footer .footer-left p{
    font-size: 14px; line-height: 1.7;
    color: var(--c-white-2);
    margin: 0;
}
.site-footer .footer-right{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    text-align: right;
    font-size: 14px;
    color: var(--c-white-2);
    line-height: 1.7;
    height: 100%;
    padding-top: 20px;            /* YouTube 아이콘 높이만큼 내려서 좌측 컬럼과 시각적 정렬 */
}
.site-footer .footer-right .addr-ko{ color: var(--c-white); margin: 0; }
.site-footer .footer-right .addr-en{ color: var(--c-white-2); margin: 0; opacity: 0.85; }
.site-footer .footer-right .biz{
    display: block;
    margin: 0;
}
.site-footer .footer-right .biz span{ display: inline-block; }
.site-footer .footer-bottom{
    max-width: var(--max-w);
    margin: 28px auto 0;
    display:flex; align-items:center; gap: 16px;
    font-size: 12px;
    color: var(--c-white-2);
}
.site-footer .footer-bottom .corp{ color: var(--c-white); font-weight: 500; }
.site-footer .footer-bottom .sep{ opacity: 0.4; }
.site-footer .footer-bottom .footer-link{
    color: var(--c-white-2);
    text-decoration: none;
    transition: color .2s ease;
}
.site-footer .footer-bottom .footer-link:hover{ color: var(--c-white); }
.site-footer .footer-bottom .footer-link strong{ font-weight: 500; }

/* ============================================================
   CUSTOM CURSOR — 이중 원 + 클릭 시 파장 ripple (데스크탑 전용)
   - 외부 ring (흰 테두리) — 마우스를 부드럽게 따라옴
   - 내부 dot (중심 → 외부 그라데이션 청남) — 즉각 이동
   - 클릭 시 두 겹 파장이 시차로 퍼짐
   ============================================================ */
/* 커스텀 커서 비활성 — 기본 OS 커서 사용 */
/*
@media (hover: hover) and (pointer: fine){
    html, body, body *{
        cursor: none;
    }
    input, textarea, select, [contenteditable="true"]{
        cursor: text;
    }
}
*/

.cur-ring,
.cur-dot{
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    will-change: transform;
}
.cur-ring{
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    transition: width .25s ease, height .25s ease, border-color .25s ease, opacity .2s ease;
}
.cur-dot{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(46, 98, 179, 1.0) 0%,
        rgba(46, 98, 179, 0.85) 45%,
        rgba(46, 98, 179, 0)    100%);
    transition: width .15s ease, height .15s ease, opacity .2s ease;
}
.cur-ring.hover{
    width: 56px;
    height: 56px;
    border-color: var(--c-navy-hl);
    border-width: 2px;
}
.cur-dot.hover{
    width: 8px;
    height: 8px;
}
.cur-ring.hidden,
.cur-dot.hidden{
    opacity: 0;
}

/* 클릭 파장 */
.cur-ripple{
    position: fixed;
    pointer-events: none;
    z-index: 99998;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}
.cur-ripple.r1{
    border: 2px solid var(--c-navy-hl);
    animation: curRipple 0.75s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}
.cur-ripple.r2{
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    animation: curRipple 0.95s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}
@keyframes curRipple{
    0%   { width: 22px;  height: 22px;  opacity: 0.95; border-width: 2px; }
    100% { width: 180px; height: 180px; opacity: 0;    border-width: 0.4px; }
}

/* 터치 디바이스에서 비활성 */
@media (hover: none), (pointer: coarse){
    .cur-ring, .cur-dot, .cur-ripple{ display: none !important; }
}

/* ============================================================
   PAGE HERO SLIDES (산업/제품/문의 페이지 상단 박스 공용)
   data-hero-folder="<폴더명>" 으로 자동 스캔 후 슬라이드 표시
   ============================================================ */
.hero-bg-slides{
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-bg-slides .bg-slide{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 1.0s ease, transform 6s ease;
}
.hero-bg-slides .bg-slide.active{
    opacity: 1;
    transform: scale(1.0);
}
.hero-overlay-grad{
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(15,17,21,0.40) 0%,
        rgba(15,17,21,0.55) 55%,
        rgba(15,17,21,0.92) 100%);
    pointer-events: none;
}
.hero-bg-dots{
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}
.hero-bg-dots .dot{
    width: 30px;
    height: 3px;
    background: rgba(242,242,238,0.3);
    border: none;
    cursor: pointer;
    transition: background .25s ease;
}
.hero-bg-dots .dot.active{ background: var(--c-white); }

/* ============================================================
   SOFTWARE CARDS — 메인/제품 페이지 공통
   ============================================================ */
.sw-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 28px;
}
.sw-card{
    background: var(--c-darkgray);
    border: 1px solid var(--c-line);
    padding: 40px 36px;
    display: flex;
    align-items: flex-start;
    gap: 28px;
    transition: border-color .25s ease, transform .25s ease, background .25s ease;
    /* anchor 로 사용될 때 기본 링크 스타일 제거 */
    text-decoration: none;
    color: inherit;
}
a.sw-card{ cursor: pointer; }
.sw-card:hover{
    border-color: var(--c-navy-hl);
    transform: translateY(-4px);
    background: var(--c-darkgray-2);
}
.sw-card .sw-icon{
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    color: var(--c-navy-hl);
    background: rgba(46,98,179,0.08);
    border: 1px solid rgba(46,98,179,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}
.sw-card:hover .sw-icon{
    color: var(--c-white);
    background: rgba(46,98,179,0.18);
    border-color: var(--c-navy-hl);
    box-shadow: 0 0 20px rgba(46,98,179,0.4);
}
.sw-card .sw-icon svg,
.sw-card .sw-icon img{
    width: 52px;
    height: 52px;
    object-fit: contain;
    transition: filter .3s ease;
}
.sw-card:hover .sw-icon img{
    filter: drop-shadow(0 0 6px rgba(46,98,179,0.55));
}
.sw-card .sw-body{ flex: 1; min-width: 0; }
.sw-card .sw-name{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: 0.4px;
    color: var(--c-white);
    margin-bottom: 6px;
}
.sw-card .sw-tag{
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.3px;
    color: var(--c-navy-hl);
    margin-bottom: 18px;
}
.sw-card .sw-desc{
    font-size: 14px;
    color: var(--c-white-2);
    line-height: 1.75;
    margin-bottom: 20px;
}
.sw-card .sw-features{
    list-style: none;
    padding: 0;
    margin: 0;
}
.sw-card .sw-features li{
    font-size: 13px;
    color: var(--c-white);
    padding: 6px 0 6px 20px;
    position: relative;
}
.sw-card .sw-features li::before{
    content: '';
    position: absolute;
    left: 0; top: 14px;
    width: 12px; height: 1px;
    background: var(--c-navy-hl);
}
@media (max-width: 960px){
    .sw-grid{ grid-template-columns: 1fr; }
    .sw-card{ padding: 28px 22px; gap: 18px; }
    .sw-card .sw-icon{ width: 60px; height: 60px; }
    .sw-card .sw-icon svg,
    .sw-card .sw-icon img{ width: 38px; height: 38px; }
}

/* ============================================================
   PRODUCT DETAIL — PERFORMANCE 성능 비교 그래프
   ACCESSORIES 위에 들어가는 가로 막대 비교 차트
   ============================================================ */
.pd-performance{
    background: var(--c-black);
    border-top: 1px solid var(--c-line);
}
.perf-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 16px;
}

/* ---------- DETAILED SPECS — 퍼포먼스 섹션 하단 상세 스펙 ---------- */
.pd-perf-specs{
    margin-top: 64px;
    padding-top: 44px;
    border-top: 1px solid var(--c-line);
}
.pd-perf-specs-title{
    font-family: var(--font-display);
    font-size: 18px;                     /* 14 → 18 */
    letter-spacing: 0.5px;
    color: var(--c-navy-hl);
    margin-bottom: 32px;
    text-align: center;
    text-transform: uppercase;
}
.pd-perf-specs-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 56px;                          /* 32 → 56 */
    /* max-width 제거 — perf-grid(상단 막대) 와 동일 폭으로 */
}
.pd-perf-specs-list li{
    display: grid;
    grid-template-columns: 180px 1fr;     /* 140 → 180 */
    align-items: center;
    padding: 18px 4px;                    /* 14 → 18 */
    border-bottom: 1px solid var(--c-line);
    font-size: 16px;                      /* 14 → 16 */
}
.pd-perf-specs-list li .k{
    font-family: var(--font-display);
    font-size: 14px;                      /* 12 → 14 */
    letter-spacing: 0.5px;
    color: var(--c-navy-hl);
    text-transform: uppercase;
}
.pd-perf-specs-list li .v{
    color: var(--c-white);
    font-size: 16px;                      /* 14 → 16 */
    font-weight: 500;
}
@media (max-width: 720px){
    .pd-perf-specs-list{ grid-template-columns: 1fr; gap: 0; }
    .pd-perf-specs-list li{ grid-template-columns: 130px 1fr; padding: 14px 0; font-size: 14px; }
    .pd-perf-specs-list li .k{ font-size: 12px; letter-spacing: 0.4px; }
    .pd-perf-specs-list li .v{ font-size: 14px; }
    .pd-perf-specs-title{ font-size: 15px; letter-spacing: 0.5px; margin-bottom: 24px; }
}
.perf-card{
    background: var(--c-darkgray);
    border: 1px solid var(--c-line);
    padding: 28px 30px;
    transition: border-color .25s ease, transform .25s ease;
}
.perf-card:hover{
    border-color: var(--c-navy-hl);
    transform: translateY(-2px);
}
.perf-card .perf-title{
    font-family: var(--font-display);
    color: var(--c-navy-hl);
    font-size: 18px;
    letter-spacing: 0.3px;
    font-weight: 600;
    margin-bottom: 4px;
}
.perf-card .perf-sub{
    font-family: var(--font-display);
    color: var(--c-white-2);
    font-size: 12px;
    letter-spacing: 0.3px;
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-line);
}
.perf-bar{ margin-bottom: 22px; }
.perf-bar:last-child{ margin-bottom: 0; }
.perf-bar .bar-meta{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.perf-bar .bar-label{
    font-size: 13px;
    color: var(--c-white-2);
    font-weight: 500;
}
.perf-bar .bar-value{
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--c-white);
    font-weight: 700;
    letter-spacing: 0.5px;
}
.perf-bar .bar-value .unit{
    font-size: 12px;
    color: var(--c-white-2);
    margin-left: 4px;
    font-weight: 400;
}
.perf-bar.primary .bar-value{ color: #5AA1FF; }
.perf-bar .bar-track{
    height: 10px;
    background: rgba(242,242,238,0.05);
    overflow: hidden;
    position: relative;
}
.perf-bar .bar-fill{
    height: 100%;
    width: 0;
    transition: width 1.4s cubic-bezier(0.15, 0.65, 0.2, 1);
}
.perf-bar.compare .bar-fill{
    background: linear-gradient(90deg, #4a4d52 0%, #6a6d72 100%);
}
.perf-bar.primary .bar-fill{
    background: linear-gradient(90deg, #1B3A6B 0%, #2E62B3 50%, #5AA1FF 100%);
    box-shadow: 0 0 14px rgba(46,98,179,0.5);
}
/* IntersectionObserver 트리거 시 max width 도달 */
.perf-bar .bar-fill.animate{ width: var(--w, 0%); }

@media (max-width: 720px){
    .perf-grid{ grid-template-columns: 1fr; }
    .perf-card{ padding: 22px 20px; }
}

/* ============================================================
   드롭다운 안 '제품 비교' 항목 강조 구분
   ============================================================ */
.site-header .nav-item .dropdown a.compare-link{
    margin-top: 6px;
    border-top: 1px solid var(--c-line);
    padding-top: 12px;
    color: var(--c-navy-hl);
    font-weight: 700;
}
.site-header .nav-item .dropdown a.compare-link:hover{
    color: var(--c-white);
}

/* ============================================================
   CLICK GLOW — 박스/버튼 클릭 시 테두리에 청남색 글로우
   - 어디를 누르고 있는지 시각 피드백
   - common.js 가 pointerdown 시 .click-glow 클래스를 ~420ms 부착
   ============================================================ */
.click-glow{
    border-color: var(--c-navy-hl) !important;
    box-shadow:
        0 0 0 1.5px var(--c-navy-hl),
        0 0 28px rgba(46, 98, 179, 0.65),
        0 0 56px rgba(46, 98, 179, 0.32) !important;
    transition: box-shadow .12s ease-out, border-color .12s ease-out !important;
}

/* ============================================================
   PAGE WRAPPER (header 높이만큼 padding-top)
   ============================================================ */
main.page{
    padding-top: var(--header-h);
    position: relative;
    z-index: 1;
    min-height: calc(100vh - var(--header-h) - 240px);
}

/* ============================================================
   COMMON UI ELEMENTS
   ============================================================ */
.section{ padding: 80px 32px; }
.section-inner{ max-width: var(--max-w); margin: 0 auto; }

.section-title{
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 38px;
    letter-spacing: 0.3px;
    color: var(--c-white);
    margin-bottom: 12px;
}
.section-subtitle{
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--c-white-2);
    letter-spacing: 0.5px;
    line-height: 1.7;
    margin-bottom: 48px;
}

.btn{
    display:inline-block;
    padding: 14px 32px;
    border: 1px solid var(--c-white);
    color: var(--c-white);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: all .25s ease;
    cursor:pointer;
    background: transparent;
}
.btn:hover{ background: var(--c-white); color: var(--c-black); }
.btn.primary{
    background: var(--c-navy);
    border-color: var(--c-navy);
    color: var(--c-white);
}
.btn.primary:hover{ background: var(--c-navy-hl); border-color: var(--c-navy-hl); color: var(--c-white); }

/* ============================================================
   RESPONSIVE
   - 모바일~32"+ 대형 모니터까지 자연스럽게 스케일
   ============================================================ */

/* ---------- 32"+ 대형 모니터 (≥1600px) ---------- */
@media (min-width: 1600px){
    :root{
        --max-w: 1480px;
    }
    .section{ padding: 110px 40px; }
    .section-title{ font-size: 46px; }
    .section-subtitle{ font-size: 16px; }
}

/* ---------- 4K / 초대형 (≥2200px) ---------- */
@media (min-width: 2200px){
    :root{
        --max-w: 1720px;
        --header-h: 72px;
    }
    .site-header .nav > a,
    .site-header .nav .nav-item > a{ font-size: 17px; }
    .site-header .logo img{ max-height: 84px; max-width: 420px; }
    .site-header .logo-left img{ max-height: 165px; }
    .site-header .logo-right img{ max-height: 60px; max-width: 95px; }
    .section{ padding: 130px 48px; }
    .section-title{ font-size: 52px; }
}

/* ---------- 태블릿 (≤960px) ---------- */
@media (max-width: 960px){
    .section{ padding: 64px 24px; }
    .section-title{ font-size: 32px; }
    .section-subtitle{ margin-bottom: 36px; }
}

/* ---------- 모바일 (≤860px) ---------- */
@media (max-width: 860px){
    :root{ --header-h: 54px; }
    .site-header .header-inner{ padding: 0 10px; gap: 6px; }
    .site-header .nav{ gap: 18px; }
    .site-header .nav a{ font-size: 12px; }
    .site-header .logo{ height: 54px; padding: 0; overflow: visible; }
    /* POINTWORKS 로고 — 모바일에서 작게 (XGRIDS 와 시각적 무게 균형) */
    .site-header .logo img{ max-height: 60px; max-width: 200px; }
    .site-header .logo-right img{ max-height: 22px; max-width: 70px; }
    .site-header .logo .logo-fallback{ font-size: 13px; }
    .section{ padding: 56px 16px; }
    .section-title{ font-size: 28px; }
    .site-footer{ padding: 40px 16px 20px; }
    .site-footer .footer-inner{ grid-template-columns: 1fr; gap: 24px; }
    .site-footer .footer-right{ text-align: left; }
}

/* ---------- 작은 모바일 (≤480px) ---------- */
@media (max-width: 480px){
    .site-header .nav{ gap: 10px; }
    .site-header .nav > a,
    .site-header .nav .nav-item > a{ font-size: 11px; padding: 6px 2px; letter-spacing: 0.5px; }
    /* POINTWORKS / XGRIDS 로고 — 좁은 폰에서 더 축소 */
    .site-header .logo img{ max-height: 48px; max-width: 160px; }
    .site-header .logo-right img{ max-height: 18px; max-width: 56px; }
    .section{ padding: 48px 14px; }
    .section-title{ font-size: 24px; letter-spacing: 0.4px; }
    .section-subtitle{ font-size: 13px; margin-bottom: 28px; }
    .btn{ padding: 12px 24px; font-size: 13px; letter-spacing: 0.4px; }
    .site-footer{ padding: 32px 14px 18px; }
    .site-footer .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 6px; }
    .site-footer .footer-bottom .sep{ display: none; }
}

/* ---------- 드롭다운 — 좁은 화면(≤720px)에선 클릭/탭 우선 ---------- */
@media (max-width: 720px){
    .site-header .nav-item .dropdown{ min-width: 180px; }
    .site-header .nav-item .dropdown a{ padding: 10px 18px; }
}

/* ---------- 가로 모드 모바일 (높이가 매우 작은 경우) ---------- */
@media (max-height: 480px) and (orientation: landscape){
    :root{ --header-h: 48px; }
}

/* ============================================================
   제품 상세 사양 표 — 가로 2열 × 세로 N행 그리드
   ============================================================ */
.pd-fullspec{
    background: var(--c-black);
    padding: 64px 32px;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
}
.pd-fullspec .section-inner{
    max-width: 1280px;
    margin: 0 auto;
}
.pd-fullspec-table{
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;     /* 좌우 2칼럼 */
    column-gap: 48px;
}
.pd-fullspec-table .fs-row{
    display: grid;
    grid-template-columns: 130px 1fr;
    padding: 14px 8px;
    border-bottom: 1px solid var(--c-line);
    align-items: center;
    gap: 12px;
}
.pd-fullspec-table .fs-label{
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--c-navy-hl);
}
.pd-fullspec-table .fs-value{
    font-size: 14px;
    color: var(--c-white);
    line-height: 1.55;
    text-align: right;
}
/* 태블릿 — 2칼럼 유지하되 간격 축소 */
@media (max-width: 960px){
    .pd-fullspec{ padding: 56px 20px; }
    .pd-fullspec-table{ column-gap: 28px; }
    .pd-fullspec-table .fs-row{ grid-template-columns: 110px 1fr; padding: 12px 4px; }
    .pd-fullspec-table .fs-label{ font-size: 13px; letter-spacing: 0.4px; }
    .pd-fullspec-table .fs-value{ font-size: 13px; }
}
/* 모바일 — 1칼럼으로 합치고 라벨 위 / 값 아래 */
@media (max-width: 640px){
    .pd-fullspec{ padding: 48px 14px; }
    .pd-fullspec-table{ grid-template-columns: 1fr; column-gap: 0; }
    .pd-fullspec-table .fs-row{
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 12px 6px;
        align-items: start;
    }
    .pd-fullspec-table .fs-value{ text-align: left; }
}

/* ============================================================
   활용 사례 — 모든 페이지 공통 (회사소개 산업분야와 동일 룩)
   .industry-section / .industry-cards / .ind-card
   ============================================================ */
.industry-section{
    background: var(--c-black);
    padding: 80px 32px;
    border-top: 1px solid var(--c-line);
}
.industry-section .section-inner{
    max-width: var(--max-w);
    margin: 0 auto;
}
.industry-section .section-title{
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 44px);
    letter-spacing: 0.5px;
    color: var(--c-white);
    text-align: center;
    margin-bottom: 10px;
}
.industry-section .section-subtitle{
    font-size: 14px;
    color: var(--c-white-2);
    text-align: center;
    letter-spacing: 0.3px;
    margin-bottom: 40px;
}
.industry-cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ind-card{
    background: var(--c-darkgray);
    border: 1px solid var(--c-line);
    overflow: hidden;
    transition: transform .35s ease, border-color .25s ease, box-shadow .35s ease;
}
.ind-card:hover{
    transform: translateY(-6px);
    border-color: var(--c-navy-hl);
    box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.ind-img{
    width: 100%;
    aspect-ratio: 4 / 3.4;
    background: var(--c-black-2);
    overflow: hidden;
    border-bottom: 1px solid var(--c-line);
}
.ind-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.ind-card:hover .ind-img img{ transform: scale(1.06); }
.ind-body{
    padding: 24px 22px 28px;
}
.ind-body h3{
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--c-white);
    margin-bottom: 12px;
}
.ind-body p{
    font-size: 14px;
    color: var(--c-white-2);
    line-height: 1.7;
}
@media (max-width: 1100px){
    .industry-cards{ grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 720px){
    .industry-section{ padding: 56px 16px; }
    .industry-cards{ grid-template-columns: 1fr; gap: 18px; }
    .ind-body{ padding: 20px; }
}

/* ---------- 푸터 소셜 링크 (네이버 블로그 + 유튜브) ---------- */
.footer-right .footer-socials{
    /* socials → 푸터 right 컬럼 최상단 */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 14px;                  /* addr-ko 와 약간의 간격 */
}
.footer-right .naver-blog,
.footer-right .youtube-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-white-2);
    font-size: 13px;
    text-decoration: none;
    transition: color .2s ease;
    line-height: 1;
}
.footer-right .naver-blog:hover,
.footer-right .youtube-link:hover{ color: var(--c-white); }
.footer-right .naver-blog:hover .nb-icon,
.footer-right .youtube-link:hover .yt-icon{ filter: brightness(1.08); }

/* 네이버 N 박스 (정사각) */
.footer-right .nb-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #03C75A;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;             /* 13 → 17 — 박스 안 글씨 키움 */
    line-height: 1;
    border-radius: 4px;
    transition: filter .2s ease;
}

/* 유튜브 박스 (가로형 직사각형 + 흰색 ▶) */
.footer-right .yt-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 20px;
    background: #FF0000;
    border-radius: 5px;
    transition: filter .2s ease;
}
.footer-right .yt-icon svg{
    display: block;
    width: 18px;                  /* 14 → 18 — 삼각형 키움 */
    height: 18px;
}

.footer-right .nb-label,
.footer-right .yt-label{ letter-spacing: 0.2px; }

@media (max-width: 720px){
    /* footer-right 가 좌측 정렬되는 모바일 — 소셜도 좌측 정렬 */
    .footer-right .footer-socials{ justify-content: flex-start; }
}

/* ============================================================
   QUICK INQUIRY — 우측 책갈피 탭 + 슬라이드 패널 빠른 문의
   ============================================================ */
.quick-inq-tab{
    position: fixed;
    top: 25%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9000;
    background: var(--c-navy-hl);
    color: #fff;
    border: none;
    padding: 18px 8px 18px 12px;
    border-radius: 8px 0 0 8px;
    box-shadow: -4px 0 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08);
    cursor: pointer;
    writing-mode: vertical-rl;
    font-family: var(--font-display);
    letter-spacing: 0.5px;
    font-size: 13px;
    font-weight: 600;
    transition: background .25s ease, padding .25s ease, transform .25s ease;
}
.quick-inq-tab:hover{
    background: #4A82D9;
    padding-right: 14px;
}
.quick-inq-tab .qi-icon{
    display: block;
    margin-bottom: 8px;
    line-height: 1;
}

.quick-inq-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9001;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.quick-inq-backdrop.is-open{
    opacity: 1;
    pointer-events: auto;
}

.quick-inq-panel{
    position: fixed;
    top: 0;
    right: 0;
    width: min(440px, 92vw);
    height: 100vh;
    background: var(--c-darkgray);
    border-left: 1px solid var(--c-line);
    box-shadow: -10px 0 40px rgba(0,0,0,0.55);
    z-index: 9002;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    overflow-y: auto;
}
.quick-inq-panel.is-open{ transform: translateX(0); }
.qi-panel-inner{
    padding: 36px 30px 50px;
    position: relative;
}
.qi-close{
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px; height: 38px;
    background: transparent;
    border: 1px solid var(--c-line);
    color: var(--c-white);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background .2s ease, border-color .2s ease;
}
.qi-close:hover{
    background: rgba(255,255,255,0.08);
    border-color: var(--c-navy-hl);
}
.qi-eyebrow{
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.5px;
    color: var(--c-navy-hl);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.qi-panel-inner h3{
    font-family: var(--font-display);
    color: var(--c-white);
    font-size: 24px;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}
.qi-lead{
    color: var(--c-white-2);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 22px;
}
.qi-form label{
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    color: #6FA3F0;
    letter-spacing: 0.3px;
    font-family: var(--font-display);
    text-transform: uppercase;
}
.qi-form .qi-req::after{ content: " *"; color: #ff6b6b; }
.qi-form input,
.qi-form textarea{
    display: block;
    width: 100%;
    margin-top: 6px;
    background: var(--c-black);
    border: 1px solid var(--c-line);
    color: var(--c-white);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 11px 13px;
    border-radius: 4px;
    text-transform: none;
    letter-spacing: 0;
    transition: border-color .2s ease;
}
.qi-form input:focus,
.qi-form textarea:focus{
    outline: none;
    border-color: var(--c-navy-hl);
    background: var(--c-black-2);
}
.qi-form textarea{ resize: vertical; min-height: 90px; }
.qi-submit{
    width: 100%;
    padding: 13px 22px;
    background: var(--c-navy-hl);
    color: #fff;
    border: none;
    font-family: var(--font-display);
    letter-spacing: 0.5px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    border-radius: 4px;
    text-transform: uppercase;
    transition: background .2s ease, transform .2s ease;
}
.qi-submit:hover{ background: #4A82D9; transform: translateY(-1px); }
.qi-submit:disabled{ opacity: 0.6; cursor: wait; transform: none; }
.qi-full-link{
    display: block;
    text-align: center;
    margin-top: 16px;
    color: var(--c-navy-hl);
    font-size: 12px;
    text-decoration: none;
    letter-spacing: 0.3px;
}
.qi-full-link:hover{ color: #5AA1FF; }
.qi-status{
    margin-top: 14px;
    padding: 10px 12px;
    text-align: center;
    color: var(--c-white);
    font-size: 13px;
    border-radius: 4px;
    background: rgba(46,98,179,0.15);
    border: 1px solid var(--c-line);
}
.qi-status.error{ background: rgba(255,107,107,0.10); border-color: rgba(255,107,107,0.4); }
body.qi-locked{ overflow: hidden; }

@media (max-width: 720px){
    .quick-inq-tab{ padding: 14px 6px 14px 10px; font-size: 12px; letter-spacing: 0.5px; }
    .qi-panel-inner{ padding: 28px 22px 40px; }
}