/**
 * OrderHero UI Components
 * Built on design tokens (load tokens.css first; hex fallbacks included so it also works standalone).
 * Grounded in production app.dl-orderhero.com (login buttons) + service screenshots. 2026-07-15
 */

/* ============ Button ============ */
.oh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--font-sans,'Pretendard Variable',Pretendard,sans-serif);
  font-weight:700;font-size:16px;line-height:1;
  padding:14px 20px;border-radius:var(--radius-md,8px);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:filter .15s,background .15s,border-color .15s;
}
.oh-btn:active{filter:brightness(.95);}
.oh-btn--block{width:100%;}
.oh-btn--lg{font-size:16px;padding:15px 22px;}
.oh-btn--md{font-size:14px;padding:11px 16px;}
.oh-btn--sm{font-size:13px;padding:8px 13px;border-radius:var(--radius,6px);}
.oh-btn--primary{background:var(--primary,#467FF7);color:#fff;}
.oh-btn--secondary{background:var(--gray66,#666666);color:#fff;}
.oh-btn--navy{background:var(--navy,#0C2540);color:#fff;}
.oh-btn--outline{background:#fff;color:var(--primary,#467FF7);border-color:var(--primary,#467FF7);}
.oh-btn--ghost{background:transparent;color:var(--primary,#467FF7);}
.oh-btn:disabled,.oh-btn--disabled{background:var(--gray-d0,#D0D0D0);color:#fff;cursor:not-allowed;filter:none;}

/* ============ Input / Field ============ */
.oh-field{display:flex;flex-direction:column;gap:6px;}
.oh-label{font-size:13px;font-weight:600;color:var(--text,#1A1A1A);}
.oh-label .req{color:var(--primary,#467FF7);margin-left:2px;}
.oh-input{
  width:100%;font-family:var(--font-sans,'Pretendard Variable',sans-serif);
  font-size:15px;color:var(--text,#1A1A1A);background:#fff;
  border:1px solid var(--border,#EBEBEB);border-radius:var(--radius-md,8px);
  padding:13px 14px;outline:none;transition:border-color .15s;
}
.oh-input::placeholder{color:var(--text-hint,#999999);}
.oh-input:focus{border-color:var(--primary,#467FF7);}
.oh-input--error{border-color:var(--error,#FF3C3C);}
.oh-help{font-size:12px;color:var(--text-hint,#999999);}
.oh-help--error{color:var(--error,#FF3C3C);}
.oh-search{
  display:flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--border,#EBEBEB);border-radius:var(--radius-md,8px);padding:11px 14px;
}
.oh-search input{border:none;outline:none;flex:1;font-size:14px;background:transparent;
  font-family:var(--font-sans,'Pretendard Variable',sans-serif);color:var(--text,#1A1A1A);}
.oh-search input::placeholder{color:var(--text-hint,#999999);}

/* ============ Card ============ */
.oh-card{background:#fff;border-radius:var(--radius-lg,12px);
  box-shadow:var(--shadow-card,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06));padding:16px;}
.oh-card--flat{box-shadow:none;border:1px solid var(--border,#EBEBEB);}

/* ============ List row ============ */
.oh-row{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;
  border-bottom:1px solid var(--border,#EBEBEB);cursor:pointer;}
.oh-row__icon{width:40px;height:40px;border-radius:10px;background:var(--blue-50,#EEF3FE);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--primary,#467FF7);}
.oh-row__body{flex:1;min-width:0;}
.oh-row__title{font-size:15px;font-weight:600;color:var(--text,#1A1A1A);}
.oh-row__sub{font-size:12px;color:var(--text-hint,#999999);margin-top:2px;}
.oh-row__arrow{color:var(--gray-d0,#D0D0D0);font-size:18px;line-height:1;}

/* ============ Badge / Chip / Pill ============ */
.oh-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;
  padding:2px 6px;border-radius:4px;letter-spacing:.02em;}
.oh-badge--new{background:var(--error,#FF3C3C);color:#fff;}
.oh-badge--info{background:var(--blue-50,#EEF3FE);color:var(--primary,#467FF7);}
.oh-badge--done{background:var(--blue-50,#EEF3FE);color:var(--primary,#467FF7);}
.oh-badge--warn{background:#FEF3E2;color:#B45309;}
.oh-badge--danger{background:var(--error-bg,#FFF8F8);color:var(--error,#FF3C3C);}
.oh-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:5px 12px;
  border-radius:var(--radius-pill,9999px);border:1px solid var(--border,#EBEBEB);
  color:var(--text-sub,#5D5D5D);background:#fff;cursor:pointer;}
.oh-chip--active{border-color:var(--primary,#467FF7);color:var(--primary,#467FF7);}
.oh-pill{display:inline-flex;font-size:11px;font-weight:700;padding:3px 9px;
  border-radius:var(--radius-pill,9999px);background:var(--blue-50,#EEF3FE);color:var(--primary,#467FF7);}

/* ============ Segmented tabs (기간 필터) ============ */
.oh-tabs{display:flex;gap:6px;}
.oh-tab{flex:1;text-align:center;font-size:13px;font-weight:500;color:var(--text-sub,#5D5D5D);
  padding:8px 0;border:1px solid var(--border,#EBEBEB);border-radius:var(--radius,6px);background:#fff;cursor:pointer;}
.oh-tab--active{border-color:var(--primary,#467FF7);color:var(--primary,#467FF7);font-weight:600;}

/* ============ Bottom navigation ============ */
.oh-bnav{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--border,#EBEBEB);}
.oh-bnav__item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 12px;
  font-size:10px;color:var(--text-hint,#999999);cursor:pointer;}
.oh-bnav__item--active{color:var(--primary,#467FF7);}

/* ============ Toggle ============ */
.oh-switch{position:relative;width:44px;height:26px;border-radius:999px;background:var(--gray-d0,#D0D0D0);
  cursor:pointer;transition:background .2s;flex-shrink:0;}
.oh-switch--on{background:var(--primary,#467FF7);}
.oh-switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.oh-switch--on::after{transform:translateX(18px);}

/* ============ Modal / Bottom sheet dim ============ */
.oh-dim{position:fixed;inset:0;background:rgba(51,51,51,.24);}  /* popup-dim: #3333333d */
.oh-sheet{background:#fff;border-radius:16px 16px 0 0;box-shadow:var(--shadow-up,0 -3px 6px rgba(0,0,0,.06));padding:20px 16px;}