/* 表示の関所 1011（所有者 10-11「表示の仕方がおかしなところがたまにある」）。見た目だけ（金額・決まり・動きは変えない）。
   全画面の </head> の直前で読む。色は各画面の色の系統のまま、文字が読める濃さ（WCAG AA）まで下げるだけ。 */

/* 1. 押す部品の高さ：iPhone（指・幅 600px 以下）は 44px、iPad（指・601px 以上）は 40px（所有者 09-30「iPad は競合並みに詰める」）。PC（マウス）は今のまま */
@media (pointer:coarse) and (max-width:600px){
  button,[role=button],[role=tab],select,summary,input[type=button],input[type=submit],input[type=reset],
  input:not([type]),input[type=text],input[type=search],input:is([type=number],[data-st-number00a]),input[type=email],input[type=tel],input[type=password],input[type=url],
  input[type=date],input[type=time],input[type=month],input[type=datetime-local],
  .hqnav a,nav.tocC14 a,nav.jump-cq a,a.btn,a.btnlink,a[role=button],#coBarCO>a,a#rgScanAZ5,a#toCM,a.top-cq,a.cta,a.skip,.demo .dr a,a#back{min-height:44px!important}
}
@media (pointer:coarse) and (min-width:601px){
  button,[role=button],[role=tab],select,summary,input[type=button],input[type=submit],input[type=reset],
  input:not([type]),input[type=text],input[type=search],input:is([type=number],[data-st-number00a]),input[type=email],input[type=tel],input[type=password],input[type=url],
  input[type=date],input[type=time],input[type=month],input[type=datetime-local],
  .hqnav a,nav.tocC14 a,nav.jump-cq a,a.btn,a.btnlink,a[role=button],#coBarCO>a,a#rgScanAZ5,a#toCM,a.top-cq,a.cta,a.skip,.demo .dr a,a#back{min-height:40px!important}
}
@media (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]){box-sizing:border-box}
  .hqnav a,nav.tocC14 a,nav.jump-cq a,#coBarCO>a,.demo .dr a,a.top-cq,a#back{display:inline-flex;align-items:center}
  /* 文字だけのリンク（戻る・入口）：押せる高さを 24px 以上（WCAG 2.5.8）に */
  header a,.top>a,a#backCO,main>p.row>a,p>a:only-child,.toc-cq a,#pettyRegLinkBL>a{display:inline-block;max-width:100%;padding-top:6px;padding-bottom:6px}
}

/* 2. 表の見出し・短い語を 1 文字ずつ折り返さない（日本語の語の途中で切らない。長すぎるときだけ折る） */
th,td{word-break:keep-all;overflow-wrap:break-word}
/* 料金表：幅の狭い iPad 縦・iPhone では表の中で横に送る（ページを横にはみ出さない） */
@media (max-width:900px){.wrap>table{display:block;overflow-x:auto}}
/* 短い札・タブ・ラベルは 1 行 */
.c11-test-r label,#steps .st,#tabList,#c63 .tabs button{white-space:nowrap}
#c63 .tabs{overflow-x:auto;scrollbar-width:none}
#c63 .tabs button{flex:0 0 auto;padding-left:12px;padding-right:12px}
#form .row>label{word-break:keep-all}
#rbody .den-r{grid-template-columns:auto minmax(0,6.5em) 1fr}
@media (max-width:480px){#kpi .tile-cq b{font-size:18px}}

/* 3. レジ：下の帯（左の列の下）。iPad 横は列が狭いので、絵の下に文字（1 行）にする＝「レ／ジ」と縦に割れない */
@media (min-width:1000px),(max-width:699px){
  #sqNavCA.sqNavC53{gap:0;padding-left:0;padding-right:0}
  #sqNavCA.sqNavC53 button,#sqNavCA.sqNavC53 a{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:2px;min-height:56px;padding:4px 2px;font-size:12px;line-height:1.2}
  #sqNavCA.sqNavC53 span{white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%}
}
/* レジ：狭い画面（帯が下に固定）では、会計の帯と最後のボタンが帯に隠れないように */
@media (max-width:999px){
  .jump1572{position:fixed!important;left:0;right:0;bottom:calc(69px + env(safe-area-inset-bottom))!important} /* 帯のすぐ上にいつも置く（短いカートで画面の途中に浮かない・電話の札と重ならない） */
  body:has(#sqNavCA){padding-bottom:calc(140px + env(safe-area-inset-bottom))!important}
  #checkout1572{padding-bottom:64px}
  body:has(#sqNavCA)>#app{height:auto!important;min-height:100%;padding-bottom:calc(140px + env(safe-area-inset-bottom))} /* 画面の高さに固定すると、下の余白より中身が先に切れて最後のボタンが帯の下に残る */
}
/* レジ：説明の小さな文字（#77726a は背景との差が 4.4：1 で足りない） */
.reg-note,#mvWhyC11c,#jobWhyC11c,#clWhyC11c{color:#5f5a52!important}
/* レジ：色の札（白い字が読める濃さに。色の系統は同じ） */
.tileC53[data-kind=custom],#ml0930AZ1>button[data-cgc="0"],#pl1536>button[data-cgc="0"]{background:#855840!important;border-color:#855840!important}
.tileC53[data-kind=customer],#ml0930AZ1>button[data-cgc="3"],#pl1536>button[data-cgc="3"]{background:#a63f2a!important;border-color:#a63f2a!important}
.tileC53[data-kind=holds]{background:#7d6232!important;border-color:#7d6232!important}
/* レジ：読み取りの灯（長い名前を…で切らない） */
#lampT{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}

/* 4. お客様画面（register-display）：所有者の決まりの上質な書体（明朝）に全体をそろえる。数字は等幅 */
body:has(> #root.wrap){font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;font-variant-numeric:tabular-nums}
body:has(> #root.wrap) button{font-family:inherit}
body:has(> #root.wrap) .tfl{white-space:nowrap}

/* 5. 文字の濃さ（WCAG AA 4.5：1） */
/* 来店前の案内（エステ・アイ・ネイル・スパ）と SEAM の店頭：ヘア版で直した濃さ（--sub #6F6A62・--clay #8B5F45・--gold #806638）にそろえる */
html:root:has(.scr,#gate){--sub:#6F6A62;--clay:#8B5F45;--gold:#806638}
html:root:has(.scr) .eyebrow,html:root:has(.scr) .season,html:root:has(.scr) .svcs i{color:#8e5a66}
html:root:has(.scr) .prow b{color:var(--gold)}
html:root:has(.scr):has(.eyebrow) .chips i{color:#8B5F45}
/* 電話の自動応答・来店前の回答：薄い灰の地に灰の字 */
html:root:has(#secKeysC14,#lead){--muted:#5b6474}
.choice[style*="opacity"] b,.choice[style*="opacity"] span{color:#1f2937!important}
/* 受付数の設定：過ぎた日は薄くせず、地の色で分ける */
.d.past{opacity:1!important;background:#f3f4f6}
/* 閉店の流れ：手順の説明 */
#steps small{color:#475569}
#steps [data-st=todo]{opacity:1!important}
#steps [data-st=todo] .st{color:#475569}
/* 給与・スタッフの表の「—」・0 円 */
td.cyNone,td.cyNone span{color:#667085!important}
.zero-cq{color:#667085!important}
/* レジ管理：売上なし */
.st-none{color:#475569!important}
/* 予約（お客様）：日曜の赤 */
#days .day .w{color:#a21f1f}
/* 管理：予約の札「会計まだ」・HPB の印 */
span.stg1137{background:#64748b}
#ledger .hint span[style*="b45309"],#ledger .hint span[style*="180, 83, 9"]{color:#92400e!important}
/* スタッフの上の帯の店名 */
#appView>.bar .brand{opacity:1!important}
/* 管理（iPad）：上の濃い帯の小さなボタン（ログアウト・送信履歴など）も指で押せる 40px に */
@media (pointer:coarse) and (min-width:601px){
  html:root body #appView #btnOut#btnOut#btnOut,html:root body #appView #mirrorPendingOpen#mirrorPendingOpen#mirrorPendingOpen,html:root body #appView .st-help.st-help>summary,
  html:root body #more0929ac#more0929ac#more0929ac>summary,html:root body details#operationGuide#operationGuide#operationGuide>summary,html:root body details#notificationPanel#notificationPanel#notificationPanel>summary,
  html:root body summary#uxNoticeSum1552#uxNoticeSum1552#uxNoticeSum1552,html:root body details#rq1277#rq1277#rq1277>summary{min-height:40px!important}
}
/* 本部：機能の設定の目次・連絡の「自分あてを読む」 */
@media (pointer:coarse){#navCQ a,.tabsCO a.hint{display:inline-flex;align-items:center;min-height:40px;padding:0 6px}}
@media (pointer:coarse) and (max-width:600px){#navCQ a,.tabsCO a.hint{min-height:44px}}
/* 料金表：金額の列は右にそろえ、数字の幅をそろえる */
html:root:has(#staffPriceRows) td:is(:nth-child(2),:nth-child(3)){text-align:right;font-variant-numeric:tabular-nums}
/* 管理（iPhone）：空き時間の案内の「あいています」 */
.gapcard span{word-break:keep-all;overflow-wrap:anywhere}
/* 管理：予約表の「■HPB」の印 */
#ledger .hint span[style*="warn-text"]{color:#92400e!important}

/* レジ：メニューの札の名前は行の長さをそろえて折る（「カット＋カラ／ー」にしない） */
#ml0930AZ1>button,#ml0930AZ1>button>span{text-wrap:balance} /* メニューの札だけ（商品名は長いので今の折り方のまま） */
/* 管理：上の「機能を検索」の入力欄で、案内の字が切れないように */
#navFind1515{padding-left:8px!important;padding-right:6px!important}
/* レジ（狭い画面）：電話の札は会計の帯のすぐ上に寄せる（短いカートで「お会計」のボタンに重ねない） */
@media (max-width:860px){.c7-fab--register{bottom:calc(129px + env(safe-area-inset-bottom))!important}}

/* C81-8：予約表の札の名前は 1 行で…省略（全文は title と下の一覧）。短い札で「架／空」と割れるのを防ぐ */
.sb-grid .tlblock b,.sb-grid .tlblock small{white-space:nowrap!important;display:block!important;-webkit-line-clamp:unset!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* usability1012 #12：上の帯の文字リンク（発注・受付の設定・閉店の流れの「← 管理画面」「レジへ戻る」など）も押す部品の高さに（iPhone 44px・iPad 40px） */
@media (pointer:coarse) and (max-width:600px){header>a[href],.top>a[href]{min-height:44px!important;display:inline-flex!important;align-items:center;box-sizing:border-box}}
@media (pointer:coarse) and (min-width:601px){header>a[href],.top>a[href]{min-height:40px!important;display:inline-flex!important;align-items:center;box-sizing:border-box}}

/* 6. 総点検 1012（所有者 10-12「他にも崩れている所を徹底的に」「文字もずれている、ちゃんとそろえて」）。見た目だけ・1 か所にまとめる。
   字の大きさと余白は ui.css のトークン（--text-* ・ --space-*）を正にする。予約表の行・お知らせのタブ・上のナビ（schedule-dense）と予約の窓の中（resv-modal）は各担当の patch が持つ */
/* 6-1. ボタン・入力の字：指定の無いものはブラウザの 13.33px と別の書体になっていた（同じ行の文字と大きさ・形がずれる）。指定のある所は今のまま（:where で強さ 0） */
:where(button,input,select,textarea){font-family:inherit;font-size:var(--text-md,14px)}
/* 6-2. 四角・丸の選ぶ部品：入力欄の width:100%・高さ 44px が当たって 34〜48px の四角に伸びていた（窓の「毎回聞かない」・シフトの丸・終日・AI に聞くの同意など）。22px までにして、文字と中央でそろえる */
input[type=checkbox],input[type=radio]{max-width:22px!important;max-height:22px!important;min-width:0!important;min-height:0!important;flex:0 0 auto;vertical-align:middle}
:is(.mbox,#help21) :is(input[type=checkbox],input[type=radio]){width:auto!important;height:auto!important} /* 窓の入力欄の width:100% が元。四角は既定の大きさに戻す（横に並ぶ文字を押し出さない） */
label:has(>input[type=radio]:only-child){white-space:nowrap} /* 「出勤」「休み」のような短い丸の札を 1 字ずつ折らない */
/* 6-3. 窓の下のボタンの列：狭い画面で 2 行目に回ると 1 つだけ右に寄り、高さもばらばらになる。狭い画面では列いっぱいに伸ばして高さをそろえる */
@media (max-width:600px){.mbox .row{align-items:stretch}.mbox .row>button,.mbox .row>.btn,.mbox .row>a.btn{flex:1 1 auto}}
#syncSec .row{justify-content:flex-start}
/* 6-4. 着信のお知らせの「×」：白いボタンの上に白い字になる画面があった（レジ・小口・在庫など、ボタンの字が白の画面） */
#c7Dialog .c7-x{color:#1f2937}
/* 6-5. 字の濃さ（WCAG AA 4.5：1）：会計の窓の注意書き（#e0762d＝3.1：1）・予約表の HPB とリラクの札（#d97706＝3.2：1） */
#sCardNote,#sCardNote b,#sPayModes1539{color:#b45309!important}
.chb1130.chb-hpb,.chb1130.chb-relax{background:#b45309!important}
/* 6-6. カルテの窓の「薬剤を入れる順番」：420px の窓に 3 列で、1〜2 字ずつ折り返していた。狭いときは 1 列 */
#materialCost [data-material-steps]{grid-template-columns:repeat(auto-fit,minmax(12em,1fr))}
/* 6-7. 文字の基準線：見出しと大きな数字が横に並ぶ行（料金のまとめ・実績の行・現金の残高）は、上ぞろえで基準線が 10〜13px ずれていた */
.sum-row,#growRows .g,#rbody .sr{align-items:baseline}
/* 6-8. 管理画面の各タブ（総点検で初めて全タブを開いた分） */
/* シフトの「確定する」の帯（下に貼りつく）が、スマホの下のタブの帯（53px）の下に隠れて押せなかった */
@media (max-width:600px){body:has(#bottomBar1101) #barCA{bottom:calc(53px + env(safe-area-inset-bottom))}}
/* 段の見出し（横に札・ボタンが並ぶ行の h2）を 1 字ずつ折らない（「自動釣銭機の運用」「タイムカード」「店頭とオンラインのお買いもの」）。収まらないときだけ折る */
.row>h2,#siteCardCQ>label{word-break:keep-all;overflow-wrap:anywhere}
/* シフトの表示の切替（半月・週）と「今日」を 1 字ずつ折らない */
#viewCA button,#wToday{white-space:nowrap}
/* 字の濃さ：シフトの確定の札（白い字に #16a34a＝3.3：1）・売上の札の小さな説明（#94a3b8＝2.6：1） */
#p-shift .cellCA.fix{background:#15803d}
#statsBody .scard small{color:#64748b}

/* C81-15/11 押した反応：業務画面の既存の色・寸法を保つ。 */
:is(button,[role=button],[role=tab],input[type=submit],input[type=button],input[type=reset],a[href],summary){-webkit-tap-highlight-color:rgba(11,110,105,.2);touch-action:manipulation}
:is(button,[role=button],[role=tab],input[type=submit],input[type=button],input[type=reset],a[href],summary):is(:active,[data-st-pressed11=true]):not(:disabled):not([aria-disabled=true]){background-color:#d4ebe9!important;color:#17202a!important;box-shadow:inset 0 0 0 3px var(--color-action-border,#0b6e69)!important}
:is(button,[role=button],[role=tab],input[type=submit],input[type=button],input[type=reset],a[href],summary):focus-visible{outline:3px solid var(--color-action-border,#0b6e69)!important;outline-offset:3px!important}
:is(button,[role=button],[role=tab],input[type=submit],input[type=button],input[type=reset],a[href],summary):is(:disabled,[aria-disabled=true]){opacity:.45!important;cursor:not-allowed!important;pointer-events:auto!important}
[data-st-busy11=true]{position:relative!important;cursor:wait!important;outline:2px solid var(--color-action-border,#0b6e69)!important}
[data-st-busy11=true]:not(input)::after{content:'処理中…';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--color-surface,#fff);color:var(--color-text,#17202a);border-radius:inherit;pointer-events:none;padding-left:18px}
[data-st-busy11=true]:not(input)::before{content:'';position:absolute;z-index:1;left:8px;top:calc(50% - 6px);width:12px;height:12px;border:2px solid #0b6e69;border-right-color:transparent;border-radius:50%;animation:st-spin11 .8s linear infinite;pointer-events:none}
[data-st-result11=ok]{outline:2px solid #157347!important}[data-st-result11=error]{outline:2px solid #b42318!important}
.st-feedback11{position:fixed;left:12px;right:12px;bottom:calc(144px + env(safe-area-inset-bottom));z-index:2147483001;pointer-events:none;background:#fff;padding:8px 12px;max-width:100%;box-sizing:border-box;font-size:16px;line-height:1.5;overflow-wrap:anywhere;color:#157347}.st-feedback11[data-result=error]{color:#b42318}
@keyframes st-spin11{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){:is(button,[role=button],[role=tab],input[type=submit],input[type=button],input[type=reset],a[href],summary){animation:none!important;transition:none!important}:is(button,[role=button],[role=tab],input[type=submit],input[type=button],input[type=reset],a[href],summary):is(:active,[data-st-pressed11=true]){transform:none!important}[data-st-busy11=true]::before{animation:none!important}}

.st-feedback11[data-result=busy]::before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;border:2px solid #0b6e69;border-right-color:transparent;border-radius:50%;animation:st-spin11 .8s linear infinite}
@media(prefers-reduced-motion:reduce){.st-feedback11[data-result=busy]::before{animation:none!important}}

/* C81-15/14: local board scrolling stays inside the ledger while a camera/modal is open. */
#ledger,.sb-scroll{min-width:0;max-width:100%;box-sizing:border-box}.sb-scroll{overflow-x:auto}

/* C81-16/20：管理ナビとページ内の上帯。窓・表内スクロール・下帯の層は維持 */
html:has(#appView){scroll-padding-top:calc(var(--admin-header20,0px) + 8px)}
html body #appView #cg1PosTabs{top:var(--admin-header20,0px);z-index:10;background:var(--panel,#fff)}
html body #appView #p-settings #cwSet .cw-top{position:relative;z-index:1;background:var(--bg,#f2f4f7)}
@media(min-width:601px){
  html body #appView>.axL0930AX2,html body #appView>#tabs,html body #appView>.axR0930AX2{top:0!important;z-index:40;background:#1e293b!important}
  html body #appView>.axL0930AX2::before{content:'';position:fixed;top:0;left:0;right:0;height:var(--admin-header20,0px);z-index:-1;background:#1e293b;pointer-events:none}
  html body #appView #p-settings #cwSet .cw-navbox{top:calc(var(--admin-header20,0px) + 8px);z-index:10;background:#fff;max-height:calc(100dvh - var(--admin-header20,0px) - 16px)}
}
@media(min-width:601px) and (max-width:1099px){
  html body #appView>.axR0930AX2{position:sticky!important;top:var(--admin-nav-row20,0px)!important}
}
@media(max-width:600px){
  html body #appView>.bar{position:sticky;top:0;z-index:40;background:var(--navy,#1e293b)}
  html body #appView>.mobile-nav-tools{position:sticky;top:var(--admin-nav-row20,0px);z-index:40;background:var(--panel,#fff)}
}

/* C81-16/00c: 全画面の窓・シートを WKWebView の安全域 + 16px の内側へ。
   padding はスクロール内容にも効く。閉じるを absolute/fixed の角へ戻さない。 */
:is(dialog,.dlg-b,.modal,.sheet,[aria-modal="true"]){
  box-sizing:border-box!important;
  padding-top:calc(16px + env(safe-area-inset-top,0px))!important;
  padding-right:calc(16px + env(safe-area-inset-right,0px))!important;
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
  padding-left:calc(16px + env(safe-area-inset-left,0px))!important;
  max-width:100%!important;
}
:is(dialog,.dlg-b,.sheet,[aria-modal="true"]){max-height:100dvh!important;overflow:auto;overscroll-behavior:contain}
:is(dialog,.dlg-b,.modal,.sheet,[aria-modal="true"],#c7Dialog) :is(button[id*="close" i],button[data-close],button[aria-label="閉じる"],button[data-c11-close],button[data-nclose1012],button[data-c43-close],button[data-bd-close],button[data-calclose1408],button[data-cardret-close],button.dlgx,button.c7-x,button#rx4Done,form[method="dialog"] button){
  position:static!important;inset:auto!important;flex-shrink:0!important;
  box-sizing:border-box!important;min-width:44px!important;min-height:44px!important;height:auto!important;
  padding:8px 16px!important;border:2px solid #334155!important;border-radius:8px!important;
  background:#fff!important;color:#0f172a!important;font:inherit;line-height:1.5!important;
  white-space:nowrap;touch-action:manipulation;cursor:pointer;
}
:is(dialog,.dlg-b,.modal,.sheet,[aria-modal="true"],#c7Dialog) button:focus-visible{outline:3px solid #0f766e!important;outline-offset:2px}


/* 37 周目 432：共通01〜07。画面専用規則は各画面へ。 */
.st-common-s .st-common-selection [aria-pressed="true"],
.st-common-s .st-common-selection :is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], [aria-checked="true"]),
.st-common-s .st-common-selection label:has(> input:checked) {
  font-weight: var(--weight-bold, 700);
  text-decoration-line: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: var(--space-1, 4px);
}


.st-common-s .st-common-context,
.st-common-s .st-common-definition,
.st-common-s .st-common-figures .metric small {
  font-size: var(--text-md, 14px);
  line-height: var(--leading-normal, 1.7);
  overflow-wrap: anywhere;
}
.st-common-s .st-common-figures .metric strong,
.st-common-s .st-common-figures :is(.amt, .big, .r, dd) {
  font-variant-numeric: tabular-nums;
}


.st-common-s .st-common-state-host > :is([role="status"], [role="alert"]) {
  font-size: var(--text-lg, 16px);
  line-height: var(--leading-normal, 1.7);
  overflow-wrap: anywhere;
}
.st-common-s .st-common-state-host > [role="status"].error,
.st-common-s .st-common-state-host > [role="status"]:is(.error, .ng, .err, .rx-unconfirmed),
.st-common-s .st-common-state-host > [role="alert"] {
  font-weight: var(--weight-bold, 700);
  text-decoration-line: underline;
}


.st-common-s .st-common-fields > label {
  min-width: 0;
  gap: var(--space-1, 4px);
  font-size: var(--text-md, 14px);
}
.st-common-s .st-common-fields > label > :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
.st-common-s .st-common-fields > label[for] + :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
  font-size: var(--text-lg, 16px);
  min-width: 0;
  max-width: 100%;
}


.st-common-s .st-common-action-name {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  height: auto;
}


.st-common-s .st-common-title {
  font-size: var(--text-2xl, 24px);
  line-height: var(--leading-tight, 1.35);
  font-weight: var(--weight-bold, 700);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.st-common-s .st-common-primary,
.st-common-s .st-common-secondary {
  word-break: keep-all;
  overflow-wrap: anywhere;
}


.st-common-s .st-common-actions {
  gap: var(--space-2, 8px);
  flex-wrap: wrap;
}
.st-common-s .st-common-touch {
  box-sizing: border-box;
  min-height: var(--tap-min, 44px);
  min-width: var(--tap-min, 44px);
  max-width: 100%;
  height: auto;
  touch-action: manipulation;
}


.st-common-s .st-common-danger {
  color: var(--t-danger-text, #923b32);
  border-color: var(--t-danger-text, #923b32);
  background: var(--st22-surface, #fff);
}