/* ============================================================
   surface — planar glass
   (파일명은 glass.css 그대로다 — 참조처 4곳을 건드리지 않기 위해서다)

   역할: 읽기 36 · 탐색 20 · 행동 8. 135° 그라디언트 금지.
   마크업은 그대로 둔다. .rf(굴절)·.tn(틴트) 레이어는 숨긴다.
   ============================================================ */

/* ── 떠다니는 크롬 — 칩·글래스 버튼 = 행동 ── */
.lg {
  position:relative; isolation:isolate; border-radius: var(--radius-input);
  background:var(--glass-action);
  border:1px solid var(--plane-edge); border-top-color:var(--plane-rim);
  box-shadow:var(--ctl-shadow);
  -webkit-backdrop-filter:blur(var(--glass-action-blur)) contrast(var(--glass-action-contrast)) saturate(var(--glass-action-saturation));
  backdrop-filter:blur(var(--glass-action-blur)) contrast(var(--glass-action-contrast)) saturate(var(--glass-action-saturation));
  transition: box-shadow var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out);
}
.lg.nav {
  background:var(--glass-navigation);
  box-shadow:none;
  -webkit-backdrop-filter: blur(var(--glass-blur)) contrast(var(--glass-navigation-contrast)) saturate(var(--glass-navigation-saturation));
  backdrop-filter: blur(var(--glass-blur)) contrast(var(--glass-navigation-contrast)) saturate(var(--glass-navigation-saturation));
}
.lg .rf, .lg .tn { display:none; }
.lg .in { position:relative; z-index:2; }
.lg :is(a,button,input,select,textarea):focus-visible,
.faq .qbtn:focus-visible { outline-offset:-2px; }

.lg.hoverable:hover { box-shadow:var(--shadow-float); }
.lg.nav.hoverable:hover { box-shadow:none; }

/* ── 읽기 판 ── 바깥 경계는 DS 카드 경계(--panel-border, 바탕 대비 3:1 이상)·네 변 고른 테·안쪽 흰 링 */
.card,.prob li,.quiz,.faq,.p-card,
.why-cards .c,.out-grid .c,.steps .s,.trust-card {
  position:relative; isolation:isolate;
  background:var(--glass);
  border:0;
  box-shadow:var(--shadow-float);
  -webkit-backdrop-filter:blur(var(--glass-reading-blur)) contrast(var(--glass-reading-contrast)) saturate(var(--glass-reading-saturation));
  backdrop-filter:blur(var(--glass-reading-blur)) contrast(var(--glass-reading-contrast)) saturate(var(--glass-reading-saturation));
}
.card > *,.why-cards .c > *,.prob li > *,.quiz > *,.out-grid .c > *,.steps .s > *,.trust-card > *,.faq > *,.p-card > * { position:relative; z-index:2; }
.card::before,.why-cards .c::before,.prob li::before,.quiz::before,.out-grid .c::before,.steps .s::before,.trust-card::before,.faq::before,.p-card::before,
.card::after,.why-cards .c::after,.prob li::after,.quiz::after,.out-grid .c::after,.steps .s::after,.trust-card::after,.faq::after,.p-card::after {
  content:none;
}

.why-cards .c,.out-grid .c,.steps .s,.trust-card {
  transition: box-shadow var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out);
}
.why-cards .c:hover,.out-grid .c:hover,.steps .s:hover,.trust-card:hover {
  box-shadow:var(--shadow-float),inset 0 0 0 1px var(--glass-ring); transform:translateY(-1px);
}

/* 결과 패널 = 역전 카드(문의 밴드와 같은 inverse). 섹션 크롬이 아니다. */
.result {
  background:var(--ink);
  box-shadow:var(--shadow-float);
}

/* 비선택 탭·옵션 = 행동 유리. 선택은 sections.css 가 탐색 면으로 말한다. */
.dept-tabs button:not(.on),.opts button:not(.on) {
  background:var(--glass-action);
  border:1px solid var(--secondary-border);
  border-radius: var(--radius-input);
  box-shadow:var(--ctl-shadow);
  -webkit-backdrop-filter:blur(var(--glass-action-blur)) contrast(var(--glass-action-contrast)) saturate(var(--glass-action-saturation));
  backdrop-filter:blur(var(--glass-action-blur)) contrast(var(--glass-action-contrast)) saturate(var(--glass-action-saturation));
}