/* 원격 콘솔 — 조종 화면.
 *
 * 이 화면이 있는 이유는 둘뿐이다.
 *   (1) PC 들이 멀쩡한지 몇 초 안에 확인한다.
 *   (2) 뭔가 잘못 나가고 있을 때 **중지**를 누른다.
 * 규칙도 둘이다 — 읽는 것이 먼저 오고 누르는 것이 나중에 온다. 그리고 화면에서
 * 제일 크고 제일 누르기 쉬운 물건은 **되돌릴 수 있는 것**이다.
 *
 * ── 생김새: 게시글등록·게시판찾기와 한 집안 ──────────────────────────
 * 게시글등록(write_content/web/knowhow/style.css)의 토큰과 부품 모양을 그대로
 * 따른다 — 종이 바닥(--바탕) 위에 흰 면(--판)을 올리고, 글자는 먹(--글)이다.
 * 어두운 곳은 카드 위에 펼치는 **기록판 하나뿐**이고(기계가 중얼거리는 면),
 * 토스트가 같은 먹색을 쓴다(프로그램이 사람에게 거는 말). 토큰 **이름까지**
 * 같게 둔 것은 일부러다 — 다음 단계에서 게시글등록의 탭 코드를 이 화면으로
 * 옮겨 오는데, 이름이 같아야 고치지 않고 그대로 맞물린다.
 *
 * **데스크톱 앱 틀은 안 가져온다.** 게시글등록은 body{overflow:hidden} 으로
 * 앱 틀 안에서만 구르고 단추가 37·28px, 입력칸이 14px 이다. 이 화면은 폰에서
 * 쓰므로 **문서가 통째로 구르고**(끈적 머리·요약은 그대로), 누르는 것은 손가락
 * 넓이 44px 이상, 입력칸 글자는 16px 이다(그 밑이면 iOS 가 칸을 누를 때 화면을
 * 확대한다). 그래서 게시글등록의 전역 button{…} 도 안 가져온다 — 그 한 줄이
 * 연필·기록 닫기·머리 단추까지 흰 상자로 덮는다. 단추 모양은 .단추 에만 건다.
 *
 * 상태는 **색만으로 가르지 않는다.** 작동중 등은 채워져 숨 쉬고, 멈춘 등은
 * 채워진 채 회색이고, 안 붙은 등은 속이 빈 고리다 — 색이 안 보여도 모양이
 * 남는다.
 *
 * ── 안 하는 것 ────────────────────────────────────────────────────
 * **바깥에서 아무것도 안 가져온다.** 글꼴도 아이콘도 전부 이 안에 있다
 * (tests/test_web.py 의 test_바깥에서_가져오는_것이_없다). 취향이 아니다 —
 * 이 화면은 급할 때 중지를 누르는 물건이라, 글꼴 CDN 이 느린 날 단추가 늦게
 * 뜨면 그것으로 이 도구는 실패한다.
 *
 * **나타나는 애니메이션을 안 쓴다.** 목록은 5초마다 통째로 다시 그린다.
 * 카드가 뜰 때마다 떠오르거나 흐려졌다 맑아지면 화면이 5초마다 일렁이고,
 * 그러면 "뭔가 바뀌었다" 는 진짜 신호가 소음에 묻힌다. 움직임은 사람이 손을
 * 댄 자리와, 작동중 등의 숨 하나에만 있다.
 *
 * **그림자는 떠 있는 것에만 준다.** 카드는 흰 면과 실선 하나로 충분하다.
 * 그림자(--뜸)는 등록 코드 창과 로그인 상자, 그리고 먹색 토스트뿐이다.
 */

/* ── 글꼴 ────────────────────────────────────────────────────────────
 * 프리텐다드를 **파일째 들고 있다.** 이름만 스택에 적어 두면 그 글꼴이 깔려
 * 있는 기계에서만 보이고, 폰과 대부분의 PC 에서는 맑은 고딕·애플 고딕으로
 * 떨어져 결국 "아무 화면" 처럼 보인다. 그게 이 화면이 심심해 보이던 이유다.
 *
 * 바깥에서 안 가져오는 규칙은 그대로다 — web/pretendard.woff2 는 이 중계가
 * /static 으로 직접 내주는 우리 파일이고, 라이선스(OFL)는 옆에 같이 뒀다.
 *
 * **Std 판(KS X 1001, 285KB)을 골랐다.** 전체판은 2.0MB 인데, 늦게 오는 동안
 * 대체 글꼴로 보이다가 글자가 통째로 갈아 끼워지는 것이 눈에 띈다. 285KB 는
 * 거의 즉시 온다. 대신 아주 드문 음절(똠·쀼 같은)은 이 판에 없어서 그 글자만
 * 대체 글꼴로 떨어진다 — 기기 별칭에 그런 글자를 쓰면 그때 눈에 보인다.
 *
 * swap: 글꼴을 기다리는 동안 글자를 숨기지 않는다. 이 화면에서 제일 급한 일이
 * '중지' 를 누르는 것인데, 그 단추가 글꼴 때문에 늦게 뜨면 안 된다.
 */
@font-face{
  font-family:"Pretendard Std Variable";
  src:url("/static/pretendard.woff2") format("woff2");
  font-weight:45 920;      /* 한 파일에 모든 굵기가 들어 있다 */
  font-style:normal;
  font-display:swap;
}

/* ── 토큰 ────────────────────────────────────────────────────────────
 * 색 이름·값은 게시글등록 knowhow/style.css 의 :root 와 **한 글자도 다르지
 * 않게** 둔다. 여기서 하나를 '조금 더 낫게' 고치면 탭을 옮겨 왔을 때 두 화면의
 * 같은 이름이 서로 다른 색이 된다. 바꿀 일이 있으면 양쪽을 같이 바꾼다.
 */
:root{
  /* 브라우저가 스스로 그리는 것들(스크롤바·날짜 고르개)을 밝게. 기록판은 저
   * 혼자 어두우므로 그 안에서 dark 로 되돌린다 — 안 그러면 어두운 판 위에
   * 흰 스크롤바가 그어진다. */
  color-scheme:light;

  /* 세 겹이다. 책상 바닥 - 그 위에 올려둔 흰 면 - 눌러 넣은 자리(우물·입력칸). */
  --바탕:#f4f2ee; --판:#ffffff; --판밝음:#eeece7; --로그바탕:#191a1c;
  --선:#e0ddd6; --선밝음:#cbc7bd;
  /* 바탕 위 대비: --글 13.8:1 · --글흐림 6.39:1 · --글꺼짐 4.64:1. 12px 라벨도
   * 4.5:1 을 넘긴다. */
  --글:#24231f; --글흐림:#5a564f; --글꺼짐:#6a665f;
  /* 쪽빛은 '이것부터 눌러라', 청자는 오직 '돌고 있다', 주(朱)는 되돌릴 수 없는
   * 것과 놓친 것, 호박은 기다리는 상태(보류). 색 하나에 뜻 하나다. */
  --강조:#2f4f6b; --성공:#37705c; --경고:#7d5f19; --위험:#a8443c; --돎:#4a5f8a;
  --강조흐림:#2f4f6b14; --돎흐림:#4a5f8a1a; --위험흐림:#a8443c14; --경고흐림:#7d5f1914; --성공흐림:#37705c14;

  /* **프리텐다드를 맨 앞에 둔다.** 게시글등록은 PC 에 깔린 Segoe 를 쓰지만 폰에는
   * Segoe 가 없다. 품고 있는 프리텐다드가 먼저 서고, 뒤는 그것이 아직 안 왔을
   * 때 잠깐 쓰는 게시글등록의 차례 그대로다. 계기 숫자도 같은 글꼴이다 —
   * 숫자만 고정폭으로 빼면 화면에 글꼴이 둘이 된다. 자리폭은 tabular-nums 로
   * 잡는다. */
  --글꼴:"Pretendard Std Variable",Pretendard,"Segoe UI Variable Text","Segoe UI","Noto Sans KR","Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --글꼴큰:"Pretendard Std Variable",Pretendard,"Segoe UI Variable Display","Segoe UI","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  --고정:"Cascadia Mono",Consolas,ui-monospace,monospace;
  /* 들린 것에만 준다. */
  --뜸:0 1px 2px #24231f14,0 12px 28px -6px #24231f24;

  /* 바깥 폭. PC 에서는 화면을 채운다 — 이 화면은 읽는 글이 아니라 계기판이라,
   * 가운데 1240px 에 몰아 두면 좌우가 통째로 죽은 자리가 된다. 아주 넓은
   * 모니터에서만 멈춘다(한 줄이 끝없이 늘어나면 눈이 끝까지 못 간다). */
  --안폭:min(100%,2200px);

  /* 곡선 하나만 쓴다. 무게가 있는 물건이 멎는 느낌이다. */
  --곡선:cubic-bezier(.32,.72,0,1);
}

*{box-sizing:border-box}

/* **hidden 은 우리가 직접 지켜야 한다.** 브라우저 기본에도
 * [hidden]{display:none} 이 있지만, 우리가 쓴 규칙은 아무리 약해도 브라우저
 * 기본보다 세다 — .알림{display:flex} 한 줄이 그것을 덮어 토스트가 영영
 * 화면에 붙어 있게 된다(실제로 그랬다). app.js 는 .hidden 으로만 여닫는다. */
[hidden]{display:none !important}

html{
  background:var(--바탕);
  /* 붙박이 두 층(머리띠 53 + 요약띠 약 48) 밑으로 초점이 들어가지 않게 한다.
   * 이게 없으면 Tab 으로 짚은 단추가 초점 링째로 띠 밑에 숨고, 무엇에 초점이
   * 가 있는지 못 본 채 Enter 를 치게 된다 — 거기 있는 것이 '작동' 일 수 있다. */
  scroll-padding-top:112px;
}

body{
  margin:0;
  /* **화면을 채운다.** 기기가 몇 대든 카드가 세로로도 끝까지 늘어나고 아래에
   * 빈 자리가 안 남는다. svh 는 폰에서 주소창이 접혔다 펴져도 값이 안 뛰는
   * 쪽이다. **스크롤은 문서가 한다**(게시글등록의 overflow:hidden 틀을 안
   * 가져온 까닭) — 폰에서는 손가락 한 번에 화면 전체가 굴러야 한다. */
  min-height:100svh;
  display:flex;flex-direction:column;
  background:var(--바탕);
  color:var(--글);
  font:15px/1.5 var(--글꼴);
  -webkit-text-size-adjust:100%;
  /* 폰에서 당겨 새로고침하다 화면이 통째로 튀는 것을 막는다. */
  overscroll-behavior-y:none;
}

/* 숫자는 어디서든 자리폭이 같아야 한다. 5초마다 다시 그리는 화면에서 47 → 9
 * 로 바뀔 때 뒤 글자가 밀리면 "뭔가 움직였다" 는 거짓 신호가 된다. */
.값,.번호,.잔 b,.칩 b,.코드값,.읽은때{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* 눈으로는 안 보이되 화면읽개는 읽는 글. 아이콘만 있는 단추에 쓴다. */
.숨김글{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

/* 아이콘은 가는 선이다. 게시글등록의 아이콘 단추와 같은 1.8 — 그보다 가늘면
 * 흰 면 위의 흐린 글자색에서 선이 끊겨 보인다. */
svg{stroke-width:1.8;flex:0 0 auto}

/* 키보드로 짚은 것만 링을 보여 준다. 마우스로 누를 때마다 링이 뜨면 화면이
 * 소란스러워지고, 그러면 사람이 링 자체를 무시하게 된다. */
:where(button,input,a,[tabindex]):focus-visible{
  outline:2px solid var(--강조);
  outline-offset:2px;
}
/* **칸에서는 띄우지 않는다.** 칸은 초점이 오면 제 테두리도 쪽빛이 되므로,
 * 띄운 바깥선까지 있으면 고리가 두 겹으로 보인다. 붙여 두면 한 겹의 두꺼운
 * 테두리로 읽힌다(게시글등록과 같다). */
:where(input):focus-visible{outline-offset:0}

/* ── 머리띠 ──────────────────────────────────────────────────────────
 * 게시글등록의 #띠: 흰 바 하나와 그 아래 실선 하나. 화면 위에 붙어 스크롤을
 * 따라온다. 예전의 떠 있는 알약은 걷어 냈다 — 띠가 반듯해야 그 밑의 요약띠와
 * 한 몸으로 붙는다.
 */
header{
  position:sticky;top:0;z-index:30;
  /* **불투명해야 한다.** 비치면 스크롤하는 카드의 글자가 이름 위로 겹쳐
   * 지나간다. */
  background:var(--판);
  border-bottom:1px solid var(--선);
  padding:0 16px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
}
header .안쪽{
  max-width:var(--안폭);margin:0 auto;
  /* 52 = 44px 단추 + 위아래 4px. 단추가 띠에 꽉 끼어 보이지 않는 최소다. */
  min-height:52px;
  display:flex;align-items:center;gap:4px;
}
/* 이름은 굵기가 아니라 자간으로 선다. 700 으로 키우면 한글이 뭉쳐 보인다. */
header h1{
  margin:0;flex:1;min-width:0;
  font:500 16px/1.2 var(--글꼴큰);letter-spacing:.01em;color:var(--글);
  white-space:nowrap;
  display:flex;align-items:center;gap:9px;
}
/* 표식은 쪽빛 선 그림 하나다. 불빛도 상자도 없다 — 이 화면에서 색이 든 면은
 * 누르는 단추(.주)뿐이어야 한다. */
.표식{
  width:24px;height:24px;
  color:var(--강조);
  display:grid;place-items:center;
}
.표식 svg{width:20px;height:20px}

/* 머리 단추 = 게시글등록 button.조용. 테두리는 손이 닿을 때만 갖는다 — 거의
 * 안 누르는 것(기기 추가·로그아웃)이 상자를 들고 서면 무엇이 지금 할 일인지
 * 눈으로 못 고른다. 키는 손가락 넓이 그대로 44px 이다. */
.머리단추{
  position:relative;
  min-height:44px;padding:0 12px;
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;border:1px solid transparent;border-radius:7px;
  color:var(--글흐림);
  font:500 14px/1 var(--글꼴);cursor:pointer;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;
}
.머리단추:hover{background:var(--판밝음);border-color:var(--선);color:var(--글)}
.머리단추:active{background:var(--선)}
.머리단추 svg{width:16px;height:16px}
/* 폰에서는 아이콘만 남긴다. 이름은 화면읽개가 aria-label 로 읽는다. */
@media (max-width:559px){
  .머리단추 .글자{display:none}
  .머리단추{width:44px;padding:0;justify-content:center}
}

/* ── 요약띠 ──────────────────────────────────────────────────────────
 * 머리띠 밑에 붙어 스크롤을 따라온다. 카드가 화면 밖으로 나가도 경보는 안
 * 사라진다 — 그것이 이 띠의 존재 이유다. 경보가 없으면 경보 칩을 아예 안
 * 만든다. 늘 있는 자리는 결국 안 보게 된다.
 */
/* top 은 머리띠의 **전체 높이**여야 한다 — 52(안쪽) + 1(아래 실선) = 53.
 * 그보다 작으면 칩 위쪽이 머리띠 밑으로 들어가 잘린다. */
.요약{
  position:sticky;top:53px;z-index:20;
  padding:8px 16px;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
  /* 페이드 꼬리를 안 쓴다. 투명해진 꼬리도 상자는 상자여서, 아무것도 안 그려진
   * 자리가 그 아래 단추의 탭을 가로챈다(실제로 중지가 안 눌렸다). 바탕은
   * 종이색 그대로, 불투명하게 덮는다. */
  background:var(--바탕);
  border-bottom:1px solid var(--선);
}
/* **줄바꿈을 안 한다.** 칩이 두 줄이 되면 띠 높이가 변하고, 띠가 흐름 안에
 * 있으므로 아래 카드가 통째로 밀린다 — 누르려던 단추가 손가락 밑에서 움직인다.
 * 한 줄에 고정하고 넘치면 옆으로 민다. 경보 칩을 맨 앞에 그리므로(app.js)
 * 밀려 나가는 것은 늘 덜 급한 쪽이다. */
.요약 .안쪽{
  max-width:var(--안폭);margin:0 auto;
  display:flex;align-items:center;gap:6px;
  flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.요약 .안쪽::-webkit-scrollbar{display:none}
/* 게시글등록의 칩: 흰 알약에 실선 하나. 여기 칩은 누르는 것이 아니라서
 * 손을 올려도 안 변한다(변하면 누르는 것인 줄 안다). */
.칩{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  border:1px solid var(--선);background:var(--판);
  font-size:13px;font-weight:500;color:var(--글흐림);white-space:nowrap;
}
.칩 b{font-weight:600;color:var(--글)}
.칩 svg{width:13px;height:13px}
/* 안 붙어 있는 기기 = 기다리는 상태라 호박. 놓친 것 = 되돌려야 하는 일이라 주. */
.칩.주의{color:var(--경고);background:var(--경고흐림);border-color:#e6d5ab}
.칩.경보{color:var(--위험);background:var(--위험흐림);border-color:#e0c4c1}
.칩.주의 b,.칩.경보 b{color:inherit}
.읽은때{margin-left:auto;padding-left:4px;font-size:12px;color:var(--글꺼짐);
        white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── 여러 대를 한 번에 ──────────────────────────────────────────────────
 * 게시글등록의 .상자(흰 면, 실선, 반지름 10) 안에 가로 줄 하나. 다만 **붙여
 * 두지(sticky) 않는다.** 되돌릴 수 없는 단추가 화면에 늘 떠 있으면, 목록을
 * 훑으려고 미는 손가락 밑에 '작동' 이 들어온다. 맨 위까지 올라가야 눌리는
 * 편이 맞다.
 * 바깥 칸은 여백(과 노치 자리)만 갖고, 상자 모양은 .안쪽 이 갖는다 — 그래야
 * 넓은 화면에서 상자가 카드 목록과 같은 폭(--안폭)에서 멈춘다. */
.일괄{
  padding:10px 16px 0;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
}
/* 폰에서는 두 줄이다: 위에 시각, 아래에 단추 둘. 한 줄에 다 넣으면 단추가
 * 서로를 짓눌러 글자가 잘린다. 넓은 화면에서는 한 줄로 편다(아래 @media). */
.일괄 .안쪽{
  max-width:var(--안폭);margin:0 auto;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:8px;
  padding:12px 14px;
  background:var(--판);border:1px solid var(--선);border-radius:10px;
}
/* 게시글등록의 .작은제목: 작고 흐리되 자간을 조금 벌려 '이 줄의 이름' 으로 선다. */
.일괄이름{
  font-size:12px;font-weight:600;color:var(--글흐림);
  letter-spacing:.04em;white-space:nowrap;
}
/* 둘이 폭을 똑같이 나눈다. 중지는 이 줄에 없다 — 전체 중지는 위 보류줄 하나뿐이다. */
.일괄단추들{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.일괄단추들 .단추{padding:0 6px;min-width:0;width:100%}

@media (min-width:560px){
  .일괄 .안쪽{grid-template-columns:auto minmax(0,230px) 1fr}
  .일괄단추들{grid-column:auto;justify-self:end;
             grid-template-columns:repeat(2,minmax(84px,auto))}
}

/* ── 입력칸 ──────────────────────────────────────────────────────────
 * 게시글등록의 칸: **눌러 넣은 자리**다. 흰 면 위에서 한 칸 어두운 것이 '여기에
 * 쓴다' 는 뜻이 되고, 초점이 오면 흰 면으로 떠오르며 테두리가 쪽빛이 된다.
 * 다른 것은 둘뿐이다 — 글자 16px(그 밑이면 iOS 가 칸을 누를 때 화면을 확대한다)
 * 과 키 44px(손가락).
 */
input[type=text],input[type=password],input[type=datetime-local]{
  width:100%;min-width:0;min-height:44px;margin:0;padding:0 12px;
  background:var(--판밝음);color:var(--글);
  border:1px solid var(--선);border-radius:7px;
  font:400 16px/1.2 var(--글꼴);
  transition:background .12s,border-color .12s;
}
input[type=text]:focus,input[type=password]:focus,input[type=datetime-local]:focus{
  background:var(--판);border-color:var(--강조);
}

/* ── 전체 보류 ──────────────────────────────────────────────────────────
 * 띠(배너)는 붙지 않는다 — 요약띠가 스크롤을 따라오므로 둘이 겹치면 안 된다.
 * 대신 맨 위에 있어 화면을 열면 가장 먼저 보인다. 게시글등록의 작동 보류 알림과
 * 같은 호박빛이다: 잘못된 것이 아니라 **기다리는** 상태다(보류 중이면 예약한
 * 글이 안 나간다). */
.보류띠{
  padding:10px 16px 0;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
}
/* **flex 가 아니라 글줄이다.** 안에 든 두 조각(무엇 · 누가·언제)을 flex 로
 * 세우면 폰에서 둘이 좁은 두 기둥으로 갈라져 '· 사무실-A · 11-10' 이 오른쪽
 * 기둥에서 혼자 접힌다. 한 문장으로 이어 흐르게 하고, 그림은 왼쪽 여백에
 * 걸어 둔다. */
.보류띠 .안쪽{
  position:relative;
  max-width:var(--안폭);margin:0 auto;
  padding:9px 12px 9px 38px;
  background:var(--경고흐림);color:var(--경고);
  border:1px solid #e6d5ab;border-radius:6px;
  font-weight:600;font-size:14px;line-height:1.45;
  /* 한글은 낱말 중간에서 안 끊는다('사무 / 실-A'). 아주 긴 기기 이름만 어디서든. */
  word-break:keep-all;overflow-wrap:anywhere;
}
.보류띠 svg{position:absolute;left:12px;top:10px;width:18px;height:18px}
.보류누구{font-weight:500}
.보류줄{
  padding:10px 16px 0;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
}
.보류줄 .안쪽{
  max-width:var(--안폭);margin:0 auto;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;gap:8px;
  padding:12px 14px;
  background:var(--판);border:1px solid var(--선);border-radius:10px;
}
/* 전체 중지가 이 화면에서 가장 눈에 띄는 중지다: 더 넓고 더 크다. */
.보류단추들{display:grid;grid-template-columns:1.6fr 1fr;gap:6px}
.보류단추들 .단추{padding:0 6px;min-width:0;width:100%}
.보류단추들 .단추.멈추기{min-height:46px;font-weight:700}
/* 넓은 화면에선 두 단추가 한 줄 가득 늘어나지 않게 폭을 묶고 오른쪽 끝에 붙인다
 * (부모 .보류줄 .안쪽 의 둘째 칸 minmax(0,1fr) 안에서 정렬된다). */
@media (min-width:720px){.보류단추들{max-width:560px;justify-self:end;width:100%}}
.보류안내{grid-column:1/-1;margin:0;font-size:12px;line-height:1.55;color:var(--글흐림)}

/* 카드 안의 놓침 줄. 올리기는 글이 나가는 단추라 '작동' 과 같은 결(.주)이다. */
.놓침줄{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:12px;
}
.놓침글{
  color:var(--경고);font-weight:600;font-size:14px;margin-right:auto;
}
.놓침줄 .단추{flex:none;padding:0 14px}

/* ── 예약판 ─────────────────────────────────────────────────────────────
 * 기록판과 같은 판(어두운 섬)을 쓰고, 안에 시각 칸 한 줄만 놓는다. 그래서 칸과
 * 단추도 어두운 면에 맞게 뒤집는다(아래 '기록판' 의 .기록판 .단추.주 참고). */
.예약줄{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.예약칸{flex:1 1 170px}
.기록판 .예약칸{background:#2a2b2f;border-color:#3a3b40;color:#f2efe9}
.기록판 .예약칸:focus{background:#202124;border-color:#8fb4dc}
.예약줄 .단추{flex:none}
.예약말{margin:11px 1px 0;font:12.5px/1.6 var(--글꼴);color:#a6a29a}

/* ── 본문 ────────────────────────────────────────────────────────────── */
main{
  width:100%;max-width:var(--안폭);margin:0 auto;
  /* 남는 세로를 전부 받는다. 이게 없으면 기기가 세 대일 때 화면 아래 절반이
   * 통째로 빈다. 0 으로 안 줄어드는(flex-shrink:0) 것이 중요하다 — 토스트가
   * 떠서 자리를 더 먹어도 카드가 손가락 밑에서 줄어들지 않는다. */
  flex:1 0 auto;
  display:flex;flex-direction:column;
  padding:12px 16px calc(16px + env(safe-area-inset-bottom));
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
}
/* 게시글등록의 .칸묶음 과 같은 격자: 최소폭에서 자동으로 접힌다. */
#목록{
  flex:1;
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  /* **줄은 내용만큼만 높다.** 남는 세로를 줄이 나눠 갖게 해 봤더니(1fr)
   * 카드가 760px 까지 늘어나면서 안이 통째로 헐거워졌다 — 계기 우물이 속이
   * 빈 상자가 되고, 단추 사이가 손가락 두 개만큼 벌어진다.
   * 화면을 채우는 것은 **가로**로 한다. 세로로 남는 자리는 그냥 바탕이다. */
  grid-auto-rows:min-content;
  align-items:stretch;   /* 카드 높이를 맞춰 브레이크가 같은 줄에 선다 */
}
/* 320px 짜리 좁은 폰에서 340px 최소폭은 가로 스크롤을 만든다. 끈다. */
@media (max-width:379px){#목록{grid-template-columns:1fr}}

/* ── 기기 카드 ───────────────────────────────────────────────────────
 * 게시글등록의 .상자: 흰 면, 실선 하나, 반지름 10, 그림자 없음. 예전의 세 겹
 * 둥근 모서리(껍데기·판·우물)는 걷었다 — 겹이 많으면 종이 위에 종이를 또 올린
 * 것처럼 무거워진다.
 * 그래도 **층은 둘이다.** 위는 판(계기와 되돌릴 수 없는 단추), 아래는 실선
 * 하나 밑의 브레이크. 기록판은 판만 덮고 브레이크는 안 덮는다 — 기록을 보는
 * 중에도 '중지' 는 늘 보이고 늘 눌린다.
 */
.기기{
  /* grid 칸 안에서 이 값이 없으면 내용의 min-content 가 칸 폭을 밀어내
   * 좁은 폰에서 가로 스크롤이 생긴다. */
  min-width:0;
  /* **카드가 자기 폭을 스스로 안다.** 화면 폭이 아니라 카드 폭에 맞춰 글자와
   * 단추가 커지므로(아래 @container), 두 열이든 다섯 열이든 카드 안의 비율이
   * 그대로다. 화면 폭으로 재면 기기 대수에 따라 비율이 어긋난다. */
  container:card / inline-size;
  display:flex;flex-direction:column;
  background:var(--판);
  border:1px solid var(--선);
  border-radius:10px;
}
/* 놓친 것이 있으면 위쪽에 주색 선 하나. 넓은 면을 칠하는 것보다 가는 선 하나가
 * 눈에 오래 남는다(게시글등록 #띠 의 아래 실선과 같은 수법). 테두리가 아니라
 * 안쪽 그림자라 카드 키가 1px 도 안 변한다. */
.기기.경보{box-shadow:inset 0 2px 0 var(--위험)}

.판{
  /* 기록판이 이 판 위에 정확히 겹쳐 앉는다(.기록판 참고). */
  position:relative;
  flex:1;min-width:0;
  display:flex;flex-direction:column;
  padding:16px 16px 16px;
}
/* 안 붙어 있는 기기는 읽을 것이 옛 값이다. 색을 더하는 대신 빼서 말한다 —
 * 상태 줄(언제 마지막으로 붙었나)만 그대로 또렷하다. */
.기기.끊김 .머리,.기기.끊김 .우물{opacity:.6}
.기기.끊김 .이름{color:var(--글꺼짐)}

/* 머리: 이름 + 연필 + 번호.
 * flex 가 아니라 grid 인 이유가 있다. app.js 가 이름 span 을 input 으로
 * 통째로 갈아 끼우는데(머리.replaceChild), flex 로 두면 입력칸이 폭을 다
 * 먹어 번호가 세 줄로 쪼개진다. 자리를 격자로 못 박으면 무엇이 들어와도
 * 배치가 그대로다. */
.머리{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:8px;
}
.이름{
  grid-column:1;grid-row:1;
  min-width:0;
  /* **block 이어야 한다.** flex 로 두면 text-overflow:ellipsis 가 아예 안
   * 그려져서, 긴 별칭이 "…" 없이 글자 중간에서 뚝 잘린다(실제로 그랬다).
   * 세로 가운데 맞춤은 flex 대신 line-height 로 한다. */
  display:block;
  height:34px;line-height:34px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:600 19px/34px var(--글꼴큰);letter-spacing:-.015em;color:var(--글);
}
/* 이름 고치는 칸은 '초점이 온 칸' 모양 그대로다(흰 면·쪽빛 테두리). 생기자마자
 * 초점을 받으므로 위의 :focus-visible 고리가 테두리에 붙어 한 겹으로 읽힌다. */
input.이름칸{
  grid-column:1;grid-row:1;
  min-width:0;width:100%;height:34px;min-height:0;
  margin:0;padding:0 10px;
  font:600 19px/1 var(--글꼴큰);letter-spacing:-.015em;
  color:var(--글);background:var(--판);
  border:1px solid var(--강조);border-radius:7px;
}
/* 연필 = 게시글등록의 28px 아이콘 단추. 테두리 없이 흐린 그림으로 서 있다가
 * 손이 닿으면 먹이 된다. */
.연필{
  position:relative;
  grid-column:2;grid-row:1;
  width:28px;height:28px;padding:0;
  display:inline-grid;place-items:center;
  background:transparent;border:1px solid transparent;border-radius:7px;
  color:var(--글꺼짐);cursor:pointer;
  transition:background .12s,color .12s;
}
/* 보이는 크기는 28px 그대로, 누르는 넓이만 44px 로 넓힌다. */
.연필::after{content:"";position:absolute;inset:-8px;border-radius:12px}
.연필:hover:not(:disabled){background:var(--판밝음);color:var(--글)}
.연필 svg{width:15px;height:15px}
.연필:disabled{opacity:.4;cursor:default}
.번호{
  grid-column:1 / -1;grid-row:2;
  margin-top:2px;
  font:400 12.5px/1.4 var(--글꼴);
  /* **font 단축 뒤에 다시 걸어야 한다.** 단축 속성은 font-variant 를 normal 로
   * 되돌리므로, 위쪽에 모아 둔 tabular-nums 규칙이 여기서 통째로 지워진다. */
  font-variant-numeric:tabular-nums;
  letter-spacing:.16em;color:var(--글꺼짐);
}

/* 상태 줄.
 * '붙어 있나' 와 '돌고 있나' 는 다른 층이다. 등은 붙어 있는지를, 말은 무엇을
 * 하고 있는지를 말한다. 그리고 **색만으로 가르지 않는다** — 켜진 등은 채워져
 * 숨 쉬고, 꺼진 등은 채워지되 회색이고, 안 붙은 등은 속이 비어 있다. 색이 안
 * 보여도 모양이 남는다. */
.상태{
  display:flex;align-items:center;gap:8px;
  margin-top:12px;
  font-size:14px;font-weight:500;color:var(--글);
}
/* 게시글등록의 #점. 붙어는 있는데 아직 상태를 한 번도 안 올린 기기(.모름)는
 * 켜지도 꺼지지도 않은 옅은 점이다 — '모른다' 를 '멈춤' 이나 '작동중' 으로
 * 그리면 안 된다. */
.등{
  width:8px;height:8px;border-radius:50%;
  background:var(--선밝음);
  flex:0 0 auto;                            /* 상태말이 두 줄로 접혀도 안 찌그러진다 */
}
/* **숨은 2.5초다.** 게시글등록은 2초인데, 이 화면은 목록을 5초마다 새로 그려
 * 등이 그때마다 처음부터 다시 숨을 쉰다. 2초면 다시 그리는 순간이 숨의 한복판
 * (가장 흐린 때)이라 5초마다 등이 탁 켜지며 깜빡인다. 2.5초는 5초를 나누어
 * 떨어지므로 다시 그리는 순간이 늘 숨의 처음·끝(가장 밝은 때)과 겹친다. */
.기기.작동중 .등{
  background:var(--성공);
  box-shadow:0 0 0 3px var(--성공흐림);
  animation:맥박 2.5s ease-in-out infinite;
}
@keyframes 맥박{0%,100%{opacity:1}50%{opacity:.35}}
.기기.멈춤 .등{background:var(--글꺼짐)}
.기기.끊김 .등{
  background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--글꺼짐); /* 속이 빈 고리 */
}
.기기.모름 .등{background:var(--선밝음)}
.기기.작동중 .상태말{color:var(--성공)}
.기기.멈춤 .상태말{color:var(--글흐림)}
.기기.끊김 .상태말,.기기.모름 .상태말{color:var(--글꺼짐)}
.본때{margin-left:auto;font:400 12px/1 var(--글꼴);color:var(--글꺼짐);
      white-space:nowrap;font-variant-numeric:tabular-nums}

/* 계기.
 * **세 값은 독립이 아니라 포함관계다** — 놓친것 ⊆ 지금할것 ⊆ 기다림
 * (app/scheduler.py 의 due_now / missed). 그래서 똑같은 칸 셋으로 나란히
 * 세우지 않는다. 그렇게 두면 12·1·3 을 보고 사람이 16건이라고 읽는다.
 * 큰 수 하나를 세우고 나머지를 '그중' 으로 매단다.
 * 우물은 흰 판에 **눌러 넣은 자리**다(입력칸과 같은 --판밝음). */
.우물{
  /* 카드가 세로로 늘어나면 남는 자리를 계기가 받는다. 가운데를 비워 두고
   * 단추만 바닥으로 밀려나는 대신, 이 화면에서 제일 자주 읽는 숫자가 커진다.
   * **다만 끝이 있다.** 여기까지 안 막으면 남는 자리를 우물이 전부 삼켜,
   * 숫자 하나가 텅 빈 상자 한가운데 뜬다. */
  /* 한 줄의 카드들은 키가 같다(align-items:stretch). 그 차이를 여기서
   * 받아 브레이크가 같은 줄에 서게 한다. */
  flex:1;max-height:250px;
  display:flex;flex-direction:column;justify-content:center;
  margin-top:12px;padding:12px 14px;
  background:var(--판밝음);border-radius:7px;
}
.큰{display:flex;align-items:baseline;gap:8px}
.큰 .라벨{font-size:12.5px;font-weight:500;color:var(--글흐림)}
.큰 .값{
  font:600 30px/1 var(--글꼴큰);letter-spacing:-.025em;color:var(--글);
  font-variant-numeric:tabular-nums;   /* font 단축이 지운 것을 되건다 */
}
.큰 .단위{font-size:12.5px;color:var(--글흐림)}
.잔{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 13px;
  margin-top:8px;font-size:13px;color:var(--글흐림);
}
.잔 b{font-weight:600;color:var(--글)}
/* 놓친 것은 못 보고 지나가면 그날 예약이 통째로 안 나간다. 0 일 때도 자리를
 * 만들어 두면 늘 있는 자리가 되어 결국 안 보게 되므로, 0 이 아닐 때만
 * 만든다. 그때는 다른 잔값과 아예 다른 물건(호박빛 알약)이 된다. 카드 전체의
 * '볼 것이 있다' 는 위쪽 주색 선(.기기.경보)이 말한다. */
.놓침{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 10px;margin:-2px 0;border-radius:999px;
  background:var(--경고흐림);color:var(--경고);font-weight:600;
  border:1px solid #e6d5ab;
}
.놓침 b{color:inherit}
.놓침 svg{width:12px;height:12px}

/* 기록 보기.
 * **계기 안에 있다.** 읽기만 하는 물건이라 되돌릴 수 없는 단추들이 있는 판
 * 위나, 브레이크가 있는 층에는 안 둔다 — 기록을 보려고 뻗은 손가락이
 * 빗나가 '지금검사' 를 때리면 글이 나간다.
 * 게시글등록의 '조용' 단추다. 이 화면에서 테두리·색이 든 것은 실제로 무언가를
 * 하는 단추뿐이어야 한다. 우물이 이미 --판밝음 이라, 손이 닿으면 흰 면으로
 * 떠오른다(한 칸 밝게). */
.기록단추{
  align-self:flex-start;position:relative;
  margin-top:10px;min-height:34px;padding:0 10px 0 8px;margin-left:-8px;
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid transparent;border-radius:7px;
  background:transparent;color:var(--글흐림);
  font:500 13px/1 var(--글꼴);cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.기록단추:hover:not(:disabled){background:var(--판);color:var(--글);
                               border-color:var(--선)}
.기록단추:disabled{opacity:.4;cursor:default}
.기록단추 svg{width:15px;height:15px}
/* 보이는 크기는 34px 그대로, **누르는 넓이만** 44px 로 넓힌다(연필과 같은
 * 수법이다). 폰에서 34px 짜리는 손가락으로 두 번에 한 번 빗나간다. */
.기록단추::after{content:"";position:absolute;inset:-5px;border-radius:10px}
/* 도는 동안 붙는 점. .단추.도는중 과 같은 물건이지만 그쪽은 .단추 에만
 * 걸려 있다. 누르는 넓이로 쓰던 ::after 를 이때는 점으로 쓰므로 자리를
 * 흐름 안으로 되돌린다. */
.기록단추.도는중::after{
  content:"";position:static;inset:auto;
  width:11px;height:11px;
  border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:돌기 .8s linear infinite;
}

/* ── 명령 ────────────────────────────────────────────────────────────
 * 자리와 크기가 안전 규칙이다.
 *   작동·이어서 진행 — **되돌릴 수 없다.** 남의 게시판에 글이 실제로 나간다.
 *                     판 위에, 확인창 뒤에 둔다.
 *   중지          — 언제 눌러도 안전한 비상 브레이크. 실선 밑 아래층에 홀로,
 *                   더 크게, 확인창 없이 둔다. 폭은 위 단추와 맞춘다.
 * 급할 때 카드 아래쪽을 후려치는 손가락이 무엇을 때리든 그것은 브레이크여야
 * 한다. 그래서 둘을 아예 다른 층(판 / 브레이크)에 올려 놓았다.
 */
.단추들{display:flex;gap:8px;margin-top:auto;padding-top:16px}

button{font-family:inherit}

/* 게시글등록의 button: 흰 면에 실선 하나, 반지름 7, 500 굵기. **채우는 단추는
 * 한 종류(.주)뿐이다** — 화면에 채운 면이 여럿이면 무엇부터 눌러야 하는지가
 * 안 읽힌다. 키만 다르다: 게시글등록의 37px 이 아니라 손가락 넓이 44px 이다.
 * 글자는 접힐 수 있게 둔다 — 좁은 폰에서 단추 셋이 한 줄에 서면 '이어서 진행'
 * 이 넘친다. 잘리는 것보다 두 줄이 낫다. */
.단추{
  flex:1;min-width:0;min-height:44px;padding:0 12px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--판);color:var(--글);
  border:1px solid var(--선밝음);border-radius:7px;
  font:500 15px/1.2 var(--글꼴);text-align:center;cursor:pointer;
  transition:background .12s,border-color .12s;
}
.단추:hover:not(:disabled){background:var(--판밝음);border-color:var(--글꺼짐)}
.단추:active:not(:disabled){background:var(--선)}
.단추 svg{width:15px;height:15px}

/* 켜는 단추. 화면에서 유일하게 채운 면이다. */
.단추.주{background:var(--강조);border-color:var(--강조);color:#fff}
.단추.주:hover:not(:disabled){background:#3a6084;border-color:#3a6084}
.단추.주:active:not(:disabled){background:#284560;border-color:#284560}

/* **판의 단추와 좌우 끝을 맞춘다.** 판과 같은 안쪽 여백이라 바로 위의 '작동'
 * 과 폭이 같다. 층이 다르다는 것은 폭이 아니라 **실선 하나와 자리와 높이**가
 * 말한다. */
.브레이크{padding:12px 16px 16px;border-top:1px solid var(--선)}
/* 게시글등록의 button.위험: 빨간 상자가 아니라 **글자색**이 '이것은 멈춘다' 를
 * 말한다. 카드마다 빨간 테두리가 있으면 목록 전체가 오류 화면처럼 보인다.
 * 손을 올렸을 때만 옅게 물든다. */
.단추.멈추기{
  width:100%;flex:none;min-height:48px;
  font-weight:600;
  color:var(--위험);
}
.단추.멈추기:hover:not(:disabled){background:var(--위험흐림);border-color:var(--위험)}
.단추.멈추기:active:not(:disabled){background:#a8443c24}

.단추:disabled{opacity:.4;cursor:not-allowed}

/* 명령이 도는 동안. 글자를 스피너로 바꾸지 않는다 — 글자가 사라지면 사람이
 * 자기가 무엇을 눌렀는지 잃어버린다. 옆에 점을 붙인다. 색은 글자색을 따라가
 * 흰 글씨(.주)와 먹 글씨 단추 양쪽에 같은 한 줄이 맞는다. */
.단추.도는중::after{
  content:"";width:13px;height:13px;
  border:1.5px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:돌기 .8s linear infinite;
}
/* **눌려서 도는 중인 단추는 덜 흐린다.** 명령이 도는 동안 단추는 잠기는데
 * (app.js 명령), :disabled 의 .4 를 그대로 쓰면 '고장 나서 꺼진 단추' 로
 * 읽히고 도는 점도 거의 안 보인다(게시글등록의 .일하는중 과 같은 까닭). */
.단추.도는중:disabled{opacity:.85;cursor:progress}
@keyframes 돌기{to{transform:rotate(360deg)}}

/* ── 카드가 커질 때 ──────────────────────────────────────────────────
 * 화면이 아니라 **카드**를 재서 키운다(container-type:inline-size).
 * PC 에서 카드가 600px 폭이 되면 30px 짜리 숫자는 작은 글씨가 되어 버린다 —
 * 계기판인데 계기가 안 보이는 셈이다. 여기서 커지는 것은 셋뿐이다:
 * 읽는 것(이름·숫자)과 누르는 것(단추), 그리고 그 둘 사이의 숨.
 * 나머지(테두리·자간·색)는 그대로 둔다. 전부 같이 커지면 그냥 확대다.
 *
 * 이 규칙들이 기본 규칙보다 **뒤에** 있어야 한다. 특이도가 같아서, 앞에 두면
 * 하나도 안 먹는다.
 */
@container card (min-width:400px){
  .판{padding:20px 20px 18px}
  .이름{height:38px;line-height:38px;font-size:21px}
  input.이름칸{height:38px;font-size:21px}
  .상태{margin-top:14px;font-size:15px}
  .우물{margin-top:14px;padding:14px 16px}
  /* **계기가 자기 높이를 안다.** 카드가 세로로 늘어나면 우물이 그 자리를 다
   * 받는데, 그 안의 숫자가 30px 로 남아 있으면 큰 화면일수록 계기가 작아
   * 보인다 — 텅 빈 상자 한가운데 작은 숫자가 뜬다(실제로 그랬다).
   * cqh 는 이 우물의 높이다. 그래서 우물이 커진 만큼만 숫자가 커진다.
   *
   * **좁은 카드에서는 안 켠다.** size 담기는 안쪽 내용을 높이 계산에서
   * 빼므로, 잔줄이 두 줄로 접히는 좁은 카드에서 켜면 둘째 줄이 우물 밖으로
   * 삐져나온다. min-height 는 담기로 0 이 된 안쪽 대신 세우는 바닥이다. */
  .우물{container:well / size;min-height:152px}
  .큰 .값{font-size:clamp(40px,33cqh,124px)}
  .큰 .라벨{font-size:clamp(12.5px,3.4cqh,18px)}
  .큰 .단위{font-size:clamp(12.5px,3.4cqh,19px)}
  .잔{margin-top:clamp(8px,2.6cqh,20px);font-size:clamp(13px,3.5cqh,19px)}
  .놓침{padding:4px 12px}
  .놓침 svg{width:14px;height:14px}
  .단추들{gap:10px;padding-top:18px}
  .단추{min-height:46px}
  .브레이크{padding:14px 20px 20px}
  .단추.멈추기{min-height:50px;font-size:16px}
}
@container card (min-width:540px){
  .판{padding:24px 24px 20px}
  .이름{height:42px;line-height:42px;font-size:24px}
  input.이름칸{height:42px;font-size:24px}
  .번호{font-size:13.5px}
  .상태{margin-top:16px;font-size:16px}
  .등{width:9px;height:9px}
  .우물{margin-top:16px;padding:18px 20px}
  .큰{gap:10px}
  .놓침{padding:5px 14px}
  .단추들{padding-top:20px}
  .단추{min-height:50px;font-size:16px}
  .브레이크{padding:16px 24px 24px}
  .단추.멈추기{min-height:54px;font-size:17px}
}

/* ── 빈 화면 / 처음 읽는 중 ─────────────────────────────────────────── */
.귀띔{color:var(--글꺼짐);font-size:13px}
/* 게시글등록의 .빔: 흐린 글 한 줄. 상자는 점선이라 '아직 아무것도 안 올려
 * 놓은 자리' 로 읽힌다. */
.빈칸{
  grid-column:1 / -1;
  /* 줄이 화면을 채우도록 늘어나므로, 안쪽 글은 가운데로 모은다. 안 그러면
   * 빈 화면에서 안내문 하나가 저 위에 붙어 있게 된다. */
  display:grid;align-content:center;justify-items:center;
  padding:48px 24px;text-align:center;
  background:var(--판);
  border:1px dashed var(--선밝음);border-radius:10px;
}
.빈칸 svg{width:28px;height:28px;color:var(--글꺼짐);margin-bottom:12px}
.빈칸 p{margin:0 auto;max-width:34ch;color:var(--글흐림);font-size:14px;line-height:1.65}

/* 처음 읽는 동안 자리를 미리 잡아 둔다. "읽는 중…" 한 줄만 두면 목록이 뜨는
 * 순간 화면이 통째로 뛴다. 카드와 같은 흰 면에 우물색 막대들이다. */
.뼈대{
  display:flex;flex-direction:column;
  background:var(--판);border:1px solid var(--선);
  border-radius:10px;
}
.뼈대 i{flex:1;padding:16px;min-height:224px}
.뼈대 span{
  display:block;height:11px;border-radius:5px;background:var(--판밝음);
  margin-bottom:12px;animation:숨쉬기 1.8s var(--곡선) infinite;
}
.뼈대 span:nth-child(1){width:46%;height:20px}
.뼈대 span:nth-child(2){width:34%}
.뼈대 span:nth-child(3){width:100%;height:66px;margin-top:16px;border-radius:7px}
.뼈대 span:nth-child(4){width:100%;height:44px;margin-top:16px;border-radius:7px}
@keyframes 숨쉬기{0%,100%{opacity:1}50%{opacity:.45}}

/* ── 알림(토스트) ─────────────────────────────────────────────────────
 * 게시글등록의 .쪽지: **재질이 먹이다.** 흰 판에 흰 쪽지를 얹으면 어디까지가
 * 판이고 어디부터가 말인지 안 갈린다. 이 화면에서 어두운 것은 기록판(기계가
 * 말하는 면)뿐이고, 프로그램이 사람에게 거는 말도 같은 면이어야 맞다. 테두리도
 * 줄무늬도 없다 — 재질이 이미 "이건 판이 아니라 말이다" 를 한다. 그림자는
 * 어두운 것이 밝은 면 위에 뜨는 것이라 판보다 깊다. */
.알림{
  position:fixed;z-index:50;
  left:16px;right:16px;
  /* **바닥이 아니라 위에 뜬다.** 카드가 화면 세로를 채우게 되면서 화면 바닥은
   * 늘 어느 카드의 브레이크 자리가 되었다. 언제 눌러도 안전한 유일한 단추를,
   * 결과를 알려 주는 쪽지가 15초 동안 덮으면 안 된다. 위로 올리면 덮는 것이
   * 없어서, 아래에 자리를 내주던 규칙(body.알림뜸)도 같이 없앴다.
   * 65 = 머리띠 53 + 틈 12. */
  top:calc(65px + env(safe-area-inset-top));
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 18px;
  background:var(--로그바탕);color:#f2efe9;color-scheme:dark;
  border:0;border-radius:8px;
  box-shadow:0 18px 40px -12px #0008;
  font:500 15px/1.5 var(--글꼴);letter-spacing:.005em;
  animation:쪽지오기 .16s ease-out;
  /* **손가락을 안 받는다.** 안에 누를 것이 하나도 없는데 상자는 상자여서,
   * 15초짜리 쪽지가 떠 있는 동안 그 아래로 지나가는 '중지' 의 탭을 통째로
   * 가로챈다. 페이드 꼬리를 안 쓰는 것과 똑같은 까닭이다(요약띠 참고) —
   * 이 화면에서 브레이크를 막는 물건은 하나도 있으면 안 된다. */
  pointer-events:none;
}
.알림 svg{width:17px;height:17px;margin-top:3px;color:#a6a29a}
.알림 .글{flex:1;min-width:0;white-space:pre-line;overflow-wrap:anywhere}
/* 요약띠가 떠 있으면 그 밑으로 내려간다. 경보 칩을 쪽지가 덮으면 안 된다 —
 * 놓친 것이 있다는 신호가 명령 결과에 가려지는 것이 제일 나쁜 순서다.
 * :has 를 모르는 브라우저에서는 65px 자리에 그대로 뜬다(덮되, 곧 사라진다).
 * 112 = 머리띠 53 + 요약띠 48 + 틈 11. */
body:has(#요약:not([hidden])) .알림{
  top:calc(112px + env(safe-area-inset-top));
}
@keyframes 쪽지오기{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* PC 에서 전폭 토스트를 그대로 늘리면 한 줄이 너무 길어 눈이 끝까지 못 간다. */
@media (min-width:720px){
  .알림{left:auto;right:24px;max-width:440px}
}

/* ── 등록 코드 창 ────────────────────────────────────────────────────
 * window.alert 을 안 쓰는 이유는 생김새가 아니다. **한 번 닫으면 코드를 다시
 * 볼 수 없다** — PC 앞으로 걸어가는 사이에 잘못 닫으면 코드를 새로 받아야
 * 한다. 여기서는 닫기 전까지 떠 있고 남은 시간을 세어 준다.
 */
/* **닫힌 창은 우리가 직접 숨긴다.** 브라우저 기본에도 dialog:not([open])
 * {display:none} 이 있지만, showModal 이 없는 브라우저는 <dialog> 자체를
 * 모르는 브라우저라 그 기본도 없다 — 그러면 창 속살(.창 카드째)이 목록 밑에
 * 늘 그려진다. hidden 을 !important 로 지키는 것과 같은 자리다. */
dialog:not([open]){display:none}
/* 게시글등록의 dialog: 흰 판, 반지름 12, 떠 있는 것이라 --뜸 을 갖는다. */
dialog{
  padding:0;
  background:var(--판);color:var(--글);
  border:1px solid var(--선);border-radius:12px;
  box-shadow:var(--뜸);
  max-width:calc(100% - 32px);max-height:100%;
}
dialog::backdrop{background:#24231f4d}
.창{width:min(340px,calc(100vw - 34px))}
.창 .속{padding:24px 22px 20px;text-align:center}
.창 h2{margin:0 0 4px;font:600 17px/1.3 var(--글꼴큰);letter-spacing:-.01em}
.창 .귀띔{margin:0}
/* 여섯 자리는 고정폭으로 — 자리마다 폭이 같아야 PC 화면에 옮겨 칠 때 몇 번째
 * 자리인지 눈이 안 헤맨다. */
.코드값{
  margin:20px 0 8px;
  font:600 40px/1 var(--고정);letter-spacing:.15em;
  font-variant-numeric:tabular-nums;   /* font 단축이 지운 것을 되건다 */
  /* 자간이 오른쪽에도 붙어 가운데가 왼쪽으로 밀린다. 그만큼 되민다. */
  text-indent:.15em;
  color:var(--강조);
}
.남은때{font-size:12.5px;color:var(--글흐림);min-height:19px;
        font-variant-numeric:tabular-nums}
.남은때.급함{color:var(--위험);font-weight:600}
.창 .단추{width:100%;flex:none;margin-top:20px;min-height:46px}

/* ── 기록판 ────────────────────────────────────────────────────────
 * **팝업이 아니다.** 카드의 판 위로 펼쳐져 덮이고, 비상 브레이크가 있는
 * 아래층은 안 덮는다 — 기록을 보는 중에도 '중지' 는 늘 눈에 보이고 늘
 * 눌린다. 화면 전체를 덮는 모달이면 그 한 가지가 깨진다.
 *
 * 게시글등록의 로그창과 같은 **어두운 섬**이다 — 이 화면에서 유일하게 어두운
 * 자리이고, 그래서 color-scheme 을 여기서만 dark 로 되돌린다(스크롤바·날짜
 * 고르개). 판과 같은 자리라, 뜨는 것이 아니라 **그 판이 뒤집힌 것**처럼 보인다.
 * 카드 높이는 하나도 안 변하므로 다른 카드가 밀리지 않는다.
 */
.기록판{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;
  /* 불투명해야 한다. 밑의 계기와 단추가 비쳐 보이면 글자가 겹쳐 읽힌다. */
  background:var(--로그바탕);color:#f2efe9;
  color-scheme:dark;
  /* 카드 반지름 10 에서 테두리 1px 을 뺀 안쪽 곡선. 아래는 브레이크 층과
   * 실선으로 만나므로 반듯하다. */
  border-radius:9px 9px 0 0;
  animation:펼치기 .26s var(--곡선);
}
/* 위에서 아래로 펼쳐진다 — 누른 단추가 판 안에 있으므로 그 자리에서
 * 내려오는 것처럼 보인다. */
@keyframes 펼치기{from{opacity:0;transform:translateY(-10px)}}
/* 먹 위에서는 쪽빛 고리가 안 보인다. 종이색으로. */
.기록판 :focus-visible{outline-color:#f2efe9}

/* 머리줄도 어두운 섬 안에 있다(게시글등록의 #로그도구). 판과 한 칸 다른 먹이라
 * 어디까지가 머리이고 어디부터가 기록인지 갈린다. */
.기록머리{
  display:flex;align-items:center;gap:9px;
  min-height:44px;padding:6px 8px 6px 14px;
  background:#202124;border-bottom:1px solid #2c2d31;
  border-radius:9px 9px 0 0;
}
.기록제목{font-size:13px;font-weight:600;color:#f2efe9;white-space:nowrap}
.기록누구{
  flex:1;min-width:0;font-size:12.5px;color:#a6a29a;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 게시글등록 .쪽지엑스: 평소에는 흐리고 손이 닿으면 또렷하다 — 늘 또렷하면
 * 읽을 기록보다 X 가 먼저 보인다. */
.기록닫기{
  position:relative;flex:0 0 auto;width:28px;height:28px;padding:0;
  display:inline-grid;place-items:center;
  background:transparent;border:0;border-radius:6px;
  color:#a6a29a;cursor:pointer;
}
/* 보이는 크기는 28px 그대로, 누르는 넓이만 44px 로 넓힌다. */
.기록닫기::after{content:"";position:absolute;inset:-8px;border-radius:12px}
.기록닫기:hover{background:#ffffff14;color:#f2efe9}
.기록닫기 svg{width:15px;height:15px}

/* min-height:0 이 없으면 flex 칸이 내용만큼 커져 스크롤이 안 생기고, 판이
 * 카드 밖으로 흘러넘친다. 글자는 게시글등록 로그창과 같은 고정폭 13/1.6. */
.기록몸{
  flex:1;min-height:0;
  padding:10px 14px 12px;
  overflow-y:auto;overscroll-behavior:contain;
  font:13px/1.6 var(--고정);color:#c8c4bc;
}
/* **가로 줄이다(flex).** 게시글등록의 로그 줄은 한 덩이 글(display:block)이지만
 * 여기는 시각과 말이 따로 온다(app.js 기록줄들) — 말이 두 줄로 접혀도 시각
 * 밑으로 파고들지 않게 칸을 나눈다. */
.로그줄{
  display:flex;gap:12px;align-items:baseline;
  padding:1px 0;
}
/* 시각은 자리폭이 같아야 한다. 안 그러면 줄마다 말이 다른 자리에서 시작해
 * 목록이 지그재그로 보인다. 요원이 보내는 시각은 "%H:%M:%S" 여덟 자다
 * (write_content 의 app/remote.py 기록모으기) — 고정폭이라 8ch 가 딱 맞고,
 * 시각이 빈 줄도 같은 자리를 비운다. */
.로그때{
  flex:0 0 8ch;
  color:#7d7970;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.로그말{flex:1;min-width:0;color:#d8d5cf;overflow-wrap:anywhere}
/* 시각이 없는 줄(꼬리말·안내). 시각 자리를 비우고 통째로 쓴다. 기록이 아니라
 * 안내라서 더 흐리다. */
.로그줄.홑{display:block;color:#a6a29a;padding:8px 0}

/* 예약판의 '예약' 단추. 먹 위의 채운 단추는 뒤집는다 — 쪽빛 면은 먹 위에서
 * 가라앉아 안 보인다. 종이색으로 채우고 먹 글씨(게시글등록 .쪽지 button.주). */
.기록판 .단추.주{background:#f2efe9;border-color:#f2efe9;color:var(--로그바탕)}
.기록판 .단추.주:hover:not(:disabled){background:#ffffff;border-color:#ffffff}
.기록판 .단추.주:active:not(:disabled){background:#e4e0d8;border-color:#e4e0d8;color:var(--로그바탕)}

/* ── 로그인 ──────────────────────────────────────────────────────────
 * 게시글등록의 잠금 화면: 가운데 360px, 이름이 제목이고, 칸 둘과 단추 하나가
 * 떠 있는 흰 상자(--뜸) 안에 있다. 칸 글자만 16px 이다(iOS 확대 막이). */
.로그인{
  min-height:100svh;
  display:grid;place-items:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom));
}
.로그인칸{width:min(360px,100%)}
.로그인칸 .속{
  padding:28px 24px 22px;
  background:var(--판);
  border:1px solid var(--선);border-radius:10px;
  box-shadow:var(--뜸);
}
.로그인칸 .표식{width:40px;height:40px;margin:0 auto 12px}
.로그인칸 .표식 svg{width:32px;height:32px}
/* 잠긴 화면에는 이 이름 말고 무엇을 여는 창인지 알 길이 없다. 그래서 이름이
 * 제목이다 — 굵기가 아니라 크기로 선다(게시글등록 #잠금이름). */
.로그인칸 h1{
  margin:0 0 4px;
  font:400 26px/1.25 var(--글꼴큰);letter-spacing:-.015em;
  text-align:center;color:var(--글);
}
.로그인칸 .귀띔{text-align:center;margin:0 0 22px}
.줄{margin-bottom:12px}
.줄 label{
  display:block;margin-bottom:6px;
  font-size:12.5px;font-weight:500;color:var(--글흐림);
}
.로그인칸 .단추{width:100%;flex:none;margin-top:8px;min-height:46px}
/* 실패 문구. 자리를 미리 잡아 두지 않으면 뜰 때 아래가 밀린다. */
.말{margin:14px 0 0;min-height:19px;font-size:13px;color:var(--위험);
    text-align:center;line-height:1.45}

/* ── 움직임을 줄여 달라고 한 사람에게 ─────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  /* 작동중 등의 숨은 멈춘다. 등은 채운 청자 원 그대로 남아 뜻이 안 사라진다. */
  .기기.작동중 .등{animation:none !important}
  /* 도는 점은 멈추면 뜻이 사라진다. 이것만 남기되 아주 느리게 돌린다. */
  .단추.도는중::after{
    animation:돌기 2.6s linear infinite !important;
    animation-duration:2.6s !important;
    animation-iteration-count:infinite !important;
  }
}

/* ── 탭줄 · 쪽 ─────────────────────────────────────────────────────────
 * 관리자 탭(글쓰기·저장한 글·게시판·예약·설정)이 같은 쪽에 들어왔다. 첫 탭은 **PC 현황** — 지금 화면이 그대로 그 안에
 * 있다(#현황page). 탭줄은 머리띠 밑에 붙지 않고 흐름에 있다: 폰에서 카드를 밀면 위로 사라지고, 끈적 두 층(머리띠·
 * 요약띠)과 scroll-padding-top 은 지금 그대로다. 탭 여섯이 폰 폭에 안 들어가면 접지 않고 옆으로 민다(요약띠와 같은
 * 까닭 — 접히면 높이가 변해 밑의 카드가 밀린다). 탭 단추도 손가락 넓이 44px 이다. 모양은 게시글등록의 #탭줄·.탭
 * (위가 둥근 탭, 켠 탭은 흰 면)이다. */
.탭줄{
  padding:6px 16px 0;
  padding-left:max(16px,env(safe-area-inset-left));
  padding-right:max(16px,env(safe-area-inset-right));
  border-bottom:1px solid var(--선);
}
.탭줄 .안쪽{
  max-width:var(--안폭);margin:0 auto;
  display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.탭줄 .안쪽::-webkit-scrollbar{display:none}
.탭{
  flex:0 0 auto;min-height:44px;padding:0 16px;margin-bottom:-1px;
  background:transparent;border:1px solid transparent;border-bottom:none;
  border-radius:9px 9px 0 0;
  font:500 15px/1.2 var(--글꼴);color:var(--글흐림);cursor:pointer;white-space:nowrap;
  transition:color .12s,background .12s;
}
.탭:hover:not(.켬){color:var(--글);background:#00000008}
.탭.켬{background:var(--판);border-color:var(--선);color:var(--글);font-weight:600}
.탭:disabled{cursor:progress}
/* 탭에 붙는 셈(저장한 글 수·켠 게시판 수 — web/kh/tabs.js 뱃지). */
.탭 .수뱃지{
  margin-left:7px;padding:2px 7px;border-radius:999px;
  font:600 12px/1 var(--고정);font-variant-numeric:tabular-nums;
  background:var(--돎흐림);color:var(--돎);
}
.탭 .수뱃지.셈{background:#00000010;color:var(--글흐림)}

/* 쪽은 켠 것 하나만 보인다. PC 현황은 지금처럼 남는 세로를 받는 기둥이다(main 이 flex:1 로 그 안을 채운다).
 * 관리자 쪽의 속 모양은 web/kh/kh.css 가 그 탭을 처음 열 때 싣는다. */
.쪽{display:none}
.쪽.켬{display:block}
#현황page.켬{display:flex;flex-direction:column;flex:1 0 auto}

/* ── 크기 한 벌(관리자 탭) ───────────────────────────────────────────
 * 게시글등록의 크기 아홉(web/knowhow/style.css '크기 한 벌')을 같은 이름으로 둔다 — 옮겨 온 관리자 탭(web/kh/kh.css)이
 * 고치지 않고 그대로 맞물리게. **값은 폰 값이 바탕이다**: 관리자 탭도 폰에서 열린다. 칸 글자는 16px(그 밑이면 iOS 가
 * 칸을 누를 때 화면을 확대한다), 단추·칸·작은 단추는 키 44px 이상(위아래 패딩 + 글자 × 1.5 + 테두리 2).
 * 마우스가 있는 넓은 화면에서만 게시글등록 값(14px·37px — 표를 빽빽이 훑는 화면)으로 돌아간다.
 * PC 현황(.단추·.칩·input …)은 이 토큰을 안 쓴다 — 폰 화면은 그대로다. --띠·--로그접힘키 는 게시글등록의 머리띠·로그창
 * 키다(관리자에는 그 둘이 없지만 한 벌을 통째로 둔다 — 반쪽만 옮기면 다음 사람이 나머지를 찾는다).
 * --글폭 은 글쓰기 종이 폭이다(write.js 가 고른 값으로 덮는다). */
:root{
  --글자큼:16px; --글자:16px; --글자잔:14px; --글자작음:13px;
  --단추패딩:10px 14px;   /* 10 + 24(16px×1.5) + 10 + 2 = 46px */
  --칸패딩:10px 12px;
  --작은패딩:12px 12px;   /* 12 + 19.5(13px×1.5) + 12 + 2 = 45.5px — 표 줄 안의 작은 단추도 손가락 넓이 */
  --띠:53px; --로그접힘키:46px;
  --글폭:860px;
}
@media (min-width:1024px) and (pointer:fine){
  :root{
    --글자큼:15px; --글자:14px; --글자잔:13px; --글자작음:12px;
    --단추패딩:7px 13px; --칸패딩:7px 11px; --작은패딩:4px 10px;
    --띠:48px;
  }
}

/* ── 게시글등록 PC 카드 ─────────────────────────────────────────────────
 * 지금 카드와 같은 판·같은 브레이크다(app.js 게시글등록칸). 상태 줄 끝에 종류 표 하나만 더 붙는다 — 두 프로그램의 PC 가 한
 * 목록에 섞여도 어느 것이 어느 것인지 읽히게. 오늘 실패 수는 0 이 아닐 때만 주(朱)다. */
.종류표{
  margin-left:auto;flex:none;padding:1px 8px;border-radius:999px;
  border:1px solid var(--선);background:var(--판밝음);
  font:500 12px/1.5 var(--글꼴);color:var(--글흐림);white-space:nowrap;
}
.종류표 + .본때{margin-left:8px}
.잔 b.나쁨{color:var(--위험)}
.모름말{flex-basis:100%;font-size:12.5px;color:var(--글꺼짐)}

/* ── 기록 줄의 색 ─────────────────────────────────────────────────────
 * 1단계에서 남은 것(그때는 app.js 가 줄에 클래스를 안 붙여 CSS 로 못 집었다). 됨·안됨은 게시글등록 로그창의 그 색이다(1단계 설계
 * 표). 갈래는 app.js 기록갈래 가 PC 의 정해진 문장을 낱말로 가른다 — 모르는 문장은 색이 없다. */
.로그줄.됨 .로그말{color:#7fc4a4}
.로그줄.안됨 .로그말{color:#f0bdb7}