/* =========================================================
   PUZLANG Learning UI — common assets
   모든 학습 모듈이 공통으로 사용하는 색상/버튼/카드/문장성분 색상
   ========================================================= */
:root{
    --pzl-ink:#15203a;
    --pzl-dim:#718096;
    --pzl-line:#f5f5f5;
    --pzl-soft:#f6f8fc;
    --pzl-card:#ffffff;
    --pzl-accent:#303238;
    --pzl-accent-dark:#303238;
    --pzl-navy:#15285f;
    --pzl-warn:#f59e0b;
    --pzl-bad:#dc4c64;
    --pzl-good:#303238;
    --pzl-shadow:0 16px 42px rgba(21,32,58,.08);

    /* 문장 성분 공통 색상 — 앞으로 모든 모듈은 이 변수만 사용 */
    --pzl-role-1:#6d5bd0; --pzl-role-1-bg:#f0edff; /* 주어 */
    --pzl-role-2:#df6548; --pzl-role-2-bg:#fff0eb; /* 동사 */
    --pzl-role-3:#0f9f7a; --pzl-role-3-bg:#e8faf4; /* 목적어 */
    --pzl-role-4:#ad7416; --pzl-role-4-bg:#fff7df; /* 방법 */
    --pzl-role-5:#3182ce; --pzl-role-5-bg:#eaf4ff; /* 장소 */
    --pzl-role-6:#c23d82; --pzl-role-6-bg:#fff0f7; /* 시간 */
    --pzl-role-7:#5a8f29; --pzl-role-7-bg:#f0f8e8; /* 이유 */
    --pzl-role-8:#6b7280; --pzl-role-8-bg:#f1f3f5; /* 접속 */
    --pzl-role-9:#7c5bb3; --pzl-role-9-bg:#f4effb; /* 전치사구 */
}

.pzl-wrap{max-width:1060px;margin:30px auto 56px;color:var(--pzl-ink)}
.pzl-wrap *{box-sizing:border-box}
.pzl-wrap button,.pzl-wrap select{font:inherit}

.pzl-hero{position:relative;overflow:hidden;padding:24px 26px;border-radius:22px;background:linear-gradient(130deg,#15285f 0%,#223f7d 68%,#155261 100%);color:#fff;box-shadow:var(--pzl-shadow)}
.pzl-hero:after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-85px;top:-95px;background:#f5f5f7}
.pzl-kicker{position:relative;z-index:1;font-size:16px;font-weight:800;letter-spacing:.06em;opacity:.72;margin-bottom:8px}
.pzl-hero h2{position:relative;z-index:1;margin:0 0 7px;font-size:26px;line-height:1.35;letter-spacing:-.035em}
.pzl-hero p{position:relative;z-index:1;margin:0;font-size:16px;line-height:1.7;opacity:.82}

.pzl-repeat-note{display:flex;align-items:flex-start;gap:10px;margin:14px 0 18px;padding:13px 15px;border:1px solid #f5f5f5;border-radius:14px;background:#fff9e8;color:#7b5710;font-size:16px;line-height:1.65}
.pzl-repeat-note strong{color:#8d5b00}
.pzl-repeat-dot{width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--pzl-warn);box-shadow:0 0 0 5px rgba(245,158,11,.12);flex:none}

.pzl-progress{display:flex;align-items:center;gap:12px;margin:18px 0 12px;color:var(--pzl-dim);font-size:16px;font-weight:700}
.pzl-progress-bar{height:7px;flex:1;border-radius:99px;background:#e9eef6;overflow:hidden}
.pzl-progress-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#303238,#303238);transition:width .25s ease}

.pzl-card{background:var(--pzl-card);border:1px solid var(--pzl-line);border-radius:22px;box-shadow:0 7px 28px rgba(21,32,58,.045)}
.pzl-situation{padding:18px 20px;margin-bottom:12px}
.pzl-situation-label{display:inline-flex;align-items:center;padding:4px 9px;margin-bottom:8px;border-radius:999px;background:#eef7ff;color:#27659e;font-size:16px;font-weight:850;letter-spacing:.02em}
.pzl-situation p{margin:0;color:#46536a;font-size:16px;line-height:1.7}

.pzl-source{padding:24px 22px;text-align:center;margin-bottom:12px}
.pzl-source small{display:block;margin-bottom:7px;color:var(--pzl-dim);font-size:16px;font-weight:700}
.pzl-source strong{display:block;font-size:22px;line-height:1.55;letter-spacing:-.035em}

.pzl-board-area{padding:22px;background:var(--pzl-soft);border:1px solid var(--pzl-line);border-radius:22px}
.pzl-board{display:flex;flex-wrap:wrap;gap:8px;min-height:74px;padding:14px;background:#fff;border:1px solid var(--pzl-line);border-radius:16px;align-items:center}
.pzl-slot{min-width:78px;height:45px;padding:0 12px;border-radius:11px;border:1px dashed #f5f5f5;background:#f7f9fc;display:flex;align-items:center;justify-content:center;position:relative;color:var(--pzl-ink);font-weight:800}
.pzl-slot:before{content:"";position:absolute;left:8px;right:8px;bottom:5px;height:3px;border-radius:99px;background:#dfe5ee}
.pzl-slot.done{border-style:solid;background:#fff}
.pzl-slot.done:before{opacity:.45}

.pzl-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;min-height:64px;margin-top:18px}
.pzl-piece{min-height:42px;padding:9px 14px;border:1px solid var(--pzl-line);border-radius:12px;background:#fff;color:var(--pzl-ink);font-weight:800;cursor:pointer;transition:transform .12s ease,border-color .12s ease,opacity .15s ease,box-shadow .12s ease}
.pzl-piece:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(21,32,58,.07)}
.pzl-piece:active{transform:scale(.97)}
.pzl-piece.gone{opacity:.12;pointer-events:none}
.pzl-piece.wrong{animation:pzl-shake .32s;border-color:var(--pzl-bad)!important;color:var(--pzl-bad)!important}
@keyframes pzl-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

/* 문장 성분 색상: slot/piece/영어 결과 공통 */
.pzl-role-1{color:var(--pzl-role-1)!important;background:var(--pzl-role-1-bg)!important;border-color:#d9d1ff!important}.pzl-role-1:before{background:var(--pzl-role-1)!important}
.pzl-role-2{color:var(--pzl-role-2)!important;background:var(--pzl-role-2-bg)!important;border-color:#ffd3c7!important}.pzl-role-2:before{background:var(--pzl-role-2)!important}
.pzl-role-3{color:var(--pzl-role-3)!important;background:var(--pzl-role-3-bg)!important;border-color:#bcebdd!important}.pzl-role-3:before{background:var(--pzl-role-3)!important}
.pzl-role-4{color:var(--pzl-role-4)!important;background:var(--pzl-role-4-bg)!important;border-color:#f2dda7!important}.pzl-role-4:before{background:var(--pzl-role-4)!important}
.pzl-role-5{color:var(--pzl-role-5)!important;background:var(--pzl-role-5-bg)!important;border-color:#cbdff5!important}.pzl-role-5:before{background:var(--pzl-role-5)!important}
.pzl-role-6{color:var(--pzl-role-6)!important;background:var(--pzl-role-6-bg)!important;border-color:#f1c9df!important}.pzl-role-6:before{background:var(--pzl-role-6)!important}
.pzl-role-7{color:var(--pzl-role-7)!important;background:var(--pzl-role-7-bg)!important;border-color:#d4e8be!important}.pzl-role-7:before{background:var(--pzl-role-7)!important}
.pzl-role-8{color:var(--pzl-role-8)!important;background:var(--pzl-role-8-bg)!important;border-color:#d8dce1!important}.pzl-role-8:before{background:var(--pzl-role-8)!important}
.pzl-role-9{color:var(--pzl-role-9)!important;background:var(--pzl-role-9-bg)!important;border-color:#ded2ef!important}.pzl-role-9:before{background:var(--pzl-role-9)!important}

.pzl-result{display:none;margin-top:16px;padding:18px 20px;border:1px solid #f5f5f5;border-radius:16px;background:#f5f5f7}
.pzl-result.on{display:block}
.pzl-result-head{display:flex;align-items:center;gap:8px;color:#303238;font-size:16px;font-weight:900;margin-bottom:10px}
.pzl-target{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:6px 0 14px}
.pzl-target span{padding:6px 9px;border-radius:9px;font-weight:850;font-size:17px}
.pzl-result-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}

.pzl-btn{border:1px solid var(--pzl-line);background:#fff;color:var(--pzl-ink);border-radius:11px;padding:10px 14px;font-weight:800;cursor:pointer}
.pzl-btn:hover{border-color:#f5f5f5}
.pzl-btn.primary{background:var(--pzl-accent);border-color:var(--pzl-accent);color:#fff;box-shadow:0 7px 16px rgba(16,185,129,.18)}
.pzl-btn.primary:hover{background:var(--pzl-accent-dark);border-color:var(--pzl-accent-dark)}
.pzl-btn.audio{color:#176ba5;background:#eff8ff;border-color:#f5f5f5}
.pzl-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;min-height:43px}
.pzl-feedback{font-size:16px;font-weight:750;color:var(--pzl-dim)}
.pzl-feedback.bad{color:var(--pzl-bad)}
.pzl-feedback.good{color:var(--pzl-good)}

.pzl-repeat-count{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#eef2f7;color:#667085;font-size:16px;font-weight:850}
.pzl-repeat-count.done{background:#f5f5f7;color:#303238}

@media(max-width:720px){
    .pzl-wrap{margin:18px 0 36px}.pzl-hero{padding:20px}.pzl-hero h2{font-size:22px}.pzl-source{padding:20px 16px}.pzl-source strong{font-size:19px}.pzl-board-area{padding:14px}.pzl-slot{min-width:62px;height:41px}.pzl-piece{padding:8px 11px}.pzl-target span{font-size:16px}.pzl-actions{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){.pzl-piece{transition:none}.pzl-piece.wrong{animation:none}.pzl-progress-bar i{transition:none}}

/* =========================================================
   PUZLANG Order Trainer — Level 1/2/3 공통 UI
   ========================================================= */
.pz2{--paper:#f7f9fc;--card:#fff;--ink:#15203a;--dim:#718096;--line:#f5f5f5;--slot:#f1f5f9;--bad:#dc4c64;--good:#303238;--accent:#303238;--navy:#15285f;--c1:var(--pzl-role-1);--c2:var(--pzl-role-2);--c3:var(--pzl-role-3);--c4:var(--pzl-role-4);--c5:var(--pzl-role-5);--c6:var(--pzl-role-6);--c7:var(--pzl-role-7);--c8:var(--pzl-role-8);--c9:var(--pzl-role-9);max-width:1080px;margin:32px auto 48px;color:var(--ink)}
.pz2.dark{--paper:#0f1216;--card:#171b21;--ink:#e6e9ed;--dim:#99a2ad;--line:#f5f5f5;--slot:#20252d;--bad:#f0a9a4;--good:#303238;--accent:#303238;--navy:#121b3d}
.pz2 *{box-sizing:border-box}.pz2 button,.pz2 select{font:inherit}
.pz2_hero{display:flex;align-items:center;gap:18px;padding:22px 24px;border-radius:22px;background:linear-gradient(135deg,var(--navy),#203875);color:#fff;margin-bottom:14px}
.pz2_hero_txt{min-width:0}.pz2_kicker{font-size:16px;letter-spacing:.12em;opacity:.76;margin-bottom:7px}.pz2_hero h2{margin:0 0 7px;font-size:28px;line-height:1.35}.pz2_hero p{margin:0;font-size:16px;opacity:.84;line-height:1.7}
.pz2_theme{margin-left:auto;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:11px 15px;min-height:44px;font-size:16px;font-weight:800;cursor:pointer}
.pz2_repeat{margin:0 0 14px;padding:13px 16px;border:1px solid #f5f5f5;background:#fff9e8;color:#795714;border-radius:14px;font-size:16px;line-height:1.7}.pz2_repeat strong{color:#8a5a00}
.pz2_clock{display:flex;align-items:center;gap:18px;padding:19px 21px;border:1px solid var(--line);border-radius:18px;background:var(--card);margin-bottom:12px}.pz2_time{font-size:36px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em}.pz2_time.run{color:#e09b25}.pz2_time.stop{color:var(--good)}.pz2_rec{font-size:16px;color:var(--dim)}.pz2_flag{margin-left:auto;color:var(--good);font-size:16px;font-weight:800;opacity:0}.pz2_flag.on{opacity:1}
.pz2_toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:13px 0}.pz2_seg{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}.pz2_seg button{border:0;background:transparent;color:var(--dim);padding:11px 15px;min-height:44px;font-size:16px;font-weight:800;cursor:pointer}.pz2_seg button.sel{background:var(--ink);color:var(--card)}.pz2_seg button:disabled{cursor:default}.pz2_btn{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:10px 14px;min-height:44px;border-radius:12px;font-size:16px;font-weight:750;cursor:pointer}.pz2_chk{display:flex;gap:7px;align-items:center;color:var(--dim);font-size:16px;font-weight:650}.pz2_chk input{width:17px;height:17px;accent-color:var(--accent)}.pz2_stat{margin-left:auto;color:var(--dim);font-size:16px}
.pz2_main{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:23px}.pz2_hint{font-size:16px;color:var(--dim);min-height:25px;line-height:1.75}.pz2_past{font-size:16px;color:var(--dim);line-height:1.85;margin-bottom:10px}.pz2_board{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;min-height:106px;display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}.pz2_slot{min-width:60px;height:44px;border-radius:11px;background:var(--slot);display:flex;align-items:center;justify-content:center;padding:0 12px;border:1px dashed transparent}.pz2_slot.next{border-color:#f5f5f5}.pz2_slot.done{background:transparent;border-style:solid}.pz2_lab{font-size:17px;font-weight:800}.pz2_tray{display:flex;flex-wrap:wrap;gap:10px;min-height:62px;margin-top:19px}.pz2_pc{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:11px 15px;min-height:46px;font-size:16px;cursor:pointer;transition:.14s}.pz2_pc:hover{transform:translateY(-1px);border-color:#f5f5f5}.pz2_pc:active{transform:scale(.97)}.pz2_pc.gone{opacity:.18;pointer-events:none}.pz2_pc.wrong{border-color:var(--bad);animation:pz2sh .34s}.pz2_pc.wrong .pz2_lab,.pz2_pc.wrong .pz2_token_wrap{color:var(--bad)!important}
@keyframes pz2sh{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.pz2_badge{display:inline-block;margin-top:18px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);font-size:16px;font-weight:850;opacity:0}.pz2_badge.on{opacity:1}.pz2_badge.gold{color:#b7791f;border-color:#f5f5f5}.pz2_badge.silver{color:var(--good);border-color:var(--good)}.pz2_msg{margin-top:13px;color:var(--dim);min-height:25px;font-size:16px;line-height:1.7}
.pz2_panel{display:none;margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}.pz2_panel.on{display:block}.pz2_panel h3{margin:0 0 5px}.pz2_sub{margin:0 0 12px;color:var(--dim);font-size:16px;line-height:1.6}.pz2_row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:16px}.pz2_n{margin-left:auto;color:var(--dim)}.pz2_meter{height:5px;border-radius:5px;background:#f0b58e}.pz2_empty{color:var(--dim);font-size:16px}
.pz2 .k1{color:var(--c1)}.pz2 .k2{color:var(--c2)}.pz2 .k3{color:var(--c3)}.pz2 .k4{color:var(--c4)}.pz2 .k5{color:var(--c5)}.pz2 .k6{color:var(--c6)}.pz2 .k7{color:var(--c7)}.pz2 .k8{color:var(--c8)}.pz2 .k9{color:var(--c9)}
.pz2.mono .pz2_lab,.pz2.mono .pz2_token_wrap{color:var(--ink)!important}
.pz2.mono .pz2_role_caption{color:var(--dim)!important;opacity:1}
.pz2.mono .pz2_pc.wrong .pz2_lab,.pz2.mono .pz2_pc.wrong .pz2_token_wrap{color:var(--bad)!important}

/* 정답 후 남/여 음성 선택 — 실제 R2 파일이 등록된 버튼만 활성화 */
.pz2_audio{display:none;align-items:center;gap:9px;flex-wrap:wrap;margin-top:15px;padding:13px 15px;border:1px solid #f5f5f5;background:#f5f5f7;border-radius:14px}.pz2_audio.on{display:flex}.pz2_audio_label{font-size:16px;font-weight:900;color:#303238;margin-right:3px}.pz2_voice{display:inline-flex;align-items:center;gap:7px;border:1px solid #f5f5f5;background:#fff;color:#24324a;border-radius:12px;padding:9px 12px;min-height:44px;cursor:pointer}.pz2_voice span{font-size:20px;line-height:1}.pz2_voice b{font-size:16px}.pz2_voice:not(:disabled):hover{border-color:#f5f5f5;box-shadow:0 4px 12px rgba(16,185,129,.12)}.pz2_voice:disabled{opacity:.38;cursor:not-allowed}.pz2_audio_wait{font-size:16px;color:#8290a4}

@media(max-width:700px){.pz2{margin:18px 0 32px}.pz2_hero{align-items:flex-start;padding:18px}.pz2_hero h2{font-size:23px}.pz2_hero p{font-size:16px}.pz2_clock{flex-wrap:wrap}.pz2_stat{width:100%;margin-left:0}.pz2_main{padding:15px}.pz2_slot{min-height:42px;height:auto}.pz2_lab{font-size:16px}.pz2_repeat{font-size:16px}.pz2_pc{font-size:16px;min-height:46px}.pz2_btn,.pz2_seg button{font-size:16px;min-height:44px}.pz2_chk{font-size:16px}}
@media(prefers-reduced-motion:reduce){.pz2_pc{transition:none}.pz2_pc.wrong{animation:none}}

/* =========================================================
   v15 — 전역 테마 동기화 / 문제 이동 강조 / Level 4 규칙 가이드
   ========================================================= */
html.pzl-dark .pz2,
body.pzl-dark .pz2,
.pz2.dark{
    --paper:#0f1216;
    --card:#171b21;
    --ink:#e6e9ed;
    --dim:#99a2ad;
    --line:#f5f5f5;
    --slot:#20252d;
    --bad:#f0a9a4;
    --good:#303238;
    --accent:#303238;
    --navy:#121b3d;
}
html.pzl-dark .pz2_repeat,
body.pzl-dark .pz2_repeat{background:#2A2417;border-color:#f5f5f5;color:#E5C77A}
html.pzl-dark .pz2_repeat strong,
body.pzl-dark .pz2_repeat strong{color:#FFD77C}
html.pzl-dark .pz2_audio,
body.pzl-dark .pz2_audio{background:#303238;border-color:#f5f5f5}
html.pzl-dark .pz2_voice,
body.pzl-dark .pz2_voice{background:#1B2129;border-color:#f5f5f5;color:#E8ECF3}

.pz2_nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;margin-top:18px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 10px 28px rgba(21,32,58,.06)}
.pz2_nav_btn{min-width:160px;border:1px solid var(--line);border-radius:14px;padding:14px 20px;min-height:48px;background:var(--card);color:var(--ink);font-size:16px;font-weight:900;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease}
.pz2_nav_btn:hover{transform:translateY(-1px);border-color:#f5f5f5;box-shadow:0 8px 18px rgba(21,32,58,.08)}
.pz2_nav_btn.next{background:var(--accent);border-color:var(--accent);color:#fff;font-size:16.5px;box-shadow:0 9px 20px rgba(16,185,129,.22)}
.pz2_nav_btn.next:hover{filter:brightness(.94)}
.pz2_nav_btn.next.ready{animation:pz2-next-pulse 1.15s ease-in-out 2}
.pz2_nav_help{text-align:center;color:var(--dim);font-size:16px;line-height:1.6}
.pz2_nav_help b{color:var(--ink)}
@keyframes pz2-next-pulse{0%,100%{transform:scale(1);box-shadow:0 9px 20px rgba(16,185,129,.22)}50%{transform:scale(1.035);box-shadow:0 10px 28px rgba(16,185,129,.40)}}

.pz2_ruleguide{margin:0 0 14px;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink)}
.pz2_ruleguide>strong{display:block;margin-bottom:12px;font-size:16px}
.pz2_ruleline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:13px}
.pz2_ruleline b{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-size:16px}
.pz2_ruleline i{font-style:normal;color:var(--accent);font-weight:900}
.pz2_ruleguide ul{margin:0;padding-left:20px;color:var(--dim);font-size:16px;line-height:1.8}
.pz2_ruleguide li+li{margin-top:4px}
.pz2_ruleguide p{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line);color:var(--dim);font-size:16px;line-height:1.7}

@media(max-width:700px){
    .pz2_nav{grid-template-columns:1fr 1fr;gap:10px}.pz2_nav_help{grid-column:1/-1;grid-row:1;text-align:left}.pz2_nav_btn{min-width:0;width:100%}.pz2_ruleline{gap:5px}.pz2_ruleline b{padding:6px 8px;font-size:16px}
}


/* v17 — Level 1/2 간소화: 절 단위와 칸당 시간은 숨기고 내부값은 고정 */
.pz2_simple .pz2_clause_control,
.pz2_simple .pz2_pace_control{display:none!important}

/* v17 — 모바일 정답 직후 문제 이동 버튼을 화면 하단에 띄움 */
@media(max-width:700px){
    .pz2_nav.mobile-ready{
        position:fixed;
        left:10px;right:10px;
        bottom:calc(10px + env(safe-area-inset-bottom));
        z-index:9999;
        grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
        gap:8px;
        margin:0;
        padding:9px;
        border-radius:16px;
        box-shadow:0 14px 38px rgba(15,23,42,.24);
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
    }
    .pz2_nav.mobile-ready .pz2_nav_help{display:none}
    .pz2_nav.mobile-ready .pz2_nav_btn{min-width:0;width:100%;padding:14px 11px;min-height:50px;border-radius:12px;font-size:16px}
    .pz2_nav.mobile-ready .pz2_nav_btn.next{font-size:17px}
    html.pzl-dark .pz2_nav.mobile-ready,body.pzl-dark .pz2_nav.mobile-ready{box-shadow:0 14px 38px rgba(0,0,0,.46)}
}
@media(prefers-reduced-motion:reduce){.pz2_nav_btn.next.ready{animation:none}}

/* =========================================================
   v18 — Level 3/4 영어 전환 브리지
   ========================================================= */
.pz2_prompt{margin:0 0 15px;padding:15px 17px;border:1px solid var(--line);border-radius:14px;background:var(--card);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pz2_prompt span{font-size:16px;font-weight:900;color:var(--accent);letter-spacing:.01em}
.pz2_prompt strong{font-size:18px;line-height:1.65;color:var(--ink)}
.pz2_token_wrap{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1.18}
.pz2_token_text{font-size:17px;font-weight:850}
.pz2_role_caption{display:block;font-size:16px;line-height:1.1;color:inherit;opacity:.72;font-weight:850}
.pz2_pc .pz2_role_caption,.pz2_slot.done .pz2_role_caption{margin-top:2px}
.pz2_slot.done{height:auto;min-height:40px;padding-top:7px;padding-bottom:7px}

@media(max-width:700px){
  .pz2_prompt{padding:13px 14px;gap:8px}.pz2_prompt strong{font-size:16.5px}.pz2_role_caption{font-size:16px}
}

/* =========================================================
   v21 — Level 5 상황/유도 질문 + PC/Tablet/Mobile 보강
   ========================================================= */
.pz2_context{display:block;margin:0 0 16px;padding:17px 18px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.pz2_context_row{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:start;gap:11px}.pz2_context_row+.pz2_context_row{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.pz2_context_label{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:5px 8px;border-radius:9px;background:#f5f5f7;color:#303238;font-size:16px;font-weight:900}
.pz2_context_row strong,.pz2_context_row p{margin:0;padding-top:3px;color:var(--ink);font-size:16.5px;line-height:1.7;letter-spacing:-.01em}.pz2_context_row.question p{font-weight:800}.pz2_context_row.question .pz2_context_label{background:#eef3ff;color:#345b9a}
html.pzl-dark .pz2_context_label,body.pzl-dark .pz2_context_label{background:#303238;color:#303238}html.pzl-dark .pz2_context_row.question .pz2_context_label,body.pzl-dark .pz2_context_row.question .pz2_context_label{background:#1e2a46;color:#a9c2f5}

/* 태블릿: 데스크톱을 억지로 축소하지 않고 간격과 터치 크기를 별도로 조정 */
@media (min-width:701px) and (max-width:1100px){
  .pz2{margin:26px 22px 44px}.pz2_hero h2{font-size:27px}.pz2_toolbar{gap:8px}.pz2_btn,.pz2_seg button{min-height:46px;font-size:16px}.pz2_pc{min-height:48px;font-size:16.5px}.pz2_nav_btn{min-height:50px}.pz2_context_row strong,.pz2_context_row p{font-size:16px}
}
/* 모바일: 시니어도 누르기 쉽도록 버튼/문자/문맥 카드를 크게 유지 */
@media(max-width:700px){
  .pz2_context{padding:14px}.pz2_context_row{grid-template-columns:52px minmax(0,1fr);gap:9px}.pz2_context_label{font-size:16px}.pz2_context_row strong,.pz2_context_row p{font-size:16px;line-height:1.65}.pz2_token_text{font-size:17px}.pz2_pc{padding:11px 14px;min-height:48px}.pz2_nav.mobile-ready .pz2_nav_btn{min-height:54px}
}


/* =========================================================
   2026-09-10 — PUZLANG 문장성분 단일 컬러 원장
   같은 문장성분은 어순학습/표현사전/발음/듣기/문법/회화에서 항상 같은 색.
   일반 목적어·간접목적어·직접목적어는 서로 구별하되, 각각의 색은 사이트 전체에서 고정.
   ========================================================= */
:root{
    --pzl-role-subject:#6d5bd0;
    --pzl-role-verb:#df6548;
    --pzl-role-object:#0f9f7a;
    --pzl-role-indirect-object:#0c8d86;
    --pzl-role-direct-object:#0fa97f;
    --pzl-role-complement:#6b7fd7;
    --pzl-role-manner:#ad7416;
    --pzl-role-place:#3182ce;
    --pzl-role-time:#c23d82;
    --pzl-role-reason:#5a8f29;
    --pzl-role-conjunction:#6b7280;
    --pzl-role-preposition:#7c5bb3;
    --pzl-role-question:#2563a9;
    --pzl-role-negation:#b34d5f;
    --pzl-role-frequency:#8b5cf6;
    --pzl-role-degree:#b45309;
    --pzl-role-other:#526071;

    --pzl-role-subject-bg:#f0edff;
    --pzl-role-verb-bg:#fff0eb;
    --pzl-role-object-bg:#e8faf4;
    --pzl-role-manner-bg:#fff7df;
    --pzl-role-place-bg:#eaf4ff;
    --pzl-role-time-bg:#fff0f7;
    --pzl-role-reason-bg:#f0f8e8;
    --pzl-role-conjunction-bg:#f1f3f5;
    --pzl-role-preposition-bg:#f4effb;

    --pzl-role-1:var(--pzl-role-subject); --pzl-role-1-bg:var(--pzl-role-subject-bg);
    --pzl-role-2:var(--pzl-role-verb); --pzl-role-2-bg:var(--pzl-role-verb-bg);
    --pzl-role-3:var(--pzl-role-object); --pzl-role-3-bg:var(--pzl-role-object-bg);
    --pzl-role-4:var(--pzl-role-manner); --pzl-role-4-bg:var(--pzl-role-manner-bg);
    --pzl-role-5:var(--pzl-role-place); --pzl-role-5-bg:var(--pzl-role-place-bg);
    --pzl-role-6:var(--pzl-role-time); --pzl-role-6-bg:var(--pzl-role-time-bg);
    --pzl-role-7:var(--pzl-role-reason); --pzl-role-7-bg:var(--pzl-role-reason-bg);
    --pzl-role-8:var(--pzl-role-conjunction); --pzl-role-8-bg:var(--pzl-role-conjunction-bg);
    --pzl-role-9:var(--pzl-role-preposition); --pzl-role-9-bg:var(--pzl-role-preposition-bg);
}

.pz2_repeat p{margin:5px 0}.pz2_repeat small{display:block}.pz2_repeat .pz2_theme{margin-top:8px}

/* 학습 시작 안내: 제목과 설명을 한 카드에 압축 */
.pz2_compact_intro{position:relative;margin-bottom:12px;padding:12px 16px;border:1px solid var(--line,#f5f5f5);border-radius:12px;background:var(--card,#fff);color:var(--ink,#192545)}
.pz2_compact_intro strong{display:block;font-size:16px;color:inherit;line-height:1.5;padding-right:85px}.pz2_compact_intro p{margin:4px 0 0;font-size:16px;line-height:1.55;color:var(--dim,#71809b)}.pz2_compact_intro small{position:absolute;right:16px;top:14px;font-size:16px;color:var(--dim,#71809b)}.pz2_compact_intro .pz2_theme{display:none}
/* 이전 PHP가 잠시 남아 있는 업로드 중에도 큰 배너를 압축한다. */
.pz2_hero{padding:12px 16px!important;border-radius:12px!important;margin-bottom:10px!important}.pz2_hero h2{display:none}.pz2_hero .pz2_kicker{font-size:16px;letter-spacing:0;margin-bottom:4px}.pz2_hero p{font-size:16px!important}.pz2_hero+.pz2_repeat{display:none}
html.pzl-dark .pz2_compact_intro,body.pzl-dark .pz2_compact_intro{background:var(--card,#172238);border-color:var(--line,#f5f5f5);color:var(--ink,#edf1fa)}

.pz2[data-compact-toolbar="true"]>.pz2_toolbar .pz2_seg{display:none}
.pz2[data-compact-toolbar="true"]>.pz2_toolbar .pz2_btn{background:#f3f5f8;border-color:#f5f5f5;color:#536078;border-radius:10px;font-weight:600;box-shadow:none}
.pz2[data-compact-toolbar="true"]>.pz2_toolbar .pz2_btn:hover{background:#e8edf3;color:#1c2e49}
.pz2[data-compact-toolbar="true"]>.pz2_toolbar .pz2_chk{margin-left:4px;white-space:nowrap}
.pz2[data-compact-toolbar="true"] #pz2Color{accent-color:var(--go,#303238)}
html.pzl-dark .pz2[data-compact-toolbar="true"]>.pz2_toolbar .pz2_btn{background:#243247;border-color:#f5f5f5;color:#dbe5f4}

/* 문제 정보와 동작을 하나의 줄로 제공한다. */
.pz2[data-compact-toolbar="true"]>.pz2_toolbar:not(.pz2_unified_toolbar){display:none}
.pz2_curriculum_nav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;align-items:center}.pz2_curriculum_nav a{text-decoration:none}.pz2_curriculum_nav .pz2_btn{white-space:normal}
.pz2 .pz2_unified_toolbar{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;overflow-x:auto;padding-bottom:4px}
.pz2 .pz2_unified_toolbar>*{flex:none}.pz2 .pz2_unified_toolbar .pz2_stat{width:auto;margin-left:auto;white-space:nowrap}
.pz2_role_listening #pz2Audio{margin:12px 0}.pz2_role_listening #pz2Tray[hidden]{display:none!important}
@media(max-width:700px){.pz2 .pz2_unified_toolbar .pz2_btn{padding:8px 10px}.pz2 .pz2_unified_toolbar .pz2_stat{margin-left:8px}.pz2_role_listening #pz2Audio{padding:10px;gap:8px}.pz2_role_listening #pz2Audio .pz2_audio_wait{font-size:16px}}

.pz2_hint{white-space:pre-line;line-height:1.7}.pz2_toolbar>.pz2_btn{background:#f3f5f8;border-color:#f5f5f5;color:#536078;border-radius:10px;font-weight:600}.pz2_seg{flex-wrap:wrap}

.pz2_voice{font-family:inherit;font-size:16px;font-weight:700;min-height:40px;border-radius:9px;padding:9px 12px}

#pz2Pace,#pz2PaceLabel{display:none!important}@media(max-width:700px){.pz2_nav.mobile-ready{flex-wrap:wrap;display:flex}.pz2_nav.mobile-ready>.pz2_audio{width:100%;flex-basis:100%;margin:0 0 8px;padding:8px 10px;gap:8px}.pz2_nav.mobile-ready .pz2_audio_wait{display:none!important}.pz2_nav.mobile-ready>.pz2_nav_btn{flex:1}.pz2:has(.pz2_nav.mobile-ready){padding-bottom:180px}}

.pz2_pace_control{display:none!important}

.pz2_diagnosis{width:min(600px,calc(100vw - 28px));max-height:80dvh;overflow:auto;border:1px solid #f5f5f5;border-radius:20px;padding:18px;background:var(--card,#fff);color:var(--ink,#192545);box-shadow:0 20px 70px #10233333}.pz2_diagnosis::backdrop{background:#10233388}.pz2_diagnosis .pz2_panel{display:block;margin:12px 0 0;padding:16px;background:transparent}.pz2_diagnosis_close{display:block;margin-left:auto;border:1px solid #f5f5f5;border-radius:9px;padding:10px 16px;background:#f4f7fa;color:#24324a;cursor:pointer;font:inherit}.pz2_diagnosis button:focus-visible{outline:3px solid #303238;outline-offset:3px}
.pz2_mobile_controls[hidden]{display:none!important}
@media(max-width:700px){
.pz2_mobile_layout>.pz2_toolbar{display:none!important}.pz2_mobile_controls{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.pz2_mobile_modes>.pz2_seg{display:flex;width:100%;flex-wrap:nowrap}.pz2_mobile_modes .pz2_seg button{flex:1;min-width:0;padding:10px 3px;font-size:16px;white-space:nowrap;min-height:42px}
.pz2_mobile_order{display:flex;align-items:center;gap:10px}.pz2_mobile_order .pz2_seg button{font-size:16px;padding:9px 12px;min-height:40px}.pz2_mobile_order .pz2_chk{font-size:16px;white-space:nowrap}
.pz2_mobile_actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.pz2_mobile_actions .pz2_btn{min-width:0;padding:9px 3px;min-height:42px;font-size:16px;white-space:nowrap}
.pz2_mobile_settings{display:flex;align-items:center;flex-wrap:nowrap;gap:7px;min-width:0}.pz2_mobile_settings .pz2_chk{font-size:16px;gap:3px;white-space:nowrap;margin:0}.pz2_mobile_settings input{width:14px;height:14px;margin:0}.pz2_mobile_settings .pz2_stat{font-size:16px;white-space:nowrap;width:auto;margin-left:auto;letter-spacing:-.4px}
}

/* 모바일 시간 카드는 숨겨진 신기록 표시의 빈 줄을 남기지 않습니다. */
@media(max-width:700px){.pz2_clock{gap:6px 12px;padding:14px 18px}.pz2_clock .pz2_flag:not(.on){display:none}.pz2_clock .pz2_flag.on{font-size:16px}.pz2_clock .pz2_rec{font-size:16px}}
/* 퍼즐 조각 크기는 유지하고 비어 있는 안내·결과 영역의 여백만 제거합니다. */
.pz2_hint:empty,.pz2_past:empty,.pz2_msg:empty,.pz2_badge:not(.on){display:none}
.pz2_board{min-height:78px}
.pz2_tray{margin-top:14px}
.pz2_hint:not(:empty),.pz2_past:not(:empty){margin-bottom:10px}

#pz2ShuffleBtn{display:none!important}@media(max-width:700px){.pz2_mobile_actions{grid-template-columns:repeat(3,minmax(0,1fr))}}

.pz2 .k10{color:var(--pzl-role-complement,#6b7fd7)}

.pz2 .k11{color:var(--pzl-role-frequency,#8b5cf6)}.pz2 .k12{color:var(--pzl-role-question,#2563a9)}.pz2 .k13{color:var(--pzl-role-indirect-object,#0c8d86)}.pz2 .k14{color:var(--pzl-role-direct-object,#0fa97f)}
.pz2 .pz2_seg{padding:4px;gap:4px;border:1px solid #f5f5f5;background:#f5f5f7;border-radius:14px}.pz2 .pz2_seg button{border:0;border-radius:10px;color:#61776e;background:transparent;font-weight:700;transition:background .15s,color .15s;min-height:42px}.pz2 .pz2_seg button.sel{background:#fff;color:#303238;box-shadow:0 2px 7px #30323820}.pz2 .pz2_seg button:hover{background:#f5f5f7}.pz2 .pz2_seg button:focus-visible{outline:3px solid #303238;outline-offset:1px}.pz2.dark .pz2_seg,html.pzl-dark .pz2 .pz2_seg{background:#303238;border-color:#f5f5f5}.pz2.dark .pz2_seg button,html.pzl-dark .pz2 .pz2_seg button{color:#e5e5e7}.pz2.dark .pz2_seg button.sel,html.pzl-dark .pz2 .pz2_seg button.sel{background:#303238;color:#e5e5e7}.pz2.dark .pz2_seg button:hover,html.pzl-dark .pz2 .pz2_seg button:hover{background:#303238}@media(max-width:700px){.pz2 .pz2_mobile_modes .pz2_seg button{font-size:16px;padding:8px 1px}.pz2 .pz2_mobile_modes .pz2_seg{gap:2px;padding:3px}.pz2 .pz2_mobile_order .pz2_seg button{font-size:16px}}@media(prefers-reduced-motion:reduce){.pz2 .pz2_seg button{transition:none}}
.pz2.dark{--c1:#bda5ff;--c2:#ffad92;--c3:#6cddbc;--c4:#edc97e;--c5:#80c5ff;--c6:#ffa4d5;--c7:#b3d983;--c8:#bbc8d4;--c9:#ccafff}.pz2.dark .k10{color:#a9baff}.pz2.dark .k11{color:#bda5ff}.pz2.dark .k12{color:#8dcaf1}.pz2.dark .k13{color:#72dace}.pz2.dark .k14{color:#7be0b8}
/* 모든 화면에서 정답 후 듣기와 문제 이동을 함께 유지 */
@media(min-width:701px){.pz2_nav.mobile-ready{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;width:calc(100% - 44px);max-width:1080px;z-index:9999;margin:0;grid-template-columns:auto 1fr auto;box-shadow:0 12px 36px #10203030}.pz2_nav.mobile-ready>.pz2_audio{grid-column:1/-1;margin:0;padding:9px 14px}.pz2:has(.pz2_nav.mobile-ready){padding-bottom:190px}}

/* 모든 단계의 완성 동작은 문장 바로 아래에 이어 둔다. */
#pz2Root{padding-bottom:0;margin-bottom:24px}
#pz2Root .pz2_nav.mobile-ready{position:static;transform:none;width:auto;max-width:none;margin-top:18px;box-shadow:0 8px 24px #1020300d}
#pz2Root[data-level="5"]>.pz2_toolbar:empty{display:none}
#pz2Root .pz2_scope_rule{padding:12px 16px!important;background:var(--card,#fff);border-left:4px solid #f5f5f5;border-radius:8px;font-size:16px!important;font-weight:650;color:var(--ink,#17243d)!important;line-height:1.8!important;margin-top:12px!important}
#pz2Root .pz2_translation{display:block;font-size:16px;font-weight:500;line-height:1.7;margin-top:6px;color:var(--ink,#17243d);text-align:center}
#pz2Root .pz2_role_detail[hidden],#pz2Root #pz2Tray[hidden]{display:none}
/* 모바일 절 연결은 아직 채우지 않은 칸을 한 개만 보여 선택 조각을 가까이 둔다. */
@media(max-width:700px){
 #pz2Root[data-level="4"] .pz2_slot:not(.done):not(.next){display:none}
 #pz2Root[data-level="4"] .pz2_board{min-height:0;padding:10px;gap:6px}
 #pz2Root[data-level="4"] .pz2_main{padding:12px}
 #pz2Root[data-level="4"] .pz2_prompt{padding:10px;margin-bottom:10px;font-size:16px;line-height:1.55}
 #pz2Root[data-level="4"] .pz2_prompt strong{font-size:16px;line-height:1.55}
 #pz2Root[data-level="4"] .pz2_hint:empty,#pz2Root[data-level="4"] .pz2_past:empty{display:none}
 #pz2Root[data-level="4"] .pz2_tray{gap:6px;margin-top:10px}
 #pz2Root[data-level="4"] .pz2_pc{padding:8px 10px}
}
#pz2Root .pz2_unified_toolbar{flex-wrap:wrap;overflow:visible}

/* 퍼즐 우선 화면: 안내와 기록은 플레이 영역 아래에 배치 */
#pz2Root{margin-top:20px;--slot:#e3eaf5}
#pz2Root>.pz2_toolbar{padding:12px 16px;background:#eaf1fa;border:1px solid #f5f5f5;border-radius:16px 16px 0 0;gap:10px}
#pz2Root>.pz2_toolbar+.pz2_toolbar{border-radius:0;border-top:0}
#pz2Root .pz2_main{background:#f5f5f7;border:1px solid #f5f5f5;border-radius:0 0 20px 20px;padding:22px;box-shadow:0 6px 0 #cad8e4,0 12px 24px #1f385212}
#pz2Root .pz2_board{background:#dce6f2;border:1px solid #f5f5f5;box-shadow:inset 0 3px 7px #283d5620;gap:10px;padding:18px;min-height:88px}
#pz2Root .pz2_slot{background:#cbd8e8;border:1px dashed #f5f5f5;box-shadow:inset 0 2px 4px #344b6a20;border-radius:10px}
#pz2Root .pz2_slot.next{background:#fff4d7;border:2px dashed #f5f5f5;box-shadow:inset 0 2px 4px #b2851620}
#pz2Root .pz2_slot.done{background:#fff;border:1px solid #f5f5f5;border-bottom:3px solid #f5f5f5;box-shadow:0 2px 3px #1c365313}
#pz2Root .pz2_tray{padding:14px 2px 8px;gap:12px}
#pz2Root .pz2_pc{position:relative;background:linear-gradient(#fff,#f3f7fb);border:1px solid #f5f5f5;border-bottom:5px solid #f5f5f5;border-radius:13px;padding:13px 16px;box-shadow:0 4px 7px #23426616;transition:transform .12s,box-shadow .12s}
#pz2Root .pz2_pc:hover:not(.gone){transform:translateY(-3px);box-shadow:0 7px 12px #23426624;border-color:#f5f5f5}
#pz2Root .pz2_pc:active:not(.gone){transform:translateY(3px);box-shadow:none}
#pz2Root .pz2_pc.gone{opacity:.24;box-shadow:none;transform:none}
#pz2Root .pz2_pc.wrong{border-color:var(--bad)}
#pz2Root button:focus-visible{outline:3px solid #526cd5;outline-offset:3px}
#pz2Root .pz2_nav{margin-top:20px;background:#f5f5f7;border:1px solid #f5f5f5;box-shadow:0 4px 0 #e5e5e7}
#pz2Root .pz2_nav_btn.next{border-bottom:4px solid #f5f5f5;box-shadow:0 4px 8px #30323820}
#pz2Root>.pz2_clock{margin:22px 0 16px;padding:12px 18px;background:#f1f4f9;border-color:#f5f5f5;gap:12px}
#pz2Root>.pz2_clock .pz2_time{font-size:26px}
#pz2Root .pz2_learning_notes{padding:18px;border:1px solid #f5f5f5;background:#f7f9fc;border-radius:16px}
#pz2Root .pz2_learning_notes .pz2_compact_intro{background:transparent;border:0;padding:0;margin-bottom:10px}
#pz2Root .pz2_learning_notes .pz2_curriculum_nav{margin-bottom:0}
#pz2Root.dark>.pz2_toolbar,#pz2Root.dark .pz2_main{background:#192536;border-color:#f5f5f5}
#pz2Root.dark .pz2_board{background:#111c2a;border-color:#f5f5f5}
#pz2Root.dark .pz2_slot{background:#25364b;border-color:#f5f5f5}
#pz2Root.dark .pz2_slot.next{background:#493b21;border-color:#f5f5f5}
#pz2Root.dark .pz2_pc,#pz2Root.dark .pz2_slot.done{background:#223248;border-color:#f5f5f5}
#pz2Root.dark .pz2_nav,#pz2Root.dark>.pz2_clock,#pz2Root.dark .pz2_learning_notes{background:#192536;border-color:#f5f5f5}
@media(max-width:700px){#pz2Root{margin-top:12px}#pz2Root .pz2_mobile_controls{background:#eaf1fa;padding:12px;border:1px solid #f5f5f5;border-radius:16px 16px 0 0}#pz2Root .pz2_main{padding:14px}#pz2Root .pz2_board{padding:12px;gap:8px}#pz2Root .pz2_pc{padding:11px 12px}#pz2Root .pz2_learning_notes{padding:14px}#pz2Root.dark .pz2_mobile_controls{background:#192536;border-color:#f5f5f5}}
@media(prefers-reduced-motion:reduce){#pz2Root .pz2_pc{transition:none}#pz2Root .pz2_pc.wrong{animation:none}}
#pz2Root>.pz2_unified_toolbar{border-radius:16px 16px 0 0}
#pz2Root .pz2_learning_notes .pz2_compact_intro{padding-right:0}
@media(max-width:700px){#pz2Root .pz2_learning_notes .pz2_compact_intro>small{position:static;display:block;margin-top:8px}#pz2Root .pz2_learning_notes .pz2_compact_intro{padding-right:0}}

/* 빈칸의 역할을 쉬운 말로 안내하고 조각은 평평하게 표현 */
#pz2Root .pz2_main,#pz2Root .pz2_nav{box-shadow:none}
#pz2Root .pz2_board{box-shadow:none;background:#e3ebf5}
#pz2Root .pz2_slot{box-shadow:none;background:#edf2f8;border:1px dashed #f5f5f5;min-width:70px;min-height:50px;height:auto}
#pz2Root .pz2_slot_cue{font-size:16px;font-weight:650;color:#65758c;line-height:1.4;text-align:center;white-space:normal}
#pz2Root .pz2_slot.next{background:#fff8e6;border:2px dashed #f5f5f5;box-shadow:none}
#pz2Root .pz2_slot.next .pz2_slot_cue{color:#906314}
#pz2Root .pz2_pc,#pz2Root .pz2_slot.done{background:#fff;border:1px solid #f5f5f5;box-shadow:none;border-radius:11px}
#pz2Root .pz2_pc:hover:not(.gone){transform:none;background:#f0f7fa;border-color:#f5f5f5;box-shadow:none}
#pz2Root .pz2_pc:active:not(.gone){transform:none;background:#f5f5f7;box-shadow:none}
#pz2Root .pz2_pc.wrong{border-color:var(--bad)}
#pz2Root .pz2_nav_btn.next{border-bottom:1px solid #f5f5f5;box-shadow:none}
#pz2Root.dark .pz2_slot_cue{color:#b4c3d6}
#pz2Root.dark .pz2_slot.next .pz2_slot_cue{color:#f0d079}
#pz2Root.dark .pz2_board{background:#111c2a}
#pz2Root.dark .pz2_slot{background:#25364b;border-color:#f5f5f5}
#pz2Root.dark .pz2_slot.next{background:#493b21;border-color:#f5f5f5}
#pz2Root.dark .pz2_pc,#pz2Root.dark .pz2_slot.done{background:#223248;border-color:#f5f5f5}
#pz2Root.dark .pz2_pc:hover:not(.gone){background:#30445b}

/* 밝은 학습 공간과 가벼운 조각: 성분별 글자색은 그대로 유지한다. */
#pz2Root:not(.dark)>.pz2_toolbar,#pz2Root:not(.dark) .pz2_mobile_controls{background:#f5f5f7;border-color:#f5f5f5}
#pz2Root:not(.dark) .pz2_main{background:#f5f5f7;border-color:#f5f5f5;box-shadow:0 10px 30px #30323806}
#pz2Root:not(.dark) .pz2_board{background:#f5f5f7;border-color:#f5f5f5;border-radius:16px}
#pz2Root:not(.dark) .pz2_slot{background:#fff;border-color:#f5f5f5;border-radius:12px}
#pz2Root:not(.dark) .pz2_slot.next{background:#f5f5f7;border:2px dashed #f5f5f5}
#pz2Root:not(.dark) .pz2_slot_cue{color:#75867e}
#pz2Root:not(.dark) .pz2_slot.next .pz2_slot_cue{color:#303238}
#pz2Root .pz2_pc,#pz2Root .pz2_slot.done{border-bottom-width:1px;border-radius:12px;box-shadow:0 3px 10px #3032380a}
#pz2Root:not(.dark) .pz2_pc,#pz2Root:not(.dark) .pz2_slot.done{border-color:#f5f5f5;background:#fff}
#pz2Root:not(.dark) .pz2_pc:hover:not(.gone){background:#fff;border-color:#f5f5f5;box-shadow:0 5px 16px #30323820;transform:translateY(-2px)}
#pz2Root:not(.dark) .pz2_pc:active:not(.gone){background:#f5f5f7;transform:none}
#pz2Root .pz2_pc.gone{box-shadow:none}
#pz2Root:not(.dark) .pz2_nav{background:#f5f5f7;border-color:#f5f5f5}
#pz2Root:not(.dark)>.pz2_clock,#pz2Root:not(.dark) .pz2_learning_notes{background:#f5f5f7;border-color:#f5f5f5}
#pz2Root button:focus-visible{outline-color:#303238}
#pz2Root:not(.dark) .pz2_pc.wrong{border-color:var(--bad)}
#pz2Root .pz2_pc.wrong{border-color:var(--bad)}
@media(max-width:700px){.pz2_mobile_settings{flex-wrap:wrap}.pz2 .pz2_stat,.pz2 .pz2_unified_toolbar .pz2_stat,.pz2_mobile_settings .pz2_stat{flex:0 0 100%;width:100%;max-width:100%;margin:4px 0 0;white-space:normal;overflow-wrap:anywhere;line-height:1.5}}

/* 정도 성분 */
.pz2 .k15{color:var(--pzl-role-degree,#b45309)}
.pz2.dark .k15{color:#edc97e}

/* 모든 단계의 미완성 빈칸은 배경과 구분되는 점선으로 표시합니다. */
#pz2Root:not(.dark) .pz2_slot:not(.done),.pzl-slot:not(.done){border:1px dashed #b8bbc2}
#pz2Root:not(.dark) .pz2_slot.next:not(.done){border:2px dashed #727680}
#pz2Root.dark .pz2_slot:not(.done){border:1px dashed #858b96}
#pz2Root.dark .pz2_slot.next:not(.done){border:2px dashed #c1c6cf}

/* 문장 길이에 맞추고, 완성 후 듣기를 같은 학습 카드에 모읍니다. */
#pz2Root .pz2_main{min-height:0}
#pz2Root:not(.dark) .pz2_board{background:#fff;border:1px solid #eaeaea;box-shadow:none}
#pz2Root #pz2TapNotice:empty{display:none!important}
#pz2Root .pz2_tray[hidden]{display:none!important}
#pz2Root.is-complete .pz2_board{margin-bottom:16px}
#pz2Root.is-complete .pz2_badge{margin-top:0;padding:4px 0;border:0}
#pz2Root.is-complete #pz2Msg{margin:8px 0 12px;min-height:0}
#pz2Root.is-complete .pz2_audio.on{margin:0;padding:12px 14px;border:1px solid #eaeaea;border-radius:12px;background:var(--card);gap:10px;flex-wrap:wrap}
#pz2Root>.pz2_clock{background:transparent!important;border:0;padding:8px 18px;gap:10px;margin-top:6px;box-shadow:none}
#pz2Root .pz2_time{font-size:16px;font-weight:650}
#pz2Root .pz2_rec,#pz2Root .pz2_flag{font-size:13px}

/* 도구 버튼은 배경과 구분되는 흰색 면과 테두리를 사용합니다. */
#pz2Root :is(#pz2HintBtn,#pz2RetryBtn,#pz2ReportBtn){background:#fff;border:1px solid #d5d7dc;color:#303238;border-radius:10px;min-height:44px;padding:10px 15px;font-weight:700;box-shadow:0 2px 3px #2021240a;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
#pz2Root :is(#pz2HintBtn,#pz2RetryBtn,#pz2ReportBtn):hover{background:#eceef1;border-color:#a5a9b1;box-shadow:0 3px 6px #20212412}
#pz2Root :is(#pz2HintBtn,#pz2RetryBtn,#pz2ReportBtn):active{background:#e2e4e8;box-shadow:inset 0 1px 3px #20212420}
#pz2Root :is(#pz2HintBtn,#pz2RetryBtn,#pz2ReportBtn):focus-visible{outline:2px solid #555b65;outline-offset:3px}
#pz2Root.dark :is(#pz2HintBtn,#pz2RetryBtn,#pz2ReportBtn){background:#30343b;border-color:#626874;color:#f5f5f7}
#pz2Root.dark :is(#pz2HintBtn,#pz2RetryBtn,#pz2ReportBtn):hover{background:#414751}
@media(max-width:700px){#pz2Root :is(#pz2HintBtn,#pz2RetryBtn,#pz2ReportBtn){padding:9px 10px}}
@media(prefers-reduced-motion:reduce){#pz2Root :is(#pz2HintBtn,#pz2RetryBtn,#pz2ReportBtn){transition:none}}