/* =============================================================
   아이보스 대행의뢰 · 카페 게시글 조회기 — 맥 고밀도.
   범위: #iboss_requests-content · #iboss-settings-modal · #cafe_checker-content 안쪽만. 값은 ui-tokens.css 에서만.
   아이보스: 제목 한 줄 · 큰 색 안내 상자 → 한 줄 안내 · 상태 분할 단추 · 맥 표(분야 글자 · 의뢰 제목 + 한 줄 + 요약 한 줄) ·
            담당자별 상태 팝업 · 설정 창 맥 시트(채운 파랑 [저장] 하나).
   카페 조회기: 보라 그라데이션 머리 · 번호 동그라미 · 큰 숫자 카드 → 제목 한 줄 · 입력 묶음 · 결과 요약 한 줄 · 맥 표.
   마크업: index.tsx · ws-iboss.js · cafe-checker.js. 되돌리기: index.tsx 의 이 파일 <link> 한 줄 + 위 마크업.
   ============================================================= */

/* ── 아이보스 ── */
html #iboss_requests-content.ib-mac{ background:var(--ui-bg); color:var(--ui-text-1) }
html #iboss_requests-content.ib-mac, html #iboss_requests-content.ib-mac *{ font-family:var(--ui-font) }
html #iboss_requests-content .ib-wrap{ padding:4px 16px 32px }
html #iboss_requests-content .hidden{ display:none !important }
html #iboss_requests-content .ib-sp, html #iboss-settings-modal .ib-sp{ flex:1 }
html #iboss_requests-content .ib-dim, html #iboss-settings-modal .ib-dim{ color:var(--ui-text-2) }
html #iboss_requests-content .ib-head{ display:flex; align-items:center; gap:8px; min-height:36px; margin:4px 0 8px }
html #iboss_requests-content .ib-head h2{ margin:0; font-size:var(--ui-text-title2); font-weight:var(--ui-weight-bold); color:var(--ui-text-1) }
html #iboss_requests-content .ib-actions:not(.hidden){ display:flex; gap:8px }
html #iboss_requests-content .ib-btn, html #iboss-settings-modal .ib-btn{ display:inline-flex; align-items:center; height:var(--ui-control); padding:0 12px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-body); white-space:nowrap; cursor:default }
html #iboss_requests-content .ib-btn:disabled{ opacity:.55 }
html #iboss-settings-modal .ib-btn.pri{ background:var(--ui-accent); color:var(--ui-on-accent); box-shadow:none; font-weight:var(--ui-weight-semibold) }
html #iboss-settings-modal .ib-btn.pri:hover{ background:var(--ui-accent-hover) }
html #iboss_requests-content .ib-btn:focus-visible, html #iboss_requests-content .ib-pop:focus-visible, html #iboss_requests-content .ib-seg button:focus-visible, html #iboss-settings-modal .ib-btn:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
html #iboss_requests-content .ib-dot{ display:inline-block; flex:none; width:7px; height:7px; border-radius:50%; background:var(--ui-text-3) }
html #iboss_requests-content .ib-dot.warn{ background:var(--ui-warning-dot) }
html #iboss_requests-content .ib-dot.bad{ background:var(--ui-danger) }

/* 안내 · 상태 한 줄 */
html #iboss_requests-content .ib-status{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px }
html #iboss_requests-content .ib-note{ display:flex; align-items:flex-start; gap:8px; padding:7px 12px; border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); font-size:var(--ui-text-footnote); color:var(--ui-text-1) }
html #iboss_requests-content .ib-note .ib-dot{ margin-top:5px }
html #iboss_requests-content .ib-note b{ font-weight:var(--ui-weight-semibold) }
html #iboss_requests-content .ib-note.bad{ color:var(--ui-danger) }
html #iboss_requests-content .ib-meta{ display:flex; flex-wrap:wrap; gap:4px 16px; padding:0 2px; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #iboss_requests-content .ib-meta b{ color:var(--ui-text-1); font-weight:var(--ui-weight-semibold) }

/* 도구 줄 */
html #iboss_requests-content .ib-tools{ display:flex; align-items:center; gap:8px; margin:0 0 8px; flex-wrap:wrap }
html #iboss_requests-content .ib-seg{ display:inline-flex; padding:2px; gap:2px; border-radius:var(--ui-radius-control); background:var(--ui-fill) }
html #iboss_requests-content .ib-seg button{ height:24px; padding:0 12px; border:0; border-radius:calc(var(--ui-radius-control) - 2px); background:transparent; color:var(--ui-text-1); font-size:var(--ui-text-footnote); white-space:nowrap; cursor:default }
html #iboss_requests-content .ib-seg button.on{ background:var(--ui-surface); box-shadow:var(--ui-elev-control); font-weight:var(--ui-weight-semibold) }
html #iboss_requests-content .ib-seg .n{ margin-left:3px; color:var(--ui-text-2); font-weight:var(--ui-weight-regular); font-variant-numeric:tabular-nums }
html #iboss_requests-content .ib-pop{ height:var(--ui-control-sm); padding:0 22px 0 8px; border:0; border-radius:var(--ui-radius-control); background-color:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-footnote); cursor:default }
html #iboss_requests-content .ib-tools .ib-pop{ height:var(--ui-control); font-size:var(--ui-text-body) }

/* 표 */
html #iboss_requests-content .ib-list{ border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line); overflow:hidden }
html #iboss_requests-content .ib-scroll{ overflow-x:auto }
html #iboss_requests-content .ib-tbl{ width:100%; border-collapse:collapse; font-size:var(--ui-text-body) }
html #iboss_requests-content .ib-tbl th{ height:28px; padding:0 10px; border-bottom:var(--ui-hairline) solid var(--ui-line); color:var(--ui-text-2); font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); text-align:left; white-space:nowrap }
html #iboss_requests-content .ib-tbl td{ padding:8px 10px; border-bottom:var(--ui-hairline) solid var(--ui-line); vertical-align:top }
html #iboss_requests-content .ib-tbl tbody tr:last-child > td{ border-bottom:0 }
@media (hover:hover){ html #iboss_requests-content .ib-row:hover > td{ background:var(--ui-fill-subtle) } }
html #iboss_requests-content .ib-row.is-passed > td{ color:var(--ui-text-2) }
html #iboss_requests-content .ib-row.ib-flash > td{ background:var(--ui-accent-tint) }
html #iboss_requests-content .ib-cat{ white-space:nowrap; color:var(--ui-text-2); font-size:var(--ui-text-footnote) }
html #iboss_requests-content td.ib-req{ min-width:300px }
html #iboss_requests-content .ib-title{ color:var(--ui-text-1); font-weight:var(--ui-weight-semibold); text-decoration:none }
html #iboss_requests-content .ib-title:hover{ color:var(--ui-accent-text); text-decoration:underline }
html #iboss_requests-content .ib-line{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:2px; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #iboss_requests-content .ib-clicks{ display:inline-flex; align-items:center; gap:5px }
html #iboss_requests-content .ib-clicks .k{ color:var(--ui-text-3) }
html #iboss_requests-content .ib-clicks.none{ color:var(--ui-warning) }
html #iboss_requests-content .ib-tag{ color:var(--ui-text-2) }
html #iboss_requests-content .ib-tag::before{ content:"·"; margin-right:10px; color:var(--ui-text-3) }
html #iboss_requests-content .ib-tag.due{ color:var(--ui-danger); font-weight:var(--ui-weight-semibold) }
html #iboss_requests-content .ib-sum{ margin-top:2px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #iboss_requests-content .ib-budget{ min-width:110px; max-width:160px; color:var(--ui-text-1) }
html #iboss_requests-content .ib-ind, html #iboss_requests-content .ib-date{ white-space:nowrap; color:var(--ui-text-2) }
html #iboss_requests-content td.ib-assign{ min-width:210px; white-space:nowrap }
html #iboss_requests-content .ib-who{ display:flex; align-items:center; gap:6px; margin-bottom:4px }
html #iboss_requests-content .ib-who .nm{ min-width:48px }
html #iboss_requests-content .ib-pop.ib-st-done{ color:var(--ui-success); font-weight:var(--ui-weight-semibold) }
html #iboss_requests-content .ib-pop.ib-st-pass{ color:var(--ui-text-2) }
html #iboss_requests-content .ib-pop.add{ background-color:transparent; box-shadow:inset 0 0 0 1px var(--ui-line-dashed); color:var(--ui-text-2) }
html #iboss_requests-content .ib-link{ padding:0 3px; border:0; background:none; color:var(--ui-text-2); font-size:var(--ui-text-footnote); cursor:default }
html #iboss_requests-content .ib-link:hover{ color:var(--ui-danger); text-decoration:underline }
html #iboss_requests-content .ib-hint{ font-size:var(--ui-text-footnote); color:var(--ui-text-3); white-space:normal; max-width:200px }
html #iboss_requests-content .ib-empty{ padding:40px 0; text-align:center; color:var(--ui-text-2); font-size:var(--ui-text-footnote) }
html #iboss_requests-content .ib-empty.err{ color:var(--ui-danger) }

@media (max-width:767px){
  html #iboss_requests-content .ib-wrap{ padding:4px 12px 32px }
  html #iboss_requests-content .ib-head{ flex-wrap:wrap }
  html #iboss_requests-content .ib-actions:not(.hidden){ flex:1 1 100%; order:3 }
  html #iboss_requests-content .ib-actions .ib-btn{ flex:1; justify-content:center; height:var(--ui-control-mobile) }
  html #iboss_requests-content .ib-tools .ib-sp{ display:none }
  html #iboss_requests-content .ib-seg{ display:flex; flex:1 1 100% }
  html #iboss_requests-content .ib-seg button{ flex:1; height:30px; padding:0 4px }
  html #iboss_requests-content .ib-tools .ib-pop{ flex:1 1 100%; height:var(--ui-control-mobile) }
  /* 휴대폰: 표 → 한 건씩(분야 · 등록일 / 제목 / 한 줄 / 예산 · 업종 / 담당자) */
  html #iboss_requests-content .ib-tbl, html #iboss_requests-content .ib-tbl tbody{ display:block }
  html #iboss_requests-content .ib-tbl thead{ display:none }
  html #iboss_requests-content .ib-tbl tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"c d" "q q" "b i" "a a"; gap:2px 10px; padding:10px 12px; border-bottom:var(--ui-hairline) solid var(--ui-line) }
  html #iboss_requests-content .ib-tbl td{ padding:0; border:0 }
  html #iboss_requests-content .ib-tbl td.ib-cat{ grid-area:c } html #iboss_requests-content .ib-tbl td.ib-date{ grid-area:d; font-size:var(--ui-text-footnote) }
  html #iboss_requests-content .ib-tbl td.ib-req{ grid-area:q; min-width:0 }
  html #iboss_requests-content .ib-tbl td.ib-budget{ grid-area:b; max-width:none; font-size:var(--ui-text-footnote) } html #iboss_requests-content .ib-tbl td.ib-ind{ grid-area:i; font-size:var(--ui-text-footnote) }
  html #iboss_requests-content .ib-tbl td.ib-assign{ grid-area:a; min-width:0; margin-top:6px; white-space:normal }
  html #iboss_requests-content .ib-pop{ height:30px }
  html #iboss_requests-content .ib-link{ padding:6px 4px }
}

/* 설정 창 */
html #iboss-settings-modal.ib-ov{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:16px; background:var(--ui-scrim); font-family:var(--ui-font) }
html #iboss-settings-modal .ib-sheet{ display:flex; flex-direction:column; width:100%; max-width:600px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); border-radius:var(--ui-radius-sheet); background:var(--ui-bg); box-shadow:var(--ui-elev-sheet); overflow:hidden }
html #iboss-settings-modal .ib-sheet-hd{ flex:none; display:flex; align-items:center; min-height:44px; padding:6px 8px 6px 16px; background:var(--ui-surface); border-bottom:var(--ui-hairline) solid var(--ui-line) }
html #iboss-settings-modal .ib-sheet-hd h3{ flex:1; margin:0; font-size:var(--ui-text-title3); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) }
html #iboss-settings-modal .ib-sheet-bd{ flex:1; overflow-y:auto; padding:12px 16px }
html #iboss-settings-modal section{ margin-bottom:14px }
html #iboss-settings-modal h4{ margin:0 0 2px; font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1) }
html #iboss-settings-modal section > p, html #iboss-settings-modal .ib-foot-note{ margin:0 0 6px; font-size:var(--ui-text-footnote); color:var(--ui-text-2); line-height:1.45 }
html #iboss-settings-modal .ib-grp{ padding:4px 12px; border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line) }
html #iboss-settings-modal .ib-chks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 12px }
html #iboss-settings-modal .ib-chk{ display:flex; align-items:center; gap:8px; min-height:30px; font-size:var(--ui-text-body); color:var(--ui-text-1) }
html #iboss-settings-modal .ib-chk input{ width:14px; height:14px; margin:0; accent-color:var(--ui-accent) }
html #iboss-settings-modal .ib-sheet-ft{ flex:none; display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--ui-surface); border-top:var(--ui-hairline) solid var(--ui-line) }
html #iboss-settings-modal .ib-x{ position:relative; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:transparent; cursor:default }
html #iboss-settings-modal .ib-x::before, html #iboss-settings-modal .ib-x::after{ content:""; position:absolute; left:8px; top:13.5px; width:12px; height:1.5px; border-radius:1px; background:var(--ui-text-2); transform:rotate(45deg) }
html #iboss-settings-modal .ib-x::after{ transform:rotate(-45deg) }
html #iboss-settings-modal .ib-x:hover{ background:var(--ui-fill) }
@media (max-width:767px){
  html #iboss-settings-modal.ib-ov{ padding:0; align-items:flex-end }
  html #iboss-settings-modal .ib-sheet{ max-width:none; max-height:92vh; max-height:92dvh; border-radius:var(--ui-radius-sheet) var(--ui-radius-sheet) 0 0 }
  html #iboss-settings-modal .ib-chks{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  html #iboss-settings-modal .ib-chk{ min-height:40px }
  html #iboss-settings-modal .ib-sheet-ft{ flex-wrap:wrap; padding-bottom:calc(10px + env(safe-area-inset-bottom)) }
  html #iboss-settings-modal .ib-sheet-ft > .ib-btn:first-child{ flex:1 1 100% }
  html #iboss-settings-modal .ib-sheet-ft .ib-sp{ display:none }
  html #iboss-settings-modal .ib-btn{ flex:1; justify-content:center; height:var(--ui-control-mobile) }
}

/* ── 카페 게시글 조회기 ── */
html #cafe_checker-content.cc-mac{ background:var(--ui-bg); color:var(--ui-text-1) }
html #cafe_checker-content.cc-mac, html #cafe_checker-content.cc-mac *{ font-family:var(--ui-font) }
html #cafe_checker-content .cc-wrap{ padding:4px 16px 32px }
html #cafe_checker-content .hidden{ display:none !important }
html #cafe_checker-content .cc-box{ max-width:960px }
html #cafe_checker-content .cc-sp{ flex:1 }
html #cafe_checker-content .cc-head{ display:flex; align-items:baseline; gap:8px; min-height:36px; margin:4px 0 8px }
html #cafe_checker-content .cc-head h2{ margin:0; font-size:var(--ui-text-title2); font-weight:var(--ui-weight-bold); color:var(--ui-text-1) }
html #cafe_checker-content .cc-ver{ font-size:var(--ui-text-footnote); color:var(--ui-text-3) }
html #cafe_checker-content .cc-grp{ margin-bottom:10px; padding:10px 12px; border-radius:var(--ui-radius-group); background:var(--ui-surface); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line) }
html #cafe_checker-content .cc-lb{ display:block; margin-bottom:6px; font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold) }
html #cafe_checker-content .cc-lb small{ margin-left:6px; font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-regular); color:var(--ui-text-2) }
html #cafe_checker-content .cc-ta{ display:block; width:100%; min-height:150px; padding:8px 10px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-field); color:var(--ui-text-1); font-family:var(--ui-font-mono) !important; font-size:var(--ui-text-footnote); line-height:1.6; resize:vertical }
html #cafe_checker-content .cc-ta:focus, html #cafe_checker-content .cc-btn:focus-visible{ outline:none; box-shadow:var(--ui-focus-ring) }
html #cafe_checker-content .cc-ta::placeholder{ color:var(--ui-text-3) }
html #cafe_checker-content .cc-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px }
html #cafe_checker-content .cc-res .cc-row:first-child, html #cafe_checker-content .cc-prog .cc-row:first-child{ margin-top:0 }
html #cafe_checker-content .cc-hint{ font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #cafe_checker-content .cc-help{ margin:6px 0 8px; color:var(--ui-text-3) }
html #cafe_checker-content .cc-count{ font-size:var(--ui-text-footnote); font-weight:var(--ui-weight-semibold); color:var(--ui-text-1); font-variant-numeric:tabular-nums }
html #cafe_checker-content .cc-btn{ display:inline-flex; align-items:center; height:var(--ui-control); padding:0 12px; border:0; border-radius:var(--ui-radius-control); background:var(--ui-surface); box-shadow:var(--ui-elev-control); color:var(--ui-text-1); font-size:var(--ui-text-body); white-space:nowrap; cursor:default }
html #cafe_checker-content .cc-btn.pri{ padding:0 18px; background:var(--ui-accent); color:var(--ui-on-accent); box-shadow:none; font-weight:var(--ui-weight-semibold) }
html #cafe_checker-content .cc-btn.pri:hover{ background:var(--ui-accent-hover) }
html #cafe_checker-content .cc-btn:disabled{ opacity:.55 }
html #cafe_checker-content .cc-msg{ display:flex; align-items:center; gap:8px; margin-top:8px; font-size:var(--ui-text-footnote); color:var(--ui-text-1) }
html #cafe_checker-content .cc-msg::before{ content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--ui-success) }
html #cafe_checker-content .cc-msg.error{ color:var(--ui-danger) } html #cafe_checker-content .cc-msg.error::before{ background:var(--ui-danger) }
html #cafe_checker-content .cc-msg.warning::before{ background:var(--ui-warning-dot) }
html #cafe_checker-content .cc-bar{ height:6px; margin-top:8px; border-radius:3px; background:var(--ui-fill); overflow:hidden }
html #cafe_checker-content .cc-bar > div{ height:100%; border-radius:3px; background:var(--ui-accent); transition:width .5s var(--ui-ease) }
html #cafe_checker-content .cc-res-t{ font-size:var(--ui-text-body); font-weight:var(--ui-weight-semibold) }
html #cafe_checker-content .cc-kv{ display:inline-flex; align-items:center; gap:5px; font-size:var(--ui-text-footnote); color:var(--ui-text-2) }
html #cafe_checker-content .cc-kv b{ color:var(--ui-text-1); font-weight:var(--ui-weight-semibold); font-variant-numeric:tabular-nums }
html #cafe_checker-content .cc-dot{ display:inline-block; width:7px; height:7px; border-radius:50% }
html #cafe_checker-content .cc-dot.ok{ background:var(--ui-success) } html #cafe_checker-content .cc-dot.bad{ background:var(--ui-danger) }
html #cafe_checker-content .cc-list{ max-height:500px; overflow:auto; border-radius:var(--ui-radius-card); box-shadow:0 0 0 var(--ui-hairline) var(--ui-line) }
html #cafe_checker-content .cc-tbl{ width:100%; border-collapse:collapse; font-size:var(--ui-text-body); font-variant-numeric:tabular-nums; table-layout:fixed }
html #cafe_checker-content .cc-tbl th{ position:sticky; top:0; height:28px; padding:0 10px; background:var(--ui-surface); border-bottom:var(--ui-hairline) solid var(--ui-line); color:var(--ui-text-2); font-size:var(--ui-text-caption); font-weight:var(--ui-weight-semibold); text-align:left }
html #cafe_checker-content .cc-tbl th:nth-child(1){ width:32% } html #cafe_checker-content .cc-tbl th:nth-child(3){ width:84px } html #cafe_checker-content .cc-tbl th:nth-child(4){ width:64px }
html #cafe_checker-content .cc-tbl td{ height:var(--ui-row); padding:0 10px; border-bottom:var(--ui-hairline) solid var(--ui-line); white-space:nowrap; overflow:hidden }
html #cafe_checker-content .cc-tbl tbody tr:last-child > td{ border-bottom:0 }
html #cafe_checker-content .cc-tbl .r{ text-align:right }
html #cafe_checker-content .cc-tbl td > span{ display:block; overflow:hidden; text-overflow:ellipsis }
html #cafe_checker-content .cc-url{ color:var(--ui-text-2); font-size:var(--ui-text-footnote) }
html #cafe_checker-content .cc-v{ font-weight:var(--ui-weight-semibold) }
html #cafe_checker-content .cc-err{ color:var(--ui-danger) }
@media (hover:hover){ html #cafe_checker-content .cc-r:hover > td{ background:var(--ui-fill-subtle) } }
html #cafe_checker-content .cc-empty{ padding:40px 0; text-align:center; color:var(--ui-text-2); font-size:var(--ui-text-footnote) }
@media (max-width:767px){
  html #cafe_checker-content .cc-wrap{ padding:4px 12px 32px }
  html #cafe_checker-content .cc-row .cc-sp{ display:none }
  html #cafe_checker-content #cc-step1 .cc-row .cc-btn.pri{ flex:1 1 100%; justify-content:center; height:var(--ui-control-mobile) }
  html #cafe_checker-content .cc-res .cc-row .cc-btn{ flex:1; justify-content:center; height:var(--ui-control-mobile) }
  html #cafe_checker-content .cc-res .cc-row .cc-res-t{ flex:1 1 100% }
  html #cafe_checker-content .cc-tbl th:nth-child(1), html #cafe_checker-content .cc-tbl td.cc-url{ display:none }
  html #cafe_checker-content .cc-tbl td{ height:var(--ui-row-mobile) }
}