/* =========================================================
   app-shell.css — SPフレーム中央寄せ + PC左右レール
   デザインは「スマホ画面」設計。フレーム=スマホ画面として中央に据え、
   PC余白に左（ナビ）右（使い方ガイド）レールを置く。
   ========================================================= */
.cs-app{background:var(--cs-stage-bg)}

.cs-stage{
  display:flex;justify-content:center;align-items:flex-start;
  gap:30px;width:100%;min-height:100vh;padding:28px 24px;
}

/* 中央のスマホフレーム（= デザインの .screen 相当）。内部スクロール＋ヘッダー追従 */
.cs-frame{
  position:relative;
  width:100%;max-width:var(--cs-frame-max);flex-shrink:0;
  background:var(--cs-bg);
  height:calc(100vh - 56px);
  height:calc(100dvh - 56px);
  border-radius:34px;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(10,60,55,.35),0 0 0 1px rgba(0,0,0,.03);
  display:flex;flex-direction:column;
}
/* フレーム内スクロール領域（ヘッダーはこの中で sticky） */
.cs-frame__scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.cs-frame__scroll::-webkit-scrollbar{width:0}
.cs-frame__main{display:block}

/* ---- 左右レール（PC余白でのみ表示） ---- */
.cs-rail{width:var(--cs-rail);flex-shrink:0;position:sticky;top:28px;align-self:flex-start}
.cs-rail__brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:19px;color:var(--cs-ink);margin-bottom:22px}
.cs-rail__mark{width:26px;height:26px;border-radius:8px;background:var(--cs-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900}
.cs-railnav{display:flex;flex-direction:column;gap:3px}
.cs-railnav a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:12px;font-size:14px;font-weight:700;color:var(--cs-body-2);transition:all .15s}
.cs-railnav a:hover{background:#fff;color:var(--cs-primary-deep);box-shadow:var(--cs-shadow-card)}
.cs-railnav__ico{font-size:17px;width:22px;text-align:center}
.cs-rail__note{margin-top:18px;padding:0 14px;font-size:12px;color:var(--cs-sub);line-height:1.7}
.cs-rail__note strong{color:var(--cs-ink)}

/* 右レール：使い方ガイド */
.cs-guide{background:#fff;border:1px solid var(--cs-line);border-radius:18px;padding:22px 20px;box-shadow:var(--cs-shadow-card)}
.cs-guide h3{font-size:18px;margin:8px 0 6px}
.cs-guide__lead{font-size:13px;color:var(--cs-sub);margin-bottom:16px}
.cs-guide__steps{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
.cs-guide__steps li{display:flex;gap:12px;align-items:flex-start}
.cs-guide__no{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--cs-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px}
.cs-guide__steps strong{display:block;font-size:14px;color:var(--cs-ink)}
.cs-guide__steps em{display:block;font-style:normal;font-size:12px;color:var(--cs-sub);line-height:1.6;margin-top:2px}
.cs-guide__more{display:inline-block;margin:12px 0 0;font-size:13px;font-weight:800;color:var(--cs-primary-deep)}

@media (max-width:1099px){ .cs-rail{display:none} }

/* ---- フレーム内ヘッダー（固定追従なし・省スペース） ---- */
.cs-header{position:relative;z-index:20;background:#fff;padding:8px 22px 10px}
.cs-header__eyebrow{font-size:9px;line-height:1.3;font-weight:700;color:var(--cs-mute);letter-spacing:.01em;margin-bottom:4px}
.cs-header__bar{display:flex;align-items:center;justify-content:space-between;height:38px}
.cs-logo{display:flex;align-items:center;gap:7px;font-weight:900;font-size:18px;letter-spacing:-.01em;color:var(--cs-ink)}
.cs-logo__mark{width:22px;height:22px;border-radius:7px;background:var(--cs-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:900}
.cs-header__actions{display:flex;align-items:center;gap:9px}
.cs-btn-login{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1.5px solid var(--cs-primary);color:var(--cs-primary-deep);font-weight:800;font-size:12.5px;height:38px;padding:0 13px;border-radius:11px;cursor:pointer}
.cs-burger{background:var(--cs-mint);border:none;width:42px;height:42px;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;padding:0}
.cs-burger span.bar{width:16px;height:2px;background:var(--cs-primary-ink);border-radius:2px}
.cs-burger .cs-burger__label{font-size:7.5px;font-weight:800;color:var(--cs-primary-ink);letter-spacing:.02em;margin-top:1px}

/* ---- ドロワー（フレーム内に絶対配置。閉時は frame の overflow:hidden でクリップ） ---- */
.cs-overlay{position:absolute;inset:0;z-index:48;background:rgba(12,31,28,.42);opacity:0;pointer-events:none;transition:opacity .28s}
.cs-drawer{position:absolute;top:0;right:0;bottom:0;z-index:49;width:82%;max-width:320px;background:#fff;box-shadow:-16px 0 40px -18px rgba(15,48,44,.4);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.32,.72,.34,1)}
.cs-app.is-drawer-open .cs-overlay{opacity:1;pointer-events:auto}
.cs-app.is-drawer-open .cs-drawer{transform:translateX(0)}

/* ---- 追従CTA（フレーム下部に固定。高さ圧縮） ---- */
.cs-sticky-cta{position:absolute;left:0;right:0;bottom:0;z-index:35;padding:8px 18px 10px;background:linear-gradient(transparent,rgba(255,255,255,.9) 30%,#fff 66%)}
.cs-sticky-cta__wait{text-align:center;margin-bottom:4px;font-size:11px;font-weight:700;color:#3f615b}
.cs-sticky-cta .cs-cta{padding:10px 16px}
.cs-sticky-cta .cs-cta__main{font-size:15px}
.cs-sticky-cta .cs-cta__sub{font-size:10px}

/* ---- スマホ幅：フレームを全幅化 ---- */
@media (max-width:480px){
  .cs-stage{padding:0;gap:0}
  .cs-frame{max-width:none;border-radius:0;height:100vh;height:100dvh;box-shadow:none}
}