@import url("https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Pen+Script&family=Gowun+Dodum&family=Gowun+Batang:wght@400;700&family=Hi+Melody&family=Do+Hyeon&family=Gugi&family=Sunflower:wght@300;500;700&family=Nanum+Myeongjo:wght@400;700;800&family=Nanum+Gothic:wght@400;700;800&family=Black+Han+Sans&family=IBM+Plex+Sans+KR:wght@400;500;600&family=Noto+Sans+KR:wght@400;500;700&family=Noto+Serif+KR:wght@400;600;700&family=Gothic+A1:wght@400;500;700&family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Geist:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;700;800&family=Nunito:wght@600;800&family=Space+Grotesk:wght@500;700&family=Archivo+Black&family=Sora:wght@400;600;700&display=swap");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css");
/* 글꼴은 전부 무료(구글 폰트 OFL, 프리텐다드 OFL, 갈무리 OFL). 위 세 줄이 맨 앞에 있어야 도구에서도 글꼴이 따라온다. */
/* 디자인 프리셋 토큰. 도구 HTML 에서 <html data-preset="이름"> 으로 고른다.
   각 프리셋은 변수만 바꾼다. 공통 부품(.btn .card .chip .input)은 변수를 읽는다. */

:root{
  --bg:#fff; --paper:#fff; --ink:#111; --muted:#666; --line:#111; --accent:#111; --accent-ink:#fff;
  --accent-2:#eee; --accent-2-ink:var(--ink); --ok:#2e7d4f;
  --head:system-ui,sans-serif; --body:system-ui,sans-serif;
  --r:12px; --r-pill:99px; --bw:1px; --shadow:none; --shadow-press:none;
  --pattern:none;
}

/* 1 버터 스티커: 크림 바탕, 버터 노랑, 갈색 굵은 선, 눌리는 단추. 먼작귀 페이지 결 */
[data-preset="butter"]{
  --bg:#fffdf6; --paper:#fff; --ink:#4b3128; --muted:#76594f; --line:#5b3d32;
  --accent:#ffd95a; --accent-ink:#4b3128; --accent-2:#ffe1e6; --ok:#4c9a6a;
  --head:"Jua","Apple SD Gothic Neo",sans-serif; --body:"Gowun Dodum","Apple SD Gothic Neo",sans-serif;
  --r:22px; --bw:2px; --shadow:0 5px 0 var(--line); --shadow-press:0 2px 0 var(--line);
  --pattern:radial-gradient(#f0dcc0 1.2px,transparent 1.3px); --pattern-size:18px 18px;
}

/* 2 파스텔 문구점: 라벤더, 민트, 복숭아. 선 없이 부드러운 그림자 */
[data-preset="pastel"]{
  --bg:#f7f3ff; --paper:#fff; --ink:#3b3550; --muted:#8a84a3; --line:#e6dff7;
  --accent:#b9a7f2; --accent-ink:#2a2340; --accent-2:#cdeedd; --ok:#5fb08a;
  --head:"Hi Melody","Apple SD Gothic Neo",sans-serif; --body:"Gowun Dodum","Apple SD Gothic Neo",sans-serif;
  --r:20px; --bw:1px; --shadow:0 10px 30px rgba(120,100,180,.14); --shadow-press:0 4px 12px rgba(120,100,180,.18);
}

/* 3 잡지 에디토리얼: 흰 바탕, 검정, 빨강 하나. 명조 큰 제목, 가는 괘선 */
[data-preset="editorial"]{
  --bg:#fff; --paper:#fff; --ink:#111; --muted:#777; --line:#111;
  --accent:#d6261e; --accent-ink:#fff; --accent-2:#f3f3f3; --ok:#111;
  --head:"Nanum Myeongjo","Apple SD Gothic Neo",sans-serif; --body:"Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  --r:0; --r-pill:0; --bw:1px; --shadow:none; --shadow-press:none;
}

/* 4 레트로 디스켓: 90년대 PC. 베이지, 남색, 픽셀 글꼴, 베벨 단추. 주간 디스켓용 */
[data-preset="diskette"]{
  --bg:#d8d4c8; --paper:#ece9df; --ink:#1b1f3a; --muted:#5a5e78; --line:#1b1f3a;
  --accent:#2b3a9e; --accent-ink:#fff; --accent-2:#f4c542; --ok:#1f7a3a;
  --head:"Galmuri11",monospace; --body:"Galmuri11",monospace;
  --r:0; --r-pill:0; --bw:2px; --shadow:3px 3px 0 var(--line); --shadow-press:1px 1px 0 var(--line);
  --pattern:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.035) 3px 4px);
}

/* 5 네온 라이브: 어두운 바탕, 핫핑크와 전기 파랑. 락스타 계정용 */
[data-preset="neon"]{
  --bg:#0f0f14; --paper:#18181f; --ink:#f4f4f8; --muted:#9a9ab0; --line:#2a2a36;
  --accent:#ff3d8a; --accent-ink:#fff; --accent-2:#2ee6ff; --accent-2-ink:#0f0f14; --ok:#2ee6ff;
  --head:"Black Han Sans","Apple SD Gothic Neo",sans-serif; --body:"Do Hyeon","Apple SD Gothic Neo",sans-serif;
  --r:14px; --bw:1px; --shadow:0 0 0 1px var(--line),0 0 24px rgba(255,61,138,.25); --shadow-press:0 0 0 1px var(--accent);
}

/* 6 종이 노트: 따뜻한 종이, 바탕체, 밑줄 강조. 에세이와 독서용 */
[data-preset="paper"]{
  --bg:#f6f1e7; --paper:#fbf8f1; --ink:#2b2a27; --muted:#7a7468; --line:#d9d0bf;
  --accent:#2b2a27; --accent-ink:#f6f1e7; --accent-2:#e8dfcc; --ok:#4f6b3a;
  --head:"Gowun Batang","Apple SD Gothic Neo",sans-serif; --body:"Gowun Batang","Apple SD Gothic Neo",sans-serif;
  --r:6px; --r-pill:6px; --bw:1px; --shadow:0 1px 0 var(--line); --shadow-press:none;
}

/* 7 민트 클리닉: 연민트 바탕, 흰 카드, 프리텐다드. 정보 도구용(윰원장 결) */
[data-preset="mint"]{
  --bg:#e9f6f1; --paper:#fff; --ink:#1f2d2a; --muted:#6b7f79; --line:#d2e8df;
  --accent:#2bb38a; --accent-ink:#fff; --accent-2:#fff3c4; --ok:#2bb38a;
  --head:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo",sans-serif; --body:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo",sans-serif;
  --r:16px; --bw:1px; --shadow:0 6px 20px rgba(31,45,42,.08); --shadow-press:0 2px 8px rgba(31,45,42,.1);
}

/* 8 모노 툴: 검정과 회색, 파랑 하나. 촘촘한 전문 도구. 마케터 도구용 */
[data-preset="mono"]{
  --bg:#fafafa; --paper:#fff; --ink:#161616; --muted:#6f6f6f; --line:#e2e2e2;
  --accent:#1a56db; --accent-ink:#fff; --accent-2:#eef2ff; --ok:#1a56db;
  --head:"IBM Plex Sans KR","Apple SD Gothic Neo",sans-serif; --body:"IBM Plex Sans KR","Apple SD Gothic Neo",sans-serif;
  --r:8px; --r-pill:8px; --bw:1px; --shadow:none; --shadow-press:none;
}

/* ---- 유명 디자인 시스템과 요즘 사이트 결 (2026-10-18 추가). 브랜드 자산은 안 쓰고 결만 닮게 옮겼다 ---- */

/* 9 시드 제로: shadcn/ui 의 중성 회색 결. 피그마 커뮤니티 설치 수 상위. 개발자 도구와 대시보드 */
[data-preset="shadcn"]{
  --bg:#fafafa; --paper:#fff; --ink:#09090b; --muted:#71717a; --line:#e4e4e7;
  --accent:#18181b; --accent-ink:#fafafa; --accent-2:#f4f4f5; --ok:#16a34a;
  --head:"Inter","Apple SD Gothic Neo",sans-serif; --body:"Inter","Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  --r:10px; --r-pill:8px; --bw:1px; --shadow:0 1px 2px rgba(0,0,0,.05); --shadow-press:none;
}

/* 10 머티리얼 3: 구글. 연보라 톤 표면, 큰 알약 단추, 둥근 카드 */
[data-preset="material"]{
  --bg:#fef7ff; --paper:#f3edf7; --ink:#1d1b20; --muted:#49454f; --line:#cac4d0;
  --accent:#6750a4; --accent-ink:#fff; --accent-2:#e8def8; --accent-2-ink:#1d192b; --ok:#386a20;
  --head:"Roboto","Apple SD Gothic Neo",sans-serif; --body:"Roboto","Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  --r:16px; --r-pill:99px; --bw:0px; --shadow:0 1px 3px rgba(0,0,0,.18); --shadow-press:0 1px 2px rgba(0,0,0,.2);
}

/* 11 아이폰 시스템: 애플 HIG 결. 연회색 바탕, 흰 둥근 카드, 시스템 파랑, 그림자 거의 없음 */
[data-preset="ios"]{
  --bg:#f2f2f7; --paper:#fff; --ink:#000; --muted:#8e8e93; --line:#e5e5ea;
  --accent:#007aff; --accent-ink:#fff; --accent-2:#e5f0ff; --accent-2-ink:#0a5fd0; --ok:#34c759;
  --head:-apple-system,"SF Pro Display","Apple SD Gothic Neo",sans-serif; --body:-apple-system,"SF Pro Text","Apple SD Gothic Neo",sans-serif;
  --r:14px; --r-pill:99px; --bw:0px; --shadow:none; --shadow-press:none;
}

/* 12 리니어 다크: 소프트웨어 팀용 도구의 짙은 남보라 바탕, 가는 선, 보라 포인트 */
[data-preset="linear"]{
  --bg:#0b0b0f; --paper:#131318; --ink:#ececf1; --muted:#8a8f98; --line:#23242c;
  --accent:#5e6ad2; --accent-ink:#fff; --accent-2:#1b1c26; --accent-2-ink:#b4b9ff; --ok:#4cb782;
  --head:"Geist","Apple SD Gothic Neo",sans-serif; --body:"Geist","Gothic A1","Apple SD Gothic Neo",sans-serif;
  --r:8px; --r-pill:8px; --bw:1px; --shadow:0 0 0 1px var(--line); --shadow-press:0 0 0 1px var(--accent);
}

/* 13 스트라이프 인디고: 핀테크 결. 흰 바탕, 짙은 남색 글자, 인디고 단추, 부드러운 큰 그림자 */
[data-preset="stripe"]{
  --bg:#f6f9fc; --paper:#fff; --ink:#0a2540; --muted:#697386; --line:#e3e8ee;
  --accent:#635bff; --accent-ink:#fff; --accent-2:#f0efff; --accent-2-ink:#4b43d6; --ok:#0e9f6e;
  --head:"Plus Jakarta Sans","Noto Sans KR","Apple SD Gothic Neo",sans-serif; --body:"Plus Jakarta Sans","Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  --r:10px; --r-pill:99px; --bw:1px; --shadow:0 13px 27px -5px rgba(50,50,93,.18),0 8px 16px -8px rgba(0,0,0,.2); --shadow-press:0 3px 6px rgba(50,50,93,.2);
}

/* 14 노션 문서: 흰 바탕, 거의 검정 글자, 연회색 블록, 명조 제목 가능. 메모와 위키 */
[data-preset="notion"]{
  --bg:#fff; --paper:#fff; --ink:#37352f; --muted:#9b9a97; --line:#e9e9e7;
  --accent:#2383e2; --accent-ink:#fff; --accent-2:#f1f1ef; --accent-2-ink:#37352f; --ok:#0f7b6c;
  --head:"Noto Serif KR","Apple SD Gothic Neo",sans-serif; --body:"Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  --r:6px; --r-pill:6px; --bw:1px; --shadow:none; --shadow-press:none;
}

/* 15 에어비앤비 코랄: 흰 바탕, 따뜻한 코랄 단추, 큰 둥근 카드와 사진 중심. 예약, 여행, 소개 페이지 */
[data-preset="airbnb"]{
  --bg:#fff; --paper:#fff; --ink:#222; --muted:#6a6a6a; --line:#ddd;
  --accent:#ff385c; --accent-ink:#fff; --accent-2:#fff1f3; --accent-2-ink:#c2294a; --ok:#008a05;
  --head:"Nunito","Gothic A1","Apple SD Gothic Neo",sans-serif; --body:"Nunito","Gothic A1","Apple SD Gothic Neo",sans-serif;
  --r:20px; --r-pill:12px; --bw:1px; --shadow:0 6px 16px rgba(0,0,0,.12); --shadow-press:0 2px 6px rgba(0,0,0,.14);
}

/* 16 토스 블루: 한국 금융앱 결. 연회색 바탕, 큰 글자, 통통한 파란 단추, 선 없는 카드 */
[data-preset="toss"]{
  --bg:#f2f4f6; --paper:#fff; --ink:#191f28; --muted:#6b7684; --line:#e5e8eb;
  --accent:#3182f6; --accent-ink:#fff; --accent-2:#e8f3ff; --accent-2-ink:#1b64da; --ok:#03b26c;
  --head:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo",sans-serif; --body:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo",sans-serif;
  --r:20px; --r-pill:16px; --bw:0px; --shadow:none; --shadow-press:none;
}

/* 17 네오브루탈: 굵은 검정 선, 쨍한 면색, 번짐 없는 그림자. 요즘 사이트의 장난기 있는 결 */
[data-preset="neobrut"]{
  --bg:#fff4d6; --paper:#fff; --ink:#000; --muted:#444; --line:#000;
  --accent:#ff6b9d; --accent-ink:#000; --accent-2:#a8f0c6; --accent-2-ink:#000; --ok:#00a86b;
  --head:"Space Grotesk","Do Hyeon","Apple SD Gothic Neo",sans-serif; --body:"Space Grotesk","Gothic A1","Apple SD Gothic Neo",sans-serif;
  --r:4px; --r-pill:4px; --bw:3px; --shadow:5px 5px 0 #000; --shadow-press:1px 1px 0 #000;
}

/* 18 스위스 포스터: 흰 바탕, 검정 큰 글자, 빨강 한 점, 괘선과 격자. 어워드 사이트의 단골 */
[data-preset="swiss"]{
  --bg:#f4f4f0; --paper:#f4f4f0; --ink:#000; --muted:#555; --line:#000;
  --accent:#ff2a00; --accent-ink:#fff; --accent-2:#000; --accent-2-ink:#f4f4f0; --ok:#000;
  --head:"Archivo Black","Black Han Sans","Apple SD Gothic Neo",sans-serif; --body:"Nanum Gothic","Apple SD Gothic Neo",sans-serif;
  --r:0; --r-pill:0; --bw:2px; --shadow:none; --shadow-press:none;
}

/* 19 유리 오로라: 보랏빛 그라데이션 바탕에 반투명 유리 카드. 음악, 날씨, 대시보드 */
[data-preset="glass"]{
  --bg:#2b1b5e; --paper:rgba(255,255,255,.14); --ink:#fff; --muted:rgba(255,255,255,.7); --line:rgba(255,255,255,.28);
  --accent:#fff; --accent-ink:#2b1b5e; --accent-2:rgba(255,255,255,.2); --accent-2-ink:#fff; --ok:#8ff0c0;
  --head:"Sora","Noto Sans KR","Apple SD Gothic Neo",sans-serif; --body:"Sora","Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  --r:24px; --r-pill:99px; --bw:1px; --shadow:0 8px 32px rgba(0,0,0,.25); --shadow-press:0 2px 10px rgba(0,0,0,.3);
  --pattern:radial-gradient(circle at 15% 10%,#ff6bd6 0,transparent 40%),radial-gradient(circle at 90% 30%,#4ac3ff 0,transparent 45%),radial-gradient(circle at 40% 100%,#7b5cff 0,transparent 50%);
}
[data-preset="glass"] .card,[data-preset="glass"] .picker,[data-preset="glass"] .chords div{backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
[data-preset="glass"] body{background:var(--pattern),var(--bg);background-attachment:fixed;min-height:100vh}

/* 20 팝 멤피스: 노랑 파랑 분홍 도형, 굵은 둥근 글자, 90년대 팝. 이벤트, 어린이, 장난감 */
[data-preset="pop"]{
  --bg:#ffe94d; --paper:#fff; --ink:#1a1a40; --muted:#4a4a7a; --line:#1a1a40;
  --accent:#2f5bff; --accent-ink:#fff; --accent-2:#ff7ab8; --accent-2-ink:#1a1a40; --ok:#00a56a;
  --head:"Gugi","Apple SD Gothic Neo",sans-serif; --body:"Sunflower","Apple SD Gothic Neo",sans-serif;
  --r:18px; --r-pill:99px; --bw:3px; --shadow:4px 4px 0 var(--line); --shadow-press:1px 1px 0 var(--line);
  --pattern:radial-gradient(#1a1a40 1.5px,transparent 1.6px); --pattern-size:22px 22px;
}

/* 21 노트 필기: 모눈 종이, 남색 볼펜, 노랑 형광펜, 빨간 펜 한 점. 브런치 1편 그림에서 왔다(2026-10-22).
   손그림 동그라미와 마스킹 테이프는 06-커리어/브런치-연재/1편-그림-새판/노트필기.html 을 본뜬다 */
[data-preset="notebook"]{
  --bg:#fbf9f3; --paper:#fffef9; --ink:#22305e; --muted:#6b7391; --line:#22305e;
  --accent:#ffe04d; --accent-ink:#22305e; --accent-2:#fff3a8; --accent-2-ink:#22305e; --ok:#3f7a52;
  --head:"Nanum Pen Script","Apple SD Gothic Neo",cursive; --body:"Gowun Dodum","Apple SD Gothic Neo",sans-serif;
  --r:4px; --r-pill:4px; --bw:1.5px; --shadow:0 1px 2px rgba(0,0,0,.12),0 10px 18px -10px rgba(0,0,0,.22); --shadow-press:0 1px 2px rgba(0,0,0,.12);
  --pattern:linear-gradient(#e3e8ee 1px,transparent 1px),linear-gradient(90deg,#e3e8ee 1px,transparent 1px); --pattern-size:40px 40px;
}
[data-preset="notebook"] h1,[data-preset="notebook"] h2,[data-preset="notebook"] h3,[data-preset="notebook"] .btn{font-weight:400}
[data-preset="notebook"] h1{font-size:clamp(40px,9vw,60px)}
[data-preset="notebook"] .btn{font-size:23px;padding:8px 18px} [data-preset="notebook"] .chip{font-size:15px}

/* 22 노트 필기 고딕: 노트 필기에서 본문만 프리텐다드. 손글씨 본문은 폰에서 안 읽힌다(사용자 10-23, 10-24).
   제목과 단추만 나눔손글씨 펜. allaboutmarketing.pages.dev 블로그가 이 결이다 */
[data-preset="notebook-sans"]{
  --bg:#fbf9f3; --paper:#fffef9; --ink:#22305e; --muted:#5d6588; --line:#22305e;
  --accent:#ffe04d; --accent-ink:#22305e; --accent-2:#fff3a8; --accent-2-ink:#22305e; --ok:#3f7a52;
  --head:"Nanum Pen Script","Apple SD Gothic Neo",cursive; --body:"Pretendard Variable","Pretendard","Apple SD Gothic Neo",sans-serif;
  --r:4px; --r-pill:4px; --bw:1.5px; --shadow:0 1px 2px rgba(0,0,0,.12),0 10px 18px -10px rgba(0,0,0,.22); --shadow-press:0 1px 2px rgba(0,0,0,.12);
  --pattern:linear-gradient(#e3e8ee 1px,transparent 1px),linear-gradient(90deg,#e3e8ee 1px,transparent 1px); --pattern-size:40px 40px;
}
[data-preset="notebook-sans"] h1,[data-preset="notebook-sans"] h2,[data-preset="notebook-sans"] h3,[data-preset="notebook-sans"] .btn{font-weight:400}
[data-preset="notebook-sans"] h1{font-size:clamp(40px,9vw,60px)}
[data-preset="notebook-sans"] .btn{font-size:23px;padding:8px 18px} [data-preset="notebook-sans"] .chip{font-size:15px}
[data-preset="notebook-sans"] body{letter-spacing:-.2px;word-break:keep-all}

/* ---- 공통 부품. 프리셋 변수만 읽는다 ---- */
body{margin:0;background-color:var(--bg);background-image:var(--pattern,none);background-size:var(--pattern-size,auto);color:var(--ink);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head);line-height:1.2;margin:0 0 .4em;font-weight:700}
h1{font-size:clamp(28px,6vw,40px)} h2{font-size:22px} p{margin:0 0 1em} small,.muted{color:var(--muted)}
.card{background:var(--paper);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-family:var(--head);font-size:16px;padding:12px 20px;border:var(--bw) solid var(--line);border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow);cursor:pointer;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:var(--shadow-press)}
.btn.ghost{background:var(--paper);color:var(--ink)}
.chip{display:inline-block;padding:5px 12px;border:var(--bw) solid var(--line);border-radius:var(--r-pill);background:var(--accent-2);color:var(--accent-2-ink);font-size:13px;margin:0 6px 6px 0}
.input{width:100%;box-sizing:border-box;font:inherit;padding:12px 14px;border:var(--bw) solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink)}
.input:focus{outline:2px solid var(--accent);outline-offset:1px}
.ok{color:var(--ok)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---- 레이아웃: <html data-layout="stack|bento|split">. 프리셋(겉모습)과 따로 고른다 ---- */
/* 벤토: 칸 크기가 제각각인 타일 격자. 폰은 2열, 넓은 화면은 4열. 타일 크기는 .w2 .w4 .h2 로 */
.bento{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(110px,auto);gap:10px}
.bento>*{margin:0!important;min-width:0}
.bento .w2{grid-column:span 2}.bento .h2{grid-row:span 2}
.tile{background:var(--paper);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.tile.accent{background:var(--accent);color:var(--accent-ink)}
.tile.soft{background:var(--accent-2);color:var(--accent-2-ink)}
.tile .big{font-family:var(--head);font-size:clamp(34px,9vw,56px);line-height:1}
.tile .label{font-size:13px;opacity:.75}
@media(min-width:720px){.bento{grid-template-columns:repeat(4,1fr)}.bento .w4{grid-column:span 4}}
/* 좌우 분할: 왼쪽 고정 소개, 오른쪽 목록. 폰에서는 위아래로 쌓인다 */
.split{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:720px){.split{grid-template-columns:minmax(240px,1fr) 2fr;align-items:start}.split>:first-child{position:sticky;top:16px}}
html:not([data-layout="bento"]) .only-bento{display:none}