@charset "UTF-8";
/* [2026-09-08] 브레이크포인트를 사이트 기준(1100 / 860 / 540)으로 통일했다.
   860/640/420 사다리를 1100/860/540 으로 한 칸씩 옮겼다 — 옮기고 나니 여백 값이 component.css 의 .board-wrap 사다리와 정확히 같아진다(원래 한 칸 어긋나 있었다). 슬라이더 화살표 600 → 860.
   구간만 옮겼고 각 블록 안의 값은 그대로다. */
/* ═══════════════════════════════════════════
   디자인 커스텀 페이지 — /user/page/{pageCd}
   JSP : user/addpage/index.jsp     JS : /static/user/js/page/addpage.js

   [2026-09-03] 신규 디자인 전환.
   카드·테두리를 두지 않는다 — 회사소개 페이지처럼 제목 아래로 본문을 그대로 흘린다.

   [2026-09-07] 상단 타이틀을 공지사항(/user/customer/notice)에 맞췄다.
   머리는 component.css 의 .board-crumb · .board-head · .board-head-title 을 그대로 쓴다
   (공지·FAQ·게시판과 같은 머리). 전용 .addpage-title 은 버렸다.
   본문 컨테이너 폭도 게시판과 같은 1100px 로 맞췄다(전에는 1280px).

   .addpage-body 안쪽은 관리자 에디터가 만든 HTML 이다. base.css 가 전역으로
   margin/padding 을 0 으로 밀고 ul 불릿·em 이탤릭·a 밑줄까지 지워 버려서,
   그대로 두면 문단이 전부 붙어 한 덩어리로 보인다.
   그래서 이 블록 안에서만 브라우저 기본값에 가깝게 되살린다.
   (board.css 의 .notice-detail-body 는 white-space:pre-line 이라 재사용할 수 없다 —
    에디터가 넣은 개행까지 빈 줄로 보여 준다.)
═══════════════════════════════════════════ */

/* .board-wrap(component.css:939) 과 같은 값 — 게시판·공지와 폭을 맞춘다 */
.addpage-wrap {
  max-width: 1100px; margin: 0 auto; padding: 48px 32px 100px;
}

/* 제목이 안 들어왔을 때(조회 실패·TITLE 빈 값) 머리를 통째로 숨긴다.
   addpage.js 가 .is-untitled 를 붙인다 — 상자가 둘이라 :empty 로는 못 잡는다. */
#page-addpage.is-untitled .board-crumb,
#page-addpage.is-untitled .board-head { display: none; }

.addpage-body {
  font-size: 15px; line-height: 1.85; color: var(--tr-graphite);
  min-height: 200px;
}

/* ── 에디터 HTML 되살리기 (이 블록 안에서만) ── */

.addpage-body p { margin: 0 0 1em; }

.addpage-body h1, .addpage-body h2, .addpage-body h3,
.addpage-body h4, .addpage-body h5, .addpage-body h6 {
  font-weight: 900; color: var(--tr-graphite);
  line-height: 1.4; margin: 1.8em 0 0.7em;
}
.addpage-body h1 { font-size: 24px; }
.addpage-body h2 { font-size: 21px; }
.addpage-body h3 { font-size: 18px; }
.addpage-body h4, .addpage-body h5, .addpage-body h6 { font-size: 16px; }
.addpage-body > :first-child { margin-top: 0; }

.addpage-body ul, .addpage-body ol { margin: 0 0 1em; padding-left: 1.8em; }
.addpage-body ul { list-style: disc; }
.addpage-body ol { list-style: decimal; }
.addpage-body li { margin-bottom: 0.35em; }

.addpage-body a { color: var(--tr-orange); text-decoration: underline; }
.addpage-body a:hover { opacity: 0.75; }

/* 아이콘 폰트(<i class="fas ...">)는 이탤릭 대상이 아니다 */
.addpage-body em, .addpage-body i:not([class*="fa-"]) { font-style: italic; }
.addpage-body strong, .addpage-body b { font-weight: 700; }
.addpage-body u { text-decoration: underline; }

.addpage-body blockquote {
  margin: 1.2em 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--gray-line); color: #555;
}

.addpage-body hr { margin: 2em 0; border: 0; border-top: 1px solid var(--gray-line); }

/* 에디터가 width 를 픽셀로 박아 두는 경우가 많아 모바일에서 가로로 넘친다 */
.addpage-body img { max-width: 100%; height: auto; }

/* 표는 통째로 가로 스크롤시키지 말고 폭에 맞춘다. 넘치면 래퍼가 스크롤한다 */
.addpage-body table {
  border-collapse: collapse; max-width: 100%;
}
.addpage-body table td, .addpage-body table th {
  border: 1px solid var(--gray-line); padding: 10px 12px;
}
.addpage-body table th { background: var(--gray-bg); font-weight: 700; }

/* ── [2026-09-07] 사진 슬라이드 · 전폭 이미지 ──
   에디터 본문에 이 두 덩어리만 넣으면 된다. 화살표·점은 addpage.js 가 그린다.

     <div class="addpage-slider"><div class="addpage-slider-track">
       <img src="…"><img src="…"><img src="…">
     </div></div>

     <div class="addpage-figure"><img src="…"></div>

   .addpage-figure 의 !important 는 에디터가 img 에 박아 두는 인라인 width/height 를
   덮기 위한 것이다(약도를 올리면 원본 크기 그대로 작게 나온다). 인라인보다 세야 한다.
   슬라이드 안 이미지도 같은 이유로 !important 를 둔다.
   에디터가 img 를 <p> 로 감싸는 경우가 있어 트랙의 칸은 > * 로 잡는다. */

.addpage-body .addpage-slider {
  position: relative; overflow: hidden; margin: 0 0 64px;
  border: 1px solid var(--gray-line); border-radius: 10px; background: #000;
}
.addpage-body .addpage-slider-track { display: flex; transition: transform .35s ease; }
.addpage-body .addpage-slider-track > * {
  flex: 0 0 100%; width: 100%; max-width: 100%; margin: 0; padding: 0;
}
.addpage-body .addpage-slider-track img {
  width: 100% !important; height: auto !important; display: block;
}

.addpage-body .addpage-slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: none; padding: 0;
  background: #fff; color: var(--tr-orange); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35); z-index: 2;
}
.addpage-body .addpage-slider-arrow.prev { left: 16px; }
.addpage-body .addpage-slider-arrow.next { right: 16px; }
.addpage-body .addpage-slider-arrow:hover { background: var(--tr-orange); color: #fff; }

.addpage-body .addpage-slider-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 2;
}
.addpage-body .addpage-slider-dot {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,0.5); cursor: pointer;
}
.addpage-body .addpage-slider-dot.active { background: #fff; width: 9px; height: 9px; }

@media (max-width: 860px) {
  .addpage-body .addpage-slider-arrow { width: 36px; height: 36px; font-size: 14px; }
  .addpage-body .addpage-slider-arrow.prev { left: 8px; }
  .addpage-body .addpage-slider-arrow.next { right: 8px; }
}

/* 약도처럼 폭을 꽉 채워야 하는 이미지 */
.addpage-body .addpage-figure {
  margin: 0 0 64px; border: 1px solid var(--gray-line); border-radius: 10px; overflow: hidden;
}
.addpage-body .addpage-figure img {
  width: 100% !important; height: auto !important; display: block;
}

/* [2026-09-03] 랜딩형 콘텐츠 지원.
   본문에 자기 대제목(h1)이 있으면 addpage.js 가 .is-landing 을 붙인다.
   그때는 1280 컨테이너와 여백을 통째로 푼다 — 컬러 밴드가 화면 끝까지 가야 하기 때문이다.
   가로폭은 에디터 HTML 안의 각 섹션이 자기 이너(max-width)로 잡는다.
   100vw 로 컨테이너를 빠져나가는 트릭은 쓰지 않는다(스크롤바 폭만큼 어긋난다).
   글만 등록한 페이지는 .is-landing 이 붙지 않아 아래 기본 레이아웃 그대로다. */
#page-addpage { overflow-x: hidden; }

#page-addpage.is-landing .addpage-wrap { max-width: none; padding: 0; }
/* 랜딩형은 히어로가 제목을 갖고 있다 — 머리(브레드크럼+제목)를 통째로 뺀다 */
#page-addpage.is-landing .board-crumb,
#page-addpage.is-landing .board-head { display: none; }
#page-addpage.is-landing .addpage-body { font-size: 15px; min-height: 0; }

@media (max-width: 1100px) {
  /* 폭 관련 값은 component.css 의 .board-wrap @media 와 같게 둔다.
     .board-head-title 축소는 component.css 가 이미 처리한다 */
  .addpage-wrap { padding: 36px 24px 80px; }
  .addpage-body { font-size: 14px; }

  /* [2026-09-03] 랜딩형의 카드 그리드는 <table> 로 짠다 — 에디터가 flex/grid div 를
     가장 잘 망가뜨리기 때문이다. 대신 표는 스스로 줄바꿈하지 않으므로 여기서 쌓아 준다.
     block 이 되면 border-spacing 이 죽어 카드 사이 간격을 margin 으로 준다. */
  #page-addpage.is-landing .addpage-body table,
  #page-addpage.is-landing .addpage-body tbody,
  #page-addpage.is-landing .addpage-body tr,
  #page-addpage.is-landing .addpage-body td { display: block; width: 100%; }
  #page-addpage.is-landing .addpage-body td { margin-bottom: 16px; }
}

@media (max-width: 860px) {
  .addpage-wrap { padding: 28px 16px 80px; }
}

@media (max-width: 540px) {
  .addpage-wrap { padding: 24px 12px 60px; }
}