/* WEB目付：入力は 1 つだけ。結果は ◯ △ ✕ と、直し方のひとこと */
.mtk{
	--mtk-ink:#1c2b36; --mtk-text:#2a3a46; --mtk-mute:#5f6f7b; --mtk-rule:#d5e0e8;
	--mtk-sky:#e4f2fb; --mtk-blue:#0c6283; --mtk-teal:#08475f; --mtk-coral:#f0634a; --mtk-coral2:#c4412b;
	--mtk-ok:#2f7a4f; --mtk-warn:#a26a00; --mtk-ng:#c2412b;
	--mtk-head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
	border:1px solid var(--mtk-rule); border-radius:2px; background:#fff; color:var(--mtk-text);
	font-size:15px; line-height:1.85; margin:0 0 2.4em;
}
.mtk *,.mtk *::before,.mtk *::after{box-sizing:border-box}
.mtk p,.prose .mtk p{margin:0}
.mtk button,.mtk input{font:inherit;color:inherit}
.mtk :focus-visible{outline:2px solid var(--mtk-coral); outline-offset:2px}
.mtk [hidden]{display:none !important}

.mtk-main{background:var(--mtk-sky); padding:28px; display:flex; flex-direction:column; gap:10px}
.mtk-flabel{font-family:var(--mtk-head); font-weight:700; font-size:14px; color:var(--mtk-teal)}
.mtk-row{display:flex; gap:10px}
.mtk-url{flex:1; min-width:0; min-height:52px; padding:10px 14px; border:1px solid var(--mtk-rule); border-radius:2px; background:#fff; font-size:17px}
.mtk-btn{appearance:none; flex:0 0 auto; min-height:52px; padding:0 30px; border:0; border-radius:2px; background:var(--mtk-coral); color:#fff; font-family:var(--mtk-head); font-weight:700; font-size:16px; cursor:pointer; white-space:nowrap}
.mtk-btn:hover{background:var(--mtk-coral2)}
.mtk-btn:disabled{opacity:.6; cursor:wait}
.mtk-note{font-size:12px; color:var(--mtk-mute); line-height:1.75}

.mtk-status{margin:0; padding:14px 28px; border-top:1px solid var(--mtk-rule); font-size:14px; font-weight:500}
.mtk-status.is-busy{color:var(--mtk-blue)}
.mtk-status.is-busy::before{content:""; display:inline-block; width:12px; height:12px; margin-right:10px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-1px; animation:mtk-spin .8s linear infinite}
.mtk-status.is-err{color:var(--mtk-ng)}
@keyframes mtk-spin{to{transform:rotate(360deg)}}

.mtk-result{border-top:1px solid var(--mtk-rule); padding:26px 28px 28px; display:flex; flex-direction:column; gap:24px; scroll-margin-top:110px}
.mtk-sum{display:flex; flex-direction:column; gap:10px}
.mtk-sum__head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 16px}
.mtk-sum__host{font-family:var(--mtk-head); font-weight:900; font-size:22px; color:var(--mtk-ink); word-break:break-all}
.mtk-sum__at{font-size:12px; color:var(--mtk-mute)}
.mtk-sum__verdict{font-weight:700; color:var(--mtk-ink)}
.mtk .mtk-sum__count{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.mtk .mtk-sum__count li{margin:0; border:1px solid var(--mtk-rule); border-radius:2px; padding:10px 14px; display:flex; align-items:center; gap:8px; font-size:13px}
.mtk-sum__count span{font-weight:900; font-size:18px}
.mtk-sum__count b{margin-left:auto; font-family:var(--mtk-head); font-size:24px; line-height:1}
.mtk-sum__count .is-ok{color:var(--mtk-ok)} .mtk-sum__count .is-warn{color:var(--mtk-warn)} .mtk-sum__count .is-ng{color:var(--mtk-ng)}

.mtk-groups{display:flex; flex-direction:column; gap:22px}
.mtk .mtk-group__h{margin:0 0 8px; padding:0 0 6px; border-bottom:2px solid var(--mtk-ink); font-family:var(--mtk-head); font-weight:900; font-size:16px; color:var(--mtk-ink); display:block}
.mtk .mtk-items{list-style:none; margin:0; padding:0}
.mtk .mtk-item{margin:0; padding:12px 0; border-bottom:1px solid var(--mtk-rule); display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px}
.mtk-item__mark{font-weight:900; font-size:20px; line-height:1.4; text-align:center}
.mtk-item.is-ok .mtk-item__mark{color:var(--mtk-ok)}
.mtk-item.is-warn .mtk-item__mark{color:var(--mtk-warn)}
.mtk-item.is-ng .mtk-item__mark{color:var(--mtk-ng)}
.mtk-item.is-info .mtk-item__mark{color:var(--mtk-mute)}
.mtk-item__label{font-family:var(--mtk-head); font-weight:700; color:var(--mtk-ink)}
.mtk-item__detail{font-size:14px; word-break:break-word}
.mtk-item__advice{margin-top:4px !important; font-size:13px; color:var(--mtk-teal); padding-left:1em; text-indent:-1em}
.mtk-item__advice::before{content:"→ "}

.mtk-cta{background:var(--mtk-ink); color:#fff; border-radius:2px; padding:22px 24px; display:flex; flex-direction:column; gap:8px}
.mtk-cta:empty{display:none}
.mtk-cta__title{font-family:var(--mtk-head); font-weight:900; font-size:17px}
.mtk-cta__text{font-size:14px; color:#dbe5ec}
.mtk .mtk-cta__btn{align-self:flex-start; margin-top:6px; display:inline-flex; align-items:center; min-height:46px; padding:0 22px; background:var(--mtk-coral); color:#fff; border-radius:2px; font-family:var(--mtk-head); font-weight:700; font-size:15px; text-decoration:none}
.mtk .mtk-cta__btn:hover{background:var(--mtk-coral2); color:#fff}
.mtk-foot{margin-top:-6px !important}

@media (max-width:720px){
	.mtk-main{padding:20px 16px}
	.mtk-row{flex-direction:column}
	.mtk-btn{width:100%}
	.mtk-status{padding:12px 16px}
	.mtk-result{padding:20px 16px 22px}
	.mtk .mtk-sum__count{grid-template-columns:1fr}
	.mtk-sum__host{font-size:19px}
}
@media (prefers-reduced-motion:reduce){ .mtk-status.is-busy::before{animation:none} }