:root {
  --yunluo-navy: var(--navy, #081a2a);
  --yunluo-ink: var(--ink, #17232c);
  --yunluo-bronze: var(--gold, #b88942);
  --yunluo-ivory: var(--ivory, #f5efe5);
  --yunluo-line: var(--line, rgba(8, 26, 42, .16));
  --yunluo-white: #fff;
  --yunluo-danger: #9f2f2f;
  --yunluo-cookie-notice-height: 0px;
  --yunluo-cookie-notice-gap: 16px;
}

.yunluo-modal-open { overflow: hidden; }
.yunluo-hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.yunluo-button,
.yunluo-quiz button,
.yunluo-inquiry button {
  appearance: none;
  border: 1px solid var(--yunluo-navy);
  border-radius: 0;
  background: var(--yunluo-navy);
  color: var(--yunluo-white);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  line-height: 1.2;
  min-height: 46px;
  padding: 12px 22px;
}

.yunluo-button:hover,
.yunluo-button:focus-visible,
.yunluo-quiz button:hover,
.yunluo-quiz button:focus-visible { background: var(--navy-soft, #10283b); color: var(--yunluo-white); }
.yunluo-button:disabled { cursor: wait; opacity: .62; }
.yunluo-button--secondary { background: var(--yunluo-white) !important; color: var(--yunluo-navy) !important; }

.yunluo-switcher { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; font-size: .875rem; }
.yunluo-switcher ul { display: flex; flex-wrap: wrap; gap: 4px 12px; list-style: none; margin: 0; padding: 0; }
.yunluo-switcher a { color: inherit; text-decoration: none; }
.yunluo-switcher a:hover,
.yunluo-switcher a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.yunluo-switcher a.is-current { font-weight: 700; }
.yunluo-switcher__label { font-weight: 700; }

.yunluo-quiz__trigger {
  scroll-margin-block-end: calc(var(--yunluo-cookie-notice-height, 0px) + var(--yunluo-cookie-notice-gap, 16px));
}

body.yunluo-cookie-notice-visible .yunluo-quiz__trigger {
  bottom: var(--yunluo-quiz-trigger-lift, 0px);
  position: relative;
  z-index: 100001;
}

.yunluo-quiz__invite {
  align-items: center;
  background: var(--yunluo-white);
  border: 1px solid var(--yunluo-line);
  bottom: calc(var(--yunluo-cookie-notice-height, 0px) + var(--yunluo-cookie-notice-gap, 16px));
  box-shadow: 0 14px 45px rgba(10, 31, 65, .18);
  display: flex;
  gap: 12px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 14px;
  position: fixed;
  right: 22px;
  z-index: 100001;
}
.yunluo-quiz__invite[hidden] { display: none; }
.yunluo-quiz__invite > span { color: var(--yunluo-ink); font-weight: 650; }
.yunluo-quiz__invite button { min-height: 38px; padding: 8px 14px; }
.yunluo-quiz__invite .yunluo-quiz__invite-close { align-items: center; background: transparent; border: 0; color: var(--yunluo-ink); display: inline-flex; flex: 0 0 44px; font-size: 22px; justify-content: center; min-height: 44px; min-width: 44px; padding: 0; }

body.yunluo-quiz-invite-visible :is(.back-to-top, .scroll-to-top, .scroll-top, .to-top, #back-to-top) {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.yunluo-quiz__modal { inset: 0; position: fixed; z-index: 100010; }
.yunluo-quiz__modal[hidden] { display: none; }
.yunluo-quiz__backdrop { background: rgba(4, 13, 29, .66); inset: 0; position: absolute; }
.yunluo-quiz__panel {
  background: var(--yunluo-white);
  left: 50%;
  max-height: calc(100vh - 40px);
  max-width: 880px;
  overflow: auto;
  padding: clamp(24px, 5vw, 56px);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
}
.yunluo-quiz__panel h2 { color: var(--yunluo-navy); margin: 0 44px 20px 0; }
.yunluo-quiz__close { background: transparent !important; border: 0 !important; color: var(--yunluo-ink) !important; font-size: 30px !important; min-height: 44px !important; min-width: 44px !important; padding: 0 8px !important; position: absolute; right: 14px; top: 12px; }
.yunluo-quiz__progress { background: #e7e9ed; height: 3px; margin-bottom: 28px; overflow: hidden; }
.yunluo-quiz__progress span { background: var(--yunluo-bronze); display: block; height: 100%; transition: width .25s ease; }
.yunluo-quiz__step { border: 0; margin: 0; padding: 0; }
.yunluo-quiz__step[hidden] { display: none; }
.yunluo-quiz__step legend { color: var(--yunluo-ink); display: flex; flex-direction: column; font-size: clamp(1.2rem, 2.2vw, 1.65rem); font-weight: 650; gap: 6px; margin-bottom: 22px; width: 100%; }
.yunluo-quiz__step legend > span { color: #697386; font-size: .78rem; letter-spacing: .08em; }
.yunluo-quiz__options { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yunluo-quiz__options label { cursor: pointer; position: relative; }
.yunluo-quiz__options input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.yunluo-quiz__options label > span { align-items: center; border: 1px solid var(--yunluo-line); color: var(--yunluo-ink); display: flex; justify-content: center; min-height: 72px; padding: 14px; text-align: center; }
.yunluo-quiz__options input:checked + span { background: var(--yunluo-ivory); border-color: var(--yunluo-bronze); box-shadow: inset 0 0 0 1px var(--yunluo-bronze); }
.yunluo-quiz__options input:focus-visible + span { outline: 3px solid rgba(10, 31, 65, .3); outline-offset: 2px; }
.yunluo-quiz__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.yunluo-quiz__product-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yunluo-quiz__product a { color: inherit; text-decoration: none; }
.yunluo-quiz__product img { aspect-ratio: 1; display: block; height: auto; object-fit: cover; width: 100%; }
.yunluo-quiz__product h4 { font-size: 1rem; margin: 10px 0 4px; }
.yunluo-quiz__coupon { background: var(--yunluo-ivory); border-left: 3px solid var(--yunluo-bronze); font-weight: 700; margin: 24px 0 0; padding: 14px; }

.yunluo-field { display: flex; flex-direction: column; gap: 7px; margin: 16px 0; }
.yunluo-field > span { color: var(--yunluo-ink); font-weight: 650; }
.yunluo-field input,
.yunluo-field select,
.yunluo-field textarea {
  background: var(--yunluo-white);
  border: 1px solid #aeb4bf;
  border-radius: 0;
  box-sizing: border-box;
  color: var(--yunluo-ink);
  font: inherit;
  min-height: 46px;
  padding: 10px 12px;
  width: 100%;
}
.yunluo-field textarea { resize: vertical; }
.yunluo-field input:focus,
.yunluo-field select:focus,
.yunluo-field textarea:focus { border-color: var(--yunluo-navy); box-shadow: 0 0 0 2px rgba(10, 31, 65, .12); outline: 0; }
.yunluo-check { align-items: flex-start; display: flex; font-size: .88rem; gap: 8px; margin: 12px 0; }

.yunluo-inquiry { background: var(--yunluo-ivory); margin: 24px auto; max-width: 920px; padding: clamp(22px, 4vw, 48px); }
.yunluo-inquiry h2 { color: var(--yunluo-navy); margin-top: 0; }
.yunluo-form-grid { display: grid; gap: 0 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yunluo-form-response { color: var(--yunluo-danger); min-height: 1.5em; }
.yunluo-form-response.is-success,
.yunluo-notice--success { color: #24653c; }
.yunluo-notice--error { color: var(--yunluo-danger); }

.yunluo-addons { border: 1px solid var(--yunluo-line); margin: 18px 0; padding: 18px; }
.yunluo-addons legend { color: var(--yunluo-navy); font-weight: 700; padding: 0 7px; }
.yunluo-addon { align-items: flex-start; cursor: pointer; display: flex; gap: 10px; margin: 10px 0; }
.yunluo-addon input { margin-top: 4px; }
.yunluo-addon small,
.yunluo-addon__engraving small { color: #596273; font-weight: 400; }
.yunluo-addons__total { border-top: 1px solid var(--yunluo-line); font-weight: 700; margin: 14px 0 0; padding-top: 12px; }

@media (max-width: 720px) {
  .yunluo-quiz__invite { left: 12px; right: 12px; }
  .yunluo-quiz__panel { max-height: 100dvh; min-height: 100dvh; padding: 54px 20px 28px; width: 100%; }
  .yunluo-quiz__options { grid-template-columns: 1fr; }
  .yunluo-quiz__options label > span { min-height: 54px; }
  .yunluo-quiz__product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yunluo-form-grid { grid-template-columns: 1fr; }
  .yunluo-quiz__actions .yunluo-button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .yunluo-quiz__progress span { transition: none; }
}