/* モルック大会の受付。DESIGN.md 2-2「海と珊瑚」を全部の画面で使う(主の色は1つ。主催者ページも同じ)。
   手本: 入力欄は GOV.UK / デジタル庁(ラベルは欄の上・必須は字で)、主催者ページは Carbon(格子・役割の名前の色)。
   区切りは罫線と余白。角はボタン・入力・札だけ 4px、区画は 0。影・グラデーション・丸い札は使わない。 */
:root{
  --paper:#f5f6f2; --kinari:#e8ede8; --white:#fff; --ink:#1c2a2e; --gray:#4f5f63; --gray-2:#76807f;
  --rule:#d8dfda; --rule-strong:#8d9592; --accent:#0f5f6b; --on-accent:#fff; --mark:#f08a6c; --alert:#b23a3a;
  --ok:#1b5e30;
  --r:4px;
  --font:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --font-num:"Jost","Avenir Next Condensed",var(--font);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 16px/1.8 var(--font);overflow-x:hidden}
a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.wrap{max-width:680px;margin:0 auto;padding:0 16px 64px}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.eyebrow{font-size:12px;letter-spacing:.08em;color:var(--gray);font-weight:700}
.note{font-size:14px;color:var(--gray);line-height:1.7}
.hidden{display:none!important}

/* 頭 */
.top{padding:24px 0 16px;border-bottom:3px double var(--ink)}
.top h1{font-size:24px;font-weight:900;line-height:1.35;letter-spacing:-.01em;margin-top:4px;overflow-wrap:anywhere}
.top .when{margin-top:8px;font-size:16px;font-weight:700}
.top .where{font-size:14px;color:var(--gray)}
.bar{background:var(--mark);height:6px}

/* 区画: 太い線+見出し。箱で包まない */
.sec{margin-top:40px;border-top:2px solid var(--ink);padding-top:12px}
.sec > h2{font-size:20px;font-weight:800;line-height:1.35;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.sec > h2 small{font-size:14px;font-weight:400;color:var(--gray)}
.sec p{text-align:justify}
.lead{margin-top:16px}

/* 入力。ラベルは欄の上・必須は字で */
.field{border-top:1px solid var(--rule);padding:14px 0}
.field:first-of-type{border-top:0}
.field > label,.field > .lbl{display:block;font-size:16px;font-weight:700;line-height:1.5;margin-bottom:6px}
.field .req{display:inline-block;font-size:12px;font-weight:700;color:var(--alert);margin-left:8px;letter-spacing:.04em}
.field .opt{display:inline-block;font-size:12px;font-weight:400;color:var(--gray);margin-left:8px}
.field .hint{display:block;font-size:14px;color:var(--gray);line-height:1.6;margin:-2px 0 8px}
input[type=text],input[type=date],input[type=time],input[type=number],input[type=tel],input[type=email],select,textarea{
  display:block;width:100%;min-height:48px;padding:10px 12px;font:400 16px/1.6 var(--font);color:var(--ink);
  background:var(--white);border:1px solid var(--rule-strong);border-radius:var(--r);-webkit-appearance:none;appearance:none}
textarea{min-height:8em;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid var(--mark);outline-offset:0;border-color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row2 > div > span{display:block;font-size:14px;color:var(--gray)}
.w-num{max-width:8em}
.inline{display:flex;align-items:center;gap:8px}
.inline span{font-size:16px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.6}
.check input{width:24px;height:24px;flex:0 0 auto;margin-top:2px;accent-color:var(--accent)}
.err{color:var(--alert);font-size:14px;font-weight:700;margin-top:8px;line-height:1.6}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* 区切りボタン(選ぶ物) */
.seg{display:flex;flex-wrap:wrap;gap:0}
.seg button{min-height:48px;padding:0 16px;font:700 16px var(--font);background:var(--white);color:var(--ink);border:1px solid var(--ink);margin-left:-1px;cursor:pointer}
.seg button:first-child{margin-left:0;border-radius:var(--r) 0 0 var(--r)}
.seg button:last-child{border-radius:0 var(--r) var(--r) 0}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--white)}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:var(--r);font:700 16px/1.4 var(--font);text-decoration:none;cursor:pointer;border:1px solid var(--ink);background:var(--white);color:var(--ink)}
.btn-main{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-block{display:flex;width:100%}
.btn-alert{color:var(--alert);border-color:var(--alert)}
.btn-alert.fill{background:var(--alert);color:#fff}
.btn-sm{min-height:44px;padding:0 14px;font-size:14px}
.btn:disabled{opacity:.45;cursor:default}
.btn-text{background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:.2em;cursor:pointer;min-height:44px}
.actions{margin-top:20px;display:grid;gap:12px}

/* 数(確定・定員・待ち) */
.counts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong);margin-top:16px}
.counts > div{padding:10px 0 10px 12px}
.counts > div:first-child{padding-left:0}
.counts > div + div{border-left:1px solid var(--rule)}
.counts .k{font-size:12px;letter-spacing:.04em;color:var(--gray);font-weight:700}
.counts .v{font-size:32px;font-weight:700;line-height:1.2}
.counts .v small{font-size:14px;font-weight:700;color:var(--gray);margin-left:2px}

/* 札 */
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.6;padding:1px 8px;border-radius:var(--r);background:var(--kinari);color:var(--ink);white-space:nowrap;border:1px solid var(--rule)}
.tag-open{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.tag-wait{background:#fff;border-color:var(--alert);color:var(--alert)}
.tag-ok{background:var(--ok);border-color:var(--ok);color:#fff}
.tag-off{color:var(--gray)}

/* 行の一覧(罫線で区切る) */
.list{list-style:none}
.list > li{border-top:1px solid var(--rule);padding:12px 0}
.list > li:last-child{border-bottom:1px solid var(--rule)}
.list .no{display:inline-block;min-width:2em;color:var(--gray);font-size:14px}
.list .nm{font-weight:700;overflow-wrap:anywhere}
.list .sub{display:block;font-size:14px;color:var(--gray);line-height:1.6;overflow-wrap:anywhere}
.list .line{display:flex;align-items:flex-start;gap:8px}
.list .line .who{flex:1;min-width:0}
.list-h{font-size:14px;font-weight:700;margin:24px 0 4px;color:var(--gray)}
.empty{color:var(--gray);font-size:14px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 0}
.desc{white-space:pre-wrap;overflow-wrap:anywhere;text-align:left}

/* リンクを渡す所 */
.link{border-top:1px solid var(--rule);padding:16px 0}
.link:last-child{border-bottom:1px solid var(--rule)}
.link h3{font-size:16px;font-weight:800;line-height:1.5}
.link .url{display:block;margin:8px 0;padding:10px 12px;background:var(--white);border:1px solid var(--rule-strong);border-radius:var(--r);font:400 14px/1.6 var(--font-num);word-break:break-all;color:var(--ink)}
.link .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.link-secret{border-left:4px solid var(--alert);padding-left:12px}
.warn{font-size:14px;color:var(--alert);font-weight:700;line-height:1.6}

/* 本人の申込みの状態 */
.mine{margin-top:24px;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule-strong);padding:12px 0 16px}
.mine .state{font-size:24px;font-weight:900;line-height:1.35;margin:4px 0}
.mine .state.ok{color:var(--ok)}
.mine .state.wait{color:var(--alert)}
.mine dl{display:grid;grid-template-columns:6em 1fr;gap:4px 8px;font-size:14px;margin-top:8px}
.mine dt{color:var(--gray)}
.mine dd{overflow-wrap:anywhere}

/* 取り消しの確かめ(ページの中に出す) */
.ask{margin-top:10px;padding:12px;border:1px solid var(--alert);border-radius:var(--r);background:var(--white)}
.ask p{font-size:14px;margin-bottom:10px;text-align:left}
.ask .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* タブ(主催者ページ) */
.tabs{display:flex;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule-strong);margin-top:16px;overflow-x:auto}
.tabs button{flex:1 0 auto;min-height:48px;padding:0 14px;font:400 16px var(--font);background:none;border:0;border-bottom:4px solid transparent;color:var(--gray);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}

/* 受付の切り替え */
.sw{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:8px 0;background:none;border:0;border-bottom:1px solid var(--rule);font-family:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.sw .knob{flex:0 0 auto;width:56px;height:32px;border-radius:var(--r);background:var(--accent);position:relative}
.sw .knob::after{content:"";position:absolute;top:4px;left:28px;width:24px;height:24px;border-radius:2px;background:#fff}
.sw[aria-checked=false] .knob{background:var(--gray-2)}
.sw[aria-checked=false] .knob::after{left:4px}
.sw b{display:block;font-size:20px;line-height:1.4}
.sw span span{display:block;font-size:14px;color:var(--gray);line-height:1.5}

/* 当日: 対戦表 */
.round{margin-top:20px}
.round > h3{font-size:16px;font-weight:800;border-bottom:1px solid var(--rule-strong);padding-bottom:4px;display:flex;gap:8px;align-items:baseline}
.round > h3 small{font-weight:400;font-size:14px;color:var(--gray)}
.match{border-bottom:1px solid var(--rule);padding:8px 0}
.match .meta{font-size:12px;color:var(--gray);letter-spacing:.04em;font-weight:700}
.match .side{display:flex;align-items:center;gap:8px;min-height:44px}
.match .side .tn{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere;line-height:1.4}
.match .side.won .tn::after{content:"勝ち";font-size:12px;font-weight:700;color:#fff;background:var(--ok);border-radius:var(--r);padding:0 6px;margin-left:8px;vertical-align:2px}
.match .side.draw .tn::after{content:"引き分け";font-size:12px;font-weight:700;color:var(--ink);background:var(--kinari);border:1px solid var(--rule);border-radius:var(--r);padding:0 6px;margin-left:8px;vertical-align:2px}
.match .sets{display:flex;gap:6px;flex:0 0 auto}
.cell{width:48px;height:44px;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--white);font:700 14px var(--font);color:var(--gray-2);display:inline-flex;align-items:center;justify-content:center}
button.cell{cursor:pointer}
.cell.on{background:var(--ok);border-color:var(--ok);color:#fff}
.cell.pending{opacity:.6}
.sethead{display:flex;justify-content:flex-end;gap:6px;font-size:12px;color:var(--gray)}
.sethead span{width:48px;text-align:center}
.rests{font-size:14px;color:var(--gray);padding-top:4px;text-wrap:pretty;word-break:auto-phrase}

/* 順位表 */
.tbl-wrap{overflow-x:auto;margin-top:8px}
table.st{width:100%;border-collapse:collapse;font-size:14px}
table.st th{font-weight:700;text-align:right;border-bottom:2px solid var(--ink);padding:6px 4px;white-space:nowrap;font-size:12px;color:var(--gray)}
table.st td{border-bottom:1px solid var(--rule);padding:8px 4px;text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums}
table.st th:nth-child(2),table.st td:nth-child(2){text-align:left;font-family:var(--font);font-weight:700;width:100%;overflow-wrap:anywhere}
table.st td:first-child{font-weight:700;font-size:16px}
.blockname{font-size:16px;font-weight:800;margin-top:20px}

.foot{margin-top:64px;border-top:1px solid var(--rule);padding-top:12px;font-size:12px;color:var(--gray)}
.toast{position:fixed;left:16px;right:16px;bottom:calc(12px + env(safe-area-inset-bottom));pointer-events:none;max-width:648px;margin:0 auto;background:var(--ink);color:#fff;font-size:14px;padding:12px 16px;border-radius:var(--r);z-index:10}
.facts{display:grid;grid-template-columns:5em 1fr;gap:0;font-size:16px;border-top:1px solid var(--rule)}
.facts dt,.facts dd{border-bottom:1px solid var(--rule);padding:8px 0}
.facts dt{color:var(--gray);font-size:14px}
.facts dd{overflow-wrap:anywhere}
input.url{width:100%;min-height:44px}
.field > label.check{font-weight:400}
.top h1{word-break:auto-phrase}
.round > h3{flex-wrap:wrap;white-space:nowrap}
.round > h3 small{white-space:normal;flex-basis:100%}
/* 磨き(2026-10-19) */
.field > label.check{display:flex;font-weight:400}
.check .ctext{flex:1;min-width:0;font-weight:700;word-break:auto-phrase}
.check .ctext small{display:block;font-size:14px;font-weight:400;color:var(--gray);line-height:1.6;margin-top:2px}
.wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.hint,.note,.warn,.list .sub,.err,.ask p{text-wrap:pretty}
.facts dd,.mine dd,.where{text-wrap:pretty;word-break:auto-phrase}
.round > h3 small{text-wrap:pretty;word-break:auto-phrase}
textarea{min-height:12em}
input:disabled{background:var(--kinari);color:var(--gray)}
/* ログイン・自分の大会(2026-10-20) */
.top .who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:8px;font-size:14px;color:var(--gray)}
.top .who .btn-text{min-height:32px}
.facts-list{list-style:none;margin-top:16px;border-top:1px solid var(--rule)}
.facts-list li{border-bottom:1px solid var(--rule);padding:10px 0;font-size:14px;color:var(--gray);line-height:1.7;text-wrap:pretty}
.list .cnt{flex:0 0 auto;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.list .cnt .num{font-size:20px;font-weight:700;line-height:1.2}
.list .cnt small{font-size:12px;color:var(--gray);font-weight:700}
.sec .note + form,.sec > .note{margin-bottom:4px}
.eyebrow .back{margin-left:12px;font-weight:400;letter-spacing:0}
#needLogin{margin-top:16px}