/* 진단 도구 공통 — '상담 기록지' 디자인 (2026-10-09)
   사장님: "1분자가진단 디자인이 마음에 안 들어요" · "둥근 디자인이 가벼워 보이는 것 같아요" → "바꿔주세요"
           "탕감률계산기도 바꿔주세요"
   원칙: 모서리 2~4px · 그림자 대신 얇은 선과 남색 띠 · 남색/금색/종이색만 · 그라데이션 글자·알약 버튼 없음
   쓰는 곳: /자가진단(첫 화면 + 1번 질문), /자가진단위젯(2~7번 질문·결과·상담 요청), /탕감률계산기(.calc)
   글자 크기는 사이트 공통 변수(--fs-*, scripts/site-type.mjs)만 쓴다. */
body.dg-page{background:#f5efe3;color:#15202e}
.dg-in{max-width:680px;margin:0 auto;padding:0 20px}

/* ── 첫 화면 남색 띠 ── */
.dg-band{background:#15202e;color:#f5efe3;border-bottom:3px solid #a8814a;padding:40px 0 34px}
body.ty .dg-kicker{font-size:var(--fs-sm);font-weight:600;letter-spacing:.12em;color:#c8a468;margin:0 0 12px}
body.ty .dg-band h1{font-size:var(--fs-h1);font-weight:800;line-height:1.3;letter-spacing:-.025em;color:#fff;margin:0}
body.ty .dg-lead{font-size:var(--fs-lg);font-weight:400;color:#d9cdb2;line-height:1.6;margin:10px 0 0}
.dg-get{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:24px 0 0;padding:0;border:1px solid rgba(200,164,104,.45)}
.dg-get li{padding:12px 14px;border-left:1px solid rgba(200,164,104,.45)}
.dg-get li:first-child{border-left:0}
body.ty .dg-get b{display:block;font-size:var(--fs-sm);font-weight:700;color:#c8a468;letter-spacing:.06em;font-variant-numeric:tabular-nums}
body.ty .dg-get span{display:block;font-size:var(--fs-body);font-weight:600;color:#fff;margin-top:2px}
body.ty .dg-get small{display:block;font-size:var(--fs-sm);font-weight:400;color:#c9bfae;margin-top:2px}
body.ty .dg-trust{font-size:var(--fs-sm);color:#c9bfae;margin:14px 0 0;line-height:1.6}

/* ── 진행 표시: 질문 n / 7 + 7칸 막대 ── */
.dg-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:28px 0 8px}
body.ty .dg-meta{font-size:var(--fs-sm);color:#5d6b78}
body.ty .dg-meta .dg-step{font-weight:700;color:#15202e;font-variant-numeric:tabular-nums}
.dg-seg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:0 0 14px}
.dg-seg i{display:block;height:5px;background:rgba(21,32,46,.12)}
.dg-seg i.on{background:#a8814a}

/* ── 질문 기록지 ── */
.dg-sheet{background:#fff;border:1px solid rgba(21,32,46,.16);border-top:3px solid #15202e;border-radius:3px;padding:22px 20px 18px}
body.ty .dg-sheet h2{font-size:var(--fs-h2);font-weight:700;line-height:1.35;letter-spacing:-.025em;color:#15202e;margin:0 0 6px}
body.ty .dg-sheet .q-sub{font-size:var(--fs-sm);color:#5d6b78;margin:0 0 8px}
.dg-opts,.dg .choices{display:grid;gap:8px;margin-top:14px}
.dg-opt,.dg .choice-btn{appearance:none;display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff;color:#15202e;border:1px solid rgba(21,32,46,.2);border-radius:3px;padding:14px 16px;cursor:pointer;font:inherit;box-shadow:none;transform:none;transition:border-color .15s,background .15s}
.dg-opt::before,.dg .choice-btn::before{content:"";flex:none;width:20px;height:20px;border:1.5px solid rgba(21,32,46,.38);border-radius:2px;background:#fff center/14px 14px no-repeat}
.dg-opt:hover,.dg-opt:focus-visible,.dg .choice-btn:hover,.dg .choice-btn:focus-visible{border-color:#a8814a;background:#fffcf6;outline:none;transform:none}
.dg-opt.selected,.dg .choice-btn.selected{border-color:#a8814a;background:#fbf4e6;box-shadow:inset 3px 0 0 #a8814a}
.dg-opt.selected::before,.dg .choice-btn.selected::before{background-color:#a8814a;border-color:#a8814a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.dg-opt .t,.dg .choice-btn .t{display:block;min-width:0}
body.ty .dg-opt .l,body.ty .dg .choice-btn strong{display:block;font-size:var(--fs-body);font-weight:600;color:#15202e;margin:0}
body.ty .dg-opt .s,body.ty .dg .choice-btn small{display:block;font-size:var(--fs-sm);font-weight:400;color:#5d6b78;margin-top:2px;line-height:1.5}
body.ty .dg-hint{font-size:var(--fs-sm);color:#5d6b78;margin:12px 0 0}
.dg .nav-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:14px}
body.ty .dg .nav-back{appearance:none;border:0;background:none;font:inherit;font-size:var(--fs-sm);font-weight:600;color:#33414f;cursor:pointer;padding:6px 0;border-radius:0}
.dg .nav-back:hover{color:#82612f}
.dg .nav-back[disabled]{visibility:hidden}
body.ty .dg .nav-hint{font-size:var(--fs-sm);color:#5d6b78}

/* ── 결과지 ── */
.dg .result-card,.dg .lead-card,.dg .success-card{background:#fff;border:1px solid rgba(21,32,46,.16);border-radius:3px;padding:0;box-shadow:none;overflow:hidden}
.dg .r-head{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#15202e;color:#f5efe3;padding:12px 20px;border-bottom:3px solid #a8814a}
body.ty .dg .r-head{font-size:var(--fs-sm);font-weight:600;letter-spacing:.06em}
.dg .r-head span:last-child{color:#c8a468;font-variant-numeric:tabular-nums;letter-spacing:0}
.dg .r-body{padding:22px 20px 20px}
body.ty .dg .result-badge{display:inline-flex;align-items:center;gap:8px;padding:0;border-radius:0;background:none;color:#82612f;font-size:var(--fs-sm);font-weight:700;margin:0 0 8px}
.dg .result-badge::before{content:"";width:10px;height:10px;background:#a8814a}
.dg #rBadge{display:none} /* 결과 제목이 판정명(예: 개인회생 우선 검토)이라 같은 말 반복 방지 — 값은 상담 요청 요약에 그대로 씀 */
body.ty .dg .result-card h2,body.ty .dg .lead-card h2,body.ty .dg .success-card h2{font-size:var(--fs-h2);font-weight:700;line-height:1.35;letter-spacing:-.025em;color:#15202e;margin:0 0 10px}
body.ty .dg .result-card p,body.ty .dg .lead-card p,body.ty .dg .success-card p{font-size:var(--fs-body);color:#33414f;line-height:1.75;margin:0 0 14px}
.dg .tag-row{display:none}
.dg .r-why{border-left:3px solid #a8814a;background:#faf7f1;padding:9px 12px;margin:0 0 12px!important}
body.ty .dg .r-why{font-size:var(--fs-sm)!important;color:#5d6b78!important;line-height:1.7!important}
body.ty .dg .r-why b{font-weight:700;color:#15202e}
.dg .r-why:empty{display:none}
body.ty .dg .r-sub{font-size:var(--fs-body);font-weight:700;color:#15202e;margin:22px 0 8px;padding-top:16px;border-top:1px solid rgba(21,32,46,.12)}
.dg .r-answers{display:grid;grid-template-columns:auto 1fr;margin:0;border:1px solid rgba(21,32,46,.14)}
.dg .r-answers dt,.dg .r-answers dd{margin:0;padding:9px 12px;border-top:1px solid rgba(21,32,46,.1)}
.dg .r-answers dt:first-of-type,.dg .r-answers dt:first-of-type + dd{border-top:0}
body.ty .dg .r-answers dt{font-size:var(--fs-sm);font-weight:600;color:#5d6b78;background:#faf7f1;white-space:nowrap}
body.ty .dg .r-answers dd{font-size:var(--fs-body);font-weight:600;color:#15202e}
.dg .bullets{display:grid;gap:8px;padding:0;background:none;border-radius:0;margin:0}
body.ty .dg .bullet{display:flex;gap:10px;font-size:var(--fs-body);color:#33414f;line-height:1.7}
.dg .bullet::before{content:"";flex:none;width:7px;height:7px;margin-top:.62em;border-radius:0;background:#a8814a}
.dg .r-prep{list-style:none;margin:0;padding:0;display:grid;gap:8px}
body.ty .dg .r-prep li{position:relative;padding-left:30px;font-size:var(--fs-body);color:#33414f;line-height:1.7}
.dg .r-prep li::before{content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;border:1.5px solid rgba(21,32,46,.38);border-radius:2px;background:#fff}
body.ty .dg .r-prep b{color:#15202e;font-weight:700}

/* ── 버튼: 각진 사각형, 상담 하나에 집중 ── */
.dg .actions{display:grid;gap:8px;margin-top:18px}
body.ty .dg .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px 16px;border:0;border-radius:3px;font-size:var(--fs-body);font-weight:700;text-align:center;text-decoration:none;cursor:pointer;box-shadow:none;animation:none;transform:none;transition:background .15s}
.dg .btn::before{content:none}
.dg .btn:hover{transform:none}
.dg .btn.primary{background:#a8814a;color:#fff}
.dg .btn.primary:hover{background:#82612f}
body.ty .dg .btn.big{padding:18px 16px;font-size:var(--fs-lg)}
.dg .btn.navy{background:#15202e;color:#fff}
.dg .btn.navy:hover{background:#0c1722}
.dg .btn.kakao{background:#FEE500;color:#191919}
.dg .btn.ghost{background:#fff;color:#15202e;border:1px solid rgba(21,32,46,.35)}
.dg .btn[disabled]{opacity:.55;cursor:not-allowed}
.dg .r-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(21,32,46,.12)}
body.ty .dg .linkbtn{appearance:none;border:0;background:none;padding:4px 2px;font:inherit;font-size:var(--fs-sm);font-weight:600;color:#5d6b78;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dg .linkbtn:hover{color:#82612f}
body.ty .dg .r-links .sep{font-size:var(--fs-sm);color:#b8b0a2}

/* ── 상담 요청서 ── */
body.ty .dg .field label{font-size:var(--fs-sm);font-weight:700;color:#15202e}
.dg .field .req{color:#a8814a}
.dg .field input[type="text"],.dg .field input[type="tel"],.dg .field textarea,.dg .field select{border-radius:3px;border:1px solid rgba(21,32,46,.28);background:#fff;padding:12px 14px}
body.ty .dg .field input[type="text"],body.ty .dg .field input[type="tel"],body.ty .dg .field textarea,body.ty .dg .field select{font-size:var(--fs-body)}
.dg .field input:focus,.dg .field textarea:focus,.dg .field select:focus{border-color:#a8814a;box-shadow:0 0 0 3px rgba(168,129,74,.18);outline:none}
body.ty .dg .field .err,body.ty .dg .submit-error{font-size:var(--fs-sm)}
.dg .agree-box{border-radius:3px;background:#faf7f1;border:1px solid rgba(21,32,46,.14)}
body.ty .dg .agree-row{font-size:var(--fs-sm)}
body.ty .dg .agree-detail,body.ty .dg .agree-detail li,body.ty .dg .legal-note,body.ty .dg .footer-note{font-size:var(--fs-sm)}
.dg .agree-row input{accent-color:#a8814a}
.dg .legal-note{border-radius:0;background:#faf7f1;border-left:3px solid #a8814a}
.dg .submit-error{border-radius:3px}
.dg .success-card{text-align:center}
.dg .success-card .r-body{padding-top:26px}
.dg .success-icon{width:52px;height:52px;border-radius:3px;background:#15202e;color:#c8a468;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.dg .success-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ── 탕감률 계산기 ── */
.calc .calc-sheet{margin-top:24px}
.calc .field{margin-bottom:18px}
body.ty .calc .field label{display:block;font-size:var(--fs-body);font-weight:700;color:#15202e;margin-bottom:8px}
body.ty .calc .field .hint{font-size:var(--fs-sm);font-weight:400;color:#5d6b78;margin-left:4px}
.calc .input-row{display:flex;align-items:center;gap:10px}
.calc .input-row input[type="number"]{flex:1;width:100%;min-width:0;text-align:right;padding:13px 14px;border:1px solid rgba(21,32,46,.28);border-radius:3px;background:#fff;color:#15202e;-moz-appearance:textfield;font-variant-numeric:tabular-nums}
body.ty .calc .input-row input[type="number"]{font-size:var(--fs-lg);font-weight:700}
.calc .input-row input::-webkit-outer-spin-button,.calc .input-row input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc .input-row input:focus{outline:none;border-color:#a8814a;box-shadow:0 0 0 3px rgba(168,129,74,.18)}
body.ty .calc .input-row .unit{flex:none;min-width:34px;font-size:var(--fs-body);font-weight:700;color:#5d6b78}
.calc .stepper{display:flex;align-items:center;border:1px solid rgba(21,32,46,.28);border-radius:3px;overflow:hidden;background:#fff}
body.ty .calc .stepper button{flex:none;width:54px;height:50px;border:0;background:#f5efe3;color:#15202e;font-size:var(--fs-h2);font-weight:700;line-height:1;cursor:pointer}
.calc .stepper button:hover{background:#ece3d2}
body.ty .calc .stepper .val{flex:1;text-align:center;font-size:var(--fs-lg);font-weight:700;color:#15202e;font-variant-numeric:tabular-nums}
body.ty .calc .calc-btn{display:block;width:100%;margin-top:6px;padding:17px;border:0;border-radius:3px;background:#a8814a;color:#fff;font-size:var(--fs-lg);font-weight:700;cursor:pointer;box-shadow:none;transform:none}
.calc .calc-btn:hover{background:#82612f}
.calc .result{display:none;margin-top:18px}
.calc .result.show{display:block;animation:dgIn .3s ease both}
@keyframes dgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
body.ty .calc .result-hero .label{font-size:var(--fs-sm);font-weight:600;color:#5d6b78}
body.ty .calc .result-hero .rate{font-size:var(--fs-display);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:#15202e;font-variant-numeric:tabular-nums}
.calc .result-hero .rate .pct{font-size:.55em;margin-left:2px;color:#82612f}
body.ty .calc .result-warn-title{font-size:var(--fs-h2);font-weight:700;color:#15202e;margin-top:4px}
.calc .result-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:16px;border:1px solid rgba(21,32,46,.14)}
.calc .result-grid:empty{display:none}
.calc .result-box{padding:12px 14px;background:#fff;border-top:1px solid rgba(21,32,46,.1);border-left:1px solid rgba(21,32,46,.1)}
.calc .result-box:nth-child(-n+2){border-top:0}
.calc .result-box:nth-child(odd){border-left:0}
body.ty .calc .result-box b{display:block;font-size:var(--fs-sm);font-weight:600;color:#5d6b78;margin-bottom:4px}
body.ty .calc .result-box strong{font-size:var(--fs-lg);font-weight:700;color:#15202e;font-variant-numeric:tabular-nums}
.calc .result-note{margin-top:14px;padding:10px 12px;border-left:3px solid #a8814a;background:#faf7f1}
body.ty .calc .result-note{font-size:var(--fs-sm);color:#33414f;line-height:1.7}
.calc .result-note.result-warn{border-left-color:#b3261e;background:#fbf1ef;color:#7a1f17}
.calc .nudge{margin-top:18px;padding:20px 18px;border-radius:3px;background:#15202e;color:#f5efe3;border-top:3px solid #a8814a}
body.ty .calc .nudge h3{font-size:var(--fs-lg);font-weight:700;color:#fff;margin:0 0 6px}
body.ty .calc .nudge p{font-size:var(--fs-sm);color:#d9cdb2;line-height:1.7}
body.ty .calc .nudge p b{color:#fff;font-weight:700}
.calc .lock-list{list-style:none;margin:10px 0 4px;padding:0}
body.ty .calc .lock-list li{position:relative;padding-left:18px;margin:4px 0;font-size:var(--fs-sm);color:#f5efe3;line-height:1.6}
.calc .lock-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:#c8a468}
body.ty .calc .nudge-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:15px;border:0;border-radius:3px;background:#a8814a;color:#fff;font-size:var(--fs-body);font-weight:700;cursor:pointer;transform:none}
.calc .nudge-btn:hover{background:#82612f}
.calc .lead-form{display:none;margin-top:14px}
.calc .lead-form.show{display:block}
.calc .lead-form input,.calc .lead-form textarea{display:block;width:100%;padding:12px 13px;border:1px solid rgba(255,255,255,.25);border-radius:3px;background:#fff;color:#15202e;margin-bottom:9px;font-family:inherit}
body.ty .calc .lead-form input,body.ty .calc .lead-form textarea{font-size:var(--fs-body)}
.calc .lead-form textarea{resize:vertical;min-height:56px}
.calc .lead-form input:focus,.calc .lead-form textarea:focus{outline:none;border-color:#c8a468}
body.ty .calc .lead-reassure{font-size:var(--fs-sm);color:#d9cdb2;margin-bottom:10px}
body.ty .calc .lead-submit{display:block;width:100%;padding:15px;border:0;border-radius:3px;background:#a8814a;color:#fff;font-size:var(--fs-body);font-weight:700;cursor:pointer}
.calc .lead-submit:disabled{opacity:.6;cursor:not-allowed}
.calc .lead-msg{margin-top:12px;padding:12px;border-radius:3px;text-align:center}
body.ty .calc .lead-msg{font-size:var(--fs-sm);font-weight:700}
.calc .lead-msg.ok{background:rgba(255,255,255,.12);color:#f5efe3}
.calc .lead-msg.err{background:rgba(179,38,30,.3);color:#ffd9d4}
.calc .honeypot{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.calc .self-apply{margin-top:16px;text-align:center}
body.ty .calc .self-apply a{font-size:var(--fs-sm);font-weight:600;color:#5d6b78;text-decoration:underline;text-underline-offset:3px}
.calc .self-apply a:hover{color:#82612f}
body.ty .calc .disclaimer{font-size:var(--fs-sm);color:#5d6b78;text-align:center;line-height:1.7;margin:22px 0 0}
body.ty .calc .kakao-link{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:var(--fs-body);font-weight:700;color:#82612f;text-decoration:none}

/* ── 첫 화면 아래 포스터도 같은 각진 모양(이 페이지만) ── */
body.dg-page .ps{border-radius:3px}
body.dg-page .ps .tag,body.dg-page .ps .b1,body.dg-page .ps .b2{border-radius:3px}

/* 다른 사이트 안에 넣어 쓸 때(iframe)는 상단바를 숨긴다 */
html.in-frame .sh{display:none}

@media(max-width:820px){
  .dg-band{padding:28px 0 24px}
  .dg-get{margin-top:18px}
  .dg-get li{padding:10px 10px}
  body.ty .dg-get span{font-size:var(--fs-sm)}
  .dg-get small{display:none!important}
  .dg-meta{margin-top:20px}
  .dg-sheet{padding:18px 16px 16px}
  .dg-opt,.dg .choice-btn{padding:13px 14px;gap:12px}
  .dg .r-body{padding:18px 16px 16px}
}
@media(prefers-reduced-motion:reduce){.dg *{transition:none!important;animation:none!important}}