/* 크루웨이브 — 모바일 우선 스타일 */
:root{
--bg:#f2f5f3; --card:#fff; --ink:#101b17; --mute:#6d7d76; --line:#e1e8e4;
/* 시그니처 = 딥그린. 진단서의 짙은 녹색을 사이트 전체 기준색으로 올렸다 */
--accent:#0b6b54; --accent-d:#084d3d; --accent-soft:#e4f0eb;
--brand-1:#0f7f64; --brand-2:#0a3b31;
--urgent:#ff3b4e; --urgent-soft:#ffecee;
/* 「선정확률 높음」은 브랜드 초록과 안 겹치게 파랑으로 옮겼다 */
--easy:#2b5ce6; --easy-soft:#eaf0ff;
--ok:#0b6b54; --warn:#b7791f;
--nav:#101b17; --r:14px; --sh:0 1px 2px rgba(20,26,51,.06),0 4px 16px rgba(20,26,51,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Malgun Gothic",system-ui,sans-serif;
font-size:15.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
/* ★ 한글은 기본값(word-break:normal)이면 단어 한가운데서 잘린다.
「로그인 정보 / 나 비공개…」처럼 어절이 쪼개져 읽기 나쁘다.
keep-all 을 주면 영어처럼 띄어쓰기에서만 줄이 바뀐다. 전 페이지 공통. */
word-break:keep-all;
overflow-wrap:break-word;
}
/* 주소·아이디처럼 띄어쓰기가 없는 긴 문자열은 잘려야 넘치지 않는다 */
code, .urlbox code, .cert-id, .app-blog, .dcode, .idxq-q b, a[href^="http"] {
word-break:break-word;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 16px}
/* 헤더 — 밝은 배경. 블로거가 카톡에서 들어오는 소비자 화면이라 가볍게 간다 */
.hd{background:#fff;color:var(--ink);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;justify-content:space-between;height:56px;gap:12px}
/* ── 로고 ──────────────────────────────────────────────────
라운드 사각형 안의 흰 물결(~) + 소문자 워드마크.
마크는 SVG 라서 어떤 크기에서도 또렷하고, 색은 currentColor 로 따라온다. */
.logo{display:flex;align-items:center;gap:9px;color:var(--accent)}
.logo-mk{flex:0 0 auto;width:30px;height:30px;line-height:0;color:var(--accent);
filter:drop-shadow(0 2px 6px rgba(10,59,49,.28))}
.logo-mk svg{display:block;border-radius:9.5px}
.logo-word{font-family:'Quicksand','Apple SD Gothic Neo',system-ui,sans-serif;
font-size:24px;font-weight:700;letter-spacing:-.005em;color:var(--accent);
line-height:1;white-space:nowrap}
@media(max-width:520px){
.logo-mk{width:27px;height:27px}
.logo-mk svg{width:27px;height:27px}
.logo-word{font-size:21px}
}
.hd-nav{display:flex;align-items:center;gap:15px;font-size:14px}
.hd-nav a{color:var(--mute);font-weight:500}
.hd-nav a:hover{color:var(--ink)}
.hd-nav .btn-sm{background:var(--accent-soft);color:var(--accent-d);padding:7px 13px;border-radius:99px;font-weight:700}
.hd-nav .btn-sm:hover{background:var(--accent);color:#fff}
/* 공통 */
main.wrap{padding-top:18px;padding-bottom:40px;min-height:60vh}
h1{font-size:23px;font-weight:800;letter-spacing:-.025em;margin:0 0 5px;text-wrap:balance}
h2{font-size:17.5px;font-weight:800;letter-spacing:-.02em;margin:28px 0 11px;text-wrap:balance}
.sub{color:var(--mute);font-size:14.5px;line-height:1.65;margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.pad{padding:16px}
.muted{color:var(--mute)}
.small{font-size:13.5px}
.center{text-align:center}
.mt{margin-top:16px}
.flash{margin-top:12px;padding:11px 14px;border-radius:10px;font-size:14px;font-weight:600}
.flash.ok{background:#e4f0eb;color:#0a5a45;border:1px solid #b9e3cd}
.flash.err{background:#fdeaee;color:#9b1c33;border:1px solid #f6c6d0}
/* 히어로 */
.hero{background:linear-gradient(135deg,#062b23,#0b6b54);color:#fff;border-radius:var(--r);padding:20px;margin-bottom:18px}
.hero h1{color:#fff;font-size:20px}
.hero p{margin:6px 0 0;color:#a9d5c6;font-size:13.5px}
.hero .stats{display:flex;gap:18px;margin-top:14px;font-size:13px;color:#bfe3d5}
.hero .stats b{display:block;font-size:19px;color:#fff;font-weight:800}
/* 필터 */
.filters{display:flex;gap:7px;overflow-x:auto;padding:2px 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:7px 13px;border-radius:99px;background:#fff;border:1px solid var(--line);
font-size:13.5px;font-weight:600;color:var(--mute);white-space:nowrap}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* 공고 카드 */
.list{display:flex;flex-direction:column;gap:10px}
.item{display:flex;gap:12px;padding:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.item.dim{opacity:.55}
.item:active{transform:scale(.995)}
.thumb{flex:0 0 76px;width:76px;height:76px;border-radius:10px;object-fit:cover;background:#eef0f7}
.thumb.ph{display:grid;place-items:center;color:#b6bccf;font-size:22px}
.item-b{min-width:0;flex:1}
.item-top{display:flex;align-items:center;gap:6px;margin-bottom:3px;flex-wrap:wrap}
.item h3{margin:0 0 4px;font-size:15.5px;font-weight:700;letter-spacing:-.02em;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .meta{font-size:12.5px;color:var(--mute);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.item .meta .dot{color:#ccd0dd}
.reward{font-size:13px;color:#2b3050;font-weight:600;margin:2px 0 4px;
display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.badge{font-size:11.5px;font-weight:800;padding:3px 8px;border-radius:6px;letter-spacing:-.01em;white-space:nowrap}
.badge.open{background:var(--easy-soft);color:#1c46c4}
.badge.urgent{background:#fdeaee;color:var(--urgent)}
.badge.done{background:#f0f1f5;color:#8d93a6}
.badge.type{background:#f2effd;color:#5b3fc4}
.badge.hidden{background:#fff4e0;color:var(--warn)}
.badge.pend{background:#fff4e0;color:var(--warn)}
.badge.block{background:#fdeaee;color:var(--urgent)}
.badge.live{background:#e4f0eb;color:var(--ok)}
/* 상세 */
.detail-img{width:100%;border-radius:var(--r);margin-bottom:14px;border:1px solid var(--line)}
.dt-title{font-size:21px;font-weight:800;letter-spacing:-.025em;line-height:1.35;margin:8px 0 10px}
.kv{display:grid;grid-template-columns:88px 1fr;gap:9px 12px;font-size:14px;padding:14px 0;border-top:1px solid var(--line)}
.kv dt{color:var(--mute);font-size:13.5px}
.kv dd{margin:0;font-weight:600}
.body-text{white-space:pre-wrap;word-break:break-word;font-size:14.5px;line-height:1.75;padding:14px 0;border-top:1px solid var(--line)}
.agency-box{border-top:1px solid var(--line);padding:14px 0;font-size:14px}
.agency-box .nm{font-weight:800;font-size:16px}
.notice{background:#fffaf0;border:1px solid #f4e2bd;color:#7a5a18;border-radius:10px;padding:14px 16px;font-size:13.5px;line-height:1.75;margin-top:14px}
/* 하단 고정 지원 바 */
.applybar{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(245,246,250,0),var(--bg) 32%);
padding:14px 0 max(14px,env(safe-area-inset-bottom));margin-top:8px;z-index:20}
/* 버튼 */
.btn{display:block;width:100%;text-align:center;padding:14px 18px;border-radius:12px;background:var(--accent);
color:#fff;font-weight:800;font-size:15.5px;border:0;cursor:pointer;box-shadow:0 4px 14px rgba(11,107,84,.26);
font-family:inherit;letter-spacing:-.01em}
.btn:hover{background:var(--accent-d)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.dark{background:var(--ink);box-shadow:none}
.btn.danger{background:var(--urgent);box-shadow:none}
.btn.off{background:#c9cdda;box-shadow:none;pointer-events:none}
.btn.inline{display:inline-block;width:auto;padding:9px 16px;font-size:14px;border-radius:9px}
.btnrow{display:flex;gap:8px}
.btnrow>*{flex:1}
/* 폼 */
.form{display:flex;flex-direction:column;gap:15px}
.f label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.f .hint{font-size:12.5px;color:var(--mute);font-weight:400;margin-top:5px}
.f input[type=text],.f input[type=password],.f input[type=url],.f input[type=date],
.f input[type=number],.f input[type=email],.f select,.f textarea{
width:100%;padding:12px 13px;border:1px solid #d8dbe6;border-radius:10px;font-size:15px;
font-family:inherit;background:#fff;color:var(--ink);-webkit-appearance:none;appearance:none}
.f select{background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.f textarea{min-height:130px;resize:vertical;line-height:1.65}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f2>*{min-width:0}
.req{color:var(--urgent);font-weight:700}
/* 테이블(관리자) */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th,.tbl td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tbl th{font-size:12.5px;color:var(--mute);font-weight:700;background:#fafbfe}
.tbl td.r,.tbl th.r{text-align:right}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 오늘 요약 */
.copybox{width:100%;min-height:190px;padding:14px;border:1px solid var(--line);border-radius:12px;
background:#fff;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.75;
white-space:pre;overflow:auto;color:var(--ink);resize:vertical}
/* 빈 화면 — 예전에는 이모지를 38px 로 크게 띄웠는데,
무슨 그림인지 알아볼 수 없는 덩어리로 보였다. 글과 다음 행동만 남긴다. */
.empty{text-align:center;padding:40px 22px;color:var(--mute);
background:var(--card);border:1px dashed var(--line);border-radius:var(--r)}
.empty p{margin:0;font-size:14.5px;line-height:1.75}
.empty b{color:var(--ink);font-size:16px;font-weight:800;letter-spacing:-.02em}
/* 푸터 */
.ft{border-top:1px solid var(--line);background:#fff;padding:22px 0 34px;margin-top:20px}
.ft-notice{font-size:12.5px;color:var(--mute);line-height:1.7;margin:0 0 12px}
.ft-notice b{color:#4a5068}
.ft-sub{font-size:12.5px;color:var(--mute);display:flex;gap:14px;flex-wrap:wrap;margin:0;align-items:center}
.ft-sub a:hover{color:var(--accent)}
.ft-sub .ver{margin-left:auto;color:#b6bccf}
/* 동의 체크박스 */
.consent{display:flex;gap:10px;align-items:flex-start;background:#fafbfe;border:1px solid var(--line);
border-radius:10px;padding:14px;font-size:12.5px;line-height:1.7;color:var(--mute)}
.consent input{width:18px;height:18px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--accent)}
.consent b{color:var(--ink)}
.consent a{color:var(--accent);font-weight:600;text-decoration:underline}
/* 지원 완료 - 점수 카드 */
.scorehead{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.scorenum{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--accent)}
.scorenum small{font-size:15px;font-weight:600;color:var(--mute);letter-spacing:0}
/* 지원자 카드 */
.app-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.scorechip{flex:0 0 52px;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
line-height:1.1;text-align:center}
.scorechip b{display:block;font-size:19px;font-weight:800;letter-spacing:-.03em}
.scorechip span{display:block;font-size:10.5px;font-weight:700;opacity:.75}
.scorechip.live{background:#e4f0eb;color:#0a5a45}
.scorechip.open{background:var(--easy-soft);color:#1c46c4}
.scorechip.pend{background:#fff4e0;color:var(--warn)}
.scorechip.block{background:#fdeaee;color:var(--urgent)}
.app-id{min-width:0;flex:1}
.app-nm{font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.app-blog{display:inline-block;font-size:12.5px;color:var(--accent);margin-top:2px;word-break:break-all}
.app-when{flex:0 0 auto;align-self:flex-start}
.app-kv{grid-template-columns:82px 1fr;font-size:13.5px;padding:12px 0 10px}
.app-kv dd{font-weight:500}
.app-memo{margin:0;padding:11px 13px;background:#fafbfe;border-radius:9px;font-size:13.5px;
color:#42485f;white-space:pre-wrap;word-break:break-word}
.app-flags{margin-top:10px;font-size:12.5px;color:var(--urgent);line-height:1.7}
/* 대시보드 지원 요약 박스 */
.applybox{display:flex;align-items:center;gap:16px;padding:11px 14px;border:1px solid var(--line);
border-radius:11px;background:#fafbfe;font-size:12.5px;color:var(--mute)}
.applybox b{display:block;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.applybox.short{background:#fffaf0;border-color:#f4e2bd}
.applybox .go{margin-left:auto;font-weight:700;color:var(--accent);white-space:nowrap}
.note-inline{background:#eaf0ff;border:1px solid #cfdcff;color:#25356d;border-radius:10px;
padding:13px 15px;font-size:13px;line-height:1.7}
.note-inline b{color:#1c46c4}
@media (min-width:600px){
body{font-size:15.5px}
main.wrap{padding-top:24px}
h1{font-size:24px}
.thumb{flex-basis:96px;width:96px;height:96px}
.hero{padding:26px}
}
/* ── 블로거 풀 · 내 페이지 · 소개 (v1.2) ─────────────────── */
.btn-sm{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:8px;border:1px solid var(--line);
background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.btn-sm:hover{background:#f6f7fb}
.btn-sm.on{background:var(--nav);border-color:var(--nav);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:6px 0 2px}
.chip-sel{display:inline-flex;align-items:center;cursor:pointer}
.chip-sel input{position:absolute;opacity:0;width:0;height:0}
.chip-sel span{display:inline-block;padding:6px 12px;border-radius:99px;background:#fff;border:1px solid var(--line);
font-size:13px;font-weight:600;color:var(--muted)}
.chip-sel input:checked+span{background:var(--nav);border-color:var(--nav);color:#fff}
.urlbox{display:flex;align-items:center;gap:8px;background:#f6f7fb;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.urlbox code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.stat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.stat span{font-size:12px;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:7px}
.bar{display:grid;grid-template-columns:74px 1fr 44px;gap:9px;align-items:center;font-size:13px}
.bar i{display:block;height:8px;border-radius:99px;background:var(--nav);min-width:3px}
.bar em{font-style:normal;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.steps-n{counter-reset:s;display:flex;flex-direction:column;gap:12px}
.steps-n li{counter-increment:s;list-style:none;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start}
.steps-n li::before{content:counter(s);width:26px;height:26px;border-radius:50%;background:var(--nav);color:#fff;
display:grid;place-items:center;font-size:13px;font-weight:700}
.steps-n b{display:block;margin-bottom:2px}
@media(max-width:640px){.bar{grid-template-columns:64px 1fr 40px}}
/* ============================================================
v1.3 — 체험단 사이트형 UI (카드 그리드 · 경쟁률 · 일정 타임라인)
============================================================ */
.wrap.wide{max-width:1040px}
/* 카테고리 아이콘 바 */
.catbar{display:flex;gap:6px;overflow-x:auto;padding:2px 0 14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.catbar::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;width:62px;text-align:center;font-size:11.5px;color:var(--mute);font-weight:600;line-height:1.3}
.cat i{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:#fff;
border:1px solid var(--line);font-size:22px;font-style:normal;margin:0 auto 6px;transition:.12s}
.cat.on{color:var(--accent-d)}
.cat.on i{background:var(--accent-soft);border-color:#a8cabd}
.cat:hover i{border-color:#a8cabd}
/* 섹션 머리 */
.sech{display:flex;align-items:baseline;gap:9px;margin:28px 0 12px}
.sech:first-child{margin-top:6px}
.sech h2{margin:0;font-size:17.5px;font-weight:800;letter-spacing:-.03em}
.sech .cnt{font-size:13px;color:var(--mute);font-weight:600}
.sech .hint{font-size:12.5px;color:var(--mute);margin-left:auto;font-weight:500}
/* 공고 카드 그리드 */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:860px){.grid{grid-template-columns:repeat(4,1fr)}}
.gcard{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;
display:flex;flex-direction:column;box-shadow:var(--sh);transition:.14s}
.gcard:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(20,26,51,.07),0 12px 28px rgba(20,26,51,.09)}
.gcard.dim{opacity:.5}
.gthumb{position:relative;aspect-ratio:1/1;background:#eceff6;overflow:hidden}
.gthumb img{width:100%;height:100%;object-fit:cover}
.gthumb .ph{width:100%;height:100%;display:grid;place-items:center;font-size:30px;color:#b8bfd2}
.gdday{position:absolute;left:7px;top:7px;font-size:11px;font-weight:800;padding:4px 8px;border-radius:6px;
background:rgba(20,24,36,.72);color:#fff;letter-spacing:-.02em;backdrop-filter:blur(4px)}
.gdday.urgent{background:var(--urgent)}
.gdday.easy{background:var(--easy)}
.gdday.done{background:rgba(20,24,36,.5)}
.gtype{position:absolute;right:7px;top:7px;font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:5px;
background:rgba(255,255,255,.92);color:#4a5268}
.gbody{padding:11px 11px 12px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.greward{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gtitle{font-size:12px;color:var(--mute);line-height:1.45;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gtags{display:flex;gap:4px;flex-wrap:wrap;margin-top:1px}
.gtag{font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:4px;background:#f1f3f9;color:#5b6478}
.gtag.pay{background:#fff4e0;color:#8a5a12}
.gfoot{margin-top:auto;padding-top:9px}
.prog{height:4px;background:#e9ecf4;border-radius:99px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--accent);border-radius:99px;min-width:2px}
.prog.hot i{background:var(--urgent)}
.prog.easy i{background:var(--easy)}
.gnum{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-top:6px;
font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.gnum b{color:var(--ink);font-weight:800;font-size:12.5px}
.gnum .rate{font-weight:700}
.gnum .rate.hot{color:var(--urgent)}
.gnum .rate.easy{color:var(--easy)}
/* 상세 — 신청 현황 */
.progbig{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 14px}
.progbig .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.progbig .n{font-size:19px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.progbig .n small{font-size:13px;font-weight:600;color:var(--mute)}
.progbig .tag{font-size:12px;font-weight:700}
.progbig .tag.hot{color:var(--urgent)}
.progbig .tag.easy{color:var(--easy)}
.progbig .prog{height:7px}
/* 상세 — 캠페인 일정 */
.tline{border-top:1px solid var(--line);padding:6px 0 4px}
.tline h4{font-size:13px;font-weight:700;color:var(--mute);margin:14px 0 6px}
.tstep{display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:center;padding:8px 0;position:relative}
.tstep::before{content:"";position:absolute;left:8px;top:-8px;width:2px;height:16px;background:var(--line)}
.tstep:first-of-type::before{display:none}
.tstep .dot{width:9px;height:9px;border-radius:50%;background:#d5dae7;margin-left:4px;position:relative;z-index:1}
.tstep.on .dot{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.tstep.past .dot{background:#aab2c6}
.tstep .lb{font-size:13.5px;color:var(--mute);font-weight:600}
.tstep.on .lb{color:var(--ink);font-weight:700}
.tstep .dt{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.tstep.todo .dt{color:var(--mute);font-weight:600}
/* 상세 — 제공 내역 강조 박스 */
.rewardbox{background:linear-gradient(135deg,#f3faf7,#e4f0eb);border:1px solid #c2ddd0;border-radius:12px;
padding:15px 17px;margin:0 0 14px}
.rewardbox .lb{font-size:11.5px;font-weight:800;color:var(--accent-d);letter-spacing:.04em;margin-bottom:4px}
.rewardbox .val{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.4}
.rewardbox .pay{font-size:13px;color:#8a5a12;font-weight:700;margin-top:5px}
/* 조건 태그 */
.cond{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0}
.cond span{font-size:12px;font-weight:600;color:#4a5268;background:#f1f3f9;border-radius:6px;padding:5px 10px}
/* 랭킹 순위 번호 */
.rankno{flex:0 0 26px;width:26px;text-align:center;font-size:15px;font-weight:800;
color:var(--mute);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
details>summary::-webkit-details-marker{display:none}
/* ============================================================
v1.5 — 랜딩 · 가입 갈림길 · 탭 (리뷰노트/슈퍼멤버스/레뷰 참고)
============================================================ */
/* 랜딩 히어로 */
.lp-hero{text-align:center;padding:30px 4px 26px}
.lp-hero .eyebrow{font-size:12.5px;font-weight:700;color:var(--accent);letter-spacing:.04em;margin:0 0 12px}
.lp-hero h1{font-size:clamp(29px,7.5vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1.18;margin:0 0 16px}
.lp-hero .lead{font-size:15.5px;line-height:1.7;color:#4e5668;margin:0 0 22px}
.lp-hero .lead b{color:var(--ink)}
.lp-cta{display:flex;flex-direction:column;gap:9px}
.lp-sub{font-size:12.5px;color:var(--mute);margin:12px 0 0}
@media(min-width:600px){.lp-cta{flex-direction:row}.lp-cta>*{flex:1}}
/* 랜딩 숫자 */
.lp-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:8px 0 6px}
@media(min-width:600px){.lp-stats{grid-template-columns:repeat(4,1fr)}}
.lp-stats>div{background:#fff;padding:18px 12px;text-align:center}
.lp-stats b{display:block;font-size:25px;font-weight:800;letter-spacing:-.04em;color:var(--accent);
font-variant-numeric:tabular-nums;line-height:1.15}
.lp-stats span{display:block;font-size:12px;color:var(--mute);margin-top:4px}
.lp-h{font-size:20px;font-weight:800;letter-spacing:-.035em;margin:38px 0 14px;text-align:center}
/* 문제 제기 3칸 */
.lp-pain{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:640px){.lp-pain{grid-template-columns:repeat(3,1fr)}}
.lp-pain>div{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px}
.lp-pain span{font-size:26px;display:block;margin-bottom:8px}
.lp-pain b{display:block;font-size:15.5px;letter-spacing:-.02em;margin-bottom:5px}
.lp-pain p{margin:0;font-size:13.5px;line-height:1.65;color:var(--mute)}
/* 기능 2×2 */
.lp-feat{display:grid;grid-template-columns:1fr;gap:11px}
@media(min-width:640px){.lp-feat{grid-template-columns:1fr 1fr}}
.feat-h{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.lp-feat .ico{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:#e3f1ea;display:grid;place-items:center;font-size:17px;margin:0;line-height:1}
.feat-h b{font-size:16px;letter-spacing:-.025em}
.lp-owner{background:#f6faf8;border:1px solid var(--line);border-radius:14px;padding:22px 18px;text-align:center;margin:26px 0}
.lp-owner>b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;color:var(--ink)}
.lp-owner>p{margin:0 0 15px;font-size:13.5px;line-height:1.7;color:var(--mute);word-break:keep-all}
.lp-feat p{margin:0;font-size:13.5px;line-height:1.7;color:#5a6274}
.lp-feat p b{display:inline;font-size:inherit;color:var(--ink)}
/* 점수 구성 막대 */
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:78px 1fr 26px;align-items:center;gap:10px;font-size:13px}
.bar span{color:var(--mute)}
.bar i{display:block;height:9px;border-radius:99px;background:linear-gradient(90deg,var(--brand-1),var(--brand-2))}
.bar em{font-style:normal;font-weight:700;font-size:12.5px;color:var(--accent-d);text-align:right;
font-variant-numeric:tabular-nums}
/* 가격 3칸 */
.lp-price{display:grid;grid-template-columns:1fr;gap:11px}
@media(min-width:640px){.lp-price{grid-template-columns:repeat(3,1fr)}}
.lp-price .on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft),var(--sh)}
.lp-price .pl{font-size:13px;font-weight:700;color:var(--mute);display:flex;align-items:center;gap:6px}
.lp-price .pv{font-size:27px;font-weight:800;letter-spacing:-.045em;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.lp-price .pv small{font-size:14px;font-weight:600;color:var(--mute);letter-spacing:0}
.lp-price .pd{font-size:13px;color:var(--accent-d);font-weight:700;margin-bottom:12px}
.lp-price ul{margin:0;padding-left:17px;font-size:13px;color:#5a6274;line-height:1.85}
/* CTA 띠 */
.ctaband{display:flex;flex-direction:column;gap:12px;background:linear-gradient(135deg,#062b23,#0b6b54);
color:#fff;border-radius:14px;padding:20px;margin-top:28px}
.ctaband b{font-size:16px;letter-spacing:-.025em;display:block}
.ctaband p{margin:5px 0 0;font-size:13.5px;color:#bfe6d8;line-height:1.6}
.ctaband .btn{background:#fff;color:var(--accent-d);box-shadow:none}
.ctaband .btn:hover{background:#e9f3ef}
.ctaband.big{padding:26px 22px}
@media(min-width:640px){
.ctaband{flex-direction:row;align-items:center;justify-content:space-between;gap:20px}
.ctaband .btn{flex:0 0 auto;white-space:nowrap}
}
/* 가입 갈림길 */
.pick-head{text-align:center;padding:16px 0 6px}
.pick-head h1{font-size:26px;letter-spacing:-.035em}
.pick-head .sub{margin-bottom:8px}
.picks{display:grid;grid-template-columns:1fr;gap:16px;max-width:860px;margin:0 auto}
@media(min-width:760px){ .picks{grid-template-columns:repeat(2,1fr)} }
@media(min-width:640px){.picks{grid-template-columns:1fr 1fr}}
.pick{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 28px;
box-shadow:var(--sh);transition:.14s}
.pick:hover{border-color:var(--accent);transform:translateY(-2px);
box-shadow:0 4px 10px rgba(20,26,51,.07),0 14px 30px rgba(11,107,84,.12)}
.pick-ico{font-size:42px;margin-bottom:14px;line-height:1}
.pick b{display:block;font-size:23px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px}
.pick>p{margin:0 0 18px;font-size:15px;color:var(--mute);line-height:1.7}
.pick ul{margin:0 0 20px;padding-left:19px;font-size:14.5px;color:#5a6274;line-height:2}
.pick ul b{display:inline;font-size:inherit;color:var(--ink)}
.pick-go{font-size:14.5px;font-weight:800;color:var(--accent)}
/* 탭 (로그인 구분) */
.tabs{display:flex;gap:6px;background:#e9ecf4;padding:4px;border-radius:12px;margin-bottom:16px}
.tab{flex:1;text-align:center;padding:10px 8px;border-radius:9px;font-size:14px;font-weight:700;color:var(--mute)}
.tab.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,26,51,.10)}
/* 푸터 컬럼 */
.ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px}
.ft-cols>div{display:flex;flex-direction:column;gap:7px}
.ft-h{font-size:12.5px;font-weight:800;color:var(--ink);margin-bottom:2px}
.ft-cols a{font-size:12.5px;color:var(--mute)}
.ft-cols a:hover{color:var(--accent)}
.ft-sub{display:flex;justify-content:space-between;align-items:center}
/* 헤더가 모바일에서 줄바꿈되지 않게 */
.logo span{white-space:nowrap}
.hd-nav a.pc{display:none}
@media(min-width:700px){ .hd-nav a.pc{display:inline} }
/* 모바일 하단 탭바 (리뷰노트·레뷰 방식) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;
grid-template-columns:repeat(4,1fr);background:#fff;border-top:1px solid var(--line);
padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 12px rgba(20,26,51,.06)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
padding:9px 2px 8px;font-size:10.5px;font-weight:600;color:var(--mute);line-height:1.2;text-align:center}
.tabbar a i{font-size:19px;font-style:normal;line-height:1;filter:grayscale(1);opacity:.6}
.tabbar a.on{color:var(--accent)}
.tabbar a.on i{filter:none;opacity:1}
body{padding-bottom:62px}
@media(min-width:700px){ .tabbar{display:none} body{padding-bottom:0} }
/* 하단 고정 지원바가 탭바에 가리지 않게 */
@media(max-width:699px){ .applybar{bottom:62px} }
/* ============================================================
v1.5.1 — .f 없이 .form 만 쓴 폼도 제대로 보이게
(bloggers.php · me.php 는 중첩 패턴이라
.f 전용 규칙이 안 먹어서 브라우저 기본 입력칸이 그대로 나왔다)
============================================================ */
.form input[type=text],.form input[type=password],.form input[type=url],.form input[type=date],
.form input[type=number],.form input[type=email],.form input[type=tel],.form select,.form textarea{
width:100%;padding:12px 13px;border:1px solid #d8dbe6;border-radius:10px;font-size:15px;
font-family:inherit;font-weight:400;letter-spacing:normal;background:#fff;color:var(--ink);
-webkit-appearance:none;appearance:none}
.form select{background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.form textarea{min-height:110px;resize:vertical;line-height:1.65}
.form input:focus,.form select:focus,.form textarea:focus{
outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.form input::placeholder,.form textarea::placeholder{color:#a8afc2}
/* 라벨 글자는 위, 입력칸은 아래 한 줄 전체 */
.form label:not(.consent):not(.chip-sel){display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.form label>input:not([type=checkbox]):not([type=radio]),
.form label>select,.form label>textarea{margin-top:6px}
.form .req{margin-left:2px}
/* 명부 검색 줄 — 칩과 같은 결로 */
.filters input[type=text],.filters select{
flex:0 0 auto;padding:8px 13px;border:1px solid var(--line);border-radius:99px;background:#fff;
font-size:13.5px;font-family:inherit;color:var(--ink);-webkit-appearance:none;appearance:none}
.filters input[type=text]{min-width:190px}
.filters input[type=text]::placeholder{color:#a8afc2}
.filters select{padding-right:32px;font-weight:600;color:var(--mute);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center}
.filters input:focus,.filters select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
/* 헤더 밖에서 쓰는 .btn-sm 이 무스타일이었다 (명부 검색·복사 버튼 등) */
.btn-sm{display:inline-block;padding:8px 14px;border-radius:99px;background:var(--accent-soft);
color:var(--accent-d);font-weight:700;font-size:13px;border:0;cursor:pointer;
font-family:inherit;white-space:nowrap;line-height:1.3}
.btn-sm:hover{background:var(--accent);color:#fff}
/* 명부 상단 통계 */
.stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 12px;text-align:center}
.stat b{display:block;font-size:22px;font-weight:800;letter-spacing:-.04em;color:var(--accent);
font-variant-numeric:tabular-nums;line-height:1.15}
.stat span{display:block;font-size:12px;color:var(--mute);margin-top:3px}
/* 내 링크 상자 */
.urlbox{display:flex;align-items:center;gap:8px;background:#f4f6fa;border:1px solid var(--line);
border-radius:10px;padding:10px 12px}
.urlbox code{flex:1;min-width:0;font-size:12px;word-break:break-all;color:#4a5268;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* 분야 선택 칩 */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip-sel{position:relative;cursor:pointer}
.chip-sel input{position:absolute;opacity:0;width:0;height:0}
.chip-sel span{display:inline-block;padding:7px 13px;border-radius:99px;background:#fff;
border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--mute);white-space:nowrap}
.chip-sel input:checked+span{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-d)}
.chip-sel input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
/* ============================================================
v1.6 — 커뮤니티
============================================================ */
.clist{display:flex;flex-direction:column;gap:10px}
.crow{display:block;background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px 16px;
box-shadow:var(--sh);transition:.13s}
.crow:hover{border-color:var(--accent);transform:translateY(-1px)}
.crow-t{display:flex;gap:6px;align-items:center;margin-bottom:7px;flex-wrap:wrap}
.crow h3{margin:0 0 5px;font-size:16px;font-weight:700;letter-spacing:-.025em;line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.crow h3 em{font-style:normal;color:var(--urgent);font-size:13.5px;font-weight:800;margin-left:5px}
.cexc{margin:0 0 9px;font-size:13.5px;line-height:1.6;color:var(--mute);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;color:var(--mute)}
.cmeta b{color:var(--ink);font-weight:700}
.cmeta form{margin:0}
.citem{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.citem p{margin:7px 0 0;font-size:14.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--mute);
cursor:pointer;text-decoration:underline}
.linkbtn:hover{color:var(--urgent)}
/* 라디오형 칩 (커뮤니티 분류 선택) */
.chip-sel input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.chip-sel input[type=radio]:checked+span{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-d)}
/* 탭바가 4개→5개가 될 수 있어 flex 로 */
.tabbar{display:flex}
.tabbar a{flex:1 1 0;min-width:0}
/* ── 하단 탭바 제거, 헤더 접이식 메뉴로 대체 ── */
.tabbar{display:none!important}
body{padding-bottom:0}
@media(max-width:699px){ .applybar{bottom:0} }
.mnu-t{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.mnu-b{display:flex;flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px;
padding:0 7px;border-radius:9px;cursor:pointer;background:var(--bg)}
.mnu-b span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:.16s}
.mnu-t:checked+.wrap .mnu-b span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mnu-t:checked+.wrap .mnu-b span:nth-child(2){opacity:0}
.mnu-t:checked+.wrap .mnu-b span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnu-p{display:none;border-top:1px solid var(--line);background:#fff;
box-shadow:0 8px 20px rgba(20,26,51,.08)}
.mnu-t:checked~.mnu-p{display:block}
.mnu-p .wrap{display:flex;flex-direction:column;padding-top:6px;padding-bottom:10px}
/* 드로어 메뉴 — 이모지 대신 오른쪽에 얇은 화살표로 탭 느낌만. */
.mnu-p a{display:flex;align-items:center;justify-content:space-between;
padding:14px 2px;font-size:15.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;
border-bottom:1px solid var(--line)}
.mnu-p a::after{content:'›';color:#c3ccc7;font-size:18px;font-weight:400;line-height:1}
.mnu-p a:last-child{border-bottom:0}
.mnu-p a:hover{color:var(--accent)}
.mnu-p a:hover::after{color:var(--accent)}
/* 로그인·회원가입은 눈에 띄게, 로그아웃은 차분하게 */
.mnu-p a.mnu-cta{color:var(--accent);font-weight:800}
.mnu-p a.mnu-out{color:var(--mute)}
@media(min-width:700px){ .mnu-b,.mnu-p{display:none!important} }
/* ── 무료진단 랭킹 카드 ── */
.rankcard{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid var(--line);
border-radius:16px;padding:20px;box-shadow:var(--sh);margin-bottom:14px}
.rankbadge{background:linear-gradient(145deg,var(--brand-1),var(--brand-2));color:#fff;border-radius:14px;
padding:20px 16px;text-align:center;box-shadow:0 6px 18px rgba(11,107,84,.24)}
.rankbadge small{display:block;font-size:11.5px;font-weight:600;opacity:.85;letter-spacing:.03em}
.rankbadge b{display:block;font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1.15;margin:4px 0 3px;
font-variant-numeric:tabular-nums}
.rankbadge span{display:block;font-size:11.5px;opacity:.82}
.rankfacts{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:11px;overflow:hidden;margin:0}
.rankfacts>div{background:#fff;padding:12px 14px;display:flex;align-items:baseline;
justify-content:space-between;gap:10px}
.rankfacts dt{font-size:13.5px;color:var(--mute);font-weight:600}
.rankfacts dd{margin:0;font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:5px}
.rankfacts dd small{font-size:12.5px;font-weight:600;color:var(--mute);letter-spacing:0}
@media(min-width:560px){
.rankcard{flex-direction:row;align-items:stretch}
.rankbadge{flex:0 0 190px;display:flex;flex-direction:column;justify-content:center}
.rankfacts{flex:1}
}
/* 방문자 막대 */
.vbars{display:flex;align-items:flex-end;gap:8px;height:140px}
.vbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px}
.vbar em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--ink);
font-variant-numeric:tabular-nums;white-space:nowrap}
.vbar i{display:block;width:100%;max-width:44px;border-radius:7px 7px 0 0;
background:linear-gradient(180deg,var(--brand-1),var(--brand-2))}
.vbar span{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.vbar.partial i{background:repeating-linear-gradient(45deg,#cfe6dc,#cfe6dc 5px,#e4f2ec 5px,#e4f2ec 10px)}
.vbar.partial em{color:var(--mute)}
/* ── 키워드 상위 목록 ── */
.toplist{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.toplist-h{font-size:12px;font-weight:700;color:var(--mute);margin-bottom:7px}
.toprow{display:grid;grid-template-columns:20px 1fr;gap:4px 9px;padding:6px 0;font-size:13px;
border-bottom:1px solid var(--line)}
.toprow:last-child{border-bottom:0}
.toprow b{color:var(--mute);font-weight:700;font-variant-numeric:tabular-nums;text-align:center}
.tp-t{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-b{grid-column:2;font-size:11.5px;color:var(--mute)}
.toprow.mine{background:var(--accent-soft);border-radius:7px;padding:6px 8px;margin:0 -8px}
.toprow.mine b,.toprow.mine .tp-t{color:var(--accent-d);font-weight:700}
/* ── 도구 카드 (순위확인 2단 분리) ── */
.tool{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;
box-shadow:var(--sh);margin-bottom:12px}
.tool-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;
padding-bottom:13px;border-bottom:1px solid var(--line)}
.tool-n{flex:0 0 26px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
background:linear-gradient(145deg,var(--brand-1),var(--brand-2));color:#fff;
font-size:13px;font-weight:800;margin-top:1px}
.tool-h b{display:block;font-size:16px;letter-spacing:-.025em;color:var(--ink)}
.tool-h p{margin:4px 0 0;font-size:13px;line-height:1.6;color:var(--mute)}
.tool-h p b{display:inline;font-size:inherit;color:var(--ink)}
/* ============================================================
진단서 (무료진단 결과) — 딥그린 정본
브랜드 초록을 공문서용 짙은 녹색으로 번역했다. 밝은 앱 초록이 아니라서
상장으로 읽히면서도 사이트와 톤이 이어진다.
★ 캡처(html2canvas) 대상이라 바깥 여백·그림자는 .cert 밖에 두지 말 것.
============================================================ */
/* 진단서 — 글자 크기를 상장 자체의 너비에 맞춰 키운다.
예전에는 화면 너비(min-width:600px)로 크기를 바꿨는데, 상장은 최대 620px 로 고정이라
1400px 모니터에서도 700px 모니터와 똑같은 글자가 나와서 상장만 작아 보였다.
컨테이너 단위(cqw)를 쓰면 상장이 커지는 만큼 글자도 같이 커진다. */
.cert{background:#f7faf7;border:2px solid #0a3b31;border-radius:3px;padding:5px;
max-width:100%;margin:0 auto;
display:flex;container-type:inline-size;
box-shadow:0 2px 6px rgba(10,59,49,.10),0 16px 38px rgba(10,59,49,.12)}
.cert-in{flex:1;display:flex;flex-direction:column;
border:1px solid #b9d3c8;background:linear-gradient(#fdfffe,#f4faf7);
padding:2.2em 1.5em 1.4em;text-align:center;
font-family:'Nanum Myeongjo','Apple SD Gothic Neo',serif;color:#0d2b24;
font-size:clamp(16px, 4.6vw, 19px)}
@supports (font-size:1cqw){ .cert-in{font-size:clamp(16px, 3.05cqw, 19px)} }
.cert-mark{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.52em;
letter-spacing:.26em;color:#5c8a79;margin:0 0 .5em}
.cert-title{font-size:2.1em;font-weight:800;letter-spacing:.26em;margin:0 0 .12em;
color:#0d2b24;text-indent:.26em;font-family:inherit;line-height:1.25}
.cert-sub{font-size:.62em;color:#7d9c92;letter-spacing:.06em;margin:0 0 2.2em;
font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}
.cert-pf{width:5.4em;height:5.4em;border-radius:50%;margin:0 auto .7em;display:block;
object-fit:cover;background:#e4f0ea;box-shadow:0 0 0 .12em #fdfffe,0 0 0 .23em #0a7c63}
.cert-ini{display:grid;place-items:center;font-size:2.1em;font-weight:800;color:#0a7c63;
width:2.6em;height:2.6em;margin-bottom:.34em}
.cert-nick{font-size:1.32em;font-weight:800;margin:0;letter-spacing:-.01em;line-height:1.3;color:#0d2b24}
.cert-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.58em;
color:#7d9c92;margin:.4em 0 1.7em;word-break:break-all}
.cert-cite{font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
font-size:.84em;line-height:2.05;color:#3f5851;margin:0 auto 1.5em;max-width:21em}
.cert-cite b{color:#0d2b24;font-weight:700;font-size:1.15em}
.cert-g{font-weight:800;font-size:1.05em}
.cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#d3e6dd;
border:1px solid #d3e6dd;margin:0 0 1.2em;
font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}
.cert-grid>div{background:#fdfffe;padding:.75em .4em}
.cert-grid dt{font-size:.7em;color:#7d9c92;margin-bottom:.35em}
.cert-grid dd{margin:0;font-size:1.08em;font-weight:700;color:#0d2b24;font-variant-numeric:tabular-nums}
.cert-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.7em;
padding-top:1em;border-top:1px solid #d3e6dd;
font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
text-align:left}
.cert-date{font-size:.66em;color:#7d9c92;line-height:1.7}
.cert-date b{display:block;color:#0a3b31;font-size:1.18em;font-weight:700}
/* ★ 함정: 같은 요소에 font-size 를 줄이고 width 를 em 으로 쓰면
em 이 부모가 아니라 '자기 자신의 줄어든 font-size' 를 기준으로 계산된다.
3.4em 이 63px 이 아니라 35px 이 되어 도장 글씨가 잘렸다. 지름은 자기 글자 기준으로 잡는다. */
.cert-seal{flex:0 0 6.6em;width:6.6em;height:6.6em;border-radius:50%;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.28em;
background:#0a3b31;color:#eaf5ef;font-size:.56em;font-weight:700;text-align:center;
line-height:1.2;letter-spacing:.02em;
box-shadow:0 0 0 .16em #f7faf7,0 0 0 .34em #0a3b31}
.cert-seal b{font-size:.86em;font-weight:800;letter-spacing:.02em}
.cert-seal span{font-size:.92em;font-weight:600;letter-spacing:.16em;text-indent:.16em;
padding-top:.3em;border-top:1.5px solid rgba(234,245,239,.72);width:3.6em}
/* 진단서 안 3축 요약 — A4 비율 탓에 아래쪽이 크게 비어 있었다.
이미지로 저장해 올리는 물건이니 근거를 같이 담는 편이 낫다. */
.cert-axes{display:grid;gap:.5em;margin:0 0 1em;
font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}
.cert-axes>div{display:grid;grid-template-columns:3.6em 1fr 3.6em;align-items:center;gap:.7em}
.cert-axes span{font-size:.66em;font-weight:700;color:#5c8a79;text-align:left}
.cert-axes i{display:block;height:.34em;border-radius:99px;background:#dfeee7;overflow:hidden}
.cert-axes i em{display:block;height:100%;border-radius:99px;background:#0a7c63}
.cert-axes b{font-size:.7em;font-weight:800;color:#0d2b24;text-align:right;
font-variant-numeric:tabular-nums}
.cert-axes b small{font-size:.85em;font-weight:600;color:#7d9c92}
}
/* ── 내 전용 링크 · 자랑하기 ── */
.linkrow{display:flex;align-items:center;gap:9px;background:#f6f8fb;border:1px solid var(--line);
border-radius:10px;padding:10px 12px}
.linkrow .u{flex:1;min-width:0;font-size:13.5px;color:var(--ink);font-weight:500;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linkrow .cp{flex:0 0 auto;border:0;background:var(--accent);color:#fff;border-radius:8px;
padding:8px 14px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.linkrow .cp:hover{background:var(--accent-d)}
.brag{background:#f6f8fb;border:1px solid var(--line);border-radius:10px;padding:14px 15px;
font-size:13.5px;line-height:1.9;color:var(--ink);white-space:pre-line;word-break:break-word}
/* ── 헤더 계정 영역 — 서비스 메뉴와 시각적으로 분리 ── */
.hd-acc{display:flex;align-items:center;gap:10px;padding-left:12px;margin-left:2px;
border-left:1px solid var(--line)}
/* .hd-nav a 가 (0,1,1) 이라 .hd-login(0,1,0) 을 이겼다.
그래서 굵게·잉크색이 하나도 안 먹고 그냥 회색 링크로 보였다. 반드시 .hd-nav 로 감쌀 것. */
.hd-nav .hd-login{font-size:14.5px;font-weight:800;color:var(--ink)}
.hd-nav .hd-login:hover{color:var(--accent)}
/* 로그인한 사람이 자기가 누구로 들어와 있는지 알아야 한다.
이게 없으면 "마이페이지" 버튼만 보여서 로그인이 안 된 줄 안다. */
.hd-who{font-size:13px;font-weight:700;color:var(--mute);max-width:130px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd-nav .hd-who{color:var(--mute)}
.hd-nav .hd-who:hover{color:var(--accent)}
.hd-nav .hd-out{font-size:13px;color:var(--mute);font-weight:500}
.hd-nav .hd-out:hover{color:var(--ink)}
/* 마이페이지 — 프로필 사진, 탈퇴 버튼 */
.me-pf{width:58px;height:58px;border-radius:50%;object-fit:cover;flex:0 0 auto;
border:2px solid var(--accent-soft);background:var(--accent-soft)}
.btn.ghost.danger{background:#fff;color:var(--urgent);border:1px solid #f0c8ce;box-shadow:none}
.btn.ghost.danger:hover{background:var(--urgent-soft)}
@media(max-width:699px){
.hd-acc{padding-left:0;margin-left:0;border-left:0}
}
/* ── 진단 요약 카드 (등급 · 핵심 수치 4개) ─────────────────
진단서(상장)는 자랑용, 이 카드는 실무용이다.
등급은 실측 방문자로만 나눈다 — 네이버 최적화 단계는 아무도 알 수 없다. */
.tiercard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--sh);padding:18px;margin-top:16px}
.tier-head{display:flex;align-items:center;gap:12px}
.tier-pf{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto;
border:2px solid var(--accent-soft);background:var(--accent-soft)}
.tier-ini{display:grid;place-items:center;font-size:22px;font-weight:800;color:var(--accent-d)}
.tier-name{min-width:0;flex:1}
.tier-name b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.02em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tier-name span{display:block;font-size:12.5px;color:var(--mute);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tier-badge{flex:0 0 auto;padding:7px 14px;border-radius:99px;font-size:14px;font-weight:800;
letter-spacing:-.02em;background:var(--accent-soft);color:var(--accent-d)}
.tier-badge.t-top{background:#0a3b31;color:#fff}
.tier-badge.t-high{background:var(--accent);color:#fff}
.tier-badge.t-mid{background:var(--accent-soft);color:var(--accent-d)}
.tier-badge.t-grow{background:var(--easy-soft);color:var(--easy)}
.tier-badge.t-seed{background:#f1f4f2;color:var(--mute)}
.tier-badge.t-warn{background:#fdf3e2;color:var(--warn)}
.tier-badge.t-gray{background:#f1f4f2;color:var(--mute)}
.tier-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:16px;
background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tier-nums>div{background:var(--card);padding:13px 10px;text-align:center;min-width:0}
.tier-nums em{display:block;font-style:normal;font-size:12px;color:var(--mute);font-weight:600}
.tier-nums b{display:block;font-size:21px;font-weight:800;letter-spacing:-.035em;margin:5px 0 3px;
color:var(--ink);font-variant-numeric:tabular-nums}
.tier-nums b small{font-size:12px;font-weight:700;color:var(--mute);margin-left:1px}
.tier-nums span{display:block;font-size:11.5px;color:var(--mute);line-height:1.35}
@media(max-width:560px){
.tier-nums{grid-template-columns:repeat(2,1fr)}
.tier-nums b{font-size:19px}
}
.tier-say{margin:14px 0 0;font-size:14px;font-weight:700;color:var(--accent-d)}
.tier-bar{margin-top:12px}
.tier-bar-in{height:7px;border-radius:99px;background:linear-gradient(90deg,var(--brand-1),var(--brand-2))}
.tier-bar span{display:block;font-size:12.5px;color:var(--mute);margin-top:6px}
.tier-note{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
font-size:12px;line-height:1.7;color:var(--mute)}
/* ── 크루웨이브 지수 카드 ────────────────────────────────────
엔덱스류와 다른 점은 계산 근거를 전부 펼쳐 보인다는 것.
항목·값·배점이 한 줄에 같이 있어야 블로거가 납득한다. */
.ixcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--sh);padding:18px;margin-top:16px}
.ix-head{display:flex;align-items:center;gap:12px}
.ix-pf{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto;
border:2px solid var(--accent-soft);background:var(--accent-soft)}
.ix-ini{display:grid;place-items:center;font-size:22px;font-weight:800;color:var(--accent-d)}
.ix-name{min-width:0;flex:1}
.ix-name b{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ix-name span{display:block;font-size:13.5px;color:var(--mute);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ix-score{flex:0 0 auto;text-align:right;line-height:1}
.ix-score b{font-size:40px;font-weight:800;letter-spacing:-.045em;color:var(--accent);
font-variant-numeric:tabular-nums}
.ix-score small{font-size:14px;font-weight:700;color:var(--mute);margin-left:1px}
.ix-tier{margin-top:14px;padding:13px 15px;border-radius:12px;background:var(--accent-soft)}
.ix-tier b{display:block;font-size:21.5px;font-weight:800;letter-spacing:-.03em;color:var(--accent-d)}
.ix-tier span{display:block;font-size:14px;color:var(--accent-d);opacity:.85;margin-top:3px}
.ix-tier.t-opt5,.ix-tier.t-opt4{background:var(--brand-2)}
.ix-tier.t-opt5 b,.ix-tier.t-opt4 b,.ix-tier.t-opt5 span,.ix-tier.t-opt4 span{color:#fff}
.ix-tier.t-opt3,.ix-tier.t-opt2{background:var(--accent)}
.ix-tier.t-opt3 b,.ix-tier.t-opt2 b,.ix-tier.t-opt3 span,.ix-tier.t-opt2 span{color:#fff}
.ix-tier.t-sub1,.ix-tier.t-norm{background:var(--easy-soft)}
.ix-tier.t-sub1 b,.ix-tier.t-norm b,.ix-tier.t-sub1 span,.ix-tier.t-norm span{color:var(--easy)}
.ix-tier.t-seed{background:#f1f4f2}
.ix-tier.t-seed b,.ix-tier.t-seed span{color:var(--mute)}
.ix-tier.t-warn{background:#fdf3e2}
.ix-tier.t-warn b,.ix-tier.t-warn span{color:var(--warn)}
.ix-axes{margin-top:16px;display:grid;gap:14px}
.ix-ax{border:1px solid var(--line);border-radius:12px;padding:14px 15px}
.ix-ax-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ix-ax-top em{font-style:normal;font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.ix-ax-top b{font-size:18px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.ix-ax-top b small{font-size:12.5px;font-weight:700;color:var(--mute)}
.ix-track{height:6px;border-radius:99px;background:#eef2f0;overflow:hidden;margin:8px 0 10px}
.ix-track i{display:block;height:100%;border-radius:99px;
background:linear-gradient(90deg,var(--brand-1),var(--brand-2))}
.ix-rows{margin:0;display:grid;gap:8px}
.ix-rows>div{display:grid;grid-template-columns:6.2em 1fr auto;align-items:baseline;gap:10px}
.ix-rows dt{font-size:13.5px;color:var(--mute)}
.ix-rows dd{margin:0;font-size:13.5px}
.ix-rows .ix-v{color:var(--ink);font-weight:600;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ix-rows .ix-p{color:var(--accent-d);font-weight:800;font-variant-numeric:tabular-nums}
.ix-rows .ix-p small{color:var(--mute);font-weight:600}
.ix-help{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.ix-help summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--accent-d);list-style:none}
.ix-help summary::-webkit-details-marker{display:none}
.ix-help summary::before{content:'＋ ';font-weight:800}
.ix-help[open] summary::before{content:'－ '}
.ix-help>div{margin-top:10px}
.ix-help p{margin:0 0 10px;font-size:13px;line-height:1.8;color:var(--mute)}
.ix-scale{display:flex;flex-wrap:wrap;gap:5px}
.ix-scale span{background:#f4f7f5;border:1px solid var(--line);border-radius:99px;
padding:4px 9px;font-size:11.5px;color:var(--ink);font-weight:600}
/* 진단서(상장) 안의 단계 이름 색 */
/* 진단서 안에서는 딥그린 한 계열로만 간다. 파랑·노랑이 섞이면 톤이 깨진다.
등급 구분은 색상이 아니라 진하기로 준다 — 높을수록 진하다. */
.cert-g.cg-opt5,.cert-g.cg-opt4{color:#06392c}
.cert-g.cg-opt3,.cert-g.cg-opt2,.cert-g.cg-opt1{color:#0a5a47}
.cert-g.cg-sub3,.cert-g.cg-sub2,.cert-g.cg-sub1{color:#0f7f64}
.cert-g.cg-norm{color:#4e8a78}
.cert-g.cg-seed,.cert-g.cg-warn{color:#7ba396}
@media(min-width:700px){ .ix-axes{grid-template-columns:repeat(3,1fr)} }
/* 마이페이지 — 지수 요약 */
.ix-chip{display:inline-block;padding:5px 12px;border-radius:99px;font-size:13px;font-weight:800;
background:var(--accent-soft);color:var(--accent-d)}
.ix-chip.t-opt5,.ix-chip.t-opt4,.ix-chip.t-opt3,.ix-chip.t-opt2{background:var(--accent);color:#fff}
.ix-chip.t-sub1,.ix-chip.t-norm{background:var(--easy-soft);color:var(--easy)}
.ix-chip.t-seed{background:#f1f4f2;color:var(--mute)}
.ix-chip.t-warn{background:#fdf3e2;color:var(--warn)}
.ix-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ix-mini em{font-style:normal;font-size:12px;color:var(--mute);font-weight:600}
.ix-mini b{font-size:13.5px;font-weight:800;color:var(--accent-d);font-variant-numeric:tabular-nums}
.ix-mini b small{color:var(--mute);font-weight:600}
.ix-mini .ix-track{margin:5px 0 4px}
/* ── 서이추 ────────────────────────────────────────────────
핵심은 상태 뱃지다. '나만 추가'가 한눈에 보여야 의미가 있다. */
.bd-me{display:flex;align-items:center;gap:10px;justify-content:space-between}
.bd-me b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.bd-me span.muted{display:block;margin-top:2px}
.bd-row{align-items:flex-start}
.bd-pf{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto;
border:2px solid var(--accent-soft);background:var(--accent-soft)}
.bd-ini{display:grid;place-items:center;font-size:19px;font-weight:800;color:var(--accent-d)}
.bd-nick{font-size:15px;font-weight:800;letter-spacing:-.02em;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bd-st{margin-left:auto;flex:0 0 auto;padding:4px 10px;border-radius:99px;
font-size:12px;font-weight:800;background:#f1f4f2;color:var(--mute)}
.bd-st.s-ok{background:var(--accent);color:#fff}
.bd-st.s-warn{background:var(--urgent-soft);color:var(--urgent)}
.bd-st.s-need{background:var(--easy-soft);color:var(--easy)}
.bd-st.s-none{background:#f1f4f2;color:var(--mute)}
.bd-st.s-gray{background:#f1f4f2;color:var(--mute)}
.bd-msg{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--ink);
background:#f7faf8;border-radius:9px;padding:8px 10px}
.bd-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
/* ── 전체 등급표 ───────────────────────────────────────────
엔덱스처럼 전 등급을 펼쳐 보이되, 내 자리와 다음 단계까지 남은 점수를 같이 준다.
분포 막대는 표본이 쌓이기 전까지 아예 그리지 않는다 (2~3개로 그리면 거짓말이 된다). */
.gradetab{padding:16px}
.gt-me{display:flex;align-items:center;justify-content:space-between;gap:12px;
background:var(--accent-soft);border-radius:12px;padding:13px 15px;margin-bottom:16px}
.gt-me em{display:block;font-style:normal;font-size:13px;font-weight:600;color:var(--accent-d);opacity:.75}
.gt-me b{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--accent-d)}
.gt-me>div>span{display:block;font-size:13.5px;color:var(--accent-d);opacity:.85;margin-top:2px}
.gt-me>div>span b{font-size:13.5px}
.gt-next{text-align:right;flex:0 0 auto}
.gt-next b{font-size:19px}
.gt-grp{margin:14px 0 7px;padding-top:12px;border-top:1px solid var(--line)}
.gt-grp:first-of-type{margin-top:0;padding-top:0;border-top:0}
.gt-grp b{font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.gt-grp span{display:block;font-size:13px;color:var(--mute);margin-top:2px}
.gt-row{display:grid;grid-template-columns:6.4em 5.6em 1fr 2.8em;align-items:center;gap:8px;
padding:9px 11px;border-radius:9px;font-size:14.5px}
.gt-row.on{background:var(--accent);color:#fff;font-weight:800}
.gt-nm{font-weight:700;white-space:nowrap}
.gt-sc{font-size:13px;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.gt-row.on .gt-sc{color:rgba(255,255,255,.8)}
.gt-bar{display:block;height:7px;border-radius:99px;background:#eef2f0;overflow:hidden}
.gt-row.on .gt-bar{background:rgba(255,255,255,.28)}
.gt-bar i{display:block;height:100%;border-radius:99px;background:var(--brand-1)}
.gt-row.on .gt-bar i{background:#fff}
.gt-n{text-align:right;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.gt-row.on .gt-n{color:#fff}
.gt-here{grid-column:1 / -1;font-size:12.5px;font-weight:700;opacity:.9;margin-top:2px}
.gt-note{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line);
font-size:13px;line-height:1.8;color:var(--mute)}
/* 분포를 안 그릴 때는 두 칸짜리로 좁힌다 */
.gradetab .gt-row:not(:has(.gt-bar)){grid-template-columns:5.8em 1fr}
@media(max-width:420px){
.gt-row{grid-template-columns:5.9em 5em 1fr 2.5em;gap:6px;font-size:13.5px}
}
/* 좁은 화면 — 지수 항목 줄을 두 줄로 풀어 글자를 안 줄인다 */
@media(max-width:430px){
.ix-rows>div{grid-template-columns:1fr auto;row-gap:2px}
.ix-rows dt{grid-column:1 / -1;font-size:12.5px}
.ix-score b{font-size:34px}
.ix-tier b{font-size:19.5px}
}
/* ── 순위확인 · 색인 결과 ──────────────────────────────────
전에는 검색어가 회색 작은 글씨로 제목 밑에 묻혀 있었다.
실제로 궁금한 건 "무슨 말로 검색했을 때 몇 등인가" 이므로 검색어를 주인공으로 올린다. */
.idx-lead{margin:0 0 12px;font-size:13.5px;line-height:1.75;color:var(--mute)}
.idx-lead b{color:var(--ink)}
.idxq{border-left:4px solid var(--accent)}
.idxq.no{border-left-color:var(--urgent)}
.idxq-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.idxq-rank{background:var(--accent);color:#fff;font-size:14px;font-weight:800;
padding:5px 13px;border-radius:99px;letter-spacing:-.02em}
.idxq-rank b{font-size:17px;font-weight:800}
.idxq-rank.out{background:var(--urgent-soft);color:var(--urgent)}
.idxq-docs{font-size:12.5px;color:var(--mute);margin-left:auto;font-variant-numeric:tabular-nums}
.idxq-docs b{color:var(--ink);font-weight:700}
.idxq-q{background:var(--accent-soft);border-radius:11px;padding:12px 14px}
.idxq-lb{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;
color:var(--accent-d);opacity:.75;margin-bottom:4px}
.idxq-q b{display:block;font-size:17px;font-weight:800;line-height:1.45;
letter-spacing:-.025em;color:var(--accent-d);word-break:keep-all}
.idxq-post{display:flex;gap:10px;align-items:flex-start;margin-top:11px;
padding-top:11px;border-top:1px solid var(--line)}
.idxq-lb2{flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--mute);
background:#f1f4f2;border-radius:6px;padding:3px 7px;margin-top:2px}
.idxq-post p{margin:0;font-size:14px;line-height:1.6;color:var(--ink);word-break:keep-all}
.idxq-say{margin:11px 0 0;font-size:13px;color:var(--urgent);line-height:1.6}
.idxq-say b{font-weight:800}
@media(max-width:430px){
.idxq-q b{font-size:15.5px}
.idxq-docs{margin-left:0;width:100%}
}
/* ── 커뮤니티 분류 (이모지 대신 이름만, 색으로 구분) ── */
.ccat{display:inline-block;font-size:12px;font-weight:800;letter-spacing:-.01em;
padding:4px 10px;border-radius:7px;white-space:nowrap}
.ccat.c-ask{background:#eaf0ff;color:#2b5ce6}
.ccat.c-tip{background:var(--accent-soft);color:var(--accent-d)}
.ccat.c-rev{background:#fdf3e2;color:#b7791f}
.ccat.c-day{background:#f1f4f2;color:#6d7d76}
/* 색인 결과 — 잡힌 순위 줄 */
.idxq-hit{margin:11px 0 0;padding-top:11px;border-top:1px solid var(--line);
font-size:13.5px;color:var(--mute);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.idxq-hit b{color:var(--accent);font-weight:800;font-size:15px}
.idxq-hit a{color:var(--accent);font-weight:700}
.idxq-date{background:#f1f4f2;border-radius:6px;padding:2px 8px;font-size:12px}
/* ── 서이추 데모 ───────────────────────────────────────────
기능 설명을 글로 적어두면 아무도 안 읽는다. 30초짜리 자동 재생으로 보여준다.
한 번 본 사람은 접힌 상태로 열리고, 「다시 보기」로 언제든 볼 수 있다. */
.bdemo{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--sh);margin-bottom:16px;overflow:hidden}
.bdemo>summary{cursor:pointer;list-style:none;padding:14px 16px;display:flex;
align-items:center;gap:10px;flex-wrap:wrap}
.bdemo>summary::-webkit-details-marker{display:none}
.bdemo>summary::after{content:'▾';margin-left:auto;color:var(--mute);font-size:13px}
.bdemo[open]>summary::after{content:'▴'}
.bdemo>summary b{font-size:14.5px;font-weight:800;letter-spacing:-.02em}
.bdemo-in{padding:0 16px 16px}
.bdemo-narr{display:flex;align-items:center;gap:10px;margin:0 0 10px;
background:#f4f8f6;border-radius:10px;padding:11px 13px;min-height:52px}
.bdemo-narr>b{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
background:var(--accent);color:#fff;display:grid;place-items:center;
font-size:11.5px;font-weight:800}
.bdemo-narr em{font-style:normal;font-size:14px;font-weight:700;letter-spacing:-.02em;
color:var(--ink);line-height:1.35}
.bdemo-narr small{display:block;font-size:12.5px;font-weight:500;color:var(--mute);margin-top:2px}
.bdemo-screen{position:relative;height:360px;border:1px solid var(--line);
border-radius:12px;background:var(--bg);overflow:hidden}
.bdemo-scroll{position:absolute;inset:0;overflow:hidden;padding:12px}
.bdemo-list{display:grid;gap:10px}
.bdemo-screen .item{pointer-events:none}
.bdemo-screen .btn-sm{cursor:default}
.bdemo-cur{position:absolute;left:0;top:0;z-index:5;pointer-events:none;
transform:translate(40px,40px);transition:transform .8s cubic-bezier(.42,.02,.24,1);
filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.bdemo-ring{position:absolute;left:0;top:0;width:1px;height:1px;z-index:4;
pointer-events:none;opacity:0}
.bdemo-ring::after{content:'';position:absolute;left:-22px;top:-22px;width:44px;height:44px;
border-radius:50%;border:2.5px solid var(--accent)}
.bdemo-ring.go{animation:bdping .55s ease-out}
@keyframes bdping{0%{opacity:.9;transform:scale(.35)}100%{opacity:0;transform:scale(1.15)}}
.bdemo-toast{position:absolute;left:50%;bottom:12px;transform:translate(-50%,24px);z-index:6;
background:#0d2b24;color:#fff;font-size:13px;font-weight:700;line-height:1.5;
padding:10px 15px;border-radius:10px;max-width:88%;text-align:center;
opacity:0;transition:opacity .28s,transform .28s;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.bdemo-toast.on{opacity:1;transform:translate(-50%,0)}
.bdemo-toast.bad{background:#8f1d2b}
.bdemo-spin{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:50%;
border:2px solid #c3ccd8;border-top-color:#6d7d76;animation:bdsp .7s linear infinite;
vertical-align:-1px}
@keyframes bdsp{to{transform:rotate(360deg)}}
.bdemo-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px}
.bd-st.s-load{background:#eef1f5;color:var(--mute)}
@media(max-width:430px){
.bdemo-screen{height:400px}
.bdemo-narr em{font-size:13.5px}
}
/* ── 페이지 머리 — 제목 줄에 주 동작을 붙인다 ──────────────
전에는 제목+설명 묶음 옆에 세로 가운데로 붙어서, 버튼이 두 줄 사이 허공에 떠 보였다. */
.page-head{margin-bottom:14px}
.page-head-t{display:flex;align-items:center;gap:12px}
.page-head-t h1{margin:0;flex:1;min-width:0}
.page-head .sub{margin:5px 0 0}
.btn-sm.solid{flex:0 0 auto;background:var(--accent);color:#fff;border:0;font-weight:800}
.btn-sm.solid:hover{background:var(--accent-d);color:#fff}
/* ── 커뮤니티 사진 ────────────────────────────────────────
원본을 그대로 올리면 한 장에 몇 MB 씩 쌓인다.
브라우저에서 긴 변 1280px JPEG 로 줄여 보내고, 서버가 한 번 더 검사·재인코딩한다. */
/* 이름이 회원가입 화면의 .picks/.pick 과 겹쳐 그 화면을 망가뜨렸다.
같은 이름을 두 곳에서 쓰지 말 것. 여기는 사진 고르기 전용이라 imgpick 으로 둔다. */
.imgpicks{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.imgpick{position:relative;width:92px;height:92px;border-radius:10px;overflow:hidden;
border:1px solid var(--line);background:#f4f7f5}
.imgpick img{width:100%;height:100%;object-fit:cover;display:block}
.imgpick b{position:absolute;left:0;right:0;bottom:0;background:rgba(13,43,36,.72);color:#fff;
font-size:10.5px;font-weight:700;text-align:center;padding:2px 0;letter-spacing:-.02em}
.imgpick button{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;
border:0;background:rgba(13,43,36,.8);color:#fff;font-size:13px;line-height:1;
cursor:pointer;padding:0;display:grid;place-items:center}
.imgpick button:hover{background:var(--urgent)}
.cimgs{display:grid;gap:10px;margin:16px 0 4px}
.cimgs img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line)}
@media(min-width:600px){ .cimgs{grid-template-columns:repeat(2,1fr)} .cimgs a:only-child{grid-column:1/-1} }
.crow-b{display:flex;align-items:flex-start;gap:11px}
.crow-b .cexc{flex:1;min-width:0}
.crow-th{position:relative;flex:0 0 auto;width:58px;height:58px;border-radius:9px;
overflow:hidden;border:1px solid var(--line);background:#f4f7f5}
.crow-th img{width:100%;height:100%;object-fit:cover;display:block}
.crow-th em{position:absolute;right:3px;bottom:3px;background:rgba(13,43,36,.8);color:#fff;
font-style:normal;font-size:10.5px;font-weight:800;padding:1px 5px;border-radius:5px}
/* ── 지금 보고 있는 메뉴 표시 ──────────────────────────────
표시가 없으면 자기가 어느 화면에 있는지 알 수 없다. */
.hd-nav a.on{color:var(--ink);font-weight:800;position:relative}
.hd-nav a.on::after{content:'';position:absolute;left:0;right:0;bottom:-9px;height:2.5px;
border-radius:99px;background:var(--accent)}
.hd-nav a.on:hover{color:var(--accent-d)}
.mnu-p a.on{background:var(--accent-soft);color:var(--accent-d);font-weight:800}
/* ── 랜딩: 브랜드(CREW + WAVE) ─────────────────────────────
처음 오는 사람에게 「무엇을 파는 곳」보다 「어떤 흐름인지」를 먼저 보여준다.
블로거와 광고주가 같은 첫 화면에서 각자 갈 길을 찾을 수 있어야 한다. */
.wavebg{position:relative;overflow:hidden}
.wavebg-art{position:absolute;left:-2%;right:-2%;top:38%;width:104%;height:190px;
pointer-events:none;z-index:0}
.wavebg>*:not(.wavebg-art){position:relative;z-index:1}
.lp-brand{margin:0 0 22px;font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--accent-d)}
.lp-hero .eyebrow{font-family:'Quicksand',system-ui,sans-serif;font-size:13px;font-weight:700;
letter-spacing:.14em;text-transform:uppercase}
/* 두 갈래 */
.lp-fork{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){ .lp-fork{grid-template-columns:repeat(2,1fr)} }
.fork{display:block;background:var(--card);border:1px solid var(--line);border-radius:18px;
padding:26px 24px;box-shadow:var(--sh);transition:transform .15s,border-color .15s,box-shadow .15s}
.fork:hover{transform:translateY(-2px);border-color:var(--accent);
box-shadow:0 10px 28px rgba(10,59,49,.13)}
.fork-tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.06em;
padding:4px 10px;border-radius:99px;margin-bottom:12px}
.fork.blogger .fork-tag{background:var(--accent-soft);color:var(--accent-d)}
.fork.owner .fork-tag{background:var(--easy-soft);color:var(--easy)}
.fork b{display:block;font-size:23px;font-weight:800;letter-spacing:-.035em;margin-bottom:7px}
.fork>p{margin:0 0 16px;font-size:15px;line-height:1.7;color:var(--mute)}
.fork ul{margin:0 0 18px;padding-left:19px;font-size:14.5px;line-height:2;color:#5a6274}
.fork ul b{display:inline;font-size:inherit;color:var(--ink)}
.fork-go{font-size:14.5px;font-weight:800;color:var(--accent)}
/* 마무리 */
.lp-closing{margin-top:38px;padding:38px 24px 34px;border-radius:18px;text-align:center;
background:linear-gradient(135deg,#062b23,#0b6b54);color:#fff}
.lp-closing-en{margin:0 0 14px;font-family:'Quicksand',system-ui,sans-serif;
font-size:14px;font-weight:700;letter-spacing:.14em;color:#8fd6bd;text-transform:uppercase}
.lp-closing-ko{margin:0 0 24px;font-size:clamp(21px,4.6vw,29px);font-weight:800;
letter-spacing:-.035em;line-height:1.45}
.lp-closing .btn{background:#fff;color:var(--accent-d);box-shadow:none}
.lp-closing .btn:hover{background:#e9f3ef}
.lp-closing .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.lp-closing .btn.ghost:hover{background:rgba(255,255,255,.12)}
/* ── 광고주 유형 선택 · 확약 ────────────────────────────────
대행사는 남을 대신해 올리는 주체라 책임 소재가 흐려진다.
유형을 갈라 받고, 대행사에만 추가 확약을 필수로 건다. */
.atypes{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:620px){ .atypes{grid-template-columns:repeat(3,1fr)} }
.atype{display:block;cursor:pointer}
.atype input{position:absolute;opacity:0;width:0;height:0}
.atype span{display:block;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;
background:var(--card);transition:border-color .12s,background .12s}
.atype b{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.atype em{display:block;font-style:normal;font-size:12.5px;color:var(--mute);margin-top:3px;line-height:1.5}
.atype input:checked + span{border-color:var(--accent);background:var(--accent-soft)}
.atype input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.vow{border:1px solid var(--line);border-radius:12px;padding:15px 16px;background:#fafbfa}
.vow-h{display:block;font-size:14px;font-weight:800;letter-spacing:-.02em;margin-bottom:9px}
.vow-h.mt{margin-top:16px}
.vow-list{margin:0 0 12px;padding-left:18px;font-size:13px;line-height:1.85;color:#4e5668}
.vow-list.warn{color:#7a3b3b}
.vow-note{margin:10px 0 0;font-size:12px;color:var(--mute)}
/* ── 운영 대시보드 ─────────────────────────────────────────
비교가 없는 숫자는 아무것도 말해주지 않는다.
그래서 모든 수치 옆에 1시간·어제·7일 전 대비를 같이 놓는다. */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
@media(min-width:760px){ .kpis{grid-template-columns:repeat(4,1fr)} .kpis.two{grid-template-columns:repeat(2,1fr)} }
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px;box-shadow:var(--sh)}
.kpi em{display:block;font-style:normal;font-size:12.5px;font-weight:600;color:var(--mute)}
.kpi b{display:block;font-size:30px;font-weight:800;letter-spacing:-.04em;margin:5px 0 4px;
color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.kpi b small{font-size:14px;font-weight:700;color:var(--mute);margin-left:2px}
.dlt{display:block;font-size:12.5px;font-weight:700;color:var(--mute)}
.dlt i{display:block;font-style:normal;font-size:11.5px;font-weight:500;color:#9aa5a0;margin-top:2px}
.dlt.up{color:var(--accent)}
.dlt.down{color:var(--urgent)}
.dlt.same{color:var(--mute)}
.mtabs{display:flex;gap:7px;flex-wrap:wrap}
.hbars{display:flex;align-items:flex-end;gap:5px;height:150px;margin-top:16px}
.hbar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
height:100%;gap:4px}
.hbar em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--ink);
font-variant-numeric:tabular-nums;white-space:nowrap}
.hbar i{display:block;width:100%;border-radius:5px 5px 0 0;background:var(--accent);min-height:2px}
.hbar.est i{background:#c3ded3}
.hbar.est em{color:var(--mute);font-weight:500}
.hbar span{font-size:10.5px;color:var(--mute);font-variant-numeric:tabular-nums}
.dgrp{display:block;font-size:15px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.dtbl-wrap{overflow-x:auto}
.dtbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:460px}
.dtbl th{text-align:left;font-size:12px;font-weight:700;color:var(--mute);
padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.dtbl td{padding:9px 8px;border-bottom:1px solid #f0f3f1;vertical-align:middle}
.dtbl tr:last-child td{border-bottom:0}
.dtbl .dnm{color:var(--mute);white-space:nowrap}
.dtbl .dcur b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.dtbl .dcur small{font-size:11.5px;color:var(--mute);margin-left:2px}
.dtbl .dlt{font-size:12.5px}
.dcode{display:inline-block;margin-top:6px;background:#0d2b24;color:#cfe8dd;border-radius:7px;
padding:6px 10px;font-family:ui-monospace,monospace;font-size:12px;word-break:break-all}
/* ── 랜딩: 지금 눌러볼 수 있는 것 ──────────────────────────
초기에는 「등록 블로거 2명」 같은 숫자가 오히려 초라해 보인다.
숫자 대신 바로 써볼 수 있는 도구를 앞에 놓는다. */
.lp-tools{display:grid;grid-template-columns:1fr;gap:11px;margin-bottom:8px}
@media(min-width:760px){ .lp-tools{grid-template-columns:repeat(3,1fr)} }
.tool{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;
padding:20px 20px 18px;box-shadow:var(--sh);
transition:transform .15s,border-color .15s,box-shadow .15s}
.tool:hover{transform:translateY(-2px);border-color:var(--accent);
box-shadow:0 10px 26px rgba(10,59,49,.12)}
.tool b{display:block;font-size:17.5px;font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.tool p{margin:0 0 12px;font-size:14px;line-height:1.65;color:var(--mute)}
.tool span{font-size:14px;font-weight:800;color:var(--accent)}
/* ── 가로 넘침 방어 ────────────────────────────────────────
아이폰에서 오른쪽이 넘쳐 보인다는 제보가 있었다.
어떤 요소가 튀어나와도 화면 밖으로 못 나가게 막고,
노치가 있는 기기에서는 안전영역만큼 좌우 여백을 준다. */
html, body{max-width:100%;overflow-x:hidden}
.wrap{
padding-left:calc(16px + env(safe-area-inset-left));
padding-right:calc(16px + env(safe-area-inset-right));
}
img, svg, video, canvas, table{max-width:100%}
.wavebg-art{max-width:none}
/* ── 안내 상자 ─────────────────────────────────────────────
한 문단에 문장을 몰아넣으면 좁은 화면에서 문장 끝과 새 문장 시작이
한 줄에 붙어 읽기 나쁘다. 문장마다 줄을 나눈다. */
.nt-h{display:block;margin-bottom:8px}
.nt-h.mt{margin-top:16px}
.nt-list{margin:0;padding-left:16px;display:grid;gap:7px}
.nt-list li{line-height:1.7;text-wrap:pretty}
.notice p{margin:0 0 8px;text-wrap:pretty}
.notice p:last-child{margin-bottom:0}
/* 색인 결과 더 보기 */
.morebox{margin-top:14px}
.morebox .btn{width:100%;display:block}
.morebox .cap{margin-top:8px;text-align:center}
/* ── 랜딩 hero : C안 (후기 카드가 물결처럼 흐름) ──────────
실제로 진단된 블로그를 익명 카드로 흘려 「사람이 모이는 곳」을 보여준다.
블로그 주소는 노출하지 않는다. */
.lp-hero-c{text-align:center;padding:30px 4px 14px;position:relative;overflow:hidden}
.lp-hero-c > *{position:relative;z-index:1}
.hero-alt{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.hero-alt a{color:var(--accent);font-weight:700;text-decoration:none}
/* 제목 뒤로 은은하게 흐르는 파도. 텍스트는 이 위에 얹혀 읽힌다. */
.c-sea{position:absolute;left:0;right:0;top:56px;height:170px;z-index:0;overflow:hidden;
pointer-events:none;opacity:.16}
.c-sea svg{position:absolute;top:0;left:0;width:200%;height:100%}
.c-sea .w3{animation:csroll 15s linear infinite;opacity:.5}
.c-sea .w2{animation:csroll 7s linear infinite reverse;opacity:.7}
.c-sea .w1{animation:csroll 11s linear infinite}
@keyframes csroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .c-sea svg{animation:none} }
.lp-hero-c .eyebrow{font-family:'Quicksand',system-ui,sans-serif;font-size:12.5px;font-weight:700;
letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.lp-hero-c h1{font-size:clamp(27px,7.4vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1.2;
margin:12px 0 14px;text-wrap:balance}
.lead-c{font-size:15px;line-height:1.65;color:#4e5668;margin:0 0 22px}
.lead-c b{color:var(--ink)}
/* CTA 폭에 맞춘 카드 리스트가 위로 흐른다 (진단 쌓이는 느낌). */
.cstream{margin-top:22px;height:236px;overflow:hidden;position:relative;
-webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);
mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent)}
.cstream-track{display:grid;gap:10px;animation:cflow 22s linear infinite}
.cstream-track{animation-name:cflow;animation-timing-function:linear;animation-iteration-count:infinite}
.cstream:hover .cstream-track{animation-play-state:paused}
@keyframes cflow{to{transform:translateY(-33.333%)}}
@media (prefers-reduced-motion: reduce){ .cstream{height:auto;overflow:visible;mask:none;-webkit-mask:none} .cstream-track{animation:none} }
.cs-card{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
border-radius:14px;padding:14px 16px;box-shadow:0 4px 16px rgba(20,26,51,.05);text-align:left;
animation:csin .6s both}
.cs-card:nth-child(1){animation-delay:.02s}.cs-card:nth-child(2){animation-delay:.10s}
.cs-card:nth-child(3){animation-delay:.18s}.cs-card:nth-child(4){animation-delay:.26s}
.cs-card:nth-child(5){animation-delay:.34s}.cs-card:nth-child(6){animation-delay:.42s}
@keyframes csin{from{opacity:0;transform:translateY(10px)}}
.cs-pf{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:linear-gradient(145deg,var(--brand-1),var(--brand-2));color:#fff;font-weight:800;font-size:15px}
.cs-tx{min-width:0;flex:1}
.cs-tx b{display:block;font-size:14px;font-weight:800;letter-spacing:-.02em;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-tx span{font-size:12px;color:var(--mute)}
.cs-sc{flex:0 0 auto;font-size:19px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.cs-sc small{font-size:11px;font-weight:700;color:var(--mute);margin-left:1px}
.cstream-cap{font-size:11.5px;color:var(--mute);margin:10px 0 0}
/* 전환 시 애니메이션 줄이기 */
@media (prefers-reduced-motion: reduce){ .cs-card{animation:none} }
/* 서이추 비로그인 안내 */
.bd-guest b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
.bd-guest .btnrow{display:flex;gap:8px;flex-wrap:wrap}
.bd-guest .btn,.bd-guest .btn.ghost{flex:0 0 auto}
/* 서이추 진행중/완료 탭 (JS 없이 라디오로) */
.bd-tabs{margin:14px 0 8px}
.bd-tabin{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.bd-tabbar{display:flex;gap:8px;margin-bottom:12px}
.bd-tabbar label{flex:1;text-align:center;padding:11px 10px;border:1px solid var(--line);
border-radius:11px;cursor:pointer;font-weight:700;color:var(--mute);background:var(--card);
font-size:14px;transition:background .12s,color .12s,border-color .12s;user-select:none}
.bd-tabbar label span{display:inline-block;min-width:18px;margin-left:2px;padding:0 6px;
border-radius:99px;background:#e8efec;color:var(--mute);font-size:12px;line-height:18px}
#bdt-p:checked ~ .bd-tabbar label[for="bdt-p"],
#bdt-d:checked ~ .bd-tabbar label[for="bdt-d"]{background:var(--accent);color:#fff;border-color:var(--accent)}
#bdt-p:checked ~ .bd-tabbar label[for="bdt-p"] span,
#bdt-d:checked ~ .bd-tabbar label[for="bdt-d"] span{background:rgba(255,255,255,.28);color:#fff}
.bd-pane{display:none}
#bdt-p:checked ~ .bd-pane-p{display:block}
#bdt-d:checked ~ .bd-pane-d{display:block}
.lp-comm{background:#f6faf8;border:1px solid var(--line);border-radius:14px;padding:20px 18px;text-align:center}
.lp-comm-lead{margin:0 0 14px;font-size:14px;color:var(--mute);word-break:keep-all}
.lp-comm-hook{display:flex;gap:12px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:15px}
.lp-comm-hook .ico{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:#e3f1ea;display:grid;place-items:center;font-size:20px;line-height:1}
.lp-comm-hook b{display:block;font-size:14.5px;letter-spacing:-.02em;margin-bottom:4px;color:var(--ink)}
.lp-comm-hook p{margin:0;font-size:13px;line-height:1.6;color:var(--mute);word-break:keep-all}