@font-face { font-family:'Pretendard'; font-weight:300; font-display:swap; src:url('fonts/Pretendard-Light-OTF.otf') format('opentype'); }
@font-face { font-family:'Pretendard'; font-weight:400; font-display:swap; src:url('fonts/Pretendard-Regular-OTF.otf') format('opentype'); }
@font-face { font-family:'Pretendard'; font-weight:500; font-display:swap; src:url('fonts/Pretendard-Medium-OTF.otf') format('opentype'); }
@font-face { font-family:'Pretendard'; font-weight:600; font-display:swap; src:url('fonts/Pretendard-SemiBold-OTF.otf') format('opentype'); }
@font-face { font-family:'Pretendard'; font-weight:700; font-display:swap; src:url('fonts/Pretendard-Bold-OTF.otf') format('opentype'); }
@font-face { font-family:'Pretendard'; font-weight:800; font-display:swap; src:url('fonts/Pretendard-ExtraBold-OTF.otf') format('opentype'); }
@font-face { font-family:'Nanum Gothic'; font-weight:300; font-display:swap; src:url('fonts/NanumGothic-Light.ttf') format('truetype'); }
@font-face { font-family:'Nanum Gothic'; font-weight:400; font-display:swap; src:url('fonts/NanumGothic-Regular.ttf') format('truetype'); }
@font-face { font-family:'Nanum Gothic'; font-weight:700; font-display:swap; src:url('fonts/NanumGothic-Bold.ttf') format('truetype'); }
@font-face { font-family:'Nanum Gothic'; font-weight:800; font-display:swap; src:url('fonts/NanumGothic-ExtraBold.ttf') format('truetype'); }

:root {
  --bg:#f1f5f9; --card:#ffffff;
  --line:#e2e8f0; --line2:#cbd5e1;
  --ink:#0f172a; --label:#334155; --muted:#64748b;
  --accent:#2563eb; --accent-hover:#1d4ed8; --accent-soft:#eff6ff;
  --ok:#16a34a; --ok-soft:#f0fdf4; --danger:#dc2626; --danger-soft:#fef2f2;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --font:'Pretendard','Malgun Gothic','맑은 고딕',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { font-family:var(--font); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5; }

/* ── 상단바 ── */
.topbar { background:#fff; border-bottom:1px solid var(--line); padding:13px 18px; position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight:800; font-size:16px; color:var(--ink); letter-spacing:-.2px; }
.topbtn { background:#f1f5f9; color:var(--label); border:1px solid var(--line); border-radius:9px; padding:7px 12px; font-size:13px; font-weight:600; cursor:pointer; }
.topbtn:hover { background:#e2e8f0; }

/* ── 레이아웃 ── */
.wrap { max-width:760px; margin:0 auto; padding:18px 14px 40px; }
.layout { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:992px){
  .wrap { max-width:1180px; padding:26px 24px 60px; }
  .layout { grid-template-columns:minmax(0,460px) minmax(0,1fr); gap:24px; align-items:start; }
}

/* ── 카드 ── */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:16px; box-shadow:var(--shadow); }
.col-input, .col-result { margin-bottom:0; }
.col-result .card:last-child { margin-bottom:0; }
h2 { font-size:15px; font-weight:700; color:var(--ink); margin:0 0 16px; padding-bottom:11px; border-bottom:1px solid var(--line); letter-spacing:-.2px; }

/* ── 폼 요소 ── */
label { display:block; font-size:13px; font-weight:600; color:var(--label); margin-bottom:14px; }
input[type=text], input[type=number], input[type=date], input[type=email], input[type=password], select, textarea {
  width:100%; margin-top:7px; padding:11px 13px; border:1px solid var(--line2); border-radius:var(--radius-sm);
  font-size:15px; font-family:inherit; color:var(--ink); background:#fff; transition:border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
input::placeholder, textarea::placeholder { color:#94a3b8; }
textarea { resize:vertical; line-height:1.6; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
.row { display:flex; gap:16px; flex-wrap:wrap; }
.chk { display:flex; align-items:center; gap:8px; font-weight:500; color:var(--label); }
.chk input { width:auto; margin:0; accent-color:var(--accent); }
.hint { display:block; margin-top:7px; font-size:12px; font-weight:600; color:var(--accent); }

/* ── 버튼 ── */
button.primary { width:100%; background:var(--accent); color:#fff; border:0; border-radius:var(--radius-sm);
  padding:13px; font-size:15px; font-weight:700; cursor:pointer; margin-top:6px; transition:background .12s; box-shadow:0 1px 2px rgba(37,99,235,.25); }
button.primary:hover { background:var(--accent-hover); }
button.primary:disabled { background:#94a3b8; box-shadow:none; cursor:not-allowed; }
button.ghost { background:#fff; color:var(--label); border:1px solid var(--line2); border-radius:var(--radius-sm); padding:10px 14px; font-size:14px; font-weight:600; cursor:pointer; }
button.ghost:hover { background:#f8fafc; }
button.ghost.block { width:100%; padding:12px; font-size:15px; margin-bottom:8px; }
button.ghost:disabled { opacity:.55; cursor:not-allowed; }
.err { color:var(--danger); font-size:13px; min-height:18px; margin:8px 0 0; }
.hidden { display:none; }

/* ── 미리보기 오른쪽 플레이스홀더 ── */
.placeholder { display:flex; align-items:center; justify-content:center; text-align:center; color:var(--muted);
  min-height:320px; border:1.5px dashed var(--line2); box-shadow:none; font-size:14px; line-height:1.7; }
@media (max-width:991px){ #resultPlaceholder { display:none; } }

/* ── 요약 ── */
.summary { background:var(--accent-soft); border:1px solid #dbeafe; border-radius:12px; padding:14px 16px; font-size:14px; line-height:1.6; margin-bottom:14px; }
.summary b { color:var(--ink); }
.summary .total { font-size:21px; font-weight:800; color:var(--accent); }

/* ── 탭(세그먼트) ── */
.tabs { display:flex; gap:4px; background:#f1f5f9; border:1px solid var(--line); border-radius:11px; padding:4px; margin-bottom:14px; }
.tab { flex:1; padding:9px 6px; border:0; background:transparent; border-radius:8px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; font-family:inherit; transition:.12s; }
.tab.active { background:#fff; color:var(--accent); box-shadow:var(--shadow); }

/* ── 메일 편집 ── */
.field { margin-bottom:14px; }
.field b { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:600; }
#mailSubject { width:100%; padding:11px 13px; border:1px solid var(--line2); border-radius:var(--radius-sm); font-size:14px; font-family:inherit; }
#mailBody { width:100%; padding:13px; border:1px solid var(--line2); border-radius:var(--radius-sm); font-size:13px; line-height:1.65; font-family:var(--font); resize:vertical; }
.mailPreview { border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; background:#fff; max-height:520px; overflow:auto; }
/* 본문 편집기 + 툴바 */
.editorToolbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:7px 9px; background:#f8fafc; border:1px solid var(--line2); border-bottom:0; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.tbBtn { min-width:30px; height:28px; border:1px solid var(--line2); background:#fff; border-radius:6px; font-weight:800; font-size:14px; cursor:pointer; }
.tbBtn:hover { background:#eef2f7; }
.tbDiv { width:1px; height:18px; background:var(--line2); margin:0 3px; }
.tbLabel { font-size:12px; color:var(--muted); }
.swatch { width:22px; height:22px; padding:0; border:1px solid rgba(0,0,0,.18); border-radius:50%; cursor:pointer; }
.swatch:hover { transform:scale(1.12); }
.tbColor { width:30px; height:28px; padding:0; border:1px solid var(--line2); border-radius:6px; background:#fff; cursor:pointer; }
.mailEditor { min-height:340px; max-height:560px; overflow:auto; border:1px solid var(--line2); border-radius:0 0 var(--radius-sm) var(--radius-sm); padding:14px; font-size:14px; line-height:1.7; background:#fff; outline:none; color:#222; font-family:'Nanum Gothic','Malgun Gothic','맑은 고딕',sans-serif; }
.mailEditor:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
#extraFiles { margin-top:7px; font-size:13px; }
.extraList { margin-top:8px; font-size:13px; color:var(--label); line-height:1.8; }
.extraList .muted { color:var(--muted); }

/* ── 견적서 / 포트폴리오 ── */
.quoteItem { margin-bottom:18px; }
.quoteCap { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:7px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.quoteFrame { width:100%; height:820px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; overflow:hidden; }
.pdfFrame { width:100%; height:100%; border:0; }
.loadingPdf { display:flex; align-items:center; justify-content:center; height:100%; color:var(--muted); font-size:14px; }
.loadingPdf.err { color:var(--danger); }
.dlBtn { background:var(--accent); color:#fff; border:0; border-radius:7px; padding:5px 11px; font-size:12px; font-weight:600; cursor:pointer; }
.dlBtn:hover { background:var(--accent-hover); }
.dlBtn:disabled { background:#94a3b8; }
.pfInfo { background:var(--accent-soft); border:1px solid #dbeafe; border-radius:10px; padding:12px 14px; font-size:14px; margin-bottom:10px; line-height:1.6; }
.pfNote { font-size:13px; color:var(--muted); margin:10px 0; line-height:1.6; }
#pfOpen { display:none; text-decoration:none; }

/* ── 발송/저장 액션 ── */
.actions { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.attachStatus { background:var(--ok-soft); color:var(--ok); border:1px solid #bbf7d0; border-radius:10px; padding:9px 13px; font-size:13px; margin-bottom:10px; font-weight:500; }
.attachStatus.warn { background:var(--danger-soft); color:var(--danger); border-color:#fecaca; }
.sendResult { font-size:14px; margin-top:10px; line-height:1.55; min-height:16px; }
.sendResult.ok { color:var(--ok); font-weight:600; }
.sendResult.err { color:var(--danger); font-weight:600; }

/* ── 설정 ── */
.settingsCard { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px; box-shadow:var(--shadow); }
.settingsRow { font-size:13px; color:var(--muted); margin-bottom:12px; }
#setMsg { font-size:13px; margin-top:8px; min-height:16px; }
#setMsg.ok { color:var(--ok); font-weight:600; } #setMsg.err { color:var(--danger); font-weight:600; }

/* ── 로그인 페이지 ── */
.loginWrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:20px; }
.loginCard { background:#fff; border:1px solid var(--line); border-radius:18px; padding:34px 28px; width:100%; max-width:350px; box-shadow:0 4px 16px rgba(15,23,42,.08); text-align:center; }
.loginBrand { font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-.3px; }
.loginSub { font-size:13px; color:var(--muted); margin:5px 0 24px; }
.loginCard input { width:100%; padding:13px 14px; margin-bottom:12px; border:1px solid var(--line2); border-radius:var(--radius-sm); font-size:16px; font-family:inherit; }
.loginCard input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.loginErr { color:var(--danger); font-size:13px; min-height:18px; margin:10px 0 0; }