/* ════════════════════════════════════════════════════════════
   ★ POSAI Naver Design — 네이버 쇼핑/페이 풍 가독성 레이아웃
   ★ 2026-05-27 사장 명시: 가독성 최우선
   ════════════════════════════════════════════════════════════ */

/* ─── 네이버 컬러 ─── */
:root[data-pos-theme="naver"] {
  --toss-primary:        #03c75a;       /* 네이버 그린 */
  --toss-primary-hover:  #02a548;
  --toss-primary-light:  #e6f9ed;
  --toss-bg:             #f5f6f7;       /* 네이버 회색 배경 */
  --toss-card:           #ffffff;
  --toss-text:           #222222;
  --toss-text-sub:       #4d5159;
  --toss-text-mute:      #909499;
  --toss-border:         #03c75a;       /* 그린 보더 — 명확 */
  --toss-border-light:   #e5e5e5;
  --toss-success:        #03c75a;
  --toss-warning:        #ff9c00;
  --toss-danger:         #f95454;
  --toss-shadow-sm:      0 1px 2px rgba(0,0,0,0.04);
  --toss-shadow:         0 2px 8px rgba(0,0,0,0.06);
  --toss-shadow-lg:      0 4px 16px rgba(0,0,0,0.10);
  --toss-radius-sm:      6px;
  --toss-radius:         8px;            /* 네이버는 토스보다 직각 가까움 */
  --toss-radius-lg:      10px;
  --toss-radius-xl:      12px;
}

/* ─── 네이버 모드 — 가독성 핵심 ─── */
[data-pos-theme="naver"] body,
[data-pos-theme="naver"] html,
[data-pos-theme="naver"] .pos {
  font-size: 15px !important;            /* 토스보다 크게 — 가독성 */
  line-height: 1.55 !important;
  letter-spacing: -0.01em !important;     /* 압축 덜 — 가독성 */
}

/* 헤더 — 네이버는 보더 강조 */
[data-pos-theme="naver"] .header,
[data-pos-theme="naver"] .admin-header {
  border-bottom: 3px solid #03c75a !important;
  background: #fff !important;
  box-shadow: none !important;
}

/* 로고 — 네이버 그린 단색 */
[data-pos-theme="naver"] .header .logo,
[data-pos-theme="naver"] .admin-header .logo {
  background: #03c75a !important;
  border-radius: 8px !important;
  width: 36px !important; height: 36px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}
[data-pos-theme="naver"] .header .logo::before { display: none !important; }
[data-pos-theme="naver"] .header .brand {
  color: #222 !important;
  background: none !important;
  -webkit-text-fill-color: #222 !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: -0.03em !important;
}

/* 카드 / 패널 — 네이버 보더 강조 */
[data-pos-theme="naver"] .cart,
[data-pos-theme="naver"] .cart-actions,
[data-pos-theme="naver"] .totals,
[data-pos-theme="naver"] .member-info,
[data-pos-theme="naver"] .card,
[data-pos-theme="naver"] .panel,
[data-pos-theme="naver"] .section-card,
[data-pos-theme="naver"] .info-card {
  border: 2px solid #e5e5e5 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: #fff !important;
}

/* Cart 테이블 — 가독성 ★★★ */
[data-pos-theme="naver"] .cart {
  border: 2px solid #03c75a !important;       /* 핵심 영역 그린 강조 */
  border-radius: 10px !important;
}
[data-pos-theme="naver"] .cart thead th {
  background: #f0fdf4 !important;
  color: #166534 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  padding: 14px 16px !important;
  border-bottom: 2px solid #03c75a !important;
}
[data-pos-theme="naver"] .cart tbody td {
  padding: 14px 16px !important;
  font-size: 15px !important;
  color: #222 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-weight: 600 !important;
}
[data-pos-theme="naver"] .cart tbody tr.selected,
[data-pos-theme="naver"] .cart tbody tr.active {
  background: #e6f9ed !important;
}

/* 합계 — 네이버 페이 영수증 스타일 */
[data-pos-theme="naver"] .totals {
  background: #fff !important;
  border: 2px solid #03c75a !important;
  padding: 18px 22px !important;
}
[data-pos-theme="naver"] .totals > div {
  font-size: 15px !important;
  padding: 6px 0 !important;
}
[data-pos-theme="naver"] .totals > div > span {
  color: #4d5159 !important;
  font-weight: 600 !important;
}
[data-pos-theme="naver"] .totals > div > b {
  color: #222 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
[data-pos-theme="naver"] .totals > div.big {
  margin-top: 12px !important;
  padding-top: 16px !important;
  border-top: 2px dashed #03c75a !important;
}
[data-pos-theme="naver"] .totals > div.big > span {
  color: #222 !important;
  font-weight: 800 !important;
  font-size: 17px !important;
}
[data-pos-theme="naver"] .totals > div.big > b {
  color: #f95454 !important;
  font-size: 26px !important;     /* 네이버 페이 — 큰 강조 */
  font-weight: 900 !important;
}

/* 회원 정보 카드 */
[data-pos-theme="naver"] .member-info {
  background: linear-gradient(135deg, #e6f9ed, #fff) !important;
  border: 2px solid #03c75a !important;
}
[data-pos-theme="naver"] .member-info > div > span {
  color: #4d5159 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
[data-pos-theme="naver"] .member-info > div > b {
  color: #222 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* 바코드 입력 */
[data-pos-theme="naver"] .barcode-input input {
  border: 2px solid #e5e5e5 !important;
  border-radius: 8px !important;
  height: 52px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  background: #fff !important;
  box-shadow: none !important;
}
[data-pos-theme="naver"] .barcode-input input:focus {
  border-color: #03c75a !important;
  box-shadow: 0 0 0 4px rgba(3,199,90,0.15) !important;
}

/* 카테고리 탭 */
[data-pos-theme="naver"] .category-tabs {
  background: #fff !important;
  border: 2px solid #e5e5e5 !important;
  border-radius: 10px !important;
  padding: 6px !important;
}
[data-pos-theme="naver"] .category-tabs button {
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
  color: #4d5159 !important;
  border-radius: 6px !important;
}
[data-pos-theme="naver"] .category-tabs button.active {
  background: #03c75a !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* 서브 탭 */
[data-pos-theme="naver"] .sub-tabs button {
  border-radius: 16px !important;
  border: 1.5px solid #d4d4d4 !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #4d5159 !important;
}
[data-pos-theme="naver"] .sub-tabs button.active {
  background: #03c75a !important;
  border-color: #03c75a !important;
  color: #fff !important;
}

/* 단축키 그리드 — 네이버 쇼핑 상품 카드 풍 */
[data-pos-theme="naver"] .shortcut-grid .card,
[data-pos-theme="naver"] .shortcut-grid > div,
[data-pos-theme="naver"] .shortcut-grid > button {
  border: 1.5px solid #e5e5e5 !important;
  border-radius: 10px !important;
  padding: 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: #fff !important;
  color: #222 !important;
}
[data-pos-theme="naver"] .shortcut-grid .card:hover,
[data-pos-theme="naver"] .shortcut-grid > div:hover {
  border-color: #03c75a !important;
  background: #f0fdf4 !important;
  transform: none !important;
  box-shadow: 0 2px 8px rgba(3,199,90,0.12) !important;
}

/* 하단 12 결제 메뉴 — 네이버 페이 풍 */
[data-pos-theme="naver"] .bottom-menu {
  background: #fff !important;
  border-top: 3px solid #03c75a !important;
  padding: 14px 16px 18px !important;
}
[data-pos-theme="naver"] .bottom-menu button {
  background: #fff !important;
  border: 2px solid #e5e5e5 !important;
  border-radius: 10px !important;
  padding: 16px 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #222 !important;
}
[data-pos-theme="naver"] .bottom-menu button:hover {
  border-color: #03c75a !important;
  background: #f0fdf4 !important;
}
[data-pos-theme="naver"] .bottom-menu button.primary,
[data-pos-theme="naver"] .bottom-menu button[data-role="pay-main"] {
  background: #03c75a !important;
  color: #fff !important;
  border-color: #03c75a !important;
}
[data-pos-theme="naver"] .bottom-menu button.primary:hover {
  background: #02a548 !important;
}
[data-pos-theme="naver"] .bottom-menu button.warning {
  background: #ff9c00 !important;
  border-color: #ff9c00 !important;
  color: #fff !important;
}

/* 헤더 actions 버튼 */
[data-pos-theme="naver"] .header .actions button,
[data-pos-theme="naver"] .header .actions .link-btn {
  background: #fff !important;
  border: 1.5px solid #d4d4d4 !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  color: #222 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
[data-pos-theme="naver"] .header .actions button:hover {
  border-color: #03c75a !important;
  color: #03c75a !important;
  background: #f0fdf4 !important;
}

/* 모달 — 네이버 풍 */
[data-pos-theme="naver"] .modal,
[data-pos-theme="naver"] .modal-content,
[data-pos-theme="naver"] .overlay > div {
  border: 2px solid #03c75a !important;
  border-radius: 12px !important;
}
[data-pos-theme="naver"] .modal input,
[data-pos-theme="naver"] .modal select {
  border: 2px solid #e5e5e5 !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}
[data-pos-theme="naver"] .modal input:focus {
  border-color: #03c75a !important;
  background: #fff !important;
}

/* 테이블 (admin) */
[data-pos-theme="naver"] .admin-content table,
[data-pos-theme="naver"] main.content table {
  border: 2px solid #e5e5e5 !important;
}
[data-pos-theme="naver"] .admin-content table th {
  background: #f0fdf4 !important;
  color: #166534 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  border-bottom: 2px solid #03c75a !important;
}
[data-pos-theme="naver"] .admin-content table td {
  font-size: 14px !important;
  color: #222 !important;
  font-weight: 600 !important;
}

/* 일반 input/select */
[data-pos-theme="naver"] input[type="text"],
[data-pos-theme="naver"] input[type="number"],
[data-pos-theme="naver"] input[type="password"],
[data-pos-theme="naver"] select,
[data-pos-theme="naver"] textarea {
  border: 2px solid #d4d4d4 !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  padding: 11px 14px !important;
}
[data-pos-theme="naver"] input:focus,
[data-pos-theme="naver"] select:focus {
  border-color: #03c75a !important;
}

/* 로그인 페이지 */
[data-pos-theme="naver"] .login-wrap,
[data-pos-theme="naver"] .login-form,
[data-pos-theme="naver"] .login-card {
  border: 2px solid #03c75a !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(3,199,90,0.10) !important;
}
[data-pos-theme="naver"] .login-wrap button,
[data-pos-theme="naver"] .login-form button {
  background: #03c75a !important;
  border-radius: 8px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

/* primary buttons */
[data-pos-theme="naver"] button.primary,
[data-pos-theme="naver"] button[type="submit"] {
  background: #03c75a !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}
[data-pos-theme="naver"] button.primary:hover {
  background: #02a548 !important;
}