@devslab/site-kit 0.15.0 → 0.16.0

package/styles.css

@@ -73,7 +73,7 @@
 /* Touch: every link in the chrome is a 44px target (spec §6), as every button already is
    (dds-css button.css). Placed before the narrow block so its menu rows can override the display. */
 @media (pointer: coarse) {
-  .site-brand, .site-nav__list a, .site-footer__links a, .site-footer__brand a, .site-footer__langs-trigger { display: inline-flex; align-items: center; min-block-size: 44px; }
+  .site-brand, .site-nav__list a, .site-footer__links a, .site-footer__links .site-consent-trigger, .site-footer__brand a, .site-footer__langs-trigger { display: inline-flex; align-items: center; min-block-size: 44px; }
   .site-footer__langs-list a { display: flex; align-items: center; min-block-size: 44px; }
 }
 
@@ -92,7 +92,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) { .site-header { scroll-behavior: auto; } }
-@media (forced-colors: active) { .site-header, .site-footer, .site-status { forced-color-adjust: auto; } }
+@media (forced-colors: active) { .site-header, .site-footer, .site-status, .site-consent { forced-color-adjust: auto; } }
 
 .site-locale-flag { position: relative; }
 .site-locale-flag__trigger { list-style: none; display: inline-grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; border-radius: var(--dds-radius-sm); cursor: pointer; }
@@ -109,3 +109,46 @@
 .site-locale-flag__option:focus-visible { outline: 2px solid var(--dds-color-border-focus); outline-offset: -2px; }
 .site-locale-flag__option[aria-current="true"] { font-weight: 700; }
 @media (max-width: 720px) { .site-locale-flag__list { position: static; inline-size: 100%; max-block-size: none; box-shadow: none; } }
+
+/* Consent (D-034): a bottom bar with three equal choices, and a settings dialog.
+   The three buttons share one tone and one grid track width, so no choice is
+   drawn heavier than another. */
+/* Room under the page while the bar is up (ConsentBanner sets the height); zero specificity, so a product body rule wins. */
+:where(body) { padding-block-end: var(--site-consent-block-size, 0px); }
+.site-consent { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 900; max-block-size: 100dvh; overflow-y: auto; border-block-start: 1px solid var(--dds-color-border-default); background: var(--dds-color-bg-elevated); color: var(--dds-color-text-primary); box-shadow: var(--dds-elevation-3); }
+.site-consent__inner { inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; padding-block: var(--dds-space-16); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "copy actions close"; align-items: center; gap: var(--dds-space-12) var(--dds-space-24); }
+.site-consent__copy { grid-area: copy; display: grid; gap: var(--dds-space-4); min-inline-size: 0; }
+.site-consent__title { margin: 0; font-size: var(--dds-typo-body-1-font-size); line-height: var(--dds-typo-body-1-line-height); font-weight: 700; }
+.site-consent__body { margin: 0; max-inline-size: 72ch; font-size: var(--dds-typo-body-2-font-size); line-height: var(--dds-typo-body-2-line-height); color: var(--dds-color-text-secondary); }
+.site-consent__link { color: var(--dds-color-text-brand); text-decoration: underline; text-underline-offset: 2px; }
+.site-consent__link:focus-visible, .site-consent-trigger:focus-visible { outline: 2px solid var(--dds-color-border-focus); outline-offset: 2px; border-radius: var(--dds-radius-sm); }
+.site-consent__actions { grid-area: actions; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--dds-space-8); }
+.site-consent__action { inline-size: 100%; min-inline-size: 7rem; }
+.site-consent__dismiss { grid-area: close; align-self: start; }
+.dds-dialog.site-consent-dialog { position: relative; max-inline-size: 36rem; max-block-size: calc(100dvh - 2 * var(--dds-space-16)); overflow-y: auto; }
+.site-consent-dialog .dds-dialog__title { padding-inline-end: var(--dds-space-40); }
+.site-consent-dialog__close { position: absolute; inset-block-start: var(--dds-space-12); inset-inline-end: var(--dds-space-12); }
+.site-consent-categories { display: grid; margin: 0 0 var(--dds-space-12); padding: 0; list-style: none; }
+.site-consent-category { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--dds-space-16); padding-block: var(--dds-space-12); border-block-start: 1px solid var(--dds-color-border-default); }
+.site-consent-category:last-child { border-block-end: 1px solid var(--dds-color-border-default); }
+.site-consent-category__copy { display: grid; gap: var(--dds-space-4); min-inline-size: 0; }
+.site-consent-category__title { margin: 0; font-size: var(--dds-typo-label-font-size); line-height: var(--dds-typo-label-line-height); font-weight: 600; }
+.site-consent-category__body { margin: 0; font-size: var(--dds-typo-body-2-font-size); line-height: var(--dds-typo-body-2-line-height); color: var(--dds-color-text-secondary); }
+.site-consent-category__status, .site-consent-category__switch { justify-self: end; }
+.site-consent-category__status { background: var(--dds-color-bg-subtle); color: var(--dds-color-text-secondary); }
+.site-consent-dialog__policy { margin: 0 0 var(--dds-space-16); font-size: var(--dds-typo-body-2-font-size); }
+.site-consent-dialog .dds-dialog__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+/* The footer's "쿠키 설정" reads as one of its links. */
+.site-consent-trigger { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--dds-color-text-secondary); cursor: pointer; }
+.site-consent-trigger:hover { color: var(--dds-color-text-primary); text-decoration: underline; }
+@media (max-width: 720px) {
+  .site-consent__inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy close" "actions actions"; align-items: start; }
+  .site-consent__actions { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .site-consent__action { min-inline-size: 0; }
+}
+@media (max-width: 480px) {
+  .site-consent-dialog .dds-dialog__actions { grid-template-columns: minmax(0, 1fr); }
+}
+@media (max-width: 340px) {
+  .site-consent__actions { grid-template-columns: minmax(0, 1fr); }
+}