/*
 * アプリを開発するアプリ「アプリエ」v2.0
 * Copyright (c) 2026 村松浩幸・荒木誠吾
 * https://gijyutu.com/main/
 * Released under the MIT License
 *
 * 改定履歴
 * 2026-07-20
 *  - 4ツール共通の圧縮レイアウト（1366x768/iPad想定）で、input/textarea/selectの
 *    font-sizeを16px以上に統一（iPad Safariの自動ズーム防止）
 *  - backlink・主要ボタンのタップ領域を拡大（min-height 40px以上）
 *  - ①アプリを作る：機能・条件の入力方法として「簡単設計」「詳細設計」を選択できるように変更
 *    （詳細設計は機能ごとに条件を対応づけるカード形式、初期表示で1機能分の入力欄を表示）
 *  - AIに渡す仕様書に「iPadで問題なく動作するための条件」を新設
 *  - ②アプリを動かす：状況整理（4項目入力）画面を中学生向けに改善
 *    （番号バッジの追加、操作のクイック入力ボタン、Consoleのエラー確認方法への導線、文言の平易化）
 */
:root{
  --bg:#e4eaf7; --panel:#ffffff; --text:#141b2c; --muted:#5b6577; --line:#c2cee8;
  --primary:#2f5fe0; --primary-dark:#1c3fb0; --soft:#e9eefc; --accent:#0f766e;
  --shadow:0 10px 28px rgba(20,27,44,.10); --radius:18px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;color:var(--text);background:linear-gradient(135deg,#f2f5fc 0%,var(--bg) 55%,#e2e9f8 100%);min-height:100vh}
.home{width:min(1080px,calc(100% - 20px));margin:0 auto;padding:18px 0 56px}
.hero,.choice-card{background:rgba(255,255,255,.97);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero{padding:22px;margin-bottom:12px}
.hero-row{display:flex;align-items:center;gap:18px}.hero-copy{min-width:0;flex:1}
.eyebrow{margin:0 0 6px;color:var(--primary);font-weight:900}
.hero-kicker{margin:0 0 4px;color:var(--text);font-weight:900;font-size:clamp(1rem,2.1vw,1.32rem);line-height:1.4}
h1{font-size:clamp(2rem,6.4vw,3.4rem);line-height:1.06;margin:0 0 8px;letter-spacing:-.04em}
.hero-title{color:var(--primary);font-size:clamp(2.35rem,7vw,4.1rem);letter-spacing:-.045em}
.app-logo{display:block;width:clamp(88px,10vw,168px);height:auto;margin:0;border-radius:24%;filter:drop-shadow(0 10px 18px rgba(48,61,89,.16));flex-shrink:0}
.lead{margin:0;color:var(--muted);font-size:1rem;line-height:1.65}.lead span{display:block}
.choice-grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
.choice-card{padding:18px;text-align:left;cursor:pointer;border:2px solid var(--line);transition:.16s transform,.16s border-color,.16s background;display:flex;align-items:center;gap:14px}
.choice-card:hover{transform:translateY(-2px);border-color:var(--primary);background:#fbfdff}
.choice-card .icon{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--soft),#dbe4fb);display:grid;place-items:center;font-size:1.3rem;flex-shrink:0}
.choice-body{min-width:0;flex:1}
.choice-card h2{font-size:clamp(1.18rem,2.7vw,1.6rem);line-height:1.22;margin:0 0 6px}
.choice-card p{margin:0;color:var(--muted);line-height:1.6;font-size:.95rem}
.choice-card ul{margin:8px 0 0;padding-left:1.15em;color:var(--muted);line-height:1.55}
.tool-shell{display:none;height:100vh;width:100vw;background:#fff}
.tool-shell.active{display:block}
#toolFrame{width:100%;height:100%;border:0;display:block;background:#fff}
.footer-note{margin:12px 0 30px;color:var(--muted);font-size:.86rem;text-align:center}
.top-copyright{position:fixed;right:8px;bottom:8px;z-index:20;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;padding:5px 10px;box-shadow:0 6px 14px rgba(22,32,51,.06);font-size:.8rem}
.top-copyright a{color:var(--muted);text-decoration:none;font-weight:800}
.top-copyright a:hover{color:var(--primary-dark);text-decoration:underline}

.bottom-actions{position:fixed;right:8px;bottom:8px;z-index:20;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.bottom-actions .top-copyright{position:static;right:auto;bottom:auto;z-index:auto}
.contact-btn{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;padding:5px 10px;box-shadow:0 6px 14px rgba(22,32,51,.06);font-size:.8rem;color:var(--primary-dark);text-decoration:none;font-weight:900}
.contact-btn:hover{text-decoration:underline;background:#fbfdff}
@media(max-width:760px){.bottom-actions{left:6px;right:6px;bottom:6px}.contact-btn,.bottom-actions .top-copyright{font-size:.76rem;padding:4px 8px}}
@media(max-height:650px){.home{padding-top:10px}.hero{padding:18px;margin-bottom:10px}.choice-card{padding:14px}.footer-note{margin-bottom:24px}.contact-btn,.bottom-actions .top-copyright{font-size:.74rem;padding:4px 8px}}
@media(max-width:760px){.home{width:min(100% - 12px,1080px);padding-top:8px}.hero{padding:16px}.choice-grid{grid-template-columns:1fr;gap:10px}.choice-card{padding:16px}}

/* 1366x768 compact layout for GIGA terminals */
@media (min-width: 900px) and (max-height: 820px){
  body{overflow:hidden;}
  .home{height:100vh;overflow:hidden;padding:10px 0 38px;width:min(1040px,calc(100% - 18px));}
  .hero{padding:12px 16px;margin-bottom:8px;border-radius:14px;}
  .hero-row{gap:12px;}
  .app-logo{width:72px;height:72px;}
  .hero-kicker{font-size:clamp(.92rem,1.7vw,1.12rem);line-height:1.25;margin-bottom:2px;}
  .hero-title{font-size:clamp(2rem,4.8vw,3.2rem);line-height:1;margin-bottom:4px;}
  .lead{font-size:.92rem;line-height:1.42;}
  .choice-grid{gap:8px;}
  .choice-card{padding:10px 12px;border-radius:14px;min-height:0;gap:10px;}
  .choice-card .icon{width:34px;height:34px;border-radius:10px;font-size:1.05rem;}
  .choice-card h2{font-size:clamp(1.02rem,2vw,1.28rem);margin-bottom:4px;line-height:1.18;}
  .choice-card p{font-size:.86rem;line-height:1.42;}
  .footer-note{margin:7px 0 0;font-size:.78rem;line-height:1.35;}
  .bottom-actions{right:6px;bottom:6px;gap:5px;}
  .contact-btn,.bottom-actions .top-copyright{font-size:.72rem;padding:3px 8px;box-shadow:0 4px 10px rgba(22,32,51,.05);}
}