@charset "UTF-8";

/* =========================================================
   aap_commons.study.css

   場所 : salient-child/css/aap_commons.study.css
   役割 : AAP-STUDY の差分

   ---------------------------------------------------------
   参照 : core / models / labo_commons
   最後に読まれる = 一番強い

   ---------------------------------------------------------
   ★ このファイルが「シリーズは名前と幅を持つ」の実例

   指南書01 v1.0 §8 は「色味とテキストの味だけ」と書いていた
   35本読んで、間違いだと分かった

   色     → 人が持つ        （正しかった）
   名前   → シリーズが持つ  （ここ）
   幅     → シリーズが持つ  （ここ）
   文体   → 誰も持たない    （テキストが持つ）

   ---------------------------------------------------------
   ★ 起点はコンテナ（.aap_container_study_section）

   body には依存しない = AL 初日の設計
   Salient は body から category- を出さない（container class へ移行済み）
   ので body.category-study は効かない。コンテナから拾う
   （body を使うのは base だけ = Salient UI そのものに触れる時）

   ---------------------------------------------------------
   STUDY = JURI + SANGHA。ときどき RINA

   誰も書いてないエリアに行く
   미쳤어  → 辞書の意味が90%役に立たない
   헐     → 「驚き」じゃなく「力が抜けた音」
   갸루    → 韓国語に存在しない
   사장님  → 誰のことでもない

   全部「ない」を書いている
   普通の韓国語教材は「ある」を教える
   ないものは検索できない。だから誰も書いてない
   ========================================================= */


/* ---------------------------------------------------------
   01. 話者名

   STUDY のおじさんは「AAPアジョシ」
   R系の「おじさん」ではない

   JURI の一人称は「ジュリ」（自分の名前で喋る）
   RINA は「私」「リナ」。人によって違う
   --------------------------------------------------------- */

.aap_container_study_section .is-oji::before {
    content: "AAPアジョシ";
}

.aap_container_study_section .is-juri::before {
    content: "ジュリ";
}

.aap_container_study_section .is-sangha::before {
    content: "サンハ";
}


/* ---------------------------------------------------------
   02. 話者名の幅

   「おじさん」は4文字 = 5.5em で足りた
   「AAPアジョシ」は7文字

   core の --aap-name-w をコンテナで上書きする
   変数の意味がここで生きる
   --------------------------------------------------------- */

.aap_container_study_section {
    --aap-name-w: 8em;
}


/* ---------------------------------------------------------
   03. RINA が STUDY に出るとき

   R系の RINA は「〜なんだ」（相棒）
   STUDY の RINA は「です・ます」（客として入る）

   → これは文体。CSS では持てない
     テキストが持つ

   色と名前は models のまま
   --------------------------------------------------------- */


/* ---------------------------------------------------------
   04. ハングルの物理

   会話の中にハングルが点在する
   行単位で言語を切れない = span で当てる（commons 01-6）

   ここでは、STUDY 全体で
   ハングルが混ざったときの行送りを少しだけ緩める
   --------------------------------------------------------- */

.aap_container_study_section .aap_labo_talk p {
    line-height: 1.95;
}


/* ---------------------------------------------------------
   05. 今後の候補

   ・JURI(電話) のような話者名の状態（STUDY003）
     → .is-juri.is-phone::before { content: "ジュリ（電話）"; }
     出てから足す

   ・「」の話者記号（STUDY003-004）
     → 記号は本文に書く。CSS は関与しない
   --------------------------------------------------------- */


/* =========================================================
   aap_study_door  講座の扉（JURI de STUDY の名乗り）

   場所 : aap_commons.study.css
   役割 : J-STUDY本編の入口。カスタムパーツ
          中身は div で組む = Salientの p{padding-bottom} を踏まない
          間隔は door 側で持つ（親の p 強制を受けないので !important 不要）
          body にも依存しない = 自分のクラスだけで完結する新しいやり方
   ========================================================= */

.aap_study_door {
    padding: 1.8em 2em;
    border-radius: 14px;
    background: rgba( 140, 82, 255, 0.05 );
    border: 1px solid rgba( 140, 82, 255, 0.22 );
}

.aap_study_door .line {
    font-family: var(--aap-font-title);   /* ゴシック・くっきり */
    font-size: var(--aap-fs-small);       /* 本文より小さく */
    line-height: 1.9;
    color: var(--aap-black);
    margin: 0 0 0.7em;
}

.aap_study_door .line:last-child {
    margin: 0;
}

/* 心の声＝グレー・明朝 */
.aap_study_door .aap_labo_t {
    font-family: var(--aap-font-serif);
    color: var(--aap-gray);
}

/* =========================================================
   aap_study_chat  Salient Chat Thread への塩味（J-STUDY）
   場所 : aap_commons.study.css
   Extra Class: aap_study_chat

   色は設定画面のグレー2トーンで持つ（親はいじらない・カラフルは似合わない）
   ここが持つのはフォントだけ
   ========================================================= */

.aap_study_chat .nectar-chat-thread__bubble-content__inner,
.aap_study_chat .nectar-chat-thread__bubble-name {
    font-family: var(--aap-font-title) !important;
}

/* =========================================================
   aap_study_knowledge  例文コーナー（J-STUDY の豆知識）

   場所 : aap_commons.study.css
   役割 : aap_labo_knowledge（おまけの小箱）の J-STUDY 版
          会話がメイン、ここは一段引いたグレーの小箱
          右上に JURIパープルの「例文」ラベルを1点だけ乗せる
          Salient UI は使わない自作 div = body非依存・親と喧嘩しない
   ========================================================= */

.aap_study_knowledge {
    position: relative;
    margin: 1.8em 0 2em;
    padding: 1.4em 1.4em 1.1em;
    background: rgba( 138, 138, 138, 0.05 );   /* ごく薄いグレー。会話より一段沈める */
    border-radius: 10px;
    border: 1px solid var(--aap-rule);
    font-size: var(--aap-fs-small);            /* 本文より小さく＝おまけの記号 */
    line-height: 1.85;
    color: var(--aap-black);
}

/* 右上ラベル：JURIパープルの塗り（枠線をまたいで浮く） */
.aap_study_knowledge .aap_study_knowledge_label {
    position: absolute;
    top: 0;
    right: 1.2em;
    transform: translateY(-50%);
    background: var(--aap-juri);
    color: #fff;
    font-family: var(--aap-font-title);
    font-weight: 700;
    font-size: 0.78em;
    letter-spacing: 0.08em;
    padding: 0.35em 1em;
    border-radius: 999px;
}

.aap_study_knowledge p {
    margin: 0 0 0.6em;
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_study_knowledge p:last-child {
    margin-bottom: 0;
}

/* 例文のハングル（太字） */
.aap_study_knowledge .aap_labo_kr {
    font-weight: 700;
}

/* 読み（カタカナ・グレー小さめ） */
.aap_study_knowledge .aap_study_knowledge_yomi {
    color: var(--aap-gray);
    font-size: 0.92em;
}

/* 末尾の注記（※）は線で区切って一段下・グレー */
.aap_study_knowledge .aap_labo_note {
    color: var(--aap-gray);
    margin-top: 0.9em;
    padding-top: 0.7em;
    border-top: 1px solid var(--aap-rule);
}


/* =========================================================
   aap_study_end  J-STUDY の締め（講座のサインオフ）

   場所 : aap_commons.study.css
   役割 : J-STUDY本編の出口。名乗り（扉）と対になる着地点
          aap_labo_rnews_end と同型・色を JURIパープルに
          段落間は親(Salientのp padding-bottom)に任せる = margin持たない
   ========================================================= */

.aap_study_end {
    padding: 1.8em 2em;
    border: 1px solid var(--aap-rule);
    border-left: 4px solid var(--aap-juri);      /* パープルの背骨 */
    border-radius: 14px;
    background: rgba( 140, 82, 255, 0.04 );        /* ごく薄いパープル */
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

.aap_study_end .aap_study_end_head {
    font-family: var(--aap-font-title);
    font-weight: 900;
    font-size: 1.1em;
    color: var(--aap-juri);                        /* 見出しもパープル */
    letter-spacing: 0.02em;
}

.aap_study_end p {
    line-break: strict;
    word-break: normal;
    overflow-wrap: break-word;
}

.aap_study_end .aap_study_end_sign {
    padding-top: 1em;
    border-top: 1px solid var(--aap-rule);
    font-size: var(--aap-fs-small);
    color: var(--aap-gray);
}