*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Arial,"Malgun Gothic",sans-serif;color:#102853;background:#fff}.color-header{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#404874;color:#fff;min-height:48px;padding:10px 14px}.color-header h1{margin:0;font-size:18px;font-weight:600}.color-header a{color:inherit;text-decoration:none;font-size:13px;white-space:nowrap}.color-header nav{display:flex;gap:16px;align-items:center}.color-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;margin:0;padding:0}.color-tile{display:block;position:relative;aspect-ratio:620/877;border:0;border-radius:0;margin:0;padding:0;background:none;cursor:pointer;overflow:hidden;touch-action:manipulation}.color-tile img{display:block;width:100%;height:100%;object-fit:fill}.color-tile:focus-visible{outline:2px solid #404874;outline-offset:-2px}@media(max-width:640px){.color-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.color-header h1{font-size:15px}.color-header a{font-size:11px}.color-header{padding:10px 8px}.color-header nav{gap:8px}}
/* Inset overlay preserves the complete sample and zero-gap grid geometry. */
.color-tile::after{content:"";position:absolute;inset:0;box-sizing:border-box;border:1px solid #9aaabe;pointer-events:none}