/* 내 사업 노출 진단 공통 화면 (diag-flow.js 가 메인·진단 페이지에 붙인다)
   진행 팝업 · 결과 알림 받기 · 닫기 확인 · 입력칸 아래 안내 배지. 두 페이지 스타일과 섞이지 않게 dg- 이름만 쓴다 */
.dg-bg { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; background: rgba(28, 25, 22, 0.6); backdrop-filter: blur(7px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 320ms; }
/* 닫힌 창은 visibility 로도 숨긴다 (흐림 효과가 있는 창이 투명도 0 에서도 비쳐 보이는 문제, 11/4 확인) */
.dg-bg.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; }
.dg-bg--top { z-index: 92; }
.dg-bg--top2 { z-index: 94; }
.dg-modal { position: relative; width: min(468px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 32px 36px 32px; border: 1px solid #33312d; border-radius: 14px; background: #14130f; color: #efede6; font-family: inherit; text-align: left; box-shadow: 0 22px 54px rgba(28, 25, 22, 0.6); transform: translateY(14px); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.dg-bg.is-open .dg-modal { transform: none; }
/* 페이지 기본 여백만 지운다 (:where = 우선순위 0, 아래 각 요소 여백이 이긴다) */
:where(.dg-modal) :where(p, h3, ol, ul, dl, dd) { margin: 0; padding: 0; }
:where(.dg-modal) :where(ol, ul) { list-style: none; }
.dg-x { position: absolute; top: 24px; right: 22px; width: 30px; height: 30px; border: 0; background: none; color: #8f8c85; font-size: 18px; cursor: pointer; }
.dg-x:hover { color: #efede6; }
.dg-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: #c8a97e; }
.dg-title { margin-top: 6px; font-size: 22px; line-height: 1.4; font-weight: 700; color: #efede6; }
.dg-p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: #b0aca3; }

/* 버튼 (두 페이지의 .btn 과 섞이지 않게 따로) */
.dg-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; padding: 0 20px; border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 180ms, border-color 180ms, color 180ms; }
.dg-btn--gold { background: #c8a97e; color: #211c17; }
.dg-btn--gold:hover { background: #dcc39c; }
.dg-btn--line { border-color: #4a4640; background: transparent; color: #efede6; }
.dg-btn--line:hover { border-color: #8f8c85; }
.dg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }

/* 진행 팝업 */
.mp-bar { height: 5px; margin-top: 20px; border-radius: 89px; background: #26241f; overflow: hidden; }
.mp-bar i { display: block; height: 100%; width: 100%; background: #c8a97e; transform: scaleX(0); transform-origin: left; transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); }
.mp-steps { margin-top: 18px; display: grid; gap: 14px; }
.mp-steps li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; color: #615e59; }
.mp-steps li > i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #3a3833; transition: all 320ms; }
.mp-steps b { font-size: 14px; font-weight: 500; }
.mp-steps p { font-size: 12px; color: #8f8c85; }
.mp-steps em { font-style: normal; font-size: 12px; }
.mp-steps li.is-doing, .mp-steps li.is-done { color: #efede6; }
.mp-steps li.is-doing > i { border-color: #c8a97e; animation: dg-pulse 1.2s infinite; }
.mp-steps li.is-doing em, .mp-steps li.is-done em { color: #c8a97e; }
.mp-steps li.is-done > i { border-color: #c8a97e; background: #c8a97e; }
@keyframes dg-pulse { 50% { opacity: 0.3; } }
.mp-live { margin-top: 20px; padding-top: 14px; border-top: 1px solid #2a2824; }
.mp-live__h { display: flex; justify-content: space-between; font-size: 12px; color: #8f8c85; }
.mp-live__h b { color: #efede6; font-weight: 700; }
.mp-kws { display: grid; gap: 2px; min-height: 120px; margin-top: 10px; }
.mp-kws li { padding: 5px 0; font-size: 14px; color: #b0aca3; animation: dg-kw 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.mp-kws li:first-child { color: #efede6; }
.mp-kws li:nth-child(4) { opacity: 0.55; } .mp-kws li:nth-child(5) { opacity: 0.25; }
@keyframes dg-kw { from { opacity: 0; transform: translateY(-6px); } }
.mp-note { margin-top: 12px; padding: 12px 14px; border-radius: 6px; background: #1d1b18; font-size: 12.5px; line-height: 1.65; color: #b0aca3; }

/* 팝업 안 상태 배지: 대기열 순서, 이어서 확인, AI 다시 묻기 */
.dg-state { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(200, 169, 126, 0.35); border-radius: 6px; background: rgba(200, 169, 126, 0.08); font-size: 13.5px; line-height: 1.6; color: #efede6; }
.dg-state[hidden] { display: none; }
.dg-state .dg-note__i { color: #c8a97e; }
.dg-state[data-tone='warn'] { border-color: rgba(217, 139, 95, 0.45); background: rgba(217, 139, 95, 0.08); }
.dg-state[data-tone='warn'] .dg-note__i { color: #d98b5f; }

/* 진단 입력칸: 리포트 받을 번호 · 개인정보 동의 (메인·진단 페이지 공통, 밝은·어두운 바탕 모두 글자색은 바탕을 따른다) */
.dg-agree { display: grid; gap: 8px; margin: 4px 0 2px; font-size: 13px; line-height: 1.6; text-align: left; }
.dg-agree__p { margin: 0; opacity: 0.75; }
.dg-agree__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dg-agree__c { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.dg-agree__c input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #b08d55; }
.dg-agree__c b { color: #b08d55; font-weight: 700; }
.dg-agree__more { flex: none; padding: 2px 0; border: 0; background: none; color: inherit; font: inherit; font-size: 12.5px; opacity: 0.7; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dg-agree.is-err .dg-agree__c span { color: #c0574b; }
.dg-terms { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border-radius: 6px; background: rgba(128, 120, 105, 0.12); font-size: 12.5px; }
.dg-terms[hidden] { display: none; }
.dg-terms div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.dg-terms dt { opacity: 0.6; }
.dg-terms dd { margin: 0; }
.mp-note b { color: #c8a97e; font-weight: 700; }

/* 입력칸 아래 안내 배지 (밝은 바탕·어두운 바탕 모두: 글자색은 바탕을 따르고, 테두리·아이콘만 색) */
.dg-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid rgba(176, 141, 85, 0.45); border-radius: 6px; background: rgba(176, 141, 85, 0.1); font-size: 14px; line-height: 1.6; color: inherit; text-align: left; }
.dg-note p { flex: 1; margin: 0; }
.dg-note__i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 2px; color: #b08d55; }
.dg-note__i svg { width: 18px; height: 18px; }
.dg-note--ok { border-color: rgba(63, 138, 87, 0.45); background: rgba(63, 138, 87, 0.1); }
.dg-note--ok .dg-note__i { color: #3f8a57; }
.dg-note--warn { border-color: rgba(194, 122, 63, 0.5); background: rgba(194, 122, 63, 0.1); }
.dg-note--warn .dg-note__i { color: #c27a3f; }
.dg-note--error { border-color: rgba(192, 87, 75, 0.5); background: rgba(192, 87, 75, 0.1); }
.dg-note--error .dg-note__i { color: #c0574b; }
.dg-note__act { flex: none; align-self: center; padding: 7px 12px; border: 1px solid currentColor; border-radius: 6px; font-size: 13px; font-weight: 700; color: inherit; text-decoration: none; white-space: nowrap; }
.dg-note__act:hover { opacity: 0.75; }

/* 토스트 아이콘: 긴 문장에도 찌그러지지 않게 */
.toast i { flex: none; }
.toast i[data-tone='warn'] { background: #d98b5f; color: #211c17; }

@media (max-width: 860px) {
  #m-progress, #m-notify { place-items: start center; padding: 24px 16px; overflow-y: auto; }
  .dg-modal { width: 100%; max-height: none; margin: 0 auto; padding: 28px 22px 22px; border-radius: 12px; }
  .dg-x { top: 18px; right: 14px; }
  .dg-eyebrow { font-size: 13px; letter-spacing: 0; }
  .dg-title { margin-top: 12px; }
  .mp-steps b { font-size: 15px; }
  .mp-steps p, .mp-steps em { font-size: 12.5px; }
  .mp-live__h { font-size: 13px; }
  .mp-kws { min-height: 0; gap: 0; margin-top: 8px; }
  .mp-kws li { padding: 4px 0; line-height: 1.4; }
  .mp-note { margin-top: 16px; padding: 14px; border-radius: 8px; font-size: 13px; }
  .dg-btn { min-height: 52px; }
  .dg-note__act { padding: 6px 10px; }
}

/* 아카데미 DAY 공지 (메인·진단 페이지 입력칸 아래) */
.dg-event { margin: 0 0 16px; font-size: 13.5px; }

/* 아카데미 로고 글자: "이상한 아카데미" 중 아카데미는 가는 글씨 (11/4) */
.site-acad { font-weight: 400; }

/* 줄바꿈 가독성 (11/4): 마지막 줄에 한 단어만 남지 않게, 제목은 줄 길이를 고르게 (지원하는 브라우저에서만, 나머지는 그대로) */
p, li, dd, small, .dg-note p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
/* 결과지(.bf)는 피그마처럼 줄을 채워 쓰지만, 홈페이지 점검 설명 줄은 마지막 단어가 혼자 남지 않게 (11/4) */
.bf .bf-fix small, .bf .bf-fix p { text-wrap: pretty; }