/* ═══════════════════════════════════════════════════════════════════
   LATTICE — 티타늄 마감

   임플란트는 티타늄이다. 화면도 그래야 한다.

   규칙 셋:
   1) 색이 아니라 '빛'으로 만든다. 금속은 단색이 아니라 각도에 따라 밝기가
      변하는 표면이다. 모든 면에 미세한 그라디언트와 안쪽 하이라이트를 넣는다.
   2) 금색은 돈에만 쓴다. 교환으로 되찾는 금액, 재고 가치. 아무데나 쓰면
      금색이 싸 보인다.
   3) 화려함이 정보를 가리면 실패다. 진료실에서 3초에 숫자를 읽어야 한다.
      광택은 배경에, 대비는 숫자에.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* 티타늄 계조 — 흰색이 아니라 아주 옅은 청회색에서 출발한다 */
  --ti-50:#FCFDFE;  --ti-75:#F6F9FB;  --ti-100:#EFF3F7;
  --ti-200:#E3E9EF; --ti-300:#D2DAE3; --ti-400:#B6C1CD;
  --ti-500:#93A1B0;

  /* 그래파이트 — 상단바와 어두운 면 */
  --gr-900:#0E141B; --gr-800:#16202B; --gr-700:#1E2C3A; --gr-600:#27384A;

  --ink:#101A24;  --ink2:#3A4C60;  --muted:#78899B;
  --line:rgba(16,26,36,.10);
  --edge:rgba(255,255,255,.92);        /* 금속 윗면의 빛나는 모서리 */

  --accent:#0FB5A0;  --accent-dk:#0A8C7C;
  --gold:#C8A44A;    --gold-lt:#E6CE8A;  --gold-dk:#9A7B24;
  --red:#D6455B;     --amber:#C2802B;

  --bg:
    radial-gradient(1200px 700px at 12% -8%, #FFFFFF 0%, rgba(255,255,255,0) 55%),
    radial-gradient(900px 600px at 100% 0%, #EAF1F6 0%, rgba(234,241,246,0) 60%),
    linear-gradient(180deg, #F4F7FA 0%, #EAEFF5 100%);

  /* 브러시드 메탈 판 — 카드의 기본 표면 */
  --metal:
    linear-gradient(158deg,
      rgba(255,255,255,.98) 0%,
      rgba(248,251,253,.96) 22%,
      rgba(232,238,245,.94) 52%,
      rgba(245,249,252,.97) 78%,
      rgba(226,234,242,.94) 100%);
  --metal-edge:
    inset 0 1px 0 var(--edge),
    inset 0 -1px 0 rgba(16,26,36,.06),
    inset 1px 0 0 rgba(255,255,255,.55),
    inset -1px 0 0 rgba(16,26,36,.03);
  --lift: 0 10px 26px -12px rgba(14,26,40,.30), 0 2px 6px -2px rgba(14,26,40,.12);
  --lift-sm: 0 4px 12px -6px rgba(14,26,40,.24), 0 1px 3px -1px rgba(14,26,40,.10);

  --radius:16px;
  --shadow:var(--lift-sm);
}

body{
  background:var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}

/* ───────────── 카드 = 티타늄 판 */
.card, .stat{
  background:var(--metal);
  border:1px solid rgba(255,255,255,.75);
  border-radius:var(--radius);
  box-shadow:var(--metal-edge), var(--lift-sm);
  position:relative;
}
/* 판 위를 지나가는 빛 한 줄 */
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 45%,
    rgba(255,255,255,0) 60%);
  opacity:.6;
}
.card > *{position:relative}
.card h3{letter-spacing:-.02em;font-weight:800}
.card h3 .count{
  background:linear-gradient(180deg,#EDF2F7,#DFE7EF);
  color:var(--ink2);border:1px solid rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}

.stat b{letter-spacing:-.035em;font-weight:800;
  background:linear-gradient(180deg,#1B2836,#3D5064);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat.alert b{background:linear-gradient(180deg,#C7304A,#E2596E);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat.warn b{background:linear-gradient(180deg,#A9701F,#D6A24A);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);letter-spacing:0}

/* ───────────── 상단바 = 어두운 그래파이트 + 반사 */
.topbar{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(135deg, var(--gr-900) 0%, var(--gr-700) 55%, #16323A 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 6px 20px -10px rgba(0,0,0,.6);
}
.site-btn{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  letter-spacing:-.02em;
}
.chip{
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.12);color:#D6E6EC}

/* ───────────── 버튼 = 깎아낸 금속 */
.btn{
  background:linear-gradient(180deg,#FFFFFF 0%, #F1F5F9 55%, #E6ECF3 100%);
  border:1px solid rgba(16,26,36,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--lift-sm);
  letter-spacing:-.015em;
  transition:transform .08s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(16,26,36,.16)}
.btn.primary{
  background:linear-gradient(180deg,#2C3E51 0%, #1A2836 60%, #131E29 100%);
  border-color:rgba(0,0,0,.30);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), var(--lift);
}
.btn.teal{
  background:linear-gradient(180deg,#2FD3BC 0%, #12B4A0 55%, #0A9587 100%);
  border-color:rgba(6,90,80,.35);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40), var(--lift);
}
.btn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(240,245,249,.85))}
.btn.danger{color:var(--red);border-color:rgba(214,69,91,.30);
  background:linear-gradient(180deg,#FFF,#FDF2F4)}

/* ───────────── 주문 히어로 = 어두운 금속 + 금색 숫자 */
.reorder-hero{
  background:
    radial-gradient(140% 120% at 8% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 45%),
    linear-gradient(140deg, #0E141B 0%, #1C2B39 45%, #123A40 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 16px 34px -18px rgba(0,0,0,.7);
  border-radius:20px;
}
.rh-num{
  background:linear-gradient(180deg,#FFFFFF 0%, #CFE3EA 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.04em}
.rh-label{color:#8FB4C4;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
/* 그라디언트 글자 안의 보조 문구까지 투명해지면 안 된다 */
.rh-num span{-webkit-text-fill-color:#9FC2D0;color:#9FC2D0;background:none}
.stat b span, .hero-num span{-webkit-text-fill-color:inherit}
.rh-kinds{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08)}
.rh-kinds button{color:#A9C4D2}
.rh-kinds button.on{
  background:linear-gradient(180deg,#FFFFFF,#E8EFF4);color:var(--gr-900);
  box-shadow:0 2px 6px rgba(0,0,0,.28)}

/* 교환 히어로 = 금 (돈이 나오는 유일한 화면) */
.hero{
  background:
    radial-gradient(120% 130% at 10% -10%, rgba(255,255,255,.30), rgba(255,255,255,0) 48%),
    linear-gradient(140deg, #8A6A16 0%, #C8A44A 42%, #E6CE8A 70%, #B98F30 100%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 14px 30px -16px rgba(120,88,16,.7);
  border-radius:20px;color:#2A2008;
}
.hero.calm{
  background:
    radial-gradient(120% 130% at 10% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 48%),
    linear-gradient(140deg,#243342,#3C536A);color:#fff}
.hero-num{letter-spacing:-.04em;
  text-shadow:0 1px 0 rgba(255,255,255,.35)}
.hero-sub{opacity:.85}
.hero-warn{background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.22)}

/* ───────────── 탭바 = 유리 위의 금속 */
.tabbar{
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(244,248,251,.96));
  backdrop-filter:blur(14px) saturate(1.3);
  border-top:1px solid rgba(255,255,255,.9);
  box-shadow:0 -1px 0 rgba(16,26,36,.06), 0 -10px 24px -18px rgba(14,26,40,.5);
}
.tabbar button{color:var(--muted);letter-spacing:-.01em}
.tabbar button.on{color:var(--gr-900)}
.tabbar button.fab .ico{
  background:linear-gradient(180deg,#2FD3BC,#0A9587);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
             0 8px 18px -6px rgba(10,149,135,.55);
  border:1px solid rgba(255,255,255,.35)}

/* ───────────── 시트 · 로그인 */
.sheet-body{
  background:linear-gradient(180deg,#FFFFFF 0%, #F5F8FB 100%);
  box-shadow:0 -18px 44px -18px rgba(14,26,40,.5);
  border-top:1px solid rgba(255,255,255,.9)}
.auth{
  background:
    radial-gradient(900px 600px at 20% 0%, #24404A 0%, rgba(36,64,74,0) 60%),
    linear-gradient(160deg, #0B121A 0%, #12242C 50%, #0C1D24 100%)}
.auth-card{
  background:var(--metal);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--metal-edge), 0 30px 70px -30px rgba(0,0,0,.75);
  border-radius:22px}
.brand h1{letter-spacing:.16em;font-weight:800;
  background:linear-gradient(180deg,#16222E,#42596E);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.form input, .form select, .search, .fields input, textarea.msg{
  background:linear-gradient(180deg,#FFFFFF,#F7FAFC);
  border:1px solid rgba(16,26,36,.12);
  box-shadow:inset 0 1px 2px rgba(16,26,36,.05)}
.form input:focus, .search:focus, .fields input:focus, textarea.msg:focus{
  outline:none;border-color:var(--accent);
  box-shadow:inset 0 1px 2px rgba(16,26,36,.05), 0 0 0 3px rgba(15,181,160,.18)}

/* ───────────── 알약 · 배지 */
.pill{border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.pill.red{background:linear-gradient(180deg,#FDECEF,#FADCE1);color:#A32338}
.pill.amber{background:linear-gradient(180deg,#FDF3E2,#F8E6C8);color:#8A5A12}
.pill.blue{background:linear-gradient(180deg,#EAF1FB,#DCE7F7);color:#1D468F}
.pill.blue{color:#1D4A8F}
.pill.green{background:linear-gradient(180deg,#E9F8F3,#D8F0E8);color:#0B6152}
.pill.gray{background:linear-gradient(180deg,#F1F4F8,#E4E9EF);color:#5C6C7C}

/* ───────────── 그리드 = 정밀 가공된 금속판 */
.grid-card{
  background:
    radial-gradient(120% 90% at 10% 0%, rgba(255,255,255,.95), rgba(255,255,255,0) 55%),
    linear-gradient(160deg,#F7FAFC 0%, #E9EFF5 50%, #F3F7FA 100%);
  border:1px solid rgba(255,255,255,.8)}
table.gtab td{
  background-image:
    linear-gradient(158deg, rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.38) 46%, rgba(210,222,234,.42) 100%);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(16,26,36,.07),
    0 1px 2px rgba(16,26,36,.06);
}
td.ok{--fill:#DCF1EB;color:#0A5F51}
td.low{--fill:#FAE9CD;color:#8A5A12}
td.zero{--fill:#F8D8DD;color:#A32338}
td.exp{--fill:#F9E2C4;color:#8A5A12}
td.empty{--fill:#EAEFF4;color:#9CAAB8}
table.gtab td b{text-shadow:0 1px 0 rgba(255,255,255,.7)}
.seg{background:linear-gradient(180deg,#E9EEF3,#DFE6ED);
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 2px rgba(16,26,36,.08)}
.seg button.on{background:linear-gradient(180deg,#FFFFFF,#EFF4F8);
  box-shadow:0 1px 3px rgba(16,26,36,.18)}

/* 필터 칩 */
.filters button{
  background:linear-gradient(180deg,#FFFFFF,#EFF4F8);
  border:1px solid rgba(16,26,36,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), var(--lift-sm)}
.filters button.on{
  background:linear-gradient(180deg,#2C3E51,#131E29);color:#fff;
  border-color:rgba(0,0,0,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}

/* ───────────── 3D — 은 · 백금 · 금 */
.cube{
  background:
    radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, #EEF3F8 45%, #E1E8F0 100%);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(16,26,36,.06)}
.pgrid{
  background:
    linear-gradient(152deg,
      rgba(255,255,255,.96) 0%,
      rgba(244,248,252,.88) 30%,
      rgba(214,225,236,.86) 62%,
      rgba(248,251,253,.94) 100%),
    radial-gradient(circle at 1px 1px, rgba(16,26,36,.06) 1px, transparent 0);
  background-size:auto, 4px 4px;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(16,26,36,.08),
    0 14px 28px -14px rgba(14,26,40,.55);
  border-radius:10px;
}
/* 층마다 다른 금속: 위에서부터 백금 → 은 → 금 */
.plane:nth-child(1) .pgrid{filter:saturate(.9) brightness(.99)}
.plane.tint .pgrid{
  background:
    linear-gradient(152deg,
      rgba(255,255,255,.95) 0%,
      hsla(var(--bh),40%,96%,.9) 28%,
      hsla(var(--bh),34%,84%,.85) 62%,
      rgba(252,253,254,.95) 100%),
    radial-gradient(circle at 1px 1px, rgba(16,26,36,.06) 1px, transparent 0);
  background-size:auto, 4px 4px}
.pc{
  border-radius:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(16,26,36,.10);
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.pc.ok{background:linear-gradient(180deg,#7FE0CE,#43BFA9);color:#043A32}
.pc.low{background:linear-gradient(180deg,#F8CE8A,#E0A552);color:#5A3407}
.pc.zero{background:linear-gradient(180deg,#F5A0A8,#E0707E);color:#5A0B14}
.pc.exp{background:linear-gradient(180deg,#F6C186,#E2A15A);color:#5A3407}
.pc.empty{background:linear-gradient(180deg,#EFF3F7,#E1E7EE);color:#A9B6C3}
.plabel{
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(240,245,249,.92));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 3px 10px -4px rgba(14,26,40,.45);
  color:var(--gr-800);font-weight:800;letter-spacing:-.01em}
/* 3D 축 눈금 — 작은 글씨로 2D 표의 정보를 그대로 얹는다 */
.paxis{font-size:8px;font-weight:800;color:#7C8B9A;display:grid;place-items:center;
  letter-spacing:-.03em;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.paxis.corner{color:#A9B6C3;font-size:7px}
.cube-zoom button{
  background:linear-gradient(180deg,#FFFFFF,#EEF3F8);
  border:1px solid rgba(16,26,36,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--lift-sm)}
.cube-hint{color:var(--muted)}

/* ───────────── 촬영 · 여권 */
.shot{
  background:
    radial-gradient(120% 120% at 12% -10%, rgba(255,255,255,.20), rgba(255,255,255,0) 50%),
    linear-gradient(145deg,#0E141B 0%, #1B2A38 50%, #10353B 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 16px 32px -18px rgba(0,0,0,.7);
  border-radius:20px}
.pass-top{
  background:
    radial-gradient(120% 140% at 15% -20%, rgba(255,255,255,.25), rgba(255,255,255,0) 50%),
    linear-gradient(135deg,#0E141B 0%, #1E3038 55%, #123A40 100%)}
.pass-code{
  background:linear-gradient(180deg,#FFFFFF,#C9DDE4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.14em}
.pass{box-shadow:var(--lift);border:1px solid rgba(255,255,255,.8)}

/* ───────────── 금액에만 금색 */
.money-gold{
  background:linear-gradient(180deg,#E6CE8A,#9A7B24);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}

.note{
  background:linear-gradient(180deg,#F7FAFC,#EFF4F8);
  border-left:3px solid var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.g-ico{box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 4px 10px -4px rgba(10,149,135,.6)}
.permchip{background:linear-gradient(180deg,#FFFFFF,#F1F5F9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.permchip.on{background:linear-gradient(180deg,#E6F7F2,#D2EFE6);
  border-color:#8FD9CB;color:#0A5F51}
.check{background:linear-gradient(180deg,#FFFFFF,#EFF3F7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.check.on{background:linear-gradient(180deg,#2FD3BC,#0A9587);border-color:#0A9587}
.toast{background:linear-gradient(180deg,#1E2C3A,#0E141B);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.10)}

/* 3D 확대 배율 표시. 지금 몇 배인지 보여야 원위치를 누를지 판단할 수 있다. */
.cube-zoom #zoomlab {
  display: block; text-align: center; font-size: 11px; padding: 2px 0;
  color: var(--ink-dim); font-variant-numeric: tabular-nums;
}

/* 구글 로그인 버튼. 구글 브랜드 가이드가 요구하는 것은 흰 바탕·회색 테두리·
   원본 색 로고 셋이다. 여기만 티타늄을 쓰지 않는 이유다 — 다르게 그리면
   콘솔 심사에서 막힌다. */
.gbox { margin: 0 0 14px; }
.gbtn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0;
  font-size: 15px; font-weight: 500; height: 46px; border-radius: 12px;
}
.gbtn:active { background: #f7f8f8; }
.gor {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 2px; color: var(--ink-dim); font-size: 12px;
}
.gor::before, .gor::after {
  content: ''; flex: 1; height: 1px; background: var(--metal-edge);
}

/* 3D 층 올리기.
   고른 층은 맨 위로 올라가고, 나머지는 숨기지 않고 눌러 둔다 — 비교하려고
   3D 를 보는 것이지 하나만 볼 거면 2D 표가 더 낫다. */
.plane.hushed { opacity: .42; }
.plane.hushed .plabel { opacity: .7; }
.plane.focused .pgrid {
  box-shadow: 0 18px 34px rgba(16, 26, 36, .28), 0 0 0 1px rgba(255, 255, 255, .75) inset;
}
.plane.focused .plabel {
  background: var(--gr-800); color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px rgba(16, 26, 36, .3);
}
.plabel { cursor: pointer; }
.plabel:active { transform: scale(.97); }


/* 가입 추이 막대. 축도 눈금도 없다 — 여기서 알고 싶은 것은 정확한 수가 아니라
   '늘고 있나' 하나뿐이고, 정확한 수는 손을 올리면 나온다. */
.bars{display:flex;align-items:flex-end;gap:4px;height:72px;margin-top:8px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
     gap:4px;height:100%}
.bar i{display:block;width:100%;border-radius:3px 3px 0 0;
       background:linear-gradient(180deg,var(--gr-600),var(--gr-800))}
.bar span{font-size:9px;color:var(--muted);white-space:nowrap}


/* 사진에서 읽어낸 글자. 접어 두되 언제든 펼 수 있어야 한다 —
   왜 못 알아봤는지는 읽은 글자를 봐야 알 수 있다. */
.seen{margin:0 0 10px;border:1px dashed var(--metal-edge);border-radius:10px;padding:0 10px}
.seen > summary{cursor:pointer;list-style:none;padding:9px 0;font-size:12px;
  color:var(--ink2);font-weight:600}
.seen > summary::-webkit-details-marker{display:none}
.seen > summary::after{content:' ▾';color:var(--muted)}
.seen[open] > summary::after{content:' ▴'}
.seen pre{margin:0 0 10px;font-size:11px;line-height:1.5;white-space:pre-wrap;
  word-break:break-all;color:var(--ink2);max-height:150px;overflow:auto}


/* 찍은 사진 크게 보기. 라벨은 작고, 빠진 칸은 늘 생긴다. */
.viewer{
  position:fixed; inset:0; z-index:60; background:rgba(10,15,20,.94);
  display:flex; flex-direction:column; color:#E3E9EF;
}
.viewer-bar{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.viewer-bar #vzLabel{font-size:12px;min-width:46px;text-align:center;opacity:.8}
.viewer-bar .grow{flex:1}
.viewer-stage{
  flex:1; overflow:hidden; display:grid; place-items:center; touch-action:none;
}
.viewer-stage img{
  max-width:100%; max-height:100%; transform-origin:center center;
  will-change:transform; user-select:none; -webkit-user-drag:none;
}
.viewer .tiny{text-align:center;padding:8px;opacity:.65}
.thumb{cursor:zoom-in}


/* 치과 검색 결과. 고르는 순간 끝나야 하므로 목록은 짧게 — 여덟 줄이면 충분하고,
   더 길면 스크롤하다 무엇을 찾고 있었는지 잊는다. */
.placelist{max-height:260px;overflow:auto;margin:-2px 0 6px}
.placelist:empty{display:none}
.placerow{
  display:flex; width:100%; text-align:left; background:var(--metal);
  border:1px solid var(--metal-edge); border-radius:11px; padding:9px 11px;
  margin-bottom:6px; box-shadow:var(--lift);
}
.placerow:active{transform:scale(.995)}
.placerow .name{font-weight:600}