/* =========================================================
   GOLIXX 共通UI部品
   正本: _運用/memory/香林UIデザイン.md §2-§7
   前提: tokens.css を先に読み込むこと。
   ========================================================= */

*{box-sizing:border-box;margin:0;padding:0}
/* ★hidden 属性は必ず効かせる。
   .flash{display:flex} や .badge{display:inline-block} のほうが
   ブラウザ標準の [hidden]{display:none} より詳細度が高く、
   「hidden を付けたのに出たまま」が起きる（実際に「コピーしました」が
   最初から表示されていた）。ここで一度だけ強制する。 */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Segoe UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:var(--fs-body); line-height:1.8; color:var(--text);
  background:var(--bg);
  overflow-x:hidden;                 /* モバイル横スクロール禁止（UIレビュー基準D 最重要） */
}
img{max-width:100%;height:auto}
a{color:var(--primary)}
a:hover{color:var(--primary-d)}
/* W2.4.7 フォーカスの可視化を全操作要素へ一括定義 */
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:var(--r-sm)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- アプリバー ---------- */
.appbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.appbar-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-4);min-height:56px;
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:var(--sp-2);text-decoration:none;color:var(--text);min-height:44px}
.brand-logo{width:32px;height:32px;border-radius:var(--r-sm)}
.brand-name{font-size:var(--fs-2xl);font-weight:700;letter-spacing:.04em}
.brand-name .tm{font-size:var(--fs-xs);vertical-align:super;font-weight:400;margin-left:1px}
.brand-sub{font-size:var(--fs-sm);color:var(--muted);font-weight:700}
.gnav{margin-left:auto;display:flex;gap:var(--sp-1);flex-wrap:wrap}
.gnav a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-3);
  border-radius:var(--r-pill);text-decoration:none;color:var(--text);font-size:var(--fs-md);font-weight:600}
.gnav a:hover{background:var(--bg-hover)}
/* 現在地は色だけで伝えない：淡色地＋太字＋下線インジケータの3点 */
.gnav a[aria-current="page"]{background:var(--primary-l);color:var(--primary-d);font-weight:700;
  box-shadow:inset 0 -3px 0 var(--primary)}

/* ---------- ボタン（ピル形状・主=塗り／副=ゴースト） ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--control-h-touch);padding:var(--sp-2) var(--sp-5);
  border-radius:var(--r-pill);border:1px solid var(--primary);
  background:var(--primary);color:#fff;
  font-family:inherit;font-size:var(--fs-lg);font-weight:700;text-decoration:none;cursor:pointer;
  transition:background .12s}
.btn:hover{background:var(--primary-d);border-color:var(--primary-d);color:#fff}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn.ghost{background:var(--surface);color:var(--primary)}
.btn.ghost:hover{background:var(--primary-l);color:var(--primary-d)}
.btn.ok{background:var(--ok);border-color:var(--ok)}
.btn.ok:hover{background:var(--ok-text);border-color:var(--ok-text)}
.btn.danger{background:var(--warn);border-color:var(--warn)}
.btn.danger:hover{background:var(--expense-d);border-color:var(--expense-d)}
/* amber の塗りボタンは --amber-d(#e65100) だと白文字が 3.79:1 で AA を割る（実測）。
   塗りには濃い --amber-text(#8a3200) を使う。 */
.btn.amber{background:var(--amber-text);border-color:var(--amber-text)}
.btn.amber:hover{background:#6d2800;border-color:#6d2800}
.btn.neutral{background:var(--neutral);border-color:var(--neutral)}
.btn.neutral:hover{background:var(--neutral-d);border-color:var(--neutral-d)}
.btn.block{width:100%}
.btn.sm{min-height:36px;padding:var(--sp-1) var(--sp-3);font-size:var(--fs-md)}
.btn.lg{min-height:56px;font-size:var(--fs-xl);padding:var(--sp-3) var(--sp-6)}

/* ---------- カード・セクション ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.card-h{font-size:var(--fs-xl);font-weight:700;color:var(--primary-d);margin-bottom:var(--sp-3)}
.section{padding:var(--sp-6) 0}
.section.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section h2{font-size:var(--fs-3xl);margin-bottom:var(--sp-4);padding-left:var(--sp-3);
  border-left:4px solid var(--primary);line-height:1.4}
.section .lead{color:var(--muted);margin-bottom:var(--sp-4)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-4)}
.pagehead{background:var(--primary-d);color:#fff;padding:var(--sp-5) 0}
.pagehead h1{font-size:var(--fs-3xl);letter-spacing:.02em}
.pagehead .sub{color:#dbe6f2;font-size:var(--fs-body);margin-top:var(--sp-1)}
.crumb{font-size:var(--fs-md);color:#dbe6f2;margin-bottom:var(--sp-2)}
.crumb a{color:#fff;text-decoration:underline}
.crumb .sep{margin:0 var(--sp-2)}

/* ---------- 通知・状態表示（色だけで伝えない：アイコン語＋枠線＋太字） ---------- */
.flash{border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);
  font-weight:700;border:1px solid transparent;display:flex;gap:var(--sp-2);align-items:flex-start}
.flash.ok{background:var(--ok-bg);color:var(--ok-text);border-color:#bcd9be}
.flash.err{background:var(--warn-bg);color:var(--warn);border-color:#f0b9b4}
.flash.warn{background:var(--amber-bg);color:var(--amber-text);border-color:var(--bd-amber)}
.flash.info{background:var(--primary-l);color:var(--primary-d);border-color:var(--bd-primary)}
.note{background:var(--bg-subtle);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-lg);color:var(--muted)}
.badge{display:inline-block;border-radius:var(--r-pill);padding:1px var(--sp-3);
  font-size:var(--fs-sm);font-weight:700}
.badge.free{background:var(--bg-subtle);color:var(--muted);border:1px solid var(--line-strong)}
.badge.paid{background:var(--ok-bg);color:var(--ok-text);border:1px solid #bcd9be}
.badge.warn{background:var(--amber-bg);color:var(--amber-text);border:1px solid var(--bd-amber)}

/* ---------- QRコード（Golixx\Qr が出力する SVG）----------
   白地・黒モジュール固定（21:1）。印刷・スクショでも読めるよう色を薄くしない。 */
.qr-svg{display:block;width:100%;height:auto;background:#fff}
.qr-frame{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--sp-2);margin:0 auto;width:100%;max-width:260px}
/* 拡大表示：入れ物の幅いっぱい／縦にも収まる範囲でできるだけ大きく（会場で見せる用）。
   下に置く「参加コード」まで一緒に見えている必要があるので、画面の高さから逆算する。 */
.qr-frame.lg{max-width:min(100%, max(220px, calc(88vh - 340px)))}
.qr-frame.is-locked{position:relative}
.qr-frame.is-locked::after{content:"受付停止中";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.82);
  color:var(--warn);font-weight:700;font-size:var(--fs-xl);border-radius:var(--r-md)}

/* ---------- フォーム ---------- */
.field{margin-bottom:var(--sp-4)}
.field > label{display:block;font-size:var(--fs-md);font-weight:700;color:var(--muted);margin-bottom:var(--sp-1)}
.field .req::after{content:" *";color:var(--warn)}
.field .hint{font-size:var(--fs-md);color:var(--muted);margin-top:var(--sp-1)}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{
  width:100%;min-height:var(--control-h-touch);padding:var(--sp-2) var(--sp-3);
  font-family:inherit;font-size:var(--fs-body);   /* ★16px以上＝iOSの自動ズーム防止 */
  color:var(--text);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-md)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--primary-l);border-color:var(--primary)}
textarea{min-height:88px;line-height:1.7;resize:vertical}
.form-foot{display:flex;gap:var(--sp-3);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--sp-4)}

/* ---------- テーブル ---------- */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow-x:auto;background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse}
table.tbl th,table.tbl td{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-lg);
  border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.tbl th{background:var(--bg-subtle);color:var(--muted);font-size:var(--fs-md);font-weight:700}
table.tbl th:not(:first-child),table.tbl td:not(:first-child){border-left:1px solid var(--line-v)}
table.tbl tbody tr:nth-child(even){background:var(--stripe)}
table.tbl tbody tr:hover{background:var(--bg-hover)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- 法的文書 ---------- */
.legal{max-width:820px}
.legal h2{font-size:var(--fs-2xl);margin-top:var(--sp-6);margin-bottom:var(--sp-2)}
.legal h2:first-of-type{margin-top:0}
.legal p,.legal li{font-size:var(--fs-lg)}
.legal ol,.legal ul{padding-left:1.6em;margin:var(--sp-2) 0 var(--sp-4)}
.legal li{margin-bottom:var(--sp-1)}
.legal .date{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-5)}
.spec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);overflow:hidden}
.spec > div{display:grid;grid-template-columns:210px 1fr;border-bottom:1px solid var(--line)}
.spec > div:last-child{border-bottom:none}
.spec dt{background:var(--bg-subtle);color:var(--muted);font-weight:700;font-size:var(--fs-lg);
  padding:var(--sp-3) var(--sp-4);border-right:1px solid var(--line)}
.spec dd{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-lg)}

/* ---------- フッター ---------- */
.site-foot{background:var(--neutral-d);color:#c9d1d9;margin-top:var(--sp-6);
  padding:var(--sp-6) 0 var(--sp-5);font-size:var(--fs-lg)}
.site-foot .foot-run{color:#fff;font-weight:700;margin-bottom:var(--sp-3)}
.foot-nav{display:flex;gap:var(--sp-2) var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.foot-nav a{color:#c9d1d9;text-decoration:underline;display:inline-flex;align-items:center;min-height:40px}
.foot-nav a:hover{color:#fff}
.site-foot small{display:block;font-size:var(--fs-md);color:#aab3bd}

/* ---------- モバイル（≤640px） ---------- */
@media (max-width:640px){
  .appbar-in{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
  .gnav{margin-left:0;width:100%;justify-content:flex-start}
  .section{padding:var(--sp-5) 0}
  .card{padding:var(--sp-4)}
  .spec > div{grid-template-columns:1fr}          /* 1列化＝横スクロール回避 */
  .spec dt{border-right:none;border-bottom:1px dashed var(--line);padding-bottom:var(--sp-2)}
  .form-foot .btn{width:100%}
}