* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  background: #f4f4f2;
  color: #2b2b28;
}

a { color: inherit; }

/* ---- 로그인 화면 ---- */
.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-box {
  background: #fff;
  border: 1px solid #e2e2de;
  border-radius: 10px;
  padding: 32px;
  width: 320px;
}
.login-box h1 { font-size: 17px; margin: 0 0 6px; }
.login-box .sub { font-size: 12px; color: #888; margin: 0 0 20px; }
.login-box label { display: block; font-size: 12.5px; font-weight: 700; color: #555; margin-top: 12px; }
.login-box input {
  width: 100%; padding: 9px; margin-top: 4px;
  border: 1px solid #ccc; border-radius: 6px; font-size: 14px;
}
.login-box button {
  margin-top: 18px; width: 100%; padding: 10px; border: none; border-radius: 6px;
  background: #2e4057; color: #fff; font-weight: 700; cursor: pointer; font-size: 14px;
}
.login-box button:disabled { opacity: .6; cursor: default; }
#msg { font-size: 12.5px; color: #c0392b; margin-top: 10px; min-height: 16px; }
.account-links { margin-top: 14px; text-align: center; font-size: 12px; color: #888; }
.account-links a { color: #2e4057; text-decoration: none; }
.account-links a:hover { text-decoration: underline; }
.account-links span { margin: 0 6px; }

/* ---- 대시보드 셸 ---- */
.app-header {
  background: #2e4057; color: #fff;
  padding: 14px 22px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
.app-header .title { font-size: 16px; font-weight: 700; }
.app-header .logout-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff;
  padding: 6px 12px; border-radius: 6px; font-size: 12.5px; cursor: pointer;
}

.app-nav {
  /* 2026-09-17(바른농부 방 전달 — 협업자 실측+콘솔검증): justify-content:center + overflow-x:auto
     조합은, 콘텐츠가 넘칠 때 넘치는 양을 좌우로 절반씩 밀어내는 flexbox 스펙 동작 때문에 앞쪽 탭들이
     "음수 scrollLeft가 있어야만 보이는" 위치로 밀려남 — 그런데 overflow-x:auto의 네이티브 scrollLeft는
     절대 음수가 될 수 없어서 그 탭들은 스크롤로도, scrollIntoView로도 원천적으로 도달 불가능했음
     (안내투어 하이라이트가 화면 밖으로 밀려나 안 보이던 근본원인 — flex-start로 바꾸면 즉시 해결됨을
     콘솔에서 직접 확인). 탭이 컨테이너보다 적어 안 넘치는 화면에선 단순히 좌측정렬로 보임(부작용 없음).
  */
  display: flex; justify-content: flex-start; gap: 4px; background: #fff; border-bottom: 1px solid #e2e2de;
  padding: 0 16px; overflow-x: auto;
  position: sticky; top: 61px; z-index: 90;
}
.app-nav button {
  border: none; background: transparent; padding: 13px 14px; font-size: 13.5px;
  color: #666; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
}
.app-nav button.active { color: #2e4057; border-bottom-color: #2e4057; font-weight: 700; }
.app-nav a.nav-link {
  border: none; background: transparent; padding: 13px 14px; font-size: 13.5px;
  color: #666; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
  text-decoration: none; margin-left: 6px; border-left: 1px solid #e2e2de; padding-left: 16px;
}

/* ---- 전체 페이지 공용 상단 메뉴 링크(store.html이 아닌 다른 페이지에서도 같은 메뉴를 보여줄 때) ---- */
.app-nav-link {
  display: inline-block; border: none; background: transparent; padding: 13px 14px; font-size: 13.5px;
  color: #666; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none;
}
.app-nav-link.active { color: #2e4057; border-bottom-color: #2e4057; font-weight: 700; }
#storePage .app-nav-link { color: #6b6a62; font-weight: 600; }
#storePage .app-nav-link.active { color: #17181c; border-bottom-color: #ff8a3d; border-bottom-width: 3px; }
#smsDelegationPage .app-nav-link { color: #6b6a62; font-weight: 600; }
#smsDelegationPage .app-nav-link.active { color: #17181c; border-bottom-color: #ff8a3d; border-bottom-width: 3px; }
/* 2026-09-17(바른농부 방 전달 — 협업자 지적 ④): plans.html에도 store.html/sms-delegation.html과
   동일한 nav를 신규 추가하면서, 같은 브랜드색 규칙을 이 페이지에도 스코핑함. */
#plansPage .app-nav-link { color: #6b6a62; font-weight: 600; }
#plansPage .app-nav-link.active { color: #17181c; border-bottom-color: #ff8a3d; border-bottom-width: 3px; }

/* ---- 메뉴 이용설명 물음표(2026-08-02, 고령 사용자 배려) ---- */
.nav-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 11px; height: 11px; margin-left: 3px; border-radius: 50%;
  border: 1px solid #999; color: #999; font-size: 8px; font-weight: 700;
  cursor: help; vertical-align: 2px;
}
#storePage .nav-help { border-color: #ff8a3d; color: #ff8a3d; }

/* ---- "?" 사용법 말풍선 툴팁 (2026-08-04, 3번 방 디자인 → 2026-09-17 JS 방식으로 교체) ----
   기존엔 ::before/::after로 아이콘 기준 절대위치 팝업이었는데, 이 아이콘들이 들어있는 .app-nav가
   가로스크롤을 위해 overflow-x:auto를 쓰고 있어서(CSS 스펙상 overflow-x가 visible이 아니면 반대축
   overflow-y도 자동으로 'auto'가 되어 세로 방향 오버플로우까지 같이 잘림) 위로 튀어나오는 말풍선이
   메뉴 안에 가려서 안 보였음 + 호버 전용이라 모바일(터치)에서는 아예 뜨지 않았음(협업자 신고 항목3).
   순수 CSS로는 "스크롤 컨테이너를 절대 벗어나는 위치잡기"가 불가능해 JS로 교체 — body에 붙인
   공용 tooltip 엘리먼트 하나를 getBoundingClientRect 기준 position:fixed로 배치하므로 어떤
   overflow 컨테이너 안에 있어도 안 잘리고, 데스크톱 호버 + 모바일 탭 둘 다 지원함(각 페이지
   스크립트의 initNavHelpTooltips() 참고). */
.nav-help { position: relative; }

.app-main { padding: 20px 22px; max-width: 1100px; margin: 0 auto; }

/* ---- 상품관리 툴바("+ 상품 추가"/새로고침/필터) — 목록 스크롤해도 상단(헤더+메뉴) 바로 아래 고정 (2026-08-04) ---- */
#productsToolbar {
  position: sticky; top: 111px; z-index: 80;
  background: #fff; margin: -18px -18px 14px; padding: 12px 18px;
  border-bottom: 1px solid #eee; border-radius: 10px 10px 0 0;
}
#storePage #productsToolbar { border-radius: 16px 16px 0 0; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.placeholder {
  background: #fff; border: 1px dashed #d8d8d3; border-radius: 10px;
  padding: 60px 20px; text-align: center; color: #999; font-size: 13.5px;
}

/* ---- 공용 컴포넌트 ---- */
.card { background: #fff; border: 1px solid #e2e2de; border-radius: 10px; padding: 18px; margin-bottom: 16px; }

.summary-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tile { background: #fff; border: 1px solid #e2e2de; border-radius: 10px; padding: 14px; text-align: center; }
.tile.clickable { cursor: pointer; transition: border-color .15s, transform .1s; }
.tile.clickable:hover { border-color: #2e4057; }
.tile.clickable.active { border-color: #2e4057; background: #eef1f5; }
.tile .num { font-size: 20px; font-weight: 700; color: #2e4057; }
.tile .label { font-size: 12px; color: #888; margin-top: 4px; }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.plan-card {
  border: 1px solid #e2e2de; border-radius: 10px; padding: 18px 14px; text-align: center;
  display: flex; flex-direction: column; gap: 6px;
}
.plan-name { font-size: 15px; font-weight: 700; color: #2e4057; }
.plan-limit { font-size: 12.5px; color: #666; }
.plan-price { font-size: 19px; font-weight: 700; margin-top: 6px; }
.plan-price-unit { font-size: 12px; font-weight: 400; color: #888; }
.plan-yearly { font-size: 11.5px; color: #999; min-height: 16px; }
.plan-upgrade-btn {
  margin-top: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 6px;
  background: #f4f4f2; color: #999; font-size: 13px; cursor: not-allowed;
}
.plan-card-current { border: 2px solid #2e4057; background: #f7f9fb; }
.plan-current-badge {
  font-size: 11px; font-weight: 700; color: #fff; background: #2e4057;
  border-radius: 999px; padding: 2px 10px; align-self: center; margin-bottom: 4px;
}

.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filter-row select, .filter-row input {
  padding: 7px 9px; border: 1px solid #ccc; border-radius: 6px; font-size: 13px;
}
.filter-row button {
  padding: 7px 14px; border: none; border-radius: 6px; background: #2e4057; color: #fff;
  font-size: 13px; cursor: pointer;
}
.filter-row button.danger { background: #c0392b; }
.filter-row button.danger:hover { background: #a8321f; }
.sub-tab { background: #fff !important; color: #2e4057; border: 1px solid #ccc !important; }
.sub-tab.active { background: #2e4057 !important; color: #fff; font-weight: 700; }
#storePage .sub-tab { color: #17181c; }
#storePage .sub-tab.active { background: #17181c !important; color: #fff; }

table { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; }
th, td { padding: 8px 8px; border-bottom: 1px solid #eee; text-align: left; white-space: nowrap; }
th { color: #666; font-weight: 700; background: #fafaf8; }
tr:hover td { background: #fafaf8; }

.status-badge { padding: 2px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.status-입금대기 { background: #fdecea; color: #c0392b; }
.status-주문접수 { background: #e8eef7; color: #2e4057; }
.status-배송준비중 { background: #fff6e0; color: #a8710a; }
.status-발송완료 { background: #e7f6ea; color: #237a3f; }
.status-취소신청 { background: #f3e6d8; color: #a8590a; }
.status-취소완료 { background: #eee; color: #555; }
.status-활성 { background: #e7f6ea; color: #237a3f; }
.status-중지 { background: #eee; color: #888; }

.row-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.row-actions button {
  border: 1px solid #d8d8d3; background: #fff; border-radius: 5px; padding: 3px 8px;
  font-size: 11.5px; cursor: pointer;
}
.row-actions button:hover { background: #f4f4f2; }
.row-actions button.danger { color: #c0392b; border-color: #f0c4bd; }
.pr-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-width: 96px; }
.pr-actions-grid button { width: 100%; white-space: nowrap; }
#productsBody td:last-child { min-width: 100px; }
#productsTable { min-width: 1050px; }
/* 주문 목록 "상품" 칸에 여러 상품이 길게 나열될 때, table{width:100%}(table-layout:auto)가 실제 데이터가
   들어오는 순간 나머지 열(처리/금액/결제수단/상태/운송장)을 거의 0px로 눌러버려(또는 겹쳐 그려져) 화면에서
   통째로 사라져 보이는 문제(2026-08-03) — min-width만으로는 "상품" 칸이 여전히 나머지 폭을 다 가져가버려서
   부족했음. table-layout:fixed로 전환해서 각 열 너비를 고정하고, "상품" 칸만 줄바꿈을 허용해 텍스트가 길어도
   행 높이만 늘어나고 다른 열 너비에는 영향을 주지 않도록 함 — 넘치는 총 너비는 .table-scroll의 가로스크롤로 처리. */
/* 2026-08-03 재조정 — 폭을 좁혔더니 답답하다는 피드백으로 다시 넉넉하게(쾌적하게 보이는 것 우선) 되돌림.
   운송장칸은 배송준비중이 아니면 대부분 비어있지만(호버삭제 버튼만 있음), 칸 너비 자체는 편집 UI가 있는
   배송준비중 행 기준으로 넉넉하게 유지. */
#ordersTable { table-layout: fixed; min-width: 1670px; }
#ordersTable th:nth-child(1), #ordersTable td:nth-child(1) { width: 34px; }
#ordersTable th:nth-child(2), #ordersTable td:nth-child(2) { width: 130px; }
#ordersTable th:nth-child(3), #ordersTable td:nth-child(3) { width: 170px; }
#ordersTable th:nth-child(4), #ordersTable td:nth-child(4) { width: 60px; }
#ordersTable th:nth-child(5), #ordersTable td:nth-child(5) { width: 110px; }
#ordersTable th:nth-child(6), #ordersTable td:nth-child(6) { width: 220px; }
/* 2026-08-31(바른농부 방 발견 — 사장님 "주소가 다 안보여서 복사가 안 된다"): 옆 상품/처리 칸(7,8번째)엔
   이미 white-space:normal 예외가 있는데 주소 칸만 빠져있어서 160px 폭에 "..."로 잘려있었음(호버시
   title로만 전체가 보임) — 같은 예외를 추가해 잘림 없이 줄바꿈되어 항상 전체가 보이고 그대로 드래그
   복사도 되게 함. 폭도 160→220px로 넓힘(주소가 보통 길어서), 표 전체 min-width도 그만큼(+60px) 조정. */
#ordersTable td.addr-cell { white-space: normal; }
#ordersTable th:nth-child(7), #ordersTable td:nth-child(7) { width: 280px; white-space: normal; }
#ordersTable th:nth-child(8), #ordersTable td:nth-child(8) { width: 150px; white-space: normal; }
#ordersTable th:nth-child(9), #ordersTable td:nth-child(9) { width: 85px; }
#ordersTable th:nth-child(10), #ordersTable td:nth-child(10) { width: 95px; }
#ordersTable th:nth-child(11), #ordersTable td:nth-child(11) { width: 80px; }
#ordersTable th:nth-child(12), #ordersTable td:nth-child(12) { width: 250px; }

.delete-cell { text-align: center; width: 36px; }
.row-hover-delete {
  width: 22px; height: 22px; line-height: 20px; padding: 0; text-align: center;
  border: 1px solid #f0c4bd; border-radius: 50%; background: #fff; color: #c0392b;
  font-size: 13px; font-weight: 700; cursor: pointer; opacity: 0; transition: opacity .1s;
}
.order-row:hover .row-hover-delete,
.row-hover-delete:focus { opacity: 1; }
.row-hover-delete:hover { background: #fdecea; }

.empty-msg { padding: 30px; text-align: center; color: #999; font-size: 13px; }
.table-scroll { overflow-x: auto; }

/* 운송장 인라인 입력 */
.tracking-input {
  width: 150px; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px;
  font-size: 12.5px; background: transparent;
}
.tracking-input:hover { border-color: #ddd; }
.tracking-input:focus { border-color: #2e4057; background: #fff; outline: none; }
.tracking-cell { display: flex; align-items: center; gap: 4px; }
.tracking-save-btn {
  width: 22px; height: 22px; line-height: 20px; padding: 0; text-align: center; flex-shrink: 0;
  border: 1px solid #b8d8c0; border-radius: 50%; background: #fff; color: #237a3f;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.tracking-save-btn:hover { background: #e7f6ea; }

/* 전화주문 수동입력 그리드 */
.hint { font-size: 12px; color: #888; margin: 0 0 10px; }
#manualOrderBody { cursor: text; }
#manualOrderTable td[data-col] {
  min-width: 80px;
}
#manualOrderBody:focus,
#ordersBody:focus {
  outline: none;
}
#manualOrderTable td[data-col]::selection,
#manualOrderTable td[data-col] *::selection,
#ordersBody td::selection,
#ordersBody td *::selection {
  background: #cfe0ee;
}
.mo-status { font-size: 11.5px; color: #888; white-space: nowrap; }
.row-del-btn {
  border: 1px solid #d8d8d3; background: #fff; border-radius: 5px; padding: 3px 8px;
  font-size: 11.5px; cursor: pointer; color: #c0392b;
}
.ban-type-btn {
  border: 1px solid #ccc; background: #fff; border-radius: 14px; padding: 3px 10px;
  font-size: 11.5px; cursor: pointer; color: #666;
}
.ban-type-btn.active { background: #17181c; color: #fff; border-color: #17181c; }

/* ---- 신규가입 안내투어(가이드투어, 2026-08-10) ---- */
.tour-spotlight {
  position: fixed;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
  border: 2px solid #ff8a3d;
  transition: all .3s ease;
  pointer-events: none;
  z-index: 9998;
}
.tour-tooltip {
  position: fixed;
  z-index: 10000;
  background: #17181c;
  color: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  max-width: 280px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  pointer-events: auto;
  font-size: 13px;
  line-height: 1.5;
  transition: top .3s ease, left .3s ease;
}
.tour-tooltip .tour-step-label { font-size: 11px; color: #ff8a3d; font-weight: 700; margin-bottom: 4px; letter-spacing: .02em; }
.tour-tooltip .tour-title { font-size: 14.5px; font-weight: 700; margin-bottom: 6px; }
.tour-tooltip .tour-text { color: #ddd; margin-bottom: 12px; }
.tour-tooltip-buttons { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.tour-tooltip-buttons button { border: none; border-radius: 6px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.tour-btn-skip { background: transparent; color: #999; padding-left: 0 !important; }
.tour-btn-prev { background: #333; color: #fff; }
.tour-btn-next { background: #ff8a3d; color: #17181c; font-weight: 700; }

/* ---- store.html 전용 브랜드 적용 (2026-08-01, 3번 방 전달) ---- */
#storePage {
  background: #fffcf7;
}
#storePage .app-header {
  background: #17181c;
}
#storePage .app-header .logout-btn {
  border-radius: 999px;
  transition: border-color .15s ease, background .15s ease;
}
#storePage .app-header .logout-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
}

#storePage .app-nav {
  background: #fff;
  border-bottom: 1px solid #e8e3d6;
}
#storePage .app-nav button {
  color: #6b6a62;
  font-weight: 600;
}
#storePage .app-nav button.active {
  color: #17181c;
  border-bottom-color: #ff8a3d;
  border-bottom-width: 3px;
}
#storePage .app-nav a.nav-link {
  color: #6b6a62;
  font-weight: 600;
  border-left-color: #e8e3d6;
}

/* ---- store.html 페이지관리(블록 에디터) 폼 영역 브랜드 적용 (2026-08-02) ---- */
#storePage .mp-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2b2a25;
  margin-top: 14px;
  margin-bottom: 4px;
}
#storePage .mp-form input[type="text"],
#storePage .mp-form input[type="file"] {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #e8e3d6;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: #2b2a25;
  background: #fffcf7;
}
#storePage .mp-form input[type="text"]:focus {
  outline: none;
  border-color: #17181c;
  background: #fff;
}
#storePage .mp-form h3 {
  font-size: 14px;
  font-weight: 700;
  color: #17181c;
  border-top: 1px solid #e8e3d6;
  padding-top: 16px;
}
#storePage .mp-preview-label {
  font-weight: 600;
  color: #6b6a62;
}
#storePage .mp-preview-frame-wrap {
  border-color: #17181c;
}

/* ---- store.html "단순 페이지" 편집 폼 브랜드 적용 (2026-08-02, 2026-08-11 UI 복구와 함께 재적용) ---- */
#storePage #simplePagesCard label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2b2a25;
  margin-top: 14px;
  margin-bottom: 4px;
}
#storePage #simplePagesCard input[type="text"],
#storePage #simplePagesCard input[type="file"],
#storePage #simplePagesCard textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #e8e3d6;
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  color: #2b2a25;
  background: #fffcf7;
}
#storePage #simplePagesCard input[type="text"]:focus,
#storePage #simplePagesCard textarea:focus {
  outline: none;
  border-color: #17181c;
  background: #fff;
}
#storePage #simplePagesCard h3 {
  font-size: 14px;
  font-weight: 700;
  color: #17181c;
  margin-top: 14px;
}

/* ---- store.html 상품 이미지 관리 모달 브랜드 적용 (2026-08-02) ---- */
#storePage #imgModalOverlay h3 {
  color: #17181c;
}
#storePage #imgModalOverlay label {
  color: #2b2a25;
}
#storePage #imgModalOverlay input[type="file"] {
  width: 100%;
  padding: 8px;
  border: 1.5px solid #e8e3d6;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
}
#storePage .btn-primary-dark {
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  background: #17181c;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
#storePage .btn-primary-dark:hover {
  background: #000;
}

#storePage .app-main {
  width: 100%;
  max-width: 1400px;
  padding: 24px;
  /* 2026-08-29(사장님 제보 — 주문관리 표 마지막 줄이 독 바에 가려짐): #aiGlobalDock는
     position:fixed라 문서 흐름에서 빠져서, 콘텐츠 쪽에서 그만큼 여백을 안 두면 겹침.
     --ai-dock-height는 JS(ResizeObserver)가 독의 실제 렌더링 높이로 항상 채워둠 —
     클과장 탭에 있을 때(독이 비어있음)는 자연히 0이 되어 그 탭 레이아웃엔 영향 없음. */
  padding-bottom: calc(24px + var(--ai-dock-height, 0px));
}

#storePage .card {
  border: 1px solid #e8e3d6;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(43,42,37,0.04);
}

#storePage .placeholder {
  border-color: #e8e3d6;
  border-radius: 16px;
}

#storePage .summary-tiles .tile {
  border: 1px solid #e8e3d6;
  border-radius: 14px;
}
#storePage .tile.clickable:hover {
  border-color: #ff8a3d;
}
#storePage .tile.clickable.active {
  border-color: #ff8a3d;
  background: #fff3e9;
}
#storePage .tile .num {
  color: #17181c;
}

#storePage .filter-row select,
#storePage .filter-row input {
  border: 1.5px solid #e8e3d6;
  border-radius: 8px;
  font-family: inherit;
}
#storePage .filter-row select:focus,
#storePage .filter-row input:focus {
  outline: none;
  border-color: #17181c;
}
#storePage .filter-row button {
  background: #17181c;
  border-radius: 8px;
  font-weight: 600;
  transition: background .15s ease;
}
#storePage .filter-row button:hover {
  background: #000;
}
/* 2026-08-24: <input type="file"> 9곳이 전부 무스타일이라 OS 기본 파일선택 버튼이 그대로 보이던 문제 —
   네이티브 위젯이라 <button> 클래스로는 못 잡아서 ::file-selector-button 의사요소를 다른 버튼과
   같은 다크 톤으로 맞춤(::-webkit-file-upload-button은 구형 Safari/Chromium 호환용). */
#storePage input[type="file"] {
  font-size: 12.5px;
  color: #6b6a62;
}
#storePage input[type="file"]::file-selector-button,
#storePage input[type="file"]::-webkit-file-upload-button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #17181c;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 8px;
  transition: background .15s ease;
}
#storePage input[type="file"]:hover::file-selector-button,
#storePage input[type="file"]:hover::-webkit-file-upload-button {
  background: #000;
}

#storePage table {
  font-family: inherit;
}
#storePage th {
  background: #f7f3ea;
  color: #6b6a62;
}
#storePage th, #storePage td {
  border-bottom: 1px solid #e8e3d6;
}
#storePage tr:hover td {
  background: #fdf9f2;
}

#storePage .row-actions button {
  border-radius: 6px;
  border-color: #e8e3d6;
}
#storePage .row-actions button:hover {
  background: #f7f3ea;
}

#storePage .tracking-input:focus {
  border-color: #17181c;
}

#storePage #manualOrderTable td[data-col]::selection,
#storePage #manualOrderTable td[data-col] *::selection,
#storePage #ordersBody td::selection,
#storePage #ordersBody td *::selection {
  background: #ffe3cc;
}

/* ---- account-home.html 전용 브랜드 적용 (2026-08-01, 3번 방 전달) ---- */
#accountHomePage {
  background: #fffcf7;
}
#accountHomePage .app-header {
  background: #17181c;
  border-bottom: none;
}
#accountHomePage .app-header .title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
#accountHomePage .app-header .logout-btn {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
#accountHomePage .app-header .logout-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.5);
}
#accountHomePage .app-main {
  padding: 64px 24px;
  max-width: 640px;
}
#accountHomePage .card {
  background: #fff;
  border: 1px solid #e8e3d6;
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 10px 30px rgba(43,42,37,0.06);
}
#accountHomePage .card h2 {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #2b2a25;
}
#accountHomePage .card .ah-desc {
  margin: 0 0 8px;
  font-size: 14px;
  color: #6b6a62;
  line-height: 1.7;
}
#accountHomePage .card .ah-links {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#accountHomePage .card .ah-links a {
  color: #ff8a3d;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
#accountHomePage .card .ah-links a:hover {
  color: #f2731f;
  text-decoration: underline;
}

/* ---- 매출 그래프 / 요금제 카드 (2026-08-02, 3번 방 전달) ---- */
.section-title { font-size: 14px; font-weight: 700; margin: 0 0 12px; color: #333; }
.sales-chart { height: 150px; overflow-x: auto; padding-top: 26px; padding-bottom: 4px; }
.sales-chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; min-width: 100%; }
.sales-bar-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 20px; flex: 1 0 auto; }
.sales-bar { width: 70%; min-height: 2px; border-radius: 3px 3px 0 0; transition: opacity .15s; }
.sales-bar-col:hover .sales-bar { opacity: 0.75; }
.sales-bar-label { font-size: 10px; color: #999; margin-top: 4px; white-space: nowrap; }
.sales-bar-tooltip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: #17181c; color: #fff; font-size: 11px; font-weight: 600; padding: 4px 8px;
  border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .15s ease; margin-bottom: 6px; z-index: 5;
}
.sales-bar-col:hover .sales-bar-tooltip { opacity: 1; }
.sales-period-btn {
  padding: 6px 12px; border: 1px solid #ccc; border-radius: 6px; background: #fff;
  color: #666; font-size: 12.5px; cursor: pointer;
}
.sales-period-btn.active { background: #2e4057; color: #fff; border-color: #2e4057; }
#storePage .sales-period-btn.active { background: #17181c; border-color: #17181c; }
/* ---- 요금제 배지 영역 (2026-08-03) ----
   상단메뉴 "업그레이드" 옆에 요금제별 아이콘(왕관 등)을 나중에 3번(홈페이지) 방이 디자인해 넣을 자리.
   js/store.html의 loadNavPlanLabel()이 이 요소(#navPlanLabel)에 data-plan-name/data-product-count/
   data-product-limit 속성만 채워두고 텍스트는 표시하지 않음 — 지금은 빈 인라인 영역이라 화면엔 안 보임.
   3번 방이 디자인을 정하면, 예: .plan-badge[data-plan-name="울트라"]{...} 같은 속성 선택자로 아이콘을
   넣거나, JS로 data-plan-name 값을 읽어 아이콘을 교체하는 방식 둘 다 가능. */
.plan-badge { display: inline-block; vertical-align: middle; }

/* ---- 계정 인증화면(로그인/회원가입/비번찾기) 브랜드 통일 (2026-08-02, 3번 방 전달, 2026-07-31 최초 요청)
   ⚠️ login.html(B그룹)도 .login-wrap/.login-box를 공유해서, 전역 치환 대신 #accountAuthPage로 스코핑함 —
   login.html은 <body>에 id가 없어서 이 블록의 영향을 받지 않음. ---- */
#accountAuthPage {
  font-family: 'Pretendard','Apple SD Gothic Neo','Malgun Gothic',-apple-system,BlinkMacSystemFont,sans-serif;
  background: #fffcf7;
  color: #2b2a25;
}
#accountAuthPage .login-wrap {
  padding: 24px;
}
#accountAuthPage .login-box {
  border: 1px solid #e8e3d6;
  border-radius: 20px;
  padding: 40px 36px;
  width: 360px;
  box-shadow: 0 10px 30px rgba(43,42,37,0.06);
}
#accountAuthPage .login-box h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; }
#accountAuthPage .login-box .sub { font-size: 13.5px; color: #6b6a62; margin: 0 0 24px; line-height: 1.6; }
#accountAuthPage .login-box label { font-size: 13px; font-weight: 700; color: #2b2a25; margin-top: 16px; }
#accountAuthPage .login-box input {
  padding: 12px 14px; margin-top: 6px;
  border: 1.5px solid #e8e3d6; border-radius: 10px; font-size: 15px;
  font-family: inherit; color: #2b2a25; background: #fffcf7;
  transition: border-color .15s ease;
}
#accountAuthPage .login-box input:focus { outline: none; border-color: #17181c; }
#accountAuthPage .login-box button {
  margin-top: 22px; padding: 14px; border-radius: 999px;
  background: #17181c; font-size: 15px;
  transition: background .15s ease, transform .15s ease;
}
#accountAuthPage .login-box button:hover { background: #000; transform: translateY(-1px); }
#accountAuthPage .login-box button:disabled { transform: none; }
#accountAuthPage #msg { font-size: 13px; margin-top: 12px; min-height: 16px; }
#accountAuthPage .account-links { margin-top: 18px; font-size: 13px; color: #6b6a62; }
#accountAuthPage .account-links a { color: #ff8a3d; font-weight: 700; }
#accountAuthPage .account-links a:hover { color: #f2731f; }

/* ---- 메인페이지관리 실시간 미리보기 (2026-08-02) ---- */
.mp-editor-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.mp-form { flex: 1 1 420px; min-width: 320px; }
.mp-preview { flex: 0 0 auto; position: sticky; top: 121px; }
.mp-preview-label { font-size: 12.5px; color: #888; margin-bottom: 6px; text-align: center; }
.mp-preview-frame-wrap {
  width: 375px; height: 720px; border: 6px solid #2b2a25; border-radius: 28px;
  overflow: hidden; box-shadow: 0 6px 20px rgba(0,0,0,0.15); background: #fff;
}
.mp-preview-frame { width: 100%; height: 100%; border: none; }

/* ---- 메인페이지관리 "저장" 버튼 — 폼이 길어져서 스크롤 안 하면 안 보인다는 신고로 화면 하단 고정 (2026-08-04) ---- */
#mainpageSaveBar {
  position: sticky; bottom: 0; z-index: 70;
  background: #fff; padding: 12px 0; margin: 20px -18px -18px; padding-left: 18px; padding-right: 18px;
  border-top: 1px solid #eee; box-shadow: 0 -4px 12px rgba(0,0,0,0.04);
}

/* ---- 상세페이지 제작 편집기 — 블록 추가 툴바, 스크롤해도 우측 미리보기와 같은 높이에 고정 (2026-08-10) ---- */
#blockToolbar {
  position: sticky; top: 121px; z-index: 75;
  background: #fff; padding: 10px 0; margin: 10px 0;
  border-top: 1px solid #eee; border-bottom: 1px solid #eee;
}

/* ---- 체크아웃추천상품 선택 칩 UI (2026-08-04) ---- */
.cfg-product-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cfg-product-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #eef1f5; border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px;
}
#storePage .cfg-product-chip { background: #fff3e9; }
.cfg-product-chip button {
  border: none; background: transparent; color: #999; cursor: pointer; font-size: 13px;
  width: 16px; height: 16px; line-height: 1; padding: 0;
}
.cfg-product-chip button:hover { color: #c0392b; }
@media (max-width: 860px) {
  .mp-preview { position: static; margin: 0 auto; }
  .mp-preview-frame-wrap { width: 100%; max-width: 375px; }
}

/* ---- 메인페이지관리 탭 리디자인 — 섹션 카드화 + 버튼 위계 정리 (2026-08-11, 3번 방 전달) ---- */
#storePage .mp-section {
  background: #fffefb;
  border: 1px solid #e8e3d6;
  border-radius: 14px;
  padding: 18px 20px 20px;
  margin-bottom: 16px;
}
#storePage .mp-section h3 {
  font-size: 14.5px;
  font-weight: 700;
  color: #17181c;
  margin: 0 0 6px;
  padding-top: 0;
  border-top: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
#storePage .mp-section h3::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff8a3d;
  flex: none;
}
#storePage .mp-section-note {
  font-size: 11.5px;
  font-weight: 500;
  color: #a8a397;
}
#storePage .mp-section table th,
#storePage .mp-section table td {
  padding: 10px 8px;
}
#storePage .mp-section .row-del-btn {
  border: none;
  background: transparent;
  color: #b0aca0;
  font-size: 12px;
  padding: 3px 6px;
}
#storePage .mp-section .row-del-btn:hover {
  color: #c0392b;
  background: #fdecea;
  border-radius: 5px;
}

#storePage .mp-add-btn {
  border: 1.5px dashed #e0b98a;
  background: transparent;
  color: #f2731f;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
#storePage .mp-add-btn:hover {
  background: #fff3e9;
  border-color: #ff8a3d;
}
#storePage .mp-add-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

#storePage .mp-callout {
  background: #fff3e9;
  border: 1px solid #ffcf9e;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0 16px;
  font-size: 12.5px;
  color: #7a4a1a;
}

#storePage .mp-info-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #f7f3ea;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: #6b6a62;
  line-height: 1.55;
}
#storePage .mp-info-note::before {
  content: "i";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #d8d3c4;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  text-align: center;
  line-height: 16px;
}

#storePage .mp-subdomain-current { font-size: 13px; margin-bottom: 8px; color: #6b6a62; }
#storePage .mp-subdomain-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#storePage .mp-subdomain-input { max-width: 220px; }
#storePage .mp-subdomain-suffix { font-size: 13px; color: #6b6a62; font-weight: 600; }
#storePage .mp-subdomain-msg { font-size: 12.5px; margin-top: 4px; color: #6b6a62; }

#storePage .mp-order-list { display: flex; flex-direction: column; }
#storePage .mp-order-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid #efe9db;
}
#storePage .mp-order-row:last-child { border-bottom: none; }
#storePage .mp-order-name { font-size: 13px; color: #2b2a25; }
#storePage .mp-order-price { font-size: 12px; color: #a8a397; margin-left: 6px; }

#storePage #mainpageSaveBar {
  border-top: 1px solid #e8e3d6;
  background: #fffcf7;
}

#storePage .mp-preview {
  padding: 20px 20px 24px;
  background: radial-gradient(circle at 50% 30%, #fff3e9 0%, transparent 70%), #fdfaf3;
  border-radius: 20px;
  border: 1px solid #f0e9d8;
}
#storePage .mp-preview-label {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #a8a397;
}
#storePage .mp-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #34c759;
  box-shadow: 0 0 0 0 rgba(52,199,89,.45);
  animation: mpLivePulse 1.8s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #storePage .mp-live-dot { animation: none; }
}
@keyframes mpLivePulse {
  0% { box-shadow: 0 0 0 0 rgba(52,199,89,.45); }
  70% { box-shadow: 0 0 0 7px rgba(52,199,89,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); }
}

/* ---- store.html 전 탭 공통: 카드 안 h3 기본 브랜드 적용 (2026-08-11, 3번 방 전달) ---- */
/* .mp-section h3가 이미 있는 곳(메인페이지관리)은 그쪽이 더 구체적이라 그대로 우선 적용되고,
   이 규칙은 .mp-section 없이 h3만 있는 다른 탭(카테고리관리/고객관리 등)에 자동으로 적용됩니다. */
#storePage .card h3 {
  font-size: 14.5px;
  font-weight: 700;
  color: #17181c;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#storePage .card h3::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff8a3d;
  flex: none;
}

/* ---- 버튼 위계 추가: 아웃라인(보조 액션) / 라이브(특수 강조) ---- */
#storePage .btn-outline-dark {
  padding: 9px 18px;
  border: 1.5px solid #17181c;
  border-radius: 8px;
  background: transparent;
  color: #17181c;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
#storePage .btn-outline-dark:hover {
  background: #17181c;
  color: #fff;
}
#storePage .btn-live {
  padding: 9px 16px;
  border: 1.5px solid #ff8a3d;
  border-radius: 8px;
  background: #fff3e9;
  color: #b5551d;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#storePage .btn-live:hover {
  background: #ffe3cc;
}
#storePage .btn-live::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff3b30;
  animation: mpLivePulse 1.6s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #storePage .btn-live::before { animation: none; }
}

/* ---- 상세페이지제작 탭 툴바(버튼+검색창 한 줄) ---- */
#storePage .mp-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
#storePage .mp-toolbar input[type="text"] {
  padding: 7px 10px;
  border: 1.5px solid #e8e3d6;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
}
#storePage .mp-toolbar input[type="text"]:focus {
  outline: none;
  border-color: #17181c;
}

/* ---- 카테고리관리: 현재 선택된 카테고리 라벨 강조 ---- */
#storePage .mp-cat-current {
  color: #f2731f;
}

/* ---- 고객관리: "단골" 배지 + 체크박스 ---- */
.status-단골 { background: #e7f6ea; color: #237a3f; }
#storePage .cust-not-loyal { color: #a8a397; font-size: 12.5px; }
#storePage input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: #ff8a3d;
  cursor: pointer;
  vertical-align: middle;
}

/* ---- sms-delegation.html 소개 화면 (2026-08-02) ---- */
.intro-card { text-align: left; }
.intro-steps {
  margin: 16px 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 2;
  color: #2b2a25;
}
.btn-start {
  margin-top: 8px;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: #17181c;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease;
}
.btn-start:hover { background: #000; }

/* ---- sms-delegation.html 전체 브랜드 적용 (2026-08-02) ---- */
#smsDelegationPage { background: #fffcf7; }
#smsDelegationPage .app-header { background: #17181c; }
#smsDelegationPage .app-header .logout-btn {
  border-radius: 999px;
  transition: border-color .15s ease, background .15s ease;
}
#smsDelegationPage .app-header .logout-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.6);
}

#smsDelegationPage .sub-tab { color: #6b6a62 !important; background: #fff !important; border: 1px solid #e8e3d6 !important; }
#smsDelegationPage .sub-tab.active { background: #17181c !important; color: #fff !important; }

#smsDelegationPage .card {
  border: 1px solid #e8e3d6;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(43,42,37,0.04);
}

#smsDelegationPage .filter-row select,
#smsDelegationPage .filter-row input,
#smsDelegationPage textarea {
  border: 1.5px solid #e8e3d6;
  border-radius: 8px;
  font-family: inherit;
}
#smsDelegationPage .filter-row select:focus,
#smsDelegationPage .filter-row input:focus,
#smsDelegationPage textarea:focus {
  outline: none;
  border-color: #17181c;
}
#smsDelegationPage .filter-row button,
#smsDelegationPage button:not(.sub-tab):not(.logout-btn) {
  background: #17181c;
  border-radius: 8px;
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
#smsDelegationPage .filter-row button:hover,
#smsDelegationPage button:not(.sub-tab):not(.logout-btn):hover {
  background: #000;
}

#smsDelegationPage th { background: #f7f3ea; color: #6b6a62; }
#smsDelegationPage th, #smsDelegationPage td { border-bottom: 1px solid #e8e3d6; }
#smsDelegationPage tr:hover td { background: #fdf9f2; }

/* ---- store.html 상품관리 표 — 행별 입력칸/액션버튼 브랜드 적용 (2026-08-02) ---- */
#storePage #productsBody input[type="text"],
#storePage #productsBody input[type="number"],
#storePage #productsBody select {
  padding: 6px 8px;
  border: 1.5px solid #e8e3d6;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  color: #2b2a25;
  background: #fffcf7;
}
/* 2026-08-21: 재고/1회제한 칸(폭 72px)의 number 스핀 화살표가 글자 영역을 갉아먹어
   placeholder "무제한"이 "무제"로 잘려 보이는 문제(사장님 신고) — 스핀 화살표를 없애
   글자 영역을 통째로 확보. */
#storePage input.num-noSpin::-webkit-outer-spin-button,
#storePage input.num-noSpin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#storePage input.num-noSpin { -moz-appearance: textfield; }
#storePage #productsBody input:focus,
#storePage #productsBody select:focus {
  outline: none;
  border-color: #17181c;
  background: #fff;
}
#storePage .pr-actions-grid button {
  padding: 4px 8px;
  border: 1px solid #e8e3d6;
  border-radius: 6px;
  background: #fff;
  color: #2b2a25;
  font-size: 11.5px;
  cursor: pointer;
  transition: background .15s ease;
}
#storePage .pr-actions-grid button:hover { background: #f7f3ea; }
#storePage .pr-actions-grid button.danger {
  color: #c0392b;
  border-color: #f0c4bd;
}
#storePage .pr-actions-grid button.danger:hover { background: #fdecea; }

/* ---- store.html 공용 진한 버튼 클래스 (2026-08-02, 메인페이지관리 저장/추가 버튼용) ---- */
#storePage .btn-primary-dark {
  background: #17181c;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
#storePage .btn-primary-dark:hover { background: #000; }

/* ---- plans.html 브랜드 적용 (2026-08-03, 3번 방 디자인) ---- */
#plansPage { background: #fffcf7; }
#plansPage .app-header { background: #17181c; }
#plansPage .card {
  border: 1px solid #e8e3d6;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(43,42,37,0.04);
}
#plansPage .plan-card {
  border: 1.5px solid #e8e3d6;
  border-radius: 14px;
  background: #fffcf7;
}
#plansPage .plan-name { color: #17181c; }
#plansPage .plan-price { color: #17181c; }
#plansPage .plan-card-current {
  border: 2px solid #ff8a3d;
  background: #fff3e9;
}
#plansPage .plan-current-badge { background: #ff8a3d; }
#plansPage .plan-upgrade-btn {
  border-radius: 999px;
  background: #f0ede4;
}

/* ---- store.html 부가서비스 신청 탭 브랜드 적용 (2026-08-03, 3번 방 디자인) ---- */
#storePage #addonCard h3 {
  font-size: 14px;
  font-weight: 700;
  color: #17181c;
}
#storePage #addonCard label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2b2a25;
  margin-top: 10px;
  margin-bottom: 4px;
}
#storePage #addonCard input[type="number"],
#storePage #addonCard input[type="file"],
#storePage #addonCard textarea {
  padding: 8px 10px;
  border: 1.5px solid #e8e3d6;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fffcf7;
}
#storePage #addonCard input:focus,
#storePage #addonCard textarea:focus {
  outline: none;
  border-color: #17181c;
  background: #fff;
}

/* ---- 요금제 배지 아이콘 (2026-08-03, 3번 방 디자인) ---- */
.plan-badge[data-plan-name]::before { margin-left: 4px; font-size: 12px; }
.plan-badge[data-plan-name="라이트"]::before { content: "🌱"; }
.plan-badge[data-plan-name="프로"]::before { content: "⭐"; }
.plan-badge[data-plan-name="맥스"]::before { content: "💎"; }
.plan-badge[data-plan-name="울트라"]::before { content: "👑"; }

/* ---- 클과장 마이크/전송 겸용 버튼 (2026-08-29 도입, 2026-08-30 3번 방 색상 스펙 반영) ----
   평소(입력 없음): 연한 회색 원 + 회색 아이콘. 입력이 있거나(전송 대기) 음성인식 중일 때만 오렌지 —
   검정은 어느 상태에도 쓰지 않음(3번 방 스펙, --dark-50 계열 채택). */
#storePage .ai-mic-btn { background: #f1f1f2; color: #6b6a62; transition: background .12s, color .12s; }
#storePage .ai-mic-btn.ai-send-active,
#storePage .ai-mic-btn.ai-mic-listening { background: #ff8a3d; color: #fff; }
#storePage #aiSendBtn.ai-mic-listening { animation: aiMicPulse 1.1s ease-in-out infinite; }
@keyframes aiMicPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 138, 61, .45); }
  50% { box-shadow: 0 0 0 6px rgba(255, 138, 61, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #storePage #aiSendBtn.ai-mic-listening { animation: none; }
}

/* ---- 클과장 컴포저 예시 명령 칩 (2026-08-29, 3번 방 디자인 — 실제 지원되는 3개 기능만) ---- */
#storePage .ai-quick-chip {
  border: 1px solid #e8e3d6;
  background: #fffcf7;
  color: #4a4740;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}
#storePage .ai-quick-chip:hover { background: #fff3e9; border-color: #ffd9b8; color: #8a6a4a; }
/* "로고 등록" 칩 — 사진 첨부 버튼을 잠깐 강조(6초). 모션 줄이기 설정이면 애니메이션 없이 테두리만. */
#storePage .ai-attach-btn.ai-attach-highlight {
  background: #fff3e9 !important;
  box-shadow: 0 0 0 2px #ff8a3d;
  animation: aiAttachPulse 1.2s ease-in-out infinite;
}
@keyframes aiAttachPulse {
  0%, 100% { box-shadow: 0 0 0 2px #ff8a3d; }
  50% { box-shadow: 0 0 0 6px rgba(255, 138, 61, .25); }
}
@media (prefers-reduced-motion: reduce) {
  #storePage .ai-attach-btn.ai-attach-highlight { animation: none; }
}

/* ---- 클과장 전역 채팅 독(글로벌 하단바+드로어) — 2026-08-29, 사장님 "파루바" 핵심컨셉 반영 ----
   모든 탭에서 클과장에게 바로 물어볼 수 있어야 한다는 요청 — #aiComposerBar/#aiChatCard를 클과장
   탭 밖에 있을 때 이 독으로 "포탈"해서 하단에 고정 표시함. z-index 500: 기존 팝업(200)보다는
   위, 온보딩투어 백드롭(9997+)보다는 아래(투어 중엔 다른 모달들처럼 같이 가려짐, 의도적). */
#storePage .ai-global-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  max-width: 1400px;
  margin: 0 auto;
  pointer-events: none;
}
#storePage .ai-global-dock-bar-slot { pointer-events: auto; }
#storePage .ai-global-dock-bar-slot:empty { display: none; }
#storePage .ai-global-dock-drawer {
  pointer-events: auto;
  display: none;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ece8de;
  border-bottom: none;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
  max-height: 60vh;
  max-height: 60dvh;
  overflow: hidden;
}
#storePage .ai-global-dock-drawer.open { display: flex; }
#storePage .ai-global-dock-drawer-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #ece8de;
}
#storePage .ai-global-dock-drawer-title { font-size: 13px; font-weight: 800; color: #17181c; display: flex; align-items: center; }
#storePage .ai-global-dock-collapse-btn {
  border: none;
  background: none;
  font-size: 13px;
  cursor: pointer;
  color: #8a8a80;
  padding: 6px 8px;
  line-height: 1;
}
#storePage .ai-global-dock-chat-slot { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px; }
/* 독으로 옮겨진 #aiComposerBar/#aiChatCard 자체의 스타일 보정 — 탭 안에 있을 때(카드형, 둥근 모서리
   4방향+margin-top)와 독 안에 있을 때(화면 하단에 딱 붙는 바)는 모양이 달라야 함. dockAiComposerGlobally()/
   undockAiComposerFromGlobal()가 이 클래스를 붙이고 뗌 — JS로 인라인 스타일을 직접 덮어씀(엘리먼트
   자체에 이미 인라인 style이 있어 외부 CSS만으로는 우선순위가 안 먹히므로). */
#storePage .ai-global-dock-chat-slot #aiChatCard { border: none; border-radius: 0; margin: 0; padding: 0; }

/* ---- 독 전체 최소화(2026-09-21, 협업방 전달) — 입력바까지 숨기고 우하단 "클과장" 버튼만 남김 ----
   .docked = 다른 탭에서 독으로 떠 있는 상태(우상단에 "최소화" 버튼), .minimized = 접힌 상태(버튼만).
   두 버튼은 dock 안에서 absolute — 독 자체 높이(offsetHeight)에 영향을 주지 않음. */
#storePage .ai-dock-min-btn,
#storePage .ai-dock-launcher { display: none; pointer-events: auto; position: absolute; cursor: pointer; font-family: inherit; }
#storePage .ai-dock-min-btn {
  top: -30px; right: 14px;
  border: 1px solid #ece8de; border-bottom: none; background: #fff; color: #6b6a62;
  font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 10px 10px 0 0; line-height: 1.2;
  box-shadow: 0 -3px 10px rgba(0, 0, 0, .06);
}
#storePage .ai-dock-min-btn:hover { color: #17181c; }
#storePage .ai-global-dock.docked .ai-dock-min-btn { display: inline-block; }
#storePage .ai-dock-launcher {
  right: 16px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  align-items: center; gap: 6px;
  border: 1px solid #ffd9b8; background: #fff3e9; color: #17181c;
  font-size: 13px; font-weight: 800; padding: 9px 16px 9px 12px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(43, 42, 37, .18);
}
#storePage .ai-dock-launcher img { display: block; }
#storePage .ai-global-dock.minimized .ai-dock-launcher { display: inline-flex; }
#storePage .ai-global-dock.minimized .ai-dock-min-btn,
#storePage .ai-global-dock.minimized .ai-global-dock-drawer,
#storePage .ai-global-dock.minimized .ai-global-dock-bar-slot { display: none !important; }

/* 모바일(아이폰 사파리) 대응 — storefront.html 결제모달에서 이미 검증된 패턴을 그대로 이식:
   ① 입력칸 16px 미만이면 iOS가 포커스 시 자동확대함 — 반드시 이 파일 최말단에 둘 것(순서싸움에서
      이겨야 함, 앞쪽 규칙이 나중 선언이면 이 규칙을 덮어써버림 — storefront.html에서 실제로 겪은 함정).
   ② 드로어를 85dvh까지 키움(모바일은 좁아서 60vh로는 대화가 잘 안 보임).
   ③ safe-area 여백 — 하단바가 홈인디케이터에 가리지 않게. */
@media (max-width: 600px) {
  #storePage .ai-global-dock-drawer { max-height: 85vh; max-height: 85dvh; border-radius: 0; }
  /* ⚠️ !important 필수 — #aiChatInput은 인라인 style="...font-size:13.5px..."를 이미 갖고 있어서
     (store.html 마크업) 외부 스타일시트는 순서/우선순위와 무관하게 인라인을 절대 못 이김. 실측으로
     직접 확인함(!important 없이는 13.5px 그대로 유지되는 걸 Browser 도구로 재현). */
  #storePage #aiChatInput { font-size: 16px !important; }
}

/* 상품관리 — 노출 위치 칩(2026-09-26) */
#storePage .loc-chip { display:inline-flex; align-items:center; gap:2px; margin:0 4px 4px 0; padding:2px 4px 2px 9px; border-radius:999px; background:#f3f1ea; color:#3a3a35; font-size:12px; font-weight:600; white-space:nowrap; }
#storePage .loc-chip-x { border:none; background:transparent; color:#8a8a80; cursor:pointer; font-size:14px; line-height:1; padding:0 5px; }
#storePage .loc-chip-x:hover { color:#c0392b; }
#storePage .loc-add { border:1px dashed #b9b4a4; background:#fff; color:#6b6a62; border-radius:999px; font-size:12px; padding:2px 10px; cursor:pointer; margin:0 0 4px 0; }
#storePage .pr-loc-cell { min-width:150px; }

/* =====================================================================
   스티치 시안(바른파머 관리자 디자인) 반영 — store.html 한정 스킨 (2026-10-10)
   이 블록은 파일 맨 끝에서 앞선 #storePage 규칙을 덮어쓰는 "스킨 층"입니다. 구조/ID/동작은 그대로.
   되돌리기: START-STITCH-SKIN ~ END-STITCH-SKIN 사이만 삭제하면 이전(그래파이트+오렌지) 모양으로 복귀합니다.
   색은 아래 변수만 바꾸면 한 번에 바뀝니다. (시안 토큰: primary #1b4332 / canvas #FBFBF9 / border #E5E7E0)
   START-STITCH-SKIN */
#storePage {
  --sk-primary: #1b4332;
  --sk-primary-deep: #012d1d;
  --sk-mint: #aeeecb;
  --sk-mint-soft: #e6f4ec;
  --sk-gold: #d99b26;
  --sk-alert: #bc4749;
  --sk-canvas: #fbfbf9;
  --sk-card: #ffffff;
  --sk-subtle: #f3f4f0;
  --sk-line: #e5e7e0;
  --sk-line-strong: #ccd0c5;
  --sk-text: #181c20;
  --sk-text-sub: #5b625d;
  --sk-sidebar-w: 236px;
  background: var(--sk-canvas);
  color: var(--sk-text);
}

/* ---- 상단바: 어두운 띠 -> 밝은 얇은 바 ---- */
#storePage .app-header {
  background: var(--sk-card);
  color: var(--sk-text);
  border-bottom: 1px solid var(--sk-line);
  padding: 12px 24px;
}
#storePage .app-header .title { font-size: 15px; font-weight: 800; color: var(--sk-primary); letter-spacing: -.01em; }
#storePage .app-header .logout-btn {
  background: var(--sk-card);
  color: var(--sk-text-sub);
  border: 1px solid var(--sk-line-strong);
  border-radius: 10px;
  font-weight: 600;
}
#storePage .app-header .logout-btn:hover { background: var(--sk-subtle); border-color: var(--sk-primary); color: var(--sk-primary); }

/* ---- 메뉴(공통): 활성 = 짙은 초록 알약 ---- */
#storePage .app-nav { background: var(--sk-card); border-bottom: 1px solid var(--sk-line); }
#storePage .app-nav button,
#storePage .app-nav a.nav-link {
  color: var(--sk-text-sub);
  font-weight: 600;
  border-radius: 10px;
  border-bottom: none;
  border-left: none;
  transition: background .15s, color .15s;
}
#storePage .app-nav button:hover,
#storePage .app-nav a.nav-link:hover { background: var(--sk-subtle); color: var(--sk-text); }
#storePage .app-nav button.active {
  background: var(--sk-primary);
  color: #fff;
  border-bottom: none;
  font-weight: 700;
}

/* ---- 카드/타일/표 ---- */
#storePage .card {
  background: var(--sk-card);
  border: 1px solid var(--sk-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(24, 28, 32, .04);
}
#storePage .summary-tiles .tile {
  background: var(--sk-card);
  border: 1px solid var(--sk-line);
  border-radius: 14px;
  text-align: left;
  padding: 16px 18px;
}
#storePage .tile .num { color: var(--sk-text); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
#storePage .tile .label { color: var(--sk-text-sub); font-weight: 600; }
#storePage .tile.clickable:hover { border-color: var(--sk-primary); }
#storePage .tile.clickable.active { border-color: var(--sk-primary); background: var(--sk-mint-soft); }
#storePage th { background: var(--sk-subtle); color: var(--sk-text-sub); font-weight: 700; }
#storePage th, #storePage td { border-bottom: 1px solid var(--sk-line); }
#storePage tr:hover td { background: #f8faf7; }

/* ---- 버튼: 기본 = 짙은 초록, 보조(점선 추가/아웃라인)는 초록 테두리 ---- */
#storePage .filter-row button,
#storePage .btn-primary-dark {
  background: var(--sk-primary);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
}
#storePage .filter-row button:hover,
#storePage .btn-primary-dark:hover { background: var(--sk-primary-deep); }
#storePage .filter-row button.danger { background: var(--sk-alert); }
#storePage .btn-outline-dark { border-color: var(--sk-line-strong); color: var(--sk-primary); border-radius: 10px; }
#storePage .btn-outline-dark:hover { border-color: var(--sk-primary); background: var(--sk-mint-soft); }
#storePage .mp-add-btn { border-color: var(--sk-primary); color: var(--sk-primary); border-radius: 10px; }
#storePage .mp-add-btn:hover { background: var(--sk-mint-soft); }
#storePage .filter-row select,
#storePage .filter-row input { border: 1.5px solid var(--sk-line); border-radius: 10px; background: var(--sk-card); }
#storePage .filter-row select:focus,
#storePage .filter-row input:focus { border-color: var(--sk-primary); box-shadow: 0 0 0 3px rgba(27, 67, 50, .12); }
#storePage input[type="file"]::file-selector-button,
#storePage input[type="file"]::-webkit-file-upload-button { background: var(--sk-primary); border-radius: 8px; }
#storePage input[type="file"]:hover::file-selector-button,
#storePage input[type="file"]:hover::-webkit-file-upload-button { background: var(--sk-primary-deep); }
#storePage input[type="checkbox"] { accent-color: var(--sk-primary); }

/* ---- 상태 배지(시안의 알약형 칩) ---- */
#storePage .status-badge { border-radius: 999px; font-weight: 700; }
#storePage .status-입금대기 { background: #f9e3e3; color: var(--sk-alert); }
#storePage .status-주문접수 { background: var(--sk-mint-soft); color: var(--sk-primary); }
#storePage .status-배송준비중 { background: #fbf0d6; color: #8a5f0a; }
#storePage .status-발송완료,
#storePage .status-활성,
#storePage .status-단골 { background: var(--sk-mint); color: #0e5138; }

/* ---- 섹션 카드(메인페이지관리 등): 제목 앞 초록 막대 ---- */
#storePage .mp-section {
  background: var(--sk-card);
  border: 1px solid var(--sk-line);
  border-radius: 16px;
  padding: 22px 24px 24px;
}
#storePage .mp-section h3,
#storePage .card h3 { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--sk-text); }
#storePage .mp-section h3::before,
#storePage .card h3::before {
  width: 5px; height: 16px; border-radius: 3px; background: var(--sk-primary);
}
#storePage .mp-section-note { color: var(--sk-text-sub); }
#storePage .mp-section .row-del-btn:hover { color: var(--sk-alert); background: #f9e3e3; }
#storePage .mp-info-note, #storePage .mp-callout { background: var(--sk-mint-soft); border-color: #cfe7da; color: var(--sk-primary); }
#storePage .mp-preview { background: var(--sk-subtle); border: 1px solid var(--sk-line); border-radius: 16px; }
#storePage .mp-live-dot { background: var(--sk-primary); }

/* ---- 클과장: 보조 포인트색을 초록으로 ---- */
#storePage .ai-mic-btn.ai-send-active,
#storePage .ai-mic-btn.ai-mic-listening { background: var(--sk-primary); color: #fff; }
#storePage .ai-global-dock-drawer { border-color: var(--sk-line); }

/* ---- 데스크톱: 시안처럼 좌측 사이드바(메뉴를 세로 레일로) — 마크업 변경 없이 CSS만으로 ---- */
@media (min-width: 1100px) {
  #storePage .app-nav {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 95;
    width: var(--sk-sidebar-w);
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px;
    padding: 76px 14px 24px;
    overflow-x: hidden; overflow-y: auto;
    background: var(--sk-card);
    border-bottom: none;
    border-right: 1px solid var(--sk-line);
  }
  #storePage .app-nav::before {
    content: "파루바 · 파트너 관리자";
    position: absolute; left: 22px; top: 24px;
    font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--sk-primary);
  }
  #storePage .app-nav button,
  #storePage .app-nav a.nav-link {
    display: flex; align-items: center; width: 100%;
    padding: 11px 14px; font-size: 14px; text-align: left; white-space: normal;
  }
  #storePage .app-nav a.nav-link { text-decoration: none; }
  #storePage .app-header,
  #storePage .app-main { margin-left: var(--sk-sidebar-w); }
  #storePage .app-main { margin-right: auto; width: auto; }
  #storePage .ai-global-dock { left: var(--sk-sidebar-w); }
  /* 메뉴가 헤더 밑에 겹쳐 쌓이지 않으므로(헤더 61px만 차지) sticky 기준선을 그만큼 올림 */
  #storePage #productsToolbar { top: 61px; }
  #storePage .mp-preview, #storePage #blockToolbar { top: 76px; }
}
/* 좁은 화면(모바일/태블릿): 기존처럼 가로 스크롤 탭 */
@media (max-width: 1099px) {
  #storePage .app-nav { padding: 6px 10px; gap: 4px; }
  #storePage .app-nav button, #storePage .app-nav a.nav-link { padding: 9px 13px; }
}
/* "?" 도움말 아이콘: 오렌지 -> 은은한 회녹색, 활성 메뉴 위에서는 흰색 */
#storePage .nav-help { border-color: #9aa59d; color: #7a847d; }
#storePage .app-nav button.active .nav-help { border-color: rgba(255,255,255,.7); color: #fff; }
@media (min-width: 1100px) {
  #storePage .app-nav .nav-help { margin-left: auto; flex: none; }
  #storePage .app-nav button img { margin-right: 8px !important; }
}
/* ---- 입력칸 전반(표 안 입력칸·폼·텍스트에어리어): 크림 -> 흰색 + 초록 포커스 ---- */
#storePage input[type="text"],
#storePage input[type="number"],
#storePage input[type="tel"],
#storePage input[type="url"],
#storePage input[type="date"],
#storePage input:not([type]),
#storePage select,
#storePage textarea {
  background: var(--sk-card);
  border-color: var(--sk-line);
  border-radius: 10px;
}
#storePage input[type="text"]:focus,
#storePage input[type="number"]:focus,
#storePage input[type="tel"]:focus,
#storePage input[type="url"]:focus,
#storePage input:not([type]):focus,
#storePage select:focus,
#storePage textarea:focus {
  outline: none;
  border-color: var(--sk-primary);
  box-shadow: 0 0 0 3px rgba(27, 67, 50, .12);
}
#storePage .row-actions button,
#storePage .pr-actions-grid button { border-color: var(--sk-line); border-radius: 8px; }
#storePage .pr-actions-grid button:hover { background: var(--sk-mint-soft); }
#storePage .cfg-product-chip { background: var(--sk-mint-soft); }

/* ---- 클과장 예시 칩 / 입력창 ---- */
#storePage .ai-quick-chip { background: var(--sk-card); border-color: var(--sk-line); }
#storePage .ai-quick-chip:hover { background: var(--sk-mint-soft); border-color: #bfe0cf; color: var(--sk-primary); }

/* ---- 안내투어: 오렌지 포인트 -> 초록 ---- */
.tour-spotlight { border-color: var(--sk-mint, #aeeecb); }
.tour-tooltip .tour-step-label { color: #aeeecb; }
.tour-btn-next { background: #aeeecb; color: #012d1d; }
/* ---- 클과장 소개 배너(인라인 스타일이라 !important 필요): 복숭아 -> 민트/초록 ---- */
#storePage #aiDefaultBanner { background: linear-gradient(135deg, #e6f4ec, #f6fbf8) !important; border: 1px solid #d3eadd; }
#storePage #aiDefaultBanner h2 span { color: var(--sk-primary) !important; }
#storePage #aiDefaultBanner > div > p { color: var(--sk-primary) !important; }
/* END-STITCH-SKIN */