/* ============================================================
   ROOMROOT Design System — roomroot.css v1.0
   唯一のスタイルソース。ページ側にstyleを書くことを禁ずる。
   文法:光の名簿 — 行の左端は窓。一行が、ひとつの小さな部屋。
   ============================================================ */

/* ---------- 0. Tokens ---------- */
:root{
  /* 色(この10色以外を使用禁止) */
  --room:#F7F6F1; --room-recess:#EFEEE6;
  --graphite:#34332C; --graphite-soft:#8A877B; --pencil-pale:#C6C4B8;
  --light-wash:#F3EEDC; --hakage:#DDE1D9; --tokiwa:#3E5C4B;
  --nichiro-a:#E4E8DC; --nichiro-b:#EEDFC8;
  /* 余白スケール(8の倍数のみ) */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px;
  --sp-6:64px; --sp-7:96px; --sp-8:128px;
  /* 線 */
  --rule:1px solid var(--pencil-pale);
  --rule-faint:1px solid var(--room-recess);
  --stroke:1.5px;
  /* モーション */
  --dur-ui:.18s; --dur-breath:2s; --dur-open:.45s;
  --ease:cubic-bezier(.4,0,.2,1);
  /* レイアウト(全画面。余白は画面幅に応じて可変) */
  --max-w:none; --pad-x:clamp(20px,4vw,72px);
  --col-gauge:clamp(200px,16vw,300px); --col-sym:140px;
  --day-t:0;
}
html[data-phase="dawn"]{--room:#F4F5F1;--light-wash:#EFF0E1;}
html[data-phase="day"] {--room:#F7F6F1;--light-wash:#F3EEDC;}
html[data-phase="dusk"]{--room:#F7F2E7;--light-wash:#F6EBD0;}
html[data-phase="lamp"]{--room:#F5EFE3;--light-wash:#F6EDD6;}

/* ---------- 1. Base ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--room);color:var(--graphite);
  font-family:"Zen Kaku Gothic New",sans-serif;font-size:15px;line-height:2;
  transition:background-color var(--dur-breath);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;}
svg{display:block;}
strong{font-weight:500;}
.rr-mincho{font-family:"Shippori Mincho",serif;}
.rr-latin{font-family:"EB Garamond",serif;font-style:italic;}
.rr-mono{font-family:"IBM Plex Mono",monospace;letter-spacing:.1em;}
@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation:none!important;transition:none!important;}
  html{scroll-behavior:auto;}
}

/* ---------- 2. TextLink / Button / 入力UI ---------- */
a{color:var(--tokiwa);text-decoration:none;}
a.rr-quiet{color:var(--graphite);} a.rr-quiet:hover{color:var(--tokiwa);}
a.rr-soft{color:var(--graphite-soft);} a.rr-soft:hover{color:var(--tokiwa);}
.rr-golink{display:inline-block;font-size:12.5px;}
:focus-visible{outline:2px solid var(--tokiwa);outline-offset:3px;}
.rr-btn{display:inline-block;padding:14px 40px;border:1px solid var(--graphite);
  background:none;color:var(--graphite);font-size:13px;letter-spacing:.14em;cursor:pointer;}
.rr-btn:hover{border-color:var(--tokiwa);color:var(--tokiwa);}
.rr-toggle{background:none;border:none;cursor:pointer;font:inherit;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  color:var(--graphite-soft);padding:0;}
.rr-toggle:hover{color:var(--tokiwa);}
.rr-toggle[aria-pressed="true"]{color:var(--tokiwa);}
.rr-input{border:none;border-bottom:var(--rule);background:none;color:var(--graphite);
  font:inherit;padding:6px 2px;min-width:14em;}
.rr-input::placeholder{color:var(--pencil-pale);}
.rr-input:focus{outline:none;border-bottom-color:var(--tokiwa);}

/* ---------- 3. 窓(WindowLight) ---------- */
.rr-window{position:fixed;left:0;top:0;bottom:0;width:min(38vw,420px);
  background:linear-gradient(to right,var(--window-color,var(--light-wash)) 0%,transparent 100%);
  opacity:.75;pointer-events:none;z-index:0;transition:background var(--dur-breath);}
.rr-window-note{position:fixed;left:12px;top:50vh;transform:translateY(-50%);
  writing-mode:vertical-rl;font-family:"Shippori Mincho",serif;font-size:11.5px;
  letter-spacing:.5em;color:var(--graphite-soft);z-index:1;pointer-events:none;}
@media(max-width:760px){.rr-window{width:30vw;}.rr-window-note{display:none;}}

/* ---------- 4. 部屋(page container) ---------- */
.rr-room{position:relative;z-index:1;max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x);}

/* ---------- 5. Header / Breadcrumb / Footer ---------- */
.rr-header{display:flex;justify-content:space-between;align-items:baseline;
  padding:30px 0 0;font-size:12.5px;}
.rr-wordmark{font-family:"EB Garamond",serif;font-weight:500;letter-spacing:.42em;
  font-size:16px;color:var(--graphite);}
.rr-header nav{display:flex;gap:26px;font-weight:500;}
@media(max-width:760px){.rr-header nav{display:none;}}
.rr-breadcrumb{padding:20px 0 0;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.12em;color:var(--graphite-soft);}
.rr-leaving{border-top:var(--rule);margin-top:8vh;padding:32px 0 40px;
  display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;font-size:12.5px;}
.rr-leaving .rr-brand{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.14em;color:var(--graphite-soft);line-height:2.2;}

/* ---------- 6. SectionHeader(時刻+見出し) ---------- */
.rr-hour{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;
  color:var(--graphite-soft);}
.rr-h2{font-family:"Shippori Mincho",serif;font-weight:600;font-size:23px;
  letter-spacing:.06em;margin:14px 0 30px;}
.rr-h3{font-family:"Shippori Mincho",serif;font-weight:600;font-size:16px;
  letter-spacing:.05em;margin:36px 0 12px;}
.rr-label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
  color:var(--graphite-soft);}
.rr-note{font-size:13px;color:var(--graphite-soft);}

/* ---------- 7. RosterLine(名簿行)/ RosterChapter(章) ---------- */
.rr-roster{list-style:none;}
.rr-line .rr-row,.rr-selfline .rr-row{display:grid;
  grid-template-columns:var(--col-gauge) 1fr var(--col-sym);
  column-gap:28px;align-items:center;padding:15px 0;color:var(--graphite);}
.rr-gauge{position:relative;height:12px;
  background:linear-gradient(to right,var(--light-wash) 0%,transparent 100%);}
.rr-gauge i{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--tokiwa);transform:translate(-50%,-50%);
  transition:transform var(--dur-ui) var(--ease);}
.rr-line:hover .rr-gauge i{transform:translate(-50%,-50%) scale(1.8);}
.rr-no{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  color:var(--graphite-soft);display:block;}
.rr-nm{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-top:3px;}
.rr-kage{width:20px;height:20px;flex:none;filter:blur(1.4px);opacity:.9;fill:var(--pencil-pale);}
.rr-ja{font-family:"Shippori Mincho",serif;font-weight:600;font-size:16.5px;
  letter-spacing:.05em;font-style:normal;color:var(--graphite);}
.rr-line:hover .rr-ja{color:var(--tokiwa);}
.rr-la{font-family:"EB Garamond",serif;font-style:italic;font-size:13px;color:var(--graphite-soft);}
.rr-sym{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.16em;
  text-align:right;color:var(--graphite);}
.rr-line.is-ghost .rr-ja{color:var(--pencil-pale);font-weight:500;}
.rr-line.is-ghost .rr-gauge i{opacity:.35;}
.rr-line.is-ghost .rr-sym{color:var(--pencil-pale);}
@media(max-width:760px){
  .rr-line .rr-row,.rr-selfline .rr-row{grid-template-columns:60px 1fr;
    column-gap:16px;grid-template-rows:auto auto;padding:14px 0;}
  .rr-gauge{grid-row:1/3;height:100%;min-height:40px;}
  .rr-sym{grid-column:2;text-align:left;font-size:10px;color:var(--graphite-soft);margin-top:3px;}
  .rr-la{width:100%;}
}
.rr-chapter-h{display:flex;align-items:baseline;gap:20px;margin:14vh 0 30px;}
.rr-chapter-h .zt{font-family:"Shippori Mincho",serif;font-weight:600;font-size:20px;letter-spacing:.12em;}
.rr-chapter-h .ze{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.22em;color:var(--graphite-soft);}
.rr-chapter-h .zn{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--graphite-soft);margin-left:auto;}

/* ---------- 8. IndexFilter(索引の操作列) ---------- */
.rr-controls{display:flex;gap:36px;flex-wrap:wrap;align-items:baseline;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  color:var(--graphite-soft);margin:var(--sp-6) 0 0;}
.rr-controls .sep{color:var(--pencil-pale);}

/* ---------- 9. ResidentLabel(在籍札=表)/ TroubleDiagnosisTable ---------- */
.rr-table{width:100%;border-collapse:collapse;border-top:var(--rule);
  border-bottom:var(--rule);font-size:13px;margin-top:34px;}
.rr-table caption{caption-side:top;text-align:left;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;letter-spacing:.14em;color:var(--graphite-soft);padding-bottom:12px;}
.rr-table th{font-family:"Shippori Mincho",serif;font-weight:500;text-align:left;
  color:var(--graphite-soft);padding:10px 2px;width:8.5em;vertical-align:top;}
.rr-table td{padding:10px 2px;font-family:"IBM Plex Mono",monospace;letter-spacing:.06em;}
.rr-table td .ja2{font-family:"Zen Kaku Gothic New",sans-serif;letter-spacing:0;
  margin-left:10px;color:var(--graphite-soft);}
.rr-table tr+tr th,.rr-table tr+tr td{border-top:var(--rule-faint);}
.rr-table--trouble th{width:11em;}
.rr-table--trouble td{font-family:"Zen Kaku Gothic New",sans-serif;letter-spacing:0;}

/* ---------- 10. PlaceholderImage(気配)/ DwellingDiagram(居場所図) ---------- */
/* 画像比率規定:実写真 主4:5 / 室内3:2。プレースホルダーは気配(影)で代替 */
.rr-presence{position:relative;}
.rr-presence svg{width:100%;height:auto;opacity:.88;}
.rr-presence .cast{transform:skewX(calc(-10deg - var(--day-t)*10deg))
  scaleX(calc(1 + var(--day-t)*.14));transform-origin:bottom left;}
.rr-floor{position:absolute;left:6%;bottom:-12px;width:100%;height:26px;
  background:radial-gradient(ellipse at 38% 50%,var(--hakage) 0%,transparent 68%);
  filter:blur(6px);opacity:.85;
  transform:skewX(-24deg) scaleX(calc(1 + var(--day-t)*.3));transform-origin:left;}
.rr-spot{position:absolute;left:34%;bottom:-6px;width:9px;height:9px;
  border-radius:50%;background:var(--tokiwa);}
.rr-pend{font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.16em;color:var(--graphite-soft);}
.rr-ibasho{display:flex;gap:22px;align-items:center;margin:0 0 36px;}
.rr-ibasho figcaption{font-family:"Shippori Mincho",serif;font-size:15px;
  line-height:2.1;max-width:16em;}
@keyframes rr-sway{0%,100%{transform:skewX(-14deg) translateX(0);}
  50%{transform:skewX(-14deg) translateX(8px);}}
.rr-ambient{position:absolute;pointer-events:none;z-index:0;}
.rr-ambient .cast{transform:skewX(-14deg);transform-origin:bottom left;
  animation:rr-sway 30s ease-in-out infinite;}

/* ---------- 11. Nichiro(日路=目次) ---------- */
.rr-nichiro{position:fixed;top:0;left:0;right:0;z-index:20;height:44px;pointer-events:none;}
.rr-nichiro .line-g{position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,var(--nichiro-a) 0%,#EFE9D2 45%,#F2E3C2 75%,var(--nichiro-b) 100%);}
.rr-nichiro .sun{position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--graphite);transform:translateX(-50%);left:0;}
.rr-nichiro ul{list-style:none;display:flex;position:absolute;top:8px;left:0;right:0;
  justify-content:space-between;padding:0 var(--pad-x);pointer-events:auto;}
.rr-nichiro a{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
  color:var(--graphite-soft);white-space:nowrap;}
.rr-nichiro a:hover,.rr-nichiro a.on{color:var(--tokiwa);}
@media(max-width:860px){
  .rr-nichiro ul{justify-content:flex-start;gap:22px;overflow-x:auto;scrollbar-width:none;}
  .rr-nichiro ul::-webkit-scrollbar{display:none;}
}

/* ---------- 12. Doors(戸口ナビゲーション) ---------- */
.rr-doors{display:flex;gap:clamp(36px,6vw,100px);flex-wrap:wrap;}
.rr-door{position:relative;padding-left:26px;color:var(--graphite);}
.rr-door::before{content:"";position:absolute;left:0;top:2px;bottom:2px;
  width:var(--stroke);background:var(--graphite);}
.rr-door::after{content:"";position:absolute;left:0;top:50%;width:var(--stroke);
  height:14px;background:var(--room);transform:translateY(-50%);
  transition:background-color var(--dur-breath);}
.rr-door .t{font-family:"Shippori Mincho",serif;font-weight:600;font-size:18px;
  letter-spacing:.08em;display:block;}
.rr-door .d{font-size:12.5px;color:var(--graphite-soft);display:block;
  margin-top:6px;max-width:16em;}
.rr-door:hover .t{color:var(--tokiwa);}

/* ---------- 13. 詳細ページ要素(同居レイアウト/通り過ぎる言葉) ---------- */
.rr-cohabit{display:grid;grid-template-columns:minmax(300px,44%) 1fr;
  column-gap:6vw;align-items:start;margin-top:6vh;}
@media(max-width:860px){.rr-cohabit{display:block;}}
.rr-dweller{position:sticky;top:64px;padding:4vh 0 10vh;margin-left:6%;}
.rr-dweller .rr-presence{width:min(30vw,340px);}
.rr-plate{margin-top:44px;}
.rr-plate h1{font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(30px,3.6vw,40px);letter-spacing:.06em;margin-top:10px;line-height:1.5;}
.rr-plate h1 small{display:block;font-size:.36em;font-weight:500;
  color:var(--graphite-soft);letter-spacing:.1em;margin-top:6px;}
.rr-plate .la{font-family:"EB Garamond",serif;font-style:italic;font-size:18px;
  color:var(--graphite-soft);margin-top:8px;}
.rr-plate .en{font-family:"EB Garamond",serif;font-size:12.5px;color:var(--graphite-soft);}
@media(max-width:860px){
  .rr-dweller{position:sticky;top:44px;z-index:5;background:var(--room);
    padding:18px 0 14px;margin-left:0;display:grid;grid-template-columns:92px 1fr;
    gap:18px;align-items:end;transition:background-color var(--dur-breath);}
  .rr-dweller .rr-presence{width:92px;}
  .rr-plate{margin-top:0;}
  .rr-plate h1{font-size:23px;}
  .rr-plate .la{font-size:13.5px;}
  .rr-plate .en,.rr-plate .rr-pend{display:none;}
}
.rr-passages{max-width:600px;padding-bottom:6vh;}
.rr-passage{padding:20vh 0 0;}
.rr-passage:first-child{padding-top:10vh;}
.rr-passage p+p{margin-top:1.2em;}
@media(max-width:860px){.rr-passage{padding:12vh 0 0;}
  .rr-passage:first-child{padding-top:8vh;}}
.rr-faq dt{font-family:"Shippori Mincho",serif;font-weight:600;font-size:15.5px;margin-top:28px;}
.rr-faq dt::before{content:"問 — ";font-family:"IBM Plex Mono",monospace;
  color:var(--graphite-soft);font-weight:400;font-size:11px;letter-spacing:.12em;}
.rr-faq dd{margin-top:8px;}
.rr-selfline{margin-top:44px;}
.rr-selfline .cap{font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.2em;color:var(--graphite-soft);margin-bottom:12px;}

/* ---------- 14. 章(コレクション)要素 ---------- */
.rr-chapterhead{margin:14vh 0 0;max-width:640px;}
.rr-chapterhead h1{font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(26px,3.8vw,38px);letter-spacing:.06em;line-height:1.8;margin-top:18px;}
.rr-chapterhead p{margin-top:26px;max-width:34em;}
.rr-prose{max-width:600px;margin:12vh 0 0;}
.rr-prose h2{font-family:"Shippori Mincho",serif;font-weight:600;font-size:21px;
  letter-spacing:.06em;margin-bottom:26px;}
.rr-prose p+p{margin-top:1.2em;}
.rr-centry{padding:8vh 0 0;}
.rr-centry .rr-row{display:grid;grid-template-columns:var(--col-gauge) 1fr var(--col-sym);
  column-gap:28px;align-items:center;padding:13px 0;}
.rr-centry:hover .rr-gauge i{transform:translate(-50%,-50%) scale(1.8);}
.rr-centry .rr-ja{font-size:19px;}
.rr-gloss{margin-left:228px;max-width:520px;}
.rr-gloss p{font-size:14px;}
.rr-gloss .dw{margin-top:12px;font-family:"Shippori Mincho",serif;
  font-size:13.5px;color:var(--graphite-soft);}
@media(max-width:860px){
  .rr-centry .rr-row{grid-template-columns:60px 1fr;column-gap:16px;grid-template-rows:auto auto;}
  .rr-gloss{margin-left:76px;}
}

/* ---------- 15. 表紙(トップ専用) ---------- */
.rr-cover{position:relative;padding:20vh 0 16vh;}
.rr-cover-inner{max-width:660px;margin-left:clamp(0px,18vw,300px);}
.rr-cover h1{font-family:"Shippori Mincho",serif;font-weight:500;
  font-size:clamp(30px,4.8vw,48px);letter-spacing:.08em;line-height:1.8;}
.rr-cover .en{display:block;margin-top:26px;font-family:"EB Garamond",serif;
  font-style:italic;font-size:16.5px;color:var(--graphite-soft);}
.rr-cover p.intro{margin-top:36px;max-width:34em;font-size:14.5px;}
@media(max-width:760px){.rr-cover{padding:14vh 0 12vh;}
  .rr-cover-inner{margin-left:8vw;}}

/* ---------- 16. 行をひらく(View Transition:名簿⇄部屋の倍率変化) ---------- */
@view-transition{navigation:auto;}
.rr-selfline .rr-row{view-transition-name:rr-line;}
::view-transition-old(rr-line),::view-transition-new(rr-line){
  animation-duration:var(--dur-open);animation-timing-function:var(--ease);}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important;}
}

/* ---------- 17. THE CANOPY(天蓋) ---------- */
.cv-stage{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  height:calc(100svh - 150px);min-height:540px;overflow:hidden;}
.cv-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
  touch-action:none;}
.cv-hud{position:absolute;left:var(--pad-x);top:clamp(20px,5vh,56px);
  max-width:560px;pointer-events:none;}
.cv-hud .rr-toggle,.cv-hud a{pointer-events:auto;}
.cv-title{font-weight:600;font-size:clamp(30px,4vw,44px);letter-spacing:.14em;margin-top:14px;}
.cv-lead{margin-top:16px;font-size:13px;color:var(--graphite-soft);line-height:2;}
.cv-lens{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline;margin-top:26px;}
.cv-lens-label{font-size:10.5px;color:var(--graphite-soft);letter-spacing:.16em;}
.cv-result{font-size:11px;color:var(--tokiwa);letter-spacing:.12em;}
.cv-card{position:absolute;width:260px;background:var(--room);
  border:1px solid var(--pencil-pale);padding:18px 20px;z-index:5;
  transition:background-color var(--dur-breath);}
.cv-card .rr-no{display:block;}
.cv-card b{display:block;font-size:19px;letter-spacing:.05em;margin-top:6px;font-weight:600;}
.cv-card i{display:block;font-size:13px;color:var(--graphite-soft);}
.cv-card .sym{display:block;font-size:11.5px;margin-top:10px;letter-spacing:.14em;}
.cv-card .dw{display:block;font-size:12.5px;color:var(--graphite-soft);margin-top:10px;line-height:1.9;}
.cv-card a{display:inline-block;margin-top:12px;font-size:12.5px;}
html[data-phase="lamp"] .cv-card{background:#161B14;border-color:#33402C;color:var(--bone,#E9E4D6);}
html[data-phase="lamp"] .cv-card b{color:#E9E4D6;}
@media(max-width:760px){
  .cv-stage{height:calc(100svh - 120px);}
  .cv-hud{right:var(--pad-x);max-width:none;}
  .cv-lead br{display:none;}
  .cv-card{left:16px!important;right:16px;width:auto;top:auto!important;bottom:16px;}
}

/* 表紙の背景としての天蓋(環境モード) */
.cv-ambient{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.cv-wrap{position:relative;width:100vw;margin-left:calc(50% - 50vw);}
.cv-wrap > .rr-cover{position:relative;z-index:1;padding-left:var(--pad-x);padding-right:var(--pad-x);}

/* ---------- 18. 音量アップ:窓光の強化と紙の粒子 ---------- */
.rr-window{opacity:.95;width:min(46vw,560px);}
html[data-phase="dusk"]{--room:#F7F0DF;--light-wash:#F7E9C8;}
html[data-phase="lamp"]{--room:#F5EEDF;--light-wash:#F7ECD2;}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.045;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}