/* ===================================================================== PIGENT — Liquid Glass --------------------------------------------------------------------- 유리를 3겹으로 쌓아 만듭니다. 1) 굴절층 — SVG feDisplacementMap이 뒤 배경을 실제로 휘게 합니다. 진짜 두꺼운 유리처럼 뒤가 미묘하게 일그러집니다. 2) 재질층 — 유리 자체의 색과 두께 (그라디언트 + 내부 그림자) 3) 반사층 — 테두리를 따라 도는 정반사와 손끝을 따라오는 하이라이트 성능은 "끄는" 대신 "맞추는" 방식입니다. 기기 성능을 보고 등급을 정하고, 실제 프레임을 재서 느려지면 자동으로 한 단계 내립니다. (아래 quality 참고) ===================================================================== */ /* 색은 glass.css 가 정합니다. 여기서는 예전 이름만 그 위에 이어 붙입니다. */ :root{ --void:var(--bg); --lumen:var(--ink); --lumen-2:var(--ink-2); --lumen-3:var(--ink-3); --lumen-4:var(--ink-4); --brand-lift:var(--brand); --iris-lift:var(--iris); --logo:url("data:image/png;base64,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"); --blur:20px; /* opacity(1) 은 아무것도 바꾸지 않는 자리지킴입니다. 여기에 none 을 두면 backdrop-filter: none blur(...) 이 되는데, CSS 에서 none 은 단독으로만 쓸 수 있어서 선언 전체가 무효가 됩니다. 그래서 굴절을 못 쓰는 기기에서는 흐림까지 통째로 꺼져 있었습니다. */ --refract: opacity(1); --spring:cubic-bezier(.16,1,.3,1); --swift:cubic-bezier(.4,0,.2,1); --r-lg:30px; --r-xl:40px; --gutter:clamp(18px,5vw,40px); --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px); } *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth; scroll-padding-top:120px; -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ background:var(--void); color:var(--lumen); font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont, 'SF Pro Text','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif; font-weight:450; line-height:1.65; min-height:100svh; overflow-x:clip; position:relative; } ::selection{ background:rgba(124,107,255,.4); color:var(--ink); } a{ color:inherit; text-decoration:none; } button,input,textarea{ font:inherit; color:inherit; } button{ cursor:pointer; background:none; border:none; -webkit-appearance:none; appearance:none; } img{ display:block; max-width:100%; } :focus-visible{ outline:2px solid var(--iris-lift); outline-offset:3px; border-radius:8px; } /* 로고 — base64를 CSS 변수에 한 번만 담아 모든 곳에서 재사용합니다. 이전 버전은 같은 base64가 HTML에 6번 반복돼 있었고, 파일 경로로 바꿨더니 경로가 안 맞는 환경에서 아예 사라졌습니다. 이 방식은 둘 다 해결합니다. */ .mark{ background-image:var(--logo); background-size:contain; background-repeat:no-repeat; background-position:center; aspect-ratio:298/250; /* 원본 비율 — 정사각형에 넣으면 눌려 보입니다 */ flex:none; display:block; } /* SVG 필터 정의는 화면에 보이지 않게 숨깁니다 */ .lq-defs{ position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; } /* --------------------------------------------------------------------- 1. 환경 광원 --------------------------------------------------------------------- */ .env{ position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--void); } .env i{ position:absolute; display:block; border-radius:50%; filter:blur(60px); /* 정지 상태라 한 번만 계산됩니다 */ opacity:.55; } .env .g1{ width:62vw; height:52vw; left:-12vw; top:-18vw; background:radial-gradient(circle,rgba(0,169,79,.55),transparent 68%); } .env .g2{ width:56vw; height:48vw; right:-12vw; top:-6vw; background:radial-gradient(circle,rgba(124,107,255,.6),transparent 68%); } .env .g3{ width:70vw; height:54vw; left:14vw; bottom:-24vw; background:radial-gradient(circle,rgba(63,216,232,.4),transparent 70%); } .env .g4{ width:42vw; height:38vw; right:6vw; bottom:14vw; background:radial-gradient(circle,rgba(255,107,150,.34),transparent 70%); } /* 고사양 기기에서만 아주 느리게 떠다닙니다. transform만 바꾸므로 합성기에서 처리됩니다. */ .q-high .env i{ will-change:transform; } .q-high .env .g1{ animation:drift1 64s ease-in-out infinite; } .q-high .env .g2{ animation:drift2 78s ease-in-out infinite; } .q-high .env .g3{ animation:drift1 92s ease-in-out infinite reverse; } @keyframes drift1{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(4%,3%,0); } } @keyframes drift2{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(-5%,4%,0); } } .grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------------- 2. 유리 (.lg) --------------------------------------------------------------------- */ .lg{ position:relative; isolation:isolate; border-radius:var(--r-lg); background: linear-gradient(150deg, rgba(var(--surf-rgb),.15) 0%, rgba(var(--surf-rgb),.05) 34%, rgba(var(--surf-rgb),.03) 62%, rgba(var(--surf-rgb),.09) 100%); backdrop-filter:var(--refract) blur(var(--blur)) saturate(190%) brightness(1.10); -webkit-backdrop-filter:var(--refract) blur(var(--blur)) saturate(190%) brightness(1.10); box-shadow: 0 32px 72px -24px rgba(0,0,0,.82), /* 주변광 */ 0 4px 12px -3px rgba(0,0,0,.5), /* 접지 */ inset 0 1.5px 0 rgba(var(--spec-rgb),.46), /* 윗면 정반사 */ inset 0 -1px 0 rgba(var(--surf-rgb),.10), /* 아랫면 굴절광 */ inset 0 0 44px -14px rgba(var(--surf-rgb),.16), /* 유리 두께감 */ inset 0 -22px 40px -30px rgba(124,107,255,.5); /* 바닥에 고이는 색 */ } /* 렌즈 엣지 — 각도마다 다르게 빛나는 테두리 */ .lg::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.25px; background:conic-gradient(from 124deg, rgba(var(--spec-rgb),.72), rgba(var(--surf-rgb),.06) 19%, rgba(179,168,255,.50) 34%, rgba(var(--surf-rgb),.04) 52%, rgba(var(--spec-rgb),.44) 68%, rgba(63,216,232,.34) 82%, rgba(var(--spec-rgb),.72)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } /* 손끝을 따라오는 하이라이트 */ .lg::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background: radial-gradient(300px circle at var(--gx,50%) var(--gy,0%), rgba(var(--surf-rgb),.20), transparent 62%), radial-gradient(160px circle at var(--gx,50%) var(--gy,0%), rgba(179,168,255,.16), transparent 70%); opacity:0; transition:opacity .5s var(--swift); } .lg[data-gaze]::after{ opacity:1; } /* 얇은 유리 — 도크, 칩, 버튼 */ .lgt{ position:relative; isolation:isolate; border-radius:999px; background:linear-gradient(150deg, rgba(var(--surf-rgb),.19), rgba(var(--surf-rgb),.055) 55%, rgba(var(--surf-rgb),.1)); backdrop-filter:var(--refract) blur(16px) saturate(180%) brightness(1.09); -webkit-backdrop-filter:var(--refract) blur(16px) saturate(180%) brightness(1.09); box-shadow: inset 0 1.2px 0 rgba(var(--spec-rgb),.5), inset 0 -1px 0 rgba(var(--surf-rgb),.1), inset 0 0 22px -10px rgba(var(--spec-rgb),.3), 0 12px 30px -12px rgba(0,0,0,.7); } .lgt::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1px; background:conic-gradient(from 124deg, rgba(var(--spec-rgb),.66), rgba(var(--surf-rgb),.05) 24%, rgba(var(--spec-rgb),.4) 50%, rgba(var(--surf-rgb),.04) 74%, rgba(var(--spec-rgb),.6)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } /* --------------------------------------------------------------------- 3. 타이포그래피 --------------------------------------------------------------------- */ .mono{ font-family:ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; } .display{ font-size:clamp(2.35rem,7.2vw,4.6rem); line-height:1.06; font-weight:800; letter-spacing:-.045em; text-wrap:balance; } .display em{ font-style:normal; background:linear-gradient(104deg,var(--brand-lift) 0%,var(--cyan) 34%,var(--iris-lift) 72%,#fff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } h2.title{ font-size:clamp(1.65rem,4.2vw,2.7rem); line-height:1.16; font-weight:800; letter-spacing:-.035em; text-wrap:balance; } h3{ font-size:1.05rem; font-weight:700; letter-spacing:-.02em; line-height:1.35; } .lede{ color:var(--lumen-2); font-size:clamp(.98rem,1.9vw,1.14rem); line-height:1.72; text-wrap:pretty; } /* --------------------------------------------------------------------- 4. 도크 --------------------------------------------------------------------- */ .dockwrap{ position:fixed; z-index:60; top:calc(var(--safe-t) + 14px); left:calc(var(--safe-l) + 12px); right:calc(var(--safe-r) + 12px); display:flex; justify-content:center; pointer-events:none; } .dock{ pointer-events:auto; display:flex; align-items:center; gap:5px; padding:7px; border-radius:999px; max-width:100%; transition:padding .5s var(--spring), gap .5s var(--spring); } /* 스크롤을 내리면 원본과 같이 동그란 로고 배지로 접힙니다. 접힌 상태를 누르면 다시 펼쳐지므로 모바일에서도 갇히지 않습니다. */ .dock.collapsed{ padding:5px; gap:0; cursor:pointer; } .dock-brand{ display:flex; align-items:center; gap:9px; padding:6px 13px 6px 7px; border-radius:999px; font-weight:750; font-size:15px; letter-spacing:-.02em; flex:none; transition:padding .5s var(--spring); } .dock-brand .mark{ width:27px; } .dock-brand .label{ max-width:100px; overflow:hidden; white-space:nowrap; transition:max-width .5s var(--spring), opacity .3s; } .dock.collapsed .dock-brand{ padding:5px; gap:0; justify-content:center; } .dock.collapsed .dock-brand .label{ max-width:0; opacity:0; } .dock.collapsed .dock-links{ max-width:0; opacity:0; padding:0; pointer-events:none; } .dock.collapsed .dock-actions{ max-width:0; opacity:0; pointer-events:none; } .dock-links{ position:relative; display:flex; align-items:center; padding:2px; max-width:420px; overflow:hidden; transition:max-width .5s var(--spring), opacity .32s var(--swift), padding .5s var(--spring); } .dock-links a{ position:relative; z-index:1; padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--lumen-2); white-space:nowrap; transition:color .35s var(--swift); } .dock-links a:hover{ color:var(--lumen); } .dock-links a.on{ color:var(--ink); } /* 선택 표시는 흰 알약이 아니라 "유리 렌즈"입니다 — 글자가 그 아래로 비칩니다 */ .dock-lens{ position:absolute; top:2px; left:0; height:calc(100% - 4px); border-radius:999px; z-index:0; opacity:0; pointer-events:none; background:linear-gradient(150deg, rgba(var(--spec-rgb),.26), rgba(var(--surf-rgb),.08)); backdrop-filter:var(--refract) blur(2px) brightness(1.35) saturate(1.5); -webkit-backdrop-filter:var(--refract) blur(2px) brightness(1.35) saturate(1.5); box-shadow: inset 0 1.5px 0 rgba(var(--spec-rgb),.7), inset 0 -1px 0 rgba(var(--surf-rgb),.2), 0 4px 14px -4px rgba(0,0,0,.6); transition:transform .55s var(--spring), width .55s var(--spring), opacity .35s; } .dock-lens.ready{ opacity:1; } /* max-width 와 overflow 는 접히는 움직임을 위한 것입니다 — 도크가 접힐 때 이 칸이 0 으로 줄어들어야 해서요. 그런데 260px 은 알약 두 개에 맞춘 값이었습니다. 로그인하면 '로그아웃 · 마이페이지' 가, AURORA 에서는 거기에 '지원' 까지 세 개가 들어오는데 그러면 마지막 알약의 오른쪽 끝이 잘려서 알약이 아니라 잘린 사각형으로 보였습니다. 접히는 움직임은 그대로 두고 펼쳐졌을 때의 여유만 넓힙니다. */ .dock-actions{ display:flex; align-items:center; gap:5px; flex:none; max-width:440px; overflow:hidden; transition:max-width .5s var(--spring), opacity .32s var(--swift); } .pill{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 17px; border-radius:999px; font-size:13.5px; font-weight:650; letter-spacing:-.01em; white-space:nowrap; transition:transform .3s var(--spring), filter .3s var(--swift), background .3s; } .pill:active{ transform:scale(.96); } .pill-solid{ background:linear-gradient(150deg,var(--solid-a),var(--solid-b)); color:var(--solid-ink); box-shadow:0 10px 26px -10px rgba(var(--spec-rgb),.55), inset 0 1.5px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.08); } .pill-solid:hover{ filter:brightness(1.07); } .pill-glass{ color:var(--lumen); } .pill-glass:hover{ background:rgba(var(--surf-rgb),.13); } .burger{ display:none; width:42px; height:42px; border-radius:999px; flex-direction:column; align-items:center; justify-content:center; flex:none; } .burger span{ display:block; width:16px; height:1.7px; border-radius:2px; background:var(--lumen); transition:transform .4s var(--spring), opacity .25s; } .burger span + span{ margin-top:4.5px; } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.2px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.2px) rotate(-45deg); } .sheet{ position:fixed; z-index:59; top:calc(var(--safe-t) + 74px); left:calc(var(--safe-l) + 12px); right:calc(var(--safe-r) + 12px); border-radius:var(--r-lg); padding:10px; display:none; flex-direction:column; gap:2px; opacity:0; transform:translateY(-10px) scale(.98); pointer-events:none; transition:opacity .3s var(--swift), transform .42s var(--spring); } .sheet.open{ opacity:1; transform:none; pointer-events:auto; } .sheet a{ display:flex; align-items:center; min-height:48px; padding:0 16px; border-radius:16px; font-size:15px; font-weight:600; color:var(--lumen-2); } .sheet a:active{ background:rgba(var(--surf-rgb),.09); color:var(--lumen); } .sheet-actions{ display:flex; gap:8px; padding:8px 4px 4px; } .sheet-actions .pill{ flex:1; min-height:46px; font-size:14.5px; } @media (max-width:920px){ .dock-links{ display:none; } .burger{ display:flex; } .sheet{ display:flex; } } @media (max-width:560px){ .dock-actions .pill-glass{ display:none; } } /* --------------------------------------------------------------------- 5. 레이아웃 --------------------------------------------------------------------- */ main{ position:relative; z-index:2; } .section{ padding-block:clamp(72px,11vw,130px); padding-inline:calc(var(--gutter) + var(--safe-l)) calc(var(--gutter) + var(--safe-r)); } .wrap{ max-width:1140px; margin-inline:auto; } .defer{ content-visibility:auto; contain-intrinsic-size:auto 820px; } .section-head{ max-width:660px; margin-inline:auto; text-align:center; margin-bottom:clamp(38px,6vw,60px); } .section-head .mono{ color:var(--iris-lift); display:block; margin-bottom:14px; } .section-head .lede{ margin-top:16px; } /* --------------------------------------------------------------------- 6. 히어로 --------------------------------------------------------------------- */ .hero{ padding-top:calc(var(--safe-t) + clamp(130px,20vw,178px)); padding-bottom:clamp(56px,8vw,90px); padding-inline:calc(var(--gutter) + var(--safe-l)) calc(var(--gutter) + var(--safe-r)); text-align:center; display:flex; flex-direction:column; align-items:center; } .eyebrow{ display:inline-flex; align-items:center; gap:9px; padding:7px 16px 7px 8px; margin-bottom:26px; font-size:12.5px; font-weight:600; color:var(--lumen-2); } .eyebrow .mark{ width:20px; } .eyebrow b{ color:var(--lumen); font-weight:650; } .eyebrow i{ font-style:normal; color:var(--iris-lift); } .hero .display{ max-width:16ch; } .hero .lede{ margin-top:22px; max-width:44ch; } .hero-cta{ display:flex; gap:11px; margin-top:34px; flex-wrap:wrap; justify-content:center; } .hero-cta .pill{ min-height:50px; padding:0 26px; font-size:15px; } .cursor{ display:inline-block; width:3px; height:.82em; margin-left:2px; vertical-align:-.06em; border-radius:2px; background:var(--iris-lift); animation:pulse 1.05s step-end infinite; } @keyframes pulse{ 50%{ opacity:0; } } .pane-stage{ margin-top:clamp(52px,8vw,82px); width:100%; max-width:660px; perspective:1600px; } .pane{ padding:20px; text-align:left; transform:rotateX(7deg); transform-origin:50% 100%; } .pane-bar{ display:flex; align-items:center; gap:9px; padding:0 4px 16px; border-bottom:1px solid rgba(var(--surf-rgb),.09); margin-bottom:16px; } .pane-bar .mark{ width:21px; } .pane-bar .who{ font-size:13px; font-weight:650; } .pane-bar .dot{ width:6px; height:6px; border-radius:50%; background:var(--brand-lift); box-shadow:0 0 10px var(--brand-lift); margin-left:auto; flex:none; } .pane-bar .st{ font-size:11.5px; color:var(--lumen-3); min-width:46px; text-align:right; } .thread{ display:flex; flex-direction:column; gap:12px; min-height:212px; } .bubble{ max-width:86%; padding:12px 16px; font-size:14.5px; line-height:1.62; border-radius:20px; opacity:0; transform:translateY(10px); transition:opacity .5s var(--swift), transform .6s var(--spring); } .bubble.in{ opacity:1; transform:none; } .bubble.me{ align-self:flex-end; border-bottom-right-radius:7px; color:var(--ink); background:linear-gradient(150deg, rgba(124,107,255,.94), rgba(92,70,224,.88)); box-shadow:0 12px 28px -12px rgba(124,107,255,.85), inset 0 1.2px 0 rgba(var(--spec-rgb),.34); } .bubble.ai{ align-self:flex-start; border-bottom-left-radius:7px; background:rgba(var(--surf-rgb),.085); border:1px solid rgba(var(--surf-rgb),.12); box-shadow:inset 0 1px 0 rgba(var(--surf-rgb),.18); } .bubble code{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:12.5px; background:rgba(0,0,0,.36); padding:1.5px 6px; border-radius:6px; color:var(--brand-lift); } .typing{ display:inline-flex; gap:4px; align-items:center; height:1.2em; } .typing i{ width:5px; height:5px; border-radius:50%; background:var(--lumen-3); animation:bob 1.25s ease-in-out infinite; } .typing i:nth-child(2){ animation-delay:.16s; } .typing i:nth-child(3){ animation-delay:.32s; } @keyframes bob{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } } /* 대화 선택지 칩 — 사용자가 직접 다음 응답을 골라 체험 */ .thread-choices{ display:flex; flex-wrap:wrap; gap:8px; padding-top:4px; opacity:0; transform:translateY(8px); transition:opacity .45s var(--swift), transform .5s var(--spring); } .thread-choices.in{ opacity:1; transform:none; } .choice-chip{ padding:9px 15px; border-radius:999px; font-size:13px; font-weight:600; text-align:left; color:var(--lumen); background:rgba(var(--surf-rgb),.07); border:1px solid rgba(var(--surf-rgb),.14); transition:background .25s var(--swift), transform .3s var(--spring), border-color .25s; } .choice-chip:hover{ background:rgba(var(--surf-rgb),.14); border-color:var(--ink-4); } .choice-chip:active{ transform:scale(.96); } /* --------------------------------------------------------------------- 6b. 미니 쇼케이스 — 채팅 데모 바로 아래, 애플 스타일 탭/스와이프 캐러셀 --------------------------------------------------------------------- */ .mini-showcase{ margin-top:clamp(30px,5vw,46px); width:100%; max-width:660px; } .mini-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; padding:0 2px; } .mini-head h3{ font-size:15px; font-weight:700; color:var(--lumen); } .mini-head span{ font-size:12px; color:var(--lumen-3); } .mini-track{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 2px 6px; scrollbar-width:none; -ms-overflow-style:none; } .mini-track::-webkit-scrollbar{ display:none; } .mini-card{ flex:0 0 76%; max-width:300px; scroll-snap-align:center; text-align:left; border-radius:22px; padding:20px 20px 22px; } .mini-glyph{ width:40px; height:40px; border-radius:14px; display:grid; place-items:center; margin-bottom:14px; background:var(--g, linear-gradient(150deg,var(--iris),var(--iris-lift))); } .mini-glyph svg{ width:20px; height:20px; } .mini-card .mini-tag{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--ink); padding:4px 10px; border-radius:999px; background:var(--g); margin-bottom:12px; } .mini-card h4{ font-size:15.5px; font-weight:700; line-height:1.4; margin-bottom:7px; } .mini-card p{ font-size:12.5px; line-height:1.62; color:var(--lumen-2); } .mini-nav{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:8px; } .mini-dots{ display:flex; gap:6px; } .mini-dot{ width:6px; height:6px; border-radius:50%; background:rgba(var(--spec-rgb),.22); transition:background .3s, transform .3s var(--spring); flex:none; } .mini-dot.on{ background:var(--iris-lift); transform:scale(1.35); } .mini-nav-btn{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; color:var(--lumen); background:rgba(var(--surf-rgb),.08); border:1px solid rgba(var(--surf-rgb),.14); } .mini-nav-btn:hover{ background:rgba(var(--surf-rgb),.16); } .mini-nav-btn:active{ transform:scale(.92); } .mini-nav-btn:disabled{ opacity:.3; pointer-events:none; } @media (max-width:560px){ .mini-card{ flex-basis:84%; } } /* --------------------------------------------------------------------- 7. 기능 카드 --------------------------------------------------------------------- */ .cards{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); } .card{ padding:26px 24px 28px; transition:transform .5s var(--spring); } @media (hover:hover){ .card:hover{ transform:translateY(-6px); } } .card .glyph{ width:46px; height:46px; border-radius:15px; display:grid; place-items:center; margin-bottom:18px; background:var(--g, linear-gradient(150deg,var(--iris),var(--iris-lift))); box-shadow:0 14px 28px -12px rgba(0,0,0,.85), inset 0 1.5px 0 rgba(var(--spec-rgb),.5); } .card .glyph svg{ width:22px; height:22px; } .card h3{ margin-bottom:9px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .card p{ font-size:14px; color:var(--lumen-2); line-height:1.68; } .tag{ font-size:10px; font-weight:700; letter-spacing:.04em; padding:3px 8px; border-radius:999px; background:rgba(124,107,255,.24); color:var(--iris-lift); } /* --------------------------------------------------------------------- 8. 쇼케이스 — 스크롤로 고르는 유리 렌즈 --------------------------------------------------------------------- */ .showcase{ display:grid; gap:20px; grid-template-columns:340px 1fr; align-items:stretch; } @media (max-width:900px){ .showcase{ grid-template-columns:1fr; } } .picker{ --pad:136px; --optH:68px; --lensH:66px; position:relative; padding:0; overflow:hidden; border-radius:var(--r-lg); height:340px; } /* 렌즈가 지나가는 띠를 마스크로 도려냅니다. 이 구멍을 렌즈 안의 "굴절된 사본"이 채우기 때문에 글자가 겹쳐 보이지 않습니다. */ .picker-mask{ position:absolute; inset:0; z-index:1; -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(50% - var(--lensH)/2), transparent calc(50% - var(--lensH)/2), transparent calc(50% + var(--lensH)/2), #000 calc(50% + var(--lensH)/2), #000 100%); mask-image:linear-gradient(180deg, #000 0, #000 calc(50% - var(--lensH)/2), transparent calc(50% - var(--lensH)/2), transparent calc(50% + var(--lensH)/2), #000 calc(50% + var(--lensH)/2), #000 100%); } .picker::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:4; border-radius:inherit; background:linear-gradient(180deg, rgba(5,6,11,.94) 0%, rgba(5,6,11,.4) 20%, transparent 38%, transparent 62%, rgba(5,6,11,.4) 80%, rgba(5,6,11,.94) 100%); } .picker-track{ position:absolute; inset:0; overflow-y:auto; scrollbar-width:none; scroll-snap-type:y mandatory; overscroll-behavior:contain; padding-block:var(--pad); -webkit-overflow-scrolling:touch; } .picker-track::-webkit-scrollbar{ display:none; } .opt{ height:var(--optH); scroll-snap-align:center; scroll-snap-stop:always; display:flex; align-items:center; gap:14px; padding:0 26px; width:100%; text-align:left; color:var(--lumen-3); transition:color .4s var(--swift), transform .5s var(--spring), opacity .4s; transform:scale(.9); opacity:.5; } .opt .oi{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none; background:var(--oc); box-shadow:inset 0 1px 0 rgba(var(--spec-rgb),.42); } .opt .oi svg{ width:17px; height:17px; } .opt .ot{ min-width:0; } .opt .ot b{ display:block; font-size:16px; font-weight:750; letter-spacing:-.025em; } .opt .ot small{ display:block; font-size:11.5px; color:var(--lumen-4); margin-top:1px; } .opt[aria-selected="true"]{ color:var(--lumen); transform:scale(1); opacity:1; } .opt[aria-selected="true"] .ot small{ color:var(--lumen-3); } /* ---- 렌즈 ---- */ .lens{ position:absolute; z-index:2; left:12px; right:12px; top:50%; height:var(--lensH); transform:translateY(-50%); border-radius:20px; pointer-events:none; overflow:hidden; background:linear-gradient(150deg, rgba(var(--surf-rgb),.13), rgba(var(--surf-rgb),.03) 55%, rgba(var(--surf-rgb),.08)); box-shadow:0 14px 34px -10px rgba(0,0,0,.75), 0 0 0 1px rgba(var(--surf-rgb),.16); } /* 렌즈 안에 들어가는 목록 사본. 여기에 굴절 필터가 걸립니다. backdrop-filter가 아니라 일반 filter라서 사파리·파이어폭스에서도 동작합니다. */ .lens-inner{ position:absolute; left:-12px; right:-12px; top:0; z-index:1; /* 굴절 필터는 index.js 가 --lens-refract 로 넣어줍니다. 여기에 url(#lqLens) 를 직접 적으면 안 됩니다. CSS 안의 조각 주소는 문서가 아니라 '이 CSS 파일' 기준으로 풀리기 때문에, /assets/css/#lqLens 를 받으러 가서 404 가 났습니다. (변수 이름도 --lens-filter 로 잘못 적혀 있어 항상 이 값이 쓰였어요) */ filter:var(--lens-refract, none); transform:translateY(var(--ly,0px)); will-change:transform; } .lens-scale{ padding-block:var(--pad); transform:scale(var(--lz,1.07)); transform-origin:50% var(--oy,0px); } /* 렌즈 안에서는 모든 항목이 또렷하게 보입니다 (선택 여부와 무관) */ .lens-scale .opt{ transform:none; opacity:1; color:var(--lumen); transition:none; } .lens-scale .opt .ot small{ color:var(--lumen-3); } /* 유리 표면 — 사본 위에 덮이는 정반사와 테두리 */ .lens::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit; background:linear-gradient(180deg, rgba(var(--spec-rgb),.34) 0%, rgba(var(--surf-rgb),.05) 24%, rgba(var(--surf-rgb),0) 55%, rgba(var(--surf-rgb),.07) 100%); box-shadow: inset 0 2px 0 rgba(var(--spec-rgb),.78), inset 0 -1.5px 0 rgba(var(--spec-rgb),.26), inset 2px 0 0 rgba(var(--surf-rgb),.14), inset -2px 0 0 rgba(var(--surf-rgb),.14), inset 0 0 34px -12px rgba(var(--spec-rgb),.6); } .picker-hint{ position:absolute; z-index:5; left:0; right:0; bottom:12px; text-align:center; font-size:11px; color:var(--lumen-4); pointer-events:none; } /* 오른쪽 미리보기 판 */ .preview{ padding:clamp(24px,3.4vw,34px); display:flex; flex-direction:column; min-height:340px; } .preview .mono{ color:var(--pc,var(--iris-lift)); margin-bottom:12px; } .preview h3{ font-size:clamp(1.2rem,2.5vw,1.55rem); letter-spacing:-.03em; margin-bottom:10px; } .preview > p{ color:var(--lumen-2); font-size:14.5px; max-width:44ch; } .preview-demo{ margin-top:auto; padding-top:22px; display:flex; flex-direction:column; gap:9px; } .pv-line{ display:flex; gap:9px; align-items:flex-start; font-size:13.5px; line-height:1.6; padding:11px 14px; border-radius:15px; background:rgba(var(--surf-rgb),.06); border:1px solid rgba(var(--surf-rgb),.09); box-shadow:inset 0 1px 0 rgba(var(--surf-rgb),.12); } .pv-line.q{ background:linear-gradient(150deg,rgba(124,107,255,.3),rgba(92,70,224,.18)); border-color:rgba(124,107,255,.36); color:var(--ink); } .pv-line .k{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:10px; letter-spacing:.1em; color:var(--lumen-4); flex:none; padding-top:3px; } .fade-swap{ animation:fadeSwap .45s var(--swift); } @keyframes fadeSwap{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } /* --------------------------------------------------------------------- 9. 보안 · CTA · 푸터 --------------------------------------------------------------------- */ .split{ display:grid; gap:16px; grid-template-columns:1.25fr 1fr; } @media (max-width:840px){ .split{ grid-template-columns:1fr; } } .slab{ padding:clamp(26px,4vw,38px); min-height:250px; display:flex; flex-direction:column; justify-content:flex-end; } .slab .mono{ margin-bottom:12px; } .slab h3{ font-size:clamp(1.15rem,2.4vw,1.45rem); margin-bottom:10px; letter-spacing:-.03em; } .slab p{ color:var(--lumen-2); font-size:14px; max-width:36ch; } .slab.a{ background-image:radial-gradient(90% 80% at 88% 8%, rgba(0,169,79,.26), transparent 58%); } .slab.a .mono{ color:var(--brand-lift); } .slab.b{ background-image:radial-gradient(90% 80% at 10% 92%, rgba(63,216,232,.24), transparent 58%); } .slab.b .mono{ color:var(--cyan); } .band{ padding:clamp(46px,7vw,74px) clamp(24px,5vw,44px); text-align:center; border-radius:var(--r-xl); background-image:radial-gradient(66% 100% at 50% -12%, rgba(124,107,255,.3), transparent 62%); } .band .mark{ width:54px; margin:0 auto 20px; } .band .lede{ margin:14px auto 30px; max-width:40ch; } footer{ position:relative; z-index:2; text-align:center; padding:44px var(--gutter) calc(56px + var(--safe-b)); border-top:1px solid rgba(var(--surf-rgb),.08); display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--lumen-3); font-size:12.5px; } footer .mark{ width:24px; opacity:.9; } footer nav{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; } footer a{ color:var(--lumen-2); } footer a:hover{ color:var(--lumen); } .rise{ opacity:0; transform:translateY(24px); } .rise.shown{ opacity:1; transform:none; transition:opacity .78s var(--swift), transform .95s var(--spring); } /* --------------------------------------------------------------------- 10. 모달 --------------------------------------------------------------------- */ .scrim{ position:fixed; inset:0; z-index:100; background:rgba(3,4,8,.7); backdrop-filter:blur(16px) saturate(130%); -webkit-backdrop-filter:blur(16px) saturate(130%); display:grid; place-items:center; padding:calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b)); opacity:0; pointer-events:none; transition:opacity .34s var(--swift); } .scrim.open{ opacity:1; pointer-events:auto; } .modal{ width:100%; max-width:412px; max-height:100%; overflow-y:auto; overscroll-behavior:contain; padding:34px 28px 26px; position:relative; border-radius:var(--r-xl); transform:scale(.92) translateY(14px); transition:transform .48s var(--spring); } .scrim.open .modal{ transform:none; } .modal-x{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:999px; display:grid; place-items:center; background:rgba(var(--surf-rgb),.1); color:var(--lumen-2); font-size:15px; } .modal-x:hover{ background:rgba(var(--surf-rgb),.18); color:var(--lumen); } .modal .mark{ width:44px; margin:0 auto 8px; } .modal-title{ text-align:center; font-size:18px; font-weight:750; letter-spacing:-.03em; margin-bottom:22px; } .segmented{ display:flex; gap:3px; padding:3px; margin-bottom:20px; background:rgba(var(--surf-rgb),.07); border-radius:14px; border:1px solid rgba(var(--surf-rgb),.09); } .segmented button{ flex:1; min-height:38px; border-radius:11px; font-size:13.5px; font-weight:600; color:var(--lumen-2); transition:background .3s var(--swift), color .3s; } .segmented button[aria-selected="true"]{ background:rgba(var(--surf-rgb),.16); color:var(--ink); box-shadow:inset 0 1.2px 0 rgba(var(--spec-rgb),.3); } form.pane-form{ display:none; flex-direction:column; gap:13px; } form.pane-form.on{ display:flex; } .field{ display:flex; flex-direction:column; gap:7px; } .field > span{ font-size:12.5px; font-weight:600; color:var(--lumen-2); } .field input{ width:100%; font-size:16px; min-height:46px; padding:11px 14px; border-radius:13px; background:rgba(var(--surf-rgb),.07); border:1px solid rgba(var(--surf-rgb),.14); transition:border-color .3s var(--swift), background .3s; } .field input::placeholder{ color:var(--lumen-4); } .field input:focus{ outline:none; border-color:rgba(124,107,255,.8); background:rgba(var(--surf-rgb),.1); box-shadow:0 0 0 3.5px rgba(124,107,255,.2); } .hint{ font-size:12.5px; line-height:1.6; color:var(--lumen-2); background:rgba(var(--surf-rgb),.06); border:1px solid rgba(var(--surf-rgb),.1); border-radius:13px; padding:11px 13px; } .hint.warm{ color:var(--amber); background:rgba(255,182,94,.12); border-color:rgba(255,182,94,.26); } .checkline{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--lumen-2); font-weight:500; min-height:40px; cursor:pointer; } .checkline input{ width:17px; height:17px; accent-color:var(--iris); flex:none; cursor:pointer; } .submit{ min-height:48px; width:100%; margin-top:4px; font-size:15px; } .sublinks{ display:flex; justify-content:center; gap:10px; align-items:center; font-size:12.5px; color:var(--lumen-4); margin-top:2px; } .sublinks a{ color:var(--lumen-2); min-height:34px; display:inline-flex; align-items:center; } .sublinks a:hover{ color:var(--lumen); } .formsay{ display:none; font-size:13px; line-height:1.55; margin-top:4px; padding:10px 13px; border-radius:12px; } .formsay.err{ display:block; color:var(--rose); background:rgba(255,107,150,.14); border:1px solid rgba(255,107,150,.28); } .formsay.ok{ display:block; color:var(--ok); background:rgba(0,169,79,.16); border:1px solid rgba(0,169,79,.32); } .spin{ display:inline-block; width:15px; height:15px; border:2px solid rgba(7,8,13,.25); border-top-color:var(--solid-ink); border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg); } } button[disabled]{ opacity:.6; pointer-events:none; } .toast{ position:fixed; z-index:200; left:50%; bottom:calc(26px + var(--safe-b)); transform:translate(-50%,18px); padding:13px 20px; border-radius:16px; font-size:13.5px; font-weight:600; max-width:calc(100vw - 32px); opacity:0; pointer-events:none; transition:opacity .3s var(--swift), transform .45s var(--spring); } .toast.show{ opacity:1; transform:translate(-50%,0); } /* --------------------------------------------------------------------- 11. 품질 등급 q-high : 굴절 + 배경 드리프트 + 하이라이트 (데스크톱 고사양) q-mid : 굴절 없이 블러 유지 (기본) q-low : 블러 없이 불투명 유리 (저사양·모바일) --------------------------------------------------------------------- */ .q-low .lg, .q-low .lgt, .q-low .lens, .q-low .scrim{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .q-low .lg{ background:linear-gradient(150deg, rgba(36,39,56,.9), rgba(16,18,30,.86)); } .q-low .lgt{ background:linear-gradient(150deg, rgba(var(--base-rgb),.9), rgba(22,24,38,.86)); } .q-low .lens{ background:linear-gradient(150deg, rgba(var(--surf-rgb),.2), rgba(var(--surf-rgb),.09)); } .q-low .scrim{ background:rgba(3,4,8,.93); } .q-low .dock-lens{ background:linear-gradient(150deg, rgba(var(--spec-rgb),.3), rgba(var(--surf-rgb),.14)); } .q-low .grain{ display:none; } .q-low .pane{ transform:none; } .q-low .lg::after{ display:none; } .q-low .env i{ filter:blur(48px); } .q-low .lens-inner{ filter:none; } /* 굴절은 끄고 확대만 남깁니다 */ .q-low .lens-scale{ --lz:1.05; } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .lg{ background:linear-gradient(150deg, rgba(36,39,56,.92), rgba(16,18,30,.88)); } .lgt{ background:linear-gradient(150deg, rgba(var(--base-rgb),.92), rgba(22,24,38,.88)); } .scrim{ background:rgba(3,4,8,.95); } } /* iOS "투명도 감소" 접근성 설정: backdrop-filter는 @supports 상으로는 여전히 지원된다고 나오지만 실제 블러 효과가 꺼지거나 크게 약해져서, 이 설정을 켠 기기에서는 회원가입 모달 등 유리 패널 뒤로 페이지 내용이 그대로 비쳐 보였습니다. 이 설정이 켜졌는지는 감지할 수 있으므로, 감지되면 블러에 의존하지 않는 불투명한 배경으로 바꿔 겹쳐 보이는 문제를 없앱니다. */ @media (prefers-reduced-transparency: reduce){ .lg, .lgt, .lens, .scrim{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .lg{ background:linear-gradient(150deg, rgba(36,39,56,.97), rgba(16,18,30,.97)); } .lgt{ background:linear-gradient(150deg, rgba(var(--base-rgb),.97), rgba(22,24,38,.97)); } .lens{ background:linear-gradient(150deg, rgba(var(--spec-rgb),.22), rgba(var(--surf-rgb),.1)); } .scrim{ background:rgba(3,4,8,.97); } .dock-lens{ background:linear-gradient(150deg, rgba(var(--spec-rgb),.32), rgba(var(--surf-rgb),.16)); } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } html{ scroll-behavior:auto; } .rise{ opacity:1; transform:none; } .bubble{ opacity:1; transform:none; } .env i{ animation:none !important; } } @media (max-width:480px){ :root{ --r-lg:26px; --r-xl:30px; --blur:16px; } .hero .display{ max-width:14ch; } .pane{ padding:16px; } .bubble{ max-width:92%; font-size:14px; } .modal{ padding:30px 20px 22px; border-radius:28px; } .card{ padding:22px 20px 24px; } .picker{ height:300px; --pad:116px; } .opt{ padding:0 20px; } } @media (max-width:360px){ .dock-brand .label{ display:none; } } /* [fix] backdrop-filter 미적용 환경에서 유리 패널이 흰색으로 보이는 문제 */ .lg, .lgt, .modal, .sheet{ background-color:rgba(18,20,30,.94); } .dock-links > a{ position:relative; z-index:1; } /* pgfix-glass — backdrop-filter 미적용 환경에서 유리 패널이 흰색으로 보이는 문제 */ .lg, .lgt, .modal, .sheet{ background-color:rgba(18,20,30,.94); } .dock-links > a{ position:relative; z-index:1; } /* ===================================================================== 첫 화면 재설계 — 세로로 쌓인 한 줄에서 두 단으로 --------------------------------------------------------------------- 예전 배치는 제목·설명·버튼·대화 예시·카드 여섯 장이 모두 가운데 정렬로 세로 한 줄에 쌓여 있었습니다. 그래서 · 첫 화면(fold)에 제목과 버튼밖에 안 들어왔습니다. 정작 이 서비스가 무엇인지 보여주는 대화 예시는 스크롤을 내려야 나왔어요. · 넓은 화면일수록 손해였습니다. 좌우가 텅 비고 세로만 길어졌습니다. · 카드는 가로 스크롤이라 한 번에 한 장 반밖에 안 보였습니다. 여섯 장을 다 보려면 다섯 번 밀어야 했고, 대부분은 두 번째에서 그만둡니다. 이제 넓은 화면에서는 왼쪽이 말하고 오른쪽이 보여줍니다. 카드는 격자로 펼쳐 여섯 장을 한눈에 둡니다. 좁은 화면은 예전처럼 한 줄로 쌓입니다 — 거기서는 그게 맞으니까요. HTML 과 JS 는 건드리지 않았습니다. 자리만 다시 잡았어요. ===================================================================== */ @media (min-width: 1040px) { .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); grid-template-areas: "eyebrow pane" "title pane" "lede pane" "cta pane" "mini mini"; align-items: start; column-gap: clamp(36px, 5vw, 76px); max-width: 1280px; margin-inline: auto; text-align: left; padding-top: calc(var(--safe-t) + clamp(112px, 13vw, 150px)); } .hero .eyebrow { grid-area: eyebrow; } .hero .display { grid-area: title; max-width: 13ch; margin-top: 20px; } .hero .lede { grid-area: lede; max-width: 46ch; } .hero-cta { grid-area: cta; justify-content: flex-start; } /* 대화 예시가 오른쪽 단 전체를 세로로 가운데 잡습니다. 기울기는 뺐습니다 — 옆에 나란히 놓이면 기울어진 판이 글줄과 어긋나 보여요. */ .pane-stage { grid-area: pane; margin-top: 0; max-width: none; align-self: center; perspective: none; } .pane { transform: none; } .mini-showcase { grid-area: mini; max-width: none; margin-top: clamp(64px, 7vw, 104px); } } /* ----- 카드: 가로 스크롤 → 격자 ----- 760px 부터는 여섯 장을 한눈에 둡니다. 좁은 화면에서는 예전처럼 옆으로 미는 편이 편하니 그대로 둡니다. */ @media (min-width: 760px) { .mini-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; overflow: visible; scroll-snap-type: none; padding: 2px; } .mini-card { flex: none; max-width: none; scroll-snap-align: none; transition: transform .42s cubic-bezier(.16,1,.3,1), box-shadow .42s ease; } /* 손이 닿으면 앞으로 나옵니다 — 마이페이지 칸들과 같은 규칙입니다 */ .mini-card:hover { transform: translateY(-3px); } /* 넘기는 단추와 점은 격자에서는 할 일이 없습니다 */ .mini-nav { display: none; } } @media (min-width: 1040px) { .mini-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .mini-head { padding-inline: 2px; } } @media (prefers-reduced-motion: reduce) { .mini-card { transition: none; } .mini-card:hover { transform: none; } }