/*
Phase 1.8: 賢威8 -> STORK19 互換CSS(評価用、未デプロイ)。

目的: 既存727記事のHTML/classを一切書き換えず、STORK19側にこのCSSを
追加するだけで賢威8固有の装飾表示を維持できるかを検証すること。
本ファイルはローカルのSTORK19検証環境(このMac上のみ)でのみ使用し、
本番WordPressには一切適用していない。

出典と確度:
- line-yellow / line-orange / line-blue / btn_orange / btn_bluegreen /
  icon_arrow_s_right / box_style / box_style_title / box_style_blue /
  box_style_pink / box_style_red は、recommend-travel.com本番の実際の
  ライブページ(post_id=24)に埋め込まれていたインラインCSSから値を
  そのまま抽出した(confidence=observed)。
- box\d+ (box1〜box30程度、584記事で使用の`box8`含む)は、上記の
  ライブページのインラインCSS(WP Super Cache等によるクリティカルCSS
  抽出と推測)には該当ルールが含まれておらず、実際の値を確認できな
  かった(confidence=unknown)。以下の box* 定義は「枠線付きボックス」
  という賢威系テーマでの一般的なパターンに基づく近似値であり、
  本番の実際の見た目と完全には一致しない可能性がある。実機
  (ブラウザの開発者ツール等)での確認が別途必要。
- yellow_line_narrow / marker-P-orange / dir-arw_r も同様に実値を
  確認できず、近似値としている。

原則:
- 本文HTML・classは書き換えない(このCSSは追加するだけ)
- 隠しテキスト・display:noneでの本文非表示は行わない
- レスポンシブ対応(max-widthでのフォントサイズ調整のみ、レイアウト
  崩壊防止)
- STORK19本体ファイルは直接改変しない(子テーマ側に配置する前提)
*/

/* ---- 番号付きボックス(box1〜box30程度、584記事で使用の box8 を含む) ----
   実際の色番号ごとの正確な値は未確認(confidence=unknown)。ここでは
   視認性を保つための共通の枠線ボックス表示のみを提供する近似値。 */
[class^="box"][class*="box"] {
  margin: 0 0 1.5em;
  padding: 1em 1.2em;
  border: 2px solid #cccccc;
  border-radius: 4px;
  background: #fafafa;
}

/* ---- 色つき下線マーカー(実測値) ---- */
.line-yellow {
  background: linear-gradient(transparent 50%, #fff499 50%);
}
.line-orange {
  background: linear-gradient(transparent 50%, #f7d999 50%);
}
.line-blue {
  background: linear-gradient(transparent 50%, #9ddff1 50%);
}
/* line-red / line-green は本番ページから実値を確認できなかったため、
   同系統(line-orange/line-blue)に準じた近似値。 */
.line-red {
  background: linear-gradient(transparent 50%, #f7c9c9 50%);
}
.line-green {
  background: linear-gradient(transparent 50%, #c9f0c9 50%);
}
.yellow_line_narrow {
  background: linear-gradient(transparent 60%, #fff499 60%);
}

/* ---- ボタン(実測値) ---- */
.btn_orange {
  background: #e69400;
  color: #fff;
  display: inline-block;
  padding: 0.6em 1.4em;
  border-radius: 4px;
  text-decoration: none;
}
.btn_bluegreen {
  background: #07cbd2;
  color: #fff;
  display: inline-block;
  padding: 0.6em 1.4em;
  border-radius: 4px;
  text-decoration: none;
}
/* .btn (色指定なしの基底ボタンclass、実値未確認、Phase 1.8のステージング
   QAで92記事の使用を確認 -- btn_orange/btn_bluegreenと同じ形状の近似値)。 */
.btn {
  display: inline-block;
  padding: 0.6em 1.4em;
  border-radius: 4px;
  background: #666666;
  color: #fff;
  text-decoration: none;
}

/* ---- box_style系(色つきグラデーション枠、実測値) ---- */
.box_style {
  margin: 0 0 30px;
  font-size: 1.8rem;
}
.box_style_title {
  margin: -8px 0 5px -27px;
  color: #fff;
  line-height: 1.4;
}
.box_style_blue {
  background-image: linear-gradient(-45deg, #fff 25%, #0baedd 25%, #0baedd 50%, #fff 50%, #fff 75%, #0baedd 75%, #0baedd);
}
.box_style_pink {
  background-image: linear-gradient(-45deg, #fff 25%, #f48cc0 25%, #f48cc0 50%, #fff 50%, #fff 75%, #f48cc0 75%, #f48cc0);
}
.box_style_red {
  background-image: linear-gradient(-45deg, #fff 25%, #d94b59 25%, #d94b59 50%, #fff 50%, #fff 75%, #d94b59 75%, #d94b59);
}
/* box_style_orange / box_style_green: 実値未確認、blue/pink/redと同系統の近似値
   (Phase 1.8のステージングQAで実データから使用を確認、2記事・1記事)。 */
.box_style_orange {
  background-image: linear-gradient(-45deg, #fff 25%, #e69400 25%, #e69400 50%, #fff 50%, #fff 75%, #e69400 75%, #e69400);
}
.box_style_green {
  background-image: linear-gradient(-45deg, #fff 25%, #4caf50 25%, #4caf50 50%, #fff 50%, #fff 75%, #4caf50 75%, #4caf50);
}
/* box_style_title_inner: 実値未確認(Phase 1.8のステージングQAで39記事の
   使用を確認)。box_style_titleに準じた近似値。 */
.box_style_title_inner {
  color: #fff;
}

/* ---- アイコン矢印(実測値) ---- */
.icon_arrow_s_right {
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -6px;
  font-size: 12px;
  line-height: 1.0;
}

/* ---- marker-*/dir-arw_r(実値未確認、近似値) ---- */
[class^="marker-"] {
  background: linear-gradient(transparent 60%, #ffe0b3 60%);
}
.dir-arw_r {
  display: inline-block;
}

/* ---- レスポンシブ(スマホでの過大な余白防止) ---- */
@media (max-width: 600px) {
  [class^="box"][class*="box"] {
    padding: 0.8em 1em;
  }
}