/* ============================================================
   PIGMENT & REDNESS PAGE — 추가 컴포넌트 (pigment.css)
   detail.css / header.css 의 컬러·폰트·라운드 변수를 그대로 사용하며,
   기존 파일은 수정하지 않고 이 페이지에만 필요한 컴포넌트만 추가한다.
   ============================================================ */

/* ── HERO 배경 이미지 (이 페이지 전용) ── */
#section-intro.section-intro::before {background-image:url('../images/pigment-hero-bg.jpg');}

/* ── Q&A 섹션 배경 이미지 (이 페이지 전용, 4개 시술 Q&A 모두 동일 적용) ── */
.section-qna::before {background-image:url('../images/pigment-qna-bg.jpg');}

/* ============================================================
   QUICK NAV (헤드 하단 4개 바로가기 버튼 — 스크롤 시 상단 고정)
   ============================================================ */
.section-quicknav {position:sticky;top:80px;z-index:500;padding:16px 0;background:var(--color-white);box-shadow:0 4px 16px rgba(0,0,0,0.06);}
.quicknav-list {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.quicknav-item {margin:0;}
.quicknav-btn {display:flex;align-items:center;justify-content:center;height:56px;width:100%;background:var(--color-gray-light);border-radius:var(--radius);font-family:var(--font-ko);font-size:17px;font-weight:500;color:var(--color-black);text-align:center;word-break:keep-all;transition:background 0.3s ease,color 0.3s ease;}
.quicknav-btn:hover {background:var(--color-green);color:var(--color-white);}

/* ============================================================
   CLARITY2 — 5가지 모드 그리드 (마지막 줄 잔여 카드는 가운데 정렬)
   ============================================================ */
.mode-cards {list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:24px;}
.mode-card {flex:0 0 calc((100% - 48px)/3);background:var(--color-white);border-radius:var(--radius);padding:40px 32px;display:flex;flex-direction:column;gap:14px;transition:background 0.3s ease;}
.mode-card:hover {background:var(--color-green);}
.mode-card:hover .mode-num {color:rgba(255,255,255,0.75);}
.mode-card:hover .mode-title {color:var(--color-white);}
.mode-card:hover .mode-desc {color:var(--color-white);opacity:0.9;}
.mode-num {font-family:var(--font-ko);font-size:15px;font-weight:600;color:var(--color-green);display:block;transition:color 0.3s;}
.mode-title {font-family:var(--font-ko);font-size:22px;font-weight:600;color:var(--color-black);margin:0;line-height:1.4;transition:color 0.3s;word-break:keep-all;}
.mode-desc {font-family:var(--font-ko);font-size:16px;font-weight:300;color:var(--color-black);line-height:1.8;opacity:0.75;margin:0;transition:color 0.3s,opacity 0.3s;word-break:keep-all;}

/* ============================================================
   CLARITY2 — 5가지 모드 섹션 배경색 및 상하 여백(130px 확장)
   ============================================================ */
#section-clarity2-modes {background:#f5f5f5;padding:130px 0;}

/* ============================================================
   NEOGEN PLASMA — 시술 부위 카드 (이미지+텍스트, 마지막 줄 잔여 카드는 가운데 정렬)
   ============================================================ */
.area-cards {list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:24px;}
.area-card {flex:0 0 calc((100% - 72px)/4);background:var(--color-white);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.06);}
.area-card-img-wrap {overflow:hidden;}
.area-card-img {width:100%;height:160px;object-fit:cover;display:block;transition:transform 0.7s ease;}
.area-card-img:hover {transform:scale(1.05);}
.area-card-text {padding:20px 20px 24px;text-align:center;}
.area-card-title {font-family:var(--font-ko);font-size:17px;font-weight:500;color:var(--color-black);margin:0;line-height:1.5;word-break:keep-all;}

/* ============================================================
   NEOGEN PLASMA — 시술 부위 섹션 상하 여백 (다른 섹션과 동일하게 130px)
   ============================================================ */
#section-neogen-area {padding:130px 0;}

/* ============================================================
   NEOGEN PLASMA — 인증 배지 (about 영역 강조 문구)
   ============================================================ */
.about-badge {display:inline-flex;align-items:center;gap:8px;margin-top:24px;padding:12px 22px;background:var(--color-green-light);border-radius:30px;font-family:var(--font-ko);font-size:15px;font-weight:500;color:var(--color-green);word-break:keep-all;}

/* ============================================================
   RESPONSIVE — TABLET (max 1100px)
   ============================================================ */
@media (max-width:1100px) {
  .mode-card {flex:0 0 calc((100% - 24px)/2);}
  .area-card {flex:0 0 calc((100% - 24px)/2);}
}

/* ============================================================
   RESPONSIVE — MOBILE (max 768px)
   ============================================================ */
@media (max-width:768px) {
  .section-quicknav {top:64px;}
  .quicknav-list {grid-template-columns:repeat(2,1fr);gap:12px;}
  .quicknav-btn {height:52px;font-size:16px;}
  .mode-cards {gap:16px;}
  .mode-card {flex:0 0 100%;padding:32px 24px;}
  .area-cards {gap:14px;}
  .area-card {flex:0 0 calc((100% - 14px)/2);}
  .area-card-img {height:140px;}
  .about-badge {font-size:14px;padding:10px 18px;}
  #section-neogen-area {padding:80px 0;}
  #section-clarity2-modes {padding:80px 0;}
}