/* ==========================================================================
   만월성 (Manwolseong) — Design System
   Palette: cream #F7F2EC / purple #6C5DD3 / ink #221C33 / gold #E9B949
   ========================================================================== */

:root {
  --mw-bg: #F7F2EC;
  --mw-bg-alt: #FFFCF8;
  --mw-border: #E6DCD0;
  --mw-border-soft: #F0E7DC;
  --mw-border-softer: #EEE6DB;

  --mw-purple: #6C5DD3;
  --mw-purple-dark: #5B49C9;
  --mw-purple-darker: #3C2E93;
  --mw-purple-tint: #EFEAFB;
  --mw-purple-tint2: #F2ECFB;

  --mw-ink: #221C33;
  --mw-ink-soft: #3A3054;
  --mw-text: #4B4266;
  --mw-text-soft: #5C5378;
  --mw-muted: #8A7FA6;
  --mw-muted2: #6B6182;
  --mw-muted3: #A79BC0;
  --mw-muted4: #A2789B;
  --mw-muted5: #B4A9C9;

  --mw-gold: #E9B949;
  --mw-gold-soft: #FFD98A;
  --mw-gold-deep: #E9A23B;

  --mw-green: #2E9C74;
  --mw-green-tint: #DEF5EC;
  --mw-mint: #57C79A;

  --mw-free: #C77B3A;
  --mw-free-tint: #FBE9D6;

  --mw-red: #E0605F;

  --mw-font-serif: 'Gowun Batang', serif;
  --mw-font-sans: 'IBM Plex Sans KR', sans-serif;

  --mw-shadow-sm: 0 8px 20px rgba(34,28,51,.05);
  --mw-shadow-md: 0 22px 55px rgba(34,28,51,.10);
  --mw-shadow-lg: 0 26px 60px rgba(34,28,51,.14);
  --mw-shadow-purple: 0 14px 30px rgba(108,93,211,.32);
}

[x-cloak] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--mw-bg); }
body { font-family: var(--mw-font-sans); color: var(--mw-ink); overflow-x: hidden; }
a { color: var(--mw-purple-dark); text-decoration: none; }
a:hover { color: var(--mw-purple-darker); }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

.mw-wrap { max-width: 1360px; margin: 0 auto; padding: 0 32px; }

@keyframes mwFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes mwFloatSlow { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-22px) rotate(3deg)} }
@keyframes mwUp { from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:translateY(0)} }
@keyframes mwMarquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes mwMarqueeRev { from{transform:translateX(-50%)} to{transform:translateX(0)} }
@keyframes mwTwinkle { 0%,100%{opacity:.25} 50%{opacity:1} }

/* ---------- Top utility bar ---------- */
.mw-topbar { background: var(--mw-ink); color: #CFC6E6; font-size: 13px; letter-spacing: -.2px; }
.mw-topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 9px 32px; }
.mw-topbar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mw-gold); display: inline-block; margin-right: 8px; }
.mw-topbar-right { display: flex; align-items: center; gap: 18px; }
.mw-topbar-right span { cursor: pointer; }
.mw-topbar-right span:hover { color: #fff; }
.mw-topbar-sep { width: 1px; height: 11px; background: #4A4064; }

/* ---------- Header ---------- */
.mw-header { position: sticky; top: 0; z-index: 60; background: rgba(247,242,236,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--mw-border); }
.mw-header-inner { height: 76px; display: flex; align-items: center; gap: 36px; }
.mw-brand { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.mw-brand-cn { font-family: var(--mw-font-serif); font-weight: 700; font-size: 23px; letter-spacing: 2px; line-height: 1; }
.mw-brand-en { font-size: 10px; letter-spacing: 3.5px; color: var(--mw-muted3); margin-top: 3px; }

.mw-nav { display: flex; align-items: center; gap: 28px; font-size: 15.5px; font-weight: 500; margin-left: 8px; }
.mw-nav a { color: var(--mw-ink); cursor: pointer; padding: 6px 0; border-bottom: 2px solid transparent; }
.mw-nav a:hover, .mw-nav a.is-active { color: var(--mw-purple); border-bottom-color: var(--mw-purple); }
.mw-nav .mw-free-badge { font-size: 10px; font-weight: 600; color: var(--mw-free); background: var(--mw-free-tint); border-radius: 20px; padding: 2px 7px; margin-left: 6px; }

.mw-header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mw-btn-outline { height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid #D9CEC1; background: #FFF; font-size: 14.5px; font-weight: 500; color: var(--mw-ink-soft); }
.mw-btn-outline:hover { border-color: var(--mw-purple); color: var(--mw-purple); }
.mw-btn-dark { height: 42px; padding: 0 18px; border-radius: 12px; border: none; background: var(--mw-ink); color: #FFF6E2; font-size: 14.5px; font-weight: 500; }
.mw-btn-dark:hover { background: var(--mw-ink-soft); }
.mw-burger { width: 42px; height: 42px; border-radius: 12px; border: 1px solid #D9CEC1; background: #FFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.mw-burger:hover { border-color: var(--mw-purple); }
.mw-burger span { width: 16px; height: 1.6px; background: #42395C; border-radius: 2px; }
.mw-burger span:last-child { width: 10px; align-self: flex-start; margin-left: 13px; }

/* ---------- Drawer ---------- */
.mw-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(34,28,51,.45); backdrop-filter: blur(3px); }
.mw-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 90vw; z-index: 100; background: var(--mw-bg-alt); box-shadow: -30px 0 70px rgba(34,28,51,.25); padding: 28px 30px; overflow-y: auto; animation: mwUp .28s ease both; }
.mw-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.mw-drawer-title { font-family: var(--mw-font-serif); font-size: 19px; letter-spacing: 1px; }
.mw-drawer-close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--mw-border); background: #FFF; font-size: 16px; color: var(--mw-muted2); }
.mw-drawer-quicklinks { display: flex; gap: 8px; margin-bottom: 18px; }
.mw-drawer-quicklinks a { flex: 1; height: 42px; border-radius: 12px; border: 1px solid var(--mw-border); background: #FBF8F4; color: var(--mw-ink-soft); font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.mw-drawer-auth { display: flex; gap: 10px; margin-bottom: 26px; }
.mw-drawer-auth button { flex: 1; height: 46px; border-radius: 12px; font-size: 14.5px; font-weight: 600; }
.mw-drawer-auth .mw-primary { border: none; background: var(--mw-purple); color: #fff; }
.mw-drawer-auth .mw-secondary { border: 1px solid #D9CEC1; background: #fff; color: var(--mw-ink-soft); }
.mw-drawer-group { margin-bottom: 22px; }
.mw-drawer-eng { font-size: 12px; font-weight: 600; letter-spacing: 2px; color: var(--mw-muted4); margin-bottom: 10px; }
.mw-drawer-group-title { font-family: var(--mw-font-serif); font-size: 17px; margin-bottom: 12px; }
.mw-drawer-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mw-drawer-chips span { font-size: 14px; padding: 9px 14px; border-radius: 10px; background: #F3EEE7; color: #4B4266; cursor: pointer; }
.mw-drawer-chips span:hover { background: #EAE3FA; color: var(--mw-purple-dark); }

/* ---------- Auth modal ---------- */
.mw-modal-overlay { position: fixed; inset: 0; z-index: 110; background: rgba(34,28,51,.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; }
.mw-modal { width: 420px; max-width: 90vw; background: var(--mw-bg-alt); border-radius: 24px; padding: 36px 34px; box-shadow: 0 40px 90px rgba(34,28,51,.35); animation: mwUp .25s ease both; }
.mw-modal-head { text-align: center; margin-bottom: 26px; }
.mw-modal-title { font-family: var(--mw-font-serif); font-size: 22px; }
.mw-modal-sub { font-size: 13.5px; color: var(--mw-muted); margin-top: 7px; }
.mw-modal input { height: 50px; width: 100%; border-radius: 13px; border: 1px solid #E0D6C9; background: #fff; padding: 0 16px; font-family: inherit; font-size: 15px; outline: none; margin-bottom: 10px; }
.mw-modal-submit { height: 52px; width: 100%; border-radius: 13px; border: none; background: var(--mw-ink); color: #FFF6E2; font-size: 15.5px; font-weight: 600; margin-top: 6px; }
.mw-modal-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; }
.mw-modal-divider .line { flex: 1; height: 1px; background: var(--mw-border); }
.mw-modal-divider span:not(.line) { font-size: 12px; color: var(--mw-muted3); }
.mw-modal-social { display: flex; gap: 10px; }
.mw-modal-social button { flex: 1; height: 48px; border-radius: 13px; border: none; font-size: 14.5px; font-weight: 600; }
.mw-modal-social button:disabled { opacity: .5; cursor: not-allowed; }
.mw-social-kakao { background: #FEE500; color: #3B2E1E; }
.mw-social-naver { background: #03C75A; color: #fff; }
.mw-social-apple { background: #fff; border: 1px solid #E0D6C9 !important; color: var(--mw-ink-soft); }

/* ---------- Hero ---------- */
.mw-hero { position: relative; overflow: hidden; background: linear-gradient(175deg,#F7F2EC 0%,#F2ECFB 46%,#FBEFE6 100%); }
.mw-hero-inner { position: relative; padding: 78px 32px 96px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.mw-hero-badge { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #E4DAFB; border-radius: 100px; padding: 8px 16px; font-size: 13.5px; color: var(--mw-purple-dark); font-weight: 500; margin-bottom: 26px; }
.mw-hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mw-mint); }
.mw-hero h1 { font-family: var(--mw-font-serif); font-size: 64px; line-height: 1.24; letter-spacing: -1.5px; margin: 0 0 22px; font-weight: 700; }
.mw-hero-hl { position: relative; display: inline-block; }
.mw-hero-hl .front { position: relative; z-index: 2; }
.mw-hero-hl .mark { position: absolute; left: -4px; right: -4px; bottom: 6px; height: 16px; background: #FFE1A8; border-radius: 4px; z-index: 1; }
.mw-hero p { font-size: 18px; line-height: 1.75; color: var(--mw-text-soft); margin: 0 0 34px; max-width: 520px; }
.mw-hero-actions { display: flex; gap: 12px; margin-bottom: 38px; }
.mw-btn-primary { height: 58px; padding: 0 30px; border-radius: 15px; border: none; background: var(--mw-purple); color: #fff; font-size: 16.5px; font-weight: 600; box-shadow: var(--mw-shadow-purple); }
.mw-btn-primary:hover { background: var(--mw-purple-dark); }
.mw-btn-ghost { height: 58px; padding: 0 26px; border-radius: 15px; border: 1px solid #D6C9BA; background: rgba(255,255,255,.7); color: #3E3559; font-size: 16.5px; font-weight: 500; }
.mw-btn-ghost:hover { background: #fff; }
.mw-hero-stats { display: flex; gap: 34px; }
.mw-hero-stats .num { font-family: var(--mw-font-serif); font-size: 27px; font-weight: 700; color: #332B4D; }
.mw-hero-stats .label { font-size: 13.5px; color: var(--mw-muted); margin-top: 4px; }

.mw-hero-visual { position: relative; height: 520px; }
.mw-hero-orb { position: absolute; top: 34px; left: 56px; width: 330px; height: 330px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, #F6EEFF 38%, #CDBDF7 100%); box-shadow: 0 40px 80px rgba(108,93,211,.28), inset -18px -22px 50px rgba(108,93,211,.18); animation: mwFloatSlow 9s ease-in-out infinite; }
.mw-today-card { position: absolute; top: 0; right: 0; width: 296px; background: #fff; border-radius: 22px; padding: 22px; box-shadow: var(--mw-shadow-lg); animation: mwFloat 7s ease-in-out infinite; }
.mw-today-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mw-today-tag { font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; color: var(--mw-muted4); }
.mw-today-trend { font-size: 11.5px; font-weight: 600; color: var(--mw-green); background: var(--mw-green-tint); padding: 4px 9px; border-radius: 20px; }
.mw-today-quote { font-family: var(--mw-font-serif); font-size: 20px; line-height: 1.5; margin-bottom: 18px; }
.mw-today-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.mw-today-bar-row .name { width: 32px; font-size: 13px; color: var(--mw-muted2); }
.mw-today-bar-track { flex: 1; height: 7px; border-radius: 6px; background: #F0EBF9; overflow: hidden; display: block; }
.mw-today-bar-fill { display: block; height: 100%; border-radius: 6px; }
.mw-today-bar-row .score { font-size: 12.5px; font-weight: 600; color: #4B4266; width: 30px; text-align: right; }

.mw-luckday-card { position: absolute; bottom: 26px; left: 0; width: 262px; background: var(--mw-ink); border-radius: 20px; padding: 20px 22px; color: #EDE7FA; box-shadow: 0 26px 60px rgba(34,28,51,.28); animation: mwFloat 8.5s ease-in-out .8s infinite; }
.mw-luckday-card .tag { font-size: 12px; letter-spacing: 2px; color: #9C8FC4; margin-bottom: 10px; }
.mw-luckday-card .date { font-family: var(--mw-font-serif); font-size: 38px; font-weight: 700; color: var(--mw-gold-soft); }
.mw-luckday-card .desc { font-size: 13.5px; color: #B7ACD4; margin-top: 8px; line-height: 1.6; }

/* ---------- Today fortune bar ---------- */
.mw-today-bar { margin: -46px auto 0; padding: 0 32px; position: relative; z-index: 10; max-width: 1360px; }
.mw-today-bar-card { background: #fff; border-radius: 24px; box-shadow: var(--mw-shadow-md); border: 1px solid var(--mw-border-soft); padding: 26px 30px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.mw-today-bar-icon { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(140deg,#FFE9C7,#FFC978); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mw-today-bar-left { display: flex; align-items: center; gap: 16px; padding-right: 26px; border-right: 1px solid var(--mw-border-soft); }
.mw-today-bar-left .t { font-family: var(--mw-font-serif); font-size: 20px; }
.mw-today-bar-left .s { font-size: 13px; color: var(--mw-muted); margin-top: 3px; }
.mw-dob-fields { display: flex; align-items: center; gap: 9px; flex: 1; flex-wrap: wrap; }
.mw-dob-field { flex: 1; min-width: 90px; }
.mw-dob-field .label { font-size: 11.5px; color: var(--mw-muted3); margin-bottom: 6px; letter-spacing: .5px; }
.mw-dob-field .value { height: 46px; border-radius: 12px; border: 1px solid var(--mw-border); background: #FBF8F4; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 15px; color: #4B4266; }
.mw-dob-field .value:hover { border-color: var(--mw-purple); }
.mw-cal-toggle { display: flex; gap: 6px; padding-top: 24px; }
.mw-cal-toggle span { height: 46px; display: flex; align-items: center; padding: 0 15px; border-radius: 12px; font-size: 14px; cursor: pointer; }
.mw-cal-toggle .active { background: var(--mw-purple-tint); color: var(--mw-purple-dark); font-weight: 600; }
.mw-cal-toggle .inactive { background: #FBF8F4; border: 1px solid var(--mw-border); color: var(--mw-muted); }
.mw-today-bar-cta { height: 70px; padding: 0 34px; border-radius: 16px; border: none; background: var(--mw-ink); color: #FFF6E2; font-size: 16px; font-weight: 600; white-space: nowrap; }
.mw-today-bar-cta:hover { background: var(--mw-ink-soft); }

/* ---------- Section heading ---------- */
.mw-section { max-width: 1360px; margin: 0 auto; padding: 88px 32px 0; }
.mw-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 30px; flex-wrap: wrap; gap: 12px; }
.mw-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 3px; color: var(--mw-muted4); margin-bottom: 12px; }
.mw-section-head h2 { font-family: var(--mw-font-serif); font-size: 38px; margin: 0; font-weight: 700; letter-spacing: -.8px; }
.mw-section-link { font-size: 14.5px; color: var(--mw-muted2); cursor: pointer; }
.mw-section-link:hover { color: var(--mw-purple); }

/* ---------- Category grid ---------- */
.mw-cat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.mw-cat-card { border-radius: 20px; padding: 24px; border: 1px solid rgba(34,28,51,.05); cursor: pointer; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.mw-cat-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(34,28,51,.10); }
.mw-cat-glyph { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.75); display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 21px; color: #3E3559; margin-bottom: 44px; }
.mw-cat-name { font-size: 17.5px; font-weight: 600; letter-spacing: -.3px; }
.mw-cat-desc { font-size: 13.5px; color: var(--mw-muted2); margin-top: 6px; }
.mw-cat-count { font-size: 12.5px; color: var(--mw-muted); margin-top: 14px; }

/* ---------- Product tabs / grid ---------- */
.mw-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.mw-tab { padding: 10px 18px; border-radius: 11px; font-size: 14.5px; font-weight: 500; cursor: pointer; background: #fff; color: var(--mw-muted2); border: 1px solid var(--mw-border); }
.mw-tab.is-active { background: var(--mw-purple-tint); color: var(--mw-purple-dark); border-color: #DCD3FB; }

.mw-product-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.mw-product-card { background: #fff; border-radius: 20px; border: 1px solid var(--mw-border-soft); overflow: hidden; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.mw-product-card:hover { transform: translateY(-6px); box-shadow: 0 24px 46px rgba(34,28,51,.12); }
.mw-product-thumb { height: 186px; position: relative; display: flex; align-items: center; justify-content: center; }
.mw-product-glyph { width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 30px; color: #3E3559; }
.mw-product-badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; }
.mw-product-badges span { font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px; }
.mw-product-body { padding: 18px 18px 20px; }
.mw-product-cat { font-size: 12.5px; color: var(--mw-muted4); font-weight: 500; margin-bottom: 8px; }
.mw-product-name { font-size: 16.5px; font-weight: 600; line-height: 1.45; letter-spacing: -.3px; margin-bottom: 12px; min-height: 48px; }
.mw-product-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 12.5px; }
.mw-product-rating .stars { color: var(--mw-gold-deep); }
.mw-product-rating .count { color: var(--mw-muted5); }
.mw-product-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.mw-product-off { font-size: 14.5px; font-weight: 700; color: var(--mw-red); white-space: nowrap; }
.mw-product-now { font-size: 19px; font-weight: 700; letter-spacing: -.5px; white-space: nowrap; }
.mw-product-was { font-size: 13px; color: var(--mw-muted5); text-decoration: line-through; white-space: nowrap; }

/* ---------- Tarot band ---------- */
.mw-tarot-band { margin-top: 96px; background: var(--mw-ink); position: relative; overflow: hidden; }
.mw-tarot-inner { position: relative; max-width: 1360px; margin: 0 auto; padding: 88px 32px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.mw-tarot-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 3px; color: #C7A7E0; margin-bottom: 14px; }
.mw-tarot-inner h2 { font-family: var(--mw-font-serif); font-size: 42px; line-height: 1.35; margin: 0 0 20px; color: #FFF6E2; font-weight: 700; letter-spacing: -1px; }
.mw-tarot-inner p { font-size: 16.5px; line-height: 1.8; color: #B7ACD4; margin: 0 0 30px; max-width: 400px; }
.mw-btn-tarot { height: 54px; padding: 0 28px; border-radius: 14px; border: 1px solid var(--mw-purple); background: var(--mw-purple); color: #fff; font-size: 16px; font-weight: 600; }
.mw-btn-tarot:hover { background: #7E70E0; }
.mw-tarot-cards { display: flex; gap: 18px; justify-content: flex-end; flex-wrap: wrap; }
.mw-tarot-card { width: 186px; height: 282px; border-radius: 18px; border: 1px solid rgba(255,255,255,.16); cursor: pointer; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .35s ease; background: linear-gradient(165deg,#3A3054,#2A2340); }
.mw-tarot-card:hover { transform: translateY(-14px); }
.mw-tarot-card.is-flipped { background: linear-gradient(165deg,#FFF6E2,#EADFFB); }
.mw-tarot-card .no { font-size: 11.5px; letter-spacing: 2.5px; color: #8E80BF; }
.mw-tarot-card.is-flipped .no { color: #7C6FA8; }
.mw-tarot-card .mid { text-align: center; }
.mw-tarot-card .title { font-family: var(--mw-font-serif); font-size: 22px; color: var(--mw-gold-soft); line-height: 1.4; }
.mw-tarot-card.is-flipped .title { font-size: 26px; color: #3A2F63; }
.mw-tarot-card .sub { font-size: 13px; color: #8E80BF; margin-top: 10px; line-height: 1.6; }
.mw-tarot-card.is-flipped .sub { color: #7C6FA8; }
.mw-tarot-card .no-bottom { text-align: right; }

/* ---------- Live feed marquee ---------- */
.mw-feed-section { padding: 70px 0 0; overflow: hidden; }
.mw-feed-head { max-width: 1360px; margin: 0 auto 26px; padding: 0 32px; display: flex; align-items: center; gap: 12px; }
.mw-feed-head .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--mw-red); animation: mwTwinkle 1.6s ease-in-out infinite; }
.mw-feed-head h2 { font-family: var(--mw-font-serif); font-size: 24px; margin: 0; }
.mw-feed-head span.sub { font-size: 14px; color: var(--mw-muted); }
.mw-feed-row { display: flex; gap: 14px; width: max-content; padding: 0 0 14px; }
.mw-feed-row.rev { animation: mwMarqueeRev 52s linear infinite; }
.mw-feed-row:not(.rev) { animation: mwMarquee 44s linear infinite; }
.mw-feed-item { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 16px; padding: 12px 18px 12px 12px; box-shadow: var(--mw-shadow-sm); }
.mw-feed-icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 18px; color: #fff; }
.mw-feed-name { font-size: 14.5px; font-weight: 500; letter-spacing: -.2px; }
.mw-feed-meta { font-size: 12.5px; color: var(--mw-muted); margin-top: 3px; }

/* ---------- Trust / reviews ---------- */
.mw-trust-box { background: linear-gradient(160deg,#FFFCF8 0%,#F4EFFB 100%); border: 1px solid var(--mw-border-softer); border-radius: 28px; padding: 52px 48px; }
.mw-trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; padding-bottom: 44px; border-bottom: 1px solid #E9E1D6; }
.mw-trust-grid .num { font-family: var(--mw-font-serif); font-size: 40px; font-weight: 700; color: #4B3F7A; letter-spacing: -1px; }
.mw-trust-grid .label { font-size: 15px; color: var(--mw-text-soft); margin-top: 8px; }
.mw-review-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 40px 0 24px; flex-wrap: wrap; gap: 10px; }
.mw-review-head h2 { font-family: var(--mw-font-serif); font-size: 32px; margin: 0; font-weight: 700; }
.mw-review-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.mw-review-card { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; padding: 26px 24px; }
.mw-review-stars { font-size: 13px; color: var(--mw-gold-deep); margin-bottom: 14px; }
.mw-review-text { font-size: 15.5px; line-height: 1.8; color: #3E3559; margin-bottom: 20px; }
.mw-review-who { display: flex; align-items: center; gap: 11px; padding-top: 16px; border-top: 1px solid #F3EDE5; }
.mw-review-avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.mw-review-name { font-size: 13.5px; font-weight: 500; }
.mw-review-product { font-size: 12.5px; color: var(--mw-muted); margin-top: 2px; }

/* ---------- CTA band ---------- */
.mw-cta { background: var(--mw-purple); border-radius: 28px; padding: 64px 56px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.mw-cta h2 { font-family: var(--mw-font-serif); font-size: 40px; line-height: 1.4; margin: 0 0 16px; color: #fff; font-weight: 700; letter-spacing: -1px; }
.mw-cta p { font-size: 17px; color: #E4DEFB; margin: 0; line-height: 1.7; }
.mw-cta-btn { position: relative; height: 62px; padding: 0 38px; border-radius: 16px; border: none; background: #FFF6E2; color: #3A2F63; font-size: 17px; font-weight: 600; white-space: nowrap; }
.mw-cta-btn:hover { background: #fff; }

/* ---------- Footer ---------- */
.mw-footer { background: var(--mw-bg-alt); border-top: 1px solid var(--mw-border-softer); color: var(--mw-ink); }
.mw-footer-grid { padding: 56px 32px 40px; display: grid; grid-template-columns: 1.3fr repeat(3,1fr); gap: 40px; }
.mw-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.mw-footer-brand span { font-family: var(--mw-font-serif); font-size: 19px; letter-spacing: 2px; color: var(--mw-ink); }
.mw-footer-info { font-size: 13.5px; line-height: 2; color: var(--mw-muted); }
.mw-footer-col-title { font-size: 14.5px; font-weight: 600; margin-bottom: 16px; color: var(--mw-ink); }
.mw-footer-links { display: flex; flex-direction: column; gap: 11px; }
.mw-footer-links a { font-size: 13.5px; color: var(--mw-muted2); cursor: pointer; }
.mw-footer-links a:hover { color: var(--mw-purple); }
.mw-footer-bottom { max-width: 1360px; margin: 0 auto; padding: 22px 32px 40px; border-top: 1px solid #F1EAE0; font-size: 12.5px; color: var(--mw-muted3); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .mw-hero-inner { grid-template-columns: 1fr; }
  .mw-hero-visual { display: none; }
  .mw-cat-grid, .mw-product-grid { grid-template-columns: repeat(2,1fr); }
  .mw-trust-grid, .mw-review-grid { grid-template-columns: repeat(2,1fr); }
  .mw-tarot-inner { grid-template-columns: 1fr; }
  .mw-tarot-cards { justify-content: flex-start; }
  .mw-footer-grid { grid-template-columns: 1fr 1fr; }
}
/* 640px 미만(폰)에서만 통하던 헤더 줄바꿈 대응을, 폰과 데스크톱 사이(태블릿·
   좁은 창)에서도 그대로 적용 — 이 구간에서 메뉴 글자가 한 글자씩 세로로
   쪼개지던 버그의 원인이었습니다. */
@media (max-width: 1024px) {
  .mw-header-inner { min-height: 58px; height: auto; gap: 10px; flex-wrap: wrap; padding-top: 8px; }
  .mw-nav { margin-left: 0; gap: 16px; overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; order: 3; flex-basis: 100%; padding-bottom: 11px; }
  .mw-nav::-webkit-scrollbar { display: none; }
  .mw-header-actions .mw-btn-outline { display: none; }

  .mw-topbar-inner { gap: 12px; }
  .mw-topbar-inner > a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mw-topbar-right { flex-shrink: 0; gap: 8px; font-size: 12px; }
  .mw-topbar-right a, .mw-topbar-right span { white-space: nowrap; }
}
@media (max-width: 640px) {
  /* height:58px였던 게 줄바꿈된 네비 줄을 밀어내지 않고 그냥 잘라내서
     아래 히어로 영역과 겹치는 버그의 원인이었습니다 — min-height로 수정 */
  .mw-header-inner { min-height: 58px; height: auto; gap: 10px; flex-wrap: wrap; padding-top: 8px; }
  .mw-brand-cn { font-size: 18px; }
  .mw-brand-en { font-size: 7.5px; }
  /* 원본 모바일 디자인: 네비를 숨기지 않고 가로 스크롤 탭으로 전환 */
  .mw-nav { margin-left: 0; gap: 16px; overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; order: 3; flex-basis: 100%; padding-bottom: 11px; }
  .mw-nav::-webkit-scrollbar { display: none; }
  .mw-header-actions .mw-btn-outline { display: none; }
  /* 폰 폭에서는 로고 + 햄버거 두 개만 한 줄에 남기고, 검색·결과조회는
     드로어 메뉴 안(빠른 메뉴)으로 옮겨서 헤더가 두 줄로 안 쪼개지게 합니다. */
  .mw-header-actions .mw-header-search, .mw-header-actions .mw-btn-dark { display: none; }
  .mw-header-actions { gap: 8px; }
  .mw-hero h1 { font-size: 34px; }
  .mw-hero p { font-size: 14.5px; }
  .mw-hero-actions { flex-direction: column; }
  .mw-hero-actions button { width: 100%; height: 54px; }
  .mw-hero-stats { gap: 22px; }
  .mw-hero-stats .num { font-size: 20px; }
  .mw-cat-grid, .mw-product-grid, .mw-trust-grid, .mw-review-grid { grid-template-columns: 1fr; }
  .mw-today-bar-card { flex-direction: column; align-items: stretch; }
  .mw-today-bar-left { border-right: none; padding-right: 0; border-bottom: 1px solid var(--mw-border-soft); padding-bottom: 16px; }
  .mw-section { padding-left: 18px; padding-right: 18px; }
  .mw-wrap { padding-left: 18px; padding-right: 18px; }

  /* 로그인/회원가입 모달 → 하단 시트 방식 */
  .mw-modal-overlay { align-items: flex-end; }
  .mw-modal { width: 100%; border-radius: 26px 26px 0 0; animation: mwSheetUp .28s ease both; }
  .mw-modal::before { content: ''; display: block; width: 42px; height: 4px; border-radius: 4px; background: #E2D8CB; margin: 0 auto 20px; }
}
@keyframes mwSheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* ==========================================================================
   Inner-page shared bits (breadcrumb / page hero / simple footer)
   ========================================================================== */
.mw-crumb { font-size: 13px; color: var(--mw-muted); padding: 18px 32px 0; max-width: 1360px; margin: 0 auto; }
.mw-crumb .current { color: var(--mw-text); }

.mw-page-hero { background: linear-gradient(170deg,#F2ECFB 0%,#F7F2EC 100%); border-bottom: 1px solid var(--mw-border-softer); }
.mw-page-hero-inner { max-width: 1360px; margin: 0 auto; padding: 38px 32px 30px; }
.mw-page-hero h1 { font-family: var(--mw-font-serif); font-size: 40px; margin: 0 0 10px; font-weight: 700; letter-spacing: -1px; }
.mw-page-hero p { font-size: 16px; color: var(--mw-text-soft); margin: 0 0 22px; }

.mw-quick-cats { display: flex; gap: 9px; flex-wrap: wrap; }
.mw-quick-cat { height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 12px; font-size: 14.5px; font-weight: 500; cursor: pointer; background: #fff; color: var(--mw-text); border: 1px solid var(--mw-border); }
.mw-quick-cat .g { font-family: var(--mw-font-serif); font-size: 15px; }
.mw-quick-cat.is-active { background: var(--mw-ink); color: #FFF6E2; border-color: var(--mw-ink); }

.mw-products-layout { max-width: 1360px; margin: 0 auto; padding: 30px 32px 90px; display: grid; grid-template-columns: 250px 1fr; gap: 34px; align-items: start; }
.mw-filter-aside { position: sticky; top: 24px; background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 22px; padding: 24px 22px; }
.mw-filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mw-filter-head .t { font-family: var(--mw-font-serif); font-size: 19px; }
.mw-filter-head .reset { font-size: 13px; color: var(--mw-purple); cursor: pointer; }
.mw-filter-group { margin-bottom: 24px; }
.mw-filter-group-title { font-size: 13.5px; font-weight: 600; color: var(--mw-ink-soft); margin-bottom: 12px; }
.mw-filter-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--mw-text-soft); cursor: pointer; margin-bottom: 10px; }
.mw-filter-mark { width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--mw-border); background: #fff; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
.mw-filter-item.is-checked .mw-filter-mark { background: var(--mw-purple); border-color: var(--mw-purple); }
.mw-filter-count { margin-left: auto; font-size: 12.5px; color: var(--mw-muted5); }

.mw-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.mw-toolbar-total { font-size: 14.5px; color: var(--mw-text-soft); }
.mw-toolbar-total b { font-weight: 600; color: var(--mw-ink); }
.mw-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.mw-chip { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; background: var(--mw-purple-tint); color: var(--mw-purple-dark); font-size: 13px; cursor: pointer; }
.mw-chip .x { font-size: 11px; color: #8B7BEA; }
.mw-sorts { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; }
.mw-sort { height: 38px; display: flex; align-items: center; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500; cursor: pointer; background: #fff; color: var(--mw-muted2); border: 1px solid var(--mw-border); }
.mw-sort.is-active { background: var(--mw-purple-tint); color: var(--mw-purple-dark); border-color: #DCD3FB; }

.mw-products-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.mw-pcard { background: #fff; border-radius: 20px; border: 1px solid var(--mw-border-soft); overflow: hidden; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; color: inherit; display: block; }
.mw-pcard:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(34,28,51,.12); }
.mw-pcard-thumb { height: 164px; position: relative; display: flex; align-items: center; justify-content: center; }
.mw-pcard-glyph { width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 26px; color: #3E3559; }
.mw-pcard-badge { position: absolute; top: 13px; left: 13px; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px; }
.mw-pcard-body { padding: 18px; }
.mw-pcard-meta { font-size: 12.5px; color: var(--mw-muted4); margin-bottom: 8px; }
.mw-pcard-name { font-size: 16px; font-weight: 600; line-height: 1.45; letter-spacing: -.3px; margin-bottom: 11px; min-height: 46px; }
.mw-pcard-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 12.5px; }
.mw-pcard-rating .star { color: var(--mw-gold-deep); font-size: 12px; }
.mw-pcard-rating .count { color: var(--mw-muted5); }
.mw-pcard-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mw-pcard-off { font-size: 14px; font-weight: 700; color: var(--mw-red); white-space: nowrap; }
.mw-pcard-now { font-size: 18px; font-weight: 700; letter-spacing: -.4px; white-space: nowrap; }
.mw-pcard-was { font-size: 12.5px; color: var(--mw-muted5); text-decoration: line-through; white-space: nowrap; }

.mw-loadmore-bar { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 36px; }
.mw-progress-track { width: 100%; height: 6px; border-radius: 6px; background: #EAE3D9; overflow: hidden; }
.mw-progress-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg,#8B7BEA,#6C5DD3); }
.mw-loadmore-count { font-size: 13.5px; color: var(--mw-muted); }
.mw-loadmore-btn { height: 54px; padding: 0 40px; border-radius: 14px; border: 1px solid #D9CEC1; background: #fff; font-size: 15.5px; font-weight: 500; color: var(--mw-ink-soft); }
.mw-loadmore-btn:hover { border-color: var(--mw-purple); color: var(--mw-purple); }

.mw-simple-footer { background: var(--mw-bg-alt); border-top: 1px solid var(--mw-border-softer); padding: 34px 32px 44px; }
.mw-simple-footer-inner { max-width: 1360px; margin: 0 auto; font-size: 12.5px; color: var(--mw-muted3); line-height: 1.9; }

@media (max-width: 1000px) {
  .mw-products-layout { grid-template-columns: 1fr; }
  .mw-filter-aside { position: static; }
  .mw-products-grid3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .mw-products-grid3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Product detail page
   ========================================================================== */
@keyframes mwUpD { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }

.mw-pd-layout { max-width: 1360px; margin: 0 auto; padding: 22px 32px 0; display: grid; grid-template-columns: 1fr 396px; gap: 44px; align-items: start; }
.mw-pd-hero { height: 400px; border-radius: 24px; background: linear-gradient(150deg,#E9E1FB 0%,#CDBDF7 55%,#FFE1B8 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; animation: mwUpD .6s ease both; }
.mw-pd-hero-text { position: relative; text-align: center; }
.mw-pd-hero-tag { font-family: var(--mw-font-serif); font-size: 16px; letter-spacing: 6px; color: #6B5CA8; margin-bottom: 14px; }
.mw-pd-hero-title { font-family: var(--mw-font-serif); font-size: 52px; font-weight: 700; color: #3A2F63; letter-spacing: -1px; }
.mw-pd-hero-sub { font-size: 15px; color: #5F5487; margin-top: 14px; }
.mw-pd-gallery { display: flex; gap: 10px; margin-bottom: 34px; }
.mw-pd-gallery-item { width: 96px; height: 72px; border-radius: 12px; border: 2px solid; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 16px; color: #3E3559; cursor: pointer; }

.mw-pd-tabs { position: sticky; top: 0; z-index: 20; background: var(--mw-bg); border-bottom: 1px solid var(--mw-border); display: flex; gap: 30px; padding: 14px 0; margin-bottom: 36px; }
.mw-pd-tabs span { font-size: 15.5px; font-weight: 500; cursor: pointer; padding-bottom: 10px; border-bottom: 2px solid transparent; color: var(--mw-text); }
.mw-pd-tabs span.is-active { color: var(--mw-purple); border-bottom-color: var(--mw-purple); }

.mw-pd-block { margin-bottom: 44px; }
.mw-pd-block h2 { font-family: var(--mw-font-serif); font-size: 32px; margin: 0 0 18px; font-weight: 700; letter-spacing: -.6px; }
.mw-pd-block h2.sm { font-size: 28px; margin-bottom: 20px; }
.mw-pd-lead { font-size: 16.5px; line-height: 1.9; color: var(--mw-text-soft); margin: 0 0 26px; max-width: 640px; }

.mw-pd-highlights { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.mw-pd-hl-card { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 18px; padding: 24px 22px; }
.mw-pd-hl-icon { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 18px; color: #fff; margin-bottom: 16px; }
.mw-pd-hl-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.mw-pd-hl-desc { font-size: 14px; line-height: 1.75; color: var(--mw-muted2); }

.mw-pd-toc { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; overflow: hidden; }
.mw-pd-toc-row { display: flex; align-items: center; gap: 20px; padding: 19px 24px; border-bottom: 1px solid #F5EFE7; }
.mw-pd-toc-row:last-child { border-bottom: none; }
.mw-pd-toc-no { font-family: var(--mw-font-serif); font-size: 15px; color: var(--mw-muted3); width: 28px; }
.mw-pd-toc-title { font-size: 16px; font-weight: 500; flex: 1; }
.mw-pd-toc-pages { font-size: 13.5px; color: var(--mw-muted); }

/* 감수 선생님 소개 */
.mw-pd-teacher { background: linear-gradient(160deg,#FFFCF8,#F4EFFB); border: 1px solid var(--mw-border-softer); border-radius: 20px; padding: 26px 28px; display: flex; align-items: center; gap: 20px; margin-bottom: 44px; }
.mw-pd-teacher-avatar { width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 26px; color: #fff; box-shadow: 0 10px 24px rgba(34,28,51,.15); object-fit: cover; }
.mw-pd-teacher-name { font-family: var(--mw-font-serif); font-size: 18px; font-weight: 700; }
.mw-pd-teacher-title { font-size: 12.5px; color: var(--mw-muted4); margin-top: 3px; margin-bottom: 10px; }
.mw-pd-teacher-intro { font-size: 14px; line-height: 1.75; color: var(--mw-text-soft); }

/* 그룹형 상품 구성 (선택 사주처럼 카테고리별로 묶여있는 상품용) */
.mw-pd-comp { display: flex; flex-direction: column; gap: 10px; }
.mw-pd-comp-group { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 18px; overflow: hidden; }
.mw-pd-comp-head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; background: #FBF8F4; border-bottom: 1px solid #F1EAE0; cursor: pointer; }
.mw-pd-comp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mw-purple); flex-shrink: 0; }
.mw-pd-comp-title { font-size: 15.5px; font-weight: 600; flex: 1; }
.mw-pd-comp-count { font-size: 12.5px; color: var(--mw-muted); }
.mw-pd-comp-chev { font-size: 11px; color: var(--mw-muted3); }
.mw-pd-comp-items { padding: 6px 22px 14px 39px; display: flex; flex-direction: column; gap: 3px; }
.mw-pd-comp-item { font-size: 14.5px; color: var(--mw-text-soft); padding: 7px 0; }
.mw-pd-comp-item::before { content: '·'; margin-right: 8px; color: var(--mw-muted3); }

.mw-pd-sample { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--mw-border-soft); background: var(--mw-bg-alt); }
.mw-pd-sample-inner { padding: 34px 36px; }
.mw-pd-sample-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }

/* 궁합 샘플 (두 사람 비교) */
.mw-pd-compat-people { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 22px; }
.mw-pd-compat-person { text-align: center; }
.mw-pd-compat-person .mw-pd-sample-avatar { margin: 0 auto 10px; }
.mw-pd-compat-label { font-size: 13px; color: var(--mw-muted4); margin-bottom: 6px; }
.mw-pd-compat-chars { font-family: var(--mw-font-serif); font-size: 17px; color: var(--mw-ink); }
.mw-pd-compat-vs { font-size: 20px; color: var(--mw-muted3); }
.mw-pd-compat-relations { background: #FBF8F4; border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.mw-pd-compat-rel-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; }
.mw-pd-compat-rel-row .k { color: var(--mw-muted); }
.mw-pd-compat-rel-row .v { color: var(--mw-ink-soft); font-weight: 500; }
.mw-pd-sample-avatar { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(140deg,#8B7BEA,#6C5DD3); }
.mw-pd-sample-meta { font-size: 14px; color: var(--mw-muted); }
.mw-pd-sample-chars { font-family: var(--mw-font-serif); font-size: 20px; margin-top: 3px; }
.mw-pd-pillars { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 24px; }
.mw-pd-pillar { border-radius: 14px; padding: 18px 16px; text-align: center; background: #F0ECF9; }
.mw-pd-pillar .lbl { font-size: 12px; color: #7C6FA8; margin-bottom: 8px; }
.mw-pd-pillar .chr { font-family: var(--mw-font-serif); font-size: 30px; font-weight: 700; color: #3A2F63; }
.mw-pd-sample-text { font-size: 16px; line-height: 1.95; color: var(--mw-text); }
.mw-pd-sample-section { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--mw-border-soft); }
.mw-pd-sample-section-title { font-family: var(--mw-font-serif); font-size: 16px; font-weight: 700; color: var(--mw-ink); margin-bottom: 8px; }
.mw-pd-sample-locked { display: flex; align-items: flex-start; gap: 6px; margin-top: 22px; font-size: 12.5px; font-weight: 600; color: var(--mw-muted); line-height: 1.6; }
.mw-pd-sample-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; background: linear-gradient(180deg, rgba(255,252,248,0), #FFFCF8 62%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 28px; }
.mw-pd-sample-btn { height: 52px; padding: 0 30px; border-radius: 14px; border: 1px solid #D6C9BA; background: #fff; font-size: 15.5px; font-weight: 500; color: #3E3559; }
.mw-pd-toc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.mw-pd-toc-chip { font-size: 12px; padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--mw-border-soft); color: var(--mw-muted); }
.mw-pd-blurwrap { position: relative; margin-top: 2px; }
.mw-pd-blurtext { filter: blur(5px); user-select: none; -webkit-user-select: none; }
.mw-pd-unlock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; }
.mw-pd-unlock span { background: rgba(255,255,255,.94); border: 1px solid var(--mw-border-soft); border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 700; color: #6C5DD3; box-shadow: 0 4px 14px rgba(108,93,211,.14); white-space: nowrap; }
.mw-pd-score-num { font-family: var(--mw-font-serif); font-size: 40px; font-weight: 700; }
.mw-pd-score-blur { filter: blur(7px); user-select: none; -webkit-user-select: none; }

.mw-pd-review-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.mw-pd-rating-box { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 14px; padding: 12px 20px; }
.mw-pd-rating-box .num { font-family: var(--mw-font-serif); font-size: 28px; font-weight: 700; color: #4B3F7A; }
.mw-pd-rev-card { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 18px; padding: 24px 26px; margin-bottom: 12px; }
.mw-pd-rev-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.mw-pd-rev-avatar { width: 36px; height: 36px; border-radius: 50%; }
.mw-pd-rev-name { font-size: 14px; font-weight: 500; }
.mw-pd-rev-date { font-size: 12px; color: var(--mw-muted3); margin-top: 2px; }
.mw-pd-rev-stars { margin-left: auto; font-size: 12.5px; color: var(--mw-gold-deep); }
.mw-pd-rev-text { font-size: 15.5px; line-height: 1.85; color: #3E3559; }

.mw-faq-box { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; overflow: hidden; }
.mw-faq-item { border-bottom: 1px solid #F5EFE7; }
.mw-faq-item:last-child { border-bottom: none; }
.mw-faq-q { display: flex; align-items: center; gap: 14px; padding: 20px 24px; cursor: pointer; }
.mw-faq-q .mark { font-family: var(--mw-font-serif); font-size: 17px; color: var(--mw-purple); }
.mw-faq-q .text { font-size: 16px; font-weight: 500; flex: 1; }
.mw-faq-q .chev { font-size: 12px; color: var(--mw-muted3); }
.mw-faq-a { padding: 0 24px 22px 52px; font-size: 15px; line-height: 1.85; color: var(--mw-text-soft); }

.mw-pd-buybox { position: sticky; top: 24px; background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 24px; padding: 28px 26px; box-shadow: 0 22px 50px rgba(34,28,51,.09); }
.mw-pd-buybox-badges { display: flex; gap: 6px; margin-bottom: 16px; }
.mw-pd-buybox-badges span { font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px; }
.mw-pd-buybox h1 { font-family: var(--mw-font-serif); font-size: 26px; line-height: 1.45; margin: 0 0 12px; font-weight: 700; letter-spacing: -.5px; }
.mw-pd-buybox-rating { display: flex; align-items: center; gap: 7px; margin-bottom: 22px; font-size: 13px; }
.mw-pd-buybox-rating .stars { color: var(--mw-gold-deep); font-size: 12.5px; }
.mw-pd-buybox-rating .cnt { color: var(--mw-muted5); }
.mw-pd-buybox-price { display: flex; align-items: baseline; gap: 9px; padding-bottom: 20px; border-bottom: 1px solid #F3EDE5; margin-bottom: 20px; }
.mw-pd-buybox-off { font-size: 19px; font-weight: 700; color: var(--mw-red); }
.mw-pd-buybox-now { font-size: 32px; font-weight: 700; letter-spacing: -1px; }
.mw-pd-buybox-was { font-size: 15px; color: var(--mw-muted5); text-decoration: line-through; }
.mw-pd-form-label { font-size: 13px; font-weight: 600; color: var(--mw-muted); letter-spacing: .5px; margin-bottom: 12px; }
.mw-pd-form { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.mw-pd-form input { height: 48px; border-radius: 12px; border: 1px solid var(--mw-border); background: #FBF8F4; padding: 0 15px; font-family: inherit; font-size: 14.5px; outline: none; width: 100%; }
.mw-pd-dob-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.mw-pd-dob-item { height: 48px; border-radius: 12px; border: 1px solid var(--mw-border); background: #FBF8F4; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; font-size: 14px; color: #4B4266; cursor: pointer; }
.mw-pd-cal-tabs { display: flex; gap: 8px; }
.mw-pd-cal-tab { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 14px; font-weight: 500; cursor: pointer; }
.mw-pd-cal-tab.active { background: var(--mw-purple-tint); color: var(--mw-purple-dark); border: 1px solid #DCD3FB; }
.mw-pd-cal-tab.inactive { background: #FBF8F4; color: var(--mw-muted); border: 1px solid var(--mw-border); }
.mw-pd-meta-box { background: #FBF8F4; border-radius: 14px; padding: 16px 18px; margin-bottom: 20px; }
.mw-pd-meta-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 5px 0; }
.mw-pd-meta-row .k { color: var(--mw-muted); }
.mw-pd-meta-row .v { color: var(--mw-ink-soft); font-weight: 500; }
.mw-pd-buy-btn { width: 100%; height: 58px; border-radius: 15px; border: none; background: var(--mw-purple); color: #fff; font-size: 17px; font-weight: 600; box-shadow: 0 14px 28px rgba(108,93,211,.3); margin-bottom: 9px; text-align: center; display: block; text-decoration: none; line-height: 58px; }
.mw-pd-buy-btn:hover { background: var(--mw-purple-dark); }
.mw-pd-sub-actions { display: flex; gap: 9px; }
.mw-pd-sub-actions button { flex: 1; height: 50px; border-radius: 13px; border: 1px solid #D9CEC1; background: #fff; font-size: 14.5px; color: var(--mw-ink-soft); }
.mw-pd-note { margin-top: 18px; font-size: 12.5px; line-height: 1.8; color: var(--mw-muted3); }

.mw-related-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.mw-related-card { background: #fff; border-radius: 20px; border: 1px solid var(--mw-border-soft); overflow: hidden; text-decoration: none; color: inherit; display: block; transition: transform .25s ease, box-shadow .25s ease; }
.mw-related-card:hover { transform: translateY(-6px); box-shadow: 0 22px 42px rgba(34,28,51,.12); }
.mw-related-thumb { height: 150px; display: flex; align-items: center; justify-content: center; }
.mw-related-glyph { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 24px; color: #3E3559; }
.mw-related-body { padding: 18px; }
.mw-related-cat { font-size: 12.5px; color: var(--mw-muted4); margin-bottom: 8px; }
.mw-related-name { font-size: 16px; font-weight: 600; line-height: 1.45; margin-bottom: 12px; min-height: 46px; }
.mw-related-price { display: flex; align-items: baseline; gap: 7px; }
.mw-related-off { font-size: 14px; font-weight: 700; color: var(--mw-red); }
.mw-related-now { font-size: 18px; font-weight: 700; }

@media (max-width: 1000px) {
  .mw-pd-layout { grid-template-columns: 1fr; }
  .mw-pd-buybox { position: static; }
  .mw-pd-highlights { grid-template-columns: 1fr; }
  .mw-related-grid { grid-template-columns: repeat(2,1fr); }
}

/* 모바일: 사이드바 구매박스 대신 하단 고정 구매바 (원본 모바일 디자인 패턴) */
.mw-pd-mobile-bar { display: none; }
@media (max-width: 640px) {
  .mw-pd-buybox { display: none; }
  body.has-pd-mobile-bar { padding-bottom: 84px; }
  .mw-pd-mobile-bar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(255,252,248,.97); backdrop-filter: blur(12px);
    border-top: 1px solid var(--mw-border-softer);
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .mw-pd-mobile-bar .price {
    display: flex; flex-direction: column; line-height: 1.3; flex-shrink: 0;
  }
  .mw-pd-mobile-bar .off { font-size: 12px; font-weight: 700; color: var(--mw-red); }
  .mw-pd-mobile-bar .now { font-size: 19px; font-weight: 700; letter-spacing: -.5px; }
  .mw-pd-mobile-bar a {
    flex: 1; height: 52px; border-radius: 14px; border: none;
    background: var(--mw-purple); color: #fff; font-size: 16px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
  }
}

/* ==========================================================================
   Tarot flow (dark, immersive)
   ========================================================================== */
@keyframes mwUpT { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }
@keyframes mwTwinkleT { 0%,100%{opacity:.2} 50%{opacity:1} }
@keyframes mwGlow { 0%,100%{box-shadow:0 0 0 rgba(255,217,138,0)} 50%{box-shadow:0 0 28px rgba(255,217,138,.35)} }

.mwt-body { font-family: var(--mw-font-sans); color: #EDE7FA; background: #221C33; min-height: 100vh; position: relative; overflow-x: hidden; }
.mwt-orb1 { position: absolute; top: -120px; left: -80px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle,#40356A 0%, rgba(34,28,51,0) 70%); }
.mwt-orb2 { position: absolute; bottom: -160px; right: -60px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle,#4A3A5E 0%, rgba(34,28,51,0) 70%); }
.mwt-star { position: absolute; border-radius: 50%; animation: mwTwinkleT 3.6s ease-in-out infinite; }

.mwt-header { position: relative; border-bottom: 1px solid rgba(255,255,255,.08); }
.mwt-header-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; height: 70px; display: flex; align-items: center; gap: 14px; }
.mwt-header-inner .brand { font-family: var(--mw-font-serif); font-weight: 700; font-size: 21px; letter-spacing: 2px; color: #FFF6E2; }
.mwt-header-inner .sub { font-size: 14.5px; color: #9C8FC4; }
.mwt-progress-wrap { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.mwt-progress-label { font-size: 13.5px; color: #9C8FC4; }
.mwt-progress-track { width: 120px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; }
.mwt-progress-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg,#8B7BEA,#FFD98A); transition: width .3s ease; }

.mwt-step { position: relative; margin: 0 auto; animation: mwUpT .5s ease both; }
.mwt-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 3px; color: #C7A7E0; margin-bottom: 18px; }
.mwt-h1 { font-family: var(--mw-font-serif); line-height: 1.35; margin: 0 0 16px; color: #FFF6E2; font-weight: 700; letter-spacing: -1px; }
.mwt-lead { font-size: 16.5px; line-height: 1.8; color: #B7ACD4; margin: 0 0 34px; }

.mwt-step-ask { max-width: 760px; padding: 72px 32px 90px; text-align: center; }
.mwt-step-ask .mwt-h1 { font-size: 44px; }
.mwt-topics { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 20px; }
.mwt-topic { border-radius: 18px; padding: 22px 24px; text-align: left; cursor: pointer; border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.mwt-topic:hover { transform: translateY(-4px); }
.mwt-topic.is-active { background: rgba(108,93,211,.22); border-color: #6C5DD3; }
.mwt-topic-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mwt-topic-glyph { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 17px; color: #FFD98A; }
.mwt-topic-label { font-size: 16.5px; font-weight: 600; color: #FFF6E2; }
.mwt-topic-desc { font-size: 13.5px; color: #A99CC8; line-height: 1.65; }
.mwt-input { width: 100%; height: 58px; border-radius: 15px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); padding: 0 20px; font-family: inherit; font-size: 15.5px; color: #FFF6E2; outline: none; margin-bottom: 26px; }
.mwt-input::placeholder { color: #8E80BF; }
.mwt-btn-primary { height: 58px; padding: 0 40px; border-radius: 15px; border: none; background: #6C5DD3; color: #fff; font-family: inherit; font-size: 16.5px; font-weight: 600; cursor: pointer; box-shadow: 0 14px 30px rgba(108,93,211,.4); }
.mwt-btn-primary:hover { background: #7E70E0; }
.mwt-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.mwt-step-pick { max-width: 1100px; padding: 56px 32px 90px; text-align: center; }
.mwt-step-pick .mwt-h1 { font-size: 38px; }
.mwt-question { font-size: 16px; color: #B7ACD4; margin: 0 0 8px; }
.mwt-picked-count { font-size: 14.5px; color: #8E80BF; margin: 0 0 36px; }
.mwt-deck { display: flex; justify-content: center; gap: 14px; margin-bottom: 38px; flex-wrap: wrap; }
.mwt-card { width: 88px; height: 134px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.14); cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 19px; color: #FFD98A; background: linear-gradient(165deg,#3A3054,#2A2340); transition: transform .25s ease, border-color .25s ease; }
.mwt-card:hover { transform: translateY(-14px); }
.mwt-card.is-picked { background: linear-gradient(165deg,#FFF6E2,#EADFFB); color: #3A2F63; border-color: #FFD98A; transform: translateY(-16px); animation: mwGlow 2.4s ease-in-out infinite; }

.mwt-step-reveal { max-width: 1100px; padding: 56px 32px 90px; }
.mwt-reveal-head { text-align: center; margin-bottom: 38px; }
.mwt-spread { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 24px; }
.mwt-spread-dynamic { grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); }
.mwt-spread-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 24px; text-align: center; }
.mwt-spread-slot { font-size: 11.5px; font-weight: 600; letter-spacing: 2.5px; color: #8E80BF; margin-bottom: 16px; }
.mwt-spread-face { height: 238px; border-radius: 18px; background: linear-gradient(165deg,#FFF6E2,#EADFFB); padding: 20px; display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 18px; }
.mwt-spread-no { font-size: 11px; letter-spacing: 2px; color: #7C6FA8; text-align: left; }
.mwt-spread-no.b { text-align: right; }
.mwt-spread-title { font-family: var(--mw-font-serif); font-size: 24px; color: #3A2F63; line-height: 1.35; }
.mwt-spread-ko { font-size: 12.5px; color: #7C6FA8; margin-top: 8px; }
.mwt-spread-text { font-size: 14.5px; line-height: 1.85; color: #C6BCE0; text-align: left; }
.mwt-spread-face-locked { align-items: center; justify-content: center; gap: 10px; background: repeating-linear-gradient(135deg,#3A3054,#3A3054 10px,#332B4A 10px,#332B4A 20px); margin-bottom: 0; }
.mwt-lock-glyph { font-size: 30px; opacity: .85; }
.mwt-lock-label { font-size: 13px; color: #C6BCE0; letter-spacing: 1px; }

.mwt-shop { max-width: 1120px; margin: 70px auto 40px; padding: 0 24px; }
.mwt-shop-head { text-align: center; margin-bottom: 40px; }
.mwt-shop-head h2 { font-family: var(--mw-font-serif); font-size: 26px; color: #FFF6E2; margin-bottom: 8px; }
.mwt-shop-head p { font-size: 14px; color: #A79BCF; }
.mwt-shop-head p span { color: #FFD98A; font-weight: 600; }

.mwt-shop-tier { margin-bottom: 44px; }
.mwt-shop-tier-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.mwt-shop-tier-badge { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(140deg,#8B7BEA,#6C5DD3); color: #FFF6E2; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mwt-shop-tier-title { font-family: var(--mw-font-serif); font-size: 19px; color: #FFF6E2; }
.mwt-shop-tier-desc { font-size: 13px; color: #8E80BF; }
.mwt-shop-tier-count { margin-left: auto; font-size: 12.5px; color: #7C6FA8; }

/* 상 (프리미엄) — 큰 카드, 가로 스크롤 */
.mwt-shop-feature-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.mwt-shop-feature-card { flex: 0 0 260px; display: flex; flex-direction: column; gap: 12px; padding: 26px 22px; border-radius: 20px; text-decoration: none; background: linear-gradient(160deg,rgba(255,217,138,.1),rgba(139,123,234,.08)); border: 1px solid rgba(255,217,138,.35); transition: transform .2s ease, box-shadow .2s ease; }
.mwt-shop-feature-card:hover { transform: translateY(-5px); box-shadow: 0 16px 30px rgba(255,217,138,.15); }
.mwt-shop-feature-card .icon { font-size: 30px; color: #FFD98A; }
.mwt-shop-feature-card .name { font-size: 15.5px; color: #FFF6E2; line-height: 1.45; min-height: 44px; }
.mwt-shop-feature-card .price { font-size: 17px; font-weight: 700; color: #FFD98A; }
.mwt-shop-feature-card .price .was { font-size: 12px; font-weight: 400; color: #B7ACD4; text-decoration: line-through; margin-left: 6px; }

/* 중 (테마) — 표준 카드 그리드 */
.mwt-shop-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 14px; }
.mwt-shop-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.mwt-shop-card:hover { transform: translateY(-4px); border-color: #FFD98A; }
.mwt-shop-card-top { display: flex; align-items: center; justify-content: space-between; }
.mwt-shop-card-top .icon { font-size: 18px; color: #C7A7E0; }
.mwt-shop-badge { font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 8px; }
.mwt-shop-name { font-size: 14.5px; color: #EDE7FA; line-height: 1.4; min-height: 40px; }
.mwt-shop-price { font-size: 15.5px; font-weight: 700; color: #FFD98A; }
.mwt-shop-price .was { font-size: 12px; font-weight: 400; color: #7C6FA8; text-decoration: line-through; margin-left: 6px; }

/* 하 (라이트) — 알약형 칩 리스트 */
.mwt-shop-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mwt-shop-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); text-decoration: none; font-size: 13px; color: #EDE7FA; transition: transform .15s ease, border-color .15s ease; }
.mwt-shop-chip:hover { transform: translateY(-2px); border-color: #FFD98A; }
.mwt-shop-chip .icon { color: #FFD98A; font-size: 13px; }
.mwt-shop-chip .price { color: #FFD98A; font-weight: 600; white-space: nowrap; }
.mwt-comment-box { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 32px 34px; margin-bottom: 20px; }
.mwt-comment-title { font-family: var(--mw-font-serif); font-size: 22px; color: #FFF6E2; margin-bottom: 16px; }
.mwt-comment-quote { font-family: var(--mw-font-serif); font-size: 24px; line-height: 1.6; color: #FFD98A; padding: 22px 24px; background: rgba(255,217,138,.08); border-radius: 16px; margin-bottom: 18px; }
.mwt-comment-text { font-size: 15.5px; line-height: 1.9; color: #C6BCE0; }
.mwt-cta-row { display: grid; grid-template-columns: 1.3fr .7fr; gap: 16px; }
.mwt-cta-main { background: #6C5DD3; border-radius: 22px; padding: 30px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mwt-cta-main .t { font-family: var(--mw-font-serif); font-size: 24px; color: #fff; margin-bottom: 8px; }
.mwt-cta-main .s { font-size: 14.5px; color: #E4DEFB; line-height: 1.7; }
.mwt-cta-main a { display: inline-block; height: 52px; line-height: 52px; padding: 0 26px; border-radius: 14px; border: none; background: #FFF6E2; color: #3A2F63; font-family: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.mwt-cta-side { display: flex; flex-direction: column; gap: 10px; }
.mwt-cta-side button { flex: 1; border-radius: 16px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); font-family: inherit; font-size: 14.5px; color: #EDE7FA; cursor: pointer; padding: 14px; }

@media (max-width: 640px) {
  .mwt-topics { grid-template-columns: 1fr; }
  .mwt-spread { grid-template-columns: 1fr; }
  .mwt-cta-row { grid-template-columns: 1fr; }
  .mwt-step-ask .mwt-h1, .mwt-step-pick .mwt-h1 { font-size: 30px; }
  /* 브랜드+부제+진행바가 한 줄에 다 안 들어가서 가로 스크롤 생기던 것 수정 */
  .mwt-header-inner { padding: 0 18px; gap: 8px; }
  .mwt-header-inner .sub { display: none; }
  .mwt-progress-track { width: 60px; }
  .mwt-progress-label { font-size: 12px; }
  .mwt-progress-wrap { gap: 8px; }
}

/* ==========================================================================
   Checkout / order lookup / report (mwc- prefix)
   ========================================================================== */
@keyframes mwUpF { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }
@keyframes mwPop { 0%{transform:scale(.7); opacity:0} 60%{transform:scale(1.06)} 100%{transform:scale(1); opacity:1} }
@keyframes mwSpin { to{transform:rotate(360deg)} }

.mwc-header { background: var(--mw-bg-alt); border-bottom: 1px solid var(--mw-border); }
.mwc-header-inner { max-width: 1080px; margin: 0 auto; padding: 0 32px; height: 70px; display: flex; align-items: center; gap: 14px; }
.mwc-header-inner .brand { font-family: var(--mw-font-serif); font-weight: 700; font-size: 21px; letter-spacing: 2px; color: var(--mw-ink); flex-shrink: 0; }
.mwc-header-inner .label { font-size: 14.5px; color: var(--mw-muted); margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
  .mwc-header-inner { padding: 0 18px; }
  /* 4칸(년/월/일/시)이 좁은 폰에서 한 줄에 다 들어가면 글자가 잘려서
     2x2로 바꿔줍니다 — 결제 직전 가장 중요한 입력폼이라 특히 신경 씁니다. */
  .mwc-card { padding: 22px 18px; }
  .mwc-grid4 { grid-template-columns: repeat(2,1fr); gap: 10px 8px; }
}

.mwc-steps { max-width: 1080px; margin: 0 auto; padding: 34px 32px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mwc-step-item { display: flex; align-items: center; gap: 11px; }
.mwc-step-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 600; background: var(--mw-purple-tint); color: var(--mw-purple-dark); }
.mwc-step-dot.is-todo { background: #F0EBE2; color: var(--mw-muted3); }
.mwc-step-label { font-size: 15px; font-weight: 500; color: var(--mw-text); }
.mwc-step-label.is-todo { color: var(--mw-muted3); }
.mwc-step-sep { width: 44px; height: 1px; background: #DFD5C8; display: block; }

.mwc-form-layout { max-width: 1080px; margin: 0 auto; padding: 30px 32px 90px; display: grid; grid-template-columns: 1fr 372px; gap: 32px; align-items: start; animation: mwUpF .5s ease both; }
.mwc-form-col { display: flex; flex-direction: column; gap: 16px; }
.mwc-card { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 22px; padding: 30px; }
.mwc-card-title { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.mwc-card-title span.t { font-family: var(--mw-font-serif); font-size: 22px; }
.mwc-required { font-size: 12px; color: #C0403F; background: #FDE3E2; padding: 4px 9px; border-radius: 20px; font-weight: 600; }
.mwc-field-label { font-size: 13px; color: var(--mw-muted); margin-bottom: 7px; }
/* 화면엔 안 보이지만 스크린 리더에는 읽히는 라벨용 — 여러 select를 하나의
   그룹 라벨(예: "생년월일")로 묶을 때, select 각각에도 개별 라벨이 필요해서 씁니다. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mwc-grid2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 12px; }
.mwc-grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 12px; }
.mwc-input { width: 100%; height: 50px; border-radius: 13px; border: 1px solid var(--mw-border); background: #FBF8F4; padding: 0 15px; font-family: inherit; font-size: 15px; outline: none; }
.mwc-input:focus { border-color: var(--mw-purple); }
.mwc-pill-toggle { display: flex; gap: 8px; }
.mwc-pill { flex: 1; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 13px; font-size: 15px; cursor: pointer; background: #fff; color: var(--mw-text); border: 1px solid var(--mw-border); }
.mwc-pill.is-active { background: var(--mw-purple); color: #fff; border-color: var(--mw-purple); }
.mwc-dob-item { height: 50px; border-radius: 13px; border: 1px solid var(--mw-border); background: #FBF8F4; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; font-size: 15px; color: #4B4266; cursor: pointer; }
.mwc-hint { margin-top: 14px; font-size: 13px; color: var(--mw-muted3); line-height: 1.7; }
.mwc-pay-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 20px; }
.mwc-pay-opt { height: 64px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; cursor: pointer; background: #fff; color: var(--mw-text); border: 1.5px solid var(--mw-border); }
.mwc-pay-opt.is-active { background: var(--mw-purple-tint); color: var(--mw-purple-dark); border-color: var(--mw-purple); }
.mwc-agreements { display: flex; flex-direction: column; gap: 11px; padding-top: 20px; border-top: 1px solid #F3EDE5; }
.mwc-agree-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--mw-text); cursor: pointer; }
.mwc-agree-mark { width: 20px; height: 20px; border-radius: 6px; background: var(--mw-purple); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.mwc-agree-view { margin-left: auto; font-size: 12.5px; color: var(--mw-muted3); }
/* 키보드(Tab)로 성별·양음력·결제수단 선택지나 약관 체크박스에 왔을 때
   어디에 포커스가 있는지 보이도록 — 예전엔 이 커스텀 위젯들이 포커스
   표시가 전혀 없었습니다. */
.mwc-pill:focus-visible,
.mwc-pay-opt:focus-visible { outline: 2px solid var(--mw-purple); outline-offset: 2px; }
.mwc-agree-row input:focus-visible + .mwc-agree-mark { outline: 2px solid var(--mw-purple); outline-offset: 2px; }

.mwc-summary { position: sticky; top: 24px; background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 22px; padding: 28px 26px; box-shadow: 0 20px 44px rgba(34,28,51,.08); }
.mwc-summary-title { font-family: var(--mw-font-serif); font-size: 20px; margin-bottom: 20px; }
.mwc-summary-product { display: flex; gap: 13px; padding-bottom: 20px; border-bottom: 1px solid #F3EDE5; margin-bottom: 18px; }
.mwc-summary-icon { width: 64px; height: 64px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 22px; color: #3E3559; flex-shrink: 0; }
.mwc-summary-cat { font-size: 12.5px; color: var(--mw-muted4); margin-bottom: 5px; }
.mwc-summary-name { font-size: 15.5px; font-weight: 600; line-height: 1.45; }
.mwc-price-rows { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid #F3EDE5; margin-bottom: 18px; }
.mwc-price-row { display: flex; justify-content: space-between; font-size: 14.5px; }
.mwc-price-row .k { color: var(--mw-muted); }
.mwc-final-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.mwc-final-label { font-size: 15.5px; font-weight: 600; }
.mwc-final-amount { font-family: var(--mw-font-serif); font-size: 30px; font-weight: 700; letter-spacing: -1px; color: #3A2F63; }
.mwc-pay-btn { width: 100%; height: 58px; border-radius: 15px; border: none; background: var(--mw-purple); color: #fff; font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; box-shadow: 0 14px 28px rgba(108,93,211,.3); }
.mwc-pay-btn:hover { background: var(--mw-purple-dark); }
.mwc-note { margin-top: 14px; font-size: 12.5px; line-height: 1.75; color: var(--mw-muted3); }

.mwc-done { max-width: 640px; margin: 0 auto; padding: 64px 32px 90px; text-align: center; animation: mwUpF .5s ease both; }
.mwc-done-icon { width: 96px; height: 96px; margin: 0 auto 26px; border-radius: 50%; background: linear-gradient(150deg,#8B7BEA,#6C5DD3); display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px rgba(108,93,211,.32); animation: mwPop .5s ease both; }
.mwc-done-icon span { font-size: 38px; color: #FFF6E2; }
.mwc-done h1 { font-family: var(--mw-font-serif); font-size: 36px; margin: 0 0 14px; font-weight: 700; letter-spacing: -.8px; }
.mwc-done p { font-size: 16.5px; line-height: 1.8; color: var(--mw-text-soft); margin: 0 0 34px; }
.mwc-done-card { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 22px; padding: 28px 30px; text-align: left; margin-bottom: 16px; }
.mwc-spinner-row { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.mwc-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid #E4DAFB; border-top-color: var(--mw-purple); display: block; animation: mwSpin 1s linear infinite; }
.mwc-order-row { display: flex; justify-content: space-between; font-size: 14.5px; padding: 9px 0; border-bottom: 1px solid #F5EFE7; }
.mwc-order-row:last-child { border-bottom: none; }
.mwc-order-row .k { color: var(--mw-muted); }
.mwc-order-row .v { color: var(--mw-ink-soft); font-weight: 500; }
.mwc-done-actions { display: flex; gap: 10px; }
.mwc-done-actions a { flex: 1; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 15.5px; text-decoration: none; }
.mwc-done-actions .ghost { border: 1px solid #D9CEC1; background: #fff; color: var(--mw-ink-soft); }
.mwc-done-actions .solid { border: none; background: var(--mw-ink); color: #FFF6E2; font-weight: 600; }
.mwc-signup-hint { margin-top: 26px; padding: 20px 24px; background: var(--mw-purple-tint); border-radius: 18px; font-size: 14px; line-height: 1.75; color: #4B3F7A; text-align: left; }

.mwc-lookup { max-width: 560px; margin: 0 auto; padding: 64px 32px 90px; animation: mwUpF .5s ease both; }
.mwc-lookup-head { text-align: center; margin-bottom: 32px; }
.mwc-lookup-head h1 { font-family: var(--mw-font-serif); font-size: 34px; margin: 0 0 12px; font-weight: 700; letter-spacing: -.8px; }
.mwc-lookup-head p { font-size: 15.5px; color: var(--mw-text-soft); margin: 0; line-height: 1.8; }
.mwc-lookup-card { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 22px; padding: 28px; box-shadow: 0 18px 40px rgba(34,28,51,.07); }
.mwc-lookup-tabs { display: flex; gap: 8px; margin-bottom: 24px; background: #F5F0E9; padding: 5px; border-radius: 14px; }
.mwc-lookup-tab { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 11px; font-size: 14.5px; font-weight: 500; cursor: pointer; color: var(--mw-muted2); }
.mwc-lookup-tab.is-active { background: #fff; color: var(--mw-purple-dark); }
.mwc-lookup-submit { width: 100%; height: 56px; border-radius: 14px; border: none; background: var(--mw-purple); color: #fff; font-family: inherit; font-size: 16.5px; font-weight: 600; cursor: pointer; margin-top: 8px; }
.mwc-lookup-submit:hover { background: var(--mw-purple-dark); }
.mwc-recent-title { font-size: 13.5px; color: var(--mw-muted); margin: 24px 0 12px; }
.mwc-recent-item { display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 16px; padding: 14px 18px; cursor: pointer; text-decoration: none; color: inherit; margin-bottom: 9px; }
.mwc-recent-item:hover { border-color: #DCD3FB; }
.mwc-recent-icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 18px; color: #fff; flex-shrink: 0; }
.mwc-recent-name { font-size: 14.5px; font-weight: 500; }
.mwc-recent-meta { font-size: 12.5px; color: var(--mw-muted); margin-top: 3px; }
.mwc-recent-open { margin-left: auto; font-size: 13px; color: var(--mw-purple); }

.mwc-list { max-width: 800px; margin: 0 auto; padding: 44px 32px 90px; animation: mwUpF .5s ease both; }
.mwc-list-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; flex-wrap: wrap; gap: 14px; }
.mwc-list-head h1 { font-family: var(--mw-font-serif); font-size: 34px; margin: 0 0 10px; font-weight: 700; letter-spacing: -.9px; }
.mwc-list-head .sub { font-size: 15px; color: var(--mw-text-soft); margin: 0; }
.mwc-list-back { height: 46px; padding: 0 20px; border-radius: 13px; border: 1px solid #D9CEC1; background: #fff; font-size: 14px; color: var(--mw-ink-soft); text-decoration: none; display: inline-flex; align-items: center; }
.mwc-signup-banner { background: var(--mw-purple-tint); border: 1px solid #E4DAFB; border-radius: 20px; padding: 22px 24px; display: flex; align-items: center; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.mwc-signup-banner .t { font-size: 15.5px; font-weight: 600; color: #4B3F7A; margin-bottom: 6px; }
.mwc-signup-banner .s { font-size: 13.5px; color: var(--mw-text-soft); line-height: 1.7; }
.mwc-signup-banner button, .mwc-signup-banner a { margin-left: auto; height: 48px; padding: 0 22px; border-radius: 13px; border: none; background: var(--mw-purple); color: #fff; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.mwc-result-card { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; padding: 22px 24px; display: flex; align-items: center; gap: 18px; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; text-decoration: none; color: inherit; margin-bottom: 12px; }
.mwc-result-card:hover { border-color: #DCD3FB; box-shadow: 0 16px 34px rgba(34,28,51,.08); }
.mwc-result-icon { width: 64px; height: 64px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 24px; color: #3E3559; flex-shrink: 0; }
.mwc-result-body { flex: 1; }
.mwc-result-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.mwc-result-cat { font-size: 12px; color: var(--mw-muted4); }
.mwc-result-state { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.mwc-result-name { font-size: 16.5px; font-weight: 600; letter-spacing: -.3px; margin-bottom: 7px; }
.mwc-result-meta { font-size: 13px; color: var(--mw-muted); }
.mwc-result-right { text-align: right; flex-shrink: 0; }
.mwc-result-left { font-size: 13px; font-weight: 500; margin-bottom: 10px; }
.mwc-result-open { font-size: 14px; color: var(--mw-purple); font-weight: 500; }
.mwc-list-footnote { margin-top: 24px; background: #FBF8F4; border: 1px solid var(--mw-border-softer); border-radius: 18px; padding: 20px 24px; font-size: 13.5px; line-height: 1.85; color: var(--mw-text-soft); }

.mwr-wrap { max-width: 900px; margin: 0 auto; padding: 40px 32px 90px; animation: mwUpF .5s ease both; }
.mwr-hero { background: linear-gradient(150deg,#E9E1FB 0%,#CDBDF7 55%,#FFE1B8 100%); border-radius: 26px; padding: 38px 40px; margin-bottom: 16px; position: relative; overflow: hidden; }
.mwr-hero-orb { position: absolute; top: -40px; right: -30px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFFFFF 0%, #F3ECFF 42%, #C8B7F4 100%); }
.mwr-hero-tag { font-size: 12.5px; font-weight: 600; letter-spacing: 3px; color: #6B5CA8; margin-bottom: 14px; }
.mwr-hero-title { font-family: var(--mw-font-serif); font-size: 34px; font-weight: 700; color: #3A2F63; letter-spacing: -.8px; margin-bottom: 10px; }
.mwr-hero-sub { font-size: 15px; color: #5F5487; }
.mwr-pillars { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
.mwr-theme-image { border-radius: 24px; overflow: hidden; margin-bottom: 16px; max-height: 340px; }
.mwr-theme-image img { width: 100%; height: 100%; max-height: 340px; object-fit: cover; object-position: center 15%; display: block; }
.mwr-summary-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; }
.mwr-stat-tile { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 18px; padding: 18px 16px; text-align: center; }
.mwr-stat-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: #fff; font-family: var(--mw-font-serif); font-size: 17px; }
.mwr-stat-icon svg { width: 20px; height: 20px; }
.mwr-stat-value { font-family: var(--mw-font-serif); font-size: 22px; font-weight: 700; color: var(--mw-ink); line-height: 1.2; }
.mwr-stat-label { font-size: 12px; color: var(--mw-muted); margin-top: 4px; }
@media (max-width: 640px) {
  .mwr-summary-strip { grid-template-columns: repeat(2,1fr); }
}
.mwr-hero-module { border-radius: 24px; padding: 26px 28px; margin-bottom: 16px; }
.mwr-hero-module-title { font-family: var(--mw-font-serif); font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.mwr-hero-module-sub { font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 18px; }
.mwr-hero-tabs { display: flex; gap: 6px; background: rgba(255,255,255,.18); border-radius: 999px; padding: 4px; margin-bottom: 18px; width: fit-content; }
.mwr-hero-tabs button { border: none; background: transparent; color: rgba(255,255,255,.85); font-size: 12.5px; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.mwr-hero-tabs button.is-active { background: #fff; color: var(--mw-ink); }
.mwr-gauge { margin-bottom: 16px; }
.mwr-gauge-label { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255,255,255,.9); font-weight: 600; margin-bottom: 6px; }
.mwr-gauge-label span { color: #fff; font-family: var(--mw-font-serif); font-size: 15px; }
.mwr-gauge-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.mwr-gauge-fill { height: 100%; border-radius: 999px; background: #fff; transition: width .4s ease; }
/* 흰 배경 카드 안에 게이지를 놓을 때(대시보드 카드 등)는 어두운 글자 +
   연회색 트랙이 필요해서 이 보정 클래스를 덧붙입니다. */
.mwr-gauge.is-onlight .mwr-gauge-label { color: var(--mw-text-soft); }
.mwr-gauge.is-onlight .mwr-gauge-label span:last-child { color: var(--mw-ink); }
.mwr-gauge.is-onlight .mwr-gauge-track { background: var(--mw-border-soft); }

/* 원형 도넛 게이지 — conic-gradient로 링을 채우고, mask로 가운데를 뚫어서
   히어로 배경색이 그대로 비치게 합니다(안쪽에 별도 배경색을 맞출 필요가
   없어서 어떤 카테고리 그라데이션 위에 올려도 자연스럽습니다). */
.mwr-donut-wrap { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.mwr-donut-ring { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(#fff calc(var(--pct, 0) * 3.6deg), rgba(255,255,255,.28) 0deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 13px)); mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 13px)); }
.mwr-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.mwr-donut-score { font-family: var(--mw-font-serif); font-size: 32px; font-weight: 700; color: #fff; line-height: 1; }
.mwr-donut-suffix { font-size: 10.5px; color: rgba(255,255,255,.85); margin-top: 4px; }

/* 히어로 대시보드 행 — 도넛(왼쪽) + 헤드라인·피크 배지(오른쪽). 좁은 화면에선 세로로 쌓입니다. */
.mwr-hero-dash-row { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
.mwr-hero-dash-info { flex: 1; min-width: 0; }
.mwr-peak-badge { display: inline-flex; align-items: baseline; gap: 7px; background: rgba(255,255,255,.94); border-radius: 12px; padding: 8px 14px; }
.mwr-peak-badge-label { font-size: 11.5px; color: var(--mw-muted); font-weight: 600; }
.mwr-peak-badge-value { font-family: var(--mw-font-serif); font-size: 18px; font-weight: 700; color: var(--mw-ink); }
@media (max-width: 480px) {
  .mwr-hero-dash-row { flex-direction: column; align-items: flex-start; }
}

/* 커리어형 히어로 상단의 대형 "베스트 먼스" 타이포그래피 노드. */
.mwr-best-month-node { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.mwr-best-month-node .num { font-family: var(--mw-font-serif); font-size: 54px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -1px; }
.mwr-best-month-node .label { font-size: 13px; color: rgba(255,255,255,.92); line-height: 1.5; max-width: 160px; }

/* 3분할 메트릭 카드 행 — 지수/핵심 기운/오행 강세를 카드 하나씩으로. */
.mwr-metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 4px; }
.mwr-metric-card { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); border-radius: 16px; padding: 14px 10px; text-align: center; }
.mwr-metric-value { font-family: var(--mw-font-serif); font-size: 23px; font-weight: 700; color: #fff; line-height: 1; }
.mwr-metric-label { font-size: 10.5px; color: rgba(255,255,255,.82); margin-top: 6px; }
.mwr-metric-badge { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; margin-top: 8px; background: rgba(255,255,255,.94); color: var(--mw-ink); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 480px) {
  .mwr-metric-row { grid-template-columns: repeat(3,1fr); gap: 6px; }
  .mwr-metric-card { padding: 10px 6px; }
  .mwr-metric-value { font-size: 18px; }
  .mwr-best-month-node .num { font-size: 42px; }
}
.mwr-keyword-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.mwr-keyword-chip { background: rgba(255,255,255,.22); backdrop-filter: blur(2px); color: #fff; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); white-space: nowrap; }
.mwr-keyword-chip.is-onlight { background: var(--mw-border-softer); color: var(--mw-ink); border-color: transparent; }
.mwr-best-month-banner { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,.94); border-radius: 18px; padding: 16px 20px; }
.mwr-best-month-num { font-family: var(--mw-font-serif); font-size: 30px; font-weight: 700; color: var(--mw-ink); line-height: 1; flex-shrink: 0; }
.mwr-best-month-text { font-size: 13.5px; color: var(--mw-text-soft); line-height: 1.6; }
.mwr-best-month-text b { color: var(--mw-ink); }
.mwr-month-graph { display: flex; align-items: flex-end; gap: 6px; height: 92px; margin-top: 4px; }
.mwr-month-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.mwr-month-bar { width: 100%; max-width: 22px; border-radius: 6px 6px 3px 3px; min-height: 6px; }
.mwr-month-bar-label { font-size: 10.5px; color: rgba(255,255,255,.8); }
.mwr-month-bar-col.is-best .mwr-month-bar-label { color: #fff; font-weight: 700; }
.mwr-hero-headline { font-size: 14.5px; color: #fff; line-height: 1.7; background: rgba(255,255,255,.16); border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; }
@media (max-width: 640px) {
  .mwr-hero-module { padding: 20px; }
  .mwr-month-graph { height: 70px; }
}

/* 길일 택일 전용 캘린더 낱장 카드 — 실제 달력을 뜯어낸 듯한 아이콘으로
   가장 좋은 날을 표시하고, 아래에 다가오는 일주일 미리보기 스트립을 붙입니다. */
.mwr-tear-card { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.mwr-tear-icon { width: 78px; flex-shrink: 0; background: #fff; border-radius: 14px; overflow: hidden; text-align: center; box-shadow: 0 10px 24px rgba(0,0,0,.15); }
.mwr-tear-tab { background: #3A2F63; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 0; letter-spacing: .5px; }
.mwr-tear-day { font-family: var(--mw-font-serif); font-size: 36px; font-weight: 800; color: #3A2F63; line-height: 1.3; padding-bottom: 2px; }
.mwr-tear-meta { color: #fff; }
.mwr-tear-pillar { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.mwr-tear-sub { font-size: 12.5px; color: rgba(255,255,255,.85); }
.mwr-week-strip { display: flex; gap: 6px; margin-top: 4px; }
.mwr-week-cell { flex: 1; background: rgba(255,255,255,.18); border-radius: 10px; padding: 8px 4px; text-align: center; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.mwr-week-cell .w { font-size: 10px; opacity: .8; }
.mwr-week-cell .d { font-family: var(--mw-font-serif); font-size: 15px; font-weight: 700; }
.mwr-week-cell.is-good { background: rgba(255,255,255,.95); color: #1F7A59; }
.mwr-week-cell.is-bad { background: rgba(255,255,255,.95); color: #C0403F; }
@media (max-width: 480px) {
  .mwr-tear-icon { width: 62px; }
  .mwr-tear-day { font-size: 28px; }
  .mwr-week-cell { padding: 6px 2px; }
}

/* 애정·궁합 전용 감정선 웨이브 차트 — 막대그래프(대표운세)·도넛(재물)과
   구분되는 곡선 그래프입니다. */
.mwr-love-wave { position: relative; width: 100%; height: 92px; margin-top: 4px; }
.mwr-love-wave svg { width: 100%; height: 100%; display: block; }
/* 점 마커·피크 라벨은 SVG 밖의 일반 HTML 요소로 %좌표 배치합니다 — SVG를
   늘려도 이 요소들은 글자·원 모양이 절대 찌그러지지 않습니다. */
.mwr-love-wave-dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255,255,255,.75); }
.mwr-love-wave-dot.is-best { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
.mwr-love-wave-peak { position: absolute; transform: translate(-50%, calc(-100% - 10px)); background: rgba(0,0,0,.28); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.mwr-love-wave-labels { display: flex; justify-content: space-between; margin-top: 6px; }
.mwr-love-wave-labels span { font-size: 10.5px; color: rgba(255,255,255,.8); flex: 1; text-align: center; }
.mwr-love-wave-labels span.is-best { color: #fff; font-weight: 700; }
@media (max-width: 640px) {
  .mwr-love-wave { height: 70px; }
}

/* 대시보드형 2컬럼 그리드 — 재물운 등 "성향 vs 타이밍" 처럼 성격이 다른 두
   카드를 나란히 놓아야 할 때 씁니다. 640px 이하에서는 1컬럼으로 접힙니다. */
.mwr-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.mwr-dashboard-card { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 22px; padding: 24px 26px; }
.mwr-dashboard-card-title { display: flex; align-items: center; gap: 10px; font-family: var(--mw-font-serif); font-size: 17px; font-weight: 700; color: var(--mw-ink); margin-bottom: 14px; }
@media (max-width: 720px) {
  .mwr-dashboard-grid { grid-template-columns: 1fr; }
}

/* 경고/추천 배너 — 재물 손실 주의 시기처럼 한눈에 튀어야 하는 안내에 씁니다. */
.mwr-warning-banner { display: flex; gap: 14px; align-items: flex-start; background: #FDF1EE; border: 1px solid #F3C9BE; border-radius: 20px; padding: 20px 24px; margin-bottom: 16px; }
.mwr-warning-icon { width: 38px; height: 38px; border-radius: 50%; background: #E0605F; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 17px; flex-shrink: 0; }
.mwr-warning-title { font-weight: 700; color: #B3392F; font-size: 14.5px; margin-bottom: 4px; }
.mwr-warning-text { font-size: 13.5px; color: #8A4A42; line-height: 1.7; }

/* 세로 스텝 타임라인 — "준비→실행→안정화"처럼 순서가 있는 전략을 보여줄 때. */
.mwr-step-timeline { display: flex; flex-direction: column; }
.mwr-step { display: flex; gap: 16px; }
.mwr-step-rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.mwr-step-num { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--mw-font-serif); font-weight: 700; font-size: 13.5px; flex-shrink: 0; }
.mwr-step-line { width: 2px; flex: 1; background: var(--mw-border-soft); margin: 4px 0; min-height: 24px; }
.mwr-step:last-child .mwr-step-line { display: none; }
.mwr-step-body { padding-bottom: 26px; }
.mwr-step-title { font-weight: 700; color: var(--mw-ink); font-size: 14.5px; margin-bottom: 5px; }
.mwr-step-text { font-size: 13.5px; color: var(--mw-text-soft); line-height: 1.75; }

/* 적성/시각 카드 — 텍스트만 나열하지 않고 아이콘 배지 + 짧은 타이틀로 구성. */
.mwr-visual-card-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.mwr-visual-card { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; padding: 20px; }
.mwr-visual-card-icon { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--mw-font-serif); font-size: 16px; margin-bottom: 12px; }
.mwr-visual-card-title { font-weight: 700; color: var(--mw-ink); font-size: 14.5px; margin-bottom: 6px; }
.mwr-visual-card-text { font-size: 13px; color: var(--mw-text-soft); line-height: 1.7; }
@media (max-width: 640px) {
  .mwr-visual-card-row { grid-template-columns: 1fr; }
}

/* 순위 리스트 카드 — "N위 · N월 · 점수 · 키워드"를 막대그래프 대신 한 줄로
   바로 읽히게 보여줍니다(재물운 피크 달 Top 3 등). */
.mwr-rank-list { display: flex; flex-direction: column; gap: 10px; }
.mwr-rank-item { display: flex; align-items: center; gap: 14px; background: var(--mw-border-softer); border-radius: 14px; padding: 12px 16px; }
.mwr-rank-num { width: 26px; height: 26px; border-radius: 50%; background: var(--mw-ink); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--mw-font-serif); }
.mwr-rank-item:first-child .mwr-rank-num { background: linear-gradient(140deg,#FFD98A,#E9A23B); color: #6B4B12; }
.mwr-rank-body { flex: 1; min-width: 0; }
.mwr-rank-month { font-weight: 700; color: var(--mw-ink); font-size: 14px; }
.mwr-rank-pillar { font-weight: 400; color: var(--mw-muted); font-size: 12px; }
.mwr-rank-keyword { font-size: 12.5px; color: var(--mw-text-soft); margin-top: 2px; }
.mwr-rank-score { font-family: var(--mw-font-serif); font-weight: 700; font-size: 16px; color: var(--mw-ink); flex-shrink: 0; }

/* 월별/대운 카드 — 줄글 한 덩어리 대신 [월·기운 태그] + 한 줄 요약 +
   세부 설명으로 나눠서 한눈에 훑을 수 있게 합니다. */
.mwr-month-card { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 16px; padding: 16px 18px; display: flex; gap: 14px; }
.mwr-month-card-tag { flex-shrink: 0; width: 62px; text-align: center; }
.mwr-month-card-tag .m { font-family: var(--mw-font-serif); font-size: 19px; font-weight: 700; color: var(--mw-ink); line-height: 1.15; }
.mwr-month-card-tag .g { font-size: 10.5px; color: var(--mw-muted); margin-top: 3px; }
.mwr-month-card-body { flex: 1; min-width: 0; }
.mwr-month-card-summary { font-weight: 700; font-size: 13.5px; color: var(--mw-ink); margin-bottom: 6px; }
.mwr-month-card-detail { font-size: 12.5px; color: var(--mw-text-soft); line-height: 1.75; }

/* "기본 사주 정보 보기" 단일 아코디언 — 공통 해설 섹션 전부를 하나로 묶어서
   기본은 접어두고, 버튼 한 번으로 전부 펼치게 합니다. */
.mwr-detail-toggle { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: #F5F1FC; border: 1px dashed var(--mw-border-soft); color: #6C5DD3; font-size: 13.5px; font-weight: 600; padding: 14px; border-radius: 16px; cursor: pointer; margin-bottom: 16px; }
.mwr-detail-toggle .arrow { transition: transform .25s ease; }
.mwr-detail-toggle.is-open .arrow { transform: rotate(180deg); }

.mwr-timeline.is-oncolor .mwr-timeline-line { background: rgba(255,255,255,.35); }
.mwr-timeline.is-oncolor .mwr-timeline-dot { background: #fff; box-shadow: none; }
.mwr-timeline.is-oncolor .mwr-timeline-age { color: rgba(255,255,255,.85); }
.mwr-timeline { position: relative; margin-bottom: 24px; padding: 0 4px; }
.mwr-timeline-line { position: absolute; top: 6px; left: 4px; right: 4px; height: 2px; background: var(--mw-border-soft); }
.mwr-timeline-items { display: flex; justify-content: space-between; position: relative; z-index: 1; }
.mwr-timeline-item { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.mwr-timeline-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--mw-purple); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--mw-border-soft); }
.mwr-timeline-dot.is-heart { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #fff; }
.mwr-timeline-age { font-size: 11px; color: var(--mw-muted); white-space: nowrap; }
.mwr-pillar { border-radius: 18px; padding: 22px 16px; text-align: center; background: #F0ECF9; }
.mwr-pillar .lbl { font-size: 12.5px; color: #7C6FA8; margin-bottom: 9px; }
.mwr-pillar .chr { font-family: var(--mw-font-serif); font-size: 30px; font-weight: 700; color: #3A2F63; }
.mwr-layout { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.mwr-main { display: flex; flex-direction: column; gap: 16px; }
.mwr-box { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 22px; padding: 30px 32px; scroll-margin-top: 90px; }
.mwr-box-title { font-family: var(--mw-font-serif); font-size: 23px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; user-select: none; }
.mwr-box-title .l { display: flex; align-items: center; gap: 12px; }
.mwr-box-icon { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg,#8B7BEA,#6C5DD3); color: #FFF6E2; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 16px; flex-shrink: 0; }
/* 원형 한자 아이콘을 대신하는 작은 사각 태그 — 카테고리 색만 담아 심플하게. */
.mwr-title-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 7px; color: #fff; letter-spacing: .2px; margin-right: 9px; vertical-align: middle; white-space: nowrap; flex-shrink: 0; }
.mwr-chevron { font-size: 20px; color: var(--mw-muted); transition: transform .25s ease; flex-shrink: 0; }
.mwr-chevron.is-open { transform: rotate(180deg); }
.mwr-el-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.mwr-el-bar-label { font-size: 13.5px; font-weight: 600; width: 56px; flex-shrink: 0; }
.mwr-el-bar-track { flex: 1; height: 8px; border-radius: 6px; background: #F0EBF9; overflow: hidden; }
.mwr-el-bar-fill { display: block; height: 100%; border-radius: 6px; }
.mwr-tarot-badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 7px; margin-left: 8px; vertical-align: middle; white-space: nowrap; }
.mwr-tarot-badge.up { background: #DEF5EC; color: #1F7A59; }
.mwr-tarot-badge.down { background: #EFEAFB; color: #6C5DD3; }
.mwr-icon-badge-row { display: flex; align-items: center; gap: 18px; margin-bottom: 6px; }
.mwr-icon-badge { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 18px rgba(0,0,0,.12); }
.mwr-icon-badge svg { width: 32px; height: 32px; color: #fff; }
.mwr-oheng-wheel-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
.mwr-oheng-wheel { max-width: 260px; width: 100%; height: auto; }
.mwr-oheng-legend { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--mw-muted); margin-bottom: 22px; }
.mwr-oheng-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mwr-oheng-legend i { width: 14px; height: 2.5px; border-radius: 2px; display: inline-block; }
.mwr-quote { font-family: var(--mw-font-serif); font-size: 26px; line-height: 1.6; color: #3A2F63; padding: 22px 24px; background: #F7F3FF; border-radius: 16px; }
.mwr-months { display: flex; align-items: flex-end; gap: 7px; height: 150px; margin-bottom: 12px; }
.mwr-month { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; }
.mwr-month-bar { width: 100%; border-radius: 8px 8px 4px 4px; }
.mwr-month-label { font-size: 11px; color: var(--mw-muted); }
.mwr-months-note { font-size: 14.5px; line-height: 1.85; color: var(--mw-text-soft); }
.mwr-area { margin-bottom: 4px; }
.mwr-area-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.mwr-area-name { font-size: 15.5px; font-weight: 600; }
.mwr-area-score { font-size: 12.5px; color: var(--mw-muted2); }
.mwr-area-track { flex: 1; height: 7px; border-radius: 6px; background: #F0EBF9; overflow: hidden; display: block; }
.mwr-area-fill { display: block; height: 100%; border-radius: 6px; }
.mwr-area-text { font-size: 14.5px; line-height: 1.8; color: var(--mw-text-soft); }
.mwr-natal-item { padding-bottom: 16px; border-bottom: 1px solid var(--mw-border-soft); }
.mwr-natal-item:last-child { border-bottom: none; padding-bottom: 0; }
.mwr-natal-title { font-size: 15.5px; font-weight: 600; margin-bottom: 8px; color: var(--mw-ink); }
.mwr-natal-text { font-size: 14.5px; line-height: 1.85; color: var(--mw-text-soft); }
.mwr-luck-item { padding: 16px 18px; background: #FBF8F4; border-radius: 14px; }
.mwr-luck-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.mwr-luck-age { font-family: var(--mw-font-serif); font-size: 17px; font-weight: 700; color: var(--mw-purple); }
.mwr-luck-pillar { font-size: 14px; color: var(--mw-ink-soft); }
.mwr-luck-god { font-size: 11.5px; padding: 3px 9px; border-radius: 7px; background: #EFEAFB; color: #6C5DD3; white-space: nowrap; }
.mwr-luck-text { font-size: 14px; line-height: 1.8; color: var(--mw-text-soft); }

/* 길일 택일 전용 3주 캘린더 그리드 — 좋은 날/피할 날을 목록이 아니라
   달력 칸 색으로 한눈에 훑어볼 수 있게 합니다. */
.mwr-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 16px; }
.mwr-cal-cell { aspect-ratio: 1; border-radius: 12px; background: var(--mw-border-softer); color: var(--mw-muted2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; position: relative; }
.mwr-cal-cell .mo { position: absolute; top: 4px; left: 6px; font-size: 9px; color: var(--mw-muted); font-weight: 600; }
.mwr-cal-cell .d { font-family: var(--mw-font-serif); font-size: 16px; font-weight: 700; }
.mwr-cal-cell .w { font-size: 10px; }
.mwr-cal-cell.is-good { background: #DEF5EC; color: #1F7A59; }
.mwr-cal-cell.is-bad { background: #FDE3E2; color: #C0403F; }
.mwr-cal-legend { display: flex; gap: 16px; font-size: 12px; color: var(--mw-muted); flex-wrap: wrap; }
.mwr-cal-legend span { display: flex; align-items: center; gap: 6px; }
.mwr-cal-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
@media (max-width: 480px) {
  .mwr-cal-grid { gap: 5px; }
  .mwr-cal-cell .d { font-size: 13px; }
  .mwr-cal-cell .w { font-size: 8.5px; }
}

.mwr-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 48px); overflow-y: auto; }
.mwr-toc-box { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; padding: 22px; }
.mwr-toc-box .t { font-size: 13px; color: var(--mw-muted); margin-bottom: 14px; }
.mwr-toc-list { display: flex; flex-direction: column; gap: 11px; }
.mwr-toc-list span, .mwr-toc-list a { font-size: 14px; color: var(--mw-text); cursor: pointer; }
.mwr-toc-list a:hover { text-decoration: underline !important; }
.mwr-expiry-box { background: var(--mw-ink); border-radius: 20px; padding: 22px; color: #EDE7FA; }
.mwr-expiry-box .t { font-size: 12px; letter-spacing: 2px; color: #9C8FC4; margin-bottom: 10px; }
.mwr-expiry-box .d { font-family: var(--mw-font-serif); font-size: 24px; color: var(--mw-gold-soft); margin-bottom: 8px; }
.mwr-expiry-box .s { font-size: 13px; color: #B7ACD4; line-height: 1.7; }
.mwr-side button { height: 52px; border-radius: 14px; border: 1px solid #D9CEC1; background: #fff; font-family: inherit; font-size: 14.5px; color: var(--mw-ink-soft); cursor: pointer; }

@media (max-width: 900px) {
  .mwc-form-layout, .mwr-layout { grid-template-columns: 1fr; }
  .mwc-summary, .mwr-side { position: static; max-height: none; }
}

/* ==========================================================================
   My page (mwm- prefix)
   ========================================================================== */
@keyframes mwUpM2 { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }

.mwm-layout { max-width: 1200px; margin: 0 auto; padding: 34px 32px 90px; display: grid; grid-template-columns: 262px 1fr; gap: 32px; align-items: start; }
.mwm-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.mwm-profile { background: linear-gradient(160deg,#FFFCF8,#F4EFFB); border: 1px solid var(--mw-border-softer); border-radius: 22px; padding: 26px 24px; }
.mwm-profile-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.mwm-avatar { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(140deg,#8B7BEA,#6C5DD3); display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 21px; color: #FFF6E2; flex-shrink: 0; }
.mwm-profile-name { font-size: 16.5px; font-weight: 600; }
.mwm-profile-email { font-size: 12.5px; color: var(--mw-muted); margin-top: 3px; }
.mwm-stat-row { display: flex; gap: 8px; }
.mwm-stat { flex: 1; background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 13px; padding: 13px; text-align: center; }
.mwm-stat .n { font-family: var(--mw-font-serif); font-size: 20px; font-weight: 700; }
.mwm-stat .l { font-size: 11.5px; color: var(--mw-muted); margin-top: 3px; }
.mwm-menu { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 22px; padding: 14px; }
.mwm-menu-item { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 13px; cursor: pointer; }
.mwm-menu-item.is-active { background: #F5F0FF; }
.mwm-menu-item.is-active .mwm-menu-label { color: #4B3F7A; }
.mwm-menu-icon { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 14px; flex-shrink: 0; }
.mwm-menu-label { font-size: 14.5px; font-weight: 500; color: var(--mw-text); }
.mwm-menu-count { margin-left: auto; font-size: 12.5px; color: var(--mw-muted5); }
.mwm-saved-saju { background: var(--mw-ink); border-radius: 22px; padding: 22px 24px; color: #EDE7FA; }
.mwm-saved-saju .t { font-size: 11.5px; letter-spacing: 2px; color: #9C8FC4; margin-bottom: 10px; }
.mwm-saved-saju .chars { font-family: var(--mw-font-serif); font-size: 19px; color: var(--mw-gold-soft); margin-bottom: 8px; }
.mwm-saved-saju .desc { font-size: 12.5px; color: #B7ACD4; line-height: 1.7; }

.mwm-main { animation: mwUpM2 .5s ease both; }
.mwm-main-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.mwm-main-head h1 { font-family: var(--mw-font-serif); font-size: 34px; margin: 0; font-weight: 700; letter-spacing: -.8px; }
.mwm-filters { display: flex; gap: 7px; }
.mwm-filter { height: 38px; display: flex; align-items: center; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500; cursor: pointer; background: #fff; color: var(--mw-muted2); border: 1px solid var(--mw-border); }
.mwm-filter.is-active { background: var(--mw-purple-tint); color: var(--mw-purple-dark); border-color: #DCD3FB; }

.mwm-report-row { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; padding: 20px 22px; display: flex; align-items: center; gap: 18px; cursor: pointer; transition: box-shadow .2s ease, border-color .2s ease; text-decoration: none; color: inherit; margin-bottom: 12px; }
.mwm-report-row:hover { border-color: #DCD3FB; box-shadow: 0 16px 34px rgba(34,28,51,.08); }
.mwm-report-icon { width: 64px; height: 64px; border-radius: 17px; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 24px; color: #3E3559; flex-shrink: 0; }
.mwm-report-body { flex: 1; }
.mwm-report-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.mwm-report-cat { font-size: 12px; color: var(--mw-muted4); }
.mwm-report-state { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.mwm-report-name { font-size: 16.5px; font-weight: 600; letter-spacing: -.3px; margin-bottom: 7px; }
.mwm-report-meta { font-size: 13px; color: var(--mw-muted); }
.mwm-report-right { text-align: right; flex-shrink: 0; }
.mwm-report-left { font-size: 13px; color: var(--mw-muted); margin-bottom: 10px; }
.mwm-report-btn { height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid #D9CEC1; background: #fff; font-size: 13.5px; font-weight: 500; color: var(--mw-ink-soft); }
.mwm-report-btn:hover { border-color: var(--mw-purple); color: var(--mw-purple); }

.mwm-orders-table { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; overflow: hidden; }
.mwm-orders-head { display: grid; grid-template-columns: 1.6fr .9fr .8fr .8fr; gap: 16px; padding: 16px 24px; background: #FBF8F4; border-bottom: 1px solid #F1EAE0; font-size: 13px; font-weight: 600; color: var(--mw-muted); }
.mwm-orders-row { display: grid; grid-template-columns: 1.6fr .9fr .8fr .8fr; gap: 16px; padding: 18px 24px; border-bottom: 1px solid #F5EFE7; align-items: center; }
.mwm-orders-row:last-child { border-bottom: none; }
.mwm-orders-row .name { font-size: 15px; font-weight: 500; margin-bottom: 5px; }
.mwm-orders-row .date { font-size: 12.5px; color: var(--mw-muted3); }
.mwm-orders-row .no { font-size: 13px; color: var(--mw-muted2); }
.mwm-orders-row .amount { font-size: 14.5px; font-weight: 600; }
.mwm-orders-row .state { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 20px; justify-self: start; }

.mwm-wish-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.mwm-wish-card { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; padding: 22px; }
.mwm-wish-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mwm-wish-thumb { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 19px; color: #3E3559; flex-shrink: 0; }
.mwm-wish-name { font-size: 15px; font-weight: 600; }
.mwm-wish-cat { font-size: 12.5px; color: var(--mw-muted); margin-top: 3px; }
.mwm-wish-price { margin-left: auto; font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 20px; white-space: nowrap; }
.mwm-wish-action { width: 100%; height: 44px; border-radius: 12px; border: 1px solid #D9CEC1; background: #fff; font-size: 13.5px; color: var(--mw-ink-soft); }

.mwm-settings-box { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; padding: 26px 28px; margin-bottom: 14px; }
.mwm-settings-box .t { font-family: var(--mw-font-serif); font-size: 20px; margin-bottom: 20px; }
.mwm-toggle-row { display: flex; align-items: center; gap: 14px; cursor: pointer; margin-bottom: 14px; }
.mwm-toggle-row:last-child { margin-bottom: 0; }
.mwm-toggle-label { font-size: 15px; font-weight: 500; }
.mwm-toggle-desc { font-size: 13px; color: var(--mw-muted); margin-top: 4px; }
.mwm-toggle-switch { margin-left: auto; width: 48px; height: 28px; border-radius: 20px; position: relative; display: block; flex-shrink: 0; transition: background .2s ease; background: #E2D8CB; }
.mwm-toggle-switch.is-on { background: var(--mw-purple); }
.mwm-toggle-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(34,28,51,.2); transition: left .2s ease; }
.mwm-toggle-switch.is-on .mwm-toggle-knob { left: 23px; }

@media (max-width: 900px) {
  .mwm-layout { grid-template-columns: 1fr; }
  .mwm-side { position: static; }
  .mwm-wish-grid { grid-template-columns: 1fr; }
  .mwm-orders-head, .mwm-orders-row { grid-template-columns: 1.4fr .8fr .7fr; }
  .mwm-orders-head span:nth-child(4), .mwm-orders-row .state { display: none; }
}

/* ==========================================================================
   Free content page (mwf- prefix)
   ========================================================================== */
@keyframes mwUpFC { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
@keyframes mwTwinkleFC { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes mwFloatFC { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.mwf-hero { position: relative; overflow: hidden; background: linear-gradient(172deg,#FBEFE6 0%,#F7F2EC 48%,#F2ECFB 100%); border-bottom: 1px solid var(--mw-border-softer); }
.mwf-hero-glow { position: absolute; top: -100px; right: 60px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFFFFF 0%, #FFF0DC 42%, #FFD9A8 100%); opacity: .65; }
.mwf-hero-inner { position: relative; max-width: 1360px; margin: 0 auto; padding: 52px 32px 46px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
.mwf-badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #FBE0C4; border-radius: 100px; padding: 8px 15px; font-size: 13px; color: var(--mw-free); font-weight: 600; margin-bottom: 22px; }
.mwf-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mw-gold); }
.mwf-hero h1 { font-family: var(--mw-font-serif); font-size: 50px; line-height: 1.3; margin: 0 0 16px; font-weight: 700; letter-spacing: -1.3px; }
.mwf-hero p { font-size: 17px; line-height: 1.8; color: var(--mw-text-soft); margin: 0 0 28px; max-width: 480px; }
.mwf-hero-stats { display: flex; gap: 26px; }
.mwf-hero-stats .num { font-family: var(--mw-font-serif); font-size: 25px; font-weight: 700; color: #332B4D; }
.mwf-hero-stats .lbl { font-size: 13px; color: var(--mw-muted); margin-top: 4px; }

.mwf-widget { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 24px; padding: 26px; box-shadow: 0 24px 54px rgba(34,28,51,.10); animation: mwFloatFC 8s ease-in-out infinite; }
.mwf-widget-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.mwf-widget-icon { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(140deg,#FFE9C7,#FFC978); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mwf-widget-title { font-family: var(--mw-font-serif); font-size: 19px; }
.mwf-widget-sub { font-size: 12.5px; color: var(--mw-muted); margin-top: 2px; }
.mwf-widget-free { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--mw-green); background: var(--mw-green-tint); padding: 5px 10px; border-radius: 20px; }
.mwf-widget-dob { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 9px; }
.mwf-widget-dob-item { height: 48px; border-radius: 12px; border: 1px solid var(--mw-border); background: #FBF8F4; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; font-size: 14.5px; color: #4B4266; cursor: pointer; }
.mwf-widget-cal { display: flex; gap: 8px; margin-bottom: 14px; }
.mwf-widget-cal span { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 13.5px; font-weight: 500; cursor: pointer; background: #FBF8F4; color: var(--mw-muted); border: 1px solid var(--mw-border); }
.mwf-widget-cal span.is-active { background: var(--mw-purple-tint); color: var(--mw-purple-dark); border-color: #DCD3FB; }
.mwf-widget-btn { width: 100%; height: 54px; border-radius: 14px; border: none; background: var(--mw-ink); color: #FFF6E2; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.mwf-widget-btn:hover { background: var(--mw-ink-soft); }

.mwf-daily-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; animation: mwUpFC .5s ease both; }
.mwf-card { border-radius: 20px; padding: 24px; border: 1px solid rgba(34,28,51,.05); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; position: relative; text-decoration: none; color: inherit; display: block; }
.mwf-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(34,28,51,.10); }
.mwf-card-free { position: absolute; top: 20px; right: 20px; font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 20px; background: rgba(255,255,255,.8); color: var(--mw-green); }
.mwf-card-glyph { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.75); display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 21px; color: #3E3559; margin-bottom: 40px; }
.mwf-card-name { font-size: 17.5px; font-weight: 600; letter-spacing: -.3px; }
.mwf-card-desc { font-size: 13.5px; color: var(--mw-muted2); margin-top: 6px; line-height: 1.6; }
.mwf-card-views { font-size: 12.5px; color: var(--mw-muted); margin-top: 14px; }

.mwf-zodiac-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.mwf-zodiac-card { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 18px; padding: 20px 16px; text-align: center; cursor: pointer; transition: transform .2s ease, border-color .2s ease; }
.mwf-zodiac-card:hover { transform: translateY(-4px); border-color: #DCD3FB; }
.mwf-zodiac-icon { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 19px; color: #3E3559; }
.mwf-zodiac-name { font-size: 14.5px; font-weight: 600; margin-bottom: 8px; }
.mwf-zodiac-grade { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 20px; display: inline-block; }

.mwf-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.mwf-tarot-panel { background: var(--mw-ink); border-radius: 24px; padding: 40px 38px; position: relative; overflow: hidden; }
.mwf-tarot-glow { position: absolute; bottom: -90px; right: -50px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle,#40356A 0%, rgba(34,28,51,0) 70%); }
.mwf-tarot-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 3px; color: #C7A7E0; margin-bottom: 14px; }
.mwf-tarot-panel h2 { font-family: var(--mw-font-serif); font-size: 32px; line-height: 1.4; margin: 0 0 14px; color: #FFF6E2; font-weight: 700; letter-spacing: -.8px; }
.mwf-tarot-panel p { font-size: 15.5px; line-height: 1.8; color: #B7ACD4; margin: 0 0 26px; max-width: 380px; }
.mwf-mini-cards { display: flex; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.mwf-mini-card { width: 132px; height: 196px; border-radius: 16px; border: 1px solid rgba(255,255,255,.16); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; transition: transform .3s ease; background: linear-gradient(165deg,#3A3054,#2A2340); }
.mwf-mini-card:hover { transform: translateY(-10px); }
.mwf-mini-card.is-flipped { background: linear-gradient(165deg,#FFF6E2,#EADFFB); }
.mwf-mini-card .no { font-size: 10px; letter-spacing: 2px; color: #8E80BF; }
.mwf-mini-card.is-flipped .no { color: #7C6FA8; }
.mwf-mini-card .title { font-family: var(--mw-font-serif); font-size: 15px; color: #FFD98A; line-height: 1.35; text-align: center; }
.mwf-mini-card.is-flipped .title { font-size: 17px; color: #3A2F63; }
.mwf-mini-card .sub { font-size: 11px; color: #8E80BF; margin-top: 8px; line-height: 1.5; text-align: center; }
.mwf-mini-card.is-flipped .sub { color: #7C6FA8; }

.mwf-side-col { display: flex; flex-direction: column; gap: 16px; }
.mwf-lotto-box { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 24px; padding: 28px; }
.mwf-lotto-title { font-family: var(--mw-font-serif); font-size: 21px; margin-bottom: 16px; }
.mwf-lotto-balls { display: flex; gap: 9px; margin-bottom: 16px; }
.mwf-lotto-ball { flex: 1; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 19px; font-weight: 700; color: #fff; }
.mwf-lotto-note { font-size: 13.5px; line-height: 1.75; color: var(--mw-muted2); }
.mwf-upsell-box { background: var(--mw-purple-tint); border: 1px solid #E4DAFB; border-radius: 24px; padding: 28px; flex: 1; display: flex; flex-direction: column; }
.mwf-upsell-box .t { font-family: var(--mw-font-serif); font-size: 21px; margin-bottom: 10px; }
.mwf-upsell-box .s { font-size: 14.5px; line-height: 1.8; color: #4B3F7A; margin-bottom: 20px; }
.mwf-upsell-box a { margin-top: auto; height: 52px; border-radius: 14px; border: none; background: var(--mw-purple); color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.mwf-upsell-box a:hover { background: var(--mw-purple-dark); }

@media (max-width: 1100px) {
  .mwf-hero-inner { grid-template-columns: 1fr; }
  .mwf-daily-grid { grid-template-columns: repeat(2,1fr); }
  .mwf-zodiac-grid { grid-template-columns: repeat(4,1fr); }
  .mwf-split { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  /* 가장 좁은 폰(아이폰 SE 등)에서 년/월/일 select 안의 숫자가 빠듯해지지
     않도록 위젯 안쪽 여백만 살짝 줄입니다. */
  .mwf-widget { padding: 20px 16px; }
  .mwf-widget-dob-item { padding: 0 9px; font-size: 13.5px; }
}
@media (max-width: 480px) {
  /* 연주·월주·일주·시주 4칸을 한 줄로 유지하되(사주 4기둥 개념이라 2x2로
     쪼개면 의미가 흐려짐), 좁은 폰에서 큰 글자가 칸을 넘치지 않도록
     패딩·폰트만 줄입니다. */
  .mw-pd-pillar, .mwr-pillar { padding: 12px 6px; }
  .mw-pd-pillar .chr, .mwr-pillar .chr { font-size: 22px; }
}
@media (max-width: 560px) {
  .mwf-daily-grid { grid-template-columns: 1fr; }
  .mwf-zodiac-grid { grid-template-columns: repeat(3,1fr); }
}

/* ==========================================================================
   Reviews page (mwv- prefix)
   ========================================================================== */
@keyframes mwUpRV { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }

.mwv-hero { background: linear-gradient(170deg,#F2ECFB 0%,#F7F2EC 100%); border-bottom: 1px solid var(--mw-border-softer); }
.mwv-hero-inner { max-width: 1200px; margin: 0 auto; padding: 42px 32px 34px; display: grid; grid-template-columns: 1fr 420px; gap: 44px; align-items: center; }
.mwv-hero-inner h1 { font-family: var(--mw-font-serif); font-size: 40px; margin: 0 0 12px; font-weight: 700; letter-spacing: -1px; }
.mwv-hero-inner p { font-size: 16px; color: var(--mw-text-soft); margin: 0; }
.mwv-rating-box { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 22px; padding: 24px 26px; box-shadow: 0 18px 40px rgba(34,28,51,.07); display: flex; align-items: center; gap: 18px; }
.mwv-rating-num { font-family: var(--mw-font-serif); font-size: 42px; font-weight: 700; color: #4B3F7A; line-height: 1; text-align: center; }
.mwv-rating-stars { font-size: 12px; color: var(--mw-gold-deep); margin-top: 8px; text-align: center; }
.mwv-dist { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mwv-dist-row { display: flex; align-items: center; gap: 9px; }
.mwv-dist-row .star { font-size: 11.5px; color: var(--mw-muted); width: 20px; }
.mwv-dist-track { flex: 1; height: 6px; border-radius: 6px; background: #F0EBF9; overflow: hidden; display: block; }
.mwv-dist-fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg,#8B7BEA,#6C5DD3); }
.mwv-dist-row .pct { font-size: 11px; color: var(--mw-muted5); width: 36px; text-align: right; }

.mwv-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.mwv-cats { display: flex; gap: 7px; flex-wrap: wrap; }
.mwv-cat { height: 40px; display: flex; align-items: center; padding: 0 15px; border-radius: 12px; font-size: 14px; font-weight: 500; cursor: pointer; background: #fff; color: var(--mw-text); border: 1px solid var(--mw-border); }
.mwv-cat.is-active { background: var(--mw-ink); color: #FFF6E2; border-color: var(--mw-ink); }
.mwv-sorts { margin-left: auto; display: flex; gap: 7px; }
.mwv-sort { height: 38px; display: flex; align-items: center; padding: 0 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500; cursor: pointer; background: #fff; color: var(--mw-muted2); border: 1px solid var(--mw-border); }
.mwv-sort.is-active { background: var(--mw-purple-tint); color: var(--mw-purple-dark); border-color: #DCD3FB; }

.mwv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; animation: mwUpRV .4s ease both; }
.mwv-card { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; }
.mwv-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mwv-card-top .stars { font-size: 12.5px; color: var(--mw-gold-deep); }
.mwv-card-top .date { margin-left: auto; font-size: 11.5px; color: var(--mw-muted3); }
.mwv-tag { display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; padding: 6px 10px; font-size: 11.5px; font-weight: 600; margin-bottom: 14px; align-self: flex-start; }
.mwv-tag .g { font-family: var(--mw-font-serif); font-size: 12px; }
.mwv-text { font-size: 15px; line-height: 1.85; color: #3E3559; margin-bottom: 18px; flex: 1; }
.mwv-reply { background: #FBF8F4; border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.mwv-reply .t { font-size: 11.5px; font-weight: 600; color: var(--mw-purple); margin-bottom: 7px; }
.mwv-reply .b { font-size: 13.5px; line-height: 1.75; color: var(--mw-text-soft); }
.mwv-card-who { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid #F3EDE5; }
.mwv-card-avatar { width: 34px; height: 34px; border-radius: 50%; }
.mwv-card-name { font-size: 13px; font-weight: 500; }
.mwv-card-meta { font-size: 11.5px; color: var(--mw-muted); margin-top: 2px; }
.mwv-helpful { margin-left: auto; font-size: 12px; color: var(--mw-muted5); cursor: pointer; }
.mwv-helpful:hover { color: var(--mw-purple); }

@media (max-width: 1000px) {
  .mwv-hero-inner { grid-template-columns: 1fr; }
  .mwv-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .mwv-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Support / customer center (mws- prefix)
   ========================================================================== */
@keyframes mwUpCS { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }

.mws-hero { background: linear-gradient(170deg,#F2ECFB 0%,#F7F2EC 100%); border-bottom: 1px solid var(--mw-border-softer); }
.mws-hero-inner { max-width: 1080px; margin: 0 auto; padding: 44px 32px 36px; }
.mws-hero-inner h1 { font-family: var(--mw-font-serif); font-size: 38px; margin: 0 0 12px; font-weight: 700; letter-spacing: -1px; }
.mws-hero-inner p { font-size: 16px; color: var(--mw-text-soft); margin: 0 0 24px; }
.mws-search { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 18px; padding: 7px 7px 7px 20px; display: flex; align-items: center; gap: 12px; box-shadow: 0 14px 32px rgba(34,28,51,.06); max-width: 620px; }
.mws-search input { flex: 1; height: 48px; border: none; background: transparent; font-family: inherit; font-size: 15.5px; color: var(--mw-ink); outline: none; }
.mws-search button { height: 48px; padding: 0 22px; border-radius: 13px; border: none; background: var(--mw-ink); color: #FFF6E2; font-family: inherit; font-size: 14.5px; font-weight: 600; }

.mws-shortcuts { max-width: 1080px; margin: 0 auto; padding: 26px 32px 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.mws-shortcut { border-radius: 18px; padding: 20px; cursor: pointer; transition: transform .2s ease; border: 1px solid rgba(34,28,51,.05); }
.mws-shortcut:hover { transform: translateY(-4px); }
.mws-shortcut-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.75); display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 17px; color: #3E3559; margin-bottom: 14px; }
.mws-shortcut-name { font-size: 15.5px; font-weight: 600; margin-bottom: 5px; }
.mws-shortcut-desc { font-size: 13px; color: var(--mw-muted2); line-height: 1.6; }

.mws-layout { max-width: 1080px; margin: 0 auto; padding: 40px 32px 90px; display: grid; grid-template-columns: 1fr 340px; gap: 30px; align-items: start; }
.mws-cats { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.mws-cat { height: 40px; display: flex; align-items: center; padding: 0 16px; border-radius: 12px; font-size: 14.5px; font-weight: 500; cursor: pointer; background: #fff; color: var(--mw-text); border: 1px solid var(--mw-border); }
.mws-cat.is-active { background: var(--mw-ink); color: #FFF6E2; border-color: var(--mw-ink); }
.mws-faq-box { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 22px; overflow: hidden; animation: mwUpCS .4s ease both; }
.mws-faq-item { border-bottom: 1px solid #F5EFE7; }
.mws-faq-item:last-child { border-bottom: none; }
.mws-faq-q { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px; cursor: pointer; }
.mws-faq-q .mark { font-family: var(--mw-font-serif); font-size: 17px; color: var(--mw-purple); line-height: 1.4; }
.mws-faq-q .body { flex: 1; }
.mws-faq-cat { font-size: 12px; color: var(--mw-muted4); margin-bottom: 6px; }
.mws-faq-q-text { font-size: 16px; font-weight: 500; line-height: 1.5; }
.mws-faq-chev { font-size: 12px; color: var(--mw-muted3); padding-top: 20px; }
.mws-faq-a-wrap { padding: 0 24px 24px 52px; }
.mws-faq-a { background: #FBF8F4; border-radius: 14px; padding: 20px 22px; font-size: 15px; line-height: 1.9; color: var(--mw-text); }

.mws-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.mws-contact-box { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 22px; padding: 26px 24px; box-shadow: 0 18px 40px rgba(34,28,51,.07); }
.mws-contact-box .t { font-family: var(--mw-font-serif); font-size: 20px; margin-bottom: 8px; }
.mws-contact-box .s { font-size: 13.5px; color: var(--mw-muted); line-height: 1.7; margin-bottom: 18px; }
.mws-contact-form { display: flex; flex-direction: column; gap: 9px; }
.mws-contact-form select, .mws-contact-form input, .mws-contact-form textarea { height: 48px; border-radius: 12px; border: 1px solid var(--mw-border); background: #FBF8F4; padding: 0 14px; font-family: inherit; font-size: 14.5px; outline: none; width: 100%; }
.mws-contact-form textarea { height: 120px; padding: 13px 14px; resize: none; line-height: 1.7; }
.mws-agree-line { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--mw-text-soft); padding: 4px 0; }
.mws-agree-mark { width: 19px; height: 19px; border-radius: 6px; background: var(--mw-purple); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.mws-contact-submit { height: 52px; border-radius: 13px; border: none; background: var(--mw-purple); color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; }
.mws-contact-submit:hover { background: var(--mw-purple-dark); }
.mws-phone-box { background: var(--mw-ink); border-radius: 22px; padding: 24px; color: #EDE7FA; }
.mws-phone-box .t { font-size: 11.5px; letter-spacing: 2px; color: #9C8FC4; margin-bottom: 12px; }
.mws-phone-box .n { font-family: var(--mw-font-serif); font-size: 26px; color: var(--mw-gold-soft); margin-bottom: 8px; }
.mws-phone-box .s { font-size: 13px; color: #B7ACD4; line-height: 1.75; }
.mws-policy-box { background: var(--mw-bg-alt); border: 1px solid var(--mw-border-softer); border-radius: 22px; padding: 22px 24px; }
.mws-policy-box .t { font-size: 14.5px; font-weight: 600; margin-bottom: 12px; }
.mws-policy-links { display: flex; flex-direction: column; gap: 11px; }
.mws-policy-links a { font-size: 13.5px; color: var(--mw-muted2); text-decoration: none; }
.mws-policy-links a:hover { color: var(--mw-purple); }

@media (max-width: 900px) {
  .mws-shortcuts { grid-template-columns: repeat(2,1fr); }
  .mws-layout { grid-template-columns: 1fr; }
  .mws-side { position: static; }
}

/* ==========================================================================
   Policy / terms (mwp- prefix)
   ========================================================================== */
@keyframes mwUpPO { from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }

.mwp-layout { max-width: 1080px; margin: 0 auto; padding: 38px 32px 90px; display: grid; grid-template-columns: 250px 1fr; gap: 34px; align-items: start; }
.mwp-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.mwp-doc-list { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; padding: 14px; }
.mwp-doc-item { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 13px; cursor: pointer; }
.mwp-doc-item.is-active { background: #F5F0FF; }
.mwp-doc-item.is-active .mwp-doc-label { color: #4B3F7A; }
.mwp-doc-icon { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 13px; flex-shrink: 0; }
.mwp-doc-label { font-size: 14px; font-weight: 500; color: var(--mw-text); line-height: 1.4; }
.mwp-effective-box { background: #FBF8F4; border: 1px solid var(--mw-border-softer); border-radius: 20px; padding: 20px; }
.mwp-effective-box .t { font-size: 12px; color: var(--mw-muted); margin-bottom: 8px; }
.mwp-effective-box .d { font-family: var(--mw-font-serif); font-size: 17px; color: var(--mw-ink-soft); margin-bottom: 14px; }
.mwp-effective-box .s { font-size: 12.5px; color: var(--mw-muted); line-height: 1.75; }
.mwp-prev-btn { height: 46px; border-radius: 12px; border: 1px solid #D9CEC1; background: #fff; font-family: inherit; font-size: 13.5px; color: var(--mw-ink-soft); cursor: pointer; }

.mwp-main { animation: mwUpPO .4s ease both; }
.mwp-main-head { margin-bottom: 26px; }
.mwp-main-head h1 { font-family: var(--mw-font-serif); font-size: 36px; margin: 0 0 12px; font-weight: 700; letter-spacing: -1px; }
.mwp-main-head p { font-size: 15.5px; line-height: 1.8; color: var(--mw-text-soft); margin: 0; }
.mwp-toc-box { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 22px; padding: 16px 20px; margin-bottom: 16px; }
.mwp-toc-box .t { font-size: 12.5px; font-weight: 600; color: var(--mw-muted); margin-bottom: 12px; padding: 0 4px; }
.mwp-toc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.mwp-toc-chips span { height: 34px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; background: #F5F0E9; font-size: 13px; color: var(--mw-text-soft); cursor: pointer; }
.mwp-toc-chips span:hover { background: var(--mw-purple-tint); color: var(--mw-purple-dark); }
.mwp-article-box { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 22px; padding: 40px 44px; }
.mwp-article { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #F5EFE7; }
.mwp-article:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.mwp-article-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.mwp-article-no { font-family: var(--mw-font-serif); font-size: 14px; color: var(--mw-purple); letter-spacing: 1px; }
.mwp-article-title { font-family: var(--mw-font-serif); font-size: 23px; margin: 0; font-weight: 700; letter-spacing: -.4px; }
.mwp-clauses { display: flex; flex-direction: column; gap: 14px; }
.mwp-clause { display: flex; gap: 12px; }
.mwp-clause .n { font-size: 14px; color: var(--mw-muted3); flex-shrink: 0; padding-top: 2px; }
.mwp-clause .t { font-size: 15.5px; line-height: 1.95; color: var(--mw-ink-soft); }
.mwp-note { margin-top: 18px; background: #FBF8F4; border-left: 3px solid var(--mw-purple); border-radius: 0 12px 12px 0; padding: 16px 20px; font-size: 14.5px; line-height: 1.85; color: var(--mw-text-soft); }
.mwp-footnote { font-size: 13.5px; color: var(--mw-muted3); line-height: 1.9; margin-top: 30px; }

@media (max-width: 900px) {
  .mwp-layout { grid-template-columns: 1fr; }
  .mwp-side { position: static; }
  .mwp-article-box { padding: 28px 24px; }
}

/* ==========================================================================
   Campaign / promo page (mwe- prefix)
   ========================================================================== */
@keyframes mwUpEV { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)} }
@keyframes mwTwinkleEV { 0%,100%{opacity:.25} 50%{opacity:1} }
@keyframes mwFloatEV { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-18px) rotate(2deg)} }
@keyframes mwPulseEV { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }

.mwe-topbar { background: var(--mw-ink); color: var(--mw-gold-soft); font-size: 13.5px; text-align: center; padding: 11px 32px; letter-spacing: -.2px; }
.mwe-header { position: sticky; top: 0; z-index: 50; background: rgba(247,242,236,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--mw-border); }
.mwe-header-inner { max-width: 1260px; margin: 0 auto; padding: 0 32px; height: 68px; display: flex; align-items: center; gap: 14px; }
.mwe-header-inner .brand { font-family: var(--mw-font-serif); font-weight: 700; font-size: 21px; letter-spacing: 2px; color: var(--mw-ink); flex-shrink: 0; }
.mwe-header-inner .label { font-size: 14.5px; color: var(--mw-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
  .mwe-header-inner { padding: 0 18px; }
  .mwe-topbar { font-size: 12px; padding: 9px 18px; }
}
.mwe-countdown { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.mwe-countdown-boxes { display: flex; gap: 6px; }
.mwe-countdown-box { background: var(--mw-ink); border-radius: 10px; padding: 7px 11px; text-align: center; min-width: 48px; }
.mwe-countdown-box .v { font-family: var(--mw-font-serif); font-size: 16px; font-weight: 700; color: var(--mw-gold-soft); line-height: 1; }
.mwe-countdown-box .l { font-size: 9px; color: #9C8FC4; margin-top: 3px; }
.mwe-coupon-btn { height: 42px; padding: 0 18px; border-radius: 12px; border: none; background: var(--mw-purple); color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 600; }

.mwe-hero { position: relative; overflow: hidden; background: linear-gradient(168deg,#F2ECFB 0%,#FBEFE6 55%,#F7F2EC 100%); }
.mwe-hero-glow { position: absolute; top: -140px; right: -90px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #FFFFFF 0%, #F3ECFF 38%, #CDBDF7 100%); opacity: .7; animation: mwFloatEV 11s ease-in-out infinite; }
.mwe-hero-inner { position: relative; max-width: 1260px; margin: 0 auto; padding: 70px 32px 74px; animation: mwUpEV .6s ease both; }
.mwe-hero-badge { display: inline-flex; align-items: center; gap: 9px; background: var(--mw-ink); border-radius: 100px; padding: 9px 17px; font-size: 13px; color: var(--mw-gold-soft); font-weight: 600; margin-bottom: 26px; }
.mwe-hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mw-gold); animation: mwTwinkleEV 2s ease-in-out infinite; }
.mwe-hero-year { font-family: var(--mw-font-serif); font-size: 19px; letter-spacing: 9px; color: #6B5CA8; margin-bottom: 20px; }
.mwe-hero h1 { font-family: var(--mw-font-serif); font-size: 74px; line-height: 1.16; margin: 0 0 22px; font-weight: 700; letter-spacing: -2.2px; max-width: 760px; }
.mwe-hero p { font-size: 19px; line-height: 1.75; color: var(--mw-text-soft); margin: 0 0 34px; max-width: 540px; }
.mwe-hero-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mwe-hero-cta { height: 62px; padding: 0 34px; border-radius: 16px; border: none; background: var(--mw-purple); color: #fff; font-family: inherit; font-size: 17.5px; font-weight: 600; cursor: pointer; box-shadow: 0 16px 34px rgba(108,93,211,.34); animation: mwPulseEV 3s ease-in-out infinite; text-decoration: none; display: inline-flex; align-items: center; }
.mwe-hero-price-note { font-size: 15px; color: var(--mw-muted); }
.mwe-hero-price-note b { font-weight: 700; color: var(--mw-red); }

.mwe-benefits { max-width: 1260px; margin: -32px auto 0; padding: 0 32px; position: relative; z-index: 10; }
.mwe-benefits-card { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 24px; box-shadow: 0 22px 55px rgba(34,28,51,.10); padding: 26px 32px; display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.mwe-benefit { display: flex; align-items: center; gap: 14px; }
.mwe-benefit-icon { width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 19px; color: #fff; flex-shrink: 0; }
.mwe-benefit-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.mwe-benefit-desc { font-size: 12.5px; color: var(--mw-muted); line-height: 1.55; }

.mwe-lineup-head { text-align: center; margin-bottom: 34px; }
.mwe-lineup-head h2 { font-family: var(--mw-font-serif); font-size: 40px; margin: 0 0 12px; font-weight: 700; letter-spacing: -1px; }
.mwe-lineup-head p { font-size: 16.5px; color: var(--mw-text-soft); margin: 0; }
.mwe-lineup-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; }
.mwe-hero-product { background: var(--mw-ink); border-radius: 24px; padding: 36px 34px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.mwe-hero-product-glow { position: absolute; bottom: -100px; right: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle,#40356A 0%, rgba(34,28,51,0) 70%); }
.mwe-hero-product-inner { position: relative; flex: 1; display: flex; flex-direction: column; }
.mwe-hero-product-badges { display: flex; gap: 7px; margin-bottom: 20px; flex-wrap: wrap; }
.mwe-hero-product-badges span { font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 8px; }
.mwe-hero-product-title { font-family: var(--mw-font-serif); font-size: 32px; line-height: 1.4; color: #FFF6E2; font-weight: 700; margin-bottom: 14px; }
.mwe-hero-product-desc { font-size: 15px; line-height: 1.8; color: #B7ACD4; margin-bottom: 26px; }
.mwe-hero-includes { display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; }
.mwe-hero-include-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #EDE7FA; }
.mwe-hero-include-check { width: 20px; height: 20px; border-radius: 6px; background: rgba(255,217,138,.18); color: var(--mw-gold-soft); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.mwe-hero-product-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.mwe-hero-product-off { font-size: 19px; font-weight: 700; color: #FF9E9C; }
.mwe-hero-product-now { font-family: var(--mw-font-serif); font-size: 38px; font-weight: 700; color: #fff; letter-spacing: -1px; }
.mwe-hero-product-was { font-size: 15px; color: #8E80BF; text-decoration: line-through; }
.mwe-hero-product-btn { width: 100%; height: 58px; border-radius: 15px; border: none; background: var(--mw-gold-soft); color: #3A2F63; font-family: inherit; font-size: 16.5px; font-weight: 600; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.mwe-side-product { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; color: inherit; }
.mwe-side-product:hover { transform: translateY(-6px); box-shadow: 0 24px 46px rgba(34,28,51,.12); }
.mwe-side-thumb { height: 180px; position: relative; display: flex; align-items: center; justify-content: center; }
.mwe-side-glyph { width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 28px; color: #3E3559; }
.mwe-side-badge { position: absolute; top: 14px; left: 14px; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px; }
.mwe-side-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.mwe-side-meta { font-size: 12.5px; color: var(--mw-muted4); margin-bottom: 9px; }
.mwe-side-name { font-size: 18px; font-weight: 600; line-height: 1.45; letter-spacing: -.3px; margin-bottom: 12px; }
.mwe-side-desc { font-size: 14px; line-height: 1.75; color: var(--mw-muted2); margin-bottom: 20px; }
.mwe-side-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.mwe-side-off { font-size: 15px; font-weight: 700; color: var(--mw-red); }
.mwe-side-now { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.mwe-side-was { font-size: 13.5px; color: var(--mw-muted5); text-decoration: line-through; }
.mwe-side-btn { width: 100%; height: 52px; border-radius: 14px; border: 1px solid #D9CEC1; background: #fff; font-size: 15px; font-weight: 500; color: var(--mw-ink-soft); }
.mwe-side-product:hover .mwe-side-btn { border-color: var(--mw-purple); color: var(--mw-purple); }

.mwe-how-box { background: linear-gradient(160deg,#FFFCF8 0%,#F4EFFB 100%); border: 1px solid var(--mw-border-softer); border-radius: 28px; padding: 48px 46px; }
.mwe-how-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.mwe-step { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; padding: 28px 26px; text-align: center; }
.mwe-step-no { width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 18px; font-weight: 700; color: #fff; }
.mwe-step-title { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.mwe-step-desc { font-size: 14.5px; line-height: 1.8; color: var(--mw-muted2); }

.mwe-final-cta { background: var(--mw-purple); border-radius: 28px; padding: 60px 54px; position: relative; overflow: hidden; text-align: center; }
.mwe-final-glow1 { position: absolute; right: -80px; top: -100px; width: 360px; height: 360px; border-radius: 50%; background: rgba(255,255,255,.12); }
.mwe-final-glow2 { position: absolute; left: -60px; bottom: -120px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.08); }
.mwe-final-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.16); border-radius: 100px; padding: 8px 16px; font-size: 13.5px; color: #fff; font-weight: 600; margin-bottom: 22px; }
.mwe-final-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mw-gold-soft); }
.mwe-final-cta h2 { font-family: var(--mw-font-serif); font-size: 42px; line-height: 1.35; margin: 0 0 16px; color: #fff; font-weight: 700; letter-spacing: -1.1px; }
.mwe-final-cta p { font-size: 17.5px; color: #E4DEFB; margin: 0 0 32px; line-height: 1.7; }
.mwe-final-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.mwe-final-actions .solid { height: 62px; padding: 0 36px; border-radius: 16px; border: none; background: #FFF6E2; color: #3A2F63; font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.mwe-final-actions .solid:hover { background: #fff; }
.mwe-final-actions .ghost { height: 62px; padding: 0 30px; border-radius: 16px; border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; font-family: inherit; font-size: 17px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }

@media (max-width: 1000px) {
  .mwe-benefits-card { grid-template-columns: repeat(2,1fr); }
  .mwe-lineup-grid, .mwe-how-steps { grid-template-columns: 1fr; }
  .mwe-hero h1 { font-size: 46px; }
  .mwe-countdown { display: none; }
}

/* ==========================================================================
   Auxiliary screens: search / empty / payment-failed / 404 (mwx- prefix)
   ========================================================================== */
@keyframes mwUpS { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
@keyframes mwTwinkleS { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes mwFloatS { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.mwx-search-bar { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; padding: 8px 8px 8px 20px; display: flex; align-items: center; gap: 14px; box-shadow: 0 14px 34px rgba(34,28,51,.06); margin-bottom: 26px; }
.mwx-search-bar input { flex: 1; height: 52px; border: none; background: transparent; font-family: inherit; font-size: 17px; color: var(--mw-ink); outline: none; }
.mwx-search-bar button { height: 52px; padding: 0 26px; border-radius: 14px; border: none; background: var(--mw-ink); color: #FFF6E2; font-family: inherit; font-size: 15px; font-weight: 600; }
.mwx-search-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.mwx-search-count { font-size: 14.5px; color: var(--mw-text-soft); }
.mwx-search-count b { font-weight: 600; color: var(--mw-ink); }
.mwx-suggests { display: flex; gap: 7px; margin-left: auto; flex-wrap: wrap; }
.mwx-suggest { height: 36px; display: flex; align-items: center; padding: 0 14px; border-radius: 10px; background: #fff; border: 1px solid var(--mw-border); font-size: 13.5px; color: var(--mw-muted2); text-decoration: none; }
.mwx-suggest:hover { border-color: var(--mw-purple); color: var(--mw-purple); }
.mwx-results-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.mwx-result-card { background: #fff; border-radius: 20px; border: 1px solid var(--mw-border-soft); overflow: hidden; text-decoration: none; color: inherit; display: block; transition: transform .25s ease, box-shadow .25s ease; }
.mwx-result-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(34,28,51,.12); }
.mwx-result-thumb { height: 150px; position: relative; display: flex; align-items: center; justify-content: center; }
.mwx-result-glyph { width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 24px; color: #3E3559; }
.mwx-result-body { padding: 18px; }
.mwx-result-cat { font-size: 12.5px; color: var(--mw-muted4); margin-bottom: 8px; }
.mwx-result-name { font-size: 16px; font-weight: 600; line-height: 1.45; margin-bottom: 12px; min-height: 46px; }
.mwx-result-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.mwx-result-off { font-size: 14px; font-weight: 700; color: var(--mw-red); }
.mwx-result-now { font-size: 18px; font-weight: 700; }

.mwx-center-section { max-width: 720px; margin: 0 auto; padding: 80px 32px 100px; text-align: center; animation: mwUpS .5s ease both; }
.mwx-orb { position: relative; width: 170px; height: 170px; margin: 0 auto 34px; }
.mwx-orb-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFFFFF 0%, #F3ECFF 40%, #DDD1F7 100%); animation: mwFloatS 7s ease-in-out infinite; }
.mwx-orb-star { position: absolute; border-radius: 50%; animation: mwTwinkleS 3.4s ease-in-out infinite; }
.mwx-center-section h1 { font-family: var(--mw-font-serif); font-size: 34px; margin: 0 0 14px; font-weight: 700; letter-spacing: -.8px; }
.mwx-center-section p { font-size: 16.5px; line-height: 1.8; color: var(--mw-text-soft); margin: 0 0 32px; }
.mwx-center-actions { display: flex; gap: 11px; justify-content: center; margin-bottom: 44px; flex-wrap: wrap; }
.mwx-btn-dark { height: 56px; padding: 0 30px; border-radius: 15px; border: none; background: var(--mw-ink); color: #FFF6E2; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; box-shadow: 0 14px 28px rgba(34,28,51,.2); }
.mwx-btn-purple { height: 56px; padding: 0 30px; border-radius: 15px; border: none; background: var(--mw-purple); color: #fff; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; box-shadow: 0 14px 28px rgba(108,93,211,.3); }
.mwx-btn-ghost { height: 56px; padding: 0 26px; border-radius: 15px; border: 1px solid #D6C9BA; background: #fff; color: #3E3559; font-family: inherit; font-size: 16px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.mwx-empty-suggests { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; text-align: left; }
.mwx-empty-suggest { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 18px; padding: 20px; cursor: pointer; text-decoration: none; color: inherit; display: block; }
.mwx-empty-suggest:hover { border-color: #DCD3FB; }
.mwx-empty-suggest-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 17px; color: #3E3559; margin-bottom: 14px; }
.mwx-empty-suggest-name { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.mwx-empty-suggest-desc { font-size: 13px; color: var(--mw-muted2); line-height: 1.6; }

.mwx-fail-section { max-width: 560px; margin: 0 auto; padding: 72px 32px 100px; animation: mwUpS .5s ease both; }
.mwx-fail-head { text-align: center; margin-bottom: 28px; }
.mwx-fail-icon { width: 88px; height: 88px; margin: 0 auto 24px; border-radius: 50%; background: #FDE3E2; display: flex; align-items: center; justify-content: center; }
.mwx-fail-icon span { font-family: var(--mw-font-serif); font-size: 34px; color: #C0403F; }
.mwx-fail-head h1 { font-family: var(--mw-font-serif); font-size: 32px; margin: 0 0 12px; font-weight: 700; letter-spacing: -.8px; }
.mwx-fail-head p { font-size: 16px; line-height: 1.8; color: var(--mw-text-soft); margin: 0; }
.mwx-fail-box { background: #fff; border: 1px solid var(--mw-border-soft); border-radius: 20px; padding: 24px 26px; margin-bottom: 14px; }
.mwx-fail-row { display: flex; justify-content: space-between; font-size: 14.5px; padding: 10px 0; border-bottom: 1px solid #F5EFE7; }
.mwx-fail-row:last-child { border-bottom: none; }
.mwx-fail-row .k { color: var(--mw-muted); }
.mwx-tips-box { background: #FBF8F4; border: 1px solid var(--mw-border-softer); border-radius: 18px; padding: 20px 22px; margin-bottom: 20px; }
.mwx-tips-box .t { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.mwx-tip-row { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.7; color: var(--mw-text-soft); margin-bottom: 9px; }
.mwx-tip-row:last-child { margin-bottom: 0; }
.mwx-tip-row .dot { color: var(--mw-purple); }
.mwx-fail-actions { display: flex; gap: 10px; }
.mwx-fail-actions a { flex: 1; height: 56px; border-radius: 14px; text-decoration: none; display: flex; align-items: center; justify-content: center; font-size: 15.5px; }
.mwx-fail-actions .ghost { border: 1px solid #D9CEC1; background: #fff; color: var(--mw-ink-soft); }
.mwx-fail-actions .solid { border: none; background: var(--mw-purple); color: #fff; font-weight: 600; }
.mwx-fail-note { margin-top: 22px; text-align: center; font-size: 13.5px; color: var(--mw-muted); }

.mwx-404-art { position: relative; width: 210px; height: 180px; margin: 0 auto 32px; }
.mwx-404-orb { position: absolute; left: 6px; top: 14px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFFFFF 0%, #F3ECFF 40%, #CDBDF7 100%); animation: mwFloatS 8s ease-in-out infinite; }
.mwx-404-num { position: absolute; right: 8px; top: 0; font-family: var(--mw-font-serif); font-size: 74px; font-weight: 700; color: #3A2F63; letter-spacing: -3px; }
.mwx-404-star { position: absolute; bottom: 18px; right: 44px; width: 8px; height: 8px; border-radius: 50%; background: var(--mw-gold); animation: mwTwinkleS 3s ease-in-out infinite; }
.mwx-404-links { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.mwx-404-link { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 12px; background: #fff; border: 1px solid var(--mw-border); font-size: 14.5px; color: var(--mw-text); text-decoration: none; }
.mwx-404-link:hover { border-color: var(--mw-purple); color: var(--mw-purple); }
.mwx-404-link .g { font-family: var(--mw-font-serif); font-size: 15px; }

@media (max-width: 700px) {
  .mwx-results-grid { grid-template-columns: repeat(2,1fr); }
  .mwx-empty-suggests { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .mwx-results-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Global mobile polish — 원본 모바일 디자인 기준 좌우 여백(18px) 통일 적용.
   개별 페이지 CSS는 데스크톱 기준 32px 여백으로 작성되어 있어, 사이트 전체
   컨테이너에 여기서 한 번에 모바일 여백을 맞춥니다.
   ========================================================================== */
@media (max-width: 640px) {
  .mw-topbar-inner, .mw-hero-inner, .mw-section, .mw-tarot-inner,
  .mw-footer-grid, .mw-footer-bottom, .mw-crumb, .mw-page-hero-inner,
  .mw-products-layout, .mw-simple-footer, .mw-pd-layout,
  .mwt-step-ask, .mwt-step-pick, .mwt-step-reveal, .mwt-cta-main,
  .mwc-steps, .mwc-form-layout, .mwc-done, .mwc-lookup, .mwc-list,
  .mwr-wrap, .mwm-layout, .mwf-hero-inner, .mwv-hero-inner,
  .mws-hero-inner, .mws-shortcuts, .mws-layout, .mwp-layout,
  .mwe-topbar, .mwe-hero-inner, .mwe-benefits-card,
  .mwx-center-section, .mwx-fail-section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .mw-hero h1, .mwt-step-ask .mwt-h1 { font-size: 34px; }
  .mwe-hero h1 { font-size: 36px; line-height: 1.3; }
  .mwv-hero-inner h1, .mws-hero-inner h1, .mwp-main-head h1,
  .mw-page-hero h1, .mwm-main-head h1 { font-size: 28px; }
  .mwx-404-num { font-size: 54px; }
  .mw-section-head, .mwv-hero-inner, .mws-hero-inner,
  .mwm-main-head, .mwc-form-layout, .mws-layout, .mwp-layout,
  .mw-pd-layout { flex-direction: column; }
  .mw-trust-box { padding: 32px 22px; }
  .mwe-lineup-grid { grid-template-columns: 1fr; }
  .mwc-form-layout, .mws-layout { grid-template-columns: 1fr !important; }
  .mw-quick-cats, .mwv-cats, .mws-cats, .mwf-daily-grid + .mw-tabs {
    flex-wrap: nowrap; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .mw-quick-cats::-webkit-scrollbar, .mwv-cats::-webkit-scrollbar, .mws-cats::-webkit-scrollbar { display: none; }
  .mw-quick-cat, .mwv-cat, .mws-cat { flex-shrink: 0; }
}

/* ===== 타로 리스트 (mwt2-*) — 만월성 홈페이지 디자인 리뉴얼/타로 상품리스트.dc.html 참고 ===== */
.mwt2-body { font-family:'IBM Plex Sans KR',sans-serif; color:#EDE7FA; background:#16122A; overflow-x:hidden; min-height:100vh; margin:0; }
.mwt2-body a { color:#C7A7E0; }

.mwt2-header { position:sticky; top:0; z-index:50; background:rgba(22,18,42,.86); backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.08); }
.mwt2-header-inner { max-width:1320px; margin:0 auto; padding:0 24px; height:70px; display:flex; align-items:center; gap:24px; }
.mwt2-brand { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.mwt2-brand span { font-family:'Gowun Batang',serif; font-weight:700; font-size:20px; letter-spacing:2px; color:#FFF6E2; }
.mwt2-nav { display:flex; gap:22px; font-size:14.5px; color:#A99CC8; overflow-x:auto; white-space:nowrap; }
.mwt2-nav a { color:#A99CC8; text-decoration:none; }
.mwt2-nav a:hover { color:#FFF6E2; }
.mwt2-nav a.is-active { color:#FFD98A; font-weight:500; }
.mwt2-header-actions { margin-left:auto; display:flex; gap:9px; flex-shrink:0; }
.mwt2-btn-ghost { height:40px; padding:0 15px; border-radius:11px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); font-size:13.5px; color:#EDE7FA; text-decoration:none; display:inline-flex; align-items:center; }
.mwt2-btn-ghost:hover { border-color:#FFD98A; color:#FFD98A; }

.mwt2-hero { position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.07); }
.mwt2-orb { position:absolute; border-radius:50%; }
.mwt2-orb1 { top:-180px; left:-120px; width:560px; height:560px; background:radial-gradient(circle,#3A2C6B 0%, rgba(22,18,42,0) 70%); }
.mwt2-orb2 { bottom:-220px; right:-140px; width:620px; height:620px; background:radial-gradient(circle,#4B2C5E 0%, rgba(22,18,42,0) 72%); }
.mwt2-star { position:absolute; width:5px; height:5px; border-radius:50%; background:#FFD98A; animation:mwt2Twinkle 3.6s ease-in-out infinite; }
.mwt2-hero-inner { position:relative; max-width:1320px; margin:0 auto; padding:70px 24px 60px; display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:44px; align-items:center; }
.mwt2-eyebrow-pill { display:inline-flex; align-items:center; gap:9px; border:1px solid rgba(255,217,138,.32); border-radius:100px; padding:8px 16px; font-size:12.5px; color:#FFD98A; letter-spacing:.5px; margin-bottom:24px; }
.mwt2-eyebrow-pill span { width:6px; height:6px; border-radius:50%; background:#FFD98A; display:block; }
.mwt2-hero-h1 { font-family:'Gowun Batang',serif; font-size:clamp(30px,5vw,54px); line-height:1.28; margin:0 0 20px; font-weight:700; letter-spacing:-1.2px; color:#FFF6E2; }
.mwt2-hero-lead { font-size:16px; line-height:1.8; color:#A99CC8; margin:0 0 32px; max-width:480px; }
.mwt2-hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.mwt2-btn-primary { height:56px; padding:0 28px; border-radius:15px; border:none; background:#6C5DD3; color:#fff; font-size:16px; font-weight:600; cursor:pointer; box-shadow:0 14px 30px rgba(108,93,211,.42); text-decoration:none; display:inline-flex; align-items:center; }
.mwt2-btn-primary:hover { background:#7E70E0; }
.mwt2-btn-outline { height:56px; padding:0 24px; border-radius:15px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:#EDE7FA; font-size:16px; text-decoration:none; display:inline-flex; align-items:center; }
.mwt2-btn-outline:hover { border-color:#FFD98A; color:#FFD98A; }

.mwt2-fan-wrap { position:relative; height:320px; display:flex; align-items:center; justify-content:center; }
.mwt2-fan-glow { position:absolute; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle at 36% 30%, rgba(255,255,255,.14) 0%, rgba(108,93,211,.22) 45%, rgba(22,18,42,0) 72%); animation:mwt2Drift 10s ease-in-out infinite; }
.mwt2-fan-card { position:absolute; width:100px; height:154px; border-radius:14px; border:1px solid; box-shadow:0 18px 40px rgba(0,0,0,.4); transform-origin:bottom center; transform:rotate(var(--r)); display:flex; align-items:center; justify-content:center; font-family:'Gowun Batang',serif; font-size:23px; animation-name:mwt2Fan; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
.mwt2-fan-caption { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:13px; color:#8E80BF; letter-spacing:.5px; }

@keyframes mwt2Twinkle { 0%,100%{opacity:.18} 50%{opacity:1} }
@keyframes mwt2Drift { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-20px) rotate(3deg)} }
@keyframes mwt2Fan { 0%,100%{transform:rotate(var(--r)) translateY(0)} 50%{transform:rotate(var(--r)) translateY(-10px)} }

.mwt2-filterbar { position:sticky; top:70px; z-index:40; background:rgba(27,21,51,.92); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.07); }
.mwt2-filterbar-inner { max-width:1320px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mwt2-filter-chips { display:flex; gap:7px; overflow-x:auto; white-space:nowrap; }
.mwt2-chip { height:38px; display:inline-flex; align-items:center; gap:7px; padding:0 14px; border-radius:11px; font-size:13.5px; cursor:pointer; background:rgba(255,255,255,.05); color:#C6BCE0; border:1px solid rgba(255,255,255,.12); flex-shrink:0; }
.mwt2-chip .g { font-family:'Gowun Batang',serif; font-size:13px; }
.mwt2-chip.is-active { background:rgba(255,217,138,.14); color:#FFD98A; border-color:rgba(255,217,138,.42); }
.mwt2-filterbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.mwt2-result-label { font-size:13px; color:#8E80BF; }
.mwt2-sort-toggle { height:38px; display:flex; align-items:center; padding:0 13px; border-radius:11px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); font-size:13px; color:#C6BCE0; cursor:pointer; }

.mwt2-tier { max-width:1320px; margin:0 auto; padding:60px 24px 0; }
.mwt2-tier-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; flex-wrap:wrap; }
.mwt2-tier-kicker { display:flex; align-items:center; gap:10px; margin-bottom:12px; font-size:11.5px; font-weight:600; letter-spacing:3px; }
.mwt2-tier-kicker span { width:26px; height:1px; display:block; }
.mwt2-tier-kicker.gold { color:#FFD98A; }
.mwt2-tier-kicker.gold span { background:#FFD98A; }
.mwt2-tier-kicker.purple { color:#B4A5F0; }
.mwt2-tier-kicker.purple span { background:#8B7BEA; }
.mwt2-tier-kicker.green { color:#8FE0C2; }
.mwt2-tier-kicker.green span { background:#6FD2AE; }
.mwt2-tier-h2 { font-family:'Gowun Batang',serif; margin:0 0 10px; font-weight:700; letter-spacing:-.8px; color:#FFF6E2; }
.mwt2-tier-h2.lg { font-size:clamp(26px,3.6vw,36px); }
.mwt2-tier-h2.md { font-size:clamp(24px,3.2vw,32px); }
.mwt2-tier-h2.sm { font-size:clamp(22px,2.8vw,28px); }
.mwt2-tier-p { font-size:15px; color:#A99CC8; margin:0; }
.mwt2-tier-count { font-size:13.5px; color:#8E80BF; white-space:nowrap; }

.mwt2-premium-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:18px; }
.mwt2-premium-card { position:relative; border-radius:24px; overflow:hidden; background:linear-gradient(150deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 100%); border:1px solid rgba(255,217,138,.22); cursor:pointer; transition:transform .3s ease, border-color .3s ease; display:flex; flex-direction:column; text-decoration:none; }
.mwt2-premium-card:hover { transform:translateY(-7px); border-color:rgba(255,217,138,.5); }
.mwt2-premium-media { height:210px; position:relative; display:flex; align-items:center; justify-content:center; gap:12px; }
.mwt2-premium-badges { position:absolute; top:16px; left:16px; display:flex; gap:6px; }
.mwt2-badge-gold { font-size:11px; font-weight:600; padding:5px 10px; border-radius:8px; background:#FFD98A; color:#2A2145; }
.mwt2-badge-dark { font-size:11px; font-weight:600; padding:5px 10px; border-radius:8px; background:rgba(0,0,0,.32); color:#EDE7FA; }
.mwt2-badge-dark.corner { position:absolute; top:12px; right:12px; padding:4px 9px; font-size:10.5px; }
.mwt2-mini-card { width:60px; height:92px; border-radius:10px; background:linear-gradient(165deg,#FFF6E2,#E3D6FA); border:1px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-family:'Gowun Batang',serif; font-size:17px; color:#3A2F63; box-shadow:0 10px 24px rgba(0,0,0,.3); }
.mwt2-premium-body { padding:24px; flex:1; display:flex; flex-direction:column; }
.mwt2-theme-label { font-size:12px; letter-spacing:1.5px; color:#C7A7E0; margin-bottom:10px; }
.mwt2-premium-title { font-family:'Gowun Batang',serif; font-size:22px; font-weight:700; line-height:1.42; color:#FFF6E2; margin-bottom:12px; letter-spacing:-.4px; }
.mwt2-premium-desc { font-size:14.5px; line-height:1.8; color:#A99CC8; margin-bottom:18px; }
.mwt2-tag-row { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; }
.mwt2-tag { font-size:12px; padding:6px 11px; border-radius:9px; background:rgba(255,255,255,.06); color:#C6BCE0; }
.mwt2-premium-foot { margin-top:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.mwt2-price-gold { font-family:'Gowun Batang',serif; font-size:26px; font-weight:700; color:#FFD98A; letter-spacing:-.5px; white-space:nowrap; }
.mwt2-cta-gold { margin-left:auto; height:48px; padding:0 22px; border-radius:13px; border:1px solid rgba(255,217,138,.4); background:rgba(255,217,138,.1); color:#FFD98A; font-size:14.5px; font-weight:600; display:inline-flex; align-items:center; white-space:nowrap; }
.mwt2-premium-card:hover .mwt2-cta-gold { background:#FFD98A; color:#2A2145; }

.mwt2-theme-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr)); gap:14px; }
.mwt2-theme-card { border-radius:20px; overflow:hidden; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); cursor:pointer; transition:transform .25s ease, border-color .25s ease; display:flex; flex-direction:column; text-decoration:none; }
.mwt2-theme-card:hover { transform:translateY(-6px); border-color:rgba(139,123,234,.55); }
.mwt2-theme-media { height:132px; position:relative; display:flex; align-items:center; justify-content:center; }
.mwt2-theme-glyph { width:56px; height:84px; border-radius:10px; background:linear-gradient(165deg,#FFF6E2,#E3D6FA); border:1px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-family:'Gowun Batang',serif; font-size:19px; color:#3A2F63; box-shadow:0 10px 22px rgba(0,0,0,.28); }
.mwt2-theme-body { padding:18px; flex:1; display:flex; flex-direction:column; }
.mwt2-theme-name { font-size:15.5px; font-weight:600; line-height:1.5; color:#FFF6E2; margin-bottom:10px; letter-spacing:-.2px; min-height:46px; }
.mwt2-theme-desc { font-size:12.5px; line-height:1.7; color:#9C8FC4; margin-bottom:16px; }
.mwt2-theme-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mwt2-theme-foot .mwt2-price-gold { font-size:18px; }
.mwt2-cta-mini { font-size:13px; color:#B4A5F0; white-space:nowrap; }

.mwt2-light-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:10px; }
.mwt2-light-row { display:flex; align-items:center; gap:14px; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); padding:14px 16px; cursor:pointer; transition:border-color .2s ease, background .2s ease; text-decoration:none; }
.mwt2-light-row:hover { border-color:rgba(111,210,174,.5); background:rgba(255,255,255,.06); }
.mwt2-light-icon { width:44px; height:60px; border-radius:9px; border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; font-family:'Gowun Batang',serif; font-size:16px; color:#FFD98A; flex-shrink:0; }
.mwt2-light-mid { flex:1; min-width:0; }
.mwt2-light-top { display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.mwt2-light-theme { font-size:10.5px; letter-spacing:1px; color:#C7A7E0; }
.mwt2-light-cards { font-size:10px; padding:3px 7px; border-radius:6px; background:rgba(255,255,255,.07); color:#9C8FC4; }
.mwt2-light-name { font-size:14.5px; font-weight:500; line-height:1.45; color:#EDE7FA; }
.mwt2-light-right { text-align:right; flex-shrink:0; }
.mwt2-light-price { font-size:16px; font-weight:700; color:#FFD98A; white-space:nowrap; }
.mwt2-light-time { font-size:11.5px; color:#8E80BF; margin-top:4px; }

.mwt2-more-wrap { display:flex; flex-direction:column; align-items:center; gap:14px; margin:36px 0 0; }
.mwt2-more-caption { font-size:13.5px; color:#8E80BF; }
.mwt2-more-btn { height:54px; padding:0 32px; border-radius:14px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:#EDE7FA; font-family:inherit; font-size:15px; cursor:pointer; }
.mwt2-more-btn:hover { border-color:#FFD98A; color:#FFD98A; }

.mwt2-notice { max-width:1320px; margin:0 auto; padding:64px 24px 80px; }
.mwt2-notice-inner { border-radius:24px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(160deg, rgba(108,93,211,.18) 0%, rgba(255,255,255,.02) 100%); padding:32px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:28px; }
.mwt2-notice-icon { width:40px; height:40px; border-radius:12px; background:rgba(255,217,138,.14); display:flex; align-items:center; justify-content:center; font-family:'Gowun Batang',serif; font-size:17px; color:#FFD98A; margin-bottom:14px; }
.mwt2-notice-title { font-size:15.5px; font-weight:600; color:#FFF6E2; margin-bottom:8px; }
.mwt2-notice-desc { font-size:13.5px; line-height:1.8; color:#9C8FC4; }

@media (max-width: 640px) {
  .mwt2-header-inner { gap:14px; }
  .mwt2-nav { gap:14px; font-size:13px; }
  .mwt2-hero-inner { padding:48px 16px 40px; gap:30px; }
  .mwt2-fan-wrap { height:220px; }
  .mwt2-fan-card { width:74px; height:114px; font-size:18px; }
  .mwt2-tier { padding:40px 16px 0; }
  .mwt2-filterbar-inner { padding:12px 16px; }
  .mwt2-notice { padding:48px 16px 60px; }
}

/* ===== 타로 상세 (mwt3-*) — 만월성 홈페이지 디자인 리뉴얼/타로 상품상세.dc.html 참고 ===== */
.mwt3-header { position:sticky; top:0; z-index:50; background:rgba(22,18,42,.86); backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.08); }
.mwt3-header-inner { max-width:1180px; margin:0 auto; padding:0 24px; height:66px; display:flex; align-items:center; gap:12px; }
.mwt3-back { width:36px; height:36px; border-radius:11px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); font-size:16px; color:#EDE7FA; display:flex; align-items:center; justify-content:center; flex-shrink:0; text-decoration:none; }
.mwt3-brand { font-family:'Gowun Batang',serif; font-size:17px; letter-spacing:1.5px; color:#FFF6E2; }
.mwt3-crumb { font-size:13.5px; color:#8E80BF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mwt3-progress-wrap { margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.mwt3-progress-label { font-size:12.5px; color:#9C8FC4; white-space:nowrap; }
.mwt3-progress-track { width:90px; height:5px; border-radius:5px; background:rgba(255,255,255,.12); overflow:hidden; }
.mwt3-progress-fill { height:100%; border-radius:5px; background:linear-gradient(90deg,#8B7BEA,#FFD98A); transition:width .4s ease; }

.mwt3-summary { position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.07); }
.mwt3-summary-inner { position:relative; max-width:1180px; margin:0 auto; padding:46px 24px 40px; }
.mwt3-badges { display:flex; gap:7px; margin-bottom:18px; flex-wrap:wrap; }
.mwt3-badge-grey { font-size:11px; font-weight:600; padding:5px 11px; border-radius:8px; background:rgba(255,255,255,.07); color:#C6BCE0; }
.mwt3-h1 { font-family:'Gowun Batang',serif; font-size:clamp(27px,4.6vw,44px); line-height:1.3; margin:0 0 14px; font-weight:700; letter-spacing:-1.1px; color:#FFF6E2; }
.mwt3-lead { font-size:clamp(14.5px,1.6vw,17px); line-height:1.8; color:#A99CC8; margin:0 0 24px; max-width:560px; }
.mwt3-summary-row { display:flex; align-items:center; gap:clamp(16px,3vw,30px); flex-wrap:wrap; }
.mwt3-price { font-family:'Gowun Batang',serif; font-size:clamp(26px,3.4vw,34px); font-weight:700; color:#FFD98A; letter-spacing:-.6px; white-space:nowrap; }
.mwt3-specs { display:flex; gap:clamp(14px,2.4vw,24px); flex-wrap:wrap; }
.mwt3-spec .k { font-size:11px; color:#8E80BF; margin-bottom:5px; letter-spacing:.5px; }
.mwt3-spec .v { font-size:14px; color:#EDE7FA; font-weight:500; }

.mwt3-steps { max-width:1180px; margin:0 auto; padding:28px 24px 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mwt3-step-item { display:flex; align-items:center; gap:9px; }
.mwt3-step-dot { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.05); color:#8E80BF; border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; flex-shrink:0; }
.mwt3-step-dot.is-on { background:#FFD98A; color:#2A2145; border-color:#FFD98A; }
.mwt3-step-label { font-size:14px; color:#7A6E9E; white-space:nowrap; }
.mwt3-step-label.is-on { color:#EDE7FA; }
.mwt3-step-sep { width:32px; height:1px; background:rgba(255,255,255,.14); display:block; }

.mwt3-step-section { max-width:1180px; margin:0 auto; padding:34px 24px 0; }
.mwt3-step-section.narrow { max-width:640px; }
.mwt3-step-head { text-align:center; margin-bottom:30px; }
.mwt3-kicker { font-size:11.5px; font-weight:600; letter-spacing:3px; color:#C7A7E0; margin-bottom:14px; }
.mwt3-h2 { font-family:'Gowun Batang',serif; font-size:clamp(23px,3.4vw,32px); line-height:1.35; margin:0 0 12px; font-weight:700; letter-spacing:-.8px; color:#FFF6E2; }
.mwt3-step-p { font-size:14.5px; line-height:1.75; color:#A99CC8; margin:0 0 20px; }
.mwt3-step-p.center { max-width:520px; margin-left:auto; margin-right:auto; }

.mwt3-pick-pill { display:inline-flex; align-items:center; gap:12px; border:1px solid rgba(255,217,138,.28); border-radius:100px; padding:10px 20px; }
.mwt3-pick-pill .n { font-family:'Gowun Batang',serif; font-size:20px; font-weight:700; color:#FFD98A; }
.mwt3-pick-pill .s { font-size:13.5px; color:#9C8FC4; }
.mwt3-pick-dots { display:flex; gap:5px; }
.mwt3-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.16); display:block; }
.mwt3-dot.is-on { background:#FFD98A; }

.mwt3-deck { display:grid; grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); gap:10px; max-width:900px; margin:0 auto; }
.mwt3-deck-card { aspect-ratio:.64; border-radius:12px; background:linear-gradient(165deg,#3A3054,#241D3F); border:1.5px solid rgba(255,255,255,.12); cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:'Gowun Batang',serif; font-size:17px; color:#8E80BF; transition:transform .25s ease, border-color .25s ease, background .25s ease, color .25s ease; }
.mwt3-deck-card:hover { transform:translateY(-9px); }
.mwt3-deck-card.is-picked { background:linear-gradient(165deg,#FFF6E2,#E3D6FA); color:#3A2F63; border-color:#FFD98A; transform:translateY(-11px); animation:mwt3Glow 2.6s ease-in-out infinite; }
.mwt3-deck-note { text-align:center; margin-top:26px; font-size:13px; color:#7A6E9E; }

.mwt3-spread-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(116px,150px)); justify-content:center; gap:16px; margin-bottom:22px; }
.mwt3-spread-item { display:flex; flex-direction:column; align-items:center; }
.mwt3-spread-slot { font-size:10.5px; font-weight:600; letter-spacing:2px; color:#8E80BF; margin-bottom:12px; text-align:center; }
.mwt3-spread-face { width:100%; aspect-ratio:.64; border-radius:16px; background:linear-gradient(165deg,#FFF6E2,#E3D6FA); border:1px solid rgba(255,255,255,.55); padding:14px; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 16px 34px rgba(0,0,0,.34); position:relative; overflow:hidden; }
.mwt3-shimmer { position:absolute; top:0; bottom:0; width:60%; background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); animation:mwt3Shimmer 4.6s ease-in-out infinite; }
.mwt3-spread-face .no { position:relative; font-size:10px; letter-spacing:1.5px; color:#7C6FA8; }
.mwt3-spread-face .no.r { text-align:right; }
.mwt3-spread-face .mid { position:relative; text-align:center; }
.mwt3-spread-face .title { font-family:'Gowun Batang',serif; font-size:clamp(17px,2.2vw,22px); color:#3A2F63; line-height:1.32; }
.mwt3-spread-face .ko { font-size:11.5px; color:#7C6FA8; margin-top:7px; }
.mwt3-spread-orient { margin-top:12px; font-size:11.5px; color:#9C8FC4; text-align:center; }

.mwt3-lockpanel { border-radius:24px; border:1px solid rgba(255,217,138,.24); background:linear-gradient(160deg, rgba(255,217,138,.07) 0%, rgba(255,255,255,.02) 100%); padding:clamp(22px,3.4vw,36px); position:relative; overflow:hidden; }
.mwt3-lockpanel-head { position:relative; display:flex; align-items:center; gap:14px; margin-bottom:26px; flex-wrap:wrap; }
.mwt3-lock-icon { width:46px; height:46px; border-radius:14px; background:rgba(255,217,138,.16); border:1px solid rgba(255,217,138,.34); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; }
.mwt3-lockpanel-head .t { font-family:'Gowun Batang',serif; font-size:clamp(18px,2.2vw,22px); color:#FFF6E2; margin-bottom:6px; }
.mwt3-lockpanel-head .s { font-size:13.5px; color:#9C8FC4; }
.mwt3-lockpanel-tag { margin-left:auto; display:flex; align-items:center; gap:8px; background:rgba(0,0,0,.24); border-radius:100px; padding:8px 14px; font-size:12.5px; color:#FFD98A; }
.mwt3-lockpanel-tag span { width:6px; height:6px; border-radius:50%; background:#FFD98A; display:block; }

.mwt3-lockitems { position:relative; display:flex; flex-direction:column; gap:10px; }
.mwt3-lockitem { border-radius:16px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); padding:clamp(16px,2.2vw,20px); display:flex; gap:clamp(12px,2vw,18px); align-items:flex-start; }
.mwt3-lockitem-icon { width:34px; height:34px; border-radius:11px; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
.mwt3-lockitem-body { flex:1; min-width:0; }
.mwt3-lockitem-top { display:flex; align-items:center; gap:9px; margin-bottom:12px; flex-wrap:wrap; }
.mwt3-lockitem-top .slot { font-size:10.5px; font-weight:600; letter-spacing:1.5px; color:#C7A7E0; }
.mwt3-lockitem-top .title { font-size:13.5px; font-weight:500; color:#EDE7FA; }
.mwt3-lockitem-top .length { font-size:11px; color:#7A6E9E; margin-left:auto; white-space:nowrap; }
.mwt3-lockitem-lines { display:flex; flex-direction:column; gap:8px; }
.mwt3-lockitem-lines span { display:block; height:9px; border-radius:6px; background:linear-gradient(90deg, rgba(199,167,224,.26), rgba(199,167,224,.1)); filter:blur(1.4px); }

.mwt3-lockpanel-foot { position:relative; margin-top:26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.mwt3-lockpanel-foot .txt { font-size:13.5px; line-height:1.75; color:#9C8FC4; flex:1; min-width:220px; }
.mwt3-pay-btn { height:56px; padding:0 clamp(22px,3.4vw,32px); border-radius:15px; border:none; background:#FFD98A; color:#2A2145; font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; animation:mwt3Pulse 3.4s ease-in-out infinite; white-space:nowrap; }

.mwt3-restart-wrap { display:flex; justify-content:center; margin-top:24px; }
.mwt3-restart { font-size:13.5px; color:#8E80BF; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:3px; }
.mwt3-restart:hover { color:#FFD98A; }

.mwt3-bridge { border-radius:24px; border:1px solid rgba(255,217,138,.28); background:linear-gradient(160deg, rgba(255,217,138,.09) 0%, rgba(255,255,255,.02) 100%); padding:clamp(26px,4vw,40px); text-align:center; position:relative; overflow:hidden; }
.mwt3-bridge-inner { position:relative; }
.mwt3-bridge-icon { width:66px; height:66px; margin:0 auto 22px; border-radius:20px; background:rgba(255,217,138,.16); border:1px solid rgba(255,217,138,.4); display:flex; align-items:center; justify-content:center; font-size:24px; animation:mwt3Glow2 3s ease-in-out infinite; }
.mwt3-order-box { border-radius:18px; background:rgba(0,0,0,.22); padding:22px; text-align:left; margin:24px 0 26px; }
.mwt3-order-row { display:flex; justify-content:space-between; gap:14px; font-size:14px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.mwt3-order-row .k { color:#8E80BF; }
.mwt3-order-row .v { color:#EDE7FA; font-weight:500; text-align:right; }
.mwt3-order-total { display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; }
.mwt3-order-total span:first-child { font-size:14.5px; font-weight:600; color:#EDE7FA; }
.mwt3-order-total .amt { font-family:'Gowun Batang',serif; font-size:clamp(24px,3vw,28px); font-weight:700; color:#FFD98A; letter-spacing:-.5px; }
.mwt3-checkout-btn { display:block; width:100%; height:58px; line-height:58px; border-radius:15px; border:none; background:#6C5DD3; color:#fff; font-family:inherit; font-size:16.5px; font-weight:600; cursor:pointer; box-shadow:0 14px 30px rgba(108,93,211,.4); margin-bottom:10px; text-decoration:none; }
.mwt3-checkout-btn:hover { background:#7E70E0; }
.mwt3-back-btn { width:100%; height:52px; border-radius:14px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05); color:#EDE7FA; font-family:inherit; font-size:15px; cursor:pointer; }
.mwt3-bridge-note { margin-top:18px; font-size:12.5px; line-height:1.8; color:#7A6E9E; }

.mwt3-info { max-width:1180px; margin:0 auto; padding:56px 24px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; }
.mwt3-info-card { border-radius:20px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); padding:24px; }
.mwt3-info-icon { width:40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-family:'Gowun Batang',serif; font-size:17px; color:#fff; margin-bottom:16px; }
.mwt3-info-title { font-size:16px; font-weight:600; color:#FFF6E2; margin-bottom:9px; }
.mwt3-info-desc { font-size:13.5px; line-height:1.8; color:#9C8FC4; }

.mwt3-guide { max-width:1180px; margin:0 auto; padding:44px 24px 0; }
.mwt3-guide-head { margin-bottom:20px; }
.mwt3-guide-list { border-radius:20px; border:1px solid rgba(255,255,255,.09); overflow:hidden; }
.mwt3-guide-item { display:flex; gap:16px; align-items:flex-start; padding:18px 22px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); }
.mwt3-guide-item:last-child { border-bottom:none; }
.mwt3-guide-item .no { font-family:'Gowun Batang',serif; font-size:14px; color:#FFD98A; width:26px; flex-shrink:0; padding-top:2px; }
.mwt3-guide-item .name { font-size:15px; font-weight:600; color:#EDE7FA; margin-bottom:7px; }
.mwt3-guide-item .desc { font-size:13.5px; line-height:1.75; color:#9C8FC4; }

.mwt3-bar { position:fixed; bottom:0; left:0; right:0; z-index:60; background:rgba(22,18,42,.95); backdrop-filter:blur(14px); border-top:1px solid rgba(255,255,255,.1); padding:12px 24px 18px; }
.mwt3-bar-inner { max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:18px; }
.mwt3-bar-price .c { font-size:11.5px; color:#8E80BF; margin-bottom:4px; }
.mwt3-bar-price .p { font-family:'Gowun Batang',serif; font-size:clamp(17px,2.2vw,21px); font-weight:700; color:#FFD98A; white-space:nowrap; }
.mwt3-bar-btn { margin-left:auto; flex:1; max-width:420px; height:54px; border-radius:14px; border:none; background:#FFD98A; color:#2A2145; font-family:inherit; font-size:clamp(14.5px,1.8vw,16.5px); font-weight:600; cursor:pointer; text-decoration:none; display:flex; align-items:center; justify-content:center; text-align:center; }
.mwt3-bar-btn.is-off { background:rgba(255,255,255,.08); color:#8E80BF; }

@keyframes mwt3Glow { 0%,100%{box-shadow:0 0 0 rgba(255,217,138,0)} 50%{box-shadow:0 0 26px rgba(255,217,138,.42)} }
@keyframes mwt3Glow2 { 0%,100%{box-shadow:0 0 0 rgba(255,217,138,0)} 50%{box-shadow:0 0 26px rgba(255,217,138,.42)} }
@keyframes mwt3Shimmer { from{transform:translateX(-120%)} to{transform:translateX(240%)} }
@keyframes mwt3Pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }

@media (max-width: 640px) {
  .mwt3-header-inner { padding:0 16px; gap:8px; }
  .mwt3-progress-track { width:60px; }
  .mwt3-summary-inner { padding:34px 16px 30px; }
  .mwt3-steps, .mwt3-step-section, .mwt3-info, .mwt3-guide { padding-left:16px; padding-right:16px; }
  .mwt3-deck { grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:7px; }
  .mwt3-bar { padding:10px 16px 14px; }
}

/* ===== 타로 전용 다크 푸터 (mwt2-footer-*) — mwt2/mwt3 다크 배경 페이지에서 사용 ===== */
.mwt2-footer { background:#1B1533; border-top:1px solid rgba(255,255,255,.08); }
.mwt2-footer-grid { max-width:1320px; margin:0 auto; padding:56px 24px 40px; display:grid; grid-template-columns:1.3fr repeat(3,1fr); gap:40px; }
.mwt2-footer-brand { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.mwt2-footer-brand span { font-family:'Gowun Batang',serif; font-size:19px; letter-spacing:2px; color:#FFF6E2; }
.mwt2-footer-info { font-size:13.5px; line-height:2; color:#8E80BF; }
.mwt2-footer-col-title { font-size:14.5px; font-weight:600; margin-bottom:16px; color:#EDE7FA; }
.mwt2-footer-links { display:flex; flex-direction:column; gap:11px; }
.mwt2-footer-links a { font-size:13.5px; color:#9C8FC4; text-decoration:none; }
.mwt2-footer-links a:hover { color:#FFD98A; }
.mwt2-footer-bottom { max-width:1320px; margin:0 auto; padding:22px 24px 40px; border-top:1px solid rgba(255,255,255,.07); font-size:12.5px; color:#7A6E9E; }

@media (max-width: 768px) {
  .mwt2-footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .mwt2-footer-grid { grid-template-columns:1fr; padding:40px 16px 30px; gap:28px; }
  .mwt2-footer-bottom { padding:18px 16px 30px; }
}

/* ==========================================================================
   타로 결과지 (mwtr- prefix) — 사주 결과지(mwr-)와 다른 어두운 분위기.
   타로 상품 리스트·상세 페이지(mwt2-/mwt3-)와 같은 톤으로 이어지도록,
   결제 전 "카드 뽑기" 화면에서 결제 후 "해석"까지 분위기가 끊기지 않게 합니다.
   ========================================================================== */
.mwtr-wrap { max-width: 900px; margin: 0 auto; padding: 40px 32px 90px; position: relative; }
.mwtr-hero { background: linear-gradient(150deg,#2E2350 0%,#3A2C6B 55%,#4B2C5E 100%); border: 1px solid rgba(255,255,255,.1); border-radius: 26px; padding: 38px 40px; margin-bottom: 16px; position: relative; overflow: hidden; }
.mwtr-hero-tag { font-size: 12.5px; font-weight: 600; letter-spacing: 3px; color: #FFD98A; margin-bottom: 14px; position: relative; }
.mwtr-hero-title { font-family: var(--mw-font-serif); font-size: 34px; font-weight: 700; color: #FFF6E2; letter-spacing: -.8px; margin-bottom: 10px; position: relative; }
.mwtr-hero-sub { font-size: 15px; color: #C7A7E0; position: relative; }

.mwtr-layout { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.mwtr-main { display: flex; flex-direction: column; gap: 16px; }
.mwtr-box { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 22px; padding: 30px 32px; backdrop-filter: blur(6px); scroll-margin-top: 90px; }
.mwtr-box-title { font-family: var(--mw-font-serif); font-size: 23px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; user-select: none; color: #FFF6E2; }
.mwtr-box-title .l { display: flex; align-items: center; gap: 12px; }
.mwtr-box-icon { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg,#8B7BEA,#6C5DD3); color: #FFF6E2; display: flex; align-items: center; justify-content: center; font-family: var(--mw-font-serif); font-size: 16px; flex-shrink: 0; }
.mwtr-chevron { font-size: 20px; color: #8E80BF; transition: transform .25s ease; flex-shrink: 0; }
.mwtr-chevron.is-open { transform: rotate(180deg); }
.mwtr-quote { font-family: var(--mw-font-serif); font-size: 24px; line-height: 1.6; color: #FFF6E2; padding: 22px 24px; background: rgba(255,255,255,.05); border-radius: 16px; }
.mwtr-summary-text { font-size: 14.5px; line-height: 1.85; color: #C7BEE0; }

.mwtr-card-row { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.mwtr-card-row:last-child { border-bottom: none; padding-bottom: 0; }
.mwtr-card-face { width: 120px; aspect-ratio: .64; border-radius: 14px; background: linear-gradient(165deg,#FFF6E2,#E3D6FA); border: 1px solid rgba(255,255,255,.55); padding: 10px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 16px 34px rgba(0,0,0,.4); position: relative; overflow: hidden; transition: transform .3s ease; flex-shrink: 0; }
.mwtr-card-face.is-reversed { transform: rotate(180deg); }
.mwtr-card-shimmer { position: absolute; top: 0; bottom: 0; width: 60%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); animation: mwt3Shimmer 4.6s ease-in-out infinite; }
.mwtr-card-face .no { position: relative; font-size: 9px; letter-spacing: 1px; color: #7C6FA8; text-align: center; }
.mwtr-card-face .glyph { position: relative; text-align: center; font-size: 26px; color: #6C5DD3; }
.mwtr-card-face .title { position: relative; text-align: center; font-family: var(--mw-font-serif); font-size: 12.5px; color: #3A2F63; line-height: 1.3; }
.mwtr-card-meta { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.mwtr-card-slot { font-size: 12px; letter-spacing: 1px; color: #9C8FC4; text-transform: uppercase; }
.mwtr-card-name { font-family: var(--mw-font-serif); font-size: 18px; color: #FFF6E2; }
.mwtr-card-badge { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 7px; width: fit-content; }
.mwtr-card-badge.up { background: rgba(111,210,174,.18); color: #6FD2AE; }
.mwtr-card-badge.down { background: rgba(139,123,234,.18); color: #B9A9EE; }
.mwtr-card-desc { font-size: 14px; line-height: 1.8; color: #C7BEE0; margin-top: 4px; }

.mwtr-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; }
.mwtr-toc-box { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: 22px; }
.mwtr-toc-box .t { font-size: 13px; color: #8E80BF; margin-bottom: 14px; }
.mwtr-toc-list { display: flex; flex-direction: column; gap: 11px; }
.mwtr-toc-list a { font-size: 14px; color: #C7A7E0; cursor: pointer; text-decoration: none; }
.mwtr-toc-list a:hover { color: #FFD98A; }
.mwtr-expiry-box { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 22px; color: #EDE7FA; }
.mwtr-expiry-box .t { font-size: 12px; letter-spacing: 2px; color: #9C8FC4; margin-bottom: 10px; }
.mwtr-expiry-box .d { font-family: var(--mw-font-serif); font-size: 24px; color: #FFD98A; margin-bottom: 8px; }
.mwtr-expiry-box .s { font-size: 13px; color: #B7ACD4; line-height: 1.7; }
.mwtr-side button { height: 52px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #EDE7FA; font-family: inherit; font-size: 14.5px; cursor: pointer; }
.mwtr-side button:hover { border-color: #FFD98A; color: #FFD98A; }

@media (max-width: 900px) {
  .mwtr-layout { grid-template-columns: 1fr; }
  .mwtr-side { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .mwtr-wrap { padding: 32px 18px 80px; }
  .mwtr-hero { padding: 28px 22px; }
  .mwtr-box { padding: 22px 18px; }
  .mwtr-card-row { grid-template-columns: 84px 1fr; gap: 14px; }
  .mwtr-card-face { width: 84px; }
  .mwtr-card-face .title { font-size: 10.5px; }
  .mwtr-card-face .glyph { font-size: 19px; }
}