:root{
  --paper:#F7F6F2; --ink:#1B1B19; --ink2:#55534E; --faint:#8E8B84;
  --rule:#1B1B19; --hair:#DCD9D2; --leaf:#4E9A3E; --band:#1B1B19;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Noto Sans KR',-apple-system,'Apple SD Gothic Neo',sans-serif;
  font-weight:400;line-height:1.85;-webkit-font-smoothing:antialiased;}
.page{max-width:680px;margin:0 auto;padding:34px 22px 60px;}
@media(min-width:640px){.page{padding:54px 30px 80px}}

/* ---- editorial primitives ---- */
.kicker{font-family:'Inter','Noto Sans KR',sans-serif;font-weight:300;font-size:11px;
  letter-spacing:.42em;text-transform:uppercase;color:var(--ink2);text-align:center;}
.rule{border:none;border-top:1px solid var(--rule);margin:0;}
.hair{border:none;border-top:1px solid var(--hair);margin:0;}
.sechead{margin:64px 0 22px;}
.sechead .lbl{font-family:'Inter',sans-serif;font-weight:300;font-size:11px;
  letter-spacing:.5em;text-transform:uppercase;color:var(--ink);}
.sechead .num{font-family:'Noto Serif KR',serif;font-weight:600;font-size:54px;line-height:1;
  margin:6px 0 0;letter-spacing:.02em;}
.sechead .cross{font-family:'Inter',sans-serif;font-weight:300;font-size:12.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink2);margin-top:8px;}
.sechead .bar{width:34px;border-top:2px solid var(--ink);margin-bottom:10px;}
h3.head{font-family:'Noto Serif KR',serif;font-weight:900;font-size:21px;line-height:1.55;
  letter-spacing:-.01em;margin:10px 0 12px;}
p{margin:.7em 0;font-size:14.5px;color:var(--ink);}
p.cap{font-size:12.5px;color:var(--ink2);line-height:1.9;}
.mark{background:var(--band);color:var(--paper);padding:1px 7px;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.gr{color:var(--leaf);font-weight:700;}

/* ---- masthead ---- */
.masthead{text-align:center;}
.masthead .title{font-family:'Noto Serif KR',serif;font-weight:900;font-size:40px;
  letter-spacing:.01em;margin:14px 0 2px;line-height:1.2;}
.masthead .sub{font-size:13px;color:var(--ink2);letter-spacing:.06em;}
.hero{display:flex;align-items:center;justify-content:center;gap:26px;margin:30px 0 6px;}
.hero img{width:min(46vw,240px);height:auto;}
.vquote{writing-mode:vertical-lr;font-family:'Noto Serif KR',serif;font-weight:900;
  font-size:17px;line-height:2.1;letter-spacing:.06em;}
.vquote span{display:block;background:var(--band);color:var(--paper);padding:8px 2px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.vquote span+span{margin-left:10px;}
.byline{text-align:center;font-family:'Inter',sans-serif;font-weight:300;font-size:11px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin-top:14px;}

/* ---- point boxes ---- */
.point{border:1px solid var(--ink);padding:12px 14px 10px;font-size:12.5px;line-height:1.75;color:var(--ink);}
.point .pl{font-family:'Inter',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.22em;
  display:block;margin-bottom:4px;}
.point .pl::before{content:"»";margin-right:6px;}
.points{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px;}
@media(min-width:560px){.points{grid-template-columns:1fr 1fr;}}

/* ---- passive list ---- */
.passive{margin:16px 0 0;padding:0;list-style:none;}
.passive li{font-size:13.5px;padding:9px 0;border-top:1px solid var(--hair);}
.passive li:first-child{border-top:1px solid var(--rule);}
.passive b{font-family:'Noto Serif KR',serif;font-weight:900;margin-right:6px;}

/* ---- timeline ---- */
.tl{margin:0;padding:0;list-style:none;}
.tl li{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:11px 0;border-top:1px solid var(--hair);font-size:13.5px;}
.tl li:first-child{border-top:1px solid var(--rule);}
.tl .yr{font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;color:var(--ink2);padding-top:3px;}
.tl b{font-weight:700;}
.tl .sub{display:block;color:var(--ink2);font-size:12.5px;line-height:1.7;}

/* ---- credits (stack) ---- */
.credits{font-size:12.5px;color:var(--ink2);line-height:2.05;}
.credits b{color:var(--ink);font-weight:700;}
.credits i{font-style:normal;color:var(--hair);margin:0 7px;}

/* ---- projects ---- */
.pj{padding:16px 0 6px;border-top:1px solid var(--hair);}
.pj:first-of-type{border-top:1px solid var(--rule);}
.pj h4{font-family:'Noto Serif KR',serif;font-weight:900;font-size:16.5px;margin:0 0 2px;}
.pj .meta{font-family:'Inter','Noto Sans KR',sans-serif;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px;}
.pj p{font-size:13.5px;color:var(--ink2);margin:.3em 0;}

/* ---- contact ---- */
.cta{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:26px;}
.cta img{width:min(34vw,170px);height:auto;transform:scaleX(-1);}
.cta .links{flex:1;}
.cta a{display:block;text-decoration:none;color:var(--ink);font-size:14px;font-weight:700;
  padding:11px 2px;border-top:1px solid var(--rule);}
.cta a small{font-family:'Inter',sans-serif;font-weight:300;font-size:10px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--faint);display:block;}
.cta a:last-child{border-bottom:1px solid var(--rule);}
.pagefoot{display:flex;justify-content:space-between;align-items:center;margin-top:56px;
  font-family:'Inter',sans-serif;font-weight:300;font-size:11px;letter-spacing:.18em;color:var(--faint);}

/* ---- details link / back ---- */
.details-btn{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--ink);
  margin-top:64px;padding:22px 20px;transition:background .15s,color .15s;}
.details-btn:hover{background:var(--ink);color:var(--paper);}
.details-btn .lbl{font-family:'Inter',sans-serif;font-weight:300;font-size:10.5px;
  letter-spacing:.5em;text-transform:uppercase;display:block;}
.details-btn .big{font-family:'Noto Serif KR',serif;font-weight:900;font-size:30px;
  letter-spacing:.04em;display:block;margin:2px 0;}
.details-btn .sub{font-size:12px;color:inherit;opacity:.65;}
.backlink{font-family:'Inter','Noto Sans KR',sans-serif;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;color:var(--ink2);display:inline-block;margin-bottom:8px;}
.backlink:hover{color:var(--ink);}

/* ---- special appendix (inventory) ---- */
.inv{margin-top:64px;border-top:3px double var(--ink);padding-top:16px;}
.inv .lbl{font-family:'Inter',sans-serif;font-weight:300;font-size:11px;
  letter-spacing:.5em;text-transform:uppercase;color:var(--ink2);}
.inv .ttl{font-family:'Noto Serif KR',serif;font-weight:900;font-size:21px;margin:4px 0 0;}
.inv .note{font-size:12px;color:var(--faint);}
.inv .point{border-style:dashed;}

/* ---- gacha overlay ---- */
html.g-lock{overflow:hidden}
.gacha{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(120% 90% at 50% 32%, #1E4A33 0%, #0C2417 60%, #071710 100%);
  cursor:pointer;transition:opacity .55s ease;}
.gacha.closing{opacity:0;pointer-events:none;}
.g-stage{position:relative;display:flex;flex-direction:column;align-items:center;perspective:1100px;}
.g-glow{position:absolute;top:42%;left:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle, rgba(255,233,168,.32) 0%, rgba(255,233,168,0) 62%);animation:gpulse 2.6s ease-in-out infinite;}
.g-wrap{position:relative;border-radius:13px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.6);
  animation:gfloat 3.2s ease-in-out infinite;}
.g-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.38) 48%, transparent 62%);
  background-size:260% 100%;animation:gsheen 3s ease-in-out infinite;}
.g-card{display:block;width:min(70vw,300px);height:auto;}
.g-wrap.out{animation:gout .9s cubic-bezier(.55,-.15,.65,1) forwards;}
.g-name{margin-top:18px;color:#FFE9A8;font-family:'Noto Serif KR',serif;font-weight:900;font-size:15px;
  letter-spacing:.14em;text-align:center;}
.g-name small{display:block;font-family:'Inter',sans-serif;font-weight:300;font-size:10px;
  letter-spacing:.55em;color:rgba(255,249,238,.55);margin-bottom:5px;}
.g-tap{color:rgba(255,249,238,.78);font-family:'Inter',sans-serif;font-weight:300;font-size:11px;
  letter-spacing:.5em;margin-top:16px;animation:gpulse 1.8s ease-in-out infinite;}
.g-skip{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);background:none;border:none;
  color:rgba(255,249,238,.45);font-family:'Noto Sans KR',sans-serif;font-size:11.5px;letter-spacing:.2em;cursor:pointer;}
.g-skip:hover{color:rgba(255,249,238,.85);}
.g-p{position:absolute;top:42%;left:50%;pointer-events:none;font-size:var(--s);color:var(--c);
  animation:gfly var(--d) ease-out forwards;text-shadow:0 0 12px currentColor;}
.g-flash{position:absolute;top:42%;left:50%;width:40px;height:40px;border-radius:50%;pointer-events:none;
  background:#FFF7DC;animation:gflash .55s ease-out forwards;}
@keyframes gfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes gpulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes gsheen{0%{background-position:130% 0}55%{background-position:-130% 0}100%{background-position:-130% 0}}
@keyframes gout{0%{transform:translateY(0) rotateY(0) scale(1);opacity:1}
  45%{transform:translateY(-34px) rotateY(360deg) scale(1.07);opacity:1}
  100%{transform:translateY(-150px) rotateY(720deg) scale(.28);opacity:0}}
@keyframes gfly{from{transform:translate(-50%,-50%) scale(.35) rotate(0);opacity:1}
  to{transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.2) rotate(var(--r));opacity:0}}
@keyframes gflash{from{transform:translate(-50%,-50%) scale(.5);opacity:1;box-shadow:0 0 0 0 rgba(255,247,220,.95)}
  to{transform:translate(-50%,-50%) scale(2.6);opacity:0;box-shadow:0 0 130px 100px rgba(255,247,220,0)}}
@media(prefers-reduced-motion:reduce){
  .g-wrap,.g-glow,.g-tap,.g-wrap::after{animation:none!important}
}

/* ---- rarity theming ---- */
.gacha[data-r="R"]{--rc:#E8E4D8;--rg:rgba(232,228,216,.30);--rayop:0;}
.gacha[data-r="SR"]{--rc:#C9A7E4;--rg:rgba(201,167,228,.45);--rayop:.4;}
.gacha[data-r="SSR"]{--rc:#FFD966;--rg:rgba(255,217,102,.5);--rayop:.65;}
.gacha[data-r="UR"]{--rc:#8FE3FF;--rg:rgba(160,225,255,.5);--rayop:.9;}
.g-glow{background:radial-gradient(circle, var(--rg) 0%, rgba(0,0,0,0) 62%);}
.g-wrap{box-shadow:0 26px 70px rgba(0,0,0,.6), 0 0 34px var(--rg);}
.g-rays{position:absolute;top:42%;left:50%;width:220%;aspect-ratio:1;pointer-events:none;opacity:var(--rayop);
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.14) 0deg 7deg, transparent 7deg 26deg);
  -webkit-mask-image:radial-gradient(circle, #000 0%, transparent 64%);
  mask-image:radial-gradient(circle, #000 0%, transparent 64%);
  animation:spinrays 16s linear infinite;}
@keyframes spinrays{to{transform:translate(-50%,-50%) rotate(360deg)}}
.g-badge{font-family:'Noto Serif KR',serif;font-weight:900;font-size:38px;letter-spacing:.22em;line-height:1;
  margin-bottom:16px;background:linear-gradient(180deg,#FFFFFF 15%, var(--rc) 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px var(--rg));animation:gpulse 2.2s ease-in-out infinite;}
.gacha[data-r="UR"] .g-badge{
  background:linear-gradient(90deg,#FF9AA2,#FFD966,#A9E0B4,#8FE3FF,#C9A7E4,#FF9AA2);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  animation:urflow 2.6s linear infinite;}
@keyframes urflow{to{background-position:300% 0}}
.gacha[data-r="UR"] .g-wrap::after{
  background:linear-gradient(115deg, transparent 26%, rgba(255,180,220,.35) 40%, rgba(180,240,255,.4) 50%, rgba(255,240,170,.35) 60%, transparent 74%);
  background-size:260% 100%;}
.g-name{color:var(--rc);}
.g-ring{position:absolute;top:42%;left:50%;width:70px;height:70px;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);border:3px solid var(--rc);
  animation:gring .75s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes gring{from{width:70px;height:70px;opacity:.95;border-width:6px}
  to{width:620px;height:620px;opacity:0;border-width:1px}}
.g-p.streak{font-size:0;width:3px;height:var(--s);background:var(--c);border-radius:2px;
  box-shadow:0 0 10px var(--c);transform-origin:center;}

/* ---- Korean typography ---- */
body{word-break:keep-all;overflow-wrap:break-word;}
h3.head,.masthead .sub,.g-name{text-wrap:balance;}

.ci{white-space:nowrap;}

/* ---- contact easter egg ---- */
.cta{position:relative;}
.cta img{cursor:pointer;}
.kong-bubble{position:absolute;left:8px;bottom:calc(100% + 10px);max-width:240px;
  background:#fff;border:1.5px solid var(--ink);border-radius:12px;padding:8px 13px;
  font-size:13px;font-weight:700;color:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.12);
  animation:bubpop .25s ease-out;z-index:5;}
.kong-bubble::after{content:"";position:absolute;left:34px;bottom:-8px;
  border:8px solid transparent;border-top-color:var(--ink);border-bottom:none;}
@keyframes bubpop{from{transform:translateY(6px) scale(.9);opacity:0}to{transform:none;opacity:1}}
.wobble{animation:wob .5s ease-in-out;}
@keyframes wob{0%,100%{transform:scaleX(-1) rotate(0)}25%{transform:scaleX(-1) rotate(-4deg)}
  50%{transform:scaleX(-1) rotate(3deg)}75%{transform:scaleX(-1) rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){.wobble{animation:none}.kong-bubble{animation:none}}

/* ---- mobile tap affordance ---- */
#kong8{animation:kongbob 3.2s ease-in-out infinite;}
#kong8:active{transform:scaleX(-1) scale(.94);}
@keyframes kongbob{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-5px)}}
@media(prefers-reduced-motion:reduce){#kong8{animation:none}}

/* ---- persistent hint bubble ---- */
.kong-hint{position:absolute;left:26px;bottom:calc(100% + 8px);background:#fff;
  border:1.5px solid var(--ink);border-radius:11px;padding:4px 11px;font-size:12px;
  font-weight:700;color:var(--ink2);animation:hintpulse 2s ease-in-out infinite;z-index:4;cursor:pointer;}
.kong-hint::after{content:"";position:absolute;left:26px;bottom:-7px;
  border:7px solid transparent;border-top-color:var(--ink);border-bottom:none;}
@keyframes hintpulse{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
@media(prefers-reduced-motion:reduce){.kong-hint{animation:none}}

/* ---- byline responsive ---- */
@media(max-width:480px){
  .byline{font-size:10px;letter-spacing:.15em;white-space:nowrap;}
}