/* 펜 압력 테스트(pen-pressure-test) — 필압 계기판 + 종이. 작업면 컨테이너 penw: 위 줄(다음에 할 일 · 예시 재생 · 전체 화면) → 계기판[압력 | 압력 곡선 | 기울기]
   → [점검 레일 | 종이] → 아래 줄(선 굵기 곡선 · 처음부터 · 결과 복사). 계기판·레일은 종이의 위·왼쪽(오른손이 가리지 않는 자리).
   색은 사이트 토큰(종이 wash · 잉크 ink · 막대 fill), 강조색은 지금 일어나는 것(호버 원 · 최대 압력 표시 · 펜 머리 점 · 옆 버튼 선)에만.
   640 이하: 계기판 [압력 | 기울기] 위 · 곡선 아래, 종이 위 · 점검은 한 줄씩 아래. 전체 화면(:fullscreen · .is-full 창 덮기) = 작업면 전체, 종이가 남는 높이를 채운다. */
.pen{container:penw / inline-size;--pen-ink:var(--ink);--pen-acc:var(--accent)}
.pen [hidden]{display:none !important}
.pen p{margin:0}
.pen:lang(ko){word-break:keep-all;overflow-wrap:anywhere}

/* ---------- 위 줄 ---------- */
.pen-top{display:flex;align-items:center;gap:10px 12px;padding:12px 16px;border-bottom:1px solid var(--soft)}
.pen-say{flex:1 1 auto;min-width:0;min-height:3em;display:flex;align-items:center;font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.5;color:var(--ink)}
.pen-acts{flex:none;display:flex;gap:8px}
.pen-acts .v2-btn .i{width:15px;height:15px}
.pen-demo[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--ink)}
.pen-full{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.pen-full:hover{background:var(--fill-hover);border-color:var(--fill-hover)}
.pen-full kbd{padding:1px 5px 0;border:1px solid currentColor;border-radius:var(--radius);font-family:var(--mono);font-size:10.5px;line-height:1.3;opacity:.75}

/* ---------- 계기판 ---------- */
.pen-dash{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1.05fr);border-bottom:1px solid var(--soft)}
.pen-g{display:flex;flex-direction:column;gap:7px;min-width:0;padding:12px 16px 13px;border-left:1px solid var(--soft)}
.pen-g:first-child{border-left:0}
.pen-gh{display:flex;align-items:baseline;gap:8px;min-width:0;font-family:var(--sans);font-size:12.5px;line-height:1.3;color:var(--ink)}
.pen-gh b{font-weight:700;white-space:nowrap}
.pen-gh span{min-width:0;margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.pen-big{font-family:var(--sans);font-size:32px;font-weight:750;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.pen-gs{font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.pen-gp .pen-gs{min-height:2.9em} /* 두 줄 자리 고정: 값 문장이 바뀌어도 계기판 높이 그대로 */
/* 압력 막대: 채움 = 지금 압력, 눈금 = 가장 가볍게(muted) · 최대(강조색) */
.pen-meter{position:relative;display:block;height:10px;margin:2px 0;background:var(--soft);border-radius:var(--radius)}
.pen-meter i{position:absolute;inset:0;border-radius:var(--radius);background:var(--fill);transform:scaleX(0);transform-origin:left center}
.pen-meter b{position:absolute;top:-4px;width:2px;height:18px;margin-left:-1px;border-radius:1px;background:var(--muted)}
.pen-meter b.mx{background:var(--pen-acc)}
/* 압력 곡선 그래프 */
.pen-plot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px;flex:1 1 auto;min-height:86px}
.pen-ax{display:flex;flex-direction:column;justify-content:space-between;font-family:var(--sans);font-size:10.5px;font-weight:600;line-height:1;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.pen-ax i{font-style:normal}
.pen-graph{display:block;width:100%;height:100%;min-height:86px;background:var(--wash);border-radius:var(--radius)}
.pen-graph path{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.pen-graph .gr{stroke:var(--soft);stroke-width:1}
.pen-graph .prev{stroke:var(--muted);stroke-width:1.5;opacity:.5}
.pen-graph .mx{stroke:var(--pen-acc);stroke-width:1.2;stroke-dasharray:5 4}
.pen-graph .line{stroke:var(--ink);stroke-width:2.2}
/* 기울기 다이얼: 위에서 본 펜. 가운데 = 펜 끝, 선 = 펜 머리 쪽 그림자, 고리 = 수직에서 30° · 60° */
.pen-tilt{display:flex;align-items:center;gap:12px;min-width:0}
.pen-dial{flex:none;width:86px;height:86px;overflow:visible}
.pen-dial .o{fill:var(--wash);stroke:var(--line);stroke-width:1.2}
.pen-dial .r{fill:none;stroke:var(--soft);stroke-width:1}
.pen-dial text{font-family:var(--sans);font-size:8px;font-weight:600;fill:var(--muted)}
.pen-dial .sh{stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.pen-dial .cap{fill:var(--pen-acc)}
.pen-dial .tip{fill:var(--ink)}
.pen-tn{display:flex;flex-direction:column;gap:5px;min-width:0}

/* ---------- 본체: 점검 레일 | 종이 ---------- */
.pen-main{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;padding:14px 16px 0}
.pen-chk{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border:1px solid var(--soft);border-radius:var(--radius)}
.pen-k{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;padding:8px 12px;border-top:1px solid var(--soft)}
.pen-k:first-child{border-top:0}
.pen-kh{display:flex;align-items:center;gap:7px;min-width:0;font-family:var(--sans);font-size:12.5px;line-height:1.3;color:var(--ink)}
.pen-kh b{min-width:0;font-weight:700}
.pen-no{flex:none;width:18px;height:18px;border-radius:50%;background:var(--soft);font-size:10.5px;font-weight:800;line-height:18px;text-align:center;color:var(--ink)}
.pen-st{flex:none;margin-left:auto;padding:2px 7px;border-radius:var(--radius);background:var(--soft);font-size:11px;font-weight:700;line-height:1.35;color:var(--muted);white-space:nowrap}
.pen-k[data-s="run"] .pen-st,.pen-k[data-s="part"] .pen-st{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.pen-k[data-s="ok"] .pen-st{background:var(--fill);color:var(--on-fill)}
.pen-k[data-s="warn"] .pen-st{background:var(--ink);color:var(--paper)}
.pen-k[data-s="ok"] .pen-st::before{content:"✓ "}
.pen-k[data-s="warn"] .pen-st::before{content:"! "}
.pen-kv{min-width:0;padding-left:25px;font-family:var(--sans);font-size:13px;font-weight:650;line-height:1.35;color:var(--ink);font-variant-numeric:tabular-nums}
.pen-k[data-s="todo"] .pen-kv,.pen-k[data-s="none"] .pen-kv{color:var(--muted);font-weight:600}
.pen-kd{padding-left:25px;font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}

/* 종이: 점 격자 바탕 위 캔버스 · 예시 꼬리표 · 호버 원 · 빈 종이 안내 */
.pen-paper{position:relative;min-width:0;min-height:clamp(340px,52vh,500px);background-color:var(--wash);background-image:radial-gradient(circle,var(--soft) 1px,transparent 1.4px);background-size:22px 22px;border:1px solid var(--soft);border-radius:var(--radius);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:crosshair}
.pen-paper canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.pen-tag{position:absolute;left:10px;top:10px;display:none;padding:2px 8px;border-radius:var(--radius);background:var(--ink);font-family:var(--sans);font-size:11px;font-weight:700;line-height:1.45;color:var(--paper);pointer-events:none}
.pen[data-demo="1"] .pen-tag{display:block}
.pen-ring{position:absolute;left:0;top:0;box-sizing:border-box;border:2px solid var(--pen-acc);border-radius:50%;pointer-events:none;will-change:transform}
.pen-ring::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--pen-acc)}
.pen-ring.is-btn{background:color-mix(in srgb,var(--pen-acc) 22%,transparent)}
.pen-hint{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 32px);transform:translate(-50%,-50%);font-family:var(--sans);font-size:13.5px;font-weight:650;line-height:1.45;text-align:center;color:var(--muted);pointer-events:none}
.pen-hint .i{width:56px;height:28px;color:var(--pen-acc)}

/* ---------- 아래 줄 ---------- */
.pen-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:12px 16px 14px}
.pen-cv{display:flex;align-items:center;gap:10px;min-width:0;margin-right:auto}
.pen-cvl{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.pen-cv .v2-seg button{display:inline-flex;align-items:center;gap:6px}
.pen-ci{width:18px;height:12px;flex:none}
.pen-ci path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pen-copy .i{width:15px;height:15px}
.pen-out{flex:1 1 100%;min-height:9em;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--wash);font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ink);resize:vertical}
.pen-msg{flex:1 1 100%;min-height:1.4em;margin:0}
.pen-msg:empty{display:none}
.pen-nojs{margin:0;padding:12px 16px;font-family:var(--sans);font-size:13px;color:var(--muted)}

/* ---------- 전체 화면: 작업면 전체, 종이가 남는 높이를 채움 ---------- */
.pen:fullscreen,.pen.is-full{display:flex;flex-direction:column;width:100%;height:100%;max-width:none;margin:0;border:0;border-radius:0;background:var(--card);overflow:auto}
.pen.is-full{position:fixed;inset:0;z-index:2147483646;width:100vw;height:100dvh}
.pen:fullscreen .pen-main,.pen.is-full .pen-main{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)} /* 레일 내용이 행 높이를 키워 아래 줄을 덮지 않게 */
.pen:fullscreen .pen-chk,.pen.is-full .pen-chk{min-height:0;overflow:auto}
.pen:fullscreen .pen-kd,.pen.is-full .pen-kd{display:none}
.pen:fullscreen .pen-paper,.pen.is-full .pen-paper{min-height:0}
@media (max-height:520px){ /* 가로로 눕힌 휴대폰 전체 화면: 안내 문장·계기 설명 줄을 접어 종이 높이 확보 */
  .pen:fullscreen .pen-say,.pen.is-full .pen-say,.pen:fullscreen .pen-gs,.pen.is-full .pen-gs{display:none}
  .pen:fullscreen .pen-top,.pen.is-full .pen-top{padding-top:8px;padding-bottom:8px}
  .pen:fullscreen .pen-plot,.pen.is-full .pen-plot,.pen:fullscreen .pen-graph,.pen.is-full .pen-graph{min-height:56px}
}
.pen:fullscreen .pen-acts .pen-demo,.pen.is-full .pen-acts .pen-demo{display:none}
html.pen-lock,html.pen-lock body{overflow:hidden}

/* ---------- 좁은 작업면 ---------- */
@container penw (max-width:760px){
  .pen-main{grid-template-columns:176px minmax(0,1fr)}
  .pen-dash{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.1fr)}
  .pen-g{padding:11px 12px 12px}
  .pen-dial{width:74px;height:74px}
  .pen-tilt{gap:9px}
  .pen-big{font-size:28px}
}
@container penw (max-width:640px){
  .pen-top{flex-wrap:wrap}
  .pen-say{flex:1 1 100%;min-height:4.5em}
  .pen-dash{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"p t" "c c"}
  .pen-gp{grid-area:p}.pen-gt{grid-area:t}
  .pen-gc{grid-area:c;border-left:0;border-top:1px solid var(--soft)}
  .pen-plot{min-height:76px}
  .pen-graph{min-height:76px}
  .pen-main{display:flex;flex-direction:column-reverse;gap:12px}
  .pen-paper{min-height:clamp(300px,58vh,560px)}
  .pen-k{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:8px 12px}
  .pen-kh{display:contents}
  .pen-kh .pen-no,.pen-kd{display:none}
  .pen-kh b{grid-column:1;grid-row:1}
  .pen-st{grid-column:3;grid-row:1;margin:0}
  .pen-kv{grid-column:2;grid-row:1;padding-left:0;text-align:right}
  /* 전체 화면: 종이가 남는 높이를 채우고 점검은 상태 색 번호 다섯 개 한 줄 */
  .pen:fullscreen .pen-paper,.pen.is-full .pen-paper{flex:1 1 auto;min-height:160px}
  .pen:fullscreen .pen-chk,.pen.is-full .pen-chk{flex:none;flex-direction:row;overflow:visible}
  .pen:fullscreen .pen-k,.pen.is-full .pen-k{flex:1 1 0;display:flex;justify-content:center;padding:6px 4px;border-top:0;border-left:1px solid var(--soft)}
  .pen:fullscreen .pen-k:first-child,.pen.is-full .pen-k:first-child{border-left:0}
  .pen:fullscreen .pen-kh .pen-no,.pen.is-full .pen-kh .pen-no{display:block;width:22px;height:22px;line-height:22px}
  .pen:fullscreen .pen-kh b,.pen.is-full .pen-kh b,.pen:fullscreen .pen-kv,.pen.is-full .pen-kv{display:none}
  .pen:fullscreen .pen-st,.pen.is-full .pen-st{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pen:fullscreen [data-s="ok"] .pen-no,.pen.is-full [data-s="ok"] .pen-no{background:var(--fill);color:var(--on-fill)}
  .pen:fullscreen [data-s="warn"] .pen-no,.pen.is-full [data-s="warn"] .pen-no{background:var(--ink);color:var(--paper)}
  .pen:fullscreen [data-s="run"] .pen-no,.pen.is-full [data-s="run"] .pen-no,.pen:fullscreen [data-s="part"] .pen-no,.pen.is-full [data-s="part"] .pen-no{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink)}
  .pen-cv{flex:1 1 100%;margin-right:0;flex-wrap:wrap}
  .pen-cv .v2-seg{flex:1 1 auto}
  .pen-cv .v2-seg button{flex:1 1 0;justify-content:center}
  .pen-bar .v2-btn{flex:1 1 0;justify-content:center}
}
@container penw (max-width:400px){
  .pen-top,.pen-bar{padding-left:12px;padding-right:12px}
  .pen-main{padding:12px 12px 0}
  .pen-g{padding:10px 12px 11px}
  .pen-big{font-size:25px}
  .pen-dial{width:64px;height:64px}
  .pen-tilt{gap:8px}
  .pen-acts{flex:1 1 100%}
  .pen-acts .v2-btn{flex:1 1 0;justify-content:center}
  .pen-full kbd{display:none} /* 좁은 폭(대개 키보드 없는 기기): 단추 글자 한 줄 */
}

/* ---------- 본문 그림: 압력 곡선 네 가지 ---------- */
.pen-fig{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:640px;margin:14px 0 18px}
.pen-fig div{min-width:0}
.pen-fig svg{display:block;width:100%;max-width:150px;height:auto;margin:0 auto}
.pen-fig .bg{fill:var(--wash);stroke:var(--soft)}
.pen-fig .gr{fill:none;stroke:var(--soft);stroke-width:1}
.pen-fig .ln{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pen-fig figcaption{margin-top:6px;font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--muted);text-align:center}
@media (max-width:560px){ .pen-fig{grid-template-columns:repeat(2,minmax(0,1fr))} }