/* ============================================================
   KATABAN GUILD — production design system (from B_guild_plaza v3)
   namespace: g-  /  QUEST DASH DNA: #58CC02 / #FF9600 / #FFF9E5
   all motion = transform/opacity only
   ============================================================ */
:root{
  --g-green:#58CC02; --g-green-dark:#58A700; --g-green-deep:#3E8F00; --g-green-soft:#EAFCD2; --g-green-edge:#BFE889;
  --g-yellow:#FFC800; --g-yellow-dark:#E0A800; --g-yellow-deep:#B98A00; --g-yellow-soft:#FFF3C4;
  --g-orange:#FF9600; --g-orange-dark:#D17800;
  --g-blue:#1CB0F6; --g-blue-dark:#0E8FCC; --g-blue-soft:#E3F5FE; --g-blue-edge:#A6E1FB;
  --g-red:#FF4B4B; --g-red-dark:#D13B3B; --g-red-soft:#FFE5E5;
  --g-purple:#CE82FF;
  --g-wood:#B26836; --g-wood-light:#C97F47; --g-wood-dark:#8F4F26; --g-wood-deep:#6E3C1B;
  --g-parch:#FFFCF0; --g-parch-edge:#E9DAA9; --g-parch-shadow:#E4D5A4;
  --g-ink:#4B4B4B; --g-ink-soft:#777; --g-ink-faint:#AFAFAF;
  --g-line:#E5E5E5; --g-line-soft:#F0F0F0;
}
body{
  background-image:radial-gradient(#F2E7C3 1.4px, transparent 1.4px);
  background-size:26px 26px;
}
.num,.g-num{font-variant-numeric:tabular-nums;}

/* ---------------- keyframes ---------------- */
@keyframes gRise{0%{opacity:0;transform:translateY(26px) scale(.955);}60%{opacity:1;}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes gPop{0%{opacity:0;transform:scale(.35) rotate(-10deg);}70%{opacity:1;transform:scale(1.13) rotate(2.5deg);}100%{opacity:1;transform:scale(1) rotate(0);}}
@keyframes gStampIn{0%{opacity:0;transform:scale(2.6) rotate(14deg);}62%{opacity:1;transform:scale(.92) rotate(-3deg);}100%{opacity:1;transform:scale(1) rotate(0);}}
@keyframes gBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.045);}}
@keyframes gSpin{to{transform:rotate(360deg);}}
@keyframes gDrift{0%{translate:-180px 0;}100%{translate:1240px 0;}}
@keyframes gFlag{0%,100%{transform:rotate(0) skewY(0) scaleX(1);}25%{transform:rotate(3deg) skewY(4deg) scaleX(.96);}50%{transform:rotate(-1.5deg) skewY(-3deg) scaleX(1.02);}75%{transform:rotate(2deg) skewY(2.5deg) scaleX(.98);}}
@keyframes gFloat{0%,100%{transform:translateY(0) rotate(-1.5deg);}50%{transform:translateY(-13px) rotate(1.5deg);}}
@keyframes gSway{from{translate:0 0;}to{translate:52px 0;}}
@keyframes gPetal{0%{transform:translate(0,0) rotate(0);opacity:0;}7%{opacity:.85;}45%{transform:translate(-48px,92px) rotate(210deg);}88%{opacity:.7;}100%{transform:translate(20px,205px) rotate(430deg);opacity:0;}}
@keyframes gFly{0%{transform:translate(0,0);}25%{transform:translate(290px,-14px);}50%{transform:translate(580px,4px);}75%{transform:translate(870px,-12px);}100%{transform:translate(1200px,0);}}
@keyframes gFlapL{from{transform:rotate(-26deg);}to{transform:rotate(28deg);}}
@keyframes gFlapR{from{transform:rotate(26deg);}to{transform:rotate(-28deg);}}
@keyframes gCart{from{transform:translateX(0);}to{transform:translateX(1340px);}}
@keyframes gStarTw{0%,100%{opacity:.25;transform:scale(.7);}50%{opacity:1;transform:scale(1.2);}}
@keyframes gLamp{0%,100%{transform:scale(1);}50%{transform:scale(.85);}}
@keyframes gPuff{0%{transform:translateY(0) scale(.5);opacity:0;}15%{opacity:.75;}100%{transform:translateY(-52px) translateX(9px) scale(2);opacity:0;}}
@keyframes gPinB{0%,100%{transform:rotate(-45deg) translate(0,0);}50%{transform:rotate(-45deg) translate(-3px,-3px);}}
@keyframes gFlick{0%,100%{transform:scale(1) rotate(-3deg);}20%{transform:scale(1.1,.9) rotate(3.5deg);}45%{transform:scale(.92,1.1) rotate(-2.5deg);}70%{transform:scale(1.07,.94) rotate(2.5deg);}85%{transform:scale(.97,1.05) rotate(-1deg);}}
@keyframes gEmber{0%{transform:translateY(0) scale(1);opacity:0;}12%{opacity:.95;}100%{transform:translateY(-34px) translateX(4px) scale(.3);opacity:0;}}
@keyframes gSweep{0%{transform:translateX(0);}55%,100%{transform:translateX(420%);}}
@keyframes gTwinkle{0%,100%{transform:scale(0) rotate(0);opacity:0;}50%{transform:scale(1.15) rotate(180deg);opacity:1;}}
@keyframes gBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3.5px);}}
@keyframes gIdleSway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3.5deg);}}
@keyframes gIdleHop{0%,78%,100%{transform:translateY(0) scale(1,1);}84%{transform:translateY(-6px) scale(.96,1.05);}92%{transform:translateY(0) scale(1.05,.94);}}
@keyframes gBlink{0%,91%,100%{transform:scaleY(1);}94%{transform:scaleY(.08);}}
@keyframes gWing{0%,88%,100%{transform:rotate(0);}92%{transform:rotate(-26deg);}96%{transform:rotate(8deg);}}
@keyframes gBirdBob{0%,100%{transform:translateY(0) scale(1,1);}50%{transform:translateY(-2px) scale(1.04,.96);}}
@keyframes gBoing{0%{transform:scale(1);}30%{transform:scale(1.24) rotate(-4deg);}55%{transform:scale(.93) rotate(2.5deg);}75%{transform:scale(1.07) rotate(-1deg);}100%{transform:scale(1);}}
@keyframes gMedal{0%{transform:rotate(0) scale(1);}45%{transform:rotate(200deg) scale(1.3);}100%{transform:rotate(360deg) scale(1);}}
@keyframes gChestBob{0%,100%{transform:translateY(0) rotate(0);}40%{transform:translateY(-5px) rotate(-1.6deg);}62%{transform:translateY(-1px) rotate(1.2deg);}}
@keyframes gChestShake{0%,100%{transform:rotate(0);}25%{transform:rotate(-3deg) translateY(-2px);}75%{transform:rotate(3deg) translateY(-2px);}}
@keyframes gSign{0%,100%{transform:rotate(-1.1deg);}50%{transform:rotate(1.1deg);}}
@keyframes gSwing{0%,100%{transform:rotate(var(--tilt,0deg));}22%{transform:rotate(calc(var(--tilt,0deg) + 2.6deg));}50%{transform:rotate(calc(var(--tilt,0deg) - 2deg));}76%{transform:rotate(calc(var(--tilt,0deg) + 1deg));}}
@keyframes gConfettiFly{0%{transform:translate(var(--x),var(--y)) rotate(0) scale(1);opacity:1;}100%{transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(.8);opacity:0;}}
@keyframes gCoinFly{0%{transform:translate(var(--x),var(--y)) scale(.4) rotate(0);opacity:1;}42%{transform:translate(var(--mx),var(--my)) scale(1.1) rotate(190deg);opacity:1;}100%{transform:translate(var(--tx),var(--ty)) scale(.85) rotate(430deg);opacity:0;}}
@keyframes gPulseR{0%{transform:scale(.35);opacity:1;}100%{transform:scale(8);opacity:0;}}
@keyframes gPillar{0%{transform:scaleY(0);opacity:0;}25%{opacity:1;}70%{transform:scaleY(1);opacity:.9;}100%{transform:scaleY(1.04);opacity:0;}}
@keyframes gDawnFade{0%{opacity:1;}55%{opacity:.85;}100%{opacity:0;}}
@keyframes gSunRise{0%{transform:translateY(190px) scale(.85);opacity:0;}30%{opacity:1;}100%{transform:translateY(0) scale(1);opacity:1;}}
@keyframes gHillUp{0%{transform:translateY(90px);opacity:0;}100%{transform:translateY(0);opacity:1;}}
@keyframes gWPop{0%{opacity:0;transform:scale(.15) rotate(-18deg) translateY(-70px);}62%{opacity:1;transform:scale(1.16) rotate(4deg) translateY(0);}82%{transform:scale(.96) rotate(-1.5deg);}100%{opacity:1;transform:scale(1) rotate(0);}}

/* ---------------- entrance helpers ---------------- */
.g-stg{animation:gRise .62s cubic-bezier(.16,1.32,.3,1) both;animation-delay:var(--d,0s);position:relative;}
.g-pop{animation:gPop .58s cubic-bezier(.2,1.45,.4,1) both;animation-delay:var(--d,0s);}
.g-stamp{animation:gStampIn .55s cubic-bezier(.3,1.3,.4,1) both;animation-delay:var(--d,0s);}
/* details ポップオーバーの z-index 負け防止:
   .g-stg は entrance アニメの transform が残留してスタッキングコンテキストになるため、
   後続セクション（ヒーロー等）が先行セクション内の position:absolute ポップオーバーを覆ってしまう。
   details 展開中のセクションだけ前面へ引き上げる（レイアウトは不変）。 */
.g-stg:has(details[open]){z-index:60;}
/* フォーカスリング統一 — UAデフォルトの黒リングを排し、ギルド緑のリングに */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--g-green);outline-offset:1px;}

/* ---------------- ribbon banner headings ---------------- */
.g-ribbon{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  background:var(--g-green);color:#fff !important;
  font-size:11.5px !important;font-weight:900;letter-spacing:.16em;
  padding:7px 18px;border-radius:6px;
  box-shadow:0 3px 0 var(--g-green-deep);
  margin-bottom:14px;white-space:nowrap;
}
.g-ribbon::before,.g-ribbon::after{content:'';position:absolute;top:5px;border-style:solid;}
.g-ribbon::before{left:-12px;border-width:10px 12px 10px 0;border-color:transparent var(--g-green-deep) transparent transparent;}
.g-ribbon::after{right:-12px;border-width:10px 0 10px 12px;border-color:transparent transparent transparent var(--g-green-deep);}
.g-rib-orange{background:var(--g-orange);box-shadow:0 3px 0 var(--g-orange-dark);}
.g-rib-orange::before{border-right-color:var(--g-orange-dark);}
.g-rib-orange::after{border-left-color:var(--g-orange-dark);}
.g-rib-blue{background:var(--g-blue);box-shadow:0 3px 0 var(--g-blue-dark);}
.g-rib-blue::before{border-right-color:var(--g-blue-dark);}
.g-rib-blue::after{border-left-color:var(--g-blue-dark);}
.g-rib-red{background:var(--g-red);box-shadow:0 3px 0 var(--g-red-dark);}
.g-rib-red::before{border-right-color:var(--g-red-dark);}
.g-rib-red::after{border-left-color:var(--g-red-dark);}
.g-rib-gold{background:var(--g-yellow);color:#7A5B00 !important;box-shadow:0 3px 0 var(--g-yellow-deep);}
.g-rib-gold::before{border-right-color:var(--g-yellow-deep);}
.g-rib-gold::after{border-left-color:var(--g-yellow-deep);}

/* ---------------- generic card ---------------- */
.g-card{
  background:#fff;border:2px solid var(--g-line);border-radius:16px;
  box-shadow:0 2px 0 var(--g-line);
  transition:transform .18s cubic-bezier(.2,1.35,.4,1),box-shadow .18s;
}
.g-card:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--g-line);}
/* dashboard scope: upgrade legacy tailwind cards */
.g-dash .bg-white{border:2px solid var(--g-line);border-bottom-width:3px;border-radius:16px;box-shadow:0 2px 0 var(--g-line-soft);}

/* ---------------- VILLAGE MAP sidebar ---------------- */
.g-village{position:relative;}
.g-village::before{
  content:'';position:absolute;left:26px;top:26px;bottom:26px;
  border-left:3px dashed #E4D9B8;z-index:0;pointer-events:none;
}
.g-village .lin-item{position:relative;z-index:1;}
.g-spot{
  width:30px;height:30px;flex:0 0 30px;border-radius:10px;
  border:2px solid var(--g-line);background:#fff;box-shadow:0 2px 0 var(--g-line);
  display:grid;place-items:center;font-size:15px;line-height:1;
  transition:transform .18s cubic-bezier(.2,1.4,.4,1);
}
.lin-item:hover .g-spot{transform:rotate(-6deg) scale(1.1);}
.lin-item.active .g-spot{border-color:var(--g-green-edge);box-shadow:0 2px 0 var(--g-green-edge);}
.g-village .lin-item.active::before{
  content:'';position:absolute;right:12px;top:50%;margin-top:-8px;width:13px;height:13px;
  background:var(--g-red);border:2px solid var(--g-red-dark);border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  animation:gPinB 1.15s ease-in-out infinite;
}
.g-village .lin-item.active::after{
  content:'';position:absolute;right:17px;top:50%;margin-top:-3px;width:4px;height:4px;border-radius:50%;background:#fff;z-index:2;
}
.g-brand-emblem{width:42px;height:42px;flex:0 0 42px;filter:drop-shadow(0 2px 0 rgba(62,143,0,.28));animation:gBreathe 3.6s ease-in-out infinite;}

/* ---------------- HERO（生きている村） ---------------- */
.g-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#63D80A 0%,#4CB502 55%,#3FA301 100%);
  border:2px solid var(--g-green-deep);border-radius:22px;
  box-shadow:0 4px 0 var(--g-green-deep);
  padding:30px 32px 26px;color:#fff;
}
.g-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:20px;}
.g-sky-tint{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;}
.g-hero.sky-dawn .g-sky-tint{opacity:.42;background:linear-gradient(180deg,rgba(255,150,60,.7) 0%,rgba(255,90,90,.3) 55%,transparent 100%);}
.g-hero.sky-dusk .g-sky-tint{opacity:.5;background:linear-gradient(180deg,rgba(255,110,40,.65) 0%,rgba(206,130,255,.3) 65%,transparent 100%);}
.g-hero.sky-night .g-sky-tint{opacity:.66;background:linear-gradient(180deg,rgba(16,34,84,.92) 0%,rgba(28,52,110,.6) 60%,rgba(20,40,84,.4) 100%);}
.g-hill{
  position:absolute;left:-8%;right:-8%;bottom:-58px;height:130px;
  background:radial-gradient(58% 100% at 28% 100%, rgba(255,255,255,.14) 0 99%, transparent 100%),
             radial-gradient(48% 90% at 74% 100%, rgba(255,255,255,.10) 0 99%, transparent 100%);
}
.g-sun{position:absolute;top:-38px;right:236px;width:150px;height:150px;}
.g-sun-rays{position:absolute;inset:0;color:rgba(255,222,89,.4);animation:gSpin 44s linear infinite;transition:opacity 1.2s;}
.g-sun-rays svg{width:100%;height:100%;display:block;}
.g-sun-core{
  position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:#FFDE59;border:4px solid rgba(240,180,0,.55);
  animation:gBreathe 4s ease-in-out infinite;transition:opacity 1.2s;
}
.g-hero.sky-dusk .g-sun-core{background:#FFB347;}
.g-hero.sky-dawn .g-sun-core{background:#FFCB6B;}
.g-moon{
  position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:#FFF6D8;border:4px solid rgba(190,180,140,.5);opacity:0;transition:opacity 1.2s;
}
.g-moon::before,.g-moon::after{content:'';position:absolute;border-radius:50%;background:rgba(190,175,130,.45);}
.g-moon::before{width:10px;height:10px;left:9px;top:12px;}
.g-moon::after{width:6px;height:6px;right:9px;bottom:9px;}
.g-hero.sky-night .g-sun-core,.g-hero.sky-night .g-sun-rays{opacity:0;}
.g-hero.sky-night .g-moon{opacity:1;}
.g-stars{position:absolute;inset:0;opacity:0;transition:opacity 1.2s;}
.g-hero.sky-night .g-stars{opacity:1;}
.g-stardot{position:absolute;width:4px;height:4px;border-radius:50%;background:#FFF6D8;animation:gStarTw 2.6s ease-in-out infinite;}
.g-cloud{position:absolute;height:22px;width:82px;background:rgba(255,255,255,.5);border-radius:999px;animation:gDrift linear infinite;transition:opacity 1.2s;}
.g-cloud::before,.g-cloud::after{content:'';position:absolute;background:inherit;border-radius:50%;}
.g-cloud::before{width:32px;height:32px;top:-14px;left:14px;}
.g-cloud::after{width:24px;height:24px;top:-9px;left:44px;}
.g-c1{top:26px;left:0;animation-duration:58s;}
.g-c2{top:74px;left:0;transform:scale(.68);animation-duration:78s;animation-delay:-30s;opacity:.75;}
.g-hero.sky-night .g-cloud{opacity:.22;}
.g-hall{position:absolute;right:238px;bottom:-4px;width:172px;height:128px;opacity:.9;}
.g-hall svg{width:100%;height:100%;display:block;}
.g-hall .g-pennant{position:absolute;top:-8px;left:calc(50% + 2px);}
.g-hlight{
  position:absolute;width:14px;height:14px;border-radius:50%;background:#FFDE59;
  opacity:0;transition:opacity 1.2s;animation:gLamp 2.8s ease-in-out infinite;
}
.g-hw1{left:39px;top:72px;}
.g-hw2{left:120px;top:72px;}
.g-hero.sky-night .g-hlight,.g-hero.sky-dusk .g-hlight{opacity:.95;}
.g-smoke{position:absolute;right:274px;bottom:112px;width:20px;height:60px;}
.g-puff{
  position:absolute;bottom:0;left:4px;width:12px;height:12px;border-radius:50%;
  background:rgba(255,255,255,.5);opacity:0;animation:gPuff 3.6s ease-out infinite;
}
.g-p2{animation-delay:1.2s;left:1px;}
.g-p3{animation-delay:2.4s;left:7px;}
.g-mill{position:absolute;left:96px;bottom:0;width:70px;height:104px;}
.g-mill-tower{
  position:absolute;bottom:0;left:22px;width:26px;height:62px;
  background:rgba(255,255,255,.26);
  clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);
}
.g-mill-blades{position:absolute;top:0;left:0;width:70px;height:70px;animation:gSpin 15s linear infinite;}
.g-mill-blades svg{width:100%;height:100%;display:block;}
.g-pennant{
  width:34px;height:18px;background:var(--g-yellow);
  clip-path:polygon(0 0,100% 50%,0 100%);
  transform-origin:left center;
  animation:gFlag 1.9s ease-in-out infinite;
  display:inline-block;
}
.g-pn-red{background:var(--g-red);}
.g-pn-small{width:24px;height:13px;}
.g-flagpole{position:absolute;left:26px;bottom:0;width:5px;height:96px;background:rgba(255,255,255,.4);border-radius:3px;}
.g-flagpole .g-pennant{position:absolute;top:2px;left:5px;}
.g-balloon{position:absolute;top:14px;left:37%;width:44px;height:60px;animation:gFloat 6.5s ease-in-out infinite, gSway 19s ease-in-out infinite alternate;}
.g-balloon svg{width:100%;height:100%;display:block;}
.g-petal{position:absolute;top:-14px;width:9px;height:9px;border-radius:62% 0 62% 62%;background:#FFDE59;opacity:0;animation:gPetal 13s linear infinite;}
.g-pp2{background:#FFB7C5;}
.g-pp3{background:#B9E88A;}
.g-flybird{position:absolute;top:34px;left:-40px;width:26px;height:14px;animation:gFly 8s linear forwards;}
.g-flybird::before,.g-flybird::after{content:'';position:absolute;top:4px;width:13px;height:8px;background:rgba(255,255,255,.85);}
.g-flybird::before{left:0;border-radius:60% 60% 0 60%;transform-origin:right center;animation:gFlapL .45s ease-in-out infinite alternate;}
.g-flybird::after{right:0;border-radius:60% 60% 60% 0;transform-origin:left center;animation:gFlapR .45s ease-in-out infinite alternate;}
.g-cart{position:absolute;bottom:4px;left:-100px;width:78px;height:46px;animation:gCart 14s linear forwards;}
.g-cart .c-top{position:absolute;bottom:26px;left:10px;width:48px;height:18px;background:rgba(255,255,255,.22);border-radius:11px 11px 0 0;}
.g-cart .c-body{position:absolute;bottom:13px;left:4px;right:10px;height:15px;background:rgba(255,255,255,.32);border-radius:4px;}
.g-cart .c-w1,.g-cart .c-w2{position:absolute;bottom:0;width:17px;height:17px;border-radius:50%;border:3px solid rgba(255,255,255,.42);animation:gSpin 2.1s linear infinite;}
.g-cart .c-w1{left:10px;} .g-cart .c-w2{right:14px;}
.g-cart .c-w1::before,.g-cart .c-w2::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(255,255,255,.42);}
.g-sky-toggle{
  position:absolute;top:12px;right:12px;z-index:3;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.55);
  font-size:16px;display:grid;place-items:center;color:#fff;cursor:pointer;
  transition:transform .15s;font-family:inherit;
}
.g-sky-toggle:hover{transform:scale(1.12) rotate(12deg);}

.g-hero-top{display:flex;gap:26px;align-items:center;position:relative;z-index:1;flex-wrap:wrap;}
.g-emblem-wrap{flex:0 0 118px;width:118px;height:118px;}
.g-emblem{width:100%;height:100%;filter:drop-shadow(0 4px 0 rgba(0,0,0,.16));animation:gBreathe 3.4s ease-in-out infinite;display:block;}
.g-hero-copy{flex:1;min-width:260px;}
.g-kicker{font-size:11px;font-weight:900;letter-spacing:.26em;opacity:.92;}
.g-catch{font-size:31px;font-weight:900;letter-spacing:.015em;line-height:1.28;margin:8px 0 0;text-shadow:0 2px 0 rgba(0,0,0,.13);color:#fff;}
.g-lead{font-size:13.5px;font-weight:800;opacity:.94;margin-top:9px;line-height:1.75;}

/* ---------------- rank plate ---------------- */
.g-rank-wrap{flex:0 0 210px;}
.g-rank{
  position:relative;
  background:linear-gradient(180deg,#FFDE59 0 46%,var(--g-yellow) 46%);
  border:3px solid var(--g-yellow-dark);border-radius:16px;
  box-shadow:0 5px 0 var(--g-yellow-deep);
  color:var(--g-ink);padding:15px 16px 13px;text-align:center;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,1.4,.4,1);
}
.g-rank::before{content:'';position:absolute;inset:5px;border:2px solid rgba(255,255,255,.55);border-radius:11px;pointer-events:none;}
.g-rank:hover{transform:translateY(-4px) rotate(-1.2deg);}
.g-rank.g-boing{animation:gBoing .7s cubic-bezier(.25,1.6,.4,1) !important;}
.g-rank.g-boing .g-medal{animation:gMedal .8s cubic-bezier(.3,.9,.35,1);}
.g-rivet{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--g-yellow-dark);box-shadow:inset 0 -2.5px 0 var(--g-yellow-deep);}
.g-rivet.tl{top:8px;left:8px;} .g-rivet.tr{top:8px;right:8px;} .g-rivet.bl{bottom:8px;left:8px;} .g-rivet.br{bottom:8px;right:8px;}
.g-medal{width:66px;height:74px;filter:drop-shadow(0 2px 0 rgba(185,138,0,.5));display:inline-block;}
.g-rank-name{font-size:15px;font-weight:900;letter-spacing:.22em;color:#8A6A00;margin-top:2px;}
.g-rank-no{font-size:10.5px;font-weight:900;letter-spacing:.14em;color:#A98200;margin-top:2px;}
.g-rank-steps{display:flex;justify-content:center;gap:5px;margin-top:8px;}
.g-rank-step{
  width:30px;height:16px;border-radius:5px;font-size:8px;font-weight:900;letter-spacing:.04em;
  display:grid;place-items:center;color:#fff;border:2px solid rgba(0,0,0,.14);opacity:.55;
}
.g-rank-step.s-bronze{background:var(--g-wood-light);}
.g-rank-step.s-silver{background:#B9C2CB;}
.g-rank-step.s-gold{background:var(--g-orange);opacity:1;box-shadow:0 2px 0 var(--g-orange-dark);animation:gBreathe 2.6s ease-in-out infinite;}
.g-rank-step.s-legend{background:var(--g-purple);}
.g-rank-hint{font-size:9.5px;font-weight:900;color:#A98200;margin-top:7px;letter-spacing:.06em;}

/* ---------------- XP bar ---------------- */
.g-xp-row{position:relative;z-index:1;margin-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.g-xp-level{
  background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.55);border-radius:14px;
  padding:7px 14px;font-weight:900;font-size:13px;letter-spacing:.06em;white-space:nowrap;
}
.g-xp-outer{flex:1;min-width:200px;height:22px;background:rgba(0,0,0,.22);border-radius:999px;position:relative;overflow:hidden;border:2px solid rgba(0,0,0,.1);}
.g-bar{
  height:100%;border-radius:999px;width:0%;
  background:linear-gradient(180deg,#FFDE59 0%,var(--g-yellow) 55%,#F0B400 100%);
  position:relative;
}
.g-bar-green{background:linear-gradient(180deg,#8BE33A 0%,var(--g-green) 55%,#4AAE02 100%);}
.g-shine{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;}
.g-shine::after{
  content:'';position:absolute;top:0;bottom:0;width:34%;left:-40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  animation:gSweep 2.8s ease-in-out infinite;
}
.g-spark{
  position:absolute;width:9px;height:9px;background:#fff;
  clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);
  animation:gTwinkle 1.5s ease-in-out infinite;
}
.g-spark.s1{right:2px;top:-1px;}
.g-spark.s2{right:14px;bottom:-1px;width:7px;height:7px;animation-delay:.45s;}
.g-spark.s3{right:26px;top:3px;width:6px;height:6px;animation-delay:.9s;}
.g-xp-meta{font-size:12px;font-weight:900;white-space:nowrap;}
.g-xp-week{
  background:var(--g-yellow);color:#7A5B00;border-radius:999px;padding:5px 13px;
  box-shadow:0 2px 0 var(--g-yellow-dark);font-size:12px;font-weight:900;letter-spacing:.03em;
  animation:gBreathe 2.4s ease-in-out infinite;
}

/* ---------------- mascot bird ---------------- */
.g-bird-pos{position:absolute;top:-25px;right:44px;z-index:2;transition:transform 1.5s cubic-bezier(.34,1.25,.4,1);}
.g-bird-pos.moved{transform:translateX(-360px);}
.g-bird-flip{transition:transform .5s;}
.g-bird-pos.moved .g-bird-flip{transform:scaleX(-1);}
.g-bird{position:relative;width:28px;height:26px;animation:gBirdBob 3s ease-in-out infinite;}
.g-bird .body{position:absolute;inset:0;background:var(--g-yellow);border:2.5px solid var(--g-yellow-dark);border-radius:50% 50% 46% 46%;}
.g-bird .eye{position:absolute;top:8px;left:7px;width:4.5px;height:4.5px;background:#4B4B4B;border-radius:50%;animation:gBlink 4.2s infinite;}
.g-bird .beak{position:absolute;top:11px;left:-6px;width:0;height:0;border:5px solid transparent;border-right:8px solid var(--g-orange);border-left:0;}
.g-bird .wing{position:absolute;top:11px;right:3px;width:11px;height:8px;background:var(--g-yellow-dark);border-radius:50% 50% 50% 20%;transform-origin:right top;animation:gWing 3s ease-in-out infinite;}

/* ---------------- adventurer party ---------------- */
.g-members{display:flex;align-items:center;gap:20px;padding:18px 22px 16px;position:relative;}
.g-avs{display:flex;padding-left:10px;padding-top:8px;}
.g-av{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:900;font-size:16px;border:3px solid #fff;
  box-shadow:0 2px 0 rgba(0,0,0,.12);flex:0 0 auto;position:relative;
  margin-left:-11px;cursor:default;
  transition:transform .28s cubic-bezier(.3,1.8,.4,1);
  animation:gBob 2.8s ease-in-out infinite;
  animation-delay:calc(var(--i,0)*.19s);
}
.g-av.g-idle-1{animation-name:gIdleSway;}
.g-av.g-idle-2{animation-name:gIdleHop;}
.g-av:hover{animation:none;transform:translateY(-8px) scale(1.14) rotate(-4deg);z-index:20;}
.g-av .on{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--g-green);border:2.5px solid #fff;}
.g-av[data-name]::after{
  content:attr(data-name);
  position:absolute;bottom:calc(100% + 9px);left:50%;
  transform:translateX(-50%) scale(.6);opacity:0;
  background:#fff;border:2px solid var(--g-line);border-radius:10px;box-shadow:0 2px 0 var(--g-line);
  padding:4px 10px;font-size:10.5px;font-weight:900;color:#3B3B3B;white-space:nowrap;
  pointer-events:none;transition:.18s cubic-bezier(.2,1.4,.4,1);
}
.g-av[data-name]:hover::after{opacity:1;transform:translateX(-50%) scale(1);}
.g-acc{position:absolute;pointer-events:none;}
.g-acc-hat{top:-11px;left:5px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:13px solid var(--g-green);transform:rotate(-9deg);}
.g-acc-hat::after{content:'';position:absolute;left:-11px;top:11px;width:22px;height:3.5px;background:var(--g-green-deep);border-radius:2px;}
.g-acc-sword{top:-12px;right:-3px;width:4px;height:16px;background:#C6CFD8;border:1px solid #9AA6B2;border-radius:2px;transform:rotate(26deg);}
.g-acc-sword::after{content:'';position:absolute;bottom:0;left:-4.5px;width:13px;height:3.5px;background:var(--g-yellow-dark);border-radius:2px;}
.g-acc-staff{top:-13px;right:-2px;width:3.5px;height:18px;background:var(--g-wood-light);border-radius:2px;transform:rotate(15deg);}
.g-acc-staff::after{content:'';position:absolute;top:-6px;left:-2.8px;width:9px;height:9px;border-radius:50%;background:var(--g-purple);border:2px solid #A55FD6;}
.g-acc-shield{bottom:-3px;left:-6px;width:13px;height:15px;background:var(--g-blue);border:2px solid var(--g-blue-dark);border-radius:6px 6px 9px 9px;}
.g-acc-shield::after{content:'';position:absolute;left:3px;top:3px;width:3px;height:5px;background:#fff;border-radius:2px;opacity:.7;}
.g-gwpill{background:#FFFBF0;border:2px solid var(--g-line);border-radius:14px;padding:9px 15px;text-align:center;cursor:pointer;transition:transform .16s cubic-bezier(.2,1.4,.4,1);}
.g-gwpill:hover{transform:translateY(-3px);}
.g-gw-num{font-size:16px;font-weight:900;color:var(--g-green-dark);}
.g-gw-lab{font-size:9.5px;font-weight:900;letter-spacing:.1em;color:var(--g-ink-faint);margin-top:1px;}

/* ---------------- feed / gm / quest items (home) ---------------- */
.g-feed-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:13px 6px;border-bottom:2px solid var(--g-line-soft);
  transition:transform .16s cubic-bezier(.2,1.3,.4,1);
}
.g-feed-item:hover{transform:translateX(4px);}
.g-feed-item:last-child{border-bottom:none;padding-bottom:4px;}
.g-fav{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;font-size:13.5px;border:3px solid #fff;box-shadow:0 2px 0 rgba(0,0,0,.12);flex:0 0 auto;}
.g-feed-text{font-size:13px;font-weight:800;line-height:1.55;}
.g-feed-text b{font-weight:900;color:#3B3B3B;}
.g-hl{color:var(--g-green-dark);font-weight:900;}
.g-feed-time{font-size:10.5px;font-weight:900;color:var(--g-ink-faint);margin-top:3px;letter-spacing:.05em;}
.g-feed-xp{
  font-size:10.5px;font-weight:900;color:var(--g-yellow-dark);background:var(--g-yellow-soft);
  border:2px solid var(--g-yellow);border-radius:999px;padding:2px 9px;white-space:nowrap;margin-top:2px;
}
.g-gm{display:flex;gap:12px;align-items:flex-start;padding:13px 4px 11px;border-bottom:2px solid var(--g-line-soft);}
.g-gm:last-child{border-bottom:none;}
.g-gm-quote{font-size:12.5px;font-weight:800;line-height:1.7;color:var(--g-ink);}
.g-gm-name{font-size:10.5px;font-weight:900;letter-spacing:.08em;color:var(--g-ink-faint);margin-top:5px;}
.g-gm-name b{color:var(--g-green-dark);}
.g-q-item{
  display:flex;align-items:center;gap:12px;
  border:2px solid var(--g-line);border-radius:14px;background:#FFFBF0;
  padding:12px 14px;margin-bottom:10px;
  transition:transform .16s cubic-bezier(.2,1.35,.4,1),border-color .16s;
}
.g-q-item:hover{transform:translateX(4px) rotate(.3deg);border-color:var(--g-green-edge);}
.g-q-check{
  width:26px;height:26px;border-radius:9px;border:2.5px solid var(--g-line);background:#fff;flex:0 0 26px;
  display:grid;place-items:center;color:#fff;font-size:14px;font-weight:900;
}
.g-q-item.done{opacity:.55;}
.g-q-item.done .g-q-check{background:var(--g-green);border-color:var(--g-green-dark);}
.g-q-name{font-size:12.5px;font-weight:900;line-height:1.4;}
.g-q-sub{font-size:10.5px;font-weight:800;color:var(--g-ink-soft);margin-top:2px;}
.g-q-xp{font-size:11px;font-weight:900;color:var(--g-yellow-dark);white-space:nowrap;}
.g-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--g-green);color:#fff;border:none;border-radius:14px;
  box-shadow:0 4px 0 var(--g-green-dark);
  font-weight:900;font-size:14px;letter-spacing:.04em;
  padding:0 22px;height:46px;cursor:pointer;text-decoration:none;font-family:inherit;
  transition:filter .12s,transform .08s,box-shadow .08s;
}
.g-btn:hover{filter:brightness(1.06);}
.g-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--g-green-dark);}

/* ---------------- KPI cards + ring + streak (PL) ---------------- */
.g-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr) 268px;gap:16px;margin-bottom:20px;}
@media (max-width:1240px){.g-kpi-grid{grid-template-columns:repeat(2,1fr);}}
.g-kpi{padding:16px 18px;}
.g-kpi-label{font-size:10.5px;font-weight:900;letter-spacing:.16em;color:var(--g-ink-faint);}
.g-kpi-value{font-size:29px;font-weight:900;color:#3B3B3B;margin-top:9px;letter-spacing:-.01em;}
.g-kpi-foot{margin-top:9px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.g-kpi-note{font-size:11px;font-weight:800;color:var(--g-ink-soft);}
.g-chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 12px;font-size:11px;font-weight:900;border:2px solid var(--g-line);background:#fff;color:var(--g-ink-soft);white-space:nowrap;}
.g-chip.green{background:var(--g-green-soft);border-color:var(--g-green-edge);color:var(--g-green-dark);}
.g-chip.gold{background:var(--g-yellow-soft);border-color:var(--g-yellow);color:var(--g-yellow-dark);}
.g-chip.red{background:var(--g-red-soft);border-color:#FFBDBD;color:var(--g-red-dark);}
.g-ring-card{display:flex;align-items:center;gap:16px;padding:16px 18px;}
.g-ring-wrap{position:relative;width:118px;height:118px;flex:0 0 118px;}
.g-ring-wrap svg{width:118px;height:118px;display:block;}
.g-ring-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;}
.g-ring-pct{font-size:24px;font-weight:900;color:var(--g-orange-dark);line-height:1;}
.g-ring-pct span{font-size:13px;}
.g-ring-lab{font-size:9px;font-weight:900;letter-spacing:.14em;color:var(--g-ink-faint);margin-top:2px;}
.g-ring-meta .rm-lab{font-size:10.5px;font-weight:900;letter-spacing:.14em;color:var(--g-ink-faint);}
.g-ring-meta .rm-main{font-size:13px;font-weight:900;color:#3B3B3B;margin-top:6px;line-height:1.6;}
.g-ring-meta .rm-sub{font-size:11px;font-weight:800;color:var(--g-ink-soft);margin-top:5px;line-height:1.6;}
.g-streak{
  display:flex;align-items:center;gap:13px;
  background:#fff;border:2px solid var(--g-orange);border-radius:18px;
  box-shadow:0 3px 0 var(--g-orange);padding:8px 18px 8px 12px;
}
.g-flame-wrap{width:36px;height:46px;position:relative;}
.g-flame-wrap svg{width:100%;height:100%;animation:gFlick 1.15s ease-in-out infinite;transform-origin:50% 88%;display:block;}
.g-ember{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--g-yellow);opacity:0;animation:gEmber 1.7s linear infinite;}
.g-ember.e1{left:7px;bottom:13px;}
.g-ember.e2{left:17px;bottom:17px;width:4px;height:4px;background:var(--g-orange);animation-delay:.55s;}
.g-ember.e3{left:25px;bottom:11px;width:3.5px;height:3.5px;animation-delay:1.1s;}
.g-streak-num{font-size:22px;font-weight:900;color:var(--g-orange-dark);line-height:1;}
.g-streak-num span{font-size:12px;}
.g-streak-lab{font-size:10px;font-weight:900;letter-spacing:.1em;color:var(--g-ink-soft);margin-top:3px;}

/* ---------------- MAIN QUEST hero (products) ---------------- */
.g-qhero{
  position:relative;overflow:visible;
  background:linear-gradient(135deg,#FFA51E 0%,var(--g-orange) 50%,#F07C00 100%);
  border:2px solid var(--g-orange-dark);border-radius:22px;box-shadow:0 4px 0 var(--g-orange-dark);
  color:#fff;padding:26px 30px 24px;margin-bottom:48px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap;
}
.g-qscene{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:20px;}
.g-qrays{
  position:absolute;right:-70px;top:-70px;width:280px;height:280px;
  color:rgba(255,255,255,.16);animation:gSpin 52s linear infinite;
}
.g-qrays svg{width:100%;height:100%;display:block;}
.g-qscene .g-cloud{background:rgba(255,255,255,.35);}
.g-qc1{top:22px;left:0;animation-duration:64s;animation-delay:-12s;}
.g-chest-wrap{flex:0 0 108px;width:108px;height:96px;position:relative;z-index:1;cursor:pointer;}
.g-chest{width:100%;height:100%;filter:drop-shadow(0 4px 0 rgba(0,0,0,.18));animation:gChestBob 3.2s ease-in-out infinite;transform-origin:50% 100%;display:block;}
.g-chest-wrap:hover .g-chest{animation:gChestShake .5s ease-in-out infinite;}
.g-qmain{flex:1;min-width:300px;position:relative;z-index:1;}
.g-qkicker{font-size:11px;font-weight:900;letter-spacing:.3em;opacity:.95;display:flex;align-items:center;gap:10px;}
.g-flagw{width:20px;height:20px;display:inline-block;animation:gFlag 2s ease-in-out infinite;transform-origin:left center;}
.g-flagw svg{width:100%;height:100%;display:block;}
.g-qtitle{font-size:13px;font-weight:900;opacity:.95;margin-top:10px;letter-spacing:.04em;}
.g-qnum{font-size:40px;font-weight:900;line-height:1.05;margin-top:4px;text-shadow:0 2px 0 rgba(0,0,0,.14);}
.g-qnum small{font-size:16px;font-weight:900;opacity:.92;}
.g-qbar-row{display:flex;align-items:center;gap:14px;margin-top:14px;}
.g-qbar{flex:1;height:20px;background:rgba(0,0,0,.24);border-radius:999px;overflow:hidden;border:2px solid rgba(0,0,0,.1);position:relative;}
.g-qmeta{font-size:12px;font-weight:900;white-space:nowrap;}
.g-qcheer{font-size:12px;font-weight:800;opacity:.95;margin-top:11px;}
.g-qtoday{
  flex:0 0 auto;position:relative;z-index:1;cursor:pointer;
  background:rgba(255,255,255,.96);color:var(--g-orange-dark);border-radius:18px;
  border:2px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.15);
  padding:14px 20px;text-align:center;
  transition:transform .16s cubic-bezier(.2,1.4,.4,1);
}
.g-qtoday:hover{transform:translateY(-3px) rotate(-1deg);}
.g-qt-lab{font-size:10px;font-weight:900;letter-spacing:.18em;color:var(--g-ink-soft);}
.g-qt-sub{font-size:10.5px;font-weight:900;color:var(--g-green-dark);margin-top:4px;}
.g-qgoal{flex:0 0 auto;position:relative;z-index:1;text-align:center;}
.g-qgoal .val{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;}
.g-qgoal .lab{font-size:10.5px;font-weight:900;opacity:.95;margin-top:4px;}

/* ---------------- quest board + parchment ---------------- */
.g-board{
  position:relative;margin:40px 0 24px;border-radius:20px;
  border:4px solid var(--g-wood-dark);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.055) 0 3px, transparent 3px 118px),
    linear-gradient(180deg,var(--g-wood-light) 0%,var(--g-wood) 100%);
  box-shadow:0 6px 0 var(--g-wood-deep);
  padding:34px 20px 20px;
}
.g-nail{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--g-wood-deep);box-shadow:inset 0 -2.5px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.22);}
.g-nail.tl{top:10px;left:10px;} .g-nail.tr{top:10px;right:10px;}
.g-nail.bl{bottom:10px;left:10px;} .g-nail.br{bottom:10px;right:10px;}
.g-sign-pos{position:absolute;top:-24px;left:50%;transform:translateX(-50%);z-index:2;}
.g-sign{
  position:relative;
  background:linear-gradient(180deg,#D68A50 0 48%,var(--g-wood-light) 48%);
  border:3px solid var(--g-wood-dark);border-radius:10px;
  box-shadow:0 4px 0 var(--g-wood-deep);
  color:#FFF3C4;font-size:12px;font-weight:900;letter-spacing:.22em;
  padding:9px 26px;white-space:nowrap;
  animation:gSign 4.6s ease-in-out infinite;transform-origin:50% -10px;
  text-shadow:0 1.5px 0 rgba(0,0,0,.3);
}
.g-sign::before,.g-sign::after{content:'';position:absolute;top:-13px;width:5px;height:14px;background:var(--g-wood-dark);border-radius:3px;}
.g-sign::before{left:22px;transform:rotate(14deg);}
.g-sign::after{right:22px;transform:rotate(-14deg);}
.g-pcard{
  position:relative;height:100%;
  background:var(--g-parch);
  border:2px solid var(--g-parch-edge);
  border-radius:6px 10px 8px 11px;
  box-shadow:0 4px 0 rgba(62,32,10,.35);
  padding:20px 16px 14px;
  transform:rotate(var(--tilt,0deg));
  transform-origin:50% 6px;
  transition:transform .2s cubic-bezier(.2,1.3,.4,1);
}
.g-pcard::after{
  content:'';position:absolute;right:-2px;bottom:-2px;width:0;height:0;
  border-style:solid;border-width:0 0 16px 16px;
  border-color:transparent transparent rgba(62,32,10,.28) transparent;
  border-radius:0 0 6px 0;
}
.g-pcard:hover{animation:gSwing .95s ease-in-out;}
.g-pin{
  position:absolute;top:-8px;left:50%;margin-left:-8px;width:16px;height:16px;border-radius:50%;
  background:var(--g-red);border:2.5px solid var(--g-red-dark);
  box-shadow:0 3px 0 rgba(0,0,0,.3), inset 2.5px 2.5px 0 rgba(255,255,255,.4);
  z-index:2;
}
.g-pin-blue{background:var(--g-blue);border-color:var(--g-blue-dark);}
.g-pin-green{background:var(--g-green);border-color:var(--g-green-deep);}
.g-pin-grey{background:var(--g-ink-faint);border-color:#8f8f8f;}
.g-pin-gold{background:var(--g-yellow);border-color:var(--g-yellow-dark);}
.g-pin-orange{background:var(--g-orange);border-color:var(--g-orange-dark);}
.g-seal{
  position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;font-weight:900;color:#fff;
  transform:rotate(11deg);
  box-shadow:0 2.5px 0 rgba(0,0,0,.22), inset 0 0 0 3px rgba(255,255,255,.4);
  border:2.5px solid rgba(0,0,0,.15);
}
.g-w-red{background:var(--g-red);border-color:var(--g-red-dark);}
.g-w-blue{background:var(--g-blue);border-color:var(--g-blue-dark);}
.g-w-green{background:var(--g-green);border-color:var(--g-green-deep);}
.g-w-grey{background:var(--g-ink-faint);border-color:#8f8f8f;}
.g-w-gold{background:var(--g-yellow);border-color:var(--g-yellow-dark);color:#7A5B00;}
.g-w-orange{background:var(--g-orange);border-color:var(--g-orange-dark);}
.g-fun-lab{font-size:11px;font-weight:900;letter-spacing:.14em;color:#8A6F35;}
.g-fun-num{font-size:32px;font-weight:900;margin-top:7px;color:#4A3B1E;font-variant-numeric:tabular-nums;}
.g-fun-num small{font-size:13px;color:#B49B5E;font-weight:900;}

/* ---------------- particles ---------------- */
.g-confetti{
  position:fixed;width:9px;height:13px;border-radius:2.5px;z-index:99;pointer-events:none;left:0;top:0;
  animation:gConfettiFly 1s cubic-bezier(.2,.7,.4,1) forwards;
}
.g-confetti.g-dot{border-radius:50%;width:8px;height:8px;}
.g-confetti.g-star{
  width:13px;height:13px;border-radius:0;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.g-coin{
  position:fixed;left:0;top:0;width:16px;height:16px;border-radius:50%;z-index:99;pointer-events:none;
  background:var(--g-yellow);border:2px solid var(--g-yellow-dark);
  box-shadow:inset 0 -3.5px 0 var(--g-yellow-dark);
  display:grid;place-items:center;font-size:8.5px;font-weight:900;color:#8A6A00;
  animation:gCoinFly .95s cubic-bezier(.3,.55,.6,1) forwards;
}
.g-pulse{
  position:fixed;left:0;top:0;width:24px;height:24px;margin:-12px 0 0 -12px;z-index:98;pointer-events:none;
  border:4px solid var(--g-yellow);border-radius:50%;
  animation:gPulseR .75s cubic-bezier(.2,.7,.4,1) forwards;
}
.g-pillar{
  position:fixed;z-index:97;pointer-events:none;width:110px;
  background:linear-gradient(180deg,rgba(255,222,89,0) 0%,rgba(255,222,89,.5) 45%,rgba(255,200,0,.68) 100%);
  border-radius:16px;transform-origin:50% 100%;
  animation:gPillar .95s cubic-bezier(.2,.8,.3,1) forwards;
}

/* ---------------- welcome（朝日の広場・初回のみ） ---------------- */
.g-welcome{
  position:fixed;inset:0;z-index:100;background:#FFF9E5;
  display:none;place-items:center;transition:opacity .5s ease;cursor:pointer;overflow:hidden;
}
.g-welcome.show{display:grid;}
.g-welcome.done{opacity:0;pointer-events:none;}
.gw-scene{position:absolute;inset:0;pointer-events:none;}
.gw-dawnsky{position:absolute;inset:0;background:linear-gradient(180deg,#FFB25E 0%,#FFD98A 45%,#FFF3C4 100%);animation:gDawnFade 2.3s ease-out forwards;}
.gw-sunrise{position:absolute;left:50%;top:56%;width:340px;height:340px;margin:-170px 0 0 -170px;animation:gSunRise 1.9s cubic-bezier(.25,.8,.35,1) forwards;}
.gw-sunrise .wr{position:absolute;inset:0;color:rgba(255,200,0,.3);animation:gSpin 32s linear infinite;}
.gw-sunrise .wr svg{width:100%;height:100%;display:block;}
.gw-hill{position:absolute;bottom:-90px;height:240px;border-radius:50% 50% 0 0;}
.gw-hill.h1{left:-14%;width:70%;background:#CBEE9C;animation:gHillUp 1s cubic-bezier(.2,1.1,.4,1) .15s both;}
.gw-hill.h2{right:-16%;width:74%;background:#B9E88A;animation:gHillUp 1s cubic-bezier(.2,1.1,.4,1) .3s both;}
.gw-inner{text-align:center;position:relative;}
.gw-emblem{width:132px;height:132px;margin:0 auto;filter:drop-shadow(0 5px 0 rgba(62,143,0,.25));animation:gWPop .85s cubic-bezier(.2,1.5,.4,1) .55s both;}
.gw-emblem svg{width:100%;height:100%;display:block;}
.gw-title{font-size:26px;font-weight:900;letter-spacing:.3em;color:#3B3B3B;margin-top:20px;animation:gRise .6s cubic-bezier(.16,1.3,.3,1) .95s both;}
.gw-title span{color:var(--g-green-dark);}
.gw-sub{font-size:13px;font-weight:900;color:var(--g-ink-soft);letter-spacing:.12em;margin-top:10px;animation:gRise .6s cubic-bezier(.16,1.3,.3,1) 1.15s both;}
.gw-skip{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:10.5px;font-weight:900;letter-spacing:.2em;color:var(--g-ink-faint);animation:gRise .5s ease 1.4s both;}

/* ---------------- home layout helpers ---------------- */
.g-home-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-top:16px;}
@media (max-width:1240px){.g-home-grid{grid-template-columns:1fr;}}
.g-card-pad{padding:18px 20px;}
.g-page-date{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--g-ink-faint);margin-bottom:6px;}
.g-page-title{font-size:24px;font-weight:900;color:#3B3B3B;letter-spacing:.01em;}
.g-page-sub{font-size:13px;font-weight:800;color:var(--g-ink-soft);margin-top:5px;}

/* ---------------- reduced motion: 全停止 ---------------- */
@media (prefers-reduced-motion: reduce){
  [class*="g-"],[class*="g-"]::before,[class*="g-"]::after{
    animation-duration:.001s !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
}

/* ============================================================
   v4: VILLAGE MAP 生命化 + 全ページ演出
   ============================================================ */
/* --- 施設ミニアイコン --- */
.g-spot svg{width:24px;height:24px;display:block;}
.g-spot [class^="sp-"], .g-spot g, .g-spot path{transform-box:fill-box;}
.sp-flag{transform-origin:left bottom;}
.lin-item:hover .sp-flag{animation:gFlag 1s ease-in-out infinite;}
.sp-coin{transform-origin:center;}
.lin-item:hover .sp-coin{animation:gCoinHop .55s cubic-bezier(.3,1.6,.4,1) infinite;}
@keyframes gCoinHop{0%,100%{transform:translateY(0) rotate(0);}45%{transform:translateY(-4px) rotate(24deg);}70%{transform:translateY(.5px) rotate(-6deg);}}
.sp-quill{transform-origin:15% 85%;}
.lin-item:hover .sp-quill{animation:gWrite .7s ease-in-out infinite;}
@keyframes gWrite{0%,100%{transform:rotate(0) translateX(0);}30%{transform:rotate(-9deg) translateX(-1.5px);}65%{transform:rotate(5deg) translateX(2px);}}
.sp-crate{transform-origin:center bottom;}
.lin-item:hover .sp-crate{animation:gCrateHop .6s cubic-bezier(.3,1.5,.4,1) infinite;}
@keyframes gCrateHop{0%,100%{transform:translateY(0) scale(1,1);}40%{transform:translateY(-4px) scale(.95,1.06);}75%{transform:translateY(0) scale(1.06,.94);}}
.sp-note{transform-origin:center top;}
.lin-item:hover .sp-note{animation:gNoteSwing .8s ease-in-out infinite;}
@keyframes gNoteSwing{0%,100%{transform:rotate(0);}30%{transform:rotate(7deg);}70%{transform:rotate(-6deg);}}
.sp-wheel{transform-origin:center;}
.lin-item:hover .sp-wheel{animation:gSpin 1s linear infinite;}
.sp-cartbody{transform-origin:center bottom;}
.lin-item:hover .sp-cartbody{animation:gCartNudge .5s ease-in-out infinite;}
@keyframes gCartNudge{0%,100%{transform:translateX(0) translateY(0);}50%{transform:translateX(1.4px) translateY(-1px);}}
.sp-pouch{transform-origin:center bottom;}
.lin-item:hover .sp-pouch{animation:gPouchWobble .7s ease-in-out infinite;}
@keyframes gPouchWobble{0%,100%{transform:rotate(0) scale(1,1);}30%{transform:rotate(-6deg) scale(1.04,.96);}70%{transform:rotate(5deg) scale(.97,1.04);}}
.sp-trophy{transform-origin:center bottom;}
.lin-item:hover .sp-trophy{animation:gBreathe 1.1s ease-in-out infinite;}
.sp-shine{transform-origin:center;opacity:0;}
.lin-item:hover .sp-shine{animation:gTwinkle 1s ease-in-out infinite;}
/* 現在地の生気: 灯りがともる */
.lin-item.active .g-spot{position:relative;overflow:visible;}
.lin-item.active .g-spot::after{
  content:'';position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;
  background:#FFDE59;border:2px solid var(--g-yellow-dark);
  animation:gLamp 2s ease-in-out infinite;
}
/* 木看板ツールチップ — サイドバーのoverflowに切られないよう body直下のfixed要素（guild.jsが配置） */
.g-tipbox{
  position:fixed;left:0;top:0;z-index:999;pointer-events:none;
  background:linear-gradient(180deg,#D68A50 0 48%,var(--g-wood-light) 48%);
  border:2px solid var(--g-wood-dark);border-radius:8px;
  box-shadow:0 3px 0 var(--g-wood-deep);
  color:#FFF3C4;font-size:10.5px;font-weight:900;letter-spacing:.08em;
  padding:5px 11px;white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
  font-family:'Nunito','M PLUS Rounded 1c','Noto Sans JP',sans-serif;
  opacity:0;transform:translateY(-50%) translateX(-6px) scale(.85);
  transition:opacity .16s ease,transform .16s cubic-bezier(.2,1.4,.4,1);
}
.g-tipbox::before{
  content:'';position:absolute;left:-7px;top:50%;margin-top:-5px;
  border:5px solid transparent;border-right:7px solid var(--g-wood-dark);border-left:0;
}
.g-tipbox.show{opacity:1;transform:translateY(-50%) translateX(0) scale(1);}
/* 小道をあるく光の粒（ページ到着時） */
.g-walker{
  position:absolute;left:23px;width:9px;height:9px;border-radius:50%;z-index:5;pointer-events:none;
  background:#FFDE59;border:2px solid var(--g-yellow-dark);
  transition:transform .9s cubic-bezier(.4,.1,.3,1),opacity .4s ease;
}
.g-walker::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,222,89,.5) 0 40%,transparent 70%);
}
/* サイドバーの止まり木（たまに小鳥がとまる） */
.g-perch{position:relative;height:20px;margin:0 18px 6px;}
.g-perch-bar{position:absolute;left:8px;right:8px;bottom:0;height:5px;border-radius:3px;background:var(--g-wood-light);box-shadow:0 2px 0 var(--g-wood-dark);}
.g-perch-bird{
  position:absolute;bottom:3px;right:22px;transform:scale(.8);transform-origin:bottom center;
  opacity:0;pointer-events:none;transition:opacity .5s ease;
}
.g-perch-bird.here{opacity:1;}
.g-perch-bird .g-bird{animation-duration:2.6s;}
/* --- リボン見出しの登場（scaleX展開） --- */
.g-ribbon{transform-origin:left center;animation:gRibbonIn .5s cubic-bezier(.2,1.25,.4,1) both;}
@keyframes gRibbonIn{0%{opacity:0;transform:scaleX(.35);}60%{opacity:1;}100%{opacity:1;transform:scaleX(1);}}
/* --- 100%達成の金の輝き --- */
.g-bar.g-max{background:linear-gradient(180deg,#FFE98A 0%,var(--g-yellow) 55%,var(--g-yellow-dark) 100%);}
.g-bar.g-max .g-shine::after{animation-duration:1.3s;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);}
.g-bar.g-max .g-spark{animation-duration:.9s;}
.g-ring-wrap.g-max .g-ring-fg{stroke:var(--g-yellow);}
.g-ring-wrap.g-max::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--g-yellow);
  opacity:.7;animation:gMaxPulse 1.6s ease-out infinite;pointer-events:none;
}
@keyframes gMaxPulse{0%{transform:scale(.92);opacity:.7;}70%{transform:scale(1.08);opacity:0;}100%{transform:scale(1.08);opacity:0;}}
/* reduced motion: v4追加分（sp-* は g- 接頭辞外のため個別指定） */
@media (prefers-reduced-motion: reduce){
  [class^="sp-"],[class*=" sp-"],.g-walker,.g-perch-bird{
    animation:none !important;transition:none !important;
  }
}

/* ============================================================
   v5: 4ページの中身をヒーロー級に（帳場/記帳台/金庫室/依頼掲示板）
   ============================================================ */
/* --- 帳場: KPI台帳プレート --- */
.g-dash .g-kpi{
  background:linear-gradient(180deg,#FFFDF6 0%,#FFF9E5 100%);
  border-color:#E9DAA9;border-bottom-width:4px;
  box-shadow:0 3px 0 #E4D5A4;position:relative;
}
.g-dash .g-kpi::before,.g-dash .g-kpi::after{
  content:'';position:absolute;top:8px;width:8px;height:8px;border-radius:50%;
  background:#E0A800;box-shadow:inset 0 -2px 0 #B98A00;
}
.g-dash .g-kpi::before{left:8px;} .g-dash .g-kpi::after{right:8px;}
.g-dash .g-ring-card{background:linear-gradient(180deg,#FFFDF6 0%,#FFF9E5 100%);border-color:#E9DAA9;box-shadow:0 3px 0 #E4D5A4;}
/* --- 帳場: 錬金レシピ（計算式） --- */
.g-recipe > *{animation:gRise .5s cubic-bezier(.16,1.3,.3,1) both;}
.g-recipe > *:nth-child(1){animation-delay:.02s;}
.g-recipe > *:nth-child(2){animation-delay:.08s;}
.g-recipe > *:nth-child(3){animation-delay:.12s;}
.g-recipe > *:nth-child(4){animation-delay:.18s;}
.g-recipe > *:nth-child(5){animation-delay:.22s;}
.g-recipe > *:nth-child(6){animation-delay:.28s;}
.g-recipe > *:nth-child(7){animation-delay:.32s;}
.g-recipe > *:nth-child(8){animation-delay:.38s;}
.g-recipe > *:nth-child(9){animation-delay:.42s;}
.g-recipe > *:nth-child(10){animation-delay:.55s;animation-name:gPop;}
.g-recipe > *:nth-child(11){animation-delay:.62s;animation-name:gStampIn;}
/* 素材カード（羊皮紙） */
.g-recipe .bg-gray-50{
  background:#FFFCF0;border:2px solid #E9DAA9;border-radius:10px;
  box-shadow:0 2px 0 #E4D5A4;
  transition:transform .16s cubic-bezier(.2,1.35,.4,1);
}
.g-recipe .bg-gray-50:hover{transform:translateY(-2px);}
/* 演算子コイン */
.g-recipe .self-center{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  display:grid;place-items:center;align-self:center;
  background:var(--g-wood-light);border:2px solid var(--g-wood-dark);
  box-shadow:0 2px 0 var(--g-wood-deep);
  color:#FFF3C4 !important;font-size:16px !important;line-height:1;
  margin:0 4px;padding:0 !important;
}
/* 完成品（粗利・営業利益）: 金縁+輝き */
.g-recipe .border-2{
  position:relative;overflow:hidden;border-radius:12px;
  border:2px solid var(--g-yellow) !important;
  box-shadow:0 3px 0 var(--g-yellow-dark);
}
.g-recipe .border-2::after{
  content:'';position:absolute;top:0;bottom:0;width:34%;left:-40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  animation:gSweep 3.2s ease-in-out infinite;pointer-events:none;
}
/* 上昇/低下バッジをギルドチップ化 */
.g-dash span.text-xs.font-medium{
  display:inline-flex;align-items:center;gap:3px;
  border-radius:999px;padding:3px 10px;font-weight:900;border:2px solid;
  white-space:nowrap;
}
.g-dash span.text-xs.font-medium.text-blue-600{background:#E3F5FE;border-color:#A6E1FB;}
.g-dash span.text-xs.font-medium.text-red-600{background:#FFE5E5;border-color:#FFBDBD;}
.g-dash span.text-xs.font-medium.text-gray-500{background:#F5F5F5;border-color:#E5E5E5;}
/* チャートカードの見出しオーナメント＋紙めくれコーナー */
.g-dash .bg-white{position:relative;}
.g-dash .bg-white > h2::before, .g-dash .bg-white .flex > h2::before{
  content:'';display:inline-block;width:9px;height:9px;border-radius:3px;
  background:var(--g-green);box-shadow:0 2px 0 var(--g-green-deep);
  margin-right:7px;vertical-align:baseline;
}
.g-dash .bg-white::after{
  content:'';position:absolute;right:-1px;bottom:-1px;width:0;height:0;
  border-style:solid;border-width:0 0 14px 14px;
  border-color:transparent transparent rgba(62,32,10,.15) transparent;
  border-radius:0 0 8px 0;pointer-events:none;
}
.g-dash .bg-white{transition:transform .18s cubic-bezier(.2,1.35,.4,1),box-shadow .18s;}
.g-dash .bg-white:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--g-line-soft);}

/* --- 記帳台: PL入力 --- */
.g-ledger{background:linear-gradient(180deg,#FFFDF6 0%,#FFFCF0 100%);border-color:#E9DAA9 !important;box-shadow:0 3px 0 #E4D5A4;}
.g-ledger label{font-weight:900 !important;color:#8A6F35 !important;letter-spacing:.06em;}
.g-ledger label::before{content:'❖ ';color:var(--g-yellow-dark);}
.g-ledger input[type=number],.g-ledger input[type=date]{
  border:2px solid #E9DAA9 !important;border-radius:10px !important;
  background:#fff;font-weight:900;font-variant-numeric:tabular-nums;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.g-ledger input[type=number]:focus,.g-ledger input[type=date]:focus{
  outline:none;border-color:var(--g-green) !important;
  box-shadow:0 0 0 3px rgba(88,204,2,.18);
  transform:translateY(-1px);
}
.g-ledger-tbl tbody tr{transition:background .12s;}
.g-ledger-tbl tbody tr:nth-child(even){background:#FFFCF0;}
.g-ledger-tbl tbody tr:hover{background:#FFF3C4;}
.g-ledger-tbl tbody td:first-child::before{
  content:'';display:inline-block;width:8px;height:13px;margin-right:7px;vertical-align:-2px;
  background:var(--g-red);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 68%,0 100%);
}
.g-ledger-tbl tbody tr:first-child td:first-child::after{
  content:'NEW';display:inline-block;margin-left:7px;
  background:var(--g-yellow);color:#7A5B00;border-radius:999px;
  font-size:9px;font-weight:900;letter-spacing:.08em;padding:1.5px 7px;
  box-shadow:0 1.5px 0 var(--g-yellow-dark);
}

/* --- 依頼掲示板: 管理ヒーロープレート --- */
.g-mgmt-plate{position:relative;transition:transform .18s cubic-bezier(.2,1.35,.4,1),box-shadow .18s;}
.g-mgmt-plate:hover{transform:translateY(-3px);}
.g-mgmt-medal{position:absolute;top:-8px;right:12px;width:32px;height:37px;filter:drop-shadow(0 2px 0 rgba(185,138,0,.4));}
.g-mgmt-flag{position:absolute;top:-6px;right:14px;width:26px;height:15px;background:var(--g-blue);clip-path:polygon(0 0,100% 50%,0 100%);transform-origin:left center;animation:gFlag 2s ease-in-out infinite;}
.g-mgmt-scroll{position:absolute;top:-9px;right:14px;width:26px;height:16px;background:#FFFCF0;border:2px solid #B9C2CB;border-radius:8px;}
.g-mgmt-scroll::before,.g-mgmt-scroll::after{content:'';position:absolute;top:-4px;bottom:-4px;width:5px;border-radius:3px;background:#B9C2CB;}
.g-mgmt-scroll::before{left:-4px;} .g-mgmt-scroll::after{right:-4px;}

/* --- 金庫室: 財務 --- */
.g-vault-hero{position:relative;overflow:hidden;}
.g-vault-spark{
  position:absolute;width:10px;height:10px;background:#FFF6D8;
  clip-path:polygon(50% 0,63% 37%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 37%);
  opacity:0;animation:gVaultTw 7s ease-in-out infinite;pointer-events:none;
}
@keyframes gVaultTw{0%,88%,100%{opacity:0;transform:scale(.3) rotate(0);}92%{opacity:.95;transform:scale(1.15) rotate(140deg);}96%{opacity:.4;transform:scale(.7) rotate(240deg);}}

/* reduced motion: v5追加分 */
@media (prefers-reduced-motion: reduce){
  .g-recipe > *,.g-vault-spark,.g-mgmt-flag{animation:none !important;}
}

/* v5 fix: レシピの演算子はポップ、完成品はスタンプ登場 */
.g-recipe > .self-center{animation-name:gPop;}
.g-recipe > .border-2{animation-name:gStampIn;animation-delay:.5s;animation-duration:.55s;}
/* v5 fix: リボン見出しにはオーナメント点を付けない */
.g-dash .bg-white > h2.g-ribbon::before,.g-dash .bg-white .flex > h2.g-ribbon::before{display:none;}

/* ============================================================
   v6: 木の掲示板の常設化（管理）＋ 記帳台/帳場のボード化
   ============================================================ */
/* 羊皮紙シート（ボードの上に載る大判の紙） */
.g-sheet{
  position:relative;
  background:linear-gradient(180deg,#FFFDF6,#FFFCF0);
  border:2px solid #E9DAA9;
  border-radius:6px 10px 8px 11px;
  box-shadow:0 4px 0 rgba(62,32,10,.35);
  padding:20px 22px;
}
/* ボードの上に載るKPI台帳プレート/素材カードは影を木陰トーンに */
.g-board .g-kpi,.g-board .g-ring-card{border-color:#E9DAA9;box-shadow:0 4px 0 rgba(62,32,10,.3);}
.g-board .g-recipe .bg-gray-50{box-shadow:0 3px 0 rgba(62,32,10,.3);}
/* レシピの素材カードにもピン留め（演算子コインと完成品は除く） */
.g-recipe > div:not(.self-center){position:relative;}
.g-recipe > div:not(.self-center)::before{
  content:'';position:absolute;top:-7px;left:50%;margin-left:-7px;width:13px;height:13px;border-radius:50%;
  background:var(--g-red);border:2px solid rgba(0,0,0,.18);
  box-shadow:0 2px 0 rgba(0,0,0,.25), inset 2px 2px 0 rgba(255,255,255,.4);z-index:2;
}
.g-recipe > .border-2::before{display:none;} /* 完成品はスタンプ演出のためピン無し */

/* ============================================================
   v7: QAラウンド1の視覚修正
   ============================================================ */
/* 小道の点線がセクションラベルを貫通しない */
.g-village .lin-nav-label{padding-left:42px;position:relative;z-index:1;}
/* 止まり木は右寄せ・短く（「謎の棒」に見えない大きさに） */
.g-perch-bar{left:auto;right:10px;width:74px;}
.g-perch-bird{right:26px;}
/* ホーム2カラム: フィード1件でも間延びしない */
.g-home-grid{align-items:start;}
/* 管理「灰の巻物」: 白箱に見えないよう羊皮紙トーンに */
.g-mgmt-scroll{background:#F1E6C4;border-color:#B49B5E;}
.g-mgmt-scroll::before,.g-mgmt-scroll::after{background:#B49B5E;}

/* ============================================================
   v8: クエスト依頼所 — GUILD WORKS（マーケット型カード + 演出）
   ============================================================ */
/* 受付ベル（サイドバー施設アイコン）: ホバーでチンと鳴る */
.sp-bell{transform-origin:50% 92%;}
.lin-item:hover .sp-bell{animation:gBellDing .6s cubic-bezier(.3,1.5,.4,1) infinite;}
@keyframes gBellDing{0%,100%{transform:rotate(0);}25%{transform:rotate(-9deg);}55%{transform:rotate(8deg);}80%{transform:rotate(-3deg);}}

/* 入場: 札が掲示板に「貼られていく」stagger（--tilt はカード側に残すため wrapper で実行） */
.g-qcell{animation:gQPaste .55s cubic-bezier(.3,1.35,.4,1) both;animation-delay:var(--d,0s);}
@keyframes gQPaste{
  0%{opacity:0;transform:scale(1.7) translateY(-16px) rotate(4deg);}
  62%{opacity:1;transform:scale(.96) translateY(1px) rotate(-1.2deg);}
  100%{opacity:1;transform:none;}
}

/* 募集札（羊皮紙 + カテゴリ色ピン + 微傾き） — Wix App Market × QUEST BOARD 文法 */
.g-qsrv{
  position:relative;background:var(--g-parch);
  border:2px solid var(--g-parch-edge);border-radius:6px 10px 8px 11px;
  box-shadow:0 4px 0 rgba(62,32,10,.35);
  padding:20px 16px 14px;
  transform:rotate(var(--tilt,0deg));transform-origin:50% 8px;
}
.g-qsrv::before{
  content:'';position:absolute;top:-8px;left:50%;margin-left:-8px;width:16px;height:16px;border-radius:50%;
  background:var(--pin,var(--g-red));border:2.5px solid rgba(0,0,0,.22);
  box-shadow:0 3px 0 rgba(0,0,0,.3), inset 2.5px 2.5px 0 rgba(255,255,255,.4);z-index:2;
}
.g-qsrv::after{
  content:'';position:absolute;right:-2px;bottom:-2px;width:0;height:0;
  border-style:solid;border-width:0 0 16px 16px;
  border-color:transparent transparent rgba(62,32,10,.28) transparent;
  border-radius:0 0 6px 0;
}
/* ホバー: ピンを軸に揺れながらふわりと浮く */
.g-qsrv:hover{animation:gQSwingLift .95s ease-in-out;}
@keyframes gQSwingLift{
  0%{transform:rotate(var(--tilt,0deg)) translateY(0);}
  22%{transform:rotate(calc(var(--tilt,0deg) + 2.4deg)) translateY(-4px);}
  50%{transform:rotate(calc(var(--tilt,0deg) - 1.8deg)) translateY(-3px);}
  76%{transform:rotate(calc(var(--tilt,0deg) + 1deg)) translateY(-2px);}
  100%{transform:rotate(var(--tilt,0deg)) translateY(0);}
}
.g-qsrv-icon{
  width:54px;height:54px;flex:0 0 54px;border-radius:14px;
  border:2px solid var(--g-parch-edge);box-shadow:0 2px 0 rgba(62,32,10,.18);
  display:grid;place-items:center;
  transition:transform .18s cubic-bezier(.2,1.4,.4,1);
}
.g-qsrv-icon svg{width:38px;height:38px;display:block;}
.g-qsrv:hover .g-qsrv-icon{transform:rotate(-5deg) scale(1.08);}

/* ヒーロー: 羊皮紙の告知札 + 受付ベル + 下げ札 */
.g-qnotice{
  position:relative;background:var(--g-parch);
  border:2px solid var(--g-parch-edge);border-radius:8px 12px 8px 12px;
  box-shadow:0 4px 0 rgba(62,32,10,.35);
  padding:20px 22px;--tilt:-.35deg;
  transform:rotate(var(--tilt));transform-origin:50% 8px;
}
.g-qnotice:hover{animation:gSwing .95s ease-in-out;}
.g-qbell{
  width:66px;height:66px;flex:0 0 66px;border-radius:16px;
  background:var(--g-yellow-soft);border:2px solid var(--g-parch-edge);
  box-shadow:0 3px 0 var(--g-parch-shadow);display:grid;place-items:center;
}
.g-qbell svg{width:48px;height:48px;display:block;}
/* 受付ベルのambient: 低頻度でチリンと鳴る */
.g-qbell .sp-bell{transform-origin:50% 92%;animation:gBellAmb 8.5s ease-in-out infinite;}
@keyframes gBellAmb{0%,88%,100%{transform:rotate(0);}90%{transform:rotate(-9deg);}93%{transform:rotate(8deg);}96%{transform:rotate(-4deg);}}
/* 木札風の下げ札（紐＋穴つき・ゆらゆら） */
.g-qtag{
  position:relative;background:var(--g-parch);
  border:2px solid var(--g-parch-edge);border-radius:12px;
  box-shadow:0 4px 0 rgba(62,32,10,.35);
  padding:20px 20px 16px;text-align:center;margin-top:16px;
  transform-origin:50% -16px;animation:gSign 5.2s ease-in-out infinite;
}
.g-qtag::before{content:'';position:absolute;top:-16px;left:50%;width:3px;height:16px;margin-left:-1.5px;background:var(--g-wood-dark);border-radius:2px;}
.g-qtag::after{content:'';position:absolute;top:6px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--g-parch-shadow);box-shadow:inset 0 1.5px 0 rgba(62,32,10,.3);}

/* 送付済み: 「済」蝋印が押された落ち着いた受領札 */
.g-qsrv-sent{
  position:relative;margin-top:12px;background:#F3EBD3;
  border:2px solid var(--g-parch-shadow);border-radius:12px;padding:10px 12px;
}

/* 依頼状インライン展開（details/summary をボタン化）+ 封蝋シャイン */
.g-qsrv-open summary{list-style:none;user-select:none;position:relative;overflow:hidden;}
.g-qsrv-open summary::-webkit-details-marker{display:none;}
.g-qsrv-open summary::after{
  content:'';position:absolute;top:0;bottom:0;width:34%;left:-45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
}
.g-qsrv-open summary:hover::after{animation:gSweep 1.1s ease-in-out infinite;}
.g-qsrv-open[open] summary{filter:saturate(.6) brightness(1.02);}

/* サービスアイコンの可動部（ホバーで反応・サイドバー施設アイコンと同じ手法） */
.g-qsrv-icon [class*="qi-"], .g-qsrv-icon [class*="qi-"] *{transform-box:fill-box;}
@keyframes gQiPop{0%,100%{transform:scale(1);}50%{transform:scale(1.18);}}
@keyframes gQuillWrite{0%,100%{transform:rotate(0) translate(0,0);}30%{transform:rotate(-6deg) translate(-1.5px,1px);}60%{transform:rotate(3deg) translate(1px,-.5px);}}
.g-qsrv:hover .qi-awn{transform-origin:50% 20%;animation:gFlag 1.1s ease-in-out infinite;}
.g-qsrv:hover .qi-wheel{transform-origin:center;animation:gSpin 1.2s linear infinite;}
.g-qsrv:hover .qi-check{transform-origin:center;animation:gQiPop .7s ease-in-out infinite;}
.g-qsrv:hover .qi-box{transform-origin:50% 100%;animation:gIdleHop 1.3s ease-in-out infinite;}
.g-qsrv:hover .qi-quill{transform-origin:20% 80%;animation:gQuillWrite .8s ease-in-out infinite;}
.g-qsrv:hover .qi-coin{transform-origin:center;animation:gQiPop .7s ease-in-out infinite;}
.g-qsrv:hover .qi-gear{transform-origin:center;animation:gSpin 2.4s linear infinite;}
.g-qsrv:hover .qi-pal{transform-origin:center;animation:gIdleSway 1.6s ease-in-out infinite;}

/* reduced-motion: g-以外のクラス（sp-bell/qi-*）も含めて全停止 */
@media (prefers-reduced-motion: reduce){
  .g-qbell .sp-bell,.g-qtag,[class*="qi-"]{animation:none !important;}
}

/* 依頼状を運ぶ鳩 */
.g-dove{
  position:fixed;left:0;top:0;z-index:99;pointer-events:none;font-size:32px;line-height:1;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.14));
  animation:gDoveFly 2.4s cubic-bezier(.35,.55,.55,1) forwards;
}
.g-dove .letter{position:absolute;left:20px;top:18px;font-size:15px;}
@keyframes gDoveFly{
  0%{transform:translate(var(--x),var(--y)) scale(.45) rotate(-10deg);opacity:0;}
  14%{transform:translate(calc(var(--x) + 40px),calc(var(--y) - 46px)) scale(1) rotate(4deg);opacity:1;}
  55%{transform:translate(calc(var(--x) + 330px),calc(var(--y) - 180px)) scale(.92) rotate(-3deg);opacity:1;}
  100%{transform:translate(calc(var(--x) + 680px),calc(var(--y) - 400px)) scale(.7) rotate(8deg);opacity:0;}
}

/* ============================================================
   v9: 配送小屋 SHIPPING LODGE（/kpi/logistics）
   ============================================================ */
/* 期間チップ */
.lg-chip{
  display:inline-block;padding:5px 12px;border-radius:999px;
  border:2px solid var(--g-line);background:#fff;color:var(--g-ink);
  font-size:11.5px;font-weight:900;text-decoration:none;letter-spacing:.04em;
  box-shadow:0 2px 0 var(--g-line);
  transition:transform .14s cubic-bezier(.2,1.4,.4,1);
}
.lg-chip:hover{transform:translateY(-2px);}
.lg-chip.active{background:var(--g-blue);border-color:var(--g-blue-dark);box-shadow:0 2px 0 var(--g-blue-dark);color:#fff;}

/* 帳場ボードの隅を走る荷馬車（サイドバー物流アイコンと同画風・ambient） */
.lg-cart-amb{
  position:absolute;right:18px;top:-16px;width:52px;height:52px;z-index:2;
  filter:drop-shadow(0 3px 0 rgba(62,32,10,.3));
  animation:gBob 3.4s ease-in-out infinite;
}
.lg-cart-amb svg{width:52px;height:52px;display:block;}
.lg-cart-amb .sp-wheel{transform-box:fill-box;transform-origin:center;animation:gSpin 6s linear infinite;}
.lg-cart-amb:hover .sp-wheel{animation:gSpin 1s linear infinite;}
.lg-cart-amb .sp-cartbody{transform-box:fill-box;transform-origin:center bottom;}
.lg-cart-amb:hover{animation:gBob 1.2s ease-in-out infinite;}

/* reduced-motion: lg- 名前空間も全停止 */
@media (prefers-reduced-motion: reduce){
  .lg-cart-amb,.lg-cart-amb .sp-wheel{animation:none !important;}
  .lg-chip{transition-duration:.001s !important;}
}

/* ============================================================
   v9.1: 契約単価マスタ（送料タリフ + 資材の帳簿）
   ============================================================ */
/* 単価入力セル（羊皮紙の升目） */
.lg-cell-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.lg-cell-grid-1{grid-template-columns:1fr;}
.lg-cell{
  background:#FFFDF6;border:2px solid var(--g-parch-edge);border-radius:10px;
  padding:8px 10px 9px;
  transition:transform .14s cubic-bezier(.2,1.4,.4,1),border-color .14s;
}
.lg-cell:hover{transform:translateY(-2px);border-color:var(--g-yellow);}
.lg-cell:focus-within{border-color:var(--g-green);transform:translateY(-2px);}
.lg-cell-lab{font-size:10px;font-weight:900;letter-spacing:.08em;color:#8A6F35;}
.lg-cell-form{display:flex;align-items:center;gap:4px;margin-top:4px;}
.lg-cell-in{
  width:100%;min-width:0;border:none;background:transparent;outline:none;
  font-family:inherit;font-size:15px;font-weight:900;color:#4A3B1E;text-align:right;
  border-bottom:2px dashed #E4D5A4;padding:2px 2px 3px;border-radius:0;
}
.lg-cell-in::placeholder{color:#CBB98A;font-weight:900;}
.lg-cell-in:focus{border-bottom-color:var(--g-green);}
.lg-cell-in:focus-visible{outline:none;} /* セルは下線＋枠ハイライト（.lg-cell:focus-within）で表現。二重リング防止 */
.lg-cell-yen{font-size:10.5px;font-weight:900;color:#B49B5E;flex:0 0 auto;}
.lg-cell-wide{grid-column:span 1;}

/* タリフ札は単独配置のため高さ揃え(height:100%)を無効化 — 中身の高さで自然に収める */
.lg-tariff-card.g-pcard{height:auto;}

/* 運送会社トラックの札（ホバーで車輪が回る） */
.lg-truck-plate{
  width:64px;height:64px;flex:0 0 64px;border-radius:16px;
  border:2px solid var(--g-parch-edge);box-shadow:0 2px 0 rgba(62,32,10,.18);
  display:grid;place-items:center;
  transition:transform .18s cubic-bezier(.2,1.4,.4,1);
}
.lg-truck-plate svg{width:46px;height:46px;display:block;}
.lg-tariff-card:hover .lg-truck-plate{transform:rotate(-4deg) scale(1.06);}
.lg-tariff-card .qi-wheel{transform-box:fill-box;transform-origin:center;}
.lg-tariff-card:hover .qi-wheel{animation:gSpin 1.2s linear infinite;}

@media (prefers-reduced-motion: reduce){
  .lg-tariff-card .qi-wheel{animation:none !important;}
  .lg-cell,.lg-truck-plate{transition-duration:.001s !important;}
}

/* ============================================================
   スクロールジャンプ防止（2026-07-07）
   htmxのouterHTMLスワップは「新root挿入→旧root削除」の順で行われるため、
   ブラウザのscroll anchoringが旧コンテンツを追跡してスクロール位置を
   押し下げ、削除後にページ最下部へクランプされる（=下部まで飛ぶ）。
   アンカリングを無効化してスワップ中のスクロール位置を固定する。
   ============================================================ */
html { overflow-anchor: none; }

/* ============================================================
   v10: TODAY'S QUEST 3層クエストボード（初回/毎日/月1）
   ============================================================ */
.g-qgrp-lab{
  display:flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:900;letter-spacing:.14em;color:var(--g-ink-soft);
  margin:14px 0 8px;
}
.g-qgrp-lab .g-chip{height:auto;padding:2px 9px;font-size:10px;}
/* 入門クエスト全達成の金の勲章（蝋印スタンプ入場） */
.g-tut-medal{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#FFFDF6,var(--g-yellow-soft));
  border:2px solid var(--g-yellow);border-radius:14px;
  box-shadow:0 3px 0 var(--g-yellow-dark);
  padding:10px 14px;margin:12px 0 4px;
  animation:gStampIn .55s cubic-bezier(.3,1.3,.4,1) both;
}
.g-tut-medal:hover svg{animation:gMedal .8s cubic-bezier(.3,.9,.35,1);}
/* 全クエスト達成バナー */
.g-qall{
  margin-top:14px;background:var(--g-yellow-soft);
  border:2px solid var(--g-yellow);border-radius:12px;
  box-shadow:0 2px 0 var(--g-yellow-dark);
  padding:10px 12px;font-size:12px;font-weight:900;color:#8A6A00;text-align:center;
  animation:gPop .58s cubic-bezier(.2,1.45,.4,1) both;
}

/* ============================================================
   v11: モバイル対応（≤900px）— レイアウト1カラム化・村シーン減量・タップ最適化
   ============================================================ */
@media (max-width: 900px){
  html,body{overflow-x:hidden;}
  /* インライン指定の固定グリッドを1カラムへ（チャート2列・資材3列など） */
  .lin-content div[style*="grid-template-columns:1fr 1fr"],
  .lin-content div[style*="grid-template-columns: 1fr 1fr"],
  .lin-content div[style*="grid-template-columns:2fr 1fr 1fr"],
  .lin-content div[style*="grid-template-columns:repeat(2"]{grid-template-columns:1fr !important;}
  .g-kpi-grid{grid-template-columns:1fr;}
  .g-home-grid{grid-template-columns:1fr;}

  /* ヒーロー（村シーン）: 遠景を間引いて軽量化（旗・太陽・雲は残す） */
  .g-hall,.g-balloon,.g-mill,.g-smoke,.g-flagpole{display:none !important;}
  .g-sun{right:24px;transform:scale(.82);transform-origin:top right;}
  .g-hero{padding:20px 16px 18px;}
  .g-catch{font-size:21px;line-height:1.35;}
  .g-lead{font-size:12px;}
  .g-kicker{font-size:10px;}
  .g-emblem-wrap{flex:0 0 78px;width:78px;height:78px;}
  .g-rank-wrap{flex:1 1 100%;max-width:230px;margin:2px auto 0;}
  .g-xp-row{margin-top:16px;}

  /* 木の掲示板・羊皮紙: 幅フィット（傾き・ピンは維持） */
  .g-board{padding-left:12px;padding-right:12px;}
  .g-sign{white-space:normal;text-align:center;line-height:1.45;padding:8px 16px;max-width:80vw;letter-spacing:.1em;}
  .g-qnotice{padding:16px 16px;}
  .g-qnotice > div{flex-wrap:wrap;}
  .g-qtag{margin:14px auto 0;}
  .g-qhero{padding:20px 16px;}

  /* パーティ隊列・フィード */
  .g-members{flex-wrap:wrap;gap:14px;padding:16px 16px 14px;}
  .g-avs{flex-wrap:wrap;row-gap:10px;}

  /* タップターゲット 44px 相当 */
  .lg-chip,.mgmt-chip{padding:10px 14px;}
  .g-q-item{padding:14px 8px;}
  .btn{height:40px;}
  .g-sky-toggle{width:40px;height:40px;}

  /* テーブルは親コンテナ内で横スクロール（潰さない） */
  .lin-content .overflow-x-auto{-webkit-overflow-scrolling:touch;}
  .g-sheet{padding:16px 12px;}
  .g-ledger-tbl{min-width:760px;}

  /* 配送小屋・クエスト依頼所の札 */
  .lg-cell-grid{grid-template-columns:repeat(2,1fr);}
  .lg-cart-amb{right:10px;top:-12px;width:44px;height:44px;}
  .lg-cart-amb svg{width:44px;height:44px;}
  .g-qsrv-icon{width:48px;height:48px;flex:0 0 48px;}
  .g-qsrv-icon svg{width:34px;height:34px;}

  /* 目立ちすぎる固定装飾の調整 */
  .g-bird-pos{display:none;}
  .g-petal{display:none;}
}

/* ============================================================
   ギルドマスターの週報 — GUILD TIMES（/articles, /admin/articles, ホーム週報）
   純増のみ・transform/opacity のみ・reduced-motion は上の全停止ブロックが適用される
   ============================================================ */
/* 記事カード（羊皮紙札・stagger入場は .g-qcell / --d を流用） */
.g-art-card{
  display:block; position:relative; text-decoration:none; color:inherit;
  background:var(--g-parch, #FFFCF0); border:2px solid #E9DAA9;
  border-radius:6px 12px 8px 11px; box-shadow:0 4px 0 #E4D5A4;
  padding:18px 18px 16px; transform:rotate(var(--tilt, 0deg));
  transition:transform .22s cubic-bezier(.2,1.3,.4,1), box-shadow .22s ease;
}
.g-art-card:hover{transform:rotate(var(--tilt, 0deg)) translateY(-4px); box-shadow:0 8px 0 #E4D5A4, 0 16px 26px rgba(62,32,10,.14);}
.g-art-card:active{transform:rotate(var(--tilt, 0deg)) translateY(-1px); box-shadow:0 4px 0 #E4D5A4;}
.g-art-title{font-size:15.5px; font-weight:900; color:#4A3B1E; line-height:1.5; margin-top:9px;}
.g-art-excerpt{font-size:11.5px; font-weight:800; color:#8A6F35; line-height:1.8; margin-top:8px;}
.g-art-meta{display:flex; align-items:center; gap:8px; margin-top:12px; padding-top:10px; border-top:2px dashed #E4D5A4; font-size:10.5px; font-weight:900; color:#B49B5E;}

/* カテゴリチップ（5色: 経営=金 / 仕入れ=緑 / AI=紫 / 物流=青 / 財務=橙） */
.g-artcat{display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:3px 11px; font-size:10.5px; font-weight:900; border:2px solid var(--ac-edge, #E5E5E5); background:var(--ac-bg, #fff); color:var(--ac-ink, #777); white-space:nowrap; letter-spacing:.04em;}
.g-artcat.c-mgmt{--ac-bg:#FFF6D8; --ac-edge:#FFC800; --ac-ink:#A97E00;}
.g-artcat.c-proc{--ac-bg:#EAFCD2; --ac-edge:#BFE889; --ac-ink:#3E8F00;}
.g-artcat.c-ai{--ac-bg:#F6EBFF; --ac-edge:#E0BAFF; --ac-ink:#9C4DD3;}
.g-artcat.c-logi{--ac-bg:#E3F5FE; --ac-edge:#9BDCF9; --ac-ink:#0E8FCC;}
.g-artcat.c-fin{--ac-bg:#FFEFD9; --ac-edge:#FFCE8F; --ac-ink:#C46F00;}

/* カテゴリフィルタチップ（アーカイブ上部） */
.g-artfil{display:inline-flex; align-items:center; border-radius:999px; padding:6px 15px; font-size:11.5px; font-weight:900; border:2px solid #E9DAA9; background:#FFFCF0; color:#8A6F35; text-decoration:none; box-shadow:0 3px 0 #E4D5A4; transition:transform .16s ease, box-shadow .16s ease;}
.g-artfil:hover{transform:translateY(-2px); box-shadow:0 5px 0 #E4D5A4;}
.g-artfil:active{transform:translateY(1px); box-shadow:0 1px 0 #E4D5A4;}
.g-artfil.on{background:var(--g-green, #58CC02); border-color:var(--g-green-dark, #3E8F00); color:#fff; box-shadow:0 3px 0 var(--g-green-dark, #3E8F00);}

/* 記事ページ: 紙面がふわっと開く入場（transform/opacityのみ） */
@keyframes gPaperOpen{
  0%{opacity:0; transform:translateY(16px) scale(.985) rotate(-.2deg);}
  100%{opacity:1; transform:translateY(0) scale(1) rotate(0deg);}
}
.g-art-paper{
  position:relative; max-width:760px;
  background:var(--g-parch, #FFFCF0); border:2px solid #E9DAA9;
  border-radius:8px 14px 8px 14px; box-shadow:0 5px 0 #E4D5A4, 0 18px 34px rgba(62,32,10,.10);
  padding:34px 38px 38px;
  animation:gPaperOpen .6s cubic-bezier(.16,1.25,.3,1) both;
}
@media (max-width:900px){ .g-art-paper{padding:24px 18px 26px;} }

/* 記事本文タイポグラフィ（読み物・行間1.9・見出しにギルド風の飾り） */
.g-article-body{font-size:13.5px; font-weight:700; color:#4A3B1E; line-height:1.9; margin-top:18px;}
.g-article-body p{margin:0 0 1.15em;}
.g-article-body h2{font-size:18px; font-weight:900; color:#3B2F14; line-height:1.55; margin:1.7em 0 .7em; padding-bottom:8px; border-bottom:2px solid #E9DAA9; position:relative;}
.g-article-body h2::after{content:''; position:absolute; left:0; bottom:-2px; width:64px; height:2px; background:var(--g-green, #58CC02); border-radius:2px;}
.g-article-body h3{font-size:15.5px; font-weight:900; color:#4A3B1E; line-height:1.55; margin:1.5em 0 .55em; padding-left:14px; position:relative;}
.g-article-body h3::before{content:''; position:absolute; left:0; top:.42em; width:6px; height:15px; background:var(--g-green, #58CC02); border-radius:3px; box-shadow:0 2px 0 var(--g-green-dark, #3E8F00);}
.g-article-body h4{font-size:14px; font-weight:900; color:#6B5B34; margin:1.3em 0 .45em;}
.g-article-body h4::before{content:'❖ '; color:#C9A94E; font-size:.9em;}
.g-article-body ul,.g-article-body ol{margin:0 0 1.15em; padding-left:1.55em;}
.g-article-body li{margin:.3em 0;}
.g-article-body ul li::marker{color:var(--g-green-dark, #3E8F00);}
.g-article-body ol li::marker{color:#B98A00; font-weight:900;}
.g-article-body strong{color:#3B2F14; font-weight:900; background:linear-gradient(transparent 62%, #FFE9A8 62%);}
.g-article-body hr{border:none; border-top:2px dashed #E4D5A4; margin:1.8em 0;}
.g-article-body a{color:#0E8FCC; font-weight:900; text-decoration:underline; text-underline-offset:2px;}
.g-article-body a:hover{color:#1CB0F6;}

/* 前後の記事ナビ */
.g-art-nav{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap;}
.g-art-nav a{flex:1; min-width:min(240px, 100%); display:block; text-decoration:none; background:#FFFCF0; border:2px solid #E9DAA9; border-radius:12px; box-shadow:0 3px 0 #E4D5A4; padding:11px 15px; transition:transform .18s ease, box-shadow .18s ease;}
.g-art-nav a:hover{transform:translateY(-3px); box-shadow:0 6px 0 #E4D5A4;}
.g-art-nav .lab{font-size:9.5px; font-weight:900; letter-spacing:.18em; color:#B49B5E;}
.g-art-nav .ttl{font-size:12.5px; font-weight:900; color:#4A3B1E; margin-top:3px; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

/* ホームの週報リスト（最新5件・ホバー反応） */
.g-wk-item{display:flex; align-items:center; gap:10px; padding:10px 8px; border-bottom:2px solid var(--g-line-soft, #F0F0F0); text-decoration:none; color:inherit; border-radius:10px; transition:transform .16s ease, background .16s ease;}
.g-wk-item:last-of-type{border-bottom:none;}
.g-wk-item:hover{transform:translateX(4px); background:#FFFDF4;}
.g-wk-title{flex:1; min-width:0; font-size:12.5px; font-weight:900; color:#3B3B3B; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.g-wk-meta{font-size:10px; font-weight:900; color:var(--g-ink-faint, #AFAFAF); white-space:nowrap;}
.g-wk-arrow{font-weight:900; color:#C9A94E; transition:transform .16s ease;}
.g-wk-item:hover .g-wk-arrow{transform:translateX(3px);}