body { margin: 0; background: var(--color-bg); text-wrap: pretty; -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
/* Korean is the default paint; the root's data-lg flips the pair. */
[data-l="en"] { display: none; }
[data-lg="en"] [data-l="en"] { display: revert; }
[data-lg="en"] [data-l="ko"] { display: none; }
[data-l="ko"] { font-family: "Pretendard Variable", Pretendard, -apple-system, sans-serif; letter-spacing: -0.01em; }
[data-lg="ko"] { word-break: keep-all; }
[data-lstack] { display: inline-grid; grid-template-columns: auto; }
[data-lstack] > [data-l="en"], [data-lstack] > [data-l="ko"] { grid-area: 1 / 1; display: block; visibility: hidden; }
[data-lg="en"] [data-lstack] > [data-l="en"] { visibility: visible; }
[data-lg="ko"] [data-lstack] > [data-l="ko"] { visibility: visible; }

/* control-state rules lifted from the design source */
.dif { display: contents; }
[hidden] { display: none !important; }
.ps1:hover { opacity: 1; }
.ps2:hover { opacity: 1; }
.ps3:hover { background: var(--color-accent-600); color: var(--color-bg); }
.ps4:hover { background: var(--color-accent-600); color: var(--color-bg); }
.ps5:focus { border-color: #ff563c; outline: none; }
.ps6:hover { background: #ffffff; }
.ps7:hover { background: rgba(243,242,242,0.12); }
.ps8:hover { background: rgba(243,242,242,0.2); }
.ps9:hover { background: rgba(243,242,242,0.14); }
.ps10:focus { border-color: #ff563c; outline: none; }
.ps11:focus { border-color: #ff563c; outline: none; }
.ps12:focus { border-color: #ff563c; outline: none; }
.ps13:focus { outline: 2px solid var(--color-accent-900); outline-offset: 1px; }
.ps14:hover { background: #ffffff; }
.ps15:hover { opacity: 1; }
.ps16:hover { opacity: 1; }
.ps17:hover { background: var(--color-accent-600); color: var(--color-bg); }
.ps18:focus { outline: 2px solid var(--color-accent-900); outline-offset: 1px; }
.ps19:hover { background: #ffffff; }
.ps20:hover { opacity: 1; }
.ps21:hover { opacity: 1; }
.ps22:hover { background: var(--color-accent-600); color: var(--color-bg); }
.ps23:focus { outline: 2px solid var(--color-accent-900); outline-offset: 1px; }
.ps24:hover { background: #ffffff; }
.ps25:hover { opacity: 1; }
.ps26:hover { opacity: 1; }
.ps27:hover { background: var(--color-accent-600); color: var(--color-bg); }
.ps28:focus { outline: 2px solid var(--color-accent-900); outline-offset: 1px; }
.ps29:hover { background: #ffffff; }

/* — 손으로 관리하는 영역: 수신 동의 체크박스 —
   tokens.css 의 .radio 패턴을 따른다. 실제 input 은 화면 밖으로 밀고
   바로 뒤의 span 이 컨트롤 역할을 한다. 이 시스템의 radius 토큰이 전부
   0px 이므로 모양은 정사각형이다.
   색은 세 개의 커스텀 속성에서 오므로, 밝은 페이지·어두운 데모 패널·
   강조색 CTA 밴드에서 같은 마크업을 쓰고 값만 인라인으로 덮어쓴다. */
.check { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; text-align: left; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.check .box {
  position: relative; width: 15px; height: 15px; flex: none; margin-top: 2px;
  border: 1.5px solid var(--check-line, var(--color-divider)); background: transparent;
}
.check:hover .box { border-color: var(--check-fill, var(--color-accent)); }
.check input:checked + .box {
  border-color: var(--check-fill, var(--color-accent));
  background: var(--check-fill, var(--color-accent));
}
.check input:checked + .box::after {
  content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 4px; height: 8px;
  border: solid var(--check-mark, var(--color-bg)); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check input:focus-visible + .box {
  outline: 2px solid var(--check-fill, var(--color-accent)); outline-offset: 2px;
}