/* 스마트 설명회 페이지: solution_eregi.css, solution_translation.css 위에 휴대폰 화면 부품만 더한다 */
.ad_flow_note { text-align: center; margin-top: 26px; }

.ad-side { display: grid; gap: 9px; width: 216px; min-width: 0; }
.ad-ph { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 0; padding: 30px 12px 14px; word-break: keep-all; color: var(--rd-navy, #0B1B3B); }
.ad-ph-k { font-size: 11px; font-weight: 800; letter-spacing: -.01em; color: #1A4FD6; }
.ad-ph-t { font-size: 15.5px; font-weight: 800; line-height: 1.35; letter-spacing: -.03em; }
.ad-ph-m { font-size: 11.5px; line-height: 1.5; color: #5B6B82; }
.ad-ph-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; }
.ad-ph-btn { margin-top: 4px; padding: 11px 6px; border-radius: 10px; background: #1A4FD6; text-align: center; font-size: 12.5px; font-weight: 800; color: #fff; }
.ad-ph-btn.is-off { background: #E4E9F1; color: #7A889C; }
.ad-ph-f { padding: 7px 10px; border: 1px solid #DDE4EF; border-radius: 9px; font-size: 12.5px; font-weight: 600; min-height: 46px; }
.ad-ph-f small { display: block; margin-bottom: 1px; font-size: 10.5px; font-weight: 500; color: #7A889C; }
.ad-ph-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.ad-ph-grid > div { padding: 8px; border-radius: 9px; background: #F4F7FB; text-align: center; }
.ad-ph-grid small { display: block; font-size: 10.5px; color: #66758C; }
.ad-ph-grid b { display: block; margin-top: 2px; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ad-ph-big { padding: 2px 0; text-align: center; font-size: 15px; font-weight: 700; }
.ad-ph-big b { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: #1A4FD6; font-variant-numeric: tabular-nums; }
.ad-ph-ok { padding: 10px; border-radius: 10px; background: #E3F7EF; font-size: 12px; font-weight: 700; line-height: 1.45; color: #047857; }
.ad-ph-ok i { margin-right: 5px; }
.ad-ph-res { padding: 11px; border-radius: 10px; background: #FFF1E2; text-align: center; color: #C2570C; }
.ad-ph-res small { display: block; font-size: 11px; }
.ad-ph-res b { font-size: 19px; font-weight: 800; }
.ad-ph-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: auto -6px -8px; padding: 7px; border-radius: 10px; background: #E9EDF3; }
.ad-ph-keys i { height: 20px; border-radius: 5px; background: #fff; }

.ad-cd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ad-cd span { padding: 9px 2px; border-radius: 9px; background: #0B1B3B; text-align: center; font-size: 10.5px; color: #B9C6DC; }
.ad-cd b { display: block; font-size: 21px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }

.ad-code { padding: 10px; border-radius: 10px; background: #0B1B3B; text-align: center; font-size: 25px; font-weight: 800; letter-spacing: .1em; color: #fff; font-variant-numeric: tabular-nums; }
.ad-digits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ad-digits span { padding: 9px 0; border: 1.5px solid #1A4FD6; border-radius: 9px; background: #F3F6FF; text-align: center; font-size: 18px; font-weight: 800; color: #1A4FD6; font-variant-numeric: tabular-nums; }

.ad-timer { display: flex; align-items: baseline; justify-content: space-between; }
.ad-timer small { font-size: 11.5px; color: #66758C; }
.ad-timer b { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: #C2570C; font-variant-numeric: tabular-nums; }

.ad-check { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; }
.ad-check i { color: #1A4FD6; }
.ad-check.sub { padding-left: 4px; font-size: 11.5px; font-weight: 500; color: #5B6B82; }
.ad-check.sub i { font-size: 11px; color: #10B981; }

.ad-ok { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #10B981; font-size: 25px; color: #fff; }
.ad-ok.warn { width: 40px; height: 40px; background: #F59E0B; font-size: 17px; }
.ad-mini { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px; border: 1px solid #E5EAF2; border-radius: 12px; background: #fff; text-align: center; word-break: keep-all; }
.ad-mini b { font-size: 16px; font-weight: 800; color: #C2570C; }
.ad-mini small { font-size: 12px; line-height: 1.5; color: #66758C; }

.ad-num { font-size: 13px; font-weight: 700; }
.ad-num b { display: inline; margin-right: 2px; font-size: 25px; font-weight: 800; color: #1A4FD6; font-variant-numeric: tabular-nums; }

.ad-seats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; padding: 12px; border-radius: 10px; background: #F4F7FB; }
.ad-seats i { aspect-ratio: 1; border-radius: 5px; background: #1A4FD6; }
.ad-seats i.out { background: transparent; box-shadow: inset 0 0 0 1.5px #93A5C0; }

.ad-notice { padding: 11px 13px; border-radius: 10px; background: #C81E1E; font-size: 13px; font-weight: 700; line-height: 1.5; color: #fff; word-break: keep-all; }
.ad-notice i { margin-right: 7px; }

.ad-file { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #E5EAF2; border-radius: 12px; background: #fff; }
.ad-file > i { font-size: 30px; color: #059669; }
.ad-file b { display: block; font-size: 14px; font-weight: 800; word-break: break-all; }
.ad-file small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: #66758C; word-break: keep-all; }

@media (max-width: 768px) {
  .ad-ph { padding: 28px 11px 12px; gap: 8px; }
  .ad-ph-big b { font-size: 38px; }
  .ad-seats { gap: 4px; padding: 9px; }
}