/* quote.css — 서비스 견적서 · Apple-style */
@import url('tokens.css');

:root {
  /* Apple palette: deep neutral inks, soft grays, SF Blue accent */
  --q-bg:        #F5F5F7;   /* Apple system gray background */
  --q-paper:     #FFFFFF;
  --q-ink:       #1D1D1F;   /* Apple text primary */
  --q-ink-2:     #1D1D1F;
  --q-ink-mid:  #424245;   /* Apple text secondary */
  --q-ink-soft:  #86868B;   /* Apple text tertiary */
  --q-line:      #D2D2D7;   /* Apple separator strong */
  --q-line-soft: #E5E5EA;   /* Apple separator subtle */
  --q-dot:       #E31E26;   /* keep brand red */
  --q-blue:      #0071E3;   /* Apple link/CTA blue */
  --q-fill:      #F5F5F7;   /* Apple tertiary fill */
  /* SF System font stack */
  --font-sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "Pretendard", "Helvetica Neue", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-sans: var(--font-sf);
}

* { box-sizing: border-box; margin: 0; padding: 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html, body {
  background: var(--q-bg); color: var(--q-ink);
  font-family: var(--font-sf);
  letter-spacing: -0.01em;
}
body { min-width: 1920px; font-feature-settings: "tnum" 1; }

/* ─── HEADER ────────────────────────────────────────── */
.q-header {
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: var(--q-ink);
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--q-line-soft);
}
.q-header-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 40px;
  height: 56px; display: flex; align-items: center; gap: 28px;
}
.q-brand { display: flex; align-items: center; gap: 12px; color: inherit;}
.q-brand-dot {
  width: 10px; height: 10px; border-radius: 100px; background: var(--q-dot);
}
.q-brand-name {
  font: 600 17px/1.2 var(--font-sf); letter-spacing: -0.02em;
}
.q-brand-sub {
  font: 400 12px/1 var(--font-sf); color: var(--q-ink-soft);
  letter-spacing: -0.005em; margin-top: 3px;
}
.q-header-title {
  font: 500 14px/1 var(--font-sf); color: var(--q-ink-mid);
  letter-spacing: -0.01em;
  padding-left: 24px; border-left: 1px solid var(--q-line-soft); height: 28px;
  display: inline-flex; align-items: center;
}
.q-header-tools { margin-left: auto; display: flex; gap: 16px; align-items: center;
  font: 400 13px/1 var(--font-sf); color: var(--q-ink-soft); letter-spacing: -0.01em;}
.q-header-tools b { color: var(--q-ink); font-weight: 600;}

/* page nav */
.q-pagenav {
  background: #fff; border-bottom: 1px solid var(--q-line-soft);
  position: static; top: auto; z-index: auto;
}
.q-pagenav .cat-pagenav-inner { padding: 0 40px; }
.q-pagenav a {
  color: var(--q-ink-soft); border-bottom-color: transparent;
  font: 500 13px/1 var(--font-sf); letter-spacing: -0.005em; text-transform: none;
  padding: 0 16px;
}
.q-pagenav a:hover { color: var(--q-ink);}
.q-pagenav a.on { color: var(--q-ink); border-bottom-color: var(--q-ink);}
.q-pagenav a small { color: var(--q-ink-soft); font-style: normal;
  font-size: 11px; letter-spacing: -0.005em;}

/* ─── PAGE WRAPPER ──────────────────────────────────── */
.q-app { display: flex; flex-direction: column; min-height: 100vh;}
body { min-width: 1280px; font-feature-settings: "tnum" 1; }

.q-main {
  flex: 1;
  display: flex; flex-direction: column;
  max-width: 1080px; margin: 0 auto; width: 100%;
  padding: 32px 40px 64px;
  gap: 24px;
  align-items: stretch;
}

/* ─── BUILDER (top, full width) ─────────────────────── */
.q-builder {
  background: var(--q-paper);
  border: 1px solid var(--q-line-soft);
  border-radius: 18px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  position: static;
  max-height: none;
}
.q-builder-head {
  padding: 22px 26px;
  background: var(--q-paper);
  border-bottom: 1px solid var(--q-line-soft);
}
.q-builder-eyebrow {
  font: 500 12px/1 var(--font-sf); color: var(--q-ink-soft);
  letter-spacing: -0.005em; margin-bottom: 6px;
}
.q-builder-h {
  font: 600 22px/1.2 var(--font-sf); color: var(--q-ink);
  letter-spacing: -0.025em;
}
.q-builder-h em {
  color: var(--q-ink-soft); font-style: normal; font-weight: 500;
  margin: 0 4px;
}

.q-block { padding: 20px 26px; border-bottom: 1px solid var(--q-line-soft);}
.q-block:last-of-type { border-bottom: 0; }
.q-block-h {
  font: 600 13px/1 var(--font-sf); color: var(--q-ink);
  letter-spacing: -0.01em; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.q-block-h::before {
  content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 100px;
  background: var(--q-dot);
}

/* fields */
.q-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.q-grid-1 { display: grid; grid-template-columns: 1fr; gap: 12px;}
.q-field { display: flex; flex-direction: column; gap: 6px;}
.q-field label {
  font: 500 11px/1 var(--font-sf); color: var(--q-ink-soft);
  letter-spacing: -0.005em;
}
.q-field input, .q-field select, .q-field textarea {
  height: 40px; padding: 0 14px;
  border: 1px solid var(--q-line);
  border-radius: 10px;
  background: var(--q-paper);
  font: 400 15px/1.3 var(--font-sf); color: var(--q-ink);
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.q-field textarea { height: 72px; padding: 12px 14px; resize: none;}
.q-field input:focus, .q-field select:focus, .q-field textarea:focus {
  border-color: var(--q-blue);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.18);
}
.q-field input::placeholder { color: var(--q-ink-soft); opacity: 0.7;}

/* picker tabs (segmented) */
.q-picker-tabs {
  display: flex; gap: 0; margin-bottom: 14px;
  background: var(--q-fill);
  border-radius: 10px; padding: 3px;
}
.q-picker-tab {
  flex: 1; padding: 8px 6px; background: transparent; border: 0;
  border-radius: 8px;
  font: 500 13px/1 var(--font-sf); color: var(--q-ink-mid);
  letter-spacing: -0.01em; cursor: pointer;
  transition: all .15s;
}
.q-picker-tab:hover { color: var(--q-ink);}
.q-picker-tab.on {
  background: var(--q-paper); color: var(--q-ink);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  font-weight: 600;
}
.q-picker-tab.labor { color: var(--q-dot);}
.q-picker-tab.labor.on { color: var(--q-dot);}

.q-picker-hint {
  font: 400 12px/1.5 var(--font-sf); color: var(--q-ink-soft);
  padding: 10px 12px; border-radius: 8px;
  background: var(--q-fill);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.q-picker-hint.labor { background: rgba(227,30,38,0.06); color: var(--q-ink-mid);}

/* picker tabs with icon dot */
.q-picker-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px;}
.q-picker-tab i { width: 8px; height: 8px; border-radius: 100px; display: inline-block;}

/* ─── Discount/Service controls in add form ──────────── */
.q-quickadd-disc {
  background: var(--q-fill); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.q-quickadd-disc-l {
  font: 600 11px/1 var(--font-sf); color: var(--q-ink-soft);
  letter-spacing: -0.005em;
}
.q-quickadd-disc-tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.q-quickadd-disc-tabs button {
  height: 32px; padding: 0 6px;
  border: 1px solid var(--q-line); background: var(--q-paper);
  border-radius: 7px; font: 600 12px/1 var(--font-sf); color: var(--q-ink-mid);
  cursor: pointer; letter-spacing: -0.005em;
  transition: all .12s;
}
.q-quickadd-disc-tabs button:hover { background: var(--q-paper); border-color: var(--q-line-strong, #C4C6D0);}
.q-quickadd-disc-tabs button.on {
  background: var(--q-ink); color: #fff; border-color: var(--q-ink);
}
.q-quickadd-disc-tabs button.service {
  border-color: rgba(34,197,94,0.36); color: #15803D;
  background: rgba(34,197,94,0.06);
}
.q-quickadd-disc-tabs button.service.on {
  background: #22C55E; color: #fff; border-color: #22C55E;
}
.q-quickadd-disc-input {
  height: 36px; padding: 0 12px;
  border: 1px solid var(--q-line); border-radius: 8px;
  background: var(--q-paper); font: 600 14px/1 var(--font-sf); color: var(--q-ink);
  outline: none; font-feature-settings: "tnum" 1;
  transition: border-color .12s, box-shadow .12s;
}
.q-quickadd-disc-input:focus { border-color: var(--q-blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.18);}
.q-quickadd-disc-hint {
  font: 500 11px/1.5 var(--font-sf); color: #15803D;
  padding: 6px 10px; background: rgba(34,197,94,0.08); border-radius: 6px;
}
.q-quickadd {
  display: grid; grid-template-columns: 1fr 110px 80px; gap: 8px;
  align-items: stretch;
  margin-bottom: 6px;
}
.q-quickadd-name input,
.q-quickadd-price,
.q-quickadd-btn {
  height: 40px;
  border-radius: 10px;
  font: 500 14px/1 var(--font-sf);
  letter-spacing: -0.005em;
  outline: none;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.q-quickadd-name input {
  width: 100%; padding: 0 14px;
  border: 1px solid var(--q-line);
  background: var(--q-paper); color: var(--q-ink);
}
.q-quickadd-price {
  padding: 0 12px;
  border: 1px solid var(--q-line);
  background: var(--q-paper); color: var(--q-ink);
  text-align: right; font-feature-settings: "tnum" 1;
}
.q-quickadd-name input:focus,
.q-quickadd-price:focus {
  border-color: var(--q-blue);
  box-shadow: 0 0 0 3px rgba(0,113,227,0.18);
}
.q-quickadd-name input::placeholder,
.q-quickadd-price::placeholder { color: var(--q-ink-soft);}
.q-quickadd-btn {
  border: 0; padding: 0;
  background: var(--q-ink); color: #fff; cursor: pointer;
  font-weight: 600;
}
.q-quickadd-btn:hover:not(:disabled) { background: #000;}
.q-quickadd-btn:disabled { opacity: 0.35; cursor: not-allowed;}
.q-quickadd-btn:active { transform: scale(0.97);}

.q-quickadd-more {
  margin-top: 4px;
}
.q-quickadd-more summary {
  list-style: none;
  font: 500 12px/1 var(--font-sf); color: var(--q-ink-soft);
  padding: 8px 4px; cursor: pointer; letter-spacing: -0.005em;
  display: inline-block;
}
.q-quickadd-more summary::-webkit-details-marker { display: none;}
.q-quickadd-more summary:hover { color: var(--q-ink);}
.q-quickadd-more[open] summary { color: var(--q-ink-mid);}
.q-quickadd-more input {
  margin-top: 6px;
  width: 100%; height: 36px; padding: 0 12px;
  border: 1px solid var(--q-line); border-radius: 8px;
  background: var(--q-paper); color: var(--q-ink);
  font: 400 13px/1 var(--font-sf); letter-spacing: -0.005em;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.q-quickadd-more input:focus { border-color: var(--q-blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.18);}

/* lines */
.q-lines { display: flex; flex-direction: column; gap: 6px;}

.q-line-row {
  display: flex; flex-direction: column; gap: 0;
  background: var(--q-paper);
  border: 1px solid var(--q-line-soft);
  border-radius: 12px;
  transition: all .15s;
  cursor: grab;
  overflow: hidden;
}
.q-line-row:hover { border-color: var(--q-line); box-shadow: 0 4px 12px rgba(0,0,0,0.06);}
.q-line-row:active { cursor: grabbing;}
.q-line-row.dragging { opacity: 0.5;}
.q-line-row.part  { border-left: 4px solid var(--q-ink);}
.q-line-row.labor { border-left: 4px solid var(--q-dot);}

/* 상단 행 */
.q-line-top {
  display: grid;
  grid-template-columns: 14px 44px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--q-paper);
}
.q-line-row.labor .q-line-top { background: rgba(227,30,38,0.025);}

.q-line-row .q-line-drag {
  color: var(--q-ink-soft); opacity: 0.4;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: grab;
}
.q-line-row:hover .q-line-drag { opacity: 1;}

.q-line-tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 0; width: 44px;
  font: 700 10px/1 var(--font-sf); letter-spacing: 0.04em;
  border-radius: 6px; color: #fff; background: var(--q-ink);
}
.q-line-tag.labor { background: var(--q-dot);}

.q-line-meta { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px;}
.q-line-name-edit {
  width: 100%; border: 0; background: transparent; padding: 2px 6px;
  border-radius: 6px; outline: none;
  font: 600 15px/1.3 var(--font-sf); color: var(--q-ink); letter-spacing: -0.01em;
  font-family: var(--font-sf);
  transition: background .1s, box-shadow .1s;
}
.q-line-desc-edit {
  width: 100%; border: 0; background: transparent; padding: 2px 6px;
  border-radius: 6px; outline: none;
  font: 400 12.5px/1.4 var(--font-sf); color: var(--q-ink-soft); letter-spacing: -0.005em;
  font-family: var(--font-sf);
  transition: background .1s, box-shadow .1s;
}
.q-line-name-edit:hover, .q-line-desc-edit:hover { background: rgba(0,0,0,0.03);}
.q-line-name-edit:focus, .q-line-desc-edit:focus {
  background: rgba(0,113,227,0.08); box-shadow: inset 0 0 0 1.5px var(--q-blue);
}
.q-line-name-edit::placeholder, .q-line-desc-edit::placeholder { color: var(--q-ink-soft); opacity: 0.55;}

/* 합계 — 우측 강조 */
.q-line-net {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  min-width: 84px;
}
.q-line-net s { font: 500 11px/1 var(--font-sf); color: var(--q-ink-soft); font-feature-settings: "tnum" 1;}
.q-line-net b { font: 700 17px/1 var(--font-sf); color: var(--q-ink); font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;}
.q-line-row.labor .q-line-net b { color: var(--q-dot);}

.q-line-controls { display: inline-flex; gap: 3px; align-items: center;}
.q-line-controls button {
  width: 24px; height: 24px; border: 1px solid var(--q-line-soft);
  background: var(--q-paper); border-radius: 6px; cursor: pointer;
  color: var(--q-ink-mid);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.q-line-controls button:hover:not(:disabled) {
  background: var(--q-ink); color: #fff; border-color: var(--q-ink);
}
.q-line-controls button:disabled { opacity: 0.3; cursor: not-allowed;}
.q-line-controls button.del:hover { background: var(--q-dot); border-color: var(--q-dot); color: #fff;}

/* 하단 행 */
.q-line-bottom {
  display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 10px;
  padding: 10px 14px 12px;
  background: var(--q-fill);
  border-top: 1px solid var(--q-line-soft);
}
.q-line-field { display: flex; flex-direction: column; gap: 5px;}
.q-line-field-l {
  font: 600 10px/1 var(--font-sf); color: var(--q-ink-soft);
  letter-spacing: -0.005em;
}
.q-line-field input,
.q-line-field select {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--q-line);
  border-radius: 8px;
  background: var(--q-paper); font: 600 13px/1 var(--font-sf); color: var(--q-ink);
  outline: none; font-feature-settings: "tnum" 1;
  transition: border-color .1s, box-shadow .1s;
}
.q-line-field input:focus,
.q-line-field select:focus { border-color: var(--q-blue); box-shadow: 0 0 0 3px rgba(0,113,227,0.16);}
.q-line-field input[type="number"] { text-align: right; width: 100%;}

.q-line-field.qty .qty-group {
  display: grid; grid-template-columns: 28px 1fr 28px; align-items: stretch; height: 32px;
}
.q-line-field.qty button {
  border: 1px solid var(--q-line); background: var(--q-paper);
  cursor: pointer; color: var(--q-ink-mid); font: 600 14px/1 var(--font-sf);
}
.q-line-field.qty button:hover { background: var(--q-fill); color: var(--q-ink);}
.q-line-field.qty input {
  border-left: 0; border-right: 0; border-radius: 0;
  text-align: center;
}
.q-line-field.qty button:first-of-type { border-radius: 8px 0 0 8px;}
.q-line-field.qty button:last-of-type  { border-radius: 0 8px 8px 0;}

.q-line-field.disc .disc-group {
  display: grid; grid-template-columns: 60px 1fr; align-items: stretch; height: 32px;
}
.q-line-field.disc select {
  border-radius: 8px 0 0 8px; border-right: 0; padding: 0 8px; font-size: 12px;
}
.q-line-field.disc input { border-radius: 0 8px 8px 0;}

/* picker */
.q-picker {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch;
}
.q-picker button {
  height: 40px; padding: 0 18px;
  background: var(--q-ink); color: #fff; border: 0;
  border-radius: 10px;
  font: 600 13px/1 var(--font-sf); letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .15s, transform .08s;
}
.q-picker button:hover { background: #000;}
.q-picker button:active { transform: scale(0.98);}

.q-disc { display: grid; grid-template-columns: 1fr 90px; gap: 12px; align-items: end;}

/* Apple-style action buttons */
.q-actions {
  padding: 18px 22px; display: grid; gap: 8px;
  grid-template-columns: 1fr 1fr;
  background: var(--q-fill);
  border-top: 1px solid var(--q-line-soft);
}
.q-btn {
  height: 40px; padding: 0 14px; border: 0; cursor: pointer;
  font: 600 13px/1 var(--font-sf); letter-spacing: -0.005em;
  border-radius: 980px;   /* Apple pill */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .15s ease;
}
.q-btn:active { transform: scale(0.97);}
.q-btn-primary { background: var(--q-blue); color: #fff;}
.q-btn-primary:hover { background: #0077ED;}
.q-btn-ghost { background: var(--q-paper); color: var(--q-ink); border: 1px solid var(--q-line);}
.q-btn-ghost:hover { background: var(--q-fill);}
.q-btn-kakao { background: #FEE500; color: #1D1D1F;}
.q-btn-kakao:hover { background: #FFD600;}
.q-btn-dark { background: var(--q-ink); color: #fff;}
.q-btn-dark:hover { background: #000;}