@charset "utf-8";
/* ETHER 홍보사이트 (index.html) · 05 EXPERIENCE · 앱 화면 캐러셀 — index.html 에 적힌 순서대로 불러온다 */
/* ============ ANALYSIS ============ */
.analysis{padding:var(--sp-9) 0;background:var(--bg-2);transition:background .5s}
.ana-in{display:grid;grid-template-columns:1fr 400px;gap:var(--sp-8);align-items:center}
.ana-copy .eyebrow{margin-bottom:var(--sp-5)}
.ana-copy h2{font-family:var(--serif);font-weight:var(--fw-d2);font-size:var(--fd-t);line-height:1.3;letter-spacing:var(--ls-d2);margin-bottom:var(--sp-5)}
.ana-copy .lead{font-weight:var(--fw-d5);font-size:var(--fs-5);font-family:var(--serif);color:var(--cobalt-t);margin-bottom:var(--sp-4);letter-spacing:var(--ls-d5)}
.ana-copy p{color:var(--ink-2);font-size:var(--fs-4);line-height:1.75}
.ana-copy h2 em{font-style:normal;color:var(--cobalt-t)}
/* 두 문장이 각각 한 줄에 들어가도록 글자 크기를 글 칸 폭(cqi)에 맞춘다. 줄 높이(1.3)는 그대로.
   긴 줄(에테르 앱에서 … 발견하세요.)이 약 18.6em → 4.8cqi 면 칸의 약 89% 를 쓴다. 상한은 원래 제목 크기 */
.ana-copy{container-type:inline-size}
.ana-copy h2{font-size:min(var(--fd-t),4.8cqi);white-space:nowrap}
/* 앱 사용 4단계 — 옛 '경험의 흐름' 카드를 목록으로 접어 앱 화면 옆에 둔다.
   앱 화면이 넘어가면 그 단계(li.on)가 블루로 켜진다 */
.ana-steps{list-style:none;margin:var(--sp-6) 0 0;padding:0;border-top:1px solid var(--line)}
/* 한눈에 4단계가 다 보이게 — 제목·설명 두 줄을 붙여(줄높이 1.35·1.45, 줄 사이 1px) 한 덩어리로 읽히게 한다 */
.ana-steps li{display:grid;grid-template-columns:40px 1fr;column-gap:var(--sp-3);row-gap:1px;
  padding:14px 36px 14px 0;border-bottom:1px solid var(--line);
  position:relative;isolation:isolate;cursor:pointer;
  /* 진행 막대 : 활성 단계의 밑줄이 다음 화면까지 남은 시간만큼 차오른다 (.run, JS 가 붙인다) */
  /* 막대는 밑 구분선(border-bottom) 위에 겹쳐 그린다 — border-box 기준이라 선 자리부터 위로 2px */
  background:linear-gradient(var(--cobalt),var(--cobalt)) no-repeat left bottom / 0 2px border-box border-box}
/* '누르면 오른쪽 화면이 바뀐다' 암시 ①: 줄 끝의 › — 휴대폰 쪽을 가리킨다 */
.ana-steps li::after{content:"";position:absolute;right:10px;top:50%;width:8px;height:8px;margin-top:-4px;
  border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg);
  color:var(--ink-3);opacity:.45;transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .3s,color .3s}
/* 암시 ②: 호버하면 줄 전체가 버튼처럼 밝아진다 (좌우로 살짝 넘쳐 글자 정렬은 그대로) */
/* 위아래 구분선까지 틈 없이 꽉 채운다 (예전 inset 1px · 2px 이 선 옆에 얇은 틈으로 보였다) — 모서리 8px : 선과 만나는 귀퉁이 틈이 거의 안 보이는 크기
   진행 막대(.run)가 도는 줄만 밑 1px 을 비워 막대를 덮지 않는다 (막대 2px = 구분선 1px + 그 위 1px) */
.ana-steps li::before{content:"";position:absolute;inset:0 -12px;z-index:-1;border-radius:8px;
  background:rgba(255,255,255,.5);opacity:0;transition:opacity .25s}
.ana-steps li.run::before{bottom:1px}
.ana-steps li:hover::before,.ana-steps li:focus-visible::before{opacity:1}
.ana-steps li:hover b{color:var(--cobalt-t)}
.ana-steps li:hover::after,.ana-steps li.on::after{opacity:1;color:var(--cobalt-t);transform:translateX(4px) rotate(45deg)}
.ana-steps li:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:var(--r-1)}
/* 암시 ③: 진행 막대. 휴대폰에 마우스를 올려 자동 넘김이 멈추면 막대도 멈춘다(.paused) */
.ana-steps li.run{animation:stepBar var(--step-dur,3.4s) linear forwards}
.ana-steps.paused li.run{animation-play-state:paused}
@keyframes stepBar{to{background-size:100% 2px}}
@media(prefers-reduced-motion:reduce){.ana-steps li.run{animation:none}.ana-steps li::after{transition:none}}
.ana-steps .n{grid-row:span 2;padding-top:3px;font-family:var(--mono);font-size:var(--fs-2);letter-spacing:.1em;color:var(--ink-3);transition:color .3s}
.ana-steps b{font-family:var(--serif);font-weight:var(--fw-d5);font-size:var(--fs-4);line-height:1.35;letter-spacing:var(--ls-d5);color:var(--ink);transition:color .3s}
.ana-steps .d{font-size:var(--fs-3);line-height:1.45;color:var(--ink-2);word-break:keep-all}
.ana-steps li.on .n,.ana-steps li.on b{color:var(--cobalt-t)}
/* phone */
.phone{
  width:320px;margin:0 auto;background:var(--ink);border-radius:var(--r-device);padding:var(--sp-3);
  box-shadow:var(--shadow-lg);position:relative;
}
.phone-screen{background:var(--bg);border-radius:var(--r-screen);padding:var(--sp-5) var(--sp-5);min-height:560px;overflow:hidden}
.ps-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-5)}
.ps-top .mono{font-size:var(--fs-1);color:var(--ink-3);letter-spacing:.1em}
.ps-title{font-weight:var(--fw-d4);font-family:var(--serif);font-size:var(--fs-7);margin-bottom:var(--sp-1);letter-spacing:var(--ls-d4)}
.ps-cap{font-family:var(--mono);font-size:var(--fs-1);color:var(--ink-3);letter-spacing:.1em;margin-bottom:var(--sp-5)}
.bar-row{margin-bottom:var(--sp-4)}
.bar-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--sp-2)}
.bar-el{font-weight:var(--fw-d5);font-family:var(--serif);font-size:var(--fs-4);letter-spacing:var(--ls-d5)}
.bar-score{font-family:var(--mono);font-size:var(--fs-2);color:var(--ink-2)}
.bar-track{height:8px;background:var(--line);border-radius:var(--r-full);overflow:hidden}
.bar-fill{height:100%;border-radius:var(--r-full);width:0;transition:width 1.1s cubic-bezier(.22,1,.36,1)}
/* 03 : 사주 원국 여덟 글자 — 열 배치는 오른쪽(年)에서 왼쪽(時)으로 */
.ps-bazi{margin-bottom:var(--sp-4)}
.bz-hdr{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding-bottom:var(--sp-2);
  font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.16em;color:var(--ink-3)}
.bz-cells{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.bz-c{
  aspect-ratio:1/.70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-0);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;color:var(--c,var(--ink));
}
.bz-c:nth-child(4n){border-right:0}
.bz-c:nth-child(n+5){border-bottom:0}
.bz-c b{font-family:var(--serif);font-weight:var(--fw-d4);font-size:var(--fs-6);line-height:1;color:color-mix(in srgb, var(--c) 62%, var(--ink));letter-spacing:var(--ls-d4)}
.bz-c i{font-family:var(--mono);font-style:normal;font-size:var(--fs-1);letter-spacing:.08em;color:var(--ink-3)}
.bz-c.self{background:color-mix(in srgb,var(--c) 9%,transparent)}
.bz-c.self::after{content:"";position:absolute;left:18px;right:18px;bottom:5px;height:2px;background:currentColor;border-radius:var(--r-1)}
.bz-c.na{color:var(--ink-3)}
/* 원국이 들어온 만큼 아래 막대는 압축 */
.ps-slide[data-no="03"] .ps-top{margin-bottom:var(--sp-4)}
.ps-slide[data-no="03"] .ps-title{font-size:var(--fs-6)}
.ps-slide[data-no="03"] .ps-cap{margin-bottom:var(--sp-3)}
.ps-slide[data-no="03"] .bar-row{margin-bottom:var(--sp-2)}
.ps-slide[data-no="03"] .bar-top{margin-bottom:var(--sp-1)}
.ps-slide[data-no="03"] .bar-el{font-size:var(--fs-3)}
.ps-slide[data-no="03"] .bar-track{height:6px}
.ps-slide[data-no="03"] .diag{margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4)}
.ps-slide[data-no="03"] .diag p{font-size:var(--fs-2);line-height:1.5}
.ps-slide[data-no="03"] .diag .mono{margin-bottom:var(--sp-1)}

.diag{
  margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-4);border-radius:var(--r-s);
  background:var(--water-s);border:1px solid var(--line);
}
.diag .mono{font-size:var(--fs-1);letter-spacing:.12em;color:var(--water-t);margin-bottom:var(--sp-2)}
.diag p{font-size:var(--fs-3);line-height:1.6}

/* ---- mobile app carousel ---- */
.phone-stage{position:relative;aspect-ratio:390/844;border-radius:var(--r-screen);overflow:hidden;background:var(--bg)}
.ps-slide{position:absolute;inset:0;height:100%;display:flex;flex-direction:column;
  opacity:0;transform:translateX(28px) scale(.985);
  transition:opacity .55s ease, transform .6s cubic-bezier(.22,1,.36,1);pointer-events:none}
.ps-slide.is-active{opacity:1;transform:none;pointer-events:auto}
/* Figma 앱 시안 이미지. 긴 시안은 --pan 만큼 내려가고, 비활성이 되면 페이드가 끝난 뒤 맨 위로 돌아간다 */
.ps-shot{background:#fff;overflow:hidden}
.ps-shot img{display:block;width:100%;height:auto;transform:none;transition:transform 0s .6s}
/* 켜지면 맨 위에서 1.5초 머물렀다가 3초에 걸쳐 내려간다 (한 장 머무는 시간은 js/main/sections.js PAN_DUR — 아래에서도 1.5초 보여 준다) */
.ps-shot.is-active img{transform:translateY(var(--pan,0));transition:transform 3s cubic-bezier(.45,0,.25,1) 1.5s}
@keyframes phspin{to{transform:rotate(360deg)}}

/* home slide */
/* HOME : 織 — 다섯 기운이 잡아당기는 직조면 */
.ps-orbit{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);min-height:0}
.ps-weave{
  position:relative;width:236px;height:236px;flex:0 0 auto;border-radius:50%;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 120% at 50% 0%,#ffffff 0%,var(--bg-2) 60%,#CBE5FF 100%);
}
.ps-weave svg{position:absolute;inset:0;width:100%;height:100%}
.ps-weave::after{                      /* 직물의 그레인 */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;mix-blend-mode:multiply;opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.wv-light{mix-blend-mode:screen;opacity:.55}
.ps-weave-cap{font-size:var(--fs-1);letter-spacing:.24em;color:var(--ink-3);flex:0 0 auto}

.ps-cta{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);height:52px;border-radius:var(--r-full);
  background:var(--ink);color:var(--bg);font-size:var(--fs-3);font-weight:500;flex:0 0 auto;margin-top:var(--sp-2)}
.ps-cta svg{width:16px;height:16px}

/* input slide */
.ps-field{display:flex;align-items:baseline;justify-content:space-between;padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.ps-field .fk{font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.14em;color:var(--ink-3)}
.ps-field .fv{font-weight:var(--fw-d4);font-family:var(--serif);font-size:var(--fs-7);letter-spacing:var(--ls-d4)}
.ps-field .fv small{font-family:var(--mono);font-size:var(--fs-2);color:var(--ink-3);margin-left:var(--sp-2)}
.ps-pv{margin-top:auto;padding-top:var(--sp-5)}
.ps-pv .pl{font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.12em;color:var(--ink-3);margin-bottom:var(--sp-3)}
.ps-pv .pv-bars{display:flex;gap:var(--sp-2)}
.ps-pv .pv-bars i{flex:1;height:6px;border-radius:var(--r-full);opacity:.6}

/* result slide */
.ps-orb{position:relative;flex:1;display:grid;place-items:center;min-height:0;margin:var(--sp-1) 0}
.ps-orb .glyph{font-weight:var(--fw-d1);font-family:var(--serif);font-size:var(--fg-2);line-height:1;color:var(--fire-t);opacity:.14;position:absolute;letter-spacing:var(--ls-d1)}
.ps-orb .ball{width:126px;height:126px;position:relative;z-index:2;
  background-image:var(--orb-fire);background-size:contain;background-position:center;background-repeat:no-repeat;
  filter:drop-shadow(0 18px 32px rgba(180,38,12,.38));
  animation:coreBreath 8.4s ease-in-out infinite}
.ps-read{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-4) 0;border-top:1px solid var(--line)}
.ps-read .rk{font-family:var(--mono);font-size:var(--fs-2);letter-spacing:.06em;color:var(--ink-2)}
.ps-read .rv{display:flex;align-items:baseline;gap:var(--sp-2)}
.ps-read .rv .he{font-weight:var(--fw-d4);font-family:var(--serif);font-size:var(--fs-6);letter-spacing:var(--ls-d4);color:color-mix(in srgb, var(--ec) 66%, var(--ink))}
.ps-read .rv .sc{font-family:var(--mono);font-size:var(--fs-2);color:var(--ink-2)}

/* curation slide */
.ps-rec{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) 0;border-top:1px solid var(--line)}
.ps-rec-th{font-weight:var(--fw-d4);width:58px;height:58px;border-radius:var(--r-2);display:grid;place-items:center;font-family:var(--serif);font-size:var(--fs-7);color:#fff;flex:0 0 auto;letter-spacing:var(--ls-d4)}
.ps-rec .rn{font-weight:var(--fw-d5);font-family:var(--serif);font-size:var(--fs-4);margin-bottom:var(--sp-0);letter-spacing:var(--ls-d5)}
.ps-rec .rp{font-family:var(--mono);font-size:var(--fs-2);color:var(--ink-2)}
.ps-badge{margin-left:auto;align-self:center;font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.08em;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-full);white-space:nowrap}
.ps-badge.rec{background:var(--cobalt-soft);color:var(--cobalt-t)}
.ps-badge.buy{background:var(--line-2);color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){.ps-slide{transition:none}.wv-light{display:none}.ps-shot img,.ps-shot.is-active img{transform:none;transition:none}}