@font-face{font-family:Pretendard;src:url('fonts/pretendard/PretendardVariable.woff2') format('woff2');font-display:swap}
:root{font-family:Pretendard,'Malgun Gothic',sans-serif;color:#0e1914;background:#f4f9f7;font-size:15px;line-height:1.6;--primary:#0d3021;--border:#d6dedb;--muted:#50605a}
.contract-table-scroll{max-width:100%;overflow:auto;margin:16px 0}.contract-table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:13px}.contract-table caption{text-align:left;font-weight:700;margin-bottom:10px}.contract-table th,.contract-table td{border:1px solid var(--border);padding:8px;vertical-align:top;white-space:pre-wrap;overflow-wrap:anywhere}.contract-table th{background:#eff3f1;text-align:left}.contract-table-editor .contract-table{min-width:520px}.contract-table-editor .contract-table textarea{font-size:13px;min-height:68px;resize:vertical;margin:0;padding:8px;line-height:1.5}.contract-table-editor .contract-table th textarea{min-height:44px}.contract-table-editor details{padding:16px 0;border-top:1px solid var(--border)}.contract-table-editor summary{font-weight:600;margin-bottom:14px}.table-actions{display:flex;gap:8px;flex-wrap:wrap}.table-actions button{font-size:13px}.contract-table td button{font-size:12px;padding:6px;white-space:normal}.paper .contract-table{table-layout:auto}.paper .contract-table-scroll{overflow:visible}.paper .contract-table caption{font-size:14px}
*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,a,input,textarea,select{touch-action:manipulation}button{min-height:44px;padding:9px 17px;border:1px solid var(--border);border-radius:8px;background:white;color:#0e1914;cursor:pointer;font-weight:650}@media (hover:hover) and (pointer:fine){button:hover{background:#eaf4f0}}button:disabled{cursor:wait;opacity:.55}/* 채운 주 행동의 면은 실행 하늘색이다(2026-09-27 대표: "자줏빛에서 스크린샷의 색상으로"). 이 화면 버튼은 .btn.primary 가 아니라 .primary 만 달고 있어 기초 시트 규칙에 닿지 않는다 - 여기서 직접 맞춘다. */
.primary{background-color:var(--dv-action,#113425);background-image:var(--dv-action-face,linear-gradient(180deg,#153a29 0%,#0c2d1f 100%));border-color:var(--dv-action-deep,#0c2d1f);color:var(--dv-on-action,#ffffff);text-shadow:none;box-shadow:var(--dv-droplet-inset,inset 0 1px 0 rgba(123, 197, 174, .42), inset 0 0 0 1px rgba(123, 197, 174, .14), 0 1px 2px rgba(4, 22, 13, .24), 0 3px 8px -3px rgba(4, 22, 13, .30))}@media (hover:hover) and (pointer:fine){.primary:hover{background-color:var(--dv-action,#113425);background-image:var(--dv-action-face-hover,linear-gradient(180deg,#1a4230 0%,#113425 100%))}}.quiet{background:transparent;border-color:transparent;padding:8px;color:var(--primary)}a{color:var(--primary)}:focus-visible{outline:3px solid var(--primary);outline-offset:3px}input,textarea,select{width:100%;border:1px solid #b5c1bc;border-radius:7px;padding:11px 12px;background:#fff;color:#0e1914}textarea{resize:vertical;min-height:100px}label{display:block;font-weight:650}label input,label textarea,label select{margin-top:7px;font-weight:400}.muted,.section-head>span{color:var(--muted);font-size:13px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(30px,4vw,48px);line-height:1.25;letter-spacing:-.03em}h2{font-size:18px}h3{font-size:16px}[hidden]{display:none!important}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.appbar{display:flex;gap:22px;align-items:center;padding:16px 32px;background:#fff;border-bottom:1px solid var(--border)}.brand{font-size:18px;font-weight:800;color:#003e19;text-decoration:none}.appbar>span{color:var(--muted)}.appbar nav{display:flex;gap:24px;margin-left:auto;font-size:14px}.appbar a{min-height:44px;display:inline-flex;align-items:center}main{max-width:1600px;margin:auto;padding:20px 32px 70px}.status{min-height:24px;margin:0 0 16px;color:var(--muted);font-size:14px}.status[data-error=true]{color:#9b2925}.start,.setup{max-width:1080px;margin:20px auto}.intro{max-width:690px;margin:40px 0 28px}.intro p{font-size:17px;color:#50615a;max-width:60ch}.request-box{border:1px solid #aad1c1;background:#fff;border-radius:14px;padding:24px}.request-box>textarea{border:0;padding:12px 0;margin:8px 0;font-size:17px}.request-bottom{display:flex;align-items:end;gap:24px;justify-content:space-between}.request-bottom label{min-width:250px;font-size:13px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:32px 0 16px}.section-head h2{margin:0}.templates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:30px}.template-choice{text-align:left;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:20px 2px;background:transparent}.template-choice strong{display:block;font-size:17px;margin-bottom:7px}.template-choice span{display:block;font-weight:400;font-size:13px;color:var(--muted)}.recent{margin-top:36px}.recent-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border);gap:16px}.recent-row button{text-align:left;max-width:100%}.fields{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:30px 0}.fields .wide{grid-column:1/-1}.sticky-actions{position:sticky;bottom:0;background:#f4f9f7;padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--border)}.document-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 0 22px}.document-bar>div:first-child{min-width:0;flex:1}.document-title{display:block;border:0;background:transparent;font-size:25px;font-weight:750;padding:6px 0}.actions{display:flex;gap:8px;flex-wrap:wrap}.workspace-grid{display:grid;grid-template-columns:190px minmax(280px,1fr) minmax(320px,1fr);gap:28px;align-items:start}.outline{position:sticky;top:20px}.outline nav{display:grid;gap:4px;margin-bottom:18px}.outline nav a{text-decoration:none;font-size:14px;padding:7px;color:#40574e;border-radius:6px}@media (hover:hover) and (pointer:fine){.outline nav a:hover{background:#e4e9e6}}.outline details{border-top:1px solid var(--border);margin-top:28px;padding-top:18px;font-size:13px}.outline details label{margin:14px 0}.outline details button{width:100%}.editor-panel,.preview-panel{min-width:0}.editor-panel>.section-head,.preview-panel>.section-head{margin-top:0}.clause{padding:0 0 24px;margin-bottom:24px;border-bottom:1px solid var(--border);scroll-margin-top:20px}.clause textarea{min-height:150px;line-height:1.8}.clause h3{margin-bottom:8px}.clause .image-control{font-size:12px;margin-top:12px;color:var(--muted)}.clause img{max-width:100%;max-height:200px;object-fit:contain;display:block}.preview-panel{position:sticky;top:20px}.paper{background:white;border:1px solid var(--border);padding:40px 32px;max-height:75vh;overflow:auto;font-family:'Malgun Gothic',sans-serif;font-size:12px;line-height:1.9;overflow-wrap:anywhere}.paper h2{text-align:center;font-size:23px;margin-bottom:32px}.paper h3{font-size:13px;margin:22px 0 6px}.paper p{white-space:pre-wrap}.paper img{max-width:100%}dialog{border:1px solid var(--border);border-radius:14px;max-width:760px;width:calc(100% - 32px);max-height:85vh;padding:30px;overflow:auto}dialog::backdrop{background:rgba(4,22,13,.45)}dialog .close{float:right;margin:0 0 16px 16px}dialog p{white-space:pre-wrap}#proposalBody{border-top:1px solid var(--border);margin:20px 0;padding-top:10px}summary{cursor:pointer;min-height:44px;font-weight:650}
@media(max-width:1100px){.workspace-grid{grid-template-columns:160px minmax(0,1fr)}.preview-panel{grid-column:2;position:static}.paper{max-height:none}.templates{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){main{padding:14px 18px 40px}.appbar{padding:8px 18px;gap:12px;flex-wrap:wrap}.appbar>span{font-size:12px}.appbar nav{width:100%;margin:0;justify-content:space-between;font-size:13px}.intro{margin-top:14px}.intro p{font-size:15px}.request-box{padding:18px}.request-bottom{display:grid;gap:16px}.request-bottom label{min-width:0}.templates{grid-template-columns:1fr}.section-head{align-items:start}.section-head>span{max-width:150px;text-align:right}.fields{grid-template-columns:1fr}.fields .wide{grid-column:auto}.sticky-actions{align-items:stretch;flex-direction:column;gap:10px}.document-bar{display:block}.document-bar .actions{margin-top:15px}.document-title{font-size:22px}.workspace-grid{display:block}.outline{position:static}.outline nav{display:flex;overflow:auto;gap:10px}.outline nav a{white-space:nowrap}.outline details{margin:16px 0 30px}.preview-panel{margin-top:20px}.paper{padding:28px 20px}.recent-row{align-items:start;flex-direction:column;gap:4px}}

.official-template{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--border)}.official-template h3{margin:0 0 5px}.official-template p{margin:0 0 8px;color:var(--muted);font-size:14px;max-width:65ch}.official-template a{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--border);border-radius:7px;text-decoration:none;background:#fff;font-size:13px}@media (hover:hover) and (pointer:fine){.official-template a:hover{background:#e4e9e6}}@media(max-width:640px){.official-template{grid-template-columns:1fr;gap:12px}}
@media(min-width:641px){.document-bar{position:sticky;top:0;z-index:3;background:#f4f9f7;border-bottom:1px solid var(--border)}.outline,.preview-panel{top:160px}}
.document-actions{display:grid;gap:8px;max-width:60%}.document-primary-actions,.document-secondary-actions{justify-content:flex-end}.document-secondary-actions button{font-size:13px}.document-primary-actions button{white-space:nowrap}
@media(max-width:640px){.document-actions{display:block;max-width:none}.document-bar .document-primary-actions{position:fixed;bottom:0;left:0;right:0;z-index:5;background:#fff;margin:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1.4fr);gap:8px;overflow:visible}.document-primary-actions button{min-width:0;min-height:44px;padding:8px;font-size:14px}.document-secondary-actions{justify-content:flex-start;gap:8px}.document-secondary-actions button{padding:8px 12px;white-space:normal}main{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}.clause details{margin-top:12px}.clause details summary{font-size:13px;color:var(--primary)}}
.original-import{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px) auto;gap:24px;align-items:center;margin:24px 0;padding:24px 0;border-bottom:1px solid var(--border)}.original-import h2{margin-bottom:6px}.original-import p{margin:0;color:var(--muted);font-size:14px}.original-import label{font-size:12px}.original-import input{font-size:12px}.clause textarea[readonly]{background:#f1f4f3;color:#4f625a}@media(max-width:760px){.original-import{grid-template-columns:1fr;gap:14px}}
.editor-tools{margin-bottom:20px}.editor-tool-actions{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}.missing-filter{display:flex;gap:8px;align-items:center;min-height:44px;font-size:13px;font-weight:500}.missing-filter input{width:18px;height:18px;margin:0;accent-color:var(--primary)}.clause-navigation{scroll-margin-top:180px;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 20px;padding:12px 0;border-block:1px solid var(--border)}.clause-navigation span{font-size:13px;color:var(--muted)}.outline nav a[aria-current=true]{background:#e4e9e6;color:#062619;font-weight:700}.empty-search{padding:24px 16px;background:#eaf3ef;border-radius:8px;font-size:14px}.clause[data-focused=true] textarea{min-height:320px}.outline nav{max-height:50vh;overflow:auto}.paper [data-paper-section][data-active=true]{border-left:3px solid var(--primary);padding-left:12px}@media(max-width:640px){.clause[data-focused=true] textarea{min-height:260px}.clause-navigation{scroll-margin-top:16px}.outline nav{max-height:180px}.editor-tools{margin-top:20px}}

.condition-change{padding:24px 0;border-top:1px solid var(--border)}.condition-comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:16px}.condition-comparison>div{min-width:0}.condition-comparison strong{font-size:13px;color:var(--muted)}.condition-comparison p{font-size:14px;overflow-wrap:anywhere;margin:8px 0}.condition-change textarea{min-height:140px}.condition-change .missing-filter{margin-top:12px}.condition-change input[type=checkbox]{flex-shrink:0}#conditionSummary{overflow-wrap:anywhere}#conditionReviewForm>.primary{display:block;margin-top:16px;min-height:48px;width:100%}@media(max-width:640px){.condition-comparison{grid-template-columns:1fr;gap:8px}}

@media(max-width:640px){body:has(#workspace:not([hidden])) .shell-assistant-fab:not(.is-custom-position){bottom:calc(var(--sa-vv-inset,0px) + env(safe-area-inset-bottom,0px) + 88px)!important}}
/* 조건 입력 화면의 주 행동("초안 만들기")은 화면 아래에 붙어 있다. 어시스턴트 버튼이 그 위를 덮으면
   회원이 다음으로 갈 수 없다. 실측: 390px 폭에서 버튼 오른쪽 끝과 겹쳤다. */
@media(max-width:640px){body:has(#setup:not([hidden])) .shell-assistant-fab:not(.is-custom-position){bottom:calc(var(--sa-vv-inset,0px) + env(safe-area-inset-bottom,0px) + 80px)!important}}
.signing-document{font-size:14px;color:var(--muted);overflow-wrap:anywhere}.signer-row{border:0;border-top:1px solid var(--border);padding:20px 0;margin:16px 0}.signer-row legend{font-weight:700;padding:0 8px 0 0}.signer-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.signer-fields label:last-child{grid-column:1/-1}.signer-row select{max-width:240px;margin-top:12px}.signing-participants{padding:0;list-style:none}.signing-participants li{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border);padding:16px 0}.signing-participants li>div{display:grid;gap:4px;min-width:0;overflow-wrap:anywhere}.signing-participants span{font-size:14px}.signing-actions,.signing-history{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.signing-actions button{white-space:normal}.signing-history h3{width:100%;margin:0}.signing-notice{padding:16px;background:#ebf4f1;border-left:3px solid var(--primary);overflow-wrap:anywhere}.signing-notice[data-error=true]{background:#fff1ee;color:#8a2317;border-color:#8a2317}#signingDialog input[type=checkbox]{flex-shrink:0}#signingDialog h3{margin-top:12px}#signingDialog form>.primary{margin-top:12px;white-space:normal}@media(max-width:640px){.signer-fields{grid-template-columns:1fr}.signing-participants li{align-items:stretch;flex-direction:column}.signing-actions{flex-direction:column}.signing-actions button{width:100%}.signing-history{flex-direction:column}}

.file-progress{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 24px;padding:12px 0;border-bottom:1px solid var(--border);scroll-margin-top:160px}.file-progress[hidden]{display:none}.file-progress p{margin:0;font-size:14px;line-height:1.6;overflow-wrap:anywhere}.file-progress button{flex-shrink:0}.file-progress[data-error=true]{color:#8a2317}@media(max-width:640px){.file-progress{align-items:flex-start;flex-direction:column;gap:8px;scroll-margin-top:16px}}
.spreadsheet-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}.spreadsheet-tools>label{min-width:0}.spreadsheet-tools select{width:100%;min-width:0;text-overflow:ellipsis}.spreadsheet-tools p{grid-column:1/-1;margin:0;font-size:13px;line-height:1.6}@media(max-width:640px){.spreadsheet-tools{grid-template-columns:minmax(0,1fr)}.spreadsheet-tools .missing-filter{margin:0}}

.original-choices{min-width:0;margin:0;padding:0;border:0}.original-choices legend{font-size:16px;font-weight:700;margin-bottom:8px}.original-choices>p{margin-bottom:12px}.original-choices>label{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;font-weight:400;cursor:pointer}.original-choices input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--primary)}.original-choices span{min-width:0;overflow-wrap:anywhere}

.original-choices>.original-choice-detail{display:block;padding:0 0 16px 32px;font-weight:650}.original-choice-detail>input{margin:8px 0}.original-choice-detail>small{display:block;font-weight:400}

.original-form-field>small{display:block;margin-top:8px;font-weight:400}.original-form-field input{scroll-margin-block:160px}

/* Contract uses the same navigation shell; layout follows the available pane. */
body.contract-page.member-authed>.appbar{display:none}
/* 2026-10-01 2차 점검: 폭 1024 이하에서는 셸의 고정 머리줄(.app-mobile-title·body::before, 54px)이 화면 맨 위를 덮는다. 이 화면의
   main 은 셸 공용 클래스(member-main 등)가 없어 윗여백 58px 규칙을 받지 못했고, 유일한 상태·오류 줄(#status)이 머리줄 밑에 가려졌다.
   휴대폰에서 저장·업로드가 실패해도 이유가 보이지 않았다. 셸 공용 규칙과 같은 58px 을 준다. */
@media(max-width:1024px){body.contract-page.member-authed #main{padding-top:58px}}
.contract-page #main{container-type:inline-size;min-width:0}
/* 2026-09-24 대표: "계약 에이전트 반응형으로 좌우 꽉 채워주고, 현재 공간을 기존 것들로 꽉 채우는 게
   맞는지. 제대로 필요한 것만 넣는지에 따라 다르다." 실측: 2,200px 화면에서 본문이 1,200px 에 묶여
   좌우 1,000px(45%)을 버리고 세로로 4,647px(3.6화면)을 쌓고 있었다. 폭은 앱 공통 상한을 따르게 하고,
   넓어진 자리는 카드를 더 깔아 채우지 않는다 - 첫 화면의 두 갈래 진입(직접 쓰기 / 가지고 있는 계약서로
   시작)을 나란히 세우는 데 쓴다. 대표 화살표가 가리킨 배치다. */
.contract-page #main{max-width:100%}
.contract-page .start{max-width:100%}
/* 진입 줄만은 한없이 늘리지 않는다 - 계약 내용을 적는 칸이 1,500px 로 벌어지면 읽기·쓰기가 나빠진다.
   대신 저장한 계약이 있으면 세 번째 칸("작성 중인 계약")을 붙여 남는 폭을 필요한 것으로 채운다. */
.contract-page .start-entry{max-width:1480px}
.contract-page .start-entry{display:grid;gap:24px;align-items:start}
/* 2026-09-24 대표: "이것을 하나의 것으로 합칠 수 있을 것 같은데" — 시작하는 방법 둘을 상자
   두 개로 갈라 놓으니 회원이 행동보다 상자를 먼저 골라야 했다. 한 상자 안에서 세로 줄 하나로
   가른다. 작성 중인 계약(.recent)은 시작하는 방법이 아니므로 이 상자 밖에 그대로 둔다. */
.contract-page .start-ways{display:grid;gap:18px;padding:22px;border:1px solid var(--border);border-radius:14px;background:var(--dv-bg-surface,#ffffff)}
/* 2026-09-24 대표: 오른쪽 '가지고 있는 계약서 파일' 판을 걷고 왼쪽에 녹였다. 파일 줄은
   내용 입력 아래 한 줄이고, 올리는 순간 무엇을 할지 팝업이 묻는다. */
/* 가지고 있는 계약서 올리기(2026-09-27 대표: 기본 파일 입력은 "20년 전 디자인"). 올리기 칸(dream-file-drop.js)이
   점선·면을 가지므로 바깥은 상자 없이 제목·칸·안내만 쌓는다 — 점선 상자 안에 점선 칸이 들어가지 않게. */
.contract-page .start-upload{display:grid;gap:8px;padding:4px 0 0}
.contract-page .start-upload-title{margin:0;color:var(--dv-text-strong,#0e1914);font-size:15px;font-weight:700;line-height:1.4}
.contract-page .start-upload small{color:var(--muted);font-size:13px;line-height:1.5}
/* 두 길(새 계약서 만들기 / 가진 계약서 검토)의 이름은 같은 크기·같은 무게로 단다(2026-09-28 대표 크롬: 첫 화면이 작성만 말했다). */
.contract-page .start-way-title{margin:0 0 10px;color:var(--dv-text-strong,#0e1914);font-size:16px;font-weight:750;line-height:1.4}
.contract-page .start-upload>.start-way-title{margin:0}
/* 폰 폭에서 올리기 칸의 "파일 고르기" 알약이 숨어(dream-file-drop.js 공용 규칙) 칸 전체를 눌러야 한다는 것을 알 수 없었다.
   계약 화면에서만 알약을 칸 아래 한 줄로 되살린다 — 진짜 파일 입력이 칸 전체를 덮고 있어 알약을 눌러도 고르기 창이 열린다.
   파일을 고른 뒤에는 공용 규칙([hidden] !important)이 알약을 다시 숨긴다. */
@media (max-width:560px){
  .contract-page .start-upload .dv-file-drop-pick{display:inline-flex;grid-column:1/-1;min-height:44px}
}
.contract-page .start-ways-head{display:grid;gap:3px}
.contract-page .start-ways-head h2{margin:0;font-size:17px}
.contract-page .start-ways-head p{margin:0;color:var(--muted)}
@container (min-width:1560px){
  .contract-page .start-entry[data-has-recent="true"]{max-width:none;grid-template-columns:minmax(0,1.75fr) minmax(300px,.5fr)}
  .contract-page .start-entry[data-has-recent="true"]>.recent{margin:0;padding:22px;border:1px solid var(--border);border-radius:12px}
}

.contract-page .intro{margin:20px 0 24px}
.contract-page .intro h1{font-size:32px}
.contract-page #officialTemplates,.contract-page .templates{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px 24px}
.contract-page .official-template,.contract-page .template-card{display:flex;flex-direction:column;align-items:stretch;gap:16px;min-width:0;padding:0 0 24px;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.contract-page .official-template>.actions,.contract-page .template-choice{margin-top:auto}
/* 같은 안내를 쓰는 서식 묶음의 공통 안내 — 카드마다 되풀이하지 않고 묶음 앞 한 줄에 둔다(dream-contract.js renderOfficial). */
.contract-page .official-shared-note{grid-column:1/-1;margin:0;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--dv-bg-subtle,#eaf3ef);color:var(--dv-text,#283530);font-size:14px;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.contract-page .official-shared-note strong{margin-right:4px;color:var(--dv-text-strong,#0e1914)}
.contract-page .template-choice{border:1px solid var(--border);border-radius:8px;padding:10px 16px;background:white;text-align:center}
/* 2026-09-29 대표: "이 양식으로 작성 버튼 위에 마우스를 올리면 진하게 바뀌던가" — 흰 면 고정 규칙이 공용 hover 를 덮어 아무 변화가 없었다. 옆 미리보기 카드와 같은 반응(짙은 테두리·옅은 면). */
@media (hover:hover) and (pointer:fine){.contract-page .template-choice:not(:disabled):hover{border-color:var(--primary);background:#e9eeec}}
.template-card h3{margin-bottom:6px}
/* 첫 화면 양식 19장이 380px 썸네일 카드로 펼쳐져 1440 에서 8,236px, 390 에서 14,621px(약 28화면)이었다(2026-10-01 점검).
   썸네일은 양식을 알아볼 만큼만 두고, 자세히는 '크게 보기'에서 본다. */
.contract-page .template-thumbnail{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;padding:16px;border:1px solid var(--border);border-radius:10px;background:#edeeee;color:var(--primary);font-size:13px;min-height:240px}
.template-thumbnail img{display:block;width:100%;height:190px;object-fit:contain;filter:drop-shadow(0 2px 4px #0e281f15)}
/* 휴대폰에서는 썸네일을 왼쪽 작은 칸으로 옮겨 카드 한 장의 높이를 줄인다. 작성 버튼은 카드 폭을 그대로 쓴다. */
@media(max-width:640px){
 .contract-page .official-template,.contract-page .template-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start}
 .contract-page .template-thumbnail{min-height:0;padding:8px;gap:6px;font-size:12px}
 .contract-page .template-thumbnail img{height:112px}
 .contract-page .official-template>.template-choice,.contract-page .template-card>.template-choice{grid-column:1/-1}
}
.template-thumbnail span{margin-top:auto}
@media (hover:hover) and (pointer:fine){.contract-page .template-thumbnail:hover{border-color:var(--primary);background:#e9eeec}}
#templatePreview{width:min(960px,calc(100% - 32px));max-width:960px;max-height:calc(100dvh - 32px);padding:24px;background:#f4f9f7}
.template-preview-heading{display:flex;align-items:start;justify-content:space-between;gap:20px}
.template-preview-heading>div{min-width:0}
.template-preview-heading h2{margin-bottom:8px;overflow-wrap:anywhere}
.template-preview-heading form{flex-shrink:0}
.template-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;position:sticky;top:-24px;background:#f4f9f7;z-index:1;border-bottom:1px solid var(--border)}
.template-preview-toolbar .actions{align-items:center}
.template-preview-toolbar a{min-height:44px;display:flex;align-items:center}
.template-preview-document{margin-top:16px}
#templatePreviewImage{display:block;width:100%;height:auto;background:white}
#templatePreviewError{margin-top:16px;color:#9b2925}
/* 2026-10-01 점검: 도크를 연 1440 화면(본문 폭 737)에서 편집 화면이 한 줄로 쌓여 '문구 미리보기'가 편집 칸 68개 아래 13,785px 에서야
   시작했다. 폭이 1100 이하면 목차를 위 띠로 올리고 편집 칸과 미리보기를 나란히 둬 고친 결과를 옆에서 본다. 한 줄로 쌓는 것은 두 칸이
   너무 좁아지는 폭(640 이하)에서만 한다. */
@container(max-width:1100px){
 .workspace-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
 /* 화면 폭 1100 이하 규칙(맨 위 @media)이 미리보기를 static·전체 높이로 풀어 두므로, 나란히 둘 때는 다시 붙이고 안에서 스크롤한다. */
 .preview-panel{grid-column:2;position:sticky}
 .paper{max-height:max(240px,calc(100vh - 280px))}
 .outline{grid-column:1/-1;position:static}
 .outline nav{display:flex;overflow:auto;gap:8px;max-height:180px}
 .outline nav a{white-space:nowrap}
 .document-bar{flex-wrap:wrap;gap:12px}
 .document-actions{max-width:100%}
}
@container(max-width:760px){
 .original-import{grid-template-columns:minmax(0,1fr);gap:14px}
 .request-bottom{display:grid;gap:16px}
 .request-bottom label{min-width:0}
 .fields{grid-template-columns:minmax(0,1fr)}
 .fields .wide{grid-column:auto}
 .document-bar{display:block}
 .document-primary-actions,.document-secondary-actions{justify-content:flex-start}
}
/* 같은 폭에서 고정 문서 바가 제목 줄과 버튼 두 줄로 불어나 242px(화면의 27%)를 차지하고 미리보기 제목을 가렸다(2026-10-01 점검).
   제목 줄 하나, 버튼 줄 하나로 줄인다. 휴대폰 폭은 주 버튼을 화면 아래에 붙이는 기존 배치를 그대로 쓴다. */
@container(max-width:760px){@media(min-width:641px){
 .document-bar{padding-bottom:12px}
 .document-bar>div:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
 .document-title{flex:1 1 240px;min-width:0}
 .document-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
}}
@container(max-width:640px){
 .workspace-grid{display:block}
 .preview-panel{margin-top:24px;position:static}
 .paper{max-height:none}
}
@media(max-width:640px){
 .contract-page .intro h1{font-size:28px}
 #templatePreview{padding:16px}
 .template-preview-heading{gap:12px}
 .template-preview-toolbar{top:-16px}
 .template-preview-toolbar .actions{gap:6px;justify-content:space-between;width:100%}
 .template-preview-toolbar button{padding:8px 10px}
}
@media(min-width:641px) and (max-width:1024px){.contract-page .document-bar{top:54px}
 /* 이 폭에서는 고정 바가 54px 아래에 붙어 아랫단이 181~207px 까지 내려온다. 미리보기 제목과 조항 이전·다음 줄이 그 밑에 깔리지 않게 한다(2026-10-01 실측). */
 .contract-page .preview-panel{top:214px}.contract-page .clause-navigation{scroll-margin-top:214px}}

/* 계약서 미리보기 조판: 표제 → 전문 → 제N조 → 말미 문구 → 체결일 → 서명란.
   PDF·DOCX와 같은 구조를 화면에서도 같은 순서·같은 번호로 보여 준다. */
.paper[data-mode=standard] h2{margin-bottom:0;padding-bottom:14px;border-bottom:1.5px solid #1a2722;letter-spacing:-.01em}
.paper[data-mode=standard] h3{font-size:12.5px;font-weight:700;margin:20px 0 7px}
.paper .paper-preamble{margin:22px 0 4px}
.paper .paper-clause-line{margin:0 0 4px;padding-left:1.7em;text-indent:-1.2em}
.paper .paper-closing{margin-top:32px}
.paper .paper-closing>p{padding-left:1.2em}
.paper .paper-date{text-align:center;padding:0;margin:26px 0 20px;letter-spacing:.1em;font-size:13px}
.paper .paper-signature{width:100%;border-collapse:collapse;table-layout:fixed}
.paper .paper-signature th{width:54px;border:1px solid #97a49f;background:#eff6f3;text-align:center;font-weight:700;font-size:13px}
.paper .paper-signature td{border:1px solid #97a49f;padding:10px 12px}
.paper .paper-signature-line{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px;padding:3px 0}
.paper .paper-signature-line span{color:#5a6a63}
.paper .paper-signature-line b{font-weight:600;overflow-wrap:anywhere}
@media(max-width:640px){.paper .paper-signature-line{grid-template-columns:82px minmax(0,1fr);gap:6px}}
.template-source{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:10px 0 0;font-size:12px}
.template-source-tag{display:inline-flex;align-items:center;padding:3px 9px;border:1px solid #bcd1c8;border-radius:999px;background:#eff7f4;color:#334e43}
/* 서식 초안 카드의 '공식 표준계약서·적용 범위 확인' 누름 영역이 147×19px 였다(2026-10-01 점검). 글자 크기는 두고 높이만 44px 로. */
.template-source a{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
.collab-notice{display:grid;gap:6px;margin:16px 0 0;padding:16px 18px;border:1px solid #aad1c1;border-left:4px solid var(--primary);border-radius:10px;background:#eef8f4;font-size:14px}
.collab-notice strong{font-size:15px}
.collab-notice span{color:var(--muted)}
.collab-notice[data-error=true]{border-color:#e3b4ad;border-left-color:#9b2925;background:#fdf3f1;color:#8a2317}
.fields{display:block;margin:26px 0}
.field-group{min-width:0;margin:0 0 26px;padding:20px 22px 22px;border:1px solid var(--border);border-radius:12px;background:#fff}
.field-group legend{padding:0 8px;font-size:13px;font-weight:700;color:#334e43;letter-spacing:.01em}
.fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.fields-grid .wide{grid-column:1/-1}
@media(max-width:640px){.field-group{padding:16px}.fields-grid{grid-template-columns:1fr}.fields-grid .wide{grid-column:auto}}

/* 파일을 고른 순간 묻는 두 갈래(2026-09-24 대표 지시). 버튼은 라벨 한 줄 + 도착지 한 줄이다 —
   "참조로 쓴다/분석한다" 는 결과가 전혀 다르므로 누르기 전에 무엇이 되는지 적는다. */
.import-intent { display: grid; gap: 10px; margin-top: 14px; }
.import-intent button { display: grid; gap: 3px; justify-items: start; text-align: left; min-height: 60px; padding: 11px 13px; }
.import-intent button small { font-weight: 500; opacity: .85; line-height: 1.45; white-space: normal; }
.analysis-findings { display: grid; gap: 10px; margin-top: 14px; max-height: 58vh; overflow: auto; }
.analysis-finding { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid var(--dv-border, #b2c2bb); border-radius: 10px; background: var(--dv-bg-surface, #ffffff); }
.analysis-finding-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.analysis-severity { padding: 2px 9px; border: 1px solid var(--dv-warning-accent, #484f4c); border-radius: 999px; background: var(--dv-warning-surface, #f0f3f2); color: var(--dv-warning-text, #303734); font-size: 12px; font-weight: 700; }
.analysis-recommendation { color: var(--dv-trust, #051b11); font-weight: 600; }

.analysis-shared { margin: 10px 0 0; padding: 7px 11px; border: 1px solid var(--dv-warning-accent, #484f4c); border-radius: 8px; background: var(--dv-warning-surface, #f0f3f2); color: var(--dv-warning-text, #303734); font-weight: 700; }

/* 분석 결과 → 검토의견서 PDF · 개선본(2026-09-24 대표 지시). 대화상자를 머리 → 목록 → 행동 줄의
   세로 흐름으로 세운다. 목록이 아무리 길어도 목록만 스크롤되고, 행동 줄(주 행동·진행 문구·취소)은
   늘 대화상자 아래에 보인다. 모달 뒤의 #status 는 회원 눈에 안 보이므로 진행은 여기서 말한다. */
#analysisResult[open] { display: flex; flex-direction: column; }
#analysisResult > * { flex: none; }
#analysisResult .analysis-step { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#analysisResult .analysis-findings { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; grid-template-columns: minmax(0, 1fr); }
/* 접힌 원문 미리보기는 한 줄 말줄임이다. 폭을 0 에서 시작시키지 않으면 긴 조항 한 줄이 그대로 카드의
   최소 폭이 되어, 375px 에서 카드 오른쪽이 목록 밖으로 잘려 나갔다(2026-09-24 실측). */
.analysis-finding { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.analysis-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.analysis-head > div { min-width: 0; }
.analysis-head h2 { margin-bottom: 4px; }
.analysis-head p { margin: 0; overflow-wrap: anywhere; }
.analysis-head .close { float: none; margin: 0; }
.analysis-disclaimer { margin: 10px 0 0; }
/* 가져온 원본의 칸 이름('본문 구역 · 문단 44')은 위치 표시라 작게, 원본 문구(제8조 …)를 본문 크기로 보인다(2026-09-27). */
.clause.original-clause > label { font-size: 12px; font-weight: 500; color: var(--muted); }
.clause.original-clause > label textarea { font-size: 15px; font-weight: 400; }
.clause.original-clause > label textarea:not([readonly]) { color: #0e1914; }
.paper:not([data-mode="standard"]) section > h3 { margin-bottom: 2px; font-size: 11px; font-weight: 500; color: var(--muted); }
/* 결과 창 머리의 분석 방식 안내(2026-09-27): 규칙 점검 결과인지, 저장한 분석을 다시 연 것인지를 목록보다 먼저 말한다. */
.analysis-source-note { display: grid; gap: 4px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--dv-warning-accent, #484f4c); border-radius: 8px; background: var(--dv-warning-surface, #f0f3f2); color: var(--dv-warning-text, #303734); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.analysis-source-note[hidden] { display: none; }
.analysis-source-note a { justify-self: start; color: inherit; text-decoration: underline; font-weight: 700; }
/* 우리 회사가 계약의 어느 쪽인지 고르는 칸(2026-09-27). 당사자 칸보다 먼저 온다. */
.party-side { display: grid; gap: 8px; margin: 0 0 18px; }
.party-side-question { margin: 0; font-size: 14px; font-weight: 700; color: #0e1914; }
.party-side-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-weight: 600; cursor: pointer; }
.party-side-option:has(input:checked) { border-color: var(--primary); background: #eaf4f0; }
.party-side-option input { width: 18px; height: 18px; margin: 0; padding: 0; flex: none; }
.analysis-finding-head strong { font-size: 15px; }
.analysis-block { display: grid; gap: 2px; }
.analysis-block p { margin: 0; overflow-wrap: anywhere; }
.analysis-label { font-size: 12px; font-weight: 650; color: var(--dv-text, #283530); }
.analysis-recommendation .analysis-label { color: inherit; }
.analysis-proposal { margin-top: 4px; padding: 10px 12px; border: 1px solid #bcd1c8; border-radius: 8px; background: var(--dv-bg-selected, #e4e9e6); }
.analysis-proposal p { color: var(--dv-text-strong, #0e1914); }
.analysis-source { border-block: 1px solid var(--border); }
.analysis-source > summary { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; font-size: 13px; color: var(--primary); list-style: none; }
.analysis-source > summary::-webkit-details-marker { display: none; }
.analysis-source > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px 0 1px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .16s cubic-bezier(.2, .8, .2, 1); }
.analysis-source[open] > summary::before { transform: rotate(45deg); }
.analysis-source-label { flex: none; }
.analysis-source-preview { flex: 1 1 0; width: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 500; }
.analysis-source[open] .analysis-source-preview { visibility: hidden; }
.analysis-quote { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--dv-bg-page, #f4f9f7); font-size: 14px; overflow-wrap: anywhere; }
.analysis-revise-intro { margin: 10px 0 0; }
#analysisReviseBody { gap: 0; margin-top: 6px; }
.analysis-revise-item { min-width: 0; padding: 16px 0; }
.analysis-revise-item:first-child { border-top: 0; padding-top: 4px; }
.analysis-accept { font-size: 14px; font-weight: 650; margin-bottom: 8px; }
.analysis-accept span { min-width: 0; overflow-wrap: anywhere; }
.analysis-revise-item .condition-comparison { margin-bottom: 10px; }
.analysis-revise-item .condition-comparison > label { min-width: 0; font-size: 13px; color: var(--muted); }
.analysis-revise-item textarea { min-height: 140px; font-size: 14px; color: var(--dv-text-strong, #0e1914); }
.analysis-revise-item textarea:disabled { background: var(--dv-bg-subtle, #eaf3ef); color: var(--muted); cursor: not-allowed; }
.analysis-revise-item:has(input[type=checkbox]:not(:checked)) .condition-comparison > div { opacity: .6; }
.analysis-reason { color: var(--dv-text, #283530); font-size: 14px; }
.analysis-actions { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.analysis-action-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.analysis-action-buttons button { white-space: normal; }
.analysis-actions > p { margin: 0; }
.analysis-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.analysis-progress p { margin: 0; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.analysis-progress p[data-error=true] { color: #9b2925; }
.analysis-progress button { flex: none; }
/* 375px 에서 긴 실패 문단이 목록을 34px 로 눌러 고칠 항목이 안 보였다(C27, 2026-09-24 실측). 문단은 세 줄까지만
   자리를 쓰고 나머지는 그 안에서 스크롤한다. 반영하지 못한 이유는 각 제안 아래(.analysis-skip-reason)에 적으므로
   이 문단에는 요약만 온다. 목록은 그래도 한 항목의 머리는 보일 높이를 지킨다. */
.analysis-progress p { max-height: 4.8em; overflow-y: auto; }
#analysisResult .analysis-findings { min-height: 7rem; }
.analysis-skip-reason { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid #9b2925; border-radius: 0 6px 6px 0; background: #fdf3f1; color: #8a2317; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
/* 원문의 같은 부분을 고치는 제안끼리의 안내. 실패가 아니라 고르라는 뜻이라 경고 색을 쓴다(2026-09-25). */
.analysis-conflict-note { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--dv-warning-accent, #484f4c); border-radius: 0 6px 6px 0; background: var(--dv-warning-surface, #f0f3f2); color: var(--dv-warning-text, #303734); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
/* 결과 창을 닫은 뒤에도 요청은 이어진다. 상태 줄 바로 아래에 취소·다시 보기·개선본 열기를 둔다(C26). */
.analysis-notice { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 16px; }
.analysis-notice button { white-space: normal; }
.import-choice-busy { margin: 10px 0 0; padding: 8px 10px; border: 1px solid var(--dv-warning-accent, #484f4c); border-radius: 8px; background: var(--dv-warning-surface, #f0f3f2); color: var(--dv-warning-text, #303734); font-size: 13px; font-weight: 600; }
.contract-page .start-upload #reopenAnalysis { justify-self: start; min-height: 44px; padding: 8px 0; text-align: left; white-space: normal; }
.review-revision-note { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--dv-warning-accent, #484f4c); border-radius: 8px; background: var(--dv-warning-surface, #f0f3f2); color: var(--dv-warning-text, #303734); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .analysis-source > summary::before { transition: none; } }
@media (max-width: 640px) {
  #analysisResult { padding: 18px 16px; }
  .analysis-action-buttons { display: grid; grid-template-columns: minmax(0, 1fr); }
  .analysis-action-buttons button { width: 100%; }
  /* 비교 단계는 목록이 편집 칸이라 세로 자리가 더 귀하다. '뒤로'는 짧으니 주 행동 옆에 붙인다. */
  .analysis-action-buttons:has(#analysisBack:not([hidden])) { grid-template-columns: minmax(0, 1fr) auto; }
  .analysis-action-buttons #analysisBack { width: auto; }
  .analysis-revise-item textarea { min-height: 120px; }
  .analysis-notice button { flex: 1 1 auto; }
}

/* 움직임 줄이기 설정(2026-09-28 공-11) — 계약 서명 화면도 2세대와 같은 전역 규칙. */
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto!important}*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* 누름 반응(2026-09-28 공-10) — 계약 화면 버튼 43개에 눌림 표시가 하나도 없었다. 살짝 줄어 눌렸다는 것을 바로 알린다. */
button{transition:transform 160ms cubic-bezier(.23,1,.32,1),scale 160ms cubic-bezier(.23,1,.32,1),background-color 160ms cubic-bezier(.23,1,.32,1),border-color 160ms cubic-bezier(.23,1,.32,1)}button:active:not(:disabled){scale:.97;transition-duration:100ms}@media (prefers-reduced-motion: reduce){button:active:not(:disabled){scale:none}}