/* Shared component values audited against Figma, 2026-09-21.
   Loaded after page layouts. Sizes: md=44px, lg=52px. */
:root {
  --gradient: linear-gradient(90deg, #60a5fa 0%, #68fcf0 60%, #68fcf0 100%);
  --gradient-hover: linear-gradient(90deg, #93c5fd 0%, #a6fef6 60%, #a6fef6 100%);
  --gradient-pressed: linear-gradient(90deg, #3b82f6 0%, #21f8e6 60%, #21f8e6 100%);
}

/* Navigation: hover keeps white text; selected uses gradient text. */
.nav-link, .nav-trigger { line-height:24px; color:#fff; }
.nav-label { display:inline-block; position:relative; }
.nav-link:hover, .nav-trigger:hover { color:#fff; }
.nav-link[aria-current=page] .nav-label,
.nav-trigger.selected .nav-label,
.submenu a[aria-current=page] .nav-label {
  background:var(--gradient); background-clip:text; -webkit-background-clip:text; color:transparent;
}
.submenu { min-width:178px; }
.submenu a { height:44px; padding:10px 16px; font-size:16px; line-height:20px; font-weight:500; color:#fff; display:flex; align-items:center; }
.submenu a:hover { background:transparent; color:#fff; }
@media(min-width:1024px) {
  .nav-link, .nav-trigger { padding:12px 16px 14px; }
  .nav-label::after { content:''; position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:var(--gradient); opacity:1; transform:scaleX(0); transform-origin:left center; transition:transform .3s ease; }
  .nav-link:hover>.nav-label::after, .nav-trigger:hover>.nav-label::after,
  .nav-link:focus-visible>.nav-label::after, .nav-trigger:focus-visible>.nav-label::after,
  .nav-link[aria-current=page]>.nav-label::after, .nav-trigger.selected>.nav-label::after { transform:scaleX(1); }
  .submenu a:hover .nav-label { background:var(--gradient); background-clip:text; -webkit-background-clip:text; color:transparent; }
}
@media(prefers-reduced-motion:reduce) { .nav-label::after { transition:none; } }
@media(min-width:1024px) and (max-width:1279px) { .nav-link,.nav-trigger { padding-inline:12px; } }
@media(max-width:1023px) {
  .navigation { padding:20px 20px 0; }
  .nav-link,.nav-trigger { height:56px; padding:0; font-size:18px; line-height:26px; font-weight:600; }
  .nav-trigger.selected .nav-label { background:none; color:#fff; }
  .nav-trigger .icon { width:24px; height:24px; margin-right:10px; }
  .submenu { margin-top:8px; padding:0 16px; }
  .submenu a { padding:0; font-size:16px; line-height:24px; font-weight:600; color:#e5e6e9; }
  .submenu a+a { margin-top:4px; }
  .submenu a:hover { color:#e5e6e9; }
  .header-contact { margin:40px 0 20px; }
}

/* Buttons: explicit styles prevent page styles from changing state colors. */
.button,.slide .button { font-size:16px; font-weight:500; line-height:20px; position:relative; }
.button .button-icon { display:block; width:24px; height:24px; flex-shrink:0; background:none; mask:none; object-fit:contain; filter:brightness(0) invert(1); }
.button.primary .button-icon { filter:brightness(0); }
.button.brand-outline .button-icon { filter:brightness(0) saturate(100%) invert(91%) sepia(26%) saturate(827%) hue-rotate(105deg) brightness(103%) contrast(98%); }
.button:disabled .button-icon { filter:brightness(0) invert(.45); }
.button.primary { background:var(--gradient); color:#000; border-color:transparent; }
.button.primary:hover { background:var(--gradient-hover); }
.button.primary:active { background:var(--gradient-pressed); }
.button.sub { background:#222830; border-color:#3b414a; color:#fff; }
.button.sub:hover { background:#3b414a; border-color:#4e545c; }
.button.sub:active { background:#131821; border-color:#3b414a; }
.button.outline { background:transparent; border-color:#3b414a; color:#e5e6e9; }
.button.outline:hover { background:#131821; border-color:#6e727b; color:#fff; }
.button.outline:active { background:#222830; border-color:#9fa3aa; color:#fff; }
.button.white-outline { background:transparent; border-color:#fff; color:#e5e6e9; }
.button.white-outline:hover { background:#131821; color:#fff; }
.button.white-outline:active { background:#222830; color:#fff; }
/* Client override: use a native solid brand border instead of a gradient mask. */
.button.brand-outline { background:transparent; border:1px solid #68fcf0; border-radius:26px; color:#68fcf0; }
.button.brand-outline:hover { background:#131821; border-color:#68fcf0; }
.button.brand-outline:active { background:#222830; color:#21f8e6; border-color:#68fcf0; }
.button:disabled,.button:disabled:hover,.button:disabled:active,.button[aria-disabled=true] { background:#222830; color:#6e727b; border-color:#3b414a; cursor:not-allowed; }
.button:is(.outline,.white-outline,.brand-outline):disabled { background:transparent; }
.button:disabled .icon { filter:brightness(0) invert(.45); }
.button[data-size=md] { min-height:44px; padding:10px 20px; }
.button[data-size=lg] { min-height:52px; padding:10px 24px; }
@media(max-width:1023px) {
  .button.header-contact { background:var(--gradient); color:#000; border:0; }
  .button.header-contact:active { background:var(--gradient-pressed); }
}

/* Form primitives: default / hover / focus / filled / error / disabled. */
.field label,.component-label { font:500 14px/18px Pretendard,Arial,sans-serif; color:#e5e6e9; }
.label-description { color:#6e727b; font:400 13px/18px Pretendard,Arial,sans-serif; margin-top:4px; }
.label-optional { color:#6e727b; font:500 12px/16px Pretendard,Arial,sans-serif; }
.required { color:#fd9393; }
input:where(:not([type=checkbox]):not([type=radio])), textarea, select, .select-trigger {
  font:400 16px/24px Pretendard,Arial,sans-serif; background:#131821; color:#fff;
  border:1px solid #3b414a; border-radius:12px; padding:0 20px; min-height:52px;
}
input:not([type=checkbox]):not([type=radio]) { height:52px; }
input::placeholder,textarea::placeholder { color:#6e727b; opacity:1; }
textarea { min-height:80px; padding:16px 20px; }
.inquiry-form textarea { min-height:160px; }
input:not([type=checkbox]):not([type=radio])[data-size=md], select[data-size=md] { height:44px; min-height:44px; padding:0 16px; border-radius:8px; }
textarea[data-size=md] { min-height:72px; padding:12px 16px; }
input:hover,textarea:hover,select:hover,.select-trigger:hover { border-color:#68fcf0; }
input:focus,textarea:focus,select:focus,.select-trigger:focus,.select-trigger[aria-expanded=true] { border-color:#68fcf0; }
input:not([type=checkbox]):not([type=radio]):focus,textarea:focus,.select-trigger:focus { outline:none; box-shadow:none; }
input[aria-invalid=true],textarea[aria-invalid=true],select[aria-invalid=true],.select-trigger[aria-invalid=true] { border-color:#f63b3b; color:#fd9393; }
input[aria-invalid=true]::placeholder,textarea[aria-invalid=true]::placeholder { color:#fd9393; }
input:disabled,textarea:disabled,select:disabled,.select-trigger:disabled { background:#222830; border-color:#3b414a; color:#6e727b; opacity:1; cursor:not-allowed; }

/* Native select is retained for FormData and non-JS fallback. */
.custom-select { position:relative; width:100%; }
.select-trigger { width:100%; display:flex; gap:8px; align-items:center; justify-content:space-between; text-align:left; }
.select-value { flex:1; min-width:0; }
.select-trigger.is-placeholder .select-value { color:#6e727b; }
.select-trigger[aria-invalid=true] .select-value { color:#fd9393; }
.select-trigger:disabled .select-value { color:#6e727b; }
.select-trigger .icon { width:24px; height:24px; }
.select-trigger[aria-expanded=true] .icon { transform:rotate(180deg); }
.select-trigger:disabled .icon { filter:brightness(0) invert(.45); }
.select-options { position:absolute; top:calc(100% + 8px); left:0; width:100%; z-index:110; padding:8px; margin:0; list-style:none; background:#080a0f; border:1px solid #3b414a; border-radius:12px; max-height:288px; overflow:auto; box-shadow:0 8px 24px #0005; }
.select-option { display:flex; align-items:center; gap:8px; min-height:52px; padding:0 20px; border-radius:12px; color:#e5e6e9; font:400 16px/24px Pretendard,Arial,sans-serif; cursor:pointer; }
.select-option:hover,.select-option.is-active { background:#131821; color:#fff; }
.select-option[aria-selected=true] { background:#17524d; color:#68fcf0; }
.select-option[aria-disabled=true] { color:#6e727b; background:transparent; cursor:not-allowed; }
.select-option::after { content:''; margin-left:auto; flex:0 0 24px; height:24px; background:currentColor; mask:url('../images/common/icons/check.svg') center/24px no-repeat; visibility:hidden; }
.select-option[aria-selected=true]::after { visibility:visible; }
.custom-select[data-size=md] .select-trigger { height:44px; min-height:44px; border-radius:8px; padding:0 16px; }
.custom-select[data-size=md] .select-trigger .icon { width:20px; height:20px; }
.custom-select[data-size=md] .select-option { min-height:44px; padding:10px 16px; border-radius:8px; }
.custom-select[data-size=md] .select-option::after { flex-basis:20px; height:20px; mask-size:20px; }
.footer-actions .custom-select { width:140px; flex:0 0 140px; }
.footer-actions select { height:44px; min-height:44px; padding:0 16px; }
.footer-actions .select-options { top:auto; bottom:calc(100% + 8px); width:100%; }
.footer-actions .select-option { padding-inline:8px; }
.floating-contact { right:20px; bottom:20px; }
@media(min-width:1024px) { .floating-contact { right:60px; bottom:60px; } }

/* Checkboxes and radios use the native controls, with explicit design states. */
input[type=checkbox],input[type=radio] {
  appearance:none; display:inline-grid; place-content:center; width:20px; height:20px; min-height:0;
  flex:0 0 auto; padding:0; margin:0; background:transparent; border:1px solid #3b414a; border-radius:2px; cursor:pointer;
}
input[type=radio] { border-radius:9999px; }
input:is([type=checkbox],[type=radio])[data-size='16'] { width:16px; height:16px; }
input:is([type=checkbox],[type=radio]):hover { border-color:#68fcf0; }
input:is([type=checkbox],[type=radio]):checked { border-color:#68fcf0; }
input[type=checkbox]:checked { background:#68fcf0; }
input[type=checkbox]::before { content:''; width:16px; height:16px; background:#000; mask:url('../images/common/icons/check.svg') center/contain no-repeat; visibility:hidden; }
input[type=checkbox][data-size='16']::before { width:12px; height:12px; }
input[type=radio]::before { content:''; width:14px; height:14px; border-radius:50%; background:#68fcf0; visibility:hidden; }
input[type=radio][data-size='16']::before { width:10px; height:10px; }
input:is([type=checkbox],[type=radio]):checked::before { visibility:visible; }
input:is([type=checkbox],[type=radio])[aria-invalid=true] { border-color:#f63b3b; }
input:is([type=checkbox],[type=radio]):disabled { background:#222830; border-color:#3b414a; }
input:is([type=checkbox],[type=radio]):disabled::before { background:#6e727b; }

/* Switch is a reusable primitive; no new business setting is added to the site. */
input[type=checkbox][role=switch] { width:44px; height:24px; border:0; border-radius:9999px; background:#222830; display:block; position:relative; }
input[type=checkbox][role=switch]::before { visibility:visible; position:absolute; left:2px; top:2px; width:20px; height:20px; border-radius:50%; mask:none; background:#9fa3aa; }
input[type=checkbox][role=switch]:hover { background:#3b414a; }
input[type=checkbox][role=switch]:hover::before { background:#d2d5d8; }
input[type=checkbox][role=switch]:checked { background:#68fcf0; }
input[type=checkbox][role=switch]:checked::before { left:22px; background:#fff; }
input[type=checkbox][role=switch]:checked:hover { background:#a6fef6; }
input[type=checkbox][role=switch]:checked:hover::before { background:#000; }
input[type=checkbox][role=switch]:disabled { background:#222830; }
input[type=checkbox][role=switch]:disabled::before { background:#6e727b; }