@charset "UTF-8";

@font-face {
    font-family: "Pretendard";
    src: url("fonts/PretendardVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Gmarket Sans";
    src: url("fonts/GmarketSansMedium.woff") format("woff");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Gmarket Sans";
    src: url("fonts/GmarketSansBold.woff") format("woff");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    /* 목업의 #f6f6f3, #101113, #de3730을 기준으로 한 색상. */
    --paper: oklch(97.2% .004 106);
    --surface: oklch(99.3% .002 106);
    --ink: oklch(17.8% .005 271);
    --muted: oklch(47% .010 273);
    --line: oklch(85% .012 106);
    --accent: oklch(60% .208 27);
    --accent-light: oklch(73% .15 27);
    --green: oklch(51% .109 155);
    --font-ui: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --font-display: "Gmarket Sans", "Pretendard", sans-serif;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.65 var(--font-ui); word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { line-height: 1.4; letter-spacing: -.05em; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; cursor: pointer; }
button, a, summary { touch-action: manipulation; }
button:disabled { cursor: default; }
img, svg { display: block; max-width: 100%; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { color: var(--surface); background: var(--accent); }

/* 업무 화면 셀렉트 공통 모양(사용자 요청 2026-10-06, 판매내역 셀렉트 기준). 여러 줄 목록(multiple·size)은 제외.
   - 화살표·오른쪽 여백은 이 규칙이 정한다(페이지 규칙보다 우선). 페이지는 높이·너비·왼쪽 여백·글자 크기만 정한다.
   - 기본: 화살표 오른쪽 13px, 글자 오른쪽 여백 36px. 작은 셀렉트(높이 28px 이하·글자 12px 이하)는 페이지 규칙에서
     --select-arrow-right: 8px; --select-arrow-pad: 24px; 로 줄인다.
   - 흐린 상태(disabled)의 배경·글자색·화살표도 이 규칙이 정한다. 테두리·배경색·마우스 올림·포커스는 기본값이라 페이지 규칙이 있으면 페이지 쪽이 이긴다. */
select:not([multiple]):not([size]) { padding-right: var(--select-arrow-pad, 36px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23585a60' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--select-arrow-right, 13px) center; background-size: 12px 12px; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
select:not([multiple]):not([size]):disabled { background-color: #f3f3ee; color: var(--muted); cursor: not-allowed; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23b5b6ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E"); }
:where(select:not([multiple]):not([size])) { border: 1px solid var(--line); border-radius: 6px; background-color: var(--surface); color: var(--ink); cursor: pointer; text-overflow: ellipsis; }
:where(select:not([multiple]):not([size]):hover:not(:disabled)) { border-color: oklch(63% .008 273); }
:where(select):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.container { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; padding: 12px 20px; color: var(--surface); background: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

/* 공통 헤더와 메뉴 */
.site-header { position: sticky; top: 0; z-index: 30; min-height: 89px; border-bottom: 1px solid var(--line); background: var(--paper); }
.header-inner { min-height: 89px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: baseline; gap: 4px; flex-shrink: 0; font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.brand-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.site-navigation { display: flex; align-items: center; gap: 36px; font-size: 13px; }
.site-navigation > a:not(.button) { padding-block: 12px; transition: color .2s; }
.site-navigation > a:not(.button):hover { color: var(--accent); }
.nav-user { display: inline-flex; gap: 3px; align-items: center; font-size: 12px; }
.nav-user strong { max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.logout-form { margin: 0; }
.nav-logout { min-height: 42px; padding: 10px 0; background: transparent; color: var(--muted); font-size: 12px; white-space: nowrap; }
.nav-logout:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.nav-home { flex-shrink: 0; white-space: nowrap; }
.flash-message { margin-block: 15px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 13px; }
.flash-message.is-error { color: oklch(48% .18 27); }
.menu-toggle { display: none; background: transparent; width: 44px; height: 44px; padding: 12px; }
.menu-toggle span { display: block; width: 20px; height: 1px; background: var(--ink); margin: 5px 0; transition: transform .25s var(--ease-out); }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* 공통 버튼 */
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 55px; padding: 17px 23px; border: 1px solid var(--ink); border-radius: 3px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 650; line-height: 1.3; transition: background .2s, border-color .2s; }
.button > span { font-size: 22px; line-height: 1; transition: transform .3s var(--ease-out); }
.button:hover { background: oklch(28% .005 271); border-color: oklch(28% .005 271); }
.button:hover > span { transform: translate(3px, -3px); }
.button-small { gap: 25px; min-height: 42px; padding: 11px 18px; font-size: 12px; }
.button-small > span { font-size: 17px; }

/* 공통 입력 필드 */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; }
.field input { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 14px; transition: border-color .2s; }
.field input::placeholder { color: oklch(58% .008 273); opacity: 1; }
.field input:hover { border-color: oklch(63% .008 273); }
.field input:focus { border-color: var(--ink); }
.field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: var(--accent); }
.field input[aria-invalid="true"]:focus-visible { outline-color: var(--accent); }
.field-error { color: oklch(48% .18 27); font-size: 12px; line-height: 1.6; }
.field-hint { color: var(--muted); font-size: 11px; line-height: 1.6; }
.field-optional { margin-left: 6px; color: var(--muted); font-size: 11px; font-weight: 400; }
.password-field { position: relative; }
.password-field input { padding-right: 72px; }
.password-toggle { position: absolute; right: 4px; top: 4px; min-width: 58px; min-height: 40px; padding: 8px; border-radius: 4px; background: transparent; color: var(--muted); font-size: 12px; }
.password-toggle:hover { color: var(--ink); background: var(--paper); }

/* 공통 푸터 */
.site-footer { padding: 44px 0 27px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.footer-inner p { font-size: 12px; color: var(--muted); margin-top: 14px; }
.footer-links { display: flex; gap: 25px; flex-wrap: wrap; font-size: 12px; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.footer-bottom small { font-size: inherit; }
.footer-bottom > span { font-size: 9px; letter-spacing: .09em; }

@media (max-width: 1150px) {
    .container { width: calc(100% - 64px); }
    .site-navigation { gap: 24px; }
}

@media (max-width: 700px) {
    html { scroll-padding-top: 90px; }
    .container { width: calc(100% - 40px); }
    .site-header, .header-inner { min-height: 72px; }
    .header-inner { position: relative; flex-wrap: wrap; gap: 0; padding-block: 22px; }
    .brand { font-size: 21px; }
    .site-navigation { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; font-size: 12px; }
    .has-js .header-inner { padding-block: 14px; }
    .has-js .menu-toggle { display: block; margin-left: auto; }
    .has-js .site-navigation { display: none; }
    .has-js .site-navigation.is-open { display: flex; }
    .footer-inner { align-items: flex-start; flex-direction: column; gap: 25px; }
    .footer-links { gap: 20px; font-size: 11px; }
    .footer-bottom { margin-top: 25px; }
}

@media (min-width: 701px) and (max-width: 1100px) {
    .header-inner { gap: 20px; }
    .site-navigation { gap: 18px; }
    .site-navigation .nav-user { display: none; }
}

/* 로그인 후 공통 작업 공간: blank.html을 상속하는 페이지에서 사용 */
.workspace-page {
    --sidebar-surface: oklch(17.8% .005 271);
    --sidebar-hover: oklch(26% .008 271);
    --sidebar-active: oklch(33% .010 271);
    --sidebar-text: oklch(85% .008 106);
    --sidebar-muted: oklch(67% .008 106);
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.workspace-sidebar { display: flex; flex: 0 0 232px; flex-direction: column; width: 232px; min-height: 0; padding: 20px 14px 18px; background: var(--sidebar-surface); color: var(--sidebar-text); }
.workspace-brand-row { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin-bottom: 16px; padding-left: 10px; }
.workspace-brand { color: var(--surface); font: 700 19px/1 var(--font-display); letter-spacing: .02em; }
.workspace-side-toggle { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid oklch(35% .008 271); border-radius: 6px; background: transparent; color: var(--sidebar-muted); }
.workspace-side-toggle:hover { background: var(--sidebar-hover); color: var(--surface); }
.workspace-close-icon { display: none; }
.workspace-nav { display: flex; flex: 1; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: oklch(40% .008 271) transparent; }
.workspace-nav-item, .workspace-nav-group > summary { display: flex; flex: none; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px; border-radius: 6px; background: transparent; color: var(--sidebar-text); font-size: 14px; line-height: 24px; text-align: left; white-space: nowrap; }
.workspace-nav-item:not(:disabled):hover, .workspace-nav-group > summary:hover { background: var(--sidebar-hover); color: var(--surface); }
.workspace-nav-item.is-active { background: var(--sidebar-active); color: var(--surface); font-weight: 600; }
.workspace-nav button:disabled { color: var(--sidebar-muted); }
.workspace-icon { display: inline-flex; flex: 0 0 24px; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 17px; line-height: 1; }
.workspace-kream-icon { border: 1px solid oklch(37% .008 271); border-radius: 6px; background: oklch(27% .008 271); color: var(--surface); font: 700 12px/1 var(--font-display); padding-top: 2px; }
.workspace-kream-icon.is-seller { border-color: var(--green); background: var(--green); }
.workspace-nav-group { flex: none; margin-bottom: 2px; }
.workspace-nav-group > summary { color: var(--paper); font-weight: 600; cursor: pointer; list-style: none; }
.workspace-nav-group > summary::-webkit-details-marker { display: none; }
.workspace-nav-group.is-active > summary { background: var(--sidebar-hover); color: var(--surface); }
.workspace-nav-group > summary::after { content: ""; flex: none; width: 5px; height: 5px; margin-left: auto; margin-right: 3px; border-top: 1px solid var(--sidebar-muted); border-right: 1px solid var(--sidebar-muted); transform: rotate(45deg); transition: transform .15s var(--ease-out); }
.workspace-nav-group[open] > summary::after { transform: rotate(135deg); }
.workspace-subnav { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px; }
.workspace-subnav-link { display: block; min-height: 37px; padding: 8px 10px 8px 44px; border-radius: 6px; background: transparent; color: var(--sidebar-text); font-size: 13px; line-height: 21px; text-align: left; white-space: nowrap; }
.workspace-subnav-link:hover { background: var(--sidebar-hover); color: var(--surface); }
.workspace-subnav-link.is-active { background: var(--sidebar-active); color: var(--surface); font-weight: 600; }
.workspace-nav :focus-visible, .workspace-side-toggle:focus-visible { outline-color: var(--paper); outline-offset: -3px; }
.workspace-connections { display: flex; flex: none; flex-direction: column; gap: 6px; margin-top: 18px; padding: 14px 10px 0; border-top: 1px solid oklch(31% .008 271); color: var(--sidebar-muted); font-size: 12px; }
.workspace-connections > span { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.workspace-status-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: oklch(57% .008 106); }
.workspace-shell { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.workspace-topbar { display: flex; flex: none; align-items: center; gap: 14px; min-height: 56px; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--surface); }
.workspace-topbar h1 { flex: none; font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.workspace-topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; min-width: 0; margin-left: auto; font-size: 13px; }
.workspace-account { display: flex; align-items: center; gap: 9px; min-width: 0; }
.workspace-avatar { display: inline-flex; flex: 0 0 28px; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; }
.workspace-email { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 로그아웃 = 위험 버튼 모양(2026-11-05 사용자 요청, 보관·일반 danger 버튼과 같은 색) */
.workspace-logout { min-height: 30px; padding: 0 10px; border: 1px solid oklch(83% .045 28); border-radius: 6px; background: var(--surface); color: oklch(46% .15 28); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.workspace-logout:hover { border-color: oklch(46% .15 28); background: oklch(96% .022 28); }
.workspace-logout:focus-visible { outline: 2px solid oklch(46% .15 28); outline-offset: 2px; }
/* 2026-11-03 박건규 작업: 옅은 공통 배경 안에 날짜·상태·행동을 일정한 간격과 높이로 정리합니다. */
.workspace-membership { display: flex; flex: none; align-items: center; gap: 12px; min-height: 44px; padding: 5px 5px 5px 12px; border: 1px solid oklch(91% .006 106); border-radius: 10px; background: var(--paper); }
.workspace-membership-info { display: flex; flex-direction: column; gap: 2px; }
.workspace-membership-label { color: var(--muted); font-size: 10px; font-weight: 500; line-height: 12px; white-space: nowrap; }
.workspace-membership-date { color: var(--ink); white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 16px; font-variant-numeric: tabular-nums; }
.workspace-membership-dday { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 24px; padding: 3px 8px; border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 11px; line-height: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 2026-11-03 박건규 작업: 등록된 모든 D-day를 빨간색으로 강조합니다. */
.workspace-membership:not([data-status="unknown"]) .workspace-membership-dday { background: oklch(94% .035 27); color: oklch(45% .14 27); }
.workspace-membership-renew { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 6px 10px; border-radius: 6px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; transition: background-color .15s ease; }
.workspace-membership-renew:hover { background: oklch(32% .008 271); }
.workspace-membership-renew:active { background: oklch(24% .008 271); }
.workspace-membership-renew:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .workspace-membership-renew { transition: none; } }
/* 2026-11-03 박건규 작업: 만료 임박 로그인 알림과 연장 구매 버튼의 반응형 디자인. */
.membership-reminder { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px oklch(15% .01 250 / .2); }
.membership-reminder::backdrop { background: oklch(15% .01 250 / .45); backdrop-filter: blur(3px); }
.membership-reminder-top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 12px 24px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .03em; }
.membership-reminder-top button { width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 24px; cursor: pointer; }
.membership-reminder-top button:hover { background: var(--paper); color: var(--ink); }
.membership-reminder-content { padding: 28px 28px 20px; }
.membership-reminder-badge { display: inline-block; padding: 5px 10px; border-radius: 6px; background: oklch(96% .025 27); color: oklch(45% .14 27); font-size: 13px; font-weight: 700; }
.membership-reminder h2 { margin: 16px 0 12px; font-size: 23px; font-weight: 700; line-height: 1.4; letter-spacing: -.04em; word-break: keep-all; }
.membership-reminder-content p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; word-break: keep-all; }
.membership-reminder-date { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 0; padding: 16px 0; border-block: 1px solid var(--line); font-size: 13px; }
.membership-reminder-date dt { color: var(--muted); }
.membership-reminder-date dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.membership-reminder-purchase { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 48px; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: 14px; font-weight: 600; }
.membership-reminder-purchase:hover { background: oklch(30% .01 250); }
.membership-reminder-later { display: block; width: 100%; min-height: 44px; margin-top: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; }
.membership-reminder-later:hover { background: var(--paper); color: var(--ink); }
.membership-reminder :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 420px) { .membership-reminder-content { padding: 24px 20px 16px; } .membership-reminder h2 { font-size: 21px; } }
@media (max-width: 800px) {
    .workspace-topbar:has(.workspace-membership) { flex-wrap: wrap; padding-block: 6px; }
    .workspace-topbar-right:has(.workspace-membership) { flex: 1 1 auto; flex-wrap: wrap; gap: 8px 12px; }
}
@media (max-width: 600px) {
    .workspace-topbar-right:has(.workspace-membership) { flex-basis: 100%; margin-left: 0; }
    .workspace-topbar-right:has(.workspace-membership) .workspace-account { margin-right: auto; }
    /* 2026-11-03 박건규 작업: 작은 화면에서는 이용기간 묶음을 독립된 한 줄로 넓혀 터치 공간을 확보합니다. */
    .workspace-membership { order: 10; flex-basis: 100%; gap: 12px; padding: 5px 5px 5px 12px; }
    .workspace-membership-info { margin-right: auto; }
    .workspace-membership-renew { min-height: 40px; padding-inline: 14px; }
}
.workspace-menu-toggle { display: none; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 6px; background: transparent; }
.workspace-menu-toggle:hover { background: var(--paper); }
.workspace-content { flex: 1; min-width: 0; min-height: 0; padding: 26px 28px 40px; overflow-y: auto; }
.workspace-content:focus { outline: none; }
.workspace-content > .flash-message { margin-top: 0; }
.workspace-backdrop { display: none; }

@media (min-width: 801px) {
    .workspace-page.is-rail .workspace-sidebar { flex-basis: 64px; width: 64px; padding-inline: 10px; }
    .workspace-page.is-rail .workspace-brand-row { justify-content: center; padding: 0; }
    .workspace-page.is-rail .workspace-brand { display: none; }
    .workspace-page.is-rail .workspace-collapse-icon { transform: rotate(180deg); }
    .workspace-page.is-rail .workspace-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .workspace-page.is-rail .workspace-nav-item, .workspace-page.is-rail .workspace-nav-group > summary { gap: 0; }
    .workspace-page.is-rail .workspace-nav-group > summary::after, .workspace-page.is-rail .workspace-subnav { display: none; }
    .workspace-page.is-rail .workspace-connections { align-items: center; padding-inline: 0; }
}

@media (max-width: 1100px) {
}

@media (max-width: 800px) {
    .workspace-topbar { gap: 8px; min-height: 60px; padding-inline: 12px 16px; }
    .workspace-topbar-right { gap: 12px; }
    .workspace-email { max-width: 180px; font-size: 12px; }
    .workspace-content { padding: 20px 18px 28px; }
    .workspace-page:not(.has-js) { flex-direction: column; height: auto; min-height: 100dvh; overflow: auto; }
    .workspace-page:not(.has-js) .workspace-sidebar { flex-basis: auto; width: 100%; max-height: 50dvh; }
    .workspace-page:not(.has-js) .workspace-connections { display: none; }
    .workspace-page:not(.has-js) .workspace-content { min-height: 50dvh; }
    .has-js .workspace-menu-toggle { display: inline-flex; }
    .has-js .workspace-sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(288px, calc(100% - 44px)); transform: translateX(-100%); visibility: hidden; transition: transform .2s var(--ease-out), visibility 0s linear .2s; }
    .has-js.is-sidebar-open .workspace-sidebar { transform: translateX(0); visibility: visible; transition-delay: 0s; }
    .has-js .workspace-side-toggle { width: 40px; height: 40px; }
    .has-js .workspace-collapse-icon { display: none; }
    .has-js .workspace-close-icon { display: block; }
    .workspace-backdrop { display: block; position: fixed; z-index: 50; inset: 0; background: oklch(17.8% .005 271 / .38); }
    .workspace-subnav-link { min-height: 40px; }
}

@media (max-width: 420px) {
    .workspace-topbar h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .workspace-topbar-right { flex: none; }
    .workspace-email { display: none; }
    .workspace-topbar-right { gap: 8px; }
    .workspace-account { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* 입점 재인증: 모든 작업 화면에서 같은 dialog를 사용합니다. */
.business-auth-modal { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); overflow: auto; font-size: 14px; line-height: 1.6; }
.business-auth-modal::backdrop { background: oklch(20% .006 271 / .42); }
.business-auth-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.business-auth-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.business-auth-modal button, .business-auth-actions a { min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.business-auth-modal button:hover:not(:disabled) { background: var(--paper); }
.business-auth-modal button:disabled { opacity: .45; cursor: not-allowed; }
.business-auth-modal :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.business-auth-head button { border: 0; padding: 4px 10px; font-size: 24px; line-height: 1; }
.business-auth-address { margin: 8px 0 16px; font-weight: 600; overflow-wrap: anywhere; }
.business-auth-feedback { min-height: 22px; margin: 12px 0; }
.business-auth-feedback.is-error { color: oklch(46% .15 28); }
.business-auth-hint, #business-auth-description { color: var(--muted); font-size: 12px; }
.business-auth-code-line { display: flex; gap: 8px; margin: 8px 0; }
.business-auth-code-line input { flex: 1; width: 0; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 18px; letter-spacing: .08em; }
.business-auth-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.business-auth-actions .is-primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.business-auth-actions .is-primary:hover:not(:disabled) { background: oklch(31% .008 271); }

/* 날짜와 계정 사이의 공통 작업 표시. 페이지 이동 후에도 같은 DB 상태를 봅니다. */
/* 입점 재인증 뱃지(상단, 날짜 왼쪽): 개인 보판 뱃지와 같은 모양, primary(먹색 바탕 — 화면의 주요 버튼과 같은 색) */
.workspace-auth-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--ink); border-radius: 6px; background: var(--ink); color: var(--surface); font-size: 11px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.workspace-auth-badge[hidden] { display: none; }
.workspace-auth-badge:hover { background: oklch(31% .008 271); }
.workspace-auth-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--surface); }
.workspace-bopan { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid oklch(87% .025 250); border-radius: 6px; background: oklch(97% .01 250); white-space: nowrap; font-size: 11px; }
.workspace-bopan[hidden] { display: none; }
.workspace-bopan a { display: inline-flex; align-items: center; gap: 6px; color: oklch(39% .09 250); }
.workspace-bopan a:hover { text-decoration: underline; }
.workspace-bopan strong { min-width: 32px; font-variant-numeric: tabular-nums; font-weight: 650; }
.workspace-bopan strong:empty { display: none; }
.workspace-bopan-dot { width: 5px; height: 5px; border-radius: 50%; background: oklch(51% .13 250); }
.workspace-bopan[data-state="offline"] { border-color: var(--line); background: var(--paper); }
.workspace-bopan[data-state="offline"] a { color: var(--muted); }
/* 완료(초록)·중단됨(빨강), 2026-10-27 */
.workspace-bopan[data-state="done"] { border-color: oklch(85% .06 150); background: oklch(96.5% .03 150); }
.workspace-bopan[data-state="done"] a { color: oklch(40% .1 150); }
.workspace-bopan[data-state="done"] .workspace-bopan-dot { background: oklch(55% .14 150); }
.workspace-bopan[data-state="error"] { border-color: oklch(84% .06 25); background: oklch(96.5% .025 25); }
.workspace-bopan[data-state="error"] a { color: oklch(46% .15 25); }
.workspace-bopan[data-state="error"] .workspace-bopan-dot { background: oklch(56% .19 25); }
@media (max-width: 900px) { .workspace-topbar-right:has(.workspace-bopan:not([hidden])) { gap: 8px; } .workspace-topbar-right:has(.workspace-bopan:not([hidden])) .workspace-email { max-width: 120px; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 600px) { .workspace-topbar:has(.workspace-bopan:not([hidden])) { flex-wrap: wrap; padding-block: 8px; } .workspace-topbar-right:has(.workspace-bopan:not([hidden])) { flex: 1; flex-wrap: wrap; } .workspace-bopan { padding: 5px 6px; } .workspace-bopan strong { min-width: 30px; } }

/* ── 실패 알림창·오류 보내기·짧은 알림(2026-10-23, 목업 crt.html·shipping.html err-modal·toast 바탕, templates/_failure_dialog.html) ── */
.common-err-modal { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 50px rgb(16 17 19 / .25); overflow: hidden; font-size: 14px; line-height: 1.6; }
.common-err-modal[open] { display: flex; flex-direction: column; }
.common-err-modal::backdrop { background: rgb(16 17 19 / .45); }
.common-err-form { display: flex; flex-direction: column; min-height: 0; }
.common-err-band { flex: none; padding: 12px 22px; border-bottom: 1px solid #eac4bf; background: #faeae8; color: #9c2f25; font-size: 12.5px; line-height: 1.6; }
.common-err-band[hidden] { display: none; }
.common-err-band b { font-weight: 700; }
.common-err-head { flex: none; padding: 24px 22px 6px; }
.common-err-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 14px; border: 1px solid #eac4bf; border-radius: 12px; background: #faeae8; color: #b3372c; }
.common-err-ico svg { display: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.common-err-ico.is-error .common-err-ico-error, .common-err-ico.is-warn .common-err-ico-warn { display: block; }
.common-err-ico.is-warn { border-color: #ecd3bb; background: #fdf3ea; color: #b45f1e; }
.common-err-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.common-err-sub { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.7; white-space: pre-line; }
.common-err-sub:empty { display: none; }
.common-err-body { flex: 1 1 auto; min-height: 0; padding: 16px 22px 4px; overflow: auto; }
.common-err-body:empty { display: none; }
.common-err-note { color: var(--muted); font-size: 13px; line-height: 1.75; }
.common-err-note b { color: var(--ink); font-weight: 700; }
.common-err-memo { display: block; width: 100%; height: 86px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; resize: vertical; }
.common-err-memo:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.common-err-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; padding: 16px 22px; border-top: 1px solid var(--line); background: #fafaf7; }
.common-err-link { margin-right: auto; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.common-err-link:hover { color: var(--ink); }
.common-err-button { min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.common-err-button[hidden] { display: none; }
.common-err-button:hover:not(:disabled) { background: var(--paper); }
.common-err-button.is-primary { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.common-err-button.is-primary:hover:not(:disabled) { background: oklch(28% .005 271); }
.common-err-button:disabled { opacity: .5; cursor: not-allowed; }
.common-err-modal :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 같은 이유 묶음: 이유 머리(크림 문구·쉬운 설명·할 일) + 건 목록 */
.common-err-group { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fbfbf8; font-size: 12.5px; line-height: 1.75; }
.common-err-group.is-unexpected { border-color: #eac4bf; }
.common-err-group > summary { display: flex; align-items: baseline; gap: 8px; padding: 11px 14px; font-weight: 700; cursor: pointer; list-style: none; }
.common-err-group > summary::-webkit-details-marker { display: none; }
.common-err-group > summary::before { content: "▸"; flex: none; color: var(--muted); font-size: 11px; transition: transform .15s; }
.common-err-group[open] > summary::before { transform: rotate(90deg); }
.common-err-count { flex: none; margin-left: auto; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.common-err-tag { flex: none; padding: 0 6px; border: 1px solid #e0a39c; border-radius: 4px; color: #b3372c; font-size: 11px; font-weight: 600; }
.common-err-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #b3372c; transform: translateY(-1px); }
.common-err-reason { padding: 0 14px 10px 33px; color: var(--muted); }
.common-err-reason p + p { margin-top: 2px; }
.common-err-reason b { color: var(--ink); font-weight: 600; }
.common-err-quote { color: var(--ink); }
.common-err-items { margin: 0; padding: 8px 14px 10px 33px; border-top: 1px dashed var(--line); list-style: none; }
.common-err-items li + li { margin-top: 6px; }
.common-err-name { display: block; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.common-err-meta { display: block; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 짧은 알림(①): 오른쪽 위, 4초 뒤 저절로 닫힘 */
.common-notice-stack { position: fixed; top: 68px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
.common-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 9px; background: var(--surface); box-shadow: 0 8px 28px rgb(16 17 19 / .14); color: var(--ink); font-size: 13px; line-height: 1.55; pointer-events: auto; }
.common-notice.is-error { border-left-color: var(--accent); }
.common-notice.is-info { border-left-color: var(--muted); }
.common-notice-text { min-width: 0; overflow-wrap: anywhere; }
.common-notice-close { flex: none; margin-left: auto; padding: 0 2px; border: 0; background: none; color: var(--muted); font-size: 14px; line-height: 1.4; cursor: pointer; }
/* ① 칸·줄 빨간 표시(commonMarkField) */
.common-invalid-field, [aria-invalid="true"].common-invalid-field { border-color: var(--accent) !important; background: oklch(97% .016 28) !important; }
tr.common-invalid-row > td { background: oklch(97.5% .012 28); }
/* 오류 배지(자동으로 잡힌 오류 중 창을 띄우지 않은 것) */
.workspace-error-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #e0a39c; border-radius: 6px; background: #faeae8; color: #9c2f25; font-size: 11px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.workspace-error-badge[hidden] { display: none; }
.workspace-error-badge:hover { background: #f6dcd8; }
.workspace-error-dot { width: 5px; height: 5px; border-radius: 50%; background: #b3372c; }
@media (max-width: 560px) {
    .common-err-head { padding: 20px 16px 4px; }
    .common-err-body { padding: 12px 16px 4px; }
    .common-err-foot { padding: 12px 16px; }
    .common-err-link { flex-basis: 100%; margin-right: 0; text-align: left; }
}

/* ── 불러오는 중 표시(2026-10-23, 판매내역·발송내역·캘린더와 같은 모양): 표 위 3px 진행 막대 + 표 자리 회색 줄. common.js commonSkelRows·commonLoadLine ── */
.common-load-line { position: relative; z-index: 9; flex: none; height: 0; pointer-events: none; }
.common-load-line[hidden] { display: none; }
.common-load-line::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #f1f1ec; }
.common-load-line::after { content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 3px; border-radius: 0 2px 2px 0; background: var(--muted); animation: common-load-run 1.5s ease-in-out infinite; }
tbody tr.common-skel-row, tbody tr.common-skel-row:hover { background: var(--surface) !important; }
tbody tr.common-skel-row > td { padding: 10px 12px; background: var(--surface) !important; vertical-align: middle; }
.common-skel { display: block; width: 70%; max-width: 100%; height: 10px; margin: 0 auto; border-radius: 5px; background: linear-gradient(90deg, #ecece6 0%, #ecece6 38%, var(--surface) 50%, #ecece6 62%, #ecece6 100%); background-size: 300% 100%; animation: common-skel-glow 1.6s ease-in-out infinite; }
.common-skel.is-box { width: 14px; height: 14px; border-radius: 3px; }
.common-skel.is-short { width: 22px; }
.common-skel.is-thumb { width: 44px; height: 44px; border-radius: 8px; }
@keyframes common-load-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@keyframes common-skel-glow { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
    .common-load-line::after { width: 100%; transform: none; border-radius: 0; }
    .common-skel { background: #ecece6; }
}

/* ── 보관판매 공통 모양(2026-10-27, 크림개인 personal_bopan · 크림입점 company_bopan 두 화면이 똑같이 쓰는 규칙을 한 곳에서).
   W = :where(.personal-bopan, .company-bopan): 두 화면 바깥 칸 안으로만 묶고(다른 페이지 영향 없음) 우선순위는 더하지 않는다 —
   페이지 css에 남은 더 좁은 규칙(현황 표·창 등)이 예전처럼 이긴다. 값은 다른 탭(일반판매 ci-/pi-)과 같은 쪽.
   화면마다 다른 기능(이용권·보관료·천원경쟁/자동 조정 등)만 페이지 css에 남긴다. ── */
.personal-bopan, .company-bopan { --bopan-wash: oklch(95.5% .007 106); --bopan-head: oklch(98% .004 106); --bopan-row-line: oklch(92% .007 106); --bopan-red: oklch(46% .15 28); }
/* 입력칸·체크 */
:where(.personal-bopan, .company-bopan) :where(input, select) { min-width: 0; height: 36px; min-height: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
:where(.personal-bopan, .company-bopan) :where(input[type="checkbox"]) { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: var(--ink); cursor: pointer; vertical-align: middle; }
:where(.personal-bopan, .company-bopan) :where(input, button, select):disabled { opacity: .42; cursor: not-allowed; }
:where(.personal-bopan, .company-bopan) :where(input[aria-invalid="true"]) { border-color: var(--bopan-red); background: oklch(97% .016 28); }
/* 위쪽: 경로·안내 줄 */
:where(.personal-bopan, .company-bopan) :is(.pb-context, .cb-context) { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 700; }
:where(.personal-bopan, .company-bopan) :is(.pb-context, .cb-context) > span { margin-inline: 2px; color: var(--line); }
:where(.personal-bopan, .company-bopan) :is(.pb-howto, .cb-howto) { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--bopan-wash); }
:where(.personal-bopan, .company-bopan) :is(.pb-text-button, .cb-text-button) { padding: 3px 0; background: transparent; color: var(--muted); font-size: 12px !important; text-decoration: underline; text-underline-offset: 3px; }
:where(.personal-bopan, .company-bopan) :is(.pb-text-button, .cb-text-button):hover { color: var(--ink); }
/* 버튼 */
:where(.personal-bopan, .company-bopan) :is(.pb-button, .cb-button) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-weight: 600 !important; white-space: nowrap; transition: background .16s var(--ease-out), border-color .16s var(--ease-out); }
:where(.personal-bopan, .company-bopan) :is(.pb-button, .cb-button) svg { flex-shrink: 0; }
:where(.personal-bopan, .company-bopan) :is(.pb-button, .cb-button):hover:not(:disabled) { border-color: var(--ink); background: var(--paper); }
:where(.personal-bopan, .company-bopan) .pb-primary, :where(.personal-bopan, .company-bopan) .cb-button.cb-primary { border-color: var(--ink); background: var(--ink); color: var(--surface); }
:where(.personal-bopan, .company-bopan) .pb-primary:hover:not(:disabled), :where(.personal-bopan, .company-bopan) .cb-button.cb-primary:hover:not(:disabled) { background: oklch(31% .008 271); }
:where(.personal-bopan, .company-bopan) .pb-danger, :where(.personal-bopan, .company-bopan) .cb-button.cb-danger { border-color: oklch(83% .045 28); color: var(--bopan-red); }
:where(.personal-bopan, .company-bopan) .pb-danger:hover:not(:disabled), :where(.personal-bopan, .company-bopan) .cb-button.cb-danger:hover:not(:disabled) { border-color: var(--bopan-red); background: oklch(96% .022 28); }
:where(.personal-bopan, .company-bopan) :is(.pb-small, .cb-small) { min-height: 30px; padding-inline: 10px; font-size: 12px !important; }
/* 등록 조작 줄: [상품 담기] … 진행 글자 · 체크한 N건 대상 · [▷ 등록 시작]/[■ 중지] */
:where(.personal-bopan, .company-bopan) :is(.pb-controls, .cb-control-bar) { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
:where(.personal-bopan, .company-bopan) :is(.pb-controls, .cb-control-bar, .pb-run-controls, .cb-run-controls) > :is(.pb-button, .cb-button) { min-height: 42px; padding-inline: 18px; font-size: 14px; }
:where(.personal-bopan, .company-bopan) :is(.pb-run-controls, .cb-run-controls) { display: flex; align-items: center; gap: 12px; }
:where(.personal-bopan, .company-bopan) :is(.pb-run-controls, .cb-run-controls) > span { white-space: nowrap; }
:where(.personal-bopan, .company-bopan) :is(.pb-run-stop, .cb-run-stop) { min-width: 120px; gap: 6px; }
:where(.personal-bopan, .company-bopan) :is(.pb-controls > .pb-run-summary, .cb-control-bar > .cb-run-summary) { flex: 1 1 0; min-width: 0; margin: 0 0 0 auto; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.personal-bopan, .company-bopan) :is(.pb-controls > .pb-run-summary, .cb-control-bar > .cb-run-summary)[hidden] { display: none; }
:where(.personal-bopan, .company-bopan) :is(.pb-controls > .pb-run-summary:not([hidden]) + .pb-run-controls, .cb-control-bar > .cb-run-summary:not([hidden]) + .cb-run-controls) { margin-left: 0; }
/* 목록 머리(대기목록·등록 결과 탭 + [선택 삭제]). 탭 글자 크기는 페이지의 'button { font: inherit }'를 이기도록 바깥 칸 :is로 한 단계 높임 */
:where(.personal-bopan, .company-bopan) :is(.pb-list-head, .cb-panel-head) { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 0 18px; border-bottom: 1px solid var(--line); }
:where(.personal-bopan, .company-bopan) :is(.pb-tabs, .cb-list-tabs) { display: flex; align-self: stretch; gap: 24px; }
:is(.personal-bopan, .company-bopan) :is(.pb-tab, .cb-list-tabs > button) { display: flex; align-items: center; gap: 7px; min-height: 0; padding: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600 !important; white-space: nowrap; }
:is(.personal-bopan, .company-bopan) :is(.pb-tab, .cb-list-tabs > button):hover { color: var(--ink); }
:is(.personal-bopan, .company-bopan) :is(.pb-tab, .cb-list-tabs > button)[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); }
:where(.personal-bopan, .company-bopan) :is(.pb-count, .cb-count) { display: inline-block; min-width: 22px; height: auto; padding: 1px 6px; border-radius: 4px; background: var(--bopan-wash); font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
:where(.personal-bopan, .company-bopan) [aria-selected="true"] :is(.pb-count, .cb-count) { background: var(--ink); color: var(--surface); }
/* 등록 표(대기목록·등록 결과). 표 칸은 크림개인 .pb-table th/td(현황 표와 함께 쓰는 넓은 규칙)를 이기도록 바깥 칸을 :is로 한 단계 높인다 */
:is(.personal-bopan, .company-bopan) :is(.pb-wait-table, .pb-done-table, .cb-table) { border-collapse: collapse; text-align: left; font-size: 12px; font-variant-numeric: tabular-nums; }
:is(.personal-bopan, .company-bopan) :is(.pb-wait-table, .pb-done-table, .cb-table) th { height: 43px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--bopan-head); color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; white-space: nowrap; }
:is(.personal-bopan, .company-bopan) :is(.pb-wait-table, .pb-done-table, .cb-table) td { height: 78px; padding: 13px 12px; border-bottom: 1px solid var(--bopan-row-line); vertical-align: middle; }
:is(.personal-bopan, .company-bopan) :is(.pb-wait-table, .pb-done-table, .cb-table) :is(th, td):first-child { padding-left: 18px; padding-right: 7px; }
:is(.personal-bopan, .company-bopan) :is(.pb-wait-table .pb-row-index, .pb-done-table .pb-row-index, .pb-wait-table th.pb-index-column, .pb-done-table th.pb-index-column, .cb-table .cb-index) { padding-inline: 4px; color: var(--muted); white-space: nowrap; }
:is(.personal-bopan, .company-bopan) :is(.pb-wait-table, .pb-done-table) .pb-row-option, .company-bopan .cb-table .cb-size { line-height: 1.5; white-space: nowrap; }
:is(.personal-bopan, .company-bopan) :is(.pb-wait-table, .pb-done-table) :is(.pb-row-quantity, .pb-row-date), .company-bopan .cb-table :is(.cb-quantity, .cb-completed) { white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(.personal-bopan, .company-bopan) :is(.pb-wait-table, .pb-done-table, .cb-table) tbody tr.is-selected { background: oklch(97.2% .008 106); }
.personal-bopan :is(.pb-wait-table, .pb-done-table) td.pb-row-product, .company-bopan .cb-table td.cb-product-cell { padding-block: 9px; overflow: hidden; text-align: left; }
.personal-bopan :is(.pb-wait-table, .pb-done-table) .pb-p-thumb, .company-bopan .cb-table .cbs-p-thumb { width: 48px; height: 48px; cursor: zoom-in; }
/* 상품 칸: 사진 + 품번(굵게)·상품명 */
:where(.personal-bopan, .company-bopan) :is(.pb-p-wrap, .cbs-p-wrap) { display: flex; align-items: center; gap: 14px; min-width: 0; }
:where(.personal-bopan, .company-bopan) :is(.pb-thumb, .cb-thumb) { border: 1px solid oklch(91% .006 106); }
/* 상태 배지(줄 상태 4가지 등) — 색은 페이지의 tone 규칙 */
:where(.personal-bopan, .company-bopan) :is(.pb-badge, .cb-badge) { display: inline-block; padding: 4px 7px; border-radius: 4px; background: var(--bopan-wash); color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
/* 상태 배지 색 이름(2026-10-29 개인·입점 통일): 서버 tone 그대로 — neutral(기본)·progress 파랑·success 초록·error 빨강·ready 노랑·decide 남색 */
:where(.personal-bopan, .company-bopan) :is(.pb-badge, .cb-badge)[data-tone="success"] { background: oklch(95% .025 155); color: oklch(39% .08 155); }
:where(.personal-bopan, .company-bopan) :is(.pb-badge, .cb-badge)[data-tone="error"] { background: oklch(96% .025 28); color: var(--bopan-red); }
:where(.personal-bopan, .company-bopan) :is(.pb-badge, .cb-badge)[data-tone="progress"] { background: oklch(95% .023 263); color: oklch(43% .10 263); }
:where(.personal-bopan, .company-bopan) :is(.pb-badge, .cb-badge)[data-tone="ready"] { background: #fdf6e3; color: #9a7b1e; }
:where(.personal-bopan, .company-bopan) :is(.pb-badge, .cb-badge)[data-tone="decide"] { background: #e8edf7; color: #2c4a8a; }
/* 사유 칩(상태 배지 아래 작은 글자). '신청 취소'는 빨간 테두리로 눈에 띄게 */
:where(.personal-bopan, .company-bopan) :is(.pb-reason-chip, .cbs-reason-chip) { display: block; margin-top: 4px; color: #5c5e63; font-size: 12px; font-weight: 600; white-space: nowrap; }
:where(.personal-bopan, .company-bopan) :is(.pb-reason-chip, .cbs-reason-chip).is-strong { display: table; margin: 4px auto 0; padding: 1px 6px; border: 1px solid oklch(83% .045 28); border-radius: 4px; background: oklch(97% .016 28); color: var(--bopan-red); font-size: 11px; }
/* 등록 결과: 요약 줄 · 담기(책갈피) · 관리 버튼 묶음 */
:where(.personal-bopan, .company-bopan) :is(.pb-result-summary, .cb-summary) { flex-shrink: 0; padding: 11px 18px; border-bottom: 1px solid var(--line); background: var(--bopan-head); color: var(--muted); font-size: 13px; }
:where(.personal-bopan, .company-bopan) :is(.pb-bookmark, .cb-bookmark) { display: inline-flex; align-items: center; justify-content: center; width: 32px; min-width: 32px; height: 32px; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; }
:where(.personal-bopan, .company-bopan) :is(.pb-bookmark, .cb-bookmark):hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
:where(.personal-bopan, .company-bopan) :is(.pb-bookmark, .cb-bookmark).is-on { border-color: var(--ink); background: transparent; color: var(--ink); }
:where(.personal-bopan, .company-bopan) :is(.pb-bookmark, .cb-bookmark).is-on svg path { fill: currentColor; }
:where(.personal-bopan, .company-bopan) :is(.pb-row-actions, .cb-row-actions) { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
/* 목록 꼬리 줄 */
:where(.personal-bopan, .company-bopan) :is(.pb-list-foot, .cb-list-foot) { display: flex; flex-shrink: 0; justify-content: space-between; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
/* 등록 표 빈 상태(일반판매와 같은 글자만 — 그림 없음) */
.personal-bopan :is(.pb-wait-table, .pb-done-table) .pb-empty h2, .company-bopan .cb-empty strong { display: block; margin-bottom: 7px; color: var(--ink); font-size: 14px; font-weight: 600; letter-spacing: normal; }
.personal-bopan :is(.pb-wait-table, .pb-done-table) .pb-empty p, .company-bopan .cb-empty p { color: var(--muted); font-size: 12px; }
/* [상품 담기] 아이콘·글자 사이 */
:where(.personal-bopan, .company-bopan) :is(.pb-open-products, .cb-add-button) { gap: 8px; }
/* 표 머리글 ? 설명 */
:is(.personal-bopan, .company-bopan) :is(.pb-wait-table, .pb-done-table, .cb-table) th :is(.pb-help-s, .cbs-help) { margin-left: 4px; vertical-align: middle; }
/* 현황 표 상품명: 한 줄·말줄임(일반판매 현황 .cis-name과 같음) */
:where(.personal-bopan, .company-bopan) :is(.pb-status-table .pb-row-name, .cbs-table .cbs-row-name) { display: block; margin-top: 2px; overflow: hidden; color: #55575d; font-size: 12.5px; font-weight: 400; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; line-clamp: none; }
/* 현황 조작 줄 버튼(2026-10-28 사용자 지적: 다른 소탭 버튼이 투명하게 자리를 차지해 빈칸·간격이 생김):
   지금 소탭 버튼만 '선택 N건' 바로 옆에 붙고 다른 소탭 버튼(.is-off)은 자리를 차지하지 않는다. 표 머리글 위치는 줄 높이(버튼 높이 30)로 지킨다 */
:where(.personal-bopan, .company-bopan) :is(.pb-manage-buttons, .cbs-manage-buttons) { min-height: 30px; }
:is(.personal-bopan, .company-bopan) :is(.pb-manage-buttons, .cbs-manage-buttons) > .is-off { display: none !important; }
/* 현황 표: # 칸 좌우 여백 4px·줄바꿈 없음(일반판매 현황과 같음) */
:where(.personal-bopan, .company-bopan) :is(.pb-status-table, .cbs-table) td[data-col="index"] { padding-inline: 4px; white-space: nowrap; }
/* 등록 표 빈 줄 칸 */
.personal-bopan :is(.pb-wait-table, .pb-done-table) tr.pb-empty-row > td { padding: 24px 20px; color: var(--muted); text-align: center; }
.personal-bopan :is(.pb-wait-table, .pb-done-table) .pb-empty { gap: 0; min-height: 0; }
.personal-bopan :is(.pb-wait-table, .pb-done-table) .pb-empty h2, .company-bopan .cb-empty strong { line-height: 1.5; }
/* 창(상품 담기·도움말·시세 상세 등) 틀: 일반판매 .ci-dialog와 같은 값 */
:where(.personal-bopan, .company-bopan) :is(.pb-dialog, .cb-dialog) { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px oklch(18% .005 271 / .22); }
:where(.personal-bopan, .company-bopan) :is(.pb-dialog, .cb-dialog)[open] { display: flex; flex-direction: column; }
:where(.personal-bopan, .company-bopan) :is(.pb-dialog, .cb-dialog)::backdrop { background: oklch(18% .005 271 / .48); }
:where(.personal-bopan, .company-bopan) :is(.pb-dialog-head, .pb-dialog-foot, .cb-dialog-head, .cb-dialog-foot) { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; }
:where(.personal-bopan, .company-bopan) :is(.pb-dialog-head, .cb-dialog-head) { border-bottom: 1px solid var(--line); }
:where(.personal-bopan, .company-bopan) :is(.pb-dialog-head, .cb-dialog-head) h2 { font-size: 18px; font-weight: 700; }
:where(.personal-bopan, .company-bopan) :is(.pb-dialog-body, .cb-dialog-body) { min-height: 0; padding: 22px 24px; overflow-y: auto; }
:where(.personal-bopan, .company-bopan) :is(.pb-dialog-foot, .cb-dialog-foot) { justify-content: flex-end; border-top: 1px solid var(--line); background: var(--paper); }
:where(.personal-bopan, .company-bopan) :is(.pb-dialog-foot, .cb-dialog-foot) > span { margin-right: auto; }
:where(.personal-bopan, .company-bopan) :is(.pb-close, .cb-close) { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 26px !important; line-height: 1; }
:where(.personal-bopan, .company-bopan) :is(.pb-close, .cb-close):hover { background: var(--paper); color: var(--ink); }
:where(.personal-bopan, .company-bopan) :is(.pb-help-dialog, .cb-compact-dialog) { max-width: 480px; }
/* 도움말 창 내용(순서 1·2) */
:where(.personal-bopan, .company-bopan) :is(.pb-help-content, .cb-help-content) > p { line-height: 1.8; }
:where(.personal-bopan, .company-bopan) :is(.pb-help-content, .cb-help-content) ol { margin: 24px 0; padding: 0; list-style: none; }
:where(.personal-bopan, .company-bopan) :is(.pb-help-content, .cb-help-content) li { display: flex; gap: 15px; margin: 20px 0; }
:where(.personal-bopan, .company-bopan) :is(.pb-help-content, .cb-help-content) li > span { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-weight: 700; }
:where(.personal-bopan, .company-bopan) :is(.pb-help-content, .cb-help-content) h3 { margin-bottom: 5px; font-size: 14px; }
:where(.personal-bopan, .company-bopan) :is(.pb-help-content, .cb-help-content) li p { color: var(--muted); }
:where(.personal-bopan, .company-bopan) :is(.pb-field-hint, .cb-field-hint) { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.65; }
:where(.personal-bopan, .company-bopan) :is(.pb-search-form, .cb-product-search) button { padding-inline: 21px; }
:where(.personal-bopan, .company-bopan) :is(.pb-product-dialog .pb-dialog-foot, .cb-product-dialog .cb-dialog-foot) { gap: 12px; }
:where(.personal-bopan, .company-bopan) :is(.pb-product-dialog .pb-dialog-foot, .cb-product-dialog .cb-dialog-foot) > span { margin-right: auto; font-size: 12px; }


/* ── 일반판매 공통 모양(2026-10-27, 크림개인 .personal-ilpan · 크림입점 .company-ilpan 두 화면이 똑같이 쓰는 규칙을 한 곳에서 — 자동으로 옮김).
   :where(.personal-ilpan, .company-ilpan) 안으로만 묶어 다른 페이지 영향 없음, 우선순위는 예전 페이지 규칙과 같다.
   화면에서 직접 쓰는 색 변수는 --il-… 한 이름으로 통일, JS가 넣는 변수(--…-index-w 등)는 페이지 css에 남긴다. ── */
.personal-ilpan > :not(.pi-view), .company-ilpan > :not(.ci-view) { flex-shrink: 0; }
:where(.personal-ilpan, .company-ilpan) .pi-top-tabs, :where(.personal-ilpan, .company-ilpan) .ci-top-tabs { display: flex; gap: 5px; }
:where(.personal-ilpan, .company-ilpan) .pi-view-tab, :where(.personal-ilpan, .company-ilpan) .ci-view-tab { position: relative; min-width: 92px; height: 44px; padding: 0 26px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--muted); font-size: 14px !important; font-weight: 650 !important; }
:where(.personal-ilpan, .company-ilpan) .pi-view-tab[aria-selected="true"], :where(.personal-ilpan, .company-ilpan) .ci-view-tab[aria-selected="true"] { border-color: var(--line); background: var(--tab-sheet); color: var(--ink); }
:where(.personal-ilpan, .company-ilpan) .pi-view-tab[aria-selected="true"]::after, :where(.personal-ilpan, .company-ilpan) .ci-view-tab[aria-selected="true"]::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1px; background: var(--tab-sheet); }
:where(.personal-ilpan, .company-ilpan) .pi-view-tab:hover, :where(.personal-ilpan, .company-ilpan) .ci-view-tab:hover { color: var(--ink); }
:where(.personal-ilpan, .company-ilpan) .pi-view, :where(.personal-ilpan, .company-ilpan) .ci-view { display: flex; flex: 1; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
:where(.personal-ilpan, .company-ilpan) .pi-view[hidden], :where(.personal-ilpan, .company-ilpan) .ci-view[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-view > :not(.pi-list-panel), :where(.personal-ilpan, .company-ilpan) .ci-view > :not(.ci-list-panel) { flex-shrink: 0; }
.personal-ilpan :focus-visible, .company-ilpan :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.personal-ilpan button, .personal-ilpan input, .personal-ilpan select, .company-ilpan button, .company-ilpan input, .company-ilpan select { font: inherit; }
.personal-ilpan input, .personal-ilpan select, .company-ilpan input, .company-ilpan select { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.personal-ilpan input:focus, .personal-ilpan select:focus, .company-ilpan input:focus, .company-ilpan select:focus { border-color: var(--ink); }
.personal-ilpan input[type="checkbox"], .company-ilpan input[type="checkbox"] { width: 16px; height: 16px; padding: 0; margin: 0; accent-color: var(--ink); cursor: pointer; vertical-align: middle; }
.personal-ilpan input[aria-invalid="true"], .company-ilpan input[aria-invalid="true"] { border-color: var(--il-danger); background: oklch(97% .016 28); }
.personal-ilpan button:disabled, .personal-ilpan input:disabled, .company-ilpan button:disabled, .company-ilpan input:disabled { opacity: .42; cursor: not-allowed; }
:where(.personal-ilpan, .company-ilpan) .pi-muted, :where(.personal-ilpan, .company-ilpan) .ci-muted { color: var(--muted); }
:where(.personal-ilpan, .company-ilpan) .pi-muted strong, :where(.personal-ilpan, .company-ilpan) .ci-muted strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-heading, :where(.personal-ilpan, .company-ilpan) .ci-heading { display: flex; align-items: center; gap: 8px; min-height: 22px; }
:where(.personal-ilpan, .company-ilpan) .pi-context, :where(.personal-ilpan, .company-ilpan) .ci-context { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 700; }
:where(.personal-ilpan, .company-ilpan) .pi-context > span, :where(.personal-ilpan, .company-ilpan) .ci-context > span { margin-inline: 2px; color: var(--line); }
:where(.personal-ilpan, .company-ilpan) .pi-context img, :where(.personal-ilpan, .company-ilpan) .ci-context img { border-radius: 4px; object-fit: contain; }
:where(.personal-ilpan, .company-ilpan) .pi-howto, :where(.personal-ilpan, .company-ilpan) .ci-howto { padding: 12px 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--il-wash); color: oklch(30% .006 271); }
:where(.personal-ilpan, .company-ilpan) .pi-howto strong, :where(.personal-ilpan, .company-ilpan) .ci-howto strong { font-weight: 700; color: var(--ink); }
:where(.personal-ilpan, .company-ilpan) .pi-with-help, :where(.personal-ilpan, .company-ilpan) .ci-with-help { display: inline-flex; align-items: center; gap: 6px; }
:where(.personal-ilpan, .company-ilpan) .pi-help, :where(.personal-ilpan, .company-ilpan) .ci-help { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 10px !important; font-weight: 700; line-height: 1; cursor: help; }
:where(.personal-ilpan, .company-ilpan) .pi-help:hover, :where(.personal-ilpan, .company-ilpan) .ci-help:hover { border-color: var(--ink); color: var(--ink); }
:where(.personal-ilpan, .company-ilpan) .pi-help-small, :where(.personal-ilpan, .company-ilpan) .ci-help-small { width: 15px; height: 15px; margin-left: 3px; font-size: 9px !important; vertical-align: 1px; }
:where(.personal-ilpan, .company-ilpan) .pi-tip, :where(.personal-ilpan, .company-ilpan) .ci-tip { position: fixed; z-index: 120; top: 0; left: 0; max-width: 300px; padding: 8px 11px; border-radius: 7px; background: var(--ink); color: oklch(96% .004 106); font-size: 12px; line-height: 1.6; white-space: pre-line; pointer-events: none; box-shadow: 0 6px 18px oklch(18% .005 271 / .18); }
:where(.personal-ilpan, .company-ilpan) .pi-tip[hidden], :where(.personal-ilpan, .company-ilpan) .ci-tip[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-button, :where(.personal-ilpan, .company-ilpan) .ci-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-weight: 600 !important; white-space: nowrap; transition: background .16s var(--ease-out), border-color .16s var(--ease-out); }
:where(.personal-ilpan, .company-ilpan) .pi-button:hover:not(:disabled), :where(.personal-ilpan, .company-ilpan) .ci-button:hover:not(:disabled) { border-color: var(--ink); background: var(--paper); }
:where(.personal-ilpan, .company-ilpan) .pi-button.pi-primary, :where(.personal-ilpan, .company-ilpan) .ci-button.ci-primary { border-color: var(--ink); background: var(--ink); color: var(--surface); }
:where(.personal-ilpan, .company-ilpan) .pi-button.pi-primary:hover:not(:disabled), :where(.personal-ilpan, .company-ilpan) .ci-button.ci-primary:hover:not(:disabled) { background: oklch(31% .008 271); }
:where(.personal-ilpan, .company-ilpan) .pi-button.pi-danger, :where(.personal-ilpan, .company-ilpan) .ci-button.ci-danger { border-color: oklch(83% .045 28); color: var(--il-danger); }
:where(.personal-ilpan, .company-ilpan) .pi-button.pi-danger:hover:not(:disabled), :where(.personal-ilpan, .company-ilpan) .ci-button.ci-danger:hover:not(:disabled) { border-color: var(--il-danger); background: oklch(96% .022 28); }
:where(.personal-ilpan, .company-ilpan) .pi-small, :where(.personal-ilpan, .company-ilpan) .ci-small { min-height: 30px; padding-inline: 10px; font-size: 12px !important; }
:where(.personal-ilpan, .company-ilpan) .pi-text-button, :where(.personal-ilpan, .company-ilpan) .ci-text-button { padding: 3px 0; background: transparent; color: var(--muted); font-size: 12px !important; text-decoration: underline; text-underline-offset: 3px; }
:where(.personal-ilpan, .company-ilpan) .pi-text-button:hover, :where(.personal-ilpan, .company-ilpan) .ci-text-button:hover { color: var(--ink); }
:where(.personal-ilpan, .company-ilpan) .pi-panel, :where(.personal-ilpan, .company-ilpan) .ci-panel { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
:where(.personal-ilpan, .company-ilpan) .pi-control-bar, :where(.personal-ilpan, .company-ilpan) .ci-control-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; }
:where(.personal-ilpan, .company-ilpan) .pi-control-bar .pi-button, :where(.personal-ilpan, .company-ilpan) .ci-control-bar .ci-button { min-height: 42px; padding-inline: 18px; font-size: 14px; }
:where(.personal-ilpan, .company-ilpan) .pi-run-controls, :where(.personal-ilpan, .company-ilpan) .ci-run-controls { display: flex; align-items: center; gap: 14px; margin-left: auto; }
:where(.personal-ilpan, .company-ilpan) .pi-run-controls > span, :where(.personal-ilpan, .company-ilpan) .ci-run-controls > span { white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pi-run-button, :where(.personal-ilpan, .company-ilpan) .ci-run-button { min-width: 132px; }
:where(.personal-ilpan, .company-ilpan) .pi-run-button.is-running, :where(.personal-ilpan, .company-ilpan) .ci-run-button.is-running { border-color: #1f7a4d; background: #1f7a4d; color: #fff; }
:where(.personal-ilpan, .company-ilpan) .pi-run-button.is-running:disabled, :where(.personal-ilpan, .company-ilpan) .ci-run-button.is-running:disabled { opacity: 1; cursor: default; }
:where(.personal-ilpan, .company-ilpan) #pi-stop[hidden], :where(.personal-ilpan, .company-ilpan) .pi-run-summary[hidden], :where(.personal-ilpan, .company-ilpan) #ci-stop[hidden], :where(.personal-ilpan, .company-ilpan) .ci-run-summary[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-run-stop, :where(.personal-ilpan, .company-ilpan) .ci-run-stop { justify-content: center; }
:where(.personal-ilpan, .company-ilpan) .pi-run-stop svg, :where(.personal-ilpan, .company-ilpan) .ci-run-stop svg { flex-shrink: 0; }
:where(.personal-ilpan, .company-ilpan) #pi-run[hidden], :where(.personal-ilpan, .company-ilpan) #ci-run[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-run-summary, :where(.personal-ilpan, .company-ilpan) .ci-run-summary { margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--il-wash); color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
:where(.personal-ilpan, .company-ilpan) .pi-table .pi-state-column, :where(.personal-ilpan, .company-ilpan) .ci-table .ci-state-column { width: 136px; }
:where(.personal-ilpan, .company-ilpan) .pi-state-cell, :where(.personal-ilpan, .company-ilpan) .ci-state-cell { max-width: 136px; text-align: center; }
:where(.personal-ilpan, .company-ilpan) .pi-row-phase, :where(.personal-ilpan, .company-ilpan) .ci-row-phase { color: var(--muted); }
:where(.personal-ilpan, .company-ilpan) .pi-row-phase.pi-badge, :where(.personal-ilpan, .company-ilpan) .ci-row-phase.ci-badge { display: inline-block; max-width: 124px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.personal-ilpan select[aria-invalid="true"], .company-ilpan select[aria-invalid="true"] { border-color: var(--il-danger); color: var(--il-danger); }
:where(.personal-ilpan, .company-ilpan) .pi-done-detail, :where(.personal-ilpan, .company-ilpan) .ci-done-detail { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-done-detail:empty, :where(.personal-ilpan, .company-ilpan) .ci-done-detail:empty { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-list-panel, :where(.personal-ilpan, .company-ilpan) .ci-list-panel { display: flex; flex: 1; flex-direction: column; min-height: 360px; overflow: hidden; }
:where(.personal-ilpan, .company-ilpan) .pi-list-panel > :not(.pi-list-view), :where(.personal-ilpan, .company-ilpan) .ci-list-panel > :not(.ci-list-view) { flex-shrink: 0; }
:where(.personal-ilpan, .company-ilpan) .pi-list-view, :where(.personal-ilpan, .company-ilpan) .ci-list-view { display: flex; flex: 1; flex-direction: column; min-height: 0; }
:where(.personal-ilpan, .company-ilpan) .pi-list-view[hidden], :where(.personal-ilpan, .company-ilpan) .ci-list-view[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-list-view > :not(.pi-table-scroll), :where(.personal-ilpan, .company-ilpan) .ci-list-view > :not(.ci-table-scroll) { flex-shrink: 0; }
:where(.personal-ilpan, .company-ilpan) .pi-panel-head, :where(.personal-ilpan, .company-ilpan) .ci-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 60px; padding: 0 18px; border-bottom: 1px solid var(--line); }
:where(.personal-ilpan, .company-ilpan) .pi-list-tabs, :where(.personal-ilpan, .company-ilpan) .ci-list-tabs { display: flex; align-self: stretch; gap: 24px; }
:where(.personal-ilpan, .company-ilpan) .pi-list-tabs > button, :where(.personal-ilpan, .company-ilpan) .ci-list-tabs > button { display: flex; align-items: center; gap: 7px; min-height: 58px; padding: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pi-list-tabs > button[aria-selected="true"], :where(.personal-ilpan, .company-ilpan) .ci-list-tabs > button[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); }
:where(.personal-ilpan, .company-ilpan) .pi-count, :where(.personal-ilpan, .company-ilpan) .ci-count { min-width: 22px; padding: 1px 6px; border-radius: 4px; background: var(--il-wash); font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
:where(.personal-ilpan, .company-ilpan) .pi-list-tabs > button[aria-selected="true"] .pi-count, :where(.personal-ilpan, .company-ilpan) .ci-list-tabs > button[aria-selected="true"] .ci-count { background: var(--ink); color: var(--surface); }
:where(.personal-ilpan, .company-ilpan) .pi-head-tools, :where(.personal-ilpan, .company-ilpan) .ci-head-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; padding-block: 10px; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-time, :where(.personal-ilpan, .company-ilpan) .ci-quote-time { font-size: 12px; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-time span, :where(.personal-ilpan, .company-ilpan) .ci-quote-time span { font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-scroll-hint, :where(.personal-ilpan, .company-ilpan) .ci-scroll-hint { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-bulk-bar, :where(.personal-ilpan, .company-ilpan) .ci-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--muted); }
:where(.personal-ilpan, .company-ilpan) .pi-bulk-label, :where(.personal-ilpan, .company-ilpan) .ci-bulk-label { margin-right: 4px; color: var(--ink); font-weight: 700; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pi-bulk-group, :where(.personal-ilpan, .company-ilpan) .ci-bulk-group { display: flex; align-items: center; gap: 8px; }
:where(.personal-ilpan, .company-ilpan) .pi-bulk-bar input, :where(.personal-ilpan, .company-ilpan) .ci-bulk-bar input { width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-bulk-sep, :where(.personal-ilpan, .company-ilpan) .ci-bulk-sep { width: 1px; height: 20px; margin: 0 6px; background: var(--line); }
:where(.personal-ilpan, .company-ilpan) .pi-summary, :where(.personal-ilpan, .company-ilpan) .ci-summary { padding: 11px 18px; border-bottom: 1px solid var(--line); background: var(--il-head); color: var(--muted); font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-list-foot, :where(.personal-ilpan, .company-ilpan) .ci-list-foot { display: flex; justify-content: space-between; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
:where(.personal-ilpan, .company-ilpan) .pi-table-scroll, :where(.personal-ilpan, .company-ilpan) .ci-table-scroll { flex: 1; height: 0; min-height: 160px; max-width: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) var(--surface); container-type: inline-size; }
:where(.personal-ilpan, .company-ilpan) .pi-table, :where(.personal-ilpan, .company-ilpan) .ci-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: center; }
:where(.personal-ilpan, .company-ilpan) .pi-wait-table, :where(.personal-ilpan, .company-ilpan) .ci-wait-table { min-width: 1380px; }
:where(.personal-ilpan, .company-ilpan) .pi-done-table, :where(.personal-ilpan, .company-ilpan) .ci-done-table { min-width: 1140px; }
:where(.personal-ilpan, .company-ilpan) .pi-table th, :where(.personal-ilpan, .company-ilpan) .ci-table th { position: sticky; top: 0; z-index: 1; height: 43px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--il-head); color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; text-align: center; }
:where(.personal-ilpan, .company-ilpan) .pi-table td, :where(.personal-ilpan, .company-ilpan) .ci-table td { height: 64px; padding: 9px 10px; border-bottom: 1px solid oklch(92% .007 106); vertical-align: middle; }
:where(.personal-ilpan, .company-ilpan) .pi-table tbody tr:last-child td, :where(.personal-ilpan, .company-ilpan) .ci-table tbody tr:last-child td { border-bottom: 0; }
:where(.personal-ilpan, .company-ilpan) .pi-table tbody tr:not(.pi-empty-row):hover, :where(.personal-ilpan, .company-ilpan) .ci-table tbody tr:not(.ci-empty-row):hover { background: oklch(98% .006 106); }
:where(.personal-ilpan, .company-ilpan) .pi-table tbody tr.is-selected, :where(.personal-ilpan, .company-ilpan) .ci-table tbody tr.is-selected { background: oklch(97.2% .008 106); }
:where(.personal-ilpan, .company-ilpan) .pi-table .pi-check-column, :where(.personal-ilpan, .company-ilpan) .ci-table .ci-check-column { width: 46px; padding-left: 18px; padding-right: 6px; }
:where(.personal-ilpan, .company-ilpan) .pi-table .pi-image-column, :where(.personal-ilpan, .company-ilpan) .ci-table .ci-image-column { width: 60px; }
:where(.personal-ilpan, .company-ilpan) .pi-table .pi-product-column, :where(.personal-ilpan, .company-ilpan) .pi-table .pi-product-cell, :where(.personal-ilpan, .company-ilpan) .ci-table .ci-product-column, :where(.personal-ilpan, .company-ilpan) .ci-table .ci-product-cell { min-width: 200px; text-align: left; }
:where(.personal-ilpan, .company-ilpan) .pi-table .pi-product-column .pi-sort, :where(.personal-ilpan, .company-ilpan) .ci-table .ci-product-column .ci-sort { justify-content: flex-start; }
:where(.personal-ilpan, .company-ilpan) .pi-sort, :where(.personal-ilpan, .company-ilpan) .ci-sort { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; color: inherit; font-weight: inherit; white-space: nowrap; cursor: pointer; }
:where(.personal-ilpan, .company-ilpan) .pi-sort:hover, :where(.personal-ilpan, .company-ilpan) .ci-sort:hover { color: var(--ink); }
:where(.personal-ilpan, .company-ilpan) .pi-sort-arrow, :where(.personal-ilpan, .company-ilpan) .ci-sort-arrow { position: absolute; left: 100%; margin-left: 3px; font-size: 10px; font-weight: 700; }
:where(.personal-ilpan, .company-ilpan) .pi-sort-arrow.is-asc, :where(.personal-ilpan, .company-ilpan) .ci-sort-arrow.is-asc { color: var(--il-up); }
:where(.personal-ilpan, .company-ilpan) .pi-sort-arrow.is-desc, :where(.personal-ilpan, .company-ilpan) .ci-sort-arrow.is-desc { color: var(--il-down); }
:where(.personal-ilpan, .company-ilpan) .pi-thumb, :where(.personal-ilpan, .company-ilpan) .ci-thumb { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid oklch(91% .006 106); border-radius: 6px; background: var(--paper); color: oklch(66% .014 106); vertical-align: middle; }
:where(.personal-ilpan, .company-ilpan) .pi-thumb svg, :where(.personal-ilpan, .company-ilpan) .ci-thumb svg { width: 24px; height: 24px; }
:where(.personal-ilpan, .company-ilpan) .pi-product-name, :where(.personal-ilpan, .company-ilpan) .ci-product-name { display: block; font-size: 13px; font-weight: 600; line-height: 1.45; letter-spacing: -.012em; }
:where(.personal-ilpan, .company-ilpan) .pi-product-sku, :where(.personal-ilpan, .company-ilpan) .ci-product-sku { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
:where(.personal-ilpan, .company-ilpan) .pi-size, :where(.personal-ilpan, .company-ilpan) .ci-size { white-space: nowrap; font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pi-price-cell, :where(.personal-ilpan, .company-ilpan) .ci-price-cell { color: var(--muted); white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pi-price-cell.pi-price-ask, :where(.personal-ilpan, .company-ilpan) .pi-price-cell.pi-price-bid, :where(.personal-ilpan, .company-ilpan) .ci-price-cell.ci-price-ask, :where(.personal-ilpan, .company-ilpan) .ci-price-cell.ci-price-bid { font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-button, :where(.personal-ilpan, .company-ilpan) .ci-quote-button { height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); font-size: 11px !important; font-weight: 600; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-button:hover, :where(.personal-ilpan, .company-ilpan) .ci-quote-button:hover { border-color: var(--ink); color: var(--ink); }
.personal-ilpan .pi-money-input[aria-invalid="true"], .company-ilpan .ci-money-input[aria-invalid="true"] { color: var(--il-danger); }
.personal-ilpan .pi-bid-input, .personal-ilpan .pi-bid-input[aria-invalid="true"], .personal-ilpan .pi-purchase-input, .personal-ilpan .pi-purchase-input[aria-invalid="true"], .company-ilpan .ci-bid-input, .company-ilpan .ci-bid-input[aria-invalid="true"], .company-ilpan .ci-purchase-input, .company-ilpan .ci-purchase-input[aria-invalid="true"] { background: transparent; }
:where(.personal-ilpan, .company-ilpan) .il-shake { animation: il-shake .3s ease-in-out; }
@keyframes il-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
:where(.personal-ilpan, .company-ilpan) .pi-bid-input, :where(.personal-ilpan, .company-ilpan) .pi-purchase-input, :where(.personal-ilpan, .company-ilpan) .ci-bid-input, :where(.personal-ilpan, .company-ilpan) .ci-purchase-input { width: 140px; height: 34px !important; text-align: center; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-deadline-select, :where(.personal-ilpan, .company-ilpan) .ci-deadline-select { height: 34px !important; }
:where(.personal-ilpan, .company-ilpan) .pi-done-price, :where(.personal-ilpan, .company-ilpan) .pi-done-deadline, :where(.personal-ilpan, .company-ilpan) .pi-completed, :where(.personal-ilpan, .company-ilpan) .ci-done-price, :where(.personal-ilpan, .company-ilpan) .ci-done-deadline, :where(.personal-ilpan, .company-ilpan) .ci-completed { white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pi-badge, :where(.personal-ilpan, .company-ilpan) .ci-badge { display: inline-block; padding: 3px 8px; border-radius: 5px; background: var(--il-wash); color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pi-badge[data-tone="done"], :where(.personal-ilpan, .company-ilpan) .ci-badge[data-tone="done"] { background: oklch(95% .025 155); color: oklch(39% .08 155); }
:where(.personal-ilpan, .company-ilpan) .pi-badge[data-tone="blocked"], :where(.personal-ilpan, .company-ilpan) .ci-badge[data-tone="blocked"] { background: oklch(96% .026 28); color: var(--il-danger); }
:where(.personal-ilpan, .company-ilpan) .pi-badge[data-tone="progress"], :where(.personal-ilpan, .company-ilpan) .ci-badge[data-tone="progress"] { background: oklch(95% .023 263); color: var(--il-down); }
:where(.personal-ilpan, .company-ilpan) .pi-row-actions, :where(.personal-ilpan, .company-ilpan) .ci-row-actions { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pi-bookmark-icon, :where(.personal-ilpan, .company-ilpan) .ci-bookmark-icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; vertical-align: -2px; }
:where(.personal-ilpan, .company-ilpan) .pi-pin, :where(.personal-ilpan, .company-ilpan) .pi-card-pin, :where(.personal-ilpan, .company-ilpan) .ci-pin, :where(.personal-ilpan, .company-ilpan) .ci-card-pin { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: oklch(74% .008 106); }
:where(.personal-ilpan, .company-ilpan) .pi-pin:hover, :where(.personal-ilpan, .company-ilpan) .pi-card-pin:hover, :where(.personal-ilpan, .company-ilpan) .ci-pin:hover, :where(.personal-ilpan, .company-ilpan) .ci-card-pin:hover { border-color: var(--ink); color: var(--ink); }
:where(.personal-ilpan, .company-ilpan) .pi-pin.is-on, :where(.personal-ilpan, .company-ilpan) .pi-card-pin.is-on, :where(.personal-ilpan, .company-ilpan) .ci-pin.is-on, :where(.personal-ilpan, .company-ilpan) .ci-card-pin.is-on { border-color: var(--ink); color: var(--ink); }
:where(.personal-ilpan, .company-ilpan) .pi-pin.is-on .pi-bookmark-icon, :where(.personal-ilpan, .company-ilpan) .pi-card-pin.is-on .pi-bookmark-icon, :where(.personal-ilpan, .company-ilpan) .pi-favorite.is-on .pi-bookmark-icon, :where(.personal-ilpan, .company-ilpan) .ci-pin.is-on .ci-bookmark-icon, :where(.personal-ilpan, .company-ilpan) .ci-card-pin.is-on .ci-bookmark-icon, :where(.personal-ilpan, .company-ilpan) .ci-favorite.is-on .ci-bookmark-icon { fill: currentColor; }
:where(.personal-ilpan, .company-ilpan) .pi-empty, :where(.personal-ilpan, .company-ilpan) .ci-empty { height: auto !important; padding: 40px 20px !important; color: var(--muted); text-align: center !important; }
:where(.personal-ilpan, .company-ilpan) .pi-empty > div, :where(.personal-ilpan, .company-ilpan) .ci-empty > div { width: calc(100cqw - 40px); position: sticky; left: 20px; }
:where(.personal-ilpan, .company-ilpan) .pi-empty strong, :where(.personal-ilpan, .company-ilpan) .ci-empty strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 14px; font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pi-empty p, :where(.personal-ilpan, .company-ilpan) .ci-empty p { font-size: 12px; }
:where(.personal-ilpan, .company-ilpan) .pi-notice, :where(.personal-ilpan, .company-ilpan) .ci-notice { position: fixed; z-index: 70; bottom: 24px; left: calc(50% + 116px); transform: translateX(-50%); display: flex; align-items: center; gap: 20px; width: max-content; max-width: min(560px, calc(100vw - 40px)); padding: 13px 16px; border: 1px solid oklch(35% .008 271); border-radius: 7px; background: var(--ink); color: var(--surface); box-shadow: 0 5px 18px oklch(18% .005 271 / .15); }
:where(.personal-ilpan, .company-ilpan) .pi-notice[hidden], :where(.personal-ilpan, .company-ilpan) .ci-notice[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-notice button, :where(.personal-ilpan, .company-ilpan) .ci-notice button { align-self: flex-start; padding: 0 3px; background: transparent; color: inherit; font-size: 20px; line-height: 1; }
:where(.personal-ilpan, .company-ilpan) .pi-dialog, :where(.personal-ilpan, .company-ilpan) .ci-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px oklch(18% .005 271 / .22); font-size: 13px; line-height: 1.5; }
:where(.personal-ilpan, .company-ilpan) .pi-dialog[open], :where(.personal-ilpan, .company-ilpan) .ci-dialog[open] { display: flex; flex-direction: column; }
:where(.personal-ilpan, .company-ilpan) .pi-dialog::backdrop, :where(.personal-ilpan, .company-ilpan) .ci-dialog::backdrop { background: oklch(18% .005 271 / .48); }
:where(.personal-ilpan, .company-ilpan) .pi-dialog-head, :where(.personal-ilpan, .company-ilpan) .pi-dialog-foot, :where(.personal-ilpan, .company-ilpan) .ci-dialog-head, :where(.personal-ilpan, .company-ilpan) .ci-dialog-foot { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; }
:where(.personal-ilpan, .company-ilpan) .pi-dialog-head, :where(.personal-ilpan, .company-ilpan) .ci-dialog-head { border-bottom: 1px solid var(--line); }
:where(.personal-ilpan, .company-ilpan) .pi-dialog-head h2, :where(.personal-ilpan, .company-ilpan) .ci-dialog-head h2 { font-size: 18px; font-weight: 700; }
:where(.personal-ilpan, .company-ilpan) .pi-dialog-body, :where(.personal-ilpan, .company-ilpan) .ci-dialog-body { min-height: 0; padding: 22px 24px; overflow-y: auto; }
:where(.personal-ilpan, .company-ilpan) .pi-dialog-foot, :where(.personal-ilpan, .company-ilpan) .ci-dialog-foot { justify-content: flex-end; border-top: 1px solid var(--line); background: var(--paper); }
:where(.personal-ilpan, .company-ilpan) .pi-dialog-foot > span, :where(.personal-ilpan, .company-ilpan) .ci-dialog-foot > span { margin-right: auto; }
:where(.personal-ilpan, .company-ilpan) .pi-close, :where(.personal-ilpan, .company-ilpan) .ci-close { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 5px; background: transparent; color: var(--muted); font-size: 26px !important; line-height: 1; }
:where(.personal-ilpan, .company-ilpan) .pi-close:hover, :where(.personal-ilpan, .company-ilpan) .ci-close:hover { background: var(--paper); color: var(--ink); }
:where(.personal-ilpan, .company-ilpan) .pi-field-hint, :where(.personal-ilpan, .company-ilpan) .ci-field-hint { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.65; }
:where(.personal-ilpan, .company-ilpan) .pi-facts > div, :where(.personal-ilpan, .company-ilpan) .ci-facts > div { display: flex; align-items: baseline; gap: 12px; padding: 3px 0; }
:where(.personal-ilpan, .company-ilpan) .pi-facts dt, :where(.personal-ilpan, .company-ilpan) .ci-facts dt { flex: none; width: 96px; color: var(--muted); }
:where(.personal-ilpan, .company-ilpan) .pi-facts dd, :where(.personal-ilpan, .company-ilpan) .ci-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-product-dialog, :where(.personal-ilpan, .company-ilpan) .ci-product-dialog { width: min(760px, calc(100vw - 32px)); }
:where(.personal-ilpan, .company-ilpan) .pi-product-dialog .pi-dialog-head, :where(.personal-ilpan, .company-ilpan) .ci-product-dialog .ci-dialog-head { gap: 20px; padding: 19px 24px; }
:where(.personal-ilpan, .company-ilpan) .pi-product-dialog .pi-dialog-body, :where(.personal-ilpan, .company-ilpan) .ci-product-dialog .ci-dialog-body { padding: 24px; }
:where(.personal-ilpan, .company-ilpan) .pi-product-dialog .pi-dialog-foot, :where(.personal-ilpan, .company-ilpan) .ci-product-dialog .ci-dialog-foot { align-items: normal; gap: 12px; padding: 15px 24px; background: var(--surface); }
:where(.personal-ilpan, .company-ilpan) .pi-product-dialog .pi-dialog-foot > span, :where(.personal-ilpan, .company-ilpan) .ci-product-dialog .ci-dialog-foot > span { font-size: 12px; }
:where(.personal-ilpan, .company-ilpan) .pi-product-dialog .pi-dialog-foot > .pi-button, :where(.personal-ilpan, .company-ilpan) .ci-product-dialog .ci-dialog-foot > .ci-button { min-height: 38px; }
:where(.personal-ilpan, .company-ilpan) .pi-search-form, :where(.personal-ilpan, .company-ilpan) .ci-search-form { display: flex; gap: 8px; }
:where(.personal-ilpan, .company-ilpan) .pi-search-form input, :where(.personal-ilpan, .company-ilpan) .ci-search-form input { flex: 1; width: 0; height: 42px; padding-inline: 11px; }
:where(.personal-ilpan, .company-ilpan) .pi-search-form button, :where(.personal-ilpan, .company-ilpan) .ci-search-form button { min-width: 70px; min-height: 42px; }
:where(.personal-ilpan, .company-ilpan) .pi-product-dialog .pi-field-hint, :where(.personal-ilpan, .company-ilpan) .ci-product-dialog .ci-field-hint { line-height: 1.5; }
:where(.personal-ilpan, .company-ilpan) .pi-catalog-section, :where(.personal-ilpan, .company-ilpan) .ci-catalog-section { margin-top: 26px; }
:where(.personal-ilpan, .company-ilpan) .pi-catalog-section + .pi-catalog-section, :where(.personal-ilpan, .company-ilpan) .ci-catalog-section + .ci-catalog-section { padding-top: 23px; border-top: 1px solid var(--line); }
:where(.personal-ilpan, .company-ilpan) .pi-catalog-section h3, :where(.personal-ilpan, .company-ilpan) .ci-catalog-section h3 { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; letter-spacing: -.015em; }
:where(.personal-ilpan, .company-ilpan) .pi-catalog-empty, :where(.personal-ilpan, .company-ilpan) .ci-catalog-empty { padding: 24px 0 8px; color: var(--muted); font-size: 12px; text-align: center; }
:where(.personal-ilpan, .company-ilpan) .pi-search-empty, :where(.personal-ilpan, .company-ilpan) .ci-search-empty { padding: 45px 16px; color: var(--muted); text-align: center; }
:where(.personal-ilpan, .company-ilpan) .pi-back, :where(.personal-ilpan, .company-ilpan) .ci-back { margin-top: 20px; }
:where(.personal-ilpan, .company-ilpan) .pi-catalog-heading, :where(.personal-ilpan, .company-ilpan) .ci-catalog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 12px; }
:where(.personal-ilpan, .company-ilpan) .pi-catalog-heading h3, :where(.personal-ilpan, .company-ilpan) .ci-catalog-heading h3 { font-size: 14px; }
:where(.personal-ilpan, .company-ilpan) .pi-catalog-heading > span, :where(.personal-ilpan, .company-ilpan) .ci-catalog-heading > span { font-size: 11px; }
:where(.personal-ilpan, .company-ilpan) .pi-pick-grid, :where(.personal-ilpan, .company-ilpan) .ci-pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
:where(.personal-ilpan, .company-ilpan) .pi-pick-grid:empty, :where(.personal-ilpan, .company-ilpan) .ci-pick-grid:empty { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-pick-row, :where(.personal-ilpan, .company-ilpan) .ci-pick-row { display: flex; align-items: center; gap: 8px; min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
:where(.personal-ilpan, .company-ilpan) .pi-pick-row:hover, :where(.personal-ilpan, .company-ilpan) .ci-pick-row:hover { border-color: var(--ink); background: var(--paper); }
:where(.personal-ilpan, .company-ilpan) .pi-pick-row > .pi-card-pin, :where(.personal-ilpan, .company-ilpan) .ci-pick-row > .ci-card-pin { margin-right: 12px; }
:where(.personal-ilpan, .company-ilpan) .pi-pick-main, :where(.personal-ilpan, .company-ilpan) .ci-pick-main { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 12px; background: transparent; text-align: left; }
:where(.personal-ilpan, .company-ilpan) .pi-thumb-small, :where(.personal-ilpan, .company-ilpan) .ci-thumb-small { width: 44px; height: 44px; border-color: var(--line); }
:where(.personal-ilpan, .company-ilpan) .pi-thumb-small svg, :where(.personal-ilpan, .company-ilpan) .ci-thumb-small svg { width: 26px; height: 26px; }
:where(.personal-ilpan, .company-ilpan) .pi-pick-info, :where(.personal-ilpan, .company-ilpan) .ci-pick-info { display: flex; flex: 1; flex-direction: column; min-width: 0; }
:where(.personal-ilpan, .company-ilpan) .pi-pick-name, :where(.personal-ilpan, .company-ilpan) .ci-pick-name { font-size: 12px; font-weight: 600; line-height: 1.5; }
:where(.personal-ilpan, .company-ilpan) .pi-pick-sku, :where(.personal-ilpan, .company-ilpan) .ci-pick-sku { margin-top: 4px; color: var(--muted); font-size: 11px; }
:where(.personal-ilpan, .company-ilpan) .pi-pick-meta, :where(.personal-ilpan, .company-ilpan) .ci-pick-meta { margin-top: 2px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-pick-side, :where(.personal-ilpan, .company-ilpan) .ci-pick-side { flex: none; color: var(--muted); }
:where(.personal-ilpan, .company-ilpan) .pi-block, :where(.personal-ilpan, .company-ilpan) .ci-block { padding: 22px 0; border-bottom: 1px solid var(--line); }
:where(.personal-ilpan, .company-ilpan) .pi-block-title, :where(.personal-ilpan, .company-ilpan) .ci-block-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 14px; font-size: 14px; }
:where(.personal-ilpan, .company-ilpan) .pi-caption, :where(.personal-ilpan, .company-ilpan) .ci-caption { color: var(--muted); font-size: 12px; font-weight: 400; }
:where(.personal-ilpan, .company-ilpan) .pi-picked-product, :where(.personal-ilpan, .company-ilpan) .ci-picked-product { display: flex; align-items: center; gap: 16px; }
:where(.personal-ilpan, .company-ilpan) .pi-thumb-large, :where(.personal-ilpan, .company-ilpan) .ci-thumb-large { width: 68px; height: 68px; border-color: var(--line); }
:where(.personal-ilpan, .company-ilpan) .pi-thumb-large svg, :where(.personal-ilpan, .company-ilpan) .ci-thumb-large svg { width: 36px; height: 36px; }
:where(.personal-ilpan, .company-ilpan) .pi-picked-info, :where(.personal-ilpan, .company-ilpan) .ci-picked-info { flex: 1; min-width: 0; }
:where(.personal-ilpan, .company-ilpan) .pi-picked-info h4, :where(.personal-ilpan, .company-ilpan) .ci-picked-info h4 { margin: 0 0 6px; font-size: 15px; font-weight: 650; line-height: 1.5; }
:where(.personal-ilpan, .company-ilpan) .pi-product-facts, :where(.personal-ilpan, .company-ilpan) .ci-product-facts { max-width: 310px; margin: 0; }
:where(.personal-ilpan, .company-ilpan) .pi-product-facts > div, :where(.personal-ilpan, .company-ilpan) .ci-product-facts > div { gap: 16px; padding-block: 2px; }
:where(.personal-ilpan, .company-ilpan) .pi-product-facts dt, :where(.personal-ilpan, .company-ilpan) .ci-product-facts dt { width: 40px; font-size: 12px; }
:where(.personal-ilpan, .company-ilpan) .pi-product-facts dd, :where(.personal-ilpan, .company-ilpan) .ci-product-facts dd { font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
:where(.personal-ilpan, .company-ilpan) .pi-product-link, :where(.personal-ilpan, .company-ilpan) .ci-product-link { display: inline-block; margin-top: 7px; color: var(--muted); font-size: 11px; text-underline-offset: 3px; }
:where(.personal-ilpan, .company-ilpan) .pi-product-link:hover, :where(.personal-ilpan, .company-ilpan) .ci-product-link:hover { color: var(--ink); text-decoration: underline; }
:where(.personal-ilpan, .company-ilpan) .pi-picked-product .pi-favorite, :where(.personal-ilpan, .company-ilpan) .ci-picked-product .ci-favorite { flex: none; min-height: 32px; padding-inline: 11px; }
:where(.personal-ilpan, .company-ilpan) .pi-favorite.is-on, :where(.personal-ilpan, .company-ilpan) .ci-favorite.is-on { border-color: oklch(85% .07 85); background: oklch(97.5% .03 90); color: var(--il-gold); }
:where(.personal-ilpan, .company-ilpan) .pi-tag, :where(.personal-ilpan, .company-ilpan) .ci-tag { display: inline-block; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 11px; font-weight: 700; }
:where(.personal-ilpan, .company-ilpan) .pi-market-facts, :where(.personal-ilpan, .company-ilpan) .ci-market-facts { margin-top: 6px; }
:where(.personal-ilpan, .company-ilpan) .pi-fact-group + .pi-fact-group, :where(.personal-ilpan, .company-ilpan) .ci-fact-group + .ci-fact-group { margin-top: 10px; }
:where(.personal-ilpan, .company-ilpan) .pi-size-grid, :where(.personal-ilpan, .company-ilpan) .ci-size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
:where(.personal-ilpan, .company-ilpan) .pi-size-option, :where(.personal-ilpan, .company-ilpan) .ci-size-option { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 7px; }
:where(.personal-ilpan, .company-ilpan) .pi-size-option.is-selected, :where(.personal-ilpan, .company-ilpan) .ci-size-option.is-selected { border-color: var(--ink); background: var(--paper); }
:where(.personal-ilpan, .company-ilpan) .pi-option-name, :where(.personal-ilpan, .company-ilpan) .ci-option-name { max-width: 100%; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.35; text-align: center; overflow-wrap: anywhere; }
:where(.personal-ilpan, .company-ilpan) .pi-option-prices, :where(.personal-ilpan, .company-ilpan) .ci-option-prices { display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 3px; overflow: hidden; }
:where(.personal-ilpan, .company-ilpan) .pi-option-price, :where(.personal-ilpan, .company-ilpan) .ci-option-price { flex: 1 1 auto; padding: 1px 4px; font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pi-option-price + .pi-option-price, :where(.personal-ilpan, .company-ilpan) .ci-option-price + .ci-option-price { margin: -1px 0 0 -1px; border-top: 1px solid oklch(91% .004 106); border-left: 1px solid oklch(91% .004 106); }
:where(.personal-ilpan, .company-ilpan) .pi-price-ask, :where(.personal-ilpan, .company-ilpan) .ci-price-ask { color: var(--il-ask); }
:where(.personal-ilpan, .company-ilpan) .pi-price-bid, :where(.personal-ilpan, .company-ilpan) .ci-price-bid { color: var(--il-bid); }
:where(.personal-ilpan, .company-ilpan) .pi-price-legend, :where(.personal-ilpan, .company-ilpan) .ci-price-legend { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; }
:where(.personal-ilpan, .company-ilpan) .pi-price-legend > span, :where(.personal-ilpan, .company-ilpan) .ci-price-legend > span { white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pi-price-legend [aria-hidden="true"], :where(.personal-ilpan, .company-ilpan) .ci-price-legend [aria-hidden="true"] { font-size: 9px; vertical-align: 1px; }
:where(.personal-ilpan, .company-ilpan) .pi-stepper, :where(.personal-ilpan, .company-ilpan) .ci-stepper { display: flex; align-items: center; gap: 6px; }
:where(.personal-ilpan, .company-ilpan) .pi-stepper button, :where(.personal-ilpan, .company-ilpan) .ci-stepper button { width: 26px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); line-height: 1; }
:where(.personal-ilpan, .company-ilpan) .pi-stepper input, :where(.personal-ilpan, .company-ilpan) .ci-stepper input { width: 42px; height: 28px; padding: 0; text-align: center; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
:where(.personal-ilpan, .company-ilpan) .pi-stepper input::-webkit-inner-spin-button, :where(.personal-ilpan, .company-ilpan) .pi-stepper input::-webkit-outer-spin-button, :where(.personal-ilpan, .company-ilpan) .ci-stepper input::-webkit-inner-spin-button, :where(.personal-ilpan, .company-ilpan) .ci-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-dialog, :where(.personal-ilpan, .company-ilpan) .ci-quote-dialog { width: min(680px, calc(100vw - 32px)); }
:where(.personal-ilpan, .company-ilpan) .pi-quote-head, :where(.personal-ilpan, .company-ilpan) .ci-quote-head { align-items: flex-start; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-head h2, :where(.personal-ilpan, .company-ilpan) .ci-quote-head h2 { font-size: 16px; line-height: 1.35; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-head p, :where(.personal-ilpan, .company-ilpan) .ci-quote-head p { margin-top: 3px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-body, :where(.personal-ilpan, .company-ilpan) .ci-quote-body { padding: 16px 24px 0; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-option, :where(.personal-ilpan, .company-ilpan) .ci-quote-option { width: 100%; height: 40px !important; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-price, :where(.personal-ilpan, .company-ilpan) .ci-quote-price { display: flex; align-items: baseline; gap: 10px; padding: 16px 0 2px; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-price strong, :where(.personal-ilpan, .company-ilpan) .ci-quote-price strong { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-diff, :where(.personal-ilpan, .company-ilpan) .ci-quote-diff { color: var(--il-down); font-weight: 700; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-period, :where(.personal-ilpan, .company-ilpan) .ci-quote-period { display: flex; gap: 4px; padding-top: 10px; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-period button, :where(.personal-ilpan, .company-ilpan) .ci-quote-period button { flex: 1; height: 30px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 12px !important; font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-period button[aria-pressed="true"], :where(.personal-ilpan, .company-ilpan) .ci-quote-period button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
:where(.personal-ilpan, .company-ilpan) .pi-quote-chart, :where(.personal-ilpan, .company-ilpan) .ci-quote-chart { display: flex; align-items: center; justify-content: center; height: 150px; margin-top: 12px; border-bottom: 1px solid oklch(92% .007 106); background: repeating-linear-gradient(to bottom, transparent 0 44px, oklch(93% .006 106) 44px 45px); color: var(--muted); font-size: 12px; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-tabs, :where(.personal-ilpan, .company-ilpan) .ci-quote-tabs { display: flex; margin-top: 16px; border-bottom: 1px solid var(--line); }
:where(.personal-ilpan, .company-ilpan) .pi-quote-tabs button, :where(.personal-ilpan, .company-ilpan) .ci-quote-tabs button { height: 34px; padding: 0 14px; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-tabs button[aria-selected="true"], :where(.personal-ilpan, .company-ilpan) .ci-quote-tabs button[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); }
:where(.personal-ilpan, .company-ilpan) .pi-quote-deals, :where(.personal-ilpan, .company-ilpan) .ci-quote-deals { padding: 4px 0 8px; }
:where(.personal-ilpan, .company-ilpan) .pi-deal, :where(.personal-ilpan, .company-ilpan) .ci-deal { display: flex; padding: 9px 2px; border-bottom: 1px solid oklch(92% .007 106); font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-deal > span:first-child, :where(.personal-ilpan, .company-ilpan) .ci-deal > span:first-child { width: 90px; }
:where(.personal-ilpan, .company-ilpan) .pi-deal > span:nth-child(2), :where(.personal-ilpan, .company-ilpan) .ci-deal > span:nth-child(2) { flex: 1; text-align: right; }
:where(.personal-ilpan, .company-ilpan) .pi-deal > span:last-child, :where(.personal-ilpan, .company-ilpan) .ci-deal > span:last-child { width: 110px; text-align: right; }
:where(.personal-ilpan, .company-ilpan) .pi-deal-head, :where(.personal-ilpan, .company-ilpan) .ci-deal-head { color: var(--muted); font-size: 12px; font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-chart, :where(.personal-ilpan, .company-ilpan) .ci-quote-chart { position: relative; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-chart svg, :where(.personal-ilpan, .company-ilpan) .ci-quote-chart svg { display: block; width: calc(100% - 84px); height: 100%; margin-left: 84px; overflow: visible; }
:where(.personal-ilpan, .company-ilpan) .pi-chart-line, :where(.personal-ilpan, .company-ilpan) .ci-chart-line { fill: none; stroke: var(--il-chart-color); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-chart svg, :where(.personal-ilpan, .company-ilpan) .ci-quote-chart svg { --il-chart-color: oklch(40% .005 271); }
:where(.personal-ilpan, .company-ilpan) .pi-quote-chart svg.pi-chart-up, :where(.personal-ilpan, .company-ilpan) .ci-quote-chart svg.ci-chart-up { --il-chart-color: var(--il-up); }
:where(.personal-ilpan, .company-ilpan) .pi-quote-chart svg.pi-chart-down, :where(.personal-ilpan, .company-ilpan) .ci-quote-chart svg.ci-chart-down { --il-chart-color: var(--il-down); }
:where(.personal-ilpan, .company-ilpan) .pi-chart-area, :where(.personal-ilpan, .company-ilpan) .ci-chart-area { fill: var(--il-chart-color); fill-opacity: .07; stroke: none; }
:where(.personal-ilpan, .company-ilpan) .pi-chart-high, :where(.personal-ilpan, .company-ilpan) .pi-chart-low, :where(.personal-ilpan, .company-ilpan) .ci-chart-high, :where(.personal-ilpan, .company-ilpan) .ci-chart-low { position: absolute; left: 0; width: 78px; padding: 0; text-align: right; white-space: nowrap; border-radius: 3px; background: var(--surface); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; }
:where(.personal-ilpan, .company-ilpan) .pi-chart-high, :where(.personal-ilpan, .company-ilpan) .ci-chart-high { top: 0; }
:where(.personal-ilpan, .company-ilpan) .pi-chart-low, :where(.personal-ilpan, .company-ilpan) .ci-chart-low { bottom: 2px; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-message, :where(.personal-ilpan, .company-ilpan) .ci-quote-message { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 22px 0 14px; color: var(--muted); font-size: 12px; text-align: center; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-chart > .pi-quote-message, :where(.personal-ilpan, .company-ilpan) .ci-quote-chart > .ci-quote-message { padding: 4px 10px; border-radius: 5px; background: var(--surface); }
:where(.personal-ilpan, .company-ilpan) .pi-quote-message.is-error, :where(.personal-ilpan, .company-ilpan) .ci-quote-message.is-error { color: var(--il-danger); }
:where(.personal-ilpan, .company-ilpan) .pi-skeleton-block, :where(.personal-ilpan, .company-ilpan) .ci-skeleton-block { width: 100%; height: 100%; min-height: 96px; border-radius: 6px; background: linear-gradient(90deg, oklch(93% .005 106) 25%, oklch(96.5% .004 106) 50%, oklch(93% .005 106) 75%); background-size: 200% 100%; animation: il-skeleton 1.2s ease-in-out infinite; }
:where(.personal-ilpan, .company-ilpan) #pi-deal-rows .pi-skeleton-block, :where(.personal-ilpan, .company-ilpan) #ci-deal-rows .ci-skeleton-block { height: 96px; margin-top: 8px; }
@keyframes il-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
:where(.personal-ilpan, .company-ilpan) .pi-deal-fast, :where(.personal-ilpan, .company-ilpan) .ci-deal-fast { position: relative; display: inline-flex; flex-shrink: 0; margin-left: 4px; color: oklch(64% .16 150); }
:where(.personal-ilpan, .company-ilpan) .pi-deal-fast svg, :where(.personal-ilpan, .company-ilpan) .ci-deal-fast svg { display: block; fill: currentColor; }
:where(.personal-ilpan, .company-ilpan) .pi-deal > span:first-child, :where(.personal-ilpan, .company-ilpan) .ci-deal > span:first-child { display: flex; align-items: center; flex: 0 0 170px; width: auto; min-width: 0; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pi-deal > span:last-child, :where(.personal-ilpan, .company-ilpan) .ci-deal > span:last-child { flex: 0 0 110px; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pi-deal > span:nth-child(2), :where(.personal-ilpan, .company-ilpan) .ci-deal > span:nth-child(2) { min-width: 0; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-dialog, :where(.personal-ilpan, .company-ilpan) .ci-quote-dialog { height: calc(100dvh - 48px); max-height: 860px; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-body, :where(.personal-ilpan, .company-ilpan) .ci-quote-body { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow-y: auto; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-body > *, :where(.personal-ilpan, .company-ilpan) .ci-quote-body > * { flex-shrink: 0; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-body > .pi-quote-deals, :where(.personal-ilpan, .company-ilpan) .ci-quote-body > .ci-quote-deals { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding-top: 0; scrollbar-width: thin; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-deals .pi-deal-head, :where(.personal-ilpan, .company-ilpan) .ci-quote-deals .ci-deal-head { position: sticky; top: 0; z-index: 1; background: var(--surface); }
:where(.personal-ilpan, .company-ilpan) .pi-quote-chart svg, :where(.personal-ilpan, .company-ilpan) .ci-quote-chart svg { touch-action: none; cursor: crosshair; }
:where(.personal-ilpan, .company-ilpan) .pi-chart-cursor, :where(.personal-ilpan, .company-ilpan) .ci-chart-cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: oklch(70% .006 106); pointer-events: none; }
:where(.personal-ilpan, .company-ilpan) .pi-chart-dot, :where(.personal-ilpan, .company-ilpan) .ci-chart-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 2px solid var(--surface); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px var(--ink); pointer-events: none; }
:where(.personal-ilpan, .company-ilpan) .pi-chart-tip, :where(.personal-ilpan, .company-ilpan) .ci-chart-tip { position: absolute; z-index: 2; padding: 3px 8px; border-radius: 5px; background: var(--ink); color: var(--surface); font-size: 11.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
:where(.personal-ilpan, .company-ilpan) .pi-chart-cursor[hidden], :where(.personal-ilpan, .company-ilpan) .pi-chart-dot[hidden], :where(.personal-ilpan, .company-ilpan) .pi-chart-tip[hidden], :where(.personal-ilpan, .company-ilpan) .ci-chart-cursor[hidden], :where(.personal-ilpan, .company-ilpan) .ci-chart-dot[hidden], :where(.personal-ilpan, .company-ilpan) .ci-chart-tip[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-deal-note, :where(.personal-ilpan, .company-ilpan) .ci-deal-note { padding: 8px 2px 0; color: var(--muted); font-size: 11.5px; text-align: right; }
:where(.personal-ilpan, .company-ilpan) .pi-deal-note[hidden], :where(.personal-ilpan, .company-ilpan) .ci-deal-note[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-stats, :where(.personal-ilpan, .company-ilpan) .ci-quote-stats { display: flex; gap: 10px; margin: 0 -24px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--paper); }
:where(.personal-ilpan, .company-ilpan) .pi-quote-stat, :where(.personal-ilpan, .company-ilpan) .ci-quote-stat { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
:where(.personal-ilpan, .company-ilpan) .pi-stat-label, :where(.personal-ilpan, .company-ilpan) .ci-stat-label { color: var(--muted); font-size: 12px; }
:where(.personal-ilpan, .company-ilpan) .pi-stat-label, :where(.personal-ilpan, .company-ilpan) .ci-stat-label { display: inline-flex; align-items: center; gap: 2px; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-stat strong, :where(.personal-ilpan, .company-ilpan) .ci-quote-stat strong { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-stat:first-child strong, :where(.personal-ilpan, .company-ilpan) .ci-quote-stat:first-child strong { color: var(--green); }
:where(.personal-ilpan, .company-ilpan) .pi-quote-stat[data-tone="buy"] strong, :where(.personal-ilpan, .company-ilpan) .ci-quote-stat[data-tone="buy"] strong { color: var(--il-up); }
:where(.personal-ilpan, .company-ilpan) .pi-quote-stat[data-tone="sell"] strong, :where(.personal-ilpan, .company-ilpan) .ci-quote-stat[data-tone="sell"] strong { color: oklch(46% .1 155); }
:where(.personal-ilpan, .company-ilpan) .pi-quote-bid, :where(.personal-ilpan, .company-ilpan) .ci-quote-bid { margin: 0 -24px; padding: 16px 24px 20px; border-top: 1px solid var(--line); background: var(--paper); }
:where(.personal-ilpan, .company-ilpan) .pi-quote-bid h3, :where(.personal-ilpan, .company-ilpan) .ci-quote-bid h3 { margin-bottom: 12px; font-size: 13px; font-weight: 700; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-bid-row, :where(.personal-ilpan, .company-ilpan) .ci-quote-bid-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
:where(.personal-ilpan, .company-ilpan) .pi-field, :where(.personal-ilpan, .company-ilpan) .ci-field { display: flex; flex-direction: column; gap: 6px; }
:where(.personal-ilpan, .company-ilpan) .pi-field > span, :where(.personal-ilpan, .company-ilpan) .ci-field > span { color: var(--muted); font-size: 11.5px; font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pi-field input, :where(.personal-ilpan, .company-ilpan) .ci-field input { width: 130px; text-align: center; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-icon-definitions, :where(.personal-ilpan, .company-ilpan) .ci-icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
@media (max-width: 1150px) {
    :where(.personal-ilpan, .company-ilpan) .pi-panel-head, :where(.personal-ilpan, .company-ilpan) .ci-panel-head { padding-block: 0; }
}
@media (max-width: 800px) {
    .workspace-content.personal-ilpan, .workspace-content.company-ilpan { padding: 20px 16px 36px; }
    :where(.personal-ilpan, .company-ilpan) .pi-scroll-hint, :where(.personal-ilpan, .company-ilpan) .ci-scroll-hint { display: block; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
    :where(.personal-ilpan, .company-ilpan) .pi-notice, :where(.personal-ilpan, .company-ilpan) .ci-notice { left: 50%; }
    :where(.personal-ilpan, .company-ilpan) .pi-list-foot, :where(.personal-ilpan, .company-ilpan) .ci-list-foot { flex-wrap: wrap; gap: 4px; }
    :where(.personal-ilpan, .company-ilpan) .pi-view, :where(.personal-ilpan, .company-ilpan) .ci-view { gap: 12px; }
    :where(.personal-ilpan, .company-ilpan) .pi-dialog, :where(.personal-ilpan, .company-ilpan) .ci-dialog { max-height: calc(100dvh - 24px); }
    :where(.personal-ilpan, .company-ilpan) .pi-bulk-bar, :where(.personal-ilpan, .company-ilpan) .ci-bulk-bar { justify-content: flex-start; }
    :where(.personal-ilpan, .company-ilpan) .pi-list-panel, :where(.personal-ilpan, .company-ilpan) .ci-list-panel { min-height: min-content; }
    :where(.personal-ilpan, .company-ilpan) .pi-table-scroll, :where(.personal-ilpan, .company-ilpan) .ci-table-scroll { min-height: 260px; }
}
@media (max-width: 520px) {
    :where(.personal-ilpan, .company-ilpan) .pi-control-bar, :where(.personal-ilpan, .company-ilpan) .ci-control-bar { padding: 14px; }
    :where(.personal-ilpan, .company-ilpan) .pi-control-bar > .pi-with-help, :where(.personal-ilpan, .company-ilpan) .ci-control-bar > .ci-with-help { width: 100%; }
    :where(.personal-ilpan, .company-ilpan) .pi-control-bar > .pi-with-help .pi-add-button, :where(.personal-ilpan, .company-ilpan) .ci-control-bar > .ci-with-help .ci-add-button { flex: 1; }
    :where(.personal-ilpan, .company-ilpan) .pi-run-controls, :where(.personal-ilpan, .company-ilpan) .ci-run-controls { justify-content: space-between; width: 100%; margin-left: 0; padding-top: 12px; border-top: 1px solid var(--line); }
    :where(.personal-ilpan, .company-ilpan) .pi-run-button, :where(.personal-ilpan, .company-ilpan) .ci-run-button { min-width: 0; }
    :where(.personal-ilpan, .company-ilpan) .pi-run-controls .pi-run-button, :where(.personal-ilpan, .company-ilpan) .ci-run-controls .ci-run-button { min-width: 120px; }
    :where(.personal-ilpan, .company-ilpan) .pi-panel-head, :where(.personal-ilpan, .company-ilpan) .ci-panel-head { padding-inline: 12px; }
    :where(.personal-ilpan, .company-ilpan) .pi-list-tabs, :where(.personal-ilpan, .company-ilpan) .ci-list-tabs { gap: 16px; }
    :where(.personal-ilpan, .company-ilpan) .pi-list-tabs > button, :where(.personal-ilpan, .company-ilpan) .ci-list-tabs > button { min-height: 50px; gap: 5px; font-size: 13px; }
    :where(.personal-ilpan, .company-ilpan) .pi-head-tools, :where(.personal-ilpan, .company-ilpan) .ci-head-tools { justify-content: flex-start; width: 100%; padding-top: 0; }
    :where(.personal-ilpan, .company-ilpan) .pi-bulk-bar, :where(.personal-ilpan, .company-ilpan) .ci-bulk-bar { padding-inline: 12px; }
    :where(.personal-ilpan, .company-ilpan) .pi-bulk-label, :where(.personal-ilpan, .company-ilpan) .ci-bulk-label { width: 100%; }
    :where(.personal-ilpan, .company-ilpan) .pi-bulk-sep, :where(.personal-ilpan, .company-ilpan) .ci-bulk-sep { display: none; }
    :where(.personal-ilpan, .company-ilpan) .pi-bulk-group, :where(.personal-ilpan, .company-ilpan) .ci-bulk-group { flex: 1 1 100%; }
    :where(.personal-ilpan, .company-ilpan) .pi-bulk-group > input, :where(.personal-ilpan, .company-ilpan) .pi-bulk-group > select, :where(.personal-ilpan, .company-ilpan) .ci-bulk-group > input, :where(.personal-ilpan, .company-ilpan) .ci-bulk-group > select { flex: 1; width: auto; }
    :where(.personal-ilpan, .company-ilpan) .pi-dialog-head, :where(.personal-ilpan, .company-ilpan) .pi-dialog-foot, :where(.personal-ilpan, .company-ilpan) .ci-dialog-head, :where(.personal-ilpan, .company-ilpan) .ci-dialog-foot { gap: 8px; padding: 14px 16px; }
    :where(.personal-ilpan, .company-ilpan) .pi-dialog-body, :where(.personal-ilpan, .company-ilpan) .ci-dialog-body { padding: 18px 16px; }
    :where(.personal-ilpan, .company-ilpan) .pi-quote-body, :where(.personal-ilpan, .company-ilpan) .ci-quote-body { padding: 14px 16px 0; }
    :where(.personal-ilpan, .company-ilpan) .pi-quote-stats, :where(.personal-ilpan, .company-ilpan) .pi-quote-bid, :where(.personal-ilpan, .company-ilpan) .ci-quote-stats, :where(.personal-ilpan, .company-ilpan) .ci-quote-bid { margin-inline: -16px; padding-inline: 16px; }
    :where(.personal-ilpan, .company-ilpan) .pi-quote-dialog, :where(.personal-ilpan, .company-ilpan) .ci-quote-dialog { height: calc(100dvh - 24px); }
    :where(.personal-ilpan, .company-ilpan) .pi-quote-stats, :where(.personal-ilpan, .company-ilpan) .ci-quote-stats { gap: 6px; padding-block: 10px; }
    :where(.personal-ilpan, .company-ilpan) .pi-quote-stat, :where(.personal-ilpan, .company-ilpan) .ci-quote-stat { padding: 7px 8px; }
    :where(.personal-ilpan, .company-ilpan) .pi-quote-stat strong, :where(.personal-ilpan, .company-ilpan) .ci-quote-stat strong { font-size: 13.5px; }
    :where(.personal-ilpan, .company-ilpan) .pi-quote-chart, :where(.personal-ilpan, .company-ilpan) .ci-quote-chart { height: 120px; }
    :where(.personal-ilpan, .company-ilpan) .pi-quote-bid, :where(.personal-ilpan, .company-ilpan) .ci-quote-bid { padding-block: 12px 14px; }
    :where(.personal-ilpan, .company-ilpan) .pi-quote-bid h3, :where(.personal-ilpan, .company-ilpan) .ci-quote-bid h3 { margin-bottom: 8px; }
    :where(.personal-ilpan, .company-ilpan) .pi-deal > span:first-child, :where(.personal-ilpan, .company-ilpan) .ci-deal > span:first-child { flex-basis: 150px; }
    :where(.personal-ilpan, .company-ilpan) .pi-deal > span:last-child, :where(.personal-ilpan, .company-ilpan) .ci-deal > span:last-child { flex-basis: 76px; }
    :where(.personal-ilpan, .company-ilpan) .pi-size-grid, :where(.personal-ilpan, .company-ilpan) .ci-size-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px; }
    :where(.personal-ilpan, .company-ilpan) .pi-size-option, :where(.personal-ilpan, .company-ilpan) .ci-size-option { padding: 10px 4px; }
    :where(.personal-ilpan, .company-ilpan) .pi-stepper, :where(.personal-ilpan, .company-ilpan) .ci-stepper { gap: 3px; }
    :where(.personal-ilpan, .company-ilpan) .pi-stepper input, :where(.personal-ilpan, .company-ilpan) .ci-stepper input { width: 32px; }
}
@media (max-width: 760px) {
    :where(.personal-ilpan, .company-ilpan) .pi-product-dialog .pi-dialog-head, :where(.personal-ilpan, .company-ilpan) .pi-product-dialog .pi-dialog-body, :where(.personal-ilpan, .company-ilpan) .ci-product-dialog .ci-dialog-head, :where(.personal-ilpan, .company-ilpan) .ci-product-dialog .ci-dialog-body { padding: 18px; }
    :where(.personal-ilpan, .company-ilpan) .pi-product-dialog .pi-dialog-foot, :where(.personal-ilpan, .company-ilpan) .ci-product-dialog .ci-dialog-foot { padding: 14px 18px; }
    :where(.personal-ilpan, .company-ilpan) .pi-pick-grid, :where(.personal-ilpan, .company-ilpan) .ci-pick-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    :where(.personal-ilpan, .company-ilpan) .pi-product-dialog, :where(.personal-ilpan, .company-ilpan) .ci-product-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
    :where(.personal-ilpan, .company-ilpan) .pi-search-form, :where(.personal-ilpan, .company-ilpan) .ci-search-form { gap: 6px; }
    :where(.personal-ilpan, .company-ilpan) .pi-search-form input, :where(.personal-ilpan, .company-ilpan) .ci-search-form input { font-size: 12px; }
    :where(.personal-ilpan, .company-ilpan) .pi-product-dialog .pi-dialog-foot, :where(.personal-ilpan, .company-ilpan) .ci-product-dialog .ci-dialog-foot { flex-wrap: wrap; gap: 8px; }
    :where(.personal-ilpan, .company-ilpan) .pi-product-dialog .pi-dialog-foot > span, :where(.personal-ilpan, .company-ilpan) .ci-product-dialog .ci-dialog-foot > span { flex-basis: 100%; }
    :where(.personal-ilpan, .company-ilpan) .pi-picked-product, :where(.personal-ilpan, .company-ilpan) .ci-picked-product { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: start; gap: 12px; }
    :where(.personal-ilpan, .company-ilpan) .pi-picked-product > .pi-favorite, :where(.personal-ilpan, .company-ilpan) .ci-picked-product > .ci-favorite { grid-column: 2; justify-self: start; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
    :where(.personal-ilpan, .company-ilpan) .pi-button, :where(.personal-ilpan, .company-ilpan) .ci-button { transition: none; }
    :where(.personal-ilpan, .company-ilpan) .il-shake { animation: none; }
    :where(.personal-ilpan, .company-ilpan) .pi-skeleton-block, :where(.personal-ilpan, .company-ilpan) .ci-skeleton-block { animation: none; }
}
:where(.personal-ilpan, .company-ilpan) .pi-lookup-status, :where(.personal-ilpan, .company-ilpan) .ci-lookup-status { margin: 16px 0; padding: 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
:where(.personal-ilpan, .company-ilpan) .pi-lookup-status.is-error, :where(.personal-ilpan, .company-ilpan) .ci-lookup-status.is-error { background: oklch(97% .012 28); color: var(--il-danger); }
:where(.personal-ilpan, .company-ilpan) .pi-lookup-status[hidden], :where(.personal-ilpan, .company-ilpan) .ci-lookup-status[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-stats-line, :where(.personal-ilpan, .company-ilpan) .ci-stats-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 10px; }
:where(.personal-ilpan, .company-ilpan) .pi-stats-line:not(:has(:not([hidden]))), :where(.personal-ilpan, .company-ilpan) .ci-stats-line:not(:has(:not([hidden]))) { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-stats-status, :where(.personal-ilpan, .company-ilpan) .ci-stats-status { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
:where(.personal-ilpan, .company-ilpan) .pi-stats-status.is-error, :where(.personal-ilpan, .company-ilpan) .ci-stats-status.is-error { color: var(--il-danger); }
:where(.personal-ilpan, .company-ilpan) .pi-stats-status[hidden], :where(.personal-ilpan, .company-ilpan) #pi-stats-retry[hidden], :where(.personal-ilpan, .company-ilpan) .ci-stats-status[hidden], :where(.personal-ilpan, .company-ilpan) #ci-stats-retry[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-change-up, :where(.personal-ilpan, .company-ilpan) .ci-change-up { color: var(--il-up); }
:where(.personal-ilpan, .company-ilpan) .pi-change-down, :where(.personal-ilpan, .company-ilpan) .ci-change-down { color: var(--il-down); }
:where(.personal-ilpan, .company-ilpan) .pi-thumb.has-image, :where(.personal-ilpan, .company-ilpan) .ci-thumb.has-image { overflow: hidden; background: #fff; }
:where(.personal-ilpan, .company-ilpan) .pi-thumb img, :where(.personal-ilpan, .company-ilpan) .ci-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
:where(.personal-ilpan, .company-ilpan) .pi-table thead th, :where(.personal-ilpan, .company-ilpan) .pi-table thead th.pi-product-column, :where(.personal-ilpan, .company-ilpan) .ci-table thead th, :where(.personal-ilpan, .company-ilpan) .ci-table thead th.ci-product-column { text-align: center; }
:where(.personal-ilpan, .company-ilpan) .pi-table thead th.pi-product-column .pi-sort, :where(.personal-ilpan, .company-ilpan) .ci-table thead th.ci-product-column .ci-sort { justify-content: center; }
:where(.personal-ilpan, .company-ilpan) .pis-panel, :where(.personal-ilpan, .company-ilpan) .cis-panel { min-height: 420px; }
:where(.personal-ilpan, .company-ilpan) .pis-panel > :not(.pis-scroll), :where(.personal-ilpan, .company-ilpan) .cis-panel > :not(.cis-scroll) { flex-shrink: 0; }
:where(.personal-ilpan, .company-ilpan) .pis-howto, :where(.personal-ilpan, .company-ilpan) .cis-howto { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
:where(.personal-ilpan, .company-ilpan) .pis-stage-strip, :where(.personal-ilpan, .company-ilpan) .cis-stage-strip { display: flex; align-items: center; gap: 25px; padding-inline: 18px; overflow-x: auto; border-bottom: 1px solid var(--line); }
:where(.personal-ilpan, .company-ilpan) .pis-stage-strip > button, :where(.personal-ilpan, .company-ilpan) .cis-stage-strip > button { display: flex; align-items: center; gap: 7px; min-height: 56px; padding: 14px 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-weight: 600; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pis-stage-strip > button[aria-pressed="true"], :where(.personal-ilpan, .company-ilpan) .cis-stage-strip > button[aria-pressed="true"] { border-bottom-color: var(--ink); color: var(--ink); }
:where(.personal-ilpan, .company-ilpan) .pis-stage-strip b, :where(.personal-ilpan, .company-ilpan) .cis-stage-strip b { font-size: 12px; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pis-sync-group, :where(.personal-ilpan, .company-ilpan) .cis-sync-group { display: flex; flex: none; align-items: center; gap: 10px; margin-left: auto; padding-left: 12px; }
:where(.personal-ilpan, .company-ilpan) .pis-sync, :where(.personal-ilpan, .company-ilpan) .cis-sync { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 12px; text-align: right; }
:where(.personal-ilpan, .company-ilpan) .pis-sync-line, :where(.personal-ilpan, .company-ilpan) .cis-sync-line { display: flex; align-items: center; justify-content: flex-end; gap: 4px 10px; }
:where(.personal-ilpan, .company-ilpan) .pis-sync-text, :where(.personal-ilpan, .company-ilpan) .cis-sync-text { white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pis-sync.is-running .pis-sync-text, :where(.personal-ilpan, .company-ilpan) .cis-sync.is-running .cis-sync-text { color: var(--ink); font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pis-sync-text.is-error, :where(.personal-ilpan, .company-ilpan) .pis-sync-note.is-error, :where(.personal-ilpan, .company-ilpan) .cis-sync-text.is-error, :where(.personal-ilpan, .company-ilpan) .cis-sync-note.is-error { color: var(--il-danger); }
:where(.personal-ilpan, .company-ilpan) .pis-sync-note, :where(.personal-ilpan, .company-ilpan) .cis-sync-note { max-width: 240px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.personal-ilpan, .company-ilpan) .pis-sync-note[hidden], :where(.personal-ilpan, .company-ilpan) .pis-sync-bar[hidden], :where(.personal-ilpan, .company-ilpan) .pis-sync-btn[hidden], :where(.personal-ilpan, .company-ilpan) .cis-sync-note[hidden], :where(.personal-ilpan, .company-ilpan) .cis-sync-bar[hidden], :where(.personal-ilpan, .company-ilpan) .cis-sync-btn[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pis-sync-bar, :where(.personal-ilpan, .company-ilpan) .cis-sync-bar { position: relative; flex: none; width: 120px; height: 6px; border-radius: 3px; background: var(--il-wash); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
:where(.personal-ilpan, .company-ilpan) .pis-sync-fill, :where(.personal-ilpan, .company-ilpan) .cis-sync-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: var(--ink); transition: width .6s ease-out; }
:where(.personal-ilpan, .company-ilpan) .pis-sync-btn, :where(.personal-ilpan, .company-ilpan) .cis-sync-btn { flex: none; min-width: 98px; justify-content: center; }
:where(.personal-ilpan, .company-ilpan) .pis-run-stop svg, :where(.personal-ilpan, .company-ilpan) .cis-run-stop svg { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
    :where(.personal-ilpan, .company-ilpan) .pis-sync-fill, :where(.personal-ilpan, .company-ilpan) .cis-sync-fill { transition: none; }
}
:where(.personal-ilpan, .company-ilpan) .pis-filters, :where(.personal-ilpan, .company-ilpan) .cis-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
:where(.personal-ilpan, .company-ilpan) .pis-filter-left, :where(.personal-ilpan, .company-ilpan) .cis-filter-left { display: flex; flex: 1 1 385px; align-items: center; gap: 10px; min-width: 0; max-width: 505px; }
:where(.personal-ilpan, .company-ilpan) .pis-filter-left > select, :where(.personal-ilpan, .company-ilpan) .cis-filter-left > select { flex: none; width: auto; max-width: 100%; }
:where(.personal-ilpan, .company-ilpan) .pis-search, :where(.personal-ilpan, .company-ilpan) .cis-search { display: flex; flex: 1 1 360px; align-items: center; gap: 7px; min-width: 240px; max-width: 360px; padding-left: 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); }
:where(.personal-ilpan, .company-ilpan) .pis-search svg, :where(.personal-ilpan, .company-ilpan) .cis-search svg { flex-shrink: 0; }
.personal-ilpan .pis-search input, .company-ilpan .cis-search input { width: 100%; padding-left: 0; padding-right: 8px; border: 0; background: transparent; }
:where(.personal-ilpan, .company-ilpan) .pis-manage, :where(.personal-ilpan, .company-ilpan) .cis-manage { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; color: var(--muted); font-size: 12.5px; }
:where(.personal-ilpan, .company-ilpan) .pis-manage strong, :where(.personal-ilpan, .company-ilpan) .cis-manage strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pis-sel-count, :where(.personal-ilpan, .company-ilpan) .cis-sel-count { white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-buttons, :where(.personal-ilpan, .company-ilpan) .cis-manage-buttons { display: flex; align-items: center; gap: 8px; }
:where(.personal-ilpan, .company-ilpan) .pis-manage.is-off, :where(.personal-ilpan, .company-ilpan) #pis-all.is-off, :where(.personal-ilpan, .company-ilpan) .cis-manage.is-off, :where(.personal-ilpan, .company-ilpan) #cis-all.is-off { visibility: hidden; }
:where(.personal-ilpan, .company-ilpan) .pis-scroll, :where(.personal-ilpan, .company-ilpan) .cis-scroll { flex: 1; height: 0; min-height: 160px; overflow: auto; overscroll-behavior-x: contain; container-type: inline-size; }
:where(.personal-ilpan, .company-ilpan) .pis-table, :where(.personal-ilpan, .company-ilpan) .cis-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 12px; }
:where(.personal-ilpan, .company-ilpan) .pis-table th, :where(.personal-ilpan, .company-ilpan) .pis-table td, :where(.personal-ilpan, .company-ilpan) .cis-table th, :where(.personal-ilpan, .company-ilpan) .cis-table td { text-align: center; vertical-align: middle; }
:where(.personal-ilpan, .company-ilpan) .pis-table th, :where(.personal-ilpan, .company-ilpan) .cis-table th { position: sticky; top: 0; z-index: 1; height: 44px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--il-wash); color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pis-table td, :where(.personal-ilpan, .company-ilpan) .cis-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); }
:where(.personal-ilpan, .company-ilpan) .pis-table tbody tr[data-id] > td, :where(.personal-ilpan, .company-ilpan) .cis-table tbody tr[data-id] > td { height: 88px; }
:where(.personal-ilpan, .company-ilpan) .pis-table tbody tr[data-id]:hover, :where(.personal-ilpan, .company-ilpan) .cis-table tbody tr[data-id]:hover { background: oklch(98% .006 106); }
:where(.personal-ilpan, .company-ilpan) .pis-table tbody > tr[hidden], :where(.personal-ilpan, .company-ilpan) .cis-table tbody > tr[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pis-table tbody tr.pis-vpad > td, :where(.personal-ilpan, .company-ilpan) .cis-table tbody tr.cis-vpad > td { padding: 0; border: 0; background: transparent; }
:where(.personal-ilpan, .company-ilpan) .pis-table:has(> tbody > .pis-empty-row:not([hidden])), :where(.personal-ilpan, .company-ilpan) .cis-table:has(> tbody > .cis-empty-row:not([hidden])) { height: 100%; }
:where(.personal-ilpan, .company-ilpan) .pis-table tr.pis-empty-row > td, :where(.personal-ilpan, .company-ilpan) .cis-table tr.cis-empty-row > td { padding: 16px 20px; border-bottom: 0; }
:where(.personal-ilpan, .company-ilpan) .pis-table .pis-fill-cell, :where(.personal-ilpan, .company-ilpan) .cis-table .cis-fill-cell { padding: 0; }
:where(.personal-ilpan, .company-ilpan) .pis-table col.pis-fill-column, :where(.personal-ilpan, .company-ilpan) .cis-table col.cis-fill-column { width: auto; }
:where(.personal-ilpan, .company-ilpan) .pis-table .pis-index, :where(.personal-ilpan, .company-ilpan) .pis-table th[data-col="index"], :where(.personal-ilpan, .company-ilpan) .cis-table .cis-index, :where(.personal-ilpan, .company-ilpan) .cis-table th[data-col="index"] { padding-inline: 4px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pis-table [data-col="check"], :where(.personal-ilpan, .company-ilpan) .cis-table [data-col="check"] { padding-inline: 8px; }
:where(.personal-ilpan, .company-ilpan) .pis-table:not([data-cols~="market"]) [data-col="market"], :where(.personal-ilpan, .company-ilpan) .pis-table:not([data-cols~="bid"]) [data-col="bid"], :where(.personal-ilpan, .company-ilpan) .pis-table:not([data-cols~="sale"]) [data-col="sale"], :where(.personal-ilpan, .company-ilpan) .pis-table:not([data-cols~="settle"]) [data-col="settle"], :where(.personal-ilpan, .company-ilpan) .pis-table:not([data-cols~="purchase"]) [data-col="purchase"], :where(.personal-ilpan, .company-ilpan) .pis-table:not([data-cols~="rank"]) [data-col="rank"], :where(.personal-ilpan, .company-ilpan) .pis-table:not([data-cols~="reason"]) [data-col="reason"], :where(.personal-ilpan, .company-ilpan) .pis-table:not([data-cols~="createdDate"]) [data-col="createdDate"], :where(.personal-ilpan, .company-ilpan) .pis-table:not([data-cols~="tradeDate"]) [data-col="tradeDate"], :where(.personal-ilpan, .company-ilpan) .pis-table:not([data-cols~="paidDate"]) [data-col="paidDate"], :where(.personal-ilpan, .company-ilpan) .pis-table:not([data-cols~="expiresDate"]) [data-col="expiresDate"], :where(.personal-ilpan, .company-ilpan) .cis-table:not([data-cols~="market"]) [data-col="market"], :where(.personal-ilpan, .company-ilpan) .cis-table:not([data-cols~="bid"]) [data-col="bid"], :where(.personal-ilpan, .company-ilpan) .cis-table:not([data-cols~="sale"]) [data-col="sale"], :where(.personal-ilpan, .company-ilpan) .cis-table:not([data-cols~="settle"]) [data-col="settle"], :where(.personal-ilpan, .company-ilpan) .cis-table:not([data-cols~="purchase"]) [data-col="purchase"], :where(.personal-ilpan, .company-ilpan) .cis-table:not([data-cols~="rank"]) [data-col="rank"], :where(.personal-ilpan, .company-ilpan) .cis-table:not([data-cols~="reason"]) [data-col="reason"], :where(.personal-ilpan, .company-ilpan) .cis-table:not([data-cols~="createdDate"]) [data-col="createdDate"], :where(.personal-ilpan, .company-ilpan) .cis-table:not([data-cols~="tradeDate"]) [data-col="tradeDate"], :where(.personal-ilpan, .company-ilpan) .cis-table:not([data-cols~="paidDate"]) [data-col="paidDate"], :where(.personal-ilpan, .company-ilpan) .cis-table:not([data-cols~="expiresDate"]) [data-col="expiresDate"] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pis-table th .pi-sort + .pis-help, :where(.personal-ilpan, .company-ilpan) .cis-table th .ci-sort + .cis-help { margin-left: 14px; }
:where(.personal-ilpan, .company-ilpan) .pis-help, :where(.personal-ilpan, .company-ilpan) .cis-help { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 4px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1; vertical-align: 1px; cursor: help; }
:where(.personal-ilpan, .company-ilpan) .pis-empty, :where(.personal-ilpan, .company-ilpan) .cis-empty { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 8px; width: min(100%, calc(100cqw - 40px)); min-height: 120px; position: sticky; left: 20px; }
:where(.personal-ilpan, .company-ilpan) .pis-empty-icon, :where(.personal-ilpan, .company-ilpan) .cis-empty-icon { margin-bottom: 7px; color: oklch(65% .009 106); }
:where(.personal-ilpan, .company-ilpan) .pis-empty h2, :where(.personal-ilpan, .company-ilpan) .cis-empty h2 { font-size: 15px; font-weight: 650; letter-spacing: -.025em; }
:where(.personal-ilpan, .company-ilpan) .pis-empty p, :where(.personal-ilpan, .company-ilpan) .cis-empty p { color: var(--muted); font-size: 12px; }
:where(.personal-ilpan, .company-ilpan) .pis-table td.pis-product, :where(.personal-ilpan, .company-ilpan) .cis-table td.cis-product { padding: 9px 10px; overflow: hidden; text-align: left; }
:where(.personal-ilpan, .company-ilpan) .pis-p-wrap, :where(.personal-ilpan, .company-ilpan) .cis-p-wrap { display: flex; align-items: center; gap: 14px; min-width: 0; }
:where(.personal-ilpan, .company-ilpan) .pis-p-text, :where(.personal-ilpan, .company-ilpan) .cis-p-text { flex: 1 1 auto; min-width: 0; }
:where(.personal-ilpan, .company-ilpan) .pis-table .pis-p-thumb, :where(.personal-ilpan, .company-ilpan) .cis-table .cis-p-thumb { width: 48px; height: 48px; overflow: hidden; border-color: var(--line); cursor: zoom-in; }
:where(.personal-ilpan, .company-ilpan) .pis-table .pis-p-thumb:has(img), :where(.personal-ilpan, .company-ilpan) .cis-table .cis-p-thumb:has(img) { background: #fff; }
:where(.personal-ilpan, .company-ilpan) .pis-table .pis-p-thumb svg, :where(.personal-ilpan, .company-ilpan) .cis-table .cis-p-thumb svg { width: 26px; height: 26px; }
:where(.personal-ilpan, .company-ilpan) .pis-name, :where(.personal-ilpan, .company-ilpan) .cis-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: 13px; font-weight: 600; line-height: 1.35; }
:where(.personal-ilpan, .company-ilpan) .pis-sku, :where(.personal-ilpan, .company-ilpan) .pis-order, :where(.personal-ilpan, .company-ilpan) .cis-sku, :where(.personal-ilpan, .company-ilpan) .cis-order { overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
:where(.personal-ilpan, .company-ilpan) .pis-sku, :where(.personal-ilpan, .company-ilpan) .cis-sku { margin-top: 2px; }
:where(.personal-ilpan, .company-ilpan) .pis-order, :where(.personal-ilpan, .company-ilpan) .cis-order { color: #8a8b86; font-size: 11.5px; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pis-option, :where(.personal-ilpan, .company-ilpan) .cis-option { line-height: 1.7; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pis-badge, :where(.personal-ilpan, .company-ilpan) .cis-badge { display: inline-block; padding: 4px 7px; border-radius: 4px; background: var(--il-wash); color: var(--muted); font-size: 11px; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pis-badge[data-tone="success"], :where(.personal-ilpan, .company-ilpan) .cis-badge[data-tone="success"] { background: oklch(95% .025 155); color: oklch(39% .08 155); }
:where(.personal-ilpan, .company-ilpan) .pis-badge[data-tone="error"], :where(.personal-ilpan, .company-ilpan) .cis-badge[data-tone="error"] { background: oklch(96% .025 28); color: var(--il-danger); }
:where(.personal-ilpan, .company-ilpan) .pis-badge[data-tone="progress"], :where(.personal-ilpan, .company-ilpan) .cis-badge[data-tone="progress"] { background: oklch(95% .023 263); color: oklch(43% .10 263); }
:where(.personal-ilpan, .company-ilpan) .pis-num, :where(.personal-ilpan, .company-ilpan) .cis-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pis-strong, :where(.personal-ilpan, .company-ilpan) .cis-strong { font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pis-dash, :where(.personal-ilpan, .company-ilpan) .cis-dash { color: #c9cac3; }
:where(.personal-ilpan, .company-ilpan) .pis-reason, :where(.personal-ilpan, .company-ilpan) .cis-reason { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:where(.personal-ilpan, .company-ilpan) .pis-table td.pis-quote, :where(.personal-ilpan, .company-ilpan) .cis-table td.cis-quote { padding-inline: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pis-q-main, :where(.personal-ilpan, .company-ilpan) .cis-q-main { font-size: 12.5px; font-weight: 700; }
:where(.personal-ilpan, .company-ilpan) .pis-q-sub, :where(.personal-ilpan, .company-ilpan) .cis-q-sub { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
/* 현황 시세 칸 최근 체결(가격·날짜가 있을 때만) 초록 — 모든 현황(개인·입점 일반·보관), 2026-11-05 사용자 지시 */
.common-recent-trade { color: var(--green) !important; }
:where(.personal-ilpan, .company-ilpan) .pis-q-detail, :where(.personal-ilpan, .company-ilpan) .cis-q-detail { height: 22px; margin-top: 5px; padding: 0 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); font-size: 11px !important; font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pis-q-detail:hover, :where(.personal-ilpan, .company-ilpan) .cis-q-detail:hover { border-color: var(--ink); color: var(--ink); }
:where(.personal-ilpan, .company-ilpan) .pis-rank, :where(.personal-ilpan, .company-ilpan) .cis-rank { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pis-rank.is-first, :where(.personal-ilpan, .company-ilpan) .cis-rank.is-first { color: #1f7a4d; }
:where(.personal-ilpan, .company-ilpan) .pis-rank.is-out, :where(.personal-ilpan, .company-ilpan) .cis-rank.is-out { color: var(--muted); font-weight: 500; }
:where(.personal-ilpan, .company-ilpan) .pis-photo-pop, :where(.personal-ilpan, .company-ilpan) .cis-photo-pop { position: fixed; z-index: 116; top: 0; left: 0; display: flex; flex-direction: column; gap: 6px; width: 260px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px rgba(20, 20, 20, .18); }
:where(.personal-ilpan, .company-ilpan) .pis-photo-pop[hidden], :where(.personal-ilpan, .company-ilpan) .cis-photo-pop[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pis-photo-pop img, :where(.personal-ilpan, .company-ilpan) .cis-photo-pop img { display: block; width: 244px; height: 244px; border-radius: 6px; object-fit: contain; background: #fff; }
:where(.personal-ilpan, .company-ilpan) .pis-photo-empty, :where(.personal-ilpan, .company-ilpan) .cis-photo-empty { display: flex; align-items: center; justify-content: center; width: 244px; height: 244px; border-radius: 6px; background: var(--paper); color: oklch(66% .014 106); }
:where(.personal-ilpan, .company-ilpan) .pis-photo-empty svg, :where(.personal-ilpan, .company-ilpan) .cis-photo-empty svg { width: 72px; height: 72px; }
:where(.personal-ilpan, .company-ilpan) .pis-foot, :where(.personal-ilpan, .company-ilpan) .cis-foot { flex-wrap: wrap; align-items: center; gap: 6px 16px; }
:where(.personal-ilpan, .company-ilpan) .pis-foot-line, :where(.personal-ilpan, .company-ilpan) .cis-foot-line { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
    :where(.personal-ilpan, .company-ilpan) .pis-stage-strip, :where(.personal-ilpan, .company-ilpan) .cis-stage-strip { flex-wrap: wrap; gap: 22px; row-gap: 0; padding-inline: 14px; }
    :where(.personal-ilpan, .company-ilpan) .pis-stage-strip > .pis-sync-group, :where(.personal-ilpan, .company-ilpan) .cis-stage-strip > .cis-sync-group { flex: 1 1 100%; margin-left: 0; padding: 6px 0 10px; justify-content: space-between; }
    :where(.personal-ilpan, .company-ilpan) .pis-filters, :where(.personal-ilpan, .company-ilpan) .cis-filters { padding-inline: 14px; }
    :where(.personal-ilpan, .company-ilpan) .pis-filter-left, :where(.personal-ilpan, .company-ilpan) .cis-filter-left { flex: 1 1 100%; flex-wrap: wrap; max-width: none; }
    :where(.personal-ilpan, .company-ilpan) .pis-filter-left > select, :where(.personal-ilpan, .company-ilpan) .cis-filter-left > select { flex: 1 1 100%; width: 100%; }
    :where(.personal-ilpan, .company-ilpan) .pis-search, :where(.personal-ilpan, .company-ilpan) .cis-search { max-width: none; min-width: 0; }
    :where(.personal-ilpan, .company-ilpan) .pis-manage, :where(.personal-ilpan, .company-ilpan) .cis-manage { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; margin-left: 0; }
    :where(.personal-ilpan, .company-ilpan) .pis-foot > span, :where(.personal-ilpan, .company-ilpan) .cis-foot > span { flex-basis: 100%; white-space: normal; }
}
:where(.personal-ilpan, .company-ilpan) .pis-loading, :where(.personal-ilpan, .company-ilpan) .cis-loading { display: inline-block; width: 36px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, oklch(93% .005 106) 0%, oklch(96.5% .004 106) 50%, oklch(93% .005 106) 100%); background-size: 200% 100%; animation: il-loading-glow 1.2s ease-in-out infinite; vertical-align: middle; }
@keyframes il-loading-glow { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
    :where(.personal-ilpan, .company-ilpan) .pis-loading, :where(.personal-ilpan, .company-ilpan) .cis-loading { animation: none; }
}
:where(.personal-ilpan, .company-ilpan) .pis-loading.is-wide, :where(.personal-ilpan, .company-ilpan) .cis-loading.is-wide { width: 70px; }
:where(.personal-ilpan, .company-ilpan) .pis-table td.pis-rank-cell, :where(.personal-ilpan, .company-ilpan) .cis-table td.cis-rank-cell { padding-inline: 4px; }
:where(.personal-ilpan, .company-ilpan) .pis-priority, :where(.personal-ilpan, .company-ilpan) .cis-priority { display: block; height: 22px; margin: 6px auto 0; padding: 0 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--muted); font-size: 11px !important; font-weight: 600; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pis-priority:hover:not(:disabled), :where(.personal-ilpan, .company-ilpan) .cis-priority:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
:where(.personal-ilpan, .company-ilpan) .pis-priority:disabled, :where(.personal-ilpan, .company-ilpan) .cis-priority:disabled { cursor: default; opacity: .75; }
:where(.personal-ilpan, .company-ilpan) .pis-q-wait, :where(.personal-ilpan, .company-ilpan) .cis-q-wait { margin-left: 6px; vertical-align: middle; }
:where(.personal-ilpan, .company-ilpan) .pis-table td.pis-quote.is-merged, :where(.personal-ilpan, .company-ilpan) .cis-table td.cis-quote.is-merged { padding-inline: 8px; }
:where(.personal-ilpan, .company-ilpan) .pis-q-merged, :where(.personal-ilpan, .company-ilpan) .cis-q-merged { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pis-q-merged .pis-priority, :where(.personal-ilpan, .company-ilpan) .pis-q-buttons .pis-priority, :where(.personal-ilpan, .company-ilpan) .cis-q-merged .cis-priority, :where(.personal-ilpan, .company-ilpan) .cis-q-buttons .cis-priority { display: inline-block; margin: 0; padding: 0 5px; }
:where(.personal-ilpan, .company-ilpan) .pis-q-buttons, :where(.personal-ilpan, .company-ilpan) .cis-q-buttons { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 5px; }
:where(.personal-ilpan, .company-ilpan) .pis-q-buttons .pis-q-detail, :where(.personal-ilpan, .company-ilpan) .cis-q-buttons .cis-q-detail { margin-top: 0; }
:where(.personal-ilpan, .company-ilpan) .pis-q-merged, :where(.personal-ilpan, .company-ilpan) .cis-q-merged { min-height: 35px; }
:where(.personal-ilpan, .company-ilpan) .pis-table:not([data-cols~="manage"]) [data-col="manage"], :where(.personal-ilpan, .company-ilpan) .cis-table:not([data-cols~="manage"]) [data-col="manage"] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pis-table td.pis-manage-cell, :where(.personal-ilpan, .company-ilpan) .cis-table td.cis-manage-cell { padding-inline: 6px; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pis-table td.pis-manage-cell .pi-button + .pi-button, :where(.personal-ilpan, .company-ilpan) .cis-table td.cis-manage-cell .ci-button + .ci-button { margin-left: 6px; }
:where(.personal-ilpan, .company-ilpan) .pis-bid-input, :where(.personal-ilpan, .company-ilpan) .cis-bid-input { width: 100%; min-width: 88px; max-width: 150px; height: 34px; min-height: 0 !important; padding: 0 9px !important; text-align: center; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pis-bid-input:not(:disabled), :where(.personal-ilpan, .company-ilpan) .cis-bid-input:not(:disabled) { background: var(--surface); }
:where(.personal-ilpan, .company-ilpan) .pis-bid-input.is-changed, :where(.personal-ilpan, .company-ilpan) .cis-bid-input.is-changed { border-color: var(--ink); background: #fbfbf8; font-weight: 700; }
:where(.personal-ilpan, .company-ilpan) .pis-bid-input[aria-invalid="true"], :where(.personal-ilpan, .company-ilpan) .cis-bid-input[aria-invalid="true"] { border-color: var(--il-danger); background: oklch(97% .016 28); }
:where(.personal-ilpan, .company-ilpan) .pis-instant-warn, :where(.personal-ilpan, .company-ilpan) .cis-instant-warn { margin-top: 4px; color: #b45f1e; font-size: 11px; font-weight: 600; white-space: nowrap; cursor: help; }
:where(.personal-ilpan, .company-ilpan) .pis-table tbody tr.is-selected > td, :where(.personal-ilpan, .company-ilpan) .cis-table tbody tr.is-selected > td { background: oklch(97.2% .008 106); }
:where(.personal-ilpan, .company-ilpan) .pis-table tbody tr.is-running > td, :where(.personal-ilpan, .company-ilpan) .cis-table tbody tr.is-running > td { background: oklch(96% .014 250); }
:where(.personal-ilpan, .company-ilpan) .pis-manage-summary, :where(.personal-ilpan, .company-ilpan) .cis-manage-summary { flex: 0 0 72px; width: 72px; overflow: hidden; color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; text-overflow: ellipsis; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-summary.is-off, :where(.personal-ilpan, .company-ilpan) .cis-manage-summary.is-off { visibility: hidden; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-buttons [hidden], :where(.personal-ilpan, .company-ilpan) .cis-manage-buttons [hidden] { display: none !important; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-run, :where(.personal-ilpan, .company-ilpan) .cis-manage-run { min-width: 84px; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-dialog, :where(.personal-ilpan, .company-ilpan) .cis-manage-dialog { width: min(760px, calc(100vw - 32px)); }
:where(.personal-ilpan, .company-ilpan) .pis-manage-dialog .pi-dialog-body, :where(.personal-ilpan, .company-ilpan) .cis-manage-dialog .ci-dialog-body { padding: 18px 24px; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-lead, :where(.personal-ilpan, .company-ilpan) .cis-manage-lead { margin-bottom: 12px; font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-table-wrap, :where(.personal-ilpan, .company-ilpan) .cis-manage-table-wrap { max-height: min(52vh, 460px); overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-table, :where(.personal-ilpan, .company-ilpan) .cis-manage-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-table th, :where(.personal-ilpan, .company-ilpan) .cis-manage-table th { position: sticky; top: 0; padding: 9px 10px; border-bottom: 1px solid var(--line); background: var(--il-wash); color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-table td, :where(.personal-ilpan, .company-ilpan) .cis-manage-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-table td:first-child, :where(.personal-ilpan, .company-ilpan) .cis-manage-table td:first-child { text-align: left; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-table tr:last-child td, :where(.personal-ilpan, .company-ilpan) .cis-manage-table tr:last-child td { border-bottom: 0; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-name, :where(.personal-ilpan, .company-ilpan) .cis-manage-name { font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-sub, :where(.personal-ilpan, .company-ilpan) .cis-manage-sub { margin-top: 2px; font-size: 11.5px; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-reason, :where(.personal-ilpan, .company-ilpan) .cis-manage-reason { min-width: 180px; text-align: left !important; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-warning, :where(.personal-ilpan, .company-ilpan) .cis-manage-warning { margin-top: 5px; color: #b45f1e; font-size: 12px; font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pis-manage-table tr.has-warning td, :where(.personal-ilpan, .company-ilpan) .cis-manage-table tr.has-warning td { background: #fdf6ee; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-bid h3 .pi-quote-locked, :where(.personal-ilpan, .company-ilpan) .ci-quote-bid h3 .ci-quote-locked { margin-left: 6px; font-size: 11.5px; font-weight: 500; }
@media (max-width: 760px) {
    :where(.personal-ilpan, .company-ilpan) .pis-manage-summary, :where(.personal-ilpan, .company-ilpan) .cis-manage-summary { flex: 0 0 100%; width: 100%; text-align: left; }
}
:where(.personal-ilpan, .company-ilpan) .pis-instant-wait, :where(.personal-ilpan, .company-ilpan) .cis-instant-wait { margin-top: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-warn, :where(.personal-ilpan, .company-ilpan) .ci-quote-warn { margin-top: 8px; color: #b45f1e; font-size: 12px; font-weight: 600; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-warn.is-wait, :where(.personal-ilpan, .company-ilpan) .ci-quote-warn.is-wait { color: var(--muted); font-weight: 500; }
:where(.personal-ilpan, .company-ilpan) .pi-quote-warn[hidden], :where(.personal-ilpan, .company-ilpan) .ci-quote-warn[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .cis-switch { position: relative; display: block; width: 34px; height: 20px; margin: 0 auto; padding: 0; border: 0; border-radius: 10px; background: #c9cac3; }
:where(.personal-ilpan, .company-ilpan) .cis-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
:where(.personal-ilpan, .company-ilpan) .cis-switch:disabled { opacity: .55; cursor: not-allowed; }
:where(.personal-ilpan, .company-ilpan) .pis-estimate, :where(.personal-ilpan, .company-ilpan) .cis-estimate { color: var(--muted); cursor: help; }
:where(.personal-ilpan, .company-ilpan) .pis-table td.pis-purchase-cell, :where(.personal-ilpan, .company-ilpan) .cis-table td.cis-purchase-cell { position: relative; padding-inline: 8px; }
:where(.personal-ilpan, .company-ilpan) .pis-purchase-input, :where(.personal-ilpan, .company-ilpan) .cis-purchase-input { width: 100%; max-width: 130px; height: 32px; min-height: 0 !important; padding: 0 8px !important; text-align: right; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pis-purchase-input:not(:focus):placeholder-shown, :where(.personal-ilpan, .company-ilpan) .cis-purchase-input:not(:focus):placeholder-shown { border-color: transparent; background: transparent; }
:where(.personal-ilpan, .company-ilpan) .pis-purchase-input[aria-invalid="true"], :where(.personal-ilpan, .company-ilpan) .cis-purchase-input[aria-invalid="true"] { border-color: var(--il-danger); background: oklch(97% .016 28); }
:where(.personal-ilpan, .company-ilpan) .pis-purchase-tag, :where(.personal-ilpan, .company-ilpan) .cis-purchase-tag { position: absolute; top: 6px; right: 10px; color: var(--muted); font-size: 10px; font-weight: 600; line-height: 10px; }
:where(.personal-ilpan, .company-ilpan) .pis-purchase-tag[hidden], :where(.personal-ilpan, .company-ilpan) .cis-purchase-tag[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pis-purchase-tag.is-error, :where(.personal-ilpan, .company-ilpan) .cis-purchase-tag.is-error { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--il-danger); color: #fff; }
:where(.personal-ilpan, .company-ilpan) .pis-badge[data-tone="decide"], :where(.personal-ilpan, .company-ilpan) .cis-badge[data-tone="decide"] { background: #e8edf7; color: #2c4a8a; }
:where(.personal-ilpan, .company-ilpan) .pi-done-purchase-input, :where(.personal-ilpan, .company-ilpan) .ci-done-purchase-input { width: 100%; max-width: 120px; height: 32px; min-height: 0 !important; padding: 0 8px !important; text-align: right; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pi-done-purchase-input:not(:focus):placeholder-shown, :where(.personal-ilpan, .company-ilpan) .ci-done-purchase-input:not(:focus):placeholder-shown { border-color: transparent; background: transparent; }
:where(.personal-ilpan, .company-ilpan) .pi-done-purchase-input.is-saving, :where(.personal-ilpan, .company-ilpan) .ci-done-purchase-input.is-saving { opacity: .6; }
@media (max-width: 1300px) {
    :where(.personal-ilpan, .company-ilpan) .pis-stage-strip, :where(.personal-ilpan, .company-ilpan) .cis-stage-strip { gap: 18px; }
    :where(.personal-ilpan, .company-ilpan) .pis-stage-strip > .pis-sync-group, :where(.personal-ilpan, .company-ilpan) .cis-stage-strip > .cis-sync-group { padding-left: 6px; gap: 8px; }
}
:where(.personal-ilpan, .company-ilpan) .pis-table td.pis-purchase-cell, :where(.personal-ilpan, .company-ilpan) .cis-table td.cis-purchase-cell { text-align: center; }
:where(.personal-ilpan, .company-ilpan) .pis-purchase-input, :where(.personal-ilpan, .company-ilpan) .cis-purchase-input { display: block; margin: 0 auto; text-align: center; }
@media (max-width: 1300px) {
    :where(.personal-ilpan, .company-ilpan) .pis-sync-bar, :where(.personal-ilpan, .company-ilpan) .cis-sync-bar { width: 56px; }
    :where(.personal-ilpan, .company-ilpan) .pis-sync-note, :where(.personal-ilpan, .company-ilpan) .cis-sync-note { max-width: 150px; }
    :where(.personal-ilpan, .company-ilpan) .pis-stage-strip > .pis-sync-group, :where(.personal-ilpan, .company-ilpan) .cis-stage-strip > .cis-sync-group { flex: 1 1 100%; justify-content: flex-end; margin-left: 0; padding: 0 0 10px; gap: 10px; }
    :where(.personal-ilpan, .company-ilpan) .pis-sync-bar, :where(.personal-ilpan, .company-ilpan) .cis-sync-bar { width: 120px; }
    :where(.personal-ilpan, .company-ilpan) .pis-sync-note, :where(.personal-ilpan, .company-ilpan) .cis-sync-note { max-width: 260px; }
}
:where(.personal-ilpan, .company-ilpan) .pis-expiry-tag, :where(.personal-ilpan, .company-ilpan) .cis-expiry-tag { display: block; width: max-content; margin: 4px auto 0; padding: 0 4px; border: 1px solid #d8d8d0; border-radius: 4px; color: #8f9089; font-size: 10.5px; font-weight: 600; line-height: 15px; white-space: nowrap; }
:where(.personal-ilpan, .company-ilpan) .pis-expiry-tag.is-today, :where(.personal-ilpan, .company-ilpan) .cis-expiry-tag.is-today { border-color: #e39a4f; color: #b45f1e; }
:where(.personal-ilpan, .company-ilpan) .pis-table thead th .pi-sort, :where(.personal-ilpan, .company-ilpan) .pis-table thead th .pis-help, :where(.personal-ilpan, .company-ilpan) .cis-table thead th .ci-sort, :where(.personal-ilpan, .company-ilpan) .cis-table thead th .cis-help { vertical-align: middle; }
:where(.personal-ilpan, .company-ilpan) .pis-table th .pi-sort + .pis-help, :where(.personal-ilpan, .company-ilpan) .cis-table th .ci-sort + .cis-help { margin-left: 4px; }
:where(.personal-ilpan, .company-ilpan) .pis-table th[aria-sort="ascending"] .pi-sort + .pis-help, :where(.personal-ilpan, .company-ilpan) .pis-table th[aria-sort="descending"] .pi-sort + .pis-help, :where(.personal-ilpan, .company-ilpan) .cis-table th[aria-sort="ascending"] .ci-sort + .cis-help, :where(.personal-ilpan, .company-ilpan) .cis-table th[aria-sort="descending"] .ci-sort + .cis-help { margin-left: 15px; }
:where(.personal-ilpan, .company-ilpan) .pis-table td.pis-state, :where(.personal-ilpan, .company-ilpan) .pis-table th[data-col="state"], :where(.personal-ilpan, .company-ilpan) .cis-table td.cis-state, :where(.personal-ilpan, .company-ilpan) .cis-table th[data-col="state"] { padding-inline: 6px; }
:where(.personal-ilpan, .company-ilpan) .pis-row-price.is-hot:not(:disabled), :where(.personal-ilpan, .company-ilpan) .cis-row-price.is-hot:not(:disabled) { border-color: var(--ink); background: var(--ink); color: #fff; }
:where(.personal-ilpan, .company-ilpan) .pis-bulk-help, :where(.personal-ilpan, .company-ilpan) .cis-bulk-help { margin-left: -2px; }
:where(.personal-ilpan, .company-ilpan) .pis-table:not([data-cols~="star"]) [data-col="star"], :where(.personal-ilpan, .company-ilpan) .cis-table:not([data-cols~="star"]) [data-col="star"] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pis-table .pis-star, :where(.personal-ilpan, .company-ilpan) .pis-star, :where(.personal-ilpan, .company-ilpan) .cis-table .cis-star, :where(.personal-ilpan, .company-ilpan) .cis-star { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: none; color: #c9cac3; font-size: 19px; line-height: 1; cursor: pointer; transition: transform .12s, color .12s; }
:where(.personal-ilpan, .company-ilpan) .pis-star:hover:not(:disabled), :where(.personal-ilpan, .company-ilpan) .cis-star:hover:not(:disabled) { color: #f5c000; transform: scale(1.18); background: #fdf6e3; }
:where(.personal-ilpan, .company-ilpan) .pis-star:active:not(:disabled), :where(.personal-ilpan, .company-ilpan) .cis-star:active:not(:disabled) { transform: scale(.92); }
:where(.personal-ilpan, .company-ilpan) .pis-table .pis-star.is-on, :where(.personal-ilpan, .company-ilpan) .cis-table .cis-star.is-on { color: #f5c000; }
:where(.personal-ilpan, .company-ilpan) .pis-star:disabled, :where(.personal-ilpan, .company-ilpan) .cis-star:disabled { cursor: default; opacity: .5; }
:where(.personal-ilpan, .company-ilpan) .pis-star-toggle, :where(.personal-ilpan, .company-ilpan) .cis-star-toggle { flex: none; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
:where(.personal-ilpan, .company-ilpan) .pis-star-toggle.is-on, :where(.personal-ilpan, .company-ilpan) .cis-star-toggle.is-on { border-color: #e3cf8e; background: #fdf6e3; color: #b8860b; }
:where(.personal-ilpan, .company-ilpan) .pis-star-toggle[hidden], :where(.personal-ilpan, .company-ilpan) .cis-star-toggle[hidden] { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-product-sku, :where(.personal-ilpan, .company-ilpan) .ci-product-sku { display: block; margin-top: 0; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.45; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
:where(.personal-ilpan, .company-ilpan) .pi-product-name, :where(.personal-ilpan, .company-ilpan) .ci-product-name { display: block; margin-top: 2px; overflow: hidden; color: #55575d; font-size: 12.5px; font-weight: 400; line-height: 1.45; letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis; }
:where(.personal-ilpan, .company-ilpan) .pis-sku, :where(.personal-ilpan, .company-ilpan) .cis-sku { margin-top: 0; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
:where(.personal-ilpan, .company-ilpan) .pis-name, :where(.personal-ilpan, .company-ilpan) .cis-name { display: block; margin-top: 2px; overflow: hidden; color: #55575d; font-size: 12.5px; font-weight: 400; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; line-clamp: none; }
:where(.personal-ilpan, .company-ilpan) .pis-order, :where(.personal-ilpan, .company-ilpan) .cis-order { margin-top: 1px; }
:where(.personal-ilpan, .company-ilpan) .pis-purchase-input, :where(.personal-ilpan, .company-ilpan) .pis-purchase-input:not(:focus):placeholder-shown, :where(.personal-ilpan, .company-ilpan) .cis-purchase-input, :where(.personal-ilpan, .company-ilpan) .cis-purchase-input:not(:focus):placeholder-shown { display: block; width: 100%; min-width: 88px; max-width: 150px; height: 34px; margin: 0 auto; padding: 0 9px !important; border-color: var(--line); background: var(--surface); text-align: center; }
:where(.personal-ilpan, .company-ilpan) .pis-purchase-input[aria-invalid="true"], :where(.personal-ilpan, .company-ilpan) .cis-purchase-input[aria-invalid="true"] { border-color: var(--il-danger); background: oklch(97% .016 28); }
:where(.personal-ilpan, .company-ilpan) .pis-panel, :where(.personal-ilpan, .company-ilpan) .cis-panel { min-height: min-content; }
:where(.personal-ilpan, .company-ilpan) #pis-scroll, :where(.personal-ilpan, .company-ilpan) #cis-scroll { contain: size; }
:where(.personal-ilpan, .company-ilpan) #pis-table[data-check="off"] [data-col="check"], :where(.personal-ilpan, .company-ilpan) #cis-table[data-check="off"] [data-col="check"] { padding: 0 !important; overflow: hidden; }
:where(.personal-ilpan, .company-ilpan) #pis-table[data-check="off"] [data-col="check"] > *, :where(.personal-ilpan, .company-ilpan) #cis-table[data-check="off"] [data-col="check"] > * { display: none; }
:where(.personal-ilpan, .company-ilpan) .pi-control-bar > .pi-run-summary, :where(.personal-ilpan, .company-ilpan) .ci-control-bar > .ci-run-summary { flex: 1 1 0; min-width: 0; margin: 0 0 0 auto; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
:where(.personal-ilpan, .company-ilpan) .pi-control-bar > .pi-run-summary:not([hidden]) + .pi-run-controls, :where(.personal-ilpan, .company-ilpan) .ci-control-bar > .ci-run-summary:not([hidden]) + .ci-run-controls { margin-left: 0; }
:where(.personal-ilpan, .company-ilpan) .pi-control-bar > .pi-with-help, :where(.personal-ilpan, .company-ilpan) .pi-control-bar > .pi-run-controls, :where(.personal-ilpan, .company-ilpan) .pi-control-bar .pi-add-button, :where(.personal-ilpan, .company-ilpan) .ci-control-bar > .ci-with-help, :where(.personal-ilpan, .company-ilpan) .ci-control-bar > .ci-run-controls, :where(.personal-ilpan, .company-ilpan) .ci-control-bar .ci-add-button { flex-shrink: 0; }


/* ── 발송내역 관리 공통 모양(2026-10-27, 크림개인 .personal-invoice · 크림입점 .company-invoice 두 화면이 똑같이 쓰는 규칙을 한 곳에서 — 자동으로 옮김).
   :where(.personal-invoice, .company-invoice) 안으로만 묶어 다른 페이지 영향 없음, 우선순위는 예전 페이지 규칙과 같다.
   화면에서 직접 쓰는 색 변수는 --iv-… 한 이름으로 통일, JS가 넣는 변수(--…-index-w 등)는 페이지 css에 남긴다. ── */
.personal-invoice > :not(.pim-list-panel), .company-invoice > :not(.cim-list-panel) { flex-shrink: 0; }
.personal-invoice :focus-visible, .company-invoice :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.personal-invoice button, .personal-invoice input, .personal-invoice select, .company-invoice button, .company-invoice input, .company-invoice select { font: inherit; }
.personal-invoice input, .personal-invoice select, .company-invoice input, .company-invoice select { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.personal-invoice input:focus, .personal-invoice select:focus, .company-invoice input:focus, .company-invoice select:focus { border-color: var(--ink); }
.personal-invoice input[type="checkbox"], .company-invoice input[type="checkbox"] { width: 16px; height: 16px; padding: 0; margin: 0; accent-color: var(--ink); cursor: pointer; vertical-align: middle; }
.personal-invoice button:disabled, .personal-invoice input:disabled, .personal-invoice select:disabled, .company-invoice button:disabled, .company-invoice input:disabled, .company-invoice select:disabled { opacity: .42; cursor: not-allowed; }
:where(.personal-invoice, .company-invoice) .pim-heading, :where(.personal-invoice, .company-invoice) .cim-heading { display: flex; align-items: center; gap: 8px; min-height: 22px; }
:where(.personal-invoice, .company-invoice) .pim-context, :where(.personal-invoice, .company-invoice) .cim-context { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 700; }
:where(.personal-invoice, .company-invoice) .pim-context > span, :where(.personal-invoice, .company-invoice) .cim-context > span { margin-inline: 2px; color: var(--line); }
:where(.personal-invoice, .company-invoice) .pim-context img, :where(.personal-invoice, .company-invoice) .cim-context img { border-radius: 4px; object-fit: contain; }
:where(.personal-invoice, .company-invoice) .pim-howto, :where(.personal-invoice, .company-invoice) .cim-howto { padding: 12px 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--iv-wash); color: oklch(30% .006 271); }
:where(.personal-invoice, .company-invoice) .pim-howto strong, :where(.personal-invoice, .company-invoice) .cim-howto strong { font-weight: 700; color: var(--ink); }
:where(.personal-invoice, .company-invoice) .pim-with-help, :where(.personal-invoice, .company-invoice) .cim-with-help { display: inline-flex; align-items: center; gap: 6px; }
:where(.personal-invoice, .company-invoice) .pim-help, :where(.personal-invoice, .company-invoice) .cim-help { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 10px !important; font-weight: 700; line-height: 1; cursor: help; }
:where(.personal-invoice, .company-invoice) .pim-help:hover, :where(.personal-invoice, .company-invoice) .cim-help:hover { border-color: var(--ink); color: var(--ink); }
:where(.personal-invoice, .company-invoice) .pim-tip, :where(.personal-invoice, .company-invoice) .cim-tip { position: fixed; z-index: 120; top: 0; left: 0; max-width: 300px; padding: 8px 11px; border-radius: 7px; background: var(--ink); color: oklch(96% .004 106); font-size: 12px; line-height: 1.6; white-space: pre-line; pointer-events: none; box-shadow: 0 6px 18px oklch(18% .005 271 / .18); }
:where(.personal-invoice, .company-invoice) .pim-tip[hidden], :where(.personal-invoice, .company-invoice) .cim-tip[hidden] { display: none; }
:where(.personal-invoice, .company-invoice) .pim-button, :where(.personal-invoice, .company-invoice) .cim-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-weight: 600 !important; white-space: nowrap; transition: background .16s var(--ease-out), border-color .16s var(--ease-out); }
:where(.personal-invoice, .company-invoice) .pim-button:hover:not(:disabled), :where(.personal-invoice, .company-invoice) .cim-button:hover:not(:disabled) { border-color: var(--ink); background: var(--paper); }
:where(.personal-invoice, .company-invoice) .pim-button.pim-primary, :where(.personal-invoice, .company-invoice) .cim-button.cim-primary { border-color: var(--ink); background: var(--ink); color: var(--surface); }
:where(.personal-invoice, .company-invoice) .pim-button.pim-primary:hover:not(:disabled), :where(.personal-invoice, .company-invoice) .cim-button.cim-primary:hover:not(:disabled) { background: oklch(31% .008 271); }
:where(.personal-invoice, .company-invoice) .pim-small, :where(.personal-invoice, .company-invoice) .cim-small { min-height: 30px; padding-inline: 10px; font-size: 12px !important; }
:where(.personal-invoice, .company-invoice) .pim-button.pim-danger, :where(.personal-invoice, .company-invoice) .cim-button.cim-danger { border-color: oklch(83% .045 28); color: var(--iv-danger); }
:where(.personal-invoice, .company-invoice) .pim-button.pim-danger:hover:not(:disabled), :where(.personal-invoice, .company-invoice) .cim-button.cim-danger:hover:not(:disabled) { border-color: var(--iv-danger); background: oklch(96% .022 28); }
:where(.personal-invoice, .company-invoice) .pim-button[hidden], :where(.personal-invoice, .company-invoice) .cim-button[hidden] { display: none; }
:where(.personal-invoice, .company-invoice) .pim-panel, :where(.personal-invoice, .company-invoice) .cim-panel { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
:where(.personal-invoice, .company-invoice) .pim-list-panel, :where(.personal-invoice, .company-invoice) .cim-list-panel { display: flex; flex: 1; flex-direction: column; min-height: 420px; overflow: hidden; }
:where(.personal-invoice, .company-invoice) .pim-list-panel > :not(.pim-table-scroll), :where(.personal-invoice, .company-invoice) .cim-list-panel > :not(.cim-table-scroll) { flex-shrink: 0; }
:where(.personal-invoice, .company-invoice) .pim-filter-bar, :where(.personal-invoice, .company-invoice) .cim-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
:where(.personal-invoice, .company-invoice) .pim-seg, :where(.personal-invoice, .company-invoice) .cim-seg { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; }
:where(.personal-invoice, .company-invoice) .pim-seg > button, :where(.personal-invoice, .company-invoice) .cim-seg > button { height: 34px; padding: 0 14px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
:where(.personal-invoice, .company-invoice) .pim-seg > button + button, :where(.personal-invoice, .company-invoice) .cim-seg > button + button { border-left: 1px solid var(--line); }
:where(.personal-invoice, .company-invoice) .pim-seg > button:hover, :where(.personal-invoice, .company-invoice) .cim-seg > button:hover { color: var(--ink); }
:where(.personal-invoice, .company-invoice) .pim-seg > button[aria-pressed="true"], :where(.personal-invoice, .company-invoice) .cim-seg > button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
:where(.personal-invoice, .company-invoice) .pim-search, :where(.personal-invoice, .company-invoice) .cim-search { display: flex; align-items: center; gap: 7px; width: 280px; max-width: 100%; padding-left: 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); }
:where(.personal-invoice, .company-invoice) .pim-search svg, :where(.personal-invoice, .company-invoice) .cim-search svg { flex-shrink: 0; }
.personal-invoice .pim-search input, .company-invoice .cim-search input { width: 100%; padding-left: 0; border: 0; background: transparent; }
:where(.personal-invoice, .company-invoice) .pim-sync-group, :where(.personal-invoice, .company-invoice) .cim-sync-group { display: flex; align-items: center; gap: 10px; margin-left: auto; }
:where(.personal-invoice, .company-invoice) .pim-sync, :where(.personal-invoice, .company-invoice) .cim-sync { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; font-size: 12.5px; color: var(--muted); text-align: right; }
:where(.personal-invoice, .company-invoice) .pim-sync-line, :where(.personal-invoice, .company-invoice) .cim-sync-line { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 10px; }
:where(.personal-invoice, .company-invoice) .pim-sync-text, :where(.personal-invoice, .company-invoice) .cim-sync-text { font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.personal-invoice, .company-invoice) .pim-sync.is-running .pim-sync-text, :where(.personal-invoice, .company-invoice) .cim-sync.is-running .cim-sync-text { color: var(--ink); font-weight: 600; }
:where(.personal-invoice, .company-invoice) .pim-sync-text.is-error, :where(.personal-invoice, .company-invoice) .pim-sync-note.is-error, :where(.personal-invoice, .company-invoice) .cim-sync-text.is-error, :where(.personal-invoice, .company-invoice) .cim-sync-note.is-error { color: var(--iv-up); }
:where(.personal-invoice, .company-invoice) .pim-sync-note, :where(.personal-invoice, .company-invoice) .cim-sync-note { width: max-content; max-width: 340px; font-size: 11.5px; line-height: 1.4; }
:where(.personal-invoice, .company-invoice) .pim-sync-note[hidden], :where(.personal-invoice, .company-invoice) .pim-sync-bar[hidden], :where(.personal-invoice, .company-invoice) .pim-sync-btn[hidden], :where(.personal-invoice, .company-invoice) .cim-sync-note[hidden], :where(.personal-invoice, .company-invoice) .cim-sync-bar[hidden], :where(.personal-invoice, .company-invoice) .cim-sync-btn[hidden] { display: none; }
:where(.personal-invoice, .company-invoice) .pim-sync-bar, :where(.personal-invoice, .company-invoice) .cim-sync-bar { position: relative; flex: none; width: 120px; height: 6px; border-radius: 3px; background: var(--iv-wash); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
:where(.personal-invoice, .company-invoice) .pim-sync-fill, :where(.personal-invoice, .company-invoice) .cim-sync-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: var(--ink); }
:where(.personal-invoice, .company-invoice) .pim-sync-btn, :where(.personal-invoice, .company-invoice) .cim-sync-btn { flex: none; min-width: 148px; }
:where(.personal-invoice, .company-invoice) .pim-sel-bar, :where(.personal-invoice, .company-invoice) .cim-sel-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 18px; border-bottom: 1px solid var(--line); background: var(--iv-head); color: var(--muted); font-size: 12.5px; }
:where(.personal-invoice, .company-invoice) .pim-sel-bar strong, :where(.personal-invoice, .company-invoice) .cim-sel-bar strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
:where(.personal-invoice, .company-invoice) .pim-run-controls, :where(.personal-invoice, .company-invoice) .cim-run-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; margin-left: auto; }
:where(.personal-invoice, .company-invoice) .pim-sel-count, :where(.personal-invoice, .company-invoice) .cim-sel-count { white-space: nowrap; }
:where(.personal-invoice, .company-invoice) .pim-bulk-group, :where(.personal-invoice, .company-invoice) .pim-send-group, :where(.personal-invoice, .company-invoice) .cim-bulk-group, :where(.personal-invoice, .company-invoice) .cim-send-group { display: flex; align-items: center; gap: 8px; }
:where(.personal-invoice, .company-invoice) .pim-sep, :where(.personal-invoice, .company-invoice) .cim-sep { flex: none; width: 1px; height: 18px; background: var(--line); }
:where(.personal-invoice, .company-invoice) .pim-sel-bar select, :where(.personal-invoice, .company-invoice) .pim-sel-bar input, :where(.personal-invoice, .company-invoice) .cim-sel-bar select, :where(.personal-invoice, .company-invoice) .cim-sel-bar input { height: 30px; font-size: 12.5px; }
:where(.personal-invoice, .company-invoice) .pim-bulk-field, :where(.personal-invoice, .company-invoice) .cim-bulk-field { position: relative; display: inline-flex; }
:where(.personal-invoice, .company-invoice) .pim-bulk-note, :where(.personal-invoice, .company-invoice) .cim-bulk-note { position: absolute; z-index: 3; top: calc(100% + 3px); left: 0; padding: 2px 6px; border-radius: 4px; background: var(--surface); box-shadow: 0 2px 8px oklch(18% .005 271 / .12); color: var(--iv-danger); font-size: 11px; line-height: 1.35; white-space: nowrap; }
:where(.personal-invoice, .company-invoice) .pim-bulk-note:empty, :where(.personal-invoice, .company-invoice) .cim-bulk-note:empty { display: none; }
:where(.personal-invoice, .company-invoice) .pim-run-button, :where(.personal-invoice, .company-invoice) .cim-run-button { min-width: 132px; }
:where(.personal-invoice, .company-invoice) .pim-run-summary, :where(.personal-invoice, .company-invoice) .cim-run-summary { margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--iv-wash); color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
:where(.personal-invoice, .company-invoice) .pim-run-summary[hidden], :where(.personal-invoice, .company-invoice) .cim-run-summary[hidden] { display: none; }
:where(.personal-invoice, .company-invoice) .pim-scroll-hint, :where(.personal-invoice, .company-invoice) .cim-scroll-hint { display: none; }
:where(.personal-invoice, .company-invoice) .pim-table-scroll, :where(.personal-invoice, .company-invoice) .cim-table-scroll { flex: 1; height: 0; min-height: 160px; max-width: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) var(--surface); container-type: inline-size; }
:where(.personal-invoice, .company-invoice) .pim-table, :where(.personal-invoice, .company-invoice) .cim-table { width: 100%; min-width: 1080px; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: center; }
:where(.personal-invoice, .company-invoice) .pim-table thead, :where(.personal-invoice, .company-invoice) .cim-table thead { position: sticky; top: 0; z-index: 2; }
:where(.personal-invoice, .company-invoice) .pim-table th, :where(.personal-invoice, .company-invoice) .cim-table th { height: 43px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--iv-head); color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; text-align: center; }
:where(.personal-invoice, .company-invoice) .pim-table td, :where(.personal-invoice, .company-invoice) .cim-table td { height: 60px; padding: 9px 10px; border-bottom: 1px solid oklch(92% .007 106); vertical-align: middle; }
:where(.personal-invoice, .company-invoice) .pim-table tbody tr:last-child td, :where(.personal-invoice, .company-invoice) .cim-table tbody tr:last-child td { border-bottom: 0; }
:where(.personal-invoice, .company-invoice) .pim-table tbody tr:not(.pim-empty-row):hover, :where(.personal-invoice, .company-invoice) .cim-table tbody tr:not(.cim-empty-row):hover { background: oklch(98% .006 106); }
:where(.personal-invoice, .company-invoice) .pim-table tbody tr.is-selected, :where(.personal-invoice, .company-invoice) .cim-table tbody tr.is-selected { background: oklch(97.2% .008 106); }
:where(.personal-invoice, .company-invoice) .pim-table tbody tr.pim-vpad td, :where(.personal-invoice, .company-invoice) .cim-table tbody tr.cim-vpad td { height: 0; padding: 0; border: 0; }
:where(.personal-invoice, .company-invoice) .pim-table tbody tr.pim-vpad:hover, :where(.personal-invoice, .company-invoice) .cim-table tbody tr.cim-vpad:hover { background: transparent; }
:where(.personal-invoice, .company-invoice) .pim-table tbody tr.is-locked, :where(.personal-invoice, .company-invoice) .pim-table tbody tr.is-locked:hover, :where(.personal-invoice, .company-invoice) .cim-table tbody tr.is-locked, :where(.personal-invoice, .company-invoice) .cim-table tbody tr.is-locked:hover { background: oklch(97.6% .003 106); }
:where(.personal-invoice, .company-invoice) .pim-table tbody tr.is-locked .pim-p-name, :where(.personal-invoice, .company-invoice) .pim-table tbody tr.is-locked .pim-p-sku, :where(.personal-invoice, .company-invoice) .pim-table tbody tr.is-locked .pim-order-link, :where(.personal-invoice, .company-invoice) .cim-table tbody tr.is-locked .cim-p-name, :where(.personal-invoice, .company-invoice) .cim-table tbody tr.is-locked .cim-p-sku, :where(.personal-invoice, .company-invoice) .cim-table tbody tr.is-locked .cim-order-link { color: var(--muted); }
.personal-invoice input[type="checkbox"]:disabled, .company-invoice input[type="checkbox"]:disabled { cursor: not-allowed; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-check-column, :where(.personal-invoice, .company-invoice) .cim-table .cim-check-column { width: 46px; padding-left: 18px; padding-right: 6px; }
:where(.personal-invoice, .company-invoice) .pim-table tbody td.pim-check-column, :where(.personal-invoice, .company-invoice) .cim-table tbody td.cim-check-column { user-select: none; -webkit-user-select: none; }
:where(.personal-invoice, .company-invoice) .pim-table tbody .pim-row-check:disabled, :where(.personal-invoice, .company-invoice) .cim-table tbody .cim-row-check:disabled { pointer-events: none; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-product-column, :where(.personal-invoice, .company-invoice) .cim-table .cim-product-column { min-width: 224px; text-align: center; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-product-cell, :where(.personal-invoice, .company-invoice) .cim-table .cim-product-cell { min-width: 224px; text-align: left; }
:where(.personal-invoice, .company-invoice) .pim-sort, :where(.personal-invoice, .company-invoice) .cim-sort { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; color: inherit; font-weight: inherit; white-space: nowrap; cursor: pointer; }
:where(.personal-invoice, .company-invoice) .pim-sort:hover, :where(.personal-invoice, .company-invoice) .cim-sort:hover { color: var(--ink); }
:where(.personal-invoice, .company-invoice) .pim-sort-arrow, :where(.personal-invoice, .company-invoice) .cim-sort-arrow { position: absolute; left: 100%; margin-left: 3px; font-size: 10px; font-weight: 700; }
:where(.personal-invoice, .company-invoice) .pim-sort-arrow.is-asc, :where(.personal-invoice, .company-invoice) .cim-sort-arrow.is-asc { color: var(--iv-up); }
:where(.personal-invoice, .company-invoice) .pim-sort-arrow.is-desc, :where(.personal-invoice, .company-invoice) .cim-sort-arrow.is-desc { color: var(--iv-down); }
:where(.personal-invoice, .company-invoice) .pim-order, :where(.personal-invoice, .company-invoice) .pim-option, :where(.personal-invoice, .company-invoice) .cim-order, :where(.personal-invoice, .company-invoice) .cim-option { white-space: nowrap; }
:where(.personal-invoice, .company-invoice) .pim-p-wrap, :where(.personal-invoice, .company-invoice) .cim-p-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
:where(.personal-invoice, .company-invoice) .pim-p-text, :where(.personal-invoice, .company-invoice) .cim-p-text { flex: 1 1 auto; min-width: 0; max-width: 220px; }
:where(.personal-invoice, .company-invoice) .pim-thumb, :where(.personal-invoice, .company-invoice) .cim-thumb { flex: none; width: 36px; height: 36px; border-radius: 6px; background: #ececde; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; color: #a6a79c; overflow: hidden; vertical-align: middle; cursor: zoom-in; }
:where(.personal-invoice, .company-invoice) .pim-thumb img, :where(.personal-invoice, .company-invoice) .cim-thumb img { width: 100%; height: 100%; object-fit: contain; }
:where(.personal-invoice, .company-invoice) .pim-thumb:has(img), :where(.personal-invoice, .company-invoice) .cim-thumb:has(img) { background: #fff; border: 1px solid var(--line); }
:where(.personal-invoice, .company-invoice) .pim-thumb:focus-visible, :where(.personal-invoice, .company-invoice) .cim-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
:where(.personal-invoice, .company-invoice) .pim-photo-pop, :where(.personal-invoice, .company-invoice) .cim-photo-pop { position: fixed; z-index: 116; top: 0; left: 0; display: flex; flex-direction: column; gap: 6px; width: 260px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px rgba(20, 20, 20, .18); }
:where(.personal-invoice, .company-invoice) .pim-photo-pop[hidden], :where(.personal-invoice, .company-invoice) .cim-photo-pop[hidden] { display: none; }
:where(.personal-invoice, .company-invoice) .pim-photo-pop img, :where(.personal-invoice, .company-invoice) .cim-photo-pop img { display: block; width: 244px; height: 244px; border-radius: 6px; object-fit: contain; background: #fff; }
:where(.personal-invoice, .company-invoice) .pim-photo-empty, :where(.personal-invoice, .company-invoice) .cim-photo-empty { display: flex; align-items: center; justify-content: center; width: 244px; height: 244px; border-radius: 6px; background: #ececde; color: #a6a79c; }
:where(.personal-invoice, .company-invoice) .pim-p-sku, :where(.personal-invoice, .company-invoice) .cim-p-sku { display: flex; align-items: center; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
:where(.personal-invoice, .company-invoice) .pim-p-code, :where(.personal-invoice, .company-invoice) .cim-p-code { min-width: 0; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
:where(.personal-invoice, .company-invoice) .pim-p-code:hover, :where(.personal-invoice, .company-invoice) .pim-p-code:focus-visible, :where(.personal-invoice, .company-invoice) .cim-p-code:hover, :where(.personal-invoice, .company-invoice) .cim-p-code:focus-visible { text-decoration: underline dotted; text-underline-offset: 3px; }
:where(.personal-invoice, .company-invoice) .pim-copy-note, :where(.personal-invoice, .company-invoice) .cim-copy-note { flex: none; margin-left: 6px; font-size: 11px; font-weight: 600; }
:where(.personal-invoice, .company-invoice) .pim-copy-note:empty, :where(.personal-invoice, .company-invoice) .cim-copy-note:empty { display: none; }
:where(.personal-invoice, .company-invoice) .pim-copy-note[data-tone="ok"], :where(.personal-invoice, .company-invoice) .cim-copy-note[data-tone="ok"] { color: oklch(46% .1 155); }
:where(.personal-invoice, .company-invoice) .pim-copy-note[data-tone="error"], :where(.personal-invoice, .company-invoice) .cim-copy-note[data-tone="error"] { color: var(--iv-danger); }
:where(.personal-invoice, .company-invoice) .pim-p-name, :where(.personal-invoice, .company-invoice) .cim-p-name { margin-top: 2px; font-size: 12.5px; font-weight: 400; color: #55575d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.personal-invoice, .company-invoice) .pim-type-chip, :where(.personal-invoice, .company-invoice) .pim-status-chip, :where(.personal-invoice, .company-invoice) .cim-type-chip, :where(.personal-invoice, .company-invoice) .cim-status-chip { display: inline-block; padding: 2px 8px; border: 1px solid transparent; border-radius: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; }
:where(.personal-invoice, .company-invoice) .pim-type-chip[data-type="normal"], :where(.personal-invoice, .company-invoice) .cim-type-chip[data-type="normal"] { border-color: oklch(87% .006 106); color: var(--muted); background: var(--surface); }
:where(.personal-invoice, .company-invoice) .pim-type-chip[data-type="storage"], :where(.personal-invoice, .company-invoice) .cim-type-chip[data-type="storage"] { border-color: oklch(87% .04 155); color: oklch(39% .08 155); background: oklch(95% .025 155); }
:where(.personal-invoice, .company-invoice) .pim-status-chip[data-status="shipment_required"], :where(.personal-invoice, .company-invoice) .cim-status-chip[data-status="shipment_required"] { background: oklch(96.5% .035 90); color: oklch(52% .1 85); }
:where(.personal-invoice, .company-invoice) .pim-status-chip[data-status="shipped"], :where(.personal-invoice, .company-invoice) .cim-status-chip[data-status="shipped"] { background: oklch(95% .025 155); color: oklch(39% .08 155); }
:where(.personal-invoice, .company-invoice) .pim-status-chip[data-status="shipped_invalid_tracking"], :where(.personal-invoice, .company-invoice) .cim-status-chip[data-status="shipped_invalid_tracking"] { background: oklch(96% .026 28); color: var(--iv-danger); }
:where(.personal-invoice, .company-invoice) .pim-table .pim-courier-select, :where(.personal-invoice, .company-invoice) .cim-table .cim-courier-select { min-width: 128px; height: 34px; font-size: 12.5px; }
:where(.personal-invoice, .company-invoice) .pim-invoice-input, :where(.personal-invoice, .company-invoice) .cim-invoice-input { width: 180px; text-align: center; font-variant-numeric: tabular-nums; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-invoice-input, :where(.personal-invoice, .company-invoice) .cim-table .cim-invoice-input { height: 34px; background: transparent; }
.personal-invoice .pim-invoice-input.is-changed, .company-invoice .cim-invoice-input.is-changed { border-color: var(--ink); font-weight: 700; }
.personal-invoice .pim-invoice-input[aria-invalid="true"], .personal-invoice .pim-courier-select[aria-invalid="true"], .company-invoice .cim-invoice-input[aria-invalid="true"], .company-invoice .cim-courier-select[aria-invalid="true"] { border-color: var(--iv-danger); color: var(--iv-danger); }
:where(.personal-invoice, .company-invoice) .pim-invoice-note, :where(.personal-invoice, .company-invoice) .cim-invoice-note { display: block; max-width: 180px; margin: 3px auto 0; font-size: 11px; line-height: 1.35; }
/* '미전송' 등 송장번호 밑 글자(2026-11-05 사용자 결정·정정): 줄 높이는 늘 같게 — 한 줄로만(긴 이유는 말줄임, 전체는 마우스 올림), 상품 칸(70px)보다 낮아 줄 높이를 바꾸지 않음.
   글자가 없으면 자리를 비우지 않아 입력칸이 줄 세로 가운데, 생기면 입력칸+글자 묶음이 가운데 */
:where(.personal-invoice, .company-invoice) :is(.pim-invoice-cell, .cim-invoice-cell) { position: relative; }
:where(.personal-invoice, .company-invoice) .pim-invoice-note, :where(.personal-invoice, .company-invoice) .cim-invoice-note { position: absolute; top: calc(50% + 11px); left: 0; right: 0; margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.personal-invoice, .company-invoice) .pim-invoice-note:empty, :where(.personal-invoice, .company-invoice) .cim-invoice-note:empty { display: none; }
/* 글자가 있으면 입력칸을 묶음 높이의 반만큼 올려 입력칸+글자 묶음이 줄 가운데(줄 높이는 그대로 — 글자는 떠서 그림) */
:where(.personal-invoice, .company-invoice) :is(.pim-invoice-cell, .cim-invoice-cell):has(> :is(.pim-invoice-note, .cim-invoice-note):not(:empty)) > input { transform: translateY(-9px); }
:where(.personal-invoice, .company-invoice) .pim-invoice-note[data-tone="error"], :where(.personal-invoice, .company-invoice) .cim-invoice-note[data-tone="error"] { color: var(--iv-danger); }
:where(.personal-invoice, .company-invoice) .pim-invoice-note[data-tone="unsent"], :where(.personal-invoice, .company-invoice) .cim-invoice-note[data-tone="unsent"] { color: var(--iv-danger); font-weight: 600; }   /* 미전송 = 빨강(2026-11-05 사용자 결정, 위험 글자색) */
:where(.personal-invoice, .company-invoice) .pim-invoice-note[data-tone="locked"], :where(.personal-invoice, .company-invoice) .cim-invoice-note[data-tone="locked"] { color: var(--muted); font-weight: 600; }
:where(.personal-invoice, .company-invoice) .pim-deadline, :where(.personal-invoice, .company-invoice) .cim-deadline { display: inline-block; white-space: nowrap; }
:where(.personal-invoice, .company-invoice) .pim-deadline-left, :where(.personal-invoice, .company-invoice) .cim-deadline-left { display: block; color: var(--muted); font-size: 11px; }
:where(.personal-invoice, .company-invoice) .pim-deadline-left:empty, :where(.personal-invoice, .company-invoice) .cim-deadline-left:empty { display: none; }
:where(.personal-invoice, .company-invoice) .pim-deadline.is-urgent, :where(.personal-invoice, .company-invoice) .pim-deadline.is-urgent .pim-deadline-left, :where(.personal-invoice, .company-invoice) .cim-deadline.is-urgent, :where(.personal-invoice, .company-invoice) .cim-deadline.is-urgent .cim-deadline-left { color: var(--iv-up); }
:where(.personal-invoice, .company-invoice) .pim-deadline.is-urgent .pim-deadline-time, :where(.personal-invoice, .company-invoice) .cim-deadline.is-urgent .cim-deadline-time { font-weight: 700; }
:where(.personal-invoice, .company-invoice) .pim-deadline.is-past, :where(.personal-invoice, .company-invoice) .cim-deadline.is-past { color: var(--muted); }
:where(.personal-invoice, .company-invoice) .pim-empty, :where(.personal-invoice, .company-invoice) .cim-empty { height: auto !important; padding: 40px 20px !important; color: var(--muted); text-align: center !important; }
:where(.personal-invoice, .company-invoice) .pim-empty > div, :where(.personal-invoice, .company-invoice) .cim-empty > div { width: calc(100cqw - 40px); position: sticky; left: 20px; }
:where(.personal-invoice, .company-invoice) .pim-empty strong, :where(.personal-invoice, .company-invoice) .cim-empty strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 14px; font-weight: 600; }
:where(.personal-invoice, .company-invoice) .pim-empty p, :where(.personal-invoice, .company-invoice) .cim-empty p { font-size: 12px; }
:where(.personal-invoice, .company-invoice) .pim-list-foot, :where(.personal-invoice, .company-invoice) .cim-list-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 11px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
:where(.personal-invoice, .company-invoice) .pim-load-line, :where(.personal-invoice, .company-invoice) .cim-load-line { position: relative; z-index: 9; flex: none; height: 0; pointer-events: none; }
:where(.personal-invoice, .company-invoice) .pim-load-line[hidden], :where(.personal-invoice, .company-invoice) .cim-load-line[hidden] { display: none; }
:where(.personal-invoice, .company-invoice) .pim-load-line::before, :where(.personal-invoice, .company-invoice) .cim-load-line::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: #f0f0ea; }
:where(.personal-invoice, .company-invoice) .pim-load-line::after, :where(.personal-invoice, .company-invoice) .cim-load-line::after { content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 3px; border-radius: 0 2px 2px 0; background: var(--muted); animation: iv-load-run 1.5s ease-in-out infinite; }
:where(.personal-invoice, .company-invoice) .pim-table tbody tr.pim-skel-row, :where(.personal-invoice, .company-invoice) .cim-table tbody tr.cim-skel-row { height: 60px; }
:where(.personal-invoice, .company-invoice) .pim-table tbody tr.pim-skel-row:hover, :where(.personal-invoice, .company-invoice) .cim-table tbody tr.cim-skel-row:hover { background: var(--surface); }
:where(.personal-invoice, .company-invoice) .pim-table td.pim-skel-td, :where(.personal-invoice, .company-invoice) .cim-table td.cim-skel-td { padding: 10px 12px; }
:where(.personal-invoice, .company-invoice) .pim-skel, :where(.personal-invoice, .company-invoice) .cim-skel { display: block; width: 70%; max-width: 100%; height: 10px; margin: 0 auto; border-radius: 5px; background: linear-gradient(90deg, var(--iv-row-line) 0%, var(--iv-row-line) 38%, var(--surface) 50%, var(--iv-row-line) 62%, var(--iv-row-line) 100%); background-size: 300% 100%; animation: iv-skel-glow 1.6s ease-in-out infinite; }
:where(.personal-invoice, .company-invoice) .pim-skel.is-box, :where(.personal-invoice, .company-invoice) .cim-skel.is-box { width: 14px; height: 14px; border-radius: 3px; }
:where(.personal-invoice, .company-invoice) .pim-skel.is-short, :where(.personal-invoice, .company-invoice) .cim-skel.is-short { width: 22px; }
@keyframes iv-load-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@keyframes iv-skel-glow { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
:where(.personal-invoice, .company-invoice) .pim-notice, :where(.personal-invoice, .company-invoice) .cim-notice { position: fixed; z-index: 70; bottom: 24px; left: calc(50% + 116px); transform: translateX(-50%); display: flex; align-items: center; gap: 20px; width: max-content; max-width: min(560px, calc(100vw - 40px)); padding: 13px 16px; border: 1px solid oklch(35% .008 271); border-radius: 7px; background: var(--ink); color: var(--surface); box-shadow: 0 5px 18px oklch(18% .005 271 / .15); }
:where(.personal-invoice, .company-invoice) .pim-notice[hidden], :where(.personal-invoice, .company-invoice) .cim-notice[hidden] { display: none; }
:where(.personal-invoice, .company-invoice) .pim-notice button, :where(.personal-invoice, .company-invoice) .cim-notice button { align-self: flex-start; padding: 0 3px; background: transparent; color: inherit; font-size: 20px; line-height: 1; }
@media (max-width: 1150px) {
    :where(.personal-invoice, .company-invoice) .pim-sync-group, :where(.personal-invoice, .company-invoice) .cim-sync-group { margin-left: 0; }
    :where(.personal-invoice, .company-invoice) .pim-sync, :where(.personal-invoice, .company-invoice) .cim-sync { align-items: flex-start; text-align: left; }
    :where(.personal-invoice, .company-invoice) .pim-sync-line, :where(.personal-invoice, .company-invoice) .cim-sync-line { justify-content: flex-start; }
}
@media (max-width: 800px) {
    .workspace-content.personal-invoice, .workspace-content.company-invoice { padding: 20px 16px 36px; }
    :where(.personal-invoice, .company-invoice) .pim-scroll-hint, :where(.personal-invoice, .company-invoice) .cim-scroll-hint { display: block; padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
    :where(.personal-invoice, .company-invoice) .pim-notice, :where(.personal-invoice, .company-invoice) .cim-notice { left: 50%; }
    :where(.personal-invoice, .company-invoice) .pim-filter-bar, :where(.personal-invoice, .company-invoice) .pim-sel-bar, :where(.personal-invoice, .company-invoice) .cim-filter-bar, :where(.personal-invoice, .company-invoice) .cim-sel-bar { padding-inline: 14px; }
    :where(.personal-invoice, .company-invoice) .pim-search, :where(.personal-invoice, .company-invoice) .cim-search { flex: 1 1 240px; width: auto; }
    :where(.personal-invoice, .company-invoice) .pim-list-foot > span, :where(.personal-invoice, .company-invoice) .cim-list-foot > span { flex-basis: 100%; }
}
@media (max-width: 520px) {
    :where(.personal-invoice, .company-invoice) .pim-seg, :where(.personal-invoice, .company-invoice) .cim-seg { width: 100%; }
    :where(.personal-invoice, .company-invoice) .pim-seg > button, :where(.personal-invoice, .company-invoice) .cim-seg > button { flex: 1; padding-inline: 8px; }
    :where(.personal-invoice, .company-invoice) .pim-run-controls, :where(.personal-invoice, .company-invoice) .cim-run-controls { justify-content: flex-start; margin-left: 0; }
    :where(.personal-invoice, .company-invoice) .pim-bulk-group, :where(.personal-invoice, .company-invoice) .cim-bulk-group { flex-wrap: wrap; }
    :where(.personal-invoice, .company-invoice) .pim-bulk-field, :where(.personal-invoice, .company-invoice) .cim-bulk-field { flex-direction: column; }
    :where(.personal-invoice, .company-invoice) .pim-bulk-note, :where(.personal-invoice, .company-invoice) .cim-bulk-note { position: static; padding: 3px 0 0; background: transparent; box-shadow: none; white-space: normal; }
    :where(.personal-invoice, .company-invoice) .pim-sep, :where(.personal-invoice, .company-invoice) .cim-sep { display: none; }
    :where(.personal-invoice, .company-invoice) .pim-sync-group, :where(.personal-invoice, .company-invoice) .cim-sync-group { flex-wrap: wrap; width: 100%; }
    :where(.personal-invoice, .company-invoice) .pim-sync, :where(.personal-invoice, .company-invoice) .cim-sync { flex: 1 1 100%; }
    :where(.personal-invoice, .company-invoice) .pim-sync-text, :where(.personal-invoice, .company-invoice) .cim-sync-text { white-space: normal; }
    :where(.personal-invoice, .company-invoice) .pim-sync-bar, :where(.personal-invoice, .company-invoice) .cim-sync-bar { width: 96px; }
    :where(.personal-invoice, .company-invoice) .pim-sync-note, :where(.personal-invoice, .company-invoice) .cim-sync-note { width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    :where(.personal-invoice, .company-invoice) .pim-button, :where(.personal-invoice, .company-invoice) .cim-button { transition: none; }
    :where(.personal-invoice, .company-invoice) .pim-load-line::after, :where(.personal-invoice, .company-invoice) .cim-load-line::after { width: 100%; transform: none; border-radius: 0; animation: none; }
    :where(.personal-invoice, .company-invoice) .pim-skel, :where(.personal-invoice, .company-invoice) .cim-skel { background: var(--iv-row-line); animation: none; }
}
:where(.personal-invoice, .company-invoice) .pim-table .pim-col-check, :where(.personal-invoice, .company-invoice) .cim-table .cim-col-check { width: 46px; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-col-order, :where(.personal-invoice, .company-invoice) .cim-table .cim-col-order { width: 140px; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-col-product, :where(.personal-invoice, .company-invoice) .cim-table .cim-col-product { width: auto; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-col-type, :where(.personal-invoice, .company-invoice) .cim-table .cim-col-type { width: 84px; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-col-status, :where(.personal-invoice, .company-invoice) .cim-table .cim-col-status { width: 120px; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-col-option, :where(.personal-invoice, .company-invoice) .cim-table .cim-col-option { width: 96px; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-col-courier, :where(.personal-invoice, .company-invoice) .cim-table .cim-col-courier { width: 160px; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-col-invoice, :where(.personal-invoice, .company-invoice) .cim-table .cim-col-invoice { width: 210px; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-col-deadline, :where(.personal-invoice, .company-invoice) .cim-table .cim-col-deadline { width: 130px; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-col-traded, :where(.personal-invoice, .company-invoice) .cim-table .cim-col-traded { width: 140px; }
:where(.personal-invoice, .company-invoice) :is(.pim-traded, .cim-traded) { white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-product-column, :where(.personal-invoice, .company-invoice) .pim-table .pim-product-cell, :where(.personal-invoice, .company-invoice) .cim-table .cim-product-column, :where(.personal-invoice, .company-invoice) .cim-table .cim-product-cell { min-width: 0; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-order, :where(.personal-invoice, .company-invoice) .pim-table .pim-option, :where(.personal-invoice, .company-invoice) .cim-table .cim-order, :where(.personal-invoice, .company-invoice) .cim-table .cim-option { overflow: hidden; text-overflow: ellipsis; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-courier-select, :where(.personal-invoice, .company-invoice) .cim-table .cim-courier-select { width: 100%; min-width: 0; max-width: 140px; }
:where(.personal-invoice, .company-invoice) .pim-p-text, :where(.personal-invoice, .company-invoice) .cim-p-text { max-width: none; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-col-product, :where(.personal-invoice, .company-invoice) .cim-table .cim-col-product { width: 280px; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-col-check, :where(.personal-invoice, .company-invoice) .cim-table .cim-col-check { width: 40px; }
:where(.personal-invoice, .company-invoice) .pim-table .pim-check-column, :where(.personal-invoice, .company-invoice) .cim-table .cim-check-column { width: 40px; padding-left: 12px; padding-right: 12px; text-align: center; }


/* ── 판매내역 조회 공통 모양(2026-10-27, 크림개인 .personal-sales-history · 크림입점 .company-sales-history 두 화면이 똑같이 쓰는 규칙을 한 곳에서 — 자동으로 옮김).
   :where(.personal-sales-history, .company-sales-history) 안으로만 묶어 다른 페이지 영향 없음, 우선순위는 예전 페이지 규칙과 같다.
   화면에서 직접 쓰는 색 변수는 --sh-… 한 이름으로 통일, JS가 넣는 변수(--…-index-w 등)는 페이지 css에 남긴다. ── */
.personal-sales-history button, .personal-sales-history input, .personal-sales-history select, .company-sales-history button, .company-sales-history input, .company-sales-history select { font: inherit; }
.personal-sales-history :focus-visible, .company-sales-history :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.personal-sales-history button:disabled, .company-sales-history button:disabled { opacity: .45; cursor: not-allowed; }
.workspace-content.personal-sales-history, .workspace-content.company-sales-history { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
.personal-sales-history > .psh-heading, .personal-sales-history > .psh-sum-row, .company-sales-history > .csh-heading, .company-sales-history > .csh-sum-row { flex: none; }
:where(.personal-sales-history, .company-sales-history) .psh-heading, :where(.personal-sales-history, .company-sales-history) .csh-heading { display: flex; align-items: center; gap: 10px; }
:where(.personal-sales-history, .company-sales-history) .psh-context, :where(.personal-sales-history, .company-sales-history) .csh-context { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-context > span, :where(.personal-sales-history, .company-sales-history) .csh-context > span { color: var(--line); margin-inline: 2px; }
:where(.personal-sales-history, .company-sales-history) .psh-context img, :where(.personal-sales-history, .company-sales-history) .csh-context img { border-radius: 4px; }
:where(.personal-sales-history, .company-sales-history) .psh-help, :where(.personal-sales-history, .company-sales-history) .csh-help { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: default; flex: none; }
:where(.personal-sales-history, .company-sales-history) .psh-help:hover, :where(.personal-sales-history, .company-sales-history) .psh-help:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-help:hover, :where(.personal-sales-history, .company-sales-history) .csh-help:focus-visible { color: var(--ink); border-color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-tip, :where(.personal-sales-history, .company-sales-history) .csh-tip { display: none; position: absolute; top: 27px; left: -10px; z-index: 90; width: 290px; background: var(--ink); color: #f0f0ec; font-size: 12px; font-weight: 400; line-height: 1.7; border-radius: 8px; padding: 10px 13px; text-align: left; }
:where(.personal-sales-history, .company-sales-history) .psh-tip b, :where(.personal-sales-history, .company-sales-history) .csh-tip b { color: #fff; }
:where(.personal-sales-history, .company-sales-history) .psh-help:hover .psh-tip, :where(.personal-sales-history, .company-sales-history) .psh-help:focus .psh-tip, :where(.personal-sales-history, .company-sales-history) .csh-help:hover .csh-tip, :where(.personal-sales-history, .company-sales-history) .csh-help:focus .csh-tip { display: block; }
:where(.personal-sales-history, .company-sales-history) .psh-help-s, :where(.personal-sales-history, .company-sales-history) .csh-help-s { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font-size: 10.5px; font-weight: 700; cursor: default; flex: none; margin-left: 5px; vertical-align: middle; }
:where(.personal-sales-history, .company-sales-history) .psh-help-s:hover, :where(.personal-sales-history, .company-sales-history) .psh-help-s:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-help-s:hover, :where(.personal-sales-history, .company-sales-history) .csh-help-s:focus-visible { color: var(--ink); border-color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-help-s:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-help-s:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
:where(.personal-sales-history, .company-sales-history) .psh-cell, :where(.personal-sales-history, .company-sales-history) .csh-cell { display: flex; flex-direction: column; height: 104px; min-width: 0; padding: 10px 14px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; position: relative; container-type: inline-size; }
:where(.personal-sales-history, .company-sales-history) a.psh-cell:hover, :where(.personal-sales-history, .company-sales-history) a.csh-cell:hover { border-color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-cell:hover, :where(.personal-sales-history, .company-sales-history) .psh-cell:focus-within, :where(.personal-sales-history, .company-sales-history) .csh-cell:hover, :where(.personal-sales-history, .company-sales-history) .csh-cell:focus-within { z-index: 3; }
:where(.personal-sales-history, .company-sales-history) .psh-label, :where(.personal-sales-history, .company-sales-history) .csh-label { display: flex; flex: none; align-items: center; height: 18px; font-size: 12.5px; line-height: 18px; color: var(--muted); margin-bottom: 5px; white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-value, :where(.personal-sales-history, .company-sales-history) .csh-value { flex: none; height: 28px; font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.personal-sales-history, .company-sales-history) .psh-notes, :where(.personal-sales-history, .company-sales-history) .csh-notes { display: flex; flex: none; flex-direction: column; justify-content: flex-end; height: 33px; margin-top: auto; }
:where(.personal-sales-history, .company-sales-history) .psh-value small, :where(.personal-sales-history, .company-sales-history) .csh-value small { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-left: 2px; }
:where(.personal-sales-history, .company-sales-history) .psh-note, :where(.personal-sales-history, .company-sales-history) .csh-note { height: 16px; font-size: 11.5px; line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.personal-sales-history, .company-sales-history) .psh-note + .psh-note, :where(.personal-sales-history, .company-sales-history) .csh-note + .csh-note { margin-top: 1px; }
:where(.personal-sales-history, .company-sales-history) .psh-cancel-cell .psh-value, :where(.personal-sales-history, .company-sales-history) .csh-cancel-cell .csh-value { color: #b3372c; }
:where(.personal-sales-history, .company-sales-history) .psh-cancel-cell .psh-note b, :where(.personal-sales-history, .company-sales-history) .csh-cancel-cell .csh-note b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.personal-sales-history > .psh-agg, .company-sales-history > .csh-agg { flex: none; }
:where(.personal-sales-history, .company-sales-history) .psh-agg, :where(.personal-sales-history, .company-sales-history) .csh-agg { display: flex; align-items: center; height: 24px; margin-top: -4px; min-width: 0; overflow: hidden; padding: 0 2px; font-size: 13px; line-height: 16px; color: #45474d; white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-agg-group, :where(.personal-sales-history, .company-sales-history) .csh-agg-group { display: flex; flex: none; align-items: baseline; gap: 10px; min-width: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-agg-group[hidden], :where(.personal-sales-history, .company-sales-history) .csh-agg-group[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) #psh-agg-filter:not([hidden]) + #psh-agg-sel:not([hidden]), :where(.personal-sales-history, .company-sales-history) #csh-agg-filter:not([hidden]) + #csh-agg-sel:not([hidden]) { margin-left: 14px; padding-left: 14px; border-left: 1px solid #c9cac3; }
:where(.personal-sales-history, .company-sales-history) .psh-agg-title, :where(.personal-sales-history, .company-sales-history) .csh-agg-title { color: var(--ink); font-size: 13.5px; font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-agg-title b, :where(.personal-sales-history, .company-sales-history) .csh-agg-title b { font-size: 15px; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-agg-hidden, :where(.personal-sales-history, .company-sales-history) .csh-agg-hidden { color: #8a4a17; font-size: 12px; font-weight: 600; }
:where(.personal-sales-history, .company-sales-history) .psh-agg-hidden[hidden], :where(.personal-sales-history, .company-sales-history) .csh-agg-hidden[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-agg-clear, :where(.personal-sales-history, .company-sales-history) .csh-agg-clear { flex: none; padding: 0; border: 0; background: none; color: #45474d; font: inherit; font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-agg-clear:hover, :where(.personal-sales-history, .company-sales-history) .csh-agg-clear:hover { color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-agg-nums, :where(.personal-sales-history, .company-sales-history) .csh-agg-nums { display: flex; align-items: baseline; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-agg-n, :where(.personal-sales-history, .company-sales-history) .csh-agg-n { white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-agg-n + .psh-agg-n::before, :where(.personal-sales-history, .company-sales-history) .csh-agg-n + .csh-agg-n::before { content: "·"; margin: 0 7px; color: #a3a49c; }
:where(.personal-sales-history, .company-sales-history) .psh-agg-n b, :where(.personal-sales-history, .company-sales-history) .csh-agg-n b { color: var(--ink); font-size: 13.5px; font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-agg.is-side, :where(.personal-sales-history, .company-sales-history) .csh-agg.is-side { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; height: 104px; margin-top: 0; padding-left: 10px; }
:where(.personal-sales-history, .company-sales-history) .psh-agg.is-side.is-empty, :where(.personal-sales-history, .company-sales-history) .csh-agg.is-side.is-empty { visibility: hidden; }
:where(.personal-sales-history, .company-sales-history) .psh-agg.is-side .psh-agg-group, :where(.personal-sales-history, .company-sales-history) .csh-agg.is-side .csh-agg-group { flex-wrap: wrap; row-gap: 3px; }
:where(.personal-sales-history, .company-sales-history) .psh-agg.is-side .psh-agg-nums, :where(.personal-sales-history, .company-sales-history) .csh-agg.is-side .csh-agg-nums { order: 3; flex-basis: 100%; }
:where(.personal-sales-history, .company-sales-history) .psh-agg.is-side #psh-agg-filter:not([hidden]) + #psh-agg-sel:not([hidden]), :where(.personal-sales-history, .company-sales-history) .csh-agg.is-side #csh-agg-filter:not([hidden]) + #csh-agg-sel:not([hidden]) { margin-left: 0; padding-left: 0; border-left: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-agg.is-fit1 .psh-agg-group, :where(.personal-sales-history, .company-sales-history) .csh-agg.is-fit1 .csh-agg-group { gap: 7px; }
:where(.personal-sales-history, .company-sales-history) .psh-agg.is-fit1 .psh-agg-n + .psh-agg-n::before, :where(.personal-sales-history, .company-sales-history) .csh-agg.is-fit1 .csh-agg-n + .csh-agg-n::before { margin: 0 5px; }
:where(.personal-sales-history, .company-sales-history) .psh-agg.is-fit1 #psh-agg-filter:not([hidden]) + #psh-agg-sel:not([hidden]), :where(.personal-sales-history, .company-sales-history) .csh-agg.is-fit1 #csh-agg-filter:not([hidden]) + #csh-agg-sel:not([hidden]) { margin-left: 10px; padding-left: 10px; }
:where(.personal-sales-history, .company-sales-history) .psh-agg.is-fit5 .psh-agg-n + .psh-agg-n::before, :where(.personal-sales-history, .company-sales-history) .csh-agg.is-fit5 .csh-agg-n + .csh-agg-n::before { content: ""; margin: 0 0 0 9px; }
:where(.personal-sales-history, .company-sales-history) .psh-agg.is-fit6, :where(.personal-sales-history, .company-sales-history) .csh-agg.is-fit6 { font-size: 12px; }
:where(.personal-sales-history, .company-sales-history) .psh-agg.is-fit6 .psh-agg-title, :where(.personal-sales-history, .company-sales-history) .psh-agg.is-fit6 .psh-agg-n b, :where(.personal-sales-history, .company-sales-history) .csh-agg.is-fit6 .csh-agg-title, :where(.personal-sales-history, .company-sales-history) .csh-agg.is-fit6 .csh-agg-n b { font-size: 12.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-agg.is-fit6 .psh-agg-title b, :where(.personal-sales-history, .company-sales-history) .csh-agg.is-fit6 .csh-agg-title b { font-size: 14px; }
:where(.personal-sales-history, .company-sales-history) .psh-agg.is-fit6 .psh-agg-clear, :where(.personal-sales-history, .company-sales-history) .csh-agg.is-fit6 .csh-agg-clear { font-size: 12px; }
:where(.personal-sales-history, .company-sales-history) .psh-panel, :where(.personal-sales-history, .company-sales-history) .csh-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-list-panel, :where(.personal-sales-history, .company-sales-history) .csh-list-panel { display: flex; flex-direction: column; flex: 1; min-height: min-content; overflow: hidden; }
:where(.personal-sales-history, .company-sales-history) .psh-list-panel > .psh-filter-bar, :where(.personal-sales-history, .company-sales-history) .psh-list-panel > .psh-view-strip, :where(.personal-sales-history, .company-sales-history) .psh-list-panel > .psh-foot, :where(.personal-sales-history, .company-sales-history) .csh-list-panel > .csh-filter-bar, :where(.personal-sales-history, .company-sales-history) .csh-list-panel > .csh-view-strip, :where(.personal-sales-history, .company-sales-history) .csh-list-panel > .csh-foot { flex: none; }
:where(.personal-sales-history, .company-sales-history) .psh-filter-bar, :where(.personal-sales-history, .company-sales-history) .csh-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; row-gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
:where(.personal-sales-history, .company-sales-history) .psh-filter-sep, :where(.personal-sales-history, .company-sales-history) .csh-filter-sep { flex: none; width: 1px; height: 26px; margin: 0 6px; background: var(--line); }
:where(.personal-sales-history, .company-sales-history) .psh-select, :where(.personal-sales-history, .company-sales-history) .csh-select { height: 38px; min-width: 136px; padding-left: 13px; border: 1px solid var(--line); border-radius: 7px; background-color: var(--surface); font-size: 13.5px; color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-period, :where(.personal-sales-history, .company-sales-history) .csh-period { display: flex; align-items: center; gap: 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-step, :where(.personal-sales-history, .company-sales-history) .csh-step { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 38px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: #45474d; font-size: 24px; font-weight: 500; line-height: 1; }
:where(.personal-sales-history, .company-sales-history) .psh-step span, :where(.personal-sales-history, .company-sales-history) .csh-step span { margin-top: -3px; }
:where(.personal-sales-history, .company-sales-history) .psh-step:hover:not(:disabled), :where(.personal-sales-history, .company-sales-history) .csh-step:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-seg, :where(.personal-sales-history, .company-sales-history) .csh-seg { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
:where(.personal-sales-history, .company-sales-history) .psh-seg > button, :where(.personal-sales-history, .company-sales-history) .csh-seg > button { height: 36px; padding: 0 13px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-seg > button + button, :where(.personal-sales-history, .company-sales-history) .csh-seg > button + button { border-left: 1px solid var(--line); }
:where(.personal-sales-history, .company-sales-history) .psh-seg > button[aria-pressed="true"], :where(.personal-sales-history, .company-sales-history) .csh-seg > button[aria-pressed="true"] { background: var(--ink); color: #fff; }
:where(.personal-sales-history, .company-sales-history) .psh-seg > button:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-seg > button:focus-visible { outline-offset: -3px; outline-color: var(--accent-light); }
:where(.personal-sales-history, .company-sales-history) .psh-date-btn, :where(.personal-sales-history, .company-sales-history) .csh-date-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; min-width: 132px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23585a60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 11px center / 14px 14px; padding-right: 34px; color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; user-select: none; }
:where(.personal-sales-history, .company-sales-history) .psh-date-btn:hover, :where(.personal-sales-history, .company-sales-history) .csh-date-btn:hover { border-color: oklch(63% .008 273); }
:where(.personal-sales-history, .company-sales-history) .psh-date-btn.is-empty, :where(.personal-sales-history, .company-sales-history) .csh-date-btn.is-empty { color: var(--muted); }
:where(.personal-sales-history, .company-sales-history) .psh-date-btn[aria-invalid="true"], :where(.personal-sales-history, .company-sales-history) .csh-date-btn[aria-invalid="true"] { border-color: var(--sh-up); }
:where(.personal-sales-history, .company-sales-history) .psh-date-btn[aria-expanded="true"], :where(.personal-sales-history, .company-sales-history) .csh-date-btn[aria-expanded="true"] { border-color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-date .psh-date-btn, :where(.personal-sales-history, .company-sales-history) .csh-bulk-date .csh-date-btn { width: 100%; height: 34px; }
:where(.personal-sales-history, .company-sales-history) .psh-cal, :where(.personal-sales-history, .company-sales-history) .csh-cal { position: fixed; z-index: 140; top: 0; left: 0; width: 280px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px rgba(20, 20, 20, .18); user-select: none; font-size: 13px; }
:where(.personal-sales-history, .company-sales-history) .psh-cal[hidden], :where(.personal-sales-history, .company-sales-history) .csh-cal[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-head, :where(.personal-sales-history, .company-sales-history) .csh-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-title, :where(.personal-sales-history, .company-sales-history) .csh-cal-title { font-size: 14px; font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-nav, :where(.personal-sales-history, .company-sales-history) .csh-cal-nav { width: 32px; height: 30px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: #45474d; font-size: 18px; line-height: 1; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-nav:hover, :where(.personal-sales-history, .company-sales-history) .csh-cal-nav:hover { border-color: var(--ink); color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-cal-week, :where(.personal-sales-history, .company-sales-history) .psh-cal-row, :where(.personal-sales-history, .company-sales-history) .csh-cal-week, :where(.personal-sales-history, .company-sales-history) .csh-cal-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-week span, :where(.personal-sales-history, .company-sales-history) .csh-cal-week span { padding: 4px 0; color: var(--muted); font-size: 11.5px; font-weight: 600; text-align: center; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-week span:first-child, :where(.personal-sales-history, .company-sales-history) .csh-cal-week span:first-child { color: #c0453a; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-week span:last-child, :where(.personal-sales-history, .company-sales-history) .csh-cal-week span:last-child { color: #3b5a9a; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-grid, :where(.personal-sales-history, .company-sales-history) .csh-cal-grid { display: flex; flex-direction: column; gap: 2px; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-day, :where(.personal-sales-history, .company-sales-history) .csh-cal-day { height: 32px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-day:hover, :where(.personal-sales-history, .company-sales-history) .csh-cal-day:hover { background: var(--sh-soft); }
:where(.personal-sales-history, .company-sales-history) .psh-cal-day.is-sun, :where(.personal-sales-history, .company-sales-history) .csh-cal-day.is-sun { color: #c0453a; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-day.is-sat, :where(.personal-sales-history, .company-sales-history) .csh-cal-day.is-sat { color: #3b5a9a; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-day.is-other, :where(.personal-sales-history, .company-sales-history) .csh-cal-day.is-other { opacity: .38; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-day.is-range, :where(.personal-sales-history, .company-sales-history) .csh-cal-day.is-range { background: #f1f1ec; border-radius: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-day.is-today, :where(.personal-sales-history, .company-sales-history) .csh-cal-day.is-today { border-color: #b5b6ae; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-day.is-selected, :where(.personal-sales-history, .company-sales-history) .psh-cal-day.is-selected:hover, :where(.personal-sales-history, .company-sales-history) .csh-cal-day.is-selected, :where(.personal-sales-history, .company-sales-history) .csh-cal-day.is-selected:hover { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-day:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-cal-day:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-foot, :where(.personal-sales-history, .company-sales-history) .csh-cal-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sh-row-line); }
:where(.personal-sales-history, .company-sales-history) .psh-cal-link, :where(.personal-sales-history, .company-sales-history) .csh-cal-link { height: 28px; padding: 0 10px; border: 0; border-radius: 5px; background: none; color: #45474d; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-cal-link:hover, :where(.personal-sales-history, .company-sales-history) .csh-cal-link:hover { background: var(--sh-soft); color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-cal-link[hidden], :where(.personal-sales-history, .company-sales-history) .csh-cal-link[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-tilde, :where(.personal-sales-history, .company-sales-history) .csh-tilde { color: var(--muted); }
:where(.personal-sales-history, .company-sales-history) .psh-search, :where(.personal-sales-history, .company-sales-history) .csh-search { height: 38px; flex: 1 1 240px; width: auto; min-width: 240px; max-width: 360px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: 13px; }
:where(.personal-sales-history, .company-sales-history) .psh-btn, :where(.personal-sales-history, .company-sales-history) .csh-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-btn:hover:not(:disabled), :where(.personal-sales-history, .company-sales-history) .csh-btn:hover:not(:disabled) { border-color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-dates, :where(.personal-sales-history, .company-sales-history) .csh-dates { display: flex; align-items: center; gap: 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-sync-group, :where(.personal-sales-history, .company-sales-history) .csh-sync-group { display: flex; align-items: center; gap: 10px; margin-left: auto; }
:where(.personal-sales-history, .company-sales-history) .psh-sync, :where(.personal-sales-history, .company-sales-history) .csh-sync { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; font-size: 12.5px; color: var(--muted); text-align: right; }
:where(.personal-sales-history, .company-sales-history) .psh-sync-line, :where(.personal-sales-history, .company-sales-history) .csh-sync-line { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 10px; }
:where(.personal-sales-history, .company-sales-history) .psh-sync-text, :where(.personal-sales-history, .company-sales-history) .csh-sync-text { font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-sync.is-running .psh-sync-text, :where(.personal-sales-history, .company-sales-history) .csh-sync.is-running .csh-sync-text { color: var(--ink); font-weight: 600; }
:where(.personal-sales-history, .company-sales-history) .psh-sync-text.is-error, :where(.personal-sales-history, .company-sales-history) .psh-sync-note.is-error, :where(.personal-sales-history, .company-sales-history) .csh-sync-text.is-error, :where(.personal-sales-history, .company-sales-history) .csh-sync-note.is-error { color: var(--sh-up); }
:where(.personal-sales-history, .company-sales-history) .psh-sync-note, :where(.personal-sales-history, .company-sales-history) .csh-sync-note { width: max-content; max-width: 340px; font-size: 11.5px; line-height: 1.4; }
:where(.personal-sales-history, .company-sales-history) .psh-sync-note[hidden], :where(.personal-sales-history, .company-sales-history) .psh-sync-bar[hidden], :where(.personal-sales-history, .company-sales-history) .psh-sync-btn[hidden], :where(.personal-sales-history, .company-sales-history) .csh-sync-note[hidden], :where(.personal-sales-history, .company-sales-history) .csh-sync-bar[hidden], :where(.personal-sales-history, .company-sales-history) .csh-sync-btn[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-sync-bar, :where(.personal-sales-history, .company-sales-history) .csh-sync-bar { position: relative; flex: none; width: 120px; height: 6px; border-radius: 3px; background: var(--sh-soft); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
:where(.personal-sales-history, .company-sales-history) .psh-sync-fill, :where(.personal-sales-history, .company-sales-history) .csh-sync-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-sync-btn, :where(.personal-sales-history, .company-sales-history) .csh-sync-btn { flex: none; min-width: 72px; justify-content: center; }
:where(.personal-sales-history, .company-sales-history) .psh-sync-btn:disabled, :where(.personal-sales-history, .company-sales-history) .csh-sync-btn:disabled { color: var(--muted); cursor: default; }
:where(.personal-sales-history, .company-sales-history) .psh-sync-group, :where(.personal-sales-history, .company-sales-history) .csh-sync-group { flex-direction: row-reverse; flex-wrap: wrap; row-gap: 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-sync-group > .psh-sync-btn, :where(.personal-sales-history, .company-sales-history) .csh-sync-group > .csh-sync-btn { order: 1; }
:where(.personal-sales-history, .company-sales-history) .psh-sync-group > .psh-sync, :where(.personal-sales-history, .company-sales-history) .csh-sync-group > .csh-sync { order: 2; }
:where(.personal-sales-history, .company-sales-history) .psh-new-note, :where(.personal-sales-history, .company-sales-history) .csh-new-note { order: 3; position: relative; display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; margin-right: 8px; padding: 4px 11px; border-radius: 7px; background: #e7f2ec; isolation: isolate; color: var(--ink); font-size: 13.5px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-new-note[hidden], :where(.personal-sales-history, .company-sales-history) .csh-new-note[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-new-note::before, :where(.personal-sales-history, .company-sales-history) .csh-new-note::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: oklch(51% .109 155 / .38); opacity: 0; transform: scaleX(0); transform-origin: left center; }
:where(.personal-sales-history, .company-sales-history) .sh-new-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sh-green); }
:where(.personal-sales-history, .company-sales-history) .psh-new-note.is-done .sh-new-dot, :where(.personal-sales-history, .company-sales-history) .csh-new-note.is-done .sh-new-dot { display: inline-flex; align-items: center; justify-content: center; width: auto; height: auto; border-radius: 0; background: none; color: var(--sh-green); font-size: 13px; line-height: 1; }
:where(.personal-sales-history, .company-sales-history) .psh-new-note.is-done .sh-new-dot::before, :where(.personal-sales-history, .company-sales-history) .csh-new-note.is-done .sh-new-dot::before { content: "✓"; }
:where(.personal-sales-history, .company-sales-history) .psh-new-text, :where(.personal-sales-history, .company-sales-history) .csh-new-text { white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-new-note.is-wait, :where(.personal-sales-history, .company-sales-history) .csh-new-note.is-wait { animation: sh-new-breathe 1.5s ease-in-out infinite; }
:where(.personal-sales-history, .company-sales-history) .psh-new-note.is-wait .sh-new-dot, :where(.personal-sales-history, .company-sales-history) .csh-new-note.is-wait .sh-new-dot { animation: sh-new-dot 1.5s ease-in-out infinite; }
:where(.personal-sales-history, .company-sales-history) .psh-new-note.is-pulse::before, :where(.personal-sales-history, .company-sales-history) .csh-new-note.is-pulse::before { animation: sh-new-sweep 2.6s var(--ease-out) 1; }
:where(.personal-sales-history, .company-sales-history) .psh-new-note.is-done.is-pulse .sh-new-dot, :where(.personal-sales-history, .company-sales-history) .csh-new-note.is-done.is-pulse .sh-new-dot { animation: sh-new-check .8s ease-in-out 1; }
@keyframes sh-new-dot { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 oklch(51% .109 155 / 0); } 45% { transform: scale(1.35); box-shadow: 0 0 0 3px oklch(51% .109 155 / .22); } }
@keyframes sh-new-breathe { 0%, 100% { transform: scale(1); background-color: #e7f2ec; box-shadow: 0 0 0 0 oklch(51% .109 155 / .28); } 45% { transform: scale(1.03); background-color: #cfe7d9; box-shadow: 0 0 0 6px oklch(51% .109 155 / 0); } }
@keyframes sh-new-check { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.35); } }
@keyframes sh-new-sweep { 0% { opacity: 1; transform: scaleX(0); } 22% { opacity: 1; transform: scaleX(1); } 65% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
    .personal-sales-history .psh-new-note.is-pulse::before, .company-sales-history .csh-new-note.is-pulse::before { opacity: 1; transform: none; }
    .personal-sales-history .psh-new-note.is-wait, .company-sales-history .csh-new-note.is-wait { background: #d6eadf; }
    .personal-sales-history .psh-new-note.is-wait .sh-new-dot, .company-sales-history .csh-new-note.is-wait .sh-new-dot { background: oklch(42% .109 155); box-shadow: 0 0 0 2px oklch(51% .109 155 / .25); }
}
:where(.personal-sales-history, .company-sales-history) .psh-view-strip, :where(.personal-sales-history, .company-sales-history) .csh-view-strip { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 4px 10px; padding: 10px 18px 0; border-bottom: 1px solid var(--line); background: var(--surface); }
:where(.personal-sales-history, .company-sales-history) .psh-view-tabs, :where(.personal-sales-history, .company-sales-history) .csh-view-tabs { display: flex; gap: 4px; }
:where(.personal-sales-history, .company-sales-history) .psh-view-tab, :where(.personal-sales-history, .company-sales-history) .csh-view-tab { position: relative; padding: 10px 20px; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-view-tab:hover, :where(.personal-sales-history, .company-sales-history) .csh-view-tab:hover { color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-view-tab[aria-selected="true"], :where(.personal-sales-history, .company-sales-history) .csh-view-tab[aria-selected="true"] { border-color: var(--line); background: var(--sh-band); color: var(--ink); font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-view-tab:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-view-tab:focus-visible { outline-offset: -3px; }
:where(.personal-sales-history, .company-sales-history) .psh-strip-btns, :where(.personal-sales-history, .company-sales-history) .csh-strip-btns { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 8px; }
:where(.personal-sales-history, .company-sales-history) .psh-view-strip .is-off, :where(.personal-sales-history, .company-sales-history) .csh-view-strip .is-off { visibility: hidden; }
:where(.personal-sales-history, .company-sales-history) .psh-strip-btns .psh-btn, :where(.personal-sales-history, .company-sales-history) .csh-strip-btns .csh-btn { height: 34px; padding: 0 12px; }
:where(.personal-sales-history, .company-sales-history) .psh-sel-info, :where(.personal-sales-history, .company-sales-history) .csh-sel-info { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-sel-dot, :where(.personal-sales-history, .company-sales-history) .csh-sel-dot { margin-left: 8px; color: #c9cac3; }
:where(.personal-sales-history, .company-sales-history) .psh-sel-info b, :where(.personal-sales-history, .company-sales-history) .csh-sel-info b { color: var(--ink); font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-file-ico, :where(.personal-sales-history, .company-sales-history) .csh-file-ico { width: 16px; height: 16px; border-radius: 4px; color: #fff; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
:where(.personal-sales-history, .company-sales-history) .psh-file-ico.psh-xls, :where(.personal-sales-history, .company-sales-history) .csh-file-ico.csh-xls { background: #1d6f42; }
:where(.personal-sales-history, .company-sales-history) .psh-table-wrap, :where(.personal-sales-history, .company-sales-history) .csh-table-wrap { flex: 1; height: 0; min-height: 160px; overflow: auto; overflow-anchor: none; contain: size; scrollbar-width: thin; scrollbar-color: var(--line) var(--surface); }
:where(.personal-sales-history, .company-sales-history) .psh-tabpanel[hidden], :where(.personal-sales-history, .company-sales-history) .csh-tabpanel[hidden] { display: none !important; }
:where(.personal-sales-history, .company-sales-history) .psh-list-panel > .psh-pen-bar, :where(.personal-sales-history, .company-sales-history) .psh-list-panel > .psh-ledger-notice, :where(.personal-sales-history, .company-sales-history) .psh-list-panel > .psh-ledger-hint, :where(.personal-sales-history, .company-sales-history) .csh-list-panel > .csh-pen-bar, :where(.personal-sales-history, .company-sales-history) .csh-list-panel > .csh-ledger-notice, :where(.personal-sales-history, .company-sales-history) .csh-list-panel > .csh-ledger-hint { flex: none; }
:where(.personal-sales-history, .company-sales-history) .psh-pen-bar[hidden], :where(.personal-sales-history, .company-sales-history) .csh-pen-bar[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-table, :where(.personal-sales-history, .company-sales-history) .csh-table { width: 100%; min-width: 960px; table-layout: fixed; border-collapse: collapse; font-size: 13.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-table th, :where(.personal-sales-history, .company-sales-history) .psh-table td, :where(.personal-sales-history, .company-sales-history) .csh-table th, :where(.personal-sales-history, .company-sales-history) .csh-table td { padding: 10px; text-align: center; vertical-align: middle; }
:where(.personal-sales-history, .company-sales-history) .psh-table th, :where(.personal-sales-history, .company-sales-history) .csh-table th { position: sticky; top: 0; z-index: 2; background: var(--sh-band); box-shadow: inset -1px 0 0 var(--sh-head-vline), inset 0 -1px 0 #cfcfc7; color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-table td, :where(.personal-sales-history, .company-sales-history) .csh-table td { border-bottom: 1px solid var(--sh-row-line); box-shadow: inset -1px 0 0 var(--sh-body-vline); }
:where(.personal-sales-history, .company-sales-history) .psh-table td.psh-empty, :where(.personal-sales-history, .company-sales-history) .psh-table td.psh-col-fill, :where(.personal-sales-history, .company-sales-history) .csh-table td.csh-empty, :where(.personal-sales-history, .company-sales-history) .csh-table td.csh-col-fill { box-shadow: none; }
:where(.personal-sales-history, .company-sales-history) .psh-table td:has(+ td.psh-col-fill), :where(.personal-sales-history, .company-sales-history) .csh-table td:has(+ td.csh-col-fill) { box-shadow: none; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody tr:hover td, :where(.personal-sales-history, .company-sales-history) .csh-table tbody tr:hover td { background: #fbfbf8; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody tr.is-checked td, :where(.personal-sales-history, .company-sales-history) .csh-table tbody tr.is-checked td { background: #f6f6f1; }
:where(.personal-sales-history, .company-sales-history) .psh-table td.psh-col-name, :where(.personal-sales-history, .company-sales-history) .csh-table td.csh-col-name { text-align: left; }
:where(.personal-sales-history, .company-sales-history) .psh-table .psh-col-check, :where(.personal-sales-history, .company-sales-history) .csh-table .csh-col-check { width: 46px; padding-left: 18px; padding-right: 10px; }
:where(.personal-sales-history, .company-sales-history) .psh-table .psh-col-idx, :where(.personal-sales-history, .company-sales-history) .csh-table .csh-col-idx { width: 40px; padding-left: 6px; padding-right: 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-table .psh-col-first, :where(.personal-sales-history, .company-sales-history) .csh-table .csh-col-first { width: 52px; padding-left: 18px; padding-right: 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-table td, :where(.personal-sales-history, .company-sales-history) .csh-table td { overflow: hidden; }
:where(.personal-sales-history, .company-sales-history) .psh-table td.psh-col-name, :where(.personal-sales-history, .company-sales-history) .csh-table td.csh-col-name { overflow-wrap: anywhere; }
:where(.personal-sales-history, .company-sales-history) .psh-table td:not(.psh-col-name), :where(.personal-sales-history, .company-sales-history) .csh-table td:not(.csh-col-name) { white-space: nowrap; text-overflow: ellipsis; }
:where(.personal-sales-history, .company-sales-history) .psh-table input[type="checkbox"], :where(.personal-sales-history, .company-sales-history) .csh-table input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); cursor: pointer; vertical-align: middle; }
:where(.personal-sales-history, .company-sales-history) .psh-table th[data-sort], :where(.personal-sales-history, .company-sales-history) .csh-table th[data-sort] { cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-table th[data-sort]:hover, :where(.personal-sales-history, .company-sales-history) .csh-table th[data-sort]:hover { color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-table th[data-sort]:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-table th[data-sort]:focus-visible { outline-offset: -3px; }
:where(.personal-sales-history, .company-sales-history) .psh-sort-arrow, :where(.personal-sales-history, .company-sales-history) .csh-sort-arrow { position: absolute; margin-left: 3px; font-size: 10px; font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-sort-arrow.is-asc, :where(.personal-sales-history, .company-sales-history) .csh-sort-arrow.is-asc { color: var(--sh-up); }
:where(.personal-sales-history, .company-sales-history) .psh-sort-arrow.is-desc, :where(.personal-sales-history, .company-sales-history) .csh-sort-arrow.is-desc { color: var(--sh-down); }
:where(.personal-sales-history, .company-sales-history) .psh-idx, :where(.personal-sales-history, .company-sales-history) .csh-idx { color: var(--muted); font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-p-wrap, :where(.personal-sales-history, .company-sales-history) .csh-p-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-p-text, :where(.personal-sales-history, .company-sales-history) .csh-p-text { flex: 1 1 auto; min-width: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-thumb, :where(.personal-sales-history, .company-sales-history) .csh-thumb { flex: none; width: 36px; height: 36px; border-radius: 6px; background: #ececde; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; color: #a6a79c; overflow: hidden; vertical-align: middle; cursor: zoom-in; }
:where(.personal-sales-history, .company-sales-history) .psh-thumb img, :where(.personal-sales-history, .company-sales-history) .csh-thumb img { width: 100%; height: 100%; object-fit: contain; }
:where(.personal-sales-history, .company-sales-history) .psh-thumb:has(img), :where(.personal-sales-history, .company-sales-history) .csh-thumb:has(img) { background: #fff; border: 1px solid var(--line); }
:where(.personal-sales-history, .company-sales-history) .psh-thumb:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
:where(.personal-sales-history, .company-sales-history) .psh-photo-pop, :where(.personal-sales-history, .company-sales-history) .csh-photo-pop { position: fixed; z-index: 116; top: 0; left: 0; display: flex; flex-direction: column; gap: 6px; width: 260px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 32px rgba(20, 20, 20, .18); }
:where(.personal-sales-history, .company-sales-history) .psh-photo-pop[hidden], :where(.personal-sales-history, .company-sales-history) .csh-photo-pop[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-photo-pop img, :where(.personal-sales-history, .company-sales-history) .csh-photo-pop img { display: block; width: 244px; height: 244px; border-radius: 6px; object-fit: contain; background: #fff; }
:where(.personal-sales-history, .company-sales-history) .psh-photo-empty, :where(.personal-sales-history, .company-sales-history) .csh-photo-empty { display: flex; align-items: center; justify-content: center; width: 244px; height: 244px; border-radius: 6px; background: #ececde; color: #a6a79c; }
:where(.personal-sales-history, .company-sales-history) .psh-p-sku, :where(.personal-sales-history, .company-sales-history) .csh-p-sku { display: flex; align-items: center; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
:where(.personal-sales-history, .company-sales-history) .psh-p-code, :where(.personal-sales-history, .company-sales-history) .csh-p-code { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:where(.personal-sales-history, .company-sales-history) .psh-p-name, :where(.personal-sales-history, .company-sales-history) .csh-p-name { margin-top: 2px; font-size: 12.5px; font-weight: 400; color: #55575d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.personal-sales-history, .company-sales-history) .psh-type-chip, :where(.personal-sales-history, .company-sales-history) .csh-type-chip { display: inline-flex; font-size: 12px; font-weight: 600; border-radius: 5px; padding: 2px 8px; border: 1px solid transparent; white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-type-chip + .psh-type-chip, :where(.personal-sales-history, .company-sales-history) .csh-type-chip + .csh-type-chip { margin-left: 4px; }
:where(.personal-sales-history, .company-sales-history) .psh-type-chip.is-ilpan, :where(.personal-sales-history, .company-sales-history) .csh-type-chip.is-ilpan { color: #5c5e63; border-color: #d8d8d0; background: var(--surface); }
:where(.personal-sales-history, .company-sales-history) .psh-type-chip.is-bopan, :where(.personal-sales-history, .company-sales-history) .csh-type-chip.is-bopan { color: var(--sh-green); border-color: #bfe0cd; background: #e7f2ec; }
:where(.personal-sales-history, .company-sales-history) .psh-type-chip.is-bopan95, :where(.personal-sales-history, .company-sales-history) .csh-type-chip.is-bopan95 { color: var(--sh-green); border-color: #7fbf9a; background: #f3f9f5; }
:where(.personal-sales-history, .company-sales-history) .psh-d-time, :where(.personal-sales-history, .company-sales-history) .csh-d-time { display: inline; font-size: 12px; color: var(--muted); margin-left: 5px; }
:where(.personal-sales-history, .company-sales-history) .psh-price, :where(.personal-sales-history, .company-sales-history) .csh-price { font-variant-numeric: tabular-nums; font-weight: 600; }
:where(.personal-sales-history, .company-sales-history) .psh-settle, :where(.personal-sales-history, .company-sales-history) .csh-settle { font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-status, :where(.personal-sales-history, .company-sales-history) .csh-status { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-size: 12px; font-weight: 600; border-radius: 5px; padding: 2px 8px; background: var(--sh-soft); color: #5c5e63; white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-table td.psh-status-td, :where(.personal-sales-history, .company-sales-history) .csh-table td.csh-status-td { text-overflow: clip; }
:where(.personal-sales-history, .company-sales-history) .psh-status.is-done, :where(.personal-sales-history, .company-sales-history) .csh-status.is-done { background: #eef4ef; color: #4b6b56; font-weight: 500; }
:where(.personal-sales-history, .company-sales-history) .psh-status.is-hold, :where(.personal-sales-history, .company-sales-history) .csh-status.is-hold { background: #fdf3ea; color: #8a4a17; }
:where(.personal-sales-history, .company-sales-history) .psh-status.is-cancel, :where(.personal-sales-history, .company-sales-history) .csh-status.is-cancel { background: #faeae8; color: #b3372c; }
:where(.personal-sales-history, .company-sales-history) .psh-d-expect, :where(.personal-sales-history, .company-sales-history) .csh-d-expect { color: var(--muted); }
:where(.personal-sales-history, .company-sales-history) .psh-d-pre, :where(.personal-sales-history, .company-sales-history) .csh-d-pre { font-size: 12px; }
:where(.personal-sales-history, .company-sales-history) .psh-d-tag, :where(.personal-sales-history, .company-sales-history) .csh-d-tag { display: inline-block; margin-right: 5px; padding: 0 4px; border: 1px solid #d8d8d0; border-radius: 4px; color: #8f9089; font-size: 10.5px; font-weight: 600; line-height: 15px; vertical-align: 1px; cursor: help; }
:where(.personal-sales-history, .company-sales-history) .psh-d-tag.is-sure, :where(.personal-sales-history, .company-sales-history) .csh-d-tag.is-sure { border-color: var(--ink); color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-d-tag:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-d-tag:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
:where(.personal-sales-history, .company-sales-history) .psh-d-tag.is-delay, :where(.personal-sales-history, .company-sales-history) .csh-d-tag.is-delay { border-color: #e39a4f; color: #c2661b; }
:where(.personal-sales-history, .company-sales-history) .psh-d-tag.is-delay:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-d-tag.is-delay:focus-visible { outline-color: #c2661b; }
:where(.personal-sales-history, .company-sales-history) .psh-d-tag.is-kream, :where(.personal-sales-history, .company-sales-history) .csh-d-tag.is-kream { border-color: var(--sh-green); color: var(--sh-green); }
:where(.personal-sales-history, .company-sales-history) .psh-d-tag.is-kream:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-d-tag.is-kream:focus-visible { outline-color: var(--sh-green); }
:where(.personal-sales-history, .company-sales-history) .psh-fee-sub, :where(.personal-sales-history, .company-sales-history) .csh-fee-sub { font-size: 11px; color: #8a8b86; margin-top: 3px; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-table td.psh-empty, :where(.personal-sales-history, .company-sales-history) .csh-table td.csh-empty { height: 150px; padding: 0; overflow: visible; color: var(--muted); text-align: center !important; white-space: normal; }
:where(.personal-sales-history, .company-sales-history) .psh-empty-box, :where(.personal-sales-history, .company-sales-history) .csh-empty-box { position: sticky; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 150px; padding: 24px 16px; box-sizing: border-box; }
:where(.personal-sales-history, .company-sales-history) .psh-empty-text, :where(.personal-sales-history, .company-sales-history) .csh-empty-text { margin: 0; font-size: 13.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-empty-conds, :where(.personal-sales-history, .company-sales-history) .csh-empty-conds { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 640px; margin: 0; padding: 0; list-style: none; }
:where(.personal-sales-history, .company-sales-history) .psh-empty-conds li, :where(.personal-sales-history, .company-sales-history) .csh-empty-conds li { padding: 3px 10px; border-radius: 999px; background: var(--sh-soft); color: #45474d; font-size: 12.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-empty-clear, :where(.personal-sales-history, .company-sales-history) .csh-empty-clear { height: 32px; padding: 0 14px; font-size: 12.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-empty.is-error, :where(.personal-sales-history, .company-sales-history) .csh-empty.is-error { color: #b3372c; }
:where(.personal-sales-history, .company-sales-history) .psh-load-line, :where(.personal-sales-history, .company-sales-history) .csh-load-line { position: relative; z-index: 9; flex: none; height: 0; pointer-events: none; }
:where(.personal-sales-history, .company-sales-history) .psh-load-line[hidden], :where(.personal-sales-history, .company-sales-history) .csh-load-line[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-load-line::before, :where(.personal-sales-history, .company-sales-history) .csh-load-line::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sh-soft); }
:where(.personal-sales-history, .company-sales-history) .psh-load-line::after, :where(.personal-sales-history, .company-sales-history) .csh-load-line::after { content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 3px; border-radius: 0 2px 2px 0; background: var(--muted); animation: sh-load-run 1.5s ease-in-out infinite; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody tr.psh-skel-row, :where(.personal-sales-history, .company-sales-history) .csh-table tbody tr.csh-skel-row { height: 65px; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody tr.psh-skel-row:hover td, :where(.personal-sales-history, .company-sales-history) .csh-table tbody tr.csh-skel-row:hover td { background: var(--surface); }
:where(.personal-sales-history, .company-sales-history) .psh-table td.psh-skel-td, :where(.personal-sales-history, .company-sales-history) .csh-table td.csh-skel-td { padding: 10px 12px; }
:where(.personal-sales-history, .company-sales-history) .psh-skel, :where(.personal-sales-history, .company-sales-history) .csh-skel { display: block; width: 70%; max-width: 100%; height: 10px; margin: 0 auto; border-radius: 5px; background: linear-gradient(90deg, var(--sh-row-line) 0%, var(--sh-row-line) 38%, var(--surface) 50%, var(--sh-row-line) 62%, var(--sh-row-line) 100%); background-size: 300% 100%; animation: sh-skel-glow 1.6s ease-in-out infinite; }
:where(.personal-sales-history, .company-sales-history) .psh-skel.is-box, :where(.personal-sales-history, .company-sales-history) .csh-skel.is-box { width: 14px; height: 14px; border-radius: 3px; }
:where(.personal-sales-history, .company-sales-history) .psh-skel.is-short, :where(.personal-sales-history, .company-sales-history) .csh-skel.is-short { width: 22px; }
:where(.personal-sales-history, .company-sales-history) .psh-sum-row.is-loading .psh-value > span, :where(.personal-sales-history, .company-sales-history) .psh-sum-row.is-loading .psh-note[id], :where(.personal-sales-history, .company-sales-history) .psh-sum-row.is-loading .psh-note [id], :where(.personal-sales-history, .company-sales-history) .csh-sum-row.is-loading .csh-value > span, :where(.personal-sales-history, .company-sales-history) .csh-sum-row.is-loading .csh-note[id], :where(.personal-sales-history, .company-sales-history) .csh-sum-row.is-loading .csh-note [id] { color: transparent; border-radius: 5px; background: linear-gradient(90deg, var(--sh-row-line) 0%, var(--sh-row-line) 38%, var(--surface) 50%, var(--sh-row-line) 62%, var(--sh-row-line) 100%); background-size: 300% 100%; animation: sh-skel-glow 1.6s ease-in-out infinite; user-select: none; }
:where(.personal-sales-history, .company-sales-history) .psh-sum-row.is-loading .psh-value > span, :where(.personal-sales-history, .company-sales-history) .csh-sum-row.is-loading .csh-value > span { display: inline-block; width: 64%; height: 20px; vertical-align: -3px; }
:where(.personal-sales-history, .company-sales-history) .psh-sum-row.is-loading .psh-value small, :where(.personal-sales-history, .company-sales-history) .csh-sum-row.is-loading .csh-value small { visibility: hidden; }
:where(.personal-sales-history, .company-sales-history) .psh-sum-row.is-loading .psh-note[id], :where(.personal-sales-history, .company-sales-history) .csh-sum-row.is-loading .csh-note[id] { width: 70%; }
:where(.personal-sales-history, .company-sales-history) .psh-sum-row.is-loading .psh-note [id], :where(.personal-sales-history, .company-sales-history) .csh-sum-row.is-loading .csh-note [id] { display: inline-block; min-width: 1.8em; }
@keyframes sh-load-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@keyframes sh-skel-glow { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
    :where(.personal-sales-history, .company-sales-history) .psh-load-line::after, :where(.personal-sales-history, .company-sales-history) .csh-load-line::after { width: 100%; transform: none; border-radius: 0; }
    :where(.personal-sales-history, .company-sales-history) .psh-skel, :where(.personal-sales-history, .company-sales-history) .psh-sum-row.is-loading .psh-value > span, :where(.personal-sales-history, .company-sales-history) .psh-sum-row.is-loading .psh-note[id], :where(.personal-sales-history, .company-sales-history) .psh-sum-row.is-loading .psh-note [id], :where(.personal-sales-history, .company-sales-history) .csh-skel, :where(.personal-sales-history, .company-sales-history) .csh-sum-row.is-loading .csh-value > span, :where(.personal-sales-history, .company-sales-history) .csh-sum-row.is-loading .csh-note[id], :where(.personal-sales-history, .company-sales-history) .csh-sum-row.is-loading .csh-note [id] { background: var(--sh-row-line); }
}
:where(.personal-sales-history, .company-sales-history) .psh-pen-bar, :where(.personal-sales-history, .company-sales-history) .csh-pen-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--line); background: #fdf3ea; font-size: 13px; color: #8a4a17; }
:where(.personal-sales-history, .company-sales-history) .psh-pen-title, :where(.personal-sales-history, .company-sales-history) .csh-pen-title { font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-pen-amt, :where(.personal-sales-history, .company-sales-history) .csh-pen-amt { font-size: 17px; font-weight: 700; color: #b3372c; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-pen-cnt, :where(.personal-sales-history, .company-sales-history) .csh-pen-cnt { color: #b08968; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-pen-chips, :where(.personal-sales-history, .company-sales-history) .csh-pen-chips { display: contents; }
:where(.personal-sales-history, .company-sales-history) .psh-chip, :where(.personal-sales-history, .company-sales-history) .csh-chip { height: 25px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid #e3c19d; border-radius: 13px; background: var(--surface); font-size: 12px; font-weight: 600; color: #8a4a17; white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-chip b, :where(.personal-sales-history, .company-sales-history) .csh-chip b { font-variant-numeric: tabular-nums; margin-left: 4px; }
:where(.personal-sales-history, .company-sales-history) .psh-chip.is-neutral, :where(.personal-sales-history, .company-sales-history) .csh-chip.is-neutral { border-color: var(--line); color: var(--muted); }
:where(.personal-sales-history, .company-sales-history) .psh-pen-note, :where(.personal-sales-history, .company-sales-history) .csh-pen-note { margin-left: auto; font-size: 12px; color: #b08968; }
:where(.personal-sales-history, .company-sales-history) .psh-rs, :where(.personal-sales-history, .company-sales-history) .csh-rs { display: inline-flex; font-size: 12px; font-weight: 600; border-radius: 5px; padding: 3px 8px; white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-rs.is-bad, :where(.personal-sales-history, .company-sales-history) .csh-rs.is-bad { background: #faeae8; color: #b3372c; }
:where(.personal-sales-history, .company-sales-history) .psh-rs.is-neutral, :where(.personal-sales-history, .company-sales-history) .csh-rs.is-neutral { background: none; padding: 3px 0; color: #5c5e63; }
:where(.personal-sales-history, .company-sales-history) .psh-pen, :where(.personal-sales-history, .company-sales-history) .csh-pen { color: var(--sh-up); font-weight: 700; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-pen.is-none, :where(.personal-sales-history, .company-sales-history) .csh-pen.is-none { color: #c9cac3; font-weight: 400; }
:where(.personal-sales-history, .company-sales-history) .psh-foot, :where(.personal-sales-history, .company-sales-history) .csh-foot { display: flex; align-items: center; padding: 8px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
:where(.personal-sales-history, .company-sales-history) .psh-total b, :where(.personal-sales-history, .company-sales-history) .csh-total b { color: var(--ink); font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history, .personal-ilpan, .personal-bopan) .psh-save-state, :where(.personal-sales-history, .company-sales-history) .csh-save-state { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history, .personal-ilpan, .personal-bopan) .psh-save-state.is-done, :where(.personal-sales-history, .company-sales-history) .csh-save-state.is-done { color: var(--sh-green, #1f7a4d); }
:where(.personal-sales-history, .company-sales-history, .personal-ilpan, .personal-bopan) .psh-save-state.is-pending, :where(.personal-sales-history, .company-sales-history, .personal-ilpan, .personal-bopan) .psh-save-state.is-saving, :where(.personal-sales-history, .company-sales-history) .csh-save-state.is-pending, :where(.personal-sales-history, .company-sales-history) .csh-save-state.is-saving { color: var(--muted); }
:where(.personal-sales-history, .company-sales-history, .personal-ilpan, .personal-bopan) .psh-save-state.is-error, :where(.personal-sales-history, .company-sales-history) .csh-save-state.is-error { color: #b3372c; font-weight: 600; }
:where(.personal-sales-history, .company-sales-history, .personal-ilpan, .personal-bopan) .psh-save-sep[hidden], :where(.personal-sales-history, .company-sales-history, .personal-ilpan, .personal-bopan) .psh-save-retry[hidden], :where(.personal-sales-history, .company-sales-history) .csh-save-sep[hidden], :where(.personal-sales-history, .company-sales-history) .csh-save-retry[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history, .personal-ilpan, .personal-bopan) .psh-save-retry, :where(.personal-sales-history, .company-sales-history) .csh-save-retry { padding: 0; border: 0; background: none; color: #b3372c; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history, .personal-ilpan, .personal-bopan) .psh-save-retry:hover, :where(.personal-sales-history, .company-sales-history) .csh-save-retry:hover { color: #8a2a22; }
:where(.personal-sales-history, .company-sales-history, .personal-ilpan, .personal-bopan) .psh-save-retry:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-save-retry:focus-visible { outline: 2px solid #b3372c; outline-offset: 2px; border-radius: 3px; }
:where(.personal-sales-history, .company-sales-history) .psh-foot .is-off, :where(.personal-sales-history, .company-sales-history) .csh-foot .is-off { visibility: hidden; }
.personal-sales-history, .company-sales-history { --sh-in-line: #d9d9d2; --sh-in-line-hover: #b4b5ad; --sh-calc-bg: #f3f3ee; }
:where(.personal-sales-history, .company-sales-history) .psh-table[hidden], :where(.personal-sales-history, .company-sales-history) .csh-table[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table col.psh-c-check, :where(.personal-sales-history, .company-sales-history) .csh-items-table col.csh-c-check { width: 46px; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table col.psh-c-idx, :where(.personal-sales-history, .company-sales-history) .csh-items-table col.csh-c-idx { width: 40px; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table th, :where(.personal-sales-history, .company-sales-history) .csh-items-table th { z-index: 3; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table .psh-sticky, :where(.personal-sales-history, .company-sales-history) .csh-items-table .csh-sticky { position: sticky; z-index: 2; background: var(--surface); }
:where(.personal-sales-history, .company-sales-history) .psh-items-table th.psh-sticky, :where(.personal-sales-history, .company-sales-history) .csh-items-table th.csh-sticky { z-index: 4; background: var(--sh-band); }
:where(.personal-sales-history, .company-sales-history) .psh-items-table th.psh-stk-end, :where(.personal-sales-history, .company-sales-history) .csh-items-table th.csh-stk-end { box-shadow: inset -1px 0 0 #cfcfc7, inset 0 -1px 0 #cfcfc7; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table th.psh-lg-head-calc, :where(.personal-sales-history, .company-sales-history) .csh-items-table th.csh-lg-head-calc { background: var(--sh-band-calc); }
:where(.personal-sales-history, .company-sales-history) .psh-table th.has-filter, :where(.personal-sales-history, .company-sales-history) .csh-table th.has-filter { padding-left: 12px; padding-right: 35px; text-align: left; }
:where(.personal-sales-history, .company-sales-history) .psh-th-text, :where(.personal-sales-history, .company-sales-history) .csh-th-text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
:where(.personal-sales-history, .company-sales-history) .psh-th-edit, :where(.personal-sales-history, .company-sales-history) .csh-th-edit { margin-left: 4px; color: #3d3e39; font-size: 11px; font-weight: 400; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-head-in .psh-th-text, :where(.personal-sales-history, .company-sales-history) .csh-lg-head-in .csh-th-text { max-width: calc(100% - 16px); }
:where(.personal-sales-history, .company-sales-history) .psh-table th.has-help .psh-th-text, :where(.personal-sales-history, .company-sales-history) .csh-table th.has-help .csh-th-text { max-width: calc(100% - 23px); }
:where(.personal-sales-history, .company-sales-history) .psh-filter-btn, :where(.personal-sales-history, .company-sales-history) .csh-filter-btn { position: absolute; top: 50%; right: 11px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: -10px; padding: 0; border: 1px solid var(--ink); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 11px; line-height: 1; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-filter-btn:hover, :where(.personal-sales-history, .company-sales-history) .csh-filter-btn:hover { background: var(--sh-soft); }
:where(.personal-sales-history, .company-sales-history) .psh-filter-btn:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-filter-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
:where(.personal-sales-history, .company-sales-history) .psh-filter-btn[aria-expanded="true"], :where(.personal-sales-history, .company-sales-history) .csh-filter-btn[aria-expanded="true"] { background: var(--sh-soft); box-shadow: 0 0 0 2px rgba(20, 20, 20, .16); }
:where(.personal-sales-history, .company-sales-history) .psh-filter-btn.is-on, :where(.personal-sales-history, .company-sales-history) .psh-filter-btn.is-on:hover, :where(.personal-sales-history, .company-sales-history) .csh-filter-btn.is-on, :where(.personal-sales-history, .company-sales-history) .csh-filter-btn.is-on:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
:where(.personal-sales-history, .company-sales-history) .psh-col-resize, :where(.personal-sales-history, .company-sales-history) .csh-col-resize { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 7px; cursor: col-resize; touch-action: none; }
:where(.personal-sales-history, .company-sales-history) .psh-col-resize::after, :where(.personal-sales-history, .company-sales-history) .csh-col-resize::after { content: ""; position: absolute; top: 7px; bottom: 7px; right: 0; width: 2px; border-radius: 1px; background: transparent; }
:where(.personal-sales-history, .company-sales-history) .psh-table th:hover > .psh-col-resize::after, :where(.personal-sales-history, .company-sales-history) .csh-table th:hover > .csh-col-resize::after { background: #d6d6ce; }
:where(.personal-sales-history, .company-sales-history) .psh-col-resize:hover::after, :where(.personal-sales-history, .company-sales-history) .psh-col-resize.is-active::after, :where(.personal-sales-history, .company-sales-history) .csh-col-resize:hover::after, :where(.personal-sales-history, .company-sales-history) .csh-col-resize.is-active::after { background: var(--ink) !important; }
:where(.personal-sales-history, .company-sales-history) body.psh-resizing, :where(.personal-sales-history, .company-sales-history) body.psh-resizing *, :where(.personal-sales-history, .company-sales-history) body.csh-resizing, :where(.personal-sales-history, .company-sales-history) body.csh-resizing * { cursor: col-resize !important; user-select: none !important; }
:where(.personal-sales-history, .company-sales-history) .psh-table .psh-col-fill, :where(.personal-sales-history, .company-sales-history) .csh-table .csh-col-fill { padding: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-table th.psh-col-fill, :where(.personal-sales-history, .company-sales-history) .csh-table th.csh-col-fill { box-shadow: inset 0 -1px 0 #cfcfc7; }
:where(.personal-sales-history, .company-sales-history) .psh-settle-info, :where(.personal-sales-history, .company-sales-history) .csh-settle-info { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: none; color: #9a9b94; font-size: 13px; line-height: 1; vertical-align: -2px; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-settle-info:hover, :where(.personal-sales-history, .company-sales-history) .psh-settle-info[aria-expanded="true"], :where(.personal-sales-history, .company-sales-history) .csh-settle-info:hover, :where(.personal-sales-history, .company-sales-history) .csh-settle-info[aria-expanded="true"] { color: var(--ink); background: var(--sh-soft); }
:where(.personal-sales-history, .company-sales-history) .psh-settle-info:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-settle-info:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-settle-pop, :where(.personal-sales-history, .company-sales-history) .csh-settle-pop { position: fixed; z-index: 120; top: 0; left: 0; width: 280px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 28px rgba(20, 20, 20, .16); font-size: 13px; user-select: text; }
:where(.personal-sales-history, .company-sales-history) .psh-settle-pop[hidden], :where(.personal-sales-history, .company-sales-history) .csh-settle-pop[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-sp-title, :where(.personal-sales-history, .company-sales-history) .csh-sp-title { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-sp-list, :where(.personal-sales-history, .company-sales-history) .csh-sp-list { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 4px; margin: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-sp-list dt, :where(.personal-sales-history, .company-sales-history) .csh-sp-list dt { min-width: 0; color: #45474d; }
:where(.personal-sales-history, .company-sales-history) .psh-sp-list dt small, :where(.personal-sales-history, .company-sales-history) .csh-sp-list dt small { display: block; color: var(--muted); font-size: 11.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-sp-list dd, :where(.personal-sales-history, .company-sales-history) .csh-sp-list dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
:where(.personal-sales-history, .company-sales-history) .psh-sp-list .is-total, :where(.personal-sales-history, .company-sales-history) .csh-sp-list .is-total { padding-top: 6px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-sp-note, :where(.personal-sales-history, .company-sales-history) .csh-sp-note { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table thead tr.psh-total-row td.psh-sticky, :where(.personal-sales-history, .company-sales-history) .csh-items-table thead tr.csh-total-row td.csh-sticky { z-index: 4; }
:where(.personal-sales-history, .company-sales-history) .psh-table.psh-measure td.psh-total-cell, :where(.personal-sales-history, .company-sales-history) .csh-table.csh-measure td.csh-total-cell { font-size: 13px; font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-table thead tr.psh-total-row td.psh-col-fill, :where(.personal-sales-history, .company-sales-history) .csh-table thead tr.csh-total-row td.csh-col-fill { box-shadow: inset 0 -1px 0 #cfcfc7; }
:where(.personal-sales-history, .company-sales-history) .psh-table thead .psh-foot-label, :where(.personal-sales-history, .company-sales-history) .csh-table thead .csh-foot-label { color: #8a7a3a; font-size: 12px; }
:where(.personal-sales-history, .company-sales-history) .psh-table thead .psh-foot-name, :where(.personal-sales-history, .company-sales-history) .csh-table thead .csh-foot-name { text-align: left; color: #8a7a3a; font-size: 12px; font-weight: 600; }
:where(.personal-sales-history, .company-sales-history) .psh-p-priced.is-partial, :where(.personal-sales-history, .company-sales-history) .csh-p-priced.is-partial { color: #8a4a17; }
:where(.personal-sales-history, .company-sales-history) .psh-shade, :where(.personal-sales-history, .company-sales-history) .csh-shade { position: sticky; top: 0; left: 0; z-index: 8; width: 100%; height: 0; pointer-events: none; }
:where(.personal-sales-history, .company-sales-history) .psh-table-wrap.is-more-right .psh-shade::after, :where(.personal-sales-history, .company-sales-history) .csh-table-wrap.is-more-right .csh-shade::after { opacity: 1; }
:where(.personal-sales-history, .company-sales-history) .psh-table-wrap.is-scrolled-left .psh-items-table th.psh-stk-end, :where(.personal-sales-history, .company-sales-history) .csh-table-wrap.is-scrolled-left .csh-items-table th.csh-stk-end { box-shadow: inset -1px 0 0 #cfcfc7, inset 0 -1px 0 #cfcfc7, 7px 0 8px -6px rgba(20, 20, 20, .2); }
:where(.personal-sales-history, .company-sales-history) .psh-items-table tbody tr[data-order], :where(.personal-sales-history, .company-sales-history) .csh-items-table tbody tr[data-order] { height: 65px; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody tr.psh-vpad > td, :where(.personal-sales-history, .company-sales-history) .csh-table tbody tr.csh-vpad > td { padding: 0; border: 0; background: transparent !important; box-shadow: none; }
:where(.personal-sales-history, .company-sales-history) .psh-table.psh-measure, :where(.personal-sales-history, .company-sales-history) .csh-table.csh-measure { position: absolute !important; top: 0; left: -99999px; width: max-content !important; min-width: 0 !important; table-layout: auto !important; visibility: hidden; pointer-events: none; }
:where(.personal-sales-history, .company-sales-history) .psh-table.psh-measure th, :where(.personal-sales-history, .company-sales-history) .psh-table.psh-measure td, :where(.personal-sales-history, .company-sales-history) .csh-table.csh-measure th, :where(.personal-sales-history, .company-sales-history) .csh-table.csh-measure td { position: static; }
:where(.personal-sales-history, .company-sales-history) .psh-none, :where(.personal-sales-history, .company-sales-history) .csh-none { color: #c9cac3; }
:where(.personal-sales-history, .company-sales-history) #psh-products-rows td.psh-none, :where(.personal-sales-history, .company-sales-history) #csh-products-rows td.csh-none { position: relative; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-order, :where(.personal-sales-history, .company-sales-history) .csh-lg-order { font-variant-numeric: tabular-nums; font-size: 12.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table tbody tr.is-cancel .psh-idx, :where(.personal-sales-history, .company-sales-history) .csh-items-table tbody tr.is-cancel .csh-idx { color: #b3372c; font-weight: 600; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table tbody tr.is-cancel td:not(.psh-lg-calc), :where(.personal-sales-history, .company-sales-history) .csh-items-table tbody tr.is-cancel td:not(.csh-lg-calc) { background: #fdf7f6; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table tbody tr.is-cancel:hover td:not(.psh-lg-calc), :where(.personal-sales-history, .company-sales-history) .csh-items-table tbody tr.is-cancel:hover td:not(.csh-lg-calc) { background: #fbf0ee; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table tbody tr.is-cancel.is-checked td:not(.psh-lg-calc), :where(.personal-sales-history, .company-sales-history) .csh-items-table tbody tr.is-cancel.is-checked td:not(.csh-lg-calc) { background: #f7ece8; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table tbody tr td.psh-lg-in, :where(.personal-sales-history, .company-sales-history) .csh-items-table tbody tr td.csh-lg-in { position: relative; padding: 10px 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table tbody tr td.psh-lg-calc, :where(.personal-sales-history, .company-sales-history) .csh-items-table tbody tr td.csh-lg-calc { background: var(--sh-calc-bg); font-variant-numeric: tabular-nums; font-weight: 600; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table tbody tr td.psh-lg-calc:not(.psh-sticky), :where(.personal-sales-history, .company-sales-history) .csh-items-table tbody tr td.csh-lg-calc:not(.csh-sticky) { position: relative; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table tbody tr td.psh-lg-calc.is-none, :where(.personal-sales-history, .company-sales-history) .csh-items-table tbody tr td.csh-lg-calc.is-none { color: #b5b6ae; font-weight: 400; }
:where(.personal-sales-history, .company-sales-history) .psh-fee-mark, :where(.personal-sales-history, .company-sales-history) .csh-fee-mark { margin-left: 2px; color: var(--muted); font-size: 10px; font-weight: 400; vertical-align: super; line-height: 0; }
:where(.personal-sales-history, .company-sales-history) .is-fee-unknown { cursor: help; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-field, :where(.personal-sales-history, .company-sales-history) .csh-lg-field { position: relative; display: flex; align-items: center; gap: 4px; height: 30px; border-radius: 5px; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-input, :where(.personal-sales-history, .company-sales-history) .csh-lg-input { flex: 1; min-width: 0; width: 100%; height: 30px; padding: 0 17px 0 6px; border: 1px solid var(--sh-in-line); border-radius: 5px; background: #fff; color: var(--ink); font-size: 13px; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-input.is-number, :where(.personal-sales-history, .company-sales-history) .csh-lg-input.is-number { text-align: right; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-input.is-center, :where(.personal-sales-history, .company-sales-history) .csh-lg-input.is-center { padding: 0 17px; text-align: center; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-input:hover:not(:disabled):not(:focus), :where(.personal-sales-history, .company-sales-history) .csh-lg-input:hover:not(:disabled):not(:focus) { border-color: var(--sh-in-line-hover); }
:where(.personal-sales-history, .company-sales-history) .psh-lg-input:focus, :where(.personal-sales-history, .company-sales-history) .csh-lg-input:focus { border-color: var(--ink); background: #fff; outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-lg-input:disabled, :where(.personal-sales-history, .company-sales-history) .csh-lg-input:disabled { background: #f6f6f2; border-color: #e6e6e0; cursor: not-allowed; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-input[aria-invalid="true"], :where(.personal-sales-history, .company-sales-history) .csh-lg-input[aria-invalid="true"] { border-color: #b3372c; background: #fff5f4; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-input[aria-invalid="true"]:focus, :where(.personal-sales-history, .company-sales-history) .csh-lg-input[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px #b3372c; }
.personal-sales-history input::selection, .personal-sales-history textarea::selection, :where(.personal-sales-history, .company-sales-history) .psh-lg-input::selection, :where(.personal-sales-history, .company-sales-history) .psh-memo-input::selection, .company-sales-history input::selection, .company-sales-history textarea::selection, :where(.personal-sales-history, .company-sales-history) .csh-lg-input::selection, :where(.personal-sales-history, .company-sales-history) .csh-memo-input::selection { color: var(--ink); background: #dcdcd5; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.psh-lg-in .psh-lg-input, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.csh-lg-in .csh-lg-input { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.psh-lg-in.is-editing .psh-lg-input, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.csh-lg-in.is-editing .csh-lg-input { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-editing .psh-lg-view, :where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-editing .psh-lg-go, :where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-editing .psh-lg-edit, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-editing .csh-lg-view, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-editing .csh-lg-go, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-editing .csh-lg-edit { visibility: hidden; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-view, :where(.personal-sales-history, .company-sales-history) .csh-lg-view { display: flex; align-items: center; width: 100%; min-width: 0; height: 100%; padding: 0 18px 0 7px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font-size: 13px; text-align: left; cursor: text; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-view.is-number, :where(.personal-sales-history, .company-sales-history) .csh-lg-view.is-number { justify-content: flex-end; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-view.is-center, :where(.personal-sales-history, .company-sales-history) .csh-lg-view.is-center { justify-content: center; padding: 0 18px; text-align: center; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-view-text, :where(.personal-sales-history, .company-sales-history) .csh-lg-view-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-view.is-empty .psh-lg-view-text, :where(.personal-sales-history, .company-sales-history) .csh-lg-view.is-empty .csh-lg-view-text { color: #b5b6ae; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table .psh-lg-view:disabled, :where(.personal-sales-history, .company-sales-history) .csh-items-table .csh-lg-view:disabled { opacity: 1; color: var(--muted); cursor: not-allowed; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table .psh-lg-view:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-items-table .csh-lg-view:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; background: #fff; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table tbody tr td.psh-lg-in.is-editable, :where(.personal-sales-history, .company-sales-history) .csh-items-table tbody tr td.csh-lg-in.is-editable { cursor: text; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-go, :where(.personal-sales-history, .company-sales-history) .psh-lg-edit, :where(.personal-sales-history, .company-sales-history) .csh-lg-go, :where(.personal-sales-history, .company-sales-history) .csh-lg-edit { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-link .psh-lg-view, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-link .csh-lg-view { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table tbody tr td.psh-lg-in.is-link, :where(.personal-sales-history, .company-sales-history) .csh-items-table tbody tr td.csh-lg-in.is-link { cursor: default; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-link .psh-lg-field, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-link .csh-lg-field { justify-content: center; gap: 2px; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-link .psh-lg-go, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-link .csh-lg-go { display: inline-flex; align-items: center; height: 30px; padding: 0 6px; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-link .psh-lg-go:hover, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-link .csh-lg-go:hover { text-decoration: underline; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-link .psh-lg-go:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-link .csh-lg-go:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 4px; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-link .psh-lg-edit, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-link .csh-lg-edit { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; margin-right: -22px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; opacity: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-link:hover .psh-lg-edit, :where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-link:focus-within .psh-lg-edit, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-link:hover .csh-lg-edit, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-link:focus-within .csh-lg-edit { opacity: 1; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-link .psh-lg-edit:hover:not(:disabled), :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-link .csh-lg-edit:hover:not(:disabled) { color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-link .psh-lg-edit:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-link .csh-lg-edit:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
@media (hover: none) {
    :where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-link .psh-lg-edit, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-link .csh-lg-edit { opacity: 1; }
}
:where(.personal-sales-history, .company-sales-history) .psh-lg-view.is-check, :where(.personal-sales-history, .company-sales-history) .csh-lg-view.is-check { cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-view.is-check .psh-lg-view-text:empty::before, :where(.personal-sales-history, .company-sales-history) .csh-lg-view.is-check .csh-lg-view-text:empty::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 1.5px solid #9a9b94; border-radius: 4px; background: #fff; vertical-align: middle; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-view.is-check.is-on .psh-lg-view-text:empty::before, :where(.personal-sales-history, .company-sales-history) .csh-lg-view.is-check.is-on .csh-lg-view-text:empty::before { content: "✓"; border-color: var(--ink); background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; line-height: 13px; text-align: center; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-view.is-check.is-empty .psh-lg-view-text, :where(.personal-sales-history, .company-sales-history) .csh-lg-view.is-check.is-empty .csh-lg-view-text { color: inherit; }
:where(.personal-sales-history, .company-sales-history) .psh-opt-chip, :where(.personal-sales-history, .company-sales-history) .psh-lg-view-text.is-chip, :where(.personal-sales-history, .company-sales-history) .csh-opt-chip, :where(.personal-sales-history, .company-sales-history) .csh-lg-view-text.is-chip { display: inline-block; max-width: 100%; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-view.is-select, :where(.personal-sales-history, .company-sales-history) .csh-lg-view.is-select { position: relative; padding-right: 24px; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-view.is-select::after, :where(.personal-sales-history, .company-sales-history) .csh-lg-view.is-select::after { content: "▾"; position: absolute; right: 9px; top: 50%; margin-top: -8px; color: #b5b6ae; font-size: 11px; line-height: 16px; opacity: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.psh-lg-in:hover .psh-lg-view.is-select::after, :where(.personal-sales-history, .company-sales-history) .psh-lg-view.is-select:focus-visible::after, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.csh-lg-in:hover .csh-lg-view.is-select::after, :where(.personal-sales-history, .company-sales-history) .csh-lg-view.is-select:focus-visible::after { opacity: 1; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-input[role="combobox"], :where(.personal-sales-history, .company-sales-history) .csh-lg-input[role="combobox"] { padding-right: 26px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23585a60' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 9px center / 11px 11px; cursor: text; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-mismatch .psh-lg-view-text, :where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-mismatch .psh-lg-view.is-empty .psh-lg-view-text, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-mismatch .csh-lg-view-text, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-mismatch .csh-lg-view.is-empty .csh-lg-view-text { color: #b3372c; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-mismatch .psh-lg-view-text, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-mismatch .csh-lg-view-text { text-decoration: underline wavy #e3a49c; text-underline-offset: 3px; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-input.is-date, :where(.personal-sales-history, .company-sales-history) .csh-lg-input.is-date { padding-right: 6px; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-opt-menu, :where(.personal-sales-history, .company-sales-history) .csh-opt-menu { position: fixed; z-index: 126; top: 0; left: 0; max-height: 260px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 28px rgba(20, 20, 20, .16); font-size: 13px; }
:where(.personal-sales-history, .company-sales-history) .psh-opt-menu[hidden], :where(.personal-sales-history, .company-sales-history) .csh-opt-menu[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-opt-menu[aria-busy="true"], :where(.personal-sales-history, .company-sales-history) .csh-opt-menu[aria-busy="true"] { opacity: .6; cursor: progress; }
:where(.personal-sales-history, .company-sales-history) .psh-opt-item, :where(.personal-sales-history, .company-sales-history) .csh-opt-item { display: flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 6px; color: var(--ink); font-size: 13px; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-opt-item:hover, :where(.personal-sales-history, .company-sales-history) .psh-opt-item.is-active, :where(.personal-sales-history, .company-sales-history) .csh-opt-item:hover, :where(.personal-sales-history, .company-sales-history) .csh-opt-item.is-active { background: var(--sh-soft); }
:where(.personal-sales-history, .company-sales-history) .psh-opt-item.is-create, :where(.personal-sales-history, .company-sales-history) .csh-opt-item.is-create { color: var(--ink); font-weight: 600; }
:where(.personal-sales-history, .company-sales-history) .psh-opt-item.is-disabled, :where(.personal-sales-history, .company-sales-history) .csh-opt-item.is-disabled { color: var(--muted); font-weight: 400; cursor: not-allowed; }
:where(.personal-sales-history, .company-sales-history) .psh-opt-empty, :where(.personal-sales-history, .company-sales-history) .csh-opt-empty { padding: 6px; color: var(--muted); font-size: 12.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-tag, :where(.personal-sales-history, .company-sales-history) .csh-lg-tag { position: absolute; top: 0; right: 6px; font-size: 10px; line-height: 10px; font-weight: 600; color: var(--muted); }
:where(.personal-sales-history, .company-sales-history) .psh-lg-tag[hidden], :where(.personal-sales-history, .company-sales-history) .csh-lg-tag[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-tag.is-error, :where(.personal-sales-history, .company-sales-history) .csh-lg-tag.is-error { top: 2px; right: 3px; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #b3372c; color: #fff; font-size: 10px; line-height: 1; z-index: 1; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-bubble, :where(.personal-sales-history, .company-sales-history) .csh-lg-bubble { position: fixed; z-index: 115; top: 0; left: 0; max-width: 280px; padding: 7px 10px; border: 1px solid #e7b9b3; border-radius: 7px; background: #fff; box-shadow: 0 6px 18px rgba(20, 20, 20, .14); color: #b3372c; font-size: 12px; line-height: 1.45; pointer-events: none; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-bubble[hidden], :where(.personal-sales-history, .company-sales-history) .csh-lg-bubble[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-bubble-text, :where(.personal-sales-history, .company-sales-history) .csh-lg-bubble-text { display: block; font-weight: 600; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-bubble-hint, :where(.personal-sales-history, .company-sales-history) .csh-lg-bubble-hint { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table tbody tr td.psh-lg-memo, :where(.personal-sales-history, .company-sales-history) .csh-items-table tbody tr td.csh-lg-memo { padding: 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-memo-view, :where(.personal-sales-history, .company-sales-history) .csh-memo-view { display: block; width: 100%; height: 42px; padding: 3px 18px 3px 7px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink); font-size: 12.5px; line-height: 17px; text-align: left; cursor: text; overflow: hidden; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table .psh-memo-view:disabled, :where(.personal-sales-history, .company-sales-history) .csh-items-table .csh-memo-view:disabled { color: var(--muted); cursor: not-allowed; opacity: 1; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table .psh-memo-view:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-items-table .csh-memo-view:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; background: #fff; }
:where(.personal-sales-history, .company-sales-history) .psh-memo-view.is-error, :where(.personal-sales-history, .company-sales-history) .csh-memo-view.is-error { border-color: #b3372c; background: #fff5f4; }
:where(.personal-sales-history, .company-sales-history) .psh-memo-line, :where(.personal-sales-history, .company-sales-history) .csh-memo-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 34px; overflow: hidden; white-space: pre-wrap; overflow-wrap: anywhere; }
:where(.personal-sales-history, .company-sales-history) .psh-memo-view.is-empty .psh-memo-line::before, :where(.personal-sales-history, .company-sales-history) .csh-memo-view.is-empty .csh-memo-line::before { content: "입력"; color: #b5b6ae; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-memo.is-editing .psh-memo-view, :where(.personal-sales-history, .company-sales-history) .csh-lg-memo.is-editing .csh-memo-view { visibility: hidden; }
:where(.personal-sales-history, .company-sales-history) .psh-memo-edit, :where(.personal-sales-history, .company-sales-history) .csh-memo-edit { position: fixed; z-index: 120; top: 0; left: 0; width: 260px; }
:where(.personal-sales-history, .company-sales-history) .psh-memo-edit[hidden], :where(.personal-sales-history, .company-sales-history) .csh-memo-edit[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-memo-input, :where(.personal-sales-history, .company-sales-history) .csh-memo-input { display: block; width: 100%; min-height: 42px; max-height: 200px; padding: 3px 18px 3px 7px; border: 1px solid var(--ink); border-radius: 5px; background: #fff; color: var(--ink); font: inherit; font-size: 12.5px; line-height: 17px; resize: none; outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-memo-count, :where(.personal-sales-history, .company-sales-history) .csh-memo-count { position: absolute; top: calc(100% + 3px); right: 0; padding: 1px 6px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px var(--sh-in-line); font-size: 10.5px; line-height: 15px; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
:where(.personal-sales-history, .company-sales-history) .psh-memo-tip, :where(.personal-sales-history, .company-sales-history) .csh-memo-tip { position: fixed; z-index: 114; top: 0; left: 0; max-width: 320px; padding: 8px 11px; border-radius: 7px; background: var(--ink); color: #f0f0ec; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
:where(.personal-sales-history, .company-sales-history) .psh-memo-tip[hidden], :where(.personal-sales-history, .company-sales-history) .csh-memo-tip[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-table-tools, :where(.personal-sales-history, .company-sales-history) .csh-table-tools { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }
:where(.personal-sales-history, .company-sales-history) .psh-table-tools .psh-btn, :where(.personal-sales-history, .company-sales-history) .csh-table-tools .csh-btn { height: 34px; }
:where(.personal-sales-history, .company-sales-history) .psh-preset-caret, :where(.personal-sales-history, .company-sales-history) .csh-preset-caret { flex: none; margin-left: auto; color: var(--muted); }
:where(.personal-sales-history, .company-sales-history) .psh-table-tools .psh-gear-btn, :where(.personal-sales-history, .company-sales-history) .csh-table-tools .csh-gear-btn { width: 34px; padding: 0; justify-content: center; color: var(--muted); }
:where(.personal-sales-history, .company-sales-history) .psh-table-tools .psh-gear-btn:hover, :where(.personal-sales-history, .company-sales-history) .csh-table-tools .csh-gear-btn:hover { color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-ledger-notice, :where(.personal-sales-history, .company-sales-history) .csh-ledger-notice { padding: 9px 18px; border-bottom: 1px solid #f0c9c4; background: #fdf0ee; color: #b3372c; font-size: 12.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-ledger-notice[hidden], :where(.personal-sales-history, .company-sales-history) .csh-ledger-notice[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-ledger-hint, :where(.personal-sales-history, .company-sales-history) .csh-ledger-hint { padding: 9px 18px; border-bottom: 1px solid #f0c9c4; background: #fdf0ee; color: #8a2a22; font-size: 12.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-ledger-hint[hidden], :where(.personal-sales-history, .company-sales-history) .csh-ledger-hint[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-check, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-check { width: 15px; height: 15px; margin: 0; accent-color: var(--ink); cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu .psh-set-btn, :where(.personal-sales-history, .company-sales-history) .csh-colmenu .csh-set-btn { height: 30px; padding: 0 12px; font-size: 12.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu .psh-set-primary:not(:disabled), :where(.personal-sales-history, .company-sales-history) .csh-colmenu .csh-set-primary:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu, :where(.personal-sales-history, .company-sales-history) .csh-colmenu { position: fixed; z-index: 125; top: 0; left: 0; display: flex; flex-direction: column; width: 270px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 28px rgba(20, 20, 20, .16); font-size: 13px; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu[hidden], :where(.personal-sales-history, .company-sales-history) .csh-colmenu[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-title, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-title { margin: 0 2px 6px; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-search, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-search { height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 13px; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-search:focus, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-search:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 2px rgba(20, 20, 20, .12); }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-list, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-list { max-height: 216px; margin-top: 6px; padding: 4px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-item, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-item { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 4px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-item span, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-item:hover, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-item:hover { background: var(--sh-soft); }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-item.is-all span, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-item.is-all span { font-weight: 600; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-item.is-blank span, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-item.is-blank span { color: var(--muted); }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-range, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-range { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--sh-row-line); }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-range[hidden], :where(.personal-sales-history, .company-sales-history) .psh-colmenu-range-row[hidden], :where(.personal-sales-history, .company-sales-history) .csh-colmenu-range[hidden], :where(.personal-sales-history, .company-sales-history) .csh-colmenu-range-row[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-range-row, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-range-row { display: flex; align-items: center; gap: 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-select.psh-colmenu-op, :where(.personal-sales-history, .company-sales-history) .csh-select.csh-colmenu-op { flex: 1 1 auto; min-width: 0; height: 32px; font-size: 13px; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-quick, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-quick { flex: none; height: 32px; padding: 0 10px; border: 1px solid #f0c9c4; border-radius: 6px; background: #fdf3f1; color: #b3372c; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-quick[hidden], :where(.personal-sales-history, .company-sales-history) .csh-colmenu-quick[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-num, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-num { flex: 1 1 0; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-num:focus, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-num:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 2px rgba(20, 20, 20, .12); }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-num[hidden], :where(.personal-sales-history, .company-sales-history) .psh-colmenu-tilde[hidden], :where(.personal-sales-history, .company-sales-history) .csh-colmenu-num[hidden], :where(.personal-sales-history, .company-sales-history) .csh-colmenu-tilde[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-list.is-off, :where(.personal-sales-history, .company-sales-history) .psh-colmenu-search.is-off, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-list.is-off, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-search.is-off { opacity: .4; pointer-events: none; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-group, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-group { gap: 2px; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-group.is-month, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-group.is-month { padding-left: 18px; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-item.is-leaf, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-item.is-leaf { padding-left: 42px; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-toggle, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-toggle { flex: none; width: 18px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-toggle:hover, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-toggle:hover { background: var(--sh-soft); color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-glabel, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-glabel { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-glabel span, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-glabel span { font-weight: 600; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-glabel small, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-glabel small { color: var(--muted); font-size: 11.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-note, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-note { min-height: 18px; margin: 4px 2px 0; color: var(--muted); font-size: 11.5px; line-height: 18px; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-foot, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-table-tools .psh-btn.is-loading, :where(.personal-sales-history, .company-sales-history) .csh-table-tools .csh-btn.is-loading { opacity: .55; cursor: progress; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-tools, :where(.personal-sales-history, .company-sales-history) .csh-bulk-tools { display: flex; align-items: flex-end; gap: 10px; flex: 1 1 140px; min-width: 140px; align-self: stretch; margin-top: -10px; padding: 10px 0 8px 14px; border-left: 1px solid var(--line); }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-tools .psh-btn, :where(.personal-sales-history, .company-sales-history) .csh-bulk-tools .csh-btn { flex: none; gap: 6px; height: 34px; min-width: 96px; justify-content: center; padding: 0 12px; border-radius: 6px; background: var(--surface); font-size: 12.5px; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-tools .psh-btn:not(:disabled), :where(.personal-sales-history, .company-sales-history) .csh-bulk-tools .csh-btn:not(:disabled) { border-color: var(--ink); color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-tools .psh-btn:not(:disabled):hover, :where(.personal-sales-history, .company-sales-history) .csh-bulk-tools .csh-btn:not(:disabled):hover { background: var(--sh-soft); }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-ico, :where(.personal-sales-history, .company-sales-history) .csh-bulk-ico { flex: none; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-status, :where(.personal-sales-history, .company-sales-history) .csh-bulk-status { flex: 1 1 0; min-width: 0; height: 34px; line-height: 34px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; font-weight: 600; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-status.is-done, :where(.personal-sales-history, .company-sales-history) .csh-bulk-status.is-done { color: var(--sh-green); }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-status.is-error, :where(.personal-sales-history, .company-sales-history) .csh-bulk-status.is-error { color: #b3372c; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-backdrop, :where(.personal-sales-history, .company-sales-history) .psh-set-backdrop, :where(.personal-sales-history, .company-sales-history) .csh-bulk-backdrop, :where(.personal-sales-history, .company-sales-history) .csh-set-backdrop { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(20, 20, 20, .38); }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-backdrop[hidden], :where(.personal-sales-history, .company-sales-history) .psh-set-backdrop[hidden], :where(.personal-sales-history, .company-sales-history) .csh-bulk-backdrop[hidden], :where(.personal-sales-history, .company-sales-history) .csh-set-backdrop[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk, :where(.personal-sales-history, .company-sales-history) .csh-bulk { width: min(540px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px 16px; border-radius: 10px; background: var(--surface); box-shadow: 0 18px 48px rgba(20, 20, 20, .22); font-size: 13px; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk:focus, :where(.personal-sales-history, .company-sales-history) .psh-set:focus, :where(.personal-sales-history, .company-sales-history) .csh-bulk:focus, :where(.personal-sales-history, .company-sales-history) .csh-set:focus { outline: none; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-head, :where(.personal-sales-history, .company-sales-history) .psh-set-head, :where(.personal-sales-history, .company-sales-history) .csh-bulk-head, :where(.personal-sales-history, .company-sales-history) .csh-set-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-title, :where(.personal-sales-history, .company-sales-history) .psh-set-title, :where(.personal-sales-history, .company-sales-history) .csh-bulk-title, :where(.personal-sales-history, .company-sales-history) .csh-set-title { margin: 0; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-close, :where(.personal-sales-history, .company-sales-history) .csh-bulk-close { width: 28px; height: 28px; border-radius: 6px; background: transparent; color: var(--muted); font-size: 19px; line-height: 1; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-close:hover:not(:disabled), :where(.personal-sales-history, .company-sales-history) .csh-bulk-close:hover:not(:disabled) { background: var(--sh-soft); color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-desc, :where(.personal-sales-history, .company-sales-history) .psh-set-desc, :where(.personal-sales-history, .company-sales-history) .csh-bulk-desc, :where(.personal-sales-history, .company-sales-history) .csh-set-desc { margin: 4px 0 14px; color: var(--muted); font-size: 12.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-desc b, :where(.personal-sales-history, .company-sales-history) .csh-bulk-desc b { color: var(--ink); font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-form, :where(.personal-sales-history, .company-sales-history) .csh-bulk-form { height: 220px; overflow: auto; padding-right: 4px; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-row, :where(.personal-sales-history, .company-sales-history) .csh-bulk-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 4px 10px; margin-bottom: 10px; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-label, :where(.personal-sales-history, .company-sales-history) .csh-bulk-label { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-input, :where(.personal-sales-history, .company-sales-history) .csh-bulk-input { width: 100%; height: 34px; padding: 0 9px; border: 1px solid var(--sh-in-line); border-radius: 6px; background: #fff; color: var(--ink); font-size: 13px; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-input.is-number, :where(.personal-sales-history, .company-sales-history) .csh-bulk-input.is-number { text-align: right; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-input:focus, :where(.personal-sales-history, .company-sales-history) .csh-bulk-input:focus { border-color: var(--ink); background: #fff; outline: none; box-shadow: 0 0 0 2px rgba(20, 20, 20, .12); }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-input:disabled, :where(.personal-sales-history, .company-sales-history) .csh-bulk-input:disabled { background: #f3f3ee; border-color: var(--line); cursor: not-allowed; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-input[aria-invalid="true"], :where(.personal-sales-history, .company-sales-history) .csh-bulk-input[aria-invalid="true"] { border-color: #b3372c; background: #fff5f4; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-actions, :where(.personal-sales-history, .company-sales-history) .psh-set-foot, :where(.personal-sales-history, .company-sales-history) .csh-bulk-actions, :where(.personal-sales-history, .company-sales-history) .csh-set-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-message, :where(.personal-sales-history, .company-sales-history) .psh-set-message, :where(.personal-sales-history, .company-sales-history) .csh-bulk-message, :where(.personal-sales-history, .company-sales-history) .csh-set-message { flex: 1 1 auto; min-width: 0; height: 36px; margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--muted); font-size: 12.5px; line-height: 18px; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-message.is-error, :where(.personal-sales-history, .company-sales-history) .psh-set-message.is-error, :where(.personal-sales-history, .company-sales-history) .csh-bulk-message.is-error, :where(.personal-sales-history, .company-sales-history) .csh-set-message.is-error { color: #b3372c; font-weight: 600; }
:where(.personal-sales-history, .company-sales-history) .psh-set-message.is-done, :where(.personal-sales-history, .company-sales-history) .csh-set-message.is-done { color: var(--sh-green); font-weight: 600; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-actions .psh-btn, :where(.personal-sales-history, .company-sales-history) .csh-bulk-actions .csh-btn { flex: none; height: 36px; }
:where(.personal-sales-history, .company-sales-history) .psh-bulk-apply:not(:disabled), :where(.personal-sales-history, .company-sales-history) .csh-bulk-apply:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
:where(.personal-sales-history, .company-sales-history) .psh-set, :where(.personal-sales-history, .company-sales-history) .csh-set { display: flex; flex-direction: column; width: min(600px, 100%); height: min(640px, calc(100vh - 32px)); padding: 18px 20px 16px; border-radius: 10px; background: var(--surface); box-shadow: 0 18px 48px rgba(20, 20, 20, .22); font-size: 13px; }
:where(.personal-sales-history, .company-sales-history) .psh-set > *, :where(.personal-sales-history, .company-sales-history) .csh-set > * { flex: none; }
:where(.personal-sales-history, .company-sales-history) .psh-set-k, :where(.personal-sales-history, .company-sales-history) .csh-set-k { flex: none; color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-set .psh-set-select, :where(.personal-sales-history, .company-sales-history) .csh-set .csh-set-select { flex: 0 1 260px; min-width: 0; height: 32px; font-size: 13px; }
:where(.personal-sales-history, .company-sales-history) .psh-set .psh-set-btn, :where(.personal-sales-history, .company-sales-history) .csh-set .csh-set-btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-set .psh-set-primary:not(:disabled), :where(.personal-sales-history, .company-sales-history) .csh-set .csh-set-primary:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
:where(.personal-sales-history, .company-sales-history) .psh-set-danger.is-armed:not(:disabled), :where(.personal-sales-history, .company-sales-history) .csh-set-danger.is-armed:not(:disabled) { background: #b3372c; border-color: #b3372c; color: #fff; }
:where(.personal-sales-history, .company-sales-history) .psh-set-input, :where(.personal-sales-history, .company-sales-history) .csh-set-input { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 13px; }
:where(.personal-sales-history, .company-sales-history) .psh-set-input:focus, :where(.personal-sales-history, .company-sales-history) .csh-set-input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 2px rgba(20, 20, 20, .12); }
:where(.personal-sales-history, .company-sales-history) .psh-set-cols-head, :where(.personal-sales-history, .company-sales-history) .csh-set-cols-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 14px 0 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-set-cols-title, :where(.personal-sales-history, .company-sales-history) .csh-set-cols-title { font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-set-cols-title small, :where(.personal-sales-history, .company-sales-history) .csh-set-cols-title small { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
:where(.personal-sales-history, .company-sales-history) .psh-set-count, :where(.personal-sales-history, .company-sales-history) .csh-set-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-set .psh-set-list, :where(.personal-sales-history, .company-sales-history) .csh-set .csh-set-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; overflow: auto; list-style: none; border: 1px solid var(--line); border-radius: 8px; }
:where(.personal-sales-history, .company-sales-history) .psh-set-item, :where(.personal-sales-history, .company-sales-history) .csh-set-item { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 6px; border-bottom: 1px solid var(--sh-row-line); background: var(--surface); }
:where(.personal-sales-history, .company-sales-history) .psh-set-item:last-child, :where(.personal-sales-history, .company-sales-history) .csh-set-item:last-child { border-bottom: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-set-item.is-off-col .psh-set-name, :where(.personal-sales-history, .company-sales-history) .csh-set-item.is-off-col .csh-set-name { color: var(--muted); }
:where(.personal-sales-history, .company-sales-history) .psh-set-item.is-dragging, :where(.personal-sales-history, .company-sales-history) .csh-set-item.is-dragging { opacity: .45; }
:where(.personal-sales-history, .company-sales-history) .psh-set-item.is-frozen, :where(.personal-sales-history, .company-sales-history) .csh-set-item.is-frozen { background: #f1f1ec; }
:where(.personal-sales-history, .company-sales-history) .psh-set-item.psh-set-freeze, :where(.personal-sales-history, .company-sales-history) .csh-set-item.csh-set-freeze { height: 34px; background: #e2e2db; color: var(--ink); font-size: 12px; font-weight: 700; cursor: grab; }
:where(.personal-sales-history, .company-sales-history) .psh-set-freeze-line, :where(.personal-sales-history, .company-sales-history) .csh-set-freeze-line { flex: 1 1 auto; height: 2px; border-radius: 1px; background: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-set-freeze-name, :where(.personal-sales-history, .company-sales-history) .csh-set-freeze-name { flex: none; }
:where(.personal-sales-history, .company-sales-history) .psh-set-item.drop-before, :where(.personal-sales-history, .company-sales-history) .csh-set-item.drop-before { box-shadow: inset 0 2px 0 var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-set-item.drop-after, :where(.personal-sales-history, .company-sales-history) .csh-set-item.drop-after { box-shadow: inset 0 -2px 0 var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-set-handle, :where(.personal-sales-history, .company-sales-history) .csh-set-handle { flex: none; width: 16px; color: #b5b6ae; font-size: 14px; text-align: center; cursor: grab; user-select: none; }
:where(.personal-sales-history, .company-sales-history) .psh-set-vis, :where(.personal-sales-history, .company-sales-history) .csh-set-vis { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--ink); cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-set-name, :where(.personal-sales-history, .company-sales-history) .csh-set-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-set-rename-input, :where(.personal-sales-history, .company-sales-history) .csh-set-rename-input { height: 28px; }
:where(.personal-sales-history, .company-sales-history) .psh-set-tag, :where(.personal-sales-history, .company-sales-history) .csh-set-tag { flex: none; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 11px; line-height: 18px; }
:where(.personal-sales-history, .company-sales-history) .psh-set-tag.is-input, :where(.personal-sales-history, .company-sales-history) .csh-set-tag.is-input { border-style: dashed; color: #55575d; }
:where(.personal-sales-history, .company-sales-history) .psh-set-tools, :where(.personal-sales-history, .company-sales-history) .csh-set-tools { display: flex; flex: none; gap: 4px; margin-left: auto; }
:where(.personal-sales-history, .company-sales-history) .psh-set-mini, :where(.personal-sales-history, .company-sales-history) .csh-set-mini { min-width: 28px; height: 26px; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 12px; }
:where(.personal-sales-history, .company-sales-history) .psh-set-mini:hover:not(:disabled), :where(.personal-sales-history, .company-sales-history) .csh-set-mini:hover:not(:disabled) { border-color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-set-mini:disabled, :where(.personal-sales-history, .company-sales-history) .csh-set-mini:disabled { opacity: .35; }
:where(.personal-sales-history, .company-sales-history) .psh-set-add, :where(.personal-sales-history, .company-sales-history) .csh-set-add { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
:where(.personal-sales-history, .company-sales-history) .psh-set-add-opts, :where(.personal-sales-history, .company-sales-history) .csh-set-add-opts { margin-top: 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-set-add-opts[hidden], :where(.personal-sales-history, .company-sales-history) .csh-set-add-opts[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-set .psh-set-add .psh-set-add-type, :where(.personal-sales-history, .company-sales-history) .csh-set .csh-set-add .csh-set-add-type { flex: none; width: 128px; }
:where(.personal-sales-history, .company-sales-history) .psh-set-add-opts .psh-set-input, :where(.personal-sales-history, .company-sales-history) .csh-set-add-opts .csh-set-input { flex: 1 1 auto; }
:where(.personal-sales-history, .company-sales-history) .psh-set-add .psh-set-k, :where(.personal-sales-history, .company-sales-history) .csh-set-add .csh-set-k { min-width: 46px; }
:where(.personal-sales-history, .company-sales-history) .psh-select.psh-set-type, :where(.personal-sales-history, .company-sales-history) .csh-select.csh-set-type { flex: none; width: 96px; min-width: 0; height: 26px; padding-left: 8px; border-radius: 5px; font-size: 12px; --select-arrow-right: 8px; --select-arrow-pad: 24px; }
:where(.personal-sales-history, .company-sales-history) .psh-set-mini.is-open, :where(.personal-sales-history, .company-sales-history) .csh-set-mini.is-open { border-color: var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-set-opts, :where(.personal-sales-history, .company-sales-history) .csh-set-opts { padding: 6px 10px 10px 40px; border-bottom: 1px solid var(--sh-row-line); background: #f7f7f3; list-style: none; }
:where(.personal-sales-history, .company-sales-history) .psh-set-opt-list, :where(.personal-sales-history, .company-sales-history) .csh-set-opt-list { margin: 0 0 6px; padding: 0; list-style: none; }
:where(.personal-sales-history, .company-sales-history) .psh-set-opt, :where(.personal-sales-history, .company-sales-history) .csh-set-opt { display: flex; align-items: center; gap: 8px; min-height: 32px; }
:where(.personal-sales-history, .company-sales-history) .psh-set-opt .psh-opt-chip, :where(.personal-sales-history, .company-sales-history) .csh-set-opt .csh-opt-chip { max-width: 220px; }
:where(.personal-sales-history, .company-sales-history) .psh-set-opt .psh-set-rename-input, :where(.personal-sales-history, .company-sales-history) .csh-set-opt .csh-set-rename-input { flex: 1 1 auto; min-width: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-set-opt-uses, :where(.personal-sales-history, .company-sales-history) .csh-set-opt-uses { flex: 1 1 auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-set-opt-empty, :where(.personal-sales-history, .company-sales-history) .csh-set-opt-empty { padding: 4px 0; color: var(--muted); font-size: 12.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-set-opt-add, :where(.personal-sales-history, .company-sales-history) .csh-set-opt-add { display: flex; gap: 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-set-opt-add .psh-set-input, :where(.personal-sales-history, .company-sales-history) .csh-set-opt-add .csh-set-input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1239px) {
    :where(.personal-sales-history, .company-sales-history) .psh-sum-row, :where(.personal-sales-history, .company-sales-history) .csh-sum-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    :where(.personal-sales-history, .company-sales-history) .psh-value, :where(.personal-sales-history, .company-sales-history) .csh-value { font-size: clamp(16px, 11cqw, 20px); }
}
@media (max-width: 800px) {
    .personal-sales-history, .company-sales-history { font-size: 13px; }
    .workspace-content.personal-sales-history, .workspace-content.company-sales-history { padding: 20px 16px 20px; }
    :where(.personal-sales-history, .company-sales-history) .psh-sum-row, :where(.personal-sales-history, .company-sales-history) .csh-sum-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    :where(.personal-sales-history, .company-sales-history) .psh-cancel-cell, :where(.personal-sales-history, .company-sales-history) .csh-cancel-cell { grid-column: 1 / -1; }
    :where(.personal-sales-history, .company-sales-history) .psh-value, :where(.personal-sales-history, .company-sales-history) .csh-value { font-size: 18px; }
    :where(.personal-sales-history, .company-sales-history) .psh-filter-bar, :where(.personal-sales-history, .company-sales-history) .psh-foot, :where(.personal-sales-history, .company-sales-history) .csh-filter-bar, :where(.personal-sales-history, .company-sales-history) .csh-foot { padding-inline: 14px; }
    :where(.personal-sales-history, .company-sales-history) .psh-agg, :where(.personal-sales-history, .company-sales-history) .csh-agg { height: auto; margin-top: 0; flex-wrap: wrap; row-gap: 4px; white-space: normal; }
    :where(.personal-sales-history, .company-sales-history) .psh-agg-group, :where(.personal-sales-history, .company-sales-history) .csh-agg-group { flex-wrap: wrap; row-gap: 2px; }
    :where(.personal-sales-history, .company-sales-history) .psh-agg.is-empty, :where(.personal-sales-history, .company-sales-history) .csh-agg.is-empty { display: none; }
    :where(.personal-sales-history, .company-sales-history) .psh-view-strip, :where(.personal-sales-history, .company-sales-history) .csh-view-strip { padding-inline: 14px; }
    :where(.personal-sales-history, .company-sales-history) .psh-strip-btns, :where(.personal-sales-history, .company-sales-history) .csh-strip-btns { margin-left: 0; width: 100%; padding-top: 6px; }
    :where(.personal-sales-history, .company-sales-history) .psh-table-tools, :where(.personal-sales-history, .company-sales-history) .csh-table-tools { width: 100%; justify-content: flex-end; }
    :where(.personal-sales-history, .company-sales-history) .psh-ledger-notice, :where(.personal-sales-history, .company-sales-history) .csh-ledger-notice { padding-inline: 14px; }
    :where(.personal-sales-history, .company-sales-history) .psh-ledger-hint, :where(.personal-sales-history, .company-sales-history) .csh-ledger-hint { padding-inline: 14px; }
    :where(.personal-sales-history, .company-sales-history) .psh-bulk-tools, :where(.personal-sales-history, .company-sales-history) .csh-bulk-tools { align-self: auto; margin-top: 0; padding: 0 0 8px; border-left: 0; }
    :where(.personal-sales-history, .company-sales-history) .psh-sync-group, :where(.personal-sales-history, .company-sales-history) .csh-sync-group { margin-left: 0; }
    :where(.personal-sales-history, .company-sales-history) .psh-sync, :where(.personal-sales-history, .company-sales-history) .csh-sync { align-items: flex-start; text-align: left; }
    :where(.personal-sales-history, .company-sales-history) .psh-sync-line, :where(.personal-sales-history, .company-sales-history) .csh-sync-line { justify-content: flex-start; }
    :where(.personal-sales-history, .company-sales-history) .psh-sync-group.has-new, :where(.personal-sales-history, .company-sales-history) .csh-sync-group.has-new { margin-left: auto; }
    :where(.personal-sales-history, .company-sales-history) .psh-pen-note, :where(.personal-sales-history, .company-sales-history) .csh-pen-note { margin-left: 0; flex-basis: 100%; }
    :where(.personal-sales-history, .company-sales-history) .psh-list-panel, :where(.personal-sales-history, .company-sales-history) .csh-list-panel { min-height: 520px; }
}
@media (max-width: 520px) {
    :where(.personal-sales-history, .company-sales-history) .psh-sum-row, :where(.personal-sales-history, .company-sales-history) .csh-sum-row { grid-template-columns: minmax(0, 1fr); }
    :where(.personal-sales-history, .company-sales-history) .psh-cell, :where(.personal-sales-history, .company-sales-history) .csh-cell { height: 104px; padding: 10px 14px 9px; }
    :where(.personal-sales-history, .company-sales-history) .psh-search, :where(.personal-sales-history, .company-sales-history) .csh-search { width: 100%; max-width: none; flex: 1 1 100%; }
    :where(.personal-sales-history, .company-sales-history) .psh-filter-bar .psh-seg, :where(.personal-sales-history, .company-sales-history) .csh-filter-bar .csh-seg { width: 100%; }
    :where(.personal-sales-history, .company-sales-history) .psh-period, :where(.personal-sales-history, .company-sales-history) .csh-period { width: 100%; }
    :where(.personal-sales-history, .company-sales-history) .psh-period .psh-seg, :where(.personal-sales-history, .company-sales-history) .csh-period .csh-seg { flex: 1; width: auto; min-width: 0; }
    :where(.personal-sales-history, .company-sales-history) .psh-filter-bar .psh-select, :where(.personal-sales-history, .company-sales-history) .csh-filter-bar .csh-select { flex: 1 1 140px; }
    :where(.personal-sales-history, .company-sales-history) .psh-filter-bar .psh-seg > button, :where(.personal-sales-history, .company-sales-history) .csh-filter-bar .csh-seg > button { flex: 1; padding-inline: 6px; }
    :where(.personal-sales-history, .company-sales-history) .psh-dates, :where(.personal-sales-history, .company-sales-history) .csh-dates { width: 100%; }
    :where(.personal-sales-history, .company-sales-history) .psh-dates .psh-date-btn, :where(.personal-sales-history, .company-sales-history) .csh-dates .csh-date-btn { flex: 1; min-width: 0; }
    :where(.personal-sales-history, .company-sales-history) .psh-sync-group, :where(.personal-sales-history, .company-sales-history) .csh-sync-group { width: 100%; }
    :where(.personal-sales-history, .company-sales-history) .psh-sync, :where(.personal-sales-history, .company-sales-history) .csh-sync { flex: 1; }
    :where(.personal-sales-history, .company-sales-history) .psh-sync-bar, :where(.personal-sales-history, .company-sales-history) .csh-sync-bar { width: 96px; }
    :where(.personal-sales-history, .company-sales-history) .psh-sync-note, :where(.personal-sales-history, .company-sales-history) .csh-sync-note { width: auto; max-width: none; }
    :where(.personal-sales-history, .company-sales-history) .psh-new-note, :where(.personal-sales-history, .company-sales-history) .csh-new-note { flex: 1 1 100%; margin-right: 0; }
    :where(.personal-sales-history, .company-sales-history) .psh-new-text, :where(.personal-sales-history, .company-sales-history) .csh-new-text { white-space: normal; }
    :where(.personal-sales-history, .company-sales-history) .psh-view-tab, :where(.personal-sales-history, .company-sales-history) .csh-view-tab { padding: 9px 12px; font-size: 13px; }
    :where(.personal-sales-history, .company-sales-history) .psh-tip, :where(.personal-sales-history, .company-sales-history) .csh-tip { width: min(290px, calc(100vw - 48px)); left: auto; right: -10px; }
    :where(.personal-sales-history, .company-sales-history) .psh-filter-sep, :where(.personal-sales-history, .company-sales-history) .csh-filter-sep { display: none; }
    :where(.personal-sales-history, .company-sales-history) .psh-bulk-row, :where(.personal-sales-history, .company-sales-history) .csh-bulk-row { grid-template-columns: minmax(0, 1fr); }
    :where(.personal-sales-history, .company-sales-history) .psh-set-cols-title small, :where(.personal-sales-history, .company-sales-history) .csh-set-cols-title small { display: block; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .personal-sales-history *, .personal-sales-history *::before, .personal-sales-history *::after, .company-sales-history *, .company-sales-history *::before, .company-sales-history *::after { transition: none !important; animation: none !important; }
}
:where(.personal-sales-history, .company-sales-history) .psh-export-open .psh-preset-caret, :where(.personal-sales-history, .company-sales-history) .csh-export-open .csh-preset-caret { margin-left: -2px; }
:where(.personal-sales-history, .company-sales-history) .psh-export-open[aria-busy="true"], :where(.personal-sales-history, .company-sales-history) .csh-export-open[aria-busy="true"] { cursor: progress; }
:where(.personal-sales-history, .company-sales-history) .psh-set-backdrop.psh-export-backdrop, :where(.personal-sales-history, .company-sales-history) .csh-set-backdrop.csh-export-backdrop { z-index: 131; }
:where(.personal-sales-history, .company-sales-history) .psh-export, :where(.personal-sales-history, .company-sales-history) .csh-export { display: flex; flex-direction: column; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px 20px 16px; border-radius: 10px; background: var(--surface); box-shadow: 0 18px 48px rgba(20, 20, 20, .22); font-size: 13px; }
:where(.personal-sales-history, .company-sales-history) .psh-export:focus, :where(.personal-sales-history, .company-sales-history) .csh-export:focus { outline: none; }
:where(.personal-sales-history, .company-sales-history) .psh-export > *, :where(.personal-sales-history, .company-sales-history) .csh-export > * { flex: none; }
:where(.personal-sales-history, .company-sales-history) .psh-export-target, :where(.personal-sales-history, .company-sales-history) .csh-export-target { margin: 4px 0 12px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
:where(.personal-sales-history, .company-sales-history) .psh-export-target b, :where(.personal-sales-history, .company-sales-history) .csh-export-target b { color: var(--ink); font-variant-numeric: tabular-nums; }
:where(.personal-sales-history, .company-sales-history) .psh-export-kinds, :where(.personal-sales-history, .company-sales-history) .csh-export-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-export-kinds[hidden], :where(.personal-sales-history, .company-sales-history) .csh-export-kinds[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-export-kind, :where(.personal-sales-history, .company-sales-history) .csh-export-kind { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-export-kind:hover, :where(.personal-sales-history, .company-sales-history) .csh-export-kind:hover { border-color: #b5b6ae; }
:where(.personal-sales-history, .company-sales-history) .psh-export-kind:has(input:checked), :where(.personal-sales-history, .company-sales-history) .csh-export-kind:has(input:checked) { border-color: var(--ink); background: var(--sh-soft); box-shadow: inset 0 0 0 1px var(--ink); }
:where(.personal-sales-history, .company-sales-history) .psh-export-kind:has(input:focus-visible), :where(.personal-sales-history, .company-sales-history) .csh-export-kind:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
:where(.personal-sales-history, .company-sales-history) .psh-export-kind input, :where(.personal-sales-history, .company-sales-history) .csh-export-kind input { flex: none; width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-export-kind-text, :where(.personal-sales-history, .company-sales-history) .csh-export-kind-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-export-kind-name, :where(.personal-sales-history, .company-sales-history) .csh-export-kind-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-export-kind-sub, :where(.personal-sales-history, .company-sales-history) .csh-export-kind-sub { color: var(--muted); font-size: 12px; line-height: 1.4; }
:where(.personal-sales-history, .company-sales-history) .psh-export-panel[hidden], :where(.personal-sales-history, .company-sales-history) .csh-export-panel[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-export-excel, :where(.personal-sales-history, .company-sales-history) .csh-export-excel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-export-excel .psh-set-cols-head, :where(.personal-sales-history, .company-sales-history) .csh-export-excel .csh-set-cols-head { margin: 0 0 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-export .psh-export-list, :where(.personal-sales-history, .company-sales-history) .csh-export .csh-export-list { flex: 1 1 auto; min-height: 120px; max-height: min(340px, calc(100vh - 380px)); margin: 0; padding: 0; overflow: auto; list-style: none; border: 1px solid var(--line); border-radius: 8px; }
:where(.personal-sales-history, .company-sales-history) .psh-export-col-tools, :where(.personal-sales-history, .company-sales-history) .csh-export-col-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
:where(.personal-sales-history, .company-sales-history) .psh-export .psh-set-btn, :where(.personal-sales-history, .company-sales-history) .csh-export .csh-set-btn { height: 30px; padding: 0 10px; font-size: 12.5px; }
:where(.personal-sales-history, .company-sales-history) .psh-export-hint, :where(.personal-sales-history, .company-sales-history) .csh-export-hint { margin-left: auto; color: var(--muted); font-size: 12px; }
:where(.personal-sales-history, .company-sales-history) .psh-export-receipt, :where(.personal-sales-history, .company-sales-history) .csh-export-receipt { display: flex; flex-direction: column; gap: 10px; }
:where(.personal-sales-history, .company-sales-history) .psh-export-tax, :where(.personal-sales-history, .company-sales-history) .csh-export-tax { margin: 0; padding: 0; border: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-export-tax-legend, :where(.personal-sales-history, .company-sales-history) .csh-export-tax-legend { margin-bottom: 6px; padding: 0; font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-export-tax-item, :where(.personal-sales-history, .company-sales-history) .csh-export-tax-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-export-tax-item + .psh-export-tax-item, :where(.personal-sales-history, .company-sales-history) .csh-export-tax-item + .csh-export-tax-item { margin-top: 6px; }
:where(.personal-sales-history, .company-sales-history) .psh-export-tax-item:has(input:checked), :where(.personal-sales-history, .company-sales-history) .csh-export-tax-item:has(input:checked) { border-color: var(--ink); background: var(--sh-soft); }
:where(.personal-sales-history, .company-sales-history) .psh-export-tax-item input, :where(.personal-sales-history, .company-sales-history) .csh-export-tax-item input { flex: none; width: 15px; height: 15px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-export-tax-text, :where(.personal-sales-history, .company-sales-history) .csh-export-tax-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-export-tax-text small, :where(.personal-sales-history, .company-sales-history) .csh-export-tax-text small { color: var(--muted); font-size: 12px; line-height: 1.4; }
:where(.personal-sales-history, .company-sales-history) .psh-export-tax-note, :where(.personal-sales-history, .company-sales-history) .csh-export-tax-note { min-height: 18px; margin: 0; color: var(--muted); font-size: 12px; }
:where(.personal-sales-history, .company-sales-history) .psh-export-tax-note.is-error, :where(.personal-sales-history, .company-sales-history) .csh-export-tax-note.is-error { color: #b3372c; font-weight: 600; }
:where(.personal-sales-history, .company-sales-history) .psh-export-notes, :where(.personal-sales-history, .company-sales-history) .csh-export-notes { margin: 0; padding: 10px 12px 10px 28px; border-radius: 8px; background: #f7f7f3; color: #55575d; font-size: 12.5px; line-height: 1.55; }
:where(.personal-sales-history, .company-sales-history) .psh-export-notes li + li, :where(.personal-sales-history, .company-sales-history) .csh-export-notes li + li { margin-top: 2px; }
:where(.personal-sales-history, .company-sales-history) .psh-export-notes .is-warn, :where(.personal-sales-history, .company-sales-history) .csh-export-notes .is-warn { color: var(--ink); font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-export .psh-set-foot, :where(.personal-sales-history, .company-sales-history) .csh-export .csh-set-foot { margin-top: 14px; }
:where(.personal-sales-history, .company-sales-history) .psh-export-download, :where(.personal-sales-history, .company-sales-history) .csh-export-download { min-width: 96px; justify-content: center; }
:where(.personal-sales-history, .company-sales-history) .psh-export .psh-export-download:not(:disabled), :where(.personal-sales-history, .company-sales-history) .csh-export .csh-export-download:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
:where(.personal-sales-history, .company-sales-history) .psh-export .psh-export-download[aria-busy="true"], :where(.personal-sales-history, .company-sales-history) .csh-export .csh-export-download[aria-busy="true"] { opacity: .7; cursor: progress; }
@media (max-width: 520px) {
    :where(.personal-sales-history, .company-sales-history) .psh-export, :where(.personal-sales-history, .company-sales-history) .csh-export { padding: 16px 14px 14px; }
    :where(.personal-sales-history, .company-sales-history) .psh-export-kinds, :where(.personal-sales-history, .company-sales-history) .csh-export-kinds { grid-template-columns: minmax(0, 1fr); }
    :where(.personal-sales-history, .company-sales-history) .psh-export .psh-export-list, :where(.personal-sales-history, .company-sales-history) .csh-export .csh-export-list { max-height: min(300px, calc(100vh - 420px)); }
    :where(.personal-sales-history, .company-sales-history) .psh-export-hint, :where(.personal-sales-history, .company-sales-history) .csh-export-hint { flex-basis: 100%; margin-left: 0; }
    :where(.personal-sales-history, .company-sales-history) .psh-export .psh-set-foot, :where(.personal-sales-history, .company-sales-history) .csh-export .csh-set-foot { flex-wrap: wrap; }
    :where(.personal-sales-history, .company-sales-history) .psh-export .psh-set-foot .psh-set-message, :where(.personal-sales-history, .company-sales-history) .csh-export .csh-set-foot .csh-set-message { flex-basis: 100%; height: auto; min-height: 18px; }
    :where(.personal-sales-history, .company-sales-history) .psh-export .psh-set-foot .psh-btn, :where(.personal-sales-history, .company-sales-history) .csh-export .csh-set-foot .csh-btn { flex: 1 1 0; justify-content: center; }
}
.personal-sales-history, .company-sales-history { --sh-grid-line: #1a73e8; --sh-grid-fill: rgba(26, 115, 232, .1); --sh-grid-head: #dde7f8; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td { cursor: default; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.psh-col-check, :where(.personal-sales-history, .company-sales-history) .psh-table tbody td.psh-empty, :where(.personal-sales-history, .company-sales-history) .psh-table tbody td.psh-col-fill, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.csh-col-check, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.csh-empty, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.csh-col-fill { cursor: default; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.psh-col-idx, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.csh-col-idx { cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-table thead th.psh-col-idx, :where(.personal-sales-history, .company-sales-history) .csh-table thead th.csh-col-idx { cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.is-gsel, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.is-gsel { --sh-gt: 0px; --sh-gr: 0px; --sh-gb: 0px; --sh-gl: 0px; background-image: linear-gradient(var(--sh-grid-fill), var(--sh-grid-fill)) !important; box-shadow: inset 0 var(--sh-gt) 0 0 var(--sh-grid-line), inset calc(-1 * var(--sh-gr)) 0 0 0 var(--sh-grid-line), inset 0 calc(-1 * var(--sh-gb)) 0 0 var(--sh-grid-line), inset var(--sh-gl) 0 0 0 var(--sh-grid-line), inset -1px 0 0 var(--sh-body-vline) !important; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.is-gsel.g-t, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.is-gsel.g-t { --sh-gt: 1px; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.is-gsel.g-r, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.is-gsel.g-r { --sh-gr: 1px; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.is-gsel.g-b, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.is-gsel.g-b { --sh-gb: 1px; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.is-gsel.g-l, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.is-gsel.g-l { --sh-gl: 1px; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.is-gact, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.is-gact { background-image: none !important; box-shadow: inset 0 0 0 2px var(--sh-grid-line) !important; }
:where(.personal-sales-history, .company-sales-history) .psh-table thead th.is-gcol, :where(.personal-sales-history, .company-sales-history) .psh-table thead th.is-gall, :where(.personal-sales-history, .company-sales-history) .csh-table thead th.is-gcol, :where(.personal-sales-history, .company-sales-history) .csh-table thead th.is-gall { background: var(--sh-grid-head) !important; color: var(--ink); box-shadow: inset -1px 0 0 var(--sh-head-vline), inset 0 -2px 0 var(--sh-grid-line) !important; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.is-grow, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.is-grow { background-color: var(--sh-grid-head) !important; color: var(--sh-grid-line) !important; font-weight: 700; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table tbody tr td.psh-lg-in.is-editable, :where(.personal-sales-history, .company-sales-history) .csh-items-table tbody tr td.csh-lg-in.is-editable { cursor: default; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-view, :where(.personal-sales-history, .company-sales-history) .psh-memo-view, :where(.personal-sales-history, .company-sales-history) .psh-lg-view.is-select, :where(.personal-sales-history, .company-sales-history) .csh-lg-view, :where(.personal-sales-history, .company-sales-history) .csh-memo-view, :where(.personal-sales-history, .company-sales-history) .csh-lg-view.is-select { cursor: default; }
:where(.personal-sales-history, .company-sales-history) .psh-lg-view.is-check .psh-lg-view-text, :where(.personal-sales-history, .company-sales-history) .csh-lg-view.is-check .csh-lg-view-text { cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-link .psh-lg-edit, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-link .csh-lg-edit { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.is-link .psh-lg-go, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.is-link .csh-lg-go { cursor: default; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.psh-col-check, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.csh-col-check { user-select: none; -webkit-user-select: none; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.psh-lg-in.is-editing .psh-lg-field, :where(.personal-sales-history, .company-sales-history) .psh-items-table td.psh-lg-in .psh-lg-field:has(.is-armed), :where(.personal-sales-history, .company-sales-history) .csh-items-table td.csh-lg-in.is-editing .csh-lg-field, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.csh-lg-in .csh-lg-field:has(.is-armed) { position: static; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.psh-lg-in.is-editing .psh-lg-input, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.csh-lg-in.is-editing .csh-lg-input { padding: 0 24px 0 13px; border: 0; border-radius: 0; background-color: #fff; box-shadow: inset 0 0 0 2px var(--sh-grid-line); outline: none; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.psh-lg-in.is-editing .psh-lg-input.is-center, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.csh-lg-in.is-editing .csh-lg-input.is-center { padding: 0 24px; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.psh-lg-in.is-editing .psh-lg-input[aria-invalid="true"], :where(.personal-sales-history, .company-sales-history) .csh-items-table td.csh-lg-in.is-editing .csh-lg-input[aria-invalid="true"] { background-color: #fff5f4; box-shadow: inset 0 0 0 2px #b3372c; }
:where(.personal-sales-history, .company-sales-history) .psh-items-table td.psh-lg-in:not(.is-editing) .psh-lg-input.is-armed, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.csh-lg-in:not(.is-editing) .csh-lg-input.is-armed { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
:where(.personal-sales-history, .company-sales-history) .psh-memo-edit.is-armed, :where(.personal-sales-history, .company-sales-history) .csh-memo-edit.is-armed { opacity: 0; pointer-events: none; }
:where(.personal-sales-history, .company-sales-history) .psh-memo-edit.is-armed .psh-memo-count, :where(.personal-sales-history, .company-sales-history) .csh-memo-edit.is-armed .csh-memo-count { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-memo-edit .psh-memo-input:focus-visible, :where(.personal-sales-history, .company-sales-history) .psh-items-table td.psh-lg-in .psh-lg-input:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-memo-edit .csh-memo-input:focus-visible, :where(.personal-sales-history, .company-sales-history) .csh-items-table td.csh-lg-in .csh-lg-input:focus-visible { outline: none; }
:where(.personal-sales-history, .company-sales-history) .psh-memo-input, :where(.personal-sales-history, .company-sales-history) .csh-memo-input { min-height: 30px; padding: 10px 24px 10px 14px; border: 0; border-radius: 0; box-shadow: inset 0 0 0 2px var(--sh-grid-line); }
:where(.personal-sales-history, .company-sales-history) .psh-grid-sink, :where(.personal-sales-history, .company-sales-history) .csh-grid-sink { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; resize: none; overflow: hidden; pointer-events: none; }
:where(.personal-sales-history, .company-sales-history) .psh-grid-handle, :where(.personal-sales-history, .company-sales-history) .csh-grid-handle { position: fixed; z-index: 30; top: 0; left: 0; box-sizing: border-box; width: 10px; height: 10px; border: 1.5px solid #fff; border-radius: 50%; background: #1a73e8; cursor: crosshair; }
:where(.personal-sales-history, .company-sales-history) .psh-grid-handle[hidden], :where(.personal-sales-history, .company-sales-history) .csh-grid-handle[hidden] { display: none; }
:where(.personal-sales-history, .company-sales-history) .psh-grid-handle::before, :where(.personal-sales-history, .company-sales-history) .csh-grid-handle::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.workspace-content.personal-sales-history.is-gfilling, .workspace-content.personal-sales-history.is-gfilling *, .workspace-content.company-sales-history.is-gfilling, .workspace-content.company-sales-history.is-gfilling * { cursor: crosshair !important; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.is-gfill, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.is-gfill { --sh-ft: none; --sh-fr: none; --sh-fb: none; --sh-fl: none; background-image: var(--sh-ft), var(--sh-fr), var(--sh-fb), var(--sh-fl) !important; background-position: left top, calc(100% - 1px) top, left bottom, left top !important; background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100% !important; background-repeat: no-repeat !important; }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.is-gfill.f-t, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.is-gfill.f-t { --sh-ft: repeating-linear-gradient(90deg, #7d7e78 0 4px, transparent 4px 7px); }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.is-gfill.f-b, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.is-gfill.f-b { --sh-fb: repeating-linear-gradient(90deg, #7d7e78 0 4px, transparent 4px 7px); }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.is-gfill.f-l, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.is-gfill.f-l { --sh-fl: repeating-linear-gradient(180deg, #7d7e78 0 4px, transparent 4px 7px); }
:where(.personal-sales-history, .company-sales-history) .psh-table tbody td.is-gfill.f-r, :where(.personal-sales-history, .company-sales-history) .csh-table tbody td.is-gfill.f-r { --sh-fr: repeating-linear-gradient(180deg, #7d7e78 0 4px, transparent 4px 7px); }
:where(.personal-sales-history, .company-sales-history) .psh-grid-note, :where(.personal-sales-history, .company-sales-history) .csh-grid-note { min-width: 0; margin-left: 12px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
:where(.personal-sales-history, .company-sales-history) .psh-grid-note.is-error, :where(.personal-sales-history, .company-sales-history) .csh-grid-note.is-error { color: #b3372c; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-sort, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-sort { display: flex; gap: 4px; margin: 0 0 8px; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-sortbtn, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-sortbtn { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 30px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 12.5px; white-space: nowrap; cursor: pointer; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-sortbtn:hover:not(:disabled), :where(.personal-sales-history, .company-sales-history) .csh-colmenu-sortbtn:hover:not(:disabled) { background: var(--sh-soft); }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-sortbtn.is-on, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-sortbtn.is-on { border-color: var(--ink); background: var(--sh-soft); font-weight: 700; }
.personal-sales-history .psh-colmenu-sortbtn:disabled, :where(.personal-sales-history, .company-sales-history) .psh-colmenu-sortbtn:disabled, .company-sales-history .csh-colmenu-sortbtn:disabled, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-sortbtn:disabled { opacity: 1; color: #b5b6ae; cursor: default; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-sortmark, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-sortmark { font-size: 10px; }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-sortmark.is-asc, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-sortmark.is-asc { color: var(--sh-up); }
:where(.personal-sales-history, .company-sales-history) .psh-colmenu-sortmark.is-desc, :where(.personal-sales-history, .company-sales-history) .csh-colmenu-sortmark.is-desc { color: var(--sh-down); }
:where(.personal-sales-history, .company-sales-history) .psh-run-stop, :where(.personal-sales-history, .company-sales-history) .csh-run-stop { gap: 5px; }
:where(.personal-sales-history, .company-sales-history) .psh-run-stop svg, :where(.personal-sales-history, .company-sales-history) .csh-run-stop svg { flex-shrink: 0; }
:where(.personal-sales-history, .company-sales-history) .psh-sync-btn, :where(.personal-sales-history, .company-sales-history) .csh-sync-btn { min-width: 98px; }
/* 일괄 입찰기간 셀렉트 폭 고정(2026-10-27): 기본값 글자(개인 180일 / 입점 무기한)가 달라도 두 화면 같은 폭 */
:where(.personal-ilpan, .company-ilpan) :is(#pi-bulk-deadline, #ci-bulk-deadline) { width: 84px; }

/* ── 페이지 사이 공통 작은 요소(2026-10-27 사용자 승인): 보관판매·일반판매 기준으로 발송내역·판매내역을 맞춘다.
   판매내역 규칙은 바깥 칸을 :is로 한 단계 높여, 페이지의 'button { font: inherit }'·기존 규칙보다 우선한다.
   대상 = 안내 상자 글자, 표 머리글, 작은 버튼, 꼬리 줄, 창 틀. 조작 막대 배치·목록 탭 모양·진한 큰 버튼은 화면 기능에 맞춘 것이라 그대로. ── */
/* 안내 상자 글자: 일반판매·발송내역과 같은 30% 회색(강조 글자는 진하게) — 보관판매도 같은 값으로 */
:where(.personal-bopan, .company-bopan) :is(.pb-howto, .cb-howto) { color: oklch(30% .006 271); }
:where(.personal-bopan, .company-bopan) :is(.pb-howto, .cb-howto) strong { color: var(--ink); font-weight: 700; }
/* 판매내역 표 머리글: 바탕 98%·11px(보관·일반판매 등록 표 머리글과 같음). 계산 열 머리글 색(띠)은 그대로 */
:is(.personal-sales-history, .company-sales-history) :is(.psh-table, .csh-table) th { font-size: 11px; }
:is(.personal-sales-history, .company-sales-history) :is(.psh-table th:not(.psh-lg-head-calc), .csh-table th:not(.csh-lg-head-calc)) { background: oklch(98% .004 106); }
:is(.personal-sales-history, .company-sales-history) :is(.psh-table thead .psh-foot-label, .psh-table thead .psh-foot-name, .csh-table thead .csh-foot-label, .csh-table thead .csh-foot-name) { font-size: 11px; }
/* 판매내역 작은 버튼(표 위 [일괄 입력]·[Excel]·⚙, 창 안 작은 버튼): 높이 30·12px·굵기 600 */
:is(.personal-sales-history, .company-sales-history) :is(.psh-table-tools .psh-btn, .csh-table-tools .csh-btn) { height: 30px; padding: 0 10px; font-size: 12px; font-weight: 600; }
:is(.personal-sales-history, .company-sales-history) :is(.psh-bulk-tools .psh-btn, .csh-bulk-tools .csh-btn, .psh-strip-btns .psh-export-open, .csh-strip-btns .csh-export-open) { min-width: 0; height: 30px; padding: 0 10px; font-size: 12px; font-weight: 600; }
:is(.personal-sales-history, .company-sales-history) :is(.psh-table-tools .psh-gear-btn, .csh-table-tools .csh-gear-btn) { width: 30px; padding: 0; }
:is(.personal-sales-history, .company-sales-history) :is(.psh-set-btn, .csh-set-btn) { font-size: 12px !important; font-weight: 600; }
/* 판매내역 꼬리 줄: 안쪽 11/18·11px */
:is(.personal-sales-history, .company-sales-history) :is(.psh-foot, .csh-foot) { padding: 11px 18px; font-size: 11px; }
@media (max-width: 800px) { :is(.personal-sales-history, .company-sales-history) :is(.psh-foot, .csh-foot) { padding-inline: 14px; } }
/* 판매내역 창(표 설정·Excel 내보내기·일괄 입력) 틀: 보관·일반판매 창과 같은 머리 18/24·몸통 24·바닥 18/24(바탕 있음)·모서리 12·× 32px */
:is(.personal-sales-history, .company-sales-history) :is(.psh-set, .psh-export, .psh-bulk, .csh-set, .csh-export, .csh-bulk) { padding: 0; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 80px oklch(18% .005 271 / .22); }
:is(.personal-sales-history, .company-sales-history) :is(.psh-set, .psh-export, .psh-bulk, .csh-set, .csh-export, .csh-bulk) > :not(.psh-set-head, .psh-bulk-head, .psh-set-foot, .psh-bulk-actions, .csh-set-head, .csh-bulk-head, .csh-set-foot, .csh-bulk-actions) { margin-inline: 24px; }
:is(.personal-sales-history, .company-sales-history) :is(.psh-set-head, .psh-bulk-head, .csh-set-head, .csh-bulk-head) { margin: 0 0 18px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
:is(.personal-sales-history, .company-sales-history) :is(.psh-set-title, .psh-bulk-title, .csh-set-title, .csh-bulk-title) { font-size: 18px; }
:is(.personal-sales-history, .company-sales-history) :is(.psh-set-foot, .psh-bulk-actions, .csh-set-foot, .csh-bulk-actions) { margin: 18px 0 0; padding: 18px 24px; border-top: 1px solid var(--line); background: var(--paper); border-radius: 0 0 12px 12px; }
:is(.personal-sales-history, .company-sales-history) :is(.psh-bulk-close, .csh-bulk-close) { width: 32px; height: 32px; padding: 0; border-radius: 5px; font-size: 26px; }

/* 발송내역 판매유형 필터·검색칸(2026-10-28): 셀렉트는 common 공통 셀렉트 모양(화살표 여백), 폭은 가장 긴 글자에 맞게. 검색칸은 여러 개 안내가 들어가게 360px(보관판매 현황 검색과 같음) */
:where(.personal-invoice, .company-invoice) :is(.pim-type-filter, .cim-type-filter) { flex: none; width: auto; }
@media (min-width: 801px) { :where(.personal-invoice, .company-invoice) :is(.pim-search, .cim-search) { width: 360px; } }

/* 보관판매 현황 95점 목록 '확인 못 함'(2026-11-02 사용자 결정): 개인·입점 같은 모양. 시세 칸(95점 최저 옆)·순위 칸에 값 대신 회색 작은 글자, 마우스를 올리면 안내(title) */
/* 95점 표(2026-11-05 사용자 결정, 같은 날 크기 줄임 — 식별만 되는 정도): '95점' 한 글자 크기(상품명 13.5px 수준, 중간 굵기), 흰 바탕·검정 글씨·입력칸과 같은 옅은 회색 테두리,
   높이 약 23px·글자에 맞는 폭·작은 둥근 모서리. 보관판매 현황 상품 칸 오른쪽 끝, 글자 줄(2줄/3줄) 높이 세로 가운데. 개인 personalBopanGrade95·입점 cbsGrade95가 씀 */
.common-grade-95 { flex: none; display: inline-flex; align-items: center; box-sizing: border-box; height: 23px; padding: 0 7px; margin-right: 4px;
    border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 500; line-height: 1; white-space: nowrap; }
.common-grade-95 :is(.common-grade-num, .common-grade-unit) { font: inherit; }
.common-unknown-95 { color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; cursor: help; }

/* 실행 버튼 검은색 통일(2026-11-03 사용자 지시): 크림에 무언가 실행하는 주 버튼([동기화]·[발송내역 동기화]·[▷ 천원경쟁 시작])을
   크림개인 일반판매 현황 [적용](pi-primary)과 같은 검은색으로. 이미 검은 [시작]·[송장 전송]·[변경]은 각 primary 그대로.
   (2026-11-05: [적용]→[크림 반영]은 .common-btn-kream 파랑, 개인 [▷ 천원경쟁 시작]은 .common-btn-go 초록으로 바꿈 — 아래)
   [■ 중지]·위험(삭제·취소·회수)·보조(작은 회색) 버튼은 이 클래스를 달지 않는다. 페이지 버튼 규칙(:where 0점·페이지 css 2점)보다 앞서도록 클래스를 두 번 씀 */
.common-run.common-run { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.common-run.common-run:hover:not(:disabled) { border-color: var(--ink); background: oklch(31% .008 271); color: var(--surface); }
.common-run.common-run:disabled, .common-run.common-run:disabled:hover { border-color: var(--ink); background: var(--ink); color: var(--surface); opacity: .42; cursor: default; }

/* 색 버튼 2가지(2026-11-05 사용자 결정, 현황 버튼 정리 D·E): 페이지 primary(검정)·.common-run 대신 붙인다(같이 달지 않음).
   .common-btn-kream = [크림 반영]만 — 바로가기 아이콘(.common-link-icon)과 같은 파랑 계열을 차분하게. 개인·입점 일반판매·보관판매 현황 4곳.
   .common-btn-go    = [▷ 천원경쟁 시작]만 — 초록(var(--green)). 크림개인 일반판매·보관판매 현황.
   둘 다 흰 글자, 올리면 진하게, 잠기면 회색(페이지의 흐린 잠금 opacity 대신 회색 바탕·회색 글자). 페이지 규칙보다 앞서도록 클래스를 두 번 씀 */
.common-btn-kream.common-btn-kream { border-color: oklch(50% .13 255); background: oklch(50% .13 255); color: #fff; }
.common-btn-kream.common-btn-kream:hover:not(:disabled) { border-color: oklch(43% .14 255); background: oklch(43% .14 255); color: #fff; }
.common-btn-go.common-btn-go { border-color: var(--green); background: var(--green); color: #fff; }
.common-btn-go.common-btn-go:hover:not(:disabled) { border-color: oklch(44% .11 155); background: oklch(44% .11 155); color: #fff; }
:is(.common-btn-kream, .common-btn-go):is(.common-btn-kream, .common-btn-go):disabled,
:is(.common-btn-kream, .common-btn-go):is(.common-btn-kream, .common-btn-go):disabled:hover { border-color: oklch(88% .006 271); background: oklch(93% .004 271); color: oklch(62% .01 273); opacity: 1; cursor: not-allowed; }

/* 작업 뱃지 줄(2026-11-03): 보관판매 등록 뱃지(#workspace-bopan*)와 작업 뱃지(.workspace-badge — 같은 .workspace-bopan 모양)를 한 묶음으로 나란히.
   뱃지끼리는 8px(날짜·계정과는 위쪽 줄 간격 그대로), 다 숨으면 자리도 없음 */
.workspace-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; min-width: 0; padding-block: 6px; }
.workspace-badges:not(:has(> :not([hidden]))) { display: none; }

/* 바로가기·주문번호(2026-11-05부터 공통 commonLinkIcon·commonCopyLink — 이 파일 끝 '클릭 복사 + 바로가기 아이콘') */

/* 상품 칸 오른쪽 여백(2026-11-04 사용자 지시): 상품명 상자가 상품 열 오른쪽 끝 가까이(3px)까지 쓰게 — 남는 자리가 있으면 '…'로 줄이지 않음.
   사진과 상품명 사이 간격·왼쪽 여백은 그대로. 모든 표의 상품 칸(현황·등록·판매내역·발송내역, 개인·입점)에 한 규칙.
   표마다 상품 칸 여백 규칙(페이지 css·짝 묶음, 특이도 2점)이 따로 있어 오른쪽 여백만 !important로 덮는다 */
:is(td.pis-product, td.cis-product, td.pi-product-cell, td.ci-product-cell, td.pb-product-column, td.cbs-product-column, td.pb-row-product,
    td.cb-product-cell, td.pim-product-cell, td.cim-product-cell, td.psh-col-name, td.csh-col-name) { padding-right: 3px !important; }

/* 일반판매 등록 대기목록 입찰금액·매입가 입력칸 140px(2026-11-04 사용자 지시 — 현황 탭 입력칸과 같은 크기, 위 .pi-bid-input 규칙에서 104 → 140) */

/* ── 표 선 공통(2026-11-04 사용자 지시) ──
   (a) 마지막 줄 아래 선: 등록 대기·완료(일반판매)·발송내역 표는 마지막 줄 아래 선을 지워 표가 끝나는 곳이 안 보였다 → 다른 줄과 같은 선.
       빈 목록 줄(…-empty-row)과 가상 스크롤 자리 줄(…-vpad)은 그대로(선 없음).
   (b) 세로 선: 칸 사이 구분용, 가로 선보다 옅은 색(본문 --table-vline, 머리글 --table-vline-head). 각 칸 왼쪽 안쪽 1px(box-shadow — 머리글이
       붙어 다니는 표에서도 선이 따라감)이라 표 첫 칸 왼쪽·끝 칸 오른쪽에는 선이 없다. 빈 목록 줄·자리 줄·채움 칸(…-fill-cell)은 선 없음.
       판매내역 표는 원래 세로 선이 있어(오른쪽 안쪽 선, 판매내역 css 변수) 그 색만 옅게 맞춤. */
:root { --table-vline: oklch(95.2% .004 106); --table-vline-head: oklch(90% .006 106); }
:where(.personal-ilpan, .company-ilpan) :is(.pi-table, .ci-table) tbody tr:last-child:not([class*="empty-row"]):not([class*="vpad"]) td { border-bottom: 1px solid oklch(92% .007 106); }
:where(.personal-invoice, .company-invoice) :is(.pim-table, .cim-table) tbody tr:last-child:not([class*="empty-row"]):not([class*="vpad"]) td { border-bottom: 1px solid oklch(92% .007 106); }
:is(.pi-table, .ci-table, .pis-table, .cis-table, .pb-table, .cb-table, .cbs-table, .pim-table, .cim-table) tbody tr:not([class*="empty-row"]):not([class*="vpad"]) > td + td:not([class*="fill"]):not([class*="-empty"]) { box-shadow: inset 1px 0 0 var(--table-vline); }
:is(.pi-table, .ci-table, .pis-table, .cis-table, .pb-table, .cb-table, .cbs-table, .pim-table, .cim-table) thead tr > th + th:not([class*="fill"]) { box-shadow: inset 1px 0 0 var(--table-vline-head); }
/* 현황 표(개인·입점 일반, 개인·입점 보관): 체크 상자가 없는 단계는 체크 열 자체를 뺀다(2026-11-04 사용자 지적 — 12px 빈 열이 # 왼쪽에 남던 것).
   열 목록(data-cols)에 check가 없으면 체크 칸을 숨기고, 그 다음 칸이 표 첫 칸이 되므로 왼쪽 선을 그리지 않는다 */
:is(.pis-table, .cis-table, .pb-status-table):not([data-cols~="check"]) [data-col="check"] { display: none; }
:is(.pis-table, .cis-table, .pb-status-table, .cbs-table):not([data-cols~="check"]) :is(td, th)[data-col="check"] + :is(td, th) { box-shadow: none !important; }

/* ── 표 아래 꼬리 줄 공통(2026-11-04 사용자 지시): 왼쪽 지금 탭 건수(+그 탭 요약) · 가운데 비움 · 오른쪽 입력 저장 상태만.
   글자 12px 회색, 건수 숫자는 굵게 검정. 화면마다 꼬리 줄 상자(…-list-foot·…-foot)에 .common-foot을 함께 단다 ── */
.common-foot.common-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 11px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.common-foot-left { min-width: 0; color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.common-foot-left b { color: var(--ink); font-weight: 700; }
.common-foot-left[hidden], .common-save-state[hidden] { display: none; }
.common-save-state { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.common-save-state.is-done { color: #1f7a4d; }
.common-save-state.is-error { color: #b3372c; font-weight: 600; }
.common-save-sep[hidden], .common-save-retry[hidden] { display: none; }
.common-save-retry { padding: 0; border: 0; background: none; color: #b3372c; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.common-save-retry:hover { color: #8a2a22; }
.common-save-retry:focus-visible { outline: 2px solid #b3372c; outline-offset: 2px; border-radius: 3px; }
@media (max-width: 800px) { .common-foot.common-foot { padding-inline: 14px; } .common-foot-left { white-space: normal; } }
/* 판매내역 꼬리 줄 건수·저장 상태 글자 크기 맞춤 */
.common-foot :is(.psh-save-state, .csh-save-state, .psh-grid-note, .csh-grid-note) { font-size: 12px; }

/* ── 체크 칸 가운데(2026-11-04 사용자 지시): 모든 표의 체크 칸(머리글·본문·묶음 줄)에서 체크 상자 좌우 여백을 같게.
   체크 칸을 숨기는 단계(data-check="off" — 12px 빈 칸)는 그대로 ── */
table:not([data-check="off"]) :is(th, td):has(> input[type="checkbox"]) { padding-left: 12px !important; padding-right: 12px !important; text-align: center !important; }
table :is(th, td) > input[type="checkbox"] { margin: 0; vertical-align: middle; }

/* ── 버튼 안 ?(2026-11-04 사용자 지시): 버튼 바로 옆에 붙던 도움말 ?를 버튼 글자 오른쪽 안쪽으로.
   ?는 버튼 속이 아니라 버튼과 함께 감싼 상자(.common-btn-help) 위에 겹쳐 그린다 — ?를 눌러도 버튼 동작이 실행되지 않고(버튼 바깥 요소),
   버튼이 잠겨 있어도 ?는 눌러 설명을 볼 수 있다. 설명은 각 화면의 기존 도움말(data-…-tip, 마우스 올림·누름·포커스)이 띄운다.
   [등록 시작]↔[■ 중지]처럼 같은 자리에서 바뀌는 버튼은 둘을 함께 감싸 보이는 버튼 안에 ?가 온다. 검정 버튼 안 ?는 흰색 계열 ── */
.common-btn-help { position: relative; display: inline-flex; flex: none; align-items: center; vertical-align: middle; }
.common-btn-help > button:not(.common-btn-q) { padding-right: 33px !important; }
.common-btn-help > .common-btn-q.common-btn-q { position: absolute; top: 50%; right: 9px; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; min-width: 0; min-height: 0; margin: 0 !important; padding: 0 0 1px !important; transform: translateY(-50%);
    border: 1px solid oklch(80% .01 106); border-radius: 50%; background: transparent; color: var(--muted); font-size: 10px !important; font-weight: 700; line-height: 1; cursor: help; }
.common-btn-help > .common-btn-q.common-btn-q:hover, .common-btn-help > .common-btn-q.common-btn-q:focus-visible { border-color: var(--ink); color: var(--ink); }
.common-btn-help:has(> button:is([class*="primary"], .common-run):not([hidden]):not(.common-btn-q)) > .common-btn-q.common-btn-q,
.common-btn-help:has(> button:is(.common-btn-kream, .common-btn-go):not([hidden]):not(:disabled)) > .common-btn-q.common-btn-q { border-color: rgba(255, 255, 255, .6); color: rgba(255, 255, 255, .9); }
.common-btn-help:has(> button:is([class*="primary"], .common-run):not([hidden]):not(.common-btn-q)) > .common-btn-q.common-btn-q:hover,
.common-btn-help:has(> button:is(.common-btn-kream, .common-btn-go):not([hidden]):not(:disabled)) > .common-btn-q.common-btn-q:hover { border-color: #fff; color: #fff; }

/* ? 글자를 원 가운데로(2026-11-04 사용자 질문 — 재어 맞춤): 굵은 ?(700)는 글자가 원 중심보다 약 0.46px 아래, 판매내역 ?(10.5px)는 약 0.72px 위였다.
   버튼 안 ?·보관 화면 ?는 아래 여백 1px(0.5px 위로), 판매내역 ?는 위 여백 1.5px(0.75px 아래로). 일반판매·발송내역 ?(400)는 원래 가운데(-0.05px) */
:where(.personal-bopan, .company-bopan) :is(.pb-help-s, .cbs-help):not(.common-btn-q) { padding: 0 0 1px; }
:where(.personal-sales-history, .company-sales-history) :is(.psh-help-s, .csh-help-s) { padding: 1.5px 0 0; }

/* 일반판매 등록 대기·완료 표 상품 칸(2026-11-04 사용자 결정 — 사진 열을 없애고 상품 칸 안으로): 현황 상품 칸(.pis-p-wrap·.pis-p-text·.pis-sku·.pis-name·.pis-order)과
   같은 모양 — 사진 48px, 사진·글자 사이 14px, 1줄 SKU(굵게) + ↗, 2줄 상품명(한 줄, 넘치면 …), 완료목록 3줄 주문번호. 왼쪽 여백 10px(오른쪽은 위 공통 3px).
   등록 표는 열 폭이 글자에 따라 정해지는 표라 상품명 글자 상자의 너비 기여를 0으로 두고(칸 폭은 최소 270px — 1440에서 표 최소 폭 1380px 안에서 # 열이 좁아지지 않는 값 — + 남는 폭) 칸 안에서 … 처리 */
:where(.personal-ilpan, .company-ilpan) :is(.pi-table td.pi-product-cell, .ci-table td.ci-product-cell) { min-width: 270px; padding: 9px 10px; overflow: hidden; text-align: left; }
:where(.personal-ilpan, .company-ilpan) :is(.pi-table, .ci-table) .pis-p-thumb { width: 48px; height: 48px; overflow: hidden; border-color: var(--line); }
:where(.personal-ilpan, .company-ilpan) :is(.pi-table, .ci-table) .pis-p-thumb:has(img) { background: #fff; }
:where(.personal-ilpan, .company-ilpan) :is(.pi-table, .ci-table) .pis-p-thumb svg { width: 26px; height: 26px; }
:where(.personal-ilpan, .company-ilpan) :is(.pi-table, .ci-table) .pis-p-text { width: 0; }
:where(.personal-ilpan, .company-ilpan) :is(.pi-table, .ci-table) .pis-order[hidden] { display: none; }

/* 표 안 금액 입력칸 글자 14px(2026-11-04 사용자 지시 — 12~12.5px라 작았음, 정산가 숫자 12px보다 작지 않게): 개인·입점 일반·보관 현황·등록,
   묶음 줄·펼친 줄, 매입가·입찰가·조정 범위 하한·상한(입점 자동 조정 하한·상한 포함). '입력'·'하한'·'상한'·'미입력' 안내 글자도 같은 크기.
   입력칸 크기(140px·높이)는 그대로 — 일반판매 완료목록 매입가 칸만 74px라 9,999,999가 잘려 다른 금액 칸과 같은 140px로 */
table input:is(.pi-bid-input, .pi-purchase-input, .pi-done-purchase-input, .ci-bid-input, .ci-purchase-input, .ci-done-purchase-input,
    .pis-bid-input, .pis-group-bid-input, .pis-purchase-input, .pis-range-input, .cis-bid-input, .cis-purchase-input, .cis-auto-input,
    .pb-bid-input, .pb-group-bid-input, .pb-purchase-input, .pb-range-input, .cbs-bid-input, .cbs-purchase-input, .cbs-auto-input) { font-size: 14px !important; }
table input:is(.pi-done-purchase-input, .ci-done-purchase-input) { width: 140px; }

/* 현황 표 4곳 상품 칸(2026-11-04 사용자 지시): 주문번호·보관 번호 열이 따로 있는 단계는 상품 칸의 번호 줄을 뺐으므로(개인 일반 입찰 중·입점 일반 모든 단계는 아래 규칙,
   보관은 JS가 번호를 넣지 않음) 남은 SKU·상품명 글자와 사진을 조금 키운다 — SKU 13→14px, 상품명 12.5→13.5px, 사진 48→54px(줄 높이는 그대로 근처).
   묶음 줄의 '입찰 N건'·'보관 N건' 줄, 95점·보관 N일 줄은 번호가 아니라 그대로 둔다 */
:where(.personal-ilpan, .company-ilpan) :is(.pis-table, .cis-table)[data-cols~="order"] :is(.pis-order, .cis-order):not(.pis-group-count, .cis-group-count) { display: none; }
:where(.personal-bopan, .company-bopan) :is(.pb-storage-line, .cbs-storage-line):empty { display: none; }
:is(.pis-table, .cis-table, .pb-status-table, .cbs-table) td :is(.pis-p-thumb, .cis-p-thumb, .pb-p-thumb, .cbs-p-thumb) { width: 54px; height: 54px; }
:is(.pis-table, .cis-table, .pb-status-table, .cbs-table) td :is(.pis-p-thumb, .cis-p-thumb, .pb-p-thumb, .cbs-p-thumb) svg { width: 30px; height: 30px; }
:is(.pis-table, .cis-table, .pb-status-table, .cbs-table) td :is(.pis-sku, .cis-sku, .pb-row-sku, .cbs-row-sku) { font-size: 14px; line-height: 1.4; }
:is(.pis-table, .cis-table, .pb-status-table, .cbs-table) td :is(.pis-name, .cis-name, .pb-row-name, .cbs-row-name) { font-size: 13.5px; line-height: 1.4; }


/* 확장 연결·버전 막기(2026-11-05 사용자 결정): 업무 화면 전체를 덮는 안내(닫기 없음). 상단바(로그아웃·이용기간 연장)는 덮개 위로 올려 누를 수 있게 */
.common-ext-gate { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: oklch(18% .005 271 / .58); }
.common-ext-gate[hidden] { display: none; }
body.has-ext-gate .workspace-topbar { position: relative; z-index: 901; }
.common-ext-gate-card { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(440px, 100%); padding: 32px 28px 28px; border-radius: 14px; background: var(--surface); text-align: center; box-shadow: 0 24px 60px oklch(15% .01 271 / .28); }
.common-ext-gate-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 50%; background: oklch(95% .03 250); color: oklch(48% .14 250); }
.common-ext-gate-card h2 { margin: 0; color: var(--ink); font-size: 18px; font-weight: 700; line-height: 1.45; word-break: keep-all; }
.common-ext-gate-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; word-break: keep-all; }
.common-ext-gate-go { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; margin-top: 12px; padding: 0 22px; border-radius: 8px; background: var(--ink); color: var(--surface); font-size: 14px; font-weight: 700; text-decoration: none; }
.common-ext-gate-go:hover { background: oklch(28% .005 271); }

/* ── 짧은 알림(2026-11-05 사용자 결정): 아래쪽 가운데 검정 상자, 아래→위로 쌓기(최대 3), 보통 4초·오류 6초, 오류는 왼쪽 빨간 줄, × 닫기 ── */
.common-notice-stack { top: auto; right: auto; bottom: 24px; left: 50%; z-index: 1000; width: min(440px, calc(100vw - 32px)); transform: translateX(-50%); gap: 8px; }
.common-notice { align-items: center; padding: 11px 12px 11px 16px; border: 0; border-left: 3px solid transparent; border-radius: 10px; background: oklch(20% .006 271); color: oklch(97% .003 106);
    box-shadow: 0 12px 32px rgb(16 17 19 / .28); font-size: 13.5px; line-height: 1.5; pointer-events: auto; }
.common-notice.is-error { border-left-color: oklch(64% .2 27); }
.common-notice.is-info { border-left-color: transparent; }
.common-notice-close { color: oklch(78% .005 271); font-size: 16px; }
.common-notice-close:hover { color: #fff; }

/* ── 결과 표 창(2026-11-05 사용자 결정): 가운데 창, 요약 줄, 표 안 스크롤(창 크기 고정), 실패만 보기 ── */
.common-results-modal { width: min(1280px, calc(100vw - 32px)); height: min(640px, calc(100dvh - 32px)); }
.common-results-head { padding-bottom: 6px; }
.common-results-summary { margin-top: 6px; color: var(--ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.common-results-summary .is-fail { color: oklch(52% .19 27); }
.common-results-summary.is-all-ok { color: oklch(45% .12 155); }
.common-results-tools { display: flex; justify-content: flex-end; padding: 0 22px 8px; }
.common-results-tools[hidden] { display: none; }
.common-results-only { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.common-results-only input { width: 15px; height: 15px; accent-color: var(--ink); }
.common-results-wrap { flex: 1 1 auto; min-height: 0; margin: 0 22px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.common-results-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.common-results-table thead th { position: sticky; top: 0; z-index: 1; padding: 9px 14px; border-bottom: 1px solid var(--line); background: #f7f7f4; color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap; }
.common-results-table td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
/* 세로선(2026-11-05 사용자 지시) — 마지막 칸 오른쪽은 바깥 테두리와 겹쳐 뺌 */
.common-results-table th:not(:last-child), .common-results-table td:not(:last-child) { border-right: 1px solid var(--line); }
.common-results-table td.is-order { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.common-results-table td.is-product { min-width: 360px; white-space: nowrap; }
.common-results-table td.is-option { text-align: center; white-space: nowrap; }
.common-results-table td.is-result { text-align: center; white-space: nowrap; font-weight: 700; }
.common-results-table td.is-result.is-ok { color: oklch(45% .12 155); }
.common-results-table td.is-result.is-fail { color: oklch(52% .19 27); }
.common-results-table td.is-reason { min-width: 520px; color: var(--muted); overflow-wrap: anywhere; }
.common-results-table tr.is-hidden { display: none; }
.common-results-modal .common-err-foot { margin-top: 14px; }
.common-results-table.no-number .is-number { display: none; }

/* ── 크림 쓰기 전 확인 창(2026-11-05 사용자 결정, common.js commonConfirm · commonConfirmTable): 결과 표 창과 같은 계열.
   고정 크기·표 안 스크롤, 머리글·짧은 칸 가운데, 세로선, 줄마다 아래 선(마지막 줄 포함). 실행 버튼 빨강(is-danger) 또는 초록(.common-btn-go) ── */
.common-confirm-modal { width: min(960px, calc(100vw - 32px)); height: min(600px, calc(100dvh - 32px)); }
.common-confirm-head { padding-bottom: 10px; }
.common-confirm-summary { margin-top: 6px; color: var(--ink); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.common-confirm-lead { margin-top: 6px; color: var(--ink); font-size: 13px; }
.common-confirm-skip { margin-top: 4px; color: var(--muted); font-size: 12.5px; }
:is(.common-confirm-lead, .common-confirm-skip, .common-confirm-total)[hidden] { display: none; }
.common-confirm-body { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; margin: 0 22px; }
.common-confirm-wrap { flex: 1 1 auto; min-height: 0; max-height: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.common-confirm-wrap:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.common-confirm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.common-confirm-table thead th { position: sticky; top: 0; z-index: 1; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #f7f7f4; color: var(--muted);
    font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap; }
.common-confirm-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.common-confirm-table th:not(:last-child), .common-confirm-table td:not(:last-child) { border-right: 1px solid var(--line); }
/* 상품 말고는 모두 가운데(2026-11-05 사용자 지시 — 상품명·실패 사유만 왼쪽). align 옵션(right/left)도 가운데로 */
.common-confirm-table td:is(.is-number, .is-option, .is-center, .is-right, .is-left) { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.common-confirm-table td.is-product { min-width: 240px; overflow-wrap: anywhere; }
.common-confirm-table td.is-warn { color: oklch(52% .19 27); font-weight: 600; }
/* 현황 표에서 확인이 필요한 줄(2026-11-05 사용자 결정 — 천원경쟁 [시작] 때 하한·상한 없는 묶음 줄): 결과 창 '실패' 색 계열 연한 빨강 바탕.
   입력 칸 빨간 테두리(commonMarkField)는 그대로 함께. 칸을 채우면 화면이 클래스를 뗀다 */
tr.common-row-missing > td { background: oklch(96.5% .022 27) !important; }
.common-confirm-total { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 10px; margin: 12px 22px 0; }
.common-confirm-total strong { color: var(--ink); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.common-confirm-total span { color: var(--muted); font-size: 12.5px; }
.common-confirm-total span[hidden] { display: none; }
.common-err-button.is-danger { border-color: oklch(52% .19 27); background: oklch(52% .19 27); color: #fff; }
.common-err-button.is-danger:hover:not(:disabled) { border-color: oklch(45% .18 27); background: oklch(45% .18 27); }
/* 화면 자기 창(천원경쟁 시작 창)에 넣은 대상 표: 표 높이만 제한하고 안에서 스크롤 */
:is(.pis-compete-dialog, .pb-compete-dialog, .cis-compete-dialog, .cbs-compete-dialog) .common-confirm-wrap { max-height: 280px; margin-top: 12px; }
/* 표가 상자에 꼭 맞는 곳(천원경쟁 시작 창): 마지막 줄 아래 선 = 상자 아래 테두리(줄 선까지 그리면 두 줄로 보임) */
:is(.pis-compete-dialog, .pb-compete-dialog, .cis-compete-dialog, .cbs-compete-dialog) .common-confirm-table tbody tr:last-child td { border-bottom: 0; }

/* ── 위쪽 탭(등록/현황)과 내용을 한 덩어리로(2026-11-05 사용자 결정, 폴더 탭처럼): 개인·입점 일반판매·보관판매 네 화면 ──
   지금 보이는 탭 내용(안내 띠·단계 탭·표)을 큰 테두리 상자에 넣고, 활성 탭은 그 상자와 같은 바탕·이어진 테두리. 안쪽은 여백만큼 줄어든다.
   탭 줄 아래 선은 없애고(상자 위 테두리가 대신), 탭과 상자 사이 화면 간격(14px)은 상자를 끌어올려 붙인다. */
:root { --tab-sheet: oklch(98.6% .004 106); }
:is(.pi-top-tabs, .ci-top-tabs, .pb-top-tabs, .cb-top-tabs) { position: relative; z-index: 1; }
:is(.pi-view, .ci-view, .pb-view):not([hidden]) { margin-top: -15px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 0 10px 10px 10px; background: var(--tab-sheet); }
.cb-view:not([hidden]) { margin-top: -1px; padding: 14px 16px 16px !important; border: 1px solid var(--line); border-radius: 0 10px 10px 10px; background: var(--tab-sheet); }

/* 크림입점 일반판매 등록 완료목록 매입가 칸 = 현황 매입가 칸과 같은 모양(2026-11-05 사용자 결정): 늘 보이는 테두리·옅은 바탕·가운데 글자, 140×36.
   (개인 화면 .pi-done-purchase-input은 개인 담당이 맞춘다) */
.company-ilpan .ci-table .ci-done-purchase-input, .company-ilpan .ci-table .ci-done-purchase-input:not(:focus):placeholder-shown {
    display: block; width: 140px; max-width: 140px; height: 36px; margin: 0 auto; padding: 0 9px !important; border: 1px solid oklch(85% .012 106);
    border-radius: 6px; background: oklch(99.3% .002 106); text-align: center; font-variant-numeric: tabular-nums; }
.company-ilpan .ci-table .ci-done-purchase-input[aria-invalid="true"] { border-color: var(--il-danger); }
/* '자주 담는 상품' 머리글은 한 줄(2026-11-05 사용자 지시 — 열이 넓어지는 건 감수) */
.company-ilpan .ci-table th.ci-fav-column { white-space: nowrap; }
/* 완료목록 상품 칸 최소 240(대기목록 270보다 좁게 — 위쪽 탭 상자 안쪽 여백이 생긴 1440에서 표가 넘치지 않게, 상품명은 …로 줄어듦) */
:where(.personal-ilpan, .company-ilpan) :is(.pi-done-table td.pi-product-cell, .ci-done-table td.ci-product-cell) { min-width: 240px; }
:where(.personal-ilpan, .company-ilpan) :is(.pi-done-table, .ci-done-table) { min-width: 1100px; }   /* 1140 → 1100: 1440에서 위쪽 탭 상자 안쪽 폭(1116)에 맞게 */
/* 완료목록 '자주 담는 상품' 머리글(주문번호 열이 생겨 11번째): 개인·입점 같게 한 줄(2026-11-05 사용자 지시) */
:where(.personal-ilpan, .company-ilpan) :is(.pi-done-table thead th:nth-child(11), .ci-done-table thead th:nth-child(11)) { white-space: nowrap; }   /* 자주 담는 상품 머리글(개인은 2026-11-05 주문번호 열이 생겨 11번째) */

/* ? 말풍선(2026-11-05 사용자 결정): 말풍선 위로 마우스를 옮겨 읽을 수 있게(누르기·가리키기 받음) — 닫힘은 JS가 0.4초 뒤(common.js commonTipLeave) */
:where(.personal-ilpan, .company-ilpan) :is(.pi-tip, .ci-tip), :where(.personal-invoice, .company-invoice) :is(.pim-tip, .cim-tip) { pointer-events: auto; }
/* 판매내역 머리글 ? 설명(CSS로 뜨는 말풍선): 벗어나도 0.4초 남아 ?에서 말풍선으로 옮겨 갈 수 있게, 말풍선 위에 있는 동안은 계속 */
:where(.personal-sales-history, .company-sales-history) :is(.psh-tip, .csh-tip) { display: block; visibility: hidden; opacity: 0; transition: visibility 0s .4s, opacity .1s .3s; }
:where(.personal-sales-history, .company-sales-history) :is(.psh-help:hover .psh-tip, .psh-help:focus .psh-tip, .csh-help:hover .csh-tip, .csh-help:focus .csh-tip) { visibility: visible; opacity: 1; transition-delay: 0s; }

/* ── 클릭 복사 + 바로가기 아이콘(2026-11-05 사용자 결정, common.js commonCopyTarget·commonLinkIcon) ──
   복사 글자: 누르면 1.5초 글자 대신 같은 자리·같은 너비 가운데 뱃지(글자는 투명으로 자리만 지킴 — 칸 너비·줄 높이 그대로).
   바로가기 아이콘(시안 A): 새 창 열기 선 아이콘, 파란색, 글자 크기(1em)에 맞춰 세로 가운데 — 줄 높이를 늘리지 않음 */
.common-copy { position: relative; display: inline; cursor: pointer; border-radius: 3px; }
.common-copy:hover { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.common-copy:focus-visible { outline: 2px solid oklch(51% .13 250); outline-offset: 1px; }
.common-copy.is-copied { color: transparent !important; text-decoration: none; }
.common-copy-badge { position: fixed; z-index: 2147483000; transform: translate(-50%, -50%); padding: 2px 6px; border-radius: 4px; background: oklch(95% .025 155); color: oklch(39% .08 155);
    font-family: var(--font-ui); font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0; white-space: nowrap; pointer-events: none; box-shadow: 0 0 0 2px var(--surface); }
.common-copy-badge[data-tone="error"] { background: oklch(96% .025 28); color: oklch(52% .17 28); }
/* 아이콘은 글자 크기와 상관없이 같은 크기(2026-11-05 사용자 수정 요청 — 주문번호 옆이 작았음): 누르는 상자 18px·그림 14px, 위아래 -2px로 줄 높이를 늘리지 않음 */
.common-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: -2px 0 -2px 3px; padding: 0; border-radius: 4px;
    color: oklch(52% .15 255); vertical-align: middle; text-decoration: none; flex: none; }
.common-link-icon svg { display: block; width: 14px; height: 14px; }
.common-link-icon:hover { background: oklch(95.5% .025 255); color: oklch(45% .16 255); }
.common-link-icon:focus-visible { outline: 2px solid oklch(51% .13 250); outline-offset: 1px; }
.common-order-line { display: inline-flex; align-items: center; max-width: 100%; color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.common-order-line .common-copy { overflow: hidden; text-overflow: ellipsis; }
/* 상품 칸 3째 줄 주문번호(완료목록 등)는 그 줄 모양(작은 회색 글자) 그대로 */
:is(.pis-order, .cis-order, .pi-product-order, .ci-product-order) .common-order-line { color: inherit; font-size: inherit; }
/* 글자 줄(블록) 안 SKU 옆 아이콘: vertical-align middle은 소문자 높이 기준이라 대문자·숫자 SKU보다 약 1px 아래 → 그만큼 올림(주문번호 줄·flex 칸은 가운데 정렬이라 그대로) */
:is(.pis-sku, .cis-sku, .pi-product-sku, .ci-product-sku, .pb-row-sku, .cbs-row-sku, .cb-product-sku) > .common-link-icon { position: relative; top: -1px; }

/* 동기화 버튼 한 모양(2026-11-05 사용자 결정, _workspace/20261105_sync_unify B절): 모든 화면 '(새로고침 아이콘) 동기화' — 같은 아이콘(홈 카드 아이콘과 같은 모양)·글자 '동기화'만.
   색·크기·위치는 각 화면 버튼 그대로(이 규칙은 아이콘과 글자 배치만) */
.common-sync-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.common-sync-btn .common-sync-icon { flex: none; width: 14px; height: 14px; }


/* ── 표 맨 아래 줄 선 + 꼬리 줄(2026-11-05 사용자 반복 지적) ──
   마지막 줄에도 아래 선을 둔다(위 '표 선 공통' (a)). 줄이 많아 표가 목록 상자를 꽉 채우면 마지막 줄 선과 꼬리 줄(.common-foot) 위 선이
   붙어 두 줄로 보였다 → 꼬리 줄을 1px 끌어올려 두 선을 한 줄로 겹친다(꼬리 줄 선이 위에 그려지게 position). 줄이 적으면 지금처럼
   마지막 줄 선 + 상자 끝 꼬리 줄 선. */
.common-foot.common-foot { position: relative; margin-top: -1px; }

/* 검색 상자 한 벌(2026-11-05 사용자 지시, _workspace/20261105_search_box): '돋보기 + 입력' 상자. 누르면 상자 전체에 초점 테두리(다른 입력칸 초점과 같은 진한 테두리),
   안쪽 입력칸은 테두리·outline 없음. 화면별 옛 클래스(.pis/.cis-search·.pb-status-search·.cbs-search·.pim/.cim-search·.psh/.csh-search)에도 같은 초점 규칙.
   폭은 각 화면 규칙 그대로. 큰 상자(상품 담기 창)는 .common-search-large(높이 42) */
.common-search-box { display: flex; align-items: center; gap: 7px; min-width: 0; padding-left: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); }
.common-search-box > svg { flex: none; }
.common-search-large { flex: 1 1 auto; height: 42px; }
.common-search-large > input { height: 40px; }
:is(.common-search-box, .pis-search, .cis-search, .pb-status-search, .cbs-search, .pim-search, .cim-search) > input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 0 8px 0 0 !important;
    border: 0 !important; border-radius: 0; background: transparent !important; outline: none !important; box-shadow: none !important; }
:is(.common-search-box, .pis-search, .cis-search, .pb-status-search, .cbs-search, .pim-search, .cim-search):focus-within { border-color: var(--ink); }