/* =========================================================
   태권에듀 새 디자인 (시험) — html.ui2 일 때만 적용. 켜기: 주소 끝에 ?ui=new · 끄기: ?ui=old
   남색·금색 브랜드는 그대로, 반짝임·그라데이션·겹친 상자를 줄이고 줄·칸을 가지런히.
   간격 4·8·12·16·24·32 / 모서리 8·12 / 금색은 고른 메뉴·주요 단추·꼭 볼 숫자에만
   ========================================================= */
html.ui2{
  --ground:#080D1B; --panel:#121B30; --panel-2:#18233C; --panel-3:#0E1628;
  --line:#243150; --line-2:#2E3C5E; --ink:#F3F5FA; --ink-dim:#A6B0C3; --ink-dim2:#7B879E;
  --gold:#F4C44E; --gold-soft:#FFD978; --gold-bg:rgba(244,196,78,.12);
  --good:#45D29A; --bad:#FF7468; --warn:#F4C44E; --info:#7FA6F5;
  --r:12px; --r-s:8px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --focus:0 0 0 3px rgba(127,166,245,.55);
}
html.ui2 body{background:var(--ground);background-image:none}
html.ui2 :focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-s)}
@media (prefers-reduced-motion:reduce){ html.ui2 *{transition:none!important;animation:none!important} }

/* 아이콘 */
html.ui2 svg.ic{flex:none;vertical-align:-4px}

/* ---------- 메뉴 (관장·사범) — 컴퓨터: 왼쪽 한 줄 / 폰·세로 태블릿: 아래 5칸 + 더보기 ---------- */
.uinav{display:none}
html.ui2 body.mode-staff .tabs#tabs{display:none!important}
html.ui2 body.mode-staff #bzNav{display:none!important}
html.ui2 body.mode-staff .uinav{display:flex}
.uinav button{appearance:none;font:inherit;border:0;background:none;color:var(--ink-dim);cursor:pointer;display:flex;align-items:center;gap:var(--s3);text-align:left;position:relative}
.uinav button[aria-current="page"]{color:var(--gold);background:var(--gold-bg)}
.uinav button:hover{color:var(--ink)}
.uinav .n{margin-left:auto;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--bad);color:#fff;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.uinav .grp{font-size:12.5px;letter-spacing:.06em;color:var(--ink-dim2);padding:var(--s3) var(--s3) var(--s1);font-weight:700}
@media (min-width:1024px){
  html.ui2 body.mode-staff .uinav{grid-column:1;flex-direction:column;align-items:stretch;gap:2px;position:sticky;top:18px;
    background:var(--panel-3);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2);
    max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}   /* 메뉴가 화면보다 길면(자료실 펼침 등) 메뉴 안에서 내려 본다 */
  html.ui2 body.mode-staff .uinav > *{flex-shrink:0}
  .uinav button{min-height:44px;padding:0 var(--s3);border-radius:var(--r-s);font-size:16px;font-weight:600;border-left:3px solid transparent}
  .uinav button[aria-current="page"]{border-left-color:var(--gold)}
  .uinav .mob{display:none}
}
@media (max-width:1023px){
  html.ui2 body.mode-staff .uinav{position:fixed;left:0;right:0;bottom:0;z-index:46;justify-content:space-around;gap:2px;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:rgba(8,13,27,.97);border-top:1px solid var(--line);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .uinav button{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:3px;min-height:54px;border-radius:var(--r-s);font-size:12.5px;font-weight:600;padding:4px 2px}
  .uinav button .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .uinav .n{position:absolute;top:2px;right:calc(50% - 22px);margin:0;min-width:18px;height:18px;font-size:11px}
  .uinav .desk,.uinav .grp{display:none}
  html.ui2 body.mode-staff .wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
/* 더보기 (폰) */
html.ui2 .uimore{position:fixed;inset:0;z-index:60;background:rgba(3,7,16,.6);display:flex;align-items:flex-end}
html.ui2 .uimore[hidden]{display:none}
.uimore .sheet{width:100%;max-height:80vh;overflow:auto;background:var(--panel);border-top:1px solid var(--line);border-radius:16px 16px 0 0;padding:var(--s3) var(--s3) calc(var(--s4) + env(safe-area-inset-bottom))}
.uimore .sh{display:flex;align-items:center;justify-content:space-between;padding:var(--s1) var(--s2) var(--s2);font-weight:700;font-size:16px}
.uimore .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.uimore .grid button{appearance:none;font:inherit;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:var(--r);min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:600;cursor:pointer;position:relative;padding:6px}
.uimore .grid button[aria-current="page"]{border-color:var(--gold);color:var(--gold)}
.uimore .grid .n{position:absolute;top:6px;right:8px;min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.uimore .x{appearance:none;border:0;background:none;color:var(--ink-dim);min-width:44px;min-height:44px;cursor:pointer}

/* ---------- 공통 부품 ---------- */
.ui-head{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s4)}
.ui-head h2{font-size:26px;margin:0;font-weight:800;letter-spacing:-.01em}
.ui-head .d{color:var(--ink-dim);font-size:15px}
.ui-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin:0 0 var(--s4)}
.ui-metric{appearance:none;font:inherit;text-align:left;cursor:pointer;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s4);display:flex;gap:var(--s3);align-items:center;min-height:76px}
.ui-metric:hover{border-color:var(--line-2)}
.ui-metric .ic{color:var(--ink-dim)}
.ui-metric .k{display:block;color:var(--ink-dim);font-size:14px}
.ui-metric .v{display:block;font-size:26px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.ui-metric .v small{font-size:14px;font-weight:600;color:var(--ink-dim);margin-left:2px}
.ui-metric.warn .v{color:var(--gold)} .ui-metric.warn .ic{color:var(--gold)}
.ui-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);margin:0 0 var(--s3)}
.ui-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2) 0;min-width:0}
.ui-card>.hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s2) var(--s4) var(--s2)}
.ui-card>.hd h3{margin:0;font-size:17px;font-weight:700}
.ui-card>.hd .more{appearance:none;font:inherit;background:none;border:0;color:var(--ink-dim);font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:2px;min-height:36px;padding:0 4px}
.ui-card>.hd .more:hover{color:var(--ink)}
.ui-row{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4);border-top:1px solid var(--line);min-height:52px}
.ui-row:first-of-type{border-top-color:transparent}
button.ui-row{appearance:none;font:inherit;color:var(--ink);background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left;cursor:pointer}
button.ui-row:hover{background:rgba(255,255,255,.025)}
.ui-row .ic{color:var(--ink-dim)}
.ui-row .main{flex:1;min-width:0}
.ui-row .main b{display:block;font-size:15.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-row .main small{display:block;color:var(--ink-dim);font-size:13.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-row .time{width:52px;flex:none;font-variant-numeric:tabular-nums;font-weight:600}
.ui-row .cnt{flex:none;color:var(--gold);font-weight:700;font-variant-numeric:tabular-nums}
.ui-row .sub{flex:none;color:var(--ink-dim);font-size:14px;font-variant-numeric:tabular-nums}
.ui-empty{padding:var(--s3) var(--s4) var(--s2);color:var(--ink-dim);font-size:14.5px}
.ui-badge{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:13px;font-size:13px;font-weight:700;white-space:nowrap;flex:none;border:1px solid transparent}
.ui-badge.ok{background:rgba(69,210,154,.12);color:var(--good);border-color:rgba(69,210,154,.3)}
.ui-badge.gold{background:var(--gold-bg);color:var(--gold);border-color:rgba(244,196,78,.35)}
.ui-badge.bad{background:rgba(255,116,104,.12);color:var(--bad);border-color:rgba(255,116,104,.35)}
.ui-badge.mute{background:rgba(166,176,195,.1);color:var(--ink-dim);border-color:var(--line)}
.ui-table{width:100%;border-collapse:collapse;font-size:15px}
.ui-table th{color:var(--ink-dim);font-weight:600;font-size:13.5px;text-align:left;padding:8px var(--s4);border-bottom:1px solid var(--line)}
.ui-table td{padding:10px var(--s4);border-bottom:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
.ui-table tr:last-child td{border-bottom:0}
.ui-table td.nm{font-weight:600;max-width:140px;overflow:hidden;text-overflow:ellipsis}
.ui-bar{height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden;margin-top:6px}
.ui-bar i{display:block;height:100%;background:var(--gold);border-radius:4px}
.ui-sep{height:1px;background:var(--line);margin:var(--s5) 0 var(--s4)}
@media (max-width:1023px){ .ui-metrics{grid-template-columns:repeat(2,minmax(0,1fr))} .ui-grid2{grid-template-columns:1fr} }
@media (max-width:560px){
  .ui-head h2{font-size:22px} .ui-metric{padding:var(--s3);min-height:68px} .ui-metric .v{font-size:22px}
  .ui-table .hide-s{display:none} .ui-table th,.ui-table td{padding-left:var(--s3);padding-right:var(--s3)}
  .ui-row{padding-left:var(--s3);padding-right:var(--s3)} .ui-card>.hd{padding-left:var(--s3);padding-right:var(--s3)}
}

/* 새 대시보드가 맨 위에 — 예전 「오늘 한눈에」 숫자 상자와 「오늘 할 일」 상자는 새 칸이 대신한다 */
#bzToday{display:none}
html.ui2 #bzToday{display:block}
html.ui2 #bzDash>.seclabel:has(+#bzKpi),html.ui2 #bzKpi,html.ui2 #bzDash .seclabel:has(+#bzTodo),html.ui2 #bzTodo{display:none}
html.ui2 #bzDash .seclabel:has(+#bzMoodFeed),html.ui2 #bzMoodFeed{display:none}   /* 체크인·기분은 「알림」과 오늘 출석 칸으로 */

/* ---------- 차분하게 — 반짝임·그림자 줄이기 (기존 화면 전체) ---------- */
html.ui2 .brandbar{background:var(--panel-3);box-shadow:none}
html.ui2 .bizpanel,html.ui2 .qitem,html.ui2 .note,html.ui2 .today{box-shadow:none}
html.ui2 .start,html.ui2 .bbtn,html.ui2 .toolbtn,html.ui2 button.go{box-shadow:none;text-shadow:none}

/* 머리줄 — 버전 표시는 「⋯ 더 보기」 안에서만 */
html.ui2 .brandbar #chipMode{display:none}
html.ui2 .brandbar .chip{display:inline-flex;align-items:center;gap:6px}

/* ================= 3단계 — 업무관리 나머지 화면 (원생·출결·수납·승급·차량·메모·AI·통계·설정) =================
   기능·순서는 그대로, 모양만: 제목은 크고 차분하게, 줄은 촘촘하게, 금색은 꼭 눌러야 할 단추·주의만 */
html.ui2 #vRec{font-size:15.5px}
/* 화면 제목 — 각 화면 맨 위 첫 제목은 큰 제목, 나머지는 칸 제목 (대문자·자간·금색 없이) */
html.ui2 #vRec .seclabel{font-family:var(--body);text-transform:none;letter-spacing:0;color:var(--ink);font-size:17px;font-weight:700;
  display:flex;align-items:baseline;gap:var(--s2) var(--s3);flex-wrap:wrap;margin:var(--s5) 0 var(--s3)}
html.ui2 #vRec .seclabel .side{font-size:14px;font-weight:400;color:var(--ink-dim);letter-spacing:0}
html.ui2 #vRec .bizpanel>.seclabel:first-child,html.ui2 #bzTest>.seclabel:first-child{font-size:24px;font-weight:800;margin-top:0!important;letter-spacing:-.01em}
html.ui2 #vRec .seclabel .ic{color:var(--ink-dim);align-self:center}
html.ui2 #vRec .footnote{font-size:14px;color:var(--ink-dim2);line-height:1.65}

/* 단추 — 높이 한 가지(44), 모서리 8, 그림자 없음. 금색(.go)은 화면마다 핵심 하나 */
html.ui2 #vRec .bbtn{border-radius:var(--r-s);min-height:44px;padding:0 14px;font-size:15px;font-weight:600;background:var(--panel-2);border-color:var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;vertical-align:middle}
html.ui2 #vRec .bbtn.sm{min-height:36px;padding:0 11px;font-size:14px}
html.ui2 #vRec .bbtn:hover:not(:disabled){border-color:var(--ink-dim2);background:#1d2944}
html.ui2 #vRec .bbtn.go{background:var(--gold);border-color:var(--gold);color:#1d1403}
html.ui2 #vRec .bbtn.go:hover:not(:disabled){filter:brightness(1.06);background:var(--gold)}
html.ui2 #vRec .bbtn .ic{flex:none;opacity:.9}
@media (pointer:coarse){ html.ui2 #vRec .bbtn.sm{min-height:44px;padding:0 13px} }

/* 입력칸·고르기 — 같은 높이, 같은 모서리 */
html.ui2 #vRec .bizbar{gap:var(--s2);margin-bottom:var(--s3)}
html.ui2 #vRec .bizbar input,html.ui2 #vRec .bizbar select,html.ui2 #vRec .bgrid input,html.ui2 #vRec .bgrid select,html.ui2 #vRec .bform textarea,
html.ui2 #vRec .bform input[type=text],html.ui2 #vRec .bform input[type=number],html.ui2 #vRec .bform input[type=date],html.ui2 #vRec .bform select{
  background:var(--panel-3);border:1px solid var(--line-2);border-radius:var(--r-s);color:var(--ink);font-size:15.5px}
html.ui2 #vRec .bizbar input,html.ui2 #vRec .bizbar select,html.ui2 #vRec .bgrid input,html.ui2 #vRec .bgrid select{min-height:44px;padding:0 12px}
html.ui2 #vRec input:focus,html.ui2 #vRec select:focus,html.ui2 #vRec textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(244,196,78,.18)}
html.ui2 #vRec .bgrid label{font-size:14px;color:var(--ink-dim)}

/* 상자 — 패널 하나의 색, 모서리 12 */
html.ui2 #vRec .bform,html.ui2 #vRec .statcard,html.ui2 #vRec .kpibox,html.ui2 #vRec .buscar,html.ui2 #vRec .tscroll,html.ui2 #vRec .rflash{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
html.ui2 #vRec .bform h4,html.ui2 #vRec .statcard h4,html.ui2 #vRec .buscar h4{font-family:var(--body);font-size:17px;font-weight:700}
html.ui2 #vRec .note,html.ui2 #vRec .qitem,html.ui2 #vRec .rflash{border-left:1px solid var(--line);border-radius:var(--r)}
html.ui2 #vRec .note{background:var(--panel-3);color:var(--ink-dim);font-size:15px}
html.ui2 #vRec .qitem{border-left-width:1px} html.ui2 #vRec .qitem.done{opacity:.7}
html.ui2 #vRec .qitem .kind{font-family:var(--body);letter-spacing:0;text-transform:none;font-size:13.5px;font-weight:700}
html.ui2 #vRec .qitem .when{font-family:var(--body)}
html.ui2 #vRec .qitem .acts button{border-radius:var(--r-s);min-height:40px}

/* 숫자 상자 — 숫자는 흰 글씨, 문제(빨강)만 색 */
html.ui2 #vRec .kpi{gap:var(--s3)}
html.ui2 #vRec .kpibox .n{font-family:var(--body);color:var(--ink);font-size:26px}
html.ui2 #vRec .kpibox .n.good{color:var(--good)} html.ui2 #vRec .kpibox .n.bad{color:var(--bad)}
html.ui2 #vRec .kpibox .s{font-family:var(--body)}

/* 표 — 머리줄은 작은 회색 글, 줄 사이 선 하나 */
html.ui2 #vRec .btable{font-size:15px}
html.ui2 #vRec .btable th,html.ui2 #vRec .stattbl th,html.ui2 #vRec .bustbl th{font-family:var(--body);text-transform:none;letter-spacing:0;color:var(--ink-dim);font-size:13.5px;font-weight:600}
html.ui2 #vRec .btable td{border-bottom-color:var(--line)}
html.ui2 #vRec .btable td.num,html.ui2 #vRec .cal th{font-family:var(--body)}
html.ui2 #vRec .cal th,html.ui2 #vRec .cal td{border-color:var(--line)}
html.ui2 #vRec .bustbl input,html.ui2 #vRec .bustbl select{border-radius:var(--r-s);min-height:40px;background:var(--panel-3);border-color:var(--line-2)}
html.ui2 #vRec .sbar .b{height:8px;background:var(--panel-2)}

/* 상태 표시 — 작은 둥근 표 하나 (색은 뜻: 초록=됨, 금=확인, 빨강=문제) */
html.ui2 #vRec .pill{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:13px;font-size:13px;font-weight:700;border:1px solid var(--line);color:var(--ink-dim);background:rgba(166,176,195,.08)}
html.ui2 #vRec .pill.ok{background:rgba(69,210,154,.12);color:var(--good);border-color:rgba(69,210,154,.3)}
html.ui2 #vRec .pill.warn{background:var(--gold-bg);color:var(--gold);border-color:rgba(244,196,78,.35)}
html.ui2 #vRec .pill.bad{background:rgba(255,116,104,.12);color:var(--bad);border-color:rgba(255,116,104,.35)}
html.ui2 #vRec .stseg{border-radius:var(--r-s);border-color:var(--line-2)}
html.ui2 #vRec .stseg button{min-height:36px}

/* 원생 명부 — 한 명이 한 줄, 띠는 작은 표 */
html.ui2 #bzRosterTable tr{padding:10px var(--s4);border-bottom-color:var(--line)}
html.ui2 #bzRosterTable tbody tr:hover{background:rgba(255,255,255,.02)}
html.ui2 #bzRosterTable td.nm b{font-size:16px}
html.ui2 #bzRosterTable .beltchip{border-radius:var(--r-s);font-size:14px;background:var(--panel-2)}

/* 출결 — 낱장 카드 대신 하나의 목록 (줄 사이 선) */
html.ui2 #bzAttList{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
html.ui2 #bzAttList:empty{display:none}
html.ui2 #bzAttList .attrow{background:none;border:0;border-top:1px solid var(--line);border-radius:0;margin:0;padding:10px var(--s4);min-height:60px}
html.ui2 #bzAttList .attrow:first-child{border-top:0}
html.ui2 #bzAttList>:not(.attrow){padding-left:var(--s4);padding-right:var(--s4)}
html.ui2 #vRec .attset button{border-radius:var(--r-s);min-height:40px}
@media (pointer:coarse){ html.ui2 #vRec .attset button{min-height:44px} }

/* 차량 — 시각은 흰 글씨 */
html.ui2 #vRec .busrow .tm{font-family:var(--body);color:var(--ink);font-size:18px}

/* 원생 상세 창 — 같은 모서리·색 */
html.ui2 .stuov .in{background:var(--ground);border-color:var(--line);border-radius:var(--r)}
html.ui2 .stuov .chips span{border-radius:var(--r-s)}

@media (max-width:560px){
  html.ui2 #vRec .bizpanel>.seclabel:first-child,html.ui2 #bzTest>.seclabel:first-child{font-size:21px}
  html.ui2 #bzAttList .attrow{padding-left:var(--s3);padding-right:var(--s3)}
  html.ui2 #vRec .bizbar>.bbtn{flex:1 1 auto}
}
/* 예전 금색 막대·폰용 「⋯」 글자는 새 디자인에서 빼기 (아이콘이 대신) */
html.ui2 #vRec .seclabel>span:first-child{padding-left:0}
html.ui2 #vRec .seclabel>span:first-child:before{display:none}
@media (max-width:640px){
  html.ui2 #bzMoreBtn:before{content:none}
  html.ui2 #bzMoreBtn{font-size:0;padding:0 13px;min-width:48px} html.ui2 #bzMoreBtn .ic{width:22px;height:22px}
}
/* 원생 거르기 — 옆으로 밀지 않고 두 줄로 (글이 잘리지 않게) */
html.ui2 #vRec .rfilt{flex-wrap:wrap;overflow:visible}
html.ui2 #vRec .rfilt select{flex:1 1 150px;min-width:0;padding:0 30px 0 12px;min-height:44px}
html.ui2 #vRec .rfilt .bbtn{min-height:44px}
html.ui2 #vRec .attrow .bus button,html.ui2 #vRec .attrow .busline{display:inline-flex;align-items:center;gap:5px}
html.ui2 #vRec .attrow .busline .ic{vertical-align:-3px}

/* ================= 4단계 — 수업 · 자료실 · 보호자 화면 =================
   수업 도구는 TV·큰 화면에서도 쓰므로 숫자(타이머·점수)는 크게 그대로. 제목·단추·상자만 같은 규칙으로 */
html.ui2 #vClass h3.blockhd,html.ui2 #vLib h3.blockhd{font-family:var(--body);font-size:20px;font-weight:800;letter-spacing:-.01em;margin:var(--s6) 0 var(--s3)}
html.ui2 #vClass .seclabel,html.ui2 #vLib .seclabel{font-family:var(--body);text-transform:none;letter-spacing:0;color:var(--ink);font-size:17px;font-weight:700}
html.ui2 #vClass .seclabel>span:first-child,html.ui2 #vLib .seclabel>span:first-child{padding-left:0}
html.ui2 #vClass .seclabel>span:first-child:before,html.ui2 #vLib .seclabel>span:first-child:before{display:none}
html.ui2 #vClass .seclabel .side,html.ui2 #vLib .seclabel .side{color:var(--ink-dim);font-size:14px}
html.ui2 #vClass .toolbtn,html.ui2 #vLib .toolbtn,html.ui2 #vClass .tool button,html.ui2 #vClass .tool .mufile{border-radius:var(--r-s);min-height:44px;background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:none}
html.ui2 #vClass .toolbtn:hover,html.ui2 #vLib .toolbtn:hover,html.ui2 #vClass .tool button:hover{border-color:var(--ink-dim2)}
html.ui2 #vClass .tool button.go{background:var(--gold);border-color:var(--gold);color:#1d1403;font-weight:700}
html.ui2 #vClass .tool .tz{border-radius:50%;min-height:34px}
html.ui2 #vClass .tool,html.ui2 #vClass .lesson,html.ui2 #vClass .rank,html.ui2 #vClass .bigvalue,html.ui2 #vClass .tvbox,
html.ui2 #vLib .terms,html.ui2 #vLib .doc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
html.ui2 #vClass .tool .tl{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--ink-dim)}
html.ui2 #vClass .catrow button,html.ui2 #vLib .catrow button{border-radius:var(--r-s);min-height:44px;background:var(--panel);border:1px solid var(--line)}
html.ui2 #vLib .term{border-radius:0}
html.ui2 #vLib .searchrow input{border-radius:var(--r-s);min-height:48px;background:var(--panel-3);border:1px solid var(--line-2)}
/* 수업 시작 단추 — 핵심(팀 대항)은 평평한 금색, 수업 게임 고르기는 차분한 줄 */
html.ui2 #vClass button.start{background:var(--gold);box-shadow:none;border-radius:var(--r);color:#1d1403}
html.ui2 #vClass a.start{background:var(--panel);color:var(--ink);border:1px solid var(--line-2);box-shadow:none;border-radius:var(--r);text-align:left!important;font-weight:700}
html.ui2 #vClass a.start:hover{border-color:var(--gold)}

/* ---------- 보호자 화면 (parent.html) · 가정 교육 (learn.html) ---------- */
html.ui2 body.pg-parent,html.ui2 body.pg-learn{background:var(--ground);background-image:none}
html.ui2 body.pg-parent .card{border-radius:var(--r);padding:var(--s4)}
html.ui2 body.pg-parent h1,html.ui2 body.pg-parent .kid h2{font-family:var(--body);font-weight:800;letter-spacing:-.01em}
html.ui2 body.pg-parent .brand b{font-family:var(--body);font-weight:800}
html.ui2 body.pg-parent .btn{border-radius:var(--r-s);min-height:48px;padding:12px}
html.ui2 body.pg-parent .btn.ghost{border-color:var(--line-2);color:var(--ink)}
html.ui2 body.pg-parent .in{border-radius:var(--r-s);border-color:var(--line-2)}
html.ui2 body.pg-parent .mhd button{border-radius:var(--r-s);width:44px;height:44px}
html.ui2 body.pg-parent .cal .c{border-radius:var(--r-s)}
html.ui2 body.pg-parent .stat3 div,html.ui2 body.pg-parent .demo,html.ui2 body.pg-parent .snd{border-radius:var(--r-s)}
html.ui2 body.pg-parent .stat3 b{font-variant-numeric:tabular-nums}
html.ui2 body.pg-parent .passcard{border-radius:var(--r);background:var(--gold-bg);border-width:1px}
html.ui2 body.pg-learn{--card:var(--panel);--dim:var(--ink-dim)}
html.ui2 body.pg-learn .sec{border-radius:var(--r)}
html.ui2 body.pg-learn .word,html.ui2 body.pg-learn .vid,html.ui2 body.pg-learn .note{border-radius:var(--r-s)}
html.ui2 body.pg-learn .btn,html.ui2 body.pg-learn .ghost{border-radius:var(--r-s);min-height:48px}
/* 고른 분류 — 흰 바탕 대신 금색 테두리·금색 글 (금색은 「지금 고른 것」) */
html.ui2 #vClass .catrow button[aria-pressed="true"],html.ui2 #vLib .catrow button[aria-pressed="true"]{background:var(--gold-bg);border-color:var(--gold);color:var(--gold);font-weight:700}
html.ui2 #vClass .toolsw button{border-radius:var(--r-s);min-height:44px;background:var(--panel);border-color:var(--line)}
html.ui2 #vClass .toolsw button[aria-checked="true"]{border-color:var(--line-2);color:var(--ink)}
html.ui2 #vClass .toolsw button .k{border-radius:6px}

/* ================= 5단계 — 소개 페이지 · 가입 · 앱 설치 · 로그인 창 · 아이 화면 둘레 =================
   빛 번짐·유리·그라데이션 글씨를 빼고 평평한 남색 + 금색 하나. 큰 제목과 글 크기는 그대로 */
html.ui2 body.pg-site{
  --glass:var(--panel); --glass-2:var(--panel-2); --line-2:#2E3C5E;
  --grad-gold:linear-gradient(var(--gold),var(--gold)); --grad-ink:linear-gradient(var(--ink),var(--ink));
  --r-lg:16px; --r-md:12px; --r-sm:8px; --shadow:none;
  background:var(--ground)}
html.ui2 body.pg-site .top{background:var(--panel-3);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:var(--r)}
html.ui2 body.pg-site .mark,html.ui2 body.pg-site .mark.logo{box-shadow:none}
html.ui2 body.pg-site .btn{border-radius:10px;box-shadow:none}
html.ui2 body.pg-site .btn:hover{transform:none}
html.ui2 body.pg-site .btn.pri,html.ui2 body.pg-site .btn.pri:hover{background:var(--gold);box-shadow:none}
html.ui2 body.pg-site .btn.sm{border-radius:10px}
html.ui2 body.pg-site .kicker,html.ui2 body.pg-site .eyebrow,html.ui2 body.pg-site .value .m{letter-spacing:.06em}
html.ui2 body.pg-site .chip{border-radius:var(--r-s)} html.ui2 body.pg-site .chip i{border-radius:6px}
html.ui2 body.pg-site .try{background:var(--panel-2);box-shadow:none;border:1px solid var(--line);border-radius:28px}
html.ui2 body.pg-site .try:before{display:none}
html.ui2 body.pg-site .try .screen{background:var(--panel)}
html.ui2 body.pg-site .opts button{border-radius:var(--r-s)} html.ui2 body.pg-site .opts button:hover{transform:none}
html.ui2 body.pg-site .who,html.ui2 body.pg-site .seg{border-radius:var(--r)}
html.ui2 body.pg-site .who button,html.ui2 body.pg-site .seg button{border-radius:var(--r-s)}
html.ui2 body.pg-site .who button[aria-pressed="true"],html.ui2 body.pg-site .seg button[aria-pressed="true"]{background:var(--gold-bg);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
html.ui2 body.pg-site .seg button[aria-pressed="true"] i{background:rgba(69,210,154,.15)}
html.ui2 body.pg-site .value{background:var(--panel)}
html.ui2 body.pg-site .word:hover,html.ui2 body.pg-site .plan:hover{transform:none}
html.ui2 body.pg-site .plan.on{background:var(--panel);border:1.5px solid var(--gold)}
html.ui2 body.pg-site .plan .tag{box-shadow:none;border-radius:6px}
html.ui2 body.pg-site .assure span{border-radius:var(--r-s)}
html.ui2 body.pg-site .join input,html.ui2 body.pg-site .join select{background:var(--panel-3)}
html.ui2 body.pg-site .dock{background:var(--panel-3);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:var(--r)}
html.ui2 body.pg-site .pick{border-radius:var(--r);background:var(--panel)}

/* 가입 · 앱 설치 */
html.ui2 body.pg-join,html.ui2 body.pg-install{background:var(--ground);background-image:none}
html.ui2 body.pg-join .card,html.ui2 body.pg-install .card{border-radius:var(--r)}
html.ui2 body.pg-join .btn{border-radius:10px;min-height:52px}
html.ui2 body.pg-join input,html.ui2 body.pg-join select,html.ui2 body.pg-join textarea{border-radius:var(--r-s);border-color:var(--line-2)}

/* 로그인 창 (관장·사범) */
html.ui2 .gatebox{border-radius:var(--r);box-shadow:none;border-color:var(--line-2);background:var(--panel);padding:24px 20px}
html.ui2 .gatebox h3{font-family:var(--body);font-size:21px}
html.ui2 .gatebox input{border-radius:var(--r-s);min-height:48px;border-color:var(--line-2)}
html.ui2 .gatebox button{border-radius:var(--r-s);min-height:48px}

/* 아이 화면 둘레 — 탭은 외곽선 아이콘, 고른 탭은 금색 글·밑줄 하나 */
html.ui2 body:not(.mode-staff) #tabs .tab .ic svg{display:block}
html.ui2 body:not(.mode-staff) #tabs .tab .ic{display:inline-flex;align-items:center;justify-content:center}
html.ui2 #tabs{background:var(--ground)}
@media (max-width:760px){ html.ui2 #tabs .tab[aria-selected="true"]{background:var(--gold-bg)} html.ui2 #tabs .tab{border-radius:var(--r-s)} }
html.ui2 body.pg-site .top nav a.btn[href="/parent.html"]{background:var(--panel-2);color:var(--ink);border:1px solid var(--line-2)}
/* 「누구신가요?」 창 · 앱 설치의 기기 고르기 */
html.ui2 .lgbox{border-radius:var(--r);box-shadow:none;background:var(--panel);border-color:var(--line-2)}
html.ui2 .lgopt{border-radius:var(--r-s);background:var(--panel-2);border-color:var(--line-2)}
html.ui2 .lgopt .i{display:inline-flex;justify-content:center;color:var(--ink-dim)}
html.ui2 .lgback{-webkit-backdrop-filter:none;backdrop-filter:none}
html.ui2 body.pg-install .tabs button{border-radius:var(--r-s)}
html.ui2 body.pg-install .tabs button[aria-pressed="true"]{background:var(--gold-bg);color:var(--gold);border-color:var(--gold)}

/* ================= 게임 화면 (미션 탐험 · 커맨드 러시 · 골든벨) =================
   아이들이 큰 화면으로 보는 곳 — 글자·문제 크기와 청·홍 색은 그대로. 번쩍임(그라데이션·빛·그림자)만 빼고 모서리를 맞춤 */
html.ui2 body.pg-game .btn.pri,html.ui2 body.pg-game .btn.pri:hover,html.ui2 body.pg-game #bwgame .primary{background:#d1372e;border-color:#d1372e;box-shadow:none}
html.ui2 body.pg-game .btn,html.ui2 body.pg-game select,html.ui2 body.pg-game #bwgame button,html.ui2 body.pg-game #bwgame select{border-radius:var(--r-s);box-shadow:none}
html.ui2 body.pg-game .panel,html.ui2 body.pg-game #bwgame .panel,html.ui2 body.pg-game #bwgame .guide,html.ui2 body.pg-game .opt,html.ui2 body.pg-game .posecard{border-radius:var(--r);box-shadow:none}
html.ui2 body.pg-game .stage,html.ui2 body.pg-game #bwgame .stage,html.ui2 body.pg-game #bwgame .paused{background:var(--panel);border-radius:var(--r);box-shadow:none}
html.ui2 body.pg-game .stats div{border-radius:var(--r-s)}
html.ui2 body.pg-game #bwgame .choice,html.ui2 body.pg-game #bwgame .recap span,html.ui2 body.pg-game .chip small{border-radius:var(--r-s)}
html.ui2 body.pg-game #bwgame header a{border-radius:var(--r-s)}

/* ---------- 출석 (한 번에 한 업무) — 미확인 먼저 · 단추 하나 · 알림 결과는 따로 ---------- */
html.ui2 .att2head .note{display:flex;align-items:center;gap:6px}
html.ui2 .att2sum{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
html.ui2 .att2sum .c{display:inline-flex;align-items:baseline;gap:6px;padding:8px 12px;border-radius:var(--r-s);background:var(--panel);border:1px solid var(--line);font-size:14px;color:var(--ink-dim)}
html.ui2 .att2sum .c b{font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
html.ui2 .att2sum .c.hot{border-color:var(--gold)} html.ui2 .att2sum .c.hot b{color:var(--gold)}
html.ui2 .att2sum .bbtn{margin-left:auto}
html.ui2 #bzAttList .att2head{padding:12px var(--s4) 0}
html.ui2 #bzAttList .attrow.att2{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"who st acts" "menu menu menu";gap:8px 12px;align-items:center}
html.ui2 .att2 .who{grid-area:who;display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;min-width:0}
html.ui2 .att2 .who .tx b{font-size:16px} html.ui2 .att2 .who .tx small{display:block;font-size:13.5px;color:var(--ink-dim);margin-top:2px}
html.ui2 .att2 .st{grid-area:st;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
html.ui2 .att2 .acts{grid-area:acts;display:flex;gap:6px}
html.ui2 .att2 .acts .bbtn.go{min-width:84px}
html.ui2 .att2 .menu{grid-area:menu;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;padding-top:2px}
html.ui2 .att2 .menu[hidden]{display:none}
html.ui2 .att2 .ui-badge .ic{margin-right:2px}
html.ui2 .att2 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
html.ui2 .att2.done .who .tx b{color:var(--ink)}
@media (max-width:640px){
  html.ui2 #bzAttList .attrow.att2{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who acts" "st st" "menu menu"}
  html.ui2 .att2 .st{justify-content:flex-start;padding-left:51px}
  html.ui2 .att2 .menu{justify-content:flex-start;padding-left:51px}
  html.ui2 .att2sum .bbtn{margin-left:0}
}

/* ---------- 차량 운행 — 차에 남은 아이 · 운행 끝내기 · 마지막 저장 ---------- */
html.ui2 .pkprog.board{display:flex;align-items:baseline;gap:6px}
html.ui2 .pkprog.board.hot{border-color:var(--gold);background:var(--gold-bg)} html.ui2 .pkprog.board.hot b{color:var(--gold)}
html.ui2 .pksaverow{margin:0 0 10px}
html.ui2 .pksave{display:inline-flex;align-items:center;gap:6px;font-size:14px;padding:6px 10px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--panel)}
html.ui2 .pksave.ok{color:var(--good)} html.ui2 .pksave.warn{color:var(--gold);border-color:rgba(244,196,78,.4);background:var(--gold-bg)} html.ui2 .pksave.mute{color:var(--ink-dim)}
html.ui2 .pkend{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:10px 0 2px;padding-top:10px;border-top:1px solid var(--line)}
html.ui2 .pkend.ok{color:var(--good);font-size:14px;font-weight:600}
html.ui2 .pkend .bbtn{min-height:44px}
/* 보호자 연결 상태 — 손볼 것부터, 이유 한 줄 */
html.ui2 .pstates{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
html.ui2 .porow .pwhy{margin:6px 0 0;font-size:14px;color:var(--ink-dim);line-height:1.5}
html.ui2 .porow .pwhy b.ok{color:var(--good)} html.ui2 .porow .pwhy b.bad{color:var(--bad)}
html.ui2 .porow.ps-gone{border-color:rgba(255,116,104,.35)}

/* ---------- 수업 기록 — 반 전체 한 줄 + 원생마다 기술·영어·참여 ---------- */
html.ui2 .lsbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:0 var(--s4);margin:14px 0}
html.ui2 .lsbox>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 0;min-height:52px}
html.ui2 .lsbox>summary::-webkit-details-marker{display:none}
html.ui2 .lsbox>summary b{font-size:17px} html.ui2 .lsbox>summary small{flex-basis:100%;color:var(--ink-dim);font-size:13.5px}
html.ui2 #vRec .lsbox .bform{background:none;border:0;padding:0 0 16px;margin:0}
html.ui2 .lsprev{margin:0 0 12px}
html.ui2 .lshint{font-size:14px;color:var(--ink-dim);margin:8px 0}
html.ui2 .lslist{border-top:1px solid var(--line)}
html.ui2 .lsrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--line)}
html.ui2 .lsrow .nm{flex:1 1 140px;min-width:0} html.ui2 .lsrow .nm b{display:block}
html.ui2 .lsrow .nm .pv{display:block;color:var(--gold);font-size:13px;margin-top:2px}
html.ui2 .lsrow .lsg{display:flex;gap:6px;flex-wrap:wrap}
html.ui2 .lsb.on{border-color:rgba(69,210,154,.5);color:var(--good);background:rgba(69,210,154,.1)}
html.ui2 .lsb.warn{border-color:rgba(244,196,78,.5);color:var(--gold);background:var(--gold-bg)}
html.ui2 .lshist>div{display:grid;grid-template-columns:64px 1fr;gap:4px 10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
html.ui2 .lshist .d{color:var(--ink-dim)} html.ui2 .lshist .t{display:flex;gap:4px;flex-wrap:wrap}
html.ui2 .lshist small{grid-column:2;color:var(--ink-dim)}

/* 자료실 펼침 메뉴 — 위: 자료실(▸/▾), 아래: 분류. 고른 분류는 금색 */
.navgrp{display:flex;flex-direction:column;gap:2px}
.navgrp > button .car{margin-left:auto;font-size:13px;color:var(--ink-dim2)}
.navgrp > button.in{color:var(--gold)}
.navgrp .sub{display:flex;flex-direction:column;gap:2px;padding-left:calc(var(--s3) + 20px)}
.navgrp .sub[hidden]{display:none}
.navgrp .sub button{min-height:40px;font-size:15px;font-weight:500;padding:0 var(--s3);border-radius:var(--r-s);border-left:3px solid transparent}
.navgrp .sub button[aria-current="page"]{color:var(--gold);background:var(--gold-bg);border-left-color:var(--gold)}
.uimore .grid .navgrp{grid-column:1 / -1;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:4px}
.uimore .grid .navgrp > button{flex-direction:row;min-height:52px;border:0;background:none;justify-content:flex-start;gap:var(--s2);padding:0 var(--s3)}
.uimore .grid .navgrp .sub{padding-left:var(--s4)}
.uimore .grid .navgrp .sub button{min-height:48px;flex-direction:row;justify-content:flex-start;border:0;border-left:3px solid transparent;border-radius:var(--r-s);background:none;font-size:15px}
.uimore .grid .navgrp .sub button[aria-current="page"]{color:var(--gold);background:var(--gold-bg);border-left-color:var(--gold)}
.navgrp button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* 폰 머리줄 — 관장·사범 쪽은 한 줄 (이름 글자는 숨기고 로고만) · 언어 단추는 손가락 크기 */
@media (max-width:560px){
  html.ui2 .brandbar{gap:6px}
  html.ui2 .brandbar .brandtxt{flex:1 1 auto!important;min-width:84px}
  html.ui2 body.mode-staff .brandbar .brandtxt{display:none}
  html.ui2 body.mode-staff .brandbar .modeseg{margin-left:auto}
  html.ui2 .brandbar .bw-lang button{padding:6px 9px;font-size:13px}
}
@media (max-width:400px){ html.ui2 body.mode-staff .brandbar .mark{display:none} }
html.ui2 body.pg-site .pcard{background:var(--panel);border-radius:var(--r)}
html.ui2 body.pg-site a.pcard:hover{background:var(--panel-2)}
html.ui2 body.pg-site .pcard .pic{border-radius:10px}
/* 「메인」(사이트 메인 페이지) — 「태권에듀」 바로 옆. 좁은 폰은 집 아이콘만 */
html.ui2 .brandbar .mainchip{flex:none}
@media (max-width:560px){ html.ui2 .brandbar .mainchip span{display:none} html.ui2 .brandbar .mainchip{padding:6px 9px;min-height:40px} }
@media (max-width:420px){
  html.ui2 .brandbar .bw-lang button{padding:6px 7px;font-size:12.5px}
  html.ui2 .brandbar .modeseg button{padding-left:10px;padding-right:10px}
  html.ui2 .brandbar .brandtxt{min-width:0!important}
  html.ui2 .brandbar .grow{display:none!important}
}
@media (max-width:420px){ html.ui2 .brandbar .brandtxt{flex:1 1 0!important} }
@media (max-width:380px){ html.ui2 .brandbar .brandtxt b{font-size:15.5px} html.ui2 .brandbar{gap:5px} }
@media (max-width:400px){ html.ui2 .brandbar:has(#modeSeg:not([hidden])) .brandtxt{display:none} }
/* 앱 위 줄 — 「메인」 단추를 글자까지 보이게 (폰에서 잘 보이게) · 폰에서는 한 줄을 넘기지 않게 */
@media (max-width:560px){
  html.ui2 .brandbar{flex-wrap:nowrap}
  html.ui2 body.mode-staff .brandbar .mark{display:none}
  html.ui2 body.mode-staff .brandbar .mainchip{gap:6px;padding:6px 12px;min-height:40px;border-color:rgba(242,185,59,.45);color:var(--ink);font-weight:700}
  html.ui2 body.mode-staff .brandbar .mainchip span{display:inline!important;font-size:14.5px}
  html.ui2 .brandbar [data-langslot],html.ui2 .brandbar .modeseg{flex:0 1 auto;min-width:0}
  html.ui2 .brandbar .modeseg button{padding-left:9px;padding-right:9px}
  html.ui2 .brandbar #moreBtn{flex:none}
  html.ui2 .brandbar.menuopen{flex-wrap:wrap}   /* ⋯ 메뉴를 열면 그 줄만 아래로 (로그인 · 저장 · 가이드가 언어 단추 위에 겹치던 것) */
  html.ui2 .brandbar.menuopen .moremenu{flex:1 0 100%;width:100%}
}

/* 원생 정보 수정 — 묶음(기본 · 보호자 · 수납 · 추가 정보) · 촘촘하게 */
.bform .fsec{margin:0 0 12px;padding:12px 14px 4px;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:14px}
.bform .fsech{margin:0 0 8px;font-size:13.5px;font-weight:800;letter-spacing:.04em;color:var(--gold,#f2b93b)}
.bform .fsec .bgrid,.bform .fmore .bgrid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px 12px}
.bform .fsec .fdays{grid-column:1 / -1}
.bform .fwide{grid-column:span 2} @media (max-width:560px){ .bform .fwide{grid-column:1 / -1} }
.bform .fwide input[type=text]{min-width:0}
.bform .daychips{display:flex;gap:6px;flex-wrap:wrap;padding-top:2px}
.bform .daychip{position:relative;display:inline-flex;margin:0;cursor:pointer}
.bform .daychip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.bform .daychip span{display:inline-grid;place-items:center;min-width:42px;min-height:38px;padding:0 10px;border-radius:999px;border:1px solid var(--line-2,rgba(255,255,255,.18));font-size:15px;font-weight:600;color:var(--ink-dim,#9aa6c4)}
.bform .daychip input:checked+span{background:var(--gold-bg,rgba(242,185,59,.15));border-color:var(--gold,#f2b93b);color:var(--gold,#f2b93b)}
.bform .daychip input:focus-visible+span{outline:2px solid var(--gold,#f2b93b);outline-offset:2px}
.bform #fPhotoBox{padding:10px 12px;margin:0 0 12px}
.bform .cgrid{gap:8px} .bform .cgrid .cbox{padding:10px 12px} .bform .cgrid .cbox .why{display:none}
.bform .daychips{justify-content:flex-start!important;gap:6px!important} .bform .daychip{flex:none;width:auto!important;max-width:none}
@media (max-width:560px){ .bform .fsec .bgrid,.bform .fmore .bgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px} .bform .fsec{padding:10px 10px 2px} .bform .fwide{grid-column:1 / -1} }
/* 아이폰: 두 번 톡 누르면 화면이 확대되어 옆으로 밀리던 것 · 16px 보다 작은 입력 칸을 누르면 저절로 확대되던 것 — 두 손가락 확대는 그대로 된다 */
html.ui2{touch-action:manipulation}
@media (max-width:600px){ html.ui2 select,html.ui2 input:not([type=checkbox]):not([type=radio]):not([type=range]),html.ui2 textarea{font-size:16px!important} }
/* 아이폰 홈 화면 앱: 위쪽 상태 표시줄(시간·배터리)이 비쳐 보여, 내린 글이 그 밑으로 지나가던 것 — 그 자리에 바탕색 띠 (노치가 없는 기기는 높이 0) */
html.ui2 body::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:var(--ground,#070b16);z-index:2147483000;pointer-events:none}
/* 원생 추가 · 사진 줄: 파일 고르기 칸이 제 폭을 고집해 폰 화면 밖으로 밀려 나가던 것 */
.photopick .t{min-width:0} .photopick input[type=file]{width:100%;max-width:100%;min-width:0}
.pkbtn{position:relative;display:inline-flex;align-items:center;cursor:pointer} .photopick .pkbtn{margin-top:8px} .pkbtn input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
@media (max-width:560px){ #vRec .bgrid.pgrid{grid-template-columns:1fr!important} }   /* 원생 사진 — 단추 하나 (안 보이는 파일 칸이 단추 전체를 덮는다) */
#vRec input[type=file]{font:inherit;font-size:14px;color:var(--ink-dim);max-width:100%}   /* 소식 사진 · 명단 가져오기 — 브라우저 기본 단추도 우리 단추 모양으로 */
#vRec input[type=file]::file-selector-button{font:inherit;font-weight:700;color:var(--ink);background:var(--panel-2,#18223d);border:1px solid var(--line);border-radius:10px;padding:9px 14px;margin-right:10px;min-height:40px;cursor:pointer}
/* 처음 시작 안내 — 「어떻게?」 펼치기 · 선택 단계 · 지금 할 단계 */
.setup .shw{margin-top:4px} .setup .shw summary{cursor:pointer;color:var(--gold,#f2b93b);font-size:14px;font-weight:700;list-style:none;display:inline-block}
.setup .shw summary::-webkit-details-marker{display:none} .setup .shw summary::after{content:" ▾"} .setup .shw[open] summary::after{content:" ▴"}
.setup .shw ol{list-style:decimal;margin:4px 0 2px 20px;padding:0} .setup .shw li{display:list-item;border:0;padding:2px 0;font-size:14.5px;color:var(--ink-dim)}
.setup .sopt{font-weight:600;font-size:12px;border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-left:4px;color:var(--ink-dim)}
.setup li.now{background:rgba(242,185,59,.07);border-radius:10px;padding-left:6px;padding-right:6px} .setup li.now .n{border-color:var(--gold,#f2b93b);color:var(--gold,#f2b93b)}
.setup li.sgopt .n{border-style:dashed}
.setup li .tx{flex:1;min-width:0}
/* 처음 시작 안내 — 폰: 단추를 글 아래로(글 칸이 좁아져 줄이 길어지던 것) · 번호는 위에 · 아래 단추 셋은 칸 맞춤 */
@media (max-width:600px){
  .setup>ol>li{flex-wrap:wrap;align-items:flex-start;row-gap:8px}
  .setup>ol>li>.n{margin-top:1px}
  .setup>ol>li>.tx{flex:1 1 calc(100% - 40px)}
  .setup>ol>li>button{flex:1 1 100%;margin-left:36px;min-height:44px;justify-content:center}
  .setup .foot{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  .setup .foot button{width:100%;min-height:44px} .setup .foot #setupHide{grid-column:1 / -1}
}
/* 「일반 도장」(관리만) — 머리줄 「Blue Wolf · English Taekwondo」 대신 「도장 관리」 (둘러보기 · 실제 일반 도장 계정 모두) */
body.use-manage #brandHome span{font-size:0!important;letter-spacing:0!important}
body.use-manage #brandHome span::after{content:"도장 관리";font-size:13px;letter-spacing:.08em;text-transform:none}
html[lang="en"] body.use-manage #brandHome span::after{content:"Dojang management"}
/* 체험 모드 줄 — 한 줄로 작게 (블루 그림 · 체험 모드 · 체험 끝내기) */
.demobar{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:7px 8px 7px 7px;border:1px solid rgba(242,185,59,.45);background:rgba(242,185,59,.07);border-radius:14px}
.demobar .dbart{flex:none;width:38px;height:38px;border-radius:11px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#2f6fd0,#173a7a 72%)}
.demobar .dbart img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 2%;transform:scale(1.12) translateY(5%)}
.demobar .dbt{flex:1;min-width:0;line-height:1.3} .demobar .dbt b{display:block;font-size:15px;color:var(--gold,#f2b93b)}
.demobar .dbt small{display:block;font-size:13px;color:var(--ink-dim,#9aa3b8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demobar #demoEnd{flex:none;min-height:38px;padding:6px 12px}
/* 설정 — 제목 · 바로 가기 */
#bzSetNav .setttl{margin:0 0 8px;font-size:22px} #bzSetNav .setjump{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px}
#bzSetNav .setjump .bbtn{min-height:38px}
/* 차량 요일 — 일~토 한 줄 (「토」만 다음 줄로 떨어지던 것) */
.bizbar.busdays{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.bizbar.busdays .bbtn{min-width:0;padding-left:0;padding-right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.bizbar.busdays .bbtn small{font-size:10.5px;opacity:.85}
/* 날짜 · 월 칸 — 아이폰에서 칸이 자기 폭을 고집해 카드 밖으로 나가던 것 */
input[type=date],input[type=month],input[type=time]{min-width:0;max-width:100%;box-sizing:border-box}
input[type=date]::-webkit-date-and-time-value,input[type=month]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left}