/*
Theme Name: Arkhe Child - Yasumazu Laboratory
Template: arkhe
Description: ヤスマズラボラトリー用 Arkhe子テーマ。POP×GEEK / 研究所モチーフ。
Version: 0.1.0
Author: FOMMAY
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  --ink:#16161a;
  --paper:#faf8f2;
  --coral:#e63b2e;   /* 工作室 WORKSHOP（赤） */
  --yellow:#ffab2e;  /* 自由研究 RESEARCH（黄） */
  --sky:#35a7e0;     /* 音楽室 MUSIC ROOM（青） */
  --mint:#2fc79a;    /* 実験室 LABORATORY（緑） */
  --coffee:#6f4e37;  /* LAB STATUS: COFFEE */
  --muted:#8a8578;
  --muted-dark:#5c584d;
  --shadow:4px 4px 0 var(--ink);
  --shadow-sm:3px 3px 0 var(--ink);
}

/* ============================================================
   BASE OVERRIDE（Arkheのデフォルト装飾を上書き）
   ============================================================ */
/* カスタムスクロールバー（綴の完成版に準拠） */
html{overflow-y:scroll;scrollbar-width:auto;scrollbar-color:var(--ink) var(--paper)}
::-webkit-scrollbar{width:15px;height:15px}
::-webkit-scrollbar-track{background:var(--paper);border-left:2px solid var(--ink)}
::-webkit-scrollbar-thumb{background:var(--yellow);border:2px solid var(--ink);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--coral)}

body.yasumazu-lab{
  font-family:"Zen Maru Gothic",sans-serif;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(22,22,26,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,22,26,.055) 1px, transparent 1px);
  background-size:26px 26px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
.yasumazu-lab .dot{font-family:"DotGothic16",monospace;letter-spacing:.06em}
.yasumazu-lab .wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.yasumazu-lab *{box-sizing:border-box}

/* ページ全体のラッパー（幅と縦間隔を統括） */
.lab-page{width:min(1120px,94vw);margin:0 auto;padding:20px 0 60px;display:flex;flex-direction:column;gap:26px}

/* ---------- HEADER（白カード＋ボタン型ナビ） ---------- */
.lab-header{
  position:sticky;top:14px;z-index:40;background:#fff;
  border:2px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);
  padding:12px 18px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}
.lab-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);background:none;border:none;cursor:pointer;padding:0}
.lab-logo-icon{
  width:38px;height:38px;border:2px solid var(--ink);border-radius:9px;
  background:var(--coral);box-shadow:var(--shadow-sm);
  display:grid;place-items:center;font-size:26px;
}
.lab-logo-txt{display:flex;flex-direction:column;align-items:flex-start}
.lab-logo-txt .jp{font-family:"DotGothic16",monospace;font-size:20px;letter-spacing:1px;line-height:1.2}
.lab-logo-txt .en{font-family:"DotGothic16",monospace;font-size:10px;color:var(--muted);letter-spacing:3px}

.lab-gnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lab-gnav .navbtn{
  font-family:"DotGothic16",monospace;font-size:13px;cursor:pointer;
  padding:7px 13px;border:2px solid var(--ink);border-radius:8px;
  box-shadow:2px 2px 0 var(--ink);background:#fff;color:var(--ink);
  text-decoration:none;transition:transform .1s ease, box-shadow .1s ease, background .12s ease, color .12s ease;
}
.lab-gnav .navbtn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
/* ホバー時に部屋の色に変わる */
.lab-gnav .navbtn[data-room="home"]:hover,
.lab-gnav .navbtn[data-room="about"]:hover{background:var(--ink);color:var(--paper)}
.lab-gnav .navbtn[data-room="workshop"]:hover{background:var(--coral);color:#fff}
.lab-gnav .navbtn[data-room="music"]:hover{background:var(--sky);color:#fff}
.lab-gnav .navbtn[data-room="lab"]:hover{background:var(--mint);color:#fff}
.lab-gnav .navbtn[data-room="research"]:hover{background:var(--yellow);color:var(--ink)}
/* アクティブ（現在ページ）は塗りつぶし */
.lab-gnav .navbtn.is-active[data-room="home"],
.lab-gnav .navbtn.is-active[data-room="about"]{background:var(--ink);color:var(--paper)}
.lab-gnav .navbtn.is-active[data-room="workshop"]{background:var(--coral);color:#fff}
.lab-gnav .navbtn.is-active[data-room="music"]{background:var(--sky);color:#fff}
.lab-gnav .navbtn.is-active[data-room="lab"]{background:var(--mint);color:#fff}
.lab-gnav .navbtn.is-active[data-room="research"]{background:var(--yellow);color:var(--ink)}
.lab-sns{display:grid;place-items:center;width:32px;height:32px;color:var(--ink);text-decoration:none;font-family:"DotGothic16",monospace;font-size:17px;transition:transform .1s ease, color .12s ease}
.lab-sns:hover{color:var(--coral);transform:translateY(-1px)}

/* ハンバーガー（スマホ用・PCでは非表示） */
.lab-burger{display:none;place-items:center;width:42px;height:42px;background:#fff;border:2px solid var(--ink);border-radius:9px;box-shadow:var(--shadow-sm);cursor:pointer;font-size:18px;font-family:"DotGothic16",monospace}

@media(max-width:860px){
  .lab-gnav{display:none;width:100%;flex-direction:column;align-items:stretch;border-top:2px dashed rgba(22,22,26,.25);padding-top:12px}
  .lab-page.menu-open .lab-gnav{display:flex}
  .lab-gnav .navbtn{text-align:left;font-size:15px;padding:10px 14px}
  .lab-burger{display:grid}
}

/* ---------- HERO（全幅・断面図ナビ） ---------- */
.lab-hero-section{position:relative}
.lab-canvas{
  position:relative;border:3px solid var(--ink);border-radius:18px;background:#f2f0ea;
  box-shadow:6px 6px 0 var(--ink);aspect-ratio:1206/790;overflow:hidden;
  container-type:inline-size; /* 看板・湯気・電球をcqw/cqhで配置し、リサイズ崩れを防ぐ */
}
.lab-canvas img{width:100%;height:100%;object-fit:cover;display:block}

/* 看板＝ホットスポット（イラスト内の看板そのものがボタンになる） */
.lab-sign-btn{
  position:absolute;text-decoration:none;border:none;background:transparent;
  border-radius:16px;cursor:pointer;padding:0;
  animation:blink 3.4s ease-in-out infinite; /* “呼吸”するような明滅 */
  transition:background .15s ease;
}
.lab-sign-btn:hover{background:color-mix(in srgb, var(--room-color) 10%, transparent)}
.lab-sign-btn[data-room="workshop"]{--room-color:var(--coral);animation-delay:0s}
.lab-sign-btn[data-room="music"]{--room-color:var(--sky);animation-delay:.8s}
.lab-sign-btn[data-room="lab"]{--room-color:var(--mint);animation-delay:1.6s}
.lab-sign-btn[data-room="research"]{--room-color:var(--yellow);animation-delay:2.4s}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}

/* 湯気（フラスコの口から上昇しながら左右にゆれる） */
.lab-steam{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.9);
  filter:blur(2px);pointer-events:none;
  animation:steamRise 3.8s ease-in-out infinite;
}
@keyframes steamRise{
  0%{transform:translate(0,0) scale(.7);opacity:0}
  15%{opacity:.85}
  50%{transform:translate(0.5cqw,-3.3cqh) scale(1)}
  75%{transform:translate(-0.25cqw,-5.06cqh) scale(1.1)}
  100%{transform:translate(0.33cqw,-6.83cqh) scale(1.2);opacity:0}
}

/* IDEA電球（不規則なタイミングでピカッと光る） */
.lab-bulb-glow{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,214,74,.85) 0%,rgba(255,214,74,0) 70%);
  animation:bulbFlash 7s linear infinite;
}
@keyframes bulbFlash{
  0%,8%,100%{opacity:0}
  10%,13%{opacity:.9}
  16%{opacity:0}
  18%{opacity:.7}
  21%,54%{opacity:0}
  57%,60%{opacity:.85}
  64%,79%{opacity:0}
  81%{opacity:.5}
  84%{opacity:0}
}

/* コーヒーの一滴 */
.lab-drip{
  position:absolute;width:5px;height:10px;border-radius:50% 50% 60% 60%;
  background:var(--coffee);pointer-events:none;
  animation:dripFall 2.4s ease-in infinite;
}
@keyframes dripFall{
  0%,55%{transform:translateY(0) scale(.6);opacity:0}
  60%{opacity:1;transform:translateY(0.25cqh) scale(1)}
  95%{transform:translateY(5.57cqh);opacity:.9}
  100%{transform:translateY(6.08cqh);opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .lab-sign-btn,.lab-steam,.lab-bulb-glow,.lab-drip{animation:none!important}
}

/* ---------- STATUS（5項目・プログレスバー） ---------- */
.lab-status{
  margin:34px 0;display:grid;gap:14px;
  grid-template-columns:repeat(5,1fr); /* PCはどの幅でも5列を維持 */
}
.lab-status .stat{
  background:#fff;border:2px solid var(--ink);border-radius:12px;
  box-shadow:var(--shadow-sm);padding:14px 16px;
  display:flex;flex-direction:column;gap:8px;
}
.lab-status .stat .row{display:flex;justify-content:space-between;align-items:baseline;font-family:"DotGothic16",monospace;font-size:14px}
.lab-status .stat .row .num{font-size:20px}
.lab-status .stat .track{height:12px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);overflow:hidden}
.lab-status .stat .fill{height:100%}
.lab-status .stat .desc{font-size:11px;color:var(--muted);line-height:1.5}
@media(max-width:860px){
  .lab-status{grid-template-columns:repeat(2,1fr)} /* スマホは2列×3段(COFFEEだけ余る) */
}

/* ---------- SECTION ---------- */
.lab-section{display:flex;flex-direction:column;gap:14px}
.lab-sec-head{display:flex;align-items:center;gap:10px;margin:0}
.lab-sec-head h2{font-family:"DotGothic16",monospace;font-size:22px;font-weight:400;letter-spacing:2px;margin:0;display:flex;align-items:center;gap:10px}
.lab-sec-head h2::before{content:"";width:14px;height:14px;background:var(--ink);display:inline-block}
.lab-sec-head.sq-coral h2::before{background:var(--coral)}
.lab-sec-head.sq-mint h2::before{background:var(--mint)}
.lab-sec-head.sq-sky h2::before{background:var(--sky)}
.lab-sec-head.sq-yellow h2::before{background:var(--yellow)}
.lab-sec-head .line{flex:1;border-top:2px dashed rgba(22,22,26,.3)}
.lab-sec-head .sub{font-family:"DotGothic16",monospace;font-size:12px;color:var(--muted)}

/* 実験カード（記事一覧・関連記事で共通利用） */
.lab-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.lab-card{
  text-align:left;background:#fff;border:2px solid var(--ink);border-radius:12px;
  box-shadow:var(--shadow);text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:10px;padding:16px;
  transition:transform .1s ease, box-shadow .1s ease;
}
.lab-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.lab-card .thumb{aspect-ratio:16/10;background:#f0eee6;border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.lab-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lab-card .badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lab-card .code{font-family:"DotGothic16",monospace;font-size:11px;background:var(--ink);color:var(--paper);padding:3px 8px;border-radius:5px}
.lab-card .room-badge{font-family:"DotGothic16",monospace;font-size:11px;border:2px solid var(--ink);border-radius:5px;padding:2px 8px}
.lab-card .date{margin-left:auto;font-family:"DotGothic16",monospace;font-size:11px;color:var(--muted)}
.lab-card .ttl{font-weight:700;font-size:16px;line-height:1.5}
.lab-card .summary{font-size:13px;color:var(--muted-dark);line-height:1.7;border-top:2px dashed rgba(22,22,26,.2);padding-top:8px}

/* 部屋バッジの色（room-badge / lab-badge 兼用） */
.room-badge.coral,.lab-badge.coral{background:var(--coral);color:#fff}
.room-badge.sky,.lab-badge.sky{background:var(--sky);color:#fff}
.room-badge.mint,.lab-badge.mint{background:var(--mint);color:#fff}
.room-badge.yellow,.lab-badge.yellow{background:var(--yellow);color:var(--ink)}
.lab-badge{font-family:"DotGothic16",monospace;font-size:11px;border:2px solid var(--ink);border-radius:5px;padding:2px 8px}
.lab-badge.exp{background:var(--ink);color:var(--paper)}

/* ---------- 4 ROOMS（縦積みカード・tint背景） ---------- */
.lab-rooms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.lab-room{
  text-decoration:none;color:var(--ink);border:2px solid var(--ink);border-radius:12px;
  box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;
  align-items:flex-start;gap:8px;min-height:200px;
  transition:transform .1s ease, box-shadow .1s ease;
}
.lab-room:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.lab-room .ico{font-size:30px;line-height:1}
.lab-room .jp{font-family:"DotGothic16",monospace;font-size:24px;letter-spacing:2px}
.lab-room .en{font-family:"DotGothic16",monospace;font-size:11px;letter-spacing:2px;color:var(--muted-dark)}
.lab-room .desc{font-size:13px;line-height:1.7;color:#3d3a33}
.lab-room .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:2px dashed rgba(22,22,26,.25);padding-top:10px;width:100%;font-family:"DotGothic16",monospace}
.lab-room .foot span:first-child{font-size:12px}
.lab-room .foot span:last-child{font-size:13px}

/* ---------- 所長バナー ---------- */
.lab-director-banner{
  background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);
  padding:22px 26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.lab-director-banner .ava{width:64px;height:64px;border:2px solid var(--ink);border-radius:50%;box-shadow:var(--shadow-sm);object-fit:cover}
.lab-director-banner .body{flex:1;min-width:220px}
.lab-director-banner .quote{margin:0;font-size:22px;letter-spacing:1px}
.lab-director-banner .lead{margin:6px 0 0;font-size:13px;color:var(--muted-dark)}
.lab-director-banner .btn{
  cursor:pointer;font-size:14px;background:var(--yellow);border:2px solid var(--ink);
  border-radius:10px;box-shadow:var(--shadow);padding:10px 18px;text-decoration:none;color:var(--ink);
  transition:transform .1s ease, box-shadow .1s ease;
}
.lab-director-banner .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}

@media(max-width:860px){
  .lab-rooms{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .lab-rooms{grid-template-columns:1fr}
}

/* ---------- FOOTER（中央寄せ・破線上枠） ---------- */
.lab-footer{border-top:2px dashed rgba(22,22,26,.3);padding-top:16px;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;font-family:"DotGothic16",monospace;font-size:12px;color:var(--muted)}

/* ---------- TOPボタン（スクロールで出現） ---------- */
.lab-top{
  position:fixed;right:22px;bottom:22px;z-index:50;cursor:pointer;
  background:#fff;border:2px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);
  padding:9px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-family:"DotGothic16",monospace;font-size:11px;
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, box-shadow .1s ease;
}
.lab-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.lab-top:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.lab-top .ic{font-size:20px}

/* ---------- ROOM ARCHIVE（部屋別アーカイブ）---------- */
.lab-archive{display:flex;flex-direction:column;gap:26px}
.lab-room-hero{border:2px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);padding:26px 28px}
.lab-room-hero .inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.lab-room-hero .iconbox{width:72px;height:72px;border:2px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);display:grid;place-items:center;font-size:34px}
.lab-room-hero .iconbox.coral{background:var(--coral)}
.lab-room-hero .iconbox.sky{background:var(--sky)}
.lab-room-hero .iconbox.mint{background:var(--mint)}
.lab-room-hero .iconbox.yellow{background:var(--yellow)}
.lab-room-hero .txt{flex:1;min-width:240px}
.lab-room-hero .titlerow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.lab-room-hero h1{margin:0;font-family:"DotGothic16",monospace;font-size:46px;letter-spacing:4px}
.lab-room-hero .en{font-family:"DotGothic16",monospace;font-size:14px;letter-spacing:3px;color:var(--muted-dark)}
.lab-room-hero p{margin:8px 0 0;font-size:14px;line-height:1.8;color:#3d3a33}
.lab-room-hero .records{background:#fff;border:2px solid var(--ink);border-radius:10px;box-shadow:var(--shadow-sm);padding:10px 16px;font-family:"DotGothic16",monospace;text-align:center}
.lab-room-hero .records .lbl{font-size:11px;color:var(--muted)}
.lab-room-hero .records .cnt{font-size:28px;line-height:1.2}
.lab-room-hero .records .cnt small{font-size:13px}

/* ---------- 記事ページ ---------- */
.lab-single{display:flex;flex-direction:column;gap:26px}
.lab-back{align-self:flex-start;background:none;border:none;font-size:13px;color:var(--muted-dark);padding:0;text-decoration:none}
.lab-back:hover{color:var(--ink)}
.lab-article-head{background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);padding:26px 28px;display:flex;flex-direction:column;gap:14px}
.lab-article-head .badges{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lab-article-head .code{font-family:"DotGothic16",monospace;font-size:13px;background:var(--ink);color:var(--paper);padding:5px 12px;border-radius:6px;letter-spacing:1px}
.lab-article-head .room-badge{font-family:"DotGothic16",monospace;font-size:13px;border:2px solid var(--ink);border-radius:6px;padding:3px 10px}
.lab-article-head .meta{margin-left:auto;font-family:"DotGothic16",monospace;font-size:13px;color:var(--muted-dark)}
.lab-article-head h1{margin:0;font-family:"DotGothic16",monospace;font-size:34px;line-height:1.4;letter-spacing:1px}
.lab-article-head .summary{margin:0;font-size:14px;color:var(--muted-dark);border-top:2px dashed rgba(22,22,26,.2);padding-top:12px;line-height:1.8}
.lab-article-thumb{border:2px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.lab-article-thumb img{width:100%;display:block}

/* 記事本文（実験ノート型ブロックの見た目） */
.lab-article-body{font-size:15px;line-height:1.9;display:flex;flex-direction:column;gap:18px}
.lab-article-body .lab-note{background:#fff;border:2px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);padding:20px 24px;margin:0}
.lab-article-body .lab-note .k{font-family:"DotGothic16",monospace;font-size:19px;color:var(--ink);display:flex;align-items:center;gap:8px;border-bottom:2px solid var(--sky);padding-bottom:10px;margin-bottom:12px}

@media(prefers-reduced-motion:reduce){
  .yasumazu-lab *{animation:none!important;transition:none!important}
}