/* --------------------------------------------------
 * MUGEN LAB — Euphrates-Inspired Ultra-Minimalist Design System
 * -------------------------------------------------- */

:root {
  --bg-color: #fcfbfa;
  --text-main: #11100f;
  --text-sub: #66635f;
  --text-muted: #9e9a93;
  --border-color: #e8e5e0;
  --border-active: #11100f;
  --hover-bg: #f4f2ed;
  --tag-bg: #ffffff;
  --tag-border: #e2ded8;
  --iframe-bg: #f7f5f0;
  --accent-dot: #11100f;

  --font-family: 'Inter','Noto Sans JP',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ls-tight: -0.02em;
  --ls-normal: 0.04em;
  --ls-wide: 0.12em;
  --ls-widest: 0.22em;

  --transition-fast: 0.12s cubic-bezier(0.25,1,0.5,1);
  --transition-smooth: 0.25s cubic-bezier(0.16,1,0.3,1);
}

body.theme-dark {
  --bg-color: #121110;
  --text-main: #f4f2ec;
  --text-sub: #9a968f;
  --text-muted: #5e5b55;
  --border-color: #282623;
  --border-active: #f4f2ec;
  --hover-bg: #1c1a18;
  --tag-bg: #1a1917;
  --tag-border: #33302c;
  --iframe-bg: #161514;
  --accent-dot: #f4f2ec;
}

body.theme-coffee {
  --bg-color: #382c24;
  --text-main: #f7ede2;
  --text-sub: #d4c3b3;
  --text-muted: #9c8a7c;
  --border-color: #524135;
  --border-active: #e6b88a;
  --hover-bg: #44362c;
  --tag-bg: #403229;
  --tag-border: #5e4c3f;
  --iframe-bg: #2f241d;
  --accent-dot: #e6b88a;
}

body.theme-office {
  --bg-color: #1a232f;
  --text-main: #e2e8f0;
  --text-sub: #94a3b8;
  --text-muted: #64748b;
  --border-color: #2e3c4e;
  --border-active: #60a5fa;
  --hover-bg: #222d3d;
  --tag-bg: #1e293b;
  --tag-border: #334155;
  --iframe-bg: #141c26;
  --accent-dot: #60a5fa;
}

body.theme-natural {
  --bg-color: #ebe7dc;
  --text-main: #243024;
  --text-sub: #4b5d4b;
  --text-muted: #748874;
  --border-color: #cbcfc3;
  --border-active: #3b6b47;
  --hover-bg: #dfdbce;
  --tag-bg: #f4f1e8;
  --tag-border: #beccb8;
  --iframe-bg: #e2ded3;
  --accent-dot: #3b6b47;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{font-size:15px;scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{
  background-color:var(--bg-color);
  background-image:radial-gradient(rgba(0,0,0,.012) 1px,transparent 0),radial-gradient(rgba(0,0,0,.008) 1px,transparent 0);
  background-size:8px 8px,12px 12px;
  background-position:0 0,4px 4px;
  color:var(--text-main);
  font-family:var(--font-family);
  font-weight:400;
  line-height:1.65;
  letter-spacing:var(--ls-normal);
  -webkit-font-smoothing:antialiased;
  transition:background-color var(--transition-smooth),color var(--transition-smooth);
}

.site-container{max-width:1540px;width:95vw;margin:0 auto;padding:2rem 1.5rem;min-height:100vh;display:flex;flex-direction:column;}
@media(max-width:600px){.site-container{width:100%;padding:1rem .75rem;}}

/* ------ Main Body Layout with Sidebar ------ */
.site-body-wrapper{display:flex;flex-direction:column;gap:1.5rem;width:100%;}
@media(min-width:1024px){
  .site-body-wrapper{display:grid;grid-template-columns:260px 1fr;gap:2.25rem;align-items:start;}
  .site-sidebar{position:sticky;top:1.5rem;order:1;}
  .main-content{order:2;min-width:0;}
}

/* ------ Header (Slim & Modern) ------ */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:1rem;
  margin-bottom:1.5rem;
  border-bottom:1px solid var(--border-color);
  gap:1rem;
}
@media(max-width:540px){
  .site-header{flex-direction:row; align-items:center; padding-bottom:.75rem;}
}

.brand-area{
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:0.75rem;
  text-decoration:none;
  color:inherit;
}
.brand-badge{
  font-size:0.625rem;
  font-weight:900;
  letter-spacing:0.12em;
  background-color:var(--text-main);
  color:var(--bg-color);
  padding:0.25rem 0.5rem;
  border-radius:3px;
  line-height:1;
}
.brand-text-group{
  display:flex;
  align-items:baseline;
  gap:0.65rem;
  flex-wrap:wrap;
}
.main-title{
  font-size:1.125rem;
  font-weight:800;
  letter-spacing:0.04em;
  line-height:1.2;
}
@media(max-width:600px){
  .main-title{font-size:1rem;}
  .sub-title{display:none;}
}
.sub-title{
  font-size:.5625rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}

.header-actions{display:flex;align-items:center;gap:.4rem;}

.header-btn{
  background:var(--bg-color);
  border:1px solid var(--border-color);
  padding:.3rem .65rem;
  font-family:var(--font-family);
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--text-sub);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border-radius:3px;
  transition:all var(--transition-fast);
}
.header-btn:hover{border-color:var(--text-main);color:var(--text-main);}
.btn-dot{width:5px;height:5px;border-radius:50%;background-color:var(--accent-dot);}
.edit-btn.active{background-color:var(--text-main);color:var(--bg-color);border-color:var(--text-main);}
.edit-btn.active .btn-dot{background-color:var(--bg-color);}

/* ------ Vertical Category Nav in Left Sidebar ------ */
.sidebar-section-label{
  font-size:.5625rem;
  font-weight:700;
  letter-spacing:.15em;
  color:var(--text-muted);
  height:13px;
  line-height:13px;
  margin-bottom:8px;
  box-sizing:border-box;
}
.lab-nav{margin-bottom:1.25rem;}
.menu-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  height:288px;
  border:1px solid var(--border-color);
  background-color:var(--bg-color);
  border-radius:4px;
  overflow:hidden;
  box-sizing:border-box;
}
.menu-item{
  border-bottom:1px solid var(--border-color);
}
.menu-item:last-child{
  border-bottom:none;
}
.nav-btn{
  width:100%;
  background:transparent;
  border:none;
  height:48px;
  padding:0 .9rem;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:all var(--transition-fast);
  position:relative;
  box-sizing:border-box;
}
.nav-btn:hover{
  background-color:var(--hover-bg);
}
.nav-btn.active{
  background-color:var(--text-main);
  color:var(--bg-color);
}
.nav-btn.active .jp-label{
  color:var(--bg-color);
}
.nav-btn.active .en-label{
  color:var(--bg-color);
  opacity:0.8;
}
.jp-label{font-size:.8125rem;font-weight:700;color:var(--text-main);letter-spacing:.03em;}
.en-label{font-size:.5rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--text-sub);margin-top:.15rem;display:block;}

/* Mobile horizontal category scrolling if screen is narrow */
@media(max-width:1023px){
  .menu-list{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
  }
  .menu-item{
    border-right:1px solid var(--border-color);
    border-bottom:1px solid var(--border-color);
  }
  .menu-item:nth-child(3n){border-right:none;}
  .menu-item:nth-child(n+4){border-bottom:none;}
}
@media(max-width:480px){
  .menu-list{
    grid-template-columns:repeat(2, 1fr);
  }
  .menu-item:nth-child(3n){border-right:1px solid var(--border-color);}
  .menu-item:nth-child(2n){border-right:none;}
  .menu-item:nth-child(n+3){border-bottom:none;}
  .menu-item:nth-child(n+5){border-bottom:1px solid var(--border-color);}
}

/* ------ Tag Search & Sidebar Links ------ */
.tag-search-container{margin-bottom:1.25rem;padding:.85rem;border:1px solid var(--border-color);background-color:var(--bg-color);border-radius:4px;}
.search-box-wrapper{position:relative;display:flex;align-items:center;}
#tag-search-input{width:100%;padding:.45rem 1.8rem .45rem .65rem;font-family:var(--font-family);font-size:.75rem;font-weight:400;background-color:var(--tag-bg);color:var(--text-main);border:1px solid var(--border-color);border-radius:3px;outline:none;transition:border-color var(--transition-fast);}
#tag-search-input:focus{border-color:var(--text-main);}
.clear-btn{position:absolute;right:.5rem;background:transparent;border:none;font-size:.75rem;color:var(--text-sub);cursor:pointer;padding:.2rem;}
.popular-tags-wrapper{margin-top:.75rem;display:flex;flex-direction:column;gap:.4rem;}
@media(max-width:1023px){.popular-tags-wrapper{flex-direction:row;align-items:center;gap:.6rem;}}
.tag-label{font-size:.5625rem;font-weight:700;letter-spacing:.15em;color:var(--text-muted);}
.tags-cloud{display:flex;gap:.35rem;flex-wrap:wrap;}
.tag-chip{font-size:.65rem;font-weight:500;color:var(--text-main);background-color:var(--tag-bg);border:1px solid var(--tag-border);padding:.15rem .45rem;border-radius:2px;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;}
.tag-chip:hover,.tag-chip.active{background-color:var(--text-main);color:var(--bg-color);border-color:var(--text-main);}
.card-tags-list{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.75rem;}

/* Sidebar Links */
.sidebar-links-container{
  padding:.85rem;
  border:1px solid var(--border-color);
  background-color:var(--bg-color);
  border-radius:4px;
}
.sidebar-links-header{
  margin-bottom:.75rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--border-color);
}
.sidebar-links-list{
  display:flex;
  flex-direction:column;
  gap:.65rem;
}
.sidebar-link-item{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  padding:.65rem .75rem;
  background:var(--bg-color);
  border:1px solid var(--border-color);
  border-radius:4px;
  text-decoration:none;
  color:inherit;
  transition:all var(--transition-fast);
  position:relative;
}
.sidebar-link-item:hover{
  border-color:var(--text-main);
  background:var(--hover-bg);
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(0,0,0,0.04);
}
.sidebar-link-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  text-decoration:none;
  color:inherit;
}
.sidebar-link-title{
  font-size:.78125rem;
  font-weight:700;
  color:var(--text-main);
  display:flex;
  align-items:center;
  gap:.5rem;
  line-height:1.3;
}
.sidebar-link-icon-wrap{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.sidebar-link-icon-wrap svg{
  width:16px;
  height:16px;
  display:block;
}
.sidebar-link-icon-wrap img.sidebar-favicon{
  width:16px;
  height:16px;
  border-radius:2px;
  object-fit:contain;
  display:block;
}
.sidebar-link-arrow{
  font-size:.6875rem;
  color:var(--text-muted);
  transition:transform var(--transition-fast), color var(--transition-fast);
}
.sidebar-link-item:hover .sidebar-link-arrow{
  color:var(--text-main);
  transform:translate(2px, -2px);
}
.sidebar-link-desc{
  font-size:.65rem;
  color:var(--text-sub);
  line-height:1.55;
  margin-top:.1rem;
  padding-left:1.75rem;
}
.sidebar-link-ctrls{
  display:flex;
  gap:.35rem;
  margin-top:.4rem;
  padding-top:.35rem;
  border-top:1px dashed var(--border-color);
  justify-content:flex-end;
}

/* Project Links Block */
.block-project-links{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem;}
.project-link-card{display:flex;align-items:center;justify-content:space-between;padding:.6rem .85rem;border:1px solid var(--border-color);background:var(--hover-bg);border-radius:4px;cursor:pointer;text-decoration:none;color:inherit;transition:all var(--transition-fast);}
.project-link-card:hover{border-color:var(--text-main);background:var(--bg-color);transform:translateY(-1px);}
.project-link-title{font-size:.78125rem;font-weight:700;color:var(--text-main);display:flex;align-items:center;gap:.4rem;}
.project-link-code{font-size:.625rem;font-weight:800;background:var(--text-main);color:var(--bg-color);padding:.1rem .35rem;border-radius:2px;}

/* ------ Profile ------ */
.profile-card{margin-top:2rem;padding:1.25rem 1.5rem;border:1px solid var(--border-color);}
.profile-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem;}
.profile-badge{font-size:.5625rem;font-weight:700;letter-spacing:.15em;padding:.15rem .4rem;background-color:var(--text-main);color:var(--bg-color);}
.profile-name{font-size:.9375rem;font-weight:600;color:var(--text-main);}
.en-name{font-size:.6875rem;font-weight:400;color:var(--text-sub);}
.profile-bio{font-size:.78125rem;color:var(--text-sub);line-height:1.75;}

/* ------ Content Sections ------ */
.main-content{flex:1;}
.content-section{display:none;opacity:0;transform:translateY(4px);transition:opacity var(--transition-smooth),transform var(--transition-smooth);}
.content-section.active{display:block;opacity:1;transform:translateY(0);}

.hero-graphic-container{width:100%;border:1px solid var(--border-color);padding:2rem;display:flex;justify-content:center;align-items:center;min-height:300px;}
@media(max-width:600px){.hero-graphic-container{padding:1rem;min-height:200px;}}

/* Slideshow (トップ絵の下端が左の「らぼのおと」枠線最下部と完全水平一致) */
.hero-slideshow{
  position:relative;
  overflow:hidden;
  padding:0.75rem;
  background:var(--hover-bg);
  margin-top:21px;
  min-height:260px;
  border-radius:6px;
  margin-bottom:0;
  border:1px solid var(--border-color);
  box-sizing:border-box;
}
@media(max-width:1023px){
  .hero-slideshow{
    margin-top:0;
    padding:0.5rem;
  }
}
@media(max-width:600px){
  .hero-slideshow{
    margin-top:0;
    padding:0.35rem;
  }
}

/* 3-Column Hero Carousel Track */
.hero-triptych-track{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0.75rem;
  width:100%;
  height:240px;
}
@media(max-width:860px){
  .hero-triptych-track{
    grid-template-columns:repeat(2, 1fr);
    height:220px;
    gap:0.5rem;
  }
  .hero-triptych-panel:nth-child(3){
    display:none;
  }
}
@media(max-width:540px){
  .hero-triptych-track{
    grid-template-columns:1fr;
    height:200px;
  }
  .hero-triptych-panel:nth-child(2),
  .hero-triptych-panel:nth-child(3){
    display:none;
  }
}

.hero-triptych-panel{
  position:relative;
  height:100%;
  border-radius:4px;
  overflow:hidden;
  border:1px solid var(--border-color);
  background-color:var(--bg-color);
  cursor:pointer;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast);
}
.hero-triptych-panel:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
}
.hero-triptych-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-triptych-panel:hover .hero-triptych-img{
  transform:scale(1.03);
}

.slide-caption-badge{
  position:absolute;
  top:0.6rem;
  left:0.6rem;
  background:rgba(0,0,0,0.75);
  color:#fff;
  padding:.15rem .45rem;
  font-size:.6rem;
  font-weight:800;
  letter-spacing:.08em;
  border-radius:2px;
  backdrop-filter:blur(2px);
  z-index:2;
}
.slide-caption{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  background:linear-gradient(transparent, rgba(0,0,0,0.85) 60%);
  color:#fff;
  padding:1.25rem 0.75rem 0.6rem;
  font-size:0.8125rem;
  font-weight:700;
  line-height:1.35;
  box-sizing:border-box;
  z-index:2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Single legacy slide for fallback */
.hero-slide{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0;transition:opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);cursor:pointer;}
.hero-slide.active{opacity:1;z-index:1;}

.hero-svg{width:100%;max-width:640px;height:auto;display:block;}
.hero-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:28px;
  padding:0 .25rem;
  border-bottom:1px solid var(--border-color);
  margin-bottom:1.5rem;
  box-sizing:border-box;
}
.meta-item{font-size:.5625rem;letter-spacing:.15em;color:var(--text-muted);text-transform:uppercase;}

.section-header{margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-color);}
.section-header-top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:0.75rem;}
.section-title{font-size:1.125rem;font-weight:600;letter-spacing:.05em;display:flex;align-items:baseline;gap:.6rem;}
.en-sub{font-size:.5625rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;color:var(--text-sub);}
.section-desc{font-size:.75rem;color:var(--text-sub);margin-top:.35rem;line-height:1.65;}

/* Sort & Filter Bar */
.sort-filter-bar{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  background:var(--tag-bg);
  padding:0.2rem 0.4rem;
  border-radius:4px;
  border:1px solid var(--border-color);
}
.sort-label{
  font-size:0.625rem;
  font-weight:700;
  color:var(--text-muted);
  letter-spacing:0.05em;
  margin-right:0.2rem;
}
.sort-btn{
  background:transparent;
  border:none;
  font-family:var(--font-family);
  font-size:0.6875rem;
  font-weight:600;
  color:var(--text-sub);
  padding:0.2rem 0.45rem;
  border-radius:3px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  transition:all var(--transition-fast);
}
.sort-btn:hover{
  color:var(--text-main);
  background:var(--hover-bg);
}
.sort-btn.active{
  background:var(--text-main);
  color:var(--bg-color);
  font-weight:700;
}
.sort-arrow{
  font-size:0.5625rem;
  line-height:1;
  opacity:0.9;
}

/* Rating Settings in Modal */
.rating-setting-grid{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-top:0.35rem;
}
.rating-setting-item{
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.rating-setting-title{
  font-size:0.75rem;
  font-weight:600;
  color:var(--text-main);
}
.slash-rating-inputs{
  display:inline-flex;
  align-items:center;
  gap:1px;
}
.rating-slash-btn{
  background:none;
  border:1px solid transparent;
  font-family:monospace;
  font-size:1.1rem;
  font-weight:900;
  line-height:1;
  color:var(--border-color);
  cursor:pointer;
  padding:0.1rem 0.2rem;
  border-radius:2px;
  transition:all var(--transition-fast);
}
.rating-slash-btn:hover{
  color:var(--text-main);
  background:var(--hover-bg);
}
.rating-slash-btn.active{
  color:var(--text-main);
  font-weight:900;
}
.rating-val-display{
  font-family:monospace;
  font-size:0.8125rem;
  font-weight:800;
  color:var(--text-main);
  margin-left:0.35rem;
  min-width:36px;
  letter-spacing:1px;
}

/* Card Rating Badges (Slash / Style) */
.card-rating-row{
  display:flex;
  align-items:center;
  gap:0.75rem;
  margin-top:0.45rem;
  padding-top:0.4rem;
  border-top:1px dashed var(--border-color);
  font-size:0.6875rem;
  color:var(--text-sub);
}
.rating-chip{
  display:inline-flex;
  align-items:center;
  gap:0.25rem;
  font-weight:500;
}
.rating-slashes{
  font-family:monospace;
  font-weight:800;
  color:var(--text-main);
  letter-spacing:1px;
}

/* ------ Cards ------ */
.embed-grid{
  column-count: 4;
  column-gap: 1.25rem;
}
@media(min-width: 1440px) { .embed-grid { column-count: 5; column-gap: 1.25rem; } }
@media(max-width: 1200px) { .embed-grid { column-count: 3; } }
@media(max-width: 768px)  { .embed-grid { column-count: 2; column-gap: 0.75rem; } }
@media(max-width: 480px)  { .embed-grid { column-count: 2; column-gap: 0.5rem; } }

.embed-card{
  position:relative;
  break-inside: avoid;
  margin-bottom: 1.25rem;
  border:1px solid var(--border-color);
  padding:1rem;
  background-color:var(--bg-color);
  cursor:pointer;
  transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);
}
.embed-card:hover{
  border-color:var(--text-main);
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
  transform:translateY(-2px);
}
.embed-card.is-hidden-card{
  opacity:.45;
  border-style:dashed;
  background-color:var(--hover-bg);
}
.embed-card.highlight-target{border-color:var(--text-main);box-shadow:0 0 0 2px var(--text-main);}
@media(max-width:600px){
  .embed-card{padding:.65rem; margin-bottom: 0.75rem;}
}

/* Card Preview Thumbnail Constraints */
.embed-card .block-render-image img{
  width:100%;
  max-height:220px;
  object-fit:cover;
  border-radius:3px;
  display:block;
  background-color:var(--hover-bg);
}
.embed-card .photo-wrapper img{
  max-height:200px;
  object-fit:contain;
}
.embed-card .block-render-text{
  max-height:100px;
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, black 60%, transparent 100%);
}

/* Load More & Infinite Scroll Container */
.grid-pagination-container{
  margin-top:2rem;
  margin-bottom:2.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.75rem;
}
.load-more-btn{
  background-color:var(--bg-color);
  color:var(--text-main);
  border:1px solid var(--border-color);
  padding:0.6rem 2rem;
  font-family:var(--font-family);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.08em;
  border-radius:24px;
  cursor:pointer;
  transition:all var(--transition-fast);
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
}
.load-more-btn:hover{
  border-color:var(--text-main);
  background-color:var(--text-main);
  color:var(--bg-color);
  transform:translateY(-1px);
}
.pagination-status-text{
  font-size:0.6875rem;
  color:var(--text-muted);
  letter-spacing:0.05em;
}

/* Block Rendering Spacing */
.blocks-container{display:flex;flex-direction:column;gap:1rem;}
.block-render-image, .block-render-video, .block-render-text, .block-render-webapp{margin-bottom:0.75rem;}
.block-render-image:last-child, .block-render-video:last-child, .block-render-text:last-child, .block-render-webapp:last-child{margin-bottom:0;}
.block-render-text p{margin-bottom:0.85rem;line-height:1.75;}
.block-render-text p:last-child{margin-bottom:0;}

/* Big Serial Number */
.big-number-badge{font-size:1.5rem;font-weight:900;line-height:1;letter-spacing:.02em;color:var(--text-main);margin-bottom:.4rem;}
.big-number-badge.ura-number{color:var(--text-sub);}
.big-number-badge.note-number{letter-spacing:.05em;}

/* Card header row: serial number + date */
.card-header-row{display:flex;justify-content:space-between;align-items:center;gap:0.4rem;margin-bottom:0.35rem;overflow:hidden;}
.card-code-badge{font-size:0.6875rem;font-weight:800;letter-spacing:0.04em;color:var(--text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;}
.card-date-badge{font-size:0.625rem;color:var(--text-sub);font-weight:600;letter-spacing:0.04em;background:var(--hover-bg);border:1px solid var(--border-color);padding:0.1rem 0.35rem;border-radius:3px;white-space:nowrap;flex-shrink:0;}

.embed-meta{margin-bottom:.65rem;}
.item-title{font-size:.8125rem;font-weight:700;color:var(--text-main); line-height:1.4;}

/* Media wrappers */
.iframe-wrapper{position:relative;width:100%;background-color:var(--iframe-bg);border:1px solid var(--border-color);overflow:hidden;}
.iframe-wrapper.aspect-16-9{padding-bottom:56.25%;}
.iframe-wrapper.aspect-app{padding-bottom:65%;}
.iframe-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.photo-wrapper{width:100%;border:1px solid var(--border-color);background-color:var(--iframe-bg);overflow:hidden;display:flex;justify-content:center;align-items:center;padding:.6rem;}
.photo-wrapper img{max-width:100%;max-height:380px;object-fit:contain;display:block;}
.blog-wrapper{border:1px solid var(--border-color);border-left:2.5px solid var(--text-main);padding:.85rem;font-size:.75rem;color:var(--text-main);line-height:1.65;}
.blog-wrapper h3{font-size:.9375rem;font-weight:700;margin:0.85rem 0 .4rem;border-bottom:1px dashed var(--border-color);padding-bottom:.2rem;}
.blog-wrapper h3:first-child{margin-top:0;}
.blog-wrapper p{margin-bottom:.75rem;}
.blog-hero-img{width:100%;max-height:300px;object-fit:cover;display:block;margin-bottom:1rem;}

/* Status Badges */
.hidden-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.5625rem;font-weight:700;letter-spacing:.12em;
  padding:.15rem .4rem;
  background-color:#e8823a;
  color:#fff;
  margin-bottom:.6rem;
  margin-right:.4rem;
}
.ig-sync-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.5625rem;font-weight:700;letter-spacing:.08em;
  padding:.15rem .4rem;
  background-color:#e1306c;
  color:#fff;
  margin-bottom:.6rem;
  margin-right:.4rem;
  border-radius:2px;
}
.schedule-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.5625rem;font-weight:700;letter-spacing:.08em;
  padding:.15rem .4rem;
  background-color:#2a75d3;
  color:#fff;
  margin-bottom:.6rem;
  margin-right:.4rem;
  border-radius:2px;
}

/* ------ Interlink ------ */
.interlink-container{margin-top:1rem;padding-top:.75rem;border-top:1px dashed var(--border-color);display:flex;gap:.5rem;flex-wrap:wrap;}
.interlink-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--tag-bg);border:1px solid var(--border-color);padding:.35rem .75rem;font-size:.6875rem;font-weight:600;color:var(--text-main);cursor:pointer;transition:all var(--transition-fast);}
.interlink-btn:hover{background:var(--text-main);color:var(--bg-color);border-color:var(--text-main);}

/* 「うらを書く」ボタン */
.write-ura-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:transparent;
  border:1px dashed var(--border-color);
  padding:.3rem .65rem;
  font-size:.6275rem;font-weight:600;
  color:var(--text-sub);cursor:pointer;
  transition:all var(--transition-fast);
}
.write-ura-btn:hover{border-color:var(--text-main);color:var(--text-main);border-style:solid;}

/* ------ Editor UI ------ */
.editor-bar{margin-top:1rem;padding:.6rem .85rem;border:1px dashed var(--border-active);background-color:var(--hover-bg);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;}
.editor-bar.hidden{display:none!important;}
.editor-info{display:flex;align-items:center;gap:.6rem;}
.editor-badge{font-size:.5625rem;font-weight:700;letter-spacing:.15em;padding:.15rem .4rem;background-color:var(--text-main);color:var(--bg-color);}
.editor-hint{font-size:.6875rem;color:var(--text-sub);}
.editor-actions{display:flex;gap:.4rem;}
.editor-btn{background:var(--bg-color);border:1px solid var(--border-color);padding:.3rem .6rem;font-size:.625rem;font-family:var(--font-family);font-weight:600;color:var(--text-main);cursor:pointer;transition:all var(--transition-fast);}
.editor-btn:hover{border-color:var(--text-main);}

.add-item-container{margin-top:1.5rem;text-align:center;}
.add-item-container.hidden{display:none!important;}
.add-item-btn{background:transparent;border:1px dashed var(--border-color);padding:.75rem 1.5rem;width:100%;font-family:var(--font-family);font-size:.75rem;font-weight:600;color:var(--text-sub);cursor:pointer;transition:all var(--transition-fast);}
.add-item-btn:hover{border-color:var(--text-main);color:var(--text-main);background-color:var(--hover-bg);}

/* Card controls */
.card-controls{display:flex;justify-content:flex-end;gap:.3rem;margin-bottom:.6rem;padding-bottom:.4rem;border-bottom:1px dashed var(--border-color);flex-wrap:wrap;}
.card-btn{background:transparent;border:1px solid var(--border-color);padding:.15rem .4rem;font-size:.5625rem;font-family:var(--font-family);color:var(--text-sub);cursor:pointer;transition:all var(--transition-fast);}
.card-btn:hover{border-color:var(--text-main);color:var(--text-main);}
.card-btn.danger:hover{border-color:#d93838;color:#d93838;}
.card-btn.active-toggle{background:var(--text-main);color:var(--bg-color);border-color:var(--text-main);}

/* ------ Modal ------ */
.modal-overlay{position:fixed;inset:0;background-color:rgba(0,0,0,.4);backdrop-filter:blur(2px);display:flex;justify-content:center;align-items:center;z-index:1000;padding:1rem;}
.modal-overlay.hidden{display:none!important;}
.modal-card{background-color:var(--bg-color);border:1px solid var(--border-color);width:100%;max-width:540px;box-shadow:0 10px 30px rgba(0,0,0,.12);}
.modal-header{padding:1rem 1.25rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;}
.modal-heading{font-size:.9375rem;font-weight:700;}
.modal-close{background:none;border:none;font-size:1.25rem;line-height:1;color:var(--text-sub);cursor:pointer;}
.modal-body{padding:1.25rem;display:flex;flex-direction:column;gap:1rem;}
.form-group{display:flex;flex-direction:column;gap:.3rem;}
.form-group label{font-size:.6875rem;font-weight:600;color:var(--text-main);}
.form-help{font-size:.5625rem;color:var(--text-sub);margin-top:.15rem;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.5rem .65rem;font-family:var(--font-family);font-size:.8125rem;background-color:var(--bg-color);color:var(--text-main);border:1px solid var(--border-color);border-radius:0;outline:none;transition:border-color var(--transition-fast);}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--text-main);}
.form-group input:disabled,.form-group select:disabled{opacity:.5;cursor:not-allowed;}
.modal-footer{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.5rem;padding-top:.75rem;border-top:1px solid var(--border-color);}
.btn-primary{background-color:var(--text-main);color:var(--bg-color);border:1px solid var(--text-main);padding:.5rem 1rem;font-family:var(--font-family);font-size:.75rem;font-weight:600;cursor:pointer;border-radius:4px;}
.btn-secondary{background:transparent;color:var(--text-sub);border:1px solid var(--border-color);padding:.5rem 1rem;font-family:var(--font-family);font-size:.75rem;font-weight:500;cursor:pointer;border-radius:4px;}

/* ------ Editor Settings Panel ------ */
.editor-settings-panel{
  border:1px solid var(--border-color);
  padding:1rem 1.15rem;
  border-radius:6px;
  background-color:var(--bg-color);
  margin-bottom:.5rem;
}
.setting-label{
  font-size:.75rem;
  font-weight:700;
  color:var(--text-main);
  margin-bottom:.4rem;
  display:block;
}
.category-checkbox-group, .options-checkbox-group{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.cb-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.75rem;
  font-weight:600;
  color:var(--text-main);
  background:var(--hover-bg);
  border:1px solid var(--border-color);
  padding:.35rem .65rem;
  border-radius:4px;
  cursor:pointer;
  white-space:nowrap;
  transition:all var(--transition-fast);
}
.cb-chip:hover{
  border-color:var(--text-main);
  background:var(--bg-color);
}
.cb-chip input[type="checkbox"]{
  accent-color:var(--text-main);
  cursor:pointer;
  width:auto!important;
}
.setting-date-input{
  font-size:.75rem;
  padding:.35rem .65rem;
  border:1px solid var(--border-color);
  border-radius:4px;
  background:var(--bg-color);
  color:var(--text-main);
  outline:none;
}

/* ------ Detail Lightbox Modal ------ */
.detail-modal-card{
  position:relative;
  background-color:var(--bg-color);
  border:1px solid var(--border-color);
  width:100%;
  max-width:800px;
  max-height:90vh;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  border-radius:6px;
  overflow:hidden;
  animation:detailModalIn .22s cubic-bezier(.16,1,.3,1);
}
@keyframes detailModalIn{
  from{opacity:0;transform:scale(.96) translateY(10px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}

.detail-modal-body{
  padding:2rem;
  overflow-y:auto;
  flex:1;
}
@media(max-width:600px){
  .detail-modal-body{padding:1.25rem;}
}

.detail-modal-body .block-render-image{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background-color:var(--hover-bg);
  border:1px solid var(--border-color);
  border-radius:6px;
  padding:0.75rem;
  margin-bottom:1.25rem;
}
.detail-modal-body .block-render-image img{
  width:auto;
  max-width:100%;
  max-height:65vh;
  object-fit:contain;
  border-radius:4px;
  display:block;
  margin:0 auto;
}
.detail-modal-body .block-render-text{
  max-height:none;
  mask-image:none;
  -webkit-mask-image:none;
  font-size:.9375rem;
  line-height:1.85;
}

.detail-nav-btn{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  background:var(--bg-color);
  border:1px solid var(--border-color);
  border-radius:50%;
  font-size:1.75rem;
  font-weight:700;
  color:var(--text-main);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1050;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition:all var(--transition-fast);
}
.detail-nav-btn:hover{
  background:var(--text-main);
  color:var(--bg-color);
  border-color:var(--text-main);
  transform:translateY(-50%) scale(1.1);
}
.detail-prev-btn{left:1.5rem;}
.detail-next-btn{right:1.5rem;}
@media(max-width:880px){
  .detail-prev-btn{left:.5rem;}
  .detail-next-btn{right:.5rem;}
  .detail-nav-btn{width:40px; height:40px; font-size:1.25rem;}
}

.detail-close-btn{
  position:absolute;
  top:.75rem;
  right:.75rem;
  width:32px;
  height:32px;
  background:var(--hover-bg);
  border:1px solid var(--border-color);
  border-radius:50%;
  font-size:1.25rem;
  line-height:1;
  color:var(--text-main);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  transition:all var(--transition-fast);
}
.detail-close-btn:hover{
  background:var(--text-main);
  color:var(--bg-color);
}

/* 通し番号表示ボックス */
.code-display-box{
  font-size:1rem;font-weight:800;letter-spacing:.06em;
  padding:.4rem .65rem;
  background-color:var(--hover-bg);
  border:1px solid var(--border-color);
  color:var(--text-main);
  min-height:2.2rem;
}

/* ------ Footer ------ */
.site-footer{margin-top:3.5rem;padding-top:1.25rem;border-top:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;}
.footer-left p{font-size:.5625rem;letter-spacing:var(--ls-wide);color:var(--text-muted);text-transform:uppercase;}
.back-to-top{font-size:.5625rem;letter-spacing:var(--ls-widest);color:var(--text-sub);text-decoration:none;transition:color var(--transition-fast);}
.back-to-top:hover{color:var(--text-main);}

/* utility */
.hidden{display:none!important;}