/* 이츠퍼밋 1단계 — 시안 「이츠퍼밋 모바일 땅 스캐너」(2026-11-09 승인) 값. 색 · 크기는 변수로만.
   글자 크기 버튼(가가)은 --scale 을 1 → 1.125 → 1.25 로 바꾼다. 안쪽 크기는 em. */
:root {
  --navy: #1a2d5a; --navy7: #24407a; --navy50: #eef2f8; --ink: #141a24;
  --s7: #3a4555; --s6: #4d5868; --s5: #647082; --line: #e1e5eb; --line2: #c5ccd6;
  --ok: #1d7347; --okbg: #e5f2eb; --warn: #a8530a; --warnbg: #fcf0e1; --warnln: #efc995; --warntx: #6b3606;
  --risk: #b42318; --riskbg: #fbe9e7; --cyan: #0DC8FE;
  --scale: 1;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  color: var(--ink); background: #5d6b5a; word-break: keep-all; -webkit-font-smoothing: antialiased; }
a { color: var(--navy); } a:hover { color: var(--navy7); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
[hidden] { display: none !important; }

.app { position: fixed; inset: 0; overflow: hidden; }
.map { position: absolute; inset: 0; z-index: 0; background: #5d6b5a; }
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255,255,255,.75) !important; }
.top, .sheet, .jrow, .scan, .overlay, .here, .toast { font-size: calc(17px * var(--scale)); line-height: 1.5; }

/* ① 위쪽 */
.top { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 20; display: flex; flex-direction: column; gap: .6em; max-width: 460px; }
.brand { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: .45em; font-weight: 800; color: var(--navy); background: rgba(255,255,255,.95);
  padding: .35em .75em .35em .35em; border-radius: 999px; box-shadow: 0 2px 8px rgba(20,26,36,.18); text-decoration: none; }
.logo img { width: 1.55em; height: 1.55em; }
.gaga { height: 2.4em; min-width: 3em; padding: 0 .7em; border-radius: 999px; background: #fff; border: 1px solid var(--line2);
  display: flex; align-items: center; gap: 2px; font-weight: 800; box-shadow: 0 2px 8px rgba(20,26,36,.14); }
.gaga .g2 { font-size: 1.2em; }
.search { background: #fff; border-radius: 1.05em; padding: .8em; box-shadow: 0 6px 22px rgba(20,26,36,.22); display: flex; flex-direction: column; gap: .6em; }
.sq-t { font-size: 1.18em; font-weight: 800; }
.sq-row { display: flex; gap: .5em; }
.sq-in { flex: 1; min-width: 0; height: 3.3em; border: 1.5px solid var(--line2); border-radius: .85em; display: flex; align-items: center; gap: .5em; padding: 0 .8em; background: #f9fafb; color: var(--s5); }
.sq-in:focus-within { border-color: var(--navy); }
.sq-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: .95em; color: var(--ink); }
.sq-in svg { width: 1.2em; height: 1.2em; flex: none; }
.mic { flex: none; width: 4.4em; height: 3.3em; border-radius: .85em; background: var(--navy); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .78em; font-weight: 700; }
.mic svg { width: 1.6em; height: 1.6em; }

.here { position: absolute; right: 14px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 20; height: 3.1em; padding: 0 1em; border-radius: 999px; background: #fff;
  box-shadow: 0 4px 14px rgba(20,26,36,.25); display: flex; align-items: center; gap: .45em; font-weight: 700; color: var(--navy); }
.here svg { width: 1.3em; height: 1.3em; }

.jrow { position: absolute; left: 10px; right: 10px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 20; display: flex; align-items: flex-end; gap: .4em; max-width: 460px; }
.jimg { width: 4.4em; flex: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.bub { flex: 1; background: var(--ink); color: #fff; border-radius: 1.05em 1.05em 1.05em .25em; padding: .8em .95em; font-weight: 600; line-height: 1.45; margin-bottom: 1.2em; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.bub b { color: #7fe3ff; }

/* ② 듣는 중 */
.overlay { position: absolute; inset: 0; z-index: 40; background: rgba(14,20,34,.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.listen { display: flex; flex-direction: column; align-items: center; gap: 1em; color: #fff; text-align: center; max-width: 420px; }
.ring { width: 7.8em; height: 7.8em; border-radius: 50%; background: var(--navy); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 .8em rgba(13,200,254,.25), 0 0 0 1.8em rgba(13,200,254,.12); animation: pulse 1.6s ease-in-out infinite; }
.ring svg { width: 3.2em; height: 3.2em; color: #fff; }
.lt { font-size: 1.3em; font-weight: 800; margin-top: .8em; }
.heard { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: .95em; padding: .8em .95em; font-size: 1.1em; font-weight: 600; }
@keyframes pulse { 50% { box-shadow: 0 0 0 1.1em rgba(13,200,254,.3), 0 0 0 2.3em rgba(13,200,254,.1); } }

/* ③ 스캔 */
.scan { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.scanpill { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 12px; right: 12px; max-width: 460px; background: #fff; border-radius: .95em; padding: .8em .95em; box-shadow: 0 6px 22px rgba(20,26,36,.22); display: flex; flex-direction: column; gap: .6em; }
.sp-t { display: flex; align-items: center; gap: .6em; font-size: 1.1em; font-weight: 800; }
.dot3 { display: inline-flex; gap: 4px; }
.dot3 i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); display: block; animation: blink 1s infinite; }
.dot3 i:nth-child(2) { animation-delay: .2s; } .dot3 i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: .25; } }
.chk { display: flex; flex-direction: column; gap: .35em; }
.chk div { display: flex; align-items: center; gap: .5em; }
.chk svg { width: 1.2em; height: 1.2em; flex: none; }
.c-ok { color: var(--ok); } .c-wait { color: var(--s5); }
.vis { position: absolute; left: 50%; top: 34%; width: 8em; transform: translate(-50%, -50%); z-index: 2; filter: drop-shadow(0 10px 14px rgba(0,0,0,.4)); animation: hover 2.2s ease-in-out infinite; }
.beam { position: absolute; left: 50%; top: 34%; width: 10em; height: 9em; transform: translate(-50%, 0); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(13,200,254,.65), rgba(13,200,254,.08)); }
@keyframes hover { 50% { transform: translate(-50%, calc(-50% - 8px)); } }
.pm-scan { animation: pmdash 1.1s linear infinite; }
@keyframes pmdash { to { stroke-dashoffset: -32; } }

/* 시트 */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 25; background: #fff; border-radius: 1.4em 1.4em 0 0; box-shadow: 0 -8px 28px rgba(20,26,36,.22);
  max-height: 62%; display: flex; flex-direction: column; padding: .55em 1.05em calc(1em + env(safe-area-inset-bottom)); }
.sheet.tall { max-height: 88%; }
.grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line2); margin: 0 auto .35em; flex: none; }
.close { position: absolute; right: .7em; top: .7em; width: 2.6em; height: 2.6em; border-radius: 50%; background: #f1f3f6; display: flex; align-items: center; justify-content: center; }
.close svg { width: 1.3em; height: 1.3em; }
.sheet-back { position: absolute; left: .7em; top: .7em; z-index: 1; height: 2.6em; padding: 0 .9em 0 .6em; border-radius: 999px; background: #f1f3f6;
  display: flex; align-items: center; gap: .3em; font-weight: 800; color: var(--navy); }
.sheet-back svg { width: 1.3em; height: 1.3em; }
.sheet.has-back .sheet-body { padding-top: 2.9em; }
.sheet-body { overflow-y: auto; display: flex; flex-direction: column; gap: .8em; padding-top: .2em; }
.sheet-body > * { flex: none; }
.addr { font-size: 1.4em; font-weight: 800; letter-spacing: -.3px; line-height: 1.25; padding-right: 2.4em; }
.meta { font-size: .88em; color: var(--s6); }
.q { font-size: 1.12em; font-weight: 800; padding-right: 2.4em; }
.loading { padding: 2em 0; text-align: center; color: var(--s6); font-weight: 600; }
.say { display: flex; gap: .6em; align-items: flex-start; background: var(--navy50); border-radius: .85em; padding: .7em; }
.say img { width: 2.7em; flex: none; }
.say p { margin: 0; font-weight: 600; line-height: 1.45; }
.zbar { display: flex; height: 1.8em; border-radius: .5em; overflow: hidden; gap: 2px; }
.zbar div { display: flex; align-items: center; justify-content: center; font-size: .82em; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.zleg { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3em 1em; font-size: .88em; font-weight: 600; margin-top: .35em; }
.sw { display: inline-block; width: .75em; height: .75em; border-radius: 3px; margin-right: .35em; vertical-align: -1px; }
.stack8 { display: flex; flex-direction: column; gap: .45em; }
.lbl { font-size: .88em; font-weight: 800; color: var(--s6); }
.chips { display: flex; flex-wrap: wrap; gap: .35em; }
.chip { min-height: 2em; padding: .2em .7em; border-radius: 999px; background: #f1f3f6; border: 1px solid var(--line); display: inline-flex; align-items: center; font-size: .88em; font-weight: 600; color: var(--s7); }
.chip.w { background: var(--warnbg); border-color: var(--warnln); color: var(--warntx); }
.src { font-size: .78em; color: var(--s5); display: flex; align-items: flex-start; gap: .35em; }
.src svg { width: 1.1em; height: 1.1em; flex: none; margin-top: .15em; }

.btn { min-height: 3.3em; border-radius: .85em; display: flex; align-items: center; justify-content: center; gap: .5em; font-size: 1.05em; font-weight: 700; padding: .4em 1em; text-align: left; }
.btn svg { width: 1.3em; height: 1.3em; flex: none; }
.b-pri { background: var(--navy); color: #fff; }
.b-sec { background: #fff; color: var(--ink); border: 1.5px solid var(--line2); }
.b-ghost { min-height: 2.8em; color: var(--navy); font-size: .95em; }
.b-left { justify-content: space-between; }
.cand-t { display: flex; flex-direction: column; gap: .1em; }
.cand-main { font-weight: 800; }
.cand-sub { font-size: .78em; font-weight: 600; opacity: .75; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.span2 { grid-column: 1 / -1; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.tile { height: 5.4em; border-radius: .95em; border: 1.5px solid var(--line2); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em; font-size: 1.05em; font-weight: 700; }
.tile svg { width: 1.75em; height: 1.75em; color: var(--navy); }
.tile:hover, .tile:focus-visible { border: 2.5px solid var(--navy); background: var(--navy50); }

.ans-h { display: flex; gap: .7em; align-items: center; padding-right: 2.4em; }
.ans-h img { width: 3.3em; flex: none; }
.pill { display: inline-flex; align-items: center; gap: .35em; min-height: 1.8em; padding: 0 .7em; border-radius: 999px; font-size: .88em; font-weight: 800; }
.pill svg { width: 1.1em; height: 1.1em; }
.p-ok { background: var(--okbg); color: var(--ok); border: 1px solid #b7dcc6; }
.p-warn { background: var(--warnbg); border: 1px solid var(--warnln); color: var(--warntx); }
.p-risk { background: var(--riskbg); color: var(--risk); border: 1px solid #f1b8b2; }
.ans-t { font-size: 1.24em; font-weight: 800; line-height: 1.3; letter-spacing: -.3px; margin-top: .35em; }
.rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: .85em; overflow: hidden; }
.row { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; gap: .6em; align-items: center; padding: .6em .7em; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row > svg { width: 1.5em; height: 1.5em; }
.rt { font-size: .85em; font-weight: 700; color: var(--s6); }
.rv { font-weight: 700; line-height: 1.35; }
.why { min-height: 2.3em; padding: 0 .6em; border-radius: .6em; border: 1.5px solid var(--navy); color: var(--navy); font-size: .88em; font-weight: 800; }
.i-ok { color: var(--ok); } .i-warn { color: var(--warn); } .i-risk { color: var(--risk); }
.note-box { display: flex; gap: .5em; align-items: flex-start; background: #f4f6f9; border-radius: .7em; padding: .6em .7em; font-size: .86em; line-height: 1.5; font-weight: 600; color: var(--s7); }
.note-box.w { background: var(--warnbg); border: 1px solid var(--warnln); color: var(--warntx); }
.note-box svg { width: 1.2em; height: 1.2em; flex: none; margin-top: .1em; }
.legal { border: 1px solid var(--line); border-radius: .85em; padding: .75em .85em; display: flex; flex-direction: column; gap: .5em; }
.lg-t { font-weight: 800; line-height: 1.4; }
.quote { background: #f7f8fa; border-radius: .6em; padding: .65em .75em; font-size: .9em; line-height: 1.6; color: var(--s7); }
.lg-m { font-size: .78em; color: var(--s5); }
.ask { background: var(--navy); color: #fff; border-radius: .85em; padding: .85em; display: flex; flex-direction: column; gap: .6em; }
.ask-t { font-weight: 800; }
.ask p { margin: 0; line-height: 1.6; }
.cp { align-self: flex-start; min-height: 2.4em; padding: 0 .85em; border-radius: .6em; background: #fff; color: var(--navy); font-weight: 800; font-size: .9em; display: flex; align-items: center; gap: .35em; }
.cp svg { width: 1.1em; height: 1.1em; }

.toast { position: absolute; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; background: var(--ink); color: #fff;
  padding: .6em 1em; border-radius: .8em; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.3); max-width: 90%; }

/* 넓은 화면: 시트를 오른쪽 판정 칸으로(관제실 배치의 1차 모양) */
@media (min-width: 900px) {
  .sheet, .sheet.tall { left: auto; right: 16px; top: 16px; bottom: 16px; width: 440px; max-height: none; border-radius: 1.2em; }
  .grab { display: none; }
  .here { right: 472px; }
  .toast { left: calc(50% - 230px); }
}

@media (prefers-reduced-motion: reduce) { .pm-scan, .ring, .vis, .dot3 i { animation: none; } }

@media print {
  .map, .top, .here, .jrow, .scan, .overlay, .toast, .close, .sheet-back, .grid2, .b-ghost, .why { display: none !important; }
  .sheet.has-back .sheet-body { padding-top: 0; }
  .app { position: static; } .sheet { position: static; box-shadow: none; max-height: none; }
  .sheet-body { overflow: visible; }
}