:root { --cream:#fff9ec; --paper:#fffef9; --ink:#24352c; --muted:#68756d; --orange:#f47b35; --orange-soft:#fff0df; --green:#397a55; --line:#e9dfce; --shadow:0 16px 45px rgba(80,57,25,.10); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Pretendard,"Noto Sans KR",system-ui,sans-serif; min-height:100vh; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 10% 10%,rgba(244,123,53,.12),transparent 28%),radial-gradient(circle at 90% 30%,rgba(57,122,85,.10),transparent 25%); }
.page { position:relative; width:min(1050px,calc(100% - 32px)); margin:auto; padding:70px 0 36px; }
.home-link { display:inline-block; margin-bottom:28px; padding:9px 13px; color:var(--green); background:#eaf4e9; border-radius:999px; font-size:.8rem; font-weight:800; text-decoration:none; }
.home-link:hover { background:#dcecdc; }
.hero { max-width:720px; margin-bottom:36px; }
.eyebrow { color:var(--green); font-size:.76rem; font-weight:800; letter-spacing:.16em; }
h1 { margin:12px 0 14px; font-size:clamp(2.35rem,7vw,4.8rem); line-height:1.08; letter-spacing:-.055em; }
h1 em { color:var(--orange); font-style:normal; }
.hero p,.step p { color:var(--muted); margin:0; line-height:1.65; }
.card { background:rgba(255,254,249,.94); border:1px solid rgba(233,223,206,.85); border-radius:28px; box-shadow:var(--shadow); padding:30px; margin-bottom:24px; }
.step { display:flex; align-items:center; gap:14px; }
.step > span { flex:0 0 42px; display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:white; background:var(--green); font-weight:800; }
h2 { margin:0 0 3px; font-size:1.25rem; }
.search-form { display:flex; gap:10px; margin-top:24px; }
input,button { font:inherit; }
input[type="search"] { min-width:0; flex:1; padding:16px 18px; color:var(--ink); background:white; border:1px solid var(--line); border-radius:15px; outline:none; }
input:focus { border-color:var(--orange); box-shadow:0 0 0 4px rgba(244,123,53,.13); }
button { border:0; border-radius:15px; padding:0 24px; color:white; background:var(--orange); font-weight:800; cursor:pointer; }
button:hover { background:#dc6829; }
button:disabled { opacity:.6; cursor:wait; }
.status { min-height:0; color:var(--muted); margin-top:18px; }
.status:empty { margin:0; }
.status.error { padding:14px 16px; color:#9a3828; background:#fff0ec; border-radius:14px; }
.school-list { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:9px; }
.school-item button { width:100%; padding:16px 18px; display:flex; justify-content:space-between; align-items:center; text-align:left; color:var(--ink); background:#fff; border:1px solid var(--line); }
.school-item button:hover,.school-item button:focus { background:var(--orange-soft); border-color:#f1bf91; }
.school-name { display:block; font-weight:800; margin-bottom:5px; }
.school-meta { color:var(--muted); font-size:.88rem; }
.school-type { flex:0 0 auto; margin-left:15px; color:var(--green); font-size:.82rem; font-weight:800; }
.meal-head { display:flex; justify-content:space-between; align-items:center; gap:25px; }
.date-field { display:grid; gap:6px; color:var(--muted); font-size:.8rem; font-weight:700; }
input[type="date"] { padding:11px 13px; color:var(--ink); background:white; border:1px solid var(--line); border-radius:12px; }
.meal-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:15px; margin-top:20px; }
.meal-card { padding:22px; border-radius:20px; background:var(--orange-soft); border:1px solid #f4d7b9; }
.meal-card:nth-child(2n) { background:#edf7ee; border-color:#cfe4d5; }
.meal-card h3 { margin:0; color:var(--orange); font-size:1.05rem; }
.meal-card:nth-child(2n) h3 { color:var(--green); }
.menu { list-style:none; padding:0; margin:17px 0; display:grid; gap:9px; }
.menu li::before { content:"•"; color:var(--orange); margin-right:9px; }
.calories { margin:0; padding-top:12px; border-top:1px solid rgba(90,70,40,.12); color:var(--muted); font-size:.86rem; }
footer { text-align:center; color:var(--muted); font-size:.8rem; padding-top:10px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:600px) { .page{width:min(100% - 20px,1050px);padding-top:38px}.card{padding:21px;border-radius:22px}.search-form{display:grid}.search-form button{height:52px}.meal-head{align-items:stretch;flex-direction:column}.date-field input{width:100%}.meal-grid{grid-template-columns:1fr}.school-item button{align-items:flex-start}.hero{margin-bottom:26px} }