/* =========================================================================
   여인천하 (gynarchy) — 디자인 시스템 v2
   Pretendard 전면 고정 · 모바일/데스크탑 완전 반응형 · 히어로 슬라이더
   소비자 앱 + 관리자 콘솔 + 마이페이지
   ========================================================================= */

:root {
  /* color */
  --bg:#faf4ea; --bg-warm:#f5e9d6; --surface:#fff; --surface-2:#fbf3e6; --surface-3:#f3ead8;
  --ink:#2a1c12; --ink-soft:#7a6450; --ink-faint:#a8967f;
  --gold:#e3a02f; --gold-deep:#c2791a; --gold-soft:#f4d79b; --gold-glow:rgba(227,160,47,.45);
  --rose:#d64f72; --rose-soft:#fbe1e8; --mint:#3a9d8c; --blue:#3f6fb0;
  --ok:#2f9e6e; --warn:#d98324; --danger:#d64545;
  --line:rgba(42,28,18,.10); --line-2:rgba(42,28,18,.06);
  --night-1:#3a1d10; --night-2:#6e2f12;

  /* type — Pretendard 단일 고정 */
  --f: "Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-display: var(--f);
  --f-body: var(--f);
  --f-mono: ui-monospace,SFMono-Regular,"Consolas",monospace;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  /* radius / shadow */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --sh-1:0 2px 10px rgba(42,28,18,.06);
  --sh-2:0 8px 26px rgba(42,28,18,.10);
  --sh-3:0 18px 48px rgba(42,28,18,.16);
  --sh-gold:0 10px 30px rgba(227,160,47,.30);

  /* layout */
  --sidebar-w:256px; --rail-w:312px; --content-max:1180px;
  --tabbar-h:64px; --topbar-h:58px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f-body);color:var(--ink);background:var(--bg);line-height:1.55;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  font-feature-settings:"tnum";letter-spacing:-.01em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;letter-spacing:inherit}
input{font:inherit}
ul{list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
svg{display:block}

body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.03;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;letter-spacing:-.022em;line-height:1.22;color:var(--ink)}
.display{font-family:var(--f-display);font-weight:800;letter-spacing:-.022em}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.muted{color:var(--ink-soft)} .faint{color:var(--ink-faint)}

/* =========================================================================
   APP SHELL (consumer)
   ========================================================================= */
.app-grid{min-height:100vh;display:grid;grid-template-columns:1fr}
.sidebar{display:none}
.app-main{min-width:0;display:flex;flex-direction:column;min-height:100vh}

.topbar{position:sticky;top:0;z-index:60;height:var(--topbar-h);display:flex;align-items:center;gap:12px;padding:0 16px;
  background:rgba(250,244,234,.82);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.topbar .brand{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:800;font-size:1.18rem;letter-spacing:-.03em}
.topbar .brand .halo-dot,.sidebar .brand .halo-dot{border-radius:50%;background:radial-gradient(circle,#fff6df 0%,var(--gold) 55%,transparent 72%)}
.topbar .brand .halo-dot{width:22px;height:22px;box-shadow:0 0 14px 3px var(--gold-glow)}
.topbar .spacer{flex:1}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .2s;position:relative}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn svg{width:22px;height:22px}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--rose);border:2px solid var(--bg)}

.content{flex:1;width:100%;max-width:680px;margin:0 auto;padding:16px 16px calc(var(--tabbar-h) + 28px)}
.content.wide{max-width:var(--content-max)}

.reveal{opacity:0;transform:translateY(14px);animation:rise .55s var(--ease) forwards}
.reveal.d1{animation-delay:.05s}.reveal.d2{animation-delay:.12s}.reveal.d3{animation-delay:.2s}.reveal.d4{animation-delay:.28s}.reveal.d5{animation-delay:.36s}
@keyframes rise{to{opacity:1;transform:none}}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:70;height:var(--tabbar-h);display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.9);backdrop-filter:saturate(1.5) blur(16px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.66rem;font-weight:600;color:var(--ink-faint);position:relative;transition:color .2s}
.tabbar a svg{width:24px;height:24px;transition:transform .25s var(--ease)}
.tabbar a.active{color:var(--gold-deep)}
.tabbar a.active svg{transform:translateY(-2px) scale(1.06)}
.tabbar a.active::before{content:"";position:absolute;top:0;width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--gold);box-shadow:0 0 10px var(--gold-glow)}

/* =========================================================================
   COMPONENTS
   ========================================================================= */
.avatar{border-radius:50%;object-fit:cover;background:var(--surface-2);flex:0 0 auto}
.halo{position:relative;display:inline-grid;place-items:center}
.halo::before{content:"";position:absolute;inset:-5px;border-radius:50%;z-index:-1;background:radial-gradient(circle,var(--gold-glow) 0%,transparent 70%)}

.live{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;color:var(--rose);letter-spacing:.04em}
.live .pulse{width:9px;height:9px;border-radius:50%;background:var(--rose);position:relative;flex:0 0 auto}
.live .pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--rose);animation:ping 1.6s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:var(--r-pill);
  font-weight:700;font-size:.92rem;transition:transform .15s var(--ease),box-shadow .2s,background .2s;white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn:active{transform:scale(.97)}
.btn-gold{background:linear-gradient(145deg,var(--gold),var(--gold-deep));color:#fff;box-shadow:var(--sh-gold)}
.btn-gold:hover{box-shadow:0 14px 38px rgba(227,160,47,.42)}
.btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:var(--sh-1)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-block{width:100%}
.btn-sm{height:38px;padding:0 15px;font-size:.85rem}.btn-sm svg{width:16px;height:16px}

/* chips with desktop horizontal scroll */
.chips-wrap{position:relative;margin:0 -2px}
.chips{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;height:38px;padding:0 16px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);font-weight:600;font-size:.86rem;transition:all .2s var(--ease);white-space:nowrap}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip:not(.active):hover{background:var(--surface-2);color:var(--ink)}
.chip-nav{display:none}

.card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:transform .25s var(--ease),box-shadow .25s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}

.sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:24px 2px 14px}
.sec-head h2{font-size:1.3rem}
.sec-head a{font-size:.82rem;font-weight:700;color:var(--gold-deep);white-space:nowrap}

.coin{display:inline-flex;align-items:center;gap:5px;padding:4px 11px 4px 8px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,#fff6e3,#f6dca0);color:var(--gold-deep);font-weight:800;font-size:.82rem;
  border:1px solid rgba(194,121,26,.25);box-shadow:0 2px 8px rgba(227,160,47,.22)}
.coin .c{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9b0,var(--gold));box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);flex:0 0 auto}

/* post card */
.post{padding:16px;margin-bottom:14px}
.post .top{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.post .top .avatar{width:38px;height:38px}
.post .who{font-weight:700;font-size:.9rem}
.post .meta{font-size:.74rem;color:var(--ink-faint)}
.post .cat{margin-left:auto;font-size:.7rem;font-weight:700;color:var(--gold-deep);background:var(--surface-2);padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap}
.post h3.title{font-size:1.1rem;margin-bottom:6px;transition:color .2s}
.post .excerpt{font-size:.92rem;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post .thumb{margin-top:12px;border-radius:var(--r-md);aspect-ratio:16/9;object-fit:cover;width:100%}
.post .actions{display:flex;align-items:center;gap:18px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line-2);font-size:.84rem;font-weight:600;color:var(--ink-soft)}
.post .actions .act{display:inline-flex;align-items:center;gap:6px;transition:color .2s,transform .15s}
.post .actions .act svg{width:18px;height:18px}
.post .actions .act:hover{color:var(--ink)}
.post .actions .act.liked{color:var(--rose)}
.post .actions .act:active{transform:scale(.9)}
.post .actions .grow{flex:1}

.stat-row{display:flex;gap:10px}
.stat{flex:1;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);padding:12px 14px;box-shadow:var(--sh-1);min-width:0}
.stat .v{font-weight:800;font-size:1.25rem;letter-spacing:-.03em}
.stat .l{font-size:.72rem;color:var(--ink-faint);margin-top:2px}

/* =========================================================================
   HERO + SLIDER
   ========================================================================= */
.hero{position:relative;border-radius:var(--r-xl);overflow:hidden;color:#fff;isolation:isolate;min-height:330px;display:flex;box-shadow:var(--sh-2)}
.hero-slider{position:absolute;inset:0;z-index:-2}
.hero-slider .slide{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.hero-slider .slide.active{opacity:1}
.hero-slider .slide img,.hero-slider .slide video{width:100%;height:100%;object-fit:cover}
.hero-slider .slide.kb img{animation:kb 9s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.14) translate(-2%,-3%)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(165deg,rgba(58,29,16,.30) 0%,rgba(42,28,18,.20) 40%,rgba(42,28,18,.62) 100%)}
.hero .hero-overlay{position:relative;padding:30px 24px;display:flex;flex-direction:column;justify-content:center;width:100%}
.hero .halo-ring{width:84px;height:84px;border-radius:50%;margin-bottom:14px;background:radial-gradient(circle,#fff7e2 0%,var(--gold) 50%,transparent 70%);box-shadow:0 0 46px 12px var(--gold-glow);animation:breathe 4s var(--ease) infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.07);opacity:1}}
.hero h1{font-size:2rem;text-shadow:0 2px 18px rgba(0,0,0,.35);color:#fff}
.hero p.tag{margin-top:8px;opacity:.94;font-size:.98rem;max-width:32ch}
.hero .hero-cta{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.hero .slide-tag{position:absolute;top:14px;left:16px;z-index:3;font-size:.68rem;font-weight:700;background:rgba(0,0,0,.42);color:#fff;padding:5px 12px;border-radius:var(--r-pill);backdrop-filter:blur(4px)}
.hero .dots{position:absolute;bottom:14px;left:0;right:0;display:flex;gap:7px;justify-content:center;z-index:3}
.hero .dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:all .3s var(--ease)}
.hero .dots button.active{width:22px;border-radius:5px;background:var(--gold)}
.hero .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.32);color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px);opacity:0;transition:opacity .25s}
.hero:hover .arrow{opacity:1}
.hero .arrow svg{width:20px;height:20px}
.hero .arrow.prev{left:12px}.hero .arrow.next{right:12px}

/* bubbles */
.bubbles{display:flex;gap:10px;overflow-x:auto;padding:14px 2px 4px;scrollbar-width:none}
.bubbles::-webkit-scrollbar{display:none}
.bubble{flex:0 0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:9px 16px;font-size:.84rem;font-weight:600;box-shadow:var(--sh-1)}

/* service grid */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.svc{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--sh-1);transition:transform .2s var(--ease),box-shadow .2s}
.svc:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.svc .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,var(--gold),var(--gold-deep));box-shadow:var(--sh-gold)}
.svc .ic svg{width:24px;height:24px}
.svc .ic.alt{background:linear-gradient(150deg,#e58aa0,var(--rose));box-shadow:0 8px 20px rgba(214,79,114,.3)}
.svc .ic.alt2{background:linear-gradient(150deg,#4cb6a4,var(--mint));box-shadow:0 8px 20px rgba(58,157,140,.3)}
.svc span{font-size:.76rem;font-weight:600;color:var(--ink-soft);text-align:center;line-height:1.3}

.banner{margin:18px 0;border-radius:var(--r-lg);padding:18px 20px;display:flex;align-items:center;gap:14px;background:linear-gradient(110deg,#2a1c12,#5e3416);color:#fff;box-shadow:var(--sh-2);position:relative;overflow:hidden}
.banner::after{content:"✦";position:absolute;right:-6px;top:-12px;font-size:7rem;color:rgba(227,160,47,.18)}
.banner .b-txt{flex:1;min-width:0}
.banner .b-txt b{font-size:1.02rem;font-weight:800}
.banner .b-txt p{font-size:.8rem;opacity:.82;margin-top:2px}
.banner svg{width:22px;height:22px;flex:0 0 auto}

/* =========================================================================
   MAP
   ========================================================================= */
.map-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);border:1px solid var(--line)}
.map-canvas{height:340px;position:relative;background:
  radial-gradient(circle at 30% 40%,rgba(227,160,47,.12),transparent 40%),
  repeating-linear-gradient(0deg,#eef1ea 0 1px,transparent 1px 26px),
  repeating-linear-gradient(90deg,#eef1ea 0 1px,transparent 1px 26px),
  linear-gradient(160deg,#f3f6ef,#e8efe6)}
.pin{position:absolute;transform:translate(-50%,-100%)}
.pin .dot{width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--gold);box-shadow:0 4px 10px rgba(0,0,0,.25);border:2px solid #fff}
.pin.live .dot{background:var(--rose)}
.pin.live::after{content:"";position:absolute;left:50%;top:0;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:var(--rose);animation:ping 1.8s var(--ease) infinite}
.pin .lbl{position:absolute;left:50%;top:22px;transform:translateX(-50%);white-space:nowrap;font-size:.66rem;font-weight:700;background:#fff;padding:2px 7px;border-radius:var(--r-pill);box-shadow:var(--sh-1)}
.map-float{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:8px;flex-wrap:wrap}
.map-float .pillbox{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:var(--r-pill);padding:8px 14px;box-shadow:var(--sh-1);font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:7px}
.spot{display:flex;gap:12px;padding:13px;align-items:center;margin-bottom:10px}
.spot .when{text-align:center;min-width:48px}
.spot .when .d{font-weight:800;font-size:1.2rem;line-height:1}
.spot .when .m{font-size:.66rem;color:var(--ink-faint)}
.spot .info{flex:1;min-width:0}
.spot .info h4{font-size:.96rem}
.spot .info p{font-size:.78rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spot .dist{font-size:.72rem;font-weight:700;color:var(--gold-deep)}

/* =========================================================================
   CHAT
   ========================================================================= */
.room{display:flex;gap:12px;padding:13px;align-items:center;border-bottom:1px solid var(--line-2)}
.room:last-child{border-bottom:none}
.room .avatar{width:50px;height:50px}
.room .body{flex:1;min-width:0}
.room .body .l1{display:flex;align-items:center;gap:7px}
.room .body h4{font-size:.95rem;font-weight:700}
.room .body .tag{font-size:.6rem;font-weight:800;padding:2px 6px;border-radius:5px}
.room .body .tag.pub{background:var(--rose-soft);color:var(--rose)}
.room .body .tag.one{background:var(--surface-2);color:var(--gold-deep)}
.room .body .last{font-size:.82rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room .side{text-align:right;flex:0 0 auto}
.room .side .t{font-size:.68rem;color:var(--ink-faint)}
.room .side .unread{margin-top:6px;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--rose);color:#fff;font-size:.68rem;font-weight:800;display:inline-grid;place-items:center}

.thread{display:flex;flex-direction:column;gap:10px;padding:8px 2px 16px}
.msg{max-width:78%;padding:10px 14px;border-radius:18px;font-size:.92rem;line-height:1.45;box-shadow:var(--sh-1)}
.msg.in{align-self:flex-start;background:var(--surface);border:1px solid var(--line-2);border-bottom-left-radius:6px}
.msg.out{align-self:flex-end;background:linear-gradient(145deg,var(--gold),var(--gold-deep));color:#fff;border-bottom-right-radius:6px}
.msg .nm{font-size:.72rem;font-weight:800;color:var(--gold-deep);margin-bottom:3px}
.composer{position:sticky;bottom:0;display:flex;gap:9px;padding:10px 0;background:linear-gradient(transparent,var(--bg) 22%)}
.composer input{flex:1;height:46px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);padding:0 18px;box-shadow:var(--sh-1)}
.composer input:focus{outline:none;border-color:var(--gold)}
.composer .send{width:46px;height:46px;border-radius:50%;background:linear-gradient(145deg,var(--gold),var(--gold-deep));color:#fff;display:grid;place-items:center;box-shadow:var(--sh-gold);flex:0 0 auto}
.composer .send svg{width:20px;height:20px}

/* =========================================================================
   MYPAGE
   ========================================================================= */
.profile-hero{border-radius:var(--r-xl);padding:26px 22px;color:#fff;position:relative;overflow:hidden;background:radial-gradient(120% 100% at 80% 0%,#e08a2e,var(--night-1));box-shadow:var(--sh-2)}
.profile-hero .grade{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.04em;background:rgba(255,255,255,.16);padding:5px 12px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.28)}
.profile-hero .grade svg{width:14px;height:14px}
.profile-hero .pname{font-weight:800;font-size:1.6rem;margin:12px 0 2px;letter-spacing:-.03em}
.profile-hero .pedit{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:var(--r-pill);padding:6px 14px;font-size:.78rem;font-weight:700;color:#fff}

.tabs{display:flex;gap:4px;background:var(--surface-2);border-radius:var(--r-pill);padding:4px;margin:16px 0}
.tabs button{flex:1;height:38px;border-radius:var(--r-pill);font-weight:700;font-size:.86rem;color:var(--ink-soft);transition:all .2s var(--ease)}
.tabs button.active{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}

.wallet{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.wallet .w-card{padding:16px;border-radius:var(--r-md)}
.wallet .w-card.point{background:linear-gradient(140deg,#fff6e3,#f6dca0)}
.wallet .w-card.cash{background:linear-gradient(140deg,#e9f6f2,#bfe6db)}
.wallet .w-card .lab{font-size:.74rem;color:var(--ink-soft);font-weight:600}
.wallet .w-card .amt{font-weight:800;font-size:1.5rem;margin-top:4px;letter-spacing:-.03em}

.menu-list{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--line-2);overflow:hidden;box-shadow:var(--sh-1)}
.menu-list a,.menu-list .row{display:flex;align-items:center;gap:13px;padding:15px 18px;border-bottom:1px solid var(--line-2);font-weight:600;font-size:.92rem;transition:background .15s}
.menu-list a:last-child,.menu-list .row:last-child{border-bottom:none}
.menu-list a:hover{background:var(--surface-2)}
.menu-list .mic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);color:var(--gold-deep);flex:0 0 auto}
.menu-list .mic svg{width:18px;height:18px}
.menu-list .chev{margin-left:auto;color:var(--ink-faint)}
.menu-list .chev svg{width:18px;height:18px}

/* transaction list */
.tx{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line-2)}
.tx:last-child{border-bottom:none}
.tx .ti{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);color:var(--gold-deep);flex:0 0 auto}
.tx .tb{flex:1;min-width:0}.tx .tb h5{font-size:.9rem;font-weight:700}.tx .tb p{font-size:.74rem;color:var(--ink-faint)}
.tx .amt{font-weight:800;font-size:.95rem}
.tx .amt.plus{color:var(--ok)}.tx .amt.minus{color:var(--ink-soft)}

/* mini bar chart */
.barchart{display:flex;align-items:flex-end;gap:10px;height:140px;padding:10px 4px 0}
.barchart .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.barchart .b i{width:100%;max-width:34px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--gold),var(--gold-deep));display:block}
.barchart .b span{font-size:.68rem;color:var(--ink-faint)}

/* toggle switch */
.switch{width:46px;height:27px;border-radius:var(--r-pill);background:var(--line);position:relative;transition:background .2s;flex:0 0 auto;margin-left:auto}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform .2s var(--ease)}
.switch.on{background:var(--gold)}
.switch.on::after{transform:translateX(19px)}

/* reels */
.reels-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.reel{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:9/16;box-shadow:var(--sh-1);background:#2a1c12}
.reel img{width:100%;height:100%;object-fit:cover;opacity:.92}
.reel .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;color:#fff;background:linear-gradient(transparent 40%,rgba(0,0,0,.7));font-size:.82rem;font-weight:700}
.reel .play{position:absolute;top:10px;right:10px;font-size:.7rem;background:rgba(0,0,0,.4);padding:3px 8px;border-radius:var(--r-pill)}

/* misc */
.divider{height:1px;background:var(--line);margin:22px 0}
.center{text-align:center}
.fab-write{position:fixed;right:18px;bottom:calc(var(--tabbar-h) + 18px);z-index:65;height:52px;padding:0 22px;border-radius:var(--r-pill);background:linear-gradient(145deg,var(--gold),var(--gold-deep));color:#fff;font-weight:800;display:inline-flex;align-items:center;gap:9px;box-shadow:var(--sh-gold)}
.fab-write svg{width:20px;height:20px}
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 26px);transform:translateX(-50%) translateY(20px);z-index:200;background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--r-pill);font-size:.86rem;font-weight:600;box-shadow:var(--sh-3);opacity:0;transition:all .3s var(--ease);pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.sheet{position:fixed;inset:0;z-index:120;background:var(--bg);padding:14px;overflow:auto}

/* =========================================================================
   ADMIN CONSOLE
   ========================================================================= */
.admin{display:grid;grid-template-columns:1fr;min-height:100vh;background:var(--bg-warm)}
.admin-side{display:none}
.admin-main{min-width:0;display:flex;flex-direction:column}
.admin-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;height:60px;padding:0 18px;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.admin-top h1{font-size:1.15rem}
.admin-top .spacer{flex:1}
.admin-top .who{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700}
.admin-top .who .avatar{width:32px;height:32px}
.admin-content{padding:18px 18px 60px;width:100%;max-width:1180px;margin:0 auto}

.admin-mnav{display:flex;gap:8px;overflow-x:auto;padding:12px 2px;scrollbar-width:none}
.admin-mnav::-webkit-scrollbar{display:none}
.admin-mnav button{flex:0 0 auto;height:38px;padding:0 15px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:.84rem;color:var(--ink-soft);display:inline-flex;align-items:center;gap:7px}
.admin-mnav button svg{width:16px;height:16px}
.admin-mnav button.active{background:var(--ink);color:#fff;border-color:var(--ink)}

.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px}
.kpi{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);padding:16px;box-shadow:var(--sh-1)}
.kpi .kl{font-size:.76rem;color:var(--ink-soft);font-weight:600;display:flex;align-items:center;gap:7px}
.kpi .kl .ki{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);color:var(--gold-deep)}
.kpi .kl .ki svg{width:16px;height:16px}
.kpi .kv{font-weight:800;font-size:1.6rem;margin-top:8px;letter-spacing:-.03em}
.kpi .kd{font-size:.74rem;font-weight:700;margin-top:2px}
.kpi .kd.up{color:var(--ok)}.kpi .kd.down{color:var(--danger)}

.panel{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-1);margin-bottom:18px;overflow:hidden}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line-2)}
.panel-h h3{font-size:1.02rem}
.panel-b{padding:6px 0}
.panel-b.pad{padding:18px}

/* data table */
.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th{text-align:left;font-size:.72rem;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;padding:10px 18px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl td{padding:12px 18px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--surface-2)}
.tbl .u{display:flex;align-items:center;gap:9px}
.tbl .u .avatar{width:30px;height:30px}
.tbl-scroll{overflow-x:auto}
.tbl-scroll .tbl{min-width:560px}

.badge{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:var(--r-pill)}
.badge.ok{background:#e4f5ec;color:var(--ok)}
.badge.warn{background:#fdeede;color:var(--warn)}
.badge.danger{background:#fbe3e3;color:var(--danger)}
.badge.neutral{background:var(--surface-2);color:var(--ink-soft)}
.badge.gold{background:#fdf0d6;color:var(--gold-deep)}

.bigbars{display:flex;align-items:flex-end;gap:12px;height:180px;padding:14px 18px}
.bigbars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bigbars .b i{width:100%;max-width:40px;border-radius:8px 8px 0 0;background:linear-gradient(180deg,var(--gold),var(--gold-deep))}
.bigbars .b span{font-size:.68rem;color:var(--ink-faint)}
.row-actions{display:flex;gap:6px}
.mini-btn{height:30px;padding:0 11px;border-radius:8px;font-size:.76rem;font-weight:700;border:1px solid var(--line);background:var(--surface)}
.mini-btn.gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.mini-btn.danger{background:#fff;color:var(--danger);border-color:#f0c9c9}

/* =========================================================================
   v3 — 게임화 · 등급 · 채팅 고도화(화상/음성)
   ========================================================================= */
.progress{height:10px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.progress>i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--gold),var(--gold-deep))}

.gchip{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.8rem}
.gchip img{width:22px;height:22px}

.grade-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:16px;margin-bottom:14px}
.grade-card .gh{display:flex;align-items:center;gap:12px}
.grade-card .gh img{width:52px;height:52px;flex:0 0 auto}
.grade-card .gh .gn{font-weight:800;font-size:1.05rem}
.grade-card .gh .gs{font-size:.76rem;color:var(--ink-soft)}
.grade-card .pinfo{display:flex;justify-content:space-between;font-size:.74rem;color:var(--ink-soft);margin:12px 0 6px}

.grade-ladder{display:flex;flex-direction:column;gap:10px}
.grade-step{display:flex;align-items:center;gap:14px;padding:12px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--surface)}
.grade-step.cur{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-glow)}
.grade-step img{width:46px;height:46px;flex:0 0 auto}
.grade-step .gb{flex:1;min-width:0}
.grade-step .gb h4{font-size:1rem}
.grade-step .gb p{font-size:.78rem;color:var(--ink-soft)}
.grade-step .gtag{font-size:.66rem;font-weight:800;color:var(--gold-deep)}

.checkin{background:linear-gradient(135deg,#2a1c12,#5e3416);color:#fff;border-radius:var(--r-lg);padding:16px;margin-bottom:14px;box-shadow:var(--sh-2)}
.checkin .ch-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.checkin .ch-top b{font-size:1rem;font-weight:800}
.checkin .streak{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:800;color:var(--gold-soft)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{aspect-ratio:1;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:.74rem;font-weight:700;color:rgba(255,255,255,.7)}
.day.done{background:linear-gradient(145deg,var(--gold),var(--gold-deep));color:#fff}
.day.today{box-shadow:0 0 0 2px #fff inset}

.mission{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--line-2)}
.mission:last-child{border-bottom:none}
.mission .mi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);color:var(--gold-deep);flex:0 0 auto}
.mission .mb{flex:1;min-width:0}.mission .mb h5{font-size:.9rem;font-weight:700}.mission .mb p{font-size:.74rem;color:var(--ink-faint)}
.mission .mp{font-size:.74rem;font-weight:800;color:var(--gold-deep);white-space:nowrap}
.mission .claim{height:32px;padding:0 13px;border-radius:var(--r-pill);background:var(--gold);color:#fff;font-weight:700;font-size:.78rem;flex:0 0 auto}
.mission .claim.done{background:var(--surface-2);color:var(--ink-faint)}

.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.badge-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.badge-item .bm{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--gold-soft),var(--gold));color:#fff;box-shadow:var(--sh-1)}
.badge-item .bm svg{width:26px;height:26px}
.badge-item.lock .bm{background:var(--surface-2);color:var(--ink-faint);box-shadow:none}
.badge-item span{font-size:.7rem;font-weight:600;color:var(--ink-soft);line-height:1.25}

.lb-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line-2)}
.lb-row:last-child{border-bottom:none}
.lb-row .rk{width:26px;text-align:center;font-weight:800;color:var(--ink-faint)}
.lb-row .rk.top{color:var(--gold-deep)}
.lb-row .avatar{width:36px;height:36px}
.lb-row .nm{flex:1;min-width:0;font-weight:700;font-size:.9rem}
.lb-row .sc{font-weight:800;color:var(--gold-deep);font-size:.86rem}

.gacha{display:flex;align-items:center;gap:14px;border-radius:var(--r-lg);padding:16px 18px;background:linear-gradient(110deg,#d64f72,#b93a5c);color:#fff;box-shadow:var(--sh-2);margin-bottom:14px}
.gacha .gi{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:0 0 auto}
.gacha .gt{flex:1;min-width:0}.gacha .gt b{font-weight:800}.gacha .gt p{font-size:.78rem;opacity:.85}

.modal-wrap{position:fixed;inset:0;z-index:300;display:grid;place-items:end center;background:rgba(42,28,18,.5);backdrop-filter:blur(3px);opacity:0;animation:fade .2s forwards}
@keyframes fade{to{opacity:1}}
.modal{background:var(--bg);width:100%;max-width:560px;max-height:88vh;overflow:auto;border-radius:var(--r-xl) var(--r-xl) 0 0;padding:20px;animation:slideup .3s var(--ease)}
@keyframes slideup{from{transform:translateY(40px)}to{transform:none}}
.modal .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal .mh h3{font-size:1.2rem}
.modal .mx{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2)}

.thr-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.thr-head .ti{flex:1;min-width:0}
.thr-head .ti .nm2{font-weight:800}
.thr-head .cbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--gold-deep);flex:0 0 auto}
.thr-head .cbtn svg{width:20px;height:20px}

.typing{align-self:flex-start;display:inline-flex;gap:4px;padding:12px 16px;background:var(--surface);border:1px solid var(--line-2);border-radius:18px;border-bottom-left-radius:6px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);animation:td 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes td{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.vmsg{display:flex;align-items:center;gap:10px;min-width:160px}
.vmsg .vp{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;flex:0 0 auto}
.msg.in .vmsg .vp{background:var(--surface-2);color:var(--gold-deep)}
.vmsg .wave{flex:1;display:flex;align-items:center;gap:2px;height:24px}
.vmsg .wave i{flex:1;background:currentColor;border-radius:2px;opacity:.7}
.vmsg .vt{font-size:.7rem;font-weight:700;opacity:.85}

.composer .cadd{width:42px;height:46px;display:grid;place-items:center;color:var(--ink-soft);flex:0 0 auto}
.composer .cadd svg{width:22px;height:22px}

.callscreen{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;color:#fff;background:radial-gradient(120% 90% at 50% 20%,#5e3416,#2a1c12 70%,#1a0f07)}
.callscreen.video{background:#15100b}
.call-remote{flex:1;position:relative;display:grid;place-items:center;overflow:hidden}
.call-remote img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:blur(2px)}
.call-remote .who{position:relative;text-align:center;z-index:2}
.call-remote .who .av{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 14px;box-shadow:0 0 0 6px rgba(255,255,255,.12),0 0 60px 10px var(--gold-glow)}
.call-remote .who h2{color:#fff;font-size:1.6rem}
.call-remote .who p{opacity:.8;margin-top:4px}
.call-remote .who .timer{margin-top:10px;font-weight:800;color:var(--gold-soft);letter-spacing:.05em}
.call-self{position:absolute;top:16px;right:16px;width:104px;height:148px;border-radius:16px;overflow:hidden;background:#2a1c12;border:2px solid rgba(255,255,255,.25);z-index:3;display:grid;place-items:center}
.call-self img{width:100%;height:100%;object-fit:cover}
.call-self .off{font-size:.7rem;opacity:.7}
.call-controls{display:flex;justify-content:center;gap:16px;padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
.call-btn{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px);transition:transform .15s}
.call-btn:active{transform:scale(.92)}
.call-btn.off{background:#fff;color:var(--ink)}
.call-btn.end{background:var(--danger);width:64px;height:64px}
.call-btn svg{width:24px;height:24px}
.call-label{position:absolute;bottom:96px;left:0;right:0;text-align:center;font-size:.74rem;opacity:.6;z-index:3}

@media (min-width:480px){.badges{grid-template-columns:repeat(5,1fr)}}

/* =========================================================================
   v4 — 기도전당(촛불)·부적·작성폼·실시간 미디어
   ========================================================================= */
/* form fields (compose / candle / etc.) */
.field{margin-bottom:14px}
.field label{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:var(--surface);font:inherit;color:var(--ink)}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:.84rem;color:var(--ink-soft)}
.seg button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* prayer hall */
.prayer-hero{border-radius:var(--r-xl);padding:26px 22px;color:#fff;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#e08a2e,#5e2f14 60%,#2a1c12);box-shadow:var(--sh-2)}
.prayer-hero h1{color:#fff;font-size:1.7rem}
.prayer-hero p{opacity:.9;font-size:.92rem;margin-top:6px}
.prayer-hero .cnt{margin-top:12px;display:inline-flex;align-items:center;gap:7px;font-weight:800;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);padding:7px 16px;border-radius:var(--r-pill)}
.candle-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:16px;padding:8px 2px}
.candle{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.candle .stick{position:relative;width:26px;height:52px;border-radius:7px 7px 3px 3px;background:linear-gradient(#fff6e3,#eccf96);box-shadow:var(--sh-1)}
.candle .flame{position:absolute;top:-15px;left:50%;width:12px;height:17px;transform:translateX(-50%);border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 72%,#fff6c8,#ffb13a 58%,#ff5e2e);box-shadow:0 0 13px 3px rgba(255,150,40,.6);animation:flick 1.5s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes flick{0%{transform:translateX(-50%) scale(1) rotate(-3deg)}50%{transform:translateX(-51%) scale(1.06) rotate(2deg)}100%{transform:translateX(-50%) scale(.97) rotate(-1deg)}}
.candle.mine .stick{box-shadow:0 0 0 2px var(--gold),var(--sh-1)}
.candle .wsh{font-size:.66rem;color:var(--ink-soft);max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.candle .cat{font-size:.6rem;font-weight:700;color:var(--gold-deep)}

/* talisman (good only) */
.tali-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tali{position:relative;border-radius:12px;padding:16px 10px 14px;text-align:center;background:linear-gradient(160deg,#f7e2a8,#eaca6f);border:2px solid #b4382c;box-shadow:var(--sh-1);overflow:hidden}
.tali::before,.tali::after{content:"";position:absolute;left:8px;right:8px;height:2px;background:#b4382c;opacity:.5}
.tali::before{top:6px}.tali::after{bottom:6px}
.tali .sym{font-size:1.7rem;line-height:1;color:#b4382c;font-weight:900}
.tali .nm{margin-top:6px;font-weight:800;color:#8c2018;font-size:.92rem}
.tali .ds{font-size:.66rem;color:#9c5a32;margin-top:3px}
.tali.locked{filter:grayscale(.7);opacity:.5}
.tali-draw{position:relative;border-radius:var(--r-lg);padding:18px;text-align:center;color:#fff;background:linear-gradient(135deg,#b4382c,#7a1f1f);box-shadow:var(--sh-2);margin-bottom:14px}
.tali-draw b{font-weight:800;font-size:1.05rem}.tali-draw p{font-size:.8rem;opacity:.85;margin:4px 0 12px}

/* big talisman reveal in modal */
.tali-big{max-width:220px;margin:0 auto 14px;padding:26px 16px 22px;border-radius:14px;background:linear-gradient(160deg,#f7e2a8,#e6c161);border:3px solid #b4382c;text-align:center;box-shadow:var(--sh-2)}
.tali-big .sym{font-size:3rem;color:#b4382c;font-weight:900;line-height:1}
.tali-big .nm{margin-top:8px;font-weight:800;color:#8c2018;font-size:1.2rem}
.tali-big .ds{font-size:.8rem;color:#9c5a32;margin-top:6px}

/* live self video in call */
.call-self video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.call-remote .who .av.pulse-ring{animation:breathe 3s var(--ease) infinite}

@media (min-width:600px){.tali-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.tali-grid{grid-template-columns:repeat(4,1fr)}}

/* =========================================================================
   RESPONSIVE — tablet & desktop
   ========================================================================= */
@media (min-width:600px){
  .svc-grid{grid-template-columns:repeat(7,1fr)}
  .reels-grid{grid-template-columns:repeat(3,1fr)}
  .hero{min-height:380px}
  .hero h1{font-size:2.6rem}
  .hero .hero-overlay{padding:40px 40px}
  .kpi-grid{grid-template-columns:repeat(4,1fr)}
}

@media (min-width:1024px){
  :root{--topbar-h:0px}
  body{background:linear-gradient(180deg,var(--bg),var(--bg-warm))}
  .app-grid{grid-template-columns:var(--sidebar-w) 1fr}
  .sidebar{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:24px 16px;border-right:1px solid var(--line);background:rgba(255,255,255,.55);backdrop-filter:blur(6px)}
  .sidebar .brand{display:flex;align-items:center;gap:11px;padding:4px 10px 22px;font-family:var(--f-display);font-weight:800;font-size:1.5rem;letter-spacing:-.03em}
  .sidebar .brand .halo-dot{width:34px;height:34px;box-shadow:0 0 18px 4px var(--gold-glow)}
  .sidebar nav{display:flex;flex-direction:column;gap:4px}
  .sidebar nav a{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:var(--r-md);font-weight:600;color:var(--ink-soft);transition:all .18s var(--ease)}
  .sidebar nav a svg{width:22px;height:22px}
  .sidebar nav a:hover{background:var(--surface-2);color:var(--ink)}
  .sidebar nav a.active{background:var(--ink);color:#fff;box-shadow:var(--sh-2)}
  .sidebar nav a.active svg{color:var(--gold-soft)}
  .sidebar .s-write{margin-top:18px}
  .sidebar .s-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line-2)}
  .sidebar .s-user .avatar{width:38px;height:38px}
  .sidebar .s-user .nm{font-size:.85rem;font-weight:700}
  .sidebar .s-user .gr{font-size:.68rem;color:var(--gold-deep);font-weight:700}

  .topbar,.tabbar,.fab-write{display:none}
  .content{padding:30px 30px 60px}

  .has-rail{display:grid;grid-template-columns:minmax(0,1fr) var(--rail-w);gap:30px;align-items:start}
  .rail{position:sticky;top:30px;display:flex;flex-direction:column;gap:16px}
  .rail .card{padding:18px}

  .svc-grid{grid-template-columns:repeat(7,1fr)}
  .reels-grid{grid-template-columns:repeat(4,1fr)}
  .map-canvas{height:460px}
  .toast{bottom:32px}
  .hero{min-height:420px}
  .hero h1{font-size:2.9rem}
  .post:hover .title{color:var(--gold-deep)}
  .wallet{grid-template-columns:repeat(2,1fr)}

  /* desktop chip horizontal scroll w/ arrows */
  .chips-wrap{padding:0 30px}
  .chip-nav{display:grid;place-items:center;position:absolute;top:calc(50% - 3px);transform:translateY(-50%);z-index:5;width:34px;height:34px;border-radius:50%;background:var(--surface);box-shadow:var(--sh-2);color:var(--ink);border:1px solid var(--line)}
  .chip-nav svg{width:18px;height:18px}
  .chip-nav.left{left:0}.chip-nav.right{right:0}
  .chip-nav[hidden]{display:none}

  /* admin desktop */
  .admin{grid-template-columns:248px 1fr}
  .admin-side{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:22px 14px;background:var(--ink);color:#fff}
  .admin-side .brand{display:flex;align-items:center;gap:10px;padding:4px 10px 20px;font-weight:800;font-size:1.3rem;letter-spacing:-.03em}
  .admin-side .brand .d{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,#fff6df,var(--gold) 55%,transparent 72%);box-shadow:0 0 16px 3px var(--gold-glow)}
  .admin-side .tag{font-size:.66rem;color:var(--gold-soft);font-weight:700;letter-spacing:.1em;padding:0 10px 14px}
  .admin-side nav{display:flex;flex-direction:column;gap:3px}
  .admin-side nav button{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--r-md);font-weight:600;font-size:.9rem;color:rgba(255,255,255,.7);text-align:left;transition:all .18s}
  .admin-side nav button svg{width:20px;height:20px}
  .admin-side nav button:hover{background:rgba(255,255,255,.08);color:#fff}
  .admin-side nav button.active{background:linear-gradient(145deg,var(--gold),var(--gold-deep));color:#fff;box-shadow:var(--sh-gold)}
  .admin-side .back{margin-top:auto;font-size:.8rem;color:rgba(255,255,255,.6);padding:10px 14px}
  .admin-mnav{display:none}
  .admin-content{padding:26px 30px 60px}
  .kpi-grid{grid-template-columns:repeat(4,1fr)}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
}

@media (min-width:1024px){.mobile-only{display:none!important}}
@media (max-width:1023px){.desktop-only{display:none!important}}

@media (min-width:1320px){
  .content.wide{padding-left:40px;padding-right:40px}
  .hero h1{font-size:3.1rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .hero-slider .slide{transition:opacity .01s!important}
}