/* (7/20 밤) iOS Safari 전역 방어 — 이 앱 버튼은 전부 커스텀 스타일이라 네이티브 스킨 해제가 안전 */
button{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;}

:root{
  --brand:#2fa84f; --brand-dark:#1e7a38; --ok:#1e7a38; --danger:#dc2626;  /* 정본=theme.css — 동기화된 폴백 */
  --text:#1f2937; --muted:#64748b; --line:#cbd5e1; --bg:#f8fafc; --card:#fff;
  --font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
    system-ui,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{font-family:var(--font-sans);color:var(--text);background:var(--bg);
  font-size:18px;line-height:1.5;overflow:hidden;user-select:none;}

.topbar{display:flex;align-items:center;gap:16px;padding:14px 20px;background:var(--card);
  border-bottom:1px solid var(--line);}
.topbar .brand{font-size:20px;font-weight:800;}
.topbar .date{color:var(--muted);font-weight:600;}
.topbar .count{margin-left:auto;font-size:17px;color:var(--muted);}
.topbar .count b{color:var(--ok);font-size:20px;}

.seg{display:flex;gap:8px;padding:12px 20px 4px;flex-wrap:wrap;}
.seg button{min-height:52px;padding:0 22px;border-radius:8px;font-size:17px;font-weight:700;
  border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;}
.seg button[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand);}

.searchbar{display:flex;gap:8px;padding:8px 20px;align-items:center;}
.searchbar input{flex:1;min-height:52px;font-size:18px;padding:0 16px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);}
.searchbar .ghost{min-height:52px;min-width:52px;border:none;background:none;font-size:22px;color:var(--muted);cursor:pointer;}

.board{position:relative;height:calc(100vh - 210px);overflow:hidden;padding:8px 20px 20px;}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  overflow-y:auto;height:100%;padding-right:34px;align-content:start;}
.name-btn{min-height:66px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;}
.name-btn .nm{font-size:19px;font-weight:800;}
.name-btn .sub{font-size:13px;font-weight:500;color:var(--muted);}
.name-btn:active{background:var(--brand-bg,#eaf7ee);border-color:var(--brand);}
.name-btn.done{background:#f1f5f9;border-color:#e2e8f0;}
.name-btn.done .nm{color:#94a3b8;}
.name-btn.done .sub{color:var(--ok);font-weight:700;}
.name-btn.hide{display:none;}

.empty{position:absolute;inset:40px 0 0;text-align:center;color:var(--muted);font-size:18px;}

.choseong{position:absolute;top:8px;right:22px;bottom:20px;width:26px;display:flex;
  flex-direction:column;justify-content:center;gap:1px;}
.choseong button{border:none;background:none;color:var(--muted);font-size:12px;font-weight:700;
  padding:1px 0;cursor:pointer;line-height:1.1;}
.choseong button:active{color:var(--brand);}

.admin-link{position:fixed;bottom:10px;left:12px;font-size:13px;color:#94a3b8;text-decoration:none;
  padding:6px 10px;}
.planner-link{position:fixed;bottom:10px;right:12px;font-size:14px;font-weight:700;color:var(--brand-dark,#1e7a38);
  text-decoration:none;padding:8px 14px;border:1px solid var(--brand-dark,#1e7a38);border-radius:8px;background:#fff;}
.listening-link{position:fixed;bottom:10px;right:150px;font-size:14px;font-weight:700;color:#0f766e;
  text-decoration:none;padding:8px 14px;border:1px solid #0f766e;border-radius:8px;background:#fff;}

/* 오버레이 (본인확인) */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;
  align-items:center;justify-content:center;z-index:20;}
.pad-card{background:var(--card);border-radius:20px;padding:24px 28px 30px;width:min(840px,96vw);
  box-shadow:0 20px 60px rgba(0,0,0,.3);}
.pad-card .back{border:none;background:none;font-size:17px;color:var(--muted);cursor:pointer;padding:4px 0;}
.confirm-name{font-size:36px;font-weight:800;text-align:center;margin-top:6px;}
.confirm-hint{text-align:center;color:var(--muted);margin:6px 0 14px;}
.pin-dots{font-size:34px;letter-spacing:14px;text-align:center;color:var(--text);height:44px;}
.pin-err{color:var(--danger);font-size:15px;text-align:center;margin:2px 0 8px;font-weight:600;}
.pin-err::before{content:"⚠ ";}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:340px;margin:14px auto 0;}
.keypad button{min-height:72px;font-size:26px;font-weight:700;border-radius:12px;
  border:1px solid var(--line);background:var(--card);cursor:pointer;}
.keypad button:active{background:var(--brand-bg,#eaf7ee);}
.keypad .fn{font-size:18px;color:var(--muted);}

/* 확정 전면화면 */
.done-screen{position:fixed;inset:0;background:var(--brand);color:#fff;z-index:30;  /* 대형 텍스트 전면화면 = 비비드 브랜드 유지 */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}
.done-screen .check{font-size:120px;line-height:1;}
.done-screen h1{font-size:42px;font-weight:800;margin:0;}
.done-screen .meta{font-size:26px;font-weight:600;}
.done-screen .hint{font-size:18px;opacity:.85;margin-top:10px;}
/* (7/22 Hawor #840) 태그 넛지 — 화이팅 + 수업·강의실(초강조) */
.done-cheer{font-size:34px;font-weight:800;margin-top:6px;}
.done-lesson{display:flex;flex-direction:column;gap:6px;align-items:center;margin-top:4px;}
.done-lesson .dl-row{font-size:26px;font-weight:600;opacity:.95;}
.done-lesson .dl-room{display:inline-block;font-size:56px;font-weight:900;line-height:1.15;
  background:#fff;color:var(--brand-dark,#1e7a38);border-radius:16px;padding:2px 18px;margin:0 6px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);}
@media (prefers-reduced-motion:no-preference){
  .done-screen{animation:pop .2s ease-out;}
  @keyframes pop{from{transform:scale(.97);opacity:.6}to{transform:scale(1);opacity:1}}
}

.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:25;
  background:#1f2937;color:#fff;padding:14px 22px;border-radius:12px;font-size:18px;font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.25);}

/* ─────────────── 키오스크 (그린 리디자인, theme.css 토큰 사용) ─────────────── */
.num-err{color:var(--danger);font-size:17px;font-weight:700;min-height:22px;}
.num-err::before{content:"⚠ ";}
.enter{width:min(580px,100%);height:92px;font-size:30px;font-weight:800;border:none;border-radius:18px;
  background:var(--brand);color:#fff;cursor:pointer;}
.enter:active{filter:brightness(.94);}

.kg{display:flex;gap:20px;height:100vh;padding:20px;overflow:hidden;}
.kg-panel{background:var(--card);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 6px 24px rgba(16,64,32,.06);}

/* 좌: 오늘의 등원 */
.kg-left{width:380px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;}
.kg-date{padding:18px 22px 0;font-size:16px;font-weight:700;color:var(--muted);}
.kg-lhead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 22px 14px;border-bottom:1px solid var(--line);}
.kg-lhead h2{margin:0;font-size:22px;font-weight:800;}
.kg-count{background:var(--brand-bg,#eaf7ee);color:var(--brand-dark,#1e7a38);font-size:14px;font-weight:800;
  padding:6px 12px;border-radius:999px;border:1px solid var(--brand-border,#bfe0c9);white-space:nowrap;}
.kg-arlist{list-style:none;margin:0;padding:10px 14px;flex:1;overflow-y:auto;}
.kg-arlist li{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;
  margin-bottom:6px;background:var(--card);border:1px solid var(--line);}
.kg-chk{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:var(--brand-bg,#eaf7ee);
  color:var(--brand-dark,#1e7a38);display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:900;}
.kg-nm{font-size:18px;font-weight:800;}
.kg-grade{background:var(--badge-bg,#eef1f0);color:var(--badge-text,#4b5563);font-size:12.5px;
  font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.kg-tm{margin-left:auto;font-size:15px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
.kg-empty{color:var(--muted);text-align:center;padding:40px 16px;font-size:15px;flex:1;}
.kg-last{margin:10px 14px 14px;padding:12px 16px;border-radius:12px;background:var(--brand-bg,#eaf7ee);
  color:var(--brand-deep,#166534);font-size:15px;font-weight:600;border:1px solid var(--brand-border,#bfe0c9);}
.kg-last b{font-weight:800;}

/* 우: 번호 입력 */
.kg-right{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:16px;min-width:0;}
.kg-logo{display:flex;align-items:center;gap:18px;margin-bottom:8px;}
.kg-mark{width:clamp(64px,11vh,96px);height:clamp(64px,11vh,96px);object-fit:contain;}
.kg-logo span{font-size:clamp(38px,6vh,52px);font-weight:900;color:var(--text);letter-spacing:-1px;
  word-break:keep-all;white-space:nowrap;}  /* '이루리학/원' 단어 중간 줄바꿈 방지 (QA#25) */
.kg-guide{font-size:24px;font-weight:600;color:var(--text);margin-bottom:6px;}
.kg-guide b{color:var(--brand-dark,#1e7a38);font-weight:800;}
/* (7/21) 폭 기준 = 우측 패널(100%), vw 금지 — 94vw는 좌측 명단을 무시해 iPad(1024px)에서
   패널을 넘겨 페이지가 뷰포트보다 넓어짐 → Safari가 전체 축소("작게 보임" 근원) */
.kg-display{width:min(680px,100%);height:clamp(80px,12vh,104px);flex-shrink:0;border:2.5px solid var(--brand);border-radius:18px;box-sizing:border-box;
  background:var(--card);display:flex;align-items:center;justify-content:center;
  font-size:46px;font-weight:800;color:var(--text);letter-spacing:16px;text-indent:16px;}
.kg-display.ph{color:#6b7a70;font-size:30px;font-weight:600;letter-spacing:0;text-indent:0;}  /* placeholder도 라지 3:1+ (QA#23) */
.kg-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:min(680px,100%);}
/* (7/20 밤) iPad Safari — 네이티브 버튼 스킨이 배경·높이를 덮어써 패드가 깨짐 → appearance 해제 + clamp 폴백 높이 */
.kg-numpad button{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  height:96px;height:clamp(88px,13vh,116px);font-size:46px;font-weight:800;border-radius:18px;
  border:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--text);}
.kg-numpad button:active{background:var(--brand-bg,#eaf7ee);border-color:var(--brand);}
.kg-numpad .kg-fn{background:#f1f4f2;color:var(--muted);}
.kg-numpad .kg-go{background:var(--brand);border-color:var(--brand);color:#fff;}
.kg-numpad .kg-go:active{background:var(--brand-dark,#1e7a38);border-color:var(--brand-dark,#1e7a38);}
.kg-numpad .kg-ic{font-size:34px;line-height:1;display:block;}
.kg-numpad .kg-lb{font-size:19px;font-weight:800;display:block;margin-top:4px;}
.kg-numpad .kg-fn,.kg-numpad .kg-go{display:flex;flex-direction:column;align-items:center;justify-content:center;}

/* 동번호 후보 선택 */
.cand-list{display:flex;flex-direction:column;gap:10px;margin-top:16px;max-height:50vh;overflow-y:auto;}
.cand{display:flex;flex-direction:column;gap:2px;text-align:left;padding:14px 18px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);cursor:pointer;}
.cand:active{background:var(--brand-bg,#eaf7ee);border-color:var(--brand);}
.cand .cn{font-size:20px;font-weight:800;}
.cand .cs{font-size:13px;color:var(--muted);}
.cand.done{opacity:.55;}
.cand.done .cn{color:var(--ok);}

/* (7/21) iPad급 가로폭 — 좌측 명단 슬림해서 키패드 공간 확보 */
@media (max-width:1180px){
  .kg-left{width:300px;}
}

/* 세로(포트레이트) — 등원 명단 상단 압축 + 패드 크기 유지 */
@media (max-aspect-ratio:1/1){
  .kg{flex-direction:column;gap:16px;padding:16px;}
  .kg-left{width:100%;flex-shrink:1;max-height:32vh;}
  .kg-arlist{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;}
  .kg-arlist li{margin-bottom:0;}
  .kg-last{margin-top:6px;}
  .kg-right{flex:1;}
}

/* 폰 폭(≤480px) — overflow:hidden 화면이라 스크롤 자체가 불가:
   키패드 확인·지우기 줄까지 한 화면에 들어오게 전체 축소 (QA#25) */
@media (max-width:480px){
  .kg{padding:10px;gap:10px;}
  .kg-left{max-height:24vh;}
  .kg-logo{gap:10px;margin-bottom:4px;}
  .kg-mark{width:44px;height:44px;}
  .kg-logo span{font-size:clamp(24px,7.5vw,34px);}
  .kg-guide{font-size:17px;margin-bottom:2px;}
  .kg-display{height:clamp(54px,8vh,72px);font-size:32px;letter-spacing:12px;text-indent:12px;}
  .kg-display.ph{font-size:20px;}
  .kg-numpad{gap:8px;}
  .kg-numpad button{height:clamp(52px,9vh,76px);font-size:32px;border-radius:14px;}
  .kg-numpad .kg-ic{font-size:24px;}
  .kg-numpad .kg-lb{font-size:14px;margin-top:2px;}
}

/* 플래너 로그인 (이름 + PIN) */
.login-pad{display:flex;justify-content:center;align-items:flex-start;padding:24px 16px;
  height:calc(100vh - 60px);overflow-y:auto;}
.lp-card{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:24px 26px 28px;width:min(440px,94vw);display:flex;flex-direction:column;align-items:center;
  box-shadow:0 10px 34px rgba(0,0,0,.06);}
.lp-label{align-self:flex-start;font-weight:800;font-size:15px;margin:6px 0 8px;}
.lp-name{width:100%;min-height:56px;font-size:20px;font-weight:700;padding:0 16px;border-radius:12px;
  border:1px solid var(--line);background:#fff;margin-bottom:14px;font-family:inherit;color:var(--text);}
.lp-name:focus{outline:none;border-color:var(--brand);}
.lp-pin{width:100%;min-height:56px;font-size:26px;font-weight:800;padding:0 16px;border-radius:12px;
  border:1px solid var(--line);background:#fff;font-family:inherit;color:var(--text);
  letter-spacing:10px;text-align:center;}
.lp-pin:focus{outline:none;border-color:var(--brand);}
.lp-pin::placeholder{letter-spacing:6px;color:#94a3b8;}  /* 장식성 도트 — 1.48:1은 과소, 한 단계 인상 */
.login-pad .num-display{margin:2px 0 4px;}
.login-pad .numpad,.login-pad .enter{width:min(360px,86vw);margin-top:14px;}
.login-pad .enter{width:100%;margin-top:18px;}

[hidden]{display:none!important;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ── v2 (#7577/#7637): 전체 명단·관 선택·입퇴실 ── */
.kg-roster{flex:1;overflow-y:auto;padding:4px 14px 14px;}
.kg-sect{font-size:13.5px;font-weight:800;color:var(--muted);letter-spacing:.02em;
  padding:12px 4px 6px;position:sticky;top:0;background:var(--card);}
.kg-sect-off{color:#b45309;}
.kg-sect small{font-weight:600;}
.kg-stlist{list-style:none;margin:0;padding:0;}
.kg-stlist li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;}
.kg-stlist li.is-in{background:var(--brand-bg,#eaf7ee);}
.kg-stlist li.is-in .kg-nm{color:var(--brand-dark,#1e7a38);}
/* (7/22 Hawor #840, 같은 날 2차) 표 형태 — 시간·이름·정보 3열 세로 정렬(전부 왼쪽).
   이름 열 = max-content: 4글자 이름이 폭 기준. ★칸 틈 금지 — 배경이 줄 전체로 이어져야
   "한 줄 = 한 학생"이 산다 (1차: 칸별 알약 3개로 갈라져 보인 사고). 간격은 셀 안 패딩으로. */
.kg-tbl{display:grid;grid-template-columns:max-content max-content 1fr;}
.kg-tbl>li{display:contents;}
.kg-tbl>li>span{display:flex;align-items:center;padding:6px 12px 6px 0;
  border-bottom:1px solid #eef2ef;text-align:left;justify-content:flex-start;min-width:0;}
.kg-tbl .kg-tm{margin-left:0;padding-left:10px;font-size:14px;}   /* 기존 flex 우측밀기 해제 */
.kg-tbl .kg-nm{white-space:nowrap;font-size:17px;}
.kg-tbl .kg-grade{background:none;border-radius:0;white-space:normal;
  font-size:12.5px;color:var(--muted);padding-right:10px;}
.kg-tbl>li.is-in>span{background:var(--brand-bg,#eaf7ee);}
.kg-tbl>li.is-in>.kg-tm{border-radius:10px 0 0 10px;}
.kg-tbl>li.is-in>.kg-grade{border-radius:0 10px 10px 0;}
.kg-tbl>li.kg-empty{display:block;grid-column:1/-1;}
.kg-stlist .kg-chk{width:18px;color:var(--ok);font-weight:900;}
.kg-off li{opacity:.75;}
.kg-hall{margin-left:auto;min-height:44px;font-size:16px;font-weight:700;border-radius:10px;
  border:1px solid var(--line);background:var(--card);color:var(--text);padding:0 10px;}
/* (7/20 Hawor) 태블릿 터치 타깃 확대 — 입실/퇴실 버튼·행·글자 크게 */
.cand-row{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"cn in out" "cs in out";
  align-items:center;column-gap:14px;padding:18px 18px;border:1px solid var(--line);border-radius:14px;}
.cand-row .cn{grid-area:cn;font-size:32px;font-weight:800;}
.cand-row .cs{grid-area:cs;font-size:17px;color:var(--muted);}
.cand-row .io{min-height:110px;min-width:170px;border-radius:16px;font-size:30px;font-weight:800;
  border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;}
.cand-row .io.in{grid-area:in;}
.cand-row .io.out{grid-area:out;}
.cand-row .io.primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.cand-row .io.out.primary{background:#b45309;border-color:#b45309;}
.confirm-hint#segHint{color:var(--brand-dark,#1e7a38);font-weight:700;}

/* (7/28 #957) 시계 추가 후 800px 높이(태블릿 가로 전체화면)에서 우측 칼럼 오버플로 —
   overflow:hidden이라 하단 키패드 줄(지우기/0/확인)이 잘렸음. 낮은 화면에서 여백 회수. */
@media (max-height:850px){
  .kg-right{gap:6px;padding:10px 16px;}
  .kg-logo{margin-bottom:0;}
  .kg-mark{width:clamp(52px,9vh,80px);height:clamp(52px,9vh,80px);}
  .kg-display{height:clamp(64px,10.5vh,92px);}
  .kg-numpad{gap:12px;}
  .kg-guide{margin-bottom:2px;}
}

/* (7/29 Hawor) 타관 태그 경고 화면 — 성공 초록과 확실히 구분되는 주황 */
.done-screen.warn{background:#d97706;}