@charset "UTF-8";

/* ==========================================================================
   tokens — 임시값. 시안 확정 시 이 블록만 교체 (SKILL.md 6번 표와 함께)
   ========================================================================== */
:root{
  /* color */
  --c-primary:#0f2a4a;      /* 딥 네이비 */
  --c-secondary:#1f5fa8;
  --c-point:#b4561c;        /* 코퍼 */
  --c-steel:#5b6570;
  --c-text:#222;
  --c-text-sub:#666;
  --c-line:#dde2e7;
  --c-bg:#f4f6f8;
  --c-white:#fff;
  --c-footer-text:#5b6570;  /* 밝은 푸터 배경 위 (대비 5.5:1) — 푸터 로고가 네이비 글자라 배경을 밝게 둠 */
  --c-error:#d92b2b;
  /* layout */
  --w-inner:1280px;
  --h-header:90px;
  --h-header-m:64px;
  /* type */
  --ff-base:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,
            'Malgun Gothic','맑은 고딕',sans-serif;
  /* etc */
  --radius:8px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   base
   ========================================================================== */
body{ font-family:var(--ff-base); font-size:1rem; line-height:1.6; color:var(--c-text); background:var(--c-white); word-break:keep-all; }
body.is-scroll-lock{ overflow:hidden; }
.inner{ width:100%; max-width:var(--w-inner); margin:0 auto; padding:0 20px; }
dl,dd{ margin:0; }
.blind{ position:absolute; clip:rect(0 0 0 0); clip-path:inset(50%); width:1px; height:1px; margin:-1px; overflow:hidden; white-space:nowrap; }
.skip{ position:absolute; top:-100px; left:0; z-index:1000; padding:12px 20px; background:var(--c-primary); color:var(--c-white); }
.skip:focus{ top:0; }
:focus-visible{ outline:2px solid var(--c-secondary); outline-offset:2px; }

/* ==========================================================================
   header / gnb
   ========================================================================== */
#header{ position:sticky; top:0; z-index:100; background:var(--c-white); border-bottom:1px solid var(--c-line); transition:box-shadow .3s var(--ease); }
#header.is-scrolled{ box-shadow:0 4px 16px rgba(15,42,74,.08); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:var(--h-header); }
/* 로고: B안 H 모노그램 심볼 + 글자 (SVG·텍스트라 해상도와 배경에 관계없이 선명) */
.logo{ display:flex; align-items:center; gap:10px; flex-shrink:0; color:var(--c-primary); }
.logo-mark{ display:block; flex-shrink:0; }
.logo-text{ display:flex; flex-direction:column; gap:3px; }
.logo-ko{ font-size:1.375rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
.logo-en{ font-size:.5rem; font-weight:600; line-height:1; letter-spacing:.24em; color:var(--c-steel); white-space:nowrap; }

#gnb{ margin-left:auto; }
.gnb-list{ display:flex; gap:56px; }

/* GNB 오른쪽 연락처 (이메일 | 전화) */
.header-contact{ display:flex; align-items:center; flex-shrink:0; margin-left:48px; padding:0 6px; border:1px solid var(--c-line); border-radius:999px; font-style:normal; transition:border-color .2s; }
.header-contact:hover,
.header-contact:focus-within{ border-color:var(--c-primary); }
.header-contact-link{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px; font-size:.875rem; font-weight:500; color:var(--c-text); white-space:nowrap; font-variant-numeric:tabular-nums; }
.header-contact-link + .header-contact-link{ position:relative; }
.header-contact-link + .header-contact-link::before{ content:''; position:absolute; left:0; top:50%; width:1px; height:14px; background:var(--c-line); transform:translateY(-50%); }
.header-contact-link:hover{ color:var(--c-primary); }
.header-contact-ico{ flex-shrink:0; color:var(--c-primary); }
.gnb-item{ position:relative; }
.gnb-link{ display:flex; align-items:center; height:var(--h-header); font-size:1.125rem; font-weight:600; color:var(--c-text); }
.gnb-item.is-active > .gnb-link,
.gnb-link:hover{ color:var(--c-primary); }
.gnb-sub{ display:none; position:absolute; top:100%; left:50%; min-width:160px; padding:12px 0; background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--radius); transform:translateX(-50%); }
.gnb-item:hover .gnb-sub,
.gnb-item:focus-within .gnb-sub{ display:block; }
.gnb-sub a{ display:block; padding:8px 20px; color:var(--c-text-sub); white-space:nowrap; }
.gnb-sub a:hover,
.gnb-sub a.is-active{ color:var(--c-primary); font-weight:600; }

.btn-allmenu{ display:none; position:relative; width:40px; height:40px; }
.btn-allmenu-bar,
.btn-allmenu-bar::before,
.btn-allmenu-bar::after{ position:absolute; left:8px; width:24px; height:2px; background:var(--c-primary); transition:transform .3s var(--ease), opacity .3s; }
.btn-allmenu-bar{ top:19px; }
.btn-allmenu-bar::before,
.btn-allmenu-bar::after{ content:''; left:0; }
.btn-allmenu-bar::before{ top:-7px; }
.btn-allmenu-bar::after{ top:7px; }
#header.is-menu-open .btn-allmenu-bar{ background:transparent; }
#header.is-menu-open .btn-allmenu-bar::before{ transform:translateY(7px) rotate(45deg); }
#header.is-menu-open .btn-allmenu-bar::after{ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   sub layout
   ========================================================================== */
.sub-visual{ position:relative; display:flex; align-items:center; height:280px; background:var(--c-primary) center/cover no-repeat; color:var(--c-white); }
.sub-visual-title{ font-size:2.5rem; font-weight:700; }
.sub-visual::before{ content:''; position:absolute; inset:0; background:rgba(15,42,74,.55); }
.sub-visual > .inner{ position:relative; }
[data-depth1="company"] .sub-visual{ background-image:url(/images/common/sub-visual/img-visual-ceo.jpg); }
[data-depth1="product"] .sub-visual,
[data-depth1="tech"] .sub-visual,
[data-depth1="equipment"] .sub-visual{ background-image:url(/images/common/sub-visual/img-visual-technic.jpg); }
[data-depth1="support"] .sub-visual{ background-image:url(/images/common/sub-visual/img-visual-notice.jpg); }

.lnb{ border-bottom:1px solid var(--c-line); }
.lnb-list{ display:flex; gap:40px; }
.lnb-list a{ display:block; padding:18px 0; color:var(--c-text-sub); border-bottom:2px solid transparent; }
.lnb-list a.is-active{ color:var(--c-primary); font-weight:600; border-bottom-color:var(--c-primary); }

.location ol{ display:flex; flex-wrap:wrap; gap:8px; padding:16px 0; font-size:.875rem; color:var(--c-text-sub); }
.location li + li::before{ content:'>'; margin-right:8px; color:var(--c-line); }
.location [aria-current]{ color:var(--c-text); }

.sub-content{ padding-top:40px; padding-bottom:120px; }
.sub-title{ margin-bottom:60px; font-size:2.25rem; font-weight:700; color:var(--c-primary); text-align:center; }
.tit-section{ margin-bottom:32px; font-size:1.75rem; font-weight:700; }
.tit-box{ margin-bottom:16px; font-size:1.25rem; font-weight:600; }
.txt-lead{ font-size:1.25rem; color:var(--c-text); }
.txt-desc{ color:var(--c-text-sub); }
.txt-note{ font-size:.875rem; color:var(--c-text-sub); }

/* ==========================================================================
   button
   ========================================================================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 28px; border:1px solid transparent; border-radius:var(--radius); font-weight:600; transition:background-color .2s, color .2s; }
.btn-primary{ background:var(--c-primary); color:var(--c-white); }
.btn-primary:hover{ background:var(--c-secondary); }
.btn-line{ border-color:var(--c-primary); color:var(--c-primary); }
.btn-line:hover{ background:var(--c-primary); color:var(--c-white); }
.btn-lg{ min-height:56px; padding:0 40px; font-size:1.125rem; }
.btn-sm{ min-height:36px; padding:0 16px; font-size:.875rem; }

/* ==========================================================================
   footer
   ========================================================================== */
#footer{ padding:48px 0 56px; background:var(--c-bg); border-top:1px solid var(--c-line); color:var(--c-footer-text); font-size:.875rem; }
.footer-logo{ display:inline-flex; margin-bottom:24px; }
.footer-links{ display:flex; gap:24px; margin-bottom:20px; }
.footer-links a{ color:var(--c-footer-text); }
.footer-links .link-privacy{ color:var(--c-primary); font-weight:700; }   /* 개인정보처리방침은 구분 표시 */
.footer-info{ display:flex; flex-wrap:wrap; gap:4px 20px; font-style:normal; }
.footer-info a{ color:inherit; }
.copyright{ margin-top:20px; }

/* ==========================================================================
   map (카카오맵 — 앱키가 있을 때만 JS가 .map에 지도를 그림. 링크는 항상 표시)
   ========================================================================== */
.map-wrap{ position:relative; }
.map{ aspect-ratio:16/9; background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--radius); overflow:hidden; }
.map-wrap .map-link{ position:absolute; right:12px; bottom:12px; z-index:2; }
.map-link{ display:inline-flex; align-items:center; min-height:40px; padding:0 16px; background:var(--c-white); border:1px solid var(--c-primary); border-radius:var(--radius); font-size:.875rem; font-weight:600; color:var(--c-primary); }

/* ==========================================================================
   빠른상담 (전 페이지 — 원클릭 상담)
   PC: 오른쪽 가장자리 세로 중앙 레일(빠른상담문의 탭 · 전화 · TOP) → 탭을 누르면 패널이 밀려 나옴
   768px 이하: 하단 고정 바 → '빠른상담'을 누르면 같은 패널이 아래에서 올라옴
   ========================================================================== */
.quick-rail{ position:fixed; right:0; top:50%; z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:8px; transform:translateY(-50%); }
.quick-tab{ display:flex; flex-direction:column; align-items:center; gap:14px; width:52px; padding:22px 0 18px; border-radius:26px 0 0 26px; background:var(--c-point); color:var(--c-white); box-shadow:0 6px 18px rgba(15,42,74,.18); transition:background-color .2s; }
.quick-tab:hover,
.quick-tab[aria-expanded="true"]{ background:#9a4817; }   /* --c-point 보다 진하게 (흰 글자 대비 6.4:1) */
.quick-tab-text{ writing-mode:vertical-rl; text-orientation:upright; font-size:.9375rem; font-weight:700; letter-spacing:.12em; }
.quick-rail-btn{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:26px 0 0 26px; background:var(--c-primary); color:var(--c-white); font-size:.8125rem; font-weight:800; letter-spacing:.04em; box-shadow:0 6px 18px rgba(15,42,74,.18); transition:background-color .2s; }
.quick-rail-btn:hover{ background:var(--c-secondary); }

.quick-panel{ position:fixed; right:0; top:50%; z-index:95; width:320px; overflow:hidden; border-radius:24px 0 0 24px; background:var(--c-white); box-shadow:-8px 12px 40px rgba(15,42,74,.22);
  visibility:hidden; transform:translate(100%, -50%); transition:transform .35s var(--ease), visibility 0s linear .35s; }
.quick-panel.is-open{ visibility:visible; transform:translate(0, -50%); transition:transform .35s var(--ease), visibility 0s; }
.quick-card{ padding:28px 28px 24px; }
.quick-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.quick-title{ font-size:1.375rem; font-weight:800; color:var(--c-primary); }
.quick-close{ position:relative; width:36px; height:36px; margin-right:-8px; }
.quick-close::before,
.quick-close::after{ content:''; position:absolute; left:9px; top:17px; width:18px; height:2px; background:var(--c-text); transform:rotate(45deg); }
.quick-close::after{ transform:rotate(-45deg); }
.quick-form input[type="text"],
.quick-form input[type="tel"]{ width:100%; height:52px; padding:0 16px; font-size:.9375rem; }
.quick-form input.quick-input-box{ border:1px solid var(--c-primary); border-radius:6px; }
.quick-form input.quick-input-line{ margin-top:8px; padding:0 2px; border-bottom:1px solid var(--c-line); }
.quick-form input:focus-visible{ outline:2px solid var(--c-secondary); outline-offset:0; }
.quick-form ::placeholder{ color:#767676; }
.quick-form .form-error{ margin-top:4px; font-size:.8125rem; color:var(--c-error); }
.quick-agree{ display:flex; align-items:center; gap:8px; margin-top:14px; font-size:.8125rem; color:var(--c-text-sub); }
.quick-agree input{ flex-shrink:0; width:18px; height:18px; border:1px solid var(--c-steel); border-radius:4px; background:var(--c-white); cursor:pointer; }
.quick-agree input:checked{ border-color:var(--c-primary); background:var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l2.8 2.8L9 1' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center; }
.quick-agree label{ cursor:pointer; }
.quick-agree a{ margin-left:auto; color:var(--c-secondary); text-decoration:underline; }
.quick-submit{ width:100%; height:54px; margin-top:18px; border-radius:27px; background:var(--c-point); color:var(--c-white); font-size:1rem; font-weight:700; transition:background-color .2s; }
.quick-submit:hover{ background:#9a4817; }
.quick-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.quick-submit:disabled{ opacity:.6; cursor:wait; }
.quick-msg{ margin-top:10px; font-size:.8125rem; color:var(--c-text-sub); text-align:center; }
.quick-msg.is-ok{ font-weight:700; color:var(--c-success, #1a7f4b); }
.quick-msg.is-error{ font-weight:700; color:var(--c-error); }
.quick-msg:empty{ display:none; }
.quick-call{ display:flex; align-items:center; gap:14px; padding:20px 28px; background:var(--c-primary); color:var(--c-white); }
.quick-call svg{ flex-shrink:0; }
.quick-call-num{ display:block; font-size:1.375rem; font-weight:800; letter-spacing:.01em; font-variant-numeric:tabular-nums; }
.quick-call-info{ display:block; font-size:.8125rem; opacity:.85; }

.quick-bar{ display:none; }

@media (max-width:768px){
  .quick-rail{ display:none; }
  .quick-bar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; background:var(--c-white); border-top:1px solid var(--c-line); box-shadow:0 -4px 16px rgba(15,42,74,.08); }
  .quick-bar li{ display:flex; flex:1; }
  .quick-bar li + li{ border-left:1px solid var(--c-line); }
  .quick-bar a,
  .quick-bar button{ display:flex; flex:1; align-items:center; justify-content:center; min-height:52px; padding:0 2px; font-size:.8125rem; color:var(--c-text); }
  .quick-bar .quick-bar-consult{ background:var(--c-point); color:var(--c-white); font-weight:700; }
  .quick-bar .quick-bar-top{ background:var(--c-primary); color:var(--c-white); font-weight:700; }
  #footer{ padding-bottom:84px; }   /* 하단 바에 가리지 않게 */

  /* 패널 → 아래에서 올라오는 시트 */
  .quick-panel{ top:auto; bottom:0; left:0; width:auto; border-radius:20px 20px 0 0; transform:translateY(100%); }
  .quick-panel.is-open{ transform:translateY(0); }
}

/* ==========================================================================
   responsive
   ========================================================================== */
/* 1025~1179px: 자리가 좁아 아이콘만 표시 (글자는 스크린리더용으로 남김) */
@media (max-width:1179px){
  .header-contact{ margin-left:24px; }
  .header-contact-link{ padding:0 12px; }
  .header-contact-txt{ position:absolute; clip:rect(0 0 0 0); clip-path:inset(50%); width:1px; height:1px; margin:-1px; overflow:hidden; white-space:nowrap; }
}

@media (max-width:1280px){
  .gnb-list{ gap:36px; }
}

@media (max-width:1024px){
  .header-inner{ height:var(--h-header-m); }
  .btn-allmenu{ display:block; }
  .header-contact{ display:none; }   /* 하단 퀵메뉴에 전화·메일 있음 */
  #gnb{ display:none; position:fixed; top:var(--h-header-m); left:0; right:0; bottom:0; overflow-y:auto; background:var(--c-white); }
  #header.is-menu-open #gnb{ display:block; }
  .gnb-list{ flex-direction:column; gap:0; padding:0 20px 40px; }
  .gnb-link{ height:auto; padding:20px 0 12px; }
  .gnb-sub{ display:block; position:static; padding:0 0 12px; border:0; transform:none; }
  .gnb-sub a{ padding:8px 0; }
  .gnb-item{ border-bottom:1px solid var(--c-line); }

  .sub-visual{ height:200px; }
  .sub-visual-title{ font-size:2rem; }
  .lnb-list{ gap:24px; overflow-x:auto; }
  .lnb-list a{ white-space:nowrap; }
}

@media (max-width:768px){
  br.pc-only{ display:none; }
  .sub-visual{ height:160px; }
  [data-depth1="company"] .sub-visual{ background-image:url(/images/common/sub-visual/mob/img-visual-ceo.jpg); }
  [data-depth1="product"] .sub-visual,
  [data-depth1="tech"] .sub-visual,
  [data-depth1="equipment"] .sub-visual{ background-image:url(/images/common/sub-visual/mob/img-visual-technic.jpg); }
  [data-depth1="support"] .sub-visual{ background-image:url(/images/common/sub-visual/mob/img-visual-notice.jpg); }
  .sub-visual-title{ font-size:1.625rem; }
  .sub-content{ padding-bottom:80px; }
  .sub-title{ margin-bottom:40px; font-size:1.75rem; }
  .tit-section{ font-size:1.375rem; }
  .footer-info{ flex-direction:column; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}