/* 99운세 사무소 캐릭터 레이어 — refresh.css 브랜드 톤(크림 배경, 네이비 테두리, 라임 오프셋 그림자)을 따른다 */
.char-hidden{display:none!important}
.section{scroll-margin-top:170px}

.char-avatar{
  flex:none;border-radius:50%;object-fit:cover;
  border:2px solid #29213d;background:var(--char-color,#fffdf9);
}

/* 말풍선 공통 */
.char-say{display:flex;align-items:flex-end;gap:10px;text-align:left;margin:4px 0 22px}
.char-say .char-avatar{width:56px;height:56px;box-shadow:3px 3px 0 var(--char-color)}
.char-bubble{
  position:relative;flex:1;min-width:0;background:#fff;border:2px solid #29213d;
  border-radius:18px 18px 18px 6px;padding:10px 14px 11px;box-shadow:4px 4px 0 #c9f571;
}
.char-name{display:block;font-size:11px;font-weight:900;color:#625b6c;margin-bottom:3px;letter-spacing:-.2px}
.char-line{font-size:14px;line-height:1.6;color:#29213d;font-weight:700;word-break:keep-all;margin:0}

/* 홈: 99운세 사무소 */
.char-office{margin:34px 0 6px}
.char-office-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.char-office-head .intro-eyebrow{margin-bottom:0}
.char-office-head h2{font-size:clamp(24px,3.4vw,32px);letter-spacing:-1.4px;color:#29213d}
.char-say-office{max-width:640px}
.char-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.char-card{
  display:flex;flex-direction:column;text-align:left;padding:0;overflow:hidden;cursor:pointer;
  background:#fffdf9;color:#29213d;border:2px solid #29213d;border-radius:22px;
  box-shadow:6px 6px 0 #c9f571;transition:transform .15s,box-shadow .15s;font:inherit;
}
.char-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #c9f571}
.char-card:active{transform:translate(4px,4px);box-shadow:2px 2px 0 #c9f571}
.char-card-img{aspect-ratio:4/5;background:var(--char-color);border-bottom:2px solid #29213d;overflow:hidden}
.char-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.char-card-body{padding:12px 14px 15px}
.char-role{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:900;
  background:#f5f0e8;border:1px solid #29213d33;border-radius:99px;padding:4px 9px;margin-bottom:7px
}
.char-role:before{content:'';width:9px;height:9px;border-radius:50%;background:var(--char-color);border:1px solid #29213d}
.char-card-name{display:block;font-size:19px;font-weight:900;letter-spacing:-.6px;margin-bottom:4px}
.char-card-line{font-size:12.5px;line-height:1.55;color:#625b6c;word-break:keep-all;margin:0}

/* 결과 화면 인사 */
.char-result-slot .char-say{margin:6px 0 4px}

/* 990원 버튼 옆 도윤 "복채" 멘트 */
.char-bokchae{
  display:flex;align-items:center;justify-content:center;gap:7px;margin:9px 0 0;
  font-size:12px;color:#29213d;line-height:1.4;word-break:keep-all
}
.char-bokchae .char-avatar{width:28px;height:28px;border-width:1.5px}
.char-bokchae b{font-weight:900;margin-right:2px}
#tarot-spread-pay-btn.hidden + .char-bokchae{display:none}
/* 잠금 영역 안에 멘트 한 줄이 늘어난 만큼 높이 확보 (오버레이 아래 안내 문구가 밖으로 밀리지 않게) */
.lock-wrapper:has(.char-bokchae) .blur-content .result-box{min-height:380px!important}
.pay-overlay .char-bokchae{margin-top:0}

/* 로딩 화면 */
.char-loading{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:18px;padding:0 24px;text-align:center}
.char-loading:empty{display:none}
.char-loading .char-avatar{width:64px;height:64px;box-shadow:4px 4px 0 #c9f571}
.char-loading-line{font-size:13px;font-weight:700;color:#fffdf9;line-height:1.6;word-break:keep-all;margin:0}

/* 검색용 소개 페이지 */
.seo-char{max-width:560px;margin:0 0 22px}

@media(max-width:700px){
  .char-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .char-card{box-shadow:4px 4px 0 #c9f571;border-radius:18px}
  .char-card-body{padding:10px 11px 12px}
  .char-card-name{font-size:17px}
  .char-card-line{font-size:12px}
  .char-office{margin-top:26px}
  .char-line{font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){.char-card{transition:none}}

/* 상단 메뉴: 이모지 대신 캐릭터 얼굴, 번갈아 살짝 떠오르고 고른 캐릭터는 커진다 */
.tabs .tab .tab-icon{display:none}
.tabs .tab .tab-char{
  width:34px;height:34px;border-radius:50%;
  border:2px solid #29213d;background:var(--char-color,#fffdf9);
  animation:tabCharBob 2.8s ease-in-out infinite;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.tabs .tab.active .tab-char{transform:scale(1.15)}
@keyframes tabCharBob{0%,60%,100%{translate:0 0}30%{translate:0 -3px}}
@media (prefers-reduced-motion:reduce){.tabs .tab .tab-char{animation:none}}

/* 첫 화면 소개는 한 줄 인사로 줄인다 (문구는 그대로 두고 화면에서만 축소) */
.intro-card{padding:12px 16px!important;min-height:0!important;text-align:center}
.intro-card h2{font-size:17px!important;line-height:1.4!important;margin:0!important;letter-spacing:-0.2px!important;word-spacing:normal!important}
.intro-card h2 br{display:none}
.intro-card h2 em{margin-left:.25em}
.intro-card .intro-eyebrow,.intro-card p,.intro-card .intro-art{display:none!important}
.intro-card .intro-pills{justify-content:center;margin-top:6px!important}
.intro-card .intro-pills span{font-size:11px!important;padding:3px 9px!important}
.tabs .tab{flex-direction:column!important;gap:3px!important;position:relative}
#tab-unse > span[style]{position:absolute;top:3px;right:3px;margin:0!important}

/* 메뉴 첫 화면: 캐릭터가 크게 등장하고 채팅처럼 말을 건다 (기존 아이콘은 화면에서만 숨김) */
.section > .hero-icon{display:none}
.char-stage{display:flex;flex-direction:column;align-items:center;margin:0 auto 18px;max-width:520px}
.char-stage-card{
  position:relative;width:100%;max-width:260px;aspect-ratio:4/5;border-radius:28px;overflow:hidden;
  border:2px solid #29213d;box-shadow:6px 6px 0 #29213d;background:var(--char-color,#fffdf9);
  opacity:0;transform:translateY(40px) scale(.92);
}
.char-stage.is-in .char-stage-card{animation:charStageIn .6s cubic-bezier(.34,1.56,.64,1) forwards}
.char-stage-img{display:block;width:100%;height:100%;object-fit:cover;animation:charStageFloat 3.2s ease-in-out infinite}
.char-stage-name{
  position:absolute;right:12px;top:12px;background:#29213d;color:#fff;font-size:13px;font-weight:900;
  padding:6px 12px;border-radius:99px;font-family:'Noto Sans KR',sans-serif;
}
.char-stage-chat{display:flex;align-items:flex-end;gap:8px;align-self:stretch;margin-top:-34px;position:relative;z-index:1;text-align:left}
.char-stage-chat .char-avatar{width:36px;height:36px;flex:none}
.char-stage-bubble{
  flex:1;min-height:44px;background:#fff;border:2px solid #29213d;border-radius:20px 20px 20px 6px;
  padding:11px 15px;box-shadow:4px 4px 0 #c9f571;color:#29213d;font-size:16px;line-height:1.5;font-weight:700;
  font-family:'Noto Sans KR',sans-serif;display:flex;align-items:center;
}
.char-typing{display:inline-flex;gap:5px}
.char-typing i{width:8px;height:8px;border-radius:50%;background:#29213d;opacity:.3;animation:charTyping .9s infinite}
.char-typing i:nth-child(2){animation-delay:.15s}
.char-typing i:nth-child(3){animation-delay:.3s}
@keyframes charStageIn{to{opacity:1;transform:none}}
@keyframes charStageFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes charTyping{0%,100%{opacity:.3}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .char-stage-card{opacity:1;transform:none}
  .char-stage.is-in .char-stage-card,.char-stage-img,.char-typing i{animation:none}
}

/* 앱 다운로드 안내 */
.app-download{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:10px 0 0;padding:10px 14px;background:#fffdf9;border:2px solid #29213d;
  border-radius:18px;box-shadow:4px 4px 0 #c9f571;
}
.app-download-text{margin:0;font-size:13px;line-height:1.5;color:#29213d;word-break:keep-all}
.app-download-text b{font-weight:900}
.app-download-links{display:flex;gap:8px;flex-wrap:wrap}
.app-download-btn{
  display:inline-flex;align-items:center;gap:4px;padding:7px 12px;border-radius:99px;
  background:#29213d;color:#fff;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap;
}
.app-download-btn:hover{background:#463f52}