/* 아이콕 공통 디자인 규칙 (2026-10 클로드 디자인 시안 「아이콕 화면 디자인」)
   세 화면이 같이 쓴다: / (index.css 뒤), /ops, /parent (각 화면 스타일 뒤에 불러서 덮어쓴다)
   body.sui = 원장님·선생님 화면, body.pui = 학부모 화면 */

/* 1. 색: 브랜드 주황(#ff6b3d)은 로고·선택 표시·아이콘에만, 흰 글자 버튼 바탕은 한 단계 진한 --btn */
:root {
  --btn: #cf4416; --btn-ink: #ffffff;
  --brand-text: #bd4313;
  --ok: #127a50; --ok-soft: #e7f6ef;
  --warn: #8f5400; --warn-soft: #fff4e0; --warn-text: #8f5400;
  --bad: #b8323a; --bad-soft: #fdeced;
  --blue: #2747a8; --blue-soft: #eaf0ff;
  --line2: #f5eee9; --line3: #e3d6ce; --muted: #6b7280;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --line3: #3a302b; --muted: #a39990; --blue: #8fb0ff; --blue-soft: #1a2638; }
}
:root[data-theme="dark"] { --line3: #3a302b; --muted: #a39990; --blue: #8fb0ff; --blue-soft: #1a2638; }

/* ───── 원장님·선생님 화면 (모든 크기: 색과 모양) ───── */
.sui .btn { border-color: var(--line3); }
.sui .btn.ghost { border-color: transparent; }
.sui .btn.primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.sui .btn.soft { color: var(--brand-text); }
.sui .btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); background: var(--card); }
.sui .chip { border-color: var(--line3); }
.sui .chip.on { border-color: var(--brand); color: var(--brand-text); background: var(--brand-soft); }
.sui .badge { background: var(--bad); }
.sui .pill { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border-radius: 6px; font-size: 13px; font-weight: 600; padding: 2px 8px; line-height: 18px; }
.sui .pill.off { color: var(--sub); background: var(--line2); }
.sui .pill.ok { color: var(--ok); background: var(--ok-soft); } .sui .pill.warn { color: var(--warn); background: var(--warn-soft); }
.sui .pill.bad { color: var(--bad); background: var(--bad-soft); }
.sui .pill::before { display: none; }
.sui .pill.blue { color: var(--blue); background: var(--blue-soft); }
.sui .plan-chip, .sui .na-trial { color: var(--brand-text); background: var(--brand-soft); }
.sui nav.tabs button.on { color: var(--brand-text); }
.sui nav.tabs button.on .ico { color: var(--brand); }

/* ───── 원장님·선생님 휴대폰 (390px 기준) ───── */
@media (max-width: 760px) {
  /* 머리말 (높이 56): 로고 · 기관 이름 · 체험 남은 날 · 계정 — 모든 화면 같음 */
  .sui header { background: var(--bg); }
  .sui .bar { min-height: 56px; padding: 0 12px 0 16px; gap: 8px; }
  .sui .logo { font-size: 22px; letter-spacing: -1px; }
  .sui .orgname { display: block !important; flex: 1; min-width: 0; max-width: none; font-size: 14px; padding-left: 4px; }
  .sui .plan-chip, .sui .na-trial { margin-left: 0; height: 28px; display: inline-flex; align-items: center; padding: 0 10px; font-size: 13px; font-weight: 600; }
  .sui .acct-btn, .sui #navAcct .na-btn { padding: 4px; border: 0; background: none; }
  .sui .acct-btn .ava, .sui #navAcct .na-ava { width: 36px; height: 36px; font-size: 15px; background: var(--brand-soft); color: var(--brand-text); }
  /* 아래 메뉴 (높이 64) */
  .sui nav.tabs { padding: 0 0 env(safe-area-inset-bottom); height: calc(64px + env(safe-area-inset-bottom)); box-sizing: border-box; align-items: stretch; }
  .sui nav.tabs button { font-size: 13px; color: var(--muted); padding: 6px 2px 4px; border-radius: 0; gap: 3px; justify-content: center; min-height: 0; }
  .sui nav.tabs button .ico { width: 24px; height: 24px; }
  .sui nav.tabs button.on { color: var(--brand-text); font-weight: 700; }
  /* 글자 단계: 화면 제목 24 · 설명 14 */
  .sui main h2 { font-size: 24px; line-height: 32px; letter-spacing: -.4px; }
  .sui main .lead { font-size: 14px; line-height: 20px; }
  /* 버튼: 기본 44 · 작은 36 · 큰 52 */
  .sui .btn { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; font-weight: 700; }
  .sui .btn.small { min-height: 36px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
  .sui .btn.big { min-height: 52px; font-size: 16px; }
  .sui .btn.ghost { font-weight: 600; }
  /* 칩 36 · 입력칸 48 · 탭 40 */
  .sui .chip { min-height: 36px; padding: 0 14px; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
  .sui input[type=text], .sui input[type=search], .sui input[type=date], .sui input[type=time], .sui input[type=password],
  .sui input[type=email], .sui input[type=tel], .sui select { min-height: 48px; border-radius: 12px; border-color: var(--line3); background-color: var(--card); padding: 0 14px; }
  .sui textarea { border-radius: 12px; border-color: var(--line3); background-color: var(--card); padding: 12px 14px; }
  .sui .bsh input.tm { padding-left: 33px; }  /* 차량표 출발 시간 칸: 왼쪽 시계 그림 자리 (위 입력칸 여백이 덮어쓰지 않게) */
  .sui .seg { background: var(--line2); border: 0; border-radius: 12px; padding: 4px; }
  .sui .seg button { min-height: 40px; font-size: 15px; border-radius: 9px; }
  .sui .card { border-radius: 16px; }
}

/* ───── 학부모 화면 ───── */
.pui .btn { background: var(--btn); }
.pui .btn.soft { background: var(--brand-soft); color: var(--brand-text); }
.pui .btn.line { background: var(--card); border-color: var(--line3); }

/* 학부모 홈 (디자인 시안 ③): 오늘 아이콘은 동그라미 안에, 새 사진은 주요 버튼 */
.pui .card .line > .ico:first-child { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--line2); color: var(--sub); flex: none; box-sizing: border-box; }
.pui .card .line { align-items: center; }
.pui .phcard > .btn { margin-top: 14px; }
.pui .newtag { font-size: 13px; font-weight: 700; color: var(--brand-text); background: var(--brand-soft); border-radius: 6px; padding: 2px 8px; margin-left: auto; }
.pui .newsbox .nrow .udot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); flex: none; margin-left: auto; }

/* 휴대폰: 입력칸 글씨가 16보다 작으면 아이폰이 화면을 저절로 확대한다 → 세 화면 모두 16 (출결·차량표·계획표 칸 포함) */
@media (max-width: 820px), (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea { font-size: 16px !important; }
}

/* 작은 동그라미 버튼(도움말 ?, 사진 빼기 ✕, 색 고르기): 보이는 크기는 그대로, 손가락으로 누르는 영역만 넓힌다 (권장 44px) */
.help, .grptools .grpx, .colors button { position: relative; }
.help::after, .refdrop .refx::after, .refi button::after, .grptools .grpx::after, .thumbs .th button::after { content: ""; position: absolute; inset: -11px; }
.colors button::after { content: ""; position: absolute; inset: -6px; }  /* 색 칸은 붙어 있어서 조금만 */