* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: #141515; color: #e6e8e5; font-family: Arial, Helvetica, 'Malgun Gothic', sans-serif; font-size: 16px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.directory { width: min(1180px, calc(100% - 128px)); margin: 56px 0 48px clamp(32px, 6vw, 112px); }
header { margin-bottom: 36px; }
h1 { font-size: 36px; line-height: 1.15; font-weight: 750; letter-spacing: -1.5px; margin: 0 0 12px; }
header p { font-family: Consolas, 'Courier New', monospace; color: #a0a6a0; margin: 0; font-size: 14px; }
.tools { list-style: none; margin: 0; padding: 0; border-top: 1px solid #404440; }
.tools li { border-bottom: 1px solid #404440; }
.tool { --accent: #b7d989; display: grid; grid-template-columns: 1fr 40px; align-items: center; gap: 12px 24px; padding: 24px 30px; position: relative; transition: background .16s ease; }
.gamemath { --accent: #82cbd3; }
.tool::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 2px; background: var(--accent); opacity: .65; transition: opacity .16s ease; }
.tool-number { grid-column: 1 / -1; color: #a0a6a0; font-size: 14px; font-family: Consolas, 'Courier New', monospace; }
h2 { margin: 0 0 8px; font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -1.1px; color: var(--accent); }
.tool-content p { margin: 0; font-size: 17px; color: #c3c8c3; }
.tool-content .description-ko { margin-top: 4px; color: #a3aaa4; font-size: 15px; }
.tool-content .tool-meta { margin-top: 20px; font-family: Consolas, 'Courier New', monospace; font-size: 13px; color: #a0a8a1; }
.tool-action { align-self: end; padding-bottom: 2px; color: var(--accent); font-size: 26px; line-height: 1; transition: transform .16s ease; }
.tool:hover, .tool:focus-visible { background: #1c221a; }
.gamemath:hover, .gamemath:focus-visible { background: #192225; }
.tool:hover::before, .tool:focus-visible::before { opacity: 1; }
.tool:hover .tool-action { transform: translateX(4px); }
.tool:active { background: #293226; }
.gamemath:active { background: #253437; }
a:focus-visible { outline: 2px solid #e6e8e5; outline-offset: 5px; }
footer { padding-top: 22px; font-family: Consolas, 'Courier New', monospace; color: #929b94; font-size: 12px; }
@media (max-width: 700px) {
 .directory { width: calc(100% - 48px); margin: 32px 24px; }
 header { margin-bottom: 28px; }
 h1 { font-size: 30px; }
 .tool { grid-template-columns: minmax(0,1fr); gap: 12px; padding: 22px 18px; }
 .tool::before { top: 22px; bottom: 22px; }
 h2 { font-size: 28px; }
 .tool-content p { font-size: 16px; }
 .tool-content .description-ko { font-size: 14px; }
 .tool-content .tool-meta { font-size: 12px; margin-top: 16px; }
 .tool-action { justify-self: end; }
}
@media (prefers-reduced-motion: reduce) { .tool, .tool-action, .tool::before { transition: none; } .tool:hover .tool-action { transform: none; } }