/* ============================================================
   스토밍컬쳐 공용 스타일 — site.css (v7, 애플 감성)
   세로 스크롤 · 중앙 정렬 대형 타이포 · 둥근 타일 · 은은한 리빌.
   회사 대표색 주황, 로고만 원래 색. 지금퐁당 페이지는 드랍 블루.
   금지: 그라데이션 배경 / 카드마다 그림자 / 대문자 라벨 / → 버튼
   ============================================================ */

:root{
  --bg:#FFFFFF;
  --bg2:#F5F5F7;                 /* 옅은 회색 밴드 */
  --ink:#1D1D1F;
  --dim:#6E6E73;
  --hair:rgba(0,0,0,.10);
  --accent:#FF6A13;
  --accent-deep:#E85800;
  --white:#FFFFFF;
  --max:1040px;
  --maxw:1280px;
  --nav-h:52px;
  --r:28px;                      /* 타일 라운드 */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
::selection{background:var(--accent);color:var(--white)}

body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  color:var(--ink);background:var(--bg);
  font-size:17px;line-height:1.5;letter-spacing:-0.012em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
h1,h2,h3,h4{word-break:keep-all;font-weight:700;letter-spacing:-0.02em;line-height:1.07}
p{word-break:keep-all}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.wrap.wide{max-width:var(--maxw)}
main{padding-top:var(--nav-h)}
section{padding:clamp(88px,10vw,140px) 0}
.band{background:var(--bg2)}
.center{text-align:center}

/* ---------- 타이포 ---------- */
.hero-title{font-size:clamp(44px,6.4vw,92px);line-height:1.04;letter-spacing:-0.025em}
.sec-title{font-size:clamp(32px,4.4vw,64px);letter-spacing:-0.022em}
.eyebrow{
  display:block;font-size:clamp(17px,1.4vw,21px);font-weight:600;
  color:var(--accent);margin-bottom:14px;letter-spacing:-0.01em;
}
.sub{
  margin:clamp(18px,2vw,26px) auto 0;
  font-size:clamp(18px,1.7vw,25px);font-weight:500;line-height:1.45;
  color:var(--dim);max-width:30em;
}

/* ---------- 리빌 (은은하게) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.25,.1,.25,1),transform .8s cubic-bezier(.25,.1,.25,1);
  transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ---------- 네비 (반투명 블러) ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav-h);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair);
}
.nav .inner{
  max-width:var(--max);height:100%;margin:0 auto;padding:0 clamp(20px,4vw,40px);
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center}
.logo img{height:20px;width:auto;display:block}
.nav ul{display:flex;gap:32px;list-style:none;font-weight:500;font-size:13px}
.nav ul a{color:rgba(29,29,31,.72);transition:color .2s}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--ink)}
@media (max-width:640px){.nav ul{gap:20px;font-size:12px}.logo img{height:17px}}

/* 언어 선택 */
.navr{display:flex;align-items:center;gap:26px}
.lang select{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;
  font:inherit;font-size:13px;font-weight:500;color:rgba(29,29,31,.72);
  padding:4px 16px 4px 20px;border-radius:6px;cursor:pointer;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236E6E73' stroke-width='1.3'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M1.8 8h12.4M8 1.8c1.9 1.7 2.8 3.8 2.8 6.2S9.9 12.5 8 14.2C6.1 12.5 5.2 10.4 5.2 8S6.1 3.5 8 1.8z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%236E6E73' stroke-width='1.3'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:left center,right center;
  background-size:14px 14px,9px 6px;
}
.lang select:hover{color:var(--ink)}
@media (max-width:640px){.navr{gap:14px}.lang select{font-size:12px;padding-left:18px;padding-right:13px}}

/* 중국어·일본어: 글꼴과 줄바꿈 (keep-all은 띄어쓰기 없는 언어에서 줄이 안 꺾여 넘친다) */
:lang(zh) body{font-family:"Pretendard Variable",Pretendard,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif}
:lang(ja) body{font-family:"Pretendard Variable",Pretendard,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP","Noto Sans CJK JP",sans-serif}
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3,:lang(zh) h4,:lang(zh) p,
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3,:lang(ja) h4,:lang(ja) p{word-break:normal;line-break:strict}

/* 복사 버튼 */
.btn.copy{border:0;cursor:pointer;font-family:inherit;display:inline-grid;justify-items:center}
.copy > span{grid-area:1 / 1}
.copy .done{visibility:hidden}
.copy.copied .addr{visibility:hidden}
.copy.copied .done{visibility:visible}
.copy-hint{margin-top:14px;font-size:13px;color:var(--dim)}

/* ---------- 버튼 · 링크 ---------- */
.btn{
  display:inline-block;padding:13px 26px;border-radius:999px;
  background:var(--accent);color:var(--white);
  font-size:17px;font-weight:500;letter-spacing:-0.01em;
  transition:background .2s ease,transform .2s ease;
}
.btn:hover{background:var(--accent-deep)}
.btn:active{transform:scale(.98)}
.tlink{
  display:inline-block;font-size:17px;font-weight:500;color:var(--accent);
}
.tlink:hover{text-decoration:underline}
.actions{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:clamp(24px,3vw,36px)}

/* ---------- 타일 (벤토) ---------- */
.tiles{
  display:grid;gap:18px;margin-top:clamp(36px,4.5vw,56px);
  grid-template-columns:repeat(2,1fr);
}
.tiles.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.tiles,.tiles.three{grid-template-columns:1fr}}
.tile{
  background:var(--bg2);border-radius:var(--r);
  padding:clamp(30px,3.6vw,48px);
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  transition:transform .35s cubic-bezier(.25,.1,.25,1);
}
section.band .tile{background:var(--bg)}
a.tile:hover{transform:scale(1.015)}
.tile h3{font-size:clamp(22px,2.4vw,34px)}
.tile .big{font-size:clamp(30px,3.4vw,52px);font-weight:700;letter-spacing:-0.025em}
.tile p{color:var(--dim);font-size:clamp(15px,1.2vw,19px);line-height:1.5}
.tile .tag{font-size:13px;font-weight:600;color:var(--dim)}
.tile .tlink{margin-top:auto;padding-top:14px}
.tile.hero-tile{grid-column:1 / -1;align-items:center;text-align:center;padding:clamp(48px,6vw,88px)}
.tile.muted h3,.tile.muted .big{color:var(--dim)}

/* ---------- 스펙 리스트 (조용한 표) ---------- */
.spec{max-width:720px;margin:clamp(36px,4.5vw,56px) auto 0;border-top:1px solid var(--hair)}
.spec > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:18px 4px;border-bottom:1px solid var(--hair);
}
.spec b{font-size:clamp(17px,1.4vw,21px);font-weight:600}
.spec span{color:var(--dim);font-size:clamp(14px,1.1vw,17px);text-align:right}

/* ---------- 마퀴 (차분하게) ---------- */
.marquee{overflow:hidden;white-space:nowrap;padding:clamp(20px,2.6vw,34px) 0}
.marquee .track{
  display:inline-flex;gap:64px;padding-right:64px;
  font-size:clamp(24px,3vw,44px);font-weight:700;letter-spacing:-0.02em;
  color:rgba(29,29,31,.16);
  animation:mq 44s linear infinite;
}
.marquee i{font-style:normal;color:rgba(255,106,19,.45)}
@keyframes mq{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* ---------- 커스텀 커서 (데스크톱) ---------- */
body.cursorless, body.cursorless *{cursor:none !important}
.cursor,.cursor-dot{position:fixed;left:0;top:0;z-index:80;pointer-events:none;opacity:0;transition:opacity .3s ease}
.cursor{
  width:26px;height:26px;margin:-13px 0 0 -13px;
  border:1.5px solid var(--accent);border-radius:50%;
  transition:width .28s cubic-bezier(.25,.1,.25,1),height .28s cubic-bezier(.25,.1,.25,1),
             margin .28s cubic-bezier(.25,.1,.25,1),background .28s ease,opacity .3s ease;
}
.cursor-dot{width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--accent)}
.cursor.on,.cursor-dot.on{opacity:1}
.cursor.big{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(255,106,19,.10)}
@media (hover:none),(pointer:coarse){
  .cursor,.cursor-dot{display:none}
  .cursor.touch{display:block;transition:opacity .2s ease}
  body.cursorless, body.cursorless *{cursor:auto !important}
}

/* ---------- 푸터 ---------- */
footer{background:var(--bg2);border-top:1px solid var(--hair);padding:26px 0 40px;font-size:12px;color:var(--dim)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer a:hover{color:var(--ink);text-decoration:underline}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}

/* ---------- 회사 원칙 아이콘 (글 대신 움직임) ---------- */
.pr{width:72px;height:72px;margin-bottom:8px;overflow:visible}
.pr rect,.pr circle{fill:rgba(29,29,31,.16);transform-box:fill-box;transform-origin:50% 50%}
.pr .odd{fill:var(--accent)}
/* 1 불편을 발견한다: 어긋난 조각이 제자리로 */
.pr1 .odd{transform:translate(5px,-4px) rotate(14deg)}
.pr1.play .odd{animation:pr-snap .8s cubic-bezier(.2,1,.3,1) .35s both}
@keyframes pr-snap{from{transform:translate(5px,-4px) rotate(14deg)}to{transform:none}}
/* 2 직접 만든다: 아래부터 쌓인다 */
.pr2 rect{transform:scaleY(0);transform-origin:50% 100%}
.pr2.play .b1{animation:pr-grow .45s cubic-bezier(.2,1,.3,1) .1s both}
.pr2.play .b2{animation:pr-grow .45s cubic-bezier(.2,1,.3,1) .32s both}
.pr2.play .b3{animation:pr-grow .45s cubic-bezier(.2,1,.3,1) .54s both}
@keyframes pr-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* 3 문화로 남긴다: 한 점이 물결로 퍼진다 */
.pr3 .r1,.pr3 .r2{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:0}
.pr3.play .r1{animation:pr-ripple 1.6s ease-out .2s 2}
.pr3.play .r2{animation:pr-ripple 1.6s ease-out .8s 2}
@keyframes pr-ripple{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.4);opacity:0}}
/* 4 사람과 AI가 한 팀: 둘이 겹쳐 하나가 된다 */
.pr4 .c1,.pr4 .c2{fill:none;stroke-width:2.2}
.pr4 .c1{stroke:rgba(29,29,31,.35);transform:translateX(-13px)} .pr4 .c2{stroke:var(--accent);transform:translateX(13px)}
.pr4.play .c1{animation:pr-meet-l .9s cubic-bezier(.2,1,.3,1) .25s both}
.pr4.play .c2{animation:pr-meet-r .9s cubic-bezier(.2,1,.3,1) .25s both}
@keyframes pr-meet-l{from{transform:translateX(-13px)}to{transform:translateX(-5px)}}
@keyframes pr-meet-r{from{transform:translateX(13px)}to{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){
  .pr *{animation:none !important}
  .pr1 .odd{transform:none}.pr2 rect{transform:none}.pr4 .c1{transform:translateX(-5px)}.pr4 .c2{transform:translateX(5px)}
}

/* ---------- 숫자 카운트업 ---------- */
.num{font-variant-numeric:tabular-nums}

/* 아주 좁은 화면(≤380px): 네비가 로고와 겹치지 않게 */
@media (max-width:380px){
  .nav ul{gap:12px}
  .navr{gap:10px}
  .lang select{font-size:11px;padding-left:16px;padding-right:11px}
}

/* ---------- 바람 글자 화면 (홈·서비스) ----------
   한 화면에 끝난다: 스크롤 없이 글자·아래 요소·푸터가 다 보인다 */
body.wind-page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
body.wind-page main{flex:1;display:flex;flex-direction:column}
.wind-stage{position:relative;flex:1;min-height:420px;overflow:hidden;padding:0;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.wind-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wind-stage [data-below],.wind-stage [data-above]{position:absolute;z-index:2;opacity:0;transition:opacity 1s ease .8s}
.wind-stage [data-below].in,.wind-stage [data-above].in{opacity:1}
.wind-stage .meta{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;font-size:12px;color:var(--dim);
  pointer-events:none;transition:opacity .6s ease;white-space:nowrap}
.wind-stage .meta.gone{opacity:0}
/* 스크린리더용 문장 (자바스크립트가 없으면 글자로 보여준다) */
.said{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.said a:focus-visible{outline:none}
.said:focus-within{position:absolute;left:clamp(20px,4vw,40px);top:16px;width:auto;height:auto;clip-path:none;z-index:5;
  font-size:15px;background:var(--bg);padding:6px 10px;border-radius:8px;outline:2px solid var(--accent)}
html:not(.js) .said{position:static;width:auto;height:auto;clip-path:none;white-space:normal;
  max-width:var(--max);margin:0 auto;padding:30vh clamp(20px,4vw,40px) 0;font-size:clamp(34px,5.2vw,80px);letter-spacing:-0.035em}
html:not(.js) .wind-stage [data-below]{opacity:1;left:clamp(20px,4vw,40px);top:62%}