/* ============================================================ /tour/ — 시네마틱 제품 투어 (scoped under .page-tour) 기존 site.css 변수(--navy, --blue, --accent, Pretendard) 재사용. reveal/parallax 는 JS 가 .tour-anim 을 붙일 때만 활성. JS 미동작·reduced-motion 시 콘텐츠는 그대로 노출된다. ============================================================ */ .page-tour { overflow-x: clip; } .page-tour main { overflow: visible; } .tour { --tour-dark1: #06122a; --tour-dark2: #0b1e3f; --tour-dark3: #12305c; position: relative; } /* ---------- 풀블리드 ---------- */ .tour-bleed { width: 100vw; margin-left: calc(50% - 50vw); position: relative; } /* ---------- 진행바 · 챕터 레일 ---------- */ .tour-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; } .tour-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-500), var(--accent)); transition: width .1s linear; } .tour-rail { position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 55; display: flex; flex-direction: column; gap: 18px; } .tour-rail__dot { display: flex; align-items: center; gap: 10px; color: var(--ink-400); text-decoration: none; opacity: .55; transition: opacity .25s ease, color .25s ease; } .tour-rail__dot em { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .9rem; border: 1.5px solid currentColor; background: rgba(255,255,255,.7); backdrop-filter: blur(4px); } .tour-rail__dot span { font-size: .78rem; font-weight: 700; letter-spacing: .04em; opacity: 0; transform: translateX(-6px); transition: .25s ease; } .tour-rail__dot.is-active { opacity: 1; color: var(--navy-900); } .tour-rail__dot.is-active em { background: var(--navy-900); color: #fff; border-color: var(--navy-900); } .tour-rail__dot.is-active span { opacity: 1; transform: none; } @media (max-width: 1180px) { .tour-rail { display: none; } } /* ---------- 공통 타이포 ---------- */ .tour-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--blue-500); margin: 0 0 20px; } .tour-scene__title { font-size: clamp(1.9rem, 4.4vw, 3.4rem); font-weight: 800; line-height: 1.16; letter-spacing: -0.02em; margin: 0; } .tour-scene__lead { font-size: clamp(1.02rem, 1.5vw, 1.22rem); line-height: 1.7; color: var(--ink-500); margin: 18px 0 0; max-width: 620px; } .tour-scene--light .tour-scene__lead b { color: var(--navy-900); } .tour-hl { color: #7db4ff; } .tour-hl2 { color: var(--blue-600); background: linear-gradient(180deg, transparent 62%, var(--blue-100) 62%); } .tour-center { text-align: center; margin-left: auto; margin-right: auto; } .tour-center.tour-scene__lead { margin-left: auto; margin-right: auto; } .tour-chapter { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); margin: 0 0 18px; } .tour-chapter em { font-style: normal; font-size: 1.05rem; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; } .tour-chapter--light { color: var(--ink-400); } .tour-chapter--light em { background: var(--blue-100); color: var(--blue-600); } /* ---------- 起 · 히어로 ---------- */ .tour-hero { min-height: 100vh; display: grid; align-items: center; padding: 120px 0 90px; overflow: hidden; color: #fff; background: radial-gradient(1200px 640px at 18% -8%, rgba(47,127,227,.5), transparent 60%), radial-gradient(900px 520px at 92% 108%, rgba(43,184,168,.32), transparent 60%), linear-gradient(150deg, var(--tour-dark1) 0%, var(--tour-dark2) 55%, var(--tour-dark3) 100%); } .tour-hero__inner { position: relative; z-index: 2; } .tour-hero__montage { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .tour-hero__montage img { position: absolute; width: 40%; max-width: 560px; border-radius: 14px; filter: blur(2px) saturate(.9); opacity: .16; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); } .tour-hero__montage img:nth-child(1) { top: 6%; right: -4%; transform: rotate(4deg); } .tour-hero__montage img:nth-child(2) { bottom: 4%; right: 16%; width: 30%; transform: rotate(-5deg); } .tour-hero__montage img:nth-child(3) { top: 12%; left: -6%; width: 28%; transform: rotate(-3deg); } .tour-hero__montage img:nth-child(4) { bottom: 10%; left: 20%; width: 24%; transform: rotate(6deg); opacity: .12; } .tour-hero__title { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 24px; color: #fff; } .tour-hero__lead { font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.7; color: rgba(255,255,255,.82); max-width: 640px; margin: 0; } .tour-hero__lead b { color: #fff; } .tour-scrollcue { margin-top: 54px; display: inline-flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255,255,255,.6); font-size: .82rem; letter-spacing: .1em; } .tour-scrollcue i { width: 22px; height: 34px; border: 2px solid rgba(255,255,255,.4); border-radius: 12px; position: relative; } .tour-scrollcue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; border-radius: 3px; background: #fff; transform: translateX(-50%); animation: tourScroll 1.6s ease-in-out infinite; } @keyframes tourScroll { 0%,100%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 70%{opacity:0;transform:translate(-50%,10px)} } /* ---------- 起 · 문제 ---------- */ .tour-problem { padding: 96px 0 110px; color: #fff; background: linear-gradient(180deg, var(--tour-dark2) 0%, var(--tour-dark1) 100%); } .tour-problem .tour-scene__title { color: #fff; } .tour-pain { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .tour-pain li { padding: 22px 22px 20px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); } .tour-pain li b { display: block; font-size: 1.12rem; color: #fff; margin-bottom: 6px; } .tour-pain li span { color: rgba(255,255,255,.62); font-size: .92rem; line-height: 1.55; } .tour-problem__punch { margin: 46px 0 0; text-align: center; font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.6; color: rgba(255,255,255,.85); } .tour-problem__punch b { color: #7db4ff; } /* ---------- 承 · 라이트 씬 ---------- */ .tour-scene--light { padding: clamp(70px, 9vw, 120px) 0; background: #fff; } .tour-scene--light:nth-of-type(even) { background: var(--bg-soft); } .tour-split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 54px; align-items: center; } .tour-split--rev .tour-split__copy { order: 2; } .tour-split--rev .tour-stack { order: 1; } .tour-split__copy .tour-scene__lead { margin-bottom: 22px; } .tour-mini { display: inline-block; margin: 6px 0 18px; padding: 8px 14px; border-radius: 999px; background: var(--accent-soft); color: #17746b; font-size: .9rem; font-weight: 600; } .tour-mini b { color: #0f5f57; } .tour-inlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blue-600); text-decoration: none; font-size: 1rem; } .tour-inlink:hover { color: var(--navy-900); } .tour-linkrow { display: flex; gap: 22px; flex-wrap: wrap; } /* ---------- 브라우저 목업 ---------- */ .tour-browser { margin: 0; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .tour-browser__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #f3f5f9; border-bottom: 1px solid var(--line); } .tour-browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: #d3d8e0; } .tour-browser__bar i:nth-child(1){ background:#ff5f57; } .tour-browser__bar i:nth-child(2){ background:#febc2e; } .tour-browser__bar i:nth-child(3){ background:#28c840; } .tour-browser__bar span { margin-left: 12px; font-size: .78rem; color: var(--ink-400); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; } .tour-browser img { display: block; width: 100%; height: auto; } .tour-browser figcaption { padding: 12px 16px; font-size: .88rem; font-weight: 600; color: var(--ink-500); background: #fff; border-top: 1px solid var(--line-soft); text-align: center; } .tour-browser--dark { border-color: rgba(255,255,255,.14); } .tour-browser--dark .tour-browser__bar { background: #0e2447; border-color: rgba(255,255,255,.1); } .tour-browser--dark .tour-browser__bar span { background: #0a1c3a; border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.6); } /* ---------- 承 · 도구 플로우 ---------- */ .tour-flow { margin-top: 46px; display: grid; grid-template-columns: 1fr auto 1.35fr; gap: 26px; align-items: center; } .tour-flow__arrow { display: grid; place-items: center; gap: 6px; font-size: 1.8rem; color: var(--blue-500); font-weight: 800; } .tour-flow__arrow span { font-size: .72rem; letter-spacing: .1em; color: var(--ink-400); background: var(--blue-100); padding: 4px 10px; border-radius: 999px; font-weight: 700; } .tour-browser--hero { box-shadow: 0 40px 90px -30px rgba(30,95,191,.5); outline: 3px solid rgba(47,127,227,.25); outline-offset: 4px; } /* ---------- 겹친 목업 ---------- */ .tour-stack { position: relative; padding: 0 0 40px 0; } .tour-stack__over { position: relative; margin-top: -22%; margin-left: 22%; width: 82%; } @media (max-width: 720px){ .tour-stack__over{ margin-top: -14%; margin-left: 12%; width: 90%; } } /* ---------- 轉 · 증명 (다크) ---------- */ .tour-proof { padding: clamp(80px,9vw,120px) 0; color: #fff; background: radial-gradient(900px 500px at 80% -10%, rgba(47,127,227,.28), transparent 60%), linear-gradient(160deg, var(--tour-dark1), var(--tour-dark2)); } .tour-proof .tour-scene__title { color: #fff; } .tour-proof .tour-scene__lead { color: rgba(255,255,255,.75); } .tour-proof .tour-scene__lead b { color: #7db4ff; } .tour-stack--dark { max-width: 900px; margin: 48px auto 0; } .tour-stats { padding: clamp(80px,9vw,120px) 0; color: #fff; text-align: center; background: linear-gradient(180deg, var(--tour-dark2), var(--tour-dark3)); } .tour-stats .tour-scene__title { color: #fff; } .tour-stats .tour-scene__lead { color: rgba(255,255,255,.7); } .tour-statgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 780px; margin: 50px auto; padding: 34px 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.04); } .tour-stat strong { display: block; font-size: clamp(2.4rem,5vw,3.6rem); font-weight: 800; line-height: 1; color: #fff; } .tour-stat strong em { font-style: normal; font-size: .4em; font-weight: 700; color: #7db4ff; margin-left: 2px; } .tour-stat span { display: block; margin-top: 12px; color: rgba(255,255,255,.65); font-size: .95rem; } /* ---------- 結 · 피날레 ---------- */ .tour-finale { padding: clamp(84px,10vw,130px) 0; color: #fff; overflow: hidden; background: radial-gradient(1000px 560px at 15% 10%, rgba(43,184,168,.28), transparent 60%), radial-gradient(900px 520px at 95% 90%, rgba(47,127,227,.4), transparent 60%), linear-gradient(150deg, var(--tour-dark1) 0%, var(--tour-dark2) 60%, var(--tour-dark3) 100%); } .tour-finale__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; } .tour-finale .tour-scene__title { color: #fff; font-size: clamp(2.2rem,5vw,3.8rem); } .tour-finale .tour-scene__lead { color: rgba(255,255,255,.82); } .tour-finale .tour-scene__lead b { color: #fff; } .tour-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 0; } .tour-finale .btn--primary { --btn-bg:#fff; --btn-color: var(--navy-900); } .tour-finale .btn--outline { --btn-color:#fff; --btn-border: rgba(255,255,255,.4); } .tour-finale__note { margin: 18px 0 0; font-size: .86rem; color: rgba(255,255,255,.6); } .tour-phones { position: relative; height: 560px; } .tour-phone { position: absolute; width: 250px; border-radius: 34px; overflow: hidden; background: #0a1226; border: 8px solid #0a1226; box-shadow: 0 50px 90px -30px rgba(0,0,0,.7); } .tour-phone::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 92px; height: 20px; background: #0a1226; border-radius: 0 0 14px 14px; z-index: 2; } .tour-phone img { display: block; width: 100%; height: auto; border-radius: 26px; } .tour-phone--back { top: 20px; right: 4%; transform: rotate(6deg); z-index: 1; } .tour-phone--front { bottom: 10px; left: 6%; z-index: 2; } @media (max-width: 980px){ .tour-finale__inner { grid-template-columns: 1fr; } .tour-phones { height: 500px; max-width: 560px; margin: 0 auto; } } @media (max-width: 460px){ .tour-phones { height: 440px; } .tour-phone { width: 200px; } } /* ---------- reveal / parallax ---------- */ .tour-anim .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .tour-anim .reveal.is-in { opacity: 1; transform: none; } .tour-anim .tour-pain li { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .tour-anim .tour-pain li.is-in { opacity: 1; transform: none; } .tour-anim .tour-pain li:nth-child(2){ transition-delay:.06s } .tour-anim .tour-pain li:nth-child(3){ transition-delay:.12s } .tour-anim .tour-pain li:nth-child(4){ transition-delay:.18s } .tour-anim .tour-pain li:nth-child(5){ transition-delay:.24s } .tour-anim .tour-pain li:nth-child(6){ transition-delay:.3s } [data-parallax] { will-change: translate; } /* ---------- 반응형 ---------- */ @media (max-width: 900px){ .tour-split { grid-template-columns: 1fr; gap: 34px; } .tour-split--rev .tour-split__copy { order: 0; } .tour-split--rev .tour-stack { order: 0; } .tour-flow { grid-template-columns: 1fr; gap: 16px; } .tour-flow__arrow { transform: rotate(90deg); } .tour-pain { grid-template-columns: 1fr; } .tour-statgrid { grid-template-columns: 1fr; gap: 18px; } } @media (prefers-reduced-motion: reduce){ .tour-anim .reveal, .tour-anim .tour-pain li { opacity: 1 !important; transform: none !important; transition: none !important; } .tour-scrollcue i::after { animation: none; } [data-parallax] { translate: none !important; } }