/* ============================================================
   ログイン前（origin.htm）の「分野別情報」＋「重要情報」

   origin.htm の中央エリアは、もともと日商の外部ページ
   https://archive.jcci.or.jp/gensanchi/epa/jcciinfo.php を
   iframe（745×550）で丸ごと表示していた。
   この外部ページは「分野別情報 230px ＋ 重要情報 490px」の2列構成。

   本ファイルでは
     ・左 … iframe を 240px で切り取り、分野別情報だけを見せる
     ・右 … 外部ページの重要情報の代わりに、日商サイト（tokuteishomei.jp）の
            お知らせを自前で描画する（Api/NewsDataPublic ＋ news-render.js）
   という構成にしている。

   マークアップは news-render.js が生成するものでログイン後 Home と共通。
   ただし news.css は読み込まない（.oshirase-frame の 800px 固定が効いてしまうため）。
   見た目は外部ページの重要情報（紺枠・紺ヘッダー #000066）に合わせている。

   設計書: Documents/40_Copilot/Claude/20260912_日商サイトお知らせ連携/設計書_日商サイトお知らせ連携.md §13
   ============================================================ */

/* ---- 左：分野別情報（外部 iframe の切り取り枠）----
   iframe 自体は 745px のまま描画させ、この枠で右側（外部ページの重要情報）を隠す。
   外部ページのレイアウトを触らずに左カラムだけを見せるため。
   ※ 日商が分野別情報の項目を増やして 640px に収まらなくなった場合は、
      ここと origin.htm の iframe の height を合わせて調整すること。 */
.origin-info-frame {
  width: 248px;     /* 外部ページの body 左マージン8px + 中央寄せ4px + 枠230px + 罫線2px */
  height: 600px;
  overflow: hidden;
}

.origin-info-frame iframe {
  display: block;
  border: 0;
}

/* ---- 右：重要情報（日商サイトのお知らせ）---- */

/* 取得できなかったときは news-render.js が枠ごと hidden にする */
#origin-news[hidden] { display: none !important; }

#origin-news {
  /* 外部ページは <body topMargin="15"> ＋ cellpadding=1 のぶん、枠の上端が 16px 下にある。
     左右の枠の上端をそろえるため、こちらも 16px 下げる。 */
  margin-top: 16px;
  width: 490px;
  /* 外部ページ側「分野別情報」の枠と同じ高さ。16px + 540px で上端・下端がそろう。
     中身は flex で縦に積み、スクロール枠だけが伸縮する。
     こうしておくと注意書きが何行になっても全体の高さが変わらない。 */
  height: 540px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid #000066;   /* 外部ページの重要情報と同じ紺の枠線 */
  background: #fff;
  text-align: left;
  font-family: "MS UI Gothic", Tahoma, sans-serif;
  color: #1f2d3d;
}

/* 見出し（外部ページの紺ヘッダーと同じ高さ・色） */
#origin-news .news-origin__head {
  flex: 0 0 auto;
  margin: 0;
  height: 32px;
  line-height: 32px;
  background: #000066;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  letter-spacing: .04em;
}

/* ---- 注意書き（ログイン後 Home の .oshirase-frame__caution と同じ文言・見た目）---- */
#origin-news .news-origin__caution {
  flex: 0 0 auto;
  margin: 8px 8px 0;
  color: #ff0000;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
}

/* ---- 協定の絞り込み ---- */
#origin-news .news-filter__select {
  flex: 0 0 auto;
  width: calc(100% - 16px);
  margin: 8px;
  box-sizing: border-box;
  height: 26px;
  padding: 0 6px;
  border: 1px solid #b8c7d8;
  border-radius: 4px;
  background: #fff;
  color: #1f2d3d;
  font-family: inherit;
  font-size: 12px;
}

/* ---- スクロール領域（全件をここに収める）---- */
/* 残りの高さいっぱいに広げる（枠全体の高さは #origin-news の height で決まる）。
   日商が分野別情報の項目を増やして枠が伸びたら、#origin-news の height と
   .origin-info-frame の height を調整すること。 */
#origin-news .news-scroll {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 8px 8px;
  padding-right: 4px;
  overflow-y: auto;
  border-top: 1px solid #d7e1eb;
}

/* ---- リスト本体（日付 ｜ 本文 の横並び）---- */
#origin-news .news-list,
#origin-news .news-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#origin-news .news-list li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px 2px;
  border-bottom: 1px solid #e6ecf2;
}

#origin-news .news-list li[hidden] { display: none; }

#origin-news .news-list time {
  color: #5f7184;
  font-size: 12px;
  letter-spacing: .01em;
}

#origin-news .news-item__body {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#origin-news .news-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 15px;
  padding: 0 6px;
  border-radius: 999px;
  background: #0f6a8b;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  flex-shrink: 0;
}

#origin-news .news-item__flags {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

#origin-news .news-item__flags img {
  height: 15px;
  width: auto;
  display: block;
}

/* 国旗：白地の旗が背景に溶けないよう薄い枠を付ける */
#origin-news .news-flag {
  border: 1px solid rgba(95, 113, 132, .2);
  border-radius: 2px;
}

/* 国旗ではないアイコン（共通・RCEP）：枠なし */
#origin-news .news-icon {
  border: 0;
}

/* タイトル。リンクがある場合は a、無い場合は span（news-render.js が出し分ける） */
#origin-news .news-item__body a,
#origin-news .news-item__body .news-item__title {
  font-size: 12.5px;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: break-word;
}

#origin-news .news-item__body a { color: #000080; }

/* リンクの無いお知らせ（セミナー告知など）は本文色で出す */
#origin-news .news-item__body span.news-item__title { color: #1f2d3d; }

#origin-news .news-item__body a:hover,
#origin-news .news-item__body a:focus {
  color: #ff0000;
  text-decoration: underline;
}