/* =========================================================
   OK리무진 고객 사이트 — 공통 디자인 토큰
   랜딩(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;

  /* 행동 (OK리무진 앰버) */
  --amber:#DE7F28;        /* 밝은 지면 위 면·보더 */
  --amber-ink:#B35F14;    /* 밝은 지면 위 글자·버튼면 — 흰 글씨 대비 4.60:1 */
  --amber-lit:#F2A15A;    /* 어두운 지면 위 글자 */

  /* 선 */
  --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(--amber);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- 알약 버튼 ---------- */
/* §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;
  background:var(--amber-ink);color:#fff;
  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);}
.pill.on-stage{background:var(--surface);color:var(--stage);}
.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:#99500f;}
  .pill.ghost:hover{background:rgba(0,0,0,.04);}
  .pill.on-stage:hover{background:#fff;}
  .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(--amber-ink);}
  .topbar.on-stage .tlink:hover{color:var(--amber-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{
  outline:none;border-color:var(--amber);
  box-shadow:0 0 0 4px rgba(222,127,40,.16);
}
.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;}

@media (prefers-reduced-motion:reduce){
  @keyframes rise{from{opacity:0;}to{opacity:1;}}   /* 이동 없이 페이드만 — 피드백은 남긴다 */
  .rise{animation-duration:.2s;animation-delay:0s!important;}
  *,*::before,*::after{transition-duration:.01ms!important;}
  .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.ghost{box-shadow:inset 0 0 0 2px var(--line);}
}