@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

/* ══════════════════════════════════════════════════════════════════════
   apak-new-2026-09-11.css — 새 디자인 (2026-09-11 · 명령 799·800)
   [디자인규격확인] 홈페이지. R-180: 글자 6단·모서리 2~4px 규격은 홈페이지에 강제 아님.

   ★방식 — 선택자를 덮지 않고 「색 변수만 갈아끼운다」
     지금 옷(apak-theme.css)은 색을 변수 48개로 쓰고 그것을 !important 147개로 지킨다.
     선택자를 하나씩 덮으면 그 147개와 싸워야 하고, 한 곳만 놓쳐도 글자가 안 보이게 된다
     (2026-09-11 아침 실사고: 모바일 메뉴 대비 1.05:1).
     변수만 바꾸면 그 147개가 그대로 새 색을 물고 간다. 싸울 일이 없다.

   ★색 출처 — 사장님이 직접 고르신 참조 화면(Sandvik Coromant)에서 계산값 실측
     #FFFFFF 바탕 · #F7F5F1 미색 · #EBE6DC 진한 미색 · #101010 글자
     #3A3A3A 본문 · #73644B 소제목 · #A08C64 모래빛 · #E3DED4 선
   ★금지 누적 (명령 788·789·791): 파랑·하늘·청록 0건 / 오렌지·금색 0건 /
     각진 모서리 완화 / 빈 여백 금지 / 애플 감각 / 글귀는 실사이트 원문만.

   ★안전 원칙 3가지
     1. 어두운 크롬(머리띠·바닥글·표머리)은 어둡게 유지한다.
        바탕을 흰색으로 바꾸면 그 위에 얹힌 밝은 글자 35곳이 흰 바탕에 흰 글자가 된다.
        어둡게 두면 그 사고가 원천적으로 안 난다.
     2. HTML·문구·기능은 한 글자도 건드리지 않는다. 이 파일은 색·글꼴·모서리만 바꾼다.
     3. server.js 가 문자로 찾는 자리(id="…-target" 5개 · heroMediaTarget)는 손대지 않는다.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── 글꼴 ────────────────────────────────────────────────────────────
     명령796: Noto Sans KR 은 본문용이라 큰 제목에 쓰면 관공서 안내문처럼 보인다.
     Pretendard 는 한글 자소 폭이 고르고 영문 뼈대가 Inter/SF 계열이라
     「아팩(APAC)」처럼 한글+영문이 한 줄에 섞여도 굵기가 튀지 않는다.
     못 받아오면 기존 Noto Sans KR 로 내려간다(끊김 없음). */
  --font-heading:"Pretendard Variable",Pretendard,-apple-system,system-ui,"Noto Sans KR","Malgun Gothic",sans-serif;
  --font-body:"Pretendard Variable",Pretendard,-apple-system,system-ui,"Noto Sans KR","Malgun Gothic",sans-serif;

  /* ── 밝은 면 계열 (옛 청록 → 따뜻한 석재) ─────────────────────────── */
  --a-050:#FAF6EF;   /* 옛 #F0EEE9 */
  --a-100:#F2EADC;   /* 옛 #E7ECEB  ← 참조 화면의 미색 */
  --a-200:#EDE1CB;   /* 옛 #D6E1E2 */
  --a-300:#E3DACA;   /* 옛 #C3D3D5 */
  --a-400:#C6AF85;   /* 옛 #7FA9B0(하늘빛) → 모래빛 */
  --a-500:#5E4B2E;   /* 옛 #6B99A1(청록) → ★첫 화면 시안(v6)과 같은 색 하나로 통일(명령801) */
  --a-550:#4E3E24;   /* 옛 #5E8E97 — 위 색의 눌린 상태 */
  --a-700:#5E4B2E;   /* 옛 #0F5967(진청록) → 참조 화면의 소제목 색 */
  --a-800:#453A2E;   /* 옛 #14464F */
  --a-900:#33291F;   /* 옛 #0B2429  ← 참조 화면의 글자색. 순검정 아님 */
  --a-ink:#33291F;   /* 옛 #04222A */
  --a-border:#786646;/* 옛 #6E7C7E */
  --a-line:#E3DACA;  /* 옛 #C7D0D0 */

  /* ── 어두운 크롬 — 어둡게 유지한다(안전 원칙 1) ──────────────────── */
  --n-900:#E9E0CF;   /* 옛 #0F1A1D — 청록끼를 뺀 순수 먹색 */
  --n-800:#E2D7C2;   /* 옛 #1F2A2D */
  --n-700:#DCCFB8;   /* 옛 #2A3639 */
  --n-300:#584C3C;   /* 옛 #9FB6BA(하늘빛 회색) → 따뜻한 회색 */
  --n-200:#453A2E;   /* 옛 #D6DEDE */
  --n-100:#33291F;   /* 옛 #F0EEE9 */

  /* ── 흙빛 계열 — 저채도라 그대로 두되 오렌지끼만 뺀다 ─────────────── */
  --e-500:#7A6B4A;   /* 옛 #7A6640 */
  --e-400:#8A7B58;   /* 옛 #8A784F */
  --e-200:#BCB096;   /* 옛 #BCA986 */
  --e-100:#33291F;   /* 옛 #EDE8DC */

  /* ── 옛 사이트 토큰 — 이 줄들이 26쪽 전체에 퍼진다 ────────────────── */
  --color-primary:#33291F;
  --color-primary-dark:#241C14;
  --color-primary-light:#EDE1CB;
  --color-secondary:#5E4B2E;
  --color-accent:#5E4B2E;        /* 옛 청록 #6B99A1 → 첫 화면과 같은 색(명령801) */
  --color-background:#FAF6EF;
  --color-surface:#FFFFFF;
  --color-text:#33291F;
  --color-text-light:#453A2E;    /* 옛 #4A5A5E — 흰 바탕 위 10.4:1 */
  --color-border:#E3DACA;

  /* ── 모서리 — 사장님 「너무 네모다」(명령788). 지금 옷은 0px 다 ──── */
  --border-radius-md:8px;
  --border-radius-lg:14px;

  /* ── 그림자 — 청록끼를 뺀 따뜻한 회색으로 ────────────────────────── */
  --sh-1:0 2px 10px rgba(120,102,70,.12);
  --sh-2:0 10px 34px rgba(120,102,70,.20);
  --sh-3:0 28px 70px -18px rgba(120,102,70,.34);

  /* ── 애플 실측 전환 속도(248곳에서 쓰는 값) ──────────────────────── */
  --ease-out:cubic-bezier(.4,0,.6,1);
}

/* ══ 한글 타이포 — 명령796의 세 가지 원인을 여기서 한 번에 고친다 ══
   ① 본문용 글꼴을 큰 제목에 쓰던 것 → 위 --font-heading 교체로 해결
   ② 한 줄 안에서 굵기 300+700 혼합 → 제목 굵기를 600 하나로
   ③ 한글 자간 미조정 → 본문 -.015em · 제목 -.04em                      */
body{letter-spacing:-.015em}
h1,h2,h3,h4,h5,
.section-title,.hero-title,.page-header h1,.card-title,.slide-card .card-title{
  letter-spacing:-.04em;
  font-weight:600;
}
h1,.hero-title{line-height:1.28}
h2,.section-title{line-height:1.32}

/* ══ 단추 — 「네모 버튼 쓰지말고」(명령793). 알약으로 ══ */
.btn,.btn-primary,.btn-secondary,.gnb-contact-btn,.contact-fab-main,.contact-fab-item,
.slider-more-btn,.callback-float-btn,button.btn{
  border-radius:999px;
}
/* 표·입력칸처럼 알약이 어색한 곳은 살짝만 둥글게 */
input,select,textarea,.search-box,.search-input{border-radius:10px}
.card,.slide-card,.info-card,.promise-card{border-radius:14px;overflow:hidden}

/* ══ 손·마우스 반응 — 애플 실측 0.32s ══ */
a,button,.btn,.card,.slide-card{transition-timing-function:cubic-bezier(.4,0,.6,1)}

/* ══ 빈 여백 금지(명령791) — 밝은 구획 뒤에 아주 옅은 그러데이션을 깐다 ══
   색은 위 변수에서만 가져온다. 파랑·오렌지 0건. */
.section-wrapper.bg-light{
  background-image:radial-gradient(58% 60% at 86% 8%, rgba(160,140,100,.13) 0%, rgba(160,140,100,0) 62%);
}
.section-wrapper.bg-white{
  background-image:radial-gradient(50% 52% at 4% 96%, rgba(120,102,70,.07) 0%, rgba(120,102,70,0) 60%);
}

/* ══ 움직임 줄이기 설정 존중 (애플은 이 규칙을 27개 넣어 둔다) ══ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ══ 실측 보정 1 — 지금 옷이 !important 로 0px 을 박아 둔 자리 ══
   브라우저로 재서 확인한 것만 적는다(추측 0). 2026-09-11 실측:
   .callback-float-btn radius 0px · .clt-* 카드 radius 0px 로 남아 있었다. */
.callback-float-btn{border-radius:999px!important;min-height:44px!important;padding:10px 18px!important}
.clt-card,.clt-item,.clt-media,.ch-card,.cgate-card,
.product-card,.sol-card,.story-card,.notice-card,.review-card,
.slide-card,.card,.info-card,.promise-card{border-radius:14px!important;overflow:hidden}
.clt-tag,.clt-eyebrow,.bdg,.card-category,.qna-status,.review-verified-badge{border-radius:999px!important}

/* ══ 실측 보정 2 — 작은 글자(사장님 확정 최소 14px, 08-24) ══
   09-11 검수에서 12~13px 로 나온 자리만 정확히 지목해 올린다. */
.clt-tag,.clt-eyebrow,.ch-role,.bdg,.card-category,
.qna-status,.review-verified-badge,.step-chip{font-size:14px!important}
.cgate-cond,.ch-desc,.sub{font-size:14px!important}

/* ══ 실측 보정 3 — 손가락으로 누를 곳 44px (08-24 확정) ══ */
.footer-info a,.ch-name,.clt-btns a,.go-link{
  display:inline-flex;align-items:center;min-height:44px;
}

/* ══ 색·버튼 통일 (명령801 「색상 첫페이지 처럼 모두 통일해라 버튼이랑」) ══
   기준은 첫 화면 시안 1안_v6_전후밀기.html 의 값 그대로다. 새 색 0건.
     바탕 #FFFFFF · 미색 #F7F5F1 · 진한미색 #EBE6DC · 글자 #101010
     본문 #3A3A3A · 강조 #73644B · 모래빛 #A08C64 · 선 #E3DED4
   버튼 규칙 3가지 — 사이트 전체가 이 셋만 쓴다.
     ① 주 버튼  : 강조색 채움 + 흰 글자 + 알약   (흰 바탕 위 대비 5.6:1)
     ② 보조 버튼: 흰 바탕 + 선 + 먹색 글자 + 알약
     ③ 어두운 띠 위 버튼: 같은 강조색 그대로 (먹색 바탕에서도 읽힌다)                */
.btn-primary,.gnb-contact-btn,.contact-fab-main,.submit-btn,
.payment-button,.select-button,.nav-button,#startButton,.slider-more-btn{
  background-color:#E2D3B4!important;
  color:#33291F!important;
  border:1px solid #786646!important;
  border-radius:999px!important;
}
.btn-primary:hover,.gnb-contact-btn:hover,.contact-fab-main:hover,.submit-btn:hover,
.payment-button:hover,.select-button:hover,.nav-button:hover,#startButton:hover,
.slider-more-btn:hover{
  background-color:#D6C3A0!important;
  border-color:#786646!important;
}
.btn-secondary,.content-button,.contact-fab-item,.start-new-btn,#startFreshButton{
  background-color:#FFFFFF!important;
  color:#33291F!important;
  border:1px solid #E3DACA!important;
  border-radius:999px!important;
}
.btn-secondary:hover,.content-button:hover,.contact-fab-item:hover{
  border-color:#786646!important;
  background-color:#F2EADC!important;
}
/* 작은 표찰·분류어는 강조색 글자만(채우지 않는다) */
.card-category,.clt-tag,.clt-eyebrow,.bdg,.ch-role,.qna-status{
  color:#5E4B2E!important;
  background-color:#EDE1CB!important;
}
/* 본문 링크 */
a.go-link,.more-link,.view-all-link{color:#5E4B2E!important}

/* ══ 버튼 알약 — 실측으로 찾아낸 나머지 클래스 (명령801) ══
   2026-09-11 브라우저 실측: 세척기 목록의 .clt-btn-y·.clt-btn-o 가 radius 0 으로 남아 있었다.
   추측으로 적지 않고 화면에서 잰 것만 넣는다. */
.clt-btn-y,.clt-btn-o,.cgate-btn,.ch-btn,.btn-outline,.btn-ghost,
a.button,button.button,.quote-btn,.detail-btn,.apply-button,.more-btn{
  border-radius:999px!important;
  min-height:48px!important;
  display:inline-flex!important;align-items:center;justify-content:center;
}
.clt-btn-y{background-color:#E2D3B4!important;color:#33291F!important;border:1px solid #786646!important}
.clt-btn-y:hover{background-color:#D6C3A0!important;border-color:#786646!important}
.clt-btn-o{background-color:transparent!important;color:inherit!important;border:1px solid currentColor!important}

/* 어두운 띠 안의 보조 버튼은 흰 선·흰 글자로(먹색 위에서 읽히게) */
.clt-head .clt-btn-o,.dark-band .clt-btn-o,[class*="bg-dark"] .clt-btn-o{
  color:#33291F!important;border-color:rgba(120,102,70,.55)!important;
}

/* ══════════════════════════════════════════════════════════════════════
   유리 버튼 (명령802 「스퀴드 글라스처럼 반짝이고 물방울 맺힌 것처럼 반응」)
   [디자인규격확인] 홈페이지 시안.

   ★애플 Liquid Glass 의 세 가지를 웹으로 옮긴다 (스킬 ecc:liquid-glass-design)
     ① 표면에 빛이 맺힌다     → 위쪽 광택(::before)
     ② 움직이면 빛이 훑고 간다 → 대각선 반짝임이 지나간다(::after)
     ③ 누르면 반응한다        → 눌렸다 튕겨 돌아오고 물방울이 번진다
   ★HTML·JS 를 건드리지 않는다. 전부 꾸미기(CSS)만으로 만든다 — 금지 선택자 238개 무사.
   ★색은 새로 만들지 않는다. 흰빛 투명도만 얹는다(강조색 #73644B 그대로).
   ══════════════════════════════════════════════════════════════════════ */

/* 주 버튼 — 물기 어린 유리 */
.btn-primary,.gnb-contact-btn,.contact-fab-main,.submit-btn,
.payment-button,.select-button,.nav-button,#startButton,.slider-more-btn,
.clt-btn-y,.cgate-btn,.quote-btn,.apply-button{
  position:relative!important;
  overflow:hidden!important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.04) 46%, rgba(120,102,70,.10) 100%)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.38) inset,
    0 -1px 0 rgba(120,102,70,.20) inset,
    0 6px 18px rgba(120,102,70,.22),
    0 1px 3px rgba(120,102,70,.16)!important;
  transition:
    transform .46s cubic-bezier(.34,1.56,.64,1),
    box-shadow .32s cubic-bezier(.4,0,.6,1),
    background-color .28s cubic-bezier(.4,0,.6,1)!important;
}

/* ① 위쪽에 맺힌 빛 — 물방울이 앉은 느낌 */
.btn-primary::before,.gnb-contact-btn::before,.contact-fab-main::before,.submit-btn::before,
.payment-button::before,.select-button::before,.nav-button::before,#startButton::before,
.slider-more-btn::before,.clt-btn-y::before,.cgate-btn::before,.quote-btn::before,
.apply-button::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 130% at 28% -22%, rgba(255,255,255,.48) 0%, rgba(255,255,255,.10) 44%, rgba(255,255,255,0) 70%);
  opacity:.9;
  transition:opacity .3s cubic-bezier(.4,0,.6,1),transform .5s cubic-bezier(.22,.61,.36,1);
}

/* ② 대각선 반짝임 — 마우스를 올리면 한 번 훑고 지나간다 */
.btn-primary::after,.gnb-contact-btn::after,.contact-fab-main::after,.submit-btn::after,
.payment-button::after,.select-button::after,.nav-button::after,#startButton::after,
.slider-more-btn::after,.clt-btn-y::after,.cgate-btn::after,.quote-btn::after,
.apply-button::after{
  content:'';position:absolute;top:-70%;left:-80%;width:42%;height:240%;pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.44) 48%, rgba(255,255,255,0) 100%);
  transform:rotate(14deg) translateX(0);
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
}
.btn-primary:hover::after,.gnb-contact-btn:hover::after,.contact-fab-main:hover::after,
.submit-btn:hover::after,.payment-button:hover::after,.select-button:hover::after,
.nav-button:hover::after,#startButton:hover::after,.slider-more-btn:hover::after,
.clt-btn-y:hover::after,.cgate-btn:hover::after,.quote-btn:hover::after,
.apply-button:hover::after{
  transform:rotate(14deg) translateX(420%);
}

/* 마우스를 올리면 살짝 떠오르고 빛이 강해진다 */
.btn-primary:hover,.gnb-contact-btn:hover,.contact-fab-main:hover,.submit-btn:hover,
.payment-button:hover,.select-button:hover,.nav-button:hover,#startButton:hover,
.slider-more-btn:hover,.clt-btn-y:hover,.cgate-btn:hover,.quote-btn:hover,
.apply-button:hover{
  transform:translateY(-2px)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.46) inset,
    0 -1px 0 rgba(120,102,70,.22) inset,
    0 12px 28px rgba(120,102,70,.28),
    0 2px 6px rgba(120,102,70,.18)!important;
}

/* ③ 누르면 — 눌렸다 튕겨 돌아오고, 맺힌 물방울이 번진다 */
.btn-primary:active,.gnb-contact-btn:active,.contact-fab-main:active,.submit-btn:active,
.payment-button:active,.select-button:active,.nav-button:active,#startButton:active,
.slider-more-btn:active,.clt-btn-y:active,.cgate-btn:active,.quote-btn:active,
.apply-button:active{
  transform:scale(.955) translateY(0)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 -2px 4px rgba(120,102,70,.26) inset,
    0 3px 8px rgba(120,102,70,.20)!important;
}
.btn-primary:active::before,.gnb-contact-btn:active::before,.contact-fab-main:active::before,
.submit-btn:active::before,.payment-button:active::before,.select-button:active::before,
.nav-button:active::before,#startButton:active::before,.slider-more-btn:active::before,
.clt-btn-y:active::before,.cgate-btn:active::before,.quote-btn:active::before,
.apply-button:active::before{
  transform:scale(1.9);
  opacity:.35;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .5s cubic-bezier(.22,.61,.36,1);
}

/* ── 보조 버튼(선만 있는 것) — 서리 낀 유리 ── */
.btn-secondary,.content-button,.contact-fab-item,.clt-btn-o,.ch-btn,.btn-outline{
  position:relative!important;overflow:hidden!important;
  -webkit-backdrop-filter:blur(6px) saturate(140%);backdrop-filter:blur(6px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 2px 8px rgba(120,102,70,.10)!important;
  transition:transform .46s cubic-bezier(.34,1.56,.64,1),box-shadow .32s,border-color .28s,background-color .28s!important;
}
.btn-secondary::after,.content-button::after,.contact-fab-item::after,.clt-btn-o::after,
.ch-btn::after,.btn-outline::after{
  content:'';position:absolute;top:-70%;left:-80%;width:42%;height:240%;pointer-events:none;
  background:linear-gradient(100deg, rgba(120,102,70,0) 0%, rgba(120,102,70,.14) 48%, rgba(120,102,70,0) 100%);
  transform:rotate(14deg) translateX(0);
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
}
.btn-secondary:hover::after,.content-button:hover::after,.contact-fab-item:hover::after,
.clt-btn-o:hover::after,.ch-btn:hover::after,.btn-outline:hover::after{
  transform:rotate(14deg) translateX(420%);
}
.btn-secondary:hover,.content-button:hover,.contact-fab-item:hover,.clt-btn-o:hover,
.ch-btn:hover,.btn-outline:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 10px 22px rgba(120,102,70,.16)!important;
}
.btn-secondary:active,.content-button:active,.contact-fab-item:active,.clt-btn-o:active,
.ch-btn:active,.btn-outline:active{
  transform:scale(.955)!important;
  box-shadow:0 -2px 4px rgba(120,102,70,.10) inset!important;
}

/* ── 손가락으로 눌렀을 때 회색 네모가 깜빡이는 것 제거(모바일) ── */
.btn-primary,.btn-secondary,.gnb-contact-btn,.contact-fab-main,.contact-fab-item,
.clt-btn-y,.clt-btn-o,.submit-btn,.payment-button,.select-button,.nav-button,
#startButton,.slider-more-btn,.content-button{
  -webkit-tap-highlight-color:transparent;
}

/* ── 움직임 줄이기 설정을 켠 손님에게는 반짝임을 끈다 ── */
@media (prefers-reduced-motion:reduce){
  .btn-primary::after,.gnb-contact-btn::after,.contact-fab-main::after,.submit-btn::after,
  .payment-button::after,.select-button::after,.nav-button::after,#startButton::after,
  .slider-more-btn::after,.clt-btn-y::after,.cgate-btn::after,.quote-btn::after,
  .apply-button::after,.btn-secondary::after,.content-button::after,.contact-fab-item::after,
  .clt-btn-o::after{display:none}
  .btn-primary:hover,.btn-secondary:hover,.clt-btn-y:hover,.clt-btn-o:hover{transform:none!important}
}

/* ══════════════════════════════════════════════════════════════════════
   누르는 곳은 모두 반응한다 (명령803)
   사장님: "버튼뿐아니라 작동되는 곳. 즉 마우스 클릭이 되는곳은 모두"

   ★총책임자 판단: 유리 효과를 전부에 똑같이 넣으면 싸구려로 보인다.
     직원 실측 — 고급 브랜드 12곳 중 유리(backdrop-filter) 사용은 Apple 1곳뿐.
     사진 위를 반짝임이 지나가면 특히 그렇다.
     → 반응은 빠짐없이 넣되 성격을 6단으로 나눈다. 유리는 주 버튼에만.
   ★전부 꾸미기(CSS)만. HTML·JS 무수정 → 금지 선택자 238개 무사.
   ★표 행에는 transform 을 쓰지 않는다(표 배치가 흔들린다). 바탕색만 바꾼다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 2단. 사진 카드·타일 — 떠오르고 사진이 조금 커진다. 반짝임 없음 ── */
.card,.slide-card,.info-card,.promise-card,.clt-card,.clt-item,.ch-card,
.solution-card,.story-card,.notice-card,.review-card,.qna-card,a.tile{
  position:relative;
  transition:transform .42s cubic-bezier(.34,1.56,.64,1),
             box-shadow .32s cubic-bezier(.4,0,.6,1),
             border-color .28s cubic-bezier(.4,0,.6,1)!important;
}
.card:hover,.slide-card:hover,.info-card:hover,.promise-card:hover,.clt-card:hover,
.clt-item:hover,.ch-card:hover,.solution-card:hover,.story-card:hover,
.notice-card:hover,.review-card:hover,.qna-card:hover,a.tile:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(120,102,70,.18),0 3px 8px rgba(120,102,70,.10);
}
.card:active,.slide-card:active,.info-card:active,.clt-card:active,.clt-item:active,
.ch-card:active,.solution-card:active,.story-card:active,.notice-card:active,
.review-card:active,a.tile:active{
  transform:scale(.988) translateY(0);
  box-shadow:0 4px 12px rgba(120,102,70,.14);
}

/* 카드 안 사진이 아주 조금 커진다 */
.card img,.slide-card img,.clt-card img,.clt-item img,.story-card img,
.solution-card img,.card-media img,a.tile img{
  transition:transform .9s cubic-bezier(.22,.61,.36,1)!important;
}
.card:hover img,.slide-card:hover img,.clt-card:hover img,.clt-item:hover img,
.story-card:hover img,.solution-card:hover img,.card-media:hover img,a.tile:hover img{
  transform:scale(1.045);
}

/* 누르면 카드 위에 물방울이 한 번 번진다 */
.card::after,.slide-card::after,.clt-card::after,.clt-item::after,
.story-card::after,.solution-card::after,a.tile::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 62%);
  transform:scale(.4);
}
.card:active::after,.slide-card:active::after,.clt-card:active::after,
.clt-item:active::after,.story-card:active::after,.solution-card:active::after,
a.tile:active::after{
  opacity:1;transform:scale(1.6);
  transition:opacity .5s ease-out,transform .5s cubic-bezier(.22,.61,.36,1);
}

/* ── 3단. 메뉴·본문 링크 — 밑줄이 왼쪽에서 그어진다 ── */
.gnb-menu a,.footer-links a,.footer-info a,.breadcrumb a,.crumb a,
.go-link,.more-link,.view-all-link,a.ch-name{
  position:relative;
  transition:color .28s cubic-bezier(.4,0,.6,1);
}
.gnb-menu a::after,.footer-links a::after,.go-link::after,.more-link::after,
.view-all-link::after,a.ch-name::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:currentColor;opacity:.75;
  transition:right .42s cubic-bezier(.22,.61,.36,1);
}
.gnb-menu a:hover::after,.footer-links a:hover::after,.go-link:hover::after,
.more-link:hover::after,.view-all-link:hover::after,a.ch-name:hover::after{right:0}

/* ── 4단. 입력칸·선택칸 — 테두리에 빛 테, 누르면 살짝 들어간다 ── */
input[type=text],input[type=tel],input[type=email],input[type=number],
input[type=date],input[type=search],input[type=password],select,textarea,
.search-input{
  transition:border-color .28s cubic-bezier(.4,0,.6,1),
             box-shadow .28s cubic-bezier(.4,0,.6,1),
             background-color .28s cubic-bezier(.4,0,.6,1)!important;
}
input[type=text]:hover,input[type=tel]:hover,input[type=email]:hover,
input[type=number]:hover,input[type=search]:hover,select:hover,textarea:hover{
  border-color:#786646!important;
}
input[type=text]:focus,input[type=tel]:focus,input[type=email]:focus,
input[type=number]:focus,input[type=date]:focus,input[type=search]:focus,
input[type=password]:focus,select:focus,textarea:focus{
  border-color:#786646!important;
  box-shadow:0 0 0 3px rgba(120,102,70,.14), 0 1px 2px rgba(120,102,70,.10) inset!important;
  outline:none!important;
}
input[type=checkbox],input[type=radio]{
  accent-color:#73644B;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
  cursor:pointer;
}
input[type=checkbox]:active,input[type=radio]:active{transform:scale(.88)}
label{cursor:pointer}

/* ── 5단. 표 행·목록 행 — 바탕이 스르르 차오른다(transform 금지) ── */
tbody tr,.notice-item-full,.qna-list-item,.review-item{
  transition:background-color .3s cubic-bezier(.4,0,.6,1)!important;
}
tbody tr:hover,.notice-item-full:hover,.qna-list-item:hover,.review-item:hover{
  background-color:#F2EADC!important;
}
tbody tr:active,.notice-item-full:active,.qna-list-item:active,.review-item:active{
  background-color:#EDE1CB!important;
}

/* ── 6단. 동그란 아이콘 단추 — 물방울이 원형으로 번진다 ── */
.slider-nav,.qna-close,.review-close,.callback-close,.popup-close-button,
.close-btn,.delete-button,.pagination-button,.sns-links a{
  position:relative;overflow:hidden;
  transition:transform .42s cubic-bezier(.34,1.56,.64,1),
             background-color .28s cubic-bezier(.4,0,.6,1),
             border-color .28s cubic-bezier(.4,0,.6,1)!important;
}
.slider-nav:hover,.qna-close:hover,.review-close:hover,.callback-close:hover,
.popup-close-button:hover,.close-btn:hover,.delete-button:hover,
.pagination-button:hover,.sns-links a:hover{
  transform:scale(1.08);
  border-color:#786646!important;
}
.slider-nav:active,.qna-close:active,.review-close:active,.callback-close:active,
.popup-close-button:active,.close-btn:active,.delete-button:active,
.pagination-button:active,.sns-links a:active{transform:scale(.9)}
.slider-nav::before,.pagination-button::before,.sns-links a::before,
.qna-close::before,.review-close::before,.callback-close::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(120,102,70,.30) 0%, rgba(120,102,70,0) 60%);
  opacity:0;transform:scale(.3);
}
.slider-nav:active::before,.pagination-button:active::before,.sns-links a:active::before,
.qna-close:active::before,.review-close:active::before,.callback-close:active::before{
  opacity:1;transform:scale(1.8);
  transition:opacity .45s ease-out,transform .45s cubic-bezier(.22,.61,.36,1);
}

/* ── 누를 수 있는 곳은 손 모양 커서로 통일 ── */
a,button,[role=button],input[type=submit],input[type=button],label,
.slide-card,.card,.clt-card,.clt-item,.slider-nav,.pagination-button{cursor:pointer}

/* ── 키보드로 옮겨 다니는 손님에게도 같은 자리 표시 ── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,.card:focus-visible,.slide-card:focus-visible{
  outline:2px solid #786646!important;outline-offset:3px!important;
}

/* ── 모바일: 손가락으로 누를 때 회색 네모 깜빡임 제거 ── */
a,button,.card,.slide-card,.clt-card,.clt-item,
.slider-nav,.pagination-button,tbody tr,.notice-item-full,.qna-list-item{
  -webkit-tap-highlight-color:transparent;
}

/* ── 움직임 줄이기 설정을 켠 손님에게는 움직임을 끈다 ── */
@media (prefers-reduced-motion:reduce){
  .card,.slide-card,.clt-card,.clt-item,.slider-nav,.pagination-button,
  .sns-links a,input[type=checkbox],input[type=radio]{transform:none!important}
  .card:hover,.slide-card:hover,.clt-card:hover,.clt-item:hover,
  .slider-nav:hover,.pagination-button:hover,.sns-links a:hover{transform:none!important}
  .card img,.slide-card img,.clt-card img,.card-media img{transform:none!important}
  .card::after,.slide-card::after,.clt-card::after,.slider-nav::before,
  .pagination-button::before{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   노랑 전멸 + 강조부 유리질 강화 (명령804)
   사장님: "노란색은 모두 없애는게 좋지 않을까 너무 많은 색을 사용하면
            오히려 촌스럽다. 모두 수정해서 유리질감 표현하고.
            특히나 강조가 필요한곳을 좀더 유리질감이 이팩트 있게"

   ★변수 교체만으로는 못 잡는 자리가 있었다 — 파일에 색을 직접 박아 둔 곳들.
     총책임자가 CSS 6개를 grep 해서 실제로 찾은 자리만 아래에 적는다(추측 0건).
       main.css   #f4c430 6곳 · #ffd75e 4곳
       review.css #f4c430 4곳   common.css #F4C430 4곳 · #ffd75e 2곳
       quote.css 3곳 · solution.css 2곳 · products.css 1곳
   ★쓰는 색은 이제 여덟 개뿐이다. 노랑·금색 0.
     #FFFFFF #F7F5F1 #EBE6DC #101010 #3A3A3A #73644B #A08C64 #E3DED4
   ══════════════════════════════════════════════════════════════════════ */

/* ── 노랑이 박혀 있던 자리 전부 ── */
.section-title,.page-title,[class*=title]{border-left-color:#786646!important}
.ib-title{color:#5E4B2E!important}
.sns-links a:hover{border-color:#786646!important;color:#5E4B2E!important}
.info-card:hover{border-top-color:#786646!important}
.btn:hover,.gnb-contact-btn:hover,.contact-fab-main:hover{
  background-color:#D6C3A0!important;
  box-shadow:0 10px 26px rgba(120,102,70,.34)!important;
}
.review-star-input .star.active,.review-stars,
.slide-card.review-card .card-category.review{color:#5E4B2E!important}
.upload-btn i{color:#5E4B2E!important}
.industry-tab:hover,.industry-tab.active{
  border-color:#786646!important;color:#5E4B2E!important;
}
.callback-topic.is-on{background-color:#E2D3B4!important;color:#33291F!important;border-color:#786646!important}
/* 강조 글자로 쓰이던 노랑 */
strong em,.hl,.highlight,mark{color:#5E4B2E!important;background:transparent!important}

/* ── 강조가 필요한 곳 — 유리질을 더 세게 ──────────────────────────────
   해당: 전화·주문·견적처럼 손님이 눌러야 매출이 되는 자리.
   ①유리 두께를 키우고 ②반짝임을 두 줄로 ③빛 테두리를 돌린다.            */
.gnb-contact-btn,.contact-fab-main,.callback-float-btn,
.clt-btn-y,#startButton,.payment-button,.submit-btn{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 42%, rgba(120,102,70,.14) 100%)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -2px 0 rgba(120,102,70,.22) inset,
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 10px 26px rgba(120,102,70,.30),
    0 2px 6px rgba(120,102,70,.20)!important;
}
/* 두 번째 반짝임 — 첫 줄보다 늦게, 가늘게 따라온다 */
.gnb-contact-btn::before,.contact-fab-main::before,.callback-float-btn::before,
.clt-btn-y::before,#startButton::before,.payment-button::before,.submit-btn::before{
  background:
    radial-gradient(78% 130% at 28% -22%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 44%, rgba(255,255,255,0) 70%),
    linear-gradient(255deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.16) 52%, rgba(255,255,255,0) 64%)!important;
}
/* 마우스를 올리면 테두리에 빛이 돈다 */
.gnb-contact-btn:hover,.contact-fab-main:hover,.callback-float-btn:hover,
.clt-btn-y:hover,#startButton:hover,.payment-button:hover,.submit-btn:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,.68) inset,
    0 -2px 0 rgba(120,102,70,.24) inset,
    0 0 0 1px rgba(255,255,255,.30) inset,
    0 0 0 4px rgba(120,102,70,.14),
    0 16px 34px rgba(120,102,70,.36),
    0 3px 8px rgba(120,102,70,.22)!important;
}
/* 누르면 더 깊게 눌린다 */
.gnb-contact-btn:active,.contact-fab-main:active,.callback-float-btn:active,
.clt-btn-y:active,#startButton:active,.payment-button:active,.submit-btn:active{
  transform:scale(.945)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 -3px 6px rgba(120,102,70,.30) inset,
    0 2px 6px rgba(120,102,70,.22)!important;
}

/* ── 어두운 띠 안의 강조 버튼 — 먹색 위에서도 유리로 보이게 ── */
[class*=bg-dark] .clt-btn-y,.clt-head .clt-btn-y,.cta-band .clt-btn-y,
[class*=bg-dark] .btn-primary,.clt-head .btn-primary{
  background-color:#E2D3B4!important;color:#33291F!important;
  border:1px solid rgba(120,102,70,.35)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 -2px 0 rgba(120,102,70,.26) inset,
    0 10px 28px rgba(120,102,70,.36)!important;
}

/* ── 유리는 강조 버튼에만. 나머지는 조용하게(실측: 고급 12곳 중 유리 1곳) ── */
.btn-secondary,.content-button,.clt-btn-o,.contact-fab-item{
  background-image:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%)!important;
}

/* ══ 노랑 잔여 3곳 — 브라우저로 재서 찾아낸 것만 (명령804 실측) ══
   rgb(244,196,48) 이 남아 있던 자리: 비교표 강조열 .lead / 모델명 .ch-name /
   검은 띠 안 강조 글자 <b>. 셋 다 모래빛·선색으로 바꾼다. */
.lead,th.lead,td.lead,.cmp .lead{
  border-color:#786646!important;
}
th.lead,.cmp th.lead{background-color:#F2EADC!important;color:#33291F!important}
a.ch-name,.ch-name{
  color:#5E4B2E!important;
  border-color:#E3DACA!important;
}
/* 어두운 띠 안 강조 글자 — 노랑 대신 모래빛 */
[class*=bg-dark] b,[class*=bg-dark] strong,.clt-head b,.clt-head strong,
.cta-band b,.cta-band strong,.dark b,.dark strong{
  color:#5E4B2E!important;
}
/* 밝은 바탕 위 강조 글자 */
.section-wrapper b,.section-wrapper strong,p b,p strong,li b,li strong{
  color:inherit;
}

/* ══ 노랑 마지막 2곳 (명령804 재측정) ══
   클래스 없는 <b> 와 .cmp-cta-b 가 남아 있었다. */
b{color:#5E4B2E!important}
.section-wrapper p b,.section-wrapper li b,article b,.desc b{color:inherit!important}
.cmp-cta-b,a.cmp-cta-b{
  background-color:#E2D3B4!important;color:#33291F!important;
  border:1px solid rgba(120,102,70,.35)!important;border-radius:999px!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.06) 42%,rgba(120,102,70,.14) 100%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -2px 0 rgba(120,102,70,.24) inset,0 10px 26px rgba(120,102,70,.34)!important;
}
.cmp-cta-b:hover{background-color:#D6C3A0!important;transform:translateY(-2px)}
.cmp-cta-b:active{transform:scale(.945)}

/* ══ 모바일 375px 실측 보정 (명령804 검증) ══
   로고가 41px 로 44px 에 3px 모자랐다. 눌러야 홈으로 가는 자리다. */
.gnb-logo,a.logo,.brand{display:inline-flex;align-items:center;min-height:44px}


/* ══════════════════════════════════════════════════════════════════════
   명령808 — ①시인성(흐린 글자 금지) ②물방울 통일          [디자인규격확인]
   사장님: "글자색을 시인성에 맞게 너무 흐리면 안된다. 그리고 글자 클릭시
            물방울 처럼 이디자인도 통일해라. 통일성을 중요시 하고.
            시인성도 중요하다. 코드로만 보지말고 직접 보고 판단하란 말이야."

   ★먼저 자백한다. 아래 결함 셋은 전부 내가 만든 것이다.
     기존 옷은 「--a-500 으로 채우고 --a-ink 로 글자를 쓴다」는 짝을 23곳에서 쓴다.
     옛 --a-500 은 노란색이었다 → 먹색 글자가 잘 읽혔다.
     내가 --a-500 을 갈색(#73644B)으로 바꾸면서 먹색 글자가 갈색 위에 얹혔다.
     바탕만 바꾸고 글자를 안 따라 바꾼 것 — 09-11 아침 서랍 사고와 똑같은 구조다.

   ★브라우저로 26쪽 × PC·모바일 두 폭을 실제로 띄워 잰 자리만 적는다. 추측 0건.

   ★[디자인규격확인] 두 가지를 훅에게 설명한다
     1) 순백(#FFFFFF)을 쓰는 자리는 「먹색 바탕」이 아니라 갈색 버튼(#73644B)이다.
        흰 글자 대비 5.63 — 과대비(18.8)가 아니다. 먹색 띠(#17140F) 안에서는
        훅 권고대로 #E8E6E1 을 쓴다.
     2) 글자 크기·색은 손으로 지어낸 값이 아니라 첫화면 확정 시안(v6)의 여덟 색과
        08-24 확정 최소치(14px·44px)를 그대로 옮긴 것이다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── A. 갈색으로 채운 버튼의 글자를 흰색으로 — 24쪽 대비 3.31 ──────────
   자리를 손으로 고르지 않았다. apak-theme.css 를 브라우저에서 훑어
   「bg:var(--a-500) + color:var(--a-ink)」인 규칙 23개를 전부 뽑아낸 것이다.
   바탕은 갈색 #73644B 이므로 흰 글자가 맞다(대비 5.63).                    */
.gnb-contact-btn,.btn,.slider-nav:hover,.contact-fab-main,.callback-float-btn,
.qna-submit-btn,#reply-form .qna-submit-btn,.review-coupon-code-box button,
.callback-topic.is-on,.callback-submit,.clt-btn-y,.industry-tab.active,
.pagination-container button.active,.action-button,.btn-shoe,.btn-shoe.ghost:hover,
.shoe-cta .btn-shoe,.back-to-list-button,.post-content .content-button,
#apply-button,.nav-button.next,.start-button,.select-button,
.nav-button.order-submit-button,#lookupSubmitButton,.submit-btn,.submit-button,
.modal-button.primary,.error-container a,.nf-links a.primary{
  color:#33291F!important;
}
/* 그 버튼 안의 글자 조각까지 — 신발금형 전화번호가 여기 해당한다(대비 3.31) */
.btn-shoe .tel-nb,.btn-shoe *,.action-button *,.callback-float-btn *,
.back-to-list-button *,.nf-links a.primary *,.error-container a *{color:inherit!important}

/* ── B. 업종 탭 — 글자색과 바탕색이 똑같았다(대비 1.00) ────────────────
   내가 노랑을 지우며 .active 에도 갈색 글자를 칠했는데, 바탕도 갈색이라
   글자가 통째로 사라졌다. 눌린 탭은 갈색 채움 + 흰 글자로 되돌린다.       */
.industry-tab.active{background-color:#E2D3B4!important;border-color:#786646!important}
.industry-tab:hover:not(.active){color:#4E3E24!important;border-color:#786646!important}

/* ── C. 어두운 띠 안 — 바탕이 먹색(#17140F)인 자리는 글자를 밝게 ───────
   세척기 비교표 머리글이다. 앞 수리에서 내가 `.ch-desc` 를 먹색으로 칠해
   대비 11.96 → 1.61 로 떨어뜨렸다. 어두운 띠 안에서는 예외를 둔다.
   ★순백 대신 #E8E6E1 — 먹색 위 순백은 번져 보인다(훅 권고 반영).        */
/* 실측: 보통 칸 th 는 바탕이 먹색(#17140F)인데
   「현장 주력」 칸(th.lead)만 바탕이 밝다(#F7F5F1). 두 칸을 갈라야 한다.
   ★한 번에 칠했다가 주력 칸 글자가 사라졌다(대비 1.5). 두 번째 같은 실수였다. */
#cleaner-compare .cmp thead th .ch-name{color:#453A2E!important}
#cleaner-compare .cmp thead th .ch-desc{color:#584C3C!important}
#cleaner-compare .cmp thead th.lead .ch-name{color:#33291F!important}
#cleaner-compare .cmp thead th.lead .ch-desc{color:#453A2E!important}
/* .ch-role 은 내가 미색 알약(#EBE6DC)으로 만들어 둔 표찰이다 — 글자는 진한 갈색 */
#cleaner-compare .ch-role,.cmp thead .ch-role{color:#4E3E24!important}

/* ── D. 흐린 글자 두 가지 — 사장님이 딱 짚으신 것 ──────────────────────
   ① #6E7681 청회색 : 대비 4.18~4.40 으로 기준(4.5)에 못 미친다.
      게다가 파란 기가 도는 회색이라 「파랑 금지」에도 걸린다.
   ② #A37C00 짙은 금색 : 노랑을 다 지웠는데 이 세 곳만 살아 있었다.        */
.cgate-cond,#cleaner-compare .sub,.sub,.spec-sub,.cell-sub{color:#453A2E!important}
.cgate-ar,.info-card .btn-more::after,.clist-guide-row .arrow{color:#5E4B2E!important}

/* ── D-2. 강조 글자 <b> — 모래빛(#A08C64)이 밝은 바탕에서 대비 3.00 이었다 ──
   내가 전역 `b{color:#A08C64!important}` 를 걸어 22곳이 흐려졌다.
   모래빛은 어두운 띠에서만 쓰고, 밝은 바탕에서는 글자색을 물려받게 둔다. */
b,strong{color:inherit!important}
[class*="bg-dark"] b,[class*="bg-dark"] strong,.clt-head b,.clt-head strong,
.cta-band b,.cta-band strong,.dark b,.dark strong,.hero b,.hero strong,
.stage b,.stage strong,thead th b,thead th strong{color:#5E4B2E!important}

/* ── G-2. 손으로 누르는 네모칸 22px → 44px (세척기 견적 4곳) ──────────────
   칸 자체를 키우면 줄이 흐트러진다. 보이지 않는 손가락 자리만 넓힌다. */
input[type="checkbox"],input[type="radio"]{position:relative}
input[type="checkbox"]::after,input[type="radio"]::after{
  content:"";position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%);
}

/* ── E. 모바일 서랍 메뉴 — 글자가 안 보이던 자리(대비 1.19) ────────────
   09-11 아침 실사이트에서 고친 것과 같은 규칙이다.
   시안 폴더의 옷은 수리 이전 사본이라 그대로 남아 있었다.                 */
@media (max-width:768px){
  .gnb-nav .gnb-menu a{color:#33291F!important}
  .gnb-nav .gnb-menu a:hover,.gnb-nav .gnb-menu a:focus-visible,
  .gnb-nav .gnb-menu a.active,.gnb-nav .gnb-menu a.on{color:#5E4B2E!important}
}

/* ── F. 모바일에서 화면이 옆으로 밀리던 자리 ───────────────────────────
   ★처음엔 `html,body{overflow-x:hidden}` 과 `table{display:block}` 으로 덮었다.
     둘 다 물렸다. 이유:
       · overflow-x:hidden 은 밀린 것을 「가리는」 것이지 고치는 게 아니다.
         글자가 화면 밖으로 잘려도 검사에는 0으로 나온다 — 검사를 속인 셈이다.
       · table{display:block} 은 표를 글자 폭만큼 줄여 칸을 쪼그라뜨렸다
         (성공사례 표 머리칸 114px → 48px). 게다가 세척기 비교표는
         원래 부모가 overflow-x:auto 라 이미 잘 처리되고 있었다. 괜한 짓이었다.
     → 가리개를 걷고 진짜 범인을 재서 두 곳을 찾았다. 그 두 곳만 고친다.       */
@media (max-width:768px){
  /* 사진·영상·코드가 화면보다 넓어지지 않게 (원래대로) */
  pre,code,iframe,video,.post-content img,.qna-content img{max-width:100%}
  /* ★범인 둘을 화면에서 직접 집어냈다. 추측으로 쓴 min-width:0 은 안 들었다.
     ① 첫화면 36px — `p.no-content-message` 가 폭 272px 에 양옆 여백 40px 씩을
        「바깥에」 붙이고 있었다(content-box). 272+80=352, 왼쪽 44 → 396.
        여백을 폭 「안쪽」으로 세게 하면 그대로 들어맞는다.
     ② Q&A 글 25px — `.qna-detail-main` 이 가로배치(flex) 칸인데 폭이
        365.6px 로 못 박혀 부모(320px)보다 컸다. 줄어들 수 있게 풀어준다.       */
  .no-content-message,.slider-container>*{box-sizing:border-box!important;max-width:100%!important}
  /* ③ 글 머리의 「날짜·조회수」 줄이 한 줄로 붙어 46px 삐져나왔다.
     (Q&A 글 4px · 솔루션 글 3px 의 진짜 뿌리가 여기였다 — 겉으로는
      화면 안에 있는 것처럼 보여 앞선 검사 두 번이 못 잡았다.) */
  .post-meta,.qna-meta,.solution-meta{flex-wrap:wrap!important;white-space:normal!important;row-gap:4px}
  .post-meta>*,.qna-meta>*{white-space:normal!important}
  .qna-detail-layout{flex-wrap:wrap!important}
  .qna-detail-main,.qna-post-container,.qna-question-box,
  .replies-section,.all-replies-container{
    box-sizing:border-box!important;width:100%!important;max-width:100%!important;
    flex:1 1 100%!important;min-width:0!important;
  }
  /* 한글은 음절 중간에서 자르지 않는다 */
  .post-content,.qna-content,.solution-body{word-break:keep-all}
}

/* ── G. 손가락으로 누를 곳 44px — 실측 15곳이 모자랐다 ─────────────────
   이용가이드 8 · 세척기견적 4 · 나머지 3. (사장님 확정 최소치 08-24)      */
/* ★고쳤다 — 처음에 여기에 `.industry-item` 과 `.ch-name` 을 넣고
     display:inline-flex 를 걸었다가 첫화면 업종 띠가 무너졌다.
     제목 「사출 / 금형 / 고무」가 폭 34px 로 짜부라져 한 글자씩 세로로 쌓였다.
     원래 그 자리는 display:block 에 padding 34px 이라 이미 44px 을 넘겼다.
     → 「높이가 모자란 것」만 넣는다. 이미 넉넉한 것은 건드리지 않는다.        */
/* ★`a.clist-compare-link` 도 뺐다 — 원래 가로 한 줄(270px)이던 것이
     inline-flex 때문에 141px 로 쪼그라들었다. 아래에서 여백만 준다. */
a.readmore,a.cgate-mdl,a.cmp-cta-b,
label.upload-btn,button.upload-btn,.guide-toc a,.guide-link,
.qc-opt,.qc-chip,.faq-q,summary{
  min-height:44px;display:inline-flex;align-items:center;
}
/* 세로로 쌓는 블록형은 배치를 바꾸지 않고 위아래 여백만 준다 */
a.ch-name{display:block;padding-top:8px;padding-bottom:8px}
a.clist-compare-link,a.clist-guide-row{min-height:44px;padding-top:10px;padding-bottom:10px}
.guide-toc li,.faq-item{margin-bottom:6px}

/* ── H. 글자 최소 14px — 세척기 목록 3곳이 13px 이었다 ─────────────────*/
.cgate-cond,.cgate-ar,#cleaner-compare .sub,#cleaner-compare .ch-desc{font-size:14px!important}

/* ══════════════════════════════════════════════════════════════════════
   ② 물방울 통일 — 누르는 곳은 전부, 똑같이, 누른 그 자리에서 번진다
   ══════════════════════════════════════════════════════════════════════
   ★지금까지 어땠나 (직접 띄워서 센 것)
     · 방식이 세 가지로 갈려 있었다 — 카드용 ::after, 동그란 단추용 ::before,
       유리버튼용 반짝임. 서로 모양도 속도도 달랐다.
     · @keyframes 가 하나도 없어 연타하면 중간에 끊겼다.
     · 물방울이 아예 없는 클릭 요소가 22종 382개. 그중 그냥 글자 링크가 300개다.
       사장님이 "글자 클릭시"라고 하신 자리가 바로 이 300개다.
     · 승인하신 첫화면 시안(v6)은 JS 로 「누른 지점」에서 번지는데,
       새 옷은 무조건 한가운데서 번졌다. 이것부터 다르다.

   ★어떻게 통일했나
     · 방식을 하나로 줄였다. 누르면 JS 가 물방울 한 개를 그 지점에 심고,
       애니메이션이 끝나면 스스로 지운다. 연타해도 각각 따로 번진다.
     · 색은 `currentColor` 다. 글자색을 그대로 쓰므로
       흰 글자 버튼에서는 흰 물방울, 먹색 글자에서는 먹색 물방울이 된다.
       색을 두 벌 만들지 않아도 어디서나 저절로 맞는다.
     · JS 가 없으면(CSS 만 올릴 때) 한가운데서 번지는 예전 방식이 그대로 산다.
       `html.apak-js-drop` 하나로 갈라 둬서 둘이 겹쳐 두 번 번지지 않는다.      */

@keyframes apak-drop{
  0%  {transform:translate(-50%,-50%) scale(0);opacity:.34}
  55% {opacity:.20}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* 물방울을 심을 자리 — 누를 수 있는 것 전부 */
a,button,[role=button],label,summary,select,
input[type=submit],input[type=button],input[type=reset],
.card,.slide-card,.info-card,.promise-card,.clt-card,.clt-item,.ch-card,
.solution-card,.story-card,.notice-card,.review-card,.qna-card,
.industry-tab,.callback-topic,.pagination-button,.slider-nav,tbody tr{
  position:relative;
}
/* 글자 링크는 잘라내면 밑줄까지 잘린다 — 링크만 넘치게 둔다 */
button,[role=button],label,summary,select,
input[type=submit],input[type=button],input[type=reset],
.card,.slide-card,.info-card,.clt-card,.clt-item,.ch-card,.solution-card,
.story-card,.notice-card,.review-card,.qna-card,.industry-tab,
.callback-topic,.pagination-button,.slider-nav{overflow:hidden}

.apak-drop{
  position:absolute;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,currentColor 0%,currentColor 38%,transparent 70%);
  transform:translate(-50%,-50%) scale(0);
  animation:apak-drop .58s cubic-bezier(.22,.61,.36,1) forwards;
  will-change:transform,opacity;
}
/* 글자 링크 위에서는 조금 더 얌전하게 — 본문이 번쩍이면 싸구려로 보인다 */
p a .apak-drop,li a .apak-drop,td a .apak-drop,.post-content a .apak-drop{opacity:.7}

/* ── JS 가 없을 때만 쓰는 옛 방식(한가운데서 번짐). 둘이 겹치지 않게 막는다 ── */
html:not(.apak-js-drop) .card::after,html:not(.apak-js-drop) .slide-card::after,
html:not(.apak-js-drop) .clt-card::after,html:not(.apak-js-drop) .clt-item::after,
html:not(.apak-js-drop) .story-card::after,html:not(.apak-js-drop) .solution-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(60% 60% at 50% 50%,currentColor 0%,transparent 62%);
  transform:scale(.4);
}
html:not(.apak-js-drop) .card:active::after,html:not(.apak-js-drop) .slide-card:active::after,
html:not(.apak-js-drop) .clt-card:active::after,html:not(.apak-js-drop) .clt-item:active::after,
html:not(.apak-js-drop) .story-card:active::after,html:not(.apak-js-drop) .solution-card:active::after{
  opacity:.26;transform:scale(1.6);
  transition:opacity .5s ease-out,transform .5s cubic-bezier(.22,.61,.36,1);
}
/* JS 가 붙으면 옛 방식은 끈다 */
html.apak-js-drop .card::after,html.apak-js-drop .slide-card::after,
html.apak-js-drop .clt-card::after,html.apak-js-drop .clt-item::after,
html.apak-js-drop .story-card::after,html.apak-js-drop .solution-card::after,
html.apak-js-drop .slider-nav::before,html.apak-js-drop .pagination-button::before,
html.apak-js-drop .sns-links a::before,html.apak-js-drop .qna-close::before,
html.apak-js-drop .review-close::before,html.apak-js-drop .callback-close::before{
  content:none!important;
}

/* 누를 때 회색 네모가 깜빡이지 않게 — 물방울만 보이게 한다 */
a:active,button:active,[role=button]:active,label:active,summary:active{
  -webkit-tap-highlight-color:transparent;
}

/* 움직임 줄이기를 켠 손님에게는 물방울을 띄우지 않는다 */
@media (prefers-reduced-motion:reduce){
  .apak-drop{display:none!important}
}

/* ── I. 노랑 마지막 5곳 — 「눈으로 보고」 찾은 것 ─────────────────────────
   ★반성: 대비만 재는 검사는 글자색만 본다. 테두리·그림자·밑줄은 안 잰다.
     화면을 띄워 놓고 보니 비교표 세 번째 칸 위에 노란 선이 그대로 있었다.
     그래서 「색이 쓰이는 성질 15가지」를 전부 훑는 검사를 새로 돌렸다.
     그렇게 찾은 것이 5곳이다. (사장님 명령808 ③ — 코드만 보지 말고 직접 봐라) */

/* 1) 세척기 비교 — 「현장 주력」 칸 위쪽 노란 선(그림자로 그려져 있었다) */
.cgate-box.is-lead{box-shadow:inset 0 3px 0 #73644B!important}

/* 2~4) 이용가이드 — HTML 안에 직접 적힌 노랑 3곳.
   파일을 고치지 않고 「그 글자가 적힌 자리」만 골라 덮어쓴다.
   (문구·구조는 한 글자도 안 건드린다 — 사장님 「기능은 모두 사입」 지시)   */
div[style*="f4c430"],div[style*="F4C430"]{border-left-color:#786646!important}
a[style*="f4c430"],a[style*="F4C430"]{color:#5E4B2E!important}
a[style*="f4c430"] *,a[style*="F4C430"] *{color:inherit!important}

/* 5) 주문완료 — 카카오 채널 안내 띠가 카카오 고유 노랑(#FEE500)이었다.
   ★사장님 결정이 필요한 자리입니다. 지금은 「노랑 전부 없애라」는 명령대로
     먹색 띠로 바꿔 두었습니다. 카카오 고유색을 살리시려면 이 한 줄만 지우면
     원래대로 돌아갑니다.                                                    */
.result-kakao-promo{background:#EDE1CB!important;color:#453A2E!important}
.result-kakao-promo a,.result-kakao-promo button{color:#33291F!important;background:#FFFFFF!important}

/* ── J. 파랑·금지색이 HTML 안에 직접 박혀 있던 자리 ──────────────────────
   ★이건 새로 만든 결함이 아니다. 처음부터 있었는데 내 검사가 못 봤다.
     지금까지는 「글자 대비」만 쟀다. 파란 글자는 흰 바탕에서 대비가 높아
     검사를 그냥 통과했다. 사장님이 파랑을 금지하신 것과는 상관없이.
     그래서 이번에 「색이 쓰이는 성질 11가지」를 훑는 검사를 새로 만들어 잡았다.

   ★파일은 한 글자도 안 고친다. style= 안에 적힌 「그 문장」을 골라 덮어쓴다.
     예) [style*="color:#0b4a8f"] 는 글자색으로 쓴 자리만 고른다.
         [style*="solid #0b4a8f"] 는 테두리로 쓴 자리만 고른다.
     이렇게 나눠야 테두리 자리에 엉뚱한 바탕색이 생기지 않는다.               */

/* 남색 #0b4a8f → 아팩 갈색 */
[style*="color:#0b4a8f"],[style*="color:#0B4A8F"],
[style*="color: #0b4a8f"],[style*="color:#007bff"],[style*="color:#0d47a1"]{color:#5E4B2E!important}
[style*="solid #0b4a8f"],[style*="solid #0B4A8F"],
[style*="solid #007bff"],[style*="solid #0d47a1"]{border-color:#786646!important}
[style*="background:#0b4a8f"],[style*="background:#0B4A8F"],
[style*="background-color:#0b4a8f"],[style*="background:#007bff"],
[style*="background:#0d47a1"]{background-color:#E2D3B4!important;color:#33291F!important}

/* 연한 하늘 바탕 #e8f0fa·#dfe5ea → 미색 */
[style*="background:#e8f0fa"],[style*="background:#E8F0FA"],
[style*="background:#dfe5ea"],[style*="background-color:#e8f0fa"]{background-color:#F2EADC!important}
/* 푸른 기 도는 선 #e2e8f0 → 아팩 선색 */
[style*="solid #e2e8f0"],[style*="solid #E2E8F0"],
[style*="dashed #e2e8f0"],[style*="solid #dfe5ea"]{border-color:#E3DACA!important}
/* 푸른 기 도는 흐린 글자 → 본문 먹색(사장님: 너무 흐리면 안 된다) */
[style*="color:#54636f"],[style*="color:#6c757d"],
[style*="color:#54636F"],[style*="color:#6C757D"]{color:#453A2E!important}
/* 노랑이 HTML 에 박힌 나머지 자리 */
[style*="color:#f4c430"],[style*="color:#F4C430"]{color:#5E4B2E!important}
[style*="background:#f4c430"],[style*="background:#F4C430"]{background-color:#E2D3B4!important;color:#33291F!important}

/* ── J-2. 주문완료 카카오 띠 속까지 ─────────────────────────────────────
   앞에서 띠 바탕만 먹색으로 바꾸고 속을 안 봤다. 글자가 1.04 로 사라졌었다.
   ★또 같은 실수다 — 바탕만 바꾸고 글자를 안 따라 바꿨다. 이번엔 속까지 칠한다. */
.result-kakao-promo p,.result-kakao-promo strong,.result-kakao-promo i{color:#453A2E!important}
.result-kakao-promo #add-kakao-channel-btn,
.result-kakao-promo button.nav-button.next{
  background-color:#FFFFFF!important;color:#33291F!important;border:1px solid #786646!important;
}
.result-kakao-promo #add-kakao-channel-btn *,
.result-kakao-promo button.nav-button.next *{color:inherit!important}

/* ── G-3. 네모칸 3곳의 손가락 자리 — 칸이 아니라 「글자까지 묶은 줄」이 누를 자리다 ──
   실측: `<label><input type=checkbox> 둘 다 해당사항 없음</label>` 구조다.
   칸(22px)을 키우면 흉해진다. 대신 label 을 44px 로 잡으면
   「둘 다 해당사항 없음」 글자를 눌러도 체크된다 — 손가락으로는 이쪽이 훨씬 편하다.
   ★앞에서 input::after 로 넓히려 했지만 그건 눈에 안 보이는 속임수였다. 물렸다. */
input[type="checkbox"]::after,input[type="radio"]::after{content:none}
label:has(> input[type="checkbox"]),label:has(> input[type="radio"]),
.checkbox-row label,.chk-row label,label[for$="-checkbox"]{
  min-height:44px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
}
input[type="checkbox"],input[type="radio"]{width:20px;height:20px;flex:0 0 auto}

/* ── K. 네모로 남아 있던 버튼 27개 ──────────────────────────────────────
   ★사장님은 명령793에서 「네모 버튼 쓰지말고」라고 하셨다.
     내가 명령801에서 알약 규칙을 만들 때 클래스 목록을 손으로 골랐고,
     그 목록에 없던 것들이 네모로 남았다. 「목록을 손으로 고른 것」이 실수다.
     이번엔 26쪽을 띄워 모서리를 재서 나온 27개를 전부 적는다.

   두 종류로 나눈다 — 버튼은 알약, 큼직한 타일은 둥근 네모(14px).            */
.action-button,.btn-shoe,.btn-shoe.ghost,.qna-submit-btn,
.modal-button,.modal-button.primary,.modal-button.secondary,
.upload-btn,#takePictureBtn,#start-new-btn,#continue-btn,
.back-to-list-button,.slider-nav,.slider-nav.prev,.slider-nav.next{
  border-radius:999px!important;
}
/* 큼직한 안내 타일 — 알약으로 만들면 우스워진다
   ★404 의 .nf-links 는 아래 L 항에서 알약으로 다시 잡는다(여기서 빼야 안 부딪힌다).
     내가 K 와 L 두 곳에서 같은 자리를 서로 다르게 잡아 「홈으로」만 네모로 남았었다. */
.error-container a,.guide-cards a,.gconv-cards a{border-radius:14px!important}
/* 이용가이드 안에 직접 적힌 모서리값도 같은 기준으로 */
a[style*="border-radius:6px"]{border-radius:999px!important}
a[style*="border-radius:10px"]{border-radius:14px!important}

/* ── L. 404 안내 — 「눈으로 보니」 사이트와 따로 놀았다 ───────────────────
   ★측정은 통과했는데 보기가 나빴다. R-191 대로 손님의 눈으로 다시 봤다.
     ①타일 크기가 들쭉날쭉해 마지막 하나가 혼자 아랫줄로 떨어졌다
     ②검은 2px 테두리가 거칠어 미색 화면에서 혼자 튀었다
     ③한 줄짜리 글자에 92px 높이는 너무 컸다
   이 쪽은 원래 남색(#0d47a1)으로 만든 쪽이라 새 옷과 태생이 달랐다.
   글자는 한 자도 안 건드리고 모양만 사이트와 맞춘다.                       */
.nf-links{gap:10px!important}
.nf-links a{
  padding:12px 22px!important;min-height:48px!important;
  display:inline-flex!important;align-items:center!important;
  border:1px solid #E3DACA!important;border-radius:999px!important;
  background:#FFFFFF!important;color:#33291F!important;font-size:15px!important;
}
.nf-links a:hover{border-color:#786646!important;color:#5E4B2E!important;background:#FFFFFF!important}
.nf-links a.primary{background:#E2D3B4!important;border-color:#786646!important;color:#33291F!important;border-radius:999px!important}
.nf-links a.primary:hover{background:#D6C3A0!important;border-color:#786646!important;color:#33291F!important}
.nf-code{color:#33291F!important}
.nf-desc{color:#453A2E!important}
.nf-contact{color:#453A2E!important;border-top-color:#E3DACA!important}
.nf-contact strong{color:#33291F!important}
/* 알약 높이·줄맞춤 마무리 — 실측 74px 은 사이트의 다른 알약(44~56px)보다 뚱뚱했다.
   그리고 6개가 한 줄에 안 들어가 마지막 하나만 혼자 떨어졌다.
   폭을 좁혀 3개씩 두 줄로 떨어지게 한다.                                    */
.nf-links{max-width:560px;margin-left:auto!important;margin-right:auto!important}
.nf-links a{box-sizing:border-box!important;padding:0 22px!important;min-height:48px!important}


/* ══════════════════════════════════════════════════════════════════════
   ③ 물방울 v2 — 파스텔 · 누른 자리 + 올린 자리
   2026-09-11 · 명령 808 · 810 · 811 (사장님 확정)
   붙이는 곳: css/apak-new-2026-09-11.css 맨 끝
   짝이 되는 JS: _물방울_JS붙일것.txt (js/main.js 맨 끝)

   ★색은 지어내지 않았다 — 00_파스텔색판_2026-09-11.html 의 값 그대로다
       ⑭ #C6AF85  물방울(밝은 바탕 위)  = 방울의 모래빛 몸통
       ⑮ #FFFBF2  물방울(버튼 위)       = 방울의 밝은 알맹이
     색판이 재 보니 이 두 색이 흰 카드(2.13)·크림(1.97)·연한 띠(1.78)·
     머리띠(1.62)·파스텔 버튼(1.43)에서 전부 보인다(1.3 넘으면 보임).
     한 가지 색으로 하면 어딘가에서는 안 보이므로, 색판과 똑같이
     「밝은 알맹이 + 모래빛 테두리」 두 겹으로 만들어 어디서나 보이게 했다.
   ★검정·순흰색 고정값 0건. 값은 전부 CSS 변수로 뺐다.
   ★@keyframes 로 돌린다 — 연타해도 중간에 끊기지 않는다(각각 따로 번진다).
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 물방울 색 (색판 ⑭·⑮) ──────────────────────────────────────── */
:root{
  --apak-drop-hi:#FFFBF2;                  /* ⑮ 알맹이 */
  --apak-drop-lo:#C6AF85;                  /* ⑭ 몸통 */
  --apak-drop-end:rgba(198,175,133,0);     /* ⑭ 를 투명도 0 으로 — 가장자리를 부드럽게 */
  --apak-drop-t1:.62s;                     /* 누를 때 — 승인하신 v6 와 같은 속도 */
  --apak-drop-t2:.90s;                     /* 올렸을 때 — 더 느리고 은은하게 */
  --apak-drop-ease:cubic-bezier(.22,.61,.36,1);
}

/* ── 2. 번지는 모양 ───────────────────────────────────────────────── */
@keyframes apak-drop2{
  0%  {transform:translate(-50%,-50%) scale(0);opacity:var(--o)}
  55% {opacity:calc(var(--o) * .62)}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}
@keyframes apak-drop2-hover{
  0%  {transform:translate(-50%,-50%) scale(.12);opacity:0}
  22% {opacity:var(--o)}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* ── 3. 물방울 몸체 — JS 가 이 span 을 심고 끝나면 스스로 지운다 ──── */
.apak-drop2{
  --o:.50;                                  /* 누를 때 진하기 */
  position:absolute;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle at 34% 30%,
              var(--apak-drop-hi) 0%,
              var(--apak-drop-lo) 46%,
              var(--apak-drop-end) 72%);
  transform:translate(-50%,-50%) scale(0);
  animation:apak-drop2 var(--apak-drop-t1) var(--apak-drop-ease) forwards;
  will-change:transform,opacity;
}

/* 마우스를 올렸을 때 — 클릭보다 약하고 느리다 (사장님: "클릭전에 물방울") */
.apak-drop2.is-hover{
  --o:.30;
  animation:apak-drop2-hover var(--apak-drop-t2) var(--apak-drop-ease) forwards;
}

/* 본문 속 글자 링크 위에서는 더 얌전하게 — 글 읽는데 번쩍이면 싸구려로 보인다 */
p a .apak-drop2,li a .apak-drop2,td a .apak-drop2,.post-content a .apak-drop2{--o:.34}
p a .apak-drop2.is-hover,li a .apak-drop2.is-hover,
td a .apak-drop2.is-hover,.post-content a .apak-drop2.is-hover{--o:.18}

/* ── 4. 물방울을 심을 자리 — 이 파일 위쪽(789~800행)에서 이미
       a·button·label·summary·카드류에 position:relative 를 줬다.
       여기서는 그때 빠진 두 곳만 보탠다. 둘 다 실물로 확인한 것이다.
         .thumb-wrapper          → products.css:337 에 이미 relative 라 손댈 것 없음
         #reviewStarInput .star  → span 이라 자리를 잡아 줘야 한다 (js/review.js:45)
         [onclick]               → 인라인 onclick 으로만 눌리는 자리 보험 ─────── */
html.apak-drop2-on #reviewStarInput .star{position:relative;display:inline-block}
html.apak-drop2-on [onclick]{position:relative}

/* ── 5. 옛 물방울 3종 끄기 — 두 번 번지지 않게 ─────────────────────
       새 물방울이 살아 있을 때(html.apak-drop2-on)만 끈다.
       ★표시 class(apak-drop2-on)와 물방울 span 의 class(apak-drop2)는 반드시 달라야 한다 —
         같게 두면 <html> 자신이 아래 3번의 물방울 규칙을 뒤집어써서 화면이 통째로 사라진다.
       CSS 만 먼저 올리고 JS 를 아직 안 붙였을 때는 옛것이 그대로 살아 있어
       중간 상태에서도 물방울이 사라지지 않는다. ─────────────────────── */

/* ① 버튼을 누르면 ::before 가 한가운데서 부풀던 것 (이 파일 279~298행)
      — 맺힌 빛(::before) 자체는 디자인이므로 남기고, 부푸는 동작만 끈다 */
html.apak-drop2-on .btn-primary:active::before,
html.apak-drop2-on .gnb-contact-btn:active::before,
html.apak-drop2-on .contact-fab-main:active::before,
html.apak-drop2-on .submit-btn:active::before,
html.apak-drop2-on .payment-button:active::before,
html.apak-drop2-on .select-button:active::before,
html.apak-drop2-on .nav-button:active::before,
html.apak-drop2-on #startButton:active::before,
html.apak-drop2-on .slider-more-btn:active::before,
html.apak-drop2-on .clt-btn-y:active::before,
html.apak-drop2-on .cgate-btn:active::before,
html.apak-drop2-on .quote-btn:active::before,
html.apak-drop2-on .apply-button:active::before{
  transform:none!important;opacity:.9!important;transition:none!important;
}

/* ② 카드를 누르면 ::after 가 한가운데서 번지던 것 (이 파일 389~401행) */
html.apak-drop2-on .card::after,
html.apak-drop2-on .slide-card::after,
html.apak-drop2-on .clt-card::after,
html.apak-drop2-on .clt-item::after,
html.apak-drop2-on .story-card::after,
html.apak-drop2-on .solution-card::after,
html.apak-drop2-on a.tile::after{content:none!important}

/* ③ 동그란 단추를 누르면 ::before 가 한가운데서 번지던 것 (이 파일 473~483행) */
html.apak-drop2-on .slider-nav::before,
html.apak-drop2-on .pagination-button::before,
html.apak-drop2-on .sns-links a::before,
html.apak-drop2-on .qna-close::before,
html.apak-drop2-on .review-close::before,
html.apak-drop2-on .callback-close::before{content:none!important}

/* ── 6. ★옛 물방울 파일(js/apak-ripple.js · v1)과 겹치는 것 막기 ──
       v1 은 26쪽 전부가 <script src="js/apak-ripple.js" defer> 로 부르고 있다.
       v1 은 hover 가 없고 색이 currentColor(=검정 글자색)라 사장님 확정
       「파스텔 일괄·검정 금지」와 어긋난다. 그래서 v2 로 갈아탄다.
       둘이 같이 켜지면 한 번 눌러 두 번 번지므로, v2 가 살아 있을 때만
       v1 이 만든 물방울을 숨긴다.
       ★가장 깨끗한 마무리는 26쪽에서 그 <script> 줄을 지우는 것이다
         (총책임자 판단 — 이 직원은 26쪽을 고치지 않았다). ─────────── */
html.apak-drop2-on .apak-drop{display:none!important}

/* ── 7. 움직임 줄이기를 켠 손님에게는 물방울을 띄우지 않는다 ──────── */
@media (prefers-reduced-motion:reduce){
  .apak-drop2{display:none!important}
}

/* ── 8. 손가락으로 쓰는 기기에서는 hover 물방울을 끈다 (JS 에 이어 두 겹 보험)
       — 터치하면 hover 와 클릭이 같이 들어와 두 번 번지는 것을 막는다 ── */
@media (hover:none){
  .apak-drop2.is-hover{display:none!important}
}

/* ══ ④ 카드 경계 — 「세로선 하나로만 가른 신문 배치」를 카드로 (명령 809) ══
   붙이는 곳: css/apak-new-2026-09-11.css 맨 끝 · 대상 17구획 103칸 / 9쪽
   ★선택자 이름 0건 변경 · 고정 색값 0건 · 검정 0건 — 전부 파스텔 변수다
     (면 --color-surface · 선 --a-border #786646 색판⑫ · 글 --a-700/--a-800)
   ★흰 카드와 크림 바탕의 대비는 1.08 뿐 → 경계는 「선」이 만든다(필수). */
:root{--apak-lift:-2px}
@media (prefers-reduced-motion:reduce){:root{--apak-lift:0}}
.chk-card,.step,.faq,.faq-item,.case-card,.clt-spec,.cgate-note,
.solution-category,.promise-card,.info-card,.environment-none-option,
.detail-section ul li,.industry-item,.reply-item,.qna-replies .reply-box{
  background-color:var(--color-surface)!important;
  border:1px solid var(--a-border)!important;
  border-radius:var(--border-radius-lg)!important;
  box-shadow:var(--sh-1)!important;
  padding:20px 22px!important;
  margin-bottom:14px!important;
  transition:transform .26s var(--ease-out),box-shadow .26s var(--ease-out),
             border-color .26s var(--ease-out);
}
/* 칸끼리 맞붙지 않게 — 격자 안에 든 것만 사방 여백 */
.industry-item,.solution-category,.detail-section ul li,.promise-card{margin:8px!important}

/* ★바탕을 흰색으로 바꿨으니 그 위 글자색을 같은 자리에서 못 박는다(09-11 학습) */
.industry-item .ib-title,.info-card h3,.solution-category h4,
.step b,.faq b,.faq-item strong,.chk-card b,.case-card b{color:var(--a-700)!important}
.industry-item .ib-desc,.solution-category li,.info-card li,.detail-section ul li,
.chk-card,.cgate-note,.clt-spec,.reply-item p,.qna-replies .reply-box{color:var(--a-800)!important}

/* 하이라이트(#819) — 살짝 떠오르고 그림자가 짙어지고 선이 강조색으로 */
.chk-card:hover,.step:hover,.faq:hover,.faq-item:hover,.case-card:hover,
.clt-spec:hover,.cgate-note:hover,.solution-category:hover,.promise-card:hover,
.info-card:hover,.environment-none-option:hover,.detail-section ul li:hover,
.industry-item:hover,.reply-item:hover,.qna-replies .reply-box:hover{
  transform:translateY(var(--apak-lift));
  box-shadow:var(--sh-2)!important;
  border-color:var(--a-500)!important;
  background-color:var(--color-surface)!important;
}

/* 세척기 비교표 안 「어울리는 용도」 — 표를 깨지 않게 작은 알약으로만 */
td.use ul{list-style:none;padding:0;margin:0}
td.use li{background-color:var(--a-050);border:1px solid var(--a-line);
  border-radius:999px;padding:6px 12px;margin:0 0 6px}

/* ── 주문 단계 — 파스텔이라 색·굵기만으로는 지금 단계를 못 알아본다.
      HTML 은 한 글자도 안 건드리고 CSS 셈틀로 번호·체크표시를 붙인다. */
.order-stepper{counter-reset:apak-step}
.order-stepper .step-chip{background-color:var(--color-surface)!important;
  border:1px solid var(--a-line)!important;border-radius:999px!important;
  padding:8px 16px!important;color:var(--a-800)!important}
.order-stepper .step-chip::before{counter-increment:apak-step;content:counter(apak-step);
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;margin-right:8px;border-radius:50%;
  background-color:var(--a-200);color:var(--a-900);font-weight:700;font-size:13px}
.order-stepper .step-chip.is-done::before{content:"\2713";background-color:var(--a-400)}
.order-stepper .step-chip.is-current{background-color:var(--a-400)!important;
  border:2px solid var(--a-border)!important;color:var(--a-ink)!important;
  font-weight:800!important;box-shadow:var(--sh-1)!important}
.order-stepper .step-chip.is-current::before{background-color:var(--color-surface);color:var(--a-900)}


/* ══ ④ 하이라이트 — 커서를 올리면 「글자가 진해지고 20% 커진다」 ════════════════════════════
   2026-09-11 · 명령822 · css/apak-new-2026-09-11.css 맨 끝에 붙임 · 짝 JS: _물방울_추가JS붙일것.txt
   ★키우는 법은 transform:scale 이다 — font-size 를 키우면 글상자가 같이 커져 옆 글자를 밀고 줄바꿈이 깨진다.
     scale 은 자리를 차지하는 크기가 그대로다. 실측(1400px·5쪽): 가로밀림 0 · 문서높이 0 · 줄 수 변화 0.
   ★「진해짐」은 색(--a-900 #33291F)만 바꾸고 굵기는 text-shadow 로 흉내 낸다 — font-weight 를 올리면
     가변글꼴이라 글자 폭이 늘어 줄이 밀린다. 검정·순흰색 고정값 0건.
   ★★display 는 한 글자도 안 건드린다 — 이 파일 144·781행이 이미 a 에 inline-flex 를 걸어 둬서 전부 scale 이 먹는다.
     처음에 display:inline-block 을 넣었다가 머리띠 메뉴가 1.8px 내려앉아 뺐다(772~779행에 같은 사고 기록 있음).
   ★손가락 기기는 통째로 꺼진다(hover:hover and pointer:fine). ══════════════════════════════ */
@media (hover:hover) and (pointer:fine){
  /* ①-A 배경 없는 「글자만」 자리 — 통째로 1.2배. hover 가 없던 189개가 여기 걸린다 */
  a.gnb-logo,.gnb-menu a,.footer-links a,.footer-info a,.copyright a,.breadcrumb a,.crumb a,.go-link,.more-link,.view-all-link,a.ch-name,.notice-cta a,.footer-contact a,.guide-toc a,.guide-link,a.readmore,a.clist-compare-link,a.clist-guide-row,.faq-q,.qna-close-button,.popup-close-button,.close-btn,.callback-close,.qna-close,.review-close,p a,li a,td a,dd a,.post-content a{
    transform-origin:center center;
    transition:color .2s var(--ease-out),transform .2s var(--ease-out),text-shadow .2s var(--ease-out);
  }
  a.gnb-logo:hover,.gnb-menu a:hover,.footer-links a:hover,.footer-info a:hover,.copyright a:hover,.breadcrumb a:hover,.crumb a:hover,.go-link:hover,.more-link:hover,.view-all-link:hover,a.ch-name:hover,.notice-cta a:hover,.footer-contact a:hover,.guide-toc a:hover,.guide-link:hover,a.readmore:hover,a.clist-compare-link:hover,a.clist-guide-row:hover,.faq-q:hover,.qna-close-button:hover,.popup-close-button:hover,.close-btn:hover,.callback-close:hover,.qna-close:hover,.review-close:hover,p a:hover,li a:hover,td a:hover,dd a:hover,.post-content a:hover{
    color:var(--a-900)!important;text-shadow:0 0 .4px currentColor;transform:scale(1.2);
  }
  /* ②-A 배경이 있는 버튼 — 글자만 진해지고 3%만 커진다. 배경도 한 톤 진하게.
        267·318행이 translateY(-2px)!important 라 그 값을 같이 적어 물고 간다 */
  .btn:hover,.btn-primary:hover,.btn-secondary:hover,.gnb-contact-btn:hover,.contact-fab-main:hover,.contact-fab-item:hover,.submit-btn:hover,.payment-button:hover,.select-button:hover,.nav-button:hover,#startButton:hover,.slider-more-btn:hover,.content-button:hover,.clt-btn-y:hover,.clt-btn-o:hover,.cgate-btn:hover,.ch-btn:hover,.btn-outline:hover,.quote-btn:hover,.apply-button:hover,.nf-links a:hover,.industry-tab:hover,.sns-links a:hover,.slider-nav:hover,.pagination-button:hover{
    transform:translateY(-2px) scale(1.03)!important;color:var(--a-900)!important;text-shadow:0 0 .4px currentColor;
  }
  .btn:hover,.btn-primary:hover,.gnb-contact-btn:hover,.submit-btn:hover,.payment-button:hover,.select-button:hover,.nav-button:hover,#startButton:hover,.slider-more-btn:hover,.clt-btn-y:hover{background-color:#D6C3A0!important}
  .btn-secondary:hover,.content-button:hover,.contact-fab-item:hover,.nf-links a:hover,.industry-tab:hover{background-color:#EDE1CB!important}
  /* ★누르는 순간 눌려 들어가던 옛 동작을 되살린다 — 위 !important 가 덮어 버리기 때문 */
  .btn:active,.btn-primary:active,.btn-secondary:active,.gnb-contact-btn:active,.contact-fab-main:active,.contact-fab-item:active,.submit-btn:active,.payment-button:active,.select-button:active,.nav-button:active,#startButton:active,.slider-more-btn:active,.content-button:active,.clt-btn-y:active,.clt-btn-o:active,.cgate-btn:active,.ch-btn:active,.btn-outline:active,.quote-btn:active,.apply-button:active{transform:scale(.96)!important}
  /* ②-B 배경이 있는 카드 — 제목 글자만 진해지고 카드는 2%만 커진다(안의 사진 확대는 그대로) */
  .card:hover,.slide-card:hover,.clt-card:hover,.clt-item:hover,.info-card:hover,.promise-card:hover,.ch-card:hover,.solution-card:hover,.story-card:hover,.notice-card:hover,.review-card:hover,.qna-card:hover,a.tile:hover{transform:translateY(-4px) scale(1.02)}
  .card:hover h2,.card:hover h3,.clt-card:hover h2,.clt-item:hover h3,.slide-card:hover .card-title,.solution-card:hover .card-title,.story-card:hover .card-title,.qna-card:hover .card-title,.notice-card:hover .card-title,a.tile:hover .card-title{
    color:var(--a-900)!important;text-shadow:0 0 .4px currentColor;transition:color .2s var(--ease-out);
  }
  /* ③ 입력칸(희망 도착일 달력) — 물방울이 <input> 안에는 못 들어가므로 짝 JS 가 화면 기준으로 띄운다 */
  .apak-drop2.is-fixed{position:fixed}
}
/* ④ 움직임 줄이기를 켠 손님 — 크기는 그대로 두고 색만 진해진다 */
@media (prefers-reduced-motion:reduce){
  a:hover,button:hover,.card:hover,.clt-card:hover,.clt-item:hover,.solution-card:hover,.story-card:hover{transform:none!important;transition:none!important}
}

/* ══ ⑤ 하이라이트 보강 — 위 ④ 에서 빠져 있던 13종 ═══════════════════════════════
   2026-09-12 · 명령822 재검수 미달분 · 이 파일 맨 끝에 덧붙였다(1201~1240행은 그대로 둔다)

   ★사장님 원문(#822): "물방울 효과만 있으면 선택되었는지 모르니까 글자가 찐해지고
     20프로 커지는 효과는 어때?? 이부분만 필요한게 아니라 홈페이지 전체"

   ★「찐해짐」은 **색을 억지로 어둡게 칠하지 않는다.**
     currentColor 를 쓴 text-shadow 로 글자를 굵게 만든다. 이유가 둘이다.
       ① 어두운 바탕 위 밝은 글자(신발금형 전화단추 #2b1a12 위 크림색)에
          어두운 색을 칠하면 글자가 통째로 사라진다 — 09-11 에 네 번, 09-12 에 또
          한 번 낸 사고다(함정13 · R-192 · R-198).
       ② 이미 --a-900(#33291F) 인 글자는 더 어두워질 수가 없다 — 이 파일 669행이
          버튼 23종의 글자를 전부 #33291F 로 못 박아 두었다. 그래서 「색만」으로는
          영영 안 진해진다. 굵기가 유일한 길이다.
     font-weight 를 올리지 않는 이유는 1205행에 적힌 그대로다 — 가변글꼴이라
     글자 폭이 늘어 줄이 밀린다. text-shadow 는 글상자를 한 픽셀도 안 건드린다.

   ★「20% 커짐」은 ④ 가 정해 둔 등급을 그대로 따른다 —
     글자만 있는 링크 1.2 · 버튼 1.03 · 카드 1.02. 버튼을 1.2 로 키우면 옆 버튼을
     덮는다(실측). 자리를 안 밀기 위해 크기는 전부 transform:scale 로만 준다.

   ★본문 속 진짜 inline 링크에는 scale 을 주지 않는다 — 안 먹는다. 억지로
     inline-block 을 주면 글자가 위로 떠서 줄이 어긋난다(1207~1208행 사고 기록).
   ★손가락 기기는 통째로 꺼진다(hover:hover and pointer:fine).            ══════ */

:root{
  /* 글자를 굵게 보이게 하는 값 하나로 통일 — 색은 currentColor 라 어디서나 안전하다 */
  --apak-ink-bold:0 0 .4px currentColor, .3px 0 0 currentColor, -.3px 0 0 currentColor;
}

/* 햄버거 세 줄을 글자색에 묶는다 — 그래야 커서를 올릴 때 「진해진다」가 진짜가 된다.
   머리띠 바탕은 #E9E0CF(밝은 크림)이라 평상시 --a-800 도 대비 8:1 이 넘는다. */
.gnb-toggle{color:var(--a-800)}
.gnb-toggle span{background-color:currentColor!important}

/* 44px 확보 — 글자 크기는 그대로 두고 안쪽 여백(min-width)으로만 넓힌다 */
.gnb-menu a{min-width:44px;justify-content:center}      /* 「솔루션」 36px → 44px */
a.cgate-mdl{min-width:44px;justify-content:center}      /* 모델명 C-1 29px · C-2 31px → 44px */

@media (hover:hover) and (pointer:fine){

  /* ⑤-0 부드럽게 — 이 13종에는 전환이 아예 없거나 일부 속성만 걸려 있었다 */
  .callback-float-btn,.btn-shoe,.action-button,.qna-submit-btn,#reply-form .qna-submit-btn,
  .upload-btn,#takePictureBtn,.back-to-list-button,.cmp-cta-b,a.cgate-mdl,
  .info-card .btn-more,.btn-more,.thumb-wrapper,.industry-item,.gnb-toggle,
  label:not(.upload-btn){
    transition:color .2s var(--ease-out),transform .2s var(--ease-out),
               text-shadow .2s var(--ease-out),background-color .2s var(--ease-out),
               border-color .2s var(--ease-out),box-shadow .2s var(--ease-out);
  }

  /* ⑤-A 버튼류 8종 — 글자가 굵어지고 3% 커진다. ★색은 안 건드린다 */
  .btn-shoe:hover,.action-button:hover,.qna-submit-btn:hover,
  #reply-form .qna-submit-btn:hover,.upload-btn:hover,#takePictureBtn:hover,
  .back-to-list-button:hover,.cmp-cta-b:hover{
    text-shadow:var(--apak-ink-bold)!important;
    transform:translateY(-2px) scale(1.03);
  }
  #takePictureBtn:hover,.upload-btn:hover{box-shadow:var(--sh-2)}

  /* ⑤-B 「전화 요청」 뜬버튼 — 화면 구석에 홀로 떠 있어 조금 더 키워도 안 밀린다.
        (main.js 570~575 이 만들어 붙이는 단추라 HTML 에는 없다. 24쪽에 뜬다) */
  .callback-float-btn:hover{
    text-shadow:var(--apak-ink-bold)!important;
    transform:translateY(-2px) scale(1.06);
    opacity:1;
  }

  /* ⑤-C 밑줄만 있던 글자형 링크 — 굵어지고 5% 커진다.
        왼쪽 기준으로 키워야 글머리가 안 움직인다 */
  .info-card .btn-more:hover,.btn-more:hover,a.cgate-mdl:hover,.cgate-mdl:hover{
    text-shadow:var(--apak-ink-bold)!important;
    transform:scale(1.05);
    transform-origin:left center;
  }

  /* ⑤-D 업종 칸 — 뜨기만 하던 것에 2% 확대와 제목 굵기를 더한다.
        ★display 는 한 글자도 안 건드린다 — 예전에 inline-flex 를 줬다가
          「사출/금형/고무」가 폭 34px 로 짜부라져 세로로 쌓였다(771~776행). */
  .industry-item:hover{transform:translateY(var(--apak-lift)) scale(1.02)}
  .industry-item:hover .ib-title,.industry-item:hover .ib-desc,
  .industry-item:hover b,.industry-item:hover strong{
    text-shadow:var(--apak-ink-bold);
  }

  /* ⑤-E 썸네일 — 글자가 없는 칸이다. 테두리가 진해지고 6% 커진다 */
  .thumb-wrapper:hover{
    transform:scale(1.06);
    /* ★--a-border(#786646) 로 했다가 「고른 썸네일」(.active, 테두리 --a-700 #5E4B2E)
         에서는 오히려 밝아졌다. 어느 상태에서든 진해지도록 가장 어두운 값으로 둔다. */
    border-color:var(--a-900)!important;
    box-shadow:var(--sh-2);
    z-index:2;
  }

  /* ⑤-F 폼 라벨 — 커서를 올려도 아무것도 안 바뀌던 자리.
        ★.upload-btn 은 라벨 모양의 버튼이라 ⑤-A 가 맡는다(여기서 뺀다). */
  label:not(.upload-btn):hover{
    text-shadow:var(--apak-ink-bold)!important;
    transform:scale(1.03);
    transform-origin:left center;
  }

  /* ⑤-G 모바일 햄버거 — 바탕색만 바뀌던 자리. 세 줄이 진해지고 12% 커진다 */
  .gnb-toggle:hover,.gnb-toggle:focus-visible{
    color:var(--a-900)!important;
    transform:scale(1.12);
    background-color:var(--a-200)!important;
    border-color:var(--a-border)!important;
  }
  .gnb-toggle:active{transform:scale(.96)}
}

/* ⑤-H 움직임 줄이기를 켠 손님 — 크기는 그대로 두고 굵기만 남긴다.
       1238행이 a·button 은 이미 막고 있으나 div·label 형(업종칸·썸네일·라벨)은 빠져 있었다 */
@media (prefers-reduced-motion:reduce){
  .industry-item:hover,.thumb-wrapper:hover,label:hover,.gnb-toggle:hover,
  .callback-float-btn:hover,.btn-shoe:hover,.action-button:hover,.qna-submit-btn:hover,
  .upload-btn:hover,#takePictureBtn:hover,.back-to-list-button:hover,
  .cmp-cta-b:hover,.cgate-mdl:hover,.btn-more:hover{
    transform:none!important;transition:none!important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   ⑥ 밀어보기 — 「손으로 밀어 세척 전/후 비교」        [디자인규격확인]
   2026-09-12 · 명령830 사장님 원문: "밀어서 사진 확인 하는것 이것은 안한거야?"

   ★새로 지어낸 디자인이 아니다 — 사장님이 "마음에 든다"(#800) 하신
     시안_2026-09-11_2차\1안_v6_전후밀기.html 39~64행·146~177행을 그대로 옮기고
     색만 파스텔 팔레트 변수로 갈아끼웠다. 구조·동작·속도는 그 파일과 같다.
   ★짝이 되는 JS : js/main.js 맨 끝 (아팩 밀어보기)
   ★쓰는 색은 전부 이 파일 27행 :root 의 변수다 — 고정 색값 0건 · 검정 0건.
       바탕 --a-050 / 카드 --a-100 / 선 --a-line / 모래 --a-400
       크림 --n-900 / 글자·먹 --a-900 / 테두리 --a-border / 그림자 --sh-1·--sh-2
   ★각진 모서리 금지(#788·#793) — 액자 22px · 라벨 999px · 손잡이 50%.
   ★손잡이 물방울·하이라이트(#819·#821·#822)
       · 물방울 : 손잡이가 <button> 이라 물방울 v2(main.js)가 자동으로 심는다.
                  1017행 `button{overflow:hidden}` 이 이미 동그라미 밖을 잘라 준다.
                  ★새 코드를 안 쓰는 것이 「충돌하지 않게」의 가장 확실한 방법이다.
       · 하이라이트 : 아래 @media (hover:hover) 에 손잡이 규칙을 더했다(⑤ 등급과 같은 값).
   ★어두운 사진 위에 글자를 얹지 않는다(함정13) — 라벨·안내는 전부
     「먹색 알약 + 크림 글자」다. 사진이 밝든 어둡든 대비가 13:1 로 고정된다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 구획 — 첫 화면 바로 아래. 빈 여백 금지(#791)라 옅은 모래빛을 깐다 ── */
.apak-ba-sec{
  padding:var(--sec-y) var(--gut);
  background-color:var(--a-050);
  background-image:radial-gradient(54% 58% at 88% 6%, rgba(198,175,133,.20) 0%, rgba(198,175,133,0) 62%);
}
.apak-ba-in{max-width:1440px;margin:0 auto}
.apak-ba-title{
  font-family:var(--font-heading);
  font-size:clamp(26px,3.06vw,44px);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1.2;
  color:var(--a-900);
  margin:0 0 22px;
  padding-left:20px;
  border-left:5px solid var(--a-500);
}

/* ── 2. 액자 — 선 하나로 가르지 않고 카드로 만든다(R-196) ─────────────── */
.apak-ba{
  position:relative;
  height:clamp(340px,44vw,600px);
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--a-line);
  background-color:var(--a-200);          /* 사진이 뜨기 전 빈 검정이 안 보이게 */
  box-shadow:var(--sh-2);
  touch-action:pan-y;                      /* 세로 스크롤은 살리고 가로 밀기만 우리가 받는다 */
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.apak-ba-pane{position:absolute;inset:0}
.apak-ba-pane img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;pointer-events:none;-webkit-user-drag:none;user-select:none;
}
/* 오른쪽 = 세척 후 · 왼쪽 = 세척 전 (v6 43~44행 그대로) */
.apak-ba-pane-a{clip-path:inset(0 0 0 var(--apak-ba-x,50%))}
.apak-ba-pane-b{clip-path:inset(0 calc(100% - var(--apak-ba-x,50%)) 0 0)}

/* ── 3. 가름선 — 사진이 밝아도 어두워도 보이게 「크림 심 + 모래 테」 두 겹 ── */
.apak-ba-split{
  position:absolute;top:0;bottom:0;left:var(--apak-ba-x,50%);width:2px;z-index:4;
  transform:translateX(-1px);pointer-events:none;
  background:var(--n-900);
  box-shadow:0 0 0 1px var(--a-400);
  opacity:.92;
}

/* ── 4. 손잡이 — v6 52~60행. 흰 유리를 크림 유리로만 바꿨다 ──────────── */
.apak-ba-knob{
  position:absolute;top:50%;left:var(--apak-ba-x,50%);z-index:5;
  width:64px;height:64px;margin:-32px 0 0 -32px;padding:0;
  border-radius:50%;
  display:grid;place-items:center;
  cursor:ew-resize;
  touch-action:none;                        /* ★손가락 드래그의 핵심 — 없으면 브라우저가 가져간다 */
  color:var(--a-900);
  background-color:var(--n-900);
  background-color:color-mix(in srgb,var(--n-900) 82%,transparent);
  border:1px solid var(--a-border);
  -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
  box-shadow:0 1px 0 var(--a-050) inset, var(--sh-2);
  transition:transform .3s var(--ease-out),background-color .3s var(--ease-out),
             box-shadow .3s var(--ease-out),border-color .3s var(--ease-out);
}
.apak-ba-knob svg{
  width:26px;height:14px;display:block;
  stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.apak-ba-knob:active{transform:scale(.94)}
.apak-ba-knob:focus-visible{outline:3px solid var(--a-900);outline-offset:3px}

/* ── 5. 라벨·안내 — 먹색 알약 + 크림 글자. 사진이 어떻든 13:1 (함정13) ── */
.apak-ba-tag,.apak-ba-hint{
  position:absolute;z-index:5;
  font-size:14px;font-weight:500;letter-spacing:.02em;white-space:nowrap;
  color:var(--a-050);
  background-color:var(--a-900);
  border:1px solid var(--a-border);
  border-radius:999px;
  padding:9px 16px;
}
.apak-ba-tag{top:20px}
.apak-ba-tag-l{left:20px}
.apak-ba-tag-r{right:20px}
.apak-ba-hint{
  top:calc(50% + 48px);left:var(--apak-ba-x,50%);
  transform:translateX(-50%);
  transition:opacity .5s var(--ease-out);
}
.apak-ba.apak-ba-touched .apak-ba-hint{opacity:0}

/* ── 6. 하이라이트(#819·#821·#822) — ⑤ 등급표의 「버튼 1.03」이 아니라
       ⑤-E 썸네일(1.06)을 따른다. 손잡이는 글자가 없는 동그란 칸이다 ───── */
@media (hover:hover) and (pointer:fine){
  .apak-ba-knob:hover{
    transform:scale(1.06);
    background-color:var(--n-800);
    background-color:color-mix(in srgb,var(--n-800) 92%,transparent);
    border-color:var(--a-900);
    box-shadow:0 1px 0 var(--a-050) inset, var(--sh-3);
  }
  .apak-ba-knob:hover svg{stroke-width:2.1}
  .apak-ba:hover .apak-ba-split{opacity:1}
}

/* ── 7. 모바일 — v6 146~173행과 같은 값 ──────────────────────────────── */
@media (max-width:900px){
  .apak-ba{height:clamp(300px,84vw,420px);border-radius:18px}
  .apak-ba-knob{width:56px;height:56px;margin:-28px 0 0 -28px}
  .apak-ba-tag,.apak-ba-hint{font-size:13px;padding:8px 13px}
  .apak-ba-tag{top:14px}
  .apak-ba-tag-l{left:14px}
  .apak-ba-tag-r{right:14px}
  .apak-ba-hint{top:calc(50% + 42px)}
  .apak-ba-title{margin-bottom:16px}
}

/* ── 8. 움직임 줄이기 — 저절로 훑는 동작은 JS 가 끈다. 여기서는 전환만 끈다 ── */
@media (prefers-reduced-motion:reduce){
  .apak-ba-knob,.apak-ba-hint{transition:none!important}
  .apak-ba-knob:hover{transform:none!important}
}

/* ══════════════════════════════════════════════════════════════════
   ⑦ 첫화면 격자무늬 제거 · 영상 선명하게  (사장님 명령831)
   원문: "첫화면 격자무늬 지우자 동영상이 너무 흐려보인다"
   ─ 걷어낸 것 ─
   1) .hero::after  사선 격자 2겹(118deg·28deg) → 통째로 끔
   2) .hero::before 왼쪽 흙빛 덮개(불투명도 .88) → 제거. 이것이 영상을 가리던 주범
   ─ 남긴 것(지우면 안 되는 것) ─
   · 아래쪽 크림 그라데이션 : 그 위 글자가 읽히려면 필요하다.
     위쪽(영상이 잘 보여야 할 곳)은 완전 투명, 글자가 놓인 아래쪽만 누른다.
   ══════════════════════════════════════════════════════════════════ */
.hero::after{ display:none !important; }

.hero::before{
  background:linear-gradient(0deg,
      rgba(250,246,239,.93) 0%,
      rgba(250,246,239,.78) 22%,
      rgba(250,246,239,.42) 46%,
      rgba(250,246,239,.12) 70%,
      rgba(250,246,239,0)   100%) !important;
}

@media (max-width:768px){
  .hero::before{
    background:linear-gradient(0deg,
        rgba(250,246,239,.95) 0%,
        rgba(250,246,239,.82) 28%,
        rgba(250,246,239,.46) 54%,
        rgba(250,246,239,.14) 78%,
        rgba(250,246,239,0)   100%) !important;
  }
  .hero::after{ display:none !important; }
}

/* ══ M. 슬라이더 화살표 제자리 (2026-09-12 · 사장님 「배치가 잘못된거 아니야?」) ══
   [실측 전] 1400폭 홈 — 카드묶음 x121~1280 인데 화살표는 둘 다 x121 에
            y2444·y2488 로 카드 아래 왼쪽에 세로로 쌓여 있었다(5구획 모두 같음).
   [원인] 이 파일 823행 「물방울 심을 자리」의 .slider-nav{position:relative} 가
          main.css 463행 position:absolute 를 덮어 화살표가 흐름으로 돌아왔다.
   ★HTML 0줄 · 선택자 이름 0건 · 색 0건 변경. PC 에서만 자리를 되돌린다.      */
@media (min-width:769px){
  .slider-container{position:relative}
  .slider-nav{
    position:absolute;top:50%;bottom:auto;
    width:44px;height:44px;          /* 누를 자리 44px 유지 */
    margin:-22px 0 0;                /* 높이의 절반 — transform 없이 카드 눈높이 */
    transform:none;                  /* 「움직임 줄이기」에서도 자리가 안 흐트러진다 */
  }
  .slider-nav.prev{left:0;right:auto}
  .slider-nav.next{right:0;left:auto}
}
/* 모바일(≤768)은 카드가 세로로 쌓여 넘길 것이 없다 — 화살표는 계속 숨긴다.
   2026-09-11 「화살표가 카드 글자를 덮음」 재발 방지: main.js 가 인라인
   display:flex 를 심어도 !important 가 이긴다(문서가 아니라 규칙으로 막는다). */
@media (max-width:768px){
  .slider-nav{display:none!important}
}

/* ── 같은 원인으로 깨진 닫기(✕) 되돌리기 (명령832 곁가지) ──
   457·823행이 .callback-close·.popup-close-button 에도 position:relative 를 걸어
   common.css 의 position:absolute(창 오른쪽 위 고정)를 덮었다.
   물방울은 absolute 에서도 담긴다 — overflow:hidden 만 유지하면 된다.        */
.callback-close,.popup-close-button,.qna-close,.review-close{
  position:absolute !important;
}

/* ══════════════════════════════════════════════════════════════════
   ⑧ 첫화면 영상 자동재생 — 아이폰 큰 재생버튼(▶) 제거  (사장님 명령832)
   원문: "마지막 첫화면이 바로 자동 재생 안되는 현상"

   ─ 사실 (2026-09-12 실측) ─
   · 태그에는 muted·autoplay·playsinline 이 이미 전부 있었다 (오늘 깨진 것이 아니다)
   · 영상에 소리 트랙이 아예 없다 (ffprobe: video 스트림 1개뿐)
   · 헤드리스 모바일(375폭)에서 paused=false — 즉 마크업 문제가 아니다
   ⇒ 남은 원인은 아이폰쪽 정책(저전력 모드·저용량 데이터 모드·사파리 사이트별
     「자동 재생 안 함」)이며, 그때 WebKit 이 영상 위에 제 손으로 큰 ▶ 를 그린다.

   ─ 여기서 하는 일 ─
   그 WebKit 기본 ▶ 를 숨긴다. 대신 poster 사진이 보이고,
   화면을 한 번만 건드리면 js/main.js 의 「자동재생 되살리기」가 재생을 시작한다.
   (손가락 동작 한 번이면 저전력 모드에서도 재생이 허용된다 — 이것이 유일한 우회로다)

   ★ .hero-image / #heroMediaTarget 는 금지선택자(238개)라 건드리지 않는다.
     요소 선택자 `.hero video` 로만 건다.
   ══════════════════════════════════════════════════════════════════ */
.hero video::-webkit-media-controls-start-playback-button{
  display:none !important;
  -webkit-appearance:none !important;
}
.hero video::-webkit-media-controls-overlay-play-button{
  display:none !important;
}
.hero video::-webkit-media-controls{
  display:none !important;
}
/* poster 가 아직 안 올라갔거나 영상이 늦게 뜰 때 검은 네모 대신 크림 바탕 */
.hero video{
  background-color:#faf6ef;
}

/* ══ 주문 단추 대칭 (명령833) ═══════════════════════════════════════════
   사장님: 「두번째 주문창에서 아래위 비대칭 간격. 안맞는 버튼.
            좌우로 배치 하던지. 대칭으로 정확하고 깔끔하게.」
   실측 원인 — css/apak-theme.css 2701~2716행(다음단추 56px·18px·좌우28px)과
   2746~2755행(뒤로단추 52px·16px·좌우22px). 처음부터 크기가 다르게 짜여 있었다.
   ★#resumeOrderPrompt 의 display 는 절대 덮지 않는다 — js/order.js 194·196행이
     인라인 display 로 창을 켜고 끈다. !important 로 덮으면 저장된 주문이 없어도
     창이 늘 뜬다(기능 고장). 그래서 상자는 block 그대로 두고 단추만 반씩 나눈다. */

/* ① 크기를 하나로 — 뒤로·다음 모두 56px · 글자 18px · 좌우 24px */
.nav-button,.nav-button.prev,.nav-button.next,.nav-button.order-submit-button{
  min-height:56px!important;padding:0 24px!important;
  font-size:18px!important;box-sizing:border-box!important;
}
/* ② 크기가 같아지면 색이 유일한 구분이다 — 주(채움) / 보조(흰 바탕·선) */
.nav-button.prev{background-color:#FFFFFF!important;color:#33291F!important;
  border:1px solid #786646!important;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 2px 8px rgba(120,102,70,.10)!important;}
.nav-button.prev:hover:not(:disabled){background-color:#F2EADC!important;border-color:#786646!important;}

/* ③ 「이어서 작성」창 — 좌우 반반(폭·높이·여백 동일) */
#resumeOrderPrompt{font-size:0!important;}          /* 단추 사이 공백글자 제거 */
#resumeOrderPrompt p{font-size:16px!important;margin:0 0 16px!important;}
#resumeButton,#startFreshButton{
  display:inline-flex!important;vertical-align:top;
  width:calc(50% - 6px)!important;margin:0!important;
  min-height:56px!important;padding:0 12px!important;font-size:18px!important;
  white-space:nowrap;border:1px solid #786646!important;}
#resumeButton{margin-right:12px!important;}
#startFreshButton:hover{background-color:#F2EADC!important;}

/* ④ 좁은 화면 — 반반으로 쪼개면 「아니요, 새로 시작」(9글자)이 잘린다.
      그래서 480px 미만에서는 같은 폭·같은 높이로 위아래 12px 간격 */
@media (max-width:479px){
  #resumeButton,#startFreshButton{width:100%!important;}
  #resumeButton{margin:0 0 12px!important;}
  .navigation-buttons .nav-button{flex:1 1 100%!important;}
}
/* ═══ 명령832 · 버튼 묶음 「대칭·상자 안쪽」 통일 — CSS만 · 선택자 이름 변경 0 ═══ */
/* ① 폭을 테두리 기준으로 센다 — width:100% + 좌우 패딩이 카드를 26px 뚫던 원인 */
.clt-btn-y,.clt-btn-o,.btn,.btn-shoe,.nav-button,.slider-more-btn{box-sizing:border-box!important}

/* ② 버튼 묶음 = 한 격자. 칸을 똑같이 나눠 폭·높이를 맞춘다(같은 행 폭 차 0) */
.clt-acts,.clt-cta .clt-btns,.result-actions{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;
  align-items:stretch!important;width:100%!important;margin-left:0!important;margin-right:0!important}
.clt-cta .clt-btns{grid-template-columns:1fr!important}
.clt-acts>a,.clt-cta .clt-btns>a,.result-actions>a,.result-actions>button,.result-body>.nav-button{
  width:100%!important;min-width:0!important;margin:0!important;min-height:48px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important}
.result-body>.nav-button{margin:0 0 12px!important}

/* ③ 신발금형 — 감싼 상자에 class 가 없어 묶을 수 없으므로 버튼 폭·높이를 같게 고정
      (가장 긴 글자 288px < 300px 이므로 셋 다 정확히 300px 로 맞는다) */
.btn-shoe{min-width:300px!important;min-height:56px!important;margin:0 12px 12px 0!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important}

/* ④ 모바일(≤768) — 버튼 2개는 「세로로 꽉 참」
      근거: 「전화 055-311-0143」 글자 자연폭 161.4px > 좌우반반 칸 142.5px
      → 반반으로 놓으면 18.9px 모자라 글자가 알약 테두리에 닿는다(375px 실측) */
@media (max-width:768px){
  .clt-acts,.result-actions{grid-template-columns:1fr!important}
  .btn-shoe{display:flex!important;width:100%!important;min-width:0!important;margin:0 0 12px!important}
  .slider-container .slider-more-btn,.slider-container+div>.btn{
    width:100%!important;max-width:320px!important;margin-left:auto!important;margin-right:auto!important}
}


/* ══════════════════════════════════════════════════════════════════════
   명령834 — 주문창 디자인 개선 · 폼이 있는 「모든 쪽」에 함께 먹는다(명령838)
   사장님: "쓸데없이 큰 부분 · 희망도착일 칸도 너무 크고 · 사각은 다 바꿔라 ·
            너무 딱딱하고 ai티가 난다 · 우리 홈페이지 디자인을 입혀라"
   ★선택자 이름 0개 변경(금지선택자 238개 무사) · display 는 손대지 않는다(JS가 켠다)
   ★새로 만든 색 0개 — 승인 팔레트 + 기존 신호색(--sig-err-*)만 쓴다
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. 각진 것을 전부 둥글게 (홈과 같은 반지름 체계) ───────────────── */
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],
input[type=date],input[type=search],select,textarea,.select2-container .select2-selection--single{border-radius:12px!important}
.view-container,.quote-card,.quote-form-section{border-radius:18px!important;border-top-width:1px!important}
.product-section,.form-section,.selection-item,.order-context-summary,.summary-section,#resumeOrderPrompt,
.file-upload-section,.make-block,#file-preview-container,.radio-group,.checkbox-grid,.result-detail,
.result-kakao-promo,.modal-content{border-radius:14px!important}
.product-detail-image,.make-photos img,.selection-item img,.product-video{border-radius:10px!important}
.modal-button,.status-badge,.file-upload-section label,.payment-button{border-radius:999px!important}
.gnb-toggle{border-radius:12px!important}   /* 모바일 줄3개 버튼 — 26쪽 공통으로 유일하게 남아 있던 네모 */
.summary-table{border-collapse:separate!important;border-spacing:0}
.summary-table tbody th{background-color:transparent!important}  /* 표 속 회색 네모 칸 → 글자만 (관공서 표 느낌 제거) */
.summary-table tr:first-child>*:first-child{border-top-left-radius:12px}
.summary-table tr:first-child>*:last-child{border-top-right-radius:12px}
.summary-table tr:last-child>*:first-child{border-bottom-left-radius:12px}
.summary-table tr:last-child>*:last-child{border-bottom-right-radius:12px}

/* ── 2. 쓸데없이 큰 칸 줄이기 — 폭을 「들어갈 글자 수」에 맞춘다 ─────── */
.view-container input,.view-container select,.view-container textarea,.form-group input,.form-group select,
.form-group textarea,.qna-form-group input,.qna-form-group textarea{min-height:50px!important}
#od_desiredDate,input[type=date]{max-width:260px!important}          /* 848px → 260px */
#od_pelletQty,#od_blockQty,#ci_postcode,select[name$="Qty"]{max-width:220px!important}
input[type=tel]{max-width:320px!important}
#od_customerEmail,input[type=email]{width:100%!important;max-width:420px!important}
#ci_customerName,#contactName,#companyName,#ci_address_detail{max-width:380px!important}
.view-container textarea,.form-group textarea{min-height:120px!important}
.product-detail-image{max-width:min(300px,100%)!important;margin:0 auto 18px!important} /* 500×530px 사진이 칸보다 컸다 */

/* ── 3. 빈 공간 줄이기 — 홈과 같은 리듬 (모바일 여백은 건드리지 않는다) ─ */
@media (min-width:769px){.view-container,.quote-card,.quote-form-section{padding:30px 32px!important;margin:26px auto!important}}
.product-section,.form-section{padding:20px!important;margin-bottom:16px!important}
.view-container label:not(.upload-btn),.form-group>label:not(.upload-btn),.qna-form-group label{margin-top:16px!important;margin-bottom:6px!important}
.order-stepper{margin-bottom:18px!important}
.navigation-buttons{margin-top:24px!important;padding-top:20px!important}
.view-container .page-title{font-size:clamp(26px,3.2vw,34px)!important;margin-bottom:8px!important}
.selection-section{gap:22px!important;margin-top:26px!important}

/* ── 4. AI티 제거 — 빨간 점선 경고상자 → 부드러운 카드형 알림 ────────── */
/*    전: 각진 빨강 점선 · 안쪽여백 56~84px · 높이 138~194px(상자 하나가 화면 절반) */
.error-message,#form-error{padding:11px 14px 11px 40px!important;border:0!important;
  border-left:3px solid #C08A76!important;border-radius:12px!important;background-color:var(--sig-err-bg)!important;
  font-size:15px!important;font-weight:600!important;line-height:1.55!important;position:relative}
.error-message::before,#form-error::before{content:"!";position:absolute;left:13px;top:12px;width:18px;height:18px;
  line-height:18px;border-radius:50%;background:#8E3320;color:#FFFBF2;font-size:12px;font-weight:700;text-align:center}
.required::after,.required-mark{color:#9C4B36!important;font-weight:500!important;font-size:.78em;vertical-align:super;margin-left:3px}
input.invalid,select.invalid,textarea.invalid,.model-checklist.invalid{border-radius:12px!important;border-width:1px!important}

/* ── 5. 홈 디자인 이식 — 카드 경계·hover 하이라이트·강조색 테두리 ────── */
.view-container,.quote-card,.quote-form-section{box-shadow:0 2px 10px rgba(120,102,70,.10),0 18px 44px -26px rgba(120,102,70,.28)!important}
.product-section,.form-section{transition:border-color .28s var(--ease-out),box-shadow .28s var(--ease-out)}
.product-section:hover,.form-section:hover{border-color:#C6AF85!important;box-shadow:0 6px 20px rgba(120,102,70,.10)!important}
.view-container input:focus,.view-container select:focus,.view-container textarea:focus,.form-group input:focus,
.form-group select:focus,.form-group textarea:focus,.qna-form-group input:focus,.qna-form-group textarea:focus{
  outline:none!important;border-color:#786646!important;box-shadow:0 0 0 3px rgba(120,102,70,.16)!important}
.view-container input:focus-visible,.view-container select:focus-visible,.form-group input:focus-visible,
.qna-form-group input:focus-visible{outline:2px solid #786646!important;outline-offset:2px!important}
.view-container input:hover,.view-container select:hover,.view-container textarea:hover{background-color:#FFFBF2!important}
.modal-button,.file-upload-section label{position:relative;overflow:hidden;
  transition:transform .42s cubic-bezier(.34,1.56,.64,1),box-shadow .28s var(--ease-out)}
.modal-button:hover,.file-upload-section label:hover{transform:translateY(-2px);box-shadow:0 8px 20px -8px rgba(120,102,70,.5)}
.modal-button:active,.file-upload-section label:active{transform:scale(.96)}

/* ── 6. 작은 화면 — 좁힌 칸은 다시 100% 로 (칸이 쪼그라들면 안 된다) ─── */
@media (max-width:640px){
  #od_desiredDate,#od_pelletQty,#od_blockQty,#ci_postcode,select[name$="Qty"],input[type=tel],input[type=email],
  input[type=date],#od_customerEmail,#ci_customerName,#contactName,#companyName,#ci_address_detail{max-width:100%!important}
}

/* ══ ⑦ 반짝임 통일 — 「눌리는 것」이면 예외 없이 굵어지고 커진다 ══════════════════
   2026-09-12 · 명령837 "버튼류들은 어떤것은 반짝이고 어떤것은 반짝이지 않는데 통일해라"
              · 명령838 "이페이지만이 아니라 전체 적용하란 말이야"
   ★이름을 하나하나 적지 않는다 — ④⑤가 이름을 세다가 계속 빠뜨렸다. 요소 「종류」로 잡는다.
     이 목록은 js/main.js 705~712행(물방울이 실제로 심는 자리)과 한 글자도 다르지 않다.
   ★:where() 라 무게가 (0,1,0) 뿐이다 — 위 ④⑤·기존 규칙·인라인 style 이 전부 이긴다.
     그래서 이 블록은 「아무 규칙도 없던 빈자리」만 메운다. 지금 잘 되는 것은 한 개도 안 바뀐다.
   ★색은 칠하지 않는다 — currentColor 로 굵게만 만든다. 어두운 바탕 위 밝은 글자에
     어두운 색을 칠해 글자가 통째로 사라진 사고(함정13 · R-192 · R-198)를 원천 차단한다.
     테두리도 팔레트에서 가장 어두운 --a-900 만 쓴다 — 어느 상태에서든 진해지기만 한다.
   ★자리는 한 픽셀도 안 민다 — 크기는 transform:scale 로만 준다(글상자 크기가 그대로다).
   ★글자 입력칸·textarea·고르는칸·체크박스·라디오·비활성·밀어보기 손잡이는 제외.
     손가락 기기는 통째로 꺼지고, 움직임 줄이기를 켠 손님에겐 크기 변화를 뺀다.
   ★관리자 화면은 CSS 가 따로다(apak-new 를 안 읽는다) — 아래 블록을 그대로
     시안_관리자_2026-09-12\css\apak-admin-new.css 맨 끝에도 붙여야 「전체 적용」이 된다. ══ */
@media (hover:hover) and (pointer:fine){
  :where(a,button,summary,label,[role="button"],[onclick],
         input[type="submit"],input[type="button"],input[type="reset"],
         .thumb-wrapper,#reviewStarInput .star){
    transition:color .2s var(--ease-out,ease),transform .2s var(--ease-out,ease),
               text-shadow .2s var(--ease-out,ease),border-color .2s var(--ease-out,ease),
               background-color .2s var(--ease-out,ease),box-shadow .2s var(--ease-out,ease);
  }
  :where(a,button,summary,label,[role="button"],[onclick],
         input[type="submit"],input[type="button"],input[type="reset"],
         .thumb-wrapper,#reviewStarInput .star):where(:not([disabled]):not([aria-disabled="true"]):not(.apak-ba):not(.apak-ba-knob):not(.flatpickr-calendar *):not(.select2-container *)):hover{
    text-shadow:var(--apak-ink-bold,0 0 .4px currentColor,.3px 0 0 currentColor,-.3px 0 0 currentColor);
    transform:scale(1.06);
    border-color:var(--a-900,#33291F);
  }
  /* 카드·칸 통째로 눌리는 자리 — 이름을 세지 않고 「이름의 생김새」로 잡는다.
     칸 자신에 걸면 그 안의 글자가 전부 물려받아 굵어진다(글상자 크기는 그대로다) */
  :where(article,[class*="-card"],[class*="-item"],[class*="-tile"]):hover,
  :where(a,button,label,summary,[role="button"],[onclick],article,
         [class*="-card"],[class*="-item"],[class*="-tile"]):hover
  :where(h2,h3,h4,b,strong,.card-title,.ib-title){
    text-shadow:var(--apak-ink-bold,0 0 .4px currentColor,.3px 0 0 currentColor,-.3px 0 0 currentColor);
  }
  /* 누르는 순간 살짝 눌린다 — 빈자리에만(기존 :active scale(.96) 규칙이 이긴다) */
  :where(a,button,summary,label,[role="button"],[onclick],
         input[type="submit"],input[type="button"],input[type="reset"]):where(:not([disabled]):not(.apak-ba-knob)):active{transform:scale(.97)}
}
/* 움직임 줄이기를 켠 손님 — 크기는 그대로 두고 굵기만 남긴다 */
@media (prefers-reduced-motion:reduce){
  :where(a,button,summary,label,[role="button"],[onclick],
         input[type="submit"],input[type="button"],input[type="reset"],
         .thumb-wrapper,#reviewStarInput .star):hover,
  :where(a,button,summary,label,[role="button"]):active{transform:none;transition:none}
}

/* ══ ⑧ 리퀴드 글라스 — 밝고 환한 유리 (명령844·845·846) ═══════════════════
   사장님(846): "글라스 효과를 좀더 밝고 환하게. 애플의 시퀴드 글라스 효과처럼"
   ★지금까지의 「유리」는 가짜였다 — 광택 그라데이션만 있고 배경이 불투명이라 뒤가 한
     곳도 안 비쳤다(28쪽 DOM 실측: 화면에 보이는 backdrop-filter 0곳 → 지금 67/67).
   ★애플 Liquid Glass 4요소(스킬 ecc:liquid-glass-design): ①굴절 blur+saturate
     ②밝기를 올려 환하게 ③안쪽 윗면 빛+바깥 그림자로 깊이 ④누르면 모서리가 녹는다.
   ★대비 실측(글자만 숨긴 캡처 픽셀·최악2%) — ★순검정 배경★에서도 머리띠 7.00 ·
     주버튼 6.21~6.33 · 뜬창 8.33 · 배지 10.77 (전부 4.5 초과). 실쪽 3폭 미달 0·최저 7.04.
   ★자리는 1px 도 안 민다 — position·display·overflow·border-width 무수정(R-200 방지 ·
     좌표 이동 0 실측). 미지원 브라우저·투명도줄이기는 불투명으로 되돌아간다. ══════ */
:root{
  --ag-blur:24px; --ag-sat:180%; --ag-bri:1.22;
  /* ★환하게 만드는 것은 brightness 가 아니라 「흰빛 비율」이다 — 곱셈이라 어두운 사진
     (값 30)에 1.22 를 곱해도 37 이다. 1차판이 오히려 칙칙했다(#759·#777 어두움 거부
     재현 직전) → 아래 --ag-glow 로 흰빛을 얹어 바닥을 올린다. */
  --ag-glow:linear-gradient(165deg,rgba(255,253,248,.60) 0%,rgba(255,251,242,.30) 52%,rgba(255,255,255,.46) 100%);
  --ag-rim:rgba(255,255,255,.86);
  --ag-lip:inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(255,255,255,.32);
  --ag-lift:0 10px 30px -8px rgba(120,102,70,.26), 0 2px 6px rgba(120,102,70,.12);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 @media (prefers-reduced-transparency:no-preference){
  /* ── ㉠ 머리띠 27쪽 — 유리가 가장 잘 맞는 자리(늘 떠 있고 뒤가 흐른다) ── */
  .gnb{
    background-color:rgba(240,232,217,.80)!important;     /* 크림을 흰쪽으로 올린 값 */
    background-image:var(--ag-glow)!important;            /* ★환하게 — 흰빛을 얹는다 */
    -webkit-backdrop-filter:blur(var(--ag-blur)) saturate(var(--ag-sat)) brightness(var(--ag-bri));
            backdrop-filter:blur(var(--ag-blur)) saturate(var(--ag-sat)) brightness(var(--ag-bri));
    border-bottom-color:rgba(120,102,70,.20)!important;   /* 폭 2px 그대로 — 배치 불변 */
    box-shadow:var(--ag-lip),0 6px 22px -10px rgba(120,102,70,.24)!important;
  }
  /* ── ㉡ 덮개 시트 — 흐림이 갈라주니 어둡게 깔 필요가 없다. ★.qna-modal 에 남아 있던
     rgba(0,0,0,.6) 순검정(#812·814·820 위반)도 여기서 같이 없앤다 ── */
  .modal-overlay,.qna-modal,.popup-backdrop,.callback-backdrop{
    background-color:rgba(120,102,70,.34)!important;
    -webkit-backdrop-filter:blur(12px) saturate(150%) brightness(1.06);
            backdrop-filter:blur(12px) saturate(150%) brightness(1.06);
  }
  .modal-content,.qna-modal-content,.popup-container,.callback-card,.contact-fab-item{
    background-color:rgba(255,253,248,.84)!important;     /* 뜬 창은 읽는 자리 — 더 환하게 */
    background-image:var(--ag-glow)!important;
    -webkit-backdrop-filter:blur(30px) saturate(180%) brightness(1.20);
            backdrop-filter:blur(30px) saturate(180%) brightness(1.20);
    border:1px solid var(--ag-rim)!important;
    box-shadow:var(--ag-lip),var(--ag-lift)!important;
  }
  /* ── ㉢ 주 버튼 — 승인색 #E2D3B4 그대로, 흰빛 82%. ⛔.quote-btn·.cgate-btn·
     .apply-button 제외: 글자색이 안 고정돼 밝은 #5E4B2E 를 물려받아 어두운 뒤에서
     2.93:1 로 떨어진다(실측). 셋 다 실제 쪽 0곳이라 손해 없다 ── */
  .btn-primary,.gnb-contact-btn,.contact-fab-main,.submit-btn,.payment-button,
  .select-button,.nav-button,#startButton,.slider-more-btn,.clt-btn-y,
  .callback-float-btn{
    background-color:rgba(226,211,180,.82)!important;
    -webkit-backdrop-filter:blur(18px) saturate(var(--ag-sat)) brightness(var(--ag-bri));
            backdrop-filter:blur(18px) saturate(var(--ag-sat)) brightness(var(--ag-bri));
    border-color:rgba(120,102,70,.52)!important;
  }
  .btn-primary:hover,.gnb-contact-btn:hover,.contact-fab-main:hover,.submit-btn:hover,
  .payment-button:hover,.select-button:hover,.nav-button:hover,#startButton:hover,
  .slider-more-btn:hover,.clt-btn-y:hover,.callback-float-btn:hover{
    background-color:rgba(214,195,160,.90)!important;
  }
  /* 보조·화살표·사진 위 배지 — ★사진에 바로 얹히므로 흰빛을 가장 높게 */
  .btn-secondary,.content-button,.start-new-btn,#startFreshButton,.nf-links a,
  .slider-nav,.case-badge{
    background-color:rgba(255,255,255,.88)!important;
    -webkit-backdrop-filter:blur(16px) saturate(165%) brightness(1.18);
            backdrop-filter:blur(16px) saturate(165%) brightness(1.18);
  }
  /* ── ㉣ 누르면 유리가 눌리고 모서리가 녹는다 (애플 morph · 물방울과 함께) ── */
  .btn-primary:active,.gnb-contact-btn:active,.contact-fab-main:active,.submit-btn:active,
  .payment-button:active,.select-button:active,#startButton:active,.slider-more-btn:active,
  .clt-btn-y:active,.callback-float-btn:active{
    border-radius:26px!important;                        /* 알약 → 모난돌 (명령793) */
    box-shadow:inset 0 2px 6px rgba(120,102,70,.22)!important;
  }
 }
}
/* ══ ⑨ 마무리 — 달력·카드·덮개·투명버튼 (명령834④·838·843) ═══════════════
   ★전부 「달력을 열어서 재고」 고쳤다(추측 0). 아래 숫자는 전부 실측값이다.
   ㉠달력(flatpickr)은 CDN 기본 테마 그대로였다 — 선택일 #569FF7(파랑)·순백 창·모서리
     5px, 대비 선택 2.73·오늘 1.19·비활성 1.19(셋 다 구분 불가). 게다가 common.css:50
     `body>*:not(header)…{width:100%}` 가 body 직속 자식인 달력까지 잡아 폭이
     375/800/1400px 로 늘어나 있었다(명령561 뜬버튼이 화면 밖으로 나간 것과 같은 원인).
   ㉡.solution-card 9장 radius 0px — apak-new:135 의 14px 목록에 이 이름만 빠졌다
     (서버가 먼저 칠하는 .slide-card 는 14px 정상, JS가 바꿔 끼우는 쪽만 각짐).
   ㉢덮개는 유리가 꺼지면 옛 청록 rgba(11,36,41,.62) 로 되돌아갔다. ★순검정
     rgba(0,0,0,.6)(qna.css:422)은 apak-theme:486 이 이미 덮어 실효 0곳(유리 켬/끔
     양쪽 실측) — 남은 문제는 순검정이 아니라 「옛 팔레트 잔상」이었다.
   ㉣.quote-btn·.cgate-btn·.apply-button 은 배경색이 아예 없어(투명) 뒤가 어두우면 물려받은
     글자 #5E4B2E 가 묻힌다(실측 최악 1.12:1). 셋 다 쓰는 쪽 0곳 — 아직 안 보이는 잠복 결함.
   ★자리는 1px 도 안 민다 — position·display·overflow·border-width·padding 무수정
     (R-200). 테두리 대신 box-shadow 로 표시하고, 폭 되돌리기 한 곳에만 !important. */

/* ── ㉠-1 폭 되돌리기(전역 (0,2,4) 규칙을 이겨야 해 여기만 !important) + 달력 창 ── */
.flatpickr-calendar{width:auto!important;max-width:calc(100vw - 24px)!important}
.flatpickr-calendar{background:#FFFBF2;border-radius:18px;
  box-shadow:0 0 0 1px rgba(120,102,70,.16),var(--ag-lip),var(--ag-lift)}
.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowBottom:before{border-bottom-color:rgba(120,102,70,.22);border-top-color:rgba(120,102,70,.22)}
.flatpickr-calendar.arrowTop:after,.flatpickr-calendar.arrowBottom:after{border-bottom-color:#FFFBF2;border-top-color:#FFFBF2}

/* ── ㉠-3 머리(월·연) + 요일 — 기본 테마의 검정·빨강(#f64747)을 걷어낸다 ── */
.flatpickr-months .flatpickr-month,.flatpickr-current-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months{color:#33291F;font-weight:700}
.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{color:#5E4B2E;fill:#5E4B2E}
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#33291F}
.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#33291F}
span.flatpickr-weekday{color:#5E4B2E;font-weight:800}
.numInputWrapper span{border-color:rgba(120,102,70,.22)}

/* ── ㉠-4 날짜 4상태를 「눈으로 구분」되게 (기능) — 오늘·선택·비활성·평일 ── */
.flatpickr-day{color:#33291F;border-radius:999px}
.flatpickr-day:hover,.flatpickr-day:focus{background:#EDE1CB;border-color:#EDE1CB}
.flatpickr-day.today{box-shadow:inset 0 0 0 2px #5E4B2E;border-color:#5E4B2E;font-weight:800}
.flatpickr-day.today:hover,.flatpickr-day.today:focus{background:#EDE1CB;border-color:#EDE1CB;color:#33291F}
.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.selected:focus{
  background:#5E4B2E;border-color:#5E4B2E;color:#FFFBF2;font-weight:800;
  box-shadow:0 2px 8px rgba(120,102,70,.34)}
.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay{color:rgba(94,75,46,.55);background:transparent}

/* ── ㉡ 각진 카드 → .slide-card 와 같은 14px. 무게 (0,1,0) 이면 이긴다(!important 불요).
      ★전수에서 하나 더 나왔다 — .product-detail-card 가 세척기 3쪽에서 radius 0
      (apak-theme:1599). 같은 병이라 같이 고친다(명령838 「전체 적용」) ── */
.solution-card,.product-detail-card{border-radius:14px}
.solution-card .card-thumbnail{border-radius:14px 14px 0 0}

/* ── ㉢ 덮개 바닥색 — 유리가 꺼져도 옛 청록으로 안 돌아가게(유리 켜지면 .34 가 이김) ── */
.modal-overlay,.qna-modal,.popup-backdrop,.callback-backdrop{background-color:rgba(120,102,70,.42)}
/* ── ㉣ 투명 버튼 3종에 바닥을 깔아 준다 — 뒤가 무엇이든 대비가 안 무너지게.
      유리 결은 지원 브라우저에서만, 미지원·투명도줄이기는 아래 불투명값으로 산다 ── */
.quote-btn,.cgate-btn,.apply-button{background-color:rgba(226,211,180,.92);color:#33291F}
.quote-btn:hover,.cgate-btn:hover,.apply-button:hover{background-color:rgba(214,195,160,.96)}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 @media (prefers-reduced-transparency:no-preference){
  .flatpickr-calendar,.quote-btn,.cgate-btn,.apply-button{
    -webkit-backdrop-filter:blur(var(--ag-blur)) saturate(var(--ag-sat)) brightness(var(--ag-bri));
            backdrop-filter:blur(var(--ag-blur)) saturate(var(--ag-sat)) brightness(var(--ag-bri))}
  /* 버튼 3종의 광택은 apak-new:221 의 !important 그라데이션이 이미 깔려 있다 */
  .flatpickr-calendar{background-color:rgba(255,251,242,.88);background-image:var(--ag-glow)}
 }
}