.container--rokuyo { max-width: 1080px; }
.rokuyo-panel { overflow: hidden; }
.rokuyo-heading,
.rokuyo-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.rokuyo-heading h2,
.rokuyo-detail-heading h2 { margin: 0; }
.rokuyo-step { margin: 0 0 .25rem; color: var(--color-primary, #146b63); font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.rokuyo-navigation { display: flex; flex-wrap: wrap; gap: .5rem; }
.rokuyo-navigation .button { min-height: 44px; }
.rokuyo-selectors { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.rokuyo-selectors label { display: grid; gap: .35rem; min-width: 9rem; font-weight: 700; }
.rokuyo-selectors select { min-height: 44px; width: 100%; padding: .55rem .7rem; border: 1px solid #9ebbb7; border-radius: .55rem; background: #fff; color: #163a36; font: inherit; }
.rokuyo-range-note { margin: .65rem 0 0; color: #526b68; font-size: .9rem; }
.rokuyo-month-title { margin: 1.4rem 0 .8rem; text-align: center; font-size: clamp(1.35rem, 4vw, 1.8rem); }
.rokuyo-month-title:focus { outline: 3px solid #f1b84b; outline-offset: 4px; }
.rokuyo-problem-notice,
.rokuyo-notice { margin: 1rem 0; padding: .9rem 1rem; border-left: 4px solid #bd7725; border-radius: .45rem; background: #fff7e8; color: #57360e; overflow-wrap: anywhere; }
.rokuyo-calendar-wrap { width: 100%; overflow: hidden; border: 1px solid #c9dcd9; border-radius: .8rem; background: #fff; }
.rokuyo-calendar { width: 100%; table-layout: fixed; border-collapse: collapse; }
.rokuyo-calendar th { padding: .6rem .25rem; background: #e8f3f1; color: #244b46; font-size: .9rem; }
.rokuyo-calendar th:first-child { color: #a5443d; }
.rokuyo-calendar th:last-child { color: #315e9d; }
.rokuyo-calendar td { height: 5.4rem; padding: 0; border-top: 1px solid #dbe8e6; border-right: 1px solid #dbe8e6; vertical-align: top; }
.rokuyo-calendar td:last-child { border-right: 0; }
.rokuyo-calendar td.is-empty { background: #f6f8f8; }
.rokuyo-calendar td > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; width: 100%; height: 100%; min-height: 5.4rem; padding: .35rem .15rem; border: 0; background: transparent; color: #173d38; cursor: pointer; font: inherit; }
.rokuyo-calendar td > button:hover { background: #edf7f5; }
.rokuyo-calendar td > button:focus-visible { position: relative; z-index: 1; outline: 3px solid #dd8a23; outline-offset: -3px; }
.rokuyo-calendar td.is-selected > button { background: #dff2ee; box-shadow: inset 0 0 0 3px #167168; }
.rokuyo-calendar td.is-today > button { box-shadow: inset 0 0 0 2px #7953a5; }
.rokuyo-calendar td.is-selected.is-today > button { box-shadow: inset 0 0 0 3px #167168, inset 0 0 0 5px #fff; }
.rokuyo-calendar td[data-rokuyo="大安"] .rokuyo-day-name::before { content: "吉 "; font-size: .68em; }
.rokuyo-calendar td[data-rokuyo="仏滅"] .rokuyo-day-name::before { content: "慎 "; font-size: .68em; }
.rokuyo-day-number { font-size: 1rem; font-weight: 800; }
.rokuyo-day-name { font-size: .8rem; font-weight: 700; white-space: nowrap; }
.rokuyo-calendar td[data-rokuyo="大安"] .rokuyo-day-name { color: #a44b18; }
.rokuyo-calendar td[data-rokuyo="仏滅"] .rokuyo-day-name { color: #604c74; }
.rokuyo-today-label { padding: .05rem .25rem; border-radius: .25rem; background: #7953a5; color: #fff; font-size: .65rem; font-weight: 800; }
.rokuyo-detail { margin-top: 1.4rem; padding: 1.1rem; border: 1px solid #bfd8d3; border-radius: .8rem; background: #f6fbfa; }
.rokuyo-detail-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0 0; }
.rokuyo-detail-list > div { min-width: 0; padding: .85rem; border-radius: .65rem; background: #fff; }
.rokuyo-detail-list dt { color: #586e6b; font-size: .8rem; font-weight: 700; }
.rokuyo-detail-list dd { margin: .3rem 0 0; color: #153f39; font-weight: 800; overflow-wrap: anywhere; }
#rokuyo-detail-name[data-rokuyo="大安"] { color: #a44b18; }
#rokuyo-detail-name[data-rokuyo="仏滅"] { color: #604c74; }
.rokuyo-month-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.rokuyo-month-lists section { min-width: 0; padding: 1rem; border-radius: .75rem; background: #eef7f5; }
.rokuyo-month-lists h2 { margin: 0 0 .45rem; font-size: 1.05rem; }
.rokuyo-month-lists p { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
.rokuyo-meanings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.rokuyo-meanings > div { padding: .8rem; border-radius: .55rem; background: #f3f8f7; }
.rokuyo-meanings dt { font-weight: 800; }
.rokuyo-meanings dd { margin: .25rem 0 0; }

@media (max-width: 640px) {
  .rokuyo-heading,
  .rokuyo-detail-heading { display: grid; }
  .rokuyo-navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .rokuyo-navigation .button { min-width: 0; padding-inline: .35rem; font-size: .82rem; }
  .rokuyo-selectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .rokuyo-selectors label { min-width: 0; }
  .rokuyo-calendar th { padding: .45rem 0; font-size: .75rem; }
  .rokuyo-calendar td,
  .rokuyo-calendar td > button { height: 4.45rem; min-height: 4.45rem; }
  .rokuyo-calendar td > button { gap: .08rem; padding: .2rem 0; }
  .rokuyo-day-number { font-size: .86rem; }
  .rokuyo-day-name { font-size: .65rem; }
  .rokuyo-today-label { padding-inline: .12rem; font-size: .55rem; }
  .rokuyo-detail-list { grid-template-columns: 1fr; }
  .rokuyo-month-lists,
  .rokuyo-meanings { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .rokuyo-calendar td,
  .rokuyo-calendar td > button { height: 4.1rem; min-height: 4.1rem; }
  .rokuyo-day-name { font-size: .6rem; }
  .rokuyo-calendar td[data-rokuyo="大安"] .rokuyo-day-name::before,
  .rokuyo-calendar td[data-rokuyo="仏滅"] .rokuyo-day-name::before { display: block; line-height: 1; }
}