/* =====================================================================
   SAMJI Design Renewal Skin v2  (DESIGN.md / HP-derived)
   - 화이트 네브(상단 다크 스트립 없음 — 사용자 피드백), 잉크 푸터 슬랩
   - 단일 액센트: Electric Blue #024ad8 (CTA/링크/셰브론/액티브 전용)
   - 카드 16px Soft Lift / 버튼 4px 대문자 트래킹 — two-tier 지오메트리
   - 기존 jQuery 모션 체인(.is_motion/.wordAni/swiper/accordion/megamenu) 보존
   ===================================================================== */

:root {
  /* colors */
  --primary: #3c9fce;        /* 삼지 로고(logo_blue.svg) 컬러와 동일 — 사용자 지정 */
  --primary-bright: #6cc0e4;
  --primary-deep: #2c7da3;
  --primary-soft: #e1f1f8;
  --canvas: #ffffff;
  --cloud: #f7f7f7;
  --fog: #e8e8e8;
  --steel: #c2c2c2;
  --ink: #1a1a1a;
  --ink-deep: #000000;
  --on-ink: #ffffff;
  --charcoal: #3d3d3d;
  --graphite: #636363;
  --bloom-coral: #ff5050;
  /* shape */
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-xl: 16px;
  --r-pill: 9999px;
  /* elevation */
  --lift: 0 2px 8px rgba(26, 26, 26, 0.08);
  --float: 0 8px 24px rgba(26, 26, 26, 0.12);
  /* type */
  --font-sans: Manrope, "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Malgun Gothic", Arial, sans-serif;
}

/* ---------- 1. Base ---------- */
html, body { font-family: var(--font-sans) !important; color: var(--ink); background: var(--canvas); }
#wrap { background: var(--canvas); }
#container a { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
h1, h2, h3, h4, .title_big, .visual_title h2 { font-weight: 500 !important; }
strong, b { font-weight: 700; }

/* 버튼/인풋: 4px 샤프 지오메트리 */
#wrap button,
#wrap input[type="text"], #wrap input[type="email"], #wrap input[type="tel"],
#wrap textarea, #wrap select,
.btn_pdfView, .button {
  border-radius: var(--r-md) !important;
}

/* ---------- 2. Header: 화이트 nav-bar-top (다크 스트립 없음) ---------- */
#header { background: var(--canvas); border-bottom: 1px solid var(--fog); }
#header .inr { padding: 20px 48px 0; }
#header h1 > a { background-image: url(../images/common/logo_blue.svg) !important; }
#header .inr nav .gnb > li > a { color: var(--ink) !important; font-weight: 500; font-size: 16px; padding-bottom: 30px; }
#header nav .gnb > li > a:after { background: var(--primary); height: 2px; bottom: 0; }
#header .inr .area_lang button { color: var(--ink) !important; font-weight: 600; }
#header .inr .area_lang button:before { background-image: url(../images/common/ico_lang_black.png) !important; }
#header .area_lang .list_lang { background: var(--canvas); border: 1px solid var(--fog); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--lift); }
#header .area_lang .list_lang a { color: var(--ink); font-weight: 600; }
/* 햄버거: 다크 아이콘 */
#header .btn_menu span:before { background-image: url(../images/common/ico_menuopen_b.png) !important; }

/* 드롭다운 패널: 흰 메가패널 + 헤어라인 + Soft Lift — 본문 텍스트와 겹침 방지.
   jQuery slideDown/slideUp 경합으로 패널이 중간 높이에서 멈추는 문제가 있어
   호버 동안 높이/표시를 CSS로 핀 고정한다 (인라인 스타일보다 !important 우선). */
.gnb_bg {
  z-index: 1 !important;
  /* 서브페이지: 드롭다운 배경 100% 완전 투명 (사용자 요청) */
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none; /* 장식 패널 — 메뉴 링크의 호버를 가로채지 않도록 */
}
/* 메인(비디오 히어로)에서만 흰 패널 — 영상 위에선 투명 글자가 안 읽히므로 (사용자 요청) */
body.page_main .gnb_bg {
  background: var(--canvas) !important;
  border-bottom: 1px solid var(--fog) !important;
  box-shadow: var(--float) !important;
}
body.page_main #header nav .gnb > li .box ul > li > a { text-shadow: none; }
#header nav { position: relative; z-index: 2; } /* 링크를 패널 위층으로 */
#header nav .gnb > li .box { z-index: 5; background: transparent; }
#header nav .gnb > li:hover .box {
  display: block !important;
  height: 347px !important;
  overflow: visible !important;
  padding: 0 !important; margin: 0 !important;
}
#header:has(nav .gnb > li:hover) .gnb_bg {
  display: block !important;
  height: 347px !important;
  overflow: visible !important;
}
/* 프로스트 패널 위 가독성: 잉크 텍스트 + 미세 글로우 */
#header nav .gnb > li .box ul > li > a {
  color: var(--ink) !important; font-size: 16px; font-weight: 600;
  /* 배경이 완전 투명이므로 글자 글로우로만 가독성 확보 */
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.95), 0 0 12px rgba(255, 255, 255, 0.9),
    0 0 24px rgba(255, 255, 255, 0.8);
}
#header nav .gnb > li .box ul > li > a:hover,
#header nav .gnb > li .box ul > li > a.on { color: var(--primary) !important; font-weight: 600; }

/* 메가메뉴(전체메뉴): 잉크 슬랩 유지 + 글씨 흐릿함 수정 (사용자 피드백: "더 흰색으로") */
.area_allmenu { background: var(--ink); }
.area_allmenu .allmenu_bg p i[data-lang="en"] { color: var(--primary-bright); }
.area_allmenu .allmenu_gnb .gnb > li > a,
.area_allmenu .allmenu_gnb .gnb > li > a span { color: #ffffff !important; font-weight: 700; }
.area_allmenu .allmenu_gnb .gnb > li > a i { color: rgba(255, 255, 255, 0.55) !important; }
/* 데스크톱 전체메뉴에선 2depth 상시 노출, 모바일 드로어에선 아코디언(닫힘 시작) */
@media (min-width: 1025px) {
  .area_allmenu .allmenu_gnb .box { display: block; }
}
.area_allmenu .allmenu_gnb .box ul > li > a {
  color: rgba(255, 255, 255, 0.95) !important; font-weight: 500;
  text-shadow: none;
}
/* 모바일 드로어: 2depth 박스도 잉크 배경 + 흰 글씨 (사용자 확정: 흰 박스 제거) */
@media (max-width: 1024px) {
  .area_allmenu .allmenu_gnb .gnb .box {
    background: rgba(255, 255, 255, 0.06) !important; /* 잉크 위 살짝 밝은 패널로 영역만 구분 */
  }
  .area_allmenu .allmenu_gnb .box ul > li > a { color: rgba(255, 255, 255, 0.92) !important; }
  .area_allmenu .allmenu_gnb .box ul > li > a:hover,
  .area_allmenu .allmenu_gnb .box ul > li > a:focus { color: var(--primary-bright) !important; }
  /* 원본 모바일 상단 스크롤 페이드가 흰색 → 잉크 드로어 위에서 흰 띠로 보이는 문제 교정 */
  .allmenu_gnb:before {
    background-image: linear-gradient(-90deg, var(--ink) 50%, rgba(26, 26, 26, 0)) !important;
  }
}
.allmenu_gnb a:hover, .allmenu_gnb a:focus { color: var(--primary-bright) !important; }

/* ---------- 3. 메인 히어로: 셰브론 데코 (브랜드 슬래시, 히어로 전용) ---------- */
.area_visual { position: relative; }
.area_visual:before, .area_visual:after {
  content: ""; position: absolute; z-index: 6; top: 18%;
  width: 88px; height: 46%;
  background: var(--primary);
  transform: skewX(-24deg);
  pointer-events: none;
  opacity: .92;
}
.area_visual:before { left: -44px; }
.area_visual:after { left: 64px; top: 58%; height: 26%; opacity: .45; }
@media (max-width: 1024px) {
  .area_visual:before, .area_visual:after { transform: skewX(-24deg) scale(.6); }
}
@media (max-width: 768px) {
  .area_visual:before, .area_visual:after { display: none; }
}
.area_scroll { color: rgba(255,255,255,.7); }
.area_visual .swiper_page .swiper-pagination-bullet { border-radius: var(--r-pill) !important; background: rgba(255,255,255,.6); }
.area_visual .swiper_page .swiper-pagination-bullet-active { background: var(--primary-bright); }

/* ---------- 4. 버튼 어휘 ---------- */
/* 4a. btn_arrow → button-primary */
a.btn_arrow {
  min-width: 215px; height: 44px;
  background: var(--primary); border: none !important; border-radius: var(--r-md);
  color: #fff !important; font-weight: 600; font-size: 14px;
  letter-spacing: .7px; text-transform: uppercase;
  transition: background-color .2s ease;
}
a.btn_arrow span { padding-left: 24px; padding-right: 8px; color: #fff; }
a.btn_arrow:after { right: 20px; filter: brightness(0) invert(1); }
a.btn_arrow:hover, a.btn_arrow:focus, a.btn_arrow:active { background: var(--primary-deep); }
a.btn_arrow:before, a.btn_arrow span:before, a.btn_arrow span:after { display: none !important; }
a.btn_arrow.black { background: var(--ink); color: #fff !important; }
a.btn_arrow.black:hover, a.btn_arrow.black:focus { background: var(--ink-deep); }
a.btn_arrow.black:after { filter: brightness(0) invert(1); }

/* 4b. btn_go → 블루 텍스트 링크 + 원형 화살표는 블루 */
a.btn_go { font-weight: 600; }
a.btn_go:after {
  border: 1px solid var(--primary) !important;
  background-color: var(--primary) !important;
  border-radius: var(--r-pill) !important;
}

/* 4c. 범용 .button → button-primary */
.button, a.button {
  background: var(--primary) !important; color: #fff !important;
  border: none !important; border-radius: var(--r-md) !important;
  font-weight: 600; letter-spacing: .7px; text-transform: uppercase;
}
.button:hover, a.button:hover { background: var(--primary-deep) !important; }

/* 4d. PDF 보기 → button-outline (블루 1px) */
.btn_pdfView {
  height: 34px; min-width: 112px;
  border: 1px solid var(--primary) !important; border-radius: var(--r-md) !important;
  color: var(--primary) !important; font-weight: 600;
  background: var(--canvas) !important;
}
.btn_pdfView:hover, .btn_pdfView:focus { background: var(--primary-soft) !important; }
.btn_pdfView span { color: var(--primary); }

/* ---------- 5. 메인 섹션 ---------- */
.sub_title { color: var(--primary) !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* 제품 3사 카드: card-product (r16 + Soft Lift) */
[data-mainproduct] {
  position: relative;
  background: var(--canvas);
  border: none;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--lift);
}
[data-mainproduct] em { font-weight: 500; }
[data-mainproduct] ul li a:hover { color: var(--primary) !important; }

/* 컴퍼니 4블록: 사진 프레임 r16 */
[data-main-company] .img, [data-main-company] .img i, [data-main-company] .img img { border-radius: var(--r-xl); overflow: hidden; }

/* 뉴스 리스트: faq-row 스타일 (r8 + 헤어라인 디바이더) */
article[data-main="news"] .list li { border-bottom: 1px solid var(--fog); border-radius: 0; }
article[data-main="news"] .list li a:hover span { color: var(--primary); }
article[data-main="news"] .list li em { color: var(--graphite); }

.obj_roof { color: rgba(26,26,26,0.05); font-weight: 500; }

/* ---------- 6. 서브 비주얼 (화이트 캔버스 + 잉크 타이틀, 배너 사진 r16) ---------- */
.area_subVisual { background: var(--canvas); }
.area_subVisual .visual_title h2 { color: var(--ink); font-weight: 500 !important; line-height: 1.0; }
.area_subVisual .visual_title em,
.area_subVisual .visual_title em span { color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.area_location li, .area_location li span { color: var(--graphite) !important; }
.area_subVisual .area_img, .area_subVisual .area_img span, .area_subVisual .area_img i, .area_subVisual .area_img img { border-radius: var(--r-xl); }
.area_subVisual .area_img { overflow: hidden; }
/* 배너 리빌 '흰 커튼' 가상요소(.area_img::before — z10, 1920px 고정 좌표)가
   와이드 화면에서 끝까지 걷히지 않아 좌측을 흰색으로 덮는 버그 → 커튼 계열 전부 제거 */
.area_subVisual .area_img:before,
.area_subVisual .area_img:after,
.area_subVisual .area_img > span:before,
.area_subVisual .area_img > span:after { display: none !important; content: none !important; }
/* 와이드(>1920)에서 배너 내부 img(원본 1920px)가 우측 정렬되어 좌측이 비는 문제 →
   내부 래퍼/이미지를 컨테이너에 꽉 채움 (사용자 피드백: 끝까지 이어지게) */
.area_subVisual .area_img > span,
.area_subVisual .area_img > span > i {
  display: block !important; width: 100% !important; height: 100% !important;
  margin: 0 !important;
}
.area_subVisual .area_img img {
  display: block; width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: 50% 45%;
}

/* LNB: cloud 밴드 + pill 탭 무드 */
.area_lnb, .area_lnb .inr { background: var(--cloud) !important; border-color: var(--fog) !important; }
.area_lnb { border-bottom: 1px solid var(--fog); }
.area_lnb .lnb li a { color: var(--charcoal) !important; font-weight: 500; }
.area_lnb .lnb li a.on, .area_lnb .lnb li a:hover { color: var(--primary) !important; font-weight: 600; }
.area_lnb .lnb li a:after { background: var(--primary) !important; height: 2px; }

/* ---------- 7. 제품 페이지 ---------- */
/* 2차 카테고리: category-tab — 네모(4px) 탭, 액티브 = 잉크 반전 (사용자 피드백: pill → 네모) */
.categroy_product_rework .list li a {
  border: 1px solid var(--fog) !important; border-radius: var(--r-md) !important;
  background: var(--canvas) !important; color: var(--ink) !important; font-weight: 500;
  padding-left: 22px !important; padding-right: 22px !important;
}
.categroy_product_rework .list li.on a,
.categroy_product_rework .list li a.on {
  background: var(--ink) !important; color: var(--on-ink) !important; border-color: var(--ink) !important;
  font-weight: 600;
}
/* 3차 카테고리: nav-link (블루 2px 언더라인) */
.categroy_depth02 ul li a { color: var(--graphite); font-weight: 500; }
.categroy_depth02 ul li a.on, .categroy_depth02 ul li a:hover {
  color: var(--primary) !important; border-color: var(--primary) !important;
}

/* 카테고리 설명: card-product-feature (cloud bg, r16, 사진 r16) */
.categroy_info {
  position: relative;
  background: var(--cloud);
  border: none;
  border-radius: var(--r-xl);
}
.categroy_info .categroy_box .txt h4 { color: var(--ink); font-weight: 500 !important; }
.categroy_info .categroy_box .txt h4:before { background: var(--primary) !important; transform: skewX(-24deg) !important; }
.categroy_info .categroy_box .txt h5 { border-bottom: 1px solid var(--fog); font-weight: 500; }
.categroy_info .categroy_box .txt p { color: var(--charcoal); }
.categroy_info .categroy_box .img, .categroy_info .categroy_box .img img { border-radius: var(--r-xl); }

/* 제품 아코디언: faq-row (r8 + 헤어라인) */
.list_product dl { border-top: none; }
.list_product dt[data-control="accordion"] {
  border: 1px solid var(--fog); border-radius: var(--r-lg);
  margin-bottom: 8px; background: var(--canvas);
  transition: box-shadow .2s ease;
}
.list_product dt[data-control="accordion"]:hover { box-shadow: var(--lift); }
.list_product dt[data-control="accordion"] a em { color: var(--primary); font-weight: 700; }
.list_product dt[data-control="accordion"] a span { font-weight: 500; color: var(--ink); }
.list_product dt[data-control="accordion"].on { border-color: var(--primary); }
.list_product dt[data-control="accordion"].on a span { color: var(--primary); font-weight: 600; }
.list_product dd[data-control="accordion_conts"] {
  background: var(--cloud); border: none; border-radius: var(--r-lg);
  margin-bottom: 8px;
}

/* 물성표: 헤어라인 테이블 */
[data-productview="detail"] table.table th,
[data-productView="detail"] table.table th { background: var(--canvas); border: 1px solid var(--fog) !important; color: var(--ink); font-weight: 500; }
[data-productview="detail"] table.table td,
[data-productView="detail"] table.table td { border: 1px solid var(--fog) !important; background: var(--canvas); color: var(--charcoal); }

/* ---------- 8. 게시판(공지) ---------- */
[data-bbscustom="table"] tbody tr, table[data-bbsCustom="table"] tbody tr { border-bottom: 1px solid var(--fog); }
[data-bbscustom="subject_txt"] em, [data-bbsCustom="subject_txt"] em { font-weight: 500; color: var(--ink); }
[data-bbscustom="content"], [data-bbsCustom="content"] { color: var(--charcoal); }
[data-bbscustom="date"], [data-bbsCustom="date"] { color: var(--graphite); }
.bo_tit a:hover em { color: var(--primary) !important; }
#bo_list_total span i { color: var(--primary); font-weight: 700; font-style: normal; }
.bo_sch .sch_bar { border: 1px solid var(--steel); border-radius: var(--r-md); background: var(--canvas); }
.bo_sch .sch_input:focus { outline: 1px solid var(--ink); outline-offset: -1px; }

#bo_v { border-top: 2px solid var(--ink); }
#bo_v_title .bo_v_tit { font-weight: 500; color: var(--ink); }
#bo_v_atc { border-bottom: 1px solid var(--fog); }
#bo_v_file { background: var(--cloud); border: none; border-radius: var(--r-lg); }
#bo_v_file a { color: var(--primary); }
.bo_v_nb li { border-bottom: 1px solid var(--fog); }
.bo_v_nb .nb_tit { color: var(--graphite); font-weight: 600; }

/* ---------- 9. 문의 폼 ---------- */
[data-form="write"] li em { font-weight: 500; color: var(--ink); }
[data-form="write"] li em i.marking { color: var(--primary); }
[data-form="write"] input[type="text"], [data-form="write"] textarea, [data-form="write"] select {
  border: 1px solid var(--steel) !important; border-radius: var(--r-md) !important; background: var(--canvas);
  font-family: var(--font-sans);
}
[data-form="write"] input[type="text"]:focus, [data-form="write"] textarea:focus, [data-form="write"] select:focus {
  outline: none; border: 1px solid var(--ink) !important;
}
.box_agree label i { color: var(--primary); font-style: normal; font-weight: 700; }
.box_agree a span { color: var(--primary); text-decoration: underline; }
#captcha .captcha_box { border: 1px solid var(--steel); border-radius: var(--r-md); height: 44px; }
#captcha button { border: 1px solid var(--steel); border-radius: var(--r-md); background: var(--cloud); height: 44px; padding: 0 12px; font-weight: 600; }
article[data-subarea="inquiry01"] .inr.white { border-radius: var(--r-xl); box-shadow: var(--lift); }

/* ---------- 10. 퀵 메뉴 (3사 제품 바로가기) ----------
   주의: 목록(.list)은 버튼 위(bottom:85px)로 펼쳐지므로 .area_quick에
   overflow:hidden을 주면 잘려서 아무것도 안 보인다 (버그 수정) */
.area_quick { border-radius: 0; overflow: visible; box-shadow: none; }
.area_quick button {
  background: var(--primary) !important; color: #fff;
  border-radius: var(--r-lg) !important; box-shadow: var(--lift);
}
.area_quick button span { opacity: 1 !important; color: #fff; font-weight: 700; letter-spacing: .5px; }
.area_quick button i:before, .area_quick button i:after { background: #fff !important; }
.area_quick .list { background: transparent; }
.area_quick .list > li > a {
  background: var(--ink) !important; border-radius: var(--r-lg) !important;
  box-shadow: var(--lift); color: #fff;
}
.area_quick .list > li > a span { opacity: 1 !important; color: #fff; font-weight: 500; }
.area_quick .list > li > a:hover, .area_quick .list > li > a:focus { background: var(--primary) !important; }

/* recruit01: '회사생활지원' 회색 밴드를 타이틀에서 더 아래에서 시작 (사용자 피드백) */
article[data-subarea="recruit01"] + article[data-subarea="recruit02"].gray { margin-top: 72px; }
/* LIFE SUPPORT SAMJI 롤링 텍스트가 회색 경계에서 잘리지 않도록 전체 높이를 흰 영역으로 */
article[data-subarea="recruit01"] + article[data-subarea="recruit02"].gray .obj_roof { top: -330px !important; }

/* about01 인사말: 우측 회색 장식 밴드 → 친환경(숲) 이미지로 채움 (사용자 피드백).
   와이드 화면에서도 보이도록 article 기준으로 앵커 (나무 사진 우측 ~ 화면 끝) */
article[data-subarea="about01"] { position: relative; }
[data-subarea="about01"] .obj_bg {
  z-index: 0 !important; /* 음수 z는 .box 배경 뒤로 묻힘 → 0으로 올리고 콘텐츠를 위층에 */
  background: url(../images/main/img_inquiry01.jpg) 35% 45% / cover no-repeat;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  overflow: hidden;
}
[data-subarea="about01"] .inr { position: relative; z-index: 2; }
@media (min-width: 1441px) {
  [data-subarea="about01"] .obj_bg {
    width: calc(50vw - 420px); /* 중앙 박스 우측 절반 ~ 화면 끝 */
    min-width: 360px;
  }
}
[data-subarea="about01"] .obj_bg:after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.08);
}

/* ---------- 14. 복리후생 세부 모달 (recruit01) ---------- */
.benefit_clickable { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.benefit_clickable:hover { transform: translateY(-3px); }
.benefit_clickable:hover .box { box-shadow: var(--lift); border-color: var(--primary) !important; }
.benefit_overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 26, 26, 0.45);
  padding: 20px;
}
.benefit_modal {
  position: relative;
  width: 560px; max-width: 94vw; max-height: 86vh; overflow-y: auto;
  background: var(--canvas); border-radius: var(--r-xl);
  box-shadow: var(--float);
  padding: 40px 44px 32px;
}
.benefit_eyebrow {
  display: block; color: var(--primary); font-weight: 700; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; font-style: normal;
}
.benefit_title { font-size: 28px; font-weight: 500 !important; line-height: 1.1; color: var(--ink); margin: 0 0 14px; }
.benefit_desc { font-size: 16px; line-height: 1.5; color: var(--charcoal); margin: 0 0 20px; }
.benefit_points { margin: 0 0 22px; padding: 0; list-style: none; }
.benefit_points li {
  position: relative; padding: 10px 0 10px 22px;
  border-bottom: 1px solid var(--fog);
  font-size: 15px; line-height: 1.5; color: var(--ink);
}
.benefit_points li:before {
  content: ""; position: absolute; left: 2px; top: 17px;
  width: 8px; height: 8px; background: var(--primary);
  transform: skewX(-18deg);
}
.benefit_note { font-size: 12px; color: var(--graphite); margin: 0 0 22px; }
.benefit_close {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 28px;
  background: var(--primary); color: #fff;
  border: none; border-radius: var(--r-md);
  font-weight: 600; font-size: 14px; letter-spacing: .7px; text-transform: uppercase;
  cursor: pointer;
}
.benefit_close:hover { background: var(--primary-deep); }
.benefit_x {
  position: absolute; top: 14px; right: 16px;
  width: 40px; height: 40px;
  background: transparent; border: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--graphite);
}
.benefit_x:hover { color: var(--ink); }
@media (max-width: 600px) {
  .benefit_modal { padding: 28px 22px 24px; }
  .benefit_title { font-size: 22px; }
}

/* ---------- 11. 푸터: footer-dark (잉크 슬랩) ---------- */
#footer { background: var(--ink); color: rgba(255,255,255,.7); }
#footer .area_link { border-bottom: 1px solid var(--charcoal); }
#footer .area_link ul > li, #footer .area_link ul > li > a { color: var(--on-ink); font-weight: 500; }
#footer .area_link ul > li > a:hover { color: var(--primary-bright); }
#footer .area_address ul > li { color: rgba(255,255,255,.7); }
#footer .area_address ul > li em { color: var(--on-ink); font-weight: 500; }
#footer .area_address ul > li a { color: rgba(255,255,255,.7); }
#footer .area_copyright p { color: var(--steel); font-size: 12px; }
#footer .btn_top { background: var(--primary) !important; border-radius: var(--r-md) !important; }
#footer .btn_top span { color: #fff; font-weight: 600; }

/* ---------- 12. 팝업 ---------- */
.area_popLayer .popBox { border-radius: var(--r-xl); border: none; box-shadow: var(--float); overflow: hidden; }
.area_popLayer .popTitle { background: var(--ink); color: var(--on-ink); font-weight: 500; }

/* ---------- 12b. 인트로 스플래시 (로고 드로잉) ---------- */
.samji_intro {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--canvas);
  cursor: pointer; overflow: hidden;
}
.samji_intro.leave {
  transform: translateY(-100%);
  transition: transform .75s cubic-bezier(.7, 0, .25, 1);
}
.samji_intro_box { width: min(46vw, 480px); min-width: 280px; text-align: center; }
.samji_intro_box svg { width: 100%; height: auto; overflow: visible; }
.samji_path {
  fill: var(--primary); fill-opacity: 0;
  stroke: var(--primary); stroke-width: 1.4;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: samjiDraw 1.1s ease forwards, samjiFill .55s ease forwards;
}
@keyframes samjiDraw { to { stroke-dashoffset: 0; } }
@keyframes samjiFill { to { fill-opacity: 1; } }
.samji_intro_tag {
  margin-top: 30px;
  font-size: 17px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0; transform: translateY(12px);
  animation: samjiTag .6s ease forwards 1.95s;
}
@keyframes samjiTag { to { opacity: 1; transform: none; } }
.samji_intro_chev {
  position: absolute; top: -10%; height: 120%; width: 150px;
  background: var(--primary);
  transform: skewX(-24deg) translateX(-70vw);
  opacity: .95;
}
.samji_intro_chev.a { left: 16%; animation: samjiChev 1s cubic-bezier(.6, 0, .2, 1) .02s forwards; }
.samji_intro_chev.b { left: 28%; opacity: .35; animation: samjiChev 1.15s cubic-bezier(.6, 0, .2, 1) .1s forwards; }
@keyframes samjiChev { to { transform: skewX(-24deg) translateX(95vw); } }
@media (max-width: 768px) {
  .samji_intro_tag { font-size: 14px; }
  .samji_intro_chev { width: 70px; }
}

/* ---------- 13. 반응형 / 와이드 정렬 ---------- */
/* 와이드 모니터(>1440px): 메인 섹션이 1920 고정 기준으로 좌측 쏠림 →
   콘텐츠 박스를 1440px 중앙 정렬로 정규화 (절대배치 자식들의 기준 박스 포함) */
article[data-main="product"] > .inr,
article[data-main="product"].new_product > .inr,
article[data-main="company"] > .inr,
article[data-main="inquiry"] > .inr {
  position: relative;
  max-width: 1440px !important; /* main.css의 max-width:inherit(특이도 높음) 무력화 */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 메인 섹션 배경 데코(obj_bg/bg_obj)가 z:-1이라 래퍼 흰 배경 뒤로 묻히는 문제 →
   0층으로 올리고 콘텐츠(.inr)를 그 위로 (제품문의 숲사진·공지 패턴 등 복원) */
article[data-main] .obj_bg,
article[data-main] .bg_obj { z-index: 0 !important; }
/* position이 없으면 z-index가 무시됨 — 모바일에서 공지 타이틀이 데코 밑에 깔리던 원인 */
article[data-main] > .inr { position: relative; z-index: 2; }

/* 제품문의 밴드: 사진 위 흰 텍스트 + outline-on-dark 버튼 (원본 무드) */
article[data-main="inquiry"] a.btn_arrow {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  color: #fff !important;
}
article[data-main="inquiry"] a.btn_arrow:hover,
article[data-main="inquiry"] a.btn_arrow:focus {
  background: rgba(255, 255, 255, 0.18) !important;
}

@media (max-width: 768px) {
  #header .inr { padding: 14px 20px 0; }
}

/* ---------- 브랜드 필름 (2023 홍보영상): 포스터 밴드 + 모달 플레이어 ---------- */
.brand_film { position: relative; }
.brand_film_stage {
  display: block; position: relative; width: 100%; height: clamp(320px, 42vw, 560px);
  padding: 0; border: 0; cursor: pointer; overflow: hidden; background: var(--ink);
}
.brand_film_poster {
  position: absolute; inset: 0; display: block;
  background-size: cover; background-position: center;
  transition: transform 0.8s ease, opacity 0.4s ease; opacity: 0.82;
}
.brand_film_stage:hover .brand_film_poster { transform: scale(1.03); opacity: 0.65; }
.brand_film_stage:after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,0.25), rgba(26,26,26,0.55));
}
.brand_film_txt {
  position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%);
  z-index: 2; text-align: center; color: #fff; width: min(90%, 720px);
}
.brand_film_txt em {
  display: block; font-family: "Manrope", sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--primary-bright); margin-bottom: 10px; font-style: normal;
}
.brand_film_txt strong { display: block; font-size: clamp(22px, 3vw, 34px); font-weight: 600; line-height: 1.2; }
.brand_film_txt p { margin-top: 10px; font-size: 15px; color: rgba(255,255,255,0.8); }
.brand_film_play {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  z-index: 2; display: flex; align-items: center; justify-content: center;
  width: 86px; height: 86px; border-radius: 50%; color: #fff;
  border: 2px solid rgba(255,255,255,0.85); background: rgba(26,26,26,0.25);
  backdrop-filter: blur(4px); transition: 0.3s ease;
}
.brand_film_play svg { margin-left: 4px; }
.brand_film_stage:hover .brand_film_play { background: var(--primary); border-color: var(--primary); transform: translate(-50%, -50%) scale(1.08); }
.brand_film_overlay {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 10, 0.88); padding: 24px; animation: bfFade 0.25s ease;
}
@keyframes bfFade { from { opacity: 0; } to { opacity: 1; } }
.brand_film_modal { position: relative; width: min(1080px, 96vw); }
.brand_film_modal video { display: block; width: 100%; max-height: 82vh; background: #000; border-radius: 8px; }
.brand_film_close {
  position: absolute; right: 0; top: -46px; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; transition: 0.25s ease;
}
.brand_film_close:hover { background: var(--primary); }
@media (max-width: 768px) {
  .brand_film_stage { height: 300px; }
  .brand_film_txt { bottom: 28px; }
  .brand_film_txt p { font-size: 13px; }
  .brand_film_play { width: 64px; height: 64px; top: 36%; }
}

/* 브랜드 필름 다음의 뉴스 섹션: 삼각형 데코(obj_bg, 원본 top:-200px)가 다크 밴드 위로
   침범해 흰 박스로 보이는 문제 — 데코는 원위치 유지, 밴드를 위층(z1)으로 올려
   밴드와 겹치는 부분만 가린다 (top:0으로 내리면 모바일에서 공지 목록을 덮음) */
.brand_film { z-index: 1; }

/* 인트로 부트 커버: SSR 첫 페인트부터 흰 화면 (히어로 영상 플래시 차단).
   JS 불능/지연 시 6초 후 자동 해제 안전장치 */
.samji_intro_boot {
  position: fixed; inset: 0; z-index: 1000; background: var(--canvas);
  animation: samjiBootHide 0.4s ease 6s forwards;
}
@keyframes samjiBootHide { to { opacity: 0; visibility: hidden; } }

/* ---------- 다국어 문자권 폰트 체인 (PageShell이 lang별 Noto 웹폰트 로드) ---------- */
html[lang="zh"], html[lang="zh"] body {
  font-family: Manrope, "Noto Sans SC", "Pretendard Variable", Pretendard, sans-serif !important;
}
html[lang="ar"], html[lang="ar"] body {
  font-family: "Noto Sans Arabic", Manrope, "Pretendard Variable", Pretendard, sans-serif !important;
}
/* 아랍어: 레이아웃은 LTR 유지(원본 jQuery 모션 보존), 본문 텍스트만 RTL 정렬 */
html[lang="ar"] #content p,
html[lang="ar"] #content h3,
html[lang="ar"] #content h4,
html[lang="ar"] #content h5,
html[lang="ar"] #content li,
html[lang="ar"] #content dd,
html[lang="ar"] #content dt {
  direction: rtl;
  unicode-bidi: plaintext;
}

/* 공지 본문 이미지: 인라인 고정폭(width:785px 등) 무시하고 반응형 — 모바일 가로 넘침 방지 */
#bo_v_con img { max-width: 100% !important; height: auto !important; }