/* PIXELNOTE main */
/* 픽셀 글꼴: 자주 쓰는 글자만 담은 가벼운 파일(97KB) 먼저, 없는 글자만 전체 파일(271KB)에서 */
@font-face{font-family:'DNFBitBitv2';src:url(../font/DNFBitBitv2-sub.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DNFBitBitv2Full';src:url(../font/DNFBitBitv2.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+AC00-D7A3}
:root{
  --ink:#1a1433; --night:#120e2a; --night2:#1d1846; --night3:#2a2260;
  --paper:#fff6dc; --paper2:#f3e5bd; --line:#e6d6a6;
  --yel:#ffd23f; --yel2:#d9a514; --pink:#ff5c8a; --mint:#3ee6c4; --blue:#7fa3ff; --grass:#5bd16a; --dirt:#7a4e25; --dirt2:#5e3a19;
  --tx:#f4f1ff; --tx2:#b9b3d6; --ink2:#4a4170;
  --pixel:'DNFBitBitv2','DNFBitBitv2Full','Pretendard Variable',sans-serif;
  --body:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --hd:84px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--night);color:var(--tx);font-family:var(--body);font-size:16px;line-height:1.7;word-break:keep-all;overflow-x:clip}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0;font-weight:inherit}
svg{display:block;width:100%;height:auto}
button{font:inherit;color:inherit}
em{font-style:normal}
/* 한글 줄바꿈: 어절 단위 + 줄 길이 균형 */
h1,h2,h3,.sec-lead,.hero-lead,.talk li,.pf-tit,.stat p{text-wrap:balance}
p,li,dd{text-wrap:pretty;overflow-wrap:break-word}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--yel);color:var(--ink);padding:8px 12px}
:focus-visible{outline:3px dashed var(--yel);outline-offset:3px}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}

/* 픽셀 테두리 (계단 모서리 + 픽셀 그림자) */
.btn,.svc-card,.stat,.pf-win,.w-q,.w-a,.talk-box,.gnb-2,.log-list a{
  --bd:var(--ink); --sh:rgba(0,0,0,.35);
  box-shadow:0 -4px 0 0 var(--bd),0 4px 0 0 var(--bd),-4px 0 0 0 var(--bd),4px 0 0 0 var(--bd),4px 8px 0 0 var(--sh),8px 4px 0 0 var(--sh);
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--pixel);font-size:15px;line-height:1.2;padding:12px 22px;margin:4px;background:var(--tx);color:var(--ink);border:0;cursor:pointer;transition:transform .1s steps(2)}
.btn:hover{transform:translate(-2px,-2px)}
.btn:active{transform:translate(4px,4px)}
.btn-y{background:var(--yel)}
.btn-line{background:transparent;color:var(--tx);--bd:var(--tx);--sh:rgba(255,255,255,.12)}
.btn-line:hover{background:var(--tx);color:var(--ink)}
.btn-lg{font-size:18px;padding:16px 30px}
.btn-full{width:calc(100% - 8px)}
.blink{animation:blink 1s steps(1) infinite}

/* sprite (노트리) */
.spr{display:block;position:relative;aspect-ratio:20/18;filter:drop-shadow(0 4px 0 rgba(0,0,0,.25))}
.spr svg{position:absolute;inset:0;width:100%;height:100%}
.spr .f2{visibility:hidden}
.spr-walk .f1{animation:fa .36s steps(1) infinite}
.spr-walk .f2{animation:fb .36s steps(1) infinite}
.spr-wave .f1{animation:fa .5s steps(1) infinite}
.spr-wave .f2{animation:fb .5s steps(1) infinite}
.spr-idle{animation:bob 1.2s steps(1) infinite}
.spr-idle .f1{animation:blinkA 3.6s steps(1) infinite}
.spr-idle .f2{animation:blinkB 3.6s steps(1) infinite}

/* header */
.hd{position:fixed;inset:0 0 auto;z-index:100;height:var(--hd);transition:background .2s steps(3)}
.hd.on{background:rgba(18,14,42,.94);border-bottom:4px solid var(--ink)}
.hd-in{max-width:1600px;height:100%;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:40px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo-ic{width:34px}
.logo-tx{font-family:var(--pixel);font-size:24px;letter-spacing:1px;color:var(--tx)}
.logo-tx b{color:var(--yel);font-weight:400}
.gnb{flex:1;display:flex;justify-content:center}
.gnb-1{display:flex;gap:6px}
.gnb-1>li{position:relative}
.gnb-1>li>a{display:block;font-family:var(--pixel);font-size:15px;letter-spacing:1px;color:var(--tx2);padding:12px 16px}
.gnb-1>li:hover>a,.gnb-1>li:focus-within>a{color:var(--yel)}
.gnb-1>li>a::before{content:'▶';font-size:10px;margin-right:6px;vertical-align:2px;opacity:0}
.gnb-1>li:hover>a::before{opacity:1;animation:blink .6s steps(1) infinite}
.gnb-2{position:absolute;left:50%;top:calc(100% + 6px);min-width:172px;transform:translateX(-50%);background:var(--paper);padding:10px 0;display:none}
.gnb-1>li:hover .gnb-2,.gnb-1>li:focus-within .gnb-2{display:block}
.gnb-2::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.gnb-2 a{display:block;padding:8px 20px;color:var(--ink);font-size:15px;font-weight:600;white-space:nowrap}
.gnb-2 a:hover{background:var(--ink);color:var(--yel)}
.hd-cta{font-size:14px;padding:10px 18px;flex:none}
.menu-btn{display:none;width:44px;height:44px;background:none;border:0;padding:10px;cursor:pointer;margin-left:auto}
.menu-btn i{display:block;height:4px;background:var(--tx);margin:5px 0;transition:transform .15s steps(2)}
.menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(9px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.mnav{position:fixed;inset:var(--hd) 0 0;z-index:99;background:var(--night);overflow-y:auto;padding:16px 20px 40px;border-top:4px solid var(--ink)}
.mnav>ul>li{border-bottom:2px dashed rgba(255,255,255,.12);padding:14px 0}
.mnav>ul>li>a{display:block;font-family:var(--pixel);font-size:20px}
.mnav-en{display:block;font-size:11px;color:var(--pink);letter-spacing:1px;margin-bottom:2px}
.mnav li ul{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
.mnav li ul a{font-size:15px;color:var(--tx2)}
.mnav .btn{margin-top:28px}

/* 01 hero */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:linear-gradient(180deg,#0b0820 0%,var(--night) 50%,var(--night3) 100%);cursor:crosshair}
.hero::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 4px)}
.hero-night{position:absolute;inset:0}
.st{position:absolute;width:4px;height:4px;background:#fff;animation:twinkle 3s steps(2) infinite}
.st.s2{width:8px;height:8px;background:var(--yel)}
.moon{position:absolute;right:9%;top:18%;width:72px;height:72px;background:var(--paper);box-shadow:inset -18px -10px 0 var(--paper2);
  clip-path:polygon(25% 0,75% 0,75% 12.5%,87.5% 12.5%,87.5% 25%,100% 25%,100% 75%,87.5% 75%,87.5% 87.5%,75% 87.5%,75% 100%,25% 100%,25% 87.5%,12.5% 87.5%,12.5% 75%,0 75%,0 25%,12.5% 25%,12.5% 12.5%,25% 12.5%)}
.hero-day{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#58b4ff 0%,#9ad6ff 70%,#c8ecff 100%);
  --mx:50%;--my:50%;--r:0px;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 98%,transparent 100%);
          mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my),#000 98%,transparent 100%)}
.cloud{position:absolute;width:96px;height:24px;background:#fff;box-shadow:24px -24px 0 -0px #fff,48px -24px 0 0 #fff,24px 0 0 0 #fff}
.cloud.c1{left:12%;top:22%}.cloud.c2{left:62%;top:14%;transform:scale(1.4)}.cloud.c3{left:40%;top:38%;transform:scale(.8)}
.hill{position:absolute;bottom:64px;background:#3fae5a;clip-path:polygon(0 100%,0 60%,10% 60%,10% 40%,20% 40%,20% 20%,35% 20%,35% 0,65% 0,65% 20%,80% 20%,80% 40%,90% 40%,90% 60%,100% 60%,100% 100%)}
.hill.h1{left:-4%;width:420px;height:200px}.hill.h2{right:4%;width:300px;height:140px;background:#2f9a4c}
.day-blocks{position:absolute;left:66%;bottom:150px;display:flex}
.day-blocks i{width:56px;height:56px;margin-left:-4px;display:grid;place-items:center;font-style:normal;font-family:var(--pixel);font-size:22px;color:var(--ink);background:var(--yel);border:4px solid var(--ink);box-shadow:inset -6px -6px 0 var(--yel2),inset 6px 6px 0 #fff3b0}
.hero-in{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--hd) 24px 120px;pointer-events:none}
.hero-h1{display:flex;flex-direction:column;align-items:center}
.js .hero-in{visibility:hidden;animation:heroShow 0s 2.5s forwards}
.js.hero-ready .hero-in{visibility:visible;animation:none}
.js .hero-in .sub,.js .hero-in .hero-lead{visibility:visible}
@keyframes heroShow{to{visibility:visible}}
.big{display:flex;align-items:baseline;font-family:var(--pixel);font-size:clamp(64px,14.5vw,250px);line-height:.95;color:var(--paper);text-shadow:.04em .04em 0 var(--ink),.06em .06em 0 rgba(0,0,0,.25)}
.big i{display:inline-block;font-style:normal}
.big i:nth-child(n+7){color:var(--yel)}
.big .gap{width:.32em}
.sub{margin-top:clamp(18px,2vw,32px);font-family:var(--pixel);font-size:clamp(17px,2vw,30px);background:var(--ink);color:var(--yel);padding:.35em .8em;box-shadow:6px 6px 0 rgba(0,0,0,.3)}
.hero-lead{margin-top:20px;font-size:clamp(15px,1.3vw,19px);color:var(--tx);font-weight:600;text-shadow:2px 2px 0 var(--ink)}
.hero-char{position:absolute;z-index:4;right:12%;bottom:60px;width:clamp(90px,9vw,150px)}
.hover-me{position:absolute;z-index:4;left:50%;bottom:92px;transform:translateX(-50%);font-family:var(--pixel);font-size:13px;letter-spacing:2px;color:var(--mint);white-space:nowrap}
.scroll-cue{position:absolute;z-index:4;left:40px;bottom:96px;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--pixel);font-size:12px;letter-spacing:2px;color:var(--tx2)}
.scroll-cue i{font-style:normal;animation:cue 1s steps(2) infinite}
.hero-ground{position:absolute;left:0;right:0;bottom:0;height:64px;z-index:2;background:linear-gradient(var(--grass) 0 14px,var(--ink) 14px 18px,transparent 18px),repeating-linear-gradient(90deg,var(--dirt) 0 44px,var(--dirt2) 44px 48px),var(--dirt)}

/* section 공통 */
.kicker{font-family:var(--pixel);font-size:14px;letter-spacing:3px;color:var(--pink);margin-bottom:16px}
.sec-hd{text-align:center;margin-bottom:64px}
.sec-hd h2,.svc-head h2,.cta h2,.intro-h2{font-family:var(--pixel);font-size:clamp(28px,3.4vw,48px);line-height:1.3;text-shadow:4px 4px 0 var(--ink)}
.sec-hd h2 em,.intro-h2 em{color:var(--yel)}
.sec-lead{margin-top:18px;font-size:17px;color:var(--tx2)}
.sec-hd-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;text-align:left}
.sec-more{text-align:center;margin-top:56px}
.tag{display:inline-block;font-family:var(--pixel);font-size:11px;letter-spacing:1px;padding:3px 8px;background:var(--pink);color:#fff;margin-right:10px;vertical-align:2px}

/* 02 intro — 새 캐릭터 등장 */
.intro{position:relative;overflow:hidden;background:radial-gradient(ellipse 60% 55% at 50% 52%,#4a3aa8 0%,#2a2260 55%,var(--night) 100%)}
.intro-pin{position:relative;height:100vh;height:100svh;min-height:720px;display:flex;flex-direction:column;align-items:center;padding:calc(var(--hd) + 28px) 24px 40px}
.intro-marq{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:2vh;pointer-events:none;opacity:.9}
.marq{display:flex;width:max-content;white-space:nowrap;font-family:var(--pixel);font-size:clamp(70px,11vw,190px);line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.1);animation:marq 40s linear infinite}
.marq.rev{animation-direction:reverse;-webkit-text-stroke-color:rgba(255,210,63,.12)}
.intro-hd{position:relative;z-index:2;text-align:center}
.intro-h2 em{color:var(--yel)}
.intro-stage{position:relative;z-index:2;flex:1;width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:22px}
.beam{position:absolute;left:50%;top:-12%;width:min(80%,520px);height:112%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,246,220,0) 0%,rgba(255,246,220,.14) 60%,rgba(255,246,220,.22) 100%);clip-path:polygon(38% 0,62% 0,100% 100%,0 100%)}
.spot{position:absolute;left:50%;bottom:44px;width:min(70%,380px);height:56px;transform:translateX(-50%);background:rgba(255,210,63,.35);
  clip-path:polygon(20% 0,80% 0,80% 14%,92% 14%,92% 32%,100% 32%,100% 68%,92% 68%,92% 86%,80% 86%,80% 100%,20% 100%,20% 86%,8% 86%,8% 68%,0 68%,0 32%,8% 32%,8% 14%,20% 14%)}
.intro-char{position:relative;width:clamp(170px,27vh,290px);margin-bottom:6px}
.pose-box .pose{display:none}
.pose-box[data-pose="wave"] .p-wave,.pose-box[data-pose="happy"] .p-happy,.pose-box[data-pose="idle"] .p-idle,.pose-box[data-pose="jump"] .p-jump,.pose-box[data-pose="walk"] .p-walk{display:block}
.intro-char[data-pose="jump"]{animation:hop .6s steps(3) infinite}
.spk{position:absolute;width:12px;height:12px;background:var(--yel);clip-path:polygon(33% 0,67% 0,67% 33%,100% 33%,100% 67%,67% 67%,67% 100%,33% 100%,33% 67%,0 67%,0 33%,33% 33%);animation:sparkle 1.4s steps(2) infinite}
.spk.k1{left:22%;top:34%}.spk.k2{right:22%;top:24%;animation-delay:-.4s;background:var(--mint)}.spk.k3{left:30%;bottom:34%;animation-delay:-.8s;background:var(--pink)}.spk.k4{right:26%;bottom:44%;animation-delay:-1.1s}
.plate{position:relative;display:flex;align-items:center;gap:10px;font-family:var(--pixel);font-size:13px;letter-spacing:1px;background:var(--ink);padding:6px 14px;box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.plate b{font-weight:400;color:var(--yel)}
.plate span{color:var(--tx2)}
.party{position:absolute;inset:auto -30% 140px;display:flex;justify-content:space-between;pointer-events:none}
.pc{display:flex;flex-direction:column;align-items:center;gap:6px;background:rgba(26,20,51,.9);border:4px solid var(--tx2);padding:12px 18px;box-shadow:6px 6px 0 rgba(0,0,0,.35)}
.pc b{font-family:var(--pixel);font-weight:400;font-size:22px;line-height:1;color:var(--ink);background:var(--yel);padding:4px 8px}
.pc.p2 b{background:var(--mint)}
.pc span{font-family:var(--pixel);font-size:14px;white-space:nowrap}
.pc.p1{animation:bob 1.4s steps(1) infinite}.pc.p2{animation:bob 1.4s steps(1) infinite .7s}
.talk-wrap{position:relative;z-index:3;width:100%;max-width:880px}
.talk-box{position:relative;background:rgba(26,20,51,.94);--bd:var(--tx);--sh:rgba(0,0,0,.45);margin:18px 4px 4px;padding:34px 34px 22px}
.talk-name{position:absolute;left:22px;top:-20px;font-family:var(--pixel);font-size:15px;background:var(--yel);color:var(--ink);padding:5px 16px;box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.talk{display:grid;gap:10px;font-size:clamp(17px,1.5vw,22px);font-weight:600;line-height:1.6}
.talk strong{color:var(--yel)}
.talk-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:2px dashed rgba(255,255,255,.14)}
.talk-dots{display:none;gap:8px}
.talk-dots li{width:10px;height:10px;background:rgba(255,255,255,.2)}
.talk-dots li.on{background:var(--yel)}
.talk-more{font-family:var(--pixel);font-size:13px;color:var(--mint);margin-left:auto}
.talk-more:hover{color:var(--yel)}
.talk-next{position:absolute;right:18px;bottom:-30px;color:var(--yel);font-size:14px}
/* 데스크톱 + JS: 대사 한 줄씩 */
@media (min-width:901px){
  .js .talk{grid-template-areas:'a';min-height:3.4em}
  .js .talk li{grid-area:a;visibility:hidden}
  .js .talk li.on{visibility:visible}
  .js .talk-dots{display:flex}
}

/* 03 level */
.level{background:var(--night);background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px}
.level-pin{min-height:100vh;display:flex;align-items:center;padding:calc(var(--hd) + 40px) 0 80px}
.level-pin>.wrap{width:100%}
.lv-map{position:relative;margin-top:96px}
.lv-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;align-items:start}
.lv-step{text-align:center}
.lv-step.s1{margin-top:180px}.lv-step.s2{margin-top:90px}
.lv-plat{position:relative;height:56px;margin-bottom:24px;background:linear-gradient(var(--grass) 0 12px,var(--ink) 12px 16px,var(--dirt) 16px);border:4px solid var(--ink);box-shadow:8px 8px 0 rgba(0,0,0,.35)}
.lv-plat span{position:absolute;left:50%;top:-34px;transform:translateX(-50%);font-family:var(--pixel);font-size:14px;background:var(--yel);color:var(--ink);padding:3px 10px;white-space:nowrap}
.lv-step h3{font-family:var(--pixel);font-size:clamp(22px,2vw,30px)}
.lv-step p{margin-top:8px;color:var(--tx2);font-size:15.5px}
.lv-hero{position:absolute;left:0;top:0;width:104px;z-index:2;pointer-events:none;visibility:hidden}
.lv-hero.ready{visibility:visible}
.lv-plat{transition:filter .2s steps(2)}
.lv-pop{position:absolute;left:50%;top:-78px;transform:translateX(-50%);font-style:normal;font-family:var(--pixel);font-size:18px;color:var(--mint);text-shadow:3px 3px 0 var(--ink);white-space:nowrap;opacity:0;pointer-events:none}
.js .lv-step{transition:opacity .25s steps(3)}
.lv-exp{display:flex;align-items:center;gap:14px;max-width:640px;margin:40px auto 0;font-family:var(--pixel);font-size:14px}
.lv-exp span{color:var(--mint)}
.lv-exp i{flex:1;height:20px;border:4px solid var(--tx2);background:var(--ink);padding:2px}
.lv-exp b{display:block;height:100%;width:100%;background:repeating-linear-gradient(90deg,var(--yel) 0 12px,var(--yel2) 12px 16px)}
.lv-exp em{font-style:normal;color:var(--yel);min-width:48px}
@media (min-width:901px){
  /* 아직 안 깬 단계: 통째로 투명하게 하면 글자 대비가 떨어져서 발판만 흑백으로, 글자는 읽히게 */
  .js .lv-step:not(.on) .lv-plat{filter:grayscale(1) brightness(.75)}
  .js .lv-step:not(.on) h3{color:var(--tx2)}
  .js .lv-step:not(.on) p{color:#9a93bd}
  .js .lv-step.on .lv-plat{filter:drop-shadow(0 0 0 var(--yel)) brightness(1.15)}
  .js .lv-exp b{width:0}
}

/* 04 service */
.svc{background:var(--paper);color:var(--ink);overflow:hidden;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px}
.svc-pin{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hd) + 32px) 0 64px}
.svc-head{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
.svc-head h2{text-shadow:4px 4px 0 var(--paper2)}
.svc-hint{font-family:var(--pixel);font-size:14px;letter-spacing:2px;color:var(--pink);white-space:nowrap}
.svc-view{padding-left:max(40px,calc((100vw - 1320px)/2 + 40px))}
.svc-track{display:flex;gap:40px;width:max-content;padding:8px 40px 16px 4px}
.svc-card{width:clamp(300px,30vw,420px);min-height:min(56vh,500px);display:flex;flex-direction:column;background:var(--yel);--sh:rgba(26,20,51,.35)}
.svc-card.c-mint{background:var(--mint)}.svc-card.c-blue{background:var(--blue)}.svc-card.c-pink{background:var(--pink)}.svc-card.c-paper{background:#fff}
.svc-top{display:flex;justify-content:space-between;font-family:var(--pixel);font-size:12px;letter-spacing:1px;padding:12px 22px;background:var(--ink);color:var(--yel)}
.svc-top span+span{color:var(--tx2)}
.svc-body{flex:1;padding:28px 26px 8px}
.svc-ic{width:76px;height:76px;display:flex;align-items:flex-end;margin-bottom:22px}
.svc-card h3{font-family:var(--pixel);font-size:clamp(24px,2.2vw,32px);line-height:1.25}
.svc-card p{margin-top:12px;font-size:16px;font-weight:500}
.svc-card ul{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.svc-card li{font-size:13px;font-weight:700;background:rgba(26,20,51,.12);padding:3px 10px}
.svc-link{display:flex;justify-content:space-between;align-items:center;margin:20px 26px 26px;padding:12px 16px;background:var(--ink);color:var(--tx);font-family:var(--pixel);font-size:14px}
.svc-link i{font-style:normal;color:var(--yel);transition:transform .1s steps(2)}
.svc-link:hover i{transform:translateX(6px)}

/* 05 stats */
.stats{padding:140px 0;background:var(--night2)}
.stat-list{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.stat{background:var(--night3);padding:34px 26px 30px;margin:4px;text-align:center}
.stat-num{font-family:var(--pixel);color:var(--yel);line-height:1;text-shadow:4px 4px 0 var(--ink)}
.stat-num b{font-weight:400;font-size:clamp(48px,5vw,76px)}
.stat-num small{font-size:20px;margin-left:6px;color:var(--tx)}
.stat h3{margin-top:18px;font-family:var(--pixel);font-size:19px}
.stat p{margin-top:6px;color:var(--tx2);font-size:14.5px}

/* 06 portfolio */
.pf{padding:140px 0;background:var(--paper);color:var(--ink);overflow:hidden}
.pf .sec-hd h2{text-shadow:4px 4px 0 var(--paper2)}
.pf-tabs{display:flex;flex-wrap:wrap;gap:8px}
.pf-tabs a{display:block;font-family:var(--pixel);font-size:14px;padding:8px 16px;border:4px solid var(--ink);background:#fff}
.pf-tabs a:hover{background:var(--ink);color:var(--yel)}
.pf-rows{display:grid;gap:40px}
.pf-row{overflow:hidden;padding:8px 0 16px}
.pf-line{display:flex;gap:36px;width:max-content;animation:marquee 48s linear infinite}
.pf-row.rev .pf-line{animation-direction:reverse}
.pf-row:hover .pf-line{animation-play-state:paused}
.pf-card{width:320px;flex:none;padding:4px}
.pf-win{background:#fff;--sh:rgba(26,20,51,.3);transition:transform .1s steps(2)}
.pf-card a:hover .pf-win{transform:translate(-4px,-4px)}
.pf-bar{display:flex;gap:6px;padding:8px 10px;background:var(--ink)}
.pf-bar i{width:8px;height:8px;background:var(--pink)}
.pf-bar i:nth-child(2){background:var(--yel)}.pf-bar i:nth-child(3){background:var(--mint)}
.pf-thumb{aspect-ratio:16/10;display:grid;place-items:center;position:relative;overflow:hidden;--c:var(--mint)}
.pf-thumb.t-blue{--c:var(--blue)}.pf-thumb.t-pink{--c:var(--pink)}.pf-thumb.t-yel{--c:var(--yel)}
.pf-thumb::before{content:'';position:absolute;inset:12px;background:linear-gradient(var(--c) 0 34%,transparent 34% 44%,rgba(26,20,51,.16) 44% 50%,transparent 50% 56%,rgba(26,20,51,.1) 56% 60%,transparent 60%),linear-gradient(90deg,rgba(26,20,51,.08) 0 31%,transparent 31% 34.5%,rgba(26,20,51,.08) 34.5% 65.5%,transparent 65.5% 69%,rgba(26,20,51,.08) 69%) 0 100%/100% 30% no-repeat}
.pf-thumb span{position:relative;font-family:var(--pixel);font-size:12px;letter-spacing:2px;background:var(--ink);color:var(--tx);padding:4px 10px}
.pf-cat{margin-top:18px;font-family:var(--pixel);font-size:13px;color:#b8285a}
.pf-tit{font-size:17px;font-weight:700}

/* 07 worry */
.worry{padding:140px 0;background:var(--night)}
.worry-list{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px}
.w-q{background:var(--paper);color:var(--ink);padding:16px 22px 18px;margin:4px;font-weight:700;font-size:17px;line-height:1.5}
.w-q .tag{display:table;margin:0 0 8px}
.w-a{display:flex;gap:14px;align-items:flex-start;background:var(--night3);--bd:var(--tx2);margin:20px 4px 4px 36px;padding:18px 20px;position:relative}
.w-a::before{content:'';position:absolute;left:28px;top:-16px;width:12px;height:12px;background:var(--tx2);clip-path:polygon(0 100%,100% 100%,0 0)}
.w-face{width:34px;flex:none}
.w-a p{font-size:15.5px;color:var(--tx)}

/* 08 log */
.log{padding:120px 0;background:var(--night2)}
.log-list{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.log-list a{display:block;background:var(--paper);color:var(--ink);padding:26px 24px;margin:4px;min-height:160px}
.log-list time{display:block;font-family:var(--pixel);font-size:12px;color:var(--pink);margin-bottom:10px}
.log-list strong{font-size:18px;line-height:1.5}

/* 09 cta */
.cta{position:relative;padding:150px 0 0;text-align:center;background:var(--night3);background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:24px 24px;overflow:hidden}
.cta-cont{font-family:var(--pixel);font-size:clamp(20px,2.4vw,32px);color:var(--pink);letter-spacing:3px;margin-bottom:22px}
.cta-cont b{display:inline-block;min-width:1.2em;font-weight:400;color:var(--yel)}
.cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:40px}
.cta-direct{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;margin-top:28px;font-family:var(--pixel);font-size:16px}
.cta-direct a{color:var(--tx2)}
.cta-direct a:hover{color:var(--yel)}
.cta-char{width:120px;margin:64px auto 0;position:relative;z-index:1}
.cta::after{content:'';display:block;height:56px;margin-top:-4px;background:linear-gradient(var(--grass) 0 12px,var(--ink) 12px 16px,transparent 16px),repeating-linear-gradient(90deg,var(--dirt) 0 44px,var(--dirt2) 44px 48px),var(--dirt)}

/* footer */
.ft{background:#0b0820;padding:64px 0 32px;color:var(--tx2);font-size:14px}
.ft-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.ft-brand p+p{margin-top:8px}
.ft-map{display:grid;grid-template-columns:repeat(6,auto);gap:16px 40px}
.ft-1{display:block;font-family:var(--pixel);font-size:13px;color:var(--tx);margin-bottom:10px;letter-spacing:1px}
.ft-map li{margin-top:4px}
.ft-map li a:hover,.ft-1:hover,.ft-info a:hover{color:var(--yel)}
.ft-info{font-style:normal;margin-top:48px;padding-top:24px;border-top:2px dashed rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:4px 0}
.ft-info span+span::before{content:'|';margin:0 12px;opacity:.35}
.ft-copy{margin-top:16px;font-family:var(--pixel);font-size:12px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.hi{color:var(--yel)}
.top{position:fixed;right:20px;bottom:20px;z-index:90;width:48px;height:48px;display:grid;place-items:center;background:var(--yel);color:var(--ink);border:4px solid var(--ink);box-shadow:4px 4px 0 rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s steps(2)}
.top.on{opacity:1;pointer-events:auto}

/* keyframes */
@keyframes blink{50%{opacity:0}}
@keyframes twinkle{50%{opacity:.25}}
@keyframes fa{0%{visibility:visible}50%{visibility:hidden}}
@keyframes fb{0%{visibility:hidden}50%{visibility:visible}}
@keyframes blinkA{0%{visibility:visible}94%{visibility:hidden}}
@keyframes blinkB{0%{visibility:hidden}94%{visibility:visible}}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes cue{50%{transform:translateY(6px)}}
@keyframes marquee{to{transform:translateX(-33.3333%)}}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes hop{50%{transform:translateY(-14px)}}
@keyframes sparkle{50%{transform:scale(.4);opacity:.5}}

/* responsive */
@media (max-width:1280px){
  .gnb-1>li>a{padding:12px 10px;font-size:14px}
  .ft-map{grid-template-columns:repeat(3,auto)}
}
@media (max-width:1100px){
  .gnb,.hd-cta{display:none}
  .menu-btn{display:block}
  .stat-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  :root{--hd:68px}
  .wrap,.hd-in{padding:0 20px}
  .intro-pin{height:auto;min-height:0;padding:100px 16px 72px}
  .intro-stage{min-height:300px}
  .talk-box{padding:30px 20px 18px}
  .party{position:static;margin-top:16px;gap:12px;justify-content:center}
  .pc{padding:8px 12px}
  .pc b{font-size:16px}
  .pc span{font-size:12px}
  .level-pin{min-height:0;padding:100px 0}
  .lv-steps{grid-template-columns:1fr;gap:28px}
  .lv-step.s1,.lv-step.s2{margin-top:0}
  .lv-step{text-align:left;display:grid;grid-template-columns:96px 1fr;column-gap:20px;align-items:center}
  .lv-plat{grid-row:span 2;margin:0;height:48px}
  .lv-plat span{top:-30px}
  .lv-step p{grid-column:2}
  .lv-hero,.lv-pop{display:none}
  .lv-exp{display:none}
  .lv-map{margin-top:0}
  .svc-pin{min-height:0;padding:100px 0}
  .svc-head{flex-direction:column;align-items:flex-start}
  .svc-view{padding-left:0;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .svc-view::-webkit-scrollbar{display:none}
  .svc-track{padding:8px 20px 20px 24px;gap:24px}
  .svc-card{scroll-snap-align:center;width:min(82vw,380px);min-height:0}
  .worry-list{grid-template-columns:1fr}
  .sec-hd-row{flex-direction:column;align-items:flex-start}
  .stats,.pf,.worry{padding:100px 0}
  .hero-char{right:6%}
  .scroll-cue{display:none}
}
@media (max-width:640px){
  .sec-hd{margin-bottom:44px}
  .logo-tx{font-size:20px}
  .logo-ic{width:28px}
  .hero{min-height:560px}
  .big{flex-wrap:wrap;justify-content:center;font-size:24vw;line-height:1}
  .big .gap{width:100%;height:0}
  .hero-char{width:80px;bottom:60px}
  .hover-me{font-size:11px}
  .moon{width:48px;height:48px;top:14%}
  .day-blocks{left:20%;bottom:180px}
  .day-blocks i{width:40px;height:40px;font-size:16px}
  .stat-list{gap:20px}
  .stat{padding:24px 12px}
  .stat h3{font-size:16px}
  .stat p{font-size:13px}
  .stat-num small{font-size:15px}
  .pf-card{width:250px}
  .pf-line{gap:20px}
  .w-a{margin-left:16px}
  .log-list{grid-template-columns:1fr}
  .btn-lg{font-size:16px;padding:14px 22px}
  .ft-map{grid-template-columns:repeat(2,1fr)}
  .ft-info{flex-direction:column}
  .ft-info span+span::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* 메인 포트폴리오: 실제 작업 썸네일 */
.pf-thumb.has-img::before{display:none}
.pf-thumb.has-img{background:#fff}
.pf-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.pf-tit{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 05-2 PRICE */
.price{padding:140px 0;background:var(--yel);color:var(--ink);background-image:linear-gradient(rgba(26,20,51,.07) 2px,transparent 2px),linear-gradient(90deg,rgba(26,20,51,.07) 2px,transparent 2px);background-size:40px 40px;border-top:6px solid var(--ink);border-bottom:6px solid var(--ink)}
.price .sec-hd h2{text-shadow:4px 4px 0 #fff3b0}
.price .sec-lead{color:var(--ink2);font-weight:600}
.price-list{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.price-it a{position:relative;display:block;height:100%;padding:34px 24px 28px;background:#fff;border:5px solid var(--ink);box-shadow:8px 8px 0 var(--ink);transition:transform .1s steps(2)}
.price-it a:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--ink)}
.price-it a::before{content:'';position:absolute;left:0;right:0;top:0;height:12px;background:var(--c,var(--yel));border-bottom:4px solid var(--ink)}
.price-it.c-mint{--c:var(--mint)}.price-it.c-pink{--c:var(--pink)}.price-it.c-blue{--c:var(--blue)}.price-it.c-yel{--c:var(--yel)}
.price-coin{position:absolute;right:18px;top:26px;width:30px;height:30px;background:var(--yel);box-shadow:0 0 0 4px var(--ink),inset -5px -5px 0 #d9a514;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);animation:hop 1.2s steps(2) infinite}
.price-name{margin-top:6px;font-family:var(--pixel);font-size:20px;line-height:1.3}
.price-sub{margin-top:6px;font-size:14px;color:var(--ink2);font-weight:600}
.price-num{margin-top:22px;font-family:var(--pixel);color:#c2185b;line-height:1}
.price-num b{font-weight:400;font-size:clamp(46px,4.4vw,64px);text-shadow:4px 4px 0 #ffd0dc}
.price-num small{margin-left:6px;font-size:17px;color:var(--ink)}
.price-why{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:44px}
.price-why li{display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--ink);color:var(--tx);font-weight:700;font-size:15px}
.price-why b{font-family:var(--pixel);font-weight:400;font-size:20px;color:var(--yel)}
.price .sec-more{margin-top:44px;text-align:center}
.price .btn-y{background:var(--ink);color:var(--yel)}
@media (max-width:1100px){.price-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .price{padding:90px 0}
  .price-list{gap:18px}
  .price-it a{padding:28px 16px 22px}
  .price-name{font-size:16px}
  .price-num small{font-size:13px}
  .price-coin{width:22px;height:22px;right:12px;top:22px}
}

/* PIXEL LOG 롤링 (썸네일 카드 6개, 3개씩 보임) */
.log-roll{position:relative}
.log .log-list{display:flex;gap:28px;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 12px 14px 4px;margin:0 -12px 0 -4px}
.log .log-list::-webkit-scrollbar{display:none}
.log .log-list li{flex:0 0 calc((100% - 56px) / 3);scroll-snap-align:start}
.log .log-list a{display:flex;flex-direction:column;height:100%;padding:0;min-height:0;margin:0;transition:transform .1s steps(2)}
.log .log-list a:hover{transform:translate(-3px,-3px)}
.log-th{aspect-ratio:40/21;background:var(--night);border-bottom:4px solid var(--ink);overflow:hidden}
.log-th img{display:block;width:100%;height:100%;object-fit:cover}
.log-tx{padding:20px 22px 24px}
.log-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px;color:var(--ink2)}
.log-meta span{padding:3px 8px;background:var(--ink);color:var(--yel);font-family:var(--pixel);font-size:12px}
.log .log-list time{display:inline;margin:0;font-family:inherit;font-size:13px;color:var(--ink2)}
.log .log-list strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:18px;line-height:1.5}
.log-sum{margin-top:8px;font-size:14px;line-height:1.6;color:var(--ink2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.log-ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}
.log-arw{width:44px;height:44px;background:var(--paper);color:var(--ink);border:0;box-shadow:4px 4px 0 var(--ink);font-size:16px;cursor:pointer}
.log-arw:hover{background:var(--yel)}
.log-arw:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.log-dots{display:flex;gap:8px}
.log-dots button{width:12px;height:12px;padding:0;border:0;background:rgba(255,255,255,.3);cursor:pointer}
.log-dots button.on{background:var(--yel);width:28px}
@media (max-width:1100px){.log .log-list li{flex-basis:calc((100% - 28px) / 2)}}
@media (max-width:640px){.log .log-list{gap:16px}.log .log-list li{flex-basis:86%}.log .log-list strong{font-size:16px}}
.log .log-list{cursor:grab}
.log .log-list.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.log .log-list.is-drag a{pointer-events:none}

/* 3차 메뉴 (홈페이지 제작 > 기업 · 병원 · 랜딩) */
.gnb-3{padding:0 0 6px}
.gnb-2 .gnb-3 a{padding:5px 20px 5px 34px;font-size:13px;font-weight:500;color:var(--ink2);position:relative}
.gnb-2 .gnb-3 a::before{content:'';position:absolute;left:22px;top:50%;width:5px;height:5px;margin-top:-2px;background:currentColor}
.gnb-2 .gnb-3 a:hover{background:var(--yel);color:var(--ink)}
.gnb-2 .has3{border-bottom:2px dashed rgba(26,20,51,.15);margin-bottom:4px}
.mnav li.has3{flex-basis:100%}
.mnav .mnav-3{gap:4px 14px;margin:6px 0 2px;padding-left:12px;border-left:3px solid rgba(255,255,255,.18)}
.mnav .mnav-3 a{font-size:13px;color:var(--tx2)}
.ft-3{margin:2px 0 6px;padding-left:10px;border-left:2px solid rgba(255,255,255,.15)}
.ft-map .ft-3 li{margin-top:2px}
.ft-3 a{font-size:12px;opacity:.85}

/* 푸터 개인정보처리방침 */
.ft-legal{margin-top:14px;font-size:13px}
.ft-legal a{color:var(--tx)}
.ft-legal a:hover{color:var(--yel)}

/* 06-2 REVIEW : 실제 거래 후기 (흐르는 카드) */
.rv-sec{padding:130px 0 120px;background:var(--paper);color:var(--ink);overflow:hidden;border-top:6px solid var(--ink)}
.rv-sec .sec-lead{color:var(--ink2)}
.rv-sum{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:-10px 0 44px}
.rv-sum li{display:flex;align-items:center;gap:10px;padding:10px 18px;background:var(--ink);color:var(--tx);font-weight:700;font-size:14px}
.rv-sum b{font-family:var(--pixel);font-weight:400;font-size:20px;color:var(--yel)}
.rv-row{overflow:hidden;padding:8px 0 18px}
.rv-line{display:flex;gap:28px;width:max-content;animation:marquee 70s linear infinite}
.rv-row:hover .rv-line{animation-play-state:paused}
.rv-card{flex:0 0 340px;display:flex;flex-direction:column;padding:24px 24px 20px;background:#fff;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.rv-top{display:flex;align-items:center;gap:8px}
.rv-star{color:#f5b301;letter-spacing:1px;font-size:17px;text-shadow:1px 1px 0 var(--ink)}
.rv-top b{font-family:var(--pixel);font-weight:400;font-size:15px}
.rv-re{margin-left:auto;padding:3px 8px;background:var(--mint);color:var(--ink);font-style:normal;font-size:12px;font-weight:800;border:2px solid var(--ink)}
.rv-tx{flex:1;margin-top:14px;font-size:15.5px;line-height:1.7;font-weight:600;color:var(--ink)}
.rv-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:16px;font-size:13px;color:var(--ink2)}
.rv-who{font-weight:800;color:var(--ink)}
.rv-deal{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:12px;border-top:2px dashed rgba(26,20,51,.18)}
.rv-deal span{padding:2px 8px;background:#f3e6bf;font-size:12px;font-weight:700;color:var(--ink)}
.rv-sec.rv-dark{background:var(--night2);color:var(--tx);border-top:0}
.rv-sec.rv-dark .sec-lead{color:var(--tx2)}
.rv-sec.rv-dark .rv-sum li{background:var(--paper);color:var(--ink)}
.rv-sec.rv-dark .rv-sum b{color:#b8285a}
@media (prefers-reduced-motion:reduce){.rv-row{overflow-x:auto}.rv-line{animation:none}}
@media (max-width:640px){.rv-sec{padding:90px 0}.rv-card{flex-basis:280px;padding:20px 18px 16px}.rv-tx{font-size:14.5px}.rv-line{gap:18px;animation-duration:55s}}

/* 모바일 하단 고정 버튼 (전화 · 견적 문의) */
.mbar{display:none}
@media (max-width:900px){
  .mbar{position:fixed;left:0;right:0;bottom:0;z-index:95;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--night);border-top:4px solid var(--ink);box-shadow:0 -4px 0 rgba(0,0,0,.25)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;font-family:var(--pixel);font-size:15px;border:3px solid var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,.45)}
  .mbar a:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.45)}
  .mbar i{font-style:normal}
  .mbar-tel{background:var(--paper);color:var(--ink)}
  .mbar-go{background:var(--yel);color:var(--ink)}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .top{bottom:calc(84px + env(safe-area-inset-bottom))}
}
.rv-sec .sec-hd h2{text-shadow:4px 4px 0 var(--paper2)}
.rv-sec.rv-dark .sec-hd h2{text-shadow:4px 4px 0 var(--ink)}
.rv-card{color:var(--ink)}

/* 후기 아바타 (이름 첫 글자 픽셀 박스) */
.rv-meta{align-items:center}
.rv-av{display:inline-grid;place-items:center;width:28px;height:28px;font-family:var(--pixel);font-size:13px;color:var(--ink);background:var(--yel);border:3px solid var(--ink)}
.rv-av.c1{background:var(--mint)}.rv-av.c2{background:var(--blue)}.rv-av.c3{background:#ffb36b}

/* 메인 후기: 핑크 배경 + RPG 대화창 카드 */
.rv-sec.rv-main{background:var(--pink);background-image:linear-gradient(rgba(26,20,51,.09) 2px,transparent 2px),linear-gradient(90deg,rgba(26,20,51,.09) 2px,transparent 2px);background-size:40px 40px;border-top:6px solid var(--ink);border-bottom:6px solid var(--ink)}
.rv-main .kicker{color:var(--ink)}
.rv-main .sec-hd h2{color:#fff;text-shadow:4px 4px 0 var(--ink),7px 7px 0 rgba(26,20,51,.25)}
.rv-main .sec-lead{color:var(--ink);font-weight:700}
.rv-main .rv-sum{width:max-content;max-width:100%;margin:-6px auto 52px;gap:0;background:var(--ink);border:4px solid var(--ink);box-shadow:8px 8px 0 rgba(26,20,51,.35);outline:3px solid #fff;outline-offset:-10px;padding:6px}
.rv-main .rv-sum li{background:transparent;padding:14px 26px;border-right:2px dashed rgba(255,255,255,.22)}
.rv-main .rv-sum li:last-child{border-right:0}
.rv-main .rv-sum b{font-size:26px}
.rv-main .rv-card{position:relative;background:var(--ink);color:var(--tx);border:4px solid var(--ink);box-shadow:inset 0 0 0 3px var(--paper),7px 7px 0 rgba(26,20,51,.4);padding:26px 26px 24px}
.rv-main .rv-card::after{content:'\25BC';position:absolute;right:18px;bottom:14px;font-size:11px;color:var(--yel);animation:blink 1s steps(2) infinite}
.rv-main .rv-top b{color:var(--yel)}
.rv-main .rv-star{text-shadow:none}
.rv-main .rv-re{border-color:var(--paper)}
.rv-main .rv-tx{color:var(--paper);font-weight:500}
.rv-main .rv-meta{color:var(--tx2)}
.rv-main .rv-who{color:#fff}
.rv-main .rv-av{border-color:var(--paper)}
.rv-main .rv-deal{border-top-color:rgba(255,255,255,.16)}
.rv-main .rv-deal span{background:var(--night3);color:var(--tx)}
.rv-main .rv-row{padding:10px 0 22px}
@media (max-width:640px){
  .rv-main .rv-sum{width:auto;margin-left:16px;margin-right:16px;flex-direction:column;outline-offset:-8px}
  .rv-main .rv-sum li{justify-content:center;border-right:0;border-bottom:2px dashed rgba(255,255,255,.22);padding:12px 16px}
  .rv-main .rv-sum li:last-child{border-bottom:0}
  .rv-main .rv-card{padding:22px 20px 20px}
}
/* 롤링 목록이 열리자마자 스냅 위치(왼쪽 여백 4px)로 스스로 스크롤하면 Chrome이 LCP 측정을 멈춤 → 스냅 기준을 여백에 맞춤 */
.log .log-list{scroll-padding-left:4px}
.log .log-list li{scroll-snap-align:start;scroll-margin-left:0}
/* 채도 낮춤: 가격 = 연한 버터, 후기 = 연보라 */
.price{background-color:#fff0bf;background-image:linear-gradient(rgba(26,20,51,.05) 2px,transparent 2px),linear-gradient(90deg,rgba(26,20,51,.05) 2px,transparent 2px)}
.price .sec-hd h2{text-shadow:4px 4px 0 #fff}
.rv-sec.rv-main{background-color:#ddd3f7;background-image:linear-gradient(rgba(26,20,51,.05) 2px,transparent 2px),linear-gradient(90deg,rgba(26,20,51,.05) 2px,transparent 2px)}
.rv-main .kicker{color:#b8285a}
.rv-main .sec-hd h2{color:var(--ink);text-shadow:4px 4px 0 #fff}
.rv-main .sec-lead{color:var(--ink2);font-weight:600}

/* 흐르는 카드 2벌: 한 벌 길이(+끝 간격)만큼 이동 */
@keyframes marquee2{to{transform:translateX(-50%)}}
.pf-line.x2{animation-name:marquee2;padding-right:36px}
.rv-line{animation-name:marquee2;padding-right:28px}
@media (max-width:640px){.rv-line{padding-right:18px}}
@media (max-width:900px){.pf-line.x2{padding-right:20px}}