/* 사이 — 프로토타입(web/prototype.html) 베이스 스타일의 실서비스 포팅.
   폰 목업 프레임 대신 모바일 우선 셸(.shell)을 쓴다. */

html, body { margin: 0; padding: 0; background: #f2efe9; }
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
body {
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  color: #2b2724;
}
a { color: oklch(0.5 0.06 230); text-decoration: none; }
a:hover { color: oklch(0.42 0.07 230); }
textarea, button, input { font-family: inherit; }
button:disabled { opacity: 0.45; cursor: not-allowed !important; }

@keyframes riseIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes softPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.om-scroll::-webkit-scrollbar { width: 6px; }
.om-scroll::-webkit-scrollbar-thumb { background: #e2dbd2; border-radius: 3px; }

.hov-item:hover { background: #eae5dd !important; }
.hov-cta:hover { background: #413a34 !important; }
.hov-suggest:hover { background: #efe9e1 !important; }

/* 앱 셸 — 모바일 우선, 데스크탑에서는 배경 위 카드 */
.shell {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  background: #fdfbf8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 520px) {
  body { padding: 28px 16px 48px; }
  .shell {
    min-height: calc(100dvh - 76px);
    max-height: calc(100dvh - 76px);
    border: 1px solid #ded7cd;
    border-radius: 28px;
    box-shadow: 0 26px 60px -28px rgba(60, 48, 36, 0.35), 0 2px 6px rgba(60, 48, 36, 0.06);
  }
}
@media (max-width: 519.98px) {
  .shell { min-height: 100dvh; height: 100dvh; }
}

/* 셸 상단 얇은 브랜드 바 */
.shell-top {
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4c453f;
}
.shell-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.shell-body.no-scroll { overflow-y: hidden; }

/* S12 다듬기 확인 오버레이 */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(43, 39, 36, 0.32);
  display: flex;
  align-items: flex-end;
  z-index: 20;
  animation: fadeIn .2s ease both;
}
.overlay-sheet {
  width: 100%;
  max-height: 88%;
  overflow-y: auto;
  background: #fdfbf8;
  border-radius: 22px 22px 0 0;
  animation: riseIn .28s ease both;
}

/* 상단 배너 */
.banner {
  flex: none;
  margin: 10px 20px 0;
  padding: 12px 15px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.65;
  animation: riseIn .25s ease both;
}
.banner-info { background: #f1ede6; color: #6f6862; }
.banner-warn { background: oklch(0.97 0.014 60); border: 1px solid oklch(0.9 0.03 60); color: #3c3630; }