/**
 * HS Product Story — v2 스킨
 *
 * 값은 전부 피그마 디자인 시스템에서 가져왔다 (2026-08).
 *   색     Color 프레임 — 분야 7종 × (다크 / 배경띠 / 포인트)
 *   글자   Typography 프레임 — Pretendard
 *   간격   폭 1100 · 좌우 여백 PC 40 / 모바일 12 (피그마 25 → 좁아 보여 줄임) · 섹션 상하 80 · 모서리 16
 *
 * 겉 껍데기(.hs-product-story / __container)는 skins.php 가 모든 스킨에 공통으로 그린다.
 * 관리자 미리보기에서는 클래식 CSS 도 같이 로드되므로,
 * 껍데기 규칙은 반드시 스킨 클래스로 한정한다.
 */

.hs-product-story--skin-v2 {
  /* ── 분야 색. 기본은 요리·과학·AI ── */
  --hs-v2-dark: #2e374c;
  --hs-v2-band: #e8edf8;
  --hs-v2-point: #4376ee;

  /* ── 분야와 무관한 색 (피그마 값 그대로) ── */
  --hs-v2-bg: #ffffff;
  --hs-v2-tint: #fbfaff;        /* 칩 · 후기 카드가 번갈아 쓰는 아주 옅은 면 */
  --hs-v2-chip-badge: #f7f6fc;  /* 상단 영문 줄 배지 */
  --hs-v2-ink: #12111a;         /* 큰 제목 */
  --hs-v2-text: #1a1a1a;        /* 본문 */
  --hs-v2-muted: #5a5870;       /* 제목 아래 설명 */
  --hs-v2-ink-soft: #53576b;    /* 학년별 카드 글자 */
  --hs-v2-faint: #aaaaaa;       /* 작성자 같은 흐린 글자 */
  --hs-v2-kicker-ink: #626262;
  --hs-v2-line: #ebebf0;
  --hs-v2-line-soft: #eeedf4;
  --hs-v2-on-dark: #ffffff;
  --hs-v2-on-dark-muted: rgba(255, 255, 255, 0.8);

  /* ── 모양 ── */
  --hs-v2-radius-sm: 6px;
  --hs-v2-radius: 16px;
  --hs-v2-radius-lg: 24px;
  --hs-v2-radius-pill: 999px;

  /* ── 간격 ── */
  --hs-v2-width: 1100px;
  --hs-v2-gutter: 40px;
  --hs-v2-section-pad: 80px;
  --hs-v2-head-gap: 40px;

  /* ── 글자 ── */
  --hs-v2-font: "Pretendard", "Pretendard Variable", "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  --hs-v2-h1: 56px;
  --hs-v2-h1-lh: 72px;
  --hs-v2-h2: 32px;
  --hs-v2-h2-lh: 48px;
  --hs-v2-h3: 24px;
  --hs-v2-h3-lh: 32px;
  --hs-v2-h4: 18px;
  --hs-v2-h4-lh: 26px;
  --hs-v2-body: 16px;
  --hs-v2-body-lh: 28px;
  --hs-v2-small: 14px;
  --hs-v2-small-lh: 24px;
  --hs-v2-tiny: 12px;
  --hs-v2-tiny-lh: 16px;

  padding: 0 var(--hs-v2-gutter);
  background: var(--hs-v2-bg);
  color: var(--hs-v2-text);
  font-family: var(--hs-v2-font);
  font-size: var(--hs-v2-body);
  letter-spacing: -0.6px;
  line-height: 1.6;

  /* 첫 화면·배경 띠가 화면 끝까지 나가므로, 밖으로 삐져나간 만큼은 잘라 낸다 */
  overflow-x: hidden;
  overflow-x: clip;
}

/* ─────────────────────────────────────────────
   분야별 색 7종
   ─────────────────────────────────────────────
   상품 분류를 보고 자동으로, 또는 상품에서 손으로 고른다.
   바뀌는 것은 이 세 줄뿐이다. */

.hs-product-story--skin-v2.hs-product-story--design {
  --hs-v2-dark: #4c382e;
  --hs-v2-band: #f8f3e8;
  --hs-v2-point: #ffc642;
}

.hs-product-story--skin-v2.hs-product-story--science {
  --hs-v2-dark: #2e374c;
  --hs-v2-band: #e8edf8;
  --hs-v2-point: #4376ee;
}

.hs-product-story--skin-v2.hs-product-story--beauty {
  --hs-v2-dark: #4c2e36;
  --hs-v2-band: #f8e8ec;
  --hs-v2-point: #ee4371;
}

.hs-product-story--skin-v2.hs-product-story--garden {
  --hs-v2-dark: #404c2e;
  --hs-v2-band: #f2f8e8;
  --hs-v2-point: #aaee43;
}

.hs-product-story--skin-v2.hs-product-story--culture {
  --hs-v2-dark: #2e2e4c;
  --hs-v2-band: #e8e8f8;
  --hs-v2-point: #4343ee;
}

.hs-product-story--skin-v2.hs-product-story--economy {
  --hs-v2-dark: #3e2e4c;
  --hs-v2-band: #f1e8f8;
  --hs-v2-point: #9e43ee;
}

.hs-product-story--skin-v2.hs-product-story--history {
  --hs-v2-dark: #4c362e;
  --hs-v2-band: #f8ece8;
  --hs-v2-point: #ee7143;
}

.hs-product-story--skin-v2,
.hs-product-story--skin-v2 * {
  box-sizing: border-box;
}

/*
 * ⚠️ 여기에 width 를 다시 넣지 말 것.
 *
 * 이 선택자는 클래스 1 + 태그 1 이라 .hs-v2-cta__phone 같은
 * 클래스 하나짜리 아이콘 규칙을 이긴다. 예전에 width:100% 가 있었고,
 * 그래서 16px 짜리 전화 아이콘이 버튼을 가득 채우고 옆 글자를 0px 로
 * 밀어 버렸다 — 첫 화면 말풍선과 예약 버튼 글자가 세로로 서 있던 이유다.
 *
 * 칸을 채워야 하는 사진들(.hs-v2-photo__img · .hs-v2-result__img …)은
 * 저마다 width:100%; height:100% 를 이미 갖고 있으므로 여기서는 안 건다.
 */
.hs-product-story--skin-v2 img {
  display: block;
  max-width: 100%;
}

.hs-product-story--skin-v2 .hs-product-story__container {
  width: min(var(--hs-v2-width), 100%);
  margin: 0 auto;
}

/* ─────────────────────────────────────────────
   섹션 뼈대
   ───────────────────────────────────────────── */

/*
 * 좌우 여백은 **1100 칸 안쪽**에 둔다 → 본문은 1020 이 된다.
 * 피그마가 그렇게 짜여 있다 (페이지 1100, 섹션마다 pLeft/pRight 40).
 *
 * 예전에는 여백이 1100 칸 바깥에 있어 본문이 1100 이었다.
 * 그런데 배경 띠가 깔린 섹션은 화면 끝까지 늘렸다 다시 접느라 우연히 1020 이 나와서,
 * 같은 페이지 안에서 카드 폭이 섹션마다 27px 씩 달랐다.
 */
.hs-v2-section {
  padding: var(--hs-v2-section-pad) var(--hs-v2-gutter);
}

/**
 * 배경이 깔리는 섹션은 배경만 화면 끝까지 나간다.
 * 글은 그대로 가운데 칸에 맞춰 둬야 위아래 섹션과 왼쪽 줄이 맞는다.
 */
.hs-v2-section--alt {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + var(--hs-v2-gutter));
  padding-right: calc(50vw - 50% + var(--hs-v2-gutter));
  background: var(--hs-v2-band);
}

/*
 * 같은 색 섹션이 이어져도 각 제목의 80px 위 여백은 유지한다.
 * 문서와 FAQ는 같은 배경을 쓰지만 Figma에서는 서로 독립된 섹션이다.
 */

/* 교과 연계와 진로 영역 사이의 원본 Figma 전환 장식 */
.hs-v2-career-transition {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  height: 87px;
  padding-bottom: 16px;
  background: var(--hs-v2-band);
}

.hs-v2-career-transition span {
  display: block;
  width: min(377px, 100%);
  height: 71px;
  margin: 0 auto;
  background: url("./assets/career-transition.svg") center / 100% 100% no-repeat;
  transform: rotate(180deg);
}

/* 진로 섹션은 단색 띠가 아니라 위에서 아래로 사라지는 배경이다. */
.hs-v2-section--career {
  position: relative;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-top: calc(var(--hs-v2-section-pad) + 87px);
  padding-right: calc(50vw - 50% + var(--hs-v2-gutter));
  padding-left: calc(50vw - 50% + var(--hs-v2-gutter));
  background: linear-gradient(180deg, var(--hs-v2-band) 31.316%, transparent 100%);
  background: linear-gradient(180deg, var(--hs-v2-band) 31.316%, color-mix(in srgb, var(--hs-v2-band) 0%, transparent) 100%);
}

.hs-v2-head {
  margin: 0 0 var(--hs-v2-head-gap);
  text-align: center;
}

/**
 * 상단 영문 줄은 글자가 아니라 **알약 배지**다.
 * 띠가 깔린 섹션에서는 배지가 흰색이 된다 — 안 그러면 배경에 묻힌다.
 */
.hs-v2-kicker {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 9px;
  border-radius: var(--hs-v2-radius-pill);
  background: var(--hs-v2-chip-badge);
  color: var(--hs-v2-kicker-ink);
  font-size: var(--hs-v2-tiny);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--hs-v2-tiny-lh);
}

.hs-v2-section--alt .hs-v2-kicker {
  background: var(--hs-v2-bg);
}

.hs-v2-head__title {
  margin: 0;
  color: var(--hs-v2-ink);
  font-size: var(--hs-v2-h2);
  font-weight: 800;
  letter-spacing: -0.32px;
  line-height: var(--hs-v2-h2-lh);
}

.hs-v2-head__desc {
  max-width: 720px;
  margin: 8px auto 0;
  color: var(--hs-v2-muted);
  font-size: var(--hs-v2-body);
  letter-spacing: -0.6px;
  line-height: var(--hs-v2-body-lh);
}

.hs-v2-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 140px;
  background: repeating-linear-gradient(-45deg, #f4f4f4, #f4f4f4 10px, #ececec 10px, #ececec 20px);
  color: var(--hs-v2-muted);
  font-size: 13px;
  font-weight: 600;
}

/* ── 아이콘 ──
   아직 안 올렸으면 연한 네모만 남기고, 올리면 그림이 그 자리를 채운다.
   칸 크기는 양쪽 다 같으므로 나중에 채워도 배치가 안 밀린다. */
.hs-v2-cards__icon.is-filled,
.hs-v2-docs__icon.is-filled {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: transparent;
}

.hs-v2-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /*
   * 올린 그림이 파일 안에 여백을 품고 있으면 칸에 비해 작아 보인다.
   * 공통 문구 화면의 "올린 아이콘 크기"가 이 변수를 넣어 준다 (디자인 기본 그림에는 안 걸린다).
   */
  transform: scale(var(--hs-v2-icon-zoom, 1));
}

/* STEP 동그라미 자리에 아이콘이 들어간 경우 */
.hs-v2-flow__mark.is-filled {
  padding: 24px;
  background: var(--hs-v2-bg);
}

/* 사진 한 줄 — 갤러리·프로그램이 같이 쓴다 */
.hs-v2-photo {
  overflow: hidden;
  margin: 0;
  border-radius: var(--hs-v2-radius-sm);
  background: var(--hs-v2-line-soft);
  aspect-ratio: 332 / 187;
}

.hs-v2-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─────────────────────────────────────────────
   1. 첫 화면
   ───────────────────────────────────────────── */

.hs-v2-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 803px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 calc(50vw - 50% + var(--hs-v2-gutter));
  background: var(--hs-v2-dark);
  color: var(--hs-v2-on-dark);
  isolation: isolate;
}

.hs-v2-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hs-v2-hero__media .hs-v2-hero__img,
.hs-v2-hero__media .hs-v2-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

/**
 * 사진 위에 글을 얹으므로 아래쪽을 눌러 준다. 안 그러면 흰 글씨가 안 읽힌다.
 * 색은 분야 다크컬러를 그대로 쓴다 — 피그마 메모: "다크는 그라디언트로".
 */
.hs-v2-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 22.054%, var(--hs-v2-dark) 69.386%);
}

/* color-mix 를 모르는 브라우저용 — 단색으로 덮되 위쪽만 살짝 비친다 */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .hs-v2-hero__veil {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.75) 100%);
  }
}

.hs-v2-hero__body {
  position: relative;
  width: 100%;
  padding: 0 0 40px;
}

.hs-v2-hero--align-center .hs-v2-hero__body {
  text-align: center;
}

.hs-v2-hero--align-right .hs-v2-hero__body {
  text-align: right;
}

/*
 * 말풍선은 한 줄이다 — 아이콘과 글이 같은 줄에 선다.
 * wrap 을 허용하면 글이 길 때 아이콘만 윗줄에 떨어져 따로 농다.
 * 좁은 화면에서는 아래 @media 에서 다시 접게 한다.
 */
.hs-v2-hero__badges {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 16px;
  padding: 14px 24px;
  border-radius: 56px;
  background: rgba(46, 55, 76, 0.5);
  background: color-mix(in srgb, var(--hs-v2-dark) 50%, transparent);
}

.hs-v2-hero__badge-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  object-fit: contain;
  transform: scale(var(--hs-v2-icon-zoom, 1));
}

.hs-v2-hero__badge-copy {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
}

.hs-v2-hero--align-center .hs-v2-hero__badges {
  justify-content: center;
}

.hs-v2-hero--align-right .hs-v2-hero__badges {
  justify-content: flex-end;
}

.hs-v2-badge {
  display: inline;
  padding: 0;
  color: var(--hs-v2-on-dark);
  font-size: var(--hs-v2-h3);
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: var(--hs-v2-h3-lh);
}

.hs-v2-badge + .hs-v2-badge {
  margin-left: 0;
}

.hs-v2-badge + .hs-v2-badge::before {
  content: "|";
  margin-right: 10px;
  color: rgba(255, 255, 255, 0.8);
}

.hs-v2-hero--badge-sm .hs-v2-badge {
  font-size: var(--hs-v2-small);
}

.hs-v2-hero--badge-lg .hs-v2-badge {
  font-size: var(--hs-v2-h4);
}

.hs-v2-hero__title {
  margin: 0 0 16px;
  padding: 0 8px;
  color: var(--hs-v2-on-dark);
  font-size: var(--hs-v2-h1);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: var(--hs-v2-h1-lh);
}

.hs-v2-hero--title-sm .hs-v2-hero__title {
  font-size: var(--hs-v2-h2);
  line-height: var(--hs-v2-h2-lh);
}

.hs-v2-hero--title-md .hs-v2-hero__title {
  font-size: 44px;
  line-height: 60px;
}

.hs-v2-hero__title em,
.hs-v2-hero__title .hs-story-highlight {
  color: var(--hs-v2-point);
  font-style: normal;
}

.hs-v2-hero__desc {
  max-width: 680px;
  margin: 0;
  padding-left: 14px;
  color: var(--hs-v2-on-dark);
  font-size: var(--hs-v2-body);
  line-height: var(--hs-v2-body-lh);
}

.hs-v2-hero--align-center .hs-v2-hero__desc {
  margin-left: auto;
  margin-right: auto;
}

.hs-v2-hero--align-right .hs-v2-hero__desc {
  margin-left: auto;
}

.hs-v2-hero--desc-sm .hs-v2-hero__desc {
  font-size: var(--hs-v2-small);
  line-height: var(--hs-v2-small-lh);
}

.hs-v2-hero--desc-lg .hs-v2-hero__desc {
  font-size: var(--hs-v2-h4);
  line-height: 30px;
}

/* 실적 숫자 띠 */
/* 실적 숫자 — 반투명 상자 안에 칸이 서고, 칸 사이에 가는 선이 든다 */
.hs-v2-stats {
  display: inline-flex;
  flex-wrap: wrap;
  margin: 32px 0 0;
  padding: 16px 0;
  border-radius: 8px;
  background: transparent;
}

.hs-product-story--skin-v2 .hs-v2-hero--align-center .hs-v2-stats {
  justify-content: center;
}

/*
 * 숫자는 첫 화면 정렬을 그대로 따라간다.
 * 가운데로 못 박아 두면 왼쪽 정렬 화면에서 글 줄과 숫자 줄이 서로 어긋나 보인다.
 */
.hs-v2-stats__item {
  min-width: 140px;
  padding: 0 40px 0 0;
}

.hs-v2-stats__item + .hs-v2-stats__item {
  padding-left: 40px;
}

.hs-v2-stats__item + .hs-v2-stats__item {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.hs-v2-stats__value {
  display: block;
  color: var(--hs-v2-on-dark);
  font-size: var(--hs-v2-h3);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: var(--hs-v2-h3-lh);
}

.hs-v2-stats__label {
  display: block;
  margin-top: 4px;
  color: var(--hs-v2-on-dark);
  font-size: var(--hs-v2-body);
  font-weight: 400;
  line-height: 24px;
}

/* ─────────────────────────────────────────────
   2. 교과 연계 — 칩
   ───────────────────────────────────────────── */

.hs-v2-subjects__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  /* 피그마 좌표에서 계산한 값이다 — 334.67 × 3 + 8 × 2 = 1020 */
  gap: 8px;
}

/* 칩 — 옅은 면 위에 과목 배지 하나 + 연계 단원 한 줄 */
.hs-v2-chip {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 60px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--hs-v2-tint);
}

.hs-v2-chip__tag {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 8px;
  border-radius: 8px;
  background: var(--hs-v2-band);
  color: var(--hs-v2-ink);
  font-size: var(--hs-v2-small);
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 20px;
  white-space: nowrap;
}

.hs-v2-chip__text {
  min-width: 0;
  color: var(--hs-v2-text);
  font-size: var(--hs-v2-small);
  font-weight: 400;
  letter-spacing: -0.4px;
  line-height: 20px;
}

/* ─────────────────────────────────────────────
   3. 활동 현장 · 프로그램 사진
   ───────────────────────────────────────────── */

.hs-v2-gallery__grid,
.hs-v2-cards__photos {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hs-v2-gallery__grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hs-v2-gallery__grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hs-v2-cards__photos {
  margin-top: 24px;
}

/* ─────────────────────────────────────────────
   3-2. 체험 결과물
   ───────────────────────────────────────────── */

.hs-v2-result__lead {
  overflow: hidden;
  margin: 0;
  border-radius: 12px;
  background: var(--hs-v2-line-soft);
  aspect-ratio: 1020 / 546;
}

.hs-v2-result__lead-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hs-v2-result__row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}

.hs-v2-result__cell {
  overflow: hidden;
  margin: 0;
  border-radius: var(--hs-v2-radius-sm);
  background: var(--hs-v2-line-soft);
  aspect-ratio: 322 / 202;
}

.hs-v2-result__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─────────────────────────────────────────────
   4. 수업 과정 — 세로 타임라인
   ───────────────────────────────────────────── */

/* "총 90분" 배지 */
.hs-v2-flow__duration {
  width: fit-content;
  margin: 0 auto 8px;
  padding: 4px 10px;
  border-radius: var(--hs-v2-radius-pill);
  background: var(--hs-v2-bg);
  color: var(--hs-v2-kicker-ink);
  font-size: var(--hs-v2-tiny);
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: var(--hs-v2-tiny-lh);
}

/* 띠 위쪽 모서리만 둥글게 — 앞 섹션과 맞닿는 면이 카드처럼 보인다 */

.hs-v2-flow__list {
  display: grid;
  gap: 0;
  width: min(430px, 100%);
  margin: 16px auto 0;
  padding: 0;
  list-style: none;
}

.hs-v2-flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  min-height: 136px;
}

/* 칸과 칸을 잇는 세로줄. 마지막 칸 아래로는 안 내려간다 */
.hs-v2-flow__item::before {
  content: "";
  position: absolute;
  top: 88px;
  bottom: 0;
  left: 43px;
  width: 1px;
  background: var(--hs-v2-line);
}

.hs-v2-flow__item:last-child::before {
  display: none;
}

.hs-v2-flow__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--hs-v2-bg);
  color: var(--hs-v2-point);
  font-size: var(--hs-v2-body);
  font-weight: 700;
}

.hs-v2-flow__card {
  min-width: 0;
  padding: 6px 0 50px;
}

.hs-v2-flow__label {
  margin: 0;
  color: var(--hs-v2-point);
  font-size: var(--hs-v2-small);
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 20px;
}

.hs-v2-flow__title {
  margin: 10px 0 0;
  color: var(--hs-v2-ink);
  font-size: var(--hs-v2-h4);
  font-weight: 800;
  letter-spacing: -0.11px;
  line-height: var(--hs-v2-h4-lh);
}

.hs-v2-flow__desc {
  margin: 4px 0 0;
  color: var(--hs-v2-muted);
  font-size: var(--hs-v2-small);
  letter-spacing: -0.4px;
  line-height: var(--hs-v2-small-lh);
}

.hs-v2-flow__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.hs-v2-flow__thumb {
  display: block;
  overflow: hidden;
  width: 88px;
  border-radius: var(--hs-v2-radius-sm);
  background: var(--hs-v2-band);
  aspect-ratio: 4 / 3;
}

.hs-v2-flow__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─────────────────────────────────────────────
   5. 행정 서류
   ───────────────────────────────────────────── */

/* 서류는 카드가 아니라 아이콘 + 이름이 나란히 선다 */
.hs-v2-docs__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  justify-content: center;
}

.hs-v2-docs__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  /* 아이콘(64px)은 고정, 이름 길이에 따라 칸만 조금 넓어진다 —
     "성범죄조회동의서" 같은 이름이 글자 중간에서 쪼개지지 않게 */
  width: auto;
  min-width: 80px;
  max-width: 128px;
  text-align: center;
}

/* 아이콘 자리. 항목마다 고른 아이콘이 여기 들어온다 */
.hs-v2-docs__icon {
  display: block;
  width: 64px;
  height: 64px;
  /* 피그마는 둥근 네모(r16)다. 원은 진로 연계 아이콘만 */
  border-radius: 16px;
  background: var(--hs-v2-bg);
}

.hs-v2-stats__item:first-child {
  padding-left: 16px;
}

.hs-v2-docs__icon.is-filled {
  padding: 16px;
  background: var(--hs-v2-bg);
}

.hs-v2-docs__label {
  margin: 0;
  color: var(--hs-v2-text);
  font-size: var(--hs-v2-tiny);
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 16px;
  /* 한국어 이름은 띄어쓰기에서만 줄바꿈, 글자 중간 X. 정말 긴 한 덩어리면 그때만 쪼갠다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ─────────────────────────────────────────────
   6. 프로그램 소개 · 진로 연계 — 아이콘 카드
   ───────────────────────────────────────────── */

.hs-v2-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

/* 진로는 개수가 들쭉날쭉하므로 칸을 나누지 않고 가운데로 늘어놓는다 */
.hs-v2-cards--career .hs-v2-cards__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
}

.hs-v2-cards--career .hs-v2-cards__card {
  width: 115px;
  gap: 8px;
}

/* 프로그램 카드 — 아이콘·제목·설명이 왼쪽으로 줄 맞춰 선다 */
.hs-v2-cards__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 19px;
  border: 1px solid var(--hs-v2-line-soft);
  border-radius: 12px;
  background: var(--hs-v2-bg);
  text-align: left;
}

/* 진로는 아이콘 아래 이름 하나뿐이라 가운데로 모은다 */
.hs-v2-cards--career .hs-v2-cards__card {
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

/* 아이콘 자리. 항목마다 고른 아이콘이 여기 들어온다 */
.hs-v2-cards__icon {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--hs-v2-band);
}

.hs-v2-cards--career .hs-v2-cards__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--hs-v2-bg);
}

.hs-v2-cards--career .hs-v2-cards__icon.is-filled {
  padding: 16px;
  background: var(--hs-v2-bg);
}

.hs-v2-cards__title {
  margin: 12px 0 0;
  color: var(--hs-v2-ink);
  font-size: var(--hs-v2-body);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 24px;
}

.hs-v2-cards--career .hs-v2-cards__title {
  margin: 0;
  font-size: var(--hs-v2-small);
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 20px;
}

.hs-v2-cards__desc {
  margin: 6px 0 0;
  color: var(--hs-v2-muted);
  font-size: var(--hs-v2-small);
  letter-spacing: -0.4px;
  line-height: var(--hs-v2-small-lh);
}

/* ─────────────────────────────────────────────
   7. 학년별 수업
   ───────────────────────────────────────────── */

.hs-v2-grade__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.hs-v2-grade__card {
  overflow: hidden;
  border: 1px solid var(--hs-v2-line);
  border-radius: var(--hs-v2-radius);
  background: var(--hs-v2-bg);
}

.hs-v2-grade__head {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline;
  padding: 20px 20px 16px;
  background: var(--hs-v2-band);
}

.hs-v2-grade__title {
  margin: 0;
  color: var(--hs-v2-ink-soft);
  font-size: var(--hs-v2-h4);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: var(--hs-v2-h4-lh);
  order: 2;
  width: 100%;
}

.hs-v2-grade__sub {
  order: 1;
  color: var(--hs-v2-ink-soft);
  font-size: var(--hs-v2-tiny);
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: var(--hs-v2-tiny-lh);
}

.hs-v2-grade__summary {
  order: 3;
  width: 100%;
  margin: 6px 0 0;
  color: var(--hs-v2-ink-soft);
  font-size: var(--hs-v2-tiny);
  letter-spacing: -0.4px;
  line-height: var(--hs-v2-tiny-lh);
}

.hs-v2-grade__body {
  padding: 20px;
  background: var(--hs-v2-bg);
}

.hs-v2-grade__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-v2-grade__list li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 24px;
  color: var(--hs-v2-text);
  font-size: 13px;
  letter-spacing: -0.4px;
  line-height: 21px;
}

.hs-v2-grade__list li:last-child {
  margin-bottom: 0;
}

/* Figma 원본 체크 벡터를 써서 운영체제의 체크 글꼴 차이를 없앤다. */
.hs-v2-grade__list li::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #9ba8e5;
  background-color: color-mix(in srgb, var(--hs-v2-point) 55%, #ffffff);
  /* 공통 문구 화면에서 바꾸면 --hs-v2-check 가 들어온다 */
  background-image: var(--hs-v2-check, url("./assets/check.svg"));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
}

/* ─────────────────────────────────────────────
   8. 선생님 후기
   ───────────────────────────────────────────── */

/* 후기는 가운데 한 줄로 쌓이고, 카드 배경이 한 칸씩 번갈아 든다 */
.hs-v2-reviews__list {
  display: grid;
  position: relative;
  gap: 17px;
  width: min(738px, 100%);
  margin: 0 auto;
}

/*
 * 후기 아래로 흰색이 차오르는 장식 (피그마 Frame 16, 1020×528).
 * "아래에 더 있다"는 신호일 뿐 펼치는 버튼은 디자인에 없다.
 *
 * 카드가 적을 때 걸면 후기가 통째로 지워지므로 **다섯 장부터** 건다.
 * 미리보기에서는 글을 고쳐야 하므로 끈다 (loader.php 의 미리보기 CSS).
 */
.hs-v2-reviews__list.is-faded::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 528px;
  max-height: 86%;
  background: linear-gradient(180deg, transparent 0%, var(--hs-v2-bg) 100%);
  pointer-events: none;
}

.hs-v2-reviews__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 20px 24px;
  border-radius: var(--hs-v2-radius);
  background: var(--hs-v2-bg);
  box-shadow: 0 4px 12px rgba(46, 55, 76, 0.06);
}

.hs-v2-reviews__card:nth-child(even) {
  background: var(--hs-v2-chip-badge);
}

.hs-v2-reviews__quote {
  margin: 0;
  color: var(--hs-v2-text);
  font-size: var(--hs-v2-body);
  letter-spacing: -0.6px;
  line-height: var(--hs-v2-body-lh);
}

.hs-v2-reviews__author {
  margin-top: auto;
  color: var(--hs-v2-faint);
  font-size: var(--hs-v2-small);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.4px;
  line-height: 20px;
}

.hs-v2-reviews__author::before {
  content: "– ";
}

/* ─────────────────────────────────────────────
   후기가 많으면 끝없이 도는 세로 슬라이더 (JS 없음)
   render.php 가 카드를 두 벌 찍고, 여기서 translateY(-50%) 로 돌린다.
   translateY(-50%) 가 이음매 없이 맞으려면 카드 간격이 gap 이 아니라
   card 마다 균일한 margin-bottom 이어야 한다 (마지막 카드까지).
   ───────────────────────────────────────────── */

.hs-v2-reviews__marquee {
  position: relative;
  width: min(738px, 100%);
  height: min(520px, 78vh);
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 89%, transparent 100%);
}

.hs-v2-reviews__track {
  display: flow-root;
  animation: hs-v2-reviews-roll calc(var(--hs-roll-n, 5) * 7s) linear infinite;
}

.hs-v2-reviews__marquee:hover .hs-v2-reviews__track,
.hs-v2-reviews__marquee:focus-within .hs-v2-reviews__track {
  animation-play-state: paused;
}

.hs-v2-reviews__track > .hs-v2-reviews__card {
  margin-bottom: 17px;
}

@keyframes hs-v2-reviews-roll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hs-v2-reviews__marquee {
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hs-v2-reviews__track { animation: none; }
  /* 애니메이션이 없으면 두 벌 중 복제본은 감춘다 */
  .hs-v2-reviews__track > .hs-v2-reviews__card[aria-hidden="true"] { display: none; }
}

/*
 * 모바일(hover 없는 터치 화면)에서는 자동으로 도는 휠을 끈다.
 * 계속 움직이면 페이지를 아래로 못 내린다. 첫 3장만 기본 높이로 두고,
 * [후기 더 보기] 를 누르면 나머지(최대 12장)가 펼쳐진다. JS 없음 — 체크박스 토글.
 */

/* PC: 토글·버튼은 안 쓴다 (자동 휠). 체크박스는 초점은 받되 눈에는 안 보이게 둔다. */
.hs-v2-reviews__more-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hs-v2-reviews__more { display: none; }

@media (hover: none) and (pointer: coarse) {
  .hs-v2-reviews__marquee {
    height: auto;
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .hs-v2-reviews__track { animation: none; }
  /* 복제본(두 벌 중 뒤쪽)은 감춘다 — 무한 루프가 아니라 유한 목록이다 */
  .hs-v2-reviews__track > .hs-v2-reviews__card[aria-hidden="true"] { display: none; }
  /* 기본은 첫 3장만 */
  .hs-v2-reviews__track > .hs-v2-reviews__card:nth-child(n + 4) { display: none; }

  .hs-v2-reviews__more {
    display: block;
    width: min(738px, 100%);
    margin: 14px auto 0;
    padding: 13px 16px;
    border: 1px solid var(--hs-v2-line, rgba(46, 55, 76, 0.14));
    border-radius: var(--hs-v2-radius);
    background: var(--hs-v2-bg);
    color: var(--hs-v2-text);
    font-size: var(--hs-v2-small);
    letter-spacing: -0.4px;
    text-align: center;
    cursor: pointer;
  }
  .hs-v2-reviews__more-close { display: none; }

  /* 펼친 상태 — 나머지 카드(복제본 제외)를 되살린다 */
  .hs-v2-reviews__more-toggle:checked ~ .hs-v2-reviews__marquee
    .hs-v2-reviews__track > .hs-v2-reviews__card:nth-child(n + 4):not([aria-hidden="true"]) {
    display: flex;
  }
  .hs-v2-reviews__more-toggle:checked ~ .hs-v2-reviews__more .hs-v2-reviews__more-open { display: none; }
  .hs-v2-reviews__more-toggle:checked ~ .hs-v2-reviews__more .hs-v2-reviews__more-close { display: inline; }
}

.hs-v2-reviews__rollnote {
  margin: 12px auto 0;
  width: min(738px, 100%);
  color: var(--hs-v2-faint);
  font-size: var(--hs-v2-small);
  letter-spacing: -0.4px;
}

/* ─────────────────────────────────────────────
   9. 자주 묻는 질문
   ───────────────────────────────────────────── */

.hs-v2-faq__list {
  display: grid;
  gap: 16px;
  width: min(980px, 100%);
  margin: 0 auto;
}

.hs-v2-faq__item {
  overflow: hidden;
  border-radius: var(--hs-v2-radius);
  border: 1px solid var(--hs-v2-line);
  background: var(--hs-v2-bg);
}

.hs-v2-faq__q {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 12px 16px;
  color: var(--hs-v2-ink);
  font-size: var(--hs-v2-small);
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 20px;
}

.hs-v2-faq__mark {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--hs-v2-point);
  color: #fff;
  font-size: var(--hs-v2-tiny);
  font-weight: 800;
  line-height: 1;
}

.hs-v2-faq__mark--a {
  background: var(--hs-v2-dark);
}

.hs-v2-faq__q-text {
  min-width: 0;
  flex: 1 1 auto;
}

/* 질문과 답 사이의 선도 카드 안에 포함해 한 묶음으로 읽히게 한다. */
.hs-v2-faq__answer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 49px;
  padding: 12px 16px;
  border-top: 1px solid var(--hs-v2-line);
}

.hs-v2-faq__a {
  margin: 0;
  color: var(--hs-v2-muted);
  font-size: var(--hs-v2-small);
  letter-spacing: -0.4px;
  line-height: 20px;
}

/* ─────────────────────────────────────────────
   10. 예약 안내
   ───────────────────────────────────────────── */

.hs-v2-cta {
  padding: 0;
}

.hs-v2-cta__panel {
  position: relative;
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 80px calc(50vw - 50% + var(--hs-v2-gutter));
  background: var(--hs-v2-dark);
  color: var(--hs-v2-on-dark);
  text-align: center;
}

/* 글 열은 896 까지만 (피그마). 어두운 띠는 그대로 화면 끝까지 간다 */
.hs-v2-cta__panel > * {
  max-width: 896px;
  margin-right: auto;
  margin-left: auto;
}

/* CTA의 큰 원은 의미 없는 장식이라 별도 이미지 대신 정확한 원형 면으로 둔다. */
.hs-v2-cta__panel::before,
.hs-v2-cta__panel::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.hs-v2-cta__panel::before {
  top: -204px;
  right: -160px;
  width: 420px;
  height: 420px;
}

.hs-v2-cta__panel::after {
  bottom: -84px;
  left: -42px;
  width: 256px;
  height: 256px;
}

.hs-v2-cta__panel > * {
  position: relative;
  z-index: 1;
}

.hs-v2-cta__panel .hs-v2-kicker--light {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.hs-v2-cta__panel .hs-v2-kicker--light::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.hs-v2-cta__title {
  /* margin 축약형은 .hs-v2-cta__panel > * 의 margin:0 auto(가로 가운데정렬)를 덮으므로 auto 를 유지한다 */
  margin: 0 auto 12px;
  color: var(--hs-v2-on-dark);
  font-size: var(--hs-v2-h2);
  font-weight: 800;
  letter-spacing: -0.32px;
  line-height: var(--hs-v2-h2-lh);
}

.hs-v2-cta__desc {
  max-width: 560px;
  margin: 16px auto 0;
  color: var(--hs-v2-on-dark-muted);
  font-size: var(--hs-v2-small);
  letter-spacing: -0.4px;
  line-height: var(--hs-v2-small-lh);
}

.hs-v2-cta__buttons {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-top: 54px;
}

.hs-v2-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  padding: 12px 24px;
  /* 어두운 면 위에 얹히므로 흰색을 옅게 깐다 — 분야 색이 바뀌어도 같은 밝기다 */
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--hs-v2-radius-pill);
  background: var(--hs-v2-dark);
  color: var(--hs-v2-on-dark);
  font-size: var(--hs-v2-body);
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 24px;
  text-decoration: none;
}

.hs-v2-cta__phone {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  object-fit: contain;
  transform: scale(var(--hs-v2-icon-zoom, 1));
}

/* 첫 버튼이 실제로 누르길 바라는 쪽이라 밝게 뒤집는다 */
.hs-v2-cta__button--solid {
  background: #ffffff;
  color: var(--hs-v2-dark);
  font-weight: 700;
}

/*
 * 눌러도 되는 버튼처럼 반응한다.
 * 테마(Flatsome)의 전역 a:hover 가 글자를 검게 바꿔서, 여기서 !important 로 되돌린다.
 */
.hs-v2-cta__button {
  transition: transform .16s ease, background-color .16s ease,
              border-color .16s ease, box-shadow .16s ease, color .16s ease;
  will-change: transform;
}

.hs-v2-cta__button:hover,
.hs-v2-cta__button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.55) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--hs-v2-on-dark) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
  text-decoration: none !important;
}

.hs-v2-cta__button--solid:hover,
.hs-v2-cta__button--solid:focus-visible {
  transform: translateY(-2px);
  background: #ffffff !important;
  color: var(--hs-v2-dark) !important;
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.22);
}

.hs-v2-cta__button:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  transition-duration: .06s;
}

.hs-v2-cta__button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .hs-v2-cta__button,
  .hs-v2-cta__button:hover,
  .hs-v2-cta__button:active { transform: none; }
}

/*
 * "꽉 채우기" — 디자인 여백을 없애고 칸을 그대로 쓴다.
 *
 * ⚠️ 반드시 자리별 `.is-filled { padding }` 규칙들보다 **뒤에** 있어야 한다.
 * 무게가 같으므로(클래스 2개) 앞에 두면 뒤쪽 여백에 져서 아무 일도 안 일어난다.
 * 실제로 한 번 그렇게 만들었다가 브라우저로 재 보고 알았다.
 */
.hs-v2-cards__icon.is-fill,
.hs-v2-docs__icon.is-fill,
.hs-v2-flow__mark.is-fill,
.hs-v2-cards--career .hs-v2-cards__icon.is-fill {
  padding: 0;
}

/* ─────────────────────────────────────────────
   좁은 화면 — 좌우 여백
   피그마 메모는 25px 이지만 폰에서 너무 안쪽으로 들어가 옹졸해 보여 12px 로 줄였다.
   (본문 껍데기·첫 화면·배경 띠가 다 이 변수 하나로 안쪽 여백을 잡는다)
   ───────────────────────────────────────────── */

@media (max-width: 782px) {
  .hs-product-story--skin-v2 {
    --hs-v2-gutter: 12px;
    --hs-v2-section-pad: 60px;
    --hs-v2-head-gap: 28px;
    --hs-v2-h1: 32px;
    --hs-v2-h1-lh: 48px;
    --hs-v2-h2: 24px;
    --hs-v2-h2-lh: 32px;
    --hs-v2-h3: 20px;
    --hs-v2-h3-lh: 28px;
  }

  .hs-v2-hero {
    min-height: 664px;
  }

  .hs-v2-hero__body {
    padding-bottom: 40px;
  }

  .hs-v2-hero__badges {
    width: 100%;
    min-height: 80px;
    margin-bottom: 11px;
    padding: 14px 24px;
  }

  /* 모바일 말풍선에만 꼬리가 있다. Figma 원본 벡터를 그대로 쓴다. */
  .hs-v2-hero__badges::after {
    content: "";
    position: absolute;
    right: 33px;
    bottom: -24px;
    width: 26px;
    height: 24px;
    /*
     * 벡터에 칠이 박혀 있으면 분야를 바꿔도 꼬리만 남색으로 남는다.
     * 모양만 마스크로 쓰고 색은 말풍선과 같은 변수에서 가져온다
     * (벡터의 50% 투명도가 마스크 알파가 되므로 말풍선과 같은 농도가 나온다).
     */
    background-color: #2f354d;
    background-color: var(--hs-v2-dark);
    -webkit-mask: url("./assets/speech-tail.svg") center / 100% 100% no-repeat;
    mask: url("./assets/speech-tail.svg") center / 100% 100% no-repeat;
    transform: rotate(180deg);
  }

  .hs-v2-hero__badge-icon {
    width: 26px;
    height: 26px;
  }

  .hs-v2-badge,
  .hs-v2-hero--badge-sm .hs-v2-badge,
  .hs-v2-hero--badge-lg .hs-v2-badge {
    min-width: 0;
    font-size: 18px;
    line-height: 26px;
  }

  .hs-v2-hero__badge-copy {
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
  }

  .hs-v2-badge + .hs-v2-badge::before {
    display: none;
  }

  .hs-v2-hero__title {
    padding: 0;
  }

  .hs-v2-hero__desc {
    padding-left: 0;
  }

  .hs-v2-stats {
    margin-top: 32px;
    padding: 0;
  }

  .hs-v2-stats__item {
    min-width: 0;
    padding: 0 24px;
  }

  .hs-v2-stats__item:first-child {
    padding-left: 8px;
  }

  .hs-v2-stats__value {
    font-size: var(--hs-v2-body);
    line-height: 24px;
  }

  .hs-v2-stats__label {
    font-size: var(--hs-v2-tiny);
    line-height: 16px;
  }

  .hs-v2-subjects__list {
    grid-template-columns: 1fr;
  }

  .hs-v2-gallery__grid,
  .hs-v2-gallery__grid--cols-4,
  .hs-v2-cards__photos,
  .hs-v2-result__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hs-v2-flow__item {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    min-height: 120px;
  }

  .hs-v2-flow__item::before {
    top: 48px;
    left: 23px;
  }

  .hs-v2-flow__mark {
    width: 48px;
    height: 48px;
    font-size: var(--hs-v2-small);
  }

  .hs-v2-flow__card {
    padding: 4px 0 36px;
  }

  .hs-v2-flow__mark.is-filled {
    padding: 10px;
  }

  .hs-v2-flow__mark.is-fill {
    padding: 0;
  }

  .hs-v2-stats {
    gap: 12px 28px;
  }

  .hs-v2-cards__grid,
  .hs-v2-grade__grid,
  .hs-v2-reviews__list {
    grid-template-columns: 1fr;
  }

  .hs-v2-cards--career .hs-v2-cards__grid,
  .hs-v2-docs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hs-v2-cta__button {
    flex: 1 1 100%;
    text-align: center;
  }

  .hs-v2-faq {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (max-width: 480px) {
  .hs-v2-gallery__grid,
  .hs-v2-gallery__grid--cols-2,
  .hs-v2-gallery__grid--cols-4,
  .hs-v2-cards__photos,
  .hs-v2-result__row {
    grid-template-columns: 1fr;
  }

  /* 완성 화면은 Figma처럼 대표 사진 한 장만, 편집 중에는 모든 사진 슬롯을 보인다. */
  .hs-v2-cards__photos:not(.is-editable) .hs-v2-photo:nth-child(n + 2) {
    display: none;
  }
}