/* WEB錠前師：装飾は少なく、主役はパスワード。色はサイトのスカイ面・青・コーラル */
.jms{
	--jms-ink:#1c2b36; --jms-text:#2a3a46; --jms-mute:#5f6f7b; --jms-rule:#d5e0e8;
	--jms-sky:#e4f2fb; --jms-sky2:#dbe9f3; --jms-blue:#0c6283; --jms-teal:#08475f;
	--jms-coral:#f0634a; --jms-coral2:#c4412b; --jms-red:#c2412b;
	--jms-lv1:#c2412b; --jms-lv2:#d0731f; --jms-lv3:#8a6d00; --jms-lv4:#0c6283; --jms-lv5:#08475f;
	--jms-head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
	--jms-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
	border:1px solid var(--jms-rule); border-radius:2px; background:#fff; color:var(--jms-text);
	font-size:15px; line-height:1.85; margin:0 0 2.4em;
}
.jms *,.jms *::before,.jms *::after{box-sizing:border-box}
.jms p,.prose .jms p{margin:0}
.jms button,.jms input,.jms select{font:inherit;color:inherit}
.jms :focus-visible{outline:2px solid var(--jms-coral); outline-offset:2px}

.jms-main{background:var(--jms-sky); padding:28px 28px 22px; display:flex; flex-direction:column; gap:14px}
.jms-pw{font-family:var(--jms-mono); font-weight:700; font-size:44px; line-height:1.35; letter-spacing:.02em; color:var(--jms-ink); word-break:break-all; min-height:1.35em}
.jms-pw.is-lg{font-size:34px}
.jms-pw.is-mid{font-size:24px; line-height:1.5}
.jms-pw.is-long{font-size:18px; line-height:1.6}
.jms-pw .is-d{color:var(--jms-blue)}
.jms-pw .is-s{color:var(--jms-red)}
.jms-pw.is-msg{font-family:inherit; font-size:15px; font-weight:500; color:var(--jms-lv1)}
.jms-legend{font-size:12px; color:var(--jms-mute); display:flex; gap:14px; flex-wrap:wrap}
.jms-legend .is-d{color:var(--jms-blue)} .jms-legend .is-s{color:var(--jms-red)}

.jms-actions{display:flex; flex-wrap:wrap; gap:10px}
.jms-btn{appearance:none; min-height:48px; padding:0 26px; border:1.5px solid transparent; border-radius:2px; font-family:var(--jms-head); font-weight:700; font-size:15px; line-height:1.4; cursor:pointer; min-width:9em}
.jms-btn--copy{background:var(--jms-coral); color:#fff}
.jms-btn--copy:hover{background:var(--jms-coral2)}
.jms-btn--ghost{background:#fff; border-color:var(--jms-blue); color:var(--jms-blue)}
.jms-btn--ghost:hover{background:var(--jms-sky)}
.jms-btn:disabled{opacity:.45; cursor:not-allowed}

.jms-body{padding:22px 28px 26px; display:flex; flex-direction:column; gap:18px}
.jms-len{display:flex; flex-direction:column; gap:6px}
.jms-len__head{display:flex; justify-content:space-between; align-items:center; font-family:var(--jms-head); font-weight:700; font-size:14px; color:var(--jms-ink)}
.jms-len__num{width:4.6em; padding:4px 6px; border:1px solid var(--jms-rule); border-radius:2px; background:#fff; font-family:var(--jms-mono); font-weight:700; font-size:20px; color:var(--jms-blue); text-align:center}
.jms-range{width:100%; height:28px; accent-color:var(--jms-blue); margin:0}
.jms-len__scale{font-size:12px; color:var(--jms-mute); display:flex; justify-content:space-between}

.jms-strength{display:flex; flex-direction:column; gap:8px}
.jms-strength__row{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 16px}
.jms-strength__lv{font-family:var(--jms-head); font-weight:700; font-size:14px; color:var(--jms-ink)}
.jms-strength__time{font-size:12.5px; color:var(--jms-mute)}
.jms-strength__time strong{color:var(--jms-ink)}
.jms-meter{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px}
.jms-meter i{display:block; height:8px; border-radius:1px; background:var(--jms-sky2)}
.jms-strength[data-lv="1"] .jms-meter i:nth-child(-n+1){background:var(--jms-lv1)}
.jms-strength[data-lv="2"] .jms-meter i:nth-child(-n+2){background:var(--jms-lv2)}
.jms-strength[data-lv="3"] .jms-meter i:nth-child(-n+3){background:var(--jms-lv3)}
.jms-strength[data-lv="4"] .jms-meter i:nth-child(-n+4){background:var(--jms-lv4)}
.jms-strength[data-lv="5"] .jms-meter i{background:var(--jms-lv5)}
.jms-strength[data-lv="1"] [data-lv-text]{color:var(--jms-lv1)}
.jms-strength[data-lv="2"] [data-lv-text]{color:var(--jms-lv2)}
.jms-strength[data-lv="3"] [data-lv-text]{color:var(--jms-lv3)}
.jms-strength[data-lv="4"] [data-lv-text]{color:var(--jms-lv4)}
.jms-strength[data-lv="5"] [data-lv-text]{color:var(--jms-lv5)}
.jms-note{font-size:12px; color:var(--jms-mute); line-height:1.75}
.jms-note a{color:var(--jms-blue)}

.jms-acc{border-top:1px solid var(--jms-rule)}
.jms-acc > summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:52px; padding:10px 28px; font-family:var(--jms-head); font-weight:700; font-size:15px; color:var(--jms-ink)}
.jms-acc > summary::-webkit-details-marker{display:none}
.jms-acc > summary:hover{background:#f4f9fc}
.jms-chev{flex:none; transition:transform .2s}
.jms-acc[open] .jms-chev{transform:rotate(180deg)}
.jms-acc__body{padding:6px 28px 26px; display:flex; flex-direction:column; gap:18px; font-size:14px}

.jms-field{border:0; margin:0; padding:0; min-width:0}
.jms-field legend,.jms-flabel{display:block; padding:0; margin:0 0 8px; font-family:var(--jms-head); font-weight:700; font-size:14px; color:var(--jms-teal)}
.jms-chips{display:flex; flex-wrap:wrap; gap:8px}
.jms-chip{appearance:none; background:#fff; border:1px solid var(--jms-rule); border-radius:2px; padding:5px 14px; font-size:13.5px; cursor:pointer}
.jms-chip:hover{border-color:var(--jms-blue)}
.jms-chip[aria-pressed="true"]{border-color:var(--jms-blue); color:var(--jms-blue); background:var(--jms-sky); font-weight:700}
.jms-opts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.jms-opts--one{grid-template-columns:1fr}
.jms-opt{display:flex; align-items:center; gap:10px; border:1px solid var(--jms-rule); border-radius:2px; padding:8px 12px; cursor:pointer; min-width:0}
.jms-opt input{width:18px; height:18px; margin:0; flex:none; accent-color:var(--jms-blue)}
.jms-opt span{flex:1; min-width:0}
.jms .jms-opt code{font-family:var(--jms-mono); font-size:12px; color:var(--jms-mute); background:none; border:0; padding:0}
.jms-text{width:100%; padding:8px 12px; border:1px solid var(--jms-rule); border-radius:2px; background:#fff; font-size:15px}
.jms-text--mono{font-family:var(--jms-mono); letter-spacing:.08em}
.jms-row{display:flex; align-items:center; gap:10px}
.jms-row .jms-range{flex:1; min-width:0}
.jms-unit{font-size:13px; color:var(--jms-mute)}
.jms-grow{flex:1; min-width:0}
.jms-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}

.jms .jms-reading{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; max-height:220px; overflow:auto}
.jms .jms-reading li::marker{content:none}
.jms .jms-reading li{display:flex; align-items:baseline; gap:8px; border:1px solid var(--jms-rule); border-radius:2px; padding:2px 10px; font-size:13px; margin:0}
.jms-reading b{font-family:var(--jms-mono); font-size:16px}

.jms-out{background:var(--jms-sky); border-radius:2px; padding:20px 22px; display:flex; flex-direction:column; gap:14px}
.jms-pw--phrase{min-height:1.5em}

.jms-bulk-head{display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px}
.jms-bulk-head .jms-field:first-child{width:9em}
.jms .jms-bulk{list-style:none; margin:0; padding:0; border:1px solid var(--jms-rule); border-radius:2px; max-height:340px; overflow:auto; counter-reset:jms}
.jms .jms-bulk li{counter-increment:jms; display:grid; grid-template-columns:2.6em minmax(0,1fr) auto; align-items:center; gap:10px; padding:6px 12px; border-bottom:1px solid #edf3f7; margin:0}
.jms .jms-bulk li:last-child{border-bottom:0}
.jms .jms-bulk li::before{content:counter(jms); font-size:12px; color:var(--jms-mute); font-variant-numeric:tabular-nums}
.jms .jms-bulk code{font-family:var(--jms-mono); font-size:14px; word-break:break-all; background:none; border:0; padding:0}
.jms-mini-btn{appearance:none; background:#fff; border:1px solid var(--jms-rule); border-radius:2px; padding:2px 10px; font-size:12px; cursor:pointer; min-width:6.5em}
.jms-mini-btn:hover{border-color:var(--jms-blue)}
.jms .jms-bulk:empty{display:none}

.jms-empty{border:1px dashed var(--jms-rule); border-radius:2px; padding:16px 18px; color:var(--jms-mute)}
.jms .jms-hints{margin:0; padding-left:1.3em}
.jms [hidden]{display:none !important}

@media (max-width:720px){
	.jms-main{padding:22px 16px 18px}
	.jms-body{padding:18px 16px 20px}
	.jms-acc > summary{padding:10px 16px; font-size:14.5px}
	.jms-acc__body{padding:4px 16px 20px}
	.jms-out{padding:16px}
	.jms-pw{font-size:min(28px,7.2vw)}
	.jms-pw.is-lg{font-size:22px}
	.jms-pw.is-mid{font-size:18px}
	.jms-pw.is-long{font-size:14px}
	.jms-btn{flex:1; min-width:0; padding:0 12px}
	.jms-opts,.jms-two{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){ .jms-chev{transition:none} }