/* ============================================================================
   DNK design system — tokens + components
   ----------------------------------------------------------------------------
   One stylesheet shared by the Webflow event pages, the member account pages and
   the admin app, so those three stop drifting apart.

   Built from an audit of what the site already uses. The audit found two primary
   greens, two fonts, ~28 radii, ~40 shadow recipes, 11 near-identical border
   greys and 9 muted text greens. Everything below is a decision about which one
   wins, not a new invention:

     green      #12592E   the newer of the two primaries, already on 33 homepage
                          rules, the admin, the cookie banner and every component
                          built this year. #006b2d is the legacy one and retires.
     font       Pretendard  one family, real 800 weight, proper Korean coverage.
                          Nunito capped at 700, so bold headings were being
                          browser-faked.
     radii      5 steps   was 28, including five different ways to say "pill"
     shadows    4 recipes all tinted with the brand ink, never neutral black
     greys      4 text + 2 border  down from 9 and 12

   Naming is `--dnk-*` throughout. The admin's short names (--g, --ink, --line)
   are aliased at the bottom so it keeps working during migration.
   ========================================================================== */

:root {
  /* ---- brand ------------------------------------------------------------ */
  --dnk-green:            #12592E;   /* primary: buttons, links, headings      */
  --dnk-green-hover:      #0f4426;   /* the one dark-green hover, was six      */
  --dnk-green-deep:       #0B2E1A;   /* footer, display headings, shadow tint  */
  --dnk-mint:             #8fd6a8;   /* accent on dark surfaces only           */

  /* ---- text ------------------------------------------------------------- */
  --dnk-ink:              #17231c;   /* headings                               */
  --dnk-body:             #34433a;   /* paragraphs                             */
  --dnk-muted:            #667a6d;   /* meta, labels, secondary                */
  --dnk-faint:            #9aa9a0;   /* placeholders, disabled                 */
  --dnk-on-dark:          #ffffff;
  --dnk-on-dark-muted:    rgba(255,255,255,.68);

  /* ---- surfaces --------------------------------------------------------- */
  --dnk-surface:          #ffffff;
  --dnk-canvas:           #f7f9f7;   /* page background, warm not cold         */
  --dnk-subtle:           #f1f5f2;   /* chips, table headers, inset panels     */
  --dnk-tint:             #e8f2ec;   /* success/selected tint                  */

  /* ---- lines ------------------------------------------------------------ */
  --dnk-line:             #e4eae5;
  --dnk-line-strong:      #cfdcd4;

  /* ---- semantic --------------------------------------------------------- */
  --dnk-danger:           #a8324a;
  --dnk-danger-tint:      #fdeef1;
  --dnk-warn:             #8a6a1f;
  --dnk-warn-tint:        #fdf3e3;
  --dnk-info:             #2b4d8f;
  --dnk-info-tint:        #eaf0fb;
  --dnk-success:          var(--dnk-green);
  --dnk-success-tint:     var(--dnk-tint);

  /* ---- programme accents (deliberate, kept) ----------------------------- */
  --dnk-accent-summer:    #ff751f;
  --dnk-accent-fest:      #018eec;

  /* ---- type ------------------------------------------------------------- */
  --dnk-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
              "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --dnk-text-xs:    .75rem;    /* 12 — uppercase labels, tags               */
  --dnk-text-sm:    .8125rem;  /* 13 — captions, hints                      */
  --dnk-text-base:  .9375rem;  /* 15 — UI default                           */
  --dnk-text-md:    1rem;      /* 16 — body copy                            */
  --dnk-text-lg:    1.125rem;  /* 18 — lead paragraphs, card titles         */
  --dnk-text-xl:    1.375rem;  /* 22 — section headings                     */
  --dnk-text-2xl:   1.75rem;   /* 28                                        */
  --dnk-text-3xl:   2.25rem;   /* 36                                        */
  --dnk-display: clamp(2rem, 4.5vw, 3rem);

  --dnk-leading-tight:  1.15;
  --dnk-leading-snug:   1.3;
  --dnk-leading-body:   1.6;

  --dnk-track-display: -.022em;  /* tight display type reads as modern        */
  --dnk-track-label:    .07em;   /* uppercase labels need air                 */

  /* ---- space (0.25rem ladder) ------------------------------------------- */
  --dnk-1: .25rem;  --dnk-2: .5rem;   --dnk-3: .75rem;  --dnk-4: 1rem;
  --dnk-5: 1.5rem;  --dnk-6: 2rem;    --dnk-7: 3rem;    --dnk-8: 4rem;
  --dnk-9: 6rem;

  /* ---- shape ------------------------------------------------------------ */
  --dnk-r-sm:   6px;
  --dnk-r-md:   10px;
  --dnk-r-lg:   14px;
  --dnk-r-xl:   18px;
  --dnk-r-pill: 999px;

  /* ---- depth: tinted with the brand ink, never neutral black ------------ */
  --dnk-shadow-sm:    0 1px 2px rgba(11,46,26,.05), 0 2px 8px rgba(11,46,26,.04);
  --dnk-shadow-md:    0 6px 20px rgba(11,46,26,.09);
  --dnk-shadow-lg:    0 18px 50px rgba(11,46,26,.18);
  --dnk-ring:         0 0 0 3px rgba(18,89,46,.16);

  /* ---- motion ----------------------------------------------------------- */
  --dnk-fast:   140ms cubic-bezier(.2,.8,.2,1);
  --dnk-slow:   260ms cubic-bezier(.2,.8,.2,1);

  /* ---- measure ---------------------------------------------------------- */
  --dnk-measure:       68ch;
  --dnk-measure-tight: 42ch;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dnk-fast: 1ms; --dnk-slow: 1ms; }
}

/* ============================================================================
   Primitives
   ========================================================================== */

.dnk { font-family: var(--dnk-font); color: var(--dnk-body); font-size: var(--dnk-text-base); line-height: var(--dnk-leading-body); }
.dnk *, .dnk *::before, .dnk *::after { box-sizing: border-box; }

.dnk-display { font-size: var(--dnk-display); line-height: var(--dnk-leading-tight); letter-spacing: var(--dnk-track-display); font-weight: 800; color: var(--dnk-ink); margin: 0; }
.dnk-h1 { font-size: var(--dnk-text-3xl); line-height: var(--dnk-leading-tight); letter-spacing: var(--dnk-track-display); font-weight: 800; color: var(--dnk-green); margin: 0; }
.dnk-h2 { font-size: var(--dnk-text-xl); line-height: var(--dnk-leading-snug); font-weight: 700; color: var(--dnk-ink); margin: 0; }
.dnk-h3 { font-size: var(--dnk-text-lg); line-height: var(--dnk-leading-snug); font-weight: 700; color: var(--dnk-ink); margin: 0; }
.dnk-lead { font-size: var(--dnk-text-lg); line-height: var(--dnk-leading-body); color: var(--dnk-body); margin: 0; max-width: var(--dnk-measure); }
.dnk-p { font-size: var(--dnk-text-md); line-height: var(--dnk-leading-body); color: var(--dnk-body); margin: 0 0 var(--dnk-3); max-width: var(--dnk-measure); }
.dnk-meta { font-size: var(--dnk-text-base); color: var(--dnk-muted); }
.dnk-label { font-size: var(--dnk-text-xs); font-weight: 800; letter-spacing: var(--dnk-track-label); text-transform: uppercase; color: var(--dnk-muted); }
.dnk-hint { font-size: var(--dnk-text-sm); color: var(--dnk-faint); margin: var(--dnk-1) 0 0; }

.dnk-link { color: var(--dnk-green); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* Focus: one ring everywhere. The audit found the old layer had none at all. */
.dnk :focus-visible { outline: 2px solid var(--dnk-green); outline-offset: 2px; border-radius: var(--dnk-r-sm); }

/* ============================================================================
   Buttons
   ========================================================================== */

.dnk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dnk-2);
  font: inherit; font-weight: 700; font-size: var(--dnk-text-base);
  padding: .7rem 1.3rem; border-radius: var(--dnk-r-md);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color var(--dnk-fast), border-color var(--dnk-fast), transform var(--dnk-fast);
}
.dnk-btn:active { transform: translateY(1px); }
.dnk-btn--primary { background: var(--dnk-green); color: #fff; }
.dnk-btn--primary:hover { background: var(--dnk-green-hover); }
.dnk-btn--ghost { background: var(--dnk-surface); color: var(--dnk-green); border-color: var(--dnk-green); }
.dnk-btn--ghost:hover { background: var(--dnk-tint); }
.dnk-btn--quiet { background: transparent; color: var(--dnk-muted); }
.dnk-btn--quiet:hover { background: var(--dnk-subtle); color: var(--dnk-green); }
.dnk-btn--block { display: flex; width: 100%; }
.dnk-btn--lg { padding: .85rem 1.6rem; font-size: var(--dnk-text-md); }
.dnk-btn[disabled], .dnk-btn--disabled { background: var(--dnk-line-strong); color: #fff; border-color: transparent; cursor: default; pointer-events: none; }

/* ============================================================================
   Surfaces
   ========================================================================== */

.dnk-card { background: var(--dnk-surface); border: 1px solid var(--dnk-line); border-radius: var(--dnk-r-lg); }
.dnk-card--pad { padding: var(--dnk-5); }
/* Hover lift is for cards that are links. Hairline first, shadow second — the
   audit's old layer reached for shadow where a border would do. */
.dnk-card--link { transition: border-color var(--dnk-fast), box-shadow var(--dnk-fast), transform var(--dnk-fast); }
.dnk-card--link:hover { border-color: var(--dnk-line-strong); box-shadow: var(--dnk-shadow-md); transform: translateY(-1px); }

.dnk-panel { background: var(--dnk-surface); border: 1px solid var(--dnk-line); border-radius: var(--dnk-r-lg); overflow: hidden; }
.dnk-panel__head { background: var(--dnk-subtle); padding: .6rem 1.1rem; font-size: var(--dnk-text-xs); font-weight: 800; letter-spacing: var(--dnk-track-label); text-transform: uppercase; color: var(--dnk-muted); }
.dnk-panel__body { padding: var(--dnk-4); }

.dnk-divider { height: 1px; background: var(--dnk-line); border: 0; margin: var(--dnk-5) 0; }

/* ============================================================================
   Tags, chips, pills
   ========================================================================== */

.dnk-tag { display: inline-block; font-size: var(--dnk-text-xs); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--dnk-body); background: var(--dnk-subtle); border-radius: var(--dnk-r-pill); padding: .28rem .62rem; }
.dnk-tag--green   { background: var(--dnk-tint);        color: var(--dnk-green); }
.dnk-tag--warn    { background: var(--dnk-warn-tint);   color: var(--dnk-warn); }
.dnk-tag--info    { background: var(--dnk-info-tint);   color: var(--dnk-info); }
.dnk-tag--danger  { background: var(--dnk-danger-tint); color: var(--dnk-danger); }

.dnk-chip { font-size: var(--dnk-text-sm); font-weight: 700; color: var(--dnk-body); background: var(--dnk-subtle); border: 1px solid var(--dnk-line); border-radius: var(--dnk-r-pill); padding: .38rem .85rem; cursor: pointer; transition: background-color var(--dnk-fast), color var(--dnk-fast), border-color var(--dnk-fast); }
.dnk-chip:hover { border-color: var(--dnk-line-strong); }
.dnk-chip--on { background: var(--dnk-green); border-color: var(--dnk-green); color: #fff; }

.dnk-segment { display: inline-flex; gap: .2rem; background: var(--dnk-subtle); border-radius: var(--dnk-r-pill); padding: .25rem; }
.dnk-segment button { border: 0; background: none; font: inherit; font-weight: 700; font-size: var(--dnk-text-base); color: var(--dnk-muted); padding: .45rem 1.1rem; border-radius: var(--dnk-r-pill); cursor: pointer; transition: background-color var(--dnk-fast), color var(--dnk-fast); }
.dnk-segment button[aria-selected="true"] { background: var(--dnk-surface); color: var(--dnk-green); box-shadow: var(--dnk-shadow-sm); }

/* ============================================================================
   Date chip — month over day. Recurs on cards, detail pages and the admin.
   ========================================================================== */

.dnk-date { width: 48px; border: 1px solid var(--dnk-line); border-radius: var(--dnk-r-md); overflow: hidden; text-align: center; flex: 0 0 auto; background: var(--dnk-surface); }
.dnk-date__m { background: var(--dnk-subtle); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dnk-muted); padding: .2rem 0; }
.dnk-date__d { font-size: 1.15rem; font-weight: 800; color: var(--dnk-green); padding: .18rem 0; line-height: 1.1; }

/* ============================================================================
   Avatar stack — counts-only social proof (names are never shown; see PIPA note
   in the schema). Neutral circles, no photos.
   ========================================================================== */

.dnk-stack { display: inline-flex; align-items: center; }
.dnk-stack span { width: 20px; height: 20px; border-radius: 50%; background: var(--dnk-line-strong); border: 2px solid var(--dnk-surface); margin-left: -7px; display: block; }
.dnk-stack span:first-child { margin-left: 0; }
.dnk-social { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--dnk-text-sm); font-weight: 800; color: var(--dnk-muted); }

/* ============================================================================
   Forms
   ========================================================================== */

.dnk-field { margin-bottom: var(--dnk-4); position: relative; }
.dnk-field > label { display: block; font-size: var(--dnk-text-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--dnk-muted); margin-bottom: .3rem; }
.dnk-input, .dnk-select, .dnk-textarea {
  width: 100%; font: inherit; font-size: var(--dnk-text-base); color: var(--dnk-ink);
  background: var(--dnk-surface); border: 1px solid var(--dnk-line);
  border-radius: var(--dnk-r-md); padding: .62rem .8rem;
  transition: border-color var(--dnk-fast), box-shadow var(--dnk-fast);
}
.dnk-input:focus, .dnk-select:focus, .dnk-textarea:focus { outline: none; border-color: var(--dnk-green); box-shadow: var(--dnk-ring); }
.dnk-input::placeholder { color: var(--dnk-faint); }
.dnk-input[disabled] { background: var(--dnk-subtle); color: var(--dnk-muted); cursor: not-allowed; }
.dnk-textarea { min-height: 140px; resize: vertical; line-height: var(--dnk-leading-body); }
.dnk-check { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--dnk-text-base); color: var(--dnk-body); margin: var(--dnk-3) 0; line-height: 1.45; }
.dnk-check input { width: auto; margin-top: .2rem; flex: 0 0 auto; accent-color: var(--dnk-green); }

/* ============================================================================
   Tables
   ========================================================================== */

.dnk-table { width: 100%; border-collapse: collapse; font-size: var(--dnk-text-base); }
.dnk-table th { text-align: left; font-size: var(--dnk-text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--dnk-muted); padding: .55rem .65rem; border-bottom: 1px solid var(--dnk-line); font-weight: 800; }
.dnk-table td { padding: .7rem .65rem; border-bottom: 1px solid var(--dnk-line); vertical-align: middle; }
.dnk-table tr:last-child td { border-bottom: 0; }

/* ============================================================================
   Modal
   ========================================================================== */

.dnk-scrim { position: fixed; inset: 0; background: rgba(11,46,26,.45); display: flex; align-items: center; justify-content: center; padding: var(--dnk-4); z-index: 2147483000; }
.dnk-modal { background: var(--dnk-surface); border-radius: var(--dnk-r-xl); box-shadow: var(--dnk-shadow-lg); width: min(440px, 100%); max-height: calc(100vh - 3rem); overflow: auto; padding: var(--dnk-6) var(--dnk-5) var(--dnk-5); position: relative; }
.dnk-modal__x { position: absolute; top: .6rem; right: .7rem; border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--dnk-muted); cursor: pointer; padding: .2rem .4rem; border-radius: var(--dnk-r-sm); }
.dnk-modal__x:hover { background: var(--dnk-subtle); }

/* ============================================================================
   Empty state
   ========================================================================== */

.dnk-empty { text-align: center; color: var(--dnk-muted); padding: var(--dnk-7) var(--dnk-4); font-size: var(--dnk-text-base); }

/* ============================================================================
   Event list — timeline rail. Luma's structural idea: the date sits outside the
   card on a rail, so a day reads as a group rather than repeating on every row.
   ========================================================================== */

.dnk-timeline { position: relative; }
.dnk-row { display: grid; grid-template-columns: 108px minmax(0,1fr); gap: var(--dnk-4); padding-bottom: var(--dnk-5); position: relative; }
.dnk-row__rail { padding-top: .9rem; position: relative; }
.dnk-row__day { font-size: var(--dnk-text-md); font-weight: 800; color: var(--dnk-ink); line-height: 1.25; }
.dnk-row__weekday { font-size: var(--dnk-text-sm); color: var(--dnk-muted); }
/* hairline + dot down the rail */
.dnk-row::before { content: ""; position: absolute; left: 96px; top: 1.35rem; bottom: 0; width: 1px; background: var(--dnk-line); }
.dnk-row:last-child::before { display: none; }
.dnk-row::after { content: ""; position: absolute; left: 93px; top: 1.15rem; width: 7px; height: 7px; border-radius: 50%; background: var(--dnk-line-strong); }
.dnk-row--soon::after { background: var(--dnk-green); }

.dnk-evcard { display: grid; grid-template-columns: minmax(0,1fr) 128px; gap: var(--dnk-4); padding: var(--dnk-4); text-decoration: none; color: inherit; }
.dnk-evcard__time { font-size: var(--dnk-text-sm); font-weight: 700; color: var(--dnk-muted); margin-bottom: .25rem; }
.dnk-evcard__title { font-size: var(--dnk-text-lg); font-weight: 800; color: var(--dnk-ink); line-height: var(--dnk-leading-snug); margin: 0 0 .4rem; letter-spacing: -.01em; }
.dnk-evcard__meta { font-size: var(--dnk-text-base); color: var(--dnk-muted); display: flex; align-items: center; gap: .35rem; }
.dnk-evcard__foot { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; }
.dnk-evcard__thumb { border-radius: var(--dnk-r-md); overflow: hidden; background: var(--dnk-subtle); height: 128px; }
.dnk-evcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 767px) {
  .dnk-row { grid-template-columns: 1fr; gap: .35rem; }
  .dnk-row::before, .dnk-row::after { display: none; }
  .dnk-row__rail { display: flex; gap: .45rem; align-items: baseline; padding-top: 0; }
  .dnk-evcard { grid-template-columns: minmax(0,1fr) 92px; padding: .9rem; }
  .dnk-evcard__thumb { height: 92px; }
}

/* ============================================================================
   Event detail — sticky rail left, content right
   ========================================================================== */

.dnk-detail { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: var(--dnk-7); align-items: start; }
.dnk-detail__rail { position: sticky; top: 6.5rem; }
.dnk-cover { border-radius: var(--dnk-r-xl); overflow: hidden; background: var(--dnk-subtle); aspect-ratio: 1/1; }
.dnk-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dnk-railblock { padding: var(--dnk-4) 0; border-top: 1px solid var(--dnk-line); }
.dnk-fact { display: flex; gap: .85rem; align-items: center; text-decoration: none; color: inherit; }
.dnk-fact__icon { width: 48px; height: 48px; border: 1px solid var(--dnk-line); border-radius: var(--dnk-r-md); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--dnk-green); }
.dnk-fact__t { font-size: var(--dnk-text-md); font-weight: 700; color: var(--dnk-ink); line-height: 1.3; }
.dnk-fact__s { font-size: var(--dnk-text-base); color: var(--dnk-muted); }

@media (max-width: 991px) {
  .dnk-detail { display: flex; flex-direction: column; gap: var(--dnk-5); }
  .dnk-detail__rail { position: static; width: 100%; }
  .dnk-cover { max-width: 420px; }
}

/* ============================================================================
   Rich text (event descriptions)
   ========================================================================== */

.dnk-rich { font-size: var(--dnk-text-md); line-height: var(--dnk-leading-body); color: var(--dnk-body); max-width: var(--dnk-measure); }
.dnk-rich p { margin: 0 0 .85rem; }
.dnk-rich h2, .dnk-rich h3 { font-size: var(--dnk-text-lg); font-weight: 800; color: var(--dnk-green); margin: 1.5rem 0 .5rem; }
.dnk-rich ul, .dnk-rich ol { margin: 0 0 .9rem 1.15rem; }
.dnk-rich li { margin-bottom: .3rem; }
.dnk-rich a { color: var(--dnk-green); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.dnk-rich blockquote { margin: 0 0 .9rem; padding-left: .9rem; border-left: 3px solid var(--dnk-line-strong); color: var(--dnk-muted); }
.dnk-rich img { max-width: 100%; height: auto; border-radius: var(--dnk-r-md); }
.dnk-rich hr { height: 1px; background: var(--dnk-line); border: 0; margin: var(--dnk-5) 0; }

/* ============================================================================
   Legacy aliases — admin.html shipped with one-letter names before this file
   existed. Keeping them mapped means the admin restyles without a rewrite.
   ========================================================================== */

:root {
  --g:    var(--dnk-green);
  --g2:   var(--dnk-green-hover);
  --ink:  var(--dnk-ink);
  --mut:  var(--dnk-muted);
  --line: var(--dnk-line);
  --bg:   var(--dnk-canvas);
}