/* 카카오 로그인, 알림 단추, 저장 뒤 안내, 사주 지도의 감명서 영역. account.js 와 explore-ontology.js 가 불러옵니다. */
.btn.kakao { background: #fee500; color: #191600; box-shadow: none; gap: 8px; }
.btn.kakao svg { flex: none; }
.acct-h { font-family: var(--serif); font-size: 19px; margin: 0 0 8px; }
.acct p { margin: 0 0 8px; }

.push-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.push-label { font-size: 18px; font-weight: 700; }
.switch { position: relative; flex: none; width: 64px; height: 36px; border-radius: 999px; border: 2px solid var(--pine); background: #fff; cursor: pointer; padding: 0; }
.switch .knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--pine); transition: left 0.15s; }
.switch[aria-checked="true"] { background: var(--pine); }
.switch[aria-checked="true"] .knob { left: 31px; background: #fff; }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }
.switch:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ios-note { background: var(--hanji); border-radius: 12px; padding: 10px 12px; color: var(--ink); }

.acct-nudge { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom)); width: min(440px, calc(100% - 24px)); background: #fff; border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); padding: 16px; z-index: 40; }
.acct-nudge p { margin: 0 0 8px; font-size: 15px; }
.acct-nudge .acct-nudge-h { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--ink); }
.acct-toast { position: fixed; left: 50%; transform: translateX(-50%); top: 16px; z-index: 50; background: var(--pine); color: #fff; /* on-dark */ border-radius: 14px; padding: 12px 16px; font-size: 15px; max-width: calc(100% - 24px); box-shadow: var(--shadow-s); }
@media (min-width: 900px) { .acct-nudge { bottom: 24px; } }

.onto-grid { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.onto-grid li a, .onto-grid li > div { display: block; min-height: 48px; border-radius: 14px; padding: 12px; text-decoration: none; color: var(--ink); border: 2px solid var(--pine); }
.onto-grid li.on > div { background: var(--pine); color: #fff; /* on-dark */ }
.onto-grid li.on small { color: var(--gold2); /* on-dark */ }
.onto-grid li.off a { border-style: dashed; border-color: #8a8577; opacity: 0.72; background: #fff; }
.onto-grid b { display: block; font-size: 16px; }
.onto-grid small { display: block; font-size: 14px; margin-top: 4px; }
.onto-detail { margin: 12px 0 0; }
.onto-detail h3 { font-family: var(--serif); font-size: 18px; margin: 14px 0 6px; }
.onto-periods { padding-left: 18px; margin: 6px 0; }
.onto-facts { list-style: none; padding: 0; margin: 8px 0; }
.onto-facts li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 8px 0; }
.onto-form { display: grid; gap: 10px; margin-top: 10px; }
.onto-form select, .onto-form input[type="text"] { min-height: 48px; font-size: 16px; border-radius: 12px; border: 1px solid #b9b2a5; padding: 8px 12px; background: #fff; color: var(--ink); }
.onto-form label.ck { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.onto-form label.ck input { width: 22px; height: 22px; flex: none; margin-top: 2px; }