/* ===========================================================================
 * shared.css — portal.html / auth.html / admin.html 共通の CSS
 *
 * 含む内容:
 *   - :root 変数 (色・サイズトークン)
 *   - reset + body
 *   - .app-shell / .app-top / .app-menu / .app-content の骨格レイアウト
 *   - body.unauth / body.authed の構造分岐
 *   - [data-view][hidden] view 切替制御
 *   - .btn 系 / .card / .msg 系 / .form-group / .fw / .fb の共通コンポーネント
 *   - レスポンシブ media query (モバイル burger を含む共通骨格部分のみ)
 *
 * 含まない内容 (各 HTML に残す):
 *   - Landing 専用 (.hero, .features, .cta-section 等) → portal.html
 *   - 認証フォーム専用 (.auth-page, .auth-card, .auth-switch) → auth.html
 *   - dashboard 専用 (.storage-*) → portal.html
 *   - admin 専用 (.admin-table, .action-icon-btn) → admin.html
 *   - docs ビューア専用 (.docs-empty, .doc-md *) → admin.html
 * =========================================================================== */

/* ===== :root 変数 + reset + body ===== */
:root {
  --ink:#1a1a2e; --ink-soft:#4a4a6a; --ink-muted:#8888a8;
  --surface:#fafafa; --surface-warm:#f5f3f0;
  --accent:#2d5a9e; --accent-light:#e8f0fe; --accent-hover:#1e4280;
  --border:#e0ddd8; --radius:10px;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.06); --shadow-md:0 4px 20px rgba(0,0,0,0.08); --shadow-lg:0 12px 40px rgba(0,0,0,0.10);
  --green:#2e7d32; --green-bg:#e8f5e9; --red:#c62828; --red-bg:#ffebee;
  --top-h:48px; --menu-w:240px; --content-head-h:48px;
  --bg-top:#f1efea; --bg-menu:#faf7f1; --bg-content-head:#ffffff; --bg-main-body:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{font-family:'Noto Sans JP','DM Sans',sans-serif;color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased}

/* ===== 骨格レイアウト: .app-shell / .app-top ===== */
.app-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.app-top{height:var(--top-h);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--bg-top);border-bottom:1px solid var(--border);overflow:hidden}
.app-top-left{display:flex;align-items:center;gap:12px}
.app-top-right{display:flex;align-items:center;gap:8px}
.app-top-burger{display:none;width:36px;height:36px;border:1px solid var(--border);background:#fff;border-radius:6px;cursor:pointer;font-size:18px;align-items:center;justify-content:center}
.app-top-logo{font-family:'DM Sans',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);letter-spacing:-0.01em;cursor:pointer}
.app-top-logo span{color:var(--accent)}
.app-top-email{font-size:0.85rem;color:var(--ink-soft);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== 骨格レイアウト: .app-main / .app-menu ===== */
.app-main{flex:1;min-height:0;display:flex;flex-direction:row;overflow:hidden}
.app-menu{width:var(--menu-w);flex-shrink:0;min-height:0;display:flex;flex-direction:column;background:var(--bg-menu);border-right:1px solid var(--border);overflow:hidden}
.menu-top{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);overflow:hidden}
.menu-logo{font-family:'DM Sans',sans-serif;font-weight:700;font-size:1rem}
.menu-logo span{color:var(--accent)}
.menu-close{display:none;width:28px;height:28px;border:1px solid var(--border);background:#fff;border-radius:4px;cursor:pointer;font-size:16px;line-height:1}
.menu-mid{flex:1;min-height:0;overflow-y:auto;padding:8px 0}
.menu-item{display:flex;align-items:center;height:34px;padding:0 16px;color:var(--ink);text-decoration:none;font-size:0.88rem;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:inherit}
.menu-item:hover{background:var(--accent-light);color:var(--accent)}
.menu-item.is-active{background:var(--accent-light);color:var(--accent);font-weight:600}
.menu-section-label{padding:10px 16px 4px;font-size:0.7rem;font-weight:600;color:var(--ink-muted);text-transform:uppercase;letter-spacing:0.06em}
.menu-bot{flex-shrink:0;padding:12px 16px;border-top:1px solid var(--border);overflow:hidden}
.menu-bot .btn{width:100%;justify-content:center}
.menu-overlay{display:none}

/* ===== 骨格レイアウト: .app-content / .content-head / .main-body ===== */
.app-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg-content-head);overflow:hidden}
.content-head{height:var(--content-head-h);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border);overflow:hidden;background:var(--bg-content-head)}
.content-head-left{display:flex;align-items:center;gap:12px;min-width:0}
.content-head-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.content-title{margin:0;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main-body{flex:1;min-height:0;overflow:auto;background:var(--bg-main-body)}
.page-inner{max-width:960px;margin:0 auto;padding:24px}

/* ===== 構造分岐 (公開 vs 認証後) + view 切替 ===== */
body.unauth .app-menu{display:none}
body.unauth .content-head{display:none}
body.unauth .app-top-email{display:none}

/* view 切替 ([hidden] 属性を採用、.view/.view.active は廃止) */
[data-view][hidden]{display:none}

/* ===== 共通: ボタン .btn ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:var(--radius);font-family:inherit;font-size:0.85rem;font-weight:500;cursor:pointer;transition:all 0.15s ease;text-decoration:none;border:none;white-space:nowrap;line-height:1.4}
.btn-ghost{background:transparent;color:var(--ink-soft)}
.btn-ghost:hover{background:var(--accent-light);color:var(--accent)}
.btn-outline{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.btn-outline:hover{background:var(--accent);color:#fff}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-md)}
.btn-lg{padding:12px 28px;font-size:0.95rem;border-radius:12px}
.btn:disabled{opacity:0.6;cursor:not-allowed;background:#94a3b8 !important;color:#fff !important;box-shadow:none}

/* ===== 共通: フォーム .form-group / メッセージ .msg / カード .card ===== */
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:0.85rem;font-weight:500;color:var(--ink-soft);margin-bottom:6px}
.form-group input{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius);font-family:inherit;font-size:0.95rem;transition:border-color 0.2s;outline:none}
.form-group input:focus{border-color:var(--accent)}

.msg{padding:12px 16px;border-radius:var(--radius);font-size:0.86rem;margin-bottom:18px;line-height:1.6}
.msg-error{background:var(--red-bg);color:var(--red)}
.msg-success{background:var(--green-bg);color:var(--green)}

.card{background:#fff;border-radius:14px;padding:24px 24px;box-shadow:var(--shadow-sm);border:1px solid var(--border);margin-bottom:20px}
.card h2{font-size:1.05rem;font-weight:700;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.card p{line-height:1.7}
.form-hint{font-size:0.8rem;color:var(--ink-muted);margin-top:6px}
.card-actions{display:flex;justify-content:flex-end;margin-top:20px}

/* ===== 共通: フィールドウィジェット枠 .fw / .fb =====
 * 注: fwRender / fwToggleMask / fwToggleEdit / fwCopy などの JS は
 *     用途が portal の dashboard と admin の config で異なるため、
 *     共通モジュールには置かず各 HTML 側に残す。ここでは枠の見た目のみ。
 */
.fw{display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;padding:2px 4px 2px 12px;background:#fff;margin-bottom:8px}
.fw .fw-in{flex:1;border:none;outline:none;font-size:0.88rem;padding:10px 4px;background:transparent;font-family:'DM Sans',monospace;color:var(--ink);min-width:0}
.fw .fw-in[readonly]{color:var(--ink-muted)}
.fw .fw-in:not([readonly]){background:#fffbeb;border-radius:4px}
.fw .fw-in::placeholder{color:#b0b8c4}
.fb{background:none;border:1px solid var(--border);border-radius:6px;cursor:pointer;padding:0;color:#9ca3af;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;transition:background 0.15s;margin-left:2px;flex-shrink:0}
.fb:hover{background:#f1f5f9;color:#374151}
.fb.active{background:#dbeafe;color:#2563eb;border-color:#93c5fd}

/* ===== レスポンシブ (モバイル境界 767px、メニュー幅 280px、共通骨格部分のみ) ===== */
@media(max-width:767px){
  .app-top-burger{display:inline-flex}
  body.authed .app-menu{position:fixed;top:var(--top-h);bottom:0;left:0;width:280px;transform:translateX(-100%);transition:transform 0.2s ease;z-index:50;box-shadow:0 0 24px rgba(0,0,0,0.15)}
  body.authed.menu-open .app-menu{transform:translateX(0)}
  .menu-close{display:inline-flex}
  .menu-overlay{position:fixed;top:var(--top-h);left:0;right:0;bottom:0;background:rgba(0,0,0,0.35);display:none;z-index:40}
  body.authed.menu-open .menu-overlay{display:block}
  .btn-lg{width:100%;max-width:300px}
  .page-inner{padding:16px}
  .app-top-email{display:none}
}