/* 写真お渡しシステム APP CSS(design/mockup.html の「APP CSS」から流用。見た目を変える時は design も更新する) */
/* ---------- 1. 色・文字・余白(トークン) ---------- */
:root {
/* 夜(背景) */
--c-night: #120E26; /* 画面の背景 */
--c-night-2: #1C1738; /* 一段持ち上げた面(案内の箱・一覧の選択行) */
--c-night-3: #231D44; /* 入力欄の中 */
--c-line: #2E2757; /* 区切り線(飾り用) */
--c-edge: #7A70B3; /* 入力欄・副ボタンの枠(背景とのコントラスト 3:1 以上) */
/* 文字 */
--c-moon: #F4EFE2; /* 本文 */
--c-mist: #ABA4C9; /* 補足・ラベル */
--c-faint: #7D76A0; /* 入力欄のプレースホルダーだけに使う */
--c-number: #FFF6DC; /* 受付番号の数字 */
/* 灯り(操作できるもの) */
--c-lantern: #FFCF6E; /* 主ボタン・選択中・フォーカス */
--c-lantern-hi: #FFE2A3; /* 主ボタンを押した瞬間 */
--c-ink: #1A1430; /* 主ボタンの上の文字 */
/* 光の軌跡(線の飾りだけに使う。文字やボタンには使わない) */
--c-trail-gold: #FFD98A;
--c-trail-rose: #FF6FB5;
--c-trail-frost: #8FD9FF;
--c-trail-core: #FFFBEF; /* 線の芯。長時間露光で白く飛ぶ部分 */
/* 状態 */
--c-ok: #93E2B4;
--c-error: #FF9AA8;
/* 書体 */
--f-display: "Kaisei Decol", "Hiragino Mincho ProN", serif;
--f-ui: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
/* 文字サイズ(スマホ基準) */
--fs-xs: 13px;
--fs-sm: 14px;
--fs-base: 16px;
--fs-input: 17px; /* 16px 未満だと iPhone が入力時に拡大するので 17px */
--fs-md: 18px;
--fs-lg: 22px;
--fs-xl: 28px;
--fs-2xl: 32px;
/* 余白(4の倍数) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
--gutter: 20px; /* スマホの左右の余白 */
/* 角の丸み(役割ごとに変える) */
--r-photo: 4px;
--r-input: 10px;
--r-box: 12px;
--r-btn: 14px;
}
/* ---------- 2. 土台 ---------- */
.app, .app * { box-sizing: border-box; }
.app {
background: var(--c-night);
color: var(--c-moon);
font-family: var(--f-ui);
font-size: var(--fs-base);
line-height: 1.75;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
min-height: 100%;
container-type: inline-size; /* 写真の全幅表示の切り替えに使う */
}
.app h1, .app h2, .app h3, .app p, .app ol, .app ul, .app figure { margin: 0; }
.app ol, .app ul { padding: 0; list-style: none; }
.app a:not(.btn) { color: var(--c-lantern); text-underline-offset: 3px; }
.app :focus-visible { outline: 3px solid var(--c-lantern); outline-offset: 3px; }
.wrap { max-width: 480px; margin: 0 auto; padding: 0 var(--gutter); }
.stack > * + * { margin-top: var(--s-6); }
.brand {
font-family: var(--f-display);
font-size: var(--fs-sm);
letter-spacing: .04em;
color: var(--c-lantern);
}
.title {
font-family: var(--f-display);
font-weight: 700;
font-size: var(--fs-2xl);
line-height: 1.4;
letter-spacing: .02em;
}
.title--md { font-size: var(--fs-xl); }
.heading {
font-weight: 700;
font-size: var(--fs-md);
line-height: 1.5;
}
.text-sub { color: var(--c-mist); }
.text-sm { font-size: var(--fs-sm); line-height: 1.7; }
.text-xs { font-size: var(--fs-xs); line-height: 1.6; }
.rule { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-10) 0; }
/* ---------- 3. 光の軌跡(SVG) ---------- */
/* 1本の線を「にじみ・色・白い芯」の3層で重ねる。