/*------------------------------------------------------------------*
 * 부분기획 진행 순서 + 검토 보고서 견본 + 인터뷰 끝 화면 (2026-10-07)
 *  전 클래스 dff- 접두사 · 1px 선 · 그림자 없음 · 사이트 토큰(#FF4800 · #1A1C23 · #E4DFDA · Paperlogy)
 *------------------------------------------------------------------*/
.dff-blk, .dff-thx, [data-dff-flow], .dff-mdl{
  --dff-o:#FF4800; --dff-o50:#FFEAE1; --dff-o30:#FFF6F1; --dff-k:#1A1C23; --dff-s:#5C5A63; --dff-m:#8B8792;
  --dff-ln:#E4DFDA; --dff-ln2:#D2CCC5; --dff-pp:#FBF9F8;
  font-family:"Paperlogy",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#1A1C23; text-align:left;
}
.dff-blk *, .dff-thx *, [data-dff-flow] *, .dff-mdl *{box-sizing:border-box}
.dff-ic{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; display:inline-block; flex:none}

/* 진행 순서 번호 목록(좁은 화면 대체) */
.dff-proc{margin:0; padding:0; display:grid; gap:0}
.dff-proc li{list-style:none; display:grid; grid-template-columns:30px 1fr; gap:12px; padding:12px 0; border-top:1px solid #F1EEEA}
.dff-proc li:first-child{border-top:0}
.dff-proc .dff-n{width:26px; height:26px; border-radius:50%; border:1px solid var(--dff-ln2); display:grid; place-items:center; font-size:12px; color:var(--dff-k); font-weight:600}
.dff-proc li.dff-us .dff-n{background:var(--dff-k); border-color:var(--dff-k); color:#fff}
.dff-proc b{font-size:14px; font-weight:600; color:var(--dff-k); display:block}
.dff-proc b small{font-size:11.5px; font-weight:500; color:var(--dff-m); margin-left:6px}
.dff-proc p{font-size:13px; color:var(--dff-s); line-height:1.65; margin:2px 0 0}
.dff-notdo{font-size:12.5px; color:var(--dff-s); line-height:1.7; padding-top:10px; margin:14px 0 0; border-top:1px solid var(--dff-ln)}
.dff-notdo b{color:var(--dff-k); font-weight:600}

/* 도식 A 두 줄 흐름 */
.dff-ln-wrap{position:relative; margin-top:6px}
.dff-ln-grid{display:grid; grid-template-columns:72px repeat(6,1fr); grid-template-rows:auto 92px 92px; position:relative}
.dff-ln-grid .dff-lh{font-size:12px; font-weight:600; color:var(--dff-s); display:flex; align-items:center; border-top:1px solid var(--dff-ln)}
.dff-ln-grid .dff-lh.dff-us{color:var(--dff-k)}
.dff-ln-grid .dff-cell{border-top:1px solid var(--dff-ln); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:6px 4px}
.dff-ln-grid .dff-num{font-size:11px; color:var(--dff-m); text-align:center; padding-bottom:6px}
.dff-node{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid var(--dff-k); color:var(--dff-k); position:relative; z-index:2; cursor:pointer; padding:0; font:inherit}
.dff-node.dff-us{background:var(--dff-k); color:#fff}
.dff-node.dff-fin{background:var(--dff-o); border-color:var(--dff-o); color:#fff}
.dff-node.dff-sel{outline:2px solid var(--dff-o); outline-offset:3px}
.dff-ln-t{font-size:12px; font-weight:600; color:var(--dff-k); line-height:1.3; word-break:keep-all}
.dff-ln-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1}
.dff-ln-det{margin-top:14px; padding-top:12px; border-top:1px solid var(--dff-ln); display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:baseline}
.dff-ln-det b{font-size:15px; font-weight:600}
.dff-ln-det span{font-size:12px; color:var(--dff-o); font-weight:500}
.dff-ln-det p{grid-column:1/-1; font-size:13px; color:var(--dff-s); line-height:1.65; margin:0}
.dff-ln-wrap .dff-fallback{display:none}

/* 도식 B 주고받기 */
.dff-pp{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr); row-gap:10px; margin-top:6px}
.dff-pp .dff-hd{font-size:12px; font-weight:600; color:var(--dff-s); padding-bottom:8px; border-bottom:1px solid var(--dff-ln)}
.dff-pp .dff-hd.dff-r{text-align:right; color:var(--dff-k)}
.dff-pp .dff-mid{grid-column:2; grid-row:1/-1; position:relative}
.dff-pp .dff-mid::before{content:''; position:absolute; left:50%; top:30px; bottom:10px; border-left:1px dashed var(--dff-ln2)}
.dff-bub{border:1px solid var(--dff-ln2); border-radius:14px; padding:12px 14px; background:#fff; position:relative}
.dff-bub.dff-us{background:var(--dff-k); color:#fff; border-color:var(--dff-k)}
.dff-bub.dff-fin{background:var(--dff-o); border-color:var(--dff-o); color:#fff}
.dff-bub .dff-t{display:flex; gap:8px; align-items:center; font-size:14px; font-weight:600; line-height:1.4}
.dff-bub .dff-t i{font-style:normal; font-size:11px; width:20px; height:20px; border-radius:50%; border:1px solid currentColor; display:grid; place-items:center; flex:none}
.dff-bub p{font-size:12.5px; line-height:1.6; margin:4px 0 0; opacity:.85}
.dff-bub.dff-l{grid-column:1}
.dff-bub.dff-r{grid-column:3}
.dff-bub.dff-l::after, .dff-bub.dff-r::after{content:''; position:absolute; top:22px; width:28px; border-top:1px solid var(--dff-ln2)}
.dff-bub.dff-l::after{right:-29px}
.dff-bub.dff-r::after{left:-29px}
.dff-bub.dff-r::before{content:''; position:absolute; top:18px; left:-34px; border:5px solid transparent; border-left-color:var(--dff-ln2)}
.dff-bub.dff-l::before{content:''; position:absolute; top:18px; right:-34px; border:5px solid transparent; border-right-color:var(--dff-ln2)}

/* 견본 A 미리보기 카드 */
.dff-cta{margin-top:18px; display:grid; grid-template-columns:200px minmax(0,1fr); gap:22px; align-items:center; background:var(--dff-o30); border:1px solid #FFD2BF; border-radius:14px; padding:18px}
.dff-th{display:block; width:200px; height:250px; overflow:hidden; border-radius:4px; border:1px solid var(--dff-ln); background:#fff; position:relative; cursor:pointer; padding:0; text-align:left; font:inherit}
.dff-th .dff-paper{transform:scale(.27); transform-origin:top left; width:740px; max-width:none; padding:44px 48px; border:0; pointer-events:none}
.dff-th::after{content:'견본'; position:absolute; top:8px; left:8px; font-size:10.5px; background:var(--dff-k); color:#fff; border-radius:4px; padding:1px 6px; line-height:1.6}
.dff-cta-tx small{font-size:12px; color:var(--dff-o); font-weight:600}
.dff-cta-tx h5{font-size:20px; font-weight:600; margin:4px 0 8px; letter-spacing:-.02em; color:var(--dff-k); line-height:1.35}
.dff-cta-tx ul{margin:0 0 14px 16px; padding:0; font-size:13px; color:var(--dff-s); line-height:1.8; list-style:disc}
.dff-cta-tx ul li{list-style:disc}
.dff-go{display:inline-flex; align-items:center; gap:8px; background:var(--dff-o); color:#fff; border:0; border-radius:10px; font:inherit; font-size:15px; font-weight:600; padding:13px 22px; cursor:pointer; line-height:1.3}
.dff-go:hover{filter:brightness(1.06)}

/* 견본 보고서 종이 */
.dff-paper{background:#fff; border:1px solid var(--dff-ln); border-radius:4px; padding:52px 56px; color:var(--dff-k); font-size:13.5px; line-height:1.75; max-width:760px; text-align:left}
.dff-paper .dff-ph{display:flex; justify-content:space-between; align-items:flex-start; gap:20px}
.dff-paper h3{font-size:30px; font-weight:600; letter-spacing:-.02em; margin:0; color:var(--dff-k); line-height:1.3}
.dff-paper .dff-no{text-align:right; font-size:11px; color:var(--dff-m)}
.dff-paper .dff-no b{display:block; font-size:15px; color:var(--dff-k); font-weight:600}
.dff-paper .dff-lead{color:var(--dff-s); font-size:13px; margin:10px 0 26px}
.dff-paper h4{font-size:16px; font-weight:600; padding-bottom:10px; border-bottom:1px solid var(--dff-k); margin:26px 0 12px; color:var(--dff-k)}
.dff-paper h4 i{font-style:normal; color:var(--dff-o); margin-right:8px}
.dff-paper p{margin:0}
.dff-paper p+p{margin-top:10px}
.dff-paper b{font-weight:600}
.dff-paper .dff-ov{display:grid; grid-template-columns:90px 1fr 90px 1fr; font-size:13px}
.dff-paper .dff-ov span{padding:9px 6px; border-bottom:1px solid var(--dff-ln)}
.dff-paper .dff-ov > span:nth-child(odd){color:var(--dff-m)}
.dff-ex{display:inline-block; font-style:normal; font-size:10.5px; color:var(--dff-s); background:#F1EEEA; border-radius:5px; padding:1px 6px; font-weight:500; vertical-align:1px; line-height:1.5}
.dff-paper .dff-note{background:var(--dff-pp); padding:12px 16px; font-size:12.5px; color:var(--dff-s); margin-top:12px; border-radius:4px}
.dff-paper .dff-tw{overflow-x:auto}
.dff-paper table{width:100%; border-collapse:collapse; font-size:12.5px; line-height:1.65; min-width:520px}
.dff-paper th{background:#F3F1EE; font-weight:600; padding:9px 10px; border:1px solid var(--dff-ln); text-align:left}
.dff-paper td{padding:10px; border:1px solid var(--dff-ln); vertical-align:top}
.dff-paper td.dff-k{color:var(--dff-o); font-weight:600; white-space:nowrap; text-align:center}
.dff-paper td.dff-p{color:var(--dff-m); white-space:nowrap; text-align:center}
.dff-paper .dff-foot{display:flex; justify-content:space-between; gap:10px; color:var(--dff-m); font-size:11px; border-top:1px solid var(--dff-ln); padding-top:10px; margin-top:34px}

/* 견본 전체 창 */
.dff-mdl{position:fixed; inset:0; background:rgba(15,13,17,.6); z-index:100001; display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto}
.dff-mdl.dff-on{display:flex}
.dff-mdl-box{width:100%; max-width:800px; position:relative}
.dff-mdl-bar{display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:13px; margin-bottom:10px}
.dff-mdl-x{background:none; border:0; color:#fff; font-size:14px; cursor:pointer; font-family:inherit; padding:4px 0}
.dff-mdl .dff-paper{max-width:none}

/* 인터뷰 끝 블록 */
.dff-blk{border-top:1px solid var(--dff-ln2); padding-top:20px; margin-top:22px; display:grid; grid-template-columns:minmax(0,1fr); gap:12px; min-width:0}
.dff-blk > *{min-width:0}
.dff-blk h4{font-size:17px; font-weight:600; margin:0; color:var(--dff-k)}
.dff-blk h4 small{font-size:12px; font-weight:400; color:var(--dff-m); margin-left:6px}
.dff-blk > p{font-size:13px; color:var(--dff-s); line-height:1.65; margin:0}
.dff-opt{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.dff-opt label{display:flex; gap:9px; align-items:flex-start; border:1px solid var(--dff-ln2); border-radius:10px; padding:11px 12px; font-size:13px; cursor:pointer; background:#fff; line-height:1.5; color:var(--dff-k)}
.dff-opt label.dff-on{border-color:var(--dff-o); background:var(--dff-o30)}
.dff-opt input{accent-color:var(--dff-o); margin-top:3px; width:15px; height:15px; flex:none}
.dff-opt label span{flex:1}
.dff-opt small{display:block; color:var(--dff-m); font-size:11.5px}
.dff-agree{display:flex; gap:9px; align-items:flex-start; padding:9px 11px; border-radius:8px; background:var(--dff-pp); border:1px solid var(--dff-ln); font-size:12px; color:var(--dff-s); line-height:1.55; cursor:pointer}
.dff-agree input{margin-top:2px; accent-color:var(--dff-o); width:15px; height:15px; flex:none}
.dff-agree b{font-weight:500}
.dff-mailrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--dff-s)}
.dff-mailrow input{flex:1; min-width:0; width:100%; padding:9px 12px; border:1px solid var(--dff-ln2); border-radius:8px; background:var(--dff-pp); font:inherit; font-size:13.5px; color:var(--dff-k)}
.dff-mailrow input:focus{outline:none; border-color:var(--dff-o)}
.dff-mailrow button{border:0; border-radius:9px; background:var(--dff-o); color:#fff; font:inherit; font-size:13.5px; font-weight:600; padding:10px 18px; cursor:pointer}
.dff-mailrow button[disabled]{background:#D9D3CC; cursor:default}
.dff-err{display:none; margin:0; font-size:12px; color:#A32B12; background:#FBE7E1; border-radius:7px; padding:8px 11px}
.dff-done{display:none; margin:0; font-size:13px; color:var(--dff-k)}
.dff-err.dff-open, .dff-done.dff-open{display:block}

/* 상담 문의 완료 창 */
.dff-done-dim{position:fixed; inset:0; z-index:100000; background:rgba(15,13,17,.55); display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto}
.dff-thx{width:100%; max-width:860px; background:#F6F4F1; border:1px solid var(--dff-ln); border-radius:16px; padding:34px 36px 30px; position:relative}
.dff-thx-x{position:absolute; top:18px; right:18px; width:30px; height:30px; border-radius:8px; border:1px solid var(--dff-ln); background:#fff; color:var(--dff-m); cursor:pointer; display:grid; place-items:center; font-size:14px; padding:0; font-family:inherit}
.dff-thx-x:hover{color:var(--dff-k)}
.dff-ok{display:flex; gap:14px; align-items:flex-start; padding:0 40px 22px 0; border-bottom:1px solid var(--dff-ln2)}
.dff-ok i{width:40px; height:40px; border-radius:50%; background:var(--dff-o); color:#fff; display:grid; place-items:center; flex:none}
.dff-ok i svg{width:20px; height:20px}
.dff-ok h2{font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.35; margin:0; color:var(--dff-k)}
.dff-ok p{color:var(--dff-s); font-size:14px; margin:4px 0 0; line-height:1.7}
.dff-thx h3{font-size:17px; font-weight:600; margin:24px 0 4px; color:var(--dff-k)}
.dff-thx h3 small{font-size:12px; color:var(--dff-m); font-weight:400; margin-left:6px}
.dff-lead2{font-size:13px; color:var(--dff-s); margin:0 0 6px; line-height:1.65}
.dff-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.dff-btnL{display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--dff-ln2); border-radius:9px; background:#fff; color:var(--dff-k); font-size:14px; padding:10px 16px; text-decoration:none}
.dff-btnL:hover{border-color:var(--dff-k)}

/* 가견적 안 블록 */
.dff-est{margin-top:22px; padding-top:18px; border-top:1px solid #E4DFDA}
.dff-est-lead{font-size:14px; color:#1A1C23; line-height:1.65; margin:0 0 4px; font-weight:500}

@media (max-width:760px){
  .dff-ln-grid{display:none}
  .dff-ln-det{display:none}
  .dff-ln-wrap .dff-fallback{display:block}
  .dff-pp{grid-template-columns:minmax(0,1fr)}
  .dff-pp .dff-mid, .dff-pp .dff-hd{display:none}
  .dff-bub.dff-l, .dff-bub.dff-r{grid-column:1}
  .dff-bub.dff-r{margin-left:24px}
  .dff-bub.dff-l{margin-right:24px}
  .dff-bub::after, .dff-bub::before{display:none}
  .dff-cta{grid-template-columns:minmax(0,1fr); justify-items:start}
  .dff-opt{grid-template-columns:minmax(0,1fr)}
  .dff-mailrow{display:grid; grid-template-columns:minmax(0,1fr) auto}
  .dff-mailrow label{grid-column:1/-1}
  .dff-paper{padding:28px 20px}
  .dff-paper h3{font-size:24px}
  .dff-paper .dff-ov{grid-template-columns:80px 1fr}
  .dff-thx{padding:26px 18px 22px}
  .dff-ok h2{font-size:21px}
  .dff-done-dim, .dff-mdl{padding:16px 12px}
}
