/* ============================================================
     Reset (scoped) — safe to embed inside an existing page
  ============================================================ */
  .tc-widget, .tc-widget *{ box-sizing:border-box; margin:0; padding:0; }

  /* ============================================================
     Design tokens — derived from #9889a7 / #e5e1e9 / #ffffff
  ============================================================ */
  .tc-widget{
    --tc-primary:      #9889a7;   /* brand accent */
    --tc-primary-dark: #7c6c8c;   /* hover / active */
    --tc-primary-deep: #55475f;   /* headings, high-contrast text */
    --tc-light:        #e5e1e9;   /* tint backgrounds */
    --tc-white:         #ffffff;
    --tc-muted:         #b3abbb;  /* disabled / closed text */
    --tc-border:        #ece7f0;  /* hairlines */
    --tc-bg-soft:        #ffffff; /* past / empty cell fill — kept white */
    --tc-shadow: 0 14px 34px rgba(122,105,138,.20), 0 2px 8px rgba(122,105,138,.10);
    --tc-radius: 16px;

    width:100%;
    max-width:1540px;
    margin:0 auto;
    font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--tc-primary-deep);
  }

  /* ============================================================
     Header / intro copy
  ============================================================ */
  .tc-heading{ text-align:center; margin-bottom:22px; }
  .tc-heading h2{ font-size:24px; font-weight:700; letter-spacing:.5px; }
  .tc-heading p{ margin-top:6px; font-size:13.5px; color:var(--tc-primary); }

  /* ============================================================
     View toggle (月曆 / 列表)
  ============================================================ */
  .tc-view-toggle-row{ display:flex; justify-content:flex-end; margin-bottom:20px; padding: 0 50px; }
  .tc-view-toggle{
    display:inline-flex; gap:4px; padding:4px;
    background:var(--tc-light); border-radius:999px;
  }
  .tc-view-btn{
    border:none; background:transparent; cursor:pointer;
    padding:8px 24px; border-radius:999px;
    font-size:13.5px; font-weight:700; color:var(--tc-primary-deep);
    font-family:inherit;
    transition:background .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .tc-view-btn:not(.is-active):hover{ background:rgba(255,255,255,.6); }
  .tc-view-btn.is-active{
    background:var(--tc-primary); color:var(--tc-white);
    box-shadow:0 4px 10px rgba(122,105,138,.28);
  }
  .tc-view-btn:focus-visible{ outline:3px solid var(--tc-primary-dark); outline-offset:2px; }

  /* ============================================================
     Body row — nav buttons flank the calendar / list content
  ============================================================ */
  .tc-body-row{
    display:flex; align-items:center; gap:14px;
  }
  .tc-body-content{ flex:1 1 auto; min-width:0; width:100%; }
  .tc-nav{
    width:40px; height:40px; flex:0 0 auto;
    border:none; border-radius:50%;
    background:var(--tc-white); color:var(--tc-primary-deep);
    box-shadow:var(--tc-shadow);
    font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:transform .15s ease, background .15s ease, color .15s ease;
  }
  .tc-nav:hover{ background:var(--tc-primary); color:var(--tc-white); transform:translateY(-2px); }
  .tc-nav.is-disabled{ opacity:.32; pointer-events:none; box-shadow:none; }

  .tc-body-row .tc-prev{ margin-left: 10px;}
  .tc-body-row .tc-next{ margin-right: 10px;}

  /* ============================================================
     Calendars row
  ============================================================ */
  .tc-calendars{
    display:flex; gap:24px; align-items:flex-start;
    flex-wrap:wrap; justify-content:center;
  }
  .tc-month{
    flex:1 1 640px; max-width:48%;
    background:var(--tc-white);
    border-radius:var(--tc-radius);
    box-shadow:var(--tc-shadow);
    overflow:hidden;
  }
  .tc-month-header{
    padding:16px 12px;
    text-align:center;
    font-size:17px; font-weight:700; letter-spacing:1px;
    color:var(--tc-white);
    background:linear-gradient(135deg,var(--tc-primary),var(--tc-primary-dark));
  }
  .tc-weekdays{
    display:grid; grid-template-columns:repeat(7,1fr);
    background:var(--tc-light);
    color:var(--tc-primary-deep);
    font-size:13px; font-weight:700;
    text-align:center;
  }
  .tc-weekdays span{ padding:10px 0; }

  /* ============================================================
     Day grid
  ============================================================ */
  .tc-days{
    position:relative;
    display:grid; grid-template-columns:repeat(7,1fr);
    gap:1px; background:var(--tc-border);
  }
  .tc-month-empty{
    position:absolute; inset:0; z-index:1;
    display:flex; align-items:center; justify-content:center;
    padding:20px; text-align:center;
    background:rgba(255,255,255,.85);
    color:var(--tc-primary-deep); font-size:18px; font-weight:700;
    pointer-events:none;
  }
  .tc-day{
    position:relative;
    background:var(--tc-white);
    min-height:90px;
    padding:8px 6px;
    display:flex; flex-direction:column; align-items:center;
    text-align:center;
    transition:background .15s ease, box-shadow .15s ease;
  }
  .tc-day-num{ font-size:14px; font-weight:600; color:var(--tc-primary-deep); }

  .tc-day.is-empty{ background:var(--tc-bg-soft); }
  .tc-day.is-past{ background:var(--tc-bg-soft); }
  .tc-day.is-past .tc-day-num{ color:#d9d3df; }

  .tc-price{
    margin-top:6px;
    display:inline-block;
    background:rgba(152,137,167,.14);
    color:var(--tc-primary-deep);
    font-size:12.5px; font-weight:700;
    padding:3px 8px; border-radius:999px;
    white-space:nowrap;
  }
  .tc-price small{ font-weight:500; font-size:10.5px; margin-left:1px; }
  .tc-day .tc-price{
    display:block; max-width:100%; margin-top:4px; padding:2px 0;
    background:transparent; border-radius:0; line-height:1.25;
    white-space:normal; overflow-wrap:anywhere;
  }
  .tc-day .tc-price small{ display:inline-block; }
  .tc-status{ margin-top:4px; display: block; font-size:11px; }
  .tc-status.open{ color:var(--tc-primary-dark); font-weight:600; }
  .tc-status.closed{ color:var(--tc-muted); font-weight:600; }

  .tc-day.is-open{ cursor:pointer; background: #e5e1e9; padding:0; }
  .tc-day.is-open:hover{ background:var(--tc-light); }
  .tc-day.is-open:focus-visible{ outline:3px solid var(--tc-primary-dark); outline-offset:-3px; }

  .tc-day.is-closed .tc-day-num{ color:var(--tc-muted); }
  .tc-day.is-closed{ cursor:not-allowed; }


  .tc-day.is-selected{
    box-shadow:inset 0 0 0 3px var(--tc-primary-dark);
    background:var(--tc-light);
  }
  /* 讓整個卡片內的連結填滿格子，並保持樣式 */
  .tc-day > a, .tc-list-row{position: relative;}
  .tc-day > a, .tc-list-row > a { top: 0; left: 0;padding: 5px 6px; position: absolute; display:block; width:100%; height:100%; color:inherit; text-decoration:none; }
  .tc-day > a{ position:relative; display:flex; flex-direction:column; align-items:center; flex:1; height:auto; }
  /* .tc-day > a:focus, .tc-list-row > a:focus { outline:3px solid var(--tc-primary-dark); outline-offset:-3px; } */
  .tc-check{
    position:absolute; top:6px; left:6px;
    width:16px; height:16px; border-radius:50%;
    background:var(--tc-primary-dark); color:var(--tc-white);
    font-size:10px; line-height:16px; text-align:center; font-weight:700;
  }

  /* ============================================================
     List view (toggle alternative to the calendar grid)
  ============================================================ */
  .tc-list{
    display:none; gap:24px; justify-content:center;
  }
  .tc-widget.tc-view-list .tc-calendars{ display:none; }
  .tc-widget.tc-view-list .tc-list{ display:flex; }

  .tc-list-month{
    flex:1 1 640px; max-width:800px;
    background:var(--tc-white);
    border-radius:var(--tc-radius);
    box-shadow:var(--tc-shadow);
    overflow:hidden;
  }
  .tc-list-rows{ display:flex; flex-direction:column; }
  .tc-list-row{
    position:relative;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:14px 20px;
    border-bottom:1px solid var(--tc-border);
    transition:background .15s ease;
  }
  .tc-list-row:last-child{ border-bottom:none; }
  .tc-list-date{ font-size:14px; font-weight:700; color:var(--tc-primary-deep); display:flex; align-items:center; }
  .tc-list-right{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
  .tc-list-right .tc-price{ margin-top:0; }
  .tc-list-right .tc-status{ margin-top:0; }


  .tc-list-row.is-open{ cursor:pointer;padding: 0; }
  .tc-list-row.is-open a{ position: relative; display: flex; padding: 14px 20px; align-items:center; gap:12px; justify-content: space-between; }
  .tc-list-row.is-open:hover{ background:var(--tc-light); }
  /* .tc-list-row.is-open:focus-visible{ outline:3px solid var(--tc-primary-dark); outline-offset:-3px; } */
  .tc-list-row.is-closed .tc-list-date{ color:var(--tc-muted); }

  .tc-list-row.is-selected{
    background:var(--tc-light);
  }
  .tc-list-row.is-selected .tc-list-date{ color:var(--tc-primary-dark); }
  .tc-list-row.is-selected .tc-list-date::before{
    content:"\2713"; margin-right:6px; color:var(--tc-primary-dark); font-weight:700;
  }

  .tc-list-empty{ padding:26px 20px; text-align:center; color:var(--tc-muted); font-size:13px; }

  /* ============================================================
     Motion fade for month switching
  ============================================================ */
  .tc-days, .tc-month-header{ transition:opacity .18s ease; }
  .tc-fade{ opacity:0; }

  @media (prefers-reduced-motion:reduce){
    .tc-nav, .tc-days, .tc-month-header{ transition:none !important; }
  }

  /* ============================================================
     RWD
  ============================================================ */
  /* RWD：寬度 1200px 以下只顯示一個月曆 */
@media (max-width: 1024px) {
  #tcWidget{padding: 0 40px;}

  #tcMonth1,
  #tcListMonth1 {
    display: none !important;
  }

  /* 讓剩下那一個月曆撐滿容器寬度（視你原本用 flex 或 grid 排版而定） */
  #tcMonth0,
  #tcListMonth0 {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  #tcCalendars,
  #tcList {
    flex-direction: column;
  }

}
  @media (max-width:960px){
    .tc-body-row{ padding: 0 20px; align-items:center; gap:10px; position: relative; }
    .tc-body-row .tc-body-content{order: 1;}
    .tc-body-row .tc-prev{position: absolute; left: 30px; top: 13px;}
    .tc-body-row .tc-next{position: absolute; right: 30px; top: 13px;}
    .tc-month-header{padding: 20px 12px;}
    .tc-view-toggle-row{ padding: 0 20px;}
    .tc-calendars{ flex-direction:column; align-items:stretch; }
    .tc-month{ max-width:100%; }
    .tc-day{ min-height: 60px;}
    .tc-list{ flex-direction:column; }
    .tc-list-month{ max-width:100%; }
  }
  @media (max-width:520px){
    .tc-body-row .tc-prev{position: absolute; left: 30px; top: 8px; width: 30px; height: 30px;}
    .tc-body-row .tc-next{position: absolute; right: 30px; top: 8px; width: 30px; height: 30px;}
    .tc-day{ min-height:64px; padding:6px 3px; }
    .tc-day-num{ font-size:12.5px; }
    .tc-price{ font-size:10.5px; padding:2px 6px; }
    .tc-day.is-open{ padding:0; }
    .tc-day > a{ padding:6px 2px; }
    .tc-day .tc-price{ font-size:clamp(8px, 2.4vw, 10.5px); }
    .tc-day .tc-price small{ display:block; margin-left:0; }
    .tc-status{ font-size:9.5px; }
    .tc-month-header{ font-size:15px; padding:12px; }
    .tc-weekdays span{ padding:7px 0; font-size:11.5px; }
    .tc-heading h2{ font-size:20px; }
    .tc-list-row{ padding:11px 14px; }
    .tc-list-row.is-open a{ padding:11px 14px; }
    .tc-list-date{ font-size:12.5px; }
    .tc-view-btn{ padding:7px 18px; font-size:12.5px; }
    .tc-nav{ width:36px; height:36px; font-size:14px; }
    #tcWidget{padding: 0;}
    .tc-view-toggle{width: 100%;}
    .tc-view-toggle .tc-view-btn{ width: 50%;}
  }