/*
 * 쇼핑몰 관리자 — 쇼핑몰 설정·공통 화면 보조 CSS (shop-admin-set.css)
 *
 * shop-admin.css 뒤에 읽는다. 표준(vendor)·shop-admin.css 는 고치지 않는다.
 * 쇼핑몰 설정(A-SET-xx)·관리자 홈·로그인·공통 레이어 시안에서만 쓰는 카페24 고유 모양만 둔다(comp- 접두 보조 클래스).
 *   - LNB 2단(설정 분류 → 화면) 아코디언
 *   - 설정 허브 카드, 라벨|값 하위 입력(└), 라벨-입력 쌍 묶음
 *   - 리치 에디터 자리, 듀얼 리스트박스, 이미지 자리
 *   - 자동 알림 메시지 카드, 관리자 홈 "오늘의 할 일" 표
 *   - 관리자 로그인·2단계 인증 단독 화면
 * 실제 구현: shop-admin.css 에 합쳐 하나의 앱 CSS 로 둔다(화면 전용 CSS 금지 규칙, admin-common 1-3).
 */

/* ---------- LNB: 쇼핑몰 설정 분류 아코디언 ---------- */
.comp-shop-admin .comp-set-lnb-group { cursor: pointer; position: relative; padding-right: 18px; }
.comp-shop-admin .comp-set-lnb-group::after { content: "\2304"; position: absolute; right: 6px; top: 50%; transform: translateY(-60%); font-size: 11px; color: var(--color-gray-500, #999); }
.comp-shop-admin .comp-set-lnb-group.open::after { content: "\2303"; transform: translateY(-30%); }
.comp-shop-admin .comp-set-lnb-items { display: none; }
.comp-shop-admin .comp-set-lnb-group.open + .comp-set-lnb-items { display: block; }
.comp-shop-admin .rail-drawer .badge.sm { font-size: 10px; padding: 0 4px; line-height: 16px; vertical-align: 1px; }

/* ---------- 폼 보조 ---------- */
.comp-set-sub { color: var(--color-gray-500, #999); margin-right: 2px; }
.comp-line.comp-set-subline { margin-top: 6px; padding-left: 4px; }
.comp-line { margin-top: 6px; }
.form-table td > .comp-line:first-child { margin-top: 0; }
.comp-set-save { justify-content: center; margin: 20px 0 8px; }
.comp-set-save .comp-btn.large { min-width: 120px; }
.comp-set-legal { margin-left: 4px; background: #fff8e1; border-color: #f0c36d; color: #a06a00; }
.comp-set-legal-text { white-space: pre-line; line-height: 1.6; }
.comp-table.comp-table-list.comp-set-auto { min-width: 0; width: auto; margin-top: 4px; }
.comp-set-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.comp-set-pair { display: inline-flex; align-items: center; gap: 8px; }
.comp-set-pair-l { display: inline-block; min-width: 90px; color: var(--color-gray-700, #555); }
.comp-set-inline-sep { display: inline-block; width: 1px; height: 14px; background: var(--color-gray-300, #ccc); margin: 0 10px; vertical-align: middle; }
.comp-set-readonly { color: var(--color-gray-700, #555); }
.comp-set-mono { font-family: Consolas, "Courier New", monospace; font-size: 12px; }
.comp-set-scrollbox { border: 1px solid var(--color-gray-200, #dde4ef); background: var(--color-gray-50, #f7f9fc); height: 110px; overflow-y: auto; padding: 8px 10px; font-size: 12px; line-height: 1.6; color: var(--color-gray-700, #555); }
.comp-set-code { width: 100%; font-family: Consolas, "Courier New", monospace; font-size: 12px; background: var(--color-gray-50, #f7f9fc); }

/* ---------- 설정 허브 카드 (A-SET-00) ---------- */
.comp-set-hub-menu { margin: 12px 0 4px; flex-wrap: wrap; }
.comp-set-hub-sec { margin-top: 18px; }
.comp-set-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.comp-set-hub-card { border: 1px solid var(--color-gray-200, #dde4ef); background: #fff; border-radius: 4px; padding: 12px 14px; }
.comp-set-hub-card h4 { font-size: 14px; font-weight: 700; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--color-gray-100, #eef1f6); }
.comp-set-hub-card li { padding: 3px 0; }
.comp-set-hub-card li::before { content: "\00b7"; margin-right: 6px; color: var(--color-gray-500, #999); }

/* ---------- 리치 에디터 자리 ---------- */
.comp-set-editor { border: 1px solid var(--color-gray-300, #ccd3df); border-radius: 4px; background: #fff; }
.comp-set-editor-bar { padding: 6px 10px; border-bottom: 1px solid var(--color-gray-200, #dde4ef); background: var(--color-gray-50, #f7f9fc); font-size: 12px; color: var(--color-gray-600, #666); }
.comp-set-editor-body { padding: 10px 12px; line-height: 1.7; overflow-y: auto; max-height: 360px; outline: none; }
.comp-set-editor-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; color: var(--color-gray-600, #666); font-size: 12px; }

/* ---------- 듀얼 리스트박스 ---------- */
.comp-set-dual { display: flex; align-items: center; gap: 8px; }
.comp-set-dual-box { width: 220px; }
.comp-set-dual-box select.comp-input { width: 100%; height: auto; min-height: 120px; }
.comp-set-dual-title { font-size: 12px; color: var(--color-gray-600, #666); margin-bottom: 4px; }
.comp-set-dual-btns { display: flex; flex-direction: column; gap: 4px; }

/* ---------- 이미지 자리 ---------- */
.comp-set-img { display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--color-gray-300, #ccd3df); background: var(--color-gray-50, #f7f9fc); color: var(--color-gray-500, #999); font-size: 11px; vertical-align: middle; margin-right: 6px; }

/* ---------- 자동 알림 메시지 카드 (A-SET-19) ---------- */
.comp-set-msg-status { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--color-gray-200, #dde4ef); background: #fff; border-radius: 4px; margin-bottom: 12px; }
.comp-set-msg-status > div { padding: 10px 16px; border-right: 1px solid var(--color-gray-200, #dde4ef); }
.comp-set-msg-status > div:last-child { border-right: 0; }
.comp-set-msg-status b { color: var(--color-primary-600, #1f5fd6); }
.comp-set-msg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.comp-set-msg-card { border: 1px solid var(--color-gray-200, #dde4ef); border-radius: 4px; padding: 10px 12px; background: #fff; }
.comp-set-msg-card.disabled { background: var(--color-gray-50, #f7f9fc); color: var(--color-gray-500, #999); }
.comp-set-msg-card-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 6px; }
.comp-set-msg-card .comp-set-msg-btns { margin-top: 8px; display: flex; gap: 4px; }
.comp-set-bubble { background: #fef01b33; border: 1px solid #e8d900; border-radius: 10px; padding: 10px 12px; min-height: 120px; white-space: pre-line; font-size: 13px; }
.comp-set-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
.comp-set-preview { border: 1px solid var(--color-gray-200, #dde4ef); border-radius: 4px; padding: 10px; background: #fff; }
.comp-set-serp-title { color: #1a0dab; font-size: 16px; }
.comp-set-serp-url { color: #006621; font-size: 12px; }

/* ---------- 배치 상태 ---------- */
.comp-set-fail td { color: var(--color-error-main, #d9302c); }
.comp-set-err { width: 100%; height: 220px; font-family: Consolas, "Courier New", monospace; font-size: 12px; white-space: pre; }

/* ---------- 관리자 홈 (오늘의 할 일) ---------- */
.comp-set-todo { width: 100%; border-collapse: collapse; background: #fff; }
.comp-set-todo th, .comp-set-todo td { border: 1px solid var(--color-gray-200, #dde4ef); padding: 12px 8px; text-align: center; }
.comp-set-todo th { background: var(--color-gray-50, #f7f9fc); font-weight: 700; font-size: 13px; }
.comp-set-todo td { font-size: 18px; }
.comp-set-todo td .comp-link { font-weight: 700; }
.comp-set-todo td small { display: block; font-size: 11px; color: var(--color-gray-500, #999); }

/* ---------- 관리자 로그인·2단계 인증 (단독 화면) ---------- */
.comp-set-auth-body { background: var(--color-gray-50, #f2f5fa); min-width: 0; }
.comp-set-auth { width: 420px; margin: 80px auto; background: #fff; border: 1px solid var(--color-gray-200, #dde4ef); border-radius: 8px; padding: 32px 36px; box-shadow: 0 2px 12px rgba(0, 0, 0, .05); }
.comp-set-auth.wide { width: 860px; }
.comp-set-auth h1 { font-size: 20px; text-align: center; margin: 0 0 24px; }
/* 로그인·인증 화면 맨 위 TONSHOP 가로형 로고 */
.comp-set-auth h1 .comp-set-auth-logo { display: block; height: 44px; width: auto; margin: 0 auto 14px; }
.comp-set-auth .comp-set-auth-row { margin-bottom: 12px; }
.comp-set-auth .comp-set-auth-row label.comp-set-auth-label { display: block; font-size: 13px; color: var(--color-gray-700, #555); margin-bottom: 4px; }
.comp-set-auth .comp-input { width: 100%; }
.comp-set-auth .comp-btn.block { width: 100%; justify-content: center; }
.comp-set-auth-error { color: var(--color-error-main, #d9302c); font-size: 13px; margin-top: 10px; min-height: 18px; }
.comp-set-auth-links { margin-top: 14px; text-align: center; font-size: 13px; }
.comp-set-auth-foot { text-align: center; color: var(--color-gray-500, #999); font-size: 12px; margin-top: 18px; }
.comp-set-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.comp-set-step { border: 1px solid var(--color-gray-200, #dde4ef); border-radius: 6px; padding: 14px; }
.comp-set-step.active { border-color: var(--color-primary-500, #3b7bea); box-shadow: 0 0 0 2px #3b7bea22; }
.comp-set-step h3 { font-size: 14px; margin: 0 0 10px; }
.comp-set-qr { width: 140px; height: 140px; margin: 0 auto 8px; background:
    repeating-linear-gradient(45deg, #222 0 6px, #fff 6px 12px), #fff; border: 8px solid #fff; outline: 1px solid var(--color-gray-200, #dde4ef); }

/* ---------- 공통 상태 화면 ---------- */
.comp-set-state { text-align: center; padding: 48px 16px; border: 1px solid var(--color-gray-200, #dde4ef); background: #fff; border-radius: 6px; margin-bottom: 16px; }
.comp-set-state .comp-set-state-code { font-size: 40px; font-weight: 800; color: var(--color-gray-300, #ccd3df); }
.comp-set-state p { margin: 10px 0 18px; font-size: 15px; }

/* 비활성 행(미연동 결제수단 등) */
.comp-set-disabled-row td { color: #9aa0a6; background: #fafafa; }
/* 빨간 상태 배지(반려·실패·잠금) — 공용 badge 에 빨강이 없어 추가 */
.badge.comp-set-red { background: #fdecea; color: #d9302c; }
/* 홈 위젯 카드 */
.comp-set-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.comp-set-kpi > div { border: 1px solid #e3e6ea; border-radius: 6px; padding: 14px 16px; background: #fff; }
.comp-set-kpi b { display: block; font-size: 22px; margin-top: 6px; }
.comp-set-kpi small { color: #8a9099; }

/* 상단 바 쇼핑몰 선택(멀티쇼핑몰 2개 이상일 때, A-SET-63) */
.comp-set-mall-select { height: 28px; margin-right: 6px; font-weight: 600; }

/* 관리자 로그인 비밀번호 보기/숨기기 (login.html #loginPwEye) */
.comp-set-auth .comp-set-pw-wrap { position: relative; display: block; }
.comp-set-auth .comp-set-pw-wrap > .comp-input { width: 100%; padding-right: 44px; }
.comp-set-auth .comp-set-pw-eye { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: #888; font-size: 16px; line-height: 36px; text-align: center; cursor: pointer; border-radius: 4px; }
.comp-set-auth .comp-set-pw-eye:hover, .comp-set-auth .comp-set-pw-eye[aria-pressed="true"] { color: #333; }
.comp-set-auth .comp-set-pw-eye:focus-visible { outline: 2px solid var(--color-primary, #1a73e8); outline-offset: -2px; }
.comp-set-auth .comp-set-pw-wrap > input::-ms-reveal, .comp-set-auth .comp-set-pw-wrap > input::-ms-clear { display: none; }
/* 문자 로고 TONSHOP(7자) — shop-admin.css 의 고정 폭 56px 로는 넘치므로 글자 길이에 맞춘다 (레일은 폭이 좁아 글자만 줄임) */
.comp-shop-admin .logo-mark, #mMenuOverlay .header-logo .logo-mark { width: auto !important; min-width: 56px; padding: 0 8px; }
.comp-shop-admin .rail-logo .logo-mark { font-size: 11px !important; padding: 0 5px; letter-spacing: -0.3px; }
/* 2단계 메뉴(레일 서랍): 테마가 scrollbar-width:none 으로 스크롤바를 숨겨 휠로만 움직였음 → 얇은 스크롤바 표시 */
.app .rail-drawer { scrollbar-width: thin; scrollbar-color: #c3c9d4 transparent; overscroll-behavior: contain; }
.app .rail-drawer::-webkit-scrollbar { width: 6px; }
.app .rail-drawer::-webkit-scrollbar-thumb { background: #c3c9d4; border-radius: 3px; }
.app .rail-drawer::-webkit-scrollbar-thumb:hover { background: #9aa3b2; }
.app .rail-drawer::-webkit-scrollbar-track { background: transparent; }