/* =============================================================
   릴리스 승인 · 브랜드키트 — 맥 고밀도형 (사용자 2026-11-02 "1")
   범위: #release_changes-content · #brandkit-content 안쪽만. 화면에서만.
   릴리스: 검은 큰 상자(제목이 검은 바탕에 진한 글자로 거의 안 보였음 — 공용 toss 제목색이 흰 글자를 덮음)
          → 흰 바탕 얇은 머리. 숫자 4칸 → 한 줄 묶음, 단계 안내 4카드 → 한 줄 묶음, 빈 화면 상자 → 짧은 글.
          채운 파랑은 '변경안 만들기' 하나(작성 창이 열리면 '변경안 저장' 하나). 카드 안 승인 · 적용은 흰 단추 + 뜻 색 글자.
   브랜드키트: 바깥 흰 상자 안 카드(두 겹) → 한 겹, 초록으로 꽉 찬 사용 중 칸 → 옅은 회색 + 초록 점 글자,
          10px 글자 → 11px 이상, 이전 버전 줄 32px(휴대폰 44px), 안내 파란 상자 → 회색 글.
   누르면 하는 일 · 업로드 · 교체 · 삭제 · 승인 · 적용은 그대로.
   ============================================================= */
@media screen{
/* ================= 릴리스 승인 ================= */
html #release_changes-content #release-changes-main{ font-family:var(--ui-font); color:var(--ui-text-1) }
html #release_changes-content #release-changes-main > .max-w-6xl{ padding-bottom:24px !important }
/* 머리: 검은 상자 → 바탕 위 제목 + 도구 */
html #release_changes-content .rc-hero{ padding:4px 0 0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:var(--ui-text-1) !important }
html #release_changes-content .rc-hero > .flex:first-child{ gap:8px !important; align-items:flex-end }
html #release_changes-content .rc-hero h2{ font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important; line-height:1.3 }
html #release_changes-content .rc-hero h2 > i{ display:none !important }
html #release_changes-content .rc-hero p{ margin-top:2px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; line-height:1.45 }
html #release_changes-content .rc-hero > .flex:first-child > .flex{ gap:6px !important }
html #release_changes-content .rc-hero button{ height:28px; padding:0 12px !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-callout) !important; font-weight:var(--ui-weight-regular) !important; transform:none !important }
html #release_changes-content .rc-hero button:hover{ background:var(--ui-fill-subtle) !important }
html #release_changes-content .rc-hero button > i{ margin-right:5px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) }
html #release_changes-content .rc-hero button[data-release-action="open-create"]{ background:var(--ui-accent) !important; box-shadow:none !important; color:var(--ui-on-accent) !important; font-weight:var(--ui-weight-semibold) !important }
html #release_changes-content .rc-hero button[data-release-action="open-create"]:hover{ background:var(--ui-accent-hover) !important }
html #release_changes-content .rc-hero button[data-release-action="open-create"] > i{ color:var(--ui-on-accent) !important }
/* 작성 창이 열려 있으면 채운 파랑은 '변경안 저장' 하나 */
html #release_changes-content #release-changes-main:has(#release-change-create-form) .rc-hero button[data-release-action="open-create"]{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-weight:var(--ui-weight-regular) !important }
html #release_changes-content #release-changes-main:has(#release-change-create-form) .rc-hero button[data-release-action="open-create"] > i{ color:var(--ui-text-2) !important }
/* 숫자 4칸 → 한 줄 묶음 */
html #release_changes-content .rc-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:0 !important; margin-top:12px !important; border-radius:var(--ui-radius-group); box-shadow:0 0 0 .5px var(--ui-line); background:var(--ui-surface); overflow:hidden }
html #release_changes-content .rc-stats > div{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-height:32px; padding:5px 12px !important; line-height:1.3; border-radius:0 !important; background:transparent !important }
html #release_changes-content .rc-stats > div + div{ box-shadow:inset .5px 0 var(--ui-line) }
html #release_changes-content .rc-stats > div > span{ display:inline !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #release_changes-content .rc-stats > div > strong{ line-height:1.3; color:var(--ui-text-1) !important; font-size:var(--ui-text-title3) !important; font-weight:var(--ui-weight-semibold) !important; font-variant-numeric:tabular-nums }
/* 단계 안내 4카드 → 한 줄 묶음 */
html #release_changes-content .rc-steps{ gap:0 !important; margin-top:8px !important; border-radius:var(--ui-radius-group); box-shadow:0 0 0 .5px var(--ui-line); background:var(--ui-surface); overflow:hidden; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #release_changes-content .rc-steps > div{ padding:6px 12px !important; border:0 !important; border-radius:0 !important; background:transparent !important; line-height:1.45 }
html #release_changes-content .rc-steps > div + div{ box-shadow:inset .5px 0 var(--ui-line) }
html #release_changes-content .rc-steps > div > strong{ color:var(--ui-text-1) !important; font-weight:var(--ui-weight-semibold) !important }
/* 빈 화면 */
html #release_changes-content .rc-empty{ padding:20px 12px !important; border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:0 0 0 .5px var(--ui-line); background:var(--ui-surface) !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; line-height:1.5 }
html #release_changes-content .rc-empty > i{ display:none !important }
html #release_changes-content #release-changes-main section.space-y-3{ margin-top:12px !important }
html #release_changes-content #release-changes-main section.space-y-3 > * + *{ margin-top:8px !important }
/* 변경안 카드 */
html #release_changes-content .rc-card{ padding:12px 14px !important; border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:0 0 0 .5px var(--ui-line) !important; background:var(--ui-surface) !important }
html #release_changes-content .rc-card > .flex:first-child > span.whitespace-nowrap{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #release_changes-content .rc-card h3{ margin-top:4px !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #release_changes-content .rc-card :is(.text-xs,.text-\[11px\]){ font-size:var(--ui-text-footnote) !important }
html #release_changes-content .rc-card .ring-1{ padding:1px 8px !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important }
html #release_changes-content .rc-card details{ margin-top:10px !important; border-radius:var(--ui-radius-control) !important; border:0 !important; box-shadow:0 0 0 .5px var(--ui-line); background:var(--ui-fill-subtle) !important }
html #release_changes-content .rc-card details > summary{ font-weight:var(--ui-weight-regular) !important; color:var(--ui-accent-text) !important }
html #release_changes-content .rc-card :is([data-release-action="approve"],[data-release-action="apply"]){ height:28px; margin-top:10px !important; padding:0 12px !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-accent-text) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important; transform:none !important }
html #release_changes-content .rc-card [data-release-action="apply"]{ color:var(--ui-danger) !important }
html #release_changes-content .rc-card :is([data-release-action="approve"],[data-release-action="apply"]):hover{ background:var(--ui-fill-subtle) !important }
/* 테스트 기록 칸: 노란 상자 → 회색 칸 + 흰 단추 */
html #release_changes-content .rc-card .release-test-form{ margin-top:10px !important; padding:8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill-subtle) !important; gap:6px !important }
html #release_changes-content .rc-card .release-test-form input{ height:28px; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-field) !important; background:var(--ui-surface) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important }
html #release_changes-content .rc-card .release-test-form button{ height:28px; 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-callout) !important; font-weight:var(--ui-weight-regular) !important; transform:none !important }
/* 변경안 작성 · 본섭데이터 가져오기 패널 */
html #release_changes-content :is(.rc-create,.rc-sync){ margin-top:12px !important; padding:14px 16px !important; border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:0 0 0 .5px var(--ui-line) !important; background:var(--ui-surface) !important }
html #release_changes-content :is(.rc-create,.rc-sync) :is(h3,h4){ font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #release_changes-content :is(.rc-create,.rc-sync) h3 > i{ display:none !important }
html #release_changes-content :is(.rc-create,.rc-sync) p{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #release_changes-content .rc-create label{ font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #release_changes-content .rc-create :is(input,select){ height:28px; padding:0 10px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-field) !important; background-color:var(--ui-surface) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important }
html #release_changes-content .rc-create textarea{ border-radius:var(--ui-radius-control) !important; font-family:var(--ui-font-mono) !important }
html #release_changes-content .rc-create form > .rounded-xl strong{ font-weight:var(--ui-weight-semibold) !important; font-size:var(--ui-text-body) !important }
html #release_changes-content .rc-create form > .rounded-xl{ border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill-subtle) !important }
html #release_changes-content :is(.rc-create,.rc-sync) button:not([aria-label="작성 닫기"]){ height:28px; padding:0 12px !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-callout) !important; font-weight:var(--ui-weight-regular) !important; transform:none !important }
html #release_changes-content :is(.rc-create,.rc-sync) 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 #release_changes-content :is(.rc-create,.rc-sync) a{ height:28px; display:inline-flex; align-items:center; padding:0 12px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; box-shadow:var(--ui-elev-control) !important; background:var(--ui-surface) !important; color:var(--ui-accent-text) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important }

/* ================= 브랜드키트 ================= */
/* 바깥 흰 상자 · 공용 그라데이션 머리 → 바탕 위 한 겹 */
html #brandkit-content > .container > .bg-white{ padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important }
html #brandkit-content #brand-kit-content{ font-family:var(--ui-font); color:var(--ui-text-1) }
html #brandkit-content #brand-kit-content > .max-w-3xl > .bk-head{ margin:0 0 12px !important; padding:4px 0 0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important }
html #brandkit-content #brand-kit-content .bk-head h2{ font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #brandkit-content #brand-kit-content .bk-head h2 > i{ display:none !important }
html #brandkit-content #brand-kit-content .bk-head p{ margin-top:2px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
/* 로고 종류 한 칸 */
html #brandkit-content #brand-kit-content .bk-type{ margin-bottom:8px !important; padding:12px 14px !important; border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:0 0 0 .5px var(--ui-line) !important; background:var(--ui-surface) !important }
html #brandkit-content #brand-kit-content .bk-type > .flex:first-child{ margin-bottom:8px !important; gap:12px }
html #brandkit-content #brand-kit-content .bk-type h3{ font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important }
html #brandkit-content #brand-kit-content .bk-type h3 > i{ display:none !important }
html #brandkit-content #brand-kit-content .bk-type > .flex:first-child p{ margin-top:1px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #brandkit-content #brand-kit-content .bk-type > .flex:first-child p.text-\[10px\]{ color:var(--ui-text-3) !important; font-size:var(--ui-text-caption) !important }
html #brandkit-content #brand-kit-content .bk-upload{ display:inline-flex; align-items:center; flex:0 0 auto; height:28px; padding:0 12px !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control); color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important }
html #brandkit-content #brand-kit-content .bk-upload:hover{ background:var(--ui-fill-subtle) !important }
html #brandkit-content #brand-kit-content .bk-upload > i{ margin-right:5px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) }
html #brandkit-content #brand-kit-content .bk-upload:focus-within{ box-shadow:var(--ui-elev-control), var(--ui-focus-ring) }
/* 지금 쓰는 로고: 초록 상자 → 옅은 회색 칸 + 초록 점 글자 */
html #brandkit-content #brand-kit-content .bk-active{ gap:12px !important; padding:8px 10px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill-subtle) !important }
html #brandkit-content #brand-kit-content .bk-active > .flex-shrink-0{ border:0 !important; box-shadow:0 0 0 .5px var(--ui-line); border-radius:var(--ui-radius-row) !important; background:var(--ui-surface) !important }
html #brandkit-content #brand-kit-content .bk-active .text-sm{ font-size:var(--ui-text-body) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-1) !important }
html #brandkit-content #brand-kit-content .bk-active p.text-\[10px\]{ font-size:var(--ui-text-caption) !important; color:var(--ui-text-2) !important }
html #brandkit-content #brand-kit-content .bk-active p.text-green-600{ display:flex; align-items:center; gap:5px; color:var(--ui-text-1) !important }
html #brandkit-content #brand-kit-content .bk-active p.text-green-600 > i{ display:none }
html #brandkit-content #brand-kit-content .bk-active p.text-green-600::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ui-success) }
html #brandkit-content #brand-kit-content .bk-active > button{ width:28px; height:28px; padding:0 !important; border-radius:var(--ui-radius-control) !important; color:var(--ui-danger) !important; transform:none !important }
html #brandkit-content #brand-kit-content .bk-active > button:hover{ background:var(--ui-danger-tint) !important }
html #brandkit-content #brand-kit-content .bk-empty{ padding:12px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill-subtle) !important }
html #brandkit-content #brand-kit-content .bk-empty > i{ display:none !important }
html #brandkit-content #brand-kit-content .bk-empty p{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
/* 이전 버전: 상자 줄 → 32px 한 줄 묶음 */
html #brandkit-content #brand-kit-content .bk-old{ margin-top:10px !important }
html #brandkit-content #brand-kit-content .bk-old > p{ margin-bottom:4px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-semibold) !important }
html #brandkit-content #brand-kit-content .bk-old > .space-y-1\.5{ border-radius:var(--ui-radius-control); box-shadow:0 0 0 .5px var(--ui-line); overflow:hidden }
html #brandkit-content #brand-kit-content .bk-old > .space-y-1\.5 > * + *{ margin-top:0 !important }
html #brandkit-content #brand-kit-content .bk-old-row{ min-height:32px; gap:10px !important; padding:2px 6px 2px 10px !important; border:0 !important; border-radius:0 !important; background:var(--ui-surface) !important; box-shadow:inset 0 -.5px var(--ui-line) }
html #brandkit-content #brand-kit-content .bk-old-row:last-child{ box-shadow:none }
html #brandkit-content #brand-kit-content .bk-old-row > div:first-child{ max-height:24px; border:0 !important; box-shadow:0 0 0 .5px var(--ui-line) }
html #brandkit-content #brand-kit-content .bk-old-row > span{ color:var(--ui-text-1) !important; font-size:var(--ui-text-body) !important }
html #brandkit-content #brand-kit-content .bk-old-row > button{ height:24px; padding:0 8px !important; border-radius:var(--ui-radius-row) !important; background:transparent !important; color:var(--ui-accent-text) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; transform:none !important }
html #brandkit-content #brand-kit-content .bk-old-row > button[title="삭제"]{ color:var(--ui-danger) !important }
html #brandkit-content #brand-kit-content .bk-old-row > button:hover{ background:var(--ui-fill-subtle) !important }
/* 안내: 파란 상자 → 회색 글 */
html #brandkit-content #brand-kit-content .bk-note{ margin-top:12px !important; padding:0 2px !important; border:0 !important; background:transparent !important }
html #brandkit-content #brand-kit-content .bk-note p{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #brandkit-content #brand-kit-content .bk-note p.text-\[10px\]{ font-size:var(--ui-text-caption) !important }
html #brandkit-content #brand-kit-content .bk-note p > i{ color:var(--ui-text-3) !important }
}

/* ---------- 휴대폰 ---------- */
@media screen and (max-width:768px){
html #release_changes-content .rc-hero > .flex:first-child{ align-items:stretch }
html #release_changes-content .rc-hero > .flex:first-child > .flex{ flex-wrap:wrap }
html #release_changes-content .rc-hero button{ height:36px }
html #release_changes-content .rc-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) !important }
html #release_changes-content .rc-stats > div{ min-height:44px; align-items:center }
html #release_changes-content .rc-stats > div:nth-child(3){ box-shadow:inset 0 .5px var(--ui-line) }
html #release_changes-content .rc-stats > div:nth-child(4){ box-shadow:inset .5px .5px var(--ui-line) }
html #release_changes-content .rc-steps > div{ min-height:44px; display:flex; flex-direction:column; justify-content:center }
html #release_changes-content .rc-steps > div + div{ box-shadow:inset 0 .5px var(--ui-line) }
html #brandkit-content #brand-kit-content .bk-upload{ height:36px }
html #brandkit-content #brand-kit-content .bk-old-row{ min-height:44px }
html #brandkit-content #brand-kit-content .bk-old-row > button{ height:32px; padding:0 10px !important }
html #brandkit-content #brand-kit-content .bk-active > button{ width:36px; height:36px }
}