/*
* TOKYO BABE 毎日チェックシート — 共通スタイル（assets/style.css）
* スタッフ画面・管理画面の両方で読み込む。画面固有のものは staff.css / admin.css へ。
*
* ── フォント（各 HTML の に入れる。@import は使わない）──────────────
*
*
*
*
* ── クラス一覧 ─────────────────────────────────────────────────────────
* 基本・レイアウト
* .container / .container-wide 本文の幅（640px / 960px）＋左右16px。
* .page .container ＋上下の余白（ページ本体に1つ）。.page.with-actionbar で下部固定バーぶん空ける
* .stack / .stack-sm / .stack-lg 子要素を縦に等間隔で並べる
* .row / .row-between / .grow 横並び（折り返しあり）／両端寄せ／伸びる子
* .section / .section-head / .section-title ページ内の区切り・見出し行・明朝の小見出し
* .split / .split-aside PC（900px〜）で本文＋右カラム（項目編集のプレビュー等）
* .divider 細い区切り線
* 文字
* .wordmark > img.wordmark-img 本物のロゴ画像（上部バー用。assets/logo-tokyo-babe-white.png）
* .eyebrow (.has-line) 金の小さい英字見出し（TODAY 等）。.has-line で左に細線
* .page-head / .page-title / .page-sub ページ見出しのまとまり／明朝の大見出し／補足
* .text-muted .text-small .text-ng .text-gold .text-center .num .nowrap .truncate .link
* 上部バー
* .topbar > .topbar-inner > .wordmark + .topbar-label + .topbar-actions > .topbar-btn / .topbar-select / .topbar-store
* .topbar-btn > span.topbar-name（長い名前を … で切る）＋ .icon
* スタッフ画面は にすると PC で本文と同じ幅にそろう
* カード
* .card / .card-head / .card-title / .card-flush（余白なし・一覧用）/ .card-soft（ベージュ地）
* .card-accent（金の枠・返信のお知らせ等）/ .card-link（押せるカード）
* ボタン
* .btn + .btn-primary（こげ茶）/ .btn-secondary（枠線）/ .btn-ghost / .btn-danger（取り返しのつかない操作の確定だけ）
* サイズ .btn-sm / .btn-lg / .btn-block / .btn-icon、並べる .btn-row
* 状態 :disabled / [aria-disabled="true"]（押せない見た目だがクリックは拾える）/ .is-loading（Babe.busy が付ける）
* フォーム
* .field > .label (+ .label-optional) + .input / .textarea / .select + .help / .field-error / .counter
* .field.is-invalid または [aria-invalid="true"] で枠が赤
* .input-wrap > .input + button.pw-toggle > .pw-toggle-text（表示／隠す。切り替えは common.js が自動）
* .check（チェックボックス）/ .switch（オンオフ）
* 切り替え
* .segmented > button.segmented-item（.is-active か aria-pressed="true"）
* > label.segmented-item > input[type=radio].sr-only + span
* .subnav > .subnav-item.is-active（設定のサブメニュー。横スクロール）
* バッジ・状態
* .badge + .badge-important（金・重要）/ .badge-manager（店長）/ .badge-owner / .badge-staff / .badge-deleted（削除済み・退職）
* .badge-count（未読の数字）
* .status + .status-done（提出済み）/ .status-off（休み）/ .status-missing（未提出）/ .status-today（今日）/ .status-grace（登録日）
* 一覧
* ul.list > li.list-row > .list-main(.list-title + .list-sub) + .list-trail
* a/button.list-row.list-row-link（行ごと押せる。末尾に .list-chevron）/ .list-group-title（店舗名などの区切り）
* 数字・グラフ
* .progress > .progress-bar（style="width:40%"）/ .progress-lg / .progress-gold
* .tally > .tally-label + .tally-num + .tally-sep + .tally-den + .tally-unit（提出 8 / 12人）
* .ring（style="--p:67"）> .ring-label（円の進捗）/ .meter（リング＋数字の横並び）
* .stat-grid > .stat > .stat-label + .stat-value(.stat-unit) + .stat-sub / .stat.is-ng
* .barrow > .barrow-label + .barrow-value + .barrow-track > .barrow-fill + .barrow-sub / .barrow.is-ng / button.barrow.barrow-link
* 固定バー・骨組み
* .actionbar > .actionbar-inner > .actionbar-status(.actionbar-text + .progress) + .btn（下部固定・セーフエリア対応）
* スマホで文字入力中（html.is-typing）は .actionbar と .tabbar を隠す
* .shell > .topbar + nav.tabbar > .tabbar-item(.icon + .tabbar-label + .badge-count) + main.shell-main
* スマホは下部タブ、900px 以上は左の縦メニュー
* 重なるもの（common.js が作る）
* .toast-region > .toast.toast-ok|error|info（Babe.toast）
* .sheet-root > .sheet-backdrop + .sheet > .sheet-handle + .sheet-head(.sheet-title + .sheet-close) + .sheet-body + .sheet-foot
* .confirm-text / .confirm-actions（Babe.confirm）
* 状態表示
* .empty > .empty-icon + .empty-title + .empty-text（データが無いとき）
* .spinner (.spinner-lg) / .loading（中央に回転＋文言）/ .skeleton .skeleton-line .skeleton-title .skeleton-card
* .notice (.notice-gold / .notice-error) > .icon + div（控えめなお知らせ枠）
* .result-mark（提出後の大きなチェック印）
* ログイン
* main.login > .login-hero(.login-wordmark + .eyebrow + .login-title) + .login-body > .card.login-card
* 折りたたみ
* details.disclosure > summary(.disclosure-title + .disclosure-count) + .disclosure-body
* 項目カード（スタッフの入力と管理のプレビューで共用。Babe.qcard が作る）
* section.qgroup > h2.qgroup-title + .qgroup-list > article.qcard(.is-important/.is-answered/.is-attention)
* > .qcard-head > .qcard-num + .qcard-main > .badge.badge-important + p.qcard-text
* > .qcard-answers > button.ans.ans-ok|ans-ng|ans-na(.is-selected) > span.ans-mark + span.ans-label(small.ans-note)
* .preview > .preview-label + 項目カード（「スタッフにはこう見えます」）
* 相談と返信・タグ
* .message > .message-head(.message-label + .message-meta) + p.message-text（本人の相談。改行をそのまま出す）
* .message.is-reply（みちこさんの返信。白地に金の線）
* ul.taglist > li.tag (.tag-ng)（その日できなかった項目などを小さく並べる）
* .grid-2（2列。開始日・終了日など。340px 未満は1列）
* 資格情報
* dl.credential > dt + dd（ID・パスワードを大きく）/ .copybox（LINE に貼る文面）
* 補助
* .sr-only / .only-mobile / .only-desktop / .mt-0 .mt-8 .mt-16 .mt-24 .mt-32
*/
/* =====================================================================
トークン
===================================================================== */
:root {
--ink: #2B2118;
--ink-soft: #6B5E52;
--brown: #655236;
--brown-dark: #4A3B27;
--gold: #C8AC65;
--gold-bright: #D5AD16;
--gold-text: #8A6D25;
--beige: #E8E0D4;
--beige-soft: #F3EEE6;
--ivory: #FBF8F3;
--line: #DDD2C2;
--white: #FFFFFF;
--ng: #A8483C;
--ng-soft: #F7E9E5;
--ok-soft: #EFE8DC;
--na: #8A8178;
--radius: 14px;
--radius-sm: 10px;
--shadow: 0 1px 2px rgba(43,33,24,.06), 0 4px 16px rgba(43,33,24,.06);
/* 追加のトークン */
--gold-soft: #F6EFDC;
--line-soft: rgba(221,210,194,.75);
--shadow-lg: 0 12px 40px rgba(43,33,24,.18);
--focus-ring: 0 0 0 3px rgba(200,172,101,.45);
--font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", sans-serif;
--font-serif: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
--font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--maxw: 640px;
--maxw-wide: 960px;
--gutter: 16px;
--topbar-h: 56px;
--tabbar-h: 62px;
--actionbar-h: 78px;
--safe-top: env(safe-area-inset-top, 0px);
--safe-right: env(safe-area-inset-right, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--ease: cubic-bezier(.2, .8, .2, 1);
}
/* =====================================================================
基本
===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
background: var(--ivory);
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
background: var(--ivory);
color: var(--ink);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ul, ol, dl, figure, pre { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, video { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brown); }
[hidden] { display: none !important; }
::selection { background: rgba(200,172,101,.35); }
/* :focus-visible が使えない古い Safari では標準の枠を残す */
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.icon {
width: 24px;
height: 24px;
flex: none;
vertical-align: middle;
}
html.is-scroll-locked,
html.is-scroll-locked body { overflow: hidden; }
/* =====================================================================
レイアウト
===================================================================== */
.container,
.container-wide,
.page {
width: 100%;
max-width: calc(var(--maxw) + var(--gutter) * 2);
margin-left: auto;
margin-right: auto;
padding-left: max(var(--gutter), var(--safe-left));
padding-right: max(var(--gutter), var(--safe-right));
}
.container-wide { max-width: calc(var(--maxw-wide) + var(--gutter) * 2); }
.page {
padding-top: 8px;
padding-bottom: calc(48px + var(--safe-bottom));
}
.page.with-actionbar { padding-bottom: calc(var(--actionbar-h) + var(--safe-bottom) + 40px); }
.stack > * + * { margin-top: 16px; }
.stack-sm > * + * { margin-top: 8px; }
.stack-lg > * + * { margin-top: 28px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.grow { flex: 1 1 auto; min-width: 0; }
.section { margin-top: 32px; }
.section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 8px 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.section-title {
font-family: var(--font-serif);
font-size: 19px;
font-weight: 600;
line-height: 1.45;
letter-spacing: .02em;
color: var(--ink);
font-feature-settings: "palt";
}
.split { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
.split { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 32px; }
.split-aside { position: sticky; top: calc(var(--topbar-h) + var(--safe-top) + 24px); }
}
.divider { height: 1px; background: var(--line); border: 0; margin: 20px 0; }
/* =====================================================================
文字
===================================================================== */
/* ロゴは画像（909×210 の透過 PNG）。高さで大きさを決める */
.wordmark {
display: inline-flex;
align-items: center;
flex: none;
padding: 6px 4px 6px 2px;
line-height: 0;
text-decoration: none;
border-radius: 6px;
}
.wordmark-img {
display: block;
height: 30px;
width: auto;
max-width: none;
-webkit-user-drag: none;
user-select: none;
-webkit-user-select: none;
}
@media (min-width: 600px) { .wordmark-img { height: 32px; } }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-serif);
font-size: 11.5px;
font-weight: 600;
line-height: 1.4;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--gold-text);
}
.eyebrow.has-line::before {
content: "";
width: 22px;
height: 1px;
background: var(--gold);
}
.page-head { padding: 22px 0 14px; }
.page-title {
margin-top: 4px;
font-family: var(--font-serif);
font-size: 27px;
font-weight: 600;
line-height: 1.35;
letter-spacing: .02em;
color: var(--ink);
font-feature-settings: "palt";
}
.page-sub {
margin-top: 4px;
font-size: 14px;
line-height: 1.6;
color: var(--ink-soft);
}
.text-muted { color: var(--ink-soft); }
.text-small { font-size: 13px; line-height: 1.6; }
.text-ng { color: var(--ng); }
.text-gold { color: var(--gold-text); }
.text-center { text-align: center; }
.num { font-family: var(--font-serif); font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.link {
color: var(--brown);
text-decoration: underline;
text-decoration-color: rgba(101,82,54,.35);
text-underline-offset: 3px;
background: none;
border: 0;
padding: 0;
cursor: pointer;
}
/* =====================================================================
上部バー
===================================================================== */
.topbar {
position: sticky;
top: 0;
z-index: 40;
background: var(--brown);
color: #fff;
padding-top: var(--safe-top);
}
.topbar::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, rgba(200,172,101,0), rgba(200,172,101,.45) 20%, rgba(200,172,101,.45) 80%, rgba(200,172,101,0));
}
.topbar-inner {
display: flex;
align-items: center;
gap: 10px;
min-height: var(--topbar-h);
padding-left: max(12px, var(--safe-left));
padding-right: max(8px, var(--safe-right));
}
.topbar-label {
font-family: var(--font-serif);
font-size: 13px;
font-weight: 500;
letter-spacing: .14em;
color: rgba(255,255,255,.88);
padding-left: 10px;
border-left: 1px solid rgba(200,172,101,.5);
line-height: 1.2;
white-space: nowrap;
}
.topbar-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 2px;
min-width: 0;
}
.topbar-btn {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 48px;
padding: 0 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: .02em;
white-space: nowrap;
text-decoration: none;
min-width: 0;
}
.topbar-btn .icon { width: 18px; height: 18px; color: var(--gold); }
.topbar-name {
display: block;
min-width: 0;
max-width: 11em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 360px（Android に多い幅）でも「さくらさん」「優奈さん」が … で切れないよう、ロゴとボタンの余白を少し詰める */
@media (max-width: 374px) {
.topbar-name { max-width: 7.5em; }
.wordmark-img { height: 25px; }
.topbar-btn { padding: 0 7px; }
}
.topbar-btn:active { background: rgba(255,255,255,.1); }
@media (hover: hover) { .topbar-btn:hover { background: rgba(255,255,255,.08); } }
.topbar-select {
appearance: none;
-webkit-appearance: none;
max-width: 48vw;
min-height: 44px;
padding: 0 34px 0 14px;
border: 1px solid rgba(200,172,101,.6);
border-radius: 999px;
background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8AC65' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
color: #fff;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.topbar-select option { color: var(--ink); background: #fff; }
.topbar-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.topbar-store {
font-size: 14px;
color: rgba(255,255,255,.9);
white-space: nowrap;
padding: 0 8px;
}
/* =====================================================================
カード
===================================================================== */
.card {
position: relative;
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
}
@media (max-width: 420px) { .card { padding: 18px 16px; } }
.card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px 12px;
margin-bottom: 12px;
}
.card-title {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 600;
line-height: 1.5;
letter-spacing: .02em;
font-feature-settings: "palt";
}
.card-head .eyebrow + .card-title { margin-top: 2px; }
.card-flush { padding: 0; overflow: hidden; }
.card-flush > .card-head { padding: 16px 16px 0; margin-bottom: 4px; }
.card-soft {
background: var(--beige-soft);
border-color: transparent;
box-shadow: none;
}
.card-accent {
border-color: rgba(200,172,101,.7);
box-shadow: 0 0 0 1px rgba(200,172,101,.18), var(--shadow);
overflow: hidden;
}
.card-accent::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--gold), var(--gold-bright));
}
.card-link {
display: block;
width: 100%;
text-align: left;
text-decoration: none;
color: inherit;
font: inherit;
cursor: pointer;
transition: border-color .15s, box-shadow .15s, transform .1s;
}
.card-link:active { transform: translateY(1px); }
@media (hover: hover) { .card-link:hover { border-color: var(--line); box-shadow: 0 2px 4px rgba(43,33,24,.06), 0 8px 24px rgba(43,33,24,.08); } }
/* =====================================================================
ボタン
===================================================================== */
.btn {
--spin: #fff;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 10px 20px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--brown);
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
letter-spacing: .06em;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s, opacity .15s;
}
.btn .icon { width: 20px; height: 20px; }
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--brown);
border-color: var(--brown);
color: #fff;
box-shadow: 0 1px 2px rgba(43,33,24,.18), 0 4px 12px rgba(101,82,54,.18);
}
.btn-secondary {
--spin: var(--brown);
background: var(--white);
border-color: rgba(101,82,54,.5);
color: var(--brown);
}
.btn-ghost {
--spin: var(--brown);
background: transparent;
color: var(--brown);
}
.btn-danger {
background: var(--ng);
border-color: var(--ng);
color: #fff;
}
@media (hover: hover) {
.btn-primary:hover { background: var(--brown-dark); border-color: var(--brown-dark); }
.btn-secondary:hover { background: var(--beige-soft); border-color: var(--brown); }
.btn-ghost:hover { background: rgba(101,82,54,.07); }
.btn-danger:hover { background: #923C31; border-color: #923C31; }
}
.btn-sm {
min-height: 40px;
padding: 6px 14px;
font-size: 14px;
letter-spacing: .04em;
border-radius: 8px;
}
.btn-sm::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.btn-sm .icon { width: 16px; height: 16px; }
.btn-lg {
min-height: 56px;
padding: 14px 28px;
font-size: 17px;
letter-spacing: .1em;
}
.btn-block { display: flex; width: 100%; }
.btn-icon { width: 48px; padding: 0; }
.btn-icon.btn-sm { width: 40px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-row > .btn { flex: 1 1 0; min-width: 0; }
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: .42;
box-shadow: none;
transform: none;
cursor: not-allowed;
}
.btn.is-loading,
.btn.is-loading:disabled {
opacity: .9;
color: transparent !important;
cursor: progress;
pointer-events: none;
}
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::before {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 20px; height: 20px;
margin: -10px 0 0 -10px;
border-radius: 50%;
border: 2px solid var(--spin);
border-right-color: transparent;
animation: babe-spin .7s linear infinite;
}
/* =====================================================================
フォーム
===================================================================== */
.field { display: block; min-width: 0; }
.field + .field { margin-top: 18px; }
.label {
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 600;
line-height: 1.5;
letter-spacing: .03em;
color: var(--ink);
}
.label-optional {
margin-left: 6px;
font-size: 12px;
font-weight: 400;
color: var(--ink-soft);
}
.input,
.select,
.textarea {
display: block;
width: 100%;
min-height: 52px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background-color: var(--white);
color: var(--ink);
font-size: 16px;
line-height: 1.5;
appearance: none;
-webkit-appearance: none;
box-shadow: inset 0 1px 2px rgba(43,33,24,.03);
transition: border-color .15s, box-shadow .15s;
}
.input::placeholder,
.textarea::placeholder { color: #ADA193; opacity: 1; }
.input:focus,
.select:focus,
.textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: var(--focus-ring);
}
.input:disabled, .select:disabled, .textarea:disabled {
background-color: var(--beige-soft);
color: var(--ink-soft);
}
.textarea { min-height: 128px; resize: vertical; line-height: 1.7; }
.select {
padding-right: 42px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23655236' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 18px;
}
.input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
.input[type="date"]::-webkit-calendar-picker-indicator { opacity: .6; }
.help {
margin-top: 6px;
font-size: 13px;
line-height: 1.6;
color: var(--ink-soft);
text-wrap: pretty;
}
.field-error {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: 8px;
font-size: 14px;
line-height: 1.55;
color: var(--ng);
}
.field-error::before {
content: "";
flex: none;
width: 16px;
height: 16px;
margin-top: 2.5px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8483C' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E") no-repeat center / contain;
}
.field-error:empty { display: none; }
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea,
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
border-color: var(--ng);
}
.field.is-invalid .input:focus,
.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(168,72,60,.18); }
.counter {
margin-top: 4px;
font-size: 12px;
color: var(--ink-soft);
text-align: right;
font-variant-numeric: tabular-nums;
}
.counter.is-over { color: var(--ng); font-weight: 600; }
.input-wrap { position: relative; }
.input-wrap > .input { padding-right: 80px; }
.pw-toggle {
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 64px;
min-height: 44px;
padding: 0 12px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--brown);
font-size: 14px;
font-weight: 600;
}
.pw-toggle:active { background: var(--beige-soft); }
.pw-toggle .icon { width: 18px; height: 18px; }
/* チェックボックス */
.check {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 48px;
cursor: pointer;
font-size: 15px;
line-height: 1.5;
}
.check input {
appearance: none;
-webkit-appearance: none;
flex: none;
width: 24px;
height: 24px;
margin: 0;
border: 1.5px solid var(--line);
border-radius: 6px;
background: var(--white) no-repeat center / 16px;
transition: background-color .15s, border-color .15s;
cursor: pointer;
}
.check input:checked {
background-color: var(--brown);
border-color: var(--brown);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.check input:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
/* オンオフ */
.switch {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 48px;
cursor: pointer;
font-size: 15px;
line-height: 1.5;
}
.switch input {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: none;
width: 46px;
height: 28px;
margin: 0;
border-radius: 999px;
background: var(--beige);
border: 1px solid var(--line);
transition: background-color .2s, border-color .2s;
cursor: pointer;
}
.switch input::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 22px; height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(43,33,24,.25);
transition: transform .2s var(--ease);
}
.switch input:checked { background: var(--brown); border-color: var(--brown); }
.switch input:checked::after { transform: translateX(18px); }
.switch input:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 2px; }
/* =====================================================================
切り替え（期間・絞り込み・役割など）
===================================================================== */
.segmented {
display: flex;
max-width: 100%;
padding: 3px;
gap: 2px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--beige-soft);
}
.segmented-item {
position: relative;
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 4px 10px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--ink-soft);
font-size: 15px;
font-weight: 600;
letter-spacing: .04em;
line-height: 1.3;
white-space: nowrap;
cursor: pointer;
transition: background-color .15s, color .15s, box-shadow .15s;
}
.segmented-item::after { content: ""; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
label.segmented-item { padding: 0; }
label.segmented-item > span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
padding: 4px 10px;
border-radius: 9px;
transition: background-color .15s, color .15s, box-shadow .15s;
}
.segmented-item.is-active,
.segmented-item[aria-pressed="true"],
.segmented-item[aria-selected="true"],
label.segmented-item > input:checked + span {
background: var(--white);
color: var(--brown);
box-shadow: 0 1px 2px rgba(43,33,24,.12), 0 2px 8px rgba(43,33,24,.06), inset 0 0 0 1px rgba(101,82,54,.18);
}
label.segmented-item > input:focus-visible + span { outline: 2px solid var(--gold-text); outline-offset: -2px; }
.subnav {
display: flex;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
margin: 0 calc(var(--gutter) * -1);
padding: 6px var(--gutter) 10px;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav-item {
position: relative;
flex: none;
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 0 16px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--white);
color: var(--ink-soft);
font-size: 14px;
font-weight: 600;
letter-spacing: .04em;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
}
.subnav-item::after { content: ""; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
.subnav-item.is-active,
.subnav-item[aria-current="page"],
.subnav-item[aria-selected="true"] {
background: var(--brown);
border-color: var(--brown);
color: #fff;
}
/* =====================================================================
バッジ・状態チップ
===================================================================== */
.badge {
display: inline-flex;
align-items: center;
gap: 3px;
height: 22px;
padding: 0 8px;
border: 1px solid transparent;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: .06em;
white-space: nowrap;
vertical-align: middle;
}
.badge .icon { width: 12px; height: 12px; }
.badge-important {
background: linear-gradient(135deg, #DCC286 0%, var(--gold) 100%);
color: var(--brown-dark);
box-shadow: inset 0 0 0 1px rgba(138,109,37,.25);
}
.badge-manager { background: var(--white); border-color: var(--gold); color: var(--gold-text); }
.badge-owner { background: var(--brown); color: var(--gold); }
.badge-staff { background: var(--beige-soft); border-color: var(--beige); color: var(--ink-soft); }
.badge-deleted { background: #F1EEEA; border-color: #DAD4CD; color: var(--na); }
.badge-count {
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border: 2px solid var(--white);
box-sizing: content-box;
background: var(--gold-text);
color: #fff;
font-size: 11.5px;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
.status {
display: inline-flex;
align-items: center;
gap: 5px;
height: 26px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
line-height: 1;
letter-spacing: .04em;
white-space: nowrap;
}
.status::before {
content: "";
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
.status-done { background: var(--ok-soft); color: var(--brown); }
.status-off { background: #F1EEEA; color: var(--na); }
.status-off::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.status-missing { background: var(--gold-soft); border-color: rgba(200,172,101,.55); color: var(--gold-text); }
.status-missing::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.status-today { background: var(--white); border-color: rgba(101,82,54,.4); color: var(--brown); }
.status-grace { background: var(--white); border: 1px dashed var(--line); color: var(--ink-soft); }
.status-grace::before { display: none; }
/* =====================================================================
一覧
===================================================================== */
.list { list-style: none; margin: 0; padding: 0; }
.list-row {
display: flex;
align-items: center;
gap: 12px;
min-height: 64px;
padding: 12px 16px;
border-top: 1px solid var(--line-soft);
}
.list > .list-row:first-child,
.list > li:first-child > .list-row { border-top: 0; }
.list > li + li > .list-row { border-top: 1px solid var(--line-soft); }
.list-main { flex: 1 1 auto; min-width: 0; }
.list-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
font-size: 16px;
font-weight: 600;
line-height: 1.45;
overflow-wrap: anywhere;
}
.list-sub {
margin-top: 2px;
font-size: 13px;
line-height: 1.55;
color: var(--ink-soft);
}
.list-trail {
flex: none;
display: flex;
align-items: center;
gap: 8px;
color: var(--ink-soft);
font-size: 14px;
}
.list-row-link {
width: 100%;
border-left: 0; border-right: 0; border-bottom: 0;
background: transparent;
color: inherit;
text-align: left;
text-decoration: none;
font: inherit;
cursor: pointer;
transition: background-color .15s;
}
.list-row-link:first-child { border-top: 0; }
.list-row-link:active { background: var(--beige-soft); }
@media (hover: hover) { .list-row-link:hover { background: var(--ivory); } }
.list-chevron { width: 20px; height: 20px; color: #BFB2A0; flex: none; }
.list-group-title {
padding: 10px 16px 8px;
background: var(--beige-soft);
border-top: 1px solid var(--line-soft);
font-family: var(--font-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: .12em;
color: var(--gold-text);
}
.list-group-title:first-child { border-top: 0; }
/* =====================================================================
数字・グラフ
===================================================================== */
.progress {
height: 6px;
overflow: hidden;
border-radius: 999px;
background: var(--beige);
}
.progress-bar {
height: 100%;
width: 0;
border-radius: inherit;
background: var(--brown);
transition: width .35s var(--ease);
}
.progress-lg { height: 10px; }
.progress-gold .progress-bar { background: linear-gradient(90deg, var(--gold), var(--gold-bright)); }
.tally {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 2px 6px;
font-family: var(--font-serif);
color: var(--ink);
line-height: 1;
}
.tally-label {
margin-right: 4px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
color: var(--ink-soft);
letter-spacing: .06em;
}
.tally-num { font-size: 46px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tally-sep { font-size: 26px; color: var(--gold); padding: 0 2px; }
.tally-den { font-size: 26px; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tally-unit { font-family: var(--font-sans); font-size: 14px; color: var(--ink-soft); }
.ring {
--p: 0;
--size: 92px;
--thick: 8px;
position: relative;
flex: none;
display: grid;
place-items: center;
width: var(--size);
height: var(--size);
border-radius: 50%;
background: conic-gradient(var(--brown) calc(var(--p) * 1%), var(--beige) 0);
}
.ring::before {
content: "";
position: absolute;
inset: var(--thick);
border-radius: 50%;
background: var(--white);
}
.ring-label {
position: relative;
font-family: var(--font-serif);
font-size: 19px;
font-weight: 600;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.ring-label small { font-size: 12px; margin-left: 1px; }
.meter { display: flex; align-items: center; gap: 20px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .stat-grid { gap: 12px; } }
.stat {
min-width: 0;
padding: 14px 8px 12px;
border: 1px solid var(--line-soft);
border-radius: 12px;
background: var(--white);
box-shadow: var(--shadow);
text-align: center;
}
.stat-label { font-size: 12px; line-height: 1.4; color: var(--ink-soft); letter-spacing: .04em; }
.stat-value {
margin-top: 6px;
font-family: var(--font-serif);
font-size: 28px;
font-weight: 600;
line-height: 1.1;
color: var(--ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.stat-unit { margin-left: 2px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.stat-sub { margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--ink-soft); }
.stat.is-ng .stat-value { color: var(--ng); }
@media (max-width: 380px) { .stat-value { font-size: 24px; } }
.barrow {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 6px 14px;
padding: 14px 0;
border-top: 1px solid var(--line-soft);
}
.barrow:first-child { border-top: 0; }
.barrow-label { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 500; line-height: 1.55; overflow-wrap: anywhere; }
.barrow-label .badge { margin-left: 6px; }
.barrow-value {
grid-column: 2; grid-row: 1;
font-family: var(--font-serif);
font-size: 19px;
font-weight: 600;
line-height: 1.3;
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.barrow-track {
grid-column: 1 / -1;
height: 8px;
overflow: hidden;
border-radius: 999px;
background: var(--beige-soft);
box-shadow: inset 0 0 0 1px rgba(221,210,194,.5);
}
.barrow-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brown); transition: width .4s var(--ease); }
.barrow-sub { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.barrow.is-ng .barrow-fill { background: var(--ng); }
.barrow.is-ng .barrow-value { color: var(--ng); }
.barrow-link {
width: 100%;
border-left: 0; border-right: 0; border-bottom: 0;
background: transparent;
color: inherit;
text-align: left;
font: inherit;
cursor: pointer;
}
.card-flush .barrow, .card-flush .barrow-link { padding-left: 16px; padding-right: 16px; }
@media (hover: hover) { .barrow-link:hover { background: var(--ivory); } }
.barrow-link:active { background: var(--beige-soft); }
/* =====================================================================
下部固定バー
===================================================================== */
.actionbar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 30;
padding: 10px max(var(--gutter), var(--safe-right)) calc(10px + var(--safe-bottom)) max(var(--gutter), var(--safe-left));
background: rgba(255,255,255,.96);
border-top: 1px solid var(--line);
box-shadow: 0 -6px 24px rgba(43,33,24,.07);
-webkit-backdrop-filter: saturate(1.2) blur(10px);
backdrop-filter: saturate(1.2) blur(10px);
}
.actionbar-inner {
display: flex;
align-items: center;
gap: 14px;
max-width: var(--maxw);
margin: 0 auto;
}
.actionbar-status { flex: 1 1 auto; min-width: 0; }
.actionbar-text {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
white-space: nowrap;
}
.actionbar-text .num { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.actionbar .progress { margin-top: 7px; }
.actionbar .btn { flex: none; min-width: 132px; }
/* スマホでキーボードが出ている間（common.js が html.is-typing を付ける）は下の固定バーを隠す */
@media (max-width: 899.98px) and (pointer: coarse) {
html.is-typing .actionbar,
html.is-typing .tabbar { visibility: hidden; transform: translateY(100%); }
}
/* =====================================================================
骨組み（管理画面）：スマホは下部タブ、900px 以上は左の縦メニュー
===================================================================== */
.shell { min-height: 100vh; min-height: 100dvh; }
.shell-main { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 32px); }
.shell .actionbar { bottom: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: 10px; }
.tabbar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 35;
display: flex;
padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
background: var(--white);
border-top: 1px solid var(--line);
box-shadow: 0 -2px 16px rgba(43,33,24,.05);
}
.tabbar-item {
position: relative;
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: var(--tabbar-h);
padding: 6px 4px 5px;
border: 0;
background: transparent;
color: #9A8E81;
font-size: 11px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .08em;
text-decoration: none;
cursor: pointer;
transition: color .15s;
}
.tabbar-item .icon { width: 24px; height: 24px; }
.tabbar-item::before {
content: "";
position: absolute;
top: -1px; left: 50%;
width: 28px; height: 2px;
margin-left: -14px;
border-radius: 0 0 2px 2px;
background: var(--gold);
transform: scaleX(0);
transition: transform .2s var(--ease);
}
.tabbar-item.is-active,
.tabbar-item[aria-current="page"] { color: var(--brown); }
.tabbar-item.is-active::before,
.tabbar-item[aria-current="page"]::before { transform: none; }
.tabbar-item .badge-count { position: absolute; top: 5px; left: calc(50% + 5px); }
.tabbar-brand { display: none; }
@media (min-width: 900px) {
.shell {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
grid-template-rows: auto 1fr;
}
.shell > .topbar { grid-column: 1 / -1; grid-row: 1; }
.shell > .tabbar {
grid-column: 1; grid-row: 2;
position: sticky;
top: calc(var(--topbar-h) + var(--safe-top));
align-self: start;
flex-direction: column;
gap: 2px;
height: calc(100vh - var(--topbar-h) - var(--safe-top));
padding: 24px 14px;
border-top: 0;
border-right: 1px solid var(--line-soft);
background: var(--beige-soft);
box-shadow: none;
overflow-y: auto;
}
.shell > .tabbar .tabbar-brand {
display: block;
padding: 0 14px 14px;
}
.shell > .tabbar .tabbar-item {
flex: none;
flex-direction: row;
justify-content: flex-start;
gap: 12px;
min-height: 50px;
padding: 0 14px;
border-radius: 10px;
color: var(--ink-soft);
font-size: 15px;
letter-spacing: .06em;
}
.shell > .tabbar .tabbar-item .icon { width: 22px; height: 22px; }
.shell > .tabbar .tabbar-item::before {
top: 12px; bottom: 12px; left: 0;
width: 3px; height: auto;
margin-left: 0;
border-radius: 0 3px 3px 0;
transform: scaleY(0);
}
.shell > .tabbar .tabbar-item.is-active,
.shell > .tabbar .tabbar-item[aria-current="page"] {
background: var(--white);
color: var(--brown);
box-shadow: 0 1px 2px rgba(43,33,24,.06);
}
.shell > .tabbar .tabbar-item.is-active::before,
.shell > .tabbar .tabbar-item[aria-current="page"]::before { transform: none; }
@media (hover: hover) {
.shell > .tabbar .tabbar-item:not(.is-active):hover { background: rgba(255,255,255,.6); color: var(--ink); }
}
.shell > .tabbar .tabbar-item .badge-count { position: static; margin-left: auto; border-color: transparent; }
.shell > .shell-main {
grid-column: 2; grid-row: 2;
min-width: 0;
padding: 12px 24px 64px;
}
.shell .actionbar { left: 232px; bottom: 0; padding-bottom: calc(10px + var(--safe-bottom)); }
}
/* =====================================================================
トースト（Babe.toast）
===================================================================== */
.toast-region {
position: fixed;
left: 0; right: 0;
bottom: calc(max(var(--toast-bottom, 0px), var(--safe-bottom)) + 14px);
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 0 var(--gutter);
pointer-events: none;
}
.toast-region.is-top { top: calc(var(--safe-top) + 12px); bottom: auto; }
.toast {
pointer-events: auto;
display: flex;
align-items: center;
gap: 10px;
max-width: 460px;
padding: 12px 18px 12px 14px;
border-radius: 12px;
background: var(--brown-dark);
color: #fff;
font-size: 15px;
font-weight: 500;
line-height: 1.55;
letter-spacing: .02em;
box-shadow: 0 10px 30px rgba(43,33,24,.28);
opacity: 0;
transform: translateY(10px);
transition: opacity .2s, transform .25s var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }
.toast-icon { flex: none; display: grid; place-items: center; }
.toast-icon .icon { width: 20px; height: 20px; }
.toast-ok .toast-icon { color: var(--gold); }
.toast-info .toast-icon { color: #E8DCC4; }
.toast-error { background: var(--ng); }
.toast-error .toast-icon { color: #fff; }
/* =====================================================================
シート／モーダル（Babe.sheet・Babe.confirm）
===================================================================== */
.sheet-root {
position: fixed;
inset: 0;
z-index: 900;
display: flex;
align-items: flex-end;
justify-content: center;
}
.sheet-backdrop {
position: absolute;
inset: 0;
background: rgba(43,33,24,.46);
opacity: 0;
transition: opacity .25s;
}
.sheet {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-height: calc(var(--vvh, 100vh) - var(--safe-top) - 28px);
margin-bottom: var(--kb, 0px);
background: var(--ivory);
border-radius: 20px 20px 0 0;
box-shadow: 0 -10px 40px rgba(43,33,24,.22);
transform: translateY(105%);
transition: transform .32s var(--ease);
outline: none;
}
.sheet-root.is-open .sheet-backdrop { opacity: 1; }
.sheet-root.is-open .sheet { transform: none; }
.sheet-root.is-closing { pointer-events: none; }
.sheet-handle {
flex: none;
width: 40px;
height: 4px;
margin: 8px auto 0;
border-radius: 2px;
background: var(--line);
}
.sheet-head {
flex: none;
display: flex;
align-items: center;
gap: 8px;
min-height: 56px;
padding: 4px 6px 4px 20px;
}
.sheet-title {
flex: 1 1 auto;
min-width: 0;
font-family: var(--font-serif);
font-size: 19px;
font-weight: 600;
line-height: 1.45;
letter-spacing: .02em;
font-feature-settings: "palt";
}
.sheet-close {
flex: none;
display: grid;
place-items: center;
width: 48px;
height: 48px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--ink-soft);
}
.sheet-close:active { background: var(--beige); }
@media (hover: hover) { .sheet-close:hover { background: var(--beige-soft); } }
.sheet-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 4px 20px 20px;
}
.sheet-foot {
flex: none;
padding: 12px 20px;
border-top: 1px solid var(--line-soft);
background: var(--white);
}
.sheet > :last-child { padding-bottom: calc(20px + var(--safe-bottom)); }
.sheet-root.is-confirm .sheet-head { padding: 22px 20px 2px; min-height: 0; }
.sheet-root.is-confirm .sheet-handle + .sheet-head { padding-top: 14px; }
.sheet-root.is-confirm .sheet-body { padding-top: 6px; padding-bottom: 8px; }
.sheet-root.is-confirm .sheet-foot { border-top: 0; background: transparent; padding-top: 12px; }
.confirm-text { color: var(--ink-soft); font-size: 15px; line-height: 1.75; white-space: pre-line; word-break: auto-phrase; }
.confirm-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.confirm-actions .btn { white-space: normal; word-break: auto-phrase; padding-left: 12px; padding-right: 12px; }
@media (min-width: 900px) {
.sheet-root { align-items: center; padding: 32px; }
.sheet {
max-width: 560px;
max-height: calc(100vh - 64px);
margin-bottom: 0;
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
opacity: 0;
transform: translateY(12px) scale(.98);
transition: transform .22s var(--ease), opacity .2s;
}
.sheet-root.is-open .sheet { opacity: 1; transform: none; }
.sheet-root.is-wide .sheet { max-width: 760px; }
.sheet-root.is-confirm .sheet { max-width: 440px; }
.sheet-handle { display: none; }
.sheet > :last-child { padding-bottom: 20px; }
.sheet-head { padding-top: 10px; }
.sheet-root.is-confirm .sheet-head,
.sheet-root.is-confirm .sheet-handle + .sheet-head { padding: 26px 24px 2px; }
.sheet-root.is-confirm .sheet-body { padding-left: 24px; padding-right: 24px; }
.sheet-root.is-confirm .sheet-foot { padding: 14px 24px 24px; }
}
/* =====================================================================
状態表示
===================================================================== */
.empty { padding: 36px 20px; text-align: center; color: var(--ink-soft); }
.empty-icon {
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin: 0 auto 14px;
border-radius: 50%;
background: var(--beige-soft);
color: var(--gold-text);
}
.empty-icon .icon { width: 26px; height: 26px; }
.empty-title { font-family: var(--font-serif); font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--ink); letter-spacing: .03em; text-wrap: balance; word-break: auto-phrase; }
.empty-text { text-wrap: pretty; margin-top: 4px; font-size: 14px; line-height: 1.7; }
.spinner {
display: inline-block;
width: 24px;
height: 24px;
border: 2px solid var(--beige);
border-top-color: var(--brown);
border-radius: 50%;
animation: babe-spin .8s linear infinite;
vertical-align: middle;
}
.spinner-lg { width: 40px; height: 40px; border-width: 3px; }
.loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 56px 16px;
color: var(--ink-soft);
font-size: 14px;
letter-spacing: .04em;
}
.skeleton,
.skeleton-line,
.skeleton-title,
.skeleton-card {
display: block;
border-radius: 8px;
background: linear-gradient(90deg, var(--beige-soft) 25%, #FAF6F0 50%, var(--beige-soft) 75%);
background-size: 200% 100%;
animation: babe-shimmer 1.4s ease-in-out infinite;
}
.skeleton-line { height: 14px; margin: 10px 0; }
.skeleton-line.is-short { width: 42%; }
.skeleton-title { height: 26px; width: 58%; margin: 6px 0 14px; }
.skeleton-card { height: 128px; border-radius: var(--radius); }
.notice {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--beige);
border-radius: var(--radius-sm);
background: var(--beige-soft);
color: var(--ink);
font-size: 14px;
line-height: 1.7;
text-wrap: pretty;
}
.notice > .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--gold-text); }
.notice > div { flex: 1 1 auto; min-width: 0; }
.notice-gold { background: var(--gold-soft); border-color: rgba(200,172,101,.5); }
.notice-error { background: var(--ng-soft); border-color: rgba(168,72,60,.25); color: #7E352C; }
.notice-error > .icon { color: var(--ng); }
.result-mark {
display: grid;
place-items: center;
width: 88px;
height: 88px;
margin: 8px auto 0;
border-radius: 50%;
background: var(--brown);
color: #fff;
box-shadow: 0 0 0 8px var(--ok-soft), 0 10px 30px rgba(101,82,54,.25);
animation: babe-pop .45s var(--ease) both;
}
.result-mark .icon { width: 46px; height: 46px; stroke-width: 2.4; }
/* =====================================================================
ログイン
===================================================================== */
.login { min-height: 100vh; min-height: 100dvh; background: var(--ivory); }
.login-hero {
position: relative;
overflow: hidden;
padding: calc(var(--safe-top) + 44px) var(--gutter) 84px;
background: var(--brown);
color: #fff;
text-align: center;
}
.login-hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 80% at 50% 0%, rgba(213,173,22,.12), rgba(213,173,22,0) 60%);
pointer-events: none;
}
.login-hero::after {
content: "";
position: absolute;
left: 50%; bottom: 48px;
width: 120px; height: 1px;
margin-left: -60px;
background: linear-gradient(90deg, rgba(200,172,101,0), rgba(200,172,101,.7), rgba(200,172,101,0));
}
.login-wordmark {
position: relative;
display: block;
line-height: 0;
padding: 14px 0 6px;
}
.login-logo {
display: block;
width: 244px;
max-width: 68vw;
height: auto;
margin: 0 auto;
-webkit-user-drag: none;
user-select: none;
-webkit-user-select: none;
}
@media (min-width: 600px) { .login-logo { width: 272px; } }
.login-hero .eyebrow { position: relative; margin-top: 10px; color: var(--gold); letter-spacing: .3em; }
.login-title {
position: relative;
margin-top: 4px;
font-family: var(--font-serif);
font-size: 22px;
font-weight: 600;
letter-spacing: .14em;
color: #fff;
font-feature-settings: "palt";
}
.login-body {
position: relative;
max-width: calc(400px + var(--gutter) * 2);
margin: -36px auto 0;
padding: 0 var(--gutter) calc(40px + var(--safe-bottom));
}
.login-card { padding: 28px 22px 24px; }
.login-card .btn { margin-top: 24px; }
.login-body > .notice { margin-bottom: 12px; position: relative; }
.login-foot { text-wrap: pretty; margin-top: 20px; text-align: center; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }
/* =====================================================================
折りたたみ
===================================================================== */
.disclosure {
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.disclosure > summary {
display: flex;
align-items: center;
gap: 10px;
min-height: 56px;
padding: 10px 16px;
list-style: none;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
content: "";
flex: none;
width: 9px;
height: 9px;
margin: -4px 4px 0 0;
border-right: 1.8px solid var(--ink-soft);
border-bottom: 1.8px solid var(--ink-soft);
transform: rotate(45deg);
transition: transform .2s var(--ease);
}
.disclosure[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.disclosure > summary:active { background: var(--beige-soft); }
.disclosure-title { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 16px; line-height: 1.45; }
.disclosure-count { flex: none; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.disclosure-body { border-top: 1px solid var(--line-soft); }
/* =====================================================================
項目カード（スタッフの入力フォーム／管理画面のプレビューで共用）
===================================================================== */
.qgroup + .qgroup { margin-top: 32px; }
.qgroup-title {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px;
font-family: var(--font-serif);
font-size: 15px;
font-weight: 600;
line-height: 1.5;
letter-spacing: .08em;
color: var(--brown);
font-feature-settings: "palt";
}
.qgroup-title::before {
content: "";
flex: none;
width: 6px;
height: 6px;
background: var(--gold);
transform: rotate(45deg);
}
.qgroup-title::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, var(--line), rgba(221,210,194,0));
}
.qgroup-list { display: flex; flex-direction: column; gap: 12px; }
.qcard {
position: relative;
padding: 18px 16px 16px;
border: 1px solid var(--line-soft);
border-radius: var(--radius);
background: var(--white);
box-shadow: var(--shadow);
scroll-margin-top: calc(var(--topbar-h) + var(--safe-top) + 16px);
scroll-margin-bottom: calc(var(--actionbar-h) + var(--safe-bottom) + 16px);
transition: border-color .2s, box-shadow .2s;
}
.qcard.is-important { border-color: rgba(200,172,101,.65); }
.qcard.is-important::before {
content: "";
position: absolute;
left: 16px; right: 16px; top: -1px;
height: 2px;
border-radius: 0 0 2px 2px;
background: linear-gradient(90deg, rgba(200,172,101,0), var(--gold) 30%, var(--gold) 70%, rgba(200,172,101,0));
}
.qcard-head { display: flex; align-items: flex-start; gap: 12px; }
.qcard-num {
flex: none;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 1px solid var(--beige);
border-radius: 50%;
background: var(--beige-soft);
color: var(--gold-text);
font-family: var(--font-serif);
font-size: 15px;
font-weight: 600;
line-height: 1;
font-variant-numeric: tabular-nums;
transition: background-color .2s, border-color .2s, color .2s;
}
.qcard-num:empty { display: none; }
.qcard.is-answered .qcard-num { background: var(--brown); border-color: var(--brown); color: #fff; }
.qcard-main { flex: 1 1 auto; min-width: 0; padding-top: 3px; }
.qcard-main > .badge-important { margin: 0 0 6px; }
.qcard-text {
font-size: 17px;
font-weight: 600;
line-height: 1.65;
letter-spacing: .01em;
color: var(--ink);
overflow-wrap: anywhere;
text-wrap: pretty;
}
.qcard-answers {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8px;
margin-top: 14px;
}
.ans {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 0;
min-height: 60px;
padding: 8px 6px;
border: 1.5px solid var(--line);
border-radius: 12px;
background: var(--white);
color: var(--ink);
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
letter-spacing: .02em;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
.ans-label { min-width: 0; white-space: nowrap; }
.ans-note { margin-left: 1px; font-size: 12px; font-weight: 500; letter-spacing: 0; opacity: .85; }
.ans-na {
grid-column: 1 / -1;
min-height: 48px;
color: var(--ink-soft);
font-size: 14px;
font-weight: 600;
border-color: var(--line-soft);
background: var(--ivory);
}
.ans-mark {
flex: none;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border: 1.5px solid #CFC3B2;
border-radius: 50%;
background: var(--white);
transition: background-color .15s, border-color .15s, color .15s;
}
.ans-mark .icon {
width: 14px;
height: 14px;
stroke-width: 3.2;
opacity: 0;
transform: scale(.5);
transition: opacity .15s, transform .2s var(--ease);
}
.ans-na .ans-mark { width: 18px; height: 18px; }
.ans-na .ans-mark .icon { width: 12px; height: 12px; }
@media (hover: hover) {
.ans:not(.is-selected):not([disabled]):hover { border-color: #C5B59E; background: var(--ivory); }
.ans-na:not(.is-selected):not([disabled]):hover { background: var(--beige-soft); }
}
.ans:not([disabled]):active { transform: scale(.98); }
.ans.is-selected { color: #fff; box-shadow: 0 2px 8px rgba(43,33,24,.14); }
.ans-ok.is-selected { background: var(--brown); border-color: var(--brown); }
.ans-ng.is-selected { background: var(--ng); border-color: var(--ng); }
.ans-na.is-selected { background: var(--na); border-color: var(--na); }
.ans.is-selected .ans-mark { background: #fff; border-color: #fff; }
.ans.is-selected .ans-mark .icon { opacity: 1; transform: none; }
.ans-ok.is-selected .ans-mark { color: var(--brown); }
.ans-ng.is-selected .ans-mark { color: var(--ng); }
.ans-na.is-selected .ans-mark { color: var(--na); }
.qcard.is-answered .ans:not(.is-selected) { color: var(--ink-soft); }
.ans[disabled] { cursor: default; }
@media (max-width: 374px) {
.qcard { padding-left: 14px; padding-right: 14px; }
.ans { font-size: 15px; letter-spacing: 0; gap: 6px; }
.ans-note { font-size: 11px; }
}
.qcard.is-attention {
border-color: var(--gold-bright);
box-shadow: 0 0 0 3px rgba(213,173,22,.3), var(--shadow);
animation: babe-nudge .5s var(--ease);
}
.qcard.is-attention .qcard-num { background: var(--gold-bright); border-color: var(--gold-bright); color: #fff; }
.preview {
padding: 16px;
border: 1px solid var(--line-soft);
border-radius: var(--radius);
background: var(--ivory);
}
.preview-label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 13px;
font-weight: 600;
color: var(--ink-soft);
letter-spacing: .04em;
}
.preview-label .icon { width: 18px; height: 18px; color: var(--gold-text); }
/* =====================================================================
相談と返信・小さなタグ
===================================================================== */
.message {
padding: 14px 16px;
border-radius: var(--radius-sm);
background: var(--beige-soft);
}
.message + .message { margin-top: 10px; }
.message-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 2px 10px;
margin-bottom: 6px;
}
.message-label {
font-size: 12.5px;
font-weight: 600;
line-height: 1.5;
letter-spacing: .04em;
color: var(--ink-soft);
}
.message-meta { font-size: 12px; line-height: 1.5; color: var(--ink-soft); white-space: nowrap; }
.message-text {
font-size: 15px;
line-height: 1.8;
color: var(--ink);
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.message.is-reply {
position: relative;
background: var(--white);
border: 1px solid rgba(200,172,101,.55);
padding-left: 18px;
overflow: hidden;
}
.message.is-reply::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--gold);
}
.message.is-reply .message-label { color: var(--gold-text); }
.taglist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tag {
display: inline-block;
max-width: 100%;
padding: 3px 10px;
border: 1px solid var(--line-soft);
border-radius: 8px;
background: var(--white);
font-size: 13px;
line-height: 1.5;
color: var(--ink-soft);
overflow-wrap: anywhere;
}
.tag-ng { border-color: rgba(168,72,60,.22); background: var(--ng-soft); color: #7E352C; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.grid-2 > .field + .field { margin-top: 0; }
@media (max-width: 339px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }
/* =====================================================================
資格情報（ID・パスワード・LINE の文面）
===================================================================== */
.credential {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: baseline;
gap: 8px 18px;
padding: 16px 18px;
border: 1px solid var(--line-soft);
border-radius: var(--radius-sm);
background: var(--white);
}
.credential dt { font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.credential dd {
margin: 0;
font-family: var(--font-mono);
font-size: 26px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .08em;
color: var(--ink);
overflow-wrap: anywhere;
user-select: all;
-webkit-user-select: all;
}
.copybox {
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--beige-soft);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.8;
white-space: pre-wrap;
word-break: break-all;
color: var(--ink);
user-select: text;
-webkit-user-select: text;
}
/* =====================================================================
補助
===================================================================== */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.mt-0 { margin-top: 0 !important; }
.mt-8 { margin-top: 8px !important; }
.mt-16 { margin-top: 16px !important; }
.mt-24 { margin-top: 24px !important; }
.mt-32 { margin-top: 32px !important; }
@media (min-width: 900px) { .only-mobile { display: none !important; } }
@media (max-width: 899.98px) { .only-desktop { display: none !important; } }
/* =====================================================================
動き
===================================================================== */
@keyframes babe-spin { to { transform: rotate(360deg); } }
@keyframes babe-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes babe-pop {
0% { transform: scale(.6); opacity: 0; }
60% { transform: scale(1.06); opacity: 1; }
100% { transform: scale(1); }
}
@keyframes babe-nudge {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(5px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
/* 通信中の回転だけは止めない（止まると固まったように見える） */
.spinner, .btn.is-loading::before {
animation-duration: 1.2s !important;
animation-iteration-count: infinite !important;
}
.skeleton, .skeleton-line, .skeleton-title, .skeleton-card { animation: none !important; }
}