@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap');

:root { --ink:#18241f; --forest:#173f32; --green:#28755b; --sage:#dce9df; --cream:#f4f1e9; --paper:#fff; --line:#dce3de; --muted:#68736e; --orange:#d87942; --shadow:0 20px 55px rgba(24,47,38,.12); font-family:"DM Sans",system-ui,sans-serif; color:var(--ink); background:var(--cream); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:linear-gradient(180deg,#f5f2ea 0,#f9f8f4 70%); }
button,input { font:inherit; }
button { color:inherit; }
.topbar { height:72px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1240px)/2)); background:rgba(255,255,255,.88); backdrop-filter:blur(12px); border-bottom:1px solid rgba(32,65,52,.1); position:relative; z-index:5; }
.brand { display:flex; align-items:center; gap:11px; color:var(--forest); text-decoration:none; font-weight:700; letter-spacing:-.02em; font-size:1.08rem; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--forest); }
.brand-mark svg { width:27px; fill:none; stroke:#eef4ef; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.data-status { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.78rem; font-weight:600; }
.data-status span { width:8px; height:8px; border-radius:50%; background:#d49b38; box-shadow:0 0 0 4px #f6ead2; }
.data-status.ready span { background:#3a9a67; box-shadow:0 0 0 4px #dcefe4; }
.data-status.error span { background:#c95842; box-shadow:0 0 0 4px #f6ded9; }
main { width:min(1240px,calc(100% - 40px)); margin:0 auto; }
.intro { text-align:center; padding:64px 20px 42px; }
.kicker,.step-label { margin:0 0 11px; text-transform:uppercase; letter-spacing:.17em; color:var(--green); font-size:.7rem; font-weight:700; }
.intro h1 { margin:0; font-size:clamp(2.45rem,5vw,4.7rem); line-height:.98; letter-spacing:-.055em; font-weight:600; }
.intro h1 em { font-family:"Playfair Display",serif; font-weight:600; color:var(--green); }
.intro-copy { max-width:650px; margin:25px auto 29px; color:var(--muted); font-size:1.03rem; line-height:1.7; }
.method { display:flex; justify-content:center; align-items:center; gap:14px; color:#4b5b54; font-size:.75rem; font-weight:600; }
.method span { display:flex; align-items:center; gap:7px; }
.method b { width:22px; height:22px; display:grid; place-items:center; border:1px solid #b8c9bf; border-radius:50%; color:var(--green); font-size:.67rem; }
.method i { width:42px; height:1px; background:#cbd6cf; }
.workspace { min-height:670px; display:grid; grid-template-columns:minmax(0,1.65fr) minmax(360px,.75fr); border-radius:22px; overflow:hidden; background:var(--paper); box-shadow:var(--shadow); border:1px solid rgba(34,65,52,.11); }
.map-shell { position:relative; min-height:670px; overflow:hidden; }
#map { position:absolute; inset:0; }
.map-shell::after { content:""; pointer-events:none; position:absolute; inset:0; box-shadow:inset -22px 0 40px rgba(19,48,37,.06); }
.map-hint { position:absolute; top:18px; left:50%; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:10px; white-space:nowrap; padding:10px 16px; background:rgba(24,45,37,.92); color:#fff; border-radius:999px; font-size:.76rem; box-shadow:0 8px 25px rgba(17,40,31,.25); transition:.25s; }
.place-search { position:absolute; z-index:4; top:18px; left:18px; width:min(390px,calc(100% - 170px)); padding:9px; border:1px solid rgba(32,65,52,.13); border-radius:13px; background:rgba(255,255,255,.96); box-shadow:0 8px 28px rgba(21,46,36,.17); backdrop-filter:blur(10px); }.search-input-row { display:flex; align-items:center; gap:7px; }.search-input-row>svg { width:19px; min-width:19px; margin-left:3px; fill:none; stroke:#597067; stroke-width:1.8; }.search-input-row input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--ink); font-size:.78rem; }.search-input-row button { border:0; border-radius:8px; padding:8px 10px; background:var(--forest); color:#fff; font-size:.68rem; font-weight:700; cursor:pointer; }.search-destination { display:flex; align-items:center; gap:5px; margin-top:7px; padding-top:7px; border-top:1px solid #e7ebe8; }.search-destination>span { margin-right:auto; color:#87918c; font-size:.61rem; }.search-destination button { border:1px solid transparent; border-radius:999px; padding:4px 7px; background:#f1f3f1; color:#66736d; font-size:.6rem; cursor:pointer; }.search-destination button.active { border-color:#a7c5b3; background:#e5f1e8; color:var(--green); font-weight:700; }.search-results { max-height:285px; margin:8px -2px -2px; overflow:auto; border-top:1px solid #e2e8e4; }.search-result { width:100%; display:flex; gap:9px; align-items:start; padding:10px 5px; border:0; border-bottom:1px solid #edf0ee; background:transparent; text-align:left; cursor:pointer; }.search-result:hover { background:#f3f7f4; }.search-result:last-child { border-bottom:0; }.search-result i { width:25px; height:25px; min-width:25px; display:grid; place-items:center; border-radius:50%; background:#e5f0e8; color:var(--green); font-style:normal; font-size:.64rem; font-weight:700; }.search-result span { min-width:0; }.search-result strong,.search-result small { display:block; }.search-result strong { overflow:hidden; color:#31433b; font-size:.7rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }.search-result small { margin-top:2px; color:#929b97; font-size:.59rem; }.search-empty { margin:10px 4px 3px; color:#7e8984; font-size:.67rem; }.basemap-switch { position:absolute; z-index:4; top:18px; right:18px; display:flex; padding:4px; border-radius:10px; background:rgba(255,255,255,.95); box-shadow:0 7px 22px rgba(21,46,36,.16); }.basemap-switch button { border:0; border-radius:7px; padding:7px 9px; background:transparent; color:#66736d; font-size:.65rem; font-weight:700; cursor:pointer; }.basemap-switch button.active { background:var(--forest); color:#fff; }.basemap-switch button:disabled { opacity:.45; cursor:not-allowed; }
.pulse-dot { width:7px; height:7px; background:#9dd6b7; border-radius:50%; box-shadow:0 0 0 5px rgba(157,214,183,.14); }
.map-legend { position:absolute; z-index:2; left:18px; bottom:18px; display:flex; gap:16px; padding:9px 13px; border-radius:9px; background:rgba(255,255,255,.92); box-shadow:0 5px 20px rgba(28,47,39,.14); font-size:.7rem; font-weight:600; }
.map-legend span { display:flex; align-items:center; gap:6px; }
.legend-dot { width:8px; height:8px; border-radius:50%; }.legend-dot.observer { background:var(--green); }.legend-dot.target { background:var(--orange); }
.control-card { padding:30px 28px 24px; background:#fff; overflow:auto; }
.card-heading h2 { font-size:1.6rem; margin:0 0 7px; letter-spacing:-.035em; }
.card-heading>p:last-child { margin:0 0 22px; color:var(--muted); font-size:.82rem; line-height:1.5; }
.point-block { border-top:1px solid var(--line); padding:19px 0; }
.point-title { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.point-index { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:#e1eee5; color:var(--green); font-weight:700; font-size:.78rem; }.target-block .point-index { background:#f7e7dd; color:#b96031; }
.point-title div { display:flex; flex-direction:column; }.point-title strong { font-size:.88rem; }.point-title small { color:#8a948f; font-size:.68rem; }
.point-search { margin-bottom:12px; padding:7px; border:1px solid #dce4df; border-radius:9px; background:#fafcfb; transition:border-color .2s,box-shadow .2s; }.point-search:focus-within { border-color:#9bb9a7; box-shadow:0 0 0 3px rgba(43,108,86,.08); }.point-search .search-input-row>svg { width:17px; min-width:17px; }.point-search .search-input-row input { font-size:.7rem; }.point-search .search-input-row button { padding:7px 8px; font-size:.62rem; }.point-search .search-results { max-height:210px; margin:7px -2px -2px; }.point-search .search-result { padding:8px 4px; }.point-search .search-result strong { max-width:230px; }
.target-type-field { margin:0 0 13px; }.target-type-field>span { display:block; margin-bottom:6px; color:#6f7b75; font-size:.68rem; font-weight:600; }.target-type-options { display:grid; grid-template-columns:1fr 1fr; gap:5px; }.target-type-options button { border:1px solid #dce3df; border-radius:7px; padding:7px 5px; background:#f7f8f7; color:#68746e; font-size:.63rem; cursor:pointer; }.target-type-options button:hover { border-color:#b4c8bc; }.target-type-options button.active { border-color:#8db19c; background:#e8f3eb; color:var(--green); font-weight:700; }.target-type-field>small { display:block; min-height:15px; margin-top:6px; color:#84918a; font-size:.61rem; line-height:1.35; }
.target-data-sources { display:flex; flex-wrap:wrap; gap:5px; margin:-3px 0 12px; }.target-data-sources span { padding:4px 7px; border:1px solid #dce5df; border-radius:999px; background:#f5f8f6; color:#68766f; font-size:.57rem; line-height:1.2; }.target-data-sources span[data-source="official"] { border-color:#b9d7c5; background:#edf7f0; color:#27664f; }.target-data-sources span[data-source="terrain"] { border-color:#c9d8d0; background:#f0f5f2; color:#48675a; }.target-data-sources span[data-source="manual"] { border-color:#e5cf9f; background:#fff7e5; color:#795f26; }
.locate-button { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:13px; padding:10px; border:1px solid #a9c5b5; border-radius:9px; background:#f4faf6; color:var(--green); font-size:.77rem; font-weight:700; cursor:pointer; }
.locate-button:hover { background:#e8f4ec; }.locate-button svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.coordinate-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
label { display:block; color:#6f7b75; font-size:.68rem; font-weight:600; }
.field-hint { display:block; margin-top:4px; color:#96a09b; font-size:.6rem; font-weight:400; line-height:1.35; }
input[type=number] { width:100%; margin-top:5px; padding:9px 10px; border:1px solid #d6dfda; border-radius:8px; outline:none; background:#fbfcfb; color:var(--ink); font-size:.78rem; transition:.2s; }
input[type=number]:focus { border-color:#65a083; box-shadow:0 0 0 3px #e8f2ec; background:#fff; }
.range-label { margin-top:13px; }.range-label span { display:flex; justify-content:space-between; align-items:center; }.range-label output { color:var(--green); font-weight:700; }
input[type=range] { width:100%; margin:10px 0 0; accent-color:var(--green); }
.field-label { margin-top:11px; }
.quick-targets { margin-top:11px; display:flex; align-items:center; gap:8px; font-size:.67rem; color:#89928e; }.quick-targets button { border:0; border-radius:999px; background:#f1f3f1; padding:6px 9px; font-size:.67rem; color:#53605a; cursor:pointer; }.quick-targets button:hover { background:#e7ece8; }
.advanced { border-top:1px solid var(--line); padding:15px 0; }.advanced summary { cursor:pointer; font-size:.74rem; font-weight:700; color:#53615a; }.advanced-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:13px; }.check-label { grid-column:1/-1; display:flex; gap:8px; align-items:center; }.check-label input { accent-color:var(--green); }
.primary { width:100%; display:flex; justify-content:center; align-items:center; gap:8px; border:0; border-radius:11px; background:var(--forest); color:#fff; padding:14px; font-size:.84rem; font-weight:700; cursor:pointer; box-shadow:0 8px 18px rgba(23,63,50,.2); transition:.2s; }.primary:hover { background:#225a47; transform:translateY(-1px); }.primary:disabled { opacity:.6; cursor:wait; transform:none; }.primary svg { width:18px; fill:none; stroke:currentColor; stroke-width:2; }
#message { min-height:18px; margin:8px 2px 0; color:#ad4c38; font-size:.72rem; line-height:1.4; }
.hidden { display:none!important; }
.result-panel { margin:28px 0 70px; border:1px solid rgba(34,65,52,.11); border-radius:22px; background:#fff; box-shadow:var(--shadow); overflow:hidden; }
.result-summary { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:28px 32px; border-bottom:1px solid var(--line); background:linear-gradient(100deg,#f4faf6,#fff); }
.result-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:50%; background:#daf0e2; color:var(--green); }.result-icon.blocked { color:#b4563c; background:#f7e1db; }.result-icon.uncertain { color:#987021; background:#f7edd4; }.result-icon svg { width:29px; fill:none; stroke:currentColor; stroke-width:1.6; }
.result-copy .step-label { margin-bottom:6px; }.result-copy h2 { margin:0 0 4px; font-size:1.45rem; letter-spacing:-.03em; }.result-copy #resultExplanation { margin:0; color:var(--muted); font-size:.8rem; }.confidence-reason { max-width:720px; margin:9px 0 0!important; padding:8px 10px; border-left:3px solid #c89635; border-radius:0 7px 7px 0; background:#fff6df; color:#785b22!important; font-size:.72rem!important; line-height:1.45; }
.confidence-badge { border:1px solid #bcd5c5; background:#edf7f0; color:var(--green); border-radius:999px; padding:7px 11px; font-size:.68rem; font-weight:700; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); padding:22px 32px; border-bottom:1px solid var(--line); }.metrics>div { padding:2px 22px; border-right:1px solid var(--line); }.metrics>div:first-child { padding-left:0; }.metrics>div:last-child { border:0; }.metrics span,.metrics small { display:block; color:#84908a; font-size:.67rem; }.metrics strong { display:block; margin:3px 0; font-size:1.25rem; letter-spacing:-.03em; }
.analysis-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(250px,.7fr); gap:20px; padding:26px 32px 32px; }.chart-card,.detail-card { border:1px solid var(--line); border-radius:14px; padding:20px; }.chart-heading { display:flex; justify-content:space-between; align-items:start; }.chart-heading h3,.detail-card h3 { margin:0 0 4px; font-size:.93rem; }.chart-heading p { margin:0; color:#84908a; font-size:.7rem; }.chart-key { display:flex; gap:12px; color:#77837d; font-size:.65rem; }.chart-key span { display:flex; align-items:center; gap:5px; }.chart-key i { width:15px; height:3px; border-radius:2px; }.terrain-key { background:#789683; }.minimum-key { height:0!important; border-top:2px dashed #36735d; }.sight-key { background:var(--orange); }
.chart-wrap { height:260px; margin-top:12px; }.chart-wrap canvas { width:100%!important; height:100%!important; }
.chart-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:13px; color:#85908a; font-size:.65rem; }.chart-tools button { border:1px solid #d5dfd9; border-radius:7px; padding:6px 9px; background:#f8faf8; color:#53615a; font-size:.65rem; font-weight:700; cursor:pointer; }.chart-tools button:hover { border-color:#9db7a7; background:#eef5f0; }
.chart-scale-notice { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding:8px 10px; border:1px solid #ead6aa; border-radius:8px; background:#fff8e8; color:#7b642f; font-size:.65rem; line-height:1.4; }.chart-scale-notice button { flex:none; border:1px solid #d6bc7d; border-radius:7px; padding:5px 8px; background:#fff; color:#725a26; font-size:.62rem; font-weight:700; cursor:pointer; }
.curvature-card { display:flex; align-items:center; gap:20px; min-height:260px; border:1px solid #e7d6c9; border-radius:14px; padding:28px; background:linear-gradient(135deg,#fff9f4,#f7faf8); }.curvature-icon { width:68px; height:68px; flex:none; display:grid; place-items:center; border-radius:50%; background:#f6e5d8; color:#b75c39; font-size:2.4rem; line-height:1; }.curvature-card h3 { margin:0 0 9px; font-size:1.1rem; }.curvature-card p { max-width:590px; margin:0 0 12px; color:#4d5d56; font-size:.82rem; line-height:1.65; }.curvature-card small { color:#7d8883; font-size:.68rem; line-height:1.5; }
.detail-card>p { color:#58655f; font-size:.82rem; line-height:1.65; }.notice { display:flex; gap:10px; margin-top:18px; padding:12px; border-radius:10px; background:#f5f4ef; color:#68736e; }.notice svg { width:18px; min-width:18px; fill:none; stroke:currentColor; stroke-width:1.7; }.notice p { margin:0; font-size:.69rem; line-height:1.5; }
.visible-part { margin-top:17px; padding:14px; border:1px solid #d8e5dd; border-radius:11px; background:#f5faf6; }.visible-part>span,.visible-part>small { display:block; color:#75817b; font-size:.67rem; }.visible-part>strong { display:block; margin:3px 0 9px; color:var(--green); font-size:1.05rem; }.visibility-meter { height:7px; margin-bottom:8px; overflow:hidden; border-radius:999px; background:#dce5df; }.visibility-meter i { display:block; height:100%; width:0; border-radius:inherit; background:var(--green); transition:width .5s ease; }
footer { text-align:center; padding:0 20px 30px; color:#8b938f; font-size:.7rem; } footer a,.legal-page a { color:var(--green); }.legal-page { max-width:820px; padding:64px 20px 90px; }.legal-page h1 { margin:0 0 34px; font-size:clamp(2rem,5vw,3.5rem); letter-spacing:-.045em; }.legal-page section { margin:0 0 27px; padding-bottom:23px; border-bottom:1px solid var(--line); }.legal-page h2 { margin:0 0 8px; font-size:1.08rem; }.legal-page p { color:#58655f; line-height:1.7; }.back-link { font-weight:700; }
.maplibregl-ctrl-group { border-radius:10px!important; box-shadow:0 4px 18px rgba(21,46,36,.15)!important; overflow:hidden; }.custom-marker { width:34px; height:34px; display:grid; place-items:center; color:#fff; border:3px solid #fff; border-radius:50% 50% 50% 8px; transform:rotate(-45deg); box-shadow:0 5px 14px rgba(0,0,0,.25); font-size:.69rem; font-weight:700; }.custom-marker span { transform:rotate(45deg); }.custom-marker.observer { background:var(--green); }.custom-marker.target { background:var(--orange); }
@media(max-width:900px) { .workspace { grid-template-columns:1fr; }.map-shell { min-height:480px; }.control-card { padding:28px; }.analysis-grid { grid-template-columns:1fr; } }
@media(max-width:620px) { main { width:min(100% - 20px,1240px); }.topbar { height:62px; padding:0 14px; }.data-status { font-size:0; }.data-status span { display:block; }.intro { padding:43px 8px 30px; }.intro h1 { font-size:2.5rem; }.intro-copy { font-size:.9rem; }.method i { width:14px; }.method { gap:7px; }.method span { font-size:.63rem; }.workspace { border-radius:16px; }.map-shell { min-height:470px; }.basemap-switch { top:10px; right:10px; }.map-hint { top:auto; bottom:58px; max-width:calc(100% - 20px); overflow:hidden; font-size:.65rem; text-overflow:ellipsis; }.control-card { padding:24px 18px; }.result-summary { grid-template-columns:auto 1fr; padding:22px 18px; }.confidence-badge { grid-column:2; justify-self:start; }.metrics { grid-template-columns:1fr 1fr; padding:18px; gap:20px 0; }.metrics>div:nth-child(2) { border:0; }.metrics>div:nth-child(3) { padding-left:0; }.analysis-grid { padding:18px; }.chart-heading { gap:10px; }.chart-key { flex-direction:column; gap:4px; }.advanced-grid { grid-template-columns:1fr; }.check-label { grid-column:auto; } }