/* ============================================================================
   LOLO 공식 웹사이트 — 시안 3a 의 반응형 구현

   원본: data/LOLO-OF/ "LOLO 공식 웹사이트.dc.html" 의 t3 / 3a
         ("올려주신 시안 3장을 합친 추천안 · 1280px")

   ## 왜 옮겨 쓰지 않고 다시 짰나

   원본은 Claude Design 캔버스 내보내기다. 1280px 고정 폭에 좌표를 박은 절대배치와
   인라인 style 로 되어 있어 **접히지 않는다.** 폰에서 열면 가로로 샌다.
   그래서 눈에 보이는 결과는 그대로 두고 구조만 다시 세웠다 — 색·서체·간격은 원본 값이다.

   ## 분기점 셋

     1180px 초과   설계 그대로 (히어로 2단, 기능 4단, 카드 4장)
     700~1180px   히어로 세로로, 기능 2x2, 카드 2장, 랭킹·비교 1단
     700px 이하    한 줄로. 메뉴는 접고, 지도는 높이를 줄이고, 터치 44px 확보

   ⚠️ 폰 분기를 700px 로 둔 이유: 세로로 세운 아이패드가 768px 다. 780 으로 두면
      태블릿이 폰 레이아웃을 받아 기능 네 칸이 한 줄로 늘어선다(실제로 그랬다).

   ⚠️ 폰에서도 **지도를 히어로로 유지**했다. 3a 의 정체가 "지도가 첫 화면"이라 그걸
      버리면 다른 시안이 된다. 별도 모바일 시안(LOLO 모바일.dc.html)은 홈이 카테고리+목록
      이라 구성이 다르다 — 어느 쪽으로 갈지는 Shine 결정 대기 중이며, 지금은 3a 를 따랐다.
   ============================================================================ */

:root{
  /* 정본 색 — mobile/src/theme.ts 와 같은 값 */
  --wine:#7B1E23; --wine-d:#5C1418;
  --ink:#211D1A;  --sub:#4B453D;  --cap:#6E675E;
  --bd:#E3DDD2;   --bd2:#DED7CB;
  --card:#FCFBF9; --scr:#F9F8F4;  --wash:#F1ECE3; --canvas:#EFEBE3;
  --gold:#D9B455;
  --pad:44px;              /* 좌우 여백 — 분기마다 이 값 하나만 바꾼다 */
  --shadow-card:0 10px 24px -12px rgba(33,29,26,.30);
}

*{box-sizing:border-box}
/* `hidden` 속성은 어떤 클래스보다 세다.
   빠뜨리면 `display:` 를 가진 클래스가 hidden 을 이겨서 **숨겨 둔 것이 그대로 보인다** —
   실제로 `.rs-closed{display:inline-block}` 때문에 폐업이 아닌 가게에 `문을 닫은 곳이에요`
   가 떠 있었다(2026-09-09). 화면에서만 보이고 콘솔에는 아무 말도 안 남는 종류의 사고다. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:'Noto Sans KR',system-ui,-apple-system,sans-serif;
  /* 원본 시안에는 `-webkit-font-smoothing:antialiased` 가 있었다. 맥에서는 멀쩡하지만
     윈도우 크롬에서는 서브픽셀 렌더링을 꺼서 **글자가 얇고 흐려 보인다** —
     특히 흐림(backdrop-filter) 위에 얹힌 머리줄 버튼이 회색으로 뜬다(Shine 지적).
     기본값(auto)이 각 OS 가 잘하는 방식을 쓰게 둔다. */
  word-break:keep-all; text-wrap:pretty;
  overflow-x:hidden;          /* 어떤 경우에도 가로 스크롤은 만들지 않는다 */
}
img{max-width:100%}
a{color:var(--wine);text-decoration:none}
a:hover{color:var(--wine-d)}
h1,h2,h3{margin:0}
p{margin:0}

.wm{font-family:'Playfair Display',serif;font-weight:500;letter-spacing:.01em;color:var(--wine)}
.hl{font-family:'Noto Serif KR',serif;font-weight:600;letter-spacing:-.8px;color:var(--ink)}
.cap{font:400 12px/1.6 'Noto Sans KR',sans-serif;color:var(--cap)}

.btn{
  font-family:'Gothic A1',sans-serif;font-weight:700;letter-spacing:-.3px;
  border:0;border-radius:10px;cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;
  transition:background .14s cubic-bezier(.2,.8,.2,1);
}
.btnp{background:var(--wine);color:#fff}
.btnp:hover{background:var(--wine-d);color:#fff}
.btns{background:transparent;color:var(--ink);border:1px solid var(--bd2)}
.btns:hover{background:var(--wash);color:var(--ink)}

/* 아직 못 누르는 버튼은 그렇게 보여야 한다 — 스토어 심사가 끝나면 링크로 바꾼다 */
.btn:disabled{opacity:.5;cursor:default}
.btnp:disabled:hover{background:var(--wine)}
.btns:disabled:hover{background:var(--card)}

/* 키보드 사용자에게 초점이 보여야 한다 */
a:focus-visible,.btn:focus-visible{outline:2px solid var(--wine);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--wine);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;
  font:700 13px 'Gothic A1',sans-serif;
}
.skip:focus{left:0;color:#fff}

/* ── 머리줄 ───────────────────────────────────────────────────────────── */
.hd{
  position:sticky;top:0;z-index:5;min-height:72px;
  display:flex;align-items:center;gap:32px;padding:0 var(--pad);
  /* 흐림(backdrop-filter)을 뺐다. 머리줄이 이미 96% 불투명이라 흐림이 보태는 것은
     거의 없는데, 크롬은 흐림이 걸린 요소를 별도 합성 레이어로 올리면서 **그 안의 글자에
     서브픽셀 렌더링을 꺼 버린다.** 그래서 로그인 버튼 글씨가 회색으로 뜬다(Shine 지적).
     얻는 것보다 잃는 것이 커서 흐림을 버리고 불투명도를 올렸다. */
  background:rgba(252,251,249,.96);
  border-bottom:1px solid var(--bd);
}
.hd .logo{font-size:26px}
.nav{flex:1;display:flex;gap:26px}
.nav a{color:var(--sub);font:500 14px 'Noto Sans KR',sans-serif}
.nav a:hover{color:var(--wine)}
.hd .btn{height:40px;padding:0 16px;font-size:14px}
/* 햄버거는 폰 분기에서만 선다. 기본값을 미디어쿼리보다 앞에 둔다 —
   뒤에 두면 같은 특이도로 폰 규칙을 덮는다(task-242 에서 겪은 자리). */
.navbtn{display:none}
/* 흐림 위에 투명 버튼을 얹으면 글자가 합성 레이어에 갈려 흐려진다.
   불투명한 바닥을 깔아 주면 글자가 또렷해진다. */
.hd .btns{background:var(--card);color:var(--ink);border-color:var(--bd2)}
.hd .btns:hover{background:var(--wash)}

/* ── 히어로 ───────────────────────────────────────────────────────────── */
.hero{
  display:grid;grid-template-columns:472px 1fr;
  background:var(--scr);border-bottom:1px solid var(--bd);
}
.hero-copy{padding:76px var(--pad);display:flex;flex-direction:column;justify-content:center}
.eyebrow{font:500 11.5px 'Noto Sans KR';letter-spacing:.14em;color:var(--wine)}
.hero h1{margin:14px 0 0;font-size:48px;line-height:1.28}
.hero-lead{margin:20px 0 0;font:400 15px/1.8 'Noto Sans KR';color:var(--sub)}
.hero-cta{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.hero-cta .btn{height:54px;padding:0 26px;font-size:17px}
.hero-note{display:flex;align-items:center;gap:10px;margin-top:26px}
.hero-note img{height:28px;border-radius:999px}

.hero-map{position:relative;min-height:520px;overflow:hidden}
.maptoggle{
  position:absolute;top:22px;right:24px;display:flex;
  background:var(--card);border:1px solid var(--bd);border-radius:999px;padding:4px;
}
.maptoggle button{font:500 12.5px 'Gothic A1';color:var(--cap);padding:7px 15px;border-radius:999px}
.maptoggle .on{font-weight:700;color:#fff;background:var(--wine)}

/* 배경 그림이 못 오면 흰 구멍이 남는다 — 바탕색을 깔아 둔다(그림의 바탕과 같은 계열). */
.mapphoto{position:absolute;inset:0;background:var(--wash)}
/* 배경은 길·블록·강만 있는 그림이다. 여기에 가게를 그려 넣지 않는다 —
   예전 `ph-map.jpg` 는 가짜 카드가 **이미지에 구워져** 있어 실데이터와 섞여 보였다. */
.map-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.marks{position:absolute;inset:0}

/* 지도 위 카드·점.

   자리는 JS 가 좌표에서 계산해 `--x`/`--y` 로 넘긴다. **인라인 style 로 박으면 안 된다** —
   인라인이 더 세서 아래 폰 분기가 못 이긴다. 값만 받고, 쓰는 방법은 여기서 정한다. */
.pin{
  position:absolute;left:var(--x,0);top:var(--y,0);z-index:3;
  display:flex;align-items:center;gap:9px;max-width:min(62%,232px);
  background:var(--card);border:1px solid var(--bd);border-radius:11px;
  box-shadow:var(--shadow-card);padding:9px 13px 9px 9px;
  color:inherit;text-decoration:none;
}
a.pin:hover{border-color:var(--wine)}
a.pin:hover .t{color:var(--wine)}
a.pin:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
.pin-img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;display:block}
.pin-body{min-width:0}
/* 이름이 길면 카드가 지도를 가로지른다 — 한 줄로 자른다(`이태리부대찌개 신사점`). */
.pin .t{display:block;font:700 13.5px 'Noto Sans KR';color:var(--ink);
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pin .cap{display:block;white-space:nowrap}
/* 이름 없는 점.

   표시의 본체는 이제 위의 `.pin` 박스다(사진 · 이름 · 카테고리 · 위치).
   박스는 자리를 많이 먹어서 화면 넓이만큼만 세우고, 나머지 가게는 점으로 남긴다 —
   점까지 지우면 "목록엔 66곳인데 지도엔 몇 개뿐"이 다시 된다.
   `.mark` 자체는 **크기 없는 좌표**이고, 점은 그 둘레에 절대배치한다. */
.mark{position:absolute;left:var(--x,0);top:var(--y,0);width:0;height:0}
.mark .dot{
  position:absolute;left:-4.5px;top:-4.5px;width:9px;height:9px;border-radius:50%;
  background:var(--wine);opacity:.72;box-shadow:0 0 0 4px rgba(123,30,35,.12);
}

/* ── 기능 4단 ─────────────────────────────────────────────────────────── */
.features{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--wash);border-bottom:1px solid var(--bd);
}
.features > div{padding:30px 26px;border-right:1px solid var(--bd)}
.features > div:last-child{border-right:0}
.features h3{font:700 15px 'Noto Sans KR';color:var(--ink)}
.features p{margin-top:8px;font:400 12.5px/1.75 'Noto Sans KR';color:var(--sub)}

/* ── 주목할 맛집 ──────────────────────────────────────────────────────── */
.picks{
  display:grid;grid-template-columns:268px 1fr;gap:36px;
  padding:56px var(--pad);background:var(--card);
  border-bottom:1px solid var(--bd);align-items:start;
}
.picks h2{font-size:26px;line-height:1.4}
.picks-lead{margin-top:14px;font:400 13.5px/1.75 'Noto Sans KR';color:var(--sub)}
.picks-more{display:inline-block;margin-top:16px;font:700 13px 'Gothic A1'}
.pickgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pickcard{border:1px solid var(--bd);border-radius:12px;overflow:hidden;background:var(--card)}
.pickcard .ph{position:relative}
.pickcard img{width:100%;height:132px;object-fit:cover;display:block}
.pickcard .no{
  position:absolute;left:10px;top:10px;font:700 11px 'Gothic A1';color:var(--ink);
  background:rgba(252,251,249,.92);border-radius:6px;padding:4px 7px;
}
.pickcard .body{padding:12px 14px 14px}
.pickcard .t{font:700 14px 'Noto Sans KR';color:var(--ink)}

/* ── 랭킹 · 비교 ──────────────────────────────────────────────────────── */
.band2{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  padding:52px var(--pad);background:var(--scr);border-bottom:1px solid var(--bd);
}
.panel{border:1px solid var(--bd);border-radius:14px;background:var(--card);overflow:hidden}
.panel-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:20px 22px 14px}
.panel-hd h3{font-size:19px}
.panel-hd a{font:700 12px 'Gothic A1'}
.rank{display:flex;align-items:center;gap:16px;padding:14px 22px;border-top:1px solid var(--bd)}
.rank .n{width:22px;font-size:22px;text-align:center;flex:none}
.rank .n.first{color:var(--wine)}
.rank img{width:50px;height:50px;border-radius:9px;object-fit:cover;flex:none}
.rank .body{flex:1;min-width:0}
.rank .t{font:700 14.5px 'Noto Sans KR';color:var(--ink)}
.rank .sc{font:700 15px 'Gothic A1';color:var(--ink);flex:none}

.vs{padding:20px 22px 22px}
.vs h3{font-size:19px}
.vs-lead{margin:8px 0 16px}
.vs-row{display:flex;align-items:center;gap:12px}
.vs-card{
  flex:1;min-width:0;border:1px solid var(--bd2);border-radius:11px;padding:12px;
  display:flex;gap:12px;align-items:center;
}
.vs-card.sel{border:2px solid var(--wine)}
.vs-img{width:56px;height:56px;border-radius:9px;object-fit:cover;flex:none;display:block}
.vs-card .t{font:700 13.5px 'Noto Sans KR';color:var(--ink)}
.vs-card .t,.vs-card .cap{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-mark{font-size:14px;color:var(--cap);flex:none}
/* 카드 자체가 상세로 가는 문이다. 링크가 칸을 그대로 이어받아야 두 칸이 반씩 나뉜다. */
.vs-link{flex:1;min-width:0}
.vs-photos{display:flex;gap:16px;margin-top:18px}
.vs-photos img,.vs-photos .thumb-empty{width:50%;height:110px;object-fit:cover;border-radius:11px}

/* ── 앱 밴드 ──────────────────────────────────────────────────────────── */
.app{
  display:grid;grid-template-columns:1fr 320px 300px;gap:32px;align-items:center;
  padding:56px var(--pad);background:var(--wash);border-bottom:1px solid var(--bd);
}
.app h2{font-size:30px;line-height:1.4}
.app-lead{margin-top:16px;font:400 14px/1.8 'Noto Sans KR';color:var(--sub)}
.app-cta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.app-cta .btn{height:50px;padding:0 22px;font-size:15px}
.app-cta .btns{background:var(--card)}
.app-soon{margin-top:12px}
.app-shot{width:300px;display:block;filter:drop-shadow(0 22px 44px rgba(33,29,26,.26));justify-self:center}
.app-points{display:flex;flex-direction:column;gap:18px}
.app-points h3{font:700 14px 'Noto Sans KR';color:var(--ink)}
.app-points p{margin-top:6px;font:400 12.5px/1.7 'Noto Sans KR';color:var(--sub)}

/* ── 마무리 띠 ────────────────────────────────────────────────────────── */
.cta{position:relative;min-height:300px;overflow:hidden;display:flex;align-items:center}
.cta > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%}
.cta .veil{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(24,20,18,.82) 0%,rgba(24,20,18,.38) 58%,rgba(24,20,18,.10) 100%);
}
.cta-inner{position:relative;padding:44px var(--pad)}
.cta h2{font-size:28px;line-height:1.4;color:#fff}
.cta .btn{height:52px;padding:0 26px;font-size:17px;margin-top:22px}

/* ── 꼬리말 ───────────────────────────────────────────────────────────── */
.ft{padding:34px var(--pad) 30px;background:var(--card);border-top:1px solid var(--bd)}
.ft-row{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.ft-links{display:flex;gap:24px;flex-wrap:wrap}
.ft-links a{font-size:13px}
.ft-biz{margin-top:16px}

/* ══ 태블릿 ═══════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  :root{--pad:32px}

  .hero{grid-template-columns:1fr}
  .hero-copy{padding:56px var(--pad) 40px}
  .hero h1{font-size:40px}
  /* 카드 자리는 상자 크기에서 다시 계산된다(index.html 의 layoutMarks) — 분기마다
     좌표를 손으로 주던 것을 걷어냈다. 높이만 알려 주면 된다. */
  .hero-map{min-height:400px}

  .features{grid-template-columns:repeat(2,1fr)}
  .features > div:nth-child(2n){border-right:0}
  .features > div:nth-child(-n+2){border-bottom:1px solid var(--bd)}

  .picks{grid-template-columns:1fr;gap:24px}
  .pickgrid{grid-template-columns:repeat(2,1fr)}

  .band2{grid-template-columns:1fr}

  /* 폰 목업은 넓이를 많이 먹는다. 글과 이점만 두 단으로 두고 목업은 아래로. */
  .app{grid-template-columns:1fr 1fr;gap:28px}
  .app-shot{grid-column:1 / -1;order:3;width:260px}
}

/* ══ 폰 ═══════════════════════════════════════════════════════════════ */
@media (max-width:700px){
  :root{--pad:20px}

  /* 메뉴는 접되 **없애지 않는다.**
     예전에는 `.nav{display:none}` 한 줄뿐이라, 폰에서 맛지도·랭킹·서비스 소개·고객센터로
     갈 길이 아예 없었다(Shine 지적 2026-09-10). 좁아서 접는 것과 없애는 것은 다르다.
     `.hd` 는 패널을 매달 기준이므로 `position:relative` 가 필요하다. */
  .hd{position:relative;min-height:60px;gap:12px}
  .hd .logo{font-size:22px}
  .hd .btn{height:44px;padding:0 14px;font-size:13.5px;margin-left:auto}
  .navbtn{
    display:flex;flex-direction:column;justify-content:center;gap:4px;flex:none;
    width:44px;height:44px;padding:0 11px;          /* 44px = 손가락이 닿는 최소 크기 */
    background:transparent;border:1px solid var(--bd2);border-radius:10px;cursor:pointer;
  }
  .navbtn span{display:block;height:2px;border-radius:2px;background:var(--ink)}
  .navbtn[aria-expanded="true"]{background:var(--wash);border-color:var(--bd)}
  .navbtn:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;padding:4px var(--pad) 10px;
    background:var(--card);border-bottom:1px solid var(--bd);box-shadow:var(--shadow-card);
  }
  .nav.open{display:flex}
  /* 줄마다 44px 을 확보한다 — 넷을 촘촘히 붙이면 옆 줄이 눌린다. */
  .nav a{display:flex;align-items:center;min-height:48px;font-size:15px;
         border-bottom:1px solid var(--bd)}
  .nav a:last-child{border-bottom:0}

  .hero-copy{padding:40px var(--pad) 32px}
  .hero h1{font-size:30px;line-height:1.34}
  .hero-lead{font-size:14px;margin-top:16px}
  .hero-cta{margin-top:24px;gap:8px}
  .hero-cta .btn{height:50px;padding:0 18px;font-size:15px;flex:1 1 auto}
  .hero-note{margin-top:20px}

  /* 지도는 남기되 높이를 줄인다. 박스는 **개수로** 줄인다 — 넓이에 맞춰 몇 장을 세울지
     JS 가 정하므로(boxBudget), 여기서 자리를 다시 잡던 예외는 필요 없어졌다.
     예전에는 한 장만 남기고 아래에 붙였는데, 그러면 지도가 아니라 배너가 된다. */
  .hero-map{min-height:320px}
  .maptoggle{top:14px;right:14px}
  .pin{max-width:74%;gap:8px;padding:7px 11px 7px 7px}
  .pin-img{width:38px;height:38px}
  .pin .t{font-size:13px}

  .features{grid-template-columns:1fr}
  .features > div{border-right:0;border-bottom:1px solid var(--bd);padding:22px var(--pad)}
  .features > div:last-child{border-bottom:0}

  .picks{padding:40px var(--pad)}
  .picks h2{font-size:22px}
  .pickgrid{grid-template-columns:1fr 1fr;gap:12px}
  .pickcard img{height:104px}

  .band2{padding:36px var(--pad);gap:16px}
  .panel-hd{padding:16px 16px 12px}
  .rank{padding:12px 16px;gap:12px}
  .vs{padding:16px}
  /* VS 는 가로로 두면 카드가 눌린다. 세로로 쌓고 표식을 가운데 둔다. */
  .vs-row{flex-direction:column;align-items:stretch;gap:8px}
  .vs-mark{align-self:center}
  .vs-photos{gap:10px}
  .vs-photos img{height:88px}

  .app{grid-template-columns:1fr;padding:40px var(--pad);gap:24px}
  .app h2{font-size:24px}
  .app-shot{order:2;width:220px}
  .app-points{order:3}
  .app-cta .btn{flex:1 1 auto}

  .cta{min-height:240px}
  .cta .veil{background:linear-gradient(180deg,rgba(24,20,18,.35) 0%,rgba(24,20,18,.78) 72%)}
  .cta-inner{padding:32px var(--pad)}
  .cta h2{font-size:22px}

  .ft{padding:28px var(--pad)}
  .ft-row{gap:16px}
  .ft-links{gap:14px}
}

@media (prefers-reduced-motion:reduce){*{transition-duration:0s !important;animation-duration:0s !important}}

/* ══ 랭킹 페이지 ═══════════════════════════════════════════════════════════
   목록 한 줄은 **식당**이지 누군가의 기록이 아니다. 그래서 점수 자리에 별점이나
   0~10 숫자를 쓰지 않고 좋았다/괜찮다/아쉬웠다의 **분포**를 그린다 — 앱의 표기 정책과 같다.
   (서버가 주는 rankScore 는 0~1 짜리 내부 값이라 사람에게 보여줄 숫자가 아니다.) */

.hd .nav a.on{color:var(--wine);font-weight:700}

.rk-head{padding:44px var(--pad) 30px;background:var(--scr);border-bottom:1px solid var(--bd)}
.crumb{font:400 12.5px 'Noto Sans KR';color:var(--cap);margin-bottom:18px}
.crumb span{color:var(--ink)}
.rk-head h1{margin:12px 0 0;font-size:34px;line-height:1.34}
.rk-lead{margin:14px 0 0;max-width:56ch;font:400 14px/1.8 'Noto Sans KR';color:var(--sub)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{
  font-family:'Gothic A1',sans-serif;font-weight:700;font-size:13px;letter-spacing:-.3px;
  height:38px;padding:0 15px;border-radius:999px;cursor:pointer;
  background:var(--card);color:var(--sub);border:1px solid var(--bd2);
  transition:background .14s,color .14s,border-color .14s;
}
.chip:hover{background:var(--wash);color:var(--ink)}
.chip.on{background:var(--wine);color:#fff;border-color:var(--wine)}
.chip:focus-visible{outline:2px solid var(--wine);outline-offset:3px}

.rk-body{padding:34px var(--pad) 56px;background:var(--card);border-bottom:1px solid var(--bd)}
.rk-meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.rk-empty{
  margin:8px 0 0;padding:28px 22px;border:1px dashed var(--bd2);border-radius:12px;
  font:400 14px/1.7 'Noto Sans KR';color:var(--sub);background:var(--scr);
}
.rk-note{margin-top:26px;max-width:70ch;line-height:1.9}

/* 위 셋 — 사진이 크게 */
.podrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pod{border:1px solid var(--bd);border-radius:14px;overflow:hidden;background:var(--card)}
.pod-ph{position:relative}
.pod-img{width:100%;height:172px;object-fit:cover;display:block}
.pod-no{
  position:absolute;left:12px;top:12px;font:700 13px 'Gothic A1';color:#fff;
  background:var(--wine);border-radius:8px;padding:5px 10px;
}
.pod-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px}

/* 사람 순위 카드 — 사진을 싣지 않으므로(2026-09-07 지시) 등수를 카드 안에서 직접 보여준다.
   맛집 카드는 사진 위에 등수 배지를 얹지만 여기는 얹을 곳이 없다. */
.pod-person .pod-body{padding-top:18px}
.pod-no-flat{position:static;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;background:var(--wine);color:#fff;
  font:700 13px 'Noto Sans KR';margin-bottom:2px}
.rk-h2{font-size:26px;margin:0 0 4px}

/* ── 사람 순위: 아바타 · 메달 · 공개범위 배지 ────────────────────────────────
   앱과 같은 표기를 쓴다 — 메달 🥇🥈🥉(LeaderboardScreen.medal), 공개범위 낱말은
   common.json visibility.*.short(전체/지인만/나만). 두 벌이 되지 않게 값은 site.js 에서 만든다. */
.av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--wash)}
/* 첫 글자를 바닥에 깔고 사진을 그 위에 얹는다. 사진이 깨지면 사진만 사라지고 글자가 드러난다. */
.av-img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.av-lg{width:64px;height:64px}
.av-none{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:var(--wash);color:var(--cap);font:700 15px 'Noto Sans KR'}
.av-lg.av-none{font-size:24px}
.av-wrap{position:relative;width:64px;margin-bottom:8px}
/* 메달은 아바타 우하단에 겹친다 — 앱의 medalBadge 와 같은 자리다. */
.medal{position:absolute;right:-4px;bottom:-4px;font-size:20px;line-height:1}
.medal-lg{font-size:24px}
.row .n{min-width:30px;text-align:center}

.vis{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  font:500 11px 'Noto Sans KR';vertical-align:middle;border:1px solid var(--bd);color:var(--cap)}
.vis-public{background:var(--wine);border-color:var(--wine);color:#fff}

/* ── 서비스 소개: 순위가 만들어지는 흐름 ─────────────────────────────────── */
.about-feat{border-top:1px solid var(--bd)}
.steps{padding:56px var(--pad) 8px;max-width:980px}
.step-list{list-style:none;margin:18px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step-list li{border:1px solid var(--bd);border-radius:14px;background:var(--card);padding:22px 20px}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:9px;background:var(--wine);color:#fff;font:700 13px 'Noto Sans KR';margin-bottom:12px}
.step-list h3{font:700 15px 'Noto Sans KR';color:var(--ink);margin:0 0 6px}
.step-list p{margin:0;font:400 13px/1.8 'Noto Sans KR';color:var(--sub)}

@media (max-width:1180px){ .step-list{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .step-list{grid-template-columns:1fr} .steps{padding-top:36px} }

/* ── 고객센터 ────────────────────────────────────────────────────────────── */
.sup{padding:0 var(--pad) 72px;max-width:860px}
.sup-ways{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.sup-card{border:1px solid var(--bd);border-radius:14px;background:var(--card);padding:18px 20px}
.sup-card h2{font:700 14px 'Noto Sans KR';color:var(--cap);margin:0 0 6px}
.sup-card p{font:500 15px 'Noto Sans KR';color:var(--ink);margin:0}
.sup-warn{border:1px solid var(--bd);border-left:3px solid var(--wine);border-radius:10px;
  background:var(--wash);padding:14px 16px;font:400 13.5px/1.7 'Noto Sans KR';color:var(--sub);margin:0 0 36px}

.sup-types{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin:0 0 36px}
.sup-types > div{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd)}
.sup-types dt{flex:0 0 116px;font:700 14px 'Noto Sans KR';color:var(--ink)}
.sup-types dd{margin:0;font:400 14px 'Noto Sans KR';color:var(--sub)}

.sup-faq details{border-bottom:1px solid var(--bd)}
.sup-faq summary{cursor:pointer;padding:15px 0;font:700 15px 'Noto Sans KR';color:var(--ink);list-style:none}
.sup-faq summary::-webkit-details-marker{display:none}
.sup-faq summary::after{content:'+';float:right;color:var(--cap);font-weight:500}
.sup-faq details[open] summary::after{content:'−'}
.sup-faq p{margin:0 0 16px;font:400 14px/1.8 'Noto Sans KR';color:var(--sub)}

@media (max-width:700px){
  .sup-ways{grid-template-columns:1fr}
  .sup-types{grid-template-columns:1fr}
  .sup-types dt{flex-basis:96px}
}
.pod-name{font:700 15.5px 'Noto Sans KR';color:var(--ink)}

/* 나머지 — 한 줄씩 */
.rows{margin-top:12px}
.row{display:flex;align-items:center;gap:16px;padding:14px 4px;border-top:1px solid var(--bd)}
.row .n{width:26px;flex:none;font-size:20px;text-align:center;color:var(--cap)}
.row-img{width:56px;height:56px;flex:none;border-radius:10px;object-fit:cover;display:block}
.row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row-name{font:700 14.5px 'Noto Sans KR';color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-sent{width:190px;flex:none}

/* 사진이 없거나 못 불러온 자리 */
.thumb-empty{background:var(--wash);border:1px solid var(--bd)}
img.thumb-empty{object-fit:none}

/* 기록 분포 */
.sent{display:flex;flex-direction:column;gap:5px}
.sent-bar{display:flex;height:7px;border-radius:999px;overflow:hidden;background:var(--wash)}
.sent-bar span{display:block;height:100%}
.s-good{background:var(--wine)}
.s-soso{background:var(--gold)}
.s-bad{background:var(--bd2)}
.sent-n{font-size:11.5px}

@media (max-width:1180px){
  .rk-head h1{font-size:28px}
  .podrow{grid-template-columns:repeat(3,1fr);gap:12px}
  .pod-img{height:140px}
  .row-sent{width:150px}
}
@media (max-width:700px){
  .rk-head{padding:30px var(--pad) 24px}
  .rk-head h1{font-size:24px}
  .chips{margin-top:20px;gap:6px}
  .chip{height:40px;font-size:12.5px;padding:0 13px}
  .rk-body{padding:24px var(--pad) 40px}
  /* 위 셋을 폰에서 3열로 두면 사진이 우표만 해진다. 1열로 세워 사진을 살린다. */
  .podrow{grid-template-columns:1fr;gap:10px}
  .pod{display:flex;align-items:stretch}
  .pod-ph{flex:none;width:118px}
  .pod-img{height:100%;min-height:104px}
  .pod-body{flex:1;min-width:0;justify-content:center;padding:12px 14px}
  .row{gap:12px;padding:12px 0}
  .row-img{width:48px;height:48px}
  /* 분포 막대를 이름 아래로 내린다 — 가로로 나란히 두면 둘 다 눌린다. */
  .row{flex-wrap:wrap}
  .row-sent{width:100%;padding-left:38px}
}

/* 스크립트가 만드는 사진 자리 — 기존 규칙과 같은 크기를 쓰되 클래스로 잡는다 */
.pick-img{width:100%;height:132px;object-fit:cover;display:block}
.rank-img{width:50px;height:50px;border-radius:9px;object-fit:cover;flex:none}
@media (max-width:700px){ .pick-img{height:104px} }

/* ── 약관 문서 (legal/*.html) ───────────────────────────────────────────────
   본문은 `backend/public/legal/` 원본에서 그대로 뽑아 온다
   (`scripts/build-legal-pages.js`). 원본이 쓰는 마크업은 이만큼이다:
   h2 · h3 · p · ul · ol · table(.tablewrap) · .card · .muted · .ph · strong · em

   ⚠️ `.ph` 는 원본에서 "여기 채워 넣을 것" 표시(점선 상자)다. 사이트에는 이미 채워진
      값만 나가므로 **평범한 글자처럼** 보이게 한다 — 점선이 보이면 미완성으로 읽힌다. */
.lg{max-width:820px;padding:40px var(--pad) 88px;
    font:400 15px/1.85 'Noto Sans KR',sans-serif;color:var(--sub)}
.lg-meta{margin:14px 0 0;font:400 13px 'Noto Sans KR';color:var(--cap)}

.lg h2{margin:38px 0 10px;font:600 19px/1.5 'Noto Serif KR',serif;color:var(--ink);
       letter-spacing:-.3px}
.lg h2:first-child{margin-top:0}
.lg h3{margin:24px 0 6px;font:700 15px 'Noto Sans KR';color:var(--ink)}
.lg p{margin:10px 0}
.lg strong{color:var(--ink);font-weight:700}
.lg a{text-decoration:underline;text-underline-offset:2px}
.lg ul,.lg ol{margin:10px 0;padding-left:20px}
.lg li{margin:5px 0}
.lg .muted{color:var(--cap);font-size:14px}
.lg .ph{color:inherit;background:none;border:0;padding:0;font-size:inherit}

.lg .card{margin:16px 0;padding:18px 20px;background:var(--card);
          border:1px solid var(--bd);border-radius:14px}
.lg .card p{margin:0}
.lg .card.toc ol{margin:0;padding-left:20px}

/* 표는 폰에서 페이지를 가로로 새게 하지 않는다 — 자기 상자 안에서만 스크롤한다. */
.lg .tablewrap{margin:16px 0;overflow-x:auto;border:1px solid var(--bd);border-radius:14px;
               background:var(--card);-webkit-overflow-scrolling:touch}
.lg table{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
.lg th,.lg td{padding:11px 14px;text-align:left;vertical-align:top;
              border-bottom:1px solid var(--bd)}
.lg thead th{background:var(--wash);font:700 13px 'Noto Sans KR';color:var(--ink);
             white-space:nowrap}
.lg tbody tr:last-child th,.lg tbody tr:last-child td{border-bottom:0}

.lg-foot{margin:44px 0 0;padding-top:20px;border-top:1px solid var(--bd);
         font:400 12.5px/1.7 'Noto Sans KR';color:var(--cap)}

@media (max-width:700px){
  .lg{padding:28px var(--pad) 64px;font-size:14.5px}
  .lg h2{font-size:17px;margin-top:30px}
  .lg table{min-width:460px}
}

/* ── 맛집 상세 (task-239) ──────────────────────────────────────────────────
   랭킹 화면의 부품(sent / thumb-empty / rk-h2 / rk-empty)을 그대로 쓴다.
   여기서만 필요한 것은 히어로 사진과 기록 카드 둘뿐이다. */
/* 넓은 화면은 두 단 — 가게(왼쪽, 변하지 않는 것) / 기록(오른쪽, 쌓이는 것).
   한 단으로 두면 글줄 옆이 통째로 비어 다른 페이지와 밀도가 어긋난다. */
.rs{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:52px;align-items:start}
.rs-side{position:sticky;top:96px}
.rs-main{min-width:0;max-width:760px}
@media (max-width:1180px){
  .rs{grid-template-columns:1fr;gap:0}
  .rs-side{position:static;top:auto}
  .rs-main{max-width:none}
}
.rs-hero{
  height:320px;border-radius:16px;overflow:hidden;background:var(--wash);
  border:1px solid var(--bd);margin-bottom:22px;
}
.rs-hero-img{width:100%;height:100%;object-fit:cover;display:block}
.rs-head{margin-bottom:14px}
.rs-name{font-size:34px;margin:0 0 6px;line-height:1.25}
/* 폐업은 경고가 아니라 사실이다 — 빨강 대신 본문색에 테두리로 알린다.
   앱이 같은 이유로 위험색을 안 쓴다(EditProfileScreen 설계 공통부품 08). */
.rs-closed{
  display:inline-block;margin:8px 0 0;padding:5px 11px;border-radius:999px;
  border:1px solid var(--bd2);background:var(--wash);color:var(--sub);
  font-size:12.5px;font-weight:700;
}
.rs-sent{max-width:420px;margin:0 0 8px}
.rs-h2{margin-top:38px}

.rs-info{margin:14px 0 0;padding:0}
.rs-row{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--bd)}
.rs-row:last-child{border-bottom:0}
.rs-row dt{flex:none;width:74px;color:var(--cap);font-size:14px;font-weight:700;margin:0}
.rs-row dd{margin:0;color:var(--ink);font-size:15px;line-height:1.6;word-break:keep-all}
.rs-row a{color:var(--wine);font-weight:700}

.rs-note{margin:6px 0 18px;max-width:70ch;line-height:1.9}
.rs-more{margin-top:22px}

.rvs{display:flex;flex-direction:column;gap:14px}
.rv{border:1px solid var(--bd);border-radius:14px;background:var(--card);padding:16px 18px}
.rv-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
/* 후기 작성자 얼굴. 이름·아이디와 한 줄로 서므로 목록 아바타보다 조금 작게. */
.rv-av{width:34px;height:34px;font-size:14px}
.rv-who{font-weight:700;color:var(--ink);font-size:15px}
.rv-at{color:var(--cap);font-size:13px}
/* 감정은 낱말로 적는다. 신호등 3색을 쓰지 않는 것은 앱과 같은 규칙이라
   '아쉬웠다' 에도 빨강을 주지 않는다 — 색이 아니라 글자가 말한다. */
.rv-sent{
  margin-left:auto;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;
  border:1px solid var(--bd2);background:var(--wash);color:var(--sub);
}
.rv-sent.s1{background:var(--wine);border-color:var(--wine);color:#fff}
.rv-sent.s0{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.rv-date{flex-basis:100%}
.rv-text{margin:10px 0 0;color:var(--sub);font-size:15px;line-height:1.8;white-space:pre-wrap;word-break:break-word}
.rv-shots{display:flex;gap:8px;margin-top:12px}
.rv-img{width:112px;height:112px;flex:none;border-radius:10px;object-fit:cover;display:block}

@media (max-width:700px){
  .rs-hero{height:210px;border-radius:12px}
  .rs-name{font-size:26px}
  .rs-row{flex-direction:column;gap:4px}
  .rs-row dt{width:auto}
  .rv-img{width:88px;height:88px}
  /* 사진 세 장이 폰 폭을 넘으므로 가로로 밀어 본다 — 페이지가 새지 않게. */
  .rv-shots{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* 순위 항목 → 맛집 상세 링크. 카드 모양은 그대로 두고 눌리는 느낌만 준다. */
.pl-link{display:block;color:inherit;text-decoration:none}
.pl-link:hover .pod-name,.pl-link:hover .row-name,.pl-link:hover .t{color:var(--wine)}
.pl-link:focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:12px}

/* 두 단일 때 오른쪽 첫 제목은 위 여백을 지운다 — 왼쪽 히어로와 어깨를 맞춘다. */
.rs-h2-first{margin-top:0}
@media (max-width:1180px){ .rs-h2-first{margin-top:38px} }

/* ── 히어로 지도(사진) / 목록 ──────────────────────────────────────────────
   지도는 **사진** 위에 카드를 좌표로 얹은 그림이다. 실제 지도(Leaflet)를 한 번 세웠다가
   Shine 지시로 되돌렸다(task-242). 같은 자리를 목록과 나눠 쓰고, 토글은 장식이 아니라
   버튼이다 — 목록 보기는 그대로 살아 있다. */
.maptoggle{z-index:4}                   /* 사진·카드 위에 떠 있어야 한다 */
.maptoggle button{border:0;background:transparent;cursor:pointer;min-height:34px}
.maptoggle button:focus-visible{outline:2px solid var(--wine);outline-offset:2px}

/* 목록 보기 — 지도와 같은 자리를 쓰고 안에서만 스크롤한다.
   페이지가 늘어나면 아래 절(무엇을 하는 앱인가)이 밀려 내려가 히어로가 화면을 다 먹는다. */
.maplist{position:absolute;inset:0;overflow-y:auto;background:var(--card);padding:64px 24px 24px}
/* 줄이 화면 끝까지 늘어나면 이름과 분포가 멀어져 한 줄로 안 읽힌다.
   읽는 폭으로 묶고 가운데 세운다 — 히어로 오른쪽 칸이 이미 넓다. */
.maplist-rows{display:flex;flex-direction:column;max-width:900px;margin:0 auto}
.maplist-chips{max-width:900px;margin:0 auto 14px}
.maplist-empty{padding:24px 2px}

@media (max-width:700px){
  .maplist{padding:58px 16px 16px}
}