/* ============================================================
   Peta4PL Components — Hope UI 디자인
   Bootstrap 4 JS(modal/tab)와 클래스 계약 호환
   ============================================================ */

/* ══════════════ Layout Shell ══════════════ */

.app-shell { display: flex; min-height: 100vh; }

/* ── Sidebar ── Hope 원본 구조: 흰 배경 / 로고 / 구분선 / 섹션 라벨 / 파란 활성 메뉴 */
.sidebar-left {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1030;
    width: var(--h-sidebar-width);
    background: var(--h-sidebar-bg);
    border-right: 1px solid var(--h-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width var(--h-transition);
}

.sidebar-left .collapse-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-bottom: var(--h-s6);
}

/* 로고 */
.sidebar-left .logo {
    display: flex;
    align-items: center;
    min-height: var(--h-header-height);
    padding: 0 var(--h-s6);
    border-bottom: 1px solid var(--h-border);
    margin-bottom: var(--h-s1);
}
.sidebar-left .logo a { display: flex; align-items: center; }
.sidebar-left .logo img { max-height: 38px; width: auto; }

/* 업체 로고가 없을 때 표시되는 기본 로고 */
.logo-fallback { display: flex; align-items: center; gap: var(--h-s3); }

.logo-mark {
    display: grid;
    grid-template-columns: repeat(2, 10px);
    gap: var(--h-s1);
    flex-shrink: 0;
}
.logo-mark i { width: 10px; height: 10px; border-radius: 3px; background: var(--h-primary); }
.logo-mark i:nth-child(2), .logo-mark i:nth-child(3) { background: var(--h-primary-light); }

.sidebar-left .logo-title {
    font-family: var(--h-font-display);
    font-size: 19px;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--h-text);
    white-space: nowrap;
}

/* 메뉴 그룹 — 그룹 사이에 Hope처럼 구분선 */
.sidebar-nav { padding: var(--h-s3) var(--h-s3) var(--h-s4); }
.sidebar-nav + .sidebar-nav {
    border-top: 1px solid var(--h-border);
    padding-top: var(--h-s4);
}

.sidebar-nav small,
.sidebar-nav .text-muted small,
.sidebar-nav > div > small {
    display: block;
    padding: var(--h-s1) var(--h-s3) var(--h-s2);
    font-size: 12px;
    letter-spacing: 0;
    color: var(--h-text-faint);
    text-transform: none;
}

.nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav.flex-column { flex-direction: column; }

.nav-item { list-style: none; }

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--h-s3);
    padding: 10px var(--h-s3);
    margin-bottom: var(--h-s1);
    border-radius: var(--h-radius);
    color: var(--h-sidebar-text);
    font-size: 15px;
    cursor: pointer;
    transition: background-color var(--h-transition), color var(--h-transition);
}

.nav-link:hover {
    background-color: var(--h-sidebar-hover-bg);
    color: var(--h-primary);
}

.nav-link.active,
.nav-item.active > .nav-link {
    background-color: var(--h-sidebar-active-bg);
    color: var(--h-sidebar-active-text);
}

.nav-link i,
.nav-link .fa {
    width: 22px;
    text-align: center;
    font-size: 16px;
    flex-shrink: 0;
}

.nav-link.active i,
.nav-item.active > .nav-link i { color: inherit !important; }

/* ── Main ──
   주의: 서브페이지가 #main-wrapper 안으로 주입되므로 레이아웃(여백)은 .main-col이 담당.
   과거 템플릿의 .main-wrapper 클래스에 margin을 주면 중첩 시 여백이 두 번 먹는다. */
.main-col {
    flex: 1;
    min-width: 0;
    margin-left: var(--h-sidebar-width);
    background: var(--h-bg);
    display: flex;
    flex-direction: column;
}

/* 상단 헤더 — Hope 원본: 흰 배경 / pill 검색창 / 우측 아바타+이름 */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--h-s4);
    min-height: var(--h-header-height);
    padding: 0 var(--h-pad-page);   /* 아래 .content-wrapper 와 좌우 정렬을 맞춘다 */
    background: var(--h-surface);
    border-bottom: 1px solid var(--h-border);
}

/* 헤더 검색창 */
.header-search { position: relative; flex: 1; max-width: 320px; }
.header-search i {
    position: absolute;
    left: var(--h-s4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--h-text-faint);
    font-size: 14px;
    pointer-events: none;
}
.header-search .form-control {
    padding: var(--h-ctrl-py) var(--h-ctrl-px) var(--h-ctrl-py) var(--h-s10);
    border-radius: var(--h-radius-pill);
    background: var(--h-surface);
}

/* 우측 사용자 영역 */
.header-user {
    display: flex;
    align-items: center;
    gap: var(--h-s3);
}

.header-user .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--h-primary);
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.header-user .meta { line-height: 1.35; }
.header-user .meta .name { display: block; font-size: 14px; color: var(--h-text); }
.header-user .meta .role { display: block; font-size: 12px; color: var(--h-text-muted); }

.content-wrapper {
    padding: var(--h-pad-page);
    animation: h-fade-in .3s ease;
}

@keyframes h-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* 페이지 헤더 */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--h-s4);
    margin-bottom: var(--h-s6);
}

.page-title {
    font-size: 22px;
    margin: 0;
    letter-spacing: -0.02em;
}

.page-subtitle {
    font-size: 13px;
    color: var(--h-text-muted);
    margin: var(--h-s1) 0 0;
}

@media (max-width: 991.98px) {
    .sidebar-left { width: var(--h-sidebar-width-sm); }
    .sidebar-left .logo-title,
    .sidebar-left .sidebar-nav small { display: none; }
    .nav-link { justify-content: center; padding: var(--h-s3); }
    .main-col { margin-left: var(--h-sidebar-width-sm); }
    .app-header { padding: 0 var(--h-s5); }
    .content-wrapper { padding: var(--h-s5); }
}

/* ══════════════ Card (widget) ══════════════ */

.widget {
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius);
    box-shadow: var(--h-shadow);
    overflow: hidden;
}

.widget-block { padding: 0; }

.widget-content { padding: var(--h-pad-card); }

.widget-title {
    font-size: 16px;
    margin: 0;
    padding: 0;
    letter-spacing: -0.02em;
}

/* 카드 헤더로 쓰이는 header > .widget-title */
header > .widget-title {
    padding: 0 0 var(--h-s3);
    font-size: 18px;
}

/* Hope 카드에는 상단 강조선이 없다 (JS가 붙이는 클래스라 여기서 무력화) */
.widget.headerline-dark { border-top: 1px solid var(--h-border); }
.widget.widget-dark { background: var(--h-text); color: #fff; }

/* ══════════════ Buttons ══════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--h-s2);
    padding: var(--h-ctrl-py) var(--h-ctrl-px);
    border: 1px solid transparent;
    border-radius: var(--h-radius-sm);
    font-size: 14px;
    line-height: var(--h-ctrl-line);
    color: var(--h-text);
    background: transparent;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    user-select: none;
    transition: background-color var(--h-transition), border-color var(--h-transition),
                box-shadow var(--h-transition), transform .1s ease, color var(--h-transition);
}

.btn:hover { text-decoration: none; }
.btn:focus { outline: 0; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: .55; pointer-events: none; }

/* 높이 30px */
.btn-sm {
    padding: var(--h-ctrl-py-sm) var(--h-ctrl-px-sm);
    font-size: 13px;
    line-height: var(--h-ctrl-line-sm);
    border-radius: var(--h-radius-sm);
}
/* 높이 48px */
.btn-lg { padding: var(--h-ctrl-py-lg) var(--h-ctrl-px-lg); font-size: 15px; }
.btn-block { display: flex; width: 100%; }

.btn-icon { padding: 0; width: 40px; height: 40px; }

/* ── variants — 색 = 의미 ──
   primary(청록) 주요 행동 · info(파랑) 조회/보조 · success(초록) 승인/진행
   warning(주황) 수정 · danger(빨강) 삭제/취소 · secondary(회색) 비활성 전용 */
.btn-primary   { background: var(--h-primary); border-color: var(--h-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus {
    background: var(--h-primary-dark); border-color: var(--h-primary-dark); color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--h-primary) 35%, transparent);
}

/* secondary 는 "비활성 수정 버튼"(cart.html disabled) 에만 쓰인다 — 회색이 의미 */
.btn-secondary { background: var(--h-text-faint); border-color: var(--h-text-faint); color: #fff; }
.btn-secondary:hover { background: var(--h-text-muted); border-color: var(--h-text-muted); color: #fff; }

.btn-success   { background: var(--h-success); border-color: var(--h-success); color: #fff; }
.btn-success:hover { background: var(--h-success-dark); border-color: var(--h-success-dark); color: #fff;
    box-shadow: 0 4px 14px rgba(26, 160, 83, .3); }

.btn-info      { background: var(--h-info); border-color: var(--h-info); color: #fff; }
.btn-info:hover { background: var(--h-info-dark); border-color: var(--h-info-dark); color: #fff;
    box-shadow: 0 4px 14px rgba(46, 124, 246, .3); }

.btn-warning   { background: var(--h-warning); border-color: var(--h-warning); color: #fff; }
.btn-warning:hover { background: var(--h-warning-dark); border-color: var(--h-warning-dark); color: #fff;
    box-shadow: 0 4px 14px rgba(241, 106, 27, .3); }

.btn-danger    { background: var(--h-danger); border-color: var(--h-danger); color: #fff; }
.btn-danger:hover { background: #9d281a; border-color: #9d281a; color: #fff;
    box-shadow: 0 4px 14px rgba(192, 50, 33, .3); }

/* light = 브랜드 틴트 아이콘 버튼 (장바구니 등) — 회색 대신 브랜드 기운 */
.btn-light     { background: var(--h-primary-subtle); border-color: var(--h-primary-subtle); color: var(--h-primary); }
.btn-light:hover { background: var(--h-primary-100); border-color: var(--h-primary-100); color: var(--h-primary-dark); }

/* JS가 "담기" 버튼에 붙이는 클래스 — 이름은 계약이라 유지.
   기본: 검정 테두리 + 검정 텍스트 (가시성) / hover: 메인색 배경 + 흰 텍스트 */
.btn-outline-dark {
    background: #fff; border-color: var(--h-text); color: var(--h-text);
}
.btn-outline-dark:hover, .btn-outline-dark:focus {
    background: var(--h-primary); border-color: var(--h-primary); color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--h-primary) 35%, transparent);
}

.btn-outline-primary {
    background: transparent; border-color: var(--h-primary); color: var(--h-primary);
}
.btn-outline-primary:hover { background: var(--h-primary); color: #fff; }

/* ── 파스텔 버튼 (장바구니 테이블 툴바/행 안의 보조 액션) ──
   JS가 생성: 전체선택=.add-th-button.btn-primary, 선택삭제=.add-th-button.btn-danger,
   수정=.table 안 .btn-warning (비활성일 땐 .btn-secondary).
   테이블 안에서 원색이 과해서 톤을 낮춘 파스텔 — 의미(색상 계열)는 유지. */
/* 테이블 헤더에 붙는 버튼은 각지게 (라운드 없음) */
.add-th-button { border-radius: 0; }

.add-th-button.btn-primary {
    background: var(--h-primary-subtle);
    border-color: transparent;
    color: var(--h-primary-dark);
}
.add-th-button.btn-primary:hover, .add-th-button.btn-primary:focus {
    background: var(--h-primary-100);
    border-color: transparent;
    color: var(--h-primary-darker);
    box-shadow: none;
}

.add-th-button.btn-danger {
    background: var(--h-danger-light);
    border-color: transparent;
    color: var(--h-danger);
}
.add-th-button.btn-danger:hover, .add-th-button.btn-danger:focus {
    background: color-mix(in srgb, var(--h-danger) 24%, #fff);
    border-color: transparent;
    color: #8f2013;
    box-shadow: none;
}

.table .btn-warning,
.footable .btn-warning {
    background: var(--h-warning-light);
    border-color: transparent;
    color: var(--h-warning-dark);
}
.table .btn-warning:hover, .table .btn-warning:focus,
.footable .btn-warning:hover, .footable .btn-warning:focus {
    background: color-mix(in srgb, var(--h-warning) 28%, #fff);
    border-color: transparent;
    color: var(--h-warning-dark);
    box-shadow: none;
}

/* 수정 버튼 비활성 상태 — 파스텔 회색 (눌리지 않음이 분명하게) */
.table .btn-secondary,
.footable .btn-secondary {
    background: var(--h-surface-alt);
    border-color: var(--h-border);
    color: var(--h-text-faint);
}
.table .btn-secondary:hover,
.footable .btn-secondary:hover {
    background: var(--h-surface-alt);
    border-color: var(--h-border);
    color: var(--h-text-faint);
    box-shadow: none;
}

/* ══════════════ Forms ══════════════ */

.form-group { margin-bottom: var(--h-s4); }

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--h-s2) * -1);
    margin-left: calc(var(--h-s2) * -1);
}
.form-row > [class*="col-"] { padding-right: var(--h-s2); padding-left: var(--h-s2); }

label, .col-form-label {
    display: inline-block;
    margin-bottom: var(--h-s2);
    font-size: 13px;
    color: var(--h-text-muted);
}

.form-control {
    display: block;
    width: 100%;
    padding: var(--h-ctrl-py) var(--h-ctrl-px);
    font-size: 14px;
    line-height: var(--h-ctrl-line);
    color: var(--h-text);
    background-color: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    transition: border-color var(--h-transition), box-shadow var(--h-transition);
}

.form-control::placeholder { color: var(--h-text-faint); }

.form-control:focus {
    outline: 0;
    border-color: var(--h-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-primary) 16%, transparent);
}

.form-control:disabled,
.form-control[readonly] { background-color: var(--h-surface-alt); opacity: 1; }

select.form-control { appearance: none; padding-right: var(--h-s8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a92a6' d='M1.4 0L6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .75rem center; }

textarea.form-control { min-height: 88px; resize: vertical; }

.form-text { display: block; margin-top: var(--h-s1); font-size: 12px; color: var(--h-text-muted); }

/* input-group */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}
.input-group > .form-control { flex: 1 1 auto; width: 1%; min-width: 0;
    border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.input-group-btn { display: flex; }

/* checkbox / radio */
.form-check {
    position: relative;
    display: block;
    padding-left: var(--h-s6);
    margin-bottom: var(--h-s2);
}
.form-check-inline { display: inline-flex; align-items: center; margin-right: var(--h-s4); }

.form-check-input {
    position: absolute;
    left: 0;
    top: .2rem;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--h-primary);
    cursor: pointer;
}
.form-check-inline .form-check-input { position: static; margin-right: var(--h-s2); }

.form-check-label { margin-bottom: 0; color: var(--h-text); cursor: pointer; }

.form-inline { display: flex; flex-flow: row wrap; align-items: center; gap: var(--h-s2); }
.form-inline .form-control { width: auto; display: inline-block; }

/* ══════════════ Tables ══════════════ */

.table {
    width: 100%;
    margin-bottom: 0;
    color: var(--h-text);
    background: transparent;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: var(--h-pad-cell-y) var(--h-pad-cell-x);
    vertical-align: middle;
    border-top: 1px solid var(--h-border);
    font-size: 14px;
}

.table thead th {
    vertical-align: bottom;
    border-top: 0;
    border-bottom: 1px solid var(--h-border);
    background: var(--h-surface-alt);
    color: var(--h-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    padding: var(--h-pad-cell-y) var(--h-pad-cell-x);
}

.table tbody tr { transition: background-color .12s ease; }
.table-hover tbody tr:hover,
.table tbody tr:hover { background-color: var(--h-primary-subtle); }

.table thead.thead-light th { background: var(--h-surface-alt); }

.table-outline { border: 1px solid var(--h-border); border-radius: var(--h-radius); }

.table .form-control {
    padding: var(--h-ctrl-py-sm) var(--h-ctrl-px-sm);
    line-height: var(--h-ctrl-line-sm);
    font-size: 13px;
}
.table .btn-sm { padding: var(--h-ctrl-py-sm) var(--h-ctrl-px-sm); }

/* ══════════════ Badge / Progress ══════════════ */

.badge {
    display: inline-block;
    padding: var(--h-s1) 10px;
    font-size: 11.5px;
    line-height: 1;
    border-radius: var(--h-radius-pill);
    white-space: nowrap;
    vertical-align: baseline;
}

.badge-primary { background: var(--h-primary-subtle); color: var(--h-primary); }
.badge-success { background: var(--h-success-light); color: var(--h-success); }
.badge-warning { background: var(--h-warning-light); color: var(--h-warning-dark); }
.badge-danger  { background: var(--h-danger-light);  color: var(--h-danger); }
.badge-info    { background: #d9f7f9; color: var(--h-info); }
.badge-hint    { background: var(--h-border); color: var(--h-text-muted); }

.progress {
    display: flex;
    height: 8px;
    overflow: hidden;
    background-color: var(--h-border);
    border-radius: var(--h-radius-pill);
}
.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--h-primary);
    transition: width .5s ease;
}

/* ══════════════ Modal (Bootstrap 4 JS 호환) ══════════════ */

.modal {
    position: fixed;
    top: 0; left: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}

/* 내용이 길면 모달 전체가 스크롤되도록 (Bootstrap 4 동작과 동일) */
.modal.show { display: block; overflow-x: hidden; overflow-y: auto; }
.modal.fade .modal-dialog { transform: translate(0, -30px); transition: transform .3s ease-out; }
.modal.show .modal-dialog { transform: none; }

.modal-open { overflow: hidden; }

.modal-dialog {
    position: relative;
    width: auto;
    max-width: 640px;
    margin: var(--h-s8) auto;
    pointer-events: none;
}
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 3.5rem); }
.modal-lg { max-width: 880px; }
.modal-sm { max-width: 400px; }

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background: var(--h-surface);
    border: 0;
    border-radius: var(--h-radius-lg);
    box-shadow: var(--h-shadow-lg);
    outline: 0;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--h-pad-bar-y) var(--h-pad-card);
    border-bottom: 1px solid var(--h-border);
}
.modal-title { font-size: 17px; margin: 0; }

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--h-pad-card);
    max-height: 70vh;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--h-s2);
    padding: var(--h-pad-bar-y) var(--h-pad-card);
    border-top: 1px solid var(--h-border);
    background: var(--h-surface-alt);
}

.modal-backdrop {
    position: fixed;
    top: 0; left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-color: #0d1330;
}
.modal-backdrop.fade { opacity: 0; transition: opacity .2s linear; }
.modal-backdrop.show { opacity: .45; }

.close {
    float: right;
    font-size: 22px;
    line-height: 1;
    color: var(--h-text-muted);
    background: transparent;
    border: 0;
    opacity: .8;
    cursor: pointer;
}
.close:hover { opacity: 1; color: var(--h-text); }

/* ══════════════ Tabs ══════════════ */

.nav-tabs {
    display: flex;
    flex-wrap: nowrap;   /* w-50 두 개 + gap 이면 100%를 넘겨 줄바꿈되므로 gap 없이 nowrap */
    border-bottom: 1px solid var(--h-border);
}
.nav-tabs .nav-item { margin-bottom: -1px; }
.nav-tabs .nav-link {
    border-radius: 0;
    border-bottom: 2px solid transparent;
    color: var(--h-text-muted);
    padding: var(--h-s3) var(--h-s4);
    background: transparent;
}
.nav-tabs .nav-link:hover { background: transparent; color: var(--h-text); }
.nav-tabs .nav-link.active {
    color: var(--h-primary);
    background: transparent;
    border-bottom-color: var(--h-primary);
    box-shadow: none;
}
.nav-fill .nav-item { flex: 1 1 auto; text-align: center; }
.nav-fill .nav-link { justify-content: center; }

.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }
.tab-pane.fade { opacity: 0; transition: opacity .15s linear; }
.tab-pane.fade.show { opacity: 1; }

/* ══════════════ Navbar (검색바 등) ══════════════ */

.navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--h-s2) var(--h-s4);
}
.navbar-light { background: transparent; }

.search-form .form-control { padding-left: var(--h-s10); }
.input-group-built-in {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--h-text-faint);
    pointer-events: none;
    z-index: 2;
}

/* ══════════════ Login ══════════════ */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--h-s8) var(--h-s4);
    background:
        radial-gradient(1200px 600px at 15% 0%, rgba(0, 172, 168, .10), transparent 60%),
        radial-gradient(900px 500px at 100% 100%, rgba(54, 155, 255, .07), transparent 55%),
        var(--h-bg);
}

.login-card {
    width: 100%;
    max-width: 440px;
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-lg);
    box-shadow: var(--h-shadow-lg);
    padding: var(--h-s10) var(--h-s8);
}

.login-brand { text-align: center; margin-bottom: var(--h-s8); }
.login-brand h1 {
    font-family: var(--h-font-display);
    font-size: 24px;
    margin: 0 0 var(--h-s1);
}
.login-brand p { color: var(--h-text-muted); font-size: 13px; margin: 0; }

.login-logo-mark {
    display: grid;
    grid-template-columns: repeat(2, 12px);
    gap: var(--h-s1);
    justify-content: center;
    margin: 0 auto var(--h-s4);
    width: max-content;
}
.login-logo-mark span {
    width: 12px; height: 12px; border-radius: 3px; background: var(--h-primary);
}
.login-logo-mark span:nth-child(2) { background: var(--h-primary-light); }
.login-logo-mark span:nth-child(3) { background: var(--h-primary-light); }

/* ══════════════ Page patterns ══════════════ */

/* 필터/검색 툴바 */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--h-s3);
    padding: var(--h-s4) var(--h-pad-card);
    border-bottom: 1px solid var(--h-border);
    background: var(--h-surface-alt);
}
.toolbar .form-control { width: auto; min-width: 220px; }
.toolbar-label {
    font-size: 13px;
    color: var(--h-text-muted);
    margin: 0;
}
.toolbar-spacer { margin-left: auto; }

/* 금액 요약 바 */
.summary-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--h-s6);
    padding: var(--h-pad-bar-y) var(--h-pad-card);
    background: var(--h-surface);
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius);
    box-shadow: var(--h-shadow);
}
.summary-item { display: flex; align-items: baseline; gap: var(--h-s2); }
.summary-item .label { font-size: 13px; color: var(--h-text-muted); }
.summary-item .value { font-size: 18px; letter-spacing: -0.02em; }

/* 하단 액션 영역 */
.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--h-s2);
}
.page-actions .spacer { margin-left: auto; }

/* 발주대기(admin) 하단의 선택취소·선택진행 — 파스텔.
   계열색은 유지해서 의미(취소=빨강 / 진행=초록)는 그대로 읽히게 한다.
   주문완료·다운로드 같은 주요 CTA(.btn-primary)는 대상이 아니므로 solid 유지. */
.page-actions .btn-danger {
    background: var(--h-danger-light);
    border-color: transparent;
    color: var(--h-danger);
}
.page-actions .btn-danger:hover, .page-actions .btn-danger:focus {
    background: color-mix(in srgb, var(--h-danger) 24%, #fff);
    border-color: transparent;
    color: #8f2013;
    box-shadow: none;
}

.page-actions .btn-success {
    background: var(--h-success-light);
    border-color: transparent;
    color: var(--h-success-dark);
}
.page-actions .btn-success:hover, .page-actions .btn-success:focus {
    background: color-mix(in srgb, var(--h-success) 26%, #fff);
    border-color: transparent;
    color: #0f6b34;
    box-shadow: none;
}

/* 모달 상세 정보 목록 */
.detail-list { margin: 0; }
.detail-row {
    display: flex;
    gap: var(--h-s4);
    padding: var(--h-s3) 0;
    border-bottom: 1px solid var(--h-border);
}
.detail-row:last-child { border-bottom: 0; }
.detail-row > dt {
    flex: 0 0 112px;
    font-size: 13px;
    color: var(--h-text-muted);
    margin: 0;
}
.detail-row > dd {
    flex: 1;
    margin: 0;
    font-size: 14px;
    color: var(--h-text);
    min-width: 0;
}
.detail-row > dd h6 { margin: 0 0 var(--h-s1); font-size: 14px; }
.detail-row > dd h6:last-child { margin-bottom: 0; }
.detail-row > dd h6:empty { display: none; }

/* 상품목록 상단 툴바 (list.html) */
.list-toolbar {
    display: flex;
    align-items: center;
    gap: var(--h-s4);
    padding: var(--h-pad-page) var(--h-pad-page) 0;   /* 좌우를 .content-wrapper 와 맞춤 */
    background: transparent;
}
/* 검색 폼 — 아이콘은 인풋 안에, 버튼은 인풋에 붙여서 한 덩어리로 */
.list-toolbar .search-form {
    position: relative;
    display: flex;
    flex: 1;
    max-width: 420px;
}
.list-toolbar .search-icon {
    position: absolute;
    left: var(--h-s4);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: var(--h-text-faint);
    font-size: 14px;
    pointer-events: none;
}
.list-toolbar .search-form .form-control {
    flex: 1;
    min-width: 0;
    padding-left: var(--h-s10);
    border-radius: var(--h-radius-sm) 0 0 var(--h-radius-sm);
    background: var(--h-surface);
}
.list-toolbar .search-form .btn {
    flex: none;
    margin-left: -1px;
    border-radius: 0 var(--h-radius-sm) var(--h-radius-sm) 0;
}

.list-toolbar .nav { list-style: none; margin: 0 0 0 auto; padding: 0; }

.cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    padding: 2px 6px;
    font-size: 10.5px;
    background: var(--h-danger);
    color: #fff;
    line-height: 1;
}

/* ── 상품 카드 ──
   JS가 `.row`를 4개마다 닫고 `.col-lg-3`(25% 고정)을 박아 넣기 때문에
   카드 폭이 화면과 무관하게 커진다. JS를 건드리지 않고 고치기 위해
   .row 래퍼를 display:contents 로 해제하고 #list 자체를 그리드로 만든다.
   → 화면 폭에 따라 카드 개수가 자동으로 늘고, 폭은 220~260px로 일정하게 유지된다. */
#list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: var(--h-s5);
    align-items: stretch;
}

#list > .row { display: contents; }
/* base.css의 .row::after(clearfix)가 그리드 아이템으로 잡혀 빈 칸을 만든다 */
#list > .row::after { display: none; }

#list [class*="col-"] {
    /* 그리드 아이템으로 동작하도록 col-* 의 flex/padding 무력화 */
    flex: none;
    max-width: none;
    width: auto;
    padding: 0;
    margin: 0;
    display: flex;
}
#list [class*="col-"] > section { width: 100%; }

#list .widget {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--h-transition), transform var(--h-transition);
}
#list .widget:hover { box-shadow: var(--h-shadow-lg); transform: translateY(-3px); }

#list .widget-block {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--h-s4);
}

/* 이미지 영역 — 높이 통일해서 카드 높이가 들쭉날쭉하지 않게 */
#list .widget-block img {
    display: block;
    width: 100%;
    height: 92px !important;
    object-fit: contain;
    margin: 0 0 var(--h-s3);
    background: var(--h-surface-alt);
    border-radius: var(--h-radius-sm);
    padding: var(--h-s2);
}

#list .widget-title {
    font-size: 13.5px;
    line-height: 1.45;
    margin-bottom: var(--h-s1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}

#list .widget-block p {
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: var(--h-s1);
}
#list .widget-block p:empty { display: none; }

#list .widget-block h6.text-muted {
    font-size: 15px;
    color: var(--h-primary) !important;
    margin: var(--h-s1) 0 0;
}

#list .widget-block > .row { display: block; margin: 0; }
#list .widget-block > .row > .widget-content {
    padding: var(--h-s1) 0 0;
    font-size: 11.5px;
    color: var(--h-text-muted);
}
/* 단위 표기 — 원본 JS가 text-danger를 붙이지만 경고가 아니므로 중립 뱃지로 */
#list .widget-block > .row .text-danger {
    display: inline-block;
    margin: 0;
    padding: 2px var(--h-s2);
    border-radius: var(--h-radius-pill);
    background: var(--h-surface-alt);
    border: 1px solid var(--h-border);
    color: var(--h-text-muted) !important;
    font-size: 11px;
}

#list .widget-block > footer.d-flex {
    gap: var(--h-s2);
    align-items: center;
    margin-top: auto;
    padding-top: var(--h-s3);
    border-top: 1px solid var(--h-border);
}
/* 수량 입력 + 담기 버튼 — 둘 다 sm 높이(30px)로 통일 */
#list .widget-block > footer.d-flex .form-control {
    width: 72px;
    flex: 0 0 72px;
    text-align: center;
    padding: var(--h-ctrl-py-sm) var(--h-ctrl-px-sm);
    line-height: var(--h-ctrl-line-sm);
    font-size: 13px;
}
#list .widget-block > footer.d-flex .btn {
    flex: 1;
    margin: 0;
    width: auto;
    padding: var(--h-ctrl-py-sm) var(--h-ctrl-px-sm);
    line-height: var(--h-ctrl-line-sm);
    font-size: 13px;
}

/* 페이지네이션 컨테이너 */
/* 이 요소는 .tui-pagination 자신이다.
   display:flex 를 주면 tui 의 height:28px 고정 + inline-block 레이아웃과 충돌해서
   next/prev 화살표가 잘려 보인다(overflow:hidden). 정렬은 tui 기본 text-align:center 사용. */
#tui-pagination-container {
    height: auto;
    padding: 0 var(--h-pad-page) var(--h-s10);
    text-align: center;
}

/* 빈 상태 */
.empty-state {
    padding: var(--h-s10) var(--h-s4);
    text-align: center;
    color: var(--h-text-faint);
}
.empty-state i { font-size: 32px; display: block; margin-bottom: var(--h-s3); opacity: .5; }

/* ══════════════ 3rd-party skins ══════════════ */

/* footable — 라이브러리가 만드는 필터/검색 영역도 같은 컨트롤 규격으로 */
.footable-filtering > th {
    padding: var(--h-s4) var(--h-pad-cell-x) !important;
    background: var(--h-surface) !important;
    border-bottom: 1px solid var(--h-border) !important;
    text-transform: none;
    letter-spacing: 0;
}

.footable-filtering .form-control,
.footable-filtering input[type="text"] {
    height: auto;
    padding: var(--h-ctrl-py) var(--h-ctrl-px);
    line-height: var(--h-ctrl-line);
    font-size: 14px;
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius-sm);
    box-shadow: none;
}

.footable-filtering .input-group { gap: 0; }
.footable-filtering .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* 컬럼 필터 드롭다운은 쓰지 않는다.
   footable이 만드는 토글 버튼 안은 Bootstrap 3의 <span class="caret">라서
   우리 CSS에는 정의가 없고 "빈 버튼"으로 보인다 → 토글과 메뉴를 함께 숨긴다. */
.footable-filtering .dropdown-toggle,
.footable-filtering .dropdown-menu { display: none !important; }

/* 남는 건 검색 실행/초기화 버튼 하나 */
.footable-filtering .input-group-btn > .btn,
.footable-filtering .btn {
    padding: var(--h-ctrl-py) var(--h-ctrl-px);
    line-height: var(--h-ctrl-line);
    font-size: 14px;
    border-radius: 0 var(--h-radius-sm) var(--h-radius-sm) 0;
    background: var(--h-primary);
    border: 1px solid var(--h-primary);
    color: #fff;
}
/* fooicon 은 FontAwesome 글리프 — 색/크기만 맞춘다 */
.footable-filtering .btn .fooicon { color: #fff; font-size: 14px; }

/* 우측에 붙는 기간 선택 폼 (JS가 append) */
.footable-filtering .form-inline { margin: 0; }
.footable-filtering .form-inline .form-control { min-width: 220px; }

/* 결과 없음 — footable 기본이 font-size:30px 라 같은 특정도로 맞춰야 덮인다 */
table.footable > tbody > tr.footable-empty > td {
    padding: var(--h-s10) var(--h-s4);
    text-align: center;
    color: var(--h-text-faint);
    font-size: 15px;
}

.footable > thead > tr > th {
    background: var(--h-surface-alt);
    color: var(--h-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--h-border) !important;
    padding: var(--h-pad-cell-y) var(--h-pad-cell-x);
}
.footable > tbody > tr > td { border-color: var(--h-border); padding: var(--h-pad-cell-y) var(--h-pad-cell-x); }
.footable > tbody > tr:hover { background: var(--h-primary-subtle); }

/* toastr */
#toast-container > div {
    border-radius: var(--h-radius);
    box-shadow: var(--h-shadow-lg);
    opacity: .98;
    font-family: var(--h-font);
}
#toast-container > .toast-success { background-color: var(--h-success); }
#toast-container > .toast-error   { background-color: var(--h-danger); }
#toast-container > .toast-info    { background-color: var(--h-info); }
#toast-container > .toast-warning { background-color: var(--h-warning); }

/* tui-pagination —
   화살표(.tui-prev/.tui-next 등)도 .tui-page-btn 을 함께 갖는다.
   원본이 height/line-height/padding 으로 아이콘 위치를 잡으므로 그 값은 건드리지 않고
   테두리·색만 바꾼다. */
.tui-pagination .tui-page-btn {
    border: 1px solid var(--h-border);
    border-width: 1px;                 /* 원본은 1px 0 이라 좌우 테두리가 없다 */
    border-radius: var(--h-radius-sm);
    margin: 0 2px;
    color: var(--h-text-muted);
    background-color: var(--h-surface);
    vertical-align: middle;
}

/* 숫자 버튼 */
.tui-pagination a.tui-page-btn:hover,
.tui-pagination .tui-page-btn:not(.tui-is-disabled):hover {
    border-color: var(--h-primary);
    color: var(--h-primary);
}

.tui-pagination strong.tui-page-btn,
.tui-pagination .tui-page-btn.tui-is-selected {
    background-color: var(--h-primary);
    border-color: var(--h-primary);
    color: #fff;
}

/* 화살표 버튼 — 아이콘이 스프라이트라 크기를 원본대로 유지해야 안 잘린다 */
.tui-pagination .tui-first,
.tui-pagination .tui-prev,
.tui-pagination .tui-next,
.tui-pagination .tui-last {
    width: auto;
    min-width: 28px;
    height: 28px;
    line-height: 26px;
    padding: 0 var(--h-s2);
    overflow: hidden;
}

/* 비활성 화살표 */
.tui-pagination .tui-page-btn.tui-is-disabled {
    opacity: .4;
    cursor: default;
    border-color: var(--h-border);
    color: var(--h-text-faint);
}

/* daterangepicker */
.daterangepicker {
    border: 1px solid var(--h-border);
    border-radius: var(--h-radius);
    box-shadow: var(--h-shadow-lg);
    font-family: var(--h-font);
}
.daterangepicker td.active,
.daterangepicker td.active:hover { background-color: var(--h-primary); }
.daterangepicker td.in-range { background-color: var(--h-primary-subtle); }
.daterangepicker .drp-buttons .btn { font-size: 13px; }

/* daum 우편번호 레이어 */
#layer {
    border: 1px solid var(--h-border) !important;
    border-radius: var(--h-radius);
    box-shadow: var(--h-shadow-lg);
    background: #fff;
}