/* ============================================================
   lab/a.css — A안 배치: 비대칭 · 교차
   부품은 na.css(카드·칩). 여기엔 «어디에 어떻게 놓나»만.
   배치 문법 — 머리말 7:5 비대칭 · 작업 모자이크(7:5 → 4열) · 서비스 좌우 교차
              · 반응형 섹션 좌측 고정 · 명암 밴드 교차(흰 → 밝은 초록 → 먹)
   ============================================================ */

/* ── 섹션 머리말 — 7:5, 설명을 제목 아래선에 맞춘다 ── */
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(34px, 5vw, 56px); }
.head .lead { margin-top: 0; }
.head--r { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* ── 1 히어로 — 왼쪽 글 7 : 오른쪽 작업물 틀 5 ── */
.hero {
  padding: clamp(128px, 13vw, 168px) 0 clamp(60px, 7vw, 92px); overflow: hidden; color: #fff;
  background:
    radial-gradient(60% 70% at 88% 18%, rgba(10, 162, 58, .26), transparent 62%),
    linear-gradient(160deg, #0B120D 0%, #0D110E 52%, #0A2414 100%);
}
.hero::before, .hero::after {                      /* 원 장식 — 파인애드 hero-art 자리 */
  content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .06); pointer-events: none;
}
.hero::before { width: 780px; height: 780px; right: -240px; top: -260px; }
.hero::after { width: 520px; height: 520px; right: -110px; top: -130px; border-color: rgba(124, 255, 118, .09); }
.hero > .w { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero h1 { margin: 24px 0 20px; font-size: clamp(34px, 5vw, 58px); font-weight: 900; line-height: 1.22; letter-spacing: -.035em; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero .sub { max-width: 34em; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.8; color: rgba(255, 255, 255, .75); }
.hero .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-visual { position: relative; padding: 0 0 56px 36px; }
.hero-visual .f2 { position: absolute; left: 0; bottom: 0; width: 58%; }
.hero-visual .f1 { transform: rotate(1.5deg); }
.hero-visual .f2 { transform: rotate(-3deg); }
/* 썸네일 PNG 오른쪽·아래 끝에 흰 줄(원본 캡처 가장자리)이 있어 틀 안에서 3% 잘라낸다 */
.hero-visual .frame img { transform: scale(1.03); transform-origin: top left; }

/* ── 2 작업 모자이크 — 첫 줄 7:5, 다음 줄 4열 ── */
.works { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
.works > * { grid-column: span 3; }
.works > :nth-child(1) { grid-column: span 7; }
.works > :nth-child(2) { grid-column: span 5; }
.demos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.work { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.work figure { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg3); border-bottom: 1px solid var(--border); }
/* 첫 줄 7:5 — 비율로 두면 좁은 쪽 사진이 낮아져 글 아래가 빈다. 높이를 같게 */
.works > :nth-child(-n+2) figure { aspect-ratio: auto; height: clamp(240px, 26vw, 380px); }
.work figure img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--e); }
.work:hover figure img { transform: scale(1.04); }
.work .body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.work .meta { display: flex; align-items: center; gap: 10px; }
.work h3 { font-size: 18px; }
.work p { margin-top: 0; font-size: 14.5px; }
.work .link { margin-top: auto; padding-top: 6px; }
.note { margin-top: 22px; font-size: 13.5px; color: var(--faint); }

/* ── 3 서비스 상세 — 좌우 교차 ── */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.detail + .detail { margin-top: clamp(56px, 7vw, 96px); }
.detail.rev > :first-child { order: 2; }
.detail .txt .ico { margin-bottom: 16px; }
.detail .txt h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; letter-spacing: -.03em; line-height: 1.3; }
.detail .txt .chip { margin-top: 12px; }
.detail .txt .lead { margin-top: 16px; }
.detail .txt .mini { margin-top: 28px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }

/* ── 4 랜딩 — 그림 판 + 글, 용도 카드 ── */
.panel { display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); box-shadow: var(--sh); }
.panel svg { max-width: 100%; height: auto; }
.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 26px; }
.sub-hd { margin-top: clamp(56px, 7vw, 96px); }
.sub-hd h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 900; letter-spacing: -.03em; }
.sub-hd p { margin-top: 6px; color: var(--muted); }

/* ── 5 반응형 — 왼쪽 머리말 고정, 오른쪽 카드 ── */
.sticky { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(26px, 5vw, 72px); align-items: start; }
.sticky .side { position: sticky; top: 110px; }
.devs { display: grid; gap: 14px; }
.dev { display: grid; grid-template-columns: 54px 1fr; gap: 18px; align-items: center; }
.dev .ico { margin: 0; }
.dev p { margin-top: 4px; }
.cmp-block { margin-top: 34px; }
.cmp-block h3 { font-size: clamp(20px, 2vw, 25px); font-weight: 900; letter-spacing: -.03em; }
.cmp-block > p { margin: 6px 0 18px; color: var(--muted); }

/* ── 6 이유 — 먹 밴드 위 3카드 ── */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillars .no { display: block; margin-bottom: 18px; }

/* ── 7 절차 — 번호 이어지는 5카드 ── */
.steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.steps::before { content: ''; position: absolute; left: 6%; right: 6%; top: 93px; height: 2px; background: repeating-linear-gradient(90deg, var(--tint-2) 0 8px, transparent 8px 14px); }
.step { padding: 22px 20px 24px; text-align: center; }
.step .chip { margin-bottom: 14px; }
.step .ico { margin: 0 auto 14px; background: #fff; border: 1px solid var(--border); box-shadow: var(--sh); }
.step h3 { font-size: 17px; }
.step p { font-size: 14px; }

/* ── 8 가격 철학 — 약속 카드 + 초록 CTA 카드 ── */
.promise { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; align-items: stretch; }
.promise .card h3 { font-size: clamp(21px, 2vw, 25px); font-weight: 900; }
.cta-card { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.4vw, 44px); border-radius: var(--r); box-shadow: 0 26px 60px rgba(7, 60, 25, .28); }
.cta-card h3 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 900; line-height: 1.35; letter-spacing: -.03em; }
.cta-card .btn { align-self: flex-start; margin-top: 26px; }

/* ── 9 지표 — 카드 4 ── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* ── 10 상담 — 왼쪽 글 · 오른쪽 폼 카드 ── */
.ct { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ct .btn-kk { margin-top: 28px; }
.ct .alt { margin-top: 12px; font-size: 13.5px; color: rgba(255, 255, 255, .55); }

/* ── 반응형 ─────────────────────────────── */
/* 901~1024 = 1920 모니터의 절반 창(페이지 폭 ≈ 945~960). 태블릿으로 접지 않고 PC 배치를 조금 좁혀 쓴다
   (대표님 2026-09-15 «절반 창에서도 PC 처럼»). 첫 줄 7:5 는 3열로 바꿔 3+3 — 7:5 뒤에 3열이면 한 장이 혼자 남는다 */
@media (max-width: 1024px) {
  .works > *, .works > :nth-child(1), .works > :nth-child(2) { grid-column: span 4; }
  .works > :nth-child(-n+2) figure { aspect-ratio: 16 / 10; height: auto; }
  .demos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .works > *, .works > :nth-child(1), .works > :nth-child(2) { grid-column: span 6; }
  .demos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps::before { display: none; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .head, .head--r, .hero-grid, .detail, .sticky, .promise, .ct { grid-template-columns: 1fr; }
  .head--r > :first-child { order: 0; }
  .detail.rev > :first-child { order: 0; }
  .sticky .side { position: static; }
  .pillars { grid-template-columns: 1fr; }
  .hero-visual { max-width: 560px; }
}
@media (max-width: 640px) {
  .works > *, .works > :nth-child(1), .works > :nth-child(2) { grid-column: span 12; }
  .demos { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step { display: grid; grid-template-columns: 54px 1fr; gap: 4px 16px; text-align: left; }
  .step .chip { grid-column: 1 / -1; justify-self: start; margin-bottom: 6px; }
  .step .ico { grid-row: span 2; margin: 0; }
  .step p { margin-top: 2px; }
  .hero-visual { padding: 0 0 40px 20px; }
}