/* ============================================================
   landing.css — ページ shell（レイアウト・左narrative・phone外枠・LPクローム）
   スマホ画面の中身（#demoScreen 配下）は css/demo.css（担当A）が持つため、
   このファイルは #demoScreen の内側を一切スタイリングしない。
   無彩色モノトーン・写真だけが色を持つ設計。装飾は最小限に、余白と字組みで品位を出す。
   ============================================================ */

/* ------------------------------------------------------------
   トークン（実アプリ neu.js 準拠。値を直書きせず必ずここから参照する）
   ------------------------------------------------------------ */
:root{
  --bg:#ECECEC;
  --surface:#F2F2F2;
  --surface-hi:#FAFAFA;
  --ink:#2E2E2E;
  --ink-soft:#8A8A8A;
  --ink-faint:#B0B0B0;
  --accent:#3D3D3D;
  --danger:#E11D48;
  --line:rgba(0,0,0,.08);

  /* 影（3段階エレベーション） */
  --raise:   6px 6px 14px rgba(180,180,180,.5), -6px -6px 14px rgba(255,255,255,.9);
  --raise-sm:3px 3px 8px rgba(180,180,180,.55), -3px -3px 8px rgba(255,255,255,.95);
  --raise-xs:1.5px 1.5px 4px rgba(180,180,180,.5), -1.5px -1.5px 4px rgba(255,255,255,.95);
  --inset:   inset 4px 4px 9px rgba(190,190,190,.85), inset -4px -4px 9px rgba(255,255,255,.95);
  --inset-sm:inset 2px 2px 5px rgba(190,190,190,.8), inset -2px -2px 5px rgba(255,255,255,.95);

  /* 角丸 */
  --r-card:24px;
  --r-thumb:14px;
  --r-btn:16px;
  --r-pill:999px;

  /* フォント */
  --ja:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Hiragino Sans',system-ui,sans-serif;
  --util:'Outfit','Zen Maru Gothic',system-ui,sans-serif;

  /* レイアウト用変数（JSが resize に追従して更新する） */
  --phone-scale:1;
  --header-h:64px; /* .head-inner の height と一致させる。showcaseのsticky offsetにも使う */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------
   RESET / BASE
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ja);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p{margin:0}
::selection{background:var(--ink);color:var(--surface-hi)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--surface-hi);padding:.8em 1.2em;border-radius:0 0 var(--r-btn) 0;
  font-family:var(--util);font-size:.85rem;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.site-header.scrolled{
  background:rgba(236,236,236,.88);
  border-bottom-color:var(--line);
}
.head-inner{
  max-width:1440px;margin:0 auto;
  padding:0 clamp(20px,4vw,48px);
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
}
.brand{display:inline-flex;align-items:center;gap:.55rem}
.brand-mark{
  width:22px;height:22px;border-radius:8px;
  background:var(--surface);
  box-shadow:var(--raise-xs);
  position:relative;flex:0 0 auto;
}
.brand-mark::before{
  content:"";position:absolute;inset:6px;border-radius:50%;
  border:2px solid var(--ink-soft);
}
.brand-word{font-family:var(--util);font-weight:600;font-size:1.02rem;letter-spacing:.01em;color:var(--ink)}
.brand-word.small{font-size:.95rem}

.head-actions{display:flex;align-items:center;gap:.85rem}
.lang-toggle{
  display:inline-flex;align-items:center;border-radius:var(--r-pill);
  padding:3px;background:var(--surface);box-shadow:var(--inset-sm);
}
.lang-toggle button{
  font-family:var(--util);font-weight:600;font-size:.72rem;letter-spacing:.05em;
  color:var(--ink-soft);padding:.4em .85em;border-radius:var(--r-pill);
  transition:color .25s,background .25s,box-shadow .25s;
}
.lang-toggle button.active{color:var(--surface-hi);background:var(--ink);box-shadow:var(--raise-xs)}
.lang-toggle button:not(.active):hover{color:var(--ink)}

.nav-cta{
  font-family:var(--ja);font-weight:700;font-size:.86rem;
  padding:.62em 1.3em;border-radius:var(--r-btn);
  color:var(--ink);background:var(--surface);box-shadow:var(--raise-sm);
  transition:transform .25s var(--ease),box-shadow .25s;
  white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-2px)}
.nav-cta:active{box-shadow:var(--inset-sm);transform:none}
@media(max-width:560px){.nav-cta{display:none}}

/* ------------------------------------------------------------
   STAGE（左右2分割の土台。モバイルファースト → 1024px以上で2カラム）
   ------------------------------------------------------------ */
.stage{display:block}

@media(min-width:1024px){
  .stage{
    display:grid;
    /* 左（文章）を右（スマホ枠）より広く取る。スマホ枠は .phone 側で
       width:min(340px,33vw) に制限されており右カラムには余白があるため、
       余った分を文章側に回して読み幅を確保する。1280px 幅で 左738px / 右527px。 */
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
    align-items:start;
  }
  /* DOM順は showcase→narrative（モバイルでshowcaseを上部sticky化するため）だが、
     デスクトップでは「左=narrative／右=showcase」に視覚順を入れ替える。 */
  .narrative{order:1}
  .showcase{order:2}
  /* 章のテキストブロックを左カラムの中で水平中央に置く。画面が広いと
     ブロックが左端に貼り付いて右のスマホ枠との間が空きすぎるため。
     .chapter は display:flex なので justify-content で寄せる。
     文字揃え（text-align）は左のまま変えない。 */
  .chapter{justify-content:center}
}

/* ------------------------------------------------------------
   NARRATIVE（左：縦スクロールする説明）
   ------------------------------------------------------------ */
.narrative{min-width:0}

.chapter{
  min-height:100svh;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:clamp(32px,5vw,88px);
  position:relative;
}
.chapter + .chapter{border-top:1px solid var(--line)}
/* width:100% は「章ごとに中身の長さが違ってもブロック幅を max-width で一定に保つ」ため。
   これが無いと flex アイテムの幅が内容依存になり、中央寄せしたとき章ごとに左端がずれる。 */
.chapter-inner{max-width:74ch;width:100%}

.chapter-num{
  display:block;
  font-family:var(--util);font-weight:600;font-size:.76rem;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:1.2rem;
}
.chapter h2{
  font-family:var(--ja);font-weight:900;
  font-size:clamp(1.9rem,2.6vw + 1.1rem,3.1rem);
  line-height:1.32;letter-spacing:.01em;
  color:var(--ink);
}
.chapter p{
  margin-top:1.5rem;
  color:var(--ink-soft);
  font-size:clamp(1rem,.35vw + .92rem,1.12rem);
  /* 日本語で1行あたり約33文字。狭すぎると視線の折り返しが増えて読みにくいため広めに取る */
  max-width:66ch;
}
.chapter p strong{color:var(--ink);font-weight:700}

.chapter-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:2.3rem}

.btn{
  font-family:var(--ja);font-weight:700;font-size:.96rem;
  display:inline-flex;align-items:center;gap:.5em;
  padding:.88em 1.7em;border-radius:var(--r-btn);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.btn-primary{color:var(--ink);background:var(--surface);box-shadow:var(--raise)}
.btn-primary:hover{transform:translateY(-3px)}
.btn-primary:active{box-shadow:var(--inset);transform:none}
.btn-ghost{color:var(--ink-soft);background:transparent;box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink-faint)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

.chapter-cta{min-height:78vh}

/* ------------------------------------------------------------
   SHOWCASE（右：sticky・写真館のホリゾント幕）
   ------------------------------------------------------------ */
.showcase{
  position:sticky;
  /* headerもsticky top:0なので、showcaseは header の高さ分だけ下にオフセットして
     stuck状態でヘッダーの下に潜り込む（＝ヘッダーと衝突しない）ようにする */
  top:var(--header-h);
  height:52vh;
  min-width:0;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:radial-gradient(120% 90% at 50% 20%, #F6F6F6, #E4E4E4 70%);
}
/* ごく微かなグレイン（フィルム調の質感。画像ファイルは使わずSVGフィルタのみで生成） */
.showcase::before{
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.045;
  mix-blend-mode:multiply;
  pointer-events:none;
}

.showcase-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:16px;
  padding:16px;
  width:100%;
}

/* phone枠（担当Aとの契約: 中身は #demoScreen ひとつだけ）
   常に「幅」を明示的に決め、aspect-ratio で高さを導出する（幅基準）。
   #demoScreen が 375px 固定幅の内部要素を持つため、.phone 側を width:auto の
   高さ基準にすると子要素の実寸(375px)がshrink-to-fit計算に影響してしまう
   （transformでのスケールはボックスサイズ計算に反映されないため）。
   そのため、モバイルでは「52vhに収まる幅」を calc() で幅そのものとして逆算する。
   108px は showcase-inner の上下padding・チップ列・gapの概算オーバーヘッド。
   375/812 ≒ 0.4618（縦横比の逆数）。 */
.phone{
  width:min(340px, max(90px, calc((52vh - 108px) * 0.4618)));
  aspect-ratio:375/812;
  /* .showcase-inner（縦方向flex）のflexアイテムなので、既定の
     自動最小サイズ（内容物基準＝#demoScreenの実寸812px）に高さが
     引っ張られないよう明示的に解除する（flexboxの定番の罠）。 */
  min-height:0;
  min-width:0;
  flex:0 0 auto;
  background:#1C1C1E;
  border-radius:44px;
  padding:10px;
  box-shadow:0 30px 70px rgba(0,0,0,.22), 0 6px 18px rgba(0,0,0,.12);
  position:relative;
}
.phone::before{
  /* ノッチ（装飾。写真館らしい静かなディテール） */
  content:"";
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:34%;height:6px;background:#000;border-radius:99px;
  z-index:3;opacity:.85;
}
.phone-mask{
  width:100%;height:100%;
  border-radius:34px;
  overflow:hidden;
  background:var(--bg);
  position:relative;
}
#demoScreen{
  width:375px;
  height:812px;
  transform:scale(var(--phone-scale,1));
  transform-origin:top left;
  position:relative;
  background:var(--bg);
}

/* シーンチップ
   7個に増えても縦に折り返さない（＝行数固定）よう、既定から常に横スクロール
   1列にする。.phone の幅計算（calc内の108px等）はチップ列が1行である前提の
   概算オーバーヘッドなので、折り返して2行になると縦方向の帳尻が狂うため。 */
.scene-chips{
  display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:.5rem;
  max-width:min(340px,90vw);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
  scrollbar-width:thin;
}
.scene-chips::-webkit-scrollbar{height:3px}
.chip{
  font-family:var(--util);font-weight:600;font-size:.76rem;letter-spacing:.02em;
  padding:.5em 1.05em;border-radius:var(--r-pill);
  background:var(--surface);color:var(--ink-soft);
  box-shadow:var(--raise-xs);
  transition:color .2s,background .2s,box-shadow .2s;
  white-space:nowrap;flex:0 0 auto;
}
.chip:hover{color:var(--ink)}
.chip.active{background:var(--ink);color:var(--surface-hi);box-shadow:var(--raise-sm)}

/* 手動操作中バー */
.manual-bar{
  display:flex;align-items:center;gap:.65rem;
  padding:.55em .5em .55em 1em;
  border-radius:var(--r-pill);
  background:var(--surface);
  box-shadow:var(--raise-sm);
  font-family:var(--util);font-size:.76rem;color:var(--ink-soft);
}
.manual-bar[hidden]{display:none}
.manual-dot{
  width:7px;height:7px;border-radius:50%;background:var(--ink-soft);flex:0 0 auto;
}
.manual-bar button{
  font-family:var(--ja);font-weight:700;font-size:.76rem;color:var(--ink);
  background:var(--surface-hi);padding:.42em 1em;border-radius:var(--r-pill);
  box-shadow:var(--raise-xs);
  transition:box-shadow .2s,transform .2s;
}
.manual-bar button:hover{transform:translateY(-1px)}
.manual-bar button:active{box-shadow:var(--inset-sm);transform:none}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.site-footer{
  border-top:1px solid var(--line);
  padding:2.6rem clamp(20px,4vw,48px) 3rem;
  text-align:center;
}
.foot-inner{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.foot-note{
  font-family:var(--util);font-size:.78rem;color:var(--ink-faint);
}

/* ------------------------------------------------------------
   REVEAL（旧LP同様のフェードアップ。reduced-motion で無効化）
   ------------------------------------------------------------ */
[data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
[data-reveal].in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- デスクトップ（>=1024px）: 2カラム・showcase は画面全高で貼り付く ---- */
@media(min-width:1024px){
  .showcase{height:100vh}
  /* 横に十分な余裕があるので、ここからは 52vh の制約を外して幅基準（33vw）でスケール */
  .phone{width:min(340px,33vw)}
}

/* ---- タブレット/モバイル（<1024px）: 1カラム・showcase は上部52vhに貼り付く ---- */
@media(max-width:1023.98px){
  .showcase{height:52vh}
  .chapter{min-height:88vh}
  .chapter-cta{min-height:64vh}
}

/* ---- 小型スマホ（<=680px）: 余白を詰め、チップは横スクロール ---- */
@media(max-width:680px){
  .showcase-inner{padding:10px 6px;gap:10px}
  /* オーバーヘッドが少し減る分（padding縮小）、係数の基準値も96pxに合わせる */
  .phone{width:min(340px, max(80px, calc((52vh - 96px) * 0.4618)))}
  .scene-chips{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;max-width:92vw;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
  }
  .scene-chips::-webkit-scrollbar{height:3px}
  .chapter{padding:clamp(24px,7vw,40px)}
  .chapter h2{font-size:clamp(1.6rem,6vw + .6rem,2.1rem)}
  .chapter p{max-width:none}
  .manual-bar{font-size:.72rem}
}

/* ---- 横長・低高さ（スマホの横持ち／短いウィンドウ） ----
   縦の余裕が無いため 1カラム＋52vh のままだとスマホ枠が 90px 程度まで潰れ、
   デモが判読できなくなる。横幅には余裕があるので2カラムへ戻し、
   高さいっぱいを使って読めるサイズを確保する。 */
@media (max-width:1023.98px) and (min-width:600px) and (max-height:620px){
  .stage{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:start;
  }
  .narrative{order:1}
  .showcase{order:2;height:calc(100vh - var(--header-h))}
  .showcase-inner{padding:8px 6px;gap:8px}
  /* 52vh の制約を外し、実際に使える高さから幅を逆算する（84px はチップ列等の概算） */
  .phone{width:min(300px, max(110px, calc((100vh - var(--header-h) - 84px) * 0.4618)))}
  .chapter{min-height:calc(100vh - var(--header-h));padding:clamp(20px,4vw,44px)}
  .chapter-cta{min-height:calc(100vh - var(--header-h))}
  .scene-chips{flex-wrap:nowrap;overflow-x:auto;max-width:44vw}
}

/* さらに低い高さ（横持ちスマホなど）ではシーンチップを畳み、
   空いた分をスマホ枠の高さに回して少しでもデモを大きく見せる。
   （チップはあくまで補助導線で、左のスクロールでも同じシーンに到達できる） */
@media (max-width:1023.98px) and (min-width:600px) and (max-height:430px){
  .scene-chips{display:none}
  .phone{width:min(300px, max(110px, calc((100vh - var(--header-h) - 26px) * 0.4618)))}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .btn,.chip,.nav-cta,.site-header,.manual-bar button{transition:none!important}
}