/* =============================================
 * ファイルの役割：
 * 画面写真を入れる「ノートPC」と「スマホ」の枠。
 * サービス紹介ページ（/lp/）と会社ページ（/corp/）の両方で使う。
 *
 * 【★2つのページで共通にしている理由】
 * 同じ枠を各ページの <style> に書き写すと、片方だけ直されて見た目がずれる。
 * 置く位置や大きさ（font-size・重ね方）だけを各ページで決め、枠の形はここ1か所で持つ。
 *
 * 【theme.css に入れない理由】
 * 会社ページは theme.css を読み込まない決まり（app/corp/index.php の冒頭）なので、
 * どちらのページからも単独で読み込めるよう、別のファイルにしている。
 *
 * 【枠を画像にせずCSSで描く理由】
 * 画像の枠は画面の位置が固定で、スクショを撮り直すたびに合わせ直しになる。
 * CSSなら枠が写真の大きさに合わせて伸び縮みし、狭い画面でも崩れない。
 * 写真は tools/browser_check/screenshots.js がデモデータで撮る（会社名・氏名は写していない）。
 *
 * 【寸法を em で書いている理由】
 * 枠の太さ・角の丸み・ボタンの位置をすべて em にし、基準の font-size だけで拡大縮小する。
 * px で書くと、狭い画面用に十数か所を書き直すことになり、比率が崩れやすい。
 * 大きさを変えたいときは、使う側で .device-laptop / .device-phone の font-size を変える。
 *
 * 【★ここだけ柔らかい影を使う】
 * サイトの決まり（2px の黒枠・ぼかしなしの影）は「押せる部品」のためのもの。
 * この枠は押せない写真で、実物らしく見せるのが目的なので、ぼかした影と金属の階調を使う。
 * 実在の機種に似せないこと（ロゴ・特徴的な形を入れない）。
 * ============================================= */

/* 画面（写真とガラスの映り込み）。PC・スマホ共通 */
.device-screen { position: relative; overflow: hidden; background: #000; }
.device-screen img { display: block; width: 100%; height: auto; }
/* ガラスの映り込み。左上から斜めに薄い光を重ねる（写真の文字は読める程度に弱く） */
.device-screen::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 38%, rgba(255, 255, 255, 0) 38.2%);
}

/* ===== ノートPC ===== */
.device-laptop { position: relative; font-size: 10px; margin: 0 3em; }
/* 天板のふち（アルミの縁）。細い金属の階調で囲む */
.device-laptop-lid {
    padding: 0.3em; border-radius: 1.8em 1.8em 0 0;
    background: linear-gradient(180deg, #d9dade, #a9aab0);
}
/* 黒い額縁（ベゼル）。下辺だけ少し厚いのが一般的なノートPCの形 */
.device-laptop-bezel {
    position: relative; background: #0c0c0e;
    border-radius: 1.5em 1.5em 0 0;
    padding: 2em 1.3em 2.2em;
}
/* 額縁の上端中央のカメラ（レンズとまわりの輪） */
.device-camera {
    position: absolute; top: 0.7em; left: 50%;
    width: 0.7em; height: 0.7em; margin-left: -0.35em; border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, #3b4a6b 0 25%, #151518 45%);
    box-shadow: 0 0 0 0.12em #1e1e22;
}
.device-laptop .device-screen { border-radius: 0.3em; }
/* 台座（キーボード側の本体を正面から見た形）。天板より左右に広く、下へ向かって暗くなる */
.device-laptop-base {
    position: relative; height: 1.9em; margin: 0 -3em;
    background: linear-gradient(180deg, #eeeff2 0%, #cfd0d5 40%, #9c9da3 100%);
    border-radius: 0.3em 0.3em 2.4em 2.4em / 0.3em 0.3em 1.6em 1.6em;
    box-shadow: 0 2.6em 3em -1.6em rgba(0, 0, 0, 0.55);
}
/* 画面を開くときに指を掛けるくぼみ */
.device-laptop-base::before {
    content: ""; position: absolute; top: 0; left: 50%;
    width: 14%; height: 0.7em; transform: translateX(-50%);
    background: linear-gradient(180deg, #a3a4aa, #c4c5ca);
    border-radius: 0 0 0.8em 0.8em;
}
/* 台座の上面と正面の境目の、細い光の線 */
.device-laptop-base::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.12em;
    background: rgba(255, 255, 255, 0.9); border-radius: 0.3em;
}

/* ===== スマホ ===== */
.device-phone {
    /* 置く位置（重ねるかどうか）は使う側で決める。ここでは側面のボタンの基準にするだけ */
    position: relative; width: 20em; font-size: 10px;
    /* 金属の側面。角度で明るさが変わる様子を階調で出す */
    padding: 0.35em; border-radius: 3.6em;
    background: linear-gradient(145deg, #5b5c62 0%, #1d1d20 35%, #3a3b40 70%, #16161a 100%);
    box-shadow: 0 2.4em 4em -1.2em rgba(0, 0, 0, 0.5), 0 0.4em 1em rgba(0, 0, 0, 0.25);
}
/* 側面のボタン（左に音量2つ、右に電源）。本体の外へ少しだけはみ出させる */
.device-phone-btn {
    position: absolute; width: 0.35em; border-radius: 0.2em;
    background: linear-gradient(90deg, #2a2b2f, #4a4b50);
}
.device-phone-btn.is-vol-up   { left: -0.3em; top: 9em;  height: 3.2em; }
.device-phone-btn.is-vol-down { left: -0.3em; top: 13em; height: 3.2em; }
.device-phone-btn.is-power    { right: -0.3em; top: 11em; height: 5em; }
/* 黒い額縁 */
.device-phone-body { background: #050506; border-radius: 3.25em; padding: 0.8em; }
.device-phone .device-screen { border-radius: 2.5em; }
/* 画面上端の時刻・電波・電池の帯。
   写真はアプリの見出し（黄色）から始まるので、同じ色でつなげて1枚の画面に見せる */
.device-statusbar {
    /* 会社ページには theme.css の --nb-accent が無いので、同じ色を予備に書いておく */
    position: relative; height: 3em; background: var(--nb-accent, #ffd200);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.4em 2em 0; font-size: 1em; font-weight: 700; color: #000;
}
.device-statusbar-time { font-size: 1.25em; letter-spacing: 0; }
.device-statusbar svg { width: 3.4em; height: auto; display: block; }
/* 画面上部の黒い楕円（カメラの部分） */
.device-island {
    position: absolute; top: 0.7em; left: 50%;
    width: 6.4em; height: 1.9em; margin-left: -3.2em;
    background: #000; border-radius: 1em;
}