/*------------------------------------------------------------------*
 * 회사소개서 열람신청 팝업
 *  전 클래스 dfg- 접두사 — 기존 사이트 CSS와 충돌 방지
 *------------------------------------------------------------------*/

.dfg-dim{
  position:fixed; inset:0; z-index:99999; background:rgba(15,13,17,.55);
  display:none; align-items:center; justify-content:center; padding:22px;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .18s ease;
}
.dfg-dim.dfg-on{display:flex}
.dfg-dim.dfg-in{opacity:1}

.dfg-modal{
  width:100%; max-width:404px; max-height:100%;
  background:#fff; border:1px solid #E4DFDA; border-radius:15px; overflow:hidden;
  box-shadow:0 2px 4px rgba(26,28,35,.06), 0 32px 64px -16px rgba(26,28,35,.28);
  display:flex; flex-direction:column;
  font-family:"Paperlogy",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#1A1C23; font-weight:400; line-height:1.65; text-align:left;
  transform:translateY(8px) scale(.99); transition:transform .18s ease;
}
.dfg-dim.dfg-in .dfg-modal{transform:none}
.dfg-modal *{box-sizing:border-box}

/* 헤더 */
.dfg-top{padding:24px 26px 17px; border-bottom:1px solid #E4DFDA; position:relative; flex:none}
.dfg-lock{display:flex; align-items:center; gap:7px; margin-bottom:9px}
.dfg-lock svg{width:13px; height:13px; flex:none; color:#FF4800}
.dfg-lock span{font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:#FF4800}
.dfg-top h3{margin:0; font-size:18.5px; font-weight:600; letter-spacing:-.015em; color:#1A1C23; line-height:1.35}
.dfg-top p{margin:7px 0 0; font-size:13px; color:#5C5A63; line-height:1.6}
.dfg-x{
  position:absolute; top:19px; right:19px; width:27px; height:27px; border-radius:7px;
  border:1px solid #E4DFDA; background:#FBF9F8; color:#8B8792; cursor:pointer;
  display:grid; place-items:center; padding:0; font-family:inherit; font-size:14px; line-height:1;
}
.dfg-x:hover{color:#1A1C23; border-color:#D2CCC5}

/* 본문 */
.dfg-body{padding:19px 26px 8px; display:flex; flex-direction:column; gap:13px; overflow-y:auto; min-height:0}
.dfg-f{display:flex; flex-direction:column; gap:5px}
.dfg-f label{font-size:12px; font-weight:500; color:#5C5A63; display:flex; gap:4px; align-items:center}
.dfg-req{color:#FF4800; font-size:13px; line-height:1}
.dfg-f input[type=text], .dfg-f input[type=tel], .dfg-f input[type=email], .dfg-sel-btn{
  width:100%; padding:9px 12px; border:1px solid #D2CCC5; border-radius:8px; background:#FBF9F8;
  color:#1A1C23; font-size:13.5px; font-family:inherit; font-weight:400; line-height:1.5;
  transition:border-color .14s, box-shadow .14s; -webkit-appearance:none; appearance:none;
}
.dfg-f input::placeholder{color:#8B8792}
.dfg-f input:focus, .dfg-sel-btn:focus{outline:none; border-color:#FF4800; box-shadow:0 0 0 3px #FFEAE1}
.dfg-f input.dfg-bad{border-color:#A32B12; box-shadow:0 0 0 3px #FBE7E1}
.dfg-two{display:grid; grid-template-columns:1fr 1fr; gap:11px}

/* 문의 목적 — 아코디언(인플로우). 띄우면 .dfg-body 스크롤에 잘린다 */
.dfg-sel-btn{display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; text-align:left; padding-right:10px}
.dfg-sel-btn[aria-expanded="true"]{border-color:#FF4800; box-shadow:0 0 0 3px #FFEAE1}
.dfg-sel-val{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#8B8792}
.dfg-sel-val.dfg-picked{color:#1A1C23}
.dfg-caret{
  flex:none; width:19px; height:19px; border-radius:5px; background:#E4DFDA; margin-right:2px;
  display:grid; place-items:center; transition:transform .18s, background .14s;
}
.dfg-caret svg{width:9px; height:9px; color:#5C5A63}
.dfg-sel-btn[aria-expanded="true"] .dfg-caret{transform:rotate(180deg); background:#FFEAE1}
.dfg-sel-btn[aria-expanded="true"] .dfg-caret svg{color:#FF4800}
.dfg-list{
  margin-top:5px; background:#FBF9F8; border:1px solid #E4DFDA; border-radius:9px; padding:5px;
  display:none; flex-direction:column; gap:1px;
}
.dfg-list.dfg-open{display:flex}
.dfg-list button{
  text-align:left; padding:8px 10px; border:0; border-radius:6px; background:transparent; color:#1A1C23;
  font-size:13px; font-family:inherit; font-weight:400; cursor:pointer; display:flex; align-items:center; gap:9px;
  line-height:1.5;
}
.dfg-list button:hover, .dfg-list button:focus{background:#fff; outline:none}
.dfg-list button[aria-selected="true"]{background:#FFEAE1; color:#FF4800; font-weight:500}
.dfg-list button b{
  flex:none; width:17px; height:17px; border-radius:4px; background:#E4DFDA; color:#5C5A63;
  font-size:9.5px; font-weight:500; display:grid; place-items:center;
}
.dfg-list button[aria-selected="true"] b{background:#FF4800; color:#fff}
.dfg-etc{display:none}
.dfg-etc.dfg-open{display:flex}

/* 동의 */
.dfg-agree{
  display:flex; align-items:flex-start; gap:9px; padding:10px 12px; border-radius:8px;
  background:#FBF9F8; border:1px solid #E4DFDA; cursor:pointer; margin-top:2px;
}
.dfg-agree input{flex:none; margin:1px 0 0; width:15px; height:15px; accent-color:#FF4800; cursor:pointer}
.dfg-agree span{font-size:12px; color:#5C5A63; line-height:1.55}
.dfg-agree b{color:#5C5A63; font-weight:500}

/* 푸터 */
.dfg-foot{padding:6px 26px 22px; display:flex; flex-direction:column; gap:12px; flex:none}
.dfg-sub{
  width:100%; padding:12px; border:0; border-radius:9px; background:#FF4800; color:#fff;
  font-size:14.5px; font-weight:500; font-family:inherit; cursor:pointer; letter-spacing:-.01em;
  transition:filter .14s; line-height:1.4;
}
.dfg-sub:hover{filter:brightness(1.08)}
.dfg-sub:disabled{background:#D2CCC5; color:#8B8792; cursor:not-allowed; filter:none}
.dfg-cap{
  margin:0; font-size:11.5px; line-height:1.6; color:#8B8792; text-align:center;
  padding:9px 10px; border-radius:7px; background:#FBF9F8; border:1px dashed #D2CCC5;
}
.dfg-cap b{color:#5C5A63; font-weight:500}
.dfg-err{
  margin:0; font-size:12px; color:#A32B12; background:#FBE7E1; border-radius:7px;
  padding:8px 11px; display:none; line-height:1.55;
}
.dfg-err.dfg-open{display:block}

/* 접수 완료 — 모달이 overflow:hidden 이라 넘치면 버튼이 잘린다 → 스크롤 허용 */
.dfg-done{
  padding:40px 30px 34px; text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:13px; min-height:0; overflow-y:auto;
}
.dfg-done-ic{width:50px; height:50px; border-radius:50%; background:#FFEAE1; display:grid; place-items:center; flex:none}
.dfg-done-ic svg{width:23px; height:23px; color:#FF4800}
.dfg-done h3{margin:0; font-size:18px; font-weight:600; letter-spacing:-.015em; color:#1A1C23}
.dfg-done p{margin:0; font-size:13.5px; color:#5C5A63; line-height:1.7; max-width:32ch}
.dfg-done p b{color:#1A1C23; font-weight:500; word-break:break-all}
.dfg-done-meta{
  margin-top:5px; padding:9px 14px; border-radius:8px; background:#FBF9F8; border:1px solid #E4DFDA;
  font-size:12px; color:#8B8792; display:flex; gap:7px; align-items:center; flex:none;
}
.dfg-done-meta svg{width:12px; height:12px; flex:none}
.dfg-done .dfg-sub{margin-top:12px; max-width:150px; flex:none}

@media(max-width:600px){
  .dfg-dim{padding:14px}
  .dfg-two{grid-template-columns:1fr}
  .dfg-top{padding:20px 20px 15px}
  .dfg-body{padding:16px 20px 8px}
  .dfg-foot{padding:6px 20px 18px}
  .dfg-done{padding:34px 22px 28px}
}
@media(prefers-reduced-motion:reduce){
  .dfg-dim, .dfg-modal{transition:none}
}