:root{
    --bg:#FBFBFD;
    --ink:#0C0C12;
    --ink-2:#3B3B47;
    --muted:#7C7C8C;
    --faint:#A3A3B2;
    --line:rgba(14,14,26,.08);
    --line-2:rgba(14,14,26,.055);
    --card:#FFFFFF;
    --violet:#7C5CFF;
    --blue:#3E7BFA;
    --pink:#FF6BAA;
    --mint:#25D0A8;
    --amber:#FFA940;
    --maxw:1200px;
    --r-lg:30px;
    --r-md:20px;
    --r-sm:14px;
    --shadow-s:0 1px 2px rgba(12,12,25,.04), 0 4px 14px rgba(12,12,25,.045);
    --shadow-m:0 2px 6px rgba(12,12,25,.05), 0 18px 48px -14px rgba(12,12,25,.14);
    --shadow-l:0 4px 10px rgba(12,12,25,.05), 0 40px 80px -28px rgba(24,20,60,.22);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Pretendard Variable',Pretendard,'Inter',system-ui,-apple-system,sans-serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
    word-break:keep-all;
    overflow-wrap:break-word;
  }
  .en{font-family:'Inter','Pretendard Variable',Pretendard,system-ui,sans-serif}

  /* ── Vapor / aurora backdrop ───────────────────────── */
  .aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
  .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
  .b1{width:56vw;height:56vw;left:-14vw;top:-22vw;background:radial-gradient(circle at 30% 30%,#C9B7FF,#8EA6FF 45%,rgba(255,255,255,0) 72%);animation:drift1 26s ease-in-out infinite}
  .b2{width:48vw;height:48vw;right:-12vw;top:-16vw;background:radial-gradient(circle at 60% 40%,#FFC6E0,#FFD8B0 48%,rgba(255,255,255,0) 74%);animation:drift2 32s ease-in-out infinite}
  .b3{width:44vw;height:44vw;left:24vw;top:34vw;background:radial-gradient(circle at 50% 50%,#B9F3E4,#BFD9FF 50%,rgba(255,255,255,0) 74%);opacity:.4;animation:drift3 38s ease-in-out infinite}
  @keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,4vw,0) scale(1.12)}}
  @keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-7vw,5vw,0) scale(1.08)}}
  @keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4vw,-6vw,0) scale(1.15)}}
  /* subtle grain + fade to solid bg */
  .aurora::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(251,251,253,.15) 0%,rgba(251,251,253,.72) 46%,var(--bg) 78%);
  }
  .grid-lines{
    position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
    background-image:linear-gradient(rgba(14,14,26,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(14,14,26,.035) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(120% 70% at 50% 0%,#000 0%,transparent 70%);
    mask-image:radial-gradient(120% 70% at 50% 0%,#000 0%,transparent 70%);
  }

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative}

  /* ── Motion ────────────────────────────────────────── */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(124,92,255,.45)}70%{box-shadow:0 0 0 8px rgba(124,92,255,0)}}
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .reveal{opacity:1!important;transform:none!important}
  }

  /* ── Nav ───────────────────────────────────────────── */
  .nav-outer{position:sticky;top:0;z-index:80;padding:14px 0;transition:padding .3s ease}
  .nav{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:11px 12px 11px 20px;border-radius:999px;
    background:rgba(255,255,255,.62);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:0 1px 1px rgba(12,12,25,.03);
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    transition:box-shadow .35s ease,background .35s ease,border-color .35s ease;
  }
  .nav.stuck{background:rgba(255,255,255,.82);border-color:var(--line);box-shadow:var(--shadow-s)}
  .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-.01em}
  .brand-mark{
    width:26px;height:26px;border-radius:9px;flex:none;
    background:linear-gradient(135deg,var(--violet),var(--blue) 55%,var(--mint));
    box-shadow:0 4px 12px rgba(124,92,255,.35);
    position:relative;
  }
  .brand-mark::after{content:"";position:absolute;inset:7px;border-radius:4px;background:#fff;opacity:.92}
  .nav-links{display:flex;align-items:center;gap:4px}
  .nav-links a{
    color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;
    padding:8px 14px;border-radius:999px;transition:color .2s ease,background .2s ease;
  }
  .nav-links a:hover{color:var(--ink);background:rgba(14,14,26,.045)}
  .nav-cta{
    display:inline-flex;align-items:center;gap:7px;
    background:var(--ink);color:#fff;text-decoration:none;
    font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:999px;white-space:nowrap;
    transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,opacity .2s;
  }
  .nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(12,12,25,.5)}
  @media(max-width:1080px){.nav-links{display:none}}

  /* ── Hero ──────────────────────────────────────────── */
  .hero{padding:76px 0 34px;text-align:center;position:relative}
  .eyebrow{
    display:inline-flex;align-items:center;gap:9px;
    padding:7px 16px 7px 12px;border-radius:999px;
    background:rgba(255,255,255,.7);border:1px solid var(--line);
    backdrop-filter:blur(10px);
    font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:-.01em;
    box-shadow:var(--shadow-s);
    animation:rise .8s cubic-bezier(.16,1,.3,1) both;
  }
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--violet);animation:pulse 2.6s ease-in-out infinite}
  h1{
    margin:26px auto 0;max-width:16ch;
    font-size:clamp(34px,5.6vw,66px);
    font-weight:800;line-height:1.1;letter-spacing:-.035em;
    animation:rise .9s .08s cubic-bezier(.16,1,.3,1) both;
  }
  h1 .grad{
    background:linear-gradient(100deg,var(--violet) 0%,var(--blue) 42%,var(--mint) 78%);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .hero-sub{
    margin:22px auto 0;max-width:52ch;
    font-size:clamp(15px,1.6vw,18px);color:var(--muted);font-weight:450;letter-spacing:-.01em;
    animation:rise .9s .16s cubic-bezier(.16,1,.3,1) both;
  }
  .hero-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:34px;animation:rise .9s .24s cubic-bezier(.16,1,.3,1) both}
  .btn{
    display:inline-flex;align-items:center;gap:8px;text-decoration:none;
    font-size:14.5px;font-weight:600;padding:13px 24px;border-radius:999px;letter-spacing:-.01em;
    white-space:nowrap;
    transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,background .2s ease;
  }
  .btn-primary{background:var(--ink);color:#fff;box-shadow:0 8px 24px -10px rgba(12,12,25,.6)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(12,12,25,.55)}
  .btn-ghost{background:rgba(255,255,255,.72);color:var(--ink);border:1px solid var(--line);backdrop-filter:blur(10px)}
  .btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--shadow-s)}
  .hero-stats{
    display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-top:46px;
    animation:rise .9s .32s cubic-bezier(.16,1,.3,1) both;
  }
  .stat{padding:0 30px;text-align:center;position:relative}
  .stat + .stat::before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--line)}
  .stat b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
  .stat span{font-size:12px;color:var(--faint);font-weight:500;letter-spacing:.02em}
  @media(max-width:640px){
    .hero{padding:56px 0 26px}
    h1{font-size:clamp(27px,7.4vw,38px);max-width:none;letter-spacing:-.03em}
    .hero-sub{font-size:14.5px;max-width:34ch}
    .hero-cta .btn{flex:1 1 auto;justify-content:center}
    .hero-stats{
      display:grid;grid-template-columns:1fr 1fr;gap:18px 0;margin-top:38px;
      max-width:330px;margin-left:auto;margin-right:auto;
    }
    .stat{padding:0 10px}
    .stat b{font-size:20px}
    .stat + .stat::before{display:none}
    .stat:nth-child(even)::after{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--line)}
  }

  /* ── Section heading ───────────────────────────────── */
  .sec{padding:46px 0}
  .sec,#privacy{scroll-margin-top:96px}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
  .sec-kicker{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--violet);
  }
  .sec-kicker::before{content:"";width:18px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--violet),var(--blue))}
  .sec-title{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.25;margin-top:10px}
  .sec-desc{font-size:14.5px;color:var(--muted);max-width:42ch;letter-spacing:-.01em}

  /* ── App tabs ──────────────────────────────────────── */
  .app-tabs{
    position:sticky;top:70px;z-index:50;
    display:flex;gap:6px;padding:6px;margin-bottom:22px;
    background:rgba(255,255,255,.66);border:1px solid var(--line);border-radius:999px;
    backdrop-filter:blur(14px);box-shadow:var(--shadow-s);
    overflow-x:auto;scrollbar-width:none;
  }
  .app-tabs::-webkit-scrollbar{display:none}
  .app-tab{
    flex:1 1 0;min-width:max-content;
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    padding:11px 18px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;
    background:transparent;color:var(--muted);
    font-family:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
    transition:color .25s ease,background .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;
  }
  .app-tab:hover{color:var(--ink)}
  .app-tab.active{background:var(--ink);color:#fff;box-shadow:0 6px 18px -8px rgba(12,12,25,.7)}
  .app-tab-dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.6)}
  .app-tab.active .app-tab-dot{box-shadow:0 0 0 3px rgba(255,255,255,.16)}

  /* ── App card ──────────────────────────────────────── */
  .app{scroll-margin-top:104px}
  .app + .app{margin-top:22px}
  .app-card{
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--shadow-m);overflow:hidden;position:relative;
  }
  .app-card::before{
    content:"";position:absolute;inset:0 0 auto 0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(124,92,255,.5),rgba(62,123,250,.5),transparent);
  }
  .app-head{display:flex;align-items:center;gap:16px;padding:26px 32px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
  .app-icon{width:54px;height:54px;border-radius:16px;overflow:hidden;flex:none;box-shadow:0 8px 20px -8px rgba(12,12,25,.4)}
  .app-icon svg,.app-icon img{display:block;width:100%;height:100%;object-fit:cover}
  .app-titles{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  .app-name{font-size:20px;font-weight:750;letter-spacing:-.025em;line-height:1.3}
  .app-sub{font-size:13.5px;color:var(--muted);letter-spacing:-.01em}
  .app-tag{
    font-size:12px;font-weight:600;padding:6px 13px;border-radius:999px;flex:none;
    color:var(--violet);background:rgba(124,92,255,.09);border:1px solid rgba(124,92,255,.16);
  }
  .app-body{padding:30px 32px 34px}
  .app-body-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
  .app-desc{font-size:14.8px;color:var(--ink-2);letter-spacing:-.01em;line-height:1.78}
  .feat-label{
    margin:26px 0 14px;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  }
  .feat-list{list-style:none;display:flex;flex-direction:column;gap:11px}
  .feat-list li{
    position:relative;padding-left:26px;font-size:14.2px;color:var(--ink-2);letter-spacing:-.012em;line-height:1.6;
  }
  .feat-list li::before{
    content:"";position:absolute;left:0;top:8px;width:15px;height:15px;border-radius:50%;
    background:linear-gradient(135deg,rgba(124,92,255,.14),rgba(62,123,250,.14));
  }
  .feat-list li::after{
    content:"";position:absolute;left:4.6px;top:12.2px;width:5.4px;height:3px;
    border-left:1.8px solid var(--violet);border-bottom:1.8px solid var(--violet);
    transform:rotate(-45deg);
  }
  .playbtn{
    display:inline-flex;align-items:center;gap:9px;margin-top:26px;text-decoration:none;
    background:var(--ink);color:#fff;font-size:14px;font-weight:600;letter-spacing:-.01em;
    padding:12px 22px;border-radius:999px;white-space:nowrap;
    transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease;
    box-shadow:0 8px 22px -10px rgba(12,12,25,.6);
  }
  .playbtn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(12,12,25,.55)}
  .playbtn svg{width:15px;height:15px}

  .shots{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .shot{
    border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
    background:linear-gradient(180deg,#F4F4F8,#EDEDF3);
    box-shadow:var(--shadow-m);
    transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease;
  }
  .shot:hover{transform:translateY(-6px);box-shadow:var(--shadow-l)}
  .shot img{display:block;width:100%;height:auto}

  @media(max-width:960px){
    .app-body-inner{grid-template-columns:1fr;gap:32px}
    .app-head,.app-body{padding-left:22px;padding-right:22px}
    .shots{max-width:460px}
  }
  @media(max-width:640px){
    .wrap{padding:0 16px}
    .app-head{gap:13px;padding-top:20px;padding-bottom:20px}
    .app-icon{width:46px;height:46px;border-radius:14px}
    .app-name{font-size:17.5px}
    .app-sub{font-size:12.5px}
    .app-head::after{content:"";order:2;flex-basis:100%;height:0}
    .app-tag{order:3;margin-left:59px;margin-top:-2px}
    .app-body{padding-top:24px;padding-bottom:28px}
    .app-desc{font-size:14px}
    .feat-list li{font-size:13.6px}
    .app-tab{padding:10px 15px;font-size:13.2px}
    .sec-title{margin-top:8px}
    .notice{padding:20px;gap:13px;margin-top:40px}
  }

  /* ── Upcoming ──────────────────────────────────────── */
  .up-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .up-card{
    position:relative;overflow:hidden;
    display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    padding:24px 22px 26px;border-radius:var(--r-md);
    background:rgba(255,255,255,.7);border:1px solid var(--line);
    backdrop-filter:blur(14px);box-shadow:var(--shadow-s);
    transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .3s ease;
  }
  .up-card::after{
    content:"";position:absolute;inset:auto -30% -60% -30%;height:120px;
    background:radial-gradient(circle,rgba(124,92,255,.16),transparent 70%);
    opacity:0;transition:opacity .45s ease;
  }
  .up-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);border-color:rgba(124,92,255,.28)}
  .up-card:hover::after{opacity:1}
  .up-badge{
    position:absolute;top:16px;right:16px;
    font-size:10.5px;font-weight:700;letter-spacing:.06em;
    color:var(--amber);background:rgba(255,169,64,.12);border:1px solid rgba(255,169,64,.24);
    padding:4px 10px;border-radius:999px;
  }
  .up-icon{width:56px;height:56px;border-radius:16px;overflow:hidden;box-shadow:0 8px 20px -10px rgba(12,12,25,.5);margin-bottom:14px}
  .up-icon img{display:block;width:100%;height:100%;object-fit:cover}
  .up-name{font-size:16px;font-weight:700;letter-spacing:-.02em}
  .up-sub{font-size:12.8px;color:var(--muted);letter-spacing:-.01em}
  @media(max-width:900px){.up-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:460px){.up-grid{grid-template-columns:1fr}}

  /* ── Notice ────────────────────────────────────────── */
  .notice{
    display:flex;gap:16px;align-items:flex-start;
    margin:56px 0 0;padding:24px 26px;border-radius:var(--r-md);
    background:linear-gradient(120deg,rgba(124,92,255,.055),rgba(37,208,168,.05));
    border:1px solid rgba(124,92,255,.14);
  }
  .notice-icon{
    width:38px;height:38px;border-radius:12px;flex:none;
    display:grid;place-items:center;color:#fff;
    background:linear-gradient(135deg,var(--violet),var(--blue));
    box-shadow:0 8px 18px -8px rgba(124,92,255,.8);
  }
  .notice-icon svg{width:19px;height:19px}
  .notice-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);margin-bottom:5px}
  .notice-body{font-size:14px;color:var(--ink-2);letter-spacing:-.01em;line-height:1.7}
  .notice-body strong{font-weight:700;color:var(--ink)}

  /* ── Footer ────────────────────────────────────────── */
  footer{
    margin-top:72px;padding:34px 0 46px;border-top:1px solid var(--line);
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    font-size:12.8px;color:var(--faint);letter-spacing:-.005em;
  }
  footer .f-brand{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-weight:600}

  /* ── Visit counter ─────────────────────────────────── */
  .visit-counter{
    position:fixed;right:20px;bottom:20px;z-index:70;
    display:inline-flex;align-items:center;gap:9px;
    padding:9px 16px;border-radius:999px;
    background:rgba(255,255,255,.78);border:1px solid var(--line);
    backdrop-filter:saturate(180%) blur(16px);
    box-shadow:var(--shadow-m);
    font-size:12.5px;color:var(--ink-2);font-weight:600;letter-spacing:-.01em;
    opacity:0;transform:translateY(12px);pointer-events:none;
    transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);
  }
  .visit-counter.show{opacity:1;transform:none}
  .vc-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:pulse 2.6s ease-in-out infinite;box-shadow:0 0 0 0 rgba(37,208,168,.5)}
  .vc-label{color:var(--faint);font-weight:500}
  .vc-num{font-variant-numeric:tabular-nums;font-weight:750;color:var(--ink)}
  @media(max-width:520px){.visit-counter{right:12px;bottom:12px;padding:7px 13px;font-size:11.5px}}

  /* ═══════════════════════════════════════════════════
     Multi-page components
     ═══════════════════════════════════════════════════ */

  /* Breadcrumb */
  .crumb{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    padding:26px 0 0;font-size:13px;color:var(--faint);letter-spacing:-.01em;
  }
  .crumb a{color:var(--muted);text-decoration:none;transition:color .2s}
  .crumb a:hover{color:var(--violet)}
  .crumb .sep{opacity:.55}
  .crumb [aria-current]{color:var(--ink-2);font-weight:600}

  /* ── Hub: app summary cards ───────────────────────── */
  .hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .hub-card{
    position:relative;display:flex;flex-direction:column;
    padding:28px 28px 26px;border-radius:var(--r-lg);
    background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-s);
    transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .3s ease;
    overflow:hidden;
  }
  .hub-card::before{
    content:"";position:absolute;inset:0 0 auto 0;height:3px;opacity:0;transition:opacity .35s ease;
    background:linear-gradient(90deg,var(--violet),var(--blue),var(--mint));
  }
  .hub-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:rgba(124,92,255,.24)}
  .hub-card:hover::before{opacity:1}
  .hub-top{display:flex;align-items:center;gap:15px;margin-bottom:16px}
  .hub-top .app-icon{width:50px;height:50px;border-radius:15px}
  .hub-titles{display:flex;flex-direction:column;gap:1px;min-width:0}
  .hub-name{font-size:18.5px;font-weight:750;letter-spacing:-.025em;line-height:1.3}
  .hub-name a{color:inherit;text-decoration:none}
  .hub-name a::after{content:"";position:absolute;inset:0}
  .hub-sub{font-size:13px;color:var(--muted);letter-spacing:-.01em}
  .hub-desc{font-size:14px;color:var(--ink-2);letter-spacing:-.012em;line-height:1.72}
  .hub-chips{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 20px}
  .hub-chip{
    font-size:12px;font-weight:500;color:var(--ink-2);letter-spacing:-.01em;
    padding:5px 11px;border-radius:999px;background:rgba(14,14,26,.045);
  }
  .hub-actions{display:flex;align-items:center;gap:14px;margin-top:auto}
  .hub-more{
    display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
    font-size:13.8px;font-weight:650;color:var(--violet);text-decoration:none;letter-spacing:-.01em;
  }
  .hub-more .arw{transition:transform .3s cubic-bezier(.16,1,.3,1);display:inline-block}
  .hub-card:hover .hub-more .arw{transform:translateX(4px)}
  .hub-play{
    position:relative;z-index:1;
    display:inline-flex;align-items:center;gap:7px;
    font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;letter-spacing:-.01em;
    padding:7px 14px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;
    transition:color .2s,border-color .2s,background .2s;
  }
  .hub-play:hover{color:var(--ink);border-color:rgba(14,14,26,.2);background:rgba(14,14,26,.03)}
  .hub-play svg{width:13px;height:13px}
  /* 카드 개수가 홀수면 마지막 카드를 한 줄 전체로 */
  .hub-card:last-child:nth-child(odd){grid-column:1 / -1}
  @media(max-width:820px){.hub-grid{grid-template-columns:1fr}}

  /* ── Detail page hero ─────────────────────────────── */
  .detail-hero{padding:30px 0 12px}
  .dh-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  .dh-icon{width:76px;height:76px;border-radius:22px;overflow:hidden;flex:none;box-shadow:0 14px 30px -12px rgba(12,12,25,.45)}
  .dh-icon svg,.dh-icon img{display:block;width:100%;height:100%;object-fit:cover}
  .dh-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
  .dh-cat{
    display:inline-flex;align-items:center;gap:7px;width:fit-content;
    font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--violet);
    background:rgba(124,92,255,.09);border:1px solid rgba(124,92,255,.16);
    padding:4px 11px;border-radius:999px;
  }
  .dh-headline{
    margin:26px 0 0;max-width:20ch;
    font-size:clamp(30px,4.4vw,50px);font-weight:800;line-height:1.15;letter-spacing:-.035em;
  }
  .detail-hero h1{margin:0;max-width:none;text-align:left;animation:none;line-height:1.3}
  .dh-tagline{
    margin:18px 0 0;max-width:62ch;
    font-size:clamp(15px,1.7vw,18.5px);color:var(--muted);letter-spacing:-.012em;line-height:1.72;
  }
  .dh-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

  /* ── Detail body ──────────────────────────────────── */
  .detail-body{
    display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:start;
    margin-top:12px;padding:34px;border-radius:var(--r-lg);
    background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-m);
  }
  .detail-body h2{font-size:19px;font-weight:750;letter-spacing:-.025em;margin-bottom:14px}
  .detail-body h2 + p{margin-bottom:26px}
  .detail-body p{font-size:14.8px;color:var(--ink-2);letter-spacing:-.01em;line-height:1.8}
  @media(max-width:960px){
    .detail-body{grid-template-columns:1fr;gap:32px;padding:24px}
  }

  /* ── FAQ ──────────────────────────────────────────── */
  .faq-list{display:flex;flex-direction:column;gap:10px}
  .faq-item{
    border:1px solid var(--line);border-radius:var(--r-md);
    background:rgba(255,255,255,.72);backdrop-filter:blur(12px);
    overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease;
  }
  .faq-item[open]{border-color:rgba(124,92,255,.26);box-shadow:var(--shadow-s)}
  .faq-item summary{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:18px 22px;font-size:15px;font-weight:650;letter-spacing:-.015em;color:var(--ink);
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{
    content:"";flex:none;width:9px;height:9px;
    border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
    transform:rotate(45deg) translateY(-2px);transition:transform .3s cubic-bezier(.16,1,.3,1);
  }
  .faq-item[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
  .faq-item .faq-a{
    padding:0 22px 20px;font-size:14.3px;color:var(--ink-2);letter-spacing:-.01em;line-height:1.8;
  }

  /* ── Other apps strip ─────────────────────────────── */
  .other-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .other-card{
    display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--r-md);
    background:rgba(255,255,255,.7);border:1px solid var(--line);text-decoration:none;
    backdrop-filter:blur(12px);
    transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .3s ease;
  }
  .other-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-s);border-color:rgba(124,92,255,.26)}
  .other-card .app-icon{width:42px;height:42px;border-radius:13px;box-shadow:0 6px 14px -7px rgba(12,12,25,.4)}
  .other-t{display:flex;flex-direction:column;gap:1px;min-width:0}
  .other-n{font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
  .other-s{font-size:12.2px;color:var(--muted);letter-spacing:-.01em}
  @media(max-width:820px){.other-grid{grid-template-columns:1fr}}

  /* Shots on detail page: stack side by side, sticky on desktop */
  .detail-shots{position:sticky;top:100px}
  @media(max-width:960px){.detail-shots{position:static}}

  @media(max-width:640px){
    .detail-hero{padding:20px 0 6px}
    .dh-icon{width:62px;height:62px;border-radius:18px}
    .dh-headline{font-size:clamp(25px,7vw,34px);margin-top:20px;max-width:none}
    .dh-top{gap:15px}
    .dh-tagline{font-size:14.5px;margin-top:15px}
    .dh-cta .btn{flex:1 1 auto;justify-content:center}
    .faq-item summary{padding:15px 17px;font-size:14.2px}
    .faq-item .faq-a{padding:0 17px 17px;font-size:13.6px}
    .hub-card{padding:22px 20px 20px}
    .crumb{font-size:12px}
  }