/* v6.156.0 アルバイト向け app TOP（app.grpkoshin.com）専用スタイル
 * docs/samples/sample1_v2.html を外出し。app-index.html のみが読み込むため
 * 他ページ（style.css / index.css）とクラス名が重複しても実行時に衝突しない
 * （局所完結・v6.140.0 のページ専用 CSS 方針）。 */
:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafd;
  --color-border: rgba(60,64,67,.14);
  --color-divider: rgba(60,64,67,.10);
  --color-text: #202124;
  --color-text-muted: #5f6368;
  --color-text-faint: #80868b;
  --color-primary: #1a73e8;
  --color-primary-dark: #1557b0;
  --color-primary-soft: rgba(26,115,232,.10);

  --shadow-1: 0 1px 2px rgba(60,64,67,.08), 0 1px 3px 1px rgba(60,64,67,.06);
  --shadow-2: 0 2px 6px rgba(60,64,67,.12), 0 8px 24px rgba(60,64,67,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: 'Noto Sans JP', 'Roboto', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
}

/* ===== 既存準拠ヘッダー（家マーク + ページタイトル + ログアウト） ===== */
.gs-topbar {
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.gs-brand { display: flex; align-items: center; gap: 12px; }

/* 虹色グラデ枠の家マーク */
.gs-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: conic-gradient(from 0deg at 50% 50%,
    #4285f4 0deg, #34a853 90deg, #fbbc04 180deg, #ea4335 270deg, #4285f4 360deg);
  padding: 2px;
  flex-shrink: 0;
}
.gs-logo-inner {
  width: 100%; height: 100%;
  background: #fff;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.gs-logo-inner svg { width: 22px; height: 22px; color: var(--color-primary); }

.gs-brand-name { font-size: 18px; font-weight: 500; color: var(--color-text); letter-spacing: -.01em; }

.icon-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color-border);
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.icon-btn:hover { background: #f8f9fa; box-shadow: var(--shadow-1); }
.icon-btn svg { width: 20px; height: 20px; }

/* ===== メイン ===== */
main { padding: 20px 16px 32px; max-width: 500px; margin: 0 auto; }

/* ===== 挨拶 ===== */
.greet { padding: 4px 4px 20px; }
.greet-text { font-size: 13px; color: var(--color-text-muted); margin-bottom: 4px; }
.greet-name { font-size: 20px; font-weight: 500; letter-spacing: -.01em; color: var(--color-text); }
.greet-meta { font-size: 12px; color: var(--color-text-faint); margin-top: 4px; }

/* ===== ヒーローカード（情報絞り込み版） ===== */
.hero-card {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  border-radius: 24px;
  padding: 22px 24px;
  box-shadow: 0 4px 16px rgba(26,115,232,.25);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.hero-card::after {
  content: ""; position: absolute; right: -50px; top: -30px;
  width: 160px; height: 160px; background: rgba(255,255,255,.08); border-radius: 50%;
}
.hero-card::before {
  content: ""; position: absolute; right: 24px; bottom: -40px;
  width: 100px; height: 100px; background: rgba(255,255,255,.04); border-radius: 50%;
}
.hero-label {
  font-size: 11px; opacity: .9; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500; margin-bottom: 8px; position: relative; z-index: 1;
}
.hero-time {
  font-size: 32px; font-weight: 500; letter-spacing: -.02em; margin-bottom: 6px;
  font-feature-settings: 'tnum'; position: relative; z-index: 1;
}
.hero-site { font-size: 15px; font-weight: 500; margin-bottom: 4px; position: relative; z-index: 1; }
.hero-loc {
  font-size: 12px; opacity: .85; display: flex; align-items: center; gap: 6px;
  position: relative; z-index: 1;
}
.hero-loc svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ===== プライマリCTA ===== */
.cta-primary {
  width: 100%; background: var(--color-primary); color: #fff; border: none;
  height: 56px; border-radius: 28px; font-size: 16px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 2px 6px rgba(26,115,232,.3); transition: all .15s;
  text-decoration: none; margin-bottom: 10px;
}
.cta-primary:hover { box-shadow: 0 4px 12px rgba(26,115,232,.4); transform: translateY(-1px); }
.cta-primary svg { width: 22px; height: 22px; }

/* ===== セカンダリ ===== */
.cta-secondary {
  width: 100%; background: #fff; color: var(--color-primary);
  border: 1px solid var(--color-border); height: 52px; border-radius: 26px;
  font-size: 15px; font-weight: 500; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  text-decoration: none; transition: all .15s;
}
.cta-secondary:hover { background: var(--color-primary-soft); }
.cta-secondary svg { width: 16px; height: 16px; }

/* ===== フッター（KOSHIN NEXT ブランドエリア） ===== */
.brand-footer {
  margin: 48px -16px 0;
  background: var(--color-surface-2);
  padding: 28px 24px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  text-align: center;
  border-top: 1px solid var(--color-divider);
}
.brand-footer-logo { height: 30px; width: auto; opacity: .92; margin-bottom: 12px; }
.brand-footer-company { font-size: 13px; font-weight: 500; color: var(--color-text); letter-spacing: -.01em; }
.brand-footer-meta { font-size: 11px; color: var(--color-text-faint); margin-top: 4px; line-height: 1.6; }
.brand-footer-version {
  margin-top: 10px; font-size: 10px; color: var(--color-text-faint);
  font-variant-numeric: tabular-nums; letter-spacing: .05em;
}

/* ===== 未認証ログインビュー（v6.156.3・grpkoshin.com の既存ログイン画面と完全同一・#92） =====
 *   public/css/index.css の .login-* / #loginBtn ブロック（L56-146）を**verbatim 転写**したもの。
 *   app-index.html は style.css / index.css を読み込まない（.hero-card 等が衝突するため）ので、
 *   見た目を一致させるには該当規則をこちらへコピーする（方針A・コピー方式）。
 *   将来 index.css のログイン画面を変更したら、#92 のとおりこのブロックも同じ変更を入れること。
 *   #loginBtn の display:flex/align/justify/gap は style.css の .btn 基底由来（app は .btn 未読込のため明示）。 */
.login-section {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100vh; padding: 40px 20px;
}
.login-container { width: 100%; max-width: 400px; }
.login-card {
  background: #ffffff !important;
  border: 1px solid rgba(60,64,67,.14) !important;
  box-shadow: 0 2px 6px rgba(60,64,67,.15), 0 8px 24px rgba(60,64,67,.10) !important;
  border-radius: 28px !important;
  padding: 40px 40px 36px !important;
}
.login-header { text-align: center; margin-bottom: 28px !important; }
.login-logo {
  width: 220px; height: auto;
  display: block;
  margin: 0 auto -2px !important;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.login-logo img { display: block; width: 100%; height: auto; }
.login-header .login-title { margin-top: 0 !important; }
.login-title {
  font-size: 20px !important; font-weight: 500 !important;
  color: #202124 !important; margin-bottom: 6px !important;
  letter-spacing: 0 !important;
}
.login-subtitle {
  font-size: 13px !important; color: #5f6368 !important;
  font-weight: 400 !important;
}
.login-card .form-group { margin-bottom: 16px; }
.login-card label {
  display: block; font-size: 12px; font-weight: 500;
  color: #5f6368 !important; margin-bottom: 6px !important;
}
.login-card input[type="text"],
.login-card input[type="password"] {
  width: 100% !important;
  height: 44px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(60,64,67,.14) !important;
  background: #ffffff !important;
  color: #202124 !important;
  font-size: 14px !important;
  padding: 0 18px !important;
  outline: none !important;
  box-shadow: 0 1px 2px rgba(60,64,67,.12), 0 1px 3px 1px rgba(60,64,67,.08) !important;
  transition: border-color 180ms, box-shadow 180ms !important;
}
.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 3px rgba(26,115,232,.10) !important;
}
.login-card .error-message {
  display: none;
  background: rgba(197,34,31,.08) !important;
  border: 1px solid rgba(197,34,31,.2) !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  color: #c5221f !important;
  margin-bottom: 14px !important;
  text-align: center;
}
#loginBtn {
  /* display 系は style.css の .btn 基底由来（app は .btn 未読込のため明示） */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 48px !important;
  border-radius: 9999px !important;
  border: none !important;
  background: #1a73e8 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin-top: 8px !important;
  box-shadow: 0 2px 6px rgba(60,64,67,.15), 0 8px 24px rgba(60,64,67,.10) !important;
  transition: background 180ms !important;
  padding: 0 !important;
}
#loginBtn:hover:not(:disabled) { background: #1558b0 !important; }
#loginBtn:disabled { opacity: .6; cursor: not-allowed; }
.login-footer {
  margin-top: 32px !important;
  font-size: 11px !important;
  color: #80868b !important;
  text-align: center;
}

/* ===== 初期ロード中の白画面防止: JS が loginView / portalView のどちらかを表示する ===== */
/*   両ビューは HTML 側で display:none 初期化済み。app-index.js が認証判定後に片方を表示する。 */