:root { --ink:#46551c; --muted:#6f7b41; --lemon:#fff7a8; --lemon-soft:#fffbe0; --green:#667b2f; --green-dark:#405719; --card:#fffef5; --line:#dfe59b; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(145deg,#fffbd2 0%,var(--lemon) 52%,#fff1a6 100%); color:var(--ink); font-family:"Malgun Gothic","Apple SD Gothic Neo",Arial,sans-serif; }
button,input { font:inherit; }
.app-shell { width:min(100% - 32px,720px); margin:0 auto; padding:48px 0 64px; }
.intro { text-align:center; margin-bottom:26px; }
.eyebrow { margin:0 0 8px; color:var(--green-dark); font-size:1rem; font-weight:800; letter-spacing:.04em; }
h1 { margin:0; font-size:clamp(2.35rem,6vw,3.55rem); letter-spacing:-.06em; }
.subtitle { max-width:500px; margin:15px auto 0; color:var(--muted); line-height:1.7; font-size:1.1rem; }
.planner-card,.result-card,.recent-section { background:rgba(255,254,245,.94); border:1px solid rgba(255,255,255,.95); box-shadow:0 12px 35px rgba(99,107,36,.15); border-radius:24px; }
.planner-card { padding:clamp(22px,5vw,36px); }
label,.mood-label { display:block; margin:0 0 11px; font-size:1.04rem; font-weight:800; }
#task-input { width:100%; padding:16px; border:2px solid var(--line); border-radius:14px; color:var(--ink); background:#fffef8; outline:none; transition:.2s; font-size:1.08rem; }
#task-input:focus { border-color:var(--green); box-shadow:0 0 0 4px #f0f3c2; }
.mood-label { margin-top:27px; }
.mood-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mood-button { min-height:58px; padding:10px 8px; border:2px solid var(--line); border-radius:14px; background:#fffef8; color:var(--ink); cursor:pointer; font-weight:700; transition:transform .15s,border-color .15s,background .15s; }
.mood-button:hover { transform:translateY(-2px); border-color:#a3b04c; }
.mood-button.selected { border-color:var(--green-dark); background:#f3f7bf; color:var(--green-dark); }
.recommend-button { width:100%; margin-top:26px; min-height:60px; border:0; border-radius:14px; background:var(--green); color:#fffef4; cursor:pointer; font-weight:800; font-size:1.14rem; box-shadow:0 8px 15px rgba(74,93,25,.25); transition:transform .15s,background .15s; }
.recommend-button:hover { background:var(--green-dark); transform:translateY(-2px); }
button:focus-visible { outline:3px solid #f0bd41; outline-offset:3px; }
.hint { min-height:22px; margin:15px 0 0; color:var(--muted); text-align:center; font-size:.92rem; }
.result-card { position:relative; margin-top:20px; padding:32px clamp(23px,5vw,42px); overflow:hidden; }
.result-card::after { content:""; position:absolute; right:-35px; top:-35px; width:110px; height:110px; border-radius:50%; background:#f5f19e; }
.result-icon { position:relative; z-index:1; display:inline-grid; width:52px; height:52px; place-items:center; border-radius:16px; background:#fff2a7; font-size:1.6rem; }
.result-card h2 { position:relative; z-index:1; margin:12px 0 10px; font-size:clamp(1.55rem,4.5vw,2.05rem); letter-spacing:-.04em; }
.result-card #result-text { position:relative; z-index:1; margin:0; color:var(--muted); font-size:1.14rem; line-height:1.7; }
.result-mood { position:relative; z-index:1; display:inline-block; margin:18px 0 0; padding:8px 12px; border-radius:999px; background:#f1f5bd; color:var(--green-dark); font-weight:800; font-size:1rem; }
.snack-card { display:flex; align-items:center; gap:18px; margin-top:20px; padding:25px clamp(23px,5vw,34px); background:rgba(255,254,245,.94); border:1px solid rgba(255,255,255,.95); box-shadow:0 12px 35px rgba(99,107,36,.12); border-radius:24px; }
.snack-icon { flex:0 0 auto; display:grid; width:58px; height:58px; place-items:center; border-radius:18px; background:#fff0a0; font-size:1.8rem; }
.snack-card .eyebrow { margin-bottom:5px; }.snack-card h2 { margin:0; font-size:1.35rem; letter-spacing:-.04em; }.snack-card #snack-text { margin:7px 0 0; color:var(--muted); line-height:1.55; }
.recent-section { margin-top:20px; padding:20px 24px; }
.recent-section h2 { margin:0 0 7px; font-size:1.05rem; }.recent-section p { margin:0; color:var(--muted); line-height:1.6; }
@media (max-width:520px) { .app-shell { width:min(100% - 24px,720px); padding:32px 0 42px; }.mood-buttons { grid-template-columns:1fr; }.mood-button { min-height:48px; }.planner-card,.result-card,.snack-card,.recent-section { border-radius:20px; }.snack-card { align-items:flex-start; gap:13px; padding:21px; }.snack-icon { width:48px; height:48px; border-radius:15px; font-size:1.5rem; }.snack-card h2 { font-size:1.2rem; } }