/* ========================================================================== 기프트원 — 전체 스타일시트 (디자인을 담당하는 파일) ========================================================================== [ 초보자 안내 ] · 색깔을 바꾸고 싶다면 → 바로 아래 :root 안의 색상 값만 고치세요. 한 곳만 고쳐도 사이트 전체 색이 한꺼번에 바뀝니다. · CSS 를 고친 뒤에는 터미널에서 아래를 한 번 실행하세요. python3 build.py (첫 화면용 CSS 를 index.html 안으로 복사하는 작업입니다) · 아래 @critical:start ~ @critical:end 구간은 "첫 화면에 필요한 CSS" 입니다. 이 구간이 index.html 안에 그대로 복사되어, 페이지가 즉시 그려집니다. 구간 자체를 옮기거나 지우지 마세요. 안에 있는 내용은 자유롭게 고쳐도 됩니다. · 각 섹션은 아래처럼 큰 제목 주석으로 나눠져 있습니다. /* ====== HEADER ====== * / Ctrl+F 로 섹션 이름을 검색하면 빠르게 찾을 수 있어요. [ 자주 찾는 것 ] 색상 팔레트 ......... :root (바로 아래) 버튼 모양 ........... .btn 헤더 ................ .header 첫 화면 ............. .hero 매입률 카드 ......... .plan 숫자 통계 카드 ...... .statcard 후기 카드 ........... .rcard FAQ ................. .faq__item 푸터 ................ .footer 팝업창 .............. .modal 반응형(모바일) ...... 파일 맨 아래 @media ========================================================================== */ /* @critical:start */ /* ============================================================ 색상 · 크기 팔레트 ★ 여기만 고쳐도 전체 디자인이 바뀝니다 ------------------------------------------------------------ 딥네이비 : 어두운 배경 (헤더 · 첫 화면 · 매입률 · 푸터) 오렌지 : 강조색 (버튼 · 숫자 · 밑줄) 숫자가 작을수록 밝고, 클수록 진합니다. (예: navy-400 < navy-900) ============================================================ */ :root{ --navy-950:#050E20; --navy-900:#071228; --navy-850:#0A1A3C; --navy-800:#0E2350; --navy-700:#153166; --navy-600:#1E4488; --navy-400:#4C6FB5; --navy-200:#A9BEE4; --orange-700:#C2410C; --orange-600:#E85D04; --orange-500:#FF6B1A; --orange-400:#FF8A3D; --orange-200:#FFD3B0; --orange-50:#FFF3EA; --ink:#0F172A; --ink-2:#334155; --muted:#64748B; --muted-2:#94A3B8; --line:#E4E9F2; --line-2:#EEF2F9; --bg:#F3F6FC; --bg-2:#FFFFFF; --kakao:#FEE500; /* 카카오톡 노란색 (바꾸지 마세요) */ /* 모서리 둥글기 — 숫자를 키우면 더 동글동글해집니다 */ --radius-sm:10px; --radius:16px; --radius-lg:24px; --radius-xl:32px; --radius-full:999px; /* 그림자 */ --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.04); --shadow:0 4px 12px rgba(15,23,42,.06),0 12px 32px rgba(15,23,42,.07); --shadow-lg:0 8px 24px rgba(15,23,42,.08),0 24px 64px rgba(15,23,42,.10); --shadow-orange:0 8px 20px rgba(255,107,26,.28); --shadow-dark:0 24px 60px rgba(3,9,24,.42); /* 어두운 배경 위 카드 */ /* 유리 효과 흐림 — 이 두 값만 씁니다 */ --blur:12px; --blur-sm:6px; /* 섹션 위아래 여백 — 이 두 값만 쓰고 임의값은 쓰지 않습니다 */ --sp-sec:clamp(72px,9vw,120px); /* 기본 */ --sp-sec-sm:clamp(44px,5.5vw,72px); /* 앞 섹션과 이야기가 이어질 때 */ --container:1180px; /* 본문 최대 너비 */ --header-h:84px; /* 헤더 높이 */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); /* 글꼴 — 다른 폰트를 쓰려면 맨 앞에 추가하세요 */ --font:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",sans-serif; } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)} body{ margin:0;font-family:var(--font);background:var(--bg);color:var(--ink); font-size:16px;line-height:1.65;letter-spacing:-.02em; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden;word-break:keep-all; } img,svg{max-width:100%;display:block} h1,h2,h3,h4{margin:0;line-height:1.28;letter-spacing:-.035em;font-weight:800} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} input{font:inherit} :focus-visible{outline:3px solid var(--orange-500);outline-offset:3px;border-radius:6px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- layout ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px} /* ── 섹션 위아래 여백 3단계 ──────────────────────────────────────── 앞 섹션과 이야기가 이어지면 --tight, 화제가 바뀌면 기본값을 씁니다. 전부 같은 값을 쓰면 페이지에 완급이 사라집니다. */ .section{padding:var(--sp-sec) 0;position:relative} .section--tight{padding-top:var(--sp-sec-sm)} /* 앞 내용과 이어질 때 */ .section--flush{padding-top:0} /* 바로 위에 띠가 붙을 때 */ /* 안쪽 .panel 이 이미 자기 여백(최대 88px)을 갖고 있어서, 섹션 여백까지 주면 두 배로 벌어집니다. 그래서 0 으로 둡니다. */ .section--panel{padding-top:0;padding-bottom:0} .panel{background:var(--bg-2);border-radius:var(--radius-xl);padding:clamp(40px,6vw,88px) 0;position:relative;overflow:hidden} /* 참고: 폰·갤러리 목업 안의 작은 요소(14~38px)는 2~12px 모서리를 그대로 씁니다. 바깥 상자와 같은 24px 을 주면 작은 칸이 알약처럼 보여서, 크기에 비례한 값이 맞습니다. */ /* ---------- shared type ---------- */ .eyebrow{ display:inline-block;padding:7px 16px;border-radius:var(--radius-full); background:var(--orange-50);color:var(--orange-600); font-size:13px;font-weight:700;letter-spacing:-.01em;margin-bottom:20px; } .eyebrow--onDark{background:rgba(255,107,26,.16);color:var(--orange-400)} .sec-head{text-align:center;margin-bottom:clamp(40px,5vw,64px)} /* 모든 섹션이 똑같이 시작하지 않도록, 몇 곳은 왼쪽으로 붙입니다. */ .sec-head--left{text-align:left} .sec-title{font-size:clamp(28px,4.4vw,46px);text-wrap:balance} .sec-title .hl{color:var(--orange-500)} .sec-desc{margin-top:18px;color:var(--muted);font-size:clamp(15px,1.6vw,17px);line-height:1.75} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:16px 30px;border-radius:var(--radius-full);font-weight:700;font-size:16px; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease); white-space:nowrap;position:relative; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn--primary{background:var(--orange-500);color:#fff;box-shadow:var(--shadow-orange)} .btn--primary:hover{background:var(--orange-400);box-shadow:0 12px 28px rgba(255,107,26,.36)} .btn--kakao{background:var(--kakao);color:#3C1E1E;box-shadow:0 8px 20px rgba(254,229,0,.30)} .btn--kakao:hover{background:#FFEF33} .btn--navy{background:var(--navy-800);color:#fff;box-shadow:0 8px 20px rgba(14,35,80,.28)} .btn--navy:hover{background:var(--navy-700)} .btn--ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(var(--blur-sm))} .btn--ghost:hover{background:rgba(255,255,255,.16)} .btn--outline{background:#fff;color:var(--navy-800);border:1.5px solid var(--line);box-shadow:var(--shadow-sm)} .btn--outline:hover{border-color:var(--orange-500);color:var(--orange-600)} .btn--sm{padding:12px 22px;font-size:14px} .btn--block{width:100%} /* ============================================================ HEADER ============================================================ */ .header{ position:fixed;inset:0 0 auto;height:var(--header-h);z-index:900; display:flex;align-items:center; transition:height .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease); } .header::before{ content:"";position:absolute;inset:0;background:rgba(7,18,40,.82); backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur)); opacity:0;transition:opacity .3s var(--ease); } .header.is-stuck{height:68px;box-shadow:0 1px 0 rgba(255,255,255,.06),0 8px 30px rgba(7,18,40,.25)} .header.is-stuck::before{opacity:1} .header__inner{position:relative;display:flex;align-items:center;gap:28px;width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:#fff;letter-spacing:-.045em} .brand__mark{width:34px;height:34px;flex:none} .nav{margin-left:auto;display:flex;align-items:center;gap:4px} .nav a{ position:relative;padding:10px 14px;font-size:15px;font-weight:600;color:rgba(255,255,255,.78); border-radius:var(--radius-full);transition:color .2s var(--ease),background-color .2s var(--ease); } .nav a::after{ content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px; background:var(--orange-500);transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease); } .nav a:hover{color:#fff} .nav a.is-active{color:#fff} .nav a.is-active::after{transform:scaleX(1)} .header__cta{margin-left:8px} .burger{display:none;width:44px;height:44px;margin-left:auto;border-radius:12px;align-items:center;justify-content:center} .burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:relative;transition:.3s var(--ease)} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;border-radius:2px;transition:.3s var(--ease)} .burger span::before{top:-6px}.burger span::after{top:6px} .burger.is-open span{background:transparent} .burger.is-open span::before{top:0;transform:rotate(45deg)} .burger.is-open span::after{top:0;transform:rotate(-45deg)} .mobilenav{ position:fixed;inset:var(--header-h) 0 auto;z-index:890;background:rgba(7,18,40,.98); backdrop-filter:blur(var(--blur));padding:16px 24px 28px;transform:translateY(-12px); opacity:0;visibility:hidden;transition:.3s var(--ease);border-bottom:1px solid rgba(255,255,255,.08); } .mobilenav.is-open{opacity:1;visibility:visible;transform:none} .mobilenav a{display:block;padding:14px 4px;color:rgba(255,255,255,.85);font-weight:600;border-bottom:1px solid rgba(255,255,255,.07)} .mobilenav .btn{margin-top:20px} /* ============================================================ HERO ============================================================ */ .hero{ position:relative;padding:calc(var(--header-h) + 56px) 0 var(--sp-sec); background: radial-gradient(1100px 620px at 82% 8%,rgba(255,107,26,.20),transparent 62%), radial-gradient(900px 560px at 12% 92%,rgba(30,68,136,.55),transparent 60%), linear-gradient(168deg,var(--navy-900) 0%,var(--navy-850) 46%,var(--navy-800) 100%); color:#fff;overflow:hidden; } .hero::after{ content:"";position:absolute;inset:auto 0 -1px;height:120px; background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none; } .hero__grid{ position:relative;z-index:2;display:grid;grid-template-columns:1fr minmax(420px,560px) 1fr; align-items:center;gap:24px; } .hero__copy{text-align:center;grid-column:2} .hero h1{font-size:clamp(30px,4.9vw,54px);line-height:1.24;letter-spacing:-.045em} .hero h1 .hl{ background:linear-gradient(100deg,var(--orange-400),var(--orange-500)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero__lead{margin-top:24px;color:rgba(255,255,255,.72);font-size:clamp(15px,1.7vw,17px);line-height:1.85} .hero__card{ margin-top:36px;padding:26px;border-radius:var(--radius-lg); background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur)); box-shadow:var(--shadow-dark); } .hero__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-bottom:22px} .hero__chips li{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.86)} .hero__chips svg{width:16px;height:16px;flex:none;color:var(--orange-400)} .hero__actions{display:grid;gap:12px} .hero__note{margin-top:18px;font-size:12.5px;color:rgba(255,255,255,.42);letter-spacing:-.01em} /* phone mockups */ .hero__phone{position:relative;display:flex;justify-content:center} .hero__phone--l{grid-column:1;justify-content:flex-end} .hero__phone--r{grid-column:3;justify-content:flex-start} .phone{ width:232px;border-radius:34px;padding:9px; background:linear-gradient(160deg,#22355F,#0B1732); box-shadow:0 40px 80px rgba(2,7,20,.55),inset 0 1px 0 rgba(255,255,255,.16); position:relative; } .phone--l{transform:rotate(-9deg) translateY(18px)} .phone--r{transform:rotate(9deg) translateY(-18px)} .phone::before{ content:"";position:absolute;top:17px;left:50%;transform:translateX(-50%); width:66px;height:5px;border-radius:5px;background:rgba(255,255,255,.22);z-index:3; } .phone__screen{background:#fff;border-radius:27px;padding:26px 14px 14px;color:var(--ink);overflow:hidden} .pscreen__top{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:var(--muted-2);font-weight:600;margin-bottom:10px} .pscreen__label{font-size:11px;font-weight:700;color:var(--muted)} .pscreen__hero{ border-radius:14px;padding:14px;color:#fff;margin-bottom:10px; background:linear-gradient(135deg,var(--navy-700),var(--navy-600)); } .pscreen__hero small{font-size:9.5px;opacity:.72;display:block;letter-spacing:0} .pscreen__amt{font-size:21px;font-weight:800;letter-spacing:-.04em;margin-top:4px} .pscreen__amt .won{font-size:13px;margin-left:2px} .pscreen__bar{height:5px;border-radius:3px;background:rgba(255,255,255,.22);margin-top:10px;overflow:hidden} .pscreen__bar i{display:block;height:100%;width:78%;border-radius:3px;background:var(--orange-500)} .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:10px} .pgrid div{aspect-ratio:1;border-radius:10px;background:var(--line-2);display:grid;place-items:center} .pgrid div span{width:14px;height:14px;border-radius:4px;background:var(--navy-200)} .pgrid div:nth-child(2) span{background:var(--orange-200)} .pgrid div:nth-child(5) span{background:var(--orange-200)} .prow{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;background:var(--line-2);margin-bottom:6px} .prow i{width:16px;height:16px;border-radius:5px;background:var(--navy-200);flex:none} .prow b{font-size:9.5px;font-weight:700;color:var(--ink-2)} .prow em{margin-left:auto;font-size:9.5px;font-style:normal;font-weight:800;color:var(--orange-600)} /* ============================================================ REVEAL ANIMATION ============================================================ */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} } /* ---------- 처음에 숨어 있어야 하는 것들 ---------- style.css 전체는 화면이 그려진 뒤에 도착합니다. 그 사이 몇 백 밀리초 동안 팝업과 '맨 위로' 버튼이 잠깐 보였다 사라지는 현상이 있어서, '숨김' 상태만 여기(첫 화면 CSS)에 미리 넣어 둡니다. 실제 생김새는 아래쪽 본 규칙에서 정합니다. 지우지 마세요. */ .modal{position:fixed;inset:0;z-index:1000;opacity:0;visibility:hidden} .modal.is-open{opacity:1;visibility:visible} .totop{opacity:0;visibility:hidden} .totop.is-on{opacity:1;visibility:visible} /* ---------- 반응형 (크리티컬: 헤더 · 히어로) ---------- */ @media (max-width:1100px){ .hero__grid{grid-template-columns:1fr} .hero__copy{grid-column:1;order:1} .hero__phone{display:none} } @media (max-width:900px){ .nav,.header__cta{display:none} .burger{display:flex} } @media (max-width:680px){ .container{padding-inline:18px} .floating{right:14px;bottom:14px} .fab{padding:12px 18px;font-size:14px} } /* @critical:end */ /* ============================================================ WHY (6 reasons) ============================================================ */ .why{background:var(--bg)} .why__grid{display:grid;gap:20px} .why__row{display:grid;gap:20px} .why__row--a{grid-template-columns:.85fr 1.3fr .85fr} .why__row--b{grid-template-columns:1.3fr .85fr .85fr} .wcard{ background:linear-gradient(180deg,#FBFCFE,#F5F8FD); border:1px solid var(--line);border-radius:var(--radius-lg); padding:30px 28px;display:flex;flex-direction:column;gap:14px; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease); } .wcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--orange-200)} .wcard__no{ width:34px;height:34px;border-radius:11px;display:grid;place-items:center; background:var(--navy-800);color:#fff;font-size:13px;font-weight:800;letter-spacing:0; } .wcard h3{font-size:19px;color:var(--navy-800)} .wcard p{color:var(--muted);font-size:14.5px;line-height:1.75} .wcard__art{margin-top:auto;border-radius:var(--radius);background:#fff;border:1px solid var(--line-2);padding:18px;display:grid;place-items:center;min-height:132px} .wcard__arts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto} .wcard__arts .wcard__art{margin-top:0} /* ============================================================ STATS ============================================================ */ .stats{background:var(--bg)} .stats__grid{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:40px;align-items:center} /* 숫자 카드 — 흩뿌리지 않고 2×2 로 정렬합니다. (모바일까지 같은 구조) */ .statgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .statcard{ background:#fff;border-radius:var(--radius-lg);padding:32px 22px;text-align:center; box-shadow:var(--shadow-sm); transition:transform .4s var(--ease),box-shadow .4s var(--ease),opacity .8s var(--ease-out); } .statcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); } .statcard b{ display:flex;align-items:baseline;justify-content:center;gap:1px;white-space:nowrap; font-size:clamp(28px,3.2vw,36px);font-weight:800;color:var(--orange-500); letter-spacing:-.05em;line-height:1; } /* 숫자는 폭이 고정된 글꼴로 — 0부터 올라갈 때 카드가 들썩이지 않습니다. */ .statcard__n{font-variant-numeric:tabular-nums} /* 단위(분·%·만건+)는 숫자보다 작게 깔아 줄바꿈을 막습니다. */ .statcard__u{font-size:.52em;letter-spacing:-.02em} .statcard__label{display:block;margin-top:10px;font-size:13px;color:var(--muted);font-weight:600} .stats__phone{display:flex;justify-content:center} .stats__side p{color:var(--muted);font-size:15.5px;line-height:1.85;text-wrap:pretty} .stats__side .sec-title{font-size:clamp(26px,3.6vw,38px);text-align:left} /* 소개 영상을 넣었을 때만 쓰입니다. (index.html 의 stats__video 주석 참고) */ .stats__video{margin-top:26px;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow)} .stats__video iframe{display:block;width:100%;height:100%;border:0} .stats__actions{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap} /* phone content for stats */ .phone--stats{width:280px;transform:none} .phone--stats .phone__screen{padding:30px 16px 18px} .pstat__title{text-align:center;font-size:15px;font-weight:800;color:var(--navy-800);letter-spacing:-.04em} .pstat__sub{text-align:center;font-size:10px;color:var(--muted);margin-top:5px;margin-bottom:14px} .pflow{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:12px 8px;border-radius:12px;background:var(--line-2);margin-bottom:12px} .pflow__item{text-align:center;flex:1} .pflow__ico{width:30px;height:30px;margin:0 auto 6px;border-radius:9px;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow-sm)} .pflow__ico svg{width:15px;height:15px;color:var(--navy-600)} .pflow__item span{font-size:9px;color:var(--muted);font-weight:600} .pflow__arrow{color:var(--muted-2);font-size:11px} .pfoot{display:flex;justify-content:center;gap:10px;margin-top:12px;font-size:8.5px;color:var(--muted-2);font-weight:600} /* ============================================================ TICKER ============================================================ */ .ticker-wrap{position:relative;padding:60px 0;overflow:hidden} .ticker{ transform:rotate(-2.2deg);background:var(--navy-800); padding:18px 0;overflow:hidden;position:relative;width:108%;margin-left:-4%; box-shadow:0 18px 44px rgba(14,35,80,.22); } /* ★ 흐르는 띠 속도 — 숫자를 키우면 느려집니다. (26s → 48s 로 늦춤) */ .ticker__track{display:flex;width:max-content;animation:marquee 48s linear infinite} .ticker:hover .ticker__track{animation-play-state:paused} .ticker__track span{ display:flex;align-items:center;gap:38px;padding-right:38px; font-size:clamp(22px,3vw,34px);font-weight:800;color:#fff;letter-spacing:-.045em;white-space:nowrap; } .ticker__track span i{width:9px;height:9px;border-radius:50%;background:var(--orange-500);flex:none} @keyframes marquee{to{transform:translateX(-50%)}} .ticker__badge{ position:absolute;top:34px;left:50%;transform:translateX(-50%);z-index:3; background:var(--orange-500);color:#fff;font-size:12.5px;font-weight:700; padding:7px 18px;border-radius:var(--radius-full);box-shadow:var(--shadow-orange); } /* ============================================================ PRICING ============================================================ */ .pricing{ border-radius:var(--radius-xl);color:#fff;overflow:hidden;position:relative; background: radial-gradient(800px 480px at 88% 0%,rgba(255,107,26,.24),transparent 60%), linear-gradient(165deg,var(--navy-900),var(--navy-800)); padding:clamp(56px,7vw,96px) 0; } .pricing .sec-title{color:#fff} .pricing .sec-desc{color:rgba(255,255,255,.62)} .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch} .plan{ background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13); border-radius:var(--radius-lg);padding:34px 30px;display:flex;flex-direction:column; backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur)); transition:transform .4s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease); } .plan:hover{transform:translateY(-7px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.24)} .plan--featured{ background:rgba(255,255,255,.11);border-color:rgba(255,138,61,.55); box-shadow:var(--shadow-dark); } .plan{position:relative} .plan--featured{padding-top:34px} .plan__head{display:flex;align-items:flex-start;gap:10px;margin-bottom:26px;min-height:60px} .plan__name{font-size:19.5px;font-weight:800;letter-spacing:-.045em;line-height:1.35} .plan__sub{margin-top:6px;font-size:13px;color:rgba(255,255,255,.55);font-weight:600} .plan__tag{ position:absolute;top:0;left:50%;transform:translate(-50%,-50%); background:var(--orange-500);color:#fff;font-size:11.5px;font-weight:700; padding:6px 14px;border-radius:var(--radius-full);white-space:nowrap; box-shadow:var(--shadow-orange); } .plan__rate{font-size:clamp(34px,4.4vw,46px);font-weight:800;letter-spacing:-.055em;line-height:1} .plan__rate small{font-size:.46em;font-weight:700;color:rgba(255,255,255,.6);margin-right:8px;letter-spacing:-.03em} .plan__rate .num{color:var(--orange-400)} .plan__rule{height:1px;background:rgba(255,255,255,.15);margin:26px 0 22px} .plan__list{display:grid;gap:13px;margin-bottom:30px} .plan__list li{display:flex;gap:10px;font-size:14.5px;color:rgba(255,255,255,.84);line-height:1.6} .plan__list svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--orange-400)} .plan .btn{margin-top:auto} .pricing__note{margin-top:34px;text-align:center;font-size:13px;color:rgba(255,255,255,.5);line-height:1.9} /* ============================================================ SERVICES ============================================================ */ .svc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center;margin-top:clamp(48px,7vw,96px)} .svc:first-of-type{margin-top:0} .svc--rev .svc__body{order:2} .svc__tag{ display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:var(--radius-full); background:#fff;border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:700; box-shadow:var(--shadow-sm);margin-bottom:20px; } .svc__tag svg{width:14px;height:14px;color:var(--orange-500)} .svc h3{font-size:clamp(26px,3.6vw,38px);letter-spacing:-.045em} .svc h3 .hl{color:var(--orange-500);display:block} .svc__desc{margin-top:20px;color:var(--muted);font-size:15.5px;line-height:1.85} .svc__list{margin-top:26px;display:grid;gap:16px} .svc__list li{display:flex;gap:12px} .svc__list svg{width:20px;height:20px;flex:none;margin-top:2px;color:var(--orange-500)} .svc__list b{display:block;font-size:15.5px;color:var(--navy-800);font-weight:700} .svc__list span{display:block;margin-top:3px;font-size:14px;color:var(--muted);line-height:1.7} .svc .btn{margin-top:30px} .svc__art{ border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line-2); padding:36px;box-shadow:var(--shadow);position:relative;overflow:hidden; } .svc__art::before{ content:"";position:absolute;width:260px;height:260px;border-radius:50%; background:radial-gradient(circle,rgba(255,107,26,.13),transparent 70%);top:-70px;right:-70px; } .svc__art-title{text-align:center;font-size:clamp(24px,3vw,34px);font-weight:800;color:var(--navy-800);letter-spacing:-.05em;position:relative} .svc__art-pill{ display:block;width:fit-content;margin:12px auto 26px;padding:6px 16px;border-radius:var(--radius-full); background:var(--orange-50);color:var(--orange-600);font-size:12.5px;font-weight:700;position:relative; } .svc__mock{position:relative;display:grid;gap:10px} .mockrow{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--line-2)} .mockrow__ico{width:38px;height:38px;border-radius:11px;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow-sm);flex:none} .mockrow__ico svg{width:19px;height:19px;color:var(--navy-600)} .mockrow b{font-size:14px;color:var(--navy-800);display:block} .mockrow small{font-size:12px;color:var(--muted)} .mockrow em{margin-left:auto;font-style:normal;font-weight:800;font-size:15px;color:var(--orange-600);letter-spacing:-.03em} .mockrow--hl{background:linear-gradient(135deg,var(--navy-700),var(--navy-600));color:#fff} .mockrow--hl b{color:#fff}.mockrow--hl small{color:rgba(255,255,255,.6)} .mockrow--hl em{color:var(--orange-400)} .mockrow--hl .mockrow__ico{background:rgba(255,255,255,.14);box-shadow:none} .mockrow--hl .mockrow__ico svg{color:#fff} /* ============================================================ HOW (3 steps) ============================================================ */ .how{background:linear-gradient(180deg,#FFFFFF,#F7F9FE)} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative} .step{text-align:center;padding:0 12px} .step__ico{ width:88px;height:88px;margin:0 auto 22px;border-radius:var(--radius-lg);display:grid;place-items:center; background:linear-gradient(160deg,#FFF6EF,#FFE9D8);border:1px solid var(--orange-200); transition:transform .45s var(--ease),box-shadow .45s var(--ease); } .step:hover .step__ico{transform:translateY(-6px) rotate(-4deg);box-shadow:0 16px 34px rgba(255,107,26,.22)} .step__ico svg{width:36px;height:36px;color:var(--orange-600)} .step h3{font-size:20px;color:var(--navy-800)} .step p{margin-top:12px;color:var(--muted);font-size:14.5px;line-height:1.75} .step p b{display:block;color:var(--ink-2);font-weight:700;margin-bottom:2px} .rail{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;margin:46px 0 34px;position:relative} .rail__node{ width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin:0 auto; background:#fff;border:1.5px solid var(--line);color:var(--muted);font-size:13px;font-weight:800; letter-spacing:0;position:relative;z-index:2;transition:.4s var(--ease); } .rail__node.is-on{background:var(--orange-500);border-color:var(--orange-500);color:#fff;box-shadow:var(--shadow-orange)} .rail::before{ content:"";position:absolute;left:16.6%;right:16.6%;top:50%;height:0; border-top:2px dashed var(--line);z-index:1; } .how__cta{text-align:center} /* ============================================================ REVIEWS ============================================================ */ .reviews__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,72px);align-items:start} .reviews h2{font-size:clamp(28px,4vw,42px)} .reviews h2 .hl{color:var(--orange-500);display:block} .rating{display:flex;align-items:center;gap:9px;margin-top:24px;flex-wrap:wrap} .stars{display:flex;gap:2px} .stars svg{width:17px;height:17px;color:#FFB020} .rating b{font-size:15px;font-weight:700} .reviews__more{margin-top:12px;font-size:14px;color:var(--muted)} .reviews__more b{color:var(--orange-600)} .rcards{display:grid;gap:20px} .rcard{ background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:28px 30px; box-shadow:var(--shadow-sm); transition:opacity .32s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease); } .rcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)} /* 다른 후기로 갈아 끼우는 순간 — main.js 8번 블록이 붙였다 뗍니다. */ .rcard.is-swapping{opacity:0;transform:translateY(8px)} .rcard__top{display:flex;align-items:center;gap:14px;margin-bottom:18px} .avatar{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;letter-spacing:-.04em} .avatar--1{background:linear-gradient(140deg,#F97316,#FB923C)} .avatar--2{background:linear-gradient(140deg,#1E4488,#4C6FB5)} .avatar--3{background:linear-gradient(140deg,#0E2350,#153166)} .rcard__who b{display:block;font-size:16px;color:var(--navy-800)} .rcard__who span{font-size:13px;color:var(--muted-2)} .rcard__top .stars{margin-left:auto} .rcard p{color:var(--ink-2);font-size:14.5px;line-height:1.85} /* ============================================================ PARTNERS ============================================================ */ .partners__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;justify-items:center} .plogo{ width:100%;height:88px;border-radius:var(--radius);background:#fff;border:1px solid var(--line-2); display:grid;place-items:center;padding:14px;text-align:center; font-weight:800;font-size:14.5px;color:var(--navy-800);letter-spacing:-.04em; box-shadow:var(--shadow-sm);transition:.35s var(--ease); } .plogo:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--orange-600)} .plogo span{display:block;font-size:11px;font-weight:600;color:var(--muted-2);margin-top:3px;letter-spacing:-.01em} /* ============================================================ GALLERY (screens) ============================================================ */ .gallery{overflow:hidden} .gal__viewport{overflow:hidden;padding:20px 0 10px} .gal__track{display:flex;gap:20px;transition:transform .6s var(--ease-out);will-change:transform} .gscreen{ flex:0 0 250px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line); box-shadow:var(--shadow-sm);padding:20px 18px;transition:.5s var(--ease);opacity:.55;transform:scale(.94); } .gscreen.is-center{opacity:1;transform:scale(1.04);box-shadow:var(--shadow-lg);border-color:var(--orange-200)} .gscreen__tag{ display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;color:var(--navy-600); background:var(--line-2);padding:4px 9px;border-radius:var(--radius-full);margin-bottom:12px; } .gscreen__tag i{width:5px;height:5px;border-radius:50%;background:var(--orange-500)} .gscreen h4{font-size:19px;color:var(--navy-800);letter-spacing:-.05em} .gscreen__desc{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.6;min-height:34px} .gscreen__body{margin-top:14px;display:grid;gap:8px} .gline{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;background:var(--line-2);font-size:10.5px;font-weight:600;color:var(--ink-2)} .gline i{width:14px;height:14px;border-radius:4px;background:var(--navy-200);flex:none} .gline em{margin-left:auto;font-style:normal;font-weight:800;color:var(--orange-600)} .gline--ok i{background:#22C55E} .gscreen__amt{text-align:center;padding:16px 0} .gscreen__amt b{display:block;font-size:26px;font-weight:800;color:var(--navy-800);letter-spacing:-.05em} .gscreen__amt small{font-size:10px;color:var(--muted)} .gdots{display:flex;justify-content:center;gap:9px;margin-top:26px} .gdots button{width:9px;height:9px;border-radius:50%;background:var(--line);transition:.3s var(--ease)} .gdots button.is-on{background:var(--orange-500);width:26px;border-radius:5px} .gal__cta{margin-top:44px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ============================================================ FAQ ============================================================ */ .faq__list{max-width:840px;margin-inline:auto;display:grid;gap:14px} .faq__item{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;transition:.35s var(--ease)} .faq__item.is-open{border-color:var(--orange-200);box-shadow:var(--shadow)} .faq__q{ width:100%;display:flex;align-items:center;gap:14px;padding:22px 26px;text-align:left; font-size:16.5px;font-weight:700;color:var(--navy-800);letter-spacing:-.035em; } .faq__q .plus{ width:22px;height:22px;flex:none;position:relative;transition:transform .35s var(--ease); } .faq__q .plus::before,.faq__q .plus::after{ content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); background:var(--orange-500);border-radius:2px; } .faq__q .plus::before{width:14px;height:2px} .faq__q .plus::after{width:2px;height:14px;transition:opacity .3s var(--ease)} .faq__item.is-open .plus{transform:rotate(180deg)} .faq__item.is-open .plus::after{opacity:0} .faq__a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)} .faq__a p{padding:0 26px 24px;color:var(--muted);font-size:14.8px;line-height:1.9} /* ============================================================ FOOTER ============================================================ */ .footer{background:var(--navy-900);color:rgba(255,255,255,.72);padding:72px 0 40px;margin-top:20px} .footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:40px} .footer .brand{margin-bottom:20px} .footer__desc{font-size:14.5px;line-height:1.85;color:rgba(255,255,255,.6)} .footer__meta{margin-top:24px;font-size:13.5px;color:rgba(255,255,255,.5);line-height:1.9} .footer__meta b{color:#fff;font-weight:700} .footer h4{color:#fff;font-size:16px;margin-bottom:20px} .footer__links{display:grid;gap:13px} .footer__links a{font-size:14.5px;color:rgba(255,255,255,.62);transition:color .2s var(--ease)} .footer__links a:hover{color:var(--orange-400)} .footer__notice{border-top:1px solid rgba(255,255,255,.1);padding:30px 0;font-size:13px;line-height:2;color:rgba(255,255,255,.5)} .footer__notice b{display:block;color:#fff;font-weight:700;margin-bottom:10px;font-size:14px} .footer__bottom{ display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between; background:rgba(255,255,255,.045);border-radius:var(--radius);padding:22px 28px;font-size:13.5px;color:rgba(255,255,255,.5); } .footer__bottom nav{display:flex;flex-wrap:wrap;gap:14px} .footer__bottom nav a:hover{color:#fff} /* ============================================================ MODAL + FLOATING ============================================================ */ /* ── 성능 주의 ──────────────────────────────────────────────────── 1) transition 에 속성 이름을 반드시 적습니다. 값만 적으면 'all' 이 되어 브라우저가 바뀌지 않은 속성까지 전부 확인합니다. 2) 뒷배경(.modal__scrim)에는 backdrop-filter 를 쓰지 않습니다. 화면 전체를 매 프레임 다시 흐리게 만드는데, 뒤에서 마퀴가 계속 움직이면 그 결과를 재사용할 수 없어 프레임이 무너집니다. 대신 불투명도를 조금 올려 같은 인상을 냅니다. */ .modal{ position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px; opacity:0;visibility:hidden; transition:opacity .3s var(--ease),visibility .3s var(--ease); } .modal.is-open{opacity:1;visibility:visible} .modal__scrim{position:absolute;inset:0;background:rgba(5,14,32,.82)} .modal__box{ position:relative;width:100%;max-width:520px;max-height:88vh;overflow:auto;background:#fff; border-radius:var(--radius-xl);box-shadow:var(--shadow-lg); transform:translateY(18px) scale(.98); transition:transform .4s var(--ease-out); } .modal.is-open .modal__box{transform:none} .modal__close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--muted);z-index:3;transition:transform .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease)} .modal__close:hover{background:var(--line);color:var(--ink);transform:rotate(90deg)} .modal__close svg{width:18px;height:18px} .modal__main{padding:38px 40px 34px} .modal__main h3{font-size:24px;color:var(--navy-800)} .modal__main .sub{margin-top:10px;color:var(--muted);font-size:14.5px} .field{margin-top:17px} .field label{display:block;font-size:13.5px;font-weight:700;color:var(--ink-2);margin-bottom:8px} .field input{ width:100%;padding:15px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--line); background:#fff;font-size:15px; transition:border-color .25s var(--ease),box-shadow .25s var(--ease); } .field input:focus{outline:none;border-color:var(--orange-500);box-shadow:0 0 0 4px rgba(255,107,26,.12)} /* ── 상품권 종류 고르는 목록 (직접 만든 드롭다운) ────────────────── 브라우저 기본