/* 아이의 첫 이름 입력·결과 정리 (2026-11-08)
   1) 선택 버튼: 고르면 남색으로 채워지는 방식  2) 이전/다음 버튼 한 줄 배치  3) 3단계 입력 화면
   4) 한자 풀이 카드  5) 결과 하단 [공유하기][보관하기] */

/* 1. 선택 버튼 */
html body .bn-page .bn-options label > span{
  min-height:52px;border:1px solid #dfe3ea !important;border-radius:14px !important;background:#fff !important;
  color:#2a3448 !important;box-shadow:none !important;font-weight:600;transition:background-color .15s,border-color .15s,color .15s;
}
html body .bn-page .bn-options label > span::after{display:none !important;content:none !important}
html body .bn-page .bn-options label:has(input:checked) > span{
  border-color:#1d334a !important;background:#1d334a !important;color:#fff !important;box-shadow:0 4px 12px rgba(23,43,67,.18) !important;
}
html body .bn-page .bn-options label:has(input:checked) > span svg{color:#fff;stroke:currentColor}
html body .bn-page .bn-options label:has(input:focus-visible) > span{outline:2px solid #1d334a;outline-offset:2px}
@media (hover:hover){html body .bn-page .bn-options label:not(:has(input:checked)) > span:hover{border-color:#b9c1ce !important;background:#f6f8fb !important}}
/* 바람 6개: 3열 */
html body .bn-page .bn-options-wishes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html body .bn-page .bn-options-wishes label > span{min-height:48px;justify-content:center;text-align:center}
/* 아이 상태 2개: 한 줄 */
html body .bn-page .bn-options-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html body .bn-page .bn-options-row label > span{min-height:48px;justify-content:center;text-align:center;font-size:14px}

/* 3. 3단계 입력 화면 간격 */
html body .bn-page [data-naming-step="2"] .bn-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
html body .bn-page .bn-letter-options{margin:14px 0 4px;border:1px solid #e6e9f0;border-radius:12px;background:#fafbfc}
html body .bn-page .bn-letter-options > summary{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:0 14px;cursor:pointer;list-style:none;color:#2a3448;font-size:14px;font-weight:600}
html body .bn-page .bn-letter-options > summary::-webkit-details-marker{display:none}
html body .bn-page .bn-letter-options > summary::after{content:'+';font-size:18px;font-weight:400;color:#7a8499}
html body .bn-page .bn-letter-options[open] > summary::after{content:'−'}
html body .bn-page .bn-letter-options > summary span{margin-left:4px;color:#8a93a7;font-size:12px;font-weight:500;margin-right:auto}
html body .bn-page .bn-letter-options[open]{padding-bottom:12px}
html body .bn-page .bn-letter-options .bn-field,html body .bn-page .bn-letter-options .bn-field-row{margin:8px 14px 0}
html body .bn-page .bn-letter-options .bn-field-row .bn-field{margin:0}

/* 2. 이전 / 다음 */
html body .bn-page .bn-question-actions{display:grid !important;grid-template-columns:96px minmax(0,1fr) !important;gap:10px !important;align-items:center}
html body .bn-page .bn-question-actions:has(> .bn-nav-back:disabled){grid-template-columns:minmax(0,1fr) !important}
html body .bn-page .bn-question-actions > .bn-nav-back{
  display:flex !important;align-items:center;justify-content:center;width:100% !important;min-width:0;height:52px;min-height:52px;margin:0;padding:0 12px;
  border:1px solid #d8dde5 !important;border-radius:999px !important;background:#fff !important;color:#1d334a !important;
  font:600 15px/1.2 var(--app-font,system-ui),sans-serif !important;cursor:pointer;
}
html body .bn-page .bn-question-actions > .bn-nav-back::before,html body .bn-page .bn-question-actions > .bn-nav-back::after{content:none !important;display:none !important}
html body .bn-page .bn-question-actions > .bn-nav-back:disabled{display:none !important}
html body .bn-page .bn-question-actions > .bn-primary{
  width:100%;height:52px;min-height:52px;margin:0;border-radius:999px;
  font:700 16px/1.2 var(--app-font,system-ui),sans-serif !important;letter-spacing:-.2px;
}

/* 4. 한자 풀이 카드 */
html body .bn-page .bn-hanja{margin:0 0 14px;padding:18px 16px 14px;border:1px solid #e6e9f0;border-radius:16px;background:#fff;box-shadow:0 2px 10px rgba(22,42,69,.04);text-align:left}
html body .bn-page .bn-hanja-title{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.2px;color:#7a8499}
html body .bn-page .bn-hanja-combo{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0 0 10px;color:#7a8499;font-size:12px}
html body .bn-page .bn-hanja-combo strong{font-family:'Noto Serif KR','Batang',serif;font-size:34px;font-weight:700;line-height:1.15;letter-spacing:4px;color:#162a45}
html body .bn-page .bn-hanja-meaning{margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid #eef0f4;font-size:14px;line-height:1.7;color:#24314a;word-break:keep-all}
html body .bn-page .bn-hanja-rows{display:grid;gap:12px;margin:0 0 12px}
html body .bn-page .bn-hanja-row{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:10px}
html body .bn-page .bn-hanja-syllable{display:block;width:auto;height:auto;border-radius:0;background:none;color:#1d334a;font-size:15px;font-weight:700;text-align:center}
html body .bn-page .bn-hanja-options{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding:2px;scrollbar-width:none}
html body .bn-page .bn-hanja-options::-webkit-scrollbar{display:none}
html body .bn-page .bn-hanja-option{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:62px;min-height:58px;margin:0;padding:7px 10px;border:1px solid #e1e5ec;border-radius:12px;background:#fff;color:#24314a;cursor:pointer;box-shadow:none}
html body .bn-page .bn-hanja-option[aria-checked="true"]{border-color:#1d334a;background:#1d334a;color:#fff;box-shadow:none}
html body .bn-page .bn-hanja-char{font-family:'Noto Serif KR','Batang',serif;font-size:21px;font-weight:700;line-height:1;color:inherit}
html body .bn-page .bn-hanja-hun{font-size:11px;line-height:1.2;color:inherit;opacity:.75;white-space:nowrap}
html body .bn-page .bn-hanja-option:focus-visible{outline:2px solid #1d334a;outline-offset:2px}
html body .bn-page .bn-hanja-badge{display:inline-block;margin:0 0 8px;padding:3px 10px;border-radius:999px;background:#eef1f6;color:#1d334a;font-size:12px;font-weight:600}
html body .bn-page .bn-hanja p.bn-hanja-note{margin:0 !important;max-width:none;background:none;padding:10px 0 0 !important;border-top:1px solid #eef0f4;font-size:11px;line-height:1.6;color:#8a93a7;text-align:left !important;word-break:keep-all}

/* 5. 결과 하단: [공유하기][보관하기] */
html body .bn-page .bn-result-actions-v3{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 8px}
html body .bn-page .bn-result-actions-v3 > button{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:50px;margin:0;border-radius:12px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
html body .bn-page .bn-result-actions-v3 > button svg{width:18px;height:18px}
html body .bn-page .bn-result-actions-v3 .bn-share-open{border:1px solid #d8dde5;background:#fff;color:#1d334a}
html body .bn-page .bn-result-actions-v3 .bn-share-open:disabled{color:#8b95a5;cursor:not-allowed}
html body .bn-page .bn-result-actions-v3 .bn-primary{border:0;background:linear-gradient(105deg,#1d334a,#172b43);color:#fff}
html body .bn-page .bn-result-source{margin:8px 0 0;font-size:10px;line-height:1.5;color:#9aa2b2;text-align:center}
html body .bn-page .bn-result-source a{color:inherit;text-decoration:underline;text-underline-offset:2px}