/* ============================================================================
   よりゃんせ LP — src/_lp/yoryanse-x/yoryanse-x.css
   ----------------------------------------------------------------------------
   読み込み順は tokens.css → shell.css → themes.css → **このファイル**。
   ★ themes.css に yoryanse の項目は無い（botch / pareidol / koborebi の3本だけ）。
     つまり yoryanse は tokens.css の :root をそのまま受けている。ここで
     html[data-app="yoryanse"] を書けば、上書きではなく «初めて与える» ことになる。

   【この案の決め】
   ① **ページが一度だけ割り込まれる**（§5 の .yr-cut）。
      よりゃんせは «通りゃんせ» から来ていて、アイコンも細く開いた戸。
      止められて、1問答えて、通る。それがこのアプリの全部なので、
      ページの真ん中に暗い帯を1枚だけ差し込んだ。
      ★★ **帯は2枚にしない。**2回目からは «割り込み» ではなく «そういう
        デザイン» になり、アプリの «1回1問だけ» と正面から食い違う。
   ② 節の印は **戸のすきま**（2×12px の縦の線）。
      丸（en）／四角（とめばん）と対になる。
   ③ 差し色は **#3E6DAE** ひとつ。アプリの割り込み画面（紙）の accent
      そのもの（lib/features/interrupt/interrupt_palette.dart）。
      ★ 地 #F3F3F3 に対して **4.69:1**。とめばんのライム（1.55:1）と違って
        **字に使ってよい**。
      ★ 暗い帯の上では **#8FB6E6**（同じファイルの暗色パレット。7.2:1）。
   ④ 常時ループは **0本**。このアプリの特徴は動きではなく «構造»
      （止められる → 通る）なので、動かすものが無い。
   ========================================================================== */


/* ═══ §1  トークン ════════════════════════════════════════════════════════ */

html[data-app="yoryanse"]{
  color-scheme: light;

  --bg          : #F3F3F3;
  --surface     : #FFFFFF;
  --surface-2   : #E7E7E7;
  --fg-1        : #101010;
  --fg-2        : #4A4A4A;
  --fg-3        : #656565;
  --rule        : rgba(16,16,16,.12);
  --rule-2      : rgba(16,16,16,.07);
  --rule-hair   : rgba(0,0,0,.08);

  /* ★③ 差し色。明るい地の側。4.69:1 なので字に使える。 */
  --accent      : #3E6DAE;
  --accent-line : rgba(62,109,174,.30);
  --accent-soft : rgba(62,109,174,.07);
  --accent-ink  : #FFFFFF;

  /* --- ★① 割り込みの帯 -------------------------------------------------- */
  --yr-cut-bg   : #22272C;   /* アプリの割り込み画面（暗色）の background */
  --yr-cut-fg   : #F4F2EE;   /*  〃 headword */
  --yr-cut-fg2  : #B4BBC3;   /*  〃 subText(#8C949C) より明るい側へ。
                                  #22272C に対して 8.0:1（subText のままだと
                                  4.4:1 で、長い文には足りない） */
  --yr-cut-acc  : #8FB6E6;   /*  〃 accent。7.2:1 */

  --shadow-card : 0 4px 18px rgba(0,0,0,.07);

  --font-display: var(--font-body);
  --font-num    : var(--font-body);

  --yr-r        : 14px;
  --btn-r       : var(--r-pill);

  /* --- 節の段（ポータルと同値。6案とも同じ）------------------------------ */
  --yr-sec-gap  : clamp(56px,  7vw, 88px);
  --yr-head-pad : clamp(12px, 1.4vw, 18px);
  --yr-head-gap : clamp(28px, 3.4vw, 44px);
  --yr-fs-h1    : clamp(26px, 1.10rem + 2.40vw, 42px);
}

@media (prefers-color-scheme: dark){
  html[data-app="yoryanse"]{
    color-scheme: dark;
    --bg          : #0F0F0F;
    --surface     : #191919;
    --surface-2   : #232323;
    --fg-1        : #F2F2F2;
    --fg-2        : #B9B9B9;
    --fg-3        : #949494;
    --rule        : rgba(242,242,242,.14);
    --rule-2      : rgba(242,242,242,.08);
    --rule-hair   : rgba(255,255,255,.10);
    /* ★ 暗い地では #3E6DAE は 2.6:1 で沈む。明るい側へ振る（#8FB6E6 は
       #0F0F0F に対して 9.9:1）。 */
    --accent      : #8FB6E6;
    --accent-line : rgba(143,182,230,.32);
    --accent-soft : rgba(143,182,230,.08);
    --accent-ink  : #0F0F0F;
    --shadow-card : 0 4px 18px rgba(0,0,0,.5);
    /* ★★ 帯は **暗いままにする**。ページ全体が暗いときに帯だけ明るくすると
       «割り込み» が «明かりが点いた» に変わってしまう。地との差は
       #22272C 対 #0F0F0F ＝ 1.4:1 と僅かなので、縁を1本足して切れ目を出す
       （§5 の .yr-cut に @media で足してある）。 */
  }
}


/* ═══ §2  版面 ════════════════════════════════════════════════════════════
   ★ --shell-max-wide は «中身の幅» なので、padding を内側に取るなら
     上限は 1120 ＋ gutter×2（Pareidol 案で踏んだ罠。6案とも同じ書き方）。 */
.lpyr{
  max-inline-size: calc(var(--shell-max-wide, 1120px) + var(--gutter, 40px) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(20px, 5vw, 40px));
  padding-block-end: clamp(64px, 9vw, 120px);
}
.lpyr .yr-act{ margin-block-start: var(--yr-sec-gap); }


/* ═══ §3  節の見出し ══════════════════════════════════════════════════════
   ポータルの .dw-sec__head / .dw-sec__h を値ごと写した。
   ★② 印は **戸のすきま**（縦の線1本）。アイコンが «細く開いた戸» なので、
     その隙間だけを取り出した形。 */
.lpyr .sec-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  padding-block-end: var(--yr-head-pad);
  border-block-end: 1px solid var(--rule);
  margin-block-end: var(--yr-head-gap);
}
.lpyr .sec-index{
  inline-size: 2px;
  block-size: 12px;
  background: var(--accent);
  display: inline-block;
  transform: translateY(1px);
}
.lpyr .sec-head__h{
  margin: 0;
  font-size: clamp(16px, .74rem + .66vw, 21px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--fg-1);
  word-break: auto-phrase;
  text-wrap: pretty;
}


/* ═══ §4  名のり ══════════════════════════════════════════════════════════
   ★ ここには図版を置かない。**次に来る帯が «初めて見る画面»** であってほしい
     （名のりで割り込みの画を見せてしまうと、帯の «割り込まれた» が効かない）。 */

.lpyr .yr-stage{
  padding-block: clamp(56px, 11vh, 108px) clamp(8px, 2vw, 20px);
}
.lpyr .yr-stage__in{ max-inline-size: 46em; min-inline-size: 0; }

.lpyr .yr-brand{
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}
/* 枠の規則は icons.json の frame に合わせる（角丸 22.5%）。6案とも同値。 */
.lpyr .yr-appicon{
  flex: 0 0 auto;
  inline-size: clamp(38px, 3.4vw, 48px);
  block-size: clamp(38px, 3.4vw, 48px);
  border-radius: 22.5%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule-hair);
}
.lpyr .yr-appicon img{ display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

.lpyr .wordmark{
  display: inline-block;
  font-size: clamp(19px, 1.1vw + 13px, 24px);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--fg-1);
  text-decoration: none;
}
.lpyr .tagline{
  margin: 14px 0 0;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--fg-3);
}
.lpyr .yr-h1{
  margin: clamp(22px, 3.4vw, 40px) 0 0;
  font-size: var(--yr-fs-h1);
  font-weight: 500;
  line-height: 1.46;
  letter-spacing: .01em;
  color: var(--fg-1);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.lpyr .lead{
  margin: clamp(16px, 2.2vw, 24px) 0 0;
  max-inline-size: 34em;
  font-size: clamp(14px, .68rem + .5vw, 16.5px);
  line-height: 1.95;
  color: var(--fg-2);
  word-break: auto-phrase;
  text-wrap: pretty;
}


/* ═══ §5  ★① 割り込みの帯（このページで1回だけ）══════════════════════════
   ★ はみ出させ方は **gutter ぶんだけ**。100vw を使うと、スクロールバーの
     ある環境で «viewport より広い» ことになって横スクロールが出る
     （100vw はスクロールバーを含む幅）。
     gutter ぶんだけなら 1265px の窓では版面（1200px）いっぱいまで広がり、
     携帯では画面いっぱいになる。どちらでも溢れない。
   ★ 上下の余白は節の間隔（--yr-sec-gap）より **大きく** 取る。帯そのものが
     «段落の切れ目» なので、詰めると次の節にくっついて «見出しの背景» に
     見えてしまう。 */
.lpyr .yr-cut{
  margin-block-start: clamp(64px, 8vw, 104px);
  margin-inline: calc(-1 * var(--gutter, 40px));
  padding-block: clamp(48px, 7vw, 88px);
  padding-inline: var(--gutter, 40px);
  background: var(--yr-cut-bg);
  color: var(--yr-cut-fg);
}
@media (prefers-color-scheme: dark){
  /* ★ 暗いページでは地との差が 1.4:1 しかないので、切れ目を線で出す。 */
  .lpyr .yr-cut{
    border-block: 1px solid rgba(255,255,255,.10);
  }
}
.lpyr .yr-cut__in{
  max-inline-size: var(--shell-max-wide, 1120px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4.5vw, 56px);
  align-items: center;
}
@media (min-width: 820px){
  .lpyr .yr-cut__in{ grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}
.lpyr .yr-cut__shot{ margin: 0; justify-self: center; min-inline-size: 0; }
.lpyr .yr-cut__shot img{
  display: block;
  inline-size: min(100%, 300px);
  block-size: auto;
  border-radius: var(--yr-r);
  /* ★ 割り込みの画は地（#22272C）とほぼ同じ暗さなので、輪郭が無いと
     «画面» の外形が消える。白の細線を1本回す。 */
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 10px 34px rgba(0,0,0,.45);
}
.lpyr .yr-cut__say{ min-inline-size: 0; }
.lpyr .yr-cut__eyebrow{
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--yr-cut-acc);
}
.lpyr .yr-cut__h{
  margin: 14px 0 0;
  font-size: clamp(22px, 1rem + 1.9vw, 34px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--yr-cut-fg);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.lpyr .yr-cut__h em{ font-style: normal; color: var(--yr-cut-acc); }
.lpyr .yr-cut__p{
  margin: 1.5em 0 0;
  max-inline-size: 34em;
  font-size: clamp(14px, .66rem + .48vw, 16px);
  line-height: 2.05;
  color: var(--yr-cut-fg2);
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* «◀ Instagram» の読み方。本文より一段小さく、キーの形で囲う。 */
.lpyr .yr-cut__note{
  margin: 20px 0 0;
  max-inline-size: 34em;
  font-size: 13px;
  line-height: 1.9;
  color: var(--yr-cut-fg2);
  word-break: auto-phrase;
}
.lpyr .yr-kbd{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--yr-cut-fg);
  white-space: nowrap;
}


/* ═══ §6  本文 ════════════════════════════════════════════════════════════ */

.lpyr .yr-body{ max-inline-size: 38em; }
.lpyr .yr-body p{
  margin: 0;
  font-size: clamp(14px, .66rem + .48vw, 16px);
  line-height: 2.05;
  color: var(--fg-2);
  word-break: auto-phrase;
  text-wrap: pretty;
}
.lpyr .yr-body p + p{ margin-block-start: 1.5em; }


/* ═══ §7  図版（アプリの実画面）══════════════════════════════════════════
   ★ アプリ内の画面は生成り（#FBFAF8）で、このページの地（#F3F3F3）と
     ほとんど同じ明るさ。輪郭を入れないと «画面» が地に溶けるので、
     rule-hair の1pxを必ず回す（とめばん案と同じ理由）。 */
.lpyr .yr-shots{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2.2vw, 28px);
  margin-block-start: clamp(28px, 3.4vw, 44px);
  max-inline-size: 960px;
}
.lpyr .yr-shots--one{ grid-template-columns: minmax(0, 1fr); max-inline-size: 300px; }
.lpyr .yr-shot{ margin: 0; min-inline-size: 0; }
.lpyr .yr-shot img{
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--yr-r);
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--rule-hair), 0 6px 22px rgba(0,0,0,.10);
}


/* ═══ §8  出典 ════════════════════════════════════════════════════════════
   ★★ **消さない。**単語データを使う条件そのもの（アプリ内のクレジット画面と
     同じ文言）。小さくはするが、読める大きさ・読める濃さを保つ。 */
.lpyr .yr-credits{
  margin-block-start: var(--yr-sec-gap);
  padding-block-start: clamp(20px, 2.6vw, 28px);
  border-block-start: 1px solid var(--rule-2);
  max-inline-size: 44em;
}
.lpyr .yr-credits__h{
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--fg-3);
}
.lpyr .yr-credits ul{
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.lpyr .yr-credits li{
  font-size: 13px;
  line-height: 1.95;
  color: var(--fg-2);
  word-break: auto-phrase;
}
.lpyr .yr-credits li + li{ margin-block-start: 2px; }


/* ═══ §9  扉 ══════════════════════════════════════════════════════════════
   ★★ **ストアのリンクは1本も無い（審査待ち）。**押せるものを出すと嘘になる。 */
.lpyr .yr-gate{
  padding: clamp(26px, 4vw, 44px);
  border-radius: var(--yr-r);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--rule-hair), var(--shadow-card);
  max-inline-size: 40em;
}
.lpyr .yr-gate .tag{
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--accent);
}
.lpyr .yr-gate h2{
  margin: 16px 0 0;
  font-size: clamp(19px, .9rem + 1.1vw, 27px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg-1);
}
.lpyr .yr-gate p{
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--fg-2);
}


/* ═══ §10  入場（一度きり）════════════════════════════════════════════════ */

html.js .lpyr [data-in]{ opacity: 0; }
html.js .lpyr [data-in].is-in{
  opacity: 1;
  animation: dw-fade-up var(--dur-in, .5s) var(--ease-inout) backwards;
}
html.js .lpyr .yr-stage .tagline.is-in{ animation-delay: calc(var(--dur-step, .06s) * 1); }
html.js .lpyr .yr-stage .yr-h1.is-in  { animation-delay: calc(var(--dur-step, .06s) * 2); }
html.js .lpyr .yr-stage .lead.is-in   { animation-delay: calc(var(--dur-step, .06s) * 3); }
/* 帯の中は «割り込み» の順に出す（画 → 目印 → 見出し → 文）。 */
html.js .lpyr .yr-cut .yr-cut__eyebrow.is-in{ animation-delay: calc(var(--dur-step, .06s) * 1); }
html.js .lpyr .yr-cut .yr-cut__h.is-in       { animation-delay: calc(var(--dur-step, .06s) * 2); }
html.js .lpyr .yr-cut .yr-cut__note.is-in    { animation-delay: calc(var(--dur-step, .06s) * 3); }
html.js .lpyr .yr-cut .yr-cut__p.is-in       { animation-delay: calc(var(--dur-step, .06s) * 4); }

@media print{
  html.js .lpyr [data-in],
  html.js .lpyr [data-in].is-in{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  /* ★ 帯は紙では «暗い塊» になってインクを食うだけなので、白地に戻す。 */
  .lpyr .yr-cut{
    background: #FFF;
    color: #101010;
    border: 1px solid #ccc;
  }
  .lpyr .yr-cut__h,
  .lpyr .yr-cut__p,
  .lpyr .yr-cut__note{ color: #101010; }
  .lpyr .yr-cut__eyebrow,
  .lpyr .yr-cut__h em{ color: #3E6DAE; }
  .lpyr .yr-kbd{ border-color: #999; background: none; color: #101010; }
  .lpyr .yr-shot img,
  .lpyr .yr-cut__shot img{ box-shadow: none; border: 1px solid #ccc; }
}


/* ═══ §11  ★ prefers-reduced-motion: reduce ═══════════════════════════════
   ★ Ryo さんの PC は **OS の設定で reduce が入っている**。ここが効いている
     ときが «既定の見え方» だと思って書くこと。
   ★ この案は常時ループが0本なので、止めるのは入場だけ。帯は色と配置で
     できていて動きに頼っていないので、reduce でも «割り込まれた» はそのまま
     残る。 */

@media (prefers-reduced-motion: reduce){
  html .lpyr,
  html .lpyr *{ transition: none; }
  html .lpyr *::before,
  html .lpyr *::after{ transition: none; }
  html .lpyr,
  html .lpyr *{ animation-delay: 0s !important; }

  html.js .lpyr [data-in],
  html.js .lpyr [data-in].is-in{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}