/* ③ 화면 「CPX/OSCE」 방 화면 스타일 — 2026-10-18 세 층 구조(docs/domain-migration.md).
   features/practical/practical.css에서 방 화면 규칙만 글자 그대로 옮겼다(선언·순서·@media 머리말 무변경).
   선택자 소유는 방출처로 판정했다 — 이 파일의 실기 토큰(.pr-page·.pr-body·.pr-count·.pr-steps·.pr-review-open 등)은
   방 화면(features/menu-cpx-osce/room-ui.js)만 그린다. 기록 편집창·복습 가져오기 규칙은 practical.css에 남는다.
   index.html에서 practical.css 바로 뒤에 읽혀 옮기기 전과 같은 캐스케이드 자리(인라인 블록 뒤·다른 외부 CSS 앞)에 놓인다. */
.pr-count{display:inline-flex;align-items:center;flex:0 0 auto;padding:1px 7px;border:1px solid var(--border);border-radius:999px;background:var(--surface2);color:var(--text3);font-size:10px;font-weight:700;white-space:nowrap}
.pr-steps{margin:6px 0 0;padding-left:22px;color:var(--text);font-size:13px;line-height:1.75}
.pr-steps li{overflow-wrap:anywhere;word-break:break-word}
.pr-steps li>.ep-badge{margin-left:6px}
.pr-page .ep-sub,.pr-count,.pr-page .ep-badge{color:var(--text2)}
/* 넓은 화면에서 상세 칸을 따라오게 한다. 형제(영어 패턴)는 20개씩 쪽을 나눠 목록이 짧지만 여기는
   48행이 한 번에 서서 목록이 3,700px을 넘는다. 그대로 두면 아래쪽 행을 눌렀을 때 상세가 격자 맨 위에서
   갱신돼 **사용자 눈에는 아무 일도 안 일어난 것처럼 보인다**(2026-08-09 렌더 실측에서 elementFromPoint가
   null을 냈다 — 겹친 것이 아니라 화면 밖이었다). 공용 `.ep-preview`를 건드리면 영어 패턴까지 바뀌므로
   실기 목차 전용 `.pr-body` 아래로만 좁힌다. */
@media(min-width:1180px){
  .pr-body{align-items:start}
  /* 데스크톱 셸의 상단 바가 position:fixed로 아래쪽 52px까지 덮는다(실측). 그 아래로 8px 띄운다 —
     안 그러면 상세 제목이 화면 안에는 있는데 상단 바에 가려 「보이는데 닿지 않는」 상태가 된다.
     실측값이다(추측 아님): 셸 고정 상단 바 아래끝 52px · 그 아래 sticky 룸 제목 바 아래끝 99px → 106px에 세운다. */
  .pr-body>.ep-preview{position:sticky;top:106px;max-height:calc(100vh - 122px)}
}
/* Clinical Study Workspace · CPX/OSCE
   기존 practical 데이터와 공용 ep 셸은 유지하고 이 방의 목록 밀도·상세 위계만 좁게 덮는다. */
.pr-page{--pr-row-min:58px;gap:6px}
.pr-page .pr-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:clip!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.pr-page>.ep-head{align-items:center}
.pr-page .pr-page-title{display:flex;align-items:center;gap:9px}
.pr-page .pr-page-title .ui-icon{width:22px;height:22px;color:var(--ui-text-secondary)}
.pr-page .pr-toolbar{display:grid;grid-template-columns:auto minmax(220px,1fr) minmax(150px,190px) minmax(132px,154px);gap:8px;align-items:center;margin:6px 0 4px}
.pr-page .pr-tabs{display:flex;align-items:center;gap:4px;padding:3px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-control);background:var(--ui-surface-subtle)}
.pr-page .pr-tabs .lang-filter-chip{min-height:38px;border:0;background:transparent}
.pr-page .pr-tabs .lang-filter-chip.active{background:var(--ui-primary-soft);box-shadow:inset 0 0 0 1px var(--ui-primary);color:var(--ui-primary)}
.pr-page .pr-search-wrap{position:relative;min-width:0}
.pr-page .pr-search-wrap .ui-icon{position:absolute;left:12px;top:50%;width:17px;height:17px;transform:translateY(-50%);color:var(--ui-text-tertiary);pointer-events:none}
.pr-page .pr-search-wrap input{width:100%;min-height:44px;padding-left:38px}
.pr-page .pr-select{width:100%;min-height:44px;padding:0 34px 0 11px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-control);background:var(--ui-surface);color:var(--ui-text);font:inherit}
.pr-page .pr-summary{margin:0;line-height:1.3}
.pr-page .pr-distribution{display:flex;flex-wrap:wrap;gap:4px 6px;margin:0 0 2px;padding:4px 7px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-control);background:var(--ui-surface-subtle)}
.pr-page .pr-distribution-item{display:inline-flex;align-items:center;gap:4px;min-width:0;color:var(--ui-text-secondary);font-size:10px;line-height:1.35;white-space:nowrap}
.pr-page .pr-distribution-item:not(:last-child)::after{content:"·";margin-left:2px;color:var(--ui-text-tertiary)}
.pr-page .pr-distribution-item b{color:var(--ui-text);font-size:inherit;font-variant-numeric:tabular-nums}
.pr-page .pr-body{grid-template-columns:minmax(340px,380px) minmax(0,1fr);gap:12px}
.pr-page .pr-group{padding:0;border:0}
.pr-page .pr-group>h3{position:sticky;top:0;z-index:1;margin:0;padding:8px 11px;border-bottom:1px solid var(--ui-border);background:var(--ui-surface-subtle)}
.pr-page .pr-rows{display:flex;flex-direction:column;gap:0}
.pr-page .pr-rows .ep-row{min-height:var(--pr-row-min);border:0;border-bottom:1px solid var(--ui-border);border-radius:0}
.pr-page .pr-rows .ep-row:last-child{border-bottom:0}
.pr-page .pr-rows .ep-row.active{background:var(--ui-primary-soft);box-shadow:inset 3px 0 0 var(--ui-primary)}
.pr-page .pr-catalog-row .ep-row__open{min-height:var(--pr-row-min);padding:9px 11px}
.pr-page .pr-catalog-main{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center}
.pr-page .pr-no{color:var(--ui-text-tertiary);font-size:12px;font-variant-numeric:tabular-nums}
.pr-page .pr-name>b{font-size:13px;font-weight:750}
.pr-page .pr-catalog-meta{max-width:142px;color:var(--ui-text-secondary);font-size:10px;text-align:right;overflow-wrap:anywhere}
.pr-page .pr-record-row{padding:10px 11px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.pr-page .pr-record-title{min-width:0;overflow-wrap:anywhere}
.pr-page .pr-record-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pr-page .pr-record-actions .ui-btn{min-height:36px}
.pr-page .pr-page-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.pr-page .pr-page-actions .ui-btn,.pr-page .pr-record-actions .pr-review-open{min-height:44px}
.pr-page .pr-listen-menu{position:relative}
.pr-page .pr-listen-menu>summary{list-style:none;cursor:pointer}
.pr-page .pr-listen-menu>summary::-webkit-details-marker{display:none}
.pr-page .pr-listen-menu>div{position:absolute;right:0;top:calc(100% + 4px);z-index:5;min-width:210px;padding:8px;display:grid;gap:5px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-control);box-shadow:var(--shadow-2)}
.pr-page .pr-listen-menu .ui-btn{justify-content:flex-start}
.pr-page .pr-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pr-page .pr-detail-head>div{min-width:0}
.pr-page .pr-empty-actions{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.pr-page .pr-status{display:inline-flex;align-items:center;min-height:24px;padding:2px 8px;border:1px solid var(--ui-border);border-radius:999px;color:var(--ui-text-secondary);font-size:10px;font-weight:700}
.pr-page .ui-btn>.ui-icon{width:16px;height:16px}
@media(max-width:1179px){
  .pr-page .pr-body{grid-template-columns:minmax(0,1fr)}
  .pr-page .pr-toolbar{grid-template-columns:auto minmax(0,1fr) minmax(140px,180px) minmax(126px,150px)}
  .pr-page .pr-body.ep-detail-mobile>.ep-list{display:none}
  .pr-page .pr-body.ep-detail-mobile>.ep-preview{display:block}
}
@media(max-width:767px){
  #kbgPlatformOverlay:has(.pr-page)>.kbg-sidebar{display:none}
  /* 사이드바를 아예 못 여는 방에서는 「메뉴」 버튼도 없어야 한다. 남겨 두면 눌러도 아무 일이 없는데
     aria-expanded만 true가 되는 **죽은 컨트롤**이 된다(2026-08-12 독립 리뷰 RESP-01 실측: 클릭 뒤에도
     display:none·보이는 방 버튼 0개인데 상태만 「펼침」이라고 말했다). 이 방에서 방을 옮기는 길은
     하단 「더보기」다 — 그 경로는 이번 판에서 함께 고쳤다. */
  #kbgPlatformOverlay:has(.pr-page) .kbg-menu-btn{display:none}
  #kbgPlatformOverlay:has(.pr-page) .kbg-body{padding:8px}
  .pr-page{padding-top:0;gap:2px}
  /* 룸 동작은 플랫폼 상단바와 폭을 다투지 않는 본문 첫 행에 둔다. 작은 화면에서는 목록 시작을
     늦추던 요약·분포표를 숨겨, 독립 행의 터치 크기를 유지하면서도 바로 학습을 시작하게 한다. */
  .pr-page>.ep-head{position:static;z-index:auto;width:100%;max-width:none;justify-content:flex-start;min-height:44px;margin:0;padding:0;border:0;background:transparent}
  .pr-page>.ep-head .pr-page-title{display:none}
  .pr-page>.ep-head .ui-btn{min-height:44px}
  .pr-page .pr-page-actions{display:grid;width:100%;max-width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .pr-page .pr-page-actions .ui-btn{width:100%;min-width:44px;padding-inline:7px;font-size:12px;white-space:nowrap}
  .pr-page>.ep-sub:not(.pr-summary){display:none}
  .pr-page .pr-toolbar{grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:0}
  .pr-page .pr-tabs{grid-column:auto}
  .pr-page .pr-tabs .lang-filter-chip{flex:1}
  .pr-page .pr-search-wrap{grid-column:auto}
  .pr-page .pr-toolbar{row-gap:0}
  .pr-page .pr-select{min-width:0}
  .pr-page .pr-summary{display:none}
  .pr-page .pr-distribution{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px 4px;margin:0;padding:1px 4px}
  .pr-page .pr-distribution-item{font-size:8.5px;line-height:1;overflow:hidden;text-overflow:ellipsis}
  .pr-page .pr-distribution-item:not(:last-child)::after{display:none}
  .pr-page .pr-distribution-item{font-size:9.5px}
  .pr-page .pr-group>h3{padding-block:6px}
  .pr-page .pr-record-row{grid-template-columns:minmax(0,1fr)}
  .pr-page .pr-record-actions{justify-content:flex-start}
  .pr-page .pr-listen-menu>div{left:0;right:auto;max-width:calc(100vw - 40px)}
}