@charset "utf-8";
/* =========================================================
   퍼즐영어 테마 (default.css → responsive.css 다음에 로드)
   색은 남색·초록 두 가지가 기본이고, 노랑은 "지금 여기"에만 씁니다.
   ========================================================= */
:root{
    --ink:#101A3D;
    --ink-2:#5A6485;
    --paper:#F3F5FA;
    --line:#E4E8F2;
    --go:#10B981;
    --go-dark:#07845C;
    --go-soft:#DFF6EC;
    --sun:#FFB020;
    --sun-soft:#FFF1D6;
    --lock:#C3C9D9;
}

body{background:#fff;color:var(--ink);
     font-family:'Pretendard Variable',Pretendard,'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
     letter-spacing:-.02em;word-break:keep-all}
.pz_num{font-family:'Nunito','Pretendard Variable',sans-serif;letter-spacing:0}
#hd{background:#fff}
a{color:inherit}

/* 레이아웃 : 사이드바 없음 */
#container_wr{max-width:1100px;padding-left:20px;padding-right:20px}
#container{float:none;width:100%;margin:34px 0 60px;min-height:320px}
#aside{display:none}
#container_title{font-size:22px;font-weight:800;margin:0 0 20px}

/* ---------------------------------------------------------
   헤더
   --------------------------------------------------------- */
#pz_bar{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--line)}
.pz_bar_in{display:flex;align-items:center;gap:18px;max-width:1100px;margin:0 auto;
           padding:0 20px;height:64px;box-sizing:border-box}
.pz_logo{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:800;
         text-decoration:none;white-space:nowrap}
.pz_mark{width:26px;height:26px;border-radius:8px;background:var(--go);position:relative;flex:none}
.pz_mark:after{content:"";position:absolute;top:50%;right:-6px;width:12px;height:12px;
               border-radius:50%;background:var(--go);transform:translateY(-50%)}

.pz_nav{display:flex;gap:2px;margin-left:10px}
.pz_nav a{padding:8px 12px;border-radius:9px;font-size:14.5px;font-weight:600;
          color:var(--ink-2);text-decoration:none}
.pz_nav a:hover{background:var(--paper);color:var(--ink)}
.pz_nav a.on{background:var(--go-soft);color:var(--go-dark)}

.pz_me{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:14px}
.pz_pass{padding:5px 10px;border-radius:20px;background:var(--sun-soft);color:#8A5A00;
         font-size:12px;font-weight:700;text-decoration:none}
.pz_pass_off{background:#EEF1F7;color:#6C7692}
.pz_name{font-weight:600}
.pz_ava{width:32px;height:32px;border-radius:50%;background:#DDE3F0;color:var(--ink);
        display:flex;align-items:center;justify-content:center;font-weight:700;text-decoration:none}
.pz_btn_sm{padding:8px 14px;border-radius:10px;background:var(--go);color:#fff;
           font-size:14px;font-weight:700;text-decoration:none}
#pz_menu_btn{display:none;border:0;background:none;padding:8px;font-size:18px;color:var(--ink);cursor:pointer}

#pz_drawer{position:fixed;top:0;left:0;width:82%;max-width:320px;height:100%;background:#fff;
           z-index:1200;transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto}
#pz_drawer.on{transform:translateX(0);box-shadow:0 0 40px rgba(16,26,61,.18)}
.pz_drawer_hd{display:flex;align-items:center;justify-content:space-between;
              padding:18px 20px;border-bottom:1px solid var(--line);font-size:17px}
.pz_drawer_close{border:0;background:none;font-size:17px;color:var(--ink-2);cursor:pointer}
#pz_drawer a{display:block;padding:15px 20px;font-size:15.5px;font-weight:600;text-decoration:none}
#pz_drawer a:hover{background:var(--paper)}
#pz_drawer_bg{display:none;position:fixed;inset:0;background:rgba(16,26,61,.45);z-index:1100}
#pz_drawer_bg.on{display:block}

/* ---------------------------------------------------------
   로그인 화면
   --------------------------------------------------------- */
.pz_login{display:grid;grid-template-columns:1.05fr .95fr;min-height:600px;
          width:100vw;margin:-34px 0 0 calc(50% - 50vw)}
.pz_login_brand{padding:56px 6vw;background:var(--ink);color:#fff;position:relative;overflow:hidden}
.pz_login_brand:after{content:"";position:absolute;right:-90px;bottom:-120px;width:320px;height:320px;
                      border-radius:40px;background:rgba(255,255,255,.04);transform:rotate(18deg)}
.pz_login_brand .pz_logo{color:#fff;font-size:19px}
.pz_login_copy{margin-top:92px;max-width:340px;position:relative;z-index:1}
.pz_login_copy h1{margin:0 0 16px;font-size:34px;line-height:1.35;font-weight:800}
.pz_login_copy p{margin:0;color:#A9B2CC;font-size:15px;line-height:1.75}
.pz_login_stat{display:flex;gap:28px;margin:44px 0 0;padding:0;list-style:none;position:relative;z-index:1}
.pz_login_stat b{display:block;font-size:26px;font-weight:800}
.pz_login_stat span{color:#A9B2CC;font-size:13px}

.pz_login_form{padding:56px 6vw;display:flex;flex-direction:column;justify-content:center;max-width:560px}
.pz_login_form h2{margin:0 0 8px;font-size:22px;font-weight:800}
.pz_login_lead{margin:0 0 28px;color:var(--ink-2);font-size:14.5px}

/* 소셜 로그인 버튼 : 그누보드 소셜 플러그인 출력까지 함께 다듬는다 */
.pz_sns a,.pz_sns .pz_sns_btn,
.pz_sns #social_login a,.pz_sns .sns_wrap a{
    display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;
    margin:0 0 10px;border:1px solid var(--line);border-radius:14px;background:#fff;
    font-size:15px;font-weight:700;color:var(--ink);text-decoration:none;text-indent:0}
.pz_sns a:hover{border-color:#C9D0E2;background:#FAFBFE}
.pz_sns ul{margin:0;padding:0;list-style:none}
.pz_sns li{margin:0}
.pz_sns .sns-google,.pz_sns .google{border-color:var(--line)}
.pz_sns .sns-kakao,.pz_sns .kakao{background:#FEE500;border-color:#FEE500}
.pz_sns .sns-naver,.pz_sns .naver{background:#03C75A;border-color:#03C75A;color:#fff}
.pz_sns_help{margin:6px 0 0;font-size:13px;color:#B0473C}

.pz_trial{margin:26px 0 0;padding-top:22px;border-top:1px solid var(--line);
          font-size:14px;color:var(--ink-2);line-height:1.75}
.pz_trial a{color:var(--go-dark);font-weight:700}
.pz_terms{margin:18px 0 0;font-size:12.5px;color:#9AA3B8;line-height:1.7}
.pz_terms a{text-decoration:underline}

/* ---------------------------------------------------------
   이어서 풀기
   --------------------------------------------------------- */
.pz_resume{display:flex;align-items:center;gap:26px;padding:26px 28px;border-radius:18px;
           background:linear-gradient(120deg,#101A3D,#1D2B5E);color:#fff}
.pz_resume_lv{flex:0 0 92px;height:92px;border-radius:22px;background:rgba(255,255,255,.08);
              display:flex;flex-direction:column;align-items:center;justify-content:center}
.pz_resume_lv span{font-size:11px;color:#A9B2CC;font-weight:700;letter-spacing:.08em}
.pz_resume_lv b{font-size:34px;font-weight:800;line-height:1.1}
.pz_resume_txt{flex:1 1 auto;min-width:0}
.pz_resume_txt h3{margin:0 0 8px;font-size:20px;font-weight:800}
.pz_resume_txt p{margin:0 0 14px;color:#A9B2CC;font-size:14px}
.pz_track{height:8px;border-radius:8px;background:rgba(255,255,255,.14);overflow:hidden;max-width:420px}
.pz_track i{display:block;height:100%;background:var(--go);border-radius:8px}
.pz_btn{flex:0 0 auto;display:inline-block;padding:16px 28px;border:0;border-radius:14px;
        background:var(--go);color:#fff;font-size:15px;font-weight:800;text-decoration:none}
.pz_btn:hover{background:var(--go-dark);color:#fff}
.pz_resume_locked{background:linear-gradient(120deg,#2B3252,#3C4468)}

/* ---------------------------------------------------------
   단계 타일
   --------------------------------------------------------- */
.pz_sec{display:flex;align-items:baseline;justify-content:space-between;margin:40px 0 16px}
.pz_sec h3{margin:0;font-size:18px;font-weight:800}
.pz_sec span{color:var(--ink-2);font-size:13.5px}

.pz_levels{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.pz_lv{position:relative;display:block;padding:20px 18px 18px;border:1px solid var(--line);
       border-radius:16px;background:#fff;text-decoration:none;transition:.2s}
.pz_lv:hover{border-color:#C9D0E2}
.pz_lv_no{display:block;font-size:12px;font-weight:800;color:var(--ink-2)}
.pz_lv_no b{font-size:22px;color:var(--ink);margin-right:3px}
.pz_lv_tit{display:block;margin:8px 0 14px;font-size:14.5px;font-weight:700;line-height:1.45}
.pz_dots{display:flex;gap:5px}
.pz_dots i{width:100%;height:5px;border-radius:5px;background:#E9EDF6}
.pz_lv_badge{position:absolute;top:16px;right:14px;font-size:11px;font-weight:800;
             padding:3px 8px;border-radius:20px;background:#EEF1F7;color:#9AA3B8}

.pz_lv_done{border-color:var(--go-soft);background:#F7FDFA}
.pz_lv_done .pz_dots i.on{background:var(--go)}
.pz_lv_done .pz_lv_badge{background:var(--go-soft);color:var(--go-dark)}
.pz_lv_now{border-color:var(--sun);box-shadow:0 8px 20px rgba(255,176,32,.18)}
.pz_lv_now .pz_dots i.on{background:var(--sun)}
.pz_lv_now .pz_lv_badge{background:var(--sun-soft);color:#8A5A00}
.pz_lv_open .pz_dots i.on{background:var(--go)}
.pz_lv_lock{background:#FAFBFD;border-style:dashed;cursor:default}
.pz_lv_lock .pz_lv_no b,.pz_lv_lock .pz_lv_tit{color:var(--lock)}

.pz_promo{display:flex;align-items:center;justify-content:space-between;gap:20px;
          margin-top:36px;padding:24px 26px;border-radius:18px;background:var(--paper)}
.pz_promo strong{display:block;font-size:16px;font-weight:800;margin-bottom:6px}
.pz_promo p{margin:0;color:var(--ink-2);font-size:14px}

/* ---------------------------------------------------------
   푸터
   --------------------------------------------------------- */
#pz_ft{border-top:1px solid var(--line);background:#FAFBFD}
.pz_ft_in{max-width:1100px;margin:0 auto;padding:36px 20px 44px}
.pz_ft_links{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:16px}
.pz_ft_links a{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none}
.pz_ft_links a:hover{color:var(--ink)}
.pz_ft_biz{margin:0 0 10px;color:#8C95AD;font-size:12.5px;line-height:1.9}
.pz_ft_biz span{margin-left:12px}
.pz_ft_copy{margin:0;color:#A6AEC2;font-size:12.5px}

#pz_top{position:fixed;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;
        border:1px solid var(--line);background:#fff;color:var(--ink-2);font-size:17px;
        display:none;cursor:pointer;box-shadow:0 6px 18px rgba(16,26,61,.12);z-index:900}
#pz_top.on{display:block}

/* ---------------------------------------------------------
   반응형
   --------------------------------------------------------- */
@media (max-width:1024px){
    .pz_levels{grid-template-columns:repeat(3,1fr)}
    .pz_nav{display:none}
    #pz_menu_btn{display:block}
}

@media (max-width:860px){
    .pz_login{grid-template-columns:1fr;min-height:0}
    .pz_login_brand{padding:36px 24px}
    .pz_login_copy{margin-top:34px}
    .pz_login_copy h1{font-size:27px}
    .pz_login_form{padding:32px 24px;max-width:none}
}

@media (max-width:768px){
    #container{margin-top:24px}
    .pz_login{margin-top:-24px}
    .pz_levels{grid-template-columns:repeat(2,1fr);gap:12px}
    .pz_resume{flex-wrap:wrap;gap:18px;padding:22px}
    .pz_resume_lv{flex:0 0 68px;height:68px;border-radius:18px}
    .pz_resume_lv b{font-size:26px}
    .pz_btn{width:100%;text-align:center}
    .pz_promo{flex-direction:column;align-items:flex-start}
    .pz_me .pz_name{display:none}
}

/* ---------------------------------------------------------
   퍼즐 풀이 화면 (stage.php)
   --------------------------------------------------------- */
.pz_play{background:var(--paper);border-radius:20px;padding:24px}
.pz_play_top{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.pz_play_back{font-size:13.5px;font-weight:700;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.pz_play_lb{font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.pz_play_top .pz_track{flex:1 1 auto;max-width:none;background:#E1E6F1}
.pz_play_top .pz_num{font-size:13px;font-weight:700;color:var(--ink-2)}

.pz_q{background:#fff;border-radius:18px;padding:32px 24px;text-align:center}
.pz_q_ko{margin:0 0 8px;color:var(--ink-2);font-size:14px}
.pz_q_hint{margin:0 0 24px;font-size:20px;font-weight:800}
.pz_slots{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:72px;
          padding:14px;border-radius:14px;border:2px dashed var(--line);background:#FBFCFE}
.pz_slot{padding:11px 18px;border:0;border-radius:11px;background:var(--ink);color:#fff;
         font-size:17px;font-weight:700;cursor:pointer}
.pz_pieces{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.pz_piece{padding:11px 18px;border:1px solid var(--line);border-radius:11px;background:#fff;
          font-size:17px;font-weight:700;cursor:pointer}
.pz_piece:hover{border-color:var(--go);color:var(--go-dark)}
.pz_piece.used{opacity:.35;cursor:default}
.pz_verdict{min-height:22px;margin:18px 0 0;font-size:14.5px;font-weight:700}
.pz_verdict.ok{color:var(--go-dark)}
.pz_verdict.no{color:#C0453A}

.pz_play_foot{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.pz_ghost{padding:13px 20px;border:1px solid var(--line);border-radius:12px;background:#fff;
          font-size:14px;font-weight:700;color:var(--ink-2);cursor:pointer}
.pz_solid{padding:13px 30px;border:0;border-radius:12px;background:var(--go);color:#fff;
          font-size:15px;font-weight:800;cursor:pointer}
.pz_solid:hover{background:var(--go-dark)}

/* 이용권 안내 (pass.php) */
.pz_pass_page{max-width:620px}
.pz_pass_page h2{margin:0 0 8px;font-size:24px;font-weight:800}
.pz_pass_lead{margin:0 0 24px;color:var(--ink-2);font-size:15px}
.pz_pass_card{padding:28px;border:1px solid var(--line);border-radius:18px}
.pz_pass_card strong{display:block;font-size:32px;font-weight:800}
.pz_pass_card > div span{color:var(--ink-2);font-size:14px}
.pz_pass_card ul{margin:20px 0;padding:0;list-style:none}
.pz_pass_card li{padding:9px 0 9px 24px;position:relative;font-size:15px;border-top:1px solid var(--line)}
.pz_pass_card li:before{content:"";position:absolute;left:2px;top:16px;width:10px;height:10px;
                        border-radius:50%;background:var(--go-soft);border:2px solid var(--go)}
.pz_pass_have{margin:0;color:var(--go-dark);font-weight:700}
.pz_pass_note{margin:16px 0 0;color:#9AA3B8;font-size:13px;line-height:1.7}

@media (max-width:768px){
    .pz_play{padding:16px;border-radius:16px}
    .pz_play_top{flex-wrap:wrap}
    .pz_play_top .pz_track{order:3;width:100%;flex:none}
    .pz_q{padding:24px 16px}
    .pz_q_hint{font-size:17.5px}
    .pz_piece,.pz_slot{font-size:15.5px;padding:10px 14px}
}

/* ---------------------------------------------------------
   단계 메뉴 (1~10 + 2차 유형)
   --------------------------------------------------------- */
.pz_nav{flex-wrap:nowrap;overflow:visible}
.pz_nav_i{position:relative;display:inline-block}
.pz_nav_i > a{display:block;padding:8px 11px;border-radius:9px;font-size:14px;font-weight:600;
              color:var(--ink-2);text-decoration:none;white-space:nowrap}
.pz_nav_i > a:hover{background:var(--paper);color:var(--ink)}
.pz_nav_i > a.on{background:var(--go-soft);color:var(--go-dark)}
.pz_sub{display:none;position:absolute;top:100%;left:0;min-width:180px;padding-top:8px;z-index:1001}
.pz_nav_i:hover .pz_sub{display:block}
.pz_sub b{display:block;padding:12px 14px 8px;font-size:12.5px;color:#9AA3B8;
          background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0}
.pz_sub a{display:block;padding:10px 14px;background:#fff;border-left:1px solid var(--line);
          border-right:1px solid var(--line);font-size:14.5px;font-weight:600;text-decoration:none}
.pz_sub a:last-child{border-bottom:1px solid var(--line);border-radius:0 0 12px 12px;
                     box-shadow:0 12px 24px rgba(16,26,61,.08)}
.pz_sub a:hover{background:var(--paper);color:var(--go-dark)}
.pz_adm_link{font-size:12.5px;font-weight:700;color:var(--go-dark);text-decoration:none;
             padding:5px 9px;border:1px solid var(--go-soft);border-radius:8px}
#pz_drawer .pz_drawer_sub{padding-left:34px;font-size:14px;font-weight:500;color:var(--ink-2)}

@media (max-width:1200px){
    .pz_nav > a:last-child{display:none}   /* 좁아지면 기록 메뉴는 드로어로 */
}

/* ---------------------------------------------------------
   퍼즐 관리 화면
   --------------------------------------------------------- */
.pz_adm_nav{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.pz_adm_nav strong{font-size:14px;color:#9AA3B8;font-weight:700}
.pz_adm_nav a{font-size:14.5px;font-weight:700;text-decoration:none;color:var(--ink-2)}
.pz_adm_nav a:hover{color:var(--go-dark)}
.pz_adm_tit{margin:22px 0 6px;font-size:22px;font-weight:800}
.pz_adm_lead{margin:0 0 20px;color:var(--ink-2);font-size:14.5px;line-height:1.7}
.pz_adm_lead code,.pz_adm_help code{background:var(--paper);padding:2px 6px;border-radius:5px;font-size:13px}

.pz_adm_tbl{width:100%;border-collapse:collapse;font-size:14px}
.pz_adm_tbl th{padding:10px;text-align:left;color:#9AA3B8;font-size:12.5px;font-weight:700;
               border-bottom:1px solid var(--line)}
.pz_adm_tbl td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.pz_adm_top td{font-weight:600}
.pz_adm_sub td{color:var(--ink-2);background:#FCFDFE}
.pz_adm_desc{display:block;font-size:12.5px;color:#9AA3B8;font-weight:400;margin-top:3px}
.pz_adm_sentence{line-height:2.2}
.pz_chunk{display:inline-block;margin:0 4px 4px 0;padding:4px 9px;border-radius:8px;
          background:var(--paper);font-size:13.5px}
.pz_chunk em{margin-left:6px;font-style:normal;font-size:11.5px;color:#9AA3B8}
.pz_adm_x{border:0;background:none;color:#B8BFCE;font-size:16px;cursor:pointer}
.pz_adm_x:hover{color:#C0453A}

.pz_adm_sub_tit{margin:34px 0 12px;font-size:17px;font-weight:800}
.pz_adm_form{display:flex;flex-wrap:wrap;gap:14px;padding:20px;border:1px solid var(--line);border-radius:14px}
.pz_adm_form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--ink-2)}
.pz_adm_form .pz_adm_wide{flex:1 1 100%}
.pz_adm_form input[type=text],.pz_adm_form input[type=number],
.pz_adm_form select,.pz_adm_form textarea{
    padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
    font:inherit;font-size:14.5px;font-weight:400;color:var(--ink)}
.pz_adm_form textarea{width:100%;line-height:1.7;font-size:13.5px}
.pz_adm_chk{flex-direction:row;align-items:center;gap:7px}
.pz_adm_btns{flex:1 1 100%;display:flex;gap:8px}
.pz_adm_btns .pz_ghost{display:inline-block;text-decoration:none;line-height:1.4}
.pz_adm_del{margin-top:12px}

.pz_adm_msg{padding:16px 18px;border-radius:12px;margin-bottom:20px;font-size:14.5px}
.pz_adm_msg.ok{background:var(--go-soft);color:var(--go-dark)}
.pz_adm_msg.no{background:#FDECEA;color:#B0473C}
.pz_adm_msg ul{margin:10px 0 0;padding-left:18px;font-size:13.5px}

.pz_adm_help{margin-top:34px;padding:22px;border-radius:14px;background:var(--paper)}
.pz_adm_help h4{margin:0 0 8px;font-size:14.5px;font-weight:800}
.pz_adm_help h4+p{margin:0 0 14px;font-size:14px;color:var(--ink-2);line-height:1.7}
.pz_adm_help pre{margin:0 0 18px;padding:14px;background:#fff;border-radius:10px;
                 font-size:13px;line-height:1.8;overflow-x:auto}
.pz_adm_note{margin:8px 0 0;font-size:13px;color:#8C95AD;line-height:1.7}

/* =========================================================
   PUZLANG v4 — 5단계 / 2차메뉴 / 더 또렷한 학습 UI
   ========================================================= */
:root{
    --pz-shadow:0 18px 50px rgba(16,26,61,.08);
    --pz-shadow-sm:0 8px 24px rgba(16,26,61,.07);
}

/* 상단바는 작고 단단하게 */
#pz_bar{backdrop-filter:saturate(160%) blur(12px);background:rgba(255,255,255,.96)}
.pz_bar_in{height:68px}
.pz_logo{font-size:18px;letter-spacing:-.035em}
.pz_mark{background:linear-gradient(145deg,#10B981,#08A975);box-shadow:0 7px 18px rgba(16,185,129,.24)}
.pz_mark:after{background:#10B981}
.pz_nav_i > a,.pz_nav > a{font-weight:750}
.pz_sub{min-width:210px}
.pz_sub b{font-size:12px;letter-spacing:.02em}

/* 이어서 학습: 정보량은 줄이고 CTA를 선명하게 */
.pz_resume{position:relative;overflow:hidden;padding:30px 30px;border-radius:24px;
           box-shadow:var(--pz-shadow);background:linear-gradient(125deg,#101A3D 0%,#17285C 68%,#123D51 100%)}
.pz_resume:after{content:"";position:absolute;right:-70px;top:-95px;width:260px;height:260px;
                 border-radius:50%;background:rgba(16,185,129,.13);pointer-events:none}
.pz_resume_lv{position:relative;z-index:1;border:1px solid rgba(255,255,255,.08)}
.pz_resume_txt,.pz_resume>.pz_btn{position:relative;z-index:1}
.pz_resume_txt h3{font-size:21px;letter-spacing:-.035em}
.pz_btn{border-radius:13px;box-shadow:0 10px 24px rgba(16,185,129,.22)}

/* 5단계 카드 */
.pz_sec{margin-top:44px}
.pz_levels{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.pz_lv{min-height:220px;padding:22px 18px 18px;border-radius:20px;overflow:hidden;
       box-shadow:0 1px 0 rgba(16,26,61,.02);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.pz_lv:before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:#E9EDF6}
.pz_lv:hover{transform:translateY(-3px);border-color:#D3D9E8;box-shadow:var(--pz-shadow-sm)}
.pz_lv_now:before{background:var(--sun)}
.pz_lv_done:before,.pz_lv_open:before{background:var(--go)}
.pz_lv_lock:before{background:#DCE1EC}
.pz_lv_no{padding-top:5px}
.pz_lv_no b{font-size:30px;line-height:1}
.pz_lv_tit{font-size:16px;margin:12px 0 8px;letter-spacing:-.04em}
.pz_lv_desc{display:block;min-height:52px;color:var(--ink-2);font-size:12.8px;line-height:1.55}
.pz_lv_subs{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 15px}
.pz_lv_subs span{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;
                 background:#F2F5FA;color:#6D7793;font-size:11.5px;font-weight:700;line-height:1.2}
.pz_lv_now .pz_lv_subs span{background:#FFF7E8;color:#93620C}
.pz_lv_done .pz_lv_subs span{background:#EAF8F2;color:#0A7855}
.pz_dots{position:absolute;left:18px;right:18px;bottom:18px}

/* 2차 메뉴가 있는 단계는 드롭다운을 조금 더 명확하게 */
.pz_nav_i:hover > a{background:#F4F7FB;color:var(--ink)}
.pz_sub{filter:drop-shadow(0 18px 30px rgba(16,26,61,.10))}
.pz_sub b,.pz_sub a{border-color:#E6EAF2}

/* 게임 화면 */
.pz_play{border:1px solid #EBEEF5;border-radius:24px;padding:26px;background:linear-gradient(180deg,#F5F7FB,#F1F4F9)}
.pz_q{border:1px solid #EBEEF5;border-radius:20px;box-shadow:0 10px 30px rgba(16,26,61,.04)}
.pz_q_hint{font-size:21px;letter-spacing:-.035em}
.pz_slots{background:#FAFCFF;border-color:#DDE4F0}
.pz_piece{box-shadow:0 3px 8px rgba(16,26,61,.03);transition:transform .12s ease,border-color .12s ease,color .12s ease}
.pz_piece:hover{transform:translateY(-1px)}

@media (max-width:1100px){
    .pz_levels{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
    .pz_levels{grid-template-columns:1fr 1fr}
    .pz_lv{min-height:210px}
}
@media (max-width:480px){
    .pz_levels{grid-template-columns:1fr}
    .pz_lv{min-height:190px}
    .pz_lv_desc{min-height:0}
}