@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&family=Lato:wght@400;700&family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
/* ============================================================================
   Kadence Utility CSS Framework  -  ported to TT5/FSE for hyunokjang.com
   Source of truth: 03 knowledge/55 framework/Kadence Utility CSS Framework.md
   Ported from the rain (elearning staging) ASE snippets 43842 (Tokens) +
   43847 (Utilities). Port changes: Kadence color/font aliases literalized;
   broken var() media queries literalized to 768px; --t-heading-weight declared.
   Additive rule-classes (which rain got from Kadence native blocks): .u-btn*,
   .c-hero, .c-cta-band, .c-doors, plus small front-door helpers. No bespoke
   namespace; framework BEM grammar only (.u-*, .c-name__el, .c-name--mod).
   ============================================================================ */

/* ---- TOKENS (43842.css, aliases literalized) ----------------------------- */
:root{
  --t-brand-primary:#D61818; --t-brand-primary-2:#C41212;
  --t-brand-accent:#FAAC00; --t-brand-action:#004CA9;
  --t-text-strongest:#222222; --t-text-strong:#4E4E4E; --t-text-medium:#696969; --t-text-subtle:#818181;
  --t-surface-subtle:#F1F1F1; --t-surface-muted:#F7F7F7; --t-surface-base:#FFFFFF;
  --t-border-color:#E5E5E5;
  --t-font-body:"Lato", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --t-font-heading:"Cabin", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --t-font-kr:"Noto Sans KR", var(--t-font-heading);
  --t-heading-weight:700;
  --t-space-xxs:0.5rem; --t-space-xs:1rem; --t-space-sm:1.5rem; --t-space-md:2rem; --t-space-lg:3rem;
  --t-space-xl:4rem; --t-space-xxl:5rem; --t-space-3xl:6.5rem; --t-space-4xl:8rem; --t-space-5xl:10rem;
  --t-radius-sm:4px; --t-radius-md:8px; --t-radius-lg:16px; --t-radius-xl:32px; --t-radius-pill:999px;
  --t-shadow-flat:none; --t-shadow-1:0 4px 12px rgba(0,0,0,0.10); --t-shadow-2:0 6px 18px rgba(0,0,0,0.15);
  --t-ease:cubic-bezier(.22,.61,.36,1); --t-dur-fast:120ms; --t-dur:200ms;
  --t-container-max:1190px; --t-gutter-sm:1rem; --t-gutter:1.5rem; --t-gutter-lg:2rem;
  --t-bp-sm:768px; --t-bp-md:1024px; --t-bp-lg:1200px;
  --t-success-bg:#E8F6ED; --t-success-text:#1F7A3B; --t-info-bg:#E8F1FB; --t-info-text:#164A96;
  --t-text-on-accent:#FFFFFF;
}
:root{
  --t-text-on-base:var(--t-text-strongest); --t-text-on-muted:var(--t-text-strongest); --t-text-on-subtle:var(--t-text-strongest);
  /* links are the brand red, exactly as the rain framework */
  --t-link:var(--t-brand-primary); --t-link-hover:var(--t-brand-primary-2);
  --t-focus-ring:0 0 0 3px color-mix(in oklab, var(--t-brand-primary-2) 25%, white);
  --t-card-bg:var(--t-surface-base); --t-card-text:var(--t-text-on-base);
  --t-card-border:1px solid var(--t-border-color); --t-card-shadow:var(--t-shadow-1); --t-card-shadow-h:var(--t-shadow-2);
  --t-btn-radius:var(--t-radius-md); --t-btn-py:24px; --t-btn-px:32px;
  --t-btn-primary-bg:var(--t-brand-primary); --t-btn-primary-text:var(--t-text-on-accent);
  --t-btn-primary-bg-hover:var(--t-brand-primary-2); --t-btn-primary-bg-active:color-mix(in oklab, var(--t-brand-primary-2) 80%, black);
  --t-btn-primary-shadow:var(--t-shadow-1);
  --t-btn-secondary-bg:var(--t-surface-base); --t-btn-secondary-text:var(--t-text-strongest);
  --t-btn-secondary-border:1px solid var(--t-border-color); --t-btn-secondary-bg-hover:var(--t-surface-subtle);
  --t-btn-tertiary-text:var(--t-brand-primary); --t-btn-tertiary-text-hover:var(--t-brand-primary-2);
  --t-badge-radius:var(--t-radius-pill); --t-badge-py:4px; --t-badge-px:8px;
  --t-badge-neutral-bg:var(--t-surface-subtle); --t-badge-neutral-text:var(--t-text-strong);
  --t-nav-text:var(--t-text-strongest); --t-nav-text-active:var(--t-brand-primary-2);
}

/* ---- UTILITIES (43847.css, ported; broken media query literalized) -------- */
.u-surface-base{ background:var(--t-surface-base); color:var(--t-text-on-base); }
.u-surface-muted{ background:var(--t-surface-muted); color:var(--t-text-on-muted); }
.u-surface-subtle{ background:var(--t-surface-subtle); color:var(--t-text-on-subtle); }
.u-elev-0{ --t-card-shadow:var(--t-shadow-flat); }
.u-elev-1{ --t-card-shadow:var(--t-shadow-1); }
.u-elev-2{ --t-card-shadow:var(--t-shadow-2); }
.u-hover-lift{ transition:transform var(--t-dur) var(--t-ease), box-shadow var(--t-dur) var(--t-ease); }
.u-hover-lift:hover{ transform:translateY(-3px); --t-card-shadow:var(--t-shadow-2); }
.u-rad-sm{ border-radius:var(--t-radius-sm); } .u-rad-md{ border-radius:var(--t-radius-md); }
.u-rad-lg{ border-radius:var(--t-radius-lg); } .u-rad-pill{ border-radius:var(--t-radius-pill); }
.u-border{ border:1px solid var(--t-border-color); } .u-border-0{ border:0; }
.u-p-xxs{ padding:var(--t-space-xxs); } .u-p-xs{ padding:var(--t-space-xs); } .u-p-sm{ padding:var(--t-space-sm); } .u-p-md{ padding:var(--t-space-md); } .u-p-lg{ padding:var(--t-space-lg); }
.u-px-xs{ padding-inline:var(--t-space-xs); } .u-px-sm{ padding-inline:var(--t-space-sm); } .u-px-md{ padding-inline:var(--t-space-md); } .u-px-lg{ padding-inline:var(--t-space-lg); }
.u-py-xs{ padding-block:var(--t-space-xs); } .u-py-sm{ padding-block:var(--t-space-sm); } .u-py-md{ padding-block:var(--t-space-md); } .u-py-lg{ padding-block:var(--t-space-lg); }
.u-py-xl{ padding-block:var(--t-space-xl); } .u-py-xxl{ padding-block:var(--t-space-xxl); }
.u-pt-0{ padding-top:0 !important; } .u-pb-0{ padding-bottom:0 !important; } .u-pl-0{ padding-left:0 !important; } .u-pr-0{ padding-right:0 !important; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.mt-xxs{ margin-top:var(--t-space-xxs); } .mb-xxs{ margin-bottom:var(--t-space-xxs); }
.mt-xs{ margin-top:var(--t-space-xs); } .mb-xs{ margin-bottom:var(--t-space-xs); }
.mt-sm{ margin-top:var(--t-space-sm); } .mb-sm{ margin-bottom:var(--t-space-sm); }
.mt-md{ margin-top:var(--t-space-md); } .mb-md{ margin-bottom:var(--t-space-md); }
.mt-lg{ margin-top:var(--t-space-lg); } .mb-lg{ margin-bottom:var(--t-space-lg); }
.u-grid{ display:grid !important; gap:var(--t-gutter); }
.u-grid-auto{ grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
@media (max-width:768px){ .u-grid-auto{ grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:var(--t-space-sm); } }
.u-text-strongest{ color:var(--t-text-strongest); } .u-text-strong{ color:var(--t-text-strong); } .u-text-medium{ color:var(--t-text-medium); } .u-text-subtle{ color:var(--t-text-subtle); }
.u-link{ color:var(--t-link); text-decoration:none; } .u-link:hover{ color:var(--t-link-hover); }
.u-link-clean{ text-decoration:none !important; }
.u-card{ background:var(--t-card-bg); color:var(--t-card-text); border:var(--t-card-border); border-radius:var(--t-radius-md); box-shadow:var(--t-card-shadow); padding:var(--t-space-md); transition:transform var(--t-dur) var(--t-ease), box-shadow var(--t-dur) var(--t-ease); }
.u-card.u-card-xs{ padding:var(--t-space-xs); } .u-card.u-card-sm{ padding:var(--t-space-sm); } .u-card.u-card-lg{ padding:var(--t-space-lg); }
.u-card.u-hover-lift:hover{ box-shadow:var(--t-card-shadow-h); }
.u-sticky-24{ position:sticky; top:24px; } .u-sticky-48{ position:sticky; top:48px; }
.u-pill{ display:inline-block; border-radius:var(--t-badge-radius); padding:var(--t-badge-py) var(--t-badge-px); font-size:.875rem; font-weight:500; }
.u-pill--neutral{ background:var(--t-badge-neutral-bg); color:var(--t-badge-neutral-text); }
.u-pill--success{ background:var(--t-success-bg); color:var(--t-success-text); }
.u-pill--info{ background:var(--t-info-bg); color:var(--t-info-text); }
.u-focus-ring:focus-visible{ box-shadow:var(--t-focus-ring); outline:0; }
.u-wrap{ max-width:var(--t-container-max); margin-inline:auto; padding-inline:var(--t-gutter); }

/* ---- ADDITIVE: full-bleed helper for edge-to-edge bands ------------------- */
.c-bleed{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw; max-width:100vw; }

/* ---- ADDITIVE: buttons (tokens existed; rule-classes are new) ------------- */
.u-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--t-font-heading); font-weight:var(--t-heading-weight); font-size:1rem; line-height:1; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; padding:var(--t-btn-py) var(--t-btn-px); border-radius:var(--t-btn-radius); border:1.5px solid transparent; cursor:pointer; transition:transform var(--t-dur) var(--t-ease), background-color var(--t-dur) var(--t-ease), color var(--t-dur) var(--t-ease), border-color var(--t-dur) var(--t-ease), box-shadow var(--t-dur) var(--t-ease); }
.u-btn--sm{ padding:.85rem 1.4rem; font-size:.9rem; }
.u-btn--primary{ background:var(--t-btn-primary-bg); color:var(--t-btn-primary-text); box-shadow:var(--t-btn-primary-shadow); }
.u-btn--primary:hover{ background:var(--t-btn-primary-bg-hover); transform:translateY(-2px); }
.u-btn--primary:active{ background:var(--t-btn-primary-bg-active); transform:none; }
.u-btn--secondary{ background:var(--t-btn-secondary-bg); color:var(--t-btn-secondary-text); border:var(--t-btn-secondary-border); }
.u-btn--secondary:hover{ background:var(--t-btn-secondary-bg-hover); }
.u-btn--tertiary{ background:transparent; color:var(--t-btn-tertiary-text); padding-inline:.5rem; text-transform:none; letter-spacing:0; }
.u-btn--tertiary:hover{ color:var(--t-btn-tertiary-text-hover); }
.u-btn:focus-visible{ box-shadow:var(--t-focus-ring); outline:0; }

/* ---- ADDITIVE: front-door macro components (compose utilities + tokens) --- */
.c-hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--t-space-xl); align-items:center; padding-block:var(--t-space-xxl); }
.c-hero__eyebrow{ margin-bottom:var(--t-space-sm); }
.c-hero__title{ font-family:var(--t-font-heading); font-weight:var(--t-heading-weight); color:var(--t-text-strongest); font-size:clamp(2.4rem,5vw,3.6rem); line-height:1.05; letter-spacing:-.02em; margin:0 0 var(--t-space-sm); }
.c-hero__lead{ font-size:clamp(1.05rem,1.5vw,1.2rem); color:var(--t-text-strong); max-width:34rem; margin:0 0 var(--t-space-md); line-height:1.6; }
.c-hero__actions{ margin-bottom:var(--t-space-sm); }
.c-hero__micro{ font-size:.9rem; color:var(--t-text-medium); margin:0; }
.c-hero__media{ display:flex; justify-content:center; }
.c-portrait{ position:relative; width:100%; max-width:430px; aspect-ratio:4/5; border-radius:var(--t-radius-lg); overflow:hidden; background:linear-gradient(160deg,#FCEFD6,#F6DBC2); border:1px solid var(--t-border-color); box-shadow:var(--t-shadow-2); display:grid; place-items:center; }
.c-portrait img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; }
.c-portrait__ph{ text-align:center; padding:var(--t-space-md); }
.c-portrait__seal{ display:block; font-family:var(--t-font-kr); font-weight:700; font-size:clamp(3rem,8vw,5rem); color:var(--t-brand-primary); line-height:1; }
.c-portrait__note{ font-size:.9rem; color:var(--t-text-medium); margin:.6rem 0 0; }
.c-portrait__badge{ position:absolute; left:var(--t-space-sm); bottom:var(--t-space-sm); background:var(--t-surface-base); border-radius:var(--t-radius-pill); padding:.5rem 1rem; font-family:var(--t-font-heading); font-weight:700; font-size:.85rem; color:var(--t-text-strongest); box-shadow:var(--t-shadow-1); }
.c-seclabel{ display:flex; align-items:center; gap:.7rem; font-family:var(--t-font-heading); font-weight:700; font-size:.85rem; letter-spacing:.13em; text-transform:uppercase; color:var(--t-text-strongest); margin:0 0 var(--t-space-md); }
.c-seclabel::before{ content:""; width:1.8rem; height:2px; background:var(--t-brand-primary); }
.c-stat__num{ display:block; font-family:var(--t-font-heading); font-weight:var(--t-heading-weight); color:var(--t-brand-primary); font-size:clamp(2.4rem,5vw,3.2rem); line-height:1; margin-bottom:var(--t-space-xxs); }
.c-stat__label{ display:block; font-family:var(--t-font-heading); font-weight:700; color:var(--t-text-strongest); font-size:1.1rem; margin-bottom:.3rem; }
.c-stat p{ margin:0; }
.c-note{ font-family:var(--t-font-heading); font-weight:700; color:var(--t-text-strongest); font-size:clamp(1.3rem,2.6vw,1.8rem); line-height:1.35; max-width:42rem; margin:0; }
.c-cta-band{ background:#191919; position:relative; overflow:hidden; }
.c-cta-band__inner{ position:relative; z-index:1; max-width:680px; margin-inline:auto; text-align:center; padding-block:var(--t-space-xxl); }
.c-cta-band__glyph{ position:absolute; inset:0; display:grid; place-items:center; margin:0; font-family:var(--t-font-kr); font-weight:900; color:rgba(255,255,255,.05); font-size:clamp(9rem,26vw,20rem); line-height:1; white-space:nowrap; pointer-events:none; user-select:none; }
.c-cta-band__title{ font-family:var(--t-font-heading); font-weight:var(--t-heading-weight); color:#fff; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1; margin:0 0 var(--t-space-sm); }
.c-cta-band__lead{ color:rgba(255,255,255,.8); font-size:1.1rem; margin:0 0 var(--t-space-md); }
.c-cta-band .u-btn--tertiary{ color:#fff; }
.c-cta-band .u-btn--tertiary:hover{ color:rgba(255,255,255,.78); }
.c-doors{ display:flex; flex-wrap:wrap; gap:var(--t-space-sm); align-items:center; }
.c-doors--center{ justify-content:center; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:900px){
  .c-hero__inner{ grid-template-columns:1fr; gap:var(--t-space-lg); padding-block:var(--t-space-xl); }
  .c-hero__media{ order:-1; }
  .c-portrait{ max-width:360px; }
}
@media (max-width:768px){
  .c-doors .u-btn--primary{ flex:1 1 auto; }
}

/* ============================================================================
   POLISH LAYER  -  2026-06-14  (refinement of existing tokens; no new tokens)
   Layered soft shadows, faint surface gradients, top-light highlight, softer
   card radius (reuses --t-radius-lg), tactile hover, primary-button glow.
   Adds one new component: .c-bento (asymmetric feature grid).
   ============================================================================ */
:root{
  --t-shadow-1: 0 1px 3px rgba(20,20,20,.05), 0 10px 24px rgba(20,20,20,.09);
  --t-shadow-2: 0 4px 12px rgba(20,20,20,.07), 0 28px 56px rgba(20,20,20,.15);
}
.u-card{ border-radius: var(--t-radius-lg); background: linear-gradient(180deg,#ffffff 0%,#f8f8fa 100%); border-color: rgba(20,20,20,.07); box-shadow: var(--t-card-shadow), inset 0 1px 0 rgba(255,255,255,.8); }
.u-card.u-hover-lift:hover{ transform: translateY(-5px); box-shadow: var(--t-card-shadow-h), inset 0 1px 0 rgba(255,255,255,.8); }
a.u-card{ display:block; text-decoration:none; color:inherit; cursor:pointer; }
a.u-card:hover{ border-color: rgba(214,24,24,.28); }
.u-btn--primary{ background: linear-gradient(180deg,#E11D1D 0%,#D61818 100%); box-shadow: 0 1px 2px rgba(120,8,8,.22), 0 8px 18px rgba(214,24,24,.28); }
.u-btn--primary:hover{ box-shadow: 0 2px 5px rgba(120,8,8,.24), 0 14px 26px rgba(214,24,24,.34); }
.u-btn--primary:active{ transform: translateY(1px); box-shadow: 0 1px 2px rgba(120,8,8,.30); }
.u-pill--neutral{ border:1px solid rgba(20,20,20,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(20,20,20,.03); }
.c-portrait{ box-shadow: var(--t-shadow-2), inset 0 0 0 1px rgba(255,255,255,.4); }
.c-cta-band{ background: radial-gradient(125% 150% at 50% 0%, #272727 0%, #151515 62%); }

/* --- Bento: asymmetric feature grid (one large anchor + supporting tiles) -- */
.c-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(150px,auto); gap:var(--t-gutter); }
.c-bento__hero{ grid-column:span 2; grid-row:span 2; position:relative; overflow:hidden; justify-content:flex-start; }
.c-bento__wide{ grid-column:span 2; }
.c-bento__tile{ display:flex; flex-direction:column; gap:.55rem; }
.c-bento__glyph{ position:absolute; right:-.3rem; bottom:-1.6rem; font-family:var(--t-font-kr); font-weight:900; font-size:clamp(7rem,12vw,11rem); line-height:1; color:rgba(214,24,24,.06); pointer-events:none; user-select:none; }
.c-bento__ico{ width:34px; height:34px; color:var(--t-brand-primary); }
.c-bento__num{ font-family:var(--t-font-heading); font-weight:var(--t-heading-weight); color:var(--t-brand-primary); font-size:clamp(2.6rem,5vw,3.4rem); line-height:1; }
.c-bento__h{ font-family:var(--t-font-heading); font-weight:700; color:var(--t-text-strongest); font-size:1.2rem; margin:0; }
.c-bento__hero .c-bento__h{ font-size:clamp(1.5rem,2.5vw,2rem); }
.c-bento__p{ color:var(--t-text-strong); margin:0; line-height:1.5; }
.c-bento__hero .c-bento__p{ max-width:30rem; }
@media (max-width:820px){ .c-bento{ grid-template-columns:1fr 1fr; } .c-bento__hero{ grid-column:span 2; grid-row:auto; } .c-bento__wide{ grid-column:span 2; } }
@media (max-width:520px){ .c-bento{ grid-template-columns:1fr; } .c-bento__hero,.c-bento__wide{ grid-column:span 1; } }

/* Section label: hairline rule entering from the right edge, fading out before the label */
.c-seclabel{ gap:.9rem; }
.c-seclabel::after{ content:""; flex:1 1 auto; min-width:2rem; height:1px; background:linear-gradient(90deg, rgba(20,20,20,0) 0%, rgba(20,20,20,.05) 35%, rgba(20,20,20,.16) 100%); }
/* Buttons: keep legible text over theme.json's global link color (a{color:brand-red}) */
.u-btn--primary{ color:#ffffff !important; }
.u-btn--secondary{ color:var(--t-text-strongest) !important; }
.u-btn--tertiary{ color:var(--t-btn-tertiary-text) !important; }
.c-cta-band .u-btn--tertiary{ color:#ffffff !important; }
.c-cta-band .u-btn--tertiary:hover{ color:rgba(255,255,255,.78) !important; }

/* Split: 2-col intro/content layout (additive, token-based) */ .c-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--t-space-xl);align-items:center;} .c-split--lead{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);} .c-split__media{width:100%;} @media (max-width:900px){.c-split,.c-split--lead{grid-template-columns:1fr;gap:var(--t-space-lg);}}

/* Plan / pricing component (additive, token-based) */ .c-plan{display:flex;flex-direction:column;height:100%;} .c-plan__price{font-family:var(--t-font-heading);font-weight:800;font-size:clamp(2rem,4vw,2.6rem);color:var(--t-text-strongest);margin:.5rem 0 .2rem;line-height:1;} .c-plan__price small{font-size:1rem;font-weight:600;color:var(--t-text-medium);} .c-plan__features{list-style:none;padding:0;margin:1rem 0 1.4rem;line-height:1.95;color:var(--t-text-strong);} .c-plan__features li{padding-left:1.4rem;position:relative;} .c-plan__features li::before{content:"\2713";position:absolute;left:0;color:var(--t-brand-primary);font-weight:700;} .c-plan--featured{border-color:rgba(214,24,24,.28);} .c-plan .u-btn{margin-top:auto;align-self:flex-start;}