/* 파키라랩 게시판·글 공통 스타일 — 랜딩페이지(index.html)와 같은 디자인 토큰 사용 */
:root{
--green-dark:#043E14;
--green:#0E6B32;
--green-hover:#0B5A29;
--green-pale:#E7F1E9;
--cream:#F7F6F0;
--dark:#141413;
--mid:#726F68;
--border:#E1DFD5;
--white:#FFFFFF;
--radius:14px;
--maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0;
font-family:'Pretendard','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
background:var(--cream);
color:var(--dark);
line-height:1.65;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
/* ── 헤더 ── */
header.nav{
position:sticky;top:0;z-index:50;
background:rgba(247,246,240,0.92);
backdrop-filter:blur(8px);
border-bottom:1px solid var(--border);
}
.nav-inner{
display:flex;align-items:center;justify-content:space-between;
padding:16px 24px;max-width:var(--maxw);margin:0 auto;
}
.brand{
font-weight:800;font-size:17px;letter-spacing:0.01em;text-transform:uppercase;
display:flex;align-items:center;gap:8px;color:var(--green-dark);text-decoration:none;
}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block;}
.nav-logo{height:34px;width:auto;display:block;border-radius:6px;}
nav.links{display:flex;gap:22px;font-size:14px;font-weight:500;}
nav.links a{text-decoration:none;color:var(--dark);opacity:0.75;transition:opacity .15s;}
nav.links a:hover,nav.links a.on{opacity:1;color:var(--green);}
.nav-cta{
background:var(--green);color:#fff;border:none;padding:10px 18px;border-radius:999px;
font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;
}
.nav-cta:hover{background:var(--green-hover);}
/* ── 페이지 머리 ── */
.page-head{background:var(--green-dark);color:#fff;padding:52px 0 56px;}
.page-head .eyebrow{
font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;
color:rgba(255,255,255,0.72);margin:0 0 10px;
}
.page-head h1{font-size:34px;line-height:1.3;margin:0 0 12px;font-weight:800;letter-spacing:-0.02em;}
.page-head p{margin:0;max-width:640px;color:rgba(255,255,255,0.82);font-size:15.5px;}
/* ── 카테고리 탭 ── */
.cat-bar{background:var(--white);border-bottom:1px solid var(--border);}
.cat-bar-inner{
display:flex;gap:6px;overflow-x:auto;max-width:var(--maxw);margin:0 auto;
padding:12px 24px;scrollbar-width:none;
}
.cat-bar-inner::-webkit-scrollbar{display:none;}
.cat-bar a{
flex:0 0 auto;text-decoration:none;font-size:14px;font-weight:600;
padding:8px 15px;border-radius:999px;color:var(--mid);white-space:nowrap;
}
.cat-bar a:hover{background:var(--green-pale);color:var(--green);}
.cat-bar a.on{background:var(--green-dark);color:#fff;}
/* ── 목록 ── */
main{min-height:52vh;padding:44px 0 72px;}
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.post-item{
background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
padding:22px 24px;transition:border-color .15s, transform .15s;
}
.post-item:hover{border-color:var(--green);transform:translateY(-1px);}
.post-item a.title{
text-decoration:none;font-size:18.5px;font-weight:700;line-height:1.45;
display:block;margin:0 0 8px;letter-spacing:-0.01em;
}
.post-item a.title:hover{color:var(--green);}
.post-meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mid);}
.post-meta .tag{
background:var(--green-pale);color:var(--green);font-weight:600;
padding:3px 10px;border-radius:999px;font-size:12px;
}
.post-excerpt{margin:10px 0 0;font-size:14.5px;color:var(--mid);line-height:1.7;}
.empty{
background:var(--white);border:1px dashed var(--border);border-radius:var(--radius);
padding:56px 24px;text-align:center;color:var(--mid);font-size:15px;
}
.empty strong{display:block;color:var(--dark);font-size:16.5px;margin-bottom:6px;}
/* ── 인사이트 허브 카드 ── */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:0 0 40px;}
.hub-card{
background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
padding:24px;text-decoration:none;display:block;transition:border-color .15s,transform .15s;
}
.hub-card:hover{border-color:var(--green);transform:translateY(-2px);}
.hub-card h3{margin:0 0 8px;font-size:17px;font-weight:700;}
.hub-card p{margin:0 0 12px;font-size:13.5px;color:var(--mid);line-height:1.65;}
.hub-card .count{font-size:12.5px;color:var(--green);font-weight:600;}
.sec-title{font-size:20px;font-weight:800;margin:0 0 16px;letter-spacing:-0.01em;}
/* ── 글 본문 ── */
.article{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:40px 44px;}
.article h2{font-size:23px;margin:38px 0 14px;font-weight:800;letter-spacing:-0.01em;}
.article h3{font-size:18px;margin:28px 0 10px;font-weight:700;}
.article p{margin:0 0 16px;font-size:16px;line-height:1.85;}
.article ul,.article ol{margin:0 0 18px;padding-left:22px;}
.article li{margin:0 0 8px;font-size:16px;line-height:1.8;}
.article blockquote{
margin:20px 0;padding:14px 20px;border-left:3px solid var(--green);
background:var(--green-pale);border-radius:0 8px 8px 0;color:var(--dark);
}
.article blockquote p:last-child{margin-bottom:0;}
.article table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px;}
.article th,.article td{border:1px solid var(--border);padding:10px 12px;text-align:left;}
.article th{background:var(--green-pale);font-weight:700;}
.article img{border-radius:10px;margin:20px 0;}
.article code{background:var(--cream);padding:2px 6px;border-radius:4px;font-size:14px;}
.article hr{border:none;border-top:1px solid var(--border);margin:32px 0;}
.article a{color:var(--green);}
.article-foot{
margin-top:36px;padding-top:24px;border-top:1px solid var(--border);
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
}
.back-link{text-decoration:none;font-size:14px;font-weight:600;color:var(--mid);}
.back-link:hover{color:var(--green);}
.cta-inline{
background:var(--green);color:#fff;text-decoration:none;font-size:14px;font-weight:600;
padding:11px 20px;border-radius:999px;
}
.cta-inline:hover{background:var(--green-hover);}
/* ── 푸터 ── */
footer{padding:44px 0 30px;border-top:1px solid var(--border);background:var(--cream);}
.footer-inner{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:22px;}
.footer-brand{display:flex;flex-direction:column;gap:9px;}
.footer-logo{height:24px;width:auto;display:block;}
.footer-tag{margin:0;font-size:12.5px;color:var(--mid);letter-spacing:0.01em;}
.footer-social{display:flex;align-items:center;gap:18px;}
.sns{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--dark);font-size:13px;font-weight:600;transition:color .15s;}
.sns svg{width:22px;height:22px;border-radius:6px;flex-shrink:0;display:block;}
.sns:hover{color:var(--green);}
.footer-bottom{margin-top:26px;padding-top:18px;border-top:1px solid var(--border);}
footer .fine{margin:0;font-size:12.5px;color:var(--mid);}
@media (max-width:640px){
.footer-inner{flex-direction:column;align-items:flex-start;gap:20px;}
.footer-social{gap:14px;flex-wrap:wrap;}
}
@media(max-width:860px){
nav.links{display:none;}
.page-head h1{font-size:26px;}
.article{padding:28px 22px;}
.article p,.article li{font-size:15.5px;}
}
/* ===== 연재(시리즈) ===== */
.series-box{
border:1px solid var(--border,#E1DFD5); border-left:4px solid var(--green,#0E6B32);
border-radius:10px; padding:14px 16px; margin:0 0 26px; background:var(--green-pale,#E7F1E9);
}
.series-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.series-badge{
font-size:12px;font-weight:700;letter-spacing:.04em;color:#fff;
background:var(--green,#0E6B32);border-radius:4px;padding:3px 7px;
}
.series-name{font-weight:700;color:var(--green-dark,#043E14);text-decoration:none;font-size:15px;}
.series-name:hover{text-decoration:underline;}
.series-progress{display:flex;align-items:center;gap:10px;margin-top:9px;font-size:13px;color:var(--mid,#726F68);}
.series-progress strong{color:var(--green-dark,#043E14);font-size:15px;}
.series-bar{flex:1;height:5px;border-radius:3px;background:rgba(4,62,20,.12);overflow:hidden;min-width:70px;}
.series-bar i{display:block;height:100%;background:var(--green,#0E6B32);}
.series-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:36px 0 18px;}
.series-nav .sn{
display:block;padding:14px 16px;border:1px solid var(--border,#E1DFD5);border-radius:10px;
text-decoration:none;background:#fff;transition:border-color .15s,transform .15s;
}
.series-nav .sn:hover{border-color:var(--green,#0E6B32);transform:translateY(-1px);}
.series-nav .sn.empty{border:none;background:none;}
.series-nav .sn-label{display:block;font-size:12px;color:var(--green,#0E6B32);font-weight:700;margin-bottom:5px;}
.series-nav .sn-title{display:block;font-size:14px;color:var(--dark,#141413);line-height:1.45;}
.series-nav .next{text-align:right;}
.series-toc{border:1px solid var(--border,#E1DFD5);border-radius:10px;padding:0;margin:0 0 8px;background:#fff;}
.series-toc summary{cursor:pointer;padding:13px 16px;font-size:14px;font-weight:600;color:var(--green-dark,#043E14);}
.series-toc ol{list-style:none;margin:0;padding:0 16px 14px;}
.series-toc li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--border,#E1DFD5);font-size:14px;}
.series-toc li.on{font-weight:700;}
.series-toc li.on a{color:var(--green,#0E6B32);}
.series-toc .ep{flex:0 0 40px;font-size:12px;color:var(--mid,#726F68);}
.series-toc a{color:var(--dark,#141413);text-decoration:none;}
.series-toc a:hover{text-decoration:underline;}
/* 카테고리 페이지의 시리즈 블록 */
.series-block{margin:0 0 40px;padding:0 0 4px;}
.series-block-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.series-block-head h2{margin:0;font-size:20px;color:var(--green-dark,#043E14);}
.series-chip{font-size:12px;color:var(--green,#0E6B32);background:var(--green-pale,#E7F1E9);border-radius:20px;padding:3px 10px;font-weight:600;}
.series-block-desc{margin:8px 0 14px;color:var(--mid,#726F68);font-size:14px;}
.series-soon{color:var(--mid,#726F68);font-size:14px;padding:14px 0;border-top:1px solid var(--border,#E1DFD5);}
.series-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border,#E1DFD5);}
.series-list li{display:grid;grid-template-columns:52px 1fr;gap:10px;padding:13px 2px;border-bottom:1px solid var(--border,#E1DFD5);align-items:baseline;}
.series-list .ep{font-size:12px;font-weight:700;color:var(--green,#0E6B32);}
.series-list a{color:var(--dark,#141413);text-decoration:none;font-weight:600;font-size:15.5px;line-height:1.5;}
.series-list a:hover{color:var(--green,#0E6B32);}
.series-sum{display:block;grid-column:2;margin-top:5px;font-size:13.5px;color:var(--mid,#726F68);line-height:1.6;}
.section-divider{font-size:18px;color:var(--green-dark,#043E14);margin:8px 0 16px;padding-top:20px;border-top:1px solid var(--border,#E1DFD5);}
/* ===== 본문 이미지 + 캡션 (네이버 블로그식) ===== */
.article figure{margin:30px 0;}
.article figure img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--border,#E1DFD5);}
.article figure figcaption{
margin-top:9px;font-size:13.5px;color:var(--mid,#726F68);text-align:center;line-height:1.6;
}
.article img{max-width:100%;height:auto;border-radius:10px;}
/* 이미지 자리표시자 — 아직 이미지를 넣지 않은 자리 */
.article .img-slot{
margin:30px 0;border:1px dashed var(--border,#E1DFD5);border-radius:10px;
background:var(--cream,#F7F6F0);padding:34px 20px;text-align:center;
}
.article .img-slot span{display:block;font-size:13px;color:var(--mid,#726F68);}
.article .img-slot span+span{margin-top:6px;font-size:12.5px;}
@media (max-width:640px){
.series-nav{grid-template-columns:1fr;}
.series-nav .next{text-align:left;}
}
/* 본문 링크 색상이 CTA 버튼 글자색을 덮어쓰던 문제 수정 */
.article .cta-inline{color:#fff;}
.article .back-link{color:var(--mid,#726F68);}
.article .back-link:hover{color:var(--green,#0E6B32);}
/* 본문 1:1 정사각 이미지는 너무 커지지 않게 폭을 제한 */
.article figure{max-width:580px;margin-left:auto;margin-right:auto;}
/* ── 큰 버튼 / 배너 CTA (현장클리닉 안내) ───────────────── */
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 32px;}
.article .btn-big{
display:inline-flex;align-items:center;justify-content:center;
flex:1 1 260px;min-height:62px;padding:16px 26px;
background:var(--green,#0E6B32);color:#fff;
border-radius:12px;text-decoration:none;
font-size:17px;font-weight:700;letter-spacing:-0.01em;line-height:1.35;
text-align:center;transition:background .15s,transform .15s;
box-shadow:0 2px 10px rgba(4,62,20,0.14);
}
.article .btn-big:hover{background:var(--green-hover,#0B5A29);transform:translateY(-1px);}
.article .btn-big.btn-line{
background:#fff;color:var(--green-dark,#043E14);
border:1.5px solid var(--green,#0E6B32);box-shadow:none;
}
.article .btn-big.btn-line:hover{background:var(--green-pale,#E7F1E9);}
.article .banner-cta{
display:block;margin:30px 0;padding:26px 28px;
background:linear-gradient(135deg,#043E14 0%,#0E6B32 100%);
color:#fff;border-radius:16px;text-decoration:none;
transition:transform .15s,box-shadow .15s;
box-shadow:0 4px 16px rgba(4,62,20,0.18);
}
.article .banner-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(4,62,20,0.26);}
.banner-cta .bn-kick{
display:block;font-size:12.5px;font-weight:700;letter-spacing:0.06em;
text-transform:none;color:rgba(255,255,255,0.72);margin-bottom:7px;
}
.banner-cta .bn-title{
display:block;font-size:25px;font-weight:800;letter-spacing:-0.02em;line-height:1.3;
color:#fff;margin-bottom:9px;
}
.banner-cta .bn-desc{
display:block;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,0.86);margin-bottom:14px;
}
.banner-cta .bn-go{
display:inline-block;padding:9px 18px;border-radius:999px;
background:rgba(255,255,255,0.16);border:1px solid rgba(255,255,255,0.34);
font-size:14px;font-weight:700;color:#fff;
}
/* 숫자 요약 카드 */
.fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0 34px;}
.fact{
background:var(--green-pale,#E7F1E9);border:1px solid var(--border,#E1DFD5);
border-radius:12px;padding:18px 14px;text-align:center;
}
.fact .fn{font-size:23px;font-weight:800;color:var(--green-dark,#043E14);letter-spacing:-0.02em;line-height:1.25;}
.fact .fl{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--mid,#726F68);}
/* 신청 절차 스텝 */
.step-list{margin:24px 0 34px;}
.step{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--border,#E1DFD5);}
.step:last-child{border-bottom:1px solid var(--border,#E1DFD5);}
.step .sn{
flex:0 0 34px;height:34px;border-radius:50%;
background:var(--green,#0E6B32);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:15px;font-weight:800;
}
.step .sb{flex:1;min-width:0;}
.article .step h3{margin:2px 0 8px;font-size:17px;}
.article .step p{margin:0 0 8px;font-size:15.5px;}
.article .step ul{margin:0 0 8px;}
.article .step li{font-size:15px;margin-bottom:5px;}
.article p.note{font-size:13.5px;color:var(--mid,#726F68);margin:0;}
.article p.src-note{font-size:13.5px;line-height:1.75;color:var(--mid,#726F68);}
@media (max-width:720px){
.fact-grid{grid-template-columns:repeat(2,1fr);}
.banner-cta .bn-title{font-size:21px;}
.article .btn-big{flex:1 1 100%;font-size:16px;}
}
/* ── 썸네일 카드 그리드 (블로그형 목록) ─────────────────── */
.card-grid{
display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
gap:20px;margin:0 0 42px;
}
.pcard{
display:flex;flex-direction:column;background:var(--white,#fff);
border:1px solid var(--border,#E1DFD5);border-radius:14px;overflow:hidden;
text-decoration:none;color:inherit;
transition:transform .16s,border-color .16s,box-shadow .16s;
}
.pcard:hover{
border-color:var(--green,#0E6B32);transform:translateY(-3px);
box-shadow:0 10px 24px rgba(4,62,20,0.10);
}
.pcard-thumb{position:relative;aspect-ratio:4/3;background:var(--green-pale,#E7F1E9);overflow:hidden;}
.pcard-thumb img{
width:100%;height:100%;object-fit:cover;object-position:center top;
display:block;margin:0;border-radius:0;transition:transform .35s ease;
}
.pcard:hover .pcard-thumb img{transform:scale(1.045);}
.pcard-ep{
position:absolute;left:10px;top:10px;
background:rgba(4,62,20,0.88);color:#fff;
font-size:12px;font-weight:700;letter-spacing:0.02em;
padding:4px 11px;border-radius:999px;
}
.pcard-body{padding:15px 16px 18px;display:flex;flex-direction:column;gap:9px;flex:1;}
.pcard-title{margin:0;font-size:16.5px;font-weight:700;line-height:1.45;letter-spacing:-0.01em;}
.pcard:hover .pcard-title{color:var(--green,#0E6B32);}
.pcard-sum{
margin:0;font-size:13.5px;line-height:1.65;color:var(--mid,#726F68);
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pcard .post-meta{margin:0;}
/* 허브 카드에 커버 이미지 */
.hub-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px;}
.hub-card{padding:0;display:flex;flex-direction:column;overflow:hidden;}
.hub-thumb{aspect-ratio:4/3;overflow:hidden;background:var(--green-pale,#E7F1E9);}
.hub-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.hub-card:hover .hub-thumb img{transform:scale(1.045);}
.hub-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1;}
.hub-card h3{margin:0;}
.hub-card p{margin:0;flex:1;}
.hub-card .count{margin-top:2px;}
@media (max-width:520px){
.card-grid,.hub-grid{grid-template-columns:1fr;gap:16px;}
}
/* ── 게시판 상단 소개 블록 ─────────────────────────── */
.board-lead{
background:linear-gradient(135deg,#043E14 0%,#0E6B32 100%);
color:#fff;border-radius:16px;padding:34px 34px 32px;margin:0 0 42px;
box-shadow:0 4px 16px rgba(4,62,20,0.16);
}
.board-lead .bl-kick{
margin:0 0 9px;font-size:12.5px;font-weight:700;letter-spacing:0.06em;
color:rgba(255,255,255,0.72);
}
.board-lead h2{
margin:0 0 14px;font-size:26px;font-weight:800;line-height:1.34;
letter-spacing:-0.02em;color:#fff;
}
.board-lead .bl-desc{
margin:0 0 12px;font-size:15px;line-height:1.75;color:rgba(255,255,255,0.86);
max-width:720px;
}
.board-lead .bl-desc:last-of-type{margin-bottom:22px;}
.board-cta{
display:inline-block;padding:13px 24px;border-radius:999px;
background:#fff;color:var(--green-dark,#043E14);
font-size:15px;font-weight:700;text-decoration:none;
transition:transform .15s,box-shadow .15s;
}
.board-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,0.18);}
/* 다루는 주제 카드 */
.topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:0 0 44px;}
.topic{
background:var(--white,#fff);border:1px solid var(--border,#E1DFD5);
border-radius:14px;padding:22px 22px 24px;
}
.topic .tn{
display:inline-block;font-size:12px;font-weight:800;letter-spacing:0.04em;
color:var(--green,#0E6B32);background:var(--green-pale,#E7F1E9);
padding:4px 10px;border-radius:999px;margin-bottom:12px;
}
.topic h3{margin:0 0 8px;font-size:17px;font-weight:700;letter-spacing:-0.01em;}
.topic p{margin:0;font-size:13.5px;line-height:1.7;color:var(--mid,#726F68);}
@media (max-width:640px){
.board-lead{padding:26px 22px 24px;}
.board-lead h2{font-size:21px;}
}
/* ── 글 공유 버튼 ─────────────────────────────────── */
.share-box{
margin:38px 0 0;padding:20px 0 0;border-top:1px solid var(--border,#E1DFD5);
display:flex;align-items:center;flex-wrap:wrap;gap:14px;
}
.share-label{font-size:13.5px;font-weight:700;color:var(--mid,#726F68);}
.share-btns{display:flex;flex-wrap:wrap;gap:9px;}
.article .sh{
display:inline-flex;align-items:center;gap:7px;
padding:8px 14px 8px 9px;border-radius:999px;
background:var(--white,#fff);border:1px solid var(--border,#E1DFD5);
font-size:13px;font-weight:600;color:var(--dark,#141413);
text-decoration:none;cursor:pointer;font-family:inherit;
transition:border-color .15s,transform .15s,background .15s;
}
.article .sh:hover{border-color:var(--green,#0E6B32);transform:translateY(-1px);}
.article .sh svg{width:20px;height:20px;border-radius:6px;flex-shrink:0;display:block;margin:0;}
.article .sh-copy.is-done{background:var(--green-pale,#E7F1E9);border-color:var(--green,#0E6B32);color:var(--green-dark,#043E14);}
@media (max-width:520px){
.share-box{flex-direction:column;align-items:flex-start;gap:10px;}
.article .sh span{display:none;}
.article .sh{padding:9px;}
}
/* ── 제목 아래 공유 버튼 (page-head 안, 아이콘 전용) ── */
.page-head .share-box.share-top{
margin:20px 0 0;padding:0;border-top:0;
display:flex;align-items:center;gap:10px;
}
.share-top .share-btns{gap:8px;}
.share-top .sh{
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;padding:0;border-radius:10px;
background:rgba(255,255,255,0.10);
border:1px solid rgba(255,255,255,0.22);
cursor:pointer;text-decoration:none;
transition:background .15s,border-color .15s,transform .15s;
}
.share-top .sh:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.45);transform:translateY(-1px);}
.share-top .sh svg{width:18px;height:18px;border-radius:5px;display:block;margin:0;}
.share-top .sh-copy.is-done{background:rgba(255,255,255,0.32);border-color:#fff;}
.share-toast{
font-size:12.5px;font-weight:700;color:#fff;
background:rgba(255,255,255,0.18);border-radius:999px;padding:5px 11px;
}