/* =========================================================
   스마일키즈버스 고객 사이트 — 공통 디자인 토큰
   랜딩(index.html) · 견적기(estimate.html) · A/S(as.html)가 함께 쓴다.
   외부 리소스 0 (CDN 폰트·아이콘 없음) — 기존 원칙 유지.

   규칙 출처: apple-design 스킬
     §1  피드백은 누르는 순간(:active), 100ms
     §12 크롬은 반투명 재질 + 콘텐츠가 그 밑으로 흐른다. 1px 구분선 대신 스크롤 엣지 페이드
     §14 reduced-motion / reduced-transparency / contrast 셋 다 대응
     §15 트래킹은 크기별로 — 큰 글자는 조이고(-0.03em) 본문은 0 근처

   지면은 둘 다 밝다. 나뉘는 건 명도가 아니라 빛의 온도다.
     warm(따뜻한 백색) = 조명 켜진 쇼룸 — 아직 만들지 않은 차, 견적
     cool(서늘한 백색) = 정비 베이     — 이미 있는 차, A/S
   색은 지면이 아니라 '행동'에만 쓴다(스쿨버스 옐로).
   ========================================================= */
:root{
  /* 지면 */
  --warm:#FFFAF4;
  --cool:#F0F2F5;
  --paper:#F5F5F7;
  --surface:#FFFFFF;
  --stage:#0A0A0B;    /* 암전은 이제 지면이 아니라 차량 그림자·대비용으로만 */
  --stage-2:#161618;

  /* 글자 */
  --text:#1D1D1F;
  --text-on-stage:#F5F5F7;
  --muted:#86868B;
  --muted-on-stage:#9A9AA0;

  /* 행동 (스마일키즈버스 옐로)
     --amber* 에서 리네임했다. 이름에 색을 가두면 다음 사람이 반드시 헷갈린다.
     값은 실측 대비로 정해진 것이니 바꾸지 말 것. */
  --bus:#EAE012;          /* 면 전용 — CTA 버튼면. 위에 올리는 글자는 항상 --text (12.16:1) */
  --bus-ink:#7A7100;      /* 밝은 지면 위 글자·아이콘·eyebrow — 흰 5.01 / paper 4.60 (AA) */
  --bus-lit:#F2E840;      /* 암전 지면(--stage) 위 글자 (15.45:1) */
  --bus-press:#D9CF00;    /* 노란 면의 hover/active */

  /* 선 */
  --line:#D2D2D7;
  --line-on-stage:rgba(255,255,255,.14);

  /* 형태 */
  --r-card:22px;
  --r-pill:980px;
  --r-field:12px;

  /* 타입 — §15. rem 기준이라 사용자 글자 크기 설정을 따라 레이아웃도 같이 커진다 */
  --t-display:clamp(2.4rem, 7vw, 4.75rem);
  --t-title:clamp(1.6rem, 3.4vw, 2.5rem);
  --t-lead:clamp(1rem, 1.5vw, 1.3rem);
  --t-cap:0.8125rem;

  /* 리듬 */
  --pad-page:clamp(1.25rem, 5vw, 4rem);

  /* 모션 — §4. 임계감쇠 스프링(damping 1.0, response ~0.4)의 CSS 근사.
     오버슈트 없음이 기본이고, 되돌아가는 경로는 --ease-in으로 거울을 맞춘다(§7). */
  --ease-spring:cubic-bezier(.32,.72,0,1);
  --ease-in:cubic-bezier(1,0,.68,.28);
  --dur:.4s;
}

*{box-sizing:border-box;}
[hidden]{display:none!important;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',
              'Pretendard','Apple SD Gothic Neo','Noto Sans KR',
              system-ui,'Malgun Gothic',sans-serif;
  font-size:1rem;
  line-height:1.5;
  letter-spacing:0;              /* §15 : 본문은 0 근처 */
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;}
.num{font-variant-numeric:tabular-nums;}

/* §15 : 크기가 커질수록 조이고 행간은 좁힌다 */
.display{
  font-size:var(--t-display);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-0.032em;
}
.title{
  font-size:var(--t-title);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-0.024em;
}
.lead{
  font-size:var(--t-lead);
  line-height:1.5;
  letter-spacing:-0.01em;
  color:var(--muted);
}
.cap{
  font-size:var(--t-cap);
  font-weight:600;
  line-height:1.4;
  letter-spacing:0.02em;         /* §15 : 작은 글자는 살짝 벌린다 */
  text-transform:none;
}

/* 키보드 사용자에게만 보이는 포커스 링.
   링을 노랑으로 두면 노란 버튼 위에서 그대로 사라진다 — 어느 면에서도 서는 검정으로 고정한다. */
:focus-visible{
  outline:2px solid var(--text);
  outline-offset:3px;
  border-radius:6px;
}
/* 암전 지면에서는 검정 링이 사라지므로 같은 두께로 밝은 쪽만 뒤집는다 */
.on-stage :focus-visible{outline-color:var(--text-on-stage);}

/* ---------- 알약 버튼 ---------- */
/* §1 : 피드백은 누르는 순간. transform·opacity만 건드려 합성만으로 끝낸다(§11) */
.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.6rem;border:0;border-radius:var(--r-pill);
  font-size:.9375rem;font-weight:600;letter-spacing:-0.01em;
  /* 실제 스쿨버스와 같은 관계 — 노란 면 위에 검정 글자(12.16:1) */
  background:var(--bus);color:var(--text);
  /* 흰 지면 위 노란 면은 경계 대비가 1.38이라 형태가 뭉개진다. 얇은 안쪽 선이 윤곽을 대신 세운다 */
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
  transition:transform .1s ease-out, background .18s var(--ease-spring);
}
.pill:active{transform:scale(.97);}
.pill[disabled]{opacity:.45;cursor:default;transform:none;}
.pill.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--line);}
/* 암전 지면에서는 노란 면이 저 혼자 15.9:1로 서므로 윤곽선을 걷는다.
   주행동은 어느 지면에서나 노랑이다 — 같아 보이는 것은 같게 동작한다. */
.pill.on-stage{background:var(--bus);color:var(--text);box-shadow:none;}
.pill.on-stage.ghost{background:transparent;color:var(--text-on-stage);box-shadow:inset 0 0 0 1px var(--line-on-stage);}

/* 화살표는 '어디로 가는지'를 말하는 신호 — §8, 결과 방향을 미리 가리킨다 */
.chev{width:1.05em;height:1.05em;flex:none;transition:transform .18s var(--ease-spring);}

/* 호버는 진짜 포인터가 있을 때만 건다.
   터치에서는 탭이 hover로 잡혀 손을 떼도 눌러붙은 채로 남는다 — 이 사이트는 모바일이 주 사용처다. */
@media (hover:hover) and (pointer:fine){
  .pill:hover{background:var(--bus-press);}
  .pill.ghost:hover{background:rgba(0,0,0,.04);}
  .pill.on-stage:hover{background:var(--bus-press);}
  .pill.on-stage.ghost:hover{background:rgba(255,255,255,.08);}
  .pill:hover .chev,a:hover>.chev{transform:translateX(3px);}
}

/* ---------- 상단 크롬 : 반투명 재질 (§12) ---------- */
/* 콘텐츠는 이 밑으로 흐른다. 1px 구분선을 긋지 않고, 겹치는 자리만 페이드로 끊는다. */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1rem;
  height:3.25rem;padding:0 var(--pad-page);
  background:rgba(245,245,247,.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);   /* 빛을 받는 위쪽 모서리 */
  -webkit-mask-image:linear-gradient(#000 78%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(#000 78%,rgba(0,0,0,0) 100%);
}
.topbar.on-stage{
  background:rgba(10,10,11,.6);
  color:var(--text-on-stage);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.topbar .brand{font-size:.9375rem;font-weight:700;letter-spacing:-0.02em;}
.topbar .spacer{margin-left:auto;}
.topbar .tlink{
  font-size:.8125rem;font-weight:500;color:var(--muted);
  transition:color .18s var(--ease-spring);
}
.topbar.on-stage .tlink{color:var(--muted-on-stage);}
@media (hover:hover) and (pointer:fine){
  .topbar .tlink:hover{color:var(--bus-ink);}
  .topbar.on-stage .tlink:hover{color:var(--bus-lit);}
}

/* ---------- 입력 ---------- */
.field{margin-top:1.15rem;}
.field>label{display:block;font-size:.8125rem;font-weight:600;color:var(--muted);margin-bottom:.4rem;}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem .9rem;
  border:1px solid var(--line);border-radius:var(--r-field);
  background:var(--surface);color:var(--text);
  font:inherit;letter-spacing:0;
  transition:border-color .18s var(--ease-spring), box-shadow .18s var(--ease-spring);
}
.field input:focus,.field select:focus,.field textarea:focus{
  /* 노란 테두리는 흰 입력칸에서 안 보인다 — 같은 색 계열의 잉크 쪽으로 내린다.
     바깥 링은 색을 빼고 중립으로 둔다. 올리브빛 후광을 두르면 초점 표시가 아니라
     그냥 얼룩처럼 보인다(색은 행동에만 쓴다는 base 규칙과도 어긋난다). */
  outline:none;border-color:var(--bus-ink);
  box-shadow:0 0 0 3px rgba(29,29,31,.10);
}
.field textarea{resize:vertical;min-height:8rem;}
.field .hint{margin-top:.4rem;font-size:.75rem;color:var(--muted);}

/* 로고·사이트 푸터는 site-foot.css에 따로 있다 — 견적기(자체 토큰을 쓰는 화면)도
   base.css 없이 그 파일 하나만 불러 쓸 수 있어야 하기 때문. */

/* ---------- 등장 (§14 : reduced-motion이면 크로스페이드로 대체) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(1.1rem);}to{opacity:1;transform:none;}}
.rise{animation:rise .62s var(--ease-spring) both;}
.d1{animation-delay:.05s;} .d2{animation-delay:.13s;} .d3{animation-delay:.22s;} .d4{animation-delay:.32s;}

/* html:not(.force-motion) 은 검토용 우회다 — 오너가 ?motion=on 으로 열 때만 이 블록이 비켜선다.
   실제 방문자에게는 그 클래스가 없으므로 접근성 규칙(모션 끄기 존중)은 그대로 지켜진다.
   @keyframes 는 선택자로 가둘 수 없어 그대로 둔다(히어로 등장만 페이드로 남는다). */
@media (prefers-reduced-motion:reduce){
  @keyframes rise{from{opacity:0;}to{opacity:1;}}   /* 이동 없이 페이드만 — 피드백은 남긴다 */
  html:not(.force-motion) .rise{animation-duration:.2s;animation-delay:0s!important;}
  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after{transition-duration:.01ms!important;}
  html:not(.force-motion) .pill:active{transform:none;}
}
@media (prefers-reduced-transparency:reduce){
  .topbar{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
          -webkit-mask-image:none;mask-image:none;border-bottom:1px solid var(--line);}
  .topbar.on-stage{background:var(--stage);border-bottom-color:var(--line-on-stage);}
}
@media (prefers-contrast:more){
  :root{--muted:#4B4B50;--muted-on-stage:#D6D6DA;--line:#8E8E93;--line-on-stage:rgba(255,255,255,.45);}
  .topbar{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
          -webkit-mask-image:none;mask-image:none;border-bottom:1px solid var(--line);}
  .topbar.on-stage{background:var(--stage);}
  .pill{box-shadow:inset 0 0 0 2px var(--text);}
  .pill.ghost{box-shadow:inset 0 0 0 2px var(--line);}
}