/*
 * 쇼핑몰 관리자 — 앱 소유 CSS (shop-admin.css)
 *
 * 표준(h4u-back s4u-web static/css) 뒤에 마지막으로 읽는다. 표준 파일은 고치지 않는다.
 * 여기에는 "표준 comp-* 클래스에 없는 카페24 고유 모양"만 둔다 (개발표준 02 §7.3).
 *   - 카페24 LNB 고정 표시(드로어 고정)
 *   - 검색 표(라벨|값) 안의 촘촘한 입력·기간 버튼
 *   - 주문 목록의 주문 단위 tbody 묶음, 품목(썸네일+옵션) 셀, 금액 우측 정렬, 수령자 행
 *   - 주문상세·CS 새 창의 머리 줄, 결제 카드, 환불 합계, 메모 패널
 *   - 상품 등록 옵션 버블·품목 표
 * 실제 구현: static/css/shop-admin.css 로 옮기고 base.html / popup.html 의 마지막 link 로 추가.
 * 색은 표준 토큰(--color-primary-*, --color-gray-*, --primary50 …)을 우선 쓴다.
 */

/* ---------- 0. 공통 보조 ---------- */
.comp-hidden { display: none !important; }
.comp-collapse { display: none; }
.comp-collapse.active { display: block; }
.comp-text-error { color: var(--color-error-main, #d9302c); }
.comp-text-primary { color: var(--color-primary-600, #1f5fd6); }
.comp-text-muted { color: var(--color-gray-500, #999); }
.comp-text-sub { color: var(--color-gray-600, #666); }
.comp-text-strong { font-weight: 700; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.required { color: var(--color-error-main, #d9302c); }
.comp-help {
  display: inline-block; width: 16px; height: 16px; line-height: 14px; border: 1px solid var(--color-gray-400, #999);
  color: var(--color-gray-500, #999); border-radius: 50%; text-align: center; font-size: 11px; cursor: help;
  margin-left: 2px; vertical-align: middle; font-weight: 400;
}
.comp-counter { color: var(--color-gray-500, #999); font-size: 12px; margin-left: 4px; }
.comp-tips { color: var(--color-gray-600, #666); font-size: 12px; margin-top: 4px; }
.comp-notice { background: var(--color-gray-50, #f7f9fc); border: 1px solid var(--color-gray-200, #dde4ef); padding: 8px 12px; color: var(--color-gray-700, #555); margin: 8px 0; border-radius: 4px; }
.comp-notice.warning { background: #fff5f4; border-color: #f2c8c6; color: var(--color-error-main, #d9302c); }
.comp-sub-title { font-size: 14px; font-weight: 700; margin: 18px 0 6px; }
.comp-sub-title:first-child { margin-top: 0; }

/* 카페24 입력 폭 (표준 .form-table .comp-input{width:100%} 보다 우선) */
.comp-input.comp-w40, .form-table .comp-input.comp-w40 { width: 48px; }
.comp-input.comp-w50, .form-table .comp-input.comp-w50 { width: 58px; }
.comp-input.comp-w60, .form-table .comp-input.comp-w60 { width: 68px; }
.comp-input.comp-w70, .form-table .comp-input.comp-w70 { width: 80px; }
.comp-input.comp-w80, .form-table .comp-input.comp-w80 { width: 90px; }
.comp-input.comp-w100, .form-table .comp-input.comp-w100 { width: 120px; }
.comp-input.comp-w120, .form-table .comp-input.comp-w120 { width: 130px; }
.comp-input.comp-w140, .form-table .comp-input.comp-w140 { width: 150px; }
.comp-input.comp-w160, .form-table .comp-input.comp-w160 { width: 170px; }
.comp-input.comp-w200, .form-table .comp-input.comp-w200 { width: 210px; }
.comp-input.comp-w240, .form-table .comp-input.comp-w240 { width: 250px; }
.comp-input.comp-w300, .form-table .comp-input.comp-w300 { width: 300px; max-width: 100%; }
.comp-input.comp-w400, .form-table .comp-input.comp-w400 { width: 400px; max-width: 100%; }
.comp-input.comp-w-full, .form-table .comp-input.comp-w-full { width: 100%; max-width: none; }
.comp-datepicker.comp-w100 { width: 130px !important; }

/* 카페24는 한 줄에 입력·버튼을 이어 붙인다: 표 안 입력/버튼을 촘촘하게 */
.comp-shop-admin .form-table .comp-input,
.comp-popup .form-table .comp-input,
.comp-modal .form-table .comp-input { height: 32px; min-height: 32px; padding-top: 0; padding-bottom: 0; vertical-align: middle; font-size: 13px; }
.form-table select.comp-input, .comp-table-list select.comp-input { width: auto; }
.form-table td input.comp-input:not([class*="comp-w"]):not(.comp-datepicker) { width: 200px; }
.form-table textarea.comp-input, .comp-modal textarea.comp-input { height: auto; width: 100%; padding: 6px 8px; }
.form-table .comp-btn:not(.large), .comp-table-list .comp-btn:not(.xs), .comp-toolbar .comp-btn, .comp-btn-bar .comp-btn:not(.xs) { height: 32px; min-height: 32px; padding: 0 12px; font-size: 13px; vertical-align: middle; }
.form-table .comp-checkbox, .form-table .comp-radio { margin: 2px 12px 2px 0; vertical-align: middle; }
.form-table td .comp-line { margin: 3px 0; }
.form-table .comp-inline-gap > * { margin-right: 4px; }
.form-table th { width: 160px; }
/* 항목명이 칸보다 길면 단어 단위로 줄바꿈 — 표준 nowrap 이면 글자·물음표(?)가 칸 밖으로 나감 */
.form-table th, .comp-od-table th { white-space: normal; word-break: keep-all; }
.comp-link { color: var(--color-primary-600, #1f5fd6); text-decoration: underline; cursor: pointer; }
input[type="number"].comp-input { text-align: right; }

/* ---------- 1. 레이아웃: 카페24 LNB 고정 ---------- */
/* 표준 template1 은 레일에 마우스를 올릴 때만 드로어가 뜬다(theme-blue.css .rail-wrap:hover .rail-drawer).
   카페24 관리자는 LNB 가 늘 펼쳐져 있으므로 시안·구현 모두 고정 표시하고 본문을 그만큼 민다. */
.comp-shop-admin .rail-drawer.comp-lnb-pinned { display: block; }
.comp-shop-admin[data-template="template1"] .content-area { margin-left: 180px; }
.comp-shop-admin .drawer-group { justify-content: flex-start; }
.comp-shop-admin .drawer-group .comp-lnb-setting { margin-left: auto; }
.comp-drawer-sep { border: 0; border-top: 1px solid var(--primary20, #dde3ee); margin: 8px 4px; }
.header-right .comp-mall { font-weight: 700; margin-right: 16px; white-space: nowrap; }
.header-right .comp-mall a { font-weight: 400; margin-left: 6px; font-size: 13px; }
/* 모바일: 테마 햄버거가 오른쪽 16px 에 절대배치(32px)라 그 자리를 비운다 — 안 비우면 '쇼핑몰 바로가기'가 햄버거를 덮음 */
@media (max-width: 768px) { .header-right .comp-mall { margin-right: 44px; } }
/* 공통 style.css 의 body{min-width:1440px}·layout.css 의 .page-wrapper{min-width:1280px} 때문에
   1025~1439px(일반 노트북)에서 화면 전체가 가로 스크롤되고 오른쪽(제목 옆 버튼 등)이 잘림 → 최소폭 해제.
   1024px 이하는 공통 layout.css 가 이미 해제한다. 넓은 목록 표는 표 감싸개 안에서만 가로 스크롤 */
html body { min-width: 0; }
.page-wrapper.comp-shop-admin { min-width: 0; }
/* 고정폭 입력칸(comp-w140·w200 …)이 좁은 칸보다 넓어 삐져나감(모바일, 1280px 4열 검색표) → 칸 폭까지만 */
.comp-input[class*="comp-w"], .form-table .comp-input[class*="comp-w"] { max-width: 100%; }
/* 파일 첨부칸(기본 폭 275px)이 분류 관리 등 좁은 칸 밖으로 */
.form-table input[type="file"], .comp-table input[type="file"] { max-width: 100%; }
/* 회원가입 항목 설정 표: 공통 표 칸은 한 줄+말줄임이라 1025~1279px 에서 '추가 설정' 선택지가 "…"로 잘려 고를 수 없음 → 줄바꿈 */
.comp-table.comp-mem-wrap-table th, .comp-table.comp-mem-wrap-table td { white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; }
.comp-table.comp-mem-wrap-table td .comp-radio, .comp-table.comp-mem-wrap-table td .comp-checkbox { white-space: normal; max-width: 100%; }
@media (max-width: 768px) {
  /* 기간 버튼(오늘~5년)이 검색표 칸 오른쪽 밖으로 나감 → 줄바꿈 */
  .comp-date-btns { flex-wrap: wrap; max-width: 100%; margin-bottom: 4px; }
}
/* 모바일 메뉴 오버레이(#mMenuOverlay)는 #app 밖이라 .app / .comp-shop-admin 범위 규칙(아이콘·문자 로고)이 안 닿는다 → 같은 규칙을 오버레이에도 */
#mMenuOverlay .nav-ico {
  display: inline-block; width: 22px; height: 22px; background-color: currentColor; flex: 0 0 auto;
  -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain;
}
#mMenuOverlay .header-logo .logo-mark {
  background: var(--primary50, #1f5fd6) !important; -webkit-mask: none !important; mask: none !important;
  color: #fff !important; font-size: 13px !important; font-weight: 800; text-indent: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 56px !important; height: 32px !important; border-radius: 6px; overflow: visible;
}
#mMenuOverlay .m-menu-role { min-width: 0; padding-right: 40px; } /* 테마가 닫기(X)를 오른쪽 위에 절대배치 → 자리 비움 */
#mMenuOverlay .comp-m-menu-user { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mMenuOverlay .comp-m-menu-user .comp-link { margin-left: 6px; }
#mMenuOverlay .m-menu-close { flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
#mMenuOverlay .m-menu-close img { width: 18px; height: 18px; }
.header-right .comp-session { color: var(--color-gray-500, #888); margin-right: 10px; font-size: 13px; }
.page-title .page-util { display: flex; gap: 6px; align-items: center; }
.comp-guide { cursor: pointer; }

/* ---------- 2. 검색 영역 (카페24: 라벨|값 표 + 가운데 버튼) ---------- */
.comp-search-table .search-form { display: block; padding: 0; }
.comp-search-table .form-table { margin-bottom: 0; }
.comp-search-table .comp-search-detail-toggle { text-align: right; padding: 6px 12px; border: 1px solid var(--color-gray-200); border-top: 0; background: #fff; }
/* 테마의 검색 폼 세로 간격(gap 12px)만큼 끌어올려 검색 표 마지막 행과 테두리를 잇는다 */
.search-container .search-form > .comp-search-detail-toggle { margin-top: -12px; }
/* 상세검색 열기/닫기 화살표 — 문구는 JS 가 바꿔 끼우므로 아이콘은 CSS 로, 펼치면 위로 */
.comp-search-detail-toggle a::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; display: inline-block; margin-left: 5px; vertical-align: 1px; transition: transform .15s; }
.comp-detail-open .comp-search-detail-toggle a::after { transform: rotate(180deg); }
.comp-search-table .comp-search-detail { display: none; }
.comp-search-table .search-form.comp-detail-open .comp-search-detail { display: table-row-group; }
.comp-search-table .search-actions { display: flex; justify-content: center; gap: 8px; padding: 14px 0 4px; }
.comp-date-btns { display: inline-flex; margin-right: 6px; vertical-align: middle; }
.comp-date-btns .comp-btn { border-radius: 0 !important; margin-left: -1px; min-width: 0 !important; padding: 0 10px !important; }
.comp-date-btns .comp-btn.active { background: var(--color-gray-700, #4a505a); color: #fff; border-color: var(--color-gray-700, #4a505a); position: relative; }
.comp-keyword-row { margin: 3px 0; }

/* ---------- 3. 탭 ---------- */
.comp-tabs-line { margin: 16px 0 0; flex-wrap: wrap; }
.comp-tabs-line .comp-tab { margin-bottom: -2px; }
.comp-tabs-pill { border-bottom: 0 !important; gap: 4px !important; flex-wrap: wrap; margin: 10px 0; }
.comp-tabs-pill .comp-tab { padding: 4px 12px; border: 1px solid var(--color-gray-300, #c5cad3) !important; background: #fff; border-radius: 4px; font-size: 13px; min-height: 0; height: auto; }
.comp-tabs-pill .comp-tab.active { background: var(--color-gray-700, #4a505a); border-color: var(--color-gray-700, #4a505a) !important; color: #fff; }
.comp-anchor-tabs { display: flex; flex-wrap: wrap; border: 1px solid var(--color-gray-200); background: #fff; margin-bottom: 12px; position: sticky; top: 0; z-index: 5; }
.comp-anchor-tabs a { padding: 8px 12px; text-decoration: none; color: var(--color-gray-600, #666); border-right: 1px solid var(--color-gray-200); }
.comp-anchor-tabs a.active, .comp-anchor-tabs a:hover { color: var(--color-primary-600, #1f5fd6); font-weight: 700; }

/* ---------- 4. 목록 ---------- */
.comp-status-summary { display: flex; border: 1px solid var(--color-gray-200); background: #fff; margin: 16px 0 0; border-radius: 4px; }
.comp-status-summary .comp-status-item { flex: 1; text-align: center; padding: 10px 4px; border-right: 1px solid var(--color-gray-200); }
.comp-status-summary .comp-status-item:last-child { border-right: 0; }
.comp-status-summary .comp-status-item .comp-status-label { color: var(--color-gray-600); display: block; }
.comp-status-summary .comp-status-item .comp-status-num { font-size: 18px; font-weight: 700; color: var(--color-primary-600); text-decoration: underline; cursor: pointer; }
.comp-list-wrap { background: #fff; border: 1px solid var(--color-gray-200); border-top: 0; padding: 10px 12px 14px; }
.comp-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 8px; flex-wrap: wrap; }
.comp-toolbar .comp-toolbar-count { font-size: 14px; }
.comp-toolbar .comp-toolbar-count b { color: var(--color-primary-600); }
.comp-toolbar .comp-toolbar-right { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.comp-toolbar .comp-toolbar-right select.comp-input { height: 32px; width: auto; }
.comp-legend { margin-top: 12px; color: var(--color-gray-600); font-size: 12px; }
.comp-legend span { margin-right: 12px; }

/* 카페24 목록 표: 가운데 정렬·조밀, 주문 1건 = tbody 1개 */
.comp-table.comp-table-list { min-width: 900px; }
.comp-table.comp-table-list[style*="min-width:0"] { min-width: 0; }
.comp-table.comp-table-list th, .comp-table.comp-table-list td { text-align: center; vertical-align: middle; white-space: normal; overflow: visible; text-overflow: clip; }
.comp-table.comp-table-list th { white-space: nowrap; }
.comp-table.comp-table-list td.text-left, .comp-table.comp-table-list th.text-left { text-align: left; }
.comp-table.comp-table-list td.text-right { text-align: right; }
.comp-table.comp-table-list tbody + tbody { border-top: 2px solid var(--color-gray-300, #c5cad3); }
.comp-table.comp-table-list tr.comp-sub-row td { background: var(--color-gray-50, #fafbfc); text-align: left; color: var(--color-gray-600); }
.comp-table.comp-table-list tr.comp-total-row td { background: var(--color-gray-100, #f2f4f7); font-weight: 700; }
.comp-table.comp-table-list tr.comp-table-empty td { padding: 30px; color: var(--color-gray-500); }
.comp-table.comp-table-list tr.selected td { background: var(--color-primary-50, #f2f7ff); }
.comp-table.comp-table-list .comp-date { white-space: nowrap; }
.comp-table.comp-table-list .comp-date small { color: var(--color-gray-500); display: block; }
.comp-table.comp-table-list .comp-amount-sub { display: block; color: var(--color-gray-500); font-size: 12px; }
.comp-table.comp-table-list input[type="number"].comp-input { width: 68px; }
.comp-table.comp-table-list .comp-checkbox { margin: 0; }
.comp-table.comp-table-list .comp-checkbox input[type="checkbox"] { margin-right: 0; }
.comp-table-wrapper + .comp-table-wrapper, .comp-table-wrapper { margin-bottom: 8px; }
.comp-prd { display: flex; gap: 6px; align-items: flex-start; text-align: left; }
.comp-prd .comp-prd-thumb { width: 40px; height: 40px; background: var(--color-gray-200, #e5e7eb); flex: none; border: 1px solid var(--color-gray-200); border-radius: 2px; }
.comp-prd .comp-prd-opt { color: var(--color-primary-600); display: block; }
.comp-orderer small { display: block; color: var(--color-gray-600); }
.comp-receiver-row { display: none; }
.comp-show-receiver .comp-receiver-row { display: table-row; }
.comp-path-icon { display: inline-block; min-width: 22px; height: 18px; line-height: 18px; font-size: 11px; text-align: center; background: #555; color: #fff; border-radius: 2px; margin-right: 3px; }
.comp-btn-memo { display: block; width: 50px; height: 20px; line-height: 18px; font-size: 11px; padding: 0; margin: 1px auto; background: #e9ebef; color: #aaa; border: 1px solid #d5d8dd; text-align: center; border-radius: 2px; cursor: pointer; }
.comp-btn-memo.active { background: #6b7280; color: #fff; border-color: #6b7280; }
.badge.import { background: #fff; color: var(--color-primary-600); border: 1px solid var(--color-primary-600); }
.comp-btn-group { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.comp-btn-bar { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.comp-table-wrapper.comp-paging-only { border: 0; box-shadow: none; background: transparent; }

/* ---------- 5. 섹션·패널 (상품 등록 S1~S13 접기) ---------- */
.section-header { margin-top: 22px; margin-bottom: 8px; flex-wrap: wrap; gap: 8px; }
.section-header .section-title { font-size: 16px; margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.comp-card { background: #fff; border: 1px solid var(--color-gray-200); margin-bottom: 14px; border-radius: 4px; }
.comp-card-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--color-gray-200); background: var(--color-gray-50); }
.comp-card-header h2, .comp-card-header h3 { font-size: 15px; margin: 0; }
.comp-card-header .comp-checkbox { margin: 0 8px 0 0; }
.comp-card-content { padding: 12px 14px; }
.comp-card.collapsed .comp-card-content { display: none; }

/* ---------- 6. 모달(카페24 레이어) 보정 ---------- */
.comp-modal .comp-modal-body .comp-table.comp-table-list { min-width: 0; }
.comp-modal-footer { justify-content: center; }
.comp-tooltip-box { border: 1px solid #e3b341; background: #fffbea; padding: 8px 12px; color: #7a5a00; margin: 6px 0; }

/* ---------- 7. 새 창 팝업 (layouts/popup.html) ---------- */
.comp-popup-body { background: #fff; }
.comp-popup { padding: 0 4px 80px; }
.comp-popup-title { font-size: 20px; font-weight: 700; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--color-gray-700, #4a505a); }
.comp-popup-info { background: var(--color-gray-100, #f2f4f7); border: 1px solid var(--color-gray-200); padding: 8px 12px; margin-bottom: 12px; display: flex; gap: 22px; flex-wrap: wrap; border-radius: 4px; }
.comp-popup-info b { font-weight: 400; color: var(--color-gray-600); margin-right: 4px; }
.comp-popup-foot { position: fixed; left: 0; right: 0; bottom: 0; background: var(--color-gray-50, #f7f8fa); border-top: 1px solid var(--color-gray-200); padding: 10px; z-index: 50; justify-content: center !important; margin-top: 0 !important; }
.comp-popup-foot .comp-btn { min-width: 100px; }
.comp-order-head { background: #2b2f36; color: #fff; padding: 10px 14px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin: -16px -16px 0; }
.comp-order-head .comp-btn { background: transparent; color: #fff; border-color: #777; }
.comp-pay-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.comp-pay-card { border: 1px solid var(--color-gray-200); padding: 10px; min-height: 120px; border-radius: 4px; }
.comp-pay-card h4 { margin: 0 0 6px; font-size: 13px; display: flex; justify-content: space-between; }
.comp-pay-card .comp-pay-big { font-size: 16px; font-weight: 700; }
.comp-pay-card dl { margin: 4px 0 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; color: var(--color-gray-600); }
.comp-pay-card dd { margin: 0; text-align: right; }
.comp-memo-bar { position: fixed; right: 20px; bottom: 0; background: var(--color-gray-700, #4a505a); color: #fff; padding: 6px 14px; cursor: pointer; z-index: 60; border-radius: 4px 4px 0 0; }
.comp-memo-panel { display: none; position: fixed; right: 20px; bottom: 34px; width: 560px; max-width: 92vw; background: #fff; border: 1px solid #555; z-index: 61; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.comp-memo-panel.active { display: block; }
.comp-memo-list { list-style: none; margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--color-gray-200); }
.comp-memo-list li { padding: 4px 0; border-bottom: 1px dashed var(--color-gray-200); }

/* CS 환불 */
.comp-refund-sum { width: 100%; border-collapse: collapse; margin: 6px 0; }
.comp-refund-sum th, .comp-refund-sum td { border: 1px solid var(--color-gray-200); padding: 6px 8px; text-align: center; }
.comp-refund-sum th { background: var(--color-gray-50); font-weight: 400; }
.comp-refund-sum .comp-refund-total { color: var(--color-primary-600); font-weight: 700; font-size: 15px; }
.comp-max-note { color: var(--color-error-main, #d9302c); font-size: 12px; margin-left: 4px; }

/* ---------- 8. 상품 등록: 옵션 ---------- */
.comp-bubble-input { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 32px; border: 1px solid var(--color-gray-300); background: #fff; padding: 2px 4px; cursor: text; border-radius: 4px; }
.comp-bubble-input input { border: 0 !important; outline: none; height: 24px !important; min-height: 0 !important; flex: 1; min-width: 120px; padding: 0 2px !important; box-shadow: none !important; }
.comp-bubble { display: inline-flex; align-items: center; gap: 4px; background: var(--color-primary-50, #e8effc); border: 1px solid #b9cdf3; color: #1d3f86; border-radius: 12px; padding: 0 4px 0 9px; height: 24px; cursor: grab; }
.comp-bubble .comp-bubble-x { border: 0; background: none; color: #557; cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; }
.comp-bubble .comp-bubble-v[contenteditable="true"] { outline: 1px dashed #557; background: #fff; padding: 0 2px; }
.comp-bubble.comp-dragging { opacity: .4; }
.comp-opt-table td { vertical-align: top; }
.comp-variant-table input[type="number"].comp-input { width: 64px; }
.comp-variant-table input[type="text"].comp-input { width: 120px; }
.comp-variant-table tr.comp-sub-row td { font-size: 12px; }
.comp-variant-table tr.comp-divider-row td { background: #fff8e1; }
.comp-variant-table[data-st="F"] .comp-col-edit { display: none; }
.comp-variant-table:not([data-st="F"]) .comp-col-required { display: none; }
.comp-section-toggle { margin-left: 8px; }
.comp-option-block { border: 1px solid var(--color-gray-200); padding: 10px; margin-top: 8px; background: var(--color-gray-50); border-radius: 4px; }

/* ---------- 9. 시안 목록(index) ---------- */
.comp-index-list td a { font-weight: 700; }

@media (max-width: 900px) {
  .comp-shop-admin[data-template="template1"] .content-area { margin-left: 0; }
  .comp-pay-cards { grid-template-columns: 1fr 1fr; }
}

/* ---------- 10. 표준 테마(template1) 보정 ---------- */
/* template1 의 .search-form 은 "그리드 + 테두리 없는 알약형 입력" 디자인이라
   카페24의 라벨|값 표 검색에서는 입력칸이 안 보인다 → 표 안에서만 일반 입력 모양으로 되돌린다. */
.comp-shop-admin .comp-search-table .search-form .comp-input,
.comp-shop-admin .comp-search-table .search-form select.comp-input {
  border: 1px solid var(--color-gray-300, #c5cad3) !important; background-color: #fff !important; border-radius: 4px;
}
/* comp-input 은 기본이 display:flex(블록) → 카페24처럼 한 줄에 이어 붙이도록 inline-block */
.form-table .comp-input, .comp-table-list .comp-input, .comp-toolbar .comp-input, .comp-modal .form-table .comp-input,
.form-table .comp-datepicker { display: inline-block !important; vertical-align: middle; }
/* 표준 로고 이미지(타사 브랜드) 대신 쇼핑몰 문자 로고 */
.comp-shop-admin .logo-mark {
  background: var(--primary50, #1f5fd6) !important; -webkit-mask: none !important; mask: none !important;
  color: #fff !important; font-size: 13px !important; font-weight: 800; text-indent: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 56px !important; height: 32px !important; border-radius: 6px; overflow: visible;
}
.comp-table.comp-table-list { min-width: 1200px; }
.comp-table.comp-table-list { table-layout: auto !important; width: 100%; }
.comp-table.comp-table-list .comp-date { white-space: nowrap; }
.comp-table.comp-table-list th, .comp-table.comp-table-list td { width: auto; max-width: none; }
/* 표준 테마는 .search-actions 를 검색영역 오른쪽에 절대배치한다. 카페24는 검색표 아래 가운데 → 흐름 배치로 되돌림 */
.comp-shop-admin .search-container.comp-search-table { padding-right: 0 !important; }
.comp-shop-admin .search-container.comp-search-table .search-actions {
  position: static !important; transform: none !important; width: auto !important; height: auto !important;
  flex-direction: row !important; justify-content: center !important; padding: 14px 0 4px !important; background: none !important;
}
.comp-shop-admin .search-container.comp-search-table .search-actions > * { order: 0 !important; }
/* 테마가 테두리 버튼을 84px 로 고정 → '검색조회 항목 저장'처럼 긴 문구가 넘쳐 옆 버튼과 겹침 */
.comp-shop-admin .search-container.comp-search-table .search-actions .comp-btn { width: auto !important; min-width: 84px; flex: 0 0 auto; }
/* 넓은 목록 표가 본문을 밀어내지 않게(표 안에서 가로 스크롤) */
.comp-shop-admin .content-area { min-width: 0; }

/* 새 창(팝업): 관리자 본창 최소 폭(1440px)을 쓰지 않고 창 폭에 맞춘다. 제목 줄 버튼은 줄바꿈 */
body.popup-body { min-width: 0; }
body.popup-body .page-title { flex-wrap: wrap; gap: 8px; }
body.popup-body .page-title .page-util { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
body.popup-body .form-table, body.popup-body .comp-table { max-width: 100%; }
body.popup-body .comp-table-wrapper, body.popup-body .table-scroll { overflow-x: auto; }

/* 도움말 레이어 (.comp-help 에 마우스를 올리거나 누르면 표시 — shop-admin.js) */
.comp-help .comp-help-content { display: none; }
.comp-help:focus-visible { outline: 2px solid var(--color-primary-main, #2c6ff0); outline-offset: 1px; }
.comp-help-layer {
  display: none; position: absolute; z-index: 10000; max-width: 360px; padding: 10px 12px;
  background: #fff; color: #333; border: 1px solid #8c96a8; box-shadow: 0 2px 8px rgba(0,0,0,.15);
  font-size: 12px; line-height: 1.6; font-weight: 400; text-align: left; white-space: normal; word-break: keep-all;
}
.comp-help-layer strong { display: block; margin-bottom: 4px; font-weight: 700; }
.comp-help-layer ul { margin: 0; padding-left: 16px; }
.comp-help-layer li { list-style: disc; }

/* 화면 가이드 — 제목 옆 [가이드] 버튼, 가이드 새 창(guide/guideView·guideIndex) */
.page-util .badge.comp-guide { cursor: pointer; }
.page-util .badge.comp-guide:hover, .page-util .badge.comp-guide:focus { background: var(--color-primary, #2b6de0); color: #fff; outline: none; }
.comp-guide-doc { max-width: 920px; margin: 0 auto; font-size: 14px; line-height: 1.7; color: #222; }
.comp-guide-head { border-bottom: 2px solid #222; padding-bottom: 12px; margin-bottom: 20px; }
.comp-guide-head h1 { font-size: 22px; font-weight: 700; margin: 2px 0 8px; }
.comp-guide-head h1 small { font-size: 14px; font-weight: 400; color: #888; margin-left: 4px; }
.comp-guide-crumb { color: #888; font-size: 12px; margin: 0; }
.comp-guide-actions { display: flex; gap: 6px; }
.comp-guide-sub { color: #777; font-size: 13px; margin: 0 0 8px; }
.comp-guide-sec { margin: 0 0 26px; }
.comp-guide-sec > h2 { font-size: 16px; font-weight: 700; margin: 0 0 10px; padding-left: 8px; border-left: 3px solid var(--color-primary, #2b6de0); }
.comp-guide-sec > h3 { font-size: 14px; font-weight: 700; margin: 14px 0 6px; }
.comp-guide-sec p { margin: 0 0 8px; }
.comp-guide-sec ul, .comp-guide-sec ol { margin: 0 0 8px; padding-left: 20px; }
.comp-guide-sec ul > li { list-style: disc; margin: 2px 0; }
.comp-guide-sec ol > li { list-style: decimal; margin: 4px 0; }
.comp-guide-sec table th { text-align: left; vertical-align: top; background: #f7f8fa; font-weight: 600; }
.comp-guide-help { white-space: pre-line; }
.comp-guide-help ul { white-space: normal; }
.comp-guide-note { background: #fff8e6; border: 1px solid #f0d78c; border-radius: 4px; padding: 10px 14px; }
.comp-guide-note > li { list-style: disc; }
.comp-guide-tag { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 3px; background: #eef3fd; color: #2b6de0; vertical-align: middle; margin-left: 4px; }
.comp-guide-empty { background: #f7f8fa; border: 1px dashed #ccc; padding: 16px; border-radius: 4px; color: #666; margin-bottom: 20px; }
.comp-guide-index { columns: 2 320px; column-gap: 28px; }
.comp-guide-index .comp-guide-sec { break-inside: avoid; }
.comp-guide-menu { padding-left: 14px !important; }
.comp-guide-menu > li { list-style: none !important; }
.comp-guide-menu a { color: #2b6de0; }
.comp-guide-menu strong { display: block; margin-top: 6px; }
@media print { .comp-guide-actions { display: none; } .comp-guide-doc { max-width: none; } }

/* 파일 업로드 (fragments/file-upload.html) — 스쿨포유 가이드 FileUpload 를 표 칸·레이어 안에 맞게 낮춘 모양
   (가이드 엑셀 일괄등록 레이어의 dropzone 크기와 같음) */
.comp-file-upload-compact { max-width: 560px; }
.comp-file-upload-compact .comp-file-upload-dropzone { padding: 14px 16px; gap: 6px; }
.comp-file-upload-compact .comp-file-upload-icon { font-size: 22px; }
.comp-file-upload-compact .comp-file-upload-text { font-size: 13px; }
.comp-file-upload-compact .comp-file-upload-browse { padding: 4px 10px; font-size: 12px; }
.comp-file-upload-compact .comp-file-preview-list:empty { margin-top: 0; }
/* 기존 첨부 목록 + 업로드 영역이 한 칸에 있을 때 간격 */
[data-file-list] + .comp-file-upload, .comp-file-upload + [data-file-list] { margin-top: 8px; }
[data-file-list] { max-width: 560px; }