/* 공통 바닥 — 이 시안은 자기 눈금을 갖고 있어 layouts.css 의 눈금을 쓰지 않습니다. */
html { overflow-x: hidden; }
h1, h2, h3, h4 { line-height: 1.3; }
.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* RiRus(rirus.jp) — 흰 바탕에 수채 얼룩(분홍·주황·청록·보라)이 사진 뒤에 번지고, 사진은 큰 둥근 덩어리로
   오려 냅니다. 히어로 → 「RiRus가 지향하는 것은」 Rire+US 원 둘 → Service: 브랜드마다 색이 다른 제목
   (Mate 분홍·Medical 주황·Life 초록·Stay 청록·Plus 남색·Job 보라·Work) + 둥근 사진 + 노란 원 대상 배지
   → Garden 배너 → Voice 카드 → Place 지역·서비스 체크박스 검색 → Contact 분홍 → News → Columns
   → Flow·Company. 회색 글(#6e6965), 14.6px 눈금. */
/* 색 전환기(palette.js)가 색을 고르기 전에는 이 시안 본래의 색을 씁니다.
   .js-pal 이 붙으면 palettes.css 의 --primary 가 이깁니다. */
body:not(.js-pal) { --primary: #ed828b; --primary-dk: #aa5d64; --primary-lt: #fbe0e3; }
body { --ink: #6e6965; --pink: var(--primary); --or: #eba067; --green: #7acc93; --teal: #67d0db; --navy: #305aa5; --purple: #bf96d9; --yel: #f9dc5c; }
body { color: var(--ink); font-size: 14.6px; overflow-x: hidden; word-break: keep-all; }
p, h2, h3 { text-wrap: pretty; }
h1, h2, h3 { color: var(--ink); font-weight: 600; }
.wc { position: absolute; border-radius: 50% 40% 60% 45% / 45% 60% 40% 55%; filter: blur(6px); opacity: .55; z-index: 0; }
.blobimg { border-radius: 52% 48% 45% 55% / 48% 55% 45% 52%; object-fit: cover; }
.dots { background-image: radial-gradient(#e6e3df 1.2px, transparent 1.2px); background-size: 18px 18px; }

.hd { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); }
.hd__in { display: flex; align-items: center; height: 76px; gap: 30px; }
.logo { font-size: 24px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.logo i { width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(var(--pink) 0 25%, var(--or) 25% 50%, var(--green) 50% 75%, var(--teal) 75%); }
.logo small { font-size: 12px; font-weight: 400; margin-left: 6px; }
.nv { margin-left: auto; display: flex; gap: 22px; font-size: 12px; }
.hd__btn { background: var(--pink); color: #1f1f1f; padding: 10px 18px; border-radius: 999px; font-size: 12px; }

.kv { position: relative; height: 740px; }
.kv .wc:nth-child(1) { left: -80px; top: 80px; width: 380px; height: 320px; background: var(--pink); }
.kv .wc:nth-child(2) { right: -60px; top: 20px; width: 300px; height: 260px; background: var(--teal); }
.kv .wc:nth-child(3) { left: 30%; bottom: -60px; width: 500px; height: 260px; background: var(--or); }
.kv img { position: relative; z-index: 1; width: min(900px, 90%); height: 560px; margin: 60px auto 0; }
.kv h1 { position: absolute; left: 8%; top: 120px; z-index: 2; background: #fff; padding: 16px 20px; font-size: 14.6px; font-weight: 400; line-height: 1.8; border-radius: 4px; }

.sec { padding: 90px 0; position: relative; }
.sec__t { font-size: 34px; letter-spacing: .1em; font-weight: 400; margin-bottom: 6px; }
.sec__t small { display: block; font-size: 12px; letter-spacing: .2em; }
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.why .wc { left: -100px; top: 0; width: 700px; height: 500px; background: #f3ece8; opacity: 1; filter: none; }
.circles { position: relative; display: flex; justify-content: center; align-items: center; gap: 0; }
.circles div { width: 160px; height: 160px; border-radius: 50%; border: 2px solid var(--pink); display: grid; place-content: center; text-align: center; background: rgba(255,255,255,.7); }
.circles div + div { margin-left: -30px; border-color: var(--teal); }
.circles b { font-size: 28px; } .circles small { font-size: 12px; }
.why__t { position: relative; }
.why__t h2 { font-size: 24px; margin-bottom: 20px; line-height: 1.7; text-wrap: balance; }
.why__t p { font-size: 14px; line-height: 2.2; margin-bottom: 20px; }
.circ { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0; white-space: nowrap; }
.circ i { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-style: normal; }

.svc { display: grid; gap: 80px; }
.sv { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; position: relative; }
.sv:nth-child(even) > img { order: 2; }
.sv img { width: 100%; height: 340px; position: relative; z-index: 1; }
.sv .wc { width: 300px; height: 240px; }
.sv:nth-child(odd) .wc { left: -40px; top: -40px; } .sv:nth-child(even) .wc { right: -40px; bottom: -40px; }
.sv h3 { font-size: 24px; letter-spacing: .1em; margin-bottom: 4px; }
.sv h3 small { display: block; font-size: 13px; letter-spacing: 0; color: var(--ink); }
.sv p { font-size: 15px; line-height: 1.9; margin: 14px 0 20px; color: #4f4a46; max-width: 34em; }
.badge { position: absolute; z-index: 2; width: 90px; height: 90px; border-radius: 50%; background: var(--yel); display: grid; place-items: center; text-align: center; font-size: 12px; line-height: 1.4; color: #333; }
.sv:nth-child(odd) .badge { right: 44%; top: -20px; } .sv:nth-child(even) .badge { left: 44%; top: -20px; }
.garden { margin-top: 80px; position: relative; border-radius: 20px; overflow: hidden; display: flex; height: 260px; }
.garden img { flex: 1; object-fit: cover; min-width: 0; opacity: .8; }
.garden div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.garden b { font-size: 40px; color: var(--primary-dk); background: rgba(255,255,255,.85); padding: 6px 30px; border-radius: 999px; }
.garden small { display: block; margin-top: 10px; background: var(--yel); color: #333; padding: 4px 14px; border-radius: 999px; font-size: 12px; width: fit-content; margin-inline: auto; }

.voice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.voice div { background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.06); padding: 24px 44px 24px 24px; font-size: 13px; line-height: 1.8; position: relative; }
.voice span { font-size: 12px; color: #1f1f1f; padding: 2px 8px; border-radius: 999px; }
.voice b { display: block; font-size: 14px; margin: 8px 0; }
.voice em { position: absolute; right: 20px; top: 20px; writing-mode: vertical-rl; font-size: 12px; font-style: normal; color: #6a6a6a; }
.place { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px; background: rgba(255,255,255,.9); border-radius: 20px; position: relative; z-index: 1; }
.place h4 { font-size: 14px; margin-bottom: 12px; } .place h4 small { font-size: 12px; color: #6a6a6a; margin-left: 8px; }
.place label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin: 0 14px 8px 0; }
.place label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); }
.search { grid-column: 1 / -1; border-bottom: 1px solid var(--ink); padding: 10px; text-align: center; font-size: 13px; }
.contact { text-align: center; }
.contact .wc { left: 5%; top: 30px; width: 200px; height: 160px; background: var(--green); }
.contact h2 { font-family: "Gowun Batang", serif; font-style: italic; color: var(--primary-dk); font-size: 26px; margin-bottom: 14px; }
.contact b { font-size: 34px; display: block; } .contact p { font-size: 13px; margin: 10px 0 24px; }
.contact__btns { display: flex; justify-content: center; gap: 14px; }
.contact__btns a { padding: 14px 40px; border-radius: 999px; color: #fff; font-size: 13px; background: var(--ink); white-space: nowrap; }
.contact__btns a:last-child { background: var(--pink); color: #1f1f1f; }
.news li { display: flex; gap: 20px; padding: 14px 0; border-bottom: 1px solid #eee; font-size: 13px; }
.news em { font-style: normal; color: #6a6a6a; } .news span { font-size: 12px; background: var(--ink); color: #fff; padding: 2px 8px; white-space: nowrap; align-self: center; line-height: 1.5; }
.news em { white-space: nowrap; }
.other { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.other a { position: relative; height: 220px; border-radius: 12px; overflow: hidden; }
.other img { width: 100%; height: 100%; object-fit: cover; }
/* 밝은 사진(창문) 위 흰 글이 보이도록 아래쪽을 어둡게 */
.other a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 80%); }
.other b { z-index: 1; }
.other b { position: absolute; left: 30px; bottom: 30px; color: #fff; font-size: 30px; text-shadow: 0 2px 8px rgba(0,0,0,.5); } .other b small { display: block; font-size: 12px; }
.ft { padding: 40px 24px; text-align: center; font-size: 12px; color: #6a6a6a; line-height: 1.9; }
.ft__legal { font-size: 12px; color: #6a6a6a; }
.totop { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
@media (max-width: 900px) { .nv { display: none; } .kv { height: 480px; } .kv img { height: 340px; } .why, .sv, .voice, .place, .other { grid-template-columns: 1fr; } .sv:nth-child(even) > img { order: 0; } .badge { display: none; } }

/* ── 원래 인라인 style 이던 자리 — CSP 때문에 클래스로 뺐습니다 ── */
.si-1 { text-align:center; }
.si-2 { background:var(--pink); }
.si-3 { color:var(--primary-dk); }
.si-4 { background:var(--or); }
.si-5 { color:#9b6943; }
.si-6 { background:var(--green); }
.si-7 { color:#4c805c; }
.si-8 { background:var(--teal); }
.si-9 { color:#3e7e85; }
.si-10 { background:var(--navy); }
.si-11 { color:var(--navy); }
.si-12 { background:var(--purple); }
.si-13 { color:#876a9a; }
.si-14 { font-size:13px;margin-bottom:30px; }
.si-15 { position:relative; }
.si-16 { left:-60px;top:40px;width:400px;height:300px;background:var(--pink); }
.si-17 { right:-40px;bottom:40px;width:300px;height:260px;background:var(--teal); }
.si-18 { position:absolute; right:0; top:98px; }

/* 좁은 화면 — 제목 한 글자 줄 막기, 버튼·태그 한 줄, 소식 줄은 날짜·태그 아래로 제목 */
@media (max-width: 900px) {
  .why__t h2 { font-size: 21px; }
  .contact__btns { flex-wrap: wrap; gap: 10px; }
  .contact__btns a { padding: 14px 24px; }
  .news li { flex-wrap: wrap; gap: 6px 14px; }
  .si-18 { top: 96px; }
  .other b { left: 22px; bottom: 22px; }
}
/* 수채 얼룩이 글 위로 올라와 글이 흐려지지 않게, 글을 얼룩 위로 */
.sv > div, .contact > :not(.wc) { position: relative; z-index: 1; }

/* ── 마감 다듬기 ── */
.nw { white-space: nowrap; }
/* 제목도 수채 얼룩 위로 — 얼룩이 제목 글자를 물들이지 않게 */
.sec__t { position: relative; z-index: 1; }
.sec__t .si-18 { top: 8px; }
/* 비용 절의 분홍 얼룩은 제목이 아니라 표 뒤로 */
.si-16 { top: 150px; }
@media (max-width: 900px) {
  /* 좁은 화면 메뉴 — 숨기지 않고 로고 아래 한 줄로 */
  .hd__in { flex-wrap: wrap; height: auto; padding: 12px 0 10px; row-gap: 10px; column-gap: 12px; }
  .hd__btn { margin-left: auto; }
  .nv { display: flex; order: 3; width: 100%; margin-left: 0; justify-content: space-between; gap: 8px; white-space: nowrap; }
  .sec__t .si-18 { top: 6px; }
  /* 소식 줄 — 날짜·꼬리표 윗줄, 제목은 언제나 아랫줄 */
  .news li { gap: 6px 12px; }
  .news li em { order: -3; } .news li span { order: -2; }
  .news li::before { content: ""; order: -1; flex-basis: 100%; height: 0; }
  /* 수채 얼룩은 사진 위쪽 모서리에만 — 글 뒤로 번지지 않게 */
  .sv:nth-child(even) .wc { right: -40px; bottom: auto; top: -40px; }
  .contact .wc { left: -40px; top: -10px; width: 150px; height: 100px; }
  .si-16 { left: -80px; top: 170px; width: 300px; height: 240px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .nv { justify-content: flex-start; gap: 28px; }
}
@media (max-width: 600px) {
  .sec { padding: 64px 0; }
  .garden { height: 220px; }
  .garden b { font-size: 28px; padding: 6px 22px; }
}
/* 밝은 창문 사진 위에서도 흰 제목·부제가 또렷하게 */
.other a::after { background: linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,.4) 50%, rgba(0,0,0,.08) 85%); }
@media (max-width: 380px) { .why__t h2 { font-size: 19px; } }