body{
  font-family:"Segoe UI",Meiryo,sans-serif;
  margin:0;
  background:#fafafa;
}

header{
  background:#222;
  color:#fff;
  padding:10px 20px;
  font-size:20px;
  font-weight:bold;
}

#container{
  display:flex;
  min-height:calc(100vh - 48px);
}

#sidebar{
  background:#f0f0f0;
  width:240px;
  flex:0 0 240px;
  padding:20px;
  overflow-y:auto;
  box-sizing:border-box;
  border-right:1px solid #ddd;
}

#sidebar h2{
  margin:0 0 12px;
}

#sidebar summary{
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
}

#sidebar button{
  display:block;
  width:100%;
  margin:4px 0 0 10px;
  padding:6px 8px;
  background:#fff;
  border:1px solid #ccc;
  border-radius:4px;
  text-align:left;
  cursor:pointer;
  box-sizing:border-box;
}

#sidebar button:hover{
  background:#ddd;
}

#searchBox{
  margin-top:20px;
  padding-top:12px;
  border-top:1px solid #ccc;
}

#searchBoxTitle{
  font-weight:600;
  margin-bottom:6px;
}

#searchInput{
  width:100%;
  padding:8px;
  box-sizing:border-box;
}

#searchStatus{
  margin-top:6px;
  font-size:12px;
  opacity:0.7;
}

#main{
  flex:1;
  min-width:0;
  padding:20px 24px;
  overflow-y:auto;
  box-sizing:border-box;
}

.entry{
  background:#fff;
  margin:0 0 20px;
  padding:20px;
  border-radius:8px;
  box-shadow:0 0 6px rgba(0,0,0,0.1);
  max-width:none;
  min-width:0;
  overflow-wrap:break-word;
  box-sizing:border-box;
}

.entry h3{
  text-align:left;
  margin:0 0 8px;
}

.entry .date{
  font-weight:bold;
  margin-bottom:8px;
}

.title{
  font-size: 1.2rem;
  font-weight: 700;
}

.entry .body{
  min-width:0;
}

.entry .body p{
  margin:0;
  min-height:1.5em;
  line-height:1.5;
  white-space:pre-line;
}

.entry .body ul,
.entry .body li{
  margin-top:2px;
  margin-bottom:2px;
  padding-left:20px;
  line-height:1.3;
}

.entry .body ul ul{
  margin-left:15px;
}

:root{
  --media-block-min:80px;
  --media-block:clamp(90px, 10vw, 140px);
  --gap:10px;
}

.media-row{
  display:grid;
  gap:var(--gap);
  justify-content:start;
  align-items:start;
  grid-template-columns:repeat(auto-fill, minmax(var(--media-block-min), var(--media-block)));
  max-width:100%;
}

.media-row img,
.media-row video{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  box-sizing:border-box;
  grid-column:span 2;
}

.media-row img.is-landscape,
.media-row video.is-landscape{
  grid-column:span 3;
}
.media-row img:only-child,
.media-row video:only-child{
  grid-column:span 2;
  width:100%;
  max-width:100%;
}

.media-auto img:only-child,
.media-auto video:only-child{
  grid-column:span 2;
}

.is-hidden{
  display:none !important;
}

.media-toggle{
  margin-top:8px;
  padding:6px 10px;
  border:1px solid #ccc;
  border-radius:6px;
  background:#fff;
  cursor:pointer;
}

.media-toggle:hover{
  background:#f3f3f3;
}

.media-small{
  --img-base:180px;
}

.media-large{
  --img-base:340px;
}

.media-huge{
  --img-base:460px;
}

.table-wrap{
  max-width:100%;
  overflow-x:auto;
}

table.status-table{
  border-collapse:collapse;
  table-layout:fixed;
}

table.status-table th,
table.status-table td{
  border:1px solid #666;
  padding:4px 6px;
  text-align:right;
  white-space:nowrap;
}

table.status-table th.col-name,
table.status-table td.col-name{
  width:90px;
}

table.status-table th.col-stat,
table.status-table td.col-stat{
  width:60px;
}

mark{
  background:#fff3a0;
  padding:0 2px;
}

.yt-lite,
.yt-frame{
  width:100%;
  max-width:720px;
  aspect-ratio:16 / 9;
}

.yt-lite{
  position:relative;
  overflow:hidden;
  background:#000;
  box-sizing:border-box;
  cursor:pointer;
}

.yt-lite img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.yt-frame{
  display:block;
  height:100%;
  border:0;
  box-sizing:border-box;
}

.yt-lite > .yt-frame{
  width:100%;
  max-width:none;
  height:100%;
  aspect-ratio:auto;
}

.yt-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  font-size:32px;
  padding:10px 18px;
  border:none;
  background:rgba(0,0,0,0.7);
  color:white;
  cursor:pointer;
}

@media (max-width:900px){
  #container{
    display:block;
    min-height:auto;
  }

  #sidebar{
    width:auto;
    flex:none;
    border-right:none;
    border-bottom:1px solid #ddd;
  }

  #main{
    padding:16px;
  }

  :root{
    --img-base:180px;
    --img-small:130px;
  }

  .media-large{
    --img-base:220px;
  }

  .media-huge{
    --img-base:260px;
  }
}

@media (max-width:600px){
  :root{
    --img-base:150px;
    --img-small:120px;
  }

  .media-large,
  .media-huge{
    --img-base:180px;
  }

}

#searchFilters {
  margin-top: 8px;
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
}

.filterTitle {
  margin-top: 8px;
  font-weight: 600;
}

#searchFilters label {
  display: block;
}

#weatherFilters,
#tagFilters,
#mediaFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

#weatherFilters label,
#tagFilters label,
#mediaFilters label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  white-space: nowrap;
}

#searchFilters input[type="date"] {
  max-width: 100%;
}


.media-hidden{
  display:none;
}

.media-row img.is-landscape:only-child,
.media-row video.is-landscape:only-child{
  grid-column:span 3;
}

.media-auto img.is-landscape:only-child,
.media-auto video.is-landscape:only-child{
  grid-column:span 3;
}

.media-row.media-large img,
.media-row.media-large video,
.media-row img.media-large,
.media-row video.media-large{
  grid-column:span 3;
}

.media-row.media-large img.is-landscape,
.media-row.media-large video.is-landscape,
.media-row img.media-large.is-landscape,
.media-row video.media-large.is-landscape{
  grid-column:span 4;
}

.media-row.media-huge img,
.media-row.media-huge video,
.media-row img.media-huge,
.media-row video.media-huge{
  grid-column:span 4;
}

.media-row.media-huge img.is-landscape,
.media-row.media-huge video.is-landscape,
.media-row img.media-huge.is-landscape,
.media-row video.media-huge.is-landscape{
  grid-column:span 5;
}


.media-row.media-large img:only-child,
.media-row.media-large video:only-child{
  grid-column:span 3;
}

.media-row.media-huge img:only-child,
.media-row.media-huge video:only-child{
  grid-column:span 4;
}

.media-row.media-large img.is-landscape:only-child,
.media-row.media-large video.is-landscape:only-child{
  grid-column:span 4;
}

.media-row.media-huge img.is-landscape:only-child,
.media-row.media-huge video.is-landscape:only-child{
  grid-column:span 5;
}

.media-row.media-expanded{
  grid-template-columns:repeat(auto-fill, minmax(var(--media-block-min), var(--media-block)));
  max-width:100%;
}

.media-list {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:14px;
}

.media-list-item {
  display:grid;
  gap:6px;
  align-content:start;
  min-width:0;
}

.media-list-date {
  width:100%;
  padding:6px 8px;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fff;
  cursor:pointer;
  text-align:left;
}

.media-list-item img,
.media-list-item video {
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  background:#111;
}

.media-list-item span {
  font-size:12px;
  opacity:0.75;
}

.image-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.image-lightbox.is-open {
  display: flex !important;
}

.image-lightbox img,
#imageLightboxImg {
  width: auto !important;
  height: auto !important;
  max-width: 92vw !important;
  max-height: 92vh !important;
  object-fit: contain !important;
}
@media (max-width:600px){
  #weatherFilters,
  #tagFilters,
  #mediaFilters {
    gap: 3px 10px;
  }

  #weatherFilters label,
  #tagFilters label,
  #mediaFilters label {
    font-size: 0.86rem;
  }
}
/* Symptom notes remain part of the diary, with an independent media scope. */
.symptom-record {
  border-top: 1px solid #d5d5d5;
  margin-top: 1rem;
  padding-top: 0.5rem;
}
.symptom-record h3 {
  font-size: 1.05rem;
  margin: 0.5rem 0;
}
.ordinary-diary {
  margin-top: 1rem;
}
.ordinary-diary > summary {
  cursor: pointer;
  padding: 0.5rem 0;
}

.symptom-toggle {
  border-top: 1px solid #d5d5d5;
  margin-top: 1rem;
  padding-top: 0.5rem;
}
.symptom-toggle > summary,
.sake-comment-toggle > summary,
.normal-diary-toggle > summary {
  cursor: pointer;
  width: max-content;
  max-width: 100%;
  padding: 0.4rem 0;
  font-weight: 600;
}

.normal-diary-toggle {
  margin-top: 1rem;
}

.normal-diary-details {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid #d8d8d8;
}
.symptom-toggle .symptom-record {
  border-top: 0;
  margin-top: 0;
}

.sake-record {
  border-top: 1px solid #d5d5d5;
  margin-top: 1rem;
  padding-top: 0.5rem;
}
.sake-record > h3 {
  font-size: 1.05rem;
  margin: 0.5rem 0;
}
.sake-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid #e6e6e6;
}
.sake-card:first-of-type {
  border-top: 0;
}
.sake-info {
  min-width: 0;
}
.sake-main-name {
  margin: 0;
  font-size: 1.15rem;
}
.sake-sub-name {
  margin-top: 0.2rem;
  font-weight: 600;
}
.sake-meta-row {
  margin-top: 0.3rem;
}
.sake-meta-label {
  color: #555;
  font-size: 0.9rem;
}
.sake-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}
.sake-features span {
  border: 1px solid #cfcfcf;
  border-radius: 3px;
  padding: 0.15rem 0.4rem;
  font-size: 0.85rem;
}
.sake-comment,
.sake-comment-toggle {
  margin-top: 0.65rem;
}
.sake-comment {
  padding-left: 0.75rem;
  border-left: 3px solid #c8c8c8;
}