/* 6세반/7세반 플래너 화면 스타일 — little-garden.html의 파스텔 톤을 카드형 레이아웃에 맞춰 재사용 */
:root{
  --sky-1:#8ad4ea; --sky-2:#ffe3ad;
  --grass:#7cc45f; --cream:#fff8ea; --ink:#3d2b26; --ink-soft:#7a625a;
  --ring:#ffd44d; --shadow:0 8px 0 rgba(61,43,38,.16);
  --play-purple:#8b6fd6; --play-blue:#5e63c7; --play-green:#2ca79a; --play-yellow:#e8a33d; --play-pink:#ed7356;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; min-height:100%; background:linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 340px, var(--cream) 340px); }
body{ font-family:"Gowun Dodum", system-ui, sans-serif; color:var(--ink); padding-bottom:48px; overflow-x:hidden; }
h1,h2,h3,button{ font-family:"Jua", system-ui, sans-serif; font-weight:400; }
button{ font:inherit; cursor:pointer; }
button:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
img{ max-width:100%; }

.ssl-topbar{ display:flex; align-items:center; gap:8px; padding:calc(10px + env(safe-area-inset-top)) 14px 8px; flex-wrap:wrap; }
.ssl-brand{ display:flex; align-items:center; gap:9px; background:var(--cream); border-radius:999px;
  padding:7px 15px 7px 9px; box-shadow:var(--shadow); border:3px solid #fff; color:inherit; text-decoration:none; }
.ssl-brand__mark{ width:32px; height:32px; border-radius:50%; background:radial-gradient(circle at 32% 30%, #ffe9a8, #ffc93c);
  display:grid; place-content:center; font-family:"Jua"; color:#7a5a10; font-size:1rem; }
.ssl-brand__text{ font-size:.95rem; line-height:1.1 }
.ssl-brand__text small{ display:block; font-family:"Gowun Dodum"; font-size:.62rem; color:var(--ink-soft); font-weight:400; }
.ssl-spacer{ flex:1; }

.ssl-age-toggle{ display:flex; gap:8px; padding:0 14px 14px; }
.ssl-age-toggle button{ flex:1; min-height:52px; border:3px solid #fff; border-radius:16px; background:var(--cream);
  box-shadow:var(--shadow); font-size:1.05rem; color:var(--ink); }
.ssl-age-toggle button.is-active{ background:linear-gradient(160deg,#ffe9a8,#ffc93c); box-shadow:0 8px 0 #c98a4b; }

.ssl-wrap{ max-width:720px; margin:0 auto; padding:0 14px; }
.ssl-section{ margin:0 0 22px; }
.ssl-section h2{ font-size:1.05rem; margin:0 0 10px; }

.ssl-mission-card{ background:var(--cream); border:3px solid #fff; border-radius:20px; box-shadow:var(--shadow); padding:18px; }
.ssl-eyebrow{ display:inline-block; padding:4px 12px; border-radius:999px; background:#ffc93c; color:#6b4a17;
  font-family:"Jua"; font-size:.75rem; margin-bottom:8px; }
.ssl-mission-card h2{ margin:0 0 8px; font-size:1.3rem; }
.ssl-mission-text{ font-size:1rem; margin:0 0 8px; }
.ssl-mission-safety, .ssl-mission-family{ font-size:.85rem; color:var(--ink-soft); margin:4px 0; }
.ssl-record{ width:100%; min-height:44px; margin-top:10px; padding:10px 12px; border-radius:12px; border:2px solid #e8dcc2;
  font-family:inherit; font-size:.92rem; resize:vertical; }
.ssl-btn{ display:block; width:100%; margin-top:12px; min-height:52px; padding:12px 18px; border-radius:16px; border:0;
  font-size:1rem; background:linear-gradient(160deg,#8fe3a0,#4fae6a); color:#fff; box-shadow:0 8px 0 #2f7a48; }
.ssl-btn:active{ transform:translateY(3px); box-shadow:0 4px 0 #2f7a48; }
.ssl-btn:disabled{ background:#d8ceb4; box-shadow:0 8px 0 #b9ac89; color:#7a625a; }

.ssl-card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; }
.ssl-card{ background:#fff; border:3px solid var(--accent, #fff); border-radius:16px; padding:12px 14px; box-shadow:var(--shadow); }
.ssl-card span{ display:block; font-size:.72rem; color:var(--ink-soft); margin-bottom:4px; }
.ssl-card strong{ display:block; font-size:.95rem; margin-bottom:4px; }
.ssl-card p{ margin:0; font-size:.8rem; color:var(--ink-soft); }
.ssl-card--day.is-today{ box-shadow:0 0 0 3px var(--ring), var(--shadow); }
.ssl-day-label{ font-family:"Jua"; font-size:.85rem !important; color:var(--accent, var(--ink)); }
.ssl-card--home{ border-style:dashed; }

.ssl-subject{ margin-bottom:18px; }
.ssl-subject h3{ font-size:1rem; margin:0 0 10px; }
.ssl-activity-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.ssl-activity{ background:#fff; border:3px solid var(--accent, #fff); border-radius:14px; padding:12px; box-shadow:var(--shadow); }
.ssl-activity strong{ display:block; font-size:.9rem; margin-bottom:4px; }
.ssl-activity p{ margin:2px 0; font-size:.78rem; color:var(--ink-soft); }
.ssl-activity-prompt{ color:var(--ink) !important; }

.notice{ text-align:center; padding:40px 16px; color:var(--ink-soft); }

@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; } }