/* /codex/ ailix Codex graph, design B. The stage stays on the dark chrome tokens (white text 15:1, focus drawn in
   white); the sections under it follow the public site: white sections, a Navy band, the marketing type scale.
   Field colours are brand and line tokens, read by codex.js for the canvas. No hex values here. */
/* --codex-pad is the page's .wrap column edge, so the stage's copy and card line up with the sections under it
   (100% is the stage's width wherever it is used). */
.codex {
  --codex-pad: calc(max(0px, (100% - var(--layout-mkt-max)) / 2) + var(--space-mkt-gutter));
  --codex-side: 360px; --codex-top: clamp(var(--space-12), 5vw, 72px);
  /* The card's place under the title: fixed, so a new card never changes the stage's height and the graph never
     jumps. 482px holds most concepts and 676px the longest; 540px holds 95% (Russian) to 98% (Korean), the rest
     scroll inside the card (measured over the 517 cards 2026-11-02). */
  --codex-card-slot: 540px;
}
/* Boxes here set their own display, which would otherwise beat the hidden attribute. */
.codex [hidden] { display: none !important; }
/* Field colours, read by codex.js for the canvas and used by the dots of the card and the results. Nine families far
   apart on the dark stage (OKLab ΔE 12 or more between any two): sky diagnoses, coral symptoms, orchid body sites,
   grey qualifiers, amber tests, white units, green drugs, teal procedures and care, indigo documents, operations and
   institutions. Fields of one family take its hue lighter or darker. codex-render.mjs FIELD_COLOURS is the same
   table (the 차별점 page's picture) and site.test.mjs checks the two agree. */
.codex {
  --codex-c-dx: var(--color-brand-sky);
  --codex-c-sym: color-mix(in srgb, var(--color-bad-bar) 50%, var(--color-bad-line));
  --codex-c-body: color-mix(in srgb, var(--color-bad-line) 25%, var(--color-pi-bar));
  --codex-c-qual: var(--color-chrome-muted);
  --codex-c-test: var(--color-warn-line);
  --codex-c-unit: var(--color-chrome-ink);
  --codex-c-drug: var(--color-brand-green);
  --codex-c-pharmacy: var(--color-ok-bar);
  --codex-c-procedure: color-mix(in srgb, var(--color-brand-sky) 50%, var(--color-brand-green));
  --codex-c-care: color-mix(in srgb, var(--codex-c-procedure) 60%, var(--color-chrome-ink));
  --codex-c-device: color-mix(in srgb, var(--codex-c-procedure) 75%, var(--color-chrome));
  --codex-c-doc: color-mix(in srgb, var(--color-brand-azure) 50%, var(--color-pi-bar));
  --codex-c-administration: var(--codex-c-doc);
  --codex-c-insurance: var(--codex-c-doc);
  --codex-c-healthsystem: var(--codex-c-doc);
  --codex-c-organization: var(--codex-c-doc);
  --codex-c-workflow: color-mix(in srgb, var(--codex-c-doc) 75%, var(--color-chrome-ink));
  --codex-c-service: var(--codex-c-workflow);
  --codex-c-profession: var(--codex-c-workflow);
}
.codex-dx { --c: var(--codex-c-dx); }
.codex-sym { --c: var(--codex-c-sym); }
.codex-body { --c: var(--codex-c-body); }
.codex-qual { --c: var(--codex-c-qual); }
.codex-doc { --c: var(--codex-c-doc); }
.codex-test { --c: var(--codex-c-test); }
.codex-unit { --c: var(--codex-c-unit); }
.codex-drug { --c: var(--codex-c-drug); }
.codex-procedure { --c: var(--codex-c-procedure); }
.codex-device { --c: var(--codex-c-device); }
.codex-care { --c: var(--codex-c-care); }
.codex-pharmacy { --c: var(--codex-c-pharmacy); }
.codex-workflow { --c: var(--codex-c-workflow); }
.codex-profession { --c: var(--codex-c-profession); }
.codex-service { --c: var(--codex-c-service); }
.codex-administration { --c: var(--codex-c-administration); }
.codex-insurance { --c: var(--codex-c-insurance); }
.codex-healthsystem { --c: var(--codex-c-healthsystem); }
.codex-organization { --c: var(--codex-c-organization); }


/* The graph area is 20% taller than its original viewport-based size (user decision 2026-10-31). */
.codex-stage { background: var(--color-chrome); color: var(--color-chrome-ink); }
.codex-stage :focus-visible { outline-color: var(--color-ink-inverse); }
.codex-stage-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(calc(clamp(600px, calc(100dvh - var(--site-gnb-height, var(--size-mkt-gnb))), 820px) * 1.2), auto); }
/* Wide screens: the canvas fills the whole stage; the copy, the concept card and the tools stand in a column over its
   left side (user request 2026-11-02: the card under the title), and codex.js centres the graph right of it. */
.codex-visual, .codex-side { grid-area: 1 / 1; }
.codex-visual { position: relative; min-width: 0; }
.codex-side { z-index: 2; justify-self: start; width: calc(var(--codex-pad) + var(--codex-side)); max-width: 100%; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--codex-top) var(--space-6) var(--space-10) var(--codex-pad); pointer-events: none; }
.codex-side > * { pointer-events: auto; }
.codex-intro, .codex-tools { display: flex; flex-direction: column; align-items: flex-start; }
.codex-intro { gap: var(--space-6); }
.codex-tools { margin-top: auto; gap: var(--space-3); }
.codex-eyebrow { padding: var(--space-1) var(--space-3); background: var(--color-brand-green); color: var(--color-brand-navy); font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); line-height: 1.5; }
/* No shade behind the copy, so the graph stays bright to the edges; a soft shadow keeps the words readable. */
.codex-intro h1 { font-size: clamp(36px, 3.4vw, 48px); line-height: 1.15; text-shadow: 0 1px 12px var(--color-chrome), 0 0 2px var(--color-chrome); }
.codex-error { font-size: var(--font-size-caption); line-height: 1.5; }

.codex-search { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.codex-search label { font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); line-height: 1.5; color: var(--color-chrome-muted); }
.codex-field { position: relative; }
.codex-search-icon { position: absolute; left: var(--space-3); top: calc((var(--size-control-lg) - 20px) / 2); color: var(--color-chrome-muted); pointer-events: none; }
/* 17px, so phones do not zoom into the box. */
.codex-search input { width: 100%; min-height: var(--size-control-lg); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-10); border: 1px solid var(--color-chrome-muted); border-radius: var(--radius-md); background: var(--color-chrome-raised); color: var(--color-chrome-ink); font: inherit; font-size: var(--font-size-body-lg); }
.codex-search input::placeholder { color: var(--color-chrome-muted); }
/* At most six one-line results, so the list never scrolls. */
.codex-results { position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: 3; margin: 0; padding: var(--space-1); list-style: none; background: var(--color-chrome-raised); border: 1px solid var(--color-chrome-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }
.codex-results.is-up { top: auto; bottom: calc(100% + var(--space-1)); }
.codex-results button { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--size-control-md); padding: var(--space-1) var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-chrome-ink); text-align: left; cursor: pointer; }
.codex-results button:hover, .codex-results button:focus-visible { background: var(--color-chrome-control); }
.codex-results button > span:nth-child(2) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.codex-results small { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-size: var(--font-size-caption); color: var(--color-chrome-muted); }
.codex-results p { padding: var(--space-2) var(--space-3); font-size: var(--font-size-caption); color: var(--color-chrome-muted); }

.codex-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.codex-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.codex-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-md); background: var(--color-chrome-control); color: var(--color-ink-inverse); cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-easing-standard); }
.codex-icon:hover { background: var(--color-chrome-control-hover); }

.codex-canvas { position: absolute; inset: 0; }
.codex-canvas canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.codex-canvas canvas.is-dragging { cursor: grabbing; }
.codex-canvas canvas.is-pointing { cursor: pointer; }
.codex-hint { position: absolute; left: 50%; bottom: var(--space-5); transform: translateX(-50%); margin: 0; font-size: var(--font-size-caption); line-height: 1.5; color: var(--color-chrome-muted); white-space: nowrap; pointer-events: none; }

/* A neutral graphite glass, not the navy of the stage: black at 35%, lightly blurred, so the graph shows through.
   Wide screens stand it in its place under the title, as wide as the column, and scroll the rare card taller than
   the place; it can be dragged anywhere in the stage (codex.js), its place staying empty until 「전체 보기」. */
.codex-card-slot { flex: none; height: var(--codex-card-slot); margin-bottom: calc(-1 * var(--space-4)); pointer-events: none; }
.codex-card { --codex-glass-ink: color-mix(in srgb, var(--color-surface) 66%, transparent); position: relative; width: 100%; max-height: var(--codex-card-slot); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--color-surface) 16%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, black 35%, transparent); backdrop-filter: blur(4px) saturate(70%); -webkit-backdrop-filter: blur(4px) saturate(70%); text-shadow: 0 1px 3px color-mix(in srgb, black 70%, transparent); cursor: grab; user-select: none; touch-action: none; }
.codex-card h2 { font-size: var(--font-size-title-sm); line-height: 1.4; letter-spacing: 0; white-space: normal; margin: var(--space-1) var(--space-8) var(--space-3) 0; overflow-wrap: anywhere; }
.codex-close { position: absolute; top: var(--space-2); right: var(--space-2); display: inline-flex; align-items: center; justify-content: center; width: var(--size-control-sm); height: var(--size-control-sm); padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-chrome-ink); cursor: pointer; }
.codex-close:hover { background: color-mix(in srgb, var(--color-surface) 12%, transparent); }
/* Dragged: placed by left and top in the stage. */
.codex-card.is-lifted { position: absolute; z-index: 3; }
.codex-card.is-moving { cursor: grabbing; }
.codex-card-domain { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-right: var(--space-8); font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); line-height: 1.5; color: var(--codex-glass-ink); }
.codex-names { list-style: none; margin: 0; padding: 0; }
.codex-names li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-2); align-items: baseline; padding: var(--space-1) 0 var(--space-1) var(--space-2); animation: codex-in 200ms var(--motion-easing-standard) both; animation-delay: calc(var(--i) * 25ms); }
.codex-names li.is-current { box-shadow: inset 2px 0 0 var(--color-brand-green); }
.codex-names abbr { font-family: var(--font-family-mono); font-size: var(--font-size-caption); color: var(--codex-glass-ink); text-decoration: none; }
.codex-names span { font-size: var(--font-size-label); line-height: 1.45; overflow-wrap: anywhere; }
.codex-links { margin-top: var(--space-3); font-size: var(--font-size-caption); color: var(--codex-glass-ink); line-height: 1.5; }
.codex-links b { color: var(--color-chrome-ink); font-weight: var(--font-weight-medium); }
@keyframes codex-in { from { opacity: 0; transform: translateY(3px); } }

/* The dictionary in numbers: big blue figures over their labels, the concepts per standard code system as chips
   (counts only, no code values). */
.codex-numbers > h2 { margin-bottom: clamp(var(--space-8), 4vw, 56px); }
.codex-numbers dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-8) var(--space-12); }
.codex-numbers dl div { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--color-ink); }
.codex-numbers dt { order: 2; font-size: var(--font-size-body); line-height: 1.5; color: var(--color-ink-secondary); }
.codex-numbers dd { order: 1; font-size: var(--font-size-mkt-stat); font-weight: var(--font-weight-semibold); line-height: 1; letter-spacing: -0.035em; color: var(--color-action-text); font-variant-numeric: tabular-nums; }
.codex-codes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); }
.codex-codes span { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--size-control-sm); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-sunk); font-size: var(--font-size-label); font-weight: var(--font-weight-medium); line-height: 1.4; color: var(--color-ink-secondary); }
.codex-codes b { color: var(--color-ink); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.codex-numbers .meta { margin-top: var(--space-4); }

/* The learning loop on Navy: five numbered steps joined by a line; the one codex.js lights turns green. */
.codex-learn { margin-top: var(--space-mkt-section); padding-block: var(--space-mkt-band); }
.codex-learn-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: var(--space-5) clamp(var(--space-10), 6vw, 96px); align-items: end; margin-bottom: clamp(var(--space-10), 5vw, 72px); }
.codex-loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-8) var(--space-5); }
.codex-loop li { display: flex; flex-direction: column; gap: var(--space-3); }
.codex-mark { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-1); }
.codex-mark::after { content: ""; flex: 1; height: 2px; background: var(--color-nav-line); transition: background-color var(--motion-duration-base) var(--motion-easing-standard); }
.codex-step { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface); color: var(--color-brand-navy); font-size: var(--font-size-body-lg); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; transition: background-color var(--motion-duration-base) var(--motion-easing-standard), box-shadow var(--motion-duration-base) var(--motion-easing-standard); }
.codex-loop li.is-active .codex-step { background: var(--color-brand-green); }
.codex-loop li.is-active .codex-step { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-brand-green) 35%, transparent); }
.codex-loop li.is-active .codex-mark::after { background: var(--color-brand-green); }
.codex-loop h3 { font-size: var(--font-size-title-md); line-height: 1.4; letter-spacing: -0.01em; }
.codex-loop p { font-size: var(--font-size-body); line-height: 1.6; color: var(--color-nav-ink); }
.codex-loop-note { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-8); font-size: var(--font-size-label); line-height: 1.5; color: var(--color-nav-muted); }

/* Five numbers and five steps stand in one row once they fit; narrower, 3 + 2, 2 + 2 + 1 or one column. */
@media (min-width: 1100px) {
  .codex-numbers dl { grid-template-columns: 1fr 1fr 1.25fr 1fr 1fr; }
  .codex-loop { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* The history: one row per day the dictionary changed, newest first. */
.codex-history-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-12); margin-bottom: clamp(var(--space-6), 3.5vw, var(--space-12)); }
.codex-history-head .meta { font-size: var(--font-size-label); }
.codex-history ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-ink); }
.codex-history li { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-3) var(--space-8); align-items: center; padding-block: var(--space-5); border-bottom: 1px solid var(--color-line); }
.codex-day { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.codex-day time { font-size: var(--font-size-body-lg); font-weight: var(--font-weight-semibold); }
.codex-day span { padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-sunk); color: var(--color-ink-muted); font-size: var(--font-size-caption); line-height: 1.6; }
.codex-bar { display: flex; height: var(--space-3); background: var(--color-surface-sunk); border-radius: var(--radius-pill); overflow: hidden; }
.codex-bar span { height: 100%; }
.codex-bar span:first-child { background: var(--color-brand-blue); }
.codex-bar span:last-child { background: var(--color-brand-sky); }
.codex-history dl { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); font-size: var(--font-size-label); line-height: 1.5; color: var(--color-ink-muted); }
.codex-history dl div { display: flex; align-items: baseline; gap: 6px; }
.codex-history dd { color: var(--color-ink); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
/* The key to the bar: names in blue, synonyms in sky. */
.codex-history .is-names dt::before, .codex-history .is-synonyms dt::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--space-1); border-radius: 2px; background: var(--color-brand-blue); }
.codex-history .is-synonyms dt::before { background: var(--color-brand-sky); }

@media (max-width: 1199px) {
  /* One column: title, search, graph, buttons, card. */
  .codex { --codex-pad: var(--space-mkt-gutter); }
  .codex-stage-inner { grid-template-rows: none; padding-bottom: var(--space-8); }
  .codex-side, .codex-visual, .codex-tools { display: contents; }
  .codex-intro { order: 1; gap: var(--space-5); padding: var(--space-12) var(--codex-pad) 0; }
  .codex-intro h1 { font-size: clamp(32px, 6vw, 48px); line-height: 1.2; }
  .codex-search { order: 2; width: auto; padding: var(--space-6) var(--codex-pad) 0; }
  .codex-field { max-width: 640px; }
  .codex-canvas { order: 3; position: relative; inset: auto; height: calc(clamp(320px, min(100vw, 72vh), 640px) * 1.2); margin-top: var(--space-4); }
  /* The lit canvas fades into the darker stage above and below it, with no visible box. */
  .codex-canvas canvas { -webkit-mask-image: linear-gradient(transparent, black var(--space-12), black calc(100% - var(--space-12)), transparent); mask-image: linear-gradient(transparent, black var(--space-12), black calc(100% - var(--space-12)), transparent); }
  .codex-hint { width: max-content; max-width: calc(100% - var(--space-8)); white-space: normal; text-align: center; }
  .codex-controls, .codex-error { order: 4; padding: var(--space-4) var(--codex-pad) 0; }
  .codex-card-slot { display: contents; }
  .codex-card { order: 5; width: auto; max-width: 640px; max-height: none; overflow: visible; margin: var(--space-6) var(--codex-pad) 0; cursor: auto; user-select: auto; touch-action: auto; }
}
@media (prefers-reduced-motion: reduce) { .codex-names li { animation: none; } .codex-step, .codex-mark::after, .codex-icon { transition: none; } }