/* ===========================
   걱정마디자인 통합 반응형 CSS
   Desktop-first (1920px base)
   Breakpoint: 1023px
   =========================== */

/* Scoped under .front-main-v2 - no global reset */

/* ─── 히어로 + 설명서 섹션 ─── */
.front-main-v2 .section-manual {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

/* 배너 캐러셀 (Swiper: 자동 롤링, 카드 동일 크기) */
.front-main-v2 .banner-carousel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
}
.front-main-v2 .main-hero-swiper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.front-main-v2 .main-hero-swiper .swiper-wrapper {
  align-items: stretch;
}
.front-main-v2 .main-hero-swiper .swiper-slide {
  width: min(32vw, 550px);
  height: auto;
  box-sizing: border-box;
  flex-shrink: 0;
}
.front-main-v2 .main-hero-swiper .banner-frame {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  aspect-ratio: 1 / 1;
  background: #f0f0f0;
  box-sizing: border-box;
}
.front-main-v2 .main-hero-swiper .banner-frame > a {
  display: block;
  width: 100%;
  height: 100%;
}
.front-main-v2 .main-hero-swiper .banner-hero {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
}

/* ─── [UI-01] 배너 슬라이더 컨트롤러 ────────────────────────────────────────
   좌우 이동 · 진행바 · 현재/전체 · 일시정지/재생 을 한 줄로 묶는다.
   배너 위에 겹치지 않는다 — 배너 이미지 자체가 카피를 담고 있어 가리면 안 된다. */
.front-main-v2 .main-hero-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin: 16px auto 0;
  padding: 0 16px;
  box-sizing: border-box;
}
.front-main-v2 .hero-ctrl,
.front-main-v2 .rec-ctrl {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #d1d1d1;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.front-main-v2 .hero-ctrl:hover,
.front-main-v2 .rec-ctrl:hover { border-color: #fdb640; background: #fffaf0; }
.front-main-v2 .hero-ctrl:focus-visible,
.front-main-v2 .rec-ctrl:focus-visible { outline: 2px solid #fdb640; outline-offset: 2px; }

/* 화살표는 border 로 그린다(아이콘 파일 추가 없이) */
.front-main-v2 .hero-ctrl-ico.ico-prev,
.front-main-v2 .hero-ctrl-ico.ico-next,
.front-main-v2 .rec-ctrl-ico.ico-prev,
.front-main-v2 .rec-ctrl-ico.ico-next {
  width: 7px;
  height: 7px;
  border-top: 1.5px solid #4d4d4d;
  border-right: 1.5px solid #4d4d4d;
}
.front-main-v2 .hero-ctrl-ico.ico-prev,
.front-main-v2 .rec-ctrl-ico.ico-prev { transform: rotate(-135deg); margin-left: 2px; }
.front-main-v2 .hero-ctrl-ico.ico-next,
.front-main-v2 .rec-ctrl-ico.ico-next { transform: rotate(45deg);   margin-right: 2px; }

/* 일시정지(‖) / 재생(▶) — 상태에 따라 하나만 보인다 */
.front-main-v2 .hero-ctrl-ico.ico-pause {
  width: 8px;
  height: 10px;
  border-left: 2.5px solid #4d4d4d;
  border-right: 2.5px solid #4d4d4d;
  box-sizing: border-box;
}
.front-main-v2 .hero-ctrl-ico.ico-play {
  width: 0;
  height: 0;
  border-left: 9px solid #4d4d4d;
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
  margin-left: 3px;
}
.front-main-v2 .hero-ctrl-toggle[data-state="playing"] .ico-play,
.front-main-v2 .hero-ctrl-toggle[data-state="paused"]  .ico-pause { display: none; }

.front-main-v2 .hero-progress {
  flex: 1 1 auto;
  min-width: 60px;
  height: 3px;
  border-radius: 2px;
  background: #e6e6e6;
  overflow: hidden;
}
.front-main-v2 .hero-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: #fdb640;
}
.front-main-v2 .hero-counter {
  flex: 0 0 auto;
  margin: 0;
  font-size: 13px;
  line-height: 1;
  color: #4d4d4d;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.front-main-v2 .hero-counter-cur { font-weight: 700; color: #060606; }
.front-main-v2 .hero-counter-sep { margin: 0 3px; color: #aaaaaa; }

@media (prefers-reduced-motion: reduce) {
  .front-main-v2 .hero-progress-fill { transition: none; }
}

/* 메인 배너 인디케이터(점): 모바일에서만 표시 (JS는 항상 연결, 데스크톱은 숨김) */
.front-main-v2 .main-hero-pagination.swiper-pagination {
  display: none;
}
.front-main-v2 .main-hero-pagination .swiper-pagination-bullet {
  background: #d1d1d1;
  opacity: 1;
}
.front-main-v2 .main-hero-pagination .swiper-pagination-bullet-active {
  background: #8b8b8b;
}

/* ─── 디자인 설명서 콘텐츠 ─── */
.front-main-v2 .section-manual-content {
  background: #ffffff;
  padding: 120px 0px 120px 0px;
  display: flex;
  flex-direction: column;
  gap: 78px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}
.front-main-v2 .manual-header {
  display: flex;
  flex-direction: column;
  gap: 31px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

/* 공통 버튼: 둥근 필 버튼 (다크) */
.front-main-v2 .button {
  background: #333333;
  border-radius: 60px;
  padding: 16px 15px 16px 15px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 260px;
  height: 45px;
  position: relative;
}
.front-main-v2 .pill-label {
  color: #ffffff;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  letter-spacing: -0.64px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 히어로 제목 */
.front-main-v2 .hero-heading {
  color: #000000;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 50px;
  line-height: 70px;
  letter-spacing: -0.88px;
  font-weight: 700;
  position: relative;
  align-self: stretch;
}
.front-main-v2 .hero-description {
  color: #000000;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 25px;
  line-height: 37px;
  letter-spacing: -0.88px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.front-main-v2 .text-bold {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
}
.front-main-v2 .text-regular {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
}

/* ─── 설명서 카드 그리드 ─── */
/* [UI-07 · 2026-08-06] 설명서 카드 3장이 화면을 좁히면 2+1 로 깨지고 썸네일이 잘리던 것.
   ── 무엇이 문제였나 (WQHD 32" 반쪽 = 1251px 에서 실측)
      카드 428px × 3 + gap 24px × 2 = **1,332px** 가 필요한데 화면은 1,251px 였다.
      · flex-wrap: wrap  → 세 번째 카드가 아래로 내려감
      · height: 471px    → 두 줄이 들어갈 자리가 없음
      · overflow: hidden → 넘친 부분이 잘림
      그래서 **위 두 장은 썸네일이 띠처럼 남고, 내려간 세 번째는 본문이 통째로 잘렸다.**
   ── 어떻게 고쳤나
      줄바꿈·고정높이·잘라내기를 셋 다 없애고, 카드를 **폭에 따라 같이 줄어들게** 했다.
      3장이 항상 한 줄에 나란히 있고, 좁아지면 셋이 똑같은 비율로 작아진다.
   ★ 고정 높이로 되돌리지 말 것. 카드 안 글자 수는 콘텐츠마다 다르다 —
     높이를 박으면 글이 조금만 길어져도 다시 잘린다. */
.front-main-v2 .manual-card-grid {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: stretch;      /* 카드 높이를 서로 맞춘다(글 길이가 달라도 아래가 안 어긋난다) */
  justify-content: center;
  flex-wrap: nowrap;         /* 3장 한 줄 유지 */
  align-content: center;
  align-self: stretch;
  flex-shrink: 1;
  height: auto;              /* 471px 고정 해제 */
  position: relative;
  overflow: visible;         /* 잘라내기 해제 */
}
.front-main-v2 .card {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  /* 셋이 남는 폭을 똑같이 나눠 갖는다. 넓은 화면에서는 원래 크기(428px)를 넘지 않는다. */
  flex: 1 1 0;
  min-width: 0;              /* 없으면 flex 자식이 내용 폭만큼 버텨 축소가 안 된다 */
  max-width: 428px;
  position: relative;
}
.front-main-v2 .manual-card-image {
  border-radius: 10px 10px 0px 0px;
  padding: 22px 16px 22px 16px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 100%;   /* [UI-07] */
  height: 251px;
  position: relative;
  overflow: hidden;
}
.front-main-v2 .card-bg-manual-1 {
  background: url(/front/img/main/mainpage-banner-manual-1.png) center;
  background-size: cover;
  background-repeat: no-repeat;
}
.front-main-v2 .img-arrow-prev-blk-svg-fill {
  padding: 18.28px 21px 18.28px 21px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
}
.front-main-v2 .background-shadow {
  background: #ffffff;
  border-radius: 0px 0px 10px 10px;
  padding: 25px 23px 25px 23px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  /* [UI-07] 카드 폭을 따라간다. 428 고정이면 카드만 줄고 본문은 안 줄어 넘친다. */
  width: 100%;
  position: relative;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.06);
}
.front-main-v2 .manual-card-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .manual-card-number-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .icon {
  background: #fdb640;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  position: relative;
  transform-origin: 0 0;
  transform: rotate(45deg) scale(1, 1);
}
.front-main-v2 .background {
  background: #fdb640;
  border-radius: 5px;
  width: 100.06%;
  height: 10px;
  position: absolute;
  right: 50%;
  left: -50.06%;
  top: 0px;
}
.front-main-v2 .background2 {
  background: #fdb640;
  border-radius: 5px;
  width: 10px;
  height: 100.06%;
  position: absolute;
  left: 0px;
  bottom: 50%;
  top: -50.06%;
}
.front-main-v2 .card-num {
  color: #000000;
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 15px;
  letter-spacing: -0.6px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.front-main-v2 .manual-card-desc {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 87px;
  position: relative;
}
.front-main-v2 .manual-card-title {
  color: #000000;
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 24px;
  letter-spacing: -0.96px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.front-main-v2 .manual-card-excerpt {
  color: #000000;
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  line-height: 21.78px;
  letter-spacing: -0.64px;
  font-weight: 400;
  position: relative;
  width: 100%;
  max-width: 409px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.front-main-v2 .manual-card-tags {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
/* 해시태그 한 줄 + 말줄임 (동적 데이터용, 목업과 동일 버블 스타일) */
.front-main-v2 .manual-card-tags-inner {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  position: relative;
}
.front-main-v2 .manual-card-tags-ellipsis {
  flex-shrink: 0;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  letter-spacing: -0.64px;
  color: #4d4d4d;
}
.front-main-v2 .tag-bg {
  background: #f6f6f6;
  border-radius: 10px;
  padding: 8px 14px 8px 14px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .tag-text {
  color: #4d4d4d;
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  letter-spacing: -0.64px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* 카드 캐러셀 dots */
.front-main-v2 .carousel-dots {
  flex-shrink: 0;
  width: 20px;
  height: 4px;
  position: static;
}
.front-main-v2 .carousel-dot {
  background: #d1d1d1;
  border-radius: 2px;
  width: 4px;
  height: 4px;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
/* 해시태그 오른쪽 dots: 절대 위치 제거, 플렉스로 오른쪽 정렬 */
.front-main-v2 .manual-card-tags-inner .carousel-dots {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: auto;
  margin-left: 8px;
}
.front-main-v2 .manual-card-tags-inner .carousel-dot {
  position: static;
  translate: none;
}
.front-main-v2 .manual-card-grid .card:nth-child(1) .carousel-dot:nth-child(1) { left: 196.73px; }
.front-main-v2 .manual-card-grid .card:nth-child(1) .carousel-dot:nth-child(2) { left: 204.73px; }
.front-main-v2 .manual-card-grid .card:nth-child(1) .carousel-dot:nth-child(3) { left: 212.73px; }
.front-main-v2 .manual-card-grid .card:nth-child(2) .carousel-dot:nth-child(1) { left: 211px; }
.front-main-v2 .manual-card-grid .card:nth-child(2) .carousel-dot:nth-child(2) { left: 219px; }
.front-main-v2 .manual-card-grid .card:nth-child(2) .carousel-dot:nth-child(3) { left: 227px; }
.front-main-v2 .manual-card-grid .card:nth-child(3) .carousel-dot:nth-child(1) { left: 196.73px; }
.front-main-v2 .manual-card-grid .card:nth-child(3) .carousel-dot:nth-child(2) { left: 204.73px; }
.front-main-v2 .manual-card-grid .card:nth-child(3) .carousel-dot:nth-child(3) { left: 212.73px; }

/* 북마크 아이콘 */
.front-main-v2 .image-shadow {
  border-radius: 25px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: absolute;
  /* [UI-07] 왼쪽 350px 고정이면 카드가 좁아질 때 북마크가 카드 밖으로 나간다.
     오른쪽 기준으로 바꿔 카드 폭과 무관하게 같은 자리에 붙게 한다(428-350=78). */
  right: 78px;
  top: -25px;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);
}
.front-main-v2 .image-fill {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
}
.front-main-v2 .bookmark-icon-wrapper {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0px;
  top: 50%;
  translate: 0 -50%;
  overflow: hidden;
}
.front-main-v2 .icon-card-bookmark {
  height: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: visible;
}

/* 배너 매뉴얼 이미지 */
.front-main-v2 .banner-manual {
  border-radius: 10px 10px 0px 0px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  /* [UI-07] 428x251 고정 → 카드 폭을 따라가되 **비율은 유지**한다.
     고정 높이면 카드가 좁아질 때 사진이 옆으로만 잘려 무슨 그림인지 안 보인다. */
  width: 100%;
  aspect-ratio: 428 / 251;
  height: auto;
  position: relative;
  overflow: hidden;
  object-fit: cover;
}

/* ─── 캐러셀 네비게이션 ─── */
.front-main-v2 .carousel-nav {
  flex-shrink: 0;
  width: 1920px;
  height: 165px;
  position: absolute;
  left: 0;
  top: 542px;
}
.front-main-v2 .carousel-nav--alt {
  top: 0;
}
.front-main-v2 .carousel-btn {
  background: #ffffff;
  border-radius: 25px;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 100.53px;
  left: 14%;
  box-shadow: 0px 9px 10px 0px rgba(0, 0, 0, 0.11);
}
.front-main-v2 .carousel-btn--next {
  left: auto;
  right: 14%;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(-1, 1);
}
.front-main-v2 .img-arrow-prev-blk-svg {
  width: 8px;
  height: 13.44px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: hidden;
}
.front-main-v2 .carousel-arrow-left,
.front-main-v2 .carousel-arrow-right {
  width: 67.97%;
  height: 80.93%;
  position: absolute;
  right: 16.02%;
  left: 16.02%;
  bottom: 9.54%;
  top: 9.54%;
  overflow: visible;
}

/* ─── 디자인M + 경쟁력 래퍼 ─── */
.front-main-v2 .section-designm-competitiveness {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

/* 디자인M 섹션 */
.front-main-v2 .section-designm {
  background: #f5f5f5;
  padding: 120px 0px 120px 0px;
  display: flex;
  flex-direction: column;
  gap: 62px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .designm-header {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .designm-title-group {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .designm-title-outer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .designm-title-inner {
  display: flex;
  flex-direction: column;
  gap: 19px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .designm-title-row {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-end;
  align-self: stretch;
  flex-shrink: 0;
  height: 70px;
  position: relative;
}
.front-main-v2 .section-subtitle {
  color: #060606;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 30px;
  line-height: 70px;
  letter-spacing: -0.88px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.front-main-v2 .underline-wrapper {
  flex-shrink: 0;
  width: 89px;
  height: 12px;
  position: relative;
}
.front-main-v2 .mainpage-style-underline--designm {
  width: 120px;
  height: 15px;
  position: absolute;
  left: -15.5px;
  top: -18.33px;
  overflow: visible;
}
.front-main-v2 .designm-keyword {
  color: #060606;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 30px;
  line-height: 70px;
  letter-spacing: -0.88px;
  font-weight: 700;
  width: 130px;
  position: absolute;
  left: -17px;
  top: -58px;
}
.front-main-v2 .designm-main-heading {
  color: #060606;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 50px;
  line-height: 70px;
  letter-spacing: -0.88px;
  font-weight: 700;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 디자인M 카드 영역 */
.front-main-v2 .designm-cards-area {
  display: flex;
  flex-direction: column;
  gap: 92px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .designm-card-grid {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  flex-shrink: 0;
  width: 100%;
  max-width: 1920px;
  position: relative;
}
.front-main-v2 .designm-card-first {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 315px;
  position: relative;
}
.front-main-v2 .designm-card-featured {
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 315.06px;
  position: relative;
}
.front-main-v2 .designm-card-image-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .banner-designm {
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 234px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
}
.front-main-v2 .designm-card-name-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.front-main-v2 .designm-card-title {
  color: #000000;
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 22px;
  line-height: 28.51px;
  letter-spacing: -0.88px;
  font-weight: 700;
  position: relative;
  max-width: 100%;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.front-main-v2 .designm-card-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .text-clamp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.front-main-v2 .text-clamp .card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
.front-main-v2 .desc-line {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .card-desc {
  color: rgba(0, 0, 0, 0.65);
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  line-height: 21.6px;
  letter-spacing: -0.64px;
  font-weight: 500;
  position: relative;
}
.front-main-v2 .card-desc--line2 {
  margin: -0.41px 0 0 0;
}
.front-main-v2 .tag-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  row-gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .tag-pill {
  background: #ffffff;
  border-radius: 10px;
  padding: 8px 15px 8px 15px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .tag-label {
  color: #4d4d4d;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  letter-spacing: -0.64px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.front-main-v2 .dot-group {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .dot {
  background: #d1d1d1;
  border-radius: 2px;
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  position: relative;
}

/* 디자인M 일반 카드 */
.front-main-v2 .designm-card {
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 315.06px;
  position: relative;
}

/* CTA 버튼들 */
.front-main-v2 .btn-cta-yellow {
  background: #fdb640;
  border-radius: 5px;
  padding: 16px 15px 16px 15px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 267px;
  position: relative;
}
.front-main-v2 .btn-label {
  color: #ffffff;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 20px;
  letter-spacing: -0.64px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── 경쟁력 + 가이드 래퍼 ─── */
.front-main-v2 .section-competitiveness-guide {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

/* 경쟁력 섹션 */
.front-main-v2 .section-competitiveness {
  background: #ffffff;
  padding: 120px 0px 120px 0px;
  display: flex;
  flex-direction: column;
  gap: 72px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: auto;
  position: relative;
}
.front-main-v2 .competitiveness-title-group {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .competitiveness-title-outer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .competitiveness-title-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .competitiveness-title-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-end;
  align-self: stretch;
  flex-shrink: 0;
  height: 70px;
  position: relative;
}
.front-main-v2 .mainpage-style-underline--competitiveness {
  width: 91.44px;
  height: 14.74px;
  position: absolute;
  left: -1px;
  top: -18.33px;
  overflow: visible;
}
.front-main-v2 .competitiveness-keyword {
  color: #060606;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 30px;
  line-height: 70px;
  letter-spacing: -0.88px;
  font-weight: 400;
  width: 100px;
  position: absolute;
  left: 0px;
  top: -58px;
}
.front-main-v2 .section-main-heading {
  color: #060606;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 50px;
  line-height: 70px;
  letter-spacing: -0.88px;
  font-weight: 700;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 경쟁력 카드 영역 */
.front-main-v2 .competitiveness-cards-area {
  display: flex;
  flex-direction: column;
  gap: 87px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .competitiveness-card-grid {
  display: flex;
  flex-direction: row;
  gap: 34px;
  row-gap: 29px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

/* 경쟁력 카드 공통 */
.front-main-v2 .competitiveness-card-1,
.front-main-v2 .competitiveness-card-2,
.front-main-v2 .competitiveness-card-3,
.front-main-v2 .competitiveness-card-4 {
  background: #ffffff;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  width: 651px;
  height: 272px;
  position: relative;
  box-shadow: 6px 6px 20px 0px rgba(0, 0, 0, 0.1);
}
.front-main-v2 .competitiveness-card-1 { padding: 33px 47px 33px 47px; }
.front-main-v2 .competitiveness-card-2 { padding: 55px 45px 55px 45px; }
.front-main-v2 .competitiveness-card-3 { padding: 33px 35px 33px 35px; }
.front-main-v2 .competitiveness-card-4 {
  padding: 52px 66px 52px 66px;
  justify-content: flex-start;
}

/* 경쟁력 카드 내부 행 */
.front-main-v2 .competitiveness-card-row-1 {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .competitiveness-card-row-2 {
  display: flex;
  flex-direction: row;
  gap: 19px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .competitiveness-card-row-3 {
  display: flex;
  flex-direction: row;
  gap: 21px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .competitiveness-card-row-4 {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

/* 경쟁력 카드 이미지 */
.front-main-v2 .image-68-vectorized {
  flex-shrink: 0;
  width: 154px;
  height: 140px;
  position: relative;
  overflow: visible;
}
.front-main-v2 .image-73 {
  flex-shrink: 0;
  width: 164px;
  height: 130px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 164/130;
}
.front-main-v2 .image-71-vectorized {
  flex-shrink: 0;
  width: 170px;
  height: 134px;
  position: relative;
  overflow: visible;
}
.front-main-v2 .image-72 {
  flex-shrink: 0;
  width: 131.45px;
  height: 129.06px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 131.45/129.06;
}

/* 경쟁력 카드 텍스트 */
.front-main-v2 .competitiveness-card-text-1 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 376.89px;
  position: relative;
}
.front-main-v2 .competitiveness-card-text-2 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 315.25px;
  position: relative;
}
.front-main-v2 .competitiveness-card-text-3 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 386.89px;
  position: relative;
}
.front-main-v2 .competitiveness-card-text-4 {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 367.25px;
  position: relative;
}

/* 뱃지 */
.front-main-v2 .badge-dark {
  background: #333333;
  border-radius: 10px;
  padding: 8px 15px 8px 15px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 193px;
  position: relative;
}
.front-main-v2 .badge-highlight {
  color: #fdb640;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  letter-spacing: -0.64px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 경쟁력 카드 설명 */
.front-main-v2 .competitiveness-card-desc-1,
.front-main-v2 .competitiveness-card-desc-2,
.front-main-v2 .competitiveness-card-desc-3,
.front-main-v2 .competitiveness-card-desc-4 {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .feature-heading {
  color: #000000;
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 22px;
  line-height: 28.51px;
  letter-spacing: -0.88px;
  font-weight: 700;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.front-main-v2 .text-clamp-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 95px;
  position: relative;
  overflow: hidden;
}
.front-main-v2 .cost-benefit-text {
  color: rgba(0, 0, 0, 0.65);
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  line-height: 21.6px;
  letter-spacing: -0.64px;
  font-weight: 500;
  position: relative;
  align-self: stretch;
  height: 95.75px;
}
.front-main-v2 .text-clamp-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 59px;
  position: relative;
  overflow: hidden;
}
.front-main-v2 .time-efficiency-text {
  color: rgba(0, 0, 0, 0.65);
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  line-height: 21.6px;
  letter-spacing: -0.64px;
  font-weight: 500;
  position: relative;
  align-self: stretch;
  height: 59.59px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.front-main-v2 .feature-text-source {
  color: rgba(0, 0, 0, 0.65);
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  line-height: 21.6px;
  letter-spacing: -0.64px;
  font-weight: 500;
  position: relative;
  align-self: stretch;
  height: 95.75px;
}
.front-main-v2 .feature-text-mentoring {
  color: rgba(0, 0, 0, 0.65);
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  line-height: 21.6px;
  letter-spacing: -0.64px;
  font-weight: 500;
  position: relative;
  align-self: stretch;
  height: 59.59px;
}

/* ─── 사용 가이드 섹션 ─── */
.front-main-v2 .section-guide {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 577px;
  position: relative;
}
.front-main-v2 .section-bg-guide {
  background: url(/front/img/main/mainpage-banner-designguide.png) center;
  background-size: cover;
  background-repeat: no-repeat;
}
.front-main-v2 .guide-content {
  display: flex;
  flex-direction: column;
  gap: 46px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .guide-header {
  display: flex;
  flex-direction: column;
  gap: 23px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .btn-outline-yellow {
  background: rgba(243, 231, 212, 0);
  border-radius: 60px;
  border-style: solid;
  border-color: #fdb640;
  border-width: 1px;
  padding: 16px 15px 16px 15px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 276px;
  height: 45px;
  position: relative;
}
.front-main-v2 .guide-pill-label {
  color: #fdb640;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  letter-spacing: -0.64px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.front-main-v2 .guide-heading {
  color: #ffffff;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 50px;
  line-height: 70px;
  letter-spacing: -0.88px;
  font-weight: 700;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.front-main-v2 .guide-description {
  color: #aaaaaa;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 25px;
  line-height: 37px;
  letter-spacing: -0.88px;
  font-weight: 400;
  position: relative;
}
.front-main-v2 .guide-buttons-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .guide-button-row {
  display: flex;
  flex-direction: row;
  gap: 21px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .btn-filled-yellow {
  background: #fdb640;
  border-radius: 5px;
  border-style: solid;
  border-color: #fdb640;
  border-width: 2px;
  padding: 16px 15px 16px 15px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 267px;
  position: relative;
}
.front-main-v2 .btn-outline-white {
  background: #ffffff;
  border-radius: 5px;
  border-style: solid;
  border-color: #fdb640;
  border-width: 2px;
  padding: 16px 15px 16px 15px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 267px;
  position: relative;
}
.front-main-v2 .guide-outline-btn-label {
  color: #fdb640;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 20px;
  letter-spacing: -0.64px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── 판매자 혜택 섹션 ─── */
.front-main-v2 .section-seller {
  background: #f5f5f5;
  padding: 0px 0px 120px 0px;
  display: flex;
  flex-direction: column;
  gap: 73px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .seller-content {
  padding: 120px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 55px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .seller-heading {
  color: #060606;
  text-align: center;
  font-family: "Pretendard", sans-serif;
  font-size: 50px;
  line-height: 70px;
  letter-spacing: -0.88px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.front-main-v2 .seller-card-grid {
  display: flex;
  flex-direction: row;
  gap: 33px;
  row-gap: 34px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

/* 판매자 카드 공통 */
.front-main-v2 .seller-card-1 {
  background: #ffffff;
  border-radius: 6px;
  padding: 54px 76px 54px 76px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 651px;
  height: 248px;
  position: relative;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.06);
}
.front-main-v2 .seller-card-row-1 {
  display: flex;
  flex-direction: row;
  gap: 28px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .seller-img {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 1;
}
.front-main-v2 .seller-img--tall {
  height: 145px;
  aspect-ratio: 140/145;
}
.front-main-v2 .seller-card-text-1 {
  display: flex;
  flex-direction: column;
  gap: 17px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 315px;
  position: relative;
}
.front-main-v2 .benefit-title-wrapper {
  align-self: stretch;
  flex-shrink: 0;
  height: 56px;
  position: relative;
  overflow: hidden;
}
.front-main-v2 .seller-profit-title {
  color: #000000;
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 22px;
  line-height: 28.51px;
  letter-spacing: -0.88px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.front-main-v2 .seller-benefit-title {
  color: #000000;
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 22px;
  line-height: 28.51px;
  letter-spacing: -0.88px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.front-main-v2 .seller-benefit-desc {
  color: rgba(0, 0, 0, 0.65);
  text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  line-height: 21.6px;
  letter-spacing: -0.64px;
  font-weight: 500;
  position: relative;
  align-self: stretch;
  height: 59.59px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* 판매자 카드 2 */
.front-main-v2 .seller-card-2 {
  background: #ffffff;
  border-radius: 6px;
  padding: 53px 55px 53px 55px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 653px;
  height: 250px;
  position: relative;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.06);
}
.front-main-v2 .seller-card-row-2 {
  display: flex;
  flex-direction: row;
  gap: 36px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .seller-card-text-2 {
  display: flex;
  flex-direction: column;
  gap: 17px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 315px;
  position: relative;
}

/* 판매자 카드 3 */
.front-main-v2 .seller-card-wrapper-3 {
  padding: 53px 81px 53px 81px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 651px;
  height: 256px;
  position: relative;
}
.front-main-v2 .seller-card-bg-3 {
  background: #ffffff;
  border-radius: 6px;
  flex-shrink: 0;
  width: 651px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  top: 0px;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.06);
}
.front-main-v2 .seller-card-row-3 {
  display: flex;
  flex-direction: row;
  gap: 21px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .seller-card-text-3 {
  display: flex;
  flex-direction: column;
  gap: 17px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 315px;
  position: relative;
}

/* 판매자 카드 4 */
.front-main-v2 .seller-card-4 {
  background: #ffffff;
  border-radius: 6px;
  padding: 54px 65px 54px 65px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 651px;
  height: 256px;
  position: relative;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.06);
}
.front-main-v2 .seller-card-row-4 {
  display: flex;
  flex-direction: row;
  gap: 22px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.front-main-v2 .seller-card-text-4 {
  display: flex;
  flex-direction: column;
  gap: 17px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 315px;
  position: relative;
}

/* 네이비 CTA 버튼 */
.front-main-v2 .btn-cta-navy {
  background: #143980;
  border-radius: 5px;
  padding: 16px 15px 16px 15px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 267px;
  position: relative;
}

/* 데스크톱만 설명서 블록 최소 폭 유지 (기본은 min-width:0으로 모바일 넘침 방지) */
@media (min-width: 1024px) {
  .front-main-v2 .section-manual-content {
    min-width: 466px;
  }
}

/* ═══════════════════════════════
   모바일 미디어 쿼리
   max-width: 1023px
   ═══════════════════════════════ */
@media (max-width: 1023px) {
  .front-main-v2 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .front-main-v2 .page-inner {
    max-width: 700px;
  }

  /* 배너: 모바일 1장씩, 동일 비율 박스 유지 */
  .front-main-v2 .main-hero-swiper .swiper-slide {
    width: 100%;
    max-width: 100%;
  }
  .front-main-v2 .main-hero-swiper .banner-frame {
    width: 100%;
    max-width: 100%;
  }
  .front-main-v2 .banner-carousel {
    align-self: stretch;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  /* 배너 점(페이지네이션): 가운데 정렬, 슬롯 수만큼 bullet */
  .front-main-v2 .main-hero-pagination.swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: static;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 20px;
    transform: none;
    gap: 0;
  }
  .front-main-v2 .main-hero-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    margin: 0 5px;
  }

  /* 캐러셀 화살표 숨김 */
  .front-main-v2 .carousel-nav {
    display: none;
  }

  /* 설명서 카드: 세로 배치 */
  .front-main-v2 .manual-card-grid {
    height: auto;
    overflow: visible;
    flex-direction: column;
    align-items: center;
  }

  /* 설명서 콘텐츠: min-width(466px)·고정 카드(428px)·북마크(left:350px)로 인한 좁은 뷰포트 가로 넘침 방지 */
  .front-main-v2 .section-manual-content {
    padding: 120px 20px 0px 20px;
    height: auto;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .front-main-v2 .manual-card-grid .card,
  .front-main-v2 .manual-card-grid .background-shadow,
  .front-main-v2 .manual-card-grid .banner-manual {
    width: 100%;
    max-width: 428px;
    box-sizing: border-box;
  }
  .front-main-v2 .manual-card-grid .banner-manual {
    height: auto;
    aspect-ratio: 428 / 251;
  }
  .front-main-v2 .manual-card-grid .image-shadow {
    left: auto;
    right: 23px;
  }

  /* 설명서 히어로 제목: 모바일 폰트 축소 (데스크톱 50px/70px) */
  .front-main-v2 .manual-header .hero-heading {
    font-size: 32px;
    line-height: 42px;
    letter-spacing: -0.6px;
  }

  /* 디자인M 메인 헤딩: 설명서 히어로와 동일 스케일 */
  .front-main-v2 .designm-main-heading {
    font-size: 32px;
    line-height: 42px;
    letter-spacing: -0.6px;
  }

  /* 경쟁력 섹션 메인 헤딩: 동일 스케일 */
  .front-main-v2 .section-main-heading {
    font-size: 32px;
    line-height: 42px;
    letter-spacing: -0.6px;
  }

  /* 판매자 섹션 헤딩: 동일 스케일 */
  .front-main-v2 .seller-heading {
    font-size: 32px;
    line-height: 42px;
    letter-spacing: -0.6px;
  }

  /* 디자인M 섹션 */
  .front-main-v2 .section-designm {
    gap: 64px;
    padding: 120px 20px 120px 20px;
    box-sizing: border-box;
  }
  .front-main-v2 .designm-cards-area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .front-main-v2 .designm-card-first,
  .front-main-v2 .designm-card-featured {
    width: 100%;
    max-width: 315px;
    box-sizing: border-box;
  }

  /* 디자인M 카드: 세로 배치 */
  .front-main-v2 .designm-card-grid {
    row-gap: 36px;
  }

  /* 경쟁력 섹션 */
  .front-main-v2 .section-competitiveness {
    height: auto;
    padding: 120px 20px 120px 20px;
    box-sizing: border-box;
  }
  .front-main-v2 .competitiveness-card-grid {
    row-gap: 24px;
  }

  /* 가이드 섹션: 고정 높이(408/648px)로 인해 버튼이 박스 밖으로 밀려 다음 섹션과 겹침 → 유동 높이 */
  .front-main-v2 .section-guide {
    height: auto;
    min-height: 0;
    padding: 32px 20px 48px 20px;
    box-sizing: border-box;
  }
  .front-main-v2 .guide-content {
    height: auto;
    min-height: 0;
  }
  .front-main-v2 .guide-button-row {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  .front-main-v2 .btn-filled-yellow,
  .front-main-v2 .btn-outline-white {
    width: 100%;
    max-width: 280px;
    box-sizing: border-box;
  }

  /* 판매자 섹션 */
  .front-main-v2 .section-seller {
    padding: 120px 20px 120px 20px;
    height: auto;
    box-sizing: border-box;
  }
  .front-main-v2 .seller-content {
    padding: 0;
  }
  .front-main-v2 .seller-card-grid {
    row-gap: 24px;
    justify-content: center;
  }

  /* 판매자 카드 gap 미세 조정 */
  .front-main-v2 .seller-card-row-1 { gap: 9px; }
  .front-main-v2 .seller-card-row-2 { gap: 31px; }
  .front-main-v2 .seller-card-row-3 { gap: 25px; }
  .front-main-v2 .seller-card-row-4 { gap: 30px; }
  .front-main-v2 .seller-card-wrapper-3 { padding: 53px 61px 53px 61px; }
  .front-main-v2 .seller-card-4 { padding: 54px 55px 54px 55px; }

  /* 이미지 크기 미세 조정 */
  .front-main-v2 .image-73 {
    width: 153px;
    height: 122px;
    aspect-ratio: 153/122;
  }
  .front-main-v2 .image-71-vectorized {
    width: 168px;
    height: 132px;
  }
  .front-main-v2 .image-72 {
    width: 137px;
    height: 134px;
    aspect-ratio: 137/134;
  }

  /* 경쟁력 카드 영역(292~409): 모바일 가로폭 축소·카드 유동 폭·세로 스택 */
  .front-main-v2 .competitiveness-cards-area {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0;
    min-width: 0;
  }
  .front-main-v2 .competitiveness-card-grid {
    width: 100%;
    max-width: 100%;
  }
  .front-main-v2 .competitiveness-card-1,
  .front-main-v2 .competitiveness-card-2,
  .front-main-v2 .competitiveness-card-3,
  .front-main-v2 .competitiveness-card-4 {
    width: 100%;
    max-width: 651px;
    height: auto;
    min-width: 0;
    box-sizing: border-box;
  }
  .front-main-v2 .competitiveness-card-1 { padding: 24px 20px; }
  .front-main-v2 .competitiveness-card-2 { padding: 28px 20px; }
  .front-main-v2 .competitiveness-card-3 { padding: 24px 20px; }
  .front-main-v2 .competitiveness-card-4 { padding: 28px 20px; }
  .front-main-v2 .competitiveness-card-row-1,
  .front-main-v2 .competitiveness-card-row-2,
  .front-main-v2 .competitiveness-card-row-3,
  .front-main-v2 .competitiveness-card-row-4 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .front-main-v2 .competitiveness-card-row-1 .image-68-vectorized,
  .front-main-v2 .competitiveness-card-row-2 .image-73,
  .front-main-v2 .competitiveness-card-row-3 .image-71-vectorized,
  .front-main-v2 .competitiveness-card-row-4 .image-72 {
    align-self: center;
  }
  .front-main-v2 .competitiveness-card-text-1,
  .front-main-v2 .competitiveness-card-text-2,
  .front-main-v2 .competitiveness-card-text-3,
  .front-main-v2 .competitiveness-card-text-4 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .front-main-v2 .competitiveness-cards-area .badge-dark {
    width: auto;
    max-width: 100%;
    align-self: flex-start;
  }
  .front-main-v2 .competitiveness-cards-area .btn-cta-yellow {
    width: 100%;
    max-width: 267px;
  }
  .front-main-v2 .competitiveness-cards-area .text-clamp-2,
  .front-main-v2 .competitiveness-cards-area .text-clamp-3 {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .front-main-v2 .competitiveness-cards-area .cost-benefit-text,
  .front-main-v2 .competitiveness-cards-area .time-efficiency-text,
  .front-main-v2 .competitiveness-cards-area .feature-text-source,
  .front-main-v2 .competitiveness-cards-area .feature-text-mentoring {
    height: auto;
    min-height: 0;
  }

  /* 판매자 카드: 651px 고정 폭 해제·세로 스택 (가로 잘림 방지) */
  .front-main-v2 .seller-card-grid {
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .front-main-v2 .seller-card-1,
  .front-main-v2 .seller-card-2,
  .front-main-v2 .seller-card-wrapper-3,
  .front-main-v2 .seller-card-4 {
    width: 100%;
    max-width: 653px;
    height: auto;
    min-width: 0;
    box-sizing: border-box;
  }
  .front-main-v2 .seller-card-bg-3 {
    width: 100%;
  }
  .front-main-v2 .seller-card-1 { padding: 24px 20px; }
  .front-main-v2 .seller-card-2 { padding: 24px 20px; }
  .front-main-v2 .seller-card-wrapper-3 { padding: 24px 20px; }
  .front-main-v2 .seller-card-4 { padding: 24px 20px; }
  .front-main-v2 .seller-card-row-1,
  .front-main-v2 .seller-card-row-2,
  .front-main-v2 .seller-card-row-3,
  .front-main-v2 .seller-card-row-4 {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .front-main-v2 .seller-card-text-1,
  .front-main-v2 .seller-card-text-2,
  .front-main-v2 .seller-card-text-3,
  .front-main-v2 .seller-card-text-4 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .front-main-v2 .seller-card-row-1 .seller-img,
  .front-main-v2 .seller-card-row-2 .seller-img,
  .front-main-v2 .seller-card-row-3 .seller-img,
  .front-main-v2 .seller-card-row-4 .seller-img {
    align-self: center;
  }
  .front-main-v2 .seller-card-grid .text-clamp-3 {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .front-main-v2 .seller-card-grid .seller-benefit-desc {
    height: auto;
    min-height: 0;
  }
}

/* 좁은 모바일: 히어로·메인 헤딩류 한 단계 더 축소 + 좌우 여백 추가 */
@media (max-width: 480px) {
  .front-main-v2 .section-manual-content {
    padding-left: 16px;
    padding-right: 16px;
  }
  .front-main-v2 .section-designm {
    padding-left: 16px;
    padding-right: 16px;
  }
  .front-main-v2 .section-competitiveness {
    padding-left: 16px;
    padding-right: 16px;
  }
  .front-main-v2 .section-seller {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 사용 가이드 섹션: 좁은 폰(≤480px) 타이포·여백·버튼 폭 */
  .front-main-v2 .section-guide {
    padding: 24px 16px 40px 16px;
    box-sizing: border-box;
  }
  .front-main-v2 .guide-content {
    gap: 28px;
  }
  .front-main-v2 .guide-header {
    gap: 16px;
  }
  .front-main-v2 .section-guide .btn-outline-yellow {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 45px;
    padding: 12px 14px;
    box-sizing: border-box;
  }
  .front-main-v2 .guide-pill-label {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.5px;
    white-space: normal;
    text-align: center;
  }
  .front-main-v2 .guide-heading {
    font-size: 26px;
    line-height: 36px;
    letter-spacing: -0.6px;
  }
  .front-main-v2 .guide-description {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.5px;
  }
  .front-main-v2 .guide-button-row {
    gap: 12px;
  }
  .front-main-v2 .guide-buttons-area .btn-filled-yellow,
  .front-main-v2 .guide-buttons-area .btn-outline-white {
    width: 100%;
    max-width: 100%;
    padding: 14px 12px;
    box-sizing: border-box;
  }
  .front-main-v2 .guide-buttons-area .btn-filled-yellow .btn-label {
    font-size: 15px;
    letter-spacing: -0.5px;
  }
  .front-main-v2 .guide-outline-btn-label {
    font-size: 15px;
    letter-spacing: -0.5px;
    line-height: 1.35;
  }

  .front-main-v2 .manual-header .hero-heading {
    font-size: 28px;
    line-height: 38px;
    letter-spacing: -0.5px;
  }
  .front-main-v2 .designm-main-heading {
    font-size: 28px;
    line-height: 38px;
    letter-spacing: -0.5px;
  }
  .front-main-v2 .section-main-heading {
    font-size: 28px;
    line-height: 38px;
    letter-spacing: -0.5px;
  }
  .front-main-v2 .seller-heading {
    font-size: 28px;
    line-height: 38px;
    letter-spacing: -0.5px;
  }
}

/* 태블릿 구간(768px ~ 1023px): 히어로 배너 폭 */
@media (max-width: 1023px) and (min-width: 768px) {
  .front-main-v2 .main-hero-swiper .swiper-slide {
    width: 100%;
    max-width: 100%;
  }
}

/* === MOBILE-TYPOGRAPHY-FIX-20260721 (PubStation) ===
   홈(front-main-v2) 모바일 3대 이슈 교정:
   1) 밑줄 SVG 고정폭 → 키워드 전체 폭으로 (designm '디자인 M' / competitiveness '경쟁력')
   2) 헤딩 한글 단어 중간 줄바꿈 방지 (word-break: keep-all)
   3) designm 카드 내부 콘텐츠 정렬 정돈
*/
@media (max-width: 767px) {

  /* ── 제목행: 부제목+키워드 자연 줄바꿈, 세로간격 축소 ── */
  .front-main-v2 .designm-title-row,
  .front-main-v2 .competitiveness-title-row {
    height: auto;
    gap: 4px 12px;
    align-items: center;
  }

  /* ── 밑줄 래퍼: 절대배치 폭 고정 → 키워드 폭에 맞는 흐름 배치 ── */
  .front-main-v2 .underline-wrapper {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: flex-end;
    position: relative;
  }

  /* ── 키워드: 절대배치 해제, 한 줄 유지, 밑줄 위로 ── */
  .front-main-v2 .designm-keyword,
  .front-main-v2 .competitiveness-keyword {
    position: relative;
    z-index: 1;
    left: auto;
    top: auto;
    width: auto;
    line-height: 1.25;
    white-space: nowrap;
    padding: 0 3px;
  }

  /* ── 밑줄 SVG(단색 막대): 키워드 전체 폭을 덮도록 ── */
  .front-main-v2 .mainpage-style-underline--designm,
  .front-main-v2 .mainpage-style-underline--competitiveness {
    position: absolute;
    z-index: 0;
    left: 0;
    top: auto;
    bottom: 5px;
    width: 100%;
    height: 11px;
  }

  /* ── 부제목: 과대 라인하이트(70px) 정상화 ── */
  .front-main-v2 .section-subtitle {
    line-height: 1.3;
  }

  /* ── 헤딩: 한글 단어가 음절 중간에서 끊기지 않게 ── */
  .front-main-v2 .designm-main-heading,
  .front-main-v2 .section-main-heading,
  .front-main-v2 .seller-heading,
  .front-main-v2 .manual-header .hero-heading {
    word-break: keep-all;
  }

  /* ── designm 카드: 내부 콘텐츠를 가운데로(섹션 리듬 통일) ── */
  .front-main-v2 .designm-card-featured,
  .front-main-v2 .designm-card-image-group,
  .front-main-v2 .designm-card-name-wrapper,
  .front-main-v2 .designm-card-info,
  .front-main-v2 .text-clamp {
    align-items: center;
  }
  .front-main-v2 .designm-card-title {
    text-align: center;
    width: 100%;
  }
  .front-main-v2 .designm-card-info .card-desc,
  .front-main-v2 .text-clamp .card-desc {
    text-align: center;
  }
  .front-main-v2 .designm-card-info .tag-row {
    justify-content: center;
  }

}
/* === /MOBILE-TYPOGRAPHY-FIX-20260721 === */

/* === MAIN-LANDSCAPE-FIX-20260722 (PubStation) — 가로 폰/태블릿(≤1023px) 카드 완전 중앙정렬 + 폭 통일
   결함: 세로 스택 시 카드 "본문(desc)"이 좌측 쏠림.
     (1) flex leaf(.seller-benefit-desc, .time-efficiency-text)가 justify-content:flex-start라 text-align:center 무효
     (2) block leaf(.feature-text-source, .feature-text-mentoring)가 자체 text-align:left라 상속 center를 덮음
   해결: ≤1023 전 구간에서 배지/제목/본문/이미지/버튼을 모두 중앙정렬.
     텍스트 leaf에는 justify-content:center(flex leaf용)와 text-align:center(block leaf용)를 함께 부여
     — 비-flex 요소의 justify-content는 무시되므로 일괄 적용해도 안전. 카드 폭은 651px로 완전 통일. === */
@media (max-width: 1023px) {
  /* 텍스트 컬럼: 세로 스택 + 중앙 */
  .front-main-v2 .competitiveness-card-text-1,
  .front-main-v2 .competitiveness-card-text-2,
  .front-main-v2 .competitiveness-card-text-3,
  .front-main-v2 .competitiveness-card-text-4,
  .front-main-v2 .seller-card-text-1,
  .front-main-v2 .seller-card-text-2,
  .front-main-v2 .seller-card-text-3,
  .front-main-v2 .seller-card-text-4 {
    align-items: center;
    text-align: center;
  }
  .front-main-v2 .competitiveness-card-desc-1,
  .front-main-v2 .competitiveness-card-desc-2,
  .front-main-v2 .competitiveness-card-desc-3,
  .front-main-v2 .competitiveness-card-desc-4 {
    align-items: center;
  }

  /* 배지 · 태그행 중앙 */
  .front-main-v2 .competitiveness-cards-area .badge-dark,
  .front-main-v2 .seller-card-grid .badge-dark { align-self: center; }
  .front-main-v2 .competitiveness-cards-area .tag-row,
  .front-main-v2 .seller-card-grid .tag-row { justify-content: center; }

  /* 이미지 중앙 (row가 column으로 스택될 때) */
  .front-main-v2 .competitiveness-card-row-1 .image-68-vectorized,
  .front-main-v2 .competitiveness-card-row-2 .image-73,
  .front-main-v2 .competitiveness-card-row-3 .image-71-vectorized,
  .front-main-v2 .competitiveness-card-row-4 .image-72,
  .front-main-v2 .seller-card-row-1 .seller-img,
  .front-main-v2 .seller-card-row-2 .seller-img,
  .front-main-v2 .seller-card-row-3 .seller-img,
  .front-main-v2 .seller-card-row-4 .seller-img { align-self: center; }

  /* 모든 텍스트 leaf(제목+본문): flex leaf엔 justify-content, block leaf엔 text-align — 함께 부여 */
  .front-main-v2 .competitiveness-cards-area .feature-heading,
  .front-main-v2 .competitiveness-cards-area .cost-benefit-text,
  .front-main-v2 .competitiveness-cards-area .time-efficiency-text,
  .front-main-v2 .competitiveness-cards-area .feature-text-source,
  .front-main-v2 .competitiveness-cards-area .feature-text-mentoring,
  .front-main-v2 .seller-card-grid .seller-profit-title,
  .front-main-v2 .seller-card-grid .seller-benefit-title,
  .front-main-v2 .seller-card-grid .seller-benefit-desc {
    justify-content: center !important;
    text-align: center !important;
  }

  /* clamp 래퍼 중앙 */
  .front-main-v2 .competitiveness-cards-area .text-clamp-2,
  .front-main-v2 .competitiveness-cards-area .text-clamp-3,
  .front-main-v2 .seller-card-grid .text-clamp,
  .front-main-v2 .seller-card-grid .text-clamp-2,
  .front-main-v2 .seller-card-grid .text-clamp-3 {
    align-items: center;
    text-align: center !important;
  }

  /* CTA 버튼 중앙 폭 제한 */
  .front-main-v2 .competitiveness-cards-area .btn-cta-yellow { align-self: center; }

  /* 카드 폭 완전 통일: 651/653 혼재 → 651 */
  .front-main-v2 .competitiveness-card-1,
  .front-main-v2 .competitiveness-card-2,
  .front-main-v2 .competitiveness-card-3,
  .front-main-v2 .competitiveness-card-4,
  .front-main-v2 .seller-card-1,
  .front-main-v2 .seller-card-2,
  .front-main-v2 .seller-card-wrapper-3,
  .front-main-v2 .seller-card-4 { max-width: 651px !important; }
  .front-main-v2 .seller-card-bg-3 { max-width: 651px !important; }

  /* 카드3 전용: .seller-card-row-3에 align-self:stretch가 없어(카드4엔 있음) 세로스택 시 row가
     풀폭으로 안 늘어나 텍스트 컬럼(.seller-card-text-3)이 268px로 좁게 좌측 몰림 → 풀폭+중앙 */
  .front-main-v2 .seller-card-wrapper-3 { align-items: center; }
  .front-main-v2 .seller-card-row-3 { align-self: stretch; width: 100%; align-items: center; }
  .front-main-v2 .seller-card-text-3 { width: 100% !important; align-items: center; }

  /* 한글 음절 중간 줄바꿈 방지 */
  .front-main-v2 .competitiveness-cards-area .feature-heading,
  .front-main-v2 .competitiveness-cards-area .cost-benefit-text,
  .front-main-v2 .competitiveness-cards-area .time-efficiency-text,
  .front-main-v2 .competitiveness-cards-area .feature-text-source,
  .front-main-v2 .competitiveness-cards-area .feature-text-mentoring,
  .front-main-v2 .seller-card-grid .seller-profit-title,
  .front-main-v2 .seller-card-grid .seller-benefit-title,
  .front-main-v2 .seller-card-grid .seller-benefit-desc,
  .front-main-v2 .section-main-heading,
  .front-main-v2 .designm-main-heading,
  .front-main-v2 .seller-heading {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}
/* === /MAIN-LANDSCAPE-FIX-20260722 === */

/* === MAIN-UNDERLINE-LANDSCAPE-FIX-20260722 (PubStation) — 가로 폰/태블릿(768~1023px) 키워드 밑줄/헤딩 겹침
   원인: MOBILE-TYPOGRAPHY-FIX(≤767)의 "밑줄 흐름배치(키워드 절대배치 해제 + 밑줄 width:100%)"가
        768~1023엔 없어, 데스크톱 절대배치 밑줄(고정폭)이 키워드/헤딩과 겹침.
   해결: ≤767과 동일한 흐름배치를 이 구간에 확장(designm '디자인 M' · competitiveness '경쟁력' 공통). === */
@media (min-width: 768px) and (max-width: 1023px) {
  .front-main-v2 .designm-title-row,
  .front-main-v2 .competitiveness-title-row {
    height: auto;
    gap: 4px 12px;
    align-items: center;
  }
  .front-main-v2 .underline-wrapper {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: flex-end;
    position: relative;
  }
  .front-main-v2 .designm-keyword,
  .front-main-v2 .competitiveness-keyword {
    position: relative;
    z-index: 1;
    left: auto;
    top: auto;
    width: auto;
    line-height: 1.25;
    white-space: nowrap;
    padding: 0 3px;
  }
  .front-main-v2 .mainpage-style-underline--designm,
  .front-main-v2 .mainpage-style-underline--competitiveness {
    position: absolute;
    z-index: 0;
    left: 0;
    top: auto;
    bottom: 5px;
    width: 100%;
    height: 11px;
  }
}
/* === /MAIN-UNDERLINE-LANDSCAPE-FIX-20260722 === */

/* === MAIN-CARD-FIGMA-LAYOUT-20260728 (PubStation) — 경쟁력 카드 배치를 디자인 원안에 맞춤
   근거: 260722_걱정마디자인_최종본.fig / 홈페이지_메인 / **Mobile(700w)** 프레임
     경쟁력 섹션 700x1303 · 카드 651x272 를 1열로 · 카드 내부는 HORIZONTAL
     (아이콘 154 왼쪽 | 카피 377 오른쪽, Frame 242 = 557x184)
     PC 프레임 카드와 guid 가 다르다(1,7022 vs 1,7513) → 복붙이 아니라 모바일용 배치가 실재한다.
   경위: e33bf72(2026-03-26, 이전 개발사)가 ≤1023 을 flex-direction:column 으로 만들었고,
     MAIN-LANDSCAPE-FIX-20260722 는 그 세로 배치를 전제로 중앙정렬만 얹었다(원안 대조 누락).
   발주처 결정(2026-07-28): PC·태블릿=가로 배치 / 모바일=세로 유지 + 카피 정리.

   ★ 선택자 앞의 `body` 는 오타가 아니다.
     MAIN-LANDSCAPE-FIX 가 text-align:center !important 를 쓰기 때문에 명시도가 같으면
     선언 순서에 따라 이겼다 졌다 한다(실제로 align-items 만 먹고 text-align 은 안 먹었다).
     `body` 한 단계로 명시도를 올려 순서에 기대지 않게 한다. === */

/* ── 전 폭 공통: 한글 단어가 음절 중간에서 끊기지 않게 ──
   dwd_default.css:149 에 **전역** word-break:break-all 이 있다(최초 이관본부터).
   MAIN-LANDSCAPE-FIX-20260722 에서 keep-all 로 막았지만 그 블록은 max-width:1023 이라
   PC·노트북(≥1024)에는 적용되지 않았다 → 1280px 에서 "이제 단 3일 / 이면 충분합니다" 처럼
   단어 중간에서 끊긴다(발주처 UI-04 s10 "텍스트 정리가 문제네요" 와 같은 원인).
   overflow-wrap 을 함께 주는 이유: keep-all 만 걸면 긴 영문·URL 이 카드를 넘친다. */
body .front-main-v2 .competitiveness-cards-area .feature-heading,
body .front-main-v2 .competitiveness-cards-area .cost-benefit-text,
body .front-main-v2 .competitiveness-cards-area .time-efficiency-text,
body .front-main-v2 .competitiveness-cards-area .feature-text-source,
body .front-main-v2 .competitiveness-cards-area .feature-text-mentoring,
body .front-main-v2 .competitiveness-cards-area .badge-highlight {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ── 태블릿(700~1023): 디자인 원안대로 아이콘 왼쪽 · 카피 오른쪽 ── */
@media (min-width: 700px) and (max-width: 1023px) {
  body .front-main-v2 .competitiveness-card-row-1,
  body .front-main-v2 .competitiveness-card-row-2,
  body .front-main-v2 .competitiveness-card-row-3,
  body .front-main-v2 .competitiveness-card-row-4 {
    flex-direction: row !important;
    align-items: center !important;
    gap: 26px !important;
  }
  body .front-main-v2 .competitiveness-cards-area .image-68-vectorized,
  body .front-main-v2 .competitiveness-cards-area .image-73,
  body .front-main-v2 .competitiveness-cards-area .image-71-vectorized,
  body .front-main-v2 .competitiveness-cards-area .image-72 {
    align-self: center !important;
    flex: 0 0 154px !important;      /* 원안 아이콘 폭 154 */
    width: 154px !important;
    height: auto !important;
  }
  body .front-main-v2 .competitiveness-card-text-1,
  body .front-main-v2 .competitiveness-card-text-2,
  body .front-main-v2 .competitiveness-card-text-3,
  body .front-main-v2 .competitiveness-card-text-4 {
    align-items: flex-start !important;
    text-align: left !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;         /* 없으면 flex 자식이 안 줄어 카드를 밀어낸다 */
  }
  body .front-main-v2 .competitiveness-card-desc-1,
  body .front-main-v2 .competitiveness-card-desc-2,
  body .front-main-v2 .competitiveness-card-desc-3,
  body .front-main-v2 .competitiveness-card-desc-4 { align-items: flex-start !important; }

  body .front-main-v2 .competitiveness-cards-area .badge-dark { align-self: flex-start !important; }
  body .front-main-v2 .competitiveness-cards-area .tag-row { justify-content: flex-start !important; }

  body .front-main-v2 .competitiveness-cards-area .feature-heading,
  body .front-main-v2 .competitiveness-cards-area .cost-benefit-text,
  body .front-main-v2 .competitiveness-cards-area .time-efficiency-text,
  body .front-main-v2 .competitiveness-cards-area .feature-text-source,
  body .front-main-v2 .competitiveness-cards-area .feature-text-mentoring {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  body .front-main-v2 .competitiveness-cards-area .text-clamp-2,
  body .front-main-v2 .competitiveness-cards-area .text-clamp-3 {
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* 카피 폭이 651 → 431 로 좁아진다. PC(1460) 기준으로 박아 둔 고정 줄바꿈은 여기서 해제해야 한다. */
  body .front-main-v2 .competitiveness-cards-area .cost-benefit-text br,
  body .front-main-v2 .competitiveness-cards-area .time-efficiency-text br,
  body .front-main-v2 .competitiveness-cards-area .feature-text-source br,
  body .front-main-v2 .competitiveness-cards-area .feature-text-mentoring br { display: none; }
}

/* ── 모바일(≤699): 아이콘·카피를 나란히 놓을 폭이 안 나온다(피그마에도 이 폭 시안 없음).
      세로 적층은 유지하고, 화면 폭과 안 맞는 고정 줄바꿈만 푼다. ── */
@media (max-width: 699px) {
  body .front-main-v2 .competitiveness-cards-area .cost-benefit-text br,
  body .front-main-v2 .competitiveness-cards-area .time-efficiency-text br,
  body .front-main-v2 .competitiveness-cards-area .feature-text-source br,
  body .front-main-v2 .competitiveness-cards-area .feature-text-mentoring br { display: none; }

  body .front-main-v2 .competitiveness-cards-area .cost-benefit-text,
  body .front-main-v2 .competitiveness-cards-area .time-efficiency-text,
  body .front-main-v2 .competitiveness-cards-area .feature-text-source,
  body .front-main-v2 .competitiveness-cards-area .feature-text-mentoring {
    max-width: 30em;                 /* 한 줄 30자 안팎 — 480~699 구간에서 줄이 너무 길어지는 것 방지 */
    margin-left: auto;
    margin-right: auto;
    text-wrap: pretty;               /* 마지막 줄에 한 단어만 남는 것 완화 (미지원 브라우저는 무시) */
  }
  body .front-main-v2 .competitiveness-cards-area .feature-heading { text-wrap: balance; }
}
/* === /MAIN-CARD-FIGMA-LAYOUT-20260728 === */

/* ═══════════════════════════════════════════════════════════════════════
   [REC-04] 추천 rows — 가로 스크롤 rail
   ★ Swiper 를 쓰지 않는다. L39(animating 갇힘)는 loop 전용 함정인데
     추천 행은 loop 를 쓰면 안 된다(끝이 있다는 게 정보다).
     loop 없는 Swiper 는 네이티브 스크롤보다 나은 게 없고, 터치 관성·Tab 이동은 오히려 네이티브가 낫다.
   ★ 클래스 접두 rec- 고정. 이 파일의 .card(428px 고정) · .icon(주황 마름모) ·
     .carousel-btn(width:1920px 절대배치) 은 이름이 일반적인데 값이 특수하다. 재사용 금지.
   ══════════════════════════════════════════════════════════════════════ */
.front-main-v2 .section-recrails {
  background: #f5f5f5;          /* .section-designm 과 같은 회색 — 아래 섹션과 한 덩어리로 읽히게 */
  padding: 60px 0 0;            /* 하단 0 — 아래 .section-designm 의 상단 120 이 받는다 */
  width: 100%;
  box-sizing: border-box;
  position: relative;
}
.front-main-v2 .recrails-inner {
  width: 100%;
  max-width: 1332px;            /* 설명서 428×3+24×2 · 디자인M 315×4+24×3 과 동일 */
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* [2026-08-11] 56 → 40 → 36. 발주처 「3행 간격이 넓다」 → 「조금만 더」.
     ★ 눈에 보이는 행간은 이 값이 아니다 — 여기 36 + .rec-track 세로 패딩 6
       + 위 카드 meta 하프리딩 2.6 + 아래 제목 하프리딩 4.2 ≈ 49px 다(원래 69px).
     ★ 56 은 이 페이지의 「섹션 내 대분할」 밴드(55~92) 바닥이었다. 3행은 같은 섹션의
       반복 형제라 그보다 한 단계 아래여야 한다. 36 은 그룹 밴드(19~36)의 천장.
     ★ 여기만 줄이면 안 된다 — 아래 .rec-row 10 과 세트다. 이유는 그쪽 주석.
     ★ 여기가 하한이다. 더 줄이면 행이 리스트 항목처럼 읽히기 시작하고,
       spaceRows 가 가변이라 공간 행이 늘면 4~5행이 이어져 벽이 된다. */
  gap: 36px;
}
.front-main-v2 .rec-row {
  display: flex;
  flex-direction: column;
  /* [2026-08-11] 14 → 10. ★ 이 한 줄이 위 36px 축소의 안전장치다.
     행 바깥(실효 49) : 행 안쪽(실효 19) 비율이 근접성 경계를 만든다.
     바깥만 56→36 으로 줄이면 이 비가 3.0 → 1.6 으로 떨어져 3행이 한 덩어리로 뭉친다.
     안쪽을 같이 조여야 2.5 로 유지된다(경계 유지 하한은 약 2.0).
     ★ 되돌릴 때도 둘을 같이 되돌릴 것. 여기만 14 로 되돌리면 행이 도로 헐거워진다. */
  gap: 10px;
  min-width: 0;                 /* 없으면 flex 자식이 트랙 폭을 밀어낸다 */
}
.front-main-v2 .rec-row[hidden] { display: none; }   /* [hidden] 은 display:flex 에 진다 */

.front-main-v2 .rec-row-head {
  display: flex; flex-direction: row; align-items: flex-end;
  justify-content: space-between; gap: 16px; min-width: 0;
}
/* [2026-08-11] 6 → 4. 제목-이유가 한 쌍으로 붙어야 「행의 시작점」으로 읽힌다.
   행간을 줄인 만큼 시작점이 또렷해야 경계가 산다. */
.front-main-v2 .rec-row-titlebox { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* ★ pill + 50px 중앙정렬 헤딩을 쓰지 않는다.
   페이지의 나머지는 "읽는" 곳이고 rows 는 "고르는" 곳이다.
   좌측정렬 24px 대비 자체가 정보 구조다. */
.front-main-v2 .rec-row-title {
  margin: 0; color: #060606; text-align: left;
  font-family: "Pretendard", sans-serif;
  font-size: 24px; line-height: 1.35; letter-spacing: -0.96px; font-weight: 700;
  word-break: keep-all;         /* dwd_default.css 의 전역 break-all 을 덮는다 */
  overflow-wrap: anywhere;      /* keep-all 만 주면 긴 영문·URL 이 넘친다 */
}
.front-main-v2 .rec-row-reason {
  margin: 0; color: #8b8b8b;
  font-family: "Pretendard", sans-serif;
  font-size: 13px; line-height: 1.5; letter-spacing: -0.4px; font-weight: 400;
  word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.front-main-v2 .rec-row-reason:empty { display: none; }

.front-main-v2 .rec-row-tools { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-shrink: 0; }

/* 더 보기 — 노란 버튼을 쓰지 않는다.
   앰버(#fdb640)는 이 페이지에서 "행동" 색이고, 행 더보기는 행동이 아니라 탐색이다.
   한 화면에 노란 CTA 가 이미 여럿이다. */
.front-main-v2 .rec-more {
  display: inline-flex; align-items: center; gap: 6px;
  color: #4d4d4d; font-family: "Pretendard", sans-serif;
  font-size: 15px; letter-spacing: -0.5px; font-weight: 700;
  text-decoration: none; white-space: nowrap; transition: color 0.15s ease;
}
.front-main-v2 .rec-more:hover  { color: #060606; }
.front-main-v2 .rec-more:visited{ color: #4d4d4d; }
.front-main-v2 .rec-more:focus-visible { outline: 2px solid #fdb640; outline-offset: 2px; border-radius: 3px; }
.front-main-v2 .rec-more-ico {
  width: 6px; height: 6px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); transition: margin-left 0.15s ease;
}
.front-main-v2 .rec-more:hover .rec-more-ico { margin-left: 3px; }

.front-main-v2 .rec-ctrl[disabled] { opacity: 0.35; cursor: default; border-color: #e6e6e6; }
.front-main-v2 .rec-ctrl[disabled]:hover { border-color: #e6e6e6; background: #ffffff; }

/* ── 트랙: 네이티브 가로 스크롤 ─────────────────────────────────────
   ★ margin -16 / padding 16 으로 부모 여백을 "되먹어" 카드가 가장자리까지 흐른다.
     ≤1023 에서 .front-main-v2 에 overflow-x:hidden 이 걸려 있으므로
     100vw 같은 full-bleed 는 쓰지 않는다 — 정확히 부모 padding 만큼만 되먹는다.
   ★ padding-block 6px: overflow-x:auto 는 세로축을 auto 로 만든다.
     포커스 링(outline 2px + offset 2px)이 잘리거나 세로 스크롤바가 생기는 걸 막는다.
   ★ scroll-snap 은 proximity. mandatory 는 JS scrollBy 와 보정이 겹쳐 튄다. */
.front-main-v2 .rec-track {
  display: flex; flex-direction: row; gap: 24px;
  margin: 0 -16px; padding: 6px 16px;
  list-style: none;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; scroll-snap-type: x proximity; scroll-padding-inline: 16px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; box-sizing: border-box;
}
.front-main-v2 .rec-track::-webkit-scrollbar { display: none; }

.front-main-v2 .rec-item { flex: 0 0 auto; width: 272px; scroll-snap-align: start; scroll-margin-inline: 16px; min-width: 0; }

.front-main-v2 .rec-card { display: flex; flex-direction: column; gap: 12px; width: 100%; text-decoration: none; color: inherit; }
.front-main-v2 .rec-card:visited { color: inherit; }
.front-main-v2 .rec-card:focus-visible { outline: 2px solid #fdb640; outline-offset: 2px; border-radius: 8px; }

.front-main-v2 .rec-card-thumb {
  position: relative; width: 100%;
  aspect-ratio: 4 / 3;          /* 272×204 — 디자인M 315×234(1.346)에 가장 가깝다 */
  border-radius: 6px; overflow: hidden; background: #ececec;
}
.front-main-v2 .rec-card-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center; transition: transform 0.2s ease-out;
}
/* 호버는 "이미지 확대" — 이 저장소의 기존 호버 언어.
   카드를 translateY 로 띄우면 overflow-x:auto 컨테이너에서 잘리거나 세로 스크롤바를 만든다. */
.front-main-v2 .rec-card:hover .rec-card-img,
.front-main-v2 .rec-card:focus-visible .rec-card-img { transform: scale(1.04); }

/* 유료 잠금 — 목록의 .model-cover 와 같은 뜻, rail 크기에 맞춘 축소판 */
.front-main-v2 .rec-card-lock {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.72);
}

/* ★ [2026-08-02 수정] 1줄 nowrap 을 2줄 clamp 로 바꾼다.
   dev 실측: 발행 콘텐츠 제목 상당수가 「"헌집줄게 새집다오" …」로 시작한다.
   1줄이면 이 공통 접두사가 폭을 다 먹고 **구분되는 뒷부분이 잘려** 카드끼리 분간이 안 됐다
   (예: 「"헌집줄게 새집다오" 샤워부스와 욕조가 있…」).
   높이가 흔들릴까 봐 1줄로 뒀던 건데, min-height 로 2줄분을 예약하면 그 걱정은 없어진다. */
.front-main-v2 .rec-card-title {
  margin: 0; color: #060606; font-family: "Pretendard", sans-serif;
  font-size: 16px; line-height: 1.35; letter-spacing: -0.64px; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  min-height: calc(16px * 1.35 * 2);   /* 2줄분 예약 — 1줄짜리 제목이 섞여도 카드 높이가 같다 */
  word-break: keep-all;                /* dwd_default.css 의 전역 break-all 을 덮는다 */
  overflow-wrap: anywhere;             /* keep-all 만 주면 긴 영문·URL 이 넘친다 */
}
/* ★ meta 는 값이 없는 행이 있다(맞춤 행에는 카테고리명이 안 붙는다).
   :empty 로 숨기면 그 카드만 높이가 줄어 rail 이 울퉁불퉁해진다 → **자리를 항상 예약**한다. */
.front-main-v2 .rec-card-meta {
  margin: -4px 0 0; color: #8b8b8b; font-family: "Pretendard", sans-serif;
  font-size: 13px; line-height: 1.4; letter-spacing: -0.4px; font-weight: 400;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-height: calc(13px * 1.4);
}

/* 스켈레톤 — 빈 채로 뒀다가 채우면 섹션 높이가 갑자기 늘어 아래가 밀린다(CLS) */
.front-main-v2 .rec-skel-thumb { width: 100%; aspect-ratio: 4/3; border-radius: 6px; background: #e6e6e6; animation: recSkelPulse 1.5s ease-in-out infinite; }
.front-main-v2 .rec-skel-line  { height: 14px; border-radius: 3px; background: #e6e6e6; animation: recSkelPulse 1.5s ease-in-out infinite; }
.front-main-v2 .rec-skel-line--short { width: 55%; height: 11px; }
@keyframes recSkelPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* rail 카드에서 NEW 뱃지는 목록보다 작게. 색·모서리·위치는 재선언하지 않는다(재선언하면 목록과 갈라진다) */
.front-main-v2 .rec-card-thumb .new-badge { font-size: 13px; padding: 4px 9px; }

@media (max-width: 1023px) {
  .front-main-v2 .section-recrails { padding: 48px 0 0; }
  /* [2026-08-11] 44 → 28. ★ 데스크톱만 내리고 여기를 44 로 두면
     태블릿이 데스크톱보다 넓어지는 역전이 생긴다. 3단을 같이 내린다. */
  .front-main-v2 .recrails-inner   { padding: 0 20px; gap: 28px; }
  .front-main-v2 .rec-track        { margin: 0 -20px; padding: 6px 20px; scroll-padding-inline: 20px; gap: 20px; }
  .front-main-v2 .rec-item         { width: 240px; scroll-margin-inline: 20px; }
  .front-main-v2 .rec-ctrl         { display: none; }   /* 터치 스크롤이 있다. 화살표는 소음 */
}
@media (max-width: 767px) {
  .front-main-v2 .rec-row-title { font-size: 20px; letter-spacing: -0.8px; }
  .front-main-v2 .rec-track     { gap: 16px; }
  .front-main-v2 .rec-item      { width: 200px; }
  .front-main-v2 .rec-more      { font-size: 14px; }
}
@media (max-width: 480px) {
  .front-main-v2 .recrails-inner { padding: 0 16px; gap: 24px; }   /* [2026-08-11] 36 → 24 */
  .front-main-v2 .rec-row        { gap: 8px; }                     /* [2026-08-11] 신규 — 위 26 과 세트 */
  .front-main-v2 .rec-track      { margin: 0 -16px; padding: 6px 16px; scroll-padding-inline: 16px; }
  .front-main-v2 .rec-item       { scroll-margin-inline: 16px; }
}
/* 320px 검산: 320 − 16×2 = 288. 카드 168 + gap 12 → 2번째 카드 108px peek.
   트랙 자체가 스크롤 컨테이너라 페이지 가로스크롤은 구조적으로 불가능하다. */
@media (max-width: 360px) {
  .front-main-v2 .rec-track { gap: 12px; }
  .front-main-v2 .rec-item  { width: 168px; }
}
@media (prefers-reduced-motion: reduce) {
  .front-main-v2 .rec-track    { scroll-behavior: auto; }
  .front-main-v2 .rec-card-img { transition: none; }
  .front-main-v2 .rec-card:hover .rec-card-img,
  .front-main-v2 .rec-card:focus-visible .rec-card-img { transform: none; }
  .front-main-v2 .rec-more-ico { transition: none; }
  .front-main-v2 .rec-skel-thumb, .front-main-v2 .rec-skel-line { animation: none; }
}