@charset "UTF-8";
/*
* for supported in all modern browsers
* Copyright 마케터비
* 마케터비
*/
/* ====================================================================================================================
   디자인 토큰 — 단일 출처 (Single Source of Truth)
   --------------------------------------------------------------------------------------------------------------------
   [로드 순서]  css/common/base.css → css/layout.css(이 파일) → preferences.html 인라인 :root
     - base.css : 폼/버튼/유틸리티가 쓰는 공통 토큰 30개 (색상·폼·버튼·다크팔레트·레거시 치수)
     - layout.css(이 파일) : 브랜드 색상, 배경, 그림자, 트랜지션 + 타이포/여백/라운딩 "스케일" 전부
     - preferences.html 인라인 : 관리자 설정값이 있으면 --theme-color, --bg-footer-color 가 최종 승리

   [원칙]  같은 이름의 토큰을 base.css 와 이 파일에 동시에 두지 말 것.
           브랜드/레이아웃에 관계된 토큰은 반드시 이 파일에서만 선언한다.
           (2026-08-19: base.css 에 중복 선언돼 있던 죽은 6개를 제거하고 이쪽으로 일원화)
   ==================================================================================================================== */
:root {
  /* ---- 브랜드 / 배경 (base.css 의 동명 토큰을 대체. 이 파일이 유일한 출처) ---- */
  --theme-color: #d51515;          /* 관리자 설정 시 preferences.html 인라인이 최종 승리 */
  --bg-color: #f1f5f9;
  --content-bg-color: #fff;
  --bg-footer-color: #f2f5f9;      /* 관리자 설정 시 preferences.html 인라인이 최종 승리 */
  --box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, .08);

  /* ---- 어두운 면 위에 얹는 색 (다크모드가 아니라 "디자인"이다) ----
     쓰이는 곳: 투명 헤더(히어로 위), 퀵버튼, 데스크탑 퀵상담 바.
     2026-08-21 다크모드를 걷어내면서 --dark-* 라는 오해를 부르는 이름에서 바꿨다. 값은 그대로다.
       --dark-text-strong-color → --on-dark-strong-color
       --dark-text-base-color   → --on-dark-base-color   (예전 base.css 소유)
       --dark-btn-border-color  → --on-dark-border-color
       --dark-bg-color          → --bar-bg-color         (퀵상담 바 배경 전용) */
  --on-dark-strong-color: #EFF2F7;
  --on-dark-base-color: #ADB7BE;
  --on-dark-border-color: #AAB0B8;
  --bar-bg-color: #1C1D21;

  /* ==================================================================================================================
     타이포그래피 스케일  (신설 2026-08-19)
     ------------------------------------------------------------------------------------------------------------------
     ★ 2026-08-21 : 루트 폰트 크기를 전 화면 16px 로 통일했다.
       예전에는 모바일 16px / 데스크탑(1024px~) 14px 이라 같은 rem 이 데스크탑에서 12.5% 작아졌고,
       그것을 상쇄하려고 아래쪽에 @media :root 보정 블록(--fs-* 를 16/14 배로 키우는)을 두고 있었다.
       루트가 하나로 통일되면서 그 보정 블록은 필요가 없어져 삭제했다.
       → 이제 아래 rem 값이 곧 px 이다 (1rem = 16px, 전 화면 공통). 실제 렌더 px 은 예전 데스크탑과 같다.
         (예: --fs-sm 은 예전에도 모바일 0.875rem×16=14px, 데스크탑 1rem×14=14px 이었다)

     ★ 이번 작업에서는 "토큰 정의"만 한다. 기존 CSS 를 일괄 치환하지 않았다.
       (다른 작업자와의 충돌 및 회귀 위험 때문. 아래 매핑표를 보고 점진적으로 옮길 것)

     ┌ 토큰 ─────────┬ 모바일 ──┬ px ─┬ 이 값을 쓰고 있는 기존 코드(치환 후보) ────────────────────────┐
     │ --fs-xs       │ 0.75rem  │ 12  │ font-size:12px (10곳), 0.75rem, .fs-12                        │
     │ --fs-sm       │ 0.875rem │ 14  │ font-size:14px (10곳), 0.875rem (7곳) — .layout__footer 등    │
     │ --fs-base     │ 1rem     │ 16  │ font-size:1rem (20곳) — .lnb__list a, .lnb-child a 등         │
     │ --fs-md       │ 1.125rem │ 18  │ font-size:18px (11곳), 1.125rem (4곳)                         │
     │ --fs-lg       │ 1.25rem  │ 20  │ font-size:20px (8곳), 1.25rem (4곳)                           │
     │ --fs-xl       │ 1.5rem   │ 24  │ font-size:24px (7곳), 1.5rem (4곳)                            │
     │ --fs-2xl      │ 1.75rem  │ 28  │ font-size:28px (7곳), .page-top__title(모바일) 1.75rem        │
     │ --fs-3xl      │ 2rem     │ 32  │ font-size:32px (7곳), 2rem (8곳), .page-top__title @1024      │
     │ --fs-4xl      │ 3rem     │ 48  │ font-size:48px (7곳), 3rem (3곳), .page-top__title @1200      │
     └───────────────┴──────────┴─────┴──────────────────────────────────────────────────────────────┘
       ※ 애매한 중간값(1.05/1.2/1.4rem, 0.78~0.95rem 등)은 위 9단계 중 가장 가까운 쪽으로 흡수할 것.
         예) .lnb__list a @1024 의 1.2rem → --fs-base(데스크탑 환산 16px) 또는 --fs-md 로 판단.

     line-height 는 별도 3단계만 둔다(제목/본문/조밀).
     ================================================================================================================== */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2rem;
  --fs-4xl: 3rem;

  --lh-tight: 1.3;   /* 제목용. base.css 의 h1~h6 line-height:1.3 과 동일 */
  --lh-base: 1.6;    /* 본문 */
  --lh-loose: 1.8;   /* 긴 안내문 */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;    /* base.css h1~h6, .is-active 등에서 쓰는 값 */

  /* ==================================================================================================================
     여백 스케일  (신설 2026-08-19)
     ------------------------------------------------------------------------------------------------------------------
     기존 --gap / --gap2x / --gap3x / --gap4x (base.css) 는 그대로 유지한다.
     이미 20곳 넘게 쓰이고 있어 제거하면 회귀가 크다. 아래 --space-* 는 그 사이를 메우는 확장이며
     겹치는 눈금은 기존 토큰을 그대로 참조(var)해 두 계열이 절대 어긋나지 않게 했다.

     ┌ 토큰 ─────────┬ 값 ────────────┬ px(모바일) ┬ 대응 관계 / 치환 후보 ──────────────────────┐
     │ --space-0     │ 0              │  0         │ padding:0, margin:0                        │
     │ --space-1     │ 0.25rem        │  4         │ 4px (.tel > strong margin-left:4px 등)      │
     │ --space-2     │ 0.5rem         │  8         │ 8px (.xet-pagination padding:0 8px)         │
     │ --space-3     │ 0.75rem        │ 12         │ 10~12px (ul-list padding-left:12px)         │
     │ --space-4     │ var(--gap)     │ 16         │ ★ --gap 과 동일. 16px / 1rem                │
     │ --space-5     │ 1.25rem        │ 20         │ 20px (layout__body-content margin @768)     │
     │ --space-6     │ 1.5rem         │ 24         │ 24px, 26px (padding:26px 매직넘버 흡수)      │
     │ --space-8     │ var(--gap2x)   │ 32         │ ★ --gap2x 와 동일. 30px 도 여기로 흡수       │
     │ --space-10    │ 2.5rem         │ 40         │ 40px                                        │
     │ --space-12    │ var(--gap3x)   │ 48         │ ★ --gap3x 와 동일                           │
     │ --space-16    │ var(--gap4x)   │ 64         │ ★ --gap4x 와 동일. 60px 도 여기로 흡수       │
     │ --space-20    │ 5rem           │ 80         │ 5rem (.member-act padding:5rem 0)           │
     └───────────────┴────────────────┴────────────┴─────────────────────────────────────────────┘
     ================================================================================================================== */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: var(--gap);
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: var(--gap2x);
  --space-10: 2.5rem;
  --space-12: var(--gap3x);
  --space-16: var(--gap4x);
  --space-20: 5rem;

  /* 섹션 세로 여백 (본문 블록 간). 데스크탑에서는 아래 미디어쿼리에서 키운다. */
  --section-gap: var(--gap2x);

  /* ==================================================================================================================
     라운딩 스케일  (신설 2026-08-19)
     ------------------------------------------------------------------------------------------------------------------
     기존 --radius(1rem) / --radius2x(2rem) 은 유지. 아래는 실제 사용 빈도에 맞춘 확장이다.
     ┌ 토큰 ───────────┬ 값 ──────────┬ 치환 후보 ────────────────────────────────────────────────┐
     │ --radius-xs     │ 0.25rem(4px) │ 2~4px (.xet-pagination 4px, .r-2/.r-3/.r-4)              │
     │ --radius-sm     │ 0.5rem (8px) │ ★최다 사용(11곳) 0.5rem, 8px, 6px                        │
     │ --radius-md     │ 0.75rem(12px)│ 10px(5곳), 12px(3곳), 14px                               │
     │ --radius-lg     │ var(--radius)│ ★ --radius 와 동일. 1rem / 16px                          │
     │ --radius-xl     │ 1.5rem (24px)│ 20px, 24px                                               │
     │ --radius-2xl    │ var(--radius2x) │ ★ --radius2x 와 동일. 2rem / 30~40px                  │
     │ --radius-pill   │ 999px        │ 999px(7곳), 30px/40px/50px/60px/80px/100px 알약형        │
     │ --radius-circle │ 50%          │ .r-half, 아바타/점(dot)                                  │
     └─────────────────┴──────────────┴──────────────────────────────────────────────────────────┘
     ================================================================================================================== */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: var(--radius);
  --radius-xl: 1.5rem;
  --radius-2xl: var(--radius2x);
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ==================================================================================================================
     트랜지션  (--transition-all 은 21곳에서 사용 중이므로 값·이름 그대로 유지)
     ┌ 토큰 ───────────────┬ 값 ─────────────────────┬ 치환 후보 ─────────────────────────────────┐
     │ --transition-all    │ all 0.22s ease-in-out   │ (기존) 그대로 유지                          │
     │ --transition-fast   │ all 0.18s ease-in-out   │ all 0.15s~0.2s ease-out, 0.18s ease 계열   │
     │ --transition-base   │ var(--transition-all)   │ --transition-all 의 의미 있는 별칭          │
     │ --transition-slow   │ all 0.35s ease-in-out   │ all 0.3s ease-out(8곳), 0.5s 페이드         │
     └─────────────────────┴─────────────────────────┴────────────────────────────────────────────┘
     ================================================================================================================== */
  --transition-all: all 0.22s ease-in-out;
  --transition-fast: all 0.18s ease-in-out;
  --transition-base: var(--transition-all);
  --transition-slow: all 0.35s ease-in-out;
}

/* --------------------------------------------------------------------------------------------------------------------
   데스크탑(1024px~) 토큰 보정
   ★ 2026-08-21 : --fs-* 보정 블록을 삭제했다.
     루트 폰트가 16px 로 통일되어 "데스크탑에서 rem 이 작아지는" 현상 자체가 사라졌기 때문이다.
     삭제 전/후 실제 렌더 px 은 동일하다 (예: --fs-sm  전 1rem×14=14px  →  후 0.875rem×16=14px).
   여백은 화면이 넓어지면 키우는 것이 자연스러우므로 --section-gap 만 남긴다.
   -------------------------------------------------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --section-gap: var(--gap3x);
  }
}

/* ★ 루트 폰트 크기 — 전 화면 16px 고정 (2026-08-21 통일)
   예전에는 아래에 `@media (min-width:1024px) { … font-size:14px }` 가 붙어 있어
   데스크탑에서 rem 이 12.5% 작아지는 함정이 있었다. 그 규칙을 제거했다.
   ※ button/select/input/textarea 를 함께 못박는 것은 의도된 것이다.
     reset.css 가 이들에게 font-size:inherit 을 주기 때문에, 여기서 고정하지 않으면
     14px 짜리 카드 안에 들어간 입력칸이 따라 작아져 iOS 가 화면을 확대해 버린다. */
html,
body,
table,
th,
td,
button,
select,
input,
textarea {
  font-size: 16px;
}

@media (min-width: 1024px) {
  body.cursor {
    cursor: none;
  }
}
/* [2026-08-22] 스크롤바를 숨기던 규칙 제거 — 사용자 요청으로 브라우저 기본
   스크롤바 막대가 보이도록 되돌린다. */

.animated {
  opacity: 0;
  animation-delay: 0.1s;
}

body {
  color: var(--text-strong-color);
}

.xet-layout {
  overflow: hidden;
  background-color: var(--bg-color);
  transition: var(--transition-all);
}
.xet-layout a:not(.btn) {
  color: var(--text-strong-color);
}
.xet-layout .flex-container {
  display: flex;
}
.xet-layout .xet-btn.bg-theme, .xet-layout .xet-btn.btn-theme {
  background-color: var(--theme-color) !important;
  color: #fff !important;
}
.xet-layout .xet-btn.text-theme {
  color: var(--theme-color) !important;
}
@media (min-width: 1024px) {
  .xet-layout .xet-btn:not(.btn-text):hover {
    border-color: var(--theme-color) !important;
    background-color: var(--theme-color) !important;
    color: #fff !important;
  }
  .xet-layout .xet-btn:not(.btn-text):hover svg {
    fill: #fff !important;
  }
  .xet-layout .xet-btn.btn-text:hover {
    color: var(--theme-color) !important;
  }
  .xet-layout .xet-btn.btn-text:hover svg {
    fill: var(--theme-color) !important;
  }
}
.xet-layout .layout__container {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh);
}
.xet-layout .layout__body-page-top {
  /* [2026-08-22] height 가 100vh(보통 900~1000px)였을 때는 배경 이미지에 항상
     그 높이 전체를 기준으로 cover 확대가 걸렸다. 그런데 실제로 보이는 부분은
     .layout__body-content 가 덮기 전까지의 틈뿐이라 margin-top 값(아래 breakpoint의
     .layout__body-content margin-top 과 맞춤: 모바일 184px / 1024~ 252px / 1200~ 336px)
     보다 살짝만 크면 충분하다. 이렇게 줄이면 1920x500 안팎의 가벼운 이미지도
     확대(블러) 없이 선명하게 나온다 - 사용자 요청. */
  position: fixed;
  width: 100%;
  height: 240px;
  padding-top: 6rem;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  background-color: #606773;
  color: var(--on-dark-strong-color);
}
.xet-layout .layout__body-page-top .page-top__title {
  font-size: 1.75rem;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.xet-layout .layout__body-content {
  z-index: 1;
  margin-top: 11.5rem;
  padding: var(--gap) 0;
  flex: 1 0 auto;
  border-radius: 0rem 0rem 0 0;
  background-color: var(--content-bg-color);
  transition: var(--transition-all);
  box-shadow: var(--box-shadow);
}
.xet-layout .layout__body-content .lnb {
  position: relative;
}
.xet-layout .layout__body-content .lnb .lnb__list {
  text-align: center;
  margin-bottom: var(--gap2x);
  white-space: nowrap;
  overflow-x: auto;
}
.xet-layout .layout__body-content .lnb .lnb__list.is-active {
  white-space: normal;
  text-align: left;
}
.xet-layout .layout__body-content .lnb .lnb__list a {
  display: inline-flex;
  align-items: center;
  height: var(--button-height);
  font-size: 1rem;
  margin-right: 1rem;
  border-bottom: 1px solid transparent;
}
.xet-layout .layout__body-content .lnb .lnb__list a.is-active {
  font-weight: 700;
  color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
}
.xet-layout .layout__body-content .lnb .lnb__list .lnb__list-btn-open {
  z-index: 3;
  display: none;
  position: absolute;
  top: 0;
  right: -2px;
  width: var(--button-height);
  padding: 0;
  border-radius: 40px;
  background-color: var(--content-bg-color);
  border-color: var(--btn-border-color);
}
.xet-layout .layout__body-content .lnb .lnb__list .lnb__list-btn-open.is-active svg {
  transform: rotate(180deg);
}
/* ---------- 헤더 B(솔리드 임팩트) 전용 2차메뉴 - 더샵 분당센트로 실측 반영 ----------
   레퍼런스: 폭 100% 바(배경 흰색 90%, 하단 헤어라인 0.8px #ddd, 높이 약 70px),
   탭 간격 30px, 활성 탭은 글자색/굵기 변화 없이 밑줄(2px, 검정)만 표시.
   header--style-b 전용 클래스는 layout.html 에서 $li->header_style=='B' 일 때만 붙는다
   (header--style-a 는 기존 스타일 그대로 유지). 2026-08-22, 사용자 요청. */
.xet-layout .layout__body-content .lnb.lnb--style-b {
  /* [2026-08-22] 레퍼런스는 따뜻한 그라데이션 배경이었지만, 그건 그 사이트 히어로
     이미지의 연장선이라 우리 구조와 안 맞는다 - 사용자 지시대로 사이트 포인트
     컬러(테마컬러)를 배경으로 써서 같은 '색이 있는 바' 느낌만 가져온다.
     [2026-08-22 추가] .lnb 는 마크업상 .xet-container(max-width:1380px, 좌우
     20~30px 패딩) 안에 있어 layout__body-content 를 100% 폭으로 늘려도 이 바는
     여전히 컨테이너 폭만큼만 채워졌다 - 마크업을 안 건드리고 CSS만으로 뷰포트
     전체 폭까지 늘리는 표준 기법(음수 마진)을 적용한다. .xet-layout 에 이미
     overflow:hidden 이 있어 가로 스크롤은 생기지 않는다. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: var(--gap2x);
  background-color: var(--theme-color);
}
/* [2026-08-22 재작업] 서브페이지 상단 배경 이미지(.layout__body-page-top) 바로
   아래 이 바가 틈 없이 붙어야 한다는 요청. 처음엔 :first-child 로 "페이지 위치
   표시가 없을 때만" 끌어올렸는데, 형제 순서에 의존하는 방식이라 페이지위치
   유무에 따라 결과가 달라지는 게 불안정했다. :has() 로 - .lnb--style-b 가
   들어있는 .layout__body-content 자체의 위쪽 padding 을 아예 0 으로 만들어
   순서와 무관하게 항상 히어로 이미지에 밀착시킨다(브레이크포인트별로 다시
   안 적어도 되도록 padding-top 만 따로 뗐다 - 아래 참고). */
.xet-layout .layout__body-content:has(> .xet-container > .lnb.lnb--style-b) {
  padding-top: 0;
}
.xet-layout .layout__body-content .lnb.lnb--style-b .lnb__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0;
  height: 70px;
  margin-bottom: 0;
  overflow-x: visible;
  white-space: normal;
}
/* [2026-08-22] 선택 표시를 "글자 바로 아래 밑줄"이 아니라 "바 맨 아래 모서리"로
   옮긴다(헤더 1차메뉴 수정과 같은 방향 - 사용자 인터뷰 결과: 바 맨 아래 / 3~4px /
   탭 전체 폭 좌우 여백 포함). a 를 bar 높이(100%)까지 늘리고 좌우 padding 을 줘서
   border-bottom 이 곧 바의 바닥선이자 탭 전체 폭(여백 포함)이 되게 만든다.
   그만큼 lnb__list 의 gap 은 0 으로 줄이고 padding 이 간격을 대신한다. */
.xet-layout .layout__body-content .lnb.lnb--style-b .lnb__list a {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  margin-right: 0;
  border-bottom-width: 3px;
  border-color: transparent;
  color: var(--on-dark-base-color);
}
.xet-layout .layout__body-content .lnb.lnb--style-b .lnb__list a.is-active {
  font-weight: var(--fw-normal);
  color: var(--on-dark-strong-color) !important;
  border-color: var(--on-dark-strong-color) !important;
}
/* [2026-08-22] 모바일에서는 데스크탑(70px)보다 낮게 - 사용자 요청 */
@media (max-width: 1023px) {
  .xet-layout .layout__body-content .lnb.lnb--style-b .lnb__list {
    height: 50px;
  }
}
.xet-layout .layout__body-content .lnb-child {
  text-align: center;
  margin-bottom: var(--gap);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.xet-layout .layout__body-content .lnb-child a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5rem;
  height: 3.25rem;
  font-size: 1rem;
  margin-right: -1px;
  margin-bottom: -1px;
  border: 1px solid var(--border-color);
}
.xet-layout .layout__body-content .lnb-child a.is-active {
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
  color: var(--on-dark-strong-color) !important;
}
.xet-layout .layout__body-content .xet-content .xet-layout__article .article-title .h2 {
  color: var(--text-strong-color);
}
.xet-layout .layout__body-content .xet-content .xet-layout__article .article-customer {
  color: var(--text-base-color);
}
.xet-layout .layout__body-content .xet-content .xet-layout__article .article-customer .h4 {
  color: var(--text-strong-color);
}
.xet-layout .layout__body-content .xet-content .xet-layout__article .article-customer div > strong {
  color: var(--text-strong-color);
}
.xet-layout .layout__body-content .xet-content .btnArea {
  padding: 0 !important;
}
.xet-layout .layout__footer {
  z-index: 1;
  padding: var(--gap2x) 0;
  font-size: 0.875rem;
  color: #9da2a5;
  transition: var(--transition-all);
  background-color: var(--bg-footer-color);
}
.xet-layout .layout__footer > div > div + div {
  margin-top: var(--gap);
}
.xet-layout .layout__footer .footer-logo {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  text-align: center;
  padding-bottom: var(--gap);
  border-bottom: 1px solid #9da2a5;
}
.xet-layout .layout__footer .h3 {
  order: 2;
  color: #000;
}
.xet-layout .layout__footer .h3 > img {
  display: inline-block;
}
.xet-layout .layout__footer .h3 > img.logo__dark {
  display: none;
}
.xet-layout .layout__footer .tel {
  order: 1;
}
.xet-layout .layout__footer .tel > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border-radius: 30px;
  font-size: 2rem;
  color: var(--theme-color) !important;
}
.xet-layout .layout__footer .tel > span > strong {
  display: block;
  margin-left: 4px;
}
.xet-layout .layout__footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.xet-layout .layout__footer ul li {
  white-space: nowrap;
}
.xet-layout .layout__footer ul li a {
  display: flex;
  align-items: center;
  color: #9da2a5;
}
.xet-layout .layout__footer ul li strong {
  display: inline-block;
  margin-right: 6px;
  color: #b9b9b9;
}

/* [2026-08-22] 예전엔 서브페이지에서 80px 이상 스크롤하면 .xet-layout 에 JS(layout.js
   onLayoutScroll)가 .is-scroll 을 붙여 .layout__body-content/.layout__footer 좌우
   여백을 0으로 만들어 "스크롤하면 콘텐츠가 넓어지는" 효과를 냈다. 사용자가 불필요한
   효과라 판단해 제거 — 아래 각 breakpoint 의 margin-left/right 선언 자체를 없애
   스크롤 여부와 무관하게 항상 100% 폭으로 고정한다(is-scroll 클래스는 .icon-scroll
   페이드에도 쓰이므로 JS 는 그대로 둔다 - CSS 쪽만 정리). */
.xet-layout.member-act .layout__body-content {
  margin: 0 !important;
  padding: 5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.xet-layout.member-act .layout__footer {
  margin: 0 !important;
}

.xet-layout-mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translateZ(0);
  visibility: hidden;
}
.xet-layout-mouse-cursor.cursor-inner {
  margin-left: 2px;
  margin-top: 2px;
  width: 6px;
  height: 6px;
  z-index: 10000001;
  background-color: var(--theme-color);
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.xet-layout-mouse-cursor.cursor-inner.cursor-hover {
  margin-left: -40px;
  margin-top: -40px;
  width: 80px;
  height: 80px;
  background-color: var(--theme-color);
  opacity: 0.3;
}
.xet-layout-mouse-cursor.cursor-outer {
  margin-left: -15px;
  margin-top: -15px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--theme-color);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.5;
  transition: all 0.08s ease-out;
}
.xet-layout-mouse-cursor.cursor-outer.cursor-hover {
  opacity: 0;
}

/* (구) 플로팅 스크롤탑 버튼(#xet-layout-scrolltop-btn)은 제거되었습니다.
   TOP 이동 링크는 이제 푸터 내부(.footer-top-btn)에 고정으로 들어갑니다. */

body.quickbutton .xet-layout {
  padding-bottom: 4rem;
}

/* ====================================================================================================================
   ===== 다크모드 : 2026-08-21 완전 제거 =====
   --------------------------------------------------------------------------------------------------------------------
   발주자 확정으로 이 테마는 항상 라이트로 고정 운영한다.
   js/header.js 가 body 의 color_scheme_dark 클래스를 떼는 동작은 그대로 유지되므로
   (Rhymix 코어·게시판 스킨이 붙이는 클래스를 지우는 역할) 이쪽 JS 는 건드리지 않았다.
   css/ 전체에서 body.color_scheme_dark 규칙 103개(셀렉터 130개)와 미사용 --dark-* 토큰 10개를 삭제했다.

   ※ "어두운 배경 위 밝은 글자" 는 다크모드가 아니라 디자인이다.
     투명 헤더 / 퀵버튼 / 퀵상담 바가 여기에 해당하며, 아래 :root 의 --on-dark-* / --bar-bg-color
     토큰으로 이름을 바로잡아 유지했다. (예전 --dark-text-strong-color 등)
   ※ 남은 다크 코드: include/page_contact/css/style.css 89~92행. 이 폴더는 다른 작업자 담당이라 두었다.
   ==================================================================================================================== */

@media (min-width: 1024px) {
  .xet-layout .layout__body-page-top {
    height: 280px;
    padding-top: 140px;
  }
  .xet-layout .layout__body-page-top .page-top__title {
    font-size: 28px;
  }
  .xet-layout .layout__body-content {
    margin-top: 252px;
    padding: var(--gap2x) 0;
  }
    .xet-layout .layout__body-content .lnb .lnb__list {
    margin-bottom: var(--gap2x);
  }
  .xet-layout .layout__body-content .lnb .lnb__list a {
    font-size: 16.8px;
    margin: 0 14px;
  }
  .xet-layout .layout__body-content .lnb-child {
    margin-bottom: var(--gap2x);
  }
  .xet-layout .layout__footer {
    padding: var(--gap2x) 0;
    font-size: 14px;
  }
  .xet-layout .layout__footer .footer-logo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .xet-layout .layout__footer .footer-logo .h3 {
    order: 1;
  }
  .xet-layout .layout__footer .footer-logo .tel {
    order: 2;
  }

  .xet-layout.member-act .layout__body-content {
    padding-top: 140px;
  }

  body.quickbutton .xet-layout {
    padding-bottom: 0;
  }
}
@media (min-width: 1200px) {
  .xet-layout .layout__body-page-top {
    height: 360px;
    padding-top: 168px;
  }
  .xet-layout .layout__body-page-top .page-top__title {
    font-size: 42px;
  }
  .xet-layout .layout__body-content {
    margin-top: 336px;
    padding: var(--gap3x) 0;
  }
    .xet-layout .layout__body-content .lnb {
    margin-bottom: var(--gap3x);
  }
  .xet-layout .layout__body-content .lnb-child {
    margin-bottom: var(--gap3x);
  }
  .xet-layout .layout__footer {
    padding: var(--gap3x) 0;
  }
  .xet-layout .layout__footer > div > div + div {
    margin-top: var(--gap2x);
  }
}
@media (min-width: 1440px) {
  .xet-layout .layout__body-content {
    padding: var(--gap4x) 0;
  }
}