/* 메인(분석기 첫 화면) 소개 부분. 파일을 올리면 body.loaded 가 붙고 .landing 은 모두 숨는다. */
.hero2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding:40px 0 8px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 14px;border-radius:999px;background:var(--glass-tile);border:1px solid var(--glass-border);color:var(--text);font-size:.86rem;font-weight:600}
.eyebrow i{color:var(--primary);font-size:1.05rem}
.intro .hero2 h1{font-size:clamp(2.3rem,5.6vw,4rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 16px}
.intro h1 em{font-style:normal;background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero2 .lede{font-size:1.06rem;max-width:46ch}
/* txt 올리는 칸: 첫 화면에서 가장 눈에 띄게 */
.hero2 .drop{margin-top:26px;padding:34px 20px;border-width:2px;border-color:rgba(165,139,255,.75);
  background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(255,107,214,.12)),var(--glass);box-shadow:0 0 0 6px rgba(165,139,255,.08),var(--glow)}
.hero2 .drop:hover,.hero2 .drop:focus-visible{border-color:var(--accent);background:linear-gradient(135deg,rgba(124,92,255,.32),rgba(255,107,214,.2)),var(--glass)}
.hero2 .drop>i{width:64px;height:64px;font-size:1.9rem}
.hero2 .drop b{font-size:1.3rem}
.safe{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;color:var(--mute);font-size:.9rem}
.safe i{color:var(--success);font-size:1.15rem;margin-top:1px}
.phone-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px}
.phone-stage::before{content:"";position:absolute;inset:0;z-index:-1;filter:blur(40px);
  background:radial-gradient(70% 60% at 70% 20%,rgba(165,139,255,.35),transparent 70%),radial-gradient(60% 60% at 20% 90%,rgba(255,107,214,.25),transparent 70%)}
.phone{width:min(320px,78vw);aspect-ratio:9/16;border-radius:40px;padding:8px;background:linear-gradient(160deg,#2c2550,#15122a);
  box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14),var(--glow)}
.phone video{width:100%;height:100%;display:block;border-radius:32px;object-fit:cover;background:#0b0a14}
.demo-tag{font-size:.78rem;color:var(--subtle)}

.landing h2{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 8px}
.sub2{color:var(--mute);margin:0 0 24px;max-width:56ch}
.feats{margin-top:88px}
.fscroller{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;margin:0 -16px;padding:6px 16px 18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);touch-action:pan-x pan-y}
.fscroller::-webkit-scrollbar{display:none}
.fscroller.dragging{cursor:grabbing;user-select:none}
.fscroller:focus-visible{outline:2px solid var(--primary);outline-offset:4px;border-radius:var(--r-panel)}
.fgrid{display:flex;gap:14px;width:max-content}
.fgrid .fcard{width:min(340px,78vw);flex:none;transition:transform .25s var(--ease),border-color .25s}
.fgrid .fcard:hover{transform:translateY(-4px);border-color:rgba(165,139,255,.5)}
.fscroller.dragging .fcard:hover{transform:none}
.fcard img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.fcard{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-panel);background:var(--glass);border:1px solid var(--glass-border);box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));min-width:0}
.fcard.big{background:linear-gradient(160deg,rgba(124,92,255,.35),rgba(255,107,214,.14)),var(--glass);border-color:rgba(165,139,255,.4)}
.ftext{padding:20px 20px 14px;display:flex;flex-direction:column;gap:6px}
.ftext i{font-size:1.2rem;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--glass-tile);color:var(--primary);margin-bottom:4px}
.fcard.big .ftext i{background:linear-gradient(135deg,var(--primary),var(--accent));color:var(--on-primary)}
.ftext b{font-size:1.15rem;color:var(--ink)}
.ftext p{margin:0;color:var(--mute);font-size:.92rem}
.fcard img{display:block;width:100%;height:220px;object-fit:cover;object-position:top;margin-top:auto;border-top:1px solid var(--glass-border)}
.trust{margin-top:88px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:center}
.trust ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.trust li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-cell);background:var(--glass-tile);border:1px solid var(--glass-border)}
.trust li i{font-size:1.4rem;color:var(--primary);margin-top:2px}
.trust li b{display:block;color:var(--ink);margin-bottom:2px}
.trust li span{color:var(--mute);font-size:.93rem}
.last2{margin:88px 0 16px;padding:40px 32px;border-radius:var(--r-panel);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  background:linear-gradient(135deg,rgba(124,92,255,.5),rgba(255,107,214,.3)),var(--glass);border:1px solid rgba(165,139,255,.4)}
.last2 p{margin:0;color:var(--text)}
.last2 .btn{background:var(--ink);color:var(--on-primary);border-color:var(--ink);min-height:50px;padding:12px 24px}

body.loaded .landing{display:none!important}
body.loaded .hero2{display:block;padding-top:24px}
body.loaded .intro .hero2 h1{font-size:clamp(1.8rem,4.6vw,2.6rem);margin-bottom:10px}


@media (max-width:860px){.hero2{grid-template-columns:1fr;gap:32px;padding-top:24px}.trust{grid-template-columns:1fr}}
@media (max-width:560px){.last2{grid-template-columns:1fr;padding:30px 20px}.feats,.trust{margin-top:64px}}
@media (prefers-reduced-motion:reduce){.phone video{display:none}.phone{background:url(../img/intro-poster.webp) center/cover}}

/* 지난번에 올린 대화 이어서 보기 */
.resume{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding:14px 16px;border-radius:var(--r-cell);
  background:var(--glass-tile);border:1px solid rgba(165,139,255,.45)}
.resume[hidden]{display:none}
.resume>i{font-size:1.4rem;color:var(--primary)}
.resume>span{flex:1 1 220px;min-width:0}
.resume b{display:block;color:var(--ink)}
.resume small{display:block;color:var(--mute);font-size:.84rem;overflow-wrap:anywhere}
.hero2 .resume+.drop{margin-top:14px}

/* 데스크톱 가로 화면(16:9 등): 첫 화면을 스크롤 없이 한 화면에 꽉 차게. 크기는 화면 높이(vh)를 따라간다 */
@media (min-width:1024px) and (min-aspect-ratio:4/3) and (min-height:560px){
  body:not(.loaded) main.an{padding-top:0}
  body:not(.loaded) .hero2{height:calc(100svh - 65px);min-height:0;padding:clamp(12px,3vh,48px) 0;box-sizing:border-box;align-items:center;gap:clamp(32px,4vw,80px)}
  body:not(.loaded) .intro .hero2 h1{font-size:clamp(2.2rem,min(5vw,7.6vh),5.2rem);margin-bottom:clamp(8px,1.8vh,20px)}
  body:not(.loaded) .eyebrow{margin-bottom:clamp(8px,1.6vh,18px)}
  body:not(.loaded) .hero2 .lede{font-size:clamp(.95rem,1.9vh,1.25rem);max-width:48ch}
  body:not(.loaded) .hero2 .drop{margin-top:clamp(12px,2.6vh,32px);padding:clamp(14px,3.4vh,44px) 20px;gap:clamp(4px,.8vh,10px)}
  body:not(.loaded) .hero2 .drop>i{width:clamp(44px,6.4vh,76px);height:clamp(44px,6.4vh,76px);font-size:clamp(1.3rem,2.6vh,2.1rem)}
  body:not(.loaded) .hero2 .drop b{font-size:clamp(1.05rem,2.2vh,1.5rem)}
  body:not(.loaded) .resume{margin-top:clamp(10px,2vh,22px);padding:clamp(8px,1.4vh,14px) 16px}
  body:not(.loaded) .safe{margin-top:clamp(8px,1.4vh,14px)}
  body:not(.loaded) .intro .how{margin-top:clamp(6px,1.2vh,16px)}
  /* 폰 영상: 첫 화면 높이에 맞춰 9:16 유지 */
  .phone{height:min(calc(100svh - 64px - 12vh), 900px);width:auto;max-width:100%}
  .phone{border-radius:clamp(28px,4vh,48px)}
  .phone video{border-radius:clamp(22px,3.3vh,40px)}
}