/* 관제 화면(index.html) 전용 폰·태블릿 규칙 — 모든 메뉴에 공통으로 걸리는 뿌리 수정.
   가족·성인·읽기 앱은 이 파일을 불러오지 않는다(.app 안쪽만 고친다). */

/* 단추·칩은 줄어들며 글자를 한 자씩 꺾지 않는다: 제 길이만큼 차지하고, 줄이 모자라면 아래 줄로 넘어간다.
   화면보다 긴 이름만 단어 단위로 접는다. */
.app .btn,.app .chip,.app .pill,.app .k,.app .nbf-command{
  flex-shrink:0;max-width:100%;word-break:keep-all;overflow-wrap:break-word}
/* '더 보기' 안에 접은 드문 단추들 */
.app details.more-actions{display:inline-block;position:relative;max-width:100%}
.app details.more-actions>summary{list-style:none;cursor:pointer}
.app details.more-actions>summary::-webkit-details-marker{display:none}
.app details.more-actions[open]>.more-actions-list{display:flex}
.app .more-actions-list{display:none;flex-wrap:wrap;gap:6px;margin-top:6px}
/* 내부 번호·원문 기록은 '자세히' 안에 둔다 */
.app details.raw-detail{margin-top:4px;color:var(--dim);font-size:12px}
.app details.raw-detail>summary{cursor:pointer;color:var(--dim);font-size:12px;min-height:28px;
  display:inline-flex;align-items:center}
.app details.raw-detail[open]>summary{margin-bottom:3px}
.app details.raw-detail .raw-id{font-family:ui-monospace,SFMono-Regular,monospace;overflow-wrap:anywhere}

@media (max-width:820px){
  /* 하위 메뉴 탭은 옆으로 숨기지 않고 두 줄로 */
  .app #local_navigation nav,.app #page_navigation nav{flex-wrap:wrap;overflow-x:visible}
  .app #local_navigation button,.app #page_navigation button{white-space:nowrap}
  .app .navigation-provider-tabs{flex-wrap:wrap;overflow-x:visible}
  .app .navigation-provider-tabs button{min-height:40px}
  /* 단추가 모인 줄은 모두 아래로 넘긴다(옆으로 밀려 잘리지 않게) */
  .app #body :is(div,span,p,td,section,nav,header,footer,form):has(> .btn),
  .app #topbtns,.app .chips,.app .mtabs{flex-wrap:wrap}
  .app #body .btn,.app #topbtns .btn{white-space:normal;line-height:1.25;text-align:center}
  /* 긴 상태 알약(길들이는 중 · 1일째 · 쉬는 중 …)은 한 줄로 버티다 카드 밖으로 삐져 가로 스크롤을 만들었다 */
  .app #body .pill{white-space:normal;word-break:keep-all;overflow-wrap:break-word;text-align:left}
  .app #body .chip,.app .mtabs .chip,.app .chips .chip{white-space:normal;word-break:keep-all;
    overflow-wrap:break-word;line-height:1.3}
  /* 손가락으로 누르기 쉬운 크기(40px 이상) */
  .app #body .btn,.app #body button:not(.nav-destination):not(.col):not(.sw),.app #body select,
  .app #body summary,.app #body .chip,.app #topbtns .btn,.app #page_navigation button,
  .app #local_navigation button,.app #navigation_scope select,
  .app #body input:is([type=text],[type=search],[type=number],[type=password],[type=url],[type=email],:not([type])){
    min-height:40px}
  .app #body .chip{display:inline-flex;align-items:center}
  /* 화면 위 탭 줄(#chips)·게시판 도구줄의 칩과 고르기 칸도 같은 크기 */
  .app .main .chip,.app .main select{min-height:40px}
  .app .main .chip{display:inline-flex;align-items:center}
  .app #body summary:not(.btn){padding-block:max(0px,calc((40px - 1.5em) / 2))}
  .app #body .iconbtn,.app #body button.iconbtn{min-width:40px;min-height:40px}
  .app #body label:not(.sw):has(> input[type=checkbox]),.app #body label:not(.sw):has(> input[type=radio]){
    min-height:40px;display:inline-flex;align-items:center;gap:7px}
  .app #body details.raw-detail>summary{min-height:36px}
  .app #body input:is([type=checkbox],[type=radio]){width:24px;height:24px;flex:0 0 24px}
  /* 긴 주소·파일 이름·코드는 칸 안에서 접는다 */
  /* 한국어는 음절마다 줄을 바꿀 수 있어, 좁아진 칸에서 '학원'·'자동 백업'이 한 글자씩 세로로 섰다:
     폰에서는 낱말(띄어쓰기) 단위로만 접는다. 띄어쓰기 없는 긴 주소·코드만 칸 안에서 아무 데나 접는다. */
  .app #body{word-break:keep-all}
  /* overflow-wrap 은 물려받는다: 칸(td)에 anywhere 를 두면 그 안의 줄어드는 칸들이 다시 한 글자씩 꺾인다.
     break-word 는 넘칠 때만 접어서 낱말을 지킨다. 띄어쓰기 없는 주소·코드 덩어리만 anywhere. */
  .app #body :is(p,li,dd,dt,td,th,.hint,.sub,.fnote,.msg,.muted,small,.detail){overflow-wrap:break-word}
  .app #body :is(.clip,code,pre,.raw-id,.mono,.droom-pair-token){overflow-wrap:anywhere}
  .app #body .clip{white-space:normal}
  .app #body :is(input[type=text],input[type=search],input[type=url],textarea,select){max-width:100%;min-width:0}
  .app #body img,.app #body video,.app #body canvas{max-width:100%}
  /* 이름표 옆 입력칸이 손톱만 해지지 않게: 자리가 모자라면 입력칸이 다음 줄 전체를 쓴다 */
  .app #body .frow>input:is([type=text],[type=url],[type=search],[type=password],:not([type])),
  .app #body .frow>select,.app #body .frow>textarea{flex:1 1 180px;min-width:min(180px,100%)}
  /* 홈 칸의 두 줄 제목: 【】 같은 큰 글자가 섞이면 셋째 줄 윗부분이 비쳐 겹쳐 보이던 것 */
  .app #body .col .fx .l{line-height:1.5;max-height:3em}
  /* style="flex:1" 로 남는 자리만 쓰던 설명 칸이 옆 단추에 밀려 28px 까지 줄며 한 글자씩 꺾이던 것:
     자리가 모자라면 설명이 한 줄 전체를 쓰고 단추는 아래로 */
  .app #body [style*="flex:1"]{min-width:min(160px,100%)}
  /* 멀티뷰 키 설정의 이동 단계 줄: nb/static/multiview/multiview.css (.nbmv-step-grid) */
  /* 전체 상태 '자세히': 이름 칸(140px)이 좁은 카드에서 값 칸을 밀어 한 글자씩 꺾던 것 */
  .app #body .health-facts>div{grid-template-columns:minmax(0,1fr);gap:1px}
  .app #body .health-facts dt{font-size:12px}
  /* 카드로 바뀐 표의 숨긴 머리줄: 표 안쪽 요소는 overflow 가 듣지 않아 옆으로 삐져 가로 스크롤을 만들었다 */
  .app #body table.mobile-table thead{display:block}
  /* 카드로 바뀐 표: 값이 비어 있는 칸(예: 오류 없음)은 이름표만 남기지 않고 감춘다 */
  .app #body table.mobile-table tbody td.mobile-empty{display:none}
  /* 카드로 바뀐 표: 입력칸과 단위(분·일·MB)는 한 줄에, 칸 이름만 위에 */
  .app #body table.mobile-table tbody td:has(> input:not([type=checkbox]):not([type=radio]),> select){
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 6px}
  .app #body table.mobile-table tbody td:has(> input:not([type=checkbox]):not([type=radio]),> select)::before{flex:1 0 100%}
}