:root{
  --paper:#F5F1E6;      /* 生成りの背景 */
  --white:#FFFFFF;
  --ink:#2B3A30;        /* 本文 */
  --forest:#1F3D2B;     /* 深緑（ヘッダー・カード） */
  --gold:#C9A227;       /* ゴールド */
  --line:#D9D2C0;
  --sub:#6E7A6C;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.7; -webkit-text-size-adjust:100%;
}
#cal{max-width:860px;margin:0 auto;padding:36px 20px 56px}

/* ヘッダー */
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:26px}
.ym{margin:0 0 2px;color:var(--gold);font-size:20px;font-weight:700;letter-spacing:.02em}
.head h1{margin:0 0 4px;font-size:clamp(28px,7vw,40px);font-weight:800;letter-spacing:.01em;color:var(--forest)}
.sub{margin:0;color:var(--sub);font-size:14px}
.head-img{flex:none;width:132px}
.head-img img{width:100%;display:block;border-radius:8px}
@media(max-width:560px){.head-img{width:92px}}

/* 凡例 */
.legend{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
.lg{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--white);
  border:1px solid var(--line);border-radius:10px;font-size:15px;font-weight:600}
.lg.dark{background:var(--forest);color:#fff;border-color:var(--forest)}
.lg i{font-style:normal;font-size:13px}
@media(max-width:520px){.legend{grid-template-columns:1fr}}

/* カレンダー */
.grid{width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid var(--line);table-layout:fixed}
.grid th{background:var(--forest);color:#fff;font-weight:600;font-size:14px;padding:10px 4px}
.grid th.sat{color:#BFD8E8}
.grid th.sun{color:#F0C0C0}
.grid td{border:1px solid var(--line);vertical-align:top;height:96px;padding:7px 8px}
.grid td.empty{background:#FAF8F1}
.grid td.has{background:#FEFDF8}
.d{display:block;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:3px}
.ev{display:block;font-size:11.5px;line-height:1.55;margin-top:3px}
.ev .mark{font-style:normal;font-size:9px;margin-right:3px;vertical-align:1px}
.ev b{font-weight:600}
.ev em{display:block;font-style:normal;color:var(--sub);padding-left:12px}
.ev em.note{color:var(--gold)}
@media(max-width:640px){
  .grid td{height:auto;min-height:64px;padding:5px 4px}
  .d{font-size:13px}
  .ev{font-size:10px}
  .ev em{padding-left:0}
}

/* 今月の予定 */
.summary{margin:34px 0 0}
.summary h2{font-size:22px;font-weight:800;color:var(--forest);margin:0 0 14px}
.summary article{background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;margin:0 0 12px}
.summary h3{margin:0 0 8px;font-size:16px;color:var(--gold);display:flex;align-items:center;gap:7px}
.summary h3 i{font-style:normal;font-size:13px}
.summary p{margin:3px 0;font-size:14.5px}
.summary .note{margin-top:10px;font-size:12.5px;color:var(--sub)}

/* 参加方法 */
.join{margin:22px 0 0;background:var(--forest);color:#fff;border-radius:14px;padding:24px 22px}
.join h2{margin:0 0 16px;font-size:19px;font-weight:800;color:#fff}
.join-body{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.join .svc{margin:0 0 10px;color:var(--gold);font-weight:700;font-size:15px}
.join .k{margin:6px 0 0;font-size:12px;color:#B9C6B8}
.join .v{margin:0;font-size:22px;font-weight:800;letter-spacing:.04em}
.join-qr{flex:none;width:150px;background:#fff;padding:8px;border-radius:8px}
.join-qr img{width:100%;display:block}
.join-note{margin:16px 0 0;font-size:12.5px;color:#B9C6B8}
/* QRが無いときはID/パスコードを横並びにして間延びさせない */
.join-body.no-qr .ids{display:flex;gap:36px;flex-wrap:wrap}
.join-body.no-qr .ids .k{margin-top:0}
/* タップでコピー */
.v.copyable{cursor:pointer;position:relative;display:inline-block;
  border-bottom:1px dashed rgba(255,255,255,.35);transition:color .15s}
.v.copyable:hover{color:var(--gold)}
.v.copyable::after{content:"コピーしました";position:absolute;left:0;top:-22px;
  font-size:11px;font-weight:600;color:var(--gold);opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
.v.copied::after{opacity:1}
/* ZoomのURLがある場合のボタン */
.zoom-btn{display:inline-block;margin-top:16px;background:var(--gold);color:#22271f;
  text-decoration:none;font-weight:800;font-size:15px;padding:12px 24px;border-radius:10px}
.zoom-btn:active{transform:translateY(1px)}
@media(max-width:520px){
  .join-body{flex-direction:column;align-items:flex-start}
  .join-qr{width:132px;align-self:center}
}

.footnote{margin:22px 0 0;font-size:12px;color:var(--sub)}

@media print{
  body{background:#fff}
  #cal{padding:12px}
  .join{background:#fff;color:var(--ink);border:1px solid var(--line)}
  .join h2,.join .v{color:var(--ink)}
  .join .k,.join-note{color:var(--sub)}
}