/* ================================================================
   올빼미청소 ui-polish.css v1 — 2026-04-17
   Conversion-focused UX/UI enhancements. Drop-in addition to style.css.
   ================================================================ */

/* ── CRITICAL: Remove duplicate mobile CTA bar (sticky-actions) ───
   float-cta-bar가 예쁜 대체재로 이미 존재. sticky-actions은 중복이므로 강제 숨김 */
@media screen and (max-width: 900px) {
  html body .sticky-actions,
  .sticky-actions,
  div.sticky-actions { display: none !important; visibility: hidden !important; }
}
@media screen and (max-width: 768px) {
  html body .sticky-actions,
  .sticky-actions,
  div.sticky-actions { display: none !important; visibility: hidden !important; }
}
@media screen and (max-width: 640px) {
  html body .sticky-actions,
  .sticky-actions,
  div.sticky-actions { display: none !important; visibility: hidden !important; }
}


/* ── 1. 공통 부드러움 + 전환 속도 개선 ─────────────────────── */
*{-webkit-tap-highlight-color:rgba(3,199,90,.15)}
a,button,.btn,.card,.info-link-card,.catalog-card,.service-icon-card,
.related-card,.area-card,.local-region-item,details summary{
  transition:transform .18s cubic-bezier(.25,.8,.25,1),
             box-shadow .18s cubic-bezier(.25,.8,.25,1),
             background-color .15s,border-color .15s,color .15s;
  will-change:transform;
}

/* ── 2. 버튼 고도화 ────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:48px;padding:13px 22px;font-size:15px;font-weight:700;
  border-radius:10px;letter-spacing:-.01em;position:relative;overflow:hidden;
}
.btn.primary{
  background:linear-gradient(135deg,#03C75A 0%,#02b04e 100%);
  box-shadow:0 4px 14px rgba(3,199,90,.35),inset 0 1px 0 rgba(255,255,255,.2);
}
.btn.primary:hover{
  background:linear-gradient(135deg,#02b04e 0%,#018a40 100%);
  box-shadow:0 8px 24px rgba(3,199,90,.45),inset 0 1px 0 rgba(255,255,255,.2);
  transform:translateY(-2px);
}
.btn.primary::after{
  content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;
  background:rgba(255,255,255,.5);opacity:0;border-radius:100%;
  transform:scale(1,1) translate(-50%,-50%);transform-origin:50% 50%;
}
.btn.primary:focus:not(:active)::after{animation:ripple 1s ease-out}
@keyframes ripple{
  0%{transform:scale(0,0) translate(-50%,-50%);opacity:.5}
  100%{transform:scale(20,20) translate(-50%,-50%);opacity:0}
}

/* ── 3. 전화번호 강조 배지 (전환 강화) ────────────────────── */
.phone-badge{
  display:inline-flex;align-items:center;gap:10px;padding:12px 20px;
  background:#fff;border:2px solid var(--green);border-radius:14px;
  color:var(--green-d);font-size:16px;font-weight:800;letter-spacing:-.02em;
  box-shadow:0 3px 10px rgba(3,199,90,.15);
}
.phone-badge .pulse-ring{
  width:10px;height:10px;background:var(--green);border-radius:50%;
  animation:pulse-ring 2s infinite;position:relative;
}
.phone-badge .pulse-ring::after{
  content:"";position:absolute;inset:-4px;border:2px solid var(--green);
  border-radius:50%;animation:pulse-wave 2s infinite;
}
@keyframes pulse-wave{
  0%{opacity:1;transform:scale(.7)}
  100%{opacity:0;transform:scale(1.8)}
}
@keyframes pulse-ring{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.15);opacity:.85}
}

/* ── 4. 스크롤 진행 인디케이터 ─────────────────────────────── */
.reading-progress{
  position:fixed;top:0;left:0;height:3px;z-index:9999;
  background:linear-gradient(90deg,#03C75A 0%,#0f7a3c 100%);
  width:0%;transition:width .1s linear;box-shadow:0 1px 4px rgba(3,199,90,.4);
}

/* ── 5. 카드 호버 업그레이드 ──────────────────────────────── */
.card,.info-link-card,.catalog-card,.service-icon-card,.related-card{
  position:relative;
}
.card:hover,.info-link-card:hover,.related-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.05);
  border-color:var(--green-bd);
}
.catalog-card:hover,.service-icon-card:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 8px 20px rgba(0,0,0,.1);
  border-color:var(--green);
}

/* ── 6. 모바일 하단 바 중복 제거 ──────────────────────────── */
@media(max-width:900px){
  /* float-cta-bar(아래 라운드 CTA 바)가 이미 있으므로 
     중복되는 sticky-actions(위 얇은 바)는 모바일에서 숨김 처리 */
  .sticky-actions{display:none !important}
  /* float-cta-bar가 있는 페이지는 body padding 필요 없으나 
     다른 페이지에서는 안전하게 유지 */
  
  .sticky-actions{
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    backdrop-filter:blur(8px);background:rgba(255,255,255,.96);
    border-top:1px solid rgba(0,0,0,.08);
  }
  .sticky-actions .inner{gap:6px}
  .sticky-actions .btn{
    flex:1;min-height:44px;padding:10px 6px;font-size:13px;font-weight:700;
    border-radius:8px;
  }
  .sticky-actions .btn.primary{flex:1.3}
  .sticky-actions .live-dot{
    display:inline-block;width:7px;height:7px;background:#4ade80;
    border-radius:50%;margin-right:4px;animation:livepulse 1.4s infinite;
  }
  @keyframes livepulse{
    0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.7)}
    50%{box-shadow:0 0 0 6px rgba(74,222,128,0)}
  }
  /* 바디 패딩 추가해서 스티키바에 가려지지 않도록 */
  body{padding-bottom:72px}
}

/* ── 7. 긴급 호출 CTA 섹션 디자인 ─────────────────────────── */
.urgent-cta{
  background:linear-gradient(135deg,#0b1d33 0%,#1a4a7a 60%,#0f4a7a 100%);
  color:#fff;padding:56px 20px;margin:40px 0;border-radius:18px;
  position:relative;overflow:hidden;
}
.urgent-cta::before{
  content:"";position:absolute;top:-50%;right:-20%;width:400px;height:400px;
  background:radial-gradient(circle,rgba(3,199,90,.15) 0%,transparent 70%);
  pointer-events:none;
}
.urgent-cta-content{position:relative;z-index:2;text-align:center}
.urgent-cta h2{color:#fff;font-size:28px;margin:0 0 12px;letter-spacing:-.03em}
.urgent-cta p{color:rgba(255,255,255,.85);font-size:16px;margin:0 0 24px;line-height:1.7}
.urgent-cta .phone-giant{
  display:inline-block;font-size:32px;font-weight:900;color:#4ade80;
  letter-spacing:-.02em;margin:8px 0;text-decoration:none;
}
.urgent-cta .phone-giant:hover{color:#86efac}
.urgent-cta .meta-chips{
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px;
}
.urgent-cta .meta-chip{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  padding:6px 14px;border-radius:999px;font-size:13px;color:rgba(255,255,255,.9);
  backdrop-filter:blur(4px);
}
@media(max-width:640px){
  .urgent-cta{padding:40px 16px}
  .urgent-cta h2{font-size:22px}
  .urgent-cta .phone-giant{font-size:26px}
}

/* ── 8. 가격표 개선 (가격 투명성) ────────────────────────── */
.price-table{
  background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04);
  border:1px solid var(--bd);
}
.price-row{
  display:grid;grid-template-columns:1.3fr 1fr 2fr;gap:16px;padding:18px 22px;
  align-items:center;border-bottom:1px solid var(--bd);transition:background .15s;
}
.price-row:last-child{border-bottom:none}
.price-row:hover{background:var(--bg2)}
.price-row strong{color:var(--navy);font-size:15px;font-weight:700}
.price-row span{color:var(--green-d);font-size:17px;font-weight:800;letter-spacing:-.01em}
.price-row em{color:var(--text2);font-size:13px;font-style:normal;line-height:1.6}
@media(max-width:640px){
  .price-row{grid-template-columns:1fr;gap:4px;padding:16px 18px}
  .price-row span{font-size:18px}
  .price-row em{font-size:12.5px}
}

/* ── 9. FAQ (<details>) 디자인 ────────────────────────────── */
.faq details{
  background:#fff;border:1px solid var(--bd);border-radius:10px;
  margin-bottom:10px;overflow:hidden;
}
.faq details[open]{
  border-color:var(--green);box-shadow:0 3px 10px rgba(3,199,90,.08);
}
.faq summary{
  padding:16px 20px;font-size:14.5px;font-weight:700;color:var(--navy);
  cursor:pointer;list-style:none;position:relative;padding-right:48px;
  line-height:1.55;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border:1.5px solid var(--bd2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:600;color:var(--text2);transition:all .2s;
}
.faq details[open] summary::after{
  content:"−";background:var(--green);color:#fff;border-color:var(--green);
}
.faq details p{
  padding:4px 20px 20px;color:var(--text2);font-size:14px;line-height:1.8;margin:0;
}
.faq details:hover:not([open]) summary{background:var(--bg2)}

/* ── 10. 프로세스 플로우 업그레이드 ──────────────────────── */
.process-flow{
  display:flex;align-items:center;justify-content:center;gap:4px;
  flex-wrap:wrap;margin:24px 0;
}
.process-step{
  flex:0 0 auto;min-width:140px;padding:20px 16px;background:#fff;
  border:2px solid var(--bd);border-radius:14px;text-align:center;
  transition:all .3s cubic-bezier(.25,.8,.25,1);position:relative;
}
.process-step:hover{
  border-color:var(--green);transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(3,199,90,.15);
}
.process-step .process-num{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:28px;height:28px;background:var(--green);color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;
}
.process-step .process-icon{font-size:28px;margin:6px 0 8px}
.process-step strong{display:block;color:var(--navy);font-size:14px;margin-bottom:4px}
.process-step span{font-size:12px;color:var(--text3)}
.process-arrow{
  color:var(--bd2);font-size:22px;font-weight:700;flex:0 0 auto;
}
@media(max-width:640px){
  .process-flow{flex-direction:column;gap:10px}
  .process-arrow{transform:rotate(90deg)}
  .process-step{width:100%;max-width:280px;min-height:unset}
}

/* ── 11. 트러스트 배지 개선 ───────────────────────────────── */
.trust-row{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:16px 0;margin:20px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);
}
.trust-item{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  background:#fff;border:1px solid var(--bd);border-radius:999px;
  font-size:13px;font-weight:600;color:var(--text2);
}
.trust-item .icon{font-size:16px}

/* ── 12. 실시간 활동 표시 (사회적 증거) ──────────────────── */
.live-activity{
  position:fixed;bottom:90px;left:16px;z-index:800;
  background:#fff;border-radius:12px;padding:12px 16px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);border:1px solid var(--bd);
  max-width:280px;font-size:13px;animation:slideUp .5s ease;
  display:none;
}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.live-activity.show{display:block}
.live-activity strong{color:var(--navy);display:block;font-size:13.5px}
.live-activity small{color:var(--text3);font-size:11.5px}
.live-activity .dot{
  display:inline-block;width:8px;height:8px;background:#4ade80;
  border-radius:50%;margin-right:6px;animation:livepulse 1.4s infinite;
}
.live-activity .close-btn{
  position:absolute;top:6px;right:8px;width:20px;height:20px;
  border-radius:50%;background:var(--bg2);color:var(--text3);
  font-size:14px;line-height:18px;text-align:center;cursor:pointer;border:none;
}
@media(max-width:640px){
  .live-activity{bottom:78px;left:12px;right:12px;max-width:unset}
}

/* ── 13. 가격 스티커 (서비스 카드에) ─────────────────────── */
.price-sticker{
  position:absolute;top:10px;right:10px;
  background:linear-gradient(135deg,#03C75A,#02b04e);color:#fff;
  font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;
  box-shadow:0 2px 6px rgba(3,199,90,.3);
}

/* ── 14. Skeleton 로딩 상태 ──────────────────────────────── */
.skeleton{
  background:linear-gradient(90deg,var(--bg2) 25%,var(--bg) 50%,var(--bg2) 75%);
  background-size:200% 100%;animation:skeletonShimmer 1.4s infinite;border-radius:8px;
}
@keyframes skeletonShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ── 15. 접근성: 포커스 링, 스킵 링크, 모션 감소 ────────── */
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}
.btn:focus-visible{outline-offset:4px}

.skip-link{
  position:fixed;top:-48px;left:16px;z-index:10000;
  background:var(--green);color:#fff;padding:10px 18px;
  font-weight:700;border-radius:0 0 10px 10px;transition:top .2s;
}
.skip-link:focus{top:0}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .pulse-ring::after,.live-dot{animation:none !important}
}

/* ── 16. 다크모드 — 2026-04-17 비활성화 ─────────────────────
   라이트 테마로 통일, 자동 색상 전환 제거 */
/*
@media(prefers-color-scheme:dark){
  body.dark-auto .faq details{background:#1a2332;border-color:#2a3b52}
  body.dark-auto .faq summary{color:#e8f0f8}
  body.dark-auto .faq details p{color:#cbd5e1}
}
*/

/* ── 17. 버튼 row 모바일 레이아웃 ────────────────────────── */
.button-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0}
@media(max-width:640px){
  .button-row{flex-direction:column;gap:8px}
  .button-row .btn{width:100%;min-height:48px}
}

/* ── 18. 섹션 타이틀 강화 ─────────────────────────────────── */
.section-head h2{
  font-size:26px;font-weight:800;color:var(--navy);
  letter-spacing:-.03em;margin:0 0 8px;line-height:1.35;
}
.section-head p{color:var(--text2);font-size:15px;line-height:1.7;margin:0}
@media(max-width:640px){
  .section-head h2{font-size:20px}
  .section-head p{font-size:14px}
}

/* ── 19. 네비 메뉴 모바일 햄버거 애니메이션 ─────────────── */
.menu-toggle svg{transition:transform .2s}
.menu-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}

/* ── 20. 인쇄 스타일 (견적서 인쇄용) ─────────────────────── */
@media print{
  body{font-size:12pt;color:#000;background:#fff}
  .topbar,.site-header,.sticky-actions,.float-sidebar,.urgent-cta,
  .mid-cta,.live-activity,.reading-progress,.menu-toggle{display:none !important}
  .section{padding:16pt 0;page-break-inside:avoid}
  a{color:#000;text-decoration:underline}
  .price-row{page-break-inside:avoid}
  h1,h2,h3{page-break-after:avoid}
}

/* ── 21. 신뢰 배지 세로 스트립 (데스크톱 플로팅) ──────── */
.trust-float{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:800;
  display:flex;flex-direction:column;gap:10px;
}
.trust-float .trust-badge-mini{
  display:flex;flex-direction:column;align-items:center;
  background:#fff;border:1px solid var(--bd);border-radius:12px;
  padding:10px 8px;box-shadow:0 4px 12px rgba(0,0,0,.08);
  min-width:68px;font-size:11px;color:var(--text2);line-height:1.4;
  text-align:center;
}
.trust-float .trust-badge-mini .num{
  font-size:18px;font-weight:800;color:var(--navy);margin-bottom:2px;
}
.trust-float .trust-badge-mini .label{font-size:10.5px;color:var(--text3)}
@media(max-width:1100px){.trust-float{display:none}}

/* ── 22. 별점 인라인 표시 ─────────────────────────────────── */
.star-rating{display:inline-flex;align-items:center;gap:4px;font-size:13px}
.star-rating .stars{color:#fbbf24;letter-spacing:-1px;font-size:15px}
.star-rating .score{color:var(--navy);font-weight:800}
.star-rating .count{color:var(--text3)}

/* ── 23. 상단 공지바 라이브 업그레이드 ───────────────────── */
.topbar-live,.topbar{
  background-image:linear-gradient(90deg,
    rgba(3,199,90,.15) 0%,rgba(3,199,90,0) 50%,rgba(3,199,90,.15) 100%);
  background-size:200% 100%;animation:shimmer 6s linear infinite;
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ── 24. 히어로 섹션 타이포 개선 ─────────────────────────── */
.page-box h1,.hero-card h1{
  font-size:clamp(24px,4.5vw,38px);line-height:1.25;letter-spacing:-.04em;
  font-weight:900;margin-bottom:16px;
}
.page-box .lead,.hero-card .lead{
  font-size:clamp(14.5px,2vw,16.5px);line-height:1.75;letter-spacing:-.01em;
}

/* ── 25. 반응형 그리드 파인튜닝 ──────────────────────────── */
.service-grid,.reason-grid,.material-grid,.related-grid{
  display:grid;gap:14px;
}
.service-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.reason-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.material-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.related-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media(max-width:640px){
  .service-grid,.reason-grid,.material-grid,.related-grid{grid-template-columns:1fr}
}

/* ── 26. 클릭 가능한 카드 전체 영역 ──────────────────────── */
a.card,a.related-card,a.info-link-card,a.area-card{
  display:block;color:inherit;text-decoration:none;
}

/* ── 27. 로딩 지연 방지 (CLS 축소) ───────────────────────── */
img[loading="lazy"]{aspect-ratio:attr(width) / attr(height)}
img:not([width]):not([height]){aspect-ratio:auto}

/* ── 28. 한국어 타이포 최적화 ──────────────────────────────── */
body,p,li,td,th,.lead{word-break:keep-all;line-break:strict;overflow-wrap:break-word}
h1,h2,h3,h4,h5,h6{word-break:keep-all;line-break:strict}

/* ── 29. 2026-04-17 FAB 스택 완전 숨김 ──────────────────────
   .fab-stack은 ui-interactions.js가 동적 생성하는 아래쪽 원형 FAB.
   .float-sidebar(위쪽 세로바)와 역할 중복 → PC·모바일 전부 숨김. */
.fab-stack,
html body .fab-stack,
div.fab-stack{display:none !important;visibility:hidden !important}

/* ── 30. 2026-04-17 모바일 플로팅 세로바 ────────────────────
   PC와 동일하게 스크롤 중에도 따라다니는 오른쪽 세로바.
   - 컴팩트 원형 아이콘(42px) + 반투명 배경으로 시야 방해 최소
   - 전화·문자·카톡·틱톡 4개 (블로그는 모바일에서 숨김)
   - 수직 중앙 배치 → 상단 헤더·하단 가로바와 충돌 없음
*/
@media (max-width:900px){
  html body .float-sidebar{
    display:flex !important;
    visibility:visible !important;
    position:fixed;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    flex-direction:column;
    gap:7px;
    z-index:800;
    bottom:auto;
    padding:0;
    margin:0;
    background:transparent;
    border:none;
    pointer-events:auto;
  }
  /* 상담 가능 배지 — 모바일에선 공간 절약 위해 숨김 */
  html body .float-sidebar .float-status{display:none !important}
  /* 블로그 링크 — 사용자 요청(전화·문자·카톡·틱톡 4개만)에 따라 숨김 */
  html body .float-sidebar a[href*="blog.naver"]{display:none !important}

  /* 버튼: 원형 컴팩트 + 반투명 blur */
  html body .float-sidebar a{
    width:42px;height:42px;min-width:42px;min-height:42px;
    padding:0;border-radius:50%;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 2px 10px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.08);
    display:flex;align-items:center;justify-content:center;
    font-size:0;color:transparent;gap:0;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:transform .15s,box-shadow .15s;
  }
  html body .float-sidebar a:active{
    transform:scale(.9);
    box-shadow:0 1px 4px rgba(0,0,0,.15);
  }
  html body .float-sidebar a .fs-icon{
    font-size:19px;line-height:1;color:initial;
  }

  /* 카톡 버튼만 강조 (브랜드 컬러) */
  html body .float-sidebar a.kakao-float{
    background:rgba(254,229,0,.96);
    border-color:rgba(232,208,0,.8);
  }
}

/* 극소 화면(380px 이하)에서도 동일하게 보이도록 앞선 숨김 규칙 무력화 */
@media (max-width:380px){
  html body .float-sidebar{display:flex !important}
  html body .float-sidebar a{width:40px;height:40px;min-width:40px;min-height:40px}
  html body .float-sidebar a .fs-icon{font-size:18px}
}