@charset "utf-8";
/* TOTOGAJA Attendance Plugin — Blue Theme Redesign v3
   Scope: only attendance plugin elements (#attendance_layer / #attendance_list)
*/

/* ---------- Theme tokens ---------- */
:root{
  --tg-b0:#f5f9ff;
  --tg-b1:#eaf2ff;
  --tg-b2:#d6e6ff;
  --tg-b3:#b8d2ff;
  --tg-b4:#7fb1ff;
  --tg-blue:#1f74ff;
  --tg-blue2:#0b58d6;
  --tg-ink:#0f172a;
  --tg-muted:#64748b;
  --tg-line:rgba(15,23,42,.10);
  --tg-line2:rgba(15,23,42,.14);
  --tg-card:#ffffff;
  --tg-shadow:0 10px 24px rgba(2, 14, 44, .10);
  --tg-shadow2:0 6px 16px rgba(2, 14, 44, .08);
  --tg-radius:18px;
  --tg-radius-sm:14px;
}

/* ---------- Layout cards ---------- */
#attendance_layer,
#attendance_list{
  width:100%;
  max-width:980px;
  margin:18px auto;
  background:var(--tg-card);
  border:1px solid var(--tg-line);
  border-radius:var(--tg-radius);
  box-shadow:var(--tg-shadow);
  overflow:hidden;
}

#attendance_layer{
  padding:16px 14px 14px;
  background:linear-gradient(180deg, rgba(31,116,255,.12), rgba(255,255,255,1) 35%);
}

#attendance_list{
  padding:18px 14px 14px;
}

/* Today pill */
#attendance_layer .today{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--tg-blue2);
  background:rgba(31,116,255,.10);
  border:1px solid rgba(31,116,255,.18);
  margin:2px auto 12px;
}

/* ---------- Month navigation (prev / current / next) ---------- */
#attendance_layer .box{
  background:linear-gradient(180deg, rgba(31,116,255,.10), rgba(31,116,255,.05));
  border:1px solid rgba(31,116,255,.18);
  border-radius:var(--tg-radius-sm);
  padding:10px 10px;
  box-shadow:var(--tg-shadow2);
  margin:8px auto 12px;
}

#attendance_layer .box ul{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  list-style:none;
  padding:0;
  margin:0;
}

#attendance_layer .box ul li.day{
  flex:1;
  text-align:center;
}

#attendance_layer .box .w{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:16px;
  color:var(--tg-ink);
  letter-spacing:.3px;
}

#attendance_layer .box ul li.top{
  width:44px;
  flex:0 0 44px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* arrow buttons (replace gif look) */
#attendance_layer a.dot{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(31,116,255,.24);
  background:rgba(255,255,255,.65);
  text-decoration:none;
  box-shadow:0 8px 18px rgba(2,14,44,.08);
}
#attendance_layer a.dot img{ display:none !important; }

#attendance_layer .box ul li.top:first-child a.dot::before{
  content:"‹";
  font-size:22px;
  line-height:1;
  color:var(--tg-blue2);
  font-weight:900;
}
#attendance_layer .box ul li.top:last-child a.dot::before{
  content:"›";
  font-size:22px;
  line-height:1;
  color:var(--tg-blue2);
  font-weight:900;
}
#attendance_layer a.dot:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.85);
}

/* ---------- Calendar table ---------- */
#attendance_layer table{
  width:100% !important;
  border:0 !important;                 /* override inline border */
  border-collapse:separate !important;
  border-spacing:8px !important;
  margin:0 auto 4px;
}

#attendance_layer th{
  height:auto !important;
  padding:10px 6px !important;
  border-radius:999px;
  background:rgba(31,116,255,.08);
  border:1px solid rgba(31,116,255,.18);
  color:var(--tg-blue2);
  font-weight:900;
  font-size:12px;
  text-align:center;
}

#attendance_layer td{
  border:1px solid var(--tg-line2) !important;  /* override inline borders */
  border-radius:16px;
  background:#fff;
  box-shadow:0 6px 14px rgba(2,14,44,.06);
  padding:10px 8px !important;
  min-height:64px;
}

/* day number */
#attendance_layer td span.sun1,
#attendance_layer td span.sat1,
#attendance_layer td span.day1,
#attendance_layer td span.sun2,
#attendance_layer td span.sat2,
#attendance_layer td span.day2{
  font-weight:900;
  font-size:12px;
  color:var(--tg-ink);
}
#attendance_layer td span.sun1,
#attendance_layer td span.sun2{ color:#ef4444; }
#attendance_layer td span.sat1,
#attendance_layer td span.sat2{ color:var(--tg-blue2); }

#attendance_layer td a{ text-decoration:none !important; }

/* attendance count / O X chips (right floating divs from PHP) */
#attendance_layer td div[style*="float:right"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  background:rgba(31,116,255,.10);
  border:1px solid rgba(31,116,255,.18);
  color:var(--tg-blue2) !important;
}
#attendance_layer td div[style*="color:#8cc464"]{
  background:rgba(34,197,94,.12) !important;
  border-color:rgba(34,197,94,.28) !important;
  color:#16a34a !important;
}
#attendance_layer td div[style*="color:#e94263"]{
  background:rgba(239,68,68,.10) !important;
  border-color:rgba(239,68,68,.22) !important;
  color:#ef4444 !important;
}

/* ---------- Attendance form/message ---------- */
#attendance_list > div:first-child{
  font-weight:900;
  font-size:16px;
  color:var(--tg-blue2);
  margin:0 0 10px;
}

/* info boxes */
#attendance_list .attendance_list_info1,
#attendance_list .attendance_list_info2,
#attendance_list .attendance_list_info3{
  border-radius:var(--tg-radius-sm);
  border:1px solid var(--tg-line);
  background:linear-gradient(180deg, rgba(31,116,255,.06), rgba(255,255,255,1));
  padding:14px 14px;
  box-shadow:var(--tg-shadow2);
}

/* textarea + submit */
#attendance_list textarea.textarea{
  width:100% !important;
  min-height:54px;
  resize:vertical;
  border-radius:14px;
  border:1px solid rgba(31,116,255,.22);
  background:rgba(245,249,255,.9);
  padding:12px 12px;
  font-size:14px;
  color:var(--tg-ink);
  outline:none;
}
#attendance_list textarea.textarea:focus{
  border-color:rgba(31,116,255,.45);
  box-shadow:0 0 0 4px rgba(31,116,255,.12);
  background:#fff;
}

#attendance_list input.btn_submit{
  width:100% !important;
  height:54px;
  border-radius:14px;
  border:0;
  background:linear-gradient(135deg, var(--tg-blue), var(--tg-blue2));
  color:#fff;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow:0 10px 20px rgba(31,116,255,.24);
  cursor:pointer;
}
#attendance_list input.btn_submit:hover{ filter:brightness(1.02); transform:translateY(-1px); }

/* info list bullets */
#attendance_list .attendance_list_info2 ul{
  list-style:none;
  padding:0;
  margin:0;
}
#attendance_list .attendance_list_info2 li{
  position:relative;
  padding-left:18px;
  margin:6px 0;
  color:var(--tg-muted);
  font-size:13px;
  line-height:1.45;
}
#attendance_list .attendance_list_info2 li::before{
  content:"•";
  position:absolute;
  left:6px;
  top:0;
  color:rgba(31,116,255,.8);
  font-weight:900;
}

/* ---------- Attendance table (header alignment fix) ---------- */
#attendance_list table{
  width:100% !important;
  margin:10px auto 0;
  border-collapse:separate !important;
  border-spacing:0 !important;
  table-layout:fixed;
  background:#fff;
  border:1px solid var(--tg-line);
  border-radius:var(--tg-radius-sm);
  overflow:hidden;
  box-shadow:var(--tg-shadow2);
}

/* remove old separator rows made with bgcolor tds */
#attendance_list table td[bgcolor]{
  display:none !important;
}

/* header row (natural centered) */
#attendance_list tr[height="40"] td{
  display:table-cell !important;
  vertical-align:middle;
  text-align:center;
  padding:12px 8px !important;
  background:linear-gradient(180deg, rgba(31,116,255,.10), rgba(31,116,255,.06));
  color:var(--tg-blue2);
  font-weight:900;
  border-bottom:1px solid rgba(31,116,255,.18);
  border-right:1px solid rgba(31,116,255,.14);
  border-radius:0 !important; /* kill pill look */
  white-space:nowrap;
}
#attendance_list tr[height="40"] td:last-child{ border-right:0; }

/* data cells */
#attendance_list td.list{
  padding:12px 10px !important;
  border-bottom:1px solid var(--tg-line);
  color:var(--tg-ink);
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#attendance_list tr[height="35"] td:last-child{ border-right:0; }

#attendance_list td.bgcolor0{ background:#fff; }
#attendance_list td.bgcolor1{ background:rgba(245,249,255,.85); }

/* nickname column */
#attendance_list td.name_attendance,
#attendance_list td.name_attendance_52{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* "no data" */
#attendance_list span.no{
  display:inline-block;
  padding:14px 12px;
  border-radius:14px;
  border:1px dashed rgba(31,116,255,.28);
  background:rgba(31,116,255,.06);
  color:var(--tg-blue2);
  font-weight:800;
}

/* hide "한마디" column on smaller screens to keep table centered */
@media (max-width: 860px){
  #attendance_list .attendance_hidden{ display:none !important; }
}

/* tighter mobile sizing */
@media (max-width: 420px){
  #attendance_layer{ padding:14px 10px 10px; }
  #attendance_layer table{ border-spacing:6px !important; }
  #attendance_layer td{ padding:8px 6px !important; min-height:56px; }
  #attendance_list{ padding:14px 10px 10px; }
  #attendance_list tr[height="40"] td{ padding:10px 6px !important; font-size:12px; }
  #attendance_list td.list{ padding:10px 6px !important; font-size:12px; }
  #attendance_list textarea.textarea{ min-height:48px; font-size:13px; }
  #attendance_list input.btn_submit{ height:48px; }
}

/* ultra-narrow: hide "개근" to avoid overflow */
@media (max-width: 360px){
  #attendance_list table tr td:nth-child(6){ display:none !important; }
}