@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400;700&family=Jua&family=Gowun+Dodum&display=swap');

:root{
  --paper:#FDFBF6; --ink:#1A1A1A; --soft:#6E6A63; --faint:#B5AFA5; --rule:#E7E2D8;
  --orange:#F3701B; --blue:#2B5CB8; --red:#E8452C; --green:#7A9E2E; --yellow:#F2B01C;
  /* 언어 4층 */
  --cold:#2B5CB8; --warm:#F3701B; --cover:#D99A00; --give:#5F8A3C;
  --magenta:#C2185B; --teal:#1E8E8A; --purple:#7B5EA7;
  --bd:2.5px solid var(--ink);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; background:var(--paper); color:var(--ink); }
body{ font-family:'Gowun Dodum',system-ui,sans-serif; }
.hand{ font-family:'Gaegu',cursive; }
.jua{ font-family:'Jua',sans-serif; letter-spacing:-.01em; }
.ui{ font-family:'Gowun Dodum',system-ui,sans-serif; }
input,textarea,select,button{ font-family:'Gowun Dodum',system-ui,sans-serif; }
input.hand,textarea.hand{ font-family:'Gaegu',cursive; }
::placeholder{ color:var(--faint); }
a{ color:inherit; }

/* 색 유틸 */
.c-cold{ color:var(--cold) } .c-warm{ color:var(--warm) }
.c-cover{ color:var(--cover) } .c-give{ color:var(--give) }
.bg-cold{ background:var(--cold); color:#fff }
.bg-warm{ background:var(--warm); color:#fff }
.bg-cover{ background:var(--cover); color:#fff }
.bg-give{ background:var(--give); color:#fff }
.bg-magenta{ background:var(--magenta); color:#fff }
.bg-teal{ background:var(--teal); color:#fff }
.bg-purple{ background:var(--purple); color:#fff }
.c-magenta{ color:var(--magenta) } .c-teal{ color:var(--teal) } .c-purple{ color:var(--purple) }

/* 스티커 버튼 */
.btn{
  border:var(--bd); background:var(--orange); color:#fff; border-radius:14px;
  padding:15px 22px; font-family:'Jua',sans-serif; font-size:18px; cursor:pointer;
  box-shadow:4px 4px 0 var(--ink); transition:transform .06s, box-shadow .06s;
}
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--ink); }
.btn:disabled{ opacity:.32; cursor:default; transform:none; box-shadow:4px 4px 0 var(--ink); }
.btn.ghost{ background:var(--paper); color:var(--ink); }
.btn.sm{ padding:9px 16px; font-size:14px; border-radius:12px; }
.btn.blue{ background:var(--blue) } .btn.green{ background:var(--green) }
.btn.red{ background:var(--red) } .btn.yellow{ background:var(--yellow); color:var(--ink) }
.btn.block{ width:100%; }

/* 카드 */
.card{ border:var(--bd); border-radius:18px; background:#fff; box-shadow:5px 5px 0 var(--ink); padding:20px; }
.card.soft{ box-shadow:4px 4px 0 var(--rule); }
.card.warn{ box-shadow:4px 4px 0 var(--red); background:#FFECE8; }

/* 입력 */
.in{
  width:100%; padding:12px 14px; border:var(--bd); border-radius:13px; background:#fff;
  font-size:16px; color:var(--ink); outline:none;
}
.in.hand{ font-size:21px; }
.in:focus{ border-color:var(--orange); }
textarea.in{ resize:none; line-height:1.5; }
.lab{ font-size:11px; color:var(--soft); margin-bottom:6px; }

/* 칩 */
.chip{
  padding:8px 14px; border-radius:99px; font-size:13px; cursor:pointer;
  border:var(--bd); background:#fff; color:var(--ink);
}
.chip.on{ background:var(--blue); color:#fff; box-shadow:2px 2px 0 var(--ink); }

/* 번호 배지 */
.no{
  width:40px; height:40px; border-radius:12px; border:var(--bd);
  display:grid; place-items:center; font-family:'Jua',sans-serif; font-size:21px;
  box-shadow:3px 3px 0 var(--ink); transform:rotate(-3deg); flex:0 0 auto;
}
.no.lg{ width:74px; height:74px; border-radius:20px; font-size:42px; border-width:3px; box-shadow:6px 6px 0 var(--ink); transform:rotate(-4deg); }

/* 진행 점 */
.dots{ display:flex; gap:7px; align-items:center; }
.dot{ width:12px; height:12px; border-radius:99px; border:var(--bd); background:#fff; transition:width .2s; }
.dot.done{ background:var(--ink); }
.dot.now{ width:22px; }

/* 애니메이션 */
.pop{ animation:pop .45s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop{ from{opacity:0;transform:scale(.92) rotate(-2deg)} to{opacity:1} }
.drop{ animation:drop .5s cubic-bezier(.2,1.2,.4,1) both; }
@keyframes drop{ from{opacity:0;transform:translateY(-10px)} to{opacity:1} }
.wob{ animation:wob 3.4s ease-in-out infinite; }
@keyframes wob{ 0%,100%{transform:rotate(-1.5deg)} 50%{transform:rotate(1.5deg)} }
@media (prefers-reduced-motion:reduce){ .pop,.drop,.wob{animation:none} }

/* 레이아웃 */
.wrap{ max-width:440px; margin:0 auto; padding:26px 22px 110px; }
.wide{ max-width:960px; margin:0 auto; padding:24px 22px 70px; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spread{ display:flex; gap:12px; align-items:center; }
.grow{ flex:1; min-width:0; }
hr.rule{ border:0; border-top:1px solid var(--rule); margin:18px 0; }

/* 상단 바 */
.topbar{
  background:#fff; border-bottom:var(--bd); padding:9px 16px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:12px;
}

/* 브랜드 레터링 */
.brand{
  font-family:'Jua',sans-serif; display:inline-flex; align-items:center; gap:1px;
  font-size:19px; line-height:1; white-space:nowrap;
}
.brand .a{ color:var(--orange); }
.brand .b{ color:var(--blue); }
.brand .c{ color:var(--ink); font-size:.72em; margin-left:3px; }

/* 히어로 레터링 (학생 첫 화면) */
.hero{ text-align:center; padding:6px 0 2px; }
.hero .eyebrow{
  font-family:'Gowun Dodum',sans-serif; font-size:10px; letter-spacing:.42em;
  color:var(--faint); margin-bottom:6px; padding-left:.42em;
}
.hero .mark{ font-family:'Jua',sans-serif; line-height:1; }
.hero .mark span{
  display:inline-block; font-size:42px; -webkit-text-stroke:1.4px var(--ink);
}
.hero .mark .a{ color:var(--orange); }
.hero .mark .b{ color:var(--blue); }
.hero .mark .s{ color:var(--yellow); }

/* 말 카드 (스크린) */
.words{ display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; min-height:300px; margin-top:30px; }
.word{
  position:relative; border:var(--bd); border-radius:18px; background:#fff; color:var(--ink);
  padding:12px 20px; font-family:'Gaegu',cursive; line-height:1.25; font-weight:400;
}
.word.big{ padding:16px 26px; font-weight:700; color:#fff; }
.word .n{
  position:absolute; top:-13px; right:-11px; min-width:30px; height:30px; padding:0 8px;
  border-radius:99px; border:var(--bd); display:grid; place-items:center;
  font-family:'Jua',sans-serif; font-size:16px; background:#fff; color:var(--ink);
}
.word .bar{
  position:absolute; left:16px; right:16px; bottom:-2.5px; height:5px; border-radius:99px;
}
.foot{ margin-top:46px; padding-top:20px; border-top:var(--bd); font-family:'Gaegu',cursive; font-size:25px; line-height:1.6; }

/* 표 */
table{ width:100%; border-collapse:collapse; font-size:13px; }
th,td{ border:1px solid var(--rule); padding:8px 10px; text-align:left; }
th{ background:#F6F3EC; font-family:'Jua',sans-serif; font-weight:400; }

.muted{ color:var(--soft); }
.tiny{ font-size:11.5px; color:var(--faint); line-height:1.7; }
.hide{ display:none !important; }