/**
 * Solstice CTX Page Components v1.1 — hello-top-v11 tokens
 * 全CTXページ共通のページレイアウトコンポーネント
 *
 * 含まれるコンポーネント:
 *   - ctx-breadcrumb   パンくずリスト
 *   - ctx-eeat         E-E-A-T著者表示
 *   - ctx-role-decl    ページ役割宣言
 *   - ctx-axes         判断軸ブロック
 *   - ctx-aio-queries  AIO検索キーワード
 *   - emergency-placeholder  緊急ショートコードプレースホルダー
 *   - exit-proceed     出口遷移ボタン
 */

/* ============================================================
   BREADCRUMB
   ============================================================ */
.ctx-breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  margin-bottom:.75rem;
  font-size:.8125rem;color:var(--stone);
}
.ctx-breadcrumb a{color:var(--stone);text-decoration:none;transition:color .25s}
.ctx-breadcrumb a:hover{color:var(--water-deep)}
.ctx-breadcrumb span:last-child{color:var(--ink-deep);font-weight:500}

/* ============================================================
   E-E-A-T AUTHOR BADGE
   ============================================================ */
.ctx-eeat{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin:.5rem auto .75rem;padding:.45rem .875rem;
  background:#fff;border-radius:100px;width:fit-content;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  border:1px solid rgba(14,165,233,.08);
  font-size:.75rem;color:var(--stone);
}
.ctx-eeat a{font-weight:600;color:var(--ink);text-decoration:none}

/* ============================================================
   ROLE DECLARATION
   ============================================================ */
.ctx-role-decl{
  margin:0 0 1.25rem;padding:1rem;
  border-radius:12px;background:#fff;
  border:2px solid var(--water-deep);
  text-align:center;
}
.ctx-role-decl p{
  margin:0;font-size:.875rem;font-weight:700;
  color:var(--ink-deep);line-height:1.9;
}
.ctx-role-decl span{
  font-weight:500;color:var(--ink-deep);
}

/* ============================================================
   JUDGMENT AXES
   ============================================================ */
.ctx-axes{
  margin:0 0 1.25rem;padding:1rem;
  border-radius:12px;background:#fff;
  border:1px solid rgba(14,165,233,.15);
}
.ctx-axes h3{
  margin:0 0 .6rem;font-size:.875rem;font-weight:700;
  color:var(--ink-deep);
}
.ctx-axes ol{
  margin:0 0 .6rem;padding-left:1.5rem;
  font-size:.8125rem;color:var(--ink);line-height:2.1;
}
.ctx-axes p{
  margin:0;font-size:.75rem;
  color:var(--ink-deep);line-height:1.8;
}

/* ============================================================
   AIO SEARCH QUERIES
   ============================================================ */
.ctx-aio-queries{
  margin:0 0 1.25rem;padding:.75rem 1rem;
  border-radius:8px;
  background:rgba(14,165,233,.04);
  border:1px dashed rgba(14,165,233,.2);
}
.ctx-aio-queries p{
  margin:0;font-size:.75rem;color:var(--stone);line-height:1.8;
}
.ctx-aio-queries strong{color:var(--ink-deep)}

/* ============================================================
   EMERGENCY PLACEHOLDER (shortcode area)
   ============================================================ */
.emergency-placeholder{
  max-width:720px;margin:0 auto;padding:1.5rem;
  background:var(--silk);border:1px solid var(--mist);
  border-radius:14px;text-align:center;
  font-size:.8125rem;color:var(--ink-deep);font-weight:500;
}

/* ============================================================
   EXIT PROCEED BUTTON
   ============================================================ */
.exit-proceed{
  display:none;
  margin:1rem 0 0;
  animation:exitProceedIn .4s ease both;
}
.exit-proceed.--visible{display:block}

@keyframes exitProceedIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.exit-proceed-btn{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;max-width:380px;margin:0 auto;
  padding:.9rem 1.25rem;
  border:none;border-radius:12px;cursor:pointer;
  font-size:.9375rem;font-weight:700;letter-spacing:.03em;
  color:#fff;
  background:linear-gradient(135deg,var(--water-deep),var(--water-deep));
  box-shadow:0 4px 16px rgba(14,165,233,.25);
  transition:transform .2s,box-shadow .2s;
}
.exit-proceed-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(14,165,233,.35);
}
.exit-proceed-btn svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2}

.exit-proceed-btn--resolve{
  background:linear-gradient(135deg,#10b981,#34d399);
  box-shadow:0 4px 16px rgba(16,185,129,.2);
}
.exit-proceed-btn--resolve:hover{
  box-shadow:0 6px 24px rgba(16,185,129,.3);
}

/* ============================================================
   BRANCH NAV v1.0 — 「まだ判断がつかない場合」共通ナビ
   ============================================================ */
.s-branch{background:var(--silk)}
.branch-cards{display:flex;flex-direction:column;gap:.625rem}
.branch-card{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.125rem 1.25rem;
  background:var(--white);border:1px solid rgba(142,190,214,.1);
  border-radius:14px;text-decoration:none;
  transition:all .3s ease;
}
.branch-card:hover{
  border-color:rgba(142,190,214,.3);
  box-shadow:0 3px 12px rgba(0,0,0,.03);
  transform:translateY(-1px);
}
.branch-card-icon{
  width:36px;height:36px;border-radius:10px;
  background:var(--water-breath);
  display:grid;place-content:center;flex-shrink:0;
  font-size:1rem;
}
.branch-card-title{
  font-size:.875rem;font-weight:500;color:var(--ink-deep);
  letter-spacing:.02em;line-height:1.6;margin-bottom:.25rem;
}
.branch-card-desc{
  font-size:.75rem;font-weight:300;color:var(--stone);
  line-height:1.8;letter-spacing:.02em;
}
.branch-card-arrow{
  width:16px;height:16px;flex-shrink:0;color:var(--ash);
  margin-top:.2rem;transition:color .3s;
}
.branch-card:hover .branch-card-arrow{color:var(--water-deep)}

/* ============================================================
   L2-STICKY-NAV v1.0 — ページ内固定ナビ
   ============================================================ */
.l2-sticky-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:rgba(248,249,250,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(206,212,218,.15);
  padding:.625rem 1rem;
  padding-bottom:calc(.625rem + env(safe-area-inset-bottom,0px));
  display:flex;gap:.5rem;
  transform:translateY(100%);transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.l2-sticky-nav.--show{transform:translateY(0)}
.l2-sticky-nav a{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:.5rem .25rem;
  font-size:.65rem;font-weight:500;color:var(--stone);
  text-decoration:none;letter-spacing:.02em;text-align:center;
  border:1px solid rgba(142,190,214,.15);border-radius:8px;
  transition:all .3s ease;line-height:1.4;
}
.l2-sticky-nav a:hover{border-color:rgba(142,190,214,.4);color:var(--water-deep)}
.l2-sticky-nav a:last-child{
  background:var(--line-green);color:#fff;border-color:var(--line-green);
  font-weight:600;
}
.l2-sticky-nav a:last-child:hover{background:#05a849}
@media(min-width:768px){
  .l2-sticky-nav{
    max-width:720px;left:50%;transform:translateX(-50%) translateY(100%);
    border-radius:14px 14px 0 0;padding:.75rem 1.5rem;
  }
  .l2-sticky-nav.--show{transform:translateX(-50%) translateY(0)}
  .l2-sticky-nav a{font-size:.7rem;padding:.625rem .5rem}
}