/*
 * シフトリベラの見た目の土台。名刺とロゴ（apps/os-admin/public/brand/）から起こした。
 * 名刺の作り: ほぼ白の地 ／ 左にロゴ ／ 縦の仕切り線 ／ 右に社名と連絡先 ／
 *             右下に紺・シルバー・シアンのスウィープ（曲線の帯）。
 * このファイルは style.css のあとに読み込む。色と文字だけを上書きし、並びや間隔は style.css のまま。
 * 外部のフォントは読み込まない（CSP が style-src 'self' のため）。端末の明朝・ゴシックを使う。
 */

:root {
  /* --- 名刺とロゴから取った色 --- */
  --sl-navy-deep: #0a1c3c;   /* スウィープのいちばん濃いところ */
  --sl-navy: #13315f;        /* ロゴの主役の紺 */
  --sl-blue: #1558a8;        /* 中間の青 */
  --sl-cyan: #2ba8e2;        /* ロゴの明るいシアン */
  --sl-silver: #c3c9d1;      /* シルバー */
  --sl-silver-lt: #e6e9ed;
  --sl-silver-dk: #8d96a1;

  /* --- 文字 --- */
  /* 欧文は明朝体に字が無いので Georgia が当たり、和文は明朝に落ちる。名刺と同じ組み合わせになる。 */
  --sl-display: Georgia, "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --sl-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- 既存の画面が使っている名前を、名刺の色に置き換える --- */
  --ink: #10203c;
  --paper: #ffffff;
  --line: #dde3ea;
  --muted: #5e7086;
  --lime: var(--sl-blue);

  font-family: var(--sl-sans);
  color: var(--ink);
  background: #f6f8fa;
  letter-spacing: .01em;
}

/* ---------- 見出しは明朝 ---------- */
header h1,
.hero-panel h2,
.strategy-card > h2,
.wireframe-card h2,
.direction-meta h2,
.version-compare h3,
.design-preview h3,
.metrics strong,
.score,
.panel-item h3 {
  font-family: var(--sl-display);
  font-weight: 500;
  letter-spacing: -.02em;
}
.kicker {
  font-family: var(--sl-sans);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--sl-blue) !important;
}
/* 濃い紺の帯（.hero-panel）の中では、紺の小見出しは読めない。明るい色に戻す。 */
.hero-panel .kicker { color: #a9c0d6 !important; }

/* ---------- 左の柱 ---------- */
aside { background: linear-gradient(170deg, var(--sl-navy-deep), #0d2447 70%, #123058); }
.brand > b {
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-family: var(--sl-display);
  background: linear-gradient(150deg, var(--sl-navy), var(--sl-cyan));
}
.brand small, .identity small { color: #93a9c2; }
nav button, nav .nav-view { color: #a9c0d6; }
nav button:hover, nav button.active,
nav .nav-view:hover, nav .nav-view.active { background: rgba(255, 255, 255, .11); color: #fff; }
.identity { border-top-color: rgba(255, 255, 255, .16); }
.identity button { color: #93a9c2; }
.hearing-link { display: block; margin: 0 0 16px; padding: 12px 10px; border: 1px solid #718ba7; border-radius: 4px; color: #fff; font-size: 12px; line-height: 1.6; text-decoration: none; }
.hearing-link:hover { background: #234263; }
.hearing-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hearing-short { display: none; }
@media (min-width: 601px) and (max-width: 880px) {
  .hearing-link { padding: 10px 0; text-align: center; font-size: 10px; }
  .hearing-label { display: none; }
  .hearing-short { display: inline; }
}

/* ---------- 押す部品 ---------- */
.primary { background: var(--sl-navy); }
.primary:hover:not(:disabled) { background: var(--sl-navy-deep); }
.state-pill { background: var(--sl-blue); color: #fff; }
.hero-panel { background: linear-gradient(120deg, var(--sl-navy-deep) 0%, #15386a 58%, var(--sl-blue) 140%); }
.decision.locked { background: #e9f1fa; border-color: #93bbe2; }
.axis-entry { background: linear-gradient(120deg, var(--sl-navy), var(--sl-blue) 60%, var(--sl-cyan)); color: #fff; }
.row button.primary, .panel-item .controls button.primary { background: var(--sl-navy); }
.toast { background: var(--sl-navy-deep); }
.terms-form button, .generate-form button { background: var(--sl-navy); border-color: var(--sl-navy); }
.generate-form input[type="checkbox"] { accent-color: var(--sl-blue); }

/* ====================================================================
 * トップ（ログイン）画面
 * 名刺をそのまま画面に起こしたもの。
 * 左にロゴ、縦の仕切り、右に言葉。右下にスウィープ。
 * ロゴが最初にふわりと現れ、続いて仕切り線が伸び、言葉が順に出る。
 * ==================================================================== */

.login {
  position: relative;
  display: block;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

/* 右下のスウィープ。図形（SVG）なので、どの大きさでも輪郭が鈍らない。 */
.login-sweep {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(66vw, 1060px);
  aspect-ratio: 1000 / 620;
  background: url("/brand/sl-sweep.svg") right bottom / 100% 100% no-repeat;
  pointer-events: none;
  animation: sl-sweep-in 1.5s cubic-bezier(.22,.8,.3,1) .15s both;
}

.login-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  justify-items: stretch;
  align-items: center;
  grid-template-columns: minmax(0, auto) 1px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(32px, 6vw, 88px) clamp(26px, 6vw, 96px) clamp(120px, 20vw, 300px);
  max-width: 1500px;
  margin: 0 auto;
}

/* --- ロゴ（ヒーロー） --- */
.login-mark { position: relative; display: block; justify-self: start; }
.login-mark img {
  display: block;
  width: clamp(180px, 23vw, 360px);
  height: auto;
  animation: sl-mark-in 1.6s cubic-bezier(.2,.75,.25,1) both;
}
/* ロゴの後ろでひと呼吸だけ光る */
.login-mark i {
  position: absolute;
  inset: -22% -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43,168,226,.16), rgba(43,168,226,0) 72%);
  animation: sl-glow 3s ease-out .4s both;
  pointer-events: none;
  z-index: -1;
}

/* --- 縦の仕切り（名刺と同じ） --- */
.login-divider {
  width: 1px;
  height: min(62%, 420px);
  justify-self: center;
  background: linear-gradient(180deg, transparent, var(--sl-silver) 18%, var(--sl-silver) 82%, transparent);
  animation: sl-divider 1.1s cubic-bezier(.22,.8,.3,1) .7s both;
}

.login-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  max-width: 44em;
}
.login-kicker {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  font: 700 11px/1.4 var(--sl-sans);
  letter-spacing: .22em;
  color: var(--sl-blue);
  animation: sl-rise .9s cubic-bezier(.22,.8,.3,1) .85s both;
}
.login-title {
  margin: 0 0 clamp(16px, 2.2vw, 24px);
  font-family: var(--sl-display);
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.24;
  letter-spacing: -.03em;
  color: var(--sl-navy);
  animation: sl-rise .9s cubic-bezier(.22,.8,.3,1) 1s both;
}
.login-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--sl-navy), var(--sl-blue) 50%, var(--sl-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-lead {
  margin: 0;
  max-width: 34em;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 2;
  color: #3c536e;
  animation: sl-rise .9s cubic-bezier(.22,.8,.3,1) 1.15s both;
}
.login-rule {
  width: 78px;
  height: 2px;
  margin: clamp(22px, 3vw, 34px) 0 clamp(20px, 2.6vw, 28px);
  border: 0;
  background: linear-gradient(90deg, var(--sl-navy), var(--sl-cyan));
  animation: sl-rule 1s cubic-bezier(.22,.8,.3,1) 1.3s both;
}
.login #google-button {
  margin: 0 0 16px;
  animation: sl-rise .9s cubic-bezier(.22,.8,.3,1) 1.4s both;
}
.login-note {
  font-size: 12px;
  color: #74879c;
  animation: sl-rise .9s cubic-bezier(.22,.8,.3,1) 1.55s both;
}

@keyframes sl-mark-in {
  from { opacity: 0; transform: translateY(26px) scale(.93); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes sl-glow {
  0%   { opacity: 0; transform: scale(.65); }
  45%  { opacity: 1; transform: scale(1); }
  100% { opacity: .3; transform: scale(1.06); }
}
@keyframes sl-divider {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: none; }
}
@keyframes sl-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sl-rule {
  from { opacity: 0; transform: scaleX(0); transform-origin: left; }
  to   { opacity: 1; transform: none; transform-origin: left; }
}
@keyframes sl-sweep-in {
  from { opacity: 0; transform: translate(42px, 42px); }
  to   { opacity: 1; transform: none; }
}

/* 画面の動きを減らす設定の人には、動かさずそのまま出す。 */
@media (prefers-reduced-motion: reduce) {
  .login-sweep, .login-mark img, .login-mark i, .login-divider, .login-kicker,
  .login-title, .login-lead, .login-rule, .login #google-button, .login-note {
    animation: none;
  }
  .login-mark i { opacity: .3; }
}

@media (max-width: 900px) {
  .login-stage {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: clamp(22px, 5vw, 40px);
    padding: clamp(36px, 8vw, 64px) 24px clamp(118px, 26vw, 220px);
  }
  .login-divider {
    width: min(220px, 60%);
    height: 1px;
    justify-self: start;
    background: linear-gradient(90deg, var(--sl-silver), transparent);
  }
  .login-sweep { width: min(132vw, 900px); }
}

/* 士業連携の資料入口と、OS共通メニュー。既存の認証と資料権限を使用する。 */
.brand-logo{width:44px;height:44px;object-fit:contain;flex-shrink:0;background:#fff;border-radius:10px;padding:4px}
.resource-icon{width:22px;height:22px;flex-shrink:0}
#nav .axis-entry{display:flex;align-items:center;gap:10px;min-height:52px;padding:12px;margin-bottom:10px;border:1px solid #4d79a3;border-radius:10px;font-size:13px;line-height:1.5;background:linear-gradient(115deg,#163764,#145d9b);color:#fff}
#nav .axis-entry:hover,#nav .axis-entry.active{background:#1b649f;border-color:#73c9ef}
#nav a:focus-visible,.hub-card:focus-visible{outline:3px solid #1f9dcc;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.alliance-hub{max-width:1200px;margin:auto;color:#122b4b}
.alliance-hub header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:26px}
.alliance-hub h1{font-family:var(--sl-sans);font-size:clamp(28px,3.6vw,42px);font-weight:750;margin:8px 0 12px;letter-spacing:.02em}
.hub-lead{font-size:15px;line-height:1.8;margin:0;color:#52677e}
.hub-private{display:inline-flex;white-space:nowrap;font-size:11px;border:1px solid #b6c9dc;padding:8px 12px;border-radius:30px;color:#385975;background:#edf4fa}
.hub-guide{display:flex;gap:16px;flex-wrap:wrap;padding:18px 22px;border-left:4px solid #219bd2;background:#e9f2f9;border-radius:0 10px 10px 0;font-size:13px;line-height:1.8}
.hub-guide strong{color:#125a94}
.hub-section{margin:34px 0}
.hub-section h2{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:700;letter-spacing:.02em;margin:0 0 16px}
.hub-section h2>span{font-size:12px;color:#226ea6;border-bottom:2px solid #279bd3;padding:5px 0}
.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hub-card{display:flex;align-items:center;gap:14px;text-decoration:none;color:#163253;padding:20px;border:1px solid #ccdae7;background:#fff;border-radius:12px;min-width:0;transition:border-color .15s,background .15s}
.hub-card:hover{background:#f3f8fc;border-color:#257cb4}
.hub-card>span:nth-child(2){flex:1;min-width:0}
.hub-card strong{display:block;font-size:15px;line-height:1.5}
.hub-card small{display:block;margin-top:6px;font-size:12px;line-height:1.8;color:#5c6f83}
.hub-card>.resource-icon{width:16px;height:16px;color:#6b89a3}
.hub-card-icon{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border-radius:10px;background:#edf4fb;color:#1767a2}
.hub-hint,.hub-footnote{font-size:12px;line-height:1.9;color:#5c6f83}
.hub-footnote{border-top:1px solid #ccdae7;padding-top:20px;margin-top:32px}
@media(min-width:601px) and (max-width:880px){#nav .axis-entry{padding:12px;justify-content:center}#nav .axis-entry span{display:none}.brand-logo{width:38px;height:38px}.hub-grid{grid-template-columns:1fr}.alliance-hub header{flex-wrap:wrap}}
@media(max-width:600px){#nav .axis-entry{flex-shrink:0;margin:0 6px 0 0;min-height:44px;font-size:12px}.app aside .brand{display:flex;margin:0 0 12px;gap:10px}.app aside .brand span{display:block}.brand-logo{width:36px;height:36px}.app aside .brand small{font-size:10px}.hub-grid{grid-template-columns:1fr}.alliance-hub header{flex-wrap:wrap;gap:12px}.hub-card{padding:16px;gap:12px}.hub-section{margin:26px 0}.hub-section h2{font-size:17px}.hub-guide{padding:14px;gap:6px}.hub-private{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hub-card{transition:none}}
/* Alococo nail（#/alococo）: 月次指標のカードと対象月 */
.alococo-kpi .hub-card{cursor:default}
.alococo-kpi .hub-card>span{flex:1;min-width:0}
.alococo-kpi .hub-card strong{font-size:22px;line-height:1.3;margin:4px 0}
.alococo-month label{display:inline-flex;align-items:center;gap:8px}
.alococo-month input{font:inherit;padding:6px 10px;border:1px solid #ccdae7;border-radius:8px;background:#fff}
.alliance-hub header a.hub-private{text-decoration:none}

/* 統合メニュー（アプリ一覧）: 名前の下に1行説明、準備中はリンクにせず薄く出す。docs/UNIFIED_APP_MENU.md */
#nav .axis-entry{min-height:48px;padding:9px 12px;margin-bottom:6px}
#nav .axis-entry>span{display:block;min-width:0;font-weight:700}
#nav .axis-entry small{display:block;margin-top:1px;font-size:11px;font-weight:400;line-height:1.45;color:#d3e4f4}
#nav .entry-badge{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid currentColor;border-radius:999px;font-size:10px;font-style:normal;font-weight:600;line-height:1.6;vertical-align:1px}
#nav .axis-entry.soon{background:transparent;border-style:dashed;border-color:#5b7186;color:#aebccb;cursor:default}
#nav .axis-entry.soon small{color:#93a3b3}
/* 区分見出しは押すと開閉する（閉じた区分は端末が覚える） */
#nav button.nav-section{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 12px);min-height:32px;margin:10px 6px 2px;padding:4px 6px;border:0;border-radius:6px;background:transparent;font:inherit;font-size:10px;font-weight:800;letter-spacing:.16em;color:#93a09b;text-align:left;cursor:pointer}
#nav button.nav-section::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s}
#nav button.nav-section[aria-expanded="false"]::after{transform:rotate(-45deg)}
#nav button.nav-section:hover{color:#d3e4f4}
#nav button.nav-section:focus-visible{outline:3px solid #1f9dcc;outline-offset:2px}
#nav .nav-group.closed{display:none}
@media(prefers-reduced-motion:reduce){#nav button.nav-section::after{transition:none}}
@media(max-width:600px){#nav .axis-entry small,#nav .axis-entry.soon,#nav .nav-section{display:none}#nav button.nav-section{display:none}#nav .nav-group,#nav .nav-group.closed{display:contents}}

/* 商品紹介（#/catalog）。docs/PRODUCT_CATALOG.md */
.catalog-card{align-items:flex-start}
.catalog-card:hover{background:#fff;border-color:#ccdae7}
.catalog-tag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;font-size:11px;font-style:normal;font-weight:600;line-height:1.7;vertical-align:1px;white-space:nowrap}
.catalog-tag.live{background:#e3f4ea;color:#17603a}
.catalog-tag.next{background:#eef2f6;color:#4a5d70}
.hub-guide a{color:#125a94;font-weight:600}