/* 読み物のページ(2026-11-04)。**3 ページが同じ指定を別々に抱えていたのを
   ここ 1 本へ出した。** 直すたびに 3 か所がずれる作りだった。

   世界は style.css のローズ系に合わせる(DESIGN.md の The Three-Palette Truth)。
   `--hn-*` のパープルも `ui-*` の無彩色も混ぜない。
   文字に使うローズは必ず Dawn Deep(#c9658f)。面と枠が Dawn Rose(#de7fa6)。
   罫線は無彩色にしない(The Warm Line Rule)。

   **差し替えたら `?v=` を必ず上げる。** 3 つのテンプレートが同じ版を読む。 */

:root {
  --g-rose: #de7fa6;
  --g-deep: #c9658f;
  --g-soft: #fbe3ee;
  --g-ink: #4b3b44;
  --g-muted: #8a7480;
  --g-surface: #ffffff;
  --g-tint: #fff7fb;
  --g-line: #f3d9e6;
  --g-measure: 680px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: linear-gradient(180deg, #fff8fc 0%, #fff3f9 100%);
  background-attachment: fixed;
  color: var(--g-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic",
               "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  font-feature-settings: "palt" 1;   /* 日本語の詰め。字間の穴を埋める */
  caret-color: var(--g-deep);
}

/* 描いていない面にも世界を通す。ここを既定のままにすると、
   どれだけ本文を整えても「組んだだけ」に見える。 */
::selection { background: var(--g-soft); color: var(--g-deep); }
html { scrollbar-color: var(--g-line) transparent; scrollbar-width: thin; }
body::-webkit-scrollbar { width: 11px; }
body::-webkit-scrollbar-thumb {
  background: var(--g-line); border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}

a { color: var(--g-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--g-rose); outline-offset: 3px; border-radius: 6px; }

/* ── 上の帯 ───────────────────────────────── */
/* ヘッダー。実物の記事サイトは「ロゴの帯」と「並び」の2段。
   どのページからでも、ここが何の媒体で、どこへ行けるかが分かる。 */
.gd-top { position: sticky; top: 0; z-index: 30;
          border-bottom: 1px solid var(--g-line); }
.gd-top-brand { background: linear-gradient(180deg, #fdeef5 0%, #fbe3ee 100%); }
.gd-top-brand a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  max-width: var(--g-measure); margin: 0 auto; padding: 10px 20px;
  text-decoration: none; color: var(--g-deep);
}
.gd-top-brand img { width: 26px; height: 26px; border-radius: 7px; display: block; }
.gd-top-name { font-size: 15px; font-weight: 800; letter-spacing: 0.05em; }
.gd-top-name b { font-weight: 800; }
.gd-top-name .sep { opacity: .4; margin: 0 5px; font-weight: 700; }

.gd-top-nav {
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(160%) blur(10px);
  border-top: 1px solid rgba(255,255,255,.7);
}
.gd-top-nav > div {
  display: flex; align-items: center; gap: 4px;
  max-width: var(--g-measure); margin: 0 auto; padding: 0 14px;
  overflow-x: auto; scrollbar-width: none;
}
.gd-top-nav > div::-webkit-scrollbar { display: none; }
.gd-top-nav a {
  display: block; padding: 11px 12px; white-space: nowrap;
  text-decoration: none; color: var(--g-muted);
  font-size: 13.5px; font-weight: 800; letter-spacing: 0.02em;
  border-bottom: 2.5px solid transparent;
}
.gd-top-nav a:hover { color: var(--g-deep); }
.gd-top-nav a[aria-current] { color: var(--g-deep); border-bottom-color: var(--g-deep); }

.gd-wrap { max-width: var(--g-measure); margin: 0 auto; padding: 34px 20px 80px; }

/* ── 見出しと本文 ─────────────────────────── */
/* パンくず。実物の記事サイトは「ホーム 〉 カテゴリ」と経路を全部出す。
   記号ではなく線で描いたアイコンを使う(絵文字で代用しない)。 */
.gd-crumb {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 700; margin: 0 0 14px;
  color: var(--g-muted); letter-spacing: 0.02em;
}
.gd-crumb a {
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none; color: var(--g-muted);
}
.gd-crumb a:hover { color: var(--g-deep); text-decoration: underline; }
.gd-crumb svg { width: 13px; height: 13px; display: block; flex: none; }
.gd-crumb .gd-crumb-sep { width: 11px; height: 11px; opacity: .55; }

h1 {
  font-size: 30px; font-weight: 800; line-height: 1.42;
  letter-spacing: -0.024em; margin: 0 0 13px;
}
.gd-stand { font-size: 17.5px; line-height: 1.85; margin: 0 0 20px; }
.gd-stand b { color: var(--g-deep); }

.gd-byline {
  font-size: 12.5px; line-height: 1.8; color: var(--g-muted);
  padding-bottom: 24px; border-bottom: 1px solid var(--g-line); margin-bottom: 8px;
}
.gd-byline b { color: var(--g-ink); font-weight: 800; }

/* 見出しの上は広く、下は狭く。節の切れ目を余白で作る。 */
h2 {
  font-size: 22px; font-weight: 800; line-height: 1.45;
  letter-spacing: -0.018em; margin: 56px 0 14px;
}
h3 {
  font-size: 17px; font-weight: 800; line-height: 1.6;
  margin: 34px 0 8px; color: var(--g-deep); letter-spacing: -0.01em;
}
p { margin: 0 0 15px; }
b, strong { font-weight: 800; }

ul.gd-list, ol.gd-list, ul.gd-pick { margin: 0 0 15px; padding-left: 1.2em; }
ul.gd-list li, ol.gd-list li, ul.gd-pick li { margin-bottom: 11px; }
ul.gd-list li:last-child, ol.gd-list li:last-child, ul.gd-pick li:last-child { margin-bottom: 0; }
li::marker { color: var(--g-deep); font-weight: 800; }

/* ── 囲み ─────────────────────────────────── */
.gd-call {
  background: var(--g-surface); border: 1px solid var(--g-line);
  border-radius: 18px; padding: 22px; margin: 24px 0 12px;
  box-shadow: 0 10px 26px rgba(201, 101, 143, 0.08);
}
.gd-call > :last-child { margin-bottom: 0; }
.gd-call-h { font-size: 15px; font-weight: 800; color: var(--g-deep); margin: 0 0 10px; }
.gd-call-h + .gd-steps { margin-top: 0; }
.gd-steps { margin: 0; padding-left: 1.25em; }
.gd-steps li { margin-bottom: 8px; }
.gd-steps li:last-child { margin-bottom: 0; }

.gd-formula {
  background: var(--g-tint); border: 1px solid var(--g-line); border-radius: 14px;
  padding: 17px 16px; margin: 20px 0; font-size: 15.5px; font-weight: 800;
  line-height: 2; text-align: center; letter-spacing: 0.01em;
}
.gd-formula span { color: var(--g-deep); }

/* ── 表 ───────────────────────────────────── */
.gd-scroll { overflow-x: auto; margin: 20px 0 8px; padding: 0 0 3px;
             -webkit-overflow-scrolling: touch; }
.gd-scroll::-webkit-scrollbar { height: 7px; }
.gd-scroll::-webkit-scrollbar-thumb { background: var(--g-line); border-radius: 999px; }

table {
  border-collapse: separate; border-spacing: 0; width: 100%;
  font-size: 14px; line-height: 1.7; background: var(--g-surface);
  border: 1px solid var(--g-line); border-radius: 18px;
  box-shadow: 0 10px 26px rgba(201, 101, 143, 0.06);
}
th, td { padding: 13px; text-align: left; vertical-align: top;
         border-bottom: 1px solid var(--g-line); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
thead th { background: var(--g-tint); font-weight: 800; white-space: nowrap;
           font-size: 12.5px; letter-spacing: 0.04em; color: var(--g-muted); }
tbody th { font-weight: 800; font-size: 13px; color: var(--g-ink);
           white-space: nowrap; background: #fffafc; }
/* 行の見出しを左に残す。横に送っても「どの行の数字か」が消えない。 */
thead th:first-child, tbody th {
  position: sticky; left: 0; z-index: 1;
  width: var(--colw, 112px); min-width: var(--colw, 112px);
  border-right: 1px solid var(--g-line);
}
thead th:first-child { border-top-left-radius: 18px; }
thead th:last-child  { border-top-right-radius: 18px; }
tbody tr:last-child th { border-bottom-left-radius: 18px; }
tbody tr:last-child td:last-child { border-bottom-right-radius: 18px; }
td b { color: var(--g-deep); }

/* 数字は等幅で。桁がそろわないと、表の意味が目で読めない。 */
.gd-num, td.gd-num, .gd-rate-v {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

/* 率の欄。数字の下に、その数字ぶんの長さの帯を敷く。
   帯は数字の代わりではなく、**同じ値をもう一度描いたもの**。
   --v は「表の中の最大値を 100 としたときの割合」。 */
.gd-rate { white-space: nowrap; }
.gd-rate-v { font-weight: 800; }
.gd-rate-v.is-top { color: var(--g-deep); }
.gd-rate-v.is-low { color: var(--g-muted); }
.gd-bar {
  display: block; height: 5px; margin-top: 7px; width: 100%;
  max-width: 132px; border-radius: 999px; background: var(--g-soft);
  overflow: hidden;
}
.gd-bar::after {
  content: ""; display: block; height: 100%;
  width: calc(var(--v, 0) * 1%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--g-rose) 0%, var(--g-deep) 100%);
}

.gd-cap { font-size: 12.5px; color: var(--g-muted); margin: 0 0 32px; line-height: 1.75; }

/* ── 終わり ───────────────────────────────── */
.gd-end { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--g-line); }
.gd-cta {
  display: block; width: 100%; max-width: 320px; margin: 22px 0 11px;
  padding: 15px 16px; border-radius: 16px; min-height: 44px;
  background: linear-gradient(135deg, #de7fa6 0%, #c9658f 100%);
  color: #fff; font-weight: 800; font-size: 16px; letter-spacing: 0.02em;
  text-align: center; text-decoration: none;
  box-shadow: 0 10px 24px rgba(201, 101, 143, 0.28);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.gd-cta:active { transform: scale(0.96); box-shadow: 0 4px 12px rgba(201,101,143,.22); }
.gd-fine { font-size: 12.5px; color: var(--g-muted); margin: 0; }

/* ── ホーム（記事の一覧）───────────────────────
   実物の記事サイトの構成を踏襲: 一押しを大きく、残りを2列の札で。 */
.gd-sec-h {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 800; margin: 34px 0 14px; color: var(--g-ink);
  padding-bottom: 10px; border-bottom: 2px solid var(--g-line);
}
.gd-sec-h::before {
  content: ""; width: 5px; height: 17px; border-radius: 999px; flex: none;
  background: linear-gradient(180deg, var(--g-rose), var(--g-deep));
}

/* 一押し */
.gd-feat {
  display: block; background: var(--g-surface); text-decoration: none; color: inherit;
  border-radius: 20px; overflow: hidden; position: relative;
  box-shadow: 0 12px 30px rgba(201,101,143,.16);
  transition: transform .2s cubic-bezier(.22,1,.36,1);
}
.gd-feat:active { transform: scale(.99); }
.gd-feat-img { aspect-ratio: 16 / 10; background-size: cover; background-position: center;
               background-image: var(--photo); }
/* サムネイルに文字が入っているので、**題名は重ねず下に置く**。
   重ねるとサムネの文字と競合して、どちらも読めない。 */
.gd-feat-body { padding: 14px 16px 16px; background: var(--g-surface);
                border-top: 1px solid var(--g-line); }
.gd-feat-cat {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--g-soft); color: var(--g-deep); font-size: 11px; font-weight: 800;
  letter-spacing: .05em; margin-bottom: 8px;
}
.gd-feat-title { font-size: 17px; font-weight: 800; line-height: 1.55; margin: 0;
                 letter-spacing: -.015em; color: var(--g-ink); }

/* 2列の札 */
.gd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gd-card { display: block; text-decoration: none; color: inherit; }
.gd-card-img {
  aspect-ratio: 16 / 10; border-radius: 14px; background-size: cover;
  background-position: center; background-image: var(--photo);
  border: 1px solid var(--g-line); margin-bottom: 9px;
  box-shadow: 0 6px 16px rgba(201,101,143,.1);
  transition: transform .18s cubic-bezier(.22,1,.36,1);
}
.gd-card:active .gd-card-img { transform: scale(.98); }
.gd-card-title { font-size: 14.5px; font-weight: 800; line-height: 1.55; margin: 0 0 6px;
                 letter-spacing: -.01em; }
.gd-card-date { display: flex; align-items: center; gap: 5px;
                font-size: 11.5px; color: var(--g-muted); font-weight: 700;
                font-variant-numeric: tabular-nums; margin: 0; }
.gd-card-date svg { width: 12px; height: 12px; display: block; flex: none; }

@media (max-width: 360px) { .gd-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .gd-cta, .gd-feat, .gd-card-img { transition: none; }
  .gd-cta:active, .gd-feat:active, .gd-card:active .gd-card-img { transform: none; }
}
@media (max-width: 430px) {
  body { font-size: 15.5px; }
  h1 { font-size: 24.5px; }
  h2 { font-size: 19.5px; margin-top: 44px; }
  .gd-stand { font-size: 16.5px; }
  .gd-wrap { padding: 26px 18px 64px; }
  .gd-call { padding: 18px; }
  .gd-bar { max-width: 96px; }
}


/* ──────────────────────────────────────────────────
   日本語の記事サイトの作法(2026-11-04、オーナー指示
   「既存の売れてるサイトを統合した形でパクっていい。AI感を消す」)。
   検索上位の夜職メディアを実際に見て、共通していた作りを取り込む。
   ────────────────────────────────────────────────── */

/* 記事の見出しまわり: バッジ + 日付 + タイトル画像 */
/* 題名の下の行。カテゴリ・公開日・読了時間。
   実物は日付と時間にアイコンが付く。 */
.gd-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
           margin: 0 0 16px; }
.gd-meta-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; color: var(--g-muted);
  font-variant-numeric: tabular-nums;
}
.gd-meta-item svg { width: 13.5px; height: 13.5px; display: block; flex: none; }
.gd-badge {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: var(--g-deep); color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.6;
}
.gd-badge.is-soft { background: var(--g-soft); color: var(--g-deep); }
.gd-date { font-size: 12.5px; color: var(--g-muted); font-weight: 700;
           font-variant-numeric: tabular-nums; }

/* タイトル画像。写真は持っていないので、文字で組んだ表紙にする。
   **無い写真を作らない**(PRODUCT.md の「存在しないものは捏造しない」)。 */
/* 写真が入ったときは写真を敷き、文字は上に置く。
   **文字は画像に焼き込まない** - 焼き込むと検索に読まれず、
   画面幅で崩れ、直すたびに作り直しになる。 */
.gd-hero {
  margin: 18px 0 26px; padding: 30px 22px; border-radius: 20px;
  background: linear-gradient(135deg, #fde7f0 0%, #fbdce9 48%, #f6cfdf 100%);
  border: 1px solid var(--g-line);
  box-shadow: 0 12px 30px rgba(201, 101, 143, 0.13);
  position: relative; overflow: hidden;
  min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end;
  margin-top: 4px;
}
.gd-hero::after {
  content: ""; position: absolute; right: -46px; top: -46px;
  width: 168px; height: 168px; border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, rgba(255,255,255,.82), rgba(255,255,255,0) 68%);
}
/* --photo が指定された行だけ、写真の版に切り替わる。 */
/* サムネイル(文字入り)はそのまま見せる。上に見出しを重ねない - 二重になる。 */
.gd-hero.is-thumb {
  background: var(--photo) center / cover no-repeat;
  aspect-ratio: 16 / 9; min-height: 0; padding: 0; border: 1px solid var(--g-line);
}
.gd-hero.is-thumb::after { display: none; }
.gd-hero.is-thumb > * { display: none; }

.gd-hero-kicker { font-size: 12.5px; font-weight: 800; color: var(--g-deep);
                  letter-spacing: 0.1em; margin: 0 0 9px; position: relative; }
.gd-hero-main { font-size: 25px; font-weight: 800; line-height: 1.42;
                letter-spacing: -0.02em; margin: 0; color: #7d3355; position: relative; }
.gd-hero-main em { font-style: normal; font-size: 34px; color: var(--g-deep);
                   font-variant-numeric: tabular-nums; }

/* 目次。日本語の記事にはほぼ必ずある。無いと浮く。 */
.gd-toc {
  background: var(--g-surface); border: 2px solid var(--g-line);
  border-radius: 18px; padding: 20px 22px; margin: 26px 0 34px;
}
.gd-toc-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 800; color: var(--g-deep);
  margin: 0 0 12px; padding-bottom: 11px; border-bottom: 1px dashed var(--g-line);
}
.gd-toc-h::before {
  content: ""; width: 16px; height: 16px; border-radius: 4px; flex: none;
  background: linear-gradient(135deg, var(--g-rose), var(--g-deep));
}
.gd-toc ol { margin: 0; padding-left: 1.45em; }
.gd-toc li { margin-bottom: 9px; line-height: 1.7; font-size: 14.5px; }
.gd-toc li:last-child { margin-bottom: 0; }
.gd-toc li::marker { color: var(--g-deep); font-weight: 800; font-size: 13px; }
.gd-toc a { color: var(--g-ink); text-decoration: none; font-weight: 700; }
.gd-toc a:hover { color: var(--g-deep); text-decoration: underline; }

/* 見出しのアンカー。固定ヘッダーの下に隠れないよう余白を取る。 */
h2[id] { scroll-margin-top: 96px; }

/* マーカー(蛍光ペン)。日本語の記事では、太字よりこちらが効く。
   下 42% だけを塗って、線を引いた見た目にする。 */
.mk {
  background: linear-gradient(transparent 58%, var(--g-soft) 58%);
  font-weight: 800; padding: 0 1px;
}
.mk-strong { background: linear-gradient(transparent 58%, #ffd9e6 58%); font-weight: 800; }

/* 関連記事 */
.gd-rel { margin-top: 44px; }
.gd-rel-h { font-size: 15px; font-weight: 800; color: var(--g-deep); margin: 0 0 12px; }
.gd-rel a {
  display: block; text-decoration: none; color: var(--g-ink);
  background: var(--g-surface); border: 1px solid var(--g-line);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
  font-size: 14.5px; font-weight: 700; line-height: 1.65;
  transition: transform .18s cubic-bezier(.22,1,.36,1);
}
.gd-rel a:active { transform: scale(.985); }
.gd-rel a::before { content: "▸ "; color: var(--g-deep); font-weight: 800; }

/* 運営者。肩書きは名乗らない - 実在しない監修者を作らない。 */
.gd-author {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--g-tint); border: 1px solid var(--g-line);
  border-radius: 16px; padding: 16px; margin-top: 34px;
}
.gd-author img { width: 42px; height: 42px; border-radius: 11px; flex: none; display: block; }
.gd-author-name { font-size: 14px; font-weight: 800; margin: 0 0 3px; }
.gd-author-text { font-size: 12.5px; line-height: 1.75; color: var(--g-muted); margin: 0; }

@media (prefers-reduced-motion: reduce) { .gd-rel a:active { transform: none; } }
@media (max-width: 430px) {
  .gd-hero { padding: 24px 18px; }
  .gd-hero-main { font-size: 21px; }
  .gd-hero-main em { font-size: 29px; }
  .gd-toc { padding: 17px 18px; }
}