/* ============================================================
   드림소프트 디자인 업그레이드 레이어  (2026-07-30)
   Tailwind CDN 뒤에 로드된다. 기존 스타일을 지우지 않고 덮어쓴다.
   되돌리려면 이 파일 링크 한 줄만 지우면 원상복구된다.
   ============================================================ */

:root {
  /* 기본 CSS 이징은 약하다. UI 가 의도적으로 움직이는 느낌을 주는 강한 곡선. */
  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  --dur-press: 140ms;   /* 눌림 피드백 */
  --dur-hover: 180ms;   /* 호버 */
  --dur-enter: 560ms;   /* 스크롤 등장 (마케팅이라 UI보다 길게 허용) */
}

/* ────────────────────────────────────────────────────────────
   1. 한글 줄바꿈 — 이번 개선에서 가장 눈에 띄는 부분
   기존에는 "PC·모바일 어 / 디서나", "부담돼 몇 년 / 째" 처럼
   단어 중간에서 잘렸다. 영문 기준 기본값(break word)이라 그렇다.
   한글은 단어 단위로 끊어야 읽힌다.
   ──────────────────────────────────────────────────────────── */
body,
h1, h2, h3, h4, h5, h6,
p, li, dt, dd, a, span, strong, em, label, button, th, td, figcaption {
  word-break: keep-all;
  overflow-wrap: break-word;   /* 아주 긴 URL 등은 예외적으로 끊는다 */
}

/* 제목은 줄 길이를 고르게, 본문은 마지막 줄에 한 단어만 남지 않게 */
h1, h2, h3 { text-wrap: balance; }
p          { text-wrap: pretty; }

/* ────────────────────────────────────────────────────────────
   2. 타이포그래피 — 한글 큰 글씨는 자간을 좁혀야 덩어리로 읽힌다
   ──────────────────────────────────────────────────────────── */
h1, h2 { letter-spacing: -.028em; }
h3     { letter-spacing: -.018em; }

/* 큰 디스플레이 텍스트는 행간도 함께 조인다 */
.text-4xl, .text-5xl, .text-6xl,
.md\:text-5xl, .md\:text-6xl { line-height: 1.18; }

/* 숫자가 섞인 지표는 자리수가 흔들리지 않게 */
.tabular, .stat, [class*="text-3xl"] strong { font-variant-numeric: tabular-nums; }

/* 본문 가독 폭 — 한 줄 65자 내외 */
.prose-limit, section p:not([class*="max-w"]) { max-width: 62ch; }

/* 영문 라벨은 반대로 자간을 벌린다 (기존 .en-label 보강) */
.en-label { letter-spacing: .18em; }

/* 이모지가 플랫폼별로 다르게(또는 흑백으로) 뜨는 것을 줄인다 */
body {
  font-family: 'Pretendard', system-ui, 'Apple Color Emoji',
               'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* ────────────────────────────────────────────────────────────
   3. 눌림 피드백 — 기존에는 :active 가 한 곳도 없었다
   버튼이 눌렸다는 걸 화면이 알려주지 않으면 "먹통" 처럼 느껴진다.
   ──────────────────────────────────────────────────────────── */
a[class*="rounded"], button, .btn, [role="button"], .qicon, .side-dock a, .side-dock button {
  transition: transform var(--dur-press) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out),
              background-color var(--dur-hover) ease,
              border-color var(--dur-hover) ease,
              color var(--dur-hover) ease;
}
a[class*="rounded"]:active, button:active, .btn:active,
[role="button"]:active, .qicon:active {
  transform: scale(.975);
}
.side-dock a:active, .side-dock button:active { transform: scale(.93); }

/* ────────────────────────────────────────────────────────────
   4. 호버는 마우스가 있는 기기에서만
   터치 기기는 탭할 때 호버가 걸려서 그대로 들린 채 남는다.
   ──────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .card-hover:hover { transform: translateY(-5px); }
  .qicon:hover      { transform: translateY(-6px); }
  .side-dock a:hover, .side-dock button:hover { transform: scale(1.08); }
  .split-img:hover img { transform: scale(1.04); }
}
@media not all and (hover: hover) {
  .card-hover:hover, .qicon:hover { transform: none; }
}

/* 기존 값 교정:
   .qicon 은 transition:all (무엇이 바뀔지 모른 채 전부 감시) → 위에서 속성 명시로 교체
   .split-img img 은 transform 6s (6초!) → 사람이 느낄 수 있는 길이로 */
.qicon { transition-property: transform, box-shadow; }
.split-img img { transition: transform 700ms var(--ease-out); }
.card-hover { transition: transform var(--dur-hover) var(--ease-out),
                          box-shadow var(--dur-hover) var(--ease-out); }

/* ────────────────────────────────────────────────────────────
   5. 키보드 초점 — 접근성 필수인데 없었다
   ──────────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #FF5B33;
  outline-offset: 3px;
  border-radius: 6px;
}
/* 어두운 배경 위에서는 초점 링을 밝게 */
.bg-navy a:focus-visible, .bg-navy button:focus-visible,
[class*="bg-navy"] a:focus-visible, [class*="bg-navy"] button:focus-visible {
  outline-color: #FFB59E;
}

/* 키보드 사용자용 본문 바로가기 */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: #0A2540; color: #fff; padding: 10px 18px;
  border-radius: 10px; font-weight: 700; font-size: 14px;
  transition: top var(--dur-hover) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ────────────────────────────────────────────────────────────
   6. 스크롤 등장 — 한 줄에 있는 카드들이 동시에 튀어나오지 않게
   30~80ms 씩 흘려보내면 훨씬 자연스럽다.
   ──────────────────────────────────────────────────────────── */
.js .reveal {
  transition: opacity var(--dur-enter) var(--ease-out),
              transform var(--dur-enter) var(--ease-out);
  transform: translateY(18px);   /* 26px 은 과했다 */
}
.js .grid > .reveal:nth-child(2) { transition-delay:  60ms; }
.js .grid > .reveal:nth-child(3) { transition-delay: 120ms; }
.js .grid > .reveal:nth-child(4) { transition-delay: 180ms; }
.js .grid > .reveal:nth-child(5) { transition-delay: 240ms; }
.js .grid > .reveal:nth-child(6) { transition-delay: 300ms; }

/* ────────────────────────────────────────────────────────────
   7. 앵커 이동 — sticky 헤더(64px)에 제목이 가려지던 문제
   ──────────────────────────────────────────────────────────── */
section[id], [id^="contact"], [id] { scroll-margin-top: 88px; }

/* ────────────────────────────────────────────────────────────
   8. 표면 질감 — 완전 평면은 값싸 보인다.
   아주 옅은 노이즈를 화면 전체에 고정으로 덮는다(클릭 방해 없음).
   ──────────────────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 어두운 섹션의 그림자는 검정 대신 배경 색조를 띠게 (조명 방향 통일) */
.shadow-card { box-shadow: 0 8px 30px -12px rgba(10, 37, 64, .16); }
.shadow-lift { box-shadow: 0 22px 48px -22px rgba(10, 37, 64, .32); }

/* 컨테이너는 부드럽게, 내부 요소는 더 조이게 — 반경을 한 값으로 통일하지 않는다 */
.qicon { border-radius: 18px; }
.qicon .plus { border-radius: 999px; }

/* ────────────────────────────────────────────────────────────
   9. 히어로 높이 — 100vh 계열은 모바일 사파리에서 주소창 때문에 튄다
   ──────────────────────────────────────────────────────────── */
.hero-full { min-height: min(85dvh, 700px); }

/* 히어로 배경 사진이 제목을 파고들지 않게 한 단계 더 눌러준다 */
.hero-full::before { opacity: .085; }

/* ────────────────────────────────────────────────────────────
   10. 모바일에서 플로팅 독이 CTA 를 가리던 문제
   390px 화면에서 48px 원 4개가 오른쪽에 쌓여 히어로의 "실제 제작 사례 보기"
   버튼과 카드 위에 얹혔다. 전환에 직접 손해라 모바일에서는 정리한다.
   홈·유지보수는 헤더 메뉴로 갈 수 있으니 빼고, 상담·맨위로만 남긴다.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .side-dock { right: 12px; bottom: 14px; gap: 8px; }
  .side-dock a[title="홈"],
  .side-dock a[title="유지보수 접수"] { display: none; }
  .side-dock a, .side-dock button { width: 42px; height: 42px; }
  .side-dock svg { width: 17px; height: 17px; }
}

/* ────────────────────────────────────────────────────────────
   11. 움직임 최소화 설정 존중
   "애니메이션 0" 이 아니라 "이동은 없애고 페이드만 남긴다".
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity 200ms ease; }
  .js .grid > .reveal { transition-delay: 0ms !important; }
  .card-hover:hover, .qicon:hover, .split-img:hover img { transform: none; }
  a:active, button:active, .qicon:active { transform: none; }
  .qicon:hover .plus { transform: none; }
}