/* ===================================================================== People's Person · 피플스펄슨 — 공통 스타일 (style.css) 병원 유튜브 리빌딩 전문 스튜디오 · 멀티페이지 정적 홈페이지 ▣ 색 방향: 70% 화이트/오프화이트 · 20% 딥네이비(다크 섹션) · 10% 블루/레드 포인트 ▣ 폰트: Pretendard / 아이콘: Phosphor (각 HTML 에서 로드) ▣ 이 파일은 모든 페이지가 함께 사용합니다. 색/여백/버튼을 바꾸려면 여기를 수정하세요. ===================================================================== */ /* --------------------------------------------------------------------- 1. 디자인 토큰 --------------------------------------------------------------------- */ :root{ /* 밝은 표면 (메인) */ --paper:#FFFFFF; --paper-2:#F5F7FA; /* 오프화이트 섹션 */ --paper-3:#EDF1F7; /* 카드 hover / 보조 표면 */ /* 어두운 표면 (다크 섹션 · 약 20%) */ --navy:#0D1B3E; --navy-2:#142552; --navy-3:#1E3A6E; /* 텍스트 */ --ink:#0D1626; /* 제목 */ --ink-2:#3A4762; /* 본문 */ --ink-3:#6B7890; /* 메타 / 캡션 */ /* 라인 */ --line:rgba(13,22,38,.09); --line-2:rgba(13,22,38,.16); /* 포인트 컬러 */ --accent:#2F7FE0; /* 블루 */ --accent-ink:#1E69C9; --accent-soft:#EAF3FF; --red:#FF0033; /* 유튜브 레드 (영상/재생 포인트) */ --red-ink:#E1002E; --red-soft:#FFECF0; --good:#1FA971; /* 그림자 */ --sh-sm:0 1px 3px rgba(13,22,38,.06); --sh:0 10px 30px rgba(13,22,38,.08); --sh-lg:0 24px 56px rgba(13,22,38,.14); --sh-card:0 6px 20px rgba(13,22,38,.07); /* 타이포 */ --font:"Pretendard Variable","Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif; /* 모션 */ --ease:cubic-bezier(0.22,1,0.36,1); /* 레이아웃 */ --maxw:1240px; --gutter:clamp(20px,5vw,72px); --header-h:74px; /* 반경 */ --r-sm:10px; --r:16px; --r-lg:22px; --r-pill:999px; } /* --------------------------------------------------------------------- 2. 리셋 & 기본 --------------------------------------------------------------------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:var(--font); background:var(--paper); color:var(--ink-2); font-weight:500; line-height:1.6; letter-spacing:-0.01em; word-break:keep-all; overflow-wrap:break-word; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; padding-top:var(--header-h); } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} ul{list-style:none} i[class^="ph"]{line-height:1} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} ::selection{background:var(--accent);color:#fff} /* --------------------------------------------------------------------- 3. 레이아웃 유틸 --------------------------------------------------------------------- */ .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(64px,9vw,120px)} .section--tight{padding-block:clamp(48px,6vw,80px)} .section--cream{background:var(--paper-2)} .section--dark{background:var(--navy);color:#fff} .section--dark .lead,.section--dark p{color:rgba(255,255,255,.74)} .center{text-align:center;margin-inline:auto} .center.lead{max-width:64ch} /* 섹션 도입부 */ .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:800; letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:20px} .eyebrow::before{content:"";width:24px;height:2px;background:currentColor} .eyebrow.red{color:var(--red)} .eyebrow.on-dark{color:#7FB4FF} h1,h2,h3,h4{color:var(--ink);font-weight:800;line-height:1.16;letter-spacing:-0.025em} .section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff} .h-display{font-size:clamp(34px,6vw,72px);line-height:1.05;letter-spacing:-0.035em;font-weight:800} .h1{font-size:clamp(30px,5vw,56px);line-height:1.1;letter-spacing:-0.03em} .h2{font-size:clamp(26px,3.6vw,44px);line-height:1.14} .h3{font-size:clamp(20px,2.4vw,28px);line-height:1.25} .lead{font-size:clamp(16px,1.7vw,20px);color:var(--ink-2);font-weight:500;line-height:1.72;max-width:62ch} .muted{color:var(--ink-3)} .num{font-style:italic;font-weight:900;letter-spacing:-0.03em} .sec-head{max-width:720px} .sec-head.center{margin-inline:auto} .sec-head .lead{margin-top:18px} /* 그리드 헤더(좌측 제목 + 우측 더보기) */ .head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} /* --------------------------------------------------------------------- 4. 버튼 / 칩 --------------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px; border-radius:var(--r-sm);font-size:15.5px;font-weight:700;line-height:1;letter-spacing:-0.01em; white-space:nowrap;transition:background .25s var(--ease),color .25s,box-shadow .25s,transform .15s var(--ease)} .btn i{font-size:17px} .btn .arw{transition:transform .25s var(--ease)} .btn:hover .arw{transform:translateX(4px)} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-ink);box-shadow:0 8px 24px rgba(47,127,224,.32)} .btn-primary:active{transform:translateY(1px)} .btn-red{background:var(--red);color:#fff} .btn-red:hover{background:var(--red-ink);box-shadow:0 8px 24px rgba(255,0,51,.28)} .btn-red:active{transform:translateY(1px)} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:#000;box-shadow:var(--sh)} .btn-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-2)} .btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)} .btn-ghost{background:transparent;color:var(--accent);padding-inline:6px} .btn-ghost:hover{color:var(--accent-ink)} .btn-lg{padding:17px 30px;font-size:16.5px} .btn-sm{padding:11px 17px;font-size:14px} .btn-block{width:100%} /* 다크 섹션용 버튼 */ .section--dark .btn-outline,.on-dark .btn-outline{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)} .section--dark .btn-outline:hover,.on-dark .btn-outline:hover{box-shadow:inset 0 0 0 1.5px #fff} .btn-row{display:flex;flex-wrap:wrap;gap:14px} .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill); font-size:12.5px;font-weight:700;letter-spacing:-0.01em} .chip .dot{width:6px;height:6px;border-radius:999px;background:currentColor} .chip-blue{background:var(--accent-soft);color:var(--accent-ink)} .chip-red{background:var(--red-soft);color:var(--red-ink)} .chip-ink{background:var(--paper-3);color:var(--ink-2)} .chip-line{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line-2)} /* --------------------------------------------------------------------- 5. 헤더 / 내비게이션 --------------------------------------------------------------------- */ .site-header{position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:100; background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s} .site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(13,22,38,.02)} .site-header .container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px} .brand{display:flex;align-items:center;flex-shrink:0} .brand img{height:26px;width:auto} .main-nav{display:flex;align-items:center;gap:2px} .main-nav a{padding:9px 13px;font-size:15px;font-weight:600;color:var(--ink-2);border-radius:8px; white-space:nowrap;transition:color .2s,background .2s} .main-nav a:hover{color:var(--ink);background:var(--paper-3)} .main-nav a.active{color:var(--accent);font-weight:700} .header-cta{display:flex;align-items:center;gap:10px;flex-shrink:0} .header-phone{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:700;color:var(--ink)} .header-phone i{color:var(--accent);font-size:17px} .hamburger{display:none;width:44px;height:44px;border-radius:10px;flex-direction:column; align-items:center;justify-content:center;gap:5px} .hamburger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.open span:nth-child(2){opacity:0} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* 모바일 드로어 */ .drawer{position:fixed;inset:var(--header-h) 0 0 0;z-index:99;background:rgba(255,255,255,.99); display:flex;flex-direction:column;padding:24px var(--gutter) 120px; transform:translateY(-10px);opacity:0;pointer-events:none; transition:opacity .26s,transform .26s var(--ease);overflow-y:auto} .drawer.open{opacity:1;transform:none;pointer-events:auto} .drawer a{padding:17px 6px;font-size:20px;font-weight:700;color:var(--ink); border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center} .drawer a.active{color:var(--accent)} .drawer a i{color:var(--ink-3);font-size:18px} .drawer .drawer-cta{display:grid;gap:10px;margin-top:24px} /* --------------------------------------------------------------------- 6. 모바일 하단 고정 CTA --------------------------------------------------------------------- */ .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px; padding:11px var(--gutter) calc(11px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line)} .mobile-cta .btn{flex:1;padding:14px} /* --------------------------------------------------------------------- 7. 페이지 히어로 (서브페이지 공통) --------------------------------------------------------------------- */ .page-hero{padding-block:clamp(48px,7vw,84px) clamp(40px,6vw,64px);background:var(--paper-2); border-bottom:1px solid var(--line)} .page-hero .eyebrow{margin-bottom:18px} .page-hero h1{max-width:18ch} .page-hero .lead{margin-top:22px} .page-hero .btn-row{margin-top:34px} /* 홈 히어로 */ .home-hero{position:relative;overflow:hidden;padding-block:clamp(40px,6vw,72px) clamp(56px,8vw,96px)} .home-hero .container{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(40px,5vw,72px);align-items:center} .home-hero .badge{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:var(--r-pill);white-space:nowrap; background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:24px} .home-hero .badge .live{width:8px;height:8px;border-radius:999px;background:var(--red); box-shadow:0 0 0 0 rgba(255,0,51,.5);animation:pulse 2.2s var(--ease) infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,0,51,.5)}70%{box-shadow:0 0 0 9px rgba(255,0,51,0)}100%{box-shadow:0 0 0 0 rgba(255,0,51,0)}} .home-hero h1{font-size:clamp(34px,5.4vw,66px);line-height:1.08;letter-spacing:-0.035em} .home-hero .hl{color:var(--accent)} .home-hero .sub{margin-top:26px;font-size:clamp(15px,1.7vw,18px);color:var(--ink-2);line-height:1.75;max-width:52ch} .home-hero .btn-row{margin-top:36px} .home-hero .mini-stats{display:flex;flex-wrap:wrap;gap:28px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)} .home-hero .mini-stats .ms b{display:block;font-size:clamp(22px,2.6vw,30px);color:var(--ink)} .home-hero .mini-stats .ms span{font-size:13px;color:var(--ink-3);font-weight:600} /* 히어로 썸네일 클러스터 */ .hero-cluster{position:relative;height:clamp(360px,42vw,500px)} .hero-cluster .tc{position:absolute;border-radius:var(--r);overflow:hidden;background:var(--paper); box-shadow:var(--sh-lg);border:1px solid var(--line)} .hero-cluster .tc1{width:64%;top:2%;left:0;z-index:3;transform:rotate(-3deg)} .hero-cluster .tc2{width:54%;bottom:4%;right:0;z-index:4;transform:rotate(2.5deg)} .hero-cluster .tc3{width:40%;top:0;right:8%;z-index:2;transform:rotate(4deg)} .float{animation:floaty 7s var(--ease) infinite} .float.d2{animation-delay:-2.3s}.float.d3{animation-delay:-4.6s} @keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -12px}} @media (prefers-reduced-motion:reduce){.float{animation:none}} /* --------------------------------------------------------------------- 8. 썸네일 (포트폴리오 공통) --------------------------------------------------------------------- */ .thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#e9eef6,#dde6f2); background-size:cover;background-position:center;overflow:hidden} .thumb .ph-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#1b3566,#0f2348);color:rgba(255,255,255,.62);font-size:13px;font-weight:700;text-align:center;padding:14px} .thumb .play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:999px;background:var(--red); display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(255,0,51,.4); opacity:.95;transition:transform .3s var(--ease),opacity .3s} .thumb .play::after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:3px} .thumb .tag{position:absolute;left:11px;top:11px;z-index:2} .thumb .views{position:absolute;right:11px;bottom:11px;z-index:2;font-size:11.5px;font-weight:700; color:#fff;background:rgba(13,22,38,.72);padding:4px 9px;border-radius:6px} /* 포트폴리오 그리드 */ .pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .pf-grid.cols-2{grid-template-columns:repeat(2,1fr)} .pf-card{display:flex;flex-direction:column;text-align:left;width:100%;border-radius:var(--r);overflow:hidden; background:var(--paper);box-shadow:var(--sh-card);border:1px solid var(--line); transition:transform .3s var(--ease),box-shadow .3s} .pf-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)} .pf-card:hover .thumb .play{transform:scale(1.08);opacity:1} .pf-body{padding:18px 19px 20px;display:flex;flex-direction:column;gap:9px;flex:1} .pf-cat{font-size:12.5px;font-weight:800;color:var(--accent)} .pf-title{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.4} .pf-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line)} .pf-foot .ch{font-size:13px;font-weight:600;color:var(--ink-3)} .pf-foot .watch{font-size:13px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:5px} .pf-empty{grid-column:1/-1;text-align:center;padding:60px;color:var(--ink-3);font-weight:600} /* --------------------------------------------------------------------- 9. 대표 채널 카드 --------------------------------------------------------------------- */ .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .feat-card{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--paper); box-shadow:var(--sh-card);border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s} .feat-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)} .feat-cover{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center} .feat-cover .yt{position:absolute;left:16px;top:16px;z-index:2;display:flex;align-items:center;gap:7px; font-size:12px;font-weight:800;color:#fff;background:var(--red);padding:6px 11px;border-radius:7px} .feat-cover .yt::before{content:"";border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent} .feat-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:18px} .feat-body .cn{font-size:clamp(19px,2.2vw,24px);font-weight:800;color:var(--ink);line-height:1.25} .feat-stats{display:flex;gap:32px} .feat-stats .fs b{display:block;font-size:clamp(20px,2.4vw,26px);font-weight:900;font-style:italic;letter-spacing:-.03em;color:var(--ink)} .feat-stats .fs span{font-size:12.5px;color:var(--ink-3);font-weight:600;margin-top:3px} .feat-body .btn{align-self:flex-start} /* 보조 채널 카드 */ .subch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .subch-card{display:flex;align-items:center;gap:18px;padding:20px 22px;border-radius:var(--r);background:var(--paper); box-shadow:var(--sh-card);border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s} .subch-card:hover{transform:translateY(-4px);box-shadow:var(--sh)} .subch-card .av{width:58px;height:58px;border-radius:14px;flex-shrink:0;background-size:cover;background-position:center; position:relative;overflow:hidden;background-color:#13294f} .subch-card .av .pl{position:absolute;inset:0;margin:auto;width:24px;height:24px;border-radius:999px;background:var(--red);display:flex;align-items:center;justify-content:center} .subch-card .av .pl::after{content:"";border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px} .subch-card .si{flex:1;min-width:0} .subch-card .si .nm{font-size:16px;font-weight:800;color:var(--ink);line-height:1.3} .subch-card .si .mt{font-size:13px;color:var(--ink-3);font-weight:600;margin-top:5px} .subch-card .si .mt b{color:var(--accent);font-style:italic} .subch-card .go{flex-shrink:0;color:var(--ink-3);font-size:20px;transition:color .2s,transform .2s var(--ease)} .subch-card:hover .go{color:var(--accent);transform:translateX(3px)} /* --------------------------------------------------------------------- 10. 통계 (다크 밴드) --------------------------------------------------------------------- */ .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .stat-card .stn{font-size:clamp(34px,4.4vw,52px);font-weight:900;font-style:italic;letter-spacing:-.04em;line-height:1;color:#fff} .stat-card .stn .u{font-size:.42em;font-style:normal;font-weight:800;color:#7FB4FF;margin-left:4px} .stat-card .stt{font-size:14px;font-weight:700;color:rgba(255,255,255,.9);margin-top:14px} .stat-card .sts{font-size:12.5px;color:rgba(255,255,255,.5);margin-top:7px;font-weight:500;line-height:1.5} .stat-note{margin-top:30px;font-size:13px;color:rgba(255,255,255,.5);font-weight:500} /* 통계 (라이트 카드 버전) */ .stat-grid.light .stat-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;box-shadow:var(--sh-card)} .stat-grid.light .stn{color:var(--ink)} .stat-grid.light .stn .u{color:var(--accent)} .stat-grid.light .stt{color:var(--ink)} .stat-grid.light .sts{color:var(--ink-3)} /* --------------------------------------------------------------------- 11. 일반 카드 그리드 (특징/시스템/서비스) --------------------------------------------------------------------- */ .card-grid{display:grid;gap:20px} .card-grid.c2{grid-template-columns:repeat(2,1fr)} .card-grid.c3{grid-template-columns:repeat(3,1fr)} .card-grid.c4{grid-template-columns:repeat(4,1fr)} .icard{padding:30px 28px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line); box-shadow:var(--sh-card);transition:transform .3s var(--ease),box-shadow .3s} .icard:hover{transform:translateY(-5px);box-shadow:var(--sh)} .icard .ic{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center; background:var(--accent-soft);color:var(--accent);font-size:24px;margin-bottom:20px} .icard .ic.red{background:var(--red-soft);color:var(--red)} .icard .n{font-size:14px;font-weight:900;font-style:italic;color:var(--accent);letter-spacing:-.02em} .icard h3{font-size:clamp(18px,2vw,21px);margin-bottom:11px;margin-top:14px;line-height:1.3} .icard h3:first-child{margin-top:0} .icard p{font-size:14.5px;color:var(--ink-2);line-height:1.65} /* 다크 섹션 카드 */ .section--dark .icard{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none} .section--dark .icard p{color:rgba(255,255,255,.72)} .section--dark .icard .ic{background:rgba(127,180,255,.16);color:#9CC6FF} /* 체크리스트 카드 */ .check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .check-card{display:flex;align-items:flex-start;gap:15px;padding:22px 24px;border-radius:var(--r); background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-card);transition:transform .3s var(--ease),box-shadow .3s} .check-card:hover{transform:translateY(-3px);box-shadow:var(--sh)} .check-card .cx{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:var(--red-soft);color:var(--red);font-size:16px;margin-top:1px} .check-card p{font-size:16px;font-weight:600;color:var(--ink);line-height:1.5} /* --------------------------------------------------------------------- 12. 핵심 메시지 밴드 --------------------------------------------------------------------- */ .statement{text-align:center} .statement h2{font-size:clamp(26px,4.4vw,52px);line-height:1.22;max-width:18ch;margin-inline:auto} .statement .strike{position:relative;white-space:nowrap;color:var(--ink-3)} .statement .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:3px;background:var(--red);transform:rotate(-1.5deg)} .statement .em{color:var(--accent)} .section--dark .statement .strike{color:rgba(255,255,255,.4)} .section--dark .statement .em{color:#7FB4FF} .statement p{margin:28px auto 0;max-width:58ch} /* --------------------------------------------------------------------- 13. 진단 전 → 설계 후 (구조 비교) --------------------------------------------------------------------- */ .compare{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(16px,3vw,36px);align-items:center} .cmp-col{padding:30px 28px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--line)} .cmp-col.before{background:var(--red-soft);border-color:rgba(255,0,51,.16)} .cmp-col.after{background:var(--accent-soft);border-color:rgba(47,127,224,.22)} .cmp-lbl{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px} .cmp-col.before .cmp-lbl{color:var(--red-ink)} .cmp-col.after .cmp-lbl{color:var(--accent-ink)} .cmp-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line); font-size:15.5px;font-weight:600;color:var(--ink)} .cmp-item:last-child{border-bottom:0} .cmp-item .ci{width:24px;height:24px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900} .cmp-col.before .ci{background:rgba(255,0,51,.14);color:var(--red-ink)} .cmp-col.after .ci{background:rgba(47,127,224,.16);color:var(--accent-ink)} .cmp-arrow{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:999px; background:var(--ink);color:#fff;flex-shrink:0;font-size:22px} /* --------------------------------------------------------------------- 14. 프로세스 (스텝) --------------------------------------------------------------------- */ .steps{display:grid;gap:18px} .steps.grid4{grid-template-columns:repeat(4,1fr)} .step{position:relative;padding:26px 24px;border-radius:var(--r);background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-card)} .step .sn{font-size:13px;font-weight:900;font-style:italic;color:var(--accent)} .step .sic{width:44px;height:44px;border-radius:11px;background:var(--accent-soft);color:var(--accent); display:flex;align-items:center;justify-content:center;font-size:22px;margin:14px 0 16px} .step h4{font-size:16.5px;line-height:1.35} .step p{font-size:13.5px;color:var(--ink-3);margin-top:8px} /* 세로 타임라인 */ .timeline{position:relative;margin-top:10px} .timeline::before{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:var(--line-2)} .tl-item{position:relative;display:flex;gap:24px;padding:16px 0} .tl-item .tl-dot{width:48px;height:48px;border-radius:999px;flex-shrink:0;background:var(--paper); border:2px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center; font-weight:900;font-style:italic;font-size:15px;z-index:1} .tl-item .tl-body{padding-top:6px} .tl-item .tl-body h4{font-size:clamp(17px,2vw,20px)} .tl-item .tl-body p{font-size:14.5px;color:var(--ink-3);margin-top:6px} /* --------------------------------------------------------------------- 15. 릴스 / 쇼츠 그리드 --------------------------------------------------------------------- */ .reels-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .reel-card{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--paper); box-shadow:var(--sh-card);border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s} .reel-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)} .reel-thumb{position:relative;aspect-ratio:9/16;background-size:cover;background-position:center;background-color:#13294f} .reel-thumb .ph-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:linear-gradient(160deg,#2a1c3a,#11264c);color:rgba(255,255,255,.5);font-size:12.5px;font-weight:700} .reel-thumb .pf{position:absolute;left:11px;top:11px;z-index:2} .reel-thumb .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(13,22,38,.7))} .reel-thumb .play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:999px; background:rgba(255,255,255,.18);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);z-index:2} .reel-thumb .play::after{content:"";border-left:14px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px} .reel-body{padding:15px 16px 18px} .reel-body .rt{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.4} .reel-body .rl{font-size:13px;font-weight:700;color:var(--accent);margin-top:10px;display:inline-flex;align-items:center;gap:5px} /* --------------------------------------------------------------------- 16. 제작팀 그리드 --------------------------------------------------------------------- */ .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .team-card{border-radius:var(--r);overflow:hidden;background:var(--paper);box-shadow:var(--sh-card); border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s} .team-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)} .team-thumb{position:relative;aspect-ratio:4/3;background-size:cover;background-position:center;display:flex;align-items:flex-end} .team-thumb .ph-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-size:30px;font-weight:900;font-style:italic} .team-thumb .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,16,33,.82))} .team-foot{position:relative;z-index:2;padding:18px;width:100%} .team-foot .tn{font-size:17px;font-weight:800;color:#fff;line-height:1.25} .team-foot .tr{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:rgba(47,127,224,.92);padding:4px 10px;border-radius:6px;margin-top:9px} .team-foot .tm{font-size:12.5px;color:rgba(255,255,255,.78);margin-top:9px;font-weight:600} /* --------------------------------------------------------------------- 17. 플레이리스트 / iframe --------------------------------------------------------------------- */ .playlist{border-radius:var(--r-lg);overflow:hidden;background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-card)} .playlist-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;flex-wrap:wrap} .playlist-head .pt{display:flex;align-items:center;gap:11px;font-size:17px;font-weight:800;color:var(--ink)} .playlist-head .pt .yd{width:30px;height:21px;border-radius:5px;background:var(--red);display:flex;align-items:center;justify-content:center} .playlist-head .pt .yd::after{content:"";border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px} .playlist-frame{position:relative;aspect-ratio:16/9;background:#000} .playlist-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .playlist-frame .pl-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:9px;text-align:center;padding:24px;background:var(--paper-2);color:var(--ink-3)} .playlist-frame .pl-empty .t{font-size:15px;font-weight:700;color:var(--ink-2)} .playlist-frame .pl-empty .d{font-size:13px;font-weight:500} /* --------------------------------------------------------------------- 18. 카테고리 탭 --------------------------------------------------------------------- */ .tabs{display:flex;flex-wrap:wrap;gap:10px} .tab{padding:10px 18px;border-radius:var(--r-pill);font-size:14px;font-weight:700;color:var(--ink-2); white-space:nowrap;background:var(--paper);border:1px solid var(--line-2);transition:all .22s var(--ease)} .tab:hover{border-color:var(--ink-3);color:var(--ink)} .tab.active{background:var(--ink);color:#fff;border-color:var(--ink)} /* 모바일: 줄바꿈 대신 가로 스크롤 탭 */ @media (max-width:640px){ .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{flex:0 0 auto} } /* --------------------------------------------------------------------- 19. FAQ --------------------------------------------------------------------- */ .faq-list{max-width:860px} .faq-item{border-bottom:1px solid var(--line)} .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left; padding:24px 2px;font-size:clamp(16px,1.8vw,18.5px);font-weight:700;color:var(--ink);transition:color .2s} .faq-q:hover{color:var(--accent)} .faq-q .qn{color:var(--accent);font-style:italic;font-weight:900;margin-right:13px} .faq-q .ic{flex-shrink:0;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center; background:var(--accent-soft);color:var(--accent);font-size:15px;transition:transform .3s var(--ease),background .3s,color .3s} .faq-item.open .faq-q .ic{transform:rotate(45deg);background:var(--accent);color:#fff} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)} .faq-a .inner{padding:0 42px 24px 2px;font-size:15.5px;color:var(--ink-2);line-height:1.7} /* --------------------------------------------------------------------- 20. 폼 (무료 채널 진단) --------------------------------------------------------------------- */ .form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(26px,3.5vw,40px);box-shadow:var(--sh)} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field{display:flex;flex-direction:column;gap:7px} .field.full{grid-column:span 2} .field label{font-size:13.5px;font-weight:700;color:var(--ink)} .field label .req{color:var(--red);margin-left:3px} .field input,.field textarea,.field select{width:100%;padding:13px 15px;border-radius:var(--r-sm); background:var(--paper);color:var(--ink);font-family:inherit;font-size:15px;font-weight:500; border:1.5px solid var(--line-2);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none} .field textarea{resize:vertical;min-height:96px} .field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,127,224,.15)} .field input::placeholder,.field textarea::placeholder{color:#9aa6bd} .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6783' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px} .field .err{font-size:12.5px;color:var(--red);font-weight:600;display:none} .field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--red)} .field.invalid .err{display:block} .opt-row{display:flex;flex-wrap:wrap;gap:9px} .opt{position:relative;cursor:pointer} .opt input{position:absolute;opacity:0;inset:0;cursor:pointer} .opt span{display:inline-flex;align-items:center;padding:9px 15px;border-radius:9px;font-size:13.5px;font-weight:600; color:var(--ink-2);background:var(--paper);border:1.5px solid var(--line-2);transition:all .18s} .opt input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff} .opt input:focus-visible + span{box-shadow:0 0 0 3px rgba(47,127,224,.2)} .form-card .submit-row{margin-top:22px} .form-note{font-size:12px;color:var(--ink-3);margin-top:14px;text-align:center;line-height:1.5} .form-success{display:none;text-align:center;padding:30px 10px} .form-success.show{display:block} .form-success .ok{width:62px;height:62px;border-radius:999px;background:rgba(31,169,113,.14);color:var(--good); display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:30px} .form-success h3{font-size:21px} .form-success p{color:var(--ink-3);font-size:14.5px;margin-top:10px} /* 연락처 카드 */ .contact-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px} .contact-card{display:flex;align-items:center;gap:18px;padding:24px 26px;border-radius:var(--r); background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-card);transition:transform .3s var(--ease),box-shadow .3s} .contact-card:hover{transform:translateY(-3px);box-shadow:var(--sh)} .contact-card .cic{width:52px;height:52px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:24px} .contact-card.phone .cic{background:var(--accent-soft);color:var(--accent)} .contact-card.mail .cic{background:var(--red-soft);color:var(--red)} .contact-card .cl{display:block;font-size:12.5px;color:var(--ink-3);font-weight:600} .contact-card .cv{display:block;font-size:clamp(17px,2vw,21px);font-weight:800;color:var(--ink);margin-top:3px;letter-spacing:-.02em;word-break:break-all} /* --------------------------------------------------------------------- 21. CTA 밴드 --------------------------------------------------------------------- */ .cta-band{text-align:center} .cta-band h2{font-size:clamp(26px,3.8vw,46px);max-width:20ch;margin-inline:auto} .cta-band p{margin:20px auto 0;max-width:52ch} .cta-band .btn-row{justify-content:center;margin-top:34px} /* --------------------------------------------------------------------- 22. 푸터 --------------------------------------------------------------------- */ .site-footer{background:var(--navy);color:rgba(255,255,255,.7);padding-block:60px 36px} .site-footer .container{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px} .site-footer .fbrand img{height:30px;margin-bottom:18px} .site-footer .fbrand p{font-size:14px;color:rgba(255,255,255,.6);line-height:1.7;font-weight:500} .site-footer h5{font-size:13px;font-weight:800;color:#fff;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px} .site-footer .fnav{display:flex;flex-direction:column;gap:10px} .site-footer .fnav a,.site-footer .fcontact a,.site-footer .fcontact span{font-size:14px;color:rgba(255,255,255,.66);font-weight:500} .site-footer .fnav a:hover,.site-footer .fcontact a:hover{color:#fff} .site-footer .fcontact{display:flex;flex-direction:column;gap:10px} .site-footer .fbottom{max-width:var(--maxw);margin:40px auto 0;padding:24px var(--gutter) 0; border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center} .site-footer .fbottom span,.site-footer .fbottom a{font-size:12.5px;color:rgba(255,255,255,.45);font-weight:500} .site-footer .fbottom a:hover{color:rgba(255,255,255,.8)} /* --------------------------------------------------------------------- 23. 영상 모달 --------------------------------------------------------------------- */ .modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px; background:rgba(8,14,28,.84);backdrop-filter:blur(6px)} .modal.open{display:flex} .modal .box{width:100%;max-width:960px;position:relative} .modal .frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:var(--sh-lg)} .modal .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .modal .close{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:999px;background:rgba(255,255,255,.14); color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;transition:background .2s} .modal .close:hover{background:rgba(255,255,255,.28)} /* --------------------------------------------------------------------- 24. 스크롤 등장 애니메이션 --------------------------------------------------------------------- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}.reveal.d3{transition-delay:.21s} .reveal.d4{transition-delay:.28s}.reveal.d5{transition-delay:.35s}.reveal.d6{transition-delay:.42s} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* --------------------------------------------------------------------- 25. 반응형 --------------------------------------------------------------------- */ @media (max-width:1080px){ .home-hero .container{grid-template-columns:1fr;gap:44px} .hero-cluster{max-width:540px;height:min(440px,76vw)} .stat-grid,.card-grid.c4,.steps.grid4,.reels-grid{grid-template-columns:repeat(2,1fr)} .card-grid.c3,.pf-grid,.team-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:1160px){ .header-phone{display:none} .main-nav{gap:0} .main-nav a{padding:9px 10px;font-size:14px} } @media (max-width:860px){ :root{--header-h:64px} .main-nav,.header-cta{display:none} .hamburger{display:flex} .mobile-cta{display:flex} body{padding-bottom:76px} .feat-grid,.subch-grid,.check-grid,.card-grid.c2,.card-grid.c3,.card-grid.c4, .pf-grid,.pf-grid.cols-2,.team-grid,.reels-grid,.steps.grid4,.stat-grid, .form-grid,.contact-cards,.contact-card,.field.full{grid-template-columns:1fr} .field.full{grid-column:span 1} .compare{grid-template-columns:1fr;gap:14px} .cmp-arrow{transform:rotate(90deg);margin:0 auto} .site-footer .container{grid-template-columns:1fr;gap:32px} } @media (max-width:520px){ .reels-grid{grid-template-columns:repeat(2,1fr)} .home-hero .mini-stats{gap:18px} .feat-stats{gap:22px} } /* --------------------------------------------------------------------- 26. v2 추가 — 실제 이미지 카드 · '링크 준비 중' 상태 · 대표 쇼츠 --------------------------------------------------------------------- */ /* 썸네일 안의 실제 이미지 */ .thumb img,.feat-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .feat-cover{display:block} /* 대표 채널 카드: 본문이 span 기반이어도 동일하게 보이도록 */ .feat-card{color:inherit} .feat-body .pf-cat{margin-bottom:-4px} /* '준비 중' 상태 표시 (비활성처럼 보이지 않게, 부드러운 안내 톤) */ .prep-pill{display:inline-flex;align-items:center;gap:7px;align-self:flex-start; padding:11px 16px;border-radius:var(--r-sm);font-size:14px;font-weight:700; color:var(--ink-3);background:var(--paper-3);box-shadow:inset 0 0 0 1px var(--line)} .prep-pill i{font-size:15px;color:var(--accent)} /* 클릭 가능한 카드 vs 정적(링크 미준비) 카드 구분 */ .pf-card[href],.reel-card[href],.feat-card[href]{cursor:pointer} .pf-card.is-static,.reel-card.is-static{cursor:default} .pf-card.is-static:hover,.reel-card.is-static:hover{transform:none;box-shadow:var(--sh-card)} .pf-card.is-static:hover .thumb .play{transform:none} .rl.static{color:var(--ink-3)!important;font-weight:600} /* 대표가 직접 설명하는 쇼츠 (9:16 세로 프레임 + 텍스트) */ .short-spot{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:clamp(32px,5vw,72px);align-items:center} .short-spot.rev{grid-template-columns:1fr minmax(280px,360px)} .short-frame{position:relative;aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#000; box-shadow:var(--sh-lg);border:1px solid var(--line);margin-inline:auto;width:100%;max-width:360px} .section--dark .short-frame{border-color:rgba(255,255,255,.14)} .short-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .short-copy .eyebrow{margin-bottom:18px} .short-copy h2{margin-bottom:18px} .short-copy .lead{max-width:48ch} .short-copy .short-label{display:inline-flex;align-items:center;gap:9px;margin-top:26px; padding:11px 18px;border-radius:var(--r-pill);font-size:14.5px;font-weight:700; background:var(--red);color:#fff;box-shadow:0 8px 22px rgba(255,0,51,.26)} .short-copy .short-label i{font-size:17px} .section--dark .short-copy .short-label{background:var(--red)} /* 홈 히어로 — 실제 이미지 클러스터 */ .hero-cluster .tc .thumb{aspect-ratio:16/9;border-radius:inherit} .hero-cluster .tc .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:14px 14px 12px; background:linear-gradient(180deg,transparent,rgba(8,15,32,.82));color:#fff;font-size:13px;font-weight:700; display:flex;align-items:center;gap:7px} .hero-cluster .tc .cap .chip{font-size:11px;padding:3px 9px} @media (max-width:860px){ .short-spot,.short-spot.rev{grid-template-columns:1fr;gap:28px} .short-frame{max-width:300px} .short-copy{text-align:left} } /* --------------------------------------------------------------------- 27. 이미지 자리(에셋 슬롯) — 추후 실제 캡처로 교체하는 카드형 플레이스홀더 · 회색 박스 느낌을 피하고, 살짝 흐린 썸네일 느낌의 배경 패턴 + 작은 라벨 · 클래스: .asset-slot (기본) + 색 변형 --planning/--shooting/--report/--thumbnail/--question --------------------------------------------------------------------- */ .asset-slot{position:relative;border-radius:var(--r);overflow:hidden;isolation:isolate; border:1px solid var(--line);aspect-ratio:16/10;background:var(--paper-2); box-shadow:var(--sh-card);display:flex;align-items:flex-end; transition:transform .3s var(--ease),box-shadow .3s} .asset-slot:hover{transform:translateY(-4px);box-shadow:var(--sh)} /* 얇은 라인 그리드(촬영 보드 느낌) */ .asset-slot::before{content:"";position:absolute;inset:0;z-index:0; background-image:linear-gradient(rgba(13,22,38,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(13,22,38,.045) 1px,transparent 1px); background-size:34px 34px;background-position:center;-webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35))} /* 흐릿한 빛망울(썸네일 미리보기 느낌) */ .asset-slot::after{content:"";position:absolute;z-index:0;width:62%;aspect-ratio:1;border-radius:50%; top:-22%;right:-12%;background:radial-gradient(circle,var(--slot-glow,rgba(47,127,224,.22)),transparent 68%);filter:blur(2px)} /* 가운데 은은한 아이콘 마크 */ .asset-slot .slot-mark{position:absolute;z-index:1;left:0;right:0;top:46%;transform:translateY(-50%); text-align:center;font-size:30px;color:var(--slot-ink,var(--accent));opacity:.5} /* 자연스러운 라벨(개발자 문구 X) */ .asset-slot .placeholder-label{position:relative;z-index:2;margin:13px; display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:var(--r-pill); background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); box-shadow:var(--sh-sm);font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.01em} .asset-slot .placeholder-label i{font-size:14px;color:var(--slot-ink,var(--accent))} /* 작은 슬롯(산출물·체크 카드 옆) */ .asset-slot.is-compact{aspect-ratio:4/3;border-radius:var(--r-sm)} .asset-slot.is-compact .slot-mark{font-size:24px} .asset-slot.is-compact .placeholder-label{margin:10px;padding:6px 11px;font-size:12px} /* 색 변형 */ .asset-slot--planning{--slot-glow:rgba(47,127,224,.22);--slot-ink:var(--accent)} .asset-slot--question{--slot-glow:rgba(30,58,110,.18);--slot-ink:var(--navy-3)} .asset-slot--shooting{--slot-glow:rgba(255,0,51,.16);--slot-ink:var(--red)} .asset-slot--thumbnail{--slot-glow:rgba(255,0,51,.14);--slot-ink:var(--red-ink)} .asset-slot--report{--slot-glow:rgba(31,169,113,.20);--slot-ink:var(--good)} /* 이미지가 실제로 들어오면 패턴/마크를 덮도록 */ .asset-slot > img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover} /* 진단 카드(이미지 + 텍스트 결합형) */ .diag-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .diag-card{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--paper); border:1px solid var(--line);box-shadow:var(--sh-card);transition:transform .3s var(--ease),box-shadow .3s} .diag-card:hover{transform:translateY(-5px);box-shadow:var(--sh)} .diag-card .asset-slot{border-radius:0;border:0;border-bottom:1px solid var(--line);box-shadow:none} .diag-card .asset-slot:hover{transform:none;box-shadow:none} .diag-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:9px} .diag-body .dn{font-size:13px;font-weight:900;font-style:italic;color:var(--accent)} .diag-body h3{font-size:clamp(17px,1.9vw,20px);line-height:1.32} .diag-body p{font-size:14.5px;color:var(--ink-2);line-height:1.65} /* 산출물(작은 슬롯 + 라벨) 그리드 */ .deliver-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px} .deliver-card{display:flex;flex-direction:column;gap:13px} .deliver-card .dt{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.4;padding-inline:2px} .deliver-card .dd{font-size:12.5px;color:var(--ink-3);line-height:1.55;padding-inline:2px;margin-top:-6px} /* 메모/노트 카드(신규 시작 체크) */ .note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .note-card{position:relative;padding:24px 22px 22px;border-radius:var(--r);background:var(--paper); border:1px solid var(--line);box-shadow:var(--sh-card);transition:transform .3s var(--ease),box-shadow .3s; display:flex;flex-direction:column;gap:12px} .note-card:hover{transform:translateY(-4px);box-shadow:var(--sh)} .note-card .nx{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center; background:var(--accent-soft);color:var(--accent);font-size:15px;font-weight:900;font-style:italic} .note-card p{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.5} /* 90일 타임라인(이미지 슬롯 포함) */ .plan90{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px} .plan90 .pcard{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--paper); border:1px solid var(--line);box-shadow:var(--sh-card)} .plan90 .pcard .asset-slot{border-radius:0;border:0;border-bottom:1px solid var(--line);box-shadow:none} .plan90 .pcard .asset-slot:hover{transform:none;box-shadow:none} .plan90 .pbody{padding:22px 24px 24px} .plan90 .pm{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;letter-spacing:.04em; color:var(--accent);margin-bottom:11px} .plan90 .pm .pmn{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);display:flex; align-items:center;justify-content:center;font-style:italic;font-weight:900} .plan90 .pbody h4{font-size:clamp(17px,1.9vw,20px);line-height:1.3} .plan90 .pbody p{font-size:14px;color:var(--ink-3);line-height:1.6;margin-top:9px} /* 갤러리(가로 슬롯 줄) */ .slot-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .slot-gallery .asset-slot{aspect-ratio:3/4} @media (max-width:1080px){ .deliver-grid{grid-template-columns:repeat(3,1fr)} .note-grid,.plan90{grid-template-columns:repeat(3,1fr)} .slot-gallery{grid-template-columns:repeat(3,1fr)} } @media (max-width:860px){ .diag-grid,.deliver-grid,.note-grid,.plan90,.slot-gallery{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .diag-grid,.deliver-grid,.note-grid,.plan90,.slot-gallery{grid-template-columns:1fr} } /* --------------------------------------------------------------------- 28. 홈 히어로 — 채널 썸네일 월 (실제 채널 그리드 스크린샷 montage) --------------------------------------------------------------------- */ .hero-wall{position:relative;height:clamp(420px,46vw,540px);width:100%} .chan-board{position:absolute;border-radius:var(--r);overflow:hidden;background:#fff; box-shadow:var(--sh-lg);border:1px solid var(--line)} .chan-board .cb-head{display:flex;align-items:center;gap:9px;padding:9px 12px;background:#fff;border-bottom:1px solid var(--line)} .chan-board .cb-head .yd{width:24px;height:17px;border-radius:4px;background:var(--red);flex-shrink:0;display:flex;align-items:center;justify-content:center} .chan-board .cb-head .yd::after{content:"";border-left:7px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:1px} .chan-board .cb-head .cbt{min-width:0;line-height:1.15;display:flex;flex-direction:column;gap:1px} .chan-board .cb-head .cbn{display:block;font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .chan-board .cb-head .cbc{display:block;font-size:10.5px;font-weight:800;color:var(--accent);letter-spacing:.02em} .chan-board img{width:100%;display:block} .cb-a{width:60%;top:0;left:0;z-index:2;transform:rotate(-2.2deg)} .cb-b{width:52%;right:0;bottom:0;z-index:4;transform:rotate(2.4deg)} .cb-c{width:40%;top:9%;right:3%;z-index:1;transform:rotate(3.2deg)} .hero-rebadge{position:absolute;left:7%;bottom:6%;z-index:5;display:inline-flex;align-items:center;gap:9px; padding:11px 17px;border-radius:var(--r-pill);background:var(--ink);color:#fff; box-shadow:0 14px 32px rgba(13,22,38,.28);font-size:13.5px;font-weight:800;letter-spacing:-.01em;white-space:nowrap} .hero-rebadge .ar{display:inline-flex;align-items:center;gap:6px;color:#8FC0FF} .hero-rebadge i{font-size:16px} .hero-tagline{margin-top:30px;font-size:13.5px;font-weight:700;color:var(--ink-3);display:flex;align-items:center;gap:10px;flex-wrap:wrap} .hero-tagline .sep{width:4px;height:4px;border-radius:999px;background:var(--line-2)} @media (max-width:1080px){ .hero-wall{max-width:560px;width:min(560px,100%);height:min(480px,84vw);justify-self:center;margin-inline:auto} } @media (max-width:520px){ .cb-a{width:64%}.cb-b{width:56%}.cb-c{display:none} .hero-rebadge{font-size:12px;padding:9px 13px} } /* --------------------------------------------------------------------- 29. 비교 매트릭스 — 기존 운영 vs 피플스펄슨 (다크 섹션) --------------------------------------------------------------------- */ .vs{display:grid;gap:12px;margin-top:48px} .vs-row{display:grid;grid-template-columns:0.9fr 1.25fr 1.4fr;gap:14px;align-items:stretch} .vs-cell{padding:18px 22px;border-radius:14px;font-size:15.5px;font-weight:600;line-height:1.45;display:flex;align-items:center;gap:11px} .vs-head .vs-cell{padding-block:14px;font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase} .vs-key{color:#fff;font-weight:800;background:rgba(255,255,255,.06)} .vs-head .vs-key{background:transparent;color:rgba(255,255,255,.5)} .vs-old{background:rgba(255,255,255,.045);color:rgba(255,255,255,.62)} .vs-head .vs-old{background:transparent;color:rgba(255,255,255,.5)} .vs-new{background:linear-gradient(180deg,rgba(47,127,224,.22),rgba(47,127,224,.12)); color:#fff;font-weight:700;box-shadow:inset 0 0 0 1.5px rgba(127,180,255,.5)} .vs-head .vs-new{background:var(--accent);color:#fff;box-shadow:none;justify-content:center} .vs-cell .vi{width:24px;height:24px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900} .vs-old .vi{background:rgba(255,255,255,.08);color:rgba(255,255,255,.5)} .vs-new .vi{background:rgba(127,180,255,.28);color:#cfe2ff} .vs-note{margin-top:26px;font-size:13.5px;color:rgba(255,255,255,.5);font-weight:500} @media (max-width:760px){ .vs-row{grid-template-columns:1fr;gap:8px;padding:14px;border-radius:16px;background:rgba(255,255,255,.04)} .vs-head{display:none} .vs-cell{padding:12px 16px;border-radius:10px} .vs-key{font-size:14px;background:transparent;padding-bottom:2px} .vs-old::before{content:"기존 운영";font-size:11px;font-weight:800;color:rgba(255,255,255,.4);margin-right:2px} .vs-new::before{content:"피플스펄슨";font-size:11px;font-weight:800;color:#8FC0FF;margin-right:2px} } /* --------------------------------------------------------------------- 30. 유입 콘텐츠 카드 (리빌딩) — 실제 콘텐츠 예시 캡처 --------------------------------------------------------------------- */ .inflow-grid{display:grid;gap:22px;margin-top:44px} .inflow-card{border-radius:var(--r);overflow:hidden;background:var(--paper);border:1px solid var(--line); box-shadow:var(--sh-card);transition:transform .3s var(--ease),box-shadow .3s} .inflow-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)} .inflow-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid var(--line)} .inflow-head .ih-l{display:flex;align-items:center;gap:12px;min-width:0} .inflow-head .ih-l .yd{width:30px;height:21px;border-radius:5px;background:var(--red);flex-shrink:0;display:flex;align-items:center;justify-content:center} .inflow-head .ih-l .yd::after{content:"";border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px} .inflow-head .ih-l .nm{font-size:16px;font-weight:800;color:var(--ink);line-height:1.3} .inflow-head .ih-l .ct{font-size:12.5px;font-weight:700;color:var(--ink-3);margin-top:2px} .inflow-shot{display:block;background:#0f0f0f} .inflow-shot img{width:100%;display:block} @media (max-width:760px){ .inflow-head{padding:14px 16px} } /* --------------------------------------------------------------------- 31. 지역 키워드 전략 (프로세스) — 설명 + 전략 대시보드 이미지 --------------------------------------------------------------------- */ .kw-split{display:grid;grid-template-columns:0.92fr 1.18fr;gap:clamp(32px,5vw,60px);align-items:center;margin-top:44px} .kw-copy .pts{margin-top:26px;display:grid;gap:13px} .kw-copy .pts li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.5} .kw-copy .pts li i{color:var(--accent);font-size:19px;margin-top:1px;flex-shrink:0} .kw-figure{margin:0} .kw-shot{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-lg);background:#0b1020; transition:transform .35s var(--ease),box-shadow .35s} .kw-shot:hover{transform:translateY(-4px);box-shadow:0 30px 64px rgba(13,22,38,.22)} .kw-shot img{width:100%;display:block} .kw-cap{font-size:12.5px;color:var(--ink-3);font-weight:600;margin-top:14px;text-align:center;letter-spacing:-.01em} .kw-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:30px} .kw-flow .kf{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r-pill); background:var(--paper);border:1px solid var(--line-2);font-size:13.5px;font-weight:700;color:var(--ink)} .kw-flow .kf .kn{width:20px;height:20px;border-radius:6px;background:var(--accent-soft);color:var(--accent); display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;font-style:italic} .kw-flow .ka{color:var(--ink-3);font-size:15px} @media (max-width:860px){.kw-split{grid-template-columns:1fr;gap:28px}} /* ===================================================================== 32. v3 추가 — 홈 히어로 카피 중심 / 콘텐츠 예시 카드 / 숏폼 비교 / 산출물 정돈 / 신규 시작 프로세스 ===================================================================== */ /* ── 홈 히어로 v2 (카피 중심) ───────────────────────────────────────── */ .home-hero-v2{position:relative;overflow:hidden;background:var(--paper); padding-block:clamp(60px,10vw,124px) clamp(52px,8vw,100px);border-bottom:1px solid var(--line)} .home-hero-v2 .container{position:relative;z-index:2;max-width:1010px;text-align:center} .hh2-bg{position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:clamp(48px,6vw,72px) clamp(48px,6vw,72px);background-position:center top; -webkit-mask-image:radial-gradient(ellipse 78% 66% at 50% 34%,#000,transparent 80%); mask-image:radial-gradient(ellipse 78% 66% at 50% 34%,#000,transparent 80%)} .hh2-glow{position:absolute;z-index:0;width:62%;aspect-ratio:1.7;left:50%;top:-14%;transform:translateX(-50%); background:radial-gradient(ellipse,rgba(47,127,224,.11),transparent 68%);filter:blur(6px);pointer-events:none} .home-hero-v2 .badge{margin-bottom:clamp(24px,3vw,32px)} .badge-hero{gap:9px;padding:7px 8px 7px 7px;font-size:14px;background:var(--paper-2); box-shadow:inset 0 0 0 1px var(--line),var(--sh-sm)} .badge-hero .bp{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-weight:700;padding-left:9px;white-space:nowrap} .badge-hero .bp .live{width:8px;height:8px;border-radius:999px;background:var(--red); box-shadow:0 0 0 0 rgba(255,0,51,.5);animation:pulse 2.2s var(--ease) infinite} .badge-hero b{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:var(--r-pill); background:var(--red);color:#fff;font-weight:800;font-size:15px;letter-spacing:-.01em;white-space:nowrap; box-shadow:0 4px 12px rgba(255,0,51,.22)} .badge-hero b i{font-size:16px} .home-hero-v2 h1{font-size:clamp(35px,6.4vw,76px);line-height:1.08;letter-spacing:-0.04em} .home-hero-v2 h1 .hl{position:relative;color:var(--accent);white-space:nowrap} .home-hero-v2 h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.13em; background:rgba(47,127,224,.20);border-radius:3px;z-index:-1} .home-hero-v2 .sub{margin:clamp(24px,3vw,30px) auto 0;font-size:clamp(16px,1.85vw,20px); color:var(--ink-2);line-height:1.72;max-width:62ch;font-weight:500} .home-hero-v2 .sub b{color:var(--ink);font-weight:800} .home-hero-v2 .sub .sub-line2{display:block;margin-top:.85em} .home-hero-v2 .btn-row{justify-content:center;margin-top:clamp(32px,4.5vw,42px)} /* 리빌딩 파이프라인 스트립 */ .hh2-pipe{margin:clamp(44px,7vw,68px) auto 0;display:inline-flex;align-items:center;flex-wrap:wrap; justify-content:center;gap:11px 12px;padding:15px 20px;border:1px solid var(--line); border-radius:var(--r-lg);background:var(--paper-2);box-shadow:var(--sh-sm)} .hh2-pipe .pl{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .hh2-pipe .pl::after{content:"";width:16px;height:1px;background:var(--line-2)} .hh2-pipe .ps{display:inline-flex;align-items:center;padding:9px 15px;border-radius:var(--r-pill); background:var(--paper);border:1px solid var(--line-2);font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap} .hh2-pipe .pa{color:var(--accent);font-size:14px;font-weight:800} @media (max-width:560px){ .hh2-pipe{flex-direction:column;gap:9px;width:100%;padding:18px} .hh2-pipe .pl::after{display:none} .hh2-pipe .ps{width:100%;justify-content:center} .hh2-pipe .pa{transform:rotate(90deg)} } /* ── 콘텐츠 예시 카드 (리빌딩) — 유튜브 리스트형 캡처 ──────────────────── */ .example-grid{display:grid;gap:20px;margin-top:40px} .example-card{display:block;border-radius:var(--r);overflow:hidden;background:var(--paper); border:1px solid var(--line);box-shadow:var(--sh-card);transition:transform .3s var(--ease),box-shadow .3s} a.example-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)} .example-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:16px 20px;border-bottom:1px solid var(--line)} .example-top .et-l{display:flex;align-items:center;gap:11px;min-width:0} .example-top .et-l .yd{width:30px;height:21px;border-radius:5px;background:var(--red);flex-shrink:0;display:flex;align-items:center;justify-content:center} .example-top .et-l .yd::after{content:"";border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:2px} .example-top .et-l .nm{font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.25} .example-top .et-l .ct{font-size:12.5px;font-weight:700;color:var(--ink-3);margin-top:2px} .example-top .et-r{display:flex;align-items:center;gap:9px;flex-shrink:0} .example-top .watch{font-size:13px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:5px;white-space:nowrap} a.example-card:hover .watch i{transform:translateX(3px)} .example-top .watch i{transition:transform .25s var(--ease)} .example-shot{display:block;background:#0f0f0f} .example-shot img{width:100%;display:block} .example-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:15px 20px;border-top:1px solid var(--line)} .example-foot .watch{font-size:13.5px;font-weight:800;color:var(--accent);display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .example-foot .watch i{transition:transform .25s var(--ease);font-size:15px} .example-foot .example-meta{font-size:12.5px;font-weight:700;color:var(--ink-3);white-space:nowrap} a.example-card:hover .example-foot .watch i{transform:translate(3px,-3px)} @media (max-width:560px){.example-top{padding:13px 15px}.example-foot{padding:13px 15px}} /* ── 질문형 제목 예시 (리빌딩) ──────────────────────────────────────── */ .qtitle-list{display:grid;gap:12px;margin-top:32px} .qtitle-row{display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:var(--r); background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-card); transition:transform .25s var(--ease),box-shadow .25s} .qtitle-row:hover{transform:translateY(-3px);box-shadow:var(--sh)} .qtitle-row .qmark{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:var(--red-soft);color:var(--red);font-size:19px} .qtitle-row .qbody{flex:1;min-width:0} .qtitle-row .qt{font-size:clamp(16px,1.9vw,19px);font-weight:800;color:var(--ink);line-height:1.4} .qtitle-row .qm{font-size:13px;font-weight:600;color:var(--ink-3);margin-top:5px} .qtitle-row .qcat{flex-shrink:0;align-self:flex-start;margin-top:2px} @media (max-width:560px){ .qtitle-row{flex-wrap:wrap;gap:12px;padding:16px 17px} .qtitle-row .qcat{order:-1} } /* ── 숏폼 플랫폼 비교 (2열 카드) ────────────────────────────────────── */ .compare2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px} .cmp2-card{border-radius:var(--r-lg);overflow:hidden;background:var(--paper);border:1px solid var(--line); box-shadow:var(--sh-card);display:flex;flex-direction:column} .cmp2-head{display:flex;align-items:center;gap:13px;padding:24px 26px;color:#fff} .cmp2-card.reels .cmp2-head{background:linear-gradient(120deg,#C13584,#E1306C 60%,#F77737)} .cmp2-card.shorts .cmp2-head{background:linear-gradient(120deg,#1a1a1a,#FF0033)} .cmp2-head .ci{width:48px;height:48px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.16);font-size:25px;color:#fff} .cmp2-head .ch{font-size:clamp(18px,2.1vw,22px);font-weight:800;line-height:1.2;color:#fff} .cmp2-head .cs{font-size:12.5px;font-weight:600;color:rgba(255,255,255,.85);margin-top:3px} .cmp2-body{padding:8px 26px 26px} .cmp2-row{display:flex;flex-direction:column;gap:5px;padding:17px 0;border-bottom:1px solid var(--line)} .cmp2-row:last-child{border-bottom:0} .cmp2-row .rk{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)} .cmp2-row .rv{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.5} .cmp2-row .rv b{font-weight:800} .cmp2-card.reels .rv b{color:#D6357F} .cmp2-card.shorts .rv b{color:var(--red-ink)} @media (max-width:760px){.compare2{grid-template-columns:1fr;gap:16px}} /* ── 신규 시작: 촬영 전 정리 리스트 (이미지 없음) ─────────────────────── */ .prep-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .prep-item{display:flex;align-items:center;gap:16px;padding:22px 24px;border-radius:var(--r); background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-sm); transition:transform .3s var(--ease),box-shadow .3s} .prep-item:hover{transform:translateY(-3px);box-shadow:var(--sh-card)} .prep-item .pi{width:48px;height:48px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center; background:var(--paper-2);color:var(--accent);font-size:23px;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--line)} .prep-item .pi.red{color:var(--red)} .prep-item .pb{display:flex;flex-direction:column;min-width:0} .prep-item .pt{font-size:17px;font-weight:800;color:var(--ink);line-height:1.3} .prep-item .pd{font-size:13.5px;color:var(--ink-3);font-weight:600;margin-top:4px;line-height:1.5} .prep-item .ptag{margin-left:auto;flex-shrink:0;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--ink-3); background:var(--paper-2);border:1px solid var(--line);padding:6px 11px;border-radius:var(--r-pill)} @media (max-width:760px){.prep-grid{grid-template-columns:1fr}.prep-item .ptag{display:none}} /* ── 산출물 정돈형 리스트 (프로세스 Deliverables) ──────────────────────── */ .deliver-clean{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:44px} .dlv-item{display:flex;align-items:flex-start;gap:18px;padding:24px 26px;border-radius:var(--r); background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-card); transition:transform .28s var(--ease),box-shadow .28s} .dlv-item:hover{transform:translateY(-4px);box-shadow:var(--sh)} .dlv-item .di{width:50px;height:50px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center; background:var(--accent-soft);color:var(--accent);font-size:24px} .dlv-item .di.red{background:var(--red-soft);color:var(--red)} .dlv-item .di.good{background:rgba(31,169,113,.13);color:var(--good)} .dlv-item .dx{flex:1;min-width:0} .dlv-item .dx .dn{font-size:12px;font-weight:900;font-style:italic;color:var(--accent);letter-spacing:.02em} .dlv-item .dx h4{font-size:17px;line-height:1.32;margin-top:5px} .dlv-item .dx p{font-size:13.5px;color:var(--ink-3);line-height:1.6;margin-top:7px} @media (max-width:760px){.deliver-clean{grid-template-columns:1fr}} /* ── 신규 시작 프로세스 (가로 흐름 스텝) ─────────────────────────────── */ .flow-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .flow-step{position:relative;padding:28px 26px;border-radius:var(--r);background:var(--paper); border:1px solid var(--line);box-shadow:var(--sh-card);overflow:hidden; transition:transform .28s var(--ease),box-shadow .28s} .flow-step:hover{transform:translateY(-5px);box-shadow:var(--sh)} .flow-step .fsn{position:absolute;top:18px;right:22px;font-size:46px;font-weight:900;font-style:italic; letter-spacing:-.04em;color:var(--paper-3);line-height:1;z-index:0} .flow-step .fsi{position:relative;z-index:1;width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center; background:var(--accent-soft);color:var(--accent);font-size:24px;margin-bottom:18px} .flow-step .fsi.red{background:var(--red-soft);color:var(--red)} .flow-step h4{position:relative;z-index:1;font-size:clamp(17px,1.9vw,19px);line-height:1.3} .flow-step .fstep{position:relative;z-index:1;font-size:12px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--accent);margin-bottom:9px;display:block} .flow-step p{position:relative;z-index:1;font-size:13.8px;color:var(--ink-2);line-height:1.62;margin-top:9px} @media (max-width:980px){.flow-steps{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.flow-steps{grid-template-columns:1fr}} /* ── 차별점 미니 리스트 (신규 시작) ─────────────────────────────────── */ .diff-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .diff-card{padding:28px 26px;border-radius:var(--r);background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12)} .diff-card .dfi{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center; background:rgba(127,180,255,.16);color:#9CC6FF;font-size:23px;margin-bottom:18px} .diff-card h4{font-size:18px;color:#fff;line-height:1.3} .diff-card p{font-size:14px;color:rgba(255,255,255,.72);line-height:1.62;margin-top:10px} @media (max-width:860px){.diff-row{grid-template-columns:1fr}} /* ── 대표 채널 카드 — 하단 절제된 링크 + 마감 정돈 ─────────────────────── */ .feat-go{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-top:2px; font-size:14px;font-weight:800;color:var(--accent);letter-spacing:-.01em; padding-top:16px;border-top:1px solid var(--line);width:100%} .feat-go i{transition:transform .25s var(--ease);font-size:15px} a.feat-card:hover .feat-go i{transform:translate(3px,-3px)} a.feat-card:hover .feat-go{color:var(--accent-ink)} .feat-card .feat-cover .yt{font-size:11px;padding:5px 9px;opacity:.95} .feat-body .feat-stats{margin-top:2px}