.onaho-hardness { position: relative; width: 100%; margin: 24px 0; color: #30353a; background: #fff9fb; border: 1px solid #e9b8ca; border-radius: 3px; }
.onaho-hardness__title { padding: 11px 16px 10px; color: #9f315f; font-size: 16px; font-weight: 800; line-height: 1.45; border-bottom: 1px solid #f0d4df; }
.onaho-hardness__materials { display: grid; }
.onaho-hardness__material { min-width: 0; padding: 14px 14px 15px; background: linear-gradient(105deg, #fff1f7 0%, #f8f5fb 52%, #eef6fc 100%); }
.onaho-hardness__material + .onaho-hardness__material { border-top: 1px solid #eceef0; }
.onaho-hardness__material-name { display: block; margin: 0 0 8px; color: #444b50; font-size: 14px; line-height: 1.4; }
.onaho-hardness__direction { display: flex; width: 100%; min-width: 0; align-items: center; gap: 10px; margin-bottom: 9px; color: #73576b; font-size: 11px; font-weight: 800; line-height: 1; }
.onaho-hardness__direction span:last-child { color: #315f9a; }
.onaho-hardness__direction i { position: relative; height: 4px; flex: 1; background: linear-gradient(90deg, #ed6da0 0%, #a380b7 50%, #3973b1 100%); border-radius: 999px; }
.onaho-hardness__direction i::before,
.onaho-hardness__direction i::after { position: absolute; top: 50%; width: 7px; height: 7px; content: ""; border-style: solid; transform: translateY(-50%) rotate(45deg); }
.onaho-hardness__direction i::before { left: 0; border-width: 0 0 1px 1px; border-color: #d47b9d; }
.onaho-hardness__direction i::after { right: 0; border-width: 1px 1px 0 0; border-color: #679dbf; }
.onaho-hardness__scale { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; min-width: 0; padding: 6px; background: linear-gradient(90deg, #f579aa 0%, #bf81b2 42%, #577eb7 74%, #315f9d 100%); border-radius: 3px; }
.onaho-hardness__cell { --hardness-bg: #faf9fd; --hardness-border: #e3e0ec; --hardness-accent: #9e9ac2; display: flex; min-width: 0; min-height: 66px; box-sizing: border-box; align-items: center; flex-direction: column; justify-content: center; padding: 6px 2px 5px; text-align: center; background: rgb(255 255 255 / 84%); border: 1px solid rgb(255 255 255 / 76%); border-radius: 3px; }
.onaho-hardness :where(.onaho-hardness__cell, .onaho-hardness__guide-row)[data-hardness-level="0"] { --hardness-bg: #fff7fa; --hardness-border: #f1d7e1; --hardness-accent: #dc87a7; }
.onaho-hardness :where(.onaho-hardness__cell, .onaho-hardness__guide-row)[data-hardness-level="1"] { --hardness-bg: #fff8fb; --hardness-border: #efdce5; --hardness-accent: #d891ab; }
.onaho-hardness :where(.onaho-hardness__cell, .onaho-hardness__guide-row)[data-hardness-level="2"] { --hardness-bg: #fdf8fb; --hardness-border: #eadde5; --hardness-accent: #cb96ae; }
.onaho-hardness :where(.onaho-hardness__cell, .onaho-hardness__guide-row)[data-hardness-level="3"] { --hardness-bg: #fbf8fc; --hardness-border: #e7dfeb; --hardness-accent: #b99ab8; }
.onaho-hardness :where(.onaho-hardness__cell, .onaho-hardness__guide-row)[data-hardness-level="4"] { --hardness-bg: #faf9fd; --hardness-border: #e3e0ec; --hardness-accent: #9e9ac2; }
.onaho-hardness :where(.onaho-hardness__cell, .onaho-hardness__guide-row)[data-hardness-level="5"] { --hardness-bg: #f8fafd; --hardness-border: #dce5ed; --hardness-accent: #8ca5c8; }
.onaho-hardness :where(.onaho-hardness__cell, .onaho-hardness__guide-row)[data-hardness-level="6"] { --hardness-bg: #f7fbfd; --hardness-border: #d7e6ee; --hardness-accent: #7caccb; }
.onaho-hardness :where(.onaho-hardness__cell, .onaho-hardness__guide-row)[data-hardness-level="7"] { --hardness-bg: #f5fafd; --hardness-border: #d1e4ee; --hardness-accent: #6eafd0; }
.onaho-hardness :where(.onaho-hardness__cell, .onaho-hardness__guide-row)[data-hardness-level="8"] { --hardness-bg: #f3fafd; --hardness-border: #cae2ed; --hardness-accent: #58a7cc; }
.onaho-hardness__cell-value { display: inline-flex; width: 30px; height: 30px; box-sizing: border-box; align-items: center; justify-content: center; color: #45434a; font-size: 12px; font-weight: 800; line-height: 1; background: #fff; border: 2px solid color-mix(in srgb, var(--hardness-accent) 52%, #d9dde0); border-radius: 50%; }
.onaho-hardness__cell strong { display: block; width: max-content; max-width: 100%; margin-top: 5px; color: #45434a; font-size: 10px; font-weight: 700; line-height: 1.2; text-align: center; }
.onaho-hardness__cell.is-current { color: #302d32; background: #fff2a5; border: 2px solid #ca941b; box-shadow: 0 0 0 2px rgb(255 255 255 / 75%); }
.onaho-hardness__cell.is-current .onaho-hardness__cell-value { color: #1f252a; font-size: 14px; font-weight: 900; background: #ffe15a; border-color: #a77c12; }
.onaho-hardness__cell.is-current strong { color: #25292d; font-weight: 900; }
.onaho-hardness__material--two-layer .onaho-hardness__cell { position: relative; min-height: 76px; padding-top: 22px; }
.onaho-hardness__material-marker { position: absolute; top: 5px; right: 2px; left: 2px; overflow: hidden; color: #4c4b50; font-size: 9px; font-weight: 800; line-height: 1.1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.onaho-hardness__guide { margin: 0; padding: 0; border: 0; }
.onaho-hardness__guide > summary { position: absolute; top: 0; right: 0; display: flex; height: 40px; box-sizing: border-box; align-items: center; gap: 5px; padding: 0 16px; color: #b34e73; font-size: 11px; font-weight: 600; line-height: 1; list-style: none; cursor: pointer; transition: color 150ms ease, background-color 150ms ease; }
.onaho-hardness__guide > summary::-webkit-details-marker { display: none; }
.onaho-hardness__guide > summary::marker { content: ""; }
.onaho-hardness__guide > summary:hover,
.onaho-hardness__guide > summary:focus-visible { color: #d13e72; background: #fff6f9; }
.onaho-hardness__guide > summary:focus-visible { outline: 2px solid #ef9fbb; outline-offset: -3px; }
.onaho-hardness__guide > summary span { width: 7px; height: 7px; border-right: 1px solid currentcolor; border-bottom: 1px solid currentcolor; transform: rotate(-45deg); transition: transform 150ms ease; }
.onaho-hardness__guide[open] > summary span { transform: rotate(45deg) translate(-1px, -1px); }
.onaho-hardness__guide-panel { padding: 0 14px 14px; border-top: 1px solid #e7e9eb; }
.onaho-hardness__guide-heading { padding: 12px 0 9px; color: #484d52; font-size: 13px; font-weight: 700; line-height: 1.4; }
.onaho-hardness__guide-list { border: 1px solid #e6e8ea; border-bottom: 0; }
.onaho-hardness__guide-row { --hardness-bg: #faf9fd; --hardness-border: #e3e0ec; --hardness-accent: #9e9ac2; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; min-width: 0; background: color-mix(in srgb, var(--hardness-accent) 4%, white); border-bottom: 1px solid #e6e8ea; }
.onaho-hardness__guide-key { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; padding: 8px 9px; }
.onaho-hardness__guide-value { display: inline-flex; width: 30px; height: 30px; box-sizing: border-box; align-items: center; justify-content: center; color: var(--hardness-accent); font-size: 10px; font-weight: 800; line-height: 1; background: #fff; border: 2px solid color-mix(in srgb, var(--hardness-accent) 72%, #d5d9dc); border-radius: 50%; }
.onaho-hardness__guide-key strong { min-width: 0; color: #484d52; font-size: 11px; line-height: 1.3; }
.onaho-hardness__guide-row p { margin: 0; padding: 9px 11px; color: #4f555a; font-size: 12px; line-height: 1.65; border-left: 1px solid color-mix(in srgb, var(--hardness-accent) 16%, #e3e5e7); }

@media (max-width: 560px) {
	.onaho-hardness { margin: 18px 0; }
	.onaho-hardness__title { padding-right: 12px; padding-left: 12px; }
	.onaho-hardness__material { padding: 12px 8px 13px; }
	.onaho-hardness__direction { gap: 7px; font-size: 9px; }
	.onaho-hardness__scale { gap: 2px; padding: 4px; }
	.onaho-hardness__cell { min-height: 55px; padding: 5px 1px 4px; }
	.onaho-hardness__cell-value { width: 24px; height: 24px; font-size: 9px; border-width: 1.5px; }
	.onaho-hardness__cell strong { margin-top: 4px; font-size: 8px; letter-spacing: -.04em; }
	.onaho-hardness__material--two-layer .onaho-hardness__cell { min-height: 66px; padding-top: 19px; }
	.onaho-hardness__material-marker { top: 4px; font-size: 8px; }
	.onaho-hardness__guide > summary { height: 40px; padding-right: 12px; font-size: 10px; }
	.onaho-hardness__guide-panel { padding: 0 8px 10px; }
	.onaho-hardness__guide-row { grid-template-columns: 88px minmax(0, 1fr); }
	.onaho-hardness__guide-key { grid-template-columns: 26px minmax(0, 1fr); gap: 5px; padding: 7px 6px; }
	.onaho-hardness__guide-value { width: 25px; height: 25px; font-size: 9px; border-width: 1.5px; }
	.onaho-hardness__guide-key strong { font-size: 10px; }
	.onaho-hardness__guide-row p { padding: 8px; font-size: 11px; }
}