/* 자동 생성 파일: scripts/react-import/ux-laws/bundle-css.mjs 가 만든다. 손으로 고치지 않는다. 기본값으로 굳힌 UX 개선안(src/lib/uxReview/promoted.json). */
/* app-detail-consistency.css (기본값) */
/*
 * UX 개선안 'app-detail-consistency'(앱 상세 숫자와 관리 단추 맞추기). 검토용 스위치가 켜졌을 때만 걸린다.
 *  · 작성자 전용 '이용·보호 안내' 설정 단추가 '내 앱 관리' 줄로 옮겨 오면 옆 단추와 같은 모양으로 선다.
 *  · 휴대폰에서도 데스크톱과 같은 단추를 모두 보인다. 좁은 화면은 그림과 짧은 글자로 줄이고,
 *    '수정·삭제'는 늘 같은 줄 오른쪽 끝 한 묶음으로 둔다(줄 수는 지금처럼 두 줄을 넘지 않는다).
 *    넓은 화면은 지금 모습 그대로 긴 이름을 쓰고 그림도 더하지 않는다.
 *  · 업데이트 소식 쓰기 칸의 '취소'와 '소식 올리기'는 휴대폰에서도 한 줄 오른쪽 끝에 나란히 선다.
 * 숫자(댓글 수 하나로 맞추기)와 단추 옮기기는 AppDetail·AppModule·AppUpdatesPanel 의 useUxProposal 이 맡는다.
 */

/* 옮겨 온 안내 설정 단추: 자리 표시 칸은 상자를 만들지 않고, 단추가 바로 줄의 한 칸이 된다. */
:root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row .ux-owner-usage-slot { display: contents; }
:root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row .ux-owner-usage-slot:empty { display: none; }
:root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row .ux-owner-usage-slot > button {
  margin-left: 0 !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
}

/* 넓은 화면: 긴 이름, 줄 바꿈 칸 없음. */
:root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row .ux-owner-short { display: none; }
:root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row .ux-owner-break { display: none; }
:root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row .ux-owner-glyph { display: none; }

@media (max-width: 700px) {
  /* 전역 휴대폰 규칙이 숨겨 둔 '업데이트 소식 알리기'를 다시 보인다(데스크톱과 같은 단추). */
  :root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row .app-action-update { display: inline-flex !important; }
  :root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row {
    flex-wrap: wrap;
    gap: 8px 6px;
    overflow: visible;
  }
  :root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row .ux-owner-long { display: none; }
  :root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row .ux-owner-short { display: inline; }
  :root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row :is(.app-action-announcement, .app-action-arcade, .app-action-update, .ux-owner-usage-slot > button) {
    flex-shrink: 0;
    gap: 0.35rem;
    padding-inline: 0.6rem !important;
    white-space: nowrap;
  }
  :root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row .ux-owner-glyph { display: block; flex-shrink: 0; }
  /* 안내 설정 앞에서 줄을 바꿔 둘째 줄에 안내 설정과 '수정·삭제'(오른쪽 끝 한 묶음)를 둔다. */
  :root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row .ux-owner-break { display: block; flex: 0 0 100%; height: 0; }
  :root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row .ux-owner-break:first-child { display: none; }
  :root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row .app-action-edit { margin-left: auto !important; }
  :root:not([data-ux-off~="app-detail-consistency"]) .app-detail-action-owner-row :is(.app-action-edit, .app-action-delete) { flex-shrink: 0; }

  /* 업데이트 소식 쓰기 칸: 사진·버전 칸이 첫 줄, '취소'와 '소식 올리기'가 다음 줄 오른쪽 끝에 나란히. */
  :root:not([data-ux-off~="app-detail-consistency"]) #app-updates input[aria-label="버전"] { flex: 1 1 120px !important; }
  :root:not([data-ux-off~="app-detail-consistency"]) #app-updates input[aria-label="버전"] + span { flex: 0 0 100% !important; height: 0; }
  :root:not([data-ux-off~="app-detail-consistency"]) #app-updates input[aria-label="버전"] + span + button { margin-left: auto; }
}

/* apps-category-route.css (기본값) */
/* UX 개선안 apps-category-route: 분류 화면(/apps/c/분류)의 이동 줄을 /apps 분류 칩과 같은 부품으로(제이콥).
   칩 줄 마크업은 AppCategoryUx.tsx 가 스위치가 켜졌을 때만 그린다. 여기는 링크 칩을 /apps 칩(버튼)과 같은 모양으로 맞춘다.
   켜지지 않으면 아무 규칙도 걸리지 않는다. */
:root:not([data-ux-off~="apps-category-route"]) .app-collection .ux-category-route-nav { margin: -8px 0 24px; }
:root:not([data-ux-off~="apps-category-route"]) .app-collection .collection-category-nav .ux-category-chip {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 8px; box-sizing: border-box;
  min-height: 46px; padding: 10px var(--category-chip-padding, 14px); border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--text); font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
:root:not([data-ux-off~="apps-category-route"]) .app-collection .collection-category-nav .ux-category-chip:hover { background: var(--raised); }
:root:not([data-ux-off~="apps-category-route"]) .app-collection .collection-category-nav .ux-category-chip[aria-current="page"] { background: var(--primary); color: #1c1c1c; border-color: transparent; }
:root:not([data-ux-off~="apps-category-route"]) .app-collection .collection-category-nav .ux-category-chip span { font: 500 14px/1.4 var(--font-sans); font-variant-numeric: tabular-nums; }
:root:not([data-ux-off~="apps-category-route"]) .app-collection .collection-category-nav .ux-category-chip:focus-visible { outline: 2px solid var(--ui-focus, var(--text)); outline-offset: 2px; }
@media (max-width: 760px) {
  :root:not([data-ux-off~="apps-category-route"]) .app-collection .collection-category-nav .ux-category-chip { min-height: 42px; padding: 8px var(--category-chip-padding, 11px); gap: 5px; border-radius: 11px; font-size: 15px; }
  :root:not([data-ux-off~="apps-category-route"]) .app-collection .collection-category-nav .ux-category-chip span { font-size: 13px; }
  :root:not([data-ux-off~="apps-category-route"]) .app-collection .ux-category-route-nav { margin-bottom: 18px; }
}

/* back-button-placement.css (기본값) */
/* 개선안 back-button-placement: 뒤로·나가기 단추 자리와 모양 맞추기.
   · 공용 뒤로 단추(InlineBackButton)는 휴대폰에서 글자 없이 화살표만(운영자 지시 #81)이고, 누르는 자리만 40에서 44로 넓힌다.
   · 포스트잇 판 머리의 뒤로(.postit-back), 글쓰기 미리보기 창의 '작성으로', 쓴 글 미리보기 창의 '작성으로 돌아가기'도 같은 모양으로 맞춘다.
       넓은 화면: 테두리 알약(44 높이, 모서리 8, 글자 15 / 600, 화살표와 글자 사이 8)
       휴대폰: 테두리 없는 둥근 44 화살표
   · '오락실로'(게임 제작실 머리줄)와 만든 선생님 화면의 '뒤로'는 ArcadeStudio·ArcadeProfile 이 스위치가 켜졌을 때 제목 앞 왼쪽 위로 옮겨 그린다.
   · 매거진 기사 위 돌아가기 링크는 휴대폰에서 한 줄로 두고, 글자 화살표를 그림(SVG)으로 바꾼다. */

/* ── 공용 뒤로 단추: 휴대폰 누르는 자리 44 ─────────────────────────────── */
@media (max-width: 600px) {
  :root:not([data-ux-off~="back-button-placement"]) .inline-back.inline-back {
    width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; margin-left: -12px;
  }
  :root:not([data-ux-off~="back-button-placement"]) .inline-back.inline-back:not(:first-child) { margin-left: 0; }
  :root:not([data-ux-off~="back-button-placement"]) .detail-titlerow > .inline-back { margin-top: calc((var(--detail-title-line, 44px) - 44px) / 2); }
}

/* ── 포스트잇 판 머리의 뒤로 ───────────────────────────────────────────── */
@media (max-width: 600px) {
  :root:not([data-ux-off~="back-button-placement"]) .postit-back {
    flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 50%; margin-left: -10px;
  }
  :root:not([data-ux-off~="back-button-placement"]) .postit-back:active { background: color-mix(in srgb, var(--ui-text, #242824) 9%, transparent); }
}

/* ── 글쓰기 미리보기 창의 '작성으로' ───────────────────────────────────── */
:root:not([data-ux-off~="back-button-placement"]) .composer-bar-lead > .composer-bar-button[aria-label="작성으로"] {
  background: transparent; border-color: var(--ui-border, var(--cz-line)); gap: 8px; padding: 9px 12px; font: 600 15px/1.5 var(--font-sans, var(--cz-sans));
}
@media (max-width: 600px) {
  :root:not([data-ux-off~="back-button-placement"]) .composer-bar-lead > .composer-bar-button[aria-label="작성으로"] {
    width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; margin-left: -10px;
  }
  :root:not([data-ux-off~="back-button-placement"]) .composer-bar-lead > .composer-bar-button[aria-label="작성으로"] > svg { width: 21px; height: 21px; }
}

/* ── 쓴 글 미리보기 창의 '작성으로 돌아가기' ───────────────────────────── */
:root:not([data-ux-off~="back-button-placement"]) .draft-preview-toolbar > button:first-child {
  background: transparent; gap: 8px; padding: 9px 12px; font: 600 15px/1.5 var(--font-sans);
}
@media (max-width: 600px) {
  /* 글자는 화면에서만 감추고(font-size 0) 읽어 주는 이름은 그대로 둔다. */
  :root:not([data-ux-off~="back-button-placement"]) .draft-preview-toolbar > button:first-child {
    width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; border: 0; border-radius: 50%; font-size: 0; gap: 0; margin-left: -10px;
  }
  :root:not([data-ux-off~="back-button-placement"]) .draft-preview-toolbar > button:first-child > svg { width: 21px; height: 21px; }
}

/* ── 매거진 위 막대의 돌아가기 링크: 휴대폰에서 한 줄, 화살표는 그림 ───────── */
:root:not([data-ux-off~="back-button-placement"]) [data-mag-back-arrow] {
  display: inline-block; width: 14px; height: 14px; flex: none; font-size: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M20 12H5'/%3E%3Cpath d='M11.5 5.5L5 12l6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M20 12H5'/%3E%3Cpath d='M11.5 5.5L5 12l6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 600px) {
  :root:not([data-ux-off~="back-button-placement"]) [data-mag-topbar] > div:first-child { flex: none; }
  :root:not([data-ux-off~="back-button-placement"]) [data-mag-topbar] a { white-space: nowrap; flex: none; }
  /* 이름 옆의 '커뮤니티' 글자는 휴대폰에서 접는다(링크 이름은 aria-label 이 그대로 읽어 준다). */
  :root:not([data-ux-off~="back-button-placement"]) [data-mag-topbar] a .eyebrow { display: none; }
  :root:not([data-ux-off~="back-button-placement"]) [data-mag-topbar] > span { min-width: 0; text-align: right; }
}

/* book-reader-tap-size.css (기본값) */
/* UX 개선안 book-reader-tap-size · 책 창 단추와 그래프 점 누르기 쉽게.
 * 모든 규칙은 :root:not([data-ux-off~="book-reader-tap-size"]) 아래에서만 걸린다(꺼 두면 지금 화면 그대로).
 * 생각 그래프의 '처음엔 갈래별로 묶기 · 누른 곳에서 가장 가까운 점 하나 · 점 누르는 자리 휴대폰 44 / 데스크톱 32' 는
 * ThoughtKnowledgeGraph.tsx 의 useUxProposal("book-reader-tap-size") 분기가 맡는다.
 * 모듈 클래스 이름은 빌드마다 뒤에 붙는 글자가 달라서 [class*="파일이름_클래스"] 로 건다. */

/* ── 휴대폰·좁은 화면 (책 창 칸 단추, 머리줄) ─────────────────── */
@media (max-width: 960px) {
  /* 색인 탭: 높이 44(모서리 쪽 첫 탭은 48), 사이 8. 가로로 넘치면 밀어서 본다(이미 overflow-x:auto). */
  :root:not([data-ux-off~="book-reader-tap-size"]) [role="tablist"][aria-label="책 색인"] { gap: 8px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [role="tablist"][aria-label="책 색인"] > [role="tab"] { min-height: 44px; flex: 0 0 auto; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [role="tablist"][aria-label="책 색인"] > [role="tab"]:first-child { min-height: 48px; min-width: 48px; }

  /* 책 머리줄: 찾기칸 44, 공유 44x44, 닫기 44x44(같은 줄 단추와 같은 높이, 단추 문법), 공유와 선생님 얼굴 단추 사이 8. */
  :root:not([data-ux-off~="book-reader-tap-size"]) [data-book-header] button[aria-label="책 닫고 서재로"] { min-width: 44px; min-height: 44px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [data-book-header] [role="search"] { min-height: 46px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [data-book-header] [role="search"] input { min-height: 44px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [data-book-header] button[aria-label$="링크 공유"] { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [data-book-header] [class*="thought-tree_headerEnd"] { gap: 8px; }

  /* 책 안쪽 단추들. */
  :root:not([data-ux-off~="book-reader-tap-size"]) [class*="thought-tree_introMore"] { min-height: 44px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [class*="thought-tree_person"] > [class*="thought-tree_textButton"] { min-height: 44px; min-width: 44px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [class*="RequestBoard_"] button { min-height: 44px; }
  /* 책 첫 장의 고치기 단추 둘(실측 40x40 · 높이 43). */
  :root:not([data-ux-off~="book-reader-tap-size"]) button[aria-label="부제(한 줄 소개) 고치기"] { min-width: 44px; min-height: 44px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) button[class*="_introEdit"] { min-height: 44px; }

  /* 토론방: 목록으로 · 도구 44x44(화살표와 방 제목 사이 8), 다시 보이기 높이 44, 보내기 48x48. */
  :root:not([data-ux-off~="book-reader-tap-size"]) [aria-label="토론방"] [class*="ThoughtTreeRooms_backLink"] { min-width: 44px; min-height: 44px; gap: 8px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [aria-label="토론방"] button[aria-label="토론방 도구"] { min-width: 44px; min-height: 44px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [aria-label="토론방"] [class*="ThoughtTreeRooms_linkButton"] { min-height: 44px; padding-inline: 10px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [aria-label="토론방"] button.chat-send { min-width: 48px; min-height: 48px; }

  /* 연결 고치기 화면: 편집 줄 · 보기 줄 단추 44, 저장 48, 연결 지우기 44x44, 줄 사이 8. */
  :root:not([data-ux-off~="book-reader-tap-size"]) [class*="thought-tree_editbar"] { gap: 8px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [class*="thought-tree_editbar"] > button { min-height: 44px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [class*="thought-tree_editbar"] > button[class*="primary"] { min-height: 48px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [class*="thought-graph_toolbar"] { gap: 8px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [class*="thought-graph_toolbar"] [role="radiogroup"][aria-label="보는 방식"] > button,
  :root:not([data-ux-off~="book-reader-tap-size"]) [class*="thought-graph_toolbar"] > button,
  :root:not([data-ux-off~="book-reader-tap-size"]) [class*="thought-graph_legendToggle"] { min-height: 44px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [class*="thought-graph_panel"] button[aria-label$="연결 지우기"] { min-width: 44px; min-height: 44px; }
  :root:not([data-ux-off~="book-reader-tap-size"]) [class*="thought-graph_relationItem"] { row-gap: 8px; }
}

/* ── 생각 그래프 확대·축소·전체 보기: 44x44, 사이 8 (휴대폰·데스크톱 모두) ── */
:root:not([data-ux-off~="book-reader-tap-size"]) [class*="thought-knowledge_zoom"] { gap: 8px; }
:root:not([data-ux-off~="book-reader-tap-size"]) [class*="thought-knowledge_zoom"] button { width: 44px; height: 44px; }
/* 묶음 안 '생각 목록 펼치기' 단추도 같은 크기로. */
:root:not([data-ux-off~="book-reader-tap-size"]) [class*="thought-knowledge_expand"] { min-width: 44px; min-height: 44px; }

/* card-links-tap.css (기본값) */
/* UX 개선안 card-links-tap: 카드 안 작은 링크 누르기 쉽게(피츠·제이콥).
   1) 카드의 제목 링크 · 작성자 이름 · 후기 제목 링크의 누르는 높이를 휴대폰 44, 데스크톱 32 로 넓힌다.
      보이는 글자와 줄 높이는 그대로 두고, 링크 둘레의 보이지 않는 칸(::after)만 넓힌다.
   2) 카드 미리 보기 단추는 바꾸지 않는다: 그림 오른쪽 위의 눈 단추 그대로다(2026-10-06 형 지시 "미리보기가 왜 이상하게 됐어 우측 상단에 있던거에서").
      예전에 여기 있던 '그림 밖으로 옮기기 · 미리 보기 글자 · 돋보기 그림'은 뺐다.
   3) 홈 3D 갤러리에서 앞 카드에 가려진 옆 카드 부분은 이미 앞 카드가 누름을 받는다(가려진 쪽은 누르는 자리가 아니다). 별도 규칙 없음. */

/* 1. 링크 둘레 보이지 않는 칸 */
:root:not([data-ux-off~="card-links-tap"]) :is(
  .card-people-author,
  .collection-card-title-link,
  .dcard-title > a,
  .post-strip-who > a,
  .collection-preview-heading > a
) { position: relative; }
:root:not([data-ux-off~="card-links-tap"]) :is(
  .card-people-author,
  .collection-card-title-link,
  .dcard-title > a,
  .post-strip-who > a
)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* 링크가 이미 32 보다 크면 늘리지 않는다: (32 - 높이) / 2 가 음수일 때만 바깥으로 */
  top: min(0px, calc((32px - 100%) / -2));
  bottom: min(0px, calc((32px - 100%) / -2));
}
/* 작성자 이름 줄(card-people)이 40 이라 44 까지 못 닿는다: 줄 자체를 44 로 */
@media (max-width: 600px), (pointer: coarse) {
  :root:not([data-ux-off~="card-links-tap"]) .card-people { min-height: 44px; }
  :root:not([data-ux-off~="card-links-tap"]) :is(
    .card-people-author,
    .collection-card-title-link,
    .dcard-title > a,
    .post-strip-who > a
  )::after {
    top: min(0px, calc((44px - 100%) / -2));
    bottom: min(0px, calc((44px - 100%) / -2));
  }
}

/* choice-rows-tappable.css (기본값) */
/* UX 개선안 choice-rows-tappable: 체크칸·고르기 칸을 글자까지 포함한 줄 전체로 누르게 한다(피츠·힉스).
   대상: 신고 사유(ReportDialog) · 공지방 소개 요청(동의, 새 소식 고르기) · 이용 안내(AppUsagePolicyModal 의 고르기 칸·체크칸·
   허용/먼저 허락/허용 안 함 단추) · 앱과 자료 올리기 안내의 '다시 보지 않기'.
   줄은 모두 <label> 이라 글자를 눌러도 이미 켜지고 꺼진다. 여기서는 그 줄의 높이(휴대폰 44, 데스크톱 32)와 그림 크기(24, 데스크톱 20)를 넓힌다.
   신고 창의 사유 순서와 '미리 고른 사유 없애기'는 ReportDialog.tsx 가 같은 스위치로 처리한다.
   줄 안의 다른 링크(약관 보기 등)는 label 안에 없어 체크가 함께 바뀌지 않는다. */

/* 1. 줄 전체: 데스크톱 32 이상 */
:root:not([data-ux-off~="choice-rows-tappable"]) :is(
  .ux-choice-row,
  [aria-labelledby="announcement-request-dialog-title"] label:has(> input[type="checkbox"]),
  [data-modal-layer="10000"] .modal-panel-flex label:has(> input[type="checkbox"], > input[type="radio"]),
  [data-modal-layer="10030"] label:has(> input[type="checkbox"])
) {
  min-height: 32px !important;
  align-items: center !important;
  box-sizing: border-box;
}
:root:not([data-ux-off~="choice-rows-tappable"]) :is(
  .ux-choice-row,
  [aria-labelledby="announcement-request-dialog-title"] label:has(> input[type="checkbox"]),
  [data-modal-layer="10000"] .modal-panel-flex label:has(> input[type="checkbox"], > input[type="radio"]),
  [data-modal-layer="10030"] label:has(> input[type="checkbox"])
) > input:is([type="checkbox"], [type="radio"]) {
  width: 20px !important;
  height: 20px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}
/* 2. 이용 안내: 허용 / 먼저 허락 / 허용 안 함 */
:root:not([data-ux-off~="choice-rows-tappable"]) .ux-policy-choices > button,
:root:not([data-ux-off~="choice-rows-tappable"]) .ux-policy-row > button { min-height: 32px !important; }

/* 3. 휴대폰: 44 / 그림 24 / 가름 단추는 항목 이름 아래 줄에 같은 폭, 사이 8 */
@media (max-width: 600px), (pointer: coarse) {
  :root:not([data-ux-off~="choice-rows-tappable"]) :is(
    .ux-choice-row,
    [aria-labelledby="announcement-request-dialog-title"] label:has(> input[type="checkbox"]),
    [data-modal-layer="10000"] .modal-panel-flex label:has(> input[type="checkbox"], > input[type="radio"]),
    [data-modal-layer="10030"] label:has(> input[type="checkbox"])
  ) { min-height: 44px !important; }
  :root:not([data-ux-off~="choice-rows-tappable"]) :is(
    .ux-choice-row,
    [aria-labelledby="announcement-request-dialog-title"] label:has(> input[type="checkbox"]),
    [data-modal-layer="10000"] .modal-panel-flex label:has(> input[type="checkbox"], > input[type="radio"]),
    [data-modal-layer="10030"] label:has(> input[type="checkbox"])
  ) > input:is([type="checkbox"], [type="radio"]) { width: 24px !important; height: 24px !important; }

  :root:not([data-ux-off~="choice-rows-tappable"]) .ux-policy-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.45rem !important;
  }
  :root:not([data-ux-off~="choice-rows-tappable"]) .ux-policy-choices {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
    width: 100%;
  }
  :root:not([data-ux-off~="choice-rows-tappable"]) .ux-policy-choices > button,
  :root:not([data-ux-off~="choice-rows-tappable"]) .ux-policy-row > button {
    min-height: 44px !important;
    width: 100%;
    white-space: normal !important;
    word-break: keep-all;
  }
  /* 이용 안내 창 머리의 닫기: 구석 단추는 48 */
  :root:not([data-ux-off~="choice-rows-tappable"]) [data-modal-layer="10000"] > .modal-panel-flex > div:first-child > button[aria-label] {
    min-height: 48px !important;
    min-width: 48px;
  }
}

/* comment-inline-actions-tap.css (기본값) */
/* UX 개선안 comment-inline-actions-tap: 댓글·이름 옆 작은 단추 누르기 쉽게(피츠).
   그림과 글자 크기는 그대로 두고 누르는 자리만 휴대폰 44×44, 데스크톱 32×32 로 넓히고 서로 8 이상 띄운다.
   대상: 댓글 줄의 도름 · 답글 · 신고 · 수정 · 삭제, 이름 옆 쪽지 보내기, 신고 깃발, 작성자 이름 단추,
         포스트잇 창 댓글 도름, 댓글 입력줄의 사진 · 스티커 단추.
   공용 부품(.bk-comment-tools / .ux-comment-tools / .publication-comment-actions / .dorm-attach / DmToUserButton / ReportButton)의
   클래스와 aria-label 로 한 곳에서 걸어 글 읽기 · 앱 상세 · 자료 · 서재 · 포스트잇 창에 함께 적용한다. */

/* 1. 댓글 줄 단추 줄(도름 · 답글 · 삭제 · 신고): 단추 상자를 투명한 채로 넓히고 사이를 8 로 */
:root:not([data-ux-off~="comment-inline-actions-tap"]) :is(.bk-comment-tools, .ux-comment-tools, .publication-comment-actions, .postit-note-tools) {
  column-gap: 8px;
}
:root:not([data-ux-off~="comment-inline-actions-tap"]) .publication-app-page .publication-comment-actions { gap: 4px 8px !important; }
:root:not([data-ux-off~="comment-inline-actions-tap"]) :is(.bk-comment-tools, .ux-comment-tools, .publication-comment-actions) > :is(button, a) {
  min-height: 32px;
  min-width: 32px;
}
:root:not([data-ux-off~="comment-inline-actions-tap"]) :is(.bk-comment-tools, .ux-comment-tools, .publication-comment-actions) > button[aria-label="신고"] {
  /* 신고 깃발은 위아래 음수 여백(-0.3rem)으로 줄 높이를 지켜 왔다. 상자를 키워도 줄이 따라 늘지 않게 그대로 둔다 */
  justify-content: center;
}

/* 1-2. 포스트잇 칸(.postit-note-tools)과 포스트잇 창의 댓글 줄: 도름 · 답글 단추를 같은 크기로 */
:root:not([data-ux-off~="comment-inline-actions-tap"]) :is(.postit-note-tools, [role="dialog"][aria-label="포스트잇과 댓글"] :has(> .dorm-btn)) { column-gap: 8px; }
:root:not([data-ux-off~="comment-inline-actions-tap"]) :is(.postit-note-tools > button, [role="dialog"][aria-label="포스트잇과 댓글"] :is(.dorm-btn, .postit-link-btn)) {
  min-height: 32px;
  min-width: 32px;
}

/* 1-3. 서재 글(.channel-post)의 댓글 줄: 클래스 없는 줄 안에 도름 · 답글 · 신고가 한 줄로 서 있다 */
:root:not([data-ux-off~="comment-inline-actions-tap"]) .channel-post :has(> button.dorm-btn:not(.card-action)) { column-gap: 8px; }
:root:not([data-ux-off~="comment-inline-actions-tap"]) .channel-post :has(> button.dorm-btn:not(.card-action)) > button {
  min-height: 32px;
  min-width: 32px;
}

/* 2. 쪽지 보내기(이름 옆 종이비행기) · 신고 깃발(어디에 있든): 그림은 그대로, 둘레의 보이지 않는 칸만 넓힌다 */
:root:not([data-ux-off~="comment-inline-actions-tap"]) button[aria-label="쪽지 보내기"],
:root:not([data-ux-off~="comment-inline-actions-tap"]) button[aria-label="신고"],
:root:not([data-ux-off~="comment-inline-actions-tap"]) .dorm-attach > button,
:root:not([data-ux-off~="comment-inline-actions-tap"]) button.sb-comment-author,
:root:not([data-ux-off~="comment-inline-actions-tap"]) button.postit-author,
:root:not([data-ux-off~="comment-inline-actions-tap"]) button[data-ux-edit],
:root:not([data-ux-off~="comment-inline-actions-tap"]) a:has(> .teacher-chip-avatar) { position: relative; }
:root:not([data-ux-off~="comment-inline-actions-tap"]) button[aria-label="쪽지 보내기"]::after,
:root:not([data-ux-off~="comment-inline-actions-tap"]) button[aria-label="신고"]::after,
:root:not([data-ux-off~="comment-inline-actions-tap"]) .dorm-attach > button::after,
:root:not([data-ux-off~="comment-inline-actions-tap"]) button.sb-comment-author::after,
:root:not([data-ux-off~="comment-inline-actions-tap"]) button.postit-author::after,
:root:not([data-ux-off~="comment-inline-actions-tap"]) button[data-ux-edit]::after,
:root:not([data-ux-off~="comment-inline-actions-tap"]) a:has(> .teacher-chip-avatar)::after {
  content: "";
  position: absolute;
  /* 이미 32 보다 크면 늘리지 않는다 */
  inset: min(0px, calc((32px - 100%) / -2));
}
/* 이름 단추는 옆 단추(쪽지)와 가로로 맞닿으므로 위아래로만 넓힌다 */
:root:not([data-ux-off~="comment-inline-actions-tap"]) :is(button.sb-comment-author, button.postit-author, a:has(> .teacher-chip-avatar))::after {
  left: 0;
  right: 0;
}
/* 쪽지 단추는 이름 · 시각과 가로로 맞닿아 보이지 않는 칸이 이웃에 덮인다(실측 가로 31). 그래서 단추 상자 자체의 가로를 넓히고
   그림은 가운데에 둔다. 세로는 줄 높이를 바꾸지 않게 보이지 않는 칸으로만 넓힌다. */
:root:not([data-ux-off~="comment-inline-actions-tap"]) button[aria-label="쪽지 보내기"] {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; margin-inline: 0;
}
:root:not([data-ux-off~="comment-inline-actions-tap"]) button[aria-label="쪽지 보내기"]::after { left: 0; right: 0; top: min(0px, calc((32px - 100%) / -2)); bottom: min(0px, calc((32px - 100%) / -2)); }
@media (max-width: 600px), (pointer: coarse) {
  /* 오른쪽 이웃(신고 깃발)의 넓힌 칸이 4px 덮어서(실측 가로 40) 그만큼 띄운다. */
  :root:not([data-ux-off~="comment-inline-actions-tap"]) button[aria-label="쪽지 보내기"] { min-width: 44px; margin-inline-end: 6px; }
  :root:not([data-ux-off~="comment-inline-actions-tap"]) button[aria-label="쪽지 보내기"]::after { top: min(0px, calc((44px - 100%) / -2)); bottom: min(0px, calc((44px - 100%) / -2)); }
}

@media (max-width: 600px), (pointer: coarse) {
  :root:not([data-ux-off~="comment-inline-actions-tap"]) :is(.bk-comment-tools, .ux-comment-tools, .publication-comment-actions) > :is(button, a) {
    min-height: 44px;
    min-width: 44px;
  }
  :root:not([data-ux-off~="comment-inline-actions-tap"]) :is(.postit-note-tools > button, [role="dialog"][aria-label="포스트잇과 댓글"] :is(.dorm-btn, .postit-link-btn)) {
    min-height: 44px;
    min-width: 44px;
  }
  :root:not([data-ux-off~="comment-inline-actions-tap"]) .channel-post :has(> button.dorm-btn:not(.card-action)) > button {
    min-height: 44px;
    min-width: 44px;
  }
  /* 단추 줄이 줄바꿈될 때도 위아래 사이 4 이상 */
  :root:not([data-ux-off~="comment-inline-actions-tap"]) .publication-comment-actions { row-gap: 4px; }
  :root:not([data-ux-off~="comment-inline-actions-tap"]) button[aria-label="쪽지 보내기"]::after,
  :root:not([data-ux-off~="comment-inline-actions-tap"]) button[aria-label="신고"]::after,
  :root:not([data-ux-off~="comment-inline-actions-tap"]) .dorm-attach > button::after,
  :root:not([data-ux-off~="comment-inline-actions-tap"]) button.sb-comment-author::after,
  :root:not([data-ux-off~="comment-inline-actions-tap"]) button.postit-author::after,
  :root:not([data-ux-off~="comment-inline-actions-tap"]) button[data-ux-edit]::after,
  :root:not([data-ux-off~="comment-inline-actions-tap"]) a:has(> .teacher-chip-avatar)::after { inset: min(0px, calc((44px - 100%) / -2)); }
  :root:not([data-ux-off~="comment-inline-actions-tap"]) :is(button.sb-comment-author, button.postit-author, a:has(> .teacher-chip-avatar))::after { left: 0; right: 0; }
  /* 댓글 수정 줄의 취소 · 저장도 휴대폰에서는 44 */
  :root:not([data-ux-off~="comment-inline-actions-tap"]) [data-ux-comment-edit-actions] > button { min-height: 44px; }
  /* 사진 · 스티커 단추 사이 8 이상: 넓힌 칸(양쪽 6)이 서로 닿도록 사이를 12 로 */
  :root:not([data-ux-off~="comment-inline-actions-tap"]) .dorm-attach { gap: 12px !important; }
}

/* comment-row-unify.css (기본값) */
/* UX 개선안 comment-row-unify: 댓글 행동 줄을 하나의 부품으로. 켜 볼 때만(:root:not([data-ux-off~="comment-row-unify"])) 적용된다.
   대상 줄: 글 읽기(.bk-comment-tools) · 앱 상세(.publication-comment-actions) · 포스트잇 창과 책 추천(.ux-comment-tools).
   1) 차례는 어디서나 '도름 · 답글 · 삭제 · (오른쪽 끝) 신고'. 마크업 차례가 달라도 order 로 맞춘다.
   2) 줄은 자기 댓글 본문에 4px 로 붙는다(본문 상자 바닥 ~ 줄 위 칸).
   3) 줄 바닥과 다음 댓글 사이는 20px 이상.
   로그인 전 같은 입력줄·책 추천의 신고 단추는 PostComments.tsx 가 켰을 때만 그린다. */

:root:not([data-ux-off~="comment-row-unify"]) :is(.bk-comment-tools, .publication-comment-actions, .ux-comment-tools) {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px !important;
  margin-bottom: 0;
}
:root:not([data-ux-off~="comment-row-unify"]) :is(.bk-comment-tools, .publication-comment-actions, .ux-comment-tools) > .dorm-btn { order: 1; }
:root:not([data-ux-off~="comment-row-unify"]) :is(.bk-comment-tools, .publication-comment-actions, .ux-comment-tools) > [data-act="reply"] { order: 2; }
:root:not([data-ux-off~="comment-row-unify"]) :is(.bk-comment-tools, .publication-comment-actions, .ux-comment-tools) > [data-act="delete"] { order: 3; }
:root:not([data-ux-off~="comment-row-unify"]) :is(.bk-comment-tools, .publication-comment-actions, .ux-comment-tools) > button[aria-label="신고"] { order: 9; margin-left: auto !important; margin-right: 0; }

/* 글 읽기: 본문 아래 칸(글 본문 5.6px + 칸 사이 4px)을 걷어 줄이 본문에 4px 로 붙고, 다음 댓글과는 20px 이상 */
:root:not([data-ux-off~="comment-row-unify"]) .sb-comment-main > .bk-comment-tools { margin-top: -6px; margin-left: -8px; }
:root:not([data-ux-off~="comment-row-unify"]) .sb-comment--reply .sb-comment-main > .bk-comment-tools { margin-top: 0; }
:root:not([data-ux-off~="comment-row-unify"]) .story-board .sb-comment-main > .sb-replies { margin-top: 20px; }
:root:not([data-ux-off~="comment-row-unify"]) .story-board .sb-comment--reply { padding-top: 0; }
:root:not([data-ux-off~="comment-row-unify"]) .story-board .sb-comment--reply + .sb-comment--reply { margin-top: 20px; }

/* 앱 상세 */
:root:not([data-ux-off~="comment-row-unify"]) .publication-comment-actions { margin-top: 4px !important; }
/* 댓글 본문 아래 칸(12px)과 겹쳐 합쳐지므로 음수로 4px 만 남긴다 */
:root:not([data-ux-off~="comment-row-unify"]) .publication-comment:not(.publication-comment--reply) .publication-comment-actions { margin-top: -8px !important; }
:root:not([data-ux-off~="comment-row-unify"]) .publication-comments .publication-replies { margin-top: 8px; }
:root:not([data-ux-off~="comment-row-unify"]) .publication-comments .publication-replies { gap: 20px !important; }

/* 포스트잇 창 · 책 추천 */
:root:not([data-ux-off~="comment-row-unify"]) .ux-comment-tools { margin-top: 4px !important; }
:root:not([data-ux-off~="comment-row-unify"]) .postit-thread { gap: 24px; }
:root:not([data-ux-off~="comment-row-unify"]) .postit-reply-stack { gap: 20px; margin-top: 9px; }

/* 책 추천 · 활용 후기(PostComments): 댓글 사이·답글 사이 20 이상 */
:root:not([data-ux-off~="comment-row-unify"]) .ux-pc-list { gap: 24px !important; }
:root:not([data-ux-off~="comment-row-unify"]) .ux-pc-replies { gap: 20px !important; margin-top: 20px !important; }
/* 로그인 전 입력줄: 눌러 보라는 손 모양 */
:root:not([data-ux-off~="comment-row-unify"]) .ux-comment-guest, :root:not([data-ux-off~="comment-row-unify"]) .ux-comment-guest * { cursor: pointer; }

/* danger-actions-apart.css (기본값) */
/*
 * 개선안 danger-actions-apart: 삭제·신고·차단 단추 떼어 두기(근접성·폰 레스토프).
 * '삭제'·'신고'·'차단하기'를 같은 줄의 다른 단추와 16 이상 떼어 줄 맨 오른쪽 끝에 두고, 앞에 얇은 세로선을 긋는다.
 * 회원 탈퇴 단추의 적갈색 바탕·경고 그림·확인 문구 칸 바탕은 DeleteAccountClient.tsx 가 이 개선안이 켜졌을 때만 그린다.
 *
 * 만드는 법: 위험 단추는 flex 줄 안에서 margin-left:auto 로 오른쪽 끝에 붙이고, 바로 앞 단추에는 오른쪽 여백을 더해
 * 줄이 좁아도 16 아래로 붙지 않게 한다(앞 단추 :has(+ 위험 단추)). 세로선은 위험 단추의 ::before 로 그려 새 줄이 생기지 않는다.
 */

/* ── 줄 안의 위험 단추: 맨 오른쪽 끝 + 앞에 세로선 ──────────────────────────── */
:root:not([data-ux-off~="danger-actions-apart"]) :is(
  /* 내 댓글의 '삭제'(자료·앱·글·서재 댓글). 댓글 줄 문법(도름 · 답글 · 삭제 … 끝 신고)대로 답글 옆에 두고
     세로선과 여백으로만 뗀다. 줄 끝으로 보내면 화면마다 자리가 갈린다(2026-10-05 검증 F4). */
  .publication-comments button[style*="color: var(--danger)"]:not([style*="display"]),
  [data-screen-id="resources"] button[style*="color: var(--danger)"][style*="font-size: 0.7"],
  .channel-post button[style*="color: var(--ui-danger)"][style*="opacity"],
  .sb-comment .sb-danger,
  :is(.bk-comment-tools, .publication-comment-actions, .ux-comment-tools) > button[data-act="delete"]
) {
  position: relative;
  margin-left: 8px !important;
  --ux-sep-left: -9px;
}
:root:not([data-ux-off~="danger-actions-apart"]) :is(
  /* 신고 깃발(글 머리·댓글·행동 줄·포스트잇 판 머리·서재 책 행동 줄·후기 상세 행동 줄 공용) */
  button[aria-label="신고"],
  /* 내 글 행동 줄의 '삭제' */
  .sb-owner-tools .bk-btn--danger,
  .channel-mini-btn--danger,
  .bd-del,
  [data-screen-id="resources"] button[style*="min-height: 44px"][style*="color: var(--danger)"],
  /* 업데이트 노트 '삭제', 내 후기 '삭제' */
  button[aria-label="업데이트 소식 삭제"],
  .usage-panel-mine button[data-danger]
) {
  position: relative;
  margin-left: auto !important;
  --ux-sep-left: 0px;
}
/* 앞 단추에 오른쪽 여백을 더해 위험 단추와 16 이상 띄운다(줄이 꽉 차도 붙지 않는다).
 * :has 안에서는 고정된 행동 표식을 사용한다. [style]을 검사하면 회전·이동 중인 다른 요소의
 * 인라인 transform 변경까지 문서 전체의 :has 재계산을 일으킨다. */
:root:not([data-ux-off~="danger-actions-apart"]) :has(+ :is(
  button[aria-label="신고"],
  .publication-comments button[data-act="delete"],
  .sb-owner-tools .bk-btn--danger,
  .channel-mini-btn--danger,
  .bd-del,
  [data-screen-id="resources"] button[data-resource-delete],
  button[aria-label="업데이트 소식 삭제"],
  .usage-panel-mine button[data-danger]
)):not(input, textarea, select) {
  margin-right: 14px;
}
/* 세로선(높이 16, 위험 단추 앞 가장자리) */
:root:not([data-ux-off~="danger-actions-apart"]) :is(
  button[aria-label="신고"],
  .publication-comments button[style*="color: var(--danger)"]:not([style*="display"]),
  [data-screen-id="resources"] button[style*="color: var(--danger)"][style*="font-size: 0.7"],
  .channel-post button[style*="color: var(--ui-danger)"][style*="opacity"],
  .sb-comment .sb-danger,
  :is(.bk-comment-tools, .publication-comment-actions, .ux-comment-tools) > button[data-act="delete"],
  .sb-owner-tools .bk-btn--danger,
  .channel-mini-btn--danger,
  .bd-del,
  [data-screen-id="resources"] button[style*="min-height: 44px"][style*="color: var(--danger)"],
  button[aria-label="업데이트 소식 삭제"],
  .usage-panel-mine button[data-danger]
)::before {
  content: "";
  position: absolute;
  left: var(--ux-sep-left, 0px);
  top: 50%;
  width: 1px;
  height: 16px;
  transform: translateY(-50%);
  background: var(--ui-line-strong, var(--ui-border, #C4C9C1));
  pointer-events: none;
}
/* 안쪽 여백이 없는 글자 단추는 단추 몸 바깥(8)에 선을 긋는다. */
:root:not([data-ux-off~="danger-actions-apart"]) :is(
  .publication-comments button[style*="color: var(--danger)"]:not([style*="display"]),
  [data-screen-id="resources"] button[style*="color: var(--danger)"][style*="font-size: 0.7"],
  .channel-post button[style*="color: var(--ui-danger)"][style*="opacity"],
  .sb-comment .sb-danger,
  button[aria-label="업데이트 소식 삭제"],
  .usage-panel-mine button[data-danger]
) { --ux-sep-left: -9px; }
/* 테두리가 있는 작은 단추(글 행동 줄 삭제·서재 책 삭제·자료 삭제)는 테두리 바깥에 선을 긋는다. */
:root:not([data-ux-off~="danger-actions-apart"]) :is(.sb-owner-tools .bk-btn--danger, .channel-mini-btn--danger, .bd-del, [data-screen-id="resources"] button[style*="min-height: 44px"][style*="color: var(--danger)"]) { --ux-sep-left: -11px; }
:root:not([data-ux-off~="danger-actions-apart"]) :is(.sb-owner-tools .bk-btn--danger, .channel-mini-btn--danger, .bd-del, [data-screen-id="resources"] button[style*="min-height: 44px"][style*="color: var(--danger)"]) { margin-left: auto !important; }

/* 신고 깃발이 행동 줄에서 공유보다 앞에 있던 줄(서재 책·후기 상세)은 맨 끝으로 보낸다. */
:root:not([data-ux-off~="danger-actions-apart"]) :is(.card-actions, .action-row) > button[aria-label="신고"] { order: 99; }

/* ── 내 앱 관리 줄: '삭제'를 '수정'에서 20 떼고 앞에 세로선 ───────────────── */
:root:not([data-ux-off~="danger-actions-apart"]) .app-action-delete {
  position: relative;
  margin-left: 20px !important;
}
:root:not([data-ux-off~="danger-actions-apart"]) .app-action-delete::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 1px;
  height: 20px;
  transform: translateY(-50%);
  background: var(--ui-line-strong, var(--ui-border, #C4C9C1));
  pointer-events: none;
}

/* ── 업데이트 노트 카드: '수정' 오른쪽에 16 이상 ───────────────────────────── */
:root:not([data-ux-off~="danger-actions-apart"]) button[aria-label="업데이트 소식 수정"] { margin-right: 4px; }

/* ── 포스트잇 판 머리(이야기·토픽·오락실 생각 판 공용): 신고를 알림·공유에서 떼어 맨 끝에 ── */
:root:not([data-ux-off~="danger-actions-apart"]) .postit-actions { column-gap: 8px; }
:root:not([data-ux-off~="danger-actions-apart"]) .postit-actions > button[aria-label="신고"] { order: 99; }

/* ── 프로필 카드: '이 선생님 차단하기'를 위 행동 줄에서 28 띄우고 가는 선 위로 ──────── */
:root:not([data-ux-off~="danger-actions-apart"]) body[data-react-shared-overlays] [data-react-overlay="profile"] .profile-card .profile-card-block {
  margin-top: 28px !important;
  border-top: 1px solid var(--shared-ui-border, var(--ui-border, #C4C9C1)) !important;
  border-radius: 0 !important;
}

/* ── 쪽지 대화 머리: '대화방 나가기'를 '대화 설정'에서 24 떼고 앞에 세로선 ─────────── */
:root:not([data-ux-off~="danger-actions-apart"]) .mx-head-tools > button[aria-label="대화방 나가기"] {
  position: relative;
  margin-left: 24px !important;
}
:root:not([data-ux-off~="danger-actions-apart"]) .mx-head-tools > button[aria-label="대화방 나가기"]::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 1px;
  height: 20px;
  transform: translateY(-50%);
  background: var(--ui-line-strong, var(--ui-border, #C4C9C1));
  pointer-events: none;
}

/* ── 도름이 아이템 요청 카드: '올리지 않기'를 '고쳐 주세요'에서 24 떼고 위험 색 글자로 ────── */
:root:not([data-ux-off~="danger-actions-apart"]) .doreumi-request-secondary { gap: 24px; }
:root:not([data-ux-off~="danger-actions-apart"]) .doreumi-request-secondary > button:last-child {
  color: var(--ui-danger, #963E39);
  border-color: color-mix(in srgb, var(--ui-danger, #963E39) 55%, var(--ui-border, #C4C9C1));
}

/* ── 공지 고치기 화면: 폰에서 '삭제'를 위 단추 묶음에서 24 떼어 맨 아래에 따로 ──────────── */
@media (max-width: 720px) {
  :root:not([data-ux-off~="danger-actions-apart"]) .composer-footer > .notice-delete { margin-top: 24px; }
}

/* ── 프로필 고치기: '회원 탈퇴'를 구분선 아래로 24 떼어 둔다 ───────────────────────── */
:root:not([data-ux-off~="danger-actions-apart"]) .fixed.inset-0 :has(> a[href="/account/delete"]) {
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--ui-border, #C4C9C1) !important;
  align-self: stretch !important;
  justify-content: center;
}

/* ── 댓글 줄: 신고·삭제 앞 단추에 더하던 오른쪽 여백을 걷는다. 차례를 order 로 맞추는 줄에서는 DOM 의 앞 단추와
   화면의 앞 단추가 달라 엉뚱한 사이가 22px 로 벌어졌다(2026-10-05 검증 F5). 떼기는 신고 margin-left:auto ·
   삭제 margin-left 8 + 세로선이 맡는다. */
:root:not([data-ux-off~="danger-actions-apart"]) :is(.bk-comment-tools, .publication-comment-actions, .ux-comment-tools) > * { margin-right: 0 !important; }

/* dialog-buttons-standard.css (기본값) */
/*
 * 개선안 dialog-buttons-standard: 안내 창 단추 크기와 닫기 자리 맞추기(피츠·제이콥·근접성).
 * 휴대폰(좁은 화면이거나 손가락으로 누르는 기기): 닫기 44×44, 단추·체크칸 줄 44, 주된 단추 48. 데스크톱: 닫기 36 이상.
 * 단추 사이는 8 이상. 모든 창의 닫기는 오른쪽 위. 내용을 끝까지 내려야 닫히던 창(인증 방법 안내)은
 * 제목 줄 오른쪽에 닫기를 더한다(그 단추는 AuthForm.tsx 가 이 개선안이 켜졌을 때만 그린다).
 * 책 읽기 창은 왼쪽 위 닫기를 같은 줄 오른쪽 끝으로 옮긴다(새 줄 없음).
 */

/* ── 휴대폰 ─────────────────────────────────────────────── */
@media (max-width: 760px), (pointer: coarse) {
  /* 공용 운영자 팝업 틀(PopupFrame)과 도름이 안내 수첩: 같은 수첩 단추를 쓴다. */
  :root:not([data-ux-off~="dialog-buttons-standard"]) :is([data-popup-frame], [data-notebook]) [class*="iconButton"] {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  }
  :root:not([data-ux-off~="dialog-buttons-standard"]) :is([data-popup-frame], [data-notebook]) [class*="navButton"] { min-height: 44px; }
  :root:not([data-ux-off~="dialog-buttons-standard"]) :is([data-popup-frame], [data-notebook]) [class*="navPrimary"] { min-height: 48px; }
  :root:not([data-ux-off~="dialog-buttons-standard"]) [data-popup-frame] [class*="noticeNever"] { min-height: 44px; }

  /* 테마 창: '완료'가 주된 단추 */
  :root:not([data-ux-off~="dialog-buttons-standard"]) .theme-settings-footer button { min-height: 44px; }
  :root:not([data-ux-off~="dialog-buttons-standard"]) .theme-settings-footer .theme-done { min-height: 48px; }

  /* 확인 창: 두 단추 모두 48 높이, 최소 폭 88(되돌리기 어려운 실행이라 둘 다 크게) */
  :root:not([data-ux-off~="dialog-buttons-standard"]) [data-react-overlay="confirm"] [role="alertdialog"] .desktop-dialog-actions { gap: 12px; }
  :root:not([data-ux-off~="dialog-buttons-standard"]) [data-react-overlay="confirm"] [role="alertdialog"] .desktop-dialog-actions button {
    min-height: 48px !important; min-width: 88px;
  }

  /* 상업 앱 안내 창: 쪽지 보내기(주된 단추) 48, 닫기 글자 단추 44, 닫기 그림 44 */
  :root:not([data-ux-off~="dialog-buttons-standard"]) [data-react-overlay="commercial"] .modal-panel a { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  :root:not([data-ux-off~="dialog-buttons-standard"]) [data-react-overlay="commercial"] .modal-panel button { min-height: 44px; }
  :root:not([data-ux-off~="dialog-buttons-standard"]) [data-react-overlay="commercial"] .modal-panel button[aria-label] { min-width: 44px; }

  /* 앱 업데이트 띠: 닫기 44×44, '업데이트 받으러 가기' 48, '나중에' 44, 사이 8 */
  :root:not([data-ux-off~="dialog-buttons-standard"]) [data-react-overlay="update"] [role="status"] button[aria-label] {
    min-width: 44px !important; min-height: 44px !important; justify-content: center; align-items: center;
  }
  :root:not([data-ux-off~="dialog-buttons-standard"]) [data-react-overlay="update"] [role="status"] > div:last-child { gap: 8px !important; }
  :root:not([data-ux-off~="dialog-buttons-standard"]) [data-react-overlay="update"] [role="status"] > div:last-child > button { min-height: 44px !important; }
  :root:not([data-ux-off~="dialog-buttons-standard"]) [data-react-overlay="update"] [role="status"] > div:last-child > button:first-child { min-height: 48px !important; }

  /* 자동 로그아웃 안내: 화면 양옆 12까지 넓혀 글이 두세 줄에 들고 '계속하기'는 48 */
  :root:not([data-ux-off~="dialog-buttons-standard"]) [role="alertdialog"][aria-live="assertive"] {
    left: 12px !important; right: 12px !important; transform: none !important; max-width: none !important;
  }
  :root:not([data-ux-off~="dialog-buttons-standard"]) [role="alertdialog"][aria-live="assertive"] > button {
    min-height: 48px !important; padding-inline: 16px !important;
  }

  /* 오락실 '게임 등록하는 법' 창: 닫기 누름 영역 48×48(그림 크기는 그대로) */
  :root:not([data-ux-off~="dialog-buttons-standard"]) .modal-panel.arcade-root > div:first-child > button[aria-label="닫기"] {
    min-width: 48px !important; min-height: 48px !important; justify-content: center;
  }

  /* 로그인 안내 창과 로그인 화면: 고르기·구글·비밀번호 찾기·가입하기 44, 로그인(올리기) 48 */
  :root:not([data-ux-off~="dialog-buttons-standard"]) .auth-form button { min-height: 44px !important; }
  :root:not([data-ux-off~="dialog-buttons-standard"]) .auth-form button[type="submit"] { min-height: 48px !important; }
  :root:not([data-ux-off~="dialog-buttons-standard"]) .auth-form button[aria-pressed] { min-width: 64px; }
  /* '교사 인증 방법 미리 보기'는 44 높이 줄 전체가 눌리게 */
  :root:not([data-ux-off~="dialog-buttons-standard"]) [data-react-overlay="auth"] details > summary {
    display: flex; align-items: center; min-height: 44px;
  }
  /* 인증 안내 창(가입한 미인증 회원): 체크칸 줄·나중에 할게요·자세히 보기 44 */
  :root:not([data-ux-off~="dialog-buttons-standard"]) [data-react-overlay="auth"] .modal-panel label { min-height: 44px; }
  :root:not([data-ux-off~="dialog-buttons-standard"]) [data-react-overlay="auth"] .modal-panel a[href="/auth/redeem"] {
    display: flex; align-items: center; justify-content: center; min-height: 48px;
  }
  /* 로그인 화면의 가입 안내 창(인증 방법 안내): 체크칸 줄 44, 확인했어요 48 */
  :root:not([data-ux-off~="dialog-buttons-standard"]) .auth-guide-panel label { min-height: 44px; }
  :root:not([data-ux-off~="dialog-buttons-standard"]) .auth-guide-panel .auth-guide-close { min-height: 48px !important; }
}

/* ── 데스크톱: 닫기 36 이상, '교사 인증 방법 미리 보기' 줄 32 ───────────── */
@media (min-width: 761px) and (pointer: fine) {
  :root:not([data-ux-off~="dialog-buttons-standard"]) .modal-panel.arcade-root > div:first-child > button[aria-label="닫기"] {
    min-width: 36px !important; min-height: 36px !important; justify-content: center;
  }
  :root:not([data-ux-off~="dialog-buttons-standard"]) [data-react-overlay="auth"] details > summary {
    display: flex; align-items: center; min-height: 32px;
  }
  :root:not([data-ux-off~="dialog-buttons-standard"]) [role="alertdialog"][aria-live="assertive"] > button { min-height: 36px !important; }
}

/* ── 어느 기기나 ──────────────────────────────────────────── */
/* 책 읽기 창: 닫기를 같은 줄 오른쪽 끝으로(다른 창과 같은 자리). 운영자 단추 묶음은 그 왼쪽. */
:root:not([data-ux-off~="dialog-buttons-standard"]) .book-controls .book-close { order: 3; }
:root:not([data-ux-off~="dialog-buttons-standard"]) .book-controls > div { order: 2; }
/* 오락실 안내 창이 열려 있을 때 도름이 관심 안내 말풍선이 창의 주된 단추를 덮지 않게 숨긴다. */
:root:not([data-ux-off~="dialog-buttons-standard"]):has(.modal-panel.arcade-root) .doreumi-hint { display: none !important; }
/* 인증 방법 안내 창에 더한 닫기(제목 줄 오른쪽, AuthForm.tsx 가 켰을 때만 그린다). */
:root:not([data-ux-off~="dialog-buttons-standard"]) .auth-guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
:root:not([data-ux-off~="dialog-buttons-standard"]) .auth-guide-head h2 { flex: 1 1 auto; min-width: 0; }
:root:not([data-ux-off~="dialog-buttons-standard"]) .auth-guide-panel .auth-guide-x {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px !important; margin: -8px -8px 0 0; padding: 0 !important;
  border: 0 !important; border-radius: 8px !important; background: transparent !important;
  color: var(--ui-muted, #5C635D) !important; cursor: pointer;
}
:root:not([data-ux-off~="dialog-buttons-standard"]) .auth-guide-panel .auth-guide-x:hover { background: var(--ui-surface, #E3E5E0) !important; }

/* dorm-button-unify.css (기본값) */
/* UX 개선안 dorm-button-unify: 도름 단추 모양·자리 하나로. 켜 볼 때만(:root:not([data-ux-off~="dorm-button-unify"])) 적용된다.
   1) 누르면 어디를 눌러도 도름 주기(2026-10-07 운영자 지시, 숫자 칸으로 목록 열기는 걷었다). 준 선생님 목록은
      휴대폰 길게 누르기 · 데스크톱 마우스 올려 두기 · 키보드로 이미 준 단추 누르기(DormVotersLayer).
   2) 이미 준 상태 표시는 카드·상세·댓글·글 화면 모두 '주황 옅은 면 + 굵은 글씨' 한 가지.
      색깔 포스트잇 면(postit-stat · postit-chip)은 면 색에 맞춰야 해서 뺀다.
   3) 준 뒤에는 큰 행동 줄에서 '6도름 · 줬어요'처럼 글자로도 알린다.
   4) 글 화면(이야기·자료)의 도름 단추는 먹색 2px 테두리로 가장 또렷하게. 앱 상세는 '앱 열기'가 주된 행동이라 뺀다.
   5) 글 머리 정보 줄 오른쪽 끝의 작은 도름 단추(FreeBoard 가 켰을 때만 그린다)는 줄 높이를 지키며 앉는다. */

/* 1) 한 칸: 어디를 눌러도 도름 주기(2026-10-07). 칸 사이 가는 선·숫자 점선 밑줄은 2026-10-06 운영자 지시로 걷었다("얇은 점선 같은거랑 도름 숫자 밑에 밑줄 … 정리해"). */
:root:not([data-ux-off~="dorm-button-unify"]) .dorm-btn.is-given { cursor: pointer !important; }

/* 2) 준 상태 한 가지 */
:root:not([data-ux-off~="dorm-button-unify"]) .dorm-btn.is-given:not(.postit-stat):not(.postit-chip) {
  background: color-mix(in srgb, var(--ui-primary, #79ADE3) 42%, transparent) !important;
  color: var(--ui-text, #242824) !important;
  font-weight: 700 !important;
  border-radius: 8px;
}
:root:not([data-ux-off~="dorm-button-unify"]) .dorm-btn.is-given:not(.postit-stat):not(.postit-chip) > * { color: inherit; }

/* 3) 준 뒤 글자 알림 */
:root:not([data-ux-off~="dorm-button-unify"]) .card-actions--lg .card-action--dorm.is-given .card-action-count::after { content: " · 줬어요"; white-space: pre; }

/* 4) 글 화면 도름 단추 또렷하게 */
:root:not([data-ux-off~="dorm-button-unify"]) .sb-actions .card-actions--lg .card-action--dorm,
:root:not([data-ux-off~="dorm-button-unify"]) .detail-action-row .card-actions--lg .card-action--dorm {
  border: 2px solid var(--ui-text, #242824);
  background-color: transparent;
}
:root:not([data-ux-off~="dorm-button-unify"]) .sb-actions .card-actions--lg .card-action--dorm.is-given,
:root:not([data-ux-off~="dorm-button-unify"]) .detail-action-row .card-actions--lg .card-action--dorm.is-given {
  background: color-mix(in srgb, var(--ui-primary, #79ADE3) 42%, transparent) !important;
}

/* 5) 글 머리 줄의 작은 도름 단추 */
:root:not([data-ux-off~="dorm-button-unify"]) .post-strip-stats .ux-strip-dorm { margin-left: 2px; }

/* form-label-spacing.css (기본값) */
/* 개선안 form-label-spacing: 이름표·안내를 자기 칸에 붙이기.
   규칙: 이름표와 자기 칸 사이는 4~6px, 이름표와 위쪽 내용 사이는 16px 이상(소제목은 위 틈이 아래 틈의 1.5배 이상).
   마크업을 바꿔야 하는 곳은 컴포넌트가 스위치를 켰을 때만 그린다: 프로필 고치기(닉네임 안내), 에듀집 주소 안내(CertPreRegister),
   교사 전용 칸(TeacherOnlyContentField), 도름 인증 거르기 팝업(CertMarksFilter). 나머지는 이 파일의 꾸밈만으로 한다. */

/* ── 책 등록 요청(book.appearance.editor): 라벨 위 틈 28px, 자기 칸과는 4~8px ───────────── */
:root:not([data-ux-off~="form-label-spacing"]) .dorms-folio.v08 [data-component-id="book.appearance.editor"] :is(.lib-editor-fields, .lib-more-body) { gap: 28px; }
:root:not([data-ux-off~="form-label-spacing"]) .dorms-folio.v08 [data-component-id="book.appearance.editor"] .lib-row { row-gap: 28px; }
:root:not([data-ux-off~="form-label-spacing"]) .dorms-folio.v08 [data-component-id="book.appearance.editor"] .lib-field { gap: 4px; }
:root:not([data-ux-off~="form-label-spacing"]) .dorms-folio.v08 [data-component-id="book.appearance.editor"] .lib-field > legend { margin-bottom: 4px; padding-bottom: 0; }

/* ── 이어쓰기 창(thought composer): '내용' 이름표는 도구줄 바로 위 8px, 위 내용과는 24px ───── */
:root:not([data-ux-off~="form-label-spacing"]) #thought-body-label { margin: 8px 0 -8px; }

/* ── 책 안 '이 책을 쓰는 사람들' 같은 소제목: 위 틈을 아래 틈의 1.5배 이상으로, 아래 카드에 붙인다 ── */
:root:not([data-ux-off~="form-label-spacing"]) .server-book .bk-cover-block { margin-top: 14px; gap: 10px; }

/* ── 색인 고치기 창(book-sheet): 칸 사이 16px 이상, 지우기 단추는 순서 바꾸기 단추와 떼어 둔다 ── */
:root:not([data-ux-off~="form-label-spacing"]) .bk-sheet .bk-index-row { gap: 16px; }
:root:not([data-ux-off~="form-label-spacing"]) .bk-sheet .bk-index-roles { row-gap: 16px; }
:root:not([data-ux-off~="form-label-spacing"]) .bk-sheet .bk-index-roles label { gap: 4px; }
:root:not([data-ux-off~="form-label-spacing"]) .bk-sheet .bk-index-top > .bk-icon-button[aria-label$="색인 지우기"] { margin-left: 16px; }

/* ── 개인 서재 만들기 창 ─────────────────────────────────────────────────────── */
:root:not([data-ux-off~="form-label-spacing"]) .personal-create { row-gap: 4px; }
:root:not([data-ux-off~="form-label-spacing"]) .dorms-folio .personal-create .bk-label { margin-bottom: 0; }
:root:not([data-ux-off~="form-label-spacing"]) .personal-create .bk-help { margin-bottom: 20px; }
:root:not([data-ux-off~="form-label-spacing"]) .dorms-folio .personal-create .personal-create-intro { margin-top: 24px; }

/* ── 도름 사용 내역 창: '전체 기간' 제목은 아래 내역에 붙인다(위 30px, 아래 12px) ─────────── */
:root:not([data-ux-off~="form-label-spacing"]) .wallet-history-filters { margin-bottom: 30px; }
:root:not([data-ux-off~="form-label-spacing"]) .wallet-history-period { margin: 30px 0 12px; }

/* ── 책 올리기 화면(분야·지은이 등 '꼭 정할 것' 칸): 이름표 위 틈 18px, 자기 칸과는 8px ─────── */
:root:not([data-ux-off~="form-label-spacing"]) [data-composer^="book"] .composer-essential-row { padding-top: 18px; }
@media (min-width: 721px) {
  :root:not([data-ux-off~="form-label-spacing"]) [data-composer^="book"] .composer-essential-row { padding-top: 14px; }
}

/* ── 일주 팀웍: 보기 전환 단추는 결과 상자 쪽(8px)에, 위 입력 상자와는 24px 이상 ──────────── */
:root:not([data-ux-off~="form-label-spacing"]) .ilju-root .ilju-tabs { margin-top: 8px; margin-bottom: calc(8px - 1.15rem); }
@media (min-width: 720px) {
  :root:not([data-ux-off~="form-label-spacing"]) .ilju-root .ilju-tabs { margin-bottom: calc(8px - 1.35rem); }
}

/* header-and-menus.css (기본값) */
/* 개선안 header-and-menus: 머리글 단추와 메뉴 묶음 정리.
   · 휴대폰 머리글의 돋보기·계정·메뉴 단추 44(서랍 닫기는 48), 단추 사이 8. 펼친 검색줄도 높이 44, 실행 48, 닫기 44.
   · 데스크톱 주 메뉴: 이름 링크와 펼침 단추가 겹치던 6px를 없애고 펼침 단추 폭을 40으로.
   · 계정 메뉴(AccountMenu)는 '내 공간'과 '설정' 사이, 그리고 로그아웃 위에 가는 선(로그아웃은 맨 끝에 따로).
   · 테마 색 견본(ThemeSettings)은 따뜻한 색 / 차분한 색 두 줄, 관심사·업무 칩(PreferencesPanel, DoreumiPreferencesForm)은 '수업'과 '업무' 소제목. */

/* ── 휴대폰 머리글 ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root:not([data-ux-off~="header-and-menus"]) .dorms-folio .site-topbar { grid-template-columns: minmax(0, 1fr) 44px 96px; grid-template-rows: 44px; gap: 8px; --topbar-tool: 44px; }
  :root:not([data-ux-off~="header-and-menus"]) .dorms-folio .site-topbar .site-topbar-search { width: 44px; }
  :root:not([data-ux-off~="header-and-menus"]) .dorms-folio .site-topbar .site-topbar-tools { width: 96px; min-width: 96px; gap: 8px; }
  :root:not([data-ux-off~="header-and-menus"]) .dorms-folio .site-topbar .site-topbar-tools-panel, :root:not([data-ux-off~="header-and-menus"]) .dorms-folio .site-topbar .site-topbar-tools-panel .imported-header-controls { width: 44px; min-width: 44px; }
  :root:not([data-ux-off~="header-and-menus"]) .dorms-folio .site-topbar :is(.mobile-header-search-trigger, .home-profile) { flex-basis: 44px; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; }
  :root:not([data-ux-off~="header-and-menus"]) .dorms-folio .site-topbar .site-topbar-tools-trigger { flex-basis: 44px; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } /* 같은 줄 검색·로그인과 같은 44(단추 문법 1px 안) */
  :root:not([data-ux-off~="header-and-menus"]) .dorms-folio .site-topbar :is(.mobile-header-search-trigger, .site-topbar-tools-trigger, .home-profile) svg { width: 20px; height: 20px; }

  /* 펼친 검색줄: 입력칸 44, 실행 48, 닫기·지우기 44, 이웃 사이 8. 머리글 줄(44)의 가운데에 맞춰 세운다. */
  :root:not([data-ux-off~="header-and-menus"]) .mobile-inline-search { top: env(safe-area-inset-top, 0px); height: 56px; gap: 8px; padding: 0 4px 0 8px; border-radius: 28px; }
  :root:not([data-ux-off~="header-and-menus"]) .mobile-inline-search input { height: 44px; }
  :root:not([data-ux-off~="header-and-menus"]) .mobile-inline-search-scope select { height: 44px; border-radius: 22px; }
  :root:not([data-ux-off~="header-and-menus"]) .mobile-inline-search-scope svg { top: 15px; }
  :root:not([data-ux-off~="header-and-menus"]) .mobile-inline-search button { width: 44px; height: 44px; }
  :root:not([data-ux-off~="header-and-menus"]) .mobile-inline-search .mobile-inline-search-submit { width: 48px; height: 48px; }

  /* 서랍 닫기 단추는 48. 중심은 그대로 두고 키운다. */
  :root:not([data-ux-off~="header-and-menus"]) .mobile-header-sheet-shade.mobile-header-drawer .mobile-header-sheet-heading .mobile-header-sheet-close {
    width: 48px; height: 48px;
    top: calc(var(--drawer-anchor-y, 28px) - 24px - env(safe-area-inset-top, 0px));
    right: calc(var(--drawer-anchor-x, 31px) - 24px - env(safe-area-inset-right, 0px));
  }
}

/* ── 데스크톱 주 메뉴: 이름과 펼침 단추가 겹치지 않게 ───────────────────── */
:root:not([data-ux-off~="header-and-menus"]) .dorms-folio .site-topbar .site-topbar-nav .site-primary-group > a + .site-category-trigger { margin-left: 0; min-width: 40px; padding-inline: 2px; }

/* ── 계정 메뉴: 내 공간 / 설정 / 로그아웃 ─────────────────────────────── */
:root:not([data-ux-off~="header-and-menus"]) body [data-shared-popover] nav.account-menu :is(a, button).account-menu-row[data-group-start] { position: relative; margin-top: 10px; }
:root:not([data-ux-off~="header-and-menus"]) body [data-shared-popover] nav.account-menu :is(a, button).account-menu-row[data-group-start]::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: -6px; height: 1px; background: var(--overlay-border, var(--ui-border, #C4C9C1));
}

/* ── 테마 색 견본: 따뜻한 색 / 차분한 색 ──────────────────────────────── */
:root:not([data-ux-off~="header-and-menus"]) .dorms-folio .theme-swatch-groups { display: grid; gap: 12px; margin-bottom: 16px; }
:root:not([data-ux-off~="header-and-menus"]) .dorms-folio .theme-swatch-groups .theme-swatches { margin-bottom: 0; }

/* ── 관심사·업무 칩: 수업 / 업무 소제목 ───────────────────────────────── */
:root:not([data-ux-off~="header-and-menus"]) .prefs-panel .prefs-chip-group + .prefs-chip-group { margin-top: 14px; }
:root:not([data-ux-off~="header-and-menus"]) .prefs-panel .prefs-subtitle { margin: 0 0 8px; color: var(--ui-muted); font-size: 13px; font-weight: 650; line-height: 1.4; }
:root:not([data-ux-off~="header-and-menus"]) .doreumi-preferences-form .doreumi-choice-group + .doreumi-choice-group { margin-top: 12px; }
:root:not([data-ux-off~="header-and-menus"]) .doreumi-preferences-form .doreumi-choice-subtitle { margin: 0 0 6px; color: var(--ui-muted, var(--shared-ui-muted, #5C635D)); font-size: 13px; font-weight: 650; line-height: 1.4; }

/* phone-fit-no-clip.css (기본값) */
/* UX 개선안 phone-fit-no-clip: 휴대폰에서 화면 밖으로 잘리던 줄을 화면 안으로.
   1) 글 상세 '운영자 설정': 고르기 칸을 칸 폭에 맞추고 '옮기기'는 아래 줄 오른쪽으로.
   2) 유용한 링크 머리줄: '링크 올리기'를 설명 줄 오른쪽 끝으로 옮겨 채운 단추로(새 줄 없이 도구 줄이 화면 안에, 채운 단추는 지금 포인트 색 그대로).
   3) 게시판 묶음 줄: 네 칸이 휴대폰 한 줄에 들어가게(넘치면 BoardGroupNav 가 지금 칸까지 밀어 둔다). */

/* 1. 운영자 설정 */
@media (max-width: 600px) {
  /* 고르기 칸은 가장 긴 항목 폭(약 404)만큼 상자를 밀어내지 않게, 칸 폭에 맞춘다. */
  :root:not([data-ux-off~="phone-fit-no-clip"]) section:has(> div > [data-admin-post-classifier]),
  :root:not([data-ux-off~="phone-fit-no-clip"]) [data-admin-post-classifier],
  :root:not([data-ux-off~="phone-fit-no-clip"]) [data-admin-featured] { min-width: 0; max-width: 100%; box-sizing: border-box; }
  :root:not([data-ux-off~="phone-fit-no-clip"]) [data-admin-post-classifier] > div:first-child { flex-wrap: wrap !important; row-gap: 0.5rem !important; }
  :root:not([data-ux-off~="phone-fit-no-clip"]) [data-admin-post-classifier] > div:first-child > select {
    width: 100%;
    min-width: 0 !important;
    /* '게시 위치' 이름표 옆을 다 차지해 '옮기기'가 아래 줄로 내려가게 한다. */
    flex: 1 1 calc(100% - 5rem) !important;
  }
  :root:not([data-ux-off~="phone-fit-no-clip"]) [data-admin-post-classifier] > div:first-child > button { margin-left: auto; }
}

/* 2. 유용한 링크 머리줄 */
@media (max-width: 600px) {
  :root:not([data-ux-off~="phone-fit-no-clip"]) .dorms-folio .useful-links .ul-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; column-gap: 8px; row-gap: 0;
  }
  :root:not([data-ux-off~="phone-fit-no-clip"]) .dorms-folio .useful-links .ul-head > .bk-head-title,
  :root:not([data-ux-off~="phone-fit-no-clip"]) .dorms-folio .useful-links .ul-head > .bk-head-actions { display: contents; }
  :root:not([data-ux-off~="phone-fit-no-clip"]) .dorms-folio .useful-links .ul-head .bk-head-note { order: 1; flex: 1 1 0; min-width: 0; }
  :root:not([data-ux-off~="phone-fit-no-clip"]) .dorms-folio .useful-links .ul-head .bk-head-actions > .bk-btn--primary { order: 2; flex: none; }
  /* 설명 줄과 도구 줄 사이를 끊는 보이지 않는 줄바꿈 */
  :root:not([data-ux-off~="phone-fit-no-clip"]) .dorms-folio .useful-links .ul-head::after { content: ""; order: 3; flex: 0 0 100%; height: 8px; }
  :root:not([data-ux-off~="phone-fit-no-clip"]) .dorms-folio .useful-links .ul-head .bk-head-actions > :not(.bk-btn--primary) { order: 4; }
}

/* 3. 게시판 묶음 줄: 칸 안 여백과 칸 사이를 조금 줄여 네 칸이 한 줄(약 354)에 들어가게 */
@media (max-width: 520px) {
  :root:not([data-ux-off~="phone-fit-no-clip"]) .bgn-row { gap: 0.3rem; }
  :root:not([data-ux-off~="phone-fit-no-clip"]) .bgn-item { padding-inline: 0.5rem; gap: 0.3rem; }
}

/* preview-same-as-real.css (기본값) */
/* 개선안 preview-same-as-real: 글쓰기 미리보기를 실제 모습과 똑같이.
   ① 게시판 글쓰기 미리보기 카드에 도름 · 댓글 · 즐겨찾기 · 공유 줄(눌리지 않음)은 FreeBoard 가 스위치를 켰을 때 그린다.
   ② 게시판 글쓰기 미리보기(.composer-preview-overlay)와 포스트잇·서재 미리보기(.draft-publication-preview)의 위쪽 막대를
      같은 모양으로 맞춘다: 왼쪽 '작성으로 돌아가기', 가운데 이름, 오른쪽 게시 화면/카드 전환. 마크업은 두 부품이 스위치를 켰을 때 .ux-preview-bar 로 그린다. */
:root:not([data-ux-off~="preview-same-as-real"]) .ux-preview-bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  box-sizing: border-box; width: 100%; max-width: 900px; min-height: 64px; margin: 0 auto;
}
:root:not([data-ux-off~="preview-same-as-real"]) .composer-preview-overlay .ux-preview-bar { padding: 10px var(--cz-gutter, 24px); }
:root:not([data-ux-off~="preview-same-as-real"]) .draft-preview-toolbar.ux-preview-bar { padding: 10px 0; }
:root:not([data-ux-off~="preview-same-as-real"]) .ux-preview-back {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; justify-self: start;
  box-sizing: border-box; min-width: 44px; min-height: 44px; width: auto; padding: 0 14px;
  border: 1px solid var(--cz-line, var(--ui-border, #C4C9C1)); border-radius: 8px;
  background: var(--cz-raised, var(--ui-card, #F7F8F4)); color: var(--cz-ink, var(--ui-text, #242824));
  font: 650 15px/1.3 var(--cz-sans, var(--font-sans, sans-serif)); white-space: nowrap; cursor: pointer;
}
:root:not([data-ux-off~="preview-same-as-real"]) .ux-preview-back:hover { border-color: var(--cz-line-strong, var(--ui-line-strong, #747D73)); }
/* 글쓰기 틀의 폰 규칙(.composer-bar-button .composer-bar-label 숨김)이 이 단추의 글자를 지우지 않게 한다. */
:root:not([data-ux-off~="preview-same-as-real"]) .ux-preview-back .composer-bar-label { display: inline !important; }
:root:not([data-ux-off~="preview-same-as-real"]) .ux-preview-name {
  min-width: 0; text-align: center; color: var(--cz-muted, var(--ui-muted, #5C635D)); font: 500 14px/1.4 var(--cz-sans, var(--font-sans, sans-serif));
  white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; flex: none;
}
@media (min-width: 721px) {
  /* 넓은 화면에서는 이름이 정말 가운데에 오도록 양쪽 칸을 같은 폭으로. */
  :root:not([data-ux-off~="preview-same-as-real"]) .ux-preview-bar { grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  :root:not([data-ux-off~="preview-same-as-real"]) .ux-preview-bar > :last-child { justify-self: end; }
}
@media (max-width: 720px) {
  :root:not([data-ux-off~="preview-same-as-real"]) .ux-preview-bar { column-gap: 8px; min-height: 56px; }
  :root:not([data-ux-off~="preview-same-as-real"]) .ux-preview-back { padding: 0 10px; font-size: 13px; gap: 5px; }
  :root:not([data-ux-off~="preview-same-as-real"]) .ux-preview-name { font-size: 12px; line-height: 1.3; }
  :root:not([data-ux-off~="preview-same-as-real"]) .ux-preview-bar .composer-preview-mode button { min-height: 36px; padding: 0 9px; font-size: 13px; }
}

/* resources-page-unify.css (기본값) */
/*
 * UX 개선안 resources-page-unify: 자료 화면을 다른 게시판과 같은 틀로(2026-10-04 검토 스위치).
 * 모든 규칙은 :root:not([data-ux-off~="resources-page-unify"]) 아래에서만 걸린다. 스위치를 끄면 지금 화면 그대로다.
 * 짝 코드: src/components/design/ResourcesBoard.tsx 의 useUxProposal("resources-page-unify") 갈래.
 */

/* 1. 제목줄: 앱·자료 화면과 같은 틀(.collection-heading). 휴대폰에서도 공유·알림·'자료 올리기'를 제목 오른쪽 같은 줄에 둔다(새 줄 없음). */
:root:not([data-ux-off~="resources-page-unify"]) .app-collection .resource-heading-unify {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
:root:not([data-ux-off~="resources-page-unify"]) .app-collection .resource-heading-unify .resource-heading-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
:root:not([data-ux-off~="resources-page-unify"]) .app-collection .resource-heading-unify h1 {
  min-width: 0;
  white-space: nowrap;
}
:root:not([data-ux-off~="resources-page-unify"]) .app-collection .resource-heading-unify .collection-heading-actions {
  display: flex;
  align-items: center;
  width: auto;
  flex-shrink: 0;
}
:root:not([data-ux-off~="resources-page-unify"]) .app-collection .resource-heading-unify .collection-button--primary {
  grid-column: auto;
  margin: 0;
}
@media (max-width: 520px) {
  :root:not([data-ux-off~="resources-page-unify"]) .app-collection .resource-heading-unify { gap: 8px; }
  :root:not([data-ux-off~="resources-page-unify"]) .app-collection .resource-heading-unify h1 { font-size: 32px; }
  :root:not([data-ux-off~="resources-page-unify"]) .app-collection .resource-heading-unify .collection-heading-actions { gap: 6px; }
  :root:not([data-ux-off~="resources-page-unify"]) .app-collection .resource-heading-unify .collection-button--primary { padding-inline: 12px; }
}

/* 2. 글 머리: 이야기 글과 같은 작성자 띠(PostMetaStrip). 전체 날짜는 넓은 화면에서만, 며칠 전 표기가 없을 때는 늘 보인다. */
:root:not([data-ux-off~="resources-page-unify"]) [data-screen-id="resources"] .publication-document .post-strip { margin: 0; }
:root:not([data-ux-off~="resources-page-unify"]) [data-screen-id="resources"] .publication-document .sb-strip-fulltime {
  display: none;
  padding: 0 8px;
  color: var(--ui-muted);
  font: var(--bk-meta);
  white-space: nowrap;
}
:root:not([data-ux-off~="resources-page-unify"]) [data-screen-id="resources"] .publication-document .sb-strip-fulltime.is-only-time { display: inline; }
@media (min-width: 1300px) {
  :root:not([data-ux-off~="resources-page-unify"]) [data-screen-id="resources"] .publication-document .sb-strip-fulltime { display: inline; }
}
@media (max-width: 600px) {
  /* 좁은 화면에서 띠가 넘치면 화면 밖으로 밀리지 않고 한 칸 안에서 접힌다. */
  :root:not([data-ux-off~="resources-page-unify"]) [data-screen-id="resources"] .publication-document .post-strip { height: auto; min-height: 44px; flex-wrap: wrap; row-gap: 0; }
  :root:not([data-ux-off~="resources-page-unify"]) [data-screen-id="resources"] .publication-document .post-strip-stats { flex-wrap: wrap; }
}

/* 3. 파일 칸: 제목·작성자 줄 바로 아래. '자료 받기'는 파일 이름 바로 옆(16px)에 붙는다. */
:root:not([data-ux-off~="resources-page-unify"]) [data-screen-id="resources"] .resource-files {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
:root:not([data-ux-off~="resources-page-unify"]) [data-screen-id="resources"] .resource-file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--ui-border, #C4C9C1);
  border-radius: 12px;
  background: var(--ui-card, #F7F8F4);
}
:root:not([data-ux-off~="resources-page-unify"]) [data-screen-id="resources"] .resource-file-glyph {
  display: inline-flex;
  flex: none;
  color: var(--ui-muted, #5C635D);
}
:root:not([data-ux-off~="resources-page-unify"]) [data-screen-id="resources"] .resource-file-name {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--ui-text, #242824);
  font: 600 15px/1.45 var(--font-sans);
  word-break: keep-all;
  overflow-wrap: break-word;
}
:root:not([data-ux-off~="resources-page-unify"]) [data-screen-id="resources"] .resource-file-size {
  margin-left: 8px;
  color: var(--ui-muted, #5C635D);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
:root:not([data-ux-off~="resources-page-unify"]) [data-screen-id="resources"] .resource-file-get {
  flex: none;
  margin-left: 6px;
  min-height: 44px;
}
/* 본문의 PDF·HTML 미리보기 카드에 있던 '다운로드'는 위 파일 칸이 맡으니 겹쳐 두지 않는다. */
:root:not([data-ux-off~="resources-page-unify"]) [data-screen-id="resources"] .publication-body .publication-attachment-download { display: none !important; }

/* 4. 검색 결과: 앱·자료 화면과 같은 자료 카드. 자료 한 건 사이는 32 이상. */
:root:not([data-ux-off~="resources-page-unify"]) .app-collection .resource-search-results.collection-grid { gap: 32px; }
:root:not([data-ux-off~="resources-page-unify"]) .app-collection .resource-results-heading { margin-top: 8px; }

/* selected-state-marker.css (기본값) */
/* UX 개선안 selected-state-marker: 고른 칩·탭을 색 말고 모양으로도 표시한다(폰 레스토프·힉스).
   운영자 지시(2026-10-02 #76)로 켜진 단추는 모두 포인트 색 채움이므로 채움은 그대로 두고, 모양 표시 세 가지만 더한다.
     1) 굵은 글씨  2) 진한 글자색 테두리 1px(안쪽 그림자라 칩 크기가 변하지 않는다)  3) 체크 그림(글자가 있는 칩만, SVG 마스크)
   주 메뉴의 지금 위치는 아래 진한 밑줄을 더 굵게 한다.
   화면 읽기 프로그램용 '고른 상태'는 이 칩들이 이미 aria-pressed 로 갖고 있다. 즐겨찾기 폴더 고르기 창의 줄만
   FavoriteFolderPicker.tsx 가 같은 스위치로 aria-current 를 더한다. */

/* 1. 고른 칩: 굵게 + 진한 테두리 */
:root:not([data-ux-off~="selected-state-marker"]) :is(
  .story-kind-tabs button,
  .bk-chips > button,
  .bk-chips > a,
  .bk-seg > button,
  .bk-seg > a,
  .lib-kinds .lib-kind,
  .lib-genres .lib-genre,
  [role="group"][aria-label="이어갈 방법"] button
):is([aria-pressed="true"], [aria-current="true"], [aria-current="page"], .on) {
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px var(--ui-text, #242824) !important;
}
/* 라이브러리 종류 칩은 이미 진한 잉크 면이라 테두리가 보이지 않는다. 대신 굵게와 체크가 모양 표시를 맡는다. */
:root:not([data-ux-off~="selected-state-marker"]) .lib-kinds .lib-kind.on { box-shadow: none !important; }

/* 2. 체크 그림(글자만 있는 칩. 그림이 든 단추(보기 전환·자물쇠 칩)에는 넣지 않는다) */
:root:not([data-ux-off~="selected-state-marker"]) :is(
  .story-kind-tabs button,
  .bk-chips > button,
  .bk-chips > a,
  .bk-seg > button,
  .bk-seg > a,
  .lib-kinds .lib-kind,
  .lib-genres .lib-genre,
  [role="group"][aria-label="이어갈 방법"] button
):is([aria-pressed="true"], [aria-current="true"], [aria-current="page"], .on):not(:has(svg)):not(.sb-view > button, .channel-view > button)::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-right: 5px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 3. 주 메뉴: 지금 위치 밑줄을 진한 글자색 3px 로 */
:root:not([data-ux-off~="selected-state-marker"]) .dorms-folio .site-primary-navigation a[aria-current="page"] {
  border-bottom-color: var(--ui-text, #242824);
  box-shadow: inset 0 -3px 0 var(--ui-text, #242824);
}

/* 4. 즐겨찾기 폴더 고르기 창: 지금 고른 줄에 진한 바탕띠(굵은 글씨와 체크는 이미 있다) */
:root:not([data-ux-off~="selected-state-marker"]) [data-ux-row][aria-current="true"] {
  box-shadow: inset 0 0 0 1px var(--ui-text, #242824);
}

/* skeleton-match-layout.css (기본값) */
/* UX 개선안 skeleton-match-layout: 불러오는 중 화면을 실제 모양에 맞추기.
   DualLoading.tsx 가 옛 틀(.ux-skl-old)과 새 틀(.ux-skl-new)을 함께 싣는다. 새 틀은 기본이 display:none(인라인)이고
   여기서 켜졌을 때만 보이게 한다. 크기는 실제 홈·서재·팀웍·매거진을 잰 값(데스크톱 1440, 휴대폰 390)이다. */
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-old { display: none !important; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-new { display: block !important; padding: 0 44px 24px; min-height: 70vh; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-home { padding-top: 8px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-new .skl { border-radius: 12px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-strip { height: 53px; border-radius: 14px !important; }

/* 홈 */
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-home .ux-skl-cols { display: grid; grid-template-columns: minmax(0, 652px) minmax(0, 1fr); gap: 0 48px; margin-top: 16px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; margin-bottom: 9px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-title { height: 32px; width: 150px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-btn { height: 44px; width: 110px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-card { height: min(560px, calc(100vh - 280px)); min-height: 280px; border-radius: 16px !important; }

/* 서재: 큰 소개 상자, 탭 줄, 책 네 권 */
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-narrow { max-width: 1052px; margin: 24px auto 0; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-hero { height: 306px; border-radius: 16px !important; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-tabs { display: flex; gap: 8px; margin: 24px 0 16px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-tab { height: 46px; width: 98px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-books { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-book { height: 340px; border-radius: 12px !important; }

/* 팀웍: 큰 제목, 한 줄 설명, 카드 두 장 */
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-wide { padding: 32px 24px 0; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-h1 { height: 52px; width: min(340px, 70%); margin-bottom: 14px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-line { height: 18px; width: min(560px, 90%); margin-bottom: 20px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-tile { height: 96px; border-radius: 14px !important; }

/* 매거진: 게시판 묶음 줄, 제목, 기사 목록 */
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-list { max-width: 860px; margin: 32px 0 0 24px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-list .ux-skl-tabs { margin: 0 0 20px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-pill { height: 49px; width: 120px; border-radius: 999px !important; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-issue { padding: 22px 0; border-top: 1px solid var(--ui-border); }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-kicker { height: 12px; width: 180px; margin-bottom: 10px; }
:root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-issue-title { height: 30px; width: min(620px, 90%); margin-bottom: 12px; }

/* 휴대폰 */
@media (max-width: 767px) {
  :root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-new { padding: 0 18px 24px; }
  :root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-new.ux-skl-home { padding-top: 8px; }
  :root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-titlerow { margin-bottom: 0; }
  :root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-home .ux-skl-cols { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  :root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-side { display: none; }
  :root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-card { height: min(573px, calc(100svh - 270px)); margin-inline: -18px; border-radius: 0 !important; }
  :root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-hero { height: 220px; }
  :root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  :root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-book { height: 260px; }
  :root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-wide { padding: 20px 0 0; }
  :root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-pair { grid-template-columns: minmax(0, 1fr); }
  :root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-list { margin-left: 0; }
  :root:not([data-ux-off~="skeleton-match-layout"]) .ux-skl-pill { width: 22%; }
}

/* tap-size-sitewide.css (기본값) */
/* UX 개선안 tap-size-sitewide: 작은 단추·칸을 손가락 크기로(피츠).
   휴대폰(600px 이하 또는 손가락 화면)은 누르는 자리 44, 창을 마무리하는 주된 단추와 화면 구석의 닫기는 48,
   데스크톱은 32 이상으로 넓힌다. 보이는 크기와 글자는 그대로 두고 둘레의 보이지 않는 칸(::after)만 넓히는 것이 기본이다.
   입력칸·고르기 칸처럼 가상 요소가 그려지지 않는 것과 둘레가 잘리는 상자, 주된 단추는 보이는 높이를 직접 올린다(휴대폰 블록).
   기준값은 아래 변수로 정한다(스위치가 꺼져 있으면 변수 자체가 없다).
     --ux-hit        일반 단추 누르는 자리(휴대폰 44 · 데스크톱 32)
     --ux-hit-corner 화면 구석의 닫기 누르는 자리(휴대폰 48 · 데스크톱 36)
     --ux-hit-main   창을 마무리하는 주된 단추의 보이는 높이(휴대폰 48)
   이웃 단추 사이는 8 이상: 넓힌 칸이 이웃 단추 위를 덮지 않게 사이를 직접 벌린다.
   보이는 높이를 올리는 규칙은 모두 휴대폰 블록에만 있다(데스크톱에서 이미 더 큰 단추를 줄이지 않으려고). */

:root:not([data-ux-off~="tap-size-sitewide"]) { --ux-hit: 32px; --ux-hit-corner: 36px; }
@media (max-width: 600px), (pointer: coarse) {
  :root:not([data-ux-off~="tap-size-sitewide"]) { --ux-hit: 44px; --ux-hit-corner: 48px; --ux-hit-main: 48px; }
}

/* ══ A. 보이지 않는 칸(::after)으로 넓히는 단추: 데스크톱 32 · 휴대폰 44 ═══════════════════════ */
:root:not([data-ux-off~="tap-size-sitewide"]) :is(
  .region-text-button,
  .mx-inbox-head > button,
  .notice-copybtn,
  [data-notification-panel] > div:first-child > button,
  [data-ux-revoke],
  .postit-title-line > a,
  .dorm-attach > button,
  button[aria-label="쪽지 보내기"],
  button[aria-label="신고"],
  button.sb-comment-author,
  .weekly-banner-label.weekly-banner-all,
  .postit-dialog-close,
  .composer-bar-close,
  button.usage-help-btn,
  button.usage-panel-action,
  button[aria-label$="폴더 관리"],
  .mx-row-name,
  .usage-panel-mine > button,
  .weekly-post-author > a,
  .desktop-file-header button[aria-expanded],
  .post-publish-announcement-shell button[aria-label="닫기"],
  [data-ux-tap]
) { position: relative; }
:root:not([data-ux-off~="tap-size-sitewide"]) :is(
  .region-text-button,
  .mx-inbox-head > button,
  .notice-copybtn,
  [data-notification-panel] > div:first-child > button,
  [data-ux-revoke],
  .postit-title-line > a,
  .dorm-attach > button,
  button[aria-label="쪽지 보내기"],
  button[aria-label="신고"],
  button.sb-comment-author,
  button.usage-help-btn,
  button.usage-panel-action,
  button[aria-label$="폴더 관리"],
  .mx-row-name,
  .usage-panel-mine > button,
  .weekly-post-author > a,
  .desktop-file-header button[aria-expanded],
  .post-publish-announcement-shell button[aria-label="닫기"],
  [data-ux-tap]
)::after {
  content: "";
  position: absolute;
  /* 이미 기준보다 크면 늘리지 않는다(음수일 때만 바깥으로) */
  inset: min(0px, calc((var(--ux-hit) - 100%) / -2));
}
/* 글자 이름은 옆 글자와 맞닿으니 위아래로만 */
:root:not([data-ux-off~="tap-size-sitewide"]) :is(.postit-title-line > a, button.sb-comment-author)::after { left: 0; right: 0; }
/* 화면 구석의 닫기 · 지난주 띠의 '전체': 구석 기준(휴대폰 48) */
:root:not([data-ux-off~="tap-size-sitewide"]) :is(.postit-dialog-close, .composer-bar-close, .weekly-banner-label.weekly-banner-all)::after {
  content: "";
  position: absolute;
  inset: min(0px, calc((var(--ux-hit-corner) - 100%) / -2));
}
/* 쪽지 단추 양옆을 2px 씩 열어 이웃과 12px 가 되게(넓힌 칸이 이웃의 눌리는 자리를 덮지 않는다) */
:root:not([data-ux-off~="tap-size-sitewide"]) button[aria-label="쪽지 보내기"] { margin-inline: 2px; }
/* 댓글 입력줄의 사진 · 스티커 단추 사이 12 */
:root:not([data-ux-off~="tap-size-sitewide"]) .dorm-attach { gap: 12px !important; }
/* 이미 휴대폰 밀도 작업의 보이지 않는 칸(::after, 세로 45)이 있는 단추: 가로도 기준까지 */
:root:not([data-ux-off~="tap-size-sitewide"]) .dorms-folio.v08 :is(
  .bk-head .bk-btn,
  .story-board .sb-toolbar button,
  .story-board .sb-actions :is(button, a):not(.bk-icon-btn)
)::after {
  left: min(0px, calc((var(--ux-hit) - 100%) / -2));
  right: min(0px, calc((var(--ux-hit) - 100%) / -2));
}
:root:not([data-ux-off~="tap-size-sitewide"]) .story-board .sb-view { gap: 4px; }
/* 색 견본: 사이를 14 로 벌리고 가로 누르는 자리를 기준까지 */
:root:not([data-ux-off~="tap-size-sitewide"]) .postit-swatches { gap: 14px; }
:root:not([data-ux-off~="tap-size-sitewide"]) .postit-swatch { position: relative; }
:root:not([data-ux-off~="tap-size-sitewide"]) .postit-swatch::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: min(0px, calc((var(--ux-hit) - 100%) / -2));
  right: min(0px, calc((var(--ux-hit) - 100%) / -2));
}

/* ══ B. 휴대폰만: 보이는 높이를 직접 올리는 것(칸이 잘리거나 입력칸이라 가상 칸을 쓸 수 없는 곳, 주된 단추) ══ */
@media (max-width: 600px), (pointer: coarse) {
  /* 글쓰기 큰 창(이야기 · 서재 · 앱 · 링크 올리기 공용): 글 | 포스트잇 전환 · 글 종류 칩 · 제목 칸 · 구석 닫기 */
  :root:not([data-ux-off~="tap-size-sitewide"]) .composer-switch > :is(button, a) { min-height: var(--ux-hit); }
  :root:not([data-ux-off~="tap-size-sitewide"]) .composer-switch > :is(button, a):first-child { min-width: 56px; }
  :root:not([data-ux-off~="tap-size-sitewide"]) .composer-switch { gap: 4px; }
  :root:not([data-ux-off~="tap-size-sitewide"]) .composer-chips > button { min-height: var(--ux-hit); }
  :root:not([data-ux-off~="tap-size-sitewide"]) :is(.composer-root, [data-composer]) :is(textarea.publication-title, textarea.publication-deck, textarea.composer-link-title) { min-height: var(--ux-hit); }
  :root:not([data-ux-off~="tap-size-sitewide"]) .composer-bar-close { min-width: var(--ux-hit-corner); min-height: var(--ux-hit-corner); }
  /* 열람 조건 줄 */
  :root:not([data-ux-off~="tap-size-sitewide"]) details.dorm-access-control > summary { min-height: var(--ux-hit) !important; }
  /* 댓글 도구 줄(도름 · 답글 · 삭제 · 신고)과 포스트잇 칸 · 창: 사이 8, 상자를 기준까지 */
  :root:not([data-ux-off~="tap-size-sitewide"]) :is(.bk-comment-tools, .ux-comment-tools, .publication-comment-actions, .postit-note-tools) { column-gap: 8px; }
  :root:not([data-ux-off~="tap-size-sitewide"]) :is(.bk-comment-tools, .ux-comment-tools, .publication-comment-actions) > :is(button, a) { min-height: var(--ux-hit); min-width: var(--ux-hit); }
  :root:not([data-ux-off~="tap-size-sitewide"]) :is(
    .postit-note-tools > button,
    [role="dialog"][aria-label="포스트잇과 댓글"] :is(.dorm-btn, .postit-link-btn),
    button.postit-author
  ) { min-height: var(--ux-hit); min-width: var(--ux-hit); }
  /* 스티커 고르는 창: 위쪽 칸 · 찾기 · 분류 */
  :root:not([data-ux-off~="tap-size-sitewide"]) [data-sticker-picker] [class*="StickerPicker_tabs"] { gap: 8px; }
  :root:not([data-ux-off~="tap-size-sitewide"]) [data-sticker-picker] [class*="StickerPicker_tabs"] > button { min-height: var(--ux-hit); }
  :root:not([data-ux-off~="tap-size-sitewide"]) [data-sticker-picker] [class*="StickerPicker_filters"] :is(input, select) { min-height: var(--ux-hit); }
  /* 이 게시판에서 검색(돋보기): 둘레가 잘리는 상자(overflow: hidden)라 보이지 않는 칸을 쓸 수 없다. 상자 자체를 44 로 */
  :root:not([data-ux-off~="tap-size-sitewide"]) :is(
    div:has(> form > button[aria-label="이 게시판에서 검색"]),
    form:has(> button[aria-label="이 게시판에서 검색"])
  ) { min-height: calc(var(--ux-hit) + 2px) !important; }
  :root:not([data-ux-off~="tap-size-sitewide"]) form:has(> button[aria-label="이 게시판에서 검색"]) { min-width: calc(var(--ux-hit) + 2px) !important; }
  /* 포스트잇 판 */
  :root:not([data-ux-off~="tap-size-sitewide"]) .postit-dialog-foot .postit-btn { min-height: var(--ux-hit); }
  /* 지역 · 쪽지 */
  :root:not([data-ux-off~="tap-size-sitewide"]) [aria-label="내 지역 등록"] :is(button:not(.region-text-button), select) { min-height: var(--ux-hit); }
  :root:not([data-ux-off~="tap-size-sitewide"]) .region-primary-button { min-height: var(--ux-hit); }
  :root:not([data-ux-off~="tap-size-sitewide"]) .ranking-view-toggle > button { min-height: var(--ux-hit); }
  :root:not([data-ux-off~="tap-size-sitewide"]) .region-page-actions > button { min-width: var(--ux-hit); min-height: var(--ux-hit); }
  /* 즐겨찾기 폴더 고르는 창: 줄마다 */
  :root:not([data-ux-off~="tap-size-sitewide"]) [data-ux-row] { min-height: var(--ux-hit); }
  /* 창을 마무리하는 주된 단추 48 (기존 규칙이 min-height 에 !important 를 쓰는 곳은 !important 로 맞선다) */
  :root:not([data-ux-off~="tap-size-sitewide"]) :is(
    .postit-actions button.postit-add,
    .postit-dialog .postit-btn.is-primary
  ) { min-height: var(--ux-hit-main) !important; }
}

/* ══ C. 클래스로 잡히는 나머지 ═══════════════════════════════════════════════════════════ */
/* 줄 전체가 글자와 함께 눌리는 체크칸(<label>): 줄 높이를 기준까지(탈퇴 확인칸 · 프로필 공개 체크칸) */
:root:not([data-ux-off~="tap-size-sitewide"]) :is(
  input[aria-label^="확인 문구 입력"] ~ label:has(> input[type="checkbox"]),
  [data-ux-tap="check"]
) { min-height: var(--ux-hit); align-items: center !important; }
@media (max-width: 600px), (pointer: coarse) {
  /* 도름이에게 물어보기(검색 결과 없음) · 후기 쓰기 같은 칸 안의 글자 단추 */
  :root:not([data-ux-off~="tap-size-sitewide"]) .no-results-ask-go { min-height: var(--ux-hit); }
  /* 즐겨찾기: 갈래 단추 · 새 폴더 */
  :root:not([data-ux-off~="tap-size-sitewide"]) [aria-label="즐겨찾기 갈래"] > button { min-height: var(--ux-hit) !important; }
  :root:not([data-ux-off~="tap-size-sitewide"]) [aria-label="즐겨찾기 갈래"] ~ button[aria-haspopup="dialog"] { min-height: var(--ux-hit) !important; }
  /* 쪽지: 보내기 48 · 도름이 아이템 요청 카드 안 단추와 입력칸 */
  :root:not([data-ux-off~="tap-size-sitewide"]) .ck-compose-row > .ck-send { min-width: var(--ux-hit-main); min-height: var(--ux-hit-main); }
  :root:not([data-ux-off~="tap-size-sitewide"]) .doreumi-request-card :is(button, input, select, textarea) { min-height: var(--ux-hit); }
  :root:not([data-ux-off~="tap-size-sitewide"]) .doreumi-request-card :is(footer, [class*="actions"]) { gap: 8px; }
  /* 학습 안내 카드의 단계 단추 */
  :root:not([data-ux-off~="tap-size-sitewide"]) .learn-soon-actions .learn-soon-go { min-height: var(--ux-hit-main); }
  /* 표식을 단 칸: 입력칸 · 주된 단추 */
  :root:not([data-ux-off~="tap-size-sitewide"]) [data-ux-tap="field"] { min-height: var(--ux-hit) !important; }
  :root:not([data-ux-off~="tap-size-sitewide"]) [data-ux-tap="main"] { min-height: var(--ux-hit-main) !important; }
  :root:not([data-ux-off~="tap-size-sitewide"]) [data-ux-tap="box"] { min-height: var(--ux-hit) !important; min-width: var(--ux-hit) !important; }
}
/* 글자 링크(결과 단계 바로가기 등): 데스크톱도 32 */
:root:not([data-ux-off~="tap-size-sitewide"]) .notice-wizard-options button { min-height: var(--ux-hit); }

/* 별점(책 올리기): 별 하나의 누르는 칸 기준까지, 휴대폰에서는 별 사이 8 */
:root:not([data-ux-off~="tap-size-sitewide"]) button[aria-label^="별 "][aria-label$="개"] { min-width: var(--ux-hit); min-height: var(--ux-hit); }
@media (max-width: 600px), (pointer: coarse) {
  :root:not([data-ux-off~="tap-size-sitewide"]) :has(> button[aria-label^="별 "][aria-label$="개"]) { display: inline-flex; gap: 8px; align-items: center; }
  /* 탈퇴: 확인칸 줄은 위에서, 마무리 단추는 48 */
  :root:not([data-ux-off~="tap-size-sitewide"]) input[aria-label^="확인 문구 입력"] ~ button { min-height: var(--ux-hit-main) !important; }
  /* 창 안의 체크칸 줄(프로필 고치기 등): 글자까지 눌리는 줄을 기준 높이로 */
  :root:not([data-ux-off~="tap-size-sitewide"]) [role="dialog"] label:has(> input[type="checkbox"]) { min-height: var(--ux-hit); align-items: center; }
}
@media (max-width: 600px), (pointer: coarse) {
  :root:not([data-ux-off~="tap-size-sitewide"]) button[aria-label="프롬프트 복사"] { min-height: var(--ux-hit) !important; }
  /* 붙인 덱을 못 불러왔을 때 '다시 시도' */
  :root:not([data-ux-off~="tap-size-sitewide"]) [data-dormslide-embed] button[class*="retry"] { min-height: var(--ux-hit); }
  /* 로그인 화면의 안내 창 '다시 보지 않기' 줄 */
  :root:not([data-ux-off~="tap-size-sitewide"]) .auth-guide-panel label:has(> input[type="checkbox"]) { min-height: var(--ux-hit); align-items: center; }
}
:root:not([data-ux-off~="tap-size-sitewide"]) .auth-guide-panel label:has(> input[type="checkbox"]) { min-height: var(--ux-hit); align-items: center; }

/* upload-box-same.css (기본값) */
/* 개선안 upload-box-same: 그림 올리기 칸을 앱 표지 칸(.composer-cover-empty)과 같은 모양으로.
   AppPreviewImageField 가 스위치를 켰을 때만 .ux-upload-box 를 그린다. */
:root:not([data-ux-off~="upload-box-same"]) .ux-upload-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; width: 100%; min-height: 170px; padding: 24px 16px;
  border: 1.5px dashed var(--ui-line-strong, var(--shared-ui-line-strong, #747D73)); border-radius: 12px;
  background: var(--ui-raised, var(--shared-ui-raised, #FDFDF9)); color: var(--ui-text, var(--shared-ui-text, #242824));
  font: 600 15px/1.5 var(--font-sans, var(--shared-font-sans, sans-serif)); text-align: center; cursor: pointer;
  word-break: keep-all; overflow-wrap: break-word;
}
:root:not([data-ux-off~="upload-box-same"]) .ux-upload-box:hover,
:root:not([data-ux-off~="upload-box-same"]) .ux-upload-box[data-dragging="true"] {
  border-color: var(--ui-text, var(--shared-ui-text, #242824));
  background: color-mix(in srgb, var(--ui-primary, var(--shared-ui-primary, #79ADE3)) 8%, var(--ui-raised, var(--shared-ui-raised, #FDFDF9)));
}
:root:not([data-ux-off~="upload-box-same"]) .ux-upload-box:disabled { cursor: default; }
:root:not([data-ux-off~="upload-box-same"]) .ux-upload-box-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--ui-surface, var(--shared-ui-surface, #E3E5E0));
}

/* useful-links-row.css (기본값) */
/* UX 개선안 useful-links-row: 유용한 링크 줄의 작성자·도름. 켜 볼 때만(:root:not([data-ux-off~="useful-links-row"])) 적용된다.
   1) 작성자 얼굴과 이름을 하나의 단추(UsefulLinks AuthorChip)로: 휴대폰 44 · 데스크톱 32 높이.
   2) 휴대폰 닫힌 줄에도 제목 오른쪽(펼침 꺾쇠 왼쪽)에 엄지 그림+'N도름'을 보인다(새 줄 없이 지금 줄 안).
   3) 펼친 줄에서도 도름 단추가 제목 가까이(글 폭 안)에 남고, 꺾쇠만 줄 끝에 둔다. */

/* 1. 작성자 단추 */
:root:not([data-ux-off~="useful-links-row"]) .dorms-folio .useful-links .ul-author-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
  min-height: 32px; padding: 0 12px 0 4px; border: 1px solid var(--ui-border); border-radius: 999px;
  background: transparent; color: var(--ui-text); font: 600 15px/1.4 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms ease;
}
:root:not([data-ux-off~="useful-links-row"]) .dorms-folio .useful-links span.ul-author-chip { cursor: default; }
:root:not([data-ux-off~="useful-links-row"]) .dorms-folio .useful-links .ul-author-chip:focus-visible { outline: 2px solid var(--ui-focus, var(--ui-text)); outline-offset: 2px; }
@media (hover: hover) { :root:not([data-ux-off~="useful-links-row"]) .dorms-folio .useful-links a.ul-author-chip:hover { background: var(--ui-raised); } }
:root:not([data-ux-off~="useful-links-row"]) .dorms-folio .useful-links .ul-author-face { width: 24px !important; height: 24px !important; border: 1px solid var(--ui-border); }
/* 닫힌 줄(데스크톱)의 얼굴만 있는 단추: 얼굴 26 그대로, 누르는 칸 32 */
:root:not([data-ux-off~="useful-links-row"]) .dorms-folio .useful-links .ul-author-chip--face { width: 32px; height: 32px; min-height: 32px; padding: 0; border-color: transparent; }
:root:not([data-ux-off~="useful-links-row"]) .dorms-folio .useful-links .ul-author-chip--face .ul-author-face { width: 26px !important; height: 26px !important; }
:root:not([data-ux-off~="useful-links-row"]) .dorms-folio .useful-links .ul-author-name { overflow: hidden; max-width: 16ch; text-overflow: ellipsis; }

/* 3. 펼친 줄: 제목 칸은 글 폭(852px) 안에서 글자만큼만 차지해 도름 단추가 제목 바로 옆에 선다 */
:root:not([data-ux-off~="useful-links-row"]) .dorms-folio .useful-links .ul-row[data-open] .ul-row-copy { flex: 0 1 auto; max-width: var(--post-measure, 852px); }
:root:not([data-ux-off~="useful-links-row"]) .dorms-folio .useful-links .ul-row[data-open] .ul-row-chevron { margin-left: auto; }

@media (max-width: 700px) {
  :root:not([data-ux-off~="useful-links-row"]) .dorms-folio .useful-links .ul-author-chip { min-height: 44px; padding: 0 14px 0 6px; }
  :root:not([data-ux-off~="useful-links-row"]) .dorms-folio .useful-links .ul-author-face { width: 28px !important; height: 28px !important; }
  /* 2. 휴대폰 닫힌 줄에도 도름 수 */
  :root:not([data-ux-off~="useful-links-row"]) .dorms-folio .useful-links .ul-row:not([data-open]) .ul-row-dorm { display: inline-flex; align-items: center; }
  /* 펼친 줄의 주된 행동 '링크 열기'는 48 높이 */
  :root:not([data-ux-off~="useful-links-row"]) .dorms-folio .useful-links .ul-row-actions .bk-btn--primary { min-height: 48px; }
}