/* ==========================================================================
   BASE — Design tokens · reset · shared components
   Palette is intentionally limited to four monochrome values.
   #E5E5E5  light   — main background
   #838484  mid     — dividers · numbers · large secondary type · text on dark
   #2C2D2C  dark    — dark sections · footer · admin
   #161616  black   — primary type · buttons · high-contrast dark
   ========================================================================== */

:root {
  --light: #E5E5E5;
  --mid:   #838484;
  --dark:  #2C2D2C;
  --black: #161616;

  --sans: "Helvetica Neue", Helvetica, Arial, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, "Courier New", monospace;

  --pad: clamp(20px, 4vw, 56px);
  --gap: clamp(12px, 2vw, 28px);
  --header-h: 72px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t: 500ms var(--ease);
}

@media (max-width: 720px) {
  :root { --header-h: 60px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--light);
  color: var(--black);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
abbr { text-decoration: none; }

::selection { background: var(--black); color: var(--light); }

/* --- Surfaces ----------------------------------------------------------- */
.on-light { background: var(--light); color: var(--black); --focus: var(--black); --line: var(--mid); }
.on-dark  { background: var(--black); color: var(--light); --focus: var(--light); --line: var(--mid); }
.on-dark2 { background: var(--dark);  color: var(--light); --focus: var(--light); --line: var(--mid); }

:focus-visible { outline: 2px solid var(--focus, var(--black)); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: 1800px;
  margin-inline: auto;
  padding-inline: var(--pad);
}

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

.skip {
  position: fixed; left: 12px; top: -80px; z-index: 200;
  padding: 12px 16px;
  background: var(--black); color: var(--light);
  font-size: 14px; text-decoration: none;
}
.skip:focus { top: 12px; outline: 2px solid var(--light); outline-offset: 2px; }

/* --- Small technical type ----------------------------------------------- */
.meta {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--black);
  --btn-fg: var(--light);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 56px;
  padding: 0 24px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background var(--t), color var(--t);
}
.btn__en {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.btn:hover { background: transparent; color: var(--btn-bg); }
.btn:disabled { cursor: progress; opacity: .6; }
.btn--wide { width: 100%; }
.btn--ghost { background: transparent; color: var(--btn-bg); }
.btn--ghost:hover { background: var(--btn-bg); color: var(--btn-fg); }

.on-dark .btn, .on-dark2 .btn { --btn-bg: var(--light); --btn-fg: var(--black); }

/* --- Form controls (shared by public form, login, admin) ---------------- */
.ctl {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--ctl-line, currentColor);
  border-radius: 0;
  color: inherit;
  font-size: 16px; /* 16px+ prevents iOS zoom on focus */
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--t);
}
.ctl::placeholder { color: inherit; opacity: .72; }
.ctl:hover { background: rgba(22, 22, 22, .04); }
.on-dark2 .ctl:hover, .on-dark .ctl:hover { background: rgba(229, 229, 229, .06); }
.ctl:focus-visible { outline: 2px solid var(--focus, var(--black)); outline-offset: 2px; }
.ctl--area { min-height: 220px; resize: vertical; }

select.ctl {
  padding-right: 48px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23161616' stroke-width='1.6'/></svg>");
}
.on-dark2 select.ctl, .on-dark select.ctl {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23E5E5E5' stroke-width='1.6'/></svg>");
}
select.ctl option { color: #161616; background: #E5E5E5; }

input[type="search"].ctl::-webkit-search-cancel-button { -webkit-appearance: none; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}