/* Moonwave Prd — only what this service has of its own. Values are the kit's tokens; parts are mw- classes. */
.prd-code { letter-spacing: 0.3em; font-family: var(--mw-font-mono); }

/* the document: prose stays at reading width, tables may use the content width (the data dictionary is wide) */
.prd-doc { max-width: var(--mw-page-max); }
.prd-doc .mw-page__head, .prd-doc p, .prd-doc ul, .prd-doc ol, .prd-doc .mw-facts, .prd-doc .mw-stat-strip, .prd-doc .mw-notice, .prd-doc .mw-steps, .prd-doc h2, .prd-doc h3 { max-width: var(--mw-reading-max); }
.prd-doc .mw-table { max-width: 1120px; }
.prd-doc .mw-section { margin-block: var(--space-40); scroll-margin-top: calc(var(--mw-top-h) + var(--space-16)); }
.prd-doc h3 { margin: var(--space-24) 0 var(--space-8); }
.prd-doc h3[id] { scroll-margin-top: calc(var(--mw-top-h) + var(--space-16)); }
.prd-doc p, .prd-doc li { color: var(--text-primary); }
.prd-doc p + p { margin-top: var(--space-12); }
.prd-doc ul, .prd-doc ol { padding-inline-start: var(--space-20); margin: var(--space-8) 0 var(--space-16); display: grid; gap: var(--space-8); }
.prd-doc .mw-table, .prd-doc .mw-facts, .prd-doc .mw-stat-strip, .prd-doc .mw-notice, .prd-doc .mw-steps { margin-block: var(--space-16); }
.prd-doc .mw-table__cell, .prd-doc .mw-table__row-header { vertical-align: top; }
.prd-muted { color: var(--text-secondary); }
.prd-foot { display: flex; align-items: center; gap: var(--space-8); }
.prd-top__doc { color: var(--text-secondary); }
.prd-sheet-form { display: contents; }
.prd-sheet-form .mw-sheet__item { width: 100%; text-align: start; }
.prd-page-foot { margin-top: var(--space-56); padding-top: var(--space-16); border-top: 1px solid var(--border-secondary); color: var(--text-tertiary); }
.prd-tags { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block: var(--space-8); }
@media (max-width: 900px) {
  .prd-doc .mw-section { scroll-margin-top: calc(var(--mw-top-h-mobile) + var(--space-16)); }
}

/* ── Pleos Connect ─────────────────────────────────────────────────────────────────────────────────────────────
   The colours below are the official tokens of the Pleos Connect UI Design Guide (Colors, checked 2026.11.06):
   the basic grey scale (light value · dark value), Gleo AI's indigo, and the "informative" colours.
   They are this service's own values (--prd-*): the kit is not edited. Only the accent family is mapped onto the kit's
   accent tokens, so links, focus, the current menu item and notices carry Gleo's indigo (owner's decision, 2026.11.06). */
:root {
  --prd-basic-00: #ffffff;
  --prd-basic-50: #f7f8fa;
  --prd-basic-100: #edeef2;
  --prd-basic-200: #e0e1e6;
  --prd-basic-300: #c7c9ce;
  --prd-basic-400: #a4a8ae;
  --prd-basic-500: #686a72;
  --prd-basic-600: #44464e;
  --prd-basic-700: #313236;
  --prd-basic-800: #1d1e21;
  --prd-basic-900: #131417;
  --prd-gleo-speaker: #3f4b81;
  --prd-gleo-speaker-dark: #b6c1f3;
  --prd-gleo-bubble: #9ba8e2;
  --prd-gleo-bubble-dark: #545f93;
  --prd-gleo-bubble-2: #8896d3;
  --prd-gleo-bubble-2-dark: #3e4976;
  --prd-active: #02c265;
  --prd-active-dark: #00e074;
  /* the accent family derived from Gleo's indigo (contrast measured: text 7.2 to 9.1 : 1, white on the fill 8.3 : 1) */
  --prd-accent-strong: #323d6b;
  --prd-accent-pressed: #262f55;
  --prd-accent-soft: #ecf0fb;
  --prd-accent-soft-dark: #2a3150;
  --prd-accent-strong-dark: #d3daf8;
  --prd-accent-pressed-dark: #e8ecfc;
}
:root[data-theme="light"], :root[data-theme="light-white"], :root[data-theme="light-gray"] {
  --mw-accent: var(--prd-gleo-speaker);
  --mw-accent-strong: var(--prd-accent-strong);
  --mw-accent-pressed: var(--prd-accent-pressed);
  --mw-accent-soft: var(--prd-accent-soft);
  --mw-on-accent: var(--prd-basic-00);
  --mw-accent-fill: var(--prd-gleo-speaker);
  --mw-focus: var(--prd-gleo-speaker);
}
:root[data-theme="dark"] {
  --mw-accent: var(--prd-gleo-speaker-dark);
  --mw-accent-strong: var(--prd-accent-strong-dark);
  --mw-accent-pressed: var(--prd-accent-pressed-dark);
  --mw-accent-soft: var(--prd-accent-soft-dark);
  --mw-on-accent: var(--prd-basic-900);
  --mw-accent-fill: var(--prd-gleo-speaker-dark);
  --mw-focus: var(--prd-gleo-speaker-dark);
}
.prd-doc a:not([class]) { color: var(--text-link-default); text-decoration: underline; text-underline-offset: 0.2em; }
.prd-doc a:not([class]):hover { color: var(--text-link-hover); }

/* ── 첫 화면 히어로: the kit's hero frame on Pleos night. The kit's moon and ring become ION: a charged particle on its orbit ── */
.prd-hero {
  --mw-hero-gradient: radial-gradient(circle at 78% 42%, var(--prd-gleo-bubble-2-dark), var(--prd-basic-800) 46%, var(--prd-basic-900) 90%);
  --mw-hero-moon: radial-gradient(circle at 30% 26%, var(--prd-gleo-speaker-dark), var(--prd-gleo-bubble-2) 36%, var(--prd-gleo-bubble-2-dark) 68%, var(--prd-basic-900) 100%);
  --mw-hero-ring: color-mix(in srgb, var(--prd-gleo-speaker-dark) 55%, transparent);
  --mw-hero-ink: var(--prd-basic-00);
  --mw-hero-muted: var(--prd-basic-300);
  --mw-hero-kicker: var(--prd-gleo-speaker-dark);
}
.prd-hero__text { flex: 1 1 360px; min-width: 0; max-width: calc(var(--space-80) * 7); }
.prd-doc .prd-hero p { max-width: none; color: var(--mw-hero-muted); }
.prd-doc .prd-hero .prd-hero__slogan { color: var(--mw-hero-ink); margin-top: var(--space-16); }
.prd-hero__slogan span { margin-inline-start: var(--space-8); color: var(--mw-hero-kicker); }
.prd-hero__ion { position: relative; z-index: 1; flex: 1 1 280px; max-width: 360px; display: grid; gap: var(--space-8); padding: var(--space-20); border-radius: var(--radius-16); border: 1px solid color-mix(in srgb, var(--prd-gleo-speaker-dark) 40%, transparent); background: color-mix(in srgb, var(--prd-basic-900) 62%, transparent); color: var(--mw-hero-ink); }
.prd-hero__ion-label { color: var(--mw-hero-kicker); }
.prd-hero__ion-name { color: var(--mw-hero-kicker); }
.prd-hero__ion-name small { margin-inline-start: var(--space-8); color: var(--mw-hero-muted); }
.prd-hero__ion-text { color: var(--mw-hero-ink); }
.prd-hero__ion-link { justify-self: start; color: var(--mw-hero-kicker); text-decoration: underline; text-underline-offset: 0.2em; }
.prd-hero__ion-note { color: var(--mw-hero-muted); }

/* sentences in a table cell wrap (the kit's cells are one line); a column keeps a readable width and the box scrolls beyond it */
.prd-table--wrap .mw-table__header, .prd-table--wrap .mw-table__cell { white-space: normal; }
.prd-table--wrap .mw-table__cell { min-width: calc(var(--space-80) * 3); }

/* ── 시안: the app window as Pleos Connect draws one (day and night sets of the same tokens) ──
   Only the application window is drawn: the status bar, the driving view and the global navigation bar belong to the system. */
.prd-mocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); max-width: 1120px; margin-block: var(--space-16); }
.prd-mock { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-8); margin: 0; min-width: 0; }
.prd-mock figcaption { color: var(--text-secondary); }
.prd-screen--day {
  --s-bg: var(--prd-basic-00); --s-surface: var(--prd-basic-50); --s-raised: var(--prd-basic-100); --s-line: var(--prd-basic-200);
  --s-text: var(--prd-basic-900); --s-text-2: var(--prd-basic-600); --s-text-3: var(--prd-basic-500);
  --s-btn: var(--prd-basic-600); --s-on-btn: var(--prd-basic-00); --s-btn-basic: var(--prd-basic-100);
  --s-gleo: var(--prd-gleo-speaker); --s-pic-a: var(--prd-gleo-bubble); --s-pic-b: var(--prd-gleo-bubble-2); --s-charge: var(--prd-active);
}
.prd-screen--night {
  --s-bg: var(--prd-basic-900); --s-surface: var(--prd-basic-800); --s-raised: var(--prd-basic-700); --s-line: var(--prd-basic-600);
  --s-text: var(--prd-basic-00); --s-text-2: var(--prd-basic-300); --s-text-3: var(--prd-basic-400);
  --s-btn: var(--prd-basic-600); --s-on-btn: var(--prd-basic-00); --s-btn-basic: var(--prd-basic-700);
  --s-gleo: var(--prd-gleo-speaker-dark); --s-pic-a: var(--prd-gleo-bubble-dark); --s-pic-b: var(--prd-gleo-bubble-2-dark); --s-charge: var(--prd-active-dark);
}
.prd-screen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); align-content: start; padding: var(--space-20); border-radius: var(--radius-16); border: 1px solid var(--s-line); background: var(--s-bg); color: var(--s-text); }
.prd-screen__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); color: var(--s-text-2); }
.prd-pill { padding: var(--space-4) var(--space-12); border-radius: var(--radius-circle); background: var(--s-raised); color: var(--s-text); white-space: nowrap; }
.prd-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding: var(--space-20); border-radius: var(--radius-16); background: var(--s-surface); }
.prd-card__sub { color: var(--s-text-2); }
.prd-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.prd-btn { display: flex; align-items: center; justify-content: center; min-height: var(--space-64); padding-inline: var(--space-16); border-radius: var(--radius-16); background: var(--s-btn-basic); color: var(--s-text); text-align: center; }
.prd-btn--filled { background: var(--s-btn); color: var(--s-on-btn); }
.prd-voice { display: flex; align-items: center; gap: var(--space-8); color: var(--s-text-3); }
.prd-voice svg, .prd-row svg { flex: none; color: var(--s-gleo); }
.prd-gauge { height: var(--space-12); border-radius: var(--radius-circle); background: var(--s-raised); overflow: hidden; }
.prd-gauge--22 { --prd-fill: 0.22; }
.prd-gauge i { display: block; height: 100%; border-radius: inherit; background: var(--s-charge); transform: scaleX(var(--prd-fill)); transform-origin: left; }
.prd-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.prd-tile { display: grid; gap: var(--space-4); min-width: 0; }
.prd-tile__pic { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-12); background: linear-gradient(135deg, var(--s-pic-a), var(--s-pic-b)); }
.prd-tile__label { color: var(--s-text-2); }
.prd-row { display: flex; align-items: center; gap: var(--space-12); }
.prd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
.prd-facts > div { display: grid; gap: var(--space-2); min-width: 0; }
.prd-facts dt { color: var(--s-text-3); }
.prd-facts dd { margin: 0; }
@media (max-width: 600px) {
  .prd-mocks { grid-template-columns: minmax(0, 1fr); }
}