/* ============================================================
   smtech.xyz 리퀴드 글래스(애플 iOS 26 느낌) — 2026-10-20 대표님 승인 적용
   기존 style.css 위에 덮어 쓰는 층. 빼려면 각 html 의 glass.css 줄만 지우면 됨.
   반투명 유리판 + 뒤 흐림·채도 + 얇은 빛 테두리 + 위쪽 하이라이트. 글자 있는 판은 읽기 좋게 조금 더 불투명.
   ============================================================ */
:root {
  --g-fill: rgba(255, 255, 255, .62);
  --g-fill-strong: rgba(255, 255, 255, .76);
  --g-edge: rgba(255, 255, 255, .78);
  --g-hi: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .25);
  --g-shadow: 0 18px 44px -20px rgba(0, 41, 87, .35);
  --g-blur: blur(22px) saturate(180%);
  --band: transparent;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --g-fill: rgba(21, 32, 58, .55); --g-fill-strong: rgba(21, 32, 58, .7); --g-edge: rgba(255, 255, 255, .14);
  --g-hi: inset 0 1px 0 rgba(255, 255, 255, .18); --g-shadow: 0 18px 44px -20px rgba(0, 0, 0, .7);
} }

/* 바탕: 회사 색이 은은하게 번진 배경 (스크롤해도 고정) */
body {
  background:
    radial-gradient(45% 40% at 10% 12%, rgba(0, 147, 211, .30), transparent 70%),
    radial-gradient(40% 36% at 92% 8%, rgba(45, 212, 191, .26), transparent 70%),
    radial-gradient(48% 44% at 82% 78%, rgba(139, 92, 246, .18), transparent 70%),
    radial-gradient(42% 40% at 14% 90%, rgba(0, 41, 87, .22), transparent 70%),
    linear-gradient(165deg, #edf4fc 0%, #f3f7fc 50%, #eef6f8 100%) !important;
  background-attachment: fixed !important;
}
@media (prefers-color-scheme: dark) and (max-width: 900px) { :root:not([data-theme="light"]) .nav { background: #0f182c !important; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body {
  background:
    radial-gradient(45% 40% at 10% 12%, rgba(0, 147, 211, .28), transparent 70%),
    radial-gradient(40% 36% at 92% 8%, rgba(45, 212, 191, .18), transparent 70%),
    radial-gradient(48% 44% at 82% 78%, rgba(139, 92, 246, .16), transparent 70%),
    linear-gradient(165deg, #0a1120, #0c1424) !important;
} }
.sec, .sec.band { background: transparent !important; }

/* 위쪽 메뉴: 화면 위에 떠 있는 유리 막대 */
.top {
  top: max(10px, env(safe-area-inset-top, 0px)) !important;
  margin: 10px auto 0; max-width: 1180px; width: calc(100% - 24px);
  background: var(--g-fill) !important; -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge) !important; border-radius: 22px;
  box-shadow: var(--g-hi), var(--g-shadow);
}
.nav a { border-radius: 999px !important; transition: background .2s ease, color .2s ease, transform .2s ease; }
.nav a:hover { background: rgba(255, 255, 255, .7) !important; transform: translateY(-1px); }
.nav a[aria-current="page"] { background: rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 4px 12px -6px rgba(0, 41, 87, .35); }
.nav a.lang { border-color: rgba(255, 255, 255, .8) !important; background: rgba(255, 255, 255, .45); }
@media (max-width: 900px) {
  /* 펼친 휴대폰 메뉴는 뒤 글자가 비치지 않게 거의 불투명하게 (2026-10-20 점검) */
  .nav { background: #ffffff !important; -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
         border: 1px solid var(--g-edge) !important; border-radius: 20px; margin-top: 8px; box-shadow: var(--g-hi), var(--g-shadow); }
}

/* 카드·바로가기: 유리판 */
.card, .quick a {
  background: var(--g-fill-strong) !important; -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge) !important; border-radius: 24px !important;
  box-shadow: var(--g-hi), var(--g-shadow) !important;
}
.quick a:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--g-hi), 0 26px 50px -22px rgba(0, 91, 154, .45) !important; }
.quick .ico { border-radius: 14px; background: rgba(0, 147, 211, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }

/* 버튼: 둥근 유리 알약, 누르면 살짝 눌림 */
.btn { border-radius: 999px !important; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.btn:active { transform: scale(.96); }
.btn-primary { background: linear-gradient(180deg, rgba(0, 163, 230, .96), rgba(0, 128, 190, .96)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 26px -12px #0093D3 !important; }
.btn-ghost { background: rgba(255, 255, 255, .5) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .8) !important; box-shadow: inset 0 1px 0 #fff; }

/* 첫 화면(남색): 유리 빛 반사 + 화면 속 카드도 유리 */
.c-hero { border-radius: 0 0 36px 36px; margin-top: -84px; padding-top: 150px !important; }
.c-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 75% 10%, rgba(255, 255, 255, .12), transparent 60%); }
.c-hero .btn-ghost { background: rgba(255, 255, 255, .12) !important; color: #fff !important; border-color: rgba(255, 255, 255, .35) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.c-hero .term, .c-hero .c-strip, .c-hero .bar, .c-hero .card {
  background: rgba(255, 255, 255, .08) !important; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .18) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 20px 50px -24px rgba(0, 0, 0, .6) !important;
}

/* 아래쪽: 유리 띠 */
footer { margin: 24px auto 16px; max-width: 1180px; width: calc(100% - 24px); border-radius: 22px;
  background: var(--g-fill) !important; -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge); box-shadow: var(--g-hi), var(--g-shadow); }

/* 입력칸(문의 폼) */
input, select, textarea { border-radius: 14px !important; background: rgba(255, 255, 255, .7) !important; }

/* 유리 효과를 못 쓰는 기기·투명도 줄이기 설정 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top, .card, .quick a, footer { background: rgba(255, 255, 255, .95) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .top, .card, .quick a, footer { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}