/* ============================================================
   SOL.ME 369 v2 統合仕上げCSS（2026-08-02 でん決裁ラウンド）

   方針（でんFB反映）:
   - 色・世界観 = 「光の工房」正本（solme369.com/css/style.css）に完全復帰
     （地色の青みの光・箔金#a5842e。既存公開ページと並んでも一体に見える）
   - かたち = やわらかさを戻す（ボタンは丸・カードは紙＋ほどよい角丸14px）
   - Codex版から引き継ぐ実用改善 = 補助文字のコントラスト改善／
     スマホでナビが全部見える横スクロール化／スキップリンク／見出しの改行バランス／
     ボタンの押し込み反応
   - 雑誌的な非対称レイアウトは、ページ側が自分のセクションで採用する
     （トップの「ゼロ磁場×モチーフ×レジン」など。このファイルでは強制しない）

   読み込み順: 各ページの自己完結<style>の後。トークンの上書きと共通改善だけを行い、
   ページ固有の見た目には手を出さない。
   ============================================================ */

:root{
  /* ---- 光の工房トークン（正本値に復帰） ---- */
  --light:#f6f6f3;
  --light-2:#edf0f4;
  --paper:#fbfbf9;
  --gold:#a5842e;
  --gold-bright:#cfae5b;
  --gold-deep:#7f6420;
  --mist:#c8cfda;
  --sumi:#272c3a;
  --line:rgba(39,44,58,.14);
  --line-light:rgba(251,251,249,.16);
  --gold-soft:rgba(165,132,46,.34);
  --maxw:1180px;

  /* 補助文字: 青みの墨のまま一段濃く（Codex改善の趣旨だけ引き継ぐ） */
  --sumi-soft:#5b6376;

  /* 角丸: 26px（ふっくら）と0px（かっちり）の間、正本の実寸レンジに合わせる */
  --radius-lg:14px;
  --radius-sm:10px;

  /* 影: 正本のやわらかい浮きに復帰 */
  --shadow:0 30px 70px -45px rgba(39,44,58,.45);
  --photo-shadow:0 26px 70px -44px rgba(39,44,58,.5);
}

/* ---- 文字まわりの実用改善 ---- */
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* ---- スキップリンク（キーボード操作の入口） ---- */
.skip-link{
  position:fixed; left:18px; top:14px; z-index:200;
  padding:10px 16px;
  background:var(--paper); color:var(--sumi);
  border:1px solid var(--gold); border-radius:999px;
  font-size:13px; letter-spacing:.08em;
  transform:translateY(-200%);
  transition:transform .2s ease;
}
.skip-link:focus{ transform:none; }

/* ---- ボタン: 丸を正、押した手応えだけ足す ---- */
.btn{ border-radius:999px; }
.btn:active{ transform:translateY(1px); }

/* ---- テキストリンク: ホバーで周りのレイアウトを動かさない（矢印だけ動く） ---- */
.text-link{ gap:14px; }
.text-link:hover{ gap:14px; }
.text-link span[aria-hidden="true"]{
  display:inline-block;
  transition:transform .3s ease;
}
.text-link:hover span[aria-hidden="true"]{ transform:translateX(5px); }

/* ---- スマホ: ナビを消さず、横に流して全部見せる ---- */
@media (max-width:960px){
  .site-header .inner{
    flex-wrap:wrap;
    height:auto;
    padding-top:10px;
    padding-bottom:8px;
    row-gap:2px;
  }
  .site-nav{
    order:3;
    width:100%;
    display:flex;
    align-items:center;
    gap:18px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 2px 6px;
  }
  .site-nav::-webkit-scrollbar{ display:none; }
  .site-nav a:not(.nav-cta){
    display:inline-flex;
    white-space:nowrap;
  }
  .site-nav .nav-cta{ white-space:nowrap; }
}

@media (prefers-reduced-motion: reduce){
  .skip-link,.btn{ transition:none; }
}