/* 日本語フォント 이미지 면. 색·반경·여백은 tools-base.css 의 기존 토큰만 쓴다. 본문 폭은 전 페이지 단일 규격(760px), 한 열.
   초기 예시는 기본 계열(J01 Zen Maru Gothic)을 @font-face 로 그린 글자 — swap: 서체가 오기 전엔 대체 글꼴일 수 있고(안내가 붙는다) 오면 바뀐다.
   PNG 는 1600×800(2:1) 고정 — 미리보기 틀도 2:1 로 잡아 교체 때 아래가 밀리지 않게 한다. */
@font-face{font-family:"emopu-jf-sample";src:url("/assets/fonts/J01/ZenMaruGothic-Regular.ttf") format("truetype");font-display:swap}
/* 간격 8px(2026-09-25, 종전 12): 390×844 첫 화면에서 저장 버튼 끝이 849.5 로 6px 넘쳤다 — 버튼·미리보기 비율·글씨는 그대로 두고 블록 사이만 줄인다(→837.5). */
.jf-tool{display:grid;gap:8px}
.jf-field label{display:block;font-size:14px;margin-bottom:4px}
.jf-field textarea{width:100%;box-sizing:border-box;min-height:64px;font-size:17px;line-height:1.5;resize:vertical}
.jf-group{border:0;margin:0;padding:0}
.jf-group legend{font-size:14px;margin-bottom:4px;padding:0}
.jf-chips{display:flex;flex-wrap:wrap;gap:8px}
.jf-chip{position:relative;display:inline-flex}
.jf-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.jf-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px}
.jf-chip input:checked+span{border-color:var(--b);box-shadow:inset 0 0 0 1px var(--b);font-weight:700}
.jf-chip input:checked+span::before{content:"✓ "}
.jf-chip input:focus-visible+span{outline:3px solid var(--b);outline-offset:2px}
.jf-chip input:disabled+span{opacity:.55}
.jf-prev-head{margin:0 0 6px;font-size:14px}
.jf-stage{aspect-ratio:2/1;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.jf-sample{margin:0;padding:0 8%;font-family:"emopu-jf-sample",sans-serif;font-size:28px;line-height:1.5;color:#111}
.jf-stage img{width:100%;height:100%;object-fit:contain}
.jf-stage-msg{margin:0;padding:0 16px;font-size:14px;color:var(--mut);text-align:center}
/* 진단·실패가 뜨면 빈 2:1 틀을 걷고 그 자리에 진단이 온다(빈 흰 틀이 진단·복구 버튼을 첫 화면 밖으로 밀었다) */
.jf-stage.gone{display:none}
/* 스크립트가 꺼져 있으면 「준비 중」 안내는 거짓이다 — noscript 안내 한 벌만. 모듈 실패(스크립트는 켜짐)면 준비 안내는 남는다. W3C Media Queries 5 scripting. */
@media (scripting: none){#jf-init{display:none}}
.jf-stage img.clear{background:repeating-conic-gradient(#e8e8e8 0 25%,#fff 0 50%) 0 0/16px 16px}
.jf-diag ul{margin:6px 0;padding-left:18px;font-size:13px;overflow-wrap:anywhere}
.jf-diag .btn,.jf-fail .btn,.jf-diag .text-btn{min-height:44px}
.jf-save{width:100%;min-height:48px}
.jf-mincho{margin:0;font-size:14px}
.jf-mincho a{display:inline-flex;align-items:center;min-height:44px}
.jf-sources{margin:6px 0 0;padding-left:18px;font-size:13px}
.jf-field,.jf-group,#jf-status{scroll-margin-top:72px}
@media(min-width:720px){.jf-sample{font-size:44px}.jf-field,.jf-group,#jf-status{scroll-margin-top:130px}}