/* ===================================
   OwnerFlow Admin Modern Design System
   Toss-inspired clean admin UI
   =================================== */

/* Design Tokens */
:root {
   --of-primary: #3182f6;
   --of-primary-light: #e8f3ff;
   --of-primary-dark: #1b64da;
   --of-success: #00c471;
   --of-success-light: #e8faf0;
   --of-warning: #f59f00;
   --of-warning-light: #fff8e6;
   --of-danger: #f04452;
   --of-danger-light: #ffe5e8;
   --of-purple: #8b5cf6;
   --of-purple-light: #f3f0ff;
   --of-orange: #ff6f61;
   --of-orange-light: #fff0ee;
   --of-blue-dark: #094cff;
   --of-blue-dark-light: #e6ecff;
   --of-lime: #6fba2c;
   --of-lime-light: #f0f9e8;
   --of-sky: #42a5f5;
   --of-sky-light: #e3f2fd;

   --of-text-primary: #191f28;
   --of-text-secondary: #4e5968;
   --of-text-muted: #8b95a1;
   --of-text-light: #b0b8c1;

   --of-bg-primary: #f7f8fa;
   --of-bg-white: #ffffff;
   --of-border: #e5e8eb;
   --of-border-light: #f2f4f6;

   --of-radius-sm: 8px;
   --of-radius-md: 12px;
   --of-radius-lg: 16px;
   --of-radius-xl: 20px;
   --of-radius-full: 9999px;

   --of-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
   --of-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
   --of-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

   --of-transition: all 0.2s ease;

   /* Section status colors */
   --of-sec-견적요청: #ff6f61;
   --of-sec-견적요청-bg: #fff0ee;
   --of-sec-작업요청: #f59f00;
   --of-sec-작업요청-bg: #fff8e6;
   --of-sec-작업중: #6fba2c;
   --of-sec-작업중-bg: #f0f9e8;
   --of-sec-컨펌중: #42a5f5;
   --of-sec-컨펌중-bg: #e3f2fd;
   --of-sec-1차작업완료: #094cff;
   --of-sec-1차작업완료-bg: #e6ecff;
   --of-sec-작업미수금: #f04452;
   --of-sec-작업미수금-bg: #ffe5e8;
   --of-sec-작업완료: #00c471;
   --of-sec-작업완료-bg: #e8faf0;
   --of-sec-작업취소: #8b95a1;
   --of-sec-작업취소-bg: #f7f8fa;
}

/* ===== Global Typography ===== */
body,
input,
select,
textarea,
button {
   font-family:
      'Pretendard',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* ===== Page Layout ===== */
.of-page-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
   padding-top: 20px;
}

.of-page-title {
   font-size: 24px;
   font-weight: 700;
   color: var(--of-text-primary);
   margin: 0;
   letter-spacing: -0.5px;
}

.of-page-subtitle {
   font-size: 14px;
   color: var(--of-text-muted);
   margin-top: 4px;
}

/* ===== Stats Cards ===== */
.of-stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
   gap: 12px;
   margin-bottom: 24px;
}

.of-stat-card {
   background: var(--of-bg-white);
   border-radius: var(--of-radius-md);
   padding: 16px;
   cursor: pointer;
   transition: var(--of-transition);
   border: 2px solid transparent;
   position: relative;
   overflow: hidden;
}

.of-stat-card:hover {
   transform: translateY(-2px);
   box-shadow: var(--of-shadow-md);
}

.of-stat-card.active {
   border-color: var(--of-primary);
   box-shadow: 0 0 0 3px var(--of-primary-light);
}

.of-stat-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
}

.of-stat-card[data-status='견적요청']::before {
   background: var(--of-orange);
}
.of-stat-card[data-status='작업요청']::before {
   background: var(--of-warning);
}
.of-stat-card[data-status='작업중']::before {
   background: var(--of-lime);
}
.of-stat-card[data-status='컨펌중']::before {
   background: var(--of-sky);
}
.of-stat-card[data-status='1차 작업완료']::before {
   background: var(--of-blue-dark);
}
.of-stat-card[data-status='작업 미수금']::before {
   background: var(--of-danger);
}
.of-stat-card[data-status='작업완료']::before {
   background: var(--of-purple);
}
.of-stat-card[data-status='작업취소']::before {
   background: var(--of-text-muted);
}

.of-stat-label {
   font-size: 12px;
   font-weight: 600;
   color: var(--of-text-muted);
   margin-bottom: 4px;
   letter-spacing: 0.5px;
}

.of-stat-count {
   font-size: 28px;
   font-weight: 800;
   color: var(--of-text-primary);
   line-height: 1;
}

.of-stat-unit {
   font-size: 14px;
   font-weight: 500;
   color: var(--of-text-muted);
   margin-left: 2px;
}

/* ===== Search Bar ===== */
.of-search-container {
   position: relative;
   margin-bottom: 20px;
}

.of-search-container .of-search-icon {
   position: absolute;
   left: 16px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--of-text-muted);
   font-size: 16px;
}

.of-search-input {
   width: 100%;
   padding: 12px 16px 12px 44px;
   border: 1px solid var(--of-border);
   border-radius: var(--of-radius-lg);
   font-size: 15px;
   background: var(--of-bg-white);
   transition: var(--of-transition);
   color: var(--of-text-primary);
}

.of-search-input:focus {
   outline: none;
   border-color: var(--of-primary);
   box-shadow: 0 0 0 3px var(--of-primary-light);
}

.of-search-input::placeholder {
   color: var(--of-text-light);
}

.of-search-btn {
   position: absolute;
   right: 8px;
   top: 50%;
   transform: translateY(-50%);
   padding: 8px 20px;
   background: var(--of-primary);
   color: white;
   border: none;
   border-radius: var(--of-radius-sm);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: var(--of-transition);
}

.of-search-btn:hover {
   background: var(--of-primary-dark);
}

/* ===== Collapsible Add Form ===== */
.of-add-toggle {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
   background: var(--of-bg-white);
   border: 1px dashed var(--of-border);
   border-radius: var(--of-radius-sm);
   color: var(--of-text-secondary);
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: var(--of-transition);
   margin-bottom: 20px;
}

.of-add-toggle:hover {
   border-color: var(--of-primary);
   color: var(--of-primary);
   background: var(--of-primary-light);
}

.of-add-form-card {
   background: var(--of-bg-white);
   border-radius: var(--of-radius-lg);
   padding: 24px;
   margin-bottom: 24px;
   box-shadow: var(--of-shadow-sm);
   border: 1px solid var(--of-border-light);
}

.of-add-form-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   gap: 12px;
   align-items: end;
}

.of-form-group {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.of-form-label {
   font-size: 12px;
   font-weight: 600;
   color: var(--of-text-muted);
}

.of-form-input {
   padding: 10px 12px;
   border: 1px solid var(--of-border);
   border-radius: var(--of-radius-sm);
   font-size: 14px;
   transition: var(--of-transition);
   background: var(--of-bg-white);
}

.of-form-input:focus {
   outline: none;
   border-color: var(--of-primary);
   box-shadow: 0 0 0 3px var(--of-primary-light);
}

.of-form-select {
   padding: 10px 12px;
   border: 1px solid var(--of-border);
   border-radius: var(--of-radius-sm);
   font-size: 14px;
   background: var(--of-bg-white);
   transition: var(--of-transition);
   cursor: pointer;
}

.of-form-select:focus {
   outline: none;
   border-color: var(--of-primary);
}

/* ===== Modern Card ===== */
.of-card {
   background: var(--of-bg-white);
   border-radius: var(--of-radius-lg);
   box-shadow: var(--of-shadow-sm);
   border: 1px solid var(--of-border-light);
   margin-bottom: 20px;
   overflow: hidden;
   transition: var(--of-transition);
}

.of-card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 20px;
   border-bottom: 1px solid var(--of-border-light);
}

.of-card-title {
   font-size: 16px;
   font-weight: 700;
   color: var(--of-text-primary);
   display: flex;
   align-items: center;
   gap: 8px;
}

.of-card-title .status-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   display: inline-block;
}

.of-card-count {
   font-size: 13px;
   font-weight: 600;
   color: var(--of-text-muted);
   background: var(--of-bg-primary);
   padding: 4px 10px;
   border-radius: var(--of-radius-full);
}

.of-card-body {
   padding: 0;
}

/* ===== Modern Table ===== */
.of-table-wrapper {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
}

.of-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   font-size: 13px;
}

.of-table thead th {
   padding: 12px 16px;
   font-size: 12px;
   font-weight: 600;
   color: var(--of-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   background: var(--of-bg-primary);
   border-bottom: 1px solid var(--of-border);
   white-space: nowrap;
   position: sticky;
   top: 0;
   z-index: 1;
}

.of-table thead th a {
   color: var(--of-text-muted);
   text-decoration: none;
   transition: var(--of-transition);
}

.of-table thead th a:hover {
   color: var(--of-primary);
}

.of-table tbody tr {
   transition: var(--of-transition);
}

.of-table tbody tr:hover {
   background: var(--of-primary-light);
}

.of-table tbody td {
   padding: 12px 16px;
   border-bottom: 1px solid var(--of-border-light);
   color: var(--of-text-secondary);
   white-space: nowrap;
   vertical-align: middle;
}

.of-table tbody tr:last-child td {
   border-bottom: none;
}

.of-table tbody tr.row-urgent {
   background: var(--of-danger-light) !important;
}

.of-table tbody tr.row-overdue {
   color: var(--of-danger) !important;
}

.of-table tbody tr.row-overdue td {
   color: var(--of-danger);
}

/* ===== Status Badge ===== */
.of-badge {
   display: inline-flex;
   align-items: center;
   padding: 4px 10px;
   border-radius: var(--of-radius-full);
   font-size: 12px;
   font-weight: 600;
   line-height: 1;
   gap: 4px;
   white-space: nowrap;
}

.of-badge-new {
   background: var(--of-primary-light);
   color: var(--of-primary);
}

.of-badge-long {
   background: var(--of-danger-light);
   color: var(--of-danger);
}

.of-badge-urgent {
   background: var(--of-danger-light);
   color: var(--of-danger);
}

.of-badge-normal {
   background: var(--of-bg-primary);
   color: var(--of-text-muted);
}

/* ===== Action Buttons ===== */
.of-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   padding: 8px 16px;
   border-radius: var(--of-radius-sm);
   font-size: 13px;
   font-weight: 600;
   border: none;
   cursor: pointer;
   transition: var(--of-transition);
   white-space: nowrap;
   text-decoration: none !important;
}

.of-btn:hover {
   transform: translateY(-1px);
   box-shadow: var(--of-shadow-sm);
}

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

.of-btn-primary:hover {
   background: var(--of-primary-dark);
   color: white;
}

.of-btn-success {
   background: var(--of-success);
   color: white;
}

.of-btn-success:hover {
   background: #00a85e;
   color: white;
}

.of-btn-danger {
   background: var(--of-danger);
   color: white;
}

.of-btn-danger:hover {
   background: #dc3545;
   color: white;
}

.of-btn-warning {
   background: var(--of-warning);
   color: white;
}

.of-btn-secondary {
   background: var(--of-bg-primary);
   color: var(--of-text-secondary);
   border: 1px solid var(--of-border);
}

.of-btn-secondary:hover {
   background: var(--of-border-light);
   color: var(--of-text-primary);
}

.of-btn-ghost {
   background: transparent;
   color: var(--of-text-muted);
   padding: 6px 10px;
}

.of-btn-ghost:hover {
   background: var(--of-bg-primary);
   color: var(--of-text-primary);
}

.of-btn-sm {
   padding: 5px 10px;
   font-size: 12px;
}

.of-btn-icon {
   width: 32px;
   height: 32px;
   padding: 0;
   border-radius: var(--of-radius-sm);
   background: var(--of-bg-primary);
   color: var(--of-text-muted);
   border: 1px solid var(--of-border);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: var(--of-transition);
   font-size: 13px;
}

.of-btn-icon:hover {
   background: var(--of-primary-light);
   color: var(--of-primary);
   border-color: var(--of-primary);
}

/* ===== Credential Display ===== */
.of-credential {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
   font-size: 12px;
   color: var(--of-text-secondary);
}

.of-credential-copy {
   cursor: pointer;
   color: var(--of-text-light);
   font-size: 12px;
   transition: var(--of-transition);
}

.of-credential-copy:hover {
   color: var(--of-primary);
}

/* ===== Financial Display ===== */
.of-money {
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   text-align: right;
}

.of-money-positive {
   color: var(--of-text-primary);
}

.of-money-negative {
   color: var(--of-danger);
}

.of-money-zero {
   color: var(--of-text-light);
}

/* ===== Company Link ===== */
.of-company-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--of-text-primary);
   font-weight: 600;
   text-decoration: none !important;
   transition: var(--of-transition);
}

.of-company-link:hover {
   color: var(--of-primary);
}

.of-unread-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 20px;
   height: 20px;
   padding: 0 6px;
   background: var(--of-danger);
   color: white;
   border-radius: var(--of-radius-full);
   font-size: 11px;
   font-weight: 700;
}

/* ===== Status Dot Colors ===== */
.dot-견적요청 {
   background: var(--of-orange);
}
.dot-작업요청 {
   background: var(--of-warning);
}
.dot-작업중 {
   background: var(--of-lime);
}
.dot-컨펌중 {
   background: var(--of-sky);
}
.dot-1차작업완료 {
   background: var(--of-blue-dark);
}
.dot-작업미수금 {
   background: var(--of-danger);
}
.dot-작업완료 {
   background: var(--of-purple);
}
.dot-작업취소 {
   background: var(--of-text-muted);
}

/* ===== D-day ===== */
.of-dday {
   font-weight: 700;
   font-size: 13px;
}

/* ===== Modern Modal ===== */
.of-modal .modal-content {
   border: none;
   border-radius: var(--of-radius-lg);
   box-shadow: var(--of-shadow-lg);
}

.of-modal .modal-header {
   border-bottom: 1px solid var(--of-border-light);
   padding: 20px 24px;
}

.of-modal .modal-title {
   font-size: 18px;
   font-weight: 700;
   color: var(--of-text-primary);
}

.of-modal .modal-body {
   padding: 24px;
}

.of-modal .modal-footer {
   border-top: 1px solid var(--of-border-light);
   padding: 16px 24px;
}

/* ===== Progress Bar (estimate_detail) ===== */
.of-progress-card {
   background: var(--of-bg-white);
   border-radius: var(--of-radius-lg);
   padding: 24px;
   box-shadow: var(--of-shadow-sm);
   border: 1px solid var(--of-border-light);
   margin-bottom: 24px;
}

.of-progress-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
}

.of-progress-title {
   font-size: 15px;
   font-weight: 700;
   color: var(--of-text-primary);
}

.of-progress-stats {
   font-size: 14px;
   color: var(--of-text-muted);
}

.of-progress-stats strong {
   color: var(--of-text-primary);
   font-weight: 700;
}

.of-progress-bar-track {
   height: 12px;
   background: var(--of-bg-primary);
   border-radius: var(--of-radius-full);
   overflow: hidden;
}

.of-progress-bar-fill {
   height: 100%;
   border-radius: var(--of-radius-full);
   transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
   background: var(--of-primary);
}

.of-progress-bar-fill.danger {
   background: var(--of-danger);
}
.of-progress-bar-fill.warning {
   background: var(--of-warning);
}
.of-progress-bar-fill.info {
   background: var(--of-sky);
}
.of-progress-bar-fill.success {
   background: var(--of-success);
}

/* ===== Info Grid (estimate_detail) ===== */
.of-info-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0;
   background: var(--of-bg-white);
   border-radius: var(--of-radius-lg);
   box-shadow: var(--of-shadow-sm);
   border: 1px solid var(--of-border-light);
   overflow: hidden;
   margin-bottom: 24px;
}

.of-info-item {
   padding: 14px 20px;
   border-bottom: 1px solid var(--of-border-light);
   display: flex;
   align-items: center;
   gap: 12px;
}

.of-info-item:nth-child(odd) {
   border-right: 1px solid var(--of-border-light);
}

.of-info-label {
   font-size: 12px;
   font-weight: 600;
   color: var(--of-text-muted);
   min-width: 90px;
   flex-shrink: 0;
}

.of-info-value {
   font-size: 14px;
   font-weight: 500;
   color: var(--of-text-primary);
}

.of-info-value .of-money {
   font-size: 16px;
   font-weight: 700;
}

/* ===== Work List Styles ===== */
.of-work-header {
   background: var(--of-bg-white);
   border-radius: var(--of-radius-lg);
   padding: 24px;
   box-shadow: var(--of-shadow-sm);
   border: 1px solid var(--of-border-light);
   margin-bottom: 24px;
}

.of-work-header-title {
   font-size: 22px;
   font-weight: 700;
   color: var(--of-text-primary);
   margin-bottom: 8px;
}

.of-work-memo {
   background: var(--of-bg-white);
   border-radius: var(--of-radius-lg);
   padding: 20px;
   box-shadow: var(--of-shadow-sm);
   border: 1px solid var(--of-border-light);
   margin-bottom: 24px;
}

.of-work-memo label {
   font-size: 14px;
   font-weight: 600;
   color: var(--of-text-primary);
   margin-bottom: 8px;
   display: block;
}

.of-work-memo textarea {
   border: 1px solid var(--of-border);
   border-radius: var(--of-radius-sm);
   padding: 12px;
   font-size: 14px;
   width: 100%;
   resize: vertical;
   transition: var(--of-transition);
}

.of-work-memo textarea:focus {
   outline: none;
   border-color: var(--of-primary);
   box-shadow: 0 0 0 3px var(--of-primary-light);
}

.of-work-item {
   background: var(--of-bg-white);
   border-radius: var(--of-radius-lg);
   box-shadow: var(--of-shadow-sm);
   border: 1px solid var(--of-border-light);
   margin-bottom: 16px;
   overflow: hidden;
   transition: var(--of-transition);
}

.of-work-item:hover {
   box-shadow: var(--of-shadow-md);
}

.of-work-item.status-작업완료 {
   border-left: 4px solid var(--of-success);
}

.of-work-item.status-작업요청 {
   border-left: 4px solid var(--of-warning);
}

.of-work-item.status-작업취소 {
   border-left: 4px solid var(--of-text-muted);
   opacity: 0.7;
}

.of-work-item.status-작업중 {
   border-left: 4px solid var(--of-lime);
}

.of-work-item.status-컨펌중 {
   border-left: 4px solid var(--of-sky);
}

.of-work-item.status-견적요청 {
   border-left: 4px solid var(--of-orange);
}

.of-work-item-header {
   display: grid;
   grid-template-columns: 40px 1fr;
   gap: 0;
   align-items: stretch;
}

.of-work-item-check {
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--of-bg-primary);
   border-right: 1px solid var(--of-border-light);
}

.of-work-item-check input[type='checkbox'] {
   width: 18px;
   height: 18px;
   cursor: pointer;
   accent-color: var(--of-primary);
}

.of-work-item-body {
   padding: 16px 20px;
}

.of-work-item-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
   flex-wrap: wrap;
   gap: 8px;
}

.of-work-item-round {
   font-size: 16px;
   font-weight: 700;
   color: var(--of-text-primary);
}

.of-work-item-status {
   display: inline-flex;
   align-items: center;
}

.of-work-item-fields {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap: 12px;
}

.of-work-field {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.of-work-field-label {
   font-size: 11px;
   font-weight: 600;
   color: var(--of-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.of-work-field input,
.of-work-field select {
   padding: 8px 10px;
   border: 1px solid var(--of-border);
   border-radius: var(--of-radius-sm);
   font-size: 13px;
   transition: var(--of-transition);
   background: var(--of-bg-white);
}

.of-work-field input:focus,
.of-work-field select:focus {
   outline: none;
   border-color: var(--of-primary);
   box-shadow: 0 0 0 2px var(--of-primary-light);
}

.of-work-item-actions {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 12px;
   padding-top: 12px;
   border-top: 1px solid var(--of-border-light);
   flex-wrap: wrap;
}

/* ===== Content Expand Area ===== */
.of-expand-content {
   border-top: 1px solid var(--of-border-light);
   padding: 20px;
   background: var(--of-bg-primary);
   display: none;
}

.of-expand-content.show {
   display: block;
}

.of-expand-section {
   margin-bottom: 16px;
}

.of-expand-section label {
   font-size: 13px;
   font-weight: 600;
   color: var(--of-text-secondary);
   margin-bottom: 6px;
   display: block;
}

/* ===== Comments ===== */
.of-comments {
   background: var(--of-bg-white);
   border-radius: var(--of-radius-md);
   padding: 16px;
   margin-top: 16px;
}

.of-comments h5 {
   font-size: 14px;
   font-weight: 700;
   color: var(--of-text-primary);
   margin-bottom: 12px;
}

.of-comment-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.of-comment-item {
   margin-bottom: 12px;
   clear: both;
}

.of-comment-bubble {
   display: inline-block;
   max-width: 80%;
   padding: 10px 14px;
   border-radius: 16px;
   font-size: 13px;
   line-height: 1.4;
}

.of-comment-bubble.mine {
   background: var(--of-primary-light);
   color: var(--of-text-primary);
   float: right;
   border-bottom-right-radius: 4px;
}

.of-comment-bubble.other {
   background: var(--of-bg-primary);
   color: var(--of-text-primary);
   float: left;
   border-bottom-left-radius: 4px;
}

.of-comment-meta {
   clear: both;
   font-size: 11px;
   color: var(--of-text-light);
   margin-top: 4px;
}

.of-comment-input {
   display: flex;
   gap: 8px;
   margin-top: 16px;
   padding-top: 12px;
   border-top: 1px solid var(--of-border-light);
}

.of-comment-input input {
   flex: 1;
   padding: 10px 14px;
   border: 1px solid var(--of-border);
   border-radius: var(--of-radius-full);
   font-size: 13px;
   transition: var(--of-transition);
}

.of-comment-input input:focus {
   outline: none;
   border-color: var(--of-primary);
   box-shadow: 0 0 0 2px var(--of-primary-light);
}

/* ===== Estimate Detail Table ===== */
.of-estimate-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
}

.of-estimate-table thead th {
   padding: 12px 14px;
   font-size: 12px;
   font-weight: 600;
   color: var(--of-text-muted);
   background: var(--of-bg-primary);
   border-bottom: 2px solid var(--of-border);
   white-space: nowrap;
   text-align: left;
}

.of-estimate-table tbody tr {
   transition: var(--of-transition);
}

.of-estimate-table tbody tr:hover {
   background: #fafbfc;
}

.of-estimate-table tbody td {
   padding: 12px 14px;
   border-bottom: 1px solid var(--of-border-light);
   font-size: 13px;
   color: var(--of-text-secondary);
   vertical-align: middle;
}

.of-estimate-table tbody tr.completed-row {
   background: var(--of-success-light) !important;
}

.of-estimate-table tbody tr.cancelled-row {
   background: var(--of-danger-light) !important;
}

.of-estimate-table tbody tr.cancelled-row td {
   text-decoration: line-through;
   opacity: 0.5;
}

.of-check {
   width: 20px;
   height: 20px;
   cursor: pointer;
   accent-color: var(--of-primary);
   transition: var(--of-transition);
}

.of-check-cancel {
   accent-color: var(--of-danger);
}

/* ===== Summary Card ===== */
.of-summary-card {
   background: var(--of-bg-white);
   border-radius: var(--of-radius-lg);
   box-shadow: var(--of-shadow-sm);
   border: 1px solid var(--of-border-light);
   overflow: hidden;
}

.of-summary-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 14px 20px;
   border-bottom: 1px solid var(--of-border-light);
}

.of-summary-row:last-child {
   border-bottom: none;
}

.of-summary-row.total {
   background: var(--of-bg-primary);
   font-weight: 700;
}

.of-summary-row.cancelled {
   background: var(--of-danger-light);
   color: var(--of-danger);
}

.of-summary-label {
   font-size: 14px;
   color: var(--of-text-secondary);
}

.of-summary-value {
   font-size: 16px;
   font-weight: 700;
   color: var(--of-text-primary);
   font-variant-numeric: tabular-nums;
}

.of-summary-row.total .of-summary-value {
   font-size: 18px;
   color: var(--of-primary);
}

/* ===== Action Bar ===== */
.of-action-bar {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 16px 0;
   flex-wrap: wrap;
}

/* ===== Filter Reset Button ===== */
.of-filter-reset {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 6px 14px;
   background: var(--of-bg-primary);
   border: 1px solid var(--of-border);
   border-radius: var(--of-radius-full);
   color: var(--of-text-muted);
   font-size: 13px;
   font-weight: 500;
   cursor: pointer;
   transition: var(--of-transition);
}

.of-filter-reset:hover {
   background: var(--of-border-light);
   color: var(--of-text-primary);
}

/* ===== Empty State ===== */
.of-empty {
   text-align: center;
   padding: 40px 20px;
   color: var(--of-text-light);
   font-size: 14px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
   .of-stats-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
   }

   .of-stat-card {
      padding: 12px;
   }

   .of-stat-count {
      font-size: 20px;
   }

   .of-add-form-grid {
      grid-template-columns: 1fr 1fr;
   }

   .of-info-grid {
      grid-template-columns: 1fr;
   }

   .of-info-item:nth-child(odd) {
      border-right: none;
   }

   .of-work-item-fields {
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 480px) {
   .of-stats-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .of-add-form-grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 768px) {
   .of-section-table {
      table-layout: auto;
   }
   .of-section-table .col-subid {
      display: none;
   }
   .of-section-table .col-pw {
      display: none;
   }
   .of-section-table .col-estimate {
      display: none;
   }
   .of-section-table .col-progress {
      display: none;
   }
   .of-section-table thead th,
   .of-section-table tbody td {
      padding: 10px 6px;
      font-size: 12px;
   }
   .of-company-name-link {
      max-width: 120px;
      font-size: 13px;
   }
   .of-company-avatar {
      width: 30px;
      height: 30px;
      font-size: 12px;
      border-radius: 8px;
   }
   .of-company-cell-v2 {
      gap: 8px;
   }
}

/* ===== Checkbox Toggle ===== */
.of-toggle {
   position: relative;
   display: inline-block;
   width: 40px;
   height: 22px;
}

.of-toggle input {
   opacity: 0;
   width: 0;
   height: 0;
}

.of-toggle-slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: var(--of-border);
   border-radius: 22px;
   transition: var(--of-transition);
}

.of-toggle-slider:before {
   content: '';
   position: absolute;
   height: 18px;
   width: 18px;
   left: 2px;
   bottom: 2px;
   background: white;
   border-radius: 50%;
   transition: var(--of-transition);
}

.of-toggle input:checked + .of-toggle-slider {
   background: var(--of-primary);
}

.of-toggle input:checked + .of-toggle-slider:before {
   transform: translateX(18px);
}

/* ===== Password Field ===== */
.of-pw-field {
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.of-pw-mask {
   font-family: monospace;
   font-size: 12px;
   color: var(--of-text-light);
   letter-spacing: 2px;
}

/* ===== CKEditor override ===== */
.of-expand-content .ck-editor__editable {
   min-height: 300px;
   max-width: 100%;
   padding: 12px;
   font-size: 14px;
   border: 1px solid var(--of-border) !important;
   border-radius: var(--of-radius-sm) !important;
   box-shadow: none !important;
   background: var(--of-bg-white) !important;
}

/* ===== File upload area ===== */
.of-file-upload {
   margin-top: 12px;
}

.of-file-list {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 8px;
}

.of-file-item {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
   background: var(--of-primary-light);
   border-radius: var(--of-radius-sm);
   font-size: 12px;
}

.of-file-item a {
   color: var(--of-primary);
   text-decoration: none;
   font-weight: 500;
}

.of-file-item .delete-btn {
   color: var(--of-danger);
   cursor: pointer;
   font-size: 14px;
   background: none;
   border: none;
   padding: 0;
}

/* ===== Company Row Card (fetch_all v3) ===== */
.of-company-row {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 14px 20px;
   background: var(--of-bg-white);
   border-bottom: 1px solid var(--of-border-light);
   transition: var(--of-transition);
   cursor: pointer;
}

.of-company-row:last-child {
   border-bottom: none;
}

.of-company-row:hover {
   background: var(--of-primary-light);
}

.of-company-row.row-urgent {
   background: #fff8f8;
   border-left: 3px solid var(--of-danger);
}

.of-company-row.row-overdue .of-company-balance {
   color: var(--of-danger);
}

.of-company-main {
   flex: 1;
   min-width: 0;
   display: flex;
   align-items: center;
   gap: 10px;
}

.of-company-name-link {
   display: block;
   font-size: 14.5px;
   font-weight: 700;
   color: var(--of-text-primary);
   text-decoration: none !important;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 200px;
   transition: var(--of-transition);
   line-height: 1.3;
}

.of-company-name-link:hover {
   color: var(--of-primary);
}

/* Company cell v2 — avatar + stacked info */
.of-company-cell-v2 {
   display: flex;
   align-items: center;
   gap: 10px;
}

.of-company-avatar {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: var(--of-primary-light);
   color: var(--of-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   font-weight: 800;
   flex-shrink: 0;
   letter-spacing: -0.5px;
   user-select: none;
}

/* Avatar color rotation per row */
.of-section-table tbody tr:nth-child(7n + 1) .of-company-avatar {
   background: #e8f3ff;
   color: #3182f6;
}
.of-section-table tbody tr:nth-child(7n + 2) .of-company-avatar {
   background: #e8faf0;
   color: #00c471;
}
.of-section-table tbody tr:nth-child(7n + 3) .of-company-avatar {
   background: #fff8e6;
   color: #d97706;
}
.of-section-table tbody tr:nth-child(7n + 4) .of-company-avatar {
   background: #f3f0ff;
   color: #8b5cf6;
}
.of-section-table tbody tr:nth-child(7n + 5) .of-company-avatar {
   background: #fff0ee;
   color: #ff6f61;
}
.of-section-table tbody tr:nth-child(7n + 6) .of-company-avatar {
   background: #e3f2fd;
   color: #1976d2;
}
.of-section-table tbody tr:nth-child(7n + 7) .of-company-avatar {
   background: #fce4ec;
   color: #c62828;
}

.of-company-info {
   min-width: 0;
   flex: 1;
}

.of-company-name-row {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-bottom: 3px;
}

.of-company-meta {
   display: flex;
   align-items: center;
   gap: 5px;
   flex-wrap: wrap;
}

.of-company-cell {
   display: flex;
   align-items: center;
   gap: 6px;
}

/* Section Date (left of company name) */
.of-section-date {
   font-size: 11px;
   font-weight: 600;
   color: var(--of-text-muted);
   background: var(--of-bg-primary);
   padding: 2px 6px;
   border-radius: 4px;
   white-space: nowrap;
   min-width: 36px;
   text-align: center;
   flex-shrink: 0;
}

.of-maint-dday {
   font-size: 11px;
   font-weight: 700;
   padding: 1px 5px;
   border-radius: 4px;
   white-space: nowrap;
}
.of-maint-dday.dday-danger {
   background: var(--of-danger-light, #fff0f0);
   color: var(--of-danger, #dc3545);
}
.of-maint-dday.dday-warning {
   background: var(--of-warning-light, #fff8e1);
   color: var(--of-warning, #f59f00);
}
.of-maint-dday.dday-safe {
   background: var(--of-success-light, #eafaf1);
   color: var(--of-success, #28a745);
}

.of-company-badges {
   display: flex;
   align-items: center;
   gap: 4px;
   margin-top: 2px;
   flex-wrap: wrap;
}

/* Urgent row left accent on avatar */
.of-section-table tbody tr.row-urgent .of-company-avatar {
   background: var(--of-danger-light) !important;
   color: var(--of-danger) !important;
   box-shadow: 0 0 0 2px rgba(240, 68, 82, 0.2);
}

/* ===== Section Table (aligned columns) ===== */
.of-section-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 13px;
   table-layout: fixed;
}

.of-section-table thead {
   background: var(--of-bg-primary);
   border-bottom: 2px solid var(--of-border);
}

.of-section-table thead th {
   padding: 8px 12px;
   font-size: 11px;
   font-weight: 700;
   color: var(--of-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.3px;
   white-space: nowrap;
   border-bottom: none;
}

.of-section-table tbody tr {
   border-bottom: 1px solid var(--of-border-light);
   transition: var(--of-transition);
}

.of-section-table tbody tr:last-child {
   border-bottom: none;
}

.of-section-table tbody tr:hover {
   background: var(--of-primary-light);
}

.of-section-table tbody tr.row-urgent {
   background: #fff8f8;
   border-left: 3px solid var(--of-danger);
}

.of-section-table tbody tr.row-overdue {
   background: #fffbf0;
}

.of-section-table tbody td {
   padding: 14px 12px;
   vertical-align: middle;
   color: var(--of-text-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
}

/* Column widths */
.of-section-table .col-company {
   width: 26%;
}
.of-section-table .col-id {
   width: 12%;
}
.of-section-table .col-subid {
   width: 10%;
}
.of-section-table .col-pw {
   width: 6%;
   text-align: center;
}
.of-section-table .col-estimate {
   width: 11%;
   text-align: right;
   font-variant-numeric: tabular-nums;
}
.of-section-table .col-balance {
   width: 11%;
   text-align: right;
   font-variant-numeric: tabular-nums;
   font-weight: 700;
}
.of-section-table .col-progress {
   width: 9%;
   text-align: center;
}
.of-section-table .col-actions {
   width: 15%;
}

.of-section-table .val-danger {
   color: var(--of-danger) !important;
   font-weight: 700;
}
.of-section-table .val-muted {
   color: var(--of-text-light) !important;
}

.of-company-finance {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-shrink: 0;
}

.of-company-finance-item {
   text-align: right;
   min-width: 80px;
}

.of-company-finance-item .label {
   font-size: 10px;
   font-weight: 600;
   color: var(--of-text-light);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.of-company-finance-item .value {
   font-size: 14px;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   color: var(--of-text-primary);
}

.of-company-finance-item .value.negative {
   color: var(--of-danger);
}

.of-company-finance-item .value.zero {
   color: var(--of-text-light);
}

.of-company-creds {
   display: none;
   align-items: center;
   gap: 8px;
   flex-shrink: 0;
}

.of-company-row:hover .of-company-creds {
   display: flex;
}

.of-company-cred-pill {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 3px 8px;
   background: var(--of-bg-primary);
   border-radius: var(--of-radius-full);
   font-family: 'NanumGothic', 'Nanum Gothic', 'Malgun Gothic', '맑은 고딕', sans-serif;
   font-size: 11px;
   color: var(--of-text-secondary);
   cursor: pointer;
   transition: var(--of-transition);
   white-space: nowrap;
}

.of-company-cred-pill:hover {
   background: var(--of-primary-light);
   color: var(--of-primary);
}

.of-company-cred-pill i {
   font-size: 10px;
   opacity: 0.5;
}

.of-company-actions {
   display: flex;
   align-items: center;
   gap: 4px;
   flex-shrink: 0;
}

/* ===== Compact Section Header (color-coded) ===== */
.of-section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 20px;
   background: var(--of-bg-primary);
   border-bottom: 1px solid var(--of-border);
   border-left: 4px solid var(--of-text-light);
   cursor: pointer;
   user-select: none;
   transition: var(--of-transition);
}

.of-section-header:hover {
   background: var(--of-border-light);
}

/* Color-coded section headers */
#section_견적요청 > .of-section-header {
   border-left-color: var(--of-sec-견적요청);
   background: var(--of-sec-견적요청-bg);
}
#section_작업요청 > .of-section-header {
   border-left-color: var(--of-sec-작업요청);
   background: var(--of-sec-작업요청-bg);
}
#section_작업중 > .of-section-header {
   border-left-color: var(--of-sec-작업중);
   background: var(--of-sec-작업중-bg);
}
#section_컨펌중 > .of-section-header {
   border-left-color: var(--of-sec-컨펌중);
   background: var(--of-sec-컨펌중-bg);
}
#section_1차\20작업완료 > .of-section-header,
[id='section_1차 작업완료'] > .of-section-header {
   border-left-color: var(--of-sec-1차작업완료);
   background: var(--of-sec-1차작업완료-bg);
}
#section_작업완료 > .of-section-header {
   border-left-color: var(--of-sec-작업완료);
   background: var(--of-sec-작업완료-bg);
}
#section_작업취소 > .of-section-header {
   border-left-color: var(--of-sec-작업취소);
   background: var(--of-sec-작업취소-bg);
}
[id='section_작업 미수금'] > .of-section-header {
   border-left-color: var(--of-sec-작업미수금);
   background: var(--of-sec-작업미수금-bg);
}

.of-section-title {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 700;
   color: var(--of-text-primary);
}

/* D-day indicator — text only, no background */
.of-dday {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: -0.3px;
   line-height: 1;
   white-space: nowrap;
   color: #94a3b8;
}
.of-dday .dday-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: #94a3b8;
   flex-shrink: 0;
}
.of-dday.dday-danger {
   color: #dc2626;
}
.of-dday.dday-danger .dday-dot {
   background: #dc2626;
   box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}
.of-dday.dday-warning {
   color: #b45309;
}
.of-dday.dday-warning .dday-dot {
   background: #f59e0b;
   box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}
.of-dday.dday-safe {
   color: #059669;
}
.of-dday.dday-safe .dday-dot {
   background: #10b981;
}
.of-dday.dday-done {
   color: #6b7280;
}
.of-dday.dday-done .dday-dot {
   background: #9ca3af;
}

.of-section-toggle {
   font-size: 12px;
   color: var(--of-text-muted);
   transition: transform 0.2s;
}

.of-section-toggle.collapsed {
   transform: rotate(-90deg);
}

.of-section-body {
   overflow: hidden;
   transition: max-height 0.3s ease;
}

.of-section-body.collapsed {
   max-height: 0 !important;
}

/* ===== Two-Column Work Layout (work_list v3) ===== */
.of-work-two-col {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0;
   border-top: 1px solid var(--of-border-light);
}

.of-work-left {
   padding: 20px;
   border-right: 1px solid var(--of-border-light);
}

.of-work-right {
   padding: 20px;
   background: var(--of-bg-primary);
}

@media (max-width: 992px) {
   .of-work-two-col {
      grid-template-columns: 1fr;
   }
   .of-work-left {
      border-right: none;
      border-bottom: 1px solid var(--of-border-light);
   }
}

/* ===== Inline Estimate Checklist ===== */
.of-checklist-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
}

.of-checklist-title {
   font-size: 13px;
   font-weight: 700;
   color: var(--of-text-primary);
   display: flex;
   align-items: center;
   gap: 6px;
}

.of-checklist-progress {
   font-size: 12px;
   font-weight: 600;
   color: var(--of-text-muted);
}

.of-checklist-items {
   list-style: none;
   padding: 0;
   margin: 0;
}

.of-checklist-item {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   padding: 8px 10px;
   border-radius: var(--of-radius-sm);
   transition: var(--of-transition);
   border-bottom: 1px solid var(--of-border-light);
}

.of-checklist-item:last-child {
   border-bottom: none;
}

.of-checklist-item:hover {
   background: var(--of-bg-white);
}

.of-checklist-item.completed {
   background: var(--of-success-light);
}

.of-checklist-item.completed .of-checklist-text {
   text-decoration: line-through;
   color: var(--of-text-light);
}

.of-checklist-item.cancelled {
   background: var(--of-danger-light);
   opacity: 0.5;
}

.of-checklist-item.cancelled .of-checklist-text {
   text-decoration: line-through;
}

.of-checklist-check {
   flex-shrink: 0;
   margin-top: 2px;
}

.of-checklist-content {
   flex: 1;
   min-width: 0;
}

.of-checklist-text {
   font-size: 13px;
   color: var(--of-text-secondary);
   line-height: 1.4;
   word-break: break-word;
}

.of-checklist-meta {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 2px;
   font-size: 11px;
   color: var(--of-text-light);
}

.of-checklist-amount {
   font-weight: 600;
   font-variant-numeric: tabular-nums;
}

.of-checklist-empty {
   text-align: center;
   padding: 20px;
   color: var(--of-text-light);
   font-size: 13px;
}

.of-checklist-summary {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 12px;
   margin-top: 8px;
   background: var(--of-bg-white);
   border-radius: var(--of-radius-sm);
   border: 1px solid var(--of-border-light);
}

.of-checklist-summary .total-label {
   font-size: 12px;
   font-weight: 600;
   color: var(--of-text-muted);
}

.of-checklist-summary .total-value {
   font-size: 14px;
   font-weight: 700;
   color: var(--of-primary);
   font-variant-numeric: tabular-nums;
}

/* ===== Mini Progress Bar ===== */
.of-mini-progress {
   width: 60px;
   height: 6px;
   background: var(--of-border-light);
   border-radius: var(--of-radius-full);
   overflow: hidden;
   flex-shrink: 0;
}

.of-mini-progress-fill {
   height: 100%;
   border-radius: var(--of-radius-full);
   background: var(--of-primary);
   transition: width 0.4s ease;
}

.of-mini-progress-fill.danger {
   background: var(--of-danger);
}
.of-mini-progress-fill.warning {
   background: var(--of-warning);
}
.of-mini-progress-fill.success {
   background: var(--of-success);
}

/* ===== Compact Work Summary Row ===== */
.of-work-summary-row {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 20px;
   cursor: pointer;
   transition: var(--of-transition);
}

.of-work-summary-row:hover {
   background: var(--of-primary-light);
}

.of-work-round-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: var(--of-radius-sm);
   font-size: 13px;
   font-weight: 800;
   flex-shrink: 0;
}

.of-work-summary-info {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.of-work-summary-title {
   font-size: 14px;
   font-weight: 600;
   color: var(--of-text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.of-work-summary-meta {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 2px;
   font-size: 12px;
   color: var(--of-text-muted);
}

.of-work-summary-right {
   display: flex;
   align-items: center;
   gap: 16px;
   flex-shrink: 0;
}

.of-work-summary-amount {
   text-align: right;
}

.of-work-summary-amount .label {
   font-size: 10px;
   color: var(--of-text-light);
}

.of-work-summary-amount .value {
   font-size: 14px;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   color: var(--of-text-primary);
}

/* ===== Round status colors for badge ===== */
.round-badge-견적요청 {
   background: var(--of-orange-light);
   color: var(--of-orange);
}
.round-badge-작업요청 {
   background: var(--of-warning-light);
   color: var(--of-warning);
}
.round-badge-작업중 {
   background: var(--of-lime-light);
   color: var(--of-lime);
}
.round-badge-컨펌중 {
   background: var(--of-sky-light);
   color: var(--of-sky);
}
.round-badge-1차작업완료 {
   background: var(--of-blue-dark-light);
   color: var(--of-blue-dark);
}
.round-badge-작업완료 {
   background: var(--of-success-light);
   color: var(--of-success);
}
.round-badge-작업취소 {
   background: var(--of-bg-primary);
   color: var(--of-text-muted);
}

/* ===== Compact field pair ===== */
.of-field-pair {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 6px 0;
   border-bottom: 1px solid var(--of-border-light);
}

.of-field-pair:last-child {
   border-bottom: none;
}

.of-field-pair .fp-label {
   font-size: 12px;
   font-weight: 600;
   color: var(--of-text-muted);
}

.of-field-pair .fp-value {
   font-size: 13px;
   font-weight: 500;
   color: var(--of-text-primary);
}

.of-field-pair .fp-value input,
.of-field-pair .fp-value select {
   padding: 5px 8px;
   border: 1px solid var(--of-border);
   border-radius: var(--of-radius-sm);
   font-size: 13px;
   background: var(--of-bg-white);
   transition: var(--of-transition);
   text-align: right;
   max-width: 140px;
}

.of-field-pair .fp-value input:focus,
.of-field-pair .fp-value select:focus {
   outline: none;
   border-color: var(--of-primary);
   box-shadow: 0 0 0 2px var(--of-primary-light);
}

/* ===== Detail link ===== */
.of-detail-link {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-size: 12px;
   font-weight: 600;
   color: var(--of-primary);
   text-decoration: none !important;
   transition: var(--of-transition);
}

.of-detail-link:hover {
   color: var(--of-primary-dark);
   text-decoration: underline !important;
}

/* Breadcrumb */
.of-breadcrumb {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 13px;
   padding: 8px 0;
}

.of-breadcrumb a {
   color: var(--of-text-muted);
   text-decoration: none;
   transition: color 0.15s;
}

.of-breadcrumb a:hover {
   color: var(--of-primary);
   text-decoration: underline;
}

.of-breadcrumb-sep {
   color: var(--of-text-light);
   font-size: 11px;
}

.of-breadcrumb-current {
   color: var(--of-text-primary);
   font-weight: 600;
}

/* ===== Work List Status Sections ===== */
.of-wl-section-header {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 12px 20px;
   margin-top: 16px;
   font-size: 14px;
   font-weight: 700;
   color: var(--of-text-secondary);
   border-left: 5px solid var(--of-text-light);
   background: var(--of-bg-primary);
   border-radius: var(--of-radius-sm);
   cursor: pointer;
   user-select: none;
}
.of-wl-section-header .wl-sec-status-icon {
   font-size: 14px;
   width: 22px;
   text-align: center;
}
.of-wl-section-header .wl-sec-count {
   font-size: 12px;
   font-weight: 600;
   color: #fff;
   padding: 2px 10px;
   border-radius: var(--of-radius-full);
   margin-left: auto;
}
.of-wl-section-header.sec-active {
   border-left-color: var(--of-lime);
   background: var(--of-lime-light);
   color: #2d6a06;
}
.of-wl-section-header.sec-active .wl-sec-count {
   background: var(--of-lime);
}
.of-wl-section-header.sec-active .wl-sec-status-icon {
   color: var(--of-lime);
}

.of-wl-section-header.sec-estimate {
   border-left-color: #f59f00;
   background: #fff8e1;
   color: #8a6d00;
}
.of-wl-section-header.sec-estimate .wl-sec-count {
   background: #f59f00;
}
.of-wl-section-header.sec-estimate .wl-sec-status-icon {
   color: #f59f00;
}

.of-wl-section-header.sec-request {
   border-left-color: #e67700;
   background: #fff3e0;
   color: #7a4100;
}
.of-wl-section-header.sec-request .wl-sec-count {
   background: #e67700;
}
.of-wl-section-header.sec-request .wl-sec-status-icon {
   color: #e67700;
}

.of-wl-section-header.sec-pending {
   border-left-color: var(--of-warning);
   background: var(--of-warning-light);
}
.of-wl-section-header.sec-pending .wl-sec-count {
   background: var(--of-warning);
}

.of-wl-section-header.sec-confirm {
   border-left-color: #7c3aed;
   background: #f5f3ff;
   color: #5b21b6;
}
.of-wl-section-header.sec-confirm .wl-sec-count {
   background: #7c3aed;
}
.of-wl-section-header.sec-confirm .wl-sec-status-icon {
   color: #7c3aed;
}

.of-wl-section-header.sec-first-done {
   border-left-color: #0ea5e9;
   background: #e0f7fa;
   color: #0369a1;
}
.of-wl-section-header.sec-first-done .wl-sec-count {
   background: #0ea5e9;
}
.of-wl-section-header.sec-first-done .wl-sec-status-icon {
   color: #0ea5e9;
}

.of-wl-section-header.sec-done {
   border-left-color: var(--of-success);
   background: var(--of-success-light);
   color: #15803d;
}
.of-wl-section-header.sec-done .wl-sec-count {
   background: var(--of-success);
}
.of-wl-section-header.sec-done .wl-sec-status-icon {
   color: var(--of-success);
}

.of-wl-section-header.sec-cancel {
   border-left-color: #ef4444;
   background: #fef2f2;
   color: #991b1b;
}
.of-wl-section-header.sec-cancel .wl-sec-count {
   background: #ef4444;
}
.of-wl-section-header.sec-cancel .wl-sec-status-icon {
   color: #ef4444;
}

/* ===== Inline Field Rows (compact horizontal) ===== */
.of-field-row {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 10px 0;
   border-bottom: 1px solid var(--of-border-light);
   flex-wrap: wrap;
}
.of-field-row:last-child {
   border-bottom: none;
}
.of-field-row .fr-item {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: 12px;
}
.of-field-row .fr-label {
   font-weight: 600;
   color: var(--of-text-muted);
   white-space: nowrap;
}
.of-field-row .fr-value {
   color: var(--of-text-primary);
   font-weight: 500;
}
.of-field-row input[type='date'],
.of-field-row input[type='text'],
.of-field-row input[type='number'],
.of-field-row select {
   padding: 4px 8px;
   border: 1px solid var(--of-border);
   border-radius: var(--of-radius-sm);
   font-size: 12px;
   background: var(--of-bg-white);
   transition: var(--of-transition);
}
.of-field-row input:focus,
.of-field-row select:focus {
   outline: none;
   border-color: var(--of-primary);
   box-shadow: 0 0 0 2px var(--of-primary-light);
}
.of-field-row .fr-remaining {
   font-size: 11px;
   font-weight: 600;
   padding: 1px 6px;
   border-radius: var(--of-radius-full);
   background: var(--of-bg-primary);
   color: var(--of-text-muted);
}
.of-field-row .fr-remaining.urgent {
   background: var(--of-danger-light);
   color: var(--of-danger);
}

/* ===== Status change button group in summary ===== */
.of-status-btn-group {
   display: inline-flex;
   gap: 4px;
   flex-wrap: wrap;
}
.of-status-btn {
   padding: 3px 10px;
   border: 1px solid var(--of-border);
   border-radius: var(--of-radius-full);
   font-size: 10px;
   font-weight: 600;
   background: var(--of-bg-white);
   color: var(--of-text-muted);
   cursor: pointer;
   transition: all 0.15s ease;
   white-space: nowrap;
   line-height: 1.4;
}
.of-status-btn:hover {
   border-color: var(--of-primary);
   color: var(--of-primary);
   background: var(--of-primary-light);
}
.of-status-btn.active {
   border-color: transparent;
   color: #fff;
   font-weight: 700;
}
.of-status-btn.active[data-val='견적요청'] {
   background: #f59e0b;
}
.of-status-btn.active[data-val='작업요청'] {
   background: #f97316;
}
.of-status-btn.active[data-val='작업중'] {
   background: var(--of-lime);
}
.of-status-btn.active[data-val='컨펌중'] {
   background: var(--of-sky);
}
.of-status-btn.active[data-val='1차 작업완료'] {
   background: #8b5cf6;
}
.of-status-btn.active[data-val='작업완료'] {
   background: var(--of-success);
}
.of-status-btn.active[data-val='작업취소'] {
   background: #94a3b8;
}
.of-status-btn.active[data-val='not_yet'] {
   background: #94a3b8;
}

/* ===== Toggle button group (계산서/결제) ===== */
.of-toggle-btn-group {
   display: inline-flex;
   border: 1px solid var(--of-border);
   border-radius: var(--of-radius-sm);
   overflow: hidden;
}
.of-toggle-btn {
   padding: 4px 10px;
   border: none;
   border-right: 1px solid var(--of-border);
   font-size: 11px;
   font-weight: 500;
   background: var(--of-bg-white);
   color: var(--of-text-muted);
   cursor: pointer;
   transition: all 0.15s ease;
   white-space: nowrap;
}
.of-toggle-btn:last-child {
   border-right: none;
}
.of-toggle-btn:hover {
   background: var(--of-bg-primary);
   color: var(--of-text-primary);
}
.of-toggle-btn.active {
   background: var(--of-primary);
   color: #fff;
   font-weight: 600;
}
.of-toggle-btn.active.btn-warning {
   background: #f59e0b;
}
.of-toggle-btn.active.btn-success {
   background: var(--of-success);
}

/* ===== Balance badge on work item ===== */
.of-balance-badge {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   padding: 2px 8px;
   border-radius: var(--of-radius-full);
   font-size: 10px;
   font-weight: 700;
   background: #fee2e2;
   color: #dc2626;
   white-space: nowrap;
   letter-spacing: -0.3px;
}
.of-balance-badge i {
   font-size: 8px;
}

/* ===== Paid complete badge on work item ===== */
.of-paid-badge {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   padding: 2px 8px;
   border-radius: var(--of-radius-full);
   font-size: 10px;
   font-weight: 700;
   background: #dcfce7;
   color: #16a34a;
   white-space: nowrap;
   letter-spacing: -0.3px;
}
.of-paid-badge i {
   font-size: 8px;
}

/* ===== Paid complete inline indicator ===== */
.of-paid-complete {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-size: 12px;
   font-weight: 700;
   color: #16a34a !important;
   background: #dcfce7;
   padding: 2px 10px;
   border-radius: var(--of-radius-full);
   white-space: nowrap;
}
.of-paid-complete i {
   font-size: 10px;
}

/* ===== Summary pills (계산서/결제 on list row) ===== */
.of-summary-pill {
   display: inline-flex;
   align-items: center;
   gap: 3px;
   padding: 1px 7px;
   border-radius: 4px;
   font-size: 10px;
   font-weight: 600;
   line-height: 1.6;
   white-space: nowrap;
   vertical-align: middle;
   background: #f1f5f9;
   color: #64748b;
}
.of-summary-pill i {
   font-size: 9px;
}
.of-summary-pill.pill-amber {
   background: #fef3c7;
   color: #92400e;
}
.of-summary-pill.pill-green {
   background: #d1fae5;
   color: #065f46;
}
.of-summary-pill.pill-blue {
   background: #dbeafe;
   color: #1e40af;
}
.of-summary-pill.pill-urgent {
   background: #fee2e2;
   color: #dc2626;
   animation: pulse-urgent 2s infinite;
}
@keyframes pulse-urgent {
   0%,
   100% {
      opacity: 1;
   }
   50% {
      opacity: 0.6;
   }
}

/* Date info badges in field row */
.fr-customer-date {
   background: #fef3c7 !important;
   color: #92400e !important;
}
.fr-scheduled-date {
   background: #dbeafe !important;
   color: #1e40af !important;
}
.fr-urgent-flag {
   background: #fee2e2 !important;
   color: #dc2626 !important;
   font-weight: 700 !important;
}

/* ===== Progress percentage label ===== */
.of-progress-pct {
   font-size: 11px;
   font-weight: 700;
   margin-top: 2px;
}
.of-progress-pct.pct-done {
   color: var(--of-success);
}
.of-progress-pct.pct-mid {
   color: var(--of-primary);
}
.of-progress-pct.pct-low {
   color: var(--of-warning);
}

/* ===== Add Item Inline ===== */
.of-add-item-row {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
   border-top: 1px dashed var(--of-border);
   margin-top: 4px;
}
.of-add-item-row input {
   flex: 1;
   padding: 6px 10px;
   border: 1px solid var(--of-border);
   border-radius: var(--of-radius-sm);
   font-size: 12px;
   background: var(--of-bg-white);
}
.of-add-item-row input:focus {
   outline: none;
   border-color: var(--of-primary);
   box-shadow: 0 0 0 2px var(--of-primary-light);
}
.of-add-item-row button {
   flex-shrink: 0;
   width: 28px;
   height: 28px;
   border: none;
   border-radius: var(--of-radius-sm);
   background: var(--of-primary);
   color: #fff;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   transition: var(--of-transition);
}
.of-add-item-row button:hover {
   background: var(--of-primary-dark, #2563eb);
   transform: scale(1.05);
}

/* ===== Password display ===== */
.of-pw-pill {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   padding: 3px 8px;
   background: var(--of-danger-light);
   border-radius: var(--of-radius-full);
   font-family: 'SF Mono', 'Monaco', monospace;
   font-size: 11px;
   color: var(--of-danger);
   cursor: pointer;
   transition: var(--of-transition);
   white-space: nowrap;
}
.of-pw-pill:hover {
   background: var(--of-danger);
   color: #fff;
}
.of-pw-pill i {
   font-size: 10px;
   opacity: 0.7;
}