/* korean-name-generator (RT-FUN-098) — Name Engine tool */
.kn-tool { display: flex; flex-direction: column; gap: 14px; }

.kn-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kn-input { flex: 1 1 200px; padding: 12px 14px; border: 1.5px solid #e6e2d8; border-radius: 10px; font-size: 16px; color: #14233b; }
.kn-seg, .kn-modes { display: inline-flex; border: 1.5px solid #e6e2d8; border-radius: 10px; overflow: hidden; }
.kn-seg button, .kn-modes button { background: #fff; border: 0; padding: 11px 14px; font-size: 13.5px; color: #6b6760; cursor: pointer; }
.kn-seg button + button, .kn-modes button + button { border-left: 1px solid #e6e2d8; }
.kn-seg button.on, .kn-modes button.on { background: #fff3ec; color: #e8622a; font-weight: 700; }
.kn-modes { align-self: flex-start; }
.kn-btn { border: 0; border-radius: 10px; padding: 12px 18px; font-size: 15px; font-weight: 700; cursor: pointer; }
.kn-go { background: #e8622a; color: #fff; }
.kn-rand { background: #fff; color: #14233b; border: 1.5px solid #e6e2d8; }

/* card content (rendered inside the 1080×1350 sc-card) */
.kn-card { align-items: center; text-align: center; justify-content: flex-start; }
.kn-card .sc-eyebrow { margin-top: 30px; color: #c2410c; font-weight: 800; letter-spacing: 6px; font-size: 30px; }
.kn-name-out { margin-top: 60px; font-family: 'Nanum Pen', 'Apple SD Gothic Neo', sans-serif; font-size: 220px; line-height: 1.22; color: #14233b; font-weight: 700; }
.kn-reading { margin-top: 34px; font-size: 44px; color: #46566f; font-weight: 600; }
.kn-meaning { margin-top: 40px; width: 74%; background: rgba(255, 253, 247, .72); border: 1px solid rgba(20, 35, 59, .08); border-radius: 22px; padding: 28px 32px; }
.kn-m-native { font-family: 'Nanum Pen', 'Apple SD Gothic Neo', sans-serif; font-size: 56px; font-weight: 800; color: #14233b; }
.kn-m-en { margin-top: 8px; font-size: 36px; font-style: italic; color: #46566f; }
.kn-m-ix { margin-top: 6px; font-size: 34px; color: #46566f; }

/* copy box (outside the card) */
.kn-copybox { display: flex; align-items: center; gap: 10px; border: 1.5px dashed #e6e2d8; border-radius: 10px; padding: 10px 12px; background: #f7f6f3; }
.kn-copytext { flex: 1; font-size: 15px; color: #14233b; }
.kn-copybtn { border: 0; background: #14233b; color: #fff; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 8px; cursor: pointer; }

/* background picker */
.kn-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 640px) { .kn-picker { grid-template-columns: repeat(8, 1fr); } }
.kn-thumb { position: relative; aspect-ratio: 4/5; border: 2px solid transparent; border-radius: 9px; overflow: hidden; cursor: pointer; padding: 0; background: none; }
.kn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kn-thumb.sel { border-color: #e8622a; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #e8622a; }