/* 공통 (기본 글꼴·버튼·입력칸·사이드바·카드·팝업·표 기본) */
:root{--p:#e0587e;--pl:#fdeef3;--bg:#f6f4f5;--line:#ebe7e9;--sub:#8a8387;--m:#4a7bd8;--f:#e0587e;--warn:#d9822b}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:#222;font:15px/1.45 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
button,input,select,textarea{font-family:inherit}
input,select,textarea{width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:16px;color:#222}
textarea{min-height:64px;resize:vertical}
button{border:0;border-radius:8px;padding:9px 14px;background:#eee;cursor:pointer;font-size:14px;color:#222}
.btn-p{background:var(--p);color:#fff}
.btn-d{background:#fff;color:#c33;border:1px solid #f0c9c9}
.busy .modal .acts button{pointer-events:none;opacity:.6}
.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px}
.login input{max-width:220px;text-align:center;font-size:24px;letter-spacing:8px}
/* 사이드바 */
#app{display:flex;min-height:100vh}
.side{position:sticky;top:0;height:100vh;width:210px;flex:0 0 210px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px}
.brand{font-size:20px;font-weight:800;color:var(--p);padding:4px 10px 18px}
.brand span{color:var(--sub);font-weight:500;font-size:14px;margin-left:6px}
.side nav{display:flex;flex-direction:column;gap:4px}
.grp{font-size:13px;font-weight:800;color:#2b2729;padding:16px 12px 6px;letter-spacing:-.2px}
.grp:first-child{padding-top:4px}
.side nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:9px 12px 9px 26px;color:#444;font-size:14.5px}
.side nav button:hover{background:#f6f2f4}
.side nav button.on{background:var(--pl);color:var(--p);font-weight:700}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.side-foot #who{padding:0 4px 4px}
.side-foot button{width:100%;padding:8px;font-size:13px}
.side-foot .ic{display:none}
@media (max-width:760px){.side-foot .ic{display:inline-block;vertical-align:middle}}
#view{flex:1;min-width:0;padding:16px 24px 20px}
/* 이모티콘 복사 (사이드바 아래) */
.emobar{margin-top:auto;padding:10px 4px 8px;border-top:1px solid var(--line)}
.emobar .eh{font-size:12px;font-weight:700;color:var(--sub);padding:0 6px 6px}
.emol{display:flex;flex-wrap:wrap;gap:1px}
.emo{flex:0 0 auto;width:30px;height:30px;padding:0;font-size:18px;line-height:30px;border-radius:7px;background:none;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.emo:hover{background:#f6f2f4}
.emo.cp{background:var(--pl);transform:scale(1.15)}
.emo.my{position:relative}
.emo.my::after{content:"";position:absolute;right:2px;bottom:2px;width:5px;height:5px;border-radius:50%;background:var(--p)}
.emoadd{display:block;width:100%;margin-top:6px;padding:6px 0;font-size:12.5px;border-radius:8px;background:#fff;border:1px dashed #d9cfd4;color:#6b6468}
.emoadd:hover{border-color:var(--p);color:var(--p)}
.side-foot{margin-top:0}
/* 공통 */
.bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;align-items:center}
.bar>*{flex:1 1 120px}
.bar .grow{flex:2 1 220px}
.seg{display:flex;gap:4px;flex:0 0 auto}
.seg button{padding:7px 12px}
.seg button.on{background:var(--p);color:#fff}
.chk{display:flex;align-items:center;gap:4px;font-size:13px;white-space:nowrap}
.chk input{width:auto}
.count{font-size:13px;color:var(--sub);margin:4px 2px 8px}
.card{background:#fff;border-radius:12px;padding:12px 14px;margin-bottom:8px;border:1px solid var(--line);cursor:pointer}
.card.static{cursor:auto}
.row1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sub{color:var(--sub);font-size:13px}
.g{display:inline-flex;flex:0 0 22px;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;color:#fff;font-size:12px;background:#aaa}
.g.gm{background:var(--m)}
.g.gf{background:var(--f)}
.g{line-height:1;font-weight:600}
.badge{margin-left:auto;font-size:12px;padding:2px 8px;border-radius:10px;background:#eee}
.st-확정,.st-참석{background:#e3f5e8;color:#1f7a3a}
.st-대기{background:#fff4e0;color:#9a6100}
.st-불참,.st-취소,.st-안옴,.st-환불{background:#fbe5e5;color:#b22}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tag{font-size:11.5px;padding:2px 7px;border-radius:6px;background:var(--pl);color:var(--p)}
.tag.warn{background:#fff1e3;color:var(--warn)}
.tag.gray{background:#f0f0f0;color:#888}
/* 팝업 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40;overflow:auto;padding:20px 10px}
.sheet{background:#fff;border-radius:14px;width:100%;max-width:820px;margin:0 auto;padding:16px}
.mhead{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mhead h3{flex:1;margin:0;font-size:18px}
.sec{margin:16px 0 6px;font-weight:700;color:var(--p);font-size:14px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.full{grid-column:1/-1}
.f{display:block;font-size:12px;color:var(--sub)}
.f>input,.f>select,.f>textarea,.f>.multi{margin-top:3px}
.f>button{margin-top:4px}
.multi{display:flex;flex-wrap:wrap;gap:6px}
.multi label{display:flex;gap:4px;align-items:center;font-size:13px;color:#222;background:#f7f7f7;border-radius:6px;padding:5px 8px}
.multi input{width:auto}
.acts{display:flex;gap:8px;margin-top:16px}
.acts .sp{flex:1}
.links{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.links a{font-size:13px;padding:5px 10px;border-radius:8px;background:#f3f3f3;color:#333;text-decoration:none}
.ent{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:6px}
.ent .ctl{display:grid;grid-template-columns:80px 80px 90px 62px 72px 1fr 32px;gap:6px;margin-top:6px;align-items:center}
.ent .ctl input,.ent .ctl select{font-size:14px;padding:6px}
.x{background:none;color:#c33;padding:4px}
.cand{display:flex;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding:8px 0}
.cand .info{flex:1;min-width:0}
.no{color:#c33;font-size:12px}
.mini{padding:6px 10px;font-size:13px}
body.syncing .side-foot #who::after{content:' · 최신 확인 중…';color:#bbb}
.qbar{position:sticky;top:0;z-index:6;background:var(--bg);padding:6px 0;margin-top:-6px}
@media (max-width:760px){
  .qbar{top:0}
}
.qbox{display:flex;align-items:center;gap:4px;min-width:0;position:relative}
.qbox input{flex:1;min-width:0}
.qcnt{font-size:12.5px;color:var(--sub);white-space:nowrap;min-width:0}
.qnav{flex:0 0 auto;width:30px;height:34px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;color:#777;font-size:11px;cursor:pointer}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px var(--p)}100%{box-shadow:0 0 0 0 transparent}}
.ie{width:100%;border:1px solid transparent;background:transparent;padding:5px 6px;font-size:13px;border-radius:6px;color:#222;transition:border-color .15s,background .15s}
.ie:hover{border-color:var(--line);background:#fff}
.ie:focus{border-color:var(--p);background:#fff;outline:none}
.ie::placeholder{color:#cfc6cb}
.ie.seat{text-align:center}
.ie.amt{text-align:center}
.ie.saving{background:#fff8e6}
.ie.saved{background:#e9f7ee}
select.ie{appearance:auto;padding:4px 4px;cursor:pointer}
table.sdk{font-size:14px}
table.sdk td,table.sdk th{padding:6px 8px}
table.sdk .ctr{text-align:center;width:52px}
table.sdk td.sn{font-weight:700;color:var(--sub)}
table.sdk td.in{background:#e6f5ec;color:#1f5f35}
table.dsum{max-width:420px;font-size:14px}
table.dsum td,table.dsum th{padding:6px 8px}
table.dsum td.ctr{color:#c4bdc1}
table.dsum td.nz{color:#222;font-weight:700}
table.dsum .ctr{text-align:center}
table.dsum tr.tt td{color:#222;font-weight:700}
table.dsum tr.tt td{font-weight:700;border-top:2px solid var(--line)}
/* 표 */
.tw{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px;max-height:72vh}
table.dt{border-collapse:separate;border-spacing:0;font-size:13px;min-width:100%}
table.dt th{position:sticky;top:0;background:#faf7f8;z-index:2;font-weight:600;color:#555}
table.dt th,table.dt td{padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:left;max-width:220px;overflow:hidden;text-overflow:ellipsis}
table.dt td:first-child{position:sticky;left:0;background:#fff;z-index:1;font-weight:600}
table.dt th:first-child{position:sticky;left:0;z-index:3}
.mhr{border:0;border-top:2px solid #e3dade;margin:28px 0 4px}
.month{font-size:16px;font-weight:700;margin:18px 2px 8px;display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
/* 가져오기 */
table.pv{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff}
table.pv td,table.pv th{border:1px solid var(--line);padding:4px 6px;text-align:left;vertical-align:top;white-space:nowrap}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#333;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;opacity:0;transition:.2s;z-index:70;pointer-events:none;max-width:90%}
#toast.show{opacity:.92}
/* 휴대폰 */
@media (max-width:760px){
  #app{flex-direction:column}
  .side{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;width:100%;flex-direction:row;padding:4px;border-right:0;border-top:1px solid var(--line);z-index:6}
  .brand,.grp{display:none}
  /* 메뉴가 많아서 글자가 잘리지 않게 한 줄 가로 스크롤 */
  .side nav{flex-direction:row;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:2px}
  .side nav::-webkit-scrollbar{display:none}
  .side nav button{flex:0 0 auto;width:auto;justify-content:center;text-align:center;white-space:nowrap;font-size:13px;padding:10px 12px}
  /* 새로고침·나가기: 위쪽 자리 차지하지 않게 아래 메뉴 오른쪽 끝에 아이콘으로 */
  .side nav{flex:1 1 auto;min-width:0}
  .side-foot{position:static;flex:0 0 auto;flex-direction:row;align-items:center;gap:2px;margin:0;padding:0 0 0 4px;border:0;border-left:1px solid var(--line)}
  .side-foot #who{display:none}
  .side-foot button{width:34px;height:36px;padding:0;font-size:16px;background:none;border:0;color:#777}
  .side-foot .tl{display:none}
  #view{padding:12px 12px 130px}
  /* 휴대폰: 아래 메뉴 바로 위에 한 줄로 */
  .emobar{position:absolute;left:0;right:0;bottom:100%;margin:0;display:flex;align-items:center;gap:6px;padding:4px 8px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);z-index:6}
  .emobar .eh{display:none}
  .emol{flex-wrap:nowrap;overflow-x:auto;flex:1;min-width:0}
  .emo{width:34px;height:34px;font-size:20px;line-height:34px}
  .emoadd{width:auto;margin:0;padding:6px 10px;flex:0 0 auto}
  .grid3{grid-template-columns:1fr 1fr}
  .ent .ctl{grid-template-columns:1fr 1fr 1fr}
  .grid>*,.grid3>*{min-width:0}
}