/* 블럭카페 브릭키 - 공통 스타일 (태블릿 우선) */
:root {
  --bg: #f5f2ec;
  --panel: #ffffff;
  --ink: #221d18;
  --ink-soft: #6d6357;
  --line: #e3ddd2;
  /* 브랜드 색 — 매장 로고(data/brand/Cafe Logo.ai) 기준 */
  --brand: #68539a;         /* 로고 보라 */
  --brand-dark: #54427f;
  --brand-ink: #3b2f5c;     /* 짙은 보라 — 선택된 탭, 알림 띠 등 어두운 면 */
  --brand-tint: #efeaf7;    /* 옅은 보라 — 선택 배경 */
  --accent: #f7d95c;        /* 로고 노랑 */
  --accent-strong: #d9b52e; /* 작은 표시(난이도 막대)용 진한 노랑 */
  --accent-ink: #3b2f5c;    /* 노랑 위 글자 */
  /* 의미 색 — 브랜드와 무관하게 유지 */
  --danger: #d8232a;        /* 경고 · 오류 · 삭제 · 고객 호출 */
  --blue: #1a6fdc;
  --green: #1f9d55;
  --purple: #68539a;
  --gray: #9a9186;
  --radius: 16px;
  --shadow: 0 2px 10px rgba(59, 47, 92, .08);
  --shadow-lg: 0 12px 40px rgba(59, 47, 92, .20);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }   /* label.field 등의 display 지정보다 우선 */
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard",
               "Malgun Gothic", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

/* ---------------- 상단바 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 3px solid var(--accent);
  box-shadow: var(--shadow);
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 20px; letter-spacing: -.02em;
}
.logo { min-width: 0; }
.logo .logo-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo .logo-mark { width: 38px; height: 38px; display: block; flex: 0 0 auto;
                  transition: transform .2s ease, opacity .2s ease; }
.logo .studs { display: flex; gap: 3px; }
.logo .studs i {
  width: 10px; height: 10px; border-radius: 3px; display: block;
  background: var(--brand);
}
.logo .studs i:nth-child(2) { background: var(--accent); }
.logo .studs i:nth-child(3) { background: var(--blue); }
.topbar .spacer { flex: 1; }

/* 로고 길게 누르기 = 스태프 콘솔 진입 */
#logo {
  position: relative; cursor: default;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
#logo .hold {
  position: absolute; left: 0; bottom: -7px; height: 3px; width: 0;
  background: var(--brand); border-radius: 2px;
}
#logo.pressing .hold { width: 100%; transition: width 2s linear; }
#logo.pressing .logo-mark { transform: scale(.9) rotate(-6deg); opacity: .75; }

/* 외부(온라인) 모드 안내 띠 */
.remotebar {
  background: linear-gradient(100deg, var(--brand), var(--brand-ink));
  color: #fff; padding: 10px 18px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.remotebar b { font-size: 15px; }
.remotebar .snapshot { font-size: 12px; opacity: .8; width: 100%; }
.remotebar span { font-size: 13px; opacity: .9; }

/* 온라인 조회 화면의 제품 번호 안내 */
.setno {
  background: var(--brand-tint); border: 1.5px dashed var(--brand); border-radius: 14px;
  padding: 14px 16px; text-align: center; margin-top: 14px;
}
.setno .lbl { font-size: 12.5px; font-weight: 700; color: var(--brand); }
.setno .no {
  font-size: 34px; font-weight: 800; letter-spacing: .04em; margin: 2px 0 6px;
  font-variant-numeric: tabular-nums;
}
.setno .desc { font-size: 12.5px; color: var(--ink-soft); }
.remotebar .btn { background: var(--accent); border: none; color: var(--accent-ink);
                  font-weight: 700; margin-left: auto; text-decoration: none; }

/* ---------------- 버튼 ---------------- */
.btn {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  transition: transform .06s ease, background .15s ease;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.ghost { background: transparent; }
.btn.blue { background: var(--accent); border-color: #e9cb4e; color: var(--accent-ink); }  /* 보조 강조(노랑) */
.btn.blue:hover { background: #f2cf45; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.green { background: var(--green); border-color: var(--green); color: #fff; }
.btn.dark { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.btn.sm { padding: 6px 12px; font-size: 14px; border-radius: 10px; }
.btn.lg { padding: 16px 26px; font-size: 18px; border-radius: 14px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------- 칩 / 뱃지 ---------------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: var(--panel);
  border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600;
  white-space: nowrap;
}
.chip.on { background: var(--brand-ink); color: #fff; border-color: var(--brand-ink); }
.chip.tag.on { background: var(--brand); border-color: var(--brand); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 700;
  background: #eee; color: #444;
}
.badge.available { background: #e2f6e9; color: #14713b; }
.badge.building  { background: #ffe8e8; color: #b3141a; }
.badge.reserved  { background: #fff2d4; color: #96690a; }
.badge.stored    { background: #e7eefc; color: #17509f; }
.badge.teardown  { background: #efeae4; color: #6d6357; }

.lv { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
      padding: 3px 11px; font-size: 13px; font-weight: 800; color: #fff; background: var(--gray); }
.lv1 { background: #8fbf6b; } .lv2 { background: #33a1a1; } .lv3 { background: #1a6fdc; }
.lv4 { background: #68539a; } .lv5 { background: #d8232a; } .lv6 { background: #22242b; }
.lv7 { background: linear-gradient(100deg, #68539a, #b08f2c); }

/* 난이도 표시 */
.diff { display: inline-flex; gap: 3px; align-items: center; }
.diff i { width: 8px; height: 14px; border-radius: 2px; background: var(--line); display: block; }
.diff i.on { background: var(--accent-strong); }
.diff i.on.hard { background: var(--brand); }

/* ---------------- 레이아웃 ---------------- */
.wrap { max-width: 1500px; margin: 0 auto; padding: 16px 18px 120px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
         box-shadow: var(--shadow); }
.pad { padding: 16px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap-row { flex-wrap: wrap; }
.muted { color: var(--ink-soft); }
.small { font-size: 13.5px; }
h2 { font-size: 19px; margin: 0 0 12px; letter-spacing: -.02em; }
h3 { font-size: 16px; margin: 0 0 8px; }

.search {
  flex: 1; min-width: 180px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px;
  background: var(--panel); outline: none;
}
.search:focus { border-color: var(--brand); }
select.search, input.search { -webkit-appearance: none; appearance: none; }
select { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel); }
input[type=text], input[type=number], input[type=tel], textarea {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel); outline: none;
}
input:focus, textarea:focus { border-color: var(--brand); }
label.field { display: block; margin-bottom: 10px; }
label.field span { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
label.field input, label.field select, label.field textarea { width: 100%; }

/* ---------------- 제품 카드 ---------------- */
.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); position: relative;
  transition: transform .1s ease, box-shadow .15s ease;
}
.card:active { transform: scale(.985); }
.card .thumb {
  position: relative; aspect-ratio: 4 / 3; background: #f0ece5;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.card .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.card .body { padding: 10px 12px 12px; }
.card .title { font-weight: 700; font-size: 15px; line-height: 1.35; margin-bottom: 4px;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { font-size: 12.5px; color: var(--ink-soft); display: flex; gap: 8px; flex-wrap: wrap; }
.card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.card .statusline { position: absolute; top: 8px; left: 8px; }
.card .copies { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.92);
                border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
/* 검색 · 추천 버튼 줄 */
.actionbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actionbar .btn {
  position: relative; padding: 14px 10px; font-size: 16.5px; border-radius: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn.outline { background: var(--panel); border: 1.5px solid var(--brand); color: var(--brand); }
.btn.outline.on { background: var(--brand-tint); }
.actionbar .dot {
  position: absolute; top: 9px; right: 11px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-strong); box-shadow: 0 0 0 2px var(--panel);
}
.searchdrawer { margin-top: 12px; }
.searchdrawer .row .search { flex: 1; min-width: 0; }
.listtools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.listtools select.search { flex: 0 0 150px; padding: 9px 12px; }
@media (max-width: 420px) {
  .actionbar .btn { font-size: 15px; padding: 12px 6px; }
  .listtools select.search { flex: 1 1 130px; }
}
.tagline { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.tagline-lbl { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; padding-top: 8px; }
.tagline .chips { flex: 1; }
.chip.tag .n { font-weight: 600; opacity: .6; margin-left: 2px; }
.card .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; }
.card .tags [data-ftag] { cursor: pointer; }
.card .tags [data-ftag]:active { background: #e6dfd3; }
.card .tags .mine { background: #fff1d6; color: #7a5200; }
.card .tags span { font-size: 11.5px; background: #f2eee7; color: var(--ink-soft);
                   border-radius: 6px; padding: 2px 6px; font-weight: 600; }

/* 잠긴 카드 */
.card.locked .thumb img { filter: grayscale(1) blur(2.5px); opacity: .55; }
.card.locked .title, .card.locked .meta { opacity: .5; }
.card .lockmark {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: rgba(245, 242, 236, .35); font-weight: 800; color: var(--ink);
  text-shadow: 0 1px 0 #fff;
}
.card .lockmark .ico { font-size: 26px; }
.card .lockmark .txt { font-size: 12.5px; background: rgba(255,255,255,.9); padding: 3px 9px; border-radius: 999px; }

/* ---------------- 시리즈 폴더 카드 ---------------- */
.folder {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); position: relative;
  transition: transform .1s ease, box-shadow .15s ease;
}
.folder:active { transform: scale(.985); }
.folder .strip { height: 7px; background: var(--gray); }
.folder .mosaic {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px;
  aspect-ratio: 4 / 3; background: #efeae3; padding: 2px;
}
.folder .mosaic > * { min-width: 0; min-height: 0; }  /* 그리드 칸이 이미지 크기에 밀리지 않도록 */
.folder .mosaic img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 4px; }
.folder .mosaic .blank { background: #fff; }
.folder .body { padding: 11px 13px 13px; }
.folder .name { font-weight: 800; font-size: 16.5px; letter-spacing: -.02em; display: flex;
                align-items: center; gap: 6px; }
.folder .name .hot { font-size: 11px; background: var(--accent); color: var(--accent-ink);
                     border-radius: 5px; padding: 1px 5px; font-weight: 800; }
.folder .cnt { font-size: 13px; color: var(--ink-soft); margin-top: 2px; font-variant-numeric: tabular-nums; }
.folder .sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }
.folder .sub b { color: var(--green); }
.folder .themes { font-size: 11.5px; color: var(--gray); margin-top: 5px; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }

.hidden-view { display: none !important; }

/* ---------------- 모달 ---------------- */
.overlay {
  position: fixed; inset: 0; background: rgba(30, 25, 20, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
  backdrop-filter: blur(2px);
}
.overlay[hidden] { display: none; }
.modal {
  background: var(--panel); border-radius: 22px; box-shadow: var(--shadow-lg);
  width: min(880px, 100%); max-height: 92vh; overflow: auto;
}
.modal.narrow { width: min(460px, 100%); }
.modal .head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 0; }
.modal .head h2 { flex: 1; font-size: 22px; }
.modal .content { padding: 16px 20px 20px; }
.modal .foot { display: flex; gap: 10px; justify-content: flex-end; padding: 0 20px 20px; flex-wrap: wrap; }
.x { border: none; background: #f0ece5; border-radius: 50%; width: 36px; height: 36px; font-size: 18px; }
.dgrid { display: grid; gap: 18px; grid-template-columns: minmax(220px, 1fr) 1.1fr; }
@media (max-width: 880px) { .dgrid { grid-template-columns: 1fr; } }

/* ---------------- 추천 마법사 ---------------- */
.overlay.top { z-index: 120; }          /* 추천 결과 위에 제품 상세가 뜨도록 */
/* 확인 창(조립 시작 · 예약 · 로그아웃 등)과 회원 로그인 창은 제품 상세보다 항상 위 */
#ask { z-index: 140; }
#memberPick { z-index: 150; }
.wizstep { display: flex; gap: 6px; margin-bottom: 14px; }
.wizstep i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.wizstep i.on { background: var(--brand); }
.wizq { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.wizsub { color: var(--ink-soft); font-size: 14px; margin: 0 0 16px; }
.bigchips { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.bigchips button {
  border: 1.5px solid var(--line); background: var(--panel); border-radius: 14px;
  padding: 18px 12px; font-size: 17px; font-weight: 700; text-align: center;
}
.bigchips button .s { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-top: 3px; }
.bigchips button.on { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); }
.bigchips button.on .s { color: var(--brand); }

.stepper { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line);
           border-radius: 999px; padding: 4px 6px; background: var(--panel); }
.stepper button { border: none; background: #f2eee7; width: 38px; height: 38px; border-radius: 50%;
                  font-size: 20px; font-weight: 800; line-height: 1; }
.stepper button:disabled { opacity: .35; }
.stepper .val { min-width: 92px; text-align: center; font-weight: 800; font-size: 16px; }

.adjustbar { background: #faf8f4; border: 1px solid var(--line); border-radius: 14px;
             padding: 12px; margin-bottom: 14px; }
.adjustbar .line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.adjustbar .line + .line { margin-top: 10px; }
.adjustbar .lbl { font-size: 13px; font-weight: 700; color: var(--ink-soft); min-width: 62px; }

/* 시리즈 로고 썸네일 (폴더 카드) */
.folder .logothumb {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  background: #fff; padding: 12% 10%;
}
.folder .logothumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* 스태프 — 시리즈 관리 */
.serrow { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px;
          cursor: pointer; border: 1px solid transparent; }
.serrow:hover { background: #faf8f4; }
.serrow.on { background: var(--brand-tint); border-color: var(--brand); }
.serrow .th { width: 46px; height: 34px; border-radius: 7px; background: #fff; border: 1px solid var(--line);
              display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; }
.serrow .th img { max-width: 100%; max-height: 100%; object-fit: contain; }
.serrow .nm { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serrow .ct { font-size: 12.5px; color: var(--ink-soft); }
.dropzone {
  border: 2px dashed #cfc6e3; border-radius: 14px; background: #faf8fd; padding: 16px;
  display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.dropzone.over { background: var(--brand-tint); border-color: var(--brand); }
.dropzone .folder { box-shadow: none; }
@media (max-width: 560px) { .dropzone { grid-template-columns: 1fr; } }

/* 추천 마법사 — 시리즈 폴더 고르기 */
.pickgrid { display: grid; gap: 9px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.pickgrid .folder { cursor: pointer; }
.pickgrid .folder .mosaic { aspect-ratio: 4 / 3; }
.pickgrid .folder .body { padding: 8px 10px 10px; }
.pickgrid .folder .name { font-size: 14.5px; }
.pickgrid .folder .sub { font-size: 12px; margin-top: 2px; }
.pickgrid .folder.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.pickgrid .folder .check {
  position: absolute; top: 11px; right: 7px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; box-shadow: var(--shadow);
}

/* ---------------- 회원 번호 키패드 ---------------- */
.dots { display: flex; gap: 14px; justify-content: center; margin: 6px 0 20px; }
.dots i {
  width: 16px; height: 16px; border-radius: 50%; background: #e6e0d6;
  border: 2px solid #e6e0d6; transition: background .12s ease, transform .12s ease;
}
.dots i.on { background: var(--brand); border-color: var(--brand); transform: scale(1.12); }
.dots.err i { background: #f6d0d0; border-color: #f0b6b6; }  /* 오류 — 빨강 계열 유지 */

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keypad button {
  border: 1px solid var(--line); background: var(--panel); border-radius: 14px;
  padding: 16px 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em;
  transition: transform .06s ease, background .12s ease;
}
.keypad button:active { transform: scale(.95); background: #f3efe8; }
.keypad button.sub { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.startpin { margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.startpin-lbl { font-size: 13px; font-weight: 700; color: var(--ink-soft); text-align: center; }
.startpin .dots { margin: 8px 0 12px; }
.keypad.sm { gap: 8px; max-width: 320px; margin: 0 auto; }
.keypad.sm button { padding: 11px 0; font-size: 21px; border-radius: 12px; }
#loginResult:not(:empty) { margin-top: 14px; }
#loginResult .err { color: var(--danger); font-weight: 700; text-align: center; }
#loginResult .who {
  border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-align: center;
}
#loginResult .who b { font-size: 20px; }

/* ---------------- 토스트 ---------------- */
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--brand-ink); color: #fff; padding: 13px 22px; border-radius: 14px;
  font-weight: 600; box-shadow: var(--shadow-lg); z-index: 200; max-width: 90vw; text-align: center;
}
#toast[hidden] { display: none; }
#toast.warn { background: var(--danger); }

/* ---------------- 진행중 배너 ---------------- */
/* 스태프 — 조립 중 목록의 테이블 번호 */
.tableno {
  flex: 0 0 auto; min-width: 46px; height: 46px; border-radius: 12px;
  background: var(--brand); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-weight: 800; line-height: 1;
}
.tableno .lbl { font-size: 9.5px; font-weight: 700; opacity: .8; margin-bottom: 2px; }
.tableno .no { font-size: 19px; letter-spacing: -.02em; }
.tableno.none { background: var(--gray); }

/* ---------------- 테이블 ---------------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12.5px; color: var(--ink-soft); font-weight: 700; background: #faf8f4; position: sticky; top: 0; }
tr:last-child td { border-bottom: none; }
.scroll { max-height: 60vh; overflow: auto; border-radius: var(--radius); }
/* 열이 많은 표는 화면이 좁아도 뭉개지지 않고 가로로 스크롤된다 */
table.compact { min-width: 880px; }
table.compact th, table.compact td { white-space: nowrap; }

/* ---------------- 태그 관리 ---------------- */
.taglayout { display: grid; gap: 14px; grid-template-columns: minmax(260px, 340px) 1fr; }
@media (max-width: 860px) { .taglayout { grid-template-columns: 1fr; } }
.taglist { max-height: 70vh; overflow: auto; }
.tagrow { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px;
          cursor: pointer; border: 1px solid transparent; }
.tagrow:hover { background: #faf8f4; }
.tagrow.on { background: var(--brand-tint); border-color: var(--brand); }
.tagrow .nm { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagrow .ct { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.eye { border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
       font-size: 11.5px; font-weight: 700; padding: 2px 8px; color: var(--ink-soft); white-space: nowrap; }
.eye.on { background: #e2f6e9; border-color: #b9e6c8; color: #14713b; }
.taggroup { font-size: 12px; font-weight: 800; color: var(--ink-soft); margin: 12px 4px 4px; }
.chip.tagx { padding-right: 8px; }
.chip.tagx b { margin-left: 4px; color: var(--danger); }

/* ---------------- 스태프 탭 ---------------- */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { border: 1px solid var(--line); background: var(--panel); border-radius: 12px;
       padding: 10px 18px; font-weight: 700; }
.tab.on { background: var(--brand-ink); color: #fff; border-color: var(--brand-ink); }
.cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.stat { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.stat .box { background: var(--panel); border: 1px solid var(--line);
             border-radius: var(--radius); padding: 10px 13px; box-shadow: var(--shadow); }
.stat .box b { display: block; font-size: 23px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.stat .box span { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.itemrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px;
           border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: var(--panel); }
.itemrow img { width: 56px; height: 46px; object-fit: contain; background: #f4f0ea; border-radius: 8px; }
.itemrow .g { flex: 1 1 190px; min-width: 0; }
.itemrow .tick { margin-left: auto; }
.itemrow .g b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itemrow .g span { font-size: 12.5px; color: var(--ink-soft); }
.empty { text-align: center; color: var(--ink-soft); padding: 26px 10px; font-size: 14px; }

.hint { background: #fff8e5; border: 1px solid #f2e2b0; border-radius: 12px; padding: 10px 14px;
        font-size: 13.5px; color: #6b5510; }

@media (max-width: 640px) {
  .wrap { padding: 12px 12px 120px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .logo { font-size: 17px; }
}

/* 태블릿이 한 테이블에 고정돼 있을 때 — 입력칸 대신 번호만 */
.tablefixed {
  font-size: 22px; font-weight: 800; color: var(--ink, #2b2620);
  background: #f4f0ea; border-radius: 12px; padding: 10px 14px;
}