@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css");
/* ============================================================
   yesday - main stylesheet  (사주나라 스타일: 화이트 + #FF4C73)
   폰트: Pretendard(모던 한글 웹폰트) · 본문 16px 기준
   ============================================================ */
:root{
  --pri:#FF4C73; --pri2:#ff6b8a; --pri-dark:#E02756;
  --new:#B41E7A; --hot:#FF6B00;
  --bg:#fff; --bg2:#F4F4F4; --bg3:#FAFAFA;
  --card:#fff; --card2:#fff;
  --line:#EDEDED; --line2:#F7F7F7; --line3:#DADADA;
  --txt:#151515; --sub:#999999; --dim:#8B8B8B; --muted:#b0b0b0;
  --star:#FFB400;
  --green:#1EC7B0; --red:#FF4C73; --orange:#FF6B00;
  --radius:10px;
  --maxw:520px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Malgun Gothic",-apple-system,"Noto Sans KR",sans-serif;
  background:#f2f2f2;
  color:var(--txt); font-size:17px; line-height:1.6; letter-spacing:-.2px; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit}

.app{max-width:var(--maxw);margin:0 auto;min-height:100vh;position:relative;background:var(--bg);box-shadow:0 0 20px rgba(0,0,0,.06)}

/* ===== 헤더 ===== */
.hd{position:fixed;top:0;left:0;right:0;z-index:50;max-width:var(--maxw);margin:0 auto;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd-inner{display:flex;align-items:center;gap:8px;padding:10px 15px}
.hd-logo{display:flex;align-items:center;gap:7px;font-weight:800;letter-spacing:-.5px;flex:0 0 auto}
.hd-logo img{width:30px;height:30px;border-radius:8px}
.hd-logo span{font-size:22px;color:var(--pri)}
.hd-search{flex:1;display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:24px;padding:3px 4px 3px 14px;min-width:0}
.hd-search input{flex:1;background:none;border:0;outline:0;color:var(--txt);font-size:15px;min-width:0}
.hd-search input::placeholder{color:var(--muted)}
.hd-search button{background:var(--pri);color:#fff;font-size:14px;font-weight:700;padding:6px 12px;border-radius:20px}
.hd-utils{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.hd-link{font-size:14px;color:var(--sub);white-space:nowrap}
.hd-join{color:var(--pri);font-weight:700}
.hd-admin{color:var(--pri);font-weight:700}
@media(max-width:380px){.hd-search input{display:none}.hd-search{padding:0;width:34px;height:34px;justify-content:center}}
.hd-ghost{height:58px}

/* 헤더 알림 벨 */
.hd-bell{position:relative;font-size:18px;line-height:1}
.bell-badge{position:absolute;top:-6px;right:-8px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;
  background:var(--pri);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:15px}

/* ===== 알림센터 ===== */
.noti{display:flex;gap:11px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:8px}
.noti.unread{background:#FFF6F8;border-color:#FFD9E1}
.noti-ic{flex:0 0 38px;width:38px;height:38px;border-radius:10px;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:20px}
.noti-b{flex:1;min-width:0}
.noti-t{font-size:16px;font-weight:700;color:#000}
.noti-d{font-size:14px;color:var(--sub);margin-top:2px;line-height:1.45}
.noti-time{font-size:13px;color:var(--muted);margin-top:4px}

/* ===== 카테고리 탭 ===== */
.cata-tabs{position:sticky;top:58px;z-index:40;max-width:var(--maxw);margin:0 auto;
  background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.cata-inner{display:flex;gap:6px;padding:10px 15px;overflow-x:auto;scrollbar-width:none}
.cata-inner::-webkit-scrollbar{display:none}
.cata-tab{flex:0 0 auto;display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:15px;color:var(--sub);
  padding:8px 15px;border-radius:30px;background:var(--bg2);border:1px solid transparent;font-weight:600;line-height:1}
.cata-tab img{width:18px;height:18px}
.cata-tab.on{background:var(--pri);color:#fff;box-shadow:0 3px 10px rgba(255,76,115,.35)}

/* ===== 히어로 ===== */
.hero{margin:14px 12px 12px;padding:20px 18px 18px;border-radius:16px;color:#fff;
  background:linear-gradient(135deg,#FF5E82 0%,#E02756 60%,#B41E7A 100%);
  box-shadow:0 8px 22px rgba(224,39,86,.28);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);pointer-events:none}
.hero-eyebrow{font-size:14px;letter-spacing:.4px;color:#ffdbe4;margin:0 0 6px;font-weight:600}
.hero-tit{font-size:22px;line-height:1.34;margin:0 0 16px;font-weight:800;letter-spacing:-.6px}
.hero-tit b{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.15)}
.hero-benefits{display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
.hero-ben{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:12px;padding:10px 12px}
.hero-ben:active{background:rgba(255,255,255,.24)}
.hb-ic{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  font-size:28px;line-height:1;background:rgba(255,255,255,.18);border-radius:12px}
.hb-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.hb-tit{font-size:16px;font-weight:700;letter-spacing:-.3px}
.hb-desc{font-size:13px;color:#ffdbe4;margin-top:2px}
.hb-go{flex:none;font-size:22px;color:rgba(255,255,255,.7);font-weight:700}

/* ===== 상단 통계 ===== */
.stat-pop{margin:14px 12px;display:flex;gap:8px}
.stat-card{flex:1;background:linear-gradient(135deg,#FFF0F3,#FFE4EA);border:1px solid #FFD9E1;
  border-radius:var(--radius);padding:14px 12px;text-align:center;position:relative;overflow:hidden}
.stat-lbl{font-size:13px;color:var(--dim);margin-bottom:6px}
.stat-card b{font-size:22px;color:var(--pri);font-weight:800;letter-spacing:-.5px}
.stat-card .u{font-size:13px;color:var(--dim)}

/* ===== 배너 캐러셀 ===== */
.bn-wrap{margin:4px 12px 12px;border-radius:var(--radius);overflow:hidden;position:relative;
  box-shadow:0 4px 14px rgba(0,0,0,.08)}
.bn-track{display:flex;transition:transform .5s ease}
.bn-slide{min-width:100%;position:relative}
.bn-slide img{width:100%;aspect-ratio:16/9;object-fit:cover}
.bn-slide .bn-cap{position:absolute;left:16px;bottom:14px;font-size:18px;font-weight:800;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.7);max-width:78%}
.bn-dots{position:absolute;bottom:8px;right:12px;display:flex;gap:5px}
.bn-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:.3s}
.bn-dot.on{background:var(--pri);width:16px;border-radius:3px}

/* ===== 필터 바 ===== */
.filter-bar{margin:0 12px 10px;display:flex;flex-direction:column;gap:8px}
.filter-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.f-chip{font-size:14px;color:var(--sub);padding:6px 11px;border-radius:20px;background:var(--bg2);border:1px solid var(--line);font-weight:600}
.f-chip.on{background:#FFF0F3;color:var(--pri);border-color:var(--pri)}
.f-chip img{width:13px;height:13px;display:inline;vertical-align:-2px;margin-right:2px}
.f-sep{flex:1}
.f-select{background:var(--bg2);border:1px solid var(--line);color:var(--sub);font-size:14px;border-radius:20px;padding:6px 11px;outline:0}

/* 실시간 상담 카운터 */
.now-bar{margin:0 12px 12px;display:flex;align-items:center;gap:8px;font-size:15px;color:var(--dim)}
.now-bar b{color:var(--pri);font-weight:800}
.now-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(30,199,176,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(30,199,176,.5)}70%{box-shadow:0 0 0 8px rgba(30,199,176,0)}100%{box-shadow:0 0 0 0 rgba(30,199,176,0)}}

/* ===== 상담사 카드 리스트 ===== */
.cl{padding:0 12px 90px}
.cl-head{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 10px}
.cl-head h2{font-size:17px;margin:0;color:var(--txt)}
.cl-head h2 b{color:var(--pri)}
.cl-more{font-size:14px;color:var(--sub)}

.card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;margin-bottom:10px;position:relative;box-shadow:0 1px 4px rgba(0,0,0,.03)}
.card-top{display:flex;gap:12px}
.card-thumb{position:relative;flex:0 0 108px;width:108px;height:108px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line)}
.card-thumb img{width:100%;height:100%;object-fit:cover}
.card-cata{position:absolute;top:0;left:0;background:rgba(0,0,0,.55);color:#fff;font-size:12px;
  font-weight:700;padding:3px 7px;border-radius:0 0 8px 0}
.badge-tl{position:absolute;top:5px;right:5px;font-size:9px;font-weight:800;color:#fff;background:rgba(0,0,0,.55);
  padding:2px 6px;border-radius:6px}
.badge-tl.partner{background:var(--pri)}
.card-online{position:absolute;bottom:4px;right:4px;display:flex;align-items:center;gap:3px;font-size:9px;color:#fff;
  background:rgba(0,0,0,.5);padding:2px 6px;border-radius:8px}
.card-online img{width:11px;height:11px}

.card-info{flex:1;min-width:0}
.card-name-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap}
.card-name{font-size:18px;font-weight:800;letter-spacing:-.5px;color:#000}
.card-num{font-size:13px;color:var(--muted)}
.card-new,.card-hot{height:15px}
.card-intro{font-size:15px;color:var(--pri);margin-bottom:6px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500}
.card-price{font-size:14px;color:var(--sub);display:flex;align-items:baseline;gap:3px;margin-bottom:7px}
.card-price b{font-size:19px;color:var(--pri);font-weight:800}
.card-price .won{font-size:13px}
.card-price .per{font-size:12px;color:var(--muted)}

.card-status{display:flex;align-items:center;gap:6px;margin-bottom:9px;flex-wrap:wrap}
.status-on{font-size:13px;font-weight:700;color:#fff;background:var(--green);padding:3px 9px;border-radius:12px;display:inline-flex;align-items:center;gap:3px}
.status-off{font-size:13px;color:var(--muted);background:var(--bg2);padding:3px 9px;border-radius:12px}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.tag{font-size:13px;color:var(--sub);background:var(--bg2);border:1px solid var(--line);padding:3px 8px;border-radius:10px}

.card-meta{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line2);padding-top:9px;margin-top:2px}
.review-cnt{font-size:14px;color:var(--sub)}
.review-cnt b{color:var(--txt)}
.btn-fav{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--sub);padding:5px 11px;border-radius:14px;border:1px solid var(--line);background:var(--bg2)}
.btn-fav.on{color:var(--pri);border-color:var(--pri);background:#FFF0F3}

.card-reviews{margin-top:10px;display:flex;flex-direction:column;gap:7px}
.rv{font-size:15px;color:var(--sub);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rv b{color:var(--txt)}
.rv .nick{color:var(--pri);font-weight:700}
.card-rvmore{display:block;text-align:center;font-size:14px;color:var(--pri);margin-top:10px;padding:9px;border:1px solid #FFD9E1;background:#FFF6F8;border-radius:8px;font-weight:600}

/* ===== 빈 결과 / 더보기 ===== */
.empty{padding:60px 20px;text-align:center;color:var(--muted);font-size:16px}
.btn-load{display:block;margin:6px auto 30px;padding:12px 40px;border-radius:24px;border:1px solid var(--line3);
  background:#fff;color:var(--pri);font-weight:700;font-size:16px}

/* ===== 하단 네비 ===== */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;max-width:var(--maxw);margin:0 auto;z-index:50;
  display:flex;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.bn-item{flex:1;text-align:center;padding:8px 0 10px;font-size:13px;color:var(--sub)}
.bn-ic{display:block;font-size:20px;margin-bottom:2px}
.bn-item.on{color:var(--pri)}

/* ===== 개인영역(MY/결제) 서브 네비 ===== */
.sub-nav{max-width:var(--maxw);margin:0 auto;background:#fff;border-bottom:1px solid var(--line);
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.sub-nav::-webkit-scrollbar{display:none}
.sub-inner{display:flex;gap:6px;padding:10px 12px;min-width:max-content}
.sub-tab{flex:none;padding:7px 15px;border-radius:18px;font-size:15px;color:var(--sub);
  background:var(--bg2);text-decoration:none;white-space:nowrap;transition:.15s}
.sub-tab:active{transform:scale(.96)}
.sub-tab.on{background:var(--pri);color:#fff;font-weight:700;box-shadow:0 3px 10px rgba(255,76,115,.3)}

/* ===== 푸터 ===== */
/* 하단 고정 네비(약 58px)에 가리지 않도록 아래 여백을 충분히 확보 */
.ft{padding:24px 16px 88px;padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));
  background:var(--bg2);border-top:1px solid var(--line);margin-top:10px}
.ft-brand{display:flex;align-items:center;gap:7px;font-weight:800;font-size:18px;margin-bottom:8px;color:var(--pri)}
.ft-brand img{width:24px;height:24px;border-radius:6px}
.ft-desc{font-size:13px;color:var(--dim);line-height:1.6;margin:0 0 6px}
.ft-copy{font-size:13px;color:var(--dim);margin:0}

/* ===== 폼 / 로그인 / 회원가입 / 마이페이지 ===== */
.page{padding:24px 18px 100px}
.page-title{font-size:22px;font-weight:800;margin:0 0 24px;letter-spacing:-.5px;color:#000}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;color:var(--sub);margin-bottom:6px;font-weight:600}
.field input,.field select,.field textarea{width:100%;background:#fff;border:1px solid var(--line3);
  color:var(--txt);border-radius:8px;padding:13px 14px;font-size:16px;outline:0;transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(255,76,115,.15)}
.btn-main{width:100%;padding:14px;border-radius:8px;background:var(--pri);
  color:#fff;font-weight:800;font-size:17px;box-shadow:0 4px 14px rgba(255,76,115,.3)}
.btn-line{width:100%;padding:13px;border-radius:8px;border:1px solid var(--line3);background:#fff;color:var(--sub);font-weight:700}
.msg{font-size:14px;padding:9px 12px;border-radius:8px;margin-bottom:14px}
.msg.err{background:#FFF0F3;color:var(--pri);border:1px solid #FFD9E1}
.msg.ok{background:#E8F9F4;color:var(--green);border:1px solid #B7E8DE}
.link-row{margin-top:16px;text-align:center;font-size:15px;color:var(--sub)}
.link-row a{color:var(--pri);font-weight:700}

/* 마이페이지 포인트 카드 */
.point-card{background:linear-gradient(135deg,#FF4C73,#E02756);border-radius:var(--radius);padding:22px;
  text-align:center;margin-bottom:18px;position:relative;overflow:hidden;box-shadow:0 6px 18px rgba(255,76,115,.3)}
.point-card::after{content:"✦";position:absolute;right:18px;top:14px;font-size:60px;color:rgba(255,255,255,.12)}
.point-card .lbl{font-size:14px;color:rgba(255,255,255,.9)}
.point-card .val{font-size:28px;font-weight:800;color:#fff;margin-top:4px}
.point-card .val small{font-size:16px}
.point-card .btns{display:flex;gap:8px;margin-top:14px}
.point-card .btns button,.point-card .btns a{flex:1;padding:10px;border-radius:8px;font-size:15px;font-weight:700}
.btn-charge{background:#fff;color:var(--pri)}
.btn-use{background:rgba(255,255,255,.2);color:#fff}

.mp-sec{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.mp-sec h3{font-size:16px;margin:0 0 12px;color:#000;display:flex;align-items:center;justify-content:space-between}
.mp-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line2);font-size:15px}
.mp-row:last-child{border:0}
.mp-row .v{color:var(--pri);font-weight:700}
.mp-empty{color:var(--muted);font-size:15px;text-align:center;padding:14px 0}

/* ===== 상세 페이지 ===== */
.profile-hero{position:relative}
.profile-hero .ph-bg{height:170px;background:linear-gradient(135deg,#FFE4EA,#FFD9E1);overflow:hidden;position:relative}
.profile-hero .ph-bg img{width:100%;height:100%;object-fit:cover;opacity:.7}
.profile-body{margin-top:-60px;padding:0 16px;position:relative;z-index:2}
.profile-card{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.profile-top{display:flex;gap:14px;align-items:flex-end}
.profile-thumb{width:96px;height:96px;border-radius:14px;overflow:hidden;border:3px solid #fff;flex:0 0 96px;margin-top:-40px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.profile-thumb img{width:100%;height:100%;object-fit:cover}
.profile-nm{flex:1}
.profile-nm .nm{font-size:22px;font-weight:800;color:#000}
.profile-nm .cata{font-size:14px;color:var(--pri);font-weight:700;margin-top:2px}
.profile-price-box{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:12px;display:flex;justify-content:space-between;align-items:center}
.profile-price-box .p b{font-size:22px;color:var(--pri)}
.profile-call{background:var(--pri);color:#fff;font-weight:800;padding:11px 20px;border-radius:8px;box-shadow:0 4px 12px rgba(255,76,115,.3)}
.profile-chat{background:var(--green);color:#fff;font-weight:800;padding:11px 20px;border-radius:8px;box-shadow:0 4px 12px rgba(30,199,176,.3)}
.intro-box{background:#FFF6F8;border-left:3px solid var(--pri);border-radius:0 8px 8px 0;padding:12px 14px;margin-top:12px;font-size:15px;color:var(--dim);line-height:1.6}
.tab-bar{display:flex;margin:18px 12px 0;border-bottom:1px solid var(--line)}
.tab-bar a{flex:1;text-align:center;padding:12px 0;font-size:16px;color:var(--sub);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-bar a.on{color:var(--pri);border-color:var(--pri)}
.review-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;margin:10px 12px}
.review-card .rh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.review-card .nick{font-weight:700;color:var(--txt)}
.review-card .stars{color:var(--star);font-size:15px;letter-spacing:1px}
.review-card .date{font-size:13px;color:var(--muted)}
.review-card p{margin:0;font-size:15px;color:var(--dim);line-height:1.6}

/* ===== 상세 신뢰요소 (Phase 3) ===== */
.share-btn{position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.4);color:#fff;font-size:18px;font-weight:800;backdrop-filter:blur(4px)}
.rate-line{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:14px;color:var(--sub);flex-wrap:wrap}
.rate-line .rstars{font-size:15px;letter-spacing:1px}
.rate-line b{color:var(--txt);font-size:16px;font-weight:800}
.rate-line .rcnt{color:var(--dim)}
.trust-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tbadge{font-size:13px;font-weight:700;padding:5px 10px;border-radius:14px;background:var(--bg2);color:var(--sub)}
.tbadge.live{background:#E8F9F4;color:var(--green)}
.tbadge.free{background:#FFF0F3;color:var(--pri)}
.tbadge.partner{background:#FFF6E5;color:#C98A00}
.spec-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.spec-chips .spec{font-size:13px;color:var(--pri);background:#FFF6F8;border:1px solid #FFD9E1;padding:4px 10px;border-radius:12px}

.rate-sum{display:flex;gap:18px;align-items:center;padding:18px 16px;margin:14px 12px 4px;background:#fff;
  border:1px solid var(--line);border-radius:12px}
.rate-big{text-align:center;flex:0 0 auto}
.rate-big .rb-num{font-size:34px;font-weight:800;color:#000;line-height:1}
.rate-big .rb-stars{font-size:15px;letter-spacing:1px;margin:4px 0 2px}
.rate-big .rb-cnt{font-size:13px;color:var(--muted)}
.rate-bars{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rbar{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sub)}
.rbar .rb-l{flex:0 0 24px;color:var(--dim)}
.rbar .rb-track{flex:1;height:7px;background:var(--bg2);border-radius:4px;overflow:hidden}
.rbar .rb-fill{display:block;height:100%;background:var(--star);border-radius:4px}
.rbar .rb-v{flex:0 0 24px;text-align:right;color:var(--muted)}

.rv-toolbar{display:flex;align-items:center;justify-content:space-between;margin:12px 12px 4px}
.rv-sorts{display:flex;gap:6px}
.rv-sorts a{font-size:14px;color:var(--sub);padding:6px 11px;border-radius:16px;background:var(--bg2);font-weight:600}
.rv-sorts a.on{background:var(--pri);color:#fff}
.rv-write{font-size:14px;font-weight:700;color:var(--pri);border:1px solid var(--pri);padding:6px 12px;border-radius:16px}
.rv-reply{margin-top:10px;background:#FFF6F8;border-left:3px solid var(--pri);border-radius:0 8px 8px 0;padding:10px 12px}
.rv-reply b{font-size:14px;color:var(--pri);font-weight:800}
.rv-reply p{margin:4px 0 0;font-size:12.5px;color:var(--dim);line-height:1.55}

/* 별점 선택 */
.star-pick{display:flex;gap:6px;font-size:32px;color:#dcdcdc;user-select:none}
.star-pick span{cursor:pointer;transition:transform .1s}
.star-pick span.on{color:var(--star)}
.star-pick span:active{transform:scale(1.2)}

/* 검색 헤드 */
.srch-head{padding:20px 16px 6px}
.srch-head .kw{font-size:20px;font-weight:800;color:#000}
.srch-head .kw b{color:var(--pri)}
.srch-head .cnt{font-size:14px;color:var(--sub);margin-top:3px}

/* ===== 랭킹 페이지 ===== */
.rank-modes{display:flex;gap:6px;margin-bottom:12px}
.rm-tab{flex:1;text-align:center;padding:10px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);font-size:15px;color:var(--sub);font-weight:700}
.rm-tab.on{background:var(--pri);color:#fff;border-color:transparent}
.rank-cata{display:flex;gap:6px;margin-bottom:18px}
.rc-tab{padding:7px 14px;border-radius:20px;background:var(--bg2);border:1px solid var(--line);font-size:14px;color:var(--sub);font-weight:600}
.rc-tab.on{background:#FFF0F3;color:var(--pri);border-color:var(--pri)}
.podium{display:flex;gap:10px;margin-bottom:20px;align-items:flex-end}
.pod{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 6px 12px;text-align:center;position:relative}
.pod-medal{font-size:26px;margin-bottom:6px}
.pod-img{width:64px;height:64px;border-radius:50%;overflow:hidden;margin:0 auto 8px;border:2px solid}
.pod-gold .pod-img{border-color:#FFD700;box-shadow:0 0 14px rgba(255,215,0,.5)}
.pod-silver .pod-img{border-color:#C0C0C0}
.pod-bronze .pod-img{border-color:#CD7F32}
.pod-img img{width:100%;height:100%;object-fit:cover}
.pod-name{font-size:16px;font-weight:800;color:#000}
.pod-cata{font-size:13px;color:var(--pri);margin:2px 0 4px}
.pod-stat{font-size:13px;color:var(--pri);font-weight:700}
.pod-gold{transform:translateY(-8px)}
.rank-list{display:flex;flex-direction:column}
.rank-row{display:flex;align-items:center;gap:11px;padding:11px 8px;border-bottom:1px solid var(--line2)}
.rank-row:last-child{border:0}
.rr-no{font-size:20px;font-weight:800;color:var(--muted);width:26px;text-align:center}
.rr-img{width:46px;height:46px;border-radius:12px;overflow:hidden;flex:0 0 46px}
.rr-img img{width:100%;height:100%;object-fit:cover}
.rr-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rr-name{font-size:16px;font-weight:700;display:flex;align-items:center;gap:5px;color:#000}
.rr-cata{font-size:13px;color:var(--pri);font-weight:600}
.rr-on{font-size:12px;color:#fff;background:var(--green);padding:1px 6px;border-radius:8px}
.rr-intro{font-size:14px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr-val{font-size:16px;font-weight:800;color:var(--pri)}

/* ===== 이벤트 목록 ===== */
.evt-sub{color:var(--sub);font-size:15px;margin:-12px 0 16px}
.evt-list{display:flex;flex-direction:column;gap:14px}
.evt-card{display:flex;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.evt-card.ended{opacity:.55}
.evt-img{flex:0 0 110px}
.evt-img img{width:100%;height:100%;object-fit:cover;min-height:100px}
.evt-body{flex:1;padding:13px}
.evt-badge{display:inline-block;font-size:12px;font-weight:800;padding:3px 8px;border-radius:10px;margin-bottom:6px}
.evt-badge.on{background:#FFF0F3;color:var(--pri);border:1px solid #FFD9E1}
.evt-badge.off{background:var(--bg2);color:var(--muted);border:1px solid var(--line)}
.evt-title{font-size:17px;font-weight:800;margin:0 0 4px;line-height:1.3;color:#000}
.evt-desc{font-size:14px;color:var(--sub);margin:0 0 8px}
.evt-date{font-size:13px;color:var(--muted)}

/* ===== 이벤트 상세 ===== */
.evd-hero{position:relative}
.evd-hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.evd-ovr{position:absolute;inset:0;background:linear-gradient(0deg,rgba(255,255,255,.98) 5%,rgba(255,255,255,.2) 70%)}
.evd-cap{position:absolute;left:16px;right:16px;bottom:16px}
.evd-cap h1{font-size:22px;font-weight:800;margin:6px 0 4px;color:#000}
.evd-cap p{font-size:15px;color:var(--sub);margin:0}
.evd-meta{padding:12px 16px;font-size:14px;color:var(--sub);border-bottom:1px solid var(--line)}
.evd-body{padding:18px 16px}
.evd-h{font-size:17px;margin:0 0 12px;color:#000}
.evd-content{font-size:16px;color:var(--dim);line-height:1.8;background:var(--bg2);border-radius:8px;padding:14px;margin-bottom:18px}
.evd-note{margin:0 0 22px;padding-left:18px;font-size:14px;color:var(--muted);line-height:1.8}
.evd-cta{text-align:center;display:block;text-decoration:none}

/* ===== 관리자 ===== */
body.admin{background:#161f33;max-width:none;color:#e5e9f0}
body.admin .app{max-width:1100px;background:#161f33}
.adm-wrap{display:flex;min-height:100vh}
.adm-side{width:220px;background:#0f1626;border-right:1px solid #2b3a55;padding:18px 0;position:sticky;top:0;height:100vh}
.adm-brand{padding:0 20px 18px;font-weight:800;font-size:20px;color:#fff;border-bottom:1px solid #2b3a55;display:flex;align-items:center;gap:8px}
.adm-brand img{width:26px;height:26px;border-radius:7px}
.adm-side a{display:block;padding:11px 20px;color:#dbe2ee;font-size:16px;font-weight:600}
.adm-side a.on,.adm-side a:hover{background:#22304d;color:#fff;border-left:3px solid var(--pri)}
.adm-main{flex:1;padding:26px 30px}
.adm-h{font-size:22px;font-weight:800;color:#fff;margin:0 0 20px}
.adm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.adm-stat{background:#1f2b45;border:1px solid #33456a;border-radius:14px;padding:16px}
.adm-stat .l{font-size:14px;color:#cbd5e1}
.adm-stat .v{font-size:24px;font-weight:800;color:#fff;margin-top:6px}
.adm-stat.gold .v{color:var(--star)}
.adm-panel{background:#1f2b45;border:1px solid #33456a;border-radius:14px;padding:18px;margin-bottom:20px}
.adm-panel h3{margin:0 0 14px;color:#fff;font-size:17px}
.adm-table{width:100%;border-collapse:collapse;font-size:15px;color:#eef2f8}
.adm-table th{text-align:left;padding:10px;border-bottom:1px solid #33456a;color:#cbd5e1;font-weight:600}
.adm-table td{padding:10px;border-bottom:1px solid #2b3a55}
.adm-table tr:hover td{background:#26334f}
.adm-btn{padding:6px 12px;border-radius:8px;font-size:14px;font-weight:700;display:inline-block;margin-right:4px}
.adm-btn.e{background:#2b3a55;color:#bfdbfe}
.adm-btn.d{background:#4a1d1d;color:#fca5a5}
.adm-form .field input,.adm-form .field select,.adm-form .field textarea{background:#131c2e;border-color:#33456a;color:#fff}
.adm-form .field label{color:#cbd5e1}
.adm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.adm-side{display:none}.adm-stats{grid-template-columns:1fr 1fr}.adm-grid2{grid-template-columns:1fr}}

/* ============================================================
   실시간 채팅상담 (Phase 1)
   ============================================================ */
.chat-wrap{max-width:var(--maxw);margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column;
  background:#F7F7F9;box-shadow:0 0 20px rgba(0,0,0,.06);position:relative}
.chat-hd{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line);z-index:5}
.chat-hd .back{font-size:22px;color:var(--sub);flex:0 0 auto;line-height:1}
.chat-hd .thumb{width:38px;height:38px;border-radius:10px;overflow:hidden;flex:0 0 38px;border:1px solid var(--line)}
.chat-hd .thumb img{width:100%;height:100%;object-fit:cover}
.chat-hd .who{flex:1;min-width:0}
.chat-hd .nm{font-size:17px;font-weight:800;color:#000;display:flex;align-items:center;gap:5px}
.chat-hd .st{font-size:13px;color:var(--sub);margin-top:1px}
.chat-hd .st.live{color:var(--green);font-weight:700}
.chat-hd .end-btn{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--pri);border:1px solid #FFD9E1;background:#FFF0F3;padding:6px 12px;border-radius:16px}

/* 과금/타이머 바 */
.chat-meter{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:7px 14px;background:#fff;border-bottom:1px solid var(--line2);font-size:14px}
.chat-meter .m{display:flex;align-items:center;gap:4px;color:var(--sub)}
.chat-meter .m b{color:var(--txt);font-weight:800}
.chat-meter .m.pri b{color:var(--pri)}
.chat-meter .sep{flex:1}
.chat-meter .warn{color:var(--pri);font-weight:700}

.chat-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 12px 8px;display:flex;flex-direction:column;gap:9px}
.msg-row{display:flex;flex-direction:column;max-width:78%}
.msg-row.me{align-self:flex-end;align-items:flex-end}
.msg-row.you{align-self:flex-start;align-items:flex-start}
.bubble{padding:9px 13px;border-radius:15px;font-size:16px;line-height:1.5;word-break:break-word;white-space:pre-wrap}
.me .bubble{background:var(--pri);color:#fff;border-bottom-right-radius:5px}
.you .bubble{background:#fff;color:var(--txt);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg-time{font-size:12px;color:var(--muted);margin:3px 3px 0}
.msg-sys{align-self:center;text-align:center;background:rgba(0,0,0,.05);color:var(--dim);font-size:11.5px;
  padding:6px 14px;border-radius:14px;max-width:88%;line-height:1.4}

.chat-input{flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;padding:9px 12px;
  padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line)}
.chat-input textarea{flex:1;resize:none;border:1px solid var(--line3);border-radius:20px;padding:10px 14px;
  font-size:16px;max-height:96px;outline:0;line-height:1.4;background:var(--bg3)}
.chat-input textarea:focus{border-color:var(--pri);background:#fff}
.chat-input .send{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--pri);color:#fff;
  font-size:21px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(255,76,115,.3)}
.chat-input .send:disabled{opacity:.4;box-shadow:none}

/* 오버레이(대기/종료) */
.chat-ovr{position:absolute;inset:0;z-index:20;background:rgba(247,247,249,.94);backdrop-filter:blur(2px);
  display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.chat-ovr.show{display:flex}
.chat-ovr .spin{width:46px;height:46px;border-radius:50%;border:4px solid #FFD9E1;border-top-color:var(--pri);
  animation:spin 1s linear infinite;margin-bottom:18px}
@keyframes spin{to{transform:rotate(360deg)}}
.chat-ovr h3{font-size:20px;font-weight:800;color:#000;margin:0 0 8px}
.chat-ovr p{font-size:15px;color:var(--sub);margin:0 0 6px;line-height:1.6}
.chat-ovr .sum{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:14px 0;min-width:220px}
.chat-ovr .sum .row{display:flex;justify-content:space-between;font-size:15px;padding:5px 0;color:var(--sub)}
.chat-ovr .sum .row b{color:var(--txt);font-weight:800}
.chat-ovr .ovr-btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chat-ovr .ob{padding:11px 22px;border-radius:22px;font-size:16px;font-weight:700}
.chat-ovr .ob.pri{background:var(--pri);color:#fff}
.chat-ovr .ob.line{background:#fff;color:var(--pri);border:1px solid var(--pri)}

/* 상담사 채팅 요청 목록 */
.chatreq-list{padding:12px}
.chatreq{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px;margin-bottom:10px}
.chatreq.waiting{border-color:var(--pri);box-shadow:0 2px 10px rgba(255,76,115,.12)}
.chatreq .ci{flex:1;min-width:0}
.chatreq .ci .nm{font-size:17px;font-weight:800;color:#000}
.chatreq .ci .sub{font-size:14px;color:var(--sub);margin-top:2px}
.chatreq .rq-badge{font-size:12px;font-weight:800;color:#fff;background:var(--pri);padding:2px 8px;border-radius:10px}
.chatreq .rq-badge.live{background:var(--green)}
.chatreq .acts{display:flex;gap:6px;flex:0 0 auto}
.chatreq .b{padding:8px 14px;border-radius:16px;font-size:15px;font-weight:700}
.chatreq .b.acc{background:var(--pri);color:#fff}
.chatreq .b.rej{background:var(--bg2);color:var(--sub)}
.chatreq .b.open{background:var(--green);color:#fff}

/* 상담사 하단 네비 채팅 배지 */
.on-item{position:relative}
.on-badge{position:absolute;top:2px;right:calc(50% - 20px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--pri);color:#fff;font-size:12px;font-weight:800;display:none;align-items:center;justify-content:center;line-height:16px}
.on-badge.show{display:flex}

/* ===== 쿠폰함 ===== */
.cpn{display:flex;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;position:relative}
.cpn::before,.cpn::after{content:"";position:absolute;left:104px;width:14px;height:14px;border-radius:50%;background:var(--bg2)}
.cpn::before{top:-7px}.cpn::after{bottom:-7px}
.cpn-l{flex:0 0 118px;background:linear-gradient(135deg,#FF4C73,#E02756);color:#fff;display:flex;align-items:center;justify-content:center;
  border-right:2px dashed rgba(255,255,255,.5)}
.cpn-amt{font-size:24px;font-weight:800;letter-spacing:-.5px;text-align:center;line-height:1.1}
.cpn-amt span{display:block;font-size:14px;font-weight:600;opacity:.9;margin-top:2px}
.cpn-r{flex:1;padding:13px 14px;min-width:0}
.cpn-nm{font-size:16px;font-weight:700;color:#000}
.cpn-exp{font-size:13px;color:var(--muted);margin:3px 0 8px}
.cpn-use{background:var(--pri);color:#fff;font-size:14px;font-weight:700;padding:7px 14px;border-radius:16px}
.cpn-use:disabled{opacity:.5}
.cpn-auto{font-size:11.5px;color:var(--green);font-weight:600}

/* ===== 찜한 상담사 접속 스트립 ===== */
.favon{display:none;align-items:center;gap:8px;margin:0 12px 12px;padding:11px 14px;border-radius:12px;
  background:linear-gradient(135deg,#FFF0F3,#FFE4EA);border:1px solid #FFD9E1}
.favon.show{display:flex}
.favon .ico{font-size:18px;flex:0 0 auto}
.favon .tx{flex:1;min-width:0;font-size:12.5px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.favon .tx b{color:var(--pri);font-weight:800}
.favon .go{flex:0 0 auto;font-size:13px;font-weight:700;color:#fff;background:var(--pri);padding:5px 11px;border-radius:14px}

/* ===== 추천인 카드 ===== */
.ref-card{margin:0 0 14px;padding:16px 18px;border-radius:14px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#7C3AED 0%,#5B21B6 60%,#4C1D95 100%);box-shadow:0 6px 18px rgba(91,33,182,.28)}
.ref-card::after{content:"🎁";position:absolute;right:12px;bottom:6px;font-size:52px;opacity:.18}
.ref-top{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:1}
.ref-lbl{font-size:13px;opacity:.85}
.ref-code{font-size:24px;font-weight:800;letter-spacing:2px;margin-top:2px}
.ref-copy{background:rgba(255,255,255,.22);color:#fff;font-size:14px;font-weight:800;padding:8px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.3)}
.ref-copy:active{background:rgba(255,255,255,.35)}
.ref-desc{font-size:14px;opacity:.92;margin-top:10px;position:relative;z-index:1;line-height:1.5}
.ref-desc b{font-weight:800}

/* ===== 후기 사진 첨부 ===== */
.photo-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:120px;
  border:2px dashed var(--line3);border-radius:12px;background:var(--bg3);color:var(--muted);font-size:15px;cursor:pointer;padding:14px}
.photo-drop:active{border-color:var(--pri);background:#FFF6F8}
.photo-drop img{max-width:100%;max-height:220px;border-radius:8px}

/* toast */
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:rgba(20,20,20,.95);
  border:1px solid #333;color:#fff;padding:11px 18px;border-radius:24px;font-size:15px;z-index:200;
  opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============================================================
   백오피스 (상담사/정산/ARS)
   ============================================================ */
body.office{background:#eef0f4}
body.office .app{max-width:520px;background:#fff}

/* 상담사 로그인 */
.clogin-hero{text-align:center;padding:50px 24px 30px;background:linear-gradient(135deg,#FF4C73,#E02756);color:#fff}
.clogin-hero img{width:56px;height:56px;border-radius:14px;margin:0 auto 12px}
.clogin-hero h1{font-size:22px;margin:0}
.clogin-hero p{font-size:15px;opacity:.9;margin-top:6px}

/* 오피스 대시보드 통계 */
.dash-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 12px}
.dash-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.dash-stat .dl{font-size:13px;color:var(--dim)}
.dash-stat .dv{font-size:22px;font-weight:800;color:var(--txt);margin-top:5px}
.dash-stat .dv b{color:var(--pri)}
.dash-stat.gold .dv b{color:var(--star)}
.dash-stat.green .dv b{color:var(--green)}

/* 수익 차트 바 */
.rev-chart{padding:0 12px 12px}
.rev-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.rev-bar-lbl{font-size:13px;color:var(--sub);width:50px;flex:0 0 50px;text-align:right}
.rev-bar{flex:1;height:18px;background:var(--bg2);border-radius:9px;overflow:hidden}
.rev-bar-fill{height:100%;background:linear-gradient(90deg,var(--pri),var(--pri2));border-radius:9px;min-width:2px}
.rev-bar-val{font-size:13px;color:var(--txt);font-weight:700;width:70px;flex:0 0 70px}

/* 오피스 섹션 */
.of-sec{margin:12px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.of-sec-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line2)}
.of-sec-h h3{font-size:16px;margin:0;color:var(--txt)}
.of-sec-h a{font-size:14px;color:var(--pri);font-weight:600}
.of-row{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line2);gap:10px;font-size:15px}
.of-row:last-child{border:0}
.of-row .l{flex:1}
.of-row .v{font-weight:700;color:var(--pri)}
.of-row .s{font-size:13px;padding:2px 8px;border-radius:10px;font-weight:600}
.s-ended{background:#E8F9F4;color:var(--green)}
.s-failed{background:#FFF0F3;color:var(--red)}
.s-waiting{background:#FFF8E1;color:var(--orange)}
.s-connected{background:#E3F2FD;color:#1976D2}
.s-pending{background:var(--bg2);color:var(--sub)}
.s-approved{background:#E3F2FD;color:#1976D2}
.s-paid{background:#E8F9F4;color:var(--green)}
.s-completed{background:#E8F9F4;color:var(--green)}
.s-requested{background:#FFF8E1;color:var(--orange)}
.s-rejected{background:#FFF0F3;color:var(--red)}

/* ARS 상태 표시 */
.ars-status{display:flex;align-items:center;gap:8px}
.ars-dot{width:10px;height:10px;border-radius:50%}
.ars-dot.on{background:var(--green);box-shadow:0 0 6px rgba(30,199,176,.6)}
.ars-dot.off{background:#ccc}

/* 오피스 하단 탭 */
.office-nav{position:fixed;bottom:0;left:0;right:0;max-width:var(--maxw);margin:0 auto;z-index:50;
  display:flex;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.on-item{flex:1;text-align:center;padding:8px 0 10px;font-size:13px;color:var(--sub)}
.on-item.on{color:var(--pri)}
.on-item .oi{display:block;font-size:22px;margin-bottom:2px;line-height:1}

/* 출금 폼 */
.withdraw-box{margin:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
.avail-box{background:linear-gradient(135deg,#FF4C73,#E02756);border-radius:10px;padding:16px;color:#fff;margin-bottom:14px;text-align:center}
.avail-box .al{font-size:14px;opacity:.9}
.avail-box .av{font-size:28px;font-weight:800;margin-top:4px}

/* ============================================================
   PC 2단 레이아웃 : 좌측 고정 홍보 패널 + 우측 앱 컬럼(스크롤)
   - 사주나라식. 넓은 화면(≥1000px)에서만 적용.
   - 앱 컬럼(.app)만 세로 스크롤되고, .side-promo 는 화면에 고정.
   - 관리자/상담사 화면(body.admin/.office)에는 영향 없음(body.site 스코프).
   ============================================================ */
.side-promo{display:none}
.sp-logo{display:flex;align-items:center;gap:9px;font-size:22px;font-weight:800;
  color:var(--pri);text-decoration:none;margin-bottom:30px}
.sp-logo img{width:36px;height:36px;border-radius:9px}
.sp-head{font-size:30px;line-height:1.34;font-weight:800;letter-spacing:-1px;color:var(--txt);margin:0 0 30px}
.sp-head b{color:var(--pri)}
.sp-benefits{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:20px}
.sp-benefits li{display:flex;gap:14px;align-items:center}
.sp-bic{flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;
  background:linear-gradient(135deg,#FFF0F3,#FFE4EA);border:1px solid #FFD9E1;
  display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;text-align:center}
.sp-benefits b{display:block;font-size:17px;color:var(--txt);margin-bottom:3px;letter-spacing:-.3px}
.sp-benefits span{display:block;font-size:12.5px;color:var(--dim);line-height:1.5}
.sp-cta{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.sp-cta p{margin:0 0 14px;font-size:14.5px;color:var(--txt);line-height:1.5}
.sp-cta b{color:var(--pri)}
.sp-btns{display:flex;gap:8px}
.sp-btn{flex:1;text-align:center;padding:12px 0;border-radius:11px;background:var(--pri);
  color:#fff;font-weight:700;text-decoration:none;font-size:16px}
.sp-btn.ghost{background:#fff;color:var(--pri);border:1px solid var(--pri)}

@media (min-width:1000px){
  body.site{background:linear-gradient(160deg,#fff5f7 0%,#ffe9ef 100%)}
  /* 앱 컬럼과 고정 헤더/하단바를 우측으로 이동해 (좌패널+앱) 쌍을 화면 중앙에 배치 */
  body.site .app{left:220px}
  body.site .hd{transform:translateX(220px)}
  body.site .bottom-nav{transform:translateX(220px)}
  body.site .hero{display:none}   /* 데스크톱은 좌측 패널이 히어로 역할 */
  /* 좌측 고정 패널: 앱 컬럼 바로 왼쪽에 고정, 자체적으로만 스크롤 */
  .side-promo{display:block;position:fixed;top:0;bottom:0;right:calc(50% + 80px);
    width:400px;padding:52px 40px;box-sizing:border-box;overflow-y:auto}
  .sp-inner{max-width:340px;margin-left:auto}
}
@media (min-width:1240px){
  .side-promo{width:440px;padding:60px 48px}
}

/* ============================================================
   UI 고도화 — 마이크로 인터랙션 / 그림자 / 진입 애니메이션 / 스켈레톤
   (기존 레이아웃 유지, 감각만 향상. 접근성: prefers-reduced-motion 존중)
   ============================================================ */
:root{
  --shadow-sm:0 1px 3px rgba(20,20,30,.05), 0 1px 2px rgba(20,20,30,.04);
  --shadow-md:0 4px 14px rgba(20,20,30,.08);
  --shadow-lg:0 10px 30px rgba(20,20,30,.12);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* 버튼/누름 요소 공통 트랜지션 + 눌림 피드백 */
.btn-main,.btn-line,.profile-call,.profile-chat,.f-chip,.cata-tab,.sub-tab,.rm-tab,
.hero-ben,.btn-fav,.cpn-use,.ref-copy,.rv-write,.rv-sorts a,.chat-input .send,.ob{
  transition:transform .12s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-main:active,.profile-call:active,.profile-chat:active,.cpn-use:active,
.ref-copy:active,.chat-input .send:active,.ob:active{transform:translateY(1px) scale(.985)}
.f-chip:active,.cata-tab:active,.sub-tab:active,.hero-ben:active,.btn-fav:active{transform:scale(.96)}
.btn-main:hover{box-shadow:0 6px 20px rgba(255,76,115,.42)}

/* 카드: 부드러운 그림자 + 탭 피드백 */
.card{transition:transform .14s var(--ease), box-shadow .2s var(--ease)}
.card:active{transform:scale(.992);box-shadow:var(--shadow-md)}
.stat-card,.evt-card,.review-card,.mp-sec,.rate-sum,.noti{box-shadow:var(--shadow-sm)}

/* 리스트 진입 페이드업 (상담사 카드 등) */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#counselorList .card,.evt-card,.noti,.cpn{animation:fadeUp .32s var(--ease) both}
#counselorList .card:nth-child(2){animation-delay:.04s}
#counselorList .card:nth-child(3){animation-delay:.08s}
#counselorList .card:nth-child(4){animation-delay:.12s}
#counselorList .card:nth-child(5){animation-delay:.16s}
#counselorList .card:nth-child(n+6){animation-delay:.2s}

/* 히어로: 은은한 광택 스윕 */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.10) 50%,transparent 60%);
  transform:translateX(-100%);animation:heroSheen 6s ease-in-out 1.2s infinite}
@keyframes heroSheen{0%{transform:translateX(-100%)}35%,100%{transform:translateX(100%)}}

/* 온라인 점 살아있는 느낌 */
.card-online,.status-on{position:relative}

/* 스켈레톤 로더 유틸 */
.skeleton{background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);background-size:400% 100%;
  animation:skel 1.3s ease infinite;border-radius:8px}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* 하단 네비 활성 알약 강조 */
.bottom-nav .bn-item.on .bn-ic,.office-nav .on-item.on .oi{transform:translateY(-1px);transition:transform .15s var(--ease)}

/* 상단 고정 헤더 그림자(스크롤 감각) */
.hd{box-shadow:0 1px 0 rgba(0,0,0,.02),0 6px 16px rgba(0,0,0,.03)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ============================================================
   2026 UI polish: readable Korean copy, steadier controls, cleaner states
   ============================================================ */
body{letter-spacing:0;background:#f4f5f7}
.app{box-shadow:0 18px 60px rgba(15,23,42,.08)}
.hd-inner{min-height:58px}
.hd-logo span{text-transform:lowercase}
.hd-link{display:inline-flex;align-items:center;min-height:32px}
.hd-bell{font-size:13px}
.ft-copy a{color:var(--dim)}

.home-hero{background:
  linear-gradient(135deg,rgba(255,76,115,.95),rgba(180,30,122,.94)),
  url("../images/logo.png") right 18px top 18px/96px 96px no-repeat}
.hero-tit{letter-spacing:0}
.hero-ben{min-height:68px}
.hb-ic{font-size:15px;font-weight:900;letter-spacing:0}
.hb-go{font-size:24px;line-height:1}

.stat-card{box-shadow:0 4px 16px rgba(15,23,42,.06)}
.stat-card b{letter-spacing:0}
.bn-dot{border:0;padding:0;cursor:pointer}

.f-chip{display:inline-flex;align-items:center;gap:4px;min-height:34px;appearance:none}
.f-chip img{margin:0}
.f-select{min-height:34px}

.card{border-color:#e8e8ee;box-shadow:0 4px 16px rgba(15,23,42,.045)}
.card:hover{box-shadow:0 8px 24px rgba(15,23,42,.08)}
.card-name{letter-spacing:0}
.badge-tl.hot{background:var(--hot)!important;color:#fff}
.card-online img,.status-on img{width:13px;height:13px}
.support-label{font-size:12px;color:var(--sub)}
.star{color:var(--star)}
.btn-fav{min-width:72px;justify-content:center}
.btn-fav.on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pri);display:inline-block}

.favon{box-shadow:0 4px 18px rgba(255,76,115,.11)}
.favon .ico{font-size:11px;font-weight:900;color:#fff;background:var(--green);border-radius:999px;padding:3px 6px}

.bottom-nav{padding-bottom:env(safe-area-inset-bottom,0px)}
.bn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:56px}
.bn-ic{font-size:11px;font-weight:800;margin:0;line-height:1.15}
.bn-item span:last-child{font-size:12px}

.sp-bic{border-radius:14px;font-size:13px;font-weight:900;color:var(--pri);letter-spacing:0}
.sp-head{letter-spacing:0}

@media(max-width:430px){
  .hd-inner{gap:6px;padding:9px 12px}
  .hd-logo span{display:none}
  .hd-utils{gap:6px}
  .hd-link{font-size:12px}
  .hd-search button{padding:6px 10px}
  .card-top{gap:10px}
  .card-thumb{flex-basis:96px;width:96px;height:96px}
  .card-name{font-size:17px}
  .card-intro{font-size:14px}
}

/* 무료 오늘의 운세 */
.daily-fortune-banner{margin:12px;display:flex;align-items:center;gap:12px;padding:15px;border-radius:14px;background:linear-gradient(135deg,#20153d,#5f245d);color:#fff;box-shadow:0 6px 18px rgba(53,25,73,.2)}
.df-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-weight:900}.daily-fortune-banner>span:nth-child(2){flex:1;min-width:0}.daily-fortune-banner b,.daily-fortune-banner small{display:block}.daily-fortune-banner small{font-size:12px;color:#e8ddec;margin-top:2px}.daily-fortune-banner em{font-style:normal;font-size:12px;font-weight:800;white-space:nowrap}
.fortune-page{padding:0 14px 40px}.fortune-head{margin:14px -2px 12px;padding:26px 22px;border-radius:20px;background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.18),transparent 28%),linear-gradient(145deg,#24143f,#7b285e);color:#fff}.fortune-kicker{font-size:12px;font-weight:800;color:#ffd6e8}.fortune-head h1{font-size:30px;line-height:1.25;margin:10px 0}.fortune-head p{font-size:14px;color:#eadfea;margin:0}
.fortune-form{padding:20px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}.fortune-form>label,.fortune-grid label{display:block;font-size:13px;font-weight:800}.fortune-form input,.fortune-form select{display:block;width:100%;margin-top:6px;height:46px;border:1px solid var(--line3);border-radius:10px;padding:0 12px;background:#fff;font-size:15px}.fortune-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.fortune-form fieldset{border:0;padding:0;margin:15px 0}.fortune-form legend{font-size:13px;font-weight:800;margin-bottom:7px}.fortune-choice{display:flex;gap:6px}.fortune-choice label{flex:1}.fortune-choice input{position:absolute;opacity:0;width:1px;height:1px}.fortune-choice span{display:block;text-align:center;padding:10px 3px;border-radius:9px;background:var(--bg2);font-size:13px}.fortune-choice input:checked+span{background:#fff0f4;color:var(--pri);box-shadow:inset 0 0 0 1px var(--pri);font-weight:800}.fortune-submit{width:100%;padding:14px;border-radius:11px;background:var(--pri);color:#fff;font-size:16px;font-weight:900}.fortune-privacy,.fortune-note{text-align:center;font-size:11px;color:var(--dim);margin:9px 0 0}.form-error{color:#d92c4e;background:#fff0f3;padding:9px;border-radius:8px;font-size:13px}
.fortune-result{scroll-margin-top:120px;margin-top:16px}.fortune-summary{text-align:center;padding:25px 20px;border-radius:18px 18px 0 0;background:linear-gradient(145deg,#ff557a,#c12b71);color:#fff}.fortune-summary>span{font-size:12px;opacity:.85}.fortune-summary strong{display:block;font-size:52px;line-height:1.2}.fortune-summary strong small{font-size:18px}.fortune-summary h2{font-size:18px;line-height:1.45;margin:4px 0 0}.fortune-scores{border:1px solid var(--line);border-top:0;padding:18px;background:#fff}.fortune-scores article+article{margin-top:16px}.fortune-scores article>div:first-child{display:flex;justify-content:space-between;font-size:14px}.fortune-scores article span{color:var(--pri);font-weight:800}.score-track{height:7px;background:#f1edf3;border-radius:9px;margin:6px 0;overflow:hidden}.score-track i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#ff9aae,#ff4c73)}.fortune-scores p{margin:0;font-size:12px;color:var(--dim)}
.lucky-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.lucky-grid div{padding:14px 5px;text-align:center;border-radius:12px;background:#faf6fb}.lucky-grid span,.fortune-guide span{display:block;font-size:11px;color:var(--dim)}.lucky-grid b{display:block;font-size:13px;margin-top:3px}.fortune-guide{margin-top:10px;display:grid;gap:8px}.fortune-guide div{padding:14px;border-radius:12px;background:#f2fbf8}.fortune-guide div.caution{background:#fff7f3}.fortune-guide b{display:block;font-size:14px;margin-top:3px}.fortune-share{width:100%;padding:13px;margin-top:10px;border:1px solid var(--pri);border-radius:11px;color:var(--pri);font-weight:800}
.fortune-connect{margin-top:22px;padding:20px;border-radius:16px;background:#f8f5fa}.fortune-connect h2{font-size:20px;line-height:1.4;margin:0}.fortune-connect>p{font-size:13px;color:var(--dim)}.fortune-connect>a{display:flex;align-items:center;gap:7px;padding:12px;margin-top:7px;border-radius:10px;background:#fff}.fortune-connect a b{font-size:14px}.fortune-connect a span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--dim)}.fortune-connect a em{font-size:11px;color:var(--pri);font-style:normal;font-weight:800}.fortune-connect .fortune-ai{display:block;text-align:center;background:var(--pri);color:#fff;font-weight:800;margin-top:12px}
@media(max-width:430px){.hd-utils .hd-link:first-child{display:none}.fortune-head h1{font-size:27px}}