/* =============================================================
   개발/오류 요청 게시판 — 맥 고밀도형 (사용자 2026-11-02 "1")
   범위: #dev_board-content 안쪽만(목록 · 상세 · 작성 · 수정). 사진 크게 보기 창은 그대로.
   빨간 채운 단추 2개 · 61px 상자 줄 · 아이콘 붙은 색 알약 · 이니셜 동그라미 →
   흰 단추 · 32px 한 줄 · 색 점 + 글자 · 동그라미 없음. 채운 파랑은 화면마다 하나
   (목록 '새 요청 작성' / 상세 관리자 처리 단추, 없으면 '코멘트 등록' / 작성 '등록').
   누르면 하는 일 · 저장 · 코멘트 · 접수 · 사진 첨부는 그대로.
   ============================================================= */
@media screen{
/* ---------- 공통 틀 · 머리 ---------- */
html #dev_board-content #dev-board-main > .bg-white{ border:0 !important; border-radius:var(--ui-radius-card) !important; box-shadow:var(--ui-elev-raised) !important; background:var(--ui-surface) !important; font-family:var(--ui-font) }
html #dev_board-content #dev-board-main > .bg-white > .border-b:first-child{ padding:14px 20px 10px !important; border-bottom:0 !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6{ padding:0 20px 20px !important }
html #dev_board-content h2{ font-size:var(--ui-text-title2) !important; font-weight:var(--ui-weight-semibold) !important; color:var(--ui-text-1) !important; letter-spacing:var(--ui-tracking-tight) }
html #dev_board-content #dev-board-main > .bg-white > .border-b:first-child h2 > i{ display:none !important }
/* 목록으로 · 돌아가기 → 파란 글자 한 줄 */
html #dev_board-content #dev-board-main > .bg-white > .border-b:first-child > button:first-child{ margin-bottom:6px !important; color:var(--ui-accent) !important; font-size:var(--ui-text-callout) !important }

/* 전체 목록 · 내가 쓴 목록 → 세그먼트 */
html #dev_board-content #dev-mine-toggle{ height:28px; padding:2px; gap:0; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-fill) !important; overflow:visible !important }
html #dev_board-content #dev-mine-toggle > button{ height:24px; padding:0 12px !important; border:0 !important; border-radius:var(--ui-radius-row) !important; background:transparent !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #dev_board-content #dev-mine-toggle > button > i{ display:none }
html #dev_board-content #dev-mine-toggle > button.text-white{ background:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; font-weight:var(--ui-weight-semibold) !important }
html #dev_board-content :is(#dev-status-filter,#dev-category-filter){ height:28px; padding:0 26px 0 10px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background-color:var(--ui-surface) !important; box-shadow:var(--ui-elev-control) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important }
html #dev_board-content :is(#dev-status-filter,#dev-category-filter):focus{ outline:0; box-shadow:var(--ui-elev-control), var(--ui-focus-ring) !important }
html #dev_board-content #dev-board-main > .bg-white > .border-b:first-child > .flex{ gap:6px !important }
html #dev_board-content button[onclick^="_devShowWrite"]{ height:28px; padding:0 12px !important; gap:6px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; box-shadow:none !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important }
html #dev_board-content button[onclick^="_devShowWrite"]:hover{ background:var(--ui-accent-hover) !important }
html #dev_board-content button[onclick^="_devShowWrite"] > i{ font-size:var(--ui-text-caption) }

/* ---------- 목록: 61px 상자 줄 → 32px 한 줄 묶음 ---------- */
html #dev_board-content #dev-board-list{ padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important }
html #dev_board-content #dev-board-list > .space-y-2{ border-radius:var(--ui-radius-group); box-shadow:0 0 0 .5px var(--ui-line); background:var(--ui-surface); overflow:hidden }
html #dev_board-content #dev-board-list > .space-y-2 > * + *{ margin-top:0 !important }
html #dev_board-content #dev-board-list [data-id]{ min-height:32px; gap:10px !important; padding:2px 12px !important; border:0 !important; border-radius:0 !important; box-shadow:inset 0 -.5px var(--ui-line) }
html #dev_board-content #dev-board-list [data-id]:last-child{ box-shadow:none }
html #dev_board-content #dev-board-list [data-id]:hover{ background:var(--ui-fill-subtle) !important }
/* 상태 · 유형: 알약 → 색 점 + 글자(상태 칸 폭 고정, 유형은 회색 글자) */
html #dev_board-content #dev-board-list [data-id] > .flex-shrink-0:first-child{ width:112px; gap:8px !important }
html #dev_board-content #dev-board-list [data-id] > .flex-shrink-0:first-child > span{ padding:0 !important; background:transparent !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #dev_board-content #dev-board-list [data-id] > .flex-shrink-0:first-child > span > i{ display:none }
html #dev_board-content #dev-board-list [data-id] > .flex-shrink-0:first-child > span:first-child{ width:52px; gap:6px; color:var(--ui-text-1) !important }
html #dev_board-content #dev-board-list [data-id] > .flex-shrink-0:first-child > span:first-child::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ui-text-3); flex:0 0 auto }
html #dev_board-content #dev-board-list [data-id] > .flex-shrink-0:first-child > span.bg-orange-100:first-child::before{ background:var(--ui-warning) }
html #dev_board-content #dev-board-list [data-id] > .flex-shrink-0:first-child > span.bg-indigo-100:first-child::before{ background:var(--ui-accent) }
html #dev_board-content #dev-board-list [data-id] > .flex-shrink-0:first-child > span.bg-green-100:first-child::before{ background:var(--ui-success) }
html #dev_board-content #dev-board-list [data-id] > .flex-shrink-0:first-child > span + span{ color:var(--ui-text-2) !important }
html #dev_board-content #dev-board-list [data-id] > .flex-shrink-0:first-child > span.bg-red-100 + span, html #dev_board-content #dev-board-list [data-id] > .flex-shrink-0:first-child > span + span.bg-red-100{ color:var(--ui-danger) !important }
/* 제목 · 코멘트 수 · 사진 */
html #dev_board-content #dev-board-list [data-id] .font-semibold.truncate{ color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important }
html #dev_board-content #dev-board-list [data-id]:hover .font-semibold.truncate{ color:var(--ui-text-1) !important }
html #dev_board-content #dev-board-list [data-id] .flex-1 span.rounded{ min-width:0 !important; height:auto !important; padding:0 !important; background:transparent !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-caption) !important; font-weight:var(--ui-weight-regular) !important }
html #dev_board-content #dev-board-list [data-id] .flex-1 span.rounded::before{ content:"\f075"; margin-right:3px; font-family:"Font Awesome 6 Free","Font Awesome 5 Free"; font-weight:400; font-size:var(--ui-text-caption) }
html #dev_board-content #dev-board-list [data-id] .flex-1 i.fa-image{ color:var(--ui-text-3) !important }
/* 작성자 · 날짜: 두 줄 → 한 줄 */
html #dev_board-content #dev-board-list [data-id] > .text-right{ display:flex; gap:10px; align-items:center; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #dev_board-content #dev-board-list [data-id] > .text-right > [data-col="date"]{ width:48px; text-align:right; font-variant-numeric:tabular-nums }
html #dev_board-content #dev-board-list > .pt-3{ padding-top:8px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #dev_board-content #dev-board-list > .text-center{ color:var(--ui-text-3) !important; font-size:var(--ui-text-footnote) !important }

/* ---------- 상세 ---------- */
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6{ margin-bottom:16px !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 > .flex:first-child{ gap:12px !important; margin-bottom:8px !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 h2{ font-size:var(--ui-text-title3) !important }
/* 유형 · 상태 알약 → 글자(상태는 색 점) */
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 .flex.mb-2 > span{ gap:6px; padding:0 !important; background:transparent !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important; color:var(--ui-text-2) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 .flex.mb-2 > span > i{ display:none }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 .flex.mb-2 > span.bg-red-100:first-child{ color:var(--ui-danger) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 .flex.mb-2 > span:nth-child(2){ color:var(--ui-text-1) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 .flex.mb-2 > span:nth-child(2)::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ui-text-3) }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 .flex.mb-2 > span.bg-orange-100:nth-child(2)::before{ background:var(--ui-warning) }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 .flex.mb-2 > span.bg-indigo-100:nth-child(2)::before{ background:var(--ui-accent) }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 .flex.mb-2 > span.bg-green-100:nth-child(2)::before{ background:var(--ui-success) }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 .flex.mt-2{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 .flex.mt-2 i{ display:none }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 .flex.mt-2 .text-green-500{ color:var(--ui-success) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 .bg-gray-50{ margin-top:10px !important; padding:10px 12px !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-surface-alt) !important; color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; line-height:var(--ui-leading-read) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 img{ border:0 !important; border-radius:var(--ui-radius-group) !important; box-shadow:0 0 0 .5px var(--ui-line) !important }
/* 처리 단추: 관리자 처리(접수 · 수정완료 · 다시 열기)만 채운 파랑, 나머지 글자 단추 */
html #dev_board-content button:is([onclick^="_devAccept"],[onclick^="_devResolve"],[onclick^="_devReopen"]){ height:28px; padding:0 12px !important; gap:6px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; box-shadow:none !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important; white-space:nowrap }
html #dev_board-content button:is([onclick^="_devAccept"],[onclick^="_devResolve"],[onclick^="_devReopen"]):hover{ background:var(--ui-accent-hover) !important }
html #dev_board-content button:is([onclick^="_devAccept"],[onclick^="_devResolve"],[onclick^="_devReopen"]) > i{ display:none }
html #dev_board-content button:is([onclick^="_devUnaccept"],[onclick^="_devShowEdit"],[onclick^="_devDeletePost"]){ height:28px; padding:0 8px !important; gap:4px !important; border-radius:var(--ui-radius-control); color:var(--ui-text-2) !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-regular) !important; white-space:nowrap }
html #dev_board-content button[onclick^="_devShowEdit"]{ color:var(--ui-accent) !important }
html #dev_board-content button[onclick^="_devDeletePost"]{ color:var(--ui-danger) !important }
html #dev_board-content button:is([onclick^="_devUnaccept"],[onclick^="_devShowEdit"],[onclick^="_devDeletePost"]):hover{ background:var(--ui-fill) !important }
html #dev_board-content button:is([onclick^="_devUnaccept"],[onclick^="_devShowEdit"],[onclick^="_devDeletePost"]) > i{ font-size:var(--ui-text-caption) }

/* 코멘트: 큰 테두리 상자 → 머리카락 선 묶음, 이니셜 동그라미 숨김(금지 규칙) */
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .rounded-xl.border{ padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .rounded-xl.border > h3{ margin:0 0 6px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .rounded-xl.border > h3 > i{ display:none }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .rounded-xl.border .w-8.h-8.rounded-full{ display:none !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .rounded-xl.border > .flex.gap-3{ gap:0 !important; padding:8px 0 !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .rounded-xl.border > .flex.gap-3 .text-sm.font-semibold{ color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .rounded-xl.border > .flex.gap-3 .text-xs{ color:var(--ui-text-3) !important; font-size:var(--ui-text-footnote) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .rounded-xl.border > .flex.gap-3 .whitespace-pre-wrap{ color:var(--ui-text-1) !important; font-size:var(--ui-text-callout) !important; line-height:var(--ui-leading-read) }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .rounded-xl.border > .border-t.border-gray-100{ border-top:0 !important; height:.5px; background:var(--ui-line) }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .rounded-xl.border > .text-center{ padding:12px 0 !important; color:var(--ui-text-3) !important; font-size:var(--ui-text-footnote) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .rounded-xl.border > .border-t.pt-4{ margin-top:8px !important; padding-top:10px !important; border-top:0 !important; box-shadow:inset 0 .5px var(--ui-line) }
html #dev_board-content #dev-comment-input{ min-height:56px; padding:6px 8px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-surface) !important; box-shadow:var(--ui-elev-field) !important; color:var(--ui-text-1); font-size:var(--ui-text-callout) !important }
html #dev_board-content #dev-comment-input::placeholder{ color:var(--ui-text-3) }
html #dev_board-content #dev-comment-input:focus{ outline:0; box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important }
html #dev_board-content label[for="dev-comment-images"]{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #dev_board-content button[onclick^="_devAddComment"]{ height:28px; padding:0 12px !important; gap:6px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; background:var(--ui-accent) !important; color:var(--ui-on-accent) !important; box-shadow:none !important; font-size:var(--ui-text-callout) !important; font-weight:var(--ui-weight-semibold) !important }
html #dev_board-content button[onclick^="_devAddComment"] > i{ display:none }
/* 관리자 처리 단추가 있는 글에서는 '코멘트 등록'을 흰 단추로(채운 파랑 한 개) */
html #dev_board-content #dev-board-main:has(button:is([onclick^="_devAccept"],[onclick^="_devResolve"],[onclick^="_devReopen"])) button[onclick^="_devAddComment"]{ 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 #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 > * + *{ margin-top:12px !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 label.block{ margin-bottom:4px !important; color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important; font-weight:var(--ui-weight-regular) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 label.block > .text-red-500{ color:var(--ui-danger) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 :is(select,input[type="text"],textarea){ padding:0 10px !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-callout) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 :is(select,input[type="text"]){ height:28px }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 select{ max-width:240px; padding-right:26px !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 textarea{ padding:6px 10px !important; line-height:var(--ui-leading-read) }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 :is(select,input[type="text"],textarea):focus{ outline:0; box-shadow:var(--ui-elev-field), var(--ui-focus-ring) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 ::placeholder{ color:var(--ui-text-3) }
html #dev_board-content :is(#dev-write-dropzone,#dev-edit-dropzone){ padding:10px !important; border:1px dashed var(--ui-line-control) !important; border-radius:var(--ui-radius-group) !important; background:var(--ui-surface-alt) !important }
html #dev_board-content :is(#dev-write-dropzone,#dev-edit-dropzone) span{ color:var(--ui-text-2) !important; font-size:var(--ui-text-footnote) !important }
html #dev_board-content :is(#dev-write-dropzone,#dev-edit-dropzone) span.text-xs{ color:var(--ui-text-3) !important; font-size:var(--ui-text-caption) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 > .flex.justify-end{ gap:8px !important; padding-top:4px !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 > .flex.justify-end > button{ height:28px; padding:0 14px !important; gap:6px !important; border:0 !important; border-radius:var(--ui-radius-control) !important; font-size:var(--ui-text-callout) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 > .flex.justify-end > button:first-child{ 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 #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 > .flex.justify-end > button:last-child{ min-width:72px; justify-content:center; background:var(--ui-accent) !important; box-shadow:none !important; color:var(--ui-on-accent) !important; font-weight:var(--ui-weight-semibold) !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 > .flex.justify-end > button:last-child > i{ display:none }
}
@media screen and (max-width:768px){
html #dev_board-content #dev-board-main > .bg-white > .border-b:first-child{ padding:12px 12px 8px !important }
html #dev_board-content #dev-board-main > .bg-white > .p-6, html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4{ padding:0 12px 16px !important }
html #dev_board-content #dev-board-main > .bg-white > .border-b:first-child > .flex{ width:100% }
html #dev_board-content :is(#dev-status-filter,#dev-category-filter){ height:36px; flex:1 1 0 }
html #dev_board-content button[onclick^="_devShowWrite"]{ height:36px }
html #dev_board-content #dev-mine-toggle{ height:36px }
html #dev_board-content #dev-mine-toggle > button{ height:32px }
/* 목록: 한 줄 44px — 상태 점 · 제목 · 날짜만, 유형 · 작성자는 숨김(상세에서 보임) */
html #dev_board-content #dev-board-list [data-id]{ min-height:44px; gap:8px !important; padding:2px 12px !important }
html #dev_board-content #dev-board-list [data-id] > .flex-shrink-0:first-child{ width:auto }
html #dev_board-content #dev-board-list [data-id] > .flex-shrink-0:first-child > span:first-child{ width:auto; font-size:0 !important; gap:0 }
html #dev_board-content #dev-board-list [data-id] > .flex-shrink-0:first-child > span + span{ display:none !important }
html #dev_board-content #dev-board-list [data-id] > .text-right > div:first-child{ display:none }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 > .flex:first-child{ flex-direction:column }
html #dev_board-content #dev-board-main > .bg-white > .p-6 > .mb-6 > .flex:first-child > .flex-shrink-0{ flex-wrap:wrap }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 :is(select,input[type="text"]){ height:36px }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 select{ max-width:none }
html #dev_board-content #dev-board-main > .bg-white > .p-6.space-y-4 > .flex.justify-end > button, html #dev_board-content button[onclick^="_devAddComment"]{ height:44px; flex:1 1 0; justify-content:center }
}