/* scrapin.aitom.biz 공용 스타일 — 소개(/, /index.html)와 약관·방침·계정 삭제 안내(legal/*.html)가 함께 쓴다.
   10-21 다시 짬(오너 «너무 없어보인다 · locket·partiful·ngl·promptsites 급으로 · 콜라주 느낌 세련되게»):
   바탕은 검정 한 장 — 색은 사진과 앱 스티커가 낸다(Partiful·Lapse·Retro 문법). 그라데이션·3D 아이콘은 쓰지 않는다(크리틱 10-21: AI 기본값).
   꾸밈은 전부 앱이 실제로 주는 에디토리얼 스티커(마커 낙서·한글 말풍선·오린 헤드라인·하프톤·테이프)다. */
@font-face{font-family:"Ssurround";src:url("/static/landing/ssurround-sub.woff?v=57feb75e") format("woff");font-weight:400 900;font-display:swap}
:root{
  --bg:#0A0A0B;--bg-2:#131315;--bg-3:#1C1C1F;--fg:#F4F1EC;--fg-2:rgba(244,241,236,.72);--fg-3:rgba(244,241,236,.5);--line:rgba(244,241,236,.12);
  --lime:#C9F25B;--pink:#FF5FA2;--ink:#111013;--paper:#FFFFFF;
  --display:"Ssurround","Pretendard Variable",Pretendard,sans-serif;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --wrap:1200px;--gut:clamp(20px,4vw,48px);--sec:clamp(88px,10vw,144px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.65;word-break:keep-all;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.d{font-family:var(--display);font-weight:400;letter-spacing:-.02em}
.wrap{max-width:calc(var(--wrap) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}

/* ── 위 메뉴 ─────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(10,10,11,.78);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brandmark{display:flex;align-items:center;gap:10px}
.brandmark img{width:30px;height:30px;border-radius:9px}
.brandmark .wm{width:auto;height:30px}  /* 앱 워드마크 — 글꼴의 I 가 l 로 읽혀서(10-21) */
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{padding:8px 12px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--fg-2)}
.nav-links a:hover{color:var(--fg)}

/* ── 꾸밈 부품(앱 스티커·사진) ────────────────────────── */
.stk{position:absolute;z-index:4;width:var(--w,16%);transform:rotate(var(--r,0deg));filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.stk.flat{filter:none}
.shot{position:absolute;z-index:2;width:var(--w,40%);transform:rotate(var(--r,0deg));background:var(--paper);padding:var(--mat,2.4%);
  box-shadow:0 24px 50px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3)}
.shot.pola{padding:var(--mat,3%) var(--mat,3%) calc(var(--mat,3%) * 4.2)}
.shot > img{width:100%;aspect-ratio:var(--ar,3/4);object-fit:cover}
.tape{position:absolute;z-index:5;width:var(--w,22%);transform:rotate(var(--r,-6deg));opacity:.94}

/* 붙는 손맛 — 처음 그릴 때 하나씩 «착» 붙는다(움직임 줄이기 설정이면 바로 보인다) */
.js .pop{opacity:0;transform:rotate(var(--r,0deg)) scale(1.35);transition:opacity .25s ease-out,transform .45s cubic-bezier(.2,1.6,.4,1);transition-delay:calc(var(--i,0) * 110ms + 250ms)}
.js .drop{opacity:0;transform:translateY(24px) rotate(calc(var(--r,0deg) - 4deg));transition:opacity .5s ease-out,transform .8s cubic-bezier(.2,.9,.25,1);transition-delay:calc(var(--i,0) * 90ms)}
.js .draw{clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.6,0,.2,1);transition-delay:calc(var(--i,0) * 110ms + 250ms)}
.on .pop,.on.pop{opacity:1;transform:rotate(var(--r,0deg)) scale(1)}
.on .drop,.on.drop{opacity:1;transform:rotate(var(--r,0deg))}
.on .draw,.on.draw{clip-path:inset(0 0 0 0)}
@media (pointer:fine){.drag{cursor:grab;touch-action:none;pointer-events:auto;user-select:none;-webkit-user-drag:none}.drag.held{cursor:grabbing;z-index:9;transition:none}}
@media (pointer:coarse){.collage .hint{display:none}}

/* 넓은 화면 양옆 빈자리의 스티커 줄(10-21 오너 «양쪽에 빈공간 … 스티커들 더 붙여봐») — 콘텐츠(1200) 밖에만, 좁으면 숨김 */
main > section{position:relative}
.gut{position:absolute;inset:0;z-index:1;pointer-events:none;display:none}
.lane{position:absolute;top:0;bottom:0;width:min(240px,calc(50vw - 640px))}
.lane.l{right:calc(50% + 628px)}.lane.r{left:calc(50% + 628px)}
.lane .stk{filter:drop-shadow(0 10px 16px rgba(0,0,0,.45));animation:bob var(--d,7s) ease-in-out infinite}
.lane .stk.flat{filter:none}
.lane .stk:nth-child(2n){animation-delay:-3s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (min-width:1600px){.gut{display:block}}  /* 1440 에선 옆 줄이 80px 라 스티커가 30px 점으로 흩어진다(10-21 실측) — 160px 넘는 1600 부터 */
/* 올렸을 때 살짝 들림(마우스) — 들림은 --lift 로만 준다(콜라주의 마우스 깊이·끌기와 한 translate 에 합친다) */
@media (hover:hover) and (pointer:fine){
  .shot,.row img,.fit-list img:not(.stk){translate:0 var(--lift,0px);transition:translate .35s cubic-bezier(.2,.9,.3,1),scale .35s cubic-bezier(.2,.9,.3,1)}
  .js .shot.drop{transition-property:opacity,transform,translate,scale;transition-duration:.5s,.8s,.35s,.35s;transition-timing-function:ease-out,cubic-bezier(.2,.9,.25,1),cubic-bezier(.2,.9,.3,1),cubic-bezier(.2,.9,.3,1);transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),0s,0s}
  .shot:hover,.fit-list img:not(.stk):hover{--lift:-6px;scale:1.02}
  .row img:hover{--lift:-10px;scale:1.04}
}
/* 첫 화면 콜라주 — 마우스 깊이(--mx/--my, site.js 가 겹마다) + 끈 자리(--dx/--dy) + 들림 */
.collage > *{translate:calc(var(--mx,0px) + var(--dx,0px)) calc(var(--my,0px) + var(--dy,0px) + var(--lift,0px))}
/* 절 제목이 떠오른다 */
.js .rise{opacity:0;translate:0 18px;transition:opacity .7s ease-out,translate .9s cubic-bezier(.2,.9,.25,1)}
.js .rise.on{opacity:1;translate:0 0}

/* ── 첫 화면 ─────────────────────────────────────────── */
.hero{padding:112px 0 64px;min-height:100svh;display:flex;align-items:center}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(24px,4vw,64px);align-items:center;width:100%}
.hero-copy{position:relative;z-index:6}
.hero h1{font-size:clamp(46px,6.2vw,92px);line-height:1.06;margin:0 0 26px}
.hero h1 .line{display:block;white-space:nowrap}
.circled{position:relative;display:inline-block}
.circled > img{position:absolute;left:-9%;top:-20%;width:118%;height:142%;max-width:none;pointer-events:none;opacity:.95}
.hero-copy > p{font-size:clamp(17px,1.5vw,19px);color:var(--fg-2);max-width:440px;margin:0 0 32px}
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
/* 스토어 버튼 — 로고 + 이름 한 줄(10-22 오너). 검정 바탕·회색 테두리·둥근 모서리는 공식 배지의 결, 두 버튼은 같은 폭(--sw)·높이(--bh) */
.store{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;width:var(--sw,172px);height:var(--bh,50px);
  border-radius:10px;background:#000;border:1px solid #a6a6a6;color:#fff;font-weight:700;font-size:16px;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.store img{display:block;height:22px;width:auto}
a.store{transition:border-color .2s,background-color .2s,translate .15s}
a.store:hover{border-color:var(--fg);background:#111}
a.store:active{translate:0 1px}
a.store:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.collage{position:relative;width:100%;aspect-ratio:1/1.02}
.collage .hint{position:absolute;left:2%;bottom:-6%;z-index:6;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-3)}
.collage .hint img{width:34px;transform:rotate(-8deg)}

/* 곳곳의 스티커 기준점(10-21 오너 «스티커들이 곳곳에») */
.sec-head,.scene-copy,.fit-list li,.fit > .wrap > h2,.feats > .wrap > h2,.band-copy,.faq-head{position:relative}
.fit-list li{padding-right:130px}

/* ── 보드 벽 ─────────────────────────────────────────── */
.wall{padding:var(--sec) 0 40px;overflow:hidden}  /* 기울인 보드 줄의 아래 모서리 몫 40 — 다음 절까지 다른 절 사이와 같은 간격 */
.sec-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:56px}
.label{display:inline-block;margin:0 0 18px;padding:7px 12px 6px;background:var(--fg);color:var(--ink);font-size:14px;font-weight:800;line-height:1;transform:rotate(-2deg)}
.sec-head h2,.scene h2{font-size:clamp(40px,5.4vw,76px);line-height:1.05;margin:0}
.sec-head p{margin:0;font-size:18px;color:var(--fg-2);max-width:420px}
.rows{display:grid;gap:18px;transform:rotate(-3deg);margin:0 -40px}
.row{display:flex;gap:18px;width:max-content;animation:slide 70s linear infinite}
.row.rev{animation-direction:reverse;animation-duration:80s}
.row img{width:clamp(132px,13vw,196px);aspect-ratio:9/22;object-fit:cover;border-radius:16px;box-shadow:0 18px 36px rgba(0,0,0,.45)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── 꾸미기 장면 ──────────────────────────────────────── */
.scene{padding:var(--sec) 0 0}
.scene-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.scene-copy p{font-size:18px;color:var(--fg-2);margin:22px 0 0;max-width:380px}
.board{position:relative;width:min(100%,520px);margin:0 auto;aspect-ratio:2/3}
.board > .shot{position:absolute;inset:6% 6% 7%;width:auto;--r:2deg}
.board > .shot > img{height:100%;aspect-ratio:auto}

/* ── 이런 분께 ─────────────────────────────────────── */
.fit{padding:var(--sec) 0 0}
.fit h2{font-size:clamp(34px,4vw,52px);line-height:1.1;margin:0 0 30px}
.fit-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.fit-list li{display:flex;align-items:center;gap:clamp(18px,3vw,40px);padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line)}
.fit-list img:not(.stk){flex:none;width:clamp(72px,9vw,120px);aspect-ratio:1;object-fit:cover;border:5px solid #fff;box-shadow:0 14px 30px rgba(0,0,0,.4)}
.fit-list span{font-size:clamp(19px,2.2vw,28px);font-weight:700;line-height:1.35;letter-spacing:-.01em;text-wrap:balance}

/* ── 기능 칸(벤토) ────────────────────────────────────── */
.feats{padding:var(--sec) 0 0}
.feats > .wrap > h2{font-size:clamp(34px,4vw,52px);line-height:1.1;margin:0 0 40px}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:96px 48px;align-items:start}
.tile{position:relative;display:flex;flex-direction:column;min-width:0}
.tile h3{font-size:clamp(28px,2.6vw,38px);line-height:1.12;margin:0 0 10px}
.tile p{margin:0;color:var(--fg-2);font-size:16px;max-width:360px}
.tile .art{position:relative;margin-top:26px}
.span-2{grid-column:span 2}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-6{grid-column:span 6}
/* 앱 화면 조각 — 기능이 보이는 부분만, 잘림 없이 통째로 */
.crop{width:100%;border-radius:22px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 50px rgba(0,0,0,.45)}
.art.ui{aspect-ratio:16/12;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 50px rgba(0,0,0,.45)}
.art.ui .crop{height:100%;object-fit:cover;object-position:top;border-radius:0;box-shadow:none}
.art.ui.fit-in{display:grid;place-items:center}
.art.ui.fit-in .crop{height:auto}
/* 핀로그 — 가로 끝까지 닿는 사진 띠 */
.tile.band{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:32px 48px;align-items:end}
.pins{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pins figure{position:relative;margin:0;overflow:hidden;border-radius:16px;aspect-ratio:3/4.4;background:#000}
.pins img{width:100%;height:100%;object-fit:cover}
.pins figcaption{position:absolute;left:12px;top:10px;font-size:clamp(18px,1.8vw,26px);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}
/* 인화한 네컷 */
.art.print{margin:6px 0 26px}
/* 사진 반 · 글 반 */
.tile.wide{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.tile.wide .photo{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:2/2.9}
.tile.wide .photo img{width:100%;height:100%;object-fit:cover}
.tile.wide .txt .stk{position:relative;margin:0 0 18px -6px}
.dday{position:absolute;left:24px;bottom:20px;z-index:5;font-size:clamp(52px,5vw,84px);line-height:1;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.45)}

/* ── 자주 묻는 질문 ───────────────────────────────────── */
.faq{padding:var(--sec) 0 var(--sec)}
.faq-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:24px 64px}
.faq h2{font-size:clamp(34px,4vw,52px);line-height:1.1;margin:0}
.qa{border-top:1px solid var(--line)}
.qa > div{padding:24px 0;border-bottom:1px solid var(--line)}
.qa h3{margin:0 0 6px;font-size:18px;font-weight:700}
.qa p{margin:0;color:var(--fg-2);font-size:16px;max-width:620px}

/* ── 끝 ──────────────────────────────────────────────── */
.end{position:relative;padding:var(--sec) 0;text-align:center;overflow:hidden;border-top:1px solid var(--line)}
.end .icon{width:88px;height:88px;border-radius:24px;margin:0 auto 26px;position:relative;z-index:5}
.end h2{position:relative;z-index:5;font-size:clamp(40px,6.6vw,100px);line-height:1.05;margin:0 0 18px}
.end p{position:relative;z-index:5;margin:0;font-size:18px;color:var(--fg-2)}
.end .stores{position:relative;z-index:5;justify-content:center;margin-top:28px;padding:0 var(--gut)}
.end .stk{z-index:3}
.end .e1{--w:clamp(90px,12vw,170px);left:8%;top:18%}.end .e2{--w:clamp(70px,8vw,120px);right:10%;top:14%}
.end .e3{--w:clamp(90px,11vw,160px);left:7%;bottom:9%}.end .e4{--w:clamp(70px,8vw,120px);right:8%;bottom:10%}

/* ── 바닥(모든 페이지 같음) — 한 줄로 작게(10-21 오너 «너무 공간 많이 차지해 간단하게») ── */
.foot{border-top:1px solid var(--line);color:var(--fg-3);padding:40px 0 44px;font-size:14px}
.foot-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px 40px;flex-wrap:wrap}
.foot-mark img{width:auto;height:32px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-links a{color:var(--fg-2)}
.foot-links a:hover{color:var(--fg)}
.foot-meta{margin:0;text-align:right;line-height:1.6}

/* ── 약관·방침 ───────────────────────────────────────── */
.doc-head{padding:128px 0 40px}
.doc-head .eyebrow{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--fg-3)}
.doc-head h1{font-size:clamp(40px,5.6vw,76px);line-height:1.05;margin:0 0 28px}
.doc-head .stk{z-index:1}
.doc-head .head-doodle{--w:clamp(70px,9vw,128px);right:var(--gut);top:-12px;--r:10deg}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tabs a{padding:9px 16px;border-radius:999px;font-size:14.5px;font-weight:700;color:var(--fg-2);border:1px solid var(--line)}
.tabs a:hover{color:var(--fg);border-color:rgba(244,241,236,.3)}
.tabs a[aria-current="page"]{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.doc-wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start;padding-bottom:100px}
.toc{position:sticky;top:96px;font-size:14px}
.toc h4{margin:0 0 10px;font-size:13px;color:var(--fg-3);font-weight:700}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;color:var(--fg-3);line-height:1.45}
.toc a:hover{color:var(--fg)}
.toc a.on{color:var(--fg);font-weight:700;border-left-color:var(--lime)}
.toc-m{display:none}
.article{position:relative;background:var(--paper);color:var(--ink);border-radius:24px;padding:74px 60px 60px;font-size:16px;line-height:1.85;min-width:0}
.article > .tape{top:-30px;left:44px;--w:120px;--r:-4deg}
.article > .tape + .tape{left:auto;right:52px;--r:5deg}
.article h2{font-size:21px;line-height:1.4;margin:48px 0 12px;scroll-margin-top:96px}
.article > p:first-of-type{margin-top:0}
.article h3{font-size:17px;margin:28px 0 8px;scroll-margin-top:96px}
.article p{margin:10px 0}
.article ul,.article ol{margin:10px 0;padding-left:22px}.article li{padding:2px 0}
.article a{color:#1C55D8;text-decoration:underline;text-underline-offset:3px}
.article strong{font-weight:700}
.article .tbl{margin:14px 0;border:1px solid #E7E2DA;border-radius:14px;overflow-x:auto}
.article table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.6}
.article th,.article td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid #E7E2DA;min-width:5.5em}
.article th{background:#F6F3EE;font-weight:700;white-space:nowrap}
.article tr:last-child td{border-bottom:0}
.article td + td,.article th + th{border-left:1px solid #E7E2DA}
.draft{background:#FFF4D6;border:1px solid #E8C56A;border-radius:14px;padding:12px 16px;margin:0 0 22px;font-size:14px}

/* ── 좁은 화면 ───────────────────────────────────────── */
/* 본문 안 빈자리 스티커(10-21) — 쌓이는 화면(960 이하)에선 자리가 없다 · 제목 위는 창이 낮으면 메뉴 밑으로 들어가 숨김 */
@media (max-height:740px){.deco-h{display:none}}
@media (max-width:960px){
  .deco-m{display:none}
  .nav-links a{display:none}
  .hero{padding:96px 0 40px;min-height:0}
  .hero-in{grid-template-columns:1fr;gap:40px}
  .collage{width:min(100%,560px);margin:0 auto}
  .sec-head,.scene-in,.faq-in{grid-template-columns:1fr}
  .sec-head{margin-bottom:40px}
  .rows{gap:12px}.row{gap:12px}
  .scene-in{gap:40px}
  .bento{grid-template-columns:1fr}
  .span-2,.span-3,.span-4,.span-6{grid-column:auto}
  .bento{gap:72px}
  .tile.band,.tile.wide{grid-template-columns:1fr;gap:24px}
  .tile.wide .photo{aspect-ratio:4/3.4}
  .art.ui.fit-in{aspect-ratio:auto;padding:28px 0}
  .pins{gap:5px}.pins figure{border-radius:12px}
  .art.print{max-width:300px;margin-left:auto;margin-right:auto}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:0 var(--gut)}
  .tabs a{white-space:nowrap}
  .doc-head{padding:104px 0 28px}
  .doc-head .head-doodle{--w:54px;top:-38px}
  .doc-wrap{grid-template-columns:1fr;gap:14px}
  .foot-in{flex-direction:column;align-items:flex-start}
  .foot-meta{text-align:left}
  .toc{display:none}
  .toc-m{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:2px 20px;font-size:15px}
  .toc-m summary{cursor:pointer;padding:14px 0;font-weight:700;list-style:none}
  .toc-m summary::-webkit-details-marker{display:none}
  .toc-m summary::after{content:"＋";float:right;color:var(--fg-3)}
  .toc-m[open] summary::after{content:"－"}
  .toc-m ol{margin:0 0 14px;padding-left:18px;color:var(--fg-2)}
  .toc-m li{padding:5px 0}
  .article{padding:62px 22px 38px;border-radius:20px;font-size:16px}
  .article > .tape{left:22px;--w:96px}.article > .tape + .tape{right:22px}
}
@media (max-width:560px){
  .deco-s{display:none}
  .fit-list li{padding-right:0}
  .store{--bh:48px;--sw:auto;flex:1;font-size:15px}
  .end{padding-top:calc(var(--sec) + 60px)}
  .end .e1{--w:92px;left:6%;top:36px}.end .e2{--w:64px;right:8%;top:46px}
  .end .e3,.end .e4{display:none}
}
@media (prefers-reduced-motion:reduce){
  .lane .stk{animation:none}
  .js .rise{opacity:1;translate:none;transition:none}
  .js .shot.drop,.shot,.row img,.fit-list img:not(.stk){transition:none}
  .js .pop,.js .drop,.js .draw{opacity:1;transform:rotate(var(--r,0deg));clip-path:none;transition:none}
  .row{animation:none}
}