:root {
  --choice-primary: #4f7cff;
  --choice-primary-soft: rgba(79, 124, 255, 0.12);
  --choice-primary-mid: rgba(79, 124, 255, 0.22);
  --choice-primary-border: rgba(79, 124, 255, 0.38);
  --choice-text: #204070;
  --text: #0f172a;
  --text-soft: rgba(15, 23, 42, 0.68);
  --text-muted: rgba(15, 23, 42, 0.48);
  --blue: #007aff;
  --purple: #7c3aed;
  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  --glass-border: rgba(255, 255, 255, 0.62);
  --shadow: 0 28px 90px rgba(15, 23, 42, 0.13);
  --shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.09);
  --radius-xl: 36px;
  --radius-lg: 28px;
  --radius-md: 22px;
  --radius-sm: 16px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Pretendard",
    "Noto Sans KR",
    "Segoe UI",
    sans-serif;
  background:
    radial-gradient(circle at 10% 12%, rgba(0, 122, 255, 0.34), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(255, 149, 0, 0.28), transparent 22%),
    radial-gradient(circle at 78% 70%, rgba(124, 58, 237, 0.22), transparent 28%),
    radial-gradient(circle at 18% 82%, rgba(52, 199, 89, 0.18), transparent 24%),
    radial-gradient(circle at 52% 48%, rgba(255, 255, 255, 0.46), transparent 38%),
    linear-gradient(135deg, #edf5ff 0%, #e9eef9 34%, #efe9ff 66%, #fff3e8 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.04) 36%, rgba(255,255,255,0.12) 100%),
    linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: auto, 54px 54px, 54px 54px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.15) 72%, transparent 100%);
  z-index: 0;
}


body::after {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 24%, rgba(255,255,255,0.32), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.22), transparent 16%),
    radial-gradient(circle at 72% 84%, rgba(255,255,255,0.20), transparent 16%),
    radial-gradient(circle at 14% 74%, rgba(255,255,255,0.18), transparent 14%);
  filter: blur(42px);
  opacity: 0.9;
  z-index: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font-family: inherit;
}

.orb {
  position: fixed;
  border-radius: 999px;
  filter: blur(76px);
  opacity: 0.88;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  animation: float 16s ease-in-out infinite alternate;
}

.orb.one {
  width: 460px;
  height: 460px;
  left: -140px;
  top: 120px;
  background: radial-gradient(circle at 30% 30%, rgba(0, 122, 255, 0.55), rgba(0, 122, 255, 0.16) 62%, transparent 100%);
}

.orb.two {
  width: 520px;
  height: 520px;
  right: -170px;
  top: 24px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 149, 0, 0.46), rgba(124, 58, 237, 0.22) 58%, transparent 100%);
  animation-delay: -4s;
}

.orb.three {
  width: 430px;
  height: 430px;
  left: 46%;
  bottom: -160px;
  background: radial-gradient(circle at 50% 50%, rgba(52, 199, 89, 0.34), rgba(0, 122, 255, 0.18) 62%, transparent 100%);
  animation-delay: -8s;
}

@keyframes float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(32px, -24px, 0) scale(1.08); }
}

/* Splash */

.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 20%, rgba(0,122,255,0.25), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(255,149,0,0.22), transparent 22%),
    radial-gradient(circle at 70% 76%, rgba(124,58,237,0.20), transparent 24%),
    radial-gradient(circle at 30% 82%, rgba(52,199,89,0.16), transparent 22%),
    radial-gradient(circle at 48% 36%, rgba(255,255,255,0.92), rgba(255,255,255,0.42) 36%, rgba(243,246,251,0.88) 100%),
    linear-gradient(135deg, #eef5ff, #f4f1ff 58%, #fff3ea);
  transition: opacity 0.58s ease, visibility 0.58s ease;
}

.splash.hide {
  opacity: 0;
  visibility: hidden;
}

.splash-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transform: translateY(8px);
  animation: splashUp 0.9s cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes splashUp {
  to { transform: translateY(0); }
}

.brand-mark {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  position: relative;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.22)),
    linear-gradient(135deg, #007aff, #7c3aed 58%, #34c759);
  box-shadow:
    0 30px 70px rgba(0, 122, 255, 0.23),
    inset 0 1px 0 rgba(255,255,255,0.62);
  overflow: hidden;
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.55);
  background: linear-gradient(145deg, rgba(255,255,255,0.26), rgba(255,255,255,0.06));
}

.brand-mark::after {
  content: "Y";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 46px;
  font-weight: 950;
  letter-spacing: -0.08em;
  text-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

.splash-title {
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.065em;
}

.splash-sub {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

/* Layout */

.app-shell {
  position: relative;
  z-index: 1;
  width: min(1220px, calc(100% - 34px));
  margin: 0 auto;
  padding: 26px 0 80px;
}

.app-shell::before {
  content: "";
  position: fixed;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  width: min(1280px, calc(100% - 20px));
  height: calc(100vh - 36px);
  border-radius: 38px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.36), rgba(255,255,255,0.12)),
    linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.46);
  box-shadow:
    0 34px 120px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.56);
  backdrop-filter: blur(22px) saturate(138%);
  -webkit-backdrop-filter: blur(22px) saturate(138%);
  pointer-events: none;
  z-index: -1;
}

.page {
  display: none;
}

.page-active {
  display: block;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 46px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 6px;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -0.055em;
}

.mini-logo {
  width: 34px;
  height: 34px;
  border-radius: 13px;
  position: relative;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.15)),
    linear-gradient(135deg, var(--blue), var(--purple));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.58),
    0 12px 28px rgba(0, 122, 255, 0.2);
}

.mini-logo::after {
  content: "Y";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 19px;
  font-weight: 950;
  letter-spacing: -0.08em;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chip {
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.48);
  color: rgba(15, 23, 42, 0.72);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.hero {
  margin-bottom: 24px;
}

.compact-hero {
  min-height: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.44);
  border: 1px solid rgba(255,255,255,0.58);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  color: #2563eb;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

h1 {
  margin: 0;
  font-size: clamp(42px, 6vw, 78px);
  line-height: 0.96;
  letter-spacing: -0.08em;
  font-weight: 950;
}

.gradient-text {
  background: linear-gradient(100deg, #0f172a 0%, #2563eb 45%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glass {
  position: relative;
  overflow: visible;
  border-radius: var(--radius-xl);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.56), rgba(255,255,255,0.22));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(34px) saturate(190%);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  box-shadow: var(--shadow);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-xl) - 1px);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.08) 48%, rgba(255,255,255,0.02));
  pointer-events: none;
  z-index: 0;
}

.glass-inner {
  position: relative;
  z-index: 1;
  padding: 28px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.section-title h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.05em;
  font-weight: 950;
}

.subcopy {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

/* Form */

.onboarding {
  margin-bottom: 24px;
}

.form-grid {
  display: grid;
  gap: 14px;
}

.form-grid.compact {
  grid-template-columns: 1.2fr 0.9fr 0.9fr 1fr;
  align-items: start;
}

.field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field.full {
  grid-column: 1 / -1;
}

label {
  color: rgba(15, 23, 42, 0.72);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

input,
select,
.date-trigger,
.select-trigger {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(255,255,255,0.58);
  border-radius: 19px;
  padding: 0 16px;
  color: var(--text);
  font-size: 15px;
  letter-spacing: -0.02em;
  outline: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.48), rgba(255,255,255,0.24));
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.56),
    inset 0 -1px 0 rgba(255,255,255,0.18),
    0 12px 26px rgba(15, 23, 42, 0.045);
  transition: 0.2s ease;
}

.date-trigger,
.select-trigger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  cursor: pointer;
  border-radius: 22px;
  min-height: 74px;
  text-align: left;
}

.date-trigger span,
.select-trigger span {
  font-size: 17px;
  font-weight: 950;
  letter-spacing: -0.04em;
}

.date-trigger small,
.select-trigger small {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 850;
}

select:focus,
.date-trigger:focus,
.select-trigger:focus {
  border-color: rgba(0, 122, 255, 0.6);
  box-shadow:
    0 0 0 5px rgba(0, 122, 255, 0.11),
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 18px 36px rgba(0, 122, 255, 0.08);
}

/* Date panel slides from the field */

.date-field.open {
  z-index: 90;
}

.calendar-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 12px);
  z-index: 100;
  display: none;
  width: min(400px, calc(100vw - 40px));
  max-height: calc(100vh - 210px);
  overflow-y: auto;
  padding: 14px;
  border-radius: 30px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(29, 31, 38, 0.96), rgba(17, 19, 25, 0.92));
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow:
    0 34px 90px rgba(15, 23, 42, 0.32),
    inset 0 1px 0 rgba(255,255,255,0.14);
  backdrop-filter: blur(34px) saturate(180%);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  transform: translateY(18px) scale(0.98);
  opacity: 0;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.date-field.open .calendar-panel {
  display: block;
  animation: panelRise 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes panelRise {
  from {
    opacity: 0;
    transform: translate3d(0, -16px, 0) scale(0.985);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

.calendar-selected {
  display: none;
}

.calendar-top {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 8px;
  align-items: center;
}

.calendar-nav,
.calendar-title-btn {
  min-height: 42px;
  border-radius: 15px;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.calendar-nav {
  padding: 0;
  font-size: 23px;
}

.calendar-title-btn {
  padding: 0 12px;
}

.quick-years,
.month-strip {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 8px 0 1px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  cursor: grab;
  touch-action: pan-x;
  user-select: none;
  -webkit-user-select: none;
  mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

.quick-years::-webkit-scrollbar,
.month-strip::-webkit-scrollbar {
  display: none;
}

.quick-years.dragging,
.month-strip.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.year-chip,
.month-chip {
  flex: 0 0 auto;
  min-height: 31px;
  padding: 0 10px;
  border-radius: 999px;
  color: rgba(255,255,255,0.74);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 12px;
  font-weight: 900;
  transition:
    background 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.year-chip.active,
.month-chip.active {
  color: #111827;
  background: #fff;
  transform: scale(1.04);
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.calendar-weekdays {
  margin: 8px 0 6px;
}

.calendar-weekdays span {
  text-align: center;
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  font-weight: 950;
}

.day {
  aspect-ratio: 1;
  min-height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: rgba(255,255,255,0.9);
  background: transparent;
  font-weight: 850;
  border: 1px solid transparent;
  padding: 0;
}

.day.muted {
  color: rgba(255,255,255,0.25);
}

.day:hover {
  background: rgba(255,255,255,0.1);
}

.day.selected {
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.calendar-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.dark-btn {
  color: #fff;
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.14);
}

/* Dark select panels */

.custom-select-field.open {
  z-index: 80;
}

.dark-select-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 95;
  display: none;
  max-height: 300px;
  overflow: auto;
  padding: 8px;
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(29,31,38,0.97), rgba(17,19,25,0.94));
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow:
    0 30px 80px rgba(15, 23, 42, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  transform: translate3d(0, -16px, 0) scale(0.985);
  opacity: 0;
}

.custom-select-field.open .dark-select-panel {
  display: block;
  animation: panelRise 0.2s ease forwards;
}

.select-option {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-radius: 16px;
  color: rgba(255,255,255,0.86);
  background: transparent;
  font-size: 14px;
  font-weight: 900;
}

.select-option:hover {
  background: rgba(255,255,255,0.09);
}

.select-option.active {
  color: #111827;
  background: #fff;
}

.interest-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.interest {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  color: rgba(15, 23, 42, 0.78);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.25));
  border: 1px solid rgba(255,255,255,0.56);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 12px 24px rgba(15, 23, 42, 0.05);
  font-size: 14px;
  font-weight: 900;
  transition: 0.2s ease;
}

.interest input {
  display: none;
}

.interest:has(input:checked) {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(0, 122, 255, 0.95), rgba(0, 99, 220, 0.95));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 16px 34px rgba(0, 122, 255, 0.2);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

button {
  appearance: none;
  border: 0;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -0.03em;
  transition: 0.2s ease;
}

.primary {
  flex: 1;
  min-width: 230px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(0, 122, 255, 0.97), rgba(0, 99, 220, 0.97));
  box-shadow:
    0 18px 38px rgba(0, 122, 255, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.38);
}

.primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 24px 48px rgba(0, 122, 255, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.46);
}

.secondary {
  color: rgba(15, 23, 42, 0.82);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.28));
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.58),
    0 14px 30px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}

.notice {
  display: none;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  color: #b42318;
  background: rgba(255, 59, 48, 0.12);
  border: 1px solid rgba(255, 59, 48, 0.2);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.55;
}

.notice.show {
  display: block;
}

/* Results */

.results {
  display: none;
}

.results.show {
  display: block;
}

.summary-row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 16px;
  margin-bottom: 18px;
}

.summary-card {
  border-radius: var(--radius-lg);
  padding: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.58), rgba(255,255,255,0.24));
  border: 1px solid rgba(255,255,255,0.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    0 18px 44px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
}

.summary-card h3 {
  margin: 0 0 10px;
  font-size: 26px;
  letter-spacing: -0.065em;
  line-height: 1.18;
}

.summary-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.7;
  word-break: keep-all;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat {
  border-radius: 22px;
  padding: 18px;
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 14px 32px rgba(15, 23, 42, 0.06);
}

.stat b {
  display: block;
  margin-bottom: 5px;
  font-size: 27px;
  letter-spacing: -0.06em;
}

.stat span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 850;
}

.tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  margin-bottom: 10px;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  color: rgba(15, 23, 42, 0.7);
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 12px 26px rgba(15, 23, 42, 0.055);
}

.tab.active {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.94));
}

.policy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.policy-card {
  position: relative;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 20px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.62), rgba(255,255,255,0.25));
  border: 1px solid rgba(255,255,255,0.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.64),
    0 18px 44px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  transition: 0.2s ease;
}

.policy-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.58), transparent 48%),
    radial-gradient(circle at 88% 10%, rgba(0,122,255,0.12), transparent 28%);
  pointer-events: none;
}

.policy-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 24px 60px rgba(15, 23, 42, 0.12);
}

.policy-top,
.policy-bottom {
  position: relative;
  z-index: 1;
}

.badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.level-badge,
.match-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.level-badge {
  color: #1d4ed8;
  background: rgba(219, 234, 254, 0.62);
  border: 1px solid rgba(255,255,255,0.52);
}

.level-badge.province {
  color: #6d28d9;
  background: rgba(237, 233, 254, 0.68);
}

.level-badge.city {
  color: #047857;
  background: rgba(209, 250, 229, 0.68);
}

.level-badge.county {
  color: #c2410c;
  background: rgba(255, 237, 213, 0.76);
}

.match-badge {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(52, 199, 89, 0.96), rgba(22, 163, 74, 0.94));
  box-shadow: 0 10px 22px rgba(34, 197, 94, 0.18);
}

.policy-title {
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.23;
  letter-spacing: -0.055em;
  word-break: keep-all;
}

.policy-provider {
  margin-bottom: 9px;
  color: #2563eb;
  font-size: 13px;
  font-weight: 950;
}

.policy-benefit {
  color: #0f172a;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.4;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.policy-check {
  margin-top: 12px;
  padding: 12px;
  border-radius: 17px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.52);
}

.policy-check b {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  color: var(--text-muted);
}

.policy-check span {
  color: rgba(15, 23, 42, 0.78);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 850;
}

.policy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  color: rgba(15, 23, 42, 0.68);
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.52);
  font-size: 12px;
  font-weight: 850;
}

.empty {
  display: none;
  padding: 32px;
  text-align: center;
  color: var(--text-soft);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.55);
  line-height: 1.7;
  word-break: keep-all;
}

.empty.show {
  display: block;
}

/* Detail page */

.detail-page {
  animation: pageIn 0.22s ease forwards;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 360px;
  gap: 20px;
  align-items: start;
}

.detail-main,
.detail-side {
  border-radius: var(--radius-xl);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.62), rgba(255,255,255,0.28));
  border: 1px solid rgba(255,255,255,0.62);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}

.detail-main {
  padding: 30px;
}

.detail-side {
  position: sticky;
  top: 18px;
  padding: 20px;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 24px;
  padding: 0 15px;
  color: rgba(15,23,42,0.8);
  background: rgba(255,255,255,0.48);
  border: 1px solid rgba(255,255,255,0.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.56);
}

.provider-pill {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: #1d4ed8;
  background: rgba(219, 234, 254, 0.72);
  border: 1px solid rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 950;
}

.detail-title {
  margin: 14px 0 10px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.08em;
  word-break: keep-all;
}

.detail-lead {
  margin: 0 0 24px;
  color: var(--text-soft);
  font-size: 18px;
  line-height: 1.75;
  word-break: keep-all;
}

.detail-section {
  margin-top: 16px;
  padding: 22px;
  border-radius: 26px;
  background: rgba(255,255,255,0.46);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.56),
    0 14px 34px rgba(15, 23, 42, 0.055);
}

.detail-section h3 {
  margin: 0 0 12px;
  font-size: 20px;
  letter-spacing: -0.05em;
}

.detail-section p {
  margin: 0;
  color: rgba(15, 23, 42, 0.78);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 720;
  word-break: keep-all;
}

.detail-list {
  margin: 0;
  padding-left: 20px;
  color: rgba(15, 23, 42, 0.82);
  line-height: 1.85;
  font-size: 15px;
  font-weight: 760;
  word-break: keep-all;
}

.side-title {
  margin: 0 0 10px;
  font-size: 20px;
  letter-spacing: -0.05em;
}

.side-help {
  margin: 0 0 14px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.65;
}

.question-list {
  display: grid;
  gap: 10px;
}

.question-item {
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.46);
  border: 1px solid rgba(255,255,255,0.6);
}

.question-item p {
  margin: 0 0 10px;
  color: rgba(15,23,42,0.86);
  font-weight: 900;
  line-height: 1.5;
}

.question-buttons {
  display: flex;
  gap: 8px;
}

.question-buttons button {
  flex: 1;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.52);
  border: 1px solid rgba(255,255,255,0.65);
  font-size: 13px;
}

.question-buttons button.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 122, 255, 0.95), rgba(0, 99, 220, 0.95));
}

.fit-result {
  display: none;
  margin-top: 12px;
  padding: 15px;
  border-radius: 22px;
  background: rgba(52, 199, 89, 0.13);
  border: 1px solid rgba(52, 199, 89, 0.22);
}

.fit-result.show {
  display: block;
}

.fit-result b {
  display: block;
  margin-bottom: 6px;
  color: #047857;
  font-size: 17px;
  letter-spacing: -0.04em;
}

.fit-result span {
  color: rgba(15,23,42,0.78);
  line-height: 1.65;
  font-weight: 760;
}

.side-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.external {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 999px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(0, 122, 255, 0.97), rgba(0, 99, 220, 0.97));
  box-shadow:
    0 18px 38px rgba(0, 122, 255, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.38);
  font-size: 15px;
  font-weight: 950;
}

.save-btn.saved {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(52, 199, 89, 0.96), rgba(22, 163, 74, 0.94));
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 1001;
  transform: translateX(-50%) translateY(18px);
  opacity: 0;
  pointer-events: none;
  padding: 13px 18px;
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  font-size: 14px;
  font-weight: 900;
  transition: 0.22s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 1050px) {
  .form-grid.compact {
    grid-template-columns: repeat(2, 1fr);
  }

  .policy-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .summary-row,
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .detail-side {
    position: static;
  }
}

@media (max-width: 700px) {
  .app-shell {
    width: min(100% - 20px, 1220px);
    padding-top: 18px;
  }

  .topbar {
    margin-bottom: 34px;
  }

  .top-actions {
    display: none;
  }

  h1 {
    font-size: clamp(40px, 13vw, 62px);
  }

  .glass-inner {
    padding: 19px;
  }

  .form-grid.compact {
    grid-template-columns: 1fr;
  }

  .calendar-panel {
    width: 100%;
  }

  .policy-grid {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .detail-main,
  .detail-side {
    padding: 20px;
  }

  .actions button,
  .side-actions button,
  .external {
    width: 100%;
  }
}


.calendar-panel.dragging {
  cursor: grabbing;
}

.calendar-days {
  touch-action: pan-y;
  user-select: none;
}

.calendar-days.slide-left {
  animation: calendarSlideLeft 0.16s ease;
}

.calendar-days.slide-right {
  animation: calendarSlideRight 0.16s ease;
}

@keyframes calendarSlideLeft {
  from {
    opacity: 0.55;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes calendarSlideRight {
  from {
    opacity: 0.55;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.calendar-actions {
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(180deg, rgba(24,26,32,0), rgba(24,26,32,0.96) 35%);
}

.calendar-actions .primary,
.calendar-actions .secondary {
  min-height: 46px;
}

@media (max-width: 700px) {
  .calendar-panel {
    max-height: calc(100vh - 160px);
    padding: 12px;
  }

  .day {
    min-height: 30px;
  }

  .year-chip,
  .month-chip {
    min-height: 30px;
  }
}


/* v3.2 smoother drag calendar */

.calendar-panel {
  transition:
    width 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    max-height 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-title-btn {
  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-title-btn.pulse {
  transform: scale(1.025);
  background: rgba(255,255,255,0.16);
}

.calendar-days {
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.calendar-days.slide-left {
  animation: calendarSlideLeft 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-days.slide-right {
  animation: calendarSlideRight 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-days.slide-up {
  animation: calendarSlideUp 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-days.slide-down {
  animation: calendarSlideDown 1s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes calendarSlideLeft {
  from {
    opacity: 0.35;
    transform: translateX(34px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes calendarSlideRight {
  from {
    opacity: 0.35;
    transform: translateX(-34px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes calendarSlideUp {
  from {
    opacity: 0.35;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes calendarSlideDown {
  from {
    opacity: 0.35;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.year-chip.magnetic,
.month-chip.magnetic {
  animation: chipMagnetic 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chipMagnetic {
  from {
    transform: scale(0.92);
    opacity: 0.45;
  }
  to {
    transform: scale(1.04);
    opacity: 1;
  }
}


/* v3.3 live year/month strip selection */

.quick-years.dragging .year-chip,
.month-strip.dragging .month-chip {
  transition:
    background 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-years.dragging .year-chip.active,
.month-strip.dragging .month-chip.active {
  color: #111827;
  background: #fff;
  transform: scale(1.08);
  box-shadow:
    0 10px 24px rgba(255,255,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.88);
}

.quick-years.dragging .year-chip:not(.active),
.month-strip.dragging .month-chip:not(.active) {
  opacity: 0.72;
}

.calendar-title-btn {
  will-change: contents, transform;
}


/* v3.4 edge-center fix for year/month drag strips */

/*
  연도/월 칩을 가운데 기준으로 선택하기 때문에,
  맨 앞/맨 뒤 칩도 화면 중앙까지 올 수 있도록 양끝에 가상 여백을 둡니다.
  이게 없으면 2001~2007이 보여도 실제 선택은 1990~2013처럼 중간 구간에서만 멈춥니다.
*/
.quick-years::before,
.quick-years::after,
.month-strip::before,
.month-strip::after {
  content: "";
  flex: 0 0 calc(50% - 36px);
  min-width: calc(50% - 36px);
  pointer-events: none;
}

.month-strip::before,
.month-strip::after {
  flex-basis: calc(50% - 30px);
  min-width: calc(50% - 30px);
}

.quick-years,
.month-strip {
  scroll-padding-inline: 50%;
}

.year-chip,
.month-chip {
  scroll-snap-align: center;
}

.quick-years,
.month-strip {
  scroll-snap-type: x proximity;
}


/* v3.5 date-grid gesture control */

.calendar-days {
  cursor: grab;
  touch-action: none;
  border-radius: 22px;
  padding: 2px 0;
}

.calendar-days.grabbing {
  cursor: grabbing;
}

.calendar-days.grabbing .day {
  pointer-events: none;
}

.calendar-panel.dragging .calendar-days {
  background: radial-gradient(circle at center, rgba(255,255,255,0.055), transparent 68%);
}

.day {
  transition:
    background 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.day:hover {
  transform: scale(1.06);
}

.calendar-panel.dragging .calendar-title-btn {
  animation: calendarTitleBreath 1s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes calendarTitleBreath {
  0% {
    transform: scale(1);
    background: rgba(255,255,255,0.1);
  }
  45% {
    transform: scale(1.025);
    background: rgba(255,255,255,0.16);
  }
  100% {
    transform: scale(1);
    background: rgba(255,255,255,0.1);
  }
}


/* v3.6 unified smooth calendar surface movement */

.calendar-days {
  will-change: transform, opacity, filter;
  transform-origin: center;
}

.calendar-days.surface-left {
  animation: calendarSurfaceLeft 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-days.surface-right {
  animation: calendarSurfaceRight 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-days.surface-up {
  animation: calendarSurfaceUp 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-days.surface-down {
  animation: calendarSurfaceDown 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-days.drag-preview-left {
  animation: calendarPreviewLeft 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-days.drag-preview-right {
  animation: calendarPreviewRight 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-days.drag-preview-up {
  animation: calendarPreviewUp 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-days.drag-preview-down {
  animation: calendarPreviewDown 0.48s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes calendarSurfaceLeft {
  0% {
    opacity: 0.22;
    transform: translateX(72px) scale(0.985);
    filter: blur(1.2px);
  }
  55% {
    opacity: 0.92;
    transform: translateX(-4px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes calendarSurfaceRight {
  0% {
    opacity: 0.22;
    transform: translateX(-72px) scale(0.985);
    filter: blur(1.2px);
  }
  55% {
    opacity: 0.92;
    transform: translateX(4px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes calendarSurfaceUp {
  0% {
    opacity: 0.22;
    transform: translateY(54px) scale(0.985);
    filter: blur(1.2px);
  }
  55% {
    opacity: 0.92;
    transform: translateY(-3px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes calendarSurfaceDown {
  0% {
    opacity: 0.22;
    transform: translateY(-54px) scale(0.985);
    filter: blur(1.2px);
  }
  55% {
    opacity: 0.92;
    transform: translateY(3px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes calendarPreviewLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  45% {
    transform: translateX(-16px);
    opacity: 0.68;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes calendarPreviewRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  45% {
    transform: translateX(16px);
    opacity: 0.68;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes calendarPreviewUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  45% {
    transform: translateY(-14px);
    opacity: 0.68;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes calendarPreviewDown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  45% {
    transform: translateY(14px);
    opacity: 0.68;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


/* v3.7 year/month chip animation alignment */

/*
  월 칩의 부드러운 선택 느낌을 연도 칩에도 그대로 맞추되,
  연도는 사용자가 더 큰 범위를 움직이는 느낌이 나도록 0.5초 더 느리게 둡니다.
*/
.quick-years .year-chip {
  transition:
    background 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    color 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.month-strip .month-chip {
  transition:
    background 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-years.dragging .year-chip.active,
.month-strip.dragging .month-chip.active {
  color: #111827;
  background: #fff;
  transform: scale(1.08);
  box-shadow:
    0 10px 24px rgba(255,255,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.88);
}

.quick-years.dragging .year-chip:not(.active),
.month-strip.dragging .month-chip:not(.active) {
  opacity: 0.72;
}

/* 선택 완료 버튼은 드래그 상태에서도 항상 클릭 가능 */
.calendar-actions,
.calendar-actions button {
  pointer-events: auto;
  z-index: 4;
}


/* v3.8 calendar interaction corrections */

/*
  연도 줄은 좌우 드래그 조작이므로 놓을 때도 좌우 애니메이션만 사용합니다.
  위/아래 튐처럼 보이는 연도 전환은 제거했습니다.
*/
.quick-years.dragging ~ .month-strip,
.quick-years.dragging {
  scroll-behavior: auto;
}

/*
  마우스 휠로 월이 바뀔 때는 날짜판이 위/아래로 길게 넘어가는 느낌을 줍니다.
  기존 짧은 흔들림보다 이동 거리를 더 크게 잡았습니다.
*/
.calendar-days.surface-up {
  animation: calendarSurfaceWheelUp 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.calendar-days.surface-down {
  animation: calendarSurfaceWheelDown 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes calendarSurfaceWheelUp {
  0% {
    opacity: 0.18;
    transform: translateY(96px) scale(0.982);
    filter: blur(1.4px);
  }
  62% {
    opacity: 0.95;
    transform: translateY(-6px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes calendarSurfaceWheelDown {
  0% {
    opacity: 0.18;
    transform: translateY(-96px) scale(0.982);
    filter: blur(1.4px);
  }
  62% {
    opacity: 0.95;
    transform: translateY(6px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 날짜를 누르면 상단 타이틀에 일자가 들어가므로 타이틀 영역이 조금 길어져도 안정적으로 보이게 함 */
.calendar-title-btn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* v3.9 animation cleanup */

/*
  연도/월 줄에서 드래그 중 이미 날짜판이 반응하므로,
  놓을 때 발생하던 두 번째 날짜판 애니메이션은 JS에서 제거했습니다.
*/

/* 날짜판 휠 월 이동: 빠르게 다라락 넘어가도록 짧고 가벼운 세로 이동 */
.calendar-days.surface-up {
  animation: calendarWheelQuickUp 0.34s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.calendar-days.surface-down {
  animation: calendarWheelQuickDown 0.34s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes calendarWheelQuickUp {
  0% {
    opacity: 0.42;
    transform: translateY(42px) scale(0.992);
    filter: blur(0.6px);
  }
  78% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes calendarWheelQuickDown {
  0% {
    opacity: 0.42;
    transform: translateY(-42px) scale(0.992);
    filter: blur(0.6px);
  }
  78% {
    opacity: 1;
    transform: translateY(2px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 좌우 날짜판 이동도 과한 잔상 없이 한 번만 짧게 */
.calendar-days.surface-left {
  animation: calendarSurfaceCleanLeft 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.calendar-days.surface-right {
  animation: calendarSurfaceCleanRight 0.42s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes calendarSurfaceCleanLeft {
  0% {
    opacity: 0.42;
    transform: translateX(48px) scale(0.992);
    filter: blur(0.6px);
  }
  78% {
    opacity: 1;
    transform: translateX(-2px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes calendarSurfaceCleanRight {
  0% {
    opacity: 0.42;
    transform: translateX(-48px) scale(0.992);
    filter: blur(0.6px);
  }
  78% {
    opacity: 1;
    transform: translateX(2px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

/* 드래그 중 미리보기는 더 짧게 */
.calendar-days.drag-preview-left {
  animation: calendarPreviewLeft 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.calendar-days.drag-preview-right {
  animation: calendarPreviewRight 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.calendar-days.drag-preview-up {
  animation: calendarPreviewUp 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.calendar-days.drag-preview-down {
  animation: calendarPreviewDown 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}


/* v3.10 final calendar polish */

/* 연도/월 줄을 잡고 움직일 때 날짜판 반응을 조금 더 길고 부드럽게 */
.calendar-days.drag-preview-left {
  animation: calendarStripPreviewLeft 0.46s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.calendar-days.drag-preview-right {
  animation: calendarStripPreviewRight 0.46s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.calendar-days.drag-preview-up {
  animation: calendarStripPreviewUp 0.46s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.calendar-days.drag-preview-down {
  animation: calendarStripPreviewDown 0.46s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes calendarStripPreviewLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  45% {
    transform: translateX(-28px);
    opacity: 0.64;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes calendarStripPreviewRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  45% {
    transform: translateX(28px);
    opacity: 0.64;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes calendarStripPreviewUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  45% {
    transform: translateY(-24px);
    opacity: 0.64;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes calendarStripPreviewDown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  45% {
    transform: translateY(24px);
    opacity: 0.64;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 연도/월 칩을 클릭해서 넘어갈 때 날짜판도 한 번 부드럽게 반응 */
.calendar-days.surface-left {
  animation: calendarChipClickLeft 0.48s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.calendar-days.surface-right {
  animation: calendarChipClickRight 0.48s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes calendarChipClickLeft {
  0% {
    opacity: 0.38;
    transform: translateX(52px) scale(0.992);
    filter: blur(0.6px);
  }
  78% {
    opacity: 1;
    transform: translateX(-2px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes calendarChipClickRight {
  0% {
    opacity: 0.38;
    transform: translateX(-52px) scale(0.992);
    filter: blur(0.6px);
  }
  78% {
    opacity: 1;
    transform: translateX(2px) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

/* 날짜 선택은 확실하게 하얀 원으로 표시 */
.day.selected {
  color: #111827 !important;
  background: #fff !important;
  border-color: rgba(255,255,255,0.9) !important;
  transform: scale(1.08);
  box-shadow:
    0 12px 28px rgba(255,255,255,0.16),
    inset 0 1px 0 rgba(255,255,255,0.95);
}

.day.selected:hover {
  background: #fff !important;
  color: #111827 !important;
  transform: scale(1.1);
}

.day.muted.selected {
  color: #111827 !important;
  opacity: 1;
}


/* v3.11 requested calendar fixes */

/* 날짜판에서 날짜 클릭이 드래그 클래스에 막히지 않도록 보장 */
.calendar-days.grabbing .day {
  pointer-events: auto !important;
}

/* 연도/월 줄을 잡고 좌우로 움직일 때 날짜판 반응을 더 길게 */
.calendar-days.drag-preview-left {
  animation: calendarStripPreviewLeftLong 0.82s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.calendar-days.drag-preview-right {
  animation: calendarStripPreviewRightLong 0.82s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes calendarStripPreviewLeftLong {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  42% {
    transform: translateX(-42px);
    opacity: 0.58;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes calendarStripPreviewRightLong {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  42% {
    transform: translateX(42px);
    opacity: 0.58;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 연도/월 칩 좌클릭 선택과 드래그 선택의 느낌 통일 */
.quick-years .year-chip,
.month-strip .month-chip {
  user-select: none;
  -webkit-user-select: none;
}

/* 날짜 선택 하얀 원 고정 */
.day.selected {
  color: #111827 !important;
  background: #fff !important;
  border-color: rgba(255,255,255,0.95) !important;
  transform: scale(1.1) !important;
  box-shadow:
    0 12px 28px rgba(255,255,255,0.2),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}

.day.muted.selected {
  color: #111827 !important;
  background: #fff !important;
  opacity: 1 !important;
}


/* v3.12 reliable chip/date selection */

/* 연도/월 줄을 잡고 좌우로 움직일 때 날짜판 반응을 더 길게 */
.calendar-days.drag-preview-left {
  animation: calendarStripPreviewLeftExtraLong 1.05s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.calendar-days.drag-preview-right {
  animation: calendarStripPreviewRightExtraLong 1.05s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes calendarStripPreviewLeftExtraLong {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  40% {
    transform: translateX(-54px);
    opacity: 0.54;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes calendarStripPreviewRightExtraLong {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  40% {
    transform: translateX(54px);
    opacity: 0.54;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 날짜 클릭은 하얀 원으로 확실히 표시 */
.day.selected,
.day.selected:hover,
.day.muted.selected,
.day.muted.selected:hover {
  color: #111827 !important;
  background: #fff !important;
  border-color: rgba(255,255,255,0.95) !important;
  opacity: 1 !important;
  transform: scale(1.1) !important;
  box-shadow:
    0 12px 28px rgba(255,255,255,0.22),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

/* 날짜 클릭 이벤트가 부모 드래그 상태에 먹히지 않도록 */
.calendar-days .day {
  pointer-events: auto !important;
}


/* v3.13 fixed baseline
   v3.12의 기능은 유지하고,
   연도/월 줄 좌우 드래그 시 날짜판 애니메이션만 이전 버전 느낌으로 복귀합니다.
*/

.calendar-days.drag-preview-left {
  animation: calendarStripPreviewLeftFixed 0.82s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.calendar-days.drag-preview-right {
  animation: calendarStripPreviewRightFixed 0.82s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes calendarStripPreviewLeftFixed {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  42% {
    transform: translateX(-42px);
    opacity: 0.58;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes calendarStripPreviewRightFixed {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  42% {
    transform: translateX(42px);
    opacity: 0.58;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


/* v3.14 dropdown layer fix */
/* 시·도/시·군·구 패널이 아래 결과 glass 카드에 먹히지 않도록 최상단 레이어로 고정 */
.onboarding {
  position: relative;
  z-index: 5000;
  overflow: visible !important;
}

.onboarding:has(.custom-select-field.open),
.onboarding:has(.date-field.open) {
  z-index: 99990;
}

.glass.onboarding,
.glass.onboarding .glass-inner,
.form-grid,
.field {
  overflow: visible !important;
}

.results {
  position: relative;
  z-index: 1;
}

.custom-select-field.open,
.date-field.open {
  position: relative;
  z-index: 100000 !important;
}

.dark-select-panel {
  z-index: 100001 !important;
  max-height: 360px;
  box-shadow:
    0 42px 120px rgba(15, 23, 42, 0.46),
    0 0 0 1px rgba(255,255,255,0.11),
    inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

.calendar-panel {
  z-index: 100001 !important;
}

/* v3.14 stronger detail page */
.detail-layout-upgraded {
  grid-template-columns: minmax(0, 1.28fr) 350px;
  gap: 22px;
}

.detail-main-upgraded {
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, rgba(0,122,255,0.14), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.28));
}

.detail-hero-card {
  padding: 34px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 100% 0, rgba(0,122,255,0.22), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.82), rgba(255,255,255,0.38));
  border-bottom: 1px solid rgba(255,255,255,0.64);
}

.detail-kicker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.detail-type-pill {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: rgba(15,23,42,0.72);
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(255,255,255,0.72);
  font-size: 13px;
  font-weight: 950;
}

.detail-lead-strong {
  max-width: 760px;
  margin-bottom: 22px;
  font-weight: 780;
}

.detail-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.82fr;
  gap: 12px;
}

.hero-info-card {
  min-height: 128px;
  padding: 20px;
  border-radius: 28px;
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(255,255,255,0.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.66),
    0 16px 38px rgba(15,23,42,0.07);
}

.hero-info-card span,
.section-label {
  display: inline-flex;
  margin-bottom: 9px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: -0.02em;
}

.hero-info-card strong {
  display: block;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.42;
  letter-spacing: -0.055em;
  word-break: keep-all;
}

.hero-info-card-main {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(0,122,255,0.98), rgba(37,99,235,0.92));
  box-shadow:
    0 22px 54px rgba(0, 122, 255, 0.23),
    inset 0 1px 0 rgba(255,255,255,0.38);
}

.hero-info-card-main span,
.hero-info-card-main strong {
  color: #fff;
}

.decision-card,
.timeline-card,
.detail-bottom-grid,
.detail-focus-grid {
  margin: 18px 24px 0;
}

.decision-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 16px;
  align-items: center;
  padding: 26px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(15,23,42,0.96), rgba(30,41,59,0.94));
  color: #fff;
  box-shadow: 0 24px 58px rgba(15,23,42,0.18);
}

.decision-card .section-label {
  color: rgba(147,197,253,0.95);
}

.decision-card h3 {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.06em;
  word-break: keep-all;
}

.decision-card p {
  margin: 0;
  color: rgba(255,255,255,0.74);
  line-height: 1.7;
  font-weight: 750;
  word-break: keep-all;
}

.decision-badge {
  min-height: 124px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  border-radius: 26px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
}

.decision-badge b {
  display: block;
  font-size: 20px;
  letter-spacing: -0.05em;
}

.decision-badge span {
  color: rgba(255,255,255,0.68);
  font-size: 12px;
  font-weight: 850;
}

.detail-focus-grid,
.detail-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.focus-box,
.timeline-card,
.detail-note-card {
  padding: 24px;
  border-radius: 30px;
  background: rgba(255,255,255,0.56);
  border: 1px solid rgba(255,255,255,0.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.68),
    0 16px 42px rgba(15,23,42,0.065);
}

.focus-blue {
  background:
    radial-gradient(circle at 100% 0, rgba(0,122,255,0.18), transparent 42%),
    rgba(255,255,255,0.62);
}

.focus-box h3,
.timeline-card h3,
.detail-note-card h3 {
  margin: 0 0 14px;
  color: #0f172a;
  font-size: 22px;
  letter-spacing: -0.06em;
}

.focus-list {
  margin: 0;
  padding-left: 20px;
  color: rgba(15,23,42,0.84);
  font-size: 15px;
  line-height: 1.85;
  font-weight: 820;
  word-break: keep-all;
}

.timeline-list {
  display: grid;
  gap: 10px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.52);
  border: 1px solid rgba(255,255,255,0.62);
}

.timeline-item b {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(180deg, #007aff, #2563eb);
}

.timeline-item p {
  margin: 0;
  color: rgba(15,23,42,0.82);
  line-height: 1.65;
  font-weight: 800;
}

.detail-bottom-grid {
  margin-bottom: 24px;
}

.detail-note-card p {
  margin: 0;
  color: rgba(15,23,42,0.78);
  line-height: 1.75;
  font-weight: 780;
  word-break: keep-all;
}

.detail-note-card-blue {
  background:
    linear-gradient(145deg, rgba(219,234,254,0.82), rgba(255,255,255,0.56));
}

.detail-side-upgraded {
  padding: 22px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.32));
}

.side-sticky-title span {
  display: inline-flex;
  margin-bottom: 8px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 950;
}

.side-sticky-title h3 {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: -0.065em;
}

.side-sticky-title p {
  margin: 0 0 18px;
  color: rgba(15,23,42,0.62);
  line-height: 1.6;
  font-size: 14px;
  font-weight: 800;
}

.question-list-upgraded {
  display: grid;
  gap: 12px;
}

.question-item-upgraded {
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(255,255,255,0.68);
}

.question-item-upgraded p {
  margin: 0 0 12px;
  color: #0f172a;
  font-weight: 900;
  line-height: 1.55;
  word-break: keep-all;
}

.side-primary {
  width: 100%;
  margin-top: 14px;
}

.side-actions-upgraded {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.external-strong {
  min-height: 54px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.95), rgba(30,41,59,0.95));
  color: #fff !important;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(15,23,42,0.14);
}

@media (max-width: 980px) {
  .detail-layout-upgraded {
    grid-template-columns: 1fr;
  }

  .detail-hero-grid,
  .detail-focus-grid,
  .detail-bottom-grid,
  .decision-card {
    grid-template-columns: 1fr;
  }

  .detail-side-upgraded {
    position: relative;
    top: auto;
  }
}

@media (max-width: 680px) {
  .detail-hero-card {
    padding: 24px;
  }

  .decision-card,
  .timeline-card,
  .detail-bottom-grid,
  .detail-focus-grid {
    margin-left: 14px;
    margin-right: 14px;
  }
}


/* v3.15 upgraded policy card list */
/* 상세 페이지의 정보 강조 방식과 맞춰 정책 목록 카드도 행동 중심으로 재구성 */

.policy-grid {
  gap: 18px;
}

.policy-card {
  min-height: 392px;
  padding: 0;
  border-radius: 34px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 100% 0, rgba(0,122,255,0.16), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.32));
  border: 1px solid rgba(255,255,255,0.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 22px 58px rgba(15,23,42,0.095);
  transition:
    transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.26s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}

.policy-card::before {
  display: none;
}

.policy-card-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.72), transparent 48%),
    radial-gradient(circle at 88% 8%, rgba(0,122,255,0.18), transparent 28%),
    radial-gradient(circle at 8% 100%, rgba(52,199,89,0.10), transparent 30%);
  pointer-events: none;
}

.policy-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.82);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.82),
    0 30px 74px rgba(15,23,42,0.14);
}

.policy-top-upgraded,
.policy-bottom-upgraded {
  position: relative;
  z-index: 1;
}

.policy-top-upgraded {
  padding: 22px 22px 0;
}

.policy-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.provider-chip {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: #2563eb;
  background: rgba(219,234,254,0.66);
  border: 1px solid rgba(255,255,255,0.7);
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.match-badge-dark {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.96), rgba(30,41,59,0.95));
  box-shadow: 0 10px 22px rgba(15,23,42,0.14);
}

.policy-title-upgraded {
  margin: 0 0 15px;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.07em;
  word-break: keep-all;
}

.benefit-panel {
  min-height: 112px;
  padding: 18px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(0,122,255,0.98), rgba(37,99,235,0.92));
  color: #fff;
  box-shadow:
    0 18px 42px rgba(0,122,255,0.2),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.benefit-panel span {
  display: inline-flex;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  font-weight: 950;
}

.benefit-panel strong {
  display: block;
  color: #fff;
  font-size: 18px;
  line-height: 1.42;
  letter-spacing: -0.045em;
  word-break: keep-all;
}

.mini-info-row {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 10px;
  margin-top: 12px;
}

.mini-info-row div {
  min-height: 78px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(255,255,255,0.66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.62);
}

.mini-info-row span,
.policy-check-upgraded b {
  display: block;
  margin-bottom: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.mini-info-row b {
  display: block;
  color: rgba(15,23,42,0.86);
  font-size: 14px;
  line-height: 1.42;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.policy-check-upgraded {
  margin-top: 12px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(255,255,255,0.66);
}

.policy-check-upgraded ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(15,23,42,0.8);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 850;
  word-break: keep-all;
}

.policy-bottom-upgraded {
  display: grid;
  gap: 14px;
  padding: 0 22px 22px;
}

.policy-bottom-upgraded .policy-meta {
  padding-top: 14px;
}

.tag-strong {
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.92), rgba(30,41,59,0.92)) !important;
  border-color: rgba(255,255,255,0.4) !important;
}

.card-cta {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: #fff;
  background:
    linear-gradient(180deg, #007aff, #2563eb);
  font-size: 15px;
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(0,122,255,0.18);
}

.policy-card:hover .card-cta {
  filter: brightness(1.04);
}

@media (max-width: 1180px) {
  .policy-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .policy-grid {
    grid-template-columns: 1fr;
  }

  .policy-card {
    min-height: auto;
  }
}


/* v3.16 compact policy cards */
/* 목록에서는 짧게 궁금증만 만들고, 조건/대상/신청시기는 상세 페이지에서 보여줍니다. */

.policy-card {
  min-height: 318px !important;
}

.policy-top-compact {
  padding: 22px 22px 0;
}

.benefit-panel-compact {
  min-height: 104px;
  display: grid;
  align-content: center;
}

.benefit-panel-compact strong {
  font-size: 19px;
  line-height: 1.38;
}

.policy-teaser {
  margin: 12px 0 0;
  padding: 15px 16px;
  border-radius: 22px;
  color: rgba(15,23,42,0.72);
  background: rgba(255,255,255,0.52);
  border: 1px solid rgba(255,255,255,0.68);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 850;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.policy-bottom-compact {
  padding-top: 0;
}

/* 카드 목록에서는 숨김: 상세에서 보여줄 정보 */
.policy-card .mini-info-row,
.policy-card .policy-check-upgraded,
.policy-card .policy-check {
  display: none !important;
}

/* 짧은 카드에서도 CTA가 확실히 보이도록 */
.policy-bottom-compact .card-cta {
  min-height: 48px;
  font-size: 16px;
}

@media (max-width: 760px) {
  .policy-card {
    min-height: auto !important;
  }
}


/* v3.17 policy card copy cleanup */
/* 목록 카드에서 불필요한 안내 문구 제거. 기관명만 짧게 표시 */

.policy-card {
  min-height: 292px !important;
}

.policy-teaser {
  display: none !important;
}

.agency-line {
  margin: 12px 0 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border-radius: 20px;
  color: rgba(15,23,42,0.8);
  background: rgba(255,255,255,0.48);
  border: 1px solid rgba(255,255,255,0.66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.58);
}

.agency-line span {
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.agency-line b {
  color: #0f172a;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.benefit-panel-compact {
  min-height: 100px;
}

.policy-bottom-compact .policy-meta {
  padding-top: 10px;
}

@media (max-width: 760px) {
  .policy-card {
    min-height: auto !important;
  }
}


/* v3.18 calm policy list */
/*
  카드 목록에서 파란 강조 박스와 파란 CTA가 반복되며 눈이 피곤해지는 문제를 정리합니다.
  목록은 조용하게 훑고, 자세한 정보는 상세 페이지에서 보도록 역할을 분리합니다.
*/

.policy-grid {
  gap: 16px !important;
}

.policy-card {
  min-height: 258px !important;
  padding: 0 !important;
  border-radius: 30px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.74), rgba(255,255,255,0.36)) !important;
  border: 1px solid rgba(255,255,255,0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 18px 44px rgba(15,23,42,0.07) !important;
  overflow: hidden;
}

.policy-card:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 24px 58px rgba(15,23,42,0.11) !important;
}

.policy-card-glow {
  background:
    radial-gradient(circle at 100% 0, rgba(0,122,255,0.08), transparent 35%),
    radial-gradient(circle at 0 100%, rgba(52,199,89,0.055), transparent 32%) !important;
}

.policy-top-calm {
  position: relative;
  z-index: 1;
  padding: 22px 22px 0;
}

.calm-head {
  margin-bottom: 14px;
}

.provider-chip-calm {
  color: #2563eb !important;
  background: rgba(219,234,254,0.52) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
}

.match-badge-calm {
  color: rgba(15,23,42,0.78) !important;
  background: rgba(255,255,255,0.62) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: none !important;
}

.policy-title-calm {
  margin: 0 0 10px !important;
  color: #0f172a !important;
  font-size: 24px !important;
  line-height: 1.22 !important;
  letter-spacing: -0.065em !important;
  word-break: keep-all;
}

.benefit-text-calm {
  min-height: 52px;
  margin: 0;
  color: rgba(15,23,42,0.68);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 850;
  letter-spacing: -0.04em;
  word-break: keep-all;
}

.agency-line-calm {
  margin-top: 16px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.48) !important;
}

.policy-bottom-calm {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  padding: 18px 22px 22px;
}

.policy-meta-calm {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.policy-meta-calm .tag {
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 920;
  color: rgba(15,23,42,0.62);
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(255,255,255,0.64);
}

.tag-calm-primary {
  color: #fff !important;
  background: rgba(15,23,42,0.88) !important;
  border-color: rgba(15,23,42,0.08) !important;
}

.card-cta-calm {
  min-height: 44px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px !important;
  color: #0f172a !important;
  background: rgba(255,255,255,0.62) !important;
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 950;
}

.policy-card:hover .card-cta-calm {
  color: #fff !important;
  background: linear-gradient(180deg, #007aff, #2563eb) !important;
  box-shadow: 0 14px 30px rgba(0,122,255,0.16) !important;
}

/* 이전 버전의 강한 파란 혜택 박스와 강한 버튼을 목록에서 완전히 눌러줌 */
.policy-card .benefit-panel,
.policy-card .benefit-panel-compact {
  display: none !important;
}

.policy-card .card-cta:not(.card-cta-calm) {
  background: rgba(255,255,255,0.62) !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

@media (max-width: 1180px) {
  .policy-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .policy-grid {
    grid-template-columns: 1fr !important;
  }

  .policy-card {
    min-height: auto !important;
  }
}


/* v3.24 API content cleanup */
.timeline-item p,
.focus-list li,
.detail-note-card li,
.hero-info-card strong,
.decision-card h3 {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.timeline-item p {
  font-size: 15px;
}

.decision-card h3 {
  font-size: 24px;
  line-height: 1.35;
}


/* v3.25 benefit detail section */
/* 신청 순서 대신 실제 혜택 중심으로 보여줍니다. */

.benefit-detail-card {
  margin: 18px 24px 0;
  padding: 26px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0, rgba(0,122,255,0.14), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,0.66), rgba(255,255,255,0.38));
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.74),
    0 18px 44px rgba(15,23,42,0.07);
}

.benefit-detail-card h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 25px;
  letter-spacing: -0.065em;
}

.benefit-detail-lead {
  margin: 0 0 18px;
  color: rgba(15,23,42,0.62);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 820;
  word-break: keep-all;
}

.benefit-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.benefit-detail-item {
  min-height: 112px;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,255,255,0.56);
  border: 1px solid rgba(255,255,255,0.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.66);
}

.benefit-detail-item span {
  display: block;
  margin-bottom: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 950;
}

.benefit-detail-item strong {
  display: block;
  color: #0f172a;
  font-size: 19px;
  line-height: 1.42;
  letter-spacing: -0.05em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.benefit-detail-item.tone-blue {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(0,122,255,0.98), rgba(37,99,235,0.92));
  box-shadow:
    0 18px 42px rgba(0,122,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.benefit-detail-item.tone-blue span,
.benefit-detail-item.tone-blue strong,
.benefit-detail-item.tone-strong span,
.benefit-detail-item.tone-strong strong {
  color: #fff;
}

.benefit-detail-item.tone-strong {
  background:
    linear-gradient(145deg, rgba(15,23,42,0.96), rgba(30,41,59,0.94));
}

.benefit-detail-item.tone-muted strong {
  color: rgba(15,23,42,0.62);
}

@media (max-width: 760px) {
  .benefit-detail-card {
    margin-left: 14px;
    margin-right: 14px;
    padding: 22px;
  }

  .benefit-detail-grid {
    grid-template-columns: 1fr;
  }
}


/* v3.27 youth-friendly concise policy text */

.hero-info-card strong,
.focus-list li,
.benefit-detail-item strong,
.detail-note-card li {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.hero-info-card {
  min-height: 116px;
}

.hero-info-card strong {
  font-size: 18px;
  line-height: 1.45;
}

.focus-list {
  font-size: 15px;
  line-height: 1.75;
}

.benefit-detail-item {
  min-height: 104px;
}

.benefit-detail-item strong {
  font-size: 18px;
}

.detail-note-card {
  min-height: auto;
}

.detail-note-card .focus-list li {
  margin-bottom: 4px;
}


/* v3.28 stronger glass background */

.hero,
.section-card,
.summary-card,
.policy-card,
.detail-shell,
.benefit-detail-card,
.decision-card,
.focus-box,
.detail-note-card {
  backdrop-filter: blur(18px) saturate(128%);
  -webkit-backdrop-filter: blur(18px) saturate(128%);
}

@media (max-width: 768px) {
  .app-shell::before {
    width: calc(100% - 12px);
    top: 8px;
    height: calc(100vh - 16px);
    border-radius: 28px;
  }

  body {
    background:
      radial-gradient(circle at 8% 12%, rgba(0, 122, 255, 0.32), transparent 26%),
      radial-gradient(circle at 90% 8%, rgba(255, 149, 0, 0.24), transparent 24%),
      radial-gradient(circle at 82% 78%, rgba(124, 58, 237, 0.20), transparent 26%),
      radial-gradient(circle at 18% 84%, rgba(52, 199, 89, 0.16), transparent 24%),
      linear-gradient(135deg, #eef4ff 0%, #eceff9 42%, #f5ecff 72%, #fff5ea 100%);
  }
}


/* v3.30 information hierarchy cleanup */
/* 상단은 요약만, 실제 혜택은 혜택 섹션에서만 보여줍니다. */

.detail-quick-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.quick-fact {
  min-height: 92px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255,255,255,0.52);
  border: 1px solid rgba(255,255,255,0.68);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.68),
    0 12px 30px rgba(15,23,42,0.05);
}

.quick-fact span {
  display: block;
  margin-bottom: 8px;
  color: #2563eb;
  font-size: 12px;
  font-weight: 950;
}

.quick-fact strong {
  display: block;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.045em;
  word-break: keep-all;
}

.benefit-detail-card {
  margin-top: 18px;
}

.detail-focus-grid {
  margin-top: 18px;
}

.detail-hero-grid {
  display: none !important;
}

@media (max-width: 760px) {
  .detail-quick-strip {
    grid-template-columns: 1fr;
  }

  .quick-fact {
    min-height: auto;
  }
}


/* v3.31 multi-source badges */

.policy-card-head {
  gap: 8px;
}

.source-chip {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: rgba(15,23,42,0.62);
  background: rgba(255,255,255,0.56);
  border: 1px solid rgba(255,255,255,0.68);
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.source-detail-pill {
  color: #0f766e;
  background: rgba(204,251,241,0.55);
}


/* v3.39 explanation polish */
.decision-card h3 {
  line-height: 1.38;
  letter-spacing: -0.055em;
  word-break: keep-all;
}

.benefit-detail-item strong,
.quick-fact strong {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.benefit-detail-item.tone-strong strong {
  font-size: 18px;
  line-height: 1.45;
}


/* Youth Pick unified choice color
   도/시 선택의 푸른 글라스 색감을 직업구분/관심혜택 선택 버튼에도 통일 적용 */
.choice-card,
.chip,
.status-card,
.benefit-card {
  border: 1px solid rgba(79, 124, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 249, 255, 0.68)),
    rgba(255, 255, 255, 0.56);
  box-shadow: 0 12px 28px rgba(40, 80, 160, 0.08);
}

.choice-card:hover,
.chip:hover,
.status-card:hover,
.benefit-card:hover {
  border-color: rgba(79, 124, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(238, 244, 255, 0.82)),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 16px 34px rgba(54, 94, 180, 0.13);
  transform: translateY(-1px);
}

.choice-card:has(input:checked),
.chip:has(input:checked),
.status-card:has(input:checked),
.benefit-card:has(input:checked),
.choice-card.active,
.chip.active,
.status-card.active,
.benefit-card.active {
  border-color: rgba(79, 124, 255, 0.52);
  background:
    radial-gradient(circle at 20% 10%, rgba(79, 124, 255, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(239, 245, 255, 0.98), rgba(226, 236, 255, 0.86));
  color: #1f3f72;
  box-shadow:
    0 18px 42px rgba(64, 111, 210, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.choice-card:has(input:checked) strong,
.choice-card:has(input:checked) span,
.chip:has(input:checked),
.status-card:has(input:checked) strong,
.status-card:has(input:checked) span,
.benefit-card:has(input:checked) strong,
.benefit-card:has(input:checked) span,
.choice-card.active strong,
.choice-card.active span,
.chip.active,
.status-card.active strong,
.status-card.active span,
.benefit-card.active strong,
.benefit-card.active span {
  color: #1f3f72;
}

.choice-card input,
.status-card input,
.benefit-card input {
  accent-color: #4f7cff;
}

.choice-card:has(input:checked)::after,
.status-card:has(input:checked)::after,
.benefit-card:has(input:checked)::after {
  content: "선택됨";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(79, 124, 255, 0.14);
  border: 1px solid rgba(79, 124, 255, 0.26);
  color: #2f5fc7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* 직업구분 radio 그룹이 label만으로 구성된 경우까지 커버 */
input[name="status"]:checked + span,
input[name="jobStatus"]:checked + span,
input[name="status"]:checked + strong,
input[name="jobStatus"]:checked + strong {
  color: #1f3f72;
}

/* 선택 패널 옵션과 같은 톤 유지 */
.select-option.active,
.select-option:hover {
  border-color: rgba(79, 124, 255, 0.36);
  background:
    radial-gradient(circle at 16% 0%, rgba(79, 124, 255, 0.18), transparent 40%),
    linear-gradient(180deg, rgba(245, 249, 255, 0.98), rgba(232, 240, 255, 0.86));
  color: #1f3f72;
}


/* 현재 상태 선택 버튼 색감 고정
   도/시 선택 버튼과 같은 푸른 글라스 톤으로 현재 상태 영역을 직접 지정 */
.status-options label,
.status-options .option,
.status-options .option-card,
.status-options .choice-card,
.status-options .status-option,
.status-options .status-card,
label:has(input[name="status"]),
label:has(input[name="jobStatus"]) {
  position: relative;
  border: 1px solid rgba(79, 124, 255, 0.20) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(246, 249, 255, 0.72)),
    rgba(255, 255, 255, 0.62) !important;
  color: #233b63 !important;
  box-shadow: 0 12px 28px rgba(40, 80, 160, 0.08) !important;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.status-options label:hover,
.status-options .option:hover,
.status-options .option-card:hover,
.status-options .choice-card:hover,
.status-options .status-option:hover,
.status-options .status-card:hover,
label:has(input[name="status"]):hover,
label:has(input[name="jobStatus"]):hover {
  border-color: rgba(79, 124, 255, 0.42) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(79, 124, 255, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(235, 242, 255, 0.86)) !important;
  box-shadow: 0 16px 34px rgba(54, 94, 180, 0.14) !important;
  transform: translateY(-1px);
}

.status-options label:has(input:checked),
.status-options .option:has(input:checked),
.status-options .option-card:has(input:checked),
.status-options .choice-card:has(input:checked),
.status-options .status-option:has(input:checked),
.status-options .status-card:has(input:checked),
label:has(input[name="status"]:checked),
label:has(input[name="jobStatus"]:checked) {
  border-color: rgba(79, 124, 255, 0.60) !important;
  background:
    radial-gradient(circle at 20% 8%, rgba(79, 124, 255, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(238, 245, 255, 0.98), rgba(223, 235, 255, 0.90)) !important;
  color: #1f3f72 !important;
  box-shadow:
    0 18px 42px rgba(64, 111, 210, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.status-options label:has(input:checked) *,
.status-options .option:has(input:checked) *,
.status-options .option-card:has(input:checked) *,
.status-options .choice-card:has(input:checked) *,
.status-options .status-option:has(input:checked) *,
.status-options .status-card:has(input:checked) *,
label:has(input[name="status"]:checked) *,
label:has(input[name="jobStatus"]:checked) * {
  color: #1f3f72 !important;
}

.status-options input[type="radio"],
.status-options input[type="checkbox"],
input[name="status"],
input[name="jobStatus"] {
  accent-color: #4f7cff !important;
}

/* 브라우저가 :has를 지원하지 않아도 JS가 .is-selected를 붙이면 같은 효과 */
.status-options label.is-selected,
.status-options .option.is-selected,
.status-options .option-card.is-selected,
.status-options .choice-card.is-selected,
.status-options .status-option.is-selected,
.status-options .status-card.is-selected {
  border-color: rgba(79, 124, 255, 0.60) !important;
  background:
    radial-gradient(circle at 20% 8%, rgba(79, 124, 255, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(238, 245, 255, 0.98), rgba(223, 235, 255, 0.90)) !important;
  color: #1f3f72 !important;
  box-shadow:
    0 18px 42px rgba(64, 111, 210, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.status-options label.is-selected *,
.status-options .option.is-selected *,
.status-options .option-card.is-selected *,
.status-options .choice-card.is-selected *,
.status-options .status-option.is-selected *,
.status-options .status-card.is-selected * {
  color: #1f3f72 !important;
}





/* 최종 드롭다운 애니메이션 수정
   옵션 개별 애니메이션을 제거하고 패널 전체가 내려오게 처리합니다.
   구로구/금천구처럼 아래쪽 옵션이 흐리게 남는 문제 방지 */
@keyframes youthPickPanelDropFull {
  0% {
    opacity: 0;
    transform: translate3d(0, -18px, 0) scale(0.985);
    clip-path: inset(0 0 100% 0 round 24px);
    filter: blur(2px);
  }

  55% {
    opacity: 1;
    transform: translate3d(0, 3px, 0) scale(1.002);
    clip-path: inset(0 0 0 0 round 24px);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    clip-path: inset(0 0 0 0 round 24px);
    filter: blur(0);
  }
}

/* 패널 본체만 애니메이션 */
#provinceField.open .dark-select-panel,
#cityField.open .dark-select-panel,
#jobStatusField.open .dark-select-panel,
.date-field.open .calendar-panel,
#provinceField.open .select-panel,
#cityField.open .select-panel,
#jobStatusField.open .select-panel {
  display: block !important;
  opacity: 1 !important;
  transform-origin: top center !important;
  animation: youthPickPanelDropFull 1.18s cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
}

/* 옵션은 개별 opacity/딜레이 애니메이션 금지.
   모든 항목이 처음부터 같은 밝기로 보이게 고정 */
#provinceField.open .select-option,
#cityField.open .select-option,
#jobStatusField.open .select-option,
.date-field.open .calendar-day,
.dark-select-panel .select-option,
.select-panel .select-option {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  animation-delay: 0s !important;
  filter: none !important;
}

/* 기존 nth-child 딜레이나 CSS 변수 딜레이가 남아도 무력화 */
#provinceField.open .select-option[style],
#cityField.open .select-option[style],
#jobStatusField.open .select-option[style],
.date-field.open .calendar-day[style] {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  animation-delay: 0s !important;
}

/* 선택창 내부 글자가 아래쪽으로 갈수록 흐려지는 느낌이 없도록 보정 */
.dark-select-panel,
.select-panel {
  color: rgba(255, 255, 255, 0.96);
}

.dark-select-panel .select-option,
.select-panel .select-option {
  color: rgba(255, 255, 255, 0.94) !important;
}

.dark-select-panel .select-option.active,
.select-panel .select-option.active {
  color: #14315f !important;
}


/* 브랜드 로고 스플래시 유지 시간 보정 */
.splash,
#splash {
  transition: opacity 0.72s ease, transform 0.72s ease, visibility 0.72s ease !important;
}

.splash.hide,
#splash.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* Youth Pick glass background final fix
   페이지 전체에 하나의 연속 배경을 깔고, 카드만 글래스로 띄웁니다.
   중간에 검은 띠/끊긴 배경이 보이지 않도록 최종 override 합니다. */
html {
  min-height: 100%;
  background: #eef6ff !important;
}

body {
  min-height: 100vh;
  margin: 0;
  color: #0f172a;
  background:
    radial-gradient(circle at 0% 14%, rgba(174, 217, 255, 0.66), transparent 34%),
    radial-gradient(circle at 100% 8%, rgba(255, 221, 184, 0.58), transparent 32%),
    radial-gradient(circle at 88% 78%, rgba(215, 188, 255, 0.48), transparent 34%),
    radial-gradient(circle at 12% 84%, rgba(209, 247, 244, 0.40), transparent 30%),
    linear-gradient(135deg, #edf7ff 0%, #f5f0ff 52%, #fff3e9 100%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  overflow-x: hidden;
}

/* 전체 배경을 한 번 더 고정해서 스크롤 중에도 끊기지 않게 처리 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 5% 16%, rgba(147, 199, 255, 0.36), transparent 34%),
    radial-gradient(circle at 96% 9%, rgba(255, 209, 162, 0.34), transparent 32%),
    radial-gradient(circle at 84% 92%, rgba(197, 163, 255, 0.30), transparent 36%),
    linear-gradient(135deg, #eef8ff 0%, #f7f1ff 55%, #fff5ed 100%);
}

/* 검은 띠가 드러나지 않도록 최상위 래퍼/섹션 배경은 투명 처리 */
.app,
.app-shell,
.page,
.page-shell,
.page-wrap,
.site-wrap,
main,
.main,
.hero,
.hero-section,
.input-section,
.result-section,
.results,
.results-wrap,
.policy-area,
.policy-section,
.content,
.container,
.wrapper {
  background: transparent !important;
}

/* 일부 레이어가 어두운 배경색을 갖고 있어도 화면 중간에 띠처럼 보이지 않게 차단 */
.hero::before,
.hero::after,
.result-section::before,
.result-section::after,
.results::before,
.results::after,
.policy-area::before,
.policy-area::after,
.input-section::before,
.input-section::after {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* 글래스 카드 공통 보정 */
.glass,
.glass-card,
.input-card,
.form-card,
.search-card,
.summary-card,
.stat-card,
.policy-card,
.result-card,
.detail-card,
.hero-card,
.info-card,
.panel-card,
.card {
  border: 1px solid rgba(255, 255, 255, 0.50) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.38)),
    rgba(255, 255, 255, 0.46) !important;
  box-shadow:
    0 22px 60px rgba(58, 80, 140, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
}

/* 카드 내부 하이라이트가 검은색으로 깔리지 않도록 보호 */
.glass::before,
.glass-card::before,
.input-card::before,
.form-card::before,
.search-card::before,
.summary-card::before,
.stat-card::before,
.policy-card::before,
.result-card::before,
.detail-card::before,
.hero-card::before,
.info-card::before,
.panel-card::before,
.card::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0.04)) !important;
}

/* 결과 카드 그리드 주변 여백도 같은 배경을 타게 처리 */
#results,
.results,
.result-grid,
.policy-grid,
.cards-grid {
  background: transparent !important;
}

/* 배포/브라우저에서 기본 검정 배경이 비치는 것 방지 */
html,
body,
#app,
#root {
  background-color: #eef6ff !important;
}




/* Youth Pick glass follows content final fix
   글래스 배경이 화면 위에 딱 붙은 빈 판처럼 보이지 않고,
   원래 레이아웃 위치를 유지한 채 정책 결과 높이만큼 아래로 따라 늘어나게 합니다. */
:root {
  --yp-page-max: 1280px;
  --yp-page-pad: 44px;
  --yp-shell-top-space: 28px;
  --yp-shell-inner-x: 0px;
}

/* 전체 페이지 폭은 가운데 정렬하되, 위로 붙이지 않음 */
.app-shell,
.page-shell,
.page-wrap,
.site-wrap,
.app,
main,
.main {
  width: min(var(--yp-page-max), calc(100% - var(--yp-page-pad) * 2)) !important;
  max-width: var(--yp-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* app-shell은 기존 화면 흐름을 유지하고, 결과가 생기면 높이만 아래로 늘어남 */
.app-shell {
  position: relative !important;
  isolation: isolate !important;
  min-height: auto !important;
  padding: var(--yp-shell-top-space) 0 96px !important;
  overflow: visible !important;
}

/* 글래스 배경판은 app-shell 전체를 덮되, 위쪽에 따로 빈 판처럼 붙지 않게 content 흐름을 따라감 */
.app-shell::before {
  content: "";
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--yp-shell-top-space) !important;
  bottom: 42px !important;
  width: auto !important;
  height: auto !important;
  min-height: calc(100vh - 120px) !important;
  transform: none !important;
  z-index: -1 !important;
  border-radius: 34px !important;
  pointer-events: none !important;
}

/* 상단 네비/히어로/입력/결과는 같은 폭 기준 안에서 움직임 */
.topbar,
.navbar,
.header,
.hero,
.hero-section,
.hero-card,
.hero-copy,
.hero-content,
.hero-inner,
.input-card,
.form-card,
.search-card,
.summary-row,
.tabs,
.results,
.result-grid,
.policy-grid,
.cards-grid,
#results {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
}

/* 히어로 제목은 기존 느낌처럼 여유 있게 두되 배경판 밖으로 튀는 사각 배경은 제거 */
.hero,
.hero-section,
.hero-card,
.hero-copy,
.hero-content,
.hero-inner {
  background: transparent !important;
}

.hero::before,
.hero::after,
.hero-section::before,
.hero-section::after,
.hero-card::before,
.hero-card::after,
.hero-copy::before,
.hero-copy::after,
.hero-content::before,
.hero-content::after,
.hero-inner::before,
.hero-inner::after {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 제목이 위로 잘리지 않게만 최소 보정 */
.hero-title,
.main-title,
.headline,
h1 {
  max-width: 920px !important;
  line-height: 1.02 !important;
  overflow: visible !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* 입력 카드와 결과 카드가 생기면 배경판을 아래로 밀어내는 정상 문서 흐름 유지 */
.input-card,
.form-card,
.search-card {
  margin-top: 28px !important;
}

.results.show {
  margin-bottom: 76px !important;
  padding-bottom: 22px !important;
}

.policy-grid {
  margin-bottom: 46px !important;
  align-items: stretch !important;
}

/* 오른쪽으로 튀어나오는 배경/레이어 방지 */
html,
body {
  overflow-x: hidden !important;
}

/* 모바일 */
@media (max-width: 900px) {
  :root {
    --yp-page-pad: 16px;
    --yp-shell-top-space: 18px;
  }

  .app-shell {
    padding-bottom: 72px !important;
  }

  .app-shell::before {
    top: var(--yp-shell-top-space) !important;
    bottom: 28px !important;
    border-radius: 26px !important;
    min-height: calc(100vh - 90px) !important;
  }

  .hero-title,
  .main-title,
  .headline,
  h1 {
    max-width: 100% !important;
    line-height: 1.04 !important;
  }

  .input-card,
  .form-card,
  .search-card {
    margin-top: 22px !important;
  }
}


/* Youth Pick recommended contrast glass final
   현재 레이아웃/애니메이션은 유지하고,
   배경은 더 컬러감 있게, 글래스는 더 밝고 선명하게 대비 강화 */
html {
  background: #eaf5ff !important;
}

body {
  background:
    radial-gradient(circle at 0% 15%, rgba(92, 168, 255, 0.58), transparent 34%),
    radial-gradient(circle at 72% 8%, rgba(155, 118, 255, 0.36), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(255, 181, 126, 0.52), transparent 32%),
    radial-gradient(circle at 85% 88%, rgba(202, 157, 255, 0.46), transparent 36%),
    radial-gradient(circle at 8% 88%, rgba(141, 227, 235, 0.42), transparent 34%),
    linear-gradient(135deg, #dff1ff 0%, #f0e9ff 52%, #ffe9dc 100%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* 전체 배경 레이어도 더 선명하게 */
body::before {
  background:
    radial-gradient(circle at 4% 16%, rgba(89, 165, 255, 0.34), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(255, 176, 118, 0.34), transparent 32%),
    radial-gradient(circle at 78% 90%, rgba(174, 128, 255, 0.30), transparent 38%),
    linear-gradient(135deg, rgba(222, 242, 255, 0.96) 0%, rgba(244, 235, 255, 0.96) 54%, rgba(255, 234, 222, 0.96) 100%) !important;
}

/* 큰 글래스 배경판: 배경과 분리되게 더 밝고 선명하게 */
.app-shell::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.44)),
    rgba(255, 255, 255, 0.46) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 30px 90px rgba(74, 92, 150, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(24px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(155%) !important;
}

/* 입력 카드/요약 카드/정책 카드: 큰 판 위에서 한 단계 더 또렷하게 */
.input-card,
.form-card,
.search-card,
.summary-card,
.stat-card,
.policy-card,
.result-card,
.detail-card,
.info-card,
.panel-card,
.card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.58)),
    rgba(255, 255, 255, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    0 22px 60px rgba(55, 79, 145, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(22px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(155%) !important;
}

/* 입력 필드: 글래스 위에서 살짝 더 선명하게 */
.input-box,
.input-field,
.field-button,
.select-trigger,
.date-trigger,
.custom-select-field .select-trigger,
.job-status-trigger {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.90), rgba(250, 252, 255, 0.70)),
    rgba(255, 255, 255, 0.66) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 14px 34px rgba(54, 84, 150, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

/* 선택/활성 상태는 기존 파란 톤을 유지하되 더 선명하게 */
.chip.active,
.choice-card.active,
.benefit-chip.active,
.interest-chip.active,
.tab.active,
.policy-card .tag-primary,
.status-select-field.open .status-trigger,
.custom-select-field.open .select-trigger {
  box-shadow:
    0 14px 34px rgba(34, 113, 230, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

/* 텍스트 대비 약간 강화 */
.hero-title,
.main-title,
.headline,
h1 {
  color: #0d172d !important;
}

.hero-title strong,
.main-title strong,
.headline strong {
  color: #1d67e8 !important;
}

/* 결과 카드가 많아져도 글래스 층이 유지되도록 */
.results.show,
.policy-grid,
.result-grid {
  background: transparent !important;
}

/* 모바일에서도 대비 유지 */
@media (max-width: 900px) {
  body {
    background:
      radial-gradient(circle at 0% 12%, rgba(92, 168, 255, 0.54), transparent 38%),
      radial-gradient(circle at 100% 18%, rgba(255, 181, 126, 0.48), transparent 36%),
      radial-gradient(circle at 84% 88%, rgba(202, 157, 255, 0.42), transparent 40%),
      linear-gradient(135deg, #e2f3ff 0%, #f2ebff 54%, #ffeddf 100%) !important;
  }
}

/* Youth Pick inner content spacing fix */
/* 배경은 유지하고, 내부 섹션들(히어로 / 입력 / 결과)이 서로 겹쳐 보이지 않도록 문서 흐름과 간격만 정리 */
#homePage.page-active {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 24px !important;
}

#homePage.page-active > header,
#homePage.page-active > section {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
}

#homePage .hero,
#homePage .compact-hero {
  padding-top: 2px !important;
  margin-bottom: 0 !important;
}

#homePage .onboarding,
#homePage .glass.onboarding {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#homePage .glass.onboarding .glass-inner {
  padding-top: 30px !important;
}

#homePage .results,
#homePage .results.show {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 12px !important;
}

#homePage .summary-row {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

#homePage .tabs {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

#homePage .policy-grid {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#homePage .policy-card,
#homePage .summary-card,
#homePage .stat {
  position: relative !important;
  z-index: 1 !important;
}

/* 큰 배경 글래스판 안쪽 여백을 조금 더 줘서 콘텐츠가 벽에 붙어 보이지 않게 */
.app-shell {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.app-shell::before {
  left: 12px !important;
  right: 12px !important;
}

/* 결과가 열렸을 때도 내부 요소 높이만큼 자연스럽게 늘어나도록 */
#results.show,
#homePage .results.show {
  display: block !important;
}

/* 모바일 간격도 동일 규칙 적용 */
@media (max-width: 900px) {
  #homePage.page-active {
    gap: 18px !important;
  }

  #homePage .glass.onboarding .glass-inner {
    padding-top: 24px !important;
  }

  .app-shell {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .app-shell::before {
    left: 8px !important;
    right: 8px !important;
  }
}


/* Youth Pick stronger glassmorphism final
   레이아웃/애니메이션은 유지하고, 유리판 느낌만 강화 */
body {
  background:
    radial-gradient(circle at 0% 14%, rgba(70, 154, 255, 0.64), transparent 34%),
    radial-gradient(circle at 70% 5%, rgba(137, 105, 255, 0.44), transparent 34%),
    radial-gradient(circle at 100% 18%, rgba(255, 174, 117, 0.58), transparent 34%),
    radial-gradient(circle at 84% 86%, rgba(198, 143, 255, 0.52), transparent 38%),
    radial-gradient(circle at 10% 88%, rgba(113, 220, 235, 0.44), transparent 36%),
    linear-gradient(135deg, #dcefff 0%, #eee7ff 52%, #ffe6d9 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  background:
    radial-gradient(circle at 4% 16%, rgba(72, 149, 255, 0.38), transparent 34%),
    radial-gradient(circle at 94% 12%, rgba(255, 167, 104, 0.38), transparent 32%),
    radial-gradient(circle at 78% 90%, rgba(169, 115, 255, 0.34), transparent 38%),
    linear-gradient(135deg, rgba(216, 239, 255, 0.92) 0%, rgba(239, 229, 255, 0.92) 54%, rgba(255, 229, 216, 0.92) 100%) !important;
}

/* 큰 유리 배경판: 흰 판 느낌을 줄이고, 투명 유리처럼 */
.app-shell::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.46), rgba(255,255,255,0.16) 44%, rgba(255,255,255,0.24)),
    radial-gradient(circle at 8% 0%, rgba(255,255,255,0.48), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,0.18), transparent 36%) !important;
  border: 1px solid rgba(255,255,255,0.74) !important;
  box-shadow:
    0 36px 110px rgba(50, 70, 135, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 0 -1px 0 rgba(255,255,255,0.24),
    inset 1px 0 0 rgba(255,255,255,0.28) !important;
  backdrop-filter: blur(34px) saturate(190%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.05) !important;
}

/* 상단바도 더 유리처럼 */
.topbar {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.58), rgba(255,255,255,0.22)),
    rgba(255,255,255,0.24) !important;
  border: 1px solid rgba(255,255,255,0.78) !important;
  box-shadow:
    0 22px 58px rgba(45, 70, 130, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.88) !important;
  backdrop-filter: blur(28px) saturate(185%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(185%) !important;
}

/* 메인 글래스 카드: 하얀 박스보다 투명 유리 느낌 */
.glass,
.input-card,
.form-card,
.search-card,
.summary-card,
.stat-card,
.policy-card,
.result-card,
.detail-card,
.info-card,
.panel-card,
.card {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.56), rgba(255,255,255,0.20) 48%, rgba(255,255,255,0.30)),
    rgba(255,255,255,0.26) !important;
  border: 1px solid rgba(255,255,255,0.76) !important;
  box-shadow:
    0 24px 70px rgba(45, 70, 135, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(255,255,255,0.22),
    inset 1px 0 0 rgba(255,255,255,0.24) !important;
  backdrop-filter: blur(30px) saturate(190%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.04) !important;
}

/* 입력 카드 내부는 읽기 좋게, 하지만 여전히 글래스 */
.glass.onboarding,
.onboarding.glass {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.26) 52%, rgba(255,255,255,0.36)),
    rgba(255,255,255,0.30) !important;
}

/* 카드 위 빛 반사 레이어 */
.glass::before,
.input-card::before,
.form-card::before,
.search-card::before,
.summary-card::before,
.policy-card::before,
.result-card::before,
.detail-card::before,
.card::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.50), rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.02)),
    radial-gradient(circle at 12% 0%, rgba(255,255,255,0.40), transparent 30%) !important;
}

/* 은은한 유리 테두리 광택 */
.glass::after,
.input-card::after,
.form-card::after,
.search-card::after,
.summary-card::after,
.policy-card::after,
.result-card::after,
.detail-card::after,
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.42), transparent 18%, transparent 72%, rgba(255,255,255,0.18)),
    linear-gradient(180deg, rgba(255,255,255,0.20), transparent 36%);
  opacity: 0.72;
  z-index: 0;
}

.glass-inner,
.policy-top,
.policy-bottom,
.summary-card > *,
.stat > *,
.card > * {
  position: relative;
  z-index: 1;
}

/* 입력 필드도 더 glass */
.input-box,
.input-field,
.field-button,
.date-trigger,
.select-trigger,
.custom-select-field .select-trigger,
.job-status-trigger {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.28)),
    rgba(255,255,255,0.24) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow:
    0 14px 36px rgba(43, 76, 145, 0.11),
    inset 0 1px 0 rgba(255,255,255,0.86),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
}

/* 선택칩은 더 떠 보이게 */
.interest-chip,
.benefit-chip,
.chip,
.tab {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0.26)),
    rgba(255,255,255,0.26) !important;
  border: 1px solid rgba(255,255,255,0.70) !important;
  box-shadow:
    0 12px 30px rgba(48, 72, 135, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.82) !important;
  backdrop-filter: blur(18px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
}

/* 정책 카드 hover 때 유리판 떠오르는 느낌 */
.policy-card:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 30px 84px rgba(45, 70, 135, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(255,255,255,0.26) !important;
}

/* 드롭다운 패널도 글래스 느낌 조금 강화 */
.dark-select-panel,
.select-panel,
.calendar-panel,
.job-status-panel {
  background:
    linear-gradient(180deg, rgba(24, 31, 45, 0.84), rgba(14, 18, 28, 0.86)),
    rgba(16, 23, 42, 0.72) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow:
    0 42px 120px rgba(15, 23, 42, 0.46),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
}

/* 너무 흐려 보이지 않게 텍스트 대비 유지 */
h1,
.hero-title,
.main-title,
.headline,
.section-title h2,
.policy-title,
.summary-card h3 {
  color: #0b1429 !important;
}

.policy-card,
.summary-card,
.stat,
.input-card,
.form-card,
.search-card {
  color: #101828 !important;
}

/* 결과 영역 배경은 계속 투명 */
.results,
.results.show,
.policy-grid,
.result-grid,
.cards-grid {
  background: transparent !important;
}



/* Youth Pick dropdown pushes content final
   선택창이 결과 카드를 덮지 않도록 absolute overlay가 아니라 문서 흐름 안에서 열리게 합니다.
   고정한 패널 전체 내려오는 애니메이션은 유지합니다. */

/* 드롭다운 필드가 열릴 때 카드 높이에 포함되도록 */
.date-field.open,
.custom-select-field.open,
#provinceField.open,
#cityField.open,
#jobStatusField.open {
  z-index: 20 !important;
}

/* 패널을 absolute overlay에서 static flow로 전환 */
#provinceField.open .dark-select-panel,
#cityField.open .dark-select-panel,
#jobStatusField.open .dark-select-panel,
#provinceField.open .select-panel,
#cityField.open .select-panel,
#jobStatusField.open .select-panel,
.date-field.open .calendar-panel {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-top: 10px !important;
  transform: none;
  z-index: 1 !important;
}

/* 입력 카드 내부가 열린 패널 높이만큼 자연스럽게 늘어나도록 */
.glass.onboarding,
.glass.onboarding .glass-inner,
.onboarding,
.form-grid,
.form-grid.compact,
.field {
  overflow: visible !important;
}

/* 그리드 행이 열린 패널 높이를 계산하게 보정 */
.form-grid.compact {
  align-items: start !important;
}

/* 관심혜택/버튼 영역이 열린 드롭다운 아래로 밀리게 */
.field.full,
.benefit-row,
.action-row,
.form-actions {
  position: relative !important;
  z-index: 1 !important;
}

/* 결과 영역은 드롭다운보다 아래 문서 흐름으로 밀려남 */
#results,
.results,
.results.show,
.summary-row,
.tabs,
.policy-grid {
  position: relative !important;
  z-index: 1 !important;
}

/* 열린 패널이 카드 밖으로 보이더라도 아래 결과를 덮는 느낌을 줄임 */
#provinceField.open .dark-select-panel,
#cityField.open .dark-select-panel,
#jobStatusField.open .dark-select-panel {
  max-height: 320px !important;
  overflow-y: auto !important;
}

/* 달력도 너무 길면 내부 스크롤 없이 카드 안에서 자연스럽게 배치 */
.date-field.open .calendar-panel {
  max-height: none !important;
}

/* 선택창이 열렸을 때 입력카드와 결과 사이 여백 확보 */
.glass.onboarding:has(.custom-select-field.open),
.glass.onboarding:has(.date-field.open) {
  margin-bottom: 34px !important;
}

/* :has 미지원 브라우저를 위한 일반 여백 */
.custom-select-field.open ~ .field,
.date-field.open ~ .field {
  margin-top: 0 !important;
}

/* 모바일에서는 패널 높이를 조금 줄여 화면을 덜 밀도록 */
@media (max-width: 900px) {
  #provinceField.open .dark-select-panel,
  #cityField.open .dark-select-panel,
  #jobStatusField.open .dark-select-panel {
    max-height: 260px !important;
  }

  #provinceField.open .dark-select-panel,
  #cityField.open .dark-select-panel,
  #jobStatusField.open .dark-select-panel,
  .date-field.open .calendar-panel {
    margin-top: 8px !important;
  }
}


/* Youth Pick reduce white plate final
   하얀 판처럼 보이는 느낌을 줄이고, 투명 유리 느낌으로 되돌립니다.
   레이아웃/애니메이션/드롭다운 흐름은 건드리지 않습니다. */

/* 큰 글래스 배경판: 흰색 면을 줄이고 배경이 더 비치게 */
.app-shell::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.38), rgba(255,255,255,0.12) 46%, rgba(255,255,255,0.20)),
    radial-gradient(circle at 8% 0%, rgba(255,255,255,0.34), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(255,255,255,0.12), transparent 36%) !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
  box-shadow:
    0 32px 92px rgba(50, 70, 135, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.74),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(34px) saturate(185%) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(34px) saturate(185%) brightness(1.03) !important;
}

/* 메인 카드: 불투명 흰색 대신 반투명 유리 */
.glass,
.input-card,
.form-card,
.search-card,
.summary-card,
.stat-card,
.policy-card,
.result-card,
.detail-card,
.info-card,
.panel-card,
.card,
.stat {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.48), rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.24)),
    rgba(255,255,255,0.20) !important;
  border: 1px solid rgba(255,255,255,0.68) !important;
  box-shadow:
    0 24px 66px rgba(45, 70, 135, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.82),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;
  backdrop-filter: blur(30px) saturate(190%) brightness(1.03) !important;
  -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.03) !important;
}

/* 입력 카드는 읽기 때문에 아주 살짝만 더 밝게 */
.glass.onboarding,
.onboarding.glass {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.54), rgba(255,255,255,0.20) 52%, rgba(255,255,255,0.28)),
    rgba(255,255,255,0.23) !important;
}

/* 입력 필드는 카드보다 살짝 또렷하지만 흰 박스처럼 보이지 않게 */
.input-box,
.input-field,
.field-button,
.date-trigger,
.select-trigger,
.custom-select-field .select-trigger,
.job-status-trigger {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.58), rgba(255,255,255,0.24)),
    rgba(255,255,255,0.20) !important;
  border: 1px solid rgba(255,255,255,0.66) !important;
  box-shadow:
    0 13px 32px rgba(43, 76, 145, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(255,255,255,0.16) !important;
}

/* 카드 위 반사 레이어도 흰 판처럼 꽉 차지 않게 낮춤 */
.glass::before,
.input-card::before,
.form-card::before,
.search-card::before,
.summary-card::before,
.policy-card::before,
.result-card::before,
.detail-card::before,
.card::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.02)),
    radial-gradient(circle at 12% 0%, rgba(255,255,255,0.28), transparent 30%) !important;
}

/* 유리 테두리 광택은 유지하되 과한 흰 막 제거 */
.glass::after,
.input-card::after,
.form-card::after,
.search-card::after,
.summary-card::after,
.policy-card::after,
.result-card::after,
.detail-card::after,
.card::after {
  opacity: 0.46 !important;
}

/* 정책 카드 hover 그림자는 유지하되 너무 흰 카드처럼 뜨지 않게 */
.policy-card:hover {
  box-shadow:
    0 28px 78px rgba(45, 70, 135, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset 0 -1px 0 rgba(255,255,255,0.22) !important;
}

/* 선택 칩은 흰색보다 유리 버튼 느낌 */
.interest-chip,
.benefit-chip,
.chip,
.tab {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.20)),
    rgba(255,255,255,0.18) !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
}

/* 결과 영역은 계속 투명 */
.results,
.results.show,
.policy-grid,
.result-grid,
.cards-grid {
  background: transparent !important;
}




/* Youth Pick recommend tab text final fix
   추천순만 흰색 글씨로 안 보이는 문제를 최종 보정합니다.
   다른 탭 색감은 유지하고, 추천순/활성 탭 텍스트만 확실히 보이게 합니다. */

/* 모든 탭 기본 글자는 어둡게 */
.tabs .tab {
  color: rgba(15, 23, 42, 0.78) !important;
  text-shadow: none !important;
}

/* 추천순은 active/disabled/aria 상태와 관계없이 글자 보이게 */
.tabs .tab[data-filter="matched"],
.tabs .tab[data-filter="recommend"],
.tabs .tab[data-filter="recommended"],
.tabs .tab:first-child {
  color: #1f2937 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.30)),
    rgba(255,255,255,0.24) !important;
  border: 1px solid rgba(255,255,255,0.66) !important;
  text-shadow: none !important;
}

/* 추천순이 활성 상태일 때도 흰 글씨 금지 */
.tabs .tab.active[data-filter="matched"],
.tabs .tab.active[data-filter="recommend"],
.tabs .tab.active[data-filter="recommended"],
.tabs .tab:first-child.active,
.tabs .tab:first-child[aria-selected="true"],
.tabs .tab:first-child.is-active {
  color: #1f2937 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.70), rgba(255,255,255,0.36)),
    rgba(255,255,255,0.30) !important;
  border: 1px solid rgba(255,255,255,0.74) !important;
  box-shadow:
    0 13px 30px rgba(48, 72, 135, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.84) !important;
  text-shadow: none !important;
}

/* 나라/도/시/군/저장함 active는 기존처럼 어두운 활성 버튼 유지 */
.tabs .tab.active:not([data-filter="matched"]):not([data-filter="recommend"]):not([data-filter="recommended"]):not(:first-child),
.tabs .tab[aria-selected="true"]:not([data-filter="matched"]):not([data-filter="recommend"]):not([data-filter="recommended"]):not(:first-child),
.tabs .tab.is-active:not([data-filter="matched"]):not([data-filter="recommend"]):not([data-filter="recommended"]):not(:first-child) {
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.94)) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18) !important;
}

/* disabled 속성이 붙어 있어도 추천순은 흐려지지 않게 */
.tabs .tab:disabled,
.tabs .tab[disabled] {
  opacity: 1 !important;
}

.tabs .tab:first-child:disabled,
.tabs .tab:first-child[disabled] {
  color: #1f2937 !important;
}


/* Youth Pick hide source chips final
   사용자 화면에서 API/공식정보/기본안내 같은 내부 출처 표시는 숨깁니다. */
.source-chip,
.api-chip,
.sample-chip,
.data-source-chip,
.provider-source-chip,
.policy-source,
.source-label,
.api-label {
  display: none !important;
}


/* Youth Pick user-only screen cleanup
   사용자에게 불필요한 출처/내부 설명 표시는 숨기고, 빈 뱃지가 남지 않도록 정리 */
.source-chip,
.api-chip,
.sample-chip,
.data-source-chip,
.provider-source-chip,
.policy-source,
.source-label,
.api-label,
.badge-empty,
.empty-chip {
  display: none !important;
}

.badge-row:empty,
.policy-meta:empty,
.detail-note:empty,
.guide-note:empty {
  display: none !important;
}