@charset "UTF-8";

/* =========================================================
   aap_labo_mark.css

   場所 : salient-child/css/aap_labo_mark.css
   役割 : 装飾。RINA の CHECK パターン

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

   本文に「強弱」を作る箱
   NOTE は太字だけで強弱を出していた
   AL は種類を持つ。何を強調するかで見た目が変わる

   本文に span で当てる。行の途中に差す
   <span class="aap_mk_pen">本当</span>

   記号は本文に書かない。CSS が装飾を持つ
   増やすときは、ここに1つ足す
   ---------------------------------------------------------
   R1 用の 5 個。今後増やす
   ========================================================= */


/* =========================================================
   01. aap_mk_pen  蛍光ペン

   一番よく使う。キーワードを光らせる
   下 40% だけ塗る = 本物の蛍光ペンの当たり方
   文字は黒のまま。ペンは文字の下をくぐる

   <span class="aap_mk_pen">石鹸の味</span>
   ========================================================= */

.aap_mk_pen {
    background: linear-gradient(
        transparent 60%,
        rgba( 244, 117, 33, 0.35 ) 60%
    );
    font-weight: 700;
    padding: 0 0.1em;
}

/* 青（EINA 側・別トーンで使いたいとき） */
.aap_mk_pen_blue {
    background: linear-gradient(
        transparent 60%,
        rgba( 59, 138, 240, 0.30 ) 60%
    );
    font-weight: 700;
    padding: 0 0.1em;
}


/* =========================================================
   02. aap_mk_wave  波打つ下線

   ゆらぎ。断定じゃなく「ここ、ちょっと大事」の温度
   会話体に合う。RINA の口調と相性がいい

   <span class="aap_mk_wave">たぶん嘘</span>
   ========================================================= */

.aap_mk_wave {
    text-decoration: underline wavy var(--aap-orange);
    text-underline-offset: 0.25em;
    text-decoration-thickness: 2px;
}


/* =========================================================
   03. aap_mk_check  チェック印

   「調べた」「確認した」の証
   記者出身の骨。事実に ✓ を付ける
   ::before で緑のチェックを前に出す

   <span class="aap_mk_check">論文にそう書いてある</span>
   ========================================================= */

.aap_mk_check {
    font-weight: 700;
}

.aap_mk_check::before {
    content: "✓";
    display: inline-block;
    margin-right: 0.3em;
    color: #2E9E5B;
    font-weight: 900;
}


/* =========================================================
   04. aap_mk_num  数字を立てる

   R1 は数字の記事。8.7% / 15% / 4ポイント
   数字だけ色と太さを変えて、文の中で目を引く

   <span class="aap_mk_num">8.7%</span>
   ========================================================= */

.aap_mk_num {
    font-family: 'Anton AAP', var(--aap-font-en-gothic);
    font-weight: 400;   /* Anton は 400 で極太。900 指定だと合成で汚れる */
    font-size: 1.2em;   /* Anton は字面が小さめなので少し上げる */
    color: var(--aap-orange);
    letter-spacing: 0.02em;
}


/* =========================================================
   05. aap_mk_box  囲み

   一言を四角で囲って独立させる
   結論・キーフレーズ。「治らない、は嘘」みたいな一撃

   <span class="aap_mk_box">感じやすい ≠ 嫌い</span>
   text-indent: 0 は必須
   aap_labo_talk p は text-indent 負のぶら下げを持つ
   inline-block はそれを自分で受け継いで潰れる
   スマホは text-indent:0 なので出ない = デスクトップだけ壊れる 
   ========================================================= */

.aap_mk_box {
    display: inline-block;
    border: 1.5px solid var(--aap-black);
    border-radius: 4px;
    padding: 0.1em 0.5em;
    margin: 0 0.3em;
    font-weight: 700;
    line-height: 1.4;
    text-indent: 0;        /* ← 親の負インデントを打ち消す */
    vertical-align: middle;
    white-space: nowrap;   /* ← 中で折らせない */
}

/* =========================================================
   06. aap_mk_hand  手書き

   RINA のツッコミ・本音・心の声
   脚本のト書き、砕けた一言に差す
   手書きフォントで「声のトーンが変わる」瞬間を作る

   <span class="aap_mk_hand">あれ、記憶ちがうかも</span>
   ========================================================= */

.aap_mk_hand {
    font-family: 'Zen Kurenaido AAP', var(--aap-font-jp-gothic);
    font-weight: 400;
}


/* =========================================================
   07. aap_mk_pen_grad  目次のハイライト

   壁（aap_labo_limit）の目次専用

   ---------------------------------------------------------
   経緯（読む人のための記録）

   当初：背景に薄オレンジのグラデを敷いた
     → 明朝の細字が沈み、色面が安っぽく見えた（却下）
   次 ：Salient の Gradient Text 方式（文字自体をグラデ）
     → 40pt 以下では上下グラデが1文字に収まらず、
        変化が見えない。単色と変わらなかった（却下）
   現在：単色のオレンジ文字 + 太字

   目次の ― マーカーも P もオレンジ
   ここもオレンジで、壁全体を「黒 + オレンジ1系統」で締める

   スマホで折り返しても色は続くので、下線・囲みと違って壊れない
   （囲み系は改行に弱い → 09 で別途 <em> 強制改行で対処）

   クラス名に _grad が残るのは経緯の名残
   中身は単色。名前は変えず、この注釈で意図を残す

   <span class="aap_mk_pen_grad">本当は何が起きているのか</span>
   ========================================================= */

.aap_mk_pen_grad {
    color: var(--aap-orange);
    font-weight: 700;
}

/* =========================================================
   08. aap_mk  手描きマーキング（Salient scribble 借用）

   Salient の Scribble Animation の「仕組み」を借りる
   UI は置かず、Salient が吐く <em> をそのまま召喚する
   線（SVG パス）は当面 Salient 製。いずれ RINA が iPad で
   描いた線を SVG 化して差し替える
   （パスで持つ意味 = 始点があるので「なぞる」アニメが作れる）

   ---------------------------------------------------------
   仕組み（DOM 解析でわかったこと）

   <p>
     地の文、                          ← p 直下のテキスト
     <em class="animated aap_mk">      ← 囲む対象だけをここに送る
       囲む語
       <svg class="nectar-scribble circle">…</svg>
     </em>
   </p>

   ポイント
   ・囲む対象を <em> に「強制送還」することで改行させる
     → 囲む語が独立した1行になる
     → スマホでも折り返しに巻き込まれない（囲み系の弱点を回避）
   ・svg は <em> の中で absolute。文字を一回り大きく囲む
   ・行間 1.8 以上が必要。丸が上下にはみ出るため

   ---------------------------------------------------------
   Salient 現行パス（記録・差し替え予定）

   circle 丸囲み
     viewBox      : 0 0 800 350
     stroke       : #ffce59（→ AAP は var(--aap-mk-color) で上書き）
     stroke-width : 20
     pathLength   : 1
     配置 CSS     : width 130% / height 140% / top -20% / left -15%

   wave 重ね波線 squiggle-underline-2
     viewBox      : -320 -70.8161 640.4 59.82
     stroke-width : 11.111
     pathLength   : 1

   under / sketch / stack はパス未取得（必要時に取る）

   ---------------------------------------------------------
   色はグローバル変数で話者ごとに振る
     RINA   = オレンジ（既定）
     EINA   = 青
     JURI   = 仮
     HARUKA = 仮
   ========================================================= */

:root {
    --aap-mk-color: var(--aap-orange);   /* 既定は RINA のオレンジ */
}

/* 囲む対象。<em> を相対配置にして、svg の基準にする
   em の斜体は消す（Salient の em は italic を持つため） */
.aap_mk {
    position: relative;
    display: inline;
    font-style: normal;
}

/* svg（scribble の線）を対象に重ねる
   Salient の circle は 130%/140%・-20%/-15% で一回り大きく囲む
   下線系（wave 等）は別の配置になるので、必要時に上書きする */
.aap_mk .nectar-scribble {
    position: absolute;
    overflow: visible;
    pointer-events: none;
    z-index: -1;                 /* 文字の背後に線を置く */
}

.aap_mk .nectar-scribble.circle {
    width: 130%;
    height: 140%;
    top: -20%;
    left: -15%;
}

/* 線の色だけ AAP に上書き。パス・stroke-width は Salient のまま */
.aap_mk .nectar-scribble path {
    stroke: var(--aap-mk-color) !important;
}

/* 話者ごとの色替え（em に付ける） */
.aap_mk.is-eina   { --aap-mk-color: var(--aap-blue); }
.aap_mk.is-juri { --aap-mk-color: var(--aap-juri); }

.aap_mk.is-haruka { --aap-mk-color: #6c5ce7; }   /* 仮 */

/* ラベンダー（MEGUMI 用）
   恵が突っ込むときのハイライト。IP を色で立てる
   aap_mk_pen のオレンジをラベンダーに差し替えただけ
   色は core の --aap-lavender と同値（181,126,220） */
.aap_mk_pen_lav {
    background: linear-gradient(
        transparent 60%,
        rgba( 181, 126, 220, 0.35 ) 60%
    );
    font-weight: 700;
    padding: 0 0.1em;
}

/* =========================================================
   aap_labo_moshimo  もしもの世界へ（MOSHIMO シリーズの扉）

   フィクション宣言のブロック
   aap_labo_end を下敷きに、左線 → 四辺を橙の角丸枠で囲む
   「ここから先は、もしもの世界」を枠で視覚的に切り分ける
   MOSHIMO 回で毎回使う。中身（宣言 + 但し書き）を入れる箱
   ========================================================= */

.aap_labo_moshimo {
    margin: 3em 0;
    padding: 1.8em 2em;
    border: 2px solid var(--aap-orange);
    border-radius: 14px;
    background: rgba( 244, 117, 33, 0.04 );   /* ごく薄い橙。end の無彩色より温かく */
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

/* 小見出し（任意・「もしもの世界へ」等を置くなら） */
.aap_labo_moshimo .aap_labo_moshimo_head {
    font-family: var(--aap-font-title);
    font-weight: 900;
    font-size: 1.1em;
    color: var(--aap-orange);
    margin: 0 0 1em;
}

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

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

/* 末尾の但し書き（※）は一段落として小さく */
.aap_labo_moshimo .aap_labo_note {
    margin: 1.4em 0 0;
    padding-top: 1em;
    border-top: 1px solid rgba( 244, 117, 33, 0.25 );
}

/* =========================================================
   aap_labo_knowledge  ちょこっと豆知識（おまけの豆知識）

   場所 : aap_labo_mark.cssll
   役割 : LOG本体（＝AIの研究・会話）に対する「おまけ」の事実ブロック

   ★思想：ナレッジはあくまで おまけ程度。
     厚く・主役にすると R_NOTE になってしまう。
     会話（aap_labo_talk）がメイン、ここは一段引いた小箱。
     しつこくしない。Salient UI は使わない（セリフ式＋α の α）
   ========================================================= */

.aap_labo_knowledge {
    margin: 1.4em 0 2em;
    padding: 1.1em 1.4em;
    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);
}

/* 見出し「🐙 ちょこっと豆知識」 */
.aap_labo_knowledge .aap_labo_knowledge_head {
    font-family: var(--aap-font-jp-gothic);
    font-weight: 700;
    font-size: 0.92em;
    color: var(--aap-gray);                    /* 橙にしない＝主張を抑える */
    margin: 0 0 0.7em;
    letter-spacing: 0.04em;
}

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

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

/* 問い（→ の前）だけ少し立てる。b タグに乗せる */
.aap_labo_knowledge b {
    font-weight: 700;
    color: var(--aap-black);
}

/* =========================================================
   aap_labo_lookbook  AAP流 LOOKBOOK へ（本編の扉・RINAメッセージ）

   場所 : aap_labo_mark.css
   役割 : LOOKBOOK本編の入り口。RINAが「これから何をするか」を
          宣言する挿入ブロック（MOSHIMO の扉の LOOKBOOK 版）

   aap_labo_moshimo を下敷きに、フィクション宣言の「注意喚起」の
   温度を、本編への「いざない」の温度に落とす。
   枠は橙のままだが背景を無彩に近づけ、ファッション誌の扉らしく
   静かに。色統一（黒＋オレンジ）は守る。
   ========================================================= */

.aap_labo_lookbook {
    margin: 3em 0;
    padding: 1.8em 2em;
    border: 1px solid var(--aap-rule);        /* moshimo の2px橙 → 細い無彩線で静かに */
    border-left: 4px solid var(--aap-orange); /* 左だけ橙の太線＝AAPの背骨 */
    border-radius: 14px;
    background: rgba( 138, 138, 138, 0.04 );  /* ごく薄いグレー。誌面の扉の落ち着き */
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

/* 小見出し「▼ ここから、AAP流のLOOKBOOK」 */
.aap_labo_lookbook .aap_labo_lookbook_head {
    font-family: var(--aap-font-title);
    font-weight: 900;
    font-size: 1.1em;
    color: var(--aap-orange);
    margin: 0 0 1em;
    letter-spacing: 0.02em;
}

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

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

/* 末尾の但し書き（※）は一段落として小さく。moshimo と同じ作法 */
.aap_labo_lookbook .aap_labo_note {
    margin: 1.4em 0 0;
    padding-top: 1em;
    border-top: 1px solid var(--aap-rule);
    font-size: var(--aap-fs-small);
    color: var(--aap-gray);
}

/* =========================================================
   aap_labo_rnews_end  R-NEWS の締め（番組のサインオフ）

   場所 : aap_labo_mark.css
   役割 : R-NEWS本編の出口。リード（入口）と対になる着地点
   ========================================================= */

.aap_labo_rnews_end {
    margin: 3em 0;
    padding: 1.8em 2em;
    border: 1px solid var(--aap-rule);
    border-left: 4px solid var(--aap-orange);   /* ← ここの色を変える */
    border-radius: 14px;
    background: rgba( 138, 138, 138, 0.04 );     /* ← ここの色味を変える */
    font-size: var(--aap-fs-body);
    line-height: var(--aap-lh-jp);
    color: var(--aap-black);
}

.aap_labo_rnews_end .aap_labo_rnews_end_head {
    font-family: var(--aap-font-title);
    font-weight: 900;
    font-size: 1.1em;
    color: var(--aap-orange);
    margin: 0 0 1em;
    letter-spacing: 0.02em;
}

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

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

.aap_labo_rnews_end .aap_labo_rnews_end_sign {
    margin: 1.4em 0 0;
    padding-top: 1em;
    border-top: 1px solid var(--aap-rule);
    font-size: var(--aap-fs-small);
    color: var(--aap-gray);
}


/* =========================================================
   09. aap_mk_finale  幕引きの一言（R-NOTE 最終行専用）

   場所 : aap_labo_mark.css
   役割 : 物語の締め。地の文の最後に置く「たったひとつの気づき」を、
          静かに、でも決定的に立てる

   ---------------------------------------------------------
   思想

   aap_mk_pen（蛍光ペン）は本文の途中でキーワードを光らせる箱。
   これは違う。締めの一言＝記事全体の着地点にだけ差す。
   だから「塗る」のではなく「置く」。
   文字を少し大きく・太く、下に一本だけ橙のラインを引く。
   帯でベタ塗りしない（余韻を殺さない）。

   ★ 段落（<p>）ではなく必ず <span> で文字だけに当てる。
     <p> に当てると下線が段幅いっぱいに伸び、
     区切り線と重なって壊れる（R14 で確認済み）。

   <p class="aap_labo_narration">
     <span class="aap_mk_finale">「夢は、自分で作るもの」</span>。
   </p>
   ========================================================= */

.aap_mk_finale {
    display: inline-block;      /* 下線を文字幅で止める。p 幅に伸ばさない */
    font-family: var(--aap-font-title);
    font-weight: 900;
    font-size: 1.15em;
    letter-spacing: 0.04em;
    color: var(--aap-black);
    padding-bottom: 0.35em;
    border-bottom: 2px solid var(--aap-orange);
    text-indent: 0;            /* aap_labo_talk 系の負インデントを打ち消す（box に倣う） */
    line-height: 1.6;
}