/* ============================================================
   LIFTING PAGE — 전용 확장 스타일 (lifting.css)
   detail.css / header.css / default.css 의 구조·클래스·컬러 규칙을
   그대로 상속하여 사용하며, 서브페이지에 필요한 신규 섹션만 추가한다.
   컬러: 화이트 #ffffff / 그린 #77ac8e / 밝은그레이 #f5f5f5 / 블랙 #111111
   ============================================================ */

/* ============================================================
   SECTION 1: INTRO — 배경 이미지 교체 (구조는 detail.css 동일)
   ============================================================ */
.section-intro.section-intro-lifting-v2::before {background-image:url('../images/lifting-hero-bg-v2.jpg');background-color:#e7e3dc;}

/* ============================================================
   SECTION 3: PROCESS (시술과정) — STEP 카드 / 본문 텍스트
   detail.css 의 .tech-cards / .tech-card / .about-desc 구조를 그대로
   재사용하되 STEP 번호 표기를 위한 보조 클래스만 추가한다.
   ============================================================ */
/* STEP 뱃지: 한글폰트 통일, 16px / 500 */
.step-badge {font-family:var(--font-ko);font-size:16px;font-weight:500;color:var(--color-green);display:block;margin-bottom:14px;transition:color 0.3s;}
.tech-card:hover .step-badge {color:rgba(255,255,255,0.85);}
/* Personal Design 서브타이틀: 포인트 컬러(그린) 지정 */
#section-process .sub-section-subtitle {color:var(--color-green);}
/* 시술과정 섹션 본문(내용폰트) — about-desc 상속, 가운데 정렬 */
.process-desc {max-width:820px;margin:32px auto 0;text-align:center;}

/* ============================================================
   SECTION 4: FEATURE (특징) — 01/02/03 각각 이미지+텍스트 행
   ============================================================ */
.section-feature-bg {background:#eef6f1;}
.feature-rows {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
/* 이미지(도형) 컬럼을 고정 px(440px)가 아닌 가변 비율(fr)로 지정하여, 화면(템플릿) 폭이
   줄어들어도 도형 영역이 전체 폭에 비례해 유동적으로 함께 줄어들도록 한다.
   → 도형이 잘려 보이거나 텍스트 영역을 침범하는 문제를 방지. */
.feature-row {display:grid;grid-template-columns:minmax(0,7fr) minmax(0,8fr);gap:64px;align-items:center;padding:56px 0;border-bottom:1px solid var(--color-gray-mid);}
.feature-row:first-child {padding-top:0;}
.feature-row:last-child {padding-bottom:0;border-bottom:0;}
/* 도형(figure) 자체는 고정 height 대신 aspect-ratio로 가로:세로 비율만 고정하고,
   실제 크기(가로/세로)는 컬럼 폭에 따라 유동적으로 커지거나 작아진다. */
.feature-row-figure {margin:0;width:100%;aspect-ratio:11/8;overflow:hidden;border-radius:var(--radius);}
/* 이미지가 도형(figure) 영역을 가로/세로 100% 정확히 채워 여백이 생기지 않도록 하고,
   object-fit:cover로 도형 비율에 맞춰 잘림 없이 꽉 차게 표시한다. */
.feature-row-img {display:block;width:100%;height:100%;object-fit:cover;transition:transform 0.8s ease;}
.feature-row-img:hover {transform:scale(1.02);}
.feature-row-text {padding:0 8px;}
/* 넘버링: Noto Sans KR / 30px / 600 (detail.css .tech-num과 동일) */
.feature-num {font-family:var(--font-ko);font-size:30px;font-weight:600;color:var(--color-green);display:block;margin-bottom:14px;line-height:1;}
.feature-title {font-family:var(--font-ko);font-size:22px;font-weight:500;color:var(--color-black);line-height:1.4;margin-bottom:14px;word-break:keep-all;}
.feature-desc p {font-family:var(--font-ko);font-size:16px;font-weight:300;color:var(--color-black);line-height:1.85;margin-bottom:10px;opacity:0.78;word-break:keep-all;}
.feature-desc p:last-child {margin-bottom:0;}

/* ============================================================
   SECTION 5: PROGRAM — BASIC / SIGNATURE / PREMIUM 개별 카드
   세로로 길게 3개 나열, 카드 헤더 = 타이틀 - 서브타이틀 한 줄 배치,
   강조색상(그린) 통일
   ============================================================ */
.program-card-list {display:flex;flex-direction:column;gap:32px;}
/* 표(카드) 전체 가로길이는 원래대로 컨테이너 전체 폭(100%)을 유지한다.
   table-layout:fixed 로 컬럼 너비를 콘텐츠 길이와 무관하게 고정 → 3개 표(BASIC/SIGNATURE/PREMIUM)의
   '시술 구성' 라벨/내용 컬럼 가로 폭이 항상 서로 동일하게 유지된다. */
.program-card {width:100%;table-layout:fixed;border-collapse:collapse;background:var(--color-white);border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 24px rgba(0,0,0,0.06);}
.program-card caption {position:absolute;font-size:0;line-height:0;overflow:hidden;}
/* 좌우 패딩(32px)을 헤더 wrapper(.program-card-head-inner)와 동일하게 맞춰 타이틀과
   '시술 구성' 텍스트의 좌측 시작선을 정확히 일치시킨다. */
.program-card th, .program-card td {padding:28px 32px;text-align:left;vertical-align:top;}
/* 모든 카드 헤더를 동일한 포인트컬러(그린)로 통일, colspan=2로 테이블 전체 너비를 차지하는 th 자체는
   table-cell 레이아웃을 유지하고, 내부 wrapper(div)에만 flex를 적용해 헤더 바가 카드 끝까지
   가득 채워지도록 한다(예전에는 th에 직접 display:flex를 걸어 첫 컬럼 너비로 잘려 보이는 문제가 있었음).
   ※ ".program-card th, .program-card td" 규칙이 element+class로 더 높은 specificity를 가져
   여기 padding:0을 덮어써버려 헤더에 패딩이 이중으로 걸리던 버그를 "th.program-card-head"로
   specificity를 맞춰서 확실히 0으로 고정한다. */
.program-card th.program-card-head {background:var(--color-green);padding:0;width:100%;}
/* 타이틀(헤더) 영역 세로 폭: 이전보다 아주 살짝만 더 늘려 여유를 준다(상하 패딩 10px → 14px).
   좌우 패딩은 아래 th/td(32px)와 동일하게 맞춰 좌측 시작선을 정확히 일치시킨다.
   카드 가로 폭이 1/3로 줄어들면서 한 줄에 다 들어가지 않아 서브타이틀이 여러 줄로 잘게
   끊기는 문제가 있었으므로, flex-wrap을 허용해 "타이틀-대시는 첫 줄 / 서브타이틀은 필요할 때만
   통째로 다음 줄 전체 폭"으로 깔끔하게 떨어지도록 한다. */
.program-card-head-inner {display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;width:100%;padding:14px 32px;box-sizing:border-box;}
.program-name {font-family:var(--font-en);font-size:28px;font-weight:500;color:var(--color-white);letter-spacing:0.04em;line-height:1.3;white-space:nowrap;flex-shrink:0;}
.program-dash {font-family:var(--font-ko);font-size:20px;font-weight:400;color:rgba(255,255,255,0.85);line-height:1.3;flex-shrink:0;}
.program-tagline {font-family:var(--font-ko);font-size:20px;font-weight:400;color:rgba(255,255,255,0.92);line-height:1.3;flex:1 1 auto;white-space:normal;word-break:keep-all;}
/* 시술구성 라벨 = 그레이배경, 내용 = 흰색배경으로 통일.
   table-layout:fixed 상태에서 실제 컬럼 폭은 <thead>의 colspan="2" 셀(width:100%) 때문에
   50:50으로 강제 분배되어 tbody 셀에 지정한 width가 무시되는 문제가 있었으므로,
   각 <table>에 <colgroup><col class="program-col-label"><col class="program-col-cell"></colgroup>를
   추가해 컬럼 폭 자체를 명시적으로 고정한다.
   표(카드) 전체 가로길이는 그대로 두고, '시술 구성' 라벨 영역만 좁아지고 옆의 내용(program-cell)
   영역이 자동으로 그만큼 더 넓어진다. (1/3:2/3 → 라벨 영역을 절반 더 축소하여 1/6:5/6로 조정)
   BASIC/SIGNATURE/PREMIUM 3개 표 모두 동일하게 적용됨. */
.program-col-label {width:16.667%;}
.program-col-cell {width:83.333%;}
/* 좌측 패딩(32px)을 위 헤더 wrapper(.program-card-head-inner, 좌측 32px)와 동일하게 맞춰
   '시술 구성' 텍스트의 좌측 시작선이 바로 위 타이틀(BASIC 등) 텍스트의 좌측 시작선과 정확히
   일치하도록 한다.
   (".program-card th, .program-card td"의 공통 padding 규칙보다 specificity를 높여야
   이 지정한 패딩이 실제로 적용되므로 "th.program-row-label" 형태로 선언한다.) */
.program-card th.program-row-label {font-family:var(--font-ko);font-size:17px;font-weight:500;color:var(--color-gray-text);background:var(--color-gray-light);padding:28px 16px 28px 32px;white-space:normal;word-break:keep-all;box-sizing:border-box;}
.program-cell {font-family:var(--font-ko);font-size:17px;font-weight:300;color:var(--color-black);line-height:1.9;word-break:keep-all;background:var(--color-white);box-sizing:border-box;}

/* ============================================================
   SECTION 6: TARGET (추천대상) — .recommend-grid(detail.css) 구조를
   그대로 사용하므로 본 파일에는 추가 스타일이 필요 없다.
   ============================================================ */

/* ============================================================
   SECTION 7: Q&A — 배경 이미지 교체 (제주 오름 풍경, 원본과 동일 소스)
   ============================================================ */
.section-qna.section-qna-lifting::before {background-image:url('../images/jeju-bg.png');}

/* ============================================================
   RESPONSIVE — TABLET (max 1100px)
   ============================================================ */
@media (max-width:1100px) {
  .feature-row {grid-template-columns:1fr;gap:28px;padding:40px 0;}
  /* 1컨럼(세로 스택) 전환 시 도형이 매개변수 다로 도형(figure)의 aspect-ratio만 조정하고,
     이미지는 여전히 도형 폭/니이에 100% 꽉 차게 맞췄(여백 없이 유지). */
  .feature-row-figure {aspect-ratio:16/9;}
  .feature-row-text {padding:0;}
}

/* ============================================================
   RESPONSIVE — MOBILE (max 768px)
   ============================================================ */
@media (max-width:768px) {
  .feature-row-figure {aspect-ratio:4/3;}
  .feature-title {font-size:19px;}
  .feature-desc p {font-size:15px;}
  .feature-num {font-size:24px;}
  .program-card {table-layout:auto;}
  .program-card th, .program-card td {padding:20px 20px;}
  .program-card th.program-row-label {padding:20px 20px;}
  .program-col-label {width:auto;}
  .program-col-cell {width:auto;}
  .program-card-head-inner {padding:12px 20px;flex-wrap:wrap;}
  .program-name {font-size:21px;}
  .program-cell {font-size:15px;}
  .program-tagline {font-size:15px;}
  .program-dash {font-size:15px;}
  .process-desc {margin-top:24px;}
}