@font-face {
    font-family: "MusicOnJua";
    src: url("../fonts/Jua-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* Bottom playground dock */
.bottom-dock-hotzone {
    position: fixed;
    z-index: 89;
    right: 0;
    bottom: 0;
    left: 0;
    height: 34px;
    touch-action: manipulation;
}

.bottom-dock {
    position: fixed;
    z-index: 90;
    left: 50%;
    bottom: 14px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(1420px, calc(100vw - 40px));
    min-height: 78px;
    padding: 8px 22px;
    border: 1px solid rgba(227, 216, 196, .82);
    border-radius: 34px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 15px 42px rgba(67, 62, 50, .19), inset 0 1px rgba(255, 255, 255, .9);
    backdrop-filter: blur(18px) saturate(1.15);
    opacity: .15;
    transform: translate(-50%, calc(100% + 25px));
    transition: transform .48s cubic-bezier(.2, .9, .22, 1.12), opacity .24s ease;
}

.bottom-dock::before {
    position: absolute;
    top: -10px;
    left: 50%;
    width: 74px;
    height: 6px;
    border-radius: 999px;
    background: rgba(73, 77, 82, .32);
    content: '';
    transform: translateX(-50%);
}

body.bottom-dock-visible .bottom-dock,
body.bottom-room-open .bottom-dock,
.bottom-dock:focus-within {
    opacity: 1;
    transform: translate(-50%, 0);
}

.bottom-dock__item {
    --dock-tone: #68717b;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    min-height: 60px;
    padding: 5px 16px;
    border: 0;
    border-radius: 26px;
    background: transparent;
    color: #555b63;
    font: 700 clamp(16px, 1.25vw, 21px)/1.1 var(--font-ui, sans-serif);
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.bottom-dock__item--home { --dock-tone: #369c47; }
.bottom-dock__item--activity { --dock-tone: var(--play-color, #3cab57); }
.bottom-dock__item--storage { --dock-tone: #617487; }
.bottom-dock__item--praise { --dock-tone: #eeaa18; }
.bottom-dock__item--guide { --dock-tone: #7755b7; }

.bottom-dock__item:hover,
.bottom-dock__item:focus-visible,
.bottom-dock__item.is-active {
    outline: none;
    background: color-mix(in srgb, var(--dock-tone) 13%, white);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--dock-tone) 25%, transparent);
    color: var(--dock-tone);
    transform: translateY(-2px);
}

.bottom-dock__icon {
    display: block;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 15px;
    background: color-mix(in srgb, var(--dock-tone) 12%, #fff);
}

.bottom-dock__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.55);
    transform-origin: 50% 29%;
}

.bottom-room-layer {
    position: fixed;
    z-index: 88;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
}

.bottom-room-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(37, 43, 47, .28);
    opacity: 0;
    backdrop-filter: blur(4px);
    transition: opacity .28s ease;
}

.bottom-room {
    position: absolute;
    right: max(20px, calc((100vw - 1420px) / 2));
    bottom: 108px;
    left: max(20px, calc((100vw - 1420px) / 2));
    max-height: min(68vh, 650px);
    overflow: auto;
    padding: clamp(20px, 2.2vw, 34px);
    border: 1px solid rgba(227, 216, 196, .9);
    border-radius: 34px;
    background: rgba(255, 253, 248, .98);
    box-shadow: 0 28px 80px rgba(51, 49, 42, .24);
    opacity: 0;
    transform: translateY(42px) scale(.985);
    transition: opacity .25s ease, transform .42s cubic-bezier(.2, .9, .22, 1.08);
}

body.bottom-room-open .bottom-room-layer {
    visibility: visible;
    pointer-events: auto;
}

body.bottom-room-open .bottom-room-backdrop { opacity: 1; }
body.bottom-room-open .bottom-room { opacity: 1; transform: none; }

.bottom-room__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.bottom-room__eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--play-color, #329a50);
    font-size: 14px;
    font-weight: 800;
}

.bottom-room__header h2 {
    margin: 0;
    color: #261f1b;
    font: 400 clamp(28px, 3vw, 42px)/1 var(--font-display, var(--font-ui, sans-serif));
}

.bottom-room__close {
    width: 50px;
    height: 50px;
    border: 1px solid #e6ddd0;
    border-radius: 50%;
    background: #fff;
    color: #5b5e62;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 7px 17px rgba(71, 65, 53, .11);
}

.bottom-room__close:hover,
.bottom-room__close:focus-visible { color: #fff; background: var(--play-color, #329a50); outline: none; }

.bottom-room-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 15px;
}

.bottom-room-grid--home { grid-template-columns: repeat(4, minmax(170px, 1fr)); }

.bottom-room-card {
    --room-tone: #4c9e62;
    display: flex;
    min-height: 150px;
    padding: 22px 18px;
    border: 2px solid color-mix(in srgb, var(--room-tone) 22%, #eee8de);
    border-radius: 26px;
    background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--room-tone) 8%, #fff));
    color: #35404a;
    text-align: center;
    text-decoration: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.bottom-room-card--main { --room-tone: #f0ae26; }
.room-tone-sound { --room-tone: #329a50; }
.room-tone-rhythm { --room-tone: #ef5878; }
.room-tone-create { --room-tone: #7755b7; }

.bottom-room-card:hover,
.bottom-room-card:focus-visible {
    border-color: var(--room-tone);
    outline: none;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--room-tone) 20%, transparent);
    transform: translateY(-5px);
}

.bottom-room-card > span { margin-bottom: 9px; font-size: 40px; }
.bottom-room-card strong { color: var(--room-tone); font-size: clamp(19px, 1.5vw, 25px); }
.bottom-room-card small { margin-top: 7px; color: #737b82; font-size: 14px; }

.bottom-room-empty {
    display: grid;
    min-height: 280px;
    place-items: center;
    align-content: center;
    color: #6b747a;
    text-align: center;
}

.bottom-room-empty > span { font-size: 66px; }
.bottom-room-empty strong { margin-top: 12px; color: #35404a; font-size: 25px; }
.bottom-room-empty p { margin: 8px 0 0; }

.bottom-room-records { display: grid; gap: 12px; }
.bottom-room-record {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 15px;
    padding: 15px 18px;
    border: 1px solid #e6e1d8;
    border-radius: 20px;
    background: #fff;
}
.bottom-room-record > span { display: grid; width: 42px; height: 42px; border-radius: 50%; background: #e7f5e7; color: #329a50; font-weight: 900; place-items: center; }
.bottom-room-record strong { font-size: 18px; }
.bottom-room-record p { margin: 4px 0 0; color: #707a82; }
.bottom-room-record time { color: #8a9298; font-size: 13px; }

.praise-summary { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: -4px 0 20px; color: #6b5b3b; }
.praise-summary strong { color: #eeaa18; font: 400 52px/1 var(--font-display, sans-serif); }
.praise-summary span { font-size: 20px; font-weight: 800; }
.praise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.praise-card { display: flex; min-height: 180px; padding: 20px; border: 2px dashed #d8d8d8; border-radius: 26px; background: #f6f6f6; color: #92979b; text-align: center; filter: grayscale(1); flex-direction: column; align-items: center; justify-content: center; }
.praise-card.is-earned { border: 2px solid #ffd66b; background: linear-gradient(145deg, #fffdf4, #fff1b9); color: #5c4a21; filter: none; box-shadow: 0 12px 26px rgba(225, 171, 39, .16); }
.praise-card > span { font-size: 54px; }
.praise-card strong { margin: 8px 0 5px; font-size: 20px; }

.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.guide-grid article { display: flex; align-items: center; gap: 16px; min-height: 110px; padding: 18px; border: 1px solid #e2e6dd; border-radius: 22px; background: #fff; }
.guide-grid article > span { display: grid; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: #e8f6e7; color: #329a50; font-size: 23px; font-weight: 900; place-items: center; }
.guide-grid strong { font-size: 20px; }
.guide-grid p { margin: 5px 0 0; color: #69737b; }
.guide-teacher-button { grid-column: 1 / -1; justify-self: center; min-height: 52px; padding: 0 28px; border: 1px solid #b9dba8; border-radius: 999px; background: #eff9e9; color: #26733e; font-size: 18px; font-weight: 900; cursor: pointer; }

@media (max-width: 900px) {
    .bottom-dock { width: calc(100vw - 16px); bottom: 8px; min-height: 70px; padding: 6px; border-radius: 26px; }
    .bottom-dock__item { min-height: 58px; gap: 4px; padding: 3px; font-size: 13px; flex-direction: column; }
    .bottom-dock__icon { flex-basis: 31px; width: 31px; height: 31px; border-radius: 10px; }
    .bottom-room { right: 8px; bottom: 88px; left: 8px; max-height: 72vh; padding: 20px 14px; border-radius: 27px; }
    .bottom-room-grid, .bottom-room-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bottom-room-card { min-height: 128px; padding: 15px 10px; }
    .praise-grid { grid-template-columns: repeat(2, 1fr); }
    .guide-grid { grid-template-columns: 1fr; }
    .bottom-room-record { grid-template-columns: 44px 1fr; }
    .bottom-room-record time { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .bottom-dock, .bottom-room, .bottom-room-backdrop { transition-duration: .01ms; }
}

:root {
    --ink: #22313f;
    --muted: #64717d;
    --line: #d9e3e8;
    --paper: #f4f7f3;
    --white: #fff;
    --teal: #2aa6a1;
    --blue: #4d83c4;
    --green: #77b255;
    --yellow: #f0b33d;
    --red: #e96c5b;
    --violet: #7a6ab0;
    --shadow: 0 18px 42px rgba(34, 49, 63, .14);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; background: var(--paper); color: var(--ink); }
button, input { font: inherit; }
button { touch-action: manipulation; }
.app-shell { min-height: 100vh; padding: 22px; }
.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; max-width: 1560px; margin: 0 auto 18px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.eyebrow { margin: 0 0 6px; color: var(--teal); font-weight: 800; font-size: 14px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: 36px; line-height: 1.15; letter-spacing: 0; }
.subtitle { margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.topbar__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.topbar__meta span, .topbar__meta a, .topbar__meta button, .back-link { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--white); text-decoration: none; font-weight: 700; }
.workspace { display: grid; grid-template-columns: 290px minmax(0, 1fr) 330px; gap: 18px; max-width: 1560px; margin: 0 auto; }
.content-nav, .teacher-panel, .stage-card, .admin-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.content-nav, .teacher-panel { padding: 18px; align-self: start; position: sticky; top: 18px; }
.content-nav h2, .teacher-panel h2 { font-size: 18px; margin-bottom: 14px; }
.content-menu { display: grid; gap: 10px; }
.content-button { display: grid; grid-template-columns: 12px 1fr; gap: 12px; width: 100%; min-height: 82px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; color: var(--ink); text-align: left; cursor: pointer; }
.content-button.is-active { border-color: var(--active-color, var(--teal)); background: color-mix(in srgb, var(--active-color, var(--teal)) 10%, #fff); }
.content-button__mark { width: 12px; height: 100%; min-height: 48px; border-radius: 999px; background: var(--active-color, var(--teal)); }
.content-button strong { display: block; margin-bottom: 4px; font-size: 15px; }
.content-button span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.stage-card { min-height: 760px; padding: 22px; overflow: hidden; }
.stage-head { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.badge { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--content-color, var(--teal)) 16%, #fff); color: var(--content-color, var(--teal)); font-weight: 800; font-size: 13px; }
.stage-title { margin: 8px 0; font-size: 30px; line-height: 1.2; }
.stage-summary { max-width: 820px; color: var(--muted); line-height: 1.65; }
.progress-summary { margin: 8px 0 0; color: var(--content-color, var(--teal)); font-weight: 800; }
.stage-head__side { display: grid; gap: 12px; justify-items: end; flex: 0 0 184px; }
.stage-mascot { display: grid; place-items: end center; width: min(184px, 26vw); aspect-ratio: 1; margin: 0; border: 1px solid color-mix(in srgb, var(--content-color, var(--teal)) 28%, #fff); border-radius: 16px; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--content-color, var(--teal)) 12%, #fff)); overflow: hidden; }
.stage-mascot img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 18px rgba(34, 49, 63, .18)); }
.flow-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 16px; }
.flow-step { min-height: 86px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; color: var(--ink); text-align: left; cursor: pointer; }
.flow-step strong { display: block; margin-bottom: 5px; color: var(--content-color, var(--teal)); }
.flow-step span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.flow-step.is-current { border-color: var(--content-color, var(--teal)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--content-color, var(--teal)) 26%, transparent); }
.teacher-toolbar, .action-row, .sound-grid, .rhythm-pads, .score-palette, .tile-palette { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.icon-button, .action-button, .sound-pin, .rhythm-pad, .score-note, .path-tile-button, .text-button { min-height: 54px; padding: 12px 16px; border: 0; border-radius: 10px; background: var(--content-color, var(--teal)); color: #fff; font-weight: 800; cursor: pointer; box-shadow: 0 10px 20px rgba(34, 49, 63, .12); }
.icon-button { min-height: 44px; padding: 9px 13px; font-size: 13px; }
.icon-button.danger { background: #f4e5e2; color: #9d392b; border: 1px solid #eec7bf; }
.action-button.secondary, .text-button { background: #eef3f4; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.text-button { min-height: 38px; padding: 8px 12px; }
.setup-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.setup-field { display: grid; gap: 8px; color: var(--muted); font-weight: 700; }
.segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.segment { min-height: 38px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer; font-weight: 800; }
.segment.is-active { background: var(--content-color, var(--teal)); color: #fff; border-color: var(--content-color, var(--teal)); }
.activity-layout { display: grid; grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr); gap: 16px; margin-top: 16px; }
.activity-layout section, .walk-scene { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.map-toolbar, .dock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sound-pin { width: calc(50% - 5px); min-height: 76px; display: grid; gap: 3px; align-content: center; }
.sound-pin span, .rhythm-pad span { font-size: 12px; opacity: .85; }
.slider-panel { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.slider-panel label { display: grid; gap: 8px; color: var(--muted); font-weight: 700; }
.sound-map { position: relative; min-height: 390px; border: 2px dashed color-mix(in srgb, var(--content-color, var(--teal)) 52%, #fff); border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.70)), radial-gradient(circle at 22% 18%, rgba(42,166,161,.18), transparent 28%), radial-gradient(circle at 80% 24%, rgba(240,179,61,.22), transparent 28%), radial-gradient(circle at 58% 78%, rgba(77,131,196,.20), transparent 32%); overflow: hidden; }
.map-token { position: absolute; display: grid; place-items: center; width: 92px; height: 92px; transform: translate(-50%, -50%); border: 0; border-radius: 999px; background: var(--content-color, var(--teal)); color: #fff; font-weight: 900; text-align: center; box-shadow: 0 16px 30px rgba(34, 49, 63, .18); animation: pop .28s ease-out; }
.path-board.advanced { display: grid; grid-template-columns: repeat(var(--grid-size), minmax(58px, 1fr)); gap: 8px; max-width: 680px; margin: 12px auto; }
.path-cell { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; color: var(--muted); font-weight: 900; cursor: pointer; }
.path-cell.is-start { background: #eaf7f3; color: #167b6f; }
.path-cell.is-goal { background: #fff1cf; color: #825b00; }
.path-cell.is-path { background: color-mix(in srgb, var(--content-color, var(--blue)) 18%, #fff); color: var(--content-color, var(--blue)); }
.path-cell.is-marble { background: var(--yellow); color: var(--ink); transform: scale(1.05); }
.validation-box { margin-top: 12px; padding: 14px; border-radius: 10px; background: #fff7e5; color: #7c5600; font-weight: 800; }
.validation-box.is-ok { background: #e7f6ee; color: #1d764b; }
.beat-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 10px; margin: 12px 0; }
.beat-track span { display: grid; place-items: center; min-height: 94px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb; font-weight: 900; }
.beat-track strong { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: color-mix(in srgb, var(--content-color, var(--red)) 18%, #fff); color: var(--content-color, var(--red)); }
.beat-track span.is-active { background: var(--content-color, var(--red)); color: #fff; transform: translateY(-2px); }
.rhythm-pad { min-width: 120px; min-height: 105px; display: grid; place-items: center; font-size: 20px; }
.rhythm-pad.is-hit, .score-note.is-hit { outline: 4px solid var(--yellow); transform: translateY(-2px); }
.walk-scene { margin-top: 16px; }
.walk-perspective { position: relative; display: grid; gap: 10px; min-height: 520px; padding: 20px; border-radius: 14px; background: linear-gradient(180deg, #eef8f2, #fff); overflow: hidden; }
.walk-perspective::before { content: ""; position: absolute; inset: 0 20%; background: linear-gradient(180deg, rgba(119,178,85,.10), rgba(77,131,196,.08)); clip-path: polygon(42% 0, 58% 0, 88% 100%, 12% 100%); }
.walk-pad { position: relative; z-index: 1; justify-self: center; display: grid; grid-template-columns: 52px 1fr; align-items: center; width: min(620px, calc(58% + var(--i) * 5%)); min-height: 60px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 900; overflow: hidden; cursor: pointer; }
.walk-pad strong { display: grid; place-items: center; height: 100%; background: color-mix(in srgb, var(--content-color, var(--green)) 18%, #fff); color: var(--content-color, var(--green)); }
.walk-pad span { padding: 0 16px; }
.walk-pad.is-active { background: var(--yellow); border-color: var(--yellow); transform: scale(1.04); box-shadow: 0 14px 28px rgba(34,49,63,.18); }
.score-note { min-width: 72px; min-height: 88px; }
.title-row { display: grid; grid-template-columns: 1fr 160px; gap: 10px; margin-bottom: 12px; }
.title-row input { min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.score-board { min-height: 180px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fbfcfb; }
.score-list { display: grid; grid-template-columns: repeat(4, minmax(60px, 1fr)); gap: 10px; }
.score-slot { display: inline-grid; place-items: center; min-height: 64px; border: 2px dashed var(--line); border-radius: 14px; color: var(--muted); font-weight: 900; }
.score-slot.is-filled { border-color: var(--note-color); background: var(--note-color); color: #fff; }
.caption { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.result-dock { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.output-tray { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.output-card { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.output-card strong, .output-card span { display: block; }
.output-card span { margin: 4px 0 8px; color: var(--muted); font-size: 12px; }
.output-card p, .empty-note { margin-bottom: 0; color: var(--muted); line-height: 1.5; }
.teacher-panel ul { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.7; }
.teacher-meta, .teacher-section { display: grid; gap: 10px; margin-bottom: 16px; }
.teacher-meta div, .teacher-section { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.teacher-section h3 { margin-bottom: 8px; font-size: 15px; }
.teacher-section p { margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.age-grid { display: grid; gap: 6px; }
.age-grid span { display: grid; gap: 2px; color: var(--muted); font-size: 13px; }
.age-grid strong { color: var(--ink); }
.status-line { min-height: 32px; margin: 16px 0 0; color: var(--content-color, var(--teal)); font-weight: 800; }
.admin-page { max-width: 1180px; margin: 0 auto; padding: 32px; }
.admin-card { padding: 20px; margin-top: 18px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.admin-grid article { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.admin-grid strong, .admin-grid span { display: block; }
.admin-grid span { margin: 4px 0 8px; color: var(--muted); font-size: 13px; }
.admin-metric { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.admin-metric div { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.admin-metric strong { display: block; font-size: 28px; color: var(--content-color, var(--teal)); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table th { color: var(--muted); font-size: 13px; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.82); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@media print { .content-nav, .teacher-toolbar, .teacher-panel, .topbar__meta { display: none; } .app-shell { padding: 0; } .workspace { display: block; } .stage-card { box-shadow: none; border: 0; } }
@media (max-width: 1240px) { .workspace { grid-template-columns: 1fr; } .content-nav, .teacher-panel { position: static; } .content-menu { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
@media (max-width: 760px) { .app-shell { padding: 12px; } .topbar { grid-template-columns: 1fr; } h1 { font-size: 28px; } .stage-card { min-height: auto; padding: 16px; } .stage-head { flex-direction: column; } .stage-head__side { grid-template-columns: auto 1fr; justify-items: start; flex: none; width: 100%; } .stage-mascot { width: 116px; } .flow-strip, .activity-layout, .title-row { grid-template-columns: 1fr; } .sound-pin { width: 100%; } .path-board.advanced { grid-template-columns: repeat(var(--grid-size), minmax(42px, 1fr)); } .walk-perspective { min-height: 420px; padding: 14px; } .walk-pad { width: 100%; } }

/* MusicOn illustrated asset integration */
body {
    background:
        radial-gradient(circle at 10% 8%, rgba(255, 218, 112, .28), transparent 26%),
        radial-gradient(circle at 92% 14%, rgba(139, 211, 255, .25), transparent 28%),
        linear-gradient(180deg, #fffaf0 0%, #f7fbef 55%, #eef8fb 100%);
}
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-symbol { width: 86px; height: 86px; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(81, 55, 28, .15)); }
.topbar { border-bottom-color: #ddc794; }
.content-nav, .teacher-panel, .stage-card, .admin-card {
    border: 2px solid #ead9ac;
    border-radius: 26px;
    box-shadow: 0 16px 36px rgba(89, 73, 38, .14);
}
.content-button {
    grid-template-columns: 72px 1fr;
    align-items: center;
    min-height: 92px;
    border: 2px solid #ead9ac;
    border-radius: 22px;
    background: linear-gradient(145deg, #fffefb, #fff7dc);
    box-shadow: 0 8px 16px rgba(89, 73, 38, .10);
}
.content-button.is-active { transform: translateY(-2px); box-shadow: 0 12px 22px color-mix(in srgb, var(--active-color) 22%, transparent); }
.content-button__visual { display: grid; place-items: center; width: 68px; height: 68px; }
.content-button__visual .ui-asset { width: 100%; height: 100%; }
.ui-asset { display: block; width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto; }
.stage-card { padding: 24px; background: rgba(255, 255, 255, .94); }
.stage-mascot { border: 2px solid #ead9ac; border-radius: 24px; background: linear-gradient(180deg, #fffdf5, #f6ffd9); }
.teacher-toolbar { padding: 10px; border: 2px solid #ead9ac; border-radius: 20px; background: #fffaf0; }
.icon-button, .icon-text-button, .action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.icon-button {
    min-width: 88px;
    padding: 7px 10px;
    border: 2px solid #d8c58f;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff, #fff4cf);
    color: #3f321f;
}
.icon-button .ui-asset { width: 36px; height: 36px; }
.icon-button.danger { background: linear-gradient(180deg, #fff, #ffe3e0); }
.icon-text-button .ui-asset { width: 30px; height: 30px; }
.action-button .ui-asset { width: 34px; height: 34px; }
.setup-panel, .activity-layout section, .walk-scene, .result-dock {
    border: 2px solid #ead9ac;
    border-radius: 22px;
    background: rgba(255, 255, 255, .93);
}
.segment { border: 2px solid #e2cf9b; background: #fffdf7; }
.scene-surface {
    background-image: linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)), var(--scene-image) !important;
    background-size: cover !important;
    background-position: center !important;
}
.scene-panel, .activity-scene, .score-scene { position: relative; overflow: hidden; }
.scene-panel > *, .activity-scene > *, .score-scene > * { position: relative; z-index: 1; }
.sound-pin {
    grid-template-columns: 58px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    text-align: left;
    border: 2px solid #ead9ac;
    border-radius: 22px;
    background: linear-gradient(145deg, #fff, #fff0b8);
    color: #3f321f;
}
.sound-pin .ui-asset { grid-row: 1 / 3; width: 56px; height: 56px; }
.sound-map { min-height: 430px; border: 4px solid #f1d486; }
.map-token {
    grid-template-rows: 58px auto;
    width: 104px;
    height: 104px;
    padding: 8px;
    border: 3px solid #fff8de;
    background: linear-gradient(145deg, #fff, #f9d863);
    color: #3f321f;
}
.map-token .ui-asset { width: 58px; height: 58px; }
.map-token span { font-size: 12px; }
.path-tile-button {
    display: grid;
    place-items: center;
    min-width: 112px;
    padding: 8px;
    border: 2px solid #e0c477;
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #fff0b8);
    color: #3f321f;
}
.path-tile-button .ui-asset { width: 76px; height: 76px; }
.path-cell {
    overflow: hidden;
    border: 3px solid #e1bf72;
    border-radius: 18px;
    background: rgba(255, 252, 235, .92);
}
.path-cell .ui-asset { width: 74%; height: 74%; }
.path-cell span { font-size: 11px; }
.beat-track span {
    gap: 4px;
    border: 2px solid #ead9ac;
    background: rgba(255,255,255,.91);
}
.beat-track .ui-asset { width: 58px; height: 58px; }
.beat-track em, .score-slot em { font-style: normal; font-weight: 900; }
.rhythm-pad {
    grid-template-rows: 72px auto auto;
    min-width: 132px;
    min-height: 150px;
    border: 3px solid #ead9ac;
    border-radius: 24px;
    background: linear-gradient(145deg, #fff, #e9f7ff);
    color: #3f321f;
}
.rhythm-pad .ui-asset { width: 76px; height: 76px; }
.walk-perspective { background-image: linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.18)), var(--scene-image); }
.walk-perspective::before { opacity: .18; }
.walk-pad { grid-template-columns: 52px 58px 1fr; border: 3px solid #fff3c4; background: rgba(255,255,255,.91); }
.walk-pad .ui-asset { width: 54px; height: 54px; }
.score-note {
    display: grid;
    place-items: center;
    min-width: 90px;
    min-height: 116px;
    padding: 7px;
    border: 3px solid #fff1bd;
    border-radius: 22px;
    background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--note-color) 24%, #fff));
    color: #3f321f;
}
.score-note .ui-asset { width: 72px; height: 72px; }
.score-board { background: rgba(255,255,255,.88); border: 3px solid #e8c96e; }
.score-slot { background: rgba(255,255,255,.90); }
.score-slot.is-filled { background: color-mix(in srgb, var(--note-color) 20%, #fff); color: #3f321f; }
.score-slot .ui-asset { width: 54px; height: 54px; }

@media (max-width: 760px) {
    .brand-symbol { width: 64px; height: 64px; }
    .content-button { grid-template-columns: 62px 1fr; }
    .teacher-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .icon-button { min-width: 0; }
    .path-tile-button { min-width: 92px; }
    .walk-pad { grid-template-columns: 42px 48px 1fr; }
}

/* Sound journey theme picker */
.content-sound-bundle .app-shell {
    padding: clamp(12px, 1.7vw, 26px) clamp(18px, 3.5vw, 62px) clamp(16px, 2vw, 32px);
}

.content-sound-bundle .topbar {
    min-height: clamp(72px, 10vh, 108px);
    margin-bottom: clamp(10px, 1.5vh, 18px);
}

.content-sound-bundle .brand-symbol {
    width: clamp(370px, 34vw, 570px);
    filter: drop-shadow(0 7px 8px rgba(91, 67, 26, .14));
}

.content-sound-bundle .topbar__meta {
    gap: 16px;
}

.content-sound-bundle .topbar__meta .home-link,
.content-sound-bundle .topbar__meta .target-age {
    display: none;
}

.content-sound-bundle .topbar__meta > a,
.content-sound-bundle .topbar__meta > button {
    height: 58px;
    min-height: 58px;
    padding: 0 22px;
    border: 2px solid #e6e4df;
    font-size: 17px;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(76, 62, 33, .1);
}

.content-sound-bundle .settings-link {
    gap: 9px;
}

.content-sound-bundle .settings-link > span {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 23px;
}

.content-sound-bundle .workspace {
    grid-template-columns: clamp(245px, 21vw, 350px) minmax(0, 1fr);
    gap: clamp(14px, 1.4vw, 24px);
}

.content-sound-bundle .content-nav {
    display: flex;
    flex-direction: column;
    padding: clamp(14px, 1.4vw, 22px);
    overflow: hidden;
    border: 0;
    border-radius: 34px;
    background: rgba(255, 255, 255, .94);
}

.sound-nav-heading {
    flex: 0 0 auto;
    padding: 0 8px 12px;
}

.sound-nav-heading > strong {
    display: block;
    padding: 11px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #23783f, #4bae60);
    color: #fff;
    font-family: "MusicOnJua", "Malgun Gothic", sans-serif;
    font-size: clamp(20px, 1.45vw, 28px);
    font-weight: 400;
    text-align: center;
    box-shadow: inset 0 -3px 0 rgba(20, 91, 44, .16);
}

.sound-nav-heading > strong span {
    color: #68cf6d;
}

.sound-nav-heading p {
    margin: 10px 4px 0;
    color: #346b4c;
    font-size: clamp(11px, .72vw, 14px);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}

.content-sound-bundle .content-menu {
    gap: clamp(7px, .8vh, 11px);
}

.content-sound-bundle .content-button {
    grid-template-columns: clamp(48px, 4vw, 66px) 1fr;
    gap: 12px;
    min-height: clamp(66px, 8.4vh, 92px);
    padding: 8px 13px;
    border: 1px solid #eee0bf;
    border-radius: 23px;
    background: #fffaf0;
    box-shadow: none;
}

.content-sound-bundle .content-button:nth-child(1) { background: #eef9e9; }
.content-sound-bundle .content-button:nth-child(2) { background: #fff9eb; }
.content-sound-bundle .content-button:nth-child(3) { background: #f8f3ff; }
.content-sound-bundle .content-button:nth-child(4) { background: #eef8ff; }
.content-sound-bundle .content-button:nth-child(5) { background: #fff1f5; }
.content-sound-bundle .content-button.is-active {
    border: 2px solid #aad493;
    transform: none;
    box-shadow: 0 6px 13px rgba(50, 125, 69, .1);
}

.content-sound-bundle .content-button__visual {
    width: clamp(48px, 4vw, 66px);
    height: clamp(48px, 4vw, 66px);
}

.content-sound-bundle .content-button strong {
    font-family: "MusicOnJua", "Malgun Gothic", sans-serif;
    font-size: clamp(16px, 1.12vw, 21px);
    font-weight: 400;
}

.content-sound-bundle .content-button span span {
    font-size: clamp(11px, .78vw, 14px);
}

.sound-nav-tip {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 12px;
    align-items: center;
    margin-top: auto;
    padding: 13px 14px;
    border: 1px solid #f0dfaa;
    border-radius: 24px;
    background: linear-gradient(135deg, #fffdf4, #fff6d8);
    box-shadow: 0 8px 18px rgba(101, 76, 25, .08);
}

.sound-nav-tip img {
    width: 70px;
    height: 78px;
    object-fit: contain;
    object-position: center bottom;
}

.sound-nav-tip strong {
    color: #23733d;
    font-size: 13px;
}

.sound-nav-tip p {
    margin: 6px 0 0;
    color: #5e625d;
    font-size: 11px;
    line-height: 1.5;
}

.content-sound-bundle .stage {
    border-radius: 34px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 36px rgba(89, 73, 38, .14);
}

.sound-theme-stage {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: clamp(7px, 1vh, 12px);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(7px, .7vw, 12px) clamp(18px, 2vw, 32px) clamp(14px, 1.5vw, 24px);
    overflow: hidden;
}

.sound-progress {
    display: grid;
    grid-template-columns: auto minmax(34px, 1fr) auto minmax(34px, 1fr) auto;
    align-items: center;
    width: min(760px, 76%);
    margin: 0 auto;
    color: #8a8b8c;
    font-size: clamp(13px, 1vw, 17px);
    font-weight: 700;
}

.sound-progress > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border: 2px solid #e5e4e1;
    border-radius: 999px;
    background: #fafafa;
    white-space: nowrap;
}

.sound-progress b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #aaa;
    color: #fff;
}

.sound-progress i {
    height: 0;
    border-top: 3px dashed #ddd8d1;
}

.sound-progress .is-done { color: #2d7d3e; border-color: #bfdfad; background: #f0faea; }
.sound-progress .is-done b { background: #46a957; }
.sound-progress .is-current { color: #e44969; border-color: #f4c3cf; background: #fff1f4; }
.sound-progress .is-current b { background: #ed5b7b; }

.sound-theme-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: clamp(165px, 12vw, 195px);
    padding: 0;
}

.sound-theme-head h2 {
    margin: 0 0 10px;
    color: #251b16;
    font-family: "MusicOnJua", "Malgun Gothic", sans-serif;
    font-size: clamp(30px, 3vw, 56px);
    font-weight: 400;
    line-height: 1.12;
    text-align: center;
    letter-spacing: -.025em;
}

.sound-theme-title {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    transform: translateY(-12px);
}

.sound-theme-title-image {
    display: block;
    width: min(100%, 760px);
    height: auto;
    object-fit: contain;
}

.sound-theme-head h2 span:first-child { color: #f1bd21; }
.sound-theme-head h2 span:last-child { color: #ee5375; }
.sound-theme-head > div:first-child > p {
    margin: 0;
    color: #444;
    font-size: clamp(13px, 1.15vw, 19px);
    text-align: center;
}

.sound-guide {
    position: absolute;
    top: -7px;
    right: 8px;
    z-index: 8;
    display: block;
    align-self: center;
    justify-self: end;
    width: min(100%, 310px);
    height: clamp(160px, 12vw, 195px);
    min-height: 0;
    overflow: hidden;
    animation: sound-guide-float 2.8s ease-in-out infinite;
}

.sound-guide p {
    position: relative;
    align-self: center;
    margin: 0 -4px 8px 0;
    padding: 15px 9px;
    border: 2px solid #e7e0d8;
    border-radius: 50%;
    background: #fff;
    font-size: clamp(10px, .85vw, 14px);
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    box-shadow: 0 7px 14px rgba(57, 47, 34, .08);
}

.sound-guide p strong { color: #35a245; }
.sound-guide img {
    width: 105px;
    height: 145px;
    object-fit: contain;
    object-position: center bottom;
}

.sound-guide .sound-guide-asset {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: translateY(-5%);
    filter: drop-shadow(0 8px 12px rgba(70, 54, 35, .08));
}

@keyframes sound-guide-float {
    0%, 100% { transform: translateY(0) rotate(-.4deg); }
    50% { transform: translateY(-7px) rotate(.5deg); }
}

.sound-theme-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    justify-items: center;
    gap: clamp(8px, 1vw, 16px);
    width: min(100%, 1320px);
    height: 100%;
    min-height: 0;
    margin-inline: auto;
}

.sound-theme-card {
    display: block;
    width: 100%;
    /* 카드 자산(212x365) 비율 고정 — 세로 공간이 남아도 카드가 늘어나지 않고 중앙 정렬됨 */
    aspect-ratio: 212 / 365;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 28px;
    background: transparent;
    color: #294f79;
    cursor: pointer;
    box-shadow: 0 8px 17px rgba(62, 54, 41, .1);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.sound-theme-card:hover,
.sound-theme-card:focus-visible {
    border-color: #45ae58;
    outline: none;
    transform: translateY(-5px);
    box-shadow: 0 0 0 4px rgba(76, 177, 89, .14), 0 14px 26px rgba(52, 119, 61, .2);
}
.sound-theme-card.is-selected {
    border-color: #45ae58;
    box-shadow: 0 0 0 4px rgba(76, 177, 89, .16), 0 12px 22px rgba(52, 119, 61, .18);
}

.sound-theme-card img {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 26px;
    object-fit: cover;
}

.sound-theme-card strong {
    padding-top: 12px;
    font-family: "MusicOnJua", "Malgun Gothic", sans-serif;
    font-size: clamp(19px, 1.55vw, 28px);
    font-weight: 400;
    text-align: center;
}

.sound-theme-card--yellow { color: #a46613; }
.sound-theme-card--green { color: #27833b; }
.sound-theme-card--purple { color: #6941a0; }
.sound-theme-card--sky { color: #215b96; }

.sound-change-theme {
    margin: 0 0 10px;
    padding: 9px 14px;
    border: 1px solid #bcdcae;
    border-radius: 999px;
    background: #f0faea;
    color: #28793d;
    font-weight: 700;
    cursor: pointer;
}

/* Sound-bundle: child-first sound finding screen */
.sound-find-stage {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: clamp(8px, 1vh, 13px);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(10px, 1.3vw, 22px);
    overflow: hidden;
}

.sound-find-stage .sound-progress {
    width: min(760px, 68%);
}

.sound-find-head {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 110px;
    align-items: center;
    gap: 14px;
    width: min(100%, 1460px);
    min-height: 90px;
    margin: 0 auto;
}

.sound-find-head > div {
    text-align: center;
}

.sound-find-head h2 {
    margin: 0 0 5px;
    color: #241914;
    font-family: "MusicOnJua", "Malgun Gothic", sans-serif;
    font-size: clamp(28px, 2.35vw, 48px);
    font-weight: 400;
    line-height: 1.12;
}

.sound-find-head p {
    margin: 0;
    color: #4f544e;
    font-size: clamp(13px, 1vw, 18px);
    font-weight: 700;
}

.sound-find-head > img {
    width: 104px;
    height: 88px;
    object-fit: contain;
    filter: drop-shadow(0 7px 9px rgba(53, 52, 38, .12));
    animation: sound-find-kuma 2.4s ease-in-out infinite;
}

.sound-find-back {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 2px solid #c7dfa9;
    border-radius: 50%;
    background: #f1fae9;
    color: #328245;
    font: 700 38px/1 "Malgun Gothic", sans-serif;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(54, 118, 61, .12);
    transition: transform .18s ease, background .18s ease;
}

.sound-find-back:hover,
.sound-find-back:focus-visible {
    outline: none;
    background: #dff4d3;
    transform: translateX(-3px);
}

.sound-find-scene {
    position: relative;
    width: min(100%, 1500px);
    min-height: 0;
    margin: 0 auto;
    overflow: hidden;
    border: 5px solid #fff;
    border-radius: 34px;
    background-image: linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.08)), var(--scene-image);
    background-position: center;
    background-size: cover;
    box-shadow: 0 14px 32px rgba(69, 62, 46, .18), 0 0 0 2px #e7ddc3;
}

.sound-find-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 28%, rgba(31,72,45,.06));
}

.sound-hotspot {
    position: absolute;
    left: var(--pin-x);
    top: var(--pin-y);
    z-index: 2;
    display: grid;
    place-items: center;
    width: clamp(76px, 6.8vw, 112px);
    height: clamp(76px, 6.8vw, 112px);
    padding: 8px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #286f3b;
    cursor: pointer;
    transform: translate(-50%, -50%);
    box-shadow: 0 8px 0 rgba(40, 126, 63, .18), 0 13px 24px rgba(37, 63, 43, .2);
    animation: sound-pin-idle 2.2s ease-in-out infinite;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.sound-hotspot:nth-of-type(2n) { animation-delay: -.8s; }
.sound-hotspot:hover,
.sound-hotspot:focus-visible {
    outline: none;
    border-color: #49ba5c;
    background: #f5ffef;
    box-shadow: 0 0 0 6px rgba(80, 190, 91, .2), 0 14px 28px rgba(37, 83, 44, .25);
}

.sound-hotspot .ui-asset {
    width: 72%;
    height: 72%;
    object-fit: contain;
}

.sound-hotspot strong {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    min-width: max-content;
    padding: 6px 12px;
    border: 2px solid #b8dba8;
    border-radius: 999px;
    background: #fff;
    color: #2d733c;
    font-size: clamp(11px, .82vw, 14px);
    opacity: 0;
    transform: translate(-50%, -6px);
    transition: opacity .2s ease, transform .2s ease;
    box-shadow: 0 6px 12px rgba(48, 76, 48, .13);
}

.sound-hotspot.is-found {
    border-color: #4bbc5b;
    background: #f4ffed;
}

.sound-hotspot.is-found strong {
    opacity: 1;
    transform: translate(-50%, 0);
}

.sound-hotspot-wave {
    position: absolute;
    inset: -8px;
    border: 4px solid rgba(75, 190, 91, .7);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.sound-hotspot.is-playing .sound-hotspot-wave {
    animation: sound-wave-out .85s ease-out;
}

.sound-find-message {
    position: absolute;
    left: 50%;
    bottom: 15px;
    z-index: 3;
    min-width: 220px;
    padding: 10px 20px;
    border: 2px solid rgba(255,255,255,.9);
    border-radius: 999px;
    background: rgba(37, 91, 48, .88);
    color: #fff;
    font-weight: 800;
    text-align: center;
    transform: translateX(-50%);
    box-shadow: 0 8px 20px rgba(25, 57, 31, .2);
}

.sound-find-message.is-showing { animation: sound-message-pop .42s ease-out; }

.sound-find-footer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    width: min(100%, 1500px);
    margin: 0 auto;
    padding: 9px 14px;
    border: 2px solid #e7dbb8;
    border-radius: 24px;
    background: rgba(255, 253, 245, .96);
    box-shadow: 0 8px 18px rgba(80, 68, 38, .1);
}

.sound-find-count {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 128px;
    color: #387a46;
    white-space: nowrap;
}

.sound-find-count strong {
    font-family: "MusicOnJua", "Malgun Gothic", sans-serif;
    font-size: 30px;
    font-weight: 400;
}

.sound-find-count span { font-size: 13px; font-weight: 800; }
.sound-found-list { display: flex; justify-content: center; gap: 8px; }
.sound-found-list > span {
    display: grid;
    grid-template-columns: 35px auto;
    align-items: center;
    gap: 5px;
    min-height: 42px;
    padding: 4px 9px;
    border: 1px solid #dedfdc;
    border-radius: 16px;
    background: #f1f2f0;
    filter: grayscale(1);
    opacity: .5;
    transition: filter .25s ease, opacity .25s ease, background .25s ease;
}
.sound-found-list > span.is-found { background: #effae8; filter: none; opacity: 1; }
.sound-found-list .ui-asset { width: 35px; height: 35px; }
.sound-found-list em { color: #3d5942; font-size: 12px; font-style: normal; font-weight: 800; white-space: nowrap; }

.sound-map-next {
    min-height: 50px;
    padding: 9px 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #51c45f, #36a448);
    color: #fff;
    font-family: "MusicOnJua", "Malgun Gothic", sans-serif;
    font-size: 20px;
    box-shadow: 0 5px 0 #237e36;
    cursor: pointer;
}

@keyframes sound-pin-idle {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, calc(-50% - 5px)) scale(1.025); }
}
@keyframes sound-wave-out {
    0% { opacity: .8; transform: scale(.75); }
    100% { opacity: 0; transform: scale(1.55); }
}
@keyframes sound-message-pop {
    from { opacity: .25; transform: translateX(-50%) translateY(8px) scale(.94); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes sound-find-kuma {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50% { transform: rotate(2deg) translateY(-5px); }
}

@media (max-height: 820px) and (min-width: 761px) {
    .sound-find-head { min-height: 68px; }
    .sound-find-head > img { width: 78px; height: 64px; }
    .sound-find-head h2 { font-size: clamp(24px, 2vw, 38px); }
    .sound-find-footer { padding-block: 5px; }
    .sound-found-list > span { grid-template-columns: 30px; padding-inline: 5px; }
    .sound-found-list em { display: none; }
}

@media (max-width: 980px) and (min-width: 761px) {
    .sound-find-stage .sound-progress { width: 94%; }
    .sound-find-head { grid-template-columns: 50px minmax(0, 1fr); }
    .sound-find-head > img { display: none; }
    .sound-found-list em { display: none; }
    .sound-found-list > span { grid-template-columns: 34px; }
}

@media (max-width: 760px) {
    .sound-find-stage { height: auto; min-height: 100vh; overflow: visible; }
    .sound-find-head { grid-template-columns: 46px minmax(0, 1fr); }
    .sound-find-head > img { display: none; }
    .sound-find-head h2 { font-size: 26px; }
    .sound-find-scene { min-height: 520px; }
    .sound-find-footer { grid-template-columns: 1fr; }
    .sound-found-list { flex-wrap: wrap; }
    .sound-map-next { width: 100%; }
}

@media (max-height: 830px) and (min-width: 761px) {
    .content-sound-bundle .content-button span span,
    .sound-nav-tip { display: none; }
    .sound-theme-stage { padding-top: 5px; padding-bottom: 12px; }
    .sound-theme-head { grid-template-columns: 1fr; }
    .sound-guide img { width: 80px; height: 105px; }
    .sound-guide { grid-template-columns: 1fr 80px; min-height: 90px; }
}

@media (max-width: 1050px) and (min-width: 761px) {
    .content-sound-bundle .workspace { grid-template-columns: 220px minmax(0, 1fr); }
    .sound-nav-tip { display: none; }
    .sound-theme-head { grid-template-columns: 1fr; min-height: auto; padding-left: 0; }
    .sound-guide { display: none; }
    .sound-progress { width: 94%; }
    .sound-progress > span { padding: 7px 9px; }
    .sound-theme-card { border-radius: 18px; }
    .sound-theme-card img { border-radius: 13px 13px 0 0; }
}

@media (max-width: 760px) {
    .content-sound-bundle .topbar__meta { margin-top: 10px; justify-content: flex-start; }
    .content-sound-bundle .workspace { grid-template-columns: 1fr; }
    .content-sound-bundle .content-nav { display: none; }
    .content-sound-bundle .stage { overflow: visible; }
    .sound-theme-stage { height: auto; overflow: visible; }
    .sound-progress { width: 100%; grid-template-columns: repeat(3, 1fr); gap: 5px; }
    .sound-progress i { display: none; }
    .sound-progress > span { justify-content: center; padding: 7px 5px; font-size: 11px; }
    .sound-progress b { width: 23px; height: 23px; }
    .sound-theme-head { grid-template-columns: 1fr; min-height: auto; padding: 8px 0; }
    .sound-guide { display: none; }
    .sound-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
    .sound-theme-card { max-height: none; min-height: 0; }
    .sound-theme-grid .sound-theme-card:last-child { grid-column: 1 / -1; }
}

/* Fixed activity viewport for tablets and classroom displays */
.activity-page {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.activity-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.activity-background__layer {
    position: absolute;
    inset: -2%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    filter: saturate(.72) brightness(1.12);
    transform: scale(1.035);
    transition: opacity 1.8s ease;
}

.activity-background__layer.is-active {
    opacity: var(--activity-bg-opacity, .14);
}

.activity-page .app-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    height: 100%;
    min-height: 0;
    /* 소리 꾸러미 셸과 동일한 여백 — 모든 활동이 같은 비율로 화면을 채우도록 통일 */
    padding: clamp(12px, 1.7vw, 26px) clamp(18px, 3.5vw, 62px) clamp(16px, 2vw, 32px);
}

.activity-page .music-breadcrumb {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 14px);
    width: 100%;
    min-height: clamp(40px, 5.2vh, 54px);
    min-width: 0;
    margin: 0;
    padding: 6px clamp(12px, 1.2vw, 20px);
    border: 1px solid rgba(111, 89, 59, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 7px 20px rgba(77, 59, 38, .08);
    color: #827970;
    font-size: clamp(13px, 1vw, 17px);
    font-weight: 800;
    backdrop-filter: blur(9px);
}

.activity-page .music-breadcrumb a {
    color: #53605a;
    text-decoration: none;
}

.activity-page .music-breadcrumb a:first-child {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border: 1px solid rgba(255, 198, 75, .3);
    border-radius: 50%;
    background: linear-gradient(145deg, #fffefa, #fff3c9);
    box-shadow: 0 3px 8px rgba(60, 48, 35, .13), inset 0 1px 0 #fff;
    transition: transform .2s ease, box-shadow .2s ease;
}

.activity-page .music-breadcrumb a:first-child:hover,
.activity-page .music-breadcrumb a:first-child:focus-visible {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 12px rgba(60, 48, 35, .18), 0 0 0 4px rgba(255, 202, 74, .14);
    outline: none;
}

.activity-page .breadcrumb-home-icon {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
}

.activity-page #activityCategoryCrumb {
    font-family: "MusicOnJua", "Malgun Gothic", sans-serif;
    color: var(--play-color, #329a50);
    font-size: 1.12em;
    font-weight: 400;
    letter-spacing: .01em;
}

.activity-page .music-breadcrumb strong {
    color: var(--play-color, #329a50);
    font-size: 1.05em;
}

.activity-page .topbar {
    grid-template-columns: minmax(280px, auto) minmax(300px, 1fr) auto;
    gap: clamp(12px, 1.4vw, 24px);
    width: 100%;
    max-width: none;
    min-height: clamp(72px, 10vh, 108px);
    margin: 0 auto clamp(10px, 1.5vh, 18px);
    padding: 0;
    border-bottom: 0;
    align-items: center;
}

.activity-page .brand-lockup {
    display: inline-flex;
    width: fit-content;
    text-decoration: none;
}

.activity-page .brand-symbol {
    width: clamp(300px, 27vw, 500px);
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: left center;
}

.activity-page .workspace {
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    gap: clamp(14px, 1.4vw, 24px);
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
}

.activity-page .content-nav {
    position: static;
    align-self: stretch;
    height: 100%;
    min-height: 0;
    padding: clamp(10px, 1.2vw, 16px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.teacher-mode-toggle {
    gap: 7px;
    border-color: #b9d8a8 !important;
    color: #27733e !important;
    background: linear-gradient(180deg, #f5ffed, #e4f4dc) !important;
    box-shadow: 0 7px 18px rgba(73, 130, 63, .14);
    cursor: pointer;
}

.teacher-mode-toggle span {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 20px;
}

.activity-page .teacher-panel {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 32;
    width: min(1580px, calc(100vw - 28px));
    height: calc(100vh - 28px);
    height: calc(100dvh - 28px);
    min-height: 0;
    padding: clamp(14px, 1.2vw, 22px);
    overflow: hidden;
    overscroll-behavior: contain;
    border: 1px solid #eadfc8;
    border-radius: 34px;
    background: rgba(255, 255, 255, .98);
    box-shadow: -20px 0 50px rgba(47, 39, 24, .2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(105%);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, visibility .32s;
}

.teacher-open .teacher-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.teacher-drawer-head {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 0;
    background: transparent;
}

.teacher-drawer-head h2 {
    position: fixed;
    left: 28px;
    top: 24px;
    margin: 0;
    color: #566055;
    font-size: 18px;
}

.teacher-drawer-close {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: #f2f5ef;
    color: #4a5846;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.teacher-help {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(230px, 20vw, 320px);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(14px, 1.4vw, 24px);
    width: 100%;
    height: 100%;
    padding-top: 38px;
}

.teacher-help__pages {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #eee5d6;
    border-radius: 28px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 28px rgba(84, 69, 45, .08);
}

.teacher-help__page {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(12px, 1.4vh, 20px);
    padding: clamp(20px, 2vw, 34px);
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(50px);
    transition: opacity .28s ease, transform .38s cubic-bezier(.2, .8, .2, 1), visibility .38s;
}

.teacher-help__page.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.teacher-help__intro > span {
    display: inline-flex;
    padding: 8px 28px;
    border-radius: 999px;
    color: #24763f;
    background: linear-gradient(90deg, #e7f7df, #d6f0d2);
    font-weight: 900;
}

.teacher-help__intro h3 {
    margin: 12px 0 8px;
    color: #29221d;
    font-family: 'BMJUA', 'Noto Sans KR', sans-serif;
    font-size: clamp(26px, 2.2vw, 42px);
}

.teacher-help__intro p {
    max-width: 1000px;
    margin: 0;
    color: #5d5b57;
    font-size: clamp(14px, 1.1vw, 19px);
    line-height: 1.65;
}

.teacher-help__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.3vw, 20px);
    min-height: 0;
}

.teacher-help-card {
    padding: clamp(14px, 1.35vw, 22px);
    border: 2px solid #dcebd7;
    border-radius: 22px;
    background: linear-gradient(135deg, #fff, #f8fcf6);
}

.teacher-help-card--yellow { border-color: #f3deb0; background: linear-gradient(135deg, #fff, #fffaf0); }
.teacher-help-card--blue { border-color: #cee4f7; background: linear-gradient(135deg, #fff, #f4f9ff); }
.teacher-help-card--purple { border-color: #e6d7f4; background: linear-gradient(135deg, #fff, #faf6ff); }
.teacher-help-card h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; color: #28763f; font-size: clamp(17px, 1.25vw, 23px); }
.teacher-help-card--yellow h4 { color: #a46c18; }
.teacher-help-card--blue h4 { color: #2672aa; }
.teacher-help-card--purple h4 { color: #8b50b4; }
.teacher-help-card ul { display: grid; gap: 7px; margin: 0; padding-left: 20px; color: #464646; line-height: 1.5; }
.teacher-help-card li { font-size: clamp(13px, .95vw, 17px); }

.teacher-help__side {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: clamp(12px, 1.5vh, 20px);
    min-height: 0;
}

.teacher-help__bubble {
    position: relative;
    width: 100%;
    padding: 22px 14px;
    border: 2px solid #eee3d5;
    border-radius: 50%;
    background: #fff;
    text-align: center;
    font-weight: 800;
    line-height: 1.55;
    box-shadow: 0 8px 20px rgba(70, 55, 35, .08);
}
.teacher-help__bubble strong { color: #30a549; }
.teacher-help__preview { width: 100%; padding: 12px; border: 1px solid #f0dfb4; border-radius: 18px; background: #fff9dc; color: #2d7f3e; }
.teacher-help__preview > strong { display: block; margin-bottom: 9px; }
.teacher-help__preview > div { display: grid; place-items: center; min-height: 110px; border-radius: 12px; background: linear-gradient(135deg, #dcf2ff, #fff0cd); color: #2d302b; }
.teacher-help__preview span { color: #ed547c; font-size: 28px; }
.teacher-help__preview small { color: #68706a; }
.teacher-help__side > img { width: auto; max-width: 88%; max-height: 33vh; object-fit: contain; filter: drop-shadow(0 9px 7px rgba(61, 50, 32, .12)); }

.teacher-help__footer {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 180px 1fr 180px;
    align-items: center;
    gap: 16px;
    padding: 10px 0 0;
}

.teacher-help-nav {
    min-height: 52px;
    border: 1px solid #e7ded1;
    border-radius: 999px;
    background: #fff;
    color: #454545;
    font-weight: 900;
    font-size: 17px;
    box-shadow: 0 5px 12px rgba(72, 58, 40, .08);
    cursor: pointer;
}
.teacher-help-nav:disabled { opacity: .34; cursor: default; }
.teacher-help__dots { display: flex; justify-content: center; gap: 9px; }
.teacher-help__dots button { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: #d9d7d2; cursor: pointer; }
.teacher-help__dots button.is-active { width: 30px; border-radius: 99px; background: #46ae5a; }

.teacher-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 31;
    display: block;
    border: 0;
    background: rgba(38, 43, 34, .24);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s;
}

.teacher-open .teacher-panel-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.activity-page .stage,
.activity-page #activityStage {
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.activity-page .stage {
    overflow: hidden;
}

.activity-page .stage-card {
    height: 100%;
    min-height: 0;
    padding: clamp(14px, 1.5vw, 22px);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.activity-page .content-button {
    min-height: 72px;
    padding: 10px;
}

.activity-page .content-button__visual {
    width: 58px;
    height: 58px;
}

@media (max-width: 980px) and (min-width: 761px) {
    .activity-page .brand-symbol {
        width: min(480px, 58vw);
    }

    .activity-page .workspace {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .activity-page .content-button {
        grid-template-columns: 48px 1fr;
        min-height: 62px;
        padding: 7px;
    }

    .activity-page .content-button__visual {
        width: 46px;
        height: 46px;
    }

    .activity-page .content-button span,
    .activity-page .teacher-panel p,
    .activity-page .teacher-panel li {
        font-size: 12px;
    }
}

/* Background administration */
.background-admin {
    max-width: 1280px;
}

.admin-heading,
.admin-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.admin-heading > img {
    width: min(440px, 42vw);
    height: auto;
}

.admin-section-heading h2 {
    margin: 8px 0 0;
}

.admin-notice {
    padding: 14px 18px;
    border-radius: 16px;
    font-weight: 800;
}

.admin-notice.is-success {
    color: #176b43;
    background: #e4f7ed;
    border: 1px solid #a6dfc0;
}

.admin-notice.is-error {
    color: #982f28;
    background: #fff0ee;
    border: 1px solid #f1b9b4;
}

.background-settings-form,
.background-upload-form {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.background-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.background-choice {
    position: relative;
    display: grid;
    overflow: hidden;
    border: 3px solid transparent;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(70, 51, 27, .12);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.background-choice:hover,
.background-choice:focus-within {
    transform: translateY(-3px);
}

.background-choice.is-selected {
    border-color: var(--content-color, #2aa6a1);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--content-color, #2aa6a1) 22%, transparent);
}

.background-choice > input {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 24px;
    height: 24px;
    accent-color: var(--content-color, #2aa6a1);
}

.background-choice > img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.background-choice > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}

.background-choice small {
    color: var(--muted);
}

.background-controls {
    display: grid;
    grid-template-columns: 1.2fr 1fr .7fr;
    gap: 14px;
}

.background-controls fieldset,
.background-controls > label,
.background-upload-form > label {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fbfcfb;
    color: var(--muted);
    font-weight: 800;
}

.background-controls fieldset label {
    margin-right: 14px;
}

.background-controls select,
.background-upload-form input[type="text"],
.background-upload-form input[type="file"] {
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.background-upload-form {
    grid-template-columns: 1fr 1.4fr auto;
    align-items: end;
}

.uploaded-background-list {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.uploaded-background-list form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.teacher-settings-form,
.teacher-page-list {
    display: grid;
    gap: 18px;
    margin-top: 18px;
}

.teacher-page-editor {
    padding: 18px;
    border: 2px solid #d9ead5;
    border-radius: 22px;
    background: #fcfff9;
}

.teacher-page-editor__head,
.teacher-page-editor__head > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.teacher-page-editor__head > strong { color: #28733c; font-size: 19px; }
.teacher-page-editor__head label { color: #4d6451; font-weight: 800; }
.text-button.is-danger { color: #b84943; }

.teacher-page-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.teacher-page-fields .is-wide { grid-column: 1 / -1; }
.teacher-page-fields label,
.teacher-section-editor-grid label {
    display: grid;
    gap: 7px;
    color: #57615a;
    font-weight: 800;
}

.teacher-page-fields input,
.teacher-page-fields textarea,
.teacher-section-editor-grid input,
.teacher-section-editor-grid textarea,
.teacher-section-editor-grid select {
    width: 100%;
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #d8ded7;
    border-radius: 10px;
    background: #fff;
    font: inherit;
}

.teacher-section-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.teacher-section-editor-grid fieldset {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 14px;
    border: 1px solid #dce5da;
    border-radius: 16px;
    background: #fff;
}

.teacher-section-editor-grid legend { padding: 0 7px; color: #2f7943; font-weight: 900; }
.teacher-section-editor__row { display: grid; grid-template-columns: .6fr 1fr; gap: 10px; }

@media (max-width: 820px) {
    .admin-heading {
        align-items: flex-start;
        flex-direction: column-reverse;
    }

    .admin-heading > img {
        width: min(520px, 90vw);
    }

    .background-choice-grid,
    .background-controls,
    .background-upload-form,
    .teacher-page-fields,
    .teacher-section-editor-grid {
        grid-template-columns: 1fr;
    }

    .teacher-page-fields .is-wide { grid-column: auto; }
}

@media (max-width: 760px) {
    .activity-page {
        height: auto;
        min-height: 100vh;
        overflow: auto;
    }

    .activity-page .app-shell {
        display: block;
        height: auto;
    }

    .activity-page .brand-symbol {
        width: min(360px, 72vw);
        max-height: none;
    }

    .activity-page .workspace {
        grid-template-columns: 1fr;
        height: auto;
    }

    .activity-page .content-nav,
    .activity-page .stage-card {
        height: auto;
        overflow: visible;
    }
}

/* Keep the sound-bundle composition above the shared activity defaults. */
.activity-page.content-sound-bundle .app-shell {
    padding: clamp(10px, 1.25vw, 22px) clamp(10px, 1.4vw, 26px) clamp(14px, 1.6vw, 28px);
}

.activity-page.content-sound-bundle .topbar {
    max-width: none;
    min-height: clamp(72px, 10vh, 108px);
    margin-bottom: clamp(10px, 1.5vh, 18px);
}

.activity-page.content-sound-bundle .brand-symbol {
    width: clamp(300px, 27vw, 500px);
}

.activity-page.content-sound-bundle .workspace {
    grid-template-columns: clamp(245px, 21vw, 350px) minmax(0, 1fr);
    gap: clamp(14px, 1.4vw, 24px);
    max-width: none;
}

.activity-page.content-sound-bundle .content-nav {
    display: flex;
    padding: clamp(14px, 1.4vw, 22px);
    overflow: hidden;
}

.activity-page.content-sound-bundle .content-button {
    grid-template-columns: clamp(48px, 4vw, 66px) 1fr;
    min-height: clamp(66px, 8.4vh, 92px);
    padding: 8px 13px;
}

.activity-page.content-sound-bundle .content-button__visual {
    width: clamp(48px, 4vw, 66px);
    height: clamp(48px, 4vw, 66px);
}

@media (max-width: 1050px) and (min-width: 761px) {
    .activity-page.content-sound-bundle .workspace {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .activity-page.content-sound-bundle .app-shell { padding: 12px; }
    .activity-page.content-sound-bundle .brand-symbol { width: min(360px, 72vw); }
    .activity-page.content-sound-bundle .workspace { grid-template-columns: 1fr; }
    .activity-page.content-sound-bundle .content-nav { display: none; }
}

/* Selected category feedback and full-width sound activity */
.activity-page.content-sound-bundle .content-button:not(.is-active) {
    filter: grayscale(.68) saturate(.32) brightness(1.03);
    opacity: .82;
    transition: filter .25s ease, opacity .25s ease, transform .2s ease;
}

.activity-page.content-sound-bundle .content-button:not(.is-active):hover,
.activity-page.content-sound-bundle .content-button:not(.is-active):focus-visible {
    filter: grayscale(.5) saturate(.46) brightness(1.02);
    opacity: .92;
}

.activity-page.content-sound-bundle .content-button.is-active {
    filter: none;
    opacity: 1;
    animation: selected-category-breathe 2.4s ease-in-out infinite;
    will-change: transform, box-shadow;
}

.activity-page.content-sound-bundle .content-button.is-active .content-button__visual {
    animation: selected-category-float 1.7s ease-in-out infinite;
}

.activity-page.content-sound-bundle.sound-activity-open .workspace {
    grid-template-columns: minmax(0, 1fr);
}

.activity-page.content-sound-bundle.sound-activity-open .content-nav {
    display: none;
}

.activity-page.content-sound-bundle.sound-activity-open .stage {
    width: 100%;
    animation: sound-stage-arrive .34s ease-out both;
}

@keyframes selected-category-breathe {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 6px 13px color-mix(in srgb, var(--play-color, #329a50) 10%, transparent);
    }
    50% {
        transform: translateY(-3px) scale(1.015);
        box-shadow: 0 11px 22px color-mix(in srgb, var(--play-color, #329a50) 22%, transparent);
    }
}

@keyframes selected-category-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-5px) rotate(1.5deg); }
}

@keyframes sound-stage-arrive {
    from { opacity: .72; transform: scale(.985); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .activity-page.content-sound-bundle .content-button.is-active,
    .activity-page.content-sound-bundle .content-button.is-active .content-button__visual,
    .activity-page.content-sound-bundle.sound-activity-open .stage {
        animation: none;
    }

    .sound-guide {
        animation: none;
    }

    .sound-hotspot,
    .sound-hotspot.is-playing .sound-hotspot-wave,
    .sound-find-message.is-showing,
    .sound-find-head > img {
        animation: none;
    }
}

@media (max-width: 900px) {
    .activity-page .teacher-panel {
        top: 8px;
        right: 8px;
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
        padding: 12px;
        border-radius: 24px;
    }

    .teacher-help {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        padding-top: 38px;
    }

    .teacher-help__side { display: none; }
    .teacher-help__footer { grid-column: 1; grid-template-columns: 1fr auto 1fr; }
    .teacher-help__grid { grid-template-columns: 1fr; }
    .teacher-help-nav { min-height: 46px; }
}

/* Shared activity chrome: category color follows the currently selected play. */
.activity-page .topbar__meta { gap: 12px; flex-wrap: nowrap; }
.activity-page .topbar__meta .home-link,
.activity-page .topbar__meta .target-age { display: none; }
.activity-page .topbar__meta > a,
.activity-page .topbar__meta > button {
    height: 52px;
    min-height: 52px;
    padding: 0 18px;
    white-space: nowrap;
}

.activity-page .content-nav {
    display: flex;
    flex-direction: column;
    padding: clamp(14px, 1.4vw, 22px);
    overflow: hidden;
    border: 0;
    border-radius: 34px;
    background: rgba(255, 255, 255, .94);
}
/* 데스크톱 전용 2열 — 미디어쿼리 없이 두면 소스 순서상 앞선 모바일 규칙(1fr)을 덮어써 모바일이 2열로 깨짐 */
@media (min-width: 761px) {
    .activity-page .workspace { grid-template-columns: clamp(245px, 21vw, 350px) minmax(0, 1fr); }
}

.activity-page .sound-nav-heading > strong {
    background: linear-gradient(135deg, color-mix(in srgb, var(--play-color) 82%, #163a27), color-mix(in srgb, var(--play-color) 88%, #fff));
    box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--play-color) 62%, #27332b);
}
.activity-page .sound-nav-heading > strong span { color: inherit; }
.activity-page .sound-nav-heading > strong i { color: color-mix(in srgb, var(--play-color) 45%, #fff); font-style: normal; }
.activity-page .sound-nav-heading p { color: color-mix(in srgb, var(--play-color) 60%, #34483a); }
.activity-page .content-menu { gap: clamp(7px, .8vh, 11px); }
.activity-page .content-button {
    grid-template-columns: clamp(48px, 4vw, 66px) 1fr;
    gap: 12px;
    min-height: clamp(66px, 8.4vh, 92px);
    padding: 8px 13px;
    border: 1px solid #e8e5df;
    border-radius: 23px;
    box-shadow: none;
}
.activity-page .content-button:nth-child(1) { background: #eef9e9; }
.activity-page .content-button:nth-child(2) { background: #fff9eb; }
.activity-page .content-button:nth-child(3) { background: #fff3f6; }
.activity-page .content-button:nth-child(4) { background: #f8f3ff; }
.activity-page .content-button:nth-child(5) { background: #f3efff; }
.activity-page .content-button.is-active {
    border: 2px solid var(--play-color, #329a50);
    background: color-mix(in srgb, var(--play-color, #329a50) 10%, #fff);
    transform: none;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--play-color, #329a50) 22%, transparent);
}
.activity-page.content-sound-bundle .content-button.is-active {
    border-color: var(--play-color, #329a50);
    background: color-mix(in srgb, var(--play-color, #329a50) 10%, #fff);
}
.activity-page .content-button__visual { width: clamp(48px, 4vw, 66px); height: clamp(48px, 4vw, 66px); }
.activity-page .content-button strong { font-family: "MusicOnJua", "Malgun Gothic", sans-serif; font-size: clamp(16px, 1.12vw, 21px); font-weight: 400; }
.activity-page .content-button span span { font-size: clamp(11px, .78vw, 14px); }
.activity-page .sound-nav-tip strong { color: var(--play-color, #329a50); }
.activity-page .stage { border-radius: 34px; background: rgba(255, 255, 255, .96); box-shadow: 0 16px 36px rgba(89, 73, 38, .14); }

@media (max-width: 1120px) and (min-width: 761px) {
    .activity-page .topbar { grid-template-columns: minmax(240px, 30vw) minmax(260px, 1fr) auto; }
    .activity-page .brand-symbol,
    .activity-page.content-sound-bundle .brand-symbol { width: min(30vw, 360px); }
    .activity-page .music-breadcrumb { gap: 7px; padding-inline: 10px; font-size: 12px; }
    .activity-page .topbar__meta > a,
    .activity-page .topbar__meta > button { height: 46px; min-height: 46px; padding-inline: 12px; font-size: 13px; }
    .activity-page .workspace,
    .activity-page.content-sound-bundle .workspace { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (max-width: 760px) {
    /* 브랜드 최소폭(300px) + 메뉴(약 280px)가 한 줄에 못 들어가므로 세로로 쌓음 */
    .activity-page .topbar { grid-template-columns: minmax(0, 1fr); }
    /* 62vw: 뷰포트 약 452px 이하에서 로고가 화면의 약 62%로 축소 (breadcrumb·메뉴와의 시각 균형값) */
    .activity-page .brand-symbol { width: min(280px, 62vw); }
    .activity-page .topbar__meta { justify-content: flex-start; }
    .activity-page .activity-breadcrumb { grid-column: 1 / -1; grid-row: 2; }
    .activity-page .content-nav { display: none; }
    /* 모바일 1열 명시 (멀리 떨어진 규칙들의 소스 순서에 의존하지 않기 위한 안전장치) */
    .activity-page .workspace { grid-template-columns: minmax(0, 1fr); }
}

/* Advanced teacher mode */
.teacher-open { overflow: hidden; }
.teacher-open .bottom-dock,
.teacher-open .bottom-dock-hotzone { opacity: 0; visibility: hidden; pointer-events: none; }

.activity-page .teacher-panel {
    top: 10px;
    right: 10px;
    width: min(1660px, calc(100vw - 20px));
    height: calc(100dvh - 20px);
    padding: 20px;
    border: 1px solid rgba(231, 218, 191, .9);
    border-radius: 36px;
    background:
        radial-gradient(circle at 88% 20%, rgba(228, 247, 223, .64), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(255, 253, 247, .98));
    box-shadow: -24px 0 70px rgba(48, 43, 32, .24);
}

.teacher-drawer-head { top: 18px; right: 22px; }
.teacher-drawer-head h2 {
    position: fixed;
    top: 25px;
    left: max(34px, calc((100vw - 1660px) / 2 + 34px));
    z-index: 36;
    color: #526052;
    font-size: 18px;
    letter-spacing: -.02em;
}
.teacher-drawer-close {
    width: 48px;
    height: 48px;
    border: 1px solid #e5ecdf;
    background: rgba(244, 249, 241, .96);
    box-shadow: 0 8px 20px rgba(66, 83, 61, .12);
    transition: transform .2s ease, background .2s ease;
}
.teacher-drawer-close:hover { color: #fff; background: #3ba654; transform: rotate(7deg); }

.teacher-help {
    position: relative;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 21vw, 350px);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 18px;
    padding-top: 42px;
}

.teacher-help__pages {
    border: 1px solid #ecdfca;
    border-radius: 30px;
    background:
        linear-gradient(rgba(255,255,255,.93), rgba(255,255,255,.93)),
        radial-gradient(circle at 0 0, #e6f7df, transparent 35%);
    box-shadow: 0 14px 34px rgba(77, 61, 39, .09);
}

.teacher-help__page { padding: clamp(24px, 2.25vw, 40px); scrollbar-color: #9aa09a transparent; }
.teacher-help__intro > span {
    padding: 9px 26px;
    border: 1px solid #cae7c4;
    background: linear-gradient(90deg, #e8f8e2, #d8f2d4);
    box-shadow: inset 0 1px rgba(255,255,255,.8);
}
.teacher-help__intro h3 { margin-top: 16px; font-size: clamp(29px, 2.45vw, 46px); }
.teacher-help__intro p { max-width: 1050px; font-size: clamp(15px, 1.15vw, 20px); }
.teacher-help__grid { gap: clamp(14px, 1.45vw, 22px); }

.teacher-help-card {
    position: relative;
    overflow: hidden;
    padding: clamp(17px, 1.55vw, 25px);
    border-radius: 24px;
    box-shadow: inset 0 1px rgba(255,255,255,.9), 0 7px 18px rgba(70, 68, 56, .045);
}
.teacher-help-card::after {
    position: absolute;
    right: -14px;
    bottom: -16px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: currentColor;
    content: '';
    opacity: .035;
}
.teacher-help-card h4 { font-size: clamp(18px, 1.35vw, 24px); }
.teacher-help-card li { font-size: clamp(14px, 1vw, 18px); line-height: 1.55; }

.teacher-help__side {
    align-content: start;
    gap: 14px;
    padding: 8px 2px 0;
}
.teacher-help__bubble {
    padding: 22px 17px;
    border-color: #e9dcc9;
    border-radius: 48% 48% 50% 50%;
    background: rgba(255,255,255,.96);
    font-size: 16px;
    box-shadow: 0 10px 26px rgba(83, 66, 43, .1);
}
.teacher-help__bubble::after {
    position: absolute;
    bottom: -15px;
    left: 58%;
    width: 28px;
    height: 28px;
    border-right: 2px solid #e9dcc9;
    border-bottom: 2px solid #e9dcc9;
    background: #fff;
    content: '';
    transform: rotate(45deg);
}
.teacher-help__preview {
    padding: 13px;
    border: 1px solid #eed89c;
    border-radius: 21px;
    background: linear-gradient(145deg, #fffcef, #fff6cc);
    box-shadow: 0 9px 20px rgba(119, 94, 35, .08);
}
.teacher-help__preview > div {
    grid-template-columns: 66px 1fr;
    grid-template-rows: auto auto;
    gap: 1px 10px;
    min-height: 100px;
    padding: 10px;
    place-items: center start;
}
.teacher-help__preview img { grid-row: 1 / 3; width: 66px; height: 66px; object-fit: contain; }
.teacher-help__preview b { align-self: end; }
.teacher-help__preview small { align-self: start; }
.teacher-help__side > img { max-width: 83%; max-height: 29vh; margin-top: auto; }

.teacher-help__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 11px 14px;
    border: 1px solid #ece3d5;
    border-radius: 25px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 26px rgba(69, 59, 42, .09);
}
.teacher-help__tools { display: flex; align-items: center; gap: 9px; min-width: 0; }
.teacher-help__tools button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid #e6e1da;
    border-radius: 999px;
    background: #fff;
    color: #56605a;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(62, 58, 49, .055);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.teacher-help__tools button:nth-child(1) { color: #e95768; background: #fff3f4; border-color: #f4cbd1; }
.teacher-help__tools button:nth-child(2) { color: #2e9349; background: #eef9ec; border-color: #cbe5c6; }
.teacher-help__tools button:nth-child(3) { color: #317fb8; background: #eef7ff; border-color: #c9e1f5; }
.teacher-help__tools button:nth-child(4) { color: #c17914; background: #fff8e8; border-color: #f0d79e; }
.teacher-help__tools button:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(62, 58, 49, .1); }
.teacher-help__tools button.is-confirmed { color: #fff; background: #3cab57; }
.teacher-help__tools button.is-unavailable { animation: teacher-shake .25s linear 2; opacity: .55; }

.teacher-help__pager { display: grid; grid-template-columns: 155px auto 155px; align-items: center; gap: 12px; }
.teacher-help-nav { min-height: 48px; font-size: 15px; }
.teacher-help__dots button { width: 10px; height: 10px; }
.teacher-help__dots button.is-active { width: 28px; background: var(--play-color, #46ae5a); }

.teacher-coach-note {
    position: absolute;
    z-index: 7;
    left: 24px;
    bottom: 92px;
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: center;
    gap: 12px;
    width: min(390px, 34vw);
    padding: 14px 18px 14px 12px;
    border: 1px solid #ead397;
    border-radius: 25px;
    background: linear-gradient(140deg, rgba(255,255,255,.98), rgba(255,248,218,.98));
    box-shadow: 0 18px 45px rgba(77, 64, 39, .22);
    opacity: 0;
    transform: translate(-34px, 18px) scale(.96);
    animation: teacher-note-in .5s .35s cubic-bezier(.2,.9,.22,1.12) forwards;
}
.teacher-coach-note::after {
    position: absolute;
    left: 32px;
    bottom: -11px;
    width: 22px;
    height: 22px;
    border-right: 1px solid #ead397;
    border-bottom: 1px solid #ead397;
    background: #fff8da;
    content: '';
    transform: rotate(45deg);
}
.teacher-coach-note > button {
    position: absolute;
    top: 7px;
    right: 9px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.75);
    color: #7a7469;
    font-size: 20px;
    cursor: pointer;
}
.teacher-coach-note img { width: 84px; height: 92px; object-fit: contain; }
.teacher-coach-note strong { display: block; margin-bottom: 5px; color: #2a7e40; font-size: 17px; }
.teacher-coach-note p { margin: 0; padding-right: 10px; color: #565750; font-size: 13px; line-height: 1.55; }
.teacher-coach-note.is-dismissed { display: none; }

@keyframes teacher-note-in { to { opacity: 1; transform: none; } }
@keyframes teacher-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

@media (max-width: 1180px) {
    .teacher-help__tools button { padding-inline: 12px; font-size: 13px; }
    .teacher-help__pager { grid-template-columns: 125px auto 125px; }
    .teacher-coach-note { width: 330px; }
}

@media (max-width: 900px) {
    .activity-page .teacher-panel { top: 6px; right: 6px; width: calc(100vw - 12px); height: calc(100dvh - 12px); padding: 12px; border-radius: 26px; }
    .teacher-help { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
    .teacher-help__side { display: none; }
    .teacher-help__footer { grid-template-columns: 1fr; gap: 9px; padding: 9px; }
    .teacher-help__tools { justify-content: center; }
    .teacher-help__tools button { flex: 1; padding-inline: 6px; font-size: 12px; }
    .teacher-help__pager { grid-template-columns: 1fr auto 1fr; }
    .teacher-coach-note { left: 16px; bottom: 150px; width: min(340px, calc(100vw - 50px)); }
}

@media (max-width: 620px) {
    .teacher-help__grid { grid-template-columns: 1fr; }
    .teacher-help__page { padding: 18px 14px; }
    .teacher-help__tools button { min-height: 42px; }
    .teacher-help__tools button span + * { display: none; }
    .teacher-help__tools { display: grid; grid-template-columns: repeat(4, 1fr); }
    .teacher-help-nav span { display: none; }
}

/* Sound bundle: compact single-page play screens */
.sound-find-stage,
.sound-create-stage {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(8px, 1vh, 14px);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(10px, 1.1vw, 18px);
    overflow: hidden;
}

.sound-find-head,
.sound-create-head {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 54px;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 66px;
    margin: 0;
}
.sound-find-head::after,
.sound-create-head::after { width: 54px; content: ''; }
.sound-find-head > div,
.sound-create-head > div { text-align: center; }
.sound-find-head h2,
.sound-create-head h2 {
    margin: 0 0 3px;
    color: #241914;
    font-family: "MusicOnJua", "Malgun Gothic", sans-serif;
    font-size: clamp(25px, 2vw, 39px);
    font-weight: 400;
    line-height: 1.08;
}
.sound-find-head p,
.sound-create-head p { margin: 0; color: #59615a; font-size: clamp(12px, .88vw, 16px); font-weight: 700; }

.sound-find-layout,
.sound-create-layout {
    display: grid;
    grid-template-columns: clamp(132px, 11.5vw, 190px) minmax(0, 1fr) clamp(145px, 13vw, 220px);
    gap: clamp(10px, 1vw, 18px);
    min-width: 0;
    min-height: 0;
}

.sound-find-palette,
.sound-create-palette,
.sound-find-guide,
.sound-create-guide {
    min-width: 0;
    min-height: 0;
    border: 1px solid #e9dfca;
    border-radius: 28px;
    background: rgba(255, 253, 247, .94);
    box-shadow: 0 10px 24px rgba(77, 66, 43, .09);
}

.sound-find-palette,
.sound-create-palette {
    display: flex;
    align-items: center;
    padding: clamp(10px, 1vw, 16px);
    flex-direction: column;
}
.sound-find-palette h3,
.sound-create-palette h3,
.sound-map-panel h3 { margin: 0; color: #2d743d; font-family: "MusicOnJua", sans-serif; font-size: clamp(18px, 1.3vw, 24px); font-weight: 400; }

.sound-find-palette .sound-find-count {
    min-width: 0;
    margin: 2px 0 7px;
    justify-content: center;
}
.sound-find-palette .sound-find-count strong { font-size: 25px; }
.sound-find-palette .sound-found-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: clamp(5px, .8vh, 10px);
    margin: 6px 0 0;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
}
.sound-find-palette .sound-found-list > span {
    display: grid;
    grid-template-columns: clamp(30px, 2.6vw, 42px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(6px, .6vw, 10px);
    flex: none;
    padding: 5px clamp(8px, .8vw, 13px);
    border: 2px solid #e0e2de;
    border-radius: 999px;
    background: #f3f3f1;
    filter: grayscale(1);
    opacity: .46;
}
.sound-find-palette .sound-found-list > span.is-found {
    border-color: #58b963;
    background: #f1fbe9;
    box-shadow: 0 5px 11px rgba(57, 137, 70, .14);
    filter: none;
    opacity: 1;
}
.sound-find-palette .sound-found-list .ui-asset { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.sound-find-palette .sound-found-list em { display: block; font-size: clamp(11px, .8vw, 14px); line-height: 1.2; text-align: left; }

.sound-find-palette .sound-map-next {
    width: 100%;
    min-height: 48px;
    margin-top: 9px;
    padding: 8px 10px;
    font-size: clamp(15px, 1.05vw, 19px);
    animation: sound-map-ready 1.3s ease-in-out infinite;
}
.sound-find-palette .sound-map-next b { font-size: 25px; line-height: .7; }

.sound-find-layout .sound-find-scene {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    border-width: 4px;
    border-radius: 30px;
}
.sound-find-layout .sound-hotspot {
    width: clamp(68px, 5.8vw, 102px);
    height: clamp(68px, 5.8vw, 102px);
    border-width: 4px;
    border-radius: 50%;
}

.sound-find-guide,
.sound-create-guide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 1.1vw, 18px);
    text-align: center;
    flex-direction: column;
}
.sound-find-guide__bubble {
    position: relative;
    width: 100%;
    padding: 16px 8px;
    border: 2px solid #eadfcd;
    border-radius: 50%;
    background: #fff;
    color: #31352f;
    font-size: clamp(12px, .85vw, 16px);
    font-weight: 800;
    line-height: 1.45;
    box-shadow: 0 8px 17px rgba(76, 62, 41, .08);
}
.sound-find-guide__bubble::after {
    position: absolute;
    right: 30%;
    bottom: -10px;
    width: 18px;
    height: 18px;
    border-right: 2px solid #eadfcd;
    border-bottom: 2px solid #eadfcd;
    background: #fff;
    content: '';
    transform: rotate(45deg);
}
.sound-find-guide__bubble strong { color: #319549; }
.sound-find-guide > img,
.sound-create-guide > img {
    width: 92%;
    max-height: 55%;
    margin-top: 14px;
    object-fit: contain;
    filter: drop-shadow(0 10px 8px rgba(64, 56, 42, .12));
    animation: sound-find-kuma 2.6s ease-in-out infinite;
}

.sound-create-pins {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(7px, .7vw, 10px);
    width: 100%;
    margin: auto 0;
}
.sound-create-pins .sound-pin {
    display: flex;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1;
    padding: 6px;
    border: 3px solid #cbe2bd;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff, #effbe7);
    color: #2e733d;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 6px 0 rgba(51, 137, 67, .14), 0 10px 18px rgba(51, 86, 55, .09);
    transition: transform .18s ease, border-color .18s ease;
}
.sound-create-pins .sound-pin:hover,
.sound-create-pins .sound-pin:focus-visible { outline: none; border-color: #43b458; transform: translateY(-3px) scale(1.03); }
.sound-create-pins .sound-pin .ui-asset { width: 58%; height: 58%; object-fit: contain; }
.sound-create-pins .sound-pin strong { margin-top: 1px; font-size: clamp(9px, .66vw, 12px); }
.sound-create-pins .sound-pin:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 4px); justify-self: center; }

.sound-create-sliders { display: grid; gap: 7px; width: 100%; margin-top: 12px; }
.sound-create-sliders label { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 5px; color: #5e685f; font-size: 11px; font-weight: 800; }
.sound-create-sliders input { min-width: 0; accent-color: #3bab54; }

.sound-map-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    padding: clamp(9px, .8vw, 13px);
    border: 1px solid #e9dfca;
    border-radius: 30px;
    background: rgba(255,255,255,.93);
    box-shadow: 0 10px 24px rgba(77, 66, 43, .09);
}
.sound-map-panel .map-toolbar { margin-bottom: 8px; }
.sound-map-panel .map-toolbar > div { display: flex; gap: 7px; }
.sound-map-panel .action-button { min-height: 40px; padding: 8px 13px; border-radius: 999px; font-size: 12px; }
.sound-map-panel .sound-map { width: 100%; height: 100%; min-height: 0; border: 3px solid #efd17a; border-radius: 24px; }
.sound-create-guide > p { min-height: 42px; margin: 10px 0; color: #397b48; font-size: 13px; font-weight: 800; line-height: 1.4; }
.sound-create-save { min-height: 45px; padding: 8px 15px; border: 0; border-radius: 999px; background: linear-gradient(#55c466, #36a54a); color: #fff; font-weight: 900; box-shadow: 0 5px 0 #267f38; cursor: pointer; }

@keyframes sound-map-ready {
    0%, 100% { transform: translateY(0); box-shadow: 0 5px 0 #237e36, 0 8px 18px rgba(35,126,54,.12); }
    50% { transform: translateY(-3px); box-shadow: 0 7px 0 #237e36, 0 13px 24px rgba(35,126,54,.2); }
}

@media (max-height: 780px) and (min-width: 761px) {
    .sound-find-head, .sound-create-head { min-height: 54px; }
    .sound-find-head h2, .sound-create-head h2 { font-size: clamp(22px, 1.75vw, 32px); }
    .sound-find-palette, .sound-create-palette, .sound-find-guide, .sound-create-guide { padding: 8px; border-radius: 22px; }
    .sound-find-guide > img, .sound-create-guide > img { max-height: 46%; }
    .sound-find-guide__bubble { padding-block: 11px; }
}

@media (max-width: 900px) {
    .sound-find-layout, .sound-create-layout { grid-template-columns: 120px minmax(0, 1fr); }
    .sound-find-guide, .sound-create-guide { display: none; }
}

@media (max-width: 760px) {
    .sound-find-stage, .sound-create-stage { height: auto; min-height: 100dvh; overflow: visible; }
    .sound-find-layout, .sound-create-layout { grid-template-columns: 1fr; }
    .sound-create-pins { grid-template-columns: repeat(5, 1fr); }
    .sound-create-pins .sound-pin:last-child:nth-child(odd) { grid-column: auto; width: 100%; }
    .sound-find-palette .sound-found-list { flex-direction: row; flex-wrap: wrap; }
    .sound-find-palette .sound-found-list > span { flex: 1 1 45%; }
    .sound-find-layout .sound-find-scene, .sound-map-panel .sound-map { min-height: 520px; }
    .sound-find-palette .sound-map-next { max-width: 320px; }
}

/* ===== 공용 활동 한 화면 컴팩트 스테이지 (구슬 길·리듬 두드리기·리듬 길·무지개 악보) ===== */
.activity-page .stage-card--compact {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(7px, .9vh, 12px);
    height: 100%;
    min-height: 0;
    padding: clamp(12px, 1.3vw, 20px) clamp(14px, 1.5vw, 24px);
    overflow: hidden;
}

.stage-compact-head { display: flex; align-items: center; gap: clamp(8px, 1vw, 16px); flex-wrap: wrap; }
.stage-compact-title { display: flex; flex: 1 1 280px; align-items: center; gap: 10px; min-width: 0; }
.stage-compact-title .badge, .stage-age-badge { white-space: nowrap; }
.stage-card--compact .stage-title { margin: 0; font-size: clamp(20px, 1.65vw, 30px); line-height: 1.1; white-space: nowrap; }
.stage-card--compact .stage-summary { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--muted); font-size: clamp(12px, .85vw, 15px); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.stage-age-badge { flex: none; }

.stage-card--compact .flow-strip { display: flex; flex: none; gap: 6px; margin: 0; }
.stage-card--compact .flow-step { min-height: 38px; padding: 6px 13px; border-radius: 999px; }
.stage-card--compact .flow-step strong { display: inline; margin: 0; font-size: clamp(13px, .95vw, 16px); }
.stage-card--compact .flow-step span { display: none; }

.stage-card--compact .teacher-toolbar { flex: none; gap: 7px; margin: 0 0 0 auto; padding: 7px 10px; }
.stage-card--compact .icon-button { min-height: 40px; padding: 6px 11px; }
.stage-card--compact .icon-button .ui-asset { width: 26px; height: 26px; }
.stage-card--compact [data-record-count] { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px; background: var(--content-color, var(--teal)); color: #fff; font-size: 12px; }

.stage-compact-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: clamp(7px, .9vh, 12px); min-height: 0; }
.stage-compact-body .setup-panel { display: flex; flex: none; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin: 0; padding: 8px 14px; }
.stage-compact-body .setup-field { display: flex; align-items: center; gap: 10px; }
.stage-compact-body .activity-layout { flex: 1 1 auto; min-height: 0; margin: 0; }
.stage-compact-body .activity-layout > section { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; scrollbar-width: thin; }
.stage-compact-body .activity-layout > section > h3 { margin-top: 0; }
.stage-compact-body .marble-layout { grid-template-columns: clamp(210px, 19vw, 300px) minmax(0, 1fr); }
.stage-compact-body .tile-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.stage-compact-body .path-tile-button { min-width: 0; }
/* 섹션 공통 overflow:auto(.activity-layout > section)보다 특이성을 높여 길판이 세로 공간에 맞게 축소되도록 함 */
.stage-compact-body .activity-layout > section.scene-panel { overflow: hidden; }
.board-viewport { display: grid; flex: 1 1 auto; place-items: center; min-height: 0; }
.stage-compact-body .path-board.advanced {
    width: 100%;
    max-width: 620px;
    max-height: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
    grid-template-columns: repeat(var(--grid-size), minmax(0, 1fr));
    grid-template-rows: repeat(var(--grid-size), minmax(0, 1fr));
}
.stage-compact-body .path-cell { min-width: 0; min-height: 0; aspect-ratio: auto; }

.stage-compact-body .walk-scene { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-height: 0; margin: 0; }
.stage-compact-body .walk-perspective { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
.stage-card--compact .walk-pad { min-height: clamp(40px, 5.6vh, 60px); }

.stage-compact-body .score-scene .score-board { display: grid; flex: 1 1 auto; align-items: center; min-height: 0; }

.stage-record-pop {
    position: absolute;
    right: clamp(12px, 1.5vw, 24px);
    bottom: clamp(50px, 7vh, 76px);
    z-index: 60;
    width: min(440px, calc(100% - 36px));
    max-height: 58%;
    margin: 0;
    overflow: auto;
    border: 2px solid #ead9ac;
    box-shadow: 0 26px 60px rgba(64, 48, 26, .3);
}
.stage-record-pop .output-tray { grid-template-columns: 1fr; }
.dock-head__actions { display: flex; align-items: center; gap: 8px; }

.stage-compact-status { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 0; margin: 0; }
.progress-mini { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ===== 선생님 모드 수업 도구 (체크리스트·메모·타이머) ===== */
.teacher-flow-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid #e7ddc6;
    border-radius: 14px;
    background: #fffaf0;
    font-size: 13px;
}
.teacher-flow-line > b { color: #8f6b2e; font-family: "MusicOnJua", "Malgun Gothic", sans-serif; font-weight: 400; }
.teacher-flow-line > span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid #eee3cb; border-radius: 999px; background: #fff; color: #6d6152; font-weight: 700; }
.teacher-flow-line > span strong { color: var(--play-color, #329a50); font-weight: 800; }
.teacher-flow-line > i { color: #c9bda1; font-style: normal; }
.teacher-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.teacher-checklist { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.teacher-checklist label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-weight: 700; line-height: 1.4; }
.teacher-checklist input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: #3ca75b; }
.teacher-checklist input:checked + span { color: #2d7d3e; }
.teacher-check-reset { margin-top: 10px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 700; cursor: pointer; }
.teacher-help-card [data-teacher-memo] { width: 100%; min-height: 132px; padding: 10px 12px; border: 1px solid #e4dcc8; border-radius: 12px; background: #fffdf6; font: inherit; line-height: 1.5; resize: vertical; }
.teacher-memo-saved:not([hidden]) { display: block; margin-top: 6px; color: #2d7d3e; font-weight: 800; }
.teacher-timer { display: grid; gap: 10px; justify-items: center; text-align: center; }
.teacher-timer > strong { color: #2d7d3e; font-family: "MusicOnJua", sans-serif; font-size: clamp(36px, 3vw, 48px); font-weight: 400; line-height: 1; }
.teacher-timer.is-done > strong { color: #d2493f; animation: teacher-timer-done .55s ease-in-out 3; }
.teacher-timer__presets, .teacher-timer__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.teacher-timer__presets button, .teacher-timer__controls button { padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-weight: 800; cursor: pointer; }
.teacher-timer__presets button.is-active { border-color: #3ca75b; background: #ecf8ec; color: #2d7d3e; }
.teacher-timer > p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; }

@keyframes teacher-timer-done {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* ===== 소리 꾸러미 셸 스타일을 전 활동 공통으로 통일 (진입 경로와 무관하게 동일한 화면) ===== */
.activity-page .topbar__meta { gap: 16px; }
.activity-page .topbar__meta .home-link,
.activity-page .topbar__meta .target-age { display: none; }
.activity-page .topbar__meta > a,
.activity-page .topbar__meta > button {
    height: 58px;
    min-height: 58px;
    padding: 0 22px;
    border: 2px solid #e6e4df;
    font-size: 17px;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(76, 62, 33, .1);
}
.activity-page .settings-link { gap: 9px; }
.activity-page .settings-link > span { min-height: 0; padding: 0; border: 0; background: transparent; font-size: 23px; }

.activity-page .content-button:not(.is-active) {
    filter: grayscale(.68) saturate(.32) brightness(1.03);
    opacity: .82;
    transition: filter .25s ease, opacity .25s ease, transform .2s ease;
}
.activity-page .content-button:not(.is-active):hover,
.activity-page .content-button:not(.is-active):focus-visible {
    filter: grayscale(.5) saturate(.46) brightness(1.02);
    opacity: .92;
}
.activity-page .content-button.is-active { filter: none; opacity: 1; }

/* ===== 구슬 길: 꽉 찬 타일 + 굴러가는 구슬 ===== */
.stage-compact-body .path-board.advanced { position: relative; gap: 6px; padding: 0; }
.stage-compact-body .path-cell { padding: 0; overflow: hidden; border-width: 2px; }
.path-cell .path-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.path-cell.is-start { background: #eaf7f3; }
.path-cell.is-goal { background: #fff1cf; }
.marble-ball {
    position: absolute;
    z-index: 6;
    width: calc(100% / var(--grid-size) * .44);
    aspect-ratio: 1;
    background: url("../images/ui/MAR-001_marble-basic_v01.png") center / contain no-repeat;
    filter: drop-shadow(0 7px 10px rgba(50, 40, 15, .38));
    transform: translate(-50%, -50%);
    transition: left .34s ease-in-out, top .34s ease-in-out;
    pointer-events: none;
}
.marble-ball.is-rolling { animation: marble-bounce .34s ease-in-out infinite; }
@keyframes marble-bounce {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -58%) scale(1.06); }
}
.validation-box.is-error {
    border: 2px solid #e2574a;
    background: #ffeceb;
    color: #a33027;
    animation: validation-shake .5s ease-in-out;
}
@keyframes validation-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.stage-compact-body .path-tile-button.is-active {
    border: 3px solid var(--content-color, var(--teal));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--content-color, var(--teal)) 18%, transparent);
}
.palette-hint {
    margin: 10px 0 0;
    color: #8a7c65;
    font-size: clamp(12px, .85vw, 14px);
    font-weight: 700;
    line-height: 1.5;
}

/* ===== 무지개 악보: 주사위 모드 ===== */
.dice-zone { display: grid; justify-items: center; gap: 10px; padding: clamp(10px, 1.4vh, 20px) 0; }
.dice-cube {
    padding: clamp(12px, 1.4vw, 20px);
    border: 3px solid #e6d9f2;
    border-radius: 26px;
    background: linear-gradient(180deg, #fff, #f6efff);
    cursor: pointer;
    box-shadow: 0 6px 0 #ddcdf0, 0 12px 24px rgba(94, 70, 140, .16);
    transition: transform .15s ease, box-shadow .15s ease;
}
.dice-cube:hover { transform: translateY(-3px); }
.dice-cube img { display: block; width: clamp(96px, 8.5vw, 150px); height: clamp(96px, 8.5vw, 150px); object-fit: contain; }
.dice-cube.is-rolling { animation: dice-shake .45s ease-in-out infinite; }
@keyframes dice-shake {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-9deg) translateY(-4px); }
    75% { transform: rotate(9deg) translateY(-2px); }
}
.dice-zone > p { margin: 0; color: #7a6a8f; font-size: clamp(12px, .9vw, 15px); font-weight: 700; text-align: center; line-height: 1.5; }
.dice-zone > p b { color: #7a5cc0; }
.note-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 2px solid color-mix(in srgb, var(--note-color, #8066c5) 45%, #fff);
    border-radius: 999px;
    background: color-mix(in srgb, var(--note-color, #8066c5) 12%, #fff);
    font-weight: 800;
    font-size: clamp(11px, .8vw, 14px);
    color: color-mix(in srgb, var(--note-color, #8066c5) 70%, #333);
}
.note-chip .ui-asset { width: 22px; height: 22px; }
.note-chip em { font-style: normal; }
.dice-legend { display: grid; gap: 6px; margin-top: 4px; }
.dice-legend__row {
    display: grid;
    grid-template-columns: clamp(34px, 2.8vw, 44px) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border: 2px solid #efe7f8;
    border-radius: 14px;
    background: #fdfbff;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.dice-legend__row > img { width: 100%; height: auto; object-fit: contain; }
.dice-legend__row > div { display: flex; flex-wrap: wrap; gap: 5px; }
.dice-legend__row.is-picked {
    border-color: #8b6cd0;
    background: #f3ecff;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(122, 92, 192, .2);
}

/* ===== 시각 선택 카드 (테마 배경·난이도 미니판·악기 아이콘) ===== */
.setup-panel--visual { gap: 8px 26px; }
.setup-panel--visual .setup-field { align-items: center; gap: 10px; }
.visual-options { display: flex; flex-wrap: wrap; gap: 8px; }
.visual-option {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 74px;
    padding: 7px 10px 6px;
    border: 2px solid #ecdfc2;
    border-radius: 16px;
    background: #fffdf6;
    cursor: pointer;
    box-shadow: 0 3px 0 #efe3c8;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.visual-option:hover { transform: translateY(-2px); }
.visual-option b {
    color: #6d6152;
    font-family: "MusicOnJua", "Malgun Gothic", sans-serif;
    font-size: clamp(12px, .85vw, 15px);
    font-weight: 400;
}
.visual-option--photo img {
    width: clamp(64px, 5.4vw, 92px);
    height: clamp(40px, 3.4vw, 58px);
    border-radius: 10px;
    object-fit: cover;
}
.visual-option--icon .ui-asset { width: clamp(38px, 3.2vw, 52px); height: clamp(38px, 3.2vw, 52px); object-fit: contain; }
.mini-grid {
    display: grid;
    grid-template-columns: repeat(var(--n), 1fr);
    gap: 2px;
    width: clamp(36px, 3vw, 48px);
    aspect-ratio: 1;
}
.mini-grid span { border-radius: 2px; background: #e9ddba; }
.visual-option.is-active {
    border-color: var(--content-color, var(--teal));
    background: color-mix(in srgb, var(--content-color, var(--teal)) 10%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--content-color, var(--teal)) 20%, transparent), 0 3px 0 color-mix(in srgb, var(--content-color, var(--teal)) 38%, #efe3c8);
}
.visual-option.is-active b { color: color-mix(in srgb, var(--content-color, var(--teal)) 78%, #333); }
.visual-option.is-active .mini-grid span { background: color-mix(in srgb, var(--content-color, var(--teal)) 55%, #fff); }

/* ===== 설정 줄·세그먼트를 유아 컨셉으로 ===== */
.stage-card--compact .setup-panel {
    border: 2px solid #ead9ac;
    border-radius: 20px;
    background: #fffaf0;
}
.stage-card--compact .setup-field > span {
    color: #8f6b2e;
    font-family: "MusicOnJua", "Malgun Gothic", sans-serif;
    font-size: clamp(15px, 1.05vw, 19px);
    font-weight: 400;
}
.stage-card--compact .segment {
    min-height: 40px;
    padding: 8px 15px;
    border: 2px solid #ecdfc2;
    background: #fffdf6;
    color: #6d6152;
    font-family: "MusicOnJua", "Malgun Gothic", sans-serif;
    font-size: clamp(14px, .95vw, 17px);
    font-weight: 400;
    box-shadow: 0 3px 0 #efe3c8;
    transition: transform .15s ease, box-shadow .15s ease;
}
.stage-card--compact .segment:hover { transform: translateY(-1px); }
.stage-card--compact .segment.is-active {
    border-color: transparent;
    background: linear-gradient(180deg, color-mix(in srgb, var(--content-color, var(--teal)) 82%, #fff), var(--content-color, var(--teal)));
    color: #fff;
    box-shadow: 0 3px 0 color-mix(in srgb, var(--content-color, var(--teal)) 60%, #4b3a1a);
}
.stage-card--compact .flow-step {
    border: 2px solid #ecdfc2;
    background: #fffdf6;
    font-family: "MusicOnJua", "Malgun Gothic", sans-serif;
    box-shadow: 0 3px 0 #efe3c8;
}
.stage-card--compact .flow-step strong { font-weight: 400; }
.stage-card--compact .flow-step.is-current {
    border-color: transparent;
    background: linear-gradient(180deg, color-mix(in srgb, var(--content-color, var(--teal)) 82%, #fff), var(--content-color, var(--teal)));
    box-shadow: 0 3px 0 color-mix(in srgb, var(--content-color, var(--teal)) 60%, #4b3a1a);
}
.stage-card--compact .flow-step.is-current strong { color: #fff; }

@media (max-width: 900px) {
    .teacher-tools-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .activity-page .stage-card--compact { height: auto; overflow: visible; }
    .stage-compact-head { align-items: flex-start; }
    .stage-card--compact .stage-title,
    .stage-card--compact .stage-summary { white-space: normal; }
    .stage-compact-body { display: block; }
    .stage-compact-body .activity-layout > section { display: block; overflow: visible; }
    .stage-compact-body .marble-layout { grid-template-columns: 1fr; }
    .board-viewport { display: block; }
    .stage-compact-body .path-board.advanced { max-height: none; }
    .stage-compact-body .walk-scene { display: block; }
    .stage-compact-body .walk-perspective { min-height: 420px; overflow: visible; }
    .stage-record-pop { position: static; width: auto; max-height: none; }
    .stage-compact-status { flex-wrap: wrap; }
}