/* ============================================================ Findable — Persona 레이어 "같은 브랜드, 다른 담당의 방." 브랜드 골격(nav/footer/다크 베이스/간격/접근성)은 그대로 두고, 콘텐츠 영역(.subhero + .article)에만 파트별 성격을 입힌다. 적용: 한 줄. 액센트 변수는 콘텐츠 컨테이너에만 재정의하므로 nav/footer는 브랜드 민트를 유지한다. 전부 transform/opacity·정적 텍스처라 reduced-motion 안전. ============================================================ */ /* 공통: 콘텐츠 영역 텍스처를 깔 수 있게 */ [class*="persona-"] .subhero{position:relative;overflow:hidden} [class*="persona-"] .subhero>.wrap{position:relative;z-index:1} [class*="persona-"] .subhero .eyebrow::before{ content:"";display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--signal);margin-right:8px;vertical-align:middle; box-shadow:0 0 10px var(--signal)} [class*="persona-"] .article .acta{border-color:color-mix(in srgb,var(--signal) 35%,transparent)} /* 페르소나가 켜지면 콘텐츠 공간 상단에 작은 시그니처 라벨 */ [class*="persona-"] .subhero .eyebrow{position:relative} /* ───────────────────────────────────────────── 개발·인터랙션 담당 — 터미널 / 모노 / 라임 / 스캔라인 ───────────────────────────────────────────── */ .persona-dev .subhero,.persona-dev .article{--signal:#9ee84b;--signal-2:#c7f58a} .persona-dev .subhero::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:repeating-linear-gradient(0deg,rgba(158,232,75,.045) 0 1px,transparent 1px 4px)} .persona-dev .subhero .eyebrow, .persona-dev .prose h2{font-family:var(--mono,ui-monospace,Menlo,Consolas,monospace);letter-spacing:.01em} .persona-dev .prose h2::before{content:"// ";color:var(--signal);opacity:.75} .persona-dev .article .byline{font-family:var(--mono,monospace);font-size:.82rem} .persona-dev .prose code{background:rgba(158,232,75,.1);border:1px solid rgba(158,232,75,.25);border-radius:6px;padding:.1em .4em} .persona-dev .codebox{border-color:rgba(158,232,75,.3)} /* ───────────────────────────────────────────── 카피·콘텐츠 담당 — 에디토리얼 / 세리프 / 앰버 / 드롭캡 ───────────────────────────────────────────── */ .persona-copy .subhero,.persona-copy .article{--signal:#e8b04b;--signal-2:#f3cd86} .persona-copy .subhero h1, .persona-copy .article h1, .persona-copy .article h2{font-family:Georgia,"Times New Roman","Nanum Myeongjo",serif;letter-spacing:-.01em;font-weight:700} .persona-copy .article .prose{max-width:64ch} .persona-copy .article .prose>p{font-size:1.06rem;line-height:1.85} .persona-copy .article .prose>p:first-of-type::first-letter{ float:left;font-family:Georgia,serif;font-weight:700;font-size:3.6em;line-height:.78; padding:6px 12px 0 0;color:var(--signal)} .persona-copy .article .answer-box{border-left:3px solid var(--signal)} /* ───────────────────────────────────────────── 디자인(UI) 담당 — 디스플레이 타입 / 그리드 / 마젠타 ───────────────────────────────────────────── */ .persona-ui .subhero,.persona-ui .article{--signal:#ff5db1;--signal-2:#ff9ad0} .persona-ui .subhero::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(rgba(255,93,177,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(255,93,177,.06) 1px,transparent 1px); background-size:34px 34px;mask-image:linear-gradient(180deg,#000,transparent)} .persona-ui .subhero h1,.persona-ui .article h1{font-size:clamp(2rem,5.4vw,3.1rem);letter-spacing:-.035em;line-height:1.08} .persona-ui .article h2{letter-spacing:-.02em} .persona-ui .article .tldr{border-radius:18px} /* ───────────────────────────────────────────── 나머지 파트 — 액센트만 우선 정의(텍스처/타이포는 점진 확장) ───────────────────────────────────────────── */ .persona-geo .subhero,.persona-geo .article{--signal:#3fe6c0;--signal-2:#7af0d6} /* 간판: 브랜드 민트 유지 */ .persona-seo .subhero,.persona-seo .article{--signal:#4d8dff;--signal-2:#7db0ff} /* SEO: 블루 */ .persona-ux .subhero,.persona-ux .article{--signal:#34d3e6;--signal-2:#7fe6f0} /* UX: 시안 */ .persona-planning .subhero,.persona-planning .article{--signal:#8aa0c8;--signal-2:#b6c4e0} /* 기획: 스틸블루 */ .persona-ops .subhero,.persona-ops .article{--signal:#ff8a4c;--signal-2:#ffb487} /* 운영·QA: 오렌지 */ .persona-client .subhero,.persona-client .article{--signal:#2fbfa0;--signal-2:#6fd9c2} /* 고객·현장: 딥틸 */ .persona-combo .subhero,.persona-combo .article{--signal:#a78bfa;--signal-2:#c4b5fd} /* 조합 작품: 바이올렛 */ /* ============================================================ 파트별 심화 — 액센트를 넘어 레이아웃·시그니처 연출 (CSS만) ============================================================ */ /* GEO/AEO 간판 — answer-box를 'AI 인용 블록'으로 강조 + 메시 글로우 */ .persona-geo .subhero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(60% 80% at 82% -10%,rgba(63,230,192,.12),transparent 70%)} .persona-geo .article .answer-box{border:1px solid rgba(63,230,192,.35); box-shadow:0 0 0 1px rgba(63,230,192,.08),0 18px 50px -28px rgba(63,230,192,.55)} .persona-geo .article .answer-box .lab{color:var(--signal)} /* SEO — SERP 느낌: h2 하단 보더 링크 톤 + 인덱스 리듬 */ .persona-seo .prose h2{padding-bottom:6px;border-bottom:1px solid rgba(77,141,255,.28);color:#c2d8ff} .persona-seo .subhero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(90deg,rgba(77,141,255,.07),transparent 42%)} /* UX — 흐름선: h2 앞 연결 노드(동선) */ .persona-ux .prose h2{position:relative;padding-left:20px} .persona-ux .prose h2::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px; border-radius:50%;border:2px solid var(--signal);background:transparent} /* 기획·전략 — 아웃라인 문서: 섹션 자동 넘버 + 좌측 보더 */ .persona-planning .prose{counter-reset:psec} .persona-planning .prose h2{counter-increment:psec;padding-left:16px;border-left:3px solid rgba(138,160,200,.55)} .persona-planning .prose h2::before{content:counter(psec,decimal-leading-zero); font-family:var(--mono,monospace);color:var(--signal);font-size:.62em;margin-right:8px;vertical-align:2px} /* 운영·QA — 운영 체크 톤: h2 ▸ 마커 + 점선 요약 + 가로 스트라이프 */ .persona-ops .prose h2::before{content:"▸ ";color:var(--signal)} .persona-ops .article .tldr{border-style:dashed} .persona-ops .subhero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:repeating-linear-gradient(90deg,rgba(255,138,76,.06) 0 2px,transparent 2px 14px)} /* 고객·현장 — 현장의 목소리: answer-box 인용 스타일 + 따뜻한 글로우 */ .persona-client .article .answer-box{border-left:4px solid var(--signal); background:linear-gradient(90deg,rgba(47,191,160,.07),transparent 62%)} .persona-client .article .answer-box .lab::before{content:"\201C";margin-right:3px;color:var(--signal); font-size:1.4em;line-height:0;vertical-align:-.25em} .persona-client .subhero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(52% 72% at 12% -10%,rgba(47,191,160,.12),transparent 70%)} /* 조합 작품 — 합작/레이어: 그라데이션 헤드라인 + 레이어 바 */ .persona-combo .subhero h1,.persona-combo .article h1{ background:linear-gradient(100deg,var(--signal),var(--signal-2)); -webkit-background-clip:text;background-clip:text;color:transparent} .persona-combo .prose h2{position:relative;padding-left:16px} .persona-combo .prose h2::before{content:"";position:absolute;left:0;top:.22em;bottom:.22em;width:4px; border-radius:2px;background:linear-gradient(var(--signal),var(--signal-2))} .persona-combo .subhero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(50% 80% at 90% 8%,rgba(167,139,250,.13),transparent 70%)} /* ============================================================ 레이아웃 심화 — 담당마다 '글의 구조' 자체가 다르게 (CSS만) ============================================================ */ /* 링크 밑줄을 페르소나 색으로(기본은 민트 하드코딩) */ [class*="persona-"] .prose a{border-bottom-color:color-mix(in srgb,var(--signal) 45%,transparent)} /* 개발 — IDE/터미널 윈도우: 본문 전체가 코드 에디터 창 */ .persona-dev .article{position:relative;margin-top:22px;border:1px solid rgba(158,232,75,.22); border-radius:14px;background:linear-gradient(180deg,rgba(158,232,75,.035),transparent 260px); padding:52px clamp(16px,3vw,32px) clamp(50px,8vw,90px)} .persona-dev .article::before{content:"● ● ● ~/findable/insights — zsh"; position:absolute;top:0;left:0;right:0;height:36px;display:flex;align-items:center;padding:0 16px; font-family:var(--mono,monospace);font-size:.72rem;letter-spacing:.04em;color:rgba(158,232,75,.62); background:rgba(158,232,75,.07);border-bottom:1px solid rgba(158,232,75,.18);border-radius:14px 14px 0 0} /* 카피 — 매거진 1단: 좁은 중앙 단 + 가운데 정렬 소제목 + 짧은 룰 */ .persona-copy .article{max-width:680px} .persona-copy .prose h2{text-align:center;margin-top:54px} .persona-copy .prose h2::after{content:"";display:block;width:42px;height:2px;background:var(--signal); margin:14px auto 0;border-radius:2px} /* 디자인(UI) — 쇼케이스: 넓은 폭 + 큰 디스플레이 헤딩 + 섹션 상단 룰 */ .persona-ui .article{max-width:900px} .persona-ui .prose h2{font-size:clamp(1.7rem,3.8vw,2.5rem);margin-top:52px;padding-top:20px; border-top:2px solid rgba(255,93,177,.28)} /* UX — 플로우 레일: 본문 왼쪽에 동선 라인, 소제목은 라인 위 노드 */ .persona-ux .prose{position:relative;margin-left:8px;padding-left:30px; border-left:2px solid rgba(52,211,230,.32)} .persona-ux .prose h2{padding-left:0} .persona-ux .prose h2::before{left:-39px;background:var(--ink,#0b0f14)} /* 기획 — 문서/아웃라인: 좌측 들여쓰기로 개요 느낌 강화(넘버는 위에서) */ .persona-planning .prose{margin-left:6px;padding-left:6px} /* SEO — featured snippet 카드 + 결과형 섹션(밑줄은 위에서) */ .persona-seo .article .answer-box{border:1px solid rgba(77,141,255,.32); box-shadow:0 10px 36px -20px rgba(77,141,255,.55)} .persona-seo .article .answer-box .lab::after{content:" · 발췌 답변";opacity:.55;font-weight:400} /* 운영·QA — 요약을 체크리스트로 */ .persona-ops .tldr ul{padding-left:0} .persona-ops .tldr li{list-style:none;position:relative;padding-left:26px} .persona-ops .tldr li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--signal);font-weight:800} /* 고객·현장 — 인터뷰: 질문형 소제목 앞에 'Q.' (본문이 곧 답) */ .persona-client .prose h2{padding-left:0} .persona-client .prose h2::before{content:"Q. ";color:var(--signal);font-weight:800;margin-right:2px} /* 조합 — 레이어: 소제목 위 여백으로 모듈 구획감(그라데이션은 위에서) */ .persona-combo .prose h2{margin-top:48px} /* ============================================================ 페르소나 콘텐츠 블록 — 글 본문에 담당의 craft를 '실물'로 삽입 (--signal 상속으로 페르소나 색을 자동으로 입는다) ============================================================ */ .pblock{margin:26px 0;padding:18px 20px;border:1px solid var(--line,#23303a);border-radius:14px;background:var(--ink-2,#10151c)} .pblock .pl{font-family:var(--mono,monospace);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--signal);margin-bottom:12px;display:block} /* 디자인 — 컬러 스와치 */ .swatches{display:flex;flex-wrap:wrap;gap:10px} .swatches .sw{flex:1 1 86px;min-width:86px;border-radius:12px;overflow:hidden;border:1px solid var(--line,#23303a)} .swatches .sw i{display:block;height:52px} .swatches .sw span{display:block;font-family:var(--mono,monospace);font-size:.7rem;padding:6px 8px;color:var(--paper-2,#c7d0d9)} /* 디자인 — 타입 스펙시멘 */ .specimen{display:grid;gap:2px} .specimen .sp{display:flex;align-items:baseline;gap:14px;border-bottom:1px dashed var(--line,#23303a);padding:10px 0} .specimen .sp small{font-family:var(--mono,monospace);color:var(--mut,#8a97a3);font-size:.68rem;min-width:72px;flex:none} .specimen .sp b{color:var(--paper,#eef2f5)} /* 디자인·기획 — 스펙 칩 콜아웃 */ .spec-callout{display:flex;flex-wrap:wrap;gap:8px} .spec-callout b{font-family:var(--mono,monospace);font-size:.76rem;padding:6px 11px;border:1px solid color-mix(in srgb,var(--signal) 40%,var(--line,#23303a));border-radius:999px;color:var(--paper,#eef2f5);font-weight:600} /* 디자인 — 그리드 비주얼 */ .gridviz{height:110px;border-radius:12px;border:1px solid var(--line,#23303a); background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--signal) 26%,transparent) 0 1px,transparent 1px 8.33%), repeating-linear-gradient(0deg,color-mix(in srgb,var(--signal) 14%,transparent) 0 1px,transparent 1px 27px)} /* 개발 — 터미널 출력 */ .terminal{font-family:var(--mono,monospace);font-size:.83rem;background:#080b0f;border:1px solid var(--line,#23303a);border-radius:12px;overflow:hidden;margin:26px 0} .terminal .tbar{height:30px;display:flex;align-items:center;gap:8px;padding:0 12px;background:rgba(255,255,255,.04);color:var(--mut,#8a97a3);font-size:.68rem} .terminal .tbar::before{content:"● ● ●";color:color-mix(in srgb,var(--signal) 70%,#888);letter-spacing:-1px} .terminal pre{margin:0;padding:14px 16px;color:#d7e7df;white-space:pre-wrap;line-height:1.65} .terminal .pr{color:var(--signal)} /* 카피 — 풀쿼트 */ .pullquote{margin:32px 0;font-family:Georgia,"Nanum Myeongjo",serif;font-size:clamp(1.3rem,3vw,1.7rem); line-height:1.42;color:var(--paper,#eef2f5);text-align:center;padding:8px 4%} .pullquote::before{content:"\201C";color:var(--signal);font-size:1.5em;line-height:0;vertical-align:-.32em;margin-right:4px} /* 카피 — before/after 카피 비교 */ .copy-ab{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0} .copy-ab .ca{border:1px solid var(--line,#23303a);border-radius:12px;padding:14px 16px;background:var(--ink-2,#10151c)} .copy-ab .ca .t{font-family:var(--mono,monospace);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px} .copy-ab .ca.bad{opacity:.72} .copy-ab .ca.bad .t{color:#e89090} .copy-ab .ca.good .t{color:var(--signal)} @media(max-width:560px){.copy-ab{grid-template-columns:1fr}} /* UX — 플로우 스텝 / 운영·기획 — 표 */ .flowsteps{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:24px 0} .flowsteps .fs{border:1px solid color-mix(in srgb,var(--signal) 42%,var(--line,#23303a));border-radius:10px;padding:8px 12px;font-size:.88rem;color:var(--paper,#eef2f5)} .flowsteps .ar{color:var(--signal);font-weight:800} .ptable{width:100%;border-collapse:collapse;font-size:.92rem;margin:24px 0} .ptable th,.ptable td{text-align:left;padding:9px 11px;border-bottom:1px solid var(--line,#23303a)} .ptable th{font-family:var(--mono,monospace);font-size:.7rem;color:var(--mut,#8a97a3);text-transform:uppercase}