/* theme.css — 보노보 출퇴근 관리
 * 모바일 = 하늘색 배경 / PC(900px↑) = 기본(다크) 테마
 */
:root{
  --sky:#4FB3E8; --sky-2:#8FD3F4; --sky-deep:#1E6FA8;
  --card:#ffffff; --ink:#12303f; --ink-dim:#4a6b7c; --line:#dff0fa;
  --field:#ffffff; --field-ink:#12303f;
  --good:#0f9d58; --bad:#d93025; --warn:#e08a00; --me:#7b3fe4; --ot:#1a73e8;
  --radius:16px; --shadow:0 2px 10px rgba(14,74,110,.10);
}
@media (min-width:900px){
  :root{
    --card:#131a26; --ink:#eef3fb; --ink-dim:#b8c6dc; --line:#31405c;
    --field:#1a2333; --field-ink:#e6ecf5;
    --good:#35c47a; --bad:#ef5b6b; --warn:#e0a63e; --me:#a98bff; --ot:#8ab4ff;
    --sky:#4f8cff; --sky-2:#2b3b57; --sky-deep:#0b0f17;
    --shadow:0 2px 14px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky-2) 260px,#eaf6fc 100%);
  background-attachment:fixed; color:var(--ink);
  font:16px/1.5 -apple-system,"Segoe UI",Roboto,"Malgun Gothic",sans-serif; min-height:100vh;
}
@media (min-width:900px){ body{background:var(--sky-deep)} }
.hidden{display:none !important}

.appbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;color:#fff;
  position:sticky;top:0;z-index:5;background:linear-gradient(180deg,rgba(20,90,135,.94),rgba(20,90,135,.55));
  backdrop-filter:blur(6px)}
@media (min-width:900px){.appbar{background:rgba(11,15,23,.92)}}
.brand{display:flex;align-items:center;gap:9px;min-width:0}
.brand h1{font-size:clamp(25px,3.8vw,35px);font-weight:800;letter-spacing:-.2px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo{font-size:clamp(21px,3.4vw,27px)}
@media (max-width:430px){.brand h1{font-size:clamp(23px,6.4vw,29px)}.logo{font-size:23px}}
.me{display:flex;align-items:center;gap:6px;flex:0 0 auto}
/* 로그인 후에는 목록 대신 이름만 (개인 폰 = 한 번 고르면 끝) */
.who{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);color:#12455f;
  border-radius:999px;padding:7px 16px;font-size:14.5px;font-weight:800;cursor:pointer;white-space:nowrap;min-width:4.5em}
@media (min-width:900px){.who{background:#1a2333;color:#e6ecf5}}
.dev-actions{display:grid;gap:9px;margin:10px 0 4px}
.dev-actions .ib-go,.dev-actions .bigbtn{width:100%;padding:13px 16px;font-size:15px;border-radius:12px;text-align:center}
.bigbtn{background:var(--field);color:var(--field-ink);border:1px solid var(--line);font-weight:700;cursor:pointer;font-family:inherit}
@media (max-width:430px){.me{font-size:12px}}

/* 이름 선택 콤보박스 — 흰 배경에 흰 글씨로 보이던 문제 수정 */
.picker{
  background:var(--field); color:var(--field-ink); border:1px solid var(--line);
  border-radius:9px; padding:6px 8px; font-size:13.5px; font-weight:600; max-width:9.5em;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  text-align:center; text-align-last:center;      /* 이름 가운데 정렬 */
}
.picker option{background:var(--field); color:var(--field-ink)}
@media (max-width:430px){.picker{font-size:12.5px;padding:5px 6px}}
/* 다크(P C) 헤더 위에서는 밝은 글씨가 자연스럽다 */
@media (min-width:900px){.picker{background:#1a2333;color:#e6ecf5;border-color:#33415c}}

main{max-width:1120px;margin:0 auto;padding:14px 14px 40px;display:grid;gap:14px}
main > .card,main > section{min-width:0}      /* 내용(표) 때문에 화면이 좌우로 넓어지던 문제 */
@media (min-width:900px){main{grid-template-columns:1fr 1fr;align-items:start}
  main > .card.wide{grid-column:1/-1}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.card-head h2{font-size:16px;margin:0}
.date{color:var(--ink-dim);font-size:13px}
.pill{font-size:12px;padding:3px 10px;border-radius:999px;background:#e8f4fb;color:var(--sky-deep)}
@media (min-width:900px){.pill{background:#1a2333;color:#9ec7ff}}
.pill.on{background:#e6f7ee;color:var(--good)}
.pill.done{background:#f0eefc;color:var(--me)}
.pill.absent{background:#fdecec;color:var(--bad)}

.twocol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.86fr);gap:10px}
@media (min-width:900px){.twocol{gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,0.8fr)}}
.side{border-left:1px solid var(--line);padding:0 0 0 10px;font-size:13px}
@media (min-width:900px){.side{padding:0 0 0 18px}}
.side h3{font-size:13px;margin:0 0 8px;color:var(--ink-dim)}
.leave-row{display:flex;justify-content:space-between;gap:6px 8px;flex-wrap:wrap;padding:4px 0;border-bottom:1px dashed var(--line)}
.leave-row b{font-weight:700}
.leave-row.zero b{color:var(--bad)}
.leave-row small{display:block;width:100%;color:var(--ink-dim);font-size:11px}
.leave-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 16px;margin-top:8px}
.sub{font-size:11.5px;color:var(--ink-dim);font-weight:400;margin-left:4px}
.trow{display:flex;gap:8px;align-items:baseline;padding:3px 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.trow:last-child{border-bottom:0}
.trow b{font-size:12px;min-width:64px;color:var(--ink-dim);font-weight:600}
@media (min-width:900px){.trow b{font-size:13px;min-width:88px}}
.trow .chip{font-size:12px}
#todayCard .chip{font-size:12px;padding:2px 7px}
@media (min-width:900px){#todayCard .chip{font-size:13px;padding:2px 9px}}
.att-table{overflow-x:auto}
.att-table table{width:100%;border-collapse:collapse;font-size:12.5px}
.att-table th,.att-table td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:right;white-space:nowrap}
.att-table th:first-child,.att-table td:first-child{text-align:left;font-weight:600}
.att-table th{color:var(--ink-dim);font-weight:600;font-size:12px}
.att-table td.bad{color:var(--bad);font-weight:700}
#todayCard .side{padding-top:10px}
@media (min-width:900px){#todayCard .side{padding:0 0 0 18px}}

.roles{display:grid;gap:6px}
.role{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.role:last-child{border-bottom:0}
.role b{font-size:12px;min-width:64px;color:var(--ink-dim);font-weight:600}
@media (min-width:900px){.role b{font-size:13px;min-width:88px}}
.chip{display:inline-block;margin:0 4px 3px 0;padding:2px 9px;border-radius:999px;background:#eef7fd;border:1px solid var(--line);font-size:13px}
@media (min-width:900px){.chip{background:#1a2333}}
.chip.off{background:#fdecec;color:var(--bad);border-color:#f6cfcf}
.chip.rep{background:#fff4e0;color:#8a5a00;border-color:#f3ddb4}
@media (min-width:900px){.chip.rep{background:#2a2413;color:#e9c579;border-color:#5a4a1e}}
.chip.me{background:#f1ecff;color:var(--me);border-color:#ded2ff;font-weight:700}
.chip.none{background:transparent;border:0;color:var(--ink-dim)}
.memo{margin:6px 0 0;font-size:13px;color:var(--ink-dim);white-space:pre-line}
.warnbox{margin-top:10px;border:1px solid #f4d9a6;background:#fff8e8;color:#8a5a00;border-radius:12px;padding:10px 12px;font-size:13px}
@media (min-width:900px){.warnbox{background:#2a2413;color:#e9c579;border-color:#5a4a1e}}

.plan{font-size:13px;color:var(--ink-dim);margin:0 0 8px}
.punch-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.big{border:0;border-radius:14px;padding:18px 10px;font-size:18px;font-weight:700;color:#fff;cursor:pointer}
.big.in{background:linear-gradient(180deg,#22b573,#0f9d58)}
.big.out{background:linear-gradient(180deg,#5b8def,#3d6fd8)}
.big:disabled{opacity:.45;cursor:default}
.small{margin-top:10px;font-size:12.5px;padding:7px 10px;width:100%}
.hint{font-size:12.5px;color:var(--ink-dim);margin:10px 0 0}
.log{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px;font-size:13px}
.log li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding-bottom:4px}
.log .k{color:var(--ink-dim)}

.nav{display:flex;align-items:center;gap:6px}
.ghost{background:transparent;border:1px solid var(--line);color:inherit;border-radius:9px;padding:5px 11px;font-size:13px;cursor:pointer}
.ghost:hover{border-color:var(--sky)}
a.ghost{text-decoration:none;display:inline-block;line-height:1.35}
.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:8px}
.dow{text-align:center;font-size:12px;color:var(--ink-dim);padding-bottom:2px}
.day{border:1px solid var(--line);border-radius:10px;min-height:62px;padding:4px 5px;font-size:11.5px;
  background:transparent;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.day .n{font-weight:700;font-size:12.5px}
.day .t{font-size:10px;line-height:1.2;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:900px){.day .t{font-size:11.5px}.day .a{font-size:11px}.dow{font-size:12.5px}}
.month-foot{display:flex;justify-content:flex-end;margin-top:10px}
.view-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 2px;font-size:13px;color:var(--ink-dim)}
.view-row .picker{max-width:11em}
.view-hint{font-size:12px}
.msg-grid{display:grid;gap:14px}
@media (min-width:900px){.msg-grid{grid-template-columns:1fr 1fr}}
.msg-box h3{font-size:13.5px;margin:0 0 6px;color:var(--ink-dim)}
.msg-box textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  background:var(--field);color:var(--field-ink);font:inherit;font-size:14px;resize:vertical}
.msg-box textarea::placeholder{color:var(--ink-dim)}
.msg-box .ib-go{margin-top:8px;width:100%}
.msg-box.sent .ib-go{background:#0f9d58}
.notice{flex:1 0 100%;margin:2px 0 0;font-size:11.5px;opacity:.85;text-align:center}
@media (min-width:900px){.notice{text-align:left}}

/* 접속 현황 그래프 (라이브러리 없이 막대) */
.visit-list{display:grid;gap:7px}
.visit-row{display:grid;grid-template-columns:70px 1fr 54px;gap:8px;align-items:center;font-size:13px}
.visit-row .bar{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--sky),var(--sky-2));min-width:4px}
@media (min-width:900px){.visit-row .bar{background:linear-gradient(90deg,#4f8cff,#2b3b57)}}
.visit-row .n{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visit-row .c{text-align:right;color:var(--ink-dim);font-size:12px}
.visit-row.me-row .n{color:var(--me)}
.day .a{font-size:9.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day .a.ot{color:var(--ot)}
.day .a.late{color:var(--bad)}
.day.off{border-color:#efc9c9}
.day.off .n{color:var(--bad)}
.day.me{border-color:var(--me);box-shadow:inset 0 0 0 1px var(--me)}
.day.meoff{border-style:dashed;border-color:var(--bad)}       /* 내가 쉬는 날 */
.day.td.meoff,.day.sel.meoff{border-color:var(--bad)}          /* 오늘/선택이어도 빨간 점선 유지 */
.day.td{border-width:2px;border-color:var(--sky);background:#eaf6fd}
@media (min-width:900px){.day.td{background:#17263a}}
.day.warn{border-color:var(--warn)}
.day.sel{outline:2px solid var(--sky);outline-offset:1px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-dim);margin-top:4px}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.sw.off{background:var(--bad)} .sw.work{background:var(--good)}
.sw.me{background:var(--me)} .sw.warn{background:var(--warn)}
.detail{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;font-size:13.5px;white-space:pre-line}
.reflist{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px;max-height:340px;overflow:auto}
.reflist li{padding:6px 0;border-bottom:1px dashed var(--line)}
.reflist li b{color:var(--ink-dim);font-weight:600;margin-right:6px;font-size:12px}
.empty,.skeleton{color:var(--ink-dim);font-size:13.5px}
.foot{max-width:1120px;margin:0 auto;padding:0 16px 90px;color:rgba(0,0,0,.45);font-size:11.5px;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap}
@media (min-width:900px){.foot{color:#93a1b8}}

.installbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:20;background:#111826;color:#fff;
  border:1px solid #2a3550;border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.35)}
@media (min-width:900px){.installbar{left:20px;right:auto;bottom:20px;max-width:400px}}
.ib-text{display:flex;flex-direction:column;gap:2px;font-size:12.5px;flex:1}
.ib-text b{font-size:13.5px}
.ib-text span{color:#9aa8c2}
.ib-go{background:#3d8bfd;color:#fff;border:0;border-radius:10px;padding:9px 16px;font-weight:700;cursor:pointer}
.ib-x{background:transparent;border:0;color:#9aa8c2;font-size:16px;cursor:pointer}

/* 앱 전체 잠금 */
.gate{position:fixed;inset:0;z-index:100;background:linear-gradient(180deg,#1E6FA8,#0b0f17);
  display:flex;align-items:center;justify-content:center;padding:20px}
.gate-box{background:#131a26;border:1px solid #2a3550;border-radius:18px;padding:26px 22px;
  width:100%;max-width:340px;text-align:center;color:#e6ecf5;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.gate-box .logo{font-size:34px}
.gate-box h2{margin:8px 0 6px;font-size:17px}
.gate-box p{margin:0 0 14px;font-size:13px;color:#93a1b8}
.gate-box input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #33415c;
  background:#0e1520;color:#e6ecf5;font-size:16px;text-align:center;margin-bottom:10px}
.gate-box .ib-go{width:100%;padding:12px}
.gate-msg{color:#ef5b6b !important;margin-top:10px !important;min-height:1em}
.gate-box select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #33415c;
  background:#0e1520;color:#e6ecf5;font:inherit;font-size:15px;margin-bottom:9px}
.gate-box .ib-go{margin-top:4px}
.filelab{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px dashed var(--line);
  border-radius:12px;padding:10px 12px;font-size:14px;cursor:pointer;background:var(--field);color:var(--field-ink)}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:13.5px}
.it-tools{display:flex;gap:6px;margin:10px 0 4px}
.it-tools input{flex:1;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--field);color:var(--field-ink);font:inherit;font-size:13.5px}
.it-list{display:grid;gap:6px}
.it-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13.5px}
.it-row .k{font-weight:800}
.it-row .sub{color:var(--ink-dim);font-size:12px}
.it-row.taken{opacity:.62}
.it-preview img{max-width:220px;border-radius:10px;border:1px solid var(--line);margin:6px 0}
.apply-form{display:grid;gap:8px;margin-bottom:10px}
@media (min-width:900px){.apply-form{grid-template-columns:9em 11em 1fr auto;align-items:start}}
.apply-form select,.apply-form input[type=date],.apply-form textarea{border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;background:var(--field);color:var(--field-ink);font:inherit;font-size:14px}
.apply-list,.inbox-list{display:grid;gap:6px;margin-top:8px}
.ap-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13.5px}
.ap-row .k{font-weight:800}
.ap-row .st{font-weight:800;border-radius:999px;padding:2px 9px;font-size:12px}
.st.대기{background:#fff3d6;color:#8a5a00}
.st.승인{background:#e2f6e6;color:#136b2c}
.st.거절{background:#fde8ea;color:#a3162a}
.ap-row .sub,.inbox-row .sub{color:var(--ink-dim);font-size:12px}
.inbox-row{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13.5px}
.inbox-row .txt{white-space:pre-line;margin-top:4px}
.inbox-row.mine{border-style:dashed}

.pin-list{margin-top:10px;display:grid;gap:6px}
.pin-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px}
.pin-row b{font-size:17px;letter-spacing:2px;color:var(--sky);font-variant-numeric:tabular-nums}

/* 퇴근 완료 토스트 */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:30;
  background:#111826;color:#fff;border:1px solid #2a3550;border-radius:14px;
  padding:14px 18px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.4);
  max-width:min(88vw,420px);text-align:center;line-height:1.5;animation:toastin .25s ease-out}
.toast b{font-size:15px}
.toast .t-sub{display:block;color:#9aa8c2;font-size:12.5px;margin-top:4px}
@keyframes toastin{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}


/* ---------- 도트 코기·고양이 (옆모습 · 걷기 · 고양이 앞 / 코기 뒤) ---------- */
.pet-bar{position:relative;height:36px;margin:2px auto 0;max-width:1120px;overflow:hidden;pointer-events:none}
.pet{position:absolute;bottom:1px;left:-50px;height:30px;width:46px;image-rendering:pixelated;will-change:transform}
.pet-cat{animation:pet-go 26s linear infinite;animation-delay:-14s}
.pet-dog{animation:pet-go 26s linear infinite;animation-delay:-11s}
.pg-body{animation:pet-sway .5s steps(2,end) infinite}
.pg-legF{animation:pet-walk .5s steps(2,end) infinite}
.pg-legB{animation:pet-walk .5s steps(2,end) infinite;animation-delay:-.25s}
@keyframes pet-go{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 56px))}}
@keyframes pet-sway{0%{transform:translateY(0)}50%{transform:translateY(-1px)}100%{transform:translateY(0)}}
@keyframes pet-walk{0%{transform:translateX(-1.6px)}50%{transform:translateX(1.6px)}100%{transform:translateX(-1.6px)}}
@media (prefers-reduced-motion: reduce){.pet,.pg-body,.pg-legF,.pg-legB{animation:none}}