/*!
 * site.css - Daegu native pages, in the design language of the official new home
 * (PC /branch/daegu `.nb-*` / `.pc-br-*` in /css/main.css, mobile `.nb-*` / `.b-*` in /css/include/custom-m.css;
 * measured tokens in tmp/dg-rebuild/B-design-system.md section 2): Pretendard, ink #0f1722 on white,
 * #f7f8fa bands with white r16 cards, green #16b176 family for badges/eyebrows/numerals, amber #feb015 pill CTA
 * (the branch page's `.pc-br-btn.primary` and the /m docked bar). Official text/fill pairs that fail WCAG AA
 * (white on #16b176, #0e9e68 on #e2f6ee, #9ca3af/#888a90 text) are swapped for the darker green #0a7e54 / #6c6f75.
 *
 * Scope: every selector starts at `.dg` (the <main> root of a native page). Proxied pages never contain `.dg`,
 * so this file cannot change them. Component classes use the `dn-` prefix so they collide neither with the
 * official CSS nor with /_dg/motion.css (`dg-reveal`, `dg-in`, `dg-img`, ...).
 *
 * Official stylesheets keep loading on native pages (header/footer need them). They style bare elements
 * (common.css, Bootstrap 3 on /m), so the reset below re-states what native components rely on, and
 * component rules use two classes (`.dg .dn-x`) to outrank element + pseudo-class rules such as `a:hover`.
 *
 * Mobile: the official /m site renders on a 750px canvas (viewport width=750). `.dg--m` zooms our tree by
 * 750/390 so the mobile layout below is authored in real 390px-device pixels. The 750px canvas is below the
 * 768px breakpoint, so /m always gets the base (mobile) rules.
 */

.dg {
  /* colour: ink (official .nb-h2 / .pc-br-intro p / .nb-director-desc / .pc-br-stat .cap) */
  --ink-900: #0f1722;
  --ink-800: #1a1e27;
  --ink-700: #353941;
  --ink-600: #4b5563;
  --ink-500: #6c6f75; /* 5.1:1 on white, 4.8:1 on --band (replaces the failing #888a90 / #9ca3af) */
  --ink-lead: #6b7280; /* .nb-lead */
  --ink-300: #bec0c4;
  /* surfaces (official pages are white with flat #f7f8fa bands) */
  --paper: #ffffff;
  --page: #ffffff;
  --band: #f7f8fa; /* .nb-reviews / .nb-faq / .pc-br-stats / .pc-br-review */
  --tile: #f1f3f5; /* .nb-course-badge / .b-cat-icon */
  --chip: #eff1f3; /* .nb-loc-tab */
  --line: #eef0f2; /* .nb-course-card / .nb-rv-card border, .nb-exp-row */
  --line-2: #e1e4e8; /* .nb-compare-card border */
  --line-btn: #dadbde; /* .pc-br-btn.secondary */
  /* brand green (fills / large type only; small text uses --green-700) */
  --green-700: #0a7e54; /* .nb-quote-band p; 5.1:1 on white, 4.5:1 on --green-100 */
  --green-600: #0e9e68; /* .nb-eyebrow / .pc-br-more; 3.4:1 on white: large type and graphics only */
  --green-500: #16b176; /* .b-hero-btn.primary / .nb-faq-badge fill */
  --green-100: #e2f6ee; /* .nb-eyebrow / .nb-callout */
  --green-50: #e4f7ef; /* .pc-br-badge / .nb-director-tag */
  /* action: amber pill = .pc-br-btn.primary (ink text 10:1) */
  --amber-500: #feb015;
  --amber-400: #fcc659;
  --amber-100: #fdf2d6; /* .nb-eyebrow.yellow */
  --bake: #8a5a00; /* official #c98a00 fails on #fdf2d6 (2.65:1); 5.3:1 */
  --bake-bg: #fdf2d6;
  --barista: #1d5fc4; /* official #3182f6 fails on #e8f1fe; 5.4:1 */
  --barista-bg: #e8f1fe;

  /* Pretendard static is already loaded by the official shell (PC <head>, /m foundation_typography.css). */
  --font: "Pretendard", "Pretendard Variable", system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --fw-head: 700; /* /m headings are 700 */
  --r-sm: 8px;
  --r-md: 12px; /* photos */
  --r-card: 16px; /* .nb-rv-card / .nb-faq-card / .pc-br-info-card */
  --r-lg: 20px; /* .nb-track-card / .nb-compare-card */
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .12), 0 1px 3px 1px rgba(0, 0, 0, .07); /* .nb-director */
  --sh-2: 0 8px 12px rgba(15, 23, 33, .06); /* .pc-br-info-card */
  --sh-3: 0 4px 16px rgba(15, 23, 41, .12); /* .pc-qi */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-1: 160ms;
  --t-2: 240ms;
  --t-3: 420ms;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --container: 1130px;
  --measure: 36em;
  --edge: 20px;

  /* responsive type scale (mobile first; see media queries below).
     /m real px: .nb-h2 27/700, .nb-h2.sm 20/700, .nb-lead 14.6/1.55/500. PC: .b-hero-title 50/900,
     .nb-h2 44/900 (statement), section titles 32/900 (.nb-tracks-title), .pc-br-h3 24, .nb-lead 16.5/1.58/500. */
  --fs-display: 30px;
  --fs-statement: 26px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-h4: 17px;
  --fs-lead: 15px;
  --fs-body: 15px;
  --fs-small: 14px;
  --fs-caption: 13px;
  --fs-numeral: 32px;
  --pad-open: 56px;
  --pad-band: 48px;

  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink-700);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

.dg.dg--m {
  zoom: 1.923;
  /* the official docked bar (.bottom-btn) sits over the last 58px of the screen */
  padding-bottom: 72px;
}
/* the official fixed app bar (.header-wrapper, 98px on the 750px canvas = 51px here after zoom) covered the top of the hero photo */
.dg.dg--m > .dn-hero:first-child { margin-top: 51px; }

@media (min-width: 768px) {
  .dg:not(.dg--m) {
    --edge: 32px;
    --fw-head: 900; /* PC .nb-h2 / .b-hero-title are 900 */
    --fs-display: 40px;
    --fs-statement: 34px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-lead: 16px;
    --fs-body: 16px;
    --fs-small: 15px;
    --fs-numeral: 36px;
    --pad-open: 96px;
    --pad-band: 80px;
  }
}

@media (min-width: 1024px) {
  .dg:not(.dg--m) {
    --edge: 24px;
    --fs-display: 48px;
    --fs-statement: 40px;
    --fs-h2: 32px;
    --fs-h3: 24px;
    --fs-h4: 19px;
    --fs-lead: 16.5px;
    --fs-numeral: 38px;
    --pad-open: 120px;
    --pad-band: 96px;
  }
}

/* ------------------------------------------------------------------ reset */

.dg *,
.dg *::before,
.dg *::after { box-sizing: border-box; }

.dg :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, figcaption, blockquote, table, caption, th, td, address, details, summary, nav, header, section, aside) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  list-style: none;
}
/* common.css sets `div, span, p, li, ... { font-size: 14px; color: #666 }` on bare elements: inherit instead. */
.dg :where(div, span, a, label, button, em, strong, small, time, b, i) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  vertical-align: baseline;
}
.dg :where(h1, h2, h3, h4) { font-weight: 700; text-wrap: balance; }
.dg :where(p, li, dd, td) { text-wrap: pretty; }
.dg details::before,
.dg details::after,
.dg summary::before { content: none; }
.dg summary { display: block; cursor: pointer; }
.dg summary::-webkit-details-marker { display: none; }
.dg summary::marker { content: ""; }
.dg img { display: block; max-width: 100%; height: auto; border: 0; }
.dg a,
.dg a:hover,
.dg a:focus,
.dg a:visited { color: inherit; text-decoration: none; }
.dg button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
.dg table { border-collapse: collapse; border-spacing: 0; width: 100%; background: transparent; }
.dg address { font-style: normal; }
.dg [hidden] { display: none !important; }
.dg :focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; border-radius: 4px; }

.dg .dn-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.dg .dn-icon {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* numerals: heavy and tight like .nb-stat .num (900, -0.57px at 38px) */
.dg .dn-num { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; line-height: 1; }

/* ------------------------------------------------------------- layout */

.dg .dn-wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--edge));
  margin: 0 auto;
  padding: 0 var(--edge);
}

.dg .dn-section { padding: var(--pad-open) 0; }
.dg .dn-section--cream { background: var(--band); }

/* ------------------------------------------------------------- type */

.dg .dn-display {
  color: var(--ink-900);
  font-size: var(--fs-display);
  font-weight: var(--fw-head);
  line-height: 1.32;
  letter-spacing: -0.01em;
}
.dg .dn-h2 {
  color: var(--ink-900);
  font-size: var(--fs-h2);
  font-weight: var(--fw-head);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.dg .dn-h3 {
  color: var(--ink-900);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.dg .dn-lead {
  max-width: 760px;
  margin-top: 12px;
  color: var(--ink-lead);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.58;
}

/* section header (.nb-h2 + .nb-lead, left aligned, 32px to the content) */
.dg .dn-head { max-width: 46em; margin-bottom: 24px; }
@media (min-width: 1024px) { .dg:not(.dg--m) .dn-head { margin-bottom: 32px; } }
.dg .dn-head--statement .dn-h2 {
  font-size: var(--fs-statement);
  line-height: 1.32;
  letter-spacing: -0.015em;
}

/* department chip = .nb-eyebrow pill (bake uses the .nb-eyebrow.yellow pair, barista the blue course-badge pair) */
.dg .dn-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--bake-bg);
  color: var(--bake);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.4;
}
.dg .dn-chip--barista { background: var(--barista-bg); color: var(--barista); }
.dg .dn-dot { display: none; }

/* ------------------------------------------------------------- buttons */

.dg .dn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.dg .dn-actions--end { margin-top: var(--s-7); }

/* one button geometry = .pc-br-btn (52 high, pill, 16px, ink text); primary amber, secondary white + #dadbde */
.dg .dn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.dg .dn-btn .dn-icon { width: 18px; height: 18px; stroke-width: 2; }
.dg .dn-btn--primary,
.dg .dn-btn--primary:visited { background: var(--amber-500); color: var(--ink-800); }
.dg .dn-btn--primary:hover { background: var(--amber-400); color: var(--ink-800); }
.dg .dn-btn--secondary,
.dg .dn-btn--secondary:visited,
.dg .dn-btn--ondark,
.dg .dn-btn--ondark:visited { background: var(--paper); border-color: var(--line-btn); color: var(--ink-800); }
.dg .dn-btn--secondary:hover,
.dg .dn-btn--ondark:hover { background: var(--band); color: var(--ink-800); }
/* text link with arrow = .pc-br-more / .nb-track-more (green, 700) */
.dg .dn-btn--quiet,
.dg .dn-btn--quiet:visited {
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--green-700);
  font-size: 15px;
}
.dg .dn-btn--quiet:hover { color: var(--green-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.dg .dn-btn:active { transform: translateY(1px); }
.dg .dn-btn .dn-icon { transition: transform var(--t-1) var(--ease); }
.dg .dn-btn:hover .dn-icon { transform: translateX(3px); }
.dg .dn-btn--ondark:hover .dn-icon,
.dg .dn-btn--secondary:hover .dn-icon { transform: none; }

/* ------------------------------------------------------------- hero */

.dg .dn-hero { display: flex; flex-direction: column-reverse; }
/* mobile: an inset rounded photo like the /m banner cards (.b-banner r24@2x), not edge to edge */
.dg .dn-hero__media {
  margin: 12px var(--edge) 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  background: var(--band);
  overflow: hidden;
}
.dg .dn-hero__img { width: 100%; height: 100%; object-fit: cover; }
.dg .dn-hero__text { padding: 24px var(--edge) 48px; }

.dg .dn-crumbs { margin-bottom: 20px; color: var(--ink-500); font-size: var(--fs-caption); font-weight: 500; line-height: 1.5; }
.dg .dn-crumbs ol { display: flex; flex-wrap: wrap; gap: 0 8px; }
.dg .dn-crumbs li { display: inline-flex; gap: 8px; }
.dg .dn-crumbs li + li::before { content: "/"; color: var(--ink-300); }
.dg .dn-crumbs a:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }
.dg .dn-crumbs [aria-current="page"] { color: var(--ink-900); }

.dg .dn-hero__dept { margin-bottom: 16px; }
.dg .dn-hero__lead {
  max-width: 30em;
  margin-top: 20px;
  color: var(--ink-700);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.75;
}
.dg .dn-hero .dn-actions { margin-top: 28px; }
.dg .dn-hero .dn-actions .dn-btn { width: 100%; }
/* the hero pair mirrors .b-hero-btns: amber primary + white outlined secondary of the same geometry */
.dg .dn-hero .dn-btn--quiet,
.dg .dn-hero .dn-btn--quiet:visited {
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--line-btn);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-800);
  font-size: 16px;
}
.dg .dn-hero .dn-btn--quiet:hover { background: var(--band); color: var(--ink-800); text-decoration: none; }

/* key facts = .pc-br-stats: a flat #f7f8fa r16 strip */
.dg .dn-hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px 24px;
  margin-top: 32px;
  padding: 20px 24px;
  border-radius: var(--r-card);
  background: var(--band);
}
.dg .dn-hero__fact { min-width: 0; }
.dg .dn-hero__fact dt { color: var(--ink-500); font-size: var(--fs-caption); font-weight: 500; line-height: 1.4; }
.dg .dn-hero__fact dd {
  margin-top: 4px;
  color: var(--ink-900);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
  .dg:not(.dg--m) .dn-hero {
    display: grid;
    grid-template-columns: minmax(var(--edge), 1fr) minmax(0, 541px) 48px minmax(0, 541px) minmax(0, 1fr);
    align-items: center;
    min-height: 620px;
    padding: 48px 0 80px;
  }
  .dg:not(.dg--m) .dn-hero__text { grid-column: 2; padding: 0; }
  .dg:not(.dg--m) .dn-hero__media {
    grid-column: 4 / 6;
    align-self: stretch;
    max-height: 600px;
    margin: 0;
    aspect-ratio: auto;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
  }
  .dg:not(.dg--m) .dn-hero .dn-actions .dn-btn { width: auto; }
  .dg:not(.dg--m) .dn-hero__facts { padding: 24px 32px; }
}

/* ------------------------------------------------------------- WHY */

.dg .dn-why { background: var(--page); padding-bottom: var(--pad-open); }
/* wide WHY photo: inside the 1130 column with photo radius (official pages never run photos edge to edge) */
.dg .dn-bleed {
  margin: 0 var(--edge);
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--band);
}
.dg .dn-bleed__img { width: 100%; height: 100%; object-fit: cover; }
.dg .dn-why__body { padding-top: 40px; }
.dg .dn-why .dn-head { margin-bottom: 0; }
/* the short paragraph under the WHY statement (.pc-br-intro p: 16/28/500 #353941) */
.dg .dn-why__prose { max-width: var(--measure); margin-top: 20px; }
.dg .dn-why__prose p { color: var(--ink-700); font-size: var(--fs-body); font-weight: 500; line-height: 1.75; }
.dg .dn-why__prose p + p { margin-top: 14px; }
/* audience list = .nb-compare-card (white, 1.2px #e1e4e8, r20) with .nb-compare-list green checks */
.dg .dn-why__audience {
  margin-top: 40px;
  padding: 24px 22px 22px;
  border: 1.2px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.dg .dn-why__audience .dn-h3 { font-size: var(--fs-h4); margin-bottom: 14px; }
/* square / portrait WHY photo: a 4:5 frame (inset on mobile, beside the text on desktop) instead of a 21:9 strip */
.dg .dn-why--tall .dn-why__body { padding-top: 0; }
.dg .dn-why__media {
  margin: 0 0 40px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--band);
}
.dg .dn-why__img { width: 100%; height: 100%; object-fit: cover; }

.dg .dn-checks { display: grid; gap: 12px; }
.dg .dn-checks li {
  position: relative;
  padding: 0 0 0 28px;
  color: var(--ink-800);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.6;
}
.dg .dn-checks li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: calc(0.8em - 6px);
  width: 11px;
  height: 6px;
  border-left: 2.5px solid var(--green-600);
  border-bottom: 2.5px solid var(--green-600);
  transform: rotate(-45deg);
}

@media (min-width: 1024px) {
  /* 16:9 capped at 720px tall: a 4:3 source keeps about two thirds of its height (21:9 kept barely half) */
  .dg:not(.dg--m) .dn-bleed {
    aspect-ratio: 16 / 9;
    width: min(var(--container), calc(100% - 2 * var(--edge)));
    max-height: 640px;
    margin: 0 auto;
    border-radius: var(--r-lg);
  }
  .dg:not(.dg--m) .dn-why:not(.dn-why--tall) { padding-top: 24px; }
  .dg:not(.dg--m) .dn-why__audience { padding: 28px 28px 26px; }
  .dg:not(.dg--m) .dn-why__body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
    padding-top: var(--pad-band);
  }
  .dg:not(.dg--m) .dn-why__main { grid-column: 1 / 7; }
  .dg:not(.dg--m) .dn-why .dn-head { max-width: none; }
  .dg:not(.dg--m) .dn-why__prose { margin-top: var(--s-6); }
  .dg:not(.dg--m) .dn-why__audience { grid-column: 8 / 13; margin-top: 6px; }
  .dg:not(.dg--m) .dn-why--tall { padding-top: var(--pad-band); }
  .dg:not(.dg--m) .dn-why--tall .dn-why__body { padding-top: 0; }
  .dg:not(.dg--m) .dn-why--tall .dn-why__main { grid-row: 1; }
  .dg:not(.dg--m) .dn-why--tall .dn-why__audience { grid-column: 1 / 7; grid-row: 2; margin-top: 48px; }
  .dg:not(.dg--m) .dn-why__media {
    grid-column: 8 / 13;
    grid-row: 1 / span 2;
    position: sticky;
    top: 112px;
    margin: 0;
    border-radius: var(--r-lg);
  }
}

/* ------------------------------------------------------------- HOW */

/* HOW sits on the flat #f7f8fa band with white r16 cards, like .nb-faq / .nb-faq-card */
.dg .dn-how { background: var(--band); padding: var(--pad-band) 0; }
.dg .dn-how__method { padding-bottom: var(--pad-band); }
.dg .dn-steps { display: grid; gap: 12px; counter-reset: none; }
.dg .dn-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 14px;
  padding: 18px;
  border-radius: var(--r-card);
  background: var(--paper);
}
/* step number = .nb-faq-badge geometry (square r8) in the green tint pair */
.dg .dn-step__num {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
}
.dg .dn-step__title { align-self: center; min-height: 40px; display: flex; align-items: center; color: var(--ink-900); font-size: var(--fs-h4); font-weight: 700; line-height: 1.42; letter-spacing: -0.005em; }
.dg .dn-step__body { margin-top: 2px; color: var(--ink-600); font-size: var(--fs-small); font-weight: 500; line-height: 1.58; }

@media (min-width: 1024px) {
  .dg:not(.dg--m) .dn-how__method {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  .dg:not(.dg--m) .dn-how__method .dn-head { grid-column: 1 / 6; margin-bottom: 0; }
  .dg:not(.dg--m) .dn-steps { grid-column: 7 / 13; }
  .dg:not(.dg--m) .dn-step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 22px 24px; }
  .dg:not(.dg--m) .dn-step__num { width: 44px; height: 44px; font-size: 17px; }
  .dg:not(.dg--m) .dn-step__title { min-height: 44px; }
}

/* curriculum */
.dg .dn-curri { padding-top: var(--pad-band); border-top: 1px solid var(--line-2); }

/* track tabs = .nb-loc-tab pills (active amber, ink 600) */
.dg .dn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.dg .dn-tabs button {
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink-500);
  font-size: 16px;
  font-weight: 500;
  transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.dg .dn-tabs button:hover { color: var(--ink-900); }
.dg .dn-tabs button[aria-selected="true"] { background: var(--amber-500); box-shadow: none; color: var(--ink-800); font-weight: 600; }

.dg .dn-track + .dn-track { margin-top: 64px; }
.dg .dn-tracks.is-tabbed .dn-track + .dn-track { margin-top: 0; }
.dg .dn-track__head { margin-bottom: 24px; }
.dg .dn-track__meta {
  margin-top: 6px;
  color: var(--ink-500);
  font-size: var(--fs-small);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* every session is the same white r16 card: a square photo on top, then badge, heading and items */
.dg .dn-sessions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dg .dn-session {
  position: relative;
  border-radius: var(--r-card);
  background: var(--paper);
  overflow: hidden;
  scroll-margin-top: 128px;
}
/* mobile: photo on the left, text on the right (keeps an 18-session list short).
   The photo column runs the full card height (at least a 116px square), so a session with a long item list
   never leaves an empty strip under its photo. */
.dg .dn-session { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: stretch; }
.dg .dn-session > .dn-session__body:only-child { grid-column: 1 / -1; }
.dg .dn-session__body { padding: 14px 16px 16px; }
.dg .dn-session__media {
  position: relative;
  margin: 0;
  min-height: 116px;
  background: var(--chip);
}
.dg .dn-session__media > .dn-session__img:first-child { position: absolute; inset: 0; }
@media (min-width: 768px) {
  /* tablet/desktop cards stack: square photo on top */
  .dg:not(.dg--m) .dn-session__media { min-height: 0; aspect-ratio: 1; }
}
.dg .dn-session__img { width: 100%; height: 100%; object-fit: cover; }
/* one line above the session list (no per-photo marks) */
.dg .dn-photo-note { margin: 0 0 20px; color: var(--ink-600); font-size: 15px; font-weight: 500; line-height: 1.5; }
/* two photos in one session: the second sits as an inset in the corner */
.dg .dn-session__media--pair .dn-session__img + .dn-session__img {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 38%;
  height: auto;
  aspect-ratio: 1;
  border: 3px solid var(--paper);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
}
/* session number = a small badge like .nb-course-badge / .pc-br-badge ("01회차"), green tint pair */
.dg .dn-session__num {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 5px 10px;
  border-radius: 7px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.dg .dn-session__num .dn-num { font-size: inherit; font-weight: 800; line-height: inherit; letter-spacing: 0; }
.dg .dn-session__unit { color: inherit; font-size: inherit; font-weight: 700; }
.dg .dn-session__title {
  margin-top: 8px;
  color: var(--ink-900);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.005em;
}
/* poster items under a session heading (barista posters) */
.dg .dn-session__items { margin-top: 6px; }
.dg .dn-session__items li {
  position: relative;
  padding-left: 12px;
  color: var(--ink-600);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.58;
}
.dg .dn-session__items li + li { margin-top: 4px; }
.dg .dn-session__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green-600);
}

.dg .dn-session .dn-session__title { margin-top: 10px; }

@media (min-width: 768px) {
  .dg:not(.dg--m) .dn-sessions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .dg:not(.dg--m) .dn-session { display: block; }
  .dg:not(.dg--m) .dn-session__body { padding: 18px 20px 20px; }
}

@media (min-width: 1024px) {
  .dg:not(.dg--m) .dn-track {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  .dg:not(.dg--m) .dn-track__head { grid-column: 1 / 4; position: sticky; top: 112px; margin-bottom: 0; }
  .dg:not(.dg--m) .dn-track__head .dn-h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
  .dg:not(.dg--m) .dn-sessions { grid-column: 4 / 13; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dg:not(.dg--m) .dn-session__title { font-size: 17px; }
}

/* exam note = .nb-callout (green tint, r18) */
.dg .dn-note {
  margin-top: 56px;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--green-100);
}
.dg .dn-note .dn-h3 { color: var(--ink-800); font-size: var(--fs-h4); }
.dg .dn-note p { margin-top: 6px; color: var(--ink-700); font-size: var(--fs-body); font-weight: 500; line-height: 1.7; max-width: 46em; }
@media (min-width: 1024px) { .dg:not(.dg--m) .dn-note { padding: 26px 32px; } }

/* ------------------------------------------------------------- WHAT: facts */

.dg .dn-what { background: var(--paper); padding: var(--pad-open) 0 calc(var(--pad-open) * .75); }
.dg .dn-facts { font-variant-numeric: tabular-nums; }
/* fact rows = .pc-br-info-row (label #6c6f75 14/500, value #1a1e27 15/500, 1px #eff1f3 rules) */
.dg .dn-facts thead th {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-900);
  font-size: var(--fs-small);
  font-weight: 700;
  vertical-align: bottom;
}
.dg .dn-facts thead th:first-child { color: var(--ink-500); font-weight: 500; }
.dg .dn-facts tbody th,
.dg .dn-facts tbody td {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--chip);
  vertical-align: top;
  line-height: 1.55;
}
.dg .dn-facts tbody tr:last-child > * { border-bottom: 0; }
.dg .dn-facts tbody th {
  width: 92px;
  color: var(--ink-500);
  font-size: var(--fs-small);
  font-weight: 500;
}
.dg .dn-facts tbody td { color: var(--ink-800); font-size: var(--fs-body); font-weight: 500; }
.dg .dn-facts .dn-btn--quiet { min-height: 0; }
/* several classes side by side: the column heads are plain labels (not tabs) — each sits on its own column rule,
   and a value shared by every class is one tinted band across all columns with a "공통" pill */
.dg .dn-facts thead th:not(:first-child) { border-bottom: 2px solid var(--green-600); }
.dg .dn-facts tbody td.dn-facts__shared { padding-left: 0; }
/* pill + value side by side; a wrapped value stays indented after the pill */
.dg .dn-facts__line { display: flex; align-items: flex-start; gap: 8px; }
.dg .dn-facts__common {
  display: inline-flex;
  flex: none;
  align-items: center;
  margin-top: 1px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* consult card = .pc-br-info-card (white, 1px #eff1f3, r16, soft shadow) with the two .pc-br-btn */
.dg .dn-mini {
  display: grid;
  gap: 10px;
  margin-top: 40px;
  padding: 24px;
  border: 1px solid var(--chip);
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: var(--sh-2);
}
.dg .dn-mini__name { color: var(--ink-900); font-size: 18px; font-weight: 600; line-height: 1.4; margin-bottom: 10px; }
.dg .dn-mini .dn-btn { width: 100%; padding: 0 16px; }

@media (min-width: 1024px) {
  .dg:not(.dg--m) .dn-facts-wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  .dg:not(.dg--m) .dn-facts-main { grid-column: 1 / 8; }
  .dg:not(.dg--m) .dn-facts tbody th { width: 140px; }
  .dg:not(.dg--m) .dn-mini { grid-column: 9 / 13; position: sticky; top: 112px; margin-top: 76px; padding: 28px; }
}

/* ------------------------------------------------------------- teachers */

.dg #teachers { background: var(--paper); padding-top: calc(var(--pad-open) * .5); }
.dg .dn-teachers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 14px;
}
.dg .dn-teacher { min-width: 0; }
.dg .dn-teacher__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-md);
  background: #f5f5f7; /* .pc-br-teacher-photo */
}
/* .pc-br-teacher-name / -role */
.dg .dn-teacher__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 14px;
  color: var(--ink-900);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.35;
}
.dg .dn-teacher__pos { color: var(--ink-500); font-size: var(--fs-small); font-weight: 400; }
.dg .dn-teacher__hl { margin-top: 8px; }
.dg .dn-teacher__hl li {
  position: relative;
  padding-left: 12px;
  color: var(--ink-600);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.55;
}
.dg .dn-teacher__hl li + li { margin-top: 4px; }
.dg .dn-teacher__hl li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green-600);
}

.dg .dn-more { margin-top: 32px; }
.dg .dn-more--split { display: flex; flex-wrap: wrap; gap: 8px 20px; }

@media (min-width: 768px) {
  .dg:not(.dg--m) .dn-teachers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px; }
}
@media (min-width: 1024px) {
  .dg:not(.dg--m) .dn-teachers { gap: 48px 24px; }
}

/* ------------------------------------------------------------- reviews */

/* .nb-rv-card: white, 1px #eef0f2, r16, soft shadow, quote 15/1.54/500 #2a3441 (on the #f7f8fa band) */
.dg .dn-reviews { display: grid; gap: 12px; }
.dg .dn-review {
  margin: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper);
  box-shadow: 0 5px 16px rgba(15, 23, 41, .05);
}
.dg .dn-review__quote p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  color: #2a3441;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.6;
}
.dg .dn-review__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  color: var(--ink-500);
  font-size: var(--fs-caption);
  font-weight: 500;
}
/* source badge = .nb-course-badge (r7, #f1f3f5, 12/700) */
.dg .dn-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 7px;
  background: var(--tile);
  color: var(--green-700);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.dg .dn-review__author { color: var(--ink-900); font-weight: 700; }
.dg .dn-review__link { color: var(--green-700); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 1024px) {
  .dg:not(.dg--m) .dn-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .dg:not(.dg--m) .dn-review { padding: 28px; }
}

/* Course pages: reviews as one horizontal scroll-snap row (.dn-reviews--rail), so many reviews do not make the page long.
   The row is full-bleed (outside .dn-wrap) and its first card lines up with the container; the next card peeks in.
   Cards have one width and one height per row; long texts are clamped (the full text stays in the HTML).
   Desktop gets round prev/next buttons next to the heading (site.js) and a right-edge fade; mobile just swipes.
   The promo page also uses .dn-reviews as a grid, so every rule here needs the --rail modifier. */
.dg .dn-reviews-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: 24px; }
.dg .dn-reviews-top .dn-head { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.dg .dn-reviews-nav { display: none; flex: none; gap: 10px; }
.dg .dn-reviews-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-btn);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-900);
  cursor: pointer;
  transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.dg .dn-reviews-nav__btn:hover { background: var(--tile); border-color: var(--ink-300); }
.dg .dn-reviews-nav__btn .dn-icon { width: 20px; height: 20px; stroke-width: 2; }
/* at either end the button is gone (not just dimmed); it keeps its place so the other one does not jump */
.dg .dn-reviews-nav__btn:disabled { visibility: hidden; }

.dg .dn-reviews-rail { --rail-pad: var(--edge); position: relative; }
.dg .dn-reviews.dn-reviews--rail {
  display: flex;
  align-items: stretch;
  gap: 12px;
  /* top/bottom padding leaves room for the card shadow (the row clips its overflow) */
  padding: 4px var(--rail-pad) 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-pad);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dg .dn-reviews--rail::-webkit-scrollbar { display: none; }
.dg .dn-reviews--rail .dn-review {
  display: flex;
  flex: 0 0 82%;
  flex-direction: column;
  min-width: 0;
  scroll-snap-align: start;
}
.dg .dn-reviews--rail .dn-review__quote { flex: 1 1 auto; }
.dg .dn-reviews--rail .dn-review__quote p { -webkit-line-clamp: 6; }
/* a clamped review gets a "더 보기" toggle (site.js) — Google's 원문 link opens only the place page, not the review */
.dg .dn-reviews--rail .dn-review.is-open .dn-review__quote p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.dg .dn-reviews--rail .dn-review__toggle {
  align-self: flex-start;
  margin: -4px 0 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--green-700);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.dg .dn-reviews--rail .dn-review__toggle[hidden] { display: none; }
.dg .dn-reviews--rail .dn-review__meta { flex: none; }
.dg .dn-reviews-rail + .dn-wrap .dn-more { margin-top: 8px; }

@media (min-width: 768px) {
  .dg:not(.dg--m) .dn-reviews-top { margin-bottom: 28px; }
  .dg:not(.dg--m) .dn-reviews-nav:not([hidden]) { display: flex; }
  /* the first card sits on the container's left edge; the row runs out to the window's edge */
  .dg:not(.dg--m) .dn-reviews-rail { --rail-pad: max(var(--edge), calc((100% - var(--container)) / 2)); }
  .dg:not(.dg--m) .dn-reviews.dn-reviews--rail { gap: 20px; }
  .dg:not(.dg--m) .dn-reviews--rail .dn-review { flex-basis: 360px; padding: 28px; }
  /* light fade on the right edge says "more this way"; site.js sets .is-scrollable and drops it again at the end */
  .dg:not(.dg--m) .dn-reviews-rail::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 88px;
    background: linear-gradient(to left, var(--band), rgba(247, 248, 250, 0));
    opacity: 0;
    pointer-events: none;
  }
  .dg:not(.dg--m) .dn-reviews-rail.is-scrollable:not(.is-end)::after { opacity: 1; }
}
@media (min-width: 1024px) {
  .dg:not(.dg--m) .dn-reviews-top { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: no-preference) {
  .dg:not(.dg--m) .dn-reviews-rail::after { transition: opacity var(--t-2) var(--ease); }
}

/* ------------------------------------------------------------- FAQ */

/* .nb-faq: #f7f8fa band, white r16 cards, green square "Q" badge (decorative: hidden from assistive tech) */
.dg .dn-faq-section { background: var(--band); }
.dg .dn-faq { display: grid; gap: 12px; }
.dg .dn-faq__item { border-radius: var(--r-card); background: var(--paper); }
.dg .dn-faq__item summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 64px;
  padding: 16px 16px 16px 18px;
}
.dg .dn-faq__item summary::before {
  content: "Q";
  content: "Q" / "";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--green-600);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}
.dg .dn-faq__q {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
  color: var(--ink-900);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.005em;
  transition: color var(--t-1) var(--ease);
}
.dg .dn-faq__item summary .dn-plus { margin-top: 6px; }
.dg .dn-faq__item summary:hover .dn-faq__q { color: var(--green-700); }
.dg .dn-faq__a { padding: 0 18px 20px 60px; }
.dg .dn-faq__a p { max-width: 60ch; color: var(--ink-600); font-size: var(--fs-body); font-weight: 500; line-height: 1.58; }
@media (min-width: 1024px) {
  .dg:not(.dg--m) .dn-faq { gap: 16px; }
  .dg:not(.dg--m) .dn-faq__item summary { padding: 20px 22px 20px 22px; }
  .dg:not(.dg--m) .dn-faq__a { padding: 0 64px 24px 64px; }
}

/* plus / minus glyph (two 2px strokes) */
.dg .dn-plus {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ink-900);
}
.dg .dn-plus::before,
.dg .dn-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--t-2) var(--ease);
}
.dg .dn-plus::after { transform: rotate(90deg); }
.dg details[open] > summary .dn-plus::after { transform: rotate(0deg); }

/* FAQ: header above the cards like every official section (no side column) */
.dg .dn-split > .dn-head { max-width: 46em; }

/* ------------------------------------------------------------- related */

/* related course = .nb-course-card: white, 1px #eef0f2, r18, border darkens on hover; photo on top */
.dg #related { background: var(--paper); }
.dg .dn-related { display: grid; gap: 16px; }
.dg .dn-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: 0 0 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--paper);
  transition: border-color var(--t-1) var(--ease);
}
.dg .dn-card:hover { border-color: #d1d5db; }
.dg .dn-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
  overflow: hidden;
  background: var(--band);
}
.dg .dn-card__img { width: 100%; height: 100%; object-fit: cover; }
.dg .dn-card > :not(.dn-card__media) { margin-left: 22px; margin-right: 22px; }
.dg .dn-card .dn-chip { padding: 5px 10px; border-radius: 7px; font-size: 12px; }
.dg .dn-card__title {
  margin-top: 10px;
  color: var(--ink-900);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.4;
}
.dg .dn-card__meta { margin-top: 4px; color: var(--ink-500); font-size: var(--fs-small); font-weight: 500; line-height: 1.5; }
.dg .dn-card__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 14px;
  color: var(--green-700);
  font-size: 14px;
  font-weight: 700;
}
.dg .dn-card__more .dn-icon { width: 16px; height: 16px; stroke-width: 2; }
@media (min-width: 768px) { .dg:not(.dg--m) .dn-related { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* ------------------------------------------------------------- consult band */

/* closing consult block = a contained .nb-callout panel (green tint, r20) instead of a dark band */
.dg .dn-cta { background: var(--page); padding: 0 var(--edge) var(--pad-band); color: var(--ink-800); }
.dg .dn-cta .dn-wrap {
  max-width: var(--container);
  padding: 40px 24px;
  border-radius: var(--r-lg);
  background: var(--green-100);
}
.dg .dn-cta .dn-h2 { max-width: 18em; color: var(--ink-900); }
.dg .dn-cta .dn-actions { margin-top: 28px; }
.dg .dn-cta .dn-actions .dn-btn { width: 100%; }
.dg .dn-cta .dn-btn--ondark,
.dg .dn-cta .dn-btn--ondark:visited { border-color: var(--paper); }
.dg .dn-nap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(10, 126, 84, .18);
  color: var(--ink-700);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .dg:not(.dg--m) .dn-cta .dn-actions .dn-btn { width: auto; }
  .dg:not(.dg--m) .dn-cta .dn-wrap { padding: 56px 48px; }
}

/* ------------------------------------------------------------- sticky consult bar (desktop) */

/* the .pc-qi floating pill, made opaque white (no backdrop blur over photos) */
.dg .dn-sticky {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-800);
  box-shadow: var(--sh-3);
  transform: translate(-50%, 0);
}
.dg .dn-sticky__name { max-width: 16em; overflow: hidden; color: var(--ink-900); font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.dg .dn-sticky .dn-btn { min-height: 44px; padding: 0 22px; font-size: 15px; }
.dg .dn-sticky__tel,
.dg .dn-sticky__tel:visited,
.dg .dn-sticky__tel:hover {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-800);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dg .dn-sticky__tel .dn-icon { color: var(--green-700); }
.dg .dn-sticky__tel:hover span { text-decoration: underline; text-underline-offset: 4px; }
.dg .dn-sticky__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink-500);
}
.dg .dn-sticky__close:hover { color: var(--ink-900); background: var(--band); }
.dg .dn-sticky.is-off { visibility: hidden; transform: translate(-50%, 140%); }
@media (max-width: 1023px) { .dg .dn-sticky { display: none; } }

/* ------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
  .dg .dn-sticky { transition: transform var(--t-2) var(--ease), visibility 0s linear 0s; }
  .dg .dn-sticky.is-off { transition: transform var(--t-2) var(--ease), visibility 0s linear var(--t-2); }
  .dg .dn-card__img,
  .dg .dn-session__img { transition: transform var(--t-3) var(--ease); }
  .dg .dn-card:hover .dn-card__img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .dg .dn-btn:active { transform: none; }
  .dg .dn-btn:hover .dn-icon { transform: none; }
  .dg .dn-plus::before,
  .dg .dn-plus::after { transition: none; }
}

/* ---- teacher pages ---- */

/* /teacherProfile/list.do: intro, a branch chip row and a field chip row, then a grid of equal cards (one per teacher, filtered by
   /_dg/teachers.js). /teacherProfile/<id>: breadcrumb, one teacher's full profile, the same branch's other teachers, back link.
   Authored mobile first (/m is zoomed 1.923 so these values are 390px-device px); min-width rules stay on .dg:not(.dg--m). */
.dg .dn-tp-intro { padding: 28px 0 8px; }
.dg .dn-tp-intro .dn-crumbs { margin-bottom: 16px; }
.dg .dn-tp-lead {
  max-width: 34em;
  margin-top: 16px;
  color: var(--ink-700);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.75;
}

.dg .dn-tp-overview,
.dg .dn-tp-detail { padding-top: calc(var(--pad-open) * .5); }
/* the profile page's intro is only the breadcrumb: keep the photo close under it */
.dg .dn-tp-intro + .dn-tp-detail { padding-top: 8px; }

/* filter chips: one row each. On phones the row scrolls sideways and bleeds to the screen edge; from 768px it wraps. */
.dg .dn-tp-filters { display: grid; gap: 4px; margin-bottom: 20px; }
.dg .dn-tp-chips {
  display: flex;
  gap: 8px;
  margin: 0 calc(var(--edge) * -1);
  padding: 4px var(--edge);
  overflow-x: auto;
  scroll-padding: 0 var(--edge);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dg .dn-tp-chips::-webkit-scrollbar { display: none; }
.dg .dn-tp-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink-600);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  transition: background-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.dg .dn-tp-chip:hover { color: var(--ink-900); }
.dg .dn-tp-chip[aria-pressed="true"] { background: var(--green-700); box-shadow: none; color: #fff; }
.dg .dn-tp-chip__n { font-variant-numeric: tabular-nums; font-weight: 700; opacity: .75; }

.dg .dn-tp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dg .dn-tp-grid > li { display: flex; min-width: 0; }
.dg .dn-tp-empty { padding: 56px 0; color: var(--ink-500); font-size: var(--fs-body); text-align: center; }

/* one card format for everyone: the whole card is the link to that teacher's profile page */
.dg .dn-tp-card,
.dg .dn-tp-card:visited {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--ink-700);
  overflow: hidden;
  transition: border-color var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease);
}
.dg .dn-tp-card:hover { border-color: var(--line-2); box-shadow: var(--sh-2); color: var(--ink-700); }
.dg .dn-tp-card:focus-visible { border-radius: var(--r-card); outline-offset: 2px; }
.dg .dn-tp-card__photo,
.dg .dn-tp-profile__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top; /* keep faces: crop from the bottom */
  background: #f5f5f7;
}
.dg .dn-tp-card__body { display: flex; flex: 1; flex-direction: column; padding: 14px 14px 16px; }
.dg .dn-tp-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--ink-900);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.35;
}
.dg .dn-tp-card__role { margin-top: 2px; color: var(--ink-500); font-size: var(--fs-small); font-weight: 500; line-height: 1.5; }
.dg .dn-tp-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 7px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.6;
}

/* profile page: photo, name + role, quote, lists. Stacked on phones, photo left from 768px. */
.dg .dn-tp-profile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.dg .dn-tp-profile__media { width: min(100%, 280px); }
.dg .dn-tp-profile__photo { border-radius: var(--r-md); }
.dg .dn-tp-profile__body { min-width: 0; }
.dg .dn-tp-profile__name { color: var(--ink-900); font-size: var(--fs-display); font-weight: var(--fw-head); line-height: 1.32; letter-spacing: -0.01em; }
.dg .dn-tp-profile__role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 6px;
  color: var(--ink-500);
  font-size: var(--fs-body);
  font-weight: 500;
}
.dg .dn-tp-quote { padding-left: 14px; border-left: 3px solid var(--green-500); }
.dg .dn-tp-quote p { color: var(--ink-800); font-size: var(--fs-lead); font-weight: 600; line-height: 1.65; }
.dg .dn-tp-h4 { margin-top: 28px; color: var(--ink-900); font-size: var(--fs-h4); font-weight: 700; line-height: 1.4; }
.dg .dn-tp-quote + .dn-tp-h4 { margin-top: 28px; }
.dg .dn-tp-profile__body > .dn-tp-h4:first-child { margin-top: 0; }
.dg .dn-tp-list { margin-top: 8px; }
.dg .dn-tp-list li {
  position: relative;
  padding-left: 14px;
  color: var(--ink-700);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.65;
}
.dg .dn-tp-list li + li { margin-top: 4px; }
.dg .dn-tp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--green-600);
}

.dg .dn-tp-backrow { padding: 12px 0 var(--pad-band); }
.dg .dn-tp-back a,
.dg .dn-tp-back a:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--green-700);
  font-size: var(--fs-small);
  font-weight: 700;
}
.dg .dn-tp-back a::before {
  content: "";
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 2px 0 0 2px;
  transform: translateY(0) rotate(-45deg);
}
.dg .dn-tp-back a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* course pages' teacher cards: a plain link to the profile page */
.dg .dn-teacher__link,
.dg .dn-teacher__link:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 6px;
  color: var(--green-700);
  font-size: var(--fs-small);
  font-weight: 700;
}
.dg .dn-teacher__link .dn-icon { width: 16px; height: 16px; transition: transform var(--t-1) var(--ease); }
.dg .dn-teacher__link:hover .dn-icon { transform: translateX(3px); }

/* /m: the official bar is fixed (98px on the 750px canvas = 51px here) and nothing in our body clears it, so start below it. */
.dg.dg--m .dn-tp-intro { padding-top: 68px; }

@media (min-width: 768px) {
  .dg:not(.dg--m) .dn-tp-intro { padding: 48px 0 8px; }
  .dg:not(.dg--m) .dn-tp-filters { gap: 8px; margin-bottom: 28px; }
  .dg:not(.dg--m) .dn-tp-chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .dg:not(.dg--m) .dn-tp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .dg:not(.dg--m) .dn-tp-card__body { padding: 18px 20px 20px; }
  .dg:not(.dg--m) .dn-tp-profile {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas: "media head" "media body";
    gap: 20px 48px;
    align-items: start;
  }
  .dg:not(.dg--m) .dn-tp-profile__media { grid-area: media; width: auto; }
  .dg:not(.dg--m) .dn-tp-profile__head { grid-area: head; align-self: end; }
  .dg:not(.dg--m) .dn-tp-profile__body { grid-area: body; }
  .dg:not(.dg--m) .dn-tp-list--cols { column-count: 2; column-gap: 40px; }
  .dg:not(.dg--m) .dn-tp-list--cols li { break-inside: avoid; }
}
@media (min-width: 1024px) {
  .dg:not(.dg--m) .dn-tp-intro { padding: 64px 0 16px; }
  .dg:not(.dg--m) .dn-tp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .dg:not(.dg--m) .dn-tp-profile { grid-template-columns: 300px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .dg .dn-teacher__link:hover .dn-icon { transform: none; }
}

/* ---- teacher profile modal (/_dg/teacher-modal.js) ---- */

/* The script appends one <dialog class="dn-tpm"> to <body>, inside a `.dg` host that only carries the tokens above.
   The profile markup inside is the profile page's own (.dn-tp-profile*), so only the frame is styled here.
   Desktop: a centred panel (max 880px) with the bar and the "profile page" link fixed and the profile scrolling between them.
   /m: the host keeps `.dg--m` (so the :not(.dg--m) desktop rules stay off) but not its zoom; the sheet is zoomed by hand
   (authored in 390px-device px, anchored to the bottom edge). Its own size is given in % of the full-screen dialog (zoom does not scale
   percentages, only absolute lengths, so the sheet is exactly full width and 92% high and its insides are in 390px-device px). */
.dg.dn-tpm-host { display: contents; }
.dg.dg--m.dn-tpm-host { zoom: 1; padding: 0; }

.dg .dn-tpm {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-700);
  overflow: hidden;
}
.dg .dn-tpm[open] { display: flex; align-items: center; justify-content: center; }
.dg .dn-tpm::backdrop { background: rgba(15, 23, 34, .56); }

.dg .dn-tpm__sheet {
  display: flex;
  flex-direction: column;
  width: min(880px, calc(100% - 48px));
  max-height: calc(100% - 64px);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.dg .dn-tpm__bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 10px 14px 10px 20px;
  border-bottom: 1px solid var(--line);
}
.dg .dn-tpm__nav { display: flex; gap: var(--s-2); }
.dg .dn-tpm__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-btn);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink-900);
  cursor: pointer;
  transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease);
}
.dg .dn-tpm__btn:hover { background: var(--tile); border-color: var(--ink-300); }
.dg .dn-tpm__btn .dn-icon { width: 20px; height: 20px; stroke-width: 2; }
.dg .dn-tpm__btn:disabled { border-color: var(--line); color: var(--ink-300); background: var(--paper); cursor: default; }
.dg .dn-tpm__close { border-color: transparent; background: var(--tile); }

.dg .dn-tpm__scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px 20px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dg .dn-tpm__scroll:focus-visible { outline-offset: -3px; }
/* reading another branch's profile: the sheet is emptied (never the previous teacher under the new address) and shows a spinner */
.dg .dn-tpm__sheet.is-busy .dn-tpm__content { min-height: 240px; position: relative; }
.dg .dn-tpm__sheet.is-busy .dn-tpm__content::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid var(--line);
  border-top-color: var(--green-600);
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .dg .dn-tpm__sheet.is-busy .dn-tpm__content::before { animation: dn-tpm-spin .8s linear infinite; }
  @keyframes dn-tpm-spin { to { transform: rotate(360deg); } }
}

.dg .dn-tpm__foot { flex: none; padding: 0 20px; border-top: 1px solid var(--line); }
.dg .dn-tpm__page,
.dg .dn-tpm__page:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: var(--green-700);
  font-size: var(--fs-small);
  font-weight: 700;
}
.dg .dn-tpm__page::after {
  content: "";
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.dg .dn-tpm__page:hover { text-decoration: underline; text-underline-offset: 4px; }

/* inside the modal the profile is one column of lists next to the photo, so the two-column certificate list is off */
.dg .dn-tpm .dn-tp-profile__name { font-size: 26px; }
.dg .dn-tpm .dn-tp-list--cols { column-count: 1; }

@media (min-width: 768px) {
  /* a fixed minimum height so the panel does not jump while stepping between teachers with short and long lists */
  .dg:not(.dg--m) .dn-tpm__sheet { min-height: min(620px, calc(100% - 64px)); }
  .dg:not(.dg--m) .dn-tpm__bar { padding: 12px 16px 12px 28px; }
  .dg:not(.dg--m) .dn-tpm__scroll { padding: 32px 36px 36px; }
  .dg:not(.dg--m) .dn-tpm__foot { padding: 0 36px; }
  .dg:not(.dg--m) .dn-tpm .dn-tp-profile { grid-template-columns: 250px minmax(0, 1fr); gap: 20px 40px; }
}

/* /m: bottom sheet, close at the top right; the profile starts with a small photo beside the name */
.dg.dg--m .dn-tpm[open] { align-items: flex-end; }
.dg.dg--m .dn-tpm__sheet {
  zoom: 1.923;
  width: 100%;
  max-height: 92%;
  border-radius: 20px 20px 0 0;
  box-shadow: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.dg.dg--m .dn-tpm .dn-tp-profile {
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-areas: "media head" "body body";
  gap: 16px;
  align-items: end;
}
.dg.dg--m .dn-tpm .dn-tp-profile__media { grid-area: media; width: auto; }
.dg.dg--m .dn-tpm .dn-tp-profile__head { grid-area: head; }
.dg.dg--m .dn-tpm .dn-tp-profile__body { grid-area: body; }
.dg.dg--m .dn-tpm .dn-tp-profile__name { font-size: 22px; }

@keyframes dn-tpm-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes dn-tpm-slide { from { transform: translateY(48px); } }
@keyframes dn-tpm-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .dg .dn-tpm[open] .dn-tpm__sheet { animation: dn-tpm-rise var(--t-2) var(--ease); }
  .dg.dg--m .dn-tpm[open] .dn-tpm__sheet { animation-name: dn-tpm-slide; }
  .dg .dn-tpm[open]::backdrop { animation: dn-tpm-fade var(--t-2) var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .dg .dn-tpm__btn { transition: none; }
}