/* =============================================================
   일정 관리 · 공통 스타일
   모바일 우선. 관리자 화면도 모바일에서 전부 동작합니다.

   ── 시각 규칙 ────────────────────────────────────────────────
   순백 배경 · 테두리 대신 얇은 구분선 · 넉넉한 여백.
   선을 그리는 대신 여백으로 나눕니다.

   색   = 판정 순서가 있습니다 (assets/ui.js 의 typeStyle)
            1. 부재(휴무·연차)        → 빨강
            2. 종류를 고른 일정        → 업무 파랑 · 교육 청록 · 출장 보라
            3. 기타 + 소속 없음        → 초록 (내 개인 일정)
            4. 기타 + 소속 있음        → 회색
          그룹마다 색을 주지 않습니다. 그룹이 늘어나면 색이 모자라고
          서로 비슷해집니다. 어느 그룹인지는 이름 칩(글자)으로 적습니다.
   형태 = 상태.  실선 확정 · 점선 요청중 · 흐림 취소
   충돌 = 색이 아니라 ⚠ 배지
   날짜 = 일요일·공휴일 빨강 · 토요일 파랑 · 오늘은 연한 회색 바탕
   ============================================================= */

:root{
  /* 바탕 - 순백을 기본으로 */
  --ground:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F1F3F5;      /* 칩 · 입력칸 · 비활성 */
  --sunken:#F8F9FA;         /* 살짝 눌린 면 */

  --ink:#212529;
  --ink-2:#495057;
  --muted:#868E96;
  --faint:#ADB5BD;

  --rule:#F1F3F5;           /* 목록 구분선 - 거의 안 보일 만큼 옅게 */
  --rule-2:#DEE2E6;         /* 입력칸 테두리 */

  --accent:#4263EB;         /* 밝은 인디고 */
  --accent-soft:#EDF2FF;
  --accent-mid:#BAC8FF;
  --sel-line:#CED4DA;       /* (예전) 선택한 날짜 테두리 */
  --cal-line:#F6F7F9;       /* 월간 달력 칸 구분선 · 선택한 날 바탕 - 같은 색 */
  --today-bg:#E9ECEF;       /* 오늘 표시 바탕 - 연한 회색. 숫자 색은 원래대로 둡니다 */

  /* 일정 종류별 색
     -on 은 그 바탕 위에 올릴 글자색입니다. 노랑처럼 밝은 바탕에
     흰 글자를 쓰면 8.5px 막대에서 전혀 안 읽힙니다. */
  /* -on   : 그 색을 배경으로 깔았을 때 위에 올릴 글자색
     -line : 흰 배경 위에 선·글자로 쓸 때의 색 (요청중 점선 등)
     -bd   : 카드 테두리용 중간 밝기. 진한 색을 1px 테두리로 두르면 카드가
             너무 시끄럽고, 옅은 색(-soft)은 흰 바탕에서 안 보입니다.
     다섯 색 모두 흰 글자가 읽히는 명도라 -on 은 전부 흰색입니다. */
  /* 종류 넷 - 무슨 일인가.
     '회의' 를 두었다가 뺐습니다 - 달력의 8.5px 막대에서 색이 일곱 개면
     주황(회의)과 빨강(부재)이 구분되지 않고, 회의는 업무에 들어갑니다. */
  --t-work:#4263EB;      --t-work-soft:#EDF2FF;      --t-work-on:#FFFFFF;     --t-work-line:#4263EB;      --t-work-bd:#91A7FF;
  --t-class:#0C8599;     --t-class-soft:#E3FAFC;     --t-class-on:#FFFFFF;    --t-class-line:#0C8599;     --t-class-bd:#66D9E8;
  --t-travel:#7048E8;    --t-travel-soft:#F3F0FF;    --t-travel-on:#FFFFFF;   --t-travel-line:#7048E8;    --t-travel-bd:#B197FC;
  --t-etc:#6C757D;       --t-etc-soft:#F1F3F5;       --t-etc-on:#FFFFFF;      --t-etc-line:#6C757D;       --t-etc-bd:#CED4DA;

  /* 종류가 아닌 두 가지. 종류색보다 먼저 판정합니다. (assets/ui.js 의 typeStyle) */
  --t-personal:#2B8A3E;  --t-personal-soft:#EBFBEE;  --t-personal-on:#FFFFFF; --t-personal-line:#2B8A3E;  --t-personal-bd:#8CE99A;
  --t-away:#E03131;      --t-away-soft:#FFF5F5;      --t-away-on:#FFFFFF;     --t-away-line:#E03131;      --t-away-bd:#FFA8A8;

  --ok:#0CA678;   --ok-soft:#E6FCF5;
  --warn:#E8590C; --warn-soft:#FFF4E6;
  --bad:#E03131;  --bad-soft:#FFF5F5;

  --font:'Pretendard Variable',Pretendard,-apple-system,'Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  --tabh:60px;
  --r:14px;
  --r-sm:8px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* hidden 속성은 언제나 이깁니다.
   브라우저 기본값은 [hidden]{display:none} 인데, display 를 지정한 클래스가
   그걸 덮어써서 "숨겼는데 안 숨는" 사고가 이 파일에서만 세 번 났습니다
   (.pv-code · .row 의 '그룹 만들기' · .kv 의 초대 받는주소).
   짝을 하나씩 다는 대신 여기서 한 번에 못 박습니다.
   style.display 로 요소를 보이게 하는 코드는 이 코드베이스에 없습니다. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;letter-spacing:-.01em;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}

.shell{min-height:100vh;padding-bottom:calc(var(--tabh) + var(--safe-b));background:var(--ground)}
@media (min-width:700px){
  body{background:#F1F3F5}
  .shell{max-width:560px;margin:0 auto;box-shadow:0 0 0 1px #E9ECEF}
}

/* ── 상단바 ─────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:50;background:var(--surface);
  display:flex;align-items:center;gap:6px;padding:14px 18px 12px;
}
.topbar .ttl{
  font-size:20px;font-weight:700;margin:0;flex:1;letter-spacing:-.02em;
  display:flex;align-items:center;gap:4px;cursor:pointer;min-width:0;
}
.topbar .ttl svg{flex:none;opacity:.35}
/* 보고 있는 대상 - 색 점 + 이름. 그룹명이 길면 줄임표. */
.topbar .ttl .cxdot{width:10px;height:10px;border-radius:50%;flex:none;margin-right:4px;background:var(--t-personal)}
.topbar .ttl .cxdot.org{background:var(--accent)}
.topbar .ttl .cxname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{
  border:none;background:transparent;color:var(--ink-2);
  width:40px;height:40px;border-radius:12px;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.iconbtn:active{background:var(--surface-2)}
.badge{
  position:absolute;top:5px;right:4px;min-width:17px;height:17px;
  background:var(--bad);color:#fff;border-radius:9px;
  font-size:10.5px;line-height:17px;text-align:center;padding:0 4px;font-weight:700;
}

/* ── 하단 탭바 ──────────────────────────────────────────── */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  box-shadow:0 -1px 0 #F1F3F5;padding-bottom:var(--safe-b);
}
@media (min-width:700px){.tabbar{max-width:560px;left:50%;transform:translateX(-50%)}}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;height:var(--tabh);font-size:10.5px;color:var(--faint);position:relative;
  font-weight:500;
}
.tabbar a.on{color:var(--accent);font-weight:700}
.tabbar a svg{width:22px;height:22px}
.tabbar .bd{
  position:absolute;top:8px;left:50%;margin-left:5px;
  background:var(--bad);color:#fff;font-size:9.5px;font-weight:700;
  min-width:16px;height:16px;line-height:16px;border-radius:8px;padding:0 4px;
}

/* ── 컨텍스트 전환 메뉴 ─────────────────────────────────── */
.ctx{
  position:absolute;top:58px;left:12px;right:12px;max-width:340px;z-index:70;
  background:var(--surface);border-radius:16px;overflow:hidden;
  box-shadow:0 12px 40px rgba(33,37,41,.16),0 0 0 1px #F1F3F5;
}
.ctx[hidden]{display:none}
.ctx button{
  display:flex;width:100%;align-items:center;gap:10px;border:none;
  background:var(--surface);text-align:left;padding:14px 18px;cursor:pointer;
}
.ctx button:active{background:var(--sunken)}
/* 묶음이 바뀌는 자리에만 선을 긋습니다 - 개인 / 그룹 / 서비스 운영 */
.ctx button.sep{box-shadow:inset 0 1px 0 var(--rule-2)}
/* 앞에 붙는 색 점 - 내 일정은 초록, 그룹은 파랑 */
.ctx .dot{width:9px;height:9px;border-radius:50%;flex:none}
.ctx .nm{flex:1;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx .rl{font-size:12px;color:var(--faint);flex:none}
.ctx button.on .nm{font-weight:700}

/* ── 섹션 제목 ──────────────────────────────────────────── */
.sec{display:flex;align-items:baseline;gap:8px;padding:24px 18px 10px}
.sec b{font-size:16px;font-weight:700;letter-spacing:-.02em}
.sec span{font-size:13px;color:var(--faint)}
.sec .more{margin-left:auto;font-size:13px;color:var(--accent);cursor:pointer;font-weight:500}

/* ── 일정 카드 ──────────────────────────────────────────── */
/* 테두리가 있는 카드 한 장씩. 일정 하나가 어디서 끝나는지 분명해집니다. */
.list{display:flex;flex-direction:column;gap:10px;padding:0 18px}

.card{
  position:relative;background:var(--surface);
  /* 테두리는 왼쪽 띠와 같은 계열입니다. 카드 한 장이 무슨 일정인지
     띠를 안 봐도 윤곽만으로 읽힙니다. --cb 가 없으면 예전 회색으로 돌아갑니다. */
  border:1px solid var(--cb,#E9ECEF);border-radius:var(--r);
  padding:14px 15px 14px 18px;cursor:pointer;text-align:left;width:100%;
  font:inherit;color:inherit;display:block;overflow:hidden;
}
.card:active{background:var(--sunken)}

/* 왼쪽 색 막대 - 색은 일정 종류 (typeStyle 이 --c 로 넣어 줍니다) */
.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--c,var(--accent));
}
/* 요청중 - 연한 회색 점선입니다. 색을 연하게 낮추는 대신 2px 로 굵혀서
   눈에는 걸리게 합니다(점선은 찍히는 픽셀이 실선의 절반이라 색만 낮추면
   사라집니다). box-sizing 이 border-box 라 1px→2px 로 바꿔도 카드 크기는
   그대로이고, 안쪽 여백만 1px 줄어듭니다.
   띠는 --cs(거의 흰색)에서 --cb 로 올려 종류 색은 그대로 읽히게 둡니다. */
.card.tentative{border-width:2px;border-style:dashed;border-color:var(--faint)}
.card.tentative::before{background:var(--cb,var(--accent-mid))}
.card.cancelled{opacity:.4}
.card.cancelled .ti{text-decoration:line-through}
/* 시간이 또렷해진 만큼, 취소된 시간을 유효한 약속으로 잘못 읽지 않게 줄을 긋습니다 */
.card.cancelled .tm .tt{text-decoration:line-through}

/* 시간 - 일정을 볼 때 제목 다음으로, 때로는 제목보다 먼저 확인하는 값입니다.
   예전에는 12.5px 연한 회색(--faint)이었는데, 흰 바탕과의 명암 대비가 약 2:1 이라
   글자 권장 기준(4.5:1)에 한참 못 미쳐 잘 안 읽혔습니다.
   본문색(--ink, 대비 약 16:1)으로 올리고 크기와 굵기도 키웁니다. */
.card .tm{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;display:flex;align-items:center;flex-wrap:nowrap;
  column-gap:5px;margin-bottom:2px;min-width:0}
/* 시계 아이콘 - 시간보다 옅게. 눈이 아이콘이 아니라 숫자에 먼저 가야 합니다. */
.card .tm .ic-clock{flex:none;color:var(--faint)}
/* 길이 - 괄호째 옅게. 필요할 때만 읽히는 보조 정보입니다.
   줄이 모자라면 길이만 다음 줄로 넘어가고 시간은 쪼개지지 않게 둡니다. */
.card .tm .tt{white-space:nowrap;flex:none}
/* 한 줄에 다 안 들어가면 긴 그룹명부터 줄이고(줄임표), 시간은 끝까지 온전히 보이게 합니다. */
.card .tm .dur{font-size:12.5px;font-weight:500;color:var(--faint);white-space:nowrap;
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ── 오늘 · 지금 기준 표시 ──────────────────────────────── */
/* 끝난 일정 - 흐리게. 지우지 않는 이유는 '오늘 뭘 했나' 도 보여야 해서입니다.
   글자를 실제로 뭉개면(blur) 읽을 수가 없어서, 반투명 + 색을 빼는 방식으로 '지난 것' 을 표시합니다.
   오늘 화면의 is-past 와 모든 목록의 ended 가 같은 모양입니다. */
.card.is-past,.card.ended{opacity:.5;filter:grayscale(.85)}
/* 진행 중 - 테두리를 일정 색으로 두껍게. 테두리 굵기를 바꾸면 카드가 1px 씩
   밀리므로 border 는 투명하게 두고 안쪽 그림자로 그립니다. */
.card.is-now{border-color:transparent;box-shadow:inset 0 0 0 2px var(--c)}
/* 상태 글자 - 칩 줄 오른쪽 끝. (시간 줄 오른쪽은 그룹/개인 표시 자리) */
.card .rw .st{margin-left:auto;padding-left:8px;font-size:12px;font-weight:700;white-space:nowrap}
.card .rw .st.is-now{color:var(--c)}
.card .rw .st.is-next{color:var(--accent)}
.card .rw .st.is-past{color:var(--faint);font-weight:600}

/* 누구 일정인지 - 시간 줄 오른쪽 끝. 칩보다 크고 테두리를 둘러 먼저 눈에 들어오게.
   그룹명이 길면 줄임표로 자릅니다. */
.card .tm .owner{
  margin-left:auto;flex:0 8 auto;min-width:48px;max-width:48%;
  font-size:12.5px;font-weight:700;letter-spacing:-.02em;line-height:1;
  padding:5px 9px;border-radius:8px;border:1px solid;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card .tm .owner.org {color:var(--accent);background:var(--accent-soft);border-color:#BAC8FF}
.card .tm .owner.self{color:var(--t-personal);background:var(--t-personal-soft);border-color:var(--t-personal-bd)}
.card.cancelled .tm .owner{opacity:.6}

/* '다가오는 일정' 에서 앞에 붙는 날짜 - 시간보다 한 단계 옅게 둬서
   날짜와 시간이 한 덩어리로 뭉치지 않게 합니다. 요일 색 규칙은 앱 전체와 같습니다. */
.card .tm .td{font-weight:600;color:var(--muted);margin-right:4px;flex:none;white-space:nowrap}
.card .tm .td.red{color:var(--bad)}
.card .tm .td.blue{color:var(--accent)}
.card .ti{font-size:15.5px;font-weight:600;line-height:1.4;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.card .rw{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:7px}

.chip{
  font-size:11.5px;padding:3px 8px;border-radius:7px;font-weight:600;
  background:var(--surface-2);color:var(--muted);flex:none;letter-spacing:-.01em;
}
.chip.org{background:var(--accent-soft);color:var(--accent)}
.chip.self{background:var(--t-personal-soft);color:var(--t-personal)}
.chip.req{background:var(--warn-soft);color:var(--warn)}
.chip.plain{background:transparent;padding:3px 0;font-weight:400;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

.warnbadge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:7px;
  background:var(--bad-soft);color:var(--bad);flex:none;
}

/* 목록 중간 구분선. 확정 일정과 요청중인 건을 나눌 때 씁니다. */
.listsep{
  display:flex;align-items:center;gap:9px;
  padding:6px 2px 0;font-size:12px;font-weight:700;color:var(--warn);
}
.listsep::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ── 요약 ───────────────────────────────────────────────── */
.hero{padding:6px 18px 18px}
.hero .big{font-size:27px;font-weight:800;line-height:1.2;letter-spacing:-.035em}
/* 날짜·요일 색 - 일요일·공휴일 빨강, 토요일 파랑.
   '오늘' 상단, 멤버 찾기 결과 머리글 등 여러 곳이 같이 씁니다. */
.dw.red{color:var(--bad)}
.dw.blue{color:var(--accent)}
.hero .sub{font-size:14px;color:var(--muted);margin-top:5px}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px}
.stat{
  background:var(--sunken);border:none;border-radius:var(--r);
  padding:14px 8px;text-align:center;display:block;color:inherit;
}
.stat b{display:block;font-size:22px;font-weight:800;line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{font-size:11.5px;color:var(--muted);font-weight:500}
.stat.hot{background:var(--warn-soft)}
.stat.hot b{color:var(--warn)}

/* ── 주간 스트립 ────────────────────────────────────────── */
/* 일주일이 카드 한 장입니다 - 날짜 하나하나가 아니라 이 줄 전체가 한 덩어리.
   좌우 여백 18px 은 위의 주/월/연 탭(.seg)과 같은 값이라 선이 맞습니다. */
.strip{
  display:flex;gap:2px;margin:4px 18px 14px;padding:9px 7px 8px;
  background:var(--surface);border:1px solid #E9ECEF;border-radius:16px;
  overflow-x:auto;
}
.strip button{
  flex:1 0 40px;border:none;background:transparent;
  border-radius:10px;padding:4px 0 3px;cursor:pointer;
}
.strip button:active{background:var(--sunken)}
.strip .d{font-size:11px;color:var(--faint);display:block;font-weight:500}
/* 높이를 고정해 둡니다. 오늘만 글자가 커져도 카드 줄이 들쭉날쭉해지지 않습니다. */
.strip .n{font-size:15px;font-weight:600;display:block;margin-top:2px;
  height:26px;line-height:26px;font-variant-numeric:tabular-nums}
.strip button.red  .d,.strip button.red  .n{color:var(--bad)}
.strip button.blue .d,.strip button.blue .n{color:var(--accent)}
/* 점 - 내 일정은 초록, 그룹 일정은 파랑. 두 가지뿐입니다. */
.strip .dt{height:5px;display:flex;gap:3px;justify-content:center;margin-top:4px}
.strip .dt i{width:5px;height:5px;border-radius:50%;display:block;background:var(--accent)}
.strip .dt i.p{background:var(--t-personal)}
/* 오늘 - 가운데 오는 칸입니다. 숫자를 한 단계 키우고 연한 회색 사각 배경을
   둡니다. 글자 색은 지정하지 않습니다 - 일요일 빨강 · 토요일 파랑이
   그대로 살아납니다. */
.strip button.today .n{
  font-size:19px;font-weight:800;letter-spacing:-.02em;
  background:var(--today-bg);width:32px;border-radius:8px;margin:2px auto 0;
}

/* 선택한 날 - 칸마다 테두리를 그리지 않습니다. 숫자를 굵게 하는 것으로만 표시합니다. */
.strip button.on .n{font-weight:800}

/* ── 월간 달력 ──────────────────────────────────────────── */
/* touch-action 을 제한하지 않습니다.
   pan-y 로 묶으면 탭 도중 손가락이 옆으로 조금만 흔들려도 브라우저가
   '팬 시도' 로 보고 클릭 생성을 취소해, 날짜 탭이 간헐적으로 먹지 않습니다.
   페이지가 가로로 스크롤되지 않으니 막을 것도 없습니다. */
.calwrap{padding:0 10px 6px}

/* 스와이프로 넘어올 때 방향에 맞춰 살짝 밀려 들어옵니다. */
@keyframes slideFromRight{from{opacity:.3;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes slideFromLeft {from{opacity:.3;transform:translateX(-18px)}to{opacity:1;transform:none}}
.slide-next{animation:slideFromRight .22s ease-out}
.slide-prev{animation:slideFromLeft  .22s ease-out}
.calhead{display:flex;align-items:center;justify-content:space-between;padding:2px 8px 14px}
.calhead b{font-size:19px;font-weight:800;letter-spacing:-.03em}
.calhead .nav{display:flex;gap:2px}
.calhead button{
  border:none;background:transparent;color:var(--ink-2);
  width:36px;height:36px;border-radius:11px;font-size:18px;cursor:pointer;
}
.calhead button:active{background:var(--surface-2)}

/* minmax(0,1fr) - 긴 제목이 든 칸만 넓어져 열 너비가 들쭉날쭉해지지 않게 */
.cgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
/* 칸마다 아주 연한 선으로 나눕니다. 바깥은 둥근 테두리 한 장. */
.cgrid.days{gap:0;border:1px solid var(--cal-line);border-radius:12px;overflow:hidden}
.cgrid .h{text-align:center;font-size:11.5px;color:var(--faint);
  padding:0 0 9px;font-weight:600;letter-spacing:.02em}
.cgrid .h.red{color:var(--bad)} .cgrid .h.blue{color:var(--accent)}

/* 날짜 칸 - 오른쪽·아래에 연한 선. 맨 오른쪽 열과 맨 아래 줄은 바깥 테두리와 겹치므로 뺍니다. */
/* 높이를 고정합니다.
   내용에 맞춰 늘리면 일정 많은 줄만 길어져 격자가 울퉁불퉁해지고,
   빈 줄에 큰 공백이 생깁니다. 넘치는 일정은 "+N" 으로 접습니다. */
.cday{
  border:none;background:transparent;cursor:pointer;
  border-radius:0;height:74px;padding:5px 2px 3px;
  --lr:1;--lb:1;   /* 오른쪽·아래 구분선 켜기(1)/끄기(0) */
  box-shadow:inset calc(var(--lr) * -1px) calc(var(--lb) * -1px) 0 var(--cal-line);
  display:flex;flex-direction:column;align-items:stretch;gap:2px;
  color:var(--ink);overflow:hidden;text-align:center;
}
/* 연휴 막대가 옆 칸 위로 넘어가야 해서 가로는 열어 두고 세로만 자릅니다.
   overflow-y:clip 을 모르는 옛 브라우저는 위의 hidden 이 그대로 남습니다(막대가 칸 안에서 잘림). */
@supports (overflow:clip){ .cgrid.days .cday{overflow-x:visible;overflow-y:clip} }
.cday .dnum{
  font-size:13px;line-height:20px;height:20px;flex:none;font-weight:500;
  font-variant-numeric:tabular-nums;
}
.cday.red  .dnum{color:var(--bad)}
.cday.blue .dnum{color:var(--accent)}
.cday.out{opacity:.32}
.cgrid.days .cday:nth-child(7n){--lr:0}
.cgrid.days .cday:nth-last-child(-n+7){--lb:0}


/* 오늘 - 칸은 비워 두고 날짜 숫자에만 연한 회색 사각 배경.
   글자 색은 지정하지 않습니다 - 일요일 빨강 · 토요일 파랑이 그대로 살아납니다.
   높이와 line-height 를 같은 값으로 맞춰야 숫자가 가운데에 옵니다. */
.cday.today .dnum{
  font-weight:700;background:var(--today-bg);
  width:26px;height:20px;line-height:20px;border-radius:6px;margin:0 auto;
}

/* 선택 - 테두리 대신 구분선과 같은 연한 색으로 칸을 채웁니다.
   흐린 '다른 달' 칸이 선택돼도 바탕이 보이게 opacity 를 되돌리지 않고 그대로 둡니다.
   오늘이면서 선택이면 숫자 사각이 바탕에 묻히므로 흰색으로 바꿉니다. */
.cday.sel{background:var(--cal-line)}
.cday.sel .dnum{font-weight:700}
.cday.sel.today .dnum{background:var(--surface)}


.cday .bars{display:flex;flex-direction:column;gap:2px;margin-top:2px;min-width:0}
/* 색 알약에 제목. 색은 일정 종류. */
.cday .bar{
  font-size:8.5px;line-height:13px;height:13px;border-radius:4px;
  padding:0 3px;text-align:center;letter-spacing:-.04em;font-weight:600;
  overflow:hidden;text-overflow:clip;white-space:nowrap;
  background:var(--c,var(--accent));color:var(--ct,#fff);
}
/* 끝난 일정 막대 - 목록 카드와 같이 흐리게 */
.cday .bar.ended{opacity:.45;filter:grayscale(.85)}
/* 요청중은 점선 - 상태는 색이 아니라 형태로 */
.cday .bar.tent{
  background:transparent;color:var(--cl,var(--accent));
  box-shadow:inset 0 0 0 1px var(--cl,var(--accent));
  line-height:13px;
}
/* 공휴일 막대 - 진한 빨강에 흰 글자. 이어지는 연휴는 첫 칸에서 --span 칸만큼 넓게.
   칸 안쪽 너비(100%)에 좌우 여백 4px 을 더한 것이 칸 하나 너비입니다.
   뒤 칸들의 배경(선택 표시)보다 위에 오도록 position 을 줍니다. */
.cday .hbar{
  position:relative;z-index:1;flex:none;
  width:calc(var(--span,1) * (100% + 4px) - 4px);
  font-size:8.5px;line-height:13px;height:13px;border-radius:4px;
  padding:0 3px;text-align:center;letter-spacing:-.04em;font-weight:700;
  overflow:hidden;white-space:nowrap;text-overflow:clip;
  background:var(--bad);color:#fff;
}
.cday .hbar.ph{visibility:hidden}
/* "+N" 도 알약과 같은 줄 흐름이라 함께 가운데로 맞춥니다 */
.cday .more{font-size:8.5px;color:var(--faint);line-height:12px;
  text-align:center;font-weight:600}

@media (min-width:560px){
  .cday{height:88px;padding:6px 4px 4px}
  .cday .bar{font-size:10px;line-height:15px;height:15px;padding:0 5px;
    letter-spacing:-.01em;text-overflow:ellipsis;border-radius:5px}
  .cday .hbar{font-size:10px;line-height:15px;height:15px;border-radius:5px;
    width:calc(var(--span,1) * (100% + 8px) - 8px)}
  .cday .more{font-size:9.5px}
}

/* ── 주간 · 가로 시간축 ────────────────────────────────────
   구글 캘린더식 7열 세로 그리드는 좁은 화면에서 못 씁니다.
   날짜를 세로로, 시간을 가로로 돌리면 한 주가 한 화면에 들어오고
   "어느 날이 통째로 비었나" 가 한눈에 보입니다. */
.wkwrap{padding:2px 14px 10px}

.whead{display:flex;padding-left:46px;margin-bottom:6px}
.whead span{flex:1;font-size:10px;color:var(--faint);font-weight:600;
  font-variant-numeric:tabular-nums}

.wrow{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.wlab{
  width:40px;flex:none;border:none;background:transparent;cursor:pointer;
  border-radius:9px;padding:5px 0;text-align:center;font:inherit;color:var(--ink);
}
.wlab b{display:block;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
  line-height:1.2}
.wlab span{display:block;font-size:10px;color:var(--faint);font-weight:600}
.wlab.red b,.wlab.red span{color:var(--bad)}
.wlab.blue b,.wlab.blue span{color:var(--accent)}
.wlab.today b{background:var(--today-bg);border-radius:6px}
.wlab.sel{background:var(--accent-soft)}

.wtrack{
  flex:1;position:relative;height:26px;border-radius:7px;
  background:var(--sunken);overflow:hidden;cursor:pointer;
}
.wtrack.rest{background:var(--bad-soft)}
/* 정시마다 옅은 눈금 */
.wtrack i{position:absolute;top:0;bottom:0;width:1px;background:rgba(0,0,0,.045)}
/* 막대 안에 제목을 씁니다. 월간 달력의 알약과 같은 규칙 - 가운데 정렬.
   좁은 막대에는 renderWeek() 이 글자를 아예 넣지 않습니다. */
.wbar{
  position:absolute;top:4px;bottom:4px;border-radius:4px;
  background:var(--c,var(--accent));min-width:4px;
  display:flex;align-items:center;justify-content:center;
  padding:0 3px;overflow:hidden;
}
.wbar .lb{
  font-size:9px;line-height:1;font-weight:700;letter-spacing:-.05em;
  color:var(--ct,#fff);white-space:nowrap;overflow:hidden;text-overflow:clip;
}
/* 요청중은 속이 빈 막대라 글자도 테두리와 같은 색이어야 읽힙니다 */
.wbar.tent{background:transparent;box-shadow:inset 0 0 0 1.5px var(--cl,var(--accent))}
.wbar.tent .lb{color:var(--cl,var(--accent))}
/* 종일 일정 - 하루를 꽉 채우는 띠라 진한 색으로 깔면 그 줄이 통째로 무거워집니다.
   예전에는 opacity 로 흐렸는데, 그러면 안에 쓴 글자까지 같이 흐려져 안 읽힙니다.
   투명도 대신 옅은 색(--cs)을 바탕으로 쓰고 글자는 진한 색(--cl)으로 둡니다. */
.wbar.allday{top:2px;bottom:2px;background:var(--cs,var(--accent-soft))}
.wbar.allday .lb{color:var(--cl,var(--accent))}

@media (min-width:560px){
  .wtrack{height:30px}
  .wbar .lb{font-size:10.5px;letter-spacing:-.02em;text-overflow:ellipsis}
}

/* ── 연간 · 히트맵 ─────────────────────────────────────────
   12개 미니 달력은 모바일에서 글자가 안 읽힙니다.
   월 × 일 격자에 색 농도로 바쁜 정도만 보여 주는 편이 실제로 쓰입니다. */
.ymap{padding:6px 14px 14px}
.yhead{display:flex;padding-left:34px;margin-bottom:5px}
.yhead span{flex:1;text-align:center;font-size:9px;color:var(--faint);font-weight:600}

.yrow{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.ymon{
  width:29px;flex:none;border:none;background:transparent;cursor:pointer;
  font:inherit;font-size:11px;font-weight:600;color:var(--muted);
  text-align:right;padding:0;
}
.yrow.on .ymon{color:var(--accent);font-weight:800}
.ydays{flex:1;display:grid;grid-template-columns:repeat(31,1fr);gap:1px}
.yd{height:11px;border-radius:2px;background:var(--sunken)}
.yd.out{background:transparent}
.yd.l1{background:#C9D4FA} .yd.l2{background:#93A9F4}
.yd.l3{background:#5C7BEE} .yd.l4{background:var(--accent)}
.ycnt{width:30px;flex:none;text-align:right;font-size:10.5px;color:var(--faint);
  font-weight:600;font-variant-numeric:tabular-nums}
.yrow.on .ycnt{color:var(--accent)}

.ylegend{display:flex;align-items:center;gap:5px;justify-content:flex-end;
  padding:10px 14px 0;font-size:10.5px;color:var(--faint)}
.ylegend i{width:11px;height:11px;border-radius:2px;display:block}

/* ── 관리자 · 주간 아젠다 (날짜를 세로로) ──────────────────
   좁은 화면에서 멤버 × 날짜 표를 가로로 펼치면 스크롤이 생기고 읽기 어렵습니다.
   날짜를 세로로 쌓고 그 아래 그날 일정을 나열하면 한 손으로 훑을 수 있습니다. */
.agenda{padding:0 18px 10px}
.aday+.aday{margin-top:4px}
.ahead{display:flex;align-items:baseline;gap:7px;padding:18px 2px 10px}
.ahead .d{font-size:16px;font-weight:700;letter-spacing:-.02em}
.ahead .w{font-size:13px;color:var(--faint);font-weight:600}
.ahead.red  .d,.ahead.red  .w{color:var(--bad)}
.ahead.blue .d,.ahead.blue .w{color:var(--accent)}
.ahead .hn{font-size:11.5px;color:var(--bad);font-weight:500}
.ahead .cnt{margin-left:auto;font-size:12.5px;color:var(--faint);font-weight:500;flex:none}
.ahead .cnt b{color:var(--ok);font-weight:700}
.ahead .cnt.none b{color:var(--bad)}
/* 오늘 - 날짜에 연한 회색 바탕 */
.ahead.today .d{background:var(--today-bg);border-radius:6px;padding:1px 7px;margin-left:-7px}
.aday .list{padding:0}
.aempty{font-size:13.5px;color:var(--faint);padding:2px 2px 6px}
/* 대괄호 안이 관리자가 실제로 찾는 말이라 조금 진하게 둡니다 */
.aempty b{font-weight:600;color:var(--muted);margin-left:3px}


/* ── 세그먼트 토글 ──────────────────────────────────────── */
.seg{display:flex;background:var(--surface-2);border-radius:12px;padding:3px;margin:14px 18px 0}
.seg button{
  flex:1;border:none;background:transparent;padding:8px 0;border-radius:9px;
  font-size:13.5px;color:var(--muted);cursor:pointer;font-weight:600;
}
.seg button.on{background:var(--surface);color:var(--ink);
  box-shadow:0 1px 3px rgba(33,37,41,.08)}

/* ── 사람 카드 ──────────────────────────────────────────── */
/* 구분선으로 나누던 것을 카드로 바꿨습니다. 사람마다 이름·역할·예정 건수에
   해제 버튼까지 두세 줄이 붙으니, 줄 하나로는 어디서 끊기는지 안 보입니다.
   멤버 관리와 멤버 찾기가 같은 모양을 씁니다. */
.person{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--surface);border:1px solid #E9ECEF;border-radius:var(--r);
  padding:13px 14px;cursor:pointer;font:inherit;color:inherit;
}
.person:active{background:var(--sunken)}
.person .av{
  width:40px;height:40px;border-radius:20px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;flex:none;
  font-size:15px;font-weight:700;color:var(--accent);
}
.person .info{flex:1;min-width:0}
/* span 으로 넣고 있어서 display 를 지정해 줘야 줄이 나뉩니다.
   (text-overflow:ellipsis 도 블록이어야 동작합니다) */
.person .nm{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 동명이인 구분 - 이름보다 한 단계 작고 옅게. 이름과 떨어지지 않게 nowrap. */
.ntag{margin-left:5px;font-size:.82em;font-weight:600;color:var(--faint);
  font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}
.person .st{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.person .act{flex:none}
.person.off{opacity:.45}

.pill{font-size:12px;font-weight:700;padding:5px 11px;border-radius:9px;flex:none}
.pill.available{background:var(--ok-soft);color:var(--ok)}
.pill.tight,.pill.tentative{background:var(--warn-soft);color:var(--warn)}
.pill.busy{background:var(--bad-soft);color:var(--bad)}

/* ── 버튼 ───────────────────────────────────────────────── */
.btn{
  width:100%;padding:15px;border:none;border-radius:13px;
  background:var(--accent);color:#fff;font-size:15.5px;font-weight:700;cursor:pointer;
  letter-spacing:-.02em;
}
.btn:active{opacity:.85;transform:scale(.99)}
.btn:disabled{opacity:.4;cursor:default}
.btn.ghost{background:var(--surface-2);color:var(--ink-2)}
.btn.danger{background:var(--bad)}
.btn.sm{width:auto;padding:9px 16px;font-size:13.5px;border-radius:10px}
.btnrow{display:flex;gap:8px}

/* ── 폼 ─────────────────────────────────────────────────── */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px;font-weight:600}
.field label .opt{font-weight:400;color:var(--faint)}
/* 흰 바탕 위에서도 입력칸이 어디인지 분명하도록 옅은 테두리를 둡니다.
   테두리 없이 회색 채움만 쓰면 흰 배경에서 거의 안 보입니다. */
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid #E4E7EB;border-radius:12px;
  background:var(--sunken);
}
.field input::placeholder,.field textarea::placeholder{color:#C1C7CF}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:var(--surface);border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.field textarea{resize:vertical;min-height:70px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.three{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:6px}
/* 날짜·시간 입력은 브라우저 기본 최소 폭이 있어 좁은 화면에서 칸 밖으로 밀려납니다. */
.two > *, .three > *{min-width:0;width:100%}
.three input{padding-left:10px;padding-right:6px}
/* 수정할 수 없는 칸 - 눌러도 안 바뀌는 게 보여야 합니다 */
.field input:disabled, .field select:disabled, .field textarea:disabled{
  background:var(--surface-2);color:var(--muted);opacity:1;-webkit-text-fill-color:var(--muted)}
.hint{font-size:12px;color:var(--faint);margin:7px 0 0;line-height:1.55}
.hint.warn{color:var(--warn)}
.hint.ok{color:var(--ok)}

/* ── 가입 동의 ──────────────────────────────────────────── */
/* 전체 동의를 위에 두고 아래에 항목을 붙이는, 국내에서 익숙한 모양입니다.
   체크박스는 기본 크기가 손가락에 비해 작아 줄 전체를 누를 수 있게 label 로 감쌌습니다. */
.agree{margin:22px 0 4px;background:var(--sunken);border-radius:14px;padding:4px 14px}
.ag{display:flex;align-items:center;gap:10px;padding:12px 0;cursor:pointer;
  font-size:13.5px;color:var(--ink-2);line-height:1.45}
.ag+.ag{box-shadow:inset 0 1px 0 var(--rule-2)}
.ag input{width:19px;height:19px;flex:none;accent-color:var(--accent);margin:0}
.ag span{flex:1;min-width:0}
.ag b{color:var(--accent);font-weight:700}
.ag.all{font-size:15px;font-weight:700;color:var(--ink);padding:14px 0}
.ag .view{flex:none;font-size:12.5px;color:var(--faint);text-decoration:underline;
  padding:4px 2px}

/* ── 휴대폰 문자 인증 위젯 (assets/phone.js) ─────────────── */
.pv{margin-top:10px}

/* 이 위젯은 여러 화면에 꽂히므로 바깥 화면의 여백 규칙을 받지 않게 막아 둡니다.
   아래 .login form > .btn 처럼 범위를 좁혀 뒀지만, 다른 화면에서 또 생길 수 있습니다. */
.pv .btn{margin:0}

.pv-row{display:flex;align-items:stretch;gap:8px}

/* 인증번호 받기 / 다시 받기 - 누르는 자리임이 분명하게 보이도록
   테두리와 색을 줍니다. 회색 고스트 버튼은 안내문처럼 읽힙니다. */
.pv-send{
  flex:none;width:auto;
  padding:12px 18px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--accent-mid);
  font-size:14px;font-weight:700;letter-spacing:-.02em;
}
.pv-send:active{background:var(--accent-mid);opacity:1;transform:none}
.pv-send:disabled{opacity:.5}

/* 남은 시간 - 버튼과 같은 높이로 늘린 뒤 그 안에서 세로 가운데에 둡니다.
   글자 높이에 맡기면 버튼 높이가 바뀔 때마다 다시 어긋납니다. */
.pv-state{
  align-self:stretch;display:flex;align-items:center;
  font-size:13px;color:var(--muted);font-weight:700;
  font-variant-numeric:tabular-nums;
}
.pv-state.ok{color:var(--ok)}

/* 코드 입력줄 - 입력칸과 확인 버튼의 높이를 맞춥니다(stretch). */
.pv-code{display:flex;align-items:stretch;gap:8px;margin-top:10px}
.pv-input{
  flex:1;min-width:0;padding:13px 14px;border:1px solid var(--rule-2);
  border-radius:12px;background:var(--surface);font-size:16px;
  letter-spacing:.18em;font-variant-numeric:tabular-nums;
}
.pv-input:focus{outline:none;border-color:var(--accent)}
.pv-ok{flex:none;width:auto;padding:0 22px;border-radius:12px;font-size:14.5px}

/* 내 정보의 '비밀번호 변경' 접기 버튼 */
.pwtoggle{
  display:flex;width:100%;align-items:center;justify-content:space-between;
  border:none;background:var(--sunken);border-radius:12px;
  padding:14px 15px;margin:6px 0 14px;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--ink-2);
}
.pwtoggle:active{background:var(--surface-2)}
.pwtoggle.on{color:var(--accent)}
.pwtoggle .mk{font-size:18px;line-height:1;color:var(--faint);font-weight:400}
.pwtoggle.on .mk{color:var(--accent)}

/* ── 시트 ───────────────────────────────────────────────── */
.backdrop{position:fixed;inset:0;background:rgba(33,37,41,.35);z-index:90;
  opacity:0;transition:opacity .2s;backdrop-filter:blur(2px)}
.backdrop.show{opacity:1}
.backdrop[hidden]{display:none}

.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:var(--surface);border-radius:22px 22px 0 0;
  max-height:92vh;overflow-y:auto;
  padding:6px 20px calc(24px + var(--safe-b));
  transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.9,.3,1);
}
/* --drag 는 손가락으로 끌어내린 거리입니다(ui.js 가 넣습니다).
   PC 폭에서는 가운데 정렬 때문에 translate 가 두 축이라, 여기서도
   같은 변수를 써야 끌 때 좌우로 튀지 않습니다. */
@media (min-width:700px){.sheet{max-width:560px;left:50%;transform:translate(-50%,100%)}
  .sheet.show{transform:translate(-50%,var(--drag,0px))}}
.sheet.show{transform:translateY(var(--drag,0px))}
.sheet.dragging{transition:none}
.sheet[hidden]{display:none}

/* 손잡이 - 막대 자체는 4px 라 손가락으로 정확히 누르기 어렵습니다.
   보이는 건 그대로 두고 누를 수 있는 영역만 넓혀 둡니다. */
.handle{
  display:flex;align-items:center;justify-content:center;
  width:120px;height:30px;margin:0 auto 12px;
  cursor:pointer;touch-action:none;
}
.handle::before{content:"";width:42px;height:5px;border-radius:3px;background:#DEE2E6}
.handle:active::before{background:#ADB5BD}
.sheet h2{font-size:20px;font-weight:800;margin:0 0 4px;letter-spacing:-.03em}
.sheet .sh-sub{font-size:13.5px;color:var(--muted);margin:0 0 20px}

/* 일정 상세의 날짜·시간 - 시트에서 가장 먼저 읽혀야 하는 정보입니다.
   날짜 / 시간 / 길이를 나누고 시간을 가장 크게 둡니다.
   왼쪽 띠 색은 일정 카드와 같습니다(typeStyle 이 --c 를 넣어 줍니다). */
.dt-when{position:relative;margin:14px 0 16px;padding:10px 0 10px 16px}
.dt-when::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:2px;
  background:var(--c,var(--accent));
}
.dt-when .d{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.dt-when .t{
  font-size:30px;font-weight:800;line-height:1.2;letter-spacing:-.02em;margin-top:3px;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.dt-when .len{font-size:13px;color:var(--muted);margin-top:4px;font-weight:500}
/* 요청중 - 카드처럼 띠를 옅게. 아직 확정이 아니라는 게 시간 옆에서도 보여야 합니다 */
.dt-when.tentative::before{background:var(--cb,var(--accent-mid))}
/* 취소됨 - 시간에 줄을 긋습니다. 취소된 시간을 유효한 약속으로 잘못 읽는 걸 막습니다 */
.dt-when.cancelled .t{text-decoration:line-through;color:var(--faint)}
.dt-when.cancelled::before{background:var(--rule-2)}

.kv{display:flex;gap:14px;padding:11px 0;box-shadow:inset 0 -1px 0 var(--rule)}
.kv .k{width:56px;flex:none;color:var(--faint);font-size:13px}
.kv .v{flex:1;font-size:14.5px;white-space:pre-wrap;word-break:break-word}

/* ── 빈 상태 · 로딩 ─────────────────────────────────────── */
.empty{text-align:center;color:var(--muted);font-size:14.5px;padding:48px 24px}
.empty .ic{font-size:26px;color:#DEE2E6;margin-bottom:12px;line-height:1}
.empty .msg{margin-bottom:18px;line-height:1.65}
.empty .btn{max-width:220px;margin:0 auto}
.loading{text-align:center;padding:48px;color:var(--faint);font-size:14px}

/* ── 목록 행 ────────────────────────────────────────────── */
.rows{display:flex;flex-direction:column;padding:0 18px}
.row{display:flex;align-items:center;gap:12px;background:transparent;
  padding:16px 0;cursor:pointer;font:inherit;color:inherit;
  text-align:left;width:100%;border:none}
.row+.row{box-shadow:inset 0 1px 0 var(--rule)}
.row:active{background:var(--sunken)}
.row .t{flex:1;font-size:15px;min-width:0;font-weight:500}
.row .t .sub{display:block;font-size:12.5px;color:var(--faint);font-weight:400;margin-top:2px}
/* 설치 행의 앱 아이콘 */
.row .appic{width:40px;height:40px;border-radius:10px;flex:none}

/* 아이폰 설치 안내 */
.iossteps{margin:4px 0 16px;padding-left:22px}
.iossteps li{font-size:15px;line-height:1.7;margin-bottom:10px;color:var(--ink-2)}
.iossteps svg{vertical-align:-3px;color:var(--accent)}
.row .m{font-size:13px;color:var(--faint)}
.row .ar{color:#CED4DA;flex:none;display:flex}
.row.danger .t{color:var(--bad)}

/* ── 토스트 ─────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;top:18px;transform:translate(-50%,-14px);
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:13px;
  font-size:14px;font-weight:500;z-index:300;opacity:0;transition:all .25s;
  max-width:calc(100vw - 32px);box-shadow:0 8px 28px rgba(33,37,41,.24);
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:var(--bad)} .toast.ok{background:var(--ok)}

/* ── 로그인 ─────────────────────────────────────────────── */
/*
   세로 가운데 정렬(flex + justify-content:center)을 쓰지 않습니다.
   내용이 화면보다 길어지면 위쪽이 잘리고 스크롤로도 올라갈 수 없는
   flex 의 고전적인 함정이 있습니다. 회원가입은 입력칸이 네 개라 거기 걸립니다.
   위에서부터 흐르게 두고 상단 여백만 화면 높이에 맞춰 줍니다.
*/
.login{
  min-height:100vh;max-width:420px;margin:0 auto;
  padding:clamp(36px,9vh,84px) 24px calc(40px + var(--safe-b));
}
.login .brand{margin-bottom:28px}
.login .brand h1{font-size:28px;font-weight:800;margin:0 0 8px;letter-spacing:-.035em}
.login .brand p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}

.login .cardbox{padding:0}
/* 폼 바로 아래의 제출 버튼에만 줍니다.
   `.login .btn` 으로 두면 폼 안쪽 깊숙이 들어간 버튼(문자 인증의
   '인증번호 받기' 등)까지 6px 밀어내려 옆 요소와 높이가 어긋납니다. */
.login form > .btn{margin-top:6px}

.login .alt{text-align:center;margin-top:20px;font-size:14px;color:var(--muted)}
.login .alt button{border:none;background:transparent;color:var(--accent);
  font-weight:700;cursor:pointer;padding:6px 4px;font-size:14px}

/* 초대 링크 화면의 안내·오류 상자 */
.notebox{margin-top:22px;background:var(--bad-soft);
  padding:15px 17px;border-radius:14px;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.notebox[hidden]{display:none}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 일정 상세 - 끝난 일정 표시 */
.endbadge{display:inline-block;margin:0 0 8px;padding:3px 9px;border-radius:7px;
  border:1px solid var(--rule-2);color:var(--muted);font-size:12px;font-weight:700}

/* 금액 입력칸 - 오른쪽 끝에 '원'. 요청 보내기 시트와 일정 등록·수정 시트가 함께 씁니다. */
.feewrap{position:relative}
.feewrap input{padding-right:34px;text-align:right;font-variant-numeric:tabular-nums}
.feewrap .won{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:14px}

/* ── 월간 달력을 화면 가득 (calendar.html) ────────────────────
   남는 높이를 JS(fitCalendar)가 재서 --calh 로 넣어 줍니다.
   날짜 칸은 고정 높이 대신 남는 높이를 주(週) 수만큼 나눠 갖습니다. */
#monthView{display:flex;flex-direction:column}
#monthView .calwrap{display:flex;flex-direction:column;flex:1;min-height:0}
#cal.days{height:var(--calh,auto);grid-auto-rows:1fr}
#cal.days .cday{height:auto;min-height:0}

/* 그날 일정 레이어 (calendar.html) */
.dayhead{display:flex;align-items:center;gap:8px;padding:2px 2px 12px}
.dayhead b{font-size:18px;font-weight:800;letter-spacing:-.03em}
.dayhead span{font-size:13px;color:var(--faint)}
.dayhead .btn{margin-left:auto;width:auto;padding:7px 12px;font-size:13px}
#daySheet .list{gap:10px;padding:0 0 6px}