@charset "utf-8"; /* ========================================================================== 블로그영 — 서비스 상세페이지 공용 스타일 style.css 를 먼저 불러온 뒤 이 파일을 얹는다 (토큰·헤더·푸터를 그대로 씀) ★김가네 서비스페이지는 "01 02 03 …" 번호 블록을 위에서 아래로 쌓기만 한다. 단조로워서 끝까지 안 읽힌다. 여기서는 섹션마다 형태를 바꾼다: 좌우 분할 / 번호 붙은 도해 / 비교표 / 가로 타임라인 / 아코디언 + 왼쪽에 따라다니는 목차(김가네에 없음) 상품별 색은 각 페이지 의 style="--c:…;--c-s:…" 로 넘긴다. ========================================================================== */ /* ---------- 상세페이지 히어로 ---------- */ .shero{position:relative;padding:calc(var(--hd) + 74px) 0 66px;background:var(--ink); color:#fff;overflow:hidden;isolation:isolate} .shero::before{content:"";position:absolute;inset:auto -12% -58% auto;width:560px;height:560px; border-radius:50%;z-index:-1;filter:blur(80px);opacity:.5; background:radial-gradient(circle,var(--c),transparent 68%)} .shero::after{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--c)} .bcrumb{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500; color:rgba(255,255,255,.5);margin-bottom:20px} .bcrumb a:hover{color:var(--y)} .bcrumb span{opacity:.4} .shero-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800; letter-spacing:.02em;color:var(--ink);background:var(--c);border-radius:999px; padding:7px 16px;margin-bottom:20px} .shero-tag.on-dark{color:#fff} .shero h1{font-size:52px;font-weight:800;line-height:1.2;letter-spacing:-.045em} .shero-lead{margin-top:22px;font-size:21px;font-weight:300;line-height:1.6; letter-spacing:-.032em;color:rgba(255,255,255,.76);max-width:640px} .shero-lead b{font-weight:700;color:var(--c)} .shero-btns{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap} .btn-c{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px; padding:0 32px;border-radius:999px;font-weight:700;font-size:16.5px;letter-spacing:-.03em; background:var(--c);color:#fff;transition:all .25s var(--ease); box-shadow:0 6px 20px color-mix(in srgb,var(--c) 42%,transparent)} .btn-c:hover{transform:translateY(-2px); box-shadow:0 10px 28px color-mix(in srgb,var(--c) 58%,transparent)} /* ---------- 본문 2단 : 왼쪽 따라다니는 목차 + 오른쪽 내용 ---------- */ /* ★★★padding 을 한 줄(shorthand)로 쓰면 .wrap 의 좌우 여백(24px / 모바일 18px)이 같이 지워진다. 이것 때문에 상세페이지 본문이 **화면 양끝에 딱 붙어** 있었다 (미르 2026-09-01 "여백도 없고 짤려보임"). 위아래만 따로 준다. */ .sbody{display:grid;grid-template-columns:206px 1fr;gap:56px;align-items:start; padding-top:76px;padding-bottom:96px} /* 그리드 칸은 기본값(min-width:auto)이라 안 줄어든다. 이게 없으면 포트폴리오가 본문 칸을 999px로 벌려서 휴대폰에서 페이지가 옆으로 삐져나온다. (2026-09-01 수정) */ .sbody > *{min-width:0} .snav{position:sticky;top:calc(var(--hd) + 28px)} .snav-t{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--gray-l); margin-bottom:14px} .snav a{display:block;padding:9px 0 9px 15px;font-size:14.5px;font-weight:600; color:var(--gray);border-left:2px solid var(--line);transition:all .22s var(--ease)} .snav a:hover{color:var(--ink)} .snav a.on{color:var(--c);border-left-color:var(--c);font-weight:800} /* html 의 scroll-padding-top(--hd) 과 더해진다. 여기에 --hd 를 또 쓰면 두 배로 밀려서 목차가 앞 항목을 켠다. (2026-09-01 수정) */ .blk{scroll-margin-top:20px} .blk+.blk{margin-top:78px} .blk-h{margin-bottom:30px} .blk-n{display:inline-block;font-family:"Wanted Sans Variable",sans-serif;font-size:12.5px; font-weight:800;letter-spacing:.06em;color:var(--c); background:var(--c-s);border-radius:999px;padding:5px 13px;margin-bottom:13px} .blk-h h2{font-size:31px;font-weight:800;letter-spacing:-.042em;line-height:1.32;color:var(--ink)} .blk-h p{margin-top:12px;font-size:16.5px;line-height:1.72;color:var(--gray)} /* ---------- 이런 분께 ---------- */ .forwho{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .forwho li{display:flex;gap:13px;padding:22px 22px;background:var(--c-s);border-radius:14px; font-size:15.5px;font-weight:600;line-height:1.6;color:var(--ink); border:1px solid transparent;transition:border-color .25s,transform .25s var(--ease)} .forwho li:hover{border-color:var(--c);transform:translateY(-3px)} .forwho i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--c);color:#fff; display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800;margin-top:1px} /* ---------- 구성요소 도해 (좌 목록 / 우 화면 그림) ---------- */ .parts{display:block} .parts-l{display:grid;grid-template-columns:repeat(2,1fr);gap:11px} /* 실제 제작 사례 사진 (블로그영 자체 자료) */ .pguide{margin-top:30px;border:1px solid var(--line);border-radius:16px;overflow:hidden; background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.07)} .pguide-s{overflow-x:auto} .pguide img{display:block;width:100%;height:auto} /* 모바일에선 라벨이 안 읽혀서 가로로 밀어 보게 한다 */ /* ★전에는 모바일에서 사진을 660px 로 고정해 옆으로 밀어 보게 했다. 라벨을 읽히게 하려던 건데, 미르가 "짤려서 좌우 스크롤 생김"이라고 했다. **같은 6개 항목이 바로 위에 글로 있으니** 사진은 폭에 맞춰도 정보가 안 없어진다. 더 크게 보고 싶으면 손가락으로 화면을 확대하면 된다. (2026-09-01) */ .pguide figcaption{padding:14px 18px 16px;font-size:14px;color:var(--gray); text-align:center;border-top:1px solid var(--line)} .part{display:flex;gap:15px;padding:17px 19px;border:1px solid var(--line);border-radius:14px; background:#fff;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease);cursor:default} .part:hover{border-color:var(--c);transform:translateX(4px); box-shadow:0 8px 22px color-mix(in srgb,var(--c) 18%,transparent)} .part b{flex:none;width:27px;height:27px;border-radius:9px;background:var(--c);color:#fff; display:grid;place-items:center;font-size:12.5px;font-weight:800; font-family:"Wanted Sans Variable",sans-serif} .part div{min-width:0} .part strong{display:block;font-size:16px;font-weight:800;letter-spacing:-.035em;color:var(--ink)} .part span{display:block;margin-top:4px;font-size:14px;line-height:1.6;color:var(--gray)} /* ★.part 안의 는 번호 배지 스타일이다. 설명글 강조는 를 쓸 것 */ .part span em{font-style:normal;font-weight:700;color:var(--c)} /* 오른쪽 — 블로그 화면을 도형으로만 그린 그림(원본 이미지는 쓰지 않는다) */ .mock{position:sticky;top:calc(var(--hd) + 28px);border:1px solid var(--line); border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.07)} .mock-bar{height:26px;background:#F2F2F0;display:flex;align-items:center;gap:5px;padding:0 11px} .mock-bar i{width:7px;height:7px;border-radius:50%;background:#D6D6D2} .mock-in{padding:11px;display:grid;gap:8px} .mock-skin{height:74px;border-radius:9px;background:var(--c);position:relative; display:grid;place-items:center;color:#fff;font-size:11.5px;font-weight:800} .mock-w{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .mock-w i{height:26px;border-radius:6px;background:var(--c-s);border:1px solid color-mix(in srgb,var(--c) 26%,transparent)} .mock-row{display:grid;grid-template-columns:64px 1fr;gap:8px} .mock-prof{height:78px;border-radius:8px;background:#F4F4F2;display:grid;place-items:center; font-size:9.5px;font-weight:700;color:var(--gray-l);text-align:center;line-height:1.3} .mock-list{display:grid;gap:5px} .mock-list i{height:14px;border-radius:4px;background:#F1F1EF} .mock-list i:nth-child(2){width:82%} .mock-list i:nth-child(4){width:64%} .mock-foot{height:34px;border-radius:8px;background:var(--ink);display:grid;place-items:center; color:rgba(255,255,255,.72);font-size:10px;font-weight:700} .mock-cap{padding:9px 11px 12px;font-size:11.5px;color:var(--gray-l);text-align:center; border-top:1px solid var(--line)} /* ---------- 유형 비교표 ---------- */ .tiers{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff} /* ★내용이 더 있을 때만 가장자리에 그림자가 뜬다(스크롤 그림자). 가로로 밀 수 있다는 걸 알려 주는 장치다. 다 보이면 그림자도 사라진다. background-attachment 의 local/scroll 조합이 그 판단을 대신해 준다. */ .tiers{background-image: linear-gradient(to right,#fff 40%,rgba(255,255,255,0)), linear-gradient(to left,#fff 40%,rgba(255,255,255,0)), radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.13),rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.13),rgba(0,0,0,0)); background-position:0 0,100% 0,0 0,100% 0; background-repeat:no-repeat; background-size:40px 100%,40px 100%,15px 100%,15px 100%; background-attachment:local,local,scroll,scroll} /* ★열 너비를 균등하게, 내용은 가운데 정렬 (미르 지시 2026-08-31) table-layout:fixed 를 줘야 글자 길이에 따라 열이 들쭉날쭉해지지 않는다 */ .tiers table{width:100%;min-width:660px;border-collapse:collapse;font-size:14.5px; table-layout:fixed} .tiers th,.tiers td{padding:16px 12px;text-align:center;vertical-align:middle; border-bottom:1px solid var(--line);word-break:keep-all} .tiers thead th{background:#FAFAF8;font-weight:800;font-size:15px;color:var(--ink); letter-spacing:-.035em;white-space:nowrap;border-bottom:1.5px solid var(--line)} .tiers thead th:first-child{width:118px;color:var(--gray);font-size:13px;font-weight:700} .tiers tbody th{font-weight:700;color:var(--gray);font-size:13.5px;white-space:nowrap; background:#FCFCFB;width:118px;text-align:center} .tiers tr:last-child th,.tiers tr:last-child td{border-bottom:0} .tiers .best{background:var(--c-s)} .tiers thead .best{background:var(--c);color:#fff} .tiers thead .best small{display:block;font-size:11px;font-weight:700;opacity:.85;margin-top:3px} .tiers .yes{color:var(--c);font-weight:800} .tiers .no{color:#C9C9C5} .tier-note{margin-top:14px;font-size:14px;color:var(--gray-l);padding:13px 16px; background:var(--y-soft);border-radius:10px;border:1px dashed rgba(0,0,0,.13)} /* ---------- 제작순서 가로 타임라인 ---------- */ .flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .flow::before{content:"";position:absolute;left:6%;right:6%;top:26px;height:2px; background:linear-gradient(to right,var(--c-s),var(--c),var(--c-s))} /* ★진행절차가 4칸인 페이지(홈페이지제작·블로그관리)용. 전에는
    에 style="grid-template-columns:repeat(4,1fr)" 를 박아 놨는데, **인라인 스타일은 미디어쿼리를 이긴다.** 그래서 휴대폰에서도 4칸을 고집해 내용이 화면 밖으로 나갔다(390px 화면에 424px). 클래스로 바꿨다. ★아래 미디어쿼리(.flow)가 이 줄보다 뒤에 있어야 모바일에서 이긴다. */ .flow-4{grid-template-columns:repeat(4,1fr)} .flow li{position:relative;text-align:center} .flow b{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px; margin:0 auto 14px;border-radius:16px;background:#fff;border:2px solid var(--c); color:var(--c);font-size:15px;font-weight:800; font-family:"Wanted Sans Variable",sans-serif;transition:all .3s var(--ease)} .flow li:hover b{background:var(--c);color:#fff;transform:translateY(-4px)} .flow strong{display:block;font-size:16px;font-weight:800;letter-spacing:-.04em;color:var(--ink)} .flow span{display:block;margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--gray)} /* ---------- FAQ 아코디언 (김가네엔 없다) ---------- */ .faq{display:grid;gap:9px} .faq details{border:1px solid var(--line);border-radius:13px;background:#fff;overflow:hidden; transition:border-color .25s} .faq details[open]{border-color:var(--c)} .faq summary{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;cursor:pointer; font-size:16px;font-weight:700;letter-spacing:-.035em;color:var(--ink);list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::before{content:"Q";flex:none;width:24px;height:24px;border-radius:7px; background:var(--c-s);color:var(--c);display:grid;place-items:center;font-size:12.5px; font-weight:800;font-family:"Wanted Sans Variable",sans-serif} .faq summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;margin-top:6px; border-right:2px solid var(--gray-l);border-bottom:2px solid var(--gray-l); transform:rotate(45deg);transition:transform .25s var(--ease)} .faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--c)} .faq-a{padding:0 20px 20px 56px;font-size:15px;line-height:1.75;color:var(--gray)} /* ---------- 참고사항 ---------- */ .notes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .note-c{padding:24px 24px 22px;border-radius:16px;background:#FAFAF8;border:1px solid var(--line)} .note-c h3{display:flex;align-items:center;gap:9px;font-size:16.5px;font-weight:800; letter-spacing:-.035em;color:var(--ink);margin-bottom:13px} .note-c h3 i{width:22px;height:22px;border-radius:7px;background:var(--c);color:#fff; display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800} .note-c li{position:relative;padding-left:14px;font-size:14.5px;line-height:1.72;color:var(--gray)} .note-c li+li{margin-top:8px} .note-c li::before{content:"";position:absolute;left:0;top:10px;width:4px;height:4px; border-radius:50%;background:var(--c)} /* ---------- 페이지 하단 CTA ---------- */ .scta{background:var(--ink);color:#fff;padding:66px 0;position:relative;overflow:hidden;isolation:isolate} .scta::before{content:"";position:absolute;inset:-40% auto auto -8%;width:480px;height:480px; border-radius:50%;z-index:-1;filter:blur(80px);opacity:.42; background:radial-gradient(circle,var(--c),transparent 68%)} .scta-in{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap} .scta h2{font-size:33px;font-weight:800;letter-spacing:-.042em;line-height:1.34} .scta h2 b{color:var(--c)} .scta p{margin-top:12px;font-size:16.5px;color:rgba(255,255,255,.62);font-weight:300} .scta-r{display:flex;flex-direction:column;gap:12px;align-items:flex-start} .scta-tel{font-size:38px;font-weight:800;color:var(--y);line-height:1.1} .scta-tel span{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.5); margin-top:5px;letter-spacing:-.02em} /* ---------- 다른 상품 보기 ---------- */ .others{padding:64px 0 88px;background:var(--bg-g)} .others-t{font-size:22px;font-weight:800;letter-spacing:-.04em;color:var(--ink);margin-bottom:22px} .others-g{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .other-c{display:flex;align-items:center;gap:11px;padding:16px 17px;background:#fff; border:1px solid var(--line);border-radius:13px;font-size:15px;font-weight:700; letter-spacing:-.035em;color:var(--ink);transition:all .25s var(--ease)} .other-c:hover{border-color:var(--oc,var(--ink));transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.08)} .other-c i{flex:none;width:32px;height:32px;border-radius:10px;background:var(--oc,var(--ink)); display:grid;place-items:center} .other-c svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} /* ========================================================================== 반응형 ========================================================================== */ @media (max-width:1100px){ .sbody{grid-template-columns:1fr;gap:0;padding-top:56px;padding-bottom:76px} .snav{display:none} .parts-l{grid-template-columns:1fr} .mock{position:static;max-width:320px;margin:0 auto} .others-g{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .shero h1{font-size:40px} .shero-lead{font-size:18px} .flow{grid-template-columns:repeat(2,1fr);gap:26px 12px} .flow::before{display:none} } @media (max-width:640px){ /* 구성 사진 — 폭에 맞춰 넣는다 (위 주석 참고) */ .pguide-s{overflow-x:visible} .pguide-s img{width:100%;max-width:100%} /* ★비교표 — 한 화면에 다 들어오게 줄인다 (미르 2026-09-01 "짤려보이고 스크롤 생김"). 밀어서 보게 두면 3·4번째 상품이 처음부터 안 보여서, 비교표인데 비교가 안 된다. 글자를 줄이더라도 **네 상품이 한눈에 나란히 보이는 쪽**이 낫다. 352px = 구성 62 + 상품 4칸 x 72 남짓 ★min-width 를 0 으로 풀지 않으면 660px 가 그대로 남아 계속 밀린다. */ .tiers table{min-width:0;font-size:11.5px;table-layout:fixed} .tiers th,.tiers td{padding:9px 3px;word-break:keep-all} .tiers thead th{font-size:12px} .tiers thead th:first-child{width:62px;font-size:10.5px} .tiers thead .best small{font-size:9px;margin-top:2px;line-height:1.25} .tiers tbody th{font-size:10.5px;white-space:normal;line-height:1.3} .tiers td small{font-size:9.5px;line-height:1.3} .tiers tr.pr td{font-size:9.5px;white-space:normal} .tiers tr.pr td b{font-size:12.5px;margin-right:0} /* 제작 순서 — 번호만 왼쪽에 덩그러니 붙어 보였다(미르 지적). 번호를 잇는 세로선을 넣어 '순서'로 읽히게 했다. */ .flow{gap:0} .flow li{padding-bottom:20px} .flow li::before{content:"";position:absolute;left:25px;top:56px;bottom:0; width:2px;background:var(--line)} .flow li:last-child{padding-bottom:0} .flow li:last-child::before{display:none} .shero{padding:calc(var(--hd) + 46px) 0 46px} .shero h1{font-size:29px} .shero-lead{font-size:16px;margin-top:16px} .shero-btns{margin-top:26px} .shero-btns .btn-c,.shero-btns .btn-o{height:50px;flex:1;min-width:148px;padding:0 18px;font-size:15px} .blk+.blk{margin-top:56px} .blk-h h2{font-size:23px} .blk-h p{font-size:15.5px} .forwho{grid-template-columns:1fr} .forwho li{padding:17px 17px;font-size:14.5px} .flow{grid-template-columns:1fr;gap:18px} /* ★★
  1. 안에는 번호 제목 설명 세 개가 들어 있다. 2칸짜리 grid 로만 두면 **설명이 다음 줄의 첫 칸(52px)으로 떨어져** 글자가 한 글자씩 줄바꿈됐다(미르 2026-09-01 "모두 좌측에 붙어 보인다"). → 번호를 두 줄에 걸치게 하고, 제목·설명을 오른쪽 칸에 나란히 세운다. */ .flow li{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto; gap:4px 14px;text-align:left;align-items:start} .flow b{margin:0;grid-column:1;grid-row:1 / span 2} .flow strong{grid-column:2;grid-row:1;align-self:center} .flow span{grid-column:2;grid-row:2;margin-top:0} .notes{grid-template-columns:1fr} .scta{padding:48px 0} .scta h2{font-size:24px} .scta-tel{font-size:31px} .others-g{grid-template-columns:1fr} .others{padding:48px 0 68px} } /* ========================================================================== 가격표 (2026-08-31 미르 지시 — "깔끔하고 눈에 잘 들어오게") ★김가네는 가격을 표 한 덩어리로만 보여준다. 여기서는 상품을 카드로 나누고 기간별 금액을 그 안에 넣어, 고르는 사람이 열을 헤맬 일이 없게 했다. ========================================================================== */ /* ★본문 폭이 왼쪽 목차(206px)만큼 좁다. 4칸으로 두면 카드가 222px 까지 줄어 글자가 뭉개지고 가로 스크롤이 생겼다. 2×2 가 이 폭에서 가장 읽기 좋다. */ .price{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:stretch} /* ★카드 높이를 서로 맞춘다 (미르 지시 2026-08-31 — 들쑥날쑥한 게 싫다). grid 가 stretch 로 늘려주고, 안쪽은 flex 로 아래를 정렬한다. */ .price-c{position:relative;display:flex;flex-direction:column;height:100%; background:#fff;border:1.5px solid var(--line);border-radius:18px; padding:26px 22px 22px;transition:border-color .28s,box-shadow .28s,transform .28s var(--ease)} .price-c:hover{border-color:var(--c);transform:translateY(-4px); box-shadow:0 16px 34px color-mix(in srgb,var(--c) 20%,transparent)} /* 추천 상품 */ .price-c.best{border-color:var(--c);border-width:2px; box-shadow:0 14px 34px color-mix(in srgb,var(--c) 26%,transparent)} .price-c.best::before{content:"BEST";position:absolute;top:-11px;left:50%; transform:translateX(-50%);background:var(--c);color:#fff;font-size:11px;font-weight:800; letter-spacing:.09em;padding:5px 14px;border-radius:999px; font-family:"Wanted Sans Variable",sans-serif} .price-n{font-size:13px;font-weight:800;letter-spacing:.05em;color:var(--c); font-family:"Wanted Sans Variable",sans-serif;margin-bottom:6px} .price-t{font-size:19px;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1.3} .price-d{margin-top:7px;font-size:13.5px;line-height:1.6;color:var(--gray);min-height:44px} /* 대표 금액 — 가장 크게 */ .price-big{margin:16px 0 4px;display:flex;align-items:baseline;gap:4px; padding-top:16px;border-top:1px solid var(--line)} .price-c .price-spec{margin-top:auto} .price-big b{font-family:"Wanted Sans Variable",sans-serif;font-size:33px;font-weight:800; letter-spacing:-.045em;color:var(--ink);line-height:1} .price-big span{font-size:14px;font-weight:700;color:var(--gray)} .price-vat{font-size:12px;color:var(--gray-l);margin-bottom:14px} /* 기간별 금액 */ .price-rows{display:grid;gap:7px} .price-r{display:grid;grid-template-columns:52px 1fr auto;gap:9px;align-items:center; padding:10px 11px;border-radius:10px;background:#FAFAF8;font-size:13.5px} .price-r.hot{background:var(--c-s)} .price-r dt{font-weight:800;color:var(--ink);font-size:13px} .price-r .cut{font-family:"Wanted Sans Variable",sans-serif;font-size:11.5px;font-weight:700; color:#C9C9C5;text-decoration:line-through;justify-self:start} .price-r .now{font-family:"Wanted Sans Variable",sans-serif;font-size:15.5px;font-weight:800; color:var(--ink);letter-spacing:-.03em;white-space:nowrap} .price-r.hot .now{color:var(--c)} .price-save{display:inline-block;margin-top:2px;font-size:11px;font-weight:800;color:var(--c); background:var(--c-s);border-radius:5px;padding:2px 7px; font-family:"Wanted Sans Variable",sans-serif} .price-foot{margin-top:20px;display:grid;gap:9px} .price-note{font-size:13.5px;line-height:1.7;color:var(--gray-l);padding:14px 17px; background:var(--y-soft);border-radius:11px;border:1px dashed rgba(0,0,0,.13)} .price-note b{color:var(--txt);font-weight:700} /* 포스팅 수 등 구성 한 줄 */ .price-spec{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px} .price-spec i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--gray); background:#F4F4F2;border-radius:6px;padding:4px 8px;letter-spacing:-.02em} .price-c.best .price-spec i{background:var(--c-s);color:var(--c)} /* 포스팅 횟수 칩만 상품색으로 채운다 (미르 지시 2026-09-01) */ .price-spec i.pcount{background:var(--c);color:#fff;border-color:transparent} .price-c.best .price-spec i.pcount{background:var(--c);color:#fff} @media (max-width:1100px){ .price{gap:18px} } @media (max-width:640px){ .price{grid-template-columns:1fr;gap:22px} .price-c{padding:22px 18px 18px} .price-d{min-height:0} .price-big b{font-size:29px} } /* 비교표 안의 가격 행 — 숫자가 눈에 먼저 들어오게 */ .tiers tr.pr td{background:#FCFCFB;font-size:13px;color:var(--gray);white-space:nowrap} .tiers tr.pr td.best{background:var(--c-s)} .tiers tr.pr td b{font-family:"Wanted Sans Variable",sans-serif;font-size:20px;font-weight:800; color:var(--ink);letter-spacing:-.03em;margin-right:1px} .tiers tr.pr td.best b{color:var(--c)} /* 할인 없는 기본 상품 — 자리를 비워두면 카드가 짧아지므로 같은 자리에 표시한다 */ .price-base{display:inline-block;margin-top:2px;font-size:11px;font-weight:800; color:var(--gray);background:#F2F2F0;border-radius:5px;padding:2px 7px; font-family:"Wanted Sans Variable",sans-serif} /* ---------- "내 홈페이지가 생긴다" 강조 박스 (구글블로그 초기비용 설득) ---------- */ .own{margin-top:18px;padding:32px 32px 28px;border-radius:18px;background:var(--ink);color:#fff; position:relative;overflow:hidden;isolation:isolate} .own::before{content:"";position:absolute;inset:auto -14% -70% auto;width:400px;height:400px; border-radius:50%;z-index:-1;filter:blur(70px);opacity:.5; background:radial-gradient(circle,var(--c),transparent 68%)} .own-eye{font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--c);margin-bottom:10px; font-family:"Wanted Sans Variable",sans-serif} .own-t{font-size:27px;font-weight:800;letter-spacing:-.042em;line-height:1.34} .own-t b{color:var(--c)} .own-d{margin-top:14px;font-size:15.5px;line-height:1.78;color:rgba(255,255,255,.7);font-weight:300; max-width:620px} .own-d b{font-weight:700;color:#fff} .own-l{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px} .own-l li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.6; color:rgba(255,255,255,.82);background:rgba(255,255,255,.06);border-radius:11px;padding:13px 15px} .own-l li b{color:var(--c);font-weight:800} .own-l i{flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;background:var(--c); position:relative} .own-l i::after{content:"";position:absolute;left:5px;top:4px;width:4px;height:7px; border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)} @media (max-width:640px){ .own{padding:24px 20px 22px} .own-t{font-size:21px} .own-d{font-size:14.5px} .own-l{grid-template-columns:1fr} } /* 총액표 안의 작은 내역 (제작 59만+운영 30만 같은 설명) */ .tiers td small{display:block;margin-top:4px;font-size:11.5px;color:var(--gray-l);font-weight:600} /* ========================================================================== ★어두운 배경 위의 상품색 (2026-09-01) 통합패키지는 상품색이 먹색(#1A1A1A)이다. 히어로·강조박스·하단CTA 는 배경이 먹색이라 글자가 배경에 묻혀 안 보였다(실제로 금액이 사라졌다). → 어두운 곳에서만 쓸 대체색 --c-alt 를 두고, 없으면 --c 를 그대로 쓴다. 통합패키지 페이지만 에서 --c-alt:#FFEA00 을 넘긴다. ========================================================================== */ .shero-tag{background:var(--c-alt,var(--c))} .shero::after{background:var(--c-alt,var(--c))} .shero::before{background:radial-gradient(circle,var(--c-alt,var(--c)),transparent 68%)} .shero-lead b{color:var(--c-alt,var(--c))} .own::before{background:radial-gradient(circle,var(--c-alt,var(--c)),transparent 68%)} .own-eye{color:var(--c-alt,var(--c))} .own-t b{color:var(--c-alt,var(--c))} .own-l li b{color:var(--c-alt,var(--c))} .own-l i{background:var(--c-alt,var(--c))} .scta::before{background:radial-gradient(circle,var(--c-alt,var(--c)),transparent 68%)} .scta h2 b{color:var(--c-alt,var(--c))} /* 어두운 곳의 버튼 — 배경이 먹색이면 글자를 먹색으로 뒤집는다 */ .shero .btn-c,.scta .btn-c{background:var(--c-alt,var(--c)); color:var(--btn-c-txt,#fff); box-shadow:0 6px 20px color-mix(in srgb,var(--c-alt,var(--c)) 42%,transparent)} .shero .btn-c:hover,.scta .btn-c:hover{ box-shadow:0 10px 28px color-mix(in srgb,var(--c-alt,var(--c)) 58%,transparent)} /* 표 머리 안의 (VAT 별도) 같은 작은 단서 */ .tiers thead th small{display:block;margin-top:3px;font-size:11px;font-weight:600; color:var(--gray-l);letter-spacing:-.02em} /* ========================================================================== ★비교표 가격 행 — 모바일 마무리 (2026-09-01) 위쪽 @media(max-width:640px) 에서 이미 줄였는데도 계속 밀렸다. 원인은 340줄대의 `.tiers tr.pr td{...white-space:nowrap}` 이 **파일 뒤쪽에 있어서** 미디어쿼리 안의 값을 도로 덮어쓰기 때문이다(같은 specificity면 뒤가 이긴다). → 그래서 이 조정만 **파일 맨 끝**에 둔다. 순서가 곧 우선순위다. ========================================================================== */ @media (max-width:640px){ .tiers tr.pr td{white-space:normal;font-size:9px;padding:9px 2px} .tiers tr.pr td b{font-size:11.5px;margin-right:0;letter-spacing:-.05em} /* BEST 뱃지 밑 설명이 옆 칸까지 삐져나왔다 */ .tiers thead .best small{font-size:8.5px;letter-spacing:-.045em;white-space:normal} }