* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --accent: #3182f6;
  --accent-dark: #1b64da;
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #191f28;
  --muted: #8b95a1;
  --text-mid: #4e5968;
  --line: #e8ebef;
  --tint: #f5f9ff;
  --danger: #e5484d;
  --danger-bg: #fdeaea;
  --pink: #e3007f;
  --pink-dark: #b30063;
  --pink-bg: #fce4f1;
  --success: #1f8a3d;
  --success-bg: #e5f7e9;
  --warn: #ffd238;
}

body {
  font-family: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar .logo {
  font-weight: 800;
  font-size: 16.5px;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}
.topbar .logo span { color: var(--text); }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 13px; color: var(--muted); white-space: nowrap; }

.wrap { max-width: 760px; margin: 0 auto; padding: 20px 16px 60px; }

.card {
  background: var(--card);
  border: 1px solid #e5e8eb;
  border-radius: 18px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .025);
}
.card.clickable { cursor: pointer; transition: box-shadow .15s, transform .15s, border-color .15s; }
.card.clickable:hover { border-color: #c9d9f2; box-shadow: 0 4px 14px rgba(25, 31, 40, .06); transform: translateY(-1px); }

h1 { font-size: 22px; margin-bottom: 6px; }
h2 { font-size: 18px; margin-bottom: 12px; }
.sub { color: var(--muted); font-size: 13.5px; margin-bottom: 18px; }

label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; color: #44445a; }
input:not([type]), input[type=text], input[type=password], input[type=tel], input[type=number], input[type=email], input[type=date], input[type=search], textarea, select {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid #e5e8eb;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
input[type=date] { color: var(--text); }
input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
input::placeholder, textarea::placeholder { color: #b0b8c1; }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(49, 130, 246, .10);
}
textarea { resize: vertical; min-height: 90px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  transition: background .15s;
}
.btn:hover { background: var(--accent-dark); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.full { width: 100%; margin-top: 16px; }
.btn.ghost { background: #e7f3fe; color: var(--accent-dark); }
.btn.ghost:hover { background: #d9ebfc; }
.btn.outline { background: #fff; color: var(--text-mid); border: 1.5px solid #e5e8eb; }
.btn.outline:hover { background: #f7f8fa; }
.btn.danger { background: var(--danger-bg); color: var(--danger); }
.btn.danger:hover { background: #f9d8d8; }
.btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 8px; }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row .grow { flex: 1; min-width: 120px; }

.back {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); font-size: 13.5px; cursor: pointer;
  margin-bottom: 12px; background: none; border: none; font-family: inherit;
}
.back:hover { color: var(--accent); }

.empty {
  text-align: center; color: var(--muted); font-size: 14px;
  padding: 44px 0;
}

.badge {
  display: inline-block; font-size: 10px; font-weight: 500;
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid transparent;
  background: #edf4fe; color: var(--accent-dark);
}
.badge.warn { background: var(--warn); color: #191f28; }
/* 상태 태그: 수정요청 > 수정중 > 시안제공 > 확정(완료·중립) 순으로 눈에 띄게 */
.badge.st-sian { background: #eaf3ff; color: var(--accent-dark); border-color: #d4e5ff; }
.badge.st-feedback { background: #dbe9fd; color: #185fa5; border-color: #b9d3f5; }
.badge.st-revising { background: #eee9ff; color: #6541c7; border-color: #d8ceff; }
.badge.st-final { background: var(--success-bg); color: var(--success); border-color: #c7ecd2; }
.badge.st-done { background: #f2f4f6; color: #6b7684; border-color: #e5e8eb; }
.badge.ok { background: #f2f4f6; color: #6b7684; }
/* 디자이너 홈: 내 담당 주문 최대 2열 (좁아지면 1열) */
.dsg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
@media (max-width:760px){.dsg-grid{grid-template-columns:1fr}}
.dsg-grid>.card{margin:0}

/* 디자이너 홈: 오늘 할 일 목록 */
.dsg-todos{display:flex;flex-direction:column;margin-top:6px}
.dsg-todo{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line-2,#f2f4f8);padding:11px 2px;cursor:pointer;font-family:inherit;transition:background .12s}
.dsg-todos>.dsg-todo:first-child{border-top:0}
.dsg-todo:hover{background:#fafbfc}
.dsg-todo-d{flex:0 0 auto;min-width:52px;text-align:center;font-size:11.5px;font-weight:800;letter-spacing:-.01em;border-radius:7px;padding:5px 8px;font-variant-numeric:tabular-nums}
.dsg-todo-t{flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--text);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsg-todo-t span{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.dsg-todo .badge{flex-shrink:0}

/* 작업요청 탭 2열: 좌(연동·담당·작업요청) / 우(작업 브리핑) */
.wr-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.wr-col{min-width:0;display:flex;flex-direction:column;gap:14px}
.wr-col>.card{margin:0}
@media(max-width:1100px){.wr-split{grid-template-columns:1fr}}

/* iOS 스타일 이전/다음 화살표 (얇은 셰브론 · 테두리 없음) */
.nav-chev {
  width: 30px; height: 30px; padding: 0;
  border: none; background: transparent; border-radius: 50%;
  color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.nav-chev:hover:not(:disabled) { background: #f2f4f6; color: var(--text); }
.nav-chev:active:not(:disabled) { background: #e8ebef; }
.nav-chev:disabled { opacity: .25; cursor: default; }
.nav-chev svg { width: 17px; height: 17px; }

/* 주문관리 상태 태그 컬러 시스템 (아이콘 + 텍스트) */
.badge.ord { display: inline-flex; align-items: center; gap: 4px; }
.badge.ord svg { width: 12px; height: 12px; flex-shrink: 0; }
.badge.o-gray   { background: #F5F5F5; color: #6B7280; border-color: #e4e6e9; }
.badge.o-blue   { background: #EDF4FF; color: #2563EB; border-color: #d9e5ff; }
.badge.o-blue-on{ background: #2563EB; color: #EDF4FF; border-color: #2563EB; }
.badge.o-amber  { background: #FFF8E0; color: #D97706; border-color: #f6e5b4; }
.badge.o-amber-on{ background: #D97706; color: #FFF8E0; border-color: #D97706; }
.badge.o-cyan   { background: #ECF8FF; color: #0891B2; border-color: #cfe9fb; }
.badge.o-violet { background: #F5F0FF; color: #7C3AED; border-color: #e2d6ff; }
.badge.o-red    { background: #FFF1F2; color: #DC2626; border-color: #fbd5d7; }
.badge.o-indigo { background: #EEF2FF; color: #4F46E5; border-color: #d8daff; }

.notice {
  background: #f7f8fa; border: 0;
  border-radius: 12px; padding: 15px; font-size: 14px;
  color: var(--text-mid); text-align: center;
}
.notice.green { background: var(--success-bg); border-color: #c4e8cd; color: var(--success); }
.notice.purple { background: #f3e8fd; border-color: #e2cdf7; color: #8a3fd1; }

.notice-text {
  white-space: pre-wrap; word-break: break-word;
  font-size: 13.5px; line-height: 1.35; color: var(--text-mid);
}

details.guide {
  background: #f6f6fb; border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; margin-bottom: 12px;
}
details.guide summary {
  font-size: 14px; font-weight: 700; color: var(--accent-dark);
  cursor: pointer; user-select: none;
}
details.guide[open] summary { margin-bottom: 10px; }

.warn-banner {
  background: var(--danger); color: #fff;
  font-weight: 700; font-size: 15px; line-height: 1.6;
  white-space: pre-line; text-align: center;
  padding: 14px 16px; border-radius: 10px; margin-bottom: 12px;
}
.warn-banner span {
  display: block; font-size: 12.5px; font-weight: 500;
  margin-top: 5px; opacity: .95;
}

.feedback-item.designer-fb {
  background: #eef4fe; border: 1px solid #d5e3f8;
  border-radius: 10px; padding: 12px 14px; margin: 10px 0;
}

/* 카톡식 대화창: 보는 사람 기준 내 메시지는 오른쪽, 상대는 왼쪽 */
.chat-msg { display: flex; flex-direction: column; margin: 10px 0; }
.chat-msg.mine { align-items: flex-end; }
.chat-msg.theirs { align-items: flex-start; }
.chat-msg .bubble {
  max-width: 85%; padding: 10px 14px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}
.chat-msg.mine .bubble { border-bottom-right-radius: 4px; }
.chat-msg.theirs .bubble { border-bottom-left-radius: 4px; }
.bubble.cust { background: #fff1b8; color: #1c1c28; }
.bubble.dsgn { background: #eaf3ff; color: var(--text); }
.chat-msg .meta { font-size: 11.5px; color: var(--muted); margin: 3px 6px; }
.chat-msg .meta b { font-size: 12.5px; color: var(--accent-dark); }
.chat-msg .thumb-grid {
  margin-top: 4px; width: 100%; max-width: 320px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chat-msg .thumb-grid img { width: 96px; height: 96px; }
.chat-msg.mine .thumb-grid { justify-content: flex-end; }
.chat-msg.theirs .thumb-grid { justify-content: flex-start; }

/* 선택시안 A안/B안 라벨 — 버튼이 아닌 카드 제목 라벨 스타일 */
.opt-title {
  display: inline-block;
  background: #eaf3ff; color: var(--accent-dark);
  font-size: 17px; font-weight: 800; letter-spacing: 1.5px;
  padding: 6px 20px; border-radius: 10px;
}
.opt-title.sel { background: #fce4f1; color: #e3007f; }

/* 선택시안 가로 배열: A안 B안이 나란히, 클릭하면 확대 */
.opt-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  align-items: start;
}
.opt-col img {
  width: 100%; border-radius: 10px; border: 1px solid var(--line);
  margin-top: 6px; cursor: zoom-in; display: block;
}

/* 시안 카드 = 디자이너의 왼쪽 메시지: 연블루 톤 + 왼쪽 말풍선 꼬리 (고객 화면 전용) */
details.round-group {
  background: #fcfdff; border: 1px solid #c8d6e8;
  border-radius: 16px; border-top-left-radius: 6px;
  padding: 13px 14px; margin: 0 10px 16px 6px;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .04);
}
details.round-group::before {
  content: ""; position: absolute; top: 14px; left: -6px;
  width: 11px; height: 11px;
  background: #fcfdff;
  border-left: 1px solid #c8d6e8; border-bottom: 1px solid #c8d6e8;
  transform: rotate(45deg);
  border-bottom-left-radius: 3px;
}

/* 차수 제목 아래 부가정보 줄 (시안 수 · 등록일) */
.round-sub {
  display: block; font-size: 12.5px; font-weight: 400;
  color: var(--muted); margin-top: 1px;
}

/* 카드 사이에 단독으로 놓인 안내 박스도 카드와 같은 간격 유지 */
#app > .notice { margin-bottom: 14px; }
details.round-group summary {
  font-size: 16px; font-weight: 700; cursor: pointer; user-select: none;
  color: var(--text);
}
details.round-group[open] summary { margin-bottom: 4px; }

/* ── 관리자 시안 탭: 차수 탭(세그먼트) + 흰 카드 패널 ── */
.round-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.round-tabs button {
  padding: 8px 15px; border: 1px solid var(--line); background: var(--card);
  border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  cursor: pointer; font-family: inherit; transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.round-tabs button:hover { color: var(--text); border-color: #c9d2de; }
.round-tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.round-tabs .rt-badge {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
}
.round-tabs button.on .rt-badge { background: rgba(255, 255, 255, .25); color: #fff; }

.round-panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 18px; margin: 0 0 14px;
  box-shadow: 0 1px 2px rgba(20, 30, 60, .04), 0 4px 14px rgba(20, 30, 60, .05);
}
.round-head {
  font-size: 15.5px; font-weight: 700; color: var(--text);
  padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.round-head .round-when { font-weight: 400; font-size: 12.5px; color: var(--muted); }

/* 관리자 패널 안의 옵션 라벨만 차분하게 (고객 화면 .opt-title은 원본 유지) */
.round-panel .opt-title {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  padding: 4px 12px; border-radius: 999px;
}
.round-panel .opt-title.sel {
  background: #fce4f1; color: #e3007f;
}

/* 관리자 패널 말풍선 색: 고객=연회색 / 디자이너(우리)=파랑 — 고객 화면 색 스킴과 통일
   (기본 .bubble.cust/.dsgn 은 고객 화면과 공유하므로 .round-panel 로만 스코프) */
.round-panel .bubble.cust { background: #f1f4f8; color: #2b2f36; }
.round-panel .bubble.dsgn { background: var(--accent); color: #fff; }

/* 관리자 시안 패널: 이미지를 작은 썸네일로 나열 (클릭하면 라이트박스로 확대) */
/* 관리자 화면: 제공 시안은 디자이너가 보내는 것이므로 우측 정렬 */
/* 관리자·디자이너 시안: 고객 화면처럼 정사각 썸네일 카드 */
.round-panel .proof-imgs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.round-panel .proof-imgs .img-wrap { width: 170px; flex: 0 0 auto; position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #eef1f5; border: 1px solid var(--line); }
.round-panel .proof-imgs .img-wrap img { width: 100%; height: 100%; object-fit: cover; margin: 0; border: 0; border-radius: 0; display: block; }
.round-panel .opt-row { grid-template-columns: repeat(auto-fill, 170px); justify-content: end; }
.round-panel .opt-col img { aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #eef1f5; }

/* 관리 도구 버튼 (강제확정·기간연장·삭제) — 통일 중립 박스 + 아이콘 */
.mtool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 13px 4px; border: 1px solid var(--line); border-radius: 11px; background: #fff; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; font-family: inherit; transition: all .12s; }
.mtool svg { color: var(--muted); }
.mtool:hover { border-color: var(--accent); color: var(--accent); background: #f8fbff; }
.mtool:hover svg { color: var(--accent); }
.mtool.danger:hover { border-color: var(--danger); color: var(--danger); background: #fef4f4; }
.mtool.danger:hover svg { color: var(--danger); }

/* 시안 탭 2단 분리: 왼쪽=보기(시안·받은메시지) / 오른쪽=작성(답글·액션)
   컬럼 분할선을 상단 .pd-grid(1fr 460px, gap 16px)와 동일하게 맞춤 */
.sian-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.sian-view { min-width: 0; }
.sian-compose {
  position: sticky; top: 16px;
  display: flex; flex-direction: column; gap: 14px;
  max-height: calc(100vh - 32px); overflow: auto;
}
.sian-compose > * { margin: 0 !important; }
@media (max-width: 1100px) {
  .sian-split { grid-template-columns: 1fr; }
  .sian-compose { position: static; max-height: none; overflow: visible; }
}

.tabs { display: flex; gap: 6px; margin: 0 0 12px; }
.tabs button {
  padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--line);
  background: var(--card); font-size: 13.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; color: var(--muted);
}
.tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.thumb-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line);
  cursor: pointer; background: #f0f0f5;
}

.proof-imgs img {
  width: 100%; border-radius: 10px; border: 1px solid var(--line);
  margin-bottom: 10px; cursor: zoom-in; display: block;
}

.feedback-item {
  border-top: 1px solid var(--line);
  padding: 13px 0;
}
.feedback-item:first-child { border-top: none; }
.feedback-item .meta { font-size: 12.5px; color: var(--muted); margin-bottom: 3px; }
.feedback-item .meta b { color: var(--text); font-size: 13.5px; }
.feedback-item .meta b.designer { color: var(--accent-dark); }
.feedback-item .text { font-size: 14.5px; white-space: pre-wrap; word-break: break-word; }

.overlay {
  position: fixed; inset: 0; background: rgba(10,10,25,.88);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; cursor: zoom-out; padding: 16px;
}
.overlay img { max-width: 100%; max-height: 100%; border-radius: 6px; }

/* 이미지 뷰어 (확대/축소) */
.overlay.lightbox { padding: 0; cursor: default; }
.lb-scroll {
  position: absolute; inset: 0; overflow: auto;
  display: flex;
}
.lb-scroll img {
  margin: auto; max-width: none; max-height: none;
  border-radius: 0; cursor: grab; user-select: none;
}
.lb-scroll img:active { cursor: grabbing; }
.lb-controls {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  background: rgba(20,20,35,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 8px 12px; border-radius: 30px;
  z-index: 101; box-shadow: 0 6px 20px rgba(0,0,0,.4);
  max-width: calc(100vw - 20px); flex-wrap: wrap; justify-content: center;
}
.lb-controls button {
  background: rgba(255,255,255,.14); color: #fff; border: none;
  border-radius: 18px; padding: 8px 14px; font-size: 15px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.lb-controls button:hover { background: rgba(255,255,255,.28); }
.lb-pct { color: #fff; font-size: 13.5px; font-weight: 700; min-width: 48px; text-align: center; }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: #fff; font-size: 14px;
  padding: 11px 20px; border-radius: 30px; z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  animation: toastIn .2s ease;
  max-width: calc(100vw - 40px);
  text-align: center;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } }

.loading { text-align: center; padding: 50px 0; color: var(--muted); font-size: 14px; }
.spinner {
  width: 26px; height: 26px; margin: 0 auto 10px;
  border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.login-box { max-width: 380px; margin: 8vh auto 0; }
.login-box .logo-big {
  text-align: center; font-size: 24px; font-weight: 800;
  color: var(--accent); margin-bottom: 4px;
}
.login-box .logo-big span { color: var(--text); }
.login-box .sub { text-align: center; }

.attach-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.attach-preview .item { position: relative; }
.attach-preview img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line);
}
.attach-preview .del {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--text); color: #fff; border: none;
  font-size: 12px; line-height: 1; cursor: pointer;
}

.customer-head {
  background: linear-gradient(135deg, var(--accent), #6ab2ff);
  color: #fff; border-radius: 0; height: 300px; position: relative;
  /* 배경 뷰포트 좌우 끝까지(풀블리드), 각진 배너 — 아래 콘텐츠 시트가 위로 덮음 */
  margin: -20px calc(-50vw + 50%) 0; padding: 0;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
}
/* 전용 캐릭터: 배너 오른쪽 하단 — 손이 아래 회색 시트로 살짝 튀어나오게 */
.ch-char { position: absolute; bottom: 19.5px; right: max(14px, calc(50vw - 380px));
  width: 300px; max-width: 46%; height: auto; z-index: 2; pointer-events: none; }
/* 배너 안 콘텐츠는 기존 760px 폭 그대로, 상단에 살짝 여유 */
.customer-head > .ch-inner { width: 100%; max-width: 760px; padding: 24px 24px 0; }
.ch-top { display: flex; align-items: center; }
.ch-logo { height: 18px; width: auto; display: block; }
.ch-greet { margin-top: 30px; text-align: left; }
.ch-company { font-size: 20px; font-weight: 500; line-height: 1.2; }
.ch-name { font-size: 24px; font-weight: 700; line-height: 1.2; margin-top: 2px; }
.ch-hello { font-size: 20px; font-weight: 400; line-height: 1.2; margin-top: 2px; }
.ch-guide { background: rgba(255,255,255,.2) !important; margin-top: 16px; font-size: 10px !important; font-weight: 500 !important; border-radius: 4px !important; padding: 5px 9px !important; }
/* 콘텐츠 시트: 페이지 배경색 + 상단 둥근 모서리로 파란 배너 위를 덮음 */
.ch-sheet { background: #fafbfc; border-radius: 24px 24px 0 0;
  margin: -28px calc(-50vw + 50%) 0; position: relative; z-index: 1;
  min-height: calc(100vh - 272px); display: flex; flex-direction: column; align-items: center; }
.ch-sheet-inner { width: 100%; max-width: 760px; flex: 1;
  display: flex; flex-direction: column; padding: 16px 16px 18px; }
/* 이용안내 헤더: 부드러운 파스텔 그라데이션 + 중앙 픽토그램 (좌우 풀블리드, 각짐) */
.notice-head { text-align: center; border-radius: 0; margin: -20px calc(-50vw + 50%) 16px;
  padding: 44px 20px 40px; position: relative;
  /* 대각 파스텔 + 하단 세로 페이드(배경색) → 아래 경계 자연스럽게 */
  background:
    linear-gradient(180deg, rgba(250,251,252,0) 52%, #fafbfc 100%),
    linear-gradient(150deg, #d8e5ff 0%, #e6ddff 52%, #edeff7 100%); }
.notice-back { position: absolute; top: 12px; left: 16px; background: none; border: 0;
  font-size: 30px; line-height: 1; color: var(--accent); cursor: pointer; font-family: inherit; padding: 2px 10px; }
.notice-ico { width: 62px; height: 62px; border-radius: 19px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px;
  box-shadow: 0 10px 26px rgba(90,110,200,.16); }
.notice-ico svg { width: 30px; height: 30px; color: var(--accent); }
.notice-head h1 { color: var(--text); font-size: 20px; }
.notice-head p { color: #6b7684; font-size: 13.5px; margin-top: 6px; }
/* 이용안내 아코디언: 한 카드 안의 리스트, 앞에 +/− (하나 열면 나머지 접힘) */
.acc-wrap { background: #fff; border: 1px solid #edf0f4; border-radius: 16px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(17,24,39,.03); margin-bottom: 16px; }
.acc { border-bottom: 1px solid #f0f2f5; }
.acc:last-child { border-bottom: 0; }
.acc > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px;
  padding: 17px 18px; font-size: 15px; font-weight: 600; color: var(--text); }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::before { content: "+"; font-size: 19px; font-weight: 400; line-height: 1;
  color: var(--muted); width: 16px; text-align: center; flex-shrink: 0; }
.acc[open] > summary::before { content: "\2212"; } /* − (minus) */
.acc[open] > summary { color: var(--accent); }
.acc .notice-text { padding: 0 18px 18px 46px; }
/* 고객 카드: 제목 ↔ 배지 한 줄 유지 (제목 길면 …말줄임), 세로 중앙정렬 + 간격 10px */
.card-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; min-width: 0; }
.card-titlerow > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex-shrink: 1; }
.card-titlerow > .badge { flex-shrink: 0; }
/* 카드 진행 안내 문구 (앞 벨 아이콘 + 한 줄) — PC는 긴 문구, 모바일은 짧은 문구 */
.est { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-mid); margin-top: 7px; line-height: 1.4; }
.est-bell { width: 13px; height: 13px; flex-shrink: 0; color: var(--accent); }
.est-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est b { color: var(--accent); font-weight: 700; }
.est-pink b, .est-pink .est-bell { color: #f04785; }
.est-sm { display: none; }
@media (max-width: 480px) {
  .est { font-size: 11.5px; }
  .est-lg { display: none; }
  .est-sm { display: inline; }
}
/* 주문 목록 섹션 제목 (진행 중 / 주문 내역) */
.ch-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 5px 16px; }
.list-divider + .ch-title { margin-top: 16px; }
/* 진행 중 ↔ 주문 내역 구분선 (위아래 0, 카드/제목 여백으로 16px씩) */
.list-divider { height: 1px; background: #e5e8ee; margin: 0 4px; }
/* 저작권: 시트 맨 아래로 밀착 */
.ch-copyright { margin-top: auto; padding-top: 40px; text-align: center;
  font-size: 11px; color: #aab2bd; letter-spacing: .3px; }
/* 큰 화면은 캐릭터가 커져(300px) 발과 시트 사이 파란 틈이 생기므로 시트를 더 겹침 */
@media (min-width: 641px) { .ch-sheet { margin-top: -34px; } }
.customer-head h1 { color: #fff; font-size: 20px; }
.customer-head p { font-size: 13.5px; opacity: .85; }

@media (max-width: 480px) {
  .wrap { padding: 14px 12px 50px; }
  .card { padding: 15px; border-radius: 12px; }
  h1 { font-size: 19px; }
  .customer-head { margin: -14px calc(-50vw + 50%) 0; } /* 모바일: 상단 여백만 맞추고 좌우 풀블리드 */
  .notice-head { margin-top: -14px; }
  .customer-head > .ch-inner { padding: 24px 20px 0; }
  .ch-sheet-inner { padding: 16px 12px 18px; }
  .ch-title { margin-left: 8px; } /* 제목만 배너 라인(20px)에 맞춤 — 카드는 그대로 12px */
}

/* 인쇄기간 안내: 시안 정보와 시안 사이의 조용한 안내 카드 (인쇄 고객 전용) */
.ship-notice {
  background: #f3f7ff;
  border: 1px solid #c9dcff;
  border-radius: 16px;
  padding: 19px 18px;
  margin-bottom: 16px;
  text-align: center;
}
.ship-notice .ship-head {
  font-size: 15.5px; font-weight: 700; line-height: 1.5;
  color: var(--accent-dark); margin-bottom: 7px;
}
.ship-notice p {
  font-size: 12px; line-height: 1.55; color: #5b6675; margin: 5px 0 0;
}

/* 순서 안내 배너 (오류 아님 — 연한 블루) */
.info-banner {
  background: #f2f7ff; color: var(--accent);
  border-radius: 12px; padding: 13px 15px;
  font-size: 13.5px; line-height: 1.6; text-align: center;
  margin-bottom: 12px;
}
.info-banner b { color: var(--accent-dark); }

/* 시안 선택 세그먼트: 실제 선택 버튼을 크고 명확하게 */
.tabs.seg { gap: 8px; margin: 8px 0 16px; }
.tabs.seg button {
  flex: 1; padding: 13px 0; font-size: 15.5px; font-weight: 700;
  border-radius: 12px; border: 1.5px solid #d8dde3;
  color: #6b7684; background: #fff;
}
.tabs.seg button.on {
  background: #eaf3ff; border-color: var(--accent); color: var(--accent-dark);
}

/* 최종확정: 피드백 보내기와 분리된 하단 보조 영역 */
.final-sep {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--line); text-align: center;
}
.final-sep p {
  font-size: 12.5px; color: var(--muted); line-height: 1.6; margin: 0 0 2px;
}
.final-sep .btn {
  background: #eaf7ef; color: #168443;
  border: 1.5px solid #cbebd7;
}
.final-sep .btn:hover { background: #ddefe2; }

/* 첨부 파일 칩: 누르면 다운로드 */
.file-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f2f4f7; border: 1px solid #e0e4e9;
  border-radius: 10px; padding: 9px 13px;
  font-size: 12.5px; font-weight: 600; color: var(--text-mid);
  text-decoration: none; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-chip:active { background: #e6e9ee; }
.attach-preview .item.file {
  display: flex; align-items: center; gap: 5px;
  background: #f2f4f7; border: 1px solid #e0e4e9;
  border-radius: 8px; padding: 8px 12px; font-size: 12px;
  max-width: 200px;
}
.attach-preview .item.file span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.file-chip.purged { opacity: .5; cursor: default; }

/* 알림톡 발송 기록: 관리자 대화 타임라인의 가운데 시스템 메시지 */
.sys-msg {
  text-align: center; font-size: 12px; color: var(--muted);
  background: #f2f4f7; border-radius: 20px;
  padding: 6px 14px; margin: 10px auto; width: fit-content; max-width: 90%;
}
.sys-msg span { opacity: .75; }

/* 바텀시트: 모바일은 아래에서 올라오고, 넓은 화면은 가운데 카드 */
.overlay.sheet-mode { align-items: flex-end; padding: 0; }
.sheet {
  background: #fff; width: 100%; max-width: 560px; margin: 0 auto;
  border-radius: 22px 22px 0 0; padding: 12px 20px 24px;
  max-height: 92vh; overflow-y: auto;
  animation: sheetUp .38s cubic-bezier(.3, 1.08, .35, 1);
}
@media (min-width: 640px) {
  .overlay.sheet-mode { align-items: center; padding: 20px; }
  .sheet { border-radius: 22px; }
}
.sheet-handle {
  width: 42px; height: 4px; border-radius: 2px;
  background: #e0e4e9; margin: 0 auto 14px;
}
@keyframes sheetUp {
  from { transform: translateY(48px); opacity: .4; }
  to { transform: none; opacity: 1; }
}

/* 선택 칩 (담당 디자이너 등) */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button {
  padding: 10px 18px; border-radius: 12px;
  border: 1.5px solid #d8dde3; background: #fff;
  color: #6b7684; font-weight: 700; font-size: 14px;
  font-family: inherit; cursor: pointer; transition: all .12s;
}
.chips button.on { background: #eaf3ff; border-color: var(--accent); color: var(--accent-dark); }

/* 점선 업로드 박스 */
.upload-box {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; padding: 17px;
  border: 1.5px dashed #c4cfdc; border-radius: 12px;
  background: #f8fafc; color: var(--text-mid);
  font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer;
  transition: background .12s;
}
.upload-box span { font-weight: 400; font-size: 12px; color: var(--muted); }
.upload-box .ub-ic { width: 26px; height: 26px; color: #9fb0c4; margin-bottom: 4px; }
/* 안내 문구 앞 SVG 아이콘 */
.nt-ico { display: flex; align-items: flex-start; gap: 9px; }
.nt-ico .nt-ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; opacity: .75; }
/* 안내(notice) 안의 아이콘+문구는 중앙 정렬 */
.notice.nt-ico { justify-content: center; text-align: center; }
.upload-box .ub-drop { font-size: 11.5px; color: #a8b4c2; margin-top: 2px; }
.upload-box.dragover .ub-ic, .upload-box.dragover .ub-drop { color: var(--accent); }
.upload-box:hover { background: #eef4fb; }
.upload-box.dragover { background: #eaf3ff; border-color: var(--accent); border-style: solid; color: var(--accent-dark); }

/* iOS 토글 스위치 */
.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px; font-weight: 600; font-size: 14px; cursor: pointer;
}
.switch {
  appearance: none; -webkit-appearance: none;
  width: 42px; height: 24px; border-radius: 12px;
  background: #d4d9e0; position: relative; cursor: pointer;
  transition: background .2s; flex-shrink: 0; margin-left: 10px;
}
.switch:checked { background: var(--accent); }
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  transition: left .2s;
}
.switch:checked::after { left: 20px; }

/* 차수 옆 부제 (초안/N차 수정안) */
.round-tag { font-size: 12.5px; font-weight: 500; color: var(--muted); }

/* 비용 안내 강조 카드 (초록 톤 — 고객 노란 말풍선과 구분) */
.cost-card {
  background: #fef7fb; border: 1.5px solid #f3b8d8;
  border-radius: 14px; border-top-left-radius: 4px;
  padding: 14px 16px; max-width: 88%;
  font-size: 14px; line-height: 1.75; white-space: pre-line;
  color: #5c1440; font-weight: 500;
}
.cost-card .cost-head {
  font-size: 15px; font-weight: 800; color: var(--pink-dark); margin-bottom: 6px;
  display: flex; align-items: center; gap: 7px;
}
.cost-card .cost-head svg { width: 19px; height: 19px; flex-shrink: 0; }
.cost-card .cost-copy {
  display: block; width: 100%; margin-top: 10px;
  padding: 9px 0; border: 0; border-radius: 10px;
  background: var(--pink); color: #fff;
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.cost-card .cost-copy:active { background: var(--pink-dark); }
/* 계좌 복사 + 입금했어요 두 버튼 */
.cost-card .cost-btns { display: flex; gap: 8px; margin-top: 10px; }
.cost-card .cost-btns .cost-copy { margin-top: 0; flex: 1; }
.cost-card .cost-paid {
  flex: 1; padding: 9px 0; border: 1.5px solid var(--pink); border-radius: 10px;
  background: #fff; color: var(--pink-dark);
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.cost-card .cost-paid:active { background: #fbd4e8; }
.cost-card .cost-done {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; color: var(--pink-dark);
  background: #fbd4e8; border-radius: 10px; padding: 9px 0;
}
@media (max-width: 420px) { .cost-card .cost-btns { flex-direction: column; } }

/* 공지 중앙 팝업 */
/* 공지 바텀시트 (아래에서 올라옴, 아무데나 눌러 닫기) — 화면 크기 무관 항상 하단 밀착 */
.ann-ov { cursor: pointer; }
.overlay.ann-ov { align-items: flex-end; padding: 0; }
@media (min-width: 640px) { .overlay.ann-ov { align-items: flex-end; padding: 0; } }
.ann-sheet {
  background: #fff; width: 100%; max-width: 480px; border-radius: 26px 26px 0 0;
  overflow: hidden; box-shadow: 0 -8px 40px rgba(10, 10, 25, .18);
  animation: annUp .4s cubic-bezier(.22, 1.05, .36, 1);
}
@keyframes annUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ann-hero {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 30px 0 56px; overflow: hidden;
  /* 대각 파스텔 + 하단 긴 세로 페이드(흰색) → 아래 콘텐츠로 아주 부드럽게 이어짐 */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 26%, rgba(255,255,255,.6) 70%, #ffffff 96%),
    linear-gradient(160deg, #bfe0ff 0%, #d4eaff 55%, #e9f4ff 100%);
}
.ann-ico {
  width: 90px; height: 90px; border-radius: 26px; position: relative;
  background: linear-gradient(145deg, #4aa3ff, #2f7cf6);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 14px rgba(79, 150, 255, .10), 0 0 0 34px rgba(79, 150, 255, .06),
              0 0 0 58px rgba(79, 150, 255, .03), 0 14px 30px rgba(47, 124, 246, .35);
}
.ann-ico svg { width: 42px; height: 42px; color: #fff; }
.ann-dot { position: absolute; top: 9px; right: 9px; width: 16px; height: 16px;
  border-radius: 50%; background: #ff6b3d; border: 3px solid #fff; }
.ann-content { text-align: center; padding: 0 26px 6px; }
.ann-t { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.4; }
.ann-b { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin-top: 11px; white-space: pre-line; }
.ann-hint { text-align: center; color: #b9c0c9; font-size: 12.5px;
  padding: 20px 0 26px; padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }

/* 아코디언: 기본 삼각형 대신 회전하는 셰브론 */
details.guide summary, details.round-group summary {
  list-style: none; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
details.guide summary::-webkit-details-marker,
details.round-group summary::-webkit-details-marker { display: none; }
details.guide summary::before, details.round-group summary::before {
  content: "❯"; font-size: 13px; font-weight: 800; color: var(--accent);
  transition: transform .2s ease; flex-shrink: 0; line-height: 1;
}
details.guide[open] summary::before,
details.round-group[open] summary::before { transform: rotate(90deg); }

/* 버튼 눌림 피드백 */
.btn, .chips button, .tabs button { transition: transform .08s ease, background .15s; }
.btn:active, .chips button:active, .tabs button:active { transform: scale(.96); }

/* 체크박스 브랜드 컬러 */
input[type=checkbox]:not(.switch) { accent-color: var(--accent); width: 18px; height: 18px; }

/* 확인 모달 */
.confirm-modal {
  background: #fff; border-radius: 20px;
  max-width: 340px; width: 100%; padding: 24px 20px 20px;
  animation: sheetUp .3s cubic-bezier(.3, 1.08, .35, 1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
}
.confirm-msg {
  font-size: 14.5px; line-height: 1.65; text-align: center;
  white-space: pre-line; color: var(--text); font-weight: 500;
}

/* 업무 현황 요약 스트립 (시안관리 홈) — 흰 카드 하나에 4칸, 숫자만 상태 색 */
.stat-row {
  display: flex;
  background: #fff; border: 1px solid #e5e8eb; border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .025);
  margin-bottom: 16px; overflow: hidden;
}
.stat-card {
  flex: 1; min-width: 0;
  background: none; border: 0; padding: 14px 4px 12px;
  text-align: center; cursor: pointer; font-family: inherit;
  transition: background .12s;
}
.stat-card + .stat-card { border-left: 1px solid #f0f2f5; }
.stat-card:hover { background: #f7f9fc; }
.stat-card .t {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--muted); margin-bottom: 0; white-space: nowrap;
}
.stat-card b { font-size: 23px; font-weight: 800; line-height: 1.25; }
.stat-card.su b { color: #b86b00; }
.stat-card.sf b { color: #d94720; }
.stat-card.sr b { color: #6541c7; }
.stat-card.st b { color: var(--accent-dark); }

/* 환경설정 textarea 스크롤바 부드럽게 */
textarea { scrollbar-width: thin; scrollbar-color: #d5dae1 transparent; }
textarea::-webkit-scrollbar { width: 8px; }
textarea::-webkit-scrollbar-thumb { background: #d5dae1; border-radius: 4px; }
textarea::-webkit-scrollbar-track { background: transparent; }

/* 고객 카드 컴팩트 */
.cust-card { padding: 14px 16px; margin-bottom: 10px; border-radius: 14px; }

.stat-card.on { background: #f2f7ff; }

/* 고객 공지 관리 바: 카드 없이 얇은 한 줄 + 하단 구분선 */
.ann-bar {
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px; padding: 2px 2px 12px;
}
.ann-bar summary {
  list-style: none; display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none;
  font-size: 14px; font-weight: 700; color: var(--text);
  min-width: 0;
}
.ann-bar summary::-webkit-details-marker { display: none; }
.ann-status { font-size: 12.5px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.ann-status.on { color: var(--danger); }
.ann-title {
  font-weight: 500; font-size: 13px; color: var(--text-mid);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.ann-edit { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent); flex-shrink: 0; }
.ann-edit::after { content: "편집 ›"; }
.ann-bar[open] .ann-edit::after { content: "접기 ∧"; }
.ann-form { padding: 10px 2px 4px; }

/* 안내문 관리: 항목별 아코디언 */
.nt-wrap > summary {
  list-style: none; display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; flex-wrap: wrap;
}
.nt-wrap > summary::-webkit-details-marker { display: none; }
.nt-sub { font-size: 12.5px; color: var(--muted); flex: 1; }
.nt-toggle { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent); flex-shrink: 0; }
.nt-toggle::after { content: "펼치기 ›"; }
.nt-wrap[open] .nt-toggle::after { content: "접기 ∧"; }
.nt-item {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-top: 10px; background: #fff;
}
.nt-item summary {
  list-style: none; display: flex; align-items: center; gap: 10px;
  cursor: pointer; user-select: none; min-width: 0;
}
.nt-item summary::-webkit-details-marker { display: none; }
.nt-num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  background: #eaf3ff; color: var(--accent-dark);
  font-size: 12.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.nt-item summary b { font-size: 14.5px; flex-shrink: 0; }
.nt-desc {
  font-size: 12.5px; color: var(--muted); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nt-item .badge { flex-shrink: 0; }
.nt-chev { color: var(--muted); flex-shrink: 0; transition: transform .2s; }
.nt-item[open] .nt-chev { transform: rotate(180deg); }
.nt-body { margin-top: 12px; }
.nt-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.nt-dirty { font-size: 12.5px; color: var(--muted); flex: 1; visibility: hidden; }
.nt-dirty.show { visibility: visible; }

/* 직원 관리 목록 행 */
.st-role { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-left: 6px; }
.st-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.st-editbtn {
  background: none; border: none; flex-shrink: 0;
  color: var(--accent); font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; padding: 4px 2px;
}

/* 주문 파이프라인 (시안 상세) */
.pipe {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0f2f5;
}
.pipe-step {
  font-size: 12.5px; font-weight: 700; color: #b0b8c1;
  padding: 3px 10px; border-radius: 20px; background: #f7f8fa;
}
.pipe-step.done { color: var(--success); background: var(--success-bg); }
.pipe-step.cur { color: #fff; background: var(--accent); }
.pipe-arrow { color: #d5dae1; font-size: 12px; font-weight: 700; }
.pipe-track { font-size: 12px; color: var(--muted); margin-left: 4px; }

/* 공통 선형 아이콘 */
.ic {
  width: 14px; height: 14px;
  color: var(--muted); vertical-align: -2px;
  display: inline-block; flex-shrink: 0;
}

/* 파란 라인 버튼 (정보 수정 등) */
.btn.oline { background: #fff; color: var(--accent); border: 1.5px solid var(--accent); }
.btn.oline:hover { background: #f2f7ff; }

/* 고객 정보 모달 (PC 기준 넓은 2열) */
.ci-sheet { max-width: 640px; padding: 16px 28px 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.ci-sec-title {
  font-size: 14.5px; font-weight: 800; color: var(--text);
  margin: 26px 0 2px; padding-top: 18px; border-top: 1px solid #f0f2f5;
}
.ci-sec-title:first-of-type { border-top: 0; padding-top: 0; margin-top: 14px; }
.ci-sub-title {
  font-size: 13.5px; font-weight: 700; margin: 16px 0 2px;
}
.ci-sub-title span { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.ci-cond {
  background: #f9fafc; border: 1px solid #eef1f5; border-radius: 12px;
  padding: 4px 14px 14px; margin-top: 12px;
}
.sel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sel-grid button {
  padding: 12px 8px; border-radius: 12px;
  border: 1.5px solid #e5e8eb; background: #fff;
  color: var(--text-mid); font-size: 13.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all .12s;
}
.sel-grid button.on {
  border-color: var(--accent); background: #f2f7ff;
  color: var(--accent-dark); font-weight: 700;
}
.sel-grid button.on::before { content: "✓ "; }
.ci-footer {
  position: sticky; bottom: 0;
  display: flex; gap: 10px;
  background: #fff; border-top: 1px solid var(--line);
  margin: 22px -28px 0; padding: 14px 28px 20px;
}
.ci-del {
  background: none; border: none; flex-shrink: 0;
  color: var(--danger); font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; padding: 4px 6px;
}

/* 바텀시트 스크롤바 얇게 */
.sheet { scrollbar-width: thin; scrollbar-color: #d8dde3 transparent; }
.sheet::-webkit-scrollbar { width: 6px; }
.sheet::-webkit-scrollbar-thumb { background: #d8dde3; border-radius: 3px; }
.sheet::-webkit-scrollbar-track { background: transparent; }

/* 주문 정보 행 */
.oi-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid #f0f2f5;
  font-size: 13.5px;
}
.oi-row:last-of-type { border-bottom: 0; }
.oi-row span { color: var(--muted); font-size: 12.5px; flex-shrink: 0; margin-right: 14px; }
.oi-row b { text-align: right; font-weight: 600; word-break: break-all; }

/* 작업요청 게시판식 에디터 */
.wr-editor{min-height:140px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.65;background:#fff;outline:none}
.wr-editor:focus{border-color:var(--accent)}
.wr-editor:empty::before{content:attr(data-ph);color:var(--muted)}
.wr-view{white-space:pre-wrap;font-size:14px;line-height:1.65;padding:12px 14px;background:var(--bg);border-radius:12px}
.wr-editor img,.wr-view img{max-width:280px;max-height:280px;border-radius:10px;display:block;margin:8px 0;border:1px solid var(--line);background:var(--bg);min-width:60px;min-height:40px}

/* 작업요청 에디터 서식 툴바 */
.wr-toolbar{display:flex;gap:2px;align-items:center;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;padding:6px 8px;background:var(--bg)}
.wr-toolbar button{border:0;background:none;border-radius:8px;padding:4px 8px;font-size:14px;cursor:pointer;line-height:1;color:var(--text)}
.wr-toolbar button:hover{background:#e9edf2}
.wr-sep{width:1px;height:16px;background:var(--line);margin:0 4px}
.wr-pal-wrap{position:relative}
.wr-pal{display:none;position:absolute;top:115%;left:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;gap:5px;z-index:30;box-shadow:0 6px 18px rgba(0,0,0,.1)}
.wr-pal.on{display:flex}
.wr-pal span{width:20px;height:20px;border-radius:6px;cursor:pointer;border:1px solid var(--line);flex-shrink:0}
.wr-pal span:hover{transform:scale(1.15)}

/* 작업요청 탭 토스 스타일 */
.wr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.wr-cell{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.wr-cell>span:first-child{color:var(--muted);font-size:13.5px;flex-shrink:0}
.wr-cell b{font-weight:600}
@media (max-width:720px){.wr-grid2{grid-template-columns:1fr;gap:12px}}
.wr-rows{margin-top:4px}
.wr-row{display:flex;align-items:center;justify-content:space-between;padding:13px 2px;border-bottom:1px solid var(--line);font-size:15px}
.wr-row:last-child{border-bottom:0}
.wr-row>span:first-child{color:var(--muted);font-size:14px}
.wr-row b{font-weight:600;font-size:15px}
input.wr-in{border:0;background:transparent;font-size:15px;font-weight:600;color:var(--text);text-align:right;padding:0;outline:none;box-shadow:none;border-radius:0;font-family:inherit}
input.wr-in:focus{color:var(--accent);border:0;box-shadow:none}
input[type=date].wr-in{width:auto}
.wr-toolbar{background:#fff;border-radius:14px 14px 0 0;padding:8px 10px}
.wr-toolbar button{color:var(--text-mid);border-radius:8px;padding:5px 9px}
.wr-toolbar button:hover{background:#F2F4F6}
.wr-editor{border-radius:0 0 14px 14px}
.wr-editor:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(49,130,246,.08)}
.wc-item{display:flex;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.wc-item:last-of-type{border-bottom:0}
.wc-ava{width:34px;height:34px;border-radius:50%;background:#E8F1FD;color:var(--accent);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.wc-meta{display:flex;gap:7px;align-items:baseline}
.wc-meta b{font-size:14px}
.wc-meta span{font-size:12px;color:var(--muted)}
.wc-text{font-size:14.5px;line-height:1.6;margin-top:2px;white-space:pre-wrap}
.wc-input{display:flex;gap:8px;align-items:center;margin-top:14px;background:#F2F4F6;border-radius:14px;padding:6px 6px 6px 14px}
.wc-input textarea{flex:1;border:0;background:transparent;min-height:24px;resize:none;font-size:14.5px;outline:none;box-shadow:none;padding:7px 0;margin:0;font-family:inherit;line-height:1.5}
.wc-input textarea:focus{border:0;box-shadow:none}
.wc-input .btn{border-radius:10px;padding:9px 16px;flex-shrink:0}

/* 작업요청 파일 첨부 */
.wc-file{display:flex;gap:8px;align-items:center;padding:9px 12px;background:var(--bg);border-radius:10px;margin-top:6px;font-size:13.5px}
.wc-file a{color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wc-file a[href]:hover{color:var(--accent);text-decoration:underline}
.wr-file-del{border:0;background:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 5px;border-radius:6px}
.wr-file-del:hover{background:var(--danger-bg);color:var(--danger)}

/* 작업요청 조회·댓글: 흰 배경 + 테두리 */
.wr-view{background:#fff;border:1px solid var(--line)}
.wc-input{background:#fff;border:1px solid var(--line)}
/* 접이식 카드 (답글·고객대신처리) */
.fold > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;font-size:15px}
.fold > summary::-webkit-details-marker{display:none}
.fold > summary::after{content:"▾";margin-left:auto;color:var(--muted);font-size:13px;transition:transform .15s}
.fold[open] > summary::after{transform:rotate(180deg)}

/* 긴 브리핑 접기(더보기) */
.wr-view.wr-clamp{max-height:260px;overflow:hidden;position:relative}
.wr-view.wr-clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none;border-radius:0 0 12px 12px}
.wr-more{margin-top:10px;width:100%}

/* 디자이너 화면 미리보기 배너 */
#previewBar{position:sticky;top:0;z-index:60;background:#eaf3ff;border-bottom:1px solid #cfe0ff;color:#8a6d1a;font-size:13.5px;padding:9px 16px;display:flex;align-items:center;justify-content:center;gap:10px}
#previewBar b{color:#6b5210}
#previewBar button{border:1px solid #E0C87E;background:#fff;border-radius:8px;padding:5px 12px;font-size:12.5px;font-weight:600;color:#8a6d1a;cursor:pointer}
#previewBar button:hover{background:#FFF9EC}

/* 시안 이미지별 교체 버튼 */
.img-wrap{position:relative}
.img-wrap .img-edit{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text-mid);font-family:inherit}
.img-wrap .img-edit:hover{background:#fff;color:var(--accent);border-color:var(--accent)}

/* 홈 단계 탭: 단계가 많아 줄바꿈 허용 */
.tabs{flex-wrap:wrap}

/* 페이 탭 정산 표 */
.pay-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.pay-table th{font-size:12px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);padding:8px 6px;text-align:right;white-space:nowrap}
.pay-table th:first-child{text-align:left}
.pay-table td{padding:10px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.pay-table td:first-child{text-align:left;white-space:normal}
.pay-table tbody tr:last-child td{border-bottom:0}

/* 진행 처리 완료/대기 버튼 비활성 */
.btn:disabled{opacity:.45;cursor:default}

/* ── 견적서 A4 종이 (미리보기·출력 공용) ── */
.q-paper{width:794px;min-height:1123px;background:#fff;color:var(--text);padding:46px 46px 40px;box-shadow:0 4px 24px rgba(0,0,0,.1);font-size:12.5px;line-height:1.55;font-family:"Pretendard Variable",Pretendard,sans-serif;box-sizing:border-box}
.qp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.qp-logo{height:22px;max-width:130px;object-fit:contain}
.qp-title{font-size:30px;font-weight:800;letter-spacing:10px}
.qp-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--text-mid);border-top:2px solid var(--text);border-bottom:1px solid #e5e8eb;padding:8px 2px;margin-bottom:14px}
.qp-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.qp-box{border:1px solid #fff;border-radius:6px;padding:10px 14px;position:relative}
.qp-box-t{font-size:11px;font-weight:700;color:var(--accent);margin-bottom:6px;letter-spacing:1px}
.qp-row{display:flex;justify-content:space-between;gap:10px;padding:2.5px 0;font-size:11px}
.qp-row span{color:var(--muted);flex-shrink:0}
.qp-row b{font-weight:400;text-align:right;word-break:break-all}
.qp-stamp{position:absolute;top:10px;right:12px;width:52px;height:52px;object-fit:contain;opacity:.92}
.qp-proc{width:100%;border-radius:6px;margin-bottom:14px;display:block}
.qp-sec-t{font-size:12px;font-weight:700;margin:14px 0 6px}
.qp-table{width:100%;border-collapse:collapse;font-size:12.5px}
.qp-table th{background:#f4f6f8;border-top:1.5px solid var(--text);border-bottom:1px solid #d5dae0;padding:7px 8px;font-weight:700;text-align:center}
.qp-table td{border-bottom:1px solid #eceff2;padding:8px;vertical-align:top}
.qp-c-detail{white-space:pre-wrap;color:var(--text-mid)}
.qp-c-num{text-align:right;white-space:nowrap}
.qp-c-num s{color:var(--muted)}
.qp-disc{color:var(--danger);font-size:11px}
.qp-note{font-size:10.5px;color:var(--muted);margin-top:3px}
.qp-textbox{border:1px solid #e5e8eb;border-radius:6px;padding:9px 12px;white-space:pre-wrap;font-size:12.5px;color:var(--text-mid)}
/* 견적서 예상 일정 (세부견적↔비교견적 사이) — 좌: 제목블록 / 우: 단계 우측정렬 */
.qp-sched{margin:16px 0 8px;padding:15px 20px;border:1px solid #e4e9f0;border-radius:11px;background:#f8fafd;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.qp-sched-head{flex-shrink:0}
.qp-sched-title{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--accent-dark)}
.qp-sched-title svg{width:14px;height:14px;flex-shrink:0}
.qp-sched-note{color:#9aa4b2;font-weight:500;font-size:10.5px;margin-top:5px;padding-left:20px}
.qp-sched-phases{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.qp-sched-plabel{font-size:10.5px;color:var(--muted);font-weight:600;margin-bottom:4px;letter-spacing:.2px}
.qp-sched-pdate{font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.3px;line-height:1.1}
.qp-sched-arrow{color:#c8d0db;display:flex;align-items:center;padding-bottom:3px}
.qp-sched-arrow svg{width:20px;height:20px}
.qp-bottom{display:grid;grid-template-columns:1fr 275px;gap:18px;align-items:start;border-top:2.5px solid var(--text);margin-top:24px;padding-top:24px}
.qp-totals{margin-top:0}
.qp-totals .qp-row{font-size:11.5px;padding:6px 4px;border-bottom:1px solid #eef1f5}
.qp-final{border-bottom:none!important;background:var(--text);border-radius:10px;margin-top:9px;padding:9px 14px!important;align-items:center}
.qp-final span{color:#fff!important;font-weight:800;font-size:12.5px}
.qp-final b{color:#6aa5ff;font-size:19px;font-weight:800}
.qp-notes{color:#5b6675;font-size:11px}
.qp-foot{margin-top:22px;padding-top:10px;border-top:1px solid #e5e8eb;text-align:center;font-size:10.5px;color:var(--muted)}
.qp-stamp{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:52px;height:52px;object-fit:contain}
.qp-sup.has-stamp .qp-row{margin-right:60px}

/* 견적서 토스풍 다듬기 */
.qs-sec{font-size:12px;font-weight:700;color:var(--accent);margin:16px 0 6px;letter-spacing:.3px}

/* 의뢰/취소 상태 배지 */
.badge.st-request{background:#EEF1F5;color:var(--text-mid);border:1px solid #D9DEE5}
.badge.st-canceled{background:var(--danger-bg);color:#C0392B;border:1px solid #F2CACA}

/* 견적서 공급자·수신자 왼쪽 정렬 */
.qp-box .qp-row{justify-content:flex-start;gap:8px}
.qp-box .qp-row span{width:46px;flex-shrink:0}
.qp-box .qp-row b{text-align:left}
.qp-totals .qp-row{justify-content:space-between}
.qp-totals .qp-row span{width:auto}
.qp-totals .qp-row b{text-align:right}

/* 시트(모달) 상하좌우 여백 통일 */
.sheet{padding:22px 22px 24px!important;box-sizing:border-box}
.sheet .sheet-handle{margin:0 auto 14px}
.sheet h2{margin-top:0}

/* 썸네일 없는 주문(의뢰·인쇄만) 자리 지킴 타일 */
.thumb-ph{width:84px;height:84px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;letter-spacing:1px;flex-shrink:0}
.thumb-ph.sm{width:56px;height:56px;border-radius:10px;font-size:12.5px}
.thumb-ph.off{background:#B0B8C1}

/* 견적서 직인: 상단 정렬 (상호명 옆) */
.qp-stamp{top:8px;transform:none}

/* 전체관리 일괄 처리 행 */
/* ── TODAY 탭: iOS 그룹 리스트 ── */
.am-sec{margin-bottom:26px}
.am-sec-head{display:flex;align-items:center;gap:8px;padding:0 4px 10px}
.am-sec-title{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.am-sec-count{font-size:12px;font-weight:700;color:var(--muted);background:#f2f4f6;border-radius:999px;padding:2px 9px;font-variant-numeric:tabular-nums}
/* 2열 카드 그리드 — 좁아지면 1열로 자동 전환 */
.am-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px;align-items:stretch}
.am-empty{grid-column:1/-1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 16px;font-size:13.5px;color:var(--muted);text-align:center}

.am-row{display:flex;flex-direction:column;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;transition:border-color .15s,box-shadow .15s}
.am-row:hover{border-color:#d7dde5;box-shadow:0 1px 6px rgba(20,30,60,.05)}
.am-main{min-width:0;flex:1}
.am-title{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.am-title .am-sub{font-weight:500;color:var(--muted)}
.am-meta{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:3px}
.am-meta b{font-weight:600;color:var(--text-mid)}
.am-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
/* 인쇄소·배송방식 태그 */
.am-chip{display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;line-height:1;padding:5px 10px;border-radius:8px;white-space:nowrap;margin:0 6px 0 0;vertical-align:middle}
.am-track{font-size:13px;color:var(--text-mid);vertical-align:middle}
/* 이름표 붙은 정보 블록 (견적 / 배송지 / 확정 견적 / 인쇄·배송) */
.am-fields{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.am-f-k{display:block;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);margin-bottom:1px}
.am-f-v{display:block;font-size:13px;color:var(--text-mid);line-height:1.5}
.am-f-v b{font-weight:600;color:var(--text-mid)}
.am-f-v .am-won{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.am-side{align-self:flex-end;margin-top:14px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.am-open{width:26px;height:26px;padding:0;border:none;background:transparent;color:#c4cad3;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:color .15s,background .15s}
.am-open:hover{color:var(--text-mid);background:#f2f4f6}
.am-open svg{width:16px;height:16px}
/* 행 액션 버튼: 주 동작=채움 / 보조=연한 배경 */
.am-act{border:none;border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit;transition:filter .15s,background .15s}
.am-act.primary{background:var(--accent);color:#fff}
.am-act.primary:hover{filter:brightness(.94)}
.am-act.soft{background:#EDF4FF;color:#2563EB}
.am-act.soft:hover{background:#dfeaff}
.am-act:disabled{background:#f2f4f6;color:#b6bdc7;cursor:not-allowed}


/* 세그먼트 컨트롤: iOS식 컴팩트 (회색 트랙 + 흰 선택칩) — 앱 전체 통일 */
.tabs.seg{display:inline-flex;background:#f5f7fa;border:1px solid #eef1f5;border-radius:12px;padding:4px;gap:2px;flex-wrap:nowrap;margin-bottom:0;width:auto}
.tabs.seg button{flex:none;border:0;background:none;border-radius:9px;padding:7px 15px;font-size:12.5px;font-weight:600;color:#98a1ad;white-space:nowrap;line-height:1.3;transition:color .15s,background .15s,box-shadow .15s}
.tabs.seg button.on{background:#fff;color:var(--accent);box-shadow:0 1px 3px rgba(20,30,60,.08);font-weight:700}
.tabs.seg button:not(.on):hover{color:var(--text)}

/* 작업요청 값(초안제공일·페이·추가) 파란색 */
input.wr-in{color:var(--accent)}
input.wr-in:focus{color:var(--accent)}
.wr-row b{color:var(--accent)}
.wr-row>span:first-child{color:var(--muted)}

/* 선택시안: 고객이 고른 안 강조, 나머지는 흑백 처리 (관리자·디자이너 화면) */
.opt-col.dim img{filter:grayscale(1);opacity:.4}
.opt-col.dim .opt-title{color:var(--muted)}
.opt-col.picked img{border:2px solid var(--accent)}
.opt-title.sel{color:#e3007f;font-weight:800}

/* 고객 화면 A/B안 선택 칩: 중앙 정렬, 흰 버튼, 선택 시 레드 */
.opt-pick{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:4px 0 6px}
.opt-pick button{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:9px 22px;font-size:14px;font-weight:700;color:var(--text-mid);cursor:pointer;font-family:inherit;transition:all .15s}
.opt-pick button:hover{border-color:#f2a0a8}
.opt-pick button.on{background:#E8536B;border-color:#E8536B;color:#fff;box-shadow:0 3px 10px rgba(232,83,107,.3)}

/* 결제 현황 카드 (통일 디자인) */
.ps-row{display:flex;align-items:flex-start;gap:18px 44px;flex-wrap:wrap}
.ps-col{min-width:110px}
.ps-label{font-size:13.5px;color:var(--text-mid);font-weight:500;display:flex;align-items:center;gap:6px;margin-bottom:7px}
.ps-pill{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap}
.ps-pill.ok{background:#f2f4f6;color:#6b7684}
.ps-pill.due{background:#FDE7EB;color:#D6293E}
.ps-pill.wait{background:#eaf3ff;color:#1b64da}
.ps-amt{font-size:22px;font-weight:800;letter-spacing:-.4px;color:var(--text);line-height:1.1}
.ps-amt.red{color:#D6293E}
.ps-date{font-size:12px;color:var(--muted);margin-top:5px}
.ps-act{margin-left:auto;flex-shrink:0;align-self:center}
.ps-status{margin-left:auto;align-self:center;display:flex;align-items:center;gap:9px;background:var(--pink-bg);border:1px solid #f3b8d8;border-radius:12px;padding:10px 16px;flex-shrink:0;flex-wrap:nowrap;white-space:nowrap}
.ps-check{width:24px;height:24px;border-radius:50%;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex-shrink:0}
.ps-status b{font-size:14px;line-height:1.3;color:var(--pink-dark)}
.ps-status span{font-size:12px;line-height:1.3;color:var(--muted)}
@media (max-width:560px){.ps-act,.ps-status{margin-left:0;width:100%;justify-content:center}}

/* 결제 수단 알약 */
.ps-pill.bank{background:#E8F1FD;color:var(--accent-dark)}
.ps-pill.pcard{background:#F3ECFB;color:#7C3AED}

/* 결제 현황 카드 우측 액션 버튼 세로 스택 */
.ps-actcol{margin-left:auto;align-self:flex-start;display:flex;flex-direction:column;gap:8px;flex-shrink:0;min-width:230px}
.ps-actcol .btn{width:100%}
@media (max-width:640px){.ps-actcol{width:100%;min-width:0;margin-left:0}}

/* 결제 현황 제목 + 액션 버튼 한 줄 정렬 */
.ps-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}

/* 협업: 남의 안 블러 처리 */
.opt-col.opt-blur .blurwrap{position:relative;overflow:hidden;border-radius:10px}
.opt-col.opt-blur .blur-img{width:100%;border-radius:10px;filter:blur(16px);opacity:.7;pointer-events:none;display:block}
.opt-col.opt-blur .opt-locked{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--text-mid);text-align:center;line-height:1.4;background:rgba(255,255,255,.35)}


/* PDF 시안: 표지 이미지 + 클릭 안내 배지 */
.img-wrap.pdf-cover{position:relative;cursor:zoom-in;display:inline-block}
.img-wrap.pdf-cover img{display:block}
.pdf-cover-badge{position:absolute;left:8px;bottom:8px;background:rgba(25,31,40,.82);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px}
.img-wrap.pdf-cover:hover .pdf-cover-badge{background:var(--accent)}

/* PDF 모달 뷰어 */
.overlay.pdf-modal{background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:2vh 2vw}
.pdf-modal-inner{width:96vw;max-width:1100px;height:94vh;background:#fff;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.pdf-modal-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);flex-shrink:0}
.pdf-modal-frame{flex:1;width:100%;border:0;background:#525659}

/* ═══════════════ 관리자 홈 리디자인 (토스풍: 화이트·라이트블루, 여백, 은은한 그림자) ═══════════════ */
body{background:#fafbfc}
/* 관리자 화면만 넓은 데스크톱 폭 (고객 화면은 모바일 폭 유지) */
body.admin .wrap{max-width:1080px}
body.admin .topbar-inner{max-width:1080px}
/* 상단 흰 헤더 (로고줄 + 탭줄 = 한 흰 띠) — 여백·글자·색 미세 조정 */
.topbar-inner{padding:22px 16px 20px}
.topbar .logo{font-size:20px;font-weight:600}
.topbar .who{font-size:14px;color:#6b7684}
/* 헤더 버튼: 흰 배경 + 옅은 테두리 + 디자인1018 파랑 글자 */
.hd-btn{font-size:12px!important;font-weight:500!important;padding:9px 14px!important;border-radius:10px!important;gap:5px;color:var(--accent)!important;border-color:#e5e8eb!important}
.hd-btn:hover{background:#f7f8fa!important}
.hd-ic{width:15px;height:15px;flex-shrink:0}
/* 메인탭: 크게·간격 넓게·비활성 얇게 */
.top-tabs{background:#fff}
.top-tabs-inner{max-width:1080px;margin:0 auto;padding:0 16px;display:flex;gap:50px}
.top-tabs-inner button{background:none;border:none;padding:2px 2px 15px;margin-bottom:-1px;font-size:16px;font-weight:500;font-family:inherit;color:#6b7684;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.top-tabs-inner button.on{color:var(--text);font-weight:700;border-bottom-color:var(--accent)}
.top-tabs-inner button:hover{color:var(--text)}

/* 카드 전반: 더 부드럽고 넓게 퍼지는 그림자 */
.card{border-color:#edf0f4;box-shadow:0 1px 2px rgba(17,24,39,.03),0 6px 22px rgba(17,24,39,.035)}
.card.clickable:hover{border-color:#d3e3fb;box-shadow:0 6px 24px rgba(49,130,246,.10)}
.topbar-inner{padding:15px 16px}

/* 고객 공지 → 부드러운 카드 */
.ann-bar{background:#fff;border:1px solid #edf0f4;border-radius:16px;box-shadow:0 1px 2px rgba(17,24,39,.03),0 6px 20px rgba(17,24,39,.03);padding:15px 18px;margin-bottom:18px}

/* 업무 현황: 지표 + 아이콘 칩 (숫자는 진한 검정, 미확인만 파랑 강조 / 아이콘 칩만 컬러) */
.home-metrics{padding:8px}
.home-metrics .stat-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px;text-align:left;border-radius:14px}
.home-metrics .stat-card+.stat-card{border-left:1px solid #eef1f5}
.home-metrics .sc-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.home-metrics .sc-t .t{margin:0;font-size:13px;color:var(--muted)}
.home-metrics .sc-t b{font-size:28px;color:var(--text)}
.home-metrics .stat-card.su .sc-t b{color:var(--accent)}
.home-metrics .sc-ic{width:44px;height:44px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.home-metrics .sc-ic .ic{width:21px;height:21px}
.stat-card.su .sc-ic{background:#eaf2ff;color:var(--accent)}
.stat-card.sf .sc-ic{background:#fff1ea;color:#f2711c}
.stat-card.sr .sc-ic{background:#f0ecff;color:#7c5cff}
.stat-card.st .sc-ic{background:#e6f7ee;color:#17a862}
.home-metrics .stat-card:hover{background:#f6f9fe}
.home-metrics .stat-card.on{background:#eef5ff;box-shadow:inset 0 0 0 1.5px #cfe1fb}

/* 고객 목록 필터 탭: 옅은 회색 pill → 선택 시 진한 파랑 */
.tabs{gap:7px;margin-bottom:14px}

/* 검색창: 크고 부드럽게 */
#custSearch{padding:13px 16px;border-radius:14px;border-color:#e9edf2;font-size:14.5px}

/* 고객 카드: 여백·아바타·부드러운 그림자 */
.cust-card{padding:16px 18px;margin-bottom:11px;border-radius:16px;border-color:#edf0f4;box-shadow:0 1px 2px rgba(17,24,39,.03),0 4px 16px rgba(17,24,39,.03)}
.cust-card:hover{border-color:#d3e3fb;box-shadow:0 6px 22px rgba(49,130,246,.09)}
.cust-ava{width:44px;height:44px;border-radius:13px;background:#eef4ff;color:#5b90f5;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cust-ava .ic{width:22px;height:22px}

/* 목록 헤더 여백 */
.wrap>.row{margin-bottom:2px}

/* ═══ 버튼·탭 글자 세로 깨짐 방지 ═══ */
.btn{white-space:nowrap}
.top-tabs-inner button{white-space:nowrap}

/* ═══ 모바일 반응형 (관리자 홈) ═══ */
@media (max-width:640px){
  /* 헤더: 로고 축소 + 지은님 숨김 + 버튼 컴팩트 */
  .topbar-inner{padding:13px 14px 11px;gap:7px}
  .topbar .logo{font-size:17px;flex-shrink:0}
  .topbar .who{display:none}
  .hd-btn{font-size:11px!important;font-weight:600!important;padding:7px 10px!important;gap:4px}
  .hd-ic{width:13px;height:13px}
  /* 메인탭: 가로 스크롤 + 좁은 간격 */
  .top-tabs-inner{gap:22px;padding:0 14px;overflow-x:auto;scrollbar-width:none}
  .top-tabs-inner::-webkit-scrollbar{display:none}
  .top-tabs-inner button{font-size:15px;padding:2px 0 12px}
  /* 업무 현황: 2×2 그리드 (가로 4칸 넘침 방지) */
  .home-metrics{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:6px}
  .home-metrics .stat-card{padding:15px 15px}
  .home-metrics .stat-card+.stat-card{border-left:none}
  .home-metrics .sc-t b{font-size:24px}
  .home-metrics .sc-ic{width:40px;height:40px}
  /* 고객 목록 필터 탭: 줄바꿈 허용 */
  .tabs{flex-wrap:wrap}
}

/* ═══ (테스트) 카톡식 시안 상세 채팅 화면 · ?chat 플래그 전용 ═══ */
/* PC: 그라데이션 풀배경 + 중앙 채팅 카드 / 모바일: 카드가 화면 꽉 채움 */
.ct-wrap {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 20px; gap: 20px;
  background:
    radial-gradient(58% 55% at 88% 10%, #3fd6f5 0%, rgba(63,214,245,0) 55%),
    radial-gradient(55% 50% at 32% 40%, #eef8ff 0%, rgba(238,248,255,0) 55%),
    radial-gradient(62% 60% at 45% 110%, #4f7bff 0%, rgba(79,123,255,0) 60%),
    radial-gradient(55% 55% at 100% 96%, #e6f4ff 0%, rgba(230,244,255,0) 50%),
    radial-gradient(70% 70% at 12% 78%, #8fb4ff 0%, rgba(143,180,255,0) 55%),
    linear-gradient(150deg, #74c2ff 0%, #a9dcff 45%, #8fb8ff 100%);
}
.ct-brand { flex: none; }
.ct-brand img { height: 22px; display: block; opacity: .95; }
.ct-frame {
  width: 440px; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 24px 24px 0 0; overflow: hidden;
  box-shadow: 0 24px 70px rgba(40,55,120,.28);
}
.ct-head {
  flex: none; display: flex; flex-direction: column;
  padding: 12px 16px 8px; box-sizing: border-box; background: #fff;
}
.ct-head-top { display: flex; align-items: center; gap: 6px; }
.ct-back {
  flex: none; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: flex-start;
  border: none; background: none; color: var(--text-mid); cursor: pointer; padding: 0; margin: 0;
}
.ct-back svg { width: 22px; height: 22px; }
.ct-title {
  flex: 1; min-width: 0; font-size: 20px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-sub { font-size: 12px; color: var(--muted); padding-left: 32px; margin-top: 2px; }
.ct-head-final {
  flex: none; margin-left: 8px;
  padding: 8px 14px; border: none; border-radius: 9px;
  background: var(--pink); color: #fff; font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.ct-head-final:active { opacity: .9; }
/* 일시 불가(수정 확인 중): 자리는 지키되 회색 — 누르면 이유 토스트 */
.ct-head-final.off { background: #eef1f5; color: var(--muted); }
.ct-head-final.off:active { opacity: 1; }
/* 확정 완료: 버튼 대신 완료 배지 */
.ct-head-final.done { background: #e8f7ee; color: var(--success); cursor: default; }

.ct-body { flex: 1; overflow-y: auto; padding: 0 12px 14px; background: #fff;
  scrollbar-width: thin; scrollbar-color: #d3d9e2 transparent; }
.ct-body::-webkit-scrollbar { width: 7px; }
.ct-body::-webkit-scrollbar-thumb { background: #d3d9e2; border-radius: 4px; }
.ct-body::-webkit-scrollbar-thumb:hover { background: #bcc4d0; }
.ct-body::-webkit-scrollbar-track { background: transparent; }
.ct-sys {
  text-align: center; margin: 14px auto; max-width: 90%;
  font-size: 12.5px; color: #6b7684; line-height: 1.5;
  background: #eaeef4; border-radius: 14px; padding: 8px 14px; width: fit-content;
}
.ct-round-lbl {
  font-size: 12px; color: var(--muted); margin: 2px 6px 4px;
}
/* 시안 인사 말풍선의 프로필+이름 줄 */
.ct-who { display: flex; align-items: center; gap: 7px; margin: 2px 2px 5px; }
.ct-who-name { font-size: 12.5px; color: var(--text-mid); }
.ct-who-name b { color: var(--text); font-weight: 700; }

/* 카톡식 메시지 그룹 (아바타 1회 · 이름 아래 말풍선 · 말풍선 옆 시간) */
.km { display: flex; margin: 3px 2px; }
.km.gs { margin-top: 12px; }
.km-left { justify-content: flex-start; }
.km-right { justify-content: flex-end; }
.km-ava { flex: none; width: 28px; margin-right: 7px; }
.km-ava .ct-ava { width: 28px; height: 28px; font-size: 13px; }
.km-body { min-width: 0; }
.km-left .km-body { max-width: calc(100% - 37px); }
.km-right .km-body { max-width: 82%; }
.km-name { font-size: 11.5px; color: var(--text-mid); margin: 0 2px 3px; }
.km-name b { color: var(--text); font-weight: 700; }
.km-right .km-name.ob { text-align: right; }
.km-row { display: flex; align-items: flex-end; gap: 5px; }
.km-right .km-row { justify-content: flex-end; }
.km-time { flex: none; font-size: 10.5px; color: #a0a8b8; white-space: nowrap; margin-bottom: 2px; }
.km-bubbles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.km-left .km-bubbles { align-items: flex-start; }
.km-right .km-bubbles { align-items: flex-end; }
/* 말풍선 박스 모양 (.chat-msg 밖이라 여기서 다시 지정) — 색은 기존 .bubble.dsgn/.cust 그대로 */
.km-bubbles .bubble {
  max-width: 100%; padding: 9px 13px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.km-left .km-bubbles .bubble { border-bottom-left-radius: 5px; }
.km-right .km-bubbles .bubble { border-bottom-right-radius: 5px; }
/* 채팅 말풍선 색: 디자이너=아주 연하게(배경과 구분만), 고객=진한 블루 */
.km-bubbles .bubble.dsgn { background: #f1f4f8; color: #2b2f36; }
.km-bubbles .bubble.cust { background: var(--accent); color: #fff; }
/* 채팅 첨부 이미지/파일: 보낸 쪽에 맞춰 정렬 */
.km-bubbles .thumb-grid { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; margin: 0; }
.km-left .km-bubbles .thumb-grid { justify-content: flex-start; }
.km-right .km-bubbles .thumb-grid { justify-content: flex-end; }
.km-bubbles .thumb-grid img { width: 150px; max-width: 100%; height: auto; border-radius: 10px; cursor: pointer; border: 1px solid var(--line); }
/* 인트로 말풍선 안 작은 안내 */
.km-note { font-size: 11px; opacity: .68; margin-top: 6px; line-height: 1.4; }
/* 인트로 말풍선 안 버튼 (수정요청방법 가이드) */
.km-inbtn {
  display: block; margin-top: 9px; padding: 8px 12px;
  border: 1px solid var(--accent); border-radius: 8px;
  background: #fff; color: var(--accent); font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
/* '피드백 전달하기' 채팅형 확인 버튼 2개 (나란히) */
.ask-btns { display: flex; gap: 7px; }
.ask-btns .km-inbtn { flex: 1; margin-top: 9px; white-space: nowrap; }
.km-inbtn.go { background: #e3007f; border-color: #e3007f; color: #fff; box-shadow: 0 3px 10px rgba(227, 0, 127, .3); }
.km-inbtn:disabled { opacity: .55; cursor: default; }
/* 시안 위 'N차 시안' 중앙 구분 */
.ct-rounddiv { text-align: center; font-size: 12px; font-weight: 700; color: var(--text); margin: 10px 0 12px; }
.ct-rounddiv .round-tag { font-weight: 500; color: var(--muted); font-size: 11.5px; }
/* 진행 상태 카드 (파이프라인·피드백기간·담당) */
.ct-status {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; margin: 9px 2px 16px;
}
.ct-status-top { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.ct-status-top:empty { display: none; }
.ct-dsgn { display: flex; align-items: center; gap: 9px; }
.ct-ava {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #5aa0ff, #2f6bff);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
/* 디자인10:18 브랜드 말풍선 프로필 — 로고핑크 */
.ct-ava.brand { background: linear-gradient(135deg, #ff5aa8, var(--pink)); }
.ct-dsgn-txt { font-size: 14px; font-weight: 500; color: var(--text-mid); }
.ct-dsgn-txt b { font-weight: 700; color: var(--text); }
.ct-warn-days { font-size: 12px; color: #1b64da; margin-top: 5px; }

/* 원형 스텝퍼 진행도 (Brief › Concept … 스타일) */
.ct-steps { display: flex; margin-top: 16px; }
.ct-step {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.ct-step-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; position: relative; z-index: 1;
  border: 1.5px solid #dfe3f0; background: #fff; color: #aab2c4;
}
.ct-check { width: 15px; height: 15px; }
/* 연결선: 각 스텝의 좌/우 반쪽 (원 세로중앙 top:16px) */
.ct-step::before, .ct-step::after {
  content: ""; position: absolute; top: 16px; height: 2px;
  background: #e6e9f2; z-index: 0;
}
.ct-step::before { left: 0; right: 50%; }
.ct-step::after { left: 50%; right: 0; }
.ct-step:first-child::before,
.ct-step:last-child::after { display: none; }
.ct-step-lbl { font-size: 11.5px; color: #aab2c4; text-align: center; line-height: 1.2; }
/* 완료 */
.ct-step.done .ct-step-dot { border-color: #8fbcfb; color: var(--accent); }
.ct-step.done::before, .ct-step.done::after { background: #bcd8fc; }
.ct-step.done .ct-step-lbl { color: var(--text-mid); }
/* 현재 */
.ct-step.cur .ct-step-dot {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 0 0 5px rgba(49,130,246,.18);
}
.ct-step.cur::before { background: #bcd8fc; }
.ct-step.cur .ct-step-lbl { color: var(--accent); font-weight: 700; }
/* 채팅 안에 들어가는 안내 박스는 폭 맞춰 여백만 조정 */
.ct-body .notice, .ct-body .warn-banner { margin: 10px 2px; }
.ct-body .ct-optpick { margin: 6px 2px 12px; }
.ct-optbox { margin-top: 4px; }
.ct-guide { margin: 8px 2px 0; }
/* 제작·배송 안내 버튼 + 모달 */
.ct-infobtn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; padding: 7px 14px;
  border: none; border-radius: 8px;
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.ct-infobtn:active { opacity: .9; }
.ct-infobtn:active { background: #f6f8fa; }
.ct-modal { max-width: 360px; width: 100%; text-align: center; }
.ct-modal-eyebrow { font-size: 14px; font-weight: 500; color: var(--accent); line-height: 1.2; }
.ct-modal-title { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.2; margin-top: 2px; }
.ct-modal-icon {
  margin-top: 20px;
  display: inline-flex; align-items: center; gap: 13px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 28px 8px 8px; box-shadow: 0 2px 7px rgba(0,0,0,.05);
}
.ct-icon-circle {
  flex: none; width: 50px; height: 50px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ct-icon-circle svg { width: 27px; height: 27px; }
.ct-icon-days { display: flex; align-items: baseline; gap: 2px; font-weight: 700; color: var(--text); }
.ct-days-num { font-size: 25px; }
.ct-days-unit { font-size: 20px; }
.ct-modal-body { margin-top: 20px; }
.ct-modal-body p { font-size: 13px; color: var(--text-mid); line-height: 1.25; margin: 0 0 5px; }
.ct-hl { background: #eaf4ff; color: inherit; padding: 1px 3px; border-radius: 3px; }
.ct-modal-body b { color: var(--text); }
.ct-modal-hint { margin-top: 18px; font-size: 11.5px; color: #a3aec6; }
/* 스크롤형 모달 (수정요청방법 가이드) */
.ct-modal-scroll { max-height: 82vh; overflow-y: auto; text-align: left; }
.ct-guide-body { margin-top: 14px; white-space: pre-wrap; font-size: 13px; line-height: 1.65; color: var(--text-mid); }
.ct-modal-body p:last-child { margin-bottom: 0; }
.ct-modal-body p b { color: var(--text); }
.ct-imgs { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-imgs img {
  width: 240px; max-width: 72%; height: auto;
  border-radius: 12px; cursor: pointer; border: 1px solid var(--line);
}

/* 시안 카드: 고정 직사각형 커버(모서리 둥금) + 선택 버튼 · 클릭하면 원본 비율 */
.sc-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 2px 14px; }
.sc-card {
  flex: 0 0 calc(50% - 6px); min-width: 0; box-sizing: border-box;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 7px; box-shadow: 0 2px 10px rgba(30,50,90,.05);
}
.sc-img {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 11px; background: #eef1f5;
}
.sc-img img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.sc-badge {
  position: absolute; top: 0; left: 0; pointer-events: none;
  min-width: 30px; height: 30px; padding: 0 8px;
  border-radius: 11px 0 11px 0;
  background: rgba(20,30,50,.62); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.sc-pdf-badge {
  position: absolute; bottom: 6px; left: 6px; pointer-events: none;
  background: rgba(20,30,50,.62); color: #fff;
  font-size: 11px; padding: 3px 8px; border-radius: 6px;
}
.sc-btn {
  width: 100%; margin-top: 7px; padding: 10px;
  border: 1px solid var(--accent); border-radius: 10px;
  background: #fff; color: var(--accent); font-size: 13.5px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.sc-btn.on { background: var(--accent); color: #fff; }
.sc-btn:disabled { cursor: default; }
.sc-btn:disabled:not(.on) { color: var(--muted); border-color: var(--line); }

.ct-foot {
  flex: none; background: #fff; border-top: 1px solid var(--line);
  padding: 10px 12px; box-sizing: border-box;
}
.ct-final {
  width: 100%; border: none; border-radius: 14px; cursor: pointer;
  background: var(--success); color: #fff; font-weight: 700; font-size: 15px;
  font-family: inherit; padding: 13px; margin-bottom: 10px;
}
.ct-final:active { opacity: .9; }
.ct-inputnote { font-size: 11px; color: var(--muted); text-align: center; margin-bottom: 8px; line-height: 1.4; }
.ct-preview { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-preview:not(:empty) { margin-bottom: 8px; }
.ct-preview .item { position: relative; }
.ct-preview img {
  width: 60px; height: 60px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line);
}
.ct-preview .item.file {
  display: flex; align-items: center; gap: 4px; font-size: 12px;
  background: #f2f4f7; border-radius: 8px; padding: 8px 10px; max-width: 140px;
}
.ct-preview .item.file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-preview .del {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--text); color: #fff; border: none;
  font-size: 12px; line-height: 1; cursor: pointer;
}
.ct-input {
  display: flex; align-items: center; gap: 8px; box-sizing: border-box;
}
.ct-input textarea {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 18px;
  padding: 9px 16px; font-size: 14.5px; font-family: inherit; line-height: 1.4;
  background: #f6f8fa; outline: none; resize: none; overflow-y: auto;
  height: 40px; min-height: 40px; max-height: 180px; box-sizing: border-box;
}
.ct-input textarea:disabled { color: var(--muted); }
.ct-input { align-items: flex-end; }
/* 입력창 라인에 딱 붙는 탭형 버튼 (위 모서리만 둥글게, 연하늘색, 그림자 없음) */
.ct-foot { position: relative; }
.ct-accept {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  margin-bottom: 0; padding: 12px 30px;
  border: none; border-radius: 14px 14px 0 0;
  background: var(--pink); color: #fff; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap; z-index: 5;
}
.ct-accept:active { opacity: .9; }
.ct-attach, .ct-send {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: none; cursor: pointer; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.ct-attach { background: #eef1f5; color: #4b5563; }
.ct-send { background: var(--accent); color: #fff; font-weight: 700; }

/* 모바일: 카드가 화면 전체 차지, 그라데이션·여백 없음 */
@media (max-width: 480px) {
  /* 모바일 주소창 접힘/펼침에 맞춰 동적 뷰포트 높이 사용 (하단 빈 공간 방지) */
  .ct-wrap { inset: 0 0 auto 0; height: 100vh; height: 100dvh; background: #fff; gap: 0; padding-top: 0; }
  .ct-brand { display: none; }
  .ct-frame {
    width: 100%; border-radius: 0; box-shadow: none;
  }
  .ct-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* ═══ 관리자 대시보드 레이아웃: 다크 네이비 사이드바 + 흰 라운드 콘텐츠 패널 (PC 전용) ═══ */
#sideNav { display: none; }
#dashHead { display: none; }

@media (min-width: 901px) {
  body.admin { display: flex; background: #14182b; min-height: 100vh; }
  body.admin .topbar { display: none !important; } /* PC에선 상단바 대신 사이드바 */
  body.admin #mainArea { flex: 1; min-width: 0; padding: 12px 12px 12px 0; box-sizing: border-box; }
  body.admin #panel {
    background: #fff; border-radius: 24px;
    padding: 28px 32px 46px; box-sizing: border-box;
    min-height: calc(100vh - 24px);
  }
  body.admin .wrap { max-width: none; margin: 0; padding: 0; }

  /* 사이드바 */
  body.admin #sideNav {
    display: flex; flex-direction: column;
    width: 228px; flex-shrink: 0;
    position: sticky; top: 0; height: 100vh;
    padding: 28px 16px 20px; box-sizing: border-box;
  }
  /* 로그인 전 등 JS가 숨긴 상태 존중 */
  body.admin #sideNav[style*="none"] { display: none; }

  /* 대시보드 헤더 (제목 + 인사 + 날짜) */
  body.admin #dashHead {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 22px;
  }
  body.admin #dashHead[style*="none"] { display: none; }
}

.sn-logo {
  font-size: 21px; font-weight: 800; color: #fff;
  cursor: pointer; padding: 0 10px 24px; letter-spacing: -.3px;
}
.sn-logo span { display: block; font-size: 11.5px; font-weight: 500; color: #7d86ad; margin-top: 4px; letter-spacing: .3px; }
.sn-tabs { display: flex; flex-direction: column; gap: 5px; }
.sn-tabs button {
  display: block; width: 100%; text-align: left;
  padding: 13px 15px; border: none; border-radius: 12px;
  background: transparent; color: #a6adcc;
  font-size: 14.5px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.sn-tabs button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sn-tabs button.on {
  background: linear-gradient(135deg, #4f6ef7, #3a55e8); color: #fff;
  box-shadow: 0 6px 16px rgba(63, 87, 235, .35);
}
/* ⏰ 대시보드 '오늘 할 일' — 한 줄 = 한 건. 촘촘한 목록형 */
.td-card { padding: 16px 18px 8px; }
.td-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; }
.td-head h2 { font-size: 16px; }
.td-cnt {
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: #f2f4f6; color: #6b7684;
}
.td-cnt.late { background: #FFF1F2; color: #DC2626; }
.td-hint { margin-left: auto; font-size: 11.5px; color: #98a2b3; }
.td-list { border-top: 1px solid var(--line); }
.td-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 9px 6px; margin: 0 -6px; border-bottom: 1px solid var(--line);
}
.td-row:last-child { border-bottom: 0; }
.td-row:hover { background: #f8fafc; }
.td-dday {
  flex-shrink: 0; min-width: 50px; text-align: center;
  font-size: 11.5px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  padding: 4px 7px; border-radius: 7px; background: #f2f4f6; color: #6b7684;
}
.td-row.soon .td-dday { background: #FFF8E0; color: #D97706; }
.td-row.late .td-dday { background: #DC2626; color: #fff; }
.td-t {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.td-t i { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--muted); margin-left: 7px; }
.td-kind { flex-shrink: 0; font-size: 11.5px; font-weight: 600; color: var(--text-mid); white-space: nowrap; }
.td-date { flex-shrink: 0; min-width: 36px; text-align: right; font-size: 11.5px; color: #98a2b3; font-variant-numeric: tabular-nums; }
.td-more { font-size: 12px; color: var(--muted); margin: 8px 0 6px; text-align: center; }
@media (max-width: 700px) {
  .td-hint, .td-date { display: none; }
  .td-t i { display: block; margin: 2px 0 0; }
  .td-row { align-items: flex-start; }
}

/* 🔔 알림 벨 — 사이드바 하단(로그아웃 줄 바로 위) / 모바일은 상단바 아이콘 */
#sideBell { margin-top: auto; }        /* 남는 높이를 밀어내 항상 맨 아래 붙임 */
.bell-btn {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  width: 100%; padding: 10px 12px; margin-bottom: 4px;
  border: none; border-radius: 10px; background: transparent; color: #a6adcc;
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.bell-btn:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.bell-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.bell-dot {
  margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 800;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 20px;
  background: #e5484d; color: #fff; display: inline-flex; align-items: center; justify-content: center;
}
/* 모바일 상단바에선 아이콘만 (글씨 숨김) */
.topbar .bell-btn {
  width: auto; margin: 0 2px 0 0; padding: 8px 10px;
  border-color: var(--line); background: #fff; color: var(--text-mid);
}
.topbar .bell-btn span { display: none; }
.topbar .bell-dot {
  position: absolute; top: -5px; right: -5px; margin: 0;
  min-width: 17px; height: 17px; font-size: 10.5px; padding: 0 4px;
}
.bell-row {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  padding: 11px 10px; border-radius: 10px; border-bottom: 1px solid var(--line);
}
.bell-row:hover { background: #f7f9fc; }
.bell-row.new { background: #f2f7ff; }
.bell-row b { font-size: 13.5px; }
.bell-row span { font-size: 13.5px; }
.bell-ic { font-size: 17px; flex-shrink: 0; line-height: 1.3; }
.bell-sub { font-size: 12px; color: var(--muted); margin-top: 3px; }

.sn-foot {
  display: flex; flex-direction: column; gap: 7px;
  padding: 16px 4px 0; border-top: 1px solid rgba(255, 255, 255, .09);
}
.sn-who { font-size: 13px; color: #a6adcc; padding: 0 8px 3px; }
.sn-btn {
  text-align: left; padding: 9px 11px; border: none; border-radius: 9px;
  background: rgba(255, 255, 255, .05); color: #c3c9e2;
  font-size: 13px; font-family: inherit; cursor: pointer;
}
.sn-btn:hover { background: rgba(255, 255, 255, .11); color: #fff; }

#dashHead h1 { font-size: 23px; font-weight: 800; margin: 0; color: var(--text); letter-spacing: -.3px; }
#dashHead p { margin: 5px 0 0; font-size: 13.5px; color: var(--muted); }
.dh-date {
  font-size: 13.5px; font-weight: 600; color: var(--text-mid);
  background: #f4f6f9; border: 1px solid #e8ebf1;
  padding: 10px 16px; border-radius: 11px; white-space: nowrap;
}

/* 주문관리 탭 표 */
.otbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.otbl th {
  text-align: left; font-size: 12px; color: var(--muted); font-weight: 600;
  padding: 11px 16px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.otbl td { padding: 13px 16px; border-bottom: 1px solid #f1f3f6; white-space: nowrap; }
.otbl.compact td, .otbl.compact th { padding: 8px 12px; }
#dashCar { scrollbar-width: none; }
#dashCar::-webkit-scrollbar { display: none; }
.otbl tbody tr { cursor: pointer; }
.otbl tbody tr:hover { background: #f7faff; }
.otbl tbody tr:last-child td { border-bottom: none; }
.otbl .ot-title { font-weight: 600; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otbl .ot-cat { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.otbl .ot-cust { font-size: 12.5px; font-weight: 400; color: var(--muted); margin-left: 8px; }
.otbl .ot-unmig { color: var(--danger); font-size: 9px; vertical-align: middle; margin-right: 5px; }
.tabs.seg.seg-wrap { flex-wrap: wrap; height: auto; }
/* 주문 항목·구분 선택 알약(칩) 버튼 */
.opt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.opt-chips button { border: 1.5px solid #dbe4f0; background: #fff; color: var(--text-mid); border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 500; cursor: pointer; font-family: inherit; transition: all .12s; }
.opt-chips button:hover { border-color: var(--accent); color: var(--accent); }
.opt-chips button.on { border-color: var(--accent); background: #eaf1ff; color: var(--accent); font-weight: 700; }

/* 사이드바 화이트 로고 */
.sn-logo img { height: 30px; display: block; }

/* 주문관리 필터바: 밑줄 탭 + 오른쪽 검색·담당 필터 (레퍼런스 스타일) */
.ot-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
.ot-tabs { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.ot-tabs button {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px 12px; border: none; background: none;
  font-size: 14px; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.ot-tabs button:hover { color: var(--text); }
.ot-tabs button.on { color: var(--text); border-bottom-color: var(--accent); }
.ot-tabs .cnt {
  font-size: 11.5px; font-weight: 600; color: #6b7684;
  background: #f2f4f6; border-radius: 8px; padding: 2px 7px;
}
.ot-tabs button.on .cnt { background: #e8f0fe; color: var(--accent-dark); }
.ot-right { display: flex; gap: 8px; align-items: center; margin-left: auto; padding-bottom: 8px; flex-shrink: 0; }
.ot-search { width: 250px; margin: 0; padding: 9px 13px; border-radius: 10px; font-size: 13px; }

/* 커스텀 드롭다운: 둥근 버튼 + 떠있는 옵션 패널 (호버 시 액센트 하이라이트) */
.dd { position: relative; flex-shrink: 0; }
.dd-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: 11px;
  background: #fff; color: var(--text); font-size: 13.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.dd-ar { width: 14px; height: 14px; color: var(--accent); transition: transform .15s; flex-shrink: 0; }
.dd.open .dd-ar { transform: rotate(180deg); }
.dd-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 100%;
  background: #fff; border-radius: 13px; padding: 6px;
  box-shadow: 0 10px 32px rgba(17, 24, 39, .16); z-index: 60;
}
.dd-menu button {
  display: block; width: 100%; text-align: left;
  padding: 11px 14px; border: none; border-radius: 9px;
  background: none; color: var(--text); font-size: 13.5px; font-weight: 500;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.dd-menu button:hover { background: var(--accent); color: #fff; }
.dd-menu button.sel { font-weight: 700; color: var(--accent); }
.dd-menu button.sel:hover { color: #fff; }

/* 고객 상세: 2단 그리드 + 진행률 바 + 통계·활동 카드 */
.cd-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 900px) { .cd-grid { grid-template-columns: 1fr; } }
.pg {
  display: inline-block; width: 68px; height: 6px; border-radius: 4px;
  background: #eef1f5; overflow: hidden; vertical-align: middle; margin-right: 8px;
}
.pg i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #5aa0ff, var(--accent)); }
.cd-stat {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid #f1f3f6; font-size: 13.5px;
}
.cd-stat:last-of-type { border-bottom: none; }
.cd-stat span { color: var(--muted); }
.cd-stat span small { font-size: 11px; }
.cd-stat b { font-size: 14.5px; text-align: right; }
.cd-stat b small { font-weight: 500; color: var(--muted); font-size: 11.5px; }

/* 표 헤더행 연한 회색 배경 */
.otbl thead th { background: #f7f8fa; }
/* 작업내역 필터: 둥근 pill 대신 편집 버튼 같은 박스 형태 */
.cd-fbtn {
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; color: var(--muted); font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.cd-fbtn:hover { border-color: #cbd3dd; }
.cd-fbtn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cd-fbtn b { font-weight: 700; margin-left: 2px; }

/* 최근 활동 타임라인: 점 + 연결선 */
.tl { position: relative; }
/* 주문 상세 '최근 활동' 카드: 왼쪽 블록(제목~스텝퍼) 높이 안에 맞게 압축 */
.pd-act { padding: 14px 16px !important; }
.pd-act h2 { margin: 0 0 8px !important; }
.pd-act .tl-item { padding-bottom: 7px; }
.tl-item { position: relative; display: flex; gap: 13px; padding-bottom: 16px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:not(:last-child)::before {
  content: ""; position: absolute; left: 5px; top: 15px; bottom: -1px;
  width: 2px; background: #eef1f5;
}
.tl-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 3px;
  border: 2px solid #fff; box-shadow: 0 0 0 1.5px #eef1f5; position: relative; z-index: 1;
}
.tl-body { min-width: 0; }
.tl-body b { display: block; font-size: 13px; font-weight: 400; line-height: 1.3; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-body span { display: block; font-size: 11.5px; line-height: 1.3; color: var(--muted); margin-top: 1px; }

/* 고객 통계: 미수금 | 예치금 2분할 */
.cd-split { display: flex; padding-top: 12px; margin-top: 4px; border-top: 1px solid #f1f3f6; }
.cd-split > div { flex: 1; text-align: center; min-width: 0; }
.cd-split > div + div { border-left: 1px solid #f1f3f6; }
.cd-split span { display: block; font-size: 12px; color: var(--muted); }
.cd-split b { display: block; font-size: 14.5px; margin-top: 4px; }

/* 환경설정 2단: 좌(견적서 기본 서식) | 우(알림톡·안내문·직원) */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; margin-top: 8px; }
.settings-col { min-width: 0; }
@media (max-width: 900px) { .settings-grid { grid-template-columns: 1fr; } }

/* 주문 상세 상단 2단: A(헤더+스텝퍼) | B(카드) */
.pd-grid { display: grid; grid-template-columns: 1fr 400px; gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .pd-grid { grid-template-columns: 1fr; } }

/* 견적·결제 탭 2×2 행 정렬: 좌(결제없이+주문구분 / 견적서관리) | 우(결제현황 / 환불·조정)
   행 경계가 좌우로 딱 맞게 — 셀은 세로 flex, 마지막 카드가 남는 높이를 채움 */
.pd-cell { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pd-cell > .card, .pd-cell > .notice { margin: 0 !important; }
/* 윗줄(결제없이+주문구분 | 결제현황)만 높이를 맞춰 늘림, 아랫줄은 내용만큼만 */
.pd-grid.pd-22 > .pd-cell { align-self: start; }
.pd-grid.pd-22 > .pd-cell:nth-child(1),
.pd-grid.pd-22 > .pd-cell:nth-child(3) { align-self: stretch; }
.pd-grid.pd-22 > .pd-cell:nth-child(1) > :last-child,
.pd-grid.pd-22 > .pd-cell:nth-child(3) > :last-child { flex: 1; justify-content: center; }
.pd-cell > .card { display: flex; flex-direction: column; }
.pd-cell .fill-top { margin-top: auto !important; }
/* 금액 정보는 위, 확인 배너·액션 버튼은 카드 아래에 붙임 */
.ps-body { display: flex; flex-direction: column; flex: 1; }
.ps-body > .ps-status, .ps-body > button:first-of-type, .ps-body > .ps-actrow { margin-top: auto !important; }
/* 확정 전 상태: 위(헤더~확정견적)와 아래(안내문~버튼) 여백을 똑같이 — auto 마진 2개가 남는 높이를 반씩 */
.ps-body > .ps-mid { margin-top: auto !important; }
/* .ps-status는 원래 가로 행용(margin-left:auto·align-self:center) — 세로 열에선 폭 꽉 채움 */
.ps-body > .ps-status { margin-left: 0; align-self: stretch; justify-content: flex-start; }
/* 소스 순서(좌1·좌2·우1·우2)를 유지한 채 2×2로 배치 */
.pd-grid.pd-22 > .pd-cell:nth-child(1) { grid-column: 1; grid-row: 1; }
.pd-grid.pd-22 > .pd-cell:nth-child(2) { grid-column: 1; grid-row: 2; }
.pd-grid.pd-22 > .pd-cell:nth-child(3) { grid-column: 2; grid-row: 1; }
.pd-grid.pd-22 > .pd-cell:nth-child(4) { grid-column: 2; grid-row: 2; }
@media (max-width: 1100px) {
  .pd-grid.pd-22 > .pd-cell { grid-column: auto !important; grid-row: auto !important; }
}

/* 스텝퍼 현재 단계의 세부 상태 (관리자 주문 상세 전용) */
.ct-step-sub {
  display: block; margin-top: 3px; font-size: 10.5px; font-weight: 600;
  color: var(--accent); opacity: .8; line-height: 1.25; word-break: keep-all;
}

/* 견적서 목록(ql-): 큰 아이콘 + 라인 구분 (레퍼런스 스타일, 견적서 편집의 .q-item과 별개) */
.ql-item {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 20px 0; border-top: 1px solid var(--line);
}
.ql-item:last-of-type { padding-bottom: 0; }
.q-ico {
  width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0;
  background: #eef4ff; color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.q-ico svg { width: 32px; height: 32px; }
.q-main { flex: 1; min-width: 0; }
.q-titlerow { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.q-title { font-size: 16px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-titlerow:hover .q-title { color: var(--accent); }
/* 상태 태그(액션 아님): 하늘색 = 최종견적서, 회색 = 작성중 등 */
.ql-tag {
  flex-shrink: 0; display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600;
  background: #eaf3ff; border: 1px solid #d3e5fd; color: var(--accent);
}
.ql-tag.gray { background: #f2f4f6; border-color: #e5e8eb; color: #6b7684; }
.q-meta { display: flex; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 6px; }
.q-sep { margin: 0 8px; color: #dfe3ea; }
/* 알약 버튼/태그 — 태그는 하늘색, 액션 버튼은 연한 회색 박스 */
.ql-acts { display: flex; gap: 5px; margin-left: 10px; }
.ql-pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px; border-radius: 7px;
  background: #eaf3ff; border: 1px solid #d3e5fd; color: var(--accent);
  font-size: 11.5px; font-weight: 600; font-family: inherit; cursor: pointer;
}
/* 액션 버튼(복제·최종확정·삭제): 연한 회색 박스 */
.ql-acts .ql-pill { background: #f4f6f9; border-color: #e5e9ef; color: #5a6472; }
.ql-acts .ql-pill:hover { background: #e9edf3; color: var(--accent); }
.ql-acts .ql-pill.del:hover { color: var(--danger); }
.q-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; }
.q-amt { font-size: 18px; font-weight: 800; color: var(--text); white-space: nowrap; }
.q-dl { border-radius: 10px; background: #eaf3ff; border: 1px solid #d3e5fd; color: var(--accent); font-weight: 600; }
.q-dl:hover { background: #dcecff; }

/* 견적서 인라인 편집: 2단 그리드 + 종이 위 편집 필드 */
.qd-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .qd-grid { grid-template-columns: 1fr; } }
.qd-grid .card { margin: 0 0 14px; }
/* 편집용 종이: 내용 길이에 맞춰 늘어남 (A4 세로 고정 해제), 화면폭 안에서 자동 축소 */
.q-paper-ed { width: 100%; max-width: 794px; min-height: 0; margin: 0 auto; }
/* 편집 필드: 밑줄 점선, 포커스 시 하늘색 강조 — 종이 텍스트 스타일은 그대로 상속 */
.qp-ed {
  display: inline-block; min-width: 8px; border-radius: 3px;
  outline: none; cursor: text; border-bottom: 1px dashed #cfd6e0;
}
.qp-ed:empty::before { content: attr(data-ph); color: #b6bec9; }
.qp-ed:hover { background: var(--tint); }
.qp-ed:focus { background: #eaf3ff; border-bottom-color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); }
.qp-numed { min-width: 24px; }

/* 견적서 공급자·수신자: 상호 크게, 사업자정보는 작게 */
.qp-coname { font-size: 16px; font-weight: 700; color: var(--text); margin: 2px 0 8px; }
.qp-coname .qp-ed { border-bottom-color: #cfd6e0; }
.qp-box .qp-row { font-size: 11px; }
.qp-box .qp-row span { color: #a0a8b8; }

/* 공급자·수신자 박스: 라벨-값 간격·줄 간격 촘촘하게 */
.qp-box .qp-row { padding: 1px 0; gap: 8px; }

/* 견적서 박스 값: 남은 폭 다 쓰고 글자 중간 끊김 방지 */
.qp-box .qp-row b { flex: 1 1 auto; min-width: 0; word-break: keep-all; }
.qp-box .qp-ed { display: inline; word-break: keep-all; }

/* 견적서 편집용 세부견적 (박스 입력 + 드래그 + 휴지통) */
.qie { font-size: 12.5px; }
.qie-head, .qie-row { display: grid; grid-template-columns: 24px 1.3fr 2fr 100px 64px 56px 100px 30px; gap: 6px; align-items: center; }
.qie.disc .qie-head, .qie-row.disc { grid-template-columns: 24px 1.3fr 1.8fr 96px 80px 60px 52px 96px 30px; }
.qie-head { background: var(--text); border-radius: 8px; padding: 9px 8px; margin-bottom: 8px; }
.qie-head span { color: #fff; font-size: 11.5px; font-weight: 600; text-align: center; }
.qie-head span:nth-child(2), .qie-head span:nth-child(3) { text-align: left; padding-left: 6px; }
.qie-row { padding: 4px 0; }
.qie-drag { cursor: grab; border: none; background: none; color: #b6bec9; font-size: 15px; padding: 0; line-height: 1; }
.qie-drag:active { cursor: grabbing; }
.qie-row.dragging { opacity: .4; }
.qie-row.dragover { box-shadow: inset 0 2px 0 var(--accent); }
.qie-in {
  width: 100%; margin: 0; padding: 8px 10px; border: 1px solid #e5e8eb; border-radius: 8px;
  font-size: 12.5px; font-family: inherit; background: #fff; box-sizing: border-box;
}
.qie-in:focus { border-color: var(--accent); background: var(--tint); }
/* 설명칸: 여러 줄 입력 (Enter 줄바꿈) — 내용에 맞춰 높이 자동 */
.qie-ta { resize: none; field-sizing: content; min-height: 34px; line-height: 1.45; overflow: hidden; outline: none; }
.qie-in.ctr { text-align: center; }
.qie-in.num { text-align: right; padding-left: 20px; }
.qie-in.disc { color: var(--danger); }
.qie-cell { position: relative; }
.qie-cell .qie-won { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 12px; pointer-events: none; }
.qie-amt { text-align: right; font-weight: 700; white-space: nowrap; }
.qie-amt .qie-won { color: var(--muted); font-weight: 500; margin-right: 1px; }
.qie-del { border: none; background: none; cursor: pointer; font-size: 14px; color: #b6bec9; padding: 0; }
.qie-del:hover { color: var(--danger); }
.qie-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.qie-add {
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: #5a6472; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.qie-add:hover { border-color: var(--accent); color: var(--accent); background: var(--tint); }

/* 견적서 마이너스(할인) 금액 빨간색 */
.qie-in.num.minus, .qie-amt.minus b, .qie-amt.minus .qie-won { color: var(--danger); }
.qp-c-num.minus, .qp-c-num.minus b { color: var(--danger); }

/* 견적서 결제안내: 계좌 크게 + 결제방법 작게 */
.qp-pay-acct { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 7px; }
.qp-pay-ic { width: 17px; height: 17px; flex-shrink: 0; }
.qp-bottom-l { margin-top: 6px; }
.qp-pay-methods { font-size: 12px; color: var(--muted); margin-top: 3px; margin-left: 24px; }
.qp-notes { margin-top: 16px; margin-left: 24px; white-space: pre-wrap; }

/* ✉️ 이메일 작성 시트 — 메일 클라이언트풍 레이아웃 */
.em-sheet {
  background: #fff; border-radius: 18px; width: 100%; max-width: 680px;
  max-height: 92vh; overflow-y: auto; padding: 18px 26px 20px;
  box-shadow: 0 18px 60px rgba(20, 30, 60, .25);
}
.em-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.em-tplbtn-wrap { position: relative; }
.em-tplbtn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #cfe0ff; background: #eef4ff; color: #1b64da;
  border-radius: 9px; padding: 8px 13px; font-size: 13px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.em-tplmenu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 30, 60, .15); padding: 6px; min-width: 220px;
}
.em-tplmenu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: none; background: none; border-radius: 8px; padding: 10px 12px;
  font-size: 13.5px; font-weight: 600; color: var(--text-mid); font-family: inherit; cursor: pointer;
}
.em-tplmenu button:hover { background: #f2f7ff; color: var(--accent-dark); }
.em-topbtn {
  border: 1px solid var(--line); background: #fff; color: var(--text-mid);
  border-radius: 9px; padding: 8px 13px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.em-topbtn:hover { border-color: #cbd3dd; }
.em-lbl { font-size: 13px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
.em-mini { font-size: 11px; color: #98a2b3; font-weight: 500; }
.em-from { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.em-fromaddr { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.em-subj {
  width: 100%; border: none !important; outline: none; background: none !important;
  font-size: 21px !important; font-weight: 800; letter-spacing: -.3px; color: var(--text);
  padding: 14px 0 !important; margin: 0 !important; border-radius: 0 !important;
  border-bottom: 1px solid var(--line) !important; font-family: inherit;
}
.em-subj::placeholder { color: #c4ccd6; font-weight: 700; }
.em-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.em-toin {
  flex: 1; min-width: 160px; border: none !important; background: none !important; outline: none;
  font-size: 13.5px !important; padding: 4px 0 !important; margin: 0 !important; font-family: inherit;
}
.em-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #eef4ff; border: 1px solid #d9e5ff; color: var(--accent-dark);
  border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 600;
}
.em-chip.auto { background: #fce4f1; border-color: #f3b8d8; color: #b0005f; }
.em-chip button { border: none; background: none; color: inherit; font-size: 14px; cursor: pointer; padding: 0; line-height: 1; }
.em-addfile {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--muted); font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.em-addfile:hover { border-color: var(--accent); color: var(--accent); }
.em-toolbar {
  display: flex; align-items: center; gap: 2px; padding: 8px 0 6px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.em-toolbar button {
  width: 30px; height: 30px; border: none; background: none; border-radius: 7px;
  font-size: 14px; color: var(--text-mid); cursor: pointer; font-family: inherit;
}
.em-toolbar button:hover { background: #f2f4f6; }
.em-toolbar select {
  border: none; background: none; font-size: 12.5px; color: var(--text-mid);
  font-family: inherit; cursor: pointer; padding: 4px; margin: 0; width: auto;
}
.em-tsep { width: 1px; height: 16px; background: var(--line); margin: 0 6px; }
.em-body {
  min-height: 260px; padding: 16px 2px; font-size: 14px; line-height: 1.75;
  color: var(--text); outline: none; word-break: keep-all; overflow-wrap: break-word;
}
.em-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.em-sendbtn {
  margin-left: auto; border: none; border-radius: 12px; padding: 14px 38px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 800;
  font-family: inherit; cursor: pointer; box-shadow: 0 6px 18px rgba(49, 130, 246, .3);
}
.em-sendbtn:disabled { opacity: .6; cursor: default; }
@media (max-width: 600px) { .em-sheet { max-width: 100%; border-radius: 0; max-height: 100vh; padding: 14px 16px; } .em-subj { font-size: 18px !important; } }

/* 의뢰 카드 접기/펴기: 화살표 회전, 기본 펼침 */
.iq-wrap summary::-webkit-details-marker { display: none; }
.iq-wrap[open] .iq-chev svg { transform: rotate(180deg); }
.iq-chev svg { transition: transform .15s; display: block; }

/* 의뢰 카드 태그: 하양 바탕 + 파랑 선 */
.badge.iq-tag { background: #fff; border: 1px solid #b9d3f5; color: var(--accent-dark); }

/* 📩 의뢰 내용 카드 안 좌우 분할 — 오른쪽 380px + 카드 패딩 20px = 아래 pd-grid(400px) 경계선과 일치 */
.iq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0 28px; }
.iq-right { border-left: 1px solid var(--line); padding-left: 28px; }
@media (max-width: 1100px) {
  .iq-grid { grid-template-columns: 1fr; }
  .iq-right { border-left: none; padding-left: 0; border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
}

/* 관리자 피드백 이미지: 우하단 ⬇ 저장 버튼 (저장된 형식 그대로 다운로드) */
.fb-imgwrap { position: relative; display: inline-block; }
.fb-imgwrap .fb-save {
  position: absolute; right: 6px; bottom: 6px;
  width: 28px; height: 28px; border-radius: 8px; border: none;
  background: rgba(20, 25, 35, .62); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.fb-imgwrap:hover .fb-save { opacity: 1; }
.fb-imgwrap .fb-save:hover { background: rgba(20, 25, 35, .85); }
@media (hover: none) { .fb-imgwrap .fb-save { opacity: 1; } }  /* 터치 기기는 항상 표시 */

/* ═══════════════════════════════════════════════════════════════
   📱 모바일 전용 보정 (2026-07-28) — 600px 초과(PC·태블릿)는 영향 없음
   원칙: PC 레이아웃 유지, 모바일에서만 줄바꿈·1열화·가로스크롤 처리
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* 한글 음절 단위 쪼개짐 방지 (오늘 매/출 → 오늘 매출) */
  body { word-break: keep-all; overflow-wrap: break-word; }
  /* 버튼·배지 글자가 세로로 갈라지는 것 방지 (복/제 → 복제) */
  button, .btn, .badge, .ql-pill, .ct-head-final { white-space: nowrap; }

  /* 표는 좁혀 찌그러뜨리지 않고 가로 스크롤 (래퍼 카드에 overflow-x:auto 이미 있음) */
  .otbl { min-width: 640px; }
  .pay-table { min-width: 580px; }

  /* 대시보드 일일 체크: 2열 → 1열 */
  .dc-grid { grid-template-columns: 1fr !important; }

  /* 고객 상세 프로필: 아바타 축소 + 자연 줄바꿈 허용 */
  .cd-head { flex-wrap: wrap !important; }
  .cd-head .cust-ava { width: 52px !important; height: 52px !important; font-size: 20px !important; }
  .cd-head h1 { font-size: 19px !important; gap: 6px !important; }

  /* 견적서 행: 아이콘 숨겨 폭 확보, 버튼 줄은 그대로 */
  .ql-item { gap: 10px 14px; }
  .ql-item .q-ico { display: none; }

  /* 필터 탭(고객관리·주문관리·상세 탭): 잘리는 대신 가로 스크롤 */
  .ot-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ot-tabs::-webkit-scrollbar { display: none; }
  .ot-tabs button { white-space: nowrap; flex-shrink: 0; }
  /* 검색창+드롭다운 줄: 화면 폭에 맞춰 내려오고, 검색창이 남는 폭을 채움 */
  .ot-right { flex-wrap: wrap; width: 100%; margin-left: 0; }
  .ot-search { flex: 1 1 150px; width: auto; min-width: 0; }
  /* 큰 섹션 탭(홈·TODAY / 작업내역·결제정보 / 견적·결제…): 모바일은 한 단계 작게 */
  .ot-tabs button { font-size: 15.5px !important; padding-top: 8px; padding-bottom: 10px; }
  /* 헤더의 큰 액션 버튼(+ 새 주문 추가 등) 축소 */
  #proofOpenBtn, #custOpenBtn, #qNewBtn {
    font-size: 13.5px !important; padding: 8px 13px !important; border-radius: 10px !important;
  }
}