/* ===== 스터디플래너 — Warm Cream / Playful Pastel theme ===== */
@font-face{font-family:"Pretendard";font-weight:45 920;font-display:swap;
  src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2") format("woff2-variations");}

:root{
  /* surfaces */
  --cream:#F6EEDD;
  --cream-2:#F1E6D0;
  --paper:#FFFCF5;       /* card surface */
  --paper-2:#FBF5E9;
  --ink:#1C1A17;         /* near-black */
  --ink-2:#5B554B;       /* secondary text */
  --ink-3:#9A9082;       /* tertiary / chrome */
  --hair:#E9DFC9;        /* hairline on cream */
  --hair-paper:#EFE7D6;

  /* pastel palette (default = palette #3 + extensions) */
  --pink:#E86FA6;   --pink-bg:#FBE3EE;   --pink-ink:#B23B72;
  --blue:#9DC3E6;   --blue-bg:#E3EFF9;   --blue-ink:#3F6E97;
  --sage:#A7C36B;   --sage-bg:#EBF1DA;   --sage-ink:#5E7430;
  --marigold:#F2C744; --marigold-bg:#FBEFC4; --marigold-ink:#9A7510;
  --coral:#EE9079; --coral-bg:#FBE0D7; --coral-ink:#B85638;
  --lilac:#B79CE0; --lilac-bg:#ECE2F8; --lilac-ink:#6E4FA3;

  /* accent = the FAB / primary action color (driven by palette tweak) */
  --accent:var(--pink);
  --accent-bg:var(--pink-bg);
  --accent-ink:var(--pink-ink);

  --r-xl:30px; --r-lg:24px; --r-md:18px; --r-sm:12px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(60,45,20,.04), 0 4px 14px rgba(80,60,25,.05);
  --shadow-md:0 2px 6px rgba(60,45,20,.05), 0 12px 30px rgba(80,60,25,.08);
  --shadow-pop:0 8px 24px rgba(80,55,20,.14);
  --ease:cubic-bezier(.2,.8,.2,1);

  --font:"Pretendard","Apple SD Gothic Neo",system-ui,sans-serif;
  --font-eng:"Archivo","Pretendard",sans-serif;
  --font-display:var(--font);   /* overridden by font tweak */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum";
  min-height:100vh;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font-family:inherit;color:var(--ink)}
::selection{background:var(--accent);color:#fff}

/* App stage — centered phone-ish column on cream, with margin blobs on wide screens */
.stage{min-height:100vh;display:flex;justify-content:center;position:relative;overflow:hidden}
.stage .blob{position:fixed;border-radius:48% 52% 56% 44%/55% 45% 55% 45%;filter:blur(2px);opacity:.5;pointer-events:none;z-index:0}
.app{position:relative;z-index:1;width:100%;max-width:468px;min-height:100vh;background:var(--cream);
  box-shadow:0 0 0 1px var(--hair), 0 30px 80px rgba(70,50,20,.10);
  display:flex;flex-direction:column}
@media(max-width:520px){ .app{box-shadow:none} .stage .blob{display:none} }

/* Headings */
.h-eng{font-family:var(--font-eng);font-weight:800;letter-spacing:-.01em;text-transform:none}
.h-eng.it{font-style:italic}
.kicker{font-family:var(--font-eng);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}

/* generic card */
.card{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:18px}

/* pill / chip */
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;background:var(--paper);color:var(--ink-2);box-shadow:var(--shadow-sm)}
.chip.solid{background:var(--ink);color:#fff;box-shadow:none}
.chip.on{background:var(--ink);color:#fff}

/* block type tints */
.bt-개념입력{background:var(--blue-bg);color:var(--blue-ink)}
.bt-즉시인출{background:var(--pink-bg);color:var(--pink-ink)}
.bt-적용연습{background:var(--marigold-bg);color:var(--marigold-ink)}
.bt-오답복기{background:var(--coral-bg);color:var(--coral-ink)}
.bt-간격복습{background:var(--sage-bg);color:var(--sage-ink)}
.bt-실전{background:var(--lilac-bg);color:var(--lilac-ink)}

/* view transition */
@keyframes viewIn{from{transform:translateY(8px)}to{transform:none}}
@keyframes pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.view-enter{animation:viewIn .34s var(--ease) both}
@media (prefers-reduced-motion:reduce){.view-enter{animation:none}*{animation-duration:.001ms!important}}

/* mascot micro-animations (degrade gracefully to resting pose if frozen) */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes blink{0%,88%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
.buddy-bob{animation:bob 3.4s ease-in-out infinite}
.anim .b-eyes{transform-box:fill-box;transform-origin:center;animation:blink 5.4s ease-in-out infinite}

/* scrollbars hidden but scrollable */
.scroll-y{overflow-y:auto;-webkit-overflow-scrolling:touch}
.scroll-y::-webkit-scrollbar{width:0;height:0}
.noscroll{scrollbar-width:none}
.noscroll::-webkit-scrollbar{display:none}

a{color:var(--accent-ink)}