@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Outfit:wght@500;700;800&display=swap');

:root { --ink:#15223a; --lemon:#fff15b; --paper:#fffdf5; --coral:#ff5a1f; --pink:#ff93c8; --sky:#60d8ff; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; overflow-x:hidden; background:var(--lemon); color:var(--ink); font-family:'Pretendard Variable','Pretendard',sans-serif; }
.background-orb { position:fixed; z-index:-2; border:3px solid var(--ink); border-radius:50%; pointer-events:none; }
.orb-pink { width:320px; height:320px; top:-150px; left:-102px; background:var(--pink); }
.orb-blue { width:245px; height:245px; right:-72px; bottom:-88px; background:var(--sky); }
.dot-field { position:fixed; z-index:-1; inset:0; opacity:.43; pointer-events:none; background-image:radial-gradient(var(--coral) 2px, transparent 2.5px); background-size:27px 27px; mask-image:linear-gradient(132deg, transparent 25%, #000 48%, transparent 77%); }
.site-shell { position:relative; width:min(1120px,calc(100% - 40px)); min-height:100vh; margin:0 auto; padding:27px 0 52px; }
.site-header { display:flex; align-items:center; justify-content:space-between; }
.brand,.day-badge { border:3px solid var(--ink); border-radius:999px; font-family:'Outfit',sans-serif; font-weight:800; letter-spacing:-.5px; }
.archive-toggle{margin-left:auto;margin-right:10px;border:2px solid var(--ink);border-radius:999px;background:white;padding:8px 12px;font:700 13px 'Gowun Dodum',sans-serif;cursor:pointer}
.brand { padding:10px 16px; background:#fff; color:inherit; text-decoration:none; font-size:21px; box-shadow:4px 4px 0 var(--ink); }
.day-badge { padding:8px 13px; background:var(--ink); color:white; font:700 12px 'DM Mono',monospace; letter-spacing:.6px; }
main { display:grid; place-items:center; min-height:calc(100vh - 105px); padding:42px 0; }
.intro { width:min(100%,680px); text-align:center; }
.eyebrow { margin:0 0 13px; color:#e7468d; font:700 12px 'DM Mono',monospace; letter-spacing:1.15px; }
h1 { margin:0; font:800 clamp(47px,7vw,82px)/.94 'Outfit',sans-serif; letter-spacing:-4.5px; }
h1 span { color:var(--coral); }
.lead { margin:20px 0 31px; font-size:16px; line-height:1.7; }
.term-stage { position:relative; width:min(472px,calc(100% - 15px)); margin:0 auto; }
.term-card,.shuffle-layer { border:3px solid var(--ink); border-radius:27px; }
.term-card { position:relative; z-index:3; min-height:310px; padding:31px; background:var(--paper); box-shadow:9px 9px 0 var(--ink); text-align:left; transform:rotate(-1.25deg); transition:transform .25s ease,background .25s ease; }
.term-card::after { content:''; position:absolute; z-index:-1; width:54px; height:54px; top:-30px; right:-27px; border:3px solid var(--ink); border-radius:50%; background:var(--sky); }
.shuffle-layer { position:absolute; inset:0; z-index:1; display:none; background:var(--pink); box-shadow:7px 7px 0 var(--ink); }
.layer-two { z-index:2; background:var(--sky); }
.category { display:inline-block; margin:0; padding:7px 10px; border-radius:5px; background:var(--pink); font:700 12px 'DM Mono',monospace; letter-spacing:.5px; }
h2 { margin:19px 0 13px; font:800 41px/.98 'Outfit',sans-serif; letter-spacing:-2.2px; }
.meaning { min-height:54px; margin:0; color:#35445b; font-size:15px; line-height:1.72; }
.creator{margin:-4px 0 14px;color:var(--coral);font:700 13px 'DM Mono',monospace}
.card-divider { height:2px; margin:22px 0 16px; background:var(--ink); }
.example { display:flex; gap:9px; margin:0; font-size:13px; line-height:1.7; }
.example strong { color:var(--coral); font:700 12px 'DM Mono',monospace; white-space:nowrap; }
.draw-button { margin-top:36px; padding:16px 24px; border:3px solid var(--ink); border-radius:13px; background:var(--coral); color:#fff; box-shadow:5px 5px 0 var(--ink); cursor:pointer; font:800 18px 'Outfit',sans-serif; transition:transform .16s,box-shadow .16s,background .2s; }
.draw-button:hover:not(:disabled) { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.draw-button:focus-visible,.brand:focus-visible { outline:4px solid white; outline-offset:4px; }
.draw-button:disabled { background:var(--ink); cursor:not-allowed; box-shadow:3px 3px 0 #687388; }
.button-note { margin:18px 0 0; font:12px 'DM Mono',monospace; letter-spacing:.2px; opacity:.72; }
.sticker { position:absolute; z-index:4; padding:9px 11px; border:2px solid var(--ink); background:white; box-shadow:3px 3px 0 var(--ink); font:700 13px 'DM Mono',monospace; }
.sticker-left { top:206px; left:2%; transform:rotate(8deg); }.sticker-right { right:3%; bottom:163px; background:var(--sky); transform:rotate(-9deg); }
.archive{position:fixed;z-index:10;inset:0 0 0 auto;width:min(430px,100%);overflow:auto;padding:28px;background:#fffdf5;border-left:4px solid var(--ink);box-shadow:-8px 0 0 var(--ink)}.archive-head,.archive-nav{display:flex;justify-content:space-between;align-items:center}.archive-head>button{border:0;background:none;font-size:35px;cursor:pointer}.archive-nav h2{margin:10px 0;font-size:30px}.archive-nav button{width:40px;height:40px;border:2px solid var(--ink);border-radius:50%;background:white;cursor:pointer;font-size:18px}.archive-nav button:disabled{opacity:.25;cursor:not-allowed}.archive-copy{font-size:14px}.calendar-week,.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.calendar-week{margin-top:22px;font-size:12px;text-align:center}.calendar-day{aspect-ratio:1;border:2px solid #d9dee8;border-radius:9px;background:#f4f6f8;color:#9ca5b3}.calendar-day.has-term{border-color:var(--ink);background:white;color:var(--ink);cursor:pointer;font-weight:800}.calendar-day.has-term.seen{background:var(--lemon)}.calendar-day.has-term:hover{background:var(--pink)}
.term-card[data-state='revealed'][data-accent='blue'] .category { background:var(--sky); }.term-card[data-state='revealed'][data-accent='orange'] .category { background:#ffb555; }.term-card[data-state='revealed'][data-accent='purple'] .category { background:#b698ff; }
.term-card[data-state='shuffling'] { transform:rotate(0deg) scale(.98); }
.term-stage.is-shuffling .shuffle-layer { display:block; animation:shuffle-card .78s cubic-bezier(.3,.7,.3,1) both; }
.term-stage.is-shuffling .layer-two { animation-delay:.07s; }
@keyframes shuffle-card { 0% { opacity:0; transform:translate(0) rotate(-1deg); } 20% { opacity:1; transform:translate(-40px,7px) rotate(-8deg); } 53% { opacity:1; transform:translate(43px,-4px) rotate(8deg); } 82% { opacity:1; transform:translate(-12px,3px) rotate(-3deg); } 100% { opacity:0; transform:translate(0) rotate(0); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }
@media (max-width:650px) { .site-shell { width:min(100% - 27px,1120px); padding-top:20px; }.brand { font-size:18px; }.lead { font-size:14px; }.term-card { min-height:330px; padding:27px 24px; } h2 { font-size:36px; }.sticker { display:none; }.orb-pink { left:-168px; }.orb-blue { right:-130px; } }

.calendar-day{padding:5px 2px;text-align:left;vertical-align:top}.calendar-day small{display:block;margin-top:3px;overflow:hidden;color:inherit;font-size:8px;line-height:1.15;word-break:keep-all}.calendar-day.has-term:hover{background:#fff15b}
.calendar-day b{display:block}.calendar-day em{display:block;margin-top:2px;color:var(--coral);font:700 7px 'DM Mono',monospace}.calendar-day.today{outline:3px solid var(--coral);outline-offset:1px}