:root{
    --bg:#f4f1ea;
    --bg2:#ece6da;
    --board:#20402f;
    --board-edge:#16301f;
    --wood-1:#d59a63;
    --wood-2:#a9713f;
    --wood-3:#75491f;
    --paper:#f0e2c0;
    --gold:#ffd651;
    --gold-soft:#ffe38a;
    --ink:#f6f4ec;
    --green-accent:#3f8a5c;
    --green-deep:#2c5f40;
    --text-dark:#3a352c;
    --text-mid:#6b6355;
    --shadow-lg:0 18px 40px -12px rgba(40,30,10,.35);
    --shadow-md:0 8px 22px -8px rgba(40,30,10,.28);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; font-size:19px;}
  /* system font stacks — no external dependency (works offline) */
  :root{
    --font-sans:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR","맑은 고딕",sans-serif;
    --font-head:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  }
  body{
    margin:0;
    font-family:var(--font-sans);
    font-size:18px;
    line-height:1.6;
    color:var(--text-dark);
    background:
      radial-gradient(1200px 500px at 50% -200px, rgba(63,138,92,.12), transparent 70%),
      linear-gradient(180deg, var(--bg), var(--bg2));
    min-height:100vh;
  }

  /* ===== Header ===== */
  header.app-header{
    position:relative;
    text-align:center;
    padding:38px 20px 30px;
    color:#fff;
    background:
      radial-gradient(700px 260px at 50% 0, rgba(255,214,81,.16), transparent 70%),
      linear-gradient(135deg,#25493a,#12281b 95%);
    box-shadow:0 10px 30px -10px rgba(0,0,0,.45);
  }
  header.app-header .crown{
    font-size:2.1rem;
    display:block;
    margin-bottom:6px;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
  }
  header.app-header h1{
    margin:0;
    font-family:var(--font-head);
    font-weight:800;
    font-size:2.05rem;
    letter-spacing:2px;
    text-shadow:0 2px 10px rgba(0,0,0,.35);
  }
  header.app-header p{
    margin:12px 0 0;
    font-size:1rem;
    opacity:.86;
    letter-spacing:.5px;
  }

  /* ===== Install (add to home screen) banner ===== */
  .install-banner{
    max-width:820px; margin:16px auto 0; padding:0 16px;
  }
  .install-toggle{
    width:100%; display:flex; align-items:center; justify-content:space-between;
    background:#fff; border:1px solid rgba(0,0,0,.06); cursor:pointer;
    border-radius:14px; padding:13px 18px;
    font-family:var(--font-sans); font-size:.95rem; font-weight:700; color:var(--green-deep);
    box-shadow:var(--shadow-md);
  }
  .install-toggle .chev{transition:transform .2s ease; color:var(--text-mid); font-weight:400;}
  .install-banner.open .install-toggle .chev{transform:rotate(180deg);}
  .install-body{
    display:none; background:#fff; border-radius:0 0 14px 14px; margin-top:-8px;
    padding:20px 18px 18px; box-shadow:var(--shadow-md);
    grid-template-columns:1fr 1fr; gap:18px;
  }
  .install-banner.open .install-body{display:grid;}
  .install-device{font-weight:800; color:var(--green-deep); margin-bottom:6px; font-size:.98rem;}
  .install-col ol{margin:0; padding-left:20px; font-size:.9rem; color:var(--text-mid); line-height:1.7;}
  .install-col .ico{font-size:1rem;}
  .install-dismiss{
    grid-column:1 / -1; justify-self:start; margin-top:4px;
    border:none; background:none; color:var(--text-mid); text-decoration:underline;
    cursor:pointer; font-size:.85rem; font-family:var(--font-sans); padding:4px 0;
  }
  @media (max-width:560px){
    .install-body{grid-template-columns:1fr;}
  }

  /* ===== Sticky tab bar ===== */
  .tabbar-wrap{
    position:sticky;
    top:0;
    z-index:30;
    background:linear-gradient(180deg, rgba(244,241,234,.96), rgba(244,241,234,.86));
    backdrop-filter:blur(8px);
    padding:16px 16px 12px;
    box-shadow:0 6px 18px -14px rgba(0,0,0,.5);
  }
  .tabs{
    display:flex;
    justify-content:center;
    gap:4px;
    max-width:820px;
    margin:0 auto;
    background:#e4dccb;
    border-radius:999px;
    padding:6px;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.12);
    overflow-x:auto;
  }
  .tab-btn{
    flex:0 1 auto;
    min-width:max-content;
    padding:13px 16px;
    border:none;
    background:transparent;
    color:var(--text-mid);
    border-radius:999px;
    font-family:var(--font-head);
    font-weight:700;
    cursor:pointer;
    font-size:1.05rem;
    transition:background .25s ease, color .25s ease;
    white-space:nowrap;
    text-align:center;
  }
  .tab-btn.active{
    background:linear-gradient(135deg,var(--wood-1),var(--wood-3));
    color:#fff;
    box-shadow:var(--shadow-md);
  }

  .phase-panel{display:none; max-width:820px; margin:0 auto; padding:8px 16px 80px;}
  .phase-panel.active{display:block; animation:fade .4s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

  /* 분기 내 장별 탭 (스티키 — 상단 탭바 바로 아래) */
  .chapter-nav{
    position:sticky; top:94px; z-index:20;
    display:flex; gap:7px; flex-wrap:wrap; align-items:center;
    padding:8px 0; margin:0 0 4px;
    background:linear-gradient(180deg, var(--bg) 80%, rgba(244,241,234,0));
  }
  .chnav-btn{
    border:1px solid rgba(117,73,31,.3); background:#fff; color:var(--wood-3);
    border-radius:999px; padding:8px 16px; font-weight:800; font-size:.95rem; cursor:pointer;
    font-family:var(--font-head); box-shadow:var(--shadow-md); transition:filter .15s, transform .1s;
  }
  .chnav-btn:hover{filter:brightness(1.04);}
  .chnav-btn:active{transform:scale(.95);}
  .day-block{scroll-margin-top:150px;}   /* 장별 탭/오늘로 이동 시 카드가 스티키 바에 안 가리도록 */
  @media (max-width:560px){ .chapter-nav{top:78px;} .chnav-btn{padding:7px 13px; font-size:.9rem;} .day-block{scroll-margin-top:130px;} }

  /* ===== Summary / progress card ===== */
  .phase-summary{
    background:#fff;
    border-radius:22px;
    padding:22px 24px;
    margin:22px 0 10px;
    box-shadow:var(--shadow-md);
    border:1px solid rgba(0,0,0,.04);
  }
  .phase-summary .title{
    font-family:var(--font-head);
    font-weight:800; font-size:1.35rem; color:var(--green-deep);
  }
  .phase-summary .range{font-size:.95rem; color:var(--text-mid); margin-top:4px;}
  .progress-head{
    display:flex; justify-content:space-between; align-items:baseline;
    margin:18px 0 8px;
  }
  .progress-head .pct{
    font-family:var(--font-head); font-weight:800;
    font-size:1.6rem; color:var(--wood-3);
  }
  .progress-head .frac{font-size:.95rem; color:var(--text-mid);}
  .progress-bar{background:#e9e3d6; border-radius:999px; height:14px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.15);}
  .progress-bar > div{
    height:100%; width:0%;
    background:linear-gradient(90deg,var(--green-accent),#6dbd8a);
    border-radius:999px;
    transition:width .5s cubic-bezier(.4,0,.2,1);
  }
  .summary-actions{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap;}
  .btn{
    border:none; cursor:pointer; font-size:.95rem; font-weight:700;
    padding:11px 18px; border-radius:12px; transition:transform .15s ease, box-shadow .15s;
    font-family:var(--font-sans);
  }
  .btn:active{transform:scale(.97);}
  .btn-primary{background:var(--green-deep); color:#fff; box-shadow:var(--shadow-md);}
  .btn-ghost{background:#efe9dc; color:var(--text-mid);}
  /* start-date editor */
  .date-row{
    display:flex; align-items:center; flex-wrap:wrap; gap:10px;
    margin-top:12px; font-size:.95rem; color:var(--text-mid);
  }
  .date-label{display:flex; align-items:center; gap:8px; font-weight:700; color:var(--green-deep);}
  .startdate{
    font-family:var(--font-sans); font-size:1rem; font-weight:700; color:var(--text-dark);
    padding:8px 12px; border:1px solid rgba(44,95,64,.3); border-radius:10px;
    background:#fff; box-shadow:var(--shadow-md); cursor:pointer;
  }
  .date-default{
    border:1px solid rgba(0,0,0,.12); background:#f2ece0; color:var(--text-mid);
    border-radius:8px; padding:6px 10px; font-size:.82rem; cursor:pointer; font-family:var(--font-sans);
  }
  .date-row .range{margin-top:0;}
  .tab-sub{display:none;}  /* 부제목(· N~M장)은 탭에서 숨김 — 5개 탭이 PC에서도 한 줄에 다 보이도록(범위는 각 패널 제목에 표시됨) */
  .day-block.is-today .board{outline:3px solid var(--gold); outline-offset:2px;}

  /* ===== Day block ===== */
  .day-block{
    margin:26px 0;
  }
  .day-head{
    display:flex; align-items:center; gap:12px; margin:0 4px 12px;
  }
  .day-badge{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-width:64px; padding:8px 10px; border-radius:16px;
    background:#fff; box-shadow:var(--shadow-md); border:1px solid rgba(0,0,0,.05);
  }
  .day-badge .m{font-size:.72rem; color:var(--text-mid); letter-spacing:.5px;}
  .day-badge .d{font-family:var(--font-head); font-weight:800; font-size:1.5rem; line-height:1; color:var(--text-dark);}
  .day-badge .wd{
    margin-top:5px; font-size:.75rem; font-weight:700; color:#fff;
    background:var(--wood-2); border-radius:999px; padding:2px 10px;
  }
  .day-badge .wd.weekend{background:#c0553b;}
  .day-info{flex:1;}
  .day-info .dnum{font-size:.85rem; color:var(--text-mid);}
  .day-info .theme{
    font-family:var(--font-head); font-weight:700;
    font-size:1.05rem; color:var(--green-deep); line-height:1.35;
  }
  .check{
    display:flex; align-items:center; gap:7px; cursor:pointer;
    font-size:.9rem; color:var(--text-mid); user-select:none;
    padding:8px 12px; border-radius:12px; background:#fff; box-shadow:var(--shadow-md);
    border:1px solid rgba(0,0,0,.05); white-space:nowrap;
  }
  .check input{
    appearance:none; width:22px; height:22px; border-radius:7px;
    border:2px solid #cabfa8; background:#fff;
    cursor:pointer; position:relative; transition:all .2s;
    flex-shrink:0;
  }
  .check input:checked{background:var(--green-accent); border-color:var(--green-accent);}
  .check input:checked::after{
    content:"✓"; position:absolute; inset:0; color:#fff; font-size:15px;
    display:flex; align-items:center; justify-content:center; font-weight:900;
  }
  .head-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
  .copy-btn{
    display:flex; align-items:center; gap:6px; cursor:pointer;
    font-size:.9rem; font-weight:700;
    font-family:var(--font-sans);
    padding:9px 13px; border-radius:12px; white-space:nowrap;
    box-shadow:var(--shadow-md);
    transition:transform .15s ease, filter .15s ease;
    color:var(--green-deep);
    background:linear-gradient(180deg,#fff,#e7f2ea);
    border:1px solid rgba(44,95,64,.28);
  }
  .copy-btn:hover{filter:brightness(1.03);}
  .copy-btn:active{transform:scale(.96);}
  .copy-btn:disabled{opacity:.7; cursor:default;}
  .prac-btn{
    display:flex; align-items:center; gap:6px; cursor:pointer;
    font-size:.9rem; font-weight:700;
    font-family:var(--font-sans);
    padding:9px 13px; border-radius:12px; white-space:nowrap;
    box-shadow:var(--shadow-md);
    transition:transform .15s ease, filter .15s ease;
    color:#7a3fa0;
    background:linear-gradient(180deg,#fff,#f0e9f7);
    border:1px solid rgba(122,63,160,.28);
  }
  .prac-btn:hover{filter:brightness(1.03);}
  .prac-btn:active{transform:scale(.96);}


  /* 관리자 본문 수정 버튼 — 관리자 모드에서만 노출 */
  .edit-btn{
    display:none; align-items:center; gap:6px; cursor:pointer;
    font-size:.9rem; font-weight:700; font-family:var(--font-sans);
    padding:9px 13px; border-radius:12px; white-space:nowrap; box-shadow:var(--shadow-md);
    color:#b8860b; background:linear-gradient(180deg,#fff,#fbf3dc); border:1px solid rgba(184,134,11,.35);
    transition:transform .15s ease, filter .15s ease;
  }
  body.admin .edit-btn{ display:flex; }
  .edit-btn:hover{filter:brightness(1.03);}
  .edit-btn:active{transform:scale(.96);}
  .admin-link{
    margin-top:10px; background:none; border:1px solid rgba(0,0,0,.15); border-radius:8px;
    color:var(--text-mid); font-size:.8rem; padding:5px 12px; cursor:pointer; font-family:var(--font-sans);
  }
  body.admin .admin-link{ background:#e7f2ea; color:var(--green-deep); border-color:rgba(44,95,64,.3); font-weight:700; }

  /* 본문 수정 모달 */
  .edit-modal{position:fixed; inset:0; z-index:220; display:none; align-items:center; justify-content:center; padding:20px;}
  .edit-modal.open{display:flex;}
  .edit-backdrop{position:absolute; inset:0; background:rgba(20,15,8,.78);}
  .edit-box{
    position:relative; z-index:1; background:#fff; border-radius:20px; padding:22px;
    width:min(96vw,620px); max-height:90vh; overflow:auto;
    display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-lg);
  }
  .edit-close{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:999px; border:none; background:#efe9dc; color:var(--text-dark); font-size:1.1rem; cursor:pointer;}
  .edit-title{font-family:var(--font-head); font-weight:800; font-size:1.25rem; color:var(--green-deep);}
  .edit-title span{font-size:.85rem; color:var(--text-mid); font-weight:600;}
  .edit-item{display:flex; flex-direction:column; gap:6px;}
  .edit-vref{font-family:var(--font-head); font-weight:800; color:var(--wood-3); font-size:1.05rem; display:flex; align-items:center; gap:10px;}
  .edit-restore{background:#f2ece0; border:1px solid rgba(0,0,0,.12); border-radius:8px; color:var(--text-mid); font-size:.78rem; padding:3px 9px; cursor:pointer; font-family:var(--font-sans);}
  .edit-ta{
    width:100%; box-sizing:border-box; border:2px solid #d8cfbb; border-radius:12px; padding:12px 14px;
    font-family:var(--font-sans); font-size:1.1rem; line-height:1.7; resize:vertical; color:var(--text-dark);
  }
  .edit-ta:focus{outline:none; border-color:var(--green-accent);}
  .edit-actions{display:flex; gap:10px; margin-top:4px;}

  /* ===== Practice modal ===== */
  .prac-modal{position:fixed; inset:0; z-index:210; display:none; align-items:center; justify-content:center; padding:20px;}
  .prac-modal.open{display:flex;}
  .prac-backdrop{position:absolute; inset:0; background:rgba(20,15,8,.78);}
  .prac-box{
    position:relative; z-index:1; background:#fff; border-radius:20px; padding:22px;
    width:min(96vw,640px); max-height:90vh; overflow:auto;
    display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-lg);
  }
  .prac-close{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:999px; border:none; background:#efe9dc; color:var(--text-dark); font-size:1.1rem; cursor:pointer;}
  .prac-head{display:flex; align-items:baseline; gap:12px;}
  .prac-title{font-family:var(--font-head); font-weight:800; font-size:1.3rem; color:var(--green-deep);}
  .prac-count{font-size:.95rem; color:var(--text-mid); font-weight:700;}
  .prac-ref{font-family:var(--font-head); font-weight:800; font-size:1.15rem; color:var(--wood-3);}
  .prac-controls{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
  .prac-toggle{display:flex; align-items:center; gap:7px; font-size:.95rem; font-weight:700; color:var(--text-dark); cursor:pointer;}
  .prac-toggle input{width:20px; height:20px; accent-color:var(--green-accent); cursor:pointer;}
  .prac-hint-btn,.prac-show-btn{
    border:1px solid rgba(0,0,0,.14); background:#f6f2ea; color:var(--text-mid);
    border-radius:10px; padding:8px 12px; font-size:.9rem; font-weight:700; cursor:pointer; font-family:var(--font-sans);
  }
  .prac-hint{background:#fbf7ec; border:1px solid #eadfc4; border-radius:12px; padding:12px 14px; font-size:1.05rem; line-height:1.7; color:var(--text-dark); word-break:keep-all;}
  .prac-input{
    width:100%; border:2px solid #d8cfbb; border-radius:14px; padding:14px 16px;
    font-family:var(--font-sans); font-size:1.15rem; line-height:1.7; resize:vertical; color:var(--text-dark);
    box-sizing:border-box;
  }
  .prac-input:focus{outline:none; border-color:var(--green-accent);}
  .prac-actions{display:flex; gap:10px; flex-wrap:wrap;}
  .prac-result:empty{display:none;}
  .prac-ok{display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 0;}
  .ok-circle{
    font-size:0; width:96px; height:96px; border-radius:50%;
    border:8px solid #e0322e; box-sizing:border-box;
    animation:pop .4s cubic-bezier(.3,1.4,.5,1);
  }
  @keyframes pop{from{transform:scale(.3); opacity:0;} to{transform:scale(1); opacity:1;}}
  .ok-text{font-family:var(--font-head); font-weight:800; font-size:1.4rem; color:#e0322e;}
  .prac-done{text-align:center; font-weight:800; font-size:1.2rem; color:var(--green-deep); margin-top:8px;}
  .prac-no{background:#fdf0ef; border:1px solid #f4c9c5; border-radius:14px; padding:14px 16px;}
  .no-title{font-size:.98rem; color:#b0361f; margin-bottom:12px; line-height:1.6;}
  .no-answer{font-size:1.2rem; line-height:2; color:var(--text-dark); word-break:keep-all;}
  /* 틀린/빠진 글자 = 빨간 형광펜 (연속 글자는 한 덩어리) */
  .wrong{
    color:#fff; background:#e0322e; font-weight:800; border-radius:4px; padding:1px 3px;
    text-decoration:none; box-decoration-break:clone; -webkit-box-decoration-break:clone;
  }
  .diff-row{display:flex; gap:10px; margin-top:10px; align-items:flex-start;}
  .diff-label{
    flex:0 0 auto; font-size:.8rem; font-weight:800; color:#fff; background:#8a8172;
    border-radius:6px; padding:4px 9px; margin-top:3px; white-space:nowrap;
  }
  .diff-row:last-child .diff-label{background:#3f8a5c;}
  .diff-empty{color:#999; font-weight:600;}
  .wrong-legend{background:#e0322e; color:#fff; padding:1px 6px; border-radius:4px;}

  /* ===== Pinkpop audio library ===== */
  .tab-btn.tab-pinkpop{color:#b33d78;}
  .tab-btn.tab-pinkpop.active{
    background:linear-gradient(135deg,#f06aa8,#c83f83); color:#fff;
    box-shadow:0 9px 22px rgba(190,54,122,.3);
  }
  .pinkpop-wrap{
    --pink:#ca3f83; --pink-deep:#92295e; --pink-soft:#fde8f2;
    margin:22px 0; border:1px solid #e7dfeb; border-radius:24px; overflow:hidden;
    background:#f7f6fb; box-shadow:var(--shadow-md);
    display:flex; flex-direction:column; height:clamp(610px,calc(100dvh - 104px),900px);
  }
  .pinkpop-titlebar{
    flex:0 0 auto; padding:16px; text-align:center; background:#f4f2fa; border-bottom:1px solid #e5e0e9;
    color:#2f2b32; font-family:var(--font-head); font-size:1.65rem; font-weight:800; letter-spacing:.16em;
  }
  .pinkpop-player{flex:0 0 auto; padding:13px 18px 10px; background:linear-gradient(180deg,#fbfaff,#f4f3f8);}
  .pinkpop-cover{
    position:relative; display:grid; grid-template-columns:52px minmax(0,1fr) 52px; align-items:center;
    min-height:190px; aspect-ratio:2.75/1; overflow:hidden; border-radius:20px; color:#fff;
    background:
      radial-gradient(circle at 62% 32%,rgba(250,224,151,.25),transparent 20%),
      linear-gradient(110deg,rgba(17,38,31,.98),rgba(44,54,50,.8) 55%,rgba(33,20,35,.9)),
      linear-gradient(30deg,#243b33,#705069);
    box-shadow:0 12px 28px rgba(38,27,40,.22);
  }
  .pinkpop-cover::before{
    content:"📖"; position:absolute; right:7%; bottom:-16%; font-size:9rem; opacity:.16;
    transform:rotate(-10deg); filter:grayscale(.2);
  }
  .pinkpop-cover::after{
    content:"♪  ♫  ♪"; position:absolute; left:7%; top:13%; color:#f3cf63; opacity:.5;
    font-size:1.15rem; letter-spacing:.6em;
  }
  .pinkpop-cover-copy{position:relative; z-index:1; text-align:center; min-width:0; padding:22px 8px;}
  .pinkpop-cover-copy small{display:block; margin-bottom:13px; opacity:.74; font-size:.68rem; font-weight:800; letter-spacing:.2em;}
  .pinkpop-cover-copy strong{display:block; color:#f5d45c; font-family:Georgia,serif; font-size:clamp(1.35rem,4.5vw,2.15rem); font-style:italic; text-shadow:0 2px 12px rgba(0,0,0,.35);}
  .pinkpop-cover-track{display:block; margin-top:18px; opacity:.88; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .pinkpop-cover-nav{
    position:relative; z-index:2; width:44px; height:54px; margin:auto; border:0; border-radius:16px;
    background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); font-size:2.2rem; cursor:pointer;
  }
  .pinkpop-cover-nav:hover{background:rgba(255,255,255,.16); color:#fff;}
  .pinkpop-cover-nav:disabled{opacity:.28; cursor:not-allowed;}
  .pinkpop-audio-engine{display:none;}
  .pinkpop-timeline{display:grid; grid-template-columns:48px minmax(0,1fr) 52px; gap:10px; align-items:center; margin:11px 0 6px; color:#514d55; font-variant-numeric:tabular-nums; font-size:.9rem;}
  .pinkpop-timeline span:last-child{text-align:right;}
  .pinkpop-range{width:100%; height:24px; margin:0; accent-color:var(--pink); cursor:pointer;}
  .pinkpop-now{display:grid; grid-template-columns:48px minmax(0,1fr) auto; gap:10px; align-items:center; padding:8px 0 5px; border-bottom:1px solid #ddd9e0;}
  .pinkpop-now-icon{
    width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:2px solid #c5d8e4;
    border-radius:50%; color:#75a8c2; background:#f9fcfe; font-size:1.25rem;
  }
  .pinkpop-now-copy{display:flex; flex-direction:column; min-width:0;}
  .pinkpop-now-badge{color:var(--pink-deep); font-size:.72rem; font-weight:900;}
  .pinkpop-now-title{color:#353138; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .pinkpop-now-meta{color:#747078; font-size:.75rem; margin-top:2px;}
  .pinkpop-now-actions{display:flex; align-items:center; gap:6px;}
  .pinkpop-mode-open{
    min-height:42px; border:2px solid #72a9c7; border-radius:999px; background:#fff; color:#317ca6;
    padding:7px 12px; font-family:var(--font-head); font-weight:800; cursor:pointer; white-space:nowrap;
  }
  .pinkpop-speed-open{
    min-height:42px; min-width:42px; border:2px solid #c98fae; border-radius:999px; background:#fff; color:#a02f67;
    padding:7px 10px; font-family:var(--font-head); font-weight:800; cursor:pointer; white-space:nowrap;
  }
  .pinkpop-transport{display:flex; justify-content:center; align-items:center; gap:23px; padding:11px 0 7px;}
  .pinkpop-transport-btn{
    width:46px; height:46px; border:0; border-radius:50%; background:#b9b9bf; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:1.2rem; cursor:pointer; box-shadow:0 5px 14px rgba(0,0,0,.12);
  }
  .pinkpop-transport-btn.play{width:58px; height:58px; background:#74747a; font-size:1.65rem;}
  .pinkpop-transport-btn:disabled{opacity:.36; cursor:not-allowed; box-shadow:none;}
  .pinkpop-volume{display:grid; grid-template-columns:36px minmax(0,1fr) 36px; align-items:center; gap:5px; padding:20px 18px 6px;}
  .pinkpop-volume button{width:36px; height:36px; border:0; background:transparent; color:#858188; font-size:1.15rem; cursor:pointer;}
  .pinkpop-volume-note{display:none; color:#716d74; font-size:.74rem; text-align:center; margin-top:3px; padding:0 18px 18px;}
  .pinkpop-volume-note.show{display:block;}
  .pinkpop-chapters{flex:0 0 auto; display:flex; gap:7px; overflow-x:auto; padding:11px 14px 9px; background:#fff; scrollbar-width:thin; border-top:1px solid #e7e2e8;}
  .pinkpop-chapter{flex:0 0 auto; border:1px solid #dfccd6; border-radius:999px; background:#fff; color:#82415f; padding:9px 13px; font-family:var(--font-head); font-weight:800; cursor:pointer;}
  .pinkpop-chapter.active{background:var(--pink); border-color:var(--pink); color:#fff;}
  .pinkpop-list-card{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; background:#fff; padding:0 14px 16px;}
  .pinkpop-list-head{position:sticky; top:0; z-index:3; display:flex; justify-content:space-between; gap:10px; align-items:center; padding:12px 2px 8px; border-bottom:1px solid #ddd8dd; background:#fff;}
  .pinkpop-list-head h3{margin:0; color:#5b3b4c; font-family:var(--font-head); font-size:1.15rem;}
  .pinkpop-list-head span{color:#746f76; font-size:.82rem; font-weight:700;}
  .pinkpop-track-list{display:grid;}
  .pinkpop-track{width:100%; display:grid; grid-template-columns:minmax(0,1fr) 46px; gap:2px; align-items:stretch; border-bottom:1px solid #dddadd; background:#fff; color:#373339;}
  .pinkpop-track:hover{background:#fff7fb;}
  .pinkpop-track.active{background:#fff0f7;}
  .pinkpop-track-main{min-width:0; display:grid; grid-template-columns:46px minmax(0,1fr) 52px; gap:10px; align-items:center; border:0; background:transparent; color:inherit; padding:10px 2px; text-align:left; cursor:pointer; font-family:var(--font-sans);}
  .pinkpop-track-play{width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#ef3156; color:#fff; font-size:1rem; box-shadow:0 3px 8px rgba(200,42,91,.22);}
  .pinkpop-track.active .pinkpop-track-play{background:var(--pink-deep);}
  .pinkpop-track-copy{display:flex; flex-direction:column; min-width:0;}
  .pinkpop-track-title{font-weight:800; line-height:1.4; overflow-wrap:anywhere;}
  .pinkpop-track-sub{color:#7a757c; font-size:.74rem; margin-top:3px;}
  .pinkpop-track-duration{text-align:right; color:#77727a; font-size:.8rem; font-variant-numeric:tabular-nums;}
  .pinkpop-favorite{align-self:center; justify-self:center; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:transparent; color:#aaa4aa; cursor:pointer; font-size:1.45rem; line-height:1; font-family:Arial,sans-serif;}
  .pinkpop-favorite:hover{background:#fff1d8; color:#c58a00;}
  .pinkpop-favorite[aria-pressed="true"]{color:#e0a000; text-shadow:0 1px 1px rgba(127,82,0,.2);}
  .pinkpop-favorite-label{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  .pinkpop-track.is-favorite{grid-template-columns:28px minmax(0,1fr) 46px;}
  .pinkpop-drag-handle{align-self:stretch; justify-self:center; width:28px; border:0; background:transparent; color:#c8c2c9; font-size:1.2rem; line-height:1; cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none;}
  .pinkpop-drag-handle:hover{color:#7a757c;}
  .pinkpop-track.is-favorite.dragging{opacity:.55; background:#fff7fb; box-shadow:0 4px 10px rgba(0,0,0,.12);}
  .pinkpop-track.is-favorite.dragging .pinkpop-drag-handle{cursor:grabbing;}
  .pinkpop-diff{display:inline-block; margin-right:3px; color:#a02f67;}
  .pinkpop-mode-modal{position:fixed; inset:0; z-index:360; display:none; align-items:center; justify-content:center; padding:16px;}
  .pinkpop-mode-modal.open{display:flex;}
  .pinkpop-mode-backdrop{position:absolute; inset:0; border:0; background:rgba(24,20,25,.68); cursor:default;}
  .pinkpop-mode-box{position:relative; z-index:1; width:min(560px,100%); max-height:calc(100dvh - 32px); overflow:auto; border-radius:18px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.34);}
  .pinkpop-mode-head{display:flex; align-items:center; justify-content:center; min-height:76px; padding:0 64px; border-bottom:1px solid #ddd8dd;}
  .pinkpop-mode-head h3{margin:0; color:#514b52; font-family:var(--font-head); font-size:1.45rem;}
  .pinkpop-mode-close{position:absolute; right:16px; top:14px; width:46px; height:46px; border:1px solid #ddd8dd; border-radius:50%; background:#f7f6f8; color:#9b969d; font-size:1.45rem; cursor:pointer;}
  .pinkpop-mode-options{padding:16px 18px 19px;}
  .pinkpop-mode-option{width:100%; display:grid; grid-template-columns:122px minmax(0,1fr) 24px; align-items:center; gap:12px; border:0; border-radius:14px; background:#fff; color:#767178; padding:12px 8px; text-align:left; cursor:pointer; font-family:var(--font-sans);}
  .pinkpop-mode-option:hover{background:#f8f5f8;}
  .pinkpop-mode-option.selected{color:#302c31; background:#f9f1f6;}
  .pinkpop-mode-symbol{display:inline-flex; align-items:center; justify-content:center; min-height:42px; border:2px solid #bbb7bc; border-radius:999px; color:#8d888e; font-family:var(--font-head); font-weight:800;}
  .pinkpop-mode-option.selected .pinkpop-mode-symbol{border-color:#3188b7; color:#257ca9; background:#f3fbff;}
  .pinkpop-speed-options{padding:16px 18px 19px;}
  .pinkpop-speed-option{width:100%; display:grid; grid-template-columns:56px minmax(0,1fr) 24px; align-items:center; gap:12px; border:0; border-radius:14px; background:#fff; color:#767178; padding:12px 10px; text-align:left; cursor:pointer; font-family:var(--font-sans);}
  .pinkpop-speed-option:hover{background:#f8f5f8;}
  .pinkpop-speed-option.selected{color:#302c31; background:#f9f1f6;}
  .pinkpop-speed-value{font-weight:800; font-family:var(--font-head); color:#514b52;}
  .pinkpop-speed-option.selected .pinkpop-speed-value{color:#a02f67;}
  .pinkpop-speed-desc{font-size:1rem; line-height:1.45;}
  .pinkpop-speed-check{color:#a02f67; font-size:1.2rem; font-weight:900;}
  .pinkpop-mode-desc{font-size:1rem; line-height:1.45;}
  .pinkpop-mode-check{color:#2d8bb9; font-size:1.2rem; font-weight:900;}
  body.pinkpop-modal-open{overflow:hidden;}
  .pinkpop-cover-nav:focus-visible,.pinkpop-mode-open:focus-visible,.pinkpop-speed-open:focus-visible,.pinkpop-transport-btn:focus-visible,.pinkpop-volume button:focus-visible,.pinkpop-chapter:focus-visible,.pinkpop-track-main:focus-visible,.pinkpop-favorite:focus-visible,.pinkpop-mode-option:focus-visible,.pinkpop-speed-option:focus-visible,.pinkpop-mode-close:focus-visible{outline:3px solid #55a7d3; outline-offset:2px;}
  .pinkpop-loading,.pinkpop-error{
    margin:22px 0; padding:42px 20px; border-radius:20px; background:#fff; color:var(--text-mid);
    text-align:center; box-shadow:var(--shadow-md); line-height:1.65;
  }
  .pinkpop-error{color:#9b352f; background:#fff5f4;}
  /* overflow:hidden만으로 배경 스크롤은 충분히 잠긴다. 여기에 overscroll-behavior:none까지
     같이 걸면 안쪽 목록의 overscroll-behavior-y:contain과 충돌해서 일부 안드로이드 크롬/삼성
     인터넷에서 목록 자체의 터치 스크롤이 먹통이 되는 문제가 있어 뺐다. */
  html.pinkpop-view-open,html.pinkpop-view-open body{overflow:hidden;}
  html.pinkpop-view-open .tabbar-wrap{position:fixed; inset:0 0 auto; z-index:30;}
  html.pinkpop-view-open #panel_pinkpop.phase-panel.active{
    position:fixed; z-index:31; left:0; right:0; top:var(--pinkpop-tabs-height,92px); bottom:0;
    display:flex; justify-content:center; max-width:none; margin:0;
    padding:8px 16px max(0px,env(safe-area-inset-bottom)); overflow:hidden;
    background:var(--bg); animation:none;
  }
  html.pinkpop-view-open #panel_pinkpop .pinkpop-wrap{
    width:min(1120px,100%); height:100%; min-height:0; margin:0; border-radius:20px 20px 0 0;
    /* 커버·플레이어를 포함한 화면 전체를 하나로 스크롤한다. 곡 목록만 따로
       스크롤되면 가로모드처럼 위쪽이 화면을 다 차지할 때 목록이 아예 안 보일
       수 있어서, 위쪽도 같이 스크롤되어 올라가도록 바꿨다. */
    display:block; overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain; touch-action:pan-y; scrollbar-gutter:stable;
  }
  html.pinkpop-view-open #panel_pinkpop .pinkpop-list-card{
    flex:none; height:auto; min-height:0; max-height:none; overflow:visible;
    padding-bottom:max(16px,env(safe-area-inset-bottom));
  }
  @media (min-width:561px){
    html.pinkpop-view-open #panel_pinkpop .pinkpop-titlebar{padding:8px 14px; font-size:1.25rem;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-player{
      display:grid; grid-template-columns:minmax(165px,.9fr) minmax(120px,.62fr) minmax(120px,.65fr);
      grid-template-areas:"cover timeline timeline" "cover now now" "cover transport transport";
      column-gap:14px; row-gap:2px; align-items:center; padding:7px 14px 6px;
    }
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover{grid-area:cover; height:132px; min-height:132px; aspect-ratio:auto;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-copy{padding:9px 5px;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-copy small{margin-bottom:5px; font-size:.58rem;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-copy strong{font-size:1.35rem; line-height:1.08;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-track{margin-top:5px; font-size:.66rem;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-timeline{grid-area:timeline; margin:0;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-now{grid-area:now; padding:2px 0;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-transport{grid-area:transport; padding:1px 0;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-transport-btn{width:36px; height:36px; font-size:.95rem;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-transport-btn.play{width:46px; height:46px; font-size:1.25rem;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-chapters{padding:7px 14px 6px;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-chapter{padding:7px 11px;}
  }
  @media (min-width:561px) and (max-width:760px){
    html.pinkpop-view-open #panel_pinkpop .pinkpop-player{
      grid-template-columns:minmax(165px,.85fr) minmax(120px,.62fr) minmax(120px,.65fr);
      column-gap:10px; padding:6px 10px 5px;
    }
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover{
      height:116px; min-height:116px; grid-template-columns:34px minmax(0,1fr) 34px; border-radius:14px;
    }
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover::before{font-size:5rem;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover::after{font-size:.75rem; letter-spacing:.35em;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-nav{width:30px; height:38px; border-radius:12px; font-size:1.6rem;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-copy{padding:5px 2px;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-copy small{margin-bottom:3px; font-size:.5rem; letter-spacing:.12em;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-copy strong{font-size:1.05rem; line-height:1.05;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-track{margin-top:3px; font-size:.56rem;}
  }
  @media (max-width:560px){
    html.pinkpop-view-open .tabbar-wrap{padding:6px 8px 5px;}
    html.pinkpop-view-open .tabs{gap:2px; padding:4px;}
    html.pinkpop-view-open .tab-btn{padding:7px 7px; font-size:.86rem;}
    .pinkpop-wrap{height:clamp(600px,calc(100dvh - 58px),820px); margin:6px -4px; border-radius:16px;}
    .pinkpop-titlebar{padding:3px 8px; font-size:.9rem; letter-spacing:.12em;}
    .pinkpop-player{padding:2px 8px 1px;}
    .pinkpop-cover{height:56px; min-height:56px; aspect-ratio:auto; grid-template-columns:28px minmax(0,1fr) 28px; border-radius:11px;}
    .pinkpop-cover::before{font-size:4rem;}
    .pinkpop-cover::after{font-size:.6rem; letter-spacing:.3em;}
    .pinkpop-cover-nav{width:25px; height:29px; border-radius:9px; font-size:1.35rem;}
    .pinkpop-cover-copy{padding:2px;}
    .pinkpop-cover-copy small{display:none;}
    .pinkpop-cover-copy strong{font-size:.86rem; line-height:1;}
    .pinkpop-cover-track{display:none;}
    .pinkpop-timeline{grid-template-columns:38px minmax(0,1fr) 42px; gap:4px; margin:2px 0 0; font-size:.68rem;}
    .pinkpop-range{height:18px;}
    .pinkpop-now{grid-template-columns:minmax(0,1fr) auto; gap:5px; padding:1px 0;}
    .pinkpop-now-icon{display:none;}
    .pinkpop-now-badge{font-size:.62rem;}
    .pinkpop-now-title{font-size:.78rem;}
    .pinkpop-now-meta{font-size:.6rem; margin-top:0;}
    .pinkpop-now-actions{gap:4px;}
    .pinkpop-mode-open{min-height:32px; padding:4px 7px; border-width:1px; font-size:.7rem;}
    .pinkpop-speed-open{min-height:32px; min-width:32px; padding:4px 6px; border-width:1px; font-size:.7rem;}
    .pinkpop-transport{gap:14px; padding:0;}
    .pinkpop-transport-btn{width:30px; height:30px; font-size:.8rem;}
    .pinkpop-transport-btn.play{width:36px; height:36px; font-size:1.05rem;}
    .pinkpop-volume{grid-template-columns:24px minmax(0,1fr) 24px; gap:1px;}
    .pinkpop-volume button{width:24px; height:24px; font-size:.78rem;}
    .pinkpop-chapters{padding:3px 7px; gap:4px;}
    .pinkpop-chapter{padding:4px 7px; font-size:.72rem;}
    .pinkpop-list-card{padding:0 7px 10px;}
    .pinkpop-list-head{padding:4px 2px 3px;}
    .pinkpop-list-head h3{font-size:.9rem;}
    .pinkpop-list-head span{font-size:.72rem;}
    .pinkpop-track{grid-template-columns:minmax(0,1fr) 34px; gap:0;}
    .pinkpop-track.is-favorite{grid-template-columns:22px minmax(0,1fr) 34px;}
    .pinkpop-drag-handle{width:22px; font-size:1rem;}
    .pinkpop-track-main{grid-template-columns:32px minmax(0,1fr) 38px; gap:3px; padding:4px 1px;}
    .pinkpop-track-play{width:28px; height:28px; font-size:.72rem;}
    .pinkpop-track-title{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.75rem; line-height:1.2;}
    .pinkpop-track-sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:0; font-size:.6rem;}
    .pinkpop-track-duration{font-size:.68rem;}
    .pinkpop-favorite{width:32px; height:32px; font-size:1.12rem;}
    .pinkpop-mode-option,.pinkpop-speed-option{grid-template-columns:104px minmax(0,1fr) 20px; gap:8px; padding:10px 5px;}
    .pinkpop-mode-desc,.pinkpop-speed-desc{font-size:.9rem;}
    html.pinkpop-view-open #panel_pinkpop.phase-panel.active{padding:4px 10px max(0px,env(safe-area-inset-bottom));}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-wrap{width:min(820px,100%); border-radius:18px 18px 0 0;}
  }
  @media (max-width:560px) and (max-height:740px){
    html.pinkpop-view-open .tabbar-wrap{padding-top:4px; padding-bottom:3px;}
    html.pinkpop-view-open .tab-btn{padding-top:6px; padding-bottom:6px;}
    html.pinkpop-view-open #panel_pinkpop.phase-panel.active{padding-top:2px;}
    .pinkpop-titlebar{padding:2px 7px; font-size:.84rem;}
    .pinkpop-player{padding-top:1px;}
    .pinkpop-cover{height:46px; min-height:46px;}
    .pinkpop-cover-copy strong{font-size:.78rem;}
    .pinkpop-transport-btn{width:28px; height:28px;}
    .pinkpop-transport-btn.play{width:34px; height:34px;}
  }
  @media (max-width:560px) and (max-height:700px){
    html.pinkpop-view-open #panel_pinkpop .pinkpop-titlebar{display:none;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover{height:42px; min-height:42px;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-nav{width:23px; height:27px;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-copy strong{font-size:.74rem;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-now-badge,
    html.pinkpop-view-open #panel_pinkpop .pinkpop-now-meta{display:none;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-now-title{font-size:.72rem;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-volume-note.show{font-size:.55rem; line-height:1.05; margin-top:0;}
  }
  /* 가로모드(폭은 넓은데 높이가 작은) 폰: 위의 압축 규칙들은 전부 max-width가
     같이 걸려 있어 폭이 561px를 넘는 가로모드에는 적용되지 않았다. 화면 전체가
     하나로 스크롤되긴 하지만, 타이틀+커버+플레이어까지 다 지나야 목록이 보이면
     스크롤을 너무 많이 해야 하므로 폭과 무관하게 높이만 보고도 미리 압축한다. */
  @media (max-height:520px){
    html.pinkpop-view-open #panel_pinkpop .pinkpop-titlebar{display:none;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-player{padding-top:4px; padding-bottom:2px; row-gap:0;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover{height:58px; min-height:58px;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-nav{width:23px; height:27px;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-copy small{display:none;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-copy strong{font-size:.9rem; line-height:1.1;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover-track{display:none;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-now-badge,
    html.pinkpop-view-open #panel_pinkpop .pinkpop-now-meta{display:none;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-now-title{font-size:.78rem;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-transport-btn{width:28px; height:28px; font-size:.85rem;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-transport-btn.play{width:34px; height:34px; font-size:1.05rem;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-volume-note.show{display:none;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-chapters{padding:4px 12px 3px;}
    html.pinkpop-view-open #panel_pinkpop .pinkpop-list-head{padding:6px 2px 5px;}
  }
  @media (max-height:400px){
    html.pinkpop-view-open #panel_pinkpop .pinkpop-cover{height:44px; min-height:44px;}
  }
  @media (prefers-reduced-motion:reduce){
    .pinkpop-track,.pinkpop-cover-nav,.pinkpop-transport-btn{transition:none;}
  }

  /* ===== Exam (mock test) ===== */
  .tab-btn.tab-exam{color:#b8860b;}
  .tab-btn.tab-exam.active{background:linear-gradient(135deg,#ffd83d,#f0a500); color:#3a2c00;}
  /* 실전 모의고사 탭은 시안대로 옅은 블루 배경 위에 흰 카드가 얹힌 구성 */
  #panel_exam.phase-panel.active{background:#eef2fb;}
  .exam-wrap{background:#fff; border-radius:24px; padding:20px; box-shadow:0 6px 24px -10px rgba(30,45,80,.18); margin:18px 0;}
  .exam-head-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:6px 8px 14px;}
  .exam-head{font-family:var(--font-head); font-weight:800; font-size:1.75rem; color:#1a1d23; display:flex; align-items:center; gap:12px;}
  .exam-head span{color:#8b93a3; font-weight:700; font-size:1.05rem;}
  .exam-head-icon{flex:0 0 auto; font-size:1.9rem; line-height:1;}
  .exam-mascot{flex:0 0 auto; display:flex; align-items:center;}
  .exam-mascot img{display:block; height:132px; width:auto; max-width:100%; object-fit:contain;}
  /* 설정 영역은 시안처럼 안쪽 카드로 한 번 더 감싼 느낌 */
  .exam-config{
    display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-end;
    background:#fff; border:1px solid #e8ecf4; border-radius:18px;
    padding:18px 20px 20px; box-shadow:0 2px 10px -6px rgba(30,45,80,.12);
  }
  .ex-field{display:flex; flex-direction:column; gap:8px;}
  .ex-field label{display:flex; align-items:center; gap:6px; font-size:.92rem; color:#3d4657; font-weight:800; padding-left:2px;}
  .ex-field-icon{display:inline-flex; align-items:center; justify-content:center; font-size:1em;}
  .ex-field select, .ex-field input{
    font-family:var(--font-sans); font-size:1.02rem; font-weight:700; color:#1f2430;
    padding:13px 15px; border:1px solid #e2e6ef; border-radius:14px; background:#fff; cursor:pointer;
  }
  .ex-field select:focus, .ex-field input:focus{outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15);}
  .ex-field input#ex-count{width:100px;}
  .ex-chapter-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  #ex-chapter-span{color:#8b93a3; font-weight:700; white-space:nowrap;}
  .ex-range{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .ex-range select{padding:13px 10px;}
  .ex-range-tilde{font-weight:800; color:var(--text-mid); padding:0 2px;}
  .ex-config-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex-basis:100%; margin-top:6px;}
  .exam-config .btn{padding:14px 24px; border-radius:14px; font-size:1.02rem; box-shadow:none;}
  .ex-btn-gen{background:#2563eb; color:#fff; box-shadow:0 6px 16px -6px rgba(37,99,235,.6);}
  .ex-btn-shuffle{background:#fff; color:#2563eb; border:1.5px solid #cfdcf8;}
  .ex-btn-print{background:#fff; color:#2563eb; border:1.5px solid #cfdcf8;}
  .ex-btn-review{background:#fffdf3; color:#c2740a; border:1.5px solid #f5d78a;}
  .ex-btn-review:hover{background:#fffaea;}
  .exam-body{margin-top:20px;}
  .exam-empty{color:var(--text-mid); text-align:center; padding:40px 10px; font-size:1.05rem;}
  .exam-bar{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
  .exam-badge{background:#ffcf33; color:#3a2c00; font-weight:800; padding:5px 14px; border-radius:999px; font-size:.9rem;}
  #ex-timer{font-family:var(--font-head); font-weight:800; font-size:1.25rem; color:var(--wood-3);}
  .exam-q{border:1px solid #e8ecf4; border-radius:20px; padding:20px 22px; margin:16px 0; background:#fff; box-shadow:0 4px 18px -10px rgba(30,45,80,.2);}
  .exam-q.q-correct{border-color:#8fd0a8; background:#f2fbf5;}
  .exam-q.q-wrong{border-color:#f0b8b2; background:#fdf3f2;}
  .exam-qhead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;}
  .exam-qhead-info{display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap;}
  .exam-qcopy{
    flex:0 0 auto; display:flex; align-items:center; gap:5px; cursor:pointer;
    font-size:.8rem; font-weight:700; font-family:var(--font-sans);
    padding:6px 11px; border-radius:10px; white-space:nowrap;
    color:#5b6472; background:#fff;
    border:1px solid #dde3ee;
  }
  .exam-qcopy:hover{filter:brightness(1.03);}
  .exam-qcopy:active{transform:scale(.96);}
  .exam-qhead .qno{background:var(--green-deep); color:#fff; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; flex-shrink:0;}
  .exam-qhead .qref{font-family:var(--font-head); font-weight:800; color:var(--wood-3); font-size:1.05rem;}
  .qtag{font-size:.82rem; font-weight:800; padding:5px 13px; border-radius:999px;}
  .tag-blank{background:#e4edff; color:#2b62c9;}
  .tag-write{background:#f0e9fb; color:#7a3fa0;}
  .qtitle{font-family:var(--font-head); font-weight:800; color:#1a1d23; font-size:1.12rem;}
  .exam-section{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-family:var(--font-head); font-weight:800; font-size:1.3rem; color:#1a1d23;
    background:#fff; border-radius:18px; padding:18px 20px; margin:22px 0 14px;
    box-shadow:0 3px 14px -8px rgba(30,45,80,.2); position:relative; padding-left:26px;
  }
  .exam-section::before{
    content:""; position:absolute; left:12px; top:16px; bottom:16px;
    width:5px; border-radius:999px; background:#2563eb;
  }
  .exam-section::after{content:"📝"; font-size:1.4rem; opacity:.3;}
  .exam-hint{
    background:#eef2fe; border-left:4px solid #3b82f6; border-radius:12px;
    padding:12px 16px; margin:10px 0 14px; font-size:.95rem; color:#3b5bb5; font-weight:600; line-height:1.5; word-break:keep-all;
  }
  .exam-cloze{font-size:1.2rem; line-height:2; color:#2b4bc9; font-weight:600; word-break:keep-all; margin-bottom:12px;}
  .cloze-gap{color:#2b4bc9; font-weight:800; white-space:nowrap;}
  .cloze-blank{display:inline-block; width:2.6em; margin:0 2px;}
  .exam-boxes{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .box-wrap{flex:1 1 240px; min-width:190px;}
  .q-actions{display:flex; gap:10px; margin-left:auto;}
  .qbtn{border:none; cursor:pointer; font-family:var(--font-sans); font-weight:800; font-size:1rem; padding:12px 20px; border-radius:12px; color:#fff; white-space:nowrap; transition:filter .15s, transform .1s;}
  .qbtn:hover{filter:brightness(1.05);}
  .qbtn:active{transform:scale(.96);}
  .qbtn-grade{background:#2563eb;}
  .qbtn-reset{background:#16a34a;}
  .qbtn-show{background:#ef4444;}
  .blank-in{
    font-family:var(--font-sans); font-size:1.05rem; font-weight:700;
    width:100%; box-sizing:border-box; padding:11px 14px;
    border:1px solid #d8dde6; border-radius:12px; background:#f6f7f9; color:var(--text-dark);
  }
  .blank-in::placeholder{color:#9aa3b0; font-weight:600;}
  .blank-in:focus{outline:none; border-color:#3b82f6; background:#fff;}
  .blank-in.blank-ok{border-color:#22b866; background:#eefaf1; color:#137a45;}
  .blank-in.blank-no{border-color:#e0322e; background:#fdeeed; color:#e0322e;}
  .exam-writeref{font-weight:700; color:#2b4bc9; margin-bottom:8px;}
  .write-in{width:100%; box-sizing:border-box; border:1.5px solid #dde3ee; border-radius:12px; padding:12px 14px; font-family:var(--font-sans); font-size:1.1rem; line-height:1.7; resize:vertical;}
  .write-in:focus{outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15);}
  .write-in.blank-ok{border-color:#3f8a5c; background:#f2fbf5;}
  .write-in.blank-no{border-color:#e0322e; background:#fdf3f2;}
  .exam-qresult{margin-top:10px; font-size:1rem; line-height:1.8;}
  .exam-qresult:empty{display:none;}
  .q-ok{color:#e0322e; font-weight:800; font-size:1.15rem;}
  .q-no{color:#b0361f; font-weight:800;}
  .q-answer{color:var(--text-dark); font-weight:700; word-break:keep-all;}
  /* "정답 보기"로 펼친 정답: 본문 글자색과 섞이지 않게 파란 박스로 눈에 띄게 */
  .q-answer-reveal{
    background:#eef4ff; border-left:4px solid #3b82f6; border-radius:10px;
    padding:12px 14px; color:#2b4bc9; font-weight:700; font-size:1.05rem;
    line-height:1.7; word-break:keep-all;
  }
  .exam-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:22px; padding-top:18px; border-top:1px dashed #dfe4ee;}
  .exam-actions .btn{padding:15px 26px; border-radius:14px; font-size:1.05rem;}
  .ex-nospace{display:flex; align-items:center; gap:8px; font-size:.98rem; font-weight:800; color:#1f2430; cursor:pointer;}
  .ex-nospace input{width:20px; height:20px; accent-color:#16a34a;}
  .ex-btn-grade{font-size:1.05rem; padding:12px 26px;}
  .exam-actions .ex-btn-gradeall{background:#1e3a5f; color:#fff; box-shadow:0 6px 16px -8px rgba(30,58,95,.7);}
  .exam-actions .ex-btn-resetall{background:#fff; color:#3d4657; border:1.5px solid #dfe4ee;}
  .exam-score{font-size:1.2rem; color:var(--green-deep); font-weight:700;}
  .exam-score b{color:var(--wood-3); font-size:1.35rem;}

  /* 인쇄 전용 시험지 머리말 — 화면에서는 숨긴다 */
  .exam-print-head{display:none;}
  .write-rules{display:none;}

  /* 프린트: A4 실제 시험지처럼 인쇄 */
  @media print{
    @page{ size:A4 portrait; margin:14mm 13mm; }
    html, body{background:#fff !important;}
    body.printing-exam > *{display:none !important;}
    body.printing-exam #panels{display:block !important;}
    body.printing-exam .phase-panel{display:none !important;}
    body.printing-exam #panel_exam{display:block !important; box-shadow:none !important; border:0 !important; padding:0 !important; margin:0 !important; background:#fff !important;}
    /* 화면용 UI는 모두 감춘다 */
    body.printing-exam .exam-config, body.printing-exam .exam-actions,
    body.printing-exam .exam-qresult, body.printing-exam .exam-bar,
    body.printing-exam .exam-hint, body.printing-exam .q-actions,
    body.printing-exam .exam-head-row,
    body.printing-exam .exam-qcopy, body.printing-exam .qtag,
    body.printing-exam .exam-writeref,
    body.printing-exam .write-in{display:none !important;}
    body.printing-exam .exam-wrap{box-shadow:none; padding:0; background:#fff;}

    /* 시험지 머리말 */
    body.printing-exam .exam-print-head{
      display:block !important; text-align:center;
      border-bottom:2.5px solid #000; padding-bottom:3mm; margin-bottom:5mm;
    }
    body.printing-exam .eph-title{font-family:var(--font-head); font-size:17pt; font-weight:800; color:#000; letter-spacing:.06em;}
    body.printing-exam .eph-sub{font-size:9.5pt; color:#000; margin-top:1.5mm;}
    body.printing-exam .eph-fields{
      display:flex; justify-content:center; gap:9mm;
      margin-top:3mm; font-size:9.5pt; color:#000;
    }
    body.printing-exam .eph-fields b{display:inline-block; width:22mm; border-bottom:1px solid #000;}

    /* 문항 조판 — 한 문항이 페이지에 걸쳐 잘리지 않게 */
    body.printing-exam .exam-q{
      break-inside:avoid; page-break-inside:avoid;
      border:0; border-radius:0; background:#fff !important;
      padding:0; margin:0 0 5.5mm;
    }
    body.printing-exam .exam-section{
      break-after:avoid; page-break-after:avoid;
      background:none !important; border:0; border-bottom:1.2px solid #000;
      color:#000; font-size:11pt; padding:0 0 1.2mm; margin:4mm 0 3.5mm;
    }
    body.printing-exam .exam-qhead{display:block !important; margin-bottom:1.8mm;}
    body.printing-exam .qtitle{font-size:10.5pt; color:#000;}
    body.printing-exam .qtitle-ch{display:none !important;}
    body.printing-exam .exam-cloze{
      font-size:10.5pt; line-height:1.85; color:#000; font-weight:500;
      margin-bottom:2.5mm;
    }
    body.printing-exam .cloze-gap{color:#000; font-weight:700;}
    body.printing-exam .exam-writeref{font-size:10pt; color:#000; margin-bottom:2mm;}

    /* 빈칸형 답란 — 본문 괄호 안에 바로 쓰도록, 괄호를 정답 글자수만큼 넓혀서
       밑줄을 그어준다. 아래 별도 답란(줄·번호)은 필요 없어져 인쇄에서 뺀다. */
    body.printing-exam .cloze-blank{
      width:calc(var(--ans, 3) * 1.05em + 0.3em); height:1em;
      border-bottom:1px solid #000; vertical-align:-2px;
    }
    body.printing-exam .exam-boxes{display:none !important;}

    /* 서술형 답란 — 줄 노트처럼 3줄 */
    body.printing-exam .write-rules{display:block !important;}
    body.printing-exam .write-rules i{display:block; height:8mm; border-bottom:1px solid #000;}
  }

  /* ===== Image modal (mobile copy/save fallback) ===== */
  .img-modal{
    position:fixed; inset:0; z-index:200;
    display:none; align-items:center; justify-content:center;
    padding:24px;
  }
  .img-modal.open{display:flex;}
  .img-modal-backdrop{
    position:absolute; inset:0; background:rgba(20,15,8,.78);
  }
  .img-modal-box{
    position:relative; z-index:1;
    background:#fff; border-radius:20px; padding:20px;
    max-width:min(94vw, 560px); max-height:88vh;
    display:flex; flex-direction:column; gap:14px;
    box-shadow:var(--shadow-lg);
  }
  .img-modal-close{
    position:absolute; top:10px; right:10px;
    width:36px; height:36px; border-radius:999px; border:none;
    background:#efe9dc; color:var(--text-dark); font-size:1.1rem; cursor:pointer;
  }
  .img-modal-hint{
    margin:6px 30px 0 0; font-size:.92rem; color:var(--text-mid); line-height:1.6;
  }
  .img-modal-actions{display:flex; gap:10px;}
  .img-modal-save, .img-modal-share{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    font-family:var(--font-sans); font-size:.98rem; font-weight:700; cursor:pointer;
    padding:11px 18px; border-radius:12px; border:none; text-decoration:none;
  }
  .img-modal-save{background:var(--green-deep); color:#fff;}
  .img-modal-share{background:#3b82f6; color:#fff;}
  .img-modal-imgwrap{
    overflow:auto; border-radius:12px; background:#e9e3d6;
    display:flex; justify-content:center;
  }
  .img-modal-imgwrap img{
    max-width:100%; display:block; -webkit-touch-callout:default; user-select:auto;
  }

  /* ===== Chalkboard card ===== */
  .board{
    border-radius:22px;
    padding:12px;
    background:
      linear-gradient(160deg, var(--wood-1), var(--wood-2) 45%, var(--wood-3));
    box-shadow:var(--shadow-lg);
    position:relative;
    transition:transform .2s ease;
  }
  .board::before{
    /* wood grain sheen */
    content:""; position:absolute; inset:0; border-radius:22px;
    background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 9px);
    opacity:.5; pointer-events:none;
  }
  .day-block.done .board{outline:3px solid var(--green-accent); outline-offset:2px;}
  .day-block.done .board::after{
    content:"암송 완료 ✓"; position:absolute; top:-13px; right:16px; z-index:3;
    background:var(--green-accent); color:#fff; font-size:.8rem; font-weight:700;
    padding:5px 14px; border-radius:999px; box-shadow:var(--shadow-md);
  }
  .board-inner{
    background:
      radial-gradient(140% 120% at 15% 0, rgba(255,255,255,.06), transparent 55%),
      var(--board);
    border:1px solid var(--board-edge);
    border-radius:14px;
    padding:22px 24px 26px;
    position:relative;
    overflow:hidden;
    min-height:150px;
  }
  .board-title{
    color:#fff;
    font-family:var(--font-head);
    font-weight:800;
    font-size:1.22rem;
    text-align:center;
    letter-spacing:.5px;
    padding-bottom:12px;
    margin-bottom:14px;
    border-bottom:2px solid rgba(255,214,81,.45);
    position:relative; z-index:1;
    text-shadow:0 1px 6px rgba(0,0,0,.3);
  }
  .board-section{
    display:inline-block;
    background:linear-gradient(180deg,#f6ecd0,var(--paper));
    color:#3a5540;
    font-weight:700;
    font-size:.92rem;
    padding:6px 16px;
    border-radius:8px;
    margin-bottom:16px;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    position:relative; z-index:1;
  }
  .board-verse{
    color:var(--ink);
    font-size:1.4rem;
    line-height:2; /* keep this an exact value — the ruled-line gradient below is sized in "2em" to match it exactly */
    position:relative; z-index:1;
    letter-spacing:.2px;
    word-break:keep-all;
    background-image:repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(2em - 1px),
      rgba(255,255,255,.08) calc(2em - 1px), rgba(255,255,255,.08) 2em);
  }
  .board-verse + .board-verse{margin-top:16px;}
  .vnum{
    color:var(--gold); font-weight:800; margin-right:8px;
    font-family:var(--font-head);
    text-shadow:0 1px 4px rgba(0,0,0,.4);
  }
  /* 절 하나만 듣는 작은 버튼 — 칠판 위에 올라가므로 밝은 반투명으로 처리한다. */
  .verse-listen{
    display:inline-flex; align-items:center; justify-content:center;
    width:27px; height:27px; padding:0; margin-right:7px;
    vertical-align:middle; border-radius:50%;
    cursor:pointer; font-size:.82rem; line-height:1;
    color:#fff; background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.38);
    transition:transform .15s ease, background .15s ease;
  }
  .verse-listen:hover{background:rgba(255,255,255,.28);}
  .verse-listen:active{transform:scale(.94);}
  .verse-listen.playing{
    background:var(--gold); color:#3b2a00; border-color:var(--gold);
    box-shadow:0 0 10px rgba(255,190,0,.5);
  }
  .board-verse.tts-reading{
    background-color:rgba(255,205,60,.13);
    border-radius:10px;
    box-shadow:0 0 0 6px rgba(255,205,60,.13);
  }
  /* ----- 음성 암송 점검(마이크) ----- */
  /* 음성 암송 점검(마이크)은 아직 시연 단계라 관리자 로그인 시에만 보인다.
     body.admin 클래스는 로그인/로그아웃 때 자동으로 붙고 떨어진다. */
  .verse-mic{ display:none; }
  body.admin .verse-mic{
    display:inline-flex; align-items:center; justify-content:center;
    width:27px; height:27px; padding:0; margin-right:7px;
    vertical-align:middle; border-radius:50%;
    cursor:pointer; font-size:.82rem; line-height:1;
    color:#fff; background:rgba(255,255,255,.15);
    border:1px solid rgba(255,255,255,.38);
    transition:transform .15s ease, background .15s ease;
  }
  body:not(.admin) .board-verse.stt-active{ background:none; box-shadow:none; }
  body:not(.admin) .stt-result{ display:none; }
  .verse-mic:hover{background:rgba(255,255,255,.28);}
  .verse-mic:active{transform:scale(.94);}
  .verse-mic.listening{
    background:#e0322e; color:#fff; border-color:#ff8b88;
    box-shadow:0 0 0 5px rgba(224,50,46,.25);
    animation:micPulse 1.1s ease-in-out infinite;
  }
  @keyframes micPulse{
    0%,100%{ box-shadow:0 0 0 4px rgba(224,50,46,.28); }
    50%{ box-shadow:0 0 0 9px rgba(224,50,46,.10); }
  }
  .board-verse.stt-active{
    background-color:rgba(224,50,46,.12);
    border-radius:10px;
    box-shadow:0 0 0 6px rgba(224,50,46,.12);
  }
  .stt-result{
    margin:9px 0 2px; padding:12px 14px; border-radius:12px;
    background:rgba(255,255,255,.93); color:#2b2b2b;
    font-size:.95rem; line-height:1.7; text-align:left; word-break:keep-all;
  }
  .stt-verdict{display:block; font-weight:800; font-size:1.02rem; margin-bottom:7px;}
  .stt-verdict.ok{color:#1c7a45;}
  .stt-verdict.no{color:#c62b27;}
  .stt-row{margin-top:6px;}
  .stt-label{
    display:inline-block; min-width:62px; margin-right:6px;
    font-size:.78rem; font-weight:800; color:#6b6b6b;
  }
  .stt-result .wrong{color:#e0322e; font-weight:800; text-decoration:underline;}
  .stt-hint{margin-top:8px; font-size:.82rem; color:#7a7a7a; line-height:1.55;}
  .stt-retry{
    margin-top:9px; padding:8px 15px; border:0; border-radius:9px; cursor:pointer;
    background:var(--green-deep); color:#fff; font-family:var(--font-sans); font-weight:700; font-size:.86rem;
  }
  /* ----- 성구 대화(AI에게 물어보기) ----- */
  .stt-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:9px;}
  .stt-ask-open{
    padding:8px 15px; border:1px solid #cfdcf8; border-radius:9px; cursor:pointer;
    background:#fff; color:#2563eb; font-family:var(--font-sans); font-weight:700; font-size:.86rem;
  }
  .vchat{margin-top:11px; padding-top:11px; border-top:1px dashed #dfe4ee;}
  .vchat-log{display:flex; flex-direction:column; gap:8px; margin-bottom:9px;}
  .vchat-log:empty{display:none;}
  .vchat-msg{padding:9px 12px; border-radius:12px; font-size:.92rem; line-height:1.65; word-break:keep-all;}
  .vchat-msg.me{align-self:flex-end; max-width:88%; background:#e7f0ff; color:#1f3f80;}
  .vchat-msg.ai{align-self:flex-start; max-width:95%; background:#f4f5f8; color:#2b2b2b; white-space:pre-wrap;}
  .vchat-msg.err{align-self:stretch; background:#fdeeed; color:#c62b27;}
  .vchat-form{display:flex; gap:7px;}
  .vchat-input{
    flex:1 1 auto; min-width:0; padding:10px 12px; border:1px solid #dde3ee; border-radius:10px;
    font-family:var(--font-sans); font-size:.92rem; color:#2b2b2b; background:#fff;
  }
  .vchat-input:focus{outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15);}
  .vchat-send{
    flex:0 0 auto; padding:10px 16px; border:0; border-radius:10px; cursor:pointer;
    background:#2563eb; color:#fff; font-family:var(--font-sans); font-weight:700; font-size:.88rem;
  }
  .vchat-send:disabled{opacity:.55; cursor:default;}
  .vchat-samples{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px;}
  .vchat-sample{
    padding:6px 11px; border:1px solid #e2e6ef; border-radius:999px; cursor:pointer;
    background:#fff; color:#5b6472; font-family:var(--font-sans); font-size:.8rem; font-weight:700;
  }
  .vchat-sample:hover{background:#f4f6fb;}
  .hl{color:var(--gold); font-weight:700; text-shadow:0 1px 5px rgba(255,190,0,.35);}
  .board-corner{
    position:absolute; right:16px; bottom:10px; font-size:1.5rem; opacity:.9; z-index:1;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));
  }

  footer{
    text-align:center; font-size:.85rem; color:var(--text-mid); padding:10px 20px 40px;
    line-height:1.7;
  }

  /* ===== Server sync / administrator dashboard ===== */
  .server-status{
    width:min(920px,calc(100% - 28px)); margin:12px auto 0; padding:9px 14px;
    border-radius:12px; font-size:.88rem; line-height:1.45; text-align:center;
    color:#355442; background:#edf6ef; border:1px solid rgba(44,95,64,.18);
  }
  .server-status.loading{color:#68551e; background:#fff8df; border-color:rgba(154,116,10,.2);}
  .server-status.offline,.server-status.error{color:#8d3526; background:#fff0ec; border-color:rgba(176,54,31,.2);}
  .server-status[hidden]{display:none;}
  .startdate:disabled,.date-default:disabled{cursor:not-allowed; opacity:.7;}
  .date-admin-note{font-size:.8rem; color:var(--text-mid);}
  body.admin .date-admin-note{color:var(--green-deep); font-weight:700;}
  .admin-modal{position:fixed; inset:0; z-index:240; display:none; align-items:center; justify-content:center; padding:18px;}
  .admin-modal.open{display:flex;}
  .admin-backdrop{position:absolute; inset:0; background:rgba(20,15,8,.78);}
  .admin-box{
    position:relative; z-index:1; width:min(96vw,860px); max-height:92vh; overflow:auto;
    background:#fff; border-radius:22px; padding:24px; box-shadow:var(--shadow-lg);
  }
  .admin-close{position:absolute; right:15px; top:13px; border:0; background:none; color:var(--text-mid); font-size:1.35rem; cursor:pointer;}
  .admin-title{font-family:var(--font-head); color:var(--green-deep); font-size:1.35rem; font-weight:800; padding-right:42px;}
  .admin-help{color:var(--text-mid); font-size:.9rem; line-height:1.6; margin:7px 0 15px;}
  .admin-login-form{display:flex; flex-wrap:wrap; gap:9px; align-items:center;}
  .admin-password{
    flex:1 1 220px; min-width:0; border:1px solid rgba(0,0,0,.2); border-radius:10px;
    padding:11px 12px; font:inherit; background:#fff;
  }
  .admin-message{min-height:1.4em; margin-top:9px; font-size:.88rem; color:var(--text-mid);}
  .admin-message.error{color:#a13a28; font-weight:700;}
  .admin-session-head{display:flex; justify-content:space-between; gap:12px; align-items:center; margin:14px 0 16px;}
  .admin-session-ok{color:var(--green-deep); font-weight:800;}
  .stats-loading,.stats-empty{padding:24px 8px; color:var(--text-mid); text-align:center;}
  .stats-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:8px 0 18px;}
  .stat-card{background:#f7f3e9; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:13px; text-align:center;}
  .stat-card .stat-label{display:block; color:var(--text-mid); font-size:.78rem; line-height:1.35;}
  .stat-card .stat-value{display:block; margin-top:3px; color:var(--green-deep); font-size:1.55rem; font-weight:900; font-family:var(--font-head);}
  .stats-chart-title{font-weight:800; color:var(--green-deep); margin:5px 0 9px;}
  .stats-chart{display:flex; align-items:flex-end; gap:4px; height:160px; padding:12px 7px 25px; overflow-x:auto; border-left:1px solid #d8d0c0; border-bottom:1px solid #d8d0c0;}
  .stats-bar-wrap{height:100%; min-width:18px; flex:1 0 18px; display:flex; align-items:flex-end; justify-content:center; position:relative;}
  .stats-bar{width:76%; min-height:2px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--gold),var(--green-deep)); position:relative;}
  .stats-bar:hover::after{content:attr(data-tip); position:absolute; z-index:2; left:50%; bottom:calc(100% + 5px); transform:translateX(-50%); white-space:nowrap; background:#25382c; color:#fff; border-radius:6px; padding:4px 6px; font-size:.7rem;}
  .stats-day{position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%) rotate(-45deg); transform-origin:top center; white-space:nowrap; color:var(--text-mid); font-size:.62rem;}
  .stats-table-wrap{overflow:auto; max-height:260px; margin-top:18px; border:1px solid #e2dccf; border-radius:10px;}
  .stats-table{width:100%; border-collapse:collapse; font-size:.82rem;}
  .stats-table th,.stats-table td{padding:8px 10px; border-bottom:1px solid #eee8db; text-align:right; white-space:nowrap;}
  .stats-table th:first-child,.stats-table td:first-child{text-align:left;}
  .stats-table th{position:sticky; top:0; background:#f7f3e9; color:var(--green-deep);}
  .popularity-section{margin-top:24px; padding-top:20px; border-top:2px solid #ece5d7;}
  .popularity-title{margin:0; color:var(--green-deep); font-family:var(--font-head); font-size:1.18rem;}
  .popularity-note{margin:6px 0 12px; color:var(--text-mid); font-size:.82rem; line-height:1.5;}
  .popularity-chapters,.popularity-periods{display:flex; gap:6px; overflow-x:auto; padding:2px 1px 7px; scrollbar-width:thin;}
  .popularity-filter{flex:0 0 auto; border:1px solid #d8ccba; border-radius:999px; background:#fff; color:#654f3b; padding:7px 11px; font:inherit; font-size:.78rem; font-weight:800; cursor:pointer;}
  .popularity-filter.active{border-color:var(--green-deep); background:var(--green-deep); color:#fff;}
  .popularity-periods{margin-top:3px;}
  .popularity-periods .popularity-filter.active{border-color:#b9477d; background:#b9477d;}
  .popularity-period-range{min-height:1.35em; margin:2px 0 10px; color:#7a7167; font-size:.74rem;}
  .popularity-graph{display:grid; gap:9px;}
  .popularity-row{padding:9px 10px; border:1px solid #ece5ea; border-radius:12px; background:#fffafd;}
  .popularity-row-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
  .popularity-song{min-width:0; color:#463941; font-size:.82rem; font-weight:800; line-height:1.35; overflow-wrap:anywhere;}
  button.popularity-play{border:0; background:transparent; padding:0; margin:0; text-align:left; cursor:pointer; font-family:inherit;}
  button.popularity-play:hover,button.popularity-play:focus-visible{color:#982c65; text-decoration:underline;}
  .popularity-value{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; color:#982c65; font-family:var(--font-head); font-size:.95rem; font-weight:900; white-space:nowrap;}
  .popularity-value small{color:#a993a2; font-size:.62rem; font-weight:700;}
  .popularity-bar-track{height:10px; margin-top:6px; overflow:hidden; border-radius:999px; background:#eee8ec;}
  .popularity-bar{display:block; height:100%; min-width:0; border-radius:inherit; background:linear-gradient(90deg,#e95a9c,#9c2e68);}
  .popularity-metrics{margin-top:5px; color:#777078; font-size:.69rem; line-height:1.35;}
  @media (max-width:620px){
    .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .admin-box{padding:20px 15px;}
    .admin-session-head{align-items:flex-start; flex-direction:column;}
    .popularity-row{padding:8px;}
    .popularity-song{font-size:.78rem;}
  }

  /* ===== Responsive ===== */
  @media (max-width:560px){
    body{font-size:17px;}
    header.app-header h1{font-size:1.6rem; letter-spacing:1px;}
    .tabs{justify-content:flex-start; scroll-padding-inline:6px; overscroll-behavior-x:contain;}
    .tab-btn{flex:0 0 auto; font-size:.95rem; padding:12px 8px;}
    .tab-sub{display:none;}
    .phase-panel{padding:8px 12px 70px;}
    .board-inner{padding:18px 18px 22px;}
    .board-verse{font-size:1.3rem; line-height:2;}
    .board-title{font-size:1.12rem;}
    .day-info .theme{font-size:.95rem;}
    .check span{display:none;}
    .check{padding:10px;}
    .copy-btn span, .prac-btn span, .edit-btn span{display:none;}
    .copy-btn, .prac-btn, .edit-btn{padding:10px;}
    .head-actions{gap:6px;}
    .exam-mascot img{height:84px;}
  }