@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
:root {
  --black:   #010e24;   /* 깊고 푸른 밤 */
  --yellow:  #cc9900;   /* 로고 골드 */
  --yellow-dark: #a67c00;
  --white:   #ffffff;
  --gray1:   #012555;   /* 네이비 메인 */
  --gray2:   #01306a;   /* 네이비 라이트 */
  --gray3:   #024a9e;   /* 네이비 브라이트 */
  --gray4:   #5a83b8;   /* 네이비 페일 */
  --gray5:   #a8c0db;   /* 네이비 연한 */
  --green:   #00c853;
  --red:     #ff3d00;
  --blue:    #4d9fff;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family:'Noto Sans KR',sans-serif; background:var(--black); color:var(--white); min-height:100vh; max-width:480px; margin:0 auto; overflow-x:hidden; }
.screen { display:none; min-height:100vh; flex-direction:column; }
.screen.active { display:flex; }

/* ── LANDING ── */
#landing { flex-direction:column; }

/* 히어로 */
.hero {
  background: var(--black);
  padding: 52px 28px 0;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content:'';
  position:absolute;
  top:-80px; right:-80px;
  width:320px; height:320px;
  background:radial-gradient(circle, rgba(255,214,0,.1) 0%, transparent 70%);
  pointer-events:none;
}
.hero-badge {
  display:inline-block;
  background:rgba(26,110,181,.15);
  border:1px solid rgba(26,110,181,.4);
  border-radius:20px;
  padding:5px 14px;
  font-size:11px;
  font-weight:700;
  color:#4d9fff;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:20px;
  animation: fadeUp .4s .1s both;
}
.hero-title {
  font-size:32px;
  font-weight:900;
  line-height:1.25;
  margin-bottom:32px;
  animation: fadeUp .4s .2s both;
}
.hero-title .y { color:#4d9fff; }

/* 수익 배분 바 */
.dist-box { background:var(--gray1); border-radius:18px; padding:24px 20px; margin-bottom:24px; animation:fadeUp .4s .3s both; }
.dist-title { font-size:11px; color:var(--gray4); letter-spacing:1px; text-transform:uppercase; margin-bottom:20px; }

/* 화살표 */
.dist-arrow-row {
  display:flex;
  align-items:center;
  margin-bottom:8px;
}
.dist-arrow-line {
  flex:1;
  height:1px;
  background:var(--gray3);
  position:relative;
  margin-right:10%;  /* 오른쪽 10% 여백 */
}
.dist-arrow-line::before { content:'◀'; position:absolute; left:-8px; top:-8px; font-size:10px; color:var(--gray4); }
.dist-arrow-line::after  { content:'▶'; position:absolute; right:-8px; top:-8px; font-size:10px; color:var(--gray4); }
.dist-arrow-label {
  font-size:12px;
  font-weight:700;
  color:var(--white);
  white-space:nowrap;
  margin-left:8px;
}

/* 바 */
.dist-bar {
  display:flex;
  height:22px;
  border-radius:6px;
  overflow:hidden;
  width:100%;
}
.dist-seg-driver    { background:#1a6eb5; width:90%; }
.dist-seg-platform  { 
  width:5%;
  background: repeating-linear-gradient(
    45deg,
    #555,
    #555 1px,
    #3a3a3a 1px,
    #3a3a3a 4px
  );
}
.dist-seg-insurance { background:#000; width:5%; }

/* 라벨 */
.dist-labels {
  display:flex;
  margin-top:10px;
  font-size:11px;
  font-weight:700;
  justify-content:flex-end;
  gap:12px;
}
.dist-label-platform  { color:#cc9900; }
.dist-label-insurance { color:#1a6eb5; }

/* CTA 버튼 */
.cta-wrap {
  padding:0 28px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  animation: fadeUp .4s .4s both;
}
/* 노란색 — 손님 메인 CTA */
.btn-yellow { background:var(--yellow); color:#010e24; border:none; border-radius:0; padding:18px; font-size:17px; font-weight:900; cursor:pointer; font-family:inherit; transition:transform .1s,background .1s; width:100%; box-shadow:0 6px 0 #a67c00, 0 8px 12px rgba(0,0,0,.4); }
.btn-yellow:active { transform:translateY(4px); box-shadow:0 2px 0 #a67c00, 0 3px 6px rgba(0,0,0,.3); background:var(--yellow-dark); }

/* 곤색 — 기사 CTA */
.btn-navy { background:#012555; color:var(--white); border:2px solid #024a9e; border-radius:0; padding:16px; font-size:17px; font-weight:700; cursor:pointer; font-family:inherit; width:100%; transition:transform .2s,box-shadow .2s; box-shadow:0 6px 0 #001533, 0 8px 12px rgba(0,0,0,.4); }
.btn-navy:active { transform:translateY(4px); box-shadow:0 2px 0 #001533, 0 3px 6px rgba(0,0,0,.3); }

/* 하늘색 — 기사등록/서브 CTA */
.btn-sky { background:#1a6eb5; color:var(--white); border:none; border-radius:14px; padding:16px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; width:100%; transition:background .2s; }
.btn-sky:active { background:#155a94; }

/* 아웃라인 — 로그아웃 등 */
.btn-outline { background:transparent; color:var(--gray4); border:1px solid var(--gray3); border-radius:14px; padding:14px; font-size:14px; font-weight:500; cursor:pointer; font-family:inherit; width:100%; }
.btn-gray { background:var(--gray2); color:var(--gray4); border:none; border-radius:14px; padding:14px; font-size:14px; font-weight:500; cursor:pointer; font-family:inherit; width:100%; }

/* 기사등록 섹션 */
.driver-reg {
  margin:0 16px 24px;
  background:var(--gray1);
  border:2px dashed var(--gray3);
  border-radius:18px;
  padding:24px;
  text-align:center;
  animation: fadeUp .4s .5s both;
}
.driver-reg-icon { font-size:36px; margin-bottom:12px; }
.driver-reg-title { font-size:18px; font-weight:900; margin-bottom:6px; }
.driver-reg-sub { font-size:13px; color:var(--gray4); margin-bottom:16px; line-height:1.6; }
.driver-reg-hint {
  background:rgba(255,214,0,.08);
  border:1px solid rgba(255,214,0,.15);
  border-radius:10px;
  padding:10px 14px;
  font-size:12px;
  color:var(--gray4);
  margin-bottom:16px;
}
.driver-reg-hint strong { color:var(--yellow); }

/* 철학 섹션 */
.manifesto {
  padding:32px 28px;
  animation: fadeUp .4s .6s both;
}
.manifesto-quote {
  font-size:22px;
  font-weight:900;
  line-height:1.4;
  margin-bottom:24px;
  padding-left:16px;
  border-left:4px solid #1a6eb5;
}
.manifesto-quote .y { color:#4d9fff; }
.manifesto-items { display:flex; flex-direction:column; gap:16px; }
.manifesto-item {
  background:var(--gray1);
  border-radius:14px;
  padding:18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.manifesto-icon { font-size:24px; flex-shrink:0; margin-top:2px; }
.manifesto-item-title { font-size:15px; font-weight:700; margin-bottom:4px; }
.manifesto-item-desc { font-size:13px; color:var(--gray4); line-height:1.6; }

/* 수수료 구조 */
.structure {
  margin:0 16px 32px;
  background:var(--gray1);
  border-radius:18px;
  padding:20px;
  animation: fadeUp .4s .7s both;
}
.structure-title { font-size:13px; color:var(--gray4); margin-bottom:14px; letter-spacing:1px; text-transform:uppercase; }
.structure-row { display:flex; align-items:center; padding:10px 0; border-bottom:1px solid var(--gray3); }
.structure-row:last-child { border-bottom:none; }
.structure-who { font-size:13px; color:var(--gray4); width:80px; flex-shrink:0; }
.structure-bar { flex:1; height:8px; border-radius:4px; margin:0 12px; }
.structure-pct { font-size:16px; font-weight:900; width:36px; text-align:right; }

/* 하단 태그라인 */
.tagline {
  background:#012555;
  padding:16px 28px;
  text-align:center;
  font-size:13px;
  font-weight:900;
  color:var(--yellow);
  letter-spacing:1px;
  line-height:1.6;
  border-top:1px solid #024a9e;
}

@keyframes fadeUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ── LOGIN ── */
.login-header { background:var(--gray1); padding:56px 28px 32px; }
.back-btn { background:none; border:none; color:var(--white); font-size:22px; cursor:pointer; padding:0; margin-bottom:24px; display:block; }
.login-title { font-size:26px; font-weight:900; line-height:1.3; }
.login-title span { color:var(--yellow); }
.login-body { padding:32px 28px; flex:1; }
.role-tabs { display:flex; gap:8px; margin-bottom:28px; }
.role-tab { flex:1; padding:12px; border-radius:10px; border:2px solid var(--gray3); background:transparent; color:var(--gray4); font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .2s; }
.role-tab.active { border-color:var(--yellow); color:var(--yellow); background:rgba(255,214,0,.08); }
.input-group { margin-bottom:16px; }
.input-label { font-size:13px; color:var(--gray4); margin-bottom:8px; display:block; }
.input-field { width:100%; background:var(--gray2); border:2px solid var(--gray3); border-radius:12px; padding:16px 18px; color:var(--white); font-size:18px; font-family:inherit; outline:none; transition:border-color .2s; letter-spacing:2px; }
.input-field:focus { border-color:var(--yellow); }
.input-field::placeholder { color:var(--gray4); letter-spacing:0; }
.sms-row { display:flex; gap:8px; }
.sms-row .input-field { flex:1; }
.btn-sms { background:var(--gray2); border:2px solid var(--yellow); color:var(--yellow); border-radius:12px; padding:0 16px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; }
.btn-sms:disabled { opacity:.4; cursor:not-allowed; }
.msg-box { font-size:26px; padding:20px 28px; border-radius:10px; margin-top:10px; display:none; font-weight:700; }
.msg-box.err { background:rgba(255,61,0,.15); color:#ff6d47; display:block; }
.msg-box.ok  { background:rgba(0,200,83,.15); color:#00e676; display:block; }

/* ── 면허증 업로드 ── */
#license-upload { background:var(--black); }
.license-header { background:var(--gray1); padding:56px 28px 32px; }
.license-title { font-size:24px; font-weight:900; line-height:1.3; }
.license-title span { color:var(--yellow); }
.license-body { padding:28px; flex:1; display:flex; flex-direction:column; gap:16px; }
.license-notice { background:rgba(255,214,0,.08); border:1px solid rgba(255,214,0,.2); border-radius:14px; padding:16px; font-size:13px; line-height:1.7; color:var(--gray5); }
.license-notice strong { color:var(--yellow); }
.upload-box { background:var(--gray2); border:2px dashed var(--gray3); border-radius:14px; padding:32px; text-align:center; cursor:pointer; transition:border-color .2s; position:relative; }
.upload-box:hover { border-color:var(--yellow); }
.upload-box input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.upload-icon { font-size:36px; margin-bottom:8px; }
.upload-label { font-size:14px; color:var(--gray4); }
.upload-label span { color:var(--yellow); font-weight:700; }
.upload-preview { width:100%; border-radius:12px; margin-top:12px; display:none; max-height:200px; object-fit:cover; }
.car-input { width:100%; background:var(--gray2); border:2px solid var(--gray3); border-radius:12px; padding:16px 18px; color:var(--white); font-size:18px; font-family:inherit; outline:none; transition:border-color .2s; text-align:center; letter-spacing:4px; }
.car-input:focus { border-color:var(--yellow); }
.car-input::placeholder { color:var(--gray4); letter-spacing:0; font-size:14px; }

/* ── 승인 대기 ── */
#pending { align-items:center; justify-content:center; flex-direction:column; gap:20px; padding:32px; text-align:center; }
.pending-icon { font-size:64px; animation:bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.pending-title { font-size:22px; font-weight:900; }
.pending-sub { font-size:14px; color:var(--gray4); line-height:1.7; }
.pending-card { background:var(--gray1); border-radius:18px; padding:20px; width:100%; }
.pending-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--gray3); font-size:14px; }
.pending-row:last-child { border-bottom:none; }
.pending-row .label { color:var(--gray4); }
.status-badge { display:inline-block; background:rgba(255,214,0,.15); color:var(--yellow); border:1px solid rgba(255,214,0,.3); border-radius:20px; padding:4px 12px; font-size:12px; font-weight:700; }

/* ── CUSTOMER HOME ── */
.top-bar { display:flex; align-items:center; justify-content:space-between; padding:20px 20px 12px; }
.top-logo { font-size:22px; font-weight:900; color:var(--yellow); }
.top-badge { background:var(--gray2); border-radius:20px; padding:6px 14px; font-size:13px; color:var(--gray5); cursor:pointer; }
.map-placeholder { background:var(--gray1); margin:0 16px; border-radius:18px; height:200px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--gray4); font-size:13px; position:relative; overflow:hidden; }
.map-placeholder::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(255,255,255,.02) 20px,rgba(255,255,255,.02) 40px); }
.map-icon { font-size:36px; }
.route-card { background:var(--gray1); margin:12px 16px; border-radius:18px; padding:20px; }
.route-input-wrap { position:relative; }
.route-input { width:100%; background:var(--gray2); border:none; border-radius:12px; padding:14px 16px 14px 44px; color:var(--white); font-size:15px; font-family:inherit; outline:none; margin-bottom:8px; }
.route-input::placeholder { color:var(--gray4); }
.ac-list{position:absolute;top:100%;left:0;right:0;background:var(--gray2);border-radius:0 0 12px 12px;z-index:50;max-height:220px;overflow-y:auto;display:none;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.ac-item{padding:12px 16px;border-bottom:1px solid var(--gray3);cursor:pointer}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item:active{background:var(--gray3)}
.ac-name{font-size:14px;font-weight:700;color:var(--white)}
.ac-addr{font-size:11px;color:var(--gray4);margin-top:2px}
.route-dot { position:absolute; left:16px; width:10px; height:10px; border-radius:50%; }
.dot-start { background:var(--green); top:22px; }
.dot-end   { background:var(--red);   top:60px; }
.route-line { position:absolute; left:20px; top:36px; width:3px; height:36px; background:linear-gradient(var(--green),var(--red)); z-index:2; border-radius:2px; }
.fare-row { display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:16px; border-top:1px solid var(--gray3); }
.fare-label { font-size:13px; color:var(--gray4); }
.fare-amount { font-size:22px; font-weight:900; color:var(--yellow); }
.fare-note { font-size:11px; color:var(--gray4); }
.call-btn { background:var(--yellow); color:var(--black); border:none; border-radius:14px; padding:18px; font-size:18px; font-weight:900; cursor:pointer; font-family:inherit; width:calc(100% - 32px); margin:0 16px 16px; transition:transform .1s; }
.call-btn:active { transform:scale(.97); }

/* ── CALLING ── */
#calling { align-items:center; justify-content:center; flex-direction:column; gap:20px; }
.pulse-ring { width:120px; height:120px; border-radius:50%; background:rgba(255,214,0,.15); display:flex; align-items:center; justify-content:center; animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,214,0,.3)} 50%{transform:scale(1.05);box-shadow:0 0 0 30px rgba(255,214,0,0)} }
.pulse-icon { font-size:48px; }
.calling-title { font-size:22px; font-weight:900; }
.calling-sub { font-size:14px; color:var(--gray4); }
.calling-info { background:var(--gray1); border-radius:18px; padding:20px; width:calc(100% - 32px); }
.calling-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--gray3); font-size:14px; }
.calling-row:last-child { border-bottom:none; }
.calling-row-label { color:var(--gray4); }
.calling-row-val { font-weight:700; }
.btn-cancel-call { background:transparent; border:2px solid var(--gray3); color:var(--gray4); border-radius:14px; padding:16px 40px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; }

/* ── MATCHED ── */
#matched { flex-direction:column; }
.matched-header { background:var(--green); padding:24px 20px; text-align:center; }
.matched-header h2 { font-size:20px; font-weight:900; color:var(--black); }
.matched-header p  { font-size:13px; color:rgba(0,0,0,.6); margin-top:4px; }
.driver-card { background:var(--gray1); margin:16px; border-radius:18px; padding:20px; display:flex; align-items:center; gap:16px; }
.driver-avatar { width:56px; height:56px; border-radius:50%; background:var(--yellow); display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--black); font-weight:900; flex-shrink:0; }
.driver-info-name { font-size:18px; font-weight:900; }
.driver-info-plate { font-size:13px; color:var(--gray4); margin-top:2px; }
.driver-info-eta { margin-left:auto; text-align:center; }
.eta-num { font-size:28px; font-weight:900; color:var(--yellow); }
.eta-label { font-size:11px; color:var(--gray4); }
.fare-summary { background:var(--gray1); margin:0 16px; border-radius:18px; padding:20px; }
.fare-summary-title { font-size:13px; color:var(--gray4); margin-bottom:12px; }
.fare-summary-row { display:flex; justify-content:space-between; font-size:14px; padding:6px 0; }
.fare-summary-row.total { border-top:1px solid var(--gray3); margin-top:8px; padding-top:14px; font-size:18px; font-weight:900; }
.fare-summary-row.total .val { color:var(--yellow); }
.fare-summary-row .label { color:var(--gray4); }

/* ── DRIVER HOME ── */
.driver-header { background:var(--gray1); padding:20px 20px 24px; }
.driver-greeting { font-size:14px; color:var(--gray4); margin-bottom:4px; }
.driver-name { font-size:22px; font-weight:900; }
.driver-name span { color:var(--yellow); }
.status-toggle { display:flex; align-items:center; gap:12px; margin-top:16px; background:var(--gray2); border-radius:12px; padding:14px 16px; cursor:pointer; }
.toggle-track { width:52px; height:28px; border-radius:14px; background:var(--gray3); position:relative; transition:background .3s; flex-shrink:0; }
.toggle-track.on { background:var(--green); }
.toggle-thumb { width:22px; height:22px; border-radius:50%; background:var(--white); position:absolute; top:3px; left:3px; transition:left .3s; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.toggle-track.on .toggle-thumb { left:27px; }
.toggle-text { font-size:15px; font-weight:700; }
.toggle-text.on { color:var(--green); }
.toggle-text.off { color:var(--gray4); }
.stats-row { display:flex; gap:10px; padding:16px; }
.stat-card { flex:1; background:var(--gray1); border-radius:14px; padding:16px; text-align:center; }
.stat-val { font-size:22px; font-weight:900; color:var(--yellow); }
.stat-label { font-size:11px; color:var(--gray4); margin-top:4px; }
.section-title { font-size:13px; font-weight:700; color:var(--gray4); padding:0 16px; margin-bottom:10px; letter-spacing:1px; text-transform:uppercase; }
.history-list { padding:0 16px 50px; display:flex; flex-direction:column; gap:10px; }
.history-item { background:var(--gray1); border-radius:14px; padding:16px; display:flex; align-items:center; gap:14px; }
.history-icon { width:40px; height:40px; border-radius:10px; background:var(--gray2); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.history-info { flex:1; }
.history-route { font-size:14px; font-weight:700; }
.history-time { font-size:12px; color:var(--gray4); margin-top:2px; }
.history-earn { font-size:16px; font-weight:900; color:var(--green); }

/* ── MODAL ── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:100; align-items:flex-end; max-width:480px; margin:0 auto; }
.modal-overlay.active { display:flex; }
.modal-sheet { background:var(--gray1); border-radius:24px 24px 0 0; padding:24px; width:100%; animation:slideUp .3s cubic-bezier(.175,.885,.32,1.275) both; }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal-handle { width:40px; height:4px; background:var(--gray3); border-radius:2px; margin:0 auto 20px; }
.modal-title { font-size:20px; font-weight:900; margin-bottom:4px; }
.modal-sub { font-size:13px; color:var(--gray4); margin-bottom:20px; }
.modal-route { background:var(--gray2); border-radius:14px; padding:16px; margin-bottom:16px; }
.modal-route-row { display:flex; align-items:center; gap:10px; padding:6px 0; }
.modal-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.modal-route-text { font-size:14px; }
.modal-divider { border:none; border-top:1px solid var(--gray3); margin:4px 0; }
.modal-fare-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.modal-fare-label { font-size:14px; color:var(--gray4); }
.modal-fare-val { font-size:28px; font-weight:900; color:var(--yellow); }
.modal-fare-earn { font-size:13px; color:var(--green); font-weight:700; }
.modal-btns { display:flex; gap:10px; }
.btn-accept { flex:2; background:var(--yellow); color:var(--black); border:none; border-radius:14px; padding:18px; font-size:17px; font-weight:900; cursor:pointer; font-family:inherit; }
.btn-reject { flex:1; background:var(--gray2); color:var(--gray4); border:none; border-radius:14px; padding:18px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; }

/* BOTTOM NAV */
.bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; background:linear-gradient(180deg,#021e4a 0%,#010f2e 100%); border-top:2px solid #1a5ccc; display:flex; flex-wrap:wrap; padding:2px 0; }
.nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px; cursor:pointer; opacity:.75; transition:opacity .2s; }
.nav-item.active { opacity:1; }
.nav-item.active .nav-label { color:var(--yellow); }
.nav-item.active .nav-label { color:var(--yellow); }
.nav-icon { font-size:22px; }
.nav-label { font-size:12px; font-weight:400; color:#f4f8ff; }
@keyframes startBlink{0%,100%{background:#ffc300}50%{background:#ff5500;color:#fff}}