/* Order history list (2-depth) — v2.
   v1 대비 바뀐 것: 위계를 굵기가 아니라 "크기"로 만들고, 상태에 의미색을 주고,
   Depth-2 를 Admin 주문편집의 grouped 뷰와 같은 2-레벨 테이블로 세웠다.

   ⚠️ 이 파일에 ?v= 를 붙이지 말 것 — 번들러가 물리 경로로 해석해 파일을 조용히 누락한다.
   갱신은 파일명 버전 증가(order-history-v3.css) + Head.cshtml 동시 수정.
   접두사는 oh- 로 통일한다 (기존 .order-item* 규칙과 충돌 방지). */

.oh-wrap {
    /* 사이트 스킴을 그대로 쓴다: simplex.styles.css :root 의 --red / --grey-black.
       ⚠️ --red 는 흰 배경 위 대비가 3.55 라 텍스트에 쓰면 AA 미달이다.
       채워진 버튼의 배경(흰 글자 위)으로만 쓰고, 링크·본문은 --oh-ink 를 쓴다. */
    --oh-primary: var(--red, #ea5648);
    --oh-secondary: var(--grey-black, #333);
    --oh-ink: var(--grey-black, #333);
    --oh-muted: #6b6b6b;          /* 흰 배경 5.33 / #fafafa 5.11 — AA 통과 */
    --oh-line: #e3e3e3;
    --oh-line-soft: #efefef;
    --oh-surface: #f7f7f7;
    --oh-depth2-bg: #fafafa;
}

/* ── search bar : 조작하는 곳을 데이터와 분리한다 ────────── */
.oh-searchbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 16px;
    background: var(--oh-surface);
}

.oh-searchbar .oh-keyword {
    flex: 1 1 260px;
    min-width: 0;
}

.oh-searchbar input[type="text"],
.oh-searchbar select {
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #d5d5d5;
    background: #fff;
    color: var(--oh-ink);
    /* 16px 미만이면 iOS 가 포커스 시 화면을 확대한다 */
    font-size: 16px;
}

.oh-searchbar .oh-period,
.oh-searchbar .oh-status {
    flex: 0 1 150px;
}

.oh-searchbar .oh-actions {
    display: flex;
    gap: 6px;
}

/* ── buttons ─────────────────────────────────────────────── */
.oh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: 0;
    background-color: var(--oh-secondary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all .3s ease-in-out 0s;
}

.oh-btn:hover,
.oh-btn:focus {
    background-color: var(--oh-primary);
    color: #fff;
    text-decoration: none;
}

.oh-btn-primary {
    background-color: var(--oh-primary);
}

.oh-btn-primary:hover,
.oh-btn-primary:focus {
    background-color: var(--oh-secondary);
}

.oh-btn-ghost {
    background-color: transparent;
    border: 1px solid #c9c9c9;
    color: var(--oh-secondary);
}

.oh-btn-ghost:hover,
.oh-btn-ghost:focus {
    background-color: var(--oh-secondary);
    border-color: var(--oh-secondary);
    color: #fff;
}

.oh-btn:focus-visible,
.oh-more:focus-visible,
.oh-toggle:focus-visible,
.oh-link-sm:focus-visible {
    outline: 2px solid var(--oh-secondary);
    outline-offset: 2px;
}

.oh-btn[disabled] {
    opacity: .55;
    cursor: default;
}

.oh-btn-sm {
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

.oh-link-sm {
    color: var(--oh-muted);
    font-size: 11px;
    text-decoration: underline;
}

.oh-link-sm:hover {
    color: var(--oh-ink);
}

/* ── toolbar ─────────────────────────────────────────────── */
.oh-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 10px;
    font-size: 13px;
    color: var(--oh-muted);
}

.oh-toolbar .oh-bulk {
    display: flex;
    gap: 6px;
}

/* ── list ────────────────────────────────────────────────── */
.oh-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.oh-table thead th {
    padding: 10px 8px;
    border-bottom: 1px solid var(--oh-line);
    color: var(--oh-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}

/* 폭은 어림잡지 않고 실제 텍스트 폭을 재서 배분했다 (약 960px 콘텐츠 기준).
   ⚠️ table-layout:fixed 는 첫 행(thead)의 셀 폭만 본다 — 폭 클래스를 th 에도 붙여야 한다. */
/* 유틸리티 컬럼은 실측 콘텐츠 최소치로 조이고, 남는 폭은 전부 PRODUCT/SKU 에 넘긴다.
   상품명은 콤마로 이어진 목록이라 가장 넓은 행이 391px 를 원한다 — 여기가 폭을 가장 잘 쓰는 곳이다. */
.oh-table .oh-cell-toggle  { width: 40px; }
.oh-table .oh-cell-thumb   { width: 96px; }   /* 44px 썸네일 2장 + 간격 + 패딩 */
.oh-table .oh-cell-order   { width: 106px; }  /* 주문번호 89 @16/700 + 패딩 16 */
.oh-table .oh-num          { width: 72px; }   /* "240 pcs" @15/600 */
.oh-table .oh-total        { width: 92px; }   /* $2,144.88 @17/700 = 76 */
.oh-table .oh-cell-status  { width: 110px; }  /* pill 96 + 송장번호가 들어갈 여유 */
.oh-table .oh-cell-actions { width: 112px; }  /* Reorder 버튼 98 */

/* 🔴 이 두 컬럼은 %가 아니라 "SKU 고정 + 상품 auto" 다. 이유 두 가지:
   1) px 합(628) + 35% 는 컨테이너가 정확히 966px 일 때만 100% 가 된다. 더 넓으면 남는 폭을
      px 컬럼들이 비례 확대로 나눠 가지고(1605 뷰포트 실측 1.19배), depth-2 는 그 배분을
      재현할 방법이 없어 컬럼이 어긋난다. auto 컬럼 하나가 잉여/부족을 다 떠안으면 나머지는
      어느 폭에서도 지정값 그대로라 두 테이블이 같은 격자를 갖는다.
   2) auto 를 SKU 가 아니라 상품에 준다 — 남는 폭은 콤마로 이어진 상품명 목록에 가는 게 맞다.
   966px 에서는 상품 208 / SKU 130 으로 종전의 21.5% / 13.5% 와 정확히 같다. */
.oh-table .oh-cell-item    { width: auto; }
.oh-table .oh-cell-sku     { width: 130px; }

.oh-table td {
    padding: 14px 8px;
    border-bottom: 1px solid var(--oh-line);
    vertical-align: middle;
    font-size: 14px;
    color: var(--oh-ink);
}

.oh-table .oh-num,
.oh-table .oh-total {
    text-align: right;
    /* 금액·수량 자릿수를 맞춰 세로로 읽히게 한다 */
    font-variant-numeric: tabular-nums;
}

/* 위계는 굵기가 아니라 크기로 만든다.
   v1 은 6개 값이 전부 14px 이고 굵기만 달랐다 — 그래서 평평하게 읽혔다. */
.oh-table td.oh-total {
    font-size: 17px;
    font-weight: 700;
}

/* 수량 편차가 1개~338개다. 주문 규모를 가르는 값이라 묻어두면 안 된다. */
.oh-table td.oh-num {
    font-size: 15px;
    font-weight: 600;
}

.oh-num .oh-unit {
    color: var(--oh-muted);
    font-size: 11px;
    font-weight: 400;
}

.oh-cell-order .oh-orderno {
    display: block;
    color: var(--oh-ink);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.oh-cell-order .oh-orderno:hover {
    text-decoration: underline;
}

.oh-cell-order .oh-date {
    display: block;
    margin-top: 2px;
    color: var(--oh-muted);
    font-size: 12px;
}

.oh-cell-item,
.oh-cell-sku {
    min-width: 0;
    /* 2줄이 되면 가운데 정렬은 위아래로 흔들려 보인다. 첫 줄을 기준선으로 고정한다. */
    vertical-align: middle;
}

/* 여러 상품이 콤마로 이어져 오므로 줄바꿈을 허용하되 줄 수를 묶는다.
   행 높이는 썸네일(44px)+패딩(14x2)=72px 가 이미 잡고 있으므로, 그 안에 들어가는
   2줄까지는 공짜다 — 행 높이를 늘리지 않으면서 한 줄일 때보다 두 배를 보여준다.
   넘치는 만큼만 말줄임되고 전문은 title 에 있다. */
.oh-item-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* 상품명은 "무엇을 샀나"라 필요하지만, 금액·주문번호·수량보다 앞설 값은 아니다.
       한 단계 낮춰 크기·굵기가 함께 내려가는 단조로운 계단을 만든다. */
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    overflow: hidden;
    /* 콤마·공백에서 먼저 끊고, 끊을 데가 없는 긴 코드만 강제로 자른다 */
    overflow-wrap: break-word;
}

.oh-item-more {
    display: block;
    color: var(--oh-muted);
    font-size: 11px;
}

/* SKU 는 보조 정보다. 이 스토어는 상품 74%가 Name == Sku 라 두 컬럼이 같은 값을 보일 때가
   많은데, 크기·색을 낮춰 두면 중복이 소음이 아니라 부연으로 읽힌다. */
.oh-cell-sku .oh-sku {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--oh-muted);
    font-size: 11px;
    line-height: 1.35;
    overflow: hidden;
    overflow-wrap: break-word;
}

/* ── thumbnails ──────────────────────────────────────────── */
.oh-thumbs {
    display: flex;
    align-items: center;
    gap: 4px;
}

.oh-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 1px solid var(--oh-line-soft);
    background: #fff;
}

.oh-thumb-more {
    color: var(--oh-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── row ─────────────────────────────────────────────────── */
.oh-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    /* 아이콘이 currentColor 를 쓰므로 여기 색이 곧 아이콘 색이다.
       muted 로 두면 20px 스트로크가 배경에 묻혀 다시 안 보인다. */
    color: var(--oh-ink);
    line-height: 1;
    cursor: pointer;
}

/* ▸(U+25B8)는 12x10px 로 렌더됐고 폰트마다 모양이 달랐다.
   Lucide chevron 은 stroke 라 크기·굵기를 CSS 로 정확히 제어할 수 있다. */
.oh-toggle .oh-caret {
    display: block;
    width: 20px;
    height: 20px;
}

/* ⚠️ 회전으로 상태를 표현하지 않는다 — 이 테마에서 CSS transform 은 SVG 에 적용되지 않는다
   (45deg 를 줘도 bounding box 가 20x20 그대로였다). 두 아이콘을 바꿔 끼운다. */
.oh-toggle .oh-caret-open,
.oh-row[data-expanded="true"] .oh-toggle .oh-caret-closed {
    display: none;
}

.oh-row[data-expanded="true"] .oh-toggle .oh-caret-open {
    display: block;
}

.oh-toggle:hover .oh-caret {
    color: var(--oh-primary);
}

/* 행 아무 곳이나 눌러 펼칠 수 있다. 버튼·링크는 JS 가 제외한다. */
.oh-row[data-oh-rowtoggle] {
    cursor: pointer;
}

.oh-row[data-oh-rowtoggle]:hover td {
    background-color: #fafafa;
}

/* 마우스에는 :hover 로 행 단위 피드백을 주면서 키보드에는 아무것도 주지 않으면
   탭으로 이동하는 사용자는 자기가 어느 행에 있는지 알 수 없다. */
.oh-row[data-oh-rowtoggle]:focus-within td {
    background-color: #fafafa;
}

.oh-row[data-expanded="true"] td {
    background-color: #f5f7f8;
}

/* ── status pill : 7px 점 대신 읽히는 라벨 ───────────────── */
.oh-status-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 2px;
    background: #efefef;
    color: #5c5c5c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* 틴트 배경 + 진한 글자. 네 조합 모두 5.65 이상으로 AA 를 넘는다.
   브랜드 red 는 여기 쓰지 않는다 — 그 색은 "누를 것"을 뜻한다. */
.oh-status-chip.oh-st-pending    { background: #fdf3d9; color: #7a5804; }
.oh-status-chip.oh-st-processing { background: #e4eefc; color: #1a4f8f; }
.oh-status-chip.oh-st-complete   { background: #e3f3ea; color: #1b6b45; }
.oh-status-chip.oh-st-cancelled  { background: #efefef; color: #5c5c5c; }

/* 송장번호는 상태의 부연이다 — 상태 pill 아래에 더 작고 흐리게. */
.oh-tracking,
.oh-shipped {
    display: block;
    margin-top: 3px;
    color: var(--oh-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oh-tracking {
    font-variant-numeric: tabular-nums;
}

.oh-rowactions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

/* ── depth-2 : Admin grouped 뷰와 같은 2-레벨 테이블 ─────── */
.oh-items-cell {
    padding: 0 !important;
    background: var(--oh-depth2-bg);
}

/* 좌우 패딩이 있으면 depth-2 테이블 폭이 depth-1 과 달라져 컬럼이 어긋난다.
   들여쓰기는 패딩이 아니라 첫 컬럼(oh-d2-pic 136px = toggle 40 + thumb 96)이 만든다. */
.oh-items {
    padding: 8px 0 12px;
}

.oh-d2 {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    /* auto 레이아웃이면 아래 폭은 제안일 뿐이라 패널마다 컬럼 위치가 달라진다 */
    table-layout: fixed;
}

.oh-d2 thead th {
    padding: 6px 8px;
    border-bottom: 1px solid var(--oh-line);
    color: var(--oh-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
}

.oh-d2 td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--oh-line-soft);
    vertical-align: middle;
}

/* depth-1(.oh-table)의 9컬럼 경계 위에 depth-2 7컬럼을 얹는다 — 인접 2쌍(toggle+thumb,
   order+item)만 병합하면 두 테이블의 고정폭 총합이 652px 로 같아지고, 남는 폭은 양쪽 다
   유일한 auto 컬럼(item ↔ product)이 흡수한다. 컨테이너 폭이 얼마든 경계가 일치한다.
   덕분에 행을 펼쳐도 세로 괘선이 끊기지 않고 숫자열이 같은 x 좌표에서 읽힌다.
   ⚠️ calc(% + px) 로 두 컬럼을 한 칸에 합치는 매핑은 안 된다 — 크롬은 fixed 레이아웃에서
      %를 담은 calc 를 auto 로 취급해 다른 auto 컬럼과 남은 폭을 균등 분할한다(실측).
   ⚠️ 폭 클래스는 thead th 에도 붙어 있어야 한다 — 셀렉터가 클래스만 보므로 이미 충족. */
.oh-d2 .oh-d2-pic     { width: 136px; }   /* toggle 40 + thumb 96 */
.oh-d2 .oh-d2-product { width: auto; }    /* order 106 + item(auto) — 이쪽도 유일한 auto 컬럼 */
.oh-d2 .oh-d2-sizes   { width: 130px; }   /* sku */
.oh-d2 .oh-d2-price,
.oh-d2 .oh-d2-qty,
.oh-d2 .oh-d2-amount { text-align: right; font-variant-numeric: tabular-nums; }
.oh-d2 .oh-d2-price   { width: 72px; }    /* num */
.oh-d2 .oh-d2-qty     { width: 92px; }    /* total */
.oh-d2 .oh-d2-amount  { width: 110px; }   /* status */
.oh-d2 .oh-d2-act    { width: 112px; text-align: right; }  /* actions */

/* 이 컬럼은 depth-1 의 toggle(40) + thumb(96) 두 칸을 합친 것이라, 기본 패딩(8)만 두면
   사진이 캐럿 자리에서 시작한다. toggle 폭만큼 밀어 depth-1 썸네일과 같은 x 에서 시작시킨다. */
.oh-d2 td.oh-d2-pic {
    padding-left: 48px;   /* 40(toggle) + 8(셀 패딩) */
}

.oh-d2 .oh-d2-pic img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--oh-line-soft);
}

/* Level 1 — 상품. Admin 은 파랑(#eef2f8 / #3b9dc4)을 쓰지만 여기서는 무채색으로 세운다.
   브랜드 red 를 구조선에 쓰면 액션과 구분이 사라진다. */
.oh-d2-style > td {
    border-top: 2px solid var(--oh-secondary);
    background: #f2f2f2;
    font-weight: 700;
}

.oh-d2-name {
    font-size: 14px;
}

.oh-d2-name a {
    color: var(--oh-ink);
    text-decoration: none;
}

.oh-d2-name a:hover {
    text-decoration: underline;
}

.oh-d2-sku {
    display: block;
    margin-top: 1px;
    color: var(--oh-muted);
    font-size: 11px;
    font-weight: 400;
}

/* Level 2 — 색상. 배경을 흰색으로 두면 회색 상품 행과 자연히 계단이 진다. */
.oh-d2-color > td {
    background: #fff;
    font-weight: 400;
}

.oh-d2-colorcell {
    padding-left: 28px !important;
    border-left: 3px solid #d9d9d9;
}

.oh-d2-colorname {
    font-weight: 600;
}

.oh-d2-pack {
    margin-left: 6px;
    color: var(--oh-muted);
    font-size: 11px;
}

/* 사이즈 칩 — 체크아웃 확인 페이지의 .confirmation-size-slot 과 같은 모양("S: 2").
   같은 주문을 확인 화면과 이력 화면에서 볼 때 표기가 달라지면 같은 값인지 의심하게 된다. */
.oh-d2-sizes {
    color: #46535f;
}

/* 이 셀에 오는 건 표준 상품뿐이다 — 매트릭스는 아래 .oh-mx 격자로 빠졌다.
   컬럼이 depth-1 SKU 폭(13.5% ≈ 130px)에 맞춰졌으므로 한 줄 고정이면 칩이 잘린다. 줄바꿈시킨다. */
.oh-sizes-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    row-gap: 3px;
    align-items: center;
}

.oh-size {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    padding: 2px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #f9f9f9;
    color: #777;
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
}

.oh-size-label {
    color: #777;
}

.oh-size-qty {
    color: var(--oh-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── 매트릭스 격자 (색상 x 사이즈) ──────────────────────── */
/* 우측 패딩 112px = depth-2 act 컬럼 폭. 격자의 오른쪽 끝이 amount 컬럼 오른쪽 끝과 만나므로
   아래 mx-qty 92 / mx-amt 110 이 depth-2 qty / amount 와 같은 x 좌표에 떨어진다. */
.oh-d2-matrixrow > td {
    background: #fff;
    padding: 8px 112px 10px 28px !important;
    border-left: 3px solid #d9d9d9;
}

/* 🔴 여기만 auto 레이아웃이다. 사이즈 열 개수가 스타일마다 다른데 fixed + 고정폭이면
   열이 8개만 넘어도 지정폭 합이 100% 를 넘어 표가 셀 밖으로 밀려나가고(실측), 그 순간
   Qty/Amount 정렬이 깨진다. auto 는 100% 를 넘지 않으므로 열이 늘어도 안전하다. */
.oh-mx {
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 12px;
}

/* 오른쪽 두 열만 상위 컬럼에 못 박는다 — depth-2 qty / amount 와 같은 폭 */
.oh-mx .oh-mx-qty { width: 92px; }
.oh-mx .oh-mx-amt { width: 110px; }

.oh-mx th,
.oh-mx td {
    padding: 4px 10px;
    border: 1px solid #e8e8e8;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.oh-mx thead th {
    background: #f7f7f7;
    color: var(--oh-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* 색상 이름은 행의 머리다 — 유일하게 왼쪽 정렬이라 눈이 행을 잡는다.
   폭을 주지 않아 격자의 남는 폭을 전부 흡수한다(왼쪽 정렬이라 넓어도 자연스럽다). */
.oh-mx .oh-mx-color {
    text-align: left;
    font-weight: 600;
    color: var(--oh-ink);
}

/* 값은 1~3자리, 머리는 S/M/L/1X 정도다. width:1px 은 auto 레이아웃에서 "내용 최소폭까지
   줄여라"는 뜻이다 — 이렇게 해야 사이즈가 1개뿐인 스타일에서 숫자 하나가 400px 짜리 칸에
   홀로 뜨지 않고, 남는 폭이 색상 이름으로 간다. */
.oh-mx .oh-mx-size {
    width: 1px;
    padding: 4px 6px;
}

.oh-mx thead .oh-mx-color {
    font-weight: 700;
}

.oh-mx .oh-mx-qty,
.oh-mx .oh-mx-amt {
    font-weight: 600;
    background: #fafafa;
}

/* 그 색상이 사지 않은 사이즈는 0 이 아니라 빈 칸이다 — 0개와 구분한다 */
.oh-mx .oh-mx-empty {
    color: #c9c9c9;
}

.oh-mx-row:hover > td {
    background: #f7f9fa;
}

/* 색상 8개 초과분은 접는다 */
.oh-d2-color.oh-color-extra,
.oh-mx-row.oh-color-extra {
    display: none;
}

.oh-d2-color.oh-color-extra.is-open,
.oh-mx-row.oh-color-extra.is-open {
    display: table-row;
}

.oh-d2-morerow > td {
    background: #fff;
    border-bottom: 1px solid var(--oh-line-soft);
}

.oh-more {
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--oh-secondary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.oh-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid #ccc;
    color: var(--oh-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.oh-loading,
.oh-error {
    padding: 14px 12px;
    color: var(--oh-muted);
    font-size: 13px;
}

.oh-error {
    color: #a33;
}

/* ── empty / toast ───────────────────────────────────────── */
.oh-empty {
    padding: 40px 0;
    text-align: center;
    color: var(--oh-muted);
}

.oh-empty a {
    text-decoration: underline;
}

.oh-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 1080;
    max-width: 90vw;
    padding: 12px 16px;
    transform: translateX(-50%);
    background: rgba(30, 30, 30, .95);
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
}

.oh-toast ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

/* ── mobile : 표를 카드 스택으로 ─────────────────────────── */
@media (max-width: 767.98px) {
    /* 손가락으로 누르는 화면에서는 -sm 도 44px 아래로 내려가지 않는다.
       개별 자리마다 올리면 빠뜨리는 곳이 생기므로 여기서 한 번에 올린다.
       .oh-more / .oh-link-sm 는 버튼 모양이 아니지만 누르는 것은 같다. */
    .oh-btn,
    .oh-btn-sm,
    .oh-more,
    .oh-link-sm,
    .oh-toggle {
        min-height: 44px;
    }

    .oh-btn,
    .oh-btn-sm {
        height: 44px;
    }

    .oh-toggle {
        width: 44px;
        height: 44px;
    }

    .oh-link-sm {
        display: inline-flex;
        align-items: center;
    }

    .oh-table {
        table-layout: auto;
    }

    .oh-table thead {
        display: none;
    }

    .oh-table,
    .oh-table tbody,
    .oh-table tr,
    .oh-table td {
        display: block;
        width: 100%;
    }

    .oh-row {
        position: relative;
        display: grid !important;
        grid-template-columns: 56px 1fr auto;
        column-gap: 10px;
        padding: 12px 0 10px;
        border-bottom: 1px solid var(--oh-line);
    }

    .oh-row td {
        padding: 1px 0;
        border: 0;
    }

    .oh-cell-toggle {
        position: absolute;
        top: 8px;
        right: 0;
        width: auto !important;
        padding: 0;
    }

    .oh-cell-thumb {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: auto !important;
    }

    .oh-cell-order,
    .oh-cell-item,
    .oh-cell-sku,
    .oh-cell-status {
        grid-column: 2;
        width: auto !important;
        padding-right: 48px;
    }

    .oh-table .oh-num,
    .oh-table .oh-total {
        grid-column: 2;
        text-align: left;
        width: auto !important;
    }

    .oh-rowactions {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        padding-top: 8px;
    }

    .oh-searchbar .oh-keyword,
    .oh-searchbar .oh-actions {
        flex: 1 1 100%;
    }

    .oh-searchbar .oh-period,
    .oh-searchbar .oh-status {
        flex: 1 1 calc(50% - 4px);
    }

    .oh-searchbar .oh-actions .oh-btn {
        flex: 1 1 auto;
    }

    /* 데스크톱에서 컬럼 정렬용으로 준 값들을 되돌린다 — 스택 레이아웃에는 해가 된다 */
    .oh-items {
        padding: 8px 12px 12px;
    }

    /* 🔴 .oh-d2 td 의 width:100% 보다 클래스 셀렉터가 더 구체적이라 이기지 못한다.
       데스크톱 격자용 폭을 남겨두면 390px 스택 레이아웃에서 가로 오버플로가 난다. */
    .oh-d2 .oh-d2-product,
    .oh-d2 .oh-d2-sizes {
        width: auto;
    }

    .oh-d2-matrixrow > td {
        padding: 8px 0 10px 12px !important;
        overflow-x: auto;
    }

    .oh-mx {
        width: auto;
        min-width: 100%;
        table-layout: auto;
    }

    /* depth-2 표도 스택으로 — 390px 에서 7열은 성립하지 않는다 */
    .oh-d2,
    .oh-d2 tbody,
    .oh-d2 tr,
    .oh-d2 td {
        display: block;
        width: 100%;
    }

    .oh-d2 thead {
        display: none;
    }

    .oh-d2 .oh-d2-pic {
        display: none;
    }

    .oh-d2-style,
    .oh-d2-color {
        display: grid !important;
        grid-template-columns: 1fr max-content max-content;
        column-gap: 10px;
        padding: 8px 0;
    }

    .oh-d2 td {
        border: 0;
        padding: 1px 0;
    }

    .oh-d2-style > td:first-child,
    .oh-d2-color > td:first-child {
        display: none;
    }

    .oh-d2-product {
        grid-column: 1;
    }

    .oh-d2-sizes {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .oh-d2-price {
        display: none;
    }

    .oh-d2-act {
        grid-column: 1 / -1;
        text-align: left !important;
        padding-top: 6px !important;
    }

    .oh-d2-colorcell {
        padding-left: 12px !important;
    }
}