/* Observed mumuclass.kr: Pretendard, neutral canvas, violet/teal branding, white bordered cards. */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css');
:root { --paper:#f7f7fa; --ink:#30283c; --muted:#726b80; --line:#e5e0ef; --green:#7c56bf; --sage:#efeaf8; --yellow:#f2ecfa; --blue:#e8f4f3; --peach:#fff2dd; --font:'Pretendard Variable','Pretendard','Malgun Gothic',sans-serif; --teal:#078d99; }
body { font-family:var(--font); background:#f7f7fa; font-size:16px; color:var(--ink); line-height:1.55; }
button,input { font-family:var(--font); }
h1,h2,h3 { letter-spacing:-.035em; }
h1 { font-weight:750; }
h2 { font-size:19px; font-weight:750; }
#app { width:min(1240px,calc(100% - 64px)); }
.brand-strip { display:flex; align-items:center; justify-content:space-between; color:#7b65a3; font-size:11px; height:30px; border-bottom:1px solid #ebe5f4; }
.brand-strip a { color:#786395; text-decoration:none; }
.header { min-height:87px; background:transparent; border-bottom:0; }
.brand { font-size:30px; gap:10px; line-height:1.05; letter-spacing:-.075em; }
.brand b { font-weight:950; color:#7e53b7; }
.brand-light { color:#058d98; font-weight:950; }
.brand-icon { background:linear-gradient(145deg,#8860c3,#6949a2); border-radius:9px; color:white; width:42px; height:45px; transform:none; font-size:27px; box-shadow:3px 3px 0 #d9caef; }
.brand small { color:#847391; font-size:11px; margin-top:8px; font-weight:450; letter-spacing:0; }
.profile { gap:14px; }
.nickname { background:white; border-color:#e1d9ef; border-radius:8px; color:#654b8f; font-size:13px; }
.stars { padding:8px 11px; border-radius:7px; background:#fff8e7; color:#8d6822; font-size:13px; }
.stars > span { color:#b98a2b; font-size:17px; }
.ui-icon { width:20px; height:20px; flex-shrink:0; }
.nav { display:flex; align-items:center; width:100%; gap:22px; margin:0; padding:0; min-height:55px; border:0; border-bottom:1px solid #ddd5e9; background:#f7f7faf5; border-radius:0; position:sticky; top:0; z-index:5; box-shadow:none; backdrop-filter:blur(8px); }
.nav > button { display:inline-flex; min-width:0; min-height:55px; border-radius:0; background:transparent; font-weight:650; font-size:15px; padding:12px 4px; color:#534960; gap:8px; border-bottom:3px solid transparent; }
.nav > button.selected { color:var(--green); background:transparent; border-bottom-color:var(--green); }
.nav-note { margin-left:auto; font-size:11px; color:#91839e; }
.page-intro { padding:23px 0 20px; }
.page-intro h1 { font-size:24px; }
.eyebrow { font-size:11px; letter-spacing:0; font-weight:600; margin-bottom:5px; }
.page-intro .eyebrow { color:#8b72a5; }
.date { font-size:12px; }
.playground-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; align-items:start; gap:22px; }
.playground-main,.playground-side { min-width:0; }
.playground-side { display:grid; gap:16px; }
.button { border-radius:8px; min-height:46px; font-size:15px; padding:11px 18px; font-weight:650; }
.button.primary { box-shadow:0 3px 0 #654599; background:#8058be; }
.button:hover:not(:disabled),.button.primary:hover:not(:disabled) { background:#7047ad; }
.button.outline { color:#705092; border-color:#dbcfeb; background:#fff; }
.button.outline:hover { background:#f3edf9; }
.text-button { color:#7855a3; font-size:13px; font-weight:600; }
.hero { background:linear-gradient(115deg,#ede7f7 0%,#f1ecfa 58%,#e8f5f2 100%); border:1px solid #ded3ee; border-radius:13px; grid-template-columns:1fr 0.9fr; padding:27px 29px; gap:16px; min-height:283px; animation:none; }
.tag { border:1px solid #daccf0; background:#fcfaffb3; color:#7c5a9b; font-size:11px; padding:4px 8px; border-radius:5px; }
.hero h2 { font-size:31px; margin:14px 0 9px; line-height:1.2; }
.hero h2 > span { display:inline; font-size:20px; font-weight:600; margin-left:8px; }
.hero-copy > p { font-size:14px; color:#766b83; margin-bottom:19px; }
.hero-copy > .quiet { font-size:11px; color:#8d7e9c; margin-top:12px; }
.hero-glyphs { gap:13px; padding-right:4px; }
.hero-tile { width:min(46%,126px); aspect-ratio:.9; border-radius:12px; background:#fffefc; border-color:#cfc1e4; box-shadow:0 6px 0 #d1c2e859; transform:rotate(-7deg); }
.hero-tile + .hero-tile { transform:rotate(8deg) translateY(13px); border-color:#b6d5d2; box-shadow:0 6px 0 #b6d5d255; }
.hero-tile b { font-size:66px; color:#46305c; }
.hero-tile + .hero-tile b { color:#237a7b; }
.hero-tile > span { font-size:12px; color:#86798e; }
.worlds-section { margin-top:24px; }
.section-head { margin-bottom:12px; }
.world-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.world-card { display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:0; gap:0; background:#fff; border:1px solid #e3ddec; border-radius:11px; overflow:hidden; box-shadow:none; }
.world-card:hover { transform:translateY(-3px); box-shadow:0 6px 16px #77609412; border-color:#c5b5db; }
.world-card-art { position:relative; display:grid; justify-items:center; align-content:center; height:122px; overflow:hidden; background:#eee8f7; border-bottom:1px solid #e5ddef; }
.world-card-art::after { content:''; position:absolute; width:95px; height:95px; border:1px solid #ffffff9c; border-radius:50%; right:-20px; top:-15px; }
.blue .world-card-art { background:#e2f1f1; }
.peach .world-card-art { background:#fff1d8; }
.yellow .world-card-art { background:#f9e9ed; }
.world-mark { display:grid; place-items:center; width:61px; height:65px; background:#fffdfc; font-size:36px; color:#675085; border:1px solid #cdbce1; border-radius:12px; transform:rotate(-9deg); box-shadow:4px 5px 0 #bca6d338; z-index:1; }
.blue .world-mark { color:#0a858d; border-color:#b2d5d3; }
.peach .world-mark { color:#9c6915; border-color:#e8ca93; }
.yellow .world-mark { color:#b35e7d; border-color:#e3bdcc; }
.world-card-props { font-size:12px; margin-top:8px; color:#877095; letter-spacing:.13em; font-weight:700; }
.art-star { position:absolute; color:#bc9bdc; font-size:16px; font-style:normal; }
.art-star-one { left:19%; top:22%; transform:rotate(12deg); }
.art-star-two { right:14%; bottom:25%; font-size:11px; }
.blue .art-star { color:#6bb5b7; }
.peach .art-star { color:#d9a650; }
.yellow .art-star { color:#d38fac; }
.world-card-copy { display:block; padding:14px 12px 0; text-align:left; }
.world-card-copy > small { font-size:10px; color:#8c79a2; font-weight:500; margin:0; }
.world-card-copy > strong { font-size:16px; margin:7px 0 6px; color:#392e48; }
.world-card-copy > span:not(.world-card-bottom) { display:block; font-size:12px; color:#8a7d96; line-height:1.6; min-height:38px; }
.world-card-bottom { display:flex; align-items:center; gap:5px; border-top:1px solid #eee7f5; font-size:10px; color:#8a7d96; margin-top:13px; padding:11px 0; }
.world-card-bottom > b { color:#7957aa; font-size:11px; }
.world-card-bottom > span { margin-left:auto; font-size:16px; }
.mission-card,.game-card,.review-card,.progress-card { border:1px solid #e5dfee; border-radius:12px; padding:19px; background:white; }
.mission-card h2 { display:flex; align-items:center; justify-content:space-between; font-size:15px; }
.mission-card h2 > span { border-radius:5px; padding:3px 6px; background:#f1eaf8; color:#8b67b6; font-size:10px; }
.mission-card ol { margin:14px 0 0; padding:0; list-style:none; display:grid; gap:14px; }
.mission-card li { display:flex; align-items:center; gap:11px; }
.mission-card li > span { display:grid; place-items:center; width:28px; height:28px; border:1px solid #e2d7ef; background:#faf7fe; border-radius:8px; font-size:11px; color:#a38fb8; }
.mission-card li.done > span { background:#e2f2ec; border-color:#b7ded0; color:#2f7f65; font-weight:700; }
.mission-card strong { display:block; font-size:13px; font-weight:650; }
.mission-card small { font-size:11px; color:#9889a4; display:block; margin-top:3px; }
.game-card { background:linear-gradient(130deg,#f6f0ff,#eaf5f5); padding:20px; border-color:#d9caec; }
.game-art { height:76px; display:flex; align-items:center; justify-content:center; gap:12px; position:relative; margin-bottom:17px; }
.game-art > span { display:grid; place-items:center; width:62px; height:70px; background:#fff; color:#855ab4; border:1px solid #cebbe5; border-radius:10px; font:39px var(--glyph); transform:rotate(-9deg); box-shadow:0 4px 0 #d9caec; }
.game-art > span + span { transform:rotate(9deg); background:#e9f8f4; color:#14848c; font:700 29px var(--font); border-color:#a7d3cb; box-shadow:0 4px 0 #b7d9d3; }
.game-art i { font-size:24px; font-style:normal; position:absolute; top:-3px; right:13px; color:#b59ad3; }
.game-label { font-size:10px; color:#9378ad; font-weight:600; }
.game-card h2 { font-size:20px; margin:6px 0; }
.game-card p { font-size:12px; color:#897596; }
.game-button { margin-top:16px; width:100%; background:white; border:1px solid #cdb9e3; color:#76509e; font-size:13px; min-height:44px; }
.game-button:hover:not(:disabled) { background:#f9f5ff; }
.review-card { display:block; min-height:0; }
.review-card h2 { font-size:15px; line-height:1.6; }
.review-card .eyebrow { color:#a18aaf; font-size:10px; }
.review-card p:not(.eyebrow) { font-size:12px; margin-top:6px; color:#96889f; }
.review-card .button { margin-top:12px; font-size:12px; }
.progress-number > strong { font-size:27px; }
.progress-number small { color:#9b8da6; font-size:12px; }
.progress-card progress { height:6px; margin-top:12px; }
.progress-card .eyebrow { font-size:11px; }
progress { accent-color:#8e6bc5; background:#e9e1f1; }
progress::-webkit-progress-bar { background:#e9e1f1; }
progress::-webkit-progress-value { background:linear-gradient(90deg,#9a7ad0,#7c59b2); }
.footer { padding:26px 0 24px; color:#a096aa; font-size:11px; }
.resume-strip { background:#f0eafa; border-color:#d8c7eb; border-radius:11px; }
.map-world { border-color:#e3d9ed; border-radius:13px; }
.sage { background:#f1ebf9; }.blue { background:#eaf5f4; }.peach { background:#fff6e7; }.yellow { background:#fcf0f3; }
.world-card.sage,.world-card.blue,.world-card.peach,.world-card.yellow { background:white; }
.map-node { border-color:#ded4e8; border-radius:10px; background:#fff; box-shadow:0 3px 0 #dacee84d; }
.map-node.done { border-color:#b8a0d6; }
.node-order { color:#9787a6; }
.node-glyph { color:#624985; }
.map-node.done .node-order { color:#127f85; }
.node-arrow { color:#ad96c3; }
.world-seal { border-color:#c2aedb; color:#9275ae; }
.world-seal.earned { background:#8d6ab8; border-color:#8d6ab8; }
.filters > button { border-color:#e3d9ec; border-radius:7px; font-size:13px; }
.filters > button.active { background:#eee6f8; color:#7956a7; border-color:#cdb9e6; font-weight:650; }
.collection-card { border-color:#e3d9ec; background:white; border-radius:11px; }
.collection-card.discovered { background:#f2edf9; border-color:#baa0db; box-shadow:0 3px 0 #c5b3de40; }
.collection-glyph { color:#685079; }
.undiscovered .collection-glyph { color:#a99bb7; }
.collection-status { color:#9a86ae; }
.stats-grid article,.panel,.timeline { border-radius:12px; border-color:#e4dceb; }
.stats-grid strong { color:#7e59ae; }
.week .stamped b { color:#7c55ad; background:#eee5f8; border:1px solid #d5bfe9; }
.week b { background:#faf8fc; border-color:#e3daeb; }
.badge { background:#f1eef5; border-color:#d8cde2; color:#9c8daa; border-radius:12px; }
.badge.earned { background:#f0e6fa; border-color:#bca0dc; color:#7e55a7; }
.study { padding-top:10px; }
.study-header { border-bottom:0; }
.learn-card { background:#fff; border-color:#dfd4eb; border-radius:14px; }
.learn-glyph { color:#684387; }
.learn-card + .learn-card .learn-glyph { color:#16848c; }
.learn-card h2 > span { color:#8560b0; }
.learn-card + .learn-card h2 > span { color:#12878e; }
.word-note { background:#f2ecfa; border-color:#e0d3ed; border-radius:10px; }
.quiz-glyph { color:#70528c; }
.choice { border-color:#e0d5ea; border-radius:10px; box-shadow:0 2px 0 #e1d9e84d; }
.choice:hover:not(:disabled) { background:#f5effd; border-color:#b59bcf; }
.choice-key { background:#f8f4fc; border-color:#e1d7ec; color:#a187b5; }
.choice.correct { border-color:#40968c; background:#eaf7f1; }
.choice.incorrect { border-color:#c89c56; background:#fff7e8; }
.feedback { border-radius:12px; background:#ecf7f2; border-color:#c5e1d7; }
.feedback.encourage { background:#fff6e8; border-color:#ead4b1; }
.sentence-prompt { background:#fcfaff; border-color:#dfd2ef; border-radius:12px; }
.glyph-button { background:#fff; color:#75558f; border-color:#cfbddd; box-shadow:0 4px 0 #e5d8ef; border-radius:9px; }
.build-slots > span { border-color:#c1a5d8; background:#faf6ff; border-radius:12px; color:#8058a0; }
.result-seal { color:#8660b4; border-color:#ae90d0; background:#f3eafc; }
.match-study { max-width:760px; }
.match-intro { text-align:center; margin:35px 0 28px; }
.match-intro h1 { font-size:28px; }
.match-intro > p:last-child { margin-top:10px; color:#93829e; font-size:14px; }
.match-board { display:grid; grid-template-columns:1fr 1fr; gap:48px; max-width:600px; margin:0 auto; }
.match-column { display:grid; gap:15px; }
.match-column h2 { font-size:12px; color:#9886a9; text-align:center; font-weight:500; }
.match-tile,.match-meaning { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:108px; border-radius:16px; border:2px solid #d9c9e9; background:white; box-shadow:0 4px 0 #e2d5ee; }
.match-tile > span { font:51px var(--glyph); color:#785298; }
.match-tile.picked { border-color:#9770c4; background:#f1e7ff; box-shadow:0 4px 0 #ae88d1; }
.match-meaning { border-color:#bfdedb; box-shadow:0 4px 0 #d4e9e5; color:#367d7f; font-size:21px; }
.match-meaning strong { color:#13898b; margin-left:5px; }
.match-tile small,.match-meaning small { color:#4c9692; font-size:11px; margin-top:4px; }
.match-tile.matched,.match-meaning.matched { border-color:#96c7bc; background:#e9f7f0; box-shadow:none; }
.match-meaning.try-again { background:#fff5e7; border-color:#e6c796; }
.match-status { text-align:center; font-size:16px; margin:28px 0 9px; color:#785699; min-height:50px; }
.match-quiet { text-align:center; font-size:12px; }
.match-complete { text-align:center; padding:35px 20px; }
.match-stamp,.mini-game-seal { display:grid; place-content:center; border:2px solid #a17ac5; background:#f2e6fc; color:#9368b4; border-radius:50%; text-align:center; font-weight:800; line-height:1.2; }
.match-stamp { width:113px; height:113px; font-size:26px; margin:0 auto 25px; transform:rotate(-9deg); animation:stamp .35s ease-out; }
.match-complete h1 { font-size:29px; margin:7px 0 12px; }
.match-complete > p:not(.eyebrow) { color:#94839e; font-size:14px; }
.match-complete ul { padding:0; list-style:none; margin:25px auto; display:flex; justify-content:center; gap:13px; }
.match-complete li { display:flex; flex-direction:column; align-items:center; padding:16px 20px; background:white; border:1px solid #dfd0ec; border-radius:13px; min-width:110px; }
.match-complete li b { font:40px var(--glyph); color:#8865a2; }
.match-complete li > span { margin-top:9px; font-size:14px; color:#9983a8; }
.match-actions { display:flex; justify-content:center; gap:12px; margin:26px 0 20px; }
.game-record { display:flex; align-items:center; gap:19px; border:1px solid #e2d5ee; border-radius:12px; background:#f5f0fc; padding:22px; }
.mini-game-seal { flex-shrink:0; width:62px; height:62px; font-size:15px; transform:rotate(-8deg); }
.game-record h2 { font-size:17px; }.game-record h2 > span { color:#9a75be; margin-left:6px; }
.game-record p { font-size:12px; color:#a18eaf; margin-top:7px; }
.game-record .text-button { margin-left:auto; white-space:nowrap; }
/* Keep the reference palette, but darken small instructional text for students. */
#app .eyebrow,#app .date,#app .quiet,#app .muted,#app .subtitle,
#app .brand small,#app .brand-strip,#app .brand-strip a,#app .nav-note,
#app .hero-copy > p,#app .hero-copy > .quiet,#app .hero-tile > span,
#app .world-card-copy > small,#app .world-card-copy > span:not(.world-card-bottom),
#app .world-card-bottom,#app .mission-card small,#app .game-label,#app .game-card p,
#app .review-card p:not(.eyebrow),#app .progress-number small,#app .footer,
#app .collection-status,#app .node-order,#app .match-intro > p:last-child,
#app .match-column h2,#app .match-complete > p:not(.eyebrow),#app .match-complete li > span,
#app .game-record p { color:#74637e; }
@keyframes stamp { from { opacity:0; transform:rotate(-18deg) scale(1.3); } to { opacity:1; transform:rotate(-9deg) scale(1); } }
@media(max-width:1100px) {
  .playground-layout { grid-template-columns:minmax(0,1fr) 245px; gap:18px; }
  .hero { padding:24px; grid-template-columns:1fr .85fr; }
  .hero h2 > span { display:block; margin:5px 0 0; }
  .hero-tile b { font-size:51px; }
  .world-grid { grid-template-columns:repeat(2,1fr); }
  .world-card-art { height:132px; }
  .world-card-copy > span:not(.world-card-bottom) { min-height:0; }
}
@media(max-width:760px) {
  #app { width:calc(100% - 32px); }
  .playground-layout { grid-template-columns:1fr; gap:18px; }
  .playground-side { grid-template-columns:1fr 1fr; align-items:stretch; gap:12px; }
  .playground-main { display:contents; }
  .hero { order:0; }
  .playground-side { order:1; }
  .worlds-section { order:2; }
  .game-card { grid-column:1; grid-row:1/3; display:flex; flex-direction:column; }
  .mission-card { grid-column:2; grid-row:1; }
  .review-card { grid-column:2; grid-row:2; }
  .progress-card { grid-column:1/-1; }
  .game-card h2 { font-size:19px; }
  .game-art { flex:1; margin-top:16px; min-height:90px; }
  .game-button { padding:10px 8px; }
  .worlds-section { margin-top:0; }
  .world-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .world-card-art { height:112px; }
  .nav-note { display:none; }
  .nav { gap:20px; }
}
@media(max-width:600px) {
  #app { width:calc(100% - 32px); }
  .brand-strip { height:27px; font-size:9px; }
  .brand-strip > span { max-width:62%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .brand-strip a { font-size:9px; }
  .header { min-height:78px; gap:8px; }
  .brand { font-size:24px; gap:8px; }
  .brand small { display:none; }
  .brand-icon { width:31px; height:35px; font-size:21px; border-radius:7px; }
  .profile { gap:6px; }
  .nickname { font-size:11px; max-width:117px; min-height:44px; padding:9px 8px; }
  .stars { font-size:11px; padding:6px 7px; }
  .stars > span { font-size:14px; }
  .nav { position:fixed; top:auto; bottom:0; left:0; width:100%; margin:0; border:0; border-top:1px solid #e4daee; border-radius:0; box-shadow:0 -3px 16px #735b8909; gap:0; min-height:65px; padding:5px 12px max(7px,env(safe-area-inset-bottom)); background:#fffcfffa; }
  .nav > button { flex:1; min-height:51px; gap:4px; border:0; border-radius:9px; font-size:11px; padding:7px 3px; color:#9d8aa9; }
  .nav > button.selected { background:#f1e8fa; color:#8a5eb7; border:0; }
  .nav .ui-icon { width:19px; height:19px; }
  .footer { padding:24px 0 calc(90px + env(safe-area-inset-bottom)); font-size:9px; }
  .page-intro { padding:22px 0 18px; }
  .page-intro h1 { font-size:22px; }
  .page-intro .eyebrow { font-size:10px; margin-bottom:5px; }
  .hero { grid-template-columns:1fr; padding:22px; gap:13px; border-radius:13px; min-height:0; }
  .hero h2 { font-size:27px; margin:0; }
  .hero h2 > span { display:inline; margin-left:7px; font-size:18px; }
  .hero-copy > p { margin:0; font-size:13px; }
  .hero-copy > .quiet { margin:0; font-size:10px; }
  .hero-glyphs { gap:22px; padding:6px 12px 12px; }
  .hero-tile { width:107px; aspect-ratio:.98; }
  .hero-tile b { font-size:56px; }
  .hero-tile > span { font-size:11px; }
  .hero-copy > .button { min-height:48px; }
  .tag { font-size:10px; }
  .playground-side { gap:11px; }
  .mission-card,.game-card,.review-card,.progress-card { padding:16px; border-radius:11px; }
  .mission-card { grid-column:1/-1; grid-row:1; }
  .mission-card h2 { font-size:14px; }
  .mission-card ol { grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
  .mission-card li { gap:8px; }
  .mission-card li > span { width:24px; height:26px; flex-shrink:0; font-size:10px; }
  .mission-card strong { font-size:12px; }
  .mission-card small { font-size:10px; }
  .game-card { grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:90px 1fr; column-gap:17px; align-items:center; }
  .game-art { grid-column:1; grid-row:1/5; margin:0; height:94px; min-height:0; gap:5px; }
  .game-art > span { width:40px; height:50px; font-size:28px; border-radius:7px; }
  .game-art > span + span { font-size:22px; }
  .game-art i { font-size:18px; top:4px; right:2px; }
  .game-label { grid-column:2; font-size:9px; }
  .game-card h2 { grid-column:2; font-size:19px; margin:4px 0; }
  .game-card p { grid-column:2; font-size:11px; }
  .game-button { grid-column:2; font-size:12px; margin-top:12px; min-height:44px; }
  .review-card { grid-column:1; grid-row:3; }
  .progress-card { grid-column:2; grid-row:3; }
  .review-card h2 { font-size:14px; line-height:1.5; }
  .review-card p:not(.eyebrow) { font-size:10px; }
  .review-card .button { min-width:0; min-height:44px; font-size:11px; }
  .progress-number > strong { font-size:26px; line-height:1.3; }
  .progress-number small { display:block; font-size:10px; margin:3px 0 0; }
  .progress-card .text-button { font-size:11px; }
  .world-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .world-card-art { height:124px; }
  .world-card-copy { padding:13px 13px 0; }
  .world-card-copy > strong { font-size:17px; }
  .world-card-copy > small { font-size:10px; }
  .world-card-copy > span:not(.world-card-bottom) { font-size:11px; }
  .world-card-bottom { margin-top:12px; font-size:10px; }
  .map-nodes { gap:9px; }
  .study { padding-top:0; }
  .match-intro { margin:29px 0 22px; }
  .match-intro h1 { font-size:23px; }
  .match-intro > p:last-child { font-size:13px; }
  .match-board { gap:20px; }
  .match-tile,.match-meaning { min-height:95px; border-radius:13px; }
  .match-tile > span { font-size:46px; }
  .match-meaning { font-size:18px; }
  .match-status { font-size:14px; margin-top:26px; }
  .match-complete { padding:30px 0; }
  .match-complete h1 { font-size:25px; }
  .match-complete ul { gap:8px; }
  .match-complete li { min-width:0; flex:1; padding:15px 8px; }
  .match-complete li b { font-size:35px; }
  .match-complete li > span { font-size:12px; }
  .match-actions { gap:10px; }
  .match-actions > .button { flex:1; padding:12px; font-size:14px; }
  .game-record { padding:17px; flex-wrap:wrap; gap:13px; }
  .game-record h2 { font-size:15px; }
  .game-record > div { flex:1; }
  .game-record p { font-size:11px; }
  .game-record > .text-button { margin:0 0 0 auto; }
}
@media(prefers-reduced-motion:reduce) { .match-stamp { animation:none; } }
.hanja-assessment-records { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 14px; }
.hanja-assessment-records article { padding: 20px; border: 1px solid #dce5d3; border-radius: 14px; background: #f5f8ed; }
.hanja-assessment-records article > div > small { display: block; margin-top: 6px; color: #6c7f6b; }
.hanja-assessment-records dl { margin: 20px 0 12px; }
.hanja-assessment-records dl > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #dce5d3; }
.hanja-assessment-records dt { font-size: 13px; }
.hanja-assessment-records dd { margin: 0; font-size: 22px; font-weight: 800; }
.hanja-assessment-records article > small { color: #6c7f6b; }
.hanja-assessment-records article > p { font-size: 14px; }