/* Extracted from original <style> block 5. Do not edit unless changing that original block. */

:root{
      --blue:#1966db;
      --sky:#eaf4ff;
      --dark:#111827;
      --muted:#64748b;
      --card:#ffffff;
      --line:#dbeafe;
      --yellow:#fff7d6;
      --green:#eafff2;
      --red:#fff0f0;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color:var(--dark);
      background:linear-gradient(180deg,#eff8ff 0%,#fff 45%,#fff7e6 100%);
      min-height:100vh;
    }
    .app{
      width:min(1080px,100%);
      margin:0 auto;
      padding:8px;
    }
    .header{
      background:#fff;
      border:1px solid var(--line);
      border-radius:12px;
      padding:22px;
      box-shadow:0 8px 22px rgba(15,23,42,.06);
      display:flex;
      gap:16px;
      justify-content:space-between;
      align-items:center;
      margin-bottom:8px;
    }
    .badge{
      display:inline-flex;
      background:#eff6ff;
      color:#1554bd;
      padding:7px 12px;
      border-radius:999px;
      font-size:13px;
      font-weight:800;
      margin-bottom:8px;
    }
    h1{
      font-size:clamp(24px,4.2vw,40px);
      margin:0;
      letter-spacing:-1.5px;
      line-height:1;
    }
    .subtitle{
      color:var(--muted);
      margin:5px 0 0;
      font-size:13px;
    }
    .scoreBox{
      background:#111827;
      color:white;
      border-radius:18px;
      padding:10px 15px;
      min-width:120px;
      text-align:center;
      box-shadow:0 8px 20px rgba(0,0,0,.15);
    }
    .scoreBox small{color:#cbd5e1;font-weight:700}
    .scoreBox div{font-size:26px;font-weight:1000}
    .topbar{
      display:flex;
      justify-content:space-between;
      gap:8px;
      margin-bottom:14px;
    }
    button{
      border:0;
      background:var(--blue);
      color:#fff;
      font-weight:900;
      border-radius:18px;
      padding:10px 14px;
      cursor:pointer;
      font-size:14px;
      box-shadow:0 7px 16px rgba(25,102,219,.2);
      transition:.15s transform,.15s opacity;
      touch-action:manipulation;
    }
    button:active{transform:scale(.96)}
    button.secondary{
      background:#fff;
      color:#0f172a;
      border:1px solid #cbd5e1;
      box-shadow:none;
    }
    button.danger{background:#ef4444}
    button.green{background:#16a34a}
    button.yellow{background:#f59e0b}
    .grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }
    .homeHero{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:16px;
      margin-bottom:16px;
    }
    .homeMainCard{
      background:linear-gradient(135deg,#1966DB,#19b6a6);
      color:#fff;
      border-radius:32px;
      padding:30px;
      box-shadow:0 14px 34px rgba(25,102,219,.22);
    }
    .homeMainCard h2{
      margin:0;
      font-size:clamp(30px,5vw,54px);
      line-height:1.05;
      letter-spacing:-1.5px;
      font-weight:1000;
    }
    .homeMainCard p{
      margin:14px 0 0;
      color:rgba(255,255,255,.88);
      font-weight:800;
      line-height:1.6;
    }
    .homeQuickCard{
      background:#fff;
      border:1px solid var(--line);
      border-radius:32px;
      padding:24px;
      box-shadow:0 8px 22px rgba(15,23,42,.06);
    }
    .homeQuickCard h3{
      margin:0 0 10px;
      font-size:24px;
      font-weight:1000;
    }
    .homeQuickCard p{
      margin:0 0 14px;
      color:var(--muted);
      font-weight:800;
      line-height:1.5;
    }
    .homeSectionTitle{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin:20px 0 10px;
    }
    .homeSectionTitle h2{
      margin:0;
      font-size:26px;
      font-weight:1000;
    }
    .homeSectionTitle span{
      color:var(--muted);
      font-size:14px;
      font-weight:800;
    }
    .homeCategoryGrid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px;
      margin-bottom:18px;
    }
    .homeCategory{
      background:#fff;
      border:1px solid var(--line);
      border-radius:30px;
      padding:22px;
      box-shadow:0 8px 22px rgba(15,23,42,.06);
    }
    .homeCategoryHeader{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:14px;
    }
    .homeCategoryIcon{
      width:56px;
      height:56px;
      border-radius:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,#1966DB,#19b6a6);
      color:#fff;
      font-size:30px;
      flex:0 0 auto;
    }
    .homeCategory h3{
      margin:0;
      font-size:24px;
      font-weight:1000;
    }
    .homeCategory p{
      margin:4px 0 0;
      color:var(--muted);
      font-weight:800;
      line-height:1.45;
    }
    .homeCategory{
      cursor:pointer;
      transition:.15s transform,.15s box-shadow;
    }
    .homeCategory:active{transform:scale(.99)}
    .homeCategory:hover{
      box-shadow:0 12px 28px rgba(15,23,42,.1);
    }
    .homeCategoryHeader{
      margin-bottom:0;
    }
    .homeCategoryClickHint{
      margin-top:14px;
      display:inline-flex;
      border-radius:999px;
      background:#eff6ff;
      color:#1554bd;
      padding:8px 12px;
      font-size:13px;
      font-weight:1000;
    }
    .homeShortcutPanel.closed{
      display:none;
    }
    .homeShortcutPanel{
      margin-top:10px;
    }
    .homeSectionTitle button{
      padding:9px 12px;
      border-radius:14px;
      font-size:13px;
    }
    .trPlatformHero{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:14px;
      margin:12px 0;
    }
    .trPlatformCard{
      background:#fff;
      border:1px solid var(--line);
      border-radius:28px;
      padding:20px;
      box-shadow:0 8px 22px rgba(15,23,42,.06);
    }
    .trPlatformCard h2,.trPlatformCard h3{margin:0 0 8px}
    .trPlatformCard p{color:var(--muted);font-weight:800;line-height:1.55}
    .trPlatformGrid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      margin-top:12px;
    }
    .trPlatformPost,.trPlatformTimeline,.trPlatformAlbumItem{
      border:1px solid #dbeafe;
      border-radius:20px;
      padding:14px;
      background:#f8fbff;
    }
    .trPlatformPost b,.trPlatformTimeline b,.trPlatformAlbumItem b{display:block;margin-bottom:5px}
    .trPlatformPost small,.trPlatformTimeline small,.trPlatformAlbumItem small{color:#64748b;font-weight:900}
    .trPlatformForm{
      display:grid;
      grid-template-columns:1fr 1fr auto;
      gap:8px;
      align-items:end;
      margin-top:12px;
    }
    .trPlatformForm textarea{
      grid-column:1/-1;
      min-height:84px;
      resize:vertical;
      border:1px solid #dbe3ef;
      border-radius:16px;
      background:#f8fafc;
      padding:13px;
      font:inherit;
      font-weight:800;
    }
    .trPlatformPills{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:12px;
    }
    .trPlatformPill{
      border-radius:999px;
      background:#eff6ff;
      color:#1554bd;
      padding:8px 12px;
      font-size:13px;
      font-weight:1000;
    }
    .trPlatformStatGrid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:10px;
      margin:12px 0;
    }
    .trPlatformStat{
      border:1px solid #dbeafe;
      border-radius:20px;
      padding:14px;
      background:#fff;
    }
    .trPlatformStat span{display:block;color:#64748b;font-size:12px;font-weight:1000}
    .trPlatformStat b{display:block;font-size:26px;margin-top:4px}
    .trPlatformPhoto{
      aspect-ratio:4/3;
      border-radius:18px;
      background:linear-gradient(135deg,#dbeafe,#ccfbf1);
      display:grid;
      place-items:center;
      font-size:34px;
      margin-bottom:10px;
    }
    .trLaunchBoard{
      margin:0 0 14px;
      border:1px solid #bfdbfe;
      border-radius:32px;
      background:
        radial-gradient(circle at 20% 0,rgba(25,102,219,.16),transparent 30rem),
        linear-gradient(135deg,#ffffff 0%,#eff6ff 55%,#f0fdfa 100%);
      box-shadow:0 18px 44px rgba(15,23,42,.12);
      padding:22px;
    }
    .trLaunchTop{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:16px;
      align-items:stretch;
    }
    .trLaunchTitle{
      background:#0f172a;
      color:#fff;
      border-radius:26px;
      padding:24px;
    }
    .trAcademyBrand{
      display:flex;
      align-items:center;
      gap:16px;
    }
    .trAcademyLogo{
      width:82px;
      height:82px;
      border-radius:24px;
      background:#fff;
      color:#1966db;
      display:grid;
      place-items:center;
      font-size:30px;
      font-weight:1000;
      overflow:hidden;
      flex:0 0 auto;
      box-shadow:0 10px 24px rgba(0,0,0,.16);
    }
    .trAcademyLogo img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .trLaunchTitle .badge{
      background:rgba(255,255,255,.14);
      color:#dbeafe;
    }
    .trLaunchTitle h2{
      margin:12px 0 8px;
      font-size:clamp(30px,5vw,52px);
      line-height:1.02;
      letter-spacing:0;
    }
    .trLaunchTitle p{
      color:#dbeafe;
      font-weight:900;
      line-height:1.55;
      margin:0;
    }
    .trLaunchStats{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:10px;
    }
    .trLaunchStat{
      background:#fff;
      border:1px solid #dbeafe;
      border-radius:22px;
      padding:16px;
    }
    .trLaunchStat span{
      color:#64748b;
      font-size:12px;
      font-weight:1000;
    }
    .trLaunchStat b{
      display:block;
      margin-top:4px;
      font-size:30px;
      color:#0f172a;
    }
    .trLaunchMenu{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:10px;
      margin-top:14px;
    }
    .trRoleBar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-top:14px;
      padding:12px;
      border-radius:22px;
      background:#fff;
      border:1px solid #dbeafe;
    }
    .trRoleTabs{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .trRoleTab{
      border:1px solid #dbeafe;
      background:#f8fbff;
      color:#0f172a;
      border-radius:999px;
      padding:9px 13px;
      font-weight:1000;
      cursor:pointer;
    }
    .trRoleTab.active{
      background:#0f172a;
      color:#fff;
      border-color:#0f172a;
    }
    .trRoleNotice{
      color:#475569;
      font-size:13px;
      font-weight:900;
      text-align:right;
    }
    .trLaunchBtn{
      min-height:104px;
      border:1px solid #dbeafe;
      border-radius:22px;
      background:#fff;
      padding:14px;
      text-align:left;
      box-shadow:0 8px 18px rgba(15,23,42,.06);
      cursor:pointer;
      transition:.15s transform,.15s box-shadow,.15s border-color;
    }
    .trLaunchBtn:hover{
      transform:translateY(-2px);
      border-color:#93c5fd;
      box-shadow:0 14px 28px rgba(15,23,42,.1);
    }
    .trLaunchBtn strong{
      display:block;
      color:#0f172a;
      font-size:17px;
      font-weight:1000;
      margin-bottom:6px;
    }
    .trLaunchBtn small{
      color:#64748b;
      font-weight:900;
      line-height:1.35;
    }
    .trLoginScreen{
      min-height:100vh;
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:18px;
      align-items:center;
      width:min(1120px,100%);
      margin:0 auto;
      padding:18px;
    }
    .trLoginHero{
      border-radius:34px;
      background:linear-gradient(135deg,#0f172a,#1966db 58%,#14b8a6);
      color:#fff;
      padding:34px;
      box-shadow:0 24px 58px rgba(15,23,42,.18);
      min-height:520px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .trLoginHero h1{
      margin:14px 0 10px;
      font-size:clamp(42px,7vw,72px);
      letter-spacing:0;
    }
    .trLoginHero p{
      color:#dbeafe;
      font-size:17px;
      font-weight:900;
      line-height:1.65;
    }
    .trLoginPanel{
      background:#fff;
      border:1px solid #dbeafe;
      border-radius:34px;
      padding:24px;
      box-shadow:0 20px 50px rgba(15,23,42,.12);
    }
    .trLoginPanel h2{margin:0 0 8px;font-size:30px}
    .trLoginPanel p{color:#64748b;font-weight:900;line-height:1.55}
    .trLoginRoles{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:10px;
      margin:16px 0;
    }
    .trLoginRole{
      border:1px solid #dbeafe;
      border-radius:22px;
      background:#f8fbff;
      padding:16px;
      text-align:left;
      cursor:pointer;
    }
    .trLoginRole.active{
      background:#0f172a;
      color:#fff;
      border-color:#0f172a;
    }
    .trLoginRole b{display:block;font-size:19px;margin-bottom:5px}
    .trLoginRole small{font-weight:900;color:#64748b}
    .trLoginRole.active small{color:#dbeafe}
    .trLoginForm{
      display:grid;
      gap:10px;
    }
    .trLoginSubmit{
      width:100%;
      margin-top:8px;
      min-height:52px;
      border-radius:18px;
      background:#1966db;
      color:#fff;
      font-weight:1000;
    }
    .trLoginDemo{
      margin-top:12px;
      border-radius:18px;
      background:#fffbeb;
      color:#92400e;
      padding:12px;
      font-size:13px;
      font-weight:900;
      line-height:1.45;
    }
    .trUserBar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      background:#0f172a;
      color:#fff;
      border-radius:22px;
      padding:12px 14px;
      margin-bottom:10px;
      box-shadow:0 10px 24px rgba(15,23,42,.14);
    }
    .trUserBar small{display:block;color:#cbd5e1;font-weight:900}
    .trUserBar button{
      background:#fff;
      color:#0f172a;
      border-radius:14px;
      padding:9px 12px;
      font-weight:1000;
    }
    .trAcademySettingsPreview{
      display:flex;
      align-items:center;
      gap:14px;
      border:1px solid #dbeafe;
      border-radius:22px;
      padding:14px;
      background:#f8fbff;
      margin-top:12px;
    }
    body.trLoggedOut .app{display:none}
    body.trLoggedIn .trLoginScreen{display:none}
    @media(max-width:840px){
      .trPlatformHero,.trPlatformGrid,.trPlatformStatGrid,.trPlatformForm,.trLaunchTop,.trLaunchMenu{grid-template-columns:1fr}
      .trLaunchStats{grid-template-columns:1fr 1fr}
      .trRoleBar{align-items:flex-start;flex-direction:column}
      .trRoleNotice{text-align:left}
      .trLoginScreen{grid-template-columns:1fr}
      .trLoginHero{min-height:auto}
      .trLoginRoles{grid-template-columns:1fr}
    }
    @media(max-width:840px){
      .homeHero,.homeCategoryGrid{grid-template-columns:1fr}
      .homeCategoryActions{grid-template-columns:1fr}
    }
    .menuCard,.panel,.whiteCard{
      background:#fff;
      border:1px solid var(--line);
      border-radius:28px;
      box-shadow:0 8px 22px rgba(15,23,42,.06);
    }
    .menuCard{
      padding:20px;
      cursor:pointer;
      min-height:168px;
    }
    .menuCard:active{transform:scale(.98)}
    .menuCard.locked{
      opacity:.46;
      cursor:not-allowed;
      filter:grayscale(.45);
      position:relative;
    }
    .menuCard.locked:active{
      transform:none;
    }
    .lockBadge{
      position:absolute;
      top:12px;
      right:12px;
      background:#111827;
      color:#fff;
      border-radius:999px;
      padding:5px 9px;
      font-size:12px;
      font-weight:1000;
      box-shadow:0 6px 14px rgba(0,0,0,.18);
    }
    .icon{
      width:58px;
      height:58px;
      border-radius:19px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,var(--blue),#19b6a6);
      color:#fff;
      font-size:30px;
      margin-bottom:14px;
    }
    .menuCard h2{font-size:22px;margin:0 0 8px;font-weight:1000}
    .menuCard p{margin:0;color:var(--muted);line-height:1.55;font-size:14px}
    .panel{
      padding:12px;
      margin-bottom:8px;
    }
    .panel h2{
      font-size:26px;
      margin:0;
      font-weight:1000;
    }
    .panel p{color:var(--muted);margin:8px 0 0}
    .two{
      display:grid;
      grid-template-columns:1fr 1.25fr;
      gap:16px;
    }
    .boardLayout{
      display:block;
      width:100%;
    }
    .boardCard{
      padding:4px;
      width:100%;
    }
    .boardCardLarge{
      max-width:900px;
      margin:0 auto;
    }
    .boardGuide{
      margin-top:8px;
      border-radius:18px;
      background:#f8fafc;
      border:1px solid #dbeafe;
      padding:9px 12px;
    }
    .boardGuide h3{
      margin:0 0 6px;
      font-size:18px;
      font-weight:1000;
    }
    .boardGuide p{
      margin:0;
      color:#64748b;
      font-weight:800;
      line-height:1.5;
    }
    .playerSelectBox{
      margin-top:14px;
      border-radius:22px;
      background:#f8fafc;
      border:1px solid #dbeafe;
      padding:9px 12px;
    }
    .playerButtons{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:10px;
    }
    .playerButtons button.active{
      background:#111827;
      color:#fff;
    }
    .playerStatus{
      margin-top:10px;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .playerNameEditBox{
      margin-top:10px;
    }
    .playerNameEditContent{
      margin-top:10px;
      padding:12px;
      border-radius:18px;
      background:#fff;
      border:1px solid #dbeafe;
    }
    .playerNameEditContent.closed{
      display:none;
    }
    .playerNameGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .playerNameGrid label{
      display:block;
      font-size:13px;
      font-weight:900;
      color:#334155;
      margin:0 0 4px 4px;
    }
    .playerNameGrid input{
      width:100%;
      padding:10px 11px;
      border-radius:13px;
      border:1px solid #cbd5e1;
      font-size:14px;
      background:#fff;
    }
    @media(max-width:520px){
      .playerNameGrid{grid-template-columns:1fr}
    }
    .playerBadge{
      border-radius:999px;
      padding:7px 11px;
      background:#fff;
      border:1px solid #dbeafe;
      font-weight:900;
      font-size:13px;
    }
    .playerBadge.active{
      background:#dbeafe;
      border-color:#2563eb;
      color:#1554bd;
    }
    .playerMarker{
      position:absolute;
      width:22px;
      height:22px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:#fff;
      font-size:12px;
      font-weight:1000;
      box-shadow:0 4px 10px rgba(0,0,0,.2);
      z-index:3;
    }
    .playerMarker.p1{background:#2563eb; top:-11px; left:18%;}
    .playerMarker.p2{background:#ef4444; top:-11px; left:40%;}
    .playerMarker.p3{background:#16a34a; top:-11px; left:62%;}
    .playerMarker.p4{background:#f59e0b; top:-11px; left:84%;}
    @media(max-width:520px){
      .playerMarker{width:17px;height:17px;font-size:10px;top:-9px}
      .playerSelectBox{padding:12px}
    }
    .boardEditBox{
      margin-top:14px;
      border-radius:22px;
      background:#fff;
      border:1px solid #dbeafe;
      padding:16px;
    }
    .boardEditHeader{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-bottom:12px;
    }
    .boardEditHeader h3{
      margin:0 0 4px;
      font-size:22px;
      font-weight:1000;
    }
    .boardEditHeader p{
      margin:0;
      color:#64748b;
      font-weight:800;
      line-height:1.4;
    }
    .boardEditContent.closed{display:none}
    .boardEditList{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .boardEditItem{
      background:#f8fafc;
      border:1px solid #e2e8f0;
      border-radius:18px;
      padding:12px;
    }
    .boardEditItemTitle{
      font-weight:1000;
      margin-bottom:8px;
      color:#1554bd;
    }
    .boardEditItem label{
      display:block;
      font-size:13px;
      font-weight:900;
      color:#334155;
      margin:8px 0 4px;
    }
    .boardEditItem input,
    .boardEditItem select{
      width:100%;
      padding:10px 11px;
      border-radius:13px;
      border:1px solid #cbd5e1;
      font-size:14px;
      background:#fff;
    }
    @media(max-width:840px){
      .boardEditList{grid-template-columns:1fr}
      .boardEditHeader{align-items:flex-start;flex-direction:column}
    }
    .centerBox{
      background:#f1f7ff;
      border-radius:28px;
      min-height:280px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:24px;
    }
    .dice{
      width:170px;
      height:170px;
      border-radius:30px;
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:62px;
      font-weight:1000;
      box-shadow:0 10px 26px rgba(15,23,42,.12);
      margin-bottom:18px;
      cursor:pointer;
    }
    .dice.roll{animation:none}
    .dice .diceInner{display:inline-block}
    .dice.roll .diceInner{animation:roll .9s ease-in-out}
    @keyframes roll{
      0%{transform:rotate(0deg) scale(1)}
      15%{transform:rotate(120deg) scale(.92)}
      30%{transform:rotate(240deg) scale(1.08)}
      45%{transform:rotate(360deg) scale(.94)}
      60%{transform:rotate(540deg) scale(1.06)}
      75%{transform:rotate(720deg) scale(.96)}
      100%{transform:rotate(1080deg) scale(1)}
    }
      20%{transform:rotate(120deg) scale(.92)}
      40%{transform:rotate(240deg) scale(1.08)}
      60%{transform:rotate(360deg) scale(.94)}
      80%{transform:rotate(480deg) scale(1.06)}
      100%{transform:rotate(720deg) scale(1)}
    }
    .result{
      padding:26px;
      min-height:280px;
    }
    .pill{
      display:inline-flex;
      border-radius:999px;
      padding:7px 12px;
      font-size:13px;
      font-weight:900;
      background:#dbeafe;
      color:#1554bd;
      margin-bottom:12px;
    }
    .result h3{
      margin:0;
      font-size:clamp(28px,5vw,44px);
      font-weight:1000;
      letter-spacing:-1px;
    }
    .result .hint{color:var(--muted);margin:12px 0 22px}
    .empty{
      min-height:280px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:var(--muted);
      background:#f8fafc;
      border-radius:24px;
      padding:20px;
      font-weight:800;
    }
    .teamGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .team{
      text-align:center;
      padding:28px;
    }
    .team h3{font-size:34px;margin:0;font-weight:1000}
    .team .num{font-size:78px;font-weight:1000;margin:10px 0}
    .timerBig{
      font-size:86px;
      font-weight:1000;
      text-align:center;
      margin:12px 0;
      letter-spacing:-2px;
    }
    .flex{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
    .inputRow{
      display:flex;
      gap:8px;
      margin-bottom:14px;
    }
    input,select{
      width:100%;
      border:1px solid #cbd5e1;
      border-radius:17px;
      padding:13px 14px;
      font-size:16px;
      outline:none;
    }
    input:focus,select:focus{
      border-color:var(--blue);
      box-shadow:0 0 0 3px rgba(25,102,219,.12);
    }
    .missionList{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .missionItem{
      background:#f8fafc;
      border-radius:18px;
      padding:1px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
    }
    .missionItem b{display:block}
    .missionItem small{color:var(--muted)}
    .musicTopBox{
      width:100%;
      background:#f8fafc;
      border:1px solid #dbeafe;
      border-radius:16px;
      padding:9px;
      margin:0 0 10px;
      text-align:left;
    }
    .musicTopBox b{
      display:block;
      font-size:13px;
      color:#334155;
      margin-bottom:5px;
    }
    .boardMusicTop{
      margin-bottom:4px;
      padding:6px;
    }
    .boardMusicTopPage{
      margin:0 0 10px;
      padding:10px 12px;
    }
    .exerciseAddBox{
      background:#f8fafc;
      border:1px solid #dbeafe;
      border-radius:18px;
      padding:12px;
      margin-bottom:12px;
    }
    .exerciseAddBox h3{
      margin:0;
      font-size:20px;
      font-weight:1000;
    }
    .foldHeader{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-bottom:8px;
    }
    .foldHeader button{
      padding:8px 10px;
      border-radius:12px;
      font-size:12px;
    }
    .foldContent.closed{
      display:none;
    }
    .exerciseAddGrid{
      display:grid;
      grid-template-columns:1fr 100px auto;
      gap:8px;
      align-items:end;
    }
    .exerciseAddGrid label{
      display:block;
      font-size:13px;
      font-weight:900;
      margin:0 0 4px 4px;
      color:#334155;
    }
    .smallMissionList{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-top:10px;
    }
    .smallMissionChip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      background:#fff;
      border:1px solid #dbeafe;
      padding:6px 9px;
      font-size:12px;
      font-weight:900;
    }
    .smallMissionChip button{
      padding:3px 6px;
      border-radius:999px;
      font-size:11px;
      box-shadow:none;
    }
    @media(max-width:700px){
      .exerciseAddGrid{grid-template-columns:1fr}
    }
    .musicControls{
      margin-top:4px;
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      align-items:center;
    }
    .musicControls input[type="file"]{
      font-size:12px;
      padding:7px;
      border-radius:11px;
      background:#fff;
    }
    .musicControls button{
      padding:7px 9px;
      border-radius:11px;
      font-size:12px;
    }
    .musicTag{
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      padding:4px 8px;
      background:#dcfce7;
      color:#166534;
      font-size:11px;
      font-weight:900;
    }
    .boardWrap{
      width:100%;
      max-width:860px;
      margin:0 auto;
      aspect-ratio:1/1;
      display:grid;
      grid-template-columns:repeat(9,1fr);
      grid-template-rows:repeat(9,1fr);
      gap:0;
      background:linear-gradient(135deg,#eaf4ff,#fff7d6);
      border-radius:30px;
      padding:12px;
      border:2px solid #bfdbfe;
      box-shadow:inset 0 0 0 4px rgba(255,255,255,.6);
    }
    .boardCenter{
      grid-column:3 / 8;
      grid-row:3 / 8;
      border-radius:28px;
      background:rgba(255,255,255,.88);
      border:1px dashed #93c5fd;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:2px;
      min-height:175px;
    }
    .boardCenter h3{
      font-size:clamp(22px,3vw,34px);
      margin:0 0 4px;
      font-weight:1000;
      letter-spacing:-1px;
    }
    .boardScorePanel{
      width:100%;
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:4px;
      margin-bottom:4px;
    }
    .boardScorePanelTop{
      grid-column:3 / 8;
      grid-row:2 / 3;
      align-self:center;
      justify-self:stretch;
      margin:0;
      z-index:4;
    }
    .boardScoreItem{
      background:#111827;
      color:#fff;
      border-radius:10px;
      padding:5px 4px;
      font-size:11px;
      font-weight:1000;
      line-height:1.2;
    }
    .boardScoreItem.active{
      background:#1966db;
      box-shadow:0 0 0 2px rgba(25,102,219,.18);
    }
    .boardScoreItem span{
      display:block;
      font-size:14px;
      margin-top:1px;
    }
    .boardMissionInCenter{
      width:100%;
      background:#f8fafc;
      border:1px solid #dbeafe;
      border-radius:18px;
      padding:7px;
      margin:2px 0;
      color:#0f172a;
    }
    .boardMissionInCenter b{
      display:block;
      font-size:clamp(13px,1.7vw,19px);
      font-weight:1000;
      line-height:1.25;
    }
    .boardMissionInCenter small{
      display:block;
      margin-top:2px;
      color:#64748b;
      font-weight:800;
    }
    .centerDice{
      width:120px;
      height:120px;
      border-radius:26px;
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:62px;
      font-weight:1000;
      box-shadow:0 10px 26px rgba(15,23,42,.14);
      margin:2px 0 4px;
      cursor:pointer;
    }
    .boardCenter button{
      padding:8px 12px;
      border-radius:13px;
      font-size:13px;
    }
    .centerDice.roll{animation:none}
    .centerDice .diceInner{display:inline-block}
    .centerDice.roll .diceInner{animation:roll .9s ease-in-out}
    .cell{
      border:1px solid #e2e8f0;
      background:#f8fafc;
      border-radius:10px;
      padding:4px;
      text-align:center;
      position:relative;
      display:flex;
      flex-direction:column;
      justify-content:center;
      min-height:56px;
      overflow:visible;
    }
    .cell.corner{
      border-radius:12px;
      background:#fff;
      border:2px solid #93c5fd;
    }
    .cell.active{
      background:#dbeafe;
      border-color:#2563eb;
      box-shadow:0 0 0 4px rgba(37,99,235,.2);
      z-index:2;
    }
    .cell.rest{background:var(--green)}
    .cell.bonus{background:var(--yellow)}
    .cell.chance{background:#fef3c7}
    .marker{
      position:absolute;
      top:-13px;
      left:50%;
      transform:translateX(-50%);
      background:#111827;
      color:#fff;
      border-radius:999px;
      padding:4px 8px;
      font-size:11px;
      font-weight:1000;
      white-space:nowrap;
      box-shadow:0 6px 14px rgba(0,0,0,.18);
    }
    .cell b{font-size:15px;line-height:1.15}
    .cell span{font-size:11px;color:#475569;line-height:1.2;margin-top:2px}
    @media(max-width:520px){
      .boardWrap{gap:0;padding:2px;border-radius:16px}
      .cell{min-height:34px;border-radius:8px;padding:2px}
      .cell b{font-size:10px}
      .cell span{font-size:8px}
      .marker{top:-10px;font-size:9px;padding:3px 6px}
      .boardCenter{border-radius:10px;min-height:100px;padding:2px}
      .boardCenter h3{font-size:18px;margin-bottom:5px}
      .boardScorePanel{gap:2px;margin-bottom:2px}
      .boardScorePanelTop{grid-column:3 / 8;grid-row:2 / 3;margin:0}
      .boardScoreItem{font-size:8px;padding:3px 2px;border-radius:7px}
      .boardScoreItem span{font-size:10px}
      .boardMissionInCenter{padding:6px;margin:5px 0;border-radius:12px}
      .boardMissionInCenter b{font-size:11px}
      .boardMissionInCenter small{font-size:9px}
      .centerDice{width:72px;height:72px;border-radius:16px;font-size:40px;margin:2px 0 5px}
      .boardGuide{padding:12px;border-radius:18px}
      .boardGuide h3{font-size:18px}
      .boardGuide p{font-size:12px}
      .boardCenter button{font-size:12px;padding:9px 10px;border-radius:13px}
    }
    .tabataCircle{
      width:220px;
      height:220px;
      border-radius:50%;
      margin:14px auto;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
    }
    .tabataCircle.work{background:var(--red)}
    .tabataCircle.rest{background:var(--green)}
    .tabataCircle b{font-size:28px}
    .tabataCircle strong{font-size:64px;line-height:1}
    .awardBox{
      text-align:center;
      padding:36px;
      background:linear-gradient(135deg,#fff7d6,#fff0e8);
      border-radius:28px;
    }
    .awardBox small{font-size:20px;color:#64748b;font-weight:800}
    .awardBox h3{font-size:56px;margin:10px 0;font-weight:1000}
    .hidden{display:none}
    .tabataManageBox{
      margin-top:16px;
      padding:16px;
      border-radius:22px;
      background:#f8fafc;
      border:1px solid #e2e8f0;
    }
    .tabataManageBox.closed{display:none}
    .editGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin:10px 0 14px;
    }
    .editGrid label{
      display:block;
      text-align:left;
      font-weight:900;
      margin:0 0 6px 4px;
      font-size:14px;
    }
    @media(max-width:520px){
      .editGrid{grid-template-columns:1fr}
    }

    .fitnessLayout{
      display:grid;
      grid-template-columns:330px 1fr;
      gap:16px;
      align-items:start;
    }
    .fitStudentList{display:flex;flex-direction:column;gap:8px}
    .fitStudentItem{
      border:1px solid #e2e8f0;
      background:#f8fafc;
      border-radius:18px;
      padding:12px;
      cursor:pointer;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
    }
    .fitStudentItem.active{
      border-color:var(--blue);
      background:#eff6ff;
      box-shadow:0 0 0 3px rgba(25,102,219,.08);
    }
    .fitStudentItem b{display:block}
    .fitStudentItem small{color:var(--muted);font-weight:800}
    .fitFormGrid,.fitExerciseInputGrid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
      margin-top:10px;
    }
    .fitSummaryGrid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:10px;
      margin-top:14px;
    }
    .fitSummary{
      background:#f8fafc;
      border:1px solid #e2e8f0;
      border-radius:18px;
      padding:13px;
    }
    .fitSummary span{display:block;font-size:13px;color:var(--muted);font-weight:900}
    .fitSummary b{font-size:23px;margin-top:4px;display:block}
    .fitChartGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
    }
    .fitChartBox{
      height:320px;
      border-radius:20px;
      background:#fff;
      overflow:hidden;
      border:1px solid #e2e8f0;
    }
    .fitTableWrap{overflow-x:auto}
    .fitRecordTable{
      width:100%;
      min-width:900px;
      border-collapse:separate;
      border-spacing:0 8px;
      font-size:14px;
    }
    .fitRecordTable th{text-align:left;color:var(--muted);padding:8px;white-space:nowrap}
    .fitRecordTable td{background:#f8fafc;padding:10px 8px;white-space:nowrap}
    .fitRecordTable td:first-child{border-radius:14px 0 0 14px;font-weight:900}
    .fitRecordTable td:last-child{border-radius:0 14px 14px 0}
    .fitExerciseItem{
      border:1px solid #e2e8f0;
      background:#f8fafc;
      border-radius:18px;
      padding:12px;
      margin-bottom:8px;
    }
    .fitExerciseItemHeader{
      display:flex;
      justify-content:space-between;
      gap:8px;
      align-items:center;
      margin-bottom:8px;
    }
    .fitExerciseItem small{display:block;color:#64748b;font-weight:800}
    .fitExerciseEditGrid{
      display:grid;
      grid-template-columns:1fr 90px;
      gap:8px;
      margin-top:8px;
    }
    .fitCheckLine{
      display:flex;
      align-items:center;
      gap:8px;
      margin-top:8px;
      font-size:13px;
      font-weight:900;
      color:#334155;
    }
    .fitCheckLine input{width:auto}
    .fitFoldHeader{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-bottom:10px;
    }
    .fitFoldContent.closed{
      display:none;
    }
    .fitFoldContent{
      margin-top:10px;
    }
    @media(max-width:940px){
      .fitnessLayout{grid-template-columns:1fr}
      .fitFormGrid,.fitExerciseInputGrid{grid-template-columns:1fr 1fr}
      .fitSummaryGrid{grid-template-columns:1fr 1fr}
      .fitChartGrid{grid-template-columns:1fr}
    }
    @media(max-width:520px){
      .fitFormGrid,.fitExerciseInputGrid,.fitSummaryGrid{grid-template-columns:1fr}
      .fitChartBox{height:260px}
    }


    .calendarTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:12px;
    }
    .calendarTop h3{
      margin:0;
      font-size:26px;
      font-weight:1000;
    }
    .calendarYearGrid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }
    .calendarMonthCard{
      background:#fff;
      border:1px solid #dbeafe;
      border-radius:22px;
      padding:14px;
      cursor:pointer;
      transition:.15s transform,.15s background;
      min-height:110px;
    }
    .calendarMonthCard:hover{background:#eff6ff}
    .calendarMonthCard:active{transform:scale(.98)}
    .calendarMonthCard h4{
      margin:0 0 10px;
      font-size:22px;
      font-weight:1000;
    }
    .yearEventList,
    .yearEventItem,
    .yearEventEmpty{
      display:none !important;
    }
    .miniMonthGrid{display:none !important}
    .yearEventList{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-top:8px;
    }
    .yearEventItem{
      background:#f8fafc;
      border:1px solid #e2e8f0;
      border-radius:12px;
      padding:7px 8px;
      font-size:12px;
      color:#334155;
      font-weight:800;
      line-height:1.35;
    }
    .yearEventEmpty{display:none !important}
    .calendarYearGrid .yearEventList{
      display:flex !important;
      flex-direction:column;
      gap:6px;
      margin-top:8px;
    }
    .calendarYearGrid .yearEventItem{
      display:block !important;
      background:#f8fafc;
      border:1px solid #e2e8f0;
      border-radius:12px;
      padding:7px 8px;
      font-size:12px;
      color:#334155;
      font-weight:800;
      line-height:1.35;
    }
    .calendarMonthFull{
      display:grid;
      grid-template-columns:repeat(7,1fr);
      gap:8px;
    }
    .calendarDayName{
      text-align:center;
      color:#64748b;
      font-weight:900;
      padding:8px;
    }
    .calendarDay{
      min-height:92px;
      border:1px solid #e2e8f0;
      background:#f8fafc;
      border-radius:16px;
      padding:9px;
      cursor:pointer;
      transition:.15s background,.15s transform;
    }
    .calendarDay:hover{background:#eff6ff}
    .calendarDay:active{transform:scale(.98)}
    .calendarDay.empty{
      background:transparent;
      border:0;
      cursor:default;
    }
    .calendarDay b{
      display:block;
      font-size:15px;
      margin-bottom:5px;
    }
    .calendarDay.today{
      border-color:#1966DB;
      box-shadow:0 0 0 3px rgba(25,102,219,.1);
      background:#eff6ff;
    }
    .weekGrid{
      display:grid;
      grid-template-columns:repeat(7,1fr);
      gap:10px;
    }
    .weekDayCard{
      background:#f8fafc;
      border:1px solid #dbeafe;
      border-radius:20px;
      padding:12px;
      min-height:230px;
    }
    .weekDayCard.today{
      border-color:#1966DB;
      background:#eff6ff;
    }
    .weekDayCard h4{
      margin:0 0 8px;
      font-size:18px;
      font-weight:1000;
    }
    .weekDayCard small{
      color:#64748b;
      font-weight:900;
    }
    .calendarMemo{
      margin-top:10px;
      width:100%;
      min-height:120px;
      resize:vertical;
      border:1px solid #cbd5e1;
      border-radius:14px;
      padding:10px;
      font-family:inherit;
      font-size:14px;
      outline:none;
    }
    .calendarMemo:focus{
      border-color:#1966DB;
      box-shadow:0 0 0 3px rgba(25,102,219,.12);
    }
    .eventDot{
      display:inline-block;
      width:7px;
      height:7px;
      border-radius:999px;
      background:#1966DB;
      margin-right:4px;
    }
    @media(max-width:900px){
      .calendarYearGrid{grid-template-columns:repeat(2,1fr)}
      .weekGrid{grid-template-columns:1fr}
    }
    @media(max-width:520px){
      .calendarYearGrid{grid-template-columns:1fr}
      .miniMonthGrid{display:none !important}
    .yearEventList{
      display:flex;
      flex-direction:column;
      gap:6px;
      margin-top:8px;
    }
    .yearEventItem{
      background:#f8fafc;
      border:1px solid #e2e8f0;
      border-radius:12px;
      padding:7px 8px;
      font-size:12px;
      color:#334155;
      font-weight:800;
      line-height:1.35;
    }
    .yearEventEmpty{display:none !important}
    .calendarYearGrid .yearEventList{
      display:flex !important;
      flex-direction:column;
      gap:6px;
      margin-top:8px;
    }
    .calendarYearGrid .yearEventItem{
      display:block !important;
      background:#f8fafc;
      border:1px solid #e2e8f0;
      border-radius:12px;
      padding:7px 8px;
      font-size:12px;
      color:#334155;
      font-weight:800;
      line-height:1.35;
    }
    .calendarMonthFull{gap:4px}
      .calendarDay{min-height:66px;padding:6px;border-radius:12px}
    }


    .rouletteLayout,.ladderLayout{
      display:grid;
      grid-template-columns:360px 1fr;
      gap:16px;
      align-items:start;
    }
    .rouletteWheelWrap{
      display:flex;
      justify-content:center;
      align-items:center;
      min-height:420px;
      position:relative;
    }
    .roulettePointer{
      position:absolute;
      top:18px;
      left:50%;
      transform:translateX(-50%);
      width:0;height:0;
      border-left:18px solid transparent;
      border-right:18px solid transparent;
      border-top:32px solid #ef4444;
      z-index:4;
      filter:drop-shadow(0 4px 6px rgba(0,0,0,.2));
    }
    .rouletteWheel{
      width:min(390px,78vw);
      height:min(390px,78vw);
      border-radius:999px;
      border:10px solid #111827;
      background:conic-gradient(#dbeafe 0 45deg,#fef3c7 45deg 90deg,#dcfce7 90deg 135deg,#fee2e2 135deg 180deg,#ede9fe 180deg 225deg,#cffafe 225deg 270deg,#fce7f3 270deg 315deg,#ffedd5 315deg 360deg);
      position:relative;
      transition:transform 3s cubic-bezier(.18,.78,.18,1);
      box-shadow:0 16px 35px rgba(15,23,42,.16);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    .rouletteWheel:after{
      content:"";
      width:72px;
      height:72px;
      border-radius:999px;
      background:#fff;
      border:8px solid #111827;
      box-shadow:0 6px 18px rgba(0,0,0,.18);
    }
   
   
   
   
   
    .rouletteLabel{
      position:absolute;
      left:50%;
      top:50%;
      height:24px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      font-size:10.5px;
      font-weight:1000;
      line-height:1;
      color:#0f172a;
      background:transparent;
      border:none;
      box-shadow:none;
      text-shadow:0 1px 2px rgba(255,255,255,.75);
      pointer-events:none;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      transform-origin:center center;
      letter-spacing:-0.2px;
      padding:0 2px;
    }
    .missionEditorList{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top:10px;
    }
    .missionEditorItem{
      background:#f8fafc;
      border:1px solid #e2e8f0;
      border-radius:16px;
      padding:10px;
      display:flex;
      justify-content:space-between;
      gap:8px;
      align-items:center;
      font-weight:900;
    }
    .missionEditorItem small{
      color:#64748b;
    }
    .resultBig{
      background:#eff6ff;
      border:1px solid #dbeafe;
      border-radius:22px;
      padding:18px;
      text-align:center;
      margin-top:12px;
    }
    .resultBig b{
      display:block;
      font-size:clamp(24px,4vw,42px);
      line-height:1.2;
    }
    .ladderBoard{
      background:#fff;
      border:1px solid #dbeafe;
      border-radius:24px;
      padding:16px;
      overflow-x:auto;
    }
    .ladderCanvas{
      width:100%;
      min-width:520px;
      height:420px;
      border-radius:18px;
      background:#f8fafc;
      border:1px solid #e2e8f0;
    }
    .ladderNames,.ladderResults{
      display:grid;
      gap:8px;
      margin:10px 0;
    }
    .ladderTag{
      background:#eff6ff;
      border:1px solid #dbeafe;
      border-radius:999px;
      padding:8px 10px;
      text-align:center;
      font-weight:1000;
      font-size:13px;
    }
    @media(max-width:900px){
      .rouletteLayout,.ladderLayout{grid-template-columns:1fr}
      .rouletteWheelWrap{min-height:340px}
    }


    .attendanceLayout{
      display:grid;
      grid-template-columns:330px 1fr;
      gap:16px;
      align-items:start;
    }
    .attendanceStudentList{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top:10px;
    }
    .attendanceStudent{
      background:#f8fafc;
      border:1px solid #e2e8f0;
      border-radius:16px;
      padding:10px;
      display:flex;
      justify-content:space-between;
      gap:8px;
      align-items:center;
      font-weight:900;
    }
    .attendanceTableWrap{overflow-x:auto}
    .attendanceTable{
      width:100%;
      min-width:760px;
      border-collapse:separate;
      border-spacing:0 8px;
      font-size:14px;
    }
    .attendanceTable th{
      text-align:left;
      color:#64748b;
      padding:8px;
      white-space:nowrap;
    }
    .attendanceTable td{
      background:#f8fafc;
      padding:10px 8px;
      white-space:nowrap;
    }
    .attendanceTable td:first-child{
      border-radius:14px 0 0 14px;
      font-weight:1000;
    }
    .attendanceTable td:last-child{
      border-radius:0 14px 14px 0;
    }
    .attStatusBtns{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
    .attStatusBtns button{
      padding:7px 9px;
      border-radius:11px;
      font-size:12px;
      box-shadow:none;
    }
    .attStatusBtns button.active{
      background:#111827;
      color:#fff;
      border-color:#111827;
    }
    .attBadge{
      display:inline-flex;
      align-items:center;
      border-radius:999px;
      padding:5px 9px;
      font-size:12px;
      font-weight:1000;
    }
    .att-present{background:#dcfce7;color:#166534}
    .att-late{background:#fef3c7;color:#92400e}
    .att-absent{background:#fee2e2;color:#991b1b}
    .att-none{background:#e2e8f0;color:#475569}
    .attendanceStats{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:10px;
      margin:12px 0;
    }
    .attendanceStat{
      background:#f8fafc;
      border:1px solid #e2e8f0;
      border-radius:18px;
      padding:12px;
    }
    .attendanceStat span{
      display:block;
      font-size:12px;
      color:#64748b;
      font-weight:900;
    }
    .attendanceStat b{
      display:block;
      margin-top:4px;
      font-size:22px;
      font-weight:1000;
    }
    @media(max-width:900px){
      .attendanceLayout{grid-template-columns:1fr}
      .attendanceStats{grid-template-columns:1fr 1fr}
    }
    @media(max-width:520px){
      .attendanceStats{grid-template-columns:1fr}
    }


    .circuitLayout{
      display:grid;
      grid-template-columns:360px 1fr;
      gap:16px;
      align-items:start;
    }
    .circuitSettingsGrid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
      margin-top:10px;
    }
    .circuitStationList{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top:12px;
    }
    .circuitStationItem{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      background:#f8fafc;
      border:1px solid #e2e8f0;
      border-radius:16px;
      padding:10px;
      font-weight:900;
    }
    .circuitStationItem.active{
      background:#eff6ff;
      border-color:#1966DB;
      box-shadow:0 0 0 3px rgba(25,102,219,.08);
    }
    .circuitStationItem small{
      display:block;
      color:#64748b;
      font-weight:800;
    }
    .circuitBoard{
      text-align:center;
      background:linear-gradient(180deg,#fff,#f8fbff);
      border-radius:28px;
      border:1px solid #dbeafe;
      padding:22px;
    }
    .circuitStationName{
      font-size:clamp(32px,6vw,64px);
      font-weight:1000;
      letter-spacing:-1px;
      margin:10px 0;
      color:#111827;
    }
    .circuitTimerBig{
      font-size:clamp(64px,13vw,140px);
      font-weight:1000;
      line-height:1;
      color:#1966DB;
      margin:14px 0;
    }
    .circuitProgress{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
      gap:8px;
      margin-top:14px;
    }
    .circuitProgressItem{
      border-radius:999px;
      padding:8px 10px;
      background:#f1f5f9;
      border:1px solid #e2e8f0;
      color:#475569;
      font-size:13px;
      font-weight:1000;
    }
    .circuitProgressItem.active{
      background:#1966DB;
      color:#fff;
      border-color:#1966DB;
    }
    .circuitProgressItem.done{
      background:#dcfce7;
      color:#166534;
      border-color:#bbf7d0;
    }
    @media(max-width:900px){
      .circuitLayout{grid-template-columns:1fr}
      .circuitSettingsGrid{grid-template-columns:1fr}
    }

    .toast{
      position:fixed;
      bottom:18px;
      left:50%;
      transform:translateX(-50%);
      background:#111827;
      color:#fff;
      padding:12px 18px;
      border-radius:999px;
      font-weight:900;
      box-shadow:0 10px 24px rgba(0,0,0,.25);
      opacity:0;
      pointer-events:none;
      transition:.2s opacity,.2s bottom;
      z-index:50;
    }
    .toast.show{opacity:1;bottom:28px}
    @media(max-width:840px){
      .header{flex-direction:column;align-items:stretch}
      .scoreBox{text-align:left}
      .grid{grid-template-columns:1fr 1fr}
      .two,.teamGrid{grid-template-columns:1fr}
      .missionList{grid-template-columns:1fr}
    }
    @media(max-width:520px){
      .app{padding:4px}
      .grid{grid-template-columns:1fr}
      .boardGrid{grid-template-columns:repeat(3,1fr)}
      .cell{min-height:86px}
      .topbar{flex-direction:column}
      .inputRow{flex-direction:column}
      h1{font-size:36px}
      .panel h2{font-size:28px}
      .timerBig{font-size:64px}
    }
 
    /* 연간 달력: 월 이름 + 작성한 내용 표시 */
    .calendarYearGrid .yearEventList{
      display:flex !important;
      flex-direction:column !important;
      gap:6px !important;
      margin-top:8px !important;
    }
    .calendarYearGrid .yearEventItem{
      display:block !important;
      background:#f8fafc !important;
      border:1px solid #e2e8f0 !important;
      border-radius:12px !important;
      padding:8px 9px !important;
      font-size:13px !important;
      color:#334155 !important;
      font-weight:800 !important;
      line-height:1.35 !important;
      text-align:left !important;
    }
    .calendarYearGrid .miniMonthGrid,
    .calendarYearGrid .yearEventEmpty{
      display:none !important;
    }

 
    /* 주간 달력에 작성한 내용 → 연간 달력 월 카드에 표시 */
    .calendarYearGrid .yearEventList{
      display:flex !important;
      flex-direction:column !important;
      gap:6px !important;
      margin-top:10px !important;
    }
    .calendarYearGrid .yearEventItem{
      display:block !important;
      background:#f8fafc !important;
      border:1px solid #dbeafe !important;
      border-radius:12px !important;
      padding:8px 9px !important;
      font-size:13px !important;
      color:#334155 !important;
      font-weight:800 !important;
      line-height:1.35 !important;
      text-align:left !important;
    }
    .calendarYearGrid .yearEventItem b{
      color:#1966DB !important;
      font-weight:1000 !important;
      margin-right:4px !important;
    }

 
    /* 캘린더 작성 내용 표시 강화 */
    .calendarMonthCard.hasMemo{
      border-color:#1966DB;
      background:#eff6ff;
    }
    .calendarDay.hasMemo{
      border-color:#1966DB;
      background:#eff6ff;
    }
    .calendarDayMemo{
      margin-top:6px;
      background:#fff;
      border:1px solid #dbeafe;
      border-radius:10px;
      padding:6px;
      color:#334155;
      font-size:12px;
      font-weight:800;
      line-height:1.35;
      text-align:left;
      word-break:break-word;
    }
    .calendarDayMemo.emptyMemo{
      display:none;
    }
    .weekMemoPreview{
      background:#fff;
      border:1px solid #dbeafe;
      border-radius:12px;
      padding:8px;
      color:#334155;
      font-size:13px;
      font-weight:800;
      line-height:1.35;
      min-height:36px;
      margin:8px 0;
      word-break:break-word;
    }
    .calendarYearGrid .yearEventList{
      display:flex !important;
      flex-direction:column !important;
      gap:6px !important;
      margin-top:10px !important;
    }
    .calendarYearGrid .yearEventItem{
      display:block !important;
      background:#fff !important;
      border:1px solid #dbeafe !important;
      border-radius:12px !important;
      padding:8px 9px !important;
      font-size:13px !important;
      color:#334155 !important;
      font-weight:800 !important;
      line-height:1.35 !important;
      text-align:left !important;
      word-break:break-word !important;
    }
    .calendarYearGrid .yearEventItem b{
      color:#1966DB !important;
      margin-right:5px !important;
    }
    .calendarYearGrid .yearEventEmpty{
      display:block !important;
      color:#94a3b8 !important;
      font-size:13px !important;
      font-weight:800 !important;
      margin-top:8px !important;
    }

 
    /* 연간 달력에서 바로 일정 확인/추가/수정 */
    .yearMonthHeader{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      cursor:pointer;
      margin-bottom:8px;
    }
    .yearMonthHeader h4{
      margin:0;
    }
    .yearMonthHeader span{
      color:#1966DB;
      font-size:12px;
      font-weight:1000;
      white-space:nowrap;
    }
    .calendarYearGrid .yearEventItem{
      display:flex !important;
      align-items:flex-start !important;
      justify-content:space-between !important;
      gap:8px !important;
    }
    .yearEventText{
      flex:1;
      min-width:0;
      word-break:break-word;
    }
    .yearEventEditBtn{
      padding:5px 8px !important;
      border-radius:10px !important;
      font-size:11px !important;
      flex:0 0 auto;
    }
    .yearQuickAdd{
      margin-top:10px;
      padding-top:10px;
      border-top:1px dashed #cbd5e1;
      cursor:default;
    }
    .yearQuickAdd label{
      display:block;
      font-size:12px;
      color:#334155;
      font-weight:1000;
      margin:0 0 5px 2px;
    }
    .yearQuickAddGrid{
      display:grid;
      grid-template-columns:54px 1fr auto;
      gap:6px;
      align-items:center;
    }
    .yearQuickAddGrid input{
      padding:8px 9px;
      border-radius:11px;
      font-size:13px;
    }
    .yearQuickAddGrid button{
      padding:8px 10px;
      border-radius:11px;
      font-size:12px;
    }
    @media(max-width:520px){
      .yearQuickAddGrid{
        grid-template-columns:1fr;
      }
    }

 
    /* 주간 달력 작성 내용이 연간 달력에도 보이도록 표시 강화 */
    .calendarYearGrid .calendarMonthCard.hasMemo{
      border-color:#1966DB !important;
      background:#eff6ff !important;
    }
    .calendarYearGrid .yearEventList{
      display:flex !important;
      flex-direction:column !important;
      gap:6px !important;
      margin-top:10px !important;
    }
    .calendarYearGrid .yearEventItem{
      display:flex !important;
      align-items:flex-start !important;
      justify-content:space-between !important;
      gap:8px !important;
      background:#fff !important;
      border:1px solid #dbeafe !important;
      border-radius:12px !important;
      padding:8px 9px !important;
      font-size:13px !important;
      color:#334155 !important;
      font-weight:800 !important;
      line-height:1.35 !important;
      text-align:left !important;
      word-break:break-word !important;
    }
    .calendarYearGrid .yearEventText{
      flex:1 !important;
      min-width:0 !important;
    }
    .calendarYearGrid .yearEventText b{
      color:#1966DB !important;
      margin-right:5px !important;
      font-weight:1000 !important;
    }
    .calendarYearGrid .yearEventEmpty{
      display:block !important;
      color:#94a3b8 !important;
      font-size:13px !important;
      font-weight:800 !important;
      margin-top:8px !important;
    }

 
    .attPhoneLink{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      padding:7px 10px;
      background:#eff6ff;
      border:1px solid #dbeafe;
      color:#1554bd;
      font-weight:1000;
      cursor:pointer;
      text-decoration:none;
      white-space:nowrap;
    }
    .attPhoneEdit{
      display:flex;
      gap:6px;
      align-items:center;
      min-width:170px;
    }
    .attPhoneEdit input{
      min-width:130px;
      padding:8px 9px;
      border-radius:11px;
      font-size:13px;
    }
    .attNotifyBtns{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      min-width:210px;
    }
    .attNotifyBtns button{
      padding:7px 9px;
      border-radius:11px;
      font-size:12px;
      box-shadow:none;
    }
    .attMessageMini{
      margin-top:6px;
      color:#64748b;
      font-size:12px;
      font-weight:800;
      white-space:normal;
      max-width:260px;
      line-height:1.35;
    }

 
    .quickAttendanceBox{
      background:#eff6ff;
      border:1px solid #bfdbfe;
      border-radius:22px;
      padding:16px;
      margin:14px 0;
    }
    .quickAttendanceBox h3{
      margin:8px 0 4px;
      font-size:24px;
      font-weight:1000;
    }
    .quickAttendanceInput{
      display:grid;
      grid-template-columns:160px repeat(3, auto);
      gap:8px;
      align-items:center;
      margin-top:12px;
    }
    .quickAttendanceInput input{
      font-size:26px;
      font-weight:1000;
      text-align:center;
      letter-spacing:3px;
      padding:12px;
      border-radius:16px;
      background:#fff;
    }
    .quickAttendanceInput button{
      white-space:nowrap;
    }
    .quickAttendanceResult{
      margin-top:10px;
      background:#fff;
      border:1px solid #dbeafe;
      border-radius:14px;
      padding:10px 12px;
      color:#334155;
      font-size:14px;
      font-weight:900;
    }
    @media(max-width:760px){
      .quickAttendanceInput{
        grid-template-columns:1fr;
      }
      .quickAttendanceInput input{
        text-align:left;
        letter-spacing:1px;
      }
    }

 
    .quickOnlyCard{
      max-width:560px;
      margin:0 auto;
      text-align:center;
    }
    .quickDisplay{
      background:#111827;
      color:#fff;
      border-radius:24px;
      padding:22px;
      font-size:54px;
      font-weight:1000;
      letter-spacing:10px;
      margin-bottom:16px;
    }
    .numberPad{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
      margin:16px 0;
    }
    .numberPad button{
      min-height:70px;
      border-radius:20px;
      font-size:28px;
      font-weight:1000;
    }
    .quickSendRow{
      display:grid;
      grid-template-columns:1fr;
      gap:8px;
      margin-top:12px;
    }
    .quickSendRow button{
      min-height:52px;
      font-size:17px;
    }
    .quickHelpBox{
      margin-top:14px;
      background:#f8fafc;
      border:1px solid #dbeafe;
      border-radius:18px;
      padding:14px;
      text-align:left;
      color:#334155;
      font-weight:800;
      line-height:1.5;
    }
    .quickHelpBox p{
      margin:6px 0 0;
      color:#64748b;
    }
    @media(max-width:520px){
      .quickDisplay{
        font-size:42px;
        letter-spacing:7px;
      }
      .numberPad button{
        min-height:62px;
      }
    }

 
    .programQuickBox{
      margin-top:14px;
      margin-bottom:14px;
    }

 
    .timerOptionGrid{
      display:grid;
      grid-template-columns:1fr auto;
      gap:10px;
      align-items:end;
      margin-top:10px;
    }
    .timerCheckOption{
      display:flex;
      align-items:center;
      gap:8px;
      padding:12px 14px;
      border-radius:15px;
      border:1px solid #dbeafe;
      background:#f8fafc;
      font-weight:1000;
      color:#334155;
      margin:0 !important;
      white-space:nowrap;
    }
    .timerCheckOption input{
      width:auto;
    }
    .timerProgramGrid{
      grid-template-columns:1.2fr .8fr .8fr .8fr auto;
    }
    @media(max-width:800px){
      .timerOptionGrid,
      .timerProgramGrid{
        grid-template-columns:1fr;
      }
    }

 
    .circuitLevelBox{
      background:#f8fafc;
    }
    .circuitLevelGrid{
      display:grid;
      grid-template-columns:1.2fr .8fr .8fr .8fr auto;
      gap:8px;
      align-items:end;
    }
    .circuitLevelGrid label{
      display:block;
      font-size:13px;
      font-weight:900;
      margin:0 0 4px 4px;
      color:#334155;
    }
    @media(max-width:900px){
      .circuitLevelGrid{
        grid-template-columns:1fr;
      }
    }

 
    .ladderCanvasWrap{
      position:relative;
      width:100%;
      min-width:520px;
      height:420px;
      border-radius:18px;
      overflow:hidden;
    }
    .ladderCanvasWrap .ladderCanvas{
      min-width:520px;
      height:420px;
    }
    .ladderCover{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:8px;
      background:linear-gradient(135deg,#111827,#1e3a8a);
      color:#fff;
      border-radius:18px;
      z-index:5;
      text-align:center;
      padding:20px;
    }
    .ladderCover.hiddenCover{
      display:none;
    }
    .ladderCover b{
      font-size:34px;
      font-weight:1000;
    }
    .ladderCover span{
      color:#dbeafe;
      font-weight:900;
    }
    .ladderTag.clickable{
      cursor:pointer;
      background:#1966DB;
      color:#fff;
      border-color:#1966DB;
      transition:.15s transform,.15s background;
    }
    .ladderTag.clickable:hover{
      background:#1554bd;
    }
    .ladderTag.clickable:active{
      transform:scale(.97);
    }
    .ladderTag small{
      display:block;
      font-size:11px;
      opacity:.85;
      margin-top:2px;
    }

 
    .ladderControlRow{
      align-items:flex-end;
    }
    .ladderBridgeControl{
      display:flex;
      flex-direction:column;
      gap:4px;
      min-width:110px;
    }
    .ladderBridgeControl label{
      font-size:12px;
      font-weight:1000;
      color:#334155;
      margin-left:4px;
    }
    .ladderBridgeControl input{
      padding:10px 11px;
      border-radius:13px;
      font-size:14px;
      font-weight:900;
      text-align:center;
    }

 
    /* 사다리 화면 전체 보이기 개선 */
    #ladder .ladderLayout{
      grid-template-columns:320px minmax(0, 1fr);
      align-items:start;
    }
    #ladder .ladderBoard{
      overflow:visible;
      width:100%;
      padding:14px;
    }
    #ladder .ladderCanvasWrap{
      width:100%;
      min-width:0;
      height:360px;
      overflow:visible;
    }
    #ladder .ladderCanvasWrap .ladderCanvas,
    #ladder .ladderCanvas{
      width:100%;
      min-width:0;
      height:360px;
      display:block;
    }
    #ladder .ladderNames,
    #ladder .ladderResults{
      min-width:0;
      width:100%;
    }
    #ladder .ladderTag{
      font-size:12px;
      padding:7px 6px;
      word-break:keep-all;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    #ladder .resultBig b{
      font-size:clamp(20px, 3vw, 34px);
      word-break:keep-all;
    }
    @media(max-width:900px){
      #ladder .ladderLayout{
        grid-template-columns:1fr;
      }
      #ladder .ladderCanvasWrap,
      #ladder .ladderCanvasWrap .ladderCanvas,
      #ladder .ladderCanvas{
        height:340px;
      }
    }
    @media(max-width:560px){
      #ladder .ladderBoard{
        padding:8px;
      }
      #ladder .ladderCanvasWrap,
      #ladder .ladderCanvasWrap .ladderCanvas,
      #ladder .ladderCanvas{
        height:300px;
      }
      #ladder .ladderTag{
        font-size:10px;
        padding:6px 4px;
      }
    }


    /* 출결 프로그램 학생 추가 폼 */
    .attendanceAddTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .attendanceAddPanel{
      margin-top:14px;
      padding-top:14px;
      border-top:1px dashed #cbd5e1;
    }
    .attendanceAddPanel.closed{display:none;}
    .attFormGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      text-align:left;
    }
    .attFormGrid label{
      display:block;
      font-size:13px;
      font-weight:900;
      color:#334155;
      margin:0 0 5px 4px;
    }
    .attFull{grid-column:1 / -1;}
    .attGenderBox{
      display:flex;
      gap:10px;
      align-items:center;
      min-height:47px;
      background:#f8fafc;
      border:1px solid #cbd5e1;
      border-radius:17px;
      padding:10px 12px;
    }
    .attGenderBox label{
      display:flex;
      align-items:center;
      gap:6px;
      margin:0;
      font-size:14px;
      color:#0f172a;
    }
    .attGenderBox input{width:auto;}
    .attTextArea{
      width:100%;
      min-height:90px;
      resize:vertical;
      border:1px solid #cbd5e1;
      border-radius:17px;
      padding:13px 14px;
      font-family:inherit;
      font-size:15px;
      outline:none;
    }
    .attTextArea:focus{
      border-color:var(--blue);
      box-shadow:0 0 0 3px rgba(25,102,219,.12);
    }
    .attendanceNameOnly{
      justify-content:space-between;
      align-items:center;
    }
    .attendanceNameOnly b{
      font-size:18px;
    }
    .attendanceNameOnly small{
      display:block;
      color:#64748b;
      font-weight:800;
      margin-top:3px;
    }
    @media(max-width:700px){
      .attFormGrid{grid-template-columns:1fr;}
    }


    /* 출결 학생 추가: 새창처럼 뜨는 팝업 */
    .attendanceAddPanel{
      position:fixed !important;
      top:50% !important;
      left:50% !important;
      transform:translate(-50%, -50%) !important;
      width:min(820px, calc(100% - 24px)) !important;
      max-height:88vh !important;
      overflow:auto !important;
      background:#fff !important;
      border:2px solid #1966DB !important;
      border-radius:28px !important;
      padding:22px !important;
      box-shadow:0 24px 70px rgba(15,23,42,.35) !important;
      z-index:200 !important;
      margin-top:0 !important;
      border-top:2px solid #1966DB !important;
    }
    .attendanceAddPanel.closed{display:none !important;}
    .attendanceAddPanel::before{
      content:"학생 정보 추가";
      display:block;
      font-size:26px;
      font-weight:1000;
      letter-spacing:-.5px;
      margin-bottom:14px;
      color:#111827;
    }
    .attendanceStudent.attendanceNameOnly{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
    }
    .attendanceStudent.attendanceNameOnly small{
      display:block;
      color:#1966DB;
      font-weight:1000;
      margin-top:4px;
    }
    .programQuickBox .foldHeader{
      margin-bottom:0;
    }
    .programQuickBox .foldContent{
      margin-top:12px;
    }


    /* 학생관리: 출결 안에 출결 달력 */
    .attendanceQuickCalendarGrid{
      display:grid;
      grid-template-columns:340px 1fr;
      gap:12px;
      align-items:start;
    }
    .attendanceMiniCalendar{
      background:#fff;
      border:1px solid #dbeafe;
      border-radius:18px;
      padding:12px;
      min-height:130px;
    }
    .attendanceCalendarSeparateBox{
      margin-top:16px;
      border:2px solid #dbeafe;
      background:#ffffff;
    }
    .attendanceMiniCalendarStandalone{
      min-height:180px;
      background:#f8fbff;
    }
    .attendanceHomeGrid{
      display:grid;
      grid-template-columns:1fr 1fr minmax(300px,1.35fr);
      gap:14px;
      align-items:stretch;
    }
    .attendanceHomeStatusBox{
      min-height:168px;
      padding:18px;
      cursor:default;
    }
    .attendanceHomeStatusBox h2{
      margin:0 0 8px;
      font-size:22px;
      font-weight:1000;
    }
    .attendanceHomeStatusBox p{
      margin:0 0 10px;
      color:#64748b;
      font-size:13px;
      font-weight:800;
      line-height:1.45;
    }
    .attendanceStatusToggleCard{
      cursor:pointer;
      transition:.15s transform,.15s box-shadow,.15s background;
    }
    .attendanceStatusToggleCard:hover{
      background:#eff6ff;
      box-shadow:0 12px 28px rgba(15,23,42,.1);
    }
    .attendanceStatusToggleCard:active{
      transform:scale(.99);
    }
    .attendanceStatusCardHead{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .attendanceStatusCardHead .icon{
      margin-bottom:0;
      flex:0 0 auto;
    }
    .attendanceStatusOpenHint{
      display:inline-flex;
      margin-top:12px;
      border-radius:999px;
      background:#eff6ff;
      color:#1554bd;
      padding:8px 12px;
      font-size:13px;
      font-weight:1000;
    }
    .attendanceStatusDetail{
      margin-top:14px;
      cursor:default;
    }
    .attendanceStatusDetail.closed{
      display:none;
    }
    .attendanceStatusDetailTop{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      margin-bottom:8px;
    }
    .attendanceStatusDetailTop button{
      padding:7px 10px;
      border-radius:12px;
      font-size:12px;
    }
    @media(max-width:900px){
      .attendanceHomeGrid{grid-template-columns:1fr}
    }

    .attendanceMiniCalendarHeader{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
      margin-bottom:10px;
    }
    .attendanceMiniCalendarHeader b{
      font-size:18px;
      font-weight:1000;
    }
    .attendanceMiniCalendarHeader span{
      color:#64748b;
      font-size:12px;
      font-weight:900;
    }
    .attendanceMiniStudentGrid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
      gap:8px;
    }
    .attendanceMiniStudent{
      border:1px solid #e2e8f0;
      background:#f8fafc;
      border-radius:14px;
      padding:9px;
      font-weight:1000;
      line-height:1.35;
    }
    .attendanceMiniStudent small{
      display:block;
      margin-top:3px;
      color:#64748b;
      font-size:11px;
      font-weight:900;
    }
    .attendanceMiniStudent.checked{
      border-color:#86efac;
      background:#dcfce7;
      color:#166534;
    }
    .attendanceMiniStudent.unchecked{
      border-color:#cbd5e1;
      background:#f8fafc;
      color:#475569;
    }
    .attendanceMiniStudent.late{
      border-color:#fde68a;
      background:#fef3c7;
      color:#92400e;
    }
    .attendanceMiniStudent.absent{
      border-color:#fecaca;
      background:#fee2e2;
      color:#991b1b;
    }
    .attendanceCheckSummary{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      margin-top:10px;
    }
    .attendanceCheckSummary span{
      display:inline-flex;
      border-radius:999px;
      padding:5px 8px;
      background:#f1f5f9;
      color:#334155;
      font-size:12px;
      font-weight:1000;
    }
    @media(max-width:900px){
      .attendanceQuickCalendarGrid{grid-template-columns:1fr}
    }


    /* 등록 학생 출결 현황: 전체 화면 월간 캘린더 */
    .attendanceMonthlyStatusBox,
    .attendanceSelectedDayBox{
      padding:18px;
      margin-bottom:14px;
    }
    .attendanceMonthlyTop,
    .attendanceSelectedDayTop{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:12px;
    }
    .attendanceMonthlyTop h3,
    .attendanceSelectedDayTop h3{
      margin:0 0 4px;
      font-size:24px;
      font-weight:1000;
    }
    .attendanceMonthlyTop p,
    .attendanceSelectedDayTop p{
      margin:0;
      color:#64748b;
      font-size:13px;
      font-weight:800;
      line-height:1.45;
    }
    .attendanceStatusLegend{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin:8px 0 12px;
    }
    .attendanceMonthlyCalendar{
      display:grid;
      grid-template-columns:repeat(7,1fr);
      gap:8px;
    }
    .attendanceMonthDayName{
      text-align:center;
      color:#64748b;
      font-weight:1000;
      padding:8px 4px;
      font-size:13px;
    }
    .attendanceMonthDay{
      min-height:132px;
      background:#f8fafc;
      border:1px solid #e2e8f0;
      border-radius:16px;
      padding:9px;
      cursor:pointer;
      transition:.15s background,.15s transform,.15s border-color;
      overflow:hidden;
    }
    .attendanceMonthDay:hover{
      background:#eff6ff;
      border-color:#bfdbfe;
    }
    .attendanceMonthDay:active{transform:scale(.98)}
    .attendanceMonthDay.empty{
      background:transparent;
      border:0;
      cursor:default;
    }
    .attendanceMonthDay.today{
      border-color:#1966DB;
      box-shadow:0 0 0 3px rgba(25,102,219,.1);
      background:#eff6ff;
    }
    .attendanceMonthDay.selected{
      border-color:#111827;
      box-shadow:0 0 0 3px rgba(17,24,39,.12);
    }
    .attendanceMonthDayHead{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:6px;
      margin-bottom:7px;
    }
    .attendanceMonthDayHead b{
      font-size:16px;
      font-weight:1000;
    }
    .attendanceMonthDayHead small{
      color:#64748b;
      font-size:11px;
      font-weight:900;
      white-space:nowrap;
    }
    .attendanceMonthSummary{
      display:flex;
      flex-wrap:wrap;
      gap:4px;
      margin-bottom:6px;
    }
    .attendanceMiniCount{
      border-radius:999px;
      padding:3px 6px;
      font-size:10px;
      font-weight:1000;
      background:#e2e8f0;
      color:#475569;
    }
    .attendanceMiniCount.present{background:#dcfce7;color:#166534}
    .attendanceMiniCount.late{background:#fef3c7;color:#92400e}
    .attendanceMiniCount.absent{background:#fee2e2;color:#991b1b}
    .attendanceMonthNames{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .attendanceMonthNameItem{
      background:#fff;
      border:1px solid #e2e8f0;
      border-radius:9px;
      padding:4px 5px;
      font-size:11px;
      font-weight:900;
      color:#334155;
      line-height:1.25;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .attendanceMonthNameItem.present{border-color:#bbf7d0;background:#dcfce7;color:#166534}
    .attendanceMonthNameItem.late{border-color:#fde68a;background:#fef3c7;color:#92400e}
    .attendanceMonthNameItem.absent{border-color:#fecaca;background:#fee2e2;color:#991b1b}
    .attendanceMonthNameItem.none{background:#fff;color:#64748b}
    .attendanceMonthMore{
      color:#64748b;
      font-size:11px;
      font-weight:900;
      margin-top:2px;
    }
    .attendanceSelectedDayStudents{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
      gap:10px;
    }
    .attendanceSelectedStudent{
      border:1px solid #e2e8f0;
      background:#f8fafc;
      border-radius:16px;
      padding:12px;
      font-weight:1000;
    }
    .attendanceSelectedStudent small{
      display:block;
      margin-top:5px;
      color:#64748b;
      font-size:12px;
      font-weight:900;
    }
    .attendanceSelectedStudent.present{border-color:#86efac;background:#dcfce7;color:#166534}
    .attendanceSelectedStudent.late{border-color:#fde68a;background:#fef3c7;color:#92400e}
    .attendanceSelectedStudent.absent{border-color:#fecaca;background:#fee2e2;color:#991b1b}
    @media(max-width:900px){
      .attendanceMonthlyCalendar{gap:5px}
      .attendanceMonthDay{min-height:110px;padding:6px;border-radius:12px}
      .attendanceMonthNameItem{font-size:10px;padding:3px 4px}
    }
    @media(max-width:620px){
      .attendanceMonthlyCalendar{grid-template-columns:repeat(7,minmax(42px,1fr));overflow-x:auto}
      .attendanceMonthDayName{font-size:11px;padding:6px 2px}
      .attendanceMonthDay{min-height:86px;padding:5px}
      .attendanceMonthSummary{display:none}
      .attendanceMonthDayHead small{display:none}
    }

 

    /* 등록 학생 출결 현황: 월간 행렬표 */
    .attendanceMatrixStatusBox{
      padding:18px;
    }
    .attendanceMatrixTop{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:12px;
    }
    .attendanceMatrixTop h3{
      margin:0;
      font-size:28px;
      font-weight:1000;
    }
    .attendanceMatrixTop p{
      margin:6px 0 0;
      color:#64748b;
      font-weight:800;
    }
    .attendanceMatrixControls{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
    }
    .attendanceMatrixControls select,
    .attendanceMatrixControls input{
      width:auto;
      min-width:110px;
      padding:10px 12px;
      border-radius:13px;
      font-size:14px;
    }
    .attendanceMatrixControls input{
      min-width:190px;
    }
    .attendanceMatrixSummary{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin:12px 0 14px;
    }
    .attendanceMatrixSummaryItem{
      background:#f8fafc;
      border:1px solid #dbeafe;
      border-radius:999px;
      padding:8px 12px;
      font-size:13px;
      font-weight:1000;
      color:#334155;
    }
    .attendanceMatrixWrap{
      overflow:auto;
      border:1px solid #dbeafe;
      border-radius:20px;
      background:#fff;
      max-height:70vh;
    }
    .attendanceMatrixTable{
      width:max-content;
      min-width:100%;
      border-collapse:separate;
      border-spacing:0;
      font-size:14px;
    }
    .attendanceMatrixTable th,
    .attendanceMatrixTable td{
      border-right:1px solid #e5e7eb;
      border-bottom:1px solid #e5e7eb;
      padding:0;
      text-align:center;
      min-width:44px;
      height:42px;
      background:#fff;
    }
    .attendanceMatrixTable thead th{
      position:sticky;
      top:0;
      z-index:3;
      background:#f8fafc;
      font-weight:1000;
    }
    .attendanceMatrixTable th:first-child,
    .attendanceMatrixTable td:first-child{
      position:sticky;
      left:0;
      z-index:2;
      min-width:120px;
      max-width:120px;
      background:#fff;
      text-align:left;
      padding:0 10px;
      font-weight:1000;
    }
    .attendanceMatrixTable thead th:first-child{
      z-index:4;
      background:#f1f5f9;
    }
    .attendanceMatrixTable tbody tr:nth-child(even) td:first-child{
      background:#f8fafc;
    }
    .attendanceMatrixTable tbody tr:nth-child(even) td{
      background:#fcfcfd;
    }
    .attendanceMatrixDayHeader.sat{color:#2563eb;}
    .attendanceMatrixDayHeader.sun{color:#dc2626;}
    .attendanceMatrixNameCell small{
      display:block;
      color:#64748b;
      font-size:11px;
      font-weight:800;
      margin-top:2px;
    }
    .attendanceMatrixCell button{
      width:100%;
      height:100%;
      border:0;
      background:transparent;
      border-radius:0;
      box-shadow:none;
      color:#111827;
      font-size:17px;
      font-weight:1000;
      padding:0;
    }
    .attendanceMatrixCell.none button{color:#cbd5e1; font-size:14px;}
    .attendanceMatrixCell.present{background:#dcfce7;}
    .attendanceMatrixCell.late{background:#fef3c7;}
    .attendanceMatrixCell.absent{background:#fee2e2;}
    .attendanceMatrixCell.none{background:#fff;}
    .attendanceMatrixEmpty{
      padding:28px;
      text-align:center;
      color:#64748b;
      font-weight:900;
    }
    @media(max-width:700px){
      .attendanceMatrixControls{width:100%;}
      .attendanceMatrixControls select,
      .attendanceMatrixControls input,
      .attendanceMatrixControls button{width:100%;}
      .attendanceMatrixTable th:first-child,
      .attendanceMatrixTable td:first-child{
        min-width:92px;
        max-width:92px;
        font-size:12px;
      }
      .attendanceMatrixTable th,
      .attendanceMatrixTable td{
        min-width:36px;
        height:36px;
      }
    }





    /* 랜덤달리기 */
    .randomRunLayout{
      display:grid;
      grid-template-columns:340px 1fr;
      gap:16px;
      align-items:start;
    }
    .randomRunSettings{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin-top:10px;
    }
    .randomRunSettings label{
      display:block;
      font-size:13px;
      font-weight:900;
      color:#334155;
      margin:0 0 5px 4px;
    }
    .randomRunBoard{
      text-align:center;
      background:linear-gradient(180deg,#fff,#eff6ff);
      border:1px solid #dbeafe;
      border-radius:30px;
      padding:26px;
      min-height:460px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
    }
    .randomRunCommand{
      width:100%;
      border-radius:30px;
      background:#111827;
      color:#fff;
      padding:32px 18px;
      box-shadow:0 14px 30px rgba(15,23,42,.18);
      margin:12px 0 18px;
    }
    .randomRunCommand small{
      display:block;
      color:#cbd5e1;
      font-size:18px;
      font-weight:900;
      margin-bottom:10px;
    }
    .randomRunCommand b{
      display:block;
      font-size:clamp(44px,8vw,86px);
      line-height:1.05;
      font-weight:1000;
      letter-spacing:-2px;
      word-break:keep-all;
    }
    .randomRunTimer{
      font-size:clamp(64px,12vw,128px);
      line-height:1;
      font-weight:1000;
      color:#1966DB;
      margin:8px 0 4px;
    }
    .randomRunSub{
      color:#64748b;
      font-size:16px;
      font-weight:900;
      margin-bottom:18px;
    }
    .randomRunMissionList{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:12px;
    }
    .randomRunMissionChip{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:999px;
      background:#f8fafc;
      border:1px solid #dbeafe;
      padding:7px 10px;
      font-size:13px;
      font-weight:900;
    }
    .randomRunMissionChip button{
      padding:3px 7px;
      border-radius:999px;
      font-size:11px;
      box-shadow:none;
    }
    .randomRunHistory{
      width:100%;
      margin-top:14px;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
      gap:8px;
    }
    .randomRunHistoryItem{
      border:1px solid #dbeafe;
      background:#fff;
      border-radius:16px;
      padding:10px;
      font-weight:1000;
      color:#334155;
    }
    @media(max-width:900px){
      .randomRunLayout{grid-template-columns:1fr}
      .randomRunSettings{grid-template-columns:1fr}
      .randomRunBoard{min-height:360px;padding:18px}
    }

    /* 수업용 게임 삑소리 볼륨 조절 */
    .beepVolumeBox{
      margin-top:12px;
      background:#f8fafc;
      border:1px solid #dbeafe;
      border-radius:18px;
      padding:12px;
      text-align:left;
    }
    .beepVolumeBox label{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color:#334155;
      font-size:14px;
      font-weight:1000;
      margin-bottom:8px;
    }
    .beepVolumeBox input[type="range"]{
      width:100%;
      padding:0;
      border:0;
      box-shadow:none;
      accent-color:#1966DB;
    }
    .beepVolumeHint{
      margin-top:7px;
      color:#64748b;
      font-size:12px;
      font-weight:800;
      line-height:1.35;
    }



    .fitShareBox{
      margin:14px 0;
      background:#f8fafc;
      border:1px solid #dbeafe;
      border-radius:20px;
      padding:14px;
    }
    .fitShareBox h4{
      margin:0 0 6px;
      font-size:18px;
      font-weight:1000;
    }
    .fitShareHelp{
      margin:0 0 10px;
      color:#64748b;
      font-weight:800;
      line-height:1.45;
      font-size:13px;
    }
    .fitShareHelp.small{
      margin:8px 0 0;
      font-size:12px;
    }
    .fitShareCanvas{
      width:100%;
      max-height:360px;
      background:#fff;
      border:1px solid #e2e8f0;
      border-radius:16px;
      display:block;
    }
    .fitKakaoBtn{
      padding:7px 10px;
      border-radius:11px;
      font-size:12px;
      box-shadow:none;
    }



    /* ===============================
       TKD MISSION ROAD PRO - ALL UPGRADE PACK
       프리미엄 UX / 모바일 / 접근성 / 운영 기능 보강
       =============================== */
    :root{
      --premium-navy:#08111f;
      --premium-blue:#2563eb;
      --premium-cyan:#06b6d4;
      --premium-gold:#fbbf24;
      --glass:rgba(255,255,255,.78);
      --shadow-lg:0 18px 45px rgba(15,23,42,.14);
      --safe-bottom:env(safe-area-inset-bottom, 0px);
    }
    html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
    body.tkdDark{
      --dark:#f8fafc;
      --muted:#cbd5e1;
      --card:#111827;
      --line:#334155;
      background:radial-gradient(circle at top,#123b75 0%,#07111f 42%,#020617 100%);
      color:#f8fafc;
    }
    body.tkdDark .header,
    body.tkdDark .panel,
    body.tkdDark .whiteCard,
    body.tkdDark .menuCard,
    body.tkdDark .homeQuickCard,
    body.tkdDark .homeCategory,
    body.tkdDark .calendarMonthCard,
    body.tkdDark .circuitBoard,
    body.tkdDark .ladderBoard{
      background:rgba(15,23,42,.88)!important;
      border-color:#334155!important;
      color:#f8fafc!important;
      box-shadow:0 16px 38px rgba(0,0,0,.28)!important;
    }
    body.tkdDark input, body.tkdDark select, body.tkdDark textarea{
      background:#020617!important;
      color:#f8fafc!important;
      border-color:#475569!important;
    }
    .tkdUpgradeBar{
      position:sticky;
      top:8px;
      z-index:45;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin:0 0 10px;
      padding:10px;
      border:1px solid rgba(37,99,235,.18);
      border-radius:22px;
      background:rgba(255,255,255,.82);
      backdrop-filter:blur(14px);
      box-shadow:0 12px 30px rgba(15,23,42,.10);
    }
    body.tkdDark .tkdUpgradeBar{background:rgba(2,6,23,.78);border-color:#334155;}
    .tkdUpgradeBrand{display:flex;align-items:center;gap:9px;font-weight:1000;letter-spacing:-.3px;white-space:nowrap;}
    .tkdUpgradeBrand span:first-child{width:34px;height:34px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2563eb,#06b6d4);color:white;box-shadow:0 8px 16px rgba(37,99,235,.24)}
    .tkdUpgradeActions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
    .tkdMiniBtn{padding:8px 10px!important;border-radius:13px!important;font-size:12px!important;box-shadow:none!important;}
    .tkdSearchOverlay{position:fixed;inset:0;z-index:100;background:rgba(2,6,23,.55);display:none;align-items:flex-start;justify-content:center;padding:72px 14px 14px;}
    .tkdSearchOverlay.open{display:flex;}
    .tkdSearchBox{width:min(680px,100%);background:#fff;border-radius:26px;padding:16px;box-shadow:0 28px 70px rgba(0,0,0,.35);}
    body.tkdDark .tkdSearchBox{background:#0f172a;color:#fff;border:1px solid #334155;}
    .tkdSearchBox input{font-size:20px;font-weight:900;border-radius:18px;}
    .tkdSearchResults{display:grid;gap:8px;margin-top:12px;max-height:55vh;overflow:auto;}
    .tkdSearchItem{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px;border:1px solid #dbeafe;border-radius:16px;background:#f8fafc;cursor:pointer;font-weight:900;}
    body.tkdDark .tkdSearchItem{background:#020617;border-color:#334155;}
    .tkdSearchItem small{display:block;color:#64748b;font-weight:800;margin-top:3px;}
    .tkdKpiRail{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:10px 0 14px;}
    .tkdKpiCard{background:linear-gradient(135deg,#fff,#eff6ff);border:1px solid #dbeafe;border-radius:22px;padding:13px;box-shadow:0 8px 20px rgba(15,23,42,.06)}
    .tkdKpiCard span{display:block;color:#64748b;font-size:12px;font-weight:900}.tkdKpiCard b{display:block;font-size:24px;margin-top:2px}.tkdKpiCard small{color:#64748b;font-weight:800}
    body.tkdDark .tkdKpiCard{background:linear-gradient(135deg,#111827,#0f172a);border-color:#334155;}
    .premiumFocus{animation:premiumPulse 1.2s ease-in-out 2;}
    @keyframes premiumPulse{0%,100%{box-shadow:0 0 0 rgba(37,99,235,0)}50%{box-shadow:0 0 0 8px rgba(37,99,235,.16)}}
    .installHint{position:fixed;right:14px;bottom:calc(14px + var(--safe-bottom));z-index:46;background:#111827;color:#fff;border-radius:18px;padding:11px 13px;box-shadow:0 14px 35px rgba(0,0,0,.25);font-size:12px;font-weight:900;display:none;max-width:260px;}
    .installHint.show{display:block;}
    @media(max-width:760px){.tkdUpgradeBar{top:4px;align-items:flex-start;flex-direction:column}.tkdUpgradeActions{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr}.tkdKpiRail{grid-template-columns:1fr 1fr}.header{border-radius:24px}.menuCard,.panel,.whiteCard{border-radius:24px}.homeMainCard{border-radius:26px;padding:24px}.homeMainCard h2{font-size:34px}.topbar button{width:100%}}
    @media(max-width:420px){.tkdUpgradeActions{grid-template-columns:1fr 1fr}.tkdMiniBtn{font-size:11px!important}.tkdKpiRail{grid-template-columns:1fr}.numberPad button{min-height:58px!important}}
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

  

    /* WEBSITE UPGRADE: 전체 페이지 외곽/내부 여백 강화 */
    .app{
      padding:20px !important;
    }
    .header,
    .menuCard,
    .panel,
    .whiteCard{
      padding:28px !important;
      border-radius:32px !important;
    }
    .boardCard{
      padding:16px !important;
    }
    .homeCategory,
    .homeQuickCard{
      padding:30px !important;
    }
    @media(max-width:520px){
      .app{padding:12px !important;}
      .header,.menuCard,.panel,.whiteCard{padding:20px !important;}
    }