/* Hangul only: Latin falls through to Coming Soon, and pages without Hangul never fetch this file. */
@font-face {
  font-family: 'GeuriunJeongmaeil';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/2607161334@griun-everydayjeong-rg/griun-everydayjeong-rg/Griun_EverydayJeong-Rg.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}

:root {
  --paper: #d6e9f4;
  --cream: #fbf7ef;
  --white: #fffdf8;
  --line: #b24a36;
  --line-soft: rgba(178, 74, 54, 0.38);
  --line-faint: rgba(178, 74, 54, 0.14);
  --ink: #4a2c24;
  --muted: #7a5a50;
  --gold: #f4c24a;
  --green: #97c886;
  --green-deep: #6aa95b;
  --blue: #8bbbe3;
  --pink: #f4a6bc;

  /* Uneven radii read as a box drawn by hand rather than cut by a machine. */
  --r-card: 16px 5px 18px 6px / 6px 17px 5px 16px;
  --r-slot: 12px 5px 14px 6px / 6px 13px 5px 12px;
  --sketch: 2px 2px 0 var(--line-soft);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.36 0 0 0 0 0.32 0 0 0 0.17 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  --font-hand: 'GeuriunJeongmaeil', 'Coming Soon', 'Gowun Dodum', system-ui, sans-serif;
  --font-body: 'Gowun Dodum', -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; font-synthesis: none; }

body {
  margin: 0;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font: 16px/1.65 var(--font-body);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

a { color: var(--line); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--line); outline-offset: 3px; }
body:has(dialog[open]) { overflow: hidden; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(44px + env(safe-area-inset-top)) 20px 24px;
}

.title { position: relative; }

.lang {
  position: absolute;
  top: -28px;
  right: 0;
  min-width: 44px;
  min-height: 40px;
  padding: 0 12px;
  border: 2px solid var(--line);
  border-radius: 22px 18px 24px 16px / 16px 24px 18px 22px;
  background: var(--cream);
  box-shadow: var(--sketch);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

html[lang="en"] .ko-only { display: none; }

.title__kicker {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 17px;
  color: var(--muted);
}

.title__name {
  margin: 2px 0 0;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: clamp(46px, 12vw, 68px);
  line-height: 1.05;
  color: var(--line);
}

.title__role { margin: 10px 0 0; font-family: var(--font-hand); font-size: 20px; }
.title__intro { margin: 16px 0 0; max-width: 34em; }
.title__intro span { color: var(--muted); }

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.links a {
  display: inline-block;
  padding: 6px 14px;
  border: 2px solid var(--line);
  border-radius: 22px 18px 24px 16px / 16px 24px 18px 22px;
  background: var(--cream);
  box-shadow: var(--sketch);
  font-family: var(--font-hand);
  font-size: 17px;
  text-decoration: none;
}

.chapter { margin-top: 52px; }

.links .links__main { background: var(--gold); color: var(--ink); }

.tools { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.tools a { font-family: var(--font-hand); font-size: 20px; text-decoration: underline wavy; text-decoration-thickness: 1px; }
.tools span { display: block; font-size: 15px; color: var(--muted); }

.chapter__title {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  color: var(--line);
}

.chapter__title .ko-only { display: block; font-size: 0.55em; color: var(--muted); }
.chapter__hint { margin: 2px 0 0; font-size: 14px; color: var(--muted); }

/* The hill: one crayon drawing whose objects are the project buttons. */
.hill {
  display: block;
  width: 100%;
  margin-top: 8px;
  overflow: visible;
}

.sky use { fill: none; stroke: var(--line); stroke-width: 4; opacity: 0.7; filter: url(#crayon); }

.land { filter: url(#crayon); }
.land path { stroke: var(--line); stroke-width: 2; stroke-linejoin: round; }
.land__back { fill: url(#hatch-hill-back); }
.land__front { fill: url(#hatch-hill-front); }
.land__path { fill: url(#hatch-path); }

.thing { cursor: pointer; outline: none; }
.thing > :not(text):not(.thing__hit) { filter: url(#crayon); stroke: var(--line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.thing__hit { fill: transparent; }
.thing:focus-visible .thing__hit { stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 4; }

.thing__label {
  font-family: var(--font-hand);
  font-size: 13px;
  text-anchor: middle;
  fill: var(--ink);
}

.thing__label--soft { font-size: 11px; fill: var(--muted); }

.t-trunk { fill: #c58a5e; }
.t-crown { fill: url(#hatch-crown); }
.t-star { fill: var(--gold); stroke-width: 5 !important; }
.t-star--b { fill: #ea705b; }
.t-star--c { fill: #ffffff; }
.t-post { fill: #c58a5e; }
.t-box { fill: #8bbbe3; }
.t-slot, .t-wrap, .t-scribble { fill: none; }
.t-flag { fill: #ea705b; }
.t-bird, .t-tail { fill: #3f4a63; }
.t-beak { fill: #f4c24a; stroke-width: 1 !important; }
.t-belly { fill: #ffffff; stroke-width: 1 !important; }
.t-crayon { fill: #f4a6bc; }
.t-tip { fill: #e2654f; }
.t-scribble { stroke: #8bbbe3 !important; stroke-width: 2.4 !important; }

.sprout path { fill: none; stroke: var(--line); stroke-width: 1.6; filter: url(#crayon); }
.sprout .t-sprout-leaf { fill: #a9d396; }

.gnome > * { stroke: var(--line); stroke-width: 0.9; stroke-linejoin: round; filter: url(#crayon); }
.g-boot { fill: #8a5634; }
.g-coat { fill: #8bbbe3; }
.g-face { fill: #f6cfb0; }
.g-beard, .g-pom { fill: #fffdf8; }
.g-hat { fill: #e2654f; }
.g-brim { fill: none; stroke: #fffdf8 !important; stroke-width: 3.4 !important; stroke-linecap: round; }
.g-nose { fill: #f09a86; }

/* A tap wiggles the object, the same small "I heard you" the app's stars give. */
.thing:hover > :not(text):not(.thing__hit),
.thing:focus-visible > :not(text):not(.thing__hit) { animation: wiggle 0.5s ease-in-out; }
.thing:not(:hover):not(:focus-visible) > * { transform-box: fill-box; transform-origin: bottom center; }

@keyframes wiggle {
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

.gnome { animation: bob 2.4s ease-in-out infinite; }

@keyframes bob {
  50% { translate: 0 -2px; }
}

.road {
  position: relative;
  margin: 16px 0 0;
  padding: 0 0 0 30px;
  list-style: none;
}

/* The dashed path the stepping-stones sit on. */
.road::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 9px;
  border-left: 2px dashed var(--line-soft);
}

.stone { position: relative; display: grid; gap: 2px; padding: 0 0 22px; }

.stone::before {
  content: '';
  position: absolute;
  top: 4px;
  left: -29px;
  width: 18px;
  height: 15px;
  border: 2px solid var(--line);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
  background: #f4c24a;
}

.stone--school::before { background: #8bbbe3; }
.stone__when { font-size: 14px; color: var(--muted); }
.stone__what { font-family: var(--font-hand); font-size: 20px; line-height: 1.3; }
.stone__note { font-size: 15px; color: var(--muted); }

.letter {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 16px 18px;
  border: 2px solid var(--line);
  border-radius: var(--r-card);
  background: var(--cream) var(--grain);
  box-shadow: var(--sketch);
}

.letter p { margin: 0; }
.letter__icon { flex: none; width: 48px; height: 36px; overflow: visible; filter: url(#crayon); }
.l-paper { fill: var(--white); stroke: var(--line); stroke-width: 2; stroke-linejoin: round; }
.l-fold { fill: none; stroke: var(--line); stroke-width: 2; stroke-linejoin: round; }
.l-heart { fill: #ea705b; stroke: var(--line); stroke-width: 1.4; }

.foot {
  padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* Project details open as gift tags, like the record tags in the wish tree app. */
.tag-card {
  width: min(100% - 32px, 460px);
  max-height: 86dvh;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: var(--r-card);
  background: var(--cream) var(--grain);
  box-shadow: 3px 3px 0 var(--line-soft);
  color: var(--ink);
  overflow: visible;
}

.tag-card[open] { animation: pop-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
.tag-card::backdrop { background: rgba(110, 80, 70, 0.22); }

@keyframes pop-in {
  from { transform: scale(0.94) rotate(-1.5deg); opacity: 0; }
  to { transform: rotate(-0.6deg); opacity: 1; }
}

.tag-card[open] { transform: rotate(-0.6deg); }
.tag-card__inner { position: relative; padding: 22px 22px 24px 50px; }

.tag-card__hole {
  position: absolute;
  top: 26px;
  left: 18px;
  width: 15px;
  height: 15px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
}

/* A loop of string through the hole. */
.tag-card__hole::after {
  content: '';
  position: absolute;
  left: -22px;
  top: -16px;
  width: 30px;
  height: 22px;
  border: 1.5px solid var(--line);
  border-color: var(--line) transparent transparent var(--line);
  border-radius: 50%;
  transform: rotate(-28deg);
}

.tag-card__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--line);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.tag-card__title {
  margin: 0 36px 0 0;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--line);
}

.tag-card__title .ko-only { font-size: 0.65em; color: var(--muted); }
.tag-card__meta { margin: 4px 0 12px; font-size: 14px; color: var(--muted); }

.tag-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.tag-card__tags li {
  padding: 2px 10px;
  border: 1.5px solid var(--line-soft);
  border-radius: 999px;
  font-size: 13px;
}

.tag-card__link {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-hand);
  font-size: 18px;
  text-decoration: underline wavy;
  text-decoration-thickness: 1px;
}

.tag-card__link::after { content: ' ↗'; }

@media (prefers-reduced-motion: reduce) {
  .tag-card[open], .gnome, .thing > * { animation: none !important; }
}