/* ============================================================
   カイロウドウケツ ｜ アプリ一覧 (apps.kairo-doketsu.com)
   - ヘッダー: ポータル www.kairo-doketsu.com のデザインをそのまま流用
   - 本体   : Claude Design「カイロウドウケツ_アプリ一覧」を静的CSSに再構成
   ブランド規約に関わる値は勝手に変えないこと（運用ガイド §7）
   ============================================================ */

:root{
  /* --- ポータル共通ブランド（ヘッダーで使用。変更しない） --- */
  --blue:#2A7FFF;
  --blue-deep:#1B5FD0;
  --blue-soft:#E4EEFF;
  --yellow:#FFDD55;
  --cream:#FAF9F5;
  --ink:#16315C;
  --ink-soft:#5A6E92;
  --shadow-sm:0 10px 24px -14px rgba(22,49,92,.30);
  --en:"Fredoka","Zen Maru Gothic",sans-serif;
  --jp:"Zen Maru Gothic",sans-serif;

  /* --- アプリ一覧ページ固有パレット --- */
  --paper:#f7f2e9;        /* ページ背景 */
  --surface:#fffdf8;      /* カード背景 */
  --line:#ebe1cf;         /* カード枠線 */
  --line-strong:#e0d5c0;  /* ボタン枠線 */
  --rule:#e7ddcb;         /* 区切り線 */
  --text:#3a352e;         /* 本文 */
  --text-mute:#6b6252;
  --text-soft:#8a8172;
  --text-faint:#a89b83;
  --accent:#e8734a;       /* アクセント（オレンジ） */
  --accent-deep:#c85a2f;
  --gold:#c99a5b;
  --foot:#f2ebde;

  --maxw:1180px;
  --nav-h:74px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--jp);
  background:var(--paper);
  color:var(--text);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ============================================================
   NAV — ポータルからの流用ブロック（ポータル index.astro と同一）
   ============================================================ */
header.nav{
  position:sticky;top:0;z-index:50;background:rgba(250,249,245,.86);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:2px solid rgba(22,49,92,.08);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;color:var(--ink);}
.brand img{width:42px;height:42px;border-radius:11px;box-shadow:var(--shadow-sm);}
.brand .bt{line-height:1.1;}
.brand .bt b{font-size:17px;}
.brand .bt span{display:block;font-family:var(--en);font-size:11px;letter-spacing:.16em;color:var(--ink-soft);}
.nav-links{display:flex;align-items:center;gap:6px;}
.nav-links a{
  font-weight:700;font-size:14px;padding:9px 15px;border-radius:999px;color:var(--ink);
  transition:background .15s,color .15s;
}
.nav-links a:hover{background:var(--blue-soft);color:var(--blue-deep);}
.nav-links a[aria-current="page"]{background:var(--blue-soft);color:var(--blue-deep);}
.nav-links .nav-cta{background:var(--ink);color:#fff;}
.nav-links .nav-cta:hover{background:var(--blue);color:#fff;}
.menu-btn{display:none;}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:52px 0 20px;}
.eyebrow{
  font-family:var(--en);font-size:12px;letter-spacing:.32em;color:var(--gold);
  font-weight:700;margin-bottom:12px;text-transform:uppercase;
}
.hero h1{
  font-family:var(--jp);font-weight:900;font-size:clamp(34px,5vw,54px);
  line-height:1.15;margin:0 0 16px;letter-spacing:.01em;
}
.hero .lead{max-width:640px;font-size:15.5px;line-height:1.85;color:var(--text-mute);}

.progress-row{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap;}
.progress-count{display:flex;align-items:baseline;gap:8px;}
.pc-num{font-family:var(--jp);font-weight:900;font-size:30px;color:var(--accent);}
.pc-unit{font-size:13px;color:var(--text-faint);font-weight:500;}
.progress-bar{
  flex:1;min-width:200px;max-width:340px;height:8px;background:var(--rule);
  border-radius:999px;overflow:hidden;
}
.progress-fill{
  height:100%;width:0;background:linear-gradient(90deg,#f0955f,var(--accent));
  border-radius:999px;transition:width .4s ease;
}

/* ============================================================
   FILTER BAR（ヘッダーの直下に貼り付く2段目）
   ============================================================ */
.filterbar{
  position:sticky;top:var(--nav-h);z-index:15;background:rgba(247,242,233,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);
}
.filterbar-inner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px;}
.genres{display:flex;gap:9px;flex-wrap:wrap;}
.spacer{flex:1;}
.g-btn{
  font-family:var(--jp);font-weight:700;font-size:13.5px;padding:8px 16px;border-radius:999px;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;
  white-space:nowrap;border:1px solid var(--line-strong);background:var(--surface);
}
.g-btn:hover{transform:translateY(-1px);}
.g-btn[aria-pressed="true"]{
  border-color:transparent;background:var(--accent);color:#fff;
  box-shadow:0 4px 12px rgba(232,115,74,.28);
}
.search{
  display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:999px;padding:8px 15px;min-width:200px;
}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,115,74,.14);}
.search-ic{color:#c0b299;font-size:15px;}
.search input{
  border:none;outline:none;background:transparent;font-size:14px;color:var(--text);
  width:100%;font-family:var(--jp);
}
.search input::-webkit-search-cancel-button{cursor:pointer;}

/* ============================================================
   RESULT / GRID
   ============================================================ */
.resultbar{padding-top:22px;padding-bottom:8px;}
.result-label{font-size:13px;color:var(--text-faint);font-weight:500;}
.gridwrap{padding-bottom:70px;display:block;}
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:16px;}

.app-card{
  position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;color:inherit;
  box-shadow:0 2px 10px rgba(58,53,46,.05);
  animation:floatIn .3s ease both;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
a.app-card:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(58,53,46,.12);border-color:var(--line-strong);}
a.app-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.app-card.is-soon{opacity:.72;}

.app-icon{
  position:relative;height:96px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.app-no{
  position:absolute;top:8px;left:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;font-size:11px;letter-spacing:.08em;color:rgba(58,53,46,.5);
}
.app-glyph{font-family:var(--jp);font-weight:900;font-size:26px;}
.app-icon img{width:72px;height:72px;border-radius:14px;object-fit:cover;}

.app-body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:7px;flex:1;}
.app-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.app-tag{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;}
.app-status{font-size:10px;font-weight:700;display:inline-flex;align-items:center;gap:3px;color:#4f7a3f;}
.app-status.is-soon{color:var(--text-faint);}
.app-card h3{font-family:var(--jp);font-weight:700;font-size:15px;margin:0;line-height:1.35;color:var(--text);}
.app-card p{margin:0;font-size:12px;line-height:1.6;color:var(--text-soft);}

@keyframes floatIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .app-card{animation:none;}
  .progress-fill{transition:none;}
  html{scroll-behavior:auto;}
}

.empty{padding:48px 0 20px;text-align:center;}
.empty-title{font-weight:900;font-size:18px;margin-bottom:6px;}
.empty-sub{font-size:13.5px;color:var(--text-soft);}
.empty-sub a{color:var(--accent-deep);text-decoration:underline;}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--rule);background:var(--foot);}
.foot-inner{padding-top:28px;padding-bottom:28px;font-size:12.5px;color:var(--text-faint);}
.foot-left{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap;}
.foot-nav a{font-weight:700;color:var(--text-mute);}
.foot-nav a:hover{color:var(--accent-deep);}
.foot-legal{margin-top:16px;font-size:11.5px;line-height:1.9;max-width:760px;color:var(--text-faint);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav-links{display:none;}
  .nav-links.open{
    display:flex;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;
    background:var(--cream);padding:14px 24px;border-bottom:2px solid rgba(22,49,92,.1);gap:6px;
  }
  .nav-links.open a{width:100%;}
  .menu-btn{
    display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;
    border:2.5px solid var(--ink);background:#fff;cursor:pointer;font-size:20px;color:var(--ink);
  }
  .hero{padding:36px 0 16px;}
  .filterbar-inner{padding-top:12px;padding-bottom:12px;}
  .search{width:100%;min-width:0;}
  .spacer{display:none;}
}
@media (max-width:520px){
  .app-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;}
  .wrap{padding:0 16px;}
}