sales-frontend-components 0.0.59 → 0.0.61

package/dist/consent-contents/consent-content.module.scss

@@ -0,0 +1,708 @@
+@use 'sales-frontend-design-system/design-system-context' as *;
+
+/* ============================
+   동의서 컨텐츠 공통 스타일
+   ============================ */
+
+.consent-content-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: margin(textfield-vertical);
+}
+
+/* ============================
+   스티키 알림 영역
+   ============================ */
+
+.sticky-notification {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  padding: margin(card-around-medium);
+  margin-bottom: margin(textfield-vertical);
+  background-color: colors(surface-neutral);
+  border-radius: radius-basic(medium);
+  box-shadow: shadow(elevation-2);
+
+  // 스티키 전환 시 부드러운 애니메이션
+  transition: box-shadow 0.2s ease-in-out;
+
+  // 스크롤 시 더 강한 그림자 효과 (브라우저에서 지원하는 경우)
+  &:has(+ *) {
+    box-shadow: shadow(elevation-3);
+  }
+}
+
+/* ============================
+   조합형 동의서 래퍼
+   ============================ */
+
+.combined-consent-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem; // 10px gap for multiple consents
+}
+
+.consent-item {
+  // 각 동의서 컴포넌트의 스티키 알림 숨김 (상위에서 관리)
+  .sticky-notification {
+    display: none;
+  }
+}
+
+.consent-content {
+  display: flex;
+  flex-direction: column;
+  padding: margin(card-around-large);
+  background-color: colors(surface-neutral);
+  // border: none;
+  // border-radius: radius-basic(xlarge); // 모바일일 경우 레디어스 X
+
+  @include media(tablet) {
+    border: 1px solid colors(border-neutral_2);
+    border-radius: radius-basic(xlarge);
+  }
+}
+
+// 타이틀/디스크립션/내용 카드 간 간격 스택
+.consent-stack {
+  display: flex;
+  flex-direction: column;
+  background-color: transparent;
+  // background-color: colors(surface-neutral_1);
+}
+
+// 섹션 모음(섹션 카드들 사이 갭 전용 래퍼)
+.sections-stack {
+  display: flex;
+  flex-direction: column;
+  gap: margin(card);
+  // tablet: description-card 아래와의 간격
+  @include media(tablet) {
+    margin-top: margin(card);
+  }
+}
+
+// tablet: 타이틀-디스크립션 간격
+.tablet-title-gap-medium {
+  @include media(tablet) {
+    margin-bottom: margin(title-medium);
+  }
+}
+
+// tablet: 상단 여백 title-medium
+.tablet-top-gap-title-medium {
+  @include media(tablet) {
+    margin-top: margin(title-medium);
+  }
+}
+
+// 모바일에서 카드 간 갭 제거 (특정 화면에서만 적용 가능)
+.consent-stack.mobile-tight {
+  gap: 0;
+
+  @include media(tablet) {
+    gap: margin(card);
+  }
+}
+
+// 헤더(타이틀+디스크립션) 영역: 좌우 패딩만, 상단 패딩 없음
+.consent-header {
+  display: flex;
+  flex-direction: column;
+  gap: margin(title-xlarge);
+  padding: padding(zero) grid-value(margin-sub);
+}
+
+/* ============================
+   카드 타이틀 영역
+   ============================ */
+
+// 카드 타이틀 래퍼
+.card-title-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  margin: margin(divider-large) 0;
+  background-color: colors(border-neutral_2);
+}
+
+// 타이틀 텍스트 영역
+.title-text {
+  color: colors(text-body);
+
+  // 기본(title3)로 적용
+  @include apply-typography(title3);
+}
+
+// 타이틀과 오른쪽 컨텐츠가 함께 있는 영역
+.title-with-button {
+  // Mobile: stack vertically
+  display: flex;
+  flex-direction: column;
+  gap: padding(xsmall);
+  align-items: flex-start;
+
+  // Tablet and up: row with space between
+  @include media(tablet) {
+    flex-direction: row;
+    gap: padding(medium);
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+// 타이틀 오른쪽 컨텐츠 영역
+.title-right-contents {
+  flex-shrink: 0;
+}
+
+// 필수 마크
+.required-mark {
+  color: colors(text-primary);
+}
+
+// 선택 마크
+.optional-mark {
+  color: colors(text-body_3);
+}
+
+/* ============================
+   텍스트 스타일
+   ============================ */
+
+// 기본 설명 텍스트
+.description {
+  // 모바일: 더 옅은 본문 컬러로
+  color: colors(text-body_3);
+
+  @include apply-typography(body2);
+
+  // 태블릿부터 기존 컬러 유지
+  @include media(tablet) {
+    color: colors(text-body_2);
+  }
+}
+
+// 섹션
+.section {
+  display: flex;
+  flex-direction: column;
+}
+
+// 섹션 제목
+.section-title {
+  margin-bottom: margin(title-medium);
+  color: colors(text-body);
+
+  @include apply-typography(title5);
+}
+
+// 섹션 설명
+.section-description {
+  color: colors(text-body_3);
+
+  @include apply-typography(body2);
+}
+
+// 서브 섹션
+.sub-section {
+  display: flex;
+  flex-direction: column;
+  gap: margin(title-small);
+}
+
+// 서브 제목
+.sub-title {
+  margin: 0;
+  color: colors(text-body);
+
+  @include apply-typography(subtitle3);
+}
+
+// 서브 설명
+.sub-description {
+  margin: 0;
+  line-height: 1.6;
+  color: colors(text-body_3);
+
+  @include apply-typography(body2);
+}
+
+// 강조 텍스트
+.highlight {
+  color: colors(text-primary);
+}
+
+.highlight-bold-typo {
+  @include apply-typography(subtitle3);
+}
+
+// 캡션 텍스트
+.caption {
+  color: colors(text-neutral_1);
+
+  @include apply-typography(body3);
+}
+
+// 푸터 캡션 묶음: 문단 간 여백 제거
+.footer-caption {
+  .section-description {
+    margin: 0;
+  }
+}
+
+/* ============================
+   스크롤 안내 툴팁 (카드 내부용)
+   ============================ */
+.scroll-guide-tooltip {
+  position: fixed;
+  bottom: calc(var(--bottom-bar-height, 0px) + 20px);
+  left: 50%;
+  z-index: 1000;
+  display: flex;
+  gap: padding(xsmall);
+  align-items: center;
+  padding: padding(medium);
+  background-color: colors(surface-secondary);
+  border: 1px solid colors(border-neutral_6);
+  border-radius: radius-basic(medium);
+  transform: translateX(-50%);
+}
+
+.tooltip-icon {
+  flex-shrink: 0;
+  color: colors(additional-semantic_3);
+}
+
+.tooltip-text {
+  color: colors(text-body_0);
+  white-space: nowrap;
+
+  @include apply-typography(body2);
+}
+
+/* ============================
+   Wrapper 스타일
+   ============================ */
+
+.info-bar-wrapper1 {
+  display: flex;
+  flex-direction: column;
+  gap: padding(small);
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: padding(xlarge);
+
+  @include media(tablet) {
+    flex-direction: row;
+    gap: padding(medium);
+    align-items: center;
+  }
+}
+
+.info-bar-wrapper2 {
+  padding-top: padding(xlarge);
+  padding-bottom: padding(xlarge);
+}
+
+// 반응형 가시성
+.tablet-only {
+  display: none;
+
+  @include media(tablet) {
+    display: block;
+  }
+}
+
+.mobile-only {
+  display: block;
+
+  @include media(tablet) {
+    display: none;
+  }
+}
+
+/* ============================
+   리스트 스타일
+   ============================ */
+
+// 기본 리스트 스타일
+.content-list {
+  padding-left: 0;
+  margin: 0;
+  list-style: none;
+
+  li {
+    position: relative;
+    padding: padding(xxxsmall) 0 padding(xxxsmall) 12px;
+    color: colors(text-body_3);
+
+    @include apply-typography(body2);
+  }
+
+  // Dot 스타일 (기본)
+  &.list-dot li::before {
+    position: absolute;
+    left: 0;
+    width: 0.25rem;
+    height: 0.25rem;
+    margin: padding(small) padding(xsmall) padding(small) 0;
+    content: '';
+    background-color: colors(text-body_3);
+    border-radius: 50%;
+  }
+
+  // 숫자 리스트 스타일
+  &.list-numbered {
+    counter-reset: list-counter;
+
+    li {
+      counter-increment: list-counter;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        color: colors(text-body_3);
+        content: counter(list-counter) '.';
+
+        @include apply-typography(body2);
+      }
+    }
+  }
+
+  // 알파벳 리스트 스타일
+  &.list-alpha {
+    counter-reset: list-counter;
+
+    li {
+      counter-increment: list-counter;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        color: colors(text-body_3);
+        content: counter(list-counter, lower-alpha) ')';
+
+        @include apply-typography(body2);
+      }
+    }
+  }
+
+  // 로마숫자 리스트 스타일
+  &.list-roman {
+    counter-reset: list-counter;
+
+    li {
+      counter-increment: list-counter;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        color: colors(text-body_3);
+        content: counter(list-counter, lower-roman) '.';
+
+        @include apply-typography(body2);
+      }
+    }
+  }
+
+  // 대시(-) 스타일
+  &.list-dash li::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: colors(text-body_3);
+    content: '−'; // em dash 사용
+
+    @include apply-typography(body2);
+  }
+
+  // 체크 마크 스타일
+  &.list-check li::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: colors(text-primary);
+    content: '✓';
+
+    @include apply-typography(body2);
+  }
+
+  // 마커 없는 리스트 (단순 나열)
+  &.list-none li {
+    padding-left: 0; // 들여쓰기 제거
+
+    &::before {
+      display: none; // 마커 숨김
+    }
+  }
+
+  // 최소 들여쓰기 리스트 (마커 없이 약간의 들여쓰기만)
+  &.list-indent li {
+    padding-left: padding(small); // 최소한의 들여쓰기
+
+    &::before {
+      display: none; // 마커 숨김
+    }
+  }
+}
+
+/* ============================
+   단순 텍스트 블록 (리스트가 아닌 경우)
+   ============================ */
+
+// 단순 텍스트 블록들
+.text-block {
+  color: colors(text-body_3);
+
+  @include apply-typography(body2);
+
+  // 블록 간 간격
+  &:not(:last-child) {
+    margin-bottom: padding(small);
+  }
+
+  // 강조 텍스트
+  &.text-emphasis {
+    font-weight: font-weight(medium);
+    color: colors(text-body);
+  }
+
+  // 작은 텍스트
+  &.text-small {
+    @include apply-typography(body3);
+  }
+
+  // 들여쓰기 있는 텍스트
+  &.text-indent {
+    padding-left: padding(medium);
+  }
+
+  // 깊은 들여쓰기
+  &.text-indent-deep {
+    padding-left: padding(large);
+  }
+}
+
+// 텍스트 블록 컨테이너
+.text-blocks {
+  display: flex;
+  flex-direction: column;
+  gap: padding(small);
+}
+
+/* ============================
+   체크박스 및 동의 영역
+   ============================ */
+
+// 동의 체크박스 영역
+.agreement-section {
+  display: flex;
+  flex-direction: column;
+  gap: padding(small);
+  align-items: flex-start;
+  justify-content: space-between;
+
+  @include media(tablet) {
+    flex-direction: row;
+    gap: 0.875rem;
+    align-items: flex-end;
+  }
+}
+
+// 동의 섹션 텍스트 영역
+.agreement-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+// 동의 항목과 리스트 요소 사이 간격
+.agreement-text .content-list {
+  margin-top: margin(textarea-xsmall);
+}
+
+/* ============================
+   모달 스타일
+   ============================ */
+
+.modal-footer {
+  display: flex;
+  gap: padding(small);
+  justify-content: flex-end;
+}
+
+.info-modal-content {
+  display: flex;
+  flex-direction: column;
+  gap: margin(card-around-medium);
+}
+
+.info-section {
+  display: flex;
+  flex-direction: column;
+  gap: padding(small);
+}
+
+.info-title {
+  margin: 0;
+  font-weight: 600;
+  color: colors(text-body_1);
+
+  @include apply-typography(subtitle2);
+}
+
+.info-list {
+  display: flex;
+  flex-direction: column;
+  gap: margin(textarea-xsmall);
+  padding-left: 0;
+  margin: 0;
+  list-style: none;
+
+  .info-list-item {
+    display: block;
+    color: colors(text-body_2);
+
+    @include apply-typography(body2);
+  }
+}
+
+// 동의 섹션 체크박스 영역
+.agreement-checkbox {
+  flex-shrink: 0;
+  align-self: flex-start;
+
+  @include media(tablet) {
+    align-self: auto;
+  }
+}
+
+// 체크박스 그룹
+.checkbox-group {
+  // mobile: grid 3 columns for clean vertical alignment
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: padding(xsmall) padding(zero);
+  margin-top: margin(textarea-medium);
+
+  @include media(tablet) {
+    // tablet: horizontal layout with larger gaps
+    display: flex;
+    flex-wrap: nowrap;
+    gap: margin(button-large);
+  }
+}
+
+// 라디오 그룹(단일 선택 전용)
+.radio-group {
+  margin-top: margin(textarea-medium);
+
+  // 모바일일 때만 체크박스 그룹처럼 그리드 적용
+  @include media(tablet, max) {
+    [role='radiogroup'] {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: padding(xsmall) padding(zero);
+
+      > label {
+        display: flex;
+        gap: padding(xxxsmall);
+        align-items: center;
+        width: 100%;
+      }
+    }
+  }
+}
+
+// 모바일: 타이틀 아래 간격
+.mobile-title-gap {
+  margin-bottom: margin(title-xlarge);
+
+  @include media(tablet) {
+    margin-bottom: 0;
+  }
+}
+
+// 모바일: 좌우 패딩만 적용하는 래퍼(카드 배경/보더 없음)
+.mobile-side-padding {
+  padding: padding(zero) grid-value(margin-sub);
+
+  @include media(tablet) {
+    padding: 0;
+  }
+}
+
+// 모바일: 푸터 캡션 영역 배경 흰색 적용
+.mobile-footer-bg {
+  background-color: colors(surface-neutral);
+
+  @include media(tablet) {
+    background-color: transparent;
+  }
+}
+
+/* ============================
+   QR 코드
+   ============================ */
+
+// QR 코드
+.qr-code {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 3.875rem;
+  height: 3.875rem;
+  margin-top: padding(small);
+
+  @include media(tablet) {
+    margin-top: 0;
+  }
+}
+
+/* ============================
+   Responsive (mobile-first adjustments)
+   ============================ */
+
+// 모바일: 디스크립션 카드를 좌우 패딩만 적용
+.consent-content.mobile-side-only {
+  padding: padding(zero) grid-value(margin-sub);
+
+  @include media(tablet) {
+    padding: margin(card-around-large);
+  }
+}
+
+// 모바일: 첫 카드 상단 패딩 제거(옵션)
+.consent-content.no-top-padding {
+  padding-top: 0;
+
+  @include media(tablet) {
+    padding-top: margin(card-around-large);
+  }
+}
+
+// 모바일: 마지막 카드 하단 패딩 제거(옵션)
+.consent-content.no-bottom-padding {
+  padding-bottom: 0;
+
+  @include media(tablet) {
+    padding-bottom: margin(card-around-large);
+  }
+}
+
+// 모바일: 타이틀-디스크립션 사이 내부 여백(카드 내부에서 흰 배경 유지)
+.title-gap-large {
+  margin-bottom: margin(title-xlarge);
+}