/* ============================
   멜로디 배치 테스트 - 스타일
   ============================ */
:root {
    --primary: #6C63FF;
    --primary-l: #8B85FF;
    --accent: #43C6AC;
    --pink: #FF6584;
    --gold: #F8B500;
    --exact: #22c55e;
    --near: #f59e0b;
    --bad: #ef4444;

    --zone-high-bg: rgba(108,99,255,0.06);
    --zone-mid-bg:  rgba(67,198,172,0.06);
    --zone-low-bg:  rgba(255,101,132,0.06);
    --zone-high-border: rgba(108,99,255,0.18);
    --zone-mid-border:  rgba(67,198,172,0.18);
    --zone-low-border:  rgba(255,101,132,0.18);

    --header-h: 56px;
    --palette-h: 62px;
    --yaxis-w: 56px;
    --radius: 12px;
    --trans: 0.2s cubic-bezier(0.4,0,0.2,1);
}

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

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    font-family: 'Noto Sans KR', sans-serif;
    background: #f0f2ff;
    color: #1a1a2e;
    user-select: none;
}

/* ====== 화면 전환 ====== */
.screen { display: none; width:100%; height:100%; }
.screen.active { display: flex; flex-direction: column; }
@keyframes fadeUp {
    from { opacity:0; transform:translateY(16px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ============================
   홈 화면
   ============================ */
#screen-home {
    background: linear-gradient(135deg,#667eea,#764ba2);
    justify-content: center; align-items: center;
    position: relative; overflow: hidden;
}
.home-bg { position:absolute; inset:0; pointer-events:none; }
.orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:0.3; }
.o1 { width:500px;height:500px;background:#a78bfa;top:-150px;left:-150px; }
.o2 { width:350px;height:350px;background:#60a5fa;bottom:-80px;right:-80px; }
.o3 { width:250px;height:250px;background:#f472b6;top:50%;left:55%;transform:translate(-50%,-50%); }

.home-center {
    position: relative; z-index:1;
    display:flex; flex-direction:column; align-items:center; gap:20px;
    animation: fadeUp 0.5s ease;
}
.home-logo {
    width:80px;height:80px;background:rgba(255,255,255,0.2);
    border-radius:24px; display:flex;align-items:center;justify-content:center;
    font-size:2rem;color:white;
    border:2px solid rgba(255,255,255,0.3);
    backdrop-filter:blur(10px);
}
.home-title { font-size:2.2rem;font-weight:900;color:white;letter-spacing:-0.5px; }
.home-sub { font-size:1rem;color:rgba(255,255,255,0.8); }

.name-wrap input {
    width:320px;padding:14px 24px;
    border-radius:50px;border:2px solid rgba(255,255,255,0.35);
    background:rgba(255,255,255,0.18);backdrop-filter:blur(8px);
    color:white;font-size:1rem;font-family:inherit;
    outline:none;text-align:center;
    transition: var(--trans);
}
.name-wrap input::placeholder { color:rgba(255,255,255,0.6); }
.name-wrap input:focus { border-color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.28); }

.btn-start {
    padding:16px 56px;
    background:white;color:var(--primary);
    border:none;border-radius:50px;
    font-size:1.1rem;font-weight:700;font-family:inherit;
    cursor:pointer;transition:var(--trans);
    box-shadow:0 8px 24px rgba(0,0,0,0.2);
}
.btn-start:disabled { opacity:0.45;cursor:not-allowed; }
.btn-start:not(:disabled):hover { transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.25); }

.btn-records-link {
    background:none;border:none;
    color:rgba(255,255,255,0.75);font-size:0.9rem;font-family:inherit;
    cursor:pointer;transition:var(--trans);
}
.btn-records-link:hover { color:white; }

/* ============================
   테스트 화면 레이아웃
   ============================ */
#screen-test {
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* 헤더 */
.test-header {
    height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; gap:16px;
    background: white;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    flex-shrink: 0;
    z-index: 100;
}

.header-left { display:flex;align-items:center;gap:10px;min-width:160px; }
.hd-name { font-weight:700;font-size:1rem; }
.hd-level {
    font-size:0.75rem;font-weight:700;color:white;
    background:var(--primary);padding:3px 12px;border-radius:20px;
}
.header-center { flex:1;display:flex;justify-content:center; }
.header-right { display:flex;align-items:center;gap:14px;min-width:160px;justify-content:flex-end; }
.hd-stat { display:flex;align-items:center;gap:6px;font-size:0.9rem;font-weight:600;color:#64748b; }

/* 오디오 플레이어 — 헤더 높이에 맞게 컴팩트 */
.audio-player {
    display:flex;align-items:center;gap:10px;
    padding:0;
    max-width:380px;
    width:100%;
}
.audio-play-section {
    display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;
}
.audio-play-label {
    font-size:0.6rem;font-weight:700;color:var(--primary);
    white-space:nowrap;letter-spacing:0.3px;
}
.btn-play {
    width:36px;height:36px;flex-shrink:0;
    background:linear-gradient(135deg,var(--primary),var(--pink));
    border:none;border-radius:50%;color:white;font-size:1rem;
    cursor:pointer;transition:var(--trans);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 3px 10px rgba(108,99,255,0.4);
    animation: pulse-play 2s infinite;
}
@keyframes pulse-play {
    0%,100%{ box-shadow:0 3px 10px rgba(108,99,255,0.4); transform:scale(1); }
    50%{ box-shadow:0 4px 16px rgba(108,99,255,0.65); transform:scale(1.06); }
}
.btn-play:hover { transform:scale(1.1) !important; }
.btn-play.playing {
    background:linear-gradient(135deg,var(--pink),#ff8fa3);
    animation: none;
    box-shadow:0 3px 10px rgba(255,101,132,0.45);
    transform:scale(1) !important;
}

.audio-prog-wrap { flex:1;display:flex;flex-direction:column;gap:3px;min-width:120px;max-width:200px; }
.wave-mini { display:flex;align-items:center;gap:2px;height:18px;overflow:hidden; }
.wave-mini-bar {
    width:3px;height:4px;background:var(--primary);
    border-radius:2px;opacity:0.5;transition:height 0.1s;flex-shrink:0;
}
.wave-mini-bar.on { opacity:1; }
.audio-prog-bar {
    height:5px;background:#e2e8f0;border-radius:3px;overflow:hidden;cursor:pointer;
}
.audio-prog-fill { height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:3px;transition:width 0.1s linear; }
.audio-times { display:flex;justify-content:space-between;font-size:0.7rem;color:#94a3b8; }

.btn-replay-sm {
    position:relative;width:28px;height:28px;flex-shrink:0;
    background:#f1f5f9;border:none;border-radius:50%;
    color:#64748b;font-size:0.75rem;cursor:pointer;transition:var(--trans);
    display:flex;align-items:center;justify-content:center;
}
.btn-replay-sm:hover { background:var(--primary);color:white; }
.replay-badge {
    position:absolute;top:-4px;right:-4px;
    min-width:16px;height:16px;background:var(--pink);
    border-radius:8px;font-size:0.65rem;font-weight:700;color:white;
    display:flex;align-items:center;justify-content:center;padding:0 3px;
}
.replay-badge.hidden { display:none; }

/* 제출 버튼 */
.btn-submit {
    padding:8px 22px;
    background:linear-gradient(135deg,var(--primary),var(--primary-l));
    color:white;border:none;border-radius:50px;
    font-size:0.9rem;font-weight:700;font-family:inherit;
    cursor:pointer;transition:var(--trans);
    box-shadow:0 3px 12px rgba(108,99,255,0.35);
}
.btn-submit:disabled { opacity:0.4;cursor:not-allowed; }
.btn-submit:not(:disabled):hover { transform:translateY(-2px);box-shadow:0 6px 18px rgba(108,99,255,0.45); }

/* ============================
   배치 영역 (핵심!)
   ============================ */
.placement-wrap {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    min-height: 0; /* flex 자식이 옜그러지지 않도록 */
}

/* Y축 - 추상적 화살표만 */
.y-axis {
    width: var(--yaxis-w);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: white;
    border-right: 2px solid #e8eaef;
    z-index: 10;
    padding: 16px 0;
    gap: 0;
}
.y-axis-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 600;
}
.y-axis-arrow i { font-size: 0.9rem; color: #cbd5e1; }
.y-axis-arrow.up  { justify-content: flex-start; }
.y-axis-arrow.down { flex-direction: column-reverse; }
.y-axis-mid-line {
    flex: 1;
    width: 2px;
    background: repeating-linear-gradient(to bottom, #e2e8f0 0px, #e2e8f0 4px, transparent 4px, transparent 8px);
    margin: 8px 0;
    border-radius: 1px;
}

/* 배치 스크롤 래퍼 — 가로 스크롤 허용 */
.placement-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    /* 스크롤바 항상 보이게 */
    scrollbar-width: thin;
    scrollbar-color: var(--primary) #e2e8f0;
}
.placement-scroll::-webkit-scrollbar { height: 8px; }
.placement-scroll::-webkit-scrollbar-track { background: #e8eaef; }
.placement-scroll::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }

/* 배치 캔버스 — 고정 너비로 가로 스크롤 */
.placement-canvas {
    position: relative;
    cursor: crosshair;
    overflow: visible;
    /* 중성 세로 선 하나만 */
    background: white;
    background-image: linear-gradient(to bottom, transparent calc(50% - 1px), #e8eaef calc(50% - 1px), #e8eaef calc(50% + 1px), transparent calc(50% + 1px));
    height: 100%;
    min-width: 100%;
}

/* 구역/구분선 제거 후 빈 캔버스 배경 */
/* (zone, zone-divider 클래스 더이상 사용 안 함) */

/* 앵커 short 타입: 작아서 음이름만 표시 (자물쇠 숨김) */
.placed-obj.locked.type-short .obj-lock-icon { display: none; }
.placed-obj.locked.type-short .obj-lock-note { font-size: 0.72rem; }

/* 배치된 오브제 */
.placed-obj {
    position: absolute;
    cursor: grab;
    transition: box-shadow 0.15s, transform 0.15s;
    z-index: 20;
    touch-action: none;
}
.placed-obj:hover { z-index: 30; }
.placed-obj.dragging { cursor: grabbing; opacity: 0.85; z-index: 50; transform: scale(1.08); }

/* 오브제 모양 — 1.5배 */
.placed-obj.type-normal .obj-body {
    width: 60px; height: 60px;
    background: linear-gradient(135deg,var(--primary),var(--primary-l));
    border-radius: 14px;
    box-shadow: 0 5px 16px rgba(108,99,255,0.5);
}
.placed-obj.type-short .obj-body {
    width: 36px; height: 36px;
    background: linear-gradient(135deg,var(--accent),#3aafad);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(67,198,172,0.5);
}
.placed-obj.type-long .obj-body {
    width: 96px; height: 36px;
    background: linear-gradient(135deg,var(--pink),#ff8fa3);
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(255,101,132,0.5);
}
.placed-obj:hover .obj-body { filter: brightness(1.12); }
.placed-obj.dragging .obj-body { box-shadow: 0 10px 28px rgba(0,0,0,0.28); }

/* 삭제 버튼 */
.obj-del {
    position: absolute;
    top: -10px; right: -10px;
    width: 24px; height: 24px;
    background: #ef4444;
    border-radius: 50%;
    display: none;
    align-items: center; justify-content: center;
    font-size: 0.72rem; color: white;
    cursor: pointer;
    border: 2px solid white;
    z-index: 5;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(239,68,68,0.4);
}
.placed-obj:hover .obj-del { display: flex; }

/* 순서 번호 */
.obj-num {
    position: absolute;
    top: -14px; left: 50%;
    transform: translateX(-50%);
    background: rgba(26,26,46,0.8);
    color: white; font-size: 0.72rem;
    font-weight: 700; padding: 2px 7px;
    border-radius: 7px; white-space: nowrap;
    pointer-events: none;
}

/* ============================
   오브제 선택 바 — 멜로디 듣기 바로 아래, 배치 스페이스 위
   ============================ */
.palette-bar {
    height: var(--palette-h);
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 0 16px;
    background: white;
    border-bottom: 2px solid #e8eaef;
    flex-shrink: 0;
    z-index: 100;
    overflow: hidden;
}
.palette-title { font-size:0.72rem;color:#94a3b8;white-space:nowrap;flex-shrink:0; }
.palette-items { display:flex;gap:6px;flex-shrink:0; }
.pal-item {
    display:flex;flex-direction:row;align-items:center;gap:8px;
    padding:6px 14px;
    background:#f8f9ff;border:2px solid #e2e8f0;
    border-radius:10px;cursor:pointer;transition:var(--trans);
    height:44px;
}
.pal-item:hover,.pal-item.active {
    border-color:var(--primary);background:#f0f0ff;
    box-shadow:0 2px 8px rgba(108,99,255,0.15);
}
.pal-item.active { background:#e8e6ff; }
.pal-item span { font-size:0.78rem;font-weight:600;color:#475569;white-space:nowrap; }

.pal-obj { pointer-events:none;flex-shrink:0; }
.pal-obj.normal-obj { width:28px;height:28px;background:linear-gradient(135deg,var(--primary),var(--primary-l));border-radius:7px; }
.pal-obj.short-obj  { width:20px;height:20px;background:linear-gradient(135deg,var(--accent),#3aafad);border-radius:50%; }
.pal-obj.long-obj   { width:44px;height:18px;background:linear-gradient(135deg,var(--pink),#ff8fa3);border-radius:9px; }

.palette-info { margin-left:0;font-size:0.78rem;color:#64748b;display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0; }
.btn-clear-sm {
    background:#fee2e2;color:#ef4444;border:none;
    padding:4px 10px;border-radius:6px;font-size:0.8rem;font-family:inherit;cursor:pointer;transition:var(--trans);
}
.btn-clear-sm:hover { background:#ef4444;color:white; }

/* ============================
   결과 화면
   ============================ */
#screen-result {
    background: linear-gradient(160deg,#f0f2ff,#fdf2f8);
    justify-content: center; align-items: center;
    overflow-y: auto;
}
.result-outer { width:100%;max-width:680px;padding:24px;margin:auto; }
.result-card {
    background:white;border-radius:24px;
    padding:36px 32px;
    box-shadow:0 20px 60px rgba(108,99,255,0.15);
    animation: fadeUp 0.4s ease;
}
.result-icon-wrap {
    width:72px;height:72px;border-radius:50%;
    background:linear-gradient(135deg,var(--gold),#ffa500);
    display:flex;align-items:center;justify-content:center;
    font-size:1.8rem;color:white;margin:0 auto 16px;
    box-shadow:0 6px 20px rgba(248,181,0,0.4);
    animation:bounce 0.5s ease;
}
@keyframes bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.result-title { font-size:1.7rem;font-weight:900;text-align:center;margin-bottom:6px; }
.result-sub { text-align:center;color:#64748b;margin-bottom:24px; }

.result-metrics { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px; }
.rm-card {
    background:#f8f9ff;border-radius:12px;
    padding:16px 8px;text-align:center;
    border:2px solid transparent;
}
.rm-card.primary { border-color:var(--primary); }
.rm-val { font-size:1.6rem;font-weight:900;color:var(--primary);margin-bottom:4px; }
.rm-card.primary .rm-val { font-size:2rem; }
.rm-label { font-size:0.75rem;color:#64748b;font-weight:600; }

.acc-section { margin-bottom:18px; }
.acc-row { display:flex;align-items:center;gap:10px;margin-bottom:8px; }
.acc-lbl { min-width:110px;font-size:0.8rem;font-weight:600; }
.acc-lbl.exact { color:var(--exact); }
.acc-lbl.near  { color:var(--near); }
.acc-lbl.bad   { color:var(--bad); }
.acc-bar-bg { flex:1;height:12px;background:#f1f5f9;border-radius:6px;overflow:hidden; }
.acc-bar { height:100%;border-radius:6px;width:0%;transition:width 0.9s ease; }
.exact-bar { background:linear-gradient(90deg,var(--exact),#4ade80); }
.near-bar  { background:linear-gradient(90deg,var(--near),#fbbf24); }
.bad-bar   { background:linear-gradient(90deg,var(--bad),#f87171); }
.acc-num { min-width:24px;font-size:0.88rem;font-weight:700;text-align:right; }

.result-stats-row { display:flex;gap:8px;margin-bottom:20px; }
.rs-item {
    flex:1;text-align:center;padding:14px 6px;
    background:#f8f9ff;border-radius:10px;
}
.rs-item i { color:var(--primary);font-size:1rem;display:block;margin-bottom:6px; }
.rs-val { font-size:1rem;font-weight:700;margin-bottom:2px; }
.rs-lbl { font-size:0.7rem;color:#94a3b8; }

.result-btns { display:flex;gap:10px;justify-content:center;flex-wrap:wrap; }
.btn-retry {
    padding:12px 28px;background:#f1f5f9;color:#475569;
    border:none;border-radius:50px;font-size:0.92rem;font-weight:600;font-family:inherit;cursor:pointer;transition:var(--trans);
}
.btn-retry:hover { background:#e2e8f0; }
.btn-save {
    padding:12px 28px;
    background:linear-gradient(135deg,var(--primary),var(--primary-l));
    color:white;border:none;border-radius:50px;font-size:0.92rem;font-weight:600;font-family:inherit;cursor:pointer;transition:var(--trans);
    box-shadow:0 4px 14px rgba(108,99,255,0.35);
}
.btn-save:hover { transform:translateY(-2px); }
.btn-save:disabled { opacity:0.5;cursor:not-allowed; }
.btn-next-level {
    padding:12px 28px;
    background:linear-gradient(135deg,var(--exact),#16a34a);
    color:white;border:none;border-radius:50px;font-size:0.92rem;font-weight:600;font-family:inherit;cursor:pointer;transition:var(--trans);
    box-shadow:0 4px 14px rgba(34,197,94,0.35);
    animation:pulse-btn 1.5s infinite;
}
@keyframes pulse-btn {
    0%,100%{box-shadow:0 4px 14px rgba(34,197,94,0.35)}
    50%{box-shadow:0 4px 24px rgba(34,197,94,0.6)}
}
.btn-next-level:hover { transform:translateY(-2px); }

/* ============================
   기록 화면
   ============================ */
#screen-records { overflow-y:auto; }
.rec-wrap { max-width:900px;margin:0 auto;padding:0 24px 40px; }
.rec-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 0;border-bottom:2px solid #e2e8f0;margin-bottom:20px;
    position:sticky;top:0;background:white;z-index:10;
}
.rec-header h2 { font-size:1.3rem;font-weight:800; }
.btn-back {
    width:40px;height:40px;background:#f1f5f9;border:none;border-radius:50%;
    font-size:1rem;color:#64748b;cursor:pointer;transition:var(--trans);
}
.btn-back:hover { background:var(--primary);color:white; }
.btn-csv {
    padding:8px 16px;background:#f1f5f9;color:#64748b;border:none;border-radius:8px;
    font-size:0.85rem;font-weight:600;font-family:inherit;cursor:pointer;transition:var(--trans);
}
.btn-csv:hover { background:var(--primary);color:white; }

.rec-filter { display:flex;gap:10px;margin-bottom:16px; }
.rec-input {
    flex:1;padding:10px 16px;border:2px solid #e2e8f0;border-radius:10px;
    font-family:inherit;font-size:0.9rem;outline:none;
}
.rec-input:focus { border-color:var(--primary); }
.rec-select {
    padding:10px 14px;border:2px solid #e2e8f0;border-radius:10px;
    font-family:inherit;font-size:0.9rem;outline:none;background:white;
}

.rec-summary {
    display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px;
}
.sum-card { background:white;border-radius:12px;padding:16px 10px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.sum-val { font-size:1.5rem;font-weight:900;color:var(--primary);margin-bottom:4px; }
.sum-lbl { font-size:0.72rem;color:#64748b;font-weight:600; }

.rec-list { display:flex;flex-direction:column;gap:10px; }
.rec-card {
    background:white;border-radius:12px;padding:18px 20px;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);border:2px solid transparent;transition:var(--trans);
}
.rec-card:hover { border-color:var(--primary);box-shadow:0 4px 16px rgba(108,99,255,0.12); }
.rec-top { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px; }
.rec-name { font-size:1rem;font-weight:700; }
.rec-meta { font-size:0.78rem;color:#94a3b8;margin-top:2px; }
.rec-badge { font-size:0.75rem;font-weight:700;color:white;padding:4px 12px;border-radius:20px; }
.lv1 { background:var(--exact); } .lv2 { background:var(--near); } .lv3 { background:var(--bad); }
.rec-vals { display:grid;grid-template-columns:repeat(4,1fr);gap:6px; }
.rec-v { text-align:center;padding:8px 4px;background:#f8f9ff;border-radius:8px; }
.rec-vv { font-size:0.95rem;font-weight:700;color:var(--primary); }
.rec-vl { font-size:0.68rem;color:#94a3b8; }
.rec-tags { display:flex;gap:6px;flex-wrap:wrap;margin-top:10px; }
.rec-tag { font-size:0.75rem;padding:3px 10px;border-radius:20px;font-weight:600; }
.tag-e { background:#dcfce7;color:#16a34a; }
.tag-n { background:#fef3c7;color:#d97706; }
.tag-b { background:#fee2e2;color:#dc2626; }
.tag-r { background:#f1f5f9;color:#64748b; }

/* 기록 삭제 버튼 */
.btn-rec-del {
    width: 32px; height: 32px;
    background: #fee2e2; color: #ef4444;
    border: none; border-radius: 8px;
    font-size: 0.8rem; cursor: pointer;
    transition: var(--trans);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.btn-rec-del:hover { background: #ef4444; color: white; transform: scale(1.08); }
.btn-rec-del:disabled { opacity: 0.5; cursor: not-allowed; }

.rec-empty { text-align:center;padding:50px 0;color:#94a3b8; }
.rec-empty i { font-size:2.5rem;display:block;margin-bottom:12px;color:#cbd5e1; }
.rec-pages { display:flex;justify-content:center;gap:6px;margin-top:20px;flex-wrap:wrap; }
.page-btn {
    width:34px;height:34px;border-radius:50%;border:2px solid #e2e8f0;background:white;
    font-size:0.85rem;cursor:pointer;transition:var(--trans);font-family:inherit;
}
.page-btn.active,.page-btn:hover { border-color:var(--primary);color:var(--primary);font-weight:700; }
.page-btn.active { background:var(--primary);color:white; }
.loading { text-align:center;padding:30px;color:#94a3b8; }

/* 토스트 */
.toast {
    position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);
    background:#1a1a2e;color:white;padding:12px 28px;
    border-radius:50px;font-size:0.9rem;font-weight:500;
    box-shadow:0 6px 20px rgba(0,0,0,0.25);
    transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
    z-index:9999;white-space:nowrap;
}
.toast.show { transform:translateX(-50%) translateY(0); }

/* ============================
   튜토리얼 오버레이
   ============================ */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 20, 0.88);
    backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.35s ease;
}
.tutorial-overlay.hidden { display: none; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.tutorial-modal {
    background: white;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0,0,0,0.45);
    max-width: 960px;
    width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    animation: slideUp 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes slideUp {
    from { opacity:0; transform: translateY(40px) scale(0.96); }
    to   { opacity:1; transform: translateY(0)   scale(1); }
}

.tutorial-content {
    display: flex;
    align-items: stretch;
    min-height: 460px;
}

/* 왼쪽: 이미지 */
.tutorial-img-wrap {
    flex: 0 0 420px;
    background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 24px;
    gap: 14px;
    position: relative;
}
.tutorial-img-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
}
.tutorial-img {
    width: 100%;
    max-width: 380px;
    border-radius: 16px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.5);
    object-fit: contain;
    -webkit-user-drag: none;
}

/* 오른쪽: 가이드 */
.tutorial-guide {
    flex: 1;
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: white;
}

.tutorial-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tutorial-title i { font-size: 1.1rem; }

.tut-purpose {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #475569;
    background: linear-gradient(135deg, #f0f0ff, #f8f0ff);
    border-left: 4px solid var(--primary);
    border-radius: 0 10px 10px 0;
    padding: 12px 16px;
    margin-bottom: 20px;
}
.tut-purpose em {
    font-style: normal;
    color: var(--primary);
    font-weight: 700;
}

/* ============================
   앵커(첫 음 고정) 오브제
   — 일반 오브제와 동일한 모양/색상,
     오른쪽 상단에 작은 자물쇠 배지만 추가
   ============================ */
.placed-obj.locked {
    cursor: default !important;
}

/* 앵커 바디: 일반음(normal)과 동일하게 — !important로 덮어쓰기 없음 */
/* 레벨별 색상은 일반음 그대로 사용 (type-normal 스타일 상속) */

/* 자물쇠 배지 — 오브제 오른쪽 상단 구석에 작게 */
.placed-obj.locked .obj-lock {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px; height: 18px;
    background: #1a1a2e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.obj-lock-icon {
    font-size: 0.58rem;
    color: white;
    line-height: 1;
}

/* "첫 음" 레이블 */
.placed-obj.locked .obj-num-label {
    position: absolute;
    bottom: -20px; left: 50%;
    transform: translateX(-50%);
    font-size: 0.68rem; font-weight: 700;
    color: #475569;
    background: white;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.tutorial-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}
.tutorial-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.tut-num {
    flex-shrink: 0;
    width: 30px; height: 30px;
    background: linear-gradient(135deg, var(--primary), var(--primary-l));
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 800;
    margin-top: 2px;
    box-shadow: 0 3px 10px rgba(108,99,255,0.35);
}
.tutorial-list li > div strong {
    display: block;
    font-size: 0.97rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}
.tutorial-list li > div p {
    font-size: 0.83rem;
    color: #64748b;
    line-height: 1.6;
}
.tutorial-list li > div em {
    font-style: normal;
    color: var(--primary);
    font-weight: 700;
}

/* 이미지 로드 실패 시 데모 */
.tutorial-img-fallback {
    width: 100%; max-width: 380px;
    border-radius: 16px;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.1);
    padding: 20px;
    flex-direction: column;
    gap: 0;
}
.fallback-demo { display:flex; flex-direction:column; width:100%; border-radius:12px; overflow:hidden; }
.demo-zone {
    flex:1; padding: 16px 12px;
    font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.6);
    min-height: 70px; position: relative;
}
.demo-high { background: rgba(108,99,255,0.15); border-bottom: 1px dashed rgba(255,255,255,0.1); }
.demo-mid  { background: rgba(67,198,172,0.12); border-bottom: 1px dashed rgba(255,255,255,0.1); }
.demo-low  { background: rgba(255,101,132,0.12); }
.demo-objs { display:flex; align-items:flex-end; gap:16px; position:absolute; top:0; left:40px; right:12px; bottom:0; }
.demo-obj { border-radius:8px; flex-shrink:0; }
.demo-obj.normal { width:36px; height:36px; background: linear-gradient(135deg,var(--primary),var(--primary-l)); border-radius:9px; }
.demo-obj.short  { width:22px; height:22px; background: linear-gradient(135deg,var(--accent),#3aafad); border-radius:50%; }
.demo-obj.long   { width:58px; height:22px; background: linear-gradient(135deg,var(--pink),#ff8fa3); border-radius:11px; }

/* 오브제 미니 아이콘 */
.tut-obj {
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px;
}
.tut-obj.normal-mini {
    width: 18px; height: 18px;
    background: linear-gradient(135deg, var(--primary), var(--primary-l));
    border-radius: 5px;
}
.tut-obj.short-mini {
    width: 12px; height: 12px;
    background: linear-gradient(135deg, var(--accent), #3aafad);
    border-radius: 50%;
}
.tut-obj.long-mini {
    width: 28px; height: 12px;
    background: linear-gradient(135deg, var(--pink), #ff8fa3);
    border-radius: 6px;
}

/* 확인 버튼 */
.btn-tutorial-ok {
    margin-top: 28px;
    padding: 16px 36px;
    background: linear-gradient(135deg, var(--primary), var(--primary-l));
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: var(--trans);
    box-shadow: 0 6px 20px rgba(108,99,255,0.4);
    align-self: flex-start;
}
.btn-tutorial-ok:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(108,99,255,0.5);
}

/* 드래그 고스트 방지 */
img { -webkit-user-drag:none; }

/* 스크롤바 */
::-webkit-scrollbar { width:6px;height:6px; }
::-webkit-scrollbar-track { background:#f1f5f9; }
::-webkit-scrollbar-thumb { background:#cbd5e1;border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--primary); }