@charset "utf-8";
/* ==========================================================================
   HR 디자인 시스템 — 페이지 레이아웃 블록 (2026-10-29, LP 틀을 전체 공통으로 넓힘)
   - common_new.css 가 불러옴 → 모든 페이지에서 바로 씀. 클래스는 .ds- 로 시작해 기존 규칙과 안 겹침
   - 색·간격·모서리·글자는 DS 토큰, 버튼은 ds-components.css 의 .ds-btn
   - 피그마 짝: HR/Section Header ↔ .ds-head · HR/Card ↔ .ds-card · HR/Template/Bottom CTA ↔ .ds-cta
   - 원본: design-system/ds/ds-layout.css (이 폴더 파일은 복사본) · 쓰는 법: lp/_base/README.md
   - 조절값(페이지에서 지정): --hero-bg · --hero-bg-opacity · --hero-color · --grid-cols · --roll-speed · --cta-bg
   ========================================================================== */
/* 페이지 바탕 — .ds-page 를 내용 감싸개로 쓰면 이미지·줄바꿈 기본값이 맞춰짐 */
.ds-page { color: var(--ds-basic-text-level2); word-break: keep-all; }
.ds-page img { max-width: 100%; height: auto; display: block; }
.ds-inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.ds-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* 1. 히어로 — 배경 이미지는 각 LP 에서 --hero-bg 로만 지정 (상대경로) */
.ds-hero { position: relative; overflow: hidden; padding: var(--ds-space-7xl) 0 var(--ds-space-6xl); text-align: center;
  color: var(--ds-basic-text-on-bg); background: var(--hero-color, var(--ds-primary-bg-level1)); }
.ds-hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-bg, none) center / cover no-repeat;
  opacity: var(--hero-bg-opacity, 1); pointer-events: none; }
.ds-hero > * { position: relative; z-index: 1; }
.ds-hero__badge { display: inline-block; margin-bottom: var(--ds-space-xl); padding: 8px 24px; border-radius: var(--ds-radius-pill);
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); }
.ds-hero__title { margin: 0; color: inherit; }
.ds-hero__desc { margin: var(--ds-space-l) 0 0; color: var(--ds-basic-text-on-bg-level2); }
.ds-hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--ds-space-m); margin-top: var(--ds-space-4xl); }
.ds-hero__visual { margin: var(--ds-space-5xl) auto 0; max-width: 1200px; }
.ds-hero--light { color: var(--ds-basic-text-level1); background: var(--hero-color, var(--ds-primary-bg-level3)); }
.ds-hero--light .ds-hero__desc { color: var(--ds-basic-text-level3); }
.ds-hero--light .ds-hero__badge { background: var(--ds-tag-bg-primary); border-color: var(--ds-primary-border-level2); color: var(--ds-primary-text-level1); }

/* 2. 섹션 + 섹션 제목 */
.ds-section { padding: var(--ds-space-section) 0; background: var(--ds-basic-bg-base); }
.ds-section--gray { background: var(--ds-basic-bg-level2); }
.ds-section--tint { background: var(--ds-primary-bg-level3); }
.ds-section--dark { background: var(--ds-basic-bg-inverse); color: var(--ds-basic-text-on-bg); }
.ds-head { text-align: center; margin-bottom: var(--ds-space-5xl); }
.ds-head__label { display: block; margin-bottom: var(--ds-space-s); color: var(--ds-primary-text-level2); }
.ds-head__title { margin: 0; color: var(--ds-basic-text-level1); }
.ds-head__desc { margin: var(--ds-space-m) 0 0; color: var(--ds-basic-text-level3); }
.ds-section--dark .ds-head__title { color: var(--ds-basic-text-on-bg); }
.ds-section--dark .ds-head__label { color: var(--ds-primary-text-on-bg); }
.ds-section--dark .ds-head__desc { color: var(--ds-basic-text-on-bg-level2); }

/* 3. 카드 묶음 */
.ds-grid { display: grid; gap: var(--ds-space-l); grid-template-columns: repeat(var(--grid-cols, 3), minmax(0, 1fr)); }
.ds-card { text-align: left; padding: var(--ds-space-xl); border-radius: var(--ds-radius-card); background: var(--ds-basic-bg-base);
  border: 1px solid var(--ds-basic-border-level7); box-shadow: var(--ds-shadow-card); }
.ds-card > * { text-align: inherit; } /* 공통 CSS 의 제목 가운데 정렬을 끊음 */
.ds-card__icon { width: 48px; height: 48px; margin-bottom: var(--ds-space-m); }
.ds-card__title { margin: 0 0 var(--ds-space-xs); color: var(--ds-basic-text-level1); }
.ds-card__desc { margin: 0; color: var(--ds-basic-text-level3); }
/* 링크 카드 — <a class="ds-card ds-card--link"> : 마우스 올리면 테두리·그림자 강조 (기능 소개·바로가기 카드) */
.ds-card--link { display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; position: relative; color: inherit; text-decoration: none;
  transition: border-color .3s ease, box-shadow .3s ease; }
.ds-card--link:hover { border-color: var(--ds-palette-primary-18, #A6B2FF); box-shadow: 0 0 15px rgba(0,0,0,.1); }
.ds-section--gray .ds-card, .ds-section--tint .ds-card { border-color: transparent; }
.ds-section--dark .ds-card { background: var(--ds-basic-bg-inverse-level2); border-color: var(--ds-basic-bg-inverse-level2); box-shadow: none; }
.ds-section--dark .ds-card__title { color: var(--ds-basic-text-on-bg); }
.ds-section--dark .ds-card__desc { color: var(--ds-basic-text-on-bg-level2); }

/* 4. 태그(칩) */
.ds-chip { display: inline-block; padding: 2px 8px; border-radius: var(--ds-radius-pill); background: var(--ds-tag-bg-primary); color: var(--ds-primary-text-level1); }

/* 5. 흐르는 띠 (로고·문구) — .ds-rolling > .ds-rolling__track > 항목들 (항목은 두 번 반복해서 넣기) */
.ds-rolling { overflow: hidden; width: 100%; }
.ds-rolling__track { display: flex; gap: var(--ds-space-m); width: max-content; animation: ds-roll var(--roll-speed, 30s) linear infinite; }
.ds-rolling:hover .ds-rolling__track { animation-play-state: paused; }
@keyframes ds-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ds-rolling__track { animation: none; } }

/* 6. 자주 묻는 질문 — <details class="ds-faq__item"><summary>질문</summary><div>답</div></details> */
.ds-faq { max-width: 960px; margin: 0 auto; border-top: 1px solid var(--ds-basic-border-level6); }
.ds-faq__item { border-bottom: 1px solid var(--ds-basic-border-level6); }
.ds-faq__item > summary { list-style: none; cursor: pointer; position: relative; padding: var(--ds-space-l) var(--ds-space-4xl) var(--ds-space-l) 0; color: var(--ds-basic-text-level1); }
.ds-faq__item > summary::-webkit-details-marker { display: none; }
.ds-faq__item > summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--ds-basic-text-level4); border-bottom: 2px solid var(--ds-basic-text-level4); transform: rotate(45deg); transition: transform .2s; }
.ds-faq__item[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.ds-faq__item > div { padding: 0 0 var(--ds-space-l); color: var(--ds-basic-text-level3); }

/* 7. 하단 CTA — 모든 페이지 공통 하단 CTA 와 같은 수치(common_new.css) */
.ds-cta { padding: 100px 20px; text-align: center; color: var(--ds-basic-text-on-bg); background: var(--cta-bg, var(--ds-gradient-deep)); }
.ds-cta__title { margin: 0; color: inherit; }
.ds-cta__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--ds-space-m); margin-top: var(--ds-space-4xl); }

/* 8. 장식 이미지 — 절대 위치, 화면 좁으면 숨김 */
.ds-deco { position: absolute; z-index: 0; pointer-events: none; }

/* 반응형 — 공통 CSS 와 같은 구간(959 · 767) */
@media (max-width: 959px) {
  .ds-hero { padding: var(--ds-space-6xl) 0 var(--ds-space-5xl); }
  .ds-section { padding: var(--ds-space-3xl) 0; } /* 섹션 60 → 모바일 40 (2026-11-02) */
  .ds-head { margin-bottom: var(--ds-space-3xl); }
  .ds-grid { grid-template-columns: repeat(min(var(--grid-cols, 3), 2), minmax(0, 1fr)); }
  .ds-cta { padding: 64px 20px; }
  .ds-cta__actions, .ds-hero__actions { margin-top: var(--ds-space-3xl); }
  .ds-deco { display: none; }
}
@media (max-width: 767px) {
  .ds-grid { grid-template-columns: 1fr; gap: var(--ds-space-m); }
  .ds-card { padding: var(--ds-space-l); }
  .ds-hero__actions .ds-btn, .ds-cta__actions .ds-btn { width: 100%; }
}