@charset "UTF-8";
:root { color-scheme: light; --bg:#f6f5ef; --panel:#fffef9; --text:#253a30; --muted:#5c6b62; --line:#d7dfd4; --accent:#426b57; --soft:#e8eee3; --warm:#e9b977; --shadow:0 5px 24px #253a3006; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { color-scheme:dark; --bg:#17221d; --panel:#202e26; --text:#edf1e7; --muted:#bccabb; --line:#405348; --accent:#abcbb5; --soft:#304438; --warm:#d7af7c; --shadow:none; } }
:root[data-theme="dark"] { color-scheme:dark; --bg:#17221d; --panel:#202e26; --text:#edf1e7; --muted:#bccabb; --line:#405348; --accent:#abcbb5; --soft:#304438; --warm:#d7af7c; --shadow:none; }
:root[data-color="clay"] { --accent:#85573f; --soft:#f2e8de; }
:root[data-color="blue"] { --accent:#43677d; --soft:#e4ecf1; }
:root[data-theme="dark"][data-color="clay"] { --accent:#e1b399; --soft:#43362e; }
:root[data-theme="dark"][data-color="blue"] { --accent:#aacbdf; --soft:#293e4b; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"])[data-color="clay"] { --accent:#e1b399; --soft:#43362e; } :root:not([data-theme="light"])[data-color="blue"] { --accent:#aacbdf; --soft:#293e4b; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); line-height:1.75; font-size:16px; padding:30px 0 52px; overflow-wrap:anywhere; }
a { color:var(--accent); } button,input,select,textarea { font:inherit; } button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; } [hidden] { display:none!important; }
.trial { position:fixed; inset:0 0 auto; z-index:8; background:var(--soft); color:var(--text); text-align:center; font-size:12px; padding:4px 8px; min-height:30px; }
.topbar { max-width:1120px; margin:auto; padding:20px 28px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); }
.brand { font-size:24px; font-weight:700; text-decoration:none; display:flex; gap:8px; align-items:center; color:var(--text); white-space:nowrap; }
.brand-mark { background:var(--accent); color:var(--panel); border-radius:50%; width:36px; height:36px; text-align:center; line-height:34px; }
.toplinks { display:flex; align-items:center; gap:4px; } .toplinks a { min-height:44px; display:flex; align-items:center; padding:4px 9px; font-size:13px; text-decoration:none; }
main { max-width:1120px; padding:28px; margin:0 auto; min-width:0; min-height:70vh; }
h1 { font-size:clamp(27px,4vw,38px); line-height:1.4; margin:12px 0 22px; font-weight:650; } h2 { font-size:20px; margin:6px 0 14px; } h3 { font-size:17px; margin:8px 0; } p { margin:10px 0 18px; }
.intro,.hint,.muted { color:var(--muted); } .hint { font-size:13px; } .eyebrow { color:var(--accent); font-size:14px; } .back { display:inline-flex; min-height:44px; align-items:center; font-size:14px; text-decoration:none; }
.home { max-width:820px; margin:5vh auto 0; text-align:center; } .home-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:36px; }
.choice { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:250px; padding:24px 12px; border:1px solid var(--line); border-radius:26px; color:var(--text); text-decoration:none; font-weight:700; font-size:24px; background:var(--soft); }
.choice.go { background:var(--panel); } .choice > span { font-size:62px; line-height:1.5; } .choice small { font-size:13px; font-weight:400; margin-top:12px; color:var(--muted); }
button,.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:12px 20px; border:1px solid var(--accent); border-radius:14px; background:var(--accent); color:var(--panel); font-weight:650; text-decoration:none; max-width:100%; }
button.secondary,.button.secondary { color:var(--text); background:var(--panel); border-color:var(--line); } button.quiet { background:transparent; border-color:transparent; color:var(--muted); } button:disabled { opacity:.5; cursor:default; } .wide { width:100%; margin-top:14px; }
.tile-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .tile { display:flex; flex-direction:column; font-size:18px; min-height:120px; } .tile span { font-size:36px; line-height:1.3; }
.steps { display:flex; gap:8px; } .steps span { width:34px; height:34px; border-radius:50%; background:var(--soft); text-align:center; line-height:34px; color:var(--muted); } .steps [aria-current] { background:var(--accent); color:var(--panel); font-weight:700; }
.steps button { width:44px; min-height:44px; padding:0; border-radius:50%; background:var(--soft); border-color:var(--line); color:var(--text); } .steps span { width:44px; height:44px; line-height:44px; } button.back { padding:0; }
.panel { min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:24px; margin:20px 0; }
.columns,.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } .columns > *, .detail-grid > * { min-width:0; } .detail-grid { grid-template-columns:1.4fr 1fr; }
form { display:grid; gap:16px; } label { display:grid; gap:6px; margin:12px 0; font-size:15px; } input,select,textarea { width:100%; min-width:0; max-width:100%; min-height:50px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--text); } textarea { min-height:90px; resize:vertical; } input[type=file] { font-size:13px; }
.check { display:flex; align-items:center; gap:10px; min-height:48px; } input[type=checkbox] { width:24px; height:24px; min-height:24px; flex-shrink:0; accent-color:var(--accent); }
.reward-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .reward { border:1px solid var(--line); border-radius:12px; padding:10px; margin:0; } .reward.selected { background:var(--soft); border-color:var(--accent); } .checks,.actions,.date-buttons { display:flex; flex-wrap:wrap; gap:10px; }
.warning { background:var(--soft); border:1px solid var(--line); border-left:4px solid var(--accent); padding:16px; margin:18px 0; border-radius:10px; } .warning p { margin:6px 0; } .meeting { padding:16px; border:2px solid var(--accent); border-radius:14px; margin:18px 0; }
.filters { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:end; } .browse-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:24px; align-items:start; }
.map-wrap { min-width:0; } .map { display:block; width:100%; aspect-ratio:1; border:1px solid var(--line); border-radius:20px; overflow:hidden; } .map[data-choose] { cursor:crosshair; touch-action:manipulation; } .map-ground { fill:var(--soft); } .mountain { fill:var(--accent); opacity:.16; } .river { fill:none; stroke:var(--accent); opacity:.22; stroke-width:6; } .road { fill:none; stroke:var(--panel); stroke-width:4; } .map-label { font-size:3px; fill:var(--text); opacity:.65; } .origin { fill:var(--warm); stroke:var(--text); stroke-width:.3; }
.map-pin { cursor:pointer; } .range { fill:var(--accent); opacity:.17; } .pin { fill:var(--accent); stroke:var(--panel); stroke-width:.6; } .pin-label { fill:var(--panel); font-size:3.6px; text-anchor:middle; pointer-events:none; font-weight:700; } .map-pin:focus .range { opacity:.5; }
.map-tools { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; } .map-tools button { min-width:44px; min-height:44px; padding:6px 12px; }
.request-card { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:7px; width:100%; padding:18px; margin:0 0 12px; } .request-card strong { font-size:18px; } .request-card > span { font-size:13px; } .reward-line { color:var(--accent); }
.badge { display:inline-block; border-radius:20px; padding:3px 10px; background:var(--soft); color:var(--accent); font-size:12px; } .record { padding:18px 0; border-bottom:1px solid var(--line); } .record p,.history { white-space:pre-wrap; } .record time { display:block; font-size:12px; color:var(--muted); }
.ring { width:100%; max-width:310px; display:block; margin:auto; color:var(--accent); } .ring-base { stroke:var(--line); } .ring-node { fill:var(--accent); stroke:var(--panel); stroke-width:3; } .ring-edge { stroke:var(--accent); opacity:.25; stroke-width:2; } .ring-label { fill:var(--text); text-anchor:middle; } .ring-count { font-size:38px; } .ring-caption { text-align:center; color:var(--muted); font-size:13px; }
details summary { cursor:pointer; min-height:48px; padding:12px 0; } .empty { padding:24px 8px; color:var(--muted); } .preview { margin-top:16px; border:2px solid var(--accent); padding:16px; border-radius:14px; } .notice { border-left:3px solid var(--accent); padding-left:14px; }
footer { position:fixed; inset:auto 0 0; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); background:var(--panel); border-top:1px solid var(--line); color:var(--text); font-size:12px; text-align:center; z-index:8; }
#status { position:fixed; bottom:calc(56px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 24px); background:var(--text); color:var(--bg); border-radius:12px; padding:14px 18px; z-index:9; font-size:14px; } #status:empty { display:none; } #status[data-error=true] { border:3px solid var(--warm); } .skip { position:absolute; top:-100px; left:12px; padding:12px; background:var(--panel); z-index:10; } .skip:focus { top:32px; }
@media(max-width:760px) { .browse-grid,.columns,.detail-grid { grid-template-columns:1fr; gap:8px; } .tile-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .filters { grid-template-columns:1fr 1fr; gap:12px; } .filters .check { grid-column:1/-1; margin:0; } }
@media(max-width:480px) { .topbar { padding:12px 14px; gap:4px; } .brand { font-size:20px; gap:5px; } .brand-mark { width:28px; height:28px; line-height:26px; } .toplinks a { font-size:12px; padding:4px 6px; } main { padding:20px 16px; } .home { margin-top:2vh; } .home h1 { font-size:28px; } .home-choices { grid-template-columns:1fr; gap:16px; margin-top:24px; } .choice { min-height:180px; font-size:23px; padding:18px 12px; } .choice > span { font-size:44px; } .choice small { margin-top:6px; } .tile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .tile { min-height:112px; padding:12px 6px; } .panel { padding:18px; border-radius:18px; } .reward-options { grid-template-columns:1fr; } body { padding-bottom:calc(58px + env(safe-area-inset-bottom)); } }
@media(prefers-reduced-motion:no-preference) { a,button { transition:background-color .15s; } }