/* Generated by tools/split-subpage-css.php. Edit assets/css/source/subpage-modern.full.css instead. */
.nickname-page-heading { margin-bottom: 0; }
.nickname-page-heading h1 { margin-bottom: 14px; color: #172033; }
.nickname-page-heading > p:last-child { max-width: 780px; margin: 0; color: #536277; line-height: 1.75; }
.nickname-eyebrow { margin: 0 0 8px; color: #0f766e; font-size: .84rem; font-weight: 800; }
.nickname-generator { display: grid; grid-template-columns: minmax(0, .95fr) minmax(260px, .75fr); gap: 24px; margin-top: 28px; align-items: start; }
.nickname-form, .nickname-control-panel, .nickname-result-panel { min-width: 0; }
.nickname-control-panel, .nickname-result-panel { padding: 24px; border: 1px solid #d9e1eb; border-radius: 8px; background: #fff; }
.nickname-control-panel header, .nickname-result-panel header { margin-bottom: 18px; }
.nickname-control-panel h2, .nickname-result-panel h2 { margin-bottom: 8px; color: #172033; font-size: 1.35rem; }
.nickname-control-panel header p, .nickname-result-panel header p { margin: 0; color: #64748b; font-size: .86rem; line-height: 1.65; }
.nickname-field-grid, .nickname-custom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nickname-choice-group, .nickname-length-group { margin: 0 0 16px; padding: 16px; border: 1px solid #d9e1eb; border-radius: 8px; background: #f8fafc; }
.nickname-choice-group legend, .nickname-length-group legend { margin-bottom: 10px; color: #172033; font-size: .92rem; font-weight: 800; }
.nickname-choice-group label, .nickname-length-group label { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; margin: 0 8px 8px 0; padding: 7px 10px; border: 1px solid #d9e1eb; border-radius: 999px; background: #fff; color: #35445a; font-size: .82rem; font-weight: 800; cursor: pointer; }
.nickname-choice-group label:has(input:checked), .nickname-length-group label:has(input:checked) { border-color: #0f766e; background: #e8f6f2; color: #0f625c; box-shadow: inset 0 0 0 1px #0f766e; }
.nickname-choice-group input, .nickname-length-group input { width: 16px; height: 16px; margin: 0; accent-color: #0f766e; }
.nickname-field { display: grid; gap: 7px; color: #26344a; font-size: .9rem; font-weight: 800; }
.nickname-field input { width: 100%; height: 46px; margin: 0; padding: 0 12px; border: 1px solid #cfd8e5; border-radius: 7px; background: #fff; color: #172033; }
.nickname-field input:disabled { background: #eef2f6; color: #8491a3; }
.nickname-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.modern-subpage .nickname-actions button { width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 0 12px; border-radius: 7px; font-size: .92rem; line-height: 1.25; white-space: normal; }
.nickname-actions button:first-child { background: #0f766e; color: #fff; }
.nickname-actions button:first-child:hover { background: #0b625c; }
.nickname-actions button[type="button"], .nickname-actions button[type="reset"] { background: #e8edf4; color: #314158; }
.nickname-status { min-height: 1.4em; margin: 12px 0 0; color: #64748b; font-size: .82rem; }
.nickname-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nickname-result-item { min-height: 50px; margin: 0; padding: 0 12px; border: 1px solid #d7e0ea; border-radius: 7px; background: #f8fafc; color: #172033; font-size: 1rem; font-weight: 800; letter-spacing: 0; box-shadow: none; }
.nickname-result-item:hover { border-color: #0f766e; background: #eef8f5; color: #0f625c; }
.nickname-guide { margin-top: 42px; padding-top: 34px; border-top: 1px solid #dfe5ed; }
.nickname-guide-heading h2 { margin-bottom: 10px; color: #172033; font-size: 1.65rem; }
.nickname-guide-heading p { max-width: 820px; color: #5c6b7f; line-height: 1.75; }
.nickname-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 24px; border-top: 1px solid #e2e7ee; }
.nickname-guide-grid section { padding: 22px 0; border-bottom: 1px solid #e2e7ee; }
.nickname-guide-grid h3 { margin-bottom: 8px; color: #1f2c40; font-size: 1.02rem; }
.nickname-guide-grid p { margin: 0; color: #5f6d80; font-size: .9rem; line-height: 1.75; }
@media screen and (max-width: 980px) {
.nickname-generator { grid-template-columns: 1fr; }
}
@media screen and (max-width: 620px) {
.nickname-control-panel, .nickname-result-panel { padding: 16px; }
.nickname-field-grid, .nickname-custom-grid, .nickname-result-grid, .nickname-guide-grid { grid-template-columns: 1fr; }
.nickname-actions { grid-template-columns: 1fr; }
}