:root{
  --bg:#0a0a0b; --surf:#131316; --surf2:#18181c;
  --edge:rgba(244,243,240,.09); --edge2:rgba(244,243,240,.16);
  --ink:#f4f3f0; --ink2:#a8a7a3; --mute:#6f6e73;
  --wire:#7aa7ff; --wire-dim:rgba(122,167,255,.55);
  --ease:cubic-bezier(.2,.7,.2,1); --r:18px;
  --inset:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.015em;overflow-x:hidden}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;color:var(--mute);font-variant-numeric:tabular-nums}

/* 도면 시트: 화면 테두리와 모서리 표시, 상단 라벨 */
.sheet{position:fixed;inset:var(--inset);z-index:10;pointer-events:none;border:1px solid rgba(244,243,240,.13);border-radius:2px}
.sheet .tick{position:absolute;width:9px;height:9px}
.sheet .tick::before,.sheet .tick::after{content:"";position:absolute;background:rgba(244,243,240,.45)}
.sheet .tick::before{left:0;top:4px;width:9px;height:1px}
.sheet .tick::after{left:4px;top:0;width:1px;height:9px}
.tl{left:-5px;top:-5px}.tr{right:-5px;top:-5px}.bl{left:-5px;bottom:-5px}.br{right:-5px;bottom:-5px}
.s-l,.s-r{position:absolute;top:-1px;transform:translateY(-50%);background:var(--bg);padding:0 8px;line-height:1}
.s-l{left:14px}.s-r{right:14px;color:var(--wire)}

.page{position:relative;z-index:1;max-width:460px;margin:0 auto;padding:calc(var(--inset) + 46px) calc(var(--inset) + 14px) calc(var(--inset) + 26px)}

/* 프로필 */
.profile{display:flex;flex-direction:column;align-items:center;text-align:center;padding:4px 0 28px}
.avatar{position:relative;width:92px;height:92px;margin-bottom:18px}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;opacity:0;animation:dev 1s .5s var(--ease) forwards}
.ring{position:absolute;inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);transform:rotate(-90deg)}
.ring circle{fill:none;stroke:var(--wire);stroke-width:.7;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s var(--ease) forwards,ringout .8s 1.5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ringout{to{stroke:rgba(244,243,240,.18)}}
@keyframes dev{0%{opacity:0;filter:blur(6px) brightness(1.5)}50%{opacity:1}100%{opacity:1;filter:none}}
.profile h1{font-size:30px;font-weight:760;letter-spacing:-.045em;line-height:1}
.bio{margin-top:12px;font-size:15px;font-weight:500;color:var(--ink2);letter-spacing:-.01em}
.role{margin-top:10px;color:var(--wire)}
.profile h1,.bio,.role{opacity:0;transform:translateY(6px);animation:rise .7s var(--ease) forwards}
.profile h1{animation-delay:.65s}.bio{animation-delay:.78s}.role{animation-delay:.9s}
@keyframes rise{to{opacity:1;transform:none}}

/* 구역 제목: 라벨 - 선 - 개수 */
.sec{display:flex;align-items:center;gap:12px;padding:28px 2px 12px}
.sec .line{flex:1;height:1px;background:var(--edge)}

/* 카드. 상태: (없음) → s1 외곽선 → s2 내부 와이어·치수 → s3 채움 → s4 와이어 소멸. 되돌아가지 않는다 */
.card{position:relative;display:block;border-radius:var(--r);margin-bottom:12px;isolation:isolate;
  transition:transform .3s var(--ease)}
.card:active{transform:scale(.99)}
.card::before{content:"";position:absolute;inset:0;border-radius:var(--r);background:var(--surf);box-shadow:inset 0 0 0 1px var(--edge);opacity:0;transition:opacity .6s var(--ease),box-shadow .3s}
.card.s3::before{opacity:1}
.card.s4:hover::before{box-shadow:inset 0 0 0 1px var(--edge2)}
.wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:5;transition:opacity .5s}
.card.s4 .wire{opacity:0}
.wire *{fill:none;stroke:var(--wire);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.wire .o,.wire .i,.wire .d{stroke-dasharray:1;stroke-dashoffset:1}
.wire .o{transition:stroke-dashoffset .55s var(--ease)}
.wire .i{stroke:var(--wire-dim);transition:stroke-dashoffset .4s var(--ease) var(--dl,0s)}
.wire .d{stroke:var(--wire-dim);stroke-width:.8;transition:stroke-dashoffset .4s var(--ease) .25s}
.wire .c{stroke:var(--wire);opacity:0;transition:opacity .25s}
.wire text{fill:var(--wire);stroke:none;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:.08em;opacity:0;transition:opacity .3s .4s}
.card.s1 .wire .o,.card.s1 .wire .c{stroke-dashoffset:0;opacity:1}
.card.s2 .wire .i,.card.s2 .wire .d{stroke-dashoffset:0}
.card.s2 .wire text{opacity:1}
.card>*:not(.wire),.cap>*{opacity:0;transition:opacity .5s var(--ease)}
.card.s3>*:not(.wire),.card.s3 .cap>*{opacity:1}

/* 미디어 3:2 */
.media{position:relative;aspect-ratio:3/2;border-radius:var(--r) var(--r) 0 0;overflow:hidden;background:var(--surf2)}
.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:inset(0 0 100% 0);filter:grayscale(1) brightness(1.25) contrast(.9);
  transition:clip-path .75s var(--ease),filter .9s var(--ease) .3s,transform .6s var(--ease)!important}
.card.s3 .ph{clip-path:inset(0 0 0 0);filter:none}
.card.s4:hover .ph{transform:scale(1.03)}
/* 로고 카드: 종이 */
.media.paper{background:#efece5}
.media.paper .lg{position:absolute;left:50%;top:50%;height:62%;width:auto;transform:translate(-50%,-50%) scale(.96);
  transition:transform .8s var(--ease) .15s!important}
.card.s3 .media.paper .lg{transform:translate(-50%,-50%)}
/* 위스토어 카드 */
.card.app .media{background:linear-gradient(160deg,#182a55 0%,#0f1526 70%)}
.wlogo{position:absolute;left:20px;top:22px;height:26px;width:auto}
.phone{position:absolute;right:20px;bottom:-6px;width:44%;border-radius:16px 16px 0 0;overflow:hidden;
  box-shadow:0 0 0 4px #1e2230,0 -14px 44px rgba(0,0,0,.5);transform:translateY(14px);transition:transform .8s var(--ease) .1s!important}
.card.s3 .phone{transform:none}
.phone img{width:100%;display:block}

/* 캡션 줄 */
.cap{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding:14px 16px 15px 16px}
.idx{color:var(--wire);width:18px;flex:none}
.txt{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.name{font-size:16.5px;font-weight:650;letter-spacing:-.025em;line-height:1.2}
.sub{font-size:13px;color:var(--ink2);line-height:1.3}
.arr{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--edge2)}
.arr svg{width:11px;height:11px}
.arr path{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.card.s4:hover .arr{background:var(--ink)}.card.s4:hover .arr path{stroke:#0a0a0b}
/* 미디어 없는 줄 */
.card.row .cap{padding:12px 16px 12px 12px}
.ig{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.ig svg{width:25px;height:25px}
.ig rect,.ig circle{fill:none;stroke:#fff;stroke-width:1.9}
.ig .pt{fill:#fff;stroke:none}

/* 표제란 */
.title{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:30px;border:1px solid var(--edge);border-radius:6px;overflow:hidden;opacity:0;transition:opacity .8s}
.title.on{opacity:1}
.title div{padding:9px 11px;border-right:1px solid var(--edge);border-bottom:1px solid var(--edge);display:flex;flex-direction:column;gap:5px;min-width:0}
.title div:nth-child(3n){border-right:0}.title div:nth-child(n+4){border-bottom:0}
.title b{font-weight:400;font-size:8.5px;color:var(--mute)}
.title span{color:var(--ink2);font-size:10.5px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (min-width:700px){
  :root{--inset:16px}
  .page{padding-top:calc(var(--inset) + 64px);max-width:520px}
  .s-l{left:22px}.s-r{right:22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .avatar img,.profile h1,.bio,.role,.title{opacity:1;transform:none}
  .card::before{opacity:1}.card>*:not(.wire),.cap>*{opacity:1}
  .ph{clip-path:none;filter:none}.phone{transform:none}.wire{display:none}
}