/* ==========================================================================
   てっけんスタンプラリー — スタイルシート

   連盟サイト（kantosrcl.org）の assets/style.css から配色・書体・
   カードの作りを持ってきて、基調色だけ #E03625 に置き換えたもの。
   連盟サイト側を変えたときは、こちらの :root と @font-face も合わせること。

   連盟サイトの配色との対応:
     --railway-blue        #161D61  →  --rally-red      #E03625
     --railway-blue-text   #232E9B  →  --rally-red-ink  #C92E1E
     --railway-light       #F4F7FC  →  --rally-light    #FCF6F4
     --text-main / --text-sub / --border-color はそのまま

   #E03625 は白との比が 4.45:1 で本文には足りない。白背景に置く文字と、
   白文字を乗せる塗りには --rally-red-ink（5.4:1）を使い、#E03625 は
   上端の帯・進捗バー・押印のような、文字が乗らないところに使う。

   数字の遊び: 幅の値には実在する軌間(mm)を、狭い順に当てている。
   きりのいい数字に「直して」しまわないよう注意。

     127px   5インチ（ライブスチーム・庭園鉄道）
     184px   7 1/4インチ（同上）
     381px   15インチ（ロムニー・ハイス&ダイムチャーチ鉄道）
     610px   2フィート（森林鉄道などのナローゲージ）
     762px   2フィート6インチ（軽便鉄道。黒部峡谷鉄道・四日市あすなろう鉄道など）
    1067px   在来線の狭軌（ケープゲージ）＝ .wrap の外形幅

   印刷用ポスターだけは縮尺が別で、紙の横幅 210mm を車体幅 2850mm に見立てている。
   つまり 210/2850 = 約1/13.6 の縮尺で、この中の幅も軌間を同じ縮尺に落とした値。

   105.74mm  1435mm＝標準軌… QR のドット部分（外周の余白は含まない）
    44.95mm   610mm＝2フィート… 紋章
   ========================================================================== */

:root {
    --rally-red: #E03625;       /* 基調色。文字が乗らない装飾に使う */
    --rally-red-ink: #C92E1E;   /* 文字にも塗りにも使える濃さ（白との比 5.4:1） */
    --rally-red-deep: #A32418;  /* ホバー */
    --rally-light: #FCF6F4;     /* ページ背景 */
    --panel: #FFFFFF;
    --text-main: #2C3E50;
    --text-sub: #5D6D7E;
    --border-color: #E2E8F0;
    --shadow: 0 1px 2px rgba(44, 62, 80, .04), 0 8px 24px rgba(44, 62, 80, .06);

    /* 印刷ポスターの書体。刷る人の端末に入っているものを名前で指名するだけで、
       フォントファイルは配信しない（新ゴは Morisawa Fonts の契約で「使う」ことは
       できても、woff2 にして配るには別途 Web フォントの契約が要るため）。
       入っていない端末では同梱の Kosugi Maru JP に落ちる。

       国鉄のスミ丸ゴシックに寄せたいときは、下の --poster-font を
       --poster-font-maru に差し替える（新丸ゴ。角が丸い分それらしくなる）。 */
    --poster-font-shingo:
        "A-OTF Shin Go Pro", "A P-OTF UD Shin Go Pr6N", "A-OTF UD Shin Go Pr6",
        "Shin Go", "UD Shin Go";
    --poster-font-maru:
        "A-OTF Shin Maru Go Pr6N", "A P-OTF Shin Maru Go Pr6N", "A-OTF Shin Maru Go Pr6",
        "A-OTF UD Shin Maru Go Pr6N", "Shin Maru Go", "UD Shin Maru Go";
    --poster-font: var(--poster-font-shingo);
}

/* 連盟サイトと同じ書体。font-display: optional なので、
   まだ落ちてきていない初回表示ではフォールバックのまま描画され、
   ページの表示が待たされることはない。 */
@font-face {
    font-family: 'Kosugi Maru JP';
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    src: url(fonts/kosugi-maru-jp-400.woff2) format('woff2');
    unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+3220-3247, U+3280-32B0, U+FF00-FFEF, U+4E00-9FFF, U+FFFD;
}

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    font-display: optional;
    size-adjust: 110%;
    src: url(fonts/quicksand-latin-400.woff2) format('woff2');
}

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 600;
    font-display: optional;
    size-adjust: 110%;
    src: url(fonts/quicksand-latin-600.woff2) format('woff2');
}

@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 700;
    font-display: optional;
    size-adjust: 110%;
    src: url(fonts/quicksand-latin-700.woff2) format('woff2');
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background-color: var(--rally-light);
    color: var(--text-main);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.8;
    -webkit-text-size-adjust: 100%;
}

/* 見出し・ナビ・ボタンは連盟サイトと同じく丸ゴシックにする。 */
.brand-font,
h1, h2,
.site-name,
.btn,
.badge,
.grid .spot .univ,
body.display h1 {
    font-family: 'Kosugi Maru JP', 'Quicksand', sans-serif;
}

/* --------------------------------------------------------------------------
   参加者のスタンプ帳
   -------------------------------------------------------------------------- */

/* 連盟サイトの .container と同じ作り。白いカードに上端だけ基調色の帯。
   スマホで見るものなので幅は狭く、余白も詰めている。 */
.wrap {
    box-sizing: border-box;
    max-width: 1067px; /* 在来線の狭軌 1067mm */
    margin: 1.5rem auto 3rem;
    padding: 2rem 1.5rem 2.5rem;
    background: var(--panel);
    border-radius: 12px;
    border-top: 6px solid var(--rally-red);
    box-shadow: var(--shadow);
}

header.site {
    text-align: center;
    margin-bottom: 2rem;
}

/* 連盟サイトのサブページと同じ指定（assets/style.css の .site-logo）。
   610px 以下で 80px に落とすところまで揃えてある（下の @media 参照）。 */
.site-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 1.2rem;
    border-radius: 8px;
}

.site-name {
    display: block;
    margin: 0 0 .3rem 0;
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--rally-red-ink);
    letter-spacing: .02em;
    line-height: 1.4;
}

header.site h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--rally-red-ink);
    letter-spacing: .02em;
    line-height: 1.4;
}

.progress {
    margin: 0 0 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border-color);
}

.progress .count {
    font-size: .88rem;
    color: var(--text-sub);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.progress .count b {
    font-size: 1.6rem;
    color: var(--rally-red-ink);
    font-variant-numeric: tabular-nums;
}

.bar {
    height: 8px;
    background: var(--border-color);
    border-radius: 99px;
    overflow: hidden;
    margin-top: .5rem;
}

.bar > i {
    display: block;
    height: 100%;
    background: var(--rally-red);
    border-radius: 99px;
    transition: width .6s ease;
}

.grid {
    display: grid;
    /* 184px は 7 1/4インチ軌間。狭い画面では下の @media で 5インチに落として
       2列を保つ（1列になるとスタンプ帳らしく見えないため）。 */
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: .75rem;
}

.grid .spot {
    position: relative;
    background: #FCFDFE;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: .9rem .8rem 1rem;
    min-height: 10.5rem;
    display: flex;
    flex-direction: column;
}

.grid .spot .univ {
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    color: var(--text-main);
    line-height: 1.5;
}

.grid .spot .club {
    color: var(--text-sub);
    font-size: .72rem;
    margin: .1rem 0 .5rem;
    line-height: 1.6;
}

.grid .spot .where { font-size: .7rem; color: var(--text-sub); line-height: 1.7; }
.grid .spot .where div + div { margin-top: .15rem; }

.grid .spot .meta {
    margin-top: auto;
    padding-top: .5rem;
    font-size: .7rem;
    color: var(--text-sub);
}

.grid .spot .meta .period { margin-top: .2rem; }

/* 連盟サイトの .uni-chips li と同じ丸いラベル。 */
.badge {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    padding: .1rem .7rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background-color: #F8FAFC;
    color: var(--text-sub);
    letter-spacing: .03em;
}

.badge.open {
    border-color: var(--rally-red-ink);
    color: var(--rally-red-ink);
    background-color: #FEF6F5;
}

/* 押印。取得済みのカードに朱色の丸印を斜めに重ねる。 */
.grid .spot.got {
    border-color: color-mix(in srgb, var(--rally-red) 32%, var(--border-color));
    background: #FFFCFB;
}

/* 押印が日付に重なって読めなくならないよう、最下段の右側を空けておく。 */
.grid .spot.got .meta { padding-right: 4.6rem; }

.grid .spot .mark {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    width: 4.6rem;
    height: 4.6rem;
    border: 3px double var(--rally-red);
    border-radius: 50%;
    color: var(--rally-red);
    display: grid;
    place-content: center;
    text-align: center;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .02em;
    transform: rotate(-11deg);
    opacity: .85;
    pointer-events: none;
}

.grid .spot .mark small { display: block; font-weight: 400; font-size: .5rem; opacity: .8; }

.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.75rem 0 0; }

/* 連盟サイトの .home-button と同じ作り。 */
.btn {
    appearance: none;
    display: inline-block;
    padding: .7rem 1.6rem;
    background-color: var(--rally-red-ink);
    border: 1px solid var(--rally-red-ink);
    color: #fff;
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.5;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s ease;
}

.btn:hover { background-color: var(--rally-red-deep); border-color: var(--rally-red-deep); }

.btn.ghost {
    background-color: #fff;
    color: var(--rally-red-ink);
    border-color: var(--border-color);
}

.btn.ghost:hover { background-color: var(--rally-light); border-color: var(--rally-red); }

footer.site {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    font-size: .74rem;
    color: var(--text-sub);
    text-align: center;
    line-height: 1.9;
}

footer.site p { margin: 0; }

/* --------------------------------------------------------------------------
   ダイアログ（コード手入力・引き継ぎ）
   -------------------------------------------------------------------------- */

dialog {
    border: none;
    border-top: 5px solid var(--rally-red);
    border-radius: 12px;
    background: var(--panel);
    color: var(--text-main);
    padding: 1.5rem 1.35rem 1.35rem;
    max-width: 381px; /* 15インチ軌間 */
    width: calc(100% - 2rem);
    box-shadow: var(--shadow);
}

dialog::backdrop { background: rgba(44, 62, 80, .5); }
dialog h2 { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--rally-red-ink); font-weight: 700; }
dialog p { font-size: .82rem; color: var(--text-sub); margin: .25rem 0 .75rem; line-height: 1.8; }

input[type=text], input[type=password] {
    width: 100%;
    padding: .65rem .8rem;
    font: inherit;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #fff;
    color: var(--text-main);
}

input[type=text]:focus, input[type=password]:focus {
    outline: 2px solid var(--rally-red);
    outline-offset: 1px;
    border-color: var(--rally-red);
}

input.code {
    font-size: 1.6rem;
    letter-spacing: .35em;
    text-align: center;
    text-indent: .35em;
    font-variant-numeric: tabular-nums;
}

.msg { font-size: .8rem; min-height: 1.4em; margin: .5rem 0 0; line-height: 1.6; }
.msg.err { color: var(--rally-red-ink); font-weight: 600; }
.msg.ok { color: #1E7A4C; font-weight: 600; }

.restore-code {
    font-size: 1.3rem;
    letter-spacing: .18em;
    text-align: center;
    padding: .8rem;
    border: 1px dashed var(--rally-red);
    border-radius: 8px;
    margin: .5rem 0;
    color: var(--rally-red-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: #FEF8F7;
}

/* --------------------------------------------------------------------------
   QR を読んだあとの画面 / 係員ログイン（body.result）
   -------------------------------------------------------------------------- */

body.result {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem 1rem;
}

body.result .card {
    background: var(--panel);
    border-radius: 12px;
    border-top: 6px solid var(--rally-red);
    box-shadow: var(--shadow);
    padding: 2.5rem 1.75rem 2rem;
    text-align: center;
    max-width: 381px; /* 15インチ軌間 */
    width: 100%;
}

body.result .emoji { font-size: 3rem; line-height: 1; }

body.result h1 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: .75rem 0 .5rem;
    color: var(--rally-red-ink);
    letter-spacing: .02em;
}

body.result p { font-size: .88rem; color: var(--text-sub); margin: .35rem 0; text-align: center; }

body.result .spot {
    font-size: 1.1rem;
    color: var(--text-main);
    font-weight: 700;
    margin: 1.1rem 0;
    line-height: 1.6;
}

body.result .spot small { font-weight: 400; font-size: .78rem; color: var(--text-sub); }
body.result .btn { margin-top: 1.25rem; }

form.login { display: flex; flex-direction: column; gap: .6rem; margin: 1.25rem 0 .5rem; }
form.login input { font-size: 1rem; }
form.login .btn { margin-top: .2rem; }
form.login .msg { margin: 0; text-align: left; }

/* --------------------------------------------------------------------------
   表示端末（body.display）
   -------------------------------------------------------------------------- */

body.display {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1rem;
    text-align: center;
}

body.display h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 .2rem;
    color: var(--rally-red-ink);
    letter-spacing: .02em;
}

body.display .club { color: var(--text-sub); font-size: .8rem; margin: 0 0 1rem; }

/* QR の上に線を引かない。読み取りの邪魔になるものは周りに置かない。 */
body.display .qr {
    background: #fff;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    line-height: 0;
    display: inline-block;
}

body.display .qr svg, body.display .qr canvas {
    width: min(56vh, 84vw);
    height: auto;
    display: block;
}

body.display .life {
    height: 6px;
    width: min(56vh, 84vw);
    background: var(--border-color);
    border-radius: 99px;
    margin: 1rem auto 0;
    overflow: hidden;
}

body.display .life > i { display: block; height: 100%; background: var(--rally-red); }

body.display .code {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .3em;
    font-variant-numeric: tabular-nums;
    margin: 1rem 0 .2rem;
    text-indent: .3em;
    color: var(--text-main);
}

body.display .code-label { font-size: .72rem; color: var(--text-sub); margin: 0; }
body.display .note { font-size: .74rem; color: var(--text-sub); margin-top: 1rem; line-height: 1.8; }
body.display .note a { color: var(--rally-red-ink); font-weight: 600; }
body.display .alert { color: var(--rally-red-ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   印刷用ポスター（body.print）

   紙に出すものなので、閲覧者の環境に関わらず白地に固定する。
   さらに、刷る紙面（.sheet）は白黒だけで組む。色刷りができる団体しか
   掲示できない、という状態にしないため。上端の帯も色文字も置かず、
   紋章はグレースケールに落として、モノクロのレーザープリンタや
   コンビニのコピー機でそのまま刷れるようにしてある。

   画面側（.toolbar / .notice）は刷られないので、こちらは配色を当てている。
   -------------------------------------------------------------------------- */

body.print {
    background: #ffffff;
    color: #111111;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.print .toolbar {
    width: 100%;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: .8rem;
    color: var(--text-sub);
    background: var(--rally-light);
    border-bottom: 1px solid var(--border-color);
}

body.print .notice {
    max-width: 610px; /* 2フィート軌間 */
    margin: 2rem 1rem;
    padding: 1.35rem;
    background: #fff;
    border: 1px solid var(--border-color);
    border-top: 5px solid var(--rally-red);
    border-radius: 12px;
    box-shadow: var(--shadow);
    color: var(--text-main);
}

body.print .notice h2 { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--rally-red-ink); }
body.print .notice p { font-size: .85rem; line-height: 1.9; }

body.print .notice pre, body.print .notice code {
    background: #F8FAFC;
    border: 1px solid var(--border-color);
    padding: .6rem .8rem;
    border-radius: 8px;
    font-size: .78rem;
    overflow-x: auto;
}

body.print .sheet {
    width: 210mm;
    height: 297mm;
    max-width: 100%;
    /* QR の全体幅はモジュール数で変わる（スポットIDが短いほど大きくなる）ので、
       いちばん膨らむ場合でも収まるよう上下の余白は控えめにしてある。 */
    padding: 13mm 16mm;
    margin: 1rem 0 3rem;
    background: #fff;
    border: 1px solid var(--border-color); /* 画面での紙の輪郭。印刷時は消す */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 本文用の 1.8 はポスターには広すぎて、紋章を大きくすると1枚に収まらない。
       紙面だけ行間を詰める。 */
    line-height: 1.35;
    /* 駅のサインらしくするため、紙面だけ書体を変える。:root の --poster-font を参照。 */
    font-family: var(--poster-font), 'Kosugi Maru JP',
        "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 幅は軌間の縮尺で決まっているので、丸みは連盟サイトと同じ割合（8px/100px＝8%）で指定する。 */
body.print .sheet-logo {
    width: 44.95mm; /* 610mm＝2フィート */
    height: 44.95mm;
    object-fit: contain;
    margin-bottom: 2mm;
    border-radius: 8%;
    filter: grayscale(100%); /* 白黒で刷ったときの出方を予測できるようにする */
}
body.print .brand { margin: 0; font-size: 5.5mm; letter-spacing: .28em; color: #333; }
body.print .title { margin: 2mm 0 0; font-size: 9mm; letter-spacing: .06em; color: #111; font-weight: 700; }
body.print .univ { margin: 7mm 0 0; font-size: 13mm; font-weight: 700; line-height: 1.2; color: #111; }
body.print .club { margin: 2mm 0 0; font-size: 5mm; color: #444; }
body.print .qr { margin: 6mm 0 0; padding: 4mm; background: #fff; line-height: 0; }
/* 実寸は print.html が入れる。QR の外周にはクワイエットゾーン（余白）が入るので、
   印刷されるドットの部分だけが 105.74mm＝1435mm（標準軌）四方になるよう、
   モジュール数から逆算した値をインラインで指定している。
   ここの値は JS が動かなかったときの保険。 */
body.print .qr canvas { width: 105.74mm; height: 105.74mm; display: block; }
body.print .lead { margin: 6mm 0 0; font-size: 5.5mm; font-weight: 700; color: #111; }

body.print .url {
    margin: 4mm 0 0;
    font-size: 3.6mm;
    color: #333;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

body.print .foot { margin: 3mm 0 0; font-size: 3.4mm; color: #555; }

@page { size: A4 portrait; margin: 0; }

@media print {
    body.print { display: block; }
    body.print .toolbar, body.print .notice { display: none; }
    body.print .sheet {
        width: 210mm;
        height: 297mm;
        margin: 0;
        border: 0;
        box-shadow: none;
        page-break-after: avoid;
    }
}

/* 610px は2フィート軌間。連盟サイトもこの閾値でロゴを 80px に落としている。 */
@media (max-width: 610px) {
    .site-logo { width: 80px; height: 80px; }
}

/* 762pxは軽便鉄道の軌間（2フィート6インチ）。 */
@media (max-width: 762px) {
    .wrap { margin: 0 auto; border-radius: 0; border-top-width: 5px; padding: 1.75rem 1.1rem 2.25rem; }
    body { background-color: var(--panel); }
    /* 127px は 5インチ軌間。これ以下に落とさないと、スマホで2列に収まらない。 */
    .grid { grid-template-columns: repeat(auto-fill, minmax(127px, 1fr)); }
}