/* ===========================================================
   NEXT LEVEL RENTAL — Design System (공용)
   업로드: /www/awesome/css/design-system.css
        + /www/m/awesome/css/design-system.css
   로드: 헤더에서 이 파일 + Archivo 폰트 링크
   ★ 색·폰트·컴포넌트의 단일 소스. 페이지들은 var(--토큰)·.btn/.card 등을 사용.
   =========================================================== */

:root{
  /* Brand · Magenta (Primary) */
  --magenta-50:#fdeef4;  --magenta-100:#fad6e5; --magenta-200:#f5aecc;
  --magenta-300:#f083b0; --magenta-400:#ee619a; --magenta-500:#e94282;
  --magenta-600:#d62d70; --magenta-700:#b31f5b; --magenta-800:#8f1a49; --magenta-900:#6b1537;
  /* Brand · Purple (Secondary) */
  --purple-50:#f4eaf4;  --purple-100:#e6cce6; --purple-200:#cf9acf;
  --purple-300:#b466b3; --purple-400:#9c3f9b; --purple-500:#831f82;
  --purple-600:#6f1a6e; --purple-700:#591559; --purple-800:#431043; --purple-900:#2e0b2e;
  /* Ink & Neutral */
  --ink-950:#150f19; --ink-900:#1e1723; --ink-800:#322a39; --ink-700:#4b4253;
  --ink-600:#6b6274; --ink-500:#8b8393; --ink-400:#aaa3b0; --ink-300:#cbc6ce;
  --ink-200:#e4e0e7; --ink-100:#f1eff3; --ink-50:#f8f7fa; --white:#ffffff;
  /* Semantic */
  --success:#12945a; --success-bg:#e6f6ee; --success-bd:#b7e4cd;
  --warning:#b9770a; --warning-bg:#fdf1dd; --warning-bd:#f4d9a6;
  --error:#d62d2d;   --error-bg:#fbe7e7;   --error-bd:#f2b9b9;
  --info:#2563eb;    --info-bg:#e8eefd;    --info-bd:#bcd0fa;
  /* Kakao */
  --kakao:#FEE500; --kakao-ink:#3C1E1E;
  /* Signature gradient (특별 배너 1회용, 반복 UI엔 solid 사용) */
  --grad-brand:linear-gradient(120deg, var(--purple-500) 0%, var(--magenta-500) 100%);
  /* Surface / aliases */
  --bg:#ffffff; --surface:var(--white); --text:var(--ink-900); --text-2:var(--ink-700);
  --text-muted:var(--ink-500); --border:var(--ink-200); --border-strong:var(--ink-300);
  --brand:var(--magenta-500);
  /* Radius */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  /* Elevation */
  --sh-sm:0 1px 2px rgba(28,20,36,.06), 0 1px 3px rgba(28,20,36,.05);
  --sh-md:0 4px 10px rgba(28,20,36,.06), 0 2px 4px rgba(28,20,36,.05);
  --sh-lg:0 14px 30px rgba(28,20,36,.10), 0 4px 8px rgba(28,20,36,.05);
  --sh-brand:0 6px 16px rgba(233,66,130,.22);
  --sh-float:0 10px 24px rgba(28,20,36,.16), 0 3px 8px rgba(28,20,36,.10);
  /* Type */
  --font-ui:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-display:"Archivo","Pretendard Variable","Pretendard",sans-serif;
  /* Spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px;
  /* Mobile */
  --touch:48px; --appbar-h:56px; --tabbar-h:58px; --m-margin:16px; --m-gutter:16px;
}

/* ---- 숫자/금액 강조용 (Archivo, tabular) ---- */
.ds-num{font-family:var(--font-display);font-feature-settings:"tnum";letter-spacing:-.01em;}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-ui);font-size:15px;font-weight:600;line-height:1;cursor:pointer;
  border:1px solid transparent;border-radius:var(--r-sm);padding:13px 22px;text-decoration:none;
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;}
.btn:active{transform:translateY(1px);}
.btn--full{width:100%;}
.btn--lg{font-size:17px;padding:16px 28px;border-radius:var(--r-md);}
.btn--sm{font-size:13px;padding:9px 15px;}
.btn--primary{background:var(--magenta-500);color:#fff;box-shadow:var(--sh-brand);}
.btn--primary:hover{background:var(--magenta-600);}
.btn--secondary{background:var(--surface);color:var(--magenta-700);border-color:var(--magenta-300);}
.btn--secondary:hover{background:var(--magenta-50);border-color:var(--magenta-500);}
.btn--purple{background:var(--purple-500);color:#fff;}
.btn--purple:hover{background:var(--purple-600);}
.btn--ghost{background:transparent;color:var(--text-2);}
.btn--ghost:hover{background:var(--ink-100);color:var(--text);}
.btn--kakao{background:var(--kakao);color:var(--kakao-ink);}
.btn--outline{background:var(--surface);color:var(--text);border-color:var(--border-strong);}
.btn--outline:hover{border-color:var(--ink-400);}
.btn--danger{background:var(--error);color:#fff;}
.btn:disabled,.btn.is-disabled{background:var(--ink-200);color:var(--ink-400);box-shadow:none;border-color:transparent;cursor:not-allowed;transform:none;}

/* ---- Badges ---- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;line-height:1;
  padding:6px 11px;border-radius:var(--r-full);letter-spacing:.01em;}
.badge--brand{background:var(--magenta-50);color:var(--magenta-700);}
.badge--strong{background:var(--magenta-100);color:var(--magenta-800);}
.badge--purple{background:var(--purple-50);color:var(--purple-700);}
.badge--neutral{background:var(--ink-100);color:var(--ink-700);}
.badge--success{background:var(--success-bg);color:var(--success);}
.badge--warning{background:var(--warning-bg);color:var(--warning);}
.badge--error{background:var(--error-bg);color:var(--error);}

/* ---- Form ---- */
.field{display:flex;flex-direction:column;gap:8px;}
.field__label{font-size:14px;font-weight:600;color:var(--text);}
.field__label .req{color:var(--magenta-500);margin-left:2px;}
.field__help{font-size:13px;color:var(--text-muted);}
.field__help.is-error{color:var(--error);}
.control{font-family:var(--font-ui);font-size:16px;color:var(--text);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--r-md);padding:0 15px;min-height:52px;width:100%;
  transition:border-color .15s,box-shadow .15s;}
.control::placeholder{color:var(--ink-400);}
.control:hover{border-color:var(--ink-400);}
.control:focus{outline:none;border-color:var(--magenta-500);box-shadow:0 0 0 4px rgba(233,66,130,.14);}
.control.is-error{border-color:var(--error);}
select.control{appearance:none;padding-right:42px;background-repeat:no-repeat;background-position:right 14px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b6274' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");}

/* ---- Segmented control (선택 옵션) ---- */
.seg{display:flex;background:var(--ink-100);border-radius:var(--r-full);padding:4px;}
.seg button{flex:1;border:0;background:transparent;font-family:var(--font-ui);font-size:14px;font-weight:600;
  color:var(--text-2);padding:10px;border-radius:var(--r-full);cursor:pointer;min-height:var(--touch);
  transition:background .18s,color .18s,box-shadow .18s;}
.seg button.on{background:var(--surface);color:var(--magenta-700);box-shadow:var(--sh-sm);}

/* ---- Card ---- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-sm);transition:box-shadow .2s,transform .2s;}
.card:hover{box-shadow:var(--sh-lg);transform:translateY(-2px);}
.card__body{padding:var(--s-6);}
.card__eyebrow{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-600);}
.card__title{font-size:19px;font-weight:700;margin-top:var(--s-2);}
.card__text{font-size:14px;color:var(--text-2);margin-top:var(--s-2);line-height:1.6;}

/* ---- Alert ---- */
.alert{display:flex;gap:12px;align-items:flex-start;border:1px solid;border-radius:var(--r-md);padding:var(--s-4) var(--s-5);}
.alert__title{font-size:14px;font-weight:700;color:var(--ink-900);}
.alert__text{font-size:13px;margin-top:2px;line-height:1.55;color:var(--ink-900);}
.alert--info{background:var(--info-bg);border-color:var(--info-bd);}
.alert--success{background:var(--success-bg);border-color:var(--success-bd);}
.alert--warning{background:var(--warning-bg);border-color:var(--warning-bd);}
.alert--error{background:var(--error-bg);border-color:var(--error-bd);}

/* ---- Chip ---- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-2);
  background:var(--ink-100);border:1px solid var(--border);border-radius:var(--r-full);padding:7px 13px;}
.chip.is-on{background:var(--magenta-50);border-color:var(--magenta-200);color:var(--magenta-700);}