/* ============================================================
   TRIPLE TONING PAGE — 전용 스타일 (triple-toning.css)
   공통 규칙(색상/폰트/섹션 패딩)은 detail.css 변수를 그대로 사용
   ============================================================ */

/* ── 인트로 배경 이미지 교체 (트리플 토닝 전용) ── */
body.page-triple-toning .section-intro::before {background-image:url('../images/triple-toning-bg.jpg');filter:brightness(0.82) contrast(1.06) saturate(1.05);}
body.page-triple-toning .intro-overlay {background:linear-gradient(to bottom,rgba(17,17,17,0.28) 0%,rgba(17,17,17,0.5) 100%);}

/* ============================================================
   SECTION: DEFINITION (트리플 토닝이란?)
   ============================================================ */
.section-definition {padding:var(--section-padding);background:var(--color-white);}
.definition-intro {max-width:820px;margin:0 auto 56px;text-align:center;}
.definition-desc {font-family:var(--font-ko);font-size:18px;font-weight:300;color:var(--color-black);line-height:1.9;opacity:0.82;word-break:keep-all;}
.definition-desc .emphasis-strong {font-weight:700;opacity:1;}

/* ── 콤보 하이라이트 라운드 박스 ── */
.combo-highlight {display:flex;align-items:center;justify-content:center;margin:0 auto 56px;max-width:900px;}
.combo-pill {font-family:var(--font-ko);font-size:19px;font-weight:600;color:var(--color-white);background:var(--color-green);padding:18px 40px;border-radius:100px;line-height:1.4;text-align:center;word-break:keep-all;}

/* ── 기기 3열 카드 ── */
.device-grid {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.device-card {display:flex;flex-direction:column;background:var(--color-gray-light);border-radius:var(--radius);overflow:hidden;}
.device-image-wrap {overflow:hidden;flex-shrink:0;background:#e9e9e9;aspect-ratio:4/3;width:100%;}
.device-img {width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 0.7s ease;display:block;}
.device-card:hover .device-img {transform:scale(1.04);}
.device-content {padding:28px 28px 34px;flex:1;display:flex;flex-direction:column;gap:10px;}
.device-num {font-family:var(--font-ko);font-size:15px;font-weight:600;color:var(--color-green);display:block;}
.device-title {font-family:var(--font-ko);font-size:21px;font-weight:500;color:var(--color-black);line-height:1.4;margin:0;}
.device-desc {font-family:var(--font-ko);font-size:16px;font-weight:300;color:var(--color-black);line-height:1.75;opacity:0.72;word-break:keep-all;margin:0;}

/* ============================================================
   SECTION: PROCESS (시술 과정)
   ============================================================ */
.section-process {padding:var(--section-padding);background:var(--color-gray-light);}
.process-steps {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.process-step {position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--color-white);border-radius:var(--radius);padding:48px 24px 40px;}
.process-icon {display:flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--color-green-light);color:var(--color-green);margin-bottom:24px;flex-shrink:0;}
.process-num {font-family:var(--font-ko);font-size:15px;font-weight:600;color:var(--color-green);display:block;margin-bottom:10px;}
.process-title {font-family:var(--font-ko);font-size:19px;font-weight:500;color:var(--color-black);line-height:1.5;margin:0;word-break:keep-all;}
.process-arrow {display:none;}

/* ============================================================
   SECTION: POINT (색소질환 치료 포인트 비교)
   ============================================================ */
.section-point {padding:var(--section-padding);background:var(--color-white);}
.point-lead {max-width:820px;margin:0 auto 64px;text-align:center;}
.point-lead p {font-family:var(--font-ko);font-size:18px;font-weight:300;color:var(--color-black);line-height:1.9;opacity:0.82;word-break:keep-all;}
.point-compare {display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:nowrap;}
.point-card {flex:1;min-width:0;background:var(--color-gray-light);border-radius:var(--radius);padding:40px 28px;text-align:center;display:flex;flex-direction:column;gap:20px;}
.point-card.is-highlight {background:var(--color-green);}
.point-label {font-family:var(--font-ko);font-size:22px;font-weight:600;color:var(--color-black);}
.point-card.is-highlight .point-label {color:var(--color-white);}
.point-tags {list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
.point-tags li {font-family:var(--font-ko);font-size:14px;font-weight:400;color:var(--color-black);background:var(--color-white);border-radius:100px;padding:8px 16px;}
.point-card.is-highlight .point-tags li {color:var(--color-green);background:var(--color-white);font-weight:500;}
.point-vs {font-family:var(--font-en);font-size:22px;font-weight:500;color:var(--color-green);flex-shrink:0;writing-mode:horizontal-tb;transform:none;}

/* ============================================================
   EFFECT LIST 5칸 확장 (트리플 토닝 효과)
   ============================================================ */
.section-effect .effect-list.effect-list-5 {grid-template-columns:repeat(5,1fr);}

/* ============================================================
   RESPONSIVE — TABLET (max 1100px)
   ============================================================ */
@media (max-width:1100px) {
  .device-grid {grid-template-columns:1fr;}
  .process-steps {grid-template-columns:repeat(2,1fr);}
  .section-effect .effect-list.effect-list-5 {grid-template-columns:repeat(3,1fr);}
  .point-compare {flex-wrap:wrap;}
  .point-card {flex:1 1 220px;}
  .point-vs {writing-mode:horizontal-tb;transform:none;}
  .combo-pill {font-size:16px;padding:16px 28px;}
}

/* ============================================================
   RESPONSIVE — MOBILE (max 768px)
   ============================================================ */
@media (max-width:768px) {
  .definition-desc,.point-lead p {font-size:16px;}
  .combo-pill {font-size:14px;padding:14px 20px;}
  .device-grid {gap:20px;}
  .device-title {font-size:19px;}
  .device-desc {font-size:15px;}
  .process-steps {grid-template-columns:1fr;gap:16px;}
  .process-step {padding:36px 20px 32px;}
  .process-icon {width:60px;height:60px;margin-bottom:18px;}
  .point-compare {flex-direction:column;gap:14px;}
  .point-vs {transform:none;}
  .point-card {flex:1 1 auto;width:100%;}
  .section-effect .effect-list.effect-list-5 {grid-template-columns:repeat(2,1fr);}
}