/**
 * Nettoge Core - Glyph Reader（NMS のポータルアドレス読み取り）2026-09-27
 * 色はサイトのテーマの値（--ntg2-*）。ダーク用のセレクタは書かない（html の color-scheme と light-dark()）
 */
.ntg-glyphread {
	--gr-text: var(--ntg2-text, #1a1714);
	--gr-sub: var(--ntg2-sub, #5f5a55);
	--gr-line: var(--ntg2-line, #e3e0dc);
	--gr-line-2: var(--ntg2-line-2, #d3cec7);
	--gr-card: var(--ntg2-paper, #f6f5f3);
	--gr-surface: var(--ntg2-surface, #ffffff);
	--gr-accent: var(--ntg2-accent, #2b6cb0);
	--gr-warn: light-dark(#b85c00, #ffb057);
	--gr-ok: light-dark(#1d7a3f, #5fd38d);
	margin: 1.6em 0;
	padding: 16px;
	border: 1px solid var(--gr-line);
	border-radius: var(--ntg2-radius, 6px);
	background: var(--gr-card);
	color: var(--gr-text);
	font-size: 15px;
	line-height: 1.6;
}
.ntg-glyphread *, .ntg-glyphread *::before, .ntg-glyphread *::after { box-sizing: border-box; }
/* hidden 属性の要素は必ず隠す（.ngr-strip などの display 指定に負けて空の黒い箱が出ていた。2026-09-28） */
.ntg-glyphread [hidden], #body_wrap .ntg-glyphread [hidden] { display: none; }
.ntg-glyphread img, #body_wrap .ntg-glyphread img { display: block; margin: 0; max-width: none; box-shadow: none; border: 0; border-radius: 4px; }
.ntg-glyphread p { margin: 0 0 .6em; }

.ngr-drop {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	min-height: 120px; padding: 18px 12px;
	border: 2px dashed var(--gr-line-2); border-radius: var(--ntg2-radius, 6px);
	background: var(--gr-surface); cursor: pointer; text-align: center;
}
.ngr-drop.is-over, .ngr-drop:focus-within { border-color: var(--gr-accent); }
.ngr-file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ngr-drop__main { font-weight: 700; font-size: 17px; color: var(--gr-accent); }
.ngr-drop__sub { font-size: 13px; color: var(--gr-sub); }
/* スマホ（指で操作する端末）だけ「カメラで画面を撮る」を出す */
.ngr-cam {
	display: none; flex-direction: column; align-items: center; gap: 2px;
	margin-top: 8px; padding: 12px;
	border: 1px solid var(--gr-accent); border-radius: var(--ntg2-radius, 6px);
	background: var(--gr-accent); color: #fff; text-align: center; cursor: pointer;
}
.ngr-cam__main { font-weight: 700; font-size: 16px; }
.ngr-cam__sub { font-size: 12px; opacity: .9; }
@media (pointer: coarse) { .ngr-cam { display: flex; } }
.ntg-glyphread p.ngr-note { margin-top: .6em; font-size: 13px; color: var(--gr-sub); }
.ngr-status { min-height: 1.6em; font-weight: 700; }
.ngr-status.is-ok { color: var(--gr-ok); }
.ngr-status.is-warn { color: var(--gr-warn); }
.ntg-glyphread p.ngr-pale {
	padding: 8px 12px; border-left: 4px solid var(--gr-warn); border-radius: 4px;
	background: color-mix(in srgb, var(--gr-warn) 10%, var(--gr-surface)); font-size: 14px;
}

.ngr-result { margin-top: 8px; }
.ngr-strip { display: block; max-width: 100%; height: auto; max-height: 90px; margin: 0 0 10px; border-radius: 4px; background: #000; }
.ngr-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.ngr-slot, .ngr-pick {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 3px 0 2px; margin: 0;
	border: 2px solid transparent; border-radius: 6px;
	background: var(--gr-surface); color: var(--gr-text); cursor: pointer; font: inherit;
}
.ngr-slot img { width: 100%; max-width: 44px; height: auto; aspect-ratio: 1; }
.ngr-slot__n, .ngr-pick__n { font-size: 12px; font-weight: 700; font-family: ui-monospace, Consolas, monospace; color: var(--gr-sub); }
.ngr-slot.is-low { border-color: var(--gr-warn); }
.ngr-slot.is-active { border-color: var(--gr-accent); }
.ngr-slot:hover, .ngr-pick:hover { border-color: var(--gr-line-2); }

.ngr-code { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.ngr-code__lab { font-size: 13px; color: var(--gr-sub); }
.ngr-code__hex { font-family: ui-monospace, Consolas, monospace; font-size: 22px; font-weight: 700; letter-spacing: .08em; }
.ngr-nums, .ngr-hint { font-size: 13px; color: var(--gr-sub); }
.ngr-btn {
	padding: 5px 14px; margin: 0;
	border: 1px solid var(--gr-accent); border-radius: 6px;
	background: var(--gr-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ngr-btn--sub { background: transparent; color: var(--gr-accent); margin-top: 6px; }

.ngr-picker { margin-top: 12px; padding: 10px; border: 1px solid var(--gr-line); border-radius: 6px; background: var(--gr-surface); }
.ngr-picker__title { font-weight: 700; }
.ngr-picker__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.ngr-pick img { width: 40px; height: 40px; }

.ngr-fix { margin: 8px 0; }
.ngr-fix__msg { font-size: 14px; }
.ngr-view { display: block; max-width: 100%; height: auto; cursor: crosshair; touch-action: none; border-radius: 4px; }

.ngr-manual { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gr-line); }
.ngr-manual__lab { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.ngr-manual__in {
	max-width: 280px; padding: 6px 10px;
	border: 1px solid var(--gr-line-2); border-radius: 6px;
	background: var(--gr-surface); color: var(--gr-text);
	font-family: ui-monospace, Consolas, monospace; font-size: 18px; letter-spacing: .06em;
}

@media (max-width: 600px) {
	.ntg-glyphread { padding: 12px 10px; }
	.ngr-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.ngr-picker__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}