/* 2026-07-21 polish pass — 모바일 전 페이지 점검 후 디자인만 다듬는 마감 패스. 콘텐츠 무변경.
   원칙:
   1) 포인트 컬러는 스틸 블루(--dr-blue) 하나. 곳곳에 남아 있던 웜 톤(베이지·크림·골드 브라운)
      표면·괘선·라벨을 사이트 공통 쿨 뉴트럴로 통일한다.
   2) 번호 칩·풋터 링크·구분선 등 반복 요소는 네 페이지에서 같은 문법을 쓴다.
   3) 정렬: 라벨-제목 기준선, 풋터 링크 행 간격, 카드 안 세로 리듬을 맞춘다.
   4) 모바일 가독성: 히어로 3번 슬라이드(팀 사진 콜라주) 위 텍스트 스크림 보강. */

/* ═══ 1. 웜 톤 표면 → 공통 쿨 뉴트럴 ═══ */

/* 1-1. 홈 히어로: 화살표 링·카운터·배경 필의 웜 그레이 정리 */
.page-home .hero-arrow,
.page-home .hero-controls .hero-arrow{border-color:#d5dbe1;color:#2b333c;box-shadow:0 3px 10px rgba(34,48,78,.07)}
.page-home .hero-arrow:hover,
.page-home .hero-controls .hero-arrow:hover{border-color:#aeb7c1;background:#f6f8fa}
.page-home .hero-counter,
.page-home .hero-counter .hero-total{color:var(--dr-muted)}
.page-home .hero-counter .hero-current{color:var(--dr-ink)}
.page-home .hero-bgimg{background:#e9edf1}

/* 1-2. '좌우로 밀어…' 스와이프 힌트: 웜 그레이 → 공통 뮤트 */
.page-home .swipe-hint,
.page-home .swipe-hint span,
.page-details .table-swipe-hint,
.page-details .table-swipe-hint span{color:var(--dr-muted)}

/* 1-3. 제품 카드 안 가격 구분선: 웜 헤어라인 → 공통 헤어라인 */
.page-home .featured-price{border-color:var(--dr-line)}

/* 1-3b. 팀 콜라주 사진 로딩 전 플레이스홀더 필 */
.page-home .hero-team-portraits figure{background:#e9edf1}

/* 1-4. 섹션 키커 대시(— 후기 · 수령 안내): 골드 → 뉴트럴 */
.page-home .sec-kicker::before{background:#a5aeb8}

/* 1-5. 홈 '접수부터 출고까지' 카드: 웜 그라데이션 → 쿨 틴트 */
.page-home .sales-live-card{background:linear-gradient(135deg,#f7f8fa 0%,#fff 72%)}

/* 1-6. 후기 콜라주·영상 카드 프레임의 웜 보더/필 */
.page-home .review-collage{border-color:#d8dee4;background:#eef1f4}
/* 세로(9:16) 영상 포스터가 슬롯에서 잘리지 않도록 contain — 여백은 카드와 같은 쿨 다크 */
.page-home .video-slot video{object-fit:contain;background:#171d23}
.page-support .video{border-color:#272d34;background:#14181d}
.page-support .video video{display:block;width:100%;background:#14181d}

/* 1-7. 추천 결과 카드(빠른 추천): 베이지 → 공통 서피스 */
.page-home .guide-card{background:#fff;border-color:var(--dr-line)}
.page-home .guide-card:hover{border-color:#8f9aa6;background:#fbfcfd}
.page-home .guide-card-image{background:#eef1f4}

/* 1-8. 주문 구성 오버레이(빌더): 크림 선택 상태·베이지 패널 → 스틸 소프트 */
.page-home .bo-close{background:#eef1f4;color:#39424d}
.page-home .bo .cur-model{background:#f1f4f7}
.page-home .bo .custom-hint{background:#f2f4f6;color:#535e6a}
.page-home .bo .mselect{border-color:#d3dae0}
.page-home .bo .opt.sel,
.page-home .bo .app.sel,
.page-home .bo .addon.sel{background:#f0f4f8}
.page-home .bo .opt.sel .oprice{color:var(--dr-blue-dark)}
.page-home .bo .sum{background:#fff;border-color:var(--dr-line)}
.page-home .bo .mobilebar{border-top-color:var(--dr-line)}

/* 1-9. 정책 페이지: 표 본문 밴딩·라벨의 베이지 → 쿨 밴딩 */
.page-policies .table th{background:#f0f2f5}
.page-policies .table td{background:#fff}
@media(max-width:700px){
  .page-policies .table th{background:#f0f2f5}
  .page-policies .table td{background:#fafbfc}
}
/* 본문 텍스트 링크: 브라운 → 포인트 컬러 한 가지 */
.page-policies .table a,
.page-policies .body-list a{color:var(--dr-blue);text-decoration-color:#b3c1cf}
.page-policies .table a:hover,
.page-policies .body-list a:hover{color:var(--dr-blue-dark)}
/* 탭 칩의 웜 텍스트·호버 */
.page-policies .tabs a{color:#4a545f}
.page-policies .tabs a:hover{border-color:#9aa5b1;background:#f6f8fa;color:var(--dr-ink)}

/* 1-10. 고객지원: 상단 레일·입력 필드·풋터의 웜 잔재 */
.page-support .support-nlink{color:#39424d}
.page-support input:focus,
.page-support select:focus,
.page-support textarea:focus{border-color:var(--dr-blue);background:#fff}

/* 1-11. 서비스 안내: 인물 사진 로딩 전 배경 */
.page-details .person img{background:#eef1f4}

/* ═══ 2. 번호 칩 한 문법 (정책 페이지 칩과 동일한 소프트 칩) ═══ */
.page-home .order-flow li::before{
  background:#eef2f6;color:#47586a;
  border:1px solid #d9e0e6;border-radius:8px;
  font-weight:800;
}
.page-details .num{
  width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;
  background:#eef2f6;color:#47586a;
  border:1px solid #d9e0e6;
  font-size:12px;font-weight:800;
}

/* ═══ 3. 풋터: 네 페이지 동일한 링크 행·구분선·저작권 톤 ═══ */
.page-home footer .f-policy,
.page-details footer .f-policy,
.page-policies footer .f-policy,
.page-support footer .footer-policy{gap:0 18px;color:#39424d}
.page-home footer .f-policy a,
.page-details footer .f-policy a,
.page-policies footer .f-policy a,
.page-support footer .footer-policy a{
  min-height:40px;padding-block:4px;
  text-underline-offset:4px;
  text-decoration-color:#b9c2cb;
}
.page-home footer .f-policy a:hover,
.page-details footer .f-policy a:hover,
.page-policies footer .f-policy a:hover,
.page-support footer .footer-policy a:hover{color:var(--dr-blue-dark);text-decoration-color:currentColor}
.page-support footer .footer-policy{font-weight:650}
/* 본문 안 텍스트 링크(신고 면제 기준 확인·이메일)도 같은 밑줄 톤 */
.page-home footer .f-brand p a,
.page-details footer .f-brand p a,
.page-policies footer .f-brand p a,
.page-support footer .footer-company p a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:#b9c2cb}
/* 고객지원 풋터: 다른 페이지처럼 링크 밑줄·쿨 톤 구분선·본문 회색 통일 */
.page-support footer{color:#5d6876}
.page-support footer .footer-policy a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b9c2cb}
.page-support footer .footer-company{border-bottom-color:var(--dr-line)}
.page-support footer .footer-legal{color:#7e8691}
/* 정책 페이지에만 남아 있던 웜 구분선·저작권 색 */
.page-policies footer .f-cols{border-bottom-color:var(--dr-line)}
.page-policies footer .legal{color:#7e8691}
.page-home footer .legal{color:#7e8691}

/* ═══ 4. 정렬·리듬 미세 조정 ═══ */

/* 4-1. 서비스 안내 STEP 목록: 라벨과 제목의 첫 줄 기준선 맞춤 */
.page-details .step{align-items:start}
.page-details .step b{padding-top:5px;white-space:nowrap}

/* 4-2. 긴 제목 줄바꿈 균형(한국어 keep-all과 함께 좌우 널뛰기 완화) */
.page-home .hero-slide h1,.page-home .hero-slide h2,
.page-home .shelf-head h2,.page-home #models .sec-title,
.page-home .sales-live h2,.page-home .media-proof-sec .sec-title,
.page-home .final h2,
.page-details h1,.page-details h2,
.page-support .section h2,.page-support .support-finder-head h2,
.page-policies .policy h2,.page-policies .hero h1{text-wrap:balance}

/* ═══ 6. 카드 입체감: 딱딱한 회색 테두리선 → 옅은 헤어라인 + 은은한 그림자 ═══
   지금까지는 카드 종류를 막론하고 진한 1px 회색 선(테두리)만으로 경계를 표시해
   전체가 '표/그리드'처럼 각지고 다소 촌스러워 보였다. 선 자체는 거의 안 보일 만큼
   낮추고, 대신 아주 옅은 그림자로 살짝 뜬 느낌을 줘 같은 흰 배경 위에서도
   부드럽게 구분되도록 한다. 색상·둥근 정도(border-radius)는 그대로 둔다. */
.page-details .card,.page-details .person,.page-details .faq details,
.page-details .table-wrap,.page-details .outcome-disclaimer,
.page-support .quicknav a,.page-support .step,.page-support .action,
.page-support .form,.page-support .faq details,details,
.page-home .discovery-card,.page-home .featured-product,.page-home .mcard,
.page-home .guide-card,.page-home .sales-fact,.page-home .choice-table-wrap,
.page-home .fit-card,.page-home .model-guide,.page-home .sum,
.page-policies .callout,.page-details .callout{
  border-color:rgba(23,32,46,.07)!important;
  box-shadow:0 1px 2px rgba(23,32,46,.04),0 10px 26px rgba(23,32,46,.06)!important;
}
.page-details .card:hover,.page-details .person:hover,
.page-support .quicknav a:hover,
.page-home .discovery-card:hover,.page-home .featured-product:hover{
  box-shadow:0 2px 4px rgba(23,32,46,.05),0 14px 32px rgba(23,32,46,.09)!important;
}

/* ═══ 5. 모바일 보정 ═══ */
@media(max-width:700px){
  /* 5-1. 히어로 3번 슬라이드(팀 콜라주): 모바일에서 콜라주가 전면 배경 레이어가 되며
          기존 스크림(::before)이 사진 '뒤'에 깔려 어두운 사진 위에 잉크색 제목이 얹히던 문제.
          콜라주 컨테이너 위에 아래로 갈수록 진해지는 화이트 베일을 얹어
          텍스트 영역 가독성을 확보한다(사진은 위쪽에서 은은하게 보임). */
  .page-home .team-slide .hero-team-portraits{overflow:hidden}
  .page-home .team-slide .hero-team-portraits::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.56) 42%,
      rgba(255,255,255,.9) 74%,
      #fff 100%);
  }

  /* 5-2. 수령 후 1분 영상(세로 9:16): 전폭 검정 박스 대신
          휴대폰 화면 폭으로 줄여 중앙 정렬 — 의도된 세로 영상으로 보이게 */
  .page-details .media .video{
    width:min(100%,320px);
    margin-inline:auto;
  }

  /* 5-2b. 영상 포스터 하단에 안내 문구(주문번호·연락처)가 있는데, 재생 컨트롤 바가
           그 위에 겹쳐 가려지던 문제(서비스 안내·고객지원 페이지 공통). 박스를 원본
           9:16보다 살짝 더 길게 잡고 contain + 상단 정렬로 채워, 여분 높이가 하단에만
           남도록 해 컨트롤이 그 여백에 앉게 한다. 영상 원본은 그대로, 프레임 비율만 조정. */
  .page-details .media .video{
    aspect-ratio:9/17.5;
    object-fit:contain;
    object-position:center top;
  }
  .page-support .video video{
    aspect-ratio:9/17.5;
    object-fit:contain;
    object-position:center top;
    max-height:820px;
  }

  /* 5-3. 폼 입력: iOS 자동 확대 방지 + 포커스 일관성 */
  .page-support input,
  .page-support select,
  .page-support textarea{font-size:16px}

  /* 5-4. 빌더 모델 선택 셀렉트: 긴 모델명이 덜 잘리도록 */
  .page-home .bo .mselect{font-size:13px;padding-right:36px}

  /* 5-5. 번호 칩 크기 리듬(모바일) */
  .page-details .num{width:24px;height:24px;font-size:11px}
}