/* ========================================= v1.css (clean, minimal) - 初期は data-auth-content を非表示 - user / guest 判定完了で開く - flags 未到着時は “ベース行（空値）” のみ表示 ========================================= */ /* 1) コンテナ可視化条件（初期は隠す → 判定後に開く） */ [data-auth-content] { display: none !important; } html.auth-ready [data-auth-content] { display: block !important; } /* 2) ステータス別ゲート（土台は非表示） */ [data-auth-guest], [data-auth-user] { display: none !important; } html.auth-signed-out [data-auth-guest] { display: block !important; } /* ゲスト時：マスク指定がない user 向けコンテンツは従来どおり非表示 */ html.auth-signed-out [data-auth-user]:not([data-auth-guest-mask]) { display: none !important; } /* ゲスト時：data-auth-guest-mask 付きの user 向けコンテンツは 表示しつつ薄くし、クリック等の操作を無効化する */ html.auth-signed-out [data-auth-user][data-auth-guest-mask] { display: block !important; opacity: .45; /* 見た目を薄く */ pointer-events: none; /* マウス操作を無効化 */ } /* サインイン中の “ベース行（空値）” は常に出す */ html.auth-signed-in [data-auth-user=""] { display: block !important; } /* flags 未到着の間は条件付き（空値以外）を隠す → フリッカー防止 */ html.auth-signed-in:not(.auth-flags-ready) [data-auth-user]:not([data-auth-user=""]) { display: none !important; } /* 3) flags 到着後：data-* 条件表示（） */ html.auth-signed-in.auth-flags-ready[data-entitled="1"] [data-auth-user~="entitled"] { display: block !important; } html.auth-signed-in.auth-flags-ready[data-entitled="0"] [data-auth-user~="!entitled"] { display: block !important; } html.auth-signed-in.auth-flags-ready[data-customer="1"] [data-auth-user~="customer"] { display: block !important; } html.auth-signed-in.auth-flags-ready[data-customer="0"] [data-auth-user~="!customer"] { display: block !important; } html.auth-signed-in.auth-flags-ready[data-owner="1"] [data-auth-user="owner"] { display: block !important; } html.auth-signed-in.auth-flags-ready[data-owner="0"] [data-auth-user="!owner"] { display: block !important; } /* 4) ユーティリティ */ .auth-hidden { display: none !important; } html.auth-scroll-lock { overflow: hidden; } /* 5) モーダル最低限 */ [data-auth-modal="1"] { position: fixed; inset: 0; z-index: 2147483600; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); isolation: isolate; } [data-auth-modal="1"], [data-auth-modal="1"] *, [data-auth-modal="1"] *::before, [data-auth-modal="1"] *::after { box-sizing: border-box; } .auth-modal__box { width: min(480px, 92vw); max-width: 92vw; max-height: min(88vh, 720px); overflow: auto; background: #fff; color: #111; box-shadow: 0 18px 60px rgba(0, 0, 0, .25); padding: 24px 22px 20px; position: relative; font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; text-align: justify; } .auth-modal__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #ddd; border-radius: 999px; background: #fff; cursor: pointer; font-size: 14px; color: #333; } [dir="rtl"] .auth-modal__close { right: auto; left: 10px; } .auth-modal__label { display: block; margin: 0 0 6px; font-size: 13px; color: #333; } .auth-modal__input { display: block; width: 100%; padding: 12px; border: 1px solid #dcdcdc; font-size: 18px; outline: none; } .auth-modal__input:hover { border-color: #c7c7c7; } .auth-modal__btn { display: block; width: 100%; margin-top: 12px; padding: 12px 14px; border: 1px solid #111; background: #111; color: #fff; font-weight: 600; font-size: 15px; } .auth-modal__btn--ghost { background: #fff; color: #111; border: 1px solid #ccc; font-weight: 600; font-size: 14px; margin-top: 28px; } .auth-modal__input[disabled], .auth-modal__btn[disabled] { opacity: .5; cursor: not-allowed; } .auth-modal__title { margin: 0 0 12px; font-size: 20px; font-weight: 700; } .auth-modal__lead { margin: 0 0 16px; font-size: 14px; color: #555; } .auth-section { margin-top: 8px; } .auth-center { text-align: center; } .auth-modal__err { margin: 10px 0 0; color: #b00020; font-size: 13px; } .auth-modal__success { margin: 10px 0 0; color: #0a7a34; font-size: 13px; } .auth-icon-ring { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; border: 2px solid currentColor; margin-top: 8px; margin-bottom: 6px; } .auth-icon-ring+.auth-modal__lead { margin-top: 14px; } .auth-icon--success { color: #0a7a34; } .auth-icon--warn { color: #b45309; } .auth-modal__note { margin: 26px 0 0 0; font-size: 12px; color: #777; } .auth-modal__terms { margin: 14px 0 0 0; font-size: 12px; color: #777; } .auth-modal__terms a { color: inherit; text-decoration: underline; } .auth-brand { margin-top: 26px; display: flex; justify-content: center; opacity: .85; } .auth-brand a { text-decoration: none; } .mt-14 { margin-top: 14px; } .mt-26 { margin-top: 26px; } /* 6) ネットワーク “トースト” */ :root { --auth-net-fg: #fff; --auth-net-bg-down: #b91c1c; --auth-net-btn-bg: rgba(255, 255, 255, .06); --auth-net-btn-bg-hover: rgba(255, 255, 255, .16); --auth-net-btn-border: rgba(255, 255, 255, .35); } #auth-net-banner { position: fixed; bottom: calc(16px + env(safe-area-inset-bottom) + var(--auth-footer-h, 0px)); right: calc(16px + env(safe-area-inset-right)); z-index: 2147483601; display: none; max-width: min(92vw, 360px); padding: 10px 12px; color: var(--auth-net-fg); background: var(--auth-net-bg-down); background-image: linear-gradient(to bottom, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0)); border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; align-items: center; gap: 10px; } html[dir="rtl"] #auth-net-banner { right: auto; left: calc(16px + env(safe-area-inset-right)); } html.auth-offline #auth-net-banner, html.auth-auth-down #auth-net-banner { display: flex; } #auth-net-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } #auth-net-banner button { margin-left: 10px; height: 28px; padding: 0 12px; display: none; align-items: center; justify-content: center; line-height: 1; border: 1px solid var(--auth-net-btn-border); background: var(--auth-net-btn-bg); color: var(--auth-net-fg); } html.auth-auth-down #auth-net-banner button { display: inline-flex; } /* ========================================================= Footer (no JS style injection) - fixed時はスペーサー(#auth-sdk-footer-spacer)で下余白を確保 ========================================================= */ #auth-sdk-footer { font: 12px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; opacity: .8; padding: 12px 16px; text-align: center; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; } #auth-sdk-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } #auth-sdk-footer .auth-footer__sep { opacity: .6; } #auth-sdk-footer.auth-footer--fixed { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; backdrop-filter: saturate(1.2) blur(6px); background: rgba(255, 255, 255, .85); padding-bottom: calc(12px + env(safe-area-inset-bottom)); } /* fixedフッター分のスクロール余白 */ #auth-sdk-footer-spacer { height: var(--auth-footer-h, 0px); } /* brand image (inline style禁止のためCSSで) */ .auth-brand__img { width: 160px; max-width: 160px; height: auto; display: block; }