@charset "utf-8"; /* ========================================================================== 블로그영 (blogyoung.com) 리모델링 벤치마크 구조 실측 : k-marketing.co.kr → measurements.md 컬러 : 기존 브랜드 노랑 #FFEA00 유지 + 먹색 #1A1A1A 폰트 : Pretendard (주) / Wanted Sans (.num — 숫자·영문 전용) ========================================================================== */ :root{ --y:#FFEA00; /* 브랜드 노랑 (기존 블로그영 헤더색 실측값) */ --y-d:#F0D400; /* 노랑 눌림 */ --y-soft:#FFF9CC; /* 아주 옅은 노랑 */ --ink:#1A1A1A; /* 먹색 */ --ink-2:#242424; --txt:#2E2E2E; --gray:#767676; --gray-l:#9A9A9A; --line:#E7E7E7; --bg:#FFFFFF; --bg-g:#F7F7F5; --wrap:1200px; --hd:76px; --r:18px; /* 카드 모서리 (벤치마크 20px 실측 → 18px) */ --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:var(--hd)} body{ font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Malgun Gothic",sans-serif; font-size:16px;line-height:1.7;color:var(--txt);background:var(--bg); letter-spacing:-.025em; /* ★한글 사이트 필수 — 마지막 글자가 다음 줄로 쪼개지는 것 방지 (v5 §8 교훈) */ word-break:keep-all;overflow-wrap:break-word; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul,ol{list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} input,select,textarea{font:inherit;color:inherit} svg{display:block} /* 숫자·영문 전용 — Wanted Sans (400~1000만 지원. 얇은 굵기 쓰지 말 것) */ .num{font-family:"Wanted Sans Variable","Wanted Sans","Pretendard Variable",sans-serif; font-feature-settings:"tnum";letter-spacing:-.02em} .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px} .ic-sm{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;flex:none} .pc-br{display:inline} /* ---------- 등장 애니메이션 (AOS fade-up 실측 재현) ---------- ★.js 로 감싼 이유 : 자바스크립트가 막히거나 오류가 나면 .on 이 안 붙어 본문이 통째로 안 보이게 된다. 에서 html 에 .js 를 붙이므로, JS 가 죽으면 이 규칙 자체가 적용되지 않아 내용이 그냥 보인다. */ .js .reveal{opacity:0;transform:translateY(26px); transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .reveal.on{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js .reveal{opacity:1;transform:none;transition:none} } /* ---------- 버튼 ---------- */ .btn-y,.btn-o{display:inline-flex;align-items:center;justify-content:center;gap:8px; height:48px;padding:0 26px;border-radius:999px;font-weight:700;font-size:15px; letter-spacing:-.03em;transition:all .25s var(--ease);white-space:nowrap} .btn-y{background:var(--y);color:var(--ink);box-shadow:0 4px 16px rgba(255,234,0,.34)} .btn-y:hover{background:var(--y-d);transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,234,0,.45)} .btn-o{border:1.5px solid rgba(255,255,255,.34);color:#fff} .btn-o:hover{border-color:var(--y);color:var(--y)} .btn-lg{height:56px;padding:0 32px;font-size:16.5px} .btn-full{width:100%;height:56px;font-size:16.5px;margin-top:6px} .sec-gray .btn-o,.sec:not(.sec-ink) .btn-o{border-color:var(--line);color:var(--txt)} .sec:not(.sec-ink) .btn-o:hover{border-color:var(--ink);color:var(--ink);background:#fff} /* ========================================================================== 헤더 — 벤치마크 70px 고정 실측 → 76px (로고+부가정보 수용) ========================================================================== */ .hd{position:fixed;inset:0 0 auto;z-index:90;height:var(--hd); background:rgba(255,255,255,0);transition:background .3s,box-shadow .3s,height .3s} .hd.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line)} .hd-in{max-width:var(--wrap);height:var(--hd);margin:0 auto;padding:0 24px; display:flex;align-items:center;gap:32px} .logo{display:flex;align-items:center;gap:10px;flex:none} /* 실제 로고에서 입술 부분만 잘라낸 마크 (원본 56×43) */ .logo-mark{width:auto;height:38px;flex:none; filter:drop-shadow(0 2px 5px rgba(0,0,0,.32));transition:height .3s} .hd.solid .logo-mark{filter:none} .logo-txt{font-family:"Wanted Sans Variable","Wanted Sans",sans-serif; font-weight:600;font-size:19px;letter-spacing:-.045em;color:#fff;transition:color .3s} .logo-txt b{font-weight:900} .hd.solid .logo-txt{color:var(--ink)} .gnb{display:flex;gap:6px;margin-right:auto} .gnb a{position:relative;padding:8px 15px;font-size:16px;font-weight:600; color:rgba(255,255,255,.86);border-radius:9px;transition:color .25s,background .25s} .gnb a::after{content:"";position:absolute;left:15px;right:15px;bottom:2px;height:2px; background:var(--y);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)} .gnb a:hover::after,.gnb a.on::after{transform:scaleX(1)} .hd.solid .gnb a{color:var(--txt)} .gnb a:hover{color:#fff} .hd.solid .gnb a:hover{color:var(--ink)} .hd-r{display:flex;align-items:center;gap:14px;flex:none} .hd-tel{display:flex;flex-direction:column;line-height:1.15;text-align:right} .hd-tel b{font-size:19px;font-weight:800;color:#fff;transition:color .3s} .hd-tel span{font-size:11.5px;color:rgba(255,255,255,.6);font-weight:500;letter-spacing:-.02em} .hd.solid .hd-tel b{color:var(--ink)} .hd.solid .hd-tel span{color:var(--gray)} .hd-cta{height:42px;padding:0 20px;font-size:14.5px} .ham{display:none;width:42px;height:42px;flex-direction:column;justify-content:center; align-items:center;gap:5px} .ham i{width:20px;height:2px;background:#fff;border-radius:2px;transition:.3s var(--ease)} .hd.solid .ham i{background:var(--ink)} .hd.open .ham i:nth-child(1){transform:translateY(7px) rotate(45deg)} .hd.open .ham i:nth-child(2){opacity:0} .hd.open .ham i:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mnav{display:none;flex-direction:column;background:#fff;border-top:1px solid var(--line); padding:8px 24px 20px;box-shadow:0 14px 24px rgba(0,0,0,.09)} .mnav a{padding:14px 4px;font-size:16.5px;font-weight:600;border-bottom:1px solid #F1F1F1} .mnav a:last-child{border:0} .mnav-tel{margin-top:12px;background:var(--y);color:var(--ink);border-radius:12px; text-align:center;font-weight:800} /* ========================================================================== 1. 히어로 ★벤치마크 실측은 750px 였는데, 오른쪽 사람 사진을 더 크게 넣으려고 **820px 로 올렸다**(미르 지시 2026-09-01). 사진 높이와 짝이라 같이 움직인다. ========================================================================== */ .hero{position:relative;height:820px;min-height:820px;background:var(--ink); display:flex;align-items:center;overflow:hidden;isolation:isolate} .hero-bg{position:absolute;inset:0;z-index:-1} .hero-bg span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5} .hero-bg span:nth-child(1){width:620px;height:620px;top:-190px;right:-140px; background:radial-gradient(circle,rgba(255,234,0,.42),transparent 68%); animation:float1 17s ease-in-out infinite} .hero-bg span:nth-child(2){width:520px;height:520px;bottom:-200px;left:-130px; background:radial-gradient(circle,rgba(255,234,0,.2),transparent 68%); animation:float2 21s ease-in-out infinite} /* 3번째 얼룩 = 사람 뒤에 까는 따뜻한 노란 빛. 사진이 먹색 위에 덩그러니 떠 있지 않게 잡아 준다 (2026-09-01) */ .hero-bg span:nth-child(3){width:1100px;height:1100px;top:50%;right:-240px; margin-top:-540px;filter:blur(120px);opacity:.75; background:radial-gradient(circle,rgba(255,214,64,.36),transparent 64%)} @keyframes float1{0%,100%{transform:translate(0,0)}50%{transform:translate(-52px,42px)}} @keyframes float2{0%,100%{transform:translate(0,0)}50%{transform:translate(46px,-38px)}} .hero::after{content:"";position:absolute;inset:auto 0 0;height:190px;z-index:-1; background:linear-gradient(to bottom,transparent,rgba(0,0,0,.42))} .hero-in{position:relative;z-index:1;max-width:var(--wrap);width:100%;margin:0 auto;padding:0 24px} /* --- 오른쪽 사람 사진 ----------------------------------------------------- ★★★배경 지우기는 세 번 만에 잡았다 (2026-09-01). measurements.md §19-4 참고 1차 노란배경 오려내기 → 얼굴이 보라색이 됐다 2차 노란 판 깔기 → "짜깁기가 티난다 / 왼쪽 사람이 가려진다"(미르) 3차 초록 크로마키 → 미르가 초록 배경으로 다시 만들어 줬다. 깨끗하다. ★배치 원칙 (미르 2026-09-01) · **왼쪽은 자연스럽게 다 보이고, 오른쪽은 화면 밖으로 잘려도 된다.** 그래서 왼쪽 끝을 52% 에 고정하고 오른쪽으로 흘려보낸다. (.hero 의 overflow:hidden 이 알아서 잘라 준다) · **사람을 크게.** 높이를 히어로보다 크게 잡아 아래를 잘라낸다. 머리는 헤더(76px) 밑에서 시작하도록 bottom 을 맞췄다. · 마스크·덮개를 안 쓴다. 씌우면 사람이 흐려져서 또 "가려진다"가 된다. */ /* ★머리 꼭대기 y = 히어로높이(820) + 216 - 사진높이(950) = 86 헤더가 76px 이라 그 바로 밑이다. **세 숫자가 한 묶음이다.** 사진을 키우려면 히어로 높이를 같이 올려야 머리가 안 잘린다. */ .hero-art{position:absolute;z-index:-1;left:51%;bottom:-216px; height:950px;pointer-events:none;line-height:0} .hero-art picture{display:contents} .hero-art img{display:block;height:100%;width:auto;max-width:none} /* --- 텍스트 3롤 -------------------------------------------------------- ★슬라이드를 겹쳐 쌓는 데 position:absolute 를 쓰지 않고 grid 한 칸에 몰아넣었다. 그래야 히어로 높이가 제일 긴 슬라이드에 맞춰 고정되고, 롤이 넘어갈 때 아래 내용이 덜컹거리지 않는다. */ .hero-roll{display:grid} .hero-s{grid-area:1/1;max-width:620px;opacity:0;visibility:hidden; transform:translateY(16px); transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s linear .55s} .hero-s.is-on{opacity:1;visibility:visible;transform:none; transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s} /* 2·3롤 제목은 h1 이 아니라 p 다 (h1 이 한 장에 3개면 검색엔진이 헷갈린다) */ p.hero-h1{margin:0} /* --- 좌·우 화살표 (미르 2026-09-01 — 줄 3개 대신) -------------------- ★본문(1200px)과 겹치지 않게 바깥 여백에 앉힌다. 화면이 1280px 밑으로 좁아지면 여백이 없어져 글 위에 올라타므로, 그때는 글 아래로 내린다. */ .hero-arw{position:absolute;top:50%;z-index:2;margin-top:-26px; width:52px;height:52px;display:grid;place-items:center;padding:0; border:1px solid rgba(255,255,255,.3);border-radius:50%; /* ★오른쪽 화살표는 사진 위에 얹힌다. 살짝 어두운 판을 깔아야 안 묻힌다 */ background:rgba(0,0,0,.26);backdrop-filter:blur(3px); color:rgba(255,255,255,.82);cursor:pointer; transition:background .25s var(--ease),color .25s var(--ease), border-color .25s var(--ease)} .hero-arw:hover{background:rgba(0,0,0,.42);color:var(--y); border-color:rgba(255,234,0,.55)} .hero-arw:focus-visible{outline:2px solid var(--y);outline-offset:3px} .hero-arw svg{width:21px;height:21px} .hero-prev{left:20px} .hero-next{right:20px} .hero-eyebrow{display:inline-block;font-family:"Wanted Sans Variable",sans-serif; font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--y); padding:7px 16px;border:1px solid rgba(255,234,0,.36);border-radius:999px; background:rgba(255,234,0,.07);margin-bottom:24px} /* 벤치마크 실측 65.28px / weight 700 ★2026-08-31 문구가 "포털사이트의 중심에 있습니다"(15자)로 길어져 60px 로 낮췄다 */ .hero-h1{font-size:60px;font-weight:800;line-height:1.18;letter-spacing:-.045em;color:#fff} /* 벤치마크 실측 38.4px / weight 300 — Pretendard라 300을 실제로 낼 수 있다 */ .hero-p{margin-top:26px;font-size:23px;font-weight:300;line-height:1.62; letter-spacing:-.032em;color:rgba(255,255,255,.78);max-width:660px} .hero-p em{font-style:normal;font-weight:700;color:var(--y)} .hero-btns{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap} .hero-scroll{position:absolute;left:50%;bottom:34px;transform:translateX(-50%); width:26px;height:42px;border:1.6px solid rgba(255,255,255,.32);border-radius:14px; display:grid;place-items:start center;padding-top:8px} .hero-scroll i{width:3px;height:8px;border-radius:2px;background:var(--y); animation:wheel 1.9s var(--ease) infinite} @keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1} 100%{opacity:0;transform:translateY(14px)}} /* ========================================================================== 공통 섹션 ========================================================================== */ .sec{padding:118px 0} .sec-gray{background:var(--bg-g)} .sec-ink{background:var(--ink);color:#fff} .sh{max-width:760px;margin:0 auto 54px;text-align:center} .sh-eye{font-family:"Wanted Sans Variable",sans-serif;font-size:13px;font-weight:800; letter-spacing:.14em;color:var(--gray-l);margin-bottom:14px} .sec-ink .sh-eye{color:var(--y)} .sh-t{font-size:42px;font-weight:800;line-height:1.3;letter-spacing:-.042em;color:var(--ink)} .sec-ink .sh-t{color:#fff} .sh-t b{font-weight:800;position:relative;white-space:nowrap} .sh-t b::after{content:"";position:absolute;left:-2px;right:-2px;bottom:4px;height:12px; background:var(--y);z-index:-1;border-radius:2px} .sh-t{position:relative;z-index:0} .sec-ink .sh-t b{color:var(--y)} .sec-ink .sh-t b::after{display:none} .sh-d{margin-top:18px;font-size:17px;font-weight:400;color:var(--gray);line-height:1.72} .sec-ink .sh-d{color:rgba(255,255,255,.62)} .sh-w{color:#fff} .sh-row{display:flex;align-items:flex-end;justify-content:space-between; max-width:none;text-align:left;gap:20px} .sh-more{display:inline-flex;align-items:center;gap:7px;font-size:15.5px;font-weight:700; color:var(--gray);padding:10px 0;transition:color .25s;flex:none} .sh-more:hover{color:var(--ink)} .sh-more:hover .ic-sm{transform:translateX(4px)} .sh-more .ic-sm{transition:transform .25s var(--ease)} /* ========================================================================== 2. 서비스 8칸 (벤치마크 실측 4열×2행 / 226×200 / gap 30 / radius 20) ★한 줄 설명을 넣기 위해 타일 높이를 키웠다 — measurements.md §6 에 기록 ========================================================================== */ .svc{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} /* ★상품 8칸 색 (미르 지시 2026-08-31 — "화이트 기본색은 클릭 유도가 약하다") --c = 진한 색(아이콘·테두리) --c-s = 옅은 색(카드 배경) ※ 한때 파랑→자홍 그라데이션 로고에 맞춰 8단계 그라데이션으로 바꿨다가, 로고가 기존 '빨간 입술'로 확정되면서 되돌렸다. 빨강·노랑 브랜드에서는 따뜻한 8단계 램프가 서로 너무 비슷해져 '한눈에 구분된다'는 이 배색의 목적 자체가 사라진다. 1번을 로고 빨강으로 잡아 브랜드와 이어지게 했다. */ .svc-c:nth-child(1){--c:#E01E26;--c-s:#FDECEC} /* 블로그디자인 빨강(로고색) */ .svc-c:nth-child(2){--c:#F59F00;--c-s:#FFF7E6} /* 블로그관리 주황 */ .svc-c:nth-child(3){--c:#1C7ED6;--c-s:#EAF3FE} /* 구글블로그관리 파랑(구글) */ .svc-c:nth-child(4){--c:#0CA678;--c-s:#E6F8F2} /* 스타트패키지 초록 */ .svc-c:nth-child(5){--c:#7950F2;--c-s:#F2EDFE} /* SNS마케팅 보라 */ .svc-c:nth-child(6){--c:#E8590C;--c-s:#FFF1E8} /* 상세페이지 진한주황 */ .svc-c:nth-child(7){--c:#0B7285;--c-s:#E6F4F7} /* 홈페이지제작 청록 */ .svc-c:nth-child(8){--c:#FFEA00;--c-s:#1A1A1A} /* 통합패키지 먹색+노랑 */ .svc-c{position:relative;display:flex;flex-direction:column;align-items:flex-start; min-height:262px;padding:28px 24px 22px;background:var(--c-s);border-radius:var(--r); border:1.5px solid transparent;overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s var(--ease), background .3s var(--ease),border-color .3s} /* 왼쪽 위에서 색이 번지는 느낌 */ .svc-c::before{content:"";position:absolute;inset:auto -32% -62% auto;width:200px;height:200px; border-radius:50%;background:var(--c);opacity:0;transform:scale(.4); transition:opacity .45s var(--ease),transform .45s var(--ease)} .svc-c:hover{transform:translateY(-6px);border-color:var(--c); box-shadow:0 16px 38px color-mix(in srgb,var(--c) 34%,transparent)} .svc-c:hover::before{opacity:.1;transform:scale(1)} .svc-i{width:58px;height:58px;border-radius:16px;background:var(--c);color:#fff; display:grid;place-items:center;margin-bottom:18px;flex:none; box-shadow:0 6px 16px color-mix(in srgb,var(--c) 40%,transparent); transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .svc-i svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .svc-c:hover .svc-i{transform:rotate(-7deg) scale(1.08); box-shadow:0 10px 24px color-mix(in srgb,var(--c) 55%,transparent)} .svc-c b{font-size:18.5px;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1.35} .svc-c b em{display:inline-block;font-style:normal;font-size:12px;font-weight:700; color:var(--c);background:#fff;border:1px solid color-mix(in srgb,var(--c) 34%,transparent); border-radius:5px;padding:1px 6px;margin-left:4px;vertical-align:2px;letter-spacing:-.02em} .svc-c p{margin-top:9px;font-size:14px;font-weight:400;line-height:1.58;color:#5C5C5C} .svc-go{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:5px; font-size:13.5px;font-weight:800;color:var(--c);opacity:0;transform:translateY(6px); transition:opacity .3s var(--ease),transform .3s var(--ease)} .svc-c:hover .svc-go{opacity:1;transform:none} /* 통합패키지 — 먹색 카드에 노랑 포인트 */ .svc-hot .svc-i{color:var(--ink)} .svc-hot b,.svc-hot .svc-go{color:#fff} .svc-hot .svc-go{color:var(--y)} .svc-hot p{color:rgba(255,255,255,.7)} .svc-hot b em{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.8)} .svc-hot:hover{background:#111} .svc-tag{position:absolute;top:14px;right:14px;font-size:11px;font-weight:800; color:var(--ink);background:var(--y);border-radius:999px;padding:4px 10px;letter-spacing:-.02em} .svc-note{margin-top:26px;text-align:center;font-size:14.5px;color:var(--gray-l)} /* ========================================================================== 3. 강점 3칸 ========================================================================== */ .why{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .why-c{padding:38px 32px 34px;background:rgba(255,255,255,.045);border-radius:var(--r); border:1px solid rgba(255,255,255,.09);transition:background .3s,border-color .3s,transform .3s var(--ease)} .why-c:hover{background:rgba(255,255,255,.075);border-color:rgba(255,234,0,.34);transform:translateY(-5px)} .why-n{display:block;font-size:15px;font-weight:800;color:var(--y);margin-bottom:18px; letter-spacing:.02em} .why-c h3{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.04em;margin-bottom:12px} .why-c p{font-size:15.5px;line-height:1.78;color:rgba(255,255,255,.64);font-weight:300} /* ========================================================================== 4. 숫자 (카운트업) ★연도는 카운트업 제외 — v5 §8 교훈("1266년" 사고) ========================================================================== */ .stat{background:var(--y);padding:56px 0} .stat-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .stat-c{text-align:center;position:relative} .stat-c+.stat-c::before{content:"";position:absolute;left:-10px;top:12%;bottom:12%; width:1px;background:rgba(26,26,26,.16)} .stat-c b{display:block;font-size:46px;font-weight:800;color:var(--ink);line-height:1.1} /* 단위(건 / 년차)는 숫자보다 작게 — 숫자가 주인공이어야 한다 */ .stat-c b i{font-style:normal;font-size:.46em;font-weight:700;margin-left:3px; letter-spacing:-.03em;font-family:"Pretendard Variable",sans-serif} .stat-c span{display:block;margin-top:7px;font-size:14.5px;font-weight:600; color:rgba(26,26,26,.62)} /* ========================================================================== 5. 포트폴리오 (업종 필터) — 벤치마크에 없는 부분 ========================================================================== */ .filt{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:38px} .filt-b{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 18px; border-radius:999px;border:1px solid var(--line);background:#fff; font-size:14.5px;font-weight:600;color:var(--gray);transition:all .22s var(--ease)} .filt-b i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--gray-l); font-family:"Wanted Sans Variable",sans-serif;background:#F1F1EF; border-radius:999px;padding:1px 7px;transition:all .22s} .filt-b:hover{border-color:var(--ink);color:var(--ink)} .filt-b.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:700} .filt-b.on i{background:rgba(255,255,255,.16);color:var(--y)} /* 실측한 원본이 1920×980 목업이라, 기기 화면만 잘라내 16:10 으로 통일했다. (벤치마크 카드는 349×312 였지만 이 사진들에는 너무 정사각이라 안 맞는다) */ .work{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .work-c{border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line); cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .work-c:hover,.work-c:focus-visible{transform:translateY(-6px);border-color:var(--ink); box-shadow:0 18px 40px rgba(0,0,0,.13);outline:none} .work-ph{position:relative;aspect-ratio:1920/980;background:#F4F4F2;overflow:hidden} /* ★원본(1920x980) 비율 그대로. 자르지 않으므로 여기서 비율을 바꾸면 사진이 잘린다 */ .work-ph img{width:100%;height:100%;object-fit:cover;object-position:top center; transition:transform .45s var(--ease)} .work-c:hover .work-ph img{transform:scale(1.045)} .work-cat{position:absolute;top:12px;left:12px;z-index:2;font-size:11.5px;font-weight:700; background:rgba(26,26,26,.86);color:#fff;border-radius:999px;padding:4px 11px; backdrop-filter:blur(4px)} .work-zoom{position:absolute;inset:0;z-index:1;display:grid;place-items:center; background:rgba(26,26,26,.45);color:#fff;font-size:14.5px;font-weight:700; opacity:0;transition:opacity .3s var(--ease)} .work-c:hover .work-zoom,.work-c:focus-visible .work-zoom{opacity:1} .work-b{padding:15px 18px 17px} .work-b h3{font-size:16px;font-weight:700;letter-spacing:-.035em;color:var(--ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .work-b p{margin-top:4px;font-size:13px;color:var(--gray-l)} .work-more{margin-top:38px;text-align:center} /* ---------- 포트폴리오 확대 보기 ---------- */ .lb{position:fixed;inset:0;z-index:200;background:rgba(12,12,12,.93); display:flex;align-items:center;justify-content:center;gap:10px;padding:24px; backdrop-filter:blur(6px)} .lb[hidden]{display:none} .lb-fig{max-width:1280px;width:100%;display:flex;flex-direction:column;gap:14px} .lb-fig img{width:100%;height:auto;max-height:76vh;object-fit:contain; border-radius:12px;background:#fff} .lb-fig figcaption{display:flex;align-items:center;justify-content:center;gap:12px; color:#fff;flex-wrap:wrap} .lb-fig figcaption b{font-size:18px;font-weight:700;letter-spacing:-.035em} .lb-fig figcaption span{font-size:12.5px;font-weight:700;color:var(--ink); background:var(--y);border-radius:999px;padding:3px 11px} .lb-fig figcaption em{font-style:normal;font-size:13.5px;color:rgba(255,255,255,.5); font-family:"Wanted Sans Variable",sans-serif;font-weight:600} .lb-x{position:absolute;top:18px;right:22px;width:46px;height:46px;border-radius:50%; background:rgba(255,255,255,.12);color:#fff;font-size:28px;line-height:1; display:grid;place-items:center;transition:background .25s} .lb-x:hover{background:rgba(255,255,255,.24)} .lb-nav{width:52px;height:52px;border-radius:50%;flex:none; background:rgba(255,255,255,.12);color:#fff;font-size:30px;line-height:1; display:grid;place-items:center;transition:background .25s} .lb-nav:hover{background:var(--y);color:var(--ink)} /* ========================================================================== 6. 진행절차 ========================================================================== */ .step{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:s} .step-c{position:relative;padding:34px 26px 30px;background:#fff;border-radius:var(--r); border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .step-c:hover{transform:translateY(-5px);box-shadow:0 14px 32px rgba(0,0,0,.08)} .step-c:not(:last-child)::after{content:"";position:absolute;top:52px;right:-15px; width:8px;height:8px;border-top:2px solid var(--y);border-right:2px solid var(--y); transform:rotate(45deg);z-index:1} .step-n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px; background:var(--y);color:var(--ink);font-size:15px;font-weight:800;margin-bottom:18px} .step-c h3{font-size:20px;font-weight:800;letter-spacing:-.04em;color:var(--ink);margin-bottom:10px} .step-c p{font-size:14.5px;line-height:1.7;color:var(--gray)} /* ========================================================================== 7. 칼럼 (썸네일 243×138 실측) ========================================================================== */ .col{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .col-c{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff; transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .col-c:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(0,0,0,.08)} .col-th{display:grid;place-items:center;aspect-ratio:243/138; background:repeating-linear-gradient(45deg,#F4F4F2 0 12px,#EFEFEC 12px 24px); font-size:12px;color:var(--gray-l);font-family:"Wanted Sans Variable",sans-serif} .col-th::after{content:attr(data-ph)} .col-th img{width:100%;height:100%;object-fit:cover;display:block} .col-b{padding:20px 22px 24px} .col-cat{display:inline-block;font-size:11.5px;font-weight:800;color:var(--ink); background:var(--y);border-radius:999px;padding:4px 11px;margin-bottom:12px} .col-b h3{font-size:19px;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1.4} .col-b p{margin-top:9px;font-size:14.5px;line-height:1.68;color:var(--gray)} .col-b time{display:block;margin-top:14px;font-size:12.5px;color:var(--gray-l); font-family:"Wanted Sans Variable",sans-serif;font-weight:600} .col-note{margin-top:22px;text-align:center;font-size:13.5px;color:var(--gray-l); background:var(--y-soft);border-radius:10px;padding:12px 16px;border:1px dashed rgba(0,0,0,.14)} /* ========================================================================== 8. 상담신청 ========================================================================== */ .ct{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start} .ct .sh-t{text-align:left;font-size:38px} .ct .sh-eye{text-align:left} .ct-d{margin-top:18px;font-size:16.5px;line-height:1.78;color:rgba(255,255,255,.66);font-weight:300} .ct-tel{display:block;margin-top:32px;padding:24px 26px;border-radius:var(--r); background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11); transition:border-color .3s,background .3s} .ct-tel:hover{border-color:var(--y);background:rgba(255,234,0,.07)} .ct-tel span{font-size:13px;font-weight:600;color:rgba(255,255,255,.5);letter-spacing:.02em} .ct-tel b{display:block;font-size:40px;font-weight:800;color:var(--y);line-height:1.2;margin-top:2px} .ct-tel em{display:block;font-style:normal;font-size:13.5px;color:rgba(255,255,255,.5);margin-top:4px} .ct-info{margin-top:26px;display:grid;gap:14px} .ct-info div{display:grid;grid-template-columns:82px 1fr;gap:12px;font-size:14.5px} .ct-info dt{font-weight:700;color:rgba(255,255,255,.44)} .ct-info dd{color:rgba(255,255,255,.74);line-height:1.6} .ct-f{background:#fff;border-radius:22px;padding:36px 34px 34px;color:var(--txt)} .ct-f h3{font-size:23px;font-weight:800;letter-spacing:-.04em;color:var(--ink);margin-bottom:22px} .fr{margin-bottom:16px} .fr label{display:block;font-size:14px;font-weight:700;color:var(--txt);margin-bottom:7px} .fr label i{font-style:normal;color:#E5484D} .fr input,.fr select,.fr textarea{width:100%;border:1px solid var(--line);border-radius:11px; padding:13px 15px;font-size:15.5px;background:#FAFAF9;transition:border-color .2s,background .2s; letter-spacing:-.02em} .fr textarea{resize:vertical;min-height:104px;line-height:1.65} .fr input:focus,.fr select:focus,.fr textarea:focus{outline:none;border-color:var(--ink);background:#fff} .fr input.err,.fr select.err{border-color:#E5484D;background:#FEF3F3} .fa{display:flex;align-items:flex-start;gap:9px;margin:6px 0 18px;font-size:13.5px;color:var(--gray)} .fa input{width:17px;height:17px;margin-top:2px;accent-color:var(--ink);flex:none} .ct-note{margin-top:14px;font-size:14px;font-weight:600;text-align:center;min-height:20px} .ct-note.ok{color:#1A7F4B} .ct-note.no{color:#E5484D} /* ========================================================================== 푸터 ========================================================================== */ .ft{background:#111;color:rgba(255,255,255,.5);padding:56px 0 44px} .ft-in{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap} .ft-logo{font-size:20px;color:rgba(255,255,255,.85);display:inline-block;margin-bottom:16px} .ft-adr{font-size:13.5px;line-height:1.85;color:rgba(255,255,255,.44)} .ft-cp{margin-top:14px;font-size:12px;color:rgba(255,255,255,.3); font-family:"Wanted Sans Variable",sans-serif;letter-spacing:.02em} .ft-r{display:flex;gap:20px;flex-wrap:wrap;align-content:flex-start} .ft-r a{font-size:14px;font-weight:600;color:rgba(255,255,255,.6);transition:color .25s} .ft-r a:hover{color:var(--y)} /* ========================================================================== 고정 퀵 / 모바일 바 ========================================================================== */ .quick{position:fixed;right:22px;bottom:28px;z-index:80;display:flex;flex-direction:column;gap:9px} .quick-b{width:56px;height:56px;border-radius:17px;display:grid;place-items:center; background:#fff;border:1px solid var(--line);box-shadow:0 6px 20px rgba(0,0,0,.12); font-size:12.5px;font-weight:700;color:var(--ink);text-align:center;line-height:1.25; transition:transform .25s var(--ease),box-shadow .25s} .quick-b:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.18)} .quick-y{background:var(--y);border-color:var(--y);box-shadow:0 6px 20px rgba(255,234,0,.45)} .quick-top{font-size:19px;opacity:0;pointer-events:none;transition:opacity .3s,transform .25s} .quick-top.on{opacity:1;pointer-events:auto} .mbar{display:none;position:fixed;inset:auto 0 0;z-index:85; background:rgba(255,255,255,.97);backdrop-filter:blur(10px); border-top:1px solid var(--line);padding:9px 12px;gap:8px; padding-bottom:calc(9px + env(safe-area-inset-bottom))} .mbar-b{flex:1;height:50px;border-radius:13px;display:grid;place-items:center; font-size:15.5px;font-weight:700;background:#F2F2F0;color:var(--ink)} /* ★하단 고정바 — 전화상담이 제일 중요한 버튼인데 회색이라 약했다(미르 2026-09-01). 그냥 자리를 바꾸면 이번엔 상담신청이 약해진다. **둘 다 강한 색**으로 간다. 전화상담 노랑(브랜드 대표색) — 제일 눈에 띄는 자리 상담신청 먹색 + 흰 글씨 — 노랑 옆에서 대비로 살아난다 새 색을 들이지 않고 브랜드 두 색(노랑·먹색)만 썼다. */ .mbar-y{background:var(--y);box-shadow:0 4px 14px rgba(255,234,0,.4)} .mbar-d{background:var(--ink);color:#fff} /* ========================================================================== 반응형 ========================================================================== */ @media (max-width:1280px){ /* 여백이 사라지는 구간 — 화살표를 글 아래 왼쪽에 나란히 둔다 */ .hero-arw{top:auto;bottom:58px;margin-top:0;width:44px;height:44px} .hero-prev{left:24px} .hero-next{left:76px;right:auto} .hero-arw svg{width:19px;height:19px} } @media (max-width:1100px){ .hero-h1{font-size:56px} .hero-art{height:780px;bottom:-46px;left:53%} /* 820+46-780 = 86 */ .hero-s{max-width:560px} .sh-t{font-size:36px} .svc{grid-template-columns:repeat(2,1fr)} .step{grid-template-columns:repeat(2,1fr)} .step-c:nth-child(2)::after{display:none} .ct{grid-template-columns:1fr;gap:38px} .ct .sh-t{font-size:32px} } @media (max-width:900px){ :root{--hd:64px} /* ★사진을 빼는 이유 : 글 뒤에 깔면 사람 얼굴 위에 흰 글씨가 얹혀 안 읽힌다. 모바일용으로 따로 넣으려면 히어로 아래에 한 단 더 만들어야 한다 */ .hero-art{display:none} /* 노란 빛은 사진 뒤에 깔려고 만든 것이다. 사진이 빠지는 폭에서 그것만 남기면 화면 전체가 누렇게 뜬다 */ .hero-bg span:nth-child(3){display:none} .hero-s{max-width:none} .gnb,.hd-tel,.hd-cta{display:none} .ham{display:flex} .hd.open{background:#fff;box-shadow:0 1px 0 var(--line);height:auto} .hd.open .logo-txt{color:var(--ink)} .hd.open .ham i{background:var(--ink)} .hd.open .mnav{display:flex} .why{grid-template-columns:1fr} .work{grid-template-columns:repeat(2,1fr)} .col{grid-template-columns:1fr} .quick{display:none} .mbar{display:flex} body{padding-bottom:70px} .sh-row{flex-direction:column;align-items:flex-start;gap:12px} } @media (max-width:640px){ .sec{padding:76px 0} .wrap{padding:0 18px} .pc-br{display:none} /* 벤치마크 모바일 히어로는 300px이지만 존재감이 너무 약해 키웠다 (measurements.md §6) */ .hero{height:auto;min-height:600px;padding:112px 0 84px} .hero-h1{font-size:32px;letter-spacing:-.04em} .hero-p{font-size:17px;margin-top:20px} .hero-btns{margin-top:30px} .hero-btns .btn-lg{height:52px;flex:1;min-width:150px;padding:0 18px;font-size:15px} .hero-arw{bottom:44px;width:40px;height:40px} .hero-next{left:68px} .hero-scroll{display:none} .sh{margin-bottom:38px} .sh-t{font-size:27px} .sh-d{font-size:15.5px;margin-top:14px} .svc{gap:12px} .svc-c{min-height:0;padding:22px 18px 20px} .svc-i{width:48px;height:48px;border-radius:14px;margin-bottom:14px} .svc-i svg{width:24px;height:24px} .svc-c b{font-size:16px} .svc-c b em{display:block;margin:5px 0 0;width:fit-content} .svc-c p{font-size:13px;margin-top:7px} .svc-go{display:none} .stat{padding:38px 0} .stat-in{grid-template-columns:repeat(2,1fr);gap:26px 14px} .stat-c b{font-size:32px} .stat-c:nth-child(odd)+.stat-c::before{left:-7px} .stat-c:nth-child(3)::before{display:none} .work{grid-template-columns:1fr;gap:16px} .lb{padding:12px;gap:4px} .lb-nav{width:40px;height:40px;font-size:24px} .lb-x{top:10px;right:12px;width:40px;height:40px;font-size:24px} .lb-fig img{max-height:62vh} .lb-fig figcaption b{font-size:15px} /* ★전에는 옆으로 밀어 보게 했는데(nowrap + overflow-x:auto), 미르가 "포트폴리오 카테고리도 짤렸음"이라고 했다. 뒤쪽 업종이 처음부터 안 보이니 고를 수 있다는 걸 모른다. → **줄을 바꿔서 전부 보이게** 한다. (2026-09-01) 여백 삐져나감(margin:0 -18px)도 같이 없앴다. */ .filt{justify-content:flex-start;flex-wrap:wrap;overflow-x:visible; margin:0 0 26px;padding:0;gap:7px} .filt-b{flex:none;height:36px;padding:0 13px;font-size:13px} .filt-b i{font-size:11px} .step{grid-template-columns:1fr;gap:12px} .step-c{padding:24px 22px 22px} .step-c::after{display:none} .step-c h3{font-size:18px} .why-c{padding:28px 24px 26px} .why-c h3{font-size:19px} .ct-f{padding:26px 22px 26px;border-radius:18px} .ct-tel b{font-size:32px} .ct-info div{grid-template-columns:68px 1fr;font-size:13.5px} .ft{padding:44px 0 34px} .ft-in{flex-direction:column;gap:24px} } /* 히어로 롤 — 움직임 줄이기 설정을 켠 사람에겐 페이드만 (이동 없음) */ @media (prefers-reduced-motion: reduce){ .hero-s{transform:none} } /* ═══════════════════════════════════════════════════════════════ 상품추천게임 (program/blogyoung-quiz 에서 옮겨옴, 2026-09-03) ★원본에서 **뺀 것** — 그대로 두면 사이트가 깨진다: body{...} 배경이 크림색으로, 글꼴·여백까지 바뀐다 *{box-sizing} 사이트에 이미 같은 규칙이 있다 button{...} 사이트에 이미 같은 규칙이 있다 시연용 조각들(.바깥 .시연쪽 .상품줄 .상품칸 .폼줄 .쪽지 #f-msg #f-item) ★원본에서 **범위를 좁힌 것**: h2{...} → .보드 h2 (사이트 모든 제목이 바뀔 뻔했다) @media reduce 의 *{!important} → 게임 안쪽만 (사이트 애니메이션이 멈출 뻔했다) ★변수·클래스 이름이 전부 한글이라 사이트(영문)와 겹치지 않는다. 확인함. ═══════════════════════════════════════════════════════════════ */ /* 배너를 사이트 폭(1200px)에 앉히는 자리 — 배너 자체 크기는 원본 그대로다. 시연판은 860px 안이었으므로 사이트에서는 오히려 더 커진다(미르 지시). */ /* ★서비스 8칸 바로 밑에, 칸과 칸 사이와 **같은 간격(22px)** 으로 붙인다. 따로 구역을 두면 118px 이 벌어져 8칸과 동떨어져 보였다 (미르 2026-09-03 지적). */ .svc + .배너{margin:22px 0 0} /* 둘째 배너 — 상담신청 바로 위. 앞 구역과 붙지 않게 위아래로 띄운다 */ .배너자리{padding:0 0 46px} :root{ --크림:#F7F6F2; --보드:#FFFFFF; --글자:#2E2E2E; --흐림:#767676; --선:#EDEBE6; --분홍:#FDECEC; --연노랑:#FFF7E6; --하늘:#EAF3FE; --민트:#E6F8F2; --포인트:#FFEA00; --빨강:#E8524A; --둥글게:28px; } /* ── 보드 ───────────────────────────── */ .보드{ max-width:720px;margin:0 auto;background:var(--보드); border-radius:36px;padding:26px 24px 32px; box-shadow:0 18px 44px rgba(70,60,40,.10), 0 2px 6px rgba(70,60,40,.05); position:relative;overflow:hidden; } /* 히든 카드가 떠 있는 동안에는 아래를 비워 둔다 — 보기 카드를 가리면 안 된다 */ .보드.히든있음{padding-bottom:158px} /* 소리 버튼은 항상 보드 오른쪽 위 */ .소리버튼{ position:absolute;top:20px;right:62px;z-index:8; font-size:13px;color:var(--흐림);border:1.5px solid var(--선);border-radius:999px;padding:6px 14px;transition:.2s; } .소리버튼:hover{border-color:var(--글자);color:var(--글자)} .소리버튼.켜짐{background:var(--포인트);border-color:var(--포인트);color:var(--글자);font-weight:600} /* 뒤로가기는 항상 보드 왼쪽 위 — 소리 버튼과 마주 보게 */ .뒤로{ position:absolute;top:20px;left:20px;z-index:8; font-size:13px;font-weight:700;color:var(--글자);border:1.5px solid var(--선);border-radius:999px;padding:6px 15px;transition:.2s; } .뒤로:hover{background:var(--크림);border-color:var(--글자);transform:translateX(-2px)} /* ── 말판 · 단계 숫자 ────────────────── */ .머리{display:flex;align-items:center;gap:12px;margin:38px 0 16px;min-height:26px} .말판{display:flex;align-items:center;gap:5px} .칸{width:12px;height:12px;border-radius:50%;background:var(--선);transition:.35s;flex:none} .칸.지남{background:var(--포인트)} .칸.지금{background:var(--포인트);box-shadow:0 0 0 5px rgba(255,234,0,.28);transform:scale(1.25)} .이음{width:13px;height:2px;background:var(--선);border-radius:2px;flex:none} .단계{font-size:13px;font-weight:800;color:var(--흐림);letter-spacing:.4px;font-variant-numeric:tabular-nums} /* ── 질문 ───────────────────────────── */ .질문줄{display:flex;align-items:center;gap:14px;margin:6px 0 18px} .링{width:46px;height:46px;flex:none;position:relative} .링 svg{transform:rotate(-90deg)} .링 .숫자{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700} .링.급함 .숫자{color:var(--빨강)} .보드 h2{font-size:22px;line-height:1.4;margin:0;font-weight:700;letter-spacing:-.4px} .번호앞{color:var(--흐림);font-weight:800;margin-right:4px} .여유말{font-size:13px;color:var(--흐림);margin:-10px 0 14px;min-height:20px} /* ── 카드 ───────────────────────────── */ .카드밭{display:flex;flex-wrap:wrap;gap:12px} .카드{ flex:1 1 190px;min-height:96px;border-radius:var(--둥글게);padding:20px 18px; font-size:17px;font-weight:600;line-height:1.45;text-align:left;letter-spacing:-.3px; box-shadow:0 6px 16px rgba(70,60,40,.09); transition:transform .18s cubic-bezier(.34,1.4,.5,1), box-shadow .18s; animation:펼침 .42s cubic-bezier(.2,1.1,.4,1) backwards; } .카드밭.작게{display:grid;grid-template-columns:repeat(4,1fr)} /* 마지막 줄이 늘어나지 않게 */ .카드밭.작게 .카드{min-height:60px;font-size:14.5px;padding:13px 10px;text-align:center;border-radius:20px; align-items:center;justify-content:center;display:flex} .카드:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 14px 26px rgba(70,60,40,.15)} .카드:active{transform:translateY(-1px) scale(.98)} .카드:focus-visible{outline:3px solid var(--글자);outline-offset:3px} .카드.흩어짐{animation:흩어짐 .38s ease-in forwards} .카드.남음{animation:남음 .38s ease-out forwards} @keyframes 펼침{from{opacity:0;transform:translateY(26px) rotate(-5deg) scale(.94)}to{opacity:1;transform:none}} @keyframes 흩어짐{to{opacity:0;transform:translateY(18px) rotate(6deg) scale(.9)}} @keyframes 남음{to{transform:scale(1.04);box-shadow:0 0 0 3px var(--포인트),0 14px 26px rgba(70,60,40,.16)}} /* ── 히든 카드 ──────────────────────── */ .히든{ position:absolute;right:22px;bottom:22px;width:132px;padding:16px 12px;border-radius:22px; background:linear-gradient(150deg,#FFF3A8,var(--포인트));text-align:center; box-shadow:0 12px 26px rgba(210,180,0,.4);animation:들어옴 .6s cubic-bezier(.2,1.2,.4,1) backwards; cursor:pointer;z-index:5; } .히든:hover{transform:translateY(-4px) rotate(-2deg)} .히든 .꼬리표{font-size:12px;font-weight:700;letter-spacing:.4px} .히든 .카운터{font-size:34px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums} .히든 .안내{font-size:11px;color:#7a6a00;font-weight:600} .히든.급함 .카운터{color:var(--빨강)} .히든.사라짐{animation:사라짐 .5s ease-in forwards} @keyframes 들어옴{from{opacity:0;transform:translate(30px,30px) rotate(14deg)}to{opacity:1;transform:none}} @keyframes 사라짐{to{opacity:0;transform:translateY(24px) rotate(10deg) scale(.85)}} .반짝{position:absolute;inset:0;border-radius:22px;box-shadow:0 0 0 0 rgba(255,234,0,.75);animation:반짝임 1.6s infinite} @keyframes 반짝임{70%,100%{box-shadow:0 0 0 16px rgba(255,234,0,0)}} /* ── 결과 ───────────────────────────── */ .두구두구{text-align:center;padding:70px 0} .두구두구 p{font-size:19px;font-weight:700;margin:18px 0 0} .점들{display:flex;justify-content:center;gap:10px} .점들 span{width:13px;height:13px;border-radius:50%;background:var(--포인트);animation:튐 .9s infinite} .점들 span:nth-child(2){animation-delay:.15s}.점들 span:nth-child(3){animation-delay:.3s} @keyframes 튐{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(-14px);opacity:1}} .결과머리{font-size:14px;color:var(--흐림);margin:0 0 4px} .결과제목{font-size:24px;font-weight:800;letter-spacing:-.5px;margin:0 0 22px} .순위{ display:flex;gap:16px;align-items:flex-start;border-radius:var(--둥글게);padding:20px;margin-bottom:12px; background:var(--크림);animation:등장 .55s cubic-bezier(.2,1.2,.4,1) backwards; } .순위.일등{background:linear-gradient(150deg,#FFF9C4,var(--포인트));padding:26px 22px;box-shadow:0 14px 32px rgba(210,180,0,.32)} @keyframes 등장{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}} .번호{font-size:13px;font-weight:800;background:var(--보드);border-radius:999px;padding:5px 12px;flex:none;margin-top:2px} .순위.일등 .번호{background:var(--글자);color:var(--포인트)} .이름{font-size:19px;font-weight:800;letter-spacing:-.4px;margin:0} .순위.일등 .이름{font-size:26px} .까닭{font-size:14px;color:#5a5a5a;margin:6px 0 0;line-height:1.55} .자세히{margin-top:12px;font-size:14px;font-weight:700;background:var(--보드);border:1.5px solid var(--선);border-radius:999px;padding:9px 20px} .순위.일등 .자세히{background:var(--글자);color:#fff;border-color:var(--글자)} .히든결과{border-radius:var(--둥글게);padding:22px;margin:18px 0 0;background:linear-gradient(150deg,#FFF3A8,var(--포인트));animation:등장 .6s .2s backwards} .놓침{font-size:13px;color:var(--흐림);text-align:center;margin:22px 0 0} .꼬리말{font-size:13px;color:var(--흐림);text-align:center;margin:26px 0 0;line-height:1.6} .마무리{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} .큰버튼{flex:1 1 220px;background:var(--글자);color:#fff;border-radius:999px;padding:16px;font-size:16px;font-weight:700} .작은버튼{flex:0 1 140px;border:1.5px solid var(--선);border-radius:999px;padding:16px;font-size:15px;font-weight:600;color:var(--흐림)} /* ── 시작 화면 ──────────────────────── */ .시작{text-align:center;padding:34px 6px 18px} /* 카드 12장을 부채꼴로 펼치고 천천히 흔든다 */ .겹친카드{height:168px;position:relative;margin-bottom:52px} /* 글과 카드 사이를 넉넉히 */ .겹친카드 i{ position:absolute;left:50%;bottom:-6px;width:62px;height:112px;border-radius:13px; transform-origin:50% 252px; border:2px solid #fff; /* 카드끼리 겹쳐도 한 장씩 구분되게 */ box-shadow:0 6px 14px rgba(70,60,40,.13); animation:부채 5.4s ease-in-out infinite; } @keyframes 부채{ 0%,100%{transform:translateX(-50%) rotate(var(--각)) translateY(0)} 50% {transform:translateX(-50%) rotate(calc(var(--각) + var(--흔들))) translateY(-7px)} } .시작 h1{font-size:29px;font-weight:800;letter-spacing:-.8px;margin:0 0 10px;line-height:1.34} .시작 p{color:var(--흐림);margin:0 0 34px;font-size:15px} .시작버튼{background:var(--포인트);border-radius:999px;padding:18px 46px;font-size:18px;font-weight:800;box-shadow:0 12px 26px rgba(210,180,0,.34);transition:.2s} .시작버튼:hover{transform:translateY(-3px)} /* ══ 긴 배너 — 게임으로 들어가는 입구 ══ */ .배너{ display:flex;align-items:center;gap:20px;width:100%;text-align:left; background:linear-gradient(100deg,#FFF6B0 0%,var(--포인트) 55%,#FFD400 100%); border-radius:26px;padding:22px 26px;margin-bottom:18px; box-shadow:0 14px 32px rgba(210,180,0,.34); position:relative;overflow:hidden;transition:transform .22s, box-shadow .22s; } .배너:hover{transform:translateY(-4px);box-shadow:0 20px 42px rgba(210,180,0,.46)} .배너::after{content:'';position:absolute;top:-60%;left:-30%;width:40px;height:220%; background:rgba(255,255,255,.5);transform:rotate(18deg);animation:빛 3.6s ease-in-out infinite;pointer-events:none} @keyframes 빛{0%{left:-30%}55%,100%{left:125%}} /* ★카드가 상자 아래쪽에서 회전(origin 50% 78px)하는 구조라 눈에 보이는 카드 뭉치가 배너 한가운데보다 10px 아래에 있었다(실측). 상자를 올리지 않고 그려지는 것만 10px 올린다 — 자리 차지는 그대로. */ .작은부채{width:70px;height:54px;position:relative;flex:none;transform:translateY(-10px)} .작은부채 i{position:absolute;left:50%;bottom:0;width:23px;height:42px;border-radius:6px;border:1.5px solid #fff; transform-origin:50% 78px;transform:translateX(-50%) rotate(var(--각));box-shadow:0 3px 8px rgba(120,100,0,.22)} .배너 .글{flex:1;min-width:0} .배너 .큰글{display:block;font-size:21px;font-weight:800;letter-spacing:-.5px;line-height:1.32} .배너 .잔글{display:block;font-size:14px;color:#6d5f00;font-weight:600;margin-top:3px} .배너 .알약{flex:none;background:var(--글자);color:#fff;border-radius:999px;padding:14px 26px;font-size:16px;font-weight:800;white-space:nowrap} /* ══ 모달 ══ */ .덮개{ /* ★★z-index 는 사이트보다 위여야 한다. 50 이면 머리말(90)·퀵버튼(80)· 모바일바(85)가 창 위에 올라타서 **뒤로가기와 소리 버튼을 못 누른다** (미르 2026-09-03 지적). 사이트에서 가장 높은 것은 사진 확대(200)다. */ position:fixed;inset:0;z-index:210;display:none; align-items:flex-start;justify-content:center;padding:26px 14px;overflow-y:auto; background:rgba(42,36,20,.54);backdrop-filter:blur(3px); } .덮개 .보드{width:100%} /* 창 안에서도 제 너비를 갖게 */ .덮개.열림{display:flex;animation:덮개켜짐 .26s ease-out} .덮개.열림 .보드{animation:창올라옴 .36s cubic-bezier(.2,1.15,.4,1)} @keyframes 덮개켜짐{from{opacity:0}to{opacity:1}} @keyframes 창올라옴{from{opacity:0;transform:translateY(28px) scale(.95)}to{opacity:1;transform:none}} .덮개.닫히는중{animation:덮개꺼짐 .22s ease-in forwards} @keyframes 덮개꺼짐{to{opacity:0}} .닫기{position:absolute;top:17px;right:17px;z-index:9;width:34px;height:34px;border-radius:50%; border:1.5px solid var(--선);font-size:15px;font-weight:700;color:var(--흐림);line-height:1} .닫기:hover{background:var(--크림);color:var(--글자);border-color:var(--글자)} body.잠김{overflow:hidden} @media (prefers-reduced-motion:reduce){ .배너,.배너::after,.덮개,.덮개 *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } @media (max-width:560px){ .보드{padding:24px 16px 26px;border-radius:28px} .보드 h2{font-size:19px} .소리버튼,.뒤로{top:16px;font-size:12px;padding:5px 12px} /* ★소리 단추를 닫기(X) 왼쪽으로 비켜 놓는다. 17(닫기 여백)+34(닫기 너비)+8(사이) = 59. 16px 로 두면 닫기와 정확히 겹친다 — 휴대폰에서 실제로 겹쳐 있었다 (2026-09-04). */ .소리버튼{right:59px} .뒤로{left:16px} .머리{margin-top:34px} .히든{right:14px;bottom:14px;width:112px} .카드{flex:1 1 100%} .카드밭.작게{grid-template-columns:repeat(2,1fr)} .겹친카드{transform:scale(.8);height:150px;margin-bottom:34px} .시작 h1{font-size:25px} .배너{flex-wrap:wrap;gap:14px;padding:20px} .배너 .큰글{font-size:19px} .배너 .알약{width:100%;text-align:center;padding:15px} .덮개{padding:12px 8px} } /* ★★맨 끝에 둔다 — 게임 CSS 가 파일 뒤쪽에 붙어 있어서, 미디어쿼리를 앞에 두면 `.svc + .배너{margin:22px}` 에 도로 덮인다. 같은 힘이면 뒤가 이긴다 (인수인계서 v8 §5-④ 와 같은 사고). */ @media (max-width:600px){ .svc + .배너{margin-top:12px} } /* ═══════════════════════════════════════════════════════════════ 워드프레스 글 화면에서 로고가 안 보이던 문제 (미르 2026-09-03) ★인사이트의 발행글을 누르면 글 화면(single)이 뜨는데, 그 화면은 맨 위가 **밝은 바탕**이다. 머리말은 40px 넘게 스크롤해야 `.solid` 가 붙으므로 그전까지 **흰 로고가 흰 바탕에 묻혀 사라진다.** 메뉴 글씨도 마찬가지다. ★글 화면에는 main.js 가 실리지 않아(functions.php) 자바스크립트로는 못 고친다. 그래서 워드프레스가 body 에 붙여 주는 이름으로 **처음부터 solid 로** 둔다. ★메인과 상세 8장은 맨 위가 어두워서 지금이 맞다. 건드리지 않는다. ═══════════════════════════════════════════════════════════════ */ body:is(.single,.blog,.archive,.search,.error404) .hd{ background:rgba(255,255,255,.94);backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line); } body:is(.single,.blog,.archive,.search,.error404) .logo-mark{filter:none} body:is(.single,.blog,.archive,.search,.error404) .logo-txt{color:var(--ink)} body:is(.single,.blog,.archive,.search,.error404) .gnb a{color:var(--txt)} body:is(.single,.blog,.archive,.search,.error404) .gnb a:hover{color:var(--ink)} body:is(.single,.blog,.archive,.search,.error404) .hd-tel b{color:var(--ink)} body:is(.single,.blog,.archive,.search,.error404) .hd-tel span{color:var(--gray)} body:is(.single,.blog,.archive,.search,.error404) .ham i{background:var(--ink)} /* ══════════════════════════════════════════════════════════════ 포트폴리오 크게 보기 — 폰에서 "눌러도 안 커지던" 문제 (2026-09-02) ───────────────────────────────────────────────────────────── ★실측: 폰(폭 375)에서 카드 그림 337px → 크게 보기 351px. 배율 1.04배였다. 즉 눌러도 거의 그대로였다. 원인 두 가지. ① 좌우 화살표 버튼이 그림 옆자리를 차지해 폭을 80px 먹었다 ② 그림이 '폭 맞춤'이라, 가로로 긴 사진이 세로로 납작하게 눌렸다 ★고침: 화살표는 그림 위에 겹치게 띄우고, 그림은 '높이 맞춤'으로 바꾼 뒤 옆으로 밀어 볼 수 있게 했다. 실측 배율 1.04배 → 3.02배. ★PC는 건드리지 않는다(원래 1108px으로 잘 나왔다). ══════════════════════════════════════════════════════════════ */ @media (max-width:640px){ .lb{ padding:12px; gap:0; } .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; background:rgba(0,0,0,.5); } .lb-prev{ left:6px; } .lb-next{ right:6px; } .lb-fig{ width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; align-items:flex-start; } .lb-fig img{ height:64vh; width:auto; max-width:none; max-height:none; object-fit:fill; align-self:flex-start; flex:none; } /* 옆으로 밀어도 사진 이름은 자리에 남는다 */ .lb-fig figcaption{ position:sticky; left:0; } } /* ══ 첫 화면 상품추천게임 띠 (2026-09-04 추가) ══════════════════ ★버튼 줄과 띠를 한 묶음으로 감싸고, 띠는 width:0 + min-width:100% 로 둔다. 그래야 띠의 시작과 끝이 버튼 줄과 항상 정확히 같다 — 화면 크기가 바뀌어도, 첫 화면이 세 장 중 어느 장이든. (숫자를 손으로 박으면 화면이 좁아질 때 어긋난다. 2026-09-04 실제로 그랬다) ★되돌리려면 이 덩어리와 front-page.php 의 묶음·띠 세 곳을 지우면 된다. */ .액션묶음{display:flex;flex-direction:column;align-items:stretch; width:fit-content;max-width:100%} .띠{width:0;min-width:100%;margin-top:14px} .배너--히어로{padding:11px 16px;border-radius:16px;gap:9px;margin-bottom:0; justify-content:flex-start;box-shadow:0 8px 20px rgba(210,180,0,.28)} .배너--히어로 .작은부채{width:34px;height:28px;transform:translateY(-4px)} .배너--히어로 .작은부채 i{width:11px;height:21px;transform-origin:50% 40px;border-width:1.2px} .배너--히어로 .글{flex:0 1 auto;min-width:0} .배너--히어로 .큰글{font-size:14px;line-height:1.3;white-space:nowrap; display:inline-flex;align-items:center;gap:6px; overflow:hidden;text-overflow:ellipsis} /* 첫 화면 버튼도 띠와 같은 모양으로 (첫 화면 안에서만 적용된다) */ .hero-btns .btn-y,.hero-btns .btn-o{border-radius:16px} @media (max-width:700px){ .배너--히어로 .큰글{font-size:13px} }