/* 国別翻訳状況：国旗・完了率・企業数・進捗バーのグリッド（100% は緑） */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); margin-top: 32px; }
.grid > a { padding: 18px 18px 20px; border-bottom: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft); display: block; }
.grid > a:nth-child(4n) { border-right: 0; }
.grid > a:hover { background: var(--paper-2); color: inherit; }
.grid .h { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.grid .flag { width: 28px; height: 20px; }
.grid .row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; }
.grid .pct { font-family: var(--mono); font-size: 26px; letter-spacing: -0.02em; }
.grid .cnt { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.bar { height: 3px; background: var(--rule-soft); margin-top: 8px; }
.bar i { display: block; height: 100%; background: var(--ink); }
.bar.done i { background: var(--ok); }
@media (max-width: 1023px) { .grid { grid-template-columns: repeat(3, 1fr); } .grid > a:nth-child(4n) { border-right: 1px solid var(--rule-soft); } .grid > a:nth-child(3n) { border-right: 0; } }
@media (max-width: 599px) { .grid { grid-template-columns: 1fr 1fr; } .grid > a:nth-child(3n) { border-right: 1px solid var(--rule-soft); } .grid > a:nth-child(2n) { border-right: 0; } .grid > a { padding: 14px 12px 16px; } .grid .pct { font-size: 20px; } }