/* ===================================================================
   WAVE PILOT — A案「競艇新聞×モダン紙面」デザイントークン(T-022)
   生成り紙面 + 罫線グリッド + 等幅数字 + 艇番6色。ダーク外枠に紙面を額装する構成。
   =================================================================== */
:root{
  /* --- ベーストークン --- */
  --shell:#1b1815;          /* 外枠(ダークシェル) */
  --shell-line:rgba(245,240,226,.14);
  --paper:#f5f0e2;          /* 生成り紙 */
  --paper-deep:#eae1c8;     /* 区切り用の濃い紙 */
  --ink:#201d17;            /* 本文インク */
  --ink-soft:#5c5646;       /* 補足インク(旧--muted相当) */
  --line:#cabb95;           /* 罫線(明) */
  --line-strong:#9c8f68;    /* 罫線(強調・コーナー) */
  --accent:#ac2b2b;         /* 朱色(見出し・CTA・アクセント) */
  --accent-soft:#c96b5a;    /* 朱の淡色 */
  --accent-ink:#7a1d21;
  --ok:#1f7a4c;
  --danger:#ac2b2b;

  /* --- 旧トークンの互換エイリアス(T-023でマークアップ側を追随させるまでの橋渡し) --- */
  --navy:var(--shell);
  --navy2:var(--shell);
  --gold:var(--accent);
  --gold-soft:var(--accent-soft);
  --muted:var(--ink-soft);

  /* --- 艇番6色(公式カラー) --- */
  --b1:#f5f0e2; --b1-ink:#201d17; --b1-line:#9c8f68;
  --b2:#201d17; --b2-ink:#f5f0e2;
  --b3:#ac2b2b; --b3-ink:#fff;
  --b4:#1d4f8f; --b4-ink:#fff;
  --b5:#d9a520; --b5-ink:#201d17;
  --b6:#1f7a4c; --b6-ink:#fff;

  /* --- タイポグラフィ --- */
  --font-serif:"Shippori Mincho",serif;
  --font-sans:"Noto Sans JP",sans-serif;
  --font-mono:"JetBrains Mono","Noto Sans JP",monospace;

  /* --- レイアウト --- */
  --container-max:520px;
  --container-pad:18px;
  --corner:6px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--shell);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
a{color:inherit}
img{max-width:100%;display:block}

/* ===== 紙面ラッパー(額装) ===== */
.wrap{
  position:relative;
  max-width:var(--container-max);
  margin:0 auto;
  min-height:100vh;
  background-color:var(--paper);
  background-image:repeating-linear-gradient(135deg,rgba(32,29,23,.028) 0 2px,transparent 2px 7px);
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 40px 90px rgba(0,0,0,.55);
  isolation:isolate;
}
/* container-lines: 紙面の左右マージンを示す縦罫 */
.wrap::before,.wrap::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:1px;
  background:var(--line);
  opacity:.7;
  z-index:1;
  pointer-events:none;
}
.wrap::before{left:var(--container-pad)}
.wrap::after{right:var(--container-pad)}

.en{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase}

/* ===== ヘッダー(マストヘッド) ===== */
header{
  position:sticky;top:0;z-index:40;
  background:var(--shell);
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  border-bottom:3px double var(--shell-line);
}
.logo{display:flex;align-items:center;gap:10px;color:var(--paper);font-weight:700;text-decoration:none}
.logo .mark{
  width:30px;height:30px;
  display:grid;place-items:center;
  background:var(--accent);color:var(--paper);
  font-family:var(--font-serif);font-size:16px;font-weight:700;
  border:1px solid var(--shell-line);
}
.logo b{font-family:var(--font-serif);font-size:17px;letter-spacing:.05em}
.logo small{display:block;font-size:9px;color:var(--accent-soft);font-weight:500;letter-spacing:.16em;font-family:var(--font-mono)}
.btn-login{
  font-size:12px;font-family:var(--font-mono);letter-spacing:.03em;
  color:var(--paper);background:transparent;border:1px solid var(--shell-line);
  padding:7px 14px;font-weight:700;cursor:pointer;text-decoration:none;
}
.btn-login:hover{border-color:var(--accent-soft);color:var(--accent-soft)}

/* ===== ハンバーガーメニュー ===== */
.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:36px;height:36px;background:transparent;border:1px solid var(--shell-line);
  border-radius:4px;cursor:pointer;padding:0;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--paper)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-nav{
  display:none;flex-direction:column;
  background:var(--shell);border-bottom:3px double var(--shell-line);
  position:sticky;top:59px;z-index:39;
}
.site-nav.open{display:flex}
.site-nav a{
  padding:14px var(--container-pad);color:var(--paper);text-decoration:none;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.03em;
  border-top:1px solid var(--shell-line);
}
.site-nav a:hover,.site-nav a:focus{color:var(--accent-soft)}

/* ===== 見出し共通(号外風カウンター) ===== */
.wrap{counter-reset:sec}
section{counter-increment:sec;padding:28px var(--container-pad);position:relative}
section + section{border-top:1px solid var(--line)}
.sec-h{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.sec-h::before{content:"0" counter(sec);font-family:var(--font-mono);font-size:11px;color:var(--line-strong);letter-spacing:.05em}
.sec-h .en{font-size:11px;color:var(--accent);letter-spacing:.16em}
.sec-h h2{font-size:19px;font-weight:700;font-family:var(--font-serif)}
.page-title{padding:24px var(--container-pad) 0}
.page-title.in-section{padding:0 0 20px}
.page-title h1{font-size:21px;font-weight:700;font-family:var(--font-serif)}
.page-title p{font-size:12.5px;color:var(--ink-soft);margin-top:6px}

/* ===== コーナーマーク(container-lines/number-details準拠) ===== */
.corner-mark{position:relative}
.corner-mark::before,.corner-mark::after{
  content:"";position:absolute;width:var(--corner);height:var(--corner);
  border:1px solid var(--line-strong);pointer-events:none;
}
.corner-mark::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.corner-mark::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ===== ヒーロー(号外マストヘッド。グラデーション/ピルは廃止) ===== */
.hero{
  position:relative;
  background:var(--paper-deep);
  color:var(--ink);
  padding:34px var(--container-pad) 28px;
  border-bottom:3px double var(--line-strong);
}
.hero .badge{
  display:inline-block;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.1em;
  border:1px solid var(--line-strong);color:var(--accent-ink);
  padding:5px 12px;margin-bottom:18px;
}
.hero h1{font-family:var(--font-serif);font-size:26px;font-weight:700;line-height:1.5;margin-bottom:14px}
.hero h1 span{color:var(--accent)}
.hero p{font-size:13px;color:var(--ink-soft);margin-bottom:22px}
.cta{
  display:block;text-align:center;
  background:#06914a;color:#fff;font-weight:700;text-decoration:none;
  padding:15px;font-size:15px;border:1px solid #04652f;
}
.cta small{display:block;font-size:11px;opacity:.9;font-weight:400;margin-top:2px}
.hero .fine{margin-top:14px;font-size:10.5px;color:var(--ink-soft);line-height:1.6}

/* ===== 予想カード(出走表グリッド意匠) ===== */
.pick{border:1px solid var(--line);margin-bottom:16px}
.pick .top{
  background:var(--shell);color:var(--paper);
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 16px;
}
.pick .top .race{font-weight:700;font-size:13.5px;font-family:var(--font-mono);letter-spacing:.01em}
.pick .top .tag{
  font-size:10px;font-family:var(--font-mono);
  border:1px solid var(--shell-line);color:var(--accent-soft);
  padding:3px 8px;font-weight:700;letter-spacing:.03em;
}
.tag.price{background:var(--ok);border-color:var(--ok);color:#fff}
.pick .body{padding:16px}
.pick .free-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;border-bottom:1px dotted var(--line);padding-bottom:8px}
.pick .free-row .lbl{font-size:11px;color:var(--ink-soft);width:68px;font-family:var(--font-mono)}
.pick .boats{display:flex;gap:1px;border:1px solid var(--line-strong)}
.boat{
  flex:1;aspect-ratio:1;display:grid;place-items:center;
  font-family:var(--font-mono);font-weight:700;font-size:15px;
  border-right:1px solid var(--line-strong);
}
.boat:last-child{border-right:0}
.b1{background:var(--b1);color:var(--b1-ink)}
.b2{background:var(--b2);color:var(--b2-ink)}
.b3{background:var(--b3);color:var(--b3-ink)}
.b4{background:var(--b4);color:var(--b4-ink)}
.b5{background:var(--b5);color:var(--b5-ink)}
.b6{background:var(--b6);color:var(--b6-ink)}

/* ===== ロック(有料本文の被覆。ぼかしではなく網掛け=検閲紙面表現) ===== */
.locked{position:relative;margin-top:12px;border-top:1px dashed var(--line-strong);padding-top:14px;padding-bottom:60px;min-height:70px}
.locked .blur{
  display:inline-block;font-family:var(--font-mono);font-weight:700;font-size:14px;
  letter-spacing:2px;color:transparent;padding:3px 12px;
  background:repeating-linear-gradient(45deg,var(--ink) 0 3px,var(--line-strong) 3px 6px);
}
.locked .cover{
  position:absolute;inset:14px 0 0;display:grid;place-items:center;text-align:center;
  background:repeating-linear-gradient(135deg,var(--paper) 0 5px,var(--paper-deep) 5px 10px);
  border-top:1px solid var(--line-strong);
}
.locked .cover a{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--accent-ink);text-decoration:none;font-weight:700;font-size:13px;
  border-bottom:1px solid var(--accent);padding-bottom:2px;
}
.locked .cover a::before{content:"";display:inline-block;width:6px;height:6px;background:var(--accent)}
.locked .cover p{font-size:11px;color:var(--ink-soft);margin-top:8px}
.unlock-divider{border-top:1px dashed var(--line-strong);padding-top:14px;margin-top:14px}

/* ===== 購入導線 ===== */
.purchase-box{border:1px solid var(--line-strong);padding:14px;margin-top:12px}
.purchase-box .note.center{margin-top:10px}

/* ===== ボタン/リンク共通(丸角・グラデーション廃止/矩形+罫線) ===== */
.choose{
  display:block;width:100%;text-align:center;text-decoration:none;
  font-weight:700;font-size:14px;padding:13px;
  border:1px solid var(--ink);background:transparent;color:var(--ink);
  font-family:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;
}
.choose.o{background:var(--accent);border-color:var(--accent);color:#fff}
.choose.g{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.choose.free{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.choose.muted{background:var(--paper-deep);border-color:var(--line);color:var(--ink)}

/* ===== プラン(リボン廃止→罫線+タイポの推奨表示) ===== */
.plan{border:1px solid var(--line);padding:20px;margin-bottom:14px;position:relative}
.plan.reco{border-color:var(--accent);border-width:1px 1px 1px 3px}
.plan.reco .pname::before{
  content:"RECOMMENDED";display:block;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.16em;color:var(--accent);margin-bottom:8px;
}
.plan .pname{font-weight:700;font-size:16px;font-family:var(--font-serif)}
.plan .price{font-family:var(--font-mono);font-size:30px;color:var(--ink);margin:8px 0 4px;font-weight:700}
.plan .price small{font-size:13px;color:var(--ink-soft);font-family:var(--font-sans);font-weight:400}
.plan ul{list-style:none;margin:12px 0 16px}
.plan li{font-size:12.5px;padding:7px 0;padding-left:20px;position:relative;border-bottom:1px dotted var(--line)}
.plan li::before{content:"＋";position:absolute;left:0;color:var(--ok);font-weight:700}
.plan li.no{color:#a79d84}
.plan li.no::before{content:"−";color:#c9bd9e}

/* ===== フォーム(矩形+細罫線) ===== */
.form-card form{display:grid;gap:12px}
.form-card input,.form-card textarea{
  width:100%;border:1px solid var(--line-strong);background:var(--paper);
  padding:12px;font-size:14px;font-family:inherit;color:var(--ink);
}
.form-card input:focus,.form-card textarea:focus{outline:2px solid var(--accent-soft);outline-offset:-1px}
.form-card button{
  background:var(--ink);color:var(--paper);border:0;padding:14px;
  font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;
}
.form-card label{font-size:12px;color:var(--ink-soft);display:block;margin-bottom:4px;font-family:var(--font-mono)}
.form-card .agree{display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--ink-soft);font-family:var(--font-sans)}
.form-card .agree input{width:auto}
.line-login{display:block;text-align:center;background:#06C755;color:#fff;text-decoration:none;font-weight:700;padding:13px;border:1px solid #04a548;font-size:14px}
.divider{display:flex;align-items:center;gap:10px;color:var(--ink-soft);font-size:11px;margin:16px 0;font-family:var(--font-mono)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.note{font-size:11px;color:var(--ink-soft);margin-top:12px}
.note.center{text-align:center}
.alert{border:1px solid var(--line);border-left:3px solid var(--line-strong);padding:12px 14px;font-size:12.5px;margin-bottom:16px}
.alert.error{background:rgba(172,43,43,.06);border-left-color:var(--accent);color:var(--accent-ink)}
.alert.success{background:rgba(31,122,76,.07);border-left-color:var(--ok);color:#154f31}
.alert.info{background:var(--paper-deep);border-left-color:var(--line-strong);color:var(--ink-soft)}

/* ===== マイページ ステータスカード ===== */
.status-card{border:1px solid var(--line-strong);padding:18px 20px;margin-bottom:16px;background:var(--paper)}
.status-card__head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:8px;border-bottom:1px dotted var(--line)}
.status-card__name{font-family:var(--font-serif);font-size:17px;font-weight:700;color:var(--ink)}
.status-card__row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:12.5px;color:var(--ink-soft);border-top:1px dotted var(--line)}
.status-card__row:first-of-type{border-top:0}
.plan-badge{
  display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:700;
  padding:4px 12px;border:1px solid var(--line-strong);color:var(--ink-soft);letter-spacing:.04em;white-space:nowrap;
}
.plan-badge.standard{border-color:var(--accent);color:var(--accent)}
.plan-badge.premium{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ===== 購入履歴/マイページ用行 ===== */
.list-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dotted var(--line)}
.list-row:last-child{border-bottom:0}
.list-row .title{color:var(--ink);font-weight:700;font-size:13px;text-decoration:none}
.list-row .meta{font-size:11px;color:var(--ink-soft);margin-top:2px;font-family:var(--font-mono)}
.list-row .amount{text-align:right;white-space:nowrap;font-weight:700;font-size:13px;color:var(--ink);font-family:var(--font-mono)}
.list-row .refunded{font-size:10px;color:var(--danger);font-family:var(--font-sans)}
.stack{display:grid;gap:10px;margin-bottom:16px}
.info-block{border:1px solid var(--line);padding:14px;margin-bottom:16px}

/* ===== ユーティリティ(インラインstyle撤去用) ===== */
.u-muted{color:var(--ink-soft)}
.u-sm{font-size:12.5px}
.u-xs{font-size:11px}
.u-xxs{font-size:10px}
.u-right{text-align:right}
.u-center{text-align:center}
.u-bold{font-weight:700}
.u-mt-1{margin-top:8px}
.u-mt-2{margin-top:14px}
.u-mt-3{margin-top:20px}
.u-mb-1{margin-bottom:8px}
.u-mb-2{margin-bottom:12px}
.u-mb-3{margin-bottom:16px}
.u-nowrap{white-space:nowrap}
.u-pre{white-space:pre-line}

/* ===== 出走表(本日の開催) ===== */
.stadium-row .body p{font-size:12.5px;color:var(--ink-soft);font-family:var(--font-mono)}

/* ===== legal ===== */
.legal h2{font-size:15px;margin:20px 0 8px;font-family:var(--font-serif)}
.legal p,.legal li{font-size:13px;color:var(--ink-soft);margin-bottom:8px}
.legal table{width:100%;border-collapse:collapse;font-size:12.5px;margin:12px 0}
.legal table th,.legal table td{border:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
.legal table th{background:var(--paper-deep);width:34%;font-family:var(--font-mono);font-weight:700}
.legal .todo{background:var(--paper-deep);border:1px dashed var(--line-strong);padding:8px 10px;font-size:11.5px;color:var(--accent-ink)}

/* ===== フッター(外枠と一体化) ===== */
footer{background:var(--shell);color:var(--paper-deep);padding:26px var(--container-pad) 40px;font-size:11px;border-top:3px double var(--shell-line)}
footer h4{color:var(--paper);font-size:12px;margin-bottom:8px;letter-spacing:.06em;font-family:var(--font-serif)}
footer .disc{background:rgba(245,240,226,.05);border:1px solid var(--shell-line);border-left:3px solid var(--accent-soft);padding:12px;line-height:1.7;margin-bottom:16px}
footer .links{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
footer .links a{color:var(--accent-soft);text-decoration:none;font-size:11px}
footer .warn{display:flex;gap:10px;align-items:flex-start;background:rgba(172,43,43,.12);border:1px solid rgba(172,43,43,.4);border-left:3px solid var(--accent);padding:10px 12px;color:#e9c9c4;margin-bottom:14px}
footer .warn .label{font-family:var(--font-mono);font-weight:700;color:#f1d9d5;white-space:nowrap}
footer .cp{opacity:.6;font-size:10px;font-family:var(--font-mono)}

@media (max-width:380px){
  .hero h1{font-size:22px}
  .plan .price{font-size:26px}
}