/* 나방 웹(2026-10-17 개편) — 앱과 같은 토큰. 참고: 후루츠패밀리(위 앱 받기 띠·검정 버튼·영문 소제목+큰 제목),
   당근·번개장터(웹은 구경, 사고팔기·채팅은 앱), 스레드(커뮤니티 글 구조). 월넛은 주요 버튼(앱 받기)에만. */
:root{
  --walnut:#6B4F3A; --title:#1A1A18; --body:#3A3A38; --meta:#706A64; --line:#E0DBD3; --group:#F3F2EF;
  --divider:rgba(0,0,0,.15); --wrap:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:#fff;color:var(--title);font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
@media(min-width:768px){.wrap{padding:0 32px}}

/* 앱 받기 띠(후루츠·번개장터) */
.appbar{background:#111;color:#fff}
.appbar .wrap{display:flex;align-items:center;justify-content:center;gap:12px;height:48px;position:relative}
.appbar img{width:28px;height:28px;border-radius:7px}
.appbar span{font-size:14px;font-weight:600}
.appbar .get{height:30px;padding:0 14px;border-radius:15px;background:var(--walnut);color:#fff;font-size:13px;font-weight:600;display:inline-flex;align-items:center}
.appbar .x{position:absolute;right:12px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#aaa}
.appbar.hide{display:none}

/* 머리줄 */
header.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.84);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
header.site.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(26,26,24,.05)}
header.site .row{display:flex;align-items:center;height:64px;gap:28px}
header.site .logo img{height:30px;width:auto}
header.site nav{display:flex;gap:24px}
header.site nav a{font-size:16px;font-weight:600;color:var(--meta);padding:21px 0;border-bottom:2px solid transparent;transition:color .2s}
header.site nav a:hover{color:var(--title)}
header.site nav a.on{color:var(--title);border-bottom-color:var(--title)}
header.site .sp{flex:1}
header.site .getapp{font-size:14px;font-weight:600;color:var(--meta);margin-right:14px}
@media(max-width:767px){header.site .getapp{display:none}}
header.site .cta{height:40px;padding:0 18px;border-radius:10px;background:var(--title);color:#fff;font-size:14px;font-weight:600;display:inline-flex;align-items:center}
@media(max-width:767px){
  header.site .row{height:56px}
  header.site .logo img{height:26px}
  header.site nav.top{display:none}
  header.site .cta{height:34px;padding:0 13px;font-size:13px;border-radius:8px}
  header.site .tabs{display:flex;gap:22px;height:44px;align-items:stretch;overflow-x:auto;scrollbar-width:none}
  header.site .tabs a{font-size:15px;font-weight:600;color:var(--meta);display:flex;align-items:center;border-bottom:2px solid transparent;white-space:nowrap}
  header.site .tabs a.on{color:var(--title);border-bottom-color:var(--title)}
}
@media(min-width:768px){header.site .tabs{display:none}}

/* 섹션 제목(후루츠: 영문 소제목 + 큰 제목) */
.sec{padding:56px 0}
.sec.gray{background:var(--group)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--meta)}
.h2{margin-top:6px;font-size:26px;font-weight:700;letter-spacing:-.6px;line-height:1.3}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:22px}
.more{font-size:14px;font-weight:600;color:var(--meta);white-space:nowrap}
@media(min-width:768px){.h2{font-size:32px}.sec{padding:80px 0}}

/* 스토어 버튼 */
.stores{display:flex;flex-wrap:wrap;gap:10px}
.store{height:52px;padding:0 20px;border-radius:12px;background:var(--walnut);color:#fff;display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600}
.store svg{width:20px;height:20px;fill:#fff}
.store.dark{background:var(--title)}

/* 매물 카드(후루츠·당근: 정사각 사진, 제목 한 줄, 굵은 가격, 동네) */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
@media(min-width:768px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px}}
@media(min-width:1024px){.grid.g5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.item .ph{aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--group);position:relative}
.item .ph img{width:100%;height:100%;object-fit:cover}
.item .tt{margin-top:10px;font-size:14px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .pr{margin-top:2px;font-size:16px;font-weight:700}
.item .mt{margin-top:2px;font-size:12px;color:var(--meta)}
.tag{position:absolute;left:8px;top:8px;height:22px;padding:0 8px;border-radius:11px;background:rgba(255,255,255,.92);font-size:11px;font-weight:600;display:flex;align-items:center}

/* 스레드식 글 */
.post{display:flex;gap:12px;padding:12px 0 8px;border-top:.5px solid var(--divider)}
.post:first-child{border-top:0}
.av{width:36px;height:36px;border-radius:50%;background:#ECEAE6;flex:none;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.post .col{flex:1;min-width:0}
.post .hl{display:flex;align-items:center;gap:4px;font-size:15px;line-height:22px;min-width:0}
.post .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post .tp{color:var(--body);white-space:nowrap}
.post .tm{color:var(--meta);margin-left:4px;white-space:nowrap}
.post .tx{margin-top:2px;font-size:15px;line-height:1.5;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.post.full .tx{display:block}
.post .pic{margin-top:10px;border-radius:8px;overflow:hidden;border:.5px solid var(--divider);background:var(--group);position:relative}
.post .pic img{width:100%;max-height:520px;object-fit:cover}
.post .credit{margin-top:6px;font-size:12px;color:var(--meta)}
.post .ac{display:flex;gap:18px;height:40px;align-items:center;font-size:13px;color:var(--body)}
.post .ac span{display:inline-flex;align-items:center;gap:4px}
.post .ac svg{width:20px;height:20px}
.lbl{display:inline-flex;align-items:center;height:18px;padding:0 4px;border:1px solid var(--line);border-radius:4px;font-size:11px;color:var(--meta);font-weight:400;margin-left:4px;white-space:nowrap}
.badge{width:14px;height:14px;border-radius:50%;background:var(--title);display:inline-flex;align-items:center;justify-content:center;flex:none;margin-left:2px}
.badge svg{width:10px;height:10px}
.ai{position:absolute;right:10px;bottom:8px;font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding:2px 6px;border-radius:4px}
.notice{display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:12px;background:var(--group);font-size:13px;color:var(--body);margin-bottom:8px}

/* 공통 */
.empty{padding:40px 16px;text-align:center;color:var(--meta);font-size:14px;line-height:1.6;border-radius:16px;background:var(--group)}
.skel{background:var(--group);border-radius:12px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:20px}
.chip{height:36px;padding:0 15px;border-radius:18px;border:1px solid var(--line);font-size:14px;display:inline-flex;align-items:center;white-space:nowrap;flex:none}
.chip.on{background:var(--title);border-color:var(--title);color:#fff}
.btn-app{display:flex;align-items:center;justify-content:center;height:52px;border-radius:12px;background:var(--walnut);color:#fff;font-size:16px;font-weight:600}
.sticky-cta{position:sticky;bottom:0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom))}

footer.site{border-top:1px solid var(--line);padding:36px 0 48px;color:var(--meta);font-size:13px;line-height:1.7}
footer.site .row{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px}
footer.site img{height:22px;width:auto;opacity:.9}

/* 2026-10-22 페이지 사이 부드러운 전환(지원 브라우저만, 나머지는 그대로) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}

/* 2026-10-22 미감·움직임(참고: 토스 — 큰 글씨·스크롤 따라 나타남·고정 화면 이야기, 당근 — 둥근 묶음 카드, 오늘의집 — 사진 위주 카드와 확대) */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
.h2{letter-spacing:-.8px}
@media(min-width:768px){.h2{font-size:36px;letter-spacing:-1.2px}}
.item .ph img,.sty .ph img,.card .ph img,.w .ph img,.post .pic img{transition:transform .8s var(--ease)}
a:hover .ph img,a.item:hover .ph img,a.card:hover .ph img{transform:scale(1.045)}
a.post:hover .pic img{transform:scale(1.02)}
.item .tt,.sty .nm,.card h3{transition:color .2s}
.store,.cta,.btn-app,.appbar .get,.chip{transition:transform .18s var(--ease),filter .2s,background-color .2s,border-color .2s}
.store:hover,.cta:hover,.btn-app:hover{filter:brightness(1.12)}
.store:active,.cta:active,.btn-app:active,.chip:active{transform:scale(.97)}
.chip:hover{border-color:#BFB6AA}
.more{display:inline-flex;align-items:center;gap:4px;transition:color .2s}
.more:hover{color:var(--title)}
.more::after{content:"";width:6px;height:6px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.more:hover::after{transform:translateX(3px) rotate(45deg)}
/* 스크롤하면 아래에서 떠오르기(자바스크립트가 html 에 .mo 를 붙였을 때만 — 꺼져 있으면 그냥 보인다) */
.mo .rv{opacity:0;transform:translateY(28px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0ms)}
.mo .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
html{scroll-behavior:smooth}