@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --lime:#DEF24E; --lime-d:#CFE637; --lime-ink:#20260A;
  --ink:#0E0F10; --ink-2:#3A3D40; --muted:#8A8F94;
  --bg:#ECEBE7; --card:#FFFFFF; --card-2:#F5F5F2;
  --line:#E7E6E1; --line-2:#EDECE8;
  --ocean:#2E86C7; --forest:#B26A2E; --glacier:#7FA9C4; --ghg:#5B6B78;
  --star:#F2B01E; --danger:#E4572E; --green:#2F9E62;

  --r-xl:34px; --r-lg:26px; --r-md:18px; --r-sm:12px;
  --sh-sm:0 1px 3px rgba(20,20,20,.05);
  --sh-md:0 12px 30px rgba(30,30,30,.08);
  --sh-lg:0 28px 60px rgba(30,30,30,.14);
  --ease:cubic-bezier(.22,1,.36,1); --dur:.32s;

  --font:"Manrope",system-ui,-apple-system,"Apple SD Gothic Neo",sans-serif;
  --display:"Space Grotesk","Manrope",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
button,input,textarea{font-family:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4,.display{font-family:var(--display);letter-spacing:-.03em;font-weight:600;margin:0}
::selection{background:var(--lime)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:8px}
img{max-width:100%;display:block}
.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;flex:0 0 auto}
.icon.fill{fill:currentColor;stroke:none}
.hidden{display:none!important}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;
  padding:13px 22px;font-weight:600;font-size:14.5px;transition:transform var(--dur) var(--ease),background var(--dur),box-shadow var(--dur);white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-lime{background:var(--lime);color:var(--lime-ink)}
.btn-lime:hover{background:var(--lime-d)}
.btn-dark{background:var(--ink);color:#fff}
.btn-ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--card-2)}
.btn-sm{padding:9px 16px;font-size:13px}
.btn .icon{width:17px;height:17px}
.iconbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);transition:var(--dur) var(--ease)}
.iconbtn:hover{background:var(--ink);color:#fff;transform:rotate(45deg)}
.iconbtn.plain:hover{transform:none;background:var(--card-2);color:var(--ink)}

/* ---------- top nav ---------- */
header.topbar{position:sticky;top:0;z-index:60;padding:14px 0;background:linear-gradient(var(--bg) 70%,transparent)}
.nav{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:9px 12px 9px 18px;box-shadow:var(--sh-sm)}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:18px}
.logo .mk{width:34px;height:34px;border-radius:11px;overflow:hidden;flex:0 0 auto;display:block;box-shadow:0 3px 8px rgba(16,18,17,.22)}
.logo .mk svg{width:100%;height:100%;display:block}
.logo .wordmark{letter-spacing:-.02em}
.navlinks{display:flex;gap:4px;margin-left:8px}
.navlinks button{padding:9px 15px;border-radius:999px;font-weight:600;font-size:13.5px;color:var(--ink-2);transition:var(--dur) var(--ease)}
.navlinks button:hover{background:var(--card-2)}
.navlinks button.on{background:var(--ink);color:#fff}
.navgrow{flex:1}
.navright{display:flex;align-items:center;gap:8px}
.pts{display:flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;background:var(--lime);color:var(--lime-ink);border-radius:999px;padding:8px 13px}
.lang{display:flex;background:var(--card-2);border-radius:999px;padding:3px}
.lang button{padding:6px 11px;border-radius:999px;font-size:12px;font-weight:700;color:var(--muted)}
.lang button.on{background:var(--ink);color:#fff}
.menubtn{display:none}
.navright{position:relative}
.navdrop{position:absolute;right:0;top:calc(100% + 12px);background:var(--card);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--sh-md);padding:8px;min-width:172px;display:none;flex-direction:column;gap:2px;z-index:70}
.navdrop.open{display:flex;animation:fadeup .2s var(--ease)}
.navdrop button{text-align:left;padding:12px 15px;border-radius:11px;font-weight:700;font-size:15px;color:var(--ink-2);transition:var(--dur) var(--ease)}
.navdrop button:hover{background:var(--card-2)}
.navdrop button.on{background:var(--ink);color:#fff}

/* ---------- sections ---------- */
main{padding-bottom:40px}
section.view{display:none}
section.view.on{display:block;animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:54px 0 22px}
.sec-head h2{font-size:34px;line-height:1.05}
.sec-head p{color:var(--muted);font-size:14px;max-width:280px;text-align:right;margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  background:var(--card);border:1px solid var(--line);padding:6px 13px;border-radius:999px}

/* ---------- HERO ---------- */
.hero{display:grid;grid-template-columns:1.02fr 1.15fr;gap:16px;margin-top:6px}
.hero-lime{background:var(--lime);border-radius:var(--r-xl);padding:40px 38px;display:flex;flex-direction:column}
.hero-lime .eyebrow{background:rgba(255,255,255,.5);border-color:transparent;color:var(--lime-ink);align-self:flex-start;margin-bottom:auto}
.hero-lime h1{font-size:52px;line-height:1.02;color:var(--ink);margin:26px 0 0;font-weight:600;letter-spacing:-.04em}
.hero-lime h1 u{text-decoration-thickness:2px;text-underline-offset:5px}
.hero-lime .sub-inline{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--lime);align-items:center;justify-content:center;vertical-align:middle;margin:0 4px}
.subscribe{display:flex;gap:8px;background:var(--card);border-radius:999px;padding:7px;margin-top:32px;max-width:420px}
.subscribe input{flex:1;border:0;background:transparent;padding:0 16px;font-size:14.5px;outline:none;min-width:0}
.members{display:flex;align-items:center;gap:11px;margin-top:20px}
.avatars{display:flex}
.avatars span{width:32px;height:32px;border-radius:50%;background:var(--card);border:2px solid var(--lime);margin-left:-9px;display:grid;place-items:center;font-size:15px}
.avatars span:first-child{margin-left:0}
.members small{font-size:12.5px;color:var(--lime-ink);font-weight:600;line-height:1.3}
.members b{font-weight:800}

.hero-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:440px;background:linear-gradient(160deg,#c9a06a,#8f6b3f)}
.hero-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-photo .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.28))}
.ftag{position:absolute;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:700;box-shadow:var(--sh-md);white-space:nowrap}
.ftag .dot{width:9px;height:9px;border-radius:50%;background:var(--lime-d)}
.chipcard{position:absolute;background:rgba(255,255,255,.95);border-radius:16px;padding:10px 13px;box-shadow:var(--sh-md);font-size:12px;font-weight:600;display:flex;align-items:center;gap:9px;max-width:210px}
.chipcard .av{width:34px;height:34px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.hero-photo .social{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.92);border-radius:999px;padding:7px 14px;font-size:12px;font-weight:700}
.hero-cap{position:absolute;left:16px;bottom:16px;max-width:230px;background:rgba(255,255,255,.92);border-radius:16px;padding:12px 14px;font-size:12px;color:var(--ink-2);line-height:1.5}

/* ---------- greener band ---------- */
.greener{text-align:center;position:relative;margin:70px 0 40px}
.greener h2{font-size:40px;line-height:1.08;max-width:620px;margin:0 auto}
.greener p{color:var(--muted);font-size:14.5px;max-width:420px;margin:16px auto 24px;line-height:1.6}
.greener .cta{display:flex;gap:12px;justify-content:center;align-items:center}
.floatimg{position:absolute;border-radius:50%;object-fit:cover;box-shadow:var(--sh-md);width:64px;height:64px}
.floatimg.f1{left:8%;top:6%;width:80px;height:56px;border-radius:20px}
.floatimg.f2{left:16%;top:58%}
.floatimg.f3{right:16%;top:2%}
.floatimg.f4{right:7%;top:52%;width:82px;height:58px;border-radius:20px}

/* ---------- protect band ---------- */
.protect{display:grid;grid-template-columns:1fr 1.15fr .8fr 1.15fr;gap:14px;margin:20px 0}
.pblock{border-radius:var(--r-lg);min-height:150px;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:30px;overflow:hidden;position:relative}
.pblock.word{background:var(--card);border:1px solid var(--line)}
.pblock.arrow{background:var(--lime)}
.pblock.arrow .icon{width:56px;height:56px;stroke-width:2;color:var(--ink)}
.pblock.img{color:#fff}
.pblock.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pblock.img span{position:relative;z-index:1;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.pblock.img::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22)}

/* ---------- initiatives table ---------- */
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px}
.monthnav{display:flex;align-items:center;gap:10px;margin-right:auto}
.monthnav button{width:38px;height:38px;border-radius:50%;background:var(--card);border:1px solid var(--line);font-size:17px;font-weight:700;display:grid;place-items:center;transition:var(--dur) var(--ease)}
.monthnav button:hover{background:var(--ink);color:#fff}
.monthnav .lbl{font-family:var(--display);font-weight:600;font-size:18px;min-width:110px}
.chipf{padding:8px 15px;border-radius:999px;font-size:13px;font-weight:600;background:var(--card);border:1px solid var(--line);color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;transition:var(--dur) var(--ease)}
.chipf:hover{background:var(--card-2)}
.chipf.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chipf.on.lime{background:var(--lime);color:var(--lime-ink);border-color:var(--lime)}
.selectw{position:relative}
.selectw select{appearance:none;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 34px 9px 15px;font-size:13px;font-weight:600;cursor:pointer}
.selectw .cc{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;width:15px;height:15px}

.inits{background:var(--card);border-radius:var(--r-lg);padding:8px 26px;box-shadow:var(--sh-sm);position:relative}
.init-head,.init-row{display:grid;grid-template-columns:1.6fr 1.4fr .8fr 44px;gap:18px;align-items:center}
.init-head{padding:16px 0 12px;color:var(--muted);font-size:12.5px;font-weight:700}
.init-row{padding:20px 0;border-top:1px solid var(--line-2);cursor:pointer;transition:var(--dur) var(--ease)}
.init-row:hover{padding-left:8px;padding-right:8px;margin:0 -8px}
.init-row .tt{font-family:var(--display);font-weight:600;font-size:20px}
.init-row .tt small{display:block;font-family:var(--font);font-size:12px;color:var(--muted);font-weight:500;margin-top:3px}
.init-tags{display:flex;gap:7px;flex-wrap:wrap}
.tagpill{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--card-2);color:var(--ink-2);white-space:nowrap}
.tagpill.lime{background:var(--lime)}
.tagpill.live{background:#12100E;color:#fff;font-weight:800;letter-spacing:.02em;display:inline-flex;align-items:center;gap:4px}
.tagpill.live::first-letter{color:#ff5a5a}
.pcard .toptags .tagpill.live{color:#fff}
.tagpill.eco{background:#E4F7E9;color:#1f7a45}
.tagpill.tradition{background:#F6E9D6;color:#9a6420}
.tagpill.agri{background:#FBF0C9;color:#8a6a12}
.tagpill.leisure{background:#E2EEF8;color:#1f6690}
.init-date{font-size:14px;font-weight:600;color:var(--ink-2)}
.init-row .go{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:var(--dur) var(--ease)}
.init-row:hover .go{background:var(--lime);border-color:var(--lime)}
.init-row.done .go{background:var(--ink);color:var(--lime);border-color:var(--ink)}

/* ---------- problem / festival cards ---------- */
.pcards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pcard{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;color:#fff;cursor:pointer;transition:transform var(--dur) var(--ease)}
.pcard:hover{transform:translateY(-4px)}
.pcard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .5s var(--ease)}
.pcard:hover>img{transform:scale(1.06)}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.62));z-index:1}
.pcard>*{position:relative;z-index:2}
.pcard .toptags{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pcard .arw{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.9);color:var(--ink)}
.pcard h4{font-size:23px;margin-bottom:6px}
.pcard p{font-size:12px;opacity:.9;line-height:1.5;margin:0 0 14px}
.pcard .explore{display:flex;align-items:center;justify-content:space-between;background:var(--card);color:var(--ink);border-radius:999px;padding:11px 12px 11px 18px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pcard .explore .go{width:28px;height:28px;border-radius:50%;background:var(--lime);display:grid;place-items:center}
.pcard .stampwon{position:absolute;top:16px;right:16px;font-size:26px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}

/* ---------- newsletter ---------- */
.newsletter{background:var(--card);border-radius:var(--r-xl);padding:44px;display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;margin-top:50px}
.newsletter h3{font-size:28px;line-height:1.15;max-width:520px}
.newsletter .nl-form{display:flex;gap:8px;background:var(--card-2);border-radius:999px;padding:7px;margin-top:18px;max-width:520px}
.newsletter .nl-form input{flex:1;border:0;background:transparent;padding:0 16px;outline:none;font-size:14.5px;min-width:0}

/* ---------- footer ---------- */
.footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:30px 0 8px;color:var(--muted);font-size:13px}
.footer .socials{display:flex;gap:8px}
.footer .socials a{padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;color:var(--ink-2);font-size:12.5px}

/* ---------- MAP screen ---------- */
.maplayout{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;align-items:start}
#map{height:600px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);z-index:1;box-shadow:var(--sh-sm)}
.leaflet-popup-content-wrapper{border-radius:16px!important;box-shadow:var(--sh-md)!important;padding:4px!important}
.leaflet-popup-content{margin:12px 14px!important;font-family:var(--font)!important}
.leaflet-container{font-family:var(--font)!important}
/* Korean (OSM) tiles: soften colours to match the minimal light look, keep labels legible */
#map.ko-map .leaflet-tile{filter:grayscale(.55) saturate(.85) brightness(1.05) contrast(.96)}
.leaflet-control-zoom{border:0!important;box-shadow:var(--sh-md)!important;border-radius:16px!important;overflow:hidden;margin:16px!important}
.leaflet-control-zoom a{width:44px!important;height:44px!important;line-height:44px!important;font-size:24px!important;color:var(--ink)!important;background:var(--card)!important;border:0!important;font-weight:600}
.leaflet-control-zoom a:hover{background:var(--lime)!important;color:var(--lime-ink)!important}
.leaflet-control-zoom a.leaflet-control-zoom-in{border-bottom:1px solid var(--line)!important}
.leaflet-bar a.leaflet-disabled{opacity:.4}
.leaflet-div-icon{background:transparent!important;border:0!important}
.mkwrap{overflow:visible}
.mkpin{position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:3px solid var(--pin,#2E86C7);
  box-shadow:0 8px 18px rgba(0,0,0,.22);cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.mkpin::after{content:"";position:absolute;bottom:-6px;left:50%;width:14px;height:14px;
  background:#fff;border-right:3px solid var(--pin,#2E86C7);border-bottom:3px solid var(--pin,#2E86C7);
  transform:translateX(-50%) rotate(45deg);border-bottom-right-radius:3px}
.mkpin .mkglyph{font-size:21px;line-height:1;filter:grayscale(.9);opacity:.55;transition:.2s var(--ease)}
.mkpin .mkcheck{position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;
  background:var(--lime);color:var(--lime-ink);font-size:11px;font-weight:800;font-style:normal;
  display:grid;place-items:center;border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.25)}
.mkpin.got{background:var(--ink);border-color:var(--lime)}
.mkpin.got::after{background:var(--ink);border-color:var(--lime)}
.mkpin.got .mkglyph{filter:none;opacity:1}
.mkpin:hover{transform:translateY(-5px) scale(1.12);box-shadow:0 16px 30px rgba(0,0,0,.3)}
.mkpin:hover .mkglyph{filter:none;opacity:1}

/* hover tooltip — mini info card */
.leaflet-tooltip.festtip{background:var(--card);color:var(--ink);border:1px solid var(--line);
  border-radius:16px;padding:0;box-shadow:0 18px 40px rgba(0,0,0,.22);font-family:var(--font);
  overflow:hidden;width:240px;white-space:normal;opacity:1!important}
.leaflet-tooltip.festtip.leaflet-tooltip-top::before{border-top-color:var(--card);margin-bottom:-1px}
.tipcard{padding:13px 14px;display:flex;flex-direction:column;gap:8px}
.tipcard .tiptitle{display:flex;align-items:center;gap:8px}
.tipcard .tdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.tipcard .tiptitle b{font-family:var(--display);font-weight:600;font-size:14px;line-height:1.18;letter-spacing:-.02em}
.tipcard .tchips{display:flex;flex-wrap:wrap;gap:5px}
.tipcard .tchips .tagpill{font-size:10.5px;padding:3px 9px}
.tipcard .tline{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);min-width:0}
.tipcard .tline span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tipcard .tipi{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 auto;color:var(--muted)}
.tipcard .tfoot{display:flex;align-items:center;gap:12px;margin-top:1px;padding-top:9px;
  border-top:1px solid var(--line-2);font-size:12px;font-weight:700}
.tipcard .trate{color:var(--star)}
.tipcard .tmethod{display:flex;align-items:center;gap:5px;color:var(--ink-2);font-weight:600}
.tipcard .tmethod .tipi{color:var(--ink-2)}
.mappop .pn{font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:8px}
.mappop .mp-btn{display:flex;gap:6px}
.mappop button{background:var(--ink);color:#fff;border-radius:999px;padding:8px 14px;font-weight:700;font-size:12px}
.mapside{display:flex;flex-direction:column;gap:14px}
.tracker{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:22px}
.tracker h3{color:#fff;font-size:19px;margin-bottom:4px}
.tracker p{color:rgba(255,255,255,.6);font-size:12.5px;margin:0 0 16px}
.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tracker .slots{gap:8px}
.slot{aspect-ratio:1;border-radius:14px;border:2px dashed rgba(255,255,255,.2);display:grid;place-items:center;position:relative}
.slot.filled{border-style:solid;border-color:var(--lime);background:rgba(222,242,78,.14)}
.slot .simg{font-size:24px}
.slot .snum{position:absolute;top:5px;left:7px;font-size:10px;font-weight:800;color:rgba(255,255,255,.4)}
.slot.filled .snum{color:var(--lime)}
.slot .lk{opacity:.3}
.tracker .tprog{height:8px;border-radius:999px;background:rgba(255,255,255,.14);margin-top:16px;overflow:hidden}
.tracker .tprog i{display:block;height:100%;background:var(--lime);border-radius:999px;transition:width .6s var(--ease)}
.maplist{background:var(--card);border-radius:var(--r-lg);padding:8px 18px;box-shadow:var(--sh-sm);max-height:340px;overflow:auto}
.mlrow{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line-2);cursor:pointer}
.mlrow:first-child{border-top:0}
.mlrow .mdot{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;flex:0 0 auto;color:#fff}
.mlrow .mn{font-weight:600;font-size:14px;flex:1}
.mlrow .mn small{display:block;color:var(--muted);font-size:11.5px;font-weight:500}
.mlrow .mgo{color:var(--muted)}

/* ---------- search ---------- */
.searchfield{position:relative;margin-bottom:14px;max-width:560px}
.searchfield .icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--muted)}
.searchfield input{width:100%;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:16px 20px 16px 50px;font-size:15px;outline:none;box-shadow:var(--sh-sm)}

/* ---------- detail ---------- */
.back{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-weight:600;font-size:14px;margin:20px 0 6px;transition:var(--dur) var(--ease)}
.back:hover{transform:translateX(-3px)}
.detail-top{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:8px}
.dhero{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:380px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.dhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.dhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55));z-index:1}
.dhero>*{position:relative;z-index:2}
.dhero .dt-top{display:flex;gap:7px}
.dhero h2{font-size:34px;color:#fff;line-height:1.05}
.dhero .dmeta{display:flex;flex-direction:column;gap:7px;font-size:13.5px;margin-top:12px}
.dhero .dmeta div{display:flex;align-items:center;gap:9px}
.dside{display:flex;flex-direction:column;gap:14px}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:20px}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.metric{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;text-align:center}
.metric .big{font-family:var(--display);font-size:28px;font-weight:600}
.metric .lab{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}
.susbox{background:var(--card-2);border-radius:var(--r-md);padding:18px 20px}
.susbox ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.susbox li{font-size:14px;color:var(--ink-2)}
.ddesc{margin-top:16px;padding:22px 24px}
.ddesc p{font-size:15px;line-height:1.78;color:var(--ink-2);margin:0}
.weblink{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--card);
  border:1px solid var(--line);border-radius:14px;padding:14px;font-weight:700;font-size:14px;color:var(--ocean-d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 10px rgba(40,42,32,.06);transition:var(--dur) var(--ease)}
.weblink:hover{background:var(--card-2);transform:translateY(-1px)}
.weblink .icon{width:15px;height:15px}
.infocard{margin-top:18px;max-width:680px}
.infohd{font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.infohd .icon{width:16px;height:16px;color:var(--halla)}
.infolist{display:flex;flex-direction:column;gap:10px}
.inforow{display:flex;gap:14px;font-size:13.5px}
.inforow .ik{flex:0 0 62px;color:var(--muted);font-weight:700}
.inforow .iv{color:var(--ink-2);flex:1;line-height:1.55;min-width:0;word-break:break-word}
.hplink{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:700;font-size:13.5px;
  color:var(--ocean-d);text-decoration:underline;text-underline-offset:3px}
.hplink .icon{width:14px;height:14px}
.sectlabel{font-family:var(--display);font-weight:600;font-size:19px;margin:30px 0 14px;display:flex;align-items:center;gap:9px}
.review{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px}
.review+.review{margin-top:11px}
.review .rh{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.review .rn{font-weight:700;font-size:14px}
.review .rr{color:var(--star);font-size:12px;letter-spacing:1px}
.review p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.55}
.avatar{border-radius:50%;display:grid;place-items:center;background:var(--card-2);flex:0 0 auto;font-size:15px}
.avatar.sm{width:32px;height:32px}
.bigverify{position:sticky;bottom:16px;margin-top:24px}
.bigverify .btn{width:100%;padding:18px;font-size:16px}
.rvform{margin-top:14px}
.rvform .starpick{display:flex;gap:6px;margin:6px 0 14px}
.rvform .starpick button{font-size:26px;color:var(--line);line-height:1;transition:.15s}
.rvform .starpick button.on{color:var(--star)}
.rvform textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px;font-size:14px;min-height:74px;resize:vertical;background:var(--card-2);outline:none}
.rvform .fld{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:5px}

/* ---------- my page ---------- */
.mygrid{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;align-items:start}
.profile{background:var(--lime);border-radius:var(--r-lg);padding:28px}
.profile .pr{display:flex;align-items:center;gap:15px;margin-bottom:22px}
.profile .pav{width:64px;height:64px;border-radius:20px;background:var(--card);display:grid;place-items:center;font-size:32px}
.profile .pname{font-family:var(--display);font-weight:600;font-size:24px;color:var(--ink)}
.profile .plvl{font-size:13px;font-weight:700;color:var(--lime-ink);display:flex;align-items:center;gap:6px;margin-top:3px}
.profile .prog{height:12px;border-radius:999px;background:rgba(0,0,0,.12);overflow:hidden}
.profile .prog i{display:block;height:100%;background:var(--ink);border-radius:999px;transition:width .6s var(--ease)}
.profile .pmeta{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--lime-ink);margin-top:9px}
.myright{display:flex;flex-direction:column;gap:14px}
.slots.light .slot{border-color:var(--line);background:var(--card)}
.slots.light .slot.filled{border-color:var(--lime);background:var(--lime)}
.slots.light .slot .snum{color:var(--muted)}
.slots.light .slot.filled .snum{color:var(--lime-ink)}
.slots.light .slot .lk{color:var(--line);opacity:1}
.reward{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.reward+.reward{margin-top:11px}
.reward .ri{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:24px;flex:0 0 auto;background:var(--card-2)}
.reward .rt{flex:1}
.reward .rtitle{font-weight:700;font-size:15px}
.reward .rdesc{font-size:12.5px;color:var(--muted);margin-top:2px}
.reward .rstat{font-size:12px;font-weight:800;padding:7px 13px;border-radius:999px;background:var(--card-2);color:var(--muted)}
.reward.unlocked .ri{background:var(--lime)}
.reward.unlocked .rstat{background:var(--ink);color:var(--lime)}
.logoutbtn{width:100%;margin-top:6px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--danger);font-weight:700;font-size:14px}
.logoutbtn:hover{background:#fdeeea}

/* ---------- ranking ---------- */
.rankrow{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 18px}
.rankrow+.rankrow{margin-top:9px}
.rankrow.me{border-color:var(--lime);background:linear-gradient(var(--card),var(--card)) padding-box,var(--lime) border-box;border-width:2px;box-shadow:0 8px 20px rgba(222,242,78,.35)}
.rankrow .rk{font-family:var(--display);font-weight:700;width:30px;text-align:center;font-size:17px;color:var(--ink-2)}
.rankrow .rav{width:38px;height:38px;border-radius:12px;background:var(--card-2);display:grid;place-items:center;font-size:19px}
.rankrow .rname{font-weight:600;font-size:15px;flex:1;display:flex;align-items:center;gap:8px}
.rankrow .metag{font-size:11px;font-weight:800;color:var(--lime-ink);background:var(--lime);padding:3px 9px;border-radius:999px}
.rankrow .rcount{font-weight:800;font-size:15px;display:flex;align-items:center;gap:5px}

.empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:14px}

/* ---------- AUTH ---------- */
#auth{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:1.1fr 1fr;background:var(--bg)}
#auth .aside{background:var(--lime);padding:56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
#auth .aside .logo{font-size:20px}
#auth .aside .logo .mk{width:42px;height:42px;border-radius:13px}
#auth .aside h1{font-size:52px;line-height:1.03;color:var(--ink);letter-spacing:-.04em;margin-top:auto}
#auth .aside .tagline{font-size:15px;color:var(--lime-ink);margin-top:18px;max-width:420px;line-height:1.6;font-weight:500}
#auth .aside .amembers{display:flex;align-items:center;gap:11px;margin-top:28px}
#auth .aside .abadge{position:absolute;border-radius:20px;overflow:hidden;box-shadow:var(--sh-md)}
#auth .aside .ab1{width:120px;height:90px;right:40px;top:40px;transform:rotate(6deg)}
#auth .aside .ab2{width:90px;height:120px;right:150px;top:110px;transform:rotate(-8deg)}
#auth .apanel{display:flex;align-items:center;justify-content:center;padding:32px}
.authcard{width:100%;max-width:400px}
.authcard h2{font-size:30px;margin-bottom:6px}
.authcard .lead{color:var(--muted);font-size:14px;margin:0 0 24px;line-height:1.5}
.autherr{background:#fdeeea;color:var(--danger);border-radius:12px;padding:11px 15px;font-size:13px;font-weight:600;margin-bottom:14px;display:none}
.autherr.show{display:block;animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.field input{width:100%;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:15px;background:var(--card);outline:none;transition:var(--dur) var(--ease)}
.field input:focus{border-color:var(--ink)}
.avatarpick{display:flex;gap:8px;flex-wrap:wrap}
.avatarpick button{width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--card);font-size:23px;transition:var(--dur) var(--ease)}
.avatarpick button.on{border-color:var(--ink);background:var(--lime);transform:scale(1.06)}
.authbtn{width:100%;padding:15px;font-size:16px;margin-top:6px}
.authdivider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:12.5px;font-weight:600}
.authdivider::before,.authdivider::after{content:"";flex:1;height:1px;background:var(--line)}
#googleBtn{display:flex;justify-content:center;min-height:44px;color-scheme:light}
.authbtn:disabled{opacity:.6;cursor:wait}
.authswitch{text-align:center;font-size:14px;color:var(--muted);margin-top:20px}
.authswitch button{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.demohint{text-align:center;font-size:12.5px;color:var(--muted);margin-top:16px}
.demohint button{color:var(--ocean);font-weight:600;text-decoration:underline}

/* ---------- check-in sheet ---------- */
.sheet{position:fixed;inset:0;z-index:110;background:rgba(15,16,17,.5);backdrop-filter:blur(5px);display:none;align-items:flex-end;justify-content:center}
.sheet.show{display:flex;animation:fade .25s}
.sheet-card{background:var(--card);border-radius:26px 26px 0 0;width:100%;max-width:560px;padding:26px 24px calc(26px + env(safe-area-inset-bottom));box-shadow:var(--sh-lg);animation:slideup .35s var(--ease);max-height:92vh;overflow:auto}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.sheet-grab{width:44px;height:5px;border-radius:999px;background:var(--line);margin:0 auto 18px}
.sheet-head{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.sheet-head .mi{width:48px;height:48px;border-radius:14px;background:var(--lime);display:grid;place-items:center}
.sheet-head .mi .icon{width:24px;height:24px;color:var(--lime-ink)}
.sheet-head h3{font-size:20px}
.sheet-head p{font-size:13px;color:var(--muted);margin:2px 0 0}
.method-tabs{display:flex;gap:8px;margin-bottom:18px}
.method-tab{flex:1;border:1px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;font-size:12px;font-weight:700;color:var(--muted)}
.method-tab.on{border-color:var(--ink);background:var(--card-2);color:var(--ink)}
.method-tab .icon{width:20px;height:20px;margin:0 auto 5px;display:block}

.scanbox{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:1;max-height:300px;margin:0 auto 14px;display:grid;place-items:center}
.scanbox video{width:100%;height:100%;object-fit:cover}
.scanbox .reticle{position:absolute;inset:22%;border:3px solid var(--lime);border-radius:18px;box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}
.scanbox .scanline{position:absolute;left:22%;right:22%;height:2px;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:scan 2s linear infinite}
@keyframes scan{0%,100%{top:24%}50%{top:74%}}
.scanbox .ph{color:rgba(255,255,255,.6);font-size:13px;text-align:center;padding:20px}

.geobox,.ticketbox{text-align:center;padding:8px 0 4px}
.geoviz{width:120px;height:120px;border-radius:50%;background:var(--card-2);display:grid;place-items:center;margin:6px auto 16px;position:relative}
.geoviz::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--lime);animation:ping 1.8s var(--ease) infinite}
@keyframes ping{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.geoviz .icon{width:44px;height:44px;color:var(--ink)}
.geostat{font-size:13.5px;color:var(--ink-2);min-height:20px;margin-bottom:14px;font-weight:600}
.ticketdrop{border:2px dashed var(--line);border-radius:18px;padding:34px 20px;cursor:pointer;transition:var(--dur) var(--ease)}
.ticketdrop:hover{border-color:var(--ink);background:var(--card-2)}
.ticketdrop .icon{width:38px;height:38px;color:var(--muted);margin:0 auto 12px;display:block}
.ticketdrop p{font-size:13.5px;color:var(--muted);margin:0}
.ticketpreview{border-radius:18px;overflow:hidden;margin-bottom:14px;position:relative}
.ticketpreview img{width:100%;max-height:240px;object-fit:cover}
.ticketpreview .redo{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;border-radius:999px;padding:7px 13px;font-size:12px;font-weight:700}
.codeinput{display:flex;gap:8px;margin-bottom:8px}
.codeinput input{flex:1;border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-size:15px;outline:none;text-transform:uppercase;font-weight:700;letter-spacing:1px}
.sheet-err{color:var(--danger);font-size:13px;font-weight:600;text-align:center;min-height:18px;margin:4px 0 12px}
.sheet-actions .btn{width:100%;padding:16px;font-size:15px}
.smallnote{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.5}

/* ---------- toast & stamp modal ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(24px);z-index:130;background:var(--ink);color:#fff;padding:14px 20px;border-radius:999px;font-weight:600;font-size:14px;box-shadow:var(--sh-lg);opacity:0;pointer-events:none;transition:.4s var(--ease);display:flex;align-items:center;gap:9px;max-width:92vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{position:fixed;inset:0;z-index:120;background:rgba(15,16,17,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:24px}
.modal.show{display:flex;animation:fade .3s}
.stampcard{background:var(--card);border-radius:28px;padding:36px 30px;max-width:350px;width:100%;text-align:center;box-shadow:var(--sh-lg)}
.stampcard .big{font-size:88px;margin-bottom:10px;animation:pop .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(0) rotate(-35deg);opacity:0}to{transform:scale(1);opacity:1}}
.stampcard h3{font-size:24px;margin-bottom:5px}
.stampcard .mtag{display:inline-block;font-size:11px;font-weight:700;color:var(--lime-ink);background:var(--lime);padding:4px 11px;border-radius:999px;margin-bottom:10px}
.stampcard p{color:var(--muted);font-size:14px;margin:0 0 20px}
.stampcard .btn{width:100%}
.confetti{position:fixed;top:-10px;width:10px;height:14px;z-index:125;pointer-events:none;border-radius:2px}

/* ---------- responsive ---------- */
@media (max-width:940px){
  .hero{grid-template-columns:1fr}
  .protect{grid-template-columns:1fr 1fr}
  .pcards{grid-template-columns:1fr 1fr}
  .maplayout{grid-template-columns:1fr}
  .mygrid{grid-template-columns:1fr}
  .detail-top{grid-template-columns:1fr}
  .newsletter{grid-template-columns:1fr;padding:32px}
  #auth{grid-template-columns:1fr}
  #auth .aside{display:none}
}
@media (max-width:680px){
  .wrap{padding:0 16px}
  .hero-lime{padding:30px 26px}
  .hero-lime h1{font-size:40px}
  .sec-head h2{font-size:26px}
  .sec-head p{display:none}
  .greener h2{font-size:30px}
  .pcards{grid-template-columns:1fr}
  .navlinks{display:none}
  .menubtn{display:grid}
  .init-head{display:none}
  .init-row{grid-template-columns:1fr 40px;gap:10px}
  .init-row .init-tags,.init-row .init-date{grid-column:1;display:flex;gap:8px;align-items:center}
  .init-row .init-date{font-size:12px;color:var(--muted)}
  .init-row .go{grid-row:1;grid-column:2}
  #map{height:420px}
  .metrics{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============================================================
   Skeuomorphic layer — tactile depth, paper grain, ink stamps
   ============================================================ */

/* subtle paper grain over the whole page */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px}

/* tactile, pressable buttons */
.btn-lime{background:linear-gradient(180deg,#E9FB6E,#DEF24E 55%,#CDE636);border:1px solid rgba(90,100,20,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 3px rgba(120,130,30,.28),0 6px 14px rgba(150,170,40,.34),0 2px 3px rgba(0,0,0,.12)}
.btn-lime:hover{background:linear-gradient(180deg,#E4F85E,#D4EA45 55%,#C6DE30);transform:translateY(-2px)}
.btn-lime:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(120,130,30,.42),0 2px 6px rgba(150,170,40,.3)}
.btn-dark{background:linear-gradient(180deg,#34373B,#0E0F10);border:1px solid rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 6px 14px rgba(0,0,0,.3),0 2px 3px rgba(0,0,0,.22)}
.btn-dark:active{transform:translateY(1px);box-shadow:inset 0 2px 5px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.25)}
.btn-ghost{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 6px rgba(40,42,32,.09)}

/* card surfaces: top light-catch + layered soft shadow */
.inits,.newsletter,.metric,.dcard,.reward,.rankrow,.maplist,.review,.dhero,.pcard,.hero-photo,.sheet-card,.stampcard{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 10px 26px rgba(40,42,32,.10),0 2px 5px rgba(40,42,32,.06)}
.hero-lime{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -3px 10px rgba(140,150,40,.18),0 10px 28px rgba(150,170,40,.22)}
.profile{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 10px rgba(140,150,40,.2),0 12px 26px rgba(160,175,45,.28)}
.tracker{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px rgba(0,0,0,.3)}

/* chips & small controls feel like physical keys */
.pts{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 2px 5px rgba(150,170,40,.32)}
.monthnav button,.iconbtn,.selectw select,.chipf{box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 3px 7px rgba(40,42,32,.1)}
.monthnav button:active,.iconbtn:active{transform:translateY(1px)}
.subscribe,.nl-form,.searchfield input,.field input,.rvform textarea{
  box-shadow:inset 0 2px 5px rgba(40,42,32,.09),inset 0 -1px 0 rgba(255,255,255,.8)}

/* STAMP SLOTS — pressed into paper, filled ones look ink-stamped */
.slots.light .slot{background:linear-gradient(180deg,#ffffff,#f1eee4);border-color:rgba(0,0,0,.07);
  box-shadow:inset 0 2px 5px rgba(60,55,40,.11),inset 0 -1px 0 rgba(255,255,255,.9)}
.slots.light .slot.filled{background:radial-gradient(circle at 50% 38%,#fff6e8,#ffe4c4);border-color:rgba(217,118,26,.55);
  box-shadow:inset 0 0 0 2px rgba(217,118,26,.38),inset 0 2px 7px rgba(217,118,26,.18),0 4px 11px rgba(217,118,26,.24)}
.tracker .slot{box-shadow:inset 0 2px 6px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.05)}
.tracker .slot.filled{background:rgba(222,242,78,.12);
  box-shadow:inset 0 0 0 2px var(--lime),inset 0 2px 6px rgba(0,0,0,.35),0 0 18px rgba(222,242,78,.32)}
/* ink-stamped look: slight rotation + pressed shadow, varied per slot */
.slot.filled .simg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.24)) saturate(1.15) contrast(1.04);transform:rotate(-8deg)}
.slots .slot:nth-child(2n).filled .simg{transform:rotate(7deg)}
.slots .slot:nth-child(3n).filled .simg{transform:rotate(-3deg)}
.slots .slot:nth-child(5n).filled .simg{transform:rotate(11deg)}

/* STAMP-EARNED modal → a pressed rubber stamp */
.stampcard .big{width:132px;height:132px;margin:2px auto 14px;border-radius:50%;display:grid;place-items:center;font-size:62px;
  background:radial-gradient(circle at 50% 40%,#fff5e9,#ffe3c2);transform:rotate(-7deg);
  box-shadow:inset 0 0 0 3px rgba(217,118,26,.42),inset 0 5px 14px rgba(217,118,26,.17),0 10px 24px rgba(217,118,26,.26)}
@keyframes pop{from{transform:scale(0) rotate(-38deg);opacity:0}to{transform:scale(1) rotate(-7deg);opacity:1}}

@media (prefers-reduced-motion:reduce){body::before{display:none}}

/* ============================================================
   Greener section — hide floating images on phones (overlap fix)
   ============================================================ */
@media (max-width:820px){ .greener{margin:44px 0 30px} .greener .floatimg{display:none} }

/* ============================================================
   INTRO — scroll-lock onboarding
   ============================================================ */
body.introlock{overflow:hidden}
#intro{position:fixed;inset:0;z-index:200;background:#0b0d0c}
#intro.hidden{display:none}
.intro-scroll{height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.intro-scroll::-webkit-scrollbar{display:none}
.intro-scroll{scrollbar-width:none}
.ipanel{position:relative;height:100dvh;scroll-snap-align:start;display:grid;place-items:center;overflow:hidden;text-align:center;padding:24px}
.ibg{position:absolute;inset:-4%;background-image:var(--img);background-size:cover;background-position:center;
  animation:kenburns 20s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.22) translate(-1.5%,-2%)}}
.iscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,10,9,.5),rgba(8,10,9,.3) 42%,rgba(8,10,9,.8))}
.ilast .iscrim{background:linear-gradient(180deg,rgba(8,10,9,.45),rgba(24,30,8,.78))}
.iwrap{position:relative;z-index:2;color:#fff;max-width:920px;display:flex;flex-direction:column;align-items:center;gap:20px}
.ibadge{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:8px 17px;border-radius:999px;backdrop-filter:blur(8px)}
.ikicker{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.ihero{font-family:var(--display);font-weight:700;font-size:clamp(46px,9vw,108px);line-height:.96;letter-spacing:-.045em;margin:0;text-shadow:0 6px 40px rgba(0,0,0,.4)}
.ititle{font-family:var(--display);font-weight:700;font-size:clamp(34px,6.4vw,74px);line-height:1.02;letter-spacing:-.035em;margin:0;text-shadow:0 6px 40px rgba(0,0,0,.4)}
.ihuge{font-size:clamp(42px,8vw,96px);line-height:.98}
.isub{font-size:clamp(15px,2.2vw,20px);color:rgba(255,255,255,.85);max-width:640px;line-height:1.6;margin:0;font-weight:500}
.iwarp{filter:url(#warp)}
.isteps{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.istep{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);
  border-radius:999px;padding:11px 20px;font-size:14.5px;font-weight:600;color:#fff;backdrop-filter:blur(8px)}
.istep-n{font-family:var(--display);font-weight:800;color:var(--lime)}
.intro-cta{margin-top:12px;padding:17px 30px;font-size:17px}
.iscroll-hint{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.8);
  display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.iscroll-hint .icon{width:20px;height:20px;animation:bob 1.7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
/* entrance — animate the content of the visible panel */
.ipanel .iwrap>*{opacity:0;transform:translateY(38px)}
.ipanel.in .iwrap>*{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.ipanel.in .iwrap>*:nth-child(2){transition-delay:.12s}
.ipanel.in .iwrap>*:nth-child(3){transition-delay:.24s}
.ipanel.in .iwrap>*:nth-child(4){transition-delay:.36s}
.intro-skip{position:fixed;right:20px;top:18px;z-index:212;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  color:#fff;padding:9px 17px;border-radius:999px;font-weight:700;font-size:13px;backdrop-filter:blur(8px)}
.intro-skip:hover{background:rgba(255,255,255,.24)}
.intro-dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:212;display:flex;flex-direction:column;gap:10px}
.intro-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);border:0;padding:0;transition:.35s var(--ease)}
.intro-dots button.on{background:var(--lime);height:26px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.ibg{animation:none}.iwarp{filter:none}.iscroll-hint .icon{animation:none}
  .ipanel .iwrap>*{opacity:1;transform:none}}
@media (max-width:640px){.intro-dots{right:12px}.iwrap{gap:16px}}

/* ============================================================
   MY PAGE — redesigned
   ============================================================ */
.my-hero{background:var(--lime);border-radius:var(--r-lg);padding:26px 30px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 10px rgba(140,150,40,.2),0 12px 26px rgba(160,175,45,.28)}
.mh-id{display:flex;align-items:center;gap:15px;margin-bottom:18px}
.mh-av{width:64px;height:64px;border-radius:20px;background:var(--card);display:grid;place-items:center;font-size:32px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 10px rgba(0,0,0,.1)}
.mh-name{font-family:var(--display);font-weight:600;font-size:24px;color:var(--ink);line-height:1.1}
.mh-lvl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--lime-ink);
  background:rgba(255,255,255,.5);padding:4px 11px;border-radius:999px;margin-top:6px}
.mh-lvl .icon{width:13px;height:13px}
.my-stats{display:flex;gap:10px}
.my-stat{background:rgba(255,255,255,.5);border-radius:16px;padding:13px 18px;text-align:center;min-width:86px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.my-stat b{font-family:var(--display);font-weight:800;font-size:23px;display:block;color:var(--ink);line-height:1}
.my-stat span{font-size:11px;font-weight:700;color:var(--lime-ink);margin-top:4px;display:block}
.ringwrap{position:relative;width:136px;height:136px;flex:0 0 auto;justify-self:end}
.ring{width:136px;height:136px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.ring-bg{stroke:rgba(0,0,0,.13)}
.ring-fg{stroke:var(--ink);transition:stroke-dashoffset .9s var(--ease)}
.ring-txt{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring-txt b{font-family:var(--display);font-size:29px;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.02em}
.ring-txt span{position:absolute;left:0;right:0;top:64%;font-size:10.5px;font-weight:800;color:var(--lime-ink);text-align:center}
.rewards2{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;display:flex;flex-direction:column;gap:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px rgba(40,42,32,.07)}
.rcard .ric{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:26px;background:var(--card-2)}
.rcard.on .ric{background:var(--lime)}
.rcard .rtt{font-weight:700;font-size:15px}
.rcard .rdd{font-size:12.5px;color:var(--muted);line-height:1.45;flex:1}
.rcard .rbar{height:8px;border-radius:999px;background:var(--card-2);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.rcard .rbar i{display:block;height:100%;background:linear-gradient(90deg,var(--tangerine,#F28C28),var(--lime-d));border-radius:999px;transition:width .7s var(--ease)}
.rcard.on .rbar i{background:var(--lime-d)}
.rcard .rstat2{font-size:12px;font-weight:800;color:var(--muted);display:flex;align-items:center;gap:6px}
.rcard.on .rstat2{color:var(--halla,#2f9e62)}
.logoutbtn{width:100%;margin-top:18px;padding:15px;border-radius:14px;border:1px solid var(--line);background:var(--card);
  color:var(--danger);font-weight:700;font-size:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.logoutbtn:hover{background:#fdeeea}

/* ============================================================
   RANKING — redesigned (podium + list)
   ============================================================ */
.podium{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:12px;align-items:end;margin-bottom:14px}
.pod{border-radius:var(--r-lg);padding:20px 14px 22px;text-align:center;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 26px rgba(40,42,32,.12)}
.pod .pod-medal{font-size:26px;line-height:1;margin-bottom:8px}
.pod .pod-av{width:58px;height:58px;border-radius:18px;margin:0 auto 10px;display:grid;place-items:center;font-size:29px;background:rgba(255,255,255,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.pod .pod-name{font-weight:700;font-size:14px;line-height:1.2;word-break:keep-all}
.pod .pod-count{font-family:var(--display);font-weight:800;font-size:23px;margin-top:5px;display:flex;align-items:center;justify-content:center;gap:5px}
.pod .pod-count .icon{width:17px;height:17px}
.pod1{order:2;background:linear-gradient(180deg,#FFF0AE,#FFE070);transform:translateY(-14px);padding-top:26px}
.pod2{order:1;background:linear-gradient(180deg,#F1F1EE,#DCDCD6)}
.pod3{order:3;background:linear-gradient(180deg,#F6DEC2,#E9C199)}
.pod.me{outline:3px solid var(--lime);outline-offset:2px}
.ranklist{display:flex;flex-direction:column;gap:9px}
.rrow{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px rgba(40,42,32,.06)}
.rrow.me{border:2px solid var(--lime);box-shadow:0 8px 22px rgba(222,242,78,.4)}
.rrow .rr-k{font-family:var(--display);font-weight:800;width:24px;text-align:center;font-size:16px;color:var(--ink-2)}
.rrow .rr-av{width:40px;height:40px;border-radius:12px;background:var(--card-2);display:grid;place-items:center;font-size:20px;flex:0 0 auto}
.rrow .rr-main{flex:1;min-width:0}
.rrow .rr-name{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:8px}
.rrow .rr-bar{height:6px;border-radius:999px;background:var(--card-2);margin-top:7px;overflow:hidden;max-width:280px}
.rrow .rr-bar i{display:block;height:100%;background:var(--lime-d);border-radius:999px;transition:width .6s var(--ease)}
.rrow .rr-count{font-family:var(--display);font-weight:800;font-size:15px;display:flex;align-items:center;gap:5px}
.rrow .rr-count .icon{width:16px;height:16px}
.metag{font-size:11px;font-weight:800;color:var(--lime-ink);background:var(--lime);padding:3px 9px;border-radius:999px}

@media (max-width:820px){
  .my-hero{grid-template-columns:1fr;justify-items:center;text-align:center;gap:20px}
  .mh-id{flex-direction:column;text-align:center;gap:10px}
  .my-stats{justify-content:center;flex-wrap:wrap}
  .ringwrap{justify-self:center}
  .rewards2{grid-template-columns:1fr}
}
@media (max-width:520px){
  .podium{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .pod{padding:14px 8px 16px}
  .pod .pod-av{width:46px;height:46px;font-size:23px}
  .pod .pod-name{font-size:12px}
  .pod .pod-count{font-size:18px}
}

/* ============================================================
   Intro polish + auth entrance animations
   ============================================================ */
.intro-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:214;background:rgba(255,255,255,.14)}
.intro-progress i{display:block;height:100%;width:0;background:var(--lime);box-shadow:0 0 12px var(--lime);transition:width .1s linear}
#intro{transition:opacity .5s var(--ease),transform .5s var(--ease)}
/* slow parallax drift on the panel content as you scroll */
.ipanel .iwrap{transition:transform .5s var(--ease)}
.intro-cta{box-shadow:0 0 0 0 rgba(222,242,78,.7);animation:ctapulse 2.4s ease-out infinite}
@keyframes ctapulse{0%{box-shadow:0 0 0 0 rgba(222,242,78,.55)}70%{box-shadow:0 0 0 22px rgba(222,242,78,0)}100%{box-shadow:0 0 0 0 rgba(222,242,78,0)}}

/* auth (start page) entrance */
#auth .aside{animation:authslide .9s var(--ease) both}
#auth .apanel{animation:authrise .8s var(--ease) both}
@keyframes authslide{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes authrise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.authcard>*{opacity:0;animation:authfade .55s var(--ease) forwards}
.authcard>*:nth-child(1){animation-delay:.18s}
.authcard>*:nth-child(2){animation-delay:.25s}
.authcard>*:nth-child(3){animation-delay:.32s}
.authcard>*:nth-child(4){animation-delay:.39s}
.authcard>*:nth-child(5){animation-delay:.46s}
.authcard>*:nth-child(6){animation-delay:.53s}
.authcard>*:nth-child(7){animation-delay:.60s}
.authcard>*:nth-child(n+8){animation-delay:.66s}
@keyframes authfade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #auth .aside,#auth .apanel,.authcard>*{animation:none;opacity:1;transform:none}
  .intro-cta{animation:none}
}