:root{
  --bg:#0F0E17; --surface:#1A1826; --raised:#24212F; --hover:#2C2939; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --t1:#F5F3FA; --t2:#BDB8CC; --t3:#8C879C; --t4:#5E5A6C;
  --coral:#FF4D6D; --coral2:#E83A5B; --violet:#7B5CFF; --violet2:#9C85FF; --gem:#FFD166; --ok:#4BD08B; --warn:#FF8A3D;
  --daily:#8A93A6; --premium:#4EA1FF; --exclusive:#A98BFF; --royal:#F5B301; --secret:#E8C872;
  --r-card:14px; --r-modal:20px;
  --ease:cubic-bezier(0.16,1,0.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:#08070D;color:var(--t1);font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
img{display:block}
.num,.tab-num{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}

/* ---------- desktop shell ---------- */
.shell{display:flex;height:100vh;width:100%;gap:40px;align-items:center;justify-content:center;padding:24px;background:radial-gradient(1200px 600px at 60% 20%,rgba(123,92,255,.12),transparent 60%),radial-gradient(900px 500px at 30% 90%,rgba(255,77,109,.08),transparent 60%),#08070D}
.side{width:340px;height:calc(100vh - 48px);max-height:900px;overflow:auto;padding:4px 8px 24px 0;scrollbar-width:thin;scrollbar-color:#2a2738 transparent}
.side h1{font-size:22px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.side h1 b{color:var(--coral)}
.side .sub{color:var(--t3);font-size:12.5px;margin:6px 0 16px;line-height:1.55}
.side h2{font-size:11px;font-weight:700;color:var(--t3);letter-spacing:.08em;margin:18px 0 8px}
.side .item{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:10px;margin-bottom:3px;border:1px solid transparent}
.side .item:hover{background:#15131F;border-color:var(--line)}
.side .item.on{background:#1A1826;border-color:rgba(123,92,255,.4)}
.side .item .t{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.side .item .d{font-size:11.5px;color:var(--t3);margin-top:2px;line-height:1.45}
.src{font-size:9.5px;font-weight:800;padding:2px 5px;border-radius:4px;letter-spacing:.03em;line-height:1.2}
.src.WHIF{background:rgba(123,92,255,.2);color:#B7A6FF}
.src.TOPTOON{background:rgba(255,77,109,.18);color:#FF8AA0}
.src.NEW{background:rgba(75,208,139,.16);color:#7FE3AE}
.src.FIGMA{background:rgba(255,209,102,.16);color:#FFD98A}
.demo{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.demo button{font-size:12px;padding:8px;border-radius:8px;background:#15131F;border:1px solid var(--line);text-align:left}
.demo button:hover{border-color:var(--line2)}
.device{width:390px;height:844px;border-radius:54px;padding:10px;background:linear-gradient(145deg,#2a2833,#131219);box-shadow:0 0 0 1px #3a3844,0 40px 80px rgba(0,0,0,.6),inset 0 0 0 2px #0a0a0f;flex:none;position:relative}
.device:after{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:110px;height:30px;border-radius:20px;background:#000;z-index:200;pointer-events:none}
.screen{position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;background:var(--bg);isolation:isolate}
/* 노치만 덩그러니 떠 있던 상단을 실제 폰처럼 마감: 시간·인디케이터 상태바 */
.statusbar{position:absolute;top:0;left:0;right:0;height:34px;z-index:100;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;padding:0 26px;
  font-size:13px;font-weight:700;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.statusbar .ind{display:flex;align-items:center;gap:5px}
.statusbar .bars{display:flex;align-items:flex-end;gap:1.5px;height:10px}
.statusbar .bars i{width:3px;background:#fff;border-radius:1px;display:block}
.statusbar .bars i:nth-child(1){height:4px}.statusbar .bars i:nth-child(2){height:6px}
.statusbar .bars i:nth-child(3){height:8px}.statusbar .bars i:nth-child(4){height:10px}
.statusbar .wifi{display:block;opacity:.95}
.statusbar .bat{width:22px;height:11px;border-radius:3px;border:1.4px solid rgba(255,255,255,.75);position:relative;padding:1.4px}
.statusbar .bat:after{content:'';position:absolute;right:-3.4px;top:3px;width:2px;height:4px;border-radius:0 2px 2px 0;background:rgba(255,255,255,.75)}
.statusbar .bat i{display:block;height:100%;width:72%;background:#fff;border-radius:1.5px}
.note{width:220px;color:var(--t3);font-size:12px;line-height:1.6;align-self:flex-end;margin-bottom:40px}
.note b{color:var(--t2)}
@media (max-width:1180px){.note{display:none}}
@media (max-width:820px){
  .shell{padding:0;gap:0}
  .side{display:none}
  .device{width:100vw;height:100vh;height:100dvh;border-radius:0;padding:0;box-shadow:none;background:var(--bg)}
  .device:after{display:none}
  .statusbar{display:none}
  .screen{border-radius:0}
}

/* ---------- app view ---------- */
#view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding-top:34px}
#view::-webkit-scrollbar{display:none}
#view.noscroll{overflow:hidden}
#view.full{padding-top:0}
.pb-gnb{padding-bottom:110px}
.fade-in{animation:fadeIn .3s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.hdr{position:sticky;top:-34px;margin-top:-34px;padding:34px 16px 0;height:90px;display:flex;align-items:center;gap:8px;z-index:30;background:var(--bg)}
.hdr.solid{background:var(--bg);border-bottom:1px solid var(--line)}
.logo{font-weight:900;font-size:22px;letter-spacing:-.04em;display:flex;align-items:baseline;gap:4px}
.logo i{font-style:normal;color:var(--coral)}
.logo small{font-size:10px;color:var(--t3);font-weight:600;letter-spacing:.02em}
.hdr .sp{flex:1}
.pill-cur{display:flex;align-items:center;gap:4px;height:32px;padding:0 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.pill-cur .plus{width:18px;height:18px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-size:13px;line-height:1;margin-left:2px}
.gemnum{transition:color .2s}
.gemnum.flash{color:var(--coral)!important;animation:shake .4s}
@keyframes shake{25%{transform:translateY(-2px)}75%{transform:translateY(2px)}}
.hdr-title{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.iconbtn{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;font-size:20px;color:var(--t1)}
.iconbtn:active{background:var(--hover)}

.sec{padding:0 16px;margin-top:24px}
.sec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-h h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
.sec-h .more{font-size:13px;color:var(--t3)}
.h4{font-size:15px;font-weight:700;margin-bottom:10px}
.muted{color:var(--t3)}
.small{font-size:12px}

/* GNB */
/* ---- 하단 탭 — 스크롤에 따라 줄어드는 플로팅 바 ----
   뒤 콘텐츠가 비쳐야 떠 있어 보인다(backdrop-filter). 선택 표시는 브랜드 색이 아니라 명도로 한다. */
.screen{--tabbar-h:66px}
.screen.tabmini{--tabbar-h:52px}
.gnb{position:absolute;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  display:flex;align-items:center;gap:2px;width:auto;max-width:calc(100% - 24px);height:var(--tabbar-h);padding:0 6px;
  border-radius:999px;background:rgba(22,20,30,.72);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(255,255,255,.08);z-index:50;box-shadow:0 8px 30px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.05) inset;
  transition:height .22s var(--ease),padding .22s var(--ease)}
.gnb button{width:64px;height:100%;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;font-size:11px;color:var(--t3);font-weight:600;transition:width .22s var(--ease),color .16s var(--ease)}
.gnb.mini button{width:52px}
/* 아이콘 칸은 44px 이상을 유지해 축소 상태에서도 터치 영역이 줄지 않는다 */
.gnb button .ico{width:44px;height:30px;display:grid;place-items:center;border-radius:14px;transition:background .18s var(--ease)}
.gnb button .ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gnb button .lb{font-size:11px;line-height:1.2;margin-top:3px;max-height:14px;opacity:1;overflow:hidden;
  transition:max-height .2s var(--ease),opacity .16s var(--ease),margin-top .2s var(--ease)}
.gnb.mini button .lb{max-height:0;opacity:0;margin-top:0}
.gnb button.on{color:var(--t1)}
.gnb button.on .ico{background:rgba(255,255,255,.14);box-shadow:0 1px 0 rgba(255,255,255,.06) inset}
.gnb button.on .ico svg .f{fill:currentColor;stroke:none}
.gnb.hide{display:none}
@media (prefers-reduced-motion:reduce){
  .gnb,.gnb button,.gnb button .lb,.gnb button .ico{transition:none}
  .gnb.mini{--tabbar-h:66px}
  .gnb.mini button{width:64px}
  .gnb.mini button .lb{max-height:14px;opacity:1;margin-top:3px}
}
.gnb.hide{display:none}

/* chips / tabs */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 16px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:32px;padding:0 13px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;color:var(--t2);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.chip.on{background:var(--violet);border-color:var(--violet);color:#fff;font-weight:600}
.chip.gold{border-color:rgba(232,200,114,.5);color:var(--secret);background:rgba(232,200,114,.08)}
.chip.lock{opacity:.5}
.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 16px}
.tabs button{flex:1;height:44px;font-size:15px;color:var(--t3);font-weight:600;position:relative}
.tabs button.on{color:var(--t1)}
.tabs button.on:after{content:"";position:absolute;left:20%;right:20%;bottom:-1px;height:2px;background:var(--violet);border-radius:2px}
.seg{display:flex;background:var(--surface);border-radius:12px;padding:4px;margin:0 16px}
.seg button{flex:1;height:36px;border-radius:9px;font-size:14px;color:var(--t3);font-weight:600}
.seg button.on{background:var(--raised);color:#fff;box-shadow:0 0 0 1px var(--line2)}

.btn{height:52px;border-radius:14px;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;width:100%}
.btn.coral{background:var(--coral);color:#fff}
.btn.coral:active{background:var(--coral2)}
.btn.violet{background:var(--violet);color:#fff}
.btn.ghost{background:var(--hover);color:var(--t1);border:1px solid var(--line2)}
.btn.line{border:1px solid var(--line2);color:var(--t1)}
.btn.sm{height:40px;font-size:14px;border-radius:11px}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.link{color:var(--t3);font-size:13px;text-decoration:underline;text-underline-offset:3px}

.badge{display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:.02em;line-height:1}
.badge.NEW{background:var(--coral);color:#fff}
.badge.adult{background:#15131F;color:#FF4D6D;border:1px solid #FF4D6D}
.badge.EPp{background:var(--ok);color:#0b1a12}
.badge.MULTI{background:var(--royal);color:#1a1300}
.badge.UPDATED{background:var(--violet);color:#fff}
.badge.BEST{background:#FF6FA0;color:#fff}
.badge.author{background:var(--violet);color:#fff}
.badge.grade{background:rgba(255,255,255,.08);color:var(--t2);border:1px solid var(--line2);font-weight:700}
.badge.grade.hon{background:linear-gradient(90deg,#FFB86B,#FF6FA0);color:#1a0a10;border:0}

/* stage badge */
.stage{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;border:1px solid currentColor;line-height:1.3;white-space:nowrap}

/* ---------- home ---------- */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px;margin-top:4px}
.quick button{background:var(--surface);border:1px solid var(--line);border-radius:12px;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11.5px;color:var(--t2)}
.quick button .e{font-size:19px}
.hero{position:relative;margin:14px 16px 0;border-radius:18px;overflow:hidden;aspect-ratio:16/10}
.hero-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hero-track::-webkit-scrollbar{display:none}
.hero-slide{flex:none;width:100%;height:100%;scroll-snap-align:start;position:relative;cursor:pointer}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hero-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(10,9,16,.92))}
.hero-cap{position:absolute;left:16px;right:16px;bottom:24px;z-index:2}
.hero-cap .k{font-size:11px;color:var(--gem);font-weight:700;margin-bottom:4px;display:flex;gap:4px;align-items:center}
.hero-cap h2{font-size:20px;line-height:1.3;font-weight:800;letter-spacing:-.02em;text-wrap:balance;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-cap p{font-size:12.5px;color:var(--t2);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dots{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:3}
.dots i{width:5px;height:5px;border-radius:3px;background:rgba(255,255,255,.35);transition:width .2s}
.dots i.on{width:16px;background:#fff}
.banner{margin:12px 16px 0;border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;border:1px solid var(--line)}
.banner.deal{background:linear-gradient(90deg,rgba(255,77,109,.22),rgba(255,138,61,.1));border-color:rgba(255,77,109,.35)}
.banner.first{background:var(--surface);border-color:rgba(123,92,255,.55)}
.banner .bt{flex:1;min-width:0}
.banner .bt .s{font-size:11px;color:var(--t3);font-weight:600}
.banner .bt .m{font-size:14px;font-weight:700;margin-top:1px;line-height:1.35}
.banner .bt .c{font-size:12px;color:var(--coral);font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.banner .thumb{width:44px;height:44px;border-radius:10px;overflow:hidden;flex:none}
.banner .thumb img{width:100%;height:100%;object-fit:cover}
.strike{text-decoration:line-through;color:var(--t3);font-weight:500}

.rail{display:flex;gap:10px;overflow-x:auto;padding:0 16px;scrollbar-width:none;scroll-snap-type:x proximity}
.rail::-webkit-scrollbar{display:none}
.card{position:relative;cursor:pointer;min-width:0}
.rail .card{flex:none;width:132px;scroll-snap-align:start}
.card .ph{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--surface)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .16s ease-out}
.card:hover .ph img{transform:scale(1.03)}
.card .ph:after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(transparent,rgba(15,14,23,.85))}
.card .bdg{position:absolute;top:7px;left:7px;display:flex;gap:4px;z-index:2}
.card .rk{position:absolute;left:6px;bottom:2px;z-index:2;font-size:34px;font-weight:900;font-style:italic;line-height:1;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6);letter-spacing:-.04em}
.card .met{position:absolute;right:7px;bottom:7px;z-index:2;font-size:11px;color:#fff;font-weight:600;display:flex;gap:3px;align-items:center}
.card .nm{font-size:14.5px;font-weight:700;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .q{font-size:12px;color:var(--t2);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.card .au{font-size:11px;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;padding:0 16px}
.multi{flex:none;width:260px;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line);cursor:pointer}
.multi .ph{aspect-ratio:16/9;position:relative;overflow:hidden}
.multi .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.multi .inf{padding:10px 12px}
.multi .inf b{font-size:15px}
.multi .inf p{font-size:12px;color:var(--t2);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.faces{display:flex;margin-top:8px}
.faces span{width:24px;height:24px;border-radius:50%;overflow:hidden;border:2px solid var(--surface);margin-right:-7px}
.faces span img{width:100%;height:100%;object-fit:cover}

/* ---------- explore reels ---------- */
.reels{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}
.reels::-webkit-scrollbar{display:none}
.reel{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#000}
.reel>img{width:100%;height:100%;object-fit:cover}
.reel:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0,transparent 18%,transparent 48%,rgba(0,0,0,.9) 100%);pointer-events:none}
.reel-top{position:absolute;top:44px;left:0;right:0;z-index:5;display:flex;justify-content:center;gap:18px;font-size:16px;font-weight:700;color:rgba(255,255,255,.6)}
.reel-top b{color:#fff;border-bottom:2px solid #fff;padding-bottom:3px}
.reel-act{position:absolute;right:12px;bottom:170px;z-index:3;display:flex;flex-direction:column;gap:22px;align-items:center}
.reel-act button{display:flex;flex-direction:column;align-items:center;font-size:11.5px;font-weight:600;gap:3px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.reel-act button .e{font-size:28px;line-height:1}
.reel-act button.liked .e{color:var(--coral)}
.reel-info{position:absolute;left:16px;right:78px;bottom:110px;z-index:3}
.reel-info .nmrow{display:flex;align-items:center;gap:10px}
.reel-info h3{font-size:22px;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.reel-info .go{height:30px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);font-size:13px;font-weight:700;border:1px solid rgba(255,255,255,.3)}
.reel-info .go.hot{background:var(--coral);border-color:var(--coral);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,77,109,.6)}60%{box-shadow:0 0 0 10px rgba(255,77,109,0)}}
.reel-info .ql{font-size:14px;margin-top:8px;color:#eee;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.reel-info .tg{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;font-size:12px;color:#ddd}
.reel-hint{position:absolute;bottom:92px;left:0;right:0;text-align:center;z-index:3;font-size:11px;color:rgba(255,255,255,.55)}

/* ---------- ranking ---------- */
.upd{font-size:12px;color:var(--t3);padding:10px 16px 0}
.rrow{display:flex;gap:12px;align-items:center;padding:10px 16px;cursor:pointer}
.rrow:active{background:var(--surface)}
.rrow .no{width:26px;text-align:center;font-size:19px;font-weight:800;font-style:italic;font-variant-numeric:tabular-nums}
.rrow .no.g1{color:#F5C542}.rrow .no.g2{color:#C9CED8}.rrow .no.g3{color:#D08A57}
.rrow .th{width:62px;height:82px;border-radius:10px;overflow:hidden;flex:none}
.rrow .th img{width:100%;height:100%;object-fit:cover}
.rrow .bd{flex:1;min-width:0}
.rrow .bd b{font-size:15px;display:flex;gap:6px;align-items:center}
.rrow .bd .h{font-size:12.5px;color:var(--t2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .bd .tg{font-size:11.5px;color:var(--t3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow .bd .st{font-size:11.5px;color:var(--t3);margin-top:3px;display:flex;gap:10px}
.delta{font-size:11px;font-weight:800;padding:2px 6px;border-radius:6px;white-space:nowrap}
.delta.up{color:var(--ok);background:rgba(75,208,139,.12)}
.delta.new{color:#fff;background:var(--violet)}
.delta.same{color:var(--t3);background:rgba(255,255,255,.06)}
.weeknav{display:flex;align-items:center;justify-content:center;gap:18px;margin:14px 0 6px;font-weight:700}
.weeknav span{color:var(--t3);font-size:18px}
.podium{margin:10px 16px 0;padding:16px 12px 14px;border-radius:18px;background:radial-gradient(400px 200px at 50% 0,rgba(123,92,255,.28),transparent 70%),var(--surface);border:1px solid rgba(123,92,255,.35)}
.pod1{position:relative;display:flex;gap:12px;align-items:center;padding:14px;border-radius:14px;background:rgba(15,14,23,.6);border:1px solid rgba(245,197,66,.45)}
.pod-av{position:relative;flex:none}
.pod-av .ring{width:74px;height:74px;border-radius:14px;overflow:hidden;border:2px solid #F5C542}
.pod-av .ring img{width:100%;height:100%;object-fit:cover}
.pod-av .crown{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:24px}
.pod-av .no{position:absolute;right:-8px;top:-8px;width:28px;height:28px;border-radius:50%;background:#F5B301;color:#1a1300;font-size:11px;font-weight:900;display:grid;place-items:center;border:2px solid var(--surface)}
.pod-av.s2 .ring{border-color:#C9CED8}.pod-av.s2 .no{background:#C9CED8}
.pod-av.s3 .ring{border-color:#D08A57}.pod-av.s3 .no{background:#D08A57}
.pod-nm{font-size:17px;font-weight:800}
.pod-fav{font-size:12px;color:var(--t2)}
.pod-fav b{color:var(--t1)}
.gauge{display:grid;grid-template-columns:52px 1fr;gap:4px 8px;align-items:center;font-size:11.5px;color:var(--t2);margin-top:8px}
.gauge .dots5{display:flex;gap:3px}
.gauge .dots5 i{width:11px;height:8px;border-radius:2px;background:#2F2C3B}
.gauge .dots5.a i.on{background:var(--coral)}
.gauge .dots5.c i.on{background:var(--warn)}
.gauge .dots5.t i.on{background:var(--ok)}
.pod-foot{border-top:1px dashed var(--line2);margin-top:10px;padding-top:8px;font-size:12px;color:var(--t3);display:flex;align-items:center;justify-content:center;gap:6px}
.pod23{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.ucard{padding:14px 12px;border-radius:14px;background:rgba(15,14,23,.55);border:1px solid var(--line);text-align:center}
.ucard .rn{font-size:13px;color:var(--t3);font-weight:800}
.ucard .av{width:52px;height:52px;border-radius:50%;overflow:hidden;margin:6px auto;border:2px solid var(--line2)}
.ucard .av img{width:100%;height:100%;object-fit:cover}
.ucard .gauge{text-align:left;grid-template-columns:44px 1fr}
.ucards{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px;margin-top:12px}
.ucards .ucard{background:var(--surface)}
.myrank{margin:14px 16px 0;padding:12px 14px;border-radius:14px;background:linear-gradient(90deg,rgba(123,92,255,.2),rgba(123,92,255,.05));border:1px solid rgba(123,92,255,.4);display:flex;align-items:center;gap:10px;font-size:13px}

/* ---------- detail ---------- */
.dt-hero{position:relative;height:470px;margin-top:-34px}
.dt-hero .hero-track{height:100%}
.dt-hero .hero-slide:after{background:linear-gradient(180deg,rgba(0,0,0,.35) 0,transparent 20%,transparent 60%,var(--bg) 100%)}
.dt-top{position:absolute;top:58px;left:12px;right:12px;display:flex;z-index:6;justify-content:space-between;align-items:center}
.dt-top .iconbtn{width:38px;height:38px;font-size:18px;border-radius:50%;
  background:rgba(10,9,16,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.dt-top .iconbtn:active{background:rgba(12,11,18,.75)}
/* 밝은 일러스트 위에서도 상태바·아이콘이 읽히도록 상단 스크림 */
.dt-hero:before{content:'';position:absolute;left:0;right:0;top:0;height:150px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.66) 0,rgba(0,0,0,.3) 42%,transparent 100%)}
.dt-count{position:absolute;right:16px;bottom:24px;z-index:4;font-size:11px;background:rgba(0,0,0,.5);padding:3px 8px;border-radius:999px}
.dt-body{padding:0 16px;margin-top:-12px;position:relative;z-index:2}
.dt-content > .dt-body:first-child{margin-top:0}
.dt-met{display:flex;gap:14px;font-size:13px;color:var(--t2);align-items:center}
.dt-met button{display:flex;gap:4px;align-items:center}
.dt-met button.liked{color:var(--coral)}
.dt-name{font-size:30px;font-weight:800;letter-spacing:-.03em;margin-top:6px;line-height:1.2}
.dt-name small{font-size:16px;color:var(--t3);font-weight:500;margin-left:4px}
.dt-au{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--t2);margin-top:4px}
.dt-hook{font-size:14.5px;color:var(--t1);margin-top:10px;line-height:1.55}
.dt-quote{font-size:14px;color:var(--t2);font-style:italic;margin-top:6px}
.tagwrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tagwrap span{font-size:12px;padding:4px 9px;border-radius:999px;background:var(--surface);color:var(--t2);border:1px solid var(--line)}
.box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:14px}
.box h4{font-size:16px;font-weight:700;display:flex;align-items:center;gap:6px;justify-content:space-between}
.box h4 .s{font-size:12px;color:var(--t3);font-weight:500}
.road{position:relative;margin-top:14px}
.road-line{position:absolute;left:11px;top:10px;bottom:10px;width:2px;background:linear-gradient(#8E8AA3,#CFCBE0,#5CC8D8,#FF8FAB,#FFB86B)}
.road-step{position:relative;display:flex;gap:12px;padding:7px 0}
.road-step .dot{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:9.5px;font-weight:800;color:#0F0E17;z-index:1}
.road-step .rb b{font-size:14px}
.road-step .rb .rg{font-size:11px;color:var(--t3);margin-left:6px}
.road-step .rb p{font-size:12.5px;color:var(--t2);margin-top:1px;font-style:italic}
.road-step.cur .rb b:after{content:"현재";font-size:10px;font-style:normal;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--violet);color:#fff;vertical-align:2px}
.tiercount{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:12px}
.tiercount div{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--t2);font-variant-numeric:tabular-nums}
.tiercount i{width:8px;height:8px;border-radius:50%;flex:none}
.tiercount b{color:var(--t1);margin-left:auto}
.placechips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.blurgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.cc{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#000;cursor:pointer}
.cc img{width:100%;height:100%;object-fit:cover}
.cc.locked img{filter:blur(18px) brightness(.72) saturate(1.2);transform:scale(1.25)}
.cc .lk{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10.5px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.cc .lk .ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;background:rgba(0,0,0,.35);border:1.5px solid currentColor}
.cc .tb{position:absolute;left:0;right:0;bottom:0;height:3px}
.cc .pl{position:absolute;left:5px;top:5px;font-size:9.5px;padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.55);color:#ddd}
.cc.secret .lk{color:var(--secret)}
.cc.secret{box-shadow:inset 0 0 0 1.5px rgba(232,200,114,.55)}
.intro p{font-size:14px;color:var(--t2);line-height:1.65;margin-top:6px}
.intro .lab{font-size:12px;font-weight:700;margin-top:12px;display:flex;gap:5px;align-items:center}
.introchips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:12px -16px 0;padding:0 16px}
.introchips::-webkit-scrollbar{display:none}
.introchips .chip.done:before{content:"✓";color:var(--ok);font-weight:800}
/* 오프닝 장면 컷 — 16:9 로 잘라 상황 한 줄을 그 위에 얹는다 */
.introcut{position:relative;margin-top:12px;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--bg)}
.introcut img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.introcut:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(15,14,23,.92))}
.introcut span{position:absolute;left:12px;right:12px;bottom:10px;z-index:1;font-size:12px;color:var(--t2);line-height:1.5}
.prev{margin-top:12px;border-radius:14px;background:var(--bg);border:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:10px}
.acc{border-top:1px solid var(--line)}
.acc:first-of-type{border-top:0}
.acc summary{list-style:none;display:flex;align-items:center;gap:8px;padding:12px 0;cursor:pointer;font-size:14px}
.acc summary::-webkit-details-marker{display:none}
.acc summary code{font-family:inherit;font-weight:700;color:var(--violet2);background:rgba(123,92,255,.14);padding:2px 8px;border-radius:6px}
.acc summary .c{margin-left:auto;font-size:12px;color:var(--gem)}
.acc summary:after{content:"⌄";color:var(--t3);margin-left:4px}
.acc[open] summary:after{transform:rotate(180deg)}
.acc .ab{padding:0 0 12px;font-size:13px;color:var(--t2)}
.log{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.log div{font-size:13px;color:var(--t2);display:flex;gap:6px}
.log div b{color:var(--t3);font-weight:500;font-variant-numeric:tabular-nums;flex:none}
.cmt{padding:14px 0;border-bottom:1px solid var(--line)}
.cmt .who{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;flex-wrap:wrap}
.cmt .av{width:26px;height:26px;border-radius:50%;background:var(--raised);overflow:hidden;flex:none;display:grid;place-items:center;font-size:12px}
.cmt .av img{width:100%;height:100%;object-fit:cover}
.cmt p{font-size:14px;color:var(--t1);margin:6px 0 0 32px;line-height:1.55}
.cmt .ft{margin:6px 0 0 32px;font-size:12px;color:var(--t3);display:flex;gap:14px}
.cmt.pinned{background:rgba(123,92,255,.06);margin:0 -16px;padding:14px 16px}
.fic{padding:14px;border-radius:14px;background:var(--bg);border:1px solid var(--line);margin-top:10px;cursor:pointer}
.fic b{font-size:15px}
.fic p{font-size:13px;color:var(--t2);margin-top:4px}
.fic .ft{font-size:12px;color:var(--t3);margin-top:6px;display:flex;gap:10px}
.samerail .card{width:120px}
.soon{position:absolute;right:6px;top:6px;z-index:3;font-size:9.5px;background:rgba(0,0,0,.6);padding:1px 6px;border-radius:4px;color:var(--t2)}
.cta-bar{position:absolute;left:0;right:0;bottom:0;padding:12px 16px 26px;background:linear-gradient(transparent,var(--bg) 30%);z-index:40;display:flex;gap:10px;align-items:center}
.cta-bar .likebtn{width:52px;height:52px;border-radius:14px;background:var(--surface);border:1px solid var(--line);flex:none;font-size:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.cta-bar .likebtn small{font-size:10px;color:var(--t3);margin-top:2px}

/* ---------- chat ---------- */
.chat{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.chat.blurred .msgs,.chat.blurred .chat-bottom{filter:blur(6px);opacity:.6}
.chat-hd{padding:40px 8px 0;flex:none;background:rgba(15,14,23,.94);border-bottom:1px solid var(--line);position:relative;z-index:5}
.chat-hd .row{display:flex;align-items:center;gap:6px;height:48px}
.chat-hd .av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none}
.chat-hd .av img{width:100%;height:100%;object-fit:cover}
.chat-hd .ti{flex:1;min-width:0}
.chat-hd .ti b{font-size:15.5px;display:block;line-height:1.2}
.chat-hd .ti .sl{font-size:11px;font-weight:700;display:flex;align-items:center;gap:6px;margin-top:1px}
.affbar{height:3px;background:#2A2737;position:relative;overflow:hidden}
.affbar i{position:absolute;left:0;top:0;bottom:0;border-radius:0 2px 2px 0;transition:width .6s var(--ease),background .4s}
.mission-bar{flex:none;display:flex;align-items:center;gap:8px;padding:7px 14px;background:rgba(255,209,102,.08);border-bottom:1px solid rgba(255,209,102,.2);font-size:12px;color:var(--gem)}
.mission-bar b{color:var(--t1);font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msgs{flex:1;overflow-y:auto;padding:14px 14px 10px;display:flex;flex-direction:column;gap:10px;scrollbar-width:none}
.msgs::-webkit-scrollbar{display:none}
.msgs>*{flex:0 0 auto}
.msg-in{animation:fadeIn .3s ease both}
.m-img{margin:0 -14px;position:relative}
/* 장면 컷은 3:4 원본이라 4:3으로 자르면 얼굴이 날아간다 */
.m-img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 16%}
.m-sys{align-self:center;font-size:12px;color:var(--gem);background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.2);padding:6px 12px;border-radius:10px;text-align:center;max-width:94%}
.m-sit{font-size:14.5px;color:#DCD7E8;text-align:left;padding:0 2px;margin:2px 0;line-height:1.7;text-wrap:pretty;max-width:92%}
.m-char{display:flex;gap:8px;align-items:flex-start;max-width:88%}
.m-char .av{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none}
.m-char .av img{width:100%;height:100%;object-fit:cover}
.m-char .who{font-size:11.5px;color:var(--t3);margin-bottom:3px}
.bub{padding:10px 13px;border-radius:4px 16px 16px 16px;background:var(--raised);font-size:14.5px;line-height:1.55}
.m-user{align-self:flex-end;max-width:80%}
.m-user .bub{background:var(--violet);border-radius:16px 4px 16px 16px;color:#fff}
.typing{display:flex;gap:4px;padding:14px 16px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:tp 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.m-status{border-radius:14px;border:1px solid rgba(123,92,255,.3);background:linear-gradient(180deg,rgba(123,92,255,.1),rgba(123,92,255,.03));padding:10px 12px;font-size:12.5px;color:var(--t2);display:flex;flex-direction:column;gap:5px}
.m-status .r{display:flex;flex-wrap:wrap;gap:4px 10px}
.m-status .r span{white-space:nowrap}
.m-status .aff{display:flex;align-items:center;gap:8px}
.m-status .aff .bar{flex:1;height:4px;border-radius:2px;background:#2A2737;overflow:hidden}
.m-status .aff .bar i{display:block;height:100%}
.m-status .in{color:#E2DAFF;font-style:italic}
.m-status.mini{flex-direction:row;padding:6px 10px;opacity:.6;font-size:11.5px;border-color:var(--line)}
.m-status.mini .hide{display:none}
.m-status.pop{animation:pop .5s var(--ease)}
@keyframes pop{0%{box-shadow:0 0 0 0 rgba(123,92,255,.6)}100%{box-shadow:0 0 0 12px rgba(123,92,255,0)}}
.skipbtn{position:absolute;right:14px;top:96px;z-index:6;height:30px;padding:0 12px;border-radius:999px;background:rgba(0,0,0,.6);border:1px solid var(--line2);font-size:12.5px;font-weight:600;backdrop-filter:blur(6px)}
.chat-bottom{flex:none;background:var(--bg);border-top:1px solid var(--line);padding:8px 0 22px;position:relative}
.accrual{display:flex;align-items:center;gap:8px;padding:0 14px 8px;font-size:11.5px;color:var(--t3)}
.accrual .bar{flex:1;height:4px;border-radius:2px;background:#2A2737;overflow:hidden}
.accrual .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--coral));transition:width .5s var(--ease)}
.accrual b{color:var(--t1);font-variant-numeric:tabular-nums}
.modes{display:flex;gap:6px;padding:0 14px;overflow-x:auto;scrollbar-width:none}
.modes::-webkit-scrollbar{display:none}
.modes .chip{height:28px;font-size:12px;padding:0 10px}
.modes .chip .c{color:var(--gem);font-weight:700;font-variant-numeric:tabular-nums}
.modes .chip.on .c{color:#fff}
.modes .chip.lock{opacity:1;color:var(--t4);background:#16141F;border-style:dashed}
.modes .chip.lock .c{color:var(--t4)}
.sugs{display:flex;gap:6px;padding:8px 14px 0;overflow-x:auto;scrollbar-width:none}
.sugs::-webkit-scrollbar{display:none}
.sugs button{flex:none;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;padding:6px 11px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--t2)}
.sugs .lab{flex:none;font-size:11px;color:var(--t3);align-self:center}
.inputrow{display:flex;align-items:flex-end;gap:6px;padding:8px 10px 0}
.inputrow .ib{width:38px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:18px;font-weight:800;flex:none;display:grid;place-items:center;color:var(--t2)}
.inputrow .ib.on{background:var(--violet);color:#fff;border-color:var(--violet)}
.inputrow textarea{flex:1;min-height:40px;max-height:96px;resize:none;border-radius:12px;background:var(--surface);border:1px solid var(--line);padding:9px 12px;font-size:14.5px;outline:none;line-height:1.45}
.inputrow textarea:focus{border-color:rgba(123,92,255,.6)}
.inputrow .send{width:40px;height:40px;border-radius:12px;background:var(--coral);color:#fff;font-size:18px;flex:none;display:grid;place-items:center}
.inputrow .send[disabled]{background:var(--raised);color:var(--t4)}
.ac{position:absolute;left:10px;right:10px;bottom:100%;margin-bottom:6px;background:var(--raised);border:1px solid var(--line2);border-radius:14px;padding:6px;box-shadow:0 -10px 30px rgba(0,0,0,.4);z-index:10}
.ac button{display:flex;width:100%;text-align:left;gap:10px;align-items:center;padding:9px 10px;border-radius:9px;font-size:13px}
.ac button:hover,.ac button.hl{background:var(--hover)}
.ac button code{font-family:inherit;font-weight:800;color:var(--violet2);width:56px;flex:none}
.ac button span{flex:1;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac button em{font-style:normal;color:var(--gem);font-size:12px;font-weight:700}
.plusmenu{position:absolute;left:10px;bottom:100%;margin-bottom:6px;background:var(--raised);border:1px solid var(--line2);border-radius:14px;padding:6px;display:flex;gap:4px;z-index:10;box-shadow:0 -10px 30px rgba(0,0,0,.4)}
.plusmenu button{width:92px;padding:10px 4px;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px}
.plusmenu button:hover{background:var(--hover)}
.plusmenu button .e{font-size:22px}
.plusmenu button em{font-style:normal;font-size:11px;color:var(--gem);font-weight:700}

/* command components */
.cmdwrap{align-self:stretch}
.cmdlab{font-size:11px;color:var(--t3);margin-bottom:6px;display:flex;gap:6px;align-items:center}
.cmdlab code{font-family:inherit;color:var(--violet2);font-weight:800}
/* .phone·.noti·.board·.kakao·.innercard·.gaugecard → command-render.css (스튜디오 미리보기와 공유) */
.compat{border-radius:16px;padding:16px;background:linear-gradient(135deg,rgba(255,209,102,.16),rgba(255,77,109,.1));border:1px solid rgba(255,209,102,.35);text-align:center}
.compat b{font-size:36px;font-weight:800;color:var(--gem)}

/* stage up overlay */
.stageup{position:absolute;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 45%,rgba(255,143,171,.28),rgba(15,14,23,.98) 62%),rgba(15,14,23,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:suIn 1.5s var(--ease) both;text-align:center;padding:24px}
.stageup .from{font-size:14px;color:var(--t3)}
.stageup .to{font-size:40px;font-weight:900;letter-spacing:-.03em;margin:8px 0;animation:zoom 1.5s var(--ease) both}
.stageup .code{font-size:13px;font-weight:800;padding:3px 10px;border-radius:999px;border:1.5px solid currentColor}
.stageup .call{margin-top:18px;font-size:15px;color:var(--t1);background:rgba(255,255,255,.07);padding:10px 16px;border-radius:12px}
.stageup .call s{color:var(--t3)}
@keyframes suIn{0%{opacity:0}8%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes zoom{0%{transform:scale(.6);opacity:0}25%{transform:scale(1.06);opacity:1}40%{transform:scale(1)}}

/* ---------- overlays ---------- */
#layer{position:absolute;inset:0;z-index:100;pointer-events:none}
.ov{position:absolute;inset:0;pointer-events:auto;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.66);animation:ovIn .22s ease both}
.ov.sheet-ov{align-items:flex-end}
.ov.clear{background:rgba(0,0,0,.35)}
.ov.closing{animation:ovOut .2s ease both}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
@keyframes ovOut{to{opacity:0}}
.modal{width:calc(100% - 40px);max-height:calc(100% - 100px);overflow:auto;background:var(--raised);border-radius:var(--r-modal);padding:22px 20px 18px;animation:mIn .22s var(--ease) both;border:1px solid var(--line);scrollbar-width:none}
@keyframes mIn{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
.sheet{width:100%;max-height:88%;overflow:auto;background:var(--raised);border-radius:22px 22px 0 0;padding:10px 18px 30px;animation:sIn .26s var(--ease) both;border-top:1px solid var(--line2);scrollbar-width:none}
.sheet::-webkit-scrollbar,.modal::-webkit-scrollbar{display:none}
.sheet.tall{height:88%}
@keyframes sIn{from{transform:translateY(100%)}to{transform:none}}
.grab{width:40px;height:4px;border-radius:2px;background:var(--t4);margin:0 auto 12px}
.sh-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sh-h h3{font-size:18px;font-weight:800}
.x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:var(--t3)}
.modal h3{font-size:19px;font-weight:800;text-align:center;line-height:1.35;text-wrap:balance}
.modal .ds{font-size:13.5px;color:var(--t2);text-align:center;margin-top:6px;line-height:1.55}
.prefcards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.prefcards button{border-radius:14px;overflow:hidden;position:relative;aspect-ratio:3/4.4;border:2px solid transparent;background:#000}
.prefcards button img{width:100%;height:100%;object-fit:cover;opacity:.85}
.prefcards button .split{display:flex;height:100%}
.prefcards button .split img{width:50%}
.prefcards button span{position:absolute;left:0;right:0;bottom:0;padding:22px 6px 8px;background:linear-gradient(transparent,rgba(0,0,0,.9));font-size:14px;font-weight:800}
.prefcards button span small{display:block;font-size:10.5px;color:var(--t2);font-weight:500}
.prefcards button.on{border-color:var(--violet);box-shadow:0 0 0 3px rgba(123,92,255,.3)}
.prefcards button.on:before{content:"✓";position:absolute;right:6px;top:6px;z-index:2;width:22px;height:22px;border-radius:50%;background:var(--violet);display:grid;place-items:center;font-size:12px;font-weight:800}
.benefit{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.benefit div{display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;background:var(--surface);font-size:13.5px}
.benefit div .e{font-size:22px}
.benefit div b{display:block;font-size:14.5px}
.benefit div small{color:var(--t3)}
.foot{font-size:11px;color:var(--t3);margin-top:10px;line-height:1.5;text-align:center}
.illu{width:120px;height:120px;margin:4px auto 6px;position:relative;display:grid;place-items:center}
.illu .glow{position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle,rgba(123,92,255,.55),transparent 70%);filter:blur(6px)}
.illu .e{font-size:72px;position:relative;filter:drop-shadow(0 10px 18px rgba(123,92,255,.5));animation:float 3s ease-in-out infinite}
.illu .spark{position:absolute;font-size:14px;animation:tw 1.8s infinite}
@keyframes float{50%{transform:translateY(-6px) rotate(-4deg)}}
@keyframes tw{50%{opacity:.2;transform:scale(.6)}}
.terms .all{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:12px;background:var(--surface);font-weight:700;font-size:14.5px}
.terms label{display:flex;align-items:center;gap:10px;padding:11px 4px;font-size:14px;cursor:pointer}
.terms label .req{color:var(--coral);font-size:12.5px}
.terms label .opt{color:var(--t3);font-size:12.5px}
.terms label .arr{margin-left:auto;color:var(--t4)}
.terms .indent{margin-left:30px;padding-top:0}
.terms .hint{margin:-6px 0 4px 60px;font-size:12px;color:var(--t3)}
.cbx{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:5px;border:1.5px solid var(--t4);flex:none;display:grid;place-items:center;cursor:pointer;background:transparent}
.cbx:checked{background:var(--coral);border-color:var(--coral)}
.cbx:checked:after{content:"✓";color:#fff;font-size:13px;font-weight:900;line-height:1}
.round.cbx{border-radius:50%}
.row{display:flex;align-items:center;gap:8px}
.kv{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;color:var(--t2)}
.kv b{color:var(--t1);font-variant-numeric:tabular-nums}
.kv.short b{color:var(--coral)}
.toggle{width:46px;height:28px;border-radius:14px;background:#3A3748;position:relative;flex:none;transition:background .2s}
.toggle:after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.toggle.on{background:var(--violet)}
.toggle.on:after{transform:translateX(18px)}

/* toast */
#toasts{position:absolute;left:0;right:0;top:92px;z-index:400;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{background:rgba(36,33,47,.97);border:1px solid var(--line2);padding:10px 16px;border-radius:999px;font-size:13.5px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:tIn .26s var(--ease) both;max-width:92%;text-align:center}
.toast.out{animation:ovOut .25s ease both}
@keyframes tIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* paywall */
.pw-h{text-align:center;padding-top:4px}
.pw-h .e{font-size:40px}
.pw-h h3{font-size:20px;font-weight:800;margin-top:4px}
.pw-h p{font-size:14px;color:var(--t2);margin-top:4px}
.pw-kv{background:var(--surface);border-radius:14px;padding:8px 14px;margin-top:14px}
.prod{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-top:8px;cursor:pointer;position:relative}
.prod.best{border:1.5px solid var(--coral);background:linear-gradient(90deg,rgba(255,77,109,.12),rgba(255,77,109,.03))}
.prod .pb{flex:1;min-width:0}
.prod .pb b{font-size:17px;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:6px}
.prod .pb small{display:block;font-size:12px;color:var(--t3);margin-top:1px;font-variant-numeric:tabular-nums}
.prod .pp{height:36px;padding:0 12px;border-radius:10px;background:var(--raised);font-weight:700;font-size:14px;display:grid;place-items:center;font-variant-numeric:tabular-nums;border:1px solid var(--line2);white-space:nowrap}
.prod.best .pp{background:var(--coral);border-color:var(--coral);color:#fff}
.prod .flag{position:absolute;top:-9px;left:12px;font-size:10.5px;font-weight:800;background:var(--coral);color:#fff;padding:1px 7px;border-radius:5px}
.prod .flag.alt{background:var(--raised);color:var(--t2);border:1px solid var(--line2)}
.wallet{background:var(--surface);border-radius:16px;padding:14px;border:1px solid var(--line)}
.wallet .tot{display:flex;align-items:baseline;gap:6px}
.wallet .tot b{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums}
.wallet .lots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.wallet .lots div{background:var(--bg);border-radius:10px;padding:8px;font-size:11.5px;color:var(--t3)}
.wallet .lots div b{display:block;font-size:14px;color:var(--t1);font-variant-numeric:tabular-nums}
.wallet .lots div em{font-style:normal;font-size:10.5px;color:var(--warn)}
.expire{font-size:12px;color:var(--t3);background:rgba(255,138,61,.07);border:1px solid rgba(255,138,61,.2);border-radius:10px;padding:8px 10px;margin-top:14px;line-height:1.5}
.subtable{width:100%;border-collapse:collapse;margin-top:12px;font-size:12.5px}
.subtable th,.subtable td{padding:9px 4px;text-align:center;border-bottom:1px solid var(--line)}
.subtable th{font-size:13px}
.subtable td:first-child,.subtable th:first-child{text-align:left;color:var(--t3)}
.subtable .hl{background:rgba(123,92,255,.1)}
.subtable th .p{display:block;font-size:11.5px;color:var(--t3);font-weight:500}
.spin{width:36px;height:36px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* collection */
.ringp{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative}
.ringp:before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.ringp b{position:relative;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.colrow{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin:0 16px 10px;cursor:pointer}
.colrow .th{width:48px;height:64px;border-radius:9px;overflow:hidden;flex:none}
.colrow .th img{width:100%;height:100%;object-fit:cover}
.colrow .bd{flex:1;min-width:0}
.colrow .bd b{font-size:15px}
.colrow .bd .tc{display:flex;gap:8px;font-size:11px;color:var(--t3);margin-top:4px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.colrow .bd .tc i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:3px;vertical-align:1px}
.miles{position:relative;height:8px;border-radius:4px;background:#2A2737;margin:26px 4px 34px}
.miles>i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,var(--violet),var(--coral))}
.miles .mk{position:absolute;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:var(--raised);border:2px solid var(--t4)}
.miles .mk.hit{border-color:var(--coral);background:var(--coral)}
.miles .mk span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:10.5px;color:var(--t3);white-space:nowrap;font-weight:700}
.miles .mk em{position:absolute;top:18px;left:50%;transform:translateX(-50%);font-size:10.5px;color:var(--t2);white-space:nowrap;font-style:normal}
.plist{display:flex;flex-direction:column;gap:8px}
.prow{padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.prow .t{display:flex;justify-content:space-between;align-items:center;font-size:13.5px}
.prow .t b{font-variant-numeric:tabular-nums}
.prow .pb{height:4px;border-radius:2px;background:#2A2737;margin:8px 0;overflow:hidden}
.prow .pb i{display:block;height:100%;background:var(--violet)}
.prow button{font-size:12.5px;color:var(--violet2);font-weight:700}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 16px}
.unlock-img{position:relative;width:200px;aspect-ratio:3/4;margin:0 auto;border-radius:16px;overflow:hidden}
.unlock-img img{width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.72);transform:scale(1.25);transition:filter 1.2s var(--ease),transform 1.2s var(--ease)}
.unlock-img.rev img{filter:none;transform:none}
.unlock-img .lk{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;transition:opacity .3s}
.unlock-img.rev .lk{opacity:0}
.unlock-img .ring{position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 2px var(--tc)}
.unlock-img.rev .ring{animation:ring 1.2s var(--ease)}
@keyframes ring{0%{box-shadow:inset 0 0 0 2px var(--tc),0 0 0 0 var(--tc)}50%{box-shadow:inset 0 0 0 4px var(--tc),0 0 40px 10px var(--tc)}100%{box-shadow:inset 0 0 0 2px var(--tc),0 0 0 0 transparent}}
.parts{position:absolute;left:50%;top:50%;pointer-events:none}
.parts i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--tc);opacity:0;animation:part 1.2s var(--ease) forwards}
@keyframes part{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
.tierline{text-align:center;font-size:13px;font-weight:800;margin-top:12px}
.cond{margin-top:10px;background:var(--surface);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--t2);line-height:1.55}
.cond b{color:var(--t1)}
.holds{display:flex;justify-content:center;gap:14px;font-size:13px;color:var(--t2);margin-top:10px;font-variant-numeric:tabular-nums}

/* attendance */
.stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px}
.stamp{aspect-ratio:1/1.15;border-radius:14px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11.5px;color:var(--t3);position:relative}
.stamp b{font-size:12px;color:var(--t2)}
.stamp .rw{font-size:12.5px;color:var(--t1);font-weight:700;text-align:center}
.stamp.done{background:rgba(123,92,255,.12);border-color:rgba(123,92,255,.4)}
.stamp.done:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-size:40px;color:rgba(255,77,109,.85);font-weight:900;transform:rotate(-12deg)}
.stamp.today{border:1.5px solid var(--coral);box-shadow:0 0 0 3px rgba(255,77,109,.18)}
.stamp.big{grid-column:span 2;aspect-ratio:auto;background:linear-gradient(135deg,rgba(245,179,1,.18),rgba(245,179,1,.04));border-color:rgba(245,179,1,.45)}
.stamp.pressed:after{animation:stampIn .45s var(--ease)}
@keyframes stampIn{0%{transform:rotate(-12deg) scale(2.2);opacity:0}100%{transform:rotate(-12deg) scale(1);opacity:1}}

/* chats list / mission */
.clist .ci{display:flex;gap:12px;padding:12px 16px;align-items:center;cursor:pointer}
.clist .ci:active{background:var(--surface)}
.clist .ci .av{width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none}
.clist .ci .av img{width:100%;height:100%;object-fit:cover}
.clist .ci .bd{flex:1;min-width:0}
.clist .ci .bd .t{display:flex;align-items:center;gap:6px}
.clist .ci .bd .t b{font-size:15px}
.clist .ci .bd .t time{margin-left:auto;font-size:11.5px;color:var(--t3)}
.clist .ci .bd p{font-size:13px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.search{margin:8px 16px 0;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;padding:0 12px;gap:8px;color:var(--t3);font-size:14px}
.mcard{margin:0 16px 12px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);cursor:pointer}
.mcard .top{display:flex;gap:12px}
.mcard .th{width:76px;height:100px;border-radius:10px;overflow:hidden;flex:none;position:relative}
.mcard .th img{width:100%;height:100%;object-fit:cover}
.mcard .th span{position:absolute;left:5px;bottom:5px;font-size:10px;background:rgba(123,92,255,.9);padding:1px 6px;border-radius:5px;font-weight:700}
.mcard b{font-size:15px;line-height:1.35;display:block}
.mcard .au{font-size:12px;color:var(--t3);margin-top:2px}
.mcard .tg{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.mcard .tg span{font-size:11px;padding:2px 7px;border-radius:6px;background:var(--bg);color:var(--t2);border:1px solid var(--line)}
.mcard .tg span.h{color:var(--gem);border-color:rgba(255,209,102,.3)}
.mcard p{font-size:12.5px;color:var(--t2);margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcard .best{margin-top:10px;padding:8px 10px;border-radius:10px;background:var(--bg);font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard .rw{font-size:12px;color:var(--gem);font-weight:700;margin-top:4px}

/* my */
.prof{display:flex;gap:14px;align-items:center;padding:6px 16px 0}
.prof .av{width:68px;height:68px;border-radius:50%;overflow:hidden;border:2px solid var(--violet);flex:none}
.prof .av img{width:100%;height:100%;object-fit:cover}
.prof b{font-size:20px}
.prof .fav{font-size:13px;color:var(--t2)}
.prof .st{font-size:12px;color:var(--t3);margin-top:2px}
.menu{margin:14px 16px 0;border-radius:16px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.menu .mi{display:flex;align-items:center;gap:12px;padding:14px;font-size:14.5px;border-top:1px solid var(--line);cursor:pointer;width:100%;text-align:left}
.menu .mi:first-child{border-top:0}
.menu .mi .e{width:22px;text-align:center}
.menu .mi .r{margin-left:auto;color:var(--t3);font-size:13px;display:flex;align-items:center;gap:6px}
.menu .mi .sub{display:block;font-size:11.5px;color:var(--t3);margin-top:1px}
.menu h5{font-size:12px;color:var(--t3);padding:12px 14px 0;font-weight:700}
.subbanner{margin:14px 16px 0;border-radius:16px;padding:14px;background:linear-gradient(120deg,#3B2A8C,#7B5CFF 60%,#B26BFF);display:flex;align-items:center;gap:10px;cursor:pointer}
.subbanner b{font-size:15px;display:block}
.subbanner small{font-size:12px;opacity:.85}
.langgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px}
.langgrid button{height:48px;border-radius:12px;background:var(--surface);border:1.5px solid var(--line);font-size:13px;font-weight:600;padding:0 4px}
.langgrid button.on{border-color:var(--violet);background:rgba(123,92,255,.16)}

/* creator */
.gate{margin:12px 16px 0;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.gate .gh{display:flex;justify-content:space-between;align-items:center}
.gate .gh b{font-size:15px}
.gate .gi{display:flex;gap:8px;align-items:center;font-size:13.5px;padding:6px 0;color:var(--t2)}
.gate .gi .ok{color:var(--ok);font-weight:900;width:18px}
.gate .gi .no{color:var(--coral);font-weight:900;width:18px}
.gate .gi.miss{color:var(--t1)}
.gate .gi em{margin-left:auto;font-style:normal;font-size:12px;color:var(--t3)}
.meter{height:6px;border-radius:3px;background:#2A2737;margin-top:8px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--violet),var(--coral))}
.fld{margin:12px 16px 0}
.fld label{font-size:12.5px;color:var(--t3);font-weight:600;display:block;margin-bottom:5px}
.fld .in{min-height:42px;border-radius:12px;background:var(--surface);border:1px solid var(--line);padding:10px 12px;font-size:14px;width:100%;outline:none}
.fld textarea.in{min-height:110px;resize:none;line-height:1.55;white-space:pre-wrap}
.fld .cnt{text-align:right;font-size:11.5px;color:var(--t3);margin-top:4px;font-variant-numeric:tabular-nums}
.fld .miss{border-color:rgba(255,77,109,.6)}
.radios{display:flex;gap:16px;font-size:14px}
.radios label{display:flex;align-items:center;gap:6px;color:var(--t1);font-size:14px;margin:0}
.bottombar{position:absolute;left:0;right:0;bottom:0;padding:12px 16px 26px;background:linear-gradient(transparent,var(--bg) 25%);z-index:40;display:flex;gap:8px;flex-direction:column}

/* persona pick */
.pcards{display:flex;gap:10px;overflow-x:auto;padding:4px 16px;scroll-snap-type:x mandatory;scrollbar-width:none}
.pcards::-webkit-scrollbar{display:none}
.pcard{flex:none;width:240px;border-radius:18px;overflow:hidden;background:var(--surface);border:2px solid var(--line);scroll-snap-align:center;cursor:pointer}
.pcard.on{border-color:var(--violet);box-shadow:0 0 0 3px rgba(123,92,255,.25)}
.pcard .ph{height:220px;position:relative}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .ph .tag{position:absolute;left:10px;top:10px;z-index:1;font-size:11px;font-weight:700;background:rgba(123,92,255,.9);padding:2px 8px;border-radius:999px}
.pcard .bd{padding:12px}
.pcard .bd b{font-size:15px}
.pcard .bd .r{font-size:12px;color:var(--violet2);font-weight:700;margin-top:2px}
.pcard .bd p{font-size:12.5px;color:var(--t2);margin-top:6px;line-height:1.5}
/* 페르소나 한 장 — 캐러셀을 접고 폭을 다 쓴다. 이름·역할은 사진 위로 올려 본문에 글만 남긴다 */
.pcards.solo{display:block;overflow:visible;scroll-snap-type:none}
.pcards.solo .pcard{width:100%;max-width:520px;margin:0 auto}
.pcards.solo .pcard .ph{height:156px}
.pcards.solo .pcard .ph img{object-position:50% 20%}
.pcards.solo .pcard .ph:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(15,14,23,.92))}
.pcards.solo .pcard .bd{padding:14px 16px 16px}
.pcard .ph .nm{position:absolute;left:16px;right:16px;bottom:12px;z-index:1}
.pcard .ph .nm b{font-size:19px;font-weight:800;letter-spacing:-.01em}
.pcard .ph .nm span{display:block;font-size:12px;font-weight:700;color:var(--violet2);margin-top:1px}
/* 이름·나이·성별처럼 짧은 값은 칩으로 묶고, 긴 설정은 라벨 기둥을 세워 세로로 훑게 한다 */
.pmeta{display:flex;flex-wrap:wrap;gap:6px}
.pmeta span{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:12.5px;color:var(--t1)}
.pmeta span i{font-style:normal;font-size:11px;font-weight:700;color:var(--t4)}
.pspec{display:grid;gap:10px;margin-top:12px}
.pspec>div{display:flex;gap:10px;font-size:13px;line-height:1.62}
.pspec>div .k{flex:none;width:38px;font-size:12px;font-weight:700;color:var(--t3);word-break:keep-all}
.pspec>div .v{min-width:0;color:var(--t2);word-break:keep-all;overflow-wrap:break-word}
.pspec>div.sc{margin-top:2px;padding-top:11px;border-top:1px solid var(--line)}
.pspec>div.sc .k{color:var(--violet2)}
.pspec>div.sc .v{color:var(--t1)}
.pspec>div.fold{display:none}
.pspec.open>div.fold{display:flex}
.pmore{justify-self:start;height:30px;padding:0 12px;margin-top:2px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--t3)}
.pmore:hover{border-color:var(--line2);color:var(--t2)}

/* mode sheet */
.hlbl{display:flex;background:var(--bg);border-radius:999px;padding:3px;border:1px solid var(--line)}
.hlbl button{height:26px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:800;color:var(--t3)}
.hlbl button.on{background:var(--coral);color:#fff}
.hlbl button.on.bl{background:var(--violet)}
.modecard{display:flex;gap:12px;align-items:center;padding:14px;border-radius:14px;background:var(--surface);border:1.5px solid var(--line);margin-top:8px;cursor:pointer;width:100%;text-align:left}
.modecard .mi{width:40px;height:40px;border-radius:12px;background:var(--bg);display:grid;place-items:center;font-size:20px;flex:none}
.modecard b{font-size:15px;display:flex;gap:6px;align-items:center}
.modecard b em{font-style:normal;color:var(--gem);font-size:13px;font-variant-numeric:tabular-nums}
.modecard p{font-size:12.5px;color:var(--t3);margin-top:2px}
.modecard.on{border-color:var(--coral);background:linear-gradient(90deg,rgba(255,77,109,.12),transparent)}
.modecard.on .mi{background:var(--coral)}
.modecard.lock{opacity:.5}

/* fiction reader & LP */
.reader{padding:0 18px 140px}
.reader h1{font-size:22px;font-weight:800;margin-top:6px}
.reader .meta{display:flex;gap:10px;font-size:12px;color:var(--t3);margin-top:6px;align-items:center}
.reader .stat{font-size:12px;color:var(--violet2);background:rgba(123,92,255,.1);border-radius:8px;padding:8px 10px;margin-top:16px}
.reader .sit{font-size:14.5px;line-height:1.8;color:var(--t2);margin-top:14px}
.reader .ln{font-size:15px;line-height:1.7;margin-top:12px;color:var(--t1)}
.reader .ln .sp{font-size:12px;color:var(--t3);display:block}
.reader .ln.u{color:#CFC4FF}
.lp-hero{position:relative;height:430px;margin-top:-34px}
.lp-hero img{width:100%;height:100%;object-fit:cover}
.lp-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,var(--bg))}
.lp-hero .likes{position:absolute;right:14px;bottom:30px;z-index:2;background:rgba(0,0,0,.5);padding:4px 10px;border-radius:999px;font-size:12.5px}
.metchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.metchips span{font-size:11.5px;padding:4px 8px;border-radius:6px;background:var(--surface);border:1px solid var(--line);color:var(--t2)}
.follow{height:28px;padding:0 12px;border-radius:999px;background:var(--violet);font-size:12.5px;font-weight:700}
.follow.on{background:var(--raised);color:var(--t2)}
.plotban{margin-top:14px;padding:11px 12px;border-radius:12px;border:1px solid rgba(123,92,255,.6);background:rgba(123,92,255,.08);font-size:13px;display:flex;align-items:center;gap:6px}
.plotban em{font-style:normal;color:var(--violet2);font-weight:700}
.castcard{display:flex;gap:12px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-top:8px}
.castcard .th{width:64px;height:84px;border-radius:10px;overflow:hidden;flex:none}
.castcard .th img{width:100%;height:100%;object-fit:cover}
.castcard b{font-size:15px}
.castcard p{font-size:12.5px;color:var(--t2);margin-top:3px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .stageup{animation:none}
}

.av img,.chat-hd .av img,.m-char .av img,.clist .ci .av img,.prof .av img,.ucard .av img,.pod-av .ring img{object-position:50% 12%}
.card .ph img,.pcard .ph img,.castcard .th img,.colrow .th img,.rrow .th img,.mcard .th img{object-position:50% 25%}
#fixed{position:absolute;left:0;right:0;bottom:0;z-index:45}

/* 성인 레이어 */
.cc.adult img{filter:blur(26px) brightness(.42) saturate(.9);transform:scale(1.3)}
.m-adult{align-self:stretch;border-radius:16px;border:1px solid rgba(255,138,61,.45);background:linear-gradient(180deg,rgba(255,138,61,.1),rgba(255,138,61,.03));overflow:hidden}
.m-adult .veil{position:relative;padding:16px 14px}
.m-adult .veil .txt{filter:blur(7px);opacity:.55;font-size:14.5px;line-height:1.6;user-select:none}
.m-adult .veil .txt.open{filter:none;opacity:1}
.m-adult .veil .lock{position:absolute;inset:0;display:grid;place-items:center;font-size:30px}
.m-adult .ab{padding:12px 14px 14px;border-top:1px solid rgba(255,138,61,.25)}
.m-adult .ab b{font-size:14px;display:block}
.m-adult .ab p{font-size:12.5px;color:var(--t2);margin-top:3px;line-height:1.5}
.m-adult .ab .row{margin-top:12px}
.m-adult .ab .row .btn{height:42px;font-size:14px;border-radius:12px}
.m-adult.done{border-color:rgba(75,208,139,.35);background:none}
.r19{display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 6px;border-radius:5px;background:rgba(255,138,61,.16);color:var(--warn);font-size:10.5px;font-weight:800;border:1px solid rgba(255,138,61,.4)}
.vstep{display:flex;gap:6px;margin:4px 0 14px}
.vstep i{flex:1;height:4px;border-radius:2px;background:#2F2C3B}
.vstep i.on{background:var(--coral)}
.vmethod{display:flex;gap:8px;margin-top:8px}
.vmethod button{flex:1;padding:16px 10px;border-radius:14px;background:var(--surface);border:1.5px solid var(--line);text-align:center}
.vmethod button.on{border-color:var(--coral);background:rgba(255,77,109,.1)}
.vmethod button .e{font-size:24px;display:block;margin-bottom:4px}
.vmethod button b{font-size:14px}
.vmethod button small{display:block;font-size:11px;color:var(--t3);margin-top:2px}

/* 상품 유형 세그먼트 (앱 홈) */
.ptbar{display:flex;gap:7px;margin:10px 0 4px}
.ptbar button{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;padding:9px 10px;border-radius:12px;border:1px solid var(--line);background:#16141F;text-align:left}
.ptbar button b{font-size:13px;font-weight:800;color:var(--t2)}
.ptbar button span{font-size:10.5px;color:var(--t3)}
.ptbar button i{position:absolute;right:9px;top:8px;font-style:normal;font-size:11px;color:var(--t3)}
.ptbar button.on{border-color:var(--violet);background:linear-gradient(180deg,rgba(123,92,255,.18),rgba(123,92,255,.05))}
.ptbar button.on b{color:#fff}
.ptbar button.on i{color:#C9B8FF}

/* 상세 갤러리의 16:9 키비주얼은 세로 프레임에 맞춰 자르면 인물이 잘려나간다 —
   레터박스로 통째로 보여준다(위아래 여백은 배경색으로 자연스럽게 먹는다) */
.dt-hero .hero-slide.wide{background:#07060C}
.dt-hero .hero-slide.wide img{object-fit:contain;object-position:50% 50%}

/* ================= 통합 단계에서 추가 (25작품 · 5탭 · 성향 토글 · PC 확장) ================= */

/* 성향 토글 (헤더 안) */
.lanebar{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface);border:1px solid var(--line);flex:none}
.lanebar button{height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--t3);white-space:nowrap}
.lanebar button.on{background:var(--violet);color:#fff}
.hdr .catlink{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--surface);border:1px solid var(--line);font-size:14px;flex:none}
.hdr{gap:6px}
.reel-top .lanebar{position:absolute;right:12px;top:-5px;background:rgba(20,18,28,.85)}

/* 섹션 제목 + 부제 */
.sec-t{min-width:0}
.sec-t .sec-s{font-size:12px;color:var(--t3);margin-top:2px}
.ptnote{margin:10px 16px 0;padding:8px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-size:12px;color:var(--t2)}

/* 출시 예정 표기 */
/* .soon(우상단 배지) 규칙의 top:6px가 같이 먹어서 카드 지표가 세로로 늘어나던 문제 — top을 풀어준다 */
.card .met.soon{top:auto;left:auto;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap}
.soonpill{font-size:11.5px;font-weight:700;color:var(--gem);background:rgba(255,209,102,.14);border:1px solid rgba(255,209,102,.32);padding:3px 9px;border-radius:999px}

/* 상세 — 라벨 없는 반투명 원형 뒤로가기 */
.dt-top .iconbtn.rnd{width:34px;height:34px;border-radius:50%;font-size:16px;background:rgba(12,11,18,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14)}
.dt-top .iconbtn.rnd.back:before{content:"";width:9px;height:9px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translate(1px,-1px);border-radius:1px}
.dt-subt{font-size:13px;color:var(--t2);margin-top:2px}
.box .introtxt{font-size:13.5px;color:var(--t2);line-height:1.7;margin-top:8px}
/* 관전 포인트 — 번호 배지 + 제목 + 설명. 기획서 service_page.html 의 .appeal 을 모바일 폭에 맞춰 옮겼다 */
.box .apl{list-style:none;margin-top:12px;display:grid;gap:14px}
.box .apl li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start}
.box .apl .i{width:26px;height:26px;border-radius:8px;background:rgba(123,92,255,.16);color:var(--violet2);display:grid;place-items:center;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.box .apl b{display:block;font-size:15px;letter-spacing:-.01em}
.box .apl p{font-size:13.5px;color:var(--t2);margin-top:3px;line-height:1.6;word-break:keep-all}
/* 한눈에 보기 — 라벨 기둥. 원본은 120px 2단 그리드지만 390px 에서는 값이 너무 좁아진다 */
.box .ovw{margin-top:12px;display:grid;gap:11px}
.box .ovw>div{display:flex;gap:12px;font-size:13.5px;line-height:1.6}
.box .ovw>div span{flex:none;width:44px;font-size:12px;color:var(--t3);font-weight:700;padding-top:2px;word-break:keep-all}
.box .ovw>div b{min-width:0;font-weight:500;color:var(--t2);word-break:keep-all}

/* GNB: 5탭 (모바일) */
.gnb button{width:62px}
.gnb .navbrand,.gnb .navsp,.gnb .navlane,.gnb .navcat{display:none}

/* 좌측 바로가기 — 접이식 */
#sideFold>summary{list-style:none;cursor:pointer;display:none}
#sideFold>summary::-webkit-details-marker{display:none}

/* 데스크톱 레일(기본 숨김) */
.deskrail{display:none}

/* ---------------- PC ≥1024px ---------------- */
@media (min-width:1024px){
  body{overflow:hidden}
  .shell{display:block;padding:0;gap:0;height:100vh;background:var(--bg)}
  .note{display:none}
  .device{width:100vw;height:100vh;border-radius:0;padding:0;box-shadow:none;background:var(--bg)}
  .device:after{display:none}
  .statusbar{display:none}
  .screen{border-radius:0}

  /* 바로가기 패널: 좌하단 접이식 */
  .side{position:fixed;left:14px;bottom:14px;width:330px;height:auto;max-height:none;z-index:500;padding:0;overflow:visible}
  #sideFold{background:rgba(21,19,31,.97);border:1px solid var(--line2);border-radius:14px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.55)}
  #sideFold>summary{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-size:12.5px;font-weight:700;color:var(--t2)}
  #sideFold>summary .sm-c{color:var(--violet2);font-size:11.5px}
  #sideFold .side-in{max-height:62vh;overflow:auto;padding:0 14px 16px;scrollbar-width:thin}
  #sideFold:not([open]) .side-in{display:none}

  /* 상단 5탭 내비 */
  .gnb{position:absolute;left:0;right:0;top:0;bottom:auto;transform:none;display:flex;align-items:center;gap:2px;
    height:60px;padding:0 18px;border-radius:0;border:0;border-bottom:1px solid var(--line);
    background:rgba(15,14,23,.96);box-shadow:none;z-index:60}
  .gnb.hide{display:flex}
  .gnb .navbrand{display:flex;align-items:baseline;gap:4px;margin-right:18px;font-weight:900;font-size:19px;letter-spacing:-.04em}
  .gnb .navbrand i{font-style:normal;color:var(--coral)}
  .gnb .navbrand small{font-size:10px;color:var(--t3);font-weight:600}
  .gnb button{flex-direction:row;width:auto;height:38px;padding:0 15px;gap:7px;font-size:14.5px;border-radius:10px;color:var(--t2)}
  .gnb button .ico{width:auto;height:auto;background:none;box-shadow:none}
  .gnb button .ico svg{width:17px;height:17px}
  .gnb button .lb{max-height:none;opacity:1;margin-top:0;font-size:inherit}
  .gnb button:hover{background:var(--hover);color:#fff}
  .gnb .navsp{display:block;flex:1}
  .gnb .navlane{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
  .gnb .navlane button{height:26px;padding:0 12px;font-size:12.5px;font-weight:700;border-radius:999px;color:var(--t3)}
  .gnb .navlane button.on{background:var(--violet);color:#fff}
  .gnb .navcat{display:inline-flex;align-items:center;height:32px;padding:0 12px;margin-left:12px;border-radius:9px;
    background:var(--surface);border:1px solid var(--line);font-size:12.5px;color:var(--t2)}
  .gnb .navcat:hover{border-color:var(--line2);color:#fff}

  /* 좌측 레일 */
  .deskrail{display:block;position:absolute;left:0;top:60px;bottom:0;width:284px;overflow-y:auto;
    border-right:1px solid var(--line);padding:16px 14px 30px;scrollbar-width:thin;z-index:20;background:var(--bg)}
  .deskrail.off{display:none}
  .deskrail .rl-box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:12px}
  .deskrail .rl-box.first{border-color:rgba(123,92,255,.5);cursor:pointer}
  .deskrail h4{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;margin-bottom:8px}
  .deskrail .rl-chat{display:flex;gap:8px;align-items:center;width:100%;text-align:left;padding:6px;border-radius:10px}
  .deskrail .rl-chat:hover{background:var(--hover)}
  .deskrail .rl-chat .av{width:32px;height:32px;border-radius:50%;overflow:hidden;flex:none;display:block}
  .deskrail .rl-chat .av img{width:100%;height:100%;object-fit:cover}
  .deskrail .rl-chat .bd{min-width:0;flex:1;display:block}
  .deskrail .rl-chat .bd b{font-size:12.5px;display:inline-block;margin-right:5px}
  .deskrail .rl-chat .bd em{display:block;font-style:normal;font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .deskrail .rl-more{width:100%;margin-top:8px;height:32px;border-radius:9px;background:var(--raised);font-size:12.5px;color:var(--t2)}
  .deskrail .rl-more:hover{color:#fff}
  .deskrail .rl-stamps{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
  .deskrail .rl-stamps i{font-style:normal;height:28px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--raised);color:var(--t3)}
  .deskrail .rl-stamps i.done{background:rgba(123,92,255,.28);color:#fff}
  .deskrail .rl-stamps i.today{outline:1.5px solid var(--coral);color:var(--coral)}
  .deskrail .rl-cd{font-size:12px;color:var(--coral);font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums}
  .deskrail .rl-aff .bar,.deskrail .rl-bar{height:6px;border-radius:3px;background:#2A2737;overflow:hidden;margin-top:6px}
  .deskrail .rl-aff .bar i,.deskrail .rl-bar i{display:block;height:100%;background:var(--violet)}
  .deskrail .rl-aff .num{float:right;font-size:12px;color:var(--t3)}

  /* 본문 */
  #view{inset:60px 0 0 284px;padding-top:0}
  #view.full{padding-top:0}
  .pb-gnb{padding-bottom:40px}
  .hdr{top:0;margin-top:0;padding:0 26px;height:70px}
  .sec,.chips,.rail,.grid2,.quick,.tabs,.seg{max-width:1180px;padding-left:26px;padding-right:26px;margin-right:auto}
  .banner,.hero,.ptnote{max-width:1180px;margin-left:26px;margin-right:auto}
  .dt-body{max-width:1180px;padding-left:26px;padding-right:26px}
  .hero{aspect-ratio:21/7;max-height:380px}
  .hero-cap h2{font-size:28px}
  .rail .card{width:170px}
  .grid2{grid-template-columns:repeat(4,1fr);gap:20px 16px}
  .quick{grid-template-columns:repeat(4,200px);justify-content:start}
  #fixed{left:284px}
  #fixed .cta-bar,#fixed .bottombar{max-width:760px;margin:0 auto;position:relative;left:auto;right:auto;padding-bottom:18px}

  /* 상세 */
  .dt-hero{height:420px;margin-top:0;background:var(--bg)}
  .dt-top{top:16px;left:20px;right:20px}

  /* 탐색(릴스) — 가운데 세로 컬럼 */
  .reels{left:50%;transform:translateX(-50%);width:430px;right:auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .reel-top{width:430px;left:50%;transform:translateX(-50%);right:auto;top:16px}

  /* 채팅 — 가운데 폭 제한 */
  .chat{left:50%;transform:translateX(-50%);right:auto;width:min(680px,100%);border-left:1px solid var(--line);border-right:1px solid var(--line)}
  .chat-hd{padding-top:10px}

  /* 오버레이 */
  .modal{max-width:460px}
  .ov.sheet-ov{justify-content:center}
  .sheet{max-width:560px;border-radius:22px;margin-bottom:24px}
  #toasts{top:78px}
}
@media (min-width:1600px){
  .grid2{grid-template-columns:repeat(6,1fr)}
  .sec,.chips,.rail,.grid2,.quick,.tabs,.seg,.banner,.hero,.ptnote,.dt-body{max-width:1560px}
}

/* ========== PC 홈: home.html(home.css) 레이아웃 이식 — .deskhome 스코프 ========== */
#view.deskhome{background:#000;padding-top:0}
.deskhome .page{max-width:1440px;margin:0 auto;padding:0 28px 80px;display:grid;grid-template-columns:236px minmax(0,1fr);gap:36px;align-items:start}
.deskhome .rail{position:sticky;top:18px;height:calc(100vh - 60px - 40px);padding-top:22px;display:flex;flex-direction:column;gap:18px;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;padding-right:2px}
.deskhome .main{padding-top:18px;min-width:0}

.deskhome .railbox{border:1px solid var(--line);border-radius:14px;padding:14px;background:linear-gradient(180deg,#0E0D14,#08080C)}
.deskhome .railbox.chats{flex:1 1 auto;min-height:190px;display:flex;flex-direction:column}
.deskhome .railbox.attbox,.deskhome .rail .promo{flex:0 0 auto}
.deskhome .railbox.chats .list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin:0 -4px;padding:0 4px}
.deskhome .railbox.chats .empty{margin:auto;padding:34px 6px}
.deskhome .railbox h3{font-size:12px;font-weight:700;color:var(--t3);letter-spacing:.06em;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.deskhome .empty{text-align:center;padding:22px 6px;color:var(--t3);font-size:12.5px}
.deskhome .empty .ic{font-size:26px;display:block;margin-bottom:8px;opacity:.5}
.deskhome .mychat{display:flex;gap:9px;align-items:center;width:100%;padding:7px;border-radius:9px;text-align:left}
.deskhome .mychat:hover{background:#15131D}
.deskhome .mychat img{width:36px;height:36px;border-radius:9px;object-fit:cover;flex:none;background:#1b1a22}
.deskhome .mychat .t{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.deskhome .mychat .d{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.deskhome .mychat .w{min-width:0;flex:1}
.deskhome .attillu{position:relative;border-radius:10px;overflow:hidden;margin-bottom:10px;padding:14px 12px;
  background:radial-gradient(120% 120% at 20% 0,#4B3A14 0%,#1B1608 60%,#0B0A07 100%);border:1px solid rgba(255,209,102,.24)}
.deskhome .attillu b{display:block;font-size:12.5px;font-weight:800;color:#FFE6A8}
.deskhome .attillu em{display:block;font-style:normal;font-size:23px;font-weight:900;letter-spacing:-.03em;color:#FFD166;margin-top:2px}
.deskhome .attend{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:10px}
.deskhome .attend i{aspect-ratio:1;border-radius:6px;background:#17151F;border:1px solid var(--line);display:grid;place-items:center;font-size:10px;font-style:normal;color:var(--t3)}
.deskhome .attend i.done{background:rgba(123,92,255,.22);border-color:rgba(123,92,255,.5);color:#C9B8FF}
.deskhome .attend i.today{border-color:var(--coral);color:var(--coral)}
.deskhome .rbtn{display:block;width:100%;text-align:center;padding:9px;border-radius:9px;font-size:13px;font-weight:700;background:var(--violet);color:#fff}
.deskhome .rbtn:hover{background:var(--violet2)}
.deskhome .rbtn:disabled{opacity:.45;cursor:default}
.deskhome .rnote{font-size:11.5px;color:var(--t3);margin-top:8px;line-height:1.5}
.deskhome .promo{position:relative;overflow:hidden;border-radius:16px;padding:13px 14px 14px;cursor:pointer;
  background:radial-gradient(135% 105% at 8% -10%,#7C1E88 0%,#4A1162 46%,#230A3C 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 14px 34px -14px rgba(214,68,180,.7),inset 0 1px 0 rgba(255,255,255,.16)}
.deskhome .promo .conf{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
   radial-gradient(circle at 16% 76%,rgba(255,209,102,.75) 0 2px,transparent 3px),
   radial-gradient(circle at 80% 14%,rgba(255,255,255,.7) 0 2px,transparent 3px),
   radial-gradient(circle at 90% 58%,rgba(255,150,205,.7) 0 2.5px,transparent 3.5px),
   radial-gradient(circle at 36% 10%,rgba(255,255,255,.5) 0 1.5px,transparent 2.5px),
   radial-gradient(circle at 62% 90%,rgba(255,209,102,.55) 0 1.5px,transparent 2.5px),
   radial-gradient(circle at 8% 34%,rgba(255,255,255,.4) 0 1.5px,transparent 2.5px)}
.deskhome .promo::after{content:'';position:absolute;top:-60%;left:-40%;width:45%;height:220%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:rotate(12deg);animation:sweep 3.2s ease-in-out infinite}
@keyframes sweep{0%{left:-45%}60%{left:120%}100%{left:120%}}
.deskhome .promo .tagline{position:relative;z-index:3;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.34);color:#fff;margin-bottom:8px}
.deskhome .promo .tagline i{width:5px;height:5px;border-radius:50%;background:#FFD166;box-shadow:0 0 0 0 rgba(255,209,102,.9);animation:blip 1.4s ease-out infinite;font-style:normal}
@keyframes blip{0%{box-shadow:0 0 0 0 rgba(255,209,102,.85)}70%{box-shadow:0 0 0 7px rgba(255,209,102,0)}100%{box-shadow:0 0 0 0 rgba(255,209,102,0)}}
.deskhome .promo .gift{position:absolute;right:8px;top:34px;z-index:3;font-size:52px;line-height:1;pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));animation:giftfloat 2.8s ease-in-out infinite}
@keyframes giftfloat{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-6px)}}
.deskhome .promo b{position:relative;z-index:3;display:block;color:#fff;margin:0;letter-spacing:-.03em;font-size:14px;font-weight:800;line-height:1.2}
.deskhome .promo b em{font-style:normal;display:block;font-size:44px;line-height:1.02;font-weight:900;letter-spacing:-.055em;margin-top:-2px;
  background:linear-gradient(180deg,#FFF3C4 8%,#FFD166 52%,#FFAE3B 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 10px rgba(255,170,60,.45))}
.deskhome .promo p{position:relative;z-index:3;font-size:12px;font-weight:700;color:rgba(255,255,255,.92);line-height:1.4;margin-top:2px}
.deskhome .promo .chg{position:relative;z-index:3;display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 9px;border-radius:9px;
  background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.16);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.72)}
.deskhome .promo .chg s{text-decoration:line-through;opacity:.8}
.deskhome .promo .chg i{font-style:normal;color:rgba(255,255,255,.5)}
.deskhome .promo .chg strong{color:#FFD166;font-weight:900;font-size:13.5px}
.deskhome .promo .cd{position:relative;z-index:3;margin-top:9px;font-size:13px;font-weight:800;color:rgba(255,255,255,.95);font-variant-numeric:tabular-nums;letter-spacing:-.01em;display:flex;align-items:center;gap:5px}
.deskhome .promo .go{position:relative;z-index:3;display:block;width:100%;margin-top:10px;padding:11px;border-radius:11px;background:#fff;color:#12111A;font-size:13.5px;font-weight:800;box-shadow:0 6px 18px -8px rgba(0,0,0,.8)}
.deskhome .promo .go:hover{transform:translateY(-1px)}

/* 태그 줄 */
.deskhome .filterbar{display:flex;gap:10px;align-items:center;margin-bottom:20px}
.deskhome .hchips{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;flex:1;min-width:0}
.deskhome .hchips::-webkit-scrollbar{display:none}
.deskhome .chip{flex:none;height:auto;padding:7px 13px;border-radius:999px;background:#111018;border:1px solid var(--line);font-size:13px;color:var(--t2);white-space:nowrap}
.deskhome .chip:hover{border-color:var(--line2);color:var(--t1)}
.deskhome .chip.on{background:#fff;color:#000;border-color:#fff;font-weight:700}

/* 히어로 캐러셀 */
.deskhome .hero{position:relative;margin:0 0 12px;border-radius:0;overflow:visible;aspect-ratio:auto}
.deskhome .herotrack{position:relative;height:480px;border-radius:16px;overflow:hidden;background:#0A0A0F}
.deskhome .slide{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);pointer-events:none}
.deskhome .slide.on{opacity:1;pointer-events:auto}
.deskhome .slide img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.deskhome .slide .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 38%,rgba(0,0,0,.1) 70%),linear-gradient(0deg,rgba(0,0,0,.85),transparent 55%)}
.deskhome .slide .inner{position:absolute;left:44px;bottom:44px;max-width:min(520px,max(340px,46%))}
.deskhome .rankpill{display:inline-block;font-size:12.5px;font-weight:800;color:var(--coral);letter-spacing:.02em;margin-bottom:8px}
.deskhome .rankpill.soon{color:var(--gem);position:static;right:auto;top:auto;background:none;padding:0;border-radius:0;font-size:12.5px;z-index:auto}
.deskhome .slide h2{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-bottom:10px;max-width:100%;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.deskhome .slide .q{font-size:15.5px;color:var(--t2);margin-bottom:14px;line-height:1.5}
.deskhome .tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.deskhome .tagrow span{font-size:11.5px;padding:4px 9px;border-radius:6px;background:rgba(255,255,255,.1);color:#DDD9E8}
.deskhome .gobtn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:#fff;color:#000;font-size:14.5px;font-weight:800}
.deskhome .gobtn:hover{transform:translateY(-1px)}
.deskhome .dots{position:static;display:flex;gap:6px;justify-content:center;margin:14px 0 30px}
.deskhome .dots i{width:7px;height:7px;border-radius:99px;background:#2E2B38;cursor:pointer;transition:all .3s var(--ease)}
.deskhome .dots i.on{width:22px;background:#fff}
.deskhome .arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:99px;background:rgba(0,0,0,.55);border:1px solid var(--line);display:grid;place-items:center;font-size:17px;z-index:3;opacity:0;transition:opacity .25s}
.deskhome .hero:hover .arrow{opacity:1}
.deskhome .arrow.prev{left:14px}.deskhome .arrow.next{right:14px}
.deskhome .arrow:hover{background:rgba(0,0,0,.85);border-color:var(--line2)}

/* 오늘의 딜 */
.deskhome .dealban{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:14px;margin-bottom:30px;cursor:pointer;
  background:linear-gradient(90deg,rgba(255,77,109,.22),rgba(255,138,61,.08));border:1px solid rgba(255,77,109,.35)}
.deskhome .dealban .th{width:46px;height:46px;border-radius:10px;overflow:hidden;flex:none}
.deskhome .dealban .th img{width:100%;height:100%;object-fit:cover}
.deskhome .dealban .tx{flex:1;min-width:0}
.deskhome .dealban .tx b{display:block;font-size:12px;color:var(--coral);font-weight:800;font-variant-numeric:tabular-nums}
.deskhome .dealban .tx p{font-size:14px;font-weight:700;margin-top:2px}
.deskhome .dealban .tx s{opacity:.55}
.deskhome .dealban .tx em{font-style:normal;color:var(--coral)}
.deskhome .dealban .ar{color:var(--t3);font-size:20px}

/* 섹션 */
.deskhome .sec{margin:0 0 38px;padding:0}
.deskhome .sechd{display:flex;align-items:flex-end;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.deskhome .sechd h2{font-size:19px;font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.deskhome .sechd p{font-size:13px;color:var(--t3);padding-bottom:2px}
.deskhome .sechd .sp{flex:1}
.deskhome .tabs{display:flex;gap:4px;border:0;padding:0;max-width:none}
.deskhome .tabs button{flex:none;height:auto;font-size:12.5px;padding:5px 11px;border-radius:999px;color:var(--t3);border:1px solid transparent}
.deskhome .tabs button:after{display:none}
.deskhome .tabs button:hover{color:var(--t1)}
.deskhome .tabs button.on{background:#17151F;border-color:var(--line);color:var(--t1);font-weight:700}
.deskhome .rowscroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(176px,1fr);gap:14px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.deskhome .rowscroll.c6{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row}
.deskhome .rowscroll.c4{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row}
.deskhome .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:18px 14px}
.deskhome .noresult{padding:48px 0;text-align:center;color:var(--t3);font-size:14px}

/* 카드 */
.deskhome .card{display:block;cursor:pointer;text-align:left;width:100%;min-width:0}
.deskhome .card .ph{position:relative;aspect-ratio:3/4;border-radius:11px;overflow:hidden;background:#131219}
.deskhome .card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.deskhome .card:hover .ph img{transform:scale(1.06)}
.deskhome .card .ph:after{content:"";position:absolute;inset:0;left:0;right:0;bottom:0;height:auto;background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.25) 38%,transparent 62%);opacity:.85;transition:opacity .3s}
.deskhome .card:hover .ph:after{opacity:1}
.deskhome .card .ovl{position:absolute;left:11px;right:11px;bottom:44px;z-index:2;opacity:0;transform:translateY(6px);transition:all .3s var(--ease);pointer-events:none}
.deskhome .card:hover .ovl{opacity:1;transform:none}
.deskhome .card .ovl .onm{font-size:12.5px;font-weight:800;line-height:1.25;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.deskhome .card .ovl .oq{font-size:11.5px;color:#E6E1F2;margin-top:2px;line-height:1.4;text-shadow:0 1px 6px rgba(0,0,0,.9);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.deskhome .card .mrow{position:absolute;left:10px;right:10px;bottom:9px;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:6px;min-width:0}
.deskhome .card .rk{position:static;font-size:30px;font-weight:800;font-style:italic;line-height:.8;letter-spacing:-.05em;text-shadow:0 2px 12px rgba(0,0,0,.95);font-variant-numeric:tabular-nums;flex:none;color:#fff}
.deskhome .card .met{position:static;display:flex;gap:7px;font-size:11px;color:#E4E0EE;text-shadow:0 1px 5px rgba(0,0,0,.95);font-variant-numeric:tabular-nums;margin-left:auto;padding-bottom:2px;white-space:nowrap;flex:none;font-weight:600}
.deskhome .card .bdg{position:absolute;left:8px;top:8px;z-index:3;display:flex;gap:4px;flex-wrap:wrap;max-width:85%}
.deskhome .bg{font-size:9.5px;font-weight:800;padding:3px 6px;border-radius:5px;letter-spacing:.02em;background:rgba(0,0,0,.6);color:#EDEAF5}
.deskhome .bg.NEW{background:var(--coral);color:#fff}
.deskhome .bg.MULTI{background:rgba(123,92,255,.9);color:#fff}
.deskhome .bg.SOON{background:rgba(255,255,255,.92);color:#000}
.bg.adult,.deskhome .bg.adult{background:#15131F;color:#FF4D6D;border:1px solid #FF4D6D}
.deskhome .card .cap{margin-top:8px}
.deskhome .card .cnm{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deskhome .card .cnm .ptag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;font-size:10px;font-weight:800;vertical-align:2px;letter-spacing:.01em}
.deskhome .card .cnm .ptag.st{background:rgba(123,92,255,.16);color:#C3B2FF;border:1px solid rgba(123,92,255,.4)}
.deskhome .card .cnm .ptag.ch{background:rgba(255,77,109,.14);color:#FFA3B4;border:1px solid rgba(255,77,109,.4)}
.deskhome .card .chook{font-size:12px;color:var(--t3);margin-top:2px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.deskhome .card .ctags{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap;height:19px;overflow:hidden}
.deskhome .card .ctags span{font-size:10.5px;padding:2px 6px;border-radius:5px;background:#141320;color:var(--t3)}

/* 모바일에서는 데스크톱 전용 헤더 요소를 감춘다 */
.gnb .navgem,.gnb .navtk{display:none}

/* 헤더를 home.html 과 같은 모양으로 */
@media (min-width:1024px){
  .screen{background:#000}
  /* PC 는 상단 내비다 — 스크롤 축소를 적용하지 않는다 */
  .gnb,.gnb.mini{height:58px;max-width:none;padding:0 28px;gap:26px;background:rgba(0,0,0,.92);backdrop-filter:blur(12px)}
  .gnb.mini>button[data-k]{width:auto}
  .gnb.mini>button[data-k] .lb{max-height:none;opacity:1;margin-top:0}
  .gnb .navbrand{margin-right:0;font-size:21px;font-weight:800;letter-spacing:-.03em;gap:7px}
  .gnb .navbrand small{font-size:11px;font-weight:700;letter-spacing:.06em}
  .gnb>button[data-k]{padding:7px 12px;height:auto;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--t3);flex-direction:column;gap:0}
  .gnb>button[data-k] .ico{display:none}
  .gnb>button[data-k]:hover{color:var(--t1);background:#121119}
  .gnb>button[data-k].on{color:var(--t1);background:transparent}
  .gnb>button[data-k].on:after{content:"";display:block;height:2px;width:100%;border-radius:2px;background:var(--coral);margin-top:4px}
  .gnb .navlane{background:#0E0D14;border-color:var(--line)}
  .gnb .navgem{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#131119;border:1px solid var(--line);font-size:13.5px;font-weight:700}
  .gnb .navgem b{color:var(--gem);font-weight:800}
  .gnb .navgem .plus{color:var(--t3);font-weight:800}
  .gnb .navtk{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;background:#17151F;border:1px solid var(--line);font-size:13.5px;font-weight:700}
  .gnb .navcat{margin-left:0;height:auto;padding:6px 10px;border-radius:999px;font-size:12.5px}
  .hdr .lanebar,.hdr .catlink{display:none}
  .screen.norail #view{inset:60px 0 0 0}
  .screen.norail #fixed{left:0}
  #view{inset:58px 0 0 0}
  .screen:not(.norail) #view{left:284px}
  .deskrail{top:58px}
}

/* .deskhome 안에서는 앱 전역 레일/섹션 규칙(폭·패딩)을 쓰지 않는다 */
.deskhome .rail,.deskhome .sec,.deskhome .chips,.deskhome .grid,.deskhome .quick,
.deskhome .tabs,.deskhome .seg,.deskhome .banner,.deskhome .hero,.deskhome .card,
.deskhome .rowscroll,.deskhome .filterbar,.deskhome .main,.deskhome .page{
  max-width:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0}
.deskhome .page{margin-left:auto;margin-right:auto;max-width:1440px;padding:0 28px 80px}
.deskhome .rail{display:flex;overflow-x:hidden;scroll-snap-type:none;gap:18px}
.deskhome .rail>*{flex:none}
.deskhome .railbox.chats{flex:1 1 auto}
.deskhome .hero{max-height:none;height:auto;aspect-ratio:auto;overflow:visible}
@media (min-width:1024px){
  /* 데모 바로가기 패널은 우측 하단으로 (좌측 레일을 가리지 않게) */
  .side{left:auto;right:14px}
}

/* 성향 토글 줄 (모바일: 헤더 아래 한 줄) */
.lanerow{display:flex;justify-content:center;padding:2px 16px 0}
.lanerow .lanebar{width:100%;max-width:280px;justify-content:center}
.lanerow .lanebar button{flex:1;height:26px;font-size:12px}
@media (min-width:1024px){
  .lanerow{display:none}
  /* 상세: 본문을 가운데로 */
  .dt-body{margin-left:auto;margin-right:auto;max-width:1060px}
  #view.full .dt-hero{max-width:1060px;margin-left:auto;margin-right:auto}
  /* Desktop detail: image and introduction on the left, progression on the right. */
  /* 컬럼 폭을 변수로 둔다 — 아래 CTA 바가 같은 기준으로 정렬해야 한다 */
  .screen{--dt-col-l:min(440px,calc((100dvh - 180px) * 39 / 47));--dt-col-r:650px;--dt-col-gap:32px}
  #view.detail-page{
    display:grid;
    grid-template-columns:var(--dt-col-l) minmax(0,var(--dt-col-r));
    justify-content:center;align-content:start;gap:0 var(--dt-col-gap);
    padding:24px 28px 110px;
  }
  /* CTA 는 스크롤되는 오른쪽 본문에 맞춘다.
     기본 규칙(max-width:760px;margin:0 auto)은 뷰포트 가운데라, 가운데 정렬된 2단 그리드에서는
     왼쪽 포스터·제목 컬럼을 덮는다. 오른쪽 컬럼 중심 = 50% + 왼쪽폭/2 + 간격/2 다. */
  #view.detail-page ~ #fixed .cta-bar{
    width:min(var(--dt-col-r),calc(100% - 56px - var(--dt-col-l) - var(--dt-col-gap)));
    max-width:none;
    margin:0 0 0 calc(50% + var(--dt-col-l) / 2 + var(--dt-col-gap) / 2);
    transform:translateX(-50%);
  }
  #view.detail-page .dt-hero{
    position:relative;
    width:100%;height:auto;aspect-ratio:39 / 47;margin:0;
    border-radius:18px;overflow:hidden;
  }
  #view.detail-page .dt-hero:before{display:none}
  /* Match the mobile portrait crop; landscape gallery slides retain contain. */
  #view.detail-page .hero-slide:not(.wide) img{object-fit:cover;object-position:50% 20%}
  #view.detail-page .hero-slide:after{background:linear-gradient(transparent 80%,rgba(0,0,0,.35))}
  #view.detail-page .dt-profile{grid-column:1;min-width:0}
  #view.detail-page .dt-content{grid-column:2;min-width:0}
  #view.detail-page .dt-body{width:100%;max-width:none;margin:0;padding:0}
  #view.detail-page .dt-profile > .dt-body{padding-top:18px}
  #view.detail-page .dt-content > .tabs{width:100%;min-width:0;padding:0}
  #view.detail-page .dt-content > .dt-body:first-child > .box:first-child{margin-top:0}
}

/* 릴스 상단 성향 토글 */
.reel-top .lanebar{position:static}
.reel-lane{position:absolute;top:78px;left:0;right:0;z-index:5;display:flex;justify-content:center}
.reel-lane .lanebar{background:rgba(20,18,28,.85);backdrop-filter:blur(8px)}
@media (min-width:1024px){ .reel-lane{display:none} }

/* PC: 앱 고유 화면(마이·대화목록·컬렉션·랭킹·출석)은 가운데 정렬된 본문 폭 */
@media (min-width:1024px){
  .sec,.chips,.grid2,.quick,.tabs,.seg,.rail{margin-left:auto;margin-right:auto}
  .menu,.prof,.clist,.cgrid,.colrow,.stamps,.miles,.plist,.search,.banner,.upd,
  .ucards,.podium,.myrank,.langgrid,.pcards,.fld,.mcard,.pod-foot,.weeknav,.rrow,.lanerow,.ptnote{
    max-width:1060px;margin-left:auto;margin-right:auto}
  .sec,.chips,.grid2,.quick,.tabs,.seg{max-width:1060px}
  /* 헤더는 sticky 전폭 배경을 유지해야 하므로 폭을 줄이지 않고 안쪽 여백만 본문 컬럼(1060px + 16px 안여백)에 맞춘다.
     안 그러면 제목·뒤로가기가 화면 왼쪽 끝에 붙고 목록만 가운데 뜬다 (컬렉션 화면에서 실제로 그랬다) */
  .hdr{padding-left:max(16px,calc((100% - 1060px) / 2 + 16px));padding-right:max(16px,calc((100% - 1060px) / 2 + 16px))}
  .colintro{max-width:1060px;margin-left:auto;margin-right:auto}
  .cgrid{grid-template-columns:repeat(6,1fr)}
  .stamps{grid-template-columns:repeat(7,1fr)}
  .ov.sheet-ov{align-items:center}
  .sheet{border-radius:22px;margin-bottom:0;max-height:86vh}
  .sheet.tall{height:86vh}
  .sheet .grab{display:none}
}

/* PC 홈 레일 — home.css 의 출석 일러스트 / 이벤트 배너 이미지 */
.deskhome .promo .bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:0;opacity:.45;mix-blend-mode:screen}
.deskhome .promo .bgshade{position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 90% at 0% 0%,rgba(35,10,60,.2) 0%,rgba(30,8,50,.66) 62%,rgba(20,6,38,.86) 100%)}
.deskhome .attillu{position:relative;height:86px;padding:0;border:0;border-radius:11px;overflow:hidden;margin-bottom:10px;background:#141220}
.deskhome .attillu img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.deskhome .attillu .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.28) 62%,rgba(0,0,0,.5))}
.deskhome .attillu b{position:absolute;left:11px;top:11px;font-size:13px;font-weight:800;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.deskhome .attillu em{position:absolute;left:11px;bottom:10px;font-style:normal;font-size:19px;font-weight:900;color:var(--gem);letter-spacing:-.03em;text-shadow:0 2px 10px rgba(0,0,0,.85)}

/* ===== 채팅 말풍선 폭·여백 (모바일 기준) ===== */
.msgs{padding-left:14px;padding-right:14px}
.m-sit{max-width:100%}
.m-char{max-width:100%}
.m-char>div{flex:1 1 auto;min-width:0}
.m-char .bub{max-width:100%;width:fit-content}
.m-user{max-width:94%}
.m-user .bub{max-width:100%;width:fit-content;margin-left:auto}

/* ===== 채팅 헤더 아래 고정 줄: 호감도 + 선물 ===== */
.affrow{display:flex;align-items:center;gap:10px;padding:8px 14px 10px;border-bottom:1px solid var(--line);background:rgba(15,14,23,.94)}
.affrow .lf{flex:1;min-width:0}
.affrow .lb{display:flex;align-items:baseline;gap:6px;font-size:12px;font-weight:700}
.affrow .lb .pc{color:var(--t2);font-variant-numeric:tabular-nums}
.affrow .lb .nx{margin-left:auto;font-size:11px;color:var(--t3);font-weight:600}
.affrow .bar{height:6px;border-radius:3px;background:#2A2737;overflow:hidden;margin-top:5px}
.affrow .bar i{display:block;height:100%;border-radius:3px;transition:width .6s var(--ease)}
.affrow .giftbtn{flex:none;display:flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,77,109,.22),rgba(123,92,255,.22));border:1px solid rgba(255,138,61,.45);
  font-size:13px;font-weight:700;color:#FFD9A8}
.affrow .giftbtn:active{transform:scale(.97)}
.affrow .prog{font-size:12px;color:var(--t2);font-weight:700}

/* ===== 선물 시트 ===== */
.giftlist{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.giftcard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.giftcard:not(.off):hover{border-color:var(--line2)}
.giftcard .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:24px;background:var(--raised);flex:none}
.giftcard .bd{flex:1;min-width:0}
.giftcard .bd b{font-size:15px;display:block}
.giftcard .bd p{font-size:12px;color:var(--t3);margin-top:2px}
.giftcard .rt{text-align:right;flex:none}
.giftcard .rt .price{font-size:14px;font-weight:800;color:var(--gem);font-variant-numeric:tabular-nums}
.giftcard .rt .lim{font-size:11px;color:var(--t3);margin-top:3px;font-variant-numeric:tabular-nums}
.giftcard .up{font-size:12px;font-weight:800;color:var(--coral)}
.giftcard.off{opacity:.45}
.giftcard.off .rt .lim{color:var(--warn)}
.giftcap{margin-top:12px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:12px;color:var(--t2);line-height:1.6}
.giftcap b{color:var(--t1)}
.giftcap .capbar{height:5px;border-radius:3px;background:#2A2737;overflow:hidden;margin-top:6px}
.giftcap .capbar i{display:block;height:100%;background:var(--warn)}

/* 스킵 버튼이 호감도 줄(🎁)을 가리지 않게 아래로 */
.skipbtn{top:146px}

/* ---- 성향 플로팅 버튼 (고정 바 대체) ----
   닫힌 상태에서도 현재 성향을 보여준다. 하단 탭 위로 띄워 겹치지 않게 한다. */
.lanefab{position:absolute;right:14px;bottom:calc(var(--tabbar-h,66px) + 28px + env(safe-area-inset-bottom,0px));z-index:48;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.lanefab.hide{display:none}
.lanefab>*{pointer-events:auto}
.lanefab .opts{display:flex;flex-direction:column;align-items:flex-end;gap:6px;opacity:0;transform:translateY(8px) scale(.96);transform-origin:100% 100%;transition:opacity .18s var(--ease),transform .18s var(--ease);pointer-events:none}
.lanefab.open .opts{opacity:1;transform:none;pointer-events:auto}
.lanefab .opts button{height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--t1);background:rgba(30,28,42,.94);border:1px solid var(--line2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 22px rgba(0,0,0,.4);white-space:nowrap}
.lanefab .opts button.on{background:var(--violet);border-color:transparent;color:#fff}
.lanefab .fab{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;letter-spacing:-.02em;color:#fff;background:rgba(30,28,42,.94);border:1px solid var(--line2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 26px rgba(0,0,0,.5);transition:transform .18s var(--ease),background .18s var(--ease)}
.lanefab[data-lane="f"] .fab{background:linear-gradient(140deg,#FF4D6D,#C93B7A)}
.lanefab[data-lane="m"] .fab{background:linear-gradient(140deg,#7B5CFF,#4B7BFF)}
.lanefab.open .fab{transform:rotate(-6deg) scale(.94)}
.lanefab .fab:active{transform:scale(.9)}
@media (min-width:1024px){ .lanefab{display:none} }   /* PC는 상단 내비의 성향 선택을 그대로 쓴다 */

/* 충전 상품 — 보너스가 '덤으로 얹어주는 것'으로 보이게 */
.prod.hasbonus{border-color:rgba(255,209,102,.3)}
.prod.hasbonus.best{border-color:var(--coral)}
.prod .bonusrb{position:absolute;top:-9px;right:12px;font-size:10px;font-weight:900;letter-spacing:-.01em;
  padding:2px 8px;border-radius:6px;color:#3A2400;
  background:linear-gradient(135deg,#FFE7A8,#FFC24D 55%,#FFA92E);
  box-shadow:0 5px 14px -6px rgba(255,177,61,.85)}
.prod .pb b{font-size:20px;font-weight:900;letter-spacing:-.02em}
.prod .pb b i{font-style:normal;font-size:14px;margin-left:1px}
.prod .calc{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:11.5px;font-variant-numeric:tabular-nums}
.prod .calc .bs{color:var(--t3);font-weight:700}
.prod .calc .pl{color:var(--t4);font-weight:800}
.prod .calc .bn{color:#FFD873;font-weight:800;padding:1px 8px;border-radius:999px;
  background:rgba(255,209,102,.13);border:1px solid rgba(255,209,102,.34)}
.prod .pb small{display:block;font-size:11.5px;color:var(--t3);margin-top:4px}

/* ================================================================
   채팅 하단 정리 — 모드 알약(펼침) + 추천 답장(늘 무료, 채팅창 안으로)
   ================================================================ */
.cbar{display:flex;align-items:center;justify-content:center;gap:7px;padding:0 14px 8px}
.modepill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:999px;
  background:linear-gradient(135deg,rgba(123,92,255,.28),rgba(123,92,255,.14));
  border:1px solid rgba(123,92,255,.5);font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap}
.modepill em{font-style:normal;color:var(--gem);font-weight:800;font-variant-numeric:tabular-nums}
.modepill i{font-style:normal;color:var(--t3);font-size:10px;margin-left:1px}
.modepill:active{transform:scale(.97)}
.sugbtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line2);font-size:12.5px;font-weight:700;color:var(--t2);white-space:nowrap}
.sugbtn em{font-style:normal;font-size:11px;font-weight:800;color:var(--ok)}
.sugbtn:active{transform:scale(.97)}

/* 모드 목록 — 알약 위로 펼쳐진다 */
.modemenu{position:absolute;left:14px;right:14px;bottom:calc(100% - 4px);z-index:60;
  background:rgba(26,24,38,.97);backdrop-filter:blur(16px);border:1px solid var(--line2);border-radius:16px;
  padding:8px;box-shadow:0 -12px 40px rgba(0,0,0,.6);animation:popup .18s var(--ease) both}
@keyframes popup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.modemenu .mh{font-size:11px;color:var(--t3);font-weight:700;padding:4px 8px 7px}
.modemenu button{display:flex;align-items:center;gap:9px;width:100%;padding:10px;border-radius:11px;text-align:left}
.modemenu button + button{margin-top:2px}
.modemenu button:hover{background:var(--hover)}
.modemenu button.on{background:rgba(123,92,255,.18);box-shadow:inset 0 0 0 1px rgba(123,92,255,.45)}
.modemenu button .e{font-size:17px;line-height:1;flex:none;width:22px;text-align:center}
.modemenu button .t{font-size:14px;font-weight:700;flex:none}
.modemenu button .d{font-size:11.5px;color:var(--t3);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modemenu button em{font-style:normal;margin-left:auto;font-size:12.5px;font-weight:800;color:var(--gem);font-variant-numeric:tabular-nums}
.modemenu button.lock{opacity:.55}
.modemenu button.lock em{color:var(--t4)}
.modemenu .more{justify-content:center;font-size:12.5px;color:var(--t3);margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 11px 11px}

/* 채팅창 안 추천 답장 */
/* 추천 답장 — 지문 + 대사 2줄 카드.
   작게 흘려 두면 고르는 재미가 없다. 선택지 자체가 콘텐츠라 크게 편다. */
.m-sugs{align-self:stretch;display:flex;flex-direction:column;gap:8px;max-width:100%;padding:2px 0}
.m-sugs .lab{font-size:11px;color:var(--t3);font-weight:700;margin-bottom:1px}
.m-sugs .sugcard{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  padding:13px 14px;border-radius:14px;background:rgba(123,92,255,.10);
  border:1px solid rgba(123,92,255,.34);transition:background .12s,border-color .12s}
.m-sugs .sugcard .pen{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(123,92,255,.20);color:#C4A7FF;font-size:14px;line-height:1;cursor:pointer}
.m-sugs .sugcard .pen:hover,.m-sugs .sugcard .pen:focus-visible{background:rgba(196,167,255,.5);color:#fff;outline:none}
.m-sugs .sugcard .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.m-sugs .sugcard .act{font-size:12px;line-height:1.35;color:var(--t3);font-style:italic;font-weight:500}
.m-sugs .sugcard .say{font-size:14.5px;line-height:1.45;color:#EAE3FF;font-weight:700;word-break:keep-all}
.m-sugs .sugcard:hover{background:rgba(123,92,255,.18)}
.m-sugs .sugcard:hover .say{color:#fff}
.m-sugs .sugcard:active{transform:scale(.99)}
/* 관계를 다음 단계로 미는 선택지. 라벨을 붙이면 "정답"이 되어 고르는 맛이 사라지므로 테두리만 밝힌다 */
.m-sugs .sugcard.lead{border-color:rgba(196,167,255,.60);background:rgba(123,92,255,.15)}
.m-sugs .sugcard.lead .pen{background:rgba(196,167,255,.28);color:#E4D8FF}

/* 상단 단일 게이지 — 보라 그라데이션 + 해금권 적립 문구 */
.affrow .bar i{background:linear-gradient(90deg,var(--violet) 0%,#C4A7FF 100%)!important}
.affrow .accline{font-size:11px;color:var(--t3);margin-top:5px;font-variant-numeric:tabular-nums}
.affrow .accline b{color:var(--t2);font-weight:800}
/* 상태창 안의 호감도 바는 상단 게이지와 중복 — 숫자·단계만 남긴다 */
.m-status .aff .bar{display:none}
.m-status .aff{gap:8px}
/* 모드 알약: 이름만 · 행동 버튼 추가 */
.modepill .nm{font-weight:700}
.actbtn{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line2);font-size:12.5px;font-weight:700;color:var(--t2);white-space:nowrap}
.actbtn:active{transform:scale(.97)}
.actbtn:hover{color:var(--t1);border-color:rgba(255,255,255,.28)}
.cbar{flex-wrap:wrap}
/* 하단 바 — 다시 생성 · 1턴 비용 힌트 */
.actbtn.regen{color:var(--t3)}
.actbtn.regen:hover{color:var(--violet2);border-color:rgba(123,92,255,.5)}
.costhint{margin-left:auto;font-size:11px;color:var(--t3);white-space:nowrap;align-self:center;font-variant-numeric:tabular-nums}
.costhint b{color:var(--gem);font-weight:800}

/* 릴스 뒤로가기 — 전체화면 위에 얹는 반투명 원형 (채팅방 ←와 같은 결) */
.reel-back{position:absolute;left:12px;top:40px;z-index:6;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px;line-height:1;color:#fff;background:rgba(10,9,14,.45);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:.8;transition:opacity .16s ease,background .16s ease}
.reel-back:hover{opacity:1;background:rgba(10,9,14,.7)}
@media (min-width:1024px){ .reel-back{top:16px;left:calc(50% - 215px - 46px)} }

/* 리플레이 확인 모달 — 비용 안내를 아이콘 + 2줄로 정리 */
.cond.replaycost{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px 13px;
  background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.26)}
.cond.replaycost .ic{font-size:17px;line-height:1.2;flex:none}
.cond.replaycost b{display:block;font-size:13.5px;font-weight:800;color:var(--t1);letter-spacing:-.01em}
.cond.replaycost em{display:block;font-style:normal;font-size:12px;color:var(--t3);margin-top:3px}
.modal .chkrow{justify-content:center;gap:8px;margin-top:14px;color:var(--t3);font-size:12.5px;cursor:pointer}
.modal .btnrow{margin-top:14px;gap:9px}
.modal .btnrow .btn{flex:1 1 0;min-width:0}
/* 리플레이 비용 안내 — 주의 문구는 한 톤 낮게(박스 없이 작게) */
.modal .replaynote{margin-top:12px;text-align:center;font-size:12px;line-height:1.55;color:var(--t3)}
.modal .replaynote b{color:var(--t2);font-weight:700}
/* 관계 게이트에 걸린 턴 — 캐릭터가 숫자를 말하지 않으니 UI 가 남은 양을 대신 알려준다 */
.affrow .lf.gated .nx{color:var(--coral);font-weight:800;animation:gatedPulse 1.1s var(--ease) 2}
.affrow .lf.gated .bar i{box-shadow:0 0 0 1px rgba(255,77,109,.5)}
@keyframes gatedPulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){ .affrow .lf.gated .nx{animation:none} }
/* 회차 완료 연출 — 관계 단계 상승과 구분되게 바이올렛 계열로 */
.stageup.ch{background:radial-gradient(circle at 50% 45%,rgba(123,92,255,.3),rgba(15,14,23,.98) 62%),rgba(15,14,23,.9)}
.stageup.ch .to{color:var(--violet2);font-size:30px}
/* 해금 게이트 — 막기만 하지 않고 남은 조건과 진행도를 같이 보여준다 */
.cond.gate{border:1px solid rgba(255,138,61,.35)}
.cond.gate .grow{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12.5px;color:var(--t2)}
.cond.gate .grow>span{flex:none}
.cond.gate .gbar{flex:1;min-width:48px;height:5px;border-radius:3px;background:#2A2737;overflow:hidden}
.cond.gate .gbar i{display:block;height:100%;background:var(--violet)}
.cond.gate .grow em{flex:none;font-style:normal;color:var(--t3);font-variant-numeric:tabular-nums}
/* 에피소드 — '지금 뭘 하면 다음이 열리는지'를 관계 로드맵 위에 얹는다 */
.epnow{margin:10px 0 14px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.epnow .t{display:flex;align-items:center;gap:8px}
.epnow .t .s{font-size:11px;font-weight:800;color:var(--violet2);background:rgba(123,92,255,.16);padding:2px 8px;border-radius:999px;flex:none}
.epnow .t b{font-size:14.5px}
.epnow .q{margin-top:8px;font-size:13px;font-weight:700;color:var(--t1)}
.epnow p{margin-top:6px;line-height:1.6}
.epnow .epsteps{display:flex;gap:5px;margin-top:10px}
.epnow .epsteps i{flex:1;height:4px;border-radius:2px;background:#2A2737}
.epnow .epsteps i.done{background:var(--violet)}
.epnow .epsteps i.on{background:var(--coral)}

/* ── 컬렉션 목록·마이 메뉴 여백과 글자 — "여백이 너무 작고 글자가 작다"는 PC 피드백 (2026-09-22) ──
   뒤에 두어 앞의 같은 선택자를 덮는다. 헤더·카드·안내문이 전부 컬럼 안쪽 16px 선에 맞도록 한다 */
.colintro{padding:8px 16px 18px;font-size:13px;line-height:1.5;color:var(--t3)}
.colempty{margin:8px 16px 14px;padding:26px 20px;border-radius:16px;background:var(--surface);border:1px dashed var(--line2);text-align:center}
.colempty b{display:block;font-size:16px;margin-bottom:6px}
.colempty p{font-size:13px;color:var(--t3);line-height:1.55;margin-bottom:14px}
.colmore{margin:6px 0 16px}
.mi-more{display:block;width:calc(100% - 32px);margin:0 16px 10px;padding:12px;border-radius:12px;background:transparent;border:1px dashed var(--line2);color:var(--t3);font-size:13px;text-align:center}
.mi-more:hover{color:var(--t1);border-color:var(--t4)}
.menu h5{font-size:13.5px;color:var(--t2);padding:18px 16px 8px;letter-spacing:.01em}
.menu .mi .sub{font-size:12.5px;margin-top:2px}
@media (min-width:1024px){
  .colintro{max-width:1060px;margin:0 auto;padding:12px 16px 22px;font-size:14px}
  .colempty,.colmore{max-width:1060px;margin-left:auto;margin-right:auto}
  .colrow{padding:14px 16px;margin-bottom:12px}
  .menu .mi{padding:17px 18px;font-size:15px}
  .menu h5{font-size:14px;padding:20px 18px 8px}
}

/* ── 출석 달력 (2026-09-22) — .stamps 도장 격자를 대체. 7칸 한 줄, 지난 날 도장·오늘 링·7일차 금색 ── */
.cal{margin:18px 16px 0;border-radius:18px;background:var(--surface);border:1px solid var(--line);padding:14px 12px 12px}
.cal-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 12px}
.cal-head b{font-size:14px}
.cal-head span{font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding-top:6px}
.cal-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 2px 8px;border-radius:12px;background:var(--raised);border:1px solid var(--line);min-height:98px;text-align:center}
.cal-day .dow{font-size:10.5px;color:var(--t4);font-weight:700}
.cal-day .dt{font-size:16px;color:var(--t1);line-height:1.1;font-variant-numeric:tabular-nums}
.cal-day .ico{font-size:18px;line-height:1;margin-top:4px}
.cal-day .rw{font-size:10.5px;color:var(--t2);font-weight:700;white-space:nowrap}
.cal-day .nth{font-size:9.5px;color:var(--t4);margin-top:auto}
.cal-day .pill{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--coral);color:#fff;white-space:nowrap}
.cal-day.future{opacity:.55}
.cal-day.today{border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,77,109,.18);background:rgba(255,77,109,.08)}
.cal-day.done{background:rgba(123,92,255,.12);border-color:rgba(123,92,255,.4)}
.cal-day.done .mark{position:absolute;right:5px;top:5px;width:18px;height:18px;border-radius:50%;background:var(--violet);color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center}
.cal-day.done .mark:after{content:"✓"}
.cal-day.royal{background:linear-gradient(160deg,rgba(245,179,1,.22),rgba(245,179,1,.05));border-color:rgba(245,179,1,.5)}
.cal-day.royal .dt,.cal-day.royal .rw{color:var(--royal)}
.cal-day.pressed .mark{animation:stampIn .45s var(--ease)}
@media (min-width:1024px){
  .cal{max-width:1060px;margin-left:auto;margin-right:auto;padding:18px 16px 16px}
  .cal-grid{gap:10px}
  .cal-day{min-height:152px;padding:14px 6px 12px;gap:3px}
  .cal-day .dow{font-size:12px}
  .cal-day .dt{font-size:22px}
  .cal-day .ico{font-size:26px;margin-top:8px}
  .cal-day .rw{font-size:12.5px}
  .cal-day .nth{font-size:11px}
  .cal-day.done .mark{width:22px;height:22px;font-size:13px;right:8px;top:8px}
}

/* ── 출석 배너 — 클릭하고 싶은 컬러 카드 (2026-09-22). 마크업은 V2(v2-live.js .v2-attendance-banner)지만 스타일은 여기서.
   v2-pages.css 의 .v2-attendance-banner(명시도 0,1,0)보다 높은 .banner.v2-attendance-banner(0,2,0)로 써서 로드 순서와 무관하게 이긴다 */
.banner.v2-attendance-banner{position:relative;overflow:hidden;background:linear-gradient(120deg,#3B2A8F 0%,#7B5CFF 45%,#FF4D6D 130%);border:1px solid rgba(196,167,255,.45);box-shadow:0 14px 34px -16px rgba(123,92,255,.7),inset 0 1px 0 rgba(255,255,255,.14);color:#fff;transition:transform .16s var(--ease),box-shadow .16s}
.banner.v2-attendance-banner:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px rgba(123,92,255,.85),inset 0 1px 0 rgba(255,255,255,.16)}
.banner.v2-attendance-banner:active{transform:scale(.995)}
.banner.v2-attendance-banner::before{content:"💎";flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.banner.v2-attendance-banner::after{content:"";position:absolute;right:-40px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent);pointer-events:none}
.banner.v2-attendance-banner .bt .s{color:rgba(255,255,255,.75);font-size:12px}
.banner.v2-attendance-banner .bt .m{color:#fff;font-size:16px}
.banner.v2-attendance-banner .bt .c{color:rgba(255,255,255,.8);font-size:12.5px}
.banner.v2-attendance-banner>span{color:rgba(255,255,255,.9);font-size:22px;font-weight:700;padding-right:4px}
@media (min-width:1024px){
  .banner.v2-attendance-banner{padding:20px 22px}
  .banner.v2-attendance-banner::before{width:60px;height:60px;font-size:30px}
  .banner.v2-attendance-banner .bt .m{font-size:17px}
}