/* ══════════════════════════════════════════════
   쏙운세 — ssokunse.com
   ══════════════════════════════════════════════ */
:root{
  --ink:#3b2f5c; --ink-2:#6a5d88; --ink-3:#8d84a6;
  --purple:#6f5ca8; --purple-deep:#4b3d78; --lilac:#a891d6; --lilac-soft:#cdb6e6;
  --gold-soft:#f0d4a4; --peach:#eeb5ab;
  --card:#fff; --line:#ece3f3;
  --radius:18px; --radius-lg:24px;
  --shadow-sm:0 2px 10px rgba(90,66,140,.06);
  --shadow:0 10px 30px rgba(90,66,140,.10);
  --shadow-lg:0 22px 60px rgba(75,61,120,.18);
  --wrap:1180px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0; color:var(--ink); line-height:1.6; letter-spacing:-.01em;
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  background:
    radial-gradient(1200px 700px at 12% 6%, #fdeee9 0%, transparent 60%),
    radial-gradient(1000px 800px at 88% 20%, #ece2f7 0%, transparent 62%),
    linear-gradient(180deg,#fdf5f3 0%,#f4edf8 45%,#f6ecf1 100%);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
ul,ol{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; line-height:1.3; letter-spacing:-.025em; }
p{ margin:0; }
.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  padding:14px 30px; border-radius:999px; font-weight:700; font-size:15px; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn:disabled{ opacity:.6; cursor:progress; transform:none; }
.btn-peach{ background:linear-gradient(135deg,#f8d6cd,#eeb0a5); color:#7a4a48; box-shadow:0 8px 18px rgba(228,157,146,.35); }
.btn-purple{ background:linear-gradient(135deg,#6f5ca8,#5a4a90); color:#fff; box-shadow:0 10px 24px rgba(91,74,144,.32); }

/* ── 헤더 ── */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(253,247,246,.82); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(233,214,226,.7); transition:box-shadow .25s, background .25s;
}
.site-header.scrolled{ box-shadow:0 6px 24px rgba(120,95,160,.10); background:rgba(253,247,246,.94); }
.header-inner{ display:flex; align-items:center; gap:24px; height:68px; }
.logo{ display:flex; align-items:flex-start; gap:2px; margin-right:auto; }
.logo-text{
  font-size:23px; font-weight:800; letter-spacing:-.04em;
  background:linear-gradient(120deg,#4b3d78,#7b5ea8 60%,#b07f9e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.logo-mark{ width:26px; height:26px; margin-top:-4px; }
.nav{ display:flex; gap:30px; }
.nav a{ position:relative; font-size:15.5px; font-weight:600; color:#4a3d6b; padding:6px 0; }
.nav a::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--purple),var(--peach));
  transform:translateX(-50%); transition:width .22s;
}
.nav a:hover{ color:var(--purple); } .nav a:hover::after{ width:100%; }
.nav-toggle{ display:none; width:40px; height:36px; padding:8px; }
.nav-toggle span{ display:block; height:2px; border-radius:2px; background:#5b4a86; margin:4px 0; transition:.25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ── 히어로 ── */
.hero{
  position:relative; overflow:hidden; padding:48px 0 56px;
  background:
    radial-gradient(760px 520px at 22% 42%, rgba(150,118,200,.50) 0%, transparent 66%),
    radial-gradient(700px 470px at 78% 22%, rgba(252,231,227,.80) 0%, transparent 60%),
    linear-gradient(168deg,#f8edf0 0%,#e7d9f1 30%,#cbb8e4 58%,#ad95d2 84%,#a189c9 100%);
}
.hero-grid{ position:relative; display:grid; grid-template-columns:1fr 1.06fr; gap:36px; align-items:center; }
.hero-art{ display:flex; justify-content:center; }
.zodiac{ width:min(100%,500px); filter:drop-shadow(0 0 40px rgba(255,225,190,.35)); }
.zodiac-signs{ font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",serif; }
.branch-signs{ font-family:"Malgun Gothic","맑은 고딕","Batang",serif; }
.spin-slow{ animation:spin 120s linear infinite; }
.spin-rev{ animation:spin 90s linear infinite reverse; }
.sunburst{ animation:spin 200s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.planet{ animation:float 9s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

.hero-copy h1{
  font-size:clamp(28px,3.4vw,44px); font-weight:800; letter-spacing:-.045em;
  color:#33265c; text-shadow:0 2px 18px rgba(255,255,255,.45); margin-bottom:14px;
}
.hero-sub{ font-size:16.5px; color:#4b3f6e; line-height:1.75; }

/* ── 입력 카드 ── */
.ask-card{
  margin-top:24px; padding:20px 22px 22px; border-radius:var(--radius-lg);
  background:linear-gradient(150deg,rgba(78,64,116,.90),rgba(60,48,94,.92));
  border:1px solid rgba(255,255,255,.16); box-shadow:var(--shadow-lg); backdrop-filter:blur(10px);
}
.ask-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ask-head h2{ font-size:17px; font-weight:700; color:#fdf6f0; }
.ask-note{ font-size:12.5px; color:#cbbde4; }
.ask-fields{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field>span{ font-size:12.5px; color:#d3c7ea; font-weight:600; padding-left:2px; }
.field input,.field select{
  width:100%; padding:11px 12px; border-radius:11px;
  border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.94);
  color:#3b2f5c; font-size:14.5px; font-weight:600; font-family:inherit;
  transition:border-color .18s, box-shadow .18s;
}
.field input:focus,.field select:focus{
  outline:none; border-color:#c7a9e6; box-shadow:0 0 0 3px rgba(199,169,230,.35);
}
.ask-partner{ margin-top:14px; padding-top:14px; border-top:1px dashed rgba(255,255,255,.25); }
.partner-label{ font-size:12.5px; font-weight:700; color:#f0d4a4; margin-bottom:9px; }
.ask-submit{ width:100%; margin-top:16px; padding:14px; }
.ask-privacy{ margin-top:12px; font-size:11.5px; line-height:1.6; color:#c3b6de; }
.ask-privacy a{ color:#e8d5ef; text-decoration:underline; }

/* ── 상품 ── */
.section{ padding:60px 0; }
.section-title{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:34px;
  font-size:clamp(21px,2.4vw,29px); font-weight:800; color:#3a2d63;
}
.section-title .deco{ font-style:normal; color:#e0ae62; font-size:.65em; opacity:.75; }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.product{
  position:relative; width:100%; text-align:center; padding:26px 18px 24px;
  background:linear-gradient(170deg,#fffdfd,#fbf5f9);
  border:1px solid rgba(255,255,255,.9); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); transition:transform .24s, box-shadow .24s, border-color .24s;
}
.product:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.product.on{ border-color:#d9b8e0; box-shadow:0 0 0 2px rgba(191,150,214,.35), var(--shadow); }
.p-ico{ display:grid; place-items:center; width:62px; height:62px; margin:0 auto 14px; border-radius:50%;
  background:linear-gradient(160deg,#f6efff,#efe4fa); }
.p-ico svg{ width:32px; height:32px; fill:none; stroke:#7a63b4; stroke-width:1.8; }
.product b{ display:block; font-size:18px; font-weight:800; color:#37295f; margin-bottom:6px; }
.product i{ font-style:normal; font-size:13px; color:var(--ink-2); }
.p-badge{
  position:absolute; top:14px; right:14px; font-style:normal;
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px;
  background:linear-gradient(135deg,#eeb5ab,#e39b93); color:#fff;
}
.p-error{ grid-column:1/-1; text-align:center; padding:40px; color:var(--ink-3); }

/* ── 푸터 ── */
.site-footer{ padding:26px 0; background:#3d3265; color:#b9adda; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.site-footer nav{ display:flex; gap:20px; font-size:13.5px; flex-wrap:wrap; }
.site-footer nav a:hover{ color:#fff; }
.site-footer p{ font-size:12.5px; color:#8d81b0; }

/* ── 모달 ── */
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(45,32,75,.55); backdrop-filter:blur(4px); }
.modal-panel{
  position:relative; width:min(100%,560px); max-height:88vh; overflow-y:auto;
  padding:34px 32px; border-radius:26px;
  background:linear-gradient(170deg,#fffdfd,#f7effa); box-shadow:0 30px 80px rgba(45,32,75,.4);
  animation:pop .28s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{ from{ opacity:0; transform:translateY(18px) scale(.96); } }
.modal-x{ position:absolute; top:16px; right:18px; width:32px; height:32px; border-radius:50%;
  color:#8d84a6; font-size:15px; transition:background .18s; }
.modal-x:hover{ background:#f0e8f6; }

.res-head{ text-align:center; margin-bottom:20px; }
.res-sub{ font-size:13px; color:var(--ink-3); }
.res-head h3{ font-size:22px; font-weight:800; margin:6px 0 12px; color:#33265c; }
.res-tags{ display:flex; justify-content:center; gap:7px; flex-wrap:wrap; }
.res-tags span{ padding:5px 13px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:linear-gradient(135deg,#efe6f8,#f9e9ee); color:#6a5d88; }

.res-pair{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:18px; }
.res-pair div{ text-align:center; padding:10px 16px; border-radius:14px; background:#fff; border:1px solid var(--line); }
.res-pair b{ display:block; font-size:14px; color:#33265c; }
.res-pair i{ font-style:normal; font-size:11.5px; color:var(--ink-3); }
.pair-x{ font-size:18px; color:var(--lilac); font-weight:700; }

.res-score{
  display:grid; place-content:center; justify-items:center; gap:3px;
  margin:20px auto; width:132px; height:132px; border-radius:50%;
  background:conic-gradient(from -90deg,#a58fd0 var(--deg,0deg),#ece3f3 0); position:relative;
}
.res-score::before{ content:""; position:absolute; inset:11px; border-radius:50%;
  background:linear-gradient(160deg,#fffdfd,#f6eefa); }
.res-score b,.res-score i{ position:relative; }
.res-score b{ font-size:34px; font-weight:800; color:#4b3d78; letter-spacing:-.04em; line-height:1; }
.res-score i{ font-style:normal; font-size:11.5px; color:var(--ink-3); line-height:1.2; }

.res-quote{ padding:16px 18px; border-radius:15px; margin-bottom:20px;
  background:linear-gradient(140deg,#f4ecfa,#fbeef2);
  font-size:14.5px; line-height:1.75; color:#4b3f6e; text-align:center; }

.res-block{ margin-bottom:22px; }
.res-block h4{ font-size:13px; font-weight:800; color:#7a63b4; margin-bottom:10px;
  display:flex; align-items:center; gap:8px; }
.res-block h4::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,#e2d7ee,transparent); }
.res-block p{ font-size:14px; line-height:1.8; color:#4b3f6e; margin-bottom:9px; }
.res-block p:last-child{ margin-bottom:0; }

/* 타로 카드 */
.tarot-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:22px; }
.tarot-card{
  padding:14px 8px 12px; border-radius:14px; text-align:center;
  background:linear-gradient(165deg,#4b3d78,#3b2f66); color:#f0e6d6;
  border:1px solid rgba(240,212,164,.35);
}
.tarot-card.rev{ background:linear-gradient(165deg,#5c4a8c,#463a72); }
.tarot-card.rev b::after{ content:" ↻"; font-size:11px; color:#f0d4a4; }
.t-pos{ display:block; font-size:10.5px; color:#c3b1de; margin-bottom:6px; }
.t-num{ display:block; font-size:11px; color:#f0d4a4; font-weight:700; }
.tarot-card b{ display:block; font-size:14.5px; font-weight:800; margin:3px 0 2px; }
.tarot-card i{ font-style:normal; font-size:10px; color:#b3a3d0; }

.res-lucky{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:20px; }
.res-lucky div{ padding:13px 8px; border-radius:14px; text-align:center; background:#fff; border:1px solid var(--line); }
.res-lucky span{ display:block; font-size:11px; color:var(--ink-3); margin-bottom:4px; }
.res-lucky b{ font-size:15px; font-weight:800; color:#4b3d78; }

.res-foot{ display:flex; gap:10px; }
.res-foot .btn{ flex:1; padding:13px; border-radius:13px; }
.res-note{ margin-top:14px; font-size:11.5px; color:var(--ink-3); text-align:center; line-height:1.6; }
.res-note a{ color:var(--purple); text-decoration:underline; }

.res-loading{ text-align:center; padding:34px 8px 22px; }
.res-loading h3{ font-size:18px; font-weight:800; color:#33265c; margin-bottom:10px; }
.res-loading p{ font-size:13.5px; color:var(--ink-3); line-height:1.7; }
.res-spin{ display:flex; justify-content:center; gap:9px; margin-bottom:22px; }
.res-spin span{ width:11px; height:11px; border-radius:50%;
  background:linear-gradient(135deg,#a891d6,#eeb5ab); animation:bounce 1.3s ease-in-out infinite; }
.res-spin span:nth-child(2){ animation-delay:.18s; }
.res-spin span:nth-child(3){ animation-delay:.36s; }
@keyframes bounce{ 0%,80%,100%{ transform:translateY(0); opacity:.45; } 40%{ transform:translateY(-11px); opacity:1; } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* ── 반응형 ── */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ order:2; }
  .zodiac{ width:min(70%,380px); }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
  .nav{
    position:absolute; top:68px; left:0; right:0; flex-direction:column; gap:0;
    padding:8px 20px 16px; background:rgba(253,247,246,.98);
    border-bottom:1px solid var(--line); box-shadow:0 12px 30px rgba(120,95,160,.14); display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:13px 0; border-bottom:1px solid #f2eaf4; }
  .nav a::after{ display:none; }
  .nav-toggle{ display:block; }
  .header-inner{ position:relative; }
}
@media (max-width:620px){
  .ask-fields{ grid-template-columns:repeat(2,1fr); }
  .product-grid{ grid-template-columns:1fr; }
  .section{ padding:44px 0; }
  .modal-panel{ padding:28px 20px; }
  .res-lucky{ grid-template-columns:1fr; }
  .tarot-row{ grid-template-columns:1fr; }
  .footer-inner{ justify-content:center; text-align:center; }
}

/* ── 로그인 · 마이페이지 ── */
.auth-box{ display:flex; align-items:center; gap:8px; }
.login-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 15px; border-radius:999px; font-size:13.5px; font-weight:700;
  transition:transform .15s, filter .15s;
}
.login-btn:hover{ transform:translateY(-1px); filter:brightness(1.03); }
.login-kakao{ background:#FEE500; color:#3C1E1E; }
.login-google{ background:#fff; color:#3c4043; border:1px solid #dadce0; }
.auth-me{ display:flex; align-items:center; gap:9px; font-size:13.5px; }
.auth-me b{ color:#4b3d78; font-weight:700; }
.auth-me button{ font-size:12.5px; color:var(--ink-3); text-decoration:underline; }
.auth-me button:hover{ color:var(--purple); }

.my-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px 26px; box-shadow:var(--shadow-sm); }
.my-head{ display:flex; align-items:center; gap:12px; padding-bottom:16px;
  border-bottom:1px solid var(--line); margin-bottom:16px; }
.my-head b{ font-size:17px; color:#33265c; }
.my-head i{ font-style:normal; font-size:12.5px; color:var(--ink-3); }
.my-list{ display:grid; gap:8px; }
.my-list li{ display:flex; align-items:center; gap:12px; padding:12px 14px;
  border-radius:12px; background:#faf7fd; border:1px solid var(--line); font-size:13.5px; }
.my-list li b{ color:#4b3d78; }
.my-list .my-when{ margin-left:auto; color:var(--ink-3); font-size:12px; white-space:nowrap; }
.my-empty{ padding:26px; text-align:center; color:var(--ink-3); }

/* 가격 배지 */
.p-price{ display:block; margin-top:10px; font-size:13px; font-weight:700; color:var(--purple); }
.p-price s{ color:var(--ink-3); font-weight:500; margin-right:6px; }
.p-free{ color:#2f7a5e; }
.p-note{ color:#7a63b4; font-weight:700; }

@media (max-width:820px){
  .auth-box{ order:2; margin-left:auto; margin-right:8px; }
  .login-btn{ padding:7px 12px; font-size:12.5px; }
}

/* 상품 전용 추가 입력 */
.ask-extra{ margin-top:14px; }
.field-full{ grid-column:1 / -1; }
.field textarea{
  width:100%; padding:11px 12px; border-radius:11px; resize:vertical; min-height:74px;
  border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.94);
  color:#3b2f5c; font-size:14.5px; font-family:inherit; line-height:1.6;
}
.field textarea:focus{ outline:none; border-color:#c7a9e6; box-shadow:0 0 0 3px rgba(199,169,230,.35); }

/* ── 무료 만세력 ── */
.ask-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.ask-manse{ background:rgba(255,255,255,.16); color:#f3ecfa; border:1px solid rgba(255,255,255,.4);
  padding:14px; font-size:14.5px; }
.ask-manse:hover{ background:rgba(255,255,255,.26); }
.ask-submit{ margin-top:0; }

.manse-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 28px; box-shadow:var(--shadow-sm); }
.mn-head{ text-align:center; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:20px; }
.mn-head b{ font-size:19px; color:#33265c; }
.mn-head i{ display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:5px; }

.mn-pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:440px; margin:0 auto 14px; }
.mn-pillar{ text-align:center; padding:12px 6px 10px; border-radius:14px;
  background:linear-gradient(165deg,#4b3d78,#3b2f66); color:#f0e6d6;
  border:1px solid rgba(240,212,164,.3); }
.mn-label{ display:block; font-size:10.5px; color:#c3b1de; margin-bottom:6px; }
.mn-gan{ display:block; font-size:26px; font-weight:800; line-height:1.15; color:#f6dcc4; }
.mn-ji{ display:block; font-size:26px; font-weight:800; line-height:1.15; color:#ecd0be; }
.mn-pillar i{ display:block; font-style:normal; font-size:11px; color:#b3a3d0; margin-top:5px; }
.mn-master{ text-align:center; font-size:13.5px; color:var(--ink-2); margin-bottom:22px; }
.mn-master b{ color:var(--purple-deep); font-size:15px; }

.mn-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.mn-box{ background:#faf7fd; border:1px solid var(--line); border-radius:14px; padding:16px; }
.mn-box h4{ font-size:12.5px; font-weight:800; color:var(--purple); margin-bottom:12px; }

.mn-elems{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; align-items:end; }
.mn-elem{ text-align:center; }
.mn-bar{ height:56px; display:flex; align-items:flex-end; justify-content:center; }
.mn-fill{ width:16px; border-radius:5px 5px 0 0; min-height:4px; }
.mn-elem b{ display:block; font-size:13px; color:#33265c; margin-top:5px; }
.mn-elem i{ font-style:normal; font-size:11px; color:var(--ink-3); }

.mn-gods{ display:grid; gap:5px; }
.mn-gods li{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-2); }
.mn-gods b{ color:#4b3d78; }
.mn-daeun{ display:grid; gap:5px; max-height:190px; overflow-y:auto; }
.mn-daeun li{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-2); }
.mn-daeun b{ color:#4b3d78; }
.mn-daeun i{ font-style:normal; color:var(--ink-3); font-size:11.5px; }

.mn-warn{ margin-top:16px; padding:11px 14px; border-radius:11px;
  background:#fff6ec; border:1px solid #f0dcc2; color:#7a5c30; font-size:12.5px; }
.mn-cta{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); text-align:center; }
.mn-cta p{ font-size:14.5px; color:var(--ink-2); margin-bottom:14px; }
.mn-cta b{ color:#33265c; }
.mn-note{ margin-top:14px; font-size:11.5px; color:var(--ink-3); text-align:center; }

@media (max-width:820px){
  .mn-grid{ grid-template-columns:1fr; }
  .ask-actions{ grid-template-columns:1fr; }
}

/* ── 마이페이지 ── */
.my-login{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:34px 26px; text-align:center; }
.my-login p{ font-size:14.5px; color:var(--ink-2); margin-bottom:18px; }
.my-login-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.my-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:22px 26px; margin-bottom:14px; }
.my-profile b{ font-size:18px; color:#33265c; }
.my-profile i{ display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:4px; }
.my-candy{ text-align:right; padding:12px 20px; border-radius:16px;
  background:linear-gradient(150deg,#4b3d78,#3b2f66); color:#f0e6d6; }
.my-candy span{ display:block; font-size:11.5px; color:#c3b1de; }
.my-candy b{ font-size:26px; font-weight:800; letter-spacing:-.03em; }
.my-candy i{ display:block; font-style:normal; font-size:10.5px; color:#a99cd0; }

.my-tabs{ display:flex; gap:6px; overflow-x:auto; margin-bottom:14px; padding-bottom:4px; }
.my-tabs button{ white-space:nowrap; padding:9px 15px; border-radius:999px; font-size:13.5px;
  font-weight:600; color:var(--ink-2); background:#fff; border:1px solid var(--line); }
.my-tabs button.on{ background:linear-gradient(135deg,#6f5ca8,#5a4a90); color:#fff; border-color:transparent; }

.my-panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px 26px; }
.my-list{ display:grid; gap:8px; }
.my-list li{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 14px; border-radius:12px; background:#faf7fd; border:1px solid var(--line); font-size:13.5px; }
.my-list b{ color:#4b3d78; }
.my-list b.plus{ color:#2f7a5e; } .my-list b.minus{ color:#a44; }
.my-list .my-when{ margin-left:auto; color:var(--ink-3); font-size:12px; white-space:nowrap; }
.my-badge{ padding:3px 9px; border-radius:99px; font-size:11px; font-weight:700; }
.my-badge.b-paid{ background:#e6f5ee; color:#2f7a5e; }
.my-badge.b-ready{ background:#efe8fa; color:#6a58a0; }
.my-badge.b-failed,.my-badge.b-amount_mismatch{ background:#fdeded; color:#a44; }
.my-reply{ width:100%; margin-top:8px; padding:10px 12px; border-radius:9px;
  background:#fff; border:1px solid var(--line); font-size:13px; color:var(--ink-2); }
.my-empty{ padding:30px; text-align:center; color:var(--ink-3); font-size:13.5px; }
.my-sub{ font-size:13px; font-weight:800; color:var(--purple); margin:22px 0 10px; }

.my-form{ display:grid; gap:9px; max-width:420px; margin-bottom:10px; }
.my-form label{ font-size:12.5px; font-weight:700; color:#4e416f; }
.my-form input,.my-form textarea{ padding:11px 12px; border:1px solid var(--line);
  border-radius:10px; font-family:inherit; font-size:14px; color:var(--ink); }
.my-form input:focus,.my-form textarea:focus{ outline:none; border-color:var(--lilac);
  box-shadow:0 0 0 3px rgba(168,145,214,.2); }
.my-form .btn{ padding:12px; border-radius:11px; }
.my-hint{ font-size:12px; color:var(--ink-3); line-height:1.65; }
.my-danger{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.my-danger h4{ font-size:14px; color:#a44; margin-bottom:8px; }
.btn-danger{ background:linear-gradient(135deg,#c98080,#b96a6a); color:#fff; }
.mono{ font-family:ui-monospace,Consolas,monospace; }

@media (max-width:620px){
  .my-top{ flex-direction:column; align-items:stretch; }
  .my-candy{ text-align:left; }
}

/* ── 캔디 충전 ── */
.charge-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.charge-card{ padding:22px 16px; border-radius:16px; text-align:center;
  background:linear-gradient(165deg,#fffdfd,#f6eefa); border:1px solid var(--line);
  transition:transform .2s, box-shadow .2s, border-color .2s; }
.charge-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#d9b8e0; }
.charge-card b{ display:block; font-size:20px; font-weight:800; color:#4b3d78; }
.charge-card span{ display:block; font-size:15px; font-weight:700; color:var(--purple); margin:6px 0 4px; }
.charge-card i{ font-style:normal; font-size:12px; color:var(--ink-3); }