@charset "UTF-8";

/* =========================================================
   aap_models.css

   場所 : salient-child/css/aap_models.css
   役割 : 人。12人 + 犬猫。名前と色と状態

   ---------------------------------------------------------
   参照 : core
   知らない : commons / series

   正本はキャラ図鑑。ここはそこから写すだけ
   CSS の都合で色を決めない
   （見分けにくいから色を変える = 図鑑を CSS に合わせている）

   状態のリストは設計しない。記事から出す
   R1〜R13 を通したとき、出てきたものがその子の全リスト
   ---------------------------------------------------------

   .is-rina          その子である
   .is-rina.is-angry その子の、その状態

   class RINA {} とは逆の行為
   閉じ込めるのではなく、広げる方の class
   ========================================================= */


/* ---------------------------------------------------------
   01. 名前と色
   会話で ::before に名前が出る
   --------------------------------------------------------- */

/* --- BASE --- */

.is-rina::before {
    content: "リナ";
    color: var(--aap-orange);
}

/* =========================================================
   is-shadow  裏の姿（会話のパターン修飾子）

   場所 : aap_models.css
   軸1 = 誰が : is-rina / is-eina …（models。名前と色）
   軸2 = どう見せるか : is-shadow（名前を黒箱で囲む。話者を問わず効く）

   使い方 : <p class="is-rina is-shadow">   リナの裏
            <p class="is-eina is-shadow">   エイナの裏
            → is-shadow 1個で全員に効く（12人ぶん書かない）
            話者は is-rina のままなので commons の連投・間隔ルールも効く

   名前の色は core の --aap-shadow（黄）。黒箱だけ被せる
   R17「同じ人が、握る手で変わる」の実装。名前は変えない。箱が裏を示す

   ★崩れない設計 : width を触らない＝commons の固定幅(--aap-name-w)のまま。
     名前枠をそのまま黒く塗るだけなので、文字数（リナ/エイナ/JURI）に
     関係なく本文位置が必ず揃う。文字ぴったりの黒箱は margin_right が
     文字数で崩れるため採用しない
   ========================================================= */

/* PC : 黒箱は文字ぴったり。本文位置は p の padding-left(--aap-name-w)で固定＝揃う。
   ::before を absolute で浮かせ、負 text-indent と切り離す */
.aap_labo_talk p.is-shadow {
    position: relative;
    text-indent: 0;                 /* 負インデントを殺す（::before と切り離す） */
}

.aap_labo_talk p.is-shadow::before {
    position: absolute;             /* 浮かせる＝レイアウト幅を占有しない */
    left: 0;
    top: 0;
    width: auto !important;         /* 文字ぴったり */
    background: #141414;
    color: var(--aap-shadow);
    border-radius: 4px;
    padding: 0.1em 0.5em;
    text-align: left;
}

@media only screen and (max-width: 690px) {
    .aap_labo_talk p.is-shadow::before {
        position: static;           /* absolute 解除、通常の block に戻す */
        width: fit-content !important;
    }
    .aap_labo_talk p.is-shadow {
        text-indent: 0;
    }
}


.is-eina::before {
    content: "エイナ";
    color: var(--aap-blue);
}

/* --- Producer --- */

.is-oji::before {
    content: "おじさん";
    color: var(--aap-gray);
}


/* --- 図鑑から写す --- */

/* HARUKA : 黒 */
/* .is-haruka::before { content: "ハルカ"; color: ; } */

/* NANAMI : 緑 */
/* .is-nanami::before { content: "ナナミ"; color: ; } */

/* SANGHA : 青 + 白 */
/* .is-sangha::before { content: "サンハ"; color: ; } */

/* .is-shiori::before  { content: "シオリ";  color: ; } */

/* JURI : パープル / J-STUDY */
.is-juri::before {
    content: "JURI";
    color: var(--aap-juri);
}

/* MEGUMI : ラベンダー / LOG0001 */
.is-megumi::before {
content: "メグミ";
color: var(--aap-lavender);
}

/* NOZOMI : 空色 / LOG0002 */
.is-nozomi::before { content:"ノゾミ"; color:var(--aap-sky); }


/* .is-hayoung::before { content: "ハヨン";  color: ; } */
/* .is-nozomi::before  { content: "ノゾミ";  color: ; } */
/* .is-eri::before     { content: "エリ";    color: ; } */
/* .is-kana::before    { content: "カナ";    color: ; } */


/* --- A（アニマル） --- */

.is-nari::before {
    content: "ナリ";
    color: var(--aap-gray);
}

/* .is-kuna::before { content: "クナ"; color: ; } */


/* ---------------------------------------------------------
   02. 状態

   人格ごとに違う
   RINA が勝つと崩れる
   EINA が負けると名前を呼べなくなる
   同じ angry ではない

   記事を HTML 化する中で、必要になったものだけ足す
   --------------------------------------------------------- */

/* --- RINA --- */

/* .is-rina.is-angry { } */
/* .is-rina.is-happy { } */
/* .is-rina.is-sulk  { } */

/* --- EINA --- */

/* .is-eina.is-angry { } */
/* .is-eina.is-sulk  { } */

/* --- おじさん --- */

/* .is-oji.is-tired { } */