/* PE-Class v1.15.64 — A안 클린 스카이 홈 + 상단 문구 중앙 보정
 * 기존 모바일·Fold UI와 다른 탭은 변경하지 않습니다.
 */
:root{
  --home-font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans KR',Arial,sans-serif;
  --header-font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans KR',Arial,sans-serif;
  --home-title-color:#17324d;
  --home-highlight-color:#1473e6;
  --home-description-color:#52697d;
  --home-card-title-color:#17324d;
  --header-teacher-title-color:#26364a;
  --header-app-title-color:#2b96e5;
}

.pe87Title{font-family:var(--header-font-family)}
.pe87Title strong{color:var(--header-teacher-title-color)!important}
.pe87Title b{color:var(--header-app-title-color)!important}

.adminAppearanceCard{grid-column:1/-1}
.adminAppearanceFields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px 16px;
}
.adminAppearanceFields>.hint{grid-column:1/-1;margin:0 0 2px;padding:10px 12px;border-radius:9px;background:#f2f8fc}
.adminAppearanceFields label{display:grid;grid-template-columns:minmax(110px,.42fr) minmax(0,1fr);align-items:center;gap:12px;margin:0!important;color:#425c71;font-size:12px;font-weight:900}
.adminAppearanceFields select{width:100%;min-width:0}
.adminColorControl{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;min-width:0}
.adminColorControl input[type="color"]{
  width:48px!important;
  height:40px!important;
  min-width:48px!important;
  padding:3px!important;
  border-radius:8px!important;
  cursor:pointer;
}
.adminColorControl input:not([type="color"]){width:100%;min-width:0;text-align:center;text-transform:uppercase}

@media(max-width:920px){
  .adminAppearanceFields{grid-template-columns:1fr}
  .adminAppearanceFields>.hint{grid-column:auto}
}

/* A안 클린 스카이: PC와 iPad 홈에만 적용 */
@media(min-width:769px){
  html:not(.pe87FoldWide) body.homeDashboardApp{
    --home-sky:#1473e6;
    --home-sky-deep:#0f5fc7;
    --home-sky-soft:#eaf4ff;
    --home-sky-line:#cfe2f5;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .pe87Main{background:#f3f8fd!important}
  html:not(.pe87FoldWide) body.homeDashboardApp #app{
    border-color:#d9e8f5!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeDashboard{
    color:#17324d;
    font-family:var(--home-font-family);
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHero{
    border-color:#c8def2;
    background:
      radial-gradient(circle at 88% 24%,rgba(72,155,235,.17) 0 8%,transparent 8.4%),
      radial-gradient(circle at 77% 70%,rgba(66,143,226,.10) 0 17%,transparent 17.4%),
      linear-gradient(122deg,#f8fcff 0%,#eef7ff 58%,#e4f1ff 100%);
    box-shadow:0 16px 38px rgba(45,109,166,.12);
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHero::after{
    content:"";
    position:absolute;
    right:19%;
    bottom:-82px;
    width:260px;
    height:190px;
    border:1px solid rgba(62,138,211,.15);
    border-radius:50%;
    transform:rotate(-18deg);
    pointer-events:none;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHeroEyebrow{color:#1473e6}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHeroEyebrow i{
    background:#2f8ae6;
    box-shadow:0 0 0 5px rgba(47,138,230,.12);
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHero h1{color:var(--home-title-color)}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHero h1 em{color:var(--home-highlight-color)}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHero p{color:var(--home-description-color)}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHeroPrimary{
    border-color:#1473e6;
    background:linear-gradient(180deg,#2384ec,#1473e6);
    box-shadow:0 8px 18px rgba(20,115,230,.22);
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHeroSecondary{
    border-color:#bad2e9;
    background:rgba(255,255,255,.78);
    color:#276590;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHeroSecondary:hover{background:#fff}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHeroVisual::before,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHeroVisual::after,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHeroOrbit{border-color:rgba(47,125,198,.21)}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHeroVisual::before{
    box-shadow:0 0 0 76px rgba(60,141,220,.035),0 0 0 154px rgba(60,141,220,.025);
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHeroCount{
    border:1px solid rgba(77,150,219,.18);
    border-radius:50%;
    background:rgba(255,255,255,.54);
    box-shadow:0 15px 35px rgba(58,124,184,.10);
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHeroCount strong{color:#173e63}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHeroCount span{color:#56728a}
  html:not(.pe87FoldWide) body.homeDashboardApp .dotOne,
  html:not(.pe87FoldWide) body.homeDashboardApp .dotTwo{border-color:#ff8a45}
  html:not(.pe87FoldWide) body.homeDashboardApp .dotThree{border-color:#2e9bd4}

  html:not(.pe87FoldWide) body.homeDashboardApp .homeMetrics article,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeDashboardCard{
    border-color:#d6e6f3;
    box-shadow:0 8px 24px rgba(43,102,153,.07);
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeMetrics span{color:#5f7a8f}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeMetrics strong{color:#153957}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeMetrics small{color:#8ca0af}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeDashboardCard h2{color:var(--home-card-title-color)}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeDashboardCard header small,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeDashboardCard header button{color:#1473e6}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSportsTerm,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeScheduleCount{
    background:#e8f3ff;
    color:#146bcf;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeTodayPeriod,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSportIcon{
    background:#eaf4ff;
    color:#146bcf;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSportClasses>span{border-color:#dbe9f4;background:#f8fbff}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSportClasses>span em{color:#1473e6}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeUpcomingBadge{background:#eaf4ff;color:#146bcf}
}

/* PC: 화면 안에 홈 전체를 맞추고 목록 카드만 내부 스크롤 */
@media(min-width:921px){
  html:not(.pe87Ipad):not(.pe87IpadRuntime):not(.pe87FoldWide) body.homeDashboardApp{overflow-y:hidden!important}
  html:not(.pe87Ipad):not(.pe87IpadRuntime):not(.pe87FoldWide) body.homeDashboardApp .pe87Shell{
    height:calc(100dvh - 88px)!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html:not(.pe87Ipad):not(.pe87IpadRuntime):not(.pe87FoldWide) body.homeDashboardApp .pe87Main{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html:not(.pe87Ipad):not(.pe87IpadRuntime):not(.pe87FoldWide) body.homeDashboardApp #app{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html:not(.pe87Ipad):not(.pe87IpadRuntime):not(.pe87FoldWide) body.homeDashboardApp .homeDashboard{
    height:100%;
    min-height:0;
    grid-template-rows:clamp(240px,32vh,360px) 96px minmax(0,1fr);
  }
}

/* iPad: 세로·가로 화면 모두 바깥 스크롤 없이 홈 카드 내부만 스크롤 */
@media(min-width:769px) and (max-width:1366px){
  html.pe87Ipad body.homeDashboardApp,
  html.pe87IpadRuntime body.homeDashboardApp{overflow-y:hidden!important}
  html.pe87Ipad body.homeDashboardApp .pe87Shell,
  html.pe87IpadRuntime body.homeDashboardApp .pe87Shell{
    height:calc(100dvh - 76px)!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html.pe87Ipad body.homeDashboardApp .pe87Main,
  html.pe87IpadRuntime body.homeDashboardApp .pe87Main{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html.pe87Ipad body.homeDashboardApp #app,
  html.pe87IpadRuntime body.homeDashboardApp #app{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html.pe87Ipad body.homeDashboardApp .homeDashboard,
  html.pe87IpadRuntime body.homeDashboardApp .homeDashboard{
    height:100%;
    min-height:0;
    grid-template-rows:clamp(210px,28vh,310px) 84px minmax(0,1fr);
  }
  html.pe87Ipad body.homeDashboardApp .homeDashboardGrid,
  html.pe87IpadRuntime body.homeDashboardApp .homeDashboardGrid{
    grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);
  }
}
@media(min-width:769px) and (max-width:1100px){
  html.pe87Ipad body.homeDashboardApp .pe87Shell,
  html.pe87IpadRuntime body.homeDashboardApp .pe87Shell{
    display:flex!important;
    flex-direction:column!important;
  }
  html.pe87Ipad body.homeDashboardApp .pe87Side,
  html.pe87IpadRuntime body.homeDashboardApp .pe87Side{flex:0 0 auto}
  html.pe87Ipad body.homeDashboardApp .pe87Main,
  html.pe87IpadRuntime body.homeDashboardApp .pe87Main{flex:1 1 auto}
}

@media(min-width:769px){
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHero{min-height:0}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeDashboardGrid,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeDashboardCard,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeScheduleColumns,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSchedulePane{min-height:0}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeDashboardCard{height:100%}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeScheduleColumns{height:100%}
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSchedulePane{
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSportsCard{
    display:grid;
    grid-template-rows:auto minmax(0,1fr);
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeTodayList,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeUpcomingList,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSportsList{
    height:100%;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

/* v1.15.62 — 위·아래 카드 경계를 같은 3열에 맞추고 바깥 프레임을 제거 */
@media (min-width:1000px), (min-width:769px) and (hover:hover) and (pointer:fine){
  html:not(.pe87FoldWide) body.homeDashboardApp #app{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    box-sizing:border-box!important;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeDashboard{
    width:100%;
    max-width:none;
    gap:16px;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHeroCopy{
    justify-content:center;
    padding-top:22px;
    padding-bottom:22px;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHero h1{
    margin-top:10px;
    margin-bottom:6px;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeHeroActions{
    margin-top:16px;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeMetrics,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeDashboardGrid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeMetrics article{
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    box-sizing:border-box;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeScheduleCard{
    grid-column:span 2;
    min-width:0;
    overflow:visible;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeScheduleColumns{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px;
    min-width:0;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSchedulePane{
    width:100%;
    min-width:0;
    max-width:100%;
    height:100%;
    overflow:hidden;
    border:1px solid #d6e6f3!important;
    border-radius:19px;
    background:#fff;
    box-shadow:0 8px 24px rgba(43,102,153,.07);
    box-sizing:border-box;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSchedulePane+.homeSchedulePane{
    border-left:1px solid #d6e6f3!important;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSportsCard{
    grid-column:auto;
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSchedulePane>header,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeDashboardCard>header,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeTodayList,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeUpcomingList,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSportsList,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSportRow{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  html:not(.pe87FoldWide) body.homeDashboardApp .homeTodayList,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeUpcomingList,
  html:not(.pe87FoldWide) body.homeDashboardApp .homeSportsList{
    overflow-x:hidden;
  }
}

/* 작은 iPad 세로 화면은 기기 클래스가 있을 때만 같은 3열을 사용합니다. */
@media(min-width:720px) and (max-width:999px){
  html.pe87Ipad body.homeDashboardApp #app,
  html.pe87IpadRuntime body.homeDashboardApp #app{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    box-sizing:border-box!important;
  }
  html.pe87Ipad body.homeDashboardApp .homeDashboard,
  html.pe87IpadRuntime body.homeDashboardApp .homeDashboard{
    width:100%;
    max-width:none;
    gap:16px;
  }
  html.pe87Ipad body.homeDashboardApp .homeMetrics,
  html.pe87Ipad body.homeDashboardApp .homeDashboardGrid,
  html.pe87IpadRuntime body.homeDashboardApp .homeMetrics,
  html.pe87IpadRuntime body.homeDashboardApp .homeDashboardGrid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
  }
  html.pe87Ipad body.homeDashboardApp .homeMetrics article,
  html.pe87IpadRuntime body.homeDashboardApp .homeMetrics article{
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    box-sizing:border-box;
  }
  html.pe87Ipad body.homeDashboardApp .homeScheduleCard,
  html.pe87IpadRuntime body.homeDashboardApp .homeScheduleCard{
    grid-column:span 2;
    min-width:0;
    overflow:visible;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html.pe87Ipad body.homeDashboardApp .homeScheduleColumns,
  html.pe87IpadRuntime body.homeDashboardApp .homeScheduleColumns{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px;
    min-width:0;
  }
  html.pe87Ipad body.homeDashboardApp .homeSchedulePane,
  html.pe87IpadRuntime body.homeDashboardApp .homeSchedulePane{
    width:100%;
    min-width:0;
    max-width:100%;
    height:100%;
    overflow:hidden;
    border:1px solid #d6e6f3!important;
    border-radius:19px;
    background:#fff;
    box-shadow:0 8px 24px rgba(43,102,153,.07);
    box-sizing:border-box;
  }
  html.pe87Ipad body.homeDashboardApp .homeSchedulePane+.homeSchedulePane,
  html.pe87IpadRuntime body.homeDashboardApp .homeSchedulePane+.homeSchedulePane{
    border-left:1px solid #d6e6f3!important;
  }
  html.pe87Ipad body.homeDashboardApp .homeSportsCard,
  html.pe87IpadRuntime body.homeDashboardApp .homeSportsCard{
    grid-column:auto;
    width:100%;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  html.pe87Ipad body.homeDashboardApp .homeSchedulePane>header,
  html.pe87Ipad body.homeDashboardApp .homeDashboardCard>header,
  html.pe87Ipad body.homeDashboardApp .homeTodayList,
  html.pe87Ipad body.homeDashboardApp .homeUpcomingList,
  html.pe87Ipad body.homeDashboardApp .homeSportsList,
  html.pe87Ipad body.homeDashboardApp .homeSportRow,
  html.pe87IpadRuntime body.homeDashboardApp .homeSchedulePane>header,
  html.pe87IpadRuntime body.homeDashboardApp .homeDashboardCard>header,
  html.pe87IpadRuntime body.homeDashboardApp .homeTodayList,
  html.pe87IpadRuntime body.homeDashboardApp .homeUpcomingList,
  html.pe87IpadRuntime body.homeDashboardApp .homeSportsList,
  html.pe87IpadRuntime body.homeDashboardApp .homeSportRow{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }
  html.pe87Ipad body.homeDashboardApp .homeTodayList,
  html.pe87Ipad body.homeDashboardApp .homeUpcomingList,
  html.pe87Ipad body.homeDashboardApp .homeSportsList,
  html.pe87IpadRuntime body.homeDashboardApp .homeTodayList,
  html.pe87IpadRuntime body.homeDashboardApp .homeUpcomingList,
  html.pe87IpadRuntime body.homeDashboardApp .homeSportsList{
    overflow-x:hidden;
  }
}

@media(min-width:921px){
  html:not(.pe87Ipad):not(.pe87IpadRuntime):not(.pe87FoldWide) body.homeDashboardApp .homeDashboard{
    grid-template-rows:clamp(280px,38vh,340px) 104px minmax(0,1fr);
  }
}

/* iPad 가로·세로: 세 열은 유지하되 내용은 각 카드 안에서만 스크롤 */
@media(min-width:720px) and (max-width:1366px){
  html.pe87Ipad body.homeDashboardApp .homeDashboard,
  html.pe87IpadRuntime body.homeDashboardApp .homeDashboard{
    grid-template-rows:clamp(245px,31vh,280px) 90px minmax(0,1fr);
  }
  html.pe87Ipad body.homeDashboardApp .homeHeroCopy,
  html.pe87IpadRuntime body.homeDashboardApp .homeHeroCopy{
    justify-content:center;
    padding-top:20px;
    padding-bottom:20px;
  }
  html.pe87Ipad body.homeDashboardApp .homeHero h1,
  html.pe87IpadRuntime body.homeDashboardApp .homeHero h1{
    margin-top:10px;
    margin-bottom:6px;
  }
  html.pe87Ipad body.homeDashboardApp .homeHeroActions,
  html.pe87IpadRuntime body.homeDashboardApp .homeHeroActions{
    margin-top:14px;
  }
  html.pe87Ipad body.homeDashboardApp .homeDashboardCard h2,
  html.pe87IpadRuntime body.homeDashboardApp .homeDashboardCard h2{
    max-width:100%;
    overflow-wrap:anywhere;
  }
  html.pe87Ipad body.homeDashboardApp .homeSchedulePane>header,
  html.pe87Ipad body.homeDashboardApp .homeDashboardCard>header,
  html.pe87IpadRuntime body.homeDashboardApp .homeSchedulePane>header,
  html.pe87IpadRuntime body.homeDashboardApp .homeDashboardCard>header{
    padding-right:15px;
    padding-left:15px;
  }
  html.pe87Ipad body.homeDashboardApp .homeTodayList,
  html.pe87Ipad body.homeDashboardApp .homeUpcomingList,
  html.pe87Ipad body.homeDashboardApp .homeSportsList,
  html.pe87IpadRuntime body.homeDashboardApp .homeTodayList,
  html.pe87IpadRuntime body.homeDashboardApp .homeUpcomingList,
  html.pe87IpadRuntime body.homeDashboardApp .homeSportsList{
    padding-right:15px;
    padding-left:15px;
  }
}