/* 무브노트 공통 스타일 (정적 페이지) */

/* 사진 썸네일 정사각형 */
.photo-thumb { aspect-ratio: 1 / 1; object-fit: cover; }

/* 아이폰 노치/홈바 safe-area 대응 */
.pb-safe { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }

/* 스크롤바 얇게 */
* { scrollbar-width: thin; }

/* ---------- E. UX 폴리싱 ---------- */
* { -webkit-tap-highlight-color: transparent; }

button, a { transition: transform .08s ease, filter .15s ease, background-color .15s ease, box-shadow .15s ease; }
button:active { transform: scale(.96); }
a:active { opacity: .85; }

/* 카드 부드러운 그림자 + 상호작용 카드 호버 살짝 뜨기 */
.card-soft { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.04); }
.card-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(27,108,245,.12); }

/* ---------- 로그인: 역할 선택 세그먼트 (JS 없이 CSS 라디오) ---------- */
.login-card input[name="role"] { position: absolute; opacity: 0; pointer-events: none; }
.role-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.role-seg label {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .9rem .5rem; border: 2px solid #e2e8f0; border-radius: 1rem;
  background: #fff; color: #64748b; font-weight: 700; text-align: center;
  cursor: pointer; transition: all .15s ease;
}
.role-seg label .ico { font-size: 1.5rem; }
.role-seg label .sub { font-size: .7rem; font-weight: 500; color: #94a3b8; }

/* 선택된 역할 강조 */
#role-teacher:checked ~ .role-seg label[for="role-teacher"],
#role-parent:checked  ~ .role-seg label[for="role-parent"] {
  border-color: #328bff; background: #eef7ff; color: #1b6cf5;
  box-shadow: 0 2px 10px rgba(27,108,245,.15);
}
#role-teacher:checked ~ .role-seg label[for="role-teacher"] .sub,
#role-parent:checked  ~ .role-seg label[for="role-parent"] .sub { color: #4f8bf0; }

/* 선택된 역할에 맞는 로그인 버튼만 표시 */
.login-parent { display: none !important; }
#role-parent:checked ~ .login-parent  { display: flex !important; }
#role-parent:checked ~ .login-teacher { display: none !important; }

/* ---------- 서브탭 (출결 / 오늘 픽업) JS 없이 CSS ---------- */
.subtabs > input { position: absolute; opacity: 0; pointer-events: none; }
.subtab-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
  background: #f1f5f9; padding: .25rem; border-radius: .9rem; margin-bottom: 1.1rem;
}
.subtab-nav label {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .55rem; border-radius: .7rem; font-weight: 700; font-size: .9rem;
  color: #64748b; cursor: pointer; transition: all .15s ease;
}
#tab-att:checked      ~ .subtab-nav label[for="tab-att"],
#tab-pickup:checked   ~ .subtab-nav label[for="tab-pickup"],
#tab-notebook:checked ~ .subtab-nav label[for="tab-notebook"],
#tab-photos:checked   ~ .subtab-nav label[for="tab-photos"] {
  background: #fff; color: #1b6cf5; box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.panel-pickup, .panel-photos { display: none; }
#tab-pickup:checked ~ .panel-pickup { display: block; }
#tab-pickup:checked ~ .panel-att { display: none; }
#tab-photos:checked ~ .panel-photos { display: block; }
#tab-photos:checked ~ .panel-notebook { display: none; }

/* ---------- 상품 옵션 선택 (사이즈 등) JS 없이 CSS ---------- */
.opt-seg { display: flex; gap: .5rem; flex-wrap: wrap; }
.opt-seg input { position: absolute; opacity: 0; pointer-events: none; }
.opt-seg label {
  min-width: 52px; text-align: center; padding: .5rem .9rem;
  border: 1.5px solid #e2e8f0; border-radius: .7rem;
  font-weight: 700; font-size: .9rem; color: #475569; cursor: pointer;
  transition: all .15s ease;
}
.opt-seg input:checked + label { border-color: #328bff; background: #eef7ff; color: #1b6cf5; }

/* ---------- 픽업 지도 핀 펄스 ---------- */
.pin-ring {
  transform-box: fill-box; transform-origin: center;
  animation: pinring 1.8s ease-out infinite;
}
@keyframes pinring {
  0%   { transform: scale(.4); opacity: .55; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { opacity: 0; }
}

/* 내 정보 입력: WebView의 비활성/자동완성 상태에도 글자 대비 유지 */
.profile-input {
  caret-color: currentColor;
  -webkit-text-fill-color: currentColor;
}
.profile-input:disabled { opacity: 1; }
.profile-input[type="date"] { color-scheme: light; }
.profile-input::placeholder {
  color: #64748b;
  -webkit-text-fill-color: #64748b;
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
  .profile-input[type="date"] { color-scheme: dark; }
  .profile-input::placeholder {
    color: #94a3b8;
    -webkit-text-fill-color: #94a3b8;
  }
}

/* ---------- 다크모드 (시스템 설정 자동) ----------
   Tailwind CDN 유틸리티 색상을 한 곳에서 리매핑 → 모든 페이지 일괄 적용 */
@media (prefers-color-scheme: dark) {
  body { background: #0b1220 !important; color: #e2e8f0; }

  .bg-slate-50  { background: #0b1220 !important; }
  .bg-white     { background: #111827 !important; }
  .bg-white\/90 { background: rgba(17,24,39,.9) !important; }
  .bg-slate-100 { background: #1f2937 !important; }
  .bg-slate-50.rounded-lg { background: #1f2937 !important; }

  .border-slate-200 { border-color: #1f2937 !important; }
  .border-slate-100 { border-color: #1f2937 !important; }
  .border-slate-300 { border-color: #334155 !important; }

  .text-slate-800 { color: #e2e8f0 !important; }
  .text-slate-700 { color: #cbd5e1 !important; }
  .text-slate-600 { color: #cbd5e1 !important; }
  .text-slate-500 { color: #94a3b8 !important; }
  .text-slate-400 { color: #64748b !important; }

  /* 파스텔 배지 톤다운 */
  .bg-brand-50  { background: #172554 !important; }
  .bg-brand-100 { background: #1e3a8a !important; }
  .bg-amber-50  { background: #3a2f12 !important; }

  .card-soft { box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); }

  .subtab-nav { background: #1f2937; }
  #tab-att:checked      ~ .subtab-nav label[for="tab-att"],
  #tab-pickup:checked   ~ .subtab-nav label[for="tab-pickup"],
  #tab-notebook:checked ~ .subtab-nav label[for="tab-notebook"],
  #tab-photos:checked   ~ .subtab-nav label[for="tab-photos"] { background: #111827; color: #8ecbff; }

  .opt-seg label { background: #111827; border-color: #1f2937; color: #94a3b8; }
  .opt-seg input:checked + label { background: #172554; border-color: #328bff; color: #8ecbff; }

  .role-seg label { background: #111827; border-color: #1f2937; color: #94a3b8; }
  #role-teacher:checked ~ .role-seg label[for="role-teacher"],
  #role-parent:checked  ~ .role-seg label[for="role-parent"] { background: #172554; border-color: #328bff; color: #8ecbff; }
  #role-teacher:checked ~ .role-seg label[for="role-teacher"] .sub,
  #role-parent:checked  ~ .role-seg label[for="role-parent"] .sub { color: #7ab0f5; }
}