:root {
  --ink: #1f2430;
  --sub: #6b7280;
  --line: #dfe3e8;
  --bg: #f6f7f9;
  --card: #ffffff;
  --accent: #3a6b5c;
  --accent-soft: #e8f0ed;
  --warn: #b8863a;
  --danger: #c0473f;
  --danger-soft: #f7e9e5;
  --plus: #c0578a;
  --plus-soft: #fbeaf1;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.device {
  max-width: 430px;
  margin: 24px auto;
  background: var(--card);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--line);
  min-height: 640px;
  position: relative;
}
header { padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }
header h1 { font-size: 17px; margin: 0; }
header .sub { font-size: 11.5px; color: var(--sub); margin-top: 3px; }
header .back-link { font-size: 12px; color: var(--sub); text-decoration: none; display: inline-block; margin-bottom: 8px; }

main { padding: 4px 16px 32px; }

.section { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 14px 0; }
.section h2 { font-size: 15px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.step-no {
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.field { margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 12.5px; color: var(--ink); font-weight: 700; margin-bottom: 6px; }
input[type=text], input[type=tel], input[type=password], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 11px 12px; border: 1.5px solid #c7ced6; border-radius: 10px; font-size: 14px; background: #fff;
  font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
input[type=text]:focus, input[type=tel]:focus, input[type=password]:focus, input[type=date]:focus, input[type=number]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: #9aa1ab; }
textarea { min-height: 70px; resize: vertical; }
.row2 { display: flex; gap: 8px; }
.row2 .field { flex: 1; }

.code-row { display: flex; gap: 8px; }
.code-row input { flex: 1; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
.btn-check {
  flex-shrink: 0; padding: 11px 16px; background: var(--accent); color: #fff; border-radius: 10px; font-size: 13px; font-weight: 700;
}
.btn-check:disabled { opacity: 0.5; cursor: default; }
.code-verified {
  margin-top: 10px; background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--accent);
  display: flex; align-items: center; gap: 8px;
}
.code-verified b { display: block; font-size: 13.5px; }

.gender-chips { display: flex; gap: 8px; }
.gender-chips .chip {
  flex: 1; text-align: center; padding: 9px 4px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; color: var(--ink);
  background: #fff; font-weight: 500;
}
.gender-chips .chip.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.child-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #fafbfc; }
.child-card .child-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.child-card .child-head .label { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.child-card .child-head .x { font-size: 12px; color: var(--sub); }

.add-btn, .add-child-btn {
  text-align: center; padding: 11px; border: 1px dashed var(--accent); border-radius: 10px; font-size: 12.5px;
  color: var(--accent); font-weight: 700; width: 100%;
}

.submit-btn, .primary-btn {
  width: 100%; padding: 15px; border-radius: 12px; background: var(--accent); color: #fff; text-align: center;
  font-size: 15.5px; font-weight: 800; margin-top: 16px; box-shadow: 0 6px 16px rgba(58, 107, 92, 0.32);
  transition: transform .08s ease, box-shadow .08s ease;
}
.submit-btn:active, .primary-btn:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(58, 107, 92, 0.28); }
.submit-btn:disabled { opacity: 0.6; box-shadow: none; }
.submit-hint { text-align: center; font-size: 11px; color: var(--sub); margin-top: 10px; }

.entry-buttons { display: flex; flex-direction: column; gap: 12px; padding: 0 20px; }
.entry-btn { padding: 16px; border-radius: 14px; font-size: 15px; font-weight: 700; text-align: center; width: 100%; }
.entry-btn.primary { background: var(--accent); color: #fff; }
.entry-btn.secondary { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }

.error-banner { background: #fbeceb; color: var(--danger); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin: 10px 0; }
.success-banner { background: var(--accent-soft); color: var(--accent); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin: 10px 0; }
.hidden { display: none !important; }

.search-input { width: 100%; padding: 11px 12px; border: 1.5px solid #c7ced6; border-radius: 10px; font-size: 14px; background: #fff; }
.search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-results { margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.search-results .item { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--line); }
.search-results .item:last-child { border-bottom: none; }
.search-results .item:hover { background: var(--accent-soft); cursor: pointer; }

.entry-list .entry-row {
  display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: #fafbfc;
}
.entry-list .entry-row .title { flex: 1; font-size: 13px; }
.entry-list .entry-row .minutes { width: 64px; }
.entry-list .entry-row select.pref { width: 96px; }
.entry-list .entry-row .remove { color: var(--danger); font-size: 12px; flex-shrink: 0; }

.day-picker { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 16px 0; }
.day-picker button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.day-picker input[type=date] { flex: 1; }

.child-tabs { display: flex; gap: 8px; margin: 14px 16px 0; overflow-x: auto; }
.child-tabs .tab { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; white-space: nowrap; }
.child-tabs .tab.selected { background: var(--accent); color: #fff; border-color: var(--accent); }

.top-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 0; }
.top-bar .logout { font-size: 12px; color: var(--sub); }

/* ---- 자녀 확인화면 ---- */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11px; background: #f0f1f3; color: var(--sub); border-radius: 8px; padding: 4px 9px; }

.feedback-card {
  background: linear-gradient(135deg, #fff9ef, #fdf3e3); border: 1px solid #ecd9ad; border-radius: 16px;
  padding: 16px; margin: 14px 16px; text-align: center;
}
.feedback-card .emoji { font-size: 34px; }
.feedback-card .label { font-size: 13px; font-weight: 700; color: #7a5b1f; margin: 4px 0 8px; }
.feedback-card .comment { font-size: 12.5px; color: #8a6b2f; line-height: 1.5; }
.feedback-card .from { font-size: 10.5px; color: var(--sub); margin-top: 8px; }

.confirmed-badge {
  background: var(--accent-soft); color: var(--accent); border-radius: 12px; padding: 12px; text-align: center;
  font-size: 13px; font-weight: 700; margin: 14px 16px;
}

.comment-field { margin: 14px 16px; }
.comment-field label { display: block; font-size: 11.5px; color: var(--sub); margin-bottom: 5px; }
.comment-field .hint { font-size: 10px; color: #aab1bb; margin-top: 4px; }

/* ---- 축하 오버레이 ---- */
.celebrate-overlay {
  position: absolute; inset: 0; background: rgba(255, 251, 235, 0.96); z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 28px;
}
.celebrate-owl { font-size: 88px; animation: owlPulse 1.1s ease-in-out infinite; }
@keyframes owlPulse {
  0% { transform: scale(0.85) rotate(-2deg); }
  50% { transform: scale(1.18) rotate(2deg); }
  100% { transform: scale(0.85) rotate(-2deg); }
}
.celebrate-text {
  margin-top: 18px; font-size: 20px; font-weight: 800; color: #3a6b5c; text-align: center;
  animation: textBounce 0.6s ease infinite alternate;
}
@keyframes textBounce { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.celebrate-sub { font-size: 13px; color: #8a6b2f; margin-top: 6px; text-align: center; padding: 0 24px; }
.confetti {
  position: absolute; top: -10%; width: 8px; height: 14px; opacity: 0.9; pointer-events: none;
  animation-name: confettiFall; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(640px) rotate(540deg); opacity: 0.3; }
}
.celebrate-close {
  margin-top: 22px; font-size: 12px; color: #8a6b2f; border: 1px solid #d9c290; border-radius: 20px;
  padding: 7px 16px; background: #fff;
}
.celebrate-overlay.calm { background: rgba(232, 240, 237, 0.97); }
.celebrate-owl.calm-owl { animation: owlBob 1.8s ease-in-out infinite; }
@keyframes owlBob {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.celebrate-text.calm-text { color: #3a6b5c; animation: none; }

/* ---- 선생님 주간조회 화면 ---- */
.roster { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; border-bottom: 1px solid var(--line); background: #fafbfc; }
.roster-chip {
  flex-shrink: 0; text-align: center; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line); background: #fff;
  font-size: 11.5px; font-weight: 500; color: var(--ink); position: relative;
}
.roster-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.roster-chip .dot {
  position: absolute; top: 4px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger);
}

.weekbar {
  padding: 12px 14px; display: flex; align-items: center; justify-content: space-between;
  background: var(--accent-soft); font-size: 13px; font-weight: 600; border-radius: 12px; margin: 14px 16px 10px;
}
.weekbar .nav { color: var(--sub); font-weight: 400; font-size: 12px; }

.day-row {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #f0f1f3; font-size: 12px;
}
.day-row:last-child { border-bottom: none; }
.day-row .d { width: 34px; flex-shrink: 0; text-align: center; color: var(--sub); font-size: 11px; padding-top: 2px; }
.day-row .d b { display: block; font-size: 13px; color: var(--ink); }
.day-row .content { flex: 1; }
.day-row .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 3px; }
.day-row .tag { font-size: 10.5px; background: #f0f1f3; color: var(--sub); border-radius: 6px; padding: 2px 7px; }
.day-row .tag.special { background: #fdeee6; color: #b3462c; }
.day-row .tag.skip { background: #eef1f5; color: #5b6b7a; font-style: italic; }
.day-row .total { font-size: 11px; color: var(--warn); font-weight: 600; }
.day-row.empty { color: #c7ccd3; font-style: italic; }

.remark-box {
  background: #fbfaf6; border: 1px dashed #e0c088; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: #7a5b1f;
  margin-bottom: 8px; line-height: 1.5;
}
.remark-box .from { font-size: 10.5px; color: var(--sub); margin-bottom: 4px; }
.mark-read {
  display: inline-block; font-size: 11px; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 20px; padding: 4px 10px; margin-top: 2px; cursor: pointer;
}
.mark-read.done { background: var(--accent-soft); border-color: transparent; }

.emoji-group { display: flex; gap: 8px; margin-bottom: 10px; }
.emoji-opt {
  flex: 1; text-align: center; padding: 10px 4px; border: 1px solid var(--line); background: #fff;
  border-radius: 10px; font-size: 11.5px; color: var(--ink); font-weight: 500;
}
.emoji-opt .e { font-size: 19px; display: block; margin-bottom: 3px; }
.emoji-opt.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.readonly-note { font-size: 10.5px; color: #aab1bb; margin-top: 6px; }

.suggestion-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.suggestion-opt {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 12.5px;
  color: var(--ink); line-height: 1.4; cursor: pointer;
}
.suggestion-opt.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.suggestion-opt.custom { color: var(--sub); font-style: italic; }
.suggestion-opt.custom.selected { color: var(--accent); font-style: normal; }

/* ---- 학습일지 4탭(일지쓰기/DK/uTalk/OPD Plus) 공통 ---- */
.tabbar { display: flex; border-bottom: 1px solid var(--line); background: #fafbfc; }
.tabbar .tab { flex: 1; text-align: center; padding: 11px 4px; font-size: 12.5px; font-weight: 600; color: var(--ink); border-bottom: 2px solid transparent; text-decoration: none; }
.tabbar .tab.active { color: var(--accent); font-weight: 800; border-bottom-color: var(--accent); }

.datebar {
  padding: 12px 20px; display: flex; align-items: center; justify-content: space-between;
  background: var(--accent-soft); font-size: 14px; font-weight: 600; margin: 0;
}
.datebar .nav { color: var(--sub); font-weight: 400; font-size: 13px; cursor: pointer; }

.total-time-banner {
  margin: 14px 16px 0; background: var(--accent-soft); border-radius: 12px; padding: 12px 14px;
  display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--accent);
}

/* ---- DK 단어게임 ---- */
.progress-card {
  background: #fff9ef; border: 1px solid #ecd9ad; border-radius: 14px; padding: 14px 16px; margin: 14px 0; font-size: 12.5px; color: #7a5b1f;
}
.progress-card .top { display: flex; justify-content: space-between; align-items: baseline; }
.progress-card .round { font-size: 16px; font-weight: 800; color: var(--warn); }
.progress-bar { height: 8px; background: #f0e3c4; border-radius: 6px; margin-top: 8px; overflow: hidden; }
.progress-bar .fill { height: 100%; background: var(--warn); border-radius: 6px; }
.progress-card .sub { font-size: 11px; color: #8a6b2f; margin-top: 6px; }

.session-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 14px 0; }
.session-card .head { margin-bottom: 12px; }
.session-card .head .title { font-size: 14px; font-weight: 700; }

.toggle-group { display: flex; gap: 8px; margin-bottom: 12px; }
.toggle-group .opt { flex: 1; text-align: center; padding: 9px 4px; border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; color: var(--ink); font-weight: 500; background: #fff; cursor: pointer; }
.toggle-group .opt.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }

.mode-group { display: flex; gap: 8px; margin-bottom: 12px; }
.mode-group .opt { flex: 1; text-align: center; padding: 10px 4px; border: 1px solid var(--line); border-radius: 10px; font-size: 12px; color: var(--ink); font-weight: 500; background: #fff; cursor: pointer; }
.mode-group .opt .m { font-size: 11px; display: block; color: #aab1bb; margin-top: 2px; }
.mode-group .opt.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.mode-group .opt.selected .m { color: var(--accent); }

.field-row { display: flex; gap: 8px; }
.field-row .field { flex: 1; margin-bottom: 0; }

.day-summary {
  background: #fff9ef; border: 1px solid #ecd9ad; border-radius: 12px; padding: 12px 14px;
  margin: 14px 0; font-size: 12.5px; color: #7a5b1f;
}
.day-summary .rows { margin-top: 6px; font-size: 12px; color: #8a6b2f; }
.day-summary .rows div { display: flex; justify-content: space-between; padding: 2px 0; }
.day-summary .total { font-weight: 700; font-size: 15px; color: var(--warn); margin-top: 6px; display: flex; justify-content: space-between; }

.add-round-btn { margin: 18px 0 6px; text-align: center; padding: 13px; border-radius: 12px; font-size: 13.5px; font-weight: 700; }
.add-round-btn.disabled { background: #f0f1f3; color: #b7bcc4; border: 1px solid var(--line); cursor: not-allowed; }
.add-round-btn.enabled { background: var(--accent); color: #fff; cursor: pointer; }
.add-round-hint { text-align: center; font-size: 11px; color: var(--sub); margin-top: 8px; }

/* ---- uTalk / OPD Plus 공통 (Topic 카드형 입력) ---- */
.add-topic-btn { margin: 14px 0; text-align: center; padding: 12px; border: 1px dashed var(--accent); border-radius: 12px; font-size: 13px; color: var(--accent); font-weight: 700; cursor: pointer; }

.picker { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 10px 0; }
.picker .picker-title { font-size: 12px; color: var(--sub); margin-bottom: 8px; font-weight: 600; }
.picker-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #f0f1f3; font-size: 13px; cursor: pointer; }
.picker-row:last-child { border-bottom: none; }
.picker-row:hover { background: var(--accent-soft); }
.picker-row .no {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.picker-row .name { flex: 1; }
.picker-row .name .en { display: block; font-size: 10.5px; color: var(--sub); }
.picker-row .checklist-tag { font-size: 9.5px; color: #8a6b2f; background: #fff3da; border-radius: 5px; padding: 1px 5px; }
.picker-row .icons { display: flex; gap: 4px; flex-shrink: 0; }
.picker-row .icon-tag { font-size: 10px; background: #eef1ea; color: #5a6b3f; border-radius: 5px; padding: 1px 5px; }

.topic-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 14px 0; }
.topic-card .head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.topic-card .head .name { font-size: 14.5px; font-weight: 700; }
.topic-card .head .name .no { color: var(--accent); margin-right: 4px; }
.topic-card .head .en { display: block; font-size: 11px; color: var(--sub); font-weight: 400; margin-top: 2px; }
.topic-card .x { color: var(--sub); font-size: 14px; cursor: pointer; flex-shrink: 0; }
.checklist-badge { font-size: 10px; background: #eef1ea; color: #5a6b3f; border-radius: 6px; padding: 2px 7px; margin-bottom: 10px; display: inline-block; }

.phrase-row { display: flex; gap: 16px; margin-bottom: 12px; font-size: 12.5px; color: var(--sub); }
.phrase-row label { display: flex; align-items: center; gap: 6px; }
.phrase-row input[type=checkbox] { width: 16px; height: 16px; }

.game-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.game-field label { display: block; font-size: 10.5px; color: var(--sub); margin-bottom: 4px; }
.game-field .inputwrap { display: flex; align-items: center; gap: 4px; }
.game-field input { width: 100%; padding: 8px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; text-align: right; }
.game-field .max { font-size: 11px; color: var(--sub); white-space: nowrap; }

.duration-row { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid #f0f1f3; }
.duration-row label { font-size: 12px; color: var(--sub); flex-shrink: 0; }
.duration-row input { width: 70px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.duration-row span { font-size: 12px; color: var(--sub); }

/* ---- OPD Plus 체크리스트 표 ---- */
.opd-plus-table-wrap { overflow-x: auto; margin: 14px 0; border: 1px solid var(--line); border-radius: 12px; }
.opd-plus-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 12px; }
.opd-plus-table th, .opd-plus-table td { border: 1px solid var(--line); padding: 7px 9px; text-align: center; white-space: nowrap; }
.opd-plus-table th { background: var(--accent-soft); font-size: 11px; font-weight: 700; }
.opd-plus-table .col-unit { text-align: left; white-space: normal; min-width: 130px; font-size: 10.5px; color: var(--sub); }
.opd-plus-table .col-topic { text-align: left; white-space: normal; min-width: 230px; }
.opd-plus-table td input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; }

/* ---- 신청폼 (반이동/휴회/퇴회) ---- */
.type-select { display: flex; gap: 8px; margin: 14px 16px; }
.type-btn { flex: 1; text-align: center; padding: 12px 4px; border-radius: 12px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 500; color: var(--ink); background: #fff; cursor: pointer; }
.type-btn .icon { font-size: 18px; display: block; margin-bottom: 4px; }
.type-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }

.field .hint { font-size: 10.5px; color: #aab1bb; margin-top: 4px; }
.current-info { background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--accent); margin-bottom: 12px; }
.current-info b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.warn-box { background: var(--danger-soft); border: 1px solid #e3bfae; border-radius: 10px; padding: 10px 12px; font-size: 11.5px; color: var(--danger); line-height: 1.5; margin-bottom: 12px; }
.approve-note { font-size: 11px; color: var(--sub); background: #f0f1f3; border-radius: 8px; padding: 8px 10px; margin-top: 12px; }
.submit-btn.danger { background: var(--danger); }

.history-title { font-size: 13px; font-weight: 700; margin: 22px 16px 10px; }
.history-item { display: flex; align-items: center; justify-content: space-between; padding: 11px 4px; border-bottom: 1px solid #f0f1f3; font-size: 12.5px; }
.history-item:last-child { border-bottom: none; }
.history-item .htype { font-weight: 600; }
.history-item .hdate { font-size: 10.5px; color: var(--sub); margin-top: 2px; }
.status-badge { font-size: 10.5px; padding: 3px 9px; border-radius: 20px; font-weight: 700; white-space: nowrap; }
.status-badge.pending { background: #fff3da; color: #8a6b2f; }
.status-badge.partial { background: #e6eef7; color: #2f5f8a; }
.status-badge.approved { background: var(--accent-soft); color: var(--accent); }
.status-badge.rejected { background: var(--danger-soft); color: var(--danger); }

/* ---- 마스터데이터 목록/CRUD ---- */
.master-item-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid #f0f1f3; font-size: 12.5px; }
.master-item-main { flex: 1; min-width: 0; }
.master-item-title { font-weight: 600; overflow-wrap: break-word; }
.master-item-meta { color: var(--sub); font-size: 11px; margin-top: 2px; }
.master-item-actions { display: flex; gap: 6px; flex-shrink: 0; }
.master-item-actions button { font-size: 11px; color: var(--sub); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; background: #fff; }
.master-item-actions button.danger { color: var(--danger); border-color: var(--danger-soft); }
.master-item-form { background: var(--bg); border-radius: 10px; padding: 10px; margin: 8px 0; }
.master-item-form .field { margin-bottom: 8px; }
.master-item-form-actions { display: flex; gap: 8px; }
.master-item-form-actions button { flex: 1; padding: 8px; border-radius: 8px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); background: #fff; }
.master-item-form-actions .save-btn { background: var(--accent); color: #fff; border-color: var(--accent); }
.master-item-form-actions .cancel-btn { color: var(--sub); }
.master-upload-duplicates { color: var(--warn); margin-top: 4px; }

/* ---- 승인대기함 ---- */
.filterbar { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; border-bottom: 1px solid var(--line); background: #fafbfc; }
.filter-chip { flex-shrink: 0; padding: 7px 13px; border-radius: 20px; border: 1px solid var(--line); background: #fff; font-size: 12px; font-weight: 500; color: var(--ink); cursor: pointer; }
.filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.filter-chip .cnt { font-size: 10px; opacity: .85; }

.req-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 14px 0; }
.req-card .top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.req-card .who { font-size: 14.5px; font-weight: 700; }
.req-card .who .sub2 { display: block; font-size: 11px; color: var(--sub); font-weight: 400; margin-top: 2px; }
.type-tag { font-size: 10.5px; padding: 3px 9px; border-radius: 20px; font-weight: 700; flex-shrink: 0; }
.type-tag.move { background: #e6eef7; color: #2f5f8a; }
.type-tag.center { background: #efe6f7; color: #6b3f8a; }
.type-tag.leave { background: #fff3da; color: #8a6b2f; }
.type-tag.withdraw { background: var(--danger-soft); color: var(--danger); }

.detail-row { display: flex; font-size: 12.5px; padding: 4px 0; color: var(--sub); }
.detail-row .k { width: 76px; flex-shrink: 0; color: #aab1bb; }
.detail-row .v { color: var(--ink); }

.reason-box { background: #f7f8f9; border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--sub); margin-top: 8px; line-height: 1.5; }

.both-side { display: flex; gap: 8px; margin-top: 10px; }
.side-status { flex: 1; text-align: center; padding: 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.side-status.done { background: var(--accent-soft); color: var(--accent); }
.side-status.pending { background: #fff3da; color: #8a6b2f; }

.action-row { display: flex; gap: 8px; margin-top: 14px; }
.action-row .btn { flex: 1; text-align: center; padding: 11px; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; }
.btn-approve { background: var(--accent); color: #fff; }
.btn-reject { background: #fff; color: var(--danger); border: 1px solid var(--danger); }

.locked-note { margin-top: 10px; font-size: 11px; color: var(--sub); background: #f0f1f3; border-radius: 8px; padding: 8px 10px; }

.leave-return-card { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; font-size: 13px; }
.leave-return-card .btn-return { padding: 7px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; }

/* ---- 직원 공통 네비게이션 ---- */
.staff-nav { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; border-bottom: 1px solid var(--line); background: #fafbfc; }
.staff-nav a { flex-shrink: 0; padding: 8px 13px; border-radius: 20px; border: 1px solid var(--line); background: #fff; font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: none; }
.staff-nav a.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.center-switcher {
  flex-shrink: 0; padding: 7px 10px; border-radius: 20px; border: 1px solid var(--accent);
  background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700;
}

/* ---- 직원 로그인: 센터 선택 ---- */
.center-choice-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; cursor: pointer;
}
.center-choice-row:hover { border-color: var(--accent); background: var(--accent-soft); }
.center-choice-name { font-weight: 700; font-size: 14px; }
.center-choice-role { font-size: 12px; color: var(--sub); }

/* ---- 초대코드 발급 ---- */
.issued-card { background: var(--accent-soft); border-radius: 14px; padding: 16px; margin: 14px 0; text-align: center; }
.issued-card .code { font-size: 22px; font-weight: 800; color: var(--accent); letter-spacing: 1px; margin: 6px 0; }
.issued-card .meta { font-size: 11.5px; color: var(--sub); }
.send-row { display: flex; gap: 8px; margin-top: 12px; }
.send-btn { flex: 1; text-align: center; padding: 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.send-btn.sms { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
.send-btn.kakao { background: #fee500; color: #3c1e1e; }
.send-btn.copy { background: #fff; color: var(--sub); border: 1px solid var(--line); }
.preview-box {
  margin-top: 12px; background: #fff; border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px;
  font-size: 11.5px; color: var(--sub); text-align: left; line-height: 1.6;
}
.code-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; border-bottom: 1px solid #f0f1f3; font-size: 12.5px; }
.code-item:last-child { border-bottom: none; }
.code-item .c { font-weight: 700; }
.code-item .sub2 { font-size: 10.5px; color: var(--sub); margin-top: 2px; }

/* ---- 반 관리 ---- */
.class-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }
.class-card .top { display: flex; justify-content: space-between; align-items: center; }
.class-card .name { font-size: 14.5px; font-weight: 700; }
.class-card .time-badge { font-size: 11px; background: var(--accent-soft); color: var(--accent); border-radius: 20px; padding: 4px 10px; font-weight: 600; }
.class-card .meta { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--sub); flex-wrap: wrap; }
.class-card .meta span { display: flex; align-items: center; gap: 4px; }
.class-card .actions { display: flex; gap: 8px; margin-top: 10px; }
.class-card .actions .a { font-size: 11.5px; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.class-card .actions .a.ghost { color: var(--sub); border-color: var(--line); }
.add-class-btn { margin: 18px 0 6px; text-align: center; padding: 13px; border: 1px dashed var(--accent); border-radius: 12px; font-size: 13.5px; font-weight: 700; color: var(--accent); cursor: pointer; }
.day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day-grid .d { text-align: center; padding: 9px 2px; border: 1px solid var(--line); border-radius: 9px; font-size: 12px; font-weight: 500; color: var(--ink); background: #fff; cursor: pointer; }
.day-grid .d.selected { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.roster-preview { margin-top: 10px; background: #fafbfc; border: 1px solid #f0f1f3; border-radius: 10px; padding: 10px 12px; font-size: 11.5px; color: var(--sub); }
.roster-preview .names { color: var(--ink); margin-top: 4px; }

/* ---- 기존회원 학습이력 등록 ---- */
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
.toggle-row .label { font-size: 13px; font-weight: 600; }
.toggle-row .hint { font-size: 11px; color: var(--sub); margin-top: 2px; }
.switch { width: 44px; height: 26px; border-radius: 20px; background: var(--line); position: relative; flex-shrink: 0; cursor: pointer; transition: background .15s; }
.switch.on { background: var(--accent); }
.switch .knob { width: 20px; height: 20px; border-radius: 50%; background: #fff; position: absolute; top: 3px; left: 3px; transition: left .15s; }
.switch.on .knob { left: 21px; }
.unit-suffix { font-size: 12.5px; color: var(--sub); align-self: center; padding-left: 6px; white-space: nowrap; }
.row2 .field-wrap { display: flex; align-items: center; gap: 6px; }
.calc-box { background: var(--accent-soft); border-radius: 12px; padding: 14px; margin-top: 16px; font-size: 12.5px; color: var(--accent); }
.calc-box .line { display: flex; justify-content: space-between; padding: 3px 0; }
.calc-box .line.total { font-weight: 800; font-size: 15px; border-top: 1px solid #c9dcd2; margin-top: 8px; padding-top: 8px; }
.calc-box .formula { font-size: 10.5px; color: #5c8778; margin-top: 6px; }
.meta-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--sub); margin-top: 12px; }
.cumulative-preview { background: #fff9ef; border: 1px solid #ecd9ad; border-radius: 12px; padding: 12px 14px; margin-top: 14px; font-size: 12px; color: #7a5b1f; }
.cumulative-preview .rows div { display: flex; justify-content: space-between; padding: 2px 0; }
.cumulative-preview .total { font-weight: 700; font-size: 14px; color: var(--warn); margin-top: 6px; display: flex; justify-content: space-between; border-top: 1px solid #ecd9ad; padding-top: 6px; }

/* ---- 추가 학습 프로그램 / Journal 쓰기 ---- */
.ext-program-row, .journal-row {
  display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #f0f1f3; gap: 8px;
}
.ext-program-row:last-child, .journal-row:last-of-type { border-bottom: none; }
.ext-program-row label, .journal-row label { display: flex; align-items: center; gap: 8px; font-size: 13px; flex: 1; }
.ext-program-row input[type=checkbox], .journal-row input[type=checkbox] { width: 17px; height: 17px; flex-shrink: 0; }
.ext-program-row .ext-url { display: block; font-size: 10px; color: var(--sub); margin-left: 2px; }
.ext-program-row .row2 { flex-shrink: 0; }
.ext-program-row .ext-min { font-size: 12px; color: var(--sub); align-self: center; }
.journal-inputs { display: flex; gap: 10px; flex-shrink: 0; }
.journal-inputs .jf { display: flex; align-items: center; gap: 4px; }
.time-input { flex: 1; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }

/* ---- 시간 입력칸 옆 "분" 단위 표시 ---- */
.minutes-suffix-row { display: flex; align-items: center; gap: 6px; }
.minutes-suffix-row .minutes { flex: 1; }
.minutes-suffix-row .suffix { font-size: 12px; color: var(--sub); flex-shrink: 0; }

/* ---- 통계 표 ---- */
.stat-table th, .stat-table td { padding: 8px 6px; border-bottom: 1px solid #f0f1f3; text-align: center; white-space: nowrap; }
.stat-table th { color: var(--sub); font-weight: 600; font-size: 11px; }
.stat-table td:first-child, .stat-table th:first-child { text-align: left; font-weight: 600; }
.stat-table .hidden-cell { color: var(--sub); font-size: 10px; }

/* ---- 약관 동의 ---- */
.terms-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--sub); line-height: 1.5; }
.terms-row input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.terms-row a { color: var(--accent); text-decoration: underline; }