/* css/eggs.css | 이스터에그(메모 쪽지·심장 박동) 전용 모양 (26.10.01 site.css 에서 떼어 냄, tools/css_split.py)
   site.css 뒤에 불러오며 site.css 의 색·글꼴 변수를 그대로 쓴다. 규칙 순서는 원래 순서 그대로 */
.hm{position:fixed;inset:0;z-index:78;display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.hm.on{opacity:1;visibility:visible}
.hm-bg{position:absolute;inset:0;background:rgba(20,18,16,.72)}
.hm-in{position:relative;width:100%;max-width:330px;padding:30px 26px 24px;border-radius:12px;overflow:hidden;text-align:center;
  background:radial-gradient(120% 80% at 50% 0%,#2b2723 0%,#1b1917 60%,#151312 100%);
  box-shadow:0 24px 56px rgba(0,0,0,.5);transform:translateY(14px);transition:transform .34s var(--ease)}
.hm.on .hm-in{transform:none}
.hm-in::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 18%,rgba(255,255,255,.07) 46%,transparent 70%);pointer-events:none}
.hm-x{position:absolute;right:8px;top:8px;width:40px;height:40px;display:grid;place-items:center;color:rgba(243,228,216,.55)}
.hm-x svg{width:18px;height:18px}
.hm-lb{position:relative;font-size:10px;font-weight:700;letter-spacing:.22em;
  background:linear-gradient(92deg,#cfc6b6,#f2ece0 45%,#bfb5a3);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-tx{position:relative;margin-top:14px;font-family:var(--serif);font-size:19px;line-height:1.55;letter-spacing:-.02em;font-weight:700;
  background:linear-gradient(92deg,#cfc6b6,#f2ece0 45%,#bfb5a3);-webkit-background-clip:text;background-clip:text;color:transparent}
.hm-img{position:relative;display:block;margin:16px auto 0;max-width:150px;height:auto;border-radius:6px;box-shadow:0 10px 28px rgba(0,0,0,.45)}
.hm-img.wide{max-width:min(240px,100%);border-radius:4px}
.hm-img[hidden]{display:none}   /* 26.10.15 그림 없는 쪽지에서 빈 그림 틀(그림자 상자)이 뜨던 것: 위 display:block 이 hidden 을 덮고 있었음 */
.hm-tx{text-wrap:balance;word-break:keep-all}
.hm-sub{position:relative;margin-top:12px;font-size:12px;line-height:1.7;color:rgba(243,228,216,.55)}
.hm-go{position:relative;display:inline-block;margin-top:14px;padding:8px 0;font-size:12.5px;font-weight:600;color:rgba(243,228,216,.85);text-decoration:underline;text-decoration-color:rgba(243,228,216,.38);text-underline-offset:5px}
.hm-go[hidden]{display:none}
.beat{position:fixed;inset:0;z-index:76;pointer-events:none;opacity:0;
  background:radial-gradient(112% 88% at 50% 50%,rgba(145,10,11,0) 18%,rgba(145,10,11,calc(var(--bt-a,.2) * .55)) 58%,rgba(145,10,11,var(--bt-a,.2)) 100%)}
.beat.on{animation:hbBeat var(--bt-d,1.05s) cubic-bezier(.3,.7,.3,1) 1}
@media (prefers-reduced-motion:reduce) and (max-width:0px){
.beat.on{animation-duration:1.5s!important;animation-name:hbBeatSoft!important}
.hm-in{transform:none}
}
html[data-mode="after"] .hm.hand .hm-tx, html[data-mode="after"] .hm.hand .hm-sub{font-family:'Sea Breeze',var(--serif)}
html[data-mode="after"] .hm.hand .hm-tx{font-size:26px}
.hm{bottom:auto;height:100vh;height:100lvh}
.hm-tx.ml .ln{display:block;word-break:keep-all;text-wrap:balance}
@keyframes hbBeatSoft{0%{opacity:0}18%{opacity:.62}34%{opacity:.12}54%{opacity:1}72%{opacity:.08}100%{opacity:0}}
@keyframes hbBeat{
  0%{opacity:0}
  7%{opacity:.5}          /* 두 */
  17%{opacity:.05}
  28%{opacity:1}          /* 근 */
  44%{opacity:.03}
  100%{opacity:0}
}

/* 26.10.01 ‘다뤄낸’ 지지직(밝은 서점). 26.10.02: inline-block 이면 일부 휴대폰 브라우저에서 뒤 띄어쓰기가 사라져(‘다뤄낸자비선의’) 글줄 그대로(inline) 두고 상대 위치·그림자로 흔든다 */
.dw{position:relative;display:inline}
.dw.g{animation:dwJ .34s steps(1,end)}
@keyframes dwJ{0%{left:0;top:0;text-shadow:none;opacity:1}14%{left:-2px;text-shadow:2px 0 rgba(179,38,46,.6),-2px 0 rgba(40,80,160,.4);opacity:.85}30%{left:2px;top:1px;text-shadow:-2px 0 rgba(179,38,46,.55);opacity:.55}46%{left:-1px;top:-1px;text-shadow:1px 0 rgba(40,80,160,.5);opacity:1}62%{left:1px;top:0;text-shadow:-1px 0 rgba(179,38,46,.5);opacity:.7}80%{left:0;text-shadow:none;opacity:1}100%{left:0;top:0;text-shadow:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.dw.g{animation-duration:.2s}}

/* 26.10.04 검색 화면 연출: 따스한 십자가 빛. 6초에 걸쳐 번졌다 사라진다. 검색 화면 위, 쪽지 창 아래 */
#fx-cross{position:fixed;inset:0;z-index:77;pointer-events:none;opacity:0;animation:fxCrossIn 6s ease forwards;
  background:radial-gradient(ellipse 85% 60% at 50% 36%,rgba(255,220,160,.16),rgba(60,38,16,.34) 72%,rgba(40,26,12,.42))}
#fx-cross span{position:absolute;left:50%;top:15vh;width:0;height:46vh;animation:fxCrossBreath 6s ease-in-out forwards}
#fx-cross i,#fx-cross b{position:absolute;display:block;border-radius:8px;background:linear-gradient(#fff6de,#ffe2ae);filter:blur(5.5px);opacity:.84;
  box-shadow:0 0 34px 14px rgba(255,216,150,.55),0 0 96px 44px rgba(255,186,104,.26)}
#fx-cross i{left:-5px;top:0;width:10px;height:100%}
#fx-cross b{left:-13vh;top:28%;width:26vh;height:10px}
@keyframes fxCrossIn{0%{opacity:0}26%{opacity:1}68%{opacity:1}100%{opacity:0}}
@keyframes fxCrossBreath{0%{transform:scale(.94);filter:brightness(.8)}30%{transform:scale(1);filter:brightness(1)}55%{transform:scale(1.015);filter:brightness(1.12)}100%{transform:scale(1.03);filter:brightness(.9)}}

/* ───── 10월 29일 기억과 애도(26.10.06 작가): 추모 창. 짙은 보랏빛 밤하늘, 작고 옅은 별, 글 세 줄. 움직임은 천천히 떠오르는 것뿐 ───── */
.mm{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px;height:100vh;height:100lvh;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s}
.mm.on{opacity:1;visibility:visible;transition:opacity .9s ease}
.mm-bg{position:absolute;inset:0;background:rgba(18,12,28,.62)}
.mm-in{position:relative;width:min(336px,100%);height:440px;border-radius:14px;overflow:hidden;color:#efe9f6;text-align:center;background:radial-gradient(130% 100% at 50% 0,#2e2450,#1a1430 72%)}
.mm-in:focus{outline:none}
.mm-st{position:absolute;inset:0;width:100%;height:100%;fill:#efe9ff}
.mm-st .g{fill:#d9c9ff;opacity:.35;filter:blur(2.2px)}
.mm-tx{position:absolute;left:0;right:0;top:232px}
.mm-tx b{display:block;font-family:var(--serif);font-weight:600;font-size:28px;letter-spacing:.04em;color:#efe9f6}
.mm-tx i{display:block;margin-top:12px;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:21px;color:#b9a6d8}
.mm-tx em{display:block;margin-top:20px;font-style:normal;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:16px;color:#8f80ad;letter-spacing:.14em}
.mm-x{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:8px 18px;font-size:13.5px;color:rgba(239,233,246,.6);background:none;border:0;cursor:pointer}
@media (prefers-reduced-motion:reduce){.mm,.mm.on{transition:none}}
.pk-line .ic-btn.pk-ic{background:#24120f;display:grid;place-items:center}
.pk-eye{position:relative;display:inline-block;line-height:0}
.pk-eye svg+svg{position:absolute;left:0;top:0;opacity:0;animation:pkBlink 3.7s steps(1) infinite}
@keyframes pkBlink{0%,92%{opacity:0}93%,96%{opacity:1}97%,100%{opacity:0}}
.pk-line .pk-eye{animation:pkBob 1.05s steps(2) infinite}
@keyframes pkBob{0%{transform:translateY(0)}50%{transform:translateY(-1px)}}
.pk-line.pk-new{animation:pkIn .45s steps(4) both}
@keyframes pkIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.pk-flat .pk-fl{display:block;width:24px;height:2px;background:#c8302a;box-shadow:0 0 6px rgba(200,48,42,.55)}
.pk-yes{color:#c8302a;font-weight:600}
.pk-peek,.pk-walk{position:fixed;bottom:0;z-index:80;display:block;line-height:0;text-decoration:none;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.pk-peek{transform:translateY(110%);animation:pkPeek 4s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes pkPeek{0%{transform:translateY(110%)}14%{transform:translateY(6%)}20%{transform:translateY(14%)}26%,58%{transform:translateY(10%)}62%{transform:translate(6px,10%)}66%{transform:translate(-5px,10%)}72%{transform:translate(0,10%)}100%{transform:translate(120vw,10%)}}
.pk-bub{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);white-space:nowrap;padding:5px 9px 6px;background:#fbf4ec;color:#2a1416;font:600 13px/1.2 'Pretendard Variable',sans-serif;border:2px solid #2a1416;border-radius:2px;opacity:0;animation:pkBub 4s steps(1) forwards}
.pk-bub::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#2a1416}
@keyframes pkBub{0%,22%{opacity:0}23%,66%{opacity:1}67%,100%{opacity:0}}
.pk-walk{left:0;bottom:6px;animation:pkWalk 9.6s linear forwards}
@media (max-width:767px){.pk-walk{bottom:calc(var(--nav-h,0px) + 8px + env(safe-area-inset-bottom,0px))}}   /* 26.10.15 휴대폰: 아래 메뉴 아이콘 위가 아니라 메뉴 바로 위를 걸어감 */
.pk-walk .pk-eye{animation:pkHop .34s steps(2) infinite}
@keyframes pkWalk{0%{transform:translateX(-90px)}40%{transform:translateX(44vw)}54%{transform:translateX(44vw)}100%{transform:translateX(calc(100vw + 90px))}}
@keyframes pkHop{0%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.pk-walk .pk-bub{animation:pkBubW 9.6s steps(1) forwards}
@keyframes pkBubW{0%,40%{opacity:0}41%,54%{opacity:1}55%,100%{opacity:0}}
.ov.pk-thump{animation:pkThump .98s ease-out}
@keyframes pkThump{0%{transform:none}8%{transform:scale(1.012)}18%{transform:none}30%{transform:scale(1.022)}46%,100%{transform:none}}
/* 26.10.15 밤 작가: 영상 창(꿈 테이프, 10.16 영상). 테두리 없이, 휴대폰은 화면 가득, 닫기는 옅게 */
.hb-tvp{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:#000;animation:hbTvpIn .28s ease-out;-webkit-tap-highlight-color:transparent}
@keyframes hbTvpIn{from{opacity:0}to{opacity:1}}
.hb-tvp .in{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.hb-tvp video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.hb-tvp video::-webkit-media-controls,.hb-tvp video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
@media (min-width:768px){.hb-tvp{background:rgba(4,3,3,.94)}.hb-tvp .in{width:auto;height:auto}.hb-tvp video{width:auto;height:auto;max-width:92vw;max-height:92vh}}
.hb-tvp .x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 6px);right:calc(env(safe-area-inset-right,0px) + 6px);width:44px;height:44px;border:0;padding:0;background:none;cursor:pointer;opacity:.38;transition:opacity .2s}
.hb-tvp .x::before,.hb-tvp .x::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:1.5px;background:#efe6d6;transform:translate(-50%,-50%) rotate(45deg)}
.hb-tvp .x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.hb-tvp .x:hover,.hb-tvp .x:focus-visible{opacity:.85}
.hb-tvp .pl{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:1px solid rgba(239,230,214,.5);border-radius:50%;background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s}
.hb-tvp .pl i{position:absolute;left:26px;top:21px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent rgba(239,230,214,.8)}
.hb-tvp.wait .pl,.hb-tvp.paused .pl{opacity:1}
.hb-tvp .end{position:absolute;left:0;right:0;bottom:22%;display:flex;justify-content:center;gap:10px;padding:0 20px;animation:hbTvpIn .6s ease-out}
.hb-tvp .end[hidden]{display:none}
@media (min-width:768px){.hb-tvp .end{bottom:14%}}
.hb-tvp .end a{flex:0 1 150px;padding:13px 0 14px;text-align:center;color:#efe9de;font:600 15px/1 'Pretendard Variable',sans-serif;text-decoration:none;border:1px solid rgba(239,233,222,.32);border-radius:2px;background:rgba(239,233,222,.04);transition:border-color .2s,background .2s}
.hb-tvp .end a:hover,.hb-tvp .end a:focus-visible{background:rgba(239,233,222,.1);border-color:rgba(239,233,222,.75)}
.hb-tvp .sk{position:absolute;right:calc(env(safe-area-inset-right,0px) + 8px);bottom:calc(env(safe-area-inset-bottom,0px) + 10px);display:flex;align-items:center;gap:1px;width:48px;height:44px;justify-content:center;border:0;padding:0;background:none;cursor:pointer;opacity:.38;transition:opacity .2s}
.hb-tvp .sk i{width:0;height:0;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent #efe6d6}
.hb-tvp .sk:hover,.hb-tvp .sk:focus-visible{opacity:.85}
.hb-tvp.done .sk{display:none}
/* 26.10.16 작가: 주머니 심장 화면 푸터 위 흰 띠 → 어두운 바탕을 푸터까지 */
body[data-page="pocket"] main#main,main#main:has(> main.pk){background:#0a0908;padding-bottom:0;margin-bottom:0}
body[data-page="pocket"] .ftr,main#main:has(> main.pk)+.ftr{margin-top:0}
main#main>main.pk{margin-top:0;margin-bottom:0}   /* 26.10.16 작가: 헤더 밑 흰 띠. main.pk 의 위 여백 14px 이 바깥으로 새어 나가 .app 바탕이 보였음 */
/* 26.10.17 작가: 작은 심장 제멋대로. 등장 방식마다 움직임이 다름(site.js HB.pkCameo) */
.pk-walk.pk-edge,.pk-walk.pk-sit,.pk-walk.pk-doze{animation:none}
.pk-walk.pk-edge{bottom:auto;transition:transform .22s cubic-bezier(.5,0,.8,.4)}
.pk-walk.pk-edge.l{left:0;transform:translateX(-100%);animation:pkEdgeL 13s cubic-bezier(.3,.7,.2,1) forwards}
.pk-walk.pk-edge.r{left:auto;right:0;transform:translateX(100%);animation:pkEdgeR 13s cubic-bezier(.3,.7,.2,1) forwards}
.pk-walk.pk-edge.again.l{animation-duration:7s}.pk-walk.pk-edge.again.r{animation-duration:7s}
.pk-walk.pk-edge.hide{animation:none!important}.pk-walk.pk-edge.hide.l{transform:translateX(-110%)}.pk-walk.pk-edge.hide.r{transform:translateX(110%)}
@keyframes pkEdgeL{0%{transform:translateX(-100%)}9%{transform:translateX(-38%)}12%{transform:translateX(-46%)}15%,62%{transform:translateX(-42%) rotate(8deg)}66%{transform:translateX(-36%) rotate(8deg)}70%,86%{transform:translateX(-42%) rotate(8deg)}94%,100%{transform:translateX(-100%)}}
@keyframes pkEdgeR{0%{transform:translateX(100%)}9%{transform:translateX(38%)}12%{transform:translateX(46%)}15%,62%{transform:translateX(42%) rotate(-8deg)}66%{transform:translateX(36%) rotate(-8deg)}70%,86%{transform:translateX(42%) rotate(-8deg)}94%,100%{transform:translateX(100%)}}
.pk-walk.pk-edge .pk-bub{bottom:auto;top:50%;transform:translateY(-50%);animation:pkBubE 13s steps(1) forwards}
.pk-walk.pk-edge.again .pk-bub{animation-duration:7s}
.pk-walk.pk-edge.l .pk-bub{left:calc(100% + 6px)}.pk-walk.pk-edge.r .pk-bub{left:auto;right:calc(100% + 6px)}
.pk-walk.pk-edge .pk-bub::after{top:50%;margin:-5px 0 0;border-top-color:transparent}
.pk-walk.pk-edge.l .pk-bub::after{left:auto;right:100%;border-right-color:#2a1416}
.pk-walk.pk-edge.r .pk-bub::after{left:100%;border-left-color:#2a1416}
@keyframes pkBubE{0%,14%{opacity:0}15%,70%{opacity:1}71%,100%{opacity:0}}
.pk-walk.pk-sit{left:0;top:0;bottom:auto;z-index:39}
.pk-walk.pk-logo{z-index:45}
.pk-walk.pk-sit .pk-eye{transform-origin:50% 100%;animation:pkSitIn .5s cubic-bezier(.3,1.6,.5,1) both,pkSway 1.3s ease-in-out .5s infinite alternate}
.pk-walk.pk-logo .pk-eye{animation:pkSitIn .5s cubic-bezier(.3,1.6,.5,1) both,pkLub .9s ease-out .5s infinite}
@keyframes pkSitIn{0%{transform:translateY(60%) scale(.4);opacity:0}100%{transform:none;opacity:1}}
@keyframes pkSway{0%{transform:rotate(-7deg)}100%{transform:rotate(7deg)}}
@keyframes pkLub{0%,100%{transform:scale(1)}12%{transform:scale(1.12,1.08)}24%{transform:scale(1)}34%{transform:scale(1.07,1.04)}46%{transform:scale(1)}}
.pk-walk.pk-sit .pk-bub{animation:pkBubS 11s steps(1) forwards}.pk-walk.pk-logo .pk-bub{animation-duration:9s}
@keyframes pkBubS{0%,8%{opacity:0}9%,60%{opacity:1}61%,100%{opacity:0}}
.pk-walk.pk-doze{left:0}
.pk-walk.pk-doze .pk-eye{transform-origin:50% 100%;animation:pkBreath 3.2s ease-in-out infinite}
@keyframes pkBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05,1.03)}}
.pk-walk.pk-doze .pk-bub{left:auto;right:-6px;transform:none;padding:3px 7px 4px;font-size:12px;letter-spacing:.06em;animation:pkZz 3.2s ease-in-out infinite}
.pk-walk.pk-doze .pk-bub::after{left:12px}
@keyframes pkZz{0%,100%{opacity:.35;transform:translateY(2px)}50%{opacity:1;transform:translateY(-3px)}}
.pk-walk.pk-doze.woke .pk-eye{animation:pkHop .34s steps(2) infinite}
.pk-walk.pk-doze.woke .pk-bub{animation:none;opacity:1}
.pk-eye.z svg{position:static;opacity:1;animation:none}
@media (prefers-reduced-motion:reduce){.pk-walk.pk-sit .pk-eye,.pk-walk.pk-doze .pk-eye,.pk-walk.pk-logo .pk-eye{animation:none}}
.pk-walk.pk-logo .pk-bub{bottom:auto;top:calc(100% + 8px)}.pk-walk.pk-logo .pk-bub::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#2a1416}