/* =============================================================
   마지막 창 맥 시트 — 관리자 테스트 환경 전환 · 광고상품 상세(새 상세 · 옛 상세 두 모양 모두).
   마크업은 그대로(이모지 → 글자만), 이 두 창 id 안쪽만 덮는다. 값은 ui-tokens.css 에서만. 화면에서만(인쇄 그대로).
   흰 시트 · 뒤 배경 옅게(흐림 없음) · 제목 17px(앞 아이콘 숨김) · 닫기 회색 동그라미 · 칸 28px ·
   파랑/초록/보라/노랑 색 상자 → 회색 묶음(금액만 진하게) · 채운 파랑은 [적용] · 옛 상세 [확인] 하나.
   옛 상세는 style="" 로 그려서 !important 로 덮는다. 휴대폰: 아래에서 올라오는 시트.
   되돌리기: index.tsx 의 이 파일 <link> 한 줄.
   ============================================================= */
@media screen {
/* 뒤 배경 · 시트 */
html #admin-test-profile-modal, html #detail-popup-overlay{ background:var(--ui-scrim) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important }
html #admin-test-profile-modal *, html #detail-popup-overlay *{ font-family:var(--ui-font) }
html #admin-test-profile-modal > div, html #detail-popup-overlay > div{ border:0 !important; border-radius:var(--ui-radius-sheet) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-sheet) !important; color:var(--ui-text-1) }
/* 제목 */
html #admin-test-profile-modal h3, html #detail-popup-overlay h3{ margin:0 !important; font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #admin-test-profile-modal h3 > i.fas{ display:none }
/* 머리 줄 */
html #admin-test-profile-modal > div > div{ padding:0 !important }
html #admin-test-profile-modal > div > div > div:first-child{ margin:0 !important; min-height:44px; padding:8px 10px 8px 16px; border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #admin-test-profile-modal form{ padding:14px 16px 0 }
/* 광고상품 상세 — 맥 정보 창(이름 머리 · 가격 두 칸 · 정보 목록 · 글 묶음 · 링크 목록) */
html #detail-popup-overlay > .adm-sheet{ display:flex; flex-direction:column; width:100%; max-width:520px; max-height:86vh; overflow:hidden; background:var(--ui-bg) !important }
html #detail-popup-overlay .adm-head{ display:flex; align-items:flex-start; gap:12px; padding:14px 12px 12px 18px; background:var(--ui-surface); border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #detail-popup-overlay .adm-head-text{ flex:1; min-width:0 }
html #detail-popup-overlay .adm-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; overflow-wrap:anywhere }
html #detail-popup-overlay .adm-sub{ margin:2px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--ui-text-footnote); color:var(--ui-text-2); font-variant-numeric:tabular-nums }
html #detail-popup-overlay .adm-close{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:22px; height:22px; margin-top:1px; padding:0; border:0; border-radius:50%; background:var(--ui-fill); color:var(--ui-text-2); font-size:var(--ui-text-callout); line-height:1; cursor:pointer }
html #detail-popup-overlay .adm-close:hover{ background:var(--ui-fill-hover) }
html #detail-popup-overlay .adm-body{ flex:1; min-height:0; overflow-y:auto; padding:14px 16px 12px; overscroll-behavior:contain }
html #detail-popup-overlay .adm-body > * + *{ margin-top:12px }
html #detail-popup-overlay .adm-group{ border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line) }
html #detail-popup-overlay .adm-row{ display:flex; align-items:center; gap:10px; min-height:34px; margin-left:12px; padding:6px 12px 6px 0; border-top:var(--ui-hairline) solid var(--ui-line); font-size:var(--ui-text-body); color:var(--ui-text-1) }
html #detail-popup-overlay .adm-row:first-child{ border-top:0 }
html #detail-popup-overlay .adm-row-label{ flex:none }
html #detail-popup-overlay .adm-row-value{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; color:var(--ui-text-2) }
html #detail-popup-overlay .adm-prices{ display:grid; grid-template-columns:1fr 1fr }
html #detail-popup-overlay .adm-price{ display:flex; flex-direction:column; gap:2px; min-width:0; padding:10px 14px }
html #detail-popup-overlay .adm-price + .adm-price{ border-left:var(--ui-hairline) solid var(--ui-line) }
html #detail-popup-overlay .adm-price-label{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #detail-popup-overlay .adm-price-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--ui-text-title1); font-weight:var(--ui-weight-semibold); letter-spacing:-.01em; color:var(--ui-text-1); font-variant-numeric:tabular-nums }
html #detail-popup-overlay .adm-sec-title{ margin:0 0 5px 12px; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular); color:var(--ui-text-2) }
html #detail-popup-overlay .adm-text{ padding:9px 12px; white-space:pre-line; font-size:var(--ui-text-body); line-height:1.55; color:var(--ui-text-1); overflow-wrap:anywhere }
html #detail-popup-overlay .adm-link{ text-decoration:none }
html #detail-popup-overlay .adm-link > i{ flex:none; font-size:var(--ui-text-caption); color:var(--ui-text-3) }
html #detail-popup-overlay .adm-link-title{ flex:none; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ui-accent-text) }
html #detail-popup-overlay .adm-link:hover .adm-link-title{ text-decoration:underline }
html #detail-popup-overlay .adm-photo-main{ height:200px; overflow:hidden; border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line) }
html #detail-popup-overlay .adm-photo-main img{ display:block; width:100%; height:100%; object-fit:contain }
html #detail-popup-overlay .adm-photo-empty{ display:flex; align-items:center; justify-content:center; height:100%; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #detail-popup-overlay .adm-thumbs{ display:flex; gap:6px; margin-top:6px; overflow-x:auto }
html #detail-popup-overlay .adm-thumb{ flex:none; width:44px; height:44px; object-fit:cover; border:2px solid transparent; border-radius:var(--ui-radius-control); cursor:pointer }
html #detail-popup-overlay .adm-thumb.border-blue-500{ border-color:var(--ui-accent) }
html #detail-popup-overlay .adm-foot{ margin:14px 0 0 12px; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #detail-popup-overlay .adm-actions{ display:flex; justify-content:flex-end; padding:10px 16px; background:var(--ui-surface); border-top:var(--ui-hairline) solid var(--ui-line) }
html #detail-popup-overlay .adm-ok{ height:var(--ui-control); padding:0 18px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-accent); color:var(--ui-on-accent); font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold); cursor:pointer }
html #detail-popup-overlay .adm-ok:hover{ background:var(--ui-accent-hover) }
html #detail-popup-overlay .adm-ok:focus-visible, html #detail-popup-overlay .adm-close:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
/* 칸 */
html #admin-test-profile-modal label.block{ margin-bottom:4px !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #admin-test-profile-modal .grid{ gap:10px 12px !important }
html #admin-test-profile-modal select{ height:var(--ui-control) !important; min-height:0 !important; padding:0 8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background-color:var(--ui-surface) !important; box-shadow:var(--ui-elev-field) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important }
html #admin-test-profile-modal select:focus{ outline:none !important; box-shadow:var(--ui-focus-ring) !important }
html #admin-test-profile-modal #admin-test-profile-status{ border:0 !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-fill-subtle) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
/* 바닥 단추 줄 */
html #admin-test-profile-modal form > div:last-child{ margin:14px -16px 0 !important; padding:10px 16px !important; border-top:var(--ui-hairline) solid var(--ui-line) }
/* 단추: 흰 단추가 기본, 채운 파랑은 [적용] · 옛 상세 [확인] 하나 */
html #admin-test-profile-modal form button{ display:inline-flex; align-items:center; justify-content:center; height:var(--ui-control) !important; min-height:0 !important; padding:0 14px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important }
html #admin-test-profile-modal form button[type="submit"]{ background:var(--ui-accent) !important; box-shadow:none !important; color:var(--ui-on-accent) !important; font-weight:var(--ui-weight-semibold) !important }
html #admin-test-profile-modal form button[type="submit"]:hover{ background:var(--ui-accent-hover) !important }
html #admin-test-profile-modal form button > i.fas{ display:none }
html #admin-test-profile-modal button:focus-visible, html #detail-popup-overlay button:focus-visible{ outline:none !important; box-shadow:var(--ui-focus-ring) !important }
/* 닫기: 회색 동그라미 */
html #admin-test-profile-modal > div > div > div:first-child > button{ display:inline-flex !important; align-items:center; justify-content:center; flex:none; width:22px !important; height:22px !important; min-height:0 !important; padding:0 !important; border:0 !important; border-radius:50% !important; background:var(--ui-fill) !important; box-shadow:none !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-callout) !important; line-height:1 !important }
html #admin-test-profile-modal > div > div > div:first-child > button i{ font-size:var(--ui-text-caption) !important }
html #admin-test-profile-modal > div > div > div:first-child > button:hover{ background:var(--ui-fill-hover) !important }
}
@media screen and (max-width:767px){
  html #admin-test-profile-modal.active, html #detail-popup-overlay{ align-items:flex-end !important; padding:0 !important }
  html #admin-test-profile-modal > div, html #detail-popup-overlay > div{ width:100% !important; max-width:none !important; margin:0 !important; max-height:92vh !important; max-height:92dvh !important; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 !important; padding-bottom:env(safe-area-inset-bottom) }
  html #admin-test-profile-modal select{ height:var(--ui-control-mobile) !important; font-size:16px !important }
  html #admin-test-profile-modal form > div:last-child button{ height:44px !important }
  html #detail-popup-overlay .adm-head{ position:relative; padding-top:20px }
  html #detail-popup-overlay .adm-head::before{ content:""; position:absolute; top:6px; left:50%; width:36px; height:5px; margin-left:-18px; border-radius:3px; background:var(--ui-fill-hover) }
  html #detail-popup-overlay .adm-row{ min-height:36px }
  html #detail-popup-overlay .adm-link{ min-height:44px }
  html #detail-popup-overlay .adm-price-value{ font-size:var(--ui-text-title2) }
  html #detail-popup-overlay .adm-close{ width:30px; height:30px }
}
@media screen and (max-width:767px){ html #detail-popup-overlay .adm-ok{ flex:1; height:44px } }
