/* 봄밤 테라피 — 모바일 우선 스타일
   기준: newyearmarket.imweb.me 에서 추출한 값 */

:root{
  --yellow:      #FFC71D;   /* 메인 노랑 */
  --yellow-soft: #FFCF3F;   /* 밝은 노랑 */
  --cream:       #FFF9E7;   /* 바탕 */
  --cream-card:  #FFF7DD;   /* 카드 */
  --ink:         #000000;
  --ink-sub:     #757575;
  --line:        rgba(0,0,0,.10);
  --pill:        50px;
  --pad:         20px;
  --col:         520px;     /* 콘텐츠 최대 폭 */
  --barh:        66px;      /* 하단 고정바 높이 */
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Pretendard,"Pretendard Variable",GmarketSans,
              "Apple SD Gothic Neo","Malgun Gothic","Nanum Gothic",
              "Noto Sans KR",sans-serif;
  font-size:15px;
  line-height:1.6;
  font-weight:400;
  letter-spacing:normal;
  text-align:center;
  word-break:keep-all;              /* 한국어 단어 단위 줄바꿈 */
  padding-bottom:calc(var(--barh) + env(safe-area-inset-bottom));
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit }

/* ---------- 뼈대 ---------- */

.notice{
  background:var(--yellow);
  font-size:13px; font-weight:700;
  padding:11px var(--pad);
}

.head{
  position:sticky; top:0; z-index:20;
  background:var(--cream);
  border-bottom:1px solid var(--line);
  padding:14px var(--pad);
  display:flex; align-items:center; justify-content:center;
}
.head .brand{ font-size:17px; font-weight:700; text-decoration:none; letter-spacing:-.01em }

.wrap{ max-width:var(--col); margin:0 auto; padding:0 var(--pad) }

section{ padding:44px 0 }
section + section{ border-top:1px solid var(--line) }

h1{ font-size:23px; font-weight:700; line-height:1.4; margin:0 0 14px; letter-spacing:-.02em }
h2{ font-size:19px; font-weight:700; line-height:1.4; margin:0 0 8px; letter-spacing:-.01em }
h3{ font-size:16px; font-weight:700; line-height:1.5; margin:0 0 6px }

p{ margin:0 0 18px; line-height:2 }
p:last-child{ margin-bottom:0 }

.lead{ font-size:16px; line-height:1.9 }
.sub{ color:var(--ink-sub); font-size:13px; line-height:1.8; margin:0 0 26px }
.eyebrow{ font-size:12px; font-weight:700; color:var(--ink-sub); margin:0 0 8px; letter-spacing:.04em }

.mark{ background:var(--yellow); font-weight:700; padding:1px 5px; border-radius:4px }

.rule{ border:0; border-top:2px solid var(--yellow); width:44px; margin:26px auto }

/* ---------- 카드 ---------- */

.card{
  background:var(--cream-card);
  border-radius:18px;
  padding:26px 20px;
  margin:0 0 14px;
}
.card:last-child{ margin-bottom:0 }
.card p{ margin-bottom:0 }

/* ---------- 자리표시 (사진 · 일러스트) ---------- */

.ph{
  border:2px dashed rgba(0,0,0,.28);
  border-radius:14px;
  background:repeating-linear-gradient(45deg,
     rgba(0,0,0,.028) 0 10px, transparent 10px 20px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  padding:16px 14px; margin:0 auto 18px;
  color:var(--ink-sub);
}
.ph .tag{
  font-size:11px; font-weight:700; color:var(--ink);
  background:var(--yellow); border-radius:var(--pill);
  padding:4px 12px;
}
.ph .need{ font-size:12px; line-height:1.6; max-width:26em }
.ph .size{ font-size:10.5px; opacity:.75 }

.ph-photo{ aspect-ratio:16/9; width:100% }

/* 일러스트 (실제 파일) */
.il{ width:120px; height:120px; margin:0 auto 18px; display:block }
.hero{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center var(--fy,15%);
       border-radius:16px; margin:0 auto 18px }
.ph-illust{ width:120px; height:120px; border-radius:50%; padding:10px }
.ph-illust .need{ font-size:10.5px; line-height:1.45 }
.ph-illust .tag{ font-size:10px; padding:3px 9px }

/* ---------- 가격표 ---------- */

table{
  width:100%; border-collapse:collapse;
  background:#fff; border-radius:14px; overflow:hidden;
  font-size:15px;
}
caption{
  caption-side:top; font-size:13px; color:var(--ink-sub);
  padding:0 0 10px;
}
th,td{ padding:14px 10px; border-bottom:1px solid var(--line) }
thead th{ background:var(--yellow); font-weight:700; font-size:14px; border-bottom:none }
tbody tr:last-child th, tbody tr:last-child td{ border-bottom:none }
tbody th{ font-weight:700 }
td.amt{ font-weight:700; white-space:nowrap }

.note{ font-size:12.5px; color:var(--ink-sub); margin:12px 0 0; line-height:1.7 }

/* ---------- 목록 ---------- */

.items{ list-style:none; margin:0; padding:0 }
.items li{
  padding:15px 16px; margin:0 0 8px;
  background:var(--cream-card); border-radius:12px;
  font-size:14.5px; line-height:1.75;
}
.items li:last-child{ margin-bottom:0 }
.items b{ display:block; margin-bottom:2px }

.steps{ list-style:none; margin:0; padding:0; counter-reset:s }
.steps li{
  counter-increment:s; position:relative;
  padding:0 0 26px 0; font-size:14.5px; line-height:1.8;
}
.steps li:last-child{ padding-bottom:0 }
.steps li::before{
  content:counter(s);
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin:0 auto 8px;
  background:var(--yellow); border-radius:50%;
  font-size:13px; font-weight:700;
}

/* ---------- FAQ ---------- */

details{
  background:var(--cream-card); border-radius:12px;
  margin:0 0 8px; text-align:left; overflow:hidden;
}
details:last-of-type{ margin-bottom:0 }
summary{
  list-style:none; cursor:pointer;
  padding:16px 46px 16px 18px; position:relative;
  font-size:14.5px; font-weight:700; line-height:1.6;
  min-height:52px; display:flex; align-items:center;
}
summary::-webkit-details-marker{ display:none }
summary::after{
  content:""; position:absolute; right:20px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink);
  transform:rotate(45deg); transition:transform .18s;
}
details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px }
details .ans{ padding:0 18px 18px; font-size:14px; line-height:1.9 }

/* ---------- 지역 링크 ---------- */

.areas{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center }
.areas a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 16px;
  background:var(--cream-card); border-radius:var(--pill);
  font-size:14px; font-weight:700; text-decoration:none;
}
.areas a[aria-current="page"]{ background:var(--yellow) }

/* ---------- 안전 고지 ---------- */

.safety{
  font-size:13px; line-height:1.9; color:var(--ink-sub);
  background:var(--cream-card); border-radius:12px; padding:18px 16px;
}

/* ---------- 푸터 ---------- */

footer{
  background:var(--yellow); margin-top:0;
  padding:30px var(--pad) 34px;
  font-size:12.5px; line-height:2;
}
footer .fbrand{ font-size:15px; font-weight:700; margin-bottom:6px }

/* ---------- 하단 고정 문의바 ---------- */

.bar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; gap:8px;
  padding:9px var(--pad) calc(9px + env(safe-area-inset-bottom));
  background:var(--cream);
  border-top:1px solid var(--line);
}
.bar a{
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height:48px; border-radius:var(--pill);
  font-size:15px; font-weight:700; text-decoration:none;
}
.bar .call{ background:var(--ink); color:#fff }
.bar .sms{ background:var(--yellow); color:var(--ink) }

/* ---------- 큰 화면 ---------- */

@media (min-width:600px){
  body{ font-size:15.5px }
  h1{ font-size:26px }
  h2{ font-size:21px }
  section{ padding:56px 0 }
  .bar{ justify-content:center }
  .bar a{ flex:0 1 240px }
}

/* ---------- 움직임 (강) ---------- */

a,summary,.card,.items li,details,.areas a,.bar a{
  -webkit-tap-highlight-color:transparent;
}

/* 누를 때 확실히 눌림 */
a,summary,.card,.items li,details{
  transition:transform .18s cubic-bezier(.34,1.8,.5,1);
}
.areas a:active,
.bar a:active{ transform:scale(.86) }
.card:active,
.items li:active,
summary:active{ transform:scale(.94) }
.bar a{ transition:transform .18s cubic-bezier(.34,1.8,.5,1), filter .18s }
.bar a:active{ filter:brightness(.92) }

/* FAQ 펼칠 때 답이 떨어짐 */
details[open] .ans{ animation:drop .34s cubic-bezier(.2,1.5,.4,1) }
@keyframes drop{
  0%  { opacity:0; transform:translateY(-14px) scale(.96) }
  100%{ opacity:1; transform:none }
}
summary::after{ transition:transform .32s cubic-bezier(.2,1.7,.4,1) }

/* ---- 등장 ---- */

.reveal{
  opacity:0; transform:translateY(46px) scale(.90);
  transition:opacity .45s ease, transform .72s cubic-bezier(.2,1.45,.35,1);
}
.reveal.in{ opacity:1; transform:none }

/* 카드는 좌우로 번갈아 기울었다가 똑바로 섬 */
.reveal.card              { transform:translateY(46px) rotate(-4deg) scale(.92) }
.reveal.card:nth-of-type(even){ transform:translateY(46px) rotate(4deg) scale(.92) }
.reveal.card.in           { transform:none }

/* 안쪽 항목이 하나씩 튀어나옴 */
.reveal.in .r-item{
  animation:popin .58s cubic-bezier(.2,1.6,.4,1) both;
  animation-delay:calc(var(--i,0) * 80ms);
}
@keyframes popin{
  0%  { opacity:0; transform:translateY(30px) scale(.82) }
  60% { opacity:1 }
  100%{ opacity:1; transform:none }
}

/* 번호 동그라미가 돌면서 튀어나옴 */
.reveal .steps li::before{
  transform:scale(.1) rotate(-160deg);
  transition:transform .7s cubic-bezier(.2,2,.4,1) .1s;
}
.reveal.in .steps li::before{ transform:none }

/* 노란 밑줄이 쭉 늘어남 */
.reveal .rule{ width:0; transition:width .6s cubic-bezier(.2,1.5,.4,1) .22s }
.reveal.in .rule{ width:44px }

/* 형광펜이 좌에서 우로 칠해짐 */
.mark{
  background-color:transparent;
  background-image:linear-gradient(var(--yellow),var(--yellow));
  background-repeat:no-repeat;
  background-size:0 100%;
  transition:background-size .75s cubic-bezier(.2,1,.4,1) .35s;
}
.reveal.in .mark{ background-size:100% 100% }

/* ---- 계속 움직이는 것 ---- */

/* 그림 자리는 떠다니며 살랑 흔들림 */
.ph-illust, .il{ animation:float 2.8s ease-in-out infinite }
@keyframes float{
  0%,100%{ transform:translateY(0) rotate(-4deg) }
  50%    { transform:translateY(-16px) rotate(4deg) }
}
.ph-illust:nth-of-type(even), .il:nth-of-type(even){ animation-delay:-1.4s }

/* 사진 자리는 아주 천천히 */
.ph-photo, .hero{ animation:floatp 5s ease-in-out infinite }
@keyframes floatp{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-7px) }
}

/* 위 노란 띠 — 안쪽 글자만 좌우로 살랑 (띠는 잘라내 가로 스크롤 방지) */
.notice{ overflow:hidden }
.notice > span{ display:inline-block; animation:sway 2.6s ease-in-out infinite }
@keyframes sway{
  0%,100%{ transform:translateX(0) }
  25%    { transform:translateX(-4px) }
  75%    { transform:translateX(4px) }
}

/* 요금표 노란 머리가 은은하게 */
thead th{ animation:glow 3s ease-in-out infinite }
@keyframes glow{
  0%,100%{ filter:brightness(1) }
  50%    { filter:brightness(1.09) }
}

/* 문자 버튼이 가끔 통통 튐 */
.bar .sms{ animation:nudge 3.4s ease-in-out infinite 1.5s }
@keyframes nudge{
  0%,84%,100%{ transform:none }
  88%       { transform:scale(1.09) rotate(-2deg) }
  93%       { transform:scale(.97) rotate(1deg) }
}

/* 하단 바가 아래에서 올라옴 */
.bar{ animation:barup .55s cubic-bezier(.2,1.5,.4,1) both }
@keyframes barup{
  from{ transform:translateY(110%) }
  to  { transform:none }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation:none !important; transition:none !important }
  .reveal{ opacity:1; transform:none }
  .reveal .rule{ width:44px }
  .reveal .steps li::before{ transform:none }
  .mark{ background-size:100% 100% }
}