@layer reset,base,components,responsive;
@layer reset {
  *,*::before,*::after {box-sizing:border-box}
  [hidden],template {display:none!important}
  body {margin:0} img {max-width:100%;height:auto}
  button,input,summary {font:inherit}
}
@layer base {
  :root {font-size:16px;color:#252A27;background:#F7F3EA;font-family:system-ui,"PingFang TC",sans-serif;--ink:#252A27;--gold:#D4B77A;--line:#d5cec0;--red:#A84636}
  body {line-height:1.8;overflow-wrap:anywhere}
  h1,h2,h3,h4 {font-family:"Songti TC","Noto Serif TC",serif;font-weight:600;line-height:1.4;margin:0 0 1rem}
  h1 {font-size:clamp(2.3rem,4.4vw,3.7rem);max-width:22ch}
  h2 {font-size:1.7rem} h3 {font-size:2rem} h4 {font-size:1.1rem}
  p {margin:0 0 1rem} a {color:inherit;text-underline-offset:.22em}
  a:focus-visible,button:focus-visible,summary:focus-visible {outline:3px solid var(--red);outline-offset:4px}
  .dark a:focus-visible,.site-header a:focus-visible,.site-header summary:focus-visible {outline-color:var(--gold)}
  .wrap {width:min(1120px,calc(100% - 40px));margin-inline:auto}
  .eyebrow {color:#776242;font-weight:600;letter-spacing:.12em;margin-bottom:1.3rem}
  .dark {background:var(--ink);color:#F7F3EA}
  .dark .eyebrow {color:var(--gold)}
}
@layer components {
  .preview-note {padding:.35rem 1rem;text-align:center;font-size:1rem}
  .site-header {background:var(--ink);color:#F7F3EA}
  .header-row {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-block:1rem}
  .brand {display:inline-flex;align-items:center;min-height:44px}
  .brand img {width:160px;filter:invert(1)}
  .navigation {max-width:100%}
  .navigation summary {cursor:pointer;border:1px solid #948975;padding:.45rem .8rem;min-height:44px;min-width:80px}
  .navigation[open] {flex-basis:100%}
  .navigation[open] summary {width:fit-content;margin-left:auto}
  .site-nav {display:flex;gap:.35rem 1.3rem;flex-wrap:wrap;padding-top:1rem}
  .site-nav a {display:inline-flex;align-items:center;min-height:44px;padding:.3rem}
  .hero {padding-block:3rem 1.5rem}
  .hero p {max-width:55rem}
  .source-state {padding-block:1.5rem;border-block:1px solid var(--line)}
  .source-state h2 {font:600 1.1rem/1.8 system-ui,"PingFang TC",sans-serif}
  .source-ready-state {border-left:3px solid #536746;padding-left:1rem}
  .source-failure-state {border-left:3px solid var(--red);padding-left:1rem}
  .actions {display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}
  button,.button,.month-jumps a,.month-actions a {display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.5rem 1rem;border:1px solid #8b806d;color:inherit;background:transparent;text-decoration:none;text-align:center;cursor:pointer;font-weight:600;font-size:1rem;line-height:1.5;max-width:100%}
  button:disabled {cursor:wait;opacity:.65}
  .primary {background:var(--red);border-color:var(--red);color:#fff}
  .dark .primary {background:var(--gold);border-color:var(--gold);color:var(--ink)}
  .calendar-navigation {padding-block:1.5rem}
  .month-jumps {display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 2rem}
  .month-jumps a {min-width:6.4rem}
  .month-jumps [aria-current] {background:var(--gold);color:var(--ink)}
  .legend h2 {font-size:1.3rem}
  .legend dl {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 2rem;margin:0}
  .legend dt {font-weight:700}.legend dd {margin:0}
  .calendar-section {padding-block:1rem 3rem}
  .calendar-section>h2 {font-size:1.5rem}
  .month-card {margin:0 0 3rem;padding-top:1.5rem;border-top:1px solid var(--line);scroll-margin-top:1rem}
  .month-card-header {margin-bottom:1rem}
  .month-date-summary {padding:1rem;border-left:3px solid var(--gold);margin-bottom:1.3rem}
  .month-date-summary-item {display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:.3rem 0}
  .calendar {table-layout:fixed;border-collapse:collapse;width:100%;font-size:1rem}
  .calendar th {font-weight:500;padding:.5rem .15rem}
  .calendar td {vertical-align:top;border:1px solid var(--line);padding:.75rem .6rem;line-height:1.6;overflow-wrap:anywhere}
  .day b {display:block;font-size:1.15rem;line-height:1.6;font-variant-numeric:tabular-nums}
  .day-label {display:block;margin-top:.35rem;font-size:1rem}
  .family-day {background:#e7ecdf}.family-holiday {background:#efe2c8}
  .general-quiet {background:#edf0e9}.closed {background:#e5d8d3;border:2px solid #866857!important}
  .unknown {background:#faf7f0}.empty {background:#eee9df}
  .past-marker {display:block;border-top:1px dashed #8c806d;margin-top:.3rem;color:#5a5144;font-size:1rem}
  .is-past b {color:#625b50}
  .month-actions {display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
  .month-actions a {flex-direction:column;gap:.15rem;text-align:left;align-items:flex-start}
  .month-actions strong,.month-actions span {font-size:1rem}
  .verified-answer {margin-top:2rem;border-top:1px solid var(--line);padding-top:2rem}
  .official-answer h2 {font-size:1.4rem}
  .official-answer ul {padding-left:1.5rem}
  .secondary-notice a {display:inline-flex;align-items:center;min-height:44px}
  .plain-answers {padding-block:3rem}.plain-answers .wrap {max-width:1120px}
  .page-footer {padding-block:2rem;border-top:1px solid #655d4f}
  .page-footer h2 {color:var(--gold)}
  .capture-mode .verified-answer,.capture-mode .month-jumps,.capture-mode .month-actions {display:none}
}
@layer responsive {
  @media(max-width:767px) {
    .legend dl {grid-template-columns:repeat(2,minmax(0,1fr))}
    .calendar td {padding:.45rem .15rem}
    .day b {font-size:1.1rem}
    .day-label {line-height:1.45}
    .day-symbol {display:block}
    .day-tag {white-space:nowrap}
    .hero {padding-block:2rem 1rem}
  }
  @media(max-width:430px) {
    h1 {font-size:2rem;text-wrap:balance}
    .wrap {width:calc(100% - 32px)}
    .legend dl {grid-template-columns:1fr;gap:.75rem}
    .actions>* {width:100%}
    .month-jumps a {min-width:0;flex:1 1 6rem}
    .calendar td {padding:.4rem .12rem}
    .day-label {letter-spacing:-.03em}
  }
  .large-text .calendar {display:block}
  .large-text .calendar thead {display:none}
  .large-text .calendar tbody,.large-text .calendar tr {display:contents}
  .large-text .calendar td {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:.2rem .75rem;width:100%;padding:.7rem;align-items:start}
  .large-text .calendar .empty {display:none}
  .large-text .day b::after {content:' 日'}
  .large-text .day::before {content:'週' attr(data-weekday);grid-column:1;grid-row:2}
  .large-text .day b {grid-column:1;grid-row:1}
  .large-text .day-label {grid-column:2;grid-row:1 / span 2;margin:0}
  .large-text .day-symbol {display:inline}
  .large-text .past-marker {grid-column:1 / -1}
  .large-text .legend dl {grid-template-columns:1fr}
}
