:root {
      --brand: #d70f64;
      --brand-dark: #a90a4e;
      --ink: #1f2933;
      --muted: #6b7280;
      --line: #e5e7eb;
      --soft: #f7f8fa;
      --ok: #07866f;
      --warn: #b86b00;
      --danger: #c62828;
      --violet: #6d5dfc;
      --blue: #1677ff;
      --radius: 8px;
      --shadow: 0 16px 42px rgba(18, 24, 40, .1);
      font-family: Inter, Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      color: var(--ink);
      background: #fff;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    .app-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      background: var(--soft);
    }

    body[data-role="admin"] .app-shell {
      grid-template-columns: 248px minmax(0, 1fr);
    }

    .admin-sidebar {
      position: sticky;
      top: 0;
      min-height: 100vh;
      align-self: start;
      padding: 20px 14px;
      border-right: 1px solid var(--line);
      background: #fff;
    }

    .admin-sidebar-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      padding: 0 8px;
      color: var(--ink);
      font-size: 18px;
      font-weight: 900;
      text-decoration: none;
    }

    .admin-menu {
      display: grid;
      gap: 6px;
      margin-top: 22px;
    }

    .admin-menu a {
      display: flex;
      align-items: center;
      min-height: 42px;
      padding: 0 12px;
      border-radius: var(--radius);
      color: #374151;
      font-size: 14px;
      font-weight: 800;
      text-decoration: none;
    }

    .admin-menu a:hover,
    .admin-menu a:focus-visible {
      background: #f1f3f5;
      color: var(--ink);
      outline: 0;
    }

    .admin-menu a.active {
      background: #fde8f1;
      color: var(--brand);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 850;
      font-size: 22px;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: var(--brand);
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 900;
      letter-spacing: 0;
      box-shadow: 0 10px 18px rgba(215, 15, 100, .22);
    }

    .main {
      min-width: 0;
      padding: 24px;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }

    .page-title {
      min-width: 0;
    }

    .page-title h1 {
      margin: 0;
      font-size: clamp(25px, 3vw, 38px);
      line-height: 1.1;
      letter-spacing: 0;
    }

    .page-title p {
      margin: 8px 0 0;
      color: var(--muted);
      line-height: 1.5;
    }

    .toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .search {
      min-width: min(420px, 100%);
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .search input {
      width: 100%;
      min-height: 44px;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
    }

    .select,
    .field {
      min-height: 44px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      padding: 0 12px;
      color: var(--ink);
      outline: 0;
    }

    .field {
      width: 100%;
    }

    .button {
      min-height: 42px;
      border-radius: var(--radius);
      background: var(--brand);
      color: #fff;
      padding: 0 14px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      white-space: nowrap;
    }

    .button.secondary {
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--line);
    }

    .button.ghost {
      background: transparent;
      color: var(--brand);
      padding-inline: 8px;
    }

    .button.success { background: var(--ok); }
    .button.warning { background: var(--warn); }
    .button.danger { background: var(--danger); }
    .button.blue { background: var(--blue); }

    .grid {
      display: grid;
      gap: 16px;
    }

    .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .layout-customer { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) minmax(280px, 360px); }
    .layout-ops { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); }

    .panel {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 1px 0 rgba(18, 24, 40, .03);
    }

    .panel-header {
      padding: 16px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .panel-title {
      margin: 0;
      font-size: 16px;
      line-height: 1.3;
    }

    .panel-subtitle {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .panel-body {
      padding: 16px;
    }

    .chip-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin: 14px 0 16px;
    }

    .chip {
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 700;
    }

    .chip.active {
      border-color: var(--brand);
      background: #fde8f1;
      color: var(--brand);
    }

    .restaurant-card,
    .menu-card,
    .order-card,
    .driver-job,
    .metric-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
    }

    .restaurant-card {
      padding: 12px;
      display: grid;
      gap: 9px;
      text-align: left;
    }

    .restaurant-card.active {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px #fde8f1;
    }

    .restaurant-thumb,
    .food-thumb {
      border-radius: 7px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,0)),
        var(--accent, #fdcfe1);
      position: relative;
      overflow: hidden;
    }

    .restaurant-thumb {
      height: 88px;
    }

    .restaurant-thumb::after,
    .food-thumb::after {
      content: "";
      position: absolute;
      inset: auto -12% -30% auto;
      width: 72%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(255,255,255,.36);
    }

    .restaurant-card strong,
    .menu-info strong {
      display: block;
      font-size: 15px;
      line-height: 1.25;
    }

    .meta {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      flex-wrap: wrap;
    }

    .menu-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 12px;
    }

    .menu-card {
      overflow: hidden;
      display: grid;
      grid-template-rows: 136px minmax(0, 1fr);
    }

    .food-thumb {
      border-radius: 0;
      display: flex;
      align-items: end;
      padding: 12px;
      color: #fff;
      font-weight: 900;
      text-shadow: 0 2px 8px rgba(0,0,0,.22);
    }

    .menu-info {
      padding: 12px;
      display: grid;
      gap: 10px;
    }

    .menu-info p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .price-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .price {
      font-weight: 900;
      color: var(--brand-dark);
    }

    .cart-list,
    .order-list,
    .compact-list {
      display: grid;
      gap: 10px;
    }

    .cart-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
    }

    .cart-item:last-child {
      border-bottom: 0;
    }

    .qty {
      display: inline-grid;
      grid-template-columns: 30px 34px 30px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 7px;
      overflow: hidden;
      background: #fff;
    }

    .qty button {
      height: 32px;
      background: #fff;
      color: var(--brand);
      font-weight: 900;
    }

    .qty span {
      text-align: center;
      font-size: 13px;
      font-weight: 800;
    }

    .total-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      color: var(--muted);
    }

    .total-row.strong {
      color: var(--ink);
      font-size: 18px;
      font-weight: 900;
    }

    .empty {
      color: var(--muted);
      padding: 22px;
      border: 1px dashed var(--line);
      border-radius: var(--radius);
      text-align: center;
      line-height: 1.5;
      background: #fcfcfd;
    }

    .status {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 0 9px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 850;
      background: #edf2ff;
      color: var(--blue);
      white-space: nowrap;
    }

    .status.new { background: #fff3df; color: var(--warn); }
    .status.cooking { background: #fde8f1; color: var(--brand); }
    .status.ready { background: #e8f7f3; color: var(--ok); }
    .status.delivering { background: #edf2ff; color: var(--blue); }
    .status.done { background: #f1f3f5; color: #54606c; }

    .order-card,
    .driver-job {
      padding: 14px;
      display: grid;
      gap: 12px;
    }

    .order-top {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 12px;
    }

    .order-top strong {
      display: block;
      line-height: 1.35;
    }

    .actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .metric-card {
      padding: 16px;
      min-height: 112px;
      display: grid;
      align-content: space-between;
      gap: 10px;
    }

    .metric-card span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .metric-card strong {
      font-size: 26px;
      line-height: 1;
    }

    .form-grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid .wide { grid-column: 1 / -1; }

    .table-wrap {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 680px;
    }

    th,
    td {
      padding: 12px 10px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      font-size: 14px;
      vertical-align: middle;
    }

    th {
      color: var(--muted);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .04em;
      background: #fafafa;
    }

    .switch {
      width: 48px;
      height: 28px;
      border-radius: 999px;
      background: #cfd6df;
      padding: 3px;
      display: inline-flex;
      justify-content: flex-start;
      transition: .2s;
    }

    .switch.on {
      background: var(--ok);
      justify-content: flex-end;
    }

    .switch::after {
      content: "";
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,.2);
    }

    .bar-chart {
      display: grid;
      grid-template-columns: repeat(7, minmax(28px, 1fr));
      gap: 10px;
      align-items: end;
      min-height: 180px;
      padding: 8px 0 0;
    }

    .bar {
      display: grid;
      gap: 8px;
      align-items: end;
      text-align: center;
      color: var(--muted);
      font-size: 12px;
    }

    .bar i {
      display: block;
      height: var(--h);
      min-height: 24px;
      border-radius: 7px 7px 3px 3px;
      background: linear-gradient(180deg, var(--brand), #ff8bbd);
    }

    .map {
      min-height: 300px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background:
        linear-gradient(90deg, transparent 49%, rgba(31,41,51,.06) 50%, transparent 51%),
        linear-gradient(0deg, transparent 49%, rgba(31,41,51,.06) 50%, transparent 51%),
        #f5f8fb;
      background-size: 70px 70px;
      position: relative;
      overflow: hidden;
    }

    .route {
      position: absolute;
      left: 16%;
      top: 58%;
      width: 66%;
      height: 5px;
      background: var(--brand);
      transform: rotate(-22deg);
      border-radius: 999px;
      box-shadow: 0 0 0 5px rgba(215, 15, 100, .11);
    }

    .pin {
      position: absolute;
      width: 42px;
      height: 42px;
      border-radius: 50% 50% 50% 8px;
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 900;
      transform: rotate(-45deg);
      box-shadow: var(--shadow);
    }

    .pin span {
      transform: rotate(45deg);
    }

    .pin.pickup {
      left: 14%;
      top: 54%;
      background: var(--brand);
    }

    .pin.dropoff {
      right: 12%;
      top: 26%;
      background: var(--blue);
    }

    .admin-grid {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: 16px;
    }

    .notice {
      padding: 12px;
      border-radius: var(--radius);
      background: #fff8e8;
      color: #6b4300;
      line-height: 1.45;
      font-size: 13px;
    }

    .toast {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 10;
      background: #111827;
      color: #fff;
      border-radius: var(--radius);
      padding: 12px 14px;
      box-shadow: var(--shadow);
      transform: translateY(20px);
      opacity: 0;
      pointer-events: none;
      transition: .22s ease;
      max-width: min(360px, calc(100vw - 32px));
      line-height: 1.45;
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }

    .hidden { display: none !important; }

    @media (max-width: 1180px) {
      .layout-customer,
      .layout-ops,
      .admin-grid {
        grid-template-columns: 1fr;
      }

      .cart-panel {
        position: sticky;
        bottom: 12px;
        z-index: 4;
        box-shadow: var(--shadow);
      }
    }

    @media (max-width: 780px) {
      .app-shell {
        grid-template-columns: 1fr;
        background: var(--soft);
      }

      body[data-role="admin"] .app-shell {
        grid-template-columns: 1fr;
      }

      .admin-sidebar {
        position: static;
        min-height: auto;
        padding: 14px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .admin-sidebar-brand {
        padding: 0;
      }

      .admin-menu {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        margin-top: 14px;
        padding-bottom: 2px;
      }

      .main {
        padding: 14px;
      }

      .topbar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
      }

      .toolbar {
        display: grid;
        grid-template-columns: 1fr;
      }

      .search {
        min-width: 0;
      }

      .grid.cols-2,
      .grid.cols-3,
      .grid.cols-4,
      .form-grid {
        grid-template-columns: 1fr;
      }

      .menu-grid {
        grid-template-columns: 1fr;
      }

      .restaurant-list {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      }

      .restaurant-thumb {
        height: 76px;
      }

      .menu-card {
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-rows: auto;
      }

      .food-thumb {
        min-height: 132px;
      }

      .cart-panel {
        position: static;
      }

      .panel-header,
      .order-top {
        align-items: stretch;
        flex-direction: column;
      }

      .button {
        width: 100%;
      }

      .actions .button,
      .price-row .button {
        width: auto;
      }

      .toast {
        right: 14px;
        bottom: 14px;
      }
    }