→ 화면에 들어오면 shared.js 가 .is-in 을 붙인다
방향: data-reveal="left" | "right" | "fade", 지연: style="--reveal-delay: .2s"
transform 이 아니라 translate 로 움직이므로 기울어진 우표·엽서(rotate)에 붙여도 기울기가 남는다.
자체 transition 이 있는 요소(버튼 등)에는 직접 붙이지 말고 감싸는 요소에 붙인다. */
[data-reveal] {
opacity: 0;
translate: 0 28px;
transition: opacity 0.7s var(--ease-out) var(--reveal-delay, 0s), translate 0.7s var(--ease-out) var(--reveal-delay, 0s);
/* 스크립트가 끝내 실행되지 않아도 3.5초 뒤에는 내용이 보이게 하는 안전장치 */
animation: reveal-failsafe 0.01s 3.5s forwards;
}
[data-reveal="left"] {
translate: -36px 0;
}
[data-reveal="right"] {
translate: 36px 0;
}
[data-reveal="fade"] {
translate: none;
}
html.reveal-on [data-reveal] {
animation: none;
}
/* 키보드 포커스가 들어오면 아직 떠오르지 않은 요소도 바로 보인다 */
[data-reveal].is-in,
[data-reveal]:focus-within {
opacity: 1;
translate: none;
}
@keyframes reveal-failsafe {
to {
opacity: 1;
translate: none;
}
}
@media (prefers-reduced-motion: reduce) {
[data-reveal] {
opacity: 1 !important;
translate: none !important;
transition: none;
animation: none;
}
}
/* 안내 쪽지 — 데이터·스크립트를 불러오지 못했을 때 shared.js 의 showNote 가 섹션에 붙인다(지도 안의 안내도 같은 모양) */
.placeholder-note {
max-width: min(100%, 34rem);
margin-inline: auto;
padding: var(--space-3) var(--space-5);
border: 1.5px dashed currentColor;
border-radius: var(--radius-hand);
color: var(--surface-soft);
font-family: var(--font-hand);
font-size: calc(var(--fs-m) * var(--hand-scale));
line-height: 1.3;
text-align: center;
}
/* 파일을 더블클릭(file://)해서 열면 모듈·데이터를 읽지 못한다 → 안내 띠 */
html.is-file body::before {
content: "이 페이지는 로컬 서버로 열어야 제대로 보여요. README의 '실행 방법'을 확인해 주세요.";
position: sticky;
top: 0;
z-index: var(--z-tooltip);
display: block;
padding: var(--space-3) var(--gutter);
background-color: var(--tangerine-100);
border-bottom: 2px solid var(--color-point);
color: var(--basalt-900);
font-weight: 700;
text-align: center;
}
/* 5. 공용 컴포넌트 ---------------------------------------------------------- */
/* 5-1. 버튼 -----------------------------------------------------------------
기본
기본 = 감귤 채움 / --ghost = 테두리만(주변 글자색을 따라감) / --ink = 바다색 / --s = 작게
테두리·그림자 색은 바탕을 따른다(종이 위 = 현무암색, 어두운 바탕 위 = 종이색) */
.btn {
--btn-bg: var(--color-point);
--btn-bg-hover: var(--tangerine-300);
--btn-fg: var(--basalt-900);
--btn-line: var(--surface-edge);
--btn-drop: 3px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 3rem;
padding: 0.6em 1.5em 0.66em;
border: 2px solid var(--btn-line);
border-radius: var(--radius-hand);
background-color: var(--btn-bg);
box-shadow: 2px var(--btn-drop) 0 0 var(--btn-line);
color: var(--btn-fg);
font-family: var(--font-body);
font-size: var(--fs-base);
font-weight: 700;
line-height: 1.25;
text-align: center;
text-decoration: none;
cursor: pointer;
-webkit-user-select: none; /* Safari */
user-select: none;
-webkit-tap-highlight-color: transparent;
transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background-color 0.18s;
}
@media (hover: hover) {
.btn:hover {
background-color: var(--btn-bg-hover);
box-shadow: 4px calc(var(--btn-drop) + 4px) 0 0 var(--btn-line);
transform: translate(-1px, -3px) rotate(-0.6deg);
}
}
.btn:active {
box-shadow: 0 0 0 0 var(--btn-line);
transform: translate(2px, var(--btn-drop));
transition-duration: 0.06s;
}
/* 누를 수 없는 버튼은 hover 에도 반응하지 않는다 */
.btn:disabled,
.btn[aria-disabled="true"] {
background-color: var(--btn-bg);
box-shadow: none;
opacity: 0.5;
transform: none;
cursor: not-allowed;
}
.btn--ghost {
--btn-bg: transparent;
--btn-bg-hover: var(--surface-hover);
--btn-fg: currentColor;
--btn-line: currentColor;
box-shadow: none;
}
.btn--ink {
--btn-bg: var(--sea-800);
--btn-bg-hover: var(--sea-600);
--btn-fg: var(--paper-50);
}
.btn--s {
--btn-drop: 2px;
min-height: 2.5rem;
padding: 0.38em 1.05em 0.44em;
border-width: 1.5px;
font-size: var(--fs-s);
}
@media (prefers-reduced-motion: reduce) {
.btn,
.btn:hover,
.btn:active {
transform: none;
transition: background-color 0.18s;
}
}
/* 5-2. 우표 -----------------------------------------------------------------
(SVG 또는 글자)
--stamp-w 로 크기, --stamp-tilt 로 기울기. 톱니가 딱 맞도록 실제 폭은 1~4px 달라질 수 있다.
그림은 shared.js 의 stampSVG('shop' | 'oreum' | 'tangerine' | 'wave' | 'letter') */
.stamp {
--stamp-w: 88px;
--stamp-cols: 10; /* 가로 톱니 수 */
--stamp-rows: 12; /* 세로 톱니 수 (10:12 = 5:6 비율) */
--stamp-paper: var(--paper-50);
--stamp-bg: var(--tangerine-500);
--stamp-fg: var(--basalt-900);
--stamp-tilt: 0deg;
--perf: calc(var(--stamp-w) / var(--stamp-cols)); /* 톱니 하나의 간격 */
position: relative;
display: inline-grid;
flex: none;
place-content: center;
justify-items: center;
gap: calc(var(--perf) * 0.2);
width: calc(var(--perf) * var(--stamp-cols));
height: calc(var(--perf) * var(--stamp-rows));
padding: calc(var(--perf) * 1.5);
color: var(--stamp-fg);
line-height: 1;
vertical-align: middle;
transform: rotate(var(--stamp-tilt));
/* 톱니 모양을 따라가는 그림자(box-shadow 는 마스크에 잘린다) */
filter: drop-shadow(0 1px 1px rgb(var(--ink-rgb) / 0.3)) drop-shadow(0 3px 5px rgb(var(--ink-rgb) / 0.14));
}
/* 톱니 간격을 정수 px 로 맞춰 네 변의 구멍이 어긋나지 않게 한다 */
@supports (width: round(nearest, 10px, 1px)) {
.stamp {
--perf: round(nearest, calc(var(--stamp-w) / var(--stamp-cols)), 1px);
}
}
/* 톱니 종이: 안쪽 사각형 + 가장자리에 구멍이 뚫린 격자를 합친 마스크 */
.stamp::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background-color: var(--stamp-paper);
background-image: var(--tex-paper);
-webkit-mask:
linear-gradient(#000 0 0) center / calc(100% - var(--perf)) calc(100% - var(--perf)) no-repeat,
radial-gradient(circle, transparent calc(var(--perf) * 0.3), #000 calc(var(--perf) * 0.3 + 0.6px)) calc(var(--perf) / -2) calc(var(--perf) / -2) / var(--perf) var(--perf);
mask:
linear-gradient(#000 0 0) center / calc(100% - var(--perf)) calc(100% - var(--perf)) no-repeat,
radial-gradient(circle, transparent calc(var(--perf) * 0.3), #000 calc(var(--perf) * 0.3 + 0.6px)) calc(var(--perf) / -2) calc(var(--perf) / -2) / var(--perf) var(--perf);
}
/* 색 판 + 안쪽 가는 테두리 */
.stamp::after {
content: "";
position: absolute;
inset: calc(var(--perf) * 0.9);
z-index: -1;
background-color: var(--stamp-bg);
box-shadow: inset 0 0 0 calc(var(--perf) * 0.22) var(--stamp-bg), inset 0 0 0 calc(var(--perf) * 0.22 + 1px) currentColor;
}
.stamp > svg {
display: block;
width: 100%;
height: auto;
min-height: 0;
}
.stamp__text {
font-size: calc(var(--perf) * 1.15);
font-weight: 800;
letter-spacing: 0.08em;
white-space: nowrap;
}
.stamp--tangerine {
--stamp-bg: var(--tangerine-500);
--stamp-fg: var(--basalt-900);
}
.stamp--sea {
--stamp-bg: var(--sea-600);
--stamp-fg: var(--paper-50);
}
.stamp--basalt {
--stamp-bg: var(--basalt-700);
--stamp-fg: var(--paper-100);
}
/* 5-3. 소인 -----------------------------------------------------------------
(shared.js 의 postmarkSVG() 결과)
--postmark-w 로 크기, --postmark-tilt 로 기울기 */
.postmark {
--postmark-w: 200px;
--postmark-tilt: -8deg;
display: inline-block;
width: var(--postmark-w);
max-width: 100%;
color: var(--surface-ink);
opacity: 0.78;
transform: rotate(var(--postmark-tilt));
mix-blend-mode: var(--postmark-blend);
pointer-events: none;
-webkit-user-select: none; /* Safari */
user-select: none;
}
.postmark svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
/* 5-4. 항공우편 띠 -----------------------------------------------------------
…
(테두리)
(가로 띠)
--airmail-w 는 단위 없이 숫자만(px) */
.airmail,
.airmail-strip {
--airmail-w: 12;
--airmail-stripe: 14px;
--airmail-pattern: repeating-linear-gradient(
-45deg,
var(--tangerine-500) 0 var(--airmail-stripe),
var(--paper-50) 0 calc(var(--airmail-stripe) * 2),
var(--sea-600) 0 calc(var(--airmail-stripe) * 3),
var(--paper-50) 0 calc(var(--airmail-stripe) * 4)
);
}
.airmail {
border: calc(var(--airmail-w) * 1px) solid transparent;
border-image: var(--airmail-pattern) var(--airmail-w);
}
.airmail-strip {
height: calc(var(--airmail-w) * 1px);
background-image: var(--airmail-pattern);
}
/* 5-5. 주소 줄(괘선) ---------------------------------------------------------
받는 사람
주소 한 줄
— 줄마다 밑줄이 그어진다 */
.ruled {
--ruled-lh: 1.9;
background-image: linear-gradient(to top, var(--color-line) 0 1px, transparent 1px);
background-position: 0 -0.3em;
background-size: 100% calc(1em * var(--ruled-lh));
font-family: var(--font-hand-2);
font-size: calc(var(--fs-base) * var(--hand-scale));
line-height: var(--ruled-lh);
}
/* 5-6. 마스킹테이프 -----------------------------------------------------------
— 부모에 position: relative 를 주고 top/left 로 놓는다
--tape-w, --tape-h, --tape-tilt, --tape-color 로 조절 */
.tape {
--tape-w: 104px;
--tape-h: 30px;
--tape-tilt: -4deg;
--tape-color: var(--tangerine-300);
position: absolute;
width: var(--tape-w);
height: var(--tape-h);
background-color: var(--tape-color);
background-image:
linear-gradient(to bottom, rgb(var(--paper-rgb) / 0.4), transparent 30%, transparent 70%, rgb(var(--ink-rgb) / 0.08)),
repeating-linear-gradient(90deg, transparent 0 5px, rgb(var(--paper-rgb) / 0.22) 5px 6px);
opacity: 0.78;
transform: rotate(var(--tape-tilt));
/* 손으로 뜯은 듯한 양 끝 */
clip-path: polygon(0 0, 3% 14%, 0 28%, 3% 42%, 0 56%, 3% 70%, 0 84%, 2% 100%, 98% 100%, 100% 86%, 97% 72%, 100% 58%, 97% 44%, 100% 30%, 97% 16%, 100% 0);
pointer-events: none;
}
.tape--sea {
--tape-color: var(--sea-200);
}
.tape--paper {
--tape-color: var(--paper-300);
}
/* 5-7. 제목 · 라벨 ----------------------------------------------------------- */
.section-title {
font-family: var(--font-display);
font-size: var(--title-size); /* 크기 · 자간 · 줄 간격 = css/theme.css '0.' 의 --title-… */
font-weight: var(--font-display-weight); /* 프리텐다드 굵게(800) — css/base.css */
line-height: var(--title-lh);
letter-spacing: -0.01em;
}
/* 작은 라벨 — 예: No.04 · Map */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.7em;
color: var(--surface-ink);
font-size: var(--fs-xs);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
flex: none;
width: 1.8em;
height: 2px;
border-radius: 2px;
background-color: var(--color-point);
}
/* 5-8. 웹진 로고(기사 헤더 · 푸터의 이름 자리에 쓰는 그림) + 기사 페이지 헤더 -----
✏️ 교체: 로고 높이는 --brand-logo-h. 로고 대신 글자로 쓰려면 HTML 에서
![]()
를 지우고
그 자리에 웹진 이름을 적으면 된다(.site-header__brand · .site-footer__name 의 글꼴 · 크기가 그대로 적용된다) */
.brand-logo {
display: block;
width: auto;
max-width: none;
height: var(--brand-logo-h, 2.4rem);
}
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
border-bottom: 1px solid var(--color-line);
background-color: var(--color-bg);
background-image: var(--tex-paper);
}
/* 위에 붙어 있는 헤더에 앵커·포커스 대상이 가려지지 않게. 헤더가 있는 페이지의 에만 적용한다
(:has() 로 알아서 찾을 수도 있지만 그 선택자를 모르는 브라우저가 아직 있다) */
html.has-header {
scroll-padding-top: 4.5rem;
}
.site-header::before {
content: "";
display: block;
height: 5px;
background-image: repeating-linear-gradient(-45deg, var(--tangerine-500) 0 10px, var(--paper-50) 0 20px, var(--sea-600) 0 30px, var(--paper-50) 0 40px);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: 3.5rem;
}
.site-header__brand {
--brand-logo-h: 2.4rem; /* ✏️ 교체: 헤더의 로고 높이 */
display: inline-flex;
align-items: center;
min-height: 2.75rem;
color: var(--color-text);
font-family: var(--font-display);
font-size: var(--fs-l);
line-height: 1;
text-decoration: none;
}
.site-header__brand:hover {
color: var(--color-point-strong);
}
.site-header__back {
display: inline-flex;
align-items: center;
gap: 0.4em;
min-height: 2.75rem;
color: var(--color-ink);
font-size: var(--fs-s);
font-weight: 700;
text-decoration: none;
}
.site-header__back::before {
content: "←";
content: "←" / ""; /* 스크린리더는 화살표를 읽지 않는다(윗줄은 이 문법을 모르는 브라우저용) */
transition: transform var(--dur-fast) var(--ease-out);
}
.site-header__back:hover {
text-decoration: underline;
text-decoration-color: var(--color-point);
text-decoration-thickness: 2px;
}
.site-header__back:hover::before {
transform: translateX(-4px);
}
/* 5-9. 푸터 ------------------------------------------------------------------ */
.site-footer {
background-color: var(--color-dark-bg);
background-image: var(--tex-basalt);
color: var(--color-on-dark);
font-size: var(--fs-s);
line-height: 1.75;
}
.site-footer a:not(.btn):hover {
color: var(--tangerine-300);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.1fr 1fr 1.6fr;
gap: var(--space-7) var(--space-8);
padding-block: var(--space-8) var(--space-7);
}
.site-footer__name {
--brand-logo-h: 3.5rem; /* ✏️ 교체: 푸터의 로고 높이(헤더보다 조금 크게) */
font-family: var(--font-display);
font-size: var(--fs-xl);
line-height: 1.1;
}
/* (29차) 손글씨 → 본문 글꼴(Pretendard)로 깔끔하게 */
/* (36차) 팀 인스타그램 — 한 줄 소개 아래 */
.site-footer__sns {
margin-top: var(--space-4);
}
.site-footer__insta {
display: inline-flex;
align-items: center;
gap: 0.5em;
min-height: 2.75rem;
padding: 0 1.1em 0 0.9em;
border: 1.5px solid currentColor;
border-radius: 999px;
color: inherit;
font-weight: 700;
text-decoration: none;
}
.site-footer__insta svg {
width: 1.3em;
height: 1.3em;
}
.site-footer__insta:hover {
background-color: rgb(255 250 240 / 0.14);
}
.site-footer__tagline {
max-width: 34em;
margin-top: var(--space-3);
color: var(--color-on-dark-soft);
font-family: var(--font-body);
font-size: var(--fs-base);
font-weight: 500;
line-height: 1.6;
letter-spacing: -0.01em;
}
.site-footer__heading {
display: flex;
align-items: center;
gap: 0.7em;
margin-bottom: var(--space-3);
color: var(--tangerine-300);
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.16em;
}
.site-footer__heading::after {
content: "";
flex: 1;
border-top: 1px dashed rgb(var(--paper-rgb) / 0.28);
}
.site-footer__list {
display: grid;
gap: var(--space-2);
}
.site-footer__list--small {
color: var(--color-on-dark-soft);
}
.site-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2) var(--space-5);
padding-block: var(--space-4) var(--space-6);
border-top: 1px dashed rgb(var(--paper-rgb) / 0.28);
color: var(--color-on-dark-soft);
font-size: var(--fs-xs);
letter-spacing: 0.04em;
}
/* 맨 아래 줄의 링크 묶음: 개인정보처리방침 · 외국인 웹진(Welcome to Jeju — en/index.html) */
.site-footer__links {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.25rem;
}
.site-footer__en {
color: var(--paper-50);
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* 개인정보처리방침 링크(privacy.html): 다른 고지보다 눈에 띄게 굵게 · 밑줄 */
.site-footer__privacy {
display: inline-block;
margin-block: -0.75em;
padding-block: 0.75em;
color: var(--paper-50);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 0.2em;
}
@media (max-width: 767px) {
.site-footer__grid {
grid-template-columns: 1fr;
gap: var(--space-6);
padding-block: var(--space-7) var(--space-6);
}
}
/* 5-x. 언어 전환(한국어 / English / 제주어) — js/i18n.js ----------------------------
단추 세 개는 [data-lang-switch] 자리에 js 가 그린다. index 는 화면 오른쪽 위에 떠 있고(.lang-float),
기사 페이지는 머리글의 '목록으로' 옆(.site-header__lang).
✏️ 교체: 단추 높이는 --lang-btn(44px — 손가락으로 누르기 쉽게 이보다 작게 하지 않기를 권합니다), 화면 끝과의 간격은 --lang-gap.
--lang-clear = 떠 있는 단추가 차지하는 위쪽 높이(인트로의 우표 · 라벨 · 종이 조각이 이 아래로 비켜난다 — css/intro.css) */
:root {
--lang-gap: calc(var(--page-frame-w, 0px) + clamp(0.375rem, 0.9vw, 0.75rem)); /* 주황 테두리(css/scrapbook.css) 안쪽에서 */
--lang-btn: 2.75rem;
--lang-clear: calc(var(--lang-gap) + var(--lang-btn) + var(--space-2));
--z-lang: 950; /* 플로팅 버튼(900)보다 위, 엽서 쓰기 창(1000)보다 아래 */
}
/* 한국어가 아닐 때: 글을 바꾸기 전의 한국어가 잠깐 비치지 않게 가린다( 의 한 줄 스크립트가 붙이고 js/i18n.js 가 걷는다. 안전장치 1.5초) */
html.i18n-pending body {
visibility: hidden;
}
.lang-switch {
display: inline-flex;
gap: 2px;
padding: 3px;
border: 1px solid var(--color-line);
border-radius: 999px;
background-color: var(--paper-50);
background-image: var(--tex-paper);
box-shadow: var(--shadow-paper);
}
.lang-switch__btn {
display: inline-grid;
place-items: center;
min-width: var(--lang-btn);
min-height: var(--lang-btn);
padding: 0 0.7em;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--color-ink);
font: inherit;
font-size: var(--fs-xs);
font-weight: 700;
line-height: 1;
letter-spacing: 0.02em;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang-switch__btn:hover {
background-color: rgb(var(--ink-rgb) / 0.07);
}
/* 영어판 랜딩페이지로 가는 링크(config.js 의 links.english)도 단추와 같은 모양 */
a.lang-switch__btn {
text-decoration: none;
}
/* 지금 언어 */
.lang-switch__btn[aria-pressed="true"] {
background-color: var(--color-point);
color: var(--basalt-900);
cursor: default;
}
.lang-switch__short {
display: none;
}
/* 좁은 화면: KO / EN / 제주 (화면 낭독기는 그대로 '한국어 · English · 제주어' 를 읽는다) */
@media (max-width: 767px) {
.lang-switch__long {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.lang-switch__short {
display: inline;
}
}
/* index: 화면 오른쪽 위에 떠 있는 단추 */
.lang-float {
position: fixed;
top: var(--lang-gap);
right: var(--lang-gap);
z-index: var(--z-lang);
transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
/* 휴대폰: 위쪽 목차가 내려온 뒤에는 지금 언어 단추 하나만 남겨 목차 자리를 비운다. 그 단추를 누르면 세 단추가 펼쳐진다(js/i18n.js 의 .is-open) */
@media (max-width: 767px) {
html.past-intro .lang-float:not(.is-open) .lang-switch__btn:not([aria-pressed="true"]) {
display: none;
}
html.past-intro .lang-float:not(.is-open) .lang-switch__btn[aria-pressed="true"] {
cursor: pointer;
}
html.past-intro .lang-float:not(.is-open) .lang-switch__btn[aria-pressed="true"] .lang-switch__short::after {
content: "▾";
margin-left: 0.2em;
font-size: 0.8em;
}
}
/* 지도 단추 줄(data-lang-avoid)이 단추 자리에 들어와 있는 동안은 비켜 숨는다(js/i18n.js) */
html.lang-avoid .lang-float {
opacity: 0;
visibility: hidden;
}
/* 기사 머리글: 로고 | 목록으로 · 언어 단추 */
.site-header__inner > .site-header__back {
margin-left: auto;
white-space: nowrap;
}
.site-header__lang {
flex: none;
}
/* 아주 좁은 화면(폭 359px 이하): 로고 · '목록으로' · 언어 단추 셋이 한 줄에 들어가게 간격을 줄이고 '←' 를 뺀다 */
@media (max-width: 359px) {
.site-header__inner {
gap: var(--space-2);
}
.site-header__inner > .site-header__back::before {
display: none;
}
}
.site-header__lang .lang-switch {
box-shadow: none;
}
/* 아직 그 언어로 옮기지 않은 기사: 한국어 본문 위에 붙는 안내(js/i18n.js) */
.i18n-note {
width: min(100% - var(--gutter) * 2, 34rem);
margin: var(--space-6) auto 0;
}
/* ?i18n-debug=1 — 사전에 빠진 키: 빨간 점선 = 글자, 파란 점선 = 화면 낭독기 이름 · 대체 글 · 안내 속성 */
html.i18n-debug [data-i18n-missing] {
outline: 2px dashed #d32f2f !important;
outline-offset: 2px;
}
html.i18n-debug [data-i18n-missing-attr] {
outline: 2px dotted #1565c0 !important;
outline-offset: 3px;
}