/* 날짜 고르기 — chrome.css 가 먼저 실리므로 토큰을 바로 쓰고, 뒤의 값은 토큰이 없을 때의 바닥값이다. */

.calwrap{position:relative}
/* 달력 그림은 칸 오른쪽 — 글자 시작선(16px)을 다른 칸과 맞춘다 */
.calwrap > input{cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5' stroke='%23999' stroke-width='1.8'/%3E%3Cpath d='M3.5 9.5h17M8 3.5v3M16 3.5v3' stroke='%23999' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:44px}
.calwrap > input:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2.5' stroke='%231EC95B' stroke-width='1.8'/%3E%3Cpath d='M3.5 9.5h17M8 3.5v3M16 3.5v3' stroke='%231EC95B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}

/* 떠 있는 판 — 칸 바로 아래, 그림자는 한 단만 */
/* z 70 — 문의 단추(chat.css .chatbtn 60 · .chatwrap 61)보다 위. 아래면 좁은 화면에서 '확인' 이 가려진다. */
.calbox{position:absolute;z-index:70;top:calc(100% + 6px);left:0;
  width:min(320px, calc(100vw - 32px));
  background:#fff;border:1px solid var(--bd-l, #E4E8F1);
  border-radius:var(--rd12, 12px);
  box-shadow:0 4px 16px rgba(28,24,18,.10);
  padding:var(--s4, 16px)}
/* 아래에 자리가 없으면 위로 뒤집는다 */
.calbox.up{top:auto;bottom:calc(100% + 6px)}
.calbox[hidden]{display:none}

.calhd{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s2, 8px);margin-bottom:var(--s3, 12px)}
.calhd .ttl{font-size:15px;font-weight:700;color:var(--t01, #000);
  font-variant-numeric:tabular-nums}
/* 달 넘기기 — 36px, 좁은 화면에서는 44 */
.calhd .nav{display:grid;place-items:center;width:36px;height:36px;
  border:0;background:none;border-radius:var(--rd8, 8px);
  color:var(--t03, #666);cursor:pointer;transition:background .15s,color .15s}
.calhd .nav:hover{background:var(--n50, #F9F9F9);color:var(--t01, #000)}
.calhd .nav:focus-visible{outline:2px solid var(--g600, #18A149);outline-offset:-2px}
.calhd .nav svg{display:block}

.caldow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  margin-bottom:var(--s1, 4px)}
.caldow span{text-align:center;font-size:12px;font-weight:500;
  color:var(--t04, #999);line-height:24px}

.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
/* 날짜 한 칸 — 동그라미는 글자 크기, 누르는 칸은 손가락 기준으로 넓게 */
.cd{display:grid;place-items:center;height:38px;padding:0;border:0;
  background:none;font:inherit;font-size:14px;color:var(--t01, #000);
  font-variant-numeric:tabular-nums;cursor:pointer;border-radius:var(--rd8, 8px)}
.cd > span{display:grid;place-items:center;width:32px;height:32px;
  border-radius:50%;transition:background .12s,color .12s}
.cd:hover:not([disabled]) > span{background:var(--n50, #F9F9F9)}
.cd:focus-visible{outline:2px solid var(--g600, #18A149);outline-offset:-2px}
/* 오늘 — 테두리만(칠하면 고른 날과 헷갈린다) */
.cd.now > span{box-shadow:inset 0 0 0 1px var(--bd, #DADADA)}
/* 고른 날 — 이 판에서 초록은 이것 하나다 */
.cd.on > span{background:var(--g500, #1EC95B);color:#fff;box-shadow:none}
.cd.on:hover > span{background:var(--g500, #1EC95B)}
/* 못 고르는 날 — disabled 라 누를 수도, 키보드가 닿지도 않는다 */
.cd[disabled]{cursor:default;color:var(--bd, #DADADA)}
.cd[disabled]:hover > span{background:none}
/* 앞뒤 달의 빈 자리 */
.cd.out{visibility:hidden}

.calft{display:flex;gap:var(--s2, 8px);margin-top:var(--s4, 16px);
  padding-top:var(--s3, 12px);border-top:1px solid var(--bd-l, #E4E8F1)}
.cbtn{flex:1 1 0;min-height:44px;padding:0 var(--s4, 16px);border:0;
  border-radius:var(--rd8, 8px);font:inherit;font-size:15px;font-weight:700;
  cursor:pointer;transition:background .15s}
.cbtn.ghost{background:var(--n50, #F9F9F9);color:var(--t02, #333)}
.cbtn.ghost:hover{background:#EFEFEF}
.cbtn.go{background:var(--g500, #1EC95B);color:#fff}
.cbtn.go:hover{background:var(--g600, #18A149)}
.cbtn.go:disabled{background:var(--bd-l, #E4E8F1);color:var(--t04, #999);cursor:default}
.cbtn:focus-visible{outline:2px solid var(--g600, #18A149);outline-offset:2px}

/* 좁은 화면 — 아래에서 올라오는 시트로 바꾸고 칸 · 단추를 손가락 크기로 올린다 */
@media (max-width:640px){
  .calbox{position:fixed;inset:auto 0 0 0;top:auto;bottom:0;width:auto;
    max-height:min(560px, 88dvh);overflow-y:auto;
    border-radius:var(--rd12, 12px) var(--rd12, 12px) 0 0;
    border-left:0;border-right:0;border-bottom:0;
    box-shadow:0 -6px 24px rgba(28,24,18,.14);
    padding:var(--s5, 20px) var(--s4, 16px)
            calc(var(--s5, 20px) + env(safe-area-inset-bottom, 0px))}
  .calbox.up{top:auto;bottom:0}
  .calhd .nav{width:44px;height:44px}
  .calhd .ttl{font-size:16px}
  .cd{height:46px;font-size:15px}
  .cd > span{width:38px;height:38px}
  .caldow span{line-height:28px;font-size:13px}
  .cbtn{min-height:48px}
}