:root{
      --bg:#080808;
      --panel:#111;
      --line:rgba(255,255,255,.12);
      --text:#f7f7f4;
      --muted:#a5a5a1;
      --accent:#d8ff57;
      --radius:28px;
      --shadow:0 24px 80px rgba(0,0,0,.36);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:
        radial-gradient(circle at 82% 0%, rgba(216,255,87,.10), transparent 28%),
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.05), transparent 26%),
        var(--bg);
      color:var(--text);
      font-family:"Inter","Noto Sans KR",sans-serif;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    button{font:inherit}
    .noise{
      position:fixed; inset:0; pointer-events:none; z-index:100;
      opacity:.055; mix-blend-mode:screen;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    }
    .wrap{width:min(1480px, calc(100% - 40px)); margin:auto}
    .nav{
      position:fixed; top:18px; left:50%; transform:translateX(-50%);
      width:min(1480px, calc(100% - 40px)); height:64px;
      padding:0 14px 0 20px;
      border:1px solid var(--line); border-radius:22px;
      backdrop-filter:blur(24px) saturate(150%);
      background:rgba(13,13,13,.62);
      display:flex; align-items:center; justify-content:space-between;
      z-index:80;
    }
    .brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.04em}
    .brand-mark{
      width:32px; height:32px; border-radius:50%;
      background:conic-gradient(from 180deg,var(--accent),#fff 36%,#6a6a6a 60%,var(--accent));
      box-shadow:0 0 28px rgba(216,255,87,.24);
    }
    .nav-links{display:flex; gap:26px; color:#d4d4d0; font-size:14px}
    .nav-links a{opacity:.72; transition:.2s}
    .nav-links a:hover{opacity:1}
    .nav-links a.admin-only{color:var(--accent);opacity:.9}
    .nav-links a[hidden]{display:none}
    .upload{
      border:0; background:var(--accent); color:#0b0b0b;
      border-radius:14px; padding:12px 16px; font-weight:800; cursor:pointer;
      transition:.25s transform,.25s box-shadow;
    }
    .upload:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(216,255,87,.18)}

    .hero{
      min-height:100vh; padding:126px 0 54px; display:grid; align-items:end;
      position:relative;
    }
    .hero-grid{
      display:grid; grid-template-columns:1.03fr .97fr; gap:18px; align-items:stretch;
    }
    .hero-copy{
      min-height:650px; border:1px solid var(--line); border-radius:36px;
      padding:48px; display:flex; flex-direction:column; justify-content:space-between;
      background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));
      box-shadow:var(--shadow); position:relative; overflow:hidden;
    }
    .hero-copy:after{
      content:""; position:absolute; width:340px; height:340px; border-radius:50%;
      right:-150px; bottom:-120px; background:var(--accent); filter:blur(110px); opacity:.15;
    }
    .eyebrow{font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); font-weight:700}
    h1{
      font-size:clamp(64px,8.5vw,154px); line-height:.82; letter-spacing:-.075em;
      margin:20px 0 24px; max-width:820px;
    }
    .hero-bottom{display:flex; justify-content:space-between; align-items:end; gap:30px}
    .lead{font-size:18px; line-height:1.7; color:#b9b9b3; max-width:500px; margin:0}
    .counter{
      font-size:13px; color:#8b8b86; text-transform:uppercase; letter-spacing:.14em; text-align:right;
    }
    .hero-media{
      min-height:650px; border-radius:36px; overflow:hidden; position:relative; border:1px solid var(--line);
      box-shadow:var(--shadow); background:#151515;
    }
    .hero-media img{
      position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
      transform:scale(1.02); filter:saturate(.85) contrast(1.03);
      transition:transform 1.2s cubic-bezier(.2,.8,.2,1), filter .4s;
    }
    .hero-media:hover img{transform:scale(1.07); filter:saturate(1)}
    .hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72))}
    .media-caption{
      position:absolute; left:28px; right:28px; bottom:26px;
      display:flex; justify-content:space-between; align-items:end;
    }
    .tag{
      display:inline-flex; padding:8px 11px; border-radius:999px;
      background:rgba(0,0,0,.35); backdrop-filter:blur(18px);
      border:1px solid rgba(255,255,255,.18); font-size:12px;
    }
    .media-title{font-size:28px; font-weight:700; letter-spacing:-.04em; margin-top:10px}
    .round-arrow{
      width:56px; height:56px; border-radius:50%; border:1px solid rgba(255,255,255,.35);
      display:grid; place-items:center; font-size:25px; backdrop-filter:blur(16px); transition:.2s;
    }
    .hero-media:hover .round-arrow{background:#fff;color:#111; transform:rotate(-8deg)}

    section{padding:90px 0}
    .section-head{
      display:flex; align-items:end; justify-content:space-between; gap:28px; margin-bottom:28px;
    }
    .section-title{font-size:clamp(42px,5vw,76px); margin:0; letter-spacing:-.065em; line-height:.95}
    .section-note{max-width:380px; color:var(--muted); line-height:1.65; margin:0}
    .filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px}
    .filter{
      border:1px solid var(--line); background:#0f0f0f; color:#cfcfca;
      padding:10px 14px; border-radius:999px; cursor:pointer;
      transition:.2s;
    }
    .filter.active,.filter:hover{background:var(--text); color:#0b0b0b; border-color:var(--text)}

    .masonry{columns:3 340px; column-gap:18px}
    .card{
      break-inside:avoid; margin:0 0 18px; position:relative; border-radius:26px;
      overflow:hidden; background:#141414; border:1px solid var(--line); cursor:pointer;
      transform:translateY(0); transition:.25s transform,.25s border-color;
    }
    .card:hover{transform:translateY(-5px); border-color:rgba(255,255,255,.3)}
    .card img{width:100%; display:block; transition:.6s transform cubic-bezier(.2,.8,.2,1),.35s filter}
    .card:hover img{transform:scale(1.035); filter:saturate(1.07)}
    .card-info{
      position:absolute; left:0; right:0; bottom:0; padding:52px 18px 18px;
      background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));
      display:flex; align-items:end; justify-content:space-between; gap:14px;
    }
    .card-title{font-weight:700; font-size:18px; letter-spacing:-.025em}
    .card-meta{font-size:12px; opacity:.65; margin-top:4px}
    .card-index{font-size:12px; opacity:.6}
    .play{
      position:absolute; top:16px; right:16px; width:48px;height:48px;border-radius:50%;
      display:grid; place-items:center; background:rgba(0,0,0,.38);
      border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(12px); font-size:16px;
    }

    .reel{
      border:1px solid var(--line); border-radius:34px; overflow:hidden;
      min-height:560px; position:relative; background:#111;
    }
    .reel video{
      width:100%; height:100%; min-height:560px; object-fit:cover; display:block;
      filter:saturate(.75) contrast(1.06);
    }
    .reel:after{
      content:""; position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(90deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.12) 52%,rgba(0,0,0,.3));
    }
    .reel-copy{
      position:absolute; inset:0; z-index:2; padding:42px;
      display:flex; flex-direction:column; justify-content:space-between; pointer-events:none;
    }
    .reel-copy h3{font-size:clamp(44px,6vw,94px); max-width:760px; line-height:.9; letter-spacing:-.065em; margin:0}
    .reel-actions{display:flex; justify-content:space-between; align-items:end; gap:20px}
    .reel-desc{max-width:430px; color:#d2d2cd; line-height:1.65}
    .sound-note{font-size:12px; opacity:.64}

    .manifesto{
      border-top:1px solid var(--line); border-bottom:1px solid var(--line);
      padding:64px 0; overflow:hidden;
    }
    .ticker{
      white-space:nowrap; font-size:clamp(60px,8vw,132px); letter-spacing:-.07em;
      font-weight:700; animation:ticker 20s linear infinite; width:max-content;
    }
    .ticker span{color:var(--accent)}
    @keyframes ticker{to{transform:translateX(-50%)}}

    .about-grid{
      display:grid; grid-template-columns:1.1fr .9fr; gap:18px;
    }
    .about-card{
      min-height:360px; border:1px solid var(--line); border-radius:30px;
      padding:32px; background:rgba(255,255,255,.025);
      display:flex; flex-direction:column; justify-content:space-between;
    }
    .big-stat{font-size:clamp(80px,10vw,170px); letter-spacing:-.09em; line-height:.75; font-weight:700}
    .about-card p{max-width:520px;color:var(--muted);line-height:1.7;margin:0}

    footer{padding:70px 0 34px}
    .footer-grid{display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end}
    .footer-title{font-size:clamp(54px,7vw,110px); line-height:.9; letter-spacing:-.07em; margin:0}
    .footer-links{display:grid; gap:10px; text-align:right; color:#aaa}

    .modal{
      position:fixed; inset:0; background:rgba(0,0,0,.82); backdrop-filter:blur(18px);
      z-index:200; display:none; place-items:center; padding:24px;
    }
    .modal.open{display:grid}
    .modal-box{
      width:min(1100px,100%); max-height:88vh; border-radius:28px; overflow:hidden;
      border:1px solid rgba(255,255,255,.16); background:#101010; position:relative;
    }
    .modal-box img{width:100%; max-height:88vh; object-fit:contain; display:block}
    .close{
      position:absolute; top:16px; right:16px; z-index:3;
      width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
      background:rgba(0,0,0,.45);color:#fff;cursor:pointer;font-size:20px;
    }

    .cursor{
      position:fixed; width:18px; height:18px; border:1px solid rgba(255,255,255,.8);
      border-radius:50%; pointer-events:none; z-index:300; transform:translate(-50%,-50%);
      transition:width .2s,height .2s,background .2s; mix-blend-mode:difference;
    }
    body.hovering .cursor{width:48px;height:48px;background:#fff}


    .replace-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);z-index:250;background:rgba(12,12,12,.92);border:1px solid rgba(255,255,255,.16);color:#eee;border-radius:14px;padding:12px 16px;font-size:13px;box-shadow:0 16px 50px rgba(0,0,0,.38);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:.22s opacity,.22s transform;white-space:nowrap}.replace-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.replace-toast.ok{border-color:rgba(216,255,87,.35);color:var(--accent)}.replace-toast.err{border-color:rgba(255,110,110,.35);color:#ffb1b1}
    .replace-photo-btn{display:none;position:absolute;top:11px;right:11px;z-index:35;width:14px;height:14px;padding:0;border:1px solid rgba(0,0,0,.16);background:var(--accent);color:#111;border-radius:50%;font-size:0;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 5px 14px rgba(0,0,0,.28);transition:.16s transform,.16s box-shadow,.16s filter}
    .replace-photo-btn:hover{transform:scale(1.12);filter:brightness(1.06);box-shadow:0 7px 18px rgba(216,255,87,.22)}
    body.admin-edit .replace-photo-btn{display:grid;place-items:center}
    body.admin-edit [data-replace-slot],body.admin-edit .card[data-item-id] img{cursor:pointer}
    .nav-right{display:flex;align-items:center;gap:8px}
    .menu-btn{display:none!important;width:44px;height:44px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
    .menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:#e8e8e4;transition:.25s}
    .nav.open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .nav.open .menu-btn span:nth-child(2){opacity:0}
    .nav.open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    @media (max-width:900px){
      .menu-btn{display:flex!important}
      /* 폰 메뉴: 상단바 아래로 펼쳐지는 패널 (같은 링크를 그대로 사용) */
      .nav-links{
        display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);
        flex-direction:column;gap:0;padding:8px;
        border:1px solid var(--line);border-radius:18px;
        background:#101010;
        box-shadow:0 20px 60px rgba(0,0,0,.45);font-size:16px
      }
      .nav.open .nav-links{display:flex}
      .nav-links a{opacity:.9;padding:14px 16px;border-radius:12px}
      .nav-links a:active{background:rgba(255,255,255,.06)}
      .nav-links a + a{border-top:1px solid rgba(255,255,255,.06)}
      .nav-links a.admin-only{background:rgba(216,255,87,.08)}
      .hero-grid,.about-grid{grid-template-columns:1fr}
      .hero-copy{min-height:520px;padding:30px}
      .hero-media{min-height:560px}
      .hero-bottom{align-items:start;flex-direction:column}
      .section-head{align-items:start;flex-direction:column}
      .reel-copy{padding:28px}
      .footer-grid{grid-template-columns:1fr}
      .footer-links{text-align:left}
    }
    @media (max-width:620px){
      .wrap,.nav{width:min(100% - 22px,1480px)}
      .nav{top:10px;height:58px}
      .upload{padding:10px 12px}
      .hero{padding-top:88px}
      .hero-copy,.hero-media{border-radius:26px}
      .hero-copy{min-height:450px;padding:24px}
      h1{font-size:64px}
      section{padding:64px 0}
      .masonry{columns:1}
      .reel,.reel video{min-height:620px}
      .cursor{display:none}
    }