/* ═══════════════════════════════════════════════════════════════════════════
   KY MOTORS — v4.css · 2026-09-21 리디자인 공용 껍데기
   ───────────────────────────────────────────────────────────────────────────
   ⚠ 이 파일은 **새로 만든 것**이다. 기존 assets/new/site.css 는 건드리지 않는다
     (AGENTS 7 — 서버본이 최신일 수 있다). 옛 디자인 페이지는 그대로 site.css 를 쓰고,
     리디자인한 페이지만 v4.css + (페이지별 css) 를 쓴다.

   담는 것: 토큰 · 리셋 · 타이포 · 레이아웃 · 버튼 · 헤더 · 모바일 메뉴 · 푸터 · 탭바 ·
            스크롤 리빌 · 가로 스크롤(드래그) · 맨 위로 · 지도 덮개
            + (v4.1.0 · 2026-09-22 인터랙션 시안) 입력·칩·슬롯·달력 셀·카드 hover·토스트·배너·빈 상태·확인창·체크박스
   담지 않는 것: 각 페이지의 섹션 (→ home.css 등)
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  --n0:#f6f5f1; --n1:#eae9e4; --n2:#d4d3cd; --n3:#b6b5b0; --n4:#91928e;
  --n5:#6b6e69; --n6:#4b4e49; --n7:#30332f; --n8:#1a1d1b; --n9:#0e1110;

  --red:#c62f23; --red-hover:#b82b20; --red-light:#f1796c;
  --success:#83b99b; --warning:#c3a878;

  --surface:var(--n0); --surface-soft:var(--n1);
  --ink:var(--n9); --muted:var(--n5); --line:var(--n2);

  --dark:var(--n9); --on-dark:var(--n0); --on-dark-muted:var(--n3);
  --dark-line:#ffffff26; --dark-line-soft:#ffffff14;

  --radius:4px; --radius-lg:16px;
  --shadow:0 1px 2px #0e11100d, 0 4px 16px #0e11100d;
  --float-shadow:0 4px 16px #0e111033, 0 24px 64px #0e111033;

  /* 본문 = Pretendard(웹폰트) → 못 받으면 기존 Noto Sans KR → 시스템 */
  --font:"Pretendard Variable",Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,
         "Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --display:"Barlow Condensed","Pretendard Variable",Pretendard,sans-serif;
  --meta:"DM Sans","Pretendard Variable",Pretendard,sans-serif;

  --ease:cubic-bezier(.2,.7,.2,1);
  --t:200ms ease-out;
  --gutter:clamp(24px,5vw,64px);
  --max:1320px;
  --hd:clamp(76px,7vw,80px);
  --tabbar:0px;             /* 모바일에서만 탭 바 높이만큼 (아래 미디어쿼리) */
}

*,*::before,*::after{ box-sizing:border-box; }
/* ⚠ 반드시 필요하다 — .lb{display:flex} 처럼 클래스로 display 를 주면 브라우저 기본 [hidden]
   규칙을 이겨서, 숨긴 요소가 화면을 덮고 클릭을 가로챈다 (2026-09-21 실제로 겪음). */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:var(--tabbar);
  /* 한국어는 단어 중간에서 끊으면 안 된다 — keep-all 이 없으면 「맡기면」이 「맡 / 기면」으로 갈린다 */
  word-break:keep-all;
  overflow-wrap:break-word;
}
img,video,svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; transition:color var(--t); }
a:hover{ color:var(--red); }
button{ font:inherit; cursor:pointer; }
input,textarea,select{ font:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:500; letter-spacing:-.04em; line-height:1.3; text-wrap:pretty; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--red); outline-offset:5px; border-radius:2px; }
.is-dark :focus-visible,[data-tone="dark"] :focus-visible{ outline-color:var(--red-light); }

/* 본문 바로가기 — 키보드 사용자용 */
.skip{
  position:fixed; top:8px; left:8px; z-index:120; transform:translateY(-200%);
  background:var(--red); color:var(--n0); padding:12px 18px; border-radius:var(--radius);
  font-weight:600; transition:transform var(--t);
}
.skip:focus-visible{ transform:none; color:var(--n0); }

/* ── 레이아웃 ── */
.wrap{ width:min(var(--max),calc(100% - 2*var(--gutter))); margin-inline:auto; }
.grid > *{ min-width:0; }
.sec{ padding:clamp(64px,9vw,112px) 0; }
.sec--tight{ padding:clamp(56px,7vw,88px) 0; }
.sec--dark{ background:var(--dark); color:var(--on-dark); }
.sec--deep{ background:var(--n8); color:var(--on-dark); }
.sec--soft{ background:var(--surface-soft); }

/* 섹션 머리 — 번호 · 선 · 영문 라벨 */
.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-family:var(--meta); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red);
}
.eyebrow i{ width:24px; height:1px; background:currentColor; flex:none; }
.sec--dark .eyebrow,.sec--deep .eyebrow{ color:var(--red-light); }
.h2{ margin:16px 0 0; font-size:clamp(32px,3.6vw,52px); }
.lead{ margin:14px 0 0; max-width:44ch; font-size:15px; line-height:1.85; color:var(--muted); }
.sec--dark .lead,.sec--deep .lead{ color:var(--on-dark-muted); }
.note{ margin:16px 0 0; font-size:12px; line-height:1.7; color:var(--n5); }
.sec--dark .note,.sec--deep .note{ color:var(--n4); }
.headrow{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; }

/* ── 버튼 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:space-between; gap:32px;
  min-height:52px; padding:0 22px; border-radius:var(--radius); border:1px solid transparent;
  font-size:15px; font-weight:600; letter-spacing:-.01em; background:transparent; color:inherit;
  transition:background var(--t),color var(--t),border-color var(--t),transform 120ms ease-out;
}
.btn .ar{ transition:transform 200ms ease-out; display:inline-block; }
.btn:hover .ar{ transform:translateX(4px); }
.btn:active{ transform:scale(.985); }
/* 비활성 40% · hover 무반응 · busy = 라벨이 「…중」으로 바뀌고 화살표는 숨는다(폭은 min-width 로 유지) */
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.4; cursor:default; pointer-events:none; transform:none; }
.btn.is-busy{ opacity:.6; cursor:progress; pointer-events:none; }
.btn.is-busy .ar{ display:none; }
.btn.is-done{ pointer-events:none; }
.btn.is-done .ar{ display:none; }
.btn--lg{ min-height:56px; padding:0 24px; font-size:16px; min-width:220px; gap:40px; }
.btn--xl{ min-height:64px; padding:0 28px; font-size:17px; min-width:260px; gap:48px; }
.btn--sm{ min-height:44px; padding:0 16px; font-size:14px; gap:18px; }
.btn--red{ background:var(--red); color:var(--n0); }
.btn--red:hover{ background:var(--red-hover); color:var(--n0); }
.btn--ink{ background:var(--n9); color:var(--n0); }
.btn--ink:hover{ background:var(--n7); color:var(--n0); }
.btn--cream{ background:var(--n0); color:var(--n9); }
.btn--cream:hover{ background:#fff; color:var(--red); }
.btn--line{ border-color:var(--n9); color:var(--n9); }
.btn--line:hover{ border-color:var(--red); color:var(--red); }
.btn--ghost{ border-color:#ffffff59; color:var(--n0); }
.btn--ghost:hover{ border-color:var(--n0); color:var(--n0); }
/* 밑줄형 텍스트 링크 */
.tlink{
  display:inline-flex; align-items:center; gap:12px; min-height:44px;
  font-weight:600; font-size:15px; border-bottom:1px solid currentColor;
}
.tlink:hover{ color:var(--red); }
.sec--dark .tlink:hover,.sec--deep .tlink:hover{ color:var(--red-light); }

/* ── 스크롤 진행 막대 ── */
.kyprog{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:101;
  background:var(--red); transition:width 120ms linear; pointer-events:none;
}

/* ── 헤더 ── 히어로 위에서는 투명, 내리면 어두운 유리 */
.v4head{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--hd);
  display:flex; align-items:center; color:var(--on-dark);
  background:transparent; transition:background var(--t),backdrop-filter var(--t);
}
.v4head.is-scrolled,.v4head.is-open{
  background:#0e1110e6;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
/* 홈만 히어로 위에서 투명하다. 밝은 바탕의 다른 화면(예약·실시간·정비사례)은 처음부터 어둡게 */
body:not(.p-home) .v4head{ background:var(--n9); }
.v4head__in{ width:min(var(--max),calc(100% - 2*var(--gutter))); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px; }
.v4logo{ display:flex; align-items:center; gap:12px; flex:0 1 auto; min-width:0; }
.v4logo img{ height:15px; width:auto; display:block; flex:none; }
.v4logo small{ font-family:var(--meta); font-size:10px; letter-spacing:.14em; color:var(--n3); white-space:nowrap; }
/* 좁은 화면에서는 로고 옆 영문 꼬리표를 감춘다 — 햄버거가 화면 밖으로 밀려난다 */
@media (max-width:640px){
  .v4head__in{ gap:12px; }
  .v4logo small{ display:none; }
  .v4logo img{ height:13px; }
}
.v4nav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); font-size:14px; font-weight:500; margin-inline:auto; }
.v4nav a{ position:relative; min-height:44px; display:inline-flex; align-items:center; color:var(--n2); }
.v4nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:14px; height:1px; background:var(--red-light);
  transform:scaleX(0); transform-origin:left center; transition:transform 300ms var(--ease);
}
.v4nav a:hover,.v4nav a.is-active{ color:var(--n0); }
.v4nav a:hover::after,.v4nav a.is-active::after{ transform:scaleX(1); }
.v4head__cta{ display:flex; align-items:center; gap:12px; flex:none; }
.v4head .btn{ min-height:44px; padding:0 18px; font-size:14px; gap:14px; }
.v4burger{
  display:none; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--dark-line); border-radius:var(--radius); color:var(--n0);
}
.v4burger span{ display:block; width:20px; height:2px; background:currentColor; transition:transform 300ms var(--ease); }
@media (max-width:1023px){
  .v4nav{ display:none; }
  .v4head__cta .btn{ display:none; }
  .v4burger{ display:flex; }
}

/* ── 모바일 전체 메뉴 ── */
.v4ov{
  position:fixed; inset:0; z-index:110; background:var(--n9); color:var(--on-dark);
  display:flex; flex-direction:column; padding:clamp(24px,5vw,40px); overflow:auto;
  opacity:0; visibility:hidden; transition:opacity 260ms ease-out,visibility 260ms;
}
.v4ov.is-on{ opacity:1; visibility:visible; }
.v4ov__bar{ display:flex; justify-content:space-between; align-items:center; height:52px; }
.v4ov__close{
  width:44px; height:44px; background:transparent; border:1px solid var(--dark-line);
  border-radius:var(--radius); color:var(--n0); font-size:22px; line-height:1;
}
.v4ov__nav{ display:flex; flex-direction:column; margin-top:32px; border-top:1px solid var(--dark-line); }
.v4ov__nav a{
  display:flex; align-items:baseline; gap:20px; padding:18px 0;
  border-bottom:1px solid var(--dark-line);
  font-size:clamp(24px,6vw,32px); font-weight:500; letter-spacing:-.03em;
  transition:color var(--t),padding-left var(--t);
}
.v4ov.is-on .v4ov__nav a{ animation:kyFadeUp 500ms ease-out both; animation-delay:var(--d,0ms); }
.v4ov__nav a:hover{ color:var(--red-light); padding-left:8px; }
.v4ov__nav b{ font-family:var(--meta); font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--red-light); }
.v4ov__foot{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-top:auto; padding-top:32px; }

/* ── 푸터 ── */
.v4foot{ background:var(--dark); color:var(--on-dark); padding:clamp(56px,7vw,88px) 0 32px; }
.v4foot__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:40px 32px; }
.v4foot__brand img{ height:20px; width:auto; display:block; }
.v4foot__brand p{ margin:16px 0 0; font-size:13px; line-height:1.9; color:var(--on-dark-muted); }
.v4sns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.v4sns a{
  min-height:36px; padding:0 12px; display:inline-flex; align-items:center;
  border:1px solid var(--dark-line); border-radius:var(--radius); font-size:12px; color:var(--n2);
}
.v4sns a:hover{ border-color:var(--n0); color:var(--n0); }
.v4fcol b{ display:block; font-family:var(--meta); font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--n4); margin-bottom:16px; }
.v4fcol ul{ display:flex; flex-direction:column; gap:10px; font-size:14px; }
.v4fcol a{ display:inline-flex; min-height:28px; align-items:center; color:var(--n2); }
.v4fcol a:hover{ color:var(--n0); }
.v4legal{
  margin-top:56px; padding-top:24px; border-top:1px solid var(--dark-line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 32px;
  font-size:12px; line-height:1.8; color:var(--n4);
}
.v4legal a{ color:var(--n2); border-bottom:1px solid var(--n6); }
.v4legal a:hover{ color:var(--n0); }
.v4legal__r{ max-width:52ch; text-align:right; }
@media (max-width:640px){ .v4legal__r{ text-align:left; } }

/* ── 모바일 하단 탭 바 ── 720px 미만에서만 ── */
.v4tab{ display:none; }
@media (max-width:719px){
  :root{ --tabbar:calc(56px + env(safe-area-inset-bottom)); }   /* 탭 바가 마지막 줄을 가리지 않게 */
  .v4tab{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
    background:var(--n9); color:var(--on-dark); border-top:1px solid var(--dark-line);
    padding-bottom:env(safe-area-inset-bottom);
    transition:transform 260ms var(--ease);
  }
  .v4tab.is-hidden{ transform:translateY(calc(100% + env(safe-area-inset-bottom) + 2px)); }
  .v4tab a{ min-height:56px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:500; color:var(--n2); }
  .v4tab a:hover,.v4tab a:active{ background:var(--n8); color:var(--n0); }
  .v4tab .is-hot{ background:var(--red); color:var(--n0); font-size:14px; font-weight:600; }
  .v4tab .is-hot:hover,.v4tab .is-hot:active{ background:var(--red-hover); color:var(--n0); }
}

/* ── 맨 위로 ── 데스크톱은 두 화면, 폰은 400px 넘게 내렸을 때. 폰에서는 탭 바 위 12px 에 붙고 탭 바가 숨으면 같이 내려온다 ── */
.v4top{
  position:fixed; right:24px; bottom:24px; z-index:88; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#0e1110e0; color:var(--n0); border:1px solid var(--dark-line);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity var(--t),transform var(--t),background var(--t),bottom 200ms ease-out;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.v4top.is-on{ opacity:1; transform:none; pointer-events:auto; }
.v4top:hover{ background:var(--red); }
@media (max-width:719px){
  .v4top{ right:16px; bottom:calc(var(--tabbar) + 12px); }
  body.tab-hidden .v4top{ bottom:calc(24px + env(safe-area-inset-bottom)); }
  .p-booking .v4top{ bottom:calc(88px + env(safe-area-inset-bottom)); }
}

/* ── 스크롤 리빌 ── */
[data-rv]{
  opacity:0; transform:translateY(22px);
  transition:opacity 700ms var(--ease),transform 700ms var(--ease);
  transition-delay:var(--rv,0ms);
}
[data-rv].rv-in{ opacity:1; transform:none; }

/* ── 가로 스크롤(마우스 드래그) ── */
.hscroll{ cursor:grab; scrollbar-width:none; -ms-overflow-style:none; }
.hscroll::-webkit-scrollbar{ display:none; }
.hscroll.is-drag{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.hscroll.is-drag *{ pointer-events:none; }

/* ── 지도 덮개 ── 손가락 장치에서만 (PC 는 변화 없음) ── */
.mapwrap{ position:relative; }
.mapguard{ display:none; }
@media (hover:none) and (pointer:coarse){
  .mapguard{
    position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; justify-content:center;
    padding-bottom:16px; background:#0e111033; border:0; color:var(--n0);
    font-size:12px; font-weight:600; letter-spacing:-.01em;
  }
  .mapguard span{ background:#0e1110cc; padding:8px 14px; border-radius:999px; }
  .mapwrap.is-live .mapguard{ display:none; }
}

/* ── 애니메이션 ── */
@keyframes kyFadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }
@keyframes kyPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes kyShimmer{ from{ background-position:-160% 0; } to{ background-position:260% 0; } }

/* 로딩 자리표시 */
.sk{
  background:linear-gradient(90deg,#0000 0%,#00000010 40%,#00000010 60%,#0000 100%) ,var(--n1);
  background-size:220% 100%; animation:kyShimmer 1.4s linear infinite; border-radius:var(--radius);
}
.sec--dark .sk,.sec--deep .sk{
  background:linear-gradient(90deg,#0000 0%,#ffffff14 40%,#ffffff14 60%,#0000 100%),#ffffff0a;
  background-size:220% 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v4.1.0 · 2026-09-22 — 인터랙션 시안(클로드 디자인 §35-1 컴포넌트 시트) 공용 부품
   입력 · 칩(라디오) · 시간 슬롯 · 달력 셀 · 카드 hover · 토스트 · 배너 · 빈 상태 · 확인창 · 체크박스
   페이지 CSS(booking.css · live.css · cases.css · home.css)는 이 클래스를 그대로 쓴다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 입력 필드 — 6상태: idle · focus · filled · error · disabled · readonly ── */
.f{ display:flex; flex-direction:column; }
.f__l{ display:block; font-size:13px; font-weight:500; margin-bottom:6px; }
.f__l small{ color:var(--n4); font-weight:400; }
.inp{
  width:100%; min-height:52px; padding:0 14px; border-radius:var(--radius);
  background:#fff; color:var(--ink); border:1px solid var(--n2);
  font-size:16px; line-height:1.5; outline:none;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
textarea.inp{ min-height:0; padding:14px; line-height:1.6; resize:vertical; }
.inp::placeholder{ color:var(--n4); }
.inp:focus{ border:1.5px solid var(--n9); box-shadow:0 0 0 2px var(--n2); padding:0 13.5px; }
textarea.inp:focus{ padding:13.5px; }
.f.is-err .inp{ border:1.5px solid #b82b20; padding:0 13.5px; }
.f.is-err textarea.inp{ padding:13.5px; }
.f.is-err .inp:focus{ box-shadow:0 0 0 2px #f7e6e3; }
.inp:disabled{ background:var(--n1); color:var(--n4); border-color:var(--n1); }
.inp--ro{ background:var(--n0); border-color:transparent; }
.f__tag{ font-family:var(--meta); font-size:10px; font-weight:500; letter-spacing:.08em; padding:4px 6px; border-radius:2px; background:var(--n1); color:var(--n6); }
.f__hint{ margin-top:6px; font-size:12px; line-height:1.6; color:var(--n5); }
.f__err{ display:none; gap:6px; align-items:flex-start; margin-top:6px; font-size:12px; line-height:1.6; color:#b82b20; }
.f__err::before{
  content:"!"; flex:none; width:16px; height:16px; border-radius:50%; background:#b82b20; color:#fff;
  font:700 10px/16px var(--meta); text-align:center; margin-top:1px;
}
.f.is-err .f__err{ display:flex; }
.f.is-err .f__hint{ display:none; }

/* ── 칩(라디오) — 선택 0ms, 아래 라벨·힌트는 교차 페이드 200ms ── */
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  min-height:44px; padding:0 16px; border-radius:var(--radius); border:1px solid var(--n9);
  background:transparent; color:var(--n9); font-size:14px; font-weight:500; line-height:1.5;
  transition:none;
}
.chip.is-on,.chip[aria-checked="true"]{ background:var(--n9); color:var(--n0); }
@media (hover:hover){ .chip:not(.is-on):not([aria-checked="true"]):hover{ border-color:var(--red); color:var(--red); } }
.xfade{ transition:opacity 200ms ease-out; }
.xfade.is-out{ opacity:0; }

/* ── 시간 슬롯 — 토글 · 잠긴 것 35% 무반응 ── */
.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:6px; }
.slotb{
  min-height:44px; border-radius:var(--radius); border:1px solid var(--n9); background:transparent; color:var(--n9);
  font-size:13px; font-weight:500; line-height:1; transition:none;
}
.slotb.is-on{ background:var(--n9); color:var(--n0); }
.slotb.is-off,.slotb:disabled{ opacity:.35; cursor:default; }
.slots__note{ font-size:12px; color:var(--n6); margin-bottom:8px; padding:8px 10px; background:var(--n1); border-radius:var(--radius); }

/* ── 달력 — 셀 6상태: 기본 · 오늘 · 선택 · 일요일/과거 · 마감 · 반마감 ── */
.cal{ background:#fff; border:1px solid var(--n2); border-radius:var(--radius); padding:16px; box-shadow:0 4px 16px #0e11101a; }
.cal__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.cal__head b{ font-family:var(--meta); font-size:14px; font-weight:500; letter-spacing:.02em; }
.cal__nav{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--n2); background:transparent; color:var(--n9);
  font-size:16px; display:inline-flex; align-items:center; justify-content:center; transition:border-color var(--t),opacity var(--t);
}
.cal__nav:hover{ border-color:var(--n9); }
.cal__nav:disabled{ opacity:.3; cursor:default; }
.cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; }
.cal__dow{ font-family:var(--meta); font-size:11px; font-weight:500; color:var(--n4); padding-bottom:6px; }
.cal__dow--sun{ color:#b82b20; }
.cal__day{
  position:relative; height:44px; border-radius:var(--radius); border:1px solid transparent; background:transparent; color:var(--n9);
  font-size:14px; font-weight:400; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  transition:background var(--t),color var(--t);
}
@media (hover:hover){ .cal__day:not(:disabled):not(.is-closed):not(.is-sel):hover{ background:var(--n1); } }
.cal__day.is-today{ border-color:var(--n9); }
.cal__day.is-sel{ background:var(--n9); color:var(--n0); border-color:var(--n9); }
.cal__day.is-off,.cal__day:disabled{ color:var(--n3); cursor:default; }
.cal__day.is-closed{ color:var(--n4); cursor:default; }
.cal__day .cd-m{ font-family:var(--meta); font-size:8px; font-weight:600; letter-spacing:.06em; color:#b82b20; line-height:1; }
.cal__day.is-half::after{
  content:""; position:absolute; right:4px; top:4px; width:7px; height:7px; border-radius:50%;
  background:linear-gradient(90deg,var(--red) 50%,var(--n2) 50%);
}
.cal__toast{
  margin-top:12px; padding:10px 12px; border-radius:var(--radius); background:var(--n9); color:var(--n0);
  font-size:13px; display:flex; gap:8px; align-items:center; animation:kyToastIn 300ms ease-out;
}
.cal__toast::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--red-light); flex:none; }
.cal--pop{ position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20; animation:kyUp 200ms ease-out; }
.cal__grid.is-fwd{ animation:kyFwd 200ms ease-out; }
.cal__grid.is-back{ animation:kyBack 200ms ease-out; }

/* ── 카드 hover 3종 ── 떠오름(정비사례·캠페인) / 사진만(서비스) / 테두리만(부품) ── */
.card-lift{ transition:transform 500ms var(--ease),border-color 500ms,box-shadow 500ms; }
.card-lift .zoom{ transition:transform 500ms var(--ease); }
@media (hover:hover){
  .card-lift:hover{ transform:translateY(-4px); border-color:var(--n4); box-shadow:0 1px 2px #0e11100d,0 4px 16px #0e11101a; }
  .card-lift:hover .zoom{ transform:scale(1.045); }
  .card-photo .zoom{ transition:transform 500ms var(--ease); }
  .card-photo:hover .zoom{ transform:scale(1.035); }
  .card-line{ transition:border-color var(--t); }
  .card-line:hover{ border-color:var(--n9); }
}

/* ── 토스트 — 오른쪽 아래 24px(폰: 아래 가운데, 탭 바 위 12px) · 3초 · 한 번에 하나 ── */
.kytoast{
  position:fixed; right:24px; bottom:24px; z-index:130; max-width:calc(100vw - 48px);
  display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:var(--radius);
  background:var(--n9); color:var(--n0); font-size:14px; line-height:1.5; box-shadow:var(--float-shadow);
  animation:kyToastIn 300ms var(--ease);
}
.kytoast.is-out{ opacity:0; transition:opacity 200ms ease-out; }
.kytoast i{ width:8px; height:8px; border-radius:50%; flex:none; }
.kytoast[data-tone="ok"] i{ background:var(--success); }
.kytoast[data-tone="warn"] i{ background:var(--red-light); }
@media (max-width:719px){
  .kytoast{ right:16px; left:16px; bottom:calc(var(--tabbar) + 12px); justify-content:center; text-align:center; padding:12px 14px; font-size:13px; }
  body.tab-hidden .kytoast{ bottom:calc(16px + env(safe-area-inset-bottom)); }
  .p-booking .kytoast{ bottom:calc(92px + env(safe-area-inset-bottom)); }
}

/* ── 배너 2톤 — 오류(다음 행동 링크 필수) · 안내. 닫기 단추 없음 ── */
.bnr{ padding:14px 16px; border-radius:var(--radius); background:var(--n1); color:var(--n6); font-size:14px; line-height:1.7; }
.bnr--err{ background:#f7e6e3; color:#b82b20; }
.bnr--err a{ color:#b82b20; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.bnr--err a:hover{ color:#8f1f18; }
.bnr b{ font-weight:600; }
.bnr--err.is-shake{ animation:kyShake 300ms ease-out; }

/* ── 빈 상태 — 「없는 것」 ── */
.empty{ padding:28px 20px; border:1px dashed var(--n2); border-radius:var(--radius); text-align:center; }
.empty b{ display:block; font-size:15px; font-weight:600; letter-spacing:-.02em; }
.empty p{ margin-top:6px; font-size:13px; color:var(--n5); line-height:1.7; }
.empty__act{ display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap; }

/* ── 확인창 — 돈이 나가는 행동(조회 재시도)에만. 가운데 200ms · Esc·배경 · 포커스 복귀 ── */
.kydlg{
  position:fixed; inset:0; z-index:140; background:#0e111099; display:flex; align-items:center; justify-content:center;
  padding:24px; animation:kyFade 200ms ease-out;
}
.kydlg.is-out{ opacity:0; transition:opacity 160ms ease-out; }
.kydlg__box{
  background:var(--n0); color:var(--n9); border-radius:var(--radius-lg); padding:28px; max-width:400px; width:100%;
  box-shadow:var(--float-shadow); animation:kyToastIn 200ms ease-out;
}
.kydlg__t{ font-size:18px; font-weight:600; letter-spacing:-.02em; line-height:1.4; }
.kydlg__b{ margin-top:8px; font-size:13px; color:var(--n5); line-height:1.7; }
.kydlg__act{ display:flex; gap:8px; justify-content:flex-end; margin-top:24px; flex-wrap:wrap; }
.kydlg__act .btn{ min-height:48px; padding:0 18px; font-size:14px; gap:10px; justify-content:center; }

/* ── 체크박스(동의) — 22px · 미체크 제출 시 흔들림 300ms ── */
.ckb{ display:flex; align-items:flex-start; gap:10px; }
.ckb.is-shake{ animation:kyShake 300ms ease-out; }
.ckb__box{
  flex:none; width:22px; height:22px; margin-top:1px; border-radius:var(--radius); border:1.5px solid var(--n9);
  background:#fff; color:var(--n0); font-size:13px; display:flex; align-items:center; justify-content:center;
  transition:background 150ms ease-out,border-color 150ms ease-out;
}
.ckb.is-on .ckb__box{ background:var(--n9); }
.ckb.is-err .ckb__box{ border-color:#b82b20; }
.ckb__t{ font-size:14px; line-height:1.6; }
.ckb__t a{ text-decoration:underline; text-underline-offset:3px; }
.ckb__err{ display:none; margin-top:4px; font-size:12px; color:#b82b20; }
.ckb.is-err .ckb__err{ display:block; }

/* ── 사각형 숫자 카운터 자리 · 단계 전환 · 완료 체크 ── */
@keyframes kyToastIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
@keyframes kyFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes kyUp{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none; } }
@keyframes kyFwd{ from{ opacity:0; transform:translateX(24px);} to{ opacity:1; transform:none; } }
@keyframes kyBack{ from{ opacity:0; transform:translateX(-24px);} to{ opacity:1; transform:none; } }
@keyframes kyRowIn{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }
@keyframes kyShake{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-4px);} 75%{ transform:translateX(4px);} }
@keyframes kyPop{ from{ transform:scale(.6); opacity:0;} to{ transform:none; opacity:1; } }
@keyframes kyDraw{ from{ stroke-dashoffset:60; } to{ stroke-dashoffset:0; } }
@keyframes kySheet{ from{ transform:translateY(100%); } to{ transform:none; } }
@keyframes kyBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .sk{ animation:none; }
}