html { scroll-behavior: smooth; }
body { background: #ffffff; color: #464754; }
input[type=range] { accent-color: #1a5f18; }
.num { font-variant-numeric: tabular-nums; }
.hl { background: linear-gradient(transparent 58%, #fddd34 58%, #fddd34 92%, transparent 92%); padding: 0 .1em; }

/* Buttons — 48px, 16px radius, 500, faint shadow; green → darker hover → darkest press */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
       border-radius: 16px; font-weight: 500; font-size: 16px; box-shadow: 0 1px 4px rgba(40,40,48,0.06);
       transition: background-color .15s, border-color .15s; white-space: nowrap; }
.btn-primary { background: #1a5f18; color: #fff; }
.btn-primary:hover { background: #134a12; }
.btn-primary:active { background: #0b3209; }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; background: #1a5f18; }
.btn-secondary { background: #fff; color: #1a5f18; border: 1px solid #e5ede0; }
.btn-secondary:active { border-color: #f6f9f2; }
.btn-lg { min-height: 56px; }

.field { border: 1px solid #e5ede0; border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.field:focus-within, input.field:focus, select.field:focus, textarea.field:focus { border-color: #1a5f18; box-shadow: 0 0 0 3px #eef6e9; outline: none; }

/* Radio pills */
.pill { display: block; text-align: center; font-size: 14px; border: 1px solid #e5ede0; border-radius: 16px; padding: 10px 0; color: #282830; cursor: pointer; transition: background-color .15s, border-color .15s; }
.pill:hover { background: #f6f9f2; }
input:checked + .pill { background: #eef6e9; border-color: #1a5f18; color: #1a5f18; font-weight: 500; }
input:focus-visible + .pill { box-shadow: 0 0 0 3px #d3e8c8; }

/* ===== Mobile ===== */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; word-break: keep-all; }
h1, h2, h3 { text-wrap: balance; }
section[id] { scroll-margin-top: 72px; }
summary::-webkit-details-marker { display: none; }

/* 터치하기 쉬운 슬라이더 */
input[type=range] { height: 28px; }

/* iOS 홈 인디케이터 영역 피하기 */
.safe-bottom { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

/* flex 안의 입력칸이 기본 너비 때문에 화면 밖으로 밀리지 않게 */
.field > input { min-width: 0; }