/* Shared portal presentation, aligned with Groupware.
   Keep screen-specific grids, table reflow, permissions and print layouts intact. */
@media screen {
  :root {
    --bg: #f3f5f8;
    --surface: #ffffff;
    --surface-muted: #f3f6fa;
    --line: #dfe6ee;
    --text: #213247;
    --muted: #66788d;
    --blue: #285b8e;
    --primary: var(--blue);
    --green: #167553;
    --amber: #976518;
    --rose: #bc4343;
    --shadow: 0 2px 6px rgba(27, 52, 87, 0.035);
  }

  body {
    font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
  }

  .content {
    max-width: 1920px;
    margin-inline: auto;
    padding: 24px clamp(16px, 1.6vw, 30px) 42px;
  }

  .topbar {
    background: #fff;
    border-color: var(--line);
  }

  .brand-block strong {
    font-size: 13px;
    font-weight: 650;
  }

  .menu-group-tabs {
    background: #f3f5f8;
    border-color: var(--line);
  }

  .menu-group-tab,
  .tabbar :is(button, a),
  .admin-section-tabs button {
    font-weight: 650;
  }

  .menu-group-tab.active {
    background: var(--blue);
    color: #fff;
  }

  .tabbar {
    gap: 7px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #f8fafc;
  }

  .tabbar :is(button, a),
  .admin-section-tabs button {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 5px;
    font-size: 12px;
  }

  .tabbar button.active {
    background: #eaf2fb;
    border-color: #d5e2ef;
    color: var(--blue);
  }

  .admin-section-tabs button.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
  }

  .order-ops-tabs button {
    border-color: #ccd6e2;
    border-radius: 5px;
    color: #46586e;
    font-size: 12px;
    font-weight: 600;
  }

  .order-ops-tabs button.is-active,
  .daeryun-shipping-tabs button.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
  }

  .panel,
  .kpi {
    border-radius: 7px;
    border-color: var(--line);
    box-shadow: var(--shadow);
  }

  .direct-market-panel {
    background: var(--surface);
    border-top-color: var(--blue);
  }

  .panel-heading h2 {
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.45px;
  }

  .panel-heading h3 {
    font-size: 14px;
    font-weight: 650;
  }

  .panel-heading > span,
  .field-note,
  .notice {
    font-weight: 500;
  }

  .kpi {
    border-left-width: 1px;
    border-left-color: var(--line);
    border-top-width: 3px;
    padding: 17px 18px;
  }

  .kpi.accent-blue { border-top-color: var(--blue); }
  .kpi.accent-green { border-top-color: var(--green); }
  .kpi.accent-amber { border-top-color: var(--amber); }
  .kpi.accent-rose { border-top-color: var(--rose); }
  .kpi.accent-slate { border-top-color: #60748c; }

  .kpi span {
    font-size: 12px;
    font-weight: 500;
  }

  .kpi strong {
    margin-top: 9px;
    font-size: clamp(22px, 1.8vw, 28px);
    font-weight: 700;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
  }

  label {
    font-size: 12px;
    font-weight: 600;
  }

  input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"])),
  select,
  textarea {
    border-color: #cdd7e2;
    border-radius: 4px;
    font-size: 13px;
    padding: 7px 9px;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: #6a9bd0;
    box-shadow: 0 0 0 3px rgba(40, 91, 142, 0.12);
  }

  input[type="checkbox"],
  input[type="radio"] {
    accent-color: var(--blue);
  }

  input:disabled,
  select:disabled,
  textarea:disabled {
    background: #f3f5f8;
    color: var(--muted);
  }

  .primary-button,
  .secondary-button,
  .ghost-button,
  .small-button,
  .danger-button,
  .date-preset-button {
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
  }

  .secondary-button,
  .ghost-button,
  .small-button {
    border-color: #ccd6e2;
    background: #fff;
    color: #46586e;
  }

  .primary-button {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
  }

  .primary-button:hover:not(:disabled) {
    background: #204d79;
    border-color: #204d79;
  }

  :is(.secondary-button, .ghost-button, .small-button, .date-preset-button):hover:not(:disabled):not(.active):not(.danger) {
    background: #f2f6fb;
    border-color: #a8bed5;
    color: var(--blue);
  }

  .persistent-messenger-link {
    background: #eaf2fb;
    color: var(--blue);
    border-color: #bdcfe2;
  }

  .range-form > .secondary-button[type="submit"] {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
  }

  .range-form > .secondary-button[type="submit"]:hover:not(:disabled) {
    background: #204d79;
    border-color: #204d79;
    color: #fff;
  }

  :is(button, a, input, select, textarea):focus-visible {
    outline: 2px solid #6a9bd0;
    outline-offset: 2px;
  }

  /* Do not override cell layout, widths or white-space: dense business tables
     and their container-query card views retain their existing behavior. */
  th {
    background: #f3f6fa;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
  }

  td {
    border-bottom-color: #edf0f4;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  .status-pill,
  .admin-only-badge {
    border-radius: 5px;
    font-weight: 600;
  }

  .empty-state {
    border-color: var(--line);
    background: #fbfcfe;
    color: var(--muted);
  }
}

@media screen and (min-width: 721px) {
  input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"])),
  select:where(:not([multiple])) {
    min-height: 36px;
  }

  .primary-button,
  .secondary-button,
  .ghost-button,
  .danger-button,
  .date-preset-button {
    min-height: 36px;
    padding: 7px 11px;
  }

  .date-preset-group {
    min-height: 36px;
  }
}

@media screen and (max-width: 720px) {
  .content {
    padding: 16px 12px 32px;
  }

  /* Readable without focus zoom on phones; retain larger touch controls. */
  input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="color"])),
  select,
  textarea {
    font-size: 16px;
    min-height: 42px;
  }

  .primary-button,
  .secondary-button,
  .ghost-button,
  .danger-button,
  .date-preset-button,
  .tabbar :is(button, a) {
    min-height: 40px;
  }
}