/* ==========================================================================
   LEE KIM online application forms - leekim.com design system
   my.leekim.com (Drupal theme: zurblk / Foundation 6)
   Load AFTER the theme CSS, only on the application form routes (see README).
   Version 1.1 (2026-10-29) - Chinese font fallback for /cn pages
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* 1. Tokens (same values as leekim.com) ----------------------------------- */
:root {
  --lk-bronze: #B5863E;        /* accent only: buttons, focus, small labels */
  --lk-bronze-dark: #8C6630;   /* hover, small accent text */
  --lk-bronze-50: #F7EFE1;     /* soft accent background */
  --lk-ink: #15120D;           /* body text, headings */
  --lk-paper: #FAF8F4;         /* page background */
  --lk-line-1: #F2EEE7;        /* table header background, subtle fills */
  --lk-line-2: #E5DFD5;        /* borders */
  --lk-muted: #7D7567;         /* helper text */
  --lk-body: #585245;          /* secondary text */
  --lk-danger: #A23B2A;        /* errors, required marks */
  --lk-radius: 10px;
  --lk-font: Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

/* Language fallbacks: Pretendard covers Korean, Latin and Vietnamese, but has no Chinese characters.
   On /cn pages Latin and numbers stay Pretendard; Chinese characters use the system Chinese font. */
body.lang-zh-hans, html:lang(zh) body, html:lang(zh-hans) body {
  --lk-font: Pretendard, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
}

/* 2. Base ------------------------------------------------------------------ */
html, body { background: var(--lk-paper) !important; }
body, body button, body input, body select, body textarea,
body h1, body h2, body h3, body h4, body h5, body h6, body p, body li, body td, body th, body label, body small, body strong, body div, body span, body a {
  font-family: var(--lk-font) !important;
}
body { color: var(--lk-ink); line-height: 1.7; word-break: keep-all; -webkit-font-smoothing: antialiased; }
body .fa, body .fas, body .far, body .fab, body [class^="fa-"], body [class*=" fa-"] { font-family: "Font Awesome 5 Free", "FontAwesome" !important; }
a { color: var(--lk-bronze-dark); }
a:hover, a:focus { color: var(--lk-ink); }
.grid-container { max-width: 1120px; }

/* 3. Page title ------------------------------------------------------------ */
h1.main-title {
  margin: 36px 0 8px; font-size: clamp(26px, 3.4vw, 36px) !important; line-height: 1.3; font-weight: 700;
  letter-spacing: -.01em; color: var(--lk-ink) !important; text-wrap: balance;
}
/*h1.main-title::before {*/
/*  content: "ONLINE APPLICATION"; display: flex; align-items: center; justify-content: center; gap: 10px;*/
/*  margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--lk-bronze-dark);*/
/*}*/
/*h1.main-title > i { display: none; }*/

/* 4. Section titles -------------------------------------------------------- */
.title, form h2, form h3:not(.text-center) {
  display: flex; align-items: center; gap: 12px; margin: 44px 0 14px !important;
  font-size: 21px !important; line-height: 1.4; font-weight: 700; color: var(--lk-ink) !important; letter-spacing: -.01em;
}
.title::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--lk-bronze); flex: none; }

/* 5. Tables (main input layout) ------------------------------------------- */
table, table.unstriped {
  width: 100%; border-collapse: separate !important; border-spacing: 0; margin-bottom: 0;
  background: #fff; border: 1px solid var(--lk-line-2) !important; border-radius: var(--lk-radius); overflow: hidden;
}
table thead, table tbody, table tfoot, table tr { background: transparent !important; border: 0 !important; }
table th, table thead td, table td.td-header, table td.col-label {
  background: var(--lk-line-1) !important; color: var(--lk-ink) !important; font-size: 14px !important; font-weight: 600 !important;
}
table th, table td { padding: 12px 14px !important; border: 0 !important; border-bottom: 1px solid var(--lk-line-2) !important; vertical-align: middle; }
table th + th, table td + td, table th + td, table td + th { border-left: 1px solid var(--lk-line-2) !important; }
table tr:last-child > td, table tr:last-child > th { border-bottom: 0 !important; }
table table { border-radius: 8px; }               /* nested tables (visa spouse, contact) */
table td.col-content { background: #fff; }
/* group rows coloured inline in the templates (light green / light blue / azure) -> one soft bronze tone */
table td[style*="background-color"], table th[style*="background-color"] {
  background: var(--lk-bronze-50) !important; color: var(--lk-ink) !important; font-weight: 700 !important;
}
/* label-value tables: first cell of a row is the label (same look as header cells) */
table:not(:has(> thead)) > tbody > tr > td:first-child:not(:only-child) {
  background: var(--lk-line-1) !important; color: var(--lk-ink) !important; font-size: 14px !important; font-weight: 600 !important;
}

/* 6. Inputs ---------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"],
input[type="password"], input[type="search"], input:not([type]), select, textarea {
  width: 100%; height: auto; min-height: 44px; margin: 0; padding: 10px 14px !important; box-sizing: border-box;
  border: 1px solid var(--lk-line-2) !important; border-radius: 8px !important; box-shadow: none !important;
  background-color: #fff !important; color: var(--lk-ink) !important; font-size: 15px !important; line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 110px; }
select {
  padding-right: 38px !important; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237D7567' stroke-width='1.6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px 8px !important;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--lk-bronze) !important; box-shadow: 0 0 0 4px rgba(181, 134, 62, .14) !important;
}
input[disabled], input[readonly], select[disabled], textarea[disabled] { background-color: var(--lk-line-1) !important; color: var(--lk-muted) !important; }
::placeholder { color: #A39C90 !important; opacity: 1; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--lk-bronze); width: 16px; height: 16px; margin: 0 6px 0 0; vertical-align: -2px; }
label { color: var(--lk-ink); font-size: 15px; }
p small, .description, .form-item .description { color: var(--lk-muted) !important; font-size: 13px !important; }
.form-required::after, .js-form-required::after { color: var(--lk-danger); }

/* 7. Buttons --------------------------------------------------------------- */
.button, button.button, input.button, label.button, a.button {
  display: inline-flex; vertical-align: middle; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 10px 18px !important; border-radius: 6px !important; border: 1px solid transparent !important;
  font-size: 14px !important; font-weight: 600 !important; line-height: 1.2; letter-spacing: 0; text-decoration: none;
  box-shadow: none !important; transition: background .15s, border-color .15s, color .15s;
}
.button.expanded { display: flex; width: 100%; }
/* primary: upload / check / save = bronze */
.button, .button.primary, label.button { background: var(--lk-bronze) !important; color: #fff !important; }
.button:hover, .button.primary:hover, label.button:hover { background: var(--lk-bronze-dark) !important; color: #fff !important; }
/* add row (was red) = outline, secondary action */
.button.alert:not(.expanded) {
  background: #fff !important; color: var(--lk-bronze-dark) !important; border-color: var(--lk-bronze) !important;
}
.button.alert:not(.expanded)::before { content: "+"; font-weight: 700; }
.button.alert:not(.expanded):hover { background: var(--lk-bronze-50) !important; }
/* main submit (next / complete) = ink */
.button.alert.expanded, #sgf_application_complete_btn {
  background: var(--lk-ink) !important; color: #fff !important; border-color: var(--lk-ink) !important;
}
.button.alert.expanded:hover, #sgf_application_complete_btn:hover { background: var(--lk-bronze) !important; border-color: var(--lk-bronze) !important; }
/* back / close = neutral outline */
.button.secondary:not(label) { background: #fff !important; color: var(--lk-ink) !important; border-color: var(--lk-line-2) !important; }
.button.secondary:not(label):hover { background: var(--lk-line-1) !important; }
label.button.secondary { background: var(--lk-bronze) !important; color: #fff !important; }
/* print = neutral outline */
.button.success { background: #fff !important; color: var(--lk-ink) !important; border-color: var(--lk-line-2) !important; }
.button.success:hover { background: var(--lk-line-1) !important; }
/* edit (warning) = neutral outline */
.button.warning { background: #fff !important; color: var(--lk-ink) !important; border-color: var(--lk-line-2) !important; }
.button.warning:hover { background: var(--lk-line-1) !important; }
.button[disabled], .button.disabled { opacity: .45; cursor: not-allowed; }
/* row delete icons */
.fa-trash-alt, .far.fa-trash-alt, .fas.fa-trash-alt { color: var(--lk-muted) !important; cursor: pointer; transition: color .15s; }
.fa-trash-alt:hover { color: var(--lk-danger) !important; }
.fa-times, .fas.fa-times { color: var(--lk-danger) !important; }
.fa-check, .fas.fa-check { color: #2F7A4F !important; }

/* 8. Notes (callouts) ------------------------------------------------------ */
.callout {
  margin: 16px 0 0 !important; padding: 18px 22px !important; border: 1px solid var(--lk-line-2) !important; border-left: 3px solid var(--lk-bronze) !important;
  border-radius: 0 var(--lk-radius) var(--lk-radius) 0 !important; background: #fff !important; color: var(--lk-body) !important; font-size: 14.5px;
}
.callout.primary { background: #fff !important; }
.callout.warning { background: var(--lk-bronze-50) !important; }
.callout.alert   { background: #FBF0EC !important; border-left-color: var(--lk-danger) !important; }
.callout ul { margin: 6px 0 0 18px; }
.callout li { margin: 2px 0; color: var(--lk-body); }
.callout li strong, .callout b, .callout strong { color: var(--lk-ink); }
.callout > :first-child { font-weight: 700; color: var(--lk-bronze-dark) !important; }
.callout [style*="color: red"], .callout [style*="color:red"], .callout .text-red, .callout li[style] { color: var(--lk-danger) !important; }

/* 9. Header, language switch, misc ---------------------------------------- */
#application-form > .cell:first-child, .application-epsp-2026 > .cell:first-child { border-bottom: 1px solid var(--lk-line-2); padding-bottom: 12px; }
.sl-nav img { border-radius: 4px; }
.fa-info-circle, .fas.fa-info-circle { color: var(--lk-muted) !important; }
.backtotop { color: var(--lk-bronze-dark) !important; font-size: 13px; }
.reveal { border: 1px solid var(--lk-line-2) !important; border-radius: 14px !important; box-shadow: 0 20px 60px rgba(21, 18, 13, .18) !important; }
.reveal h1, .reveal h3, .reveal h4 { color: var(--lk-ink) !important; font-weight: 700; }
.reveal-overlay { background: rgba(21, 18, 13, .45) !important; }

/* 10. Mobile --------------------------------------------------------------- */
@media (max-width: 639px) {
  h1.main-title { margin-top: 24px; }
  .title { margin-top: 32px !important; font-size: 18px !important; }
  table th, table td { padding: 10px !important; }
  .callout { padding: 14px 16px !important; }
  input, select, textarea { font-size: 16px !important; max-width: 100%; min-width: 0; }   /* 16px stops iOS zoom on focus */
  a { overflow-wrap: anywhere; }
  .grid-x > * { min-width: 0; max-width: 100%; }   /* flex items otherwise grow to the widest table */
  .table-scroll, table { position: relative; }      /* keeps hidden file inputs (position:absolute) inside the scroll box */
  /* grid tables (with a header row): scroll inside the table, columns stay aligned */
  table:has(> thead) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table:has(> thead) th, table:has(> thead) td { min-width: 72px; }
  /* label-value tables (no header row): stack label above value */
  table:not(:has(> thead)), table:not(:has(> thead)) > tbody, table:not(:has(> thead)) > tbody > tr { display: block; width: 100% !important; }
  table:not(:has(> thead)) > tbody > tr > td, table:not(:has(> thead)) > tbody > tr > th {
    display: block; width: 100% !important; box-sizing: border-box; border-left: 0 !important;
    text-align: left !important; overflow: hidden;   /* contains floated radios so the next label starts on a new line */
  }
  table:not(:has(> thead)) > tbody > tr > td:empty { display: none; }
}