/* 한방 TF_CONT_INS(계약서 작성) 창 재현. 좌표·색상은 REA로 해석한 DFM 값 기준. */
:root {
  --face: #f0f0f0;          /* clBtnFace */
  --silver: #c0c0c0;        /* clSilver */
  --ro: #eaeaea;            /* 15395562 */
  --info: #ffffe1;          /* clInfoBk */
  --hdr: #dce6f2;           /* 15918812 */
  --navy: #27456b;          /* 7030311 */
  --printbar: #41464f;      /* 5195329 */
  --combo: #e0e0e0;         /* 14737632 */
  --blue: #0000ff;
  --nanum: '나눔고딕', 'NanumGothic', sans-serif;
  --nanumx: '나눔고딕 ExtraBold', 'NanumGothicExtraBold', '나눔고딕', sans-serif;
  --dotum: '돋움', 'Dotum', sans-serif;
  --gulim: '굴림', 'Gulim', sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--face); overflow: hidden; }
body { font: 11px Tahoma, var(--dotum); color: #000; user-select: none; }
input, select, textarea, button { font: inherit; color: inherit; margin: 0; }
#win { position: relative; width: 921px; height: 100vh; min-height: 600px; display: flex; flex-direction: column; background: var(--face); }
.abs { position: absolute; }
.lbl { position: absolute; white-space: pre; line-height: 1; }

/* ── 상단 서비스 영역 Panel3 (80px) ───────────────────── */
#hdr { position: relative; height: 80px; flex: none; background: var(--hdr); border-bottom: 1px solid #b9c7d8; }
.svc-band { position: absolute; top: 0; height: 21px; color: #fff; font: bold 13px var(--nanum); text-align: center; line-height: 21px; border-radius: 6px 6px 0 0; }
.svc-body { position: absolute; top: 21px; height: 57px; }
.svc-info .svc-band { background: #1c5376; }
.svc-info.svc-body { background: #1c5376; }
.svc-check .svc-band { background: #2e8c84; }
.svc-check.svc-body { background: #e6f2ef; border: 1px solid #2e8c84; border-top: 0; }
.svc-form .svc-band { background: #2f9a4f; }
.svc-form.svc-body { background: #e8f5e2; border: 1px solid #2f9a4f; border-top: 0; }
.ibtn-info { position: absolute; top: 21px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 5px; color: #fff; font: bold 12px var(--nanum); cursor: pointer; background: transparent; border: 0; }
.ibtn-info svg { width: 26px; height: 22px; margin-bottom: 4px; stroke: #fff; fill: none; stroke-width: 1.6; }
.ibtn-info:hover { background: rgba(255,255,255,.12); }
.ibtn-check { position: absolute; height: 23px; background: #fff; border: 1px solid #8fb8b2; border-radius: 3px; font: bold 12px var(--nanum); color: #123; cursor: pointer; padding: 0; }
.ibtn-check.yellow { background: #ffe14d; border-color: #d4b400; }
.ibtn-form { position: absolute; height: 44px; background: #d7f0c8; border: 1px solid #7cb860; border-radius: 3px; font: bold 13px var(--nanum); color: #123; cursor: pointer; line-height: 1.25; padding: 0; }

/* ── 계약서종류 Panel5 (56px) ───────────────────────── */
#bar1 { position: relative; height: 56px; flex: none; background: var(--hdr); }
.glabel { position: absolute; background: linear-gradient(#3a5d8a, var(--navy)); color: #fff; font: bold 15px var(--nanum); display: flex; align-items: center; justify-content: center; }
.combo { position: absolute; height: 25px; border: 1px solid #7a7a7a; background: #fff; font: 15px var(--nanum); padding: 0 2px; }
.combo.bold { font-weight: bold; }
.combo.gray { background: var(--combo); }
.btn { position: absolute; border: 1px solid #555; border-radius: 2px; cursor: pointer; padding: 0; font: bold 12px var(--nanum); }
.btn-ok { background: linear-gradient(#fff, #dcdcdc); color: #000; font-size: 13px; }
.btn-dark { background: #4b4b4b; color: #fff; border-color: #333; }
.btn-red { background: #d5333b; color: #fff; border-color: #a01d24; }
.btn-green { background: #7cc142; color: #fff; border-color: #5b9a2a; }
.btn-white { background: #fff; color: #000; border-color: #888; }
.btn-orange { background: #f26b21; color: #fff; border-color: #c64f0c; font-size: 14px; }
.btn:active { filter: brightness(.9); }
#lb_ContactCode { position: absolute; left: 83px; top: 34px; font: 800 15px var(--nanumx); color: #e00000; }

.bevel { height: 2px; flex: none; border-top: 1px solid #a0a0a0; border-bottom: 1px solid #fff; }

/* ── 인쇄설정 Panel7 (43px) ─────────────────────────── */
#bar2 { position: relative; height: 43px; flex: none; background: var(--printbar); color: #fff; }
#bar2 .print-ico { position: absolute; left: 6px; top: 12px; font: bold 12px var(--dotum); color: #fff; display: flex; gap: 6px; align-items: center; }
.chk { position: absolute; display: flex; align-items: center; gap: 3px; white-space: nowrap; cursor: pointer; }
.chk input { margin: 0; width: 13px; height: 13px; }
#bar2 .chk { font: bold 13px var(--dotum); color: #fff; }
#bar2 .chk.small, .radio.small { font: 800 11px var(--nanumx); }
.radio { position: absolute; display: flex; align-items: center; gap: 3px; white-space: nowrap; cursor: pointer; }
.radio input { margin: 0; }
#pnl_save { position: absolute; left: 695px; top: 5px; width: 171px; height: 35px; }

/* ── 본문 스크롤 영역 ──────────────────────────────── */
#scroll { flex: 1; overflow-y: scroll; overflow-x: hidden; background: #fff; border: 1px solid #a0a0a0; margin: 0 0 0 2px; }
#frame { position: relative; width: 899px; padding-bottom: 20px; background: #fff; } /* TF_CONT_INS gbox_Content 폭 */
.pnl { position: relative; width: 880px; background: #fff; }
.subject { height: 38px; background: #000; color: #fff; font: bold 20px var(--nanum); display: flex; align-items: center; justify-content: center; }
.hcell { position: absolute; background: var(--silver); border: 1px solid #808080; font: bold 15px var(--nanum); display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.05; }
.hcell.small { font-size: 12px; }
.hcell .q { background: #ff0; padding: 0 2px; margin-left: 2px; }
.grp { position: absolute; background: var(--face); border: 1px solid #a0a0a0; }
.grp.white { background: #fff; }
.ed { position: absolute; height: 23px; border: 1px solid #7a7a7a; background: #fff; font: 15px var(--nanum); padding: 0 3px; outline: none; }
.ed:focus { background: #e9f2ff; border-color: #3a7bd5; }
.ed.dotum { font-family: var(--dotum); height: 21px; }
.ed.money { text-align: right; }
.ed.ro { background: var(--ro); }
.ed.bold { font-weight: bold; }
.ed:disabled { background: var(--ro); color: #888; }
.ed::placeholder { color: #9a9a9a; font-size: 11px; }
.date { position: absolute; height: 21px; width: 113px; }
.date input.ed { left: 0; top: 0; width: 88px; height: 21px; background: var(--info); font: bold 15px var(--nanum); padding: 0 2px; }
.date button { position: absolute; left: 90px; top: 0; width: 21px; height: 21px; border: 1px solid #7a7a7a; background: linear-gradient(#fff, #d8d8f0); padding: 0; cursor: pointer; font-size: 12px; line-height: 19px; }
.date input[type=date] { position: absolute; left: 0; top: 21px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.t15 { font: 15px var(--nanum); }
.t15b { font: bold 15px var(--nanum); }
.t13b { font: bold 13px var(--nanum); }
.t16b { font: bold 16px var(--nanum); }
.dotumb { font: bold 15px var(--dotum); }
.blue { color: var(--blue); }
.memo { position: absolute; border: 1px solid #7a7a7a; font: bold 15px var(--nanum); line-height: 19px; resize: none; padding: 1px 3px; overflow: hidden; outline: none; background: #fff; }
.memo:focus { border-color: #3a7bd5; }
.linkbtn { position: absolute; border: 0; background: transparent; color: var(--blue); font: bold 13px var(--nanum); cursor: pointer; padding: 0; }
.addbtn { position: absolute; height: 25px; border: 1px solid #555; background: linear-gradient(#fff, #e1e1e1); font: bold 13px var(--nanum); cursor: pointer; }
.autopanel { position: absolute; background: #000040; color: #fff; font: bold 12px var(--dotum); border: 1px solid #000; }
.autopanel .radio { color: #fff; font: bold 12px var(--dotum); }

/* 특약사항 */
.fontgrp { position: absolute; border: 1px solid #a0a0a0; background: #fff; }
.fontgrp .sb { position: absolute; width: 21px; height: 21px; border: 1px solid #888; background: linear-gradient(#fff, #ddd); font: bold 14px 'Times New Roman', serif; cursor: pointer; padding: 0; line-height: 19px; }
.notice-blue { position: absolute; background: #0080c0; color: #fff; font: bold 12px var(--dotum); display: flex; align-items: center; justify-content: center; }
.tbtn { position: absolute; height: 25px; border: 1px solid rgba(0,0,0,.25); border-radius: 2px; font: bold 12px var(--nanum); color: #fff; cursor: pointer; padding: 0; }
.tb-blue { background: #4a74c9; } .tb-yellow { background: #ffd60a; color: #222; } .tb-brown { background: #5c2c18; }
.tb-orange { background: #f26b3a; } .tb-green { background: #7cc142; } .tb-sky { background: #2f8fd8; } .tb-teal { background: #29a3cc; } .tb-navy { background: #23407a; font-size: 10px; line-height: 1.1; }
.rich { position: absolute; border: 1px solid #7a7a7a; font: bold 13px var(--gulim); line-height: 16px; padding: 2px 4px; resize: none; outline: none; white-space: pre-wrap; overflow-y: scroll; background: #fff; }
.red15 { font: bold 15px var(--dotum); color: #e00000; }
.qbtn { position: absolute; width: 23px; height: 23px; border-radius: 50%; border: 0; background: #f39c12; color: #fff; font: bold 15px Arial; cursor: pointer; }

/* 당사자 */
.redx { font: 800 13px var(--nanumx); color: #e00000; }
.searchbtn { position: absolute; height: 25px; border: 1px solid #7ab8dc; background: #a9d9f3; color: #fff; font: bold 12px var(--nanum); cursor: pointer; padding: 0; }
.party-gray .ed, .party-gray .combo { background: var(--ro); }
.office { position: absolute; border: 1px solid #808080; background: #fff; }

/* 공용 DFM 렌더러(dfm-render.js) */
#gframe { position: relative; width: 899px; background: #fff; overflow: hidden; }
.dfm-box { overflow: hidden; }
.dfm-grp { border: 1px solid #a0a0a0; }
.dfm-legend { position: absolute; top: 0; padding: 0 3px; white-space: nowrap; line-height: 1.1; z-index: 1; }
.dfm-cap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 6px; pointer-events: none; }
.dfm-lbl { line-height: 1.15; overflow: visible; }
.dfm-html { overflow: hidden; display: flex; flex-direction: column; justify-content: center; line-height: 1.1; word-break: keep-all; } /* Windows처럼 띄어쓰기에서만 줄바꿈(넘치는 글자는 잘림) */
.dfm-html.dfm-bordered { border: 1px solid #808080; }
.dfm-ed { border: 1px solid #7a7a7a; padding: 0 3px; outline: none; background: #fff; }
.dfm-ed:focus { background: #e9f2ff; border-color: #3a7bd5; }
.dfm-ed[readonly] { background: var(--ro); }
.dfm-ed::placeholder { color: #9a9a9a; font-size: 11px; }
/* 한방 날짜칸: 입력칸은 원래 폭 그대로, 달력 버튼은 그 오른쪽 바깥에 붙는다 */
.dfm-date { overflow: visible; }
.dfm-date .dfm-ed { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--info); padding: 0 2px; }
.dfm-date button { position: absolute; left: calc(100% + 1px); top: 0; width: 20px; height: 100%; border: 1px solid #7a7a7a; background: linear-gradient(#fff, #d8d8f0); padding: 0; cursor: pointer; font-size: 12px; }
.dfm-date input[type=date] { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dfm-cb { border: 1px solid #7a7a7a; background: #fff; padding: 0 2px; }
.dfm-memo { border: 1px solid #7a7a7a; resize: none; outline: none; padding: 1px 3px; line-height: 1.3; }
.dfm-chk { display: flex; align-items: center; gap: 3px; white-space: nowrap; cursor: pointer; }
.dfm-chk input { margin: 0; }
.dfm-btn { border: 1px solid #555; border-radius: 2px; background: linear-gradient(#fff, #e1e1e1); cursor: pointer; padding: 0; white-space: nowrap; overflow: hidden; }
.dfm-btn-blank { visibility: hidden; }
.dfm-img { pointer-events: none; }

#status { height: 19px; flex: none; border-top: 1px solid #a0a0a0; background: var(--face); color: #e00000; font: 11px var(--dotum); padding: 3px 4px; }
#status.saved { color: #0000c0; }
#toast { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); background: #ffffe1; border: 1px solid #555; padding: 14px 22px; font: bold 13px var(--nanum); box-shadow: 2px 2px 6px rgba(0,0,0,.35); z-index: 10; }

@media print {
  #hdr, #bar1, #bar2, .bevel, #status { display: none !important; }
  html, body, #win, #scroll { height: auto; overflow: visible; }
}

/* ── 녹색 테마(2026-10-17 요청: 디자인은 그대로, 한방과 헷갈리지 않게 색만 녹색 계열로) ── */
:root { --face: #eef3ef; --silver: #bfd0c4; --ro: #e6eee8; --hdr: #dcefe2; --navy: #255c43; --printbar: #3d4f44; --combo: #dde8e0; }
#hdr { border-bottom-color: #b5d3bf; }
.svc-info .svc-band, .svc-info.svc-body { background: #1c6a4f; }
.glabel { background: linear-gradient(#3a8a62, var(--navy)); }
.ed:focus, .dfm-ed:focus { background: #e9f8ee; border-color: #3aa56b; }
.memo:focus { border-color: #3aa56b; }
.searchbtn { background: #a9e3c3; border-color: #7acb9f; }
#status.saved { color: #0b7a3e; }

/* 창을 크게 열면 내용은 웹페이지처럼 가운데(양옆은 바탕색). 인쇄(@media print)는 영향 없음 */
@media screen {
  html, body { background: #d9e4dc; }
  #win { margin: 0 auto; box-shadow: 0 0 12px rgba(0,0,0,.18); }
}

/* 입력값 글자는 모두 검정(2026-10-18 요청): 원본 양식의 회색·파랑 글자색, 쓰지 않는 칸의 회색도 검정으로.
   빈칸 안내문(placeholder)은 회색 그대로, 특약은 [색상] 단추로 고른 색을 따른다. */
input, textarea:not([data-f="memo_stamp"]), select, option { color: #000 !important; }
textarea[data-f="memo_stamp"] { color: #000; }