:root{
      --bg:#0b0f1a; --bg-2:#0e1422; --ink:#eef2ff; --muted:#9aa6c4; --line:rgba(255,255,255,.10);
      --c1:#6ee7f9; --c2:#818cf8;
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    body{
      font-family:"Inter",-apple-system,system-ui,sans-serif;color:var(--ink);
      background:
        radial-gradient(1200px 700px at 82% -12%, rgba(129,140,248,.20), transparent 60%),
        radial-gradient(1000px 640px at 0% 8%, rgba(110,231,249,.14), transparent 55%),
        linear-gradient(180deg,var(--bg-2),var(--bg));
      min-height:100vh;-webkit-font-smoothing:antialiased
    }
    .wrap{position:relative;z-index:1;width:100%;max-width:880px;margin:0 auto;padding:0 22px}

    nav{display:flex;align-items:center;gap:11px;padding:26px 0 8px}
    nav img{width:34px;height:34px;display:block;image-rendering:pixelated}
    nav .name{font-family:"Space Grotesk";font-weight:700;font-size:19px;letter-spacing:.2px;flex:1}
    .lang-toggle{font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--line);
      background:none;border-radius:999px;padding:7px 14px;cursor:pointer;font-family:inherit;
      transition:color .14s ease,border-color .14s ease}
    .lang-toggle:hover{color:var(--c1);border-color:rgba(110,231,249,.4)}
    .lang-toggle.hide{display:none}

    .kicker{font-family:"Space Grotesk";font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
      color:var(--muted);margin:34px 0 10px}
    h1{font-family:"Space Grotesk";font-weight:700;font-size:clamp(32px,6vw,50px);line-height:1.05;margin:0;letter-spacing:-1.2px;
      background:linear-gradient(100deg,#fff 30%,var(--c1) 75%,var(--c2));-webkit-background-clip:text;background-clip:text;color:transparent}
    .intro{color:var(--muted);font-size:clamp(15px,2.3vw,17px);line-height:1.65;margin:14px 0 0;max-width:600px}

    /* ── 플레이어 ── */
    .stage{margin:28px 0 0;border:1px solid var(--line);border-radius:22px;overflow:hidden;
      background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
    .video-box{background:#000;display:flex;justify-content:center}
    .video-box video{display:block;width:100%;max-height:min(66vh,560px);object-fit:contain;background:#000}
    .bar{display:flex;align-items:center;gap:16px;padding:14px 18px;border-top:1px solid var(--line)}
    /* Listen 은 그 회차의 그림 위에서 듣는다 — 앱 아이콘을 재생면에 두면 연재물이 광고로 읽힌다
       (founder 2026-09-15: "red panda 를 넣으면 chillfriends app 과 혼동된다") */
    .audio-box{position:relative;width:100%;display:flex;flex-direction:column;justify-content:flex-end;
      gap:14px;padding:22px;background:#000;overflow:hidden}
    .audio-box #aposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .audio-box .a-veil{position:absolute;inset:0;                       /* 컨트롤이 앉을 자리만 어둡게 */
      background:linear-gradient(180deg,rgba(6,9,16,0) 55%,rgba(6,9,16,.78))}
    .audio-box audio{position:relative;width:100%}
    .modes{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:999px}
    .mode{font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:none;border:0;
      padding:5px 13px;border-radius:999px;cursor:pointer}
    .mode.on{background:var(--c1);color:#fff}
    .crossline{margin:30px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}
    .crossline a{color:var(--c1);text-decoration:none;font-weight:600;white-space:nowrap}
    .crossline a:hover{text-decoration:underline;text-underline-offset:3px}
    .now{flex:1;min-width:0}
    .now .n-ep{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c1)}
    .now .n-title{font-family:"Space Grotesk";font-weight:600;font-size:16px;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .now .full-link{display:inline-block;margin-top:5px;font-size:12px;font-weight:600;
      color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:color .13s ease,border-color .13s ease}
    .now .full-link:hover{color:var(--c1);border-bottom-color:currentColor}
    .store{display:flex;align-items:center;gap:10px;flex:none}
    .store .apps{display:flex;gap:8px}
    .store a{display:block;line-height:0}
    .store img{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.10);
      box-shadow:0 4px 12px rgba(0,0,0,.35);transition:transform .13s ease}
    .store a:hover img{transform:translateY(-2px)}
    .store .cap{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);
      text-transform:uppercase;text-align:center;margin-top:5px}

    /* ── 에피소드 레일 (가로 스크롤) ── */
    .vol{margin:26px 0 0}
    .vol h2{font-family:"Space Grotesk";font-weight:600;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
      color:var(--muted);margin:0 0 10px}
    .rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 12px;
      scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
    .rail::-webkit-scrollbar{height:6px}
    .rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
    .ep{scroll-snap-align:start;flex:0 0 auto;width:172px;text-align:left;cursor:pointer;
      font-family:inherit;color:inherit;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
      border:1px solid var(--line);border-radius:15px;padding:13px 14px;
      transition:border-color .13s ease,transform .13s ease}
    .ep:hover{transform:translateY(-2px);border-color:rgba(110,231,249,.35)}
    .ep.on{border-color:rgba(110,231,249,.55);background:rgba(110,231,249,.08)}
    .ep .e-num{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
    .ep.on .e-num{color:var(--c1)}
    .ep .e-title{font-family:"Space Grotesk";font-weight:600;font-size:14px;line-height:1.35;margin-top:5px;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}

    /* ── 다른 사이트 통로 ── */
    .more{margin:52px 0 0;padding-top:24px;border-top:1px solid var(--line)}
    .more h2{font-family:"Space Grotesk";font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
      color:var(--muted);margin:0 0 12px}
    .site-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:7px 0;font-size:14.5px}
    .site-row a{color:var(--c1);text-decoration:none;font-weight:600;font-family:"Space Grotesk"}
    .site-row a:hover{text-decoration:underline;text-underline-offset:3px}
    .site-row .d{color:var(--muted)}
    .site-row .soon{font-size:11.5px;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:2px 9px;opacity:.8}

    /* ── 엽서 한 자리 + 두 갈래 문 (PLAN-2026-09-15-landing §4-2) ──
       엽서는 여기서 목적지가 아니라 갈림길의 미끼다. 한 장만 보여 주고 문 두 개를 연다. */
    .pc{margin:52px 0 0;padding-top:24px;border-top:1px solid var(--line)}
    .pc h2{font-family:"Space Grotesk";font-weight:600;font-size:13px;letter-spacing:.14em;
      text-transform:uppercase;color:var(--muted);margin:0 0 12px}
    .pc-box{display:grid;grid-template-columns:minmax(0,1.35fr) 1fr;gap:20px;align-items:start}
    .pc-box video{width:100%;aspect-ratio:16/9;display:block;border-radius:14px;border:1px solid var(--line);background:#000}
    .pc-side{display:flex;flex-direction:column;gap:5px;padding-top:2px}
    .pc-n{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c1)}
    .pc-t{font-family:"Space Grotesk";font-weight:600;font-size:18px;line-height:1.3}
    .pc-v{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.6;white-space:pre-line}
    .pc-more{align-self:flex-start;margin-top:10px;font:inherit;font-size:12.5px;font-weight:600;
      color:var(--muted);background:none;border:1px solid var(--line);border-radius:999px;
      padding:6px 14px;cursor:pointer;transition:color .14s ease,border-color .14s ease}
    .pc-more:hover{color:var(--c1);border-color:rgba(110,231,249,.4)}
    .pc-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--muted);opacity:.75}

    .doors{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 0}
    .door{display:flex;align-items:center;gap:13px;flex-wrap:wrap;text-decoration:none;color:inherit;
      border:1px solid var(--line);border-radius:16px;padding:15px 17px;
      background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
      transition:border-color .13s ease,transform .13s ease}
    .door:hover{transform:translateY(-2px);border-color:rgba(110,231,249,.35)}
    .door img{width:46px;height:46px;border-radius:11px;border:1px solid rgba(255,255,255,.10);
      box-shadow:0 4px 12px rgba(0,0,0,.35);flex:none}
    .door .d-name{font-family:"Space Grotesk";font-weight:600;font-size:15.5px;color:var(--c1)}
    .door .d-line{flex:1 1 100%;color:var(--muted);font-size:13.5px;line-height:1.45}

    @media (max-width:640px){
      .pc-box{grid-template-columns:1fr}
      .doors{grid-template-columns:1fr}
    }

    footer{position:relative;z-index:1;text-align:center;font-size:13px;padding:44px 22px 34px;color:var(--muted)}
    footer a{color:var(--c1);text-decoration:none}
    footer a:hover{text-decoration:underline;text-underline-offset:3px}
    footer a.mail{display:inline-flex;vertical-align:-3px}
    footer a.mail:hover{text-decoration:none;opacity:.75}
    footer a.mail svg{width:16px;height:16px}
    footer .sep{opacity:.35;margin:0 9px}

    /* ── 개편 2026-09-15 ─────────────────────────────────────────────
       1. `hidden` 을 존중한다. `.audio-box{display:flex}` 와 `video{display:block}` 가
          UA 의 `[hidden]{display:none}` 을 이겨서, Watch 에서도 빈 오디오 플레이어가,
          Listen 에서도 영상이 그대로 남아 있었다 (founder 2026-09-15).
       2. 영상이 1:1(1080×1080)이다. 880px 폭에 꽉 채우면 화면 하나를 통째로 먹고
          양옆이 검은 띠가 된다. 정사각은 정사각 자리에 두고, 남는 폭을 정보에 준다. */
    .video-box video[hidden],
    .audio-box[hidden]{display:none}

    .stage{display:grid;grid-template-columns:minmax(0,420px) 1fr;align-items:stretch}
    .video-box{aspect-ratio:1/1}
    .video-box video{width:100%;height:100%;max-height:none}
    .audio-box{height:100%}

    .bar{flex-direction:column;align-items:flex-start;gap:20px;
      border-top:0;border-left:1px solid var(--line);padding:24px 22px}
    .bar .now{order:1;flex:none;width:100%}
    .bar .modes{order:2}
    .bar .store{order:3;margin-top:auto}
    .now .n-title{white-space:normal;font-size:19px;line-height:1.3;margin-top:3px}
    .now .full-link{margin-top:9px}
    .store .cap{text-align:left}

    @media (max-width:820px){
      .stage{grid-template-columns:1fr}
      .bar{flex-direction:row;align-items:center;gap:16px;
        border-left:0;border-top:1px solid var(--line);padding:14px 18px}
      .bar .now{order:2;flex:1;width:auto}
      .bar .modes{order:1}
      .bar .store{order:3;margin-top:0}
      .now .n-title{white-space:nowrap;font-size:16px}
    }
    @media (max-width:560px){
      .bar{flex-wrap:wrap}
      .ep{width:150px}
    }
  
    nav .home{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
    .ep-video{width:100%;border-radius:16px;background:#000;display:block;margin:18px 0 8px}
    .words{margin:28px 0 0} .words h2,.eps h2{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin:0 0 12px}
    .lines{list-style:none;padding:0;margin:0} .lines li{padding:10px 0;border-top:1px solid rgba(127,127,127,.2);font-size:17px;line-height:1.5}
    .lines b{display:inline-block;min-width:64px;font-weight:600;opacity:.75;font-size:13px;letter-spacing:.04em}
    .note{opacity:.85;font-size:15px;line-height:1.6;margin:18px 0 0}
    .pn{display:flex;justify-content:space-between;gap:12px;margin:30px 0 0;font-size:14px;flex-wrap:wrap}
    .pn a,.ctas a,.eps a{color:inherit} .ctas{margin:26px 0 0;font-size:14px;line-height:1.8}
    .eps ol{padding-left:22px;margin:0 0 22px} .eps li{padding:4px 0}
    footer a{color:inherit;margin-left:12px}
    a.full{color:inherit;opacity:.85;font-size:14px}