@import url('https://fonts.googleapis.com/css2?family=Jua&family=Gowun+Dodum&display=swap');

html, body { margin: 0; padding: 0; background: #EAF6F3; min-height: 100vh; }

.po-app {
  --bg-a: #FBF8F1;
  --bg-b: #EAF6F3;
  --ink: #2B2D3E;
  --ink-soft: #6B7280;
  --teal: #3FB8AF;
  --teal-deep: #2C948C;
  --violet: #8B7FD1;
  --violet-deep: #6E62B8;
  --coral: #FF9166;
  --coral-deep: #F4763F;
  --card: #FFFFFF;
  --line: #ECE7DC;
  --sun: #F4763F;
  --sat: #6E62B8;
  --mascot-blue: #29ABE2;
  font-family: 'Gowun Dodum', sans-serif;
  color: var(--ink);
  background: linear-gradient(160deg, var(--bg-a) 0%, var(--bg-b) 100%);
  padding: 22px 16px 32px;
  min-height: 100vh;
  box-sizing: border-box;
}
.po-app * { box-sizing: border-box; }
.po-display { font-family: 'Jua', sans-serif; }
.po-wrap { max-width: 460px; margin: 0 auto; }

.po-brand { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:18px; }
.po-brand-logo { width:38px; height:38px; }
.po-brand-title { font-size: 21px; letter-spacing: -0.3px; }
.po-brand-sub { text-align:center; color:var(--ink-soft); font-size:13px; margin:-12px 0 20px; }

.po-mascot { display:block; }
.po-mascot-card { display:flex; align-items:center; gap:14px; padding:16px 20px; }
.po-mascot-lg { width:56px; height:56px; flex:none; }
.po-mascot-msg { font-size:14.5px; font-weight:600; color:var(--ink); }

.po-card {
  background: var(--card);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(60,50,30,0.07);
  margin-bottom: 16px;
  border: 1px solid var(--line);
}

.po-tabs { display:flex; background:#F1EEE4; border-radius:14px; padding:4px; margin-bottom:16px; }
.po-tab { flex:1; text-align:center; padding:10px 0; border-radius:11px; font-size:14px; cursor:pointer; color:var(--ink-soft); font-weight:600; user-select:none; transition: all .15s ease; }
.po-tab.po-active { background:var(--card); color:var(--ink); box-shadow:0 2px 6px rgba(0,0,0,0.06); }

.po-field { margin-bottom: 12px; }
.po-field label { display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:6px; }
.po-field input {
  width:100%; padding:12px 14px; border-radius:13px; border:1.5px solid var(--line);
  font-family:'Gowun Dodum', sans-serif; font-size:15px; outline:none; background:#FCFBF8; color: var(--ink);
  transition: border-color .15s ease;
}
.po-field input:focus { border-color: var(--teal); background:#fff; }

.po-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 18px; border-radius:999px; border:none; cursor:pointer;
  font-family:'Gowun Dodum', sans-serif; font-weight:700; font-size:15px;
  transition: transform .12s ease, box-shadow .12s ease; width:100%;
}
.po-btn:active { transform: scale(0.97); }
.po-btn:disabled { opacity:0.6; cursor:default; }
.po-btn-primary { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); color:#fff; box-shadow:0 6px 14px rgba(63,184,175,0.35); }
.po-btn-admin { background: linear-gradient(135deg, #4B5568, #2B2D3E); color:#fff; box-shadow:0 6px 14px rgba(43,45,62,0.28); }
.po-btn-ghost { background:#F1EEE4; color:var(--ink); }
.po-btn-sm { width:auto; padding:8px 14px; font-size:13px; }
.po-btn-danger { background:#FDEDEA; color:#C6402D; }

.po-error { color:#C6402D; font-size:13px; margin: 4px 0 10px; }
.po-success { background:#EAF6F3; color:var(--teal-deep); border-radius:12px; padding:10px 14px; font-size:13.5px; margin-bottom:14px; display:flex; align-items:center; gap:6px; }

.po-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.po-hello { font-size:16px; }
.po-hello b { font-family:'Jua', sans-serif; font-size:18px; }
.po-logout { font-size:12.5px; color:var(--ink-soft); background:none; border:none; cursor:pointer; text-decoration:underline; padding:4px; }

.po-check-row { display:flex; flex-direction:column; gap:12px; margin-bottom:6px; }
.po-check-card { border-radius:18px; padding:16px; display:flex; align-items:center; gap:12px; border:1.5px solid var(--line); }
.po-check-card.po-preortho { background: linear-gradient(135deg, #F1FBFA, #ffffff); }
.po-check-card.po-mft { background: linear-gradient(135deg, #F5F3FC, #ffffff); }
.po-check-icon { font-size:26px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:14px; flex:none; }
.po-preortho .po-check-icon { background:#DFF4F1; }
.po-mft .po-check-icon { background:#E7E3F8; }
.po-check-text { flex:1; font-size:14.5px; line-height:1.4; }
.po-check-text small { display:block; color:var(--ink-soft); font-size:12px; margin-top:2px; }
.po-yes-btn {
  flex:none; border:none; border-radius:999px; padding:10px 16px; font-weight:700; font-size:13.5px;
  cursor:pointer; font-family:'Gowun Dodum', sans-serif; color:#fff;
}
.po-preortho .po-yes-btn { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); }
.po-mft .po-yes-btn { background: linear-gradient(135deg, var(--violet), var(--violet-deep)); }
.po-yes-btn:active { transform: scale(0.95); }
.po-yes-btn:disabled { opacity:0.6; }
.po-done-badge { flex:none; font-size:13px; font-weight:700; color:var(--teal-deep); display:flex; align-items:center; gap:4px; }
.po-mft .po-done-badge { color:var(--violet-deep); }

.po-section-title { font-size:15px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:6px; }

/* smile gauge */
.po-gauge-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.po-gauge-count { font-family:'Jua', sans-serif; font-size:15px; color:var(--coral-deep); }
.po-teeth-row { display:flex; gap:4px; margin-bottom:10px; }
.po-tooth { flex:1; height:22px; border-radius:50% 50% 35% 35% / 65% 65% 30% 30%; background:#F1EEE4; border:1.5px solid var(--line); }
.po-tooth.po-filled { background: linear-gradient(160deg, var(--teal), var(--violet)); border-color: transparent; box-shadow: 0 2px 5px rgba(110,98,184,0.35); }
.po-gauge-hint { font-size:12.5px; color:var(--ink-soft); }
.po-reward-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.po-reward-chip { display:flex; align-items:center; gap:5px; background:#FFF6ED; border:1px solid #FBE0C6; border-radius:999px; padding:6px 12px; font-size:12.5px; color:#8A5A2A; }
.po-reward-chip.po-given { background:#EAF6F3; border-color:#CDEDE7; color:var(--teal-deep); }

/* calendar */
.po-cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.po-cal-nav { background:#F1EEE4; border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px; color:var(--ink); }
.po-cal-nav:disabled { opacity:0.3; cursor:default; }
.po-cal-title { font-family:'Jua', sans-serif; font-size:16px; }
.po-cal-grid { display:grid; grid-template-columns: repeat(7, 1fr); gap:5px; }
.po-cal-dow { text-align:center; font-size:11.5px; color:var(--ink-soft); padding-bottom:4px; }
.po-cal-dow.po-sun { color: var(--sun); }
.po-cal-dow.po-sat { color: var(--sat); }
.po-cal-cell {
  aspect-ratio: 1; border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:12px; background:#F8F6F0; border:1.5px solid transparent; color:var(--ink-soft); position:relative;
}
.po-cal-cell.po-blank { background:transparent; }
.po-cal-cell.po-future { color:#D8D4C8; }
.po-cal-cell.po-empty-day { background:#F8F6F0; }
.po-cal-cell.po-partial { background:#FDF3E9; color:#8A5A2A; font-weight:700; }
.po-cal-cell.po-complete { background: linear-gradient(160deg, var(--teal), var(--violet)); color:#fff; font-weight:700; }
.po-cal-cell.po-today { border-color: var(--coral); }
.po-cal-cell .po-dot { width:5px; height:5px; border-radius:50%; margin-top:2px; }
.po-cal-cell.po-clickable { cursor:pointer; }
.po-cal-cell.po-clickable:hover { border-color: var(--teal); }
.po-cal-legend { display:flex; gap:14px; margin-top:12px; font-size:11.5px; color:var(--ink-soft); flex-wrap:wrap; }
.po-cal-legend span { display:inline-flex; align-items:center; gap:5px; }
.po-legend-swatch { width:10px; height:10px; border-radius:4px; display:inline-block; }

/* admin */
.po-search { position:relative; margin-bottom:14px; }
.po-search input { padding-left:36px; }
.po-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-soft); font-size:14px; }
.po-plist { display:flex; flex-direction:column; gap:8px; }
.po-prow {
  display:flex; align-items:center; gap:10px; background:#FAF8F3; border:1.5px solid var(--line); border-radius:14px; padding:10px 12px; cursor:pointer;
}
.po-prow:hover { border-color: var(--teal); }
.po-prow-status { width:10px; height:10px; border-radius:50%; flex:none; }
.po-status-complete { background: var(--teal); }
.po-status-partial { background: var(--coral); }
.po-status-none { background: #D8D4C8; }
.po-prow-name { font-weight:700; font-size:14.5px; }
.po-prow-phone { font-size:12px; color:var(--ink-soft); }
.po-prow-count { margin-left:auto; font-size:12.5px; color:var(--ink-soft); font-family:'Jua', sans-serif; }
.po-empty-state { text-align:center; color:var(--ink-soft); font-size:13.5px; padding:24px 0; }

.po-back { background:none; border:none; color:var(--ink-soft); font-size:13px; cursor:pointer; margin-bottom:10px; display:flex; align-items:center; gap:4px; padding:2px; }
.po-detail-name { font-family:'Jua', sans-serif; font-size:19px; margin-bottom:2px; }
.po-detail-phone { font-size:12.5px; color:var(--ink-soft); margin-bottom:16px; }

.po-edit-panel { background:#FAF8F3; border-radius:16px; padding:14px; margin-top:12px; }
.po-edit-date { font-weight:700; font-size:14px; margin-bottom:10px; }
.po-edit-row { display:flex; gap:10px; }
.po-edit-toggle {
  flex:1; border-radius:12px; border:1.5px solid var(--line); background:#fff; padding:10px; text-align:center;
  cursor:pointer; font-size:13px; font-weight:600; color:var(--ink-soft);
}
.po-edit-toggle.po-on.po-t-preortho { background: linear-gradient(135deg, var(--teal), var(--teal-deep)); color:#fff; border-color:transparent; }
.po-edit-toggle.po-on.po-t-mft { background: linear-gradient(135deg, var(--violet), var(--violet-deep)); color:#fff; border-color:transparent; }

.po-reward-admin-row { display:flex; align-items:center; justify-content:space-between; background:#FAF8F3; border-radius:12px; padding:10px 12px; margin-bottom:6px; font-size:13px; }
.po-reward-check { width:20px; height:20px; cursor:pointer; accent-color: var(--teal); }

.po-add-admin { margin-top:6px; }
.po-inline-form { display:flex; gap:8px; }
.po-inline-form input { flex:1; }
.po-msg { font-size:12.5px; color:var(--teal-deep); margin-top:6px; }

.po-danger-zone { margin-top:18px; text-align:center; }
.po-danger-zone button { color:#C6402D; background:none; border:none; font-size:12.5px; cursor:pointer; text-decoration:underline; }

.po-config-error { max-width:460px; margin:60px auto; text-align:center; color:#C6402D; font-size:14px; line-height:1.6; padding:0 16px; }

@media (max-width: 380px) {
  .po-check-card { flex-wrap:wrap; }
  .po-yes-btn { width:100%; }
}