/* 모카의 방 — 모카 디자인 시스템(claude.ai/artifact/MYkgrgtVkEYaNdW34thynP)의 토큰을 그대로 쓴다.
   한 가지 테마(라이트). 채팅 줄기가 가운데로 흐르고, 소모임 이야기는 그 사이에 넓은 판으로 끼어든다. */
:root {
  --fur: #fffafb; --blush: #f9d8da; --rose: #dbb0a9; --lavender: #c9cff0; --ear: #f3aeb2;
  --star: #f9a8be; --ruby: #862f4d; --ruby-deep: #5a2735; --ink: #50222d; --plum: #704a57; --gold: #e3ae6f;
  --mood: var(--star);
  --font-display: "Jua", "Gowun Dodum", system-ui, sans-serif;
  --font-body: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-hand: "Gaegu", "Gowun Dodum", cursive;
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 40px;
  --radius-sm: 12px; --radius-md: 24px; --radius-pill: 999px;
  --glow-star: 0 0 24px rgba(249, 168, 190, 0.65);
  --lift: 0 8px 24px rgba(80, 34, 45, 0.12);
  --thread: 560px; --wide: 1040px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fur); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.7;
  word-break: keep-all; overflow-wrap: break-word;   /* 한국어는 낱말 단위로 줄을 바꾼다 */
  /* 분홍 안개: 모카 그림의 빛을 아주 옅게 */
  background-image: radial-gradient(60rem 30rem at 85% -10%, rgba(249, 216, 218, .75), transparent 70%),
                    radial-gradient(40rem 26rem at -10% 30%, rgba(201, 207, 240, .35), transparent 70%);
  background-repeat: no-repeat;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ruby); }
:focus-visible { outline: 2px solid var(--ruby); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink); text-wrap: balance; margin: 0; }
h2 { font-size: clamp(30px, 6vw, 40px); line-height: 1.2; }
h3 { font-size: 26px; line-height: 1.35; }
p { margin: 0; }
.hand { font-family: var(--font-hand); color: var(--plum); font-size: 26px; line-height: 1.25; }
.eyebrow { font-size: 13px; letter-spacing: .04em; color: var(--plum); margin-bottom: var(--space-1); }  /* 대문자로 바꾸지 않는다: MoCA는 그 모양 그대로 */
.fine { font-size: 14px; line-height: 1.6; color: var(--plum); }

/* --- 위쪽 줄 ----------------------------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--space-2);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: rgba(255, 250, 251, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(219, 176, 169, .35);
}
.me { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.me img { width: 40px; height: 40px; border-radius: 50%; background: var(--blush); }
.me-name { font-family: var(--font-display); font-size: 22px; line-height: 1; }
.me-room { font-size: 14px; color: var(--plum); white-space: nowrap; }
.mood { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--plum); white-space: nowrap; }
.mood b { color: var(--ink); font-weight: 400; font-family: var(--font-display); font-size: 16px; }
.mood-star { width: 22px; height: 22px; fill: var(--mood); filter: drop-shadow(0 0 6px var(--mood)); transition: fill .6s, filter .6s; }
.join-top { flex: none; }
@media (max-width: 520px) { .me-room { display: none; } }

/* --- 단추 ---------------------------------------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill);
  font: inherit; font-size: 16px; text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: background .2s, color .2s, transform .15s;
}
.pill:active { transform: scale(.97); }
.pill-ruby { background: var(--ruby); color: var(--fur); }
.pill-ruby:hover { background: var(--ruby-deep); }
.pill-ghost { background: transparent; color: var(--ruby); border-color: var(--ruby); min-height: 38px; padding: 0 16px; font-size: 15px; }
.pill-ghost:hover { background: var(--blush); }
.pill-soft { background: var(--blush); color: var(--ink); border-color: var(--ear); }
.pill-soft:hover { background: var(--ear); }

/* --- 첫 화면 ------------------------------------------------------------------------------------- */
.hero { max-width: var(--thread); margin: 0 auto; padding: var(--space-3) 16px 0; text-align: center; }
.hero-art { position: relative; width: min(300px, 72vw); margin: 0 auto; }
.logo { width: 100%; animation: bob 5s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(134, 47, 77, .14)); }
.hero-note { margin-top: 2px; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
.spark { position: absolute; width: 16px; height: 16px; background: var(--gold);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: twinkle 3.2s ease-in-out infinite; }
.s1 { left: -4%; top: 22%; } .s2 { right: -2%; top: 8%; width: 12px; height: 12px; animation-delay: .8s; background: var(--star); }
.s3 { right: 2%; bottom: 20%; animation-delay: 1.6s; } .s4 { left: 6%; bottom: 6%; width: 10px; height: 10px; animation-delay: 2.2s; background: var(--star); }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }

/* --- 채팅 ---------------------------------------------------------------------------------------- */
.thread { max-width: var(--thread); margin: 0 auto; padding: var(--space-2) 16px; display: flex; flex-direction: column; gap: 10px; }
.thread:empty { padding: 0; }
.row { display: flex; align-items: flex-end; gap: 8px; animation: pop .32s ease-out both; }
.row.moca { justify-content: flex-start; }
.row.visitor { justify-content: flex-end; }
.row .face { width: 34px; height: 34px; border-radius: 50%; background: var(--blush); flex: none; }
.row .face.ghost { visibility: hidden; }
.bubble {
  max-width: min(78%, 440px); padding: 10px 16px; border-radius: 20px; line-height: 1.6;
}
.moca .bubble { background: var(--blush); color: var(--ink); border-bottom-left-radius: 6px; }
.visitor .bubble { background: var(--ruby); color: var(--fur); border-bottom-right-radius: 6px; }
.bubble b { font-family: var(--font-display); font-weight: 400; font-size: 1.08em; }
.bubble ol { margin: 4px 0 0; padding-left: 1.3em; }
.bubble ol li + li { margin-top: 2px; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.typing .bubble { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--plum); opacity: .5; animation: dot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
.typing .slow { font-size: 14px; color: var(--plum); margin-left: 6px; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

.composer { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; animation: pop .3s ease-out both; }
.composer form {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: var(--fur); border: 2px solid var(--ear); border-radius: var(--radius-pill); padding: 4px 4px 4px 18px;
  box-shadow: var(--lift);
}
.composer form:focus-within { border-color: var(--ruby); }
.composer input {
  flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--ink); padding: 8px 0;
}
.composer input:focus { outline: none; }
.composer input::placeholder { color: var(--plum); opacity: .8; }
.composer .count { font-size: 13px; color: var(--plum); font-variant-numeric: tabular-nums; }
.composer .send {
  width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ruby); color: var(--fur);
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.composer .send:disabled { background: var(--ear); cursor: default; }
.composer .send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.chip {
  min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); border: 2px solid var(--ruby);
  background: var(--fur); color: var(--ruby); font: inherit; font-size: 15px; cursor: pointer;
}
.chip:hover { background: var(--blush); }
.chip.quiet { border-color: var(--rose); color: var(--plum); }

/* --- 판 (소모임 이야기, 굿즈) ------------------------------------------------------------------ */
.panel {
  max-width: var(--wide); margin: var(--space-3) auto; padding: var(--space-4) clamp(16px, 4vw, 48px);
  background: rgba(255, 250, 251, .9); border-radius: 32px; box-shadow: var(--lift);
  border: 1px solid rgba(243, 174, 178, .45);
  animation: rise .6s ease-out both;
}
@media (max-width: 1072px) { .panel { margin-left: 16px; margin-right: 16px; } }
.js .later:not(.shown) { display: none; }
.panel { scroll-margin-top: 76px; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.panel h2 { margin-bottom: var(--space-2); }
.panel h3 { margin: var(--space-3) 0 var(--space-1); }
.panel p + p { margin-top: var(--space-1); }
.panel-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.panel-body { min-width: 0; }
@media (max-width: 760px) { .panel-grid { grid-template-columns: 1fr; } .panel-grid .phone { order: 2; } }

.stars { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.stars li { position: relative; padding-left: 26px; }
.stars li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 14px; height: 14px; background: var(--star);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.activities { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.activities li { background: var(--blush); border-radius: var(--radius-md); padding: var(--space-2); display: grid; gap: 4px; align-content: start; }
.activities svg { width: 30px; height: 30px; fill: none; stroke: var(--plum); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.activities b { font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.activities span { font-size: 15px; line-height: 1.6; color: var(--ink); }

.phone { margin: 0; }
.phone img {
  border-radius: 28px; border: 6px solid var(--fur); box-shadow: 0 0 0 1px var(--ear), var(--lift);
  max-height: 560px; width: 100%; object-fit: cover; object-position: top;
}
.phone figcaption { font-size: 14px; color: var(--plum); text-align: center; margin-top: var(--space-1); }
.phone-small { max-width: 260px; justify-self: center; }

.duty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--space-4); align-items: start;
  padding: var(--space-3) 0; border-top: 1px dashed var(--ear); }
.duty:first-of-type { border-top: 0; }
.duty-text { min-width: 0; }
.duty-text h3:first-child { margin-top: 0; }
.duty-text .pill { margin-top: var(--space-2); }
@media (max-width: 760px) { .duty { grid-template-columns: 1fr; } }
.sub-title { margin-top: var(--space-4); }

/* 쓰다듬기 */
.pet { display: grid; gap: 12px; justify-items: center; }
.pet-photo { position: relative; width: 100%; max-width: 340px; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--lift); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.pet-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; width: 100%; transition: transform .25s; }
.pet-photo.petted img { transform: scale(1.03) rotate(-1deg); }
.pet-bubble {
  position: absolute; left: 12px; top: 12px; max-width: 70%; padding: 6px 14px; border-radius: 16px 16px 16px 4px;
  background: var(--fur); color: var(--ink); font-family: var(--font-hand); font-size: 22px; line-height: 1.3; box-shadow: var(--lift);
}
.hearts { position: absolute; inset: 0; pointer-events: none; }
.heart { position: absolute; font-size: 26px; color: var(--ruby); animation: float 1.1s ease-out forwards; text-shadow: 0 0 8px var(--fur); }
@keyframes float { from { opacity: 1; transform: translate(-50%, -50%) scale(.6); } to { opacity: 0; transform: translate(-50%, -160%) scale(1.3); } }
.pet-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pet-count { font-size: 14px; color: var(--plum); font-variant-numeric: tabular-nums; }
.pet-count b { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--ruby); }

/* 지난 활동 카드 */
.activity-card {
  display: grid; gap: 4px; text-decoration: none; color: var(--ink); background: var(--blush);
  border-radius: var(--radius-md); padding: 12px 12px var(--space-2); transition: transform .2s, box-shadow .2s;
}
.activity-card:hover { transform: translateY(-3px); box-shadow: var(--lift); }
.activity-card img { border-radius: var(--radius-sm); background: #12121f; aspect-ratio: 480 / 399; object-fit: cover; margin-bottom: 8px; }
.activity-meta { font-size: 14px; color: var(--plum); padding: 0 6px; }
.activity-card b { font-family: var(--font-display); font-weight: 400; font-size: 24px; padding: 0 6px; }
.activity-go { color: var(--ruby); padding: 0 6px; }

/* 굿즈 */
.goods { border: 0; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.goods legend { font-family: var(--font-display); font-size: 22px; margin-bottom: var(--space-2); padding: 0; }
@media (max-width: 640px) { .goods { grid-template-columns: 1fr; } }
.good { position: relative; display: grid; gap: 10px; cursor: pointer; padding: 10px; border-radius: var(--radius-md);
  background: var(--fur); border: 2px solid var(--ear); transition: border-color .2s, transform .2s, box-shadow .2s; }
.good:hover { transform: translateY(-3px); box-shadow: var(--lift); }
.good input { position: absolute; opacity: 0; pointer-events: none; }
.good img { border-radius: 16px; aspect-ratio: 1; object-fit: cover; }
.good b { font-family: var(--font-display); font-weight: 400; font-size: 20px; text-align: center; padding-bottom: 4px; }
.good:has(input:checked) { border-color: var(--ruby); box-shadow: 0 0 0 3px var(--blush), var(--lift); }
.good:has(input:checked) b::after { content: " ★"; color: var(--gold); }
.good:has(input:focus-visible) { outline: 2px solid var(--ruby); outline-offset: 3px; }
.panel-goods .fine { margin-top: var(--space-2); }
.thread-goods { padding-left: 0; padding-right: 0; max-width: none; }

/* --- 끝 ------------------------------------------------------------------------------------------ */
.footer { max-width: var(--thread); margin: var(--space-4) auto 0; padding: var(--space-4) 16px calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  text-align: center; display: grid; justify-items: center; gap: var(--space-2); }
.footer img { width: 72px; height: 72px; border-radius: 50%; background: var(--blush); }
.footer-line { font-family: var(--font-display); font-size: 24px; line-height: 1.35; text-wrap: balance; }

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