/* 마이펫툰 공개 화면 디자인(mpt.design, 시안 1 「따뜻한 크림」). 첫 화면·요금제·약관이 style.css 다음에 읽는다. */
:root {
  --bg: #fbf4ea;
  --surface: #ffffff;
  --ink: #2b2420;
  --muted: #7a6a5c;
  --line: #eadccd;
  --accent: #ef7a52;
  --accent-d: #c95a35;
  --accent-ink: #ffffff;
  --soft: #ffe6d8;
  --mint: #cfeee2;
  --butter: #fff1c9;
  --radius: 22px;
  --head: "Fredoka", "Jua", system-ui, sans-serif;
  color-scheme: light;
  font-family: "Nunito", "Gowun Dodum", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
:root:lang(ko) { --head: "Jua", system-ui, sans-serif; font-family: "Noto Sans KR", "Nunito", system-ui, sans-serif; }
/* 공개 화면은 크림 바탕 한 벌(어두운 모드에서도 같은 색) */
@media (prefers-color-scheme: dark) {
  :root { --bg: #fbf4ea; --surface: #fff; --ink: #2b2420; --muted: #7a6a5c; --line: #eadccd; --accent: #ef7a52; --accent-ink: #fff; --soft: #ffe6d8; }
}
body { background: var(--bg); color: var(--ink); }
/* 그림 태그의 width·height는 자리 잡기용(늦게 뜰 때 밀림 방지). 실제 높이는 비율로 정한다 */
.polaroid img, .sticker img, .how .card img, .logo img { height: auto; }
.wrap { max-width: 1180px; padding: 0 24px; }
h1, h2, h3, .head { font-family: var(--head); font-weight: 500; letter-spacing: -0.01em; }
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) .head { font-weight: 400; }

/* 머리줄 */
.site-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--head); font-size: 26px; color: var(--ink); }
.logo img { width: 38px; height: 38px; border-radius: 11px; }
.site-top nav { display: flex; align-items: center; gap: 22px; color: var(--muted); font-weight: 700; }
.site-top nav a:not(.jelly) { text-decoration: none; }
.site-top nav a:not(.jelly):hover { color: var(--ink); }

/* 젤리 버튼: 통통한 알약 + 아래 두꺼운 그림자, 누르면 쏙 들어간다 */
.jelly { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--head); font-size: 21px; font-weight: 500;
  padding: 16px 30px 14px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; line-height: 1.2;
  background: var(--accent); color: #fff; box-shadow: 0 6px 0 var(--accent-d), 0 14px 22px -10px rgba(201, 90, 53, .6);
  transition: transform .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent; }
:lang(ko) .jelly { font-weight: 400; }
.jelly:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 0 var(--accent-d), 0 18px 26px -12px rgba(201, 90, 53, .6); }
.jelly:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--accent-d); }
.jelly.sub { background: #fff; color: var(--ink); box-shadow: 0 6px 0 #e6d6c5; }
.jelly.sub:hover { box-shadow: 0 8px 0 #e6d6c5; }
.jelly.sub:active { box-shadow: 0 1px 0 #e6d6c5; }
.jelly.dark { background: var(--ink); color: #fff; box-shadow: 0 4px 0 #120f0d; }
.jelly.dark:active { box-shadow: 0 1px 0 #120f0d; transform: translateY(3px); }
.jelly.sm { font-size: 16px; padding: 10px 18px 9px; }
.jelly img { width: 1.25em; height: 1.25em; }
.jelly:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .jelly, .jelly:hover, .jelly:active { transition: none; transform: none; } }

/* 히어로 */
.hero2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding: 36px 0 70px; }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px;
  font-size: 15px; color: var(--muted); font-weight: 700; }
.hero2 h1 { font-size: clamp(40px, 5.4vw, 70px); line-height: 1.08; margin: 18px 0; }
.hero2 h1 em { font-style: normal; color: var(--accent); }
.hero2 .lead { font-size: 20px; color: var(--muted); line-height: 1.6; max-width: 30em; margin: 0; }
.btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.trust { margin: 22px 0 0; font-size: 15px; color: var(--muted); }
.trust b { color: var(--ink); }
.stage { position: relative; height: 600px; }
.phone { position: absolute; right: 24px; top: 0; width: 330px; background: #fff; border-radius: 34px; padding: 14px 14px 12px;
  box-shadow: 0 30px 60px -25px rgba(60, 40, 20, .35); }
.phone .bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; font-size: 13px; font-weight: 800; font-family: "Nunito", sans-serif; }
.phone .bar i { width: 26px; height: 26px; border-radius: 50%; background: url(/img/ex/bori-cover.webp) center 30% / 180% no-repeat; border: 2px solid #ee2a7b; }
.slides { position: relative; aspect-ratio: 4 / 5; }
.slides .panel { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.slides .panel.on { opacity: 1; }
.dots { display: flex; gap: 5px; justify-content: center; padding: 10px 0 2px; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: #d9cfc4; transition: background .3s; }
.dots span.on { background: #3897f0; }
.polaroid { position: absolute; left: 0; top: 70px; width: 200px; background: #fff; padding: 10px 10px 36px; border-radius: 6px; transform: rotate(-7deg);
  box-shadow: 0 18px 40px -18px rgba(60, 40, 20, .4); }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.polaroid small { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 13px; color: var(--muted); }
.sticker { position: absolute; left: 40px; top: 395px; width: 200px; background: var(--mint); border-radius: 22px; padding: 10px; transform: rotate(5deg);
  box-shadow: 0 18px 40px -18px rgba(60, 40, 20, .35); }
.sticker img { width: 100%; border-radius: 14px; background: #fff; }
.sticker small { display: block; text-align: center; font-size: 13px; color: #3d6b5a; padding-top: 6px; font-weight: 700; }
.arrow { position: absolute; left: 70px; top: 342px; font-family: var(--head); color: var(--accent); font-size: 20px; transform: rotate(-8deg); }

/* 만화 칸(예시): 그림 위에 해설 상자·말풍선을 화면 글자로 얹는다(내려받기 그림과 같은 배치) */
.panel { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: #f3ece3; }
.panel > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.panel .cap { position: absolute; top: 5%; left: 6%; right: 6%; background: #fff; border: 2px solid #2b2420; border-radius: 6px; padding: 5px 9px;
  font-weight: 800; font-size: clamp(11px, 1.05vw, 14px); line-height: 1.3; color: #2b2420; text-align: center; }
.panel .title { position: absolute; top: 6%; left: 9%; right: 9%; text-align: center; font-family: var(--head); color: #2b2420; background: #fff;
  border: 2.5px solid #2b2420; border-radius: 14px; padding: 6px 10px; font-size: clamp(15px, 1.7vw, 23px); line-height: 1.2; }
.panel .bub { position: absolute; background: #fff; border: 2px solid #2b2420; border-radius: 999px; padding: 4px 11px; font-weight: 800;
  font-size: clamp(10px, 1vw, 13px); color: #2b2420; white-space: nowrap; }
.panel .bub::after { content: ""; position: absolute; bottom: -7px; left: 20px; width: 11px; height: 11px; background: #fff;
  border-right: 2px solid #2b2420; border-bottom: 2px solid #2b2420; transform: rotate(45deg); }
.panel .bub.r::after { left: auto; right: 20px; }
.panel .ai { position: absolute; right: 8px; bottom: 8px; font-size: 10px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .45); padding: 2px 6px;
  border-radius: 6px; font-family: "Nunito", sans-serif; }
.phone .panel .cap { font-size: 12px; } .phone .panel .bub { font-size: 11.5px; } .phone .panel .title { font-size: 21px; }

/* 구역 */
.sec { padding: 56px 0; }
.sec h2 { font-size: clamp(30px, 3.6vw, 42px); text-align: center; margin: 0 0 10px; line-height: 1.2; }
.sec .sub { text-align: center; color: var(--muted); margin: 0 auto 34px; font-size: 18px; max-width: 36em; }
.strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.strip .panel { box-shadow: 0 16px 30px -20px rgba(60, 40, 20, .45); }
.tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 0 24px; }
.tabs button { font: inherit; font-weight: 800; font-size: 16px; padding: 10px 18px 9px; border-radius: 999px; border: 0; cursor: pointer;
  background: #fff; color: var(--muted); box-shadow: 0 4px 0 #e6d6c5; transition: transform .12s, box-shadow .12s; }
.tabs button.on { background: var(--ink); color: #fff; box-shadow: 0 4px 0 #120f0d; }
.tabs button:active { transform: translateY(3px); box-shadow: 0 1px 0 #e6d6c5; }
.strip[hidden] { display: none; }
.ex-note { text-align: center; color: var(--muted); font-size: 14px; margin: 18px 0 0; }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.how .card { border-radius: var(--radius); padding: 18px 18px 22px; border: 1px solid var(--line); }
.how .card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; margin-bottom: 14px; background: var(--butter); }
.how .card img.contain { object-fit: contain; }
.how .num { width: 30px; height: 30px; line-height: 30px; font-family: var(--head); font-size: 17px; margin: 0 8px 0 0; vertical-align: 2px; background: var(--soft); }
.how h3 { display: inline; font-size: 22px; }
.how p { margin: 10px 0 0; }
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.feat b { display: block; font-family: var(--head); font-size: 20px; font-weight: 500; margin-bottom: 6px; }
:lang(ko) .feat b { font-weight: 400; }
.feat span { color: var(--muted); }
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; }
.faq summary { cursor: pointer; font-weight: 800; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--head); color: var(--accent); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 12px 0 0; color: var(--muted); }
.band { margin: 30px 0 70px; background: var(--accent); color: #fff; border-radius: 34px; padding: 46px 30px; text-align: center; }
.band h2 { color: #fff; margin: 0 0 10px; font-size: clamp(28px, 3.4vw, 40px); }
.band p { margin: 0 0 26px; opacity: .92; font-size: 18px; }
.band .jelly { background: #fff; color: var(--ink); box-shadow: 0 6px 0 var(--accent-d); }
footer.biz { border-top: 1px solid var(--line); }

/* 요금제·약관 공통 손질 */
.hero.slim h1 { font-size: clamp(36px, 4.6vw, 56px); }
.plans .card { border-radius: var(--radius); }
.plans .card.best { border: 2px solid var(--accent); box-shadow: 0 20px 40px -26px rgba(201, 90, 53, .55); }
.plans .btn { font-family: var(--head); font-weight: 500; font-size: 18px; border-radius: 999px; padding: 14px 24px 12px;
  box-shadow: 0 5px 0 var(--accent-d); transition: transform .12s, box-shadow .12s; }
:lang(ko) .plans .btn { font-weight: 400; }
.plans .btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--accent-d); }
.plans .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent-d); }
.plans .card.best .btn { background: var(--ink); box-shadow: 0 5px 0 #120f0d; }
.toggle button.on { box-shadow: 0 3px 0 var(--accent-d); }
.toggle { border-radius: 999px; }

/* 휴대폰 */
@media (max-width: 960px) {
  .hero2 { grid-template-columns: 1fr; gap: 10px; padding-top: 16px; }
  .stage { height: 520px; max-width: 420px; width: 100%; margin: 0 auto; }
  .phone { width: 260px; right: 0; }
  .polaroid { width: 150px; top: 40px; }
  .sticker { width: 160px; top: 330px; left: 6px; }
  .arrow { left: 40px; top: 268px; font-size: 17px; }
  .strip { grid-template-columns: repeat(5, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .strip .panel { scroll-snap-align: center; }
  .how, .feat { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .site-top nav { gap: 14px; font-size: 15px; }
  .site-top nav .hide-sm { display: none; }
  .logo { font-size: 22px; } .logo img { width: 32px; height: 32px; }
  .hero2 h1 { font-size: 40px; }
  .hero2 .lead { font-size: 17px; }
  .jelly { font-size: 19px; padding: 15px 24px 13px; }
  .jelly.sm { font-size: 15px; padding: 9px 14px 8px; }
  .btns .jelly { flex: 1 1 100%; }
  .stage { height: 440px; }
  .phone { width: 220px; padding: 10px; border-radius: 26px; }
  .polaroid { width: 125px; }
  .sticker { width: 135px; top: 285px; }
  .arrow { left: 28px; top: 238px; }
  .phone .panel .cap { font-size: 10px; } .phone .panel .bub { font-size: 9.5px; } .phone .panel .title { font-size: 16px; }
  .band { border-radius: 24px; padding: 34px 20px; }
}

/* ───── 귀엽고 깔끔하게(2026-11-03 사용자 「귀엽고 깔끔하면좋겠는데」) ───── */
:root { --butter: #fff3d1; --mint: #dff4ea; --peach: #ffeadd; --sky: #e3f0fb; --pink: #ffe1e8; }
body { overflow-x: hidden; }
.hero2 h1 em { position: relative; white-space: nowrap; z-index: 0; }
.hero2 h1 em::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -.04em; height: .24em; z-index: -1; border-radius: 999px; background: #ffd9c4; }
.stage { isolation: isolate; }
.stage::before { content: ""; position: absolute; inset: 40px -10px 20px 40px; border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%;
  background: radial-gradient(circle at 30% 30%, #ffeee4, #ffdccb 60%, #ffcdb6); z-index: -1; }
.eyebrow { border: 0; background: #fff; box-shadow: 0 4px 0 #f0e2d2; }

/* 파스텔 구역: 바탕을 화면 끝까지 칠하고 위아래를 둥근 물결로 */
.tint { padding: 76px calc(50vw - 50%) 70px; margin: 34px calc(50% - 50vw); background: var(--tint); }
.tint::before, .tint::after { content: ""; position: absolute; left: 0; right: 0; height: 34px;
  background: var(--tint); -webkit-mask: radial-gradient(22px 18px at 50% 100%, #000 98%, transparent) 0 0 / 44px 34px repeat-x;
  mask: radial-gradient(22px 18px at 50% 100%, #000 98%, transparent) 0 0 / 44px 34px repeat-x; }
.tint::before { top: -33px; }
.tint::after { bottom: -33px; transform: scaleY(-1); }
.t-butter { --tint: var(--butter); } .t-mint { --tint: var(--mint); } .t-peach { --tint: var(--peach); } .t-sky { --tint: var(--sky); }

/* 말랑한 카드: 테두리 없이 흰 바탕 + 부드러운 그림자, 더 둥글게 */
.how .card, .feat > div, .faq details { border: 0; border-radius: 28px; background: #fff; box-shadow: 0 8px 0 rgba(43, 36, 32, .04), 0 16px 34px -22px rgba(60, 40, 20, .35); }
.how .card { padding: 14px 14px 22px; }
.how .card img { border-radius: 20px; }
.how .num { background: var(--accent); color: #fff; }
.feat > div { text-align: center; padding: 24px 22px 26px; }
.feat .ic { width: 78px; height: 78px; margin: 0 auto 10px; display: block; }
.feat b { font-size: 21px; }
.faq details { padding: 18px 24px; }
.faq summary::after { content: "+"; width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 50%; background: var(--soft); font-size: 20px; }
.strip .panel { border-radius: 22px; box-shadow: 0 8px 0 rgba(43, 36, 32, .05), 0 18px 30px -20px rgba(60, 40, 20, .45); }
.strip .panel:nth-child(odd) { transform: rotate(-1.2deg); }
.strip .panel:nth-child(even) { transform: rotate(1.2deg) translateY(6px); }
.tabs button { box-shadow: 0 4px 0 #ead9c4; }

/* 스티커 장식(정식 그림 에셋, 글자 없음). 둥실둥실 */
.sec, .hero2 { position: relative; }
.deco { position: absolute; width: 54px; height: 54px; pointer-events: none; z-index: 2; transform: rotate(var(--r, 0deg)); animation: bob 4.5s ease-in-out infinite; }
.deco.s { width: 38px; height: 38px; }
.deco.l { width: 72px; height: 72px; }
.deco:nth-of-type(2n) { animation-delay: -1.6s; }
.deco:nth-of-type(3n) { animation-delay: -3s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--r, 0deg)); } }
@media (prefers-reduced-motion: reduce) { .deco { animation: none; } }
.peek { position: absolute; height: auto; pointer-events: none; z-index: 1; }
.band { position: relative; margin-top: 110px; border-radius: 40px; box-shadow: 0 10px 0 var(--accent-d); }
.band .peek { top: -118px; right: 8%; width: 190px; }
.faq-sec .peek { top: -24px; left: calc(50% - 470px); width: 150px; }
@media (max-width: 960px) {
  .strip .panel:nth-child(n) { transform: none; }
  .deco.hide-m { display: none; }
  .band .peek { top: -84px; width: 140px; right: 6%; }
  .faq-sec .peek { display: none; }
}

.eyebrow img { width: 20px; height: 20px; }
.tabs button { display: inline-flex; align-items: center; gap: 8px; }
.tabs button img { width: 34px; height: auto; margin: -6px 0 -4px; }
@media (max-width: 960px) { .hero2 > .hero-paw { left: auto !important; right: 2px; top: 4px !important; width: 44px; height: 44px; } }

/* 글자 대비(교차 검수 1차, WCAG 2.2 AA): 코랄 바탕 위 글자는 진한 갈색, 코랄 글자는 더 진한 코랄, 마지막 띠는 깊은 코랄 */
:root { --accent-text: #b8461f; --band: #c24d26; }
.jelly { color: var(--ink); }
.jelly.dark { color: #fff; }
.hero2 h1 em { color: #d65a30; }
.arrow { color: var(--accent-text); }
.how .num { color: var(--ink); }
.plans .btn { color: var(--ink); }
.plans .card.best .btn { color: #fff; }
.toggle button.on { color: var(--ink); }
.band { background: var(--band); box-shadow: 0 10px 0 #9c3a1a; }
.band .jelly { box-shadow: 0 6px 0 #9c3a1a; }
/* AI 생성 예시 표시: 칸 밖의 예시 그림(사진·캐릭터·이용 방법)에도 단다 */
.ai { position: absolute; right: 8px; bottom: 8px; font-size: 10px; font-weight: 800; color: #fff; background: rgba(0, 0, 0, .66); padding: 2px 6px;
  border-radius: 6px; font-family: "Nunito", "Noto Sans KR", sans-serif; line-height: 1.4; z-index: 3; }
.panel .ai { background: rgba(0, 0, 0, .66); }
.polaroid .ai { right: 16px; bottom: 44px; }
.sticker .ai { right: 16px; bottom: 34px; }
.how .card { position: relative; }
.how .card .ai { right: 22px; bottom: auto; top: 22px; }

/* 다국어(mpt.i18n): 일본어 글꼴, 네 언어 메뉴 */
:root:lang(ja) { --head: "M PLUS Rounded 1c", system-ui, sans-serif; font-family: "Noto Sans JP", "Nunito", system-ui, sans-serif; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .head, :lang(ja) .jelly, :lang(ja) .feat b { font-weight: 800; }
:lang(ja) { line-break: strict; word-break: normal; }
/* 그 밖의 언어 글꼴: 라틴 문자 언어는 영어와 같은 Fredoka·Nunito. 베트남어 제목은 Fredoka에 글자가 없어 Baloo 2,
   태국어·중국어는 그 문자 글꼴(tools/i18n/langs.json 언어 목록, 각 쪽의 글꼴 줄과 같다) */
:root:lang(vi) { --head: "Baloo 2", "Nunito", system-ui, sans-serif; }
:root:lang(th) { --head: "Mitr", system-ui, sans-serif; font-family: "Noto Sans Thai", "Nunito", system-ui, sans-serif; }
:root:lang(zh-Hant) { --head: "Noto Sans TC", system-ui, sans-serif; font-family: "Noto Sans TC", "Nunito", system-ui, sans-serif; }
:root:lang(zh-Hans) { --head: "Noto Sans SC", system-ui, sans-serif; font-family: "Noto Sans SC", "Nunito", system-ui, sans-serif; }
:lang(zh-Hant) h1, :lang(zh-Hant) h2, :lang(zh-Hant) .jelly, :lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) .jelly, :lang(vi) h1, :lang(vi) h2 { font-weight: 800; }
:lang(th) h1, :lang(th) h2, :lang(th) .jelly { font-weight: 500; line-height: 1.35; }
:lang(th) { word-break: normal; line-break: auto; }
/* 일본어 제목은 구절 단위로 줄바꿈(지원 안 하는 브라우저는 크기를 줄여 한 줄에 담는다) */
:lang(ja) h1, :lang(ja) h2, :lang(ja) .panel .title, :lang(ja) .panel .cap, :lang(ja) .bub { word-break: auto-phrase; }
:lang(ja) .hero2 h1 { font-size: clamp(32px, 3.5vw, 50px); }
/* 사진 카드가 휴대폰 그림 아래에 깔리지 않게(언어마다 설명 길이가 다르다) */
@media (min-width: 961px) { .phone { right: 0; width: 316px; } .polaroid small { padding: 0 8px; line-height: 1.25; } }
.langs { position: relative; }
.langs summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: #fff; box-shadow: 0 3px 0 #f0e2d2; color: var(--ink); font-weight: 800; font-size: 15px; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.langs[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.langs summary:focus-visible, .langs-menu a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.langs-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 150px; display: grid; grid-template-columns: repeat(2, minmax(130px, auto)); gap: 2px; padding: 8px; border-radius: 18px;
  max-height: 70vh; overflow-y: auto; max-width: calc(100vw - 32px);
  background: #fff; box-shadow: 0 8px 0 rgba(43, 36, 32, .05), 0 18px 34px -16px rgba(60, 40, 20, .45); }
.langs-menu a { text-decoration: none; color: var(--ink); font-weight: 700; padding: 8px 12px; border-radius: 12px; }
.langs-menu a:hover { background: var(--soft); }
.langs-menu a[aria-current], .site-top nav .langs-menu a[aria-current]:hover { background: var(--ink); color: #fff; }
.lang-short { display: none; }
@media (max-width: 560px) {
  .lang-full { display: none; } .lang-short { display: inline; }
  .langs summary { padding: 6px 10px; font-size: 14px; }
  .site-top { gap: 8px; } .site-top nav { gap: 10px; }
}
@media (max-width: 400px) {
  .logo { font-size: 18px; gap: 6px; } .logo img { width: 28px; height: 28px; }
  .site-top nav { gap: 8px; font-size: 14px; }
  .site-top .jelly.sm { padding: 8px 11px 7px; font-size: 14px; }
}
@media (max-width: 350px) { .site-top { flex-wrap: wrap; row-gap: 10px; } .site-top nav { width: 100%; justify-content: flex-end; } }