:root { --ink:#172331; --muted:#6e7b88; --line:#dfe5e9; --paper:#fff; --wash:#f4f7f8; --orange:#f26b2c; --orange-soft:#fff0e7; --blue:#176b80; --green:#21845b; --yellow:#bd7911; font-family:"Pretendard","Apple SD Gothic Neo",-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink); background:#e9edef; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:linear-gradient(115deg,#f3f5f5 0%,#e8edef 62%,#dfe6e7 100%); }
button,input { font:inherit; } button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:224px minmax(0,1fr); }
.sidebar { display:flex; flex-direction:column; gap:42px; padding:30px 17px; color:#dce5e9; background:#172331; }
.brand { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; letter-spacing:.02em; }.brand img { width:38px; height:36px; object-fit:contain; }.brand strong { font-size:1.47rem; line-height:1; white-space:nowrap; }
nav { display:grid; gap:6px; }.nav-item { padding:12px 13px; border-radius:7px; color:#9cabb5; font-size:.86rem; text-decoration:none; }.nav-item:hover,.nav-item.active { color:#fff; background:#29404e; }.nav-item.active { box-shadow:inset 3px 0 var(--orange); }
.site-card { margin-top:auto; padding:16px; border:1px solid #3a4e5b; background:#1d2e3c; }.site-card span,.eyebrow,.panel-number { color:var(--orange); font-size:.62rem; font-weight:800; letter-spacing:.12em; }.site-card strong { display:block; margin:8px 0 5px; color:#fff; font-size:.85rem; }.site-card p { margin:0; color:#aebbc2; font-size:.72rem; line-height:1.6; }
.workspace { min-width:0; padding:30px clamp(18px,3vw,48px) 42px; }.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }.eyebrow { margin:0 0 7px; }.topbar h1 { margin:0; font-size:clamp(1.45rem,2vw,2rem); letter-spacing:-.06em; }.top-actions { display:flex; align-items:center; gap:9px; }.ghost-button,.user-button { border:1px solid #cfd8dd; border-radius:6px; padding:9px 11px; color:#49616e; background:#fff; font-size:.75rem; }.user-button { color:#fff; background:#29404e; border-color:#29404e; }
.project-strip { display:grid; grid-template-columns:repeat(3,minmax(120px,1fr)) minmax(200px,1.35fr); gap:18px; align-items:center; margin-bottom:18px; padding:15px 18px; border:1px solid var(--line); background:rgb(255 255 255 /.78); }.project-strip div:not(.progress-wrap) { border-right:1px solid var(--line); }.project-strip span,.review-footer span { display:block; color:var(--muted); font-size:.68rem; }.project-strip strong { display:block; margin-top:5px; font-size:.86rem; }.progress-track { height:7px; overflow:hidden; border-radius:99px; background:#dbe3e6; }.progress-track i { display:block; width:72%; height:100%; background:var(--orange); transition:width .35s ease; }.progress-wrap small { display:block; margin-top:6px; color:var(--muted); font-size:.62rem; }
.work-grid { display:grid; grid-template-columns:minmax(240px,.82fr) minmax(410px,1.22fr) minmax(310px,.95fr); gap:18px; align-items:stretch; }.panel { min-width:0; border:1px solid var(--line); background:var(--paper); box-shadow:0 10px 28px rgb(19 35 49 /.055); }.evidence-panel,.statement-panel { padding:20px; }.review-panel { padding:22px; }.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.panel-number { margin:0 0 5px; }.panel h2 { margin:0; font-size:1rem; letter-spacing:-.04em; }.panel h3 { margin:3px 0 0; font-size:.83rem; }.panel-description { margin:11px 0 16px; color:var(--muted); font-size:.75rem; line-height:1.6; }.status-dot { border-radius:99px; padding:5px 8px; color:var(--green); background:#eaf6ef; font-size:.64rem; font-weight:700; }.status-dot::before { content:""; display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:var(--green); vertical-align:middle; }
.dropzone { width:100%; display:grid; place-items:center; gap:6px; padding:20px 10px; border:1px dashed #9caab3; background:#f9fbfb; color:#536672; transition:.2s ease; }.dropzone:hover,.dropzone.is-dragging { border-color:var(--orange); background:var(--orange-soft); }.upload-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:#fff; background:var(--orange); font-size:1.1rem; }.dropzone strong { font-size:.75rem; }.dropzone small { color:var(--muted); font-size:.63rem; }.upload-list { display:grid; gap:7px; min-height:58px; margin:10px 0 17px; }.upload-empty { align-self:center; color:#97a4ac; font-size:.71rem; }.upload-file { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid #e5eaec; background:#fff; }.upload-file img,.file-placeholder { width:28px; height:28px; object-fit:cover; background:#e9f0f2; }.file-placeholder { display:grid; place-items:center; color:var(--orange); font-size:.58rem; font-weight:800; }.upload-file strong { overflow:hidden; flex:1; font-size:.67rem; text-align:left; text-overflow:ellipsis; white-space:nowrap; }.upload-file button { border:0; color:#89969f; background:transparent; }
.sample-evidence { margin:0 0 12px; padding:10px; border:1px solid #e5eaec; background:#f9fbfb; }.sample-label { margin:0 0 8px; color:#87959d; font-size:.57rem; font-weight:800; letter-spacing:.12em; }.sample-photo-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.sample-photo-grid figure { min-width:0; margin:0; }.sample-photo { display:grid; aspect-ratio:1.42; place-items:center; border:1px dashed #b7c4ca; background:#e9eef0; color:#83929a; }.sample-photo::after { content:"사진 추가"; font-size:.6rem; font-weight:800; }.sample-photo-grid figcaption { overflow:hidden; margin-top:3px; color:#677681; font-size:.56rem; text-overflow:ellipsis; white-space:nowrap; }.invoice-sample { display:grid; gap:3px; margin-top:9px; padding:8px; border:1px solid #d9e1e4; background:#fff; }.invoice-sample span { color:var(--orange); font-size:.58rem; font-weight:800; }.invoice-sample strong { color:#324550; font-size:.66rem; }.invoice-sample small { color:#778690; font-size:.58rem; }
.contract-mini { padding-top:16px; border-top:1px solid var(--line); }.contract-mini > div { display:flex; align-items:flex-start; justify-content:space-between; }.link-button { border:0; padding:0; color:var(--blue); background:transparent; font-size:.67rem; }.contract-mini dl { display:grid; gap:8px; margin:14px 0 0; }.contract-mini dl div { display:flex; justify-content:space-between; gap:12px; font-size:.69rem; }.contract-mini dt { color:var(--muted); }.contract-mini dd { max-width:154px; margin:0; overflow:hidden; font-weight:700; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.primary-button { border:0; padding:8px 10px; color:#fff; background:var(--orange); font-size:.7rem; font-weight:700; }.primary-button:disabled { opacity:.65; cursor:wait; }.ai-note { display:flex; gap:9px; margin:17px 0; padding:12px; border-left:3px solid var(--orange); background:#fff7f2; }.ai-note span { color:var(--orange); }.ai-note p { margin:0; color:#52616c; font-size:.74rem; line-height:1.6; }.ai-note strong { color:#263744; }.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; } th { color:#7c8a92; background:#f6f8f8; font-size:.66rem; font-weight:700; text-align:left; } th,td { padding:10px 8px; border-bottom:1px solid #e8edef; white-space:nowrap; } td { color:#43525d; font-size:.69rem; }.material-name { display:block; max-width:150px; overflow:hidden; color:var(--ink); font-weight:700; text-overflow:ellipsis; }.material-spec { display:block; margin-top:3px; color:#89969f; font-size:.61rem; }.status { display:inline-block; border-radius:99px; padding:4px 7px; font-size:.6rem; font-weight:800; }.status.good { color:var(--green); background:#eaf6ef; }.status.hold { color:#a66000; background:#fff2d5; }.review-footer { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:center; margin-top:17px; padding-top:13px; border-top:1px solid var(--line); }.review-footer strong { display:block; margin-top:4px; font-size:.79rem; }.warning-text { color:#af7014; }.review-footer button { border:1px solid #cad5da; padding:8px 9px; color:#40606e; background:#fff; font-size:.65rem; }
.excel-tag { border-radius:4px; padding:5px 6px; color:#187553; background:#e6f5ed; font-size:.6rem; font-weight:900; }.rate-form { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:14px 0; }.rate-form label { display:grid; gap:5px; color:var(--muted); font-size:.63rem; }.rate-form input { width:100%; min-width:0; border:1px solid #d8e0e3; padding:8px 7px; color:#243541; outline-color:var(--orange); font-size:.72rem; font-weight:700; }.rate-form em { color:#98a4ab; font-size:.58rem; font-style:normal; }.excel-sheet { overflow:hidden; border:1px solid #bbc9cf; }.sheet-title { display:flex; justify-content:space-between; gap:8px; padding:8px 9px; color:#fff; background:#237354; font-size:.67rem; }.sheet-title small { opacity:.75; font-size:.6rem; }.excel-sheet th { color:#52616c; background:#e8f3ed; }.excel-sheet th,.excel-sheet td { padding:8px 7px; font-size:.64rem; }.excel-sheet td:last-child,.excel-sheet th:last-child { text-align:right; }.excel-sheet tfoot th { color:#fff; background:#29404e; font-size:.67rem; }.formula { margin:11px 0; color:#7c8a92; font-size:.64rem; line-height:1.55; }.export-button { width:100%; border:0; padding:12px; color:#fff; background:#172f3b; font-size:.74rem; font-weight:800; }.export-button span { margin-left:6px; color:var(--orange); font-size:1rem; }
.ledger-meta { display:grid; gap:7px; margin:14px 0; padding:10px; background:#f5f8f8; }.ledger-meta div { display:flex; justify-content:space-between; gap:8px; font-size:.64rem; }.ledger-meta span { color:#7c8a92; }.ledger-meta strong { color:#344650; font-size:.66rem; text-align:right; }
@media (max-width:1280px) { .work-grid { grid-template-columns:minmax(250px,.78fr) minmax(390px,1.22fr); }.statement-panel { grid-column:1 / -1; }.statement-panel .rate-form { max-width:430px; }.statement-panel .excel-sheet { max-width:600px; } }
@media (max-width:900px) { .app-shell { grid-template-columns:1fr; }.sidebar { display:none; }.workspace { padding:20px 14px 28px; }.project-strip { grid-template-columns:1fr 1fr; }.project-strip div:not(.progress-wrap) { border-right:0; }.progress-wrap { grid-column:1 / -1; }.work-grid { grid-template-columns:1fr; }.statement-panel { grid-column:auto; }.topbar { align-items:flex-start; }.top-actions { display:none; } }
@media (max-width:520px) { .review-panel,.evidence-panel,.statement-panel { padding:16px; }.project-strip { gap:12px; }.rate-form { grid-template-columns:1fr; }.statement-panel .rate-form { max-width:none; }.review-footer { grid-template-columns:1fr 1fr; }.review-footer button { grid-column:1 / -1; }.topbar h1 { font-size:1.45rem; } }
.app-page { display:none; }.app-page.active { display:block; animation:page-enter .18s ease-out; }.dashboard-grid { grid-template-columns:minmax(280px,.82fr) minmax(560px,1.55fr); }.page-title { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:20px; }.page-title h2 { margin:0; color:var(--ink); font-size:1.65rem; letter-spacing:-.06em; }.page-title p:not(.eyebrow) { margin:8px 0 0; color:var(--muted); font-size:.78rem; }.page-badge,.item-counter { border:1px solid #d9e2e5; padding:7px 9px; color:#397087; background:#f6fafb; font-size:.67rem; font-weight:800; white-space:nowrap; }.content-grid { display:grid; grid-template-columns:minmax(290px,.82fr) minmax(460px,1.45fr); gap:18px; align-items:start; }.form-panel,.master-panel,.history-panel { padding:20px; }.compact-dropzone { padding:18px 10px; }.contract-file-list { min-height:42px; margin-bottom:14px; }.input-divider { display:flex; align-items:center; gap:10px; margin:18px 0 14px; color:#8a979e; font-size:.67rem; }.input-divider::before,.input-divider::after { content:""; flex:1; height:1px; background:var(--line); }.contract-form { display:grid; gap:10px; }.contract-form label,.select-label { display:grid; gap:5px; color:#60727d; font-size:.68rem; font-weight:700; }.contract-form input,.select-label select { width:100%; border:1px solid #d8e0e3; padding:9px; color:#263944; background:#fff; outline-color:var(--orange); font-size:.74rem; }.form-row { display:grid; grid-template-columns:.7fr 1fr; gap:10px; }.contract-form .primary-button { justify-self:start; margin-top:4px; }.master-table { max-height:540px; overflow:auto; }.history-summary { display:grid; grid-template-columns:repeat(3,minmax(140px,1fr)); gap:14px; margin-bottom:18px; }.history-summary > div { padding:16px 18px; border:1px solid var(--line); background:#fff; box-shadow:0 8px 18px rgb(19 35 49 /.04); }.history-summary span { display:block; color:var(--muted); font-size:.68rem; }.history-summary strong { display:block; margin-top:6px; color:#263744; font-size:1.15rem; }.history-summary strong.warning-text { color:#af7014; }.statement-grid { grid-template-columns:minmax(270px,.76fr) minmax(500px,1.4fr); }.generation-panel { display:grid; align-content:start; gap:11px; }.generation-panel .panel-description { margin:0 0 4px; }.check-label { color:#526570; font-size:.71rem; }.check-label input { margin:0 6px 0 0; accent-color:var(--orange); }.generation-panel .export-button { margin-top:8px; } .excel-sheet td:first-child strong { display:block; }.excel-sheet td:first-child small { display:block; margin-top:3px; color:#89969f; font-size:.58rem; }@keyframes page-enter { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }@media (max-width:1280px) { .dashboard-grid { grid-template-columns:minmax(250px,.78fr) minmax(390px,1.22fr); }.content-grid,.statement-grid { grid-template-columns:1fr; }.form-panel { max-width:none; } }@media (max-width:900px) { .app-page.active { display:block; }.dashboard-grid { grid-template-columns:1fr; }.page-title { align-items:flex-start; }.history-summary { grid-template-columns:1fr; } }@media (max-width:520px) { .page-title { display:block; }.page-title .page-badge,.page-title .ghost-button { display:inline-block; margin-top:12px; }.form-row { grid-template-columns:1fr; } }
.analysis-result-list { display:grid; gap:6px; max-height:158px; overflow:auto; margin:0 0 14px; padding:9px; border:1px solid #e1e8eb; background:#fbfcfc; }.analysis-result-list > p { margin:0; color:#89969f; font-size:.67rem; }.analysis-result { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; align-items:center; padding:7px; border-left:3px solid #cbd6da; background:#fff; }.analysis-result.good { border-left-color:var(--green); }.analysis-result.hold { border-left-color:#d18b22; }.analysis-result strong,.analysis-result small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.analysis-result strong { color:#2b3d48; font-size:.68rem; }.analysis-result small { margin-top:2px; color:#7f8e97; font-size:.59rem; }