/* The admin keeps its own markup and behavior; these are the merchant PC visual tokens. */
@font-face {
  font-family: "Merchant Pretendard";
  src: url("./assets/merchant-ui/Pretendard-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Merchant Pretendard";
  src: url("./assets/merchant-ui/Pretendard-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Merchant Pretendard";
  src: url("./assets/merchant-ui/Pretendard-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Merchant Pretendard";
  src: url("./assets/merchant-ui/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
}

body,
button,
input,
select,
textarea {
  font-family: "Merchant Pretendard", Pretendard, sans-serif;
  letter-spacing: 0;
}

.admin-shell {
  --surface-soft: color-mix(in srgb, var(--brand-primary) 5%, white);
  --surface-tertiary: #f6f6f7;
  --border: #e8e9ed;
  --border-strong: #dcdee0;
}

.admin-shell .nav-item[data-menu="dashboard"] { --merchant-icon: url("./assets/merchant-ui/e20f0.svg"); }
.admin-shell .nav-item[data-menu="stores"] { --merchant-icon: url("./assets/merchant-ui/09751.svg"); }
.admin-shell .nav-item[data-menu="content"] { --merchant-icon: url("./assets/merchant-ui/315a2.svg"); }
.admin-shell .nav-item[data-menu="users"] { --merchant-icon: url("./assets/merchant-ui/740bc.svg"); }
.admin-shell .nav-item[data-menu="reservations"] { --merchant-icon: url("./assets/merchant-ui/c12da.svg"); }
.admin-shell .nav-item[data-menu="payments"] { --merchant-icon: url("./assets/merchant-ui/bc91f.svg"); }
.admin-shell .nav-item[data-menu="settlements"] { --merchant-icon: url("./assets/merchant-ui/3db4a.svg"); }
.admin-shell .nav-item[data-menu="commerce"] { --merchant-icon: url("./assets/merchant-ui/bc91f.svg"); }
.admin-shell .nav-item[data-menu="coupons"] { --merchant-icon: url("./assets/merchant-ui/a2a15.svg"); }
.admin-shell .nav-item[data-menu="ads"] { --merchant-icon: url("./assets/merchant-ui/947e5.svg"); }
.admin-shell .nav-item[data-menu="reports"] { --merchant-icon: url("./assets/merchant-ui/5dcf3.svg"); }
.admin-shell .nav-item[data-menu="support"] { --merchant-icon: url("./assets/merchant-ui/8c636.svg"); }
.admin-shell .nav-item[data-menu="policy"] { --merchant-icon: url("./assets/merchant-ui/315a2.svg"); }
.admin-shell .nav-item[data-menu="analytics"] { --merchant-icon: url("./assets/merchant-ui/38997.svg"); }
.admin-shell .nav-item[data-menu="admins"] { --merchant-icon: url("./assets/merchant-ui/740bc.svg"); }
.admin-shell .nav-item[data-menu="settings"] { --merchant-icon: url("./assets/merchant-ui/113a8.svg"); }

@supports (mask-image: url("./assets/merchant-ui/e20f0.svg")) {
  .admin-shell .nav-icon {
    background: transparent;
    box-shadow: none;
    color: transparent;
    font-size: 0;
  }
  .admin-shell .nav-icon::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: var(--text-secondary);
    mask: var(--merchant-icon) center / contain no-repeat;
  }
  .admin-shell .nav-item:hover .nav-icon,
  .admin-shell .nav-item.active .nav-icon { background: transparent; }
  .admin-shell .nav-item:hover .nav-icon::before,
  .admin-shell .nav-item.active .nav-icon::before { background: var(--brand-primary); }
}

@media (min-width: 861px) {
  .admin-shell { --sidebar-width: 228px; }
  .admin-shell .sidebar { padding: 20px 12px 12px; }
  .admin-shell .brand-block { padding: 0 8px 15px; }
  .admin-shell .brand-character { width: 38px; height: 44px; flex-basis: 38px; }
  .admin-shell .brand-logo { width: 82px; }
  .admin-shell .brand-subtitle { font-size: 12px; font-weight: 500; }
  .admin-shell .side-nav { gap: 2px; padding: 12px 0; }
  .admin-shell .nav-item {
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
  }
  .admin-shell .nav-item.active { background: color-mix(in srgb, var(--brand-primary) 10%, white); font-weight: 700; }
  .admin-shell .nav-item:hover:not(.active) { background: var(--surface-tertiary); color: var(--text-primary); }
  .admin-shell .nav-icon { width: 24px; height: 24px; flex-basis: 24px; }
  .admin-shell .nav-item[data-menu="commerce"],
  .admin-shell .nav-item[data-menu="support"] { margin-top: 9px; }
  .admin-shell .nav-item[data-menu="commerce"]::before,
  .admin-shell .nav-item[data-menu="support"]::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: -5px;
    border-top: 1px solid var(--border);
  }
  .admin-shell .nav-item[data-menu="commerce"],
  .admin-shell .nav-item[data-menu="support"] { position: relative; }
  .admin-shell .sidebar-session { padding: 12px 8px 0; }
  .admin-shell .logout-button { border-radius: 6px; font-weight: 500; }
  .admin-shell .main { padding: 26px 30px 56px; }
  .admin-shell .topbar,
  .admin-shell .commerce-page .topbar {
    min-height: 0;
    margin: 0 0 20px;
    padding: 0 0 19px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .admin-shell .topbar h1 { font-size: 22px; line-height: 1.35; font-weight: 700; }
  .admin-shell .topbar .breadcrumb { color: var(--text-tertiary); font-size: 12px; }
}

.admin-shell .primary-button,
.admin-shell .line-button,
.admin-shell .ghost-button,
.admin-shell .icon-button,
.admin-shell .page-button,
.admin-shell .table-action {
  border-radius: 6px;
  font-weight: 600;
}
.admin-shell .line-button:hover,
.admin-shell .ghost-button:hover,
.admin-shell .icon-button:hover,
.admin-shell .page-button:hover:not(:disabled) {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.admin-shell button:focus-visible,
.admin-shell a:focus-visible,
.admin-shell input:focus-visible,
.admin-shell select:focus-visible,
.admin-shell textarea:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.admin-shell .summary-grid { gap: 12px; }
.admin-shell .summary-card { border-radius: 8px; padding: 15px 17px; }
.admin-shell .summary-card span { color: var(--text-secondary); font-size: 12px; }
.admin-shell .summary-card strong { margin: 6px 0 3px; font-size: 24px; }
.admin-shell .summary-card small { font-size: 12px; }

.admin-shell .tabbar {
  width: max-content;
  max-width: 100%;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 16px;
}
.admin-shell .tab-button { height: 33px; border: 0; border-radius: 5px; font-size: 13px; }
.admin-shell .tab-button.active { background: var(--brand-primary); color: #fff; }
.admin-shell .toolbar,
.admin-shell .analytics-filter {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.admin-shell .search-field input,
.admin-shell .drawer-form input,
.admin-shell .drawer-form select,
.admin-shell .drawer-form textarea { border-color: var(--border-strong); border-radius: 6px; }

.admin-shell .panel,
.admin-shell .detail-panel { border-radius: 8px; }
.admin-shell .panel-header h2 { font-size: 16px; font-weight: 700; }
.admin-shell .panel-header p { color: var(--text-secondary); }
.admin-shell .table-wrap { scrollbar-width: thin; }
.admin-shell th { padding: 11px 12px; color: var(--text-secondary); background: var(--surface-soft); font-size: 12px; }
.admin-shell td { padding: 12px; }
.admin-shell tbody tr:hover td { background: var(--surface-soft); }
.admin-shell .status,
.admin-shell .state-chip { border-radius: 6px; }
.admin-shell .drawer { box-shadow: -12px 0 36px rgb(24 32 51 / 10%); }
.admin-shell .drawer-backdrop { background: rgb(24 32 51 / 38%); }

@media (max-width: 860px) {
  .admin-shell .nav-item { border-radius: 6px; }
  .admin-shell .tabbar { width: 100%; }
  .admin-shell .tab-button { white-space: nowrap; }
  .admin-shell .toolbar { gap: 10px; }
}

@media (max-width: 520px) {
  .admin-shell .summary-card strong { font-size: 18px; line-height: 1.3; }
}