/* 위툰 WeToon - 커스텀 스타일 (로고 톤: 비비드 블루 #1282D3 / 노랑 #F7DB25) */
:root { --brand: #1282d3; --brand-dark: #0a68b4; --brand-light: #eef7fe; --accent: #f7db25; --accent-dark: #eac40b; --ink:#0d3a61; }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* 둥근 로고 폰트 - 큰 제목 강조용 */
.font-round { font-family: 'Jua', 'Pretendard', sans-serif; letter-spacing: -.01em; }
.text-stroke-dark { -webkit-text-stroke: 1.5px #0d3a61; }

.container-x { max-width: 1200px; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }

/* 헤더 */
.nav-link { position: relative; transition: color .15s; }
.nav-link:hover { color: var(--brand); }
.nav-link.active { color: var(--brand); font-weight: 700; }

/* 카드 */
.card { background:#fff; border:1px solid #eef0f4; border-radius: 1rem; transition: box-shadow .2s, transform .2s; overflow:hidden; }
.card:hover { box-shadow: 0 12px 30px rgba(31,57,171,.10); transform: translateY(-3px); }

.cat-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:700; padding:.25rem .7rem; border-radius:999px; background:var(--brand-light); color:var(--brand); }
.cat-badge-accent { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:800; padding:.25rem .7rem; border-radius:999px; background:var(--accent); color:#0d3a61; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-weight:700; border-radius:.7rem; transition:all .15s; cursor:pointer; }
.btn-primary { background:var(--brand); color:#fff; box-shadow:0 4px 14px rgba(18,130,211,.25); }
.btn-primary:hover { background:var(--brand-dark); }
.btn-accent { background:var(--accent); color:#0d3a61; box-shadow:0 4px 14px rgba(247,219,37,.35); }
.btn-accent:hover { background:var(--accent-dark); }
.btn-outline { background:#fff; color:var(--brand); border:1.5px solid #aedaf9; }
.btn-outline:hover { background:var(--brand-light); }
.btn-ghost { background:#f3f5f9; color:#475569; }
.btn-ghost:hover { background:#e7ebf2; }

.field-label { font-size:.85rem; font-weight:700; color:#334155; margin-bottom:.3rem; display:block; }
.input, .select, .textarea { width:100%; border:1.5px solid #e2e8f0; border-radius:.6rem; padding:.6rem .8rem; font-size:.95rem; transition:border .15s, box-shadow .15s; background:#fff; }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(18,130,211,.14); }

.chip { cursor:pointer; user-select:none; padding:.4rem .9rem; border-radius:999px; border:1.5px solid #e2e8f0; font-size:.85rem; font-weight:600; color:#475569; background:#fff; transition:all .12s; }
.chip:hover { border-color:#c9d6f7; }
.chip.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.chip:focus { outline:none; }

/* 체크박스형 칩 (관리자 다중 선택) */
.chip-check { cursor:pointer; user-select:none; display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:999px; border:1.5px solid #e2e8f0; font-size:.85rem; font-weight:600; color:#475569; background:#fff; transition:all .12s; }
.chip-check:hover { border-color:#c9d6f7; }
.chip-check input { accent-color:var(--brand); width:1rem; height:1rem; }
.chip-check:has(input:checked) { background:rgba(18,130,211,.08); border-color:var(--brand); color:var(--brand); }

.flow-step { position:relative; }
.flow-num { width:2.5rem; height:2.5rem; border-radius:999px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
.step-circle { width:2.2rem; height:2.2rem; border-radius:999px; background:var(--brand); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; }

/* 견적서 인쇄 최적화 */
@media print {
  body * { visibility: hidden; }
  #quote-print, #quote-print * { visibility: visible; }
  #quote-print { position:absolute; left:0; top:0; width:100%; }
  .no-print { display:none !important; }
  @page { size: A4; margin: 14mm; }
}

#quote-print { font-feature-settings: "tnum"; }

.fade-in { animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px);} to {opacity:1; transform:none;} }

.skeleton { background: linear-gradient(90deg,#f1f3f7 25%,#e9edf3 37%,#f1f3f7 63%); background-size:400% 100%; animation: sk 1.2s ease infinite; }
@keyframes sk { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* 토스트 */
#toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:100; }
.toast-item { background:#1d2f6f; color:#fff; padding:.7rem 1.2rem; border-radius:.6rem; margin-top:.5rem; box-shadow:0 8px 24px rgba(0,0,0,.18); font-size:.9rem; animation: fadeIn .25s ease; }