/*
 * propeller6 の公開側の見た目。
 * 本体（プロペラ6）の resources/views/site/partials/theme.blade.php の <style> をそのまま写したもの（設計 4.2）。
 * 見た目の変数（--accent・--bg・--surface・--text・--muted・--line・--ph・--ph-ink・--font・--fs・--r・--r-sm・--btn-r・--face-r・
 * --wrap・--work-ratio）と、見出し・カード・ボタンの塗りの上書きのルールは、inc/display/head.php が wp_add_inline_style で足す
 * （値は inc/display/design.php の表。本体の SiteDesign::cssVariables と同じ）。
 */
  :root {
    --pill:999px;
  }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--text); font-size:var(--fs); line-height:1.9;
         font-family:var(--font);
         -webkit-font-smoothing:antialiased; }
  .wrap { max-width:var(--wrap); margin:0 auto; padding:48px 20px 80px; }

  /* 上部の案内 */
  header.nav { border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--bg) 88%, transparent);
               position:sticky; top:0; z-index:5; backdrop-filter:saturate(1.5) blur(8px); }
  header.nav .inner { max-width:var(--wrap); margin:0 auto; padding:14px 20px;
                      display:flex; gap:18px; align-items:baseline; flex-wrap:wrap; }
  header.nav a { color:var(--muted); text-decoration:none; font-size:14px; padding:2px 0;
                 border-bottom:2px solid transparent; }
  header.nav a:hover { color:var(--accent); }
  header.nav a[aria-current] { color:var(--text); border-bottom-color:var(--accent); font-weight:700; }
  header.nav .brand { font-weight:800; font-size:17px; margin-right:auto; color:var(--text);
                      border:0; letter-spacing:-.01em; }

  h1 { font-size:32px; line-height:1.4; margin:0 0 10px; letter-spacing:-.02em; }
  h2 { font-size:20px; margin:44px 0 12px; letter-spacing:-.02em; padding-bottom:9px;
       border-bottom:2px solid color-mix(in srgb, var(--accent) 22%, var(--line)); }
  h3 { font-size:16px; margin:0 0 4px; }
  p { margin:0 0 16px; }
  .lead { color:var(--muted); font-size:15px; }
  a { color:var(--accent); }

  /* 印は 1 枚の型紙を文字色で塗って出す (置いた場所の色に自動で合う) */
  .mk { display:inline-block; flex:none; background-color:currentColor; vertical-align:-.16em;
        -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
        -webkit-mask-position:center; mask-position:center;
        -webkit-mask-size:contain; mask-size:contain; }
  /* 画像がまだ無いところ。空白で崩れさせず、同じ大きさの面を置く */
  .ph { display:flex; align-items:center; justify-content:center; color:var(--ph-ink);
        background:var(--ph); border-radius:var(--r-sm); height:160px; }
  .card .ph { margin:0 0 10px; height:150px; }
  .card.work .ph { margin:0 0 10px; }

  /* 名刺のように読める先頭 */
  .hero { margin-bottom:36px; padding:8px 0 4px; }
  .hero .who { display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin:0 0 14px; }
  .hero .who > div { flex:1 1 260px; min-width:0; }
  .hero .who h1 { margin:0 0 6px; }
  .hero .face, .prof .face { width:132px; height:132px; border-radius:var(--face-r); object-fit:cover; flex:none;
                border:1px solid var(--line); background:var(--surface); }
  .face.ph { height:132px; color:var(--ph-ink); }
  .role { color:var(--muted); font-size:15px; margin:0 0 14px; }
  .hero .bio { font-size:16px; }
  .hero .headline { font-size:19px; font-weight:700; margin:0 0 12px; }

  .card { border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; margin:0;
          background:var(--surface); transition:border-color .12s, transform .06s, box-shadow .12s; }
  a.card { display:block; text-decoration:none; color:inherit; }
  a.card:hover { border-color:var(--accent); transform:translateY(-1px); }
  .card h3 { color:var(--text); }
  .card .lead { font-size:14px; margin:0; }
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; margin:0 0 16px; }
  .grid img, .card img { max-width:100%; height:auto; border-radius:var(--r-sm); }

  /* 🛑 **作品が少ないときに間延びさせない**。列は件数で決める (`works-grid` が付ける) */
  .grid.works.n1 { grid-template-columns:minmax(0,420px); }
  .grid.works.n2 { grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* 🛑 **一覧の画像は高さを揃える**。`height:auto` のままだと作品ごとに縦横比が違い        (実測で 400x248 と 400x196 が混在)、**題名の位置が揃わず縦長に伸びて見えた**        (プロトタイプを触ってもらった人が指摘)。上寄せで切るのは、作品の写真は        上部に主題が来ることが多いため。切られたくない人は切り取り位置を選べる。 */
  .card.work { display:flex; flex-direction:column; }
  .card.work img, .card.work .ph {
    width:100%; height:auto; aspect-ratio:var(--work-ratio); object-fit:cover; object-position:top; border-radius:var(--r-sm); }
  /* 🛑 **作品詳細のギャラリーは切らない**。同じ `.grid` を使っているので、        切るのは一覧のカード (`.card.work`) だけに限る。作品そのものを見せる場所で        作品を切ってはいけない。 */
  /* 切り位置は本人が選べる (既定は上)。「切らない」だけは余白を入れて高さを保つ */
  .card.work img.pos-center { object-position:center; }
  .card.work img.pos-bottom { object-position:bottom; }
  .card.work img.pos-contain { object-fit:contain; background:var(--ph); }
  /* 🛑 **作品詳細のギャラリーは切らない**。同じ `.grid` を使っているので、        切るのは一覧のカード (`.card.work`) だけに限る。作品そのものを見せる場所で        作品を切ってはいけない。 */
  .grid figure.card img { aspect-ratio:auto; object-fit:contain; max-height:70vh; }
  /* 説明は切らずに 2 行で止める。効かない古いブラウザでは全文が出るだけで壊れない */
  .card .sum { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .card .more { margin-top:auto; padding-top:10px; color:var(--accent); font-size:13.5px; font-weight:700; }
  a.card:hover .more { text-decoration:underline; }

  table { border-collapse:collapse; width:100%; margin:0 0 16px; }
  th, td { border-bottom:1px solid var(--line); padding:13px 12px; text-align:left; font-size:15px; }
  th { font-size:12.5px; color:var(--muted); letter-spacing:.04em; }
  td.price { white-space:nowrap; font-weight:700; }

  .chip { display:inline-block; border:1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
          border-radius:var(--pill); padding:6px 16px; margin:0 6px 7px 0; font-size:13.5px;
          background:color-mix(in srgb, var(--accent) 7%, var(--surface));
          color:color-mix(in srgb, var(--accent) 76%, var(--text)); font-weight:700; }

  /* 問い合わせ */
  label { display:block; font-size:13.5px; font-weight:700; margin-bottom:5px; }
  input[type=text], input[type=email], textarea {
    width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:12px;
    font:inherit; background:var(--surface); color:var(--text); }
  input:focus, textarea:focus { outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
  button { font:inherit; font-weight:700; padding:13px 32px; border-radius:var(--btn-r);
           border:2px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer;
           box-shadow:0 5px 14px color-mix(in srgb, var(--accent) 26%, transparent); transition:filter .12s; }
  button:hover { filter:brightness(.94); }
  button.ghost { background:var(--surface); color:var(--text); border-color:var(--line); box-shadow:none; }
  button.ghost:hover { border-color:var(--accent); color:var(--accent); filter:none; }
  .notice { border:1px solid var(--accent); border-radius:10px; padding:12px 14px;
            background:color-mix(in srgb, var(--accent) 6%, var(--surface)); margin:0 0 20px; }
  .notice.error { border-color:#d33; background:color-mix(in srgb, #d33 10%, var(--surface)); }

  footer.site { border-top:1px solid var(--line); color:var(--muted); font-size:13px; margin-top:56px; }
  footer.site .inner { max-width:var(--wrap); margin:0 auto; padding:24px 20px 40px; }
  footer.site a { color:var(--muted); }


  /* プロフィールの顔まわり */
  .prof { display:flex; gap:20px; align-items:center; margin:0 0 24px; flex-wrap:wrap; }
  .prof img { border-radius:var(--face-r); object-fit:cover; }
  .prof .name { font-size:22px; font-weight:800; margin:0 0 2px; }

  /* 縦に積む導線 (ボタンの並び) */
  .actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
  .actions a { text-decoration:none; }
  @media (max-width:520px) {
    .wrap { padding:32px 18px 64px; }
    h1 { font-size:26px; }
    .grid { grid-template-columns:1fr; }
    .hero .face { width:104px; height:104px; }
    .prof { gap:14px; }
    .prof img { width:96px; height:96px; }
  }

/* ここから下は WordPress のテーマで足したもの（本体の公開ページには無い要素） */
/* ログインしているときのツールバー（32px、狭い画面は 46px）の下に、固定のナビを置く */
.admin-bar header.nav { top:32px; }
@media screen and (max-width:782px) { .admin-bar header.nav { top:46px; } }
/* 本体は img の width・height の属性で 160px にしている。wp_get_attachment_image は画像の大きさの属性を付けるので CSS で揃える */
.prof > img { width:160px; height:160px; }
.prof .loc { margin:4px 0 0; font-size:14px; }
.chip .lv { font-weight:400; font-size:12px; margin-left:6px; opacity:.85; }
ul.features { margin:6px 0 0; padding-left:1.2em; }
.work-body, .bio-body { margin:0 0 16px; }
/* パスワード保護の作品の欄（get_the_password_form）を本体の入力欄・ボタンと同じ見た目にする */
.post-password-form input[type=password] { width:100%; max-width:360px; padding:13px 15px; border:1px solid var(--line);
  border-radius:12px; font:inherit; background:var(--surface); color:var(--text); }
.post-password-form input[type=submit] { font:inherit; font-weight:700; padding:13px 32px; border-radius:var(--btn-r);
  border:2px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; margin-top:10px; }
@media (max-width:520px) {
  .prof > img { width:96px; height:96px; }
}