/* ═══════════════════════════════════════════════
   CARO MOBILITY — style.css v5
   Font: Pretendard (body) + Oswald (brand)
   Design: Clean modern silver / dark accent
   Android PWA 최적화 적용
═══════════════════════════════════════════════ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root{
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  --silver-base:#eff1f4;--silver-light:#f7f9fb;--silver-dark:#b0b6bd;
  --accent:#18191c;--accent-2:#2c3037;--accent-hov:#3a414b;
  --text-1:#18191c;--text-2:#5a6470;--text-m:#8b929d;
  --border:rgba(134,146,162,.22);--border-l:rgba(206,214,224,.55);
  --glass:rgba(255,255,255,.72);--glass2:rgba(255,255,255,.86);
  --success:#2c7a52;--error:#b0413f;
  --font:'Pretendard',sans-serif;
  --font-brand:'Oswald',sans-serif;
  --r:16px;--r2:20px;
  --p1-card:#ffffff;--p1-soft:#f2f3f5;--p1-slate:#5a6470;
  --p1-accent:#67707c;--p1-accent-d:#57616d;
  --p1-line:#e8eaee;--p1-line2:#d5dae1;
  --p1-shadow:0 2px 10px -4px rgba(40,48,58,.12);
  --p1-g-active:linear-gradient(135deg,#b4bcc7 0%,#9fa8b4 50%,#8d97a3 100%);
  --p1-g-event:linear-gradient(135deg,#d2d8e0 0%,#c1c9d3 50%,#b0b9c4 100%);

  /* 안드로이드 상태바 높이 대응 */
  --android-status-bar: env(safe-area-inset-top, 24px);
}

*,*::before,*::after{
  box-sizing:border-box;margin:0;padding:0;
  -webkit-tap-highlight-color:transparent;
  /* 안드로이드 텍스트 선택 방지 (앱처럼) */
  -webkit-user-select:none;
  user-select:none;
}
/* 입력 필드만 선택 허용 */
input,textarea{
  -webkit-user-select:text;
  user-select:text;
}

html,body{
  width:100%;height:100%;overflow:hidden;
  /* 안드로이드 풀스크린 */
  overscroll-behavior:none;
  -webkit-overscroll-behavior:none;
}
body{
  font-family:var(--font);font-size:15px;
  background:var(--silver-base);color:var(--text-1);
  -webkit-font-smoothing:antialiased;
  /* 안드로이드 폰트 렌더링 */
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  /* 안드로이드 가상 키보드 대응 */
  resize:none;
}

button,input,select,textarea{
  -webkit-appearance:none;
  appearance:none;
  font-family:var(--font);
  /* 안드로이드 기본 아웃라인 제거 */
  outline:none;
}
/* 포커스 시 아웃라인 제거 */
button:focus,input:focus,textarea:focus,select:focus{outline:none;}

/* 안드로이드 number input 스핀 버튼 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}

/* 스크롤 성능 최적화 */
.modal-box,.photo-modal-box,.extend-sheet,.home-menu-panel{will-change:transform;}

/* 버튼 터치 영역 확보 (안드로이드 최소 44px) */
.main-btn,.submit-btn,.back-bottom-btn{min-height:44px;}
button{touch-action:manipulation;}

/* 터치 피드백 — !important 없이 명시도(specificity)로만 처리 */
.main-btn:active{transform:translateY(1px);opacity:.88;}
.submit-btn:active{transform:translateY(1px);opacity:.9;}
.hg-big:active,.hg-small:active{opacity:.88;transform:scale(.98);}
.car-item:active{opacity:.88;transform:scale(.98);}
/* 일반 버튼 기본 피드백 */
button:active{opacity:.82;}

/* iOS standalone — safe area */
.ios-standalone .home-ctrl-switch{
  bottom:calc(14px + var(--sab));
}

/* 안드로이드 standalone — 상단 safe-area 대응 */
.android-standalone .splash-center{
  padding-top:calc(20px + var(--android-status-bar));
}
.android-standalone .main-brand-wrap{
  padding-top:calc(20px + var(--android-status-bar));
}
.android-standalone .home-header{
  padding-top:calc(20px + var(--android-status-bar));
}
.android-standalone .ev-header,
.android-standalone .page-header{
  padding-top:calc(64px + var(--android-status-bar));
}
.android-standalone .res-header{
  padding-top:calc(64px + var(--android-status-bar));
}
.android-standalone .myres-title-row{
  padding-top:calc(50px + var(--android-status-bar));
}
.android-standalone .find-title-bar{
  padding-top:calc(24px + var(--android-status-bar));
}
.android-standalone .signup-title-bar{
  padding-top:calc(70px + var(--android-status-bar));
}
/* 로그인: safe-area 여백만 추가 — min-height centering 유지 */
.android-standalone .login-center{
  padding-top:calc(60px + var(--android-status-bar));
}

/* ── 메탈 배경 ── */
.metal-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  /* 홈(카로 대기화면)과 동일한 평평한 실버 배경으로 통일 — 위/아래 색 차이 제거 */
  background:var(--silver-base);
}

/* ── 화면 공통 ── */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;opacity:0;pointer-events:none;transform:translateY(14px);transition:opacity .38s ease,transform .38s ease;z-index:1;will-change:opacity,transform;}
.screen.active{opacity:1;pointer-events:all;transform:translateY(0)}
.screen.exit{opacity:0;transform:translateY(-10px);pointer-events:none}
/* 개발자 화면 — 메탈 배경 완전 덮기 */
#dev-screen{background:#080c10;}
/* 아이디/비밀번호 찾기 — 내용이 짧으므로 수직 중앙 정렬 */
#find-screen{justify-content:center;}
/* 예약 완료 — 수직 중앙 정렬 + 인라인 margin-top 무력화 */
#done-screen{justify-content:center;}
#done-screen .done-outer{margin-top:0 !important;}
/* 블랙라벨 화면 — 전체 배경 통일 */
#black-label-screen{background:#1a1c20;}
#bl-detail-screen{background:#1a1c20;}

/* ══ SPLASH ══ */
#splash-screen{justify-content:center}
.splash-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:0 20px;width:100%}
.logo-text{font-family:var(--font-brand);font-size:clamp(2rem,7vw,4rem);font-weight:500;letter-spacing:.18em;color:var(--text-1);text-shadow:0 2px 18px rgba(255,255,255,.75);opacity:0;animation:logoReveal 1.4s cubic-bezier(.22,1,.36,1) .3s forwards}
@keyframes logoReveal{0%{opacity:0;letter-spacing:.45em;filter:blur(8px)}100%{opacity:1;letter-spacing:.18em;filter:blur(0)}}
.logo-line{height:1px;width:0;background:linear-gradient(90deg,transparent,var(--silver-dark),transparent);animation:lineExp .9s ease 1.2s forwards}
@keyframes lineExp{to{width:min(280px,70vw)}}
.logo-sub{font-family:var(--font-brand);font-size:.76rem;letter-spacing:.28em;color:var(--text-2);opacity:0;animation:fadeUp .6s ease 1.8s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.splash-footer{position:absolute;bottom:28px;z-index:2;font-family:var(--font-brand);font-size:.62rem;letter-spacing:.24em;color:var(--text-m);opacity:0;animation:fadeUp .5s ease 2s forwards}

/* ══ BRAND LOGO ══ */
.brand-logo{font-family:var(--font-brand);font-size:1.1rem;font-weight:500;letter-spacing:.16em;color:var(--text-1)}
.brand-logo.sm{font-size:.96rem;letter-spacing:.14em}
.brand-logo.sub-brand{font-size:.76rem;letter-spacing:.18em;color:var(--text-m)}
.brand-home-btn{background:none;border:none;cursor:pointer;padding:0;transition:opacity .2s}
.brand-home-btn:hover{opacity:.65}
.no-click{pointer-events:none}

/* ══ LANG PICKER (기타 화면용 — 메인에서 제거됨) ══ */
.lang-picker{position:relative;z-index:10}
.lang-picker.open .lang-arrow{transform:rotate(180deg)}
.lang-picker.open .lang-menu{display:block}

/* ══ MAIN ══ */
#main-screen{
  justify-content:center;
  align-items:center;
}

/* 전체 블록 — 로고+버튼 하나로 묶어 화면 정중앙 */
.main-wrap{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  width:100%;max-width:340px;
  padding:0 24px;
}

/* 로고 */
.main-brand-wrap{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  margin-bottom:44px;
}
.main-brand-logo{
  font-family:var(--font-brand);
  font-size:clamp(1.4rem,6.5vw,2.2rem);
  font-weight:500;
  letter-spacing:.18em;
  color:var(--text-1);
  text-align:center;
  text-shadow:0 2px 20px rgba(255,255,255,.7);
  margin-bottom:8px;
  white-space:nowrap;
}
.main-brand-sub{
  font-family:var(--font-brand);
  font-size:.68rem;
  letter-spacing:.26em;
  color:var(--text-m);
  text-align:center;
}

/* 버튼 그룹 */
.main-center{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  width:100%;
}
.btn-group{display:flex;flex-direction:column;gap:11px;width:100%}
.main-btn{width:100%;padding:15px;border:1px solid var(--border);border-radius:var(--r);background:var(--p1-card);box-shadow:var(--p1-shadow);cursor:pointer;font-family:var(--font);font-size:.95rem;font-weight:600;color:var(--text-1);text-align:center;letter-spacing:.03em;transition:all .22s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.52),0 2px 10px rgba(0,0,0,.07)}
.main-btn:hover{background:rgba(238,242,247,.82);border-color:var(--silver-dark);transform:translateY(-2px)}
.main-btn.primary{background:var(--accent);color:#ffffff;border-color:transparent;box-shadow:0 4px 14px rgba(0,0,0,.22)}
.main-btn.primary:hover{background:var(--accent-hov)}
.main-footer{position:absolute;bottom:20px;z-index:2;font-size:.64rem;letter-spacing:.08em;color:var(--text-m)}

/* ══ LOGIN ══ */
#login-screen{align-items:center;}
.login-center{
  position:relative;z-index:2;
  width:100%;max-width:400px;
  display:flex;flex-direction:column;align-items:center;
  min-height:100vh;
  justify-content:center;
  padding:60px 0 40px;
}
.login-heading{
  font-family:var(--font-brand);
  font-size:1.6rem;font-weight:500;letter-spacing:.14em;
  color:var(--text-1);
  margin-bottom:12px;
  width:100%;
  padding:0 20px;
  text-align:center;
}

/* ══ FORM CONTAINER ══ */
.form-container{position:relative;z-index:2;width:100%;max-width:400px;margin:18px auto 32px;padding:22px 20px;background:var(--glass2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--border-l);border-radius:var(--r2);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 24px rgba(0,0,0,.09)}
/* 로그인 폼 마진 — form-container 뒤에 선언해야 덮음 */
.login-form.form-container{margin:6px auto 6px;max-width:400px;}
.input-group{margin-bottom:14px}
.input-label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--text-2);margin-bottom:5px;text-transform:uppercase}
.required{color:var(--error)}
.form-input{width:100%;padding:12px 13px;background:var(--p1-card);border:1px solid var(--p1-line2);border-radius:var(--r);font-family:var(--font);font-size:.95rem;color:var(--text-1);outline:none;transition:border-color .2s,box-shadow .2s;box-shadow:inset 0 2px 4px rgba(0,0,0,.04)}
.form-input::placeholder{color:var(--text-m)}
.form-input:focus{border-color:var(--accent-2);box-shadow:inset 0 2px 4px rgba(0,0,0,.04),0 0 0 3px rgba(46,49,56,.12)}
.input-row{display:flex;gap:8px;align-items:center}
.flex1{flex:1;min-width:0}
.input-hint{display:block;font-size:.74rem;color:var(--text-m);margin-top:4px}
.inline-btn{padding:12px 13px;background:var(--accent);color:#ffffff;border:none;border-radius:var(--r);font-family:var(--font);font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .2s}
.inline-btn:hover{background:var(--accent-hov)}
.timer{font-size:.86rem;font-weight:700;color:var(--error);min-width:38px;text-align:center;flex-shrink:0}
.submit-btn{width:100%;padding:15px;margin-top:6px;background:var(--accent);color:#ffffff;border:none;border-radius:var(--r);font-family:var(--font);font-size:.97rem;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:all .22s ease;box-shadow:0 4px 12px rgba(0,0,0,.18);text-align:center}
.submit-btn:hover{background:var(--accent-hov);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.2)}
.submit-btn.small{width:auto;padding:10px 28px}
.submit-btn.mt24{margin-top:20px}
.form-options{display:flex;gap:20px;margin-bottom:14px}
.check-wrap{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.88rem;color:var(--text-2);user-select:none}
.check-wrap input[type="checkbox"]{display:none}
.check-custom{width:20px;height:20px;border:1.5px solid var(--silver-dark);border-radius:14px;background:rgba(238,242,248,.8);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.check-custom.large{width:22px;height:22px}
.check-wrap input:checked+.check-custom{background:var(--accent);border-color:var(--accent)}
.check-wrap input:checked+.check-custom::after{content:'';width:5px;height:9px;border-right:2px solid #e2e6ea;border-bottom:2px solid #e2e6ea;transform:rotate(40deg) translateY(-1px)}
.divider{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:var(--text-m);font-size:.8rem}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
.social-btns{display:flex;gap:10px;margin-bottom:14px}
.social-btn{flex:1;padding:12px 10px;border:1px solid var(--border);border-radius:var(--r);font-family:var(--font);font-size:.86rem;font-weight:700;cursor:pointer;transition:all .2s}
.kakao-btn{background:#FEE500;border-color:rgba(200,180,0,.4);color:#3c1e00}
.naver-btn{background:#03C75A;border-color:rgba(3,160,70,.4);color:#fff}
.form-links{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 4px;font-size:.82rem}
.link-text{color:var(--text-m);cursor:pointer;transition:color .2s}
.link-text:hover{color:var(--text-1)}
.link-sep{color:var(--border)}
.login-error{font-size:.82rem;color:var(--error);text-align:center;min-height:18px;margin-top:6px}
.back-bottom-btn{display:block;width:100%;margin-top:12px;padding:12px;background:none;border:1px solid var(--border);border-radius:var(--r);font-family:var(--font);font-size:.86rem;color:var(--text-2);cursor:pointer;text-align:center;transition:all .2s}
.back-bottom-btn:hover{border-color:var(--silver-dark);color:var(--text-1)}

/* ══ PAGE HEADER ══ */
.page-header{position:relative;z-index:2;width:100%;max-width:480px;display:flex;align-items:center;gap:14px;padding:64px 22px 0}
.center-header{justify-content:space-between;align-items:center}
.page-title{font-family:var(--font-brand);font-size:1.18rem;font-weight:500;letter-spacing:.1em;color:var(--text-1)}
.back-icon-btn{width:34px;height:34px;background:none;border:1px solid var(--border);border-radius:50%;font-size:.8rem;color:var(--text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;overflow:hidden;}
.back-icon-btn:hover{border-color:var(--silver-dark);color:var(--text-1);}

/* ══ HOME ══ */
#home-screen{justify-content:center;}
.home-header{position:relative;z-index:2;width:100%;max-width:480px;display:flex;align-items:center;justify-content:space-between;padding:20px 22px 0}
.home-body{position:relative;z-index:2;width:100%;max-width:480px;padding:14px 18px 20px}
.home-welcome-banner{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--accent) 0%,var(--accent-2) 100%);border-radius:var(--r2);padding:20px 20px;margin-bottom:16px;box-shadow:0 6px 20px rgba(24,25,28,.24)}
.home-welcome-name{font-family:var(--font-brand);font-size:1.02rem;font-weight:500;color:#fff;letter-spacing:.04em;margin-bottom:4px}
.home-welcome-sub{font-size:.76rem;color:rgba(220,228,240,.78);line-height:1.4}
.home-welcome-icon{font-size:2.2rem;flex-shrink:0}

/* 홈 그리드 — 좌측 큰 카드 + 우측 2개 완전 대칭 */
.home-grid-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:10px;
  margin-bottom:14px;
}
.hg-big{
  grid-column:1;
  grid-row:1/3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:24px 12px;
  background:var(--glass2);border:1px solid var(--border-l);border-radius:var(--r2);
  cursor:pointer;transition:all .22s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 12px rgba(0,0,0,.09);
  text-align:center;
}
.hg-big:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.12);}
/* display:contents — 래퍼를 투명하게 해서 자식이 그리드에 직접 배치 */
.hg-small-col{display:contents;}
.hg-small{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:14px 8px;
  background:var(--glass2);border:1px solid var(--border-l);border-radius:var(--r2);
  cursor:pointer;transition:all .22s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.07);
  text-align:center;
}
/* BLACK LABEL — 우측 1행 */
.hg-top{grid-column:2;grid-row:1;}
/* 예약 확인 — 우측 2행, 차량 예약 하단과 정확히 맞춤 */
.hg-bottom{grid-column:2;grid-row:2;}
.hg-small:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(0,0,0,.11);}
.hg-icon{font-size:2rem;line-height:1}
.hg-label{font-family:var(--font);font-size:.9rem;font-weight:700;color:var(--text-1);letter-spacing:.02em}
.black-card{background:var(--accent)!important;border-color:var(--accent-2)!important}
.hg-label-en{font-family:var(--font-brand);font-size:.82rem;font-weight:500;letter-spacing:.14em;color:#e2e6ea;text-transform:uppercase;text-align:center}

/* 홈 컨트롤러 열기 버튼 (하단 사다리꼴) */
.home-ctrl-switch{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  z-index:150;display:none;align-items:center;justify-content:center;
  width:100px;height:22px;
  background:rgba(14,16,20,.28);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  clip-path:polygon(10% 0%,90% 0%,100% 100%,0% 100%);
  cursor:pointer;transition:background .2s;
}
.home-ctrl-switch::after{
  content:'';position:absolute;left:20%;right:20%;top:50%;
  height:2px;background:rgba(200,169,110,.5);border-radius:2px;transform:translateY(-50%);
}
.home-ctrl-switch:hover{background:rgba(14,16,20,.46);}
.home-ctrl-switch.visible{display:flex;}

.home-section-title{font-family:var(--font-brand);font-size:.9rem;font-weight:500;letter-spacing:.1em;color:var(--text-2);margin-bottom:8px;margin-top:4px}

/* 자동 슬라이드 */
.auto-slide-wrap{position:relative;margin-bottom:18px;overflow:hidden;border-radius:var(--r2);box-shadow:0 4px 16px rgba(0,0,0,.14);cursor:pointer}
.auto-slide-track{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.auto-slide-item{flex-shrink:0;width:100%;padding:18px 20px 14px;min-height:108px;display:flex;flex-direction:column;justify-content:center}
/* 슬라이드 그라데이션 배경 (3색 풍부한 그라데이션) */
.sg1{background:linear-gradient(135deg,#1a3a5c 0%,#1e5082 50%,#1a2a4a 100%)}
.sg2{background:linear-gradient(135deg,#141414 0%,#2a2010 50%,#1a1000 100%)}
.sg3{background:linear-gradient(135deg,#1a4a2a 0%,#235e34 50%,#0e2a1a 100%)}
.sg4{background:linear-gradient(135deg,#4a2a1a 0%,#6b3d24 50%,#2a1000 100%)}
/* 하위 호환용 */
.s1{background:linear-gradient(135deg,#1a3a5c,#1e4f82)}
.s2{background:linear-gradient(135deg,#141414,#2a2a2a)}
.s3{background:linear-gradient(135deg,#1a4a2a,#235e34)}
.s4{background:linear-gradient(135deg,#4a2a1a,#6b3d24)}
.slide-badge{display:inline-block;font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:20px;margin-bottom:8px;background:rgba(255,255,255,.22);color:#fff;letter-spacing:.08em;width:fit-content;font-family:var(--font)}
.slide-badge.new-b{background:rgba(46,180,100,.4)}
.slide-badge.gift-b{background:rgba(200,160,30,.4)}
.slide-badge.ev-b{background:rgba(60,200,140,.45)}
/* 5번째 이벤트 카드 */
.e5{background:linear-gradient(135deg,#0a2a24,#0e4030)}
.ev-card-badge.ev-b{background:rgba(60,200,140,.45)}
/* 홈 브랜드 로고 크게 */
.home-brand{font-size:1.18rem!important;letter-spacing:.18em!important;}
/* 액션 토스트 */
.ctrl-action-toast{text-align:center;font-size:.8rem;font-weight:600;color:var(--accent);min-height:20px;margin:2px 20px 4px;transition:opacity .3s;opacity:0;}
.ctrl-action-toast.show{opacity:1} /* 미사용 — ctrl-row 방식으로 교체 */
.ctrl-row{display:flex;gap:5px;width:100%;}
.ctrl-row-3{justify-content:space-between;}
.ctrl-row-3 .ctrl-sq-btn{flex:1;}
.ctrl-row-2{justify-content:center;gap:5px;}
.ctrl-row-2 .ctrl-sq-btn{width:calc((100% - 10px) / 3 * 1);flex:none;}
.ctrl-sq-btn{
  aspect-ratio:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:5px 4px;
  background:var(--glass2);
  border:1px solid var(--border-l);border-radius:var(--r);
  cursor:pointer;transition:all .15s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 4px rgba(0,0,0,.06);
  position:relative;
  max-height:62px;min-height:52px;
}
.ctrl-sq-btn:hover{background:rgba(255,255,255,.95);border-color:var(--silver-dark);}
.ctrl-sq-btn:active{transform:scale(.96);background:rgba(255,255,255,.9);}
.ctrl-sq-icon{font-size:1.15rem;line-height:1;}
.ctrl-sq-label{font-size:.6rem;font-weight:700;color:var(--text-1);letter-spacing:.01em;font-family:var(--font);text-align:center;line-height:1.2;}
.ctrl-sq-badge{
  position:absolute;top:3px;right:4px;
  font-size:.52rem;font-weight:700;color:#1d7a3a;
  background:rgba(29,122,58,.12);
  padding:1px 4px;border-radius:8px;
  min-width:14px;text-align:center;
}
.ctrl-sq-photo{border-color:rgba(91,120,200,.25);background:rgba(91,120,200,.04);}
.ctrl-sq-photo:hover{border-color:rgba(91,120,200,.5);background:rgba(91,120,200,.08);}
.ctrl-sq-extend{border-color:rgba(29,122,58,.25);background:rgba(29,122,58,.04);}
.ctrl-sq-extend:hover{border-color:rgba(29,122,58,.5);background:rgba(29,122,58,.1);}
.ctrl-sq-return{border-color:rgba(178,58,58,.25);background:rgba(178,58,58,.04);}
.ctrl-sq-return:hover{border-color:rgba(178,58,58,.5);background:rgba(178,58,58,.1);}
.ctrl-sq-btn-active{border-color:rgba(29,122,58,.45)!important;background:rgba(29,122,58,.08)!important;}
.ctrl-photo-btn.ctrl-photo-done{border-color:rgba(29,122,58,.5);background:rgba(29,122,58,.08);}
.ctrl-misc-btn{
  width:100%;margin:4px 0 2px;padding:9px 14px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(200,169,110,.08);border:1px dashed rgba(200,169,110,.3);
  border-radius:14px;cursor:pointer;font-family:var(--font);
  font-size:.8rem;font-weight:600;color:rgba(200,169,110,.85);
  transition:background .18s;
}
.ctrl-misc-btn:active{background:rgba(200,169,110,.16);}
.ctrl-photo-panel.open{
  max-height:400px;opacity:1;
}

/* 체크박스 스타일 (dev 삭제) */
.dev-del-chk{
  display:flex;align-items:center;cursor:pointer;flex-shrink:0;
}
.dev-del-chk input[type="checkbox"]{
  position:absolute;opacity:0;width:0;height:0;
}
.dev-del-chk-box{
  width:18px;height:18px;border-radius:14px;
  border:1.5px solid rgba(91,200,255,.35);
  background:rgba(91,200,255,.06);
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.dev-del-chk input:checked ~ .dev-del-chk-box{
  background:rgba(200,50,50,.7);border-color:rgba(200,50,50,.8);
}
.dev-del-chk input:checked ~ .dev-del-chk-box::after{
  content:'✓';font-size:.75rem;color:#fff;font-weight:700;
}

/* dev 탭 공통 */
/* 차량 옵션 3줄 표시 */
.car-opts{margin:4px 0 2px;display:flex;flex-direction:column;gap:1px}
.car-opt-line{font-size:.67rem;color:var(--text-m);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;}
.car-km-info{font-size:.67rem;color:rgba(29,122,58,.8);font-weight:600;margin-bottom:2px}
.car-price-row{display:flex;align-items:center;gap:6px;margin-top:2px}

/* ══ MODAL ══ */
.modal-overlay{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,0);pointer-events:none;display:flex;align-items:flex-end;justify-content:center;transition:background .3s}
.modal-overlay.open{background:rgba(0,0,0,.42);pointer-events:all}
.modal-box{width:100%;max-width:480px;background:var(--silver-base);border-radius:24px 24px 0 0;overflow:hidden;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);max-height:80vh;display:flex;flex-direction:column}
.modal-overlay.open .modal-box{transform:translateY(0)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border)}
.modal-title{font-family:var(--font-brand);font-size:1rem;font-weight:500;letter-spacing:.06em;color:var(--text-1)}
.modal-close{background:none;border:none;font-size:1rem;color:var(--text-m);cursor:pointer;padding:4px 8px;border-radius:14px;transition:color .2s}
.modal-close:hover{color:var(--text-1)}
.modal-body{flex:1;overflow-y:auto;padding:18px 20px;font-size:.86rem;color:var(--text-2);line-height:1.9}
.modal-body h4{font-size:.92rem;font-weight:700;color:var(--text-1);margin-bottom:8px}

/* ══ TOAST ══ */
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(24,25,28,.92);color:#e8ecf0;padding:10px 20px;border-radius:30px;font-size:.84rem;font-weight:600;z-index:300;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══ HOME MENU BUTTON (홈 화면 우측 상단 3줄 버튼) ══ */
.home-menu-btn{
  flex-shrink:0;
  background:var(--glass2);
  border:1px solid var(--border-l);
  border-radius:10px;
  width:40px;height:40px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;
  transition:all .2s;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  padding:0;
}
.home-menu-btn.hidden{visibility:hidden;pointer-events:none}
.home-menu-btn span{
  display:block;width:18px;height:2px;
  background:var(--text-1);border-radius:2px;
  transition:all .22s;
}
.home-menu-btn:hover{background:rgba(230,235,245,.9);border-color:var(--silver-dark)}

/* ══ HOME MENU PANEL (우측 슬라이드 패널) ══ */
.home-menu-overlay{
  position:fixed;inset:0;z-index:850;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .28s;
}
.home-menu-overlay.open{background:rgba(0,0,0,.35);pointer-events:all}

.home-menu-panel{
  position:fixed;top:0;right:-100%;
  width:min(78vw,290px);height:100%;
  background:linear-gradient(180deg,rgba(240,244,250,.98) 0%,rgba(232,238,248,.98) 100%);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-left:1px solid var(--border-l);
  z-index:860;
  display:flex;flex-direction:column;
  box-shadow:-6px 0 28px rgba(0,0,0,.14);
  transition:right .32s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.home-menu-panel.open{right:0}

/* 프로필 영역 */
.hmenu-profile{
  display:flex;align-items:center;gap:12px;
  padding:56px 20px 18px;
  border-bottom:1px solid var(--border);
}
.hmenu-avatar{
  width:44px;height:44px;border-radius:50%;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0;
}
.hmenu-user-info{flex:1;min-width:0}
.hmenu-name{
  font-family:var(--font);font-size:.96rem;font-weight:700;
  color:var(--text-1);margin-bottom:2px;
}
.hmenu-id{
  font-family:var(--font);font-size:.76rem;
  color:var(--text-m);
}
.hmenu-close{
  background:none;border:none;
  font-size:1rem;color:var(--text-m);
  cursor:pointer;padding:4px;flex-shrink:0;
  transition:color .18s;
}
.hmenu-close:hover{color:var(--text-1)}

/* 구분선 */
.hmenu-divider{height:1px;background:var(--border);margin:4px 0}

/* 메뉴 항목 */
.hmenu-item{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:16px 22px;
  background:none;border:none;
  font-family:var(--font);font-size:.92rem;font-weight:500;
  color:var(--text-1);
  cursor:pointer;
  text-align:left;
  transition:background .16s;
}
.hmenu-item:hover{background:rgba(35,38,43,.06)}
.hmenu-item:active{background:rgba(35,38,43,.1)}
.hmenu-item-icon{font-size:1.1rem;width:24px;text-align:center;flex-shrink:0}
.hmenu-item-label{flex:1}
.hmenu-item-arrow{font-size:1rem;color:var(--text-m);font-weight:300}
.hmenu-logout{color:var(--error)!important}
.hmenu-logout .hmenu-item-icon{filter:none}

/* ══ EXTEND SHEET ══ */
.ext-overlay{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .28s}
.ext-overlay.show{opacity:1;pointer-events:all}
.extend-sheet.open{transform:translateX(-50%) translateY(0)}
.extend-sheet-title{font-family:var(--font-brand);font-size:.96rem;font-weight:500;letter-spacing:.06em;color:var(--text-1);text-align:center;width:100%;padding:14px 20px 10px;border-bottom:1px solid var(--border);}
.ext-info{font-size:.8rem;color:var(--text-m);padding:10px 20px 6px}
.ext-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 16px 12px}
.extend-option{padding:12px 6px;background:rgba(242,245,250,.8);border:1.5px solid var(--border);border-radius:var(--r2);text-align:center;cursor:pointer;transition:all .18s}
.extend-option.selected{border-color:var(--accent);background:rgba(35,38,43,.06)}
.extend-option:hover{border-color:var(--accent-2)}
.ext-min{display:block;font-size:.88rem;font-weight:700;color:var(--text-1);margin-bottom:3px}
.ext-cost{display:block;font-size:.74rem;color:var(--text-m)}
.ext-confirm-box{padding:0 16px 12px;display:none}
.ext-confirm-box.show{display:block}

/* ══ PHOTO MODAL ══ */
.photo-modal-overlay{position:fixed;inset:0;z-index:1010;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .28s;display:flex;align-items:flex-end;justify-content:center}
.photo-modal-overlay.open{opacity:1;pointer-events:all}
.photo-modal-box{width:100%;max-width:480px;background:var(--silver-base);border-radius:24px 24px 0 0;transform:translateY(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.photo-modal-overlay.open .photo-modal-box{transform:translateY(0)}
.photo-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);min-height:52px}
.photo-modal-title{font-family:var(--font-brand);font-size:.94rem;font-weight:500;letter-spacing:.06em;color:var(--text-1);flex:1;text-align:center}
.photo-modal-close{background:none;border:none;font-size:1.1rem;color:var(--text-m);cursor:pointer;padding:6px 8px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.photo-notice{font-size:.74rem;color:var(--text-m);text-align:center;padding:8px 16px 4px;margin:0}
.photo-list-wrap{padding:4px 16px 8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.photo-list-item{display:flex;align-items:center;justify-content:space-between;background:rgba(240,244,250,.9);border:1px solid var(--border-l);border-radius:var(--r2);padding:13px 16px;cursor:pointer;transition:background .18s,border-color .18s}
.photo-list-item:active{background:rgba(220,228,240,.9)}
.photo-list-left{display:flex;align-items:center;gap:12px}
.photo-list-name{font-size:.9rem;font-weight:700;color:var(--text-1);font-family:var(--font)}
.photo-list-sub{font-size:.72rem;color:var(--text-m);margin-top:2px}
.photo-list-right{display:flex;align-items:center;gap:6px}
.photo-list-count{font-size:.78rem;font-weight:700;color:#1d7a3a;background:rgba(29,122,58,.1);padding:3px 10px;border-radius:12px}
.photo-list-count.has-photos{background:rgba(29,122,58,.18);color:#1d7a3a}
.photo-list-arrow{font-size:1.2rem;color:var(--text-m);font-weight:300}
.photo-list-misc{border-style:dashed;border-color:rgba(200,169,110,.3);background:rgba(200,169,110,.04)}
.photo-list-misc .photo-list-name{color:rgba(160,120,40,.9)}
.photo-list-misc .photo-list-count{background:rgba(200,169,110,.15);color:rgba(160,110,30,.9)}
.photo-done-btn{width:calc(100% - 32px);margin:8px 16px 16px;padding:13px;background:var(--accent);color:#ffffff;border:none;border-radius:var(--r);font-family:var(--font);font-size:.9rem;font-weight:700;cursor:pointer;transition:background .2s;text-align:center}
.photo-done-btn:hover{background:var(--accent-hov)}

/* ══ SIDE CAPTURE ══ */
.side-capture-overlay{position:fixed;inset:0;z-index:1020;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .28s;display:flex;align-items:flex-end;justify-content:center}
.side-capture-overlay.open{opacity:1;pointer-events:all}
.side-capture-box{width:100%;max-width:480px;background:#f0f3f7;border-radius:18px 18px 0 0;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);padding-bottom:env(safe-area-inset-bottom,16px)}
.side-capture-overlay.open .side-capture-box{transform:translateY(0)}
.side-capture-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;border-bottom:1px solid var(--border)}
.side-capture-title{font-family:var(--font-brand);font-size:.94rem;font-weight:500;letter-spacing:.06em;color:var(--text-1);flex:1;text-align:center}

/* 썸네일 행 — + 슬롯 대칭 */
.side-thumb-row{display:flex;gap:8px;flex-wrap:wrap;padding:10px 16px 4px;min-height:72px;}
.side-thumb-wrap{position:relative;width:68px;height:68px;border-radius:10px;overflow:hidden;flex-shrink:0;}
.side-thumb-img{width:100%;height:100%;object-fit:cover;display:block;}
.side-thumb-del{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.6);border:none;border-radius:50%;width:20px;height:20px;font-size:.7rem;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;}
.side-thumb-empty{
  width:68px;height:68px;border-radius:10px;
  border:1.5px dashed var(--border);
  background:rgba(240,244,250,.6);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.side-thumb-empty span{
  font-size:1.6rem;color:var(--border);
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  line-height:1;
}

/* 카메라 버튼 */
.side-add-wrap{padding:8px 16px 14px;display:flex;justify-content:center;}
.side-cam-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px;
  background:var(--accent);color:#ffffff;border:none;border-radius:var(--r);
  font-family:var(--font);font-size:.9rem;font-weight:700;cursor:pointer;
}
.side-cam-icon{font-size:1.1rem;line-height:1;}
.side-cam-label{line-height:1;}

/* ══ CARO 전용 카메라 화면 ══ */
.caro-cam-screen{
  position:fixed;inset:0;z-index:2000;
  background:#000;
  display:none;
  flex-direction:column;
  align-items:stretch;
}
.caro-cam-screen.open{display:flex;}

.caro-cam-header{
  display:flex;align-items:center;justify-content:center;
  padding:calc(14px + env(safe-area-inset-top,0px)) 20px 12px;
  background:rgba(0,0,0,.7);flex-shrink:0;
}
.caro-cam-title{
  font-family:var(--font-brand);
  font-size:1rem;font-weight:500;letter-spacing:.1em;
  color:#fff;text-align:center;
}

/* 뷰파인더 */
.caro-cam-viewfinder{
  flex:1;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.caro-cam-video{
  width:100%;height:100%;object-fit:cover;
  display:block;
}
.caro-cam-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}

/* 가이드 모서리 */
.caro-cam-guide{
  position:absolute;inset:20px;pointer-events:none;
}
.caro-cam-guide-corner{
  position:absolute;width:24px;height:24px;
  border-color:rgba(200,169,110,.8);border-style:solid;
}
.caro-cam-guide-corner.tl{top:0;left:0;border-width:2px 0 0 2px;border-radius:2px 0 0 0;}
.caro-cam-guide-corner.tr{top:0;right:0;border-width:2px 2px 0 0;border-radius:0 2px 0 0;}
.caro-cam-guide-corner.bl{bottom:0;left:0;border-width:0 0 2px 2px;border-radius:0 0 0 2px;}
.caro-cam-guide-corner.br{bottom:0;right:0;border-width:0 2px 2px 0;border-radius:0 0 2px 0;}

/* 하단 컨트롤 */
.caro-cam-controls{
  display:flex;align-items:center;justify-content:center;
  gap:0;
  padding:20px 24px calc(20px + env(safe-area-inset-bottom,0px));
  background:rgba(0,0,0,.7);
  flex-shrink:0;
  position:relative;
  min-height:110px;
}
.caro-cam-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;
  background:none;border:none;cursor:pointer;
  color:#fff;
  min-width:72px;
  padding:0;
}
/* 좌우 버튼 절대 위치로 셔터 양쪽 배치 */
.caro-cam-retry{position:absolute;left:32px;bottom:calc(20px + env(safe-area-inset-bottom,0px));}
.caro-cam-cancel{position:absolute;left:32px;bottom:calc(20px + env(safe-area-inset-bottom,0px));}
.caro-cam-save{position:absolute;right:32px;bottom:calc(20px + env(safe-area-inset-bottom,0px));}
.caro-cam-btn-icon{font-size:1.6rem;line-height:1;display:block;}
.caro-cam-btn-label{font-size:.68rem;font-family:var(--font);letter-spacing:.04em;color:rgba(255,255,255,.8);}

/* 셔터 버튼 */
.caro-cam-shutter{
  width:72px;height:72px;
  background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
}
.caro-cam-shutter-ring{
  width:68px;height:68px;border-radius:50%;
  border:3px solid #fff;
  display:flex;align-items:center;justify-content:center;
}
.caro-cam-shutter-dot{
  width:54px;height:54px;border-radius:50%;
  background:#fff;
  transition:transform .12s,background .12s;
}
/* ══ DRUM PICKER ══ */
.drum-overlay{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .28s ease}
.drum-overlay.open{opacity:1;pointer-events:all}
.drum-sheet{width:100%;max-width:480px;background:#f8f9fb;border-radius:20px 20px 0 0;transform:translateY(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);padding-bottom:env(safe-area-inset-bottom,16px);overflow:hidden}
.drum-overlay.open .drum-sheet{transform:translateY(0)}
.drum-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid rgba(0,0,0,.07)}
.drum-title{font-family:var(--font);font-size:.94rem;font-weight:700;color:var(--text-1)}
.drum-confirm-btn{padding:7px 20px;background:var(--accent);color:#e8ecf0;border:none;border-radius:12px;font-family:var(--font);font-size:.84rem;font-weight:700;cursor:pointer;transition:background .2s}
.drum-confirm-btn:active{background:#0e1014}
.drum-body{display:flex;gap:4px;padding:8px 10px 14px;align-items:flex-start}
.drum-section{flex:2;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.drum-section-sm{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;}
.drum-label{font-size:.62rem;font-weight:700;color:var(--text-m);letter-spacing:.05em;text-align:center}
.drum-wrap{position:relative;width:100%;height:176px;overflow:hidden;cursor:grab;touch-action:none}
.drum-wrap:active{cursor:grabbing}
.drum-list{position:absolute;top:0;left:0;right:0;transition:transform .28s cubic-bezier(.25,.46,.45,.94);will-change:transform}
.drum-item{height:44px;display:flex;align-items:center;justify-content:center;font-family:var(--font);font-size:.9rem;font-weight:500;color:rgba(24,25,28,.28);line-height:1;transition:color .15s,font-size .15s,font-weight .15s,opacity .15s;user-select:none;white-space:nowrap}
.drum-item.far2{color:rgba(24,25,28,.38);font-size:.88rem}
.drum-item.near{color:rgba(24,25,28,.62);font-size:.96rem;font-weight:600}
.drum-item.selected{color:var(--accent);font-size:1.06rem;font-weight:700}
.drum-selector{position:absolute;top:66px;left:6%;right:6%;height:44px;border-top:1.5px solid rgba(24,25,28,.13);border-bottom:1.5px solid rgba(24,25,28,.13);border-radius:8px;pointer-events:none;background:rgba(24,25,28,.025)}
.drum-fade-top{position:absolute;top:0;left:0;right:0;height:66px;z-index:2;pointer-events:none;background:linear-gradient(to bottom,rgba(248,249,251,1) 0%,rgba(248,249,251,0) 100%)}
.drum-fade-bot{position:absolute;bottom:0;left:0;right:0;height:66px;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(248,249,251,1) 0%,rgba(248,249,251,0) 100%)}
.event-detail-modal{display:flex;flex-direction:column;gap:12px}
.find-tab.active{background:var(--accent);color:#e2e6ea}
.verify-row .input-group{flex:1}
.mypage-item.danger{color:#b23a3a}
.pw-strength{height:4px;border-radius:2px;margin-top:5px;transition:all .3s;background:var(--border)}
.pw-strength.weak{background:#b23a3a;width:30%}
.pw-strength.medium{background:#b07800;width:65%}
.pw-strength.strong{background:#1d7a3a;width:100%}
.notice-item{padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .18s}
.notice-item:hover{background:rgba(35,38,43,.04)}
.notice-title{font-size:.88rem;font-weight:700;color:var(--text-1);margin-bottom:3px}
.card-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(240,244,250,.8);border:1px solid var(--border-l);border-radius:var(--r2);margin-bottom:8px}
.card-icon{font-size:1.4rem;flex-shrink:0}

/* ══ CANCEL CONFIRM MODAL ══ */
.cancel-confirm-modal .modal-body{padding:14px 18px}

/* ══ DEV CONSOLE — 다크 테마 통일 ══ */
.dev-bg{position:absolute;inset:0;z-index:0;background:#080c10;}
.dev-header{position:relative;z-index:2;width:100%;max-width:480px;padding:52px 24px 16px;text-align:center;}
.dev-logo{font-family:'Oswald',sans-serif;font-size:1.7rem;font-weight:500;letter-spacing:.3em;color:#5bc8ff;text-shadow:0 0 18px rgba(91,200,255,.25);}
.dev-sub{font-size:.66rem;letter-spacing:.28em;color:rgba(91,200,255,.35);margin-top:4px;font-family:'Oswald',sans-serif}
.dev-logout-btn{margin-top:10px;padding:6px 18px;background:rgba(91,200,255,.08);border:1px solid rgba(91,200,255,.22);border-radius:14px;font-family:var(--font);font-size:.78rem;color:rgba(91,200,255,.7);cursor:pointer;transition:all .2s;}
.dev-logout-btn:hover{background:rgba(91,200,255,.16)}
.dev-body{position:relative;z-index:2;width:100%;max-width:480px;padding:0 16px 80px}
.dev-section{margin-bottom:16px}
.dev-section-title{
  font-size:.7rem;font-weight:700;letter-spacing:.12em;
  color:rgba(91,200,255,.55);text-transform:uppercase;
  margin-bottom:7px;font-family:var(--font);
  padding:0 2px;
}
.dev-card{
  background:#0f1520;
  border:1px solid rgba(91,200,255,.1);
  border-radius:14px;overflow:hidden;
}
.dev-row{
  display:flex;align-items:center;gap:7px;
  padding:10px 13px;
  border-bottom:1px solid rgba(91,200,255,.06);
  flex-wrap:wrap;
}
.dev-row:last-child{border-bottom:none}
.dev-label{font-size:.8rem;color:rgba(180,210,240,.65);font-family:var(--font);flex-shrink:0;min-width:70px;}
/* 버튼 — 기본(파란), primary(초록), warn(주황), danger(빨강) */
.dev-btn{
  padding:6px 13px;
  background:rgba(91,200,255,.1);
  border:1px solid rgba(91,200,255,.22);
  border-radius:12px;
  font-family:var(--font);font-size:.75rem;
  color:rgba(91,200,255,.85);
  cursor:pointer;transition:all .18s;white-space:nowrap;
}
.dev-btn:hover{background:rgba(91,200,255,.2);border-color:rgba(91,200,255,.4)}
.dev-btn-primary{background:rgba(40,160,80,.15)!important;border-color:rgba(40,160,80,.35)!important;color:rgba(80,220,120,.9)!important}
.dev-btn-primary:hover{background:rgba(40,160,80,.28)!important}
.dev-btn-warn{background:rgba(200,140,30,.12)!important;border-color:rgba(200,140,30,.3)!important;color:rgba(220,160,50,.9)!important}
.dev-btn-warn:hover{background:rgba(200,140,30,.24)!important}
.dev-btn-danger{background:rgba(200,50,50,.12)!important;border-color:rgba(200,50,50,.3)!important;color:rgba(240,90,90,.9)!important}
.dev-btn-danger:hover{background:rgba(200,50,50,.24)!important}
.dev-full-btn{width:100%;justify-content:center;display:block;text-align:center;padding:10px;margin:0;border-radius:var(--r);font-family:var(--font);font-size:.86rem;font-weight:700;cursor:pointer;transition:background .2s;}
/* 입력 */
.dev-input{
  flex:1;
  background:#0d1724;
  border:1px solid rgba(91,200,255,.18);
  border-radius:12px;padding:7px 9px;
  font-family:var(--font);font-size:.8rem;
  color:rgba(180,220,255,.88);outline:none;min-width:0;
}
.dev-input::placeholder{color:rgba(91,200,255,.25)}
.dev-input:focus{border-color:rgba(91,200,255,.5)}
.dev-select{
  flex:1;
  background:#0d1724;
  border:1px solid rgba(91,200,255,.18);
  border-radius:12px;padding:7px 9px;
  font-family:var(--font);font-size:.8rem;
  color:rgba(180,220,255,.88);outline:none;min-width:0;cursor:pointer;
}
.dev-select option{background:#0d1724;color:#aee;}
.dev-textarea{
  width:100%;background:#0d1724;
  border:1px solid rgba(91,200,255,.18);border-radius:12px;
  padding:8px 9px;font-family:var(--font);font-size:.78rem;
  color:rgba(180,220,255,.88);outline:none;resize:vertical;min-height:56px;
}
/* 상태 뱃지 */
.dev-status-badge{font-size:.68rem;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;}
.dev-status-ok{background:rgba(40,160,80,.18);color:rgba(80,220,120,.9);}
.dev-status-busy{background:rgba(200,50,50,.18);color:rgba(240,90,90,.9);}
.dev-status-disabled{background:rgba(160,100,0,.2);color:rgba(220,160,50,.9);}
/* 통계 */
.dev-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.dev-stat-card{background:#0f1520;border:1px solid rgba(91,200,255,.1);border-radius:14px;padding:12px 6px;text-align:center}
.dev-stat-highlight{border-color:rgba(91,200,255,.28)!important;background:rgba(91,200,255,.06)!important}
.dev-stat-num{font-family:'Oswald',sans-serif;font-size:1.4rem;font-weight:500;color:#5bc8ff}
.dev-stat-label{font-size:.58rem;color:rgba(91,200,255,.45);margin-top:2px;font-family:var(--font)}
.dev-file-label{cursor:pointer;}
/* Dev 탭 */
.dev-tab-btn{
  flex:1;padding:10px 6px;
  background:transparent;border:none;
  font-family:var(--font);font-size:.78rem;font-weight:600;
  color:rgba(91,200,255,.4);cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all .18s;
}
.dev-tab-btn:hover{color:rgba(91,200,255,.7);}
.dev-tab-active{color:#5bc8ff!important;border-bottom-color:#5bc8ff!important;}
.slide-title{font-size:.95rem;font-weight:700;color:#fff;margin-bottom:4px;word-break:keep-all;line-height:1.3;font-family:var(--font)}
.slide-desc{font-size:.74rem;color:rgba(255,255,255,.7);line-height:1.4;word-break:keep-all;font-family:var(--font)}
.slide-dots{display:flex;justify-content:center;gap:6px;padding:7px 0 3px;background:rgba(0,0,0,.04)}
.slide-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:all .3s;cursor:pointer}
.slide-dot.active{background:var(--accent);width:18px;border-radius:14px}

/* 공지 */
.home-notice-list{background:var(--glass2);border:1px solid var(--border-l);border-radius:var(--r2);overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.home-notice-item{display:grid;grid-template-columns:44px 1fr 72px;align-items:center;gap:0;padding:13px 15px;border-bottom:1px solid var(--border-l);cursor:pointer;transition:background .15s}
.home-notice-item:last-child{border-bottom:none}
.home-notice-item:hover{background:rgba(255,255,255,.4)}
.notice-tag{flex-shrink:0;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:14px;letter-spacing:.04em;background:rgba(35,38,43,.1);color:var(--text-2);font-family:var(--font);text-align:center;white-space:nowrap}
.notice-tag.new-tag{background:rgba(46,125,68,.15);color:#1d7a3a}
.notice-text{font-size:.82rem;color:var(--text-1);word-break:keep-all;line-height:1.3;padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice-date{font-size:.66rem;color:var(--text-m);text-align:right;white-space:nowrap}

/* ══ MY RESERVATION 타이틀 ══ */
.myres-title-row{
  position:relative;z-index:2;
  width:100%;max-width:480px;
  display:flex;justify-content:center;align-items:center;
  padding:50px 22px 0;
}
.myres-main-title{
  font-family:var(--font-brand);font-size:1.5rem;font-weight:500;
  letter-spacing:.12em;color:var(--text-1);
}
.find-title-bar{position:relative;z-index:2;width:100%;max-width:480px;display:flex;justify-content:center;padding:24px 24px 0}

/* ══ SIGNUP ══ */
.signup-title-bar{position:relative;z-index:2;width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:70px 24px 0}
.signup-title-bar .page-title{font-family:var(--font-brand);font-size:1.5rem;font-weight:500;letter-spacing:.12em;color:var(--text-1)}
.step-bar{position:relative;z-index:2;width:100%;max-width:480px;display:flex;align-items:center;justify-content:center;padding:18px 28px 0;gap:0}
.step{display:flex;flex-direction:column;align-items:center;gap:4px}
.step span{width:28px;height:28px;border-radius:50%;background:var(--glass2);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:var(--text-m);transition:all .3s}
.step small{font-size:.64rem;color:var(--text-m);white-space:nowrap;font-family:var(--font)}
.step.active span{background:var(--accent);border-color:var(--accent);color:#e2e6ea}
.step.active small{color:var(--accent)}
.step.done span{background:var(--success);border-color:var(--success);color:#fff}
.step-line{flex:1;height:1.5px;background:var(--border);margin:0 4px;margin-bottom:14px}
.signup-step{display:none;width:100%}
.signup-step.active{display:block}
.step-heading{font-size:.95rem;font-weight:700;color:var(--text-1);letter-spacing:.02em;margin-bottom:16px;font-family:var(--font)}
.terms-all-wrap{padding:12px;background:rgba(238,242,248,.6);border:1px solid var(--border-l);border-radius:var(--r);margin-bottom:10px}
.agree-bold{font-size:.95rem;font-weight:700;color:var(--text-1)}
.all-agree-desc{font-size:.76rem;color:var(--text-m);margin-top:4px;margin-left:28px;line-height:1.4}
.terms-divider{height:1px;background:var(--border);margin:10px 0}
.terms-item{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.terms-view-btn{background:none;border:1px solid var(--border);border-radius:12px;padding:4px 10px;font-size:.76rem;color:var(--text-m);cursor:pointer;transition:all .2s;white-space:nowrap;font-family:var(--font)}
.terms-view-btn:hover{border-color:var(--silver-dark);color:var(--text-1)}
.pw-strength-bar{height:3px;background:var(--border);border-radius:14px;overflow:hidden;margin-top:5px}
#pw-strength-fill{height:100%;width:0;border-radius:14px;transition:width .3s,background .3s}
.done-container{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 24px}
.done-desc{font-size:.88rem;color:var(--text-m);line-height:1.6;margin-bottom:22px}
.section-title{font-family:var(--font-brand);font-size:.92rem;font-weight:500;letter-spacing:.1em;color:var(--text-2);margin-bottom:9px;margin-top:2px}
#caro-map{width:100%;height:340px;border-radius:var(--r2);border:1px solid var(--border-l);overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.1)}
.legend-dot.available{background:#1d7a3a}
.legend-dot.busy{background:#b23a3a;margin-left:12px}
.car-list{display:flex;flex-direction:column;gap:10px}
.car-item{display:flex;align-items:center;background:var(--glass2);border:1px solid var(--border-l);border-radius:var(--r2);padding:13px 14px;gap:13px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 8px rgba(0,0,0,.07)}
.car-thumb{width:80px;height:48px;border-radius:14px;object-fit:fill;flex-shrink:0;}
.car-info{flex:1}
.car-name{font-size:.95rem;font-weight:700;color:var(--text-1);margin-bottom:2px}
.car-detail{font-size:.72rem;color:var(--text-m);margin-bottom:4px}
.car-status{display:inline-block;font-size:.66rem;font-weight:700;padding:2px 7px;border-radius:20px;margin-bottom:4px}
.car-status.ok{background:rgba(29,122,58,.12);color:#1d7a3a}
.car-status.busy{background:rgba(178,58,58,.12);color:#b23a3a}
.car-status.reserved{background:rgba(120,80,0,.12);color:#7a5000}

/* 결제 화면 타이틀 */
.pay-screen-title{
  font-family:var(--font-brand);
  font-size:1.4rem;font-weight:400;
  letter-spacing:.28em;color:var(--text-1);
  text-transform:uppercase;
}
.car-price{font-size:.83rem;color:var(--text-2)}
.car-price strong{color:var(--text-1);font-weight:700}
.car-rent-btn{padding:9px 14px;background:var(--accent);color:#ffffff;border:none;border-radius:var(--r);font-family:var(--font);font-size:.83rem;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .2s}
.car-rent-btn:hover{background:var(--accent-hov)}
.car-rent-btn:disabled{background:var(--silver-dark);cursor:not-allowed}

/* ══ RESERVATION (모던 디자인) ══ */
.res-header{position:relative;z-index:2;width:100%;max-width:480px;display:flex;align-items:center;justify-content:space-between;padding:64px 20px 0}
.res-header-title{font-family:var(--font-brand);font-size:1.2rem;font-weight:500;letter-spacing:.1em;color:var(--text-1)}
.res-body{position:relative;z-index:2;width:100%;max-width:480px;padding:18px 18px 60px;display:flex;flex-direction:column;gap:12px}

/* 차량 카드 */
.res-car-section{background:var(--glass2);border:1px solid var(--border-l);border-radius:var(--r2);padding:14px;display:flex;align-items:center;gap:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 10px rgba(0,0,0,.08);overflow:hidden}
.res-car-img{width:100px;height:60px;border-radius:14px;object-fit:fill;flex-shrink:0;}
.res-car-info{flex:1;min-width:0;overflow:hidden}
.res-car-name{font-size:.95rem;font-weight:700;color:var(--text-1);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-car-sub{font-size:.74rem;color:var(--text-m);margin-bottom:4px}
.res-car-price{font-size:.86rem;font-weight:700;color:var(--accent)}

/* 섹션 박스 */
.res-section{background:var(--glass2);border:1px solid var(--border-l);border-radius:var(--r2);padding:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.06)}
.res-section-label{font-size:.76rem;font-weight:700;letter-spacing:.08em;color:var(--text-m);text-transform:uppercase;margin-bottom:12px;font-family:var(--font)}
.dt-row{display:flex;align-items:flex-start;gap:6px;margin-bottom:8px;width:100%}
.dt-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;cursor:pointer;align-items:center;}
.dt-arrow{color:var(--text-m);font-size:.9rem;flex-shrink:0;padding-top:22px}
.res-label{font-size:.7rem;font-weight:600;color:var(--text-m);text-transform:uppercase;letter-spacing:.04em;text-align:center;width:100%;}
.res-input{width:100%;padding:9px 8px;background:rgba(242,245,250,.9);border:1px solid var(--border);border-radius:var(--r);font-family:var(--font);font-size:.82rem;color:var(--text-1);outline:none;transition:border-color .2s;min-width:0;box-sizing:border-box}
.res-input:focus{border-color:var(--accent-2)}
/* 날짜 표시 박스 */
.res-date-display{
  width:100%;padding:9px 10px;
  background:rgba(242,245,250,.9);
  border:1px solid var(--border);border-radius:var(--r);
  font-family:var(--font);font-size:.78rem;color:var(--text-m);
  transition:border-color .2s,color .2s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-sizing:border-box;user-select:none;line-height:1.4;
  text-align:center;
}
.res-date-display.res-date-set{color:var(--text-1);font-weight:600;}
.dt-col:hover .res-date-display,.dt-col:active .res-date-display{border-color:var(--accent-2);}
.duration-box{padding:10px 12px;background:rgba(35,38,43,.06);border:1px solid var(--border);border-radius:var(--r);font-size:.84rem;color:var(--text-2);display:none;margin-top:4px;line-height:1.7}
.coupon-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.coupon-hint{font-size:.74rem;color:var(--success);margin-top:4px}
.res-inline-btn{padding:10px 14px;background:var(--accent);color:#ffffff;border:none;border-radius:var(--r);font-family:var(--font);font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .2s}
.res-inline-btn:hover{background:var(--accent-hov)}
.point-row-wrap{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.point-avail{font-size:.82rem;color:var(--text-2)}
.point-unit{font-size:.86rem;font-weight:700;color:var(--text-m);flex-shrink:0}

/* 면책상품 */
.insurance-list{display:flex;flex-direction:column;gap:8px}
.insurance-item{padding:13px 14px;border:1.5px solid var(--border);border-radius:var(--r2);cursor:pointer;transition:all .2s;background:rgba(242,245,250,.7)}
.insurance-item.selected{border-color:var(--accent);background:rgba(35,38,43,.06)}
.ins-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.ins-name{font-size:.9rem;font-weight:700;color:var(--text-1)}
.ins-price{font-size:.86rem;font-weight:700;color:var(--accent)}
.ins-desc{font-size:.74rem;color:var(--text-m);line-height:1.5}
.ins-badge{font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:20px;background:rgba(35,38,43,.1);color:var(--text-2);font-family:var(--font)}
.ins-badge.best{background:rgba(35,38,43,.14);color:var(--accent)}

/* 가격 요약 */
.price-summary{background:rgba(35,38,43,.06);border:1px solid var(--border);border-radius:var(--r2);padding:14px;display:none;margin-top:4px}
.price-row{display:flex;justify-content:space-between;font-size:.84rem;padding:4px 0;border-bottom:1px solid var(--border)}
.price-row:last-child{border-bottom:none;margin-top:4px}
.price-row.total{font-size:1rem;font-weight:700;color:var(--text-1)}
.res-submit-btn{width:100%;padding:16px;background:var(--accent);color:#ffffff;border:none;border-radius:var(--r);font-family:var(--font);font-size:1rem;font-weight:700;cursor:pointer;transition:all .22s;box-shadow:0 4px 14px rgba(0,0,0,.2);text-align:center}
.res-submit-btn:hover{background:var(--accent-hov);transform:translateY(-1px)}

/* ══ PAYMENT ══ */
.pay-car-card{display:flex;gap:12px;align-items:flex-start;padding:14px;background:rgba(242,245,250,.8);border:1px solid var(--border-l);border-radius:var(--r2);margin-bottom:12px}
.pay-car-img{width:120px;height:72px;border-radius:14px;object-fit:fill;flex-shrink:0;}
.pay-car-details{flex:1}
.pay-car-name{font-size:.97rem;font-weight:700;color:var(--text-1);margin-bottom:5px}
.pay-car-meta{display:flex;flex-direction:column;gap:3px;font-size:.74rem;color:var(--text-m)}
.pay-total-row{text-align:right;font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:16px;padding:10px 14px;background:rgba(35,38,43,.05);border-radius:var(--r)}
.pay-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1.5px solid var(--border);border-radius:var(--r2);cursor:pointer;transition:border-color .2s;font-size:.88rem;color:var(--text-1)}
.pay-item:has(input:checked){border-color:var(--accent)}
.pay-icon-text{font-size:1.2rem}

/* ══ DONE ══ */
.done-check-row{display:flex;justify-content:center;margin-bottom:8px}
.done-icon{width:52px;height:52px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#e2e6ea}
.done-title{font-family:var(--font-brand);font-size:1.15rem;font-weight:500;letter-spacing:.06em;color:var(--text-1);text-align:center;margin-bottom:14px}
.done-card{display:flex;flex-direction:column;gap:0;width:100%;}

/* ══ BLACK LABEL 전환 오버레이 ══ */
.bl-transition-overlay{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .7s ease}
.bl-transition-overlay.show{opacity:1;pointer-events:all}
.bl-transition-content{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.bl-transition-logo{font-family:'Oswald',sans-serif;font-size:2.4rem;font-weight:500;letter-spacing:.32em;color:#c8a96e;opacity:0;transform:translateY(22px);transition:opacity .8s ease .4s,transform .8s ease .4s}
.bl-transition-overlay.show .bl-transition-logo{opacity:1;transform:translateY(0)}
.bl-transition-diamonds{display:flex;gap:14px;align-items:center}
.bl-diamond{width:10px;height:10px;background:#c8a96e;transform:rotate(45deg) scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.bl-transition-overlay.show .bl-diamond:nth-child(1){transform:rotate(45deg) scale(1);transition-delay:.9s}
.bl-transition-overlay.show .bl-diamond:nth-child(2){transform:rotate(45deg) scale(1.4);transition-delay:1.05s}
.bl-transition-overlay.show .bl-diamond:nth-child(3){transform:rotate(45deg) scale(1);transition-delay:1.2s}
.bl-transition-sub{font-family:'Oswald',sans-serif;font-size:.72rem;font-weight:400;letter-spacing:.52em;color:rgba(200,169,110,.55);opacity:0;transition:opacity .7s ease 1.3s}
.bl-transition-overlay.show .bl-transition-sub{opacity:1}

/* ══ BLACK LABEL ══ */
/* 블랙라벨 배경 */
.bl-screen-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 35% at 50% 0%,rgba(200,169,110,.12) 0%,transparent 60%),
    radial-gradient(ellipse 35% 25% at 90% 85%,rgba(200,169,110,.06) 0%,transparent 55%),
    #1a1c20;
}
.bl-header{position:relative;z-index:2;width:100%;max-width:480px;display:flex;align-items:center;justify-content:center;padding:52px 22px 0}
.bl-title{font-family:var(--font-brand);font-size:1.3rem;font-weight:500;letter-spacing:.2em;color:#c8a96e;text-shadow:0 0 24px rgba(200,169,110,.35);}
.bl-body{position:relative;z-index:2;width:100%;max-width:480px;padding:12px 18px 60px}
.bl-desc{font-size:.8rem;color:rgba(200,169,110,.55);text-align:center;line-height:1.7;margin-bottom:18px;letter-spacing:.02em}
.bl-car-list{display:flex;flex-direction:column;gap:14px}
.bl-car-card{
  display:flex;flex-direction:column;
  background:#1a1c20;
  border:1px solid rgba(200,169,110,.22);
  border-radius:var(--r2);overflow:hidden;cursor:pointer;
  transition:all .28s cubic-bezier(.4,0,.2,1);
  box-shadow:0 4px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(200,169,110,.12);
}
.bl-car-card:hover{transform:translateY(-3px);border-color:rgba(200,169,110,.45);box-shadow:0 8px 32px rgba(0,0,0,.55),inset 0 1px 0 rgba(200,169,110,.2);}
.bl-car-img{width:100%;height:140px;object-fit:fill;flex-shrink:0;background:#1a1c20;border-bottom:1px solid rgba(200,169,110,.15);}
.bl-car-info{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0;overflow:hidden;}
.bl-car-name{font-family:var(--font-brand);font-size:1.02rem;font-weight:500;letter-spacing:.05em;color:#e8d5a8;margin-bottom:2px;}
.bl-car-options{font-size:.7rem;color:rgba(200,169,110,.58);line-height:1.7;word-break:keep-all;overflow-wrap:break-word;border-top:1px solid rgba(200,169,110,.12);padding-top:8px;margin-top:2px;}
.bl-car-price{font-family:var(--font-brand);font-size:.95rem;font-weight:500;color:#c8a96e;letter-spacing:.04em;}
.bl-car-area{font-size:.68rem;color:rgba(200,169,110,.4);margin-top:0;}
.bl-rent-btn{width:100%;padding:11px;margin-top:8px;background:linear-gradient(135deg,rgba(200,169,110,.18) 0%,rgba(180,148,80,.12) 100%);border:1px solid rgba(200,169,110,.35);border-radius:var(--r);font-family:var(--font-brand);font-size:.86rem;font-weight:500;letter-spacing:.1em;color:#c8a96e;cursor:pointer;transition:all .22s;text-align:center;}
.bl-rent-btn:hover{background:rgba(200,169,110,.28);border-color:rgba(200,169,110,.6);}
.bl-rent-btn:active{transform:scale(.98);}
#black-label-screen .back-bottom-btn{border-color:rgba(200,169,110,.25)!important;color:rgba(200,169,110,.65)!important;}
#black-label-screen .back-bottom-btn:hover{border-color:rgba(200,169,110,.5)!important;color:#c8a96e!important;}
.bl-mode{background:#1a1c20!important;color:#e8d5a8!important;}
.bl-mode .metal-bg{background:#1a1c20!important;}
.bl-mode .res-header{background:transparent!important;border-bottom:1px solid rgba(200,169,110,.15)!important;}
.bl-mode .res-body{background:#1a1c20!important;}
.bl-mode .res-header-title{color:#c8a96e!important;letter-spacing:.12em;font-family:var(--font-brand)!important;}
.bl-mode .pay-screen-title{color:#c8a96e!important;letter-spacing:.12em;font-family:var(--font-brand)!important;}
.bl-mode .res-car-section,.bl-mode .res-section,.bl-mode .form-container{background:#212328!important;border-color:rgba(200,169,110,.18)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.bl-mode .res-car-name,.bl-mode .res-section-label,.bl-mode .res-car-price{color:#e8d5a8!important;}
.bl-mode .res-car-sub,.bl-mode .res-label{color:rgba(200,169,110,.55)!important;}
.bl-mode .res-date-display{background:#212328!important;border-color:rgba(200,169,110,.18)!important;color:rgba(200,169,110,.5)!important;}
.bl-mode .res-date-display.res-date-set{color:#c8a96e!important;font-weight:700!important;}
.bl-mode .dt-col:hover .res-date-display{border-color:rgba(200,169,110,.55)!important;}
.bl-mode .insurance-item{background:#212328!important;border-color:rgba(200,169,110,.18)!important;}
.bl-mode .insurance-item.selected{border-color:#c8a96e!important;background:rgba(200,169,110,.1)!important;}
.bl-mode .ins-name{color:#e8d5a8!important;}
.bl-mode .ins-price{color:#c8a96e!important;}
.bl-mode .ins-desc{color:rgba(200,169,110,.5)!important;}
.bl-mode .ins-badge{color:rgba(200,169,110,.7)!important;background:rgba(200,169,110,.1)!important;}
.bl-mode .res-input,.bl-mode .form-input{background:#212328!important;border-color:rgba(200,169,110,.18)!important;color:#e8d5a8!important;}
.bl-mode .res-input::placeholder,.bl-mode .form-input::placeholder{color:rgba(200,169,110,.3)!important;}
.bl-mode .res-submit-btn,.bl-mode .submit-btn{background:linear-gradient(135deg,rgba(200,169,110,.28),rgba(180,148,80,.18))!important;border:1px solid rgba(200,169,110,.45)!important;color:#c8a96e!important;font-family:var(--font-brand)!important;letter-spacing:.1em!important;}
.bl-mode .res-submit-btn:hover,.bl-mode .submit-btn:hover{background:rgba(200,169,110,.38)!important;border-color:#c8a96e!important;}
.bl-mode .back-bottom-btn{border-color:rgba(200,169,110,.25)!important;color:rgba(200,169,110,.6)!important;}
.bl-mode .back-bottom-btn:hover{border-color:rgba(200,169,110,.5)!important;color:#c8a96e!important;}
.bl-mode .price-summary{background:rgba(24,26,30,.95)!important;border-color:rgba(200,169,110,.18)!important;}
.bl-mode .price-row{color:rgba(200,169,110,.65)!important;}
.bl-mode .price-row.total{border-top-color:rgba(200,169,110,.2)!important;}
.bl-mode .price-row.total span:last-child{color:#c8a96e!important;font-size:1rem!important;}
.bl-mode .done-outer{background:#212328!important;border-color:rgba(200,169,110,.18)!important;}
.bl-mode .done-icon{background:linear-gradient(135deg,#c8a96e,#a07840)!important;color:#0a0c0e!important;}
.bl-mode .done-title{color:#e8d5a8!important;font-family:var(--font-brand)!important;letter-spacing:.1em!important;}
.bl-mode .done-info-row .di-label{color:rgba(200,169,110,.5)!important;}
.bl-mode .done-info-row span:last-child,.bl-mode .done-info-row strong{color:#e8d5a8!important;}
.bl-mode .done-car-img{background:rgba(24,26,30,.95)!important;border:1px solid rgba(200,169,110,.18)!important;}
.bl-mode .duration-box{background:rgba(200,169,110,.06)!important;border-color:rgba(200,169,110,.15)!important;color:rgba(200,169,110,.8)!important;}
.bl-mode .point-avail,.bl-mode .point-unit{color:rgba(200,169,110,.6)!important;}
.bl-mode .res-inline-btn{background:linear-gradient(135deg,rgba(200,169,110,.22),rgba(180,148,80,.15))!important;border:1px solid rgba(200,169,110,.4)!important;color:#c8a96e!important;}
.bl-mode .res-inline-btn:hover{background:rgba(200,169,110,.35)!important;}
.bl-mode .check-wrap{color:rgba(200,169,110,.7)!important;}
.bl-mode .check-custom{background:rgba(24,26,30,.95)!important;border-color:rgba(200,169,110,.3)!important;}
.bl-mode .check-wrap input:checked+.check-custom{background:rgba(200,169,110,.8)!important;border-color:#c8a96e!important;}
.bl-mode .coupon-hint{color:rgba(200,169,110,.7)!important;}
.bl-mode .pay-car-card{background:rgba(24,26,30,.95)!important;border-color:rgba(200,169,110,.2)!important;}
.bl-mode .pay-car-name{color:#e8d5a8!important;font-family:var(--font-brand)!important;}
.bl-mode .pay-car-meta{color:rgba(200,169,110,.55)!important;}
.bl-mode .pay-car-meta span{color:rgba(200,169,110,.55)!important;}
.bl-mode #pay-total-row{color:#c8a96e!important;font-weight:700!important;}
.bl-mode #card-num,.bl-mode #card-exp,.bl-mode #card-cvc{background:rgba(24,26,30,.95)!important;border-color:rgba(200,169,110,.2)!important;color:#e8d5a8!important;}
.bl-mode .pay-item{background:rgba(24,26,30,.95)!important;border-color:rgba(200,169,110,.22)!important;color:#e8d5a8!important;}
.bl-mode .pay-item:has(input:checked){border-color:#c8a96e!important;background:rgba(200,169,110,.08)!important;}
.bl-mode .pay-icon-text{filter:brightness(1.3);}
.bl-mode .input-label{color:rgba(200,169,110,.6)!important;}
.bl-mode .pay-section-title,.bl-mode h4{color:rgba(200,169,110,.7)!important;}
.bl-drum-mode .drum-sheet{background:#1a1c20!important;border-top:1px solid rgba(200,169,110,.12)!important;}
.bl-drum-mode .drum-header{border-bottom-color:rgba(200,169,110,.15)!important;}
.bl-drum-mode .drum-title{color:#e8d5a8!important;}
.bl-drum-mode .drum-confirm-btn{background:rgba(200,169,110,.2)!important;color:#c8a96e!important;border:1px solid rgba(200,169,110,.4)!important;}
.bl-drum-mode .drum-confirm-btn:active{background:rgba(200,169,110,.38)!important;}
.bl-drum-mode .drum-item{color:rgba(200,169,110,.22)!important;}
.bl-drum-mode .drum-item.far2{color:rgba(200,169,110,.35)!important;}
.bl-drum-mode .drum-item.near{color:rgba(200,169,110,.62)!important;}
.bl-drum-mode .drum-item.selected{color:#c8a96e!important;}
.bl-drum-mode .drum-label{color:rgba(200,169,110,.5)!important;}
.bl-drum-mode .drum-selector{border-color:rgba(200,169,110,.18)!important;background:rgba(200,169,110,.03)!important;}
.bl-drum-mode .drum-fade-top{background:linear-gradient(to bottom,#1a1c20,transparent)!important;}
.bl-drum-mode .drum-fade-bot{background:linear-gradient(to top,#1a1c20,transparent)!important;}
.bl-mode ~ .drum-overlay .drum-sheet{background:#1a1c20!important;border-top:1px solid rgba(200,169,110,.12)!important;}
.bl-mode ~ .drum-overlay .drum-item.selected{color:#c8a96e!important;}
.bl-mode ~ .drum-overlay .drum-fade-top{background:linear-gradient(to bottom,#1a1c20,transparent)!important;}
.bl-mode ~ .drum-overlay .drum-fade-bot{background:linear-gradient(to top,#1a1c20,transparent)!important;}

/* ══ 컨트롤러 레이아웃 추가 ══ */
.ctrl-close-bar{width:100%;height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;background:rgba(240,244,250,0);flex-shrink:0;}
.ctrl-close-bar::before{content:'';display:block;width:40px;height:4px;background:rgba(24,25,28,.18);border-radius:3px;}
.ctrl-close-bar:hover::before{background:rgba(24,25,28,.35);}
.ctrl-btn-wrap{padding:8px 12px 10px;display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;box-sizing:border-box;}
.ctrl-info-section{margin:0 16px;padding:8px 0 10px;border-bottom:1px solid var(--border);}
.ctrl-info-sub{font-size:.68rem;color:var(--text-m);margin-top:2px;line-height:1.4;}
.ctrl-extend-badge{display:inline-block;margin-top:3px;font-size:.62rem;font-weight:700;color:#1d7a3a;background:rgba(29,122,58,.1);padding:2px 7px;border-radius:10px;}
.ctrl-sq-disabled{opacity:.32;pointer-events:none;filter:grayscale(.5);}
.ctrl-sq-unlock{border-color:rgba(29,122,58,.25);background:rgba(29,122,58,.04);}
.ctrl-sq-unlock:hover{border-color:rgba(29,122,58,.5);background:rgba(29,122,58,.1);}
.ctrl-sq-lock{border-color:rgba(91,120,200,.25);background:rgba(91,120,200,.04);}
.ctrl-sq-lock:hover{border-color:rgba(91,120,200,.5);background:rgba(91,120,200,.08);}

/* ══ MY RESERVATION 카드 ══ */
.my-res-card{background:var(--glass2);border:1px solid var(--border-l);border-radius:var(--r2);padding:14px 16px;margin-bottom:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.07);}
.my-res-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.my-res-no{font-family:var(--font-brand);font-size:.82rem;font-weight:500;letter-spacing:.05em;color:var(--text-1);}
.my-res-status{font-size:.68rem;font-weight:700;padding:3px 9px;border-radius:20px;}
.my-res-car-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.my-res-img{width:80px;height:48px;border-radius:14px;object-fit:fill;flex-shrink:0;}
.my-res-car-name{font-size:.92rem;font-weight:700;color:var(--text-1);margin-bottom:2px;}
.my-res-car-sub{font-size:.72rem;color:var(--text-m);}
.my-res-detail{display:flex;flex-direction:column;gap:3px;}
.my-res-row{display:flex;justify-content:space-between;font-size:.8rem;padding:3px 0;border-bottom:1px solid var(--border);}
.my-res-row:last-child{border-bottom:none;}
.my-res-label{color:var(--text-m);}
.my-res-value{color:var(--text-1);font-weight:600;}
.my-res-total{color:var(--accent);font-weight:700;}
.detail-btn{width:100%;margin-top:10px;padding:10px;background:rgba(35,38,43,.06);border:1px solid var(--border);border-radius:var(--r);font-family:var(--font);font-size:.82rem;font-weight:700;color:var(--text-1);cursor:pointer;transition:all .2s;text-align:center;}
.detail-btn:hover{background:rgba(35,38,43,.12);}

/* ══ 누락 클래스 복원 ══ */

/* 컨트롤러 추가 */
.ctrl-car-name{font-family:var(--font-brand);font-size:.94rem;font-weight:500;letter-spacing:.04em;color:var(--text-1);}
.ctrl-timer{font-family:var(--font-brand);font-size:1.4rem;font-weight:500;color:var(--p1-accent-d);letter-spacing:.06em;text-align:right;}
.ctrl-notice{text-align:center;padding:5px 16px 6px;font-size:.7rem;color:var(--text-m);font-family:var(--font);line-height:1.5;}
.home-ctrl-overlay{align-items:flex-end;}
.home-ctrl-box{border-radius:var(--r2) var(--r2) 0 0;background:#f0f3f7;padding:0;overflow:hidden;max-width:360px!important;width:100%;margin:0 auto;}

/* 반납확인·대체주차·시간연장 — 컨트롤러와 동일한 폭 */
#return-park-modal .modal-box,
#alt-park-modal .modal-box{max-width:360px!important;}
.extend-sheet{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:360px;background:var(--silver-base);border-radius:24px 24px 0 0;z-index:1000;transition:transform .32s cubic-bezier(.4,0,.2,1);padding-bottom:env(safe-area-inset-bottom,16px)}
.ctrl-sq-door{border-color:rgba(29,122,58,.2);background:rgba(29,122,58,.03);}

/* 연장 시트 추가 */
.extend-sheet-bar{width:40px;height:4px;background:rgba(24,25,28,.18);border-radius:3px;margin:10px auto 6px;}
.extend-sheet-handle{display:flex;justify-content:center;align-items:center;padding:4px 0;cursor:pointer;}
.extend-sheet-info{font-size:.8rem;color:var(--text-m);padding:8px 20px 6px;}
.extend-sheet-btns{display:flex;gap:8px;padding:8px 16px 16px;}
.extend-confirm-box{padding:0 16px 12px;display:none;}
.extend-confirm-box.show{display:block;}
.ext-conf-rows{background:rgba(240,244,250,.7);border-radius:var(--r);padding:10px 14px;margin-bottom:4px;}
.extend-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 16px 12px;}
.ext-conf-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:.82rem;border-bottom:1px solid rgba(0,0,0,.05);}
.ext-conf-row:last-child{border-bottom:none;}
.ext-conf-label{color:var(--text-m);}
.ext-conf-value{color:var(--text-1);font-weight:600;}
.ext-ok-btn{flex:1;padding:12px;background:rgba(29,122,58,.1);border:1px solid rgba(29,122,58,.35);color:#1d7a3a;border-radius:var(--r);font-family:var(--font);font-size:.86rem;font-weight:700;cursor:pointer;transition:all .2s;text-align:center;}
.ext-ok-btn:hover{background:rgba(29,122,58,.18);}
.ext-cancel-btn{flex:1;padding:12px;background:none;border:1px solid var(--border);border-radius:var(--r);font-family:var(--font);font-size:.86rem;color:var(--text-2);cursor:pointer;transition:all .2s;text-align:center;}
.ext-cancel-btn:hover{border-color:var(--silver-dark);}

/* 이벤트 화면 추가 */
/* ══ 이벤트 화면 ══ */
.ev-header{position:relative;z-index:2;width:100%;max-width:480px;display:flex;align-items:center;padding:64px 22px 0;}
.ev-body{position:relative;z-index:2;width:100%;max-width:480px;padding:12px 18px 60px;}
.ev-title-bar{padding:14px 0 16px;}
.ev-main-title{font-family:var(--font-brand);font-size:1.5rem;font-weight:500;letter-spacing:.1em;color:var(--text-1);margin-bottom:4px;}
.ev-sub{font-size:.8rem;color:var(--text-m);}

/* 이벤트 카드 */
.ev-card{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  width:100%;padding:18px 20px;
  border-radius:var(--r2);
  margin-bottom:12px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
  position:relative;overflow:hidden;
}
.ev-card:active{transform:scale(.98);}
.ev-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.28);}
.ev-card-left{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  column-gap:10px;
  row-gap:4px;
  align-items:center;
}
.ev-card-badge{
  grid-column:1;grid-row:1;
  display:inline-block;font-size:.62rem;font-weight:800;
  padding:3px 9px;border-radius:20px;
  background:rgba(255,255,255,.22);color:#fff;
  letter-spacing:.06em;white-space:nowrap;
  align-self:center;
}
.ev-card-badge.new-b{background:rgba(200,169,110,.55);color:#fff;}
.ev-card-badge.gift-b{background:rgba(100,200,120,.45);color:#fff;}
.ev-card-title{
  grid-column:2;grid-row:1;
  font-size:.97rem;font-weight:700;color:#fff;line-height:1.4;
}
.ev-card-period{
  grid-column:2;grid-row:2;
  font-size:.72rem;color:rgba(255,255,255,.65);
}
.ev-card-arrow{font-size:1.6rem;color:rgba(255,255,255,.55);margin-left:12px;font-weight:300;}

/* 이벤트 카드 배경 */
.e1{background:linear-gradient(135deg,#1a3a5c 0%,#1e5082 100%);}
.e2{background:linear-gradient(135deg,#141414 0%,#2c2418 100%);}
.e3{background:linear-gradient(135deg,#1a4a2a 0%,#235e34 100%);}
.e4{background:linear-gradient(135deg,#4a2a1a 0%,#6b3d24 100%);}
.mp-card{background:var(--glass2);border:1px solid var(--border-l);border-radius:var(--r2);overflow:hidden;margin-bottom:10px;}
.mp-empty-card{text-align:center;padding:20px;font-size:.84rem;color:var(--text-m);}

/* 예약확인 추가 */
.myres-body{position:relative;z-index:2;width:100%;max-width:480px;padding:18px 18px 60px;}
.empty-reservation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:14px;}
.empty-icon{font-size:3rem;opacity:.5;}
.empty-text{font-size:.88rem;color:var(--text-m);text-align:center;}

/* 탭 바 */
.tab-bar{display:flex;gap:0;border-radius:var(--r2);overflow:hidden;border:1px solid var(--border);margin-bottom:16px;}
.tab-btn{flex:1;padding:10px 6px;text-align:center;font-size:.84rem;font-weight:600;color:var(--text-m);cursor:pointer;background:none;border:none;font-family:var(--font);transition:all .2s;}
.tab-btn.active{background:var(--accent);color:#ffffff;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* 약관 */
.term-check{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);}
.all-check{font-weight:700;color:var(--text-1);}
.result-box{background:rgba(29,122,58,.08);border:1px solid rgba(29,122,58,.25);border-radius:var(--r);padding:12px 14px;margin-top:10px;font-size:.84rem;font-weight:600;color:#1d7a3a;display:none;}

/* 슬라이드 레이아웃 */
.slide-inner{display:flex;align-items:center;gap:12px;height:100%;}
.slide-text-col{flex:1;min-width:0;}
.slide-img-col{flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.slide-svg{width:80px;height:80px;}

/* 기타 */
.modal-footer{padding:10px 20px 16px;border-top:1px solid var(--border);}
/* 이용/예약 상세 모달 '확인' 버튼: 왼쪽 쏠림 → 가운데 + 화면폭 대칭 */
#usage-detail-modal .modal-footer,#res-detail-modal .modal-footer{display:flex;justify-content:center;gap:10px;}
#usage-detail-modal .modal-footer .submit-btn,#res-detail-modal .modal-footer .submit-btn{flex:1;width:auto;margin:0;max-width:none;}
/* 이용/예약 상세 모달의 확인 버튼: 가운데 정렬 + 화면폭 대칭 */
#usage-detail-modal .modal-footer,#res-detail-modal .modal-footer{display:flex;justify-content:center;gap:10px;}
#usage-detail-modal .modal-footer .submit-btn,#res-detail-modal .modal-footer .submit-btn{flex:1;width:auto;margin:0;}
.home-welcome-text{flex:1;}
.panel-desc{font-size:.78rem;color:var(--text-m);line-height:1.6;margin-bottom:12px;}
.accent{color:var(--accent)!important;}

.ext-conf-total{border-top:1px solid rgba(29,122,58,.2);margin-top:5px;padding-top:6px!important;font-weight:700;}

video::-webkit-media-controls{display:none !important;}
video::-webkit-media-controls-start-playback-button{display:none !important;}
video::-webkit-media-controls-panel{display:none !important;}
#caro-cam-video{object-fit:cover;background:#000;}
/* ── 고객센터 ── */
#cs-screen{
  background:
    radial-gradient(ellipse 80% 50% at 35% 28%,rgba(255,255,255,.38) 0%,transparent 65%),
    linear-gradient(165deg,#dde1e7 0%,#c8cdd4 22%,#b9bec7 42%,#cdd1d8 57%,#d9dde4 100%);
}
.cs-menu-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;
  border-bottom:0.5px solid var(--border);
  font-size:.92rem;color:var(--text-1);
  cursor:pointer;font-weight:500;
  background:var(--glass2);
  transition:background .15s;
}
.cs-menu-item:active{background:rgba(255,255,255,.5);}
.cs-contact-btn{
  width:100%;padding:14px;border:none;border-radius:var(--r);
  font-family:var(--font);font-size:.9rem;font-weight:600;
  cursor:pointer;transition:all .2s;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.cs-accident{ background:var(--accent); color:#e2e6ea; }
.cs-call{ background:linear-gradient(135deg,var(--p1-accent-d),#a07840); color:#18191c; }
.cs-simple{ background:var(--glass2); color:var(--text-1); border:1px solid var(--border-l)!important; }
.cs-chat{ background:var(--accent-2); color:var(--p1-accent-d); border:1px solid rgba(200,169,110,.35)!important; }
/* ══ RENTAL FULLMAP ══ */
.rental-fullmap-screen {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.rental-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  height: 52px;
  background: #cdd1d8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.rental-topbar-back {
  position: absolute;
  left: 12px;
  width: 36px; height: 36px;
  background: none; border: none;
  color: #18191c;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.rental-topbar-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: #18191c;
}
.rental-fullmap {
  position: absolute;
  top: 52px; left: 0; right: 0; bottom: 0;
  z-index: 0;
}
/* ══ CAR BOTTOM STRIP ══ */
.car-bottom-strip {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  background: rgba(255,255,255,.97);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.2);
  max-height: 42vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.car-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid rgba(0,0,0,.07);
  flex-shrink: 0;
}
.car-strip-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px 12px;
  scrollbar-width: none;
  flex: 1;
}
.car-strip-scroll::-webkit-scrollbar { display: none; }
.car-strip-scroll .car-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}
.car-strip-scroll .car-item {
  width: 100% !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}
.car-strip-scroll .car-thumb {
  width: 72px !important;
  height: 46px !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}
.car-strip-scroll .car-info {
  flex: 1 !important;
  min-width: 0 !important;
}
.car-strip-scroll .car-name {
  font-size: .85rem !important;
}
.car-strip-scroll .car-rent-btn {
  width: auto !important;
  padding: 8px 14px !important;
  flex-shrink: 0 !important;
  font-size: .8rem !important;
}
.car-strip-scroll .car-opts,
.car-strip-scroll .car-km-info {
  display: none !important;
}
.car-strip-scroll .car-price-row {
  margin-top: 2px !important;
}
.car-sheet-title {
  font-size: .95rem;
  font-weight: 700;
  color: #18191c;
}
.car-sheet-count {
  font-size: .78rem;
  color: #888;
}
#rental-screen.active .car-bottom-sheet {
  display: flex;
}
/* ══ CAR BOTTOM STRIP ══ */
.car-bottom-strip {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 20;
  background: rgba(255,255,255,.97);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 24px rgba(0,0,0,.2);
  max-height: 42vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.car-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 8px;
  border-bottom: 1px solid rgba(0,0,0,.07);
  flex-shrink: 0;
}
.car-strip-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 12px 12px;
  scrollbar-width: none;
  flex: 1;
}
.car-strip-scroll::-webkit-scrollbar { display: none; }
.car-strip-scroll .car-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
  width: 100% !important;
}
.car-strip-scroll .car-item {
  width: 100% !important;
  flex-direction: row !important;
  align-items: center !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}
.car-strip-scroll .car-thumb {
  width: 72px !important;
  height: 46px !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
}
.car-strip-scroll .car-info {
  flex: 1;
  min-width: 0;
}
.car-strip-scroll .car-name {
  font-size: .85rem !important;
}
.car-strip-scroll .car-rent-btn {
  width: auto !important;
  padding: 8px 14px !important;
  flex-shrink: 0 !important;
  font-size: .8rem !important;
}
.car-strip-scroll .car-opts,
.car-strip-scroll .car-km-info {
  display: none !important;
}
.car-strip-scroll .car-price-row {
  margin-top: 2px !important;
}
/* ══ MYPAGE NEW ══ */
.mpn-topbar{
  position:relative;z-index:2;
  width:100%;max-width:480px;
  display:flex;align-items:center;justify-content:center;
  padding:56px 22px 0;
}
.mpn-brand{
  font-family:var(--font-brand);
  font-size:1rem;font-weight:500;
  letter-spacing:.18em;color:var(--text-1);
}
.mpn-body{
  position:relative;z-index:2;
  width:100%;max-width:480px;
  padding:14px 0 0;
}
.mpn-profile{
  display:flex;align-items:center;gap:16px;
  padding:18px 20px 20px;
  background:var(--glass2);
  border-top:1px solid var(--border-l);
  border-bottom:1px solid var(--border-l);
  margin-bottom:16px;
}
.mpn-avatar{
  width:54px;height:54px;border-radius:50%;
  background:var(--accent-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-brand);font-size:1.5rem;
  color:#e2e6ea;flex-shrink:0;
  border:2px solid rgba(200,208,218,.35);
  box-shadow:0 2px 10px rgba(0,0,0,.14);
}
.mpn-profile-info{flex:1;min-width:0;}
.mpn-name{
  font-size:.98rem;font-weight:700;
  color:var(--text-1);margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mpn-email{
  font-size:.76rem;color:var(--text-m);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mpn-section{margin-bottom:8px;}
.mpn-section-label{
  font-size:.66rem;font-weight:700;
  color:var(--text-m);letter-spacing:.1em;
  text-transform:uppercase;
  padding:10px 20px 6px;
}
.mpn-group{
  background:var(--glass2);
  border-top:1px solid var(--border-l);
  border-bottom:1px solid var(--border-l);
}
.mpn-item{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:15px 20px;
  border-bottom:0.5px solid var(--border);
  cursor:pointer;
  transition:background .14s;
}
.mpn-item-last{border-bottom:none;}
.mpn-item:active{background:rgba(255,255,255,.5);}
.mpn-item-label{
  font-size:.9rem;font-weight:500;
  color:var(--text-1);font-family:var(--font);
}
.mpn-item-arrow{
  font-size:1.2rem;color:var(--text-m);
  font-weight:300;line-height:1;
}
.mpn-item-danger .mpn-item-label{color:var(--error);}

/* ══ ACCOUNT DETAIL ══ */
#account-detail-screen{justify-content:flex-start;align-items:center;}
.mpd-wrap{
  position:relative;z-index:2;
  width:100%;max-width:480px;
  display:flex;flex-direction:column;
  min-height:100vh;
}
.mpd-header{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:56px 16px 0;
  flex-shrink:0;
}
.mpd-back-icon{
  width:40px;height:40px;
  background:var(--glass2);
  border:1px solid var(--border-l);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:var(--text-1);
  cursor:pointer;transition:all .2s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 8px rgba(0,0,0,.08);
}
.mpd-back-icon:hover{
  background:rgba(238,242,247,.9);
  border-color:var(--silver-dark);
}
.mpd-brand{
  font-family:var(--font-brand);
  font-size:.9rem;font-weight:500;
  letter-spacing:.16em;color:var(--text-1);
  text-align:center;flex:1;
}
.mpd-title-row{
  padding:20px 20px 0;
  flex-shrink:0;
}
.mpd-title{
  font-family:var(--font-brand);
  font-size:1.4rem;font-weight:500;
  letter-spacing:.05em;color:var(--text-1);
}
.mpd-content{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  padding:40px 20px;
}
.mpd-empty-wrap{
  display:flex;flex-direction:column;
  align-items:center;gap:14px;
}
.mpd-empty-text{
  font-size:.86rem;color:var(--text-m);text-align:center;
}
.mpd-footer{
  flex-shrink:0;
  padding:12px 20px calc(20px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--border-l);
  background:var(--glass2);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.mpd-back-btn{
  width:100%;padding:14px;
  background:none;
  border:1px solid var(--border);
  border-radius:var(--r);
  font-family:var(--font);font-size:.9rem;
  font-weight:600;color:var(--text-2);
  cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.mpd-back-btn:hover{
  border-color:var(--silver-dark);
  background:rgba(238,242,247,.7);
  color:var(--text-1);
}
/* ===== 이벤트 팝업 좌우 여백 (v5) ===== */
#ev-detail-body {
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}
#ev-detail-body ul,
#ev-detail-body ol {
  padding-left: 18px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  list-style-position: outside !important;
}
#ev-detail-body p {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#ev-detail-body li {
  text-align: left !important;
}

/* ===== 결제 화면 텍스트 중앙 정렬 (일반 + BL) ===== */
#payment-screen .pay-total-row,
#payment-screen #pay-total-row {
  text-align: center !important;
}

#payment-screen .step-heading {
  text-align: center !important;
  width: 100% !important;
}

#payment-screen .pay-select-row,
#payment-screen [onclick*="openPaySheet"] {
  justify-content: center !important;
  text-align: center !important;
}

#payment-screen #pay-selected-label {
  text-align: center !important;
  flex: 1 !important;
  width: 100% !important;
}

#payment-screen .pay-item {
  justify-content: center !important;
  text-align: center !important;
}
/* ═══════════════════════════════════════════════════════════════
   📌 STEP 3 — 카로 모빌리티 고객센터 CSS 추가본

   ✅ 적용 방법: style.css 파일의 맨 아래에 통째로 붙여넣기

   - 기존 디자인 토큰(--text-1, --accent, --border, --r 등) 활용
   - Pretendard / Oswald 폰트 사용
   - 다크 메탈 테마와 완전 호환
═══════════════════════════════════════════════════════════════ */

/* ═══ 공통 wrap (4개 신규 화면 공용) ═══ */
.csd-wrap {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
}
.csd-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.csd-back {
  background: none; border: none;
  color: var(--text-1);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  width: 36px;
  text-align: left;
}
.csd-title {
  flex: 1;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--text-1);
}
.csd-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}
.csd-section-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 12px;
}
.csd-section {
  background: var(--surface, rgba(255,255,255,.04));
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 12px;
}
.csd-section-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 14px;
  padding-left: 10px;
  border-left: 3px solid var(--accent);
}
.csd-small {
  font-size: .74rem;
  color: var(--text-m);
}

/* ═══════════════════════════════════
   1. 고객센터 상세 — 아코디언
═══════════════════════════════════ */
.csd-accordion {
  background: var(--surface, rgba(255,255,255,.04));
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.csd-acc-item {
  border-bottom: 1px solid var(--border);
}
.csd-acc-item:last-child { border-bottom: none; }

.csd-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: .94rem;
  font-weight: 500;
  color: var(--text-1);
  text-align: left;
  transition: background .2s;
}
.csd-acc-head:hover { background: rgba(255,255,255,.03); }
.csd-acc-head.csd-open { background: rgba(255,255,255,.04); }

.csd-acc-head-text {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.csd-acc-num {
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #18191c;
  border-radius: 50%;
  font-family: 'Oswald', sans-serif;
  font-size: .72rem;
  font-weight: 600;
  flex-shrink: 0;
}
.csd-acc-arrow {
  font-size: 1.1rem;
  color: var(--text-m);
  transition: transform .3s ease;
  font-weight: 300;
}
.csd-acc-head.csd-open .csd-acc-arrow {
  transform: rotate(90deg);
  color: var(--accent);
}

.csd-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
  background: rgba(0,0,0,.15);
}
.csd-acc-body.csd-open {
  max-height: 5000px;
}
.csd-acc-inner {
  padding: 4px 20px 20px;
  font-size: .84rem;
  line-height: 1.75;
  color: var(--text-2);
}
.csd-acc-inner .csd-h4 {
  margin: 18px 0 8px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-1);
  padding-left: 10px;
  border-left: 3px solid var(--accent);
}
.csd-acc-inner .csd-h4:first-child { margin-top: 6px; }
.csd-acc-inner p { margin: 0 0 8px; }
.csd-acc-inner ul,
.csd-acc-inner ol {
  margin: 6px 0 12px;
  padding-left: 20px;
}
.csd-acc-inner li { margin-bottom: 4px; }
.csd-acc-inner strong { color: var(--text-1); font-weight: 600; }

.csd-info-box {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 12px 0;
  font-size: .82rem;
  color: var(--text-2);
  line-height: 1.7;
}
.csd-info-box ul { margin: 6px 0 0; padding-left: 18px; }
.csd-info-box.csd-warn {
  background: rgba(184,138,26,.08);
  border-left-color: #b88a1a;
  color: #d8b970;
}
.csd-info-box.csd-warn strong { color: #e5c87f; }
.csd-info-box.csd-error {
  background: rgba(178,58,58,.1);
  border-left-color: #b23a3a;
  color: #e89999;
}
.csd-info-box.csd-error strong { color: #f0aeae; }
.csd-info-box.csd-success {
  background: rgba(29,122,58,.1);
  border-left-color: #1d7a3a;
  color: #88c69b;
}
.csd-info-box.csd-success strong { color: #a3d6b3; }

.csd-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 14px;
  font-size: .8rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.csd-table th,
.csd-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.csd-table th {
  background: rgba(200,169,110,.1);
  font-weight: 600;
  color: var(--text-1);
  font-size: .76rem;
}
.csd-table tr:last-child td { border-bottom: none; }
.csd-table td:last-child {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  color: var(--accent);
  text-align: right;
  white-space: nowrap;
}

.csd-legal {
  margin-top: 16px;
  padding: 10px 12px;
  background: rgba(0,0,0,.2);
  border-left: 2px solid var(--text-m);
  border-radius: 4px;
  font-size: .72rem;
  color: var(--text-m);
  line-height: 1.6;
}

.csd-step-list {
  counter-reset: csd-step;
  list-style: none;
  padding: 0;
  margin: 10px 0;
}
.csd-step-list li {
  counter-increment: csd-step;
  position: relative;
  padding: 10px 0 10px 20px;
  border-bottom: 1px dashed var(--border);
}
.csd-step-list li:last-child { border-bottom: none; }
.csd-step-list li::before {
  /* ★ FIX: 큰 검은 원 → 작은 불릿 점(8px)으로 축소 */
  content: '';
  position: absolute;
  left: 2px; top: 17px;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
}
.csd-step-title {
  font-weight: 600;
  color: var(--text-1);
  display: block;
  margin-bottom: 2px;
  font-size: .85rem;
}

/* ═══════════════════════════════════
   2. 사고 접수 — 긴급 배너 / 폼
═══════════════════════════════════ */
.csd-emergency {
  background: linear-gradient(135deg, #b23a3a 0%, #8a2424 100%);
  color: #fff;
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(178,58,58,.3);
}
.csd-emergency-title {
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 6px;
}
.csd-emergency-desc {
  font-size: .82rem;
  line-height: 1.6;
  opacity: .95;
}
.csd-emergency-desc .csd-small {
  color: rgba(255,255,255,.7);
  font-size: .72rem;
}
.csd-em-call {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.csd-em-call a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .86rem;
  font-family: var(--font);
}
.csd-em-call a:hover { background: rgba(255,255,255,.28); }

/* 라디오/체크 그룹 */
.csd-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.csd-radio-item,
.csd-check-item {
  flex: 1;
  min-width: 90px;
  position: relative;
}
.csd-radio-item input,
.csd-check-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.csd-radio-item label,
.csd-check-item label {
  display: block;
  padding: 10px 8px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  text-align: center;
  font-family: var(--font);
  font-size: .84rem;
  color: var(--text-2);
  cursor: pointer;
  transition: all .2s;
}
.csd-radio-item input:checked + label,
.csd-check-item input:checked + label {
  background: var(--accent);
  color: #18191c;
  border-color: var(--accent);
  font-weight: 600;
}

.csd-conditional {
  display: none;
  margin-top: 10px;
}
.csd-conditional.csd-active { display: block; }

.csd-textarea {
  min-height: 100px !important;
  resize: vertical;
  line-height: 1.6;
  font-family: var(--font);
}

/* 파일 업로드 */
.csd-file-upload {
  display: block;
  padding: 18px 14px;
  background: rgba(255,255,255,.04);
  border: 2px dashed var(--border);
  border-radius: var(--r);
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.csd-file-upload:hover {
  border-color: var(--accent);
  background: rgba(200,169,110,.06);
}
.csd-file-upload input { display: none; }
.csd-file-text {
  display: block;
  color: var(--text-2);
  font-size: .86rem;
  margin-bottom: 4px;
}
.csd-file-text strong { color: var(--text-1); }
.csd-file-hint {
  display: block;
  font-size: .72rem;
  color: var(--text-m);
}
.csd-file-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.csd-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  background: rgba(200,169,110,.1);
  border: 1px solid rgba(200,169,110,.3);
  border-radius: 999px;
  font-size: .76rem;
  color: var(--text-1);
}
.csd-file-chip button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-m);
  padding: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: .9rem;
}
.csd-file-chip button:hover {
  background: rgba(178,58,58,.2);
  color: #f0aeae;
}

/* 하단 제출 바 */
.csd-submit-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent 0%, rgba(24,25,28,.9) 30%, var(--surface, #1a1d22) 100%);
  z-index: 5;
}

/* ═══════════════════════════════════
   3. 간편 문의 — 탭, FAQ, 동의
═══════════════════════════════════ */
.csd-tabs {
  display: flex;
  background: var(--surface, rgba(255,255,255,.04));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.csd-tab-btn {
  flex: 1;
  padding: 13px 8px;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: .86rem;
  color: var(--text-m);
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: color .2s;
}
.csd-tab-btn.csd-tab-active {
  color: var(--text-1);
  font-weight: 700;
}
.csd-tab-btn.csd-tab-active::after {
  content: '';
  position: absolute;
  left: 16%; right: 16%; bottom: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}
.csd-pane { display: none; }
.csd-pane.csd-pane-active { display: block; }

.csd-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2367707c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px !important;
}

.csd-char-count {
  text-align: right;
  font-size: .72rem;
  color: var(--text-m);
  margin-top: 4px;
}

/* 동의 체크박스 */
.csd-agree-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
}
.csd-agree-row input { display: none; }
.csd-agree-box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}
.csd-agree-row input:checked + .csd-agree-box {
  background: var(--accent);
  border-color: var(--accent);
}
.csd-agree-row input:checked + .csd-agree-box::after {
  content: '✓';
  color: #18191c;
  font-size: .85rem;
  font-weight: 700;
}
.csd-agree-text {
  font-size: .82rem;
  color: var(--text-2);
  line-height: 1.4;
}
.csd-agree-text strong { color: var(--text-1); }

/* FAQ */
.csd-faq-item {
  background: var(--surface, rgba(255,255,255,.04));
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 8px;
  overflow: hidden;
}
.csd-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
}
.csd-q-mark {
  width: 22px;
  height: 22px;
  background: var(--accent);
  color: #18191c;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: .7rem;
  flex-shrink: 0;
}
.csd-faq-text { flex: 1; }
.csd-faq-arr {
  font-size: .9rem;
  color: var(--text-m);
  transition: transform .3s;
  flex-shrink: 0;
}
.csd-faq-q.csd-open .csd-faq-arr {
  transform: rotate(180deg);
  color: var(--accent);
}
.csd-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
  background: rgba(0,0,0,.2);
}
.csd-faq-a.csd-open { max-height: 600px; }
.csd-faq-a-inner {
  padding: 4px 16px 16px 48px;
  font-size: .82rem;
  line-height: 1.75;
  color: var(--text-2);
}
.csd-faq-a-inner strong { color: var(--text-1); }

/* 빈 상태 */
.csd-empty {
  text-align: center;
  padding: 60px 20px;
}
.csd-empty-icon {
  font-size: 2.8rem;
  opacity: .4;
  margin-bottom: 12px;
}
.csd-empty-text {
  font-size: .92rem;
  color: var(--text-1);
  font-weight: 700;
  margin-bottom: 6px;
}
.csd-empty-sub {
  font-size: .76rem;
  color: var(--text-m);
  line-height: 1.6;
}

/* ═══════════════════════════════════
   4. 채팅 상담
═══════════════════════════════════ */
.csd-chat-wrap {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
}
.csd-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.csd-agent-avatar {
  width: 40px; height: 40px;
  background: var(--accent);
  color: #18191c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
  position: relative;
}
.csd-status-dot {
  position: absolute;
  bottom: 1px; right: 1px;
  width: 11px; height: 11px;
  background: #2e6a3a;
  border: 2px solid #18191c;
  border-radius: 50%;
}
.csd-agent-info {
  flex: 1;
  min-width: 0;
}
.csd-agent-name {
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-1);
}
.csd-agent-status {
  font-size: .72rem;
  color: #4caf6c;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}
.csd-agent-status::before {
  content: '';
  width: 5px; height: 5px;
  background: #4caf6c;
  border-radius: 50%;
}
.csd-icon-btn {
  width: 36px; height: 36px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-2);
  border-radius: 50%;
  font-size: 1rem;
}
.csd-icon-btn:hover { background: rgba(255,255,255,.06); }

.csd-info-banner {
  background: linear-gradient(135deg, rgba(184,138,26,.2) 0%, rgba(154,116,56,.2) 100%);
  border-bottom: 1px solid rgba(184,138,26,.3);
  color: #d8b970;
  padding: 8px 14px;
  font-size: .74rem;
  text-align: center;
  flex-shrink: 0;
}
.csd-info-banner.csd-hidden { display: none; }

.csd-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.csd-messages::-webkit-scrollbar { width: 4px; }
.csd-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.15);
  border-radius: 4px;
}

.csd-day-divider {
  text-align: center;
  font-size: .72rem;
  color: var(--text-m);
  margin: 8px 0;
}
.csd-day-divider span {
  background: rgba(255,255,255,.06);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.csd-msg {
  display: flex;
  gap: 8px;
  max-width: 85%;
  animation: csdFadeUp .3s ease;
}
@keyframes csdFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.csd-msg.csd-agent-msg { align-self: flex-start; }
.csd-msg.csd-user-msg {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.csd-msg-avatar {
  width: 30px; height: 30px;
  background: var(--accent);
  color: #18191c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: .82rem;
  flex-shrink: 0;
  align-self: flex-end;
}
.csd-msg.csd-user-msg .csd-msg-avatar { display: none; }
.csd-msg-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.csd-msg.csd-user-msg .csd-msg-content { align-items: flex-end; }
.csd-msg-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: .86rem;
  line-height: 1.55;
  word-break: break-word;
}
.csd-msg.csd-agent-msg .csd-msg-bubble {
  background: rgba(255,255,255,.08);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.csd-msg.csd-user-msg .csd-msg-bubble {
  background: var(--accent);
  color: #18191c;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.csd-msg-bubble strong {
  font-weight: 700;
}
.csd-msg.csd-agent-msg .csd-msg-bubble strong { color: var(--accent); }
.csd-msg-time {
  font-size: .68rem;
  color: var(--text-m);
  padding: 0 4px;
}
.csd-msg.csd-system {
  align-self: center;
  max-width: 90%;
}
.csd-msg.csd-system .csd-msg-bubble {
  background: rgba(0,0,0,.25);
  color: var(--text-m);
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: .74rem;
  text-align: center;
}

/* 타이핑 인디케이터 */
.csd-typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 3px 0;
}
.csd-typing-dots span {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: csdTyping 1.4s infinite;
}
.csd-typing-dots span:nth-child(2) { animation-delay: .2s; }
.csd-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes csdTyping {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* 빠른 답변 칩 */
.csd-quick-chips {
  padding: 8px 14px 4px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.15);
}
.csd-quick-chips::-webkit-scrollbar { display: none; }
.csd-chip {
  padding: 7px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font);
  font-size: .78rem;
  color: var(--text-1);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .2s;
}
.csd-chip:hover {
  background: var(--accent);
  color: #18191c;
  border-color: var(--accent);
  font-weight: 600;
}

/* 입력 바 */
.csd-input-bar {
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
  background: rgba(0,0,0,.3);
  border-top: 1px solid var(--border);
}
.csd-attach-btn {
  width: 40px; height: 40px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-2);
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.csd-attach-btn:hover { background: rgba(255,255,255,.06); }
.csd-input-wrap {
  flex: 1;
  background: rgba(255,255,255,.08);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  transition: border .2s;
}
.csd-input-wrap:focus-within {
  border-color: var(--accent);
}
.csd-msg-input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font);
  font-size: .88rem;
  color: var(--text-1);
  resize: none;
  max-height: 100px;
  line-height: 1.5;
  padding: 4px 0;
}
.csd-msg-input::placeholder { color: var(--text-m); }
.csd-send-btn {
  width: 40px; height: 40px;
  background: var(--accent);
  color: #18191c;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 700;
  transition: transform .15s;
}
.csd-send-btn:hover { transform: scale(1.05); }
.csd-send-btn:disabled {
  background: var(--text-m);
  cursor: not-allowed;
  transform: none;
}

/* ═══════════════════════════════════
   공통 성공 모달
═══════════════════════════════════ */
.csd-success-icon {
  width: 60px; height: 60px;
  background: #1d7a3a;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 1.8rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(29,122,58,.3);
}
.csd-success-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 8px;
}
.csd-success-text {
  font-size: .86rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 12px;
}
.csd-receipt-num {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  color: var(--accent);
  background: rgba(200,169,110,.1);
  border: 1px solid rgba(200,169,110,.3);
  padding: 8px 14px;
  border-radius: 6px;
  letter-spacing: .08em;
  font-size: .92rem;
}

/* 모바일 대응 */
@media (max-width: 380px) {
  .csd-acc-head { padding: 14px 14px; font-size: .88rem; }
  .csd-acc-inner { padding: 4px 16px 18px; font-size: .82rem; }
  .csd-section { padding: 14px; }
  .csd-radio-item, .csd-check-item { min-width: 80px; }
  .csd-radio-item label, .csd-check-item label { font-size: .8rem; padding: 9px 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   CARO MOBILITY — 고객센터 수정 패치 v1
   적용 위치: style.css 파일 맨 아래에 추가

   수정 사항:
   1. 하단 4개 버튼 색상 통일 (검정 primary)
   2. 카테고리별 별도 표시 (다른 카테고리 숨김)
   3. 상세 화면 글씨/배경 가독성 개선
   4. 채팅 화면 글씨/배경 가독성 개선
═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════
   [수정 1] 하단 4개 버튼 색상 통일
   사고 접수, 전화 상담, 간편 문의, 채팅 상담
   → 모두 동일한 검정 primary 스타일
════════════════════════════════════════════════ */
#cs-screen .cs-contact-btn,
#cs-screen .cs-contact-btn.cs-accident,
#cs-screen .cs-contact-btn.cs-call,
#cs-screen .cs-contact-btn.cs-simple,
#cs-screen .cs-contact-btn.cs-chat {
  background: #18191c !important;
  color: #e8ecf0 !important;
  border: 1px solid #2e3138 !important;
  font-weight: 700;
  letter-spacing: .02em;
  transition: all .2s ease;
}

#cs-screen .cs-contact-btn:hover,
#cs-screen .cs-contact-btn.cs-accident:hover,
#cs-screen .cs-contact-btn.cs-call:hover,
#cs-screen .cs-contact-btn.cs-simple:hover,
#cs-screen .cs-contact-btn.cs-chat:hover {
  background: #2e3138 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

#cs-screen .cs-contact-btn:active {
  transform: translateY(0);
  opacity: .9;
}

/* ════════════════════════════════════════════════
   [수정 2] 카테고리별 별도 표시
   다른 카테고리는 숨김 (csd-acc-hidden 클래스)
════════════════════════════════════════════════ */
#cs-detail-screen .csd-acc-item.csd-acc-hidden {
  display: none !important;
}

/* ════════════════════════════════════════════════
   [수정 3] 상세 화면 글씨/배경 가독성 개선
   메탈 배경에 묻히지 않도록 진한 글씨 + 불투명 배경
════════════════════════════════════════════════ */

/* 상세 화면 전체 배경 (메탈 무늬 위에 약간 불투명 레이어) */
#cs-detail-screen {
  background: linear-gradient(180deg, rgba(245,247,250,.4) 0%, rgba(240,243,247,.55) 100%);
}

/* 아코디언 항목 카드 — 더 불투명하게 */
#cs-detail-screen .csd-acc-item {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(140,148,160,.22) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
  margin-bottom: 14px !important;
  border-radius: 14px !important;
  overflow: hidden;
}

/* 아코디언 헤더 */
#cs-detail-screen .csd-acc-head {
  background: rgba(248,250,253,.95) !important;
  color: #18191c !important;
  font-weight: 700;
}

#cs-detail-screen .csd-acc-head:hover {
  background: rgba(240,244,250,1) !important;
}

#cs-detail-screen .csd-acc-head.csd-open {
  background: rgba(240,244,250,1) !important;
  border-bottom: 1px solid rgba(140,148,160,.18);
}

/* 아코디언 본문 — 진한 배경, 진한 글씨 */
#cs-detail-screen .csd-acc-body {
  background: rgba(255,255,255,.85) !important;
}

#cs-detail-screen .csd-acc-inner {
  color: #18191c !important;
}

#cs-detail-screen .csd-acc-inner p,
#cs-detail-screen .csd-acc-inner li,
#cs-detail-screen .csd-acc-inner div,
#cs-detail-screen .csd-acc-inner span,
#cs-detail-screen .csd-acc-inner td,
#cs-detail-screen .csd-acc-inner th {
  color: #18191c !important;
}

#cs-detail-screen .csd-acc-inner strong {
  color: #000 !important;
  font-weight: 700 !important;
}

/* 섹션 제목 (가입하기, 사고 처리 5단계 등) */
#cs-detail-screen .csd-h4,
#cs-detail-screen .csd-section-title {
  color: #000 !important;
  font-weight: 700 !important;
  border-left: 3px solid #18191c !important;
  padding-left: 8px;
}

/* 정보 박스 */
#cs-detail-screen .csd-info-box {
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(140,148,160,.28) !important;
  color: #18191c !important;
}

#cs-detail-screen .csd-info-box.csd-warn {
  background: rgba(255,247,225,.95) !important;
  border-color: rgba(200,160,30,.5) !important;
  color: #6b4500 !important;
}

#cs-detail-screen .csd-info-box.csd-warn strong {
  color: #6b4500 !important;
}

#cs-detail-screen .csd-info-box.csd-error {
  background: rgba(255,235,235,.95) !important;
  border-color: rgba(200,50,50,.5) !important;
  color: #8b1d1d !important;
}

#cs-detail-screen .csd-info-box.csd-error strong {
  color: #8b1d1d !important;
}

#cs-detail-screen .csd-info-box.csd-success {
  background: rgba(225,245,232,.95) !important;
  border-color: rgba(29,122,58,.5) !important;
  color: #0e5028 !important;
}

#cs-detail-screen .csd-info-box.csd-success strong {
  color: #0e5028 !important;
}

/* 사고 처리 단계 제목 */
#cs-detail-screen .csd-step-title {
  color: #000 !important;
  font-weight: 700 !important;
}

/* 테이블 (보험 보장 범위 등) */
#cs-detail-screen .csd-table {
  background: rgba(255,255,255,.92) !important;
  border-radius: 10px;
  overflow: hidden;
}

#cs-detail-screen .csd-table th {
  background: rgba(232,238,245,.95) !important;
  color: #18191c !important;
  font-weight: 700;
  border-bottom: 1px solid rgba(140,148,160,.3);
}

#cs-detail-screen .csd-table td {
  color: #18191c !important;
  border-bottom: 1px solid rgba(140,148,160,.15);
}

/* 아코디언 화살표 */
#cs-detail-screen .csd-acc-head::after,
#cs-detail-screen .csd-acc-icon {
  color: #18191c !important;
}

/* 카테고리 원형 점 */
#cs-detail-screen .csd-acc-dot,
#cs-detail-screen .csd-acc-head > span:first-child {
  color: #18191c !important;
}

/* 카테고리 페이지 헤더 영역 */
#cs-detail-screen .csd-header,
#cs-detail-screen .csd-page-header {
  background: rgba(255,255,255,.92) !important;
}

#cs-detail-screen .csd-title,
#cs-detail-screen .csd-page-title {
  color: #18191c !important;
}

/* ════════════════════════════════════════════════
   [수정 4] 채팅 화면 가독성 개선
════════════════════════════════════════════════ */

/* 채팅 화면 배경 — 메탈 위 반투명 레이어 */
#chat-screen {
  background: linear-gradient(180deg, rgba(245,247,250,.4) 0%, rgba(240,243,247,.55) 100%);
}

/* 상단 헤더 */
#chat-screen .csd-header,
#chat-screen .csd-page-header {
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(140,148,160,.22) !important;
}

#chat-screen .csd-title,
#chat-screen .csd-page-title {
  color: #18191c !important;
  font-weight: 700 !important;
}

/* "평균 응답 2분 이내" 상태 텍스트 */
#chat-screen .csd-status,
#chat-screen .csd-subtitle {
  color: #1d7a3a !important;
  font-weight: 600 !important;
}

/* 운영시간 안내 배너 — 24시간 운영이므로 항상 숨김 */
#chat-screen #cs-info-banner,
#chat-screen .csd-banner {
  display: none !important;
}

/* 날짜 라벨 (5월 28일) */
#chat-screen .csd-date-label,
#chat-screen #cs-today-label {
  background: rgba(255,255,255,.9) !important;
  color: #18191c !important;
  border: 1px solid rgba(140,148,160,.25) !important;
  font-weight: 600;
}

/* 시스템 메시지 (상담이 시작되었습니다) */
#chat-screen .csd-msg.csd-system .csd-msg-bubble {
  background: rgba(255,255,255,.85) !important;
  color: #44474f !important;
  border: 1px dashed rgba(140,148,160,.4) !important;
  font-weight: 500;
}

/* 상담원 메시지 (왼쪽) */
#chat-screen .csd-msg.csd-agent-msg .csd-msg-bubble {
  background: rgba(255,255,255,.95) !important;
  color: #18191c !important;
  border: 1px solid rgba(140,148,160,.25) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

#chat-screen .csd-msg.csd-agent-msg .csd-msg-bubble strong {
  color: #18191c !important;
}

/* 사용자 메시지 (오른쪽) — 검정 배경에 흰 글씨로 */
#chat-screen .csd-msg.csd-user-msg .csd-msg-bubble {
  background: #18191c !important;
  color: #e8ecf0 !important;
  font-weight: 500;
}

/* 메시지 시간 */
#chat-screen .csd-msg-time {
  color: #44474f !important;
  font-weight: 500;
}

/* 빠른 답변 칩 영역 */
#chat-screen .csd-chips,
#chat-screen .csd-quick-replies {
  background: rgba(255,255,255,.92) !important;
  border-top: 1px solid rgba(140,148,160,.2) !important;
}

#chat-screen .csd-chip {
  background: rgba(248,250,253,.95) !important;
  color: #18191c !important;
  border: 1px solid rgba(140,148,160,.35) !important;
  font-weight: 600;
}

#chat-screen .csd-chip:hover {
  background: rgba(232,238,245,1) !important;
  border-color: rgba(140,148,160,.55) !important;
}

/* 메시지 입력창 영역 */
#chat-screen .csd-input-bar,
#chat-screen .csd-msg-input-wrap {
  background: rgba(255,255,255,.95) !important;
  border-top: 1px solid rgba(140,148,160,.25) !important;
}

#chat-screen .csd-msg-input {
  background: rgba(248,250,253,.95) !important;
  color: #18191c !important;
  border: 1px solid rgba(140,148,160,.35) !important;
}

#chat-screen .csd-msg-input::placeholder {
  color: #888d98 !important;
}

/* 첨부 버튼 */
#chat-screen .csd-attach-btn {
  color: #44474f !important;
}

#chat-screen .csd-attach-btn:hover {
  background: rgba(140,148,160,.15) !important;
  color: #18191c !important;
}

/* 전화 버튼 */
#chat-screen .csd-call-btn,
#chat-screen .csd-icon-btn {
  background: rgba(255,255,255,.85) !important;
  color: #b23a3a !important;
  border: 1px solid rgba(178,58,58,.3) !important;
}

#chat-screen .csd-call-btn:hover,
#chat-screen .csd-icon-btn:hover {
  background: rgba(255,235,235,.95) !important;
}

/* 닫기 버튼 (X) */
#chat-screen .csd-close-btn {
  color: #18191c !important;
}

/* 상담원 아바타 */
#chat-screen .csd-msg-avatar {
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(140,148,160,.25) !important;
}

/* 상태 점 (초록 동그라미) */
#chat-screen .csd-status-dot {
  background: #1d7a3a !important;
  box-shadow: 0 0 8px rgba(29,122,58,.5);
}
/* ═══════════════════════════════════════════
   사고접수 - 체크박스 선택 가독성 개선
═══════════════════════════════════════════ */

/* 선택된 라벨 - 검정 → 연한 회색 */
#accident-screen .csd-check-item input[type="checkbox"]:checked + label,
#accident-screen .csd-check-item input[type="radio"]:checked + label,
#accident-screen .csd-radio-group input:checked + label {
  background: #d8dce2 !important;
  background-color: #d8dce2 !important;
  border: 1px solid #b8bcc4 !important;
  color: #18191c !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════
   고객센터 - 아코디언 펼침 고정 (항상 펼침)
═══════════════════════════════════════════ */

/* 1. 모든 콘텐츠 강제로 펼침 */
#cs-screen .cs-card-body,
#cs-screen .cs-accordion-content,
#cs-screen .cs-content,
#cs-screen .accordion-content,
#cs-screen .accordion-body,
#cs-screen [class*="cs-card"] [class*="content"],
#cs-screen [class*="cs-card"] [class*="body"]:not([class*="header"]),
#cs-screen [class*="collapse"] {
  display: block !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 2. 펼침/접힘 화살표 숨기기 */
#cs-screen .cs-chevron,
#cs-screen .cs-arrow,
#cs-screen .cs-toggle-icon,
#cs-screen .accordion-arrow,
#cs-screen .cs-card-toggle,
#cs-screen [class*="chevron"],
#cs-screen [class*="cs-card"] [class*="arrow"]:not(.back-arrow) {
  display: none !important;
}

/* 3. 헤더 클릭 시 커서 기본값 (눌러도 변화 없음 표시) */
#cs-screen .cs-card-header,
#cs-screen .cs-accordion-header,
#cs-screen [class*="cs-card"] [class*="header"] {
  cursor: default !important;
}

/* ═══════════════════════════════════════════
   고객센터 상세 - 아코디언 항상 펼침 고정
═══════════════════════════════════════════ */

/* 1. 모든 콘텐츠 강제 펼침 */
#cs-detail-screen .csd-acc-body,
#cs-detail-screen .csd-acc-inner {
  display: block !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 2. 펼침/접힘 화살표 숨기기 */
#cs-detail-screen .csd-acc-arrow {
  display: none !important;
}

/* 3. 헤더 클릭 비활성화 (눌러도 변화 없음) */
#cs-detail-screen .csd-acc-head {
  cursor: default !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════
   계정 관리 상세 - 헤더 정리
   (제목을 가운데 / 하단 버튼 제거 / CARO MOBILITY 제거)
═══════════════════════════════════════════ */

/* 1. "CARO MOBILITY" 텍스트 숨기기 */
#account-detail-screen .mpd-brand {
  display: none !important;
}

/* 2. 하단 뒤로가기 버튼 완전 제거 */
#account-detail-screen .mpd-footer {
  display: none !important;
}

/* 3. wrap에 기준점 설정 */
#account-detail-screen .mpd-wrap {
  position: relative !important;
}

/* 4. 헤더 - 뒤로가기 버튼 클릭 가능하도록 z-index */
#account-detail-screen .mpd-header {
  position: relative !important;
  z-index: 2 !important;
}

#account-detail-screen .mpd-back-icon {
  position: relative !important;
  z-index: 3 !important;
}

/* 5. 제목을 헤더 위치로 절대좌표 이동 (가운데) */
#account-detail-screen .mpd-title-row {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 6. 제목 텍스트 스타일 (CARO MOBILITY 자리에 맞춤) */
#account-detail-screen .mpd-title {
  text-align: center !important;
  font-family: 'Pretendard', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--text-1) !important;
  letter-spacing: .02em !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ═══════════════════════════════════════════
   고객센터 하단 버튼 - 모서리 둥글게
═══════════════════════════════════════════ */

#cs-screen .cs-contact-btn,
#cs-screen .cs-accident,
#cs-screen .cs-call,
#cs-screen .cs-simple,
#cs-screen .cs-chat {
  border-radius: 24px !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════════
   채팅 상담 - 디자인 수정 (메탈 테마)
═══════════════════════════════════════════ */

/* ① 상단 상담원 아바타 (검은색 → 연한 회색) */
#chat-screen .csd-agent-avatar {
  background: #e8ecf0 !important;
  background-color: #e8ecf0 !important;
  color: #18191c !important;
  border: 1.5px solid #d0d4dc !important;
  font-weight: 700 !important;
}

#chat-screen .csd-agent-avatar .csd-status-dot {
  background: #1d7a3a !important;
}

/* ② 하단 클립 버튼 중심 정렬 */
#chat-screen .csd-attach-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 40px !important;
  height: 40px !important;
}

#chat-screen .csd-input-bar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ③ 전송 버튼 - 메탈 실버 그라데이션 + 좌측 화살표 */
#chat-screen .csd-send-btn {
  background: linear-gradient(135deg, #6c727d 0%, #3a3f47 100%) !important;
  background-color: #5a6068 !important;
  color: #ffffff !important;
  border: 1px solid #2e3138 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  font-size: 0 !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
}

/* 전송 버튼 아이콘 ➤ → ← 로 교체 */
#chat-screen .csd-send-btn::before {
  content: '←' !important;
  font-size: 1.3rem !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* 호버 시 살짝 밝아짐 */
#chat-screen .csd-send-btn:hover {
  background: linear-gradient(135deg, #7c828d 0%, #4a4f57 100%) !important;
}

/* ═══════════════════════════════════════════
   간편 문의 - FAQ 답변 텍스트 간격 조정
═══════════════════════════════════════════ */

/* 답변 내부 텍스트 - 위아래 여백 균형 */
#inquiry-screen .csd-faq-a-inner {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ═══════════════════════════════════════════
   고객센터 - 큰 검은 점 → 작은 점으로 변경
═══════════════════════════════════════════ */

/* 1. FAQ Q 마크 - 작은 점 */
#inquiry-screen .csd-q-mark {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  background: #18191c !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin-right: 10px !important;
  display: inline-block !important;
}

/* 2. 고객센터 상세 - 번호 ⚫ 작은 점으로 */
#cs-detail-screen .csd-acc-num {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  background: #18191c !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin-right: 10px !important;
  display: inline-block !important;
}

/* ═══════════════════════════════════════════
   고객센터 - 하단 버튼 영역 그림자/배경 제거
═══════════════════════════════════════════ */

/* 하단 제출 바 - 배경/그림자/테두리 모두 제거 */
.csd-submit-bar,
#accident-screen .csd-submit-bar,
#inquiry-screen .csd-submit-bar {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-top: none !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════
   고객센터 - 동의 체크박스 ✓ 표시 추가
═══════════════════════════════════════════ */

/* 체크박스 박스 - 가운데 정렬을 위한 설정 */
.csd-agree-box {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* 체크된 상태 - 흰색 ✓ 표시 추가 */
.csd-agree-row input[type="checkbox"]:checked + .csd-agree-box::after,
#inquiry-screen .csd-agree-row input[type="checkbox"]:checked + .csd-agree-box::after {
  content: '✓' !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CARO MOBILITY — 계정관리 상세 화면 통합 CSS 패치
   범위: 9개 항목 (비밀번호, 휴대폰, 계정연동, 요금제, 결제카드,
        크레딧, 미결제, 할인쿠폰, 혜택&이벤트, 약관 및 정책)
   ※ 회원 탈퇴 제외
═══════════════════════════════════════════════════════════════ */

/* ─── 공통 콘텐츠 컨테이너 ─── */
#account-detail-screen .mpd-content {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px 18px 24px !important;
  display: block !important;
}
#account-detail-screen .mpd-content .mpd-empty-wrap {
  display: none !important;
}

/* ─── 섹션 ─── */
.apd-section {
  background: rgba(255,255,255,.6);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.apd-section-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.apd-section-title-icon {
  font-size: 1rem;
}
.apd-section-desc {
  font-size: .8rem;
  color: var(--text-m);
  line-height: 1.6;
  margin-bottom: 12px;
}

/* ─── 입력 필드 ─── */
.apd-input-group {
  margin-bottom: 12px;
}
.apd-input-label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
}
.apd-input-label .req {
  color: #b23a3a;
  margin-left: 2px;
}
.apd-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,.85);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-family: var(--font);
  font-size: .9rem;
  color: var(--text-1);
  box-sizing: border-box;
  transition: border-color .2s;
}
.apd-input:focus {
  outline: none;
  border-color: rgba(200,169,110,.6);
}
.apd-input:disabled {
  background: rgba(0,0,0,.04);
  color: var(--text-m);
  cursor: not-allowed;
}
.apd-input-hint {
  display: block;
  font-size: .74rem;
  color: var(--text-m);
  margin-top: 6px;
  line-height: 1.5;
}

/* ─── 비밀번호 강도 바 ─── */
.apd-pw-bar {
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,.06);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.apd-pw-bar-fill {
  height: 100%;
  width: 0%;
  transition: width .3s, background .3s;
  border-radius: 2px;
}
.apd-pw-bar-fill.weak { background: #b23a3a; width: 30%; }
.apd-pw-bar-fill.medium { background: #b07d2a; width: 60%; }
.apd-pw-bar-fill.strong { background: #1d7a3a; width: 100%; }

/* ─── 버튼 ─── */
.apd-btn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: var(--r);
  font-family: var(--font);
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.apd-btn-primary {
  background: var(--accent);
  color: #18191c;
}
.apd-btn-primary:hover {
  background: #b89860;
}
.apd-btn-primary:disabled {
  background: rgba(0,0,0,.1);
  color: var(--text-m);
  cursor: not-allowed;
}
.apd-btn-secondary {
  background: rgba(255,255,255,.6);
  border: 1.5px solid var(--border);
  color: var(--text-1);
}
.apd-btn-danger {
  background: rgba(178,58,58,.08);
  border: 1.5px solid rgba(178,58,58,.25);
  color: #b23a3a;
}
.apd-btn-pass {
  background: linear-gradient(135deg, #3182f6, #1a5fd4);
  color: #fff;
}
.apd-btn-pass:disabled {
  background: rgba(49,130,246,.4);
  cursor: not-allowed;
}

/* ─── 행 (라벨 + 값) ─── */
.apd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.apd-row:last-child {
  border-bottom: none;
}
.apd-row-label {
  font-size: .85rem;
  color: var(--text-2);
  font-weight: 600;
}
.apd-row-value {
  font-size: .88rem;
  color: var(--text-1);
  font-weight: 700;
}
.apd-row-value.muted {
  color: var(--text-m);
  font-weight: 500;
}

/* ─── 알림 박스 ─── */
.apd-info {
  background: rgba(29,122,58,.06);
  border: 1px solid rgba(29,122,58,.18);
  border-radius: var(--r);
  padding: 12px 14px;
  font-size: .78rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 12px;
}
.apd-info strong {
  color: #1d7a3a;
  font-weight: 700;
}
.apd-warn {
  background: rgba(176,125,42,.06);
  border: 1px solid rgba(176,125,42,.18);
}
.apd-warn strong {
  color: #b07d2a;
}

/* ─── 법령 근거 ─── */
.apd-legal {
  margin-top: 10px;
  font-size: .72rem;
  color: var(--text-m);
  font-style: italic;
  line-height: 1.5;
  border-top: 1px dashed rgba(0,0,0,.08);
  padding-top: 8px;
}

/* ─── 통신사 선택 ─── */
.apd-carrier-row {
  display: flex;
  gap: 8px;
}
.apd-carrier-btn {
  flex: 1;
  padding: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: rgba(255,255,255,.6);
  font-family: var(--font);
  font-size: .82rem;
  color: var(--text-2);
  cursor: pointer;
  transition: all .2s;
}
.apd-carrier-btn.active {
  border-color: #1d7a3a;
  background: rgba(29,122,58,.08);
  color: #1d7a3a;
  font-weight: 700;
}

/* ─── SNS 연동 ─── */
.apd-sns-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 8px;
}
.apd-sns-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.apd-sns-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}
.apd-sns-icon.kakao { background: #fee500; color: #381e1e; }
.apd-sns-icon.naver { background: #03c75a; }
.apd-sns-icon.google { background: #fff; color: #4285f4; border: 1px solid #ddd; }
.apd-sns-icon.apple { background: #000; }
.apd-sns-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-1);
}
.apd-sns-status {
  font-size: .74rem;
  color: var(--text-m);
  margin-top: 2px;
}
.apd-sns-status.connected {
  color: #1d7a3a;
}
.apd-sns-btn {
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.8);
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  transition: all .2s;
}
.apd-sns-btn.connected {
  background: rgba(178,58,58,.06);
  border-color: rgba(178,58,58,.25);
  color: #b23a3a;
}

/* ─── 요금제 카드 ─── */
.apd-plan {
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.6);
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.apd-plan.current {
  border-color: var(--accent);
  background: rgba(200,169,110,.08);
}
.apd-plan.current::after {
  content: 'CURRENT';
  position: absolute;
  top: 12px; right: 14px;
  font-family: 'Oswald', sans-serif;
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--accent);
  font-weight: 700;
}
.apd-plan-name {
  font-family: 'Oswald', sans-serif;
  font-size: .88rem;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 6px;
}
.apd-plan-price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 8px;
}
.apd-plan-price small {
  font-size: .76rem;
  color: var(--text-m);
  font-weight: 500;
  margin-left: 2px;
}
.apd-plan-desc {
  font-size: .76rem;
  color: var(--text-m);
  line-height: 1.6;
}

/* ─── 카드 ─── */
.apd-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,.7);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
}
.apd-card-item.default {
  border-color: var(--accent);
}
.apd-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.apd-card-icon {
  width: 36px;
  height: 24px;
  border-radius: 4px;
  background: linear-gradient(135deg, #3a3f47, #2e3138);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 700;
  color: var(--p1-accent-d);
  letter-spacing: .04em;
  flex-shrink: 0;
}
.apd-card-num {
  font-family: 'Oswald', sans-serif;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--text-1);
  font-weight: 600;
}
.apd-card-alias {
  font-size: .74rem;
  color: var(--text-m);
  margin-top: 2px;
}
.apd-card-default-badge {
  font-family: 'Oswald', sans-serif;
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--accent);
  font-weight: 700;
  background: rgba(200,169,110,.12);
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 6px;
}

/* ─── 크레딧 박스 ─── */
.apd-credit-box {
  background: linear-gradient(135deg, #2e3138, #18191c);
  color: var(--p1-accent-d);
  border-radius: var(--r);
  padding: 22px 20px;
  text-align: center;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.apd-credit-label {
  font-family: 'Oswald', sans-serif;
  font-size: .72rem;
  letter-spacing: .18em;
  color: rgba(200,169,110,.6);
  margin-bottom: 6px;
}
.apd-credit-amount {
  font-family: 'Oswald', sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--p1-accent-d);
}
.apd-credit-amount small {
  font-size: .9rem;
  color: rgba(200,169,110,.6);
  margin-left: 4px;
}

/* ─── 쿠폰 ─── */
.apd-coupon {
  background: rgba(255,255,255,.7);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.apd-coupon.used,
.apd-coupon.expired {
  opacity: .5;
}
.apd-coupon::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(228,232,238,.9);
  transform: translateY(-50%);
}
.apd-coupon::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(228,232,238,.9);
  transform: translateY(-50%);
}
.apd-coupon-name {
  font-size: .92rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 4px;
}
.apd-coupon-discount {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}
.apd-coupon-meta {
  font-size: .72rem;
  color: var(--text-m);
  line-height: 1.5;
}
.apd-coupon-badge {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: .62rem;
  letter-spacing: .12em;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
  font-weight: 700;
}
.apd-coupon-badge.available {
  background: rgba(29,122,58,.12);
  color: #1d7a3a;
}
.apd-coupon-badge.used {
  background: rgba(0,0,0,.08);
  color: var(--text-m);
}
.apd-coupon-badge.expired {
  background: rgba(178,58,58,.1);
  color: #b23a3a;
}

/* ─── 미결제 ─── */
.apd-unpaid-item {
  background: rgba(178,58,58,.04);
  border: 1px solid rgba(178,58,58,.15);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.apd-unpaid-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 4px;
}
.apd-unpaid-date {
  font-size: .74rem;
  color: var(--text-m);
  margin-bottom: 8px;
}
.apd-unpaid-amount {
  font-family: 'Oswald', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #b23a3a;
  margin-bottom: 10px;
}

/* ─── 토글 스위치 ─── */
.apd-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.apd-toggle-row:last-child {
  border-bottom: none;
}
.apd-toggle-info {
  flex: 1;
}
.apd-toggle-title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 2px;
}
.apd-toggle-desc {
  font-size: .74rem;
  color: var(--text-m);
  line-height: 1.4;
}
.apd-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(0,0,0,.15);
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
  margin-left: 12px;
}
.apd-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.apd-toggle.on {
  background: #1d7a3a;
}
.apd-toggle.on::after {
  transform: translateX(20px);
}

/* ─── 약관 목록 ─── */
.apd-terms-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
  cursor: pointer;
}
.apd-terms-item:last-child {
  border-bottom: none;
}
.apd-terms-name {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-1);
}
.apd-terms-arrow {
  color: var(--text-m);
  font-size: 1rem;
}

/* ─── 빈 상태 ─── */
.apd-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-m);
}
.apd-empty-icon {
  font-size: 2.4rem;
  margin-bottom: 8px;
  opacity: .4;
}
.apd-empty-text {
  font-size: .88rem;
  font-weight: 600;
}
.apd-empty-sub {
  font-size: .76rem;
  margin-top: 4px;
}

/* ─── 탭 ─── */
.apd-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.apd-tab {
  flex: 1;
  padding: 12px;
  background: none;
  border: none;
  font-family: var(--font);
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-m);
  cursor: pointer;
  position: relative;
  transition: color .2s;
}
.apd-tab.active {
  color: var(--text-1);
  font-weight: 700;
}
.apd-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%; right: 20%;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
}

/* ─── 결과 표시 ─── */
.apd-result {
  padding: 12px 14px;
  border-radius: var(--r);
  font-size: .86rem;
  font-weight: 700;
  text-align: center;
  margin-top: 10px;
}
.apd-result.success {
  background: rgba(29,122,58,.08);
  color: #1d7a3a;
  border: 1px solid rgba(29,122,58,.2);
}
.apd-result.error {
  background: rgba(178,58,58,.08);
  color: #b23a3a;
  border: 1px solid rgba(178,58,58,.2);
}

/* ═══════════════════════════════════════════
   결제 수단 시트 - 확인 버튼만 차콜 블랙
═══════════════════════════════════════════ */
#pay-sheet-overlay button[onclick*="confirmPaySheet"] {
  background: #18191c !important;
  background-color: #18191c !important;
  color: #e8ecf0 !important;
  border: 1px solid #2e3138 !important;
  font-weight: 700 !important;
}

#pay-sheet-overlay button[onclick*="confirmPaySheet"]:hover {
  background: #2e3138 !important;
}

/* ═══════════════════════════════════════════
   계정관리 모든 버튼 → 차콜 블랙 통일
═══════════════════════════════════════════ */

/* 메인/보조/PASS/위험 버튼 모두 통일 */
#account-detail-screen .apd-btn,
#account-detail-screen .apd-btn-primary,
#account-detail-screen .apd-btn-secondary,
#account-detail-screen .apd-btn-pass,
#account-detail-screen .apd-btn-danger {
  background: #18191c !important;
  background-color: #18191c !important;
  color: #e8ecf0 !important;
  border: 1px solid #2e3138 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
}

/* 호버 효과 */
#account-detail-screen .apd-btn:hover,
#account-detail-screen .apd-btn-primary:hover,
#account-detail-screen .apd-btn-secondary:hover,
#account-detail-screen .apd-btn-pass:hover,
#account-detail-screen .apd-btn-danger:hover {
  background: #2e3138 !important;
  background-color: #2e3138 !important;
}

/* 비활성화 상태 */
#account-detail-screen .apd-btn:disabled,
#account-detail-screen .apd-btn-primary:disabled,
#account-detail-screen .apd-btn-pass:disabled {
  background: rgba(0,0,0,.15) !important;
  background-color: rgba(0,0,0,.15) !important;
  color: rgba(0,0,0,.4) !important;
  border-color: rgba(0,0,0,.2) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* SNS 연결/해제 버튼 */
#account-detail-screen .apd-sns-btn {
  background: #18191c !important;
  background-color: #18191c !important;
  color: #e8ecf0 !important;
  border: 1px solid #2e3138 !important;
  font-weight: 700 !important;
}

#account-detail-screen .apd-sns-btn.connected {
  background: #18191c !important;
  background-color: #18191c !important;
  color: var(--p1-accent-d) !important;
  border: 1px solid #2e3138 !important;
}

/* 충전 금액 버튼 (10k/30k/50k 등) */
#account-detail-screen [data-charge] {
  background: #18191c !important;
  background-color: #18191c !important;
  color: #e8ecf0 !important;
  border: 1px solid #2e3138 !important;
  font-weight: 700 !important;
}

/* 통신사 선택 버튼 (활성화 상태) */
#account-detail-screen .apd-carrier-btn.active {
  background: #18191c !important;
  background-color: #18191c !important;
  color: #e8ecf0 !important;
  border-color: #18191c !important;
}

/* ═══════════════════════════════════════════
   메뉴 사용자 정보 옆 X 버튼 숨기기
═══════════════════════════════════════════ */
.hmenu-close {
  display: none !important;
}

/* ═══════════════════════════════════════════
   공지사항 모달 - 이벤트 모달 스타일로 통일
═══════════════════════════════════════════ */

/* 1. 제목 중앙 정렬 */
#notice-modal #notice-title,
#notice-modal .modal-title,
#notice-modal .modal-header,
#notice-modal .modal-box > h2,
#notice-modal .modal-box > h3,
#notice-modal .modal-box > div:first-child {
  text-align: center !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text-1, #18191c) !important;
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid var(--border, #e4e8ee) !important;
  margin-bottom: 0 !important;
}

/* 2. 상단 X 닫기 버튼 숨기기 */
#notice-modal .modal-close,
#notice-modal .close-btn,
#notice-modal .modal-header button:not(.submit-btn),
#notice-modal button[onclick="closeNotice()"]:not(.submit-btn),
#notice-modal [class*="close-x"],
#notice-modal .modal-x,
#notice-modal button.close {
  display: none !important;
}

/* 3. 본문 영역 패딩 */
#notice-modal #notice-body,
#notice-modal .modal-body,
#notice-modal .notice-content {
  padding: 16px 20px !important;
  font-size: .88rem !important;
  line-height: 1.7 !important;
  color: var(--text-1, #18191c) !important;
}

/* 4. 본문 안의 h4 (점검 개요, 점검 일정 등) 중앙 정렬 */
#notice-modal #notice-body h4,
#notice-modal #notice-body h3,
#notice-modal .modal-body h4,
#notice-modal .modal-body h3 {
  text-align: center !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  color: var(--text-1, #18191c) !important;
  margin: 16px 0 10px !important;
}

/* 5. 본문 첫 h4 상단 여백 제거 */
#notice-modal #notice-body > h4:first-child,
#notice-modal #notice-body > h3:first-child {
  margin-top: 0 !important;
}

/* 6. 본문 단락 */
#notice-modal #notice-body p,
#notice-modal .modal-body p {
  margin: 8px 0 !important;
  color: var(--text-2, #4a4f57) !important;
}

/* 7. 본문 목록 (ul/li) */
#notice-modal #notice-body ul,
#notice-modal .modal-body ul {
  padding-left: 20px !important;
  margin: 8px 0 !important;
}

#notice-modal #notice-body li,
#notice-modal .modal-body li {
  margin: 4px 0 !important;
  color: var(--text-2, #4a4f57) !important;
}

/* 8. 확인 버튼 - 풀 와이드, 차콜 블랙 */
#notice-modal .submit-btn,
#notice-modal button[onclick*="closeNotice"]:not(.modal-close):not(.close-btn),
#notice-modal .modal-footer button:last-child,
#notice-modal .modal-box > button:last-child {
  width: calc(100% - 40px) !important;
  margin: 0 20px 20px !important;
  background: #18191c !important;
  background-color: #18191c !important;
  color: #e8ecf0 !important;
  border: 1px solid #2e3138 !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  border-radius: var(--r, 12px) !important;
  padding: 14px !important;
  font-size: .92rem !important;
  cursor: pointer !important;
  display: block !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
}

#notice-modal .submit-btn:hover,
#notice-modal button[onclick*="closeNotice"]:not(.modal-close):hover {
  background: #2e3138 !important;
  background-color: #2e3138 !important;
}

/* 9. 모달 박스 자체 스타일 */
#notice-modal .modal-box {
  border-radius: var(--r, 12px) !important;
  overflow: hidden !important;
  max-width: 90% !important;
  width: 480px !important;
}

/* ═══════════════════════════════════════════
   전체 프로그램 스크롤바 숨기기 (전역)
   ※ 스크롤 기능은 유지, 스크롤바만 보이지 않음
═══════════════════════════════════════════ */

/* Firefox + IE/Edge */
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html, body {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Chrome / Safari / Edge / WebKit 기반 */
*::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar,
div::-webkit-scrollbar,
section::-webkit-scrollbar,
main::-webkit-scrollbar,
article::-webkit-scrollbar,
aside::-webkit-scrollbar,
nav::-webkit-scrollbar,
ul::-webkit-scrollbar,
ol::-webkit-scrollbar,
textarea::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-corner {
  display: none !important;
  background: transparent !important;
}
/* ═══════════════════════════════════════════
   예약 상세 모달 - 하단 확인 버튼만 풀 와이드
   ※ 상단 X 닫기 버튼 제외
═══════════════════════════════════════════ */

/* 하단 확인 버튼 (submit-btn 클래스만) */
#res-detail-modal .submit-btn {
  width: calc(100% - 40px) !important;
  margin: 12px 20px 20px !important;
  display: block !important;
  background: #18191c !important;
  background-color: #18191c !important;
  color: #e8ecf0 !important;
  border: 1px solid #2e3138 !important;
  border-radius: var(--r, 12px) !important;
  padding: 14px !important;
  font-family: var(--font) !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
  text-align: center !important;
}

#res-detail-modal .submit-btn:hover {
  background: #2e3138 !important;
  background-color: #2e3138 !important;
}

/* ═══════════════════════════════════════════
   예약 상세 모달 - 상단 X 닫기 버튼 숨기기
═══════════════════════════════════════════ */
#res-detail-modal .modal-close,
#res-detail-modal .close-btn,
#res-detail-modal button.close,
#res-detail-modal .modal-x,
#res-detail-modal [class*="close"]:not(.submit-btn):not([class*="cancel"]) {
  display: none !important;
}

/* CARO THE BLACK 로딩 글씨 중앙 보정 */
.bl-transition-logo {
  transform: translateX(8px) !important;
}

/* 로딩 마름모 제거 */
.bl-transition-diamonds {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════
   [흡수] caro-theme.css (P1 오버레이) → style.css 끝에 통합
   · 기존과 동일하게 '맨 뒤'에 위치해 캐스케이드 100% 보존
   · :root 변수는 위 :root에 이미 반영되어 여기선 제외
   · index.html의 caro-theme.css 링크는 제거함
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   2) 바탕
   ───────────────────────────────────────────── */
body{ background:var(--silver-base); color:var(--text-1); }

/* ─────────────────────────────────────────────
   3) 버튼
   ───────────────────────────────────────────── */
.submit-btn,
.res-submit-btn{
  background:var(--accent);
  color:#ffffff;
  border-radius:var(--r);
  box-shadow:0 6px 18px -8px rgba(24,25,28,.42);
  letter-spacing:0;
  font-weight:800;
}
.submit-btn:hover,
.res-submit-btn:hover{ background:var(--accent-2); }
.submit-btn:active,
.res-submit-btn:active{ transform:scale(.985); }

.main-btn{
  background:var(--p1-card);
  border:1px solid var(--p1-line2);
  border-radius:var(--r);
  box-shadow:var(--p1-shadow);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:var(--text-1);
  font-weight:700;
}
.main-btn:hover{ border-color:var(--p1-accent); }
.main-btn:active{ transform:scale(.985); }

.back-bottom-btn{
  border:1px solid var(--p1-line2);
  border-radius:var(--r);
  color:var(--text-2);
  background:var(--p1-card);
  font-weight:700;
}
.back-bottom-btn:hover{ border-color:var(--p1-accent); color:var(--text-1); }

.res-inline-btn,
.cs-contact-btn,
.csd-send-btn,
.apd-btn-primary{
  border-radius:var(--r);
  font-weight:700;
}
.apd-btn-primary{ background:var(--accent); color:#fff; }

/* ─────────────────────────────────────────────
   4) 입력창
   ───────────────────────────────────────────── */
.form-input,
.csd-select,
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select{
  background:var(--p1-card);
  border:1px solid var(--p1-line2);
  border-radius:var(--r);
  color:var(--text-1);
}
.form-input:focus,
.csd-select:focus,
input:focus,
textarea:focus,
select:focus{
  border-color:var(--p1-accent);
  box-shadow:0 0 0 3px rgba(103,112,124,.12);
}
::placeholder{ color:var(--text-m); }

/* ─────────────────────────────────────────────
   5) 카드 / 모달 / 시트
   ───────────────────────────────────────────── */
.modal-box{
  background:var(--silver-base);
  border-radius:24px 24px 0 0;
}
.modal-body{ background:transparent; }

.csd-info-box,
.csd-agree-box,
.csd-table,
.apd-credit-box,
.check-wrap,
.price-row,
.done-info-row{
  border-radius:var(--r);
}

/* 카드류 공통 — 흰 배경 + 옅은 선 */
.csd-info-box,
.csd-agree-box,
.apd-credit-box{
  background:var(--p1-card);
  border:1px solid var(--p1-line);
  box-shadow:var(--p1-shadow);
}

/* ─────────────────────────────────────────────
   6) 일반 화면에 남아 있던 골드 → 슬레이트로
      (.bl-* 더 블랙은 제외 — 아래 8번에서 보존)
   ───────────────────────────────────────────── */
.ctrl-timer:not(.bl-mode .ctrl-timer),
.cs-call,
.cs-chat,
.apd-card-icon,
.apd-credit-amount,
#account-detail-screen .apd-sns-btn.connected{
  color:var(--p1-accent-d) !important;
}
.apd-credit-box{ border-color:var(--p1-line2) !important; }

/* ─────────────────────────────────────────────
   7) 선택 / 활성 상태
   ───────────────────────────────────────────── */
.selected,
.csd-radio-item.selected,
.csd-check-item.selected,
.insurance-item.selected{
  border-color:var(--p1-accent) !important;
  background:var(--p1-soft);
}
.check-wrap input:checked + .check-custom{
  border-color:var(--accent);
  background:var(--accent);
}
.step.active{ color:var(--accent); }

/* ─────────────────────────────────────────────
   8) 카로 더 블랙 — 골드 그대로 보존
      (혹시 위 규칙이 침범하면 여기서 되돌립니다)
   ───────────────────────────────────────────── */
.bl-mode .ctrl-timer,
.bl-title,
.bl-car-price,
.bl-rent-btn,
.bl-transition-logo{ color:#c8a96e !important; }
.bl-diamond{ background:#c8a96e !important; }
.bl-mode .res-submit-btn,
.bl-mode .submit-btn{
  color:#c8a96e !important;
  background:#18191c !important;
}
.bl-mode .insurance-item.selected{
  border-color:#c8a96e !important;
  background:transparent !important;
}
.bl-mode .check-wrap input:checked + .check-custom{
  border-color:#c8a96e !important;
  background:transparent !important;
}

/* ─────────────────────────────────────────────
   9) 스크롤바 (있는 경우)
   ───────────────────────────────────────────── */
::-webkit-scrollbar{ width:6px;height:6px; }
::-webkit-scrollbar-thumb{ background:var(--p1-line2);border-radius:3px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ── P1 마무리: 일반화면 잔여 골드 → 슬레이트 (흰 크레딧카드 위) ── */
.apd-card-default-badge{ background:rgba(103,112,124,.14); }
.apd-credit-label{ color:var(--p1-accent-d); }
.apd-credit-amount small{ color:var(--p1-accent-d); }
/* ★ FIX: 고객센터 도움말 목록 마지막 줄 하단 선 제거 */
.csx-faq .it:last-child{border-bottom:0 !important;}

/* ═══ CARO v4 UI 수정 v2 (2026-09) ═══ */
/* ② 홈 상단 상태바 겹침 방지 (고정 여백·높은 우선순위) */
#home-screen .home-header{ padding-top: 54px !important; }
/* 새 홈 상단바(.nh-hd) 상태바 겹침 방지 — 실제 홈 상단바 */
.nh-hd{ padding-top: max(env(safe-area-inset-top, 0px), 48px) !important; }
/* ① 이벤트 뒤로 버튼: 월렌트처럼 좌우 넓게 (전체폭 - 32px) */
#event-screen button.nh-ev-back{ position:fixed !important; left:16px !important; right:16px !important; top:auto !important; bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important; width:calc(100% - 32px) !important; max-width:calc(100% - 32px) !important; height:52px !important; margin:0 !important; box-sizing:border-box !important; }
/* ④ 로딩화면 하단 2026 텍스트: 제스처바 위로 올림 */
#splash-screen .splash-footer{ bottom: 56px !important; }

/* ═══════════════════════════════════════════════════════════════
   CARO 전역 상단 상태바 여백 v3 (2026-09)
   ───────────────────────────────────────────────────────────────
   문제 : 안드로이드 웹뷰는 env(safe-area-inset-top)을 0으로 보고한다.
          그래서 --sat / --android-status-bar 를 쓰는 코드가 전부 0이 되고,
          시계·와이파이·배터리 아이콘 아래로 앱 헤더가 파고든다.
   해결 : ① --sat 에 최소값(36px)을 주어 --sat 를 쓰는 모든 화면을 한 번에 해결
          ② --sat 를 안 쓰는 나머지 상단 헤더를 개별 지정
   제외 : 로딩화면, 모달/바텀시트, 이미 52~70px 여백이 있는 화면
   ═══════════════════════════════════════════════════════════════ */

/* ── ① 전역 변수: 상태바 최소 확보 높이 ─────────────────────── */
:root{
  --sat: max(env(safe-area-inset-top, 0px), 36px);
}

/* ── ② --sat 를 안 쓰는 상단 헤더 개별 적용 ─────────────────── */

/* 카로 대기화면(홈) 상단바 */
.nh-hd{ padding-top: calc(12px + var(--sat)) !important; }

/* 이용내역 · 예약내역 · 홈(구 헤더) */
#home-screen .home-header,
#usage-history-screen .home-header,
#my-reservation-screen .home-header{
  padding-top: calc(14px + var(--sat)) !important;
}

/* 차량 찾기 */
#find-screen .find-title-bar{ padding-top: calc(12px + var(--sat)) !important; }

/* 고객센터 상세 · 문의하기 */
#cs-detail-screen .csd-header,
#inquiry-screen .csd-header{ padding-top: calc(12px + var(--sat)) !important; }

/* 상담 채팅 */
#chat-screen .csd-chat-header{ padding-top: calc(10px + var(--sat)) !important; }

/* 실시간 지도(전체화면) 상단바 — 높이까지 같이 늘려야 함 */
.rental-topbar{
  height: calc(52px + var(--sat)) !important;
  padding-top: var(--sat) !important;
  box-sizing: border-box !important;
}

/* 촬영 화면 */
.caro-cam-header{ padding-top: calc(12px + var(--sat)) !important; }

/* 챗봇(전체화면) */
.cbot-hd{ padding-top: calc(12px + var(--sat)) !important; }

/* 메인 · 완료 화면 */
#main-screen .main-wrap{ padding-top: calc(16px + var(--sat)) !important; }
#done-screen .form-container{ margin-top: calc(16px + var(--sat)) !important; }

/* ── ③ 로딩화면 하단 2026 텍스트: 제스처바 위로 (유지) ───────── */
#splash-screen .splash-footer{ bottom: 56px !important; }

/* ── v3.1 지도(실시간 예약) 화면 보정 ──────────────────────────
   상단바가 상태바만큼 높아졌으므로, 상단바 바로 아래 기준으로
   놓이던 요소들(날짜·시간 바, 차종 버튼, 위치 로딩 표시)도 같이 내린다 */
#rental-screen .caro-rental-controls{ top: calc(52px + var(--sat)) !important; }
#rental-screen .caro-catbar,
#rental-screen .caro-cat-btn{ top: calc(62px + var(--sat)) !important; }
#rental-screen #caro-map .caro-loc-loading{ top: calc(12px + var(--sat)) !important; }
#rental-screen #caro-map .leaflet-top{ top: var(--sat) !important; }

/* 오프라인 안내 바(화면 최상단 고정) — top은 0 유지, 안쪽 여백으로 상태바 확보 (숨김 transform이 -110%라 top을 옮기면 삐져나옴) */
.caro-off-bar{ top: 0 !important; padding-top: calc(var(--sat) + 9px) !important; }

/* ── v3.2 지도 화면 상단 제목 정중앙 ─────────────────────────────
   뒤로 버튼은 absolute, 오른쪽 36px 빈칸은 flex 흐름에 남아 있어서
   제목이 왼쪽으로 치우쳤다. 제목을 상단바 폭 기준으로 절대 중앙 배치 */
#rental-screen .rental-topbar-title{
  position:absolute !important; left:0 !important; right:0 !important;
  top:var(--sat) !important; height:52px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  text-align:center !important; pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════
   v4 (2026-09-07) — 시스템바 · 글자 넘침 보정
   ─ 상태바 높이: 앱(MainActivity v7)이 실제 값을 --sat-native 로 넣어 준다. 없으면(브라우저·옛 앱) 36px 유지.
   ─ 아래쪽(내비게이션바·키보드)은 앱이 네이티브 여백으로 비우므로 CSS 는 손대지 않는다.
   ═══════════════════════════════════════════════════════════════ */
:root{ --sat: max(env(safe-area-inset-top, 0px), var(--sat-native, 36px)); }

/* 계정관리 상세(면허증·크레딧·쿠폰·내 정보…) — 제목이 상태바 안에 그려지던 문제.
   뒤로(←) 버튼과 같은 줄(상태바 아래 20px)에 제목을 놓는다. */
#account-detail-screen .mpd-header{ padding-top: calc(20px + var(--sat)) !important; }
#account-detail-screen .mpd-title-row{
  top: calc(20px + var(--sat)) !important;
  height: 40px !important;
  padding: 0 56px !important;            /* 좌우 뒤로 버튼 자리만큼 비워 긴 제목도 겹치지 않게 */
  box-sizing: border-box !important;
}
#account-detail-screen .mpd-title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* 내 정보(마이페이지) 상단바도 같은 기준 */
#mypage-screen .mpn-topbar{ padding-top: calc(20px + var(--sat)) !important; }

/* 토스트 — 긴 문장이 한 줄로 잘려 나가던 문제: 화면 폭 안에서 줄바꿈 */
.toast{
  white-space: normal !important;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-height: 1.45;
  width: max-content;
  max-width: min(calc(100vw - 32px), 480px) !important;
  bottom: calc(90px + var(--sab, 0px)) !important;
}

/* 계정관리 상세 행 — 값이 길면 줄바꿈(칸 밖으로 나가지 않게) */
#account-detail-screen .apd-row{ align-items: flex-start; gap: 12px; }
#account-detail-screen .apd-row-label{ flex: 0 0 auto; }
#account-detail-screen .apd-row-value{ flex: 1 1 auto; min-width: 0; text-align: right; word-break: keep-all; overflow-wrap: anywhere; }

/* 폼 도움말·안내문 — 칸 안에서 줄바꿈 */
.apd-input-hint, .apd-help, .input-hint, .form-hint, .csd-hint, .awz-hint{ word-break: keep-all; overflow-wrap: anywhere; white-space: normal; }

/* 결제 카드 아이콘 칸 — 은행명이 길어도 칸 밖으로 나가지 않게 (최소 36px, 내용에 맞춰 늘어남) */
.apd-card-icon{ width: auto !important; min-width: 36px; padding: 0 6px; white-space: nowrap; }