/* app.css — 공통 스타일 / 컴포넌트 규격 (DESIGN.md 3장 기준)
   - 모바일 우선(최대폭 ~500px), 플랫, 얇은 테두리 + 여백으로 구분
   - 색은 tokens.css 변수만 사용. 폰트 굵기 400/500만. */

/* ── 리셋 / 베이스 ───────────────────────────── */
*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  background:var(--surface-0);
  color:var(--text-primary);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
              "Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-weight:var(--fw-normal);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; }

/* 앱 셸: 모바일 폭으로 가운데 정렬 */
.app{
  max-width:500px;
  margin:0 auto;
  min-height:100vh;
  background:var(--surface-0);
  display:flex;
  flex-direction:column;
}

/* ── 헤더 ────────────────────────────────────── */
.app-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  gap:8px;
  height:52px;
  padding:0 var(--pad);
  background:var(--surface-1);
  border-bottom:1px solid var(--border);
}
.app-header .title{
  font-size:16px;
  font-weight:var(--fw-medium);
}
.app-header .spacer{ flex:1; }

/* 헤더 아이콘 버튼(로그아웃/뒤로 등) */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border:none; background:transparent;
  color:var(--text-secondary);
  border-radius:var(--radius);
  font-size:18px;
}
.icon-btn:hover{ background:var(--state-bg); }

/* 메인 영역 */
.app-main{
  flex:1;
  padding:var(--pad);
}

/* ── 리스트 행 (01) ──────────────────────────── */
.list{ background:var(--surface-1); border-radius:var(--radius); overflow:hidden; }
.list-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  border-bottom:1px solid var(--border);
}
.list-row:last-child{ border-bottom:none; }
.list-row .icon{ font-size:18px; color:var(--text-secondary); flex:none; }
.list-row .label{ font-size:14px; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-row .meta{ font-size:12px; color:var(--text-muted); flex:none; }
.list-row .chevron{ font-size:16px; color:var(--text-muted); flex:none; }

/* 안읽음 점 */
.dot-unread{
  width:7px; height:7px; border-radius:50%;
  background:var(--text-secondary); flex:none;
}

/* 공지 목록/상세 */
.notice-title{ font-size:14px; }
.notice-sub{ font-size:12px; }
.notice-content{ white-space:pre-wrap; line-height:1.6; margin-bottom:10px; }
.notice-meta{ font-size:12px; margin-top:6px; }

/* ── 표 행 (05) ──────────────────────────────── */
.table{ background:var(--surface-1); border-radius:var(--radius); overflow:hidden; }
.table-head{
  display:flex;
  gap:8px;
  padding:8px 16px;
  font-size:11px;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
}
.table-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 16px;
  font-size:13px;
  border-bottom:1px solid var(--border);
}
.table-row:last-child{ border-bottom:none; }
.table-row .col-name{ flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table-row .col-date{ width:70px; flex:none; color:var(--text-secondary); }
.table-row .col-action{ width:44px; flex:none; text-align:right; color:var(--text-secondary); }

/* 상태 바: 좌측 4px 세로 바 (입학원서) */
.table-row.bar-blank{ border-left:4px solid var(--bar-blank); }
.table-row.bar-today{ border-left:4px solid var(--bar-today); }

/* 펼침 상세 영역 */
.row-detail{
  padding:12px 16px;
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  font-size:13px;
}
.detail-section-label{
  font-size:11px; color:var(--text-muted);
  margin:6px 0 8px;
}
.detail-section-label:first-child{ margin-top:0; }

/* 상세 키-값 줄 */
.kv{ display:flex; gap:10px; padding:3px 0; font-size:13px; }
.kv .k{ width:84px; flex:none; font-size:12px; }
.kv .v{ flex:1; min-width:0; word-break:break-all; }

/* O/X 토글 격자 */
.toggle-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 12px;
  margin-bottom:12px;
}
.toggle-item{
  display:flex; align-items:center; gap:8px;
  font-size:13px;
}
.toggle-item input{ width:16px; height:16px; }

/* 상세 영역 입력 라벨 */
.field-label{
  display:block;
  font-size:11px; color:var(--text-muted);
  margin:4px 0 4px;
}

/* 상세 하단 버튼 줄 */
.detail-actions{
  display:flex; gap:8px; margin-top:12px;
}
.btn-danger{ color:var(--danger); border-color:var(--danger); }
.btn-danger:hover{ background:var(--state-bg); }

/* ── 지표 카드 (04) ──────────────────────────── */
.metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:var(--pad);
}
.metric-card{
  background:var(--surface-1);
  border-radius:var(--radius);
  padding:12px;
}
.metric-card .m-label{ font-size:11px; color:var(--text-muted); }
.metric-card .m-value{ font-size:23px; font-weight:var(--fw-medium); margin-top:2px; }

/* ── 배지 ────────────────────────────────────── */
.badge{
  display:inline-block;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--state-bg);
  color:var(--text-secondary);
}
/* 완료 배지(회색 농도로 구분) */
.badge-done{ color:var(--text-muted); }

/* 선택 일괄 처리 바 */
.bulk-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; margin-bottom:12px;
  background:var(--state-bg);
  border-radius:var(--radius);
  font-size:13px;
}

/* ── 버튼 ────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  padding:8px 14px;
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  background:transparent;
  color:var(--text-primary);
}
.btn:hover{ background:var(--state-bg); }
.btn .icon{ font-size:16px; }
/* 주요 동작 1개만 강조(테두리 진하게) */
.btn-primary{ border-color:var(--text-primary); }

/* ── 상태 표시: 좌측 4px 세로 바 + 옅은 배경 ──── */
.state{
  border-left:4px solid var(--state-bar);
  border-radius:0;
  background:var(--state-bg);
}
.state-done{ color:var(--done-text); }

/* ── 필터 칩 ─────────────────────────────────── */
.chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.chip{
  font-size:12px;
  padding:5px 12px;
  border:1px solid var(--border-strong);
  border-radius:999px;
  background:transparent;
  color:var(--text-secondary);
}
.chip[aria-selected="true"]{
  border-color:var(--text-primary);
  color:var(--text-primary);
}

/* ── 툴바 / 카드 폼 ──────────────────────────── */
.toolbar-row{ display:flex; gap:8px; align-items:center; }
.card-pad{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
}
.form-title{ font-size:14px; font-weight:var(--fw-medium); margin-bottom:12px; }
textarea.field{ resize:vertical; font-family:inherit; }

/* ── 보기 전환 세그먼트 (간략 | 시트) ────────── */
.seg-group{ display:flex; gap:4px; background:var(--state-bg); border-radius:var(--radius); padding:3px; }
.seg{
  flex:1; font-size:13px; padding:7px 10px;
  border:none; background:transparent; color:var(--text-secondary);
  border-radius:6px;
}
.seg.on{ background:var(--surface-1); color:var(--text-primary); }

/* ── 시트 보기 (구글 시트 풍, 좌우 스크롤) ────── */
.sheet-wrap{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-1);
  -webkit-overflow-scrolling:touch;
}
table.sheet{ border-collapse:collapse; font-size:13px; white-space:nowrap; }
table.sheet th, table.sheet td{
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:0;
  text-align:left;
}
table.sheet th{
  background:var(--surface-0);
  color:var(--text-muted);
  font-size:11px; font-weight:var(--fw-normal);
  padding:8px 10px;
  position:sticky; top:0;
}
table.sheet td .sheet-cell,
table.sheet td .sheet-bool{
  display:block;
  padding:9px 10px;
  min-height:34px;
  cursor:text;
}
table.sheet td .sheet-bool{ text-align:center; cursor:pointer; color:var(--text-muted); }
table.sheet td .sheet-bool.on{ color:var(--text-primary); }
table.sheet td .sheet-cell:hover,
table.sheet td .sheet-bool:hover{ background:var(--state-bg); }
.sheet-input{
  width:100%; box-sizing:border-box;
  font:inherit; font-size:13px;
  padding:8px 9px; border:none;
  background:var(--surface-2); color:var(--text-primary);
  outline:2px solid var(--border-strong); outline-offset:-2px;
}

/* ── 공통 유틸 ───────────────────────────────── */
.muted{ color:var(--text-muted); }
.secondary{ color:var(--text-secondary); }
.section-gap{ margin-bottom:var(--pad); }

/* ── 입력 필드 ───────────────────────────────── */
.field{
  width:100%;
  font-size:14px;
  padding:11px 12px;
  margin-bottom:10px;
  background:var(--surface-1);
  color:var(--text-primary);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
}
.field:focus{ outline:none; border-color:var(--text-secondary); }

/* 블록 버튼 / 폼 오류 */
.btn-block{ width:100%; justify-content:center; padding:11px 14px; }
.form-error{ font-size:12px; color:var(--text-secondary); margin:2px 0 10px; }

/* ── 로그인 화면 ─────────────────────────────── */
.login-screen{
  min-height:calc(100vh - 52px);
  display:flex; align-items:center; justify-content:center;
  padding:24px 0;
}
.login-card{
  width:100%;
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px 20px;
}
.login-sub{ font-size:13px; color:var(--text-muted); margin-bottom:18px; text-align:center; }

/* ── 홈 인사말 ───────────────────────────────── */
.greeting{ padding:4px 2px 16px; }
.greeting .g-name{ font-size:18px; font-weight:var(--fw-medium); }
.greeting .g-role{ font-size:13px; margin-top:2px; }

/* 지표 카드 클릭 가능 */
.metric-card.clickable{ cursor:pointer; }
.metric-card.clickable:hover{ background:var(--state-bg); }

/* ── 홈 미확인 카드 ──────────────────────────── */
.card{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.card-section-title{
  font-size:12px;
  padding:12px 16px 8px;
}
.card-row{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px;
  border-top:1px solid var(--border);
  cursor:pointer;
}
.card-row:hover{ background:var(--state-bg); }
.card-row .cr-name{ flex:1; font-size:14px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-row .cr-meta{ font-size:12px; flex:none; }
.card-foot{ font-size:12px; padding:10px 16px; border-top:1px solid var(--border); }

/* 메뉴 섹션 라벨 */
.menu-label{ font-size:12px; padding:4px 2px 8px; }

/* ── 자리표시(준비 중 / 안내) ────────────────── */
.placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center;
  padding:64px 24px; color:var(--text-muted);
}
.placeholder .ph-icon{ font-size:32px; }
.placeholder .ph-text{ font-size:14px; }

/* ── 로딩 / 토스트 ───────────────────────────── */
.loading{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:var(--surface-0);
}
.loading.show{ display:flex; }
.loading .spinner{
  width:24px; height:24px;
  border:2px solid var(--border-strong);
  border-top-color:var(--text-secondary);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.toast{
  position:fixed;
  left:50%; bottom:24px;
  transform:translateX(-50%);
  max-width:90%;
  padding:10px 16px;
  font-size:13px;
  background:var(--surface-1);
  color:var(--text-primary);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
  z-index:50;
}
.toast.show{ opacity:1; }