/* Nateyote Studio — 共通スタイル
   色・余白は STUDIO_DESIGN.md に準拠（濃緑＋オレンジ）。
   アプリを増やすときは、このCSSはそのままで各ページを足すだけ。 */

:root{
  color-scheme: dark;
  --brand:#182821;      /* ブランド濃緑 */
  --bg:#0F1512;         /* 地 */
  --card:#1A211D;       /* カード面 */
  --card2:#232B26;      /* 入れ子 */
  --accent:#FFA826;     /* ブランド橙：獲得・強調 */
  --teal:#80CBC4;       /* 情報 */
  --text:#FFFFFF;
  --sub:#AFBAB4;
  --dim:#7C8A83;
  --line:#2C3630;
  --radius:14px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:linear-gradient(180deg,var(--brand) 0%, var(--bg) 60%) no-repeat;
  background-attachment:fixed;
  color:var(--text);
  font-family:-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
.wrap{ max-width:860px; margin:0 auto; padding:24px 20px 80px; }

/* ---- ヘッダー ---- */
header.site{ display:flex; align-items:center; gap:12px; padding:20px 0 28px; }
header.site a.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700; }
header.site .dot{ width:12px; height:12px; border-radius:3px; background:var(--accent); }
header.site nav{ margin-left:auto; display:flex; gap:16px; font-size:.92rem; }
header.site nav a{ color:var(--sub); text-decoration:none; }
header.site nav a:hover{ color:var(--accent); }

/* ---- 見出し ---- */
h1{ font-size:2rem; line-height:1.35; margin:.2em 0 .4em; }
h1 .hl{ color:var(--accent); }
h2{ font-size:1.25rem; margin:2em 0 .6em; }
h3{ font-size:1.05rem; margin:1.6em 0 .4em; }
p{ margin:.7em 0; }
.lead{ font-size:1.08rem; color:var(--sub); }
.meta{ color:var(--dim); font-size:.9rem; }
a{ color:var(--accent); }

/* ---- カード ---- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin:16px 0; }
.card h3{ margin-top:0; }
.note{ background:var(--card2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px; padding:12px 16px; }

/* ---- アプリ一覧 ---- */
.apps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:24px 0; }
.app{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; text-decoration:none; color:var(--text); display:block; transition:border-color .15s, transform .15s; }
.app:hover{ border-color:var(--accent); transform:translateY(-2px); }
.app .name{ font-weight:700; font-size:1.06rem; }
.app .desc{ color:var(--sub); font-size:.92rem; margin-top:6px; }
.app .soon{ color:var(--dim); font-size:.82rem; margin-top:10px; }
.badge{ display:inline-block; background:var(--card2); border:1px solid var(--line); color:var(--teal); font-size:.78rem; padding:2px 10px; border-radius:999px; margin-top:10px; }

/* ---- ボタン ---- */
.btn{ display:inline-block; background:var(--accent); color:#1A1205; font-weight:700; text-decoration:none; padding:12px 22px; border-radius:12px; margin:8px 8px 8px 0; }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--line); }

/* ---- スクショ ---- */
.shots{ display:flex; gap:12px; overflow-x:auto; padding:8px 0 16px; }
.shots img{ width:200px; border-radius:14px; border:1px solid var(--line); flex:0 0 auto; }

/* ---- 表 ---- */
table{ width:100%; border-collapse:collapse; margin:12px 0; font-size:.95rem; }
th,td{ border-bottom:1px solid var(--line); padding:10px 8px; text-align:left; vertical-align:top; }
th{ color:var(--sub); font-weight:600; width:34%; }

/* ---- 言語切替 ---- */
.langbar{ font-size:.9rem; margin-bottom:18px; color:var(--dim); }

/* ---- フッター ---- */
footer.site{ margin-top:56px; padding-top:24px; border-top:1px solid var(--line); color:var(--dim); font-size:.88rem; }
footer.site a{ color:var(--sub); text-decoration:none; margin-right:14px; }
footer.site a:hover{ color:var(--accent); }
.studio{ margin-top:14px; color:var(--dim); font-size:.82rem; letter-spacing:.08em; }

ul{ padding-left:1.3em; }
li{ margin:.35em 0; }
hr{ border:none; border-top:1px solid var(--line); margin:40px 0; }