/* ARCH AI 랜딩 스타일 — landing.html 의 <style> 2블록을 순서대로 합친 파일 (2026-09-27). 캐시 무효화는 / 가 ?v=<해시> 로 처리. */

  :root{
    --ink:#000; --on-dark:#fff;
    --sans:"Pretendard","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  html{scrollbar-gutter:stable}   /* (2026-10-03) 베타 안내 모달이 overflow:hidden 으로 스크롤바를 없애면 폭이 15~17px 늘어, 그 뒤에 그려지는 히어로 영상이
                                     먼저 그려진 정지 이미지보다 "커져" LCP 가 영상 첫 프레임(3MB 도착, ~3s)으로 바뀌던 문제. 폭을 고정하면 LCP 는 첫 페인트의 이미지. 레이아웃 이동(CLS)도 사라진다. */
  body{font-family:var(--sans);background:#0b0d10;color:var(--on-dark);-webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.011em}

  .hero{position:relative;width:100%;aspect-ratio:16/9;max-height:100svh;overflow:hidden;user-select:none}
  .heromedia{position:absolute;inset:0;z-index:0}
  .ba{position:absolute;inset:0}
  .ba .layer{position:absolute;inset:0}
  .ba picture{display:contents}   /* (2026-10-03) #imgS/#imgR 가 <picture> 안에 있어도 .layer 를 기준으로 100% 채우게 */
  .layer-render video{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}   /* 정지 이미지(#imgR, LCP) 위에 겹쳐 두었다가 재생되면 나타난다 */
  .layer-render video.is-playing{opacity:1}
  .ba img,.ba video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
  .layer-sketch{clip-path:inset(0 calc(100% - var(--x,200px)) 0 0)}
  .scrim{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 92% at 50% 40%,rgba(0,0,0,0) 44%,rgba(0,0,0,.40) 100%),
               linear-gradient(180deg,rgba(0,0,0,.26) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 60%,rgba(0,0,0,.44) 100%)}

  /* ===== Liquid Glass (곡률·림라이트, 굴절필터 없이) ===== */
  .lg{position:relative;isolation:isolate;
    background:rgba(255,255,255,.02);                       /* 사실상 투명 - 뒤가 또렷이 비침 */
    -webkit-backdrop-filter:blur(2px) saturate(140%);backdrop-filter:blur(2px) saturate(140%); /* blur 최소 */
    border:1px solid rgba(255,255,255,.22);
    box-shadow:
      inset 0 1.5px 1px rgba(255,255,255,.85),              /* 윗면 굴절 빛(밝은 테두리) */
      inset 0 -2px 3px rgba(255,255,255,.30),               /* 아랫면 굴절 빛 */
      inset 2px 0 3px rgba(255,255,255,.18),
      inset -2px 0 3px rgba(255,255,255,.18),
      inset 0 0 14px rgba(255,255,255,.06),                 /* 곡면 안쪽 광 */
      0 10px 30px rgba(0,0,0,.22)}
  /* 가장자리 굴절감: 안쪽으로 살짝 더 밝은 림(곡률 느낌) */
  .lg::before{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:0;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 2px 6px rgba(255,255,255,.12)}
  /* 상단 곡면 반사(sheen) */
  .lg::after{content:"";position:absolute;left:0;right:0;top:0;height:38%;border-radius:inherit;pointer-events:none;z-index:1;
    background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));
    -webkit-mask:linear-gradient(180deg,#000,transparent);mask:linear-gradient(180deg,#000,transparent)}

  .handle{position:absolute;top:0;bottom:0;left:200px;width:2px;background:rgba(255,255,255,.85);
    transform:translateX(-1px);box-shadow:0 0 18px rgba(0,0,0,.35);z-index:4;touch-action:none;cursor:ew-resize}
  .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:56px;height:56px;border-radius:999px;display:grid;place-items:center}
  .grip svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));position:relative;z-index:2}
  .grip.pulse{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:inset 0 1px 1px rgba(255,255,255,.70),0 10px 34px rgba(0,0,0,.26),0 0 0 0 rgba(255,255,255,.30)}50%{box-shadow:inset 0 1px 1px rgba(255,255,255,.70),0 10px 34px rgba(0,0,0,.26),0 0 0 13px rgba(255,255,255,0)}}

  .ba-tag{position:absolute;bottom:30px;z-index:4;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:-.01em;
    color:#fff;padding:9px 16px;border-radius:999px}
  .ba-tag span{position:relative;z-index:2}
  .ba-tag.l{left:30px}.ba-tag.r{right:30px}

  /* ===== GLASS NAV ===== */
  .nav{position:absolute;top:0;left:0;right:0;z-index:10;
    width:100%;display:flex;align-items:center;gap:28px;padding:15px 40px;background:#000;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav>*{position:relative;z-index:2}
  .brand{display:flex;align-items:center;text-decoration:none}
  .logo-full{height:26px;width:auto;display:block;fill:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.40))}
  .links{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(16px,1.9vw,26px);margin-left:clamp(18px,2.6vw,46px)}
  .links a{color:rgba(255,255,255,.9);text-decoration:none;font-size:15px;font-weight:400;transition:color .15s;white-space:nowrap}
  .links a:hover{color:#fff}
  .nav-r{margin-left:auto;display:flex;align-items:center;gap:16px}
  .nav-r a{color:rgba(255,255,255,.9);text-decoration:none;font-size:15px;transition:color .15s;white-space:nowrap}
  .lang{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.72)}

  /* ===== CENTER COPY ===== */
  .copy{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92%,880px);text-align:center;pointer-events:none;transition:opacity .12s linear}
  .eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.55em;text-transform:uppercase;
    color:rgba(255,255,255,.82);margin-bottom:22px;text-shadow:0 1px 12px rgba(0,0,0,.4)}
  .copy h1{font-size:clamp(36px,5.6vw,68px);font-weight:500;line-height:1.06;letter-spacing:-.03em;
    text-shadow:0 2px 34px rgba(0,0,0,.5);margin-bottom:20px}
  .copy p{font-size:clamp(15px,1.5vw,18px);font-weight:400;line-height:1.45;letter-spacing:-.01em;color:rgba(255,255,255,.92);
    max-width:560px;margin:0 auto 32px;text-shadow:0 1px 16px rgba(0,0,0,.55)}
  .cta{display:flex;gap:14px;justify-content:center;align-items:center;pointer-events:auto;flex-wrap:wrap}

  /* 캡슐 녹아웃 버튼 */
  .btn{display:inline-block;line-height:0;border-radius:999px;cursor:pointer;
    filter:drop-shadow(0 10px 28px rgba(0,0,0,.28));transition:transform .12s}
  .btn:active{transform:translateY(1px)}
  .btn svg{display:block}
  .btn-glass{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 32px;border-radius:999px;
    font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:-.01em;color:#fff;text-decoration:none;cursor:pointer;transition:transform .12s}
  .btn-glass:active{transform:translateY(1px)}
  .btn-glass span{position:relative;z-index:2;text-shadow:0 1px 10px rgba(0,0,0,.45)}
  /* 주 버튼: 검정 solid 캡슐 */
  .btn-solid{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 34px;border-radius:999px;
    background:var(--grad);color:#fff;font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:-.01em;
    text-decoration:none;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .12s,background .15s}
  .btn-solid:hover{filter:brightness(1.06)}.btn-solid:active{transform:translateY(1px)}
  /* 우상단 아이콘/검색/인스타 */
  .ig{display:inline-flex;align-items:center;opacity:.9;transition:opacity .15s}.ig:hover{opacity:1}
  /* 언어 드롭다운 */
  .langwrap{position:relative}
  .lang{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.85);
    background:none;border:0;cursor:pointer;padding:4px 2px}
  .langmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:64px;display:flex;flex-direction:column;
    background:#000;border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:20}
  .langwrap.open .langmenu{opacity:1;transform:translateY(0);pointer-events:auto}
  .langmenu a{font-family:var(--sans);font-size:13px;letter-spacing:0;color:rgba(255,255,255,.85);
    text-decoration:none;padding:10px 16px;transition:background .12s}
  .langmenu a:hover{background:rgba(255,255,255,.10);color:#fff}
  /* 점 캐러셀 */
  .dots{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:6;display:flex;gap:10px}
  .heroarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(10,12,16,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0 0 3px;transition:background .15s}
  .heroarrow:hover{background:rgba(10,12,16,.55)}
  .heroarrow.show{display:flex}
  .heroarrow.l{left:18px}.heroarrow.r{right:18px}
  @media(max-width:760px){.heroarrow,.heroarrow.show{display:none}}
  .dot{width:12px;height:12px;border-radius:999px;border:0;cursor:pointer;padding:0;
    background:rgba(255,255,255,.40);box-shadow:0 1px 4px rgba(0,0,0,.4);transition:background .15s,transform .15s}
  .dot:hover{background:rgba(255,255,255,.7)}
  .dot.on{background:#fff;transform:scale(1.15)}
  .cmpdots{display:flex;gap:7px;justify-content:center;align-items:center;width:max-content;margin:12px auto;position:relative;z-index:5}
  .cmpdots .cdot{width:8px;height:8px;border-radius:999px;border:0;padding:0;cursor:pointer;background:rgba(20,22,28,.22);transition:.15s}
  .cmpdots .cnav{width:19px;height:19px;border-radius:50%;border:1px solid rgba(20,22,28,.18);background:#fff;color:#0a0c10;font-size:12px;line-height:1;cursor:pointer;padding:0 0 1px;margin:0 3px;transition:.15s}
  .cmpdots .cnav:hover{background:#0a0c10;color:#fff}
  .cmpdots .cdot.on{background:#0a0c10;transform:scale(1.3)}

  .scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:6;
    font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}

  @media(max-width:780px){
    .links{display:none}
    .nav{padding:10px 16px;gap:12px;top:0}
    .nav-r{gap:12px}
    .ba-tag{bottom:18px}.ba-tag.l{left:14px}.ba-tag.r{right:14px}
  }
  @media(prefers-reduced-motion:reduce){.grip.pulse{animation:none}}

  /* ===== 공통 섹션 (글래스 / 다크) ===== */
  .sections{position:relative;background:#f6f6f4;overflow:hidden}
  .sections::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(42% 32% at 16% 6%,rgba(124,116,234,.10),transparent 70%),
      radial-gradient(46% 36% at 90% 26%,rgba(120,150,200,.07),transparent 70%),
      radial-gradient(55% 42% at 50% 100%,rgba(0,0,0,.04),transparent 70%)}
  body{word-break:keep-all;overflow-wrap:break-word}
  .sec-title,.hero h1{text-wrap:balance}
  .sec{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:104px 32px}
  /* (2026-10-03, Lighthouse B) 첫 화면 밖 섹션은 화면에 가까워질 때까지 스타일·레이아웃·페인트를 건너뛴다(메인스레드 Style&Layout ~0.9s 의 대부분).
     contain-intrinsic-size 는 렌더 전 자리 크기 추정치(auto = 한 번 렌더된 뒤엔 실제 크기 기억). 앵커 이동(#pricing 등)은 그대로 동작. */
  /* (2026-10-03) html.cv-auto 일 때만 — 첫 페인트까지만 쓰고 load 뒤(또는 앵커 이동 직전)에 JS 가 클래스를 떼어 전체를 렌더한다.
     건너뛴 섹션의 추정 높이 때문에 헤더 앵커 이동이 어긋나고(스크롤 중 실제 높이로 바뀜) 섹션 경계에 검은 띠가 보이던 문제. */
  html.cv-auto #features,html.cv-auto #how,html.cv-auto #pricing,html.cv-auto #faq{content-visibility:auto;contain-intrinsic-size:auto 1000px}
  html.cv-auto #explore{content-visibility:auto;contain-intrinsic-size:auto 2200px}
  html.cv-auto #gallery,html.cv-auto #contact{content-visibility:auto;contain-intrinsic-size:auto 700px}
  .sec-head{max-width:760px;margin:0 auto 44px;text-align:center}
  .sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
  .eyebrow-blank{visibility:hidden} /* (L-0918E) 히어로 상단 문구 제거 — 높이만 유지해 제목 위치는 그대로 */
  .eyebrow2{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.4em;text-transform:uppercase;color:rgba(0,0,0,.45);margin-bottom:16px}
  .sec-title{font-size:clamp(28px,3.4vw,42px);font-weight:500;line-height:1.1;letter-spacing:-.025em;color:#0a0c10}
  .sec-sub{margin:14px auto 0;font-size:17px;line-height:1.55;letter-spacing:-.01em;color:#5c6066;max-width:620px}
  #pricing .sec-sub{font-size:13.5px;line-height:1.5;color:#8a8e94;max-width:560px}
  .sec-head.center .sec-sub{margin-left:auto;margin-right:auto}

  .grid{display:grid;gap:18px}
  .g3{grid-template-columns:repeat(3,1fr)}

  /* 글래스 카드 (다크 위) */
  .card{position:relative;isolation:isolate;border-radius:18px;padding:26px;
    background:rgba(255,255,255,.65);
    -webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 2px rgba(0,0,0,.03),0 14px 34px rgba(20,22,28,.10)}
  .card h3{font-size:19px;font-weight:600;letter-spacing:-.02em;color:#0a0c10;margin-bottom:10px}
  .card p{font-size:14.5px;line-height:1.6;color:#5c6066}
  .card .num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:rgba(0,0,0,.4);margin-bottom:14px}
  .card .ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
    background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08)}
  .card .card .ico{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,#f0f1f4,#e3e5ea);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
  .ico svg{width:20px;height:20px;stroke:#0a0c10;fill:none;stroke-width:1.7}
  /* WHY: 기본 회색 캡슐 사용 */
  #why .card{position:relative}
  .card.plan{position:relative}
  .crown{position:absolute;top:16px;right:18px;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
  .crown svg{width:22px;height:22px;fill:#e9b949;stroke:none}
  /* HOW: 검정 픽토그램 */
  #how .sic{background:#0a0c10;border-radius:13px;width:46px;height:46px;display:grid;place-items:center}
  #how .sic svg{stroke:#fff}
  #how .num{color:#5b2fc6;font-weight:800;opacity:1}

  /* 요금제 */
  .price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
  .plan{display:flex;flex-direction:column}
  .plan.reco{border-color:rgba(124,116,234,.6);box-shadow:inset 0 1px 1px rgba(255,255,255,.95),0 18px 44px rgba(20,22,28,.16),0 0 0 1px rgba(124,116,234,.35)}
  .plan .pname{font-size:15px;font-weight:600;color:#0a0c10}
  .plan .pprice{font-size:30px;font-weight:600;letter-spacing:-.03em;color:#0a0c10;margin:8px 0 2px}
  .plan .pprice small{font-size:14px;font-weight:400;color:#5c6066}
  .plan .pprice small .vat{font-style:normal;font-size:10px;font-weight:500;letter-spacing:.02em;opacity:.6;margin-left:4px;white-space:nowrap}
  .plan .pdesc{font-size:13px;color:#5c6066;margin-bottom:18px;min-height:36px}
  .plan ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
  .plan li{font-size:13.5px;color:#3a3d42;padding-left:20px;position:relative}
  .plan li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:999px;background:rgba(124,116,234,.85)}
  .plan .pcta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;height:46px;border-radius:999px;
    font-family:var(--sans);font-size:14px;font-weight:700;text-decoration:none;cursor:pointer}
  .topup{min-width:150px;text-align:center}
  .topup b{display:block;font-size:22px;font-weight:600;color:#0a0c10}
  .topup span{font-size:13px;color:#5c6066}
  .team-line{margin-top:22px;text-align:center;font-size:14px;color:#5c6066}
  .team-line a{color:var(--gold);text-decoration:none;font-weight:600}

  /* FAQ */
  .faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
  .faq details{border-radius:14px;padding:0 22px;background:rgba(255,255,255,.7);
    border:1px solid rgba(0,0,0,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 8px 22px rgba(20,22,28,.06)}
  .faq summary{list-style:none;cursor:pointer;padding:20px 0;font-size:16px;font-weight:600;color:#0a0c10;
    display:flex;justify-content:space-between;align-items:center;gap:16px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary .pm{font-family:var(--mono);color:rgba(0,0,0,.45);transition:transform .2s}
  .faq details[open] summary .pm{transform:rotate(45deg)}
  .faq .ans{padding:0 0 20px;font-size:14.5px;line-height:1.65;color:#5c6066}

  /* 문의 */
  .contact{text-align:center;max-width:680px;margin:0 auto}
  #contact{padding-top:100px;padding-bottom:92px}
  #contact .eyebrow2{color:rgba(255,255,255,.5);letter-spacing:.24em}
  #contact .sec-title{margin-top:4px}
  #contact .sec-sub{color:rgba(255,255,255,.62);margin-top:12px;font-size:15.5px}
  #contact .cbtns{margin-top:30px}
  #contact .btn-solid{gap:0;font-weight:700;letter-spacing:-.01em;transition:transform .18s ease,box-shadow .18s ease}
  #contact .btn-solid .cta-arr{display:inline-block;max-width:0;overflow:hidden;opacity:0;transform:translateX(-4px);transition:max-width .22s ease,opacity .22s ease,transform .22s ease,margin .22s ease;margin-left:0}
  #contact .btn-solid:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.28)}
  #contact .btn-solid:hover .cta-arr{max-width:18px;opacity:1;transform:translateX(0);margin-left:8px}
  #contact .cmeta{margin-top:34px;gap:11px}
  .cmeta-link{color:rgba(255,255,255,.72);text-decoration:none;transition:color .15s}
  .cmeta-link:hover{color:#fff}
  .contact .cbtns{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap}
  .contact .btn-glass{background:rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.14)}
  .contact .btn-glass span{color:#0a0c10;text-shadow:none}
  .contact .btn-glass.lg{box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 8px 22px rgba(20,22,28,.08)}
  .contact .btn-glass.lg::before,.contact .btn-glass.lg::after{display:none}

  /* 푸터 */
  .foot{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.08);padding:36px max(32px,calc((100% - 1200px)/2)) 64px;max-width:none;width:100%;margin:0;
    display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
  .foot .flinks{display:flex;gap:22px;flex-wrap:wrap;padding-top:2px}
  .foot a{color:#5c6066;text-decoration:none;font-size:13.5px}.foot a:hover{color:#0a0c10}
  .foot .copyr{font-size:12px;color:rgba(0,0,0,.4)}
  .foot .foot-left{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  .foot .bizinfo{font-size:10.5px;color:rgba(0,0,0,.32);line-height:1.7}
  .foot .bizinfo summary{cursor:pointer;list-style:none;color:rgba(0,0,0,.35);font-size:10.5px;display:inline-flex;align-items:center;gap:4px;width:fit-content}
  .foot .bizinfo summary::-webkit-details-marker{display:none}
  .foot .bizinfo summary::after{content:"▾";font-size:9px;opacity:.7}
  .foot .bizinfo[open] summary::after{content:"▴"}
  .foot .bizinfo[open] summary{margin-bottom:6px}
  footer.foot{background:#0a0c10}
  .wordmark{position:relative;z-index:1;text-align:center;padding:52px 0 30px;overflow:visible;pointer-events:none;background:#0a0c10}
  .wordmark svg{width:min(92%,1120px);height:auto;fill:rgba(255,255,255,.05)}

  @media(max-width:900px){.price-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.g3,.price-grid{grid-template-columns:1fr}.sec{padding:72px 20px}}
  /* HOW: 3장 한 줄 유지(태블릿) → 760px 이하에서만 1열 */
  @media(max-width:1000px) and (min-width:761px){.g3{gap:14px}.g3 .card{padding:22px 18px}.g3 .card h3{font-size:16.5px}.g3 .card p{font-size:13.5px}.g3 .sic{width:42px;height:42px;border-radius:12px;margin-bottom:12px}}
  @media(max-width:760px){.g3{grid-template-columns:1fr}}

  .galimg{background-size:cover;background-position:center;background-repeat:no-repeat}
  /* (L-0913C) 초기 개발용 예시 이미지 2종 제거 — 아래 마키는 로드 직후 JS가
     /assets/img/landing/gallery-NN.jpg 로 전량 교체하므로 자리표시자가 불필요하다. */

  /* ===== LANDING v2: 모노톤+딥블루 / 섹션구분 / 다크테일 ===== */
  :root{--gold:#7c74ea;--gold-hi:#5ec8f2;--blue:#7c74ea;--grad:linear-gradient(135deg,#8b7cf6,#5ec8f2)}
  /* 상단바 고정 */
  .nav{position:fixed}
  .nav-r{align-items:center}
  .nav-r>a,.nav-r .langwrap{display:inline-flex;align-items:center}
  .ig{line-height:0;transform:translateY(0)}
  .ig svg{display:block}

  /* 섹션 배경 구분 (다크 베이스 위 라이트 섹션) */
  .sections{background:#0a0c10}
  .sections::before{background:radial-gradient(80% 60% at 50% 98%,rgba(124,116,234,.05),transparent 72%)}
  #why{background:#0a0b10}
  #features{background:#ffffff}
  #explore{background:#ffffff;padding-top:84px}
  #how{background:#eef0f3}
  #pricing{background:linear-gradient(180deg,#e9eef5,#f3f6fb);border-top:1px solid rgba(124,116,234,.12);border-bottom:1px solid rgba(124,116,234,.12)}
  #faq{background:#ffffff}
  #faq{padding-top:172px}
  #faq summary, #faq .ans{word-break:keep-all;overflow-wrap:break-word}
  #contact{background:transparent}
  /* 갤러리 하단(어두워지는 구간) 텍스트 보정 — 헤더는 상단(밝음)이라 유지 */
  /* 문의(다크) 텍스트/버튼 */
  #contact .sec-title{color:#fff}
  #contact .sec-sub{color:rgba(255,255,255,.72)}
  #contact .eyebrow2{color:rgba(255,255,255,.5)}
  #contact .btn-solid{background:#fff;color:#0a0c10}
  #contact .btn-glass{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28)}
  #contact .btn-glass span{color:#fff}
  /* 푸터·워드마크 다크 */
  .foot{border-top:1px solid rgba(255,255,255,.10)}
  .foot a{color:rgba(255,255,255,.6)}.foot a:hover{color:#fff}
  .foot .copyr{color:rgba(255,255,255,.42)}
  .foot .bizinfo{color:rgba(255,255,255,.32)}
  .foot .bizinfo summary{color:rgba(255,255,255,.35)}
  .wordmark svg{fill:rgba(255,255,255,.06)}

  /* Features 카드 그리드 (3열 x 2행) — 이미지 위 텍스트 오버레이, 호버 시 전/후 자동 슬라이드 */
  .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:64px}
  .fcard{display:block;position:relative;text-decoration:none;color:inherit;background:#fff;border:1px solid rgba(20,22,28,.08);border-radius:20px;
    overflow:hidden;box-shadow:0 10px 26px rgba(20,22,28,.05);-webkit-tap-highlight-color:transparent;
    transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s cubic-bezier(.2,.7,.3,1),border-color .3s}
  .fgrid .fcard:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 22px 46px rgba(20,22,28,.14);border-color:rgba(124,116,234,.35)}
  .plan li.feat-strong{font-weight:700;color:#0a0c10}
  .fcard .fmedia{position:relative;display:flex;flex-direction:column;overflow:hidden}
  .fcard .cmp{aspect-ratio:16/10;border-radius:0;border:0;box-shadow:none}

  /* 픽토그램+제목+부제목 오버레이 캡션 (이미지 하단, 그라데이션 스크림) */
  .fcap{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:flex-start;gap:10px;
    padding:46px 16px 16px;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,12,16,0) 0%,rgba(10,12,16,.62) 52%,rgba(10,12,16,.88) 100%)}
  .fcap-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
    background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28)}
  .fcap-ic svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.7}
  .fcap-text{flex:1;min-width:0}
  .fcap-text h3{font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:#fff;margin:0 0 4px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.35)}
  .fcap-text p{font-size:12px;line-height:1.42;color:rgba(255,255,255,.84);margin:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 6px rgba(0,0,0,.4)}

  /* 전/후 비교 미디어 — 마우스를 올리면 자동으로 한 번 슬라이드 (드래그 불필요) */
  .cmp{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:18px;border:1px solid rgba(20,22,28,.1);box-shadow:0 18px 44px rgba(20,22,28,.12);background:#e9e9ea;cursor:pointer}
  .cmp img,.cmp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
  /* (2026-10-03) EXPLORE 타일 스켈레톤 — 이미지 미정인 타일(mf-{key}-* 없음)에 쓰는 자리표시. 이미지가 들어오면 .cmp-skel 을 img 두 장으로 교체 */
  .cmp-skel{position:absolute;inset:0;background:#e9e9ea;overflow:hidden}
  .cmp-skel::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 70%);transform:translateX(-100%);animation:skelShine 2.2s ease-in-out infinite}
  .cmp-skel::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:9px;border:1.5px solid rgba(20,22,28,.14);background:linear-gradient(135deg,rgba(20,22,28,.05),rgba(20,22,28,.02))}
  @keyframes skelShine{to{transform:translateX(100%)}}
  @media(prefers-reduced-motion:reduce){.cmp-skel::before{animation:none}}
  .cmp img{transition:opacity .3s ease}
  .cmp.swapping img{opacity:0}
  .cmp .cmp-before{clip-path:inset(0 0 0 0%);transition:clip-path 1.4s cubic-bezier(.4,0,.2,1)}
  .fcard{cursor:default}
  .cmp:hover .cmp-before{clip-path:inset(0 0 0 100%)}
  .cmp img,.cmp video{will-change:clip-path;backface-visibility:hidden;transform:translateZ(0)}
  .fcap,.mf-cap{z-index:6;transform:translateZ(0)}
  .cmp-line,.cmp-glow{z-index:5}
  .cmp .cmp-line{will-change:left}
  .cmp[data-feat="video"][data-set="1"] .cmp-before{object-position:center bottom}
  .cmp[data-feat="video"][data-set="1"] .cmp-after{object-position:center bottom}
  .cmp[data-feat="video"][data-set="2"] .cmp-after{transform:translateZ(0) scale(1.025)}
  @media(hover:none) and (max-width:760px){
    .cmp .cmp-before{animation:cmpwipe 5.5s ease-in-out infinite;transition:none}
    .cmp{pointer-events:none}
    .cmp .cmp-line{animation:cmpline 5.5s ease-in-out infinite;transition:none}
    .cmp:hover .cmp-before{clip-path:inset(0 0 0 0%)}
    .cmp:hover .cmp-line{left:0}
  }
  @keyframes cmpwipe{0%,12%{clip-path:inset(0 0 0 0%)}48%,64%{clip-path:inset(0 0 0 100%)}96%,100%{clip-path:inset(0 0 0 0%)}}
  @keyframes cmpline{0%,12%{left:0%}48%,64%{left:100%}96%,100%{left:0%}}
  .cmp-line{position:absolute;top:0;bottom:0;left:0%;width:1.5px;background:rgba(255,255,255,.92);box-shadow:0 0 10px rgba(0,0,0,.35);transition:left 1.4s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:3}
  .cmp:hover .cmp-line{left:100%}
  .cmp-glow{position:absolute;top:0;bottom:0;left:0%;width:46px;transform:translateX(-50%);
    background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.32) 50%,rgba(255,255,255,0) 100%);
    transition:left 1.4s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:2}
  .cmp:hover .cmp-glow{left:100%}
  @media(prefers-reduced-motion:reduce){.cmp-before,.cmp-line,.cmp-glow{transition:none}}

  /* How 픽토그램 */
  .card .sic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
    background:rgba(124,116,234,.08);border:1px solid rgba(124,116,234,.18)}
  .card .sic svg{width:24px;height:24px;fill:none;stroke:var(--blue);stroke-width:1.7}
  #how .card .num{color:var(--blue);opacity:.55}

  @media(max-width:1180px){.fgrid{grid-template-columns:repeat(2,1fr)}}
  /* 좁은 화면: 캡션 여백·아이콘을 줄여 글자 공간을 확보하고, 문장이 잘리지 않도록 3줄 허용 */
  @media(max-width:820px){
    .fcap{padding:40px 13px 13px;gap:8px}
    .fcap-ic{width:28px;height:28px;border-radius:9px}
    .fcap-text h3{font-size:14.5px}
    .fcap-text p{font-size:11.5px;-webkit-line-clamp:3}
  }
  @media(max-width:560px){.fgrid{grid-template-columns:1fr;gap:18px}.fgrid .fcard:hover{transform:none}}

  /* ===== LANDING v3: 풀폭/정렬/모노톤Pricing/부드러운 다크 ===== */
  /* 섹션 풀폭 + 내용 1200 중앙 */
  .sec{max-width:none;width:100%;margin:0;padding:104px max(24px,calc((100% - 1200px)/2))}
  /* 상단바 우측 세로 중앙 정렬 */
  .nav-r{display:flex;align-items:center;gap:20px}
  .nav-r>*{display:inline-flex;align-items:center;height:34px;line-height:1;white-space:nowrap;flex:0 0 auto}
  .nav-r .langwrap{height:34px}
  .lang{padding:0 2px}
  .ig{transform:none}
  /* 섹션 배경(상단 라이트 구분 + 하단 부드러운 블랙) */
  #why{background:#0a0b10;padding-left:max(24px,calc((100% - 1520px)/2));padding-right:max(24px,calc((100% - 1520px)/2))}
  #features{background:#ffffff;padding-left:max(24px,calc((100% - 1520px)/2));padding-right:max(24px,calc((100% - 1520px)/2))}
  #how{background:#f0f1f3}
  #pricing{background:#f2f2f1;border:0}
  #faq{background:#ffffff}
  #contact{background:#0a0c10}

  /* ===== WHY ARCH.AI — 라디얼 쇼케이스 (중앙 3D 와이어프레임 + 좌우 카드) ===== */
  .whysec{position:relative;overflow:hidden}
  #why{padding-top:88px}
  .whysec .sec-head{position:relative;z-index:2}
  .whysec .eyebrow2{color:rgba(255,255,255,.5)}
  .whysec .sec-title{color:#fff}
  .whysec .sec-sub{color:rgba(255,255,255,.6)}

  .why-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
  /* blur() 없이 다단 그라데이션만으로 같은 부드러움 — 매 프레임 재블러 비용 제거 */
  .why-aurora{position:absolute;border-radius:50%;opacity:.9;animation:whyDrift 26s ease-in-out infinite}
  .why-aurora.a1{width:760px;height:760px;left:-2%;top:-24%;animation-delay:0s;
    background:radial-gradient(circle,rgba(86,182,247,.34) 0%,rgba(86,182,247,.19) 30%,rgba(86,182,247,.07) 52%,transparent 72%)}
  .why-aurora.a2{width:680px;height:680px;right:-4%;top:-4%;animation-delay:-9s;
    background:radial-gradient(circle,rgba(124,92,255,.30) 0%,rgba(124,92,255,.16) 30%,rgba(124,92,255,.06) 52%,transparent 72%)}
  .why-aurora.a3{width:760px;height:600px;left:24%;bottom:-30%;animation-delay:-18s;
    background:radial-gradient(circle,rgba(255,80,110,.20) 0%,rgba(255,80,110,.11) 32%,rgba(255,80,110,.04) 54%,transparent 74%)}
  @keyframes whyDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(34px,-26px,0) scale(1.09)}}
  .why-noise{position:absolute;left:-6%;top:-6%;width:112%;height:112%;opacity:.15;
    background-image:url(/assets/img/landing/why-noise.png);background-repeat:repeat;background-size:96px 96px;
    animation:whyGrainDrift 19s ease-in-out infinite}
  @keyframes whyGrainDrift{0%,100%{background-position:0 0}25%{background-position:26px 14px}
    50%{background-position:-18px 30px}75%{background-position:12px -22px}}
  @media(prefers-reduced-motion:reduce){.why-aurora,.why-noise{animation:none}}

  .why-stage{position:relative;z-index:2;display:grid;grid-template-columns:1fr 400px 1fr;align-items:center;gap:0;max-width:none;margin:68px auto 0}
  .why-col{display:flex;flex-direction:column;gap:24px;position:relative}
  .why-col.l{align-items:flex-end;padding-right:72px}
  .why-col.r{align-items:flex-start;padding-left:72px}
  .why-card{position:relative;width:100%;max-width:380px;padding:16px 18px;border-radius:16px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
    transition:background .25s,border-color .25s,transform .25s}
  .why-card:hover{background:rgba(255,255,255,.075);border-color:rgba(140,190,255,.3);transform:translateY(-3px)}
  .why-col.l .why-card{text-align:right}
  .why-card .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:10px;
    background:rgba(124,197,255,.12);border:1px solid rgba(124,197,255,.25)}
  .why-col.l .why-card .ico{margin-left:auto}
  .why-card .ico svg{width:17px;height:17px;stroke:#8fd0ff;fill:none;stroke-width:1.7}
  .why-card h3{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em;margin-bottom:6px;
    /* (2026-10-03) 영어·독일어 등 긴 단어가 캡슐 밖으로 나가던 것: word-break:keep-all 은 Chrome 에서 하이픈 줄바꿈까지 막는다(그리고 일본어·중국어는 아예 못 끊음).
       keep-all 은 한국어에만, 그 외는 하이픈·줄바꿈 허용 + 그래도 안 맞으면 JS(fitWhyCards)가 글자 크기를 줄이고, 최후엔 아무 데서나 끊는다. */
    word-break:normal;overflow-wrap:anywhere;hyphens:auto;max-width:100%}
  html[lang="ko"] .why-card h3{word-break:keep-all;overflow-wrap:normal;hyphens:manual}
  .why-card p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.62)}
  .why-col.l .why-card::after{content:"";position:absolute;top:50%;right:-72px;width:72px;height:1.5px;
    background:linear-gradient(90deg,rgba(160,205,255,.85),rgba(160,205,255,0));box-shadow:0 0 6px rgba(140,190,255,.5);transform:translateY(-50%)}
  .why-col.r .why-card::after{content:"";position:absolute;top:50%;left:-72px;width:72px;height:1.5px;
    background:linear-gradient(270deg,rgba(160,205,255,.85),rgba(160,205,255,0));box-shadow:0 0 6px rgba(140,190,255,.5);transform:translateY(-50%)}
  .why-col.l .why-card::before{content:"";position:absolute;top:50%;right:-6px;width:5px;height:5px;border-radius:50%;
    background:#a9d3ff;box-shadow:0 0 8px 2px rgba(140,190,255,.7);transform:translateY(-50%)}
  .why-col.r .why-card::before{content:"";position:absolute;top:50%;left:-6px;width:5px;height:5px;border-radius:50%;
    background:#a9d3ff;box-shadow:0 0 8px 2px rgba(140,190,255,.7);transform:translateY(-50%)}

  .why-core{position:relative;display:flex;align-items:center;justify-content:center;height:400px}
  .why-canvas{position:relative;z-index:2;display:block;width:100%;height:100%}
  .why-core-glow{position:absolute;width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle,rgba(124,197,255,.28),rgba(124,92,255,.14) 45%,transparent 72%);filter:blur(4px);
    animation:whyPulse 5s ease-in-out infinite}
  @keyframes whyPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
  @media(prefers-reduced-motion:reduce){.why-core-glow{animation:none}}
  /* Tablet/Narrow: 좌3-중앙-우3 구조 유지, 밀도만 축소 */
  @media(max-width:1279px){
    .why-stage{grid-template-columns:1fr clamp(230px,27vw,340px) 1fr;margin-top:48px}
    .why-core{height:clamp(240px,27vw,340px)}
    .why-col.l{padding-right:46px}
    .why-col.r{padding-left:46px}
    .why-col.l .why-card::after{right:-46px;width:46px}
    .why-col.r .why-card::after{left:-46px;width:46px}
    .why-card{max-width:270px;padding:15px 14px}
    .why-card h3{font-size:14.5px}
    .why-card p{font-size:12px;line-height:1.5}
  }
  @media(max-width:899px) and (min-width:768px){
    .why-stage{grid-template-columns:1fr clamp(195px,29vw,250px) 1fr}
    .why-core{height:clamp(205px,29vw,250px)}
    .why-col.l{padding-right:30px}
    .why-col.r{padding-left:30px}
    .why-col.l .why-card::after{right:-30px;width:30px}
    .why-col.r .why-card::after{left:-30px;width:30px}
    .why-card{max-width:190px;padding:12px 11px}
    .why-col.l .why-card,.why-col.r .why-card{text-align:center}
    .why-card .ico{margin-left:auto;margin-right:auto}
    .why-card h3{font-size:12.5px;margin-bottom:0}
    .why-card p{display:none}
  }
  /* Mobile: 중앙 오브젝트 + 좌우 정렬행 */
  @media(max-width:767px){
    #why{padding-top:86px;padding-bottom:78px}
    #why .sec-head{max-width:340px}
    #why .sec-sub{max-width:330px;font-size:14.5px;line-height:1.6}
    .why-stage{display:grid;grid-template-columns:1fr minmax(118px,150px) 1fr;grid-auto-rows:1fr;gap:12px 10px;max-width:430px;margin:30px auto 0;align-items:stretch}
    .why-col{display:contents}
    .why-col.l .why-card:nth-of-type(1){grid-area:1/1}
    .why-col.l .why-card:nth-of-type(2){grid-area:2/1}
    .why-col.l .why-card:nth-of-type(3){grid-area:3/1}
    .why-col.r .why-card:nth-of-type(1){grid-area:1/3}
    .why-col.r .why-card:nth-of-type(2){grid-area:2/3}
    .why-col.r .why-card:nth-of-type(3){grid-area:3/3}
    .why-core{grid-area:1/2/span 3/3;align-self:center;justify-self:center;position:static;transform:none;width:100%;max-width:150px;height:172px;margin:0;display:flex;align-items:center;justify-content:center}
    .why-core-glow{width:126px;height:126px}
    .why-card{position:static;width:auto;max-width:none;min-width:0;min-height:86px;height:100%;margin:0;padding:12px 9px;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center}
    .why-col.l .why-card,.why-col.r .why-card{text-align:center}
    .why-card .ico{width:27px;height:27px;margin:0 0 6px}
    .why-card h3{font-size:12.5px;font-weight:600;line-height:1.3;margin:0}
    .why-card p{display:none}
    .why-card::before,.why-card::after{display:none}
  }

  @media(max-width:1100px){
    .why-col.l,.why-col.r{align-items:center;padding:0}
    .why-col.l .why-card .ico{margin-left:auto;margin-right:auto}
    .why-card::after,.why-card::before{display:none}
  }
  /* Pricing 모노톤 */
  .price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
  .plan{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(20,22,28,.12);border-radius:18px;padding:28px 24px;position:relative;box-shadow:0 10px 30px rgba(20,22,28,.06)}
  .plan .pname{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8a8e94;margin-bottom:16px}
  .plan .pprice{font-size:38px;font-weight:600;letter-spacing:-.03em;color:#0a0c10;margin:0;line-height:1}
  .plan .pprice small{font-size:13px;font-weight:400;color:#8a8e94;letter-spacing:0;margin-left:2px}
  .plan .pdesc{font-size:13px;color:#5c6066;margin:12px 0 16px;min-height:32px}
  .plan ul{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid rgba(20,22,28,.10);display:block}
  .plan li{font-size:13.5px;color:#3a3d42;padding:11px 0 11px 18px;position:relative;border-bottom:1px solid rgba(20,22,28,.08)}
  .plan li::before{content:"";position:absolute;left:0;top:17px;width:5px;height:5px;border-radius:999px;background:#0a0c10}
  .plan .pcta{margin-top:auto;display:flex;align-items:center;justify-content:center;height:48px;border-radius:999px;font-family:var(--sans);font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;background:#0a0c10;color:#fff;border:1px solid #0a0c10;transition:background .15s}
  .plan .pcta:hover{background:#222}
  .plan.reco{background:#0a0c10;border-color:#0a0c10;box-shadow:0 22px 54px rgba(10,12,16,.32)}
  .plan.reco .pname{color:#aeb2b8}
  .plan.reco .pprice{color:#fff}.plan.reco .pprice small{color:#aeb2b8}
  .plan.reco .pdesc{color:rgba(255,255,255,.7)}
  .plan.reco ul{border-top-color:rgba(255,255,255,.18)}
  .plan.reco li{color:rgba(255,255,255,.88);border-bottom-color:rgba(255,255,255,.14)}
  .plan.reco li::before{background:#fff}
  .plan.reco .pcta.inv{background:#fff;color:#0a0c10;border-color:#fff}
  .plan.reco .pcta.inv:hover{background:#e9e9e9}
  .reco-tag{position:absolute;top:18px;right:20px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#fff;opacity:.65}
  .team-line{margin-top:28px;text-align:center;font-size:14px;color:#5c6066}
  .team-line a{color:#0a0c10;text-decoration:underline;font-weight:600}
  /* Contact 인스타 로고 링크 */
  @media(max-width:900px){.price-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.price-grid{grid-template-columns:1fr}}

  /* 통합1: 계정 nav + 결제 모달 */
  .nav-acct{position:relative;display:inline-flex;align-items:center}
  .nav-ava{width:34px;height:34px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;font-family:var(--mono);font-size:13px;cursor:pointer;background-position:center;background-size:cover}
  .nav-acct-menu{position:absolute;top:calc(100% + 12px);right:0;min-width:214px;background:rgba(18,20,26,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:8px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.2s;z-index:1300;box-shadow:0 20px 50px rgba(0,0,0,.5)}
  .nav-acct-menu.show{opacity:1;transform:translateY(0);pointer-events:auto}
  .na-head{display:flex;align-items:center;gap:10px;padding:8px 10px 10px}
  .na-ava{width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:13px;background-size:cover;background-position:center;flex:0 0 auto}
  .na-email{font-size:12px;color:rgba(255,255,255,.72);word-break:break-all}
  .na-bal{display:flex;justify-content:space-between;font-size:13px;color:#fff;padding:6px 10px 10px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:6px}
  .na-bal b{color:#fff}
  .na-charge{display:flex;align-items:center;gap:8px;width:100%;background:var(--grad);color:#fff;border:0;border-radius:10px;padding:10px 12px;font-weight:700;font-size:13px;cursor:pointer;margin-bottom:6px}
  .na-charge svg{width:15px;height:15px;fill:currentColor}
  .na-item{display:flex;align-items:center;gap:8px;font-size:13.5px;color:rgba(255,255,255,.85);text-decoration:none;padding:9px 12px;border-radius:9px}
  .na-item:hover{background:rgba(255,255,255,.08);color:#fff}
  .na-item svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8}
  .amodal-bg{position:fixed;inset:0;background:rgba(10,12,16,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:2000;padding:20px}
  .amodal-bg.show{display:flex}
  .amodal{width:100%;max-width:460px;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.4);color:#0a0c10}
  .amodal-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid rgba(20,22,28,.08)}
  .amodal-head b{font-size:17px}
  .amodal-x{background:none;border:0;font-size:18px;cursor:pointer;color:#999}
  .amodal-body{flex:1 1 auto;min-height:0;padding:20px 22px;overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:rgba(20,22,28,.22) transparent}
  .amodal-body::-webkit-scrollbar{width:10px}
  .amodal-body::-webkit-scrollbar-track{background:transparent}
  .amodal-body::-webkit-scrollbar-thumb{background:rgba(20,22,28,.20);border-radius:999px;
    border:3px solid transparent;background-clip:content-box}
  .amodal-body::-webkit-scrollbar-thumb:hover{background:rgba(20,22,28,.34);border:3px solid transparent;background-clip:content-box}

  /* 세션C: 모션 */
  @keyframes pageIn{from{opacity:0}to{opacity:1}}
  /* (2026-10-03, Lighthouse 5차) 페이지 전체(body) 페이드인은 이미지·글자가 다 와 있어도 FCP·LCP 를 ~0.5s 늦췄다(opacity 0 은 "안 보인 것").
     히어로 문구(.copy)만 페이드 — 이미지(LCP)는 즉시. fill 은 backwards 만: 끝난 뒤엔 슬라이더가 쓰는 인라인 opacity 가 다시 적용돼야 한다. */
  .copy{animation:pageIn .7s ease backwards}
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}body{animation:none}}
  /* FAQ 부드러운 아코디언 */
  .faq details .ans{display:block;max-height:0;overflow:hidden;opacity:0;padding:0;transition:max-height .42s cubic-bezier(.22,.61,.36,1),opacity .3s ease,padding .42s ease}
  .faq details.open .ans,.faq details[open] .ans{max-height:720px;opacity:1;padding:12px 2px 4px}   /* (2026-10-03) 답변이 길어져 360px 에서 잘리던 것(모바일·독일어 등) */
  .faq summary{list-style:none;cursor:pointer}
  .faq summary::-webkit-details-marker{display:none}
  .faq .pm{display:inline-block;transition:transform .3s ease}
  .faq details.open .pm,.faq details[open] .pm{transform:rotate(45deg)}
  /* 모달 부드럽게 */
  .amodal-bg{display:flex;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
  .amodal-bg.show{opacity:1;visibility:visible;pointer-events:auto}
  .amodal{transform:translateY(14px) scale(.98);transition:transform .28s cubic-bezier(.22,.61,.36,1)}
  .amodal-bg.show .amodal{transform:none}

  /* 세션D: 레이아웃·전환·여백 */
  #gallery{background:#fafafa}
  .gcta{display:inline-block;padding:12px 26px;border-radius:999px;background:linear-gradient(135deg,#7a4df0,#5b2fc6);color:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 6px 18px rgba(91,47,198,.35);transition:.15s}
  .gcta:hover{filter:brightness(1.08);transform:translateY(-1px)}
  @media(max-width:760px){.gallery-marquee{display:none}#gallery{padding-bottom:64px}}              /* 갤러리는 라이트 */
  #faq{background:#ffffff}                  /* FAQ 흰색 유지(글자 가독성) */
  .darkfade{height:460px;background:linear-gradient(180deg,#ffffff 0%,#f0f1f3 12%,#cbcdd2 34%,#8e9197 54%,#54575e 72%,#23262b 88%,#0a0c10 100%);position:relative;z-index:1}
  .sec{padding-top:132px;padding-bottom:132px}      /* 섹션 숨쉴 여백 */
  #contact{padding-top:150px;padding-bottom:120px}  /* About와 위 FAQ 간격 ↑ */
  .contact .sec-sub{margin-left:auto;margin-right:auto}  /* About 본문 중앙정렬 보정 */
  .contact .eyebrow2{display:block;text-align:center}
  .wordmark{padding:56px 0 36px}
  .wordmark svg{width:min(70%,800px)}

  /* 세션F: 계정 드롭다운 버튼 리셋(흰배경 충돌 수정) */
  button.na-item{background:none;border:0;width:100%;text-align:left;font-family:inherit;cursor:pointer;box-shadow:none}
  .nav-acct-menu .na-item,.nav-acct-menu a.na-item,.nav-acct-menu button.na-item{font-size:13.5px;font-weight:500;line-height:1.2;color:rgba(255,255,255,.85);font-family:inherit}
  button.na-item:hover{background:rgba(255,255,255,.08)}
  .na-div{height:1px;background:rgba(255,255,255,.1);margin:6px 4px}
  .na-logout{color:rgba(255,255,255,.6)}
  .na-logout:hover{color:#fff}

  /* 세션E: 요금제 태그라인 */
  .ptag{font-size:12.5px;font-weight:600;color:var(--accent);margin:-2px 0 14px;letter-spacing:-.01em;min-height:16px}
  .plan.reco .ptag{color:#a9b6ff}

  /* 세션1: 상단바 */
  .lang{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:14px;color:#fff;background:none;border:0;cursor:pointer;padding:0 2px;letter-spacing:0;font-weight:500}
  .lang svg{width:17px;height:17px;display:block}
  .langtxt{line-height:1}
  .langcaret{font-size:11px;opacity:.85}
  #langMenu a.on{color:#fff;background:rgba(255,255,255,.12)}
  .btn-glass-sm{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:999px;padding:0 16px;height:34px;display:inline-flex;align-items:center;font-size:14px;font-weight:500;text-decoration:none;transition:background .15s}
  .btn-glass-sm:hover{background:rgba(255,255,255,.18)}
  /* 우상단 스튜디오 버튼 — 브랜드 그라데이션 강조(스카이블루→퍼플) */
  #navStudioBtn{background:linear-gradient(135deg,#8b7cf6,#5ec8f2);border:1px solid rgba(255,255,255,.35);font-weight:700;box-shadow:0 4px 14px rgba(124,116,234,.38)}
  #navStudioBtn:hover{filter:brightness(1.07);box-shadow:0 6px 18px rgba(124,116,234,.5)}
  /* 스튜디오 버튼을 프로필(아바타) 오른쪽으로 */
  #navStudioBtn{order:3}
  #navAcct{order:2}
  .langwrap{order:0}
  #navLoginBtn{order:1}

  /* 세션2: 홍보 섹션 + 연락처 */
  .promo-sec{padding-top:30px;padding-bottom:30px}
  /* CTA → FAQ → ABOUT&CONTACT 구간 여백 컴팩트하게 */
  .promo{padding-top:56px;padding-bottom:56px}
  #faq{padding-top:96px;padding-bottom:96px}
  .faq{gap:10px}
  .faq summary{padding:17px 0}
  .faq .ans{padding-bottom:17px}
  .darkfade{height:290px}
  #contact{padding-top:108px;padding-bottom:88px}
  .contact .cbtns{margin-top:22px}
  @media(max-width:600px){#faq{padding-top:72px;padding-bottom:72px}
    #contact{padding-top:84px;padding-bottom:68px}.darkfade{height:220px}}
  .promo{max-width:1080px;margin:0 auto;border-radius:26px;padding:72px 40px;text-align:center;color:#fff;
    background:#171a21;
    background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:40px 40px;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(10,12,16,.18)}
  .promo h2{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.02em;margin:0}
  .promo p{margin:14px auto 30px;color:rgba(255,255,255,.66);font-size:16px;max-width:520px;line-height:1.6}
  .cmeta{margin-top:26px;display:flex;flex-direction:column;gap:9px;align-items:center}
  .cmeta-row{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.72);font-size:14px}
  .cmeta-row svg{color:var(--accent);flex:0 0 auto}

  /* 세션4: 생성예시 무한 캐러셀(우→좌) */
  .gallery-marquee{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw}
  .marquee{overflow:hidden;width:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
  .marquee-track{display:flex;gap:16px;width:max-content;animation:mqscroll 55s linear infinite}
  
  .mq{flex:0 0 auto;width:clamp(240px,26vw,380px);aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid rgba(0,0,0,.08);background-color:#e9e9ea;box-shadow:0 10px 26px rgba(20,22,28,.06)}
  @keyframes mqscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

  /* 세션5: 계정/결제 모달 콘텐츠 스타일(스튜디오 정합) */
  .amodal .arow{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid rgba(20,22,28,.08);font-size:13.5px}
  .amodal .arow:last-child{border-bottom:none}
  .amodal .arow .k{color:#6b7178}
  .amodal .arow .neg{color:#c0392b;font-weight:700}
  .amodal .balbox{display:flex;justify-content:space-between;align-items:center;background:#f3f4fb;border:1px solid rgba(124,116,234,.20);border-radius:12px;padding:14px 16px}
  .amodal .balbox b{font-size:18px;color:var(--accent)}
  .amodal .packs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
  .amodal .pack{border:1px solid rgba(20,22,28,.12);border-radius:14px;padding:16px 12px;text-align:center;cursor:pointer;background:#fff;transition:transform .15s,border-color .15s,box-shadow .15s}
  .amodal .pack:hover{border-color:var(--accent);box-shadow:0 8px 20px rgba(124,116,234,.16);transform:translateY(-2px)}
  .amodal .pack b{display:block;font-size:21px;font-weight:700;color:#0a0c10}
  .amodal .pack .pt{color:#6b7178;font-size:12px;display:block;margin:1px 0 9px}
  .amodal .pack .pp{color:var(--accent);font-weight:700;font-size:13px;display:block}

  /* 생성예시 2열(16:9) 마퀴 — 아래 줄 반칸 stagger */
  .gallery-marquee{display:flex;flex-direction:column;gap:18px;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw}
  .mq{flex:0 0 auto;width:clamp(280px,30vw,380px);aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.08);background-color:#e9e9ea;box-shadow:0 10px 26px rgba(20,22,28,.06)}
  .marquee-track{gap:18px}
  .row2 .marquee-track{margin-left:-180px}   /* 반칸 어긋나게 시작 */
  @keyframes mqscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* 세션4: 부드러운 앵커 스크롤 (고정 상단바 오프셋 포함) */
  html{scroll-behavior:smooth;scroll-padding-top:84px}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

  /* 마퀴 스크롤 끊김 해결: GPU 합성 + 호버정지 제거 + 양줄 동일 타이밍 */
  .marquee{overflow:hidden;width:100%;contain:layout paint}
  .marquee-track{will-change:transform;transform:translateZ(0);backface-visibility:hidden;animation:mqscroll 60s linear infinite}
  .row2 .marquee-track{margin-left:-180px;animation-duration:60s}

  /* 결제모달 구독 섹션(스튜디오와 동일 구성) */
  .amodal .subhead{font-weight:700;font-size:13px;margin:16px 0 8px}
  .amodal .subplans{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .amodal .subcard{border:1px solid rgba(20,22,28,.12);border-radius:14px;padding:13px 10px 11px;text-align:center;position:relative;background:#fff}
  .amodal .subcard.reco{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
  .amodal .sc-n{font-weight:700;font-size:13px}
  .amodal .sc-p{font-size:14px;font-weight:800;margin:4px 0 2px}
  .amodal .sc-t{font-size:10px;color:#6b7178;min-height:30px;line-height:1.4}
  .amodal .sc-badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:8px;font-weight:800;padding:2px 8px;border-radius:20px;letter-spacing:.04em}
  .amodal .sc-btn{margin-top:8px;width:100%;padding:8px;border:1px solid rgba(20,22,28,.14);border-radius:999px;background:#fff;font-weight:700;font-size:11px;cursor:pointer;font-family:inherit}
  .amodal .sc-btn.using{background:#eceef2;color:#8a9099;border-color:#eceef2;cursor:default}
  .amodal .substate{font-size:12.5px;color:#4a4d55;background:rgba(124,116,234,.10);border:1px solid rgba(124,116,234,.22);border-radius:10px;padding:9px 12px;margin-bottom:10px}
  .amodal .substate b{color:#5b52d6}
  .amodal .subcancel{font-size:12px;color:#9096a0;cursor:pointer;text-decoration:underline;font-family:inherit}
  .amodal .sc-btn.amber{background:var(--grad);color:#fff;border:none}
  .amodal .teamline{font-size:11.5px;color:#6b7178;margin-top:11px;text-align:center}
  .amodal .teamline a{color:var(--accent);font-weight:700;cursor:pointer;text-decoration:underline}

  /* 쿠키 동의 배너 */
  .cookie-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:9999;max-width:700px;width:calc(100% - 32px);display:none;align-items:center;gap:14px;justify-content:space-between;background:rgba(18,20,26,.92);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 18px;box-shadow:0 18px 50px rgba(0,0,0,.32)}
  .cookie-bar.show{display:flex}
  .cookie-txt{color:rgba(255,255,255,.82);font-size:13px;line-height:1.5;white-space:nowrap}
  .cookie-txt a{color:#fff;text-decoration:underline}
  .cookie-btns{display:flex;gap:8px;flex-shrink:0}
  .cookie-bar button{border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;border:0;font-family:inherit}
  .ck-ess{background:rgba(255,255,255,.12);color:#fff}
  .ck-all{background:var(--grad);color:#fff}
  @media(max-width:560px){.cookie-bar{flex-direction:column;align-items:stretch}.cookie-txt{white-space:normal}.cookie-btns{justify-content:flex-end}}

  /* 더 많은 기능 탐색 — Features와 동일한 헤더 톤 + 이미지 카드(4열) */
  .mf-wrap{margin-top:88px}
  @media(max-width:760px){
    .mf-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px}
    .sec-sub br,.ptag br{display:none}
    .mf-cats{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
    .mf-cats::-webkit-scrollbar{display:none}
    #explore{padding-top:48px}
    #how .card{text-align:center}
    #how .sic,#how .num{margin-left:auto;margin-right:auto}
  }
  .mf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:none;margin:0 auto}
  .mf-tile{position:relative;border-radius:14px;overflow:hidden;background:#fff;cursor:pointer;
    border:1px solid rgba(20,22,28,.08);box-shadow:0 6px 16px rgba(20,22,28,.05);
    transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s cubic-bezier(.2,.7,.3,1),border-color .28s}
  .mf-grid .mf-tile:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 32px rgba(20,22,28,.12);border-color:rgba(124,116,234,.32)}
  .mf-tile .cmp{aspect-ratio:4/3;border-radius:0;border:0;box-shadow:none}
  .mf-cap{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:7px;
    padding:22px 10px 9px;pointer-events:none;
    background:linear-gradient(180deg,rgba(10,12,16,0) 0%,rgba(10,12,16,.7) 78%,rgba(10,12,16,.82) 100%)}
  .mf-ic2{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,#8b5cf6 0%,#5b2fc6 55%,#48269f 100%);box-shadow:0 3px 8px rgba(91,47,198,.5),inset 0 1px 0 rgba(255,255,255,.28)}
  .mf-ic2 svg{width:14px;height:14px;stroke:#fff}
  .mf-ic2 svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .mf-label{flex:1;min-width:0;font-size:11.5px;font-weight:600;color:#fff;line-height:1.2;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.3)}
  /* 분류 필터 칩 (각진 블랙 스타일) */
  .mf-cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;justify-content:center}
  .mf-cat{appearance:none;border:1px solid rgba(20,22,28,.12);border-radius:999px;background:#fff;color:#5c6066;font:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;padding:8px 16px;cursor:pointer;transition:.15s;white-space:nowrap}
  .mf-cat:hover{border-color:rgba(91,47,198,.4);color:#5b2fc6;background:#f6f3fd}
  .mf-info{position:absolute;right:8px;bottom:8px;z-index:6;width:22px;height:22px;border-radius:999px;border:0;background:rgba(10,12,16,.55);color:#fff;font-size:11.5px;font-weight:700;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .mf-bub{position:absolute;right:8px;bottom:38px;z-index:7;width:min(240px,86%);background:#0a0c10;color:rgba(255,255,255,.92);font-size:12px;line-height:1.55;padding:11px 13px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.35);opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity .25s,transform .25s;text-align:left;word-break:keep-all}
  .mf-tile.bub-on .mf-bub{opacity:1;transform:translateY(0);pointer-events:auto}
  .mf-tile{position:relative}
  .pinfo{display:none;width:20px;height:20px;border-radius:999px;border:1px solid rgba(91,47,198,.4);background:#f6f3fd;color:#5b2fc6;font-size:11px;font-weight:700;cursor:pointer;vertical-align:middle;margin-left:7px}
  @media(max-width:760px){
    #pricing .card ul{display:none!important}
    .pinfo{display:inline-grid;place-items:center}
    #pricing{overflow-x:hidden}
    #pricing .price-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch;width:100%;margin:0}
    #pricing .card.plan{position:relative;display:flex;flex-direction:column;padding:16px 12px;margin:0;min-width:0;max-width:100%}
    #pricing .card.plan .pcta{margin-top:auto}
    #pricing .reco-tag,#pricing .ptag{display:none}
    #pricing .crown{top:13px;right:12px;width:20px;height:20px}
    #pricing .pname{font-size:13.5px}
    #pricing .pprice{font-size:clamp(26px,8vw,34px)}
    #pricing .card.plan.bub-on ul{display:block!important;position:absolute;left:8px;right:8px;bottom:8px;z-index:8;background:#0a0c10;border-radius:12px;padding:12px 14px 12px 28px;box-shadow:0 12px 30px rgba(0,0,0,.4);margin:0}
    #pricing .card.plan.bub-on ul li{color:rgba(255,255,255,.9);font-size:12px;border-bottom-color:rgba(255,255,255,.14)}
    #pricing .card.plan.bub-on ul li::before{background:#8b5cf6}
  }
  .mf-cat.is-on{background:linear-gradient(135deg,#7a4df0,#5b2fc6);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(91,47,198,.3)}
  .mf-cat:focus-visible{outline:2px solid #6a5cf5;outline-offset:2px}
  .mf-tile.is-hidden{display:none}
  .mf-tile{animation:mfIn .34s cubic-bezier(.2,.7,.3,1) both}
  @keyframes mfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  /* 출시예정 배지 */
  .mf-soon{position:absolute;top:9px;left:9px;z-index:6;font-size:10px;font-weight:700;letter-spacing:.02em;
    color:#fff;background:rgba(10,12,16,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    padding:4px 8px;border:1px solid rgba(255,255,255,.22)}
  /* 출시예정: 호버 이펙트 없음 · 회색 반투명으로 살짝 어둡게 · 클릭 불가 */
  .mf-tile.is-soon{cursor:default}
  .mf-tile.is-soon .cmp{cursor:default}
  .mf-grid .mf-tile.is-soon:hover{transform:none;box-shadow:0 6px 16px rgba(20,22,28,.05);border-color:rgba(20,22,28,.08)}
  .mf-tile.is-soon .cmp::after{content:"";position:absolute;inset:0;z-index:3;
    background:rgba(124,128,136,.16);pointer-events:none}
  @media(prefers-reduced-motion:reduce){.mf-tile{animation:none}}
  @media(max-width:560px){.mf-cats{gap:6px;margin-bottom:22px}.mf-cat{font-size:12px;padding:8px 12px}}
  @media(max-width:900px){.mf-grid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:560px){.mf-grid{grid-template-columns:repeat(2,1fr);gap:14px}.mf-grid .mf-tile:hover{transform:none}}

  /* 계정 모달 보관함 그리드 */
  .genhint{font-size:11.5px;color:#9aa0a8;margin:0 0 10px;line-height:1.5}
  .genGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .gencard{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;cursor:pointer;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:.12s}
  .gencard:hover{border-color:#7c74ea;transform:translateY(-1px)}
  .gencard img{width:100%;height:100%;object-fit:cover;display:block}
  .gencard .gen-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:22px;opacity:.5}
  .gencard .gen-exp{position:absolute;top:6px;right:6px;background:rgba(18,20,26,.82);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:999px;letter-spacing:.02em}
  .gencard .gen-meta{position:absolute;left:0;right:0;bottom:0;padding:8px 8px 6px;font-size:10px;color:#fff;font-weight:600;background:linear-gradient(transparent,rgba(0,0,0,.66));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gencard .gen-del{position:absolute;top:6px;left:6px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(18,20,26,.78);color:#fff;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:.12s;font-family:inherit;padding:0}
  .gencard:hover .gen-del{opacity:1}
  .gencard .gen-del:hover{background:#e5484d}
  @media(hover:none){.gencard .gen-del{opacity:1}}
  @media(max-width:520px){.genGrid{grid-template-columns:repeat(2,1fr)}}

  .gencard .gen-vid{width:100%;height:100%;object-fit:cover;display:block;background:#000}
  .gencard .gen-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;pointer-events:none;backdrop-filter:blur(2px)}

  /* ===== MOBILE 정비: 햄버거 + 반응형 마감 (데스크탑 무영향) ===== */
  body.nav-tight .links{display:none}
  body.nav-tight .navburger{display:flex!important;width:34px;height:34px;margin:-7px 4px -7px 0}
  body.nav-tight .navburger svg{width:22px;height:22px}
  body.nav-tight .nav{align-items:center}
  .navburger{display:none;align-items:center;justify-content:center;width:44px;height:44px;
    background:transparent;border:0;color:#fff;cursor:pointer;border-radius:10px;padding:0}
  .navburger svg{width:24px;height:24px;display:block}
  /* 태블릿(781~1023px): 헤더 요소를 압축해 5개 언어 모두 풀 네비 유지 — 햄버거 전환을 늦춘다 */
  @media(max-width:1023px) and (min-width:781px){
    .nav{padding:14px 20px;gap:0}
    .langtxt{display:none}
    .lang{padding:0}
    .nav-r{gap:14px}
    .links{gap:clamp(14px,1.7vw,20px);margin-left:clamp(16px,2vw,28px)}
    .links a{font-size:14.5px}
    .nav-r a{font-size:14.5px}
  }
  @media(max-width:780px){
    .navburger{display:inline-flex}
    .links{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;
      gap:0;margin:0;background:#000;border-bottom:1px solid rgba(255,255,255,.10);
      max-height:0;overflow:hidden;padding:0;transition:max-height .28s ease}
    .nav.open .links{max-height:72vh}
    .links a{padding:15px 22px;font-size:16px;border-top:1px solid rgba(255,255,255,.07)}
    .navburger{order:-1;width:38px;height:38px}
    .nav{align-items:center;padding:10px 12px;gap:4px}
    .brand{display:flex;align-items:center}.brand svg{display:block}
    .nav .langcaret{display:none}
    #navStudioBtn{display:none!important}
    .nav-r{gap:16px}
    .nav-r .langwrap{order:1}.nav-r .ig{order:2}.nav-r #navLoginBtn{order:3}.nav-r #navAcct{order:3}
  }
  /* (2026-09-30) 태블릿(601~1023px, 아이패드): 고정 헤더가 hero 사진 윗부분을 덮어 사진·헤더가 뭉개져 보였다.
     hero 를 헤더 높이(--navh, JS 가 실측)만큼 내려 헤더와 사진을 분리하고, 짧아진 16:9 대신 4:3 으로 키워 카피가 여유 있게 들어가게 한다. */
  @media(max-width:1180px) and (min-width:601px){
    .hero{margin-top:var(--navh,60px);max-height:calc(100svh - var(--navh,60px))}   /* 아이패드 가로(1024·1180)까지 헤더 아래로 */
  }
  @media(max-width:1023px) and (min-width:601px){
    .hero{aspect-ratio:4/3}   /* 세로 아이패드: 16:9 는 너무 납작해 카피가 끼었다 */
  }
  @media(max-width:600px){
    .hero{aspect-ratio:auto;max-height:none;height:auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:#06060c;padding:112px 22px 64px;position:relative;overflow:hidden}
    .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(58% 42% at 15% 14%,rgba(124,116,234,.48),transparent 62%),radial-gradient(46% 34% at 92% 22%,rgba(94,200,242,.28),transparent 60%),radial-gradient(95% 58% at 50% 120%,rgba(139,124,246,.46),transparent 72%)}
    .hero::after{content:"";position:absolute;left:50%;top:-10%;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(124,116,234,.55),transparent 70%);transform:translateX(-50%);filter:blur(30px);z-index:0;pointer-events:none}
    .heromedia{display:none}
    .scrim{display:none}
    .ba-tag{display:none}
    .dots{display:none}
    .copy{position:relative;z-index:1;transform:none;inset:auto;left:auto;top:auto;width:100%;max-width:none;padding:0;text-align:center;pointer-events:auto;display:block}
    .copy .eyebrow{color:rgba(201,193,255,.82)}
    .copy h1{font-size:clamp(30px,8.5vw,42px);color:#fff;margin:0;text-shadow:0 0 40px rgba(124,116,234,.6)}
    .copy p{font-size:clamp(14px,3.8vw,16px);margin-top:16px;color:rgba(232,230,246,.86)}
    .copy .cta{position:static;flex-direction:column;width:100%;gap:11px;margin-top:30px}
    .copy .cta>a{width:100%;min-height:52px}
    .langtxt{display:none}
    .card.plan{padding:24px 18px}
    .faq details{padding:0 16px}
    .faq summary{padding:16px 0;font-size:15px}
    .foot{padding:36px 20px;text-align:center}
    .foot .flinks{justify-content:center}
    .foot .copyr,.foot .bizinfo{text-align:left}
  }
  @media(max-width:480px){
    .copy h1{font-size:clamp(26px,8.5vw,36px)}
    .sec-title{font-size:clamp(24px,7vw,30px)}
  }
  /* 토큰 내역 접기/펼치기 + 내부 스크롤 캡슐 */
  .txtoggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;font-weight:700;font-size:13px;margin:18px 0 0;padding:8px 0;color:inherit}
  .txchev{transition:transform .2s;opacity:.5;flex:0 0 auto}
  .txtoggle.open .txchev{transform:rotate(180deg)}
  .txbox{margin-top:8px;border:1px solid rgba(20,22,28,.12);border-radius:12px;max-height:240px;overflow-y:auto;padding:4px 12px;background:rgba(20,22,28,.02)}
  .prow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid rgba(20,22,28,.08)}
  .prow:last-child{border-bottom:none}
  .prow-name{font-size:12.5px;font-weight:600;color:#1a1c22}
  .prow-date{font-size:11px;color:#9aa0a8;margin-top:1px}
  .prow-r{display:flex;align-items:center;gap:8px}
  .prow-st{background:#eefaf1;color:#16a34a;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap}.prow-st.refund{background:#fdeeee;color:#dc2626}
  .prow-amt{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:#1a1c22}
  .txbox[hidden]{display:none}
  /* 제목 줄바꿈: locale별 처리 (widow 방지) */
  .copy h1,.sec-title{text-wrap:balance}
  html[lang="ja"] .sec-title,html[lang="ja"] .copy h1{word-break:keep-all;line-break:strict}
  html[lang="en"] .sec-title,html[lang="en"] .copy h1,html[lang="es"] .sec-title,html[lang="es"] .copy h1,html[lang="fr"] .sec-title,html[lang="fr"] .copy h1,html[lang="de"] .sec-title,html[lang="de"] .copy h1,html[lang="pt"] .sec-title,html[lang="pt"] .copy h1,html[lang="it"] .sec-title,html[lang="it"] .copy h1,html[lang="nl"] .sec-title,html[lang="nl"] .copy h1{word-break:normal;overflow-wrap:normal}   /* 라틴 문자 언어 공통 */
  /* ── 공용 다이얼로그(브라우저 기본 alert/confirm/prompt 대체) ────────── */
  .adlg-bg{position:fixed;inset:0;z-index:20000;background:rgba(20,22,28,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .16s ease}
  .adlg-bg.on{opacity:1}
  .adlg{width:100%;max-width:390px;background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(20,22,28,.24),0 2px 6px rgba(20,22,28,.08);padding:24px 24px 18px;transform:translateY(8px) scale(.985);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
  .adlg-bg.on .adlg{transform:none}
  .adlg-t{font-size:16px;font-weight:700;color:#0a0c10;letter-spacing:-.01em;margin:0 0 8px}
  .adlg-m{font-size:14px;line-height:1.7;color:#4a4e55;margin:0;white-space:pre-line;word-break:keep-all;overflow-wrap:break-word}
  .adlg-in{width:100%;margin-top:14px;padding:11px 13px;border:1px solid rgba(20,22,28,.16);border-radius:10px;font-size:14px;font-family:inherit;color:#0a0c10;outline:none;box-sizing:border-box}
  .adlg-in:focus{border-color:#8b7cf6;box-shadow:0 0 0 3px rgba(139,124,246,.16)}
  .adlg-b{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
  .adlg-btn{font-family:inherit;font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:10px;border:0;cursor:pointer;transition:.14s}
  .adlg-no{background:#f1f1f3;color:#4a4e55}
  .adlg-no:hover{background:#e6e6ea}
  .adlg-yes{background:linear-gradient(135deg,#8b7cf6,#5ec8f2);color:#fff}
  .adlg-yes:hover{filter:brightness(1.06)}
  .adlg-yes.danger{background:#dc2626}
  .adlg-yes.danger:hover{background:#c11d1d}

  /* (L-0916A) FastSpring 결제 완료 모달 — FS 기본 완료 화면은 없앨 수 없어 그 뒤에 우리 화면으로 마무리 */
  .fsdone{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;background:rgba(10,12,16,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:20px}
  .fsdone.show{display:flex}
  .fsdone-card{width:min(420px,100%);background:var(--panel,#fff);color:var(--ink,#0a0c10);border-radius:18px;padding:34px 28px 26px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:fsdIn .22s ease}
  @keyframes fsdIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
  .fsdone-ic{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;background:linear-gradient(135deg,#8b7cf6,#5ec8f2);display:flex;align-items:center;justify-content:center}
  .fsdone-ic svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
  .fsdone-t{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
  .fsdone-s{font-size:14.5px;font-weight:600;line-height:1.6}
  .fsdone-b{margin-top:6px;font-size:13px;opacity:.65;line-height:1.6}
  .fsdone-btn{margin-top:22px;width:100%;height:46px;border:none;border-radius:12px;background:linear-gradient(135deg,#8b7cf6,#5ec8f2);color:#fff;font-size:15px;font-weight:800;font-family:inherit;cursor:pointer}
  .fsdone-btn:hover{filter:brightness(1.05)}


  #betaOvl,#bkOvl{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;
    background:rgba(10,12,16,.44);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:20px}
  #betaOvl.show,#bkOvl.show{display:flex}
  /* 카드는 스크롤하지 않는다 — 본문(.mdl-body)만 스크롤. 모서리 위 스크롤바 방지 */
  .mdl{position:relative;width:min(600px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;
    overflow:hidden;background:#fff;border-radius:20px;box-shadow:0 24px 70px rgba(10,12,16,.26);
    font-family:var(--sans);animation:mdlIn .28s cubic-bezier(.22,.9,.3,1)}
  @supports (height:100dvh){ .mdl{max-height:calc(100dvh - 40px)} }
  @keyframes mdlIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
  .mdl-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
    min-height:28px;padding:30px 42px 18px}
  .mdl-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 42px;
    scrollbar-width:thin;scrollbar-color:rgba(20,22,28,.20) transparent}
  .mdl-body::-webkit-scrollbar{width:10px}
  .mdl-body::-webkit-scrollbar-track{background:transparent}
  .mdl-body::-webkit-scrollbar-thumb{background:rgba(20,22,28,.18);border-radius:999px;
    border:3px solid transparent;background-clip:content-box}
  .mdl-body::-webkit-scrollbar-thumb:hover{background:rgba(20,22,28,.32);border:3px solid transparent;background-clip:content-box}
  .mdl-eyebrow{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
    color:#6b7280;line-height:1}
  .mdl-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
  .mdl-x{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:9px;
    background:transparent;color:#9ca3af;cursor:pointer;padding:0;transition:.15s;flex:none;-webkit-tap-highlight-color:transparent}
  .mdl-x:hover{background:rgba(20,22,28,.06);color:#111827}
  .mdl-lang{position:relative;display:flex;align-items:center}
  .mdl-langbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 8px;
    background:none;border:0;border-radius:9px;cursor:pointer;color:#6b7280;font-family:var(--sans);font-size:13px;
    font-weight:500;line-height:1;-webkit-tap-highlight-color:transparent}
  .mdl-langbtn:hover{color:#111827;background:rgba(20,22,28,.06)}
  .mdl-langmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:130px;display:flex;flex-direction:column;
    background:#fff;border:1px solid rgba(20,22,28,.09);border-radius:12px;overflow:hidden;
    box-shadow:0 14px 40px rgba(10,12,16,.16);opacity:0;transform:translateY(-6px);pointer-events:none;
    transition:opacity .2s ease,transform .2s ease;z-index:30}
  .mdl-lang.open .mdl-langmenu{opacity:1;transform:none;pointer-events:auto}
  .mdl-langmenu a{font-size:13.5px;color:#374151;text-decoration:none;padding:12px 16px;white-space:nowrap;transition:background .12s}
  .mdl-langmenu a:hover{background:rgba(20,22,28,.05);color:#111827}
  .mdl-langmenu a.on{color:#111827;font-weight:600;background:rgba(20,22,28,.05)}
  .mdl h3{font-size:23px;font-weight:700;letter-spacing:-.028em;color:#111827;line-height:1.42;margin:0 0 14px;
    word-break:keep-all;overflow-wrap:break-word;text-wrap:balance}
  .mdl p{font-size:14.5px;line-height:1.65;color:#4b5563;margin:0 0 14px;letter-spacing:-.008em;
    word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
  .mdl-note{position:relative;padding:14px 18px 14px 17px;margin:20px 0 18px;border-radius:0 10px 10px 0;
    background:rgba(124,92,255,.035)}
  .mdl-note:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;
    background:linear-gradient(180deg,#8b7cf6,#6a58e6)}
  .mdl-note p{color:#1f2937;margin:0;font-size:14px;line-height:1.65;white-space:pre-line;font-weight:400;
    word-break:keep-all;overflow-wrap:break-word;text-wrap:pretty}
  .mdl-mail{font-size:13px;color:#6b7280;margin:0 0 2px}
  .mdl-mail a{color:#111827;text-decoration:none;border-bottom:1px solid rgba(20,22,28,.2);word-break:break-all}
  .mdl-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:20px 42px 30px;border-top:1px solid rgba(20,22,28,.06)}
  .mdl-check{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:13.5px;color:#6b7280;
    cursor:pointer;user-select:none;line-height:1;-webkit-tap-highlight-color:transparent}
  .mdl-check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1px solid rgba(20,22,28,.26);
    border-radius:5px;margin:0;cursor:pointer;position:relative;transition:.15s;flex:none;background:#fff}
  .mdl-check input:checked{background:#111827;border-color:#111827}
  .mdl-check input:checked:after{content:"";position:absolute;left:5.8px;top:2px;width:4px;height:9px;
    border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(43deg)}
  .mdl-cta{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 26px;border:0;
    border-radius:11px;background:linear-gradient(135deg,#7b6cf0,#6a58e6);color:#fff;font-family:var(--sans);
    font-size:14.5px;font-weight:600;letter-spacing:-.012em;cursor:pointer;box-shadow:0 4px 14px rgba(106,88,230,.16);
    transition:transform .12s,filter .15s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
  .mdl-cta:hover{filter:brightness(1.05)}.mdl-cta:active{transform:translateY(1px)}
  .bk-prod{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding-bottom:16px;margin:0 0 16px;border-bottom:1px solid rgba(20,22,28,.08)}
  .bk-qty{display:inline-flex;align-items:baseline;color:#111827}
  .bk-qty b{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.1}
  .bk-qty em{font-style:normal;font-size:12px;font-weight:600;letter-spacing:.09em;color:#9ca3af;margin-left:8px}
  .bk-price{font-size:22px;font-weight:700;letter-spacing:-.02em;color:#111827;white-space:nowrap;line-height:1.1}
  .bk-acct{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
    background:#fafafb;border:1px solid rgba(20,22,28,.06);border-radius:12px;padding:16px 18px;margin:18px 0 16px}
  .bk-acct b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.012em;color:#111827}
  .bk-acct small{display:block;font-size:12.5px;color:#9ca3af;margin-top:4px}
  .bk-copy{border:1px solid rgba(20,22,28,.14);background:#fff;color:#111827;border-radius:9px;padding:10px 14px;
    font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:.15s;
    -webkit-tap-highlight-color:transparent}
  .bk-copy:hover{border-color:#111827}
  @media (max-width:600px){
    #betaOvl,#bkOvl{padding:12px}
    .mdl{border-radius:18px;max-height:calc(100vh - 24px)}
    .mdl-head{padding:20px 22px 12px}
    .mdl-body{padding:0 22px}
    .mdl-foot{padding:16px 22px calc(18px + env(safe-area-inset-bottom,0px));
      flex-direction:column-reverse;align-items:stretch;gap:6px}
    .mdl h3{font-size:20px;line-height:1.4}
    .mdl p{font-size:14px}
    .mdl-note p{font-size:13.5px}
    .mdl-cta{width:100%;height:50px;font-size:15px}
    .mdl-check{justify-content:center}
    .bk-qty b{font-size:23px} .bk-price{font-size:20px}
    .bk-acct{padding:14px 16px}
    .bk-acct b{font-size:15.5px}
    .bk-copy{width:100%;text-align:center}
  }
  @supports (height:100dvh){ @media (max-width:600px){ .mdl{max-height:calc(100dvh - 24px)} } }

  /* ══ 모션 레이어 (M-0918) — 팝업·메뉴·화면 전환이 "팟" 뜨지 않고 자연스럽게 나타나도록.
     display 전환만 하던 오버레이에 공통 애니메이션을 입힌다. 기존 표시/숨김 로직(.show 토글)은 그대로.
     시스템 "동작 줄이기"를 켠 사용자에게는 전부 비활성(마지막 블록). ══ */
  @keyframes mFade{from{opacity:0}to{opacity:1}}
  @keyframes mPop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes mPopSm{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes mRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes mSlideR{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
  @keyframes mZoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
  .amodal-bg.show,.fsdone.show{animation:mFade .16s ease both}
  .amodal-bg.show .amodal,.fsdone.show .fsdone-card{animation:mPop .24s cubic-bezier(.2,.8,.2,1) both}
  .langmenu.show{animation:mPopSm .15s ease both}
  /* (2026-09-27) 쿠키 배너는 left:50%+translateX(-50%) 로 가운데를 잡는데 mRise 의 끝 상태(transform:none)가 그걸 지워
     오른쪽으로 배너 너비의 절반만큼 밀렸다. 전용 키프레임으로 translateX(-50%) 를 끝까지 유지한다. */
  @keyframes ckRise{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}
  .cookie-bar.show{animation:ckRise .3s cubic-bezier(.2,.8,.2,1) both}
  .packs>div,.mf-tile{transition:transform .16s ease,box-shadow .18s ease,border-color .16s ease}
  @media(prefers-reduced-motion:reduce){ .amodal-bg.show,.fsdone.show,.amodal-bg.show .amodal,.fsdone.show .fsdone-card,.langmenu.show,.cookie-bar.show{animation:none!important} }
  /* (0920) iOS 사파리 입력 확대 방지 — 16px 미만 글자 입력칸을 누르면 화면이 확대돼 레이아웃이 틀어진다.
     터치 기기에서만 입력칸 글자를 16px로(데스크톱 디자인은 그대로). 사용자 핀치 확대는 막지 않는다. */
  @media (hover:none) and (pointer:coarse){
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select{font-size:16px!important}
  }