/* SCENE2-1 : 같은 자음 찾아 합치기 - 요소별 독립 레이어 구조 v0.34 */
    .scene2-base-return {
      background: linear-gradient(160deg, #d9ffd0, #89e9ff);
    }

    .scene21-panel {
      position: absolute;
      inset: 0;
      overflow: hidden;
      padding: 0;
      isolation: isolate;
    }

    .scene21-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .scene21-layer-bg {
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(circle at 14% 78%, rgba(255,244,130,0.24), transparent 20%),
        radial-gradient(circle at 56% 48%, rgba(112,245,255,0.22), transparent 24%),
        radial-gradient(circle at 90% 22%, rgba(147,255,185,0.18), transparent 22%);
    }

    .scene21-layer-bg::before,
    .scene21-layer-bg::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      border: 2px dashed rgba(255,255,255,0.22);
      pointer-events: none;
    }

    .scene21-layer-bg::before {
      width: 30%;
      height: 18%;
      left: 32%;
      top: 35%;
      transform: rotate(-12deg);
    }

    .scene21-layer-bg::after {
      width: 22%;
      height: 13%;
      right: -5%;
      bottom: 4%;
      transform: rotate(18deg);
    }

    .scene21-layer-hud {
      z-index: 5;
      pointer-events: none;
      display: grid;
      bottom: auto;
      height: 17%;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      padding: clamp(7px, 0.9vw, 13px) clamp(10px, 1.4vw, 20px) 0;
    }

    .scene21-stage-badge,
    .scene21-instruction {
      border: 3px solid rgba(255,255,255,0.86);
      background: rgba(255,255,255,0.90);
      color: #153d6d;
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
      font-weight: 900;
      box-shadow: 0 5px 0 rgba(27, 84, 120, 0.28);
    }

    .scene21-stage-badge {
      min-width: clamp(104px, 11vw, 170px);
      padding: 0.42em 0.8em;
      border-radius: 999px;
      font-size: clamp(13px, 1.35vw, 21px);
      text-align: center;
    }

    .scene21-stage-badge { justify-self: start; }
    .scene21-hud-spacer { justify-self: end; min-width: clamp(104px, 11vw, 170px); }

    .scene21-instruction {
      justify-self: center;
      max-width: 96%;
      padding: 0.42em 1em;
      border-radius: 999px;
      font-size: clamp(13px, 1.42vw, 22px);
      text-align: center;
      white-space: nowrap;
    }

    .scene21-complete-burger-image {
      width: clamp(28px, 3.4vw, 52px);
      height: clamp(28px, 3.4vw, 52px);
      object-fit: contain;
      filter: drop-shadow(0 4px 3px rgba(65,58,26,.28));
    }

    .scene21-layer-target,
    .scene21-layer-drop,
    .scene21-layer-choices {
      top: 17%;
      bottom: 4%;
      width: auto;
      height: auto;
      pointer-events: none;
      display: grid;
      place-items: center;
    }

    .scene21-layer-target { z-index: 10; left: 2.5%; right: 68%; }
    .scene21-layer-drop { z-index: 12; left: 34%; right: 42%; }
    .scene21-layer-choices { z-index: 14; left: 61%; right: 2.5%; }

    .scene21-target-card,
    .scene21-drop-zone {
      width: min(92%, 310px);
      height: min(82%, 330px);
      min-height: 145px;
      border-radius: 30px;
      border: 5px solid rgba(255,255,255,0.88);
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
      box-shadow: 0 10px 18px rgba(0,0,0,0.22), inset 0 0 0 5px rgba(255,255,255,0.24);
    }

    .scene21-target-card {
      background: linear-gradient(155deg, rgba(255,245,151,0.96), rgba(121,232,255,0.92));
    }

    .scene21-target-label,
    .scene21-drop-label {
      position: absolute;
      top: 6%;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      font-size: clamp(12px, 1.25vw, 19px);
      font-weight: 900;
      color: #17466f;
      background: rgba(255,255,255,0.78);
      border-radius: 999px;
      padding: 0.28em 0.75em;
    }

    .scene21-target-letter,
    .scene21-merged-letter {
      font-size: clamp(82px, 11vw, 170px);
      font-weight: 900;
      color: #143d83;
      -webkit-text-stroke: 2px rgba(255,255,255,0.92);
      text-shadow: 0 6px 0 rgba(54,137,172,0.30), 0 0 18px rgba(255,255,255,0.80);
      line-height: 1;
    }

    .scene21-drop-zone {
      pointer-events: auto;
      cursor: pointer;
      background:
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.15) 0 10px, rgba(255,255,255,0.03) 10px 20px),
        linear-gradient(155deg, rgba(145,255,190,0.72), rgba(111,201,255,0.72));
      color: #1d5974;
      touch-action: manipulation;
      transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
    }

    .scene21-drop-zone::after {
      content: "＋";
      font-size: clamp(58px, 7vw, 105px);
      font-weight: 900;
      color: rgba(255,255,255,0.76);
      text-shadow: 0 4px 0 rgba(39,120,138,0.24);
    }

    .scene21-drop-zone.is-ready,
    .scene21-drop-zone.is-over {
      transform: scale(1.045);
      filter: brightness(1.10);
      box-shadow: 0 0 28px rgba(255,246,132,0.94), inset 0 0 0 6px rgba(255,255,255,0.34);
    }

    .scene21-drop-zone.is-correct::after,
    .scene21-drop-zone.is-complete::after { display: none; }

    .scene21-merged-letter {
      display: none;
    }

    .scene21-drop-zone.is-correct .scene21-merged-letter {
      display: block;
      animation: scene21MergedPop 700ms cubic-bezier(.2,.9,.22,1.25) both;
    }

    @keyframes scene21MergedPop {
      0% { transform: scale(.25) rotate(-12deg); opacity: 0; }
      58% { transform: scale(1.18) rotate(3deg); opacity: 1; }
      100% { transform: scale(1) rotate(0); opacity: 1; }
    }

    .scene21-choice-grid {
      pointer-events: auto;
      width: 100%;
      height: auto;
      max-height: 100%;
      display: grid;
      grid-template-columns: repeat(var(--scene21-cols, 2), minmax(0, 1fr));
      grid-template-rows: repeat(var(--scene21-rows, 1), clamp(58px, 9vh, 92px));
      grid-auto-rows: 0;
      gap: clamp(7px, 0.85vw, 13px);
      place-content: center;
      align-self: center;
    }

    .scene21-choice {
      min-width: 0;
      min-height: 58px;
      border: 4px solid rgba(255,255,255,0.88);
      border-radius: 21px;
      background:
        repeating-linear-gradient(-11deg, rgba(255,255,255,0.20) 0 4px, rgba(255,255,255,0.02) 4px 10px),
        linear-gradient(150deg, var(--choice-a, #fff3a5), var(--choice-b, #9fefff));
      color: #14345f;
      box-shadow: 0 6px 0 rgba(28,76,107,0.34), 0 8px 12px rgba(0,0,0,0.16);
      font-size: clamp(31px, 4.2vw, 65px);
      line-height: 1;
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
      font-weight: 900;
      cursor: grab;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      transition: transform 140ms ease, filter 140ms ease, opacity 140ms ease;
    }

    .scene21-choice:hover,
    .scene21-choice:focus-visible {
      transform: translateY(-3px) scale(1.035);
      filter: brightness(1.09);
      outline: none;
    }

    .scene21-choice.is-drag-source { opacity: .28; }
    .scene21-choice.is-selected { box-shadow: 0 0 22px rgba(255,245,118,.95), 0 6px 0 rgba(28,76,107,.34); transform: scale(1.04); }
    .scene21-choice.is-wrong { animation: scene21Wrong 430ms ease; }

    @keyframes scene21Wrong {
      0%,100% { transform: translateX(0); }
      25% { transform: translateX(-8px) rotate(-2deg); }
      50% { transform: translateX(8px) rotate(2deg); }
      75% { transform: translateX(-5px); }
    }

    .scene21-layer-drag {
      z-index: 30;
      pointer-events: none;
      overflow: visible;
    }

    .scene21-drag-clone,
    .scene21-merge-piece {
      position: fixed;
      display: grid;
      place-items: center;
      border: 4px solid rgba(255,255,255,0.92);
      border-radius: 22px;
      background: linear-gradient(150deg, #fff3a5, #9fefff);
      color: #14345f;
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
      font-weight: 900;
      line-height: 1;
      box-shadow: 0 11px 22px rgba(0,0,0,0.28), 0 0 18px rgba(255,245,130,0.66);
      transform: translate(-50%, -50%) scale(1.08);
      pointer-events: none;
      z-index: 9999;
    }

    .scene21-merge-piece {
      position: absolute;
      transform: none;
      z-index: 2;
    }

    .scene21-layer-feedback {
      z-index: 20;
      pointer-events: none;
      display: grid;
      place-items: center;
    }

    .scene21-feedback {
      position: absolute;
      bottom: 3%;
      left: 50%;
      transform: translateX(-50%) translateY(10px);
      padding: .48em 1.05em;
      border-radius: 999px;
      border: 3px solid rgba(255,255,255,.88);
      background: rgba(5,37,81,.88);
      color: #fff6a0;
      font-size: clamp(13px, 1.45vw, 22px);
      font-weight: 900;
      opacity: 0;
      transition: opacity 160ms ease, transform 160ms ease;
      white-space: nowrap;
    }

    .scene21-feedback.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    .scene21-complete {
      position: absolute;
      inset: 8% 12%;
      z-index: 40;
      pointer-events: auto;
      display: none;
      place-items: center;
      text-align: center;
      border: 5px solid rgba(255,255,255,.90);
      border-radius: 34px;
      background: linear-gradient(155deg, rgba(255,246,145,.96), rgba(123,238,255,.95), rgba(144,255,184,.94));
      box-shadow: 0 18px 35px rgba(0,0,0,.32), inset 0 0 0 7px rgba(255,255,255,.28);
      color: #153d6d;
      font-family: "NanumSquareRound", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    }

    .scene21-complete.show { display: grid; animation: scene21CompleteIn 520ms ease both; }
    @keyframes scene21CompleteIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }

    .scene21-complete h3 { margin: 0 0 .2em; font-size: clamp(30px, 4.2vw, 64px); }
    .scene21-complete p { margin: .25em 0 .8em; font-size: clamp(17px, 2.2vw, 31px); font-weight: 900; }
    .scene21-complete-burgers { display: flex; justify-content: center; gap: .35em; flex-wrap: wrap; margin: .4em auto .9em; max-width: 80%; }
    .scene21-restart { pointer-events: auto; min-height: auto; font-size: clamp(17px, 2.1vw, 30px); padding: .55em 1.2em; }

    @media (max-width: 820px), (max-height: 520px) {
      .scene21-layer-hud { padding: 5px 8px 0; }
      .scene21-stage-badge { min-width: 82px; padding: .32em .55em; font-size: clamp(11px, 2.4vw, 15px); }
      .scene21-hud-spacer { min-width: 82px; }
      .scene21-instruction { font-size: clamp(10px, 2.2vw, 14px); padding: .32em .65em; }
      .scene21-layer-target, .scene21-layer-drop, .scene21-layer-choices { top: 19%; bottom: 3%; }
      .scene21-layer-target { left: 1.5%; right: 70%; }
      .scene21-layer-drop { left: 32%; right: 44%; }
      .scene21-layer-choices { left: 59%; right: 1.5%; }
      .scene21-target-card, .scene21-drop-zone { width: 95%; height: 82%; min-height: 100px; border-radius: 20px; border-width: 4px; }
      .scene21-target-letter, .scene21-merged-letter { font-size: clamp(54px, 11vw, 92px); }
      .scene21-target-label, .scene21-drop-label { font-size: clamp(9px, 2vw, 12px); }
      .scene21-choice-grid { gap: 5px; grid-auto-rows: minmax(40px, 1fr); }
      .scene21-choice { min-height: 40px; border-width: 3px; border-radius: 14px; font-size: clamp(23px, 5vw, 42px); }
      .scene21-feedback { bottom: 1.5%; font-size: clamp(10px, 2.3vw, 14px); }
    }