/**
 * assets/css/home.css — 메인 전용 DS07 Deep Teal Coral 디자인
 *
 * 색상은 base.css의 DS07 토큰만 사용한다. 상품(운영 사이트) 화면과 여백을 중심에 두고,
 * 딥틸은 브랜드·동작에, 코랄/오렌지는 가격·LIVE 신호에만 제한한다.
 *
 * ⚠️ **여기에는 홈 전용 블록만 둔다.** 헤더·푸터·색 토큰처럼 모든 페이지가 같이
 *    쓰는 것은 base.css 소관이다. 2026-08-07 이전에는 이 파일이 그것들을 덮어쓰고
 *    있어서 홈만 색과 헤더가 달랐다.
 *
 * @version 6.4.4 (2026-09-14) 검색 정보·본문 안내 및 공개 페이지 품질 개선.

 * @version 6.4.3 (2026-09-14) 새 템플릿 스크린샷 비율에 맞춰 기기 프레임 전체 표시.
 * @version 6.4.2 (2026-09-09) SOLUTION FEATURES 모바일 설명 박스에 좌우 패딩 16px 추가.
 * @version 6.4.1 (2026-09-09) 4×9 조합을 제목으로 강조하고 템플릿 번호·디자인 문자를 확대.
 * @version 6.4.0 (2026-09-09) DESIGN YOUR SITE: 4열 템플릿, 9색 견본, 딥틸 CTA와 반응형 재구성.
 * @version 6.3.1 (2026-08-10) 🐛 항목 블록이 배경에 묻혔다(사용자 지적).
 *   항목은 흰색인데 섹션 바탕이 #fafafa 라 **차이가 2% 뿐**이었고 바깥 테두리도 없었다.
 *   → 바탕을 --color-bg-warm(#f7f6f2)으로 바꾸고 `.feature-group__items` 에
 *     1px 바깥 테두리를 넣었다. 안쪽 칸 사이는 연한 선 그대로다(진하게 하면 표로 돌아간다).
 *   ⚠️ **이 사이트에서 흰 블록을 #fafafa 위에 얹는 조합은 늘 안 보인다.** 「포함된 무료
 *      혜택」 블록에서 한 번 겪고, 여기서 또 겪었다. 흰 블록에는 테두리를 함께 준다.
 * @version 6.3.0 (2026-08-10) ⭐ 세부 기능을 **표에서 「동작 3묶음」 레이아웃으로** 교체.
 *   `.feature-table*` 를 걷어내고 `.feature-groups`/`.feature-group`/`.feature-item` 신설.
 *   왼쪽 단에 묶음 이름, 오른쪽에 항목 2열 — 표에서 설명 오른쪽에 넓게 남던 빈 공간을 쓴다.
 *   ⚠️ 항목 사이 선은 **grid gap 1px + 부모 배경색**으로 낸다. 각 칸에 테두리를 주면
 *      맞닿는 자리가 2px 이 된다. 그래서 `.feature-item` 배경을 반드시 채워야 한다 —
 *      투명하면 부모 색이 비쳐 선이 아니라 회색 판이 된다.
 *   ⚠️ `.feature-group__head` 의 위 padding(20px)은 `.feature-item` 의 padding 과 **같은 값**이다.
 *      이래야 왼쪽 제목과 오른쪽 첫 항목의 글자 윗선이 맞는다. 한쪽만 고치면 어긋난다.
 *   ⚠️ ≤720px 에서는 제목의 왼쪽 들여쓰기(52px)를 **없앤다.** 안 없애면 항목이 묶음
 *      제목보다 더 왼쪽에 놓여 위계가 뒤집혀 보인다(번호는 제목 위 한 줄로 올린다).
 * @version 6.2.0 (2026-08-10) ⭐ 도입 절차 섹션에 **단계 화살표 + 순차 반전 애니메이션**.
 *   4단계가 2초 간격으로 딥틸 반전되며 흘러간다. 타이밍은 `.home-process__list` 의
 *   `--step` 한 곳에서만 정하고, 지연·주기·화살표가 거기서 계산된다.
 *   ⚠️ JS 를 쓰지 않는다 — 스크립트가 막히면 1번만 켜진 채 멈춰 오히려 나빠진다.
 *   ⚠️ `prefers-reduced-motion: reduce` 에서는 돌리지 않는다(화살표는 남는다).
 * @version 6.1.0 (2026-08-10) 토큰 이름을 base.css 한 벌(--color-… · --radius-…)로 맞췄다. 값은 그대로다
 *   ⭐ .solution-card 모서리를 24px(--radius-xl)로 되살렸다. DS07 시안 값인데
 *      --radius-lg 가 3px 로 덮여 죽어 있었다. 「큰 둥근 모서리 금지」의 유일한 예외다
 * @version 6.0.0 (2026-08-07) 색 토큰 재매핑·헤더·푸터 블록을 base.css 로 옮겼다
 *                             (사이트 전체가 같은 시각 언어를 쓰게 됐다)
 * @version 5.1.0 (2026-08-07) 히어로의 CSS 기기 목업(약 260줄)을 실제 목업 이미지로 교체
 * @version 5.0.1 (2026-08-07) base.css 토큰 정리에 맞춰 주석만 보강 (스타일 변화 없음)
 * @version 5.0.0 (2026-08-06)
 */

/* 색 토큰은 base.css 한 곳에서만 정한다.
   2026-08-07 이전에는 여기 :root 에서 --c-* 를 DS07 로 덮어썼는데, 그 덮어쓰기가
   홈에서만 적용돼 홈과 나머지 페이지의 색이 달랐다. base.css 에서 합쳤다. */

::selection {
    background: var(--color-primary);
    color: var(--color-bg);
}

/* ── 홈 공통 ─────────────────────────────────────────────────────────── */
.home-main {
    overflow: hidden;
    color: var(--color-text-light);
}

.home-main h1,
.home-main h2,
.home-main h3,
.home-main strong,
.home-main b {
    color: var(--color-text);
}

.home-kicker,
.home-section-head__eyebrow {
    margin: 0 0 10px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.4;
}

.home-section-head {
    position: relative;
    margin-bottom: var(--sec-head-gap);
    text-align: center;
}

.home-section-head h2 {
    margin-bottom: 12px;
    font-size: clamp(30px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.045em;
}

.home-section-head > p:last-of-type {
    margin: 0;
    color: var(--color-text-light);
    font-size: 17px;
}

.home-section-head__more {
    position: absolute;
    top: 46px;
    right: 0;
    color: var(--color-text-light);
    font-size: 15px;
    font-weight: 500;
}

.home-section-head__more::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: -3px 3px 0 6px;
    border: solid var(--color-text-light);
    border-width: 1px 1px 0 0;
    vertical-align: middle;
    transform: rotate(45deg);
}

.home-section-head__more:hover {
    color: var(--color-primary-dark);
    text-decoration: none;
}

.home-section-head__more:hover::after {
    border-color: var(--color-primary-dark);
}

/* ── 히어로 ──────────────────────────────────────────────────────────── */
.home-hero {
    padding: 72px 0 86px;
    /* 목업 이미지에 구워진 배경색과 같아야 한다 — base.css 의 --color-bg-hero 주석 참조 */
    background: var(--color-bg-hero);
}

.home-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(480px, 1.12fr);
    gap: 68px;
    align-items: center;
}

.home-hero__copy {
    order: -1;
    min-width: 0;
}

.home-hero__copy h1 {
    margin: 0 0 16px;
    font-size: clamp(42px, 4.7vw, 60px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -.065em;
}

.home-hero__copy h1 span {
    color: var(--color-primary);
}

.home-hero__copy h2 {
    margin: 0 0 22px;
    color: var(--color-primary-dark);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
}

.home-hero__lead {
    max-width: 590px;
    margin-bottom: 30px;
    color: var(--color-text-light);
    font-size: 16px;
    line-height: 1.9;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.home-hero__actions .btn {
    min-width: 158px;
    border-radius: var(--radius-sm);
}

.home-hero__price {
    display: flex;
    align-items: center;
    margin: 30px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--color-border);
}

.home-hero__price > div {
    min-width: 138px;
    padding-right: 26px;
}

.home-hero__price > div + div {
    padding-left: 26px;
    border-left: 1px solid var(--color-border);
}

.home-hero__price dt {
    color: var(--color-text-light);
    font-size: 12px;
    font-weight: 500;
}

.home-hero__price dd {
    margin: 2px 0 0;
    color: var(--color-accent-text);
    font-size: 20px;
    font-weight: 700;
}

.home-hero__price-note {
    margin: 12px 0 0;
    color: var(--color-text-light);
    font-size: 11px;
    line-height: 1.6;
}

.home-hero__visual {
    min-width: 0;
}

/* 히어로 목업 이미지.
   2026-08-07 이전에는 모니터·휴대전화를 CSS 로 그리고 그 안에 대표 템플릿 썸네일을
   끼워 넣었다(약 260줄). 실제 촬영 목업으로 교체하면서 그 블록을 전부 걷어냈다.
   ⚠️ 이미지에 배경색 #fbfaf7 이 구워져 있다(투명 배경이 아니다).
      .home-hero 의 --color-bg-hero 와 같은 색이어야 사각형 경계가 안 보인다. */
.home-hero__mockup {
    display: block;
    width: 100%;
    max-width: 680px;
    height: auto;
}

/* ── 운영 강점: DS07 원형 퀵 메뉴 ───────────────────────────────────── */
.home-strengths {
    padding: 82px 0 88px;
    background: var(--color-bg-gray);
}

.strength-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 28px 20px;
}

.strength-item {
    min-width: 0;
    text-align: center;
}

.strength-item__no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--quick-icon);
    height: var(--quick-icon);
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--color-mint);
    color: var(--color-text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .08em;
}

.strength-item:first-child .strength-item__no {
    background: var(--color-primary);
    color: var(--color-bg);
}

.strength-item h3 {
    margin: 0 0 7px;
    color: var(--color-primary-dark);
    font-size: 16px;
    font-weight: 700;
}

.strength-item p {
    margin: 0;
    color: var(--color-text-light);
    font-size: 13px;
    line-height: 1.65;
}

/* ── 업종별 솔루션 ───────────────────────────────────────────────────── */
/* ── 누구에게 필요한가: 대상 설명 카드 ─────────────────────────────────
   2026-08-07 개편. 모니터 그림과 카드별 버튼을 걷어내고 '이런 상황'을 넣었다.
   글을 읽히는 카드라 가운데 정렬을 쓰지 않는다 — 목록이 가운데 정렬되면
   줄 시작이 들쭉날쭉해 읽는 속도가 떨어진다.
   ⚠️ 왼쪽이 화환업체·꽃집이다. 순서는 home.php 의 $solutionTargets 배열이 정한다. */
.home-solutions {
    padding: var(--section-gap) 0;
    background: var(--color-bg);
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

/* ⚠️ 모서리 24px 는 base.css 「큰 둥근 모서리 금지」의 **유일한 예외**다.
   DS07 시안이 이 두 장을 24px 로 그렸는데 토큰이 3px 로 덮이면서 죽어 있었다
   (2026-08-10 사용자가 여기만 살리기로 결정). 다른 카드에 --radius-xl 을 퍼뜨리지 말 것. */
.solution-card {
    padding: 40px 40px 38px;
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-xl);
    background: var(--color-bg-warm);
}

.solution-card + .solution-card {
    background: var(--color-bg-gray);
}

.solution-card__type {
    display: inline-block;
    margin: 0 0 14px;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    background: var(--color-chip);
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
}

.solution-card h3 {
    margin-bottom: 8px;
    font-size: 27px;
    font-weight: 700;
}

.solution-card > strong {
    display: block;
    margin-bottom: 14px;
    color: var(--color-primary-dark);
    font-size: 17px;
    line-height: 1.5;
}

.solution-card__lead {
    margin: 0 0 26px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-light);
    font-size: 14px;
    line-height: 1.8;
}

.solution-card__label {
    margin: 0 0 12px;
    color: var(--color-primary-dark);
    font-size: 13px;
    font-weight: 700;
}

.solution-card__signs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.solution-card__signs li {
    position: relative;
    padding: 0 0 0 26px;
    color: var(--color-text-light);
    font-size: 14px;
    line-height: 1.7;
}

.solution-card__signs li + li {
    margin-top: 10px;
}

/* 체크 표시. 아이콘 파일 없이 테두리 두 변만 남겨 기울인 것이다 */
.solution-card__signs li::before {
    content: '';
    position: absolute;
    top: .45em;
    left: 4px;
    width: 5px;
    height: 9px;
    border: solid var(--color-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ── 세부 기능 섹션 ───────────────────────────────────────────────────── */
/* 바탕을 --color-bg-gray(#fafafa) 에서 --color-bg-warm(#f7f6f2) 로 바꿨다.
   흰 항목 칸과의 차이가 2% 밖에 안 돼 오른쪽 블록이 배경에 묻혔다(2026-08-10).
   위 「업종에 맞는 솔루션」 섹션의 카드와 같은 바탕이라 사이트 안에서 낯설지 않다. */
.home-features {
    padding: var(--section-gap) 0;
    background: var(--color-bg-warm);
}

/* ── 세부 기능 — 동작 3묶음 ────────────────────────────────────────────
   8개를 평평하게 나열하면 「표」로만 읽히고 무엇이 중요한지 신호가 없었다.
   부고장이 쓰이는 순서(만든다 → 닿는다 → 운영한다)로 묶고, **묶음 이름을 왼쪽 단에**
   두어 오른쪽에 넓게 남던 빈 공간을 쓴다.

   ⚠️ 왼쪽 단은 `position: sticky` 로 두지 않았다. 묶음이 짧아(1~2행) 붙잡아 둘 거리가
      없는데 제목만 스크롤을 따라다니면 오히려 어수선해진다.
   ────────────────────────────────────────────────────────────────────── */
.feature-groups {
    border-top: 1px solid var(--color-border);
}

.feature-group {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
    padding: 36px 0;
    border-bottom: 1px solid var(--color-border);
}

/* 묶음 제목 단 — 번호는 크게 흐리게, 제목은 딥틸로.
   번호가 진하면 제목과 다투고, 아예 없으면 세 묶음이 그냥 나열로 보인다. */
/* 위 padding 은 오른쪽 항목 칸의 padding(20px)과 같은 값이다 — 이래야 왼쪽 묶음 제목과
   오른쪽 첫 항목의 **글자 윗선이 맞는다.** 항목 padding 을 바꾸면 이 값도 함께 볼 것. */
.feature-group__head {
    position: relative;
    padding: 20px 0 0 52px;
}

.feature-group__no {
    position: absolute;
    left: 0;
    top: -4px;
    color: var(--color-mint);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

.feature-group__head h3 {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: 20px;
    letter-spacing: -.035em;
}

/* 제목 아래 딥틸 짧은 막대 — 세 묶음의 시작점을 눈으로 세게 한다.
   (테마 상세페이지의 구역 제목과 같은 방식이라 사이트 안에서 낯설지 않다) */
.feature-group__head h3::after {
    content: '';
    display: block;
    width: 34px;
    height: 3px;
    margin-top: 12px;
    background: var(--color-primary);
}

.feature-group__head p {
    margin: 12px 0 0;
    color: var(--color-text-light);
    font-size: 13.5px;
}

/* 칸 사이 1px 선을 gap 으로 낸다 — 테두리를 각 칸에 주면 맞닿는 자리가 2px 이 된다.
   ⚠️ **바깥 테두리가 반드시 있어야 한다.** 항목은 흰색(#ffffff)이고 섹션 바탕은
      #f7f6f2 라 차이가 2~3% 뿐이다. 테두리를 빼면 오른쪽 블록이 배경에 묻혀
      「어디서 시작해 어디서 끝나는지」가 안 보인다(2026-08-10 사용자 지적).
      같은 사고를 「포함된 무료 혜택」 블록에서 이미 한 번 겪었다.
   바깥은 --color-border(진함), 안쪽 칸 사이는 --color-divider(연함)로 둔다.
   안쪽까지 진하게 하면 표로 되돌아간다 — 방금 표에서 벗어난 참이다. */
.feature-group__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--color-border);
    background: var(--color-divider);
}

/* ⚠️ 항목 배경을 반드시 채운다. 투명하게 두면 위 gap 색이 그대로 비쳐
   「선」이 아니라 회색 판이 된다. */
.feature-item {
    padding: 20px 24px;
    background: var(--color-bg);
}

.feature-item h4 {
    margin: 0 0 6px;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.feature-item p {
    margin: 0;
    color: var(--color-text-light);
    font-size: 13.5px;
    line-height: 1.65;
}

/* ── 샘플 템플릿: 모니터 카드 3×2 ─────────────────────────────────────
   2026-08-07 개편. 업종별 솔루션 섹션에 있던 모니터 그림을 이쪽으로 옮겼다.
   모니터 화면에는 그림이 아니라 **실제 샘플 사이트 스크린샷**이 들어간다.
       public_html/assets/images/templates/{템플릿코드}.webp
   파일을 그 이름으로 넣어 두기만 하면 자동으로 붙는다(TemplateShot.php). */
.home-portfolio {
    padding: var(--section-gap) 0;
    background: var(--color-bg);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 52px 28px;
}

.portfolio-card {
    min-width: 0;
    text-align: center;
}

/* ── 모니터 ──
   화면·목·받침 세 조각으로 그린다. 이미지 파일이 아니라 CSS 라서
   카드 폭이 달라져도 비율이 유지된다. */
.portfolio-device {
    position: relative;
    margin-bottom: 18px;
}

/* 테마 번호 배지 (예: 「테마 6」).
   2026-08-07 이전에는 여기에 'LIVE' 를 ::after 의 content 로 박아 뒀는데,
   번호는 템플릿마다 달라 CSS 로 못 쓴다 — 그래서 실제 요소로 바꿨다.
   고객이 이 번호로 주문하므로 카드에서 가장 먼저 눈에 들어와야 한다. */
.portfolio-device__no {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    background: var(--color-coral);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}

.portfolio-device__frame {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 6px solid var(--color-primary-dark);
    border-bottom-width: 11px;
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.portfolio-device__frame > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* 스크린샷을 아직 안 넣은 템플릿. 가짜 화면을 그리지 않고 비워 둔다.
   ⚠️ height: 100% 대신 inset: 0 을 쓴다. 부모(.portfolio-device__frame)의 높이는
      aspect-ratio 로 계산된 값이라 height:100% 가 auto 로 풀려, 글자 한 줄 높이만
      칠해지고 나머지는 흰 채로 남았다(2026-08-07). 절대 배치는 그 영향을 안 받는다. */
.portfolio-device__empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 13px;
}

.portfolio-device__neck {
    width: 46%;
    height: 26px;
    margin: 0 auto;
    background: var(--color-primary-light);
    clip-path: polygon(35% 0, 65% 0, 72% 78%, 100% 88%, 100% 100%, 0 100%, 0 88%, 28% 78%);
}

/* 목(neck)이 받침까지 함께 그리므로 별도 받침은 쓰지 않는다.
   마크업의 __base 는 자리만 유지한다(지우면 옛 캐시된 CSS 와 어긋난다). */
.portfolio-device__base {
    display: none;
}

/* 버튼 3개(사용자데모·관리자데모·제작문의).
   이름·소개 문구를 뺐으므로 모니터 바로 아래에 붙는다.
   주소가 없어도 3개를 같은 모양으로 두되(사용자 지정), 주소 없는 것은 마크업이
   <span> 이라 눌러도 아무 일이 없다. */
.portfolio-card__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.portfolio-card__actions .btn {
    min-width: 0;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

/* 주소가 아직 없는 버튼(span). 모양은 같게 두되 손가락 커서까지 주면
   눌리는 줄 알고 클릭하게 되므로 커서만 기본으로 되돌린다. */
.portfolio-card__actions span.btn {
    cursor: default;
}

/* 흰 바탕 + 회색 테두리 버튼. 데모 2개가 제작문의(딥틸)보다 약해 보여야
   시선이 제작문의로 간다. */
.btn-dark {
    border-color: var(--color-border-btn);
    background: var(--color-bg);
    color: var(--color-text);
}

.btn-dark:hover {
    border-color: var(--color-primary);
    background: var(--color-bg);
    color: var(--color-primary-dark);
    text-decoration: none;
}

.home-product-more {
    margin-top: 46px;
}

.home-product-more__button {
    display: block;
    width: 100%;
    max-width: 900px;
    height: 60px;
    margin: 0 auto;
    border: 1px solid var(--color-border-btn);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 58px;
    text-align: center;
}

.home-product-more__button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
    text-decoration: none;
}

/* ── 요금: DS07 웜 베이지 브랜드 밴드 ─────────────────────────────── */
.home-plan {
    padding: 68px 0;
    background: var(--color-bg-warm);
}

.home-plan__inner {
    display: grid;
    grid-template-columns: 1.25fr 1fr .58fr;
    gap: 40px;
    align-items: center;
}

.home-plan__copy h2 {
    margin-bottom: 8px;
    color: var(--color-primary);
    font-size: 31px;
    font-weight: 700;
}

.home-plan__copy > p:last-child {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: 14px;
}

.home-plan__prices {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.home-plan__prices dl {
    margin: 0;
    padding: 4px 26px;
    border-left: 1px solid var(--color-border-btn);
}

.home-plan__prices dt {
    color: var(--color-text-light);
    font-size: 12px;
}

.home-plan__prices dd {
    margin: 2px 0 0;
    color: var(--color-accent-text);
    font-size: 24px;
    font-weight: 700;
}

.home-plan__prices small,
.home-plan__action small {
    color: var(--color-text-light);
    font-size: 10px;
}

.home-plan__action {
    text-align: right;
}

.home-plan__action small {
    display: block;
    margin-bottom: 9px;
}

.home-plan__action .btn {
    width: 100%;
    min-width: 170px;
    border-radius: var(--radius-sm);
}

/* ── 도입 절차 ─────────────────────────────────────────────────────────
   단계 사이에 화살표를 넣고, 4단계가 순서대로 「진행 중」으로 반전되는 애니메이션을
   붙였다. 절차가 **한 방향으로 흘러간다**는 것을 글을 읽기 전에 눈으로 먼저 알린다.

   ⚠️ 전부 CSS 로만 한다. JS 로 클래스를 갈아 끼우면 스크립트가 막힌 환경에서
      1번 단계만 켜진 채로 멈춰 「1번만 선택된 화면」이 된다 — 안 움직이는 것보다 나쁘다.
      여기서는 애니메이션이 안 돌아도 **평상시 모습(전부 꺼짐)** 그대로 읽힌다.

   타이밍은 아래 --step 한 곳에서만 정한다. 이 값을 바꾸면 지연·주기·화살표가 함께 따라온다.
   ⚠️ 네 카드가 **같은 주기(--cycle)에 서로 다른 지연(--delay)** 으로 도는 구조다.
      지연만 바꾸고 주기를 안 맞추면 순서가 점점 어긋나 두 개가 동시에 켜진다.
   ────────────────────────────────────────────────────────────────────── */
.home-process {
    padding: var(--section-gap) 0;
    background: var(--color-bg);
}

.home-process__list {
    --step:  2s;                          /* 한 단계가 켜져 있는 시간 */
    --cycle: calc(var(--step) * 4);       /* 4단계가 한 바퀴 도는 시간 */

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-process__list li {
    --delay: 0s;

    position: relative;                   /* 화살표(::after)의 기준 */
    min-height: 190px;
    margin: 0;
    padding: 26px 24px;
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    animation: proc-card var(--cycle) var(--delay) infinite;
}

/* --delay 는 상속되므로 여기 한 줄만 정하면 카드 안의 글자·번호·화살표가 모두 따라온다 */
.home-process__list li:nth-child(2) { --delay: calc(var(--step) * 1); }
.home-process__list li:nth-child(3) { --delay: calc(var(--step) * 2); }
.home-process__list li:nth-child(4) { --delay: calc(var(--step) * 3); }

/* 단계 사이 화살표 — 카드 사이 20px 틈의 한가운데에 놓는다.
   테두리 두 변을 45° 돌린 꺾쇠라 이미지 파일이 필요 없다. */
.home-process__list li::after {
    content: '';
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--color-mint);
    border-right: 2px solid var(--color-mint);
    transform: translate(-50%, -50%) rotate(45deg);
    animation: proc-arrow var(--cycle) var(--delay) infinite;
}

/* 마지막 단계 뒤에는 갈 곳이 없다 */
.home-process__list li:last-child::after { content: none; }

.home-process__list span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--color-mint);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    animation: proc-no var(--cycle) var(--delay) infinite;
}

.home-process__list b {
    display: block;
    margin-bottom: 8px;
    color: var(--color-primary-dark);
    font-size: 17px;
    animation: proc-title var(--cycle) var(--delay) infinite;
}

.home-process__list p {
    margin: 0;
    color: var(--color-text-light);
    font-size: 13px;
    animation: proc-desc var(--cycle) var(--delay) infinite;
}

/* 켜져 있는 구간은 0~25%(= --step). 앞뒤 4% 는 색이 갈아타는 시간이라
   딱 끊기지 않고 넘어간다. 0% 를 꺼진 상태로 두어야 **지연이 끝나는 순간**
   화면이 튀지 않는다(지연 중에는 원래 모습으로 서 있기 때문이다). */
@keyframes proc-card {
    0%        { background: var(--color-bg-soft);      border-color: var(--color-border-card); }
    4%,  25%  { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
    29%, 100% { background: var(--color-bg-soft);      border-color: var(--color-border-card); }
}

@keyframes proc-no {
    0%        { background: var(--color-mint); color: var(--color-text); }
    4%,  25%  { background: var(--color-bg);   color: var(--color-primary-dark); }
    29%, 100% { background: var(--color-mint); color: var(--color-text); }
}

@keyframes proc-title {
    0%        { color: var(--color-primary-dark); }
    4%,  25%  { color: var(--color-bg); }
    29%, 100% { color: var(--color-primary-dark); }
}

@keyframes proc-desc {
    0%        { color: var(--color-text-light); }
    4%,  25%  { color: var(--color-mint); }
    29%, 100% { color: var(--color-text-light); }
}

/* 화살표는 카드가 꺼지는 시점에 맞춰 잠깐 진해진다 — 다음 단계로 넘어가는 순간이다 */
@keyframes proc-arrow {
    0%,  18%  { border-color: var(--color-mint); }
    22%, 30%  { border-color: var(--color-primary); }
    34%, 100% { border-color: var(--color-mint); }
}

/* 움직임을 줄여 달라고 설정한 사용자에게는 돌리지 않는다.
   애니메이션이 없어도 화살표와 카드는 그대로 남아 절차로 읽힌다. */
@media (prefers-reduced-motion: reduce) {
    .home-process__list li,
    .home-process__list li::after,
    .home-process__list span,
    .home-process__list b,
    .home-process__list p {
        animation: none;
    }
}

/* ── 최종 상담 CTA ───────────────────────────────────────────────────── */
.home-contact {
    padding: 72px 0;
    background: var(--color-primary-dark);
}

.home-contact__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.home-contact .home-section-head__eyebrow {
    color: var(--color-primary-light);
}

.home-contact h2 {
    margin-bottom: 8px;
    color: var(--color-bg);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.35;
}

.home-contact p:not(.home-section-head__eyebrow) {
    margin: 0;
    color: var(--color-mint);
}

.home-contact .btn {
    min-width: 230px;
    border-color: var(--color-bg);
    background: var(--color-bg);
    color: var(--color-primary-dark);
}

.home-contact .btn:hover {
    border-color: var(--color-mint);
    background: var(--color-mint);
    color: var(--color-text);
}

.home-contact .btn:focus-visible {
    outline-color: var(--color-bg);
}

/* ── 반응형 ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
    .home-hero__inner {
        grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
        gap: 38px;
    }

    .strength-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 40px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 48px 28px;
    }

    .home-plan__inner {
        grid-template-columns: 1.1fr 1fr;
    }

    .home-plan__action {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 18px;
    }

    .home-plan__action small {
        margin: 0;
    }

    .home-plan__action .btn {
        width: auto;
    }
}

@media (max-width: 960px) {
    .home-hero {
        padding-top: 54px;
    }

    .home-hero__inner {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .home-hero__copy {
        max-width: 720px;
    }

    /* 1단으로 접히면 목업을 가운데 놓는다 */
    .home-hero__mockup {
        margin: 0 auto;
    }

    .solution-grid {
        gap: 20px;
    }

    .solution-card {
        padding: 30px 22px;
    }

    .feature-group {
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 28px;
    }

    .home-process__list {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 2열에서는 짝수 칸이 줄 끝이다 — 그 오른쪽에는 다음 카드가 없으므로
       화살표가 허공을 가리킨다. 흐름은 아래 줄 왼쪽으로 이어진다. */
    .home-process__list li:nth-child(2n)::after { content: none; }
}

@media (max-width: 720px) {
    .home-section-head {
        margin-bottom: 30px;
    }

    .home-section-head h2 {
        font-size: 28px;
    }

    .home-section-head > p:last-of-type {
        font-size: 14px;
    }

    .home-section-head__more {
        position: static;
        display: inline-block;
        margin-top: 14px;
        font-size: 14px;
    }

    .home-hero {
        padding: 44px 0 62px;
    }

    .home-hero__copy h1 {
        font-size: 38px;
    }

    .home-hero__copy h2 {
        font-size: 17px;
    }

    .home-hero__lead {
        font-size: 14px;
    }

    .home-hero__actions .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .home-hero__price {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .home-hero__price > div {
        min-width: 0;
        padding-right: 18px;
    }

    .home-hero__price > div + div {
        padding-left: 18px;
    }

    .home-hero__price-note {
        grid-column: 1 / -1;
        margin: 12px 0 0;
    }

    .home-strengths,
    .home-solutions,
    .home-features,
    .home-portfolio,
    .home-process {
        padding: 60px 0;
    }

    .strength-grid,
    .solution-grid {
        grid-template-columns: 1fr;
    }

    .strength-grid {
        gap: 28px;
    }

    .strength-item {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 16px;
        align-items: center;
        text-align: left;
    }

    .strength-item__no {
        width: 72px;
        height: 72px;
        margin: 0;
    }

    .solution-card h3 {
        font-size: 25px;
    }

    /* 좁아지면 묶음 제목이 위로 올라가고 항목은 한 줄에 하나가 된다.
       260px 짜리 왼쪽 단을 억지로 유지하면 오른쪽 항목이 두 글자씩 줄바꿈된다. */
    .feature-group {
        display: block;
        padding: 26px 0;
    }

    /* 세로로 쌓이면 오른쪽 항목과 높이를 맞출 상대가 없다 — 위 padding 20px 을 없앤다.
       ⚠️ 왼쪽 들여쓰기(52px)도 함께 없앤다. 안 없애면 항목이 묶음 제목보다 **더 왼쪽**에
          놓여 「항목이 묶음보다 상위」로 보이는 뒤집힌 위계가 된다. */
    .feature-group__head {
        padding: 0;
        margin-bottom: 20px;
    }

    /* 번호를 제목 위 한 줄로 올린다 — 제목·설명·항목이 모두 같은 왼쪽 선에서 시작한다 */
    .feature-group__no {
        position: static;
        display: block;
        margin-bottom: 4px;
        font-size: 20px;
    }

    .feature-group__items {
        grid-template-columns: 1fr;
    }

    .feature-item {
        padding: 16px;
        font-size: 13px;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    /* ⚠️ width: 100% 를 빼면 안 된다.
       그리드 항목에 좌우 auto 여백을 주면 stretch 가 풀려 **글자 길이만큼만** 넓어진다.
       그래서 소개 문구가 긴 카드의 모니터가 더 크게 나왔다(2026-08-07 모바일에서 발견).
       width: 100% 로 칸을 채우게 한 뒤 max-width 로 제한하고 auto 여백으로 가운데 둔다. */
    .portfolio-card {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }

    .home-product-more {
        margin-top: 36px;
    }

    .home-plan {
        padding: 58px 0;
    }

    .home-plan__inner {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .home-plan__prices {
        border-top: 1px solid var(--color-border-btn);
        border-bottom: 1px solid var(--color-border-btn);
    }

    .home-plan__prices dl {
        padding: 18px;
    }

    .home-plan__prices dl:first-child {
        border-left: 0;
    }

    .home-plan__action {
        display: block;
        grid-column: auto;
        text-align: left;
    }

    .home-plan__action small {
        margin-bottom: 10px;
    }

    .home-process__list {
        grid-template-columns: 1fr;
    }

    .home-process__list li {
        min-height: 0;
    }

    /* 1열에서는 흐름이 아래로 간다 — 화살표도 카드 밑으로 내려가 아래를 가리킨다.
       2열에서 껐던 짝수 칸 화살표를 여기서 되살린다(마지막 칸만 계속 없다). */
    .home-process__list li:nth-child(2n)::after { content: ''; }

    .home-process__list li::after {
        left: 50%;
        top: calc(100% + 10px);
        transform: translate(-50%, -50%) rotate(135deg);
    }

    .home-process__list li:last-child::after { content: none; }

    .home-contact {
        padding: 58px 0;
    }

    .home-contact__inner {
        display: block;
    }

    .home-contact h2 {
        font-size: 28px;
    }

    .home-contact .btn {
        width: 100%;
        margin-top: 28px;
    }
}

@media (max-width: 440px) {
    .home-hero__copy h1 {
        font-size: 33px;
    }

    .home-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .home-hero__price dd {
        font-size: 17px;
    }

    .solution-card {
        padding: 24px 16px 26px;
        border-radius: 16px;
    }

    .portfolio-card__actions .btn {
        padding: 8px 11px;
        font-size: 12px;
    }

    .home-plan__prices dd {
        font-size: 20px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   조합 안내 (2026-09-06) — 갤러리 자리. **여기서는 고르지 않는다.**
   ════════════════════════════════════════════════════════════════════════
   고르는 화면은 /design 이다(design.css). 홈은 "이런 것이 된다"까지만 보여 주고
   CTA 로 넘긴다 — 소개 페이지에 도구를 넣으면 둘 다 어중간해진다.

   ⚠️ 처음에는 글자만 있는 3단 카드였는데, 랜딩 전체가 글이라 **이 섹션이 묻혔다**
      (2026-09-06 사용자 지적). 템플릿 스크린샷과 색 칩을 그대로 보여 주는 쪽으로
      바꿨다 — 「5종 × 9종」을 말이 아니라 그림으로 전한다.

   ⛔ 스크린샷과 색 칩은 **누를 수 없다.** 링크를 달면 예전 갤러리로 되돌아가고
      1~5호 라이브로 나가는 동선이 다시 생긴다(작업지시서 §6 에서 폐기한 방침).
   ⛔ 디자인 금지 4가지를 지킨다: 그라데이션 / box-shadow / 둥근 모서리 10px+ / 낮은 대비.
   ──────────────────────────────────────────────────────────────────────── */

.home-builder {
    padding: 88px 0;
    background: var(--color-bg-warm);
}

.home-builder__head {
    margin-bottom: 40px;
    text-align: center;
}

.home-builder__head h2 {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    font-size: clamp(18px, 2.5vw, 28px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.045em;
}

.home-builder__option-group { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.home-builder__option-group strong { color: var(--color-primary-dark); font-size: clamp(32px, 4vw, 56px); line-height: 1.2; }
.home-builder__multiply { color: var(--color-text-light); font-weight: 400; }

.home-builder__intro {
    margin: 16px 0 0;
    color: var(--color-text);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.5;
}

.home-builder__group-head { margin-bottom: 20px; }

.home-builder__group-head h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
}

.home-builder__group-head h3 span { color: var(--color-primary-dark); }

/* 판매 순서 그대로 네 칸을 채운다. 스크린샷은 설명용이며 선택 동작은 /design에 있다. */
.home-builder__shots {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-builder__shot {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.home-builder__shot figure { margin: 0; }

.home-builder__screen {
    display: grid;
    place-items: center;
    aspect-ratio: 1000 / 676;
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-soft);
}

.home-builder__screen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
}

.home-builder__empty { color: var(--color-text-light); font-size: 14px; }

.home-builder__shot figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 16px 20px;
}

.home-builder__template-no {
    color: var(--color-primary-dark);
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.home-builder__palettes { margin-top: 36px; }

.home-builder__chips {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-builder__chip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

/* 밝은 색 견본에서도 A~I가 선명하게 보이도록 문자는 흰 바탕에 둔다. */
.home-builder__swatch { grid-column: 1 / -1; height: 40px; background: var(--chip); }
.home-builder__palette-code { color: var(--color-text); font-size: 24px; font-weight: 700; line-height: 1.25; text-align: center; }

.home-builder__cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
    padding: 28px 32px;
    border: 1px solid var(--color-primary-dark);
    border-radius: var(--radius-lg);
    background: var(--color-primary-dark);
    color: var(--color-bg);
}

.home-builder__count { display: flex; align-items: center; gap: 16px; margin: 0; }
.home-builder__count strong { color: var(--color-bg); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -.05em; }
.home-builder__count span { font-size: 20px; font-weight: 500; line-height: 1.4; }
.home-builder__note { margin: 12px 0 0; color: var(--color-bg); font-size: 14px; }
.home-builder__action { flex-shrink: 0; text-align: center; }
.home-builder__action p { margin: 12px 0 0; color: var(--color-bg); font-size: 14px; }

.home-builder__cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-width: 240px;
    min-height: 56px;
    padding: 16px 24px;
    border-color: var(--color-bg);
    background: var(--color-bg);
    color: var(--color-primary-dark);
    font-size: 16px;
    font-weight: 700;
}

.home-builder__cta .btn:hover {
    border-color: var(--color-cream);
    background: var(--color-cream);
    color: var(--color-primary-dark);
    text-decoration: none;
}

.home-builder__cta .btn:focus-visible { outline: 2px solid var(--color-bg); outline-offset: 4px; }
.home-builder__cta .btn svg { flex: 0 0 20px; }

/* 태블릿: 템플릿을 2×2로, 색 견본을 3×3으로 접어 읽을 크기를 확보한다. */
@media (max-width: 991.98px) {
    .home-builder { padding: 64px 0; }
    .home-builder__shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-builder__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-builder__swatch { height: 32px; }
}

@media (max-width: 767.98px) {
    .home-builder__cta { align-items: stretch; flex-direction: column; padding: 24px; }
    .home-builder__cta .btn { display: flex; width: 100%; gap: 16px; }
}

/* 모바일에서도 네 템플릿의 순서와 아홉 색의 배열을 유지한다. */
@media (max-width: 575.98px) {
    .home-builder__head { margin-bottom: 32px; }
    .home-builder__head h2 { gap: 8px; }
    .home-builder__option-group { gap: 4px; }
    .home-builder__shots { gap: 12px; }
    .home-builder__shot figcaption { min-height: 52px; padding: 12px; }
    .home-builder__template-no { font-size: 24px; }
    .home-builder__chips { gap: 8px; }
    .home-builder__chip { padding: 8px; gap: 8px; }
    .home-builder__count strong { font-size: 48px; }
    .home-builder__count span { font-size: 18px; }
    .home-builder__cta .btn { min-width: 0; padding-inline: 16px; gap: 12px; }
}

/* 2026-09-14: 가격 설명을 유효한 dl 구조 안에 배치하고 본문 크기를 확보한다. */
.home-plan__prices dd small { display: block; font-size: 13px; font-weight: 400; line-height: 1.6; }
.home-hero__price-note { font-size: 13px; }