:root { --fg:#1a1a1a; --muted:#6b6b6b; --line:#e5e5e5; --bg:#fff;
        --pos:#1a7f37; --neg:#c1121f; --warn:#b45309; --unknown:#6b6b6b; --info:#3b5bdb; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.7 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
       color:var(--fg); background:var(--bg); }
main { max-width:680px; margin:0 auto; padding:2rem 1.25rem 4rem; }
h1 { font-size:1.5rem; margin:0 0 .25rem; }
/* 제목과 「새로 입력」을 한 줄에. 좁은 화면에서도 버튼이 줄바꿈되지 않게
   flex:0 0 auto + white-space:nowrap 으로 고정한다. */
.header-row { display:flex; align-items:flex-start; justify-content:space-between;
              gap:.75rem; }
.header-row h1 { margin:0; }
.reset { flex:0 0 auto; white-space:nowrap; margin-top:.15rem;
         padding:.45rem .7rem; font-size:.82rem; font-weight:500;
         border:1px solid var(--line); border-radius:8px;
         background:var(--bg); color:var(--muted); cursor:pointer; }
.reset:hover { color:var(--fg); border-color:var(--muted); }
.reset:active { background:#f4f4f4; }

.tagline { color:var(--muted); font-size:.9rem; margin:.5rem 0 .5rem; }
/* I4(최종 리뷰): 서비스 범위(서울 전용)를 첫 화면에서 밝힌다. 이게 없으면
   경기 주소를 넣은 사람이 「범위 밖입니다」만 보고 자기 주소가 특별히 안 되는
   줄로 읽는다. */
.scope-notice { font-size:.85rem; color:var(--muted); margin:0 0 2rem; }
.scope-notice strong { color:var(--fg); }
.provisional-notice { font-size:.8rem; color:var(--warn); background:#fffbeb; border:1px solid #fde68a;
                       border-radius:8px; padding:.6rem .8rem; margin:0 0 1.5rem; }
form { display:grid; gap:1rem; margin-bottom:2rem; }
label { display:grid; gap:.35rem; font-size:.9rem; font-weight:600; }
input, select { padding:.7rem; border:1px solid var(--line); border-radius:8px; font-size:1rem; }
button { padding:.85rem; border:0; border-radius:8px; background:var(--fg); color:#fff;
         font-size:1rem; font-weight:600; cursor:pointer; }
.precision { font-size:.85rem; color:var(--muted); margin:0; }
.precision-note { font-size:.8rem; color:var(--warn); margin:.15rem 0 0; }
.context { font-size:.95rem; margin:.25rem 0 1rem; }
.result-heading { font-size:.75rem; text-transform:uppercase; letter-spacing:.04em;
                   color:var(--muted); margin:0 0 .5rem; }
.grade { font-size:1.6rem; font-weight:700; margin:.5rem 0; }
.grade.none { color:var(--neg); }
.note { color:var(--muted); font-size:.9rem; }
.dong-fact { font-size:.9rem; margin:.5rem 0 0; }
.area-type { font-size:.8rem; color:var(--muted); margin:.35rem 0 0; }
.rank { color:var(--muted); margin:0 0 1.5rem; }
/* 2026-08-09: .ai-narration / .ai-narration-note 규칙을 삭제했다. AI 해설
   경로를 걷어내면서 그 클래스를 내보내는 코드가 사라졌다 — 남겨두면 "이
   페이지에는 생성모델이 쓴 문단이 있다"고 말하는 죽은 CSS가 된다. */
.factors { list-style:none; padding:0; display:grid; gap:.5rem; }
.factor.positive { color:var(--pos); }
.factor.negative { color:var(--neg); }
.factor.caution  { color:var(--warn); }
.floor-note, .pattern-note { margin:1.5rem 0; padding:1rem; border-left:3px solid var(--warn);
                             background:#fffbeb; border-radius:0 8px 8px 0; }
.floor-note.critical { border-color:var(--neg); background:#fef2f2; }
.floor-note.info { border-color:var(--info); background:#eef1fd; }
.pattern-note.unknown { border-color:var(--unknown); background:#f5f5f5; color:var(--muted); }
.floor-note h3, .pattern-note h3 { margin:0 0 .5rem; font-size:.9rem; }
.basis { font-size:.8rem; color:var(--muted); }
.alternatives { margin-top:2.5rem; border-top:1px solid var(--line); padding-top:1.5rem; }
.alt-card { margin-bottom:1.25rem; }
.alt-card h3 { margin:0 0 .35rem; font-size:1rem; }
.alt-note { font-size:.8rem; color:var(--muted); margin:.35rem 0 0; }
.alt-note.critical { color:var(--neg); }
.alt-note.caution { color:var(--warn); }
.error { color:var(--neg); font-weight:600; }
#result:focus { outline:none; }
footer { margin-top:3rem; border-top:1px solid var(--line); padding-top:1rem;
         font-size:.8rem; color:var(--muted); }